#3 How to Integrate Html Template in Laravel Project | Laravel Advance E-commerce Project Tutorial

hello everyone this is yamin and welcome to tech knowledge in this tutorial i'm going to show you how we can integrate html template in a laravel project and this is a template we are going to integrate in our laravel project so i'll give this template download link in the description so that you can go to the link and download this template so let me just preview the template over here so this is the template we are going to use in this tutorial here you can see this template is really good and indicating a template in a laravel project is actually really simple so let's just first uh download this template and in order to download it over here you can see a download option if i just click on this download option here you can see it started downloading and here you can see the download is complete so let's just uh show in folder and this is the zip file over here you can see so let me just extract it over here let's click extract here and here you can see fems uh 1.1.0 this is the extract file so let's just go inside this file and here you can see css font uh images and you can see the html file over here here you can see index these are all html files so let me just open it and show you open with google chrome and here you can see this is the template that we just downloaded so first of all uh in order to indicate this template in our laravel project we need to copy some file from here so let me just let's just copy everything uh except those two files so all these css font images js all those file is required to copy so let me just copy it from here we need to uh paste this file in our project public folder which is uh this one over here you can see public folder so inside it we are going to paste all those file so here you can see we already have css and js folder so we're going to create a folder over here uh and we'll name it let's say home and we will paste all those files in that folder so for it let's just go to our project and over here you can see e-commerce for this our project and we'll directly go to our public folder and over here we're going to create a folder and let's say our folder name will be home and inside this home we're going to paste every file over here and there you go this is the file we just pasted in our uh public home folder and if you go to our uh code here you can see we have a we have all the file that we pasted over here and how we are going to uh show this template in our project so for it uh that will be actually really simple so let's just go to our resource then inside tsos here you can see views so inside views or let's create a file uh folder actually let's get a folder called let's say home and inside this home we are going to create a file let's let's name it user page dot blade dot php so save it control s and then save so here you can see user face dot blade dot php so right now uh over here if here you can see in the public folder uh here you can see home folder inside this home folder we have index.html so let me just zoom in so we are going to copy every code uh from this index.html so ctrl a ctrl c and we are going to paste it in our user page.play.php so control v and ctrl s so right now we are going to show this uh user paste.blade.p over here so in order to do it uh let's let's go to our routes then web.php and here you can see here we are going to create a route here you can see we already have a slash i mean for the for the root we are returning a view welcome which is this one so we want to show over here in this root view we want to show the template so for it uh here uh let me just remove this and let me just copy this route ctrl c and let's paste it here and this will be the root and it will call home controller which is our controller name and instead of redirect let's just over here index so let's save it right now we'll go to our home controller and create this index function so let's go to our controller we'll go to app then http controller here you can see home controller so let's create a function over here we'll say public function index and inside it we're just going to say return view and it will be our this user base dot date dot php and this user base dot dot php is actually in the home folder so we need to say over here home dot user page okay we need to keep it inside single quotation so right now let's save it and let's save it over here as well so right now for this root view uh it will call the index function uh in the home controller and our home controller index function will call this view which is home dot user page which is uh this one so right now let's go to our browser and if we just refresh here here you can see uh this is actually the view but we need to fix something and that is actually over here uh you can see that uh we keep all the css images and js in this uh home folder but if you go to user page.blade.php here you can see that the css link over here but in the hdm we do not have a home so we need to mention this home folder over here so let me just select every link over here here you can see this is on link so i'm going to select every link here you can see href another href another href so we're just going to say over here home slash then we'll go down at the end and here you can see the skip file here we also need to mention the home slash let me select everywhere and we say home slash let's save it control s right now if we just refresh here we'll see a proper page so here you can see that we can see the face or text everywhere fine but we cannot see the images the region is actually really simple if you if you go to our code over here you can see href here you can see image source we are giving the image source but here we also need to mention the home slash and everywhere there is image we need to mention home slash in the source so that will be actually a kind of a problematic things to do so let's just do one thing and that is let's just keep this image folder out of this home folder so that will make our job more easier so let's go to our project folder and here okay let me just cut this image part and we'll paste it over here in the public folder control v so here right now here you can see there is no image in this home folder but the image folder is outside this home folder so right now it shouldn't give us any problem so let's just refresh again and there you go everything is fine right now we can see every image over here so right now over here you can see in this co userbase.blade.pc there is a lot of code and it's around 1000 code and reading all those code from on page will be actually quite tough so what we are going to do is that we are going to separate a different section of code in different bit blade file so here you can see that this is the header part so we are going to keep this header part code in a different blade file that is actually really simple so let me just create a file inside this uh home home folder let's click new file and here we are going to say header dot blade dot php so control s and then save so here what we are going to do is that we are going to here we are going to cut the header section from here and paste it in this header.blade.php so here you can see that the header section start from here so let me just copy it from here and here you can see the header section indeed over here so let's just cut it from here control x and if we now save it and if we now refresh here the header section will be missing here here you can see the header section is gone so right now let's just paste uh those header section code in the header.date.php so this uh this is the header section code and we're going to mention this header.blade.php over here so here we are going to say at the top include then we'll give two first bracket to single quotation and here you can see our hero.blade.php is inside the home folder so we are going to see over here home dot header so right now we'll just save it ctrl s and then we'll just refresh over here and here you can see the header part is back so we're going to do the same for this slider part uh who i shop with us new arrival and the most important part is our product we'll also do this for our product as well so let's just do it on by on and right now our header part is done and here you can see this is the slider section it's already written over here so let me just copy it from here and here you can see the end of slider section so let's just copy it i'm in the cut it from here control x and if you now save it and refresh here you can see the slider part is gone from here so right now we'll create uh in the home slider.blade.php let's click new file and we'll say slider dot plate dot php so ctrl s and then save ctrl v this is the slider code so let's save it and let's go to user page and here okay let me just copy this paste it here and we'll just say over here slider save it again and refresh it and the slider part is back so let's just do the same with the uh this part why shop with us new arrival okay so let's this is the y section let me copy it from here to here so let's just cut it from this uh cut this y section and we'll create a y part i mean uh why don't blade.php let's say y dot blade dot php ctrl s and then save let's paste it here let's add the y part over here as well we'll just see over here why so this is the new arrival section cut it here let's create the new arrival let's say new underscore arrive file dot plate dot php so control s save paste the code save it here okay let me just copy it paste it and we'll say here new underscore arrival now save it and let's see if everything is fine okay everything is fine now this is our product section this is the most important part so let's do it for our product as well so here you can see product section over here written so we are going to cut it from here to okay let me just copy it first and the polarization indeed over here so let's just cut it from here control x and let's create a product.php here new file and we'll say product.php ctrl s save let's paste the code here then here we are going to say include product home dot it will be product let's save it and let's refresh okay there is no issue with the product and let's just do uh the same with the subscriber part testimonial part and the footer section as well so i'll just do it in on go over here so let's just cut this subscriber section ctrl x let's say here subscribe dot dot php okay subscribe ctrl s save so after this we will get this client section client section in here ctrl x let's open client.let.php i give double d here ctrl s safe and let's do the same for the footer part as well and the footer part ended over here okay ctrl x and let's create footer footer dot blade dot php ctrl s save now let's just add those blade file over here so let me just copy it and this is the subscriber section we will see over here subscribe subscribe and here we say client and then here in the footer section we'll say footer ctrl s so let's just refresh here okay we got it error home dot p client okay let's save it then refresh okay everything is fine over here so right now what we are going to do is uh we are going to add a login and register option over here so for it uh we let's go back to our code and here you can see we can actually easily find where our header section is because we just uh divided our code over here so here we're going to add login and register options so here you can see uh the block and contact part which is this one block contact so let's add login and registration option over here and let's also do this cut option for now we'll have our own card option and here you can see that the card option code is quite complex so let's just remove this code for the card this is the card option code here you can see that this list started over here and ended over here so let's remove it save it refresh the cut option is gone so let's add login and registration option over here so for it uh we're just going to copy this link control c and let's have the login and destination option before the search option and here we're going to say login and here you can see class link uh nav link so instead of this we are going to use a bootstrap class so we'll say bpn btn uh let's say primary this is a bootstrap class save it let's refresh and here you can see this our login logs now let's create our registration option so let's just copy this again and paste it here and here instead of login we are going to say register and instead of btn between primary let's say here btn btn let's say success save refresh so this is how our button look so this is how it looks we have login and registration option and we need to have some gap about here so for it we'll just write a simple css so here you can see login option so here in this anchor tag okay let's just mention this id equal to let's say it will be let's say login css and right now we'll just put to our public folder and inside public we have home folder and inside home here you can see css so inside this uh css folder you can see style.css so we'll just write a simple css over here so let's say here and since that is the id uh we just declare the id over here so we'll just we need to give hash then we'll say login css and we'll just over here margin margin right let's say it will be our 10 px let's save it so here you can see id go to login css so it will call this uh css code margin right it will be 10 px so it will create some gap so if we now refresh here you can see there is some gap over here okay i think we need uh we should have this search option on the left because it doesn't look good right now so here you can see this is the search option so let me just cut it from here and we'll paste it after this contact save then refresh okay there you go so here you can see right now if you click login it doesn't take us to the login page so we need to go to a login page so for it okay let me just go to my welcome.blade.php over here you can see so this is the welcome.blade.php and if you go a little down here you can see at the line 26 here you can see the login option and here you can see in the hdf route login so here we are just going to copy this href ctrl c and we'll paste it over here you can see here hf contact so we're just going to remove this and we are going to paste this code over here and we are going to do the same for this register part as well so let me just remove this href and we will go to welcome.blade.php let's just copy this href ctrl c and we'll paste it over here in this anchor tag so right now says let's save it and let's just refresh here and if you click on this login option here you can see it took us to the login page and if we click the register option to us to the register base so right now if we just click login and let's just try to login let's say here user at that of gmail.com and let's keep the password let's click login and here you can see it took us to this page over here but uh what we want is that after login the user will still stay on the same page but will have a logout option for this user insta will not see the login and register option will only see the uh logout option for the user so right now we will write some code in os so that after login it take us back to this uh home page so for it let's go to our code and we'll go to our controller then home controller dot php and here you can see that uh if the user type is zero it means user then it will return us to the dashboard view so instead of dashboard what we are going to say is we are going to say userpage.blade.php so here we are just going to say stop this we are going to say user page we need to give home dot user base so right now if we save it let's just refresh here again let's try to login user let's keep the password let's click login so here you can see it took us back to this page but here you can see that login and registration option still is over here although in the url you can see slash redirect it means there is a logged in user it means a user is already logged in so uh what we want is the install login and registration option we want to see a logout option for user so for it let's go back to our code again then we will go to our header.blade.php and here we are going to write a auth condition over here uh just like in the welcome.php here you can see if route has login uh it means it has a auth then it will uh show us something or if the route doesn't have any login then it will show us login and registration option so we are basically going to use this same code almost same code so let me just copy this if condition control c and let's paste it over here before this login and we need to in this if condition after this register so we say at the top in if then again let's go to our welcome.php and here you can see if there is odd will show something if there is no auth then we will show something else so so let's just uh see over here at that of auth so if there is earth will show something obviously so let me just copy this and for now let's just say over here uh something like let's say log out and here we are going to say at the top else and here you can see at that of odds so we also need to in this earth so we in this auth over here after register so we say over here at the top in auth so right now let's save it and since uh we are already logged in so we want to see login and registration option over here so if you just refresh here you can see we have a logout option but obviously logout option does not work so right now we'll go back to our code and here we are going to fix something for this so for it we're just going to copy a code from our admin then home.php and here you can see two line of code except layout opening and except layout closing and in the previous tutorial i showed you that this part is actually responsible for the logo part so we are just going to copy this and we are going to paste it in this uh list part list code ctrl v so here you can see so let's save it and let's now refresh and here you can see we have a logout option right now right now we can log out from here if we log out we can see the login and registration part but obviously we need to fix the view for this logger option so here against the user uh logout option here you can see logger option but it doesn't look really nice uh it's actually a little bit down so let's also fix this so for it we'll just directly go to our or navigationmenu.great.php uh here you can see in the resource uh in the views you will find navigationmenu.great.php so we'll go over here and here you can see nav x data now those are the uh class that design that button over here you can see so here we're going to remove this class and then we will also remove this class and this one as well so right now if we save it now the button design should be fixed refresh and there you go it looks really nice over here and we can just log out from here as well and if we click login again let's just do it again 7 8 click login and there you go it looks really nice so this is the uh template html template indication part so in the next tutorial we will uh indicate the admin template so let's just go to our admin template i'm in the admin view and this is the admin view uh our admin view right now here you can have a logout option which we cannot see properly so here we are going to add admin template or integrate html admin template in our project so this is all for this tutorial and i'll see you in the next tutorial and if this tutorial was helpful or if you like this video then please consider subscribe to this channel so thanks again for watching stay tuned and stay healthy

Channel: Web Tech Knowledge

Views: 47,909

Keywords: integrate html template in laravel, convert html template to laravel, how to integrate html template in laravel, html template to laravel, using html template in laravel, install template to laravel, laravel, html to laravel convert, import html templates into laravel, how to integrate admin template with laravel, how to import template in laravel, bootstrap template to laravel, laravel project, laravel tutorial, how to install adminlte 3 template in laravel 8

Id: 2OgfE418MXU

Length: 26min 12sec (1572 seconds)

Published: Sun Mar 13 2022