A dashboard app is a visual graphical, real-time representation of a report. Examples include a visual representation of financial systems or a visual representation and a controller for embedded devices such as industrial equipment.
Learn how to quickly design a fully fledged web application by using one of our two ready to use dashboard templates without requiring extensive HTML and CSS skills. Both dashboard templates can be downloaded from GitHub.
Responsive web design simply means that the web app scales from working on small displays, such as a on a phone, to large desktop monitors. Responsive web design is about creating web pages that look good on all devices.
Figure 2 below shows the AdminLTE dashboard template and how the various components are generated on the server side. The server side logic separates the page content from the "site theme". The section framed in brown in figure 2 shows the page content. This content is injected at the server side, inserted into the main content, and sent to the browser. The "theme" includes everything except the page content. The theme also includes dynamically generated content framed in green in figure 2, including the menu to the left, the page title, and the breadcrumb.
Lua Server Pages, or LSP for short, is a technology similar to PHP that uses the Lua language on the server side for HTML rendering. In a previous article, we explained how to dynamically build a navigation menu for a web site using LSP by having each page include a common header and footer element. Although the basic dashboard presented in this tutorial is easy to implement, it may not be the best solution for a server rendered web application framework.
Figure 3 below shows how template.lsp renders the common components (left) and then injects whatever page the user requested to the right by calling the LSP page function that is stored in the request/response environment.
The benefit with the solution shown in figure 3 vs. server side includes, as explained in our Dynamic Navigation Menu tutorial, is that the "theme" can manage much more than just the navigation menu and the page content stays clean. The page content can be static or dynamically generated. Another cool feature is that LSP pages (the page content) do not have to have the .lsp extension. In our dashboard templates, we use the extension .html for both static and dynamic content.
The two dashboard apps store the page content, including server side Lua code, as regular files. This construction makes the two dashboard apps compatible with Barracuda App Server powered products that do not include a database. In fact, the current design enables embedded systems to store the pages directly in flash memory without using a file system or database. However, the Mako Server includes the SQLite database engine, making it very easy and convenient to store the content in a database. You can easily convert one of the dashboard apps to a complete database driven Content Management System by applying the information provided in the URL to Database Mapping tutorial.
SharkTrustX is a product based on the AdminLTE template. The product includes support for authentication using its own SQL database and Single Sign On via Microsoft Azure Active Directory. The source code is available on Github. See the Mako Server SharkTrustX tutorial for details.