How to create Layout using Component in Laravel 10 | Blade Templating using Component with example

hey guys welcome back so guys we are continuing our Lal 10 tutorial so guys in previous video we have installed our fresh LEL application and also the authentication of Bree package so which we saw in previous videos okay so now guys in this video we are going to see about building layouts so building layouts in larvel is about blade templating okay so let me just show you on this blade templates we are going to the building l layouts part okay layout using components and layout using template inheritance okay so we'll be seeing what are these things so guys let me just give you a quick overview how it is going to be looking so when we are on the building layouts and layouts using component as you see here Define the layout components so it's nothing but uh you'll be finding a component folder inside your larel application and inside you are creating a file so you are not going to create directly a file we have some Artis command to generate this component file okay and then you have to paste this uh structure or create your own structure either you can copy from your laral uh app blade. PHP or guest blade. PHP and then guys you can come back again here you follow all the steps for how to import all these components okay so now guys let's get started so let's move to our editor so first step guys you can see that we have already installed a breeze package so which already gives with the layouts so here we have app layout guest layout two layouts are already present so now I want to create our own custom layout so we'll be using bootstrap in that so for that you can just uh get started with the command just type let me Zoom it so it will be more clear so PHP Artis make colon com component and the component name so I want to keep the component as app layout okay and hit enter so component already exist let me go to app views so here you have app layout and guest layout which is provided by the larel itself so instead of this you can use your another layout so let me app web layout okay so hit enter here your app web layout okay done and now guys you can see here a component file is created and it's in the component folder which is app web layout so now let us go to this file either you can click and move to that or else you need to go to your uh resource directory so inside resource folder go to views you will find a component so inside that component you have a app web layout okay and guys if you want to keep this app layout inside the layout itself then you have to manually change it so let us see how to change this manually so you just need to pull and drag here inside the layout folder and move it done and now you are out of the component so here is my app web layout and now let's go back to our component that is app views components inside that app web layout so you need to change that path guys so mention that layouts and then app web layout okay so now you're done and now let us remove everything and let's start from the scratch so HTML 5 and now guys let us take few things from the ab blade. PHP that is like your HTML Lang and the csrf token then title and we do not require this white you can just ignore that so so first let us copy this HTML and paste here and the C srf token is main so let's copy that and paste here LL 10 tutorial or your project name and now guys you can import your CSS as bootst or Tailwind so in your ab blade. PHP you importing that CSS which is linked here okay so this is nothing but your uh you can find that in the resource folder CSS folder you have a app. CSS so here it's defined with the Tailwind if you want you can directly give the bootstrap and you can use that okay so I'm not going to use that part but let's go to get bootstrap.css so here are my CDN links so I can use this so let's copy this CDN link paste and let's remove the integrity let me just okay so this is my bootstop CSS CDN link and we need one JS CDN link also so that is nothing but bootstop bundle CSS I mean JS so here is the script part let me contrl C and paste it so guys we do not require this things you can remove and throw that let me just zoom out a little and yep so now guys what we have to do uh let us go to are docs so here while creating your component you see that you are setting this title and a slot part so what we have to do let's get back you can directly create a div and paste that slot slot slot so which comes your area so this will be your content area and we need to change the title means you can just add a simple variable like open and close CBR dollar title question mark and then paste if you are providing this then it will continue else it is going to continue this part okay as simple and now guys if you want for the script area also you can just add that as a dollar scripts and now let me open the sidebar and then let's uh go to our routes web. PHP so inside this routes we see that on the homepage we are calling a welcome blade right so let's move to this welcome blade. PHP which is resource views direct welcome blade. PHP so instead of Welcome blade let us call our welcome page so for that you can just go to your views folder just create one new folder called front end so inside that front end folder I want to create a welcome blade or index blade. PHP okay so let's let us follow the structure like index blade. PHP hit enter and this will be your page so let me just tell in a H4 tag welcome to index page okay let's save and you can get back and let's change the path frontend folder and then your index blade file that's it and done guys and now let me get back and refresh here perfect so here you see guys we have a welcome to index page and now guys we are going to do about the uh building layouts with the component so guys what we have to do we have created a component right so this is our component that is app web layout so get back to your index played so now guys let us extend our app web layout so just open tag and use x alphabet and then this is the mandatory key guys which is if you want to include any of your comp component X is important so you can just use x hyphen then your file name that is app web layout so app hyphen web hyphen layout okay and close that so you do not require to import that blade. PHP just ignore that part and let's paste Here and Now guys let us see the output let's save it and get back so refresh okay undefined variable script so which is we see here in the script part is so for that you can just and double question mark and single code so now guys let us save and you can get back refresh okay it's already refreshed perfect so here you see welcome to index page so you see that a font has changed and now guys I just want to implement a simple nav bar inside our application so just search for nav bar inside the bootstop and here is the basic Bic navbar header let's copy this get back to your app layout here so inside this app layout I want to paste here so we don't want to directly paste it so instead of that we will create a component so let's create one file inside this and tell as partials so inside the component I created a folder called partials let me Zoom it okay and yep let's create a new file called nav bar. blade. PHP hit enter let's paste it and let me remove few of the codes remove this form and the U will tag starts here let's remove this drop down we do not require let me just change this path to URL forward slash chain this MS Auto and you can add a shadow sticky hyphen top okay so now guys let us save and you need to import this component that is your navbar component inside your app web layout so for that as I said if you want to import any component use any component in your larel you have to use x then hyphen and then your path of that so partials Dot navbar and then close it that's it let's save and now guys you can get back refresh perfect so you see guys that our Navar is linked and guys I just want to make that container to normal container so it's container fluid let's make it only container so guys let's get back refresh perfect and now guys I just want to make this welcome to index index page in a container format of bootstrap so you can get back to your index blade. PHP and let's control X use do container and paste here and if you want to give some space padding top and bottom that is py continue the space let's save and you can refresh perfect and now guys uh let us continue with showing the title and the script part so let's get back and if you go to your app layout web app layout here you see you have a variable called title okay so how can you use this so you don't have to do anything guys you just need to copy this uh title variable name and get back to your index blade wherever you are using that app layout and here as simple let's use x hyphen slot and open and close tag okay so just use a name attribute and paste that title and then whatever you type here uh my larel app and now guys let us see the output what happens here so you get back refresh you see that our title has changed to my LL app so there is another method guys to display this you can just see that here here is one more method explained that you can directly use this colant title instead of name attribute giving it so let me copy and show you okay so instead of name I'm using this colon title and here you do not use that I'm not able to type it because my auto correct extension has been installed so let me paste it okay let me Echo this custom title itself let's save refresh so here you see it's custom title okay perfect so guys you can use any of the method and same with your script tag so just need to add a RTS and make sure you are copying the correct spelling so here is the scripts okay now you can directly type your script codes script open and close tag and let me console.log and show you so this is my script area okay let's save and let's f2l for developer tool and here you see that this is my script area so you can console also if you want to show in alert just use alert function to alert that on the page okay perfect and if you want you can just use this format of scripts now let's save get back refresh done so guys we have successfully seen how to build a layout using component in LL okay and you know another format of that is the template inheriting so let me just show you so this is our template inheritance okay so this you already know which is coming from the beginning of the LEL so as you see that extend section yield and yield the title use the section and layout extend the section okay so this is the basic format so which we already know so you do not require to go through this okay so guys in this video that's it we have successfully seen how to build a layout using component in LEL so guys thank you for watching this video and let's continue next video about how to make a functionality would do the form validation and many more things so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 4,284

Keywords: fundaofwebit, laravel 10 blade component tutorial, creating laravel blade component step by step, laravel blade component, create layout using components in laravel 10, creating layout using component with breeze in laravel, laravel breeze create layout component, laravel components tutorial, blade templating with laravel components, blade templating using component in laravel, components blade templating, components in laravel

Id: HTa3FU3Ppyk

Length: 15min 6sec (906 seconds)

Published: Sun Nov 19 2023