Simple blog application in laravel 5 Part-4: Build Front end

All parts of this series:

Simple blog application in laravel 5 - Introduction

Simple blog application in laravel 5 (part-1): Setup database

Simple blog application in laravel 5 (part-2): Routes and Models

Simple blog application in laravel 5 (part-3): Controllers

Simple blog application in laravel 5 (part-4): Build Front end

Simple blog application in laravel 5 (part-5): Add tinyMCE and User profile

In this part we will make all view files for sending response from controllers defined in last part. For more information about views read Views in Laravel 5.

Customize app.blade.php

Change the resources/views/app.blade.php as follow:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Blog Demo | Find All Together</title>
  8. <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
  9. <!-- Fonts -->
  10. <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
  11. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  15. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. </head>
  18. <body>
  19. <nav class="navbar navbar-default">
  20. <div class="container-fluid">
  21. <div class="navbar-header">
  22. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  23. <span class="sr-only">Toggle Navigation</span>
  24. <span class="icon-bar"></span>
  25. <span class="icon-bar"></span>
  26. <span class="icon-bar"></span>
  27. </button>
  28. <a class="navbar-brand" href="http://www.findalltogether.com">Find All Together</a>
  29. </div>
  30. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  31. <ul class="nav navbar-nav">
  32. <li>
  33. <a href="{{ url('/') }}">Home</a>
  34. </li>
  35. </ul>
  36. <ul class="nav navbar-nav navbar-right">
  37. @if (Auth::guest())
  38. <li>
  39. <a href="{{ url('/auth/login') }}">Login</a>
  40. </li>
  41. <li>
  42. <a href="{{ url('/auth/register') }}">Register</a>
  43. </li>
  44. @else
  45. <li class="dropdown">
  46. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
  47. <ul class="dropdown-menu" role="menu">
  48. @if (Auth::user()->can_post())
  49. <li>
  50. <a href="{{ url('/new-post') }}">Add new post</a>
  51. </li>
  52. <li>
  53. <a href="{{ url('/user/'.Auth::id().'/posts') }}">My Posts</a>
  54. </li>
  55. @endif
  56. <li>
  57. <a href="{{ url('/user/'.Auth::id()) }}">My Profile</a>
  58. </li>
  59. <li>
  60. <a href="{{ url('/auth/logout') }}">Logout</a>
  61. </li>
  62. </ul>
  63. </li>
  64. @endif
  65. </ul>
  66. </div>
  67. </div>
  68. </nav>
  69. <div class="container">
  70. @if (Session::has('message'))
  71. <div class="flash alert-info">
  72. <p class="panel-body">
  73. {{ Session::get('message') }}
  74. </p>
  75. </div>
  76. @endif
  77. @if ($errors->any())
  78. <div class='flash alert-danger'>
  79. <ul class="panel-body">
  80. @foreach ( $errors->all() as $error )
  81. <li>
  82. {{ $error }}
  83. </li>
  84. @endforeach
  85. </ul>
  86. </div>
  87. @endif
  88. <div class="row">
  89. <div class="col-md-10 col-md-offset-1">
  90. <div class="panel panel-default">
  91. <div class="panel-heading">
  92. <h2>@yield('title')</h2>
  93. @yield('title-meta')
  94. </div>
  95. <div class="panel-body">
  96. @yield('content')
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="row">
  102. <div class="col-md-10 col-md-offset-1">
  103. <p>Copyright © 2015 | <a href="http://www.findalltogether.com">Find All Together</a></p>
  104. </div>
  105. </div>
  106. </div>
  107. <!-- Scripts -->
  108. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  109. <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
  110. </body>
  111. </html>

Here we are adding links to the top menu. This file is the base file for all other view files. This file is using blade template system. For more information read Blade Templare in laravel 5.

Make home view

Home view is the view file (home.blade.php) which displays the list of posts with short description, meta tags and pagination (5 posts per page). This file extends app.blade.php. Change the code of home.blade.php as:

  1. @extends('app')
  2. @section('title')
  3. {{$title}}
  4. @endsection
  5. @section('content')
  6. @if ( !$posts->count() )
  7. There is no post till now. Login and write a new post now!!!
  8. @else
  9. <div class="">
  10. @foreach( $posts as $post )
  11. <div class="list-group">
  12. <div class="list-group-item">
  13. <h3><a href="{{ url('/'.$post->slug) }}">{{ $post->title }}</a>
  14. @if(!Auth::guest() && ($post->author_id == Auth::user()->id || Auth::user()->is_admin()))
  15. @if($post->active == '1')
  16. <button class="btn" style="float: right"><a href="{{ url('edit/'.$post->slug)}}">Edit Post</a></button>
  17. @else
  18. <button class="btn" style="float: right"><a href="{{ url('edit/'.$post->slug)}}">Edit Draft</a></button>
  19. @endif
  20. @endif
  21. </h3>
  22. <p>{{ $post->created_at->format('M d,Y \a\t h:i a') }} By <a href="{{ url('/user/'.$post->author_id)}}">{{ $post->author->name }}</a></p>
  23. </div>
  24. <div class="list-group-item">
  25. <article>
  26. {!! str_limit($post->body, $limit = 1500, $end = '....... <a href='.url("/".$post->slug).'>Read More</a>') !!}
  27. </article>
  28. </div>
  29. </div>
  30. @endforeach
  31. {!! $posts->render() !!}
  32. </div>
  33. @endif
  34. @endsection
Home Page of blogging website
Home Page

Create post:

