Setup AdminLTE Theme in ASP.NET Core Website

hey guys in this lesson we're going to be setting up our application with the admin LTE layout now I've been seeing this admin LTE admin LTE if you don't know what it is then you can get to their website by going to admin l te dot IO now it is a bootstrap administrative dashboard template and well one very very very conveniently so it is based on bootstrap and I believe that they've had versions to match each version of bootstrap so right now we're using bootstrap 4 so the version that we're going to be using is the latest one that supports bootstrap four they also have support for font awesome 5 icons so that means we're going to be going through and potentially changing out some of our font are some icons I would have used previously and we can retain for but then we'll be implementing 5 also so from their website you can go to their download page you can go to a live preview and you can also visit their github repository where you can just read you can just download all of the source required for this template so I'm going to first go to the template the the demo and show you what it's all about as you can see that navigational bar to the left they have one at the top they have the two notification icons and well the potential for data display and the layout is really really really amazing they have they come chock-full with libraries for all these colorful charts and they've put a twisted on bootstrap stylings where you know certain things look a bit more refined or bits you know modified when compared to the original bootstrap layouts or classes right so you have the dashboard version 1 template where you know it's pretty it's different slightly different you can just peruse and get ideas from it iced and then you have the version 2 which is what we're looking at just know so you can actually spend some time and click a row and see all the charts the different 4 the different tables that they have but then ultimately you want to get to the documentation section where you can actually go about learning how to install it into your application now the installation instructions are mainly geared towards NPM which is node package manager bar which is a package manager for JavaScript or composer which is a package manager for PHP but then we are using dotnet core so that requires its own package manager in the form of nougat and it does to some extent allow you to use Bower but then personally I find it more irritating trying to get these kind of libraries in to dotnet core and especially since it is pretty much straightforward it's just some code that they have given to us once again it's open source so in this video I'm just going to guide you on sourcing the code and implementing it inside of our application now at the time of this lesson admin LT e 2.4 is the advertised version here but that's not the version we're going to go with so we're going to go to github and I'm going to say download latest release which is going to bring us to their repository for admin LT e 3.0 point 1 so know that we're at this repository I can the scroll down get the zip file with all of their source code and that gives us a nice healthy folder with a bunch of readme and some more templates that we can look at so the templates WorldCat might not necessarily have been indicative of the latest version so I'm just going to extract this to a folder on my computer so I put it in my downloads folder and then I'm going to just open one of these pages so I have three index pages I can look at and I also have starter so I'm going to open each one and then we can assess them all so I opened index and this is what the index page is displaying so you see that the widgets understands looks slightly different from what we would have seen on the website once again the website was probably showing two point four which is based on bootstrap three and this is showing 3.2.1 which is based on bootstrap four so you see some you know improvements in the way things are laid out but we have this dashboard example we have dashboard well this is dashboard 3 so we have dashboard 2 example and then we have dashboard 3 example and then we have a very very simple sample which is called starter now the starter template is much more simple than the other dashboards and truth be told based on the application that we might have with me or may not need all of those charts and displays right so for our application which is a leave management system I don't need a chart showing me the any map of a country or these kind of land graphs I really don't need all of that so the starter template is a good place for me to actually be able to examine the code and make those transitions over to my project another thing to notice that in the bunch of files that we would have gotten they would have given us all of the CSS and JavaScript files required to get this team up and running and we would also have wealth of plugins for all of the charts the data tables and everything that would be included inside of what is being displayed in their templates however we just need a few of these things to get up and running and one of those is the starter so I'm going to right click on starter and open it with I have notepad plus plus if you don't have it that's a great tool to just view you know markup and simple code files if you have Visual Studio code that's also a good tool and anything short of that is notepad but I would suggest you get at least notepad plus plus or visual studio code so I'm just going to right click and open with notepad plus plus and this will give me the entire HTML page with that whole HTML skeleton that I always talk about and they will point out what is being included what files and where they can be found and so we can source these files inside of the the files that were in the archive and port them over to our project in Visual Studio while we set up this theme so the first thing I'm going to do is copy all of this code and then I'm going to go back to my layout page and then I'm going to control a and control V so I'm just removing everything that's there and I'm pasting this entire block of HTML now in doing that I would have removed some things like the render body section and we're going to put that back but you'll notice that they are giving you comments to kind of guide you as to what section of the code you're currently looking at my next major objective would be to make sure that I have the required style sheets included in the project and that my references are correct so I see here where they have a style sheet inside of the dist slash CSS folder called admin LT e dot min dot CSS so I need to make sure that I have this style sheet inside of my project and I'm referencing it properly and Visual Studio makes it relatively easy to get files over so I'm going to go back to the archive folder go to dist go to that folder called CSS identify that file and then I can actually copy and then go back to visual studio and then we know that in our visual studio projects we try to keep those static files those CSS files instead of inside of wlwt's CSS and then I can just paste it in that folder now I can do that same operation for our font awesome so it's in plugins font awesome free CSS all mean that CSS so I'm just going to go back and try and find that so it was plugins and then font awesome - free and then CSS and then it was all that mean dot CSS so I'll do the same thing where I copy and then go back to visual studio and then right-click in CSS and paste now at this point I actually forgot how to write the path to the CSS fool so I'm just going to look back in my original layout page just for some inspiration and then I see here where the HR should be tilde slash CSS slash the file path so I'm just going to copy that file path to the folder since all the files are in that same CSS folder and then I can just replace the relevant parts oh well it does say C s already CSS art so I can actually just say tilde slash CSS and then just to make sure you're at the right place you can actually just remove this your ctrl + space and then it will list all the files if you're seeing all the fast that means you've written the path correctly so I'm first including the admin LTE no that's incorrect I'm first including all that mean dot CSS and then I am just going to modify this one to include the admin LTE CSS file now the admin LTE file pretty much encapsulate all of our bootstrap classes so we can still access all the classes from bootstrap that we know and love and we don't actually have to go and reference bootstrap again so I'm just opening the LTE dot CSS file so that you can see that it is really using a lot of the bootstrap classes and the bootstrap version is four point three point one so most of those classes if not always still work but they would have put their own twist to how they would be output to the screen my next major objective would be to the to do the same set of steps with our JavaScript files so I see here where they need the jQuery but we already have jQuery we already have bootstrap but we do need the admin LTE that jas file so if I drill down into the J as well not J sorry the Lib and then we will go down into bootstrap dist and GS and we also have the same for jQuery so I can just modify the references for jQuery and bootstrap actually I can just go back to my layout and reuse those references so that's the jQuery and that's the bootstrap and I'm going to copy those and then I'm just going to replace these references because it's referencing the same set of files and then for the admin LTE I'm going to have to go into the Jas folder inside of their dist find the Jas file copy it and then put it into the project so I'm just going to put that inside of the Jas section paste and then I can just use my till there so then that's still there /j s slash admin LTE dot Minjae s so now I have my J's files and my CSS files being included alright so we've done quite a bit of work as simple as it may seem and now I want to preview what this page will look like so but before I do that let me just set the title to be as dynamic as it used to be so I'm going back to layout and you'll find that you'll be boring alot from the existing layout page because I mean you did a lot of work to it so instead of retyping then you will be used reusing a lot of things so I recommend that you don't delete it at least not yet so I'm just copying the existing title and I am pasting it in the new layout page and there are the things that we'll be transferring but right now I just want us to view what the page looks like so I'm just going to preview that pretty quickly and when we do that we're getting this very nasty error but let's just take our time and read what it is saying so it is saying that we have an invalid operation exception we're render body has not been caught for Paige at and then they just list though the path to our new layout so the the key takeaway is that it's complaining about the render body section so there's no render body function being called now remember in our original layout we had that very very crucial section where we said render body so we need to make sure that admin LTE knows that it should render body know based on the sections that are given for the page we know that the body should be rendered in somewhere with content nots in the navbar not in the sidebar or the sidebar menu but more in the content area so I see here I have content wrapper and then I have a section that says main content so that means inside of my main content section I should be rendering body so this is all sample data as you would know from looking at our our layout or our starter sample page that's all just sample date I really don't need that so I'm actually just going to take all of this section out as a matter of fact it starts from starter page so everything that is inside of the div container fluid I'm going to remove or well actually I'm just going to say from content wrapper so content - wrapper everything that is inside content - wrapper I am going to remove so I'm just taking all of this out right all that it was use the plus sign - well the minus sign - you know condense the sections alright and then I'm going to take all of this oats and I'm going to put my function to render body now when I do that and save and refresh this is what we end up with well so we still have some ways to go but this is progress you can see here that the new layout is being displayed and our content is there now we need to make sure that our nav bar displays our navigational links not the sample links now back in our layouts there are a few references that I want to make sure I include from know lest I forget later on so I'm going to go back to my layout page and then I'm seeing that okay I have some code libraries above someone to make sure that I make reference to these libraries inside of this layout and they go above doctype and I'm going to make reference to some of these style sheets so I have a style sheet for my table my data table I have one for font awesome and I have one for my jQuery UI so I'm just going to take all three even though I don't really need the font awesome one for this because we're changing the version of font awesome so I'm actually just going to delete that one I just did that because it was easier to just take three lines and delete one so we have all of our CSS references and then I'm going to make sure that I make reference to my data table as well as my GS and jQuery file so I'm going to copy those also and make sure that I include those scripts at the bottom of the page and then in addition to those scripts I need to make sure I render the scripts section so I'm also going to take that written one sweet well that's fine so I'm just making sure I've accounted for all of the references from my existing layouts because there are pages that depend on these so if I were changing léo that we want to make sure that these are included now another thing is that I made slight misjudgment with our bootstrap bundle where it is bootstrap bonded mintages and not the bootstrap GS file so I actually needed to include that file and we found it inside of proteins GS sorry plugins bootstrap Jas and the file is bootstrap bonded Minjae so you could copy that paste it inside of the Jas folder along said admin LT Minjae s and then fix the reference accordingly to make sure that it is included now another thing I omitted was a font file for our font awesome notice that we have squares where you should have little icons and that's because we did not bring over the web fonts folder from the font awesome - free so I'm just going to take this folder and copy it and we have to put it in our project in a very relative path relative to CSS so notice that it is beside the CSS folder so web fonts has files sure but then relative to the CSS folder they're on the same level so up to make sure that I copied this folder and place it in our project relative to CSS so the only place I could place it relative to CSS and have them side-by-side is if I put web fonts as a folder inside of the WWE root folder or our section so different people may later differently I'm just trying to keep it simple so after making those adjustments and reloading our piece and we start seeing our icon so we see that the chat icon the bell icon and where there were squares there are no icons so now we have our icons up and running and we can continue with our modifications now I did say that we were supposed to be modifying our navigational properties and I'm going to go step by step so this is the nav bar and that is the top nav bar so this entire section if I just click the tag that's is enough we can scroll until we see the next highlighted wana we know that all of that is the nav bar and then our number has sections for top nav bar links so if we want links in the top and right now they're giving us one for home and one for contact if we want them there then we can just change them out if we want more then we can just duplicate and add more I don't want any navigational links in the top so I'm just going to control Casey to comment them out I'm commenting the modes but you can delete them if you want but I'm commenting them all because maybe we may find useful them later on right and it's easier to keep the template than to try and remember what it looked like so I don't need that search bar at least not yet so I'm commenting that out also then over to the right there seeing that we have a message drop-down so I can actually just go and preview what that message drop-down looks like alright and then you see that we have a bunch of broken images but we didn't bring over the images because it'll necessarily need them but right now I don't need any messages notification and we see that we have that little bill with the notification so right now I don't need any of these notifications so I'm just going to take those out but it would be really cool if maybe for every leave request or every new item that comes in that requires action we just display a number up there for that and that would be really cool however I'm removing them because I really don't need them right now this entire section from the open to close ul would constitute the right-hand side of the name var and so I can actually just condense it or collapse all of that and I'm going to manually type all the comment code so that's an odd sign and an asterisk and it will open and close it almost automatically for me so I'm going to cut that and then I'll have to be sure that I am closing the UL so I'm just going to place that comment at the end of the US you know all of this is commented once again you could delete it but I'm leaving it in case we you may want it later then you can have it all right so our nav bar at the top is pretty much empty it's literally just there as a nutbar and it's not far - light it's white and I mean it's it's it's there so it may add it may subtracted it's neither here nor there what's that nav bar does at this point actually on second thoughts I just remembered that there's a portion of this nav bar that I really do need and that is the part to make it collapsible so this section that you know I can click it and it expands or it it contracts I actually want to retain that and that is found in the UL section for push bars so if I look very closely then I see at the top of the you the nav bar class actually have an unordered list section that I would have commented out earlier and it has the nav bar links for the home the contact but it's at the top it has a section for the push menu or the bars so what I'm going to do is just uncomment this section because I really do want that section so ctrl K U and then what I can do is just comment out the two links that I really don't need so I just want to retain the part with the pills that allow me to me the sidebar go in are out now for our main sidebar we would see that it has some link to maybe the index page because it's the sample and I mean that's fine that's understandable that you will come with that but we can always change out that it ref to something else I'm just going to put a hashed out so that it goes nowhere it retains its class and then it is waiting for an image so I'm not going to put any image I don't have any image but then in a at a later time maybe you can modify the application that it accepts an avatar for a user and then when that user is logged in that avatar is displayed so I'm just going to comment out this section for a picture and then for this span section that says admin LT III I'm going to let it say the name of our application which is I'll just say leave management so for this section of the sidebar I wanted to display the login section so remember that we have a login part that says login and register and we had that on the previous layouts where we had the section in the nav bar and it was really a partial that was being printed so the code for the login and register links are really inside of this partial so I want that partial to be rendered in this section so I'm going to take out the content of this sidebar and I'm going to replace it with the partial for our login and register buttons and then I'm just going to add a little visual effect and put a horizontal rule so that there is a little line to show where this section starts and then where the next section begins all right so this is what our work has yielded thus far we changed all the sections to say leave management we have the two links and we're going to put some more stats on that because notice that they are visibly different from how the other links look but for now they can remain and no we need to modify how these links look so notice that you have one section that can drop down and you have a simple link so I'm going to be creating some links that are looking like a simple link and then we'll be creating a drop down section for our navbar so back in our horde so I'm going to start off this transformation by just dissecting this nut barcode a bit so we have the UL and it is it has all the classes that I required to make it go to the side and then we have the first list item and this like list item has a classicist has treeview menu - open and then it has a link and then another unordered list inside of it after that we have an list item that has the words simply so this list item can be our template for non expandable linked items and this one can be our template for expandable linked items so I'm going to take this one that's a simple link I'm going to cut it and then we place it above the one that says has tree view now for our simple link we're going to make a few modifications notice that we have an anchor tag and it's pointing to nowhere so I'm just going to go back to our original layout and then I'm going to copy the relevant parts for it to have a link so I'm going to take the SP area is P control is the action section of the anchor tag because I want this first simple link to be home so I'm going to replace it ref with those with those those attributes and we leave the class and then I'm going to change the icon from FA - th - FA - whole and notice visual studio is making these suggestions because the CSS file for font also is not a part of the project and then I'm going to change the text from simple ink to home so I want this one to say home and I really don't need that span all right and it's good it's a good idea to kind of retain the template that they give you because if I was to remove those P tags then the layout would be slightly different from what I'm seeing in the preview so you have to be very careful and deliberate when making modifications if you want to retain the original look and feel so I have the home tag and I'm going to duplicate this two times because I also want the tag that says tag that says apply for leave and also one that says my leave so going back to the original links we had one that's it apply for leaves I'm selecting or taking all these attributes from that link and then placing them inside of my second simple link just replacing them and then the text is going to be apply for leave so I just copy that so I'm doing a lot of copying and replacing of existing things I'll do the same thing for my leave and then replace those attributes accordingly I really don't need to bring over the class because you notice that the class is not - link and yes there's text white but it says now - link already in our anchor tags I really don't need to replace that again so just replacing the relevant attributes so that anchor tags work how we expect them to work now for the next section that features the drop down recall that or drop down from our original layout would have been active or visible only if somebody signed in and even more so if they are signed in as an administrator so we can actually just reuse these statements I'm just going to take these if statements go back and then I'm going to paste and then everything is getting indented and out of work but that's no problem because at the end of this Li block I'm just going to put two braces just to close out the if statements and then all of our code will be realigned properly so if the person is signed in and if they are administrator then they will see this drop down section and then this drop down section needs to have the same links that were in the original the topmost level of the drop down had the word manage so I'm just going to take the word manage and I'm going to replace the very first link with that word the content of the the topmost item or navigational item in the entire drop-down should say manage notice to the right of it you will have an icon that sees angle left so it's kind of like a drop-down it will toggle when it's you know up or down and then the tachometer so I'll go through and change these icons later but for now we want to just focus on the nav bar items and the links making sure that they go to the right place so then the contents of our nav bar would be under nav - tree view and you see that we have two links here but we need four so I'm just going to copy and paste one of them two more times and then we can start our surgery where we start changing all the text and the references are the eight ref so I'm going to do that quickly we did a few already so I'm going to pause the video or you can pause the video right here and try it yourself and when you want pause I would have done it already and then we can just compare afterwards alright so at the end of that exercise you should have something looking like what I have on the screen I also took the liberty of changing out the icons so I have something like a list for the leaf types I have FA - angel is for allocations and I actually did this blindly but all I did was write FA - and then I love Visual Studio to suggest what I have available to me and I made blind decisions now if you don't want to make blind decisions you can always go to font awesome comm and since we're using version 5 you can proceed to go to icons and then you can see everything that is available so pretty much if you see it listed in the intelligence and you want to know what it will look like then chances are and more than like you can go over to font awesome the website and just type it in and then it will kind of filter out and show you what your icon might look like another thing to notice that more than likely will be the free version of what you see in the listing for the first three navigational links I also made changes because all three of them would have had the whole icon so I change those out also and I'm going to make one more adjustment and that is to the login page because if you observe and let me just go back to my page if you observe that the login links don't quite look like how our navbar links look so we want everything to look uniform as much as possible so I'm going to modify the layout of our partial login page and we'll see how that works out so this is the login partial page and as you can see the UL it's lacking some of the classes that the US for our sidebar needs so if we look at one of the existing ones we see that it has class is nav nav - pills nav - sidebar and flex column so I'm going to take all of these classes and make sure that they are present inside of the login partial so no the nav bar will look something more like what we have already and then the list items inside of that you will need to look more like the list items inside of the existing one so these list items they have the anchor tag and then they have the icon which of course is optional but it's there and they have a P tab so all of these things actually work together to give the kind of effects that we need so I'm just going to perform a little modification on this already there anchor tag I'll just break line bring the text over so this text is what is saying hello person who is logged in so I want that to be displayed so I want it to be displayed inside of a P tag and then I'm going to include an icon just the same and icon here can be maybe like a silhouette of a person so I'm going to say icon tag class and then ink my Fe or FAS this time because we're changing out the the font awesome so it's f a s and then if a - and I will say user - out so that is that iPhone is going to show up beside the person's using it once they are logged in next up is this button and the modifications that I'll be making will be pretty similar so I'm going to take all of this content replace the word logout and then in the P tag well it's going to say log out so that's log out and butcher the P tag a bit there so let me do that again and do it properly this time so that's log out instead of that P tag and for the icon I'm going to do something like if a let me see they have anything about signing odds there we go we have sign well that's sign in we have sign out there we go so FA - sign out out so I'm going to modify the other two off-screen and I'm challenging you to make mods choose to zero and icons use your own creativity but I'm going to do it and then we can compare code afterwards so I have two icons that I included one called FA - registered for anybody who wants to register for that's for the register link and then we have AV - user for the login so you I mean I'm repeating a few icons are on the place but ultimately once again you can choose your own icons and do what he is right for you but I'm going to save all these changes and go back to my page refresh and see the fruit of my labor alright and so I'm seeing an s to R for register and the silhouette for login and just to make sure that I wrote the code properly I'm just going to click this and watch it expand and contract properly so just like it did in the demo where the text completely disappeared and only show the icon if you did not write the tags or the list items for the navigational links properly then when you try to contract then it may not be as clean so you may want to review that either way I'll provide the code for it so you can always double check or replace now the final thing that I'm going to do is replace the content of our not our footer and I want it to be a bit more official but it's always good to give credit to the persons who create the themes and the open source things that you use so I have a footer message here and this footer message is to the right styled by and I create a link to admin LTE got I oh and I retain that original footer message from our previous layout so I'm just going to log in as admin so that we can see the rest of the navbar and verify all of the work that we've done and when I go to the login page you see that this page could use some work it needs some modification to fit into the theme better but I'm going to leave that alone for now and log in as the admin and when I do that you're seeing some squares appearing where where I Khan's should be so I'm just going to double check what's happening with the code and okay so I see here where I have if we are instead of FAs so that might have been there before the template may have come with FA our for that section but I'm going to change it to FAS because that's what I really want and then save and then let's review that again all right that's more like it so no we're seeing oh and one is still missing but we can fix that later so at least we've made some progress we're getting icons and we can see that we have this drop down menu for certain well for the admin and when we're not logged in as admin we won't see that also when we are logged in we see that it is saying hello and the user and we have our logout link I'm actually going to remove the word hello and I'm just going to print out the email address that is associated with whoever is logged in so those those are the modifications are going to make um to fix this icon I'm going to remove the word hello and I'm going to see what's up with the login page and I'll share all of those with you but if you stuck her on to the end and you know have your admin panel looking something like this then good job

Channel: Trevoir Williams

Views: 12,414

Keywords: jamaica, developer, develop, teach, learn, tutorial, music, software, development, open source, php, web, website, application, .net, .net core, core, framework, trevoir, williams, family, house, car, pets, how to, keyboard, guitar, udemy, skillshare, sql, mysql, microsoft, mssql, postgresql, cloud, azure, heroku, wordpress, jquery, ajax, c#, android, package management, programming, xampp, wamp, server, git, github, source control, community, free, hosting, apache, visual studio, visual studio code, ide, bootstrap

Id: CxSkFaMip70

Length: 39min 2sec (2342 seconds)

Published: Mon Jan 20 2020