Laravel - Day 6 - Integrating Template with Laravel Project

hello what's up everybody how's it going welcome to another video of tutorial series learning laravel from scratch I'm your host annually and I'm here to name the new topic and the topic is integrating an admin panel with your laravel system the last video we learned how to use layout how to integrate views with the layout but I got some suggestions from my friend friends and colleagues that I should have integrated are real and let's say template with our laravel system so that people get a nice concept on how to use laravel or how to integrate templates into the system or the project so what I've decided is while working on admin panel will I would like to use the template and admin part of the template which we generally do so I've got one template over here which is admin LTE dot IO so this is something that I usually use when I work on admin and this is really famous and has lots of functionalities being a free template so I can just download this you should not take much time so just go to admin alt dot IO and just download the zip file okay save it besides that I need to open my amps so let me open it also my sublime text so this was the folder that we were working last time we close all the files okay let's see what we've done till today so whenever we open our project inside public you see that we had done some of the test tests and about me right last time so we could be created two on different we had created two different URLs in the route one was test and another was about and we had integrated the same common header and footer in both the pages but this was not and that much explanatory for people on how to use templates and use the common header and footer that the template provides so today I'll be demonstrating you that after we go to admin panel for example one two three four five six the login so it was info and for Android code IV and calm one two three four five six inter hmm so what was it in Florida code re krqe.com and one two three four five six yeah forgot it I'm just quickly registered in my name is Anne Morelli my email is info ladder it cool diary dot-com my password is 1 2 3 4 5 6 + 1 2 3 4 5 6 and register here we go this is our dashboard now what I want to do is since this is a separate panel or admin panel let's say where we reach out to be login I would like to use a separate template that we just downloaded and that is admin LT template I would like to integrate that template in this panel so I think we have all downloaded it just let me open it so here we go this is our template let me just quickly show you how it looks like so if I go to index dot HTML so this is something that it looks like so everything is there there are graphs there are various types of panels there calendars there are listings and the various versions of the dashboard you can use their form elements for example Etsy generally means we have all the forms different types of form design for us we can just use the classes and we are ready to go so let us just integrate the dashboard first of all so our dashboard this is our dashboard so after we login instead of having a simple dashboard like this I want to have a dashboard that looks like that looks like this let me show you looks like this all right so this is something that I want to have after I login so what I want to do is I want to create a layout that includes all these HTML but for these HTML to work we can see it see some of the folders over here which contains JavaScript CSS images lots of stuffs that the template is using so what we can do is we can just copy these folders and place to our public folders as discussed last time if you remember I've mentioned you that all our J's CSS images that we use in our website should be placed inside public folder right this folder I don't think we need to copy because these these are the examples of other pages they are just sample pages that we can you reuse so the main page that we need to you mean full does not need to copy is plugins maybe dist and build ok except in index so these 3 folders I need to place inside my public folder so let's go to public folder SSD application [Music] www.a project is PR oj ec t project this is my folder and i need to get inside public folder and place these directories over here so this is the first step that we need to do that and it is copying all the necessary files and that is required for the template and that all let's say all those GS and CSS files that my template is using I need to copy all those folders and place it inside my public folder that's what I've done secondly what I need to do is go get inside downloads and this is my folder so this is the page that I want to clone or I want to use in the mine layout so it is index.html I'll just grab it and let's say I would like to show it inside my sublime this is not going to work so you can just open this and grab it over here so my design is inside my index dot HTML and and I need to create a layout that uses exactly the same layout and what I want to do today is I want to make this sidebar and maybe this header consistent throughout my admin panel so the only thing that will be changing in my admin panel will be this section right so my sidebar will remain the same my header will remain the same and the only thing that will be changing will be my main body so this is what I want to do in this tutorial so firstly firstly we need to create a layout for that and my layout would be inside views folder layouts folder I need to create a new template and I would like to call it maybe admin admin dot blade dot PHP now first thing that we need to do is I need to copy each and every code that this index dot HTML has and place it inside my admin layout so this thing secondly I need to change the URL since this you can see since it was a downloaded template it is using some relative URL I need to change this to absolute URL that is starting from HTTP localhost Project public and then dist CSS Admiralty mean no CSS there are lots of CSS and Java and Java scripts that is being used where I need to place my absolute URL instead of this relative URL so if you see in our existing layouts for example in app dot bleh dot PHP you can see that it is using a function called asset for the script so this is the function that actually gives as the location till until the public folder okay so this asset is a function that gives us the URL till in the public folder and whatever we pass in as argument inside asset function it will be appended to the our base URL for example if you want so this this function will generate localhost public project G s approaches so this is what it is going to produce so we will be using the exactly same function copy this in each in each and every link and J's that we have in this project so let me just copy this and instead of GS and app I will just place this ok and just place this and I will do this for each and every link and scripts which is using related path like it's not this one because this is already absolutely URL and we are if this is some kind of Cillian that is being used in this project so I don't want to change these these absolute URL but only these ok so let me show you one or two and I'll just copy them so this is the function that we need to place it for each and every relative URLs and just need to pass the part like this and we are done and let me just quickly do it for each and every link and scripts and get back to you again ok welcome back I have modified all the URLs necessary URLs so I've modified the links this way that I've modified the scripts and finally I also modified the images if you search for IMG you can see that I have modified all the SRC of the images with the URL so I hope you have done the same so once we are ready with this what we need to do is we need to separate our layout with those things that are common in each and every page and with the thing that is that we need to separate so this part should be loading from the view and this part and this part should be loading from the layout right some even the footer and this body should be time in the footer in the sidebar and the header should be our layout and from here to here should be our and view right so we need to separate the view from the layout so in order to that we can just make an inspect see so if we go and inspect the dashboard you can see if you go to content wrapper this is the div that contains the entire content of the main body that is being loaded from the view so we need to separate this content wrapper from the main layout we can copy the entire or maybe cut the entire content which is inside content wrapper and place it inside view so our layout should have everything that is on top till content wrapper and if you go the ending should also be there in the layout from here to the till the end should be inside layout and everything that is inside content wrapper should be the content of the view so let us find for the content wrapper so ctrl F content - wrapper so this is the part that is that we should load from the view so let me just quickly search for this maybe from here till which was in line number line over 484 so that research for its end its end is over here right so continue our ends here so I need to copy entire scripts which is inside the content wrapper not till content wrapper but in it is inside within the content rabbi should copy each and every does not copy actually cut so 484 from here 2 4 8 4 which is till here right so my content dry ok I missed something so my content wrapper is now blank here what I need to do is I need to heal the content so I need to call a function called yield that will load and the section called content save it and I need to place this content that I just cut made a cut and a place and I should place it inside the wheel that is being loaded so if you go to the URL localhost / public project slash and let's say public and after we login it will take me to the home so my admin panel is slash home right so if you go to home in the routes you can see that the home means home controller index function so this is the URL that I get into after I log in right so my home controller index function so if I go to home controller which is inside an app HTTP controller's home controller you can see an index function it is loading a view called home so let me search for a view called home which is here right so this is the section content and that I need to replace ok so I will just place whatever I just made a cut from and then layout okay so I've placed it inside my home dog blade and now instead of extending the a play out I should also should extend the admin layout right so my admin layout inside my layouts folder which is this and the name of my layout is admin which is this so now if you refresh now if you refresh the URL home URL you'll see that it is loading everything that is that is from let's say our new template but I can see that is something we have got you've got some error that is and the spelling of VL is not correct yae LD or ye Ald let me check so inside my admin blade it should be Y e I D yield one now let me refresh oh it should be Y ie LD not Yei Yei LD yield refresh this now you can see our content is exactly same as this right so we have cloned our template into our system now let's say we have another function in home controller that says let's say tests public function test and this will just return a view and let's say it is test home ok so I'm creating a view called test home inside my home controller I mean inside my test function of home controller so I need to create a view called test home so you can just quickly create a view called test home dot PHP and write something here let's say this is test home page and it should also extend the layout called admin layout which we have done here in home so this part should be the same in my test home I'm extending Ali out called admin and my section should end up here end section now let me try to write the routes for this URL which is home controller test and my home controller test is my route folder is here so just like my home I'll create another URL and let's call it test home and it is a function is test of home controller and let me just give a name of the routers test home now let me try to refresh this and type in test home mmm again I made some mistake somewhere extends layout stored admin section contained this is test home page and end section so what was mistake test home extends layout admin and this is test home page I think nothing is wrong okay the mistake here is we have missed the bleed dot PHP so it should not be test home dot PHP it should be test home dot blade dot PHP all right so now let me try to refresh this now we can see this is test home page we have got that and our sidebar our header and my footer is exactly the same so this is how we integrate a template into our system and I hope that was useful to you guys and let me just show you one more thing one last thing before we end today in our previous template we had an option for logout so why don't we just try to do the same for this so let us just created a folder called logout over here inside labels so let me search for labels inside my layout so which is my admin dot blade or PHP you can just search for L a B and as labels it's somewhere no le is it L it is here so L a B Els labels is here so instead of having these three items let me just have one and call it log out okay just refresh this and let's see if we got that yes we have got the label here now the label is inside anchor and let me just quickly grab that code for the log out which you only have had in apt or blade dot PHP but since we are not using this template anymore I just need to copy the code for the log out so which is over here C so this is the code for the log out let me just copy it this is the anchor and it is also using a form so you can see whenever the log out anchor is being clicked it is it is asking the log out form to be submitted which is over here so I need to copy both of these codes copy and place it inside my let's say admin blade and we have log out over here so let me just place it over here for now and I will just adjust it so this is our anchor and anchor should have a class called nav link so you can just copy the class and place it over here so this should be my class my href is this and inside the anchor I also need to have didn't make a mistake let me just check quickly so my labels here so this is the anchor I need to work on so you can just paste it copy it again so copy this and paste it just before the anchor and this is the anchor with the class and they have linked I need to have a class called nav link over here instead of drop down and I need to have an eye tag just before the text log out so my eye tags should be here and just remove this now let's see if it works now refresh this test home ok and logout is here and once I click on logout it is logging me out perfect so let me just log in again so info and read code diary comm and one two three four five six log in and it is logging me in again so now maybe while working further on the system we can use this template we will just remove these unnecessary links and have our links that we need we have logout already implemented we will remove all these and just have news maybe categories and logout and some settings something like that we'll just remove that necessary contents and I think that that is it for today and I hope you have understood how to integrate a template into a laravel project and if you find this video helpful don't forget to rate the video click on subscribe button like the video share the video and if you have any confusions don't forget to mention it in the comment and now try my best to address to your question and if you have any confusions or if you find it find any trouble in following my videos I also have pushed the entire code to a git repository which is in the description below you can just clone the system and try to see how we have done that so that's it for today I'll see you guys tomorrow again with a new video till then have a nice time goodbye [Music]

Channel: Kodiary Technologies

Views: 172,962

Keywords: PHP, MySql, Laravel, PHP Artisan, Laravel Layout, Learn Laravel, Laravel from scratch, Laravel from basic, Kodiary, Kodiary Technologies, Anwar Ali

Id: Kljm9P7JZbI

Length: 23min 47sec (1427 seconds)

Published: Sat Apr 28 2018