PHP Laravel 8+ Integrating Theme with some cool Pro Tips

okay so welcome back to another video and in this video we will customize the ui of our dashboard we just created a login and login log out and sign up in our laravel project so i um so let's find a theme which we are using for our project um start buddhastrap.com is a great website to get a free template or theme let's go to the theme browse all teams and i like their sb admin 2 theme this is open source and free to use you can just download this from here i've already downloaded this and i uh what i did is that i um just copied all the html files in the resource directory and i copied all the css image js sas and vendor folder here in the public directory okay so what i want now is that when i go to this slash home page i want um the dashboard ui okay i want this ui um let me show you if i go to the dashboard um preview if i go to the dashboard here i want this ui right here okay this is very simple okay so we have this slash home page um first let's copy okay go to the yourself let's open the vs code let's do this from here first we have to create a layout go to the resource and views um and then layouts make a new layout admin.blade.php and then open up the theme file this is the file which i just downloaded from start bootstrap copy everything from here close this up paste it right here save this file and then go to the web.php here we have this controller right home controller go to the home controller and then it opens the home dot play dot page let's open this view home dot play dot php it uses the layouts dot app which is here layouts dot app this is the default layout by the laravel framework and we want to use our new layout which we just created admin layout okay so close this up and write layouts dot admin save this file and then remove this section just write one line admin layout dot admin refresh this page and we have the updated updated view great it worked but um we have to break things up we have to break this header the sidebar the footer and this is the content so so basically we have one section for the header one section for the sidebar and one section for the footer and the fourth one is the content so we have to break things up okay let's do this this is pretty much simple and in the layout create a new file name it header.blade.php and um open up this admin.blade copy everything which is related to admin uh which is related to the header um okay where is the header okay this is the top bar this is the header cut this from here and go to the header.blade.php paste it right here save this file close this up and here write include layout start header save this file and to make sure if it is working correctly go to the browser refresh this so the header is coming from a separate file to prove this um go to the go to this file remove this line save this file go to the browser refresh this header is gone so that means this one line is responsible for the header do the exact same thing for the footer find the footer where we have footer okay this is the footer and then cut this right include layouts dot footer create a new file here in the layouts footer.blade.php paste everything which is related to footer okay what what else we have uh we have the sidebar scroll up this is the sidebar cut this and then write include layouts dot sidebar and then do the same thing create a new file with the name sidebar dot sidebar dot play dot php copy this thing the more you break break things up the more it is easier to update your website okay so that is why i am i used to break everything um in my project okay so um here we have our project okay here we have to refresh this the sidebar is coming from a separate file this header is also coming from a separate file here we have this folder from separate okay so we want to make a new route with blank or something like this slash blank blank okay so i want a new file a new page with the with empty content which we can make for the profile or the to update our or to update our profile or to do anything else so we also have to um [Music] so currently this uh section is coming from the layout file which is not correct so what we can do is here we can just collapse collapse everything related to the content and cut this and write yield and then right here content save this file go to the browser and refresh we have empty content i think there's something wrong okay i accidentally copied the footer as well so this is the main content okay scroll up and then we can cut this content right from here we can cut the content and write yield and then name this yield uh content save this file we refresh the page we see that we have the sidebar top bar and footer but we have nothing in the content okay so open up the home.play.php and then right here section and round brackets content and after this and section paste everything here that we just cut from our admin.play.php paste it right there save this file and then close this open the browser refresh here we have this uh content coming from a separate page if we want to create a new route for profile for anything else you can do this very simple you can just um write this link it says that 404 not found for this we have to make a route in the web.php open up the route copy this and then right blank here you can write blank and then do the same here in the home controller we have to create a blank function and then what we can do is uh just copy this and write it blank and the view is also blank let's run this and let's see what error we get it says that view blank is not found view blank not found okay so we have to create a view called blank um here we can do the views in the views directory right blank dot blade dot php here uh just write i don't remember the exact keywords let's see here in the home scroll up okay let's just copy this line go to blank paste this line with this line we have the top bar sidebar and footer ready okay let's try this refresh this and we have the top bar sidebar and the folder ready so we can write custom custom content here so all the pages have the header sidebar and footer constant only this the content here is different with each url right on each url for the content you can do this right section content and then and section here let's write uh hi let's write uh thanks for watching my video okay let's do this in the h1 so that it looks bigger okay let's run the code right it worked so it is stick to the left hand side because we are not not using the proper css we can do this go to the home doorblade.php and just copy these things up um okay just copy this let's copy this container float okay and go to the blank surround this h1 with the with this div and run the code here okay it looks better now so you can write your css using so you can write the html using um css classes to make it look better for now we have two routes one is home home has this simple dashboard and we have the blank url which have a blank page you can use this page or you can create more pages like this for the profile settings activity log or anything it depends on you okay so thank you for watching my video i hope you understand how to integrate integrate a theme in the larval project [Music] okay you

Channel: Ghulam Abbass

Views: 1,576

Keywords:

Id: Uc4Mn4QtsCo

Length: 14min 4sec (844 seconds)

Published: Fri Dec 18 2020