Admin Dashboard Basics with Bootstrap 5 & Material Design 2.0

Watch other courses

This is the first part of the tutorial that shows how to build an admin dashboard. You're going to deal with the admin panel every time you are building some project that manages some user's content or sales and you need a dashboard for data visualization.

Important - this tutorial requires the MDB 5 Pro package

00:00 hey guys it's david from mdbootstrap.com 00:03 welcome to another tutorial in this 00:05 tutorial we're going to learn how to 00:06 build 00:07 an admin dashboard you're going to deal 00:09 with admin dashboards every time 00:11 you are building some project which 00:14 either manage some users some content 00:16 or perhaps some sales and you need the 00:19 dashboard to either visualize your data 00:21 like here or to edit them right so you 00:24 can imagine that you are 00:25 changing some user data 00:29 or some order data or some adding some 00:31 content to your website 00:33 this is the first tutorial um we're 00:35 gonna have two more 00:36 so three in total um during each 00:39 tutorial 00:40 i'm gonna show you a different aspect of 00:43 admin dashboard so we're gonna have also 00:47 uh dashboards for orders uh and 00:50 for traffic so if you don't wanna miss 00:53 that 00:53 don't forget to subscribe to our channel 00:56 don't forget to turn on notification 00:58 as next tutorials will be released very 01:01 very soon and you're gonna be notified 01:03 once 01:04 that happen so without further ado let's 01:07 get started 01:09 in order to start obviously we have to 01:11 download mdb 01:12 so you can do it in many ways um you can 01:14 just go to your account navigate to 01:16 mdbootstrap.com 01:18 and then search for your orders and hit 01:20 the download button over here 01:22 or if you are mdbcli user 01:26 you can just open a terminal and type 01:28 mdbemit 01:30 then we have to choose a proper version 01:32 as you can see there are plenty of them 01:34 today we're going to be using 01:36 mdb5 so the newest version as for today 01:40 so i'm gonna just choose mdb5 standard 01:41 version hits 01:43 enter and that's done our project 01:46 is initialized and we can see this 01:49 project 01:50 over here let me quickly rename it to 01:54 mdb5 01:55 admin basic dashboard 01:59 okay let's open this with code editor 02:02 [Music] 02:04 and let's run index html 02:08 in live server so this is our starting 02:11 point and from this place we're gonna 02:13 start 02:14 building our page so very first step 02:17 we're gonna make is we're gonna get rid 02:19 of this uh initial content over here so 02:21 let's remove this one 02:23 let's create header main 02:28 and a footer so a basic construction for 02:31 our page 02:32 semantic construction so we know what we 02:34 are doing and 02:36 let's get started with sidenav 02:39 so we are coming back to md bootstrap 02:42 page 02:44 navigate to bootstrap 5 docs which you 02:46 can find here in the technology switcher 02:49 so just go to 02:50 version 5 and let's search for sidenav 02:55 as always you have many different 02:57 examples available 03:00 at your disposal so let's 03:03 uh we're gonna start with a basic 03:04 example so 03:06 you can check how it works here on a 03:09 demo 03:10 you can play with it see how does it 03:12 behave 03:15 once you decide to use it just copy 03:18 a basic example from the snippet so i'm 03:20 going to copy code 03:22 and i'm going to paste it into our 03:25 header 03:28 and let's see how it looks in our 03:30 project 03:31 so we have side enough over here 03:34 so let's have a look at our sidenav at 03:37 the moment 03:38 uh currently it has a width of 240 03:41 pixels 03:42 so uh thanks to that it's uh 03:46 it can it can fit into smaller um 03:49 devices and we're gonna learn how to 03:52 hide it on smaller devices if we want so 03:56 i'm gonna 03:56 teach you how to do that in a few 03:59 seconds 04:00 uh if we check code i can see that 04:03 it has id because we're gonna use it for 04:06 some manipulation 04:07 and it has some links over here this 04:10 structure 04:12 um can be adjusted easily and you 04:15 have many options to do so uh 04:18 here are some examples so you can have 04:20 links you can have some accordions over 04:23 here 04:25 so you can add some logos and some other 04:28 content over there 04:30 so yeah i'm gonna show you all of that 04:32 in a second 04:33 now as i mentioned there are plenty 04:35 options over here 04:37 uh different behaviors of sidenav so i 04:39 strongly encourage you to play with it 04:41 check 04:42 our docs you can see that you can play 04:43 with colors teaming 04:45 and so on which will affect our side now 04:48 we have also dark mode 04:50 which is very very famous recently 04:53 i personally love this slime 04:56 so which can which can become normal 04:59 side enough and then toggle to something 05:00 smaller 05:01 so you still have side enough but it 05:03 doesn't take that much space 05:05 and so on and so on so take some time 05:07 and play 05:08 with it you can even adjust it to the 05:10 right side 05:12 if you want it's very easy just change 05:13 the attribute 05:15 uh yeah so just play with it and 05:18 let's continue with our side nav to make 05:22 it 05:22 uh working differently behaving 05:24 differently on the mobile device 05:29 so let's move this to 05:32 our main part let's add 05:35 some container here to push 05:39 our content let's add some content 05:42 and add our toggler so we gonna see and 05:45 now 05:46 our button here is visible 05:49 so now you can see how does it 05:52 works so we can use this button or 05:56 obviously we can um assign this 05:58 functionality to any other element on 06:00 our page 06:01 which will toggle we're going to toggle 06:02 our 06:04 our sidenav now 06:07 another important thing uh to know is 06:10 that 06:10 like almost all mdb components 06:14 we can adjust a lot of properties using 06:16 a 06:17 data attribute so for example the 06:18 default uh basic example which we are 06:21 using has this data hidden 06:22 set to false if i'm going to change it 06:24 to true as you can see 06:26 the default behavior of our sidenav 06:30 is going to be hidden so when we refresh 06:33 the page it's 06:34 uh invisible and if we're gonna set it 06:36 to false 06:37 then it's gonna be visible by default 06:40 now let's take care of 06:43 mobile devices so let's go to the docs 06:46 and let's go to mode transition 06:49 and so this is the example when we want 06:53 to 06:53 change we want to hide our 06:58 sidenav on the certain screen size so 07:01 i'm going to copy the javascript part of 07:04 of this example and i'm going to paste 07:06 it here and explain it 07:07 what it exactly does right now 07:11 so as you can see we have a bunch of 07:14 javascript here we don't have to really 07:16 understand 07:17 everything which is going on here and 07:19 the 07:20 two things which are important for us is 07:22 that we need to use an id of our sidenav 07:24 which was signed nav 07:26 one and this settings defines on 07:30 which width size our 07:33 side enough is going to disappear so 07:35 let's change it to 07:37 1400 pixels and let's see how it's going 07:40 to behave now 07:41 so once i'm going to shrink our screen 07:44 our signup disappears and obviously once 07:47 it disappears 07:48 we can still toggle it using our toggler 07:55 next case which we have to handle is 07:58 that if we were using 08:02 container fluid 08:05 we would see that our sidenav 08:09 is covering up our content our lorem 08:13 ipsum and this toddler 08:14 so in order to fix that we're gonna use 08:18 a bootstrap media queries so well 08:21 let's go to let's close this one let's 08:25 go to layout 08:27 and break points we're gonna 08:30 reuse this media aquario over here 08:35 we're gonna add it to our styles by the 08:38 way 08:38 i'm adding styles directly into the file 08:41 so we would have everything 08:43 in a single project so i hope it's gonna 08:46 be easier for you 08:48 to read it and understand it so let's 08:50 add some styles to our main 08:54 let's add padding left and set it to 240 08:58 pixels because 09:00 as we said uh it's um 09:04 this is size of our side 09:07 and now everything works perfect 09:11 and now our content adjusts 09:15 also to the screen size of our device 09:19 now it's high time to add navbar to our 09:22 project 09:23 so let's go to navbar 09:27 docs and then again i encourage you 09:30 to go through the docs and go through 09:33 examples and see what we can do 09:36 with this component as there are plenty 09:39 of possibilities we're gonna start with 09:41 the basic example 09:42 uh we're gonna do more advanced examples 09:44 in the next tutorials so let's start 09:46 with the basic one 09:49 let's copy it and let's paste it 09:52 below our side nav 09:56 over here 10:01 let's add comments 10:14 now let we need to do some adjustments 10:17 over 10:18 here so first we're going to start with 10:21 changing class 10:24 light to white 10:29 to fit the other colors on the page now 10:32 we're gonna add the class 10:33 fixed top we talked about it in the 10:36 previous 10:36 tutorial so i'm not gonna explain it 10:39 right now 10:40 and if you want to learn more about 10:42 navbers i suggest to check 10:44 our previous tutorials on our channel 10:46 now we're going to add some id 10:48 let's call it main navbar 10:52 and now finally to fix this overlap over 10:55 here 10:56 we also gonna update our styles 11:01 so except for main we also gonna add 11:05 header and main 11:12 navbar 11:14 and let's see if this works yeah that 11:18 works perfectly 11:19 fine so now our navbar is also 11:22 responsive so 11:25 same as sidenav it's just adjusting to 11:28 the different 11:29 screen size as you can see we can also 11:31 toggle over here 11:33 it still requires some adjustment and 11:36 changes but we're going to do 11:37 more advanced examples in the next 11:39 tutorial for now let's continue 11:41 and let's add another component which 11:44 gonna be uh jambotron so 11:48 let's let's add some 11:51 very simple jumbotron over here 11:56 we're gonna get rid of toddler in a 11:59 second 12:00 for now let's leave it so 12:04 let's add 12:10 jumbotron with some classes margin 12:14 bottom five 12:16 text center 12:20 and let's add some h1 12:25 page title let's add some classes 12:30 like h3 12:33 to make it smaller 12:37 and let's see how it works now yeah what 12:40 we also have to do 12:43 is we have to add some style because 12:50 our um 12:54 our nav bar is currently stick to the 12:57 top 12:58 so and it has 58 pixel size so we need 13:02 to add this margin 13:03 as well to the top to make sure 13:06 it's not overlapping with our nav bar 13:10 and now we can get rid of our toggler 13:12 and lorem ipsum 13:14 let's remove this one and get rid of 13:18 that one 13:19 now it's high time to start working with 13:22 our 13:23 charts so let's create 13:26 a grid so row with 13:30 two columns 13:35 inside that and let's navigate to 13:39 chart documentation 13:43 let's take very first example before we 13:45 start 13:47 explaining how does it work and let's 13:49 just paste it over here 13:52 and let's see the results so this is our 13:54 chart as you can see it's very very very 13:56 easy to 13:57 to add charts and they are interactive 14:00 by default 14:02 so now let's have a closer look on how 14:04 that works 14:05 there are two ways we can initialize 14:09 our charts and obviously there are many 14:12 different 14:13 charts and different chart types like 14:15 you have bars horizontal bars 14:17 lines pie charts and so on and so on 14:20 and you can initialize 14:24 each of the chart either using data 14:26 attributes like we 14:27 just did which is much easier 14:30 or with use of javascript now what's the 14:32 difference 14:33 basically in simple examples uh 14:36 you can use data attributes because it's 14:38 just easier it's more convenient 14:40 so if you have a chart with small amount 14:42 of data or the data which 14:44 won't be updated dynamically then 14:47 you could go with the simpler version 14:49 your code gonna be more readable and so 14:51 on however 14:53 if you would like to adjust um 14:56 your data in a chart right so uh 14:59 that's what we're gonna do in a future 15:01 tutorial so let's assume you're gonna 15:03 change 15:03 a date uh or a week which this chart is 15:07 visualizing so you're gonna have some 15:09 some calendar over here and we're gonna 15:11 change the date and the data will be 15:13 reload 15:14 in that case it's much more convenient 15:16 to use 15:17 javascript because then we can 15:18 regenerate data we can connect our data 15:20 source 15:21 to some external sources like json files 15:24 like api calls and so on and so on 15:26 long story short for the easy example 15:30 for the small samples you can use data 15:32 attributes and that's what we're gonna 15:33 do 15:34 in this tutorial for more advanced go 15:36 for javascript 15:37 now let's have a look at the attributes 15:40 which are actually pretty much the same 15:42 both in javascript and 15:44 and html attributes so you're going to 15:46 find the corresponding ones like here 15:48 you have a data labels 15:49 you can also obviously find it in 15:51 javascript so let's just quickly go 15:53 through 15:53 all of them so data chart defines um 15:56 chart type here we have a bar 15:58 if you scroll down you're going to see 15:59 the line option change 16:01 our chart to line version horizontal bar 16:04 and so on and so on 16:06 then we have a data set label 16:09 which is basically a label which is 16:12 displayed over here 16:13 to explain user what this chart 16:15 visualize 16:16 and then we have a labels for our 16:20 accesses on the x-axis and then we have 16:24 a data set 16:25 on the y-axis so what i'm going to do 16:28 now i'm going to add this 16:30 uh more charts over here like we have in 16:32 the final version 16:34 uh it's pretty easy i'm just gonna add 16:38 more rows and columns and we're gonna 16:39 add the last one what we're gonna do 16:41 here 16:42 i'm gonna use um the same size of the 16:45 column 16:46 uh but i'm gonna center it using flex so 16:49 let me quickly do 16:50 that i will be using all 16:53 examples from our docs for different 16:56 charts and i will be using all this 16:59 all the charts initialized via data 17:03 attributes so let's 17:04 get started 17:10 one thing which we also want to do is we 17:13 want to 17:14 switch it back to container to center 17:16 our 17:17 content here 17:20 and now we can add remaining 17:30 charts 17:38 okay i'm done with adding charts so 17:42 before we end i just wanted to tell you 17:46 that 17:47 this first seven charts can be 17:49 initialized using data attributes 17:51 because it's because they're 17:52 quite simple and um other charts 17:55 more advanced charts require um require 17:58 more options you can check all of them 18:01 uh you can check all of them 18:02 in this api tab over here uh 18:05 we're gonna explain to you how to adjust 18:09 a lot of options which are available at 18:11 your disposal over there 18:13 and we're gonna learn we're gonna show 18:14 how to do and how to adjust those things 18:17 and those 18:17 um properties um in the next tutorials 18:21 but please be aware 18:22 that each chart has its own options 18:26 and you can do really amazing 18:29 stuff with every single type of chart 18:33 okay guys thank you for watching this 18:34 one uh as i said we're gonna have more 18:36 there are two more admin dashboard 18:38 comings 18:39 uh so i strongly encourage you to 18:42 subscribe to our channel to turn on 18:44 notification if you enjoyed this video 18:46 don't forget to like it that's gonna 18:47 help us to reach 18:48 a bigger audience and 18:52 i also strongly encourage you to join 18:53 our facebook group you're going to find 18:55 the link in description down below this 18:57 video 18:58 and you're also going to find the source 19:00 code of this application over there so 19:02 if something doesn't work for you 19:03 just compare it with my code 19:06 and try to spot the differences so 19:10 thank you again for watching and see you 19:12 in the next video