Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel10db
DB_USERNAME=root
DB_PASSWORD=
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Post -m
A new file named Post.php will be created in the app directory and database/migrations directory to generate the table in our database
app/Models/Post.php
//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',
'description'
];
}
database\migrations\create_posts_table.php
//database\migrations\create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->longText('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('posts');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Create Controller
php artisan make:controller PostController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller PostController
app/Http/Controllers/PostController.php
//app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
use DOMDocument;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Str;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$posts = Post::all();
return view('index',compact('posts'));
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$description = $request->description;
$dom = new DOMDocument();
$dom->loadHTML($description,9);
$images = $dom->getElementsByTagName('img');
foreach ($images as $key => $img) {
$data = base64_decode(explode(',',explode(';',$img->getAttribute('src'))[1])[1]);
$image_name = "/upload/" . time(). $key.'.png';
file_put_contents(public_path().$image_name,$data);
$img->removeAttribute('src');
$img->setAttribute('src',$image_name);
}
$description = $dom->saveHTML();
Post::create([
'title' => $request->title,
'description' => $description
]);
return redirect('/');
}
/**
* Display the specified resource.
*/
public function show($id)
{
$post = Post::find($id);
return view('show',compact('post'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit($id)
{
$post = Post::find($id);
return view('edit',compact('post'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, $id)
{
$post = Post::find($id);
$description = $request->description;
$dom = new DOMDocument();
$dom->loadHTML($description,9);
$images = $dom->getElementsByTagName('img');
foreach ($images as $key => $img) {
// Check if the image is a new one
if (strpos($img->getAttribute('src'),'data:image/') ===0) {
$data = base64_decode(explode(',',explode(';',$img->getAttribute('src'))[1])[1]);
$image_name = "/upload/" . time(). $key.'.png';
file_put_contents(public_path().$image_name,$data);
$img->removeAttribute('src');
$img->setAttribute('src',$image_name);
}
}
$description = $dom->saveHTML();
$post->update([
'title' => $request->title,
'description' => $description
]);
return redirect('/');
}
/**
* Remove the specified resource from storage.
*/
public function destroy($id)
{
$post = Post::find($id);
$dom= new DOMDocument();
$dom->loadHTML($post->description,9);
$images = $dom->getElementsByTagName('img');
foreach ($images as $key => $img) {
$src = $img->getAttribute('src');
$path = Str::of($src)->after('/');
if (File::exists($path)) {
File::delete($path);
}
}
$post->delete();
return redirect()->back();
}
}
View Blade Summernote
https://summernote.org/getting-started/#installation
resources/views/index.blade.php
//resources/views/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container p-4 ">
<div class="text-center">
<h1>Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</h1>
</div>
<a href="/create" class="btn btn-md btn-primary">Add new Post</a>
<hr>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@foreach ($posts as $post)
<tr>
<th scope="row">{{ $post->id }}</th>
<td>{{ $post->title }}</td>
<td>
<a href="show/{{ $post->id }}" class="btn btn-success">Show</a>
<a href="edit/{{ $post->id }}" class="btn btn-info">Edit</a>
<a href="delete/{{ $post->id }}" class="btn btn-danger">Delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
resources/views/create.blade.php
//resources/views/create.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container p-4 ">
<div class="row justify-content-md-center">
<div class="col-md-12">
<div class="text-center">
<h1 class="">Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</h1>
</div>
<form action="/post" method="post">
@csrf
<label for="">Title:</label>
<input type="text" class="form-control" name="title">
<label for="">Description:</label>
<textarea name="description" id="description" cols="30" rows="10"></textarea>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script>
$('#description').summernote({
placeholder: 'description...',
tabsize:2,
height:300
});
</script>
</body>
</html>
resources/views/show.blade.php
//resources/views/show.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container p-4 ">
<div class="row justify-content-md-center">
<div class="col-md-12">
<div class="text-center">
<h1 class="">Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</h1>
<hr>
</div>
<h3 class="text-center">{{ $post->title }}</h3>
<div>
{!! $post->description !!}
</div>
</div>
</div>
</div>
</body>
</html>
resources/views/edit.blade.php
//resources/views/edit.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container p-4 ">
<div class="row justify-content-md-center">
<div class="col-md-12">
<div class="text-center">
<h1 class="">Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)</h1>
</div>
<form action="/update/{{ $post->id }}" method="post">
@csrf
<label for="">Title:</label>
<input type="text" class="form-control" name="title" value="{{ $post->title }}">
<label for="">Description:</label>
<textarea name="description" id="description" cols="30" rows="10">{{ $post->description }}</textarea>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script>
$('#description').summernote({
placeholder: 'description...',
tabsize:2,
height:300
});
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
//Route::get('/', function () {
// return view('welcome');
//});
Route::get('/',[PostController::class,'index']);
Route::get('create',[PostController::class,'create']);
Route::post('post',[PostController::class,'store']);
Route::get('show/{id}',[PostController::class,'show']);
Route::get('edit/{id}',[PostController::class,'edit']);
Route::post('update/{id}',[PostController::class,'update']);
Route::get('delete/{id}',[PostController::class,'destroy']);
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
