Creating an Admin Dashboard with Bootstrap 4 and AngularJS
In my amateur days of web development, I was completely against Bootstrap, mainly because it confused the hell out of me. Skeptical towards reading documentation and accepting new things, at 18, I preferred writing 600+ lines of CSS that created sloppy, absolute-positioned components rather than indulging in the benefits and simplicity of the Bootstrap styling framework. I was young and naive, so seeing a class definition like:
class="btn-sm btn-danger float-right ml-2"caused anxiety, and the LAST thing I wanted to do was go search the web for what it meant (can you imagine being afraid of reading documentation and how hard life must have been?!). But now I’m older (and wiser) and much more attuned towards indulging in new things, and have come to realize that Bootstrap is one of the most useful, and handy tricks in the book of web development to help get your application built and functioning very quickly.
This post aims to highlight the resources and techniques I used to create a clean, fluid administrative dashboard using Angular 1 and Bootstrap 4. Rather than focusing on the content in the dashboard, I will outline the components and methodologies behind creating an effective dashboard for a variety of purposes.
Step 1: Navigation
To make an administrative dashboard, side-navigation is essential. A side-nav should be the main menu for user functionality that: 1. allows simple traversal through the application’s pages and 2. gives users the ability to create/edit/delete dashboard content. The side-navigation should be a fluid way to dynamically change the content in the main view container, or reveal more menu items.
Step 2: UI and Color Scheme
An important attribute of administrative dashboards (and all web design) is the ability to appeal to the eye and keep users focused on the important content. You can’t expect to deliver important data visualizations or finance reports when they are unbearable to look at. I have a growing obsession for flat color schemes which I feel give web pages an incredibly clean, modern, and sophisticated look. Flat colors are soft enough to withhold user attention for long periods of time, but offer enough contrast to highlight important components and add vibrant distinctions across web pages. Here is a great reference for color codes ranging across a wide color palette.
Im also a big advocate for block-type grid components in webpages. Examples like three-column block designs, responsive grids, and the new Bootstrap card components offer great ways to space out application components and present data in an intuitive fashion. Below are some webpages that exploit these designs (including an administrative dashboard example!).
In addition to color choice, the positioning and overall layout of components is essential for creating a lucid dashboard and effectively displaying data.
Step 3: Forms
Now that we have a navigable menu and a good color scheme, we can begin to create web forms for submitting user content to the database. In web development, a form is the standard tool for inputting new data in the form of CREATE or UPDATE commands. In my example, using a M.E.A.N. stack framework, this is achieved through HTTP post requests to the Express API routes.js file which handle all the data integrity, formatting, and database access. There is no single/correct way to go about deciphering AngularJS and all the different services that can be used to handle data, so my example aims to simplify the process of data binding and database access.
Data Pipeline: User Input | Controller | Express Route | MongoDB
The first step is to create a form where a user can input data to be recorded in the database.
Note the ng-click= “addName()” AngularJS directive. This function call is handled in the controller and allows us to handle form submissions by replacing the standard html method of submit buttons and form-handlers. We will need to set up a receiving function in our AngularJS controller that extracts the input data depicted by the ng-model directive.
ngModelis responsible for: Binding the view into the model, which other directives such asinput,textareaorselectrequire.
-Angular API Reference
We access this function call in our controller with $scope.addName. Some people argue for handling HTTP requests from a factory or service defined in a separate Angular module, but it is possible to handle requests directly from the controller, which I chose to do for simplicity of demonstration.
The $scope and $http services need to be injected in the controller by defining them in the function definition “function($scope, $http).”
NOTE: Handling HTTP requests in the controller is simple, but not necessarily the best practice. It is better practice to keep all back-end API logic separate from anything in the view and/or controller. This solution would involve using a service to handle API calls and could look something like
In the controller, you would invoke the factory directive with: addName.create($scope.candyForm) which calls the create function and contacts the Express route handler. This style of data management keeps database logic and UI functionality modular and separate, which is considered best practice for modern web applications.
The next step in the pipeline is handling the API call in the Express routes.js file. The call: $http.post(‘/api/addName’, $scope.nameForm) passes the text form data “nameForm” in the view as the req.body.text of the HTTP request to the route “/api/addName”. My route definition looks like this:
I use mongoose.js as a supporting library for everything MongoDB. I highly recommend using mongoose or a similar library to simplify your MongoDB schemas and object handling. I built a basic User Schema that takes a String (name) where I can store the input text from the page form, and pull from to change the “headerText” scope variable (to verify our pipeline worked). This simple route handler creates a new User object and saves the form data as the User.name attribute, then sends that name to the res variable to be returned to the controller function. If everything worked correctly, the .success function (in the controller) should receive the response from the route handler and set the headerText scope variable to the User.name from the database. The <h3> should populate with the name from the text box (I typed “Some Arbitrary Name For Testing Purposes”), the text box should be cleared out, and there should be a new user in the database.
Voilà! With these basic steps, we can begin to build more complex web forms with dropdowns, radio buttons, text boxes, etc… to create advanced user tools for creating dynamic and robust administrative dashboards.
If you enjoyed this article, check out how to start displaying the data in your database with mongoose.js and AngularJS!
