Integrasi Ckeditor dengan Laravel File Manager di Laravel 8

Admin・ 24 Maret 2021

23 min read ・ 8220 views

CKEditor di Laravel 8 - Setelah di artikel sebelumnya kita sudah membahas bagaimana cara integrasi TinyMCE 5 dengan laravel file manager di laravel 8, maka pada kesempatan kali ini Saya akan membagikan artikel dengan topik yang tidak beda jauh yaitu bagaimana cara integrasi CKEditor di laravel 8, lengkap dengan panduan integrasi Laravel File Manager. Sebelum masuk ke langkah-langkah integrasi CKEditor di laravel 8, kita akan berkenalan terlebih dahulu dengan Ckeditor.

Apa itu Ckeditor ?
Download CKEditor
Integrasi CKEditor di Laravel
Kesimpulan

Apa itu Ckeditor ?

Ckeditor adalah text editor seperti WYSIWYG yang memungkinkan penulisan konten langsung di dalam halaman web atau aplikasi. Kode inti dari Ckeditor dibuat atau ditulis dalam Javascript dan dikembangkan oleh CKSource. CKeditor tersedia dalam versi open source dan premium.

Saat artikel ini ditulis, Ckeditor tersedia dalam dua versi yaitu Ckeditor 4 dan CKEditor 5, dan pada artikel ini kita akan bahas Cara integrasi CKEditor 4 di laravel 8.

Download CKEditor

integrasi ckeditor dengan laravel file manager di laravel

Sebelum menggunakan atau integrasi CKEditor di laravel 8, kita harus download CKEditor terlebih dahulu. Ckeditor menyediakan opsi untuk download ckeditor yaitu bisa langsung download dengan command line, zip package, CDN atau bisa menggunakan online builder. Online builder yaitu sebuah fitur dimana kita bisa memilih fitur apa saja yang nantinya akan kita gunakan dalam suatu project dengan ckeditor. Namun pada artikel ini nanti, kita akan menggunakan opsi CDN.

Integrasi CKEditor di Laravel

Setelah berkenal dengan CKEditor, sekarang waktunya kita mencoba bagaimana cara memasang atau integrasi CKEditor di laravel 8, yang nantinya kita juga belajar bagaimana cara integrasi CKEditor dengan laravel file manager di laravel 8.

Install Laravel

composer create-project laravel/laravel larackeditor

Langkah pertama yang harus kita lakukan tentu saja install laravel. Disini saya melakukan install laravel versi terbaru (saat ini versi 8) via composer. Buka terminal, masuk ke direktori dimana project laravel akan diinstall lalu jalankan command seperti di atas. Dengan command tersebut, kita akan menginstall laravel versi terbaru (saat ini versi 8) dengan nama larackeditor.

Install Laravel ui

Pada percobaan ini nanti kita akan membuat case study seperti pada artikel integrasi CKEditor di laravel 8 yaitu dengan skenario memasang ckeditor pada halaman create Post. Untuk dapat masuk ke halaman create post, kita harus terlebih dahulu login. Nah, untuk membuat fitur login atau authentication di laravel, kita akan menginstall package laravel ui.

composer require laravel/ui

php artisan ui bootstrap --auth

npm install && npm run dev

Untuk membuat fitur login atau authentication dengan laravel ui, pertama kita harus masuk ke direktori laravel yang baru diinstall dengan cd larackeditor dan kemudian jalankan command di atas secara berurutan. *Jika terdapat error atau gagal saat menjalankan command npm install && npm run dev, coba ulangi lagi perintah tersebut atau bisa dicoba dengan npm install terlebih dahulu, kemudian jalankan npm run dev.

Jangan lupa untuk membuat database baru untuk project percobaan integrasi CKEditor di laravel 8 ini dan menyesuaikan DB_DATABASE di file .env sesuai dengan nama database yang baru dibuat. Disini saya akan membuat database baru dengan nama larackeditor.

php artisan migrate

