~ We are changing the world with technology. ~

Matt Mullenweg

Ckeditor Image Upload di Laravel 6

Ckeditor Image Upload di Laravel 6

1262 Dilihat

Pendahuluan

Pada sebuah aplikasi berbasis content, fitur editor pada halaman web secara langsung menjadi sangat penting demi memudahkan user dalam mengelola artikel yang akan di-publish. Ada banyak ragam editor content, salah satu diantaranya yang paling populer adalah Ckeditor.

Materi kali ini akan membahas bagaimana mengintegrasikan Ckeditor di Laravel 6. Tidak hanya sebatas itu saja, kita juga akan membahas bagaimana membuat fitur upload image Ckeditor di Laravel, baik secara manual maupun dengan menggunakan library.

Baca Juga: Authentication Menggunakan Username/Email Laravel 6

Image Upload Ckeditor

Menyisipkan gambar ke dalam Ckeditor akan menjadi tujuan utama dari materi ini, dimana kita akan membuat fitur untuk upload gambar secara langsung melalui Ckeditor di Laravel, kemudian gambar tersebut akan secara otomatis bisa disisipkan ke dalam content yang ada di Ckeditor.

Install Laravel 6 terlebih dahulu dengan command

composer create-project --prefer-dist laravel/laravel dw-ckeditor

Buat database dengan nama dw-ckeditor dan modifikasi file .env untuk menyesuaikan informasi database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dw-ckeditor
DB_USERNAME=root
DB_PASSWORD=

Untuk sebuah simulasi, kita akan membuat table posts untuk menyimpan informasi postingan berupa judul dan content ke dalam database. Generate migration baru dengan command

php artisan make:model Post -m

Buka file migration tersebut dan modifikasi menjadi

<?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->bigIncrements('id');
            $table->string('title');
            $table->text('content')->nullable();
            $table->timestamps();
        });
    }

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

Note: 3 file migration bawaan bisa dihapus saja karena tidak kita butuhkan.

Saatnya kita membuat sebuah tampilan sederhana untuk menampilkan form input data postingan, dimana di dalam form ini akan menggunakan Ckeditor sebagai media editor content secara langsung melalui lama web. Generate controller baru dengan command

php artisan make:controller PostController

Buka file PostController.php dan tambahkan method

public function index()
{
    return view('welcome');
}

Kita akan memanfaatkan file welcome.blade.php untuk mengolah form input, karena fokus utama kita bukan pada tampilan atau membuat aplikasi yang kaya fitur, melainkan memahami bagaimana membuat fitur upload file pada Ckeditor di Laravel 6. Buka file resources/views/welcome.blade.php dan modifikasi menjadi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ckeditor Upload File</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2 mt-4">
                <div class="card">
                    <div class="card-body">
                        @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                        @endif

                        <form action="{{ route('post.store') }}" method="post">
                            @csrf
                            <div class="form-group">
                                <label for="">Judul</label>
                                <input type="text" name="title" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="">Konten</label>
                                <textarea name="content" id="content"></textarea>
                            </div>
                            <button class="btn btn-primary btn-sm">Simpan</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  
    <script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
    <script>
      	//HUBUNGKAN CKEDITOR DENGAN TEXTAREA YANG BERNAMA CONTENT
        //ADAPUN KONFIGURASI UPLOAD URLNYA MENGARAH KE ROUTE POST.IMAGE
        CKEDITOR.replace('content', {
            filebrowserUploadUrl: "{{route('post.image', ['_token' => csrf_token() ])}}",
            filebrowserUploadMethod: 'form'
        });
    </script>
</body>
</html>

Dari sisi tampilan dan integrasi Ckeditor sudah berhasil, tugas selanjutnya adalah meng-handle request upload file yang dikirimkan oleh Ckeditor. Buka file PostController.php dan tambahkan method

public function uploadImage(Request $request)
{
    //JIKA ADA DATA YANG DIKIRIMKAN
    if ($request->hasFile('upload')) {
        $file = $request->file('upload'); //SIMPAN SEMENTARA FILENYA KE VARIABLE
        $fileName = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME); //KITA GET ORIGINAL NAME-NYA
        //KEMUDIAN GENERATE NAMA YANG BARU KOMBINASI NAMA FILE + TIME
        $fileName = $fileName . '_' . time() . '.' . $file->getClientOriginalExtension();

        $file->move(public_path('uploads'), $fileName); //SIMPAN KE DALAM FOLDER PUBLIC/UPLOADS

        //KEMUDIAN KITA BUAT RESPONSE KE CKEDITOR
        $ckeditor = $request->input('CKEditorFuncNum');
        $url = asset('uploads/' . $fileName); 
        $msg = 'Image uploaded successfully'; 
        //DENGNA MENGIRIMKAN INFORMASI URL FILE DAN MESSAGE
        $response = "<script>window.parent.CKEDITOR.tools.callFunction($ckeditor, '$url', '$msg')</script>";

        //SET HEADERNYA
        @header('Content-type: text/html; charset=utf-8'); 
        return $response;
    }
}

