Hari ini kami akan Hari ini kami akan sharing bagaimana upload image dengan ckeditor dan mysql di laravel 6. Sebagaimana yang kita ketahui Ckeditor adalah library yang biasa digunakan untuk menulis konten. Di dalam konten biasanya membutuhkan upload gambar.
Saat ini ckeditor bisa melakukan upload jika menggunakan link url saja. Pertanyaanya, bagaimana jika menggunakan upload gambar? Bagaimana agar gambar yang diupload masuk ke asset dan database?
Pada tutorial kali ini lah akan dibahas lengkap bagaimana cara:
- Upload image ke asset project dan database dengan ckeditor
- Bagaimana upload konten yang isinya text dan gambar ke database?
Silahkan tonton video di bawah ini terlebih dahulu …
Jika Anda tertarik, mari kita mulai coding untuk membuat project seperti video di atas!
Let’s go!
Daftar Isi
Step #1 – Create Project
Sebagaimana biasa lakukan create project laravel melalui composer.
composer create-project laravel/laravel laravel_upload_ckeditor_mysql
Step #2 – Setting .env
Buka file .env kemudian edit bagian ini:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=
Menjadi:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_upload_ckeditor_mysql DB_USERNAME=root DB_PASSWORD=
Sekarang proses konfigurasi sudah selesai.
Step #3 – Create Database dan Migration
Buat database dengan nama laravel_upload_ckeditor_mysql. Kemudian buat tablenya melalui command:
php artisan make:model Post –migration
Kemudian buka file migrationnya, lalu tambahkan:
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
Selanjutkan jalankan command berikut untuk menggenerate table ke database.
php artisan migrate
Step #4 – Create Route
Buah 3 baris route untuk menghandle url request. Silahkan ketik kode berikut:
Route::get('/', 'UploadController@index');
Route::post('ckeditor/upload', 'UploadController@upload')->name('upload.upload');
Route::post('ckeditor/store', 'UploadController@store')->name('upload.store');
Step #5 – Create Controller
Buat controller UploadController.php dan tambahkan function index(), store() dan upload(). Ketik command berikut:
php artisan make:controller UploadController
Kemudian silahkan ikuti kode berikut:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadController extends Controller
{
public function index()
{
return view('view_upload');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'content' => 'required'
]);
$post = new \App\Post;
$post->title = $request->title;
$post->content = $request->content;
$post->save();
return redirect()->back()->with('success', 'Post created successfully');
}
public function upload(Request $request)
{
if($request->hasFile('upload')) {
$originName = $request->file('upload')->getClientOriginalName();
$fileName = pathinfo($originName, PATHINFO_FILENAME);
$extension = $request->file('upload')->getClientOriginalExtension();
$fileName = $fileName.'_'.time().'.'.$extension;
$request->file('upload')->move(public_path('images'), $fileName);
$CKEditorFuncNum = $request->input('CKEditorFuncNum');
$url = asset('images/'.$fileName);
$msg = 'Image uploaded successfully';
$response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
@header('Content-type: text/html; charset=utf-8');
echo $response;
}
}
}
Step #6 – Membuat View
Sekarang saatnya membuat view untuk proses upload. Silahkan buat file bernama view_upload.php dan berikut kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 6 - Upload Image dengan Ckeditor dan Mysql - ilmucoding.com</title>
</head>
<body>
<h1>Laravel 6 - Upload Image dengan Ckeditor dan Mysql - ilmucoding.com</h1>
@if(Session::get('success'))
<p style="color:green">{{ Session::get('success') }}</p>
@endif
@if(!empty($errors->all()))
Whoops! Ada kesalahan saat input data, yaitu:
<ul style="color:red">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
<br>
<form action="{{ route('upload.store') }}" method="post">
@csrf
Title: <input type="text" name="title" id="" placeholder="Title">
<br>
<br>
Content:
<textarea name="content"></textarea>
<br>
<button type="submit">Submit</button>
</form>
<script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserUploadUrl: "{{ route('upload.upload', ['_token' => csrf_token() ])}}",
filebrowserUploadMethod: 'form',
height: '250px',
width: '700px'
});
</script>
</body>
</html>
Step #7 – Testing
Sebelum menjalankan project, terlebih dahulu Anda harus membuat folder images di dalam folder public. Jika sudah, jalankan project dengan menulis command berikut pada terminal:
php artisan serve
Kemudian buka browser Anda dan tulis:
http://127.0.0.1:8000/
Hasilnya:
Untuk lebih memahami penggunaan project ini, disarankan untuk menonton video di atas.
Jika Anda membutuhkan source codenya, silahkan download melalui link di bawah ini:
Sekian tutorial upload image melalui ckeditor dan mysql pada kesempatan kali ini. Kami berharap tutorial ini bermanfaat dan bisa membantu. Aamiin.