Kemudian kalau database sudah dibuat dan file .env sudah disesuaikan, lanjutkan dengan menjalankan migrate dengan command seperti di atas.

Home page laravel ui

Jika proses install laravel ui sudah selesai, silahkan jalankan project kemudian coba register, maka nanti akan didirect ke halaman home seperti pada gambar di atas. Nah, halaman ini nanti akan kita ubah menjadi tampilan tabel berisikan data post yang telah dibuat.

Buat Models & Migration

php artisan make:model Post -m

Langkah berikutnya adalah dengan membuat model dan file migration untuk membuat tabel post yang nantinya digunakan untuk menampung data post yang dibuat menggunakan text editor CKEditor yang diintegrasikan dengan laravel versi 8.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('slug');
            $table->longText('desc');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Berikutnya buka file post migration yang ada di folder databases. biasanya format nama file seperti [timestamp]_create_post_table.php. Setelah itu sesuaikan kode pada file tersebut dengan kode seperti di atas. Pada tabel post, kita akan membuat tiga field saja yaitu title, slug dan desc. Nah, pada field desc ini nantinya berisi data yang kita inputkan dengan text editor CKEditor yang diintegrasikan dengan laravel versi 8. Save, dan jalankan php artisan migrate lagi.

Edit home.blade.php

Seperti yang sudah disinggung sebelumnya, kita akan mengubah tampilan halaman home menjadi tabel post yang berisi data post dinamis yang telah dibuat pada halaman create. Di halaman create nanti kita akan integrasikan dengan CKEditor. Buka file di resources/views/home.blade.php, kemudian ubah semua kodenya menjadi seperti di bawah ini.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <a href="{{ route('create') }}" class="btn btn-success btn-sm mb-2">Create Post</a>
            <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
        </div>
    </div>
</div>
@endsection

Dengan kode di atas, kita membuat tabel dan menambahkan tombol create yang mengarah ke route create. Karena route create belum dibuat di file route/web.php, jadi kita perlu membuatnya terlebih dahulu. Tambahkan kode route di bawah ini pada file web.php di bawah record route home.

Route::get('/create', [App\Http\Controllers\HomeController::class, 'create'])->name('create');

halaman home ckedtor 5 di laravel 8

Ok, sekarang silahkan coba buka halaman home. Maka tampilannya akan seperti gambar di atas. Data di tabel post seperti gambar di atas masih statis, oleh karena itu kita perlu menambahkan function baru di HomeController.php yaitu function create yang nantinya mengarahkan kita ke view create yang nantinya juga akan dibuat.

Edit HomeController.php

public function create()
    {
        return view('create');
    }

Di route web.php kita sudah mendefinisikan route create yang mengarah ke HomeController di function create, namun kita belum punya function create di HomeController. Oleh karena itu kita perlu menambahkan function create di HomeController dengan kode seperti gambar di atas. Buka HomeController.php dan tambahkan kode di atas pada HomeController.php tepatnya di bawah function home.

Buat File create.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form>
                <div class="mb-3">
                  <label for="title" class="form-label">Title</label>
                  <input type="text" class="form-control" id="title">
                </div>
                <div class="mb-3">
                  <label for="desc" class="form-label">Desc</label>
                  <textarea name="desc" class="my-editor form-control" id="my-editor" cols="30" rows="10"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
        </div>
    </div>
</div> 
@endsection

@push('scripts')
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('my-editor');
    </script>
@endpush

Buat file view baru dengan nama create.blade.php sejajar dengan home.blade.php, kemudian inputkan kode seperti di atas. Pada kode di atas, kita membuat 2 form yaitu title dan desc (slug tidak dibuatkan form karena data slug akan mengikuti data title). Jika kita perhatikan pada kode di atas, kita push CDN CKEditor dan init CKeditor.

@stack('scripts')

Kemudian pada kode create.blade.php kita membuat section push(scripts), oleh karena itu silahkan buka file di layouts/app.blade.php kemudian tambahkan kode @stack('scripts') di atas tag </body>.

