Laravel Project
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.
So, if your website has a home page then you will have a home view containing the HTML and other related stuff like CSS and JavaScript of the home page.
In Laravel project the view files are placed inside the resources/views directory.
resources/views
When we create a new Laravel project we get to see the following view when we visit the home page 127.0.0.1:8000.
127.0.0.1:8000
The view file of this page is welcome.blade.php and it is inside the resources/views directory.
welcome.blade.php
.blade.php
If we want to use Blade template in a view file then we have to save the file with .blade.php extension.
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.
Inside the resources/views directory we will create a layouts directory and inside it we will create app.blade.php file.
layouts
app.blade.php
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()
The @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.
@yield('title')
And we have the @yield('content') which will hold the HTML of the current page being viewed by the user.
@yield('content')
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.