Pada artikel tutorial laravel sebelumnya kita sudah membuat middleware, kali ini kita akan sedikit sersan (Serius tapi Santai) membuat WYSIWYG dengan summernote di form post yg pernah di buat pada tutorial sebelumnya
Tutorial Sebelumnya - Boilerplate Laravel 11 : Membuat Middleware Untuk Hak Akses.
Tutorial Sebelumnya - Boilerplate Laravel 3 : Membuat CRUD Post.
Menurut wiki WYSIWYG adalah singkatan dari What You See Is What You Get artinya Apa Yang Anda Lihat Adalah Apa Yang Anda Dapatkan, Istilah ini digunakan dalam perkomputasian untuk menggambarkan suatu sistem di mana konten yang sedang disunting akan terlihat sama persis dengan hasil keluaran akhir.
Kesimpulannya fitur ini mempermudah untuk menulis konten, berita, informasi dll seperti kita membuat artikel di blogger dan wordpress.
Kita mulai! yg pertama buka file app.blade.php di dalam folder resources/views/layouts/ dan tambahkan code dibawah
@yield('style')
@yield('script')
lihat script lengkapnya
app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@yield('style')
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('user.profile') }}">Profile</a>
</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
@if(Auth::check())
<div class="col-lg-4">
<ul class="list-group">
<li class="list-group-item">
<a href="{{ route('categories') }}">Category</a>
</li>
<li class="list-group-item">
<a href="{{ route('posts') }}">Post</a>
</li>
<li class="list-group-item">
<a href="{{ route('tags') }}">Tag</a>
</li>
@if(Auth::user()->admin)
<li class="list-group-item">
<a href="{{ route('users') }}">User</a>
</li>
@endif
</ul>
</div>
@endif
<div class="col-lg-8">
@yield('content')
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
@if(Session::has('success'))
toastr.success("{{ Session::get('success') }}");
@endif
@if(Session::has('info'))
toastr.info("{{ Session::get('info') }}");
@endif
</script>
@yield('script')
</body>
</html>
Setelah selesai kita lanjut edit file create.blade.php didalam folder resources/views.admin/posts/ dan tambahkan script di bawah ini
@section('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@stop
@section('script')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
$(document).ready(function() {
$('#content').summernote();
});
</script>
@stop
lihat script lengkapnya
create.blade.php
@extends('layouts.app')
@section('content')
@include('admin.includes.errors ')
<div class="panel panel-default">
<div class="panel-heading">
Creat a new post
</div>
<div class="panel-body">
<form action="{{ route('post.store') }}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label for="featured">Featured Image</label>
<input type="file" class="form-control" name="featured">
</div>
<div class="form-group">
<label for="category">Category</label>
<select name="id_category" id="" class="form-control">
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="tags">Select Tags</label>
@foreach($tags as $tag)
<div class="checkbox">
<label for="tag">
<input type="checkbox" name='tags[]' value='{{ $tag->id }}'>{{ $tag->tag }}
</label>
</div>
@endforeach
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea class="form-control" name="content" id="content" cols="5" rows="5"></textarea>
</div>
<div class="form-group">
<div class="text-center">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
</div>
@stop
@section('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@stop
@section('script')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
$(document).ready(function() {
$('#content').summernote();
});
</script>
@stop
Pada tahap ini kita berhasil membuat WYSIWYG summernote di laravel, silahkan coba jalankan dan buka form post maka akan ada tampilan seperti dibawah
