Menambahkan Paket Summernote Mengunggah Gambar
posts ini memberikan contoh unggahan gambar untuk laravel summer notes. Langkah demi langkah unggah gambar summer notes laravel. Anda dapat memahami konsep unggahan gambar di laravel editor summer notes. Jika Anda ingin melihat contoh mengunggah gambar laravel di summer notes, Anda berada di tempat yang tepat.
Seperti yang Anda ketahui, summer notes menawarkan unggahan gambar secara default. Tetapi ketika saya mengunggah gambar di editor summer notes, itu mengubah gambar menjadi gambar string base64 dan mengirimkannya sebagai konten. Menyimpan konten itu dalam database, yang terakhir bisa menjadi masalah ukuran database. Oleh karena itu, praktik terbaik saat mengunggah gambar adalah menyimpannya di folder publik atau penyimpanan.
Berikut adalah contoh sederhana dari gambar untuk diunggah ke folder. Contoh ini juga tersedia untuk versi laravel 6, laravel 7, laravel 8 dan laravel 9.
Ikuti langkah-langkah di bawah ini dan lihat pratinjau di bawah ini.
Langkah 1: Buat Project Laravel
Pertama, Anda perlu mendapatkan versi Laravel 8 baru dari aplikasi Anda menggunakan perintah di bawah ini. Jadi buka terminal atau command prompt dan jalankan perintah berikut:
composer create-project laravel/laravel blog
Langkah 2: Buat Tabel Post dan Model
Pada langkah pertama, kita perlu membuat migrasi baru untuk menambahkan tabel 'Posts'.
php artisan make:migration create_posts_table
database/migrations/2021_07_13_140744_create_posts_table.php
<?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->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Sekarang mari kita jalankan perintah migrasi.
php artisan migrate
Kemudian buat model posts dan tambahkan kode di bawah ini:
app/models/Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title',
'body',
];
}
Langkah 3: Buat Routes
Pada langkah ini, kita perlu membuat beberapa rute untuk membuat daftar posts dan membuat posts.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('posts/create',[PostController::class,'create']);
Route::post('posts/store',[PostController::class,'store'])->name('posts.store');
Langkah 4: Buat Controller
Pada langkah ini, Anda akan menulis kode unggah gambar Anda di file ini. Ini akan diunggah ke folder "unggah" di direktori publik. Anda perlu membuat PostController dan menambahkan kode berikut ke file itu.
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function create()
{
return view('postsCreate');
}
/**
* Write code on Method
*
* @return response()
*/
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required',
'body' => 'required'
]);
$content = $request->body;
$dom = new \DomDocument();
$dom->loadHtml($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$imageFile = $dom->getElementsByTagName('img');
foreach($imageFile as $item => $image){
$data = $image->getAttribute('src');
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$imgeData = base64_decode($data);
$image_name= "/upload/" . time().$item.'.png';
$path = public_path() . $image_name;
file_put_contents($path, $imgeData);
$image->removeAttribute('src');
$image->setAttribute('src', $image_name);
}
$content = $dom->saveHTML();
$post = Post::create([
'title' => $request->title,
'body' => $content
]);
dd($post->toArray());
}
}
Langkah 5: Buat File Blade
Sekarang kita perlu membuat file blade untuk index dan create. Sekarang mari kita buat file satu per satu.
resources/views/postsCreate.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel summer notes Editor Image Upload Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summer [email protected]/dist/summer notes.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Laravel summer notes Editor Image Upload Example - ItSolutionStuff.com</h1>
<form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@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 id="summer notes" name="body"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-block">Publish</button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summer [email protected]/dist/summer notes.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#summer notes').summer notes({
height: 450,
});
});
</script>
</body>
</html>
Sekarang Anda siap untuk menjalankan contoh. Jalankan perintah berikut.
php artisan serve
Sekarang Anda dapat membuka URL berikut di browser Anda:
localhost:8000/posts/create
Jika bermanfaat maka saya senang ...