Now make a new folder named posts inside views folder and make a file named create.blade.php inside that folder. This file is rendered by create() function inside PostController class. This file contains a form for creating new post. The code this file is:

  1. @extends('app')
  2. @section('title')
  3. Add New Post
  4. @endsection
  5. @section('content')
  6. <form action="/new-post" method="post">
  7. <input type="hidden" name="_token" value="{{ csrf_token() }}">
  8. <div class="form-group">
  9. <input required="required" value="{{ old('title') }}" placeholder="Enter title here" type="text" name = "title"class="form-control" />
  10. </div>
  11. <div class="form-group">
  12. <textarea name='body'class="form-control">{{ old('body') }}</textarea>
  13. </div>
  14. <input type="submit" name='publish' class="btn btn-success" value = "Publish"/>
  15. <input type="submit" name='save' class="btn btn-default" value = "Save Draft" />
  16. </form>
  17. @endsection

csrf_token() is for cross site security. The old() function returns old data when form gets error and new post can not be added in database.

NOTE: We will add rich-text editor tinymce to create post and edit post forms in next part.

Show Post:

Similarly make a new file show.blade.php in posts folder for displaying whole post with comments on that post. This view file is rendered by show() function in PostController class. The code of this file is:

  1. @extends('app')
  2. @section('title')
  3. @if($post)
  4. {{ $post->title }}
  5. @if(!Auth::guest() && ($post->author_id == Auth::user()->id || Auth::user()->is_admin()))
  6. <button class="btn" style="float: right"><a href="{{ url('edit/'.$post->slug)}}">Edit Post</a></button>
  7. @endif
  8. @else
  9. Page does not exist
  10. @endif
  11. @endsection
  12. @section('title-meta')
  13. <p>{{ $post->created_at->format('M d,Y \a\t h:i a') }} By <a href="{{ url('/user/'.$post->author_id)}}">{{ $post->author->name }}</a></p>
  14. @endsection
  15. @section('content')
  16. @if($post)
  17. <div>
  18. {!! $post->body !!}
  19. </div>
  20. <div>
  21. <h2>Leave a comment</h2>
  22. </div>
  23. @if(Auth::guest())
  24. <p>Login to Comment</p>
  25. @else
  26. <div class="panel-body">
  27. <form method="post" action="/comment/add">
  28. <input type="hidden" name="_token" value="{{ csrf_token() }}">
  29. <input type="hidden" name="on_post" value="{{ $post->id }}">
  30. <input type="hidden" name="slug" value="{{ $post->slug }}">
  31. <div class="form-group">
  32. <textarea required="required" placeholder="Enter comment here" name = "body" class="form-control"></textarea>
  33. </div>
  34. <input type="submit" name='post_comment' class="btn btn-success" value = "Post"/>
  35. </form>
  36. </div>
  37. @endif
  38. <div>
  39. @if($comments)
  40. <ul style="list-style: none; padding: 0">
  41. @foreach($comments as $comment)
  42. <li class="panel-body">
  43. <div class="list-group">
  44. <div class="list-group-item">
  45. <h3>{{ $comment->author->name }}</h3>
  46. <p>{{ $comment->created_at->format('M d,Y \a\t h:i a') }}</p>
  47. </div>
  48. <div class="list-group-item">
  49. <p>{{ $comment->body }}</p>
  50. </div>
  51. </div>
  52. </li>
  53. @endforeach
  54. </ul>
  55. @endif
  56. </div>
  57. @else
  58. 404 error
  59. @endif
  60. @endsection

$post and $comments variables are passed from show() function.

Single page of demo blogging website
Single Page of blogging post

Edit Post:

For editing post we are sending a form from edit() fuunction in PostController class. This form is stored in posts/edit.blade.php. So make a new file edit.blade.php in resources/views/posts folder and write this code in that post:

  1. @extends('app')
  2. @section('title')
  3. Edit Post
  4. @endsection
  5. @section('content')
  6. <form method="post" action='{{ url("/update") }}'>
  7. <input type="hidden" name="_token" value="{{ csrf_token() }}">
  8. <input type="hidden" name="post_id" value="{{ $post->id }}{{ old('post_id') }}">
  9. <div class="form-group">
  10. <input required="required" placeholder="Enter title here" type="text" name = "title" class="form-control" value="@if(!old('title')){{$post->title}}@endif{{ old('title') }}"/>
  11. </div>
  12. <div class="form-group">
  13. <textarea name='body'class="form-control">
  14. @if(!old('body'))
  15. {!! $post->body !!}
  16. @endif
  17. {!! old('body') !!}
  18. </textarea>
  19. </div>
  20. @if($post->active == '1')
  21. <input type="submit" name='publish' class="btn btn-success" value = "Update"/>
  22. @else
  23. <input type="submit" name='publish' class="btn btn-success" value = "Publish"/>
  24. @endif
  25. <input type="submit" name='save' class="btn btn-default" value = "Save As Draft" />
  26. <a href="{{ url('delete/'.$post->id.'?_token='.csrf_token()) }}" class="btn btn-danger">Delete</a>
  27. </form>
  28. @endsection


About Harish Kumar

Harish is an interested person in the field of web development and blogging. He works for the need of young web developers in learning various languages, latest technologies and other essential tips and tricks. If you need some help or you have some suggestion then you email him at harish@findalltogether.com without any hesitation. You can also suggest/demand for articles of your own choice.

Related Articles

Laravel is a MVC framework. Models are the real world entities in data form. Views are the response content to the vi...
Laravel framework architecture
Routes map urls with the controllers. In this section we will read about how route maps urls with controllers and how...
Basics routing and controllers in laravel 5
Views are the HTML content served by the server. These are served by returning from controllers. Views are .php or .b...
View in Laravel 5

Login or Sign up to leave comment.