Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Laravel # 5 – Upload Image dengan Ckeditor dan Mysql

3 min read

Tutorial Belajar Framework Laravel

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!

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:

Laravel 6 - Upload Image dengan Ckeditor dan Mysql

Untuk lebih memahami penggunaan project ini, disarankan untuk menonton video di atas.

Jika Anda membutuhkan source codenya, silahkan download melalui link di bawah ini:

Download Source Code

Sekian tutorial upload image melalui ckeditor dan mysql pada kesempatan kali ini. Kami berharap tutorial ini bermanfaat dan bisa membantu. Aamiin.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.