Masih dengan file yang sama, kita akan meng-handle request untuk menyimpan data ke dalam database. Tambahkan method

public function store(Request $request)
{
    //VALIDASI DATA INPUTAN
    $this->validate($request, [
        'title' => 'required|string',
        'content' => 'required'
    ]);

    //SIMPAN KE DALAM DATABASE MENGGUNAKAN ELOQUENT MASS ASSIGNMENT
    Post::create([
        'title' => $request->title,
        'content' => $request->content
    ]);
    //REDIRECT KE HALAMAN YG SAMA DAN KIRIM FLASH MESSAGE
    return redirect()->back()->with(['success' => 'Artikel disimpan']);
}

Jangan lupa untuk menambahkan use statement.

use App\Post;

Untuk mengizinkan proses mass assignment, buka file Post.php dan modifikasi menjadi

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $guarded = [];
}

Bagian terakhir adalah mendefinisikan routing-nya, buka file routes/web.php dan modifikasi route berikut

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', '[email protected]');
Route::post('/images', '[email protected]')->name('post.image');
Route::post('/', '[email protected]')->name('post.store');

Ketika content berhasil di-upload, maka akan disisipkan ke dalam editor seperti gambar berikut

laravel ckeditor

Adapun tampilan upload file-nya terlihat seperti berikut

laravel ckeditor

Baca Juga: Membuat Datatable Dengan VueJS Laravel 6

Integrasi File Manager Ckeditor

Selain membuat fitur upload image di Ckeditor secara manual, kita juga bisa menggunakan library yang kaya akan fitur dalam manajemen file, salah satu library tersebut adalah Laravel Filemanager dari Unisharp. Dengan menggunakan library ini, kita sudah tidak repot lagi dalam membuat fiturnya secara manual, cukup mengintegrasikannya dengan Ckeditor.

Langkah pertama, install terlebih dahulu dengan command

composer require unisharp/laravel-filemanager

Kemudian publish file config-nya dengan command

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

Lalu buat symlink dari storage ke public directory, pada command line, jalankan command

php artisan storage:link

Adapun untuk mengintegrasikan dengan Ckeditor adalah dengan memodifikasi bagian konfigurasinya. Buka file welcome.blade.php dan ubah bagian berikut

<script>
    CKEDITOR.replace('content', {
        filebrowserImageBrowseUrl: '/filemanager?type=Images',
        filebrowserImageUploadUrl: '/filemanager/upload?type=Images&_token=',
        filebrowserBrowseUrl: '/filemanager?type=Files',
        filebrowserUploadUrl: '/filemanager/upload?type=Files&_token='
    });
</script>

Secara default, library ini menerapkan auth middleware untuk melindungi url dari user yang belum login. Skip langkah selanjutnya apabila kamu menerapkan sistem login pada aplikasi yang sedang kamu develop. Jika tidak, atau sesuai contoh materi ini dimana kita tidak memiliki fitur authentication, maka bisa melakukan beberapa konfigurasi berikut.

Buka file config/lfm.php dan tambahkan line dibawah, sehingga seharusnya ketika membuka file manager maka url-nya sudah tidak dilindungi oleh authentication.

'use_package_routes'       => false,
'middlewares' => ['web'], //TAMBAHKAN BAGIAN INi

Jika konfigurasi diatas tidak memberikan efek, maka kita bisa melakukannya secara manual. Buka file routes/web.php dan tambahkan route file manager berikut dengan tidak menerapkan middleware

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

Adapun tampilan file managernya akan terlihat seperti gambar berikut

laravel ckeditor for laravel 6

Sedangkan untuk membuka file manager tersebut, pada Ckeditor, tekan icon image dan klik browse server.

laravel ckeditor for laravel 6

Adapun dokumentasi code dari artikel ini bisa dilihat di Github.

 

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Laravel Multiple Database MySql & MongoDB Laravel

Laravel Multiple Database MySql & MongoD...

Mengelola lebih dari satu database di Laravel akan menjadi bahan pembahasan kita dimana engine database yang akan digunakan adalah MySQL dan MongoDB, persoalannya adalah bagaimana menggunakan kedua da...

Mengenal & Mengimplementasikan Laravel Airlock Laravel

Mengenal & Mengimplementasikan Laravel A...

Salah satu fitur yang menarik perhatian dari Laravel 7 adalah Airlock. Fitur ini melengkapi sederet fitur lainnya yang serupa dalam menciptakan fungsi authentication, sebut saja yang lebih dahulu dike...

Authorization Using Gates Laravel 7 Laravel

Authorization Using Gates Laravel 7

Membedakan antara authentication dan authorization sering kali menjadi sebuah masalah baru karena keduanya hampir dianggap sama tapi memiliki fungsi yang berbeda, dimana authentication biasanya diguna...

Komentar