Dalam tutorial ini, saya akan menunjukkan bagaimana Anda bisa menambahkan CKeditor 5 ke elemen HTML dan menyimpannya ke basis data MySQL di Laravel 9.
CKEditor sendiri adalah editor WYSIWYG (Apa yang Anda Lihat Adalah Apa yang Anda Dapatkan) yang banyak digunakan. Editor ini menyediakan semua fitur dasar yang diperlukan untuk memformat.
Editor ini bekerja dengan sempurna tetapi Anda perlu menulis kode tambahan untuk mengunggah file melalui editor.
Sebelum mengikuti tutorial kali ini, Anda diwajibkan memiliki project laravel yang akan ditambahkan CKEditor 5.
Configurasi Database
Langkah pertama yang akan kita lakukan adalah membuat database. Disini saya akan menggunakan database MySQL. Beri nama database Anda dengan nama tutorial.
Langkah selanjutnya yaitu configurasi database. Untuk melakukan hal tersebut, Anda dapat membuka file .env dan isi bagian host, nama database, username, serta password.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=tutorial DB_USERNAME=root DB_PASSWORD=
Anda bisa menyesuaikan dengan settingan yang ada di sistem Anda.
Selanjutnya, kita akan membuat table messages pada database tutorial dengan menggunakan migration. Jalankan perintah berikut ke dalam terminal Anda.
php artisan make:migration create_messages_table
Sekarang, buka folder database/migrations/ dari root proyek. Cari file PHP yang diakhiri dengan create_messages_table dan buka file tersebut. Tentukan struktur tabel dalam metode up() seperti contoh berikut.
public function up()
{
Schema::create('messages', function (Blueprint $table) {
$table->id();
$table->string('subject');
$table->text('message');
$table->timestamps();
});
}Terakhir jalankan migration dengan perintah di bawah ini.
php artisan migrate
Membuat Model
Untuk selanjutnya kita akan membuat Messages model dengan cara berikut.
php artisan make:model Messages
Kemudian buka file app/Models/Messages.php. Tentukan atribut Model yang dapat diberikan secara massal – subject, dan message menggunakan properti $fillable.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Messages extends Model
{
use HasFactory;
protected $fillable = [
'subject','message'
];
}
Membuat Controller
Selanjutnya, kita akan membuat PagesController dengan artisan.
php artisan make:controller PagesController
Buka file PagesController dan isikan dengan code berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Session;
use App\Models\Messages;
class PagesController extends Controller
{
public function index(){
return view('index');
}
// Upload CkEditor file
public function uploadFile(Request $request){
$data = array();
$validator = Validator::make($request->all(), [
'upload' => 'required|mimes:png,jpg,jpeg|max:2048'
]);
if ($validator->fails()) {
$data['uploaded'] = 0;
$data['error']['message'] = $validator->errors()->first('upload');// Error response
}else{
if($request->file('upload')) {
$file = $request->file('upload');
$filename = time().'_'.$file->getClientOriginalName();
// File upload location
$location = 'uploads';
// Upload file
$file->move($location,$filename);
// File path
$filepath = url('uploads/'.$filename);
// Response
$data['fileName'] = $filename;
$data['uploaded'] = 1;
$data['url'] = $filepath;
}else{
// Response
$data['uploaded'] = 0;
$data['error']['message'] = 'File not uploaded.';
}
}
return response()->json($data);
}
// Submit form
public function submitform(Request $request){
$validator = Validator::make($request->all(), [
'subject' => 'required',
'message' => 'required',
]);
if ($validator->fails()) {
return redirect()->Back()->withInput()->withErrors($validator);
}else{
// Insert record
Messages::create([
'subject' => $request->subject,
'message' => $request->message
]);
Session::flash('message','Form submit Successfully.');
}
return redirect('/');
}
}Penjelasan Code:
Kita perlu import Validator, Session, dan Messages model
Kemudian buat 3 method antara lain:
- index() – untuk load index view
- uploadFile() – Dengan menggunakan metode ini, unggah file yang dipilih dari CKEditor. Akses file menggunakan nama upload.
Memvalidasi berkas. Jika tidak divalidasi, tetapkan 0 ke $data[‘uploaded’] dan pesan kesalahan ke $data[‘error’][‘message’].
Jika berhasil divalidasi maka unggah file ke folder uploads.
Setelah mengunggah, tetapkan $filename ke $data[‘namafile’], 1 ke $data[‘uploaded’], dan $filepath ke $data[‘url’].
submitform() – Metode ini untuk menangani pengiriman formulir.
Memvalidasi nilai yang dikirimkan. Jika tidak divalidasi maka kembali ke halaman dengan pesan kesalahan, jika tidak sisipkan record baru di tabel messages, dan tentukan pesan sukses di flash SESSION.
Terakhir redirect ke halaman awal atau ke /.
Membuat Route
Setelah itu, kita akan membuat route dengan cara buka file routes/web.php dan pada file tersebut tambahkan 3 routes diantaranya.
- / – Untuk load index view
- /uploadFile – Untuk upload file yang dipilih CKEditor
- /submitform – Untuk handle form submit
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PagesController;
Route::get('/', [PagesController::class, 'index']);
Route::post('/submitform',[PagesController::class,'submitform'])->name('submitform');
Route::post('/uploadFile',[PagesController::class,'uploadFile'])->name('uploadFile');Membuat View
Langkah terakhir yaitu membuat tampilan untuk CKEditor 5 kita di laravel. Caranya sangat mudah, Anda hanya perlu membuat file index.blade.php di folder resources/views/
Pada file tersebut buat <form> dan tambahkan action dengan {{ route(‘submitform’) }}
Di sini, buatlah sebuah kotak teks, elemen textarea, dan tombol kirim. Tentukan CKEditor pada textarea.
Selanjutnya, inisialisasi CKEditor pada kelas .editor. Gunakan ckfinder untuk mengatur URL berkas unggahan.
Setel uploadUrl ke “{{route(‘uploadFile’).’?_token=’.csrf_token()}}”. Di sini, berikan token CSRF dengan URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Add CKEditor 5 and save it to MySQL database in Laravel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<style type="text/css">
.ck-editor__editable {
min-height: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 mt-5" style="margin: 0 auto;">
<!-- Alert message (start) -->
@if(Session::has('message'))
<div class="alert alert-success">
{{ Session::get('message') }}
</div>
@endif
<!-- Alert message (end) -->
<form method="post" action="{{ route('submitform') }}">
@csrf
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Subject" name="subject" value="{{ old('subject') }}">
</div>
<!-- Error -->
@if($errors->has('subject'))
<div class='text-danger mt-2'>
* {{ $errors->first('subject') }}
</div>
@endif
</div>
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea class="form-control editor" name="message"></textarea>
</div>
<!-- Error -->
@if($errors->has('message'))
<div class='text-danger mt-2'>
* {{ $errors->first('message') }}
</div>
@endif
</div>
<div class="form-group ">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Script -->
<script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/classic/ckeditor.js"></script>
<script type="text/javascript">
ClassicEditor
.create( document.querySelector( '.editor' ),{
ckfinder: {
uploadUrl: "{{route('uploadFile').'?_token='.csrf_token()}}",
}
} )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>Penutup
Data elemen CKEditor dapat diakses secara langsung setelah pengiriman di sisi server.
Jika Anda ingin menampilkan data CKEditor yang tersimpan di database MySQL, maka baca dan simpanlah data tersebut di dalam elemen textarea CKEditor.
Selamat sekarang Anda telah berhasil menambah CKEditor 5 di Laravel. Jika ada pertanyaan Anda bisa langsung tulis di kolom komentar di bawah ini.