tampilan ckeditor di laravel 8

Jika sudah menambahkan @stack('scripts') di file app.blade.php, sekarang silahkan buka /create atau klik tombol create post maka akan menampilkan seperti gambar di atas. Sampai disini kita sudah berhasil memasang atau integrasikan CKEditor dengan CDN di laravel 8. Namun kita belum bisa menggunakan fitur upload image.

Selanjutnya kita akan install laravel file manager di project latihan integrasi CKEditor di laravel 8 ini. Laravel file manager berfungsi untuk manage file atau image kita nantinya. Jadi nanti, akan seperti di wordpress atau blogger, kita tidak perlu upload file yang sama untuk post yang berbeda. Jika file sudah pernah kita gunakan, kita tinggal mengambil file dari Laravel File Manager.

Install Laravel File Manager

composer require unisharp/laravel-filemanager

 php artisan vendor:publish --tag=lfm_config

 php artisan vendor:publish --tag=lfm_public

 php artisan storage:link

Selanjutnya kita akan intstall package laravel file manager dari unisharp . Package Laravel File Manager ini kita gunakan di project integrasi CKEditor di Laravel 8 untuk management file atau image layaknya seperti di wordpress atau blogger. Kenapa kita memilih package dari unisharp ini ? karena unisharp menyediakan beberapa fitur andalan seperti CKeditor & TinyMCE integration, uploading validatin, Cropping & Resizing of Images dan lain-lain. Untuk mulai menggunakan package laravel file manager pada CKEditor di laravel, silahkan jalankan command di atas secara berurutan.

*Catatan:

php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public

Command di atas merupakan perintah untuk publish package config dan asset

Edit .env

Edit APP_URL di file .env dengan domain atau url project kalian. Artinya jika kita menjalankan project percobaan integrasi CKEditor di laravel 8 ini di URL 127.0.0.1:8000, kita juga harus mengubah pada APP_URL dengan 127.0.0.1:8000. Dan jika dijalankan pada URL larackeditor.test, di APP_URL harus larackeditor.test dan seterusnya.

Edit Route Web.php

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
     \UniSharp\LaravelFilemanager\Lfm::routes();
 });

Buka file web.php di dalam folder routes, kemudian tambahkan route group seperti kode di atas. Perhatikan kode di atas, kita meletakkan middleware web auth pada route group tersebut. Itu artinya jika user belum login dan user tersebut mengakses domain/laravel-filemanager, user tersebut akan di direct terlebih dahulu ke halaman login.

Edit Create.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form>
                <div class="mb-3">
                  <label for="title" class="form-label">Title</label>
                  <input type="text" class="form-control" id="title">
                </div>
                <div class="mb-3">
                  <label for="desc" class="form-label">Desc</label>
                  <textarea name="desc" class="my-editor form-control" id="my-editor" cols="30" rows="10"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
        </div>
    </div>
</div> 
@endsection

@push('scripts')
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<script>
  var options = {
    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='
  };
</script>
<script>
    CKEDITOR.replace('my-editor', options);
    </script>
@endpush

Kemudian buka lagi file create.blade.php dan ganti semua kode dengan kode seperti di atas (Disini kita menyesuaikan pada bagian script). Jika sudah, save dan coba buka halaman create atau tepatnya silahkan coba fitur upload atau insert image.

upload image di ckeditor dengan laravel file manager

Well done, kita sudah berhasil memasang atau integrasi CKEditor dengan upload image menggunakan laravel file manager di project integrasi CKEditor di laravel 8. Selanjutnya kita akan menyimpan data yang telah diinputkan pada halaman create ke database.

Menyimpan data Post ke database

Setelah belajar bagaimana cara memasang CKEditor di laravel 8, cara install dan integrasi laravel file manager di CKEditor, selanjutnya kita akan melanjutkan ke menyimpan data create post ke database.

