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
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 ....
Không có nhận xét nào:
Đăng nhận xét