Hello Devs,
In this tutorial, we are going to learn how to use summernote editor in laravel application.
Follow this step by step guide given below:
Step 1 :
Install Laravel App
composer create-project --prefer-dist laravel/laravel blog
Step 2 :
Setup Database Configuration open ".env" file and change the database
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3 :
Create Table Migration and Model
php artisan make:model Book -m
/database/migrations/2020_05_27_100722_create_books_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBooksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->longText('description');
$table->string('auther_name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('books');
}
}
Run this command:
php artisan migrate
app/Book.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Book extends Model
{
protected $fillable = ['name','description','auther_name'];
}
Step 4 :
Create Route app/Book.php
Route::get('books','BookController@index');
Route::post('books','BookController@store')->name(books.store);
Route::get('books/{id}','BookController@show')->name(books.show);
Step 5 :
Create Controller
php artisan make:controller BookController
app/http/controller/BookController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Book;
class BookController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('book.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$input = $request->all();
Book::create($input);
return redirect()->back();
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show(Book $book)
{
return view('book.show',compact('book'));
}
}
Step 6 :
Create Blade File /resources/views/book/create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Use Summernote Editor In Laravel? - Rathorji.in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" integrity="sha256-n3YISYddrZmGqrUgvpa3xzwZwcvvyaZco0PdOyUKA18=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<!-- include libraries(jQuery, bootstrap) -->
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">How To Use Summernote Editor In Laravel? - Rathorji.in</h6>
</div>
<div class="card-body">
<form method="post" action="{{ route('books.store') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control"/>
</div>
<div class="form-group">
<label>Author Name</label>
<input type="text" name="auther_name" class="form-control"/>
</div>
<div class="form-group">
<label><strong>Description :</strong></label>
<textarea class="summernote" name="description"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
</body>
</html>
/resources/views/book/show.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Use Summernote Editor In Laravel? - Rathorji.in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="showimages"></div>
</div>
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">How To Use Summernote Editor In Laravel? - Rathorji.in</h6>
</div>
<div class="card-body">
<table class="table table-bordered">
<tr>
<th>No.</th>
<th>Name</th>
<th>Author Name</th>
<th>Description</th>
</tr>
<tr>
<td>{{ $book->id }}</td>
<td>{{ $book->name }}</td>
<td>{{ $book->auther_name }}</td>
<td>{!! $book->description !!}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Run this command:
php artisan serve
Open this URL:
http://localhost:8000/books
I hope this example helps you.