loading...
Cover image for Laravel Tutorial #7: Views

Laravel Tutorial #7: Views

ericnanhu profile image Eric Hu Originally published at techjblog.com ・5 min read

Introduction

This the last part of the MVC structure. In Laravel, views are stored in the resources/views directory. Notice that the view files are named xxx.blade.php. That is because Laravel uses the Blade templates, it allows us to design the views without repeated coding. Read the official documentation for details.

In this tutorial, I will be using this template for our views.

img

You can download the source code here:

laravel-blog.zipDownload

Assuming you understand how HTML, CSS and JS work. This is the view structure I designed:

img

The master.blade.php contains the <head> section, the navigator, footer and necessary js files. I also separated the blog masonry and sidebar because they appear on multiple pages.

Master

Create master.blade.php:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Laravel Blog</title>

    <!-- Bootstrap core CSS -->
    <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{asset('css/style.css')}}" rel="stylesheet">

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="/">Laravel Blog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Laravel Tutorial</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin">Admin</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Page Content -->
<div class="container">

@yield('content')

</div>
<!-- /.container -->

<!-- Footer -->
<footer class="py-5 bg-dark">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright © TechJBlog Laravel Blog 2019</p>
    </div>
    <!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="{{asset('js/jquery/jquery.min.js')}}"></script>
<script src="{{asset('js/bootstrap.bundle.min.js')}}"></script>

</body>

</html>

Line 49, @yield('content'), this is the place where “content” will be loaded.

Line 14, {{asset('css/bootstrap.min.css')}} generates the URL /public/css/bootstrap.min.css.

Blog Masonry

Create widgets/blog-masonry.blade.php:

@foreach($posts as $post)
    <!-- Blog Post -->
    <div class="card mb-4">
        <img class="card-img-top" src="/storage/{{$post->featured_image}}" alt="Card image cap">
        <div class="card-body">
            <h2 class="card-title">{{$post->title}}</h2>
            <p class="card-text">{{ \Illuminate\Support\Str::limit(strip_tags($post->content), 200, '...') }}</p>
            <a href="/post/{{$post->slug}}" class="btn btn-primary">Read More →</a>
        </div>
        <div class="card-footer text-muted">
            Posted on {{$post->created_at->format('M d Y')}} by
            <a href="#">{{$post->user->name}}</a>
        </div>
    </div>
@endforeach

As the code suggests, this is a for loop. This part of the code will repeat until all “$posts” transferred from the controller are shown.

Line 4, {{$post->featured_image}} gives the path to the featured image of the corresponding post.

Line 6, {{$post->title}} gives the title.

Line 7, strip_tags() will eliminate the HTML tags, \Illuminate\Support\Str::limit() can limit the number of characters that are shown, in this case, limit the string to 200 char and end with “...

Line 11, format('M d Y') changes the format of the date.

Line 12, $post->user->name get the name of the user who created this post.

Sidebar

widgets/sidebar.blade.php
<!-- Sidebar Widgets Column -->
<div class="col-md-4">

    <!-- Search Widget -->
    <div class="card my-4">
        <h5 class="card-header">Search</h5>
        <div class="card-body">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
              </span>
            </div>
        </div>
    </div>

    <!-- Categories Widget -->
    <div class="card my-4">
        <h5 class="card-header">Categories</h5>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-unstyled mb-0">
                        @foreach($categories as $category)
                        <li>
                            <a href="/category/{{$category->slug}}">{{$category->name}}</a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Tags Widget -->
    <div class="card my-4">
        <h5 class="card-header">Tags</h5>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-unstyled mb-0">
                        @foreach($tags as $tag)
                            <li>
                                <a href="/tag/{{$tag->slug}}">{{$tag->name}}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Posts Widget -->
    <div class="card my-4">
        <h5 class="card-header">Recent Posts</h5>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="list-unstyled mb-0">
                        @foreach($recent_posts as $post)
                            <li>
                                <a href="/post/{{$post->slug}}">{{$post->title}}</a>
                            </li>
                            <hr>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Side Widget -->
    <div class="card my-4">
        <h5 class="card-header">Others</h5>
        <div class="card-body">
            You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
        </div>
    </div>

</div>

Home

home.blade.php
@extends('master')

@section('content')
    <div class="row">
    <!-- Blog Entries Column -->
    <div class="col-md-8">

    <h1 class="my-4">Laravel Blog
        <small>Home Page</small>
    </h1>

        @include('widgets.blog-masonry')

    </div>
        @include('widgets.sidebar')
    </div>


@endsection

Line 1, specifies that home.blade.php extends to master.blade.php

Line 12, include the widgets/blog-masonry.blade.php we just created.

Line 15, include the sidebar.

Category

@extends('master')

@section('content')
    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-8">

            <h1 class="my-4">Category:
                <small>{{$category->name}}</small>
            </h1>

            @include('widgets.blog-masonry')

        </div>
        @include('widgets.sidebar')
    </div>


@endsection

Tag

@extends('master')

@section('content')
    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-8">

            <h1 class="my-4">Tag:
                <small>{{$tag->name}}</small>
            </h1>

            @include('widgets.blog-masonry')

        </div>
        @include('widgets.sidebar')
    </div>


@endsection

Post

@extends('master')

@section('content')
    <div class="row">

        <!-- Post Content Column -->
        <div class="col-lg-8">

            <!-- Title -->
            <h1 class="mt-4">{{$post->title}}</h1>

            <!-- Author -->
            <p class="lead">
                by
                <a href="#">{{$post->user->name}}</a>
            </p>

            <hr>

            <!-- Date/Time -->
            <p>Posted on {{$post->created_at->format('M d, Y')}}</p>

            <hr>

            <!-- Preview Image -->
            <img class="img-fluid rounded" src="/storage/{{$post->featured_image}}" alt="">

            <hr>

            <!-- Post Content -->
            {!! $post->content !!}
            <hr>

            <!-- Comments -->


        </div>


        @include('widgets.sidebar')

    </div>
@endsection

Line 31, {!! $post->content !!} get the content for the post. {!! !!} must be used or the HTML tags will not work.

By default, Blade {{ }} statements are automatically sent through PHP’s htmlspecialchars function to prevent XSS attacks.

Next Post: Laravel Tutorial #8: Deploy

Related Articles

How to Make Your Server More Secure

Laravel Tutorial For Beginners

Django Tutorial For Beginners

Posted on by:

Discussion

pic
Editor guide