Admin Dashboard Basics with Bootstrap 5 & Material Design 2.0

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