Questions Management – Frontend – Using SB Admin 2 Bootstrap Theme

In order to effectively manage the questions, we need to build a full-featured management page that allows us to manage the entire application from adding, deleting, correcting questions, categories to user management, new information that users update.

At first, I thought to build the whole interface from the beginning, which can help you have a detailed view on how we develop the interface. But thinking back on it, I think it would take a lot of time from designing the interface to converting it to HTML so I wanted to reduce the time. That is why I have to find an available theme, free on the internet.

Fortunately, I have found an interface that uses Bootstrap 3, responsive named SB Admin 2 https://startbootstrap.com/template-overviews/sb-admin-2/. Actually, this theme also have the version using Bootstrap version 4, named SB Admin 4, is the latest version of Bootstrap, but the interface of SB Admin 4, I do not like so I decided to use the theme SB Admin 2. The interface of this theme is as follows:

Questions Management - Frontend - Using SB Admin 2 Bootstrap Theme

To use SB Admin 2 in our Questions Management application, we will first try applying the index.html page of this theme to our Angular application. If you download the source code of this theme, you can view the content of index.html page in its pages directory:

Questions Management - Frontend - Using SB Admin 2 Bootstrap Theme

To apply the index.html theme of the SB Admin 2 theme, there are things you need to do:


The first is the JavaScript part.

Currently, SB Admin 2 theme is using 5 JavaScript library with the following version:

  • Bootstrap version 3.3.7
  • JQuery version 3.1.0
  • Metismenu version 1.1.3
  • Morris.js version 0.5.0
  • Raphael version 2.2.0.

and custom JavaScript itself.

You can see the <script> tags in the index.html file and the content of each JavaScript library to see more clearly this:

To install these libraries into the frontend, you can run the following commands:

in the frontend directory of our Questions Management application.

At this point, if you check the package.json file in the frontend directory, you will see the dependencies will have the following content:

The Morris Charts JavaScript section, we also have a file called morris-data.js. I will copy this file in the data folder of the theme and put it in the src/assets/js folder of our application project.

Here we also have two custom JavaScript files for the theme SB Admin 2 in the dist/js folder of the theme, I will also copy them to the src/assets/js directory.

Questions Management - Frontend - Using SB Admin 2 Bootstrap Theme

To use jquery.min.js files, bootstrap.min.js, metisMenu.min.js, raphael.min.js, morris.min.js, sb-admin-2.min.js, morris-data. js in our application, we will declare them in the angular.json file, scripts section as follows:



Next comes CSS.

The theme SB Admin 2 is using the CSS of the four libraries include:

  • Bootstrap version 3.3.7
  • Metismenu version 1.1.3
  • Morris.js version 0.5.0
  • Font-awesome version 4.6.3

and a CSS file for the theme.

The Bootstrap libraries, Metismenu, Morris.js I have already installed above, now, I just install the font-awesome library again:

The CSS for the theme will be copied from the dist/css folder of the theme and placed in the src/assets/css folder.

Questions Management - Frontend - Using SB Admin 2 Bootstrap Theme

To use the bootstrap.min.css files, metisMenu.min.css, font-awesome.min.css, morris.css, I will declare them in the style.css file located in the src directory as follows:

The file sb-admin-2.min.css, I will declare it in the file angular.json, styles section as follows:



The next part is that we need to replace the content of the app.component.html file in the src/app directory with the content in the body section of the index.html file of SB Admin 2 theme.

Because of the content of the body in the index.html file of the SB Admin 2 theme is very long so I do not mean to mention it here. But one thing that I will change after replacing the content: I will change the HTML code:

to:



The last thing I want to do is to edit the name of the Question Management application in the index.html file from the QuestionsManagement to “Questions Management”.

To do this, you need edit the <title> tag from <title>QuestionsManagement</ title> to <title>Questions Management</ title>.

OK, here we have finished using the SB Admin 2 theme in our Questions Management application.

If you now run the application with “ng serve”, the results will be as follows:

Questions Management - Frontend - Using SB Admin 2 Bootstrap Theme

Questions Management – Frontend – Using SB Admin 2 Bootstrap Theme
Đánh giá bài viết
Chia sẽ bài viết này ...Share on Facebook
Facebook
4Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.