Nov 6, 2021
Create your first Laravel app : views on Laravel
Laravel has a templating engine called blade, we can easily make our views in Laravel using blade templating engine. So what’s blade and how to use it? Let’s find out.
Prerequisite
You must already have a Laravel project, if you don’t please make one or if you are new and don’t know how to create it you can read Create your first Laravel app in 3 step
Blade
No it’s not blade for cutting something, but it’s Laravel’s templating engine. According from Laravel documentation :
Blade is the simple, yet powerful templating engine that is included with Laravel.
In the previous we have already make a Laravel project. And looks like this
By default Laravel views are located in folder laravel_app_name/resources/views
In the picture above, there is 1 file is named welcome.blade.php, to use blade, file must have extension .blade.php. If we change the html and then save it
<title>Laravel</title> // From this
<title>My App</title> // to thisit will change the view on our Laravel project.
Let’s create or blade views, in this case I create a new blade views named home.blade.php. You can name it whatever you want as long as the file has the extension .blade.php. Then let say we write “Hello World!” in our blade views.
Question, how we can access the views in Laravel app? We must create or modify our routes. Next post I will share about route in Laravel, but for now we will just only use route for show our blade views. You can open web.php in laravel_app_name/routes/ and modify the route like this :
Route::get('/', function () {
return view('welcome'); // From this
return view('home'); // to this, 'home' is your blade views name
});After save the modification refresh the running Laravel app in the browser, and it will show your blade views.
Let’s make it look more attractive use css. If we want use any css or js file in Laravel we need to put in public directory.
Let say we create a new folder named css and we create a style.css.
And in style.css we write some style.
body {
margin: 0;
}.nav {
overflow: hidden;
background-color: #333;
}.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}.nav a:hover {
background-color: rgb(1, 217, 255);
color: black;
}.nav a.active {
background-color: #0099ff;
color: white;
}
and in home.blade.php we write something like this :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Call the style css from public folder -->
<link rel="stylesheet" href="{{ asset(‘css/style.css’) }}"><title>Home</title>
</head>
<body>
<body>
<div class="nav">
<a href="#Home" class="active">Home</a>
<a href="#Blog">Blog</a>
<a href="#About">About</a>
</div>
<h2>This is Home</h2>
</body>
</html>
We can call file (css, js, image, etc.) from public folder using {{ asset(‘path_to_file’) }}. Here is the result :
Lets create the blog and about page. I will create blog.blade.php and about.blade.php in resources/views. Then modify the routes again.
Route::get('/', function () {
return view('home');
});// Insert code below
Route::get('/blog', function () {
return view('blog');
});Route::get('/about', function () {
return view('about');
});
How we can access blog or about? just open laravelapp.test/blog or laravelapp.test/about. In our routes we write this
Route::get('/blog', function....It means we add new url named laravel.test/blog. Let’s make the navbar work. In blade, we can open an url with something like {{ url(‘/blog’) }}. Then in our home.blade.php will be like this :
<div class="nav">
<a href="{{ url('/') }}" class="active">Home</a>
<a href="{{ url('/blog') }}">Blog</a>
<a href="{{ url('/about') }}">About</a>
</div>Now the navbar is working, but we must change the other nav in other blade views. Of course it is very inconvenient if you have a lot of views, so we can create a new blade file named let say navbar.blade.php and we will move our nav html into navbar.blade.php.
Then replace all nav html on all blade with code like this:
// Remove
<div class="nav">
<a href="{{ url('/') }}" class="active">Home</a>
<a href="{{ url('/blog') }}">Blog</a>
<a href="{{ url('/about') }}">About</a>
</div>
// Add
@include('navbar')
Since each blade view has the same html structure, we will create a base blade view named layout.blade.php. The code of layout.blade php will be like this :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Call the style css from public folder -->
<link rel="stylesheet" href="{{ asset(‘css/style.css’) }}"><title>Home</title>
</head>
<body>
@include('navbar')
<h2>This is Home</h2>
</body>
</html>
Each blade view has different <tittle> and <h2>, so we will use yield and section.
<title>@yield('title')</title>
<h2>@yield('content')</h2>
// title and content are name of the section, you can named it whatever you wantThen clear all code in home, blog and about view, and write this code below :
@extends('layout')
@section('title', 'Home')
@section('content')
<h2>This is Home</h2>
@endsection
Let’s make post view, create post.blade.php and write code below :
@extends('layout')
@section('title', 'Post')
@section('content')
<h2>This is Post</h2>
@endsectionOpen the navbar.blade.php file and add new item on navbar :
<div class="nav">
<a href="{{ url('/') }}" class="active">Home</a>
<a href="{{ url('/blog') }}">Blog</a>
<a href="{{ url('/about') }}">About</a>
<a href="{{ url('/post') }}">Post</a>
</div>Add new routes
Route::get('/post', function () {
return view('post');
});And now we have a new page named post.
Thanks for read my post, hope you enjoyed. If you have any questions or want to discuss please feel free to leave a comment. In the next I will share about route in Laravel. See ya
References
Blade Templates — Laravel — The PHP Framework For Web Artisans