<form action="{{ route('store') }}" method="POST">
                @csrf
                <div class="mb-3">
                  <label for="title" class="form-label">Title</label>
                  <input type="text" name="title" class="form-control" id="title">
                </div>
                <div class="mb-3">
                  <label for="desc" class="form-label">Desc</label>
                  <textarea name="desc" class="my-editor form-control" id="my-editor" cols="30" rows="10"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>

Buka file create.blade.php, kemudian ubah pada bagian form menjadi seperti pada contoh kode di atas. Disini kita akan mengarahkan form ke route store (route store akan kita buat pada langkah di bawah ini).

Route::post('/create', [App\Http\Controllers\HomeController::class, 'store'])->name('store');

Buka file route web.php lagi dan tambahkan kode di atas. Pada route store, kita akan memanggil function store pada file HomeController.php, function tersebut akan kita buat pada langkah di bawah ini.

public function store(Request $request)
    {
        $data           = new \App\Models\Post;
        $data->title    = $request->title;
        $data->slug     = \Str::slug(request('title'));
        $data->desc     = $request->desc;
        $data->save();

        return redirect('home');
    }

Buka file HomeController.php dan tambahkan function store dengan kode di atas. Kode di atas merupakan contoh kode sederhana untuk menjalankan perintah input data ke table post dari request yang telah diinputkan pada form yang tersedia di halaman create. Sekarang save, dan coba masuk ke halaman create kemudian memasukkan teks atau konten di form title dan desc lalu klik submit. Maka kita akan diarahkan ke halaman home dan jika dicek di table Post (database) data yang telah kita submit sudah masuk namun data yang ditampilkan pada halaman home masih data statis. Kita akan lakukan perubahan sedikit pada file home.blade.php dan HomeController.php agar data yang ditampilkan pada halaman home bisa mengambil dari database.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <a href="{{ route('create') }}" class="btn btn-success btn-sm mb-2">Create Post</a>
            <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Title</th>
                    <th scope="col">Slug</th>
                    <th scope="col">Desc</th>
                  </tr>
                </thead>
                <tbody>
                    @php
                        $no = 0;
                    @endphp
                  @foreach ($data as $data)
                  <tr>
                    <th scope="row">{{ ++$no }}</th>
                    <td>{{ $data->title }}</td>
                    <td>{{ $data->slug }}</td>
                    <td>{!! Str::limit( strip_tags( $data->desc ), 50 ) !!}</td>
                  </tr>
                  @endforeach

                </tbody>
              </table>
        </div>
    </div>
</div>
@endsection

Buka file home.blade.php, kemudian ubah semua kodenya menjadi seperti kode di atas.

public function index()
    {
        $data = \App\Models\Post::all();
        return view('home',['data' => $data]);
    }

Kemudian buka file HomeController.php, pada function index ubah menjadi seperti kode di atas. Dimana jika kita lihat kode di atas, kita mengambil data dari Model Post.

tampilan baru halaman home laravel

Jika file home.blade.php dan HomeController.php sudah disesuaikan, sekarang save perubahan dan coba lihat pada halaman home maka tampilannya akan berubah menjadi dinamis mengambil data dari database seperti pada gambar di atas.

Kemudian kita juga ingin melihat seperti apa tampilan dari post yang telah kita buat sebelumnya. Untuk itu kita perlu mengubah data pada welcome.blade.php dan menambahkan file view baru untuk melihat detail dari post tersebut.

Menampilkan Post

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>CKEditor Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="container">
            <div class="row">
                <div class="relative flex items-top justify-center min-h-screen sm:items-center py-4 sm:pt-0">
                    @if (Route::has('login'))
                        <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
                            @auth
                                <a href="{{ url('/home') }}" class="text-sm text-gray-700 underline">Home</a>
                            @else
                                <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Log in</a>
        
                                @if (Route::has('register'))
                                    <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
                                @endif
                            @endauth
                        </div>
                    @endif
        
                   @foreach ($post as $post)
                   <div class="col-md-4 m-2">
                    <div class="card">
                        <div class="card-body">
                          <h5 class="card-title">{{ $post->title }}</h5>
                          <p class="card-text">{!!  Str::limit( strip_tags( $post->desc ), 50 ) !!}</p>
                          <a href="{{ route('detail',$post->slug) }}" class="btn btn-primary">Detail</a>
                        </div>
                      </div>
                   </div>
                   @endforeach
        
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    </body>
</html>

