In this Laravel project tutorial we will learn about Blade templates.
A view is what user will see on the screen when they visit the page.
In Laravel project the view files are placed inside the
When we create a new Laravel project we get to see the following view when we visit the home page
The view file of this page is
welcome.blade.php and it is inside the
If we want to use Blade template in a view file then we have to save the file with
For our todo-laravel project we will first create a master layout that will be shared with all other pages.
It is a good practice to reuse your template code.
resources/views directory we will create a
layouts directory and inside it we will create
We will now write the following code inside the app.blade.php file.
<!doctype html> <html> <head> <title>@yield('title')</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> @yield('content') <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
In the above HTML code we have prepared a master layout for our project.
We are using Bootstrap 4 to style our website.
@yield() directive is like a placeholder and we can fill it up with some content later when we use the master layout.
In the above code we have the
@yield('title') which will help us to correctly set the title of the page.
And we have the
@yield('content') which will hold the HTML of the current page being viewed by the user.
Alright, this is it for this tutorial. In the next section we will work on the Home page view.
And please share this tutorial if you find it helpful :)
See you in the next tutorial. Have fun coding.