Integrate Admin LTE Template with ASP.NET CORE App|| Employees Management System .NET Core 7.0 | NEW

welcome to macro code so if you are new to this channel consider subscribing so today we are going to do a continuation of our employees management system and today we are going to integrate this with admin LTE template so we have this template that is free and you can be able to download it so if you just Google admin LTE you are able to get this template so a preview of this template this is how it looks and we are going to integrate this with our asp.net core application so this is how our app looks like so if you are new to this channel uh we did a video about employees management system you can watch our previous video you'll be able to post down the description and the link below so today we are going to make our app look much better with these templates so we are going to integrate this with uh sp.net core application so the first thing first we need to download this template so uh if you go back we you can see we have the preview link so for those who don't know how to get this you just Google admin LTE so just type in admin LTE this is the correct definition so if you just enter you're able to get this dashboard then you can be able to click the link and you'll be able to see that section so we are going to download these uh templates so if you click download you'll be taken to the GitHub uh link so from here we are able to uh download the source code so click on the source code uh the zip source code template so it will be able to download as you can see on my description here so we are going to integrate our app so we have we have created an employee management solution for those who are new to this channel so on this employee management system we have our program.cs file so let me just stop it and we are we have connected this to our SP dot our our we have connected this to SQL Express so this is our connection we have uh we have our application DB context which we only have currently three tables uh counties employees and the countries then we have controllers for the countries that is for creating the counties the controller for creating employees we have our own controller and we also have our our countries are controller so uh once our down so you can see we have already downloaded this so let's just go to the folder so let's unzip this so after we have one Z this you can see we have now the source code so what we need to do let's copy let's copy these so we are going to copy these uh so we are going to copy some folders here for the plugins so we all we we need these plugins we are also going to copy the this folder it has some CSS image and Js you're going also to copy the build folder and the previous one will not be able to copy we will see how we can be able to integrate that but now before that let's open the let's open our template in vs code so let's just open yes so this is our folder so as you can see we have the pages we have our Pages here and you also have our index folder so this is our index so to start let's add the folders to our app so come to WWE roots then here you can right click then you can uh let's just see but what we can do let's just copy so I'll copy these folders the plugins list and the build so I'll copy this to our app so I'll copy that to our app guys so I'll paste it under the WW root folder I'll paste that to a ww root folder so if we refresh our so if we refresh our app you'll be able to see we have the WWE under the WWE root we have the build the list folder and the plugins so we are able now to integrate our app so we need now to have these uh index page so we are going to copy this index page so let's come to our our index so this is index so this is what this is index two next three so you're going to copy the index folder only index you see this so you're going to take that so come here so on our index this is the file so let's copy this copy all of this come to a views then layout then on our layout let's just paste everything so let's try to edit it so this is our employees management employees management system so so we we need to add something here so we need to uh ensure that our styles are actually pointing to www.build or plugins so it is actually accessing these styles so let's try to see if it is actually accessing it plugin so this is uh let me just do something so let me just paste that so we need to have our tilde so this is the how we are going to navigate so I'll just get rid of these so I need to ensure that it is pointing so we can ensure that you have these it is actually pointing correctly to our folder so you cannot ensure that we do that you do that and do that you do that and do that and so we have these Styles getting directly from you can also do the same for our J yes you do that to do that we do that you can do this see do this you do this you do this now just add some so navigation yeah adding the tilde navigation there so if we run our app it will not be able to run so if we try this if we just run this it is not going to run because we need to have the ram body at render body we have not defined that so if we try that our app will not be run you can see it is saying invalid exception render body has not been called for the page so we need the render body we need to specify where our body will be so what you need to do so on our view on our template so this is actually where we will be showing our data so just copy this I want to see the navigation where it is dashboard so this is it so this is this side menu so you can see the the menu so where the menu ends so the menu ends here so this is the sidebar going up then this is the content so this is where we have the contents so this is the content page and this is the main contents so I'm going to I'm going to remove from this section you see from this the main content I'm going to copy this up to where it ends you see up to here so I'm going to remove this section so let me see so I'm going to remove from from here so I leave this I'm going to remove from here so I'll I'll copy this just copy all of it up to still not since I gonna copy down so this is it so I'm going to copy up to here so I'll cut it I'll cut it down here I'm going now to have our render board so it'll say render say render board so this is where we'll have our body so I'm going to remove this I'm going to remove this so then what I've copied I'm going to have it on our home page you see our on our index so I'm going to have it here I'm going to replace with this one so I've removed the sections so I've actually removed you see this part I've actually removed it from the from our layout and have it on our index page and the home which is kind of our dashboard so everything will be now rendering under under these uh section here so if we try to run our app now let's run it say we try to run this it should be able to run you can see it has actually launched so we have our views we have our navigation and we have our body but remember our on our navigation we had redirected this to our index our home page for employees so we can have these as all so that we are able to get the dashboard so employees links will be on the navigation side so let's do that there we are guys so we have now our navigation this is our templates and we have these as our sidebar so let's try to edit something so on our layout we need now to have the employees links so come to layout so we have the sidebars you see we have the dashboard so we are going to remove the dashboards here we only have one dashboard so we remove this one then here we are going to have an employees then we can uh so we'll copy these and we also have let's say countries countries then we can also copy and you can also have County now the link we are going to specify the link so here we are going to save on our link we are going to say SP [Music] in a controller you're going to specify the controller which is employees then action SP action we are going to take this to index then area is empty SP area so it doesn't have any area so that is it so we can copy these also to our navigation here country so this one will be countries we can also copy that to our index here for the county then we have these as counties so if we run our app we should be able to access the employees and the countries and counties inside our new templates so you can see we have the employees countries and counties so if we click employees now you see it is now having our data inside our template but you can see there is something that is missing from our from our template you can see we have icons but hours it doesn't have any icon so it means there is a styles that we are missing so let's go back to our our index page then let's follow on the Styles we see if there is a style that you are missing yes you see the this is what we missed this one ensure that you have a correct styling and there we have actually indicated the correct uh location of the Styles so let's also check on our JS folder and we ensure that you have everything correct and so we have this tilde slash uh till uh that you're able to get you see that is fine let's try to run again side refresh still not getting it foreign okay guys so what we need to do we need to add this style for fonts so we need to add the plugins for those sum yeah control some free then we need to specify these uh styling frontosum.cs so that you're able to get our icons so we have added this line of code so if we run our app now you should be able to get the icon icons on our app the same way it is on our template there we are guys so is you can see we have now the icons on our navigation and we can be able to Now navigate on our app so we can remove this new and we can remove the drop down sign here so on our template come to the sidebar navigation so on the sidebar navigation we can remove these sign here then you can also do away with this pump you can do away with this do it is new then uh huh so you can run this now [Music] there you are so you can see we have our countries employees and the county if you click on the employees we have our employees lists you can see and you also have countries you also have the counties so we can try to make some of our so these employees this is not a data table so we can actually add one of our data tables that is coming with the template so if you come to this template you will be able to see the tables so these are tables you can see we have these different types of data tables so we can add one of our table to look as one of these so you can actually have these you can also either have any of this so to do that come to our template then under pages we have tables and you have data so we need to use now so we'll copy these Styles remember these Styles we can be missing these styles so you can copy this data table from those sums so copy that style come to our app so I'll show you how we can be able to separate these stylings so that we have it under one place so you can just add then we need to do this just do this plugin [Music] so you're missing that so that is it then we need to copy something also I think we have some js that you need to borrow so if you come to our plugins also we have data table plugins so we need to add this you have the jQuery we can add all of these up to here so you should also check that we don't have duplicates so when we're adding this so I can add it here on our javascripts so you can also give the correct location of our stylings give correct location give correct location give correct location the correct location give correct location so I'm just adding all of this so that you are able to have the correct location of our data tables Js and plugins so doing that so yeah just giving the correct navigation this is we have these so that is it guys so we have borrowed all these now from our data tables so if you come to our JS you also have this script so I'll go copy this uh script specific and I can actually add it below here so that is it so the next thing that you need to do is to borrow now the table so so if you come here you'll be able to see if there is a detectable in one of our data.html folder so we need we need one of the tables so let's see our preview we need one of the tables importables and now we need a data table we just come to data tables and you can see we have this created table so we can actually copy these you can copy this table so you come to our so this is the table that we need up to here so what we need to do we can only copy the top part because you already defined our table in our so we already have this so you can copy this then come to our employees come to our employees folder you can close that come to our employees folder under index then at the top we can replace it with this one so we can add this in you can have these in our code view but you only need the employees table yeah so all these are the one you can close it on this other side and then this one you can remove [Music] they will be closing these this is able to show that you have closed yeah so so we can have these now as employees list then you can remove this so if we run let's try to see if our table is now fine so if if we click employees there we are guys so we have added our data table so you can see we have employees add new and it is now you can be able to search can actually search so we have implemented that so the next thing you can get rid of these top bar here so how do we do that so come to our layout so we don't want these ones buttons so we can actually get rid of these buttons so just remove that you can run so there we are employees foreign you can see that the buttons are not there now our icon we need to see why you don't have our icon so you come to employees index and I'll be able to see that so let's make our our employees management system more cleaner so we can remove some of these uh sections that we don't need them so come to layout then you're going to get rid of some of the navigation sidebar because you already have our template you can always refer it back whenever we need it so come to our so employees countries so we can now remove these sections so just remove it remove the navigation sidebars that we don't need them you're only left with what you're working with so [Music] so up to here as well just get rid of that is fine so we run our app now and be able to be able to get what we need you only have you can see you only have three navigation sidebars so and also you can get rid of some of these uh we left we only leave the usually leave the tiles but you can get rid of these sections also so let's go and so that how we removed it got the index then you only need the tiles so you can only work with the tiles so one two they're about four so these are the one you can remove this section so that let's get rid of these section we only left with the tiles and the graphs you don't need them yeah so that is it I only left with that row we'll see how you can be able to add some graphs from when we proceed with this video so if you're new to this channel consider subscribing and keep in touch as we develop a complete solution in asp.net core and actually develop an employee's management so you can see we have removed that so we are only left with the tiles so we have the employees we have the countries so we can also do the same with the countries remember we have added the data table so you can also do the same for the country so come to employees and we can copy what we added so we can copy these then come to countries so under index you can copy all of these from here then you need to close them close them fine so you can so these add new country to this country it's a countries countries list so you can also do the same for the counties so come to counties then you can paste it here then you can do this can do it already you can close it so this is add new account County and this is counties so there you are so that is it then that's fine so you can add so we can run our app we see if we are now integrated that countries you can see we have a countries list count you can see now our data table is working the county you can see you have the county so you can try to make some things cleaner admin LTE we can change this to our app so we can call this Edge RMS so we can so this should be now our human resource management system so we can call this hrms woman resource management system so you can also try to alter so you can alter that so at the top of the so we have uh so this is actually the logo that we are using so you can leave it at that so on our so you will run this now you can also change our football you see it's in admin LTE so this one you can change this to human resource management system you can say human resource management system so this is under the layout so check on the layout at the below section and so this one you can have it as so instead of you can see the date and time is at coded so you can have the correct date time dots that's now so you can say that now let me say that here so you only need the so you can say that time now dot here so it will give us the year that then having it at coded so so if we run our app now we should be able to see that so you can see we have human resource management system all right result then this is the our navigation so we can also have something here we can say developed developed and Design Ed by macro code so that is it guys so we can also do away with this link so if we run our app we now have so we have now successfully integrated our admin LTE template to our employees management system so you can see developed and designed by macro code and copyright 2022 you see that now guys it has given us the year the human resource management system it is the version so we have now our employees countries and the county so on our next video guys we are going to now you can see it is now showing Alexandra uh piece so we are going to have our login and registration then we are going to to now have our credentials here and we can be able now to have uh to proceed with our videos so we that is how you integrate admin LTE to asp.net core app and in case there is anything that you need to know guys so you can actually comment down below see you in our next video and remember to subscribe bye foreign

Channel: Macro Code

Views: 14,157

Keywords: C#, AmigosCode, .NET, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, .NET 7, .NET 6, Visual Studio, Frameworks, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, ASP.NETCORE, SQL, SERVER, BoostMyTool, .NET 7.0, dotnet, kudventkat, ArtofEngineer, WesDoyle, LesJackson, Simplilearn

Id: 1KKHL7JnF9E

Length: 33min 21sec (2001 seconds)

Published: Sun Feb 26 2023