Untuk dapat menampilkan data post, pertama kita akan mengubah kode pada file welcome.blade.php. Buka file welcome.blade.php dan kemudian ganti semua kode dengan kode di atas. Disini kita akan menampilkan data post pada welcome.blade.php dengan card style dan dengan menambahkan bootstrap.

Route::get('/', function () {
    $post = \App\Models\Post::all();
    return view('welcome',['post' => $post]);
});

Kemudian kita perlu mengubah sedikit pada route welcome. Buka file web.php, dan ubah menjadi seperti kode di atas.

Route::get('/post/{slug}', function($slug) {
    $post = \App\Models\Post::where('slug',$slug)->firstOrFail();
    return view('detail',['post' => $post]);
})->name('detail');

Selanjutnya kita juga perlu menambahkan route baru untuk dapat menampilkan detail dari post. Tambahkan kode pada file web.php atau tepatnya di bawah route welcome.

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="card">
                <h5 class="card-header">Detail</h5>
                <div class="card-body">
                  <h5 class="card-title">{{ $post->title }}</h5>
                  <p class="card-text">{!! $post->desc !!}</p>
                </div>
              </div>
        </div>
    </div>
@endsection

Kemudian, buat file view baru sejajar dengan home atau welcome dengan nama detail.blade.php dan masukkan kode di atas pada file detail yang baru dibuat tersebut. Setelah mengubah file web.php, welcome.blade.php dan menambahkan file detail.blade.php, mari kita lihat hasilnya.

tampilan halaman welcome yang baru

Gambar di atas merupakan tampilan welcome baru setelah kita lakukan perubahan pada file welcome.blade.php dan web.php. Bisa kita lihat, pada welcome menampilkan data yang diambil dari database yang mana data tersebut sebelumnya dibuat di halaman /create.

memasang atau integrasi CKEditor di laravel 8

Dan ketika pada halaman welcome kita klik detail salah satu dari data (card), maka tampilannya akan seperti gambar di atas.

Kesimpulan

Pada artikel ini kita telah belajar bagaimana cara menggunakan, cara memasang atau cara integrasi CKEditor dengan Laravel File Manager di laravel 8. Sebenarnya untuk memasang CKEditor di laravel 8 cukup mudah dan singkat, hanya saja pada artikel ini kita tidak hanya belajar memasang CKEditor di laravel 8 tapi juga belajar bagaimana cara integrasi Laravel File Manager di CKEditor dan belajar bagaimana implementasi CKEditor di project sederhana yang dibuat dengan laravel 8, sehingga langkah-langkah pada artikel ini terasa sangat panjang. CKEditor merupakan salah satu text editor terbaik saat ini dengan berbagai fitur gratis yang diberikan dan dengan pilihan versi 4 dan versi 5.

Sekian artikel tentang bagaimana cara integrasi CKEditor di laravel 8 kali ini, jika ada kritik, saran, masukan atau yang ingin didiskusikan, silahkan tulis pada form komentar di bawah ini.

see you.

Ref:

Laravel

Artikel Sebelumnya

Cara Integrasi TinyMCE 5 Dengan Laravel File Manag...

Artikel Selanjutnya

Navbar on Scroll, Membuat Animasi Navbar Saat Scro...

Tinggalkan Komentar

Loading Comments

Favorit See All

Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly
23 Oktober 2021 65579 views
Laravel 8: REST API Authentication dengan Sanctum
17 September 2021 31644 views
Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap
14 Oktober 2021 29582 views
Membuat REST API CRUD di Laravel 8 dengan Sanctum
18 September 2021 28216 views
Contoh Cara Menggunakan Sweet Alert di Laravel 8
27 Agustus 2021 27270 views