Laravel routes, views & layouts

Piotr Jura
A free video tutorial from Piotr Jura
Web Developer and Udemy Instructor
4.5 instructor rating • 5 courses • 15,006 students

Lecture description

Creating Closure routes, view() helper explained, route:list Artisan command, view layouts and using following directives: @extends, @section, @yield.

Learn more from the full course

Master Laravel PHP for Beginners and Intermediate

Get from zero to proficiency in Laravel PHP Framework! Course for beginners and intermediate students!

30:10:25 of on-demand video • Updated September 2020

  • Eloquent - ORM for interacting with the database
  • Advanced features like Queues, Polymorphic relationships, Service Container
  • Learn all the theory while building a real application as you progress!
  • Setting up PHP with Apache on Windows and Mac
  • How to use Visual Studio Code effectively
  • Creating APIs, serializing data, API resources and API testing
  • Routes and Controllers
  • Laravel Tinker - command line playground to Laravel
  • Blade templates
  • Blade componenets
  • Creating Forms, CSRF tokens
  • One to One, One to Many, Many to Many relationships
  • Polymorphic relationships
  • Testing
  • Local and Global Eloquent Query Scopes
  • Database migrations
  • Database seeding and factories
  • Authentication (Guard)
  • Authorization (Policies and Gates)
  • Authorization
  • Caching
  • How to use queues
  • Files and file uploads
  • How to send e-mails
  • Observers, Events, Listeners and Subscribers
  • Localization
  • Services, Service Container, Contracts and Facades
  • Using Traits in Laravel - SoftDeletes and creating your own!
English [Auto] After finishing the previous lecturer you should be able to go to this address H larval to test and that's the default page of a lot of the framework. Now let's open the Visual Studio code and open our larval project inside it so press that open folder and locate the lot of a folder in which you have created the brand new level project. Now the roots for our application can be found inside the roots folder. Web BHP files so let's open it you can see that the larval already created one route for us and the way we define routes is by using the static methods of the route object. Some note that you didn't have to add that I use statement for this route object and this is because this file does not leave on its own it is being included inside larval. I will show you later where. So you don't really have to worry about that and this object has a couple of useful methods and they correspond to the HDP verbs. So the default is the get but you can also use post or puff put or delete or any other HDTV verb out there. So get is typically used on the web to just fetch the data and the parameters of this static get method first is there address or the you url. So you see that there is only slash so it is for the main page and the second parameter is the closure. The closure is a function without a name. So that's on that's the function that only lives in this context. So what I mean is you cannot call this function from any other place it is being defined here and immediately called and how that works is for this route you have to call this function and it has to return some content and everything that this function will return is being rendered. Now you see that it has a return statement and it also calls a magic function called The View. So this is not a pitch be built in function. It's a function that comes from larval framework and it is one of the so-called helper functions will get to the helper functions later. For now you should just know that the view function responsibility is to find a template and templates are defined inside the resources views folder. So it tries to render a welcome template and you can see here on the left that there is a welcome dart blade that BHP file so you won't have to add this suffix to the Template name just a template name is enough. So let's open this template right now and the blade. BHP means that we'll be using of blade templating engine and it contains a lot of useful stuff to make composing templates easier. So that's the default template that is being created for us bi lateral will. We will not go into details of what's inside here that would be too much for now. But now let's just make a simple change and change the Lavell to larval course save the changes and now when you will go to the browser and refresh you can immediately see the change content. Now before we move even further I'd like you to know that I've prepared a repository on GitHub called larval cheat sheet and the link is included in this lecture and you can see all the options and code that we'll be using in this lecture and all the other lectures and you can easily find how to do a certain thing on this repository repositories. So I invite you to check it out. OK so let's go back to the visual studio code. And as I said everything what you will return from this function will be rendered. So if we comment out this view and just return the number you can also see that this number is displayed. So this function should return. Anything that should be displayed back to the user. So let's remove that now and bring it back to the view. Now we will remove this welcome blade template because it's not really useful for us. So let's thrash it and if you will try to see that page right now you see the error from the lateral that The View welcome was not found. And it throws an exception that invalid argument exception view name not found. So if you would try to render a view that doesn't exist you will see this error. So now let's create our own template and call it home. Blade peach P and render rendered render it here so as you remember you don't have to. And blade BHP just home. So right now it's working but it is an empty template. So let's add some content into it and maybe we can just display a header. Welcome to larval so this is working. We can even add some paragraphs saying this is the content of the main page save the changes and we get that. Now let's go back to the Web BJP and try to create another route and the route could be for example contact and it should return. Another review called contact. So now our application has two routes and of course the contact template doesn't exist yet. But before I will create it I will show you how we can least all the routes that are defined in our application of course. Now it is easy we can see that there are only two. But if your application grows you will have to manage it somehow. So open this terminal using terminal from view or you can just open the terminal window and type peach bee artisan and you can see a list of all the possible commands that you can execute mind that you have to be inside the folder where your larval application is. But what interests us at the moment is peach bee artisan root list. It allows you to see all the roots that are defined in your application including the you are I the method and how the action is defined. So now it shows closure but there are also another ways to define roots and we'll talk about them later. So just so you know peach bee artisan is your friend. Okay let's close it for now and after the contact template so create a new file and call it contact blade peach Bee let's also create a template and maybe we can also add a header contact and paragraph Hello this is contact save the changes and go back to the browser now you should be able to go to page lot the test slash contact and you can see your contact page so now everything is fine we have two pages but now let's go back to this templates you might notice that there is something repeating here we in both of these templates we have the same chunk of the HDMI mail which is being repeated so that's probably not a very good idea and we would like to move it into single file and only store the actual content of the templates inside them. Fortunately the lava has a tool for that and it's called layouts. So let's create our first layout inside a layout blade peach B file Okay so this will hold everything that we need to display on every page and those contact and home pages would only show the content that they need to the content that actually changes between the pages so let's save this now. And now inside the contact template will remove all that parts that are now in the layout and will use larval blade directive. So directive starts with the other sign and the directive we will use is called extends so here you have to type the layout template name that we extend. So in our case it is called layout but it can be called differently. So in each individual template you can extend a different layout so let's copy that and do the same in our home page. All right. So we have those two templates that should now extend our base layout. So let's see what do we have. So now on the contact page if you will check the source you can see that we have the content rendered on the top. Actually instead of bank rendered inside the body. So we have extended the layout and its content was being rendered but that's not what we wanted. We wanted to tell it where the content should be exactly rendered and we can achieve that using sections. Now sections are defined inside individual templates and you do that by using the Section directive followed by the section name. So we'll call this section content and you have to end it with the end section directive. Now let's do the same with the home. So it's also the content section and now see what happens when we refresh that document. So if you will check the source. Now you can see that actually nothing is being rendered and there is a reason for that inside the layout. We need to add another directive called yield and the yield is used to render a section. So since we have created a content section that means we would like to use yield to echo everything that's part of this section and everything that's between those two tracks will be rendered inside the layout. So save the changes everywhere and now refresh so we can see the contact page home page. Nothing much changed but when you look at the source now you can see that everything is being rendered inside the body tag where we wanted that. All right. I think that's enough for this lecture. Please continue to the next one well we will talk again about layouts views rendering data and configuring routes.