3 Practical Examples to Learn Laravel

2.1 View and Routing Basics

The project that we are going to create in this lesson is rather simple. In fact, you might think that it's not practical at all, but I assure you it is. Let's first of all create this project. So, we will say laravel new, and the project name is going to be static-site. Now, if you are not familiar with the term static, we have static-sites and then we have dynamic sites. A static site is a website that has static information, that means that all of the content is contained within HTML files and that's it. So we make a request for a particular document, an HTML document, that gets sent back to the web browser and there's no dynamism about that. We aren't going and fetching data from a data store and then generating HTML to send back to the browser, it's just getting a file off the file system and then serving next to the browser. That's a static site. A dynamic site is the exact opposite, there are some static assets, but for the most part, the content itself is contained within a data store and our application is retrieving that information, generating HTML, and then sending that HTML to the browser. So it's not serving up any type of files, at least as far as content is concerned. CSS, JavaScript, that stuff is still being served as files, but the content itself isn't. And a static site is really not what Laravel was created for. Laravel is an application framework, we build dynamic applications with Laravel. So why would we want to create a static website using Laravel. Well, we will always have those projects that we will be hired for when the client wants an immediate web presence. It doesn't have to be the complete application that they are hiring us for, but they want something now. So, if we are going to use Laravel for our project, it makes sense to start with our Laravel project. And then create some static assets so that the clients can have a web presence now. It's not exactly what they wanted, but at least there is something now. So then we can develop our application and push out updates as we need to. And that is why this is a practical example. So let's CD into static-site, let's fire up our code editor, and we're going to look at some of the folders. Now, we briefly did that in the previous lesson. We looked at the app folder, the public folder, and I think there was a couple of others, I don't remember, but in this lesson, we're going to start with the routes folder. Now, what is a route? Well, if you'll remember, every HTTP request that our application is going to handle is going to go through the public folder, through this index.php file. And it is going to then go through our routes because our routes define how an HTTP request is handled by our application. So if we go to web.php, we see that we have a route for a get request for the route of our application that is the slash. So what you see here as the first argument to the GET method is the URL for this route. So a request comes in, the route is going to match that request with whatever URL is specified here. If it is a URL for the root of our application which is what we have here, then it's going to execute this function. And it is simply returning a view Called welcome, so let's look at this. In the previous lesson that we created our project, we fired up the artisan server so that we could see it in the browser. so let's do that again, we want to go to a localhost port 8000. And then we will see that Laravel page. Here we see Lavarel and the Documentation, Laracasts, News. It's very simple. And if you wanted to look at the source code, there that is. So, let's find this file, because, What we see here being rendered within the browser, is the result of this Route, for the lack of a better term, executing. And it's doing so by returning the view called welcome. So in order to find this view, we go to the resources folder, we go to the views folder, and then there is this welcome.blade.php. If we look at this file, we can see essential the HTML that we saw in the browser. But there's a few other things here. You can see this at if, if the route has login, Then it's going to show some links depending upon whether or not a user is logged in. So if a user is logged in, then they are going to see a link for home. If not, then they're going to see a link for a login or register. So it's more than just HTML, there is some logic here. But this is what a view is. Now the laravel framework is what is called the MVC framework. M stands for model, V stands for view which is what we're looking at here, and then C stands for control. The view is the user interface, essentially. It is what we are going to send to the users so that they can see whatever it is that they requested. So what change works as laravel. We're going to say static site. And let's go back to the browser. Let's refresh the page and we can see our change was made here. So what we are going to do is just create a few files. We're going to keep these links but we're going to link to those other files. So that we will have our static site so that our Clients can have an immediate web presence. So instead of our views, let's just create a couple of more files. Let's create a file called about.blade .php and let's also create a contact file as well, so contact.blade.php and we're essentially going to take what we have in the welcome page and let's just copy and paste that into Our Contact and our About pages. Now, we're going to change some of these things so that the Contact page is instead of saying Static Site, it's going to say Contact Us. And our About page Is going to say About Us. And then we want to add links to each one of these pages so that we can just navigate through each of them. Now if you'll notice up here where this code is for displaying the login and register links or The home link. Now you can see that there is this route login, this is going to generate a URL for the login page. In our case that's not what we want, we do want the ability to create a. URL that's going to be like /about, or /contact. So let's do that. Let's just copy this for our home. And down here where we have the Documentation, Laracasts, News, Forge, and the GitHub GitHub, let's replace that with, actually all three of these. So that our first URL is going to be the root. So that's going to be our welcome page, that says static site. And then we're going to have /about For About US. And then we're going to have a /contact. Now, because we're going to have these urls, that also means that we are going to need to modify our routes. Because right now we just have that one route for Our welcome page. So, let's finish creating those links and really we don't need this all logic up here for logging in. Let's just go ahead and get rid of that. We need to go to these individual files and do the same thing now if this seems tedious. You would be correct, it is tedious. However, in the next lesson we will see how we can alleviate some of this by using templates. But for right now, this is going to be fine. We'll just get rid of everything that we want to get rid of, and replace everything that we want To replace and let's then go to the browser, let's refresh the page. We can see that our changes were made, we have Home, we have About, now look in the bottom left-hand corner. The URL is our host and then slash about. The same is true for contact. But if we click on any of these We have a not found http exception that's because our application received that request, it didn't know how to route it because there wasn't any routes set up. So we're going to change that, we're going to go back to our web.php file and we're going to add a couple of routes Here they are going to be get requests so we are going to use the get method. And we are simply going to say, about and contact and then we are going to replace welcome with the appropriate view that we created. So now click on Home, we still see Static Site. If we click on About Us We see our About Us page. If we click on Contact Us, we see Contact Us. Now, as I mentioned, that was rather a tedious process to go through, going to each one of our individual files and making the same changes over and over again. Well, in the next lesson we're going to look at Using templates. Because when it comes to views especially within a web application we want to use templates. So that the views themselves focus on their content. And then the templates focus on well, the template content.