Views

Updated on Jul 11, 2024

Let's discuss Views in Laravel. We are paying special attention to them because they are essential for the framework's functionality. Without them, your application would not have a user interface. Imagine what an application without a user interface would look and feel like. Not very convenient! Views to the rescue, though, so let's dive right in!

This post includes:

What are Views?
How to Create a View?

section

What are Views?

We previously mentioned Views in this tutorial, but it is now time to go into detail. Firstly, let's expand our definition of Views. While they make up an application's user interface, there is a lot going on under the hood regarding Views.

Firstly, in the context of Laravel, a View is a file in the resources/views directory. It contains the HTML, PHP, and Blade Template code required for that file to generate the user interface it is responsible for. Here is a quick example of what you might find in a View file.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>
    <header>
        <h1>Welcome to My Laravel App</h1>
    </header>
    <footer>
        <p>2024 Your Laravel App</p>
    </footer>

Even without us explaining what the code does, you can probably guess just by looking at it. At the top, you have the header of the page, which contains its title. Then, you have the body of the page with a heading within it. Finally, you have the footer of the page, which will show a line of text. The great thing about HTML is that it is easy to read, even for beginners. However, if you want to look at a more complex View, check out the welcome.blade.php file in the resources/views directory. That is the View, which generates the default homepage for new Laravel installations.

A good way to think about Views is that they contain the application's presentation logic, which dictates which resources the application must fetch to show the user interface. Now, let's find out how to create a View.

section

How to Create a View?

To start, we have to create the View file. As mentioned, that is done in the resources/views directory. For our example, we will name the file simple.blade.php. We are using the .blade.php file type because Blade is the default templating engine in Laravel. We can use plain .php files, but Blade offers more features than the default PHP. We will elaborate on that later.

Next, let’s write a simple code block showing a basic two-sentence page. Of course, you can customize it any way you want, but we are keeping it simple for the tutorial's sake. Open the file and put this code in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple View</title>
</head>
<body>
    <h1>Hello, Laravel beginners!</h1>
    <p>This is a super simple view.</p>
</body>
</html>

We are certain you can already see what this code will do: create a simple text page with a title, a header, and one paragraph. We should perhaps elaborate on the <meta> tags, though.

<meta charset= "UTF-8"> - UTF-8 is the most commonly used character encoding, and we specify it at the top of our HTML code;
<meta name= "viewport" content=" width=device-width, initial-scale=1.0"> - All this code does is ensure the design of the page is responsive and adjusts to the device viewing it. The viewport tag controls how the web page behaves when viewed on different devices. Next are its attributes, and they state that the page's default dimensions should match the device's width, with no zoom in or out.

Now that the View file is ready, we need to connect it to the rest of our application. Fortunately, that is very easy with Laravel. Next, let's create the Controller that will trigger the View to appear. This simple command can achieve that.

php artisan make:controller SimpleController

Once the Controller has been created, we can find it in the app/Http/Controllers directory. The file's name is SimpleController.php. We need to define the index method. In other words, define the logic that will display our View, our page. Place this code in the file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SimpleController extends Controller
{
    public function index()
    {
        return view('simple');
    }
}

This code instructs the application to retrieve the simple view we created earlier in the simple.blade.php file. How does it know when to do it, though? That is the last step of the process. We will give it a slug and a URL to finalize the process. We do that by defining a route for it in the routes/web.php file. Use this code.

use Illuminate\Support\Facades\Route;
Route::get('/simple-view', 'SimpleController@index');

The route will trigger when someone goes to the /simple-view URL in your application. If it is an online application, it will likely look something like http://example.com/simple-view. When the application receives a request on that route, it will look for the SimpleController we created earlier. When it finds it, it will see that the View it is looking for is called simple and fetch it.

As you can see, creating a View can be straightforward. Create the View itself, then the Controller, and finally define the route. Of course, at this point, it is up to you to modify and make the View look the way you want it to.

That concludes the View part of our tutorial. Next, we will move on to Templates, what they do, and how they can make developing a website with Laravel a breeze.

Controllers Back to top Blade Templates