Get Started With Laravel 8

2.5 Creating a View

Views are essentially the user interface in a Laravel application. They are what generates the markup that is then sent to the browser. But a view is so much more than just markup, it's in fact a templates that has to be processed in order to generate that markup. Now, we have very briefly looked at views. They are inside of the resources folder and then views the only view we have is the welcome view welcomed.blade.php. That is of course what we see when we go to the index of our home controller, that is the welcome. And while the majority of this file is markup, there are some templating directives that have to be processed. For example, here is an if block it's basically determining if the route has login. If it does, then this content is going to be shown. But there's more than just this content because there are templating expressions really that have to be evaluated and processed and then ultimately rendered into markup. So what we are going to do starting in this lesson is spend some time with views because well, they are very important to our applications. And we're going to start by creating an about view for our about action method. So let's open up our home controller that is app, Http, Controllers and then HomeController. And basically what we want is a single view for every action that is going to return a view. Now, it is technically true that we could reuse this welcome view. We could add in the if checks to determine whether or not if it's a welcome or about or contact, and we can put all of the content inside of welcome if we wanted. However, we don't want to do that because that's going to really clutter up our welcome view. So we essentially want a single view for a single action method. So this means that we need an about view and a contact view. Now, we can create those from scratch or we can just copy the welcome view and use that as a basis. So let's do that and let's rename the copy to about.blade.php. Now the name of the file is arbitrary, there is no magic linkage between the name of the file and then the action method that we are going to use that view for. Because whenever we call the view function we have to specify the name of the view that we want to use. So in this case, about. So you can call your views whatever you want, but it makes sense to name the views according to the action method that they are going to be used for. So we've created an about view, we will do the same thing for the contact view. But let's first of all, change some of this content for about. Because we can go to about now and we are going to see the exact same thing that we would for the index, although it would help if we saved the controller. So let's save that file and then refresh and then there we go. So we want something that's a little bit different. And we can do that by just starting to delete a lot of stuff here. All right, so this div element right here has this svg, this is the Laravel logo and branding there, so let's get rid of that. And let's just have an h1 to where we say About Us. And then we want some content that is just going to have like a p element and that will be it. So let's get rid of most of the stuff and let's see this go all the way down here, I think that's it. Yep, everything else lines up. And then this is where we will have our p element. This is the about page. And let's also change up some of this styling here. We'll change the background color to be whatever is the page's. Let's get rid of the shadow and the rounded border, okay. So, if now we look at our about page this what we have. It's very bland but it is at least very different. So that's great, and we can use this as the basis for our contact view. So, lets just copy that file, let's rename that to contact.blade.php. And then let's make the appropriate changes so that this says Contact Us and this is the contact page. We of course need to change our HomeController so that we will now call view inside of the contact action method. And we wants to use the contact view there. So if we go to /contact then there we go, we will see the Contact Us. Now I would like some way to navigate between these different views. So let's add some navigation. And we won't do anything too fancy, we'll just add a navbar at the top. So we'll start with the div, let's reuse this relative class. And then we're also going to add in a padding. Now this does not exist in the classes that are defined in the template. So we will need to define this, but we're going to say p-4. And then inside of here we'll have our nav and then we will have our links and we'll have one for each page. So we'll start off with the welcome, we'll just call that Home because that's typically what we would see. And then we will have the about which will be to /about the text. We could say about us, but let's just keep it nice and clean and we'll just have About, and contact there. So let's view this in the browser, we do need to define this p-4 class, don't we? We can do that in this second style here. So we'll say p-4, we'll say the padding is gonna be 1rem. And if we go to the browser, let's refresh. And that's okay. Let's put some padding in between the links here. And we could add classes but let's do this, we will just say nav a. And then we will say the padding is going to be, let's say 0.5rem. And that should give us some spacing there. That looks good. All right, so now we just have to replicate that inside of the other pages. So let's start with the markup itself. We'll go to the about page and we will paste that in at the top. We will also need to do that on the welcome, and I really have no idea what this is going to look like, this might look horrible, but we will soon find out. And then we need the CSS there. So let's go back to our contact view. Let's copy the CSS. And then we will paste it into the about view and then the welcome view. Let's go to the About page, that looks great. Let's go to Home and okay that looks great as well. So now we have views for each one of our content pages and we also can navigate between them. But well that was kind of cumbersome, wasn't it? We had to copy the markup that we wanted, paste it into the appropriate files. And if we added more views, we would have to do the same thing for each individual view as long as we wanted to keep this same nav bar at the top, and that's very cumbersome. But thankfully, we can create what are called layouts that allows us to define essentially the layout of our application. And we will look at that in the next lesson.