Matawebsite Promo Lebaran 2022

Cara Upload Gambar Menggunakan Ckeditor Di Laravel 8

date 13 Apr 2021
date Lev Yasin
date 2974
date Web Programming
Cara Upload Gambar Menggunakan Ckeditor Di Laravel 8

Hari ini dalam tutorial kali ini, Kita akan menjelaskan kepada bagaimana cara mengunggah gambar menggunakan CKEditor di laravel 8. Kode ini sangat berguna untuk proyek apa pun.

kami perlu menyimpan teks panjang, konten artikel, ringkasan produk, dan konten tag yang berbeda, dll, dengan deskripsi di database kami, kami menggunakan editor CKEditor. penggunaan teks bergaya editor ini mudah untuk menggunakan konten apa pun.

Saya menulis contoh yang sangat sederhana dari mengunggah gambar dengan laravel selangkah demi selangkah sehingga Anda dapat dengan mudah menggunakannya di laravel 8. Ckeditor adalah alat paling ampuh untuk editor konten. jadi jika Anda memiliki opsi unggah gambar juga tersedia maka itu luar biasa.

Beberapa masalah unggahan gambar pengembang CKEditor tidak berfungsi. jadi artikel ini untuk menggunakannya.

Jadi, mari kita lihat langkah-langkah di bawah ini untuk menyelesaikan unggahan gambar di CKEditor laravel 8.

Editor ini gratis untuk menginstal aplikasi laravel kami. mari ikuti langkah-langkah di bawah ini untuk cara mengupload gambar menggunakan CKeditor di laravel.

  • Langkah 1: Instal Laravel
  • Langkah 2: Buat Route
  • Langkah 3: Buat Model dan Controller
  • Langkah 4: Buat File Blade
  • Langkah 5: Jalankan Aplikasi Laravel

Langkah 1: Instal Laravel 8

Pertama-tama, Kita akan menginstal laravel 8, jadi pertama buka command prompt atau terminal dan masuk ke direktori folder xampp htdocs menggunakan command prompt. setelah itu jalankan perintah di bawah ini.

composer create-project --prefer-dist laravel/laravel laravel8_ckeditor
Langkah 2: Buat Route

Tambahkan kode route berikut di file "routes / web.php" .

<?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('/', function () {
   // return view('welcome');	
});
 
Route::post('upload_image','ArticleController@uploadImage')->name('upload');
 
?>Langkah 3: Buat Model dan Controller

Di sini di bawah perintah membantu untuk membuat pengontrol dan model.

php artisan make:controller ArticleController --resource --model=Article


Article.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
    //
	protected $fillable = [
        'title','description', 'author_name'
    ];
}
?>

ArticleController.php

<?php
namespace App\Http\Controllers;
use App\Article;
use Illuminate\Http\Request;
use Response;
class ArticleController extends Controller
{
    public function index()
    {
        return view('article-form');
    }
    public function uploadImage(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;
        }
    }	
}Langkah 4: Buat File Blade

Terakhir, Kita akan membuat file article-form.blade.php di direktori folder "resources / views /" dan menempelkan kode di bawah ini. kita belajar Bagaimana menambahkan CKEditor dengan upload gambar di laravel.

article-form.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
     <title>How To Upload Image Using Ckeditor In Laravel 8 - phpcodingstuff.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Laravel 7 Integrate Ckeditor With Example - XpertPhp</h1><br> 
                <form method="post" action="{{ route('store.article') }}" class="form form-horizontal">               
                  @csrf
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control"/>
                    </div>  
                    <div class="form-group">
                        <label>Description</label>
                         <textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea> 
                    </div>  
                    <div class="form-group">
                        <label>Author Name</label>
                        <input type="text" name="author" class="form-control"/>
                    </div>   
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary"/>
                    </div> 
                </form>             
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
    <script>
    CKEDITOR.replace('summary-ckeditor', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
    </script> 
</body>
</html>Langkah 5: Jalankan Aplikasi Laravel Kita

Kita dapat memulai server dan menjalankan contoh ini menggunakan perintah di bawah ini.

php artisan serve
Matawebsite Promo
lev_yasin.png

Lev Yasin

Instruktur Web Programming Mataweb

Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.

Artikel Populer

Halo, ada yang bisa kami bantu?
Daftar Sekarang