#Part10 laravel 5 Blog Tutorial : Adding Bootsrtap Theme in Laravel 5.3

How to make a blog using Laravel 5.3? create simple CRUD operation in laravel 5.3 part10. Add bootstrap theme into laravel 5 project for beginners

Create blog using Laravel 5.3 - This lesson bout how to add Bootstrap theme into Laravel project, at the privews lessons, we have learn about Bootstrap theme in Laravel 5.3, please read Adding Bootstrap Theme to Laravel 5.3.

What we needed?

Download Bootstrap file - to download bootstrap theme going here http://getbootstrap.com/
next, we will add Bootstrap theme into our project, stored on \public folder
create new page for master template (master.blade.php)
create bootstrap theme for all pages

After you hasbeen downloaded the Bootstrap files, please extract it into our project >> in the "public folder".

Next, we will create an master page, that using bootstrap theme, create new page stored on \resources\views and rename it with "master.blade.php"

master.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>My First Blog</title>
    <!-- Bootstrap core CSS -->
    <link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{{ asset('/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{{ asset('/css/blog.css') }}" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{{ asset('/js/ie-emulation-modes-warning.js') }}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="/blog">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">My First Blog</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      </div>
      <div class="row">
        <div class="col-sm-8 blog-main">
          <div class="blog-post">
            @yield('content')
          </div><!-- /.blog-post -->
        </div><!-- /.blog-main -->
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About Us</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
          </div>
          <div class="sidebar-module">
            @yield('sidebar2')
          </div>
        </div><!-- /.blog-sidebar -->
      </div><!-- /.row -->
    </div><!-- /.container -->
    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
    <script src="{{ asset('/js/bootstrap.min.js') }}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{ asset('/js/ie10-viewport-bug-workaround.js') }}"></script>
  </body>
</html>

After done, your bootsrap master has created, next we will change all pages to make Bootstrap theme.

index.blade.php

@extends('master')
{{ Session::get('message') }}
@section('content')
<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  {{ date('F d, Y', strtotime($blog->created_at)) }}
  <p>{{ $blog->description }}</p>
  <a href="/blog/{{ $blog->id }}/edit">Edit this Post</a><br>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="delete">
  </form>
  <hr>
@endforeach
{!! $blogs->links() !!}
@stop
@section('sidebar2')
  <h4>Archives</h4>
  @foreach ($blogs as $blog)
    <ol class="list-unstyled">
      <li><a href="/blog/{{ $blog->id }}">{{ $blog->description }}</a></li>
    </ol>
  @endforeach
@stop

edit.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->
@extends('master')
@section('content')
  <h2>Edit Article Post</h2>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="text" name="title" value="{{ $blog->title }}" placeholder="this is title"><br>
    {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>

    <textarea name="description" rows="8" cols="40" placeholder="this is description">{{ $blog->description }}</textarea><br>
    {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>

    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="edit">
  </form>
@stop
// or you can add some links in your sidebar

next, on the single page

detail.blade.php

@extends('master')
@section('content')
  <h2>{{ $blog->title }}</h2>
  <p>
    {{ $blog->description }}
  </p>
@stop

Create.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->
@extends('master')
@section('content')
  <h2>Add new post</h2>
  <form class="" action="/blog" method="post">
    <input type="text" name="title" value="" placeholder="this is title"><br>
    {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>
    <textarea name="description" rows="8" cols="40" placeholder="this is description"></textarea><br>
    {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="post">
  </form>
@stop

Video Tutorial Adding Bootsrtap Theme in Laravel 5.3

See you next lessons ....

KODE AJAIB