Laravel 7 Summernote Example Tutorial

In this tutorial you will learn about the Laravel 7 Summernote Example Tutorial and its application with practical example.

In this Laravel 7 Summernote Example Tutorial Tutorial I’ll show you how to use Summernote in laravel. In this tutorial you will learn to use Summernote in laravel.

Table Of Contents−

Laravel 7 Summernote Example Tutorial

Step 1: Install Laravel App
Step 2: Add Database Details
Step 3: Create Migration and Model File

Step 4: Add Routes
Step 5: Create Controler
Step 6: Create Blade File

Step 7: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Database Details

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

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 Migration and Model File

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Next, Navigate to database/migrations and open create_posts_table.php. Then update the following code into create_books_table.php file, as follow:

<?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->longText('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?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->longText('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

After that, Navigate to App directory and open Post.php model file. Then add the following code into Post.php model file, as follow:

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title','description'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['title','description'];

}

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('posts','PostController@index');
Route::post('posts','PostController@store')->name(posts.store);
Route::get('posts/{id}','PostController@show')->name(posts.show);

Route::get('posts','PostController@index');

Route::post('posts','PostController@store')->name(posts.store);

Route::get('posts/{id}','PostController@show')->name(posts.show);

Step 5: Create Controler

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Then, Navigate to app/http/controllers and open PostController.php file. And update the following code into your PostController.php file, as follow:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Post;
 
class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('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();
        Post::create($input);
        return redirect()->back();
    }
 
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return view('display',compact('post'));
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

return view('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();

Post::create($input);

return redirect()->back();

}

/**

* Display the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function show(Post $post)

{

return view('display',compact('post'));

}

Step 6: Create Blade File

In this step, Navigate to resources/views folder. And create 2 blade views that named display.blade.php and create.blade.php the file inside this folder.

Then open create.blade.php file and update the following code into create.blade.php file, as follow:

<!DOCTYPE html>
<html>
<head>
<title>How To Use Summernote Editor In Laravel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<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">Laravel Summernote Example Tutorial</h6>
</div>
<div class="card-body">
<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><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>

<!DOCTYPE html>

<html>

<head>

<title>How To Use Summernote Editor In Laravel</title>

</head>

<body>

<h6 class="text-white">Laravel Summernote Example Tutorial</h6>

</div>

@csrf

<label>Title</label>

</div>

<label><strong>Description :</strong></label>

</div>

</div>

</form>

</div>

$(document).ready(function() {

$('.summernote').summernote();

});

</script>

</body>

</html>

Now open display.blade.php file and update the following code into your list.blade.php file, as follow:

<!DOCTYPE html>
<html>
<head>w3adda<title>Use Summernote Editor In Laravel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></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">Use Summernote Editor In Laravel</h6>
</div>
<div class="card-body">
<table class="table table-bordered">
<tr>
<th>No.</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>{!! $post->description !!}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>w3adda<title>Use Summernote Editor In Laravel</title>

</head>

<body>

</div>

<h6 class="text-white">Use Summernote Editor In Laravel</h6>

</div>

<tr>

<th>Title</th>

<th>Description</th>

</tr>

<tr>

<td>{{ $post->title }}</td>

<td>{!! $post->description !!}</td>

</tr>

</table>

</div>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/posts

1	http://localhost:8000/posts

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7 Summernote Example Tutorial