A Beginner's Guide to Organizing Blade Templates in Laravel
Learn how to organize your Laravel views for a cleaner and simpler codebase
Laravel is a PHP-based web framework which follows the Model-View-Controller (MVC) architecture.
A core part of the MVC trilogy is View. All of the UI markup which a user sees and interacts with on the web browser goes into the views folder, which automatically gets created when a Laravel project is initialized.
The view can be built using blade templates. Blade is a templating language which Laravel uses by default to create the HTML layout of the website.
There are certain best practises to adhere to when building the markup for your full-stack website in Laravel. These are especially important to follow if you are building a site which comprises of many pages and UI functionalities.
In this article, we are going to take a look at the several ways which we can structure our templates so that they are more clean, lean and readable.
Before we start: Affiliate marketing is currently one of the easiest ways to make money online. To get started, check out the 72IG WhatsApp income generator training which teaches you how to make money doing Affiliate Marketing. Check out the course here.
Organize your views in folders
A recommended approach is organizing views into folders. Using folders leads to a cleaner codebase, especially for big websites. For example, suppose you have a website with 5 main pages like:
/home/faqs/about/blog/contact
Some of these pages might have other subpages.
For example, the Blog page may have other subpages to create, delete and update a blog post.
The create page will consist a form for submitting a blog post. The delete page might contain a single post with a confirmation question of whether you want to delete that post. The update view might return a form with the body of a post already passed in.
This means that the blog page will be composed of the following views:
index.blade.php
To show list of blog posts
create.blade.php
A form to create and post a new blog post
edit.blade.php
A form to edit and update a existing blog post
single.blade.php
A page showing a single blog post
A very clean way to organise this is to create separate folders for each page. Then store the views in their respective folders , like so:
└── views
└── about // About views
├── index.blade.php // homepage for /about
└── faqs // FAQ views
├── index.blade.php // homepage for /faqs
└── blog // Blog views
├── index.blade.php
├── create.blade.php
├── edit.blade.php
├── single.blade.php
Then from the controllers, you can return each of these views in a consistent manner:
app/Http/Controllers/FaqController.php: ```php class FaqController extends Controller {
public function index() { return view('faq.index'); }
}
`app/Http/Controllers/AboutController.php`:
```php
class AboutController extends Controller
{
public function index()
{
return view('about.index');
}
}
app/Http/Controllers/BlogController.php: ```php
Navigation
Sidebar
@yield('heading')
@yield('content')
Footer
This is a content for the about page
This is a content for the FAQ page
@yield('heading')
@yield('content')
Footer
This is a content for the Login page. This extends the auth layout
Navigation
Sidebar
Footer
@include('layouts.partials.navbar') @include('layouts.partials.sidebar')