Laravel 5.8 – From The Ground Up

Laravel 5.8 Tutorial From Scratch – e11 – Cleaning Up The Views

we are making great progress in our test project up next I want to focus on the front end just a little bit we are pulling in bootstrap but we aren't quite

using it the right way so I want to take a couple of minutes to refactor some of our views starting with this form I know that this form can look a lot better with bootstrap so let's take care of

that now let's pull up the customers DUP and let's start with this form so we added a P tag for name but the proper way of doing this is to actually have a label so we'll add a label for name and

we'll just say name and let's add a label for email and we'll also call this email and then input group is not the right class for that it's actually form group so we'll wrap both of those in

form group and let's give our inputs a class of form control that's what it needs this is all basic bootstrap stuff let's check our progress okay so that's looking good it looks like we have to

duplicate emails here yep let's get rid of that and now let's give our button a class of button and then button primary that gives it a nice blue color there we go so that's looking much better

eventually I may separate the form section from our listing but for now just to create some separation I'm gonna put a horizontal rule there we go and now we have too much padding let's get

rid of this padding right here there we go a little better so now we need to wrap each of these sections in a row and a column so say row column 12 and let's paste that in let's do the same for our

form a row column 12 and then finally let's do it for our list we'll cut that out row call them 12 paste that in and we shouldn't see any changes here okay that's looking better the next

section I want to focus on is our navigation so right now our navigation is basically bumping up all the way to the left but I want to move it so that it's actually in line with our pages so

let's go to our layout file and here's the issue we put it outside of here but it should really be inside our container and once we do that there we go it bumps it in but it's still a

little cluttered let's add a little bit of padding to the top and bottom so we'll say py 3 that puts it in top and bottom there we go that's looking much better so now we can

navigate through all of our pages and that's looking good up next I actually want to extract this section here of navigation into its own file now there are several reasons to do this for one I

do want to show you how to extract a section and have a partial and – I think navigation should really be in its own file and I'll show you why at the end so I'm going to cut this out and let's

create a new file here called nav that blade dot PHP and I'm just gonna paste that in and now how do we include that file well we use that keyword include so @include and we're gonna include the

navigation that's it it's as simple as that if we go back here and refresh our pages we get the exact same thing so what is the benefit of extracting something like

our navigation so if we pull up our quick file look up and just about every editor will have some sort of quick file lookup we can type in nav and quickly go to our navigation this is integral

through the life of a project especially as it gets bigger having these small refractors where you extract partials helps to navigate through the project and definitely get used to navigate

through your project without opening the folders for demonstration purposes I am leaving this open here but at the end of the day typically I don't navigate through my project

by searching for the files here I just do a quick search and maybe jump over to our layout file and there it is if I want to jump to my customers controller there it is very quickly I can get from

file to file now that we have this partial I will go back to my layout because I want to show you one more thing about the include directive as a second argument you can pass in an array

of data and this is very useful we don't actually need it right now for this navigation but I do want to show you this feature let's say that we need it to pass a user name to our navigation in

that case I can say cool user 1 2 3 doing this gives us a username variable that we can use inside our navigation let's jump back to navigation and just for demonstration purposes I'm gonna add

it here as a paragraph we'll say username let's go back to my project and hit refresh and there it is cool user 1 2 3 so that's just an easy way to pass data to a subview or a partial let's get

rid of that line and go back to my layout we don't actually need this but just know that that is there as an option ok what else do I want to tackle well there's this title thing so we

hard-coded myfirstproject in every single page has the exact same title but we know in real projects you don't typically have the same title for every single page so we need a way of

intercepting that title and even having a default so let's handle that now instead of hard-coding myfirstproject I'm gonna yield a new section and we're calling it title makes sense so let me

go back to my customers view and up here I'm gonna add a new section for title and we'll call it customer list and section so if we go to our customer list now we see that we have a title and we

can see it up here but if we go to another page like contact us we don't have any title at all and that's because we don't have a default let's add a default now as a

second argument to yield we're gonna give it a default and we'll say learning laravel five point eight that's gonna be our default title unless a view overrides that title it's it safe go

back to my contact page refresh and now we have learning level five point eight let's say that I want that to say contact us in which case I'll go to the contact view and add a new section here

contact us and section and there we go we now have this all right another little round of refactor I want to do when you add a section this is the long form of adding a section but

another way that you can do it is you can cut this out and as a second argument to this section directive we can pass in contact us as a string and if we hit refresh in our browser we get

the exact same thing I do think a single line for something like a title is a much cleaner way of doing it let me go back to my customer and do the exact same thing cut paste and we can get rid

of that and let's make sure that our title matches customer list let's go back to customer list there we go so we have customer list and it reads customer list we go to the about page so we're

defaulting the about Us page because we have not assign a new title let's do that now section for the title about us and finally let's change the homepage as well we'll give that a title of welcome

so home says welcome about us is about us contact contact us and customer list we have customer lists on second thought I'm going to delete the title off the homepage and I'll just have the default

be the title of the homepage there we go so learning laravel is the default title and that's alright for the about us we are overriding same thing for contact and same thing

for customer lists so our project is looking much better now if you've been following along go ahead and apply all of these reef actors play around with the concepts of yielding sections for

the title and for anything else that you can think of and when you're ready we'll move on to the next lesson

Let’s take some time to clean up our views file and make our project look better by adding some Twitter Bootstrap classes.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Course Source Code
https://github.com/coderstape/laravel-58-from-scratch

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Ready to get started on your path to Laravel Artisan? In this series, we are breaking down all of the basics of Laravel to get you comfortable using the world’s most popular PHP framework. Let’s get started!