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

Education, Programming

Laravel 5.8 – From The Ground Up

52 Lessons

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!

    add to database laravel admin laravel artisan Artisan Command artisan commend create artisan console artisan laravel command authentication in laravel belongsto belongsto laravel example coding tutorials create artisan command create command artisan create new command artisan Create your own crud laravel crud laravel tutorial crud resource laravel crud with file upload custom artisan commands custom artisan commands laravel custom laravel database configuration laravel database relationship digital ocean dotenv eager loading eager loading in laravel eager loading vs lazy loading laravel eloquent eloquent accessors eloquent mutators eloquent orm feature testing laravel fetching data in laravel filesystem laravel form requests full stack vue gate and policy laravel google optimize hasmany hasmany laravel hasmany laravel example hasmany relationship in laravel hasone hasone relationship in laravel How to create how to queue email how to use queue installing laravel intervention image laravel laravel 5 laravel 5 auth laravel 5.4 queue laravel 5.5 queue laravel 5.8 laravel 5.8 artisan command laravel 5.8 artisan console laravel 5.8 auth tutorial laravel 5.8 authentication laravel 5.8 commands laravel 5.8 crud laravel 5.8 crud example laravel 5.8 custom middleware laravel 5.8 deprecations laravel 5.8 eager loading laravel 5.8 elixir laravel 5.8 event listeners laravel 5.8 events laravel 5.8 feature laravel 5.8 features laravel 5.8 global middleware laravel 5.8 install laravel 5.8 lazy loading laravel 5.8 listeners laravel 5.8 middleware laravel 5.8 multi auth laravel 5.8 named resource routes laravel 5.8 named routes laravel 5.8 new feature laravel 5.8 own artisan command laravel 5.8 queue laravel 5.8 queues laravel 5.8 routing laravel 5.8 telescope laravel 5.8 tutorial laravel 5.8 user auth laravel 5.8 user authentication laravel 5.8 what's new laravel 5.9 laravel admin permissions laravel api laravel artisan command laravel artisan console laravel assets laravel auth laravel auth role laravel authentication laravel authorization laravel axios post example laravel background process laravel background task laravel background worker laravel beginner to master laravel belongsto laravel belongsto vs hasone laravel belongstomany laravel best packages laravel best practices laravel best tutorial laravel bootstrap laravel command laravel command line laravel commands tutorial laravel composer install laravel connect db laravel console command laravel console testing laravel contact form send email laravel controllers laravel create laravel crud laravel crud policy laravel custom command laravel custom middleware laravel database laravel database configuration laravel database relationships laravel database seeder laravel database settings laravel db seed laravel db settings laravel debugging laravel deploy aws laravel deploy digital ocean laravel deploy on digitalocean laravel deploy on server laravel deploy to production laravel deployment laravel digitalocean laravel drag and drop file upload laravel dropzone file upload laravel dropzone image upload laravel e-commerce laravel eager loading laravel eager loading tutorial laravel eager loading with condition laravel elixir laravel eloquent laravel eloquent belongsto laravel eloquent crud laravel eloquent hasmany laravel eloquent where laravel eloquest tutorial laravel events and queue laravel events tutorial laravel factory laravel feature test laravel feature testing laravel fetching data from database laravel file storage laravel fillable example laravel flash message notification laravel for beginners laravel form validation laravel forms laravel forms bootstrap snippets laravel from scratch laravel from the ground up laravel front end laravel frontend tutorial laravel gate and policy tutorial laravel global middleware laravel hasmany laravel hasone laravel i18n laravel installation laravel installation mac laravel intervention image tutorial laravel javascript tutorial laravel jobs queue laravel language laravel language switcher laravel language tutorial laravel languages laravel lazy loading laravel listener event laravel listeners laravel localization laravel login laravel mailable tutorial laravel many to many relationship example laravel markdown email laravel markdown mail laravel mass assignment laravel middleware laravel migrate fresh laravel mix laravel mix 5.8 laravel mix vue laravel model factory tutorial laravel multiple language laravel mysql json laravel named resource routes laravel named routes laravel new features laravel news laravel nginx laravel node modules laravel npm install laravel npm run watch error laravel one to one laravel paginate laravel paginate link laravel pagination laravel pagination 5.8 laravel pagination links laravel pagination tutorial laravel phpunit laravel phpunit testing laravel pivot table example laravel policy laravel preview laravel query optimization laravel queue laravel queue event listener laravel react laravel register user laravel registration laravel registration validation laravel relationships laravel reset password laravel role middleware laravel role permission laravel roles laravel route group middleware laravel routes laravel routing laravel routing with parameters laravel sass laravel save file to database laravel scopes laravel seo tutorial laravel server laravel session data laravel ssl laravel supervisor laravel tailwind css laravel tailwind setup laravel tdd laravel tdd tutorial laravel telescope laravel telescope installation laravel telescope tutorial laravel test driven development laravel test workflow laravel testing laravel testing controllers laravel testing tutorial laravel tools laravel translation laravel tutorial laravel tutorial for beginners laravel ubuntu server laravel ubuntu tutorial laravel unit testing controllers laravel upload file laravel upload image to storage laravel upload multiple files at once laravel upload multiple image to database laravel upload multiple images laravel url slug laravel vue laravel vue js crud laravel vue setup laravel vue tutorial laravel vue.js laravel webpack error laravel webpack tutorial lazy loading lazy loading laravel lazy loading vs eager loading learn laravel learn laravel framework step by step localization in laravel localization laravel many to many laravel mvc tutorial for beginners in php mvc tutorial laravel mysql mysql relational database mysql relationship n + 1 problem n + 1 problem laravel new artisan command npm install npm run dev npm run watch laravel one to many one to one one to one laravel own artisan command pagination pagination bootstrap pagination bootstrap php mysql pagination laravel pagination laravel bootstrap pagination links pagination php php php artisan php carbon immutable php framework php framework 2019 php what's new 2019 phpunit phpunit laravel phpunit testing pivot laravel policy laravel polymorphic relationships queue and events queue email queue for laravel queue jobs queue laravel 5.8 registration form relationship laravel eloquent relationship mysql restful controller role permission in laravel roles laravel route model binding laravel routing in laravel save image to database seo friendly seo friendly content writing seo friendly website seo laravel seo optimization simple pagination laravel slugify sqlite relational database sqlite relationships between tables symfony command console symfony laravel tailwind css tailwind laravel mix telescope laravel tutorial laravel unit testing unit testing laravel upload file laravel upload file php upload image laravel upload image to database php upload images laravel upload multiple files in php url slug laravel url slug php vue vue.js vuejs laravel why use laravel queue why use queue