Category Archives: Laravel

Laravel Tutorials

Laravel 5.8 Simple Ajax CRUD Application

In this tutorial, you will learn to create a simple ajax based CRUD (Create, Read, Update and Delete) application. In this step by step guide, we will be creating a simple blog application with post table and implement ajax based CRUD operations.

Install Laravel 5.8 Using Command

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

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

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

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Set Default String Length

Locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

and inside the boot method set a default string length as given below –

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

So this is how “app/Providers/AppServiceProvider” file looks like –

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 //
 Schema::defaultStringLength(191);
}
 public function register()
 {
 //
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

Create Database Table and Migration

Now, we have to define table schema for posts table. Open terminal and let’s run the following command to generate a migration file to create posts table in our database.

php artisan make:migration create_posts_table --create=posts

1	php artisan make:migration create_posts_table --create=posts

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Run Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the posts table will be created in database along with migrations, password_resets and users table.

Create Model

Next, we need to create a model called Post using below command.

php artisan make:model Post

1	php artisan make:model Post

Once, the above command is executed it will create a model file Post.php in app directory. Next, we have to assign fillable fields using fillable property inside Post.php file. Open app/Post.php file and put the following code in it –

app/Post.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = [

'title', 'body'

];

}

Create Controller Using Command

Next, we have to create a controller to handle Ajax CRUD Operations. Create a controller named AjaxPostController using command given below –

php artisan make:controller ajaxcrud/AjaxPostController

1	php artisan make:controller ajaxcrud/AjaxPostController

Once the above command executed, it will create a controller file AjaxPostController.php in app/Http/Controllers/ajaxcrud directory. Open the ajaxcrud/AjaxPostController.php file and put the following code in it.

app/Http/Controllers/dtable/AjaxPostController.php

<?php

namespace App\Http\Controllers\ajaxcrud;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Post;
use Redirect,Response;

class AjaxPostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $data['posts'] = Post::orderBy('id','desc')->paginate(8);
   
        return view('ajaxcrud.index',$data);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $postID = $request->post_id;
        $post   =   Post::updateOrCreate(['id' => $postID],
                    ['title' => $request->title, 'body' => $request->body]);
    
        return Response::json($post);
    }



    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
        $where = array('id' => $id);
        $post  = Post::where($where)->first();
 
        return Response::json($post);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
        $post = Post::where('id',$id)->delete();
   
        return Response::json($post);
    }
}

<?php

namespace App\Http\Controllers\ajaxcrud;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Post;

use Redirect,Response;

class AjaxPostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$data['posts'] = Post::orderBy('id','desc')->paginate(8);

return view('ajaxcrud.index',$data);

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$postID = $request->post_id;

$post = Post::updateOrCreate(['id' => $postID],

['title' => $request->title, 'body' => $request->body]);

return Response::json($post);

}

/**

* Show the form for editing the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function edit($id)

{

$where = array('id' => $id);

$post = Post::where($where)->first();

return Response::json($post);

}

/**

* Remove the specified resource from storage.

* @param int $id

* @return \Illuminate\Http\Response

public function destroy($id)

{

$post = Post::where('id',$id)->delete();

return Response::json($post);

}

Create Blade / View Files

In this step, we will create view/blade file to perform CRUD Operations. Lets create a blade file “index.blade.php” in “resources/views/ajaxcrud/” directory and put the following code in it respectively.

resources/views/ajaxcrud/index.blade.php

<!DOCTYPE html>
<html>
<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">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 5.8 Ajax CRUD Application - W3Adda.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
 <style>
   .container{
    padding: 0.5%;
   } 
</style>
</head>
<body>
 
<div class="container">
    <h2 style="margin-top: 12px;" class="alert alert-success">Laravel 5.8 Ajax CRUD Application - W3Adda.com</h2><br>
    <div class="row">
        <div class="col-12">
          <a href="javascript:void(0)" class="btn btn-success mb-2" id="create-new-post">Add post</a> 
          
          <table class="table table-bordered" id="laravel_crud">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Email</th>
                 <td colspan="2">Action</td>
              </tr>
           </thead>
           <tbody id="posts-crud">
              @foreach($posts as $post)
              <tr id="post_id_{{ $post->id }}">
                 <td>{{ $post->id  }}</td>
                 <td>{{ $post->title }}</td>
                 <td>{{ $post->body }}</td>
                 <td><a href="javascript:void(0)" id="edit-post" data-id="{{ $post->id }}" class="btn btn-info">Edit</a></td>
                 <td>
                  <a href="javascript:void(0)" id="delete-post" data-id="{{ $post->id }}" class="btn btn-danger delete-post">Delete</a></td>
              </tr>
              @endforeach
           </tbody>
          </table>
          {{ $posts->links() }}
       </div> 
    </div>
</div>
<div class="modal fade" id="ajax-crud-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="postCrudModal"></h4>
    </div>
    <div class="modal-body">
        <form id="postForm" name="postForm" class="form-horizontal">
           <input type="hidden" name="post_id" id="post_id">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="title" name="title" value="" required="">
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-2 control-label">Body</label>
                <div class="col-sm-12">
                    <input class="form-control" id="body" name="body" value="" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save
             </button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        
    </div>
</div>
</div>
</div>
</body>
</html>
<script>
  $(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#create-new-post').click(function () {
        $('#btn-save').val("create-post");
        $('#postForm').trigger("reset");
        $('#postCrudModal').html("Add New post");
        $('#ajax-crud-modal').modal('show');
    });
 
    $('body').on('click', '#edit-post', function () {
      var post_id = $(this).data('id');
      $.get('ajax-posts/'+post_id+'/edit', function (data) {
         $('#postCrudModal').html("Edit post");
          $('#btn-save').val("edit-post");
          $('#ajax-crud-modal').modal('show');
          $('#post_id').val(data.id);
          $('#title').val(data.title);
          $('#body').val(data.body);  
      })
   });

    $('body').on('click', '.delete-post', function () {
        var post_id = $(this).data("id");
        confirm("Are You sure want to delete !");
 
        $.ajax({
            type: "DELETE",
            url: "{{ url('ajax-posts')}}"+'/'+post_id,
            success: function (data) {
                $("#post_id_" + post_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });   
  });
 
 if ($("#postForm").length > 0) {
      $("#postForm").validate({
 
     submitHandler: function(form) {

      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');

      
      $.ajax({
          data: $('#postForm').serialize(),
          url: "{{ route('ajax-posts.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
              var post = '<tr id="post_id_' + data.id + '"><td>' + data.id + '</td><td>' + data.title + '</td><td>' + data.body + '</td>';
              post += '<td><a href="javascript:void(0)" id="edit-post" data-id="' + data.id + '" class="btn btn-info">Edit</a></td>';
              post += '<td><a href="javascript:void(0)" id="delete-post" data-id="' + data.id + '" class="btn btn-danger delete-post">Delete</a></td></tr>';
               
              
              if (actionType == "create-post") {
                  $('#posts-crud').prepend(post);
              } else {
                  $("#post_id_" + data.id).replaceWith(post);
              }
 
              $('#postForm').trigger("reset");
              $('#ajax-crud-modal').modal('hide');
              $('#btn-save').html('Save Changes');
              
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
          }
      });
    }
  })
}
   
  
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 Ajax CRUD Application - W3Adda.com</title>

<style>

.container{

padding: 0.5%;

}

</style>

</head>

<body>

<h2 style="margin-top: 12px;" class="alert alert-success">Laravel 5.8 Ajax CRUD Application - W3Adda.com</h2><br>

<thead>

<tr>

<th>Email</th>

<td colspan="2">Action</td>

</tr>

</thead>

@foreach($posts as $post)

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

<td><a href="javascript:void(0)" id="edit-post" data-id="{{ $post->id }}" class="btn btn-info">Edit</a></td>

<td>

<a href="javascript:void(0)" id="delete-post" data-id="{{ $post->id }}" class="btn btn-danger delete-post">Delete</a></td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

<label for="name" class="col-sm-2 control-label">Title</label>

</div>

</div>

<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save

</button>

</div>

</form>

</div>

</div>

</body>

</html>

$(document).ready(function () {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#create-new-post').click(function () {

$('#btn-save').val("create-post");

$('#postForm').trigger("reset");

$('#postCrudModal').html("Add New post");

$('#ajax-crud-modal').modal('show');

});

$('body').on('click', '#edit-post', function () {

var post_id = $(this).data('id');

$.get('ajax-posts/'+post_id+'/edit', function (data) {

$('#postCrudModal').html("Edit post");

$('#btn-save').val("edit-post");

$('#ajax-crud-modal').modal('show');

$('#post_id').val(data.id);

$('#title').val(data.title);

$('#body').val(data.body);

})

});

$('body').on('click', '.delete-post', function () {

var post_id = $(this).data("id");

confirm("Are You sure want to delete !");

$.ajax({

type: "DELETE",

url: "{{ url('ajax-posts')}}"+'/'+post_id,

success: function (data) {

$("#post_id_" + post_id).remove();

error: function (data) {

console.log('Error:', data);

}

});

if ($("#postForm").length > 0) {

$("#postForm").validate({

submitHandler: function(form) {

var actionType = $('#btn-save').val();

$('#btn-save').html('Sending..');

$.ajax({

data: $('#postForm').serialize(),

url: "{{ route('ajax-posts.store') }}",

type: "POST",

dataType: 'json',

success: function (data) {

var post = '<tr id="post_id_' + data.id + '"><td>' + data.id + '</td><td>' + data.title + '</td><td>' + data.body + '</td>';

post += '<td><a href="javascript:void(0)" id="edit-post" data-id="' + data.id + '" class="btn btn-info">Edit</a></td>';

post += '<td><a href="javascript:void(0)" id="delete-post" data-id="' + data.id + '" class="btn btn-danger delete-post">Delete</a></td></tr>';

if (actionType == "create-post") {

$('#posts-crud').prepend(post);

} else {

$("#post_id_" + data.id).replaceWith(post);

}

$('#postForm').trigger("reset");

$('#ajax-crud-modal').modal('hide');

$('#btn-save').html('Save Changes');

error: function (data) {

console.log('Error:', data);

$('#btn-save').html('Save Changes');

}

});

}

})

}

</script>

Create Resource Routes

After this, we need to add a resource route in “routes/web.php“. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::resource('ajax-posts', 'ajaxcrud\AjaxPostController');

1	Route::resource('ajax-posts', 'ajaxcrud\AjaxPostController');

Start 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/ajax-posts

Output:-

laravel-5-8-ajax-crud-application-2

Click “Add New Post” to submit new post.

laravel-5-8-ajax-crud-application-1

Click “Edit” button to edit corresponding post.

laravel-5-8-ajax-crud-application-3

Click “Delete” button to delete corresponding post.

Laravel 5.8 Ajax CRUD Using Datatables

Leave a reply

Laravel 5.8 Ajax CRUD Using Datatables

In this tutorial, you will learn to implement ajax based CRUD (Create, Read, Update and Delete) operations using datatable js. In this tutorial, we will be using yajra datatable package for listing of records with pagination, sorting and filter (search) feature.

In this step by step guide, we will be creating a simple laravel 5.8 application to demonstrate you how to install yajra datatable package and implement ajax based CRUD operations with datatable js.

Install Laravel 5.8

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

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

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

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Set Default String Length

Locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

and inside the boot method set a default string length as given below –

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

So this is how “app/Providers/AppServiceProvider” file looks like –

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 //
 Schema::defaultStringLength(191);
}
 public function register()
 {
 //
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

Create Database Table

Now, we have to define table schema for posts table. Open terminal and let’s run the following command to generate a migration file to create posts table in our database.

php artisan make:migration create_posts_table --create=posts

1	php artisan make:migration create_posts_table --create=posts

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Run Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the posts table will be created in database along with migrations, password_resets and users table.

Create Model

Next, we need to create a model called Post using below command.

php artisan make:model Post

1	php artisan make:model Post

app/Post.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = [

'title', 'body'

];

}

Install Yajra Datatable Package

In this step, we will install Yajra Datatables Package via the composer dependency manager. Use the following command to install Yajra Datatables Package.

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

After Installing Yajra Datatables package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
      // Other service providers…
  Yajra\DataTables\DataTablesServiceProvider::class,
 ],

'aliases' => [
 // Other aliases…
 'Datatables' => Yajra\Datatables\Facades\Datatables::class,
 ],

'providers' => [

// Other service providers…

Yajra\DataTables\DataTablesServiceProvider::class,

'aliases' => [

// Other aliases…

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

Create Controller

Next, we have to create a controller to handle Ajax CRUD Operations. Create a controller named AjaxCrudController using command given below –

php artisan make:controller dtable/AjaxCrudController

1	php artisan make:controller dtable/AjaxCrudController

Once the above command executed, it will create a controller file AjaxCrudController.php in app/Http/Controllers/dtable directory. Open the dtable/AjaxCrudController.php file and put the following code in it.

app/Http/Controllers/dtable/AjaxCrudController.php

<?php

namespace App\Http\Controllers\dtable;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Post;
use Redirect,Response;

class AjaxCrudController extends Controller
{

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        if(request()->ajax())
            {
                return datatables()->of(Post::latest()->get())
                        ->addColumn('action', function($data){
                        $button = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$data->id.'" data-original-title="Edit" class="edit btn btn-success edit-post">Edit</a>';
                        $button .= '&nbsp;&nbsp;';
                        $button .= '<a href="javascript:void(0);" id="delete-post" data-toggle="tooltip" data-original-title="Delete" data-id="'.$data->id.'" class="delete btn btn-danger">   Delete</a>';
                        return $button;
                        })
                        ->rawColumns(['action'])
                        ->make(true);
            }
            return view('dtable.index');
    }
     
     
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {  
        $postId = $request->post_id;
        $post   =   Post::updateOrCreate(['id' => $postId],
                    ['title' => $request->title, 'body' => $request->body]);        
        return Response::json($post);
    }
     
    /**
     * Show the form for editing the specified resource.
     *
     */
    public function edit($id)
    {   
        $where = array('id' => $id);
        $post  = Post::where($where)->first();
     
        return Response::json($post);
    }
     
     
    /**
     * Remove the specified resource from storage.
     *
     */
    public function destroy($id)
    {
        $post = Post::where('id',$id)->delete();
     
        return Response::json($post);
    }
}

<?php

namespace App\Http\Controllers\dtable;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Post;

use Redirect,Response;

class AjaxCrudController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

if(request()->ajax())

{

return datatables()->of(Post::latest()->get())

->addColumn('action', function($data){

$button = '<a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$data->id.'" data-original-title="Edit" class="edit btn btn-success edit-post">Edit</a>';

$button .= '  ';

$button .= '<a href="javascript:void(0);" id="delete-post" data-toggle="tooltip" data-original-title="Delete" data-id="'.$data->id.'" class="delete btn btn-danger"> Delete</a>';

return $button;

})

->rawColumns(['action'])

->make(true);

}

return view('dtable.index');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$postId = $request->post_id;

$post = Post::updateOrCreate(['id' => $postId],

['title' => $request->title, 'body' => $request->body]);

return Response::json($post);

}

/**

* Show the form for editing the specified resource.

public function edit($id)

{

$where = array('id' => $id);

$post = Post::where($where)->first();

return Response::json($post);

}

/**

* Remove the specified resource from storage.

public function destroy($id)

{

$post = Post::where('id',$id)->delete();

return Response::json($post);

}

Create Blade / View Files

In this step, we will create view/blade file to perform CRUD Operations. Lets create a blade file “index.blade.php” in “resources/views/dtable/” directory and put the following code in it respectively.

resources/views/dtable/index.blade.php

<!DOCTYPE html>
 
<html lang="en">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 5.8 Ajax CRUD Using Datatables - W3Adda</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
<h2>Laravel 5.8 Ajax CRUD Using Datatables - W3Adda</h2>
<br>
<a href="javascript:void(0)" class="btn btn-info ml-3" id="add-new-post">Add New Post</a>
<br><br>
 
<table class="table table-bordered table-striped" id="laravel_datatable">
   <thead>
      <tr>
         <th>ID</th>
         <th>Title</th>
         <th>Body</th>
         <th>Created at</th>
         <th>Action</th>
      </tr>
   </thead>
</table>
</div>
 
<div class="modal fade" id="ajax-crud-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="postCrudModal"></h4>
    </div>
    <div class="modal-body">
        <form id="postForm" name="postForm" class="form-horizontal">
           <input type="hidden" name="post_id" id="post_id">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="title" name="title" value="" required="">
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-2 control-label">Body</label>
                <div class="col-sm-12">
                    <input class="form-control" id="body" name="body" value="" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save
             </button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        
    </div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready( function () {
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });

$('#laravel_datatable').DataTable({
       processing: true,
       serverSide: true,
       ajax: {
        url: "{{ route('dtable-posts.index') }}",
        type: 'GET',
       },
       columns: [
                { data: 'id', name: 'id', 'visible': false},
                { data: 'title', name: 'title' },
                { data: 'body', name: 'body' },
                { data: 'created_at', name: 'created_at' },
                {data: 'action', name: 'action', orderable: false},
             ],
      order: [[0, 'desc']]
});
 
$('#add-new-post').click(function () {
    $('#btn-save').val("create-post");
    $('#post_id').val('');
    $('#postForm').trigger("reset");
    $('#postCrudModal').html("Add New Post");
    $('#ajax-crud-modal').modal('show');
});
 
   
$('body').on('click', '.edit-post', function () {
  var post_id = $(this).data('id');
  $.get('dtable-posts/'+post_id+'/edit', function (data) {
     $('#name-error').hide();
     $('#email-error').hide();
     $('#postCrudModal').html("Edit Post");
      $('#btn-save').val("edit-post");
      $('#ajax-crud-modal').modal('show');
      $('#post_id').val(data.id);
      $('#title').val(data.title);
      $('#body').val(data.body);
  })
});
    
$('body').on('click', '#delete-post', function () {
  var post_id = $(this).data("id");
  confirm("Are You sure want to delete !");
  $.ajax({
      type: "get",
      url: "dtable-posts/destroy/"+post_id,
      success: function (data) {
      var oTable = $('#laravel_datatable').dataTable(); 
      oTable.fnDraw(false);
      },
      error: function (data) {
          console.log('Error:', data);
      }
  });
});   
});
 
if ($("#postForm").length > 0) {
  $("#postForm").validate({
      submitHandler: function(form) {
      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');
    
      $.ajax({
          data: $('#postForm').serialize(),
          url: "{{ route('dtable-posts.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
               $('#postForm').trigger("reset");
              $('#ajax-crud-modal').modal('hide');
              $('#btn-save').html('Save Changes');
              var oTable = $('#laravel_datatable').dataTable();
              oTable.fnDraw(false);
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
          }
      });
    }
  })
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<!DOCTYPE html>

<head>

<title>Laravel 5.8 Ajax CRUD Using Datatables - W3Adda</title>

</head>

<body>

<h2>Laravel 5.8 Ajax CRUD Using Datatables - W3Adda</h2>

<br>

<thead>

<tr>

<th>Title</th>

<th>Created at</th>

<th>Action</th>

</tr>

</thead>

</table>

</div>

</div>

<label for="name" class="col-sm-2 control-label">Title</label>

</div>

</div>

<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save

</button>

</div>

</form>

</div>

</div>

</body>

</html>

$(document).ready( function () {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#laravel_datatable').DataTable({

processing: true,

serverSide: true,

ajax: {

url: "{{ route('dtable-posts.index') }}",

type: 'GET',

columns: [

{ data: 'id', name: 'id', 'visible': false},

{ data: 'title', name: 'title' },

{ data: 'body', name: 'body' },

{ data: 'created_at', name: 'created_at' },

{data: 'action', name: 'action', orderable: false},

order: [[0, 'desc']]

});

$('#add-new-post').click(function () {

$('#btn-save').val("create-post");

$('#post_id').val('');

$('#postForm').trigger("reset");

$('#postCrudModal').html("Add New Post");

$('#ajax-crud-modal').modal('show');

});

$('body').on('click', '.edit-post', function () {

var post_id = $(this).data('id');

$.get('dtable-posts/'+post_id+'/edit', function (data) {

$('#name-error').hide();

$('#email-error').hide();

$('#postCrudModal').html("Edit Post");

$('#btn-save').val("edit-post");

$('#ajax-crud-modal').modal('show');

$('#post_id').val(data.id);

$('#title').val(data.title);

$('#body').val(data.body);

})

});

$('body').on('click', '#delete-post', function () {

var post_id = $(this).data("id");

confirm("Are You sure want to delete !");

$.ajax({

type: "get",

url: "dtable-posts/destroy/"+post_id,

success: function (data) {

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function (data) {

console.log('Error:', data);

}

});

if ($("#postForm").length > 0) {

$("#postForm").validate({

submitHandler: function(form) {

var actionType = $('#btn-save').val();

$('#btn-save').html('Sending..');

$.ajax({

data: $('#postForm').serialize(),

url: "{{ route('dtable-posts.store') }}",

type: "POST",

dataType: 'json',

success: function (data) {

$('#postForm').trigger("reset");

$('#ajax-crud-modal').modal('hide');

$('#btn-save').html('Save Changes');

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function (data) {

console.log('Error:', data);

$('#btn-save').html('Save Changes');

}

});

}

})

}

</script>

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::resource('dtable-posts', 'dtable\AjaxCrudController');
Route::get('dtable-posts/destroy/{id}', 'dtable\AjaxCrudController@destroy');

1 2	Route::resource('dtable-posts', 'dtable\AjaxCrudController'); Route::get('dtable-posts/destroy/{id}', 'dtable\AjaxCrudController@destroy');

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/dtable-posts

Output:-

laravel-5-8-ajax-crud-using-datatanles-3 Click “Add New Post” to submit new post.

laravel-5-8-ajax-crud-using-datatanles-1 Click “Edit” button to edit corresponding post.

laravel-5-8-ajax-crud-using-datatanles-2

Click “Delete” button to delete corresponding post.

Laravel 5.8 Installation

Leave a reply

Laravel 5.8 Installation

Download and install Laravel 5.8 using the below command. Make sure you have composer installed.

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

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

Now, lets switch to the project directory and 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/

Output:-

laravel-5-7-crud-tutorial-with-example-2

In case if you get RuntimeException No application encryption key has been specified error, please follow instruction given below to generate application key –

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Connecting Laravel with MySQL Database

In order to connect your laravel application to a MySQL database. Lets create a MySQL database set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara58blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara58blog

DB_USERNAME=root

DB_PASSWORD=

Migrations

Before we run “php artisan migrate” command, location the file “app/Providers/AppServiceProvider” file, and add following line of code in the top of the file

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

and inside the boot method set a default string length as given below –

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

So this is how your “app/Providers/AppServiceProvider” file looks like –

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 //
 Schema::defaultStringLength(191);
}
 public function register()
 {
 //
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

After installing laravel, some default migration files are created inside “database/migrations” directory. Now, lets run the “php artisan migrate” command for creating default create users table and password reset table.

php artisan migrate

1	php artisan migrate

Restart Development Server

Restart the development server using following artisan command –

php artisan serve

1	php artisan serve

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

http://localhost:8000/

Output:-

laravel-5-7-crud-tutorial-with-example-2

Stripe Payment Gateway Integration In Laravel 5.8

Leave a reply

Stripe Payment Gateway Integration In Laravel 5.8

Stripe is one of the most popular payment gateway, that allows us to accept payment worldwide. Stripe is very simple, hassle free and easy to integrate payment gateway. Integrating stripe payment gateway with laravel is a breeze.

In this tutorial, you will learn to integrate stripe payment gateway in your laravel 5.8 project. Before starting with this tutorial you would require a stripe developer account, from there you will get the api key and secret key require for the integration. After the successful integration you will be able to collect payment via simple payment form which allow customer to provide card information like card number, expiry date and a CVC code. Follow this step by step tutorial to learn stripe payment gateway integration in laravel 5.8.

Install Laravel 5.8

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

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

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

Make sure you have composer installed.

Create Stripe account and generate key and secret

Go to the official Stripe website and signup with basic details.

Set Stripe API Key and SECRET In .env file

Now, we need to set stripe key and secret key in our project’s .env file. In stripe dashboard switch to the test mode as per screenshot, and get the stripe key and secret.

laravel-stripe-payment-gateway-integration-1

Now, open .env file located in project’s root folder and set the stripe key and secret as following –

.env file

STRIPE_KEY=test_publishable_key
STRIPE_SECRET=test_secret_key

1 2	STRIPE_KEY=test_publishable_key STRIPE_SECRET=test_secret_key

Install stripe-php Package via composer

Now, we need to install stripe-php package in our project. Open your terminal and switch to project directory and use the following composer command to install stripe-php package.

composer require stripe/stripe-php

1	composer require stripe/stripe-php

Create Controller and Methods

Now, lets create a payment controller using following command

php artisan make:controller PaymentController

1	php artisan make:controller PaymentController

Once the above command executed, it will create a controller file PaymentController.php in app/Http/Controllers/ directory. Open the PaymentController.php file and put the following code in it.

Controllers/PaymentController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Session;
use Stripe;

class PaymentController extends Controller
{
  

    public function stripe()

    {

        return view('stripe/stripe');

    }


    public function stripePost(Request $request)
    {

        Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

        Stripe\Charge::create ([

                "amount" => 100 * 100,

                "currency" => "usd",

                "source" => $request->stripeToken,

                "description" => "Test Payment" 

        ]);

          Session::flash('success', 'Payment successful!');

        return back();

    }
}

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Session;

use Stripe;

class PaymentController extends Controller

{

public function stripe()

{

return view('stripe/stripe');

}

public function stripePost(Request $request)

{

Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

Stripe\Charge::create ([

"amount" => 100 * 100,

"currency" => "usd",

"source" => $request->stripeToken,

"description" => "Test Payment"

]);

Session::flash('success', 'Payment successful!');

return back();

}

Create View/Blade File

In this step, we will create view/blade file to accept stripe payment. Lets create a “stripe.blade.php” file in “resources/views/stripe/” directory and put the following code in it.

resources/views/stripe/stripe.blade.php

<!DOCTYPE html>

<html>

<head>

	<title>W3Adda - Laravel 5.8 Stripe Payment Gateway Integration</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style type="text/css">

        .panel-title {

        display: inline;

        font-weight: bold;

        }

        .display-table {

            display: table;

        }

        .display-tr {

            display: table-row;

        }

        .display-td {

            display: table-cell;

            vertical-align: middle;

            width: 61%;

        }

    </style>

</head>

<body>

  

<div class="container">

    <h1  style="text-align: center;">W3Adda - Laravel 5.8 Stripe Payment Gateway Integration</h1>

      <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <div class="panel panel-default credit-card-box">

                <div class="panel-heading display-table" >

                    <div class="row display-tr" >

                        <h3 class="panel-title display-td" >Payment Details</h3>

                        <div class="display-td" >                            

                            <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">

                        </div>

                    </div>                    

                </div>

                <div class="panel-body">

                    @if (Session::has('success'))

                        <div class="alert alert-success text-center">

                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                            <p>{{ Session::get('success') }}</p>

                        </div>

                    @endif

                 <form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation"

                                                     data-cc-on-file="false"

                                                    data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"

                                                    id="payment-form">

                        @csrf

  

                        <div class='form-row row'>

                            <div class='col-xs-12 form-group required'>

                                <label class='control-label'>Name on Card</label> <input

                                    class='form-control' size='4' type='text'>

                            </div>

                        </div>

  

                        <div class='form-row row'>

                            <div class='col-xs-12 form-group card required'>

                                <label class='control-label'>Card Number</label> <input

                                    autocomplete='off' class='form-control card-number' size='20'

                                    type='text'>

                            </div>

                        </div>

  

                        <div class='form-row row'>

                            <div class='col-xs-12 col-md-4 form-group cvc required'>

                                <label class='control-label'>CVC</label> <input autocomplete='off'

                                    class='form-control card-cvc' placeholder='ex. 311' size='4'

                                    type='text'>

                            </div>

                            <div class='col-xs-12 col-md-4 form-group expiration required'>

                                <label class='control-label'>Expiration Month</label> <input

                                    class='form-control card-expiry-month' placeholder='MM' size='2'

                                    type='text'>

                            </div>

                            <div class='col-xs-12 col-md-4 form-group expiration required'>

                                <label class='control-label'>Expiration Year</label> <input

                                    class='form-control card-expiry-year' placeholder='YYYY' size='4'

                                    type='text'>

                            </div>

                        </div>

  

                        <div class='form-row row'>

                            <div class='col-md-12 error form-group hide'>

                                <div class='alert-danger alert'>Please correct the errors and try

                                    again.</div>

                            </div>

                        </div>

  

                        <div class="row">

                            <div class="col-xs-12">

                                <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now ($100)</button>

                            </div>

                        </div>

                          

                    </form>

                </div>

            </div>        

        </div>

    </div>

      

</div>

  

</body>

  

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

  

<script type="text/javascript">

$(function() {

    var $form         = $(".require-validation");

  $('form.require-validation').bind('submit', function(e) {

    var $form         = $(".require-validation"),

        inputSelector = ['input[type=email]', 'input[type=password]',

                         'input[type=text]', 'input[type=file]',

                         'textarea'].join(', '),

        $inputs       = $form.find('.required').find(inputSelector),

        $errorMessage = $form.find('div.error'),

        valid         = true;

        $errorMessage.addClass('hide');

 

        $('.has-error').removeClass('has-error');

    $inputs.each(function(i, el) {

      var $input = $(el);

      if ($input.val() === '') {

        $input.parent().addClass('has-error');

        $errorMessage.removeClass('hide');

        e.preventDefault();

      }

    });

  

    if (!$form.data('cc-on-file')) {

      e.preventDefault();

      Stripe.setPublishableKey($form.data('stripe-publishable-key'));

      Stripe.createToken({

        number: $('.card-number').val(),

        cvc: $('.card-cvc').val(),

        exp_month: $('.card-expiry-month').val(),

        exp_year: $('.card-expiry-year').val()

      }, stripeResponseHandler);

    }

  

  });

  

  function stripeResponseHandler(status, response) {

        if (response.error) {

            $('.error')

                .removeClass('hide')

                .find('.alert')

                .text(response.error.message);

        } else {

            var token = response['id'];

            $form.find('input[type=text]').empty();

            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");

            $form.get(0).submit();

        }

    }

  

});

</script>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

<!DOCTYPE html>

<html>

<head>

<title>W3Adda - Laravel 5.8 Stripe Payment Gateway Integration</title>

.panel-title {

display: inline;

font-weight: bold;

}

.display-table {

display: table;

}

.display-tr {

display: table-row;

}

.display-td {

display: table-cell;

vertical-align: middle;

width: 61%;

}

</style>

</head>

<body>

<h1 style="text-align: center;">W3Adda - Laravel 5.8 Stripe Payment Gateway Integration</h1>

<h3 class="panel-title display-td" >Payment Details</h3>

</div>

@if (Session::has('success'))

<p>{{ Session::get('success') }}</p>

</div>

@endif

<form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation"

data-cc-on-file="false"

data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"

id="payment-form">

@csrf

<label class='control-label'>Name on Card</label> <input

class='form-control' size='4' type='text'>

</div>

<label class='control-label'>Card Number</label> <input

autocomplete='off' class='form-control card-number' size='20'

type='text'>

</div>

<label class='control-label'>CVC</label> <input autocomplete='off'

class='form-control card-cvc' placeholder='ex. 311' size='4'

type='text'>

</div>

<label class='control-label'>Expiration Month</label> <input

class='form-control card-expiry-month' placeholder='MM' size='2'

type='text'>

</div>

<label class='control-label'>Expiration Year</label> <input

class='form-control card-expiry-year' placeholder='YYYY' size='4'

type='text'>

</div>

<div class='alert-danger alert'>Please correct the errors and try

again.</div>

</div>

</div>

</form>

</div>

</body>

$(function() {

var $form = $(".require-validation");

$('form.require-validation').bind('submit', function(e) {

var $form = $(".require-validation"),

inputSelector = ['input[type=email]', 'input[type=password]',

'input[type=text]', 'input[type=file]',

'textarea'].join(', '),

$inputs = $form.find('.required').find(inputSelector),

$errorMessage = $form.find('div.error'),

valid = true;

$errorMessage.addClass('hide');

$('.has-error').removeClass('has-error');

$inputs.each(function(i, el) {

var $input = $(el);

if ($input.val() === '') {

$input.parent().addClass('has-error');

$errorMessage.removeClass('hide');

e.preventDefault();

}

});

if (!$form.data('cc-on-file')) {

e.preventDefault();

Stripe.setPublishableKey($form.data('stripe-publishable-key'));

Stripe.createToken({

number: $('.card-number').val(),

cvc: $('.card-cvc').val(),

exp_month: $('.card-expiry-month').val(),

exp_year: $('.card-expiry-year').val()

}, stripeResponseHandler);

}

});

function stripeResponseHandler(status, response) {

if (response.error) {

$('.error')

.removeClass('hide')

.find('.alert')

.text(response.error.message);

} else {

var token = response['id'];

$form.find('input[type=text]').empty();

$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");

$form.get(0).submit();

}

});

</script>

</html>

Set Routes

After this, we need to add following two routes in “routes/web.php” to display stripe payment form and to post the form data. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('stripe', 'PaymentController@stripe');
Route::post('stripe', 'PaymentController@stripePost')->name('stripe.post');

1 2	Route::get('stripe', 'PaymentController@stripe'); Route::post('stripe', 'PaymentController@stripePost')->name('stripe.post');

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/larablog/stripe

Output:-

laravel-stripe-payment-gateway-integration-4

Use the following test card details to test the payment.

Test Credit Card Info :-

Card No :- 4242424242424242 / 4012888888881881
Month :- Any future month
Year :- Any future Year
CVV :- Any 3 digit Number

laravel-stripe-payment-gateway-integration-5
On successful payment, you will get the “Payment Successful” message as per the screenshot –

laravel-stripe-payment-gateway-integration-6

How To Fix No application encryption key has been specified error In Laravel

Leave a reply

Fix No application encryption key has been specified error In Laravel

Sometime in laravel, when you created a fresh laravel project and trying to start development server you may encounter following error –

how to fix laravel RuntimeException No application encryption key has been specified

RuntimeException No application encryption key has been specified.

1	RuntimeException No application encryption key has been specified.

Fix:-

The easiest way to fix this error you need to set a key option in your config/app.php configuration file. You should use the following commands to generate this key and get the error fixed –

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

I hope this will fix the above error for you.

How to Fix Laravel Specified key was too long error

Leave a reply

How to Fix Laravel Specified key was too long error

In Laravel, sometimes when we run the following command we get “Specified key was too long error” as shown in the below screenshot, in this tutorial I will show you how to fix the “Specified key was too long error” error.

laravel-crud-example-specified-key-too-long-error

Easiest way to fix error is to locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

and inside the boot method set a default string length as given below –

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

So this is how my AppServiceProvider file looks like now –

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 /**
 * Bootstrap any application services.
 *
 * @return void
 */
 public function boot()
 {
 //
 Schema::defaultStringLength(191);

}

/**
 * Register any application services.
 *
 * @return void
 */
 public function register()
 {
 //
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

/**

* Bootstrap any application services.

* @return void

public function boot()

{

Schema::defaultStringLength(191);

}

/**

* Register any application services.

* @return void

public function register()

{

}

Now delete tables created and run the following command again –

php artisan migrate

1	php artisan migrate

I hope this will fix “Specified key was too long error” error.

Laravel 5.8 CRUD Tutorial With Example | Step By Step Tutorial For Beginners

Leave a reply

Laravel 5.8 CRUD Example

Install Laravel 5.8

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

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

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

Make sure you have composer installed.

laravel-5-7-crud-tutorial-with-example-1

Now, lets switch to the project directory and 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/

Output:-

laravel-5-7-crud-tutorial-with-example-2

In case if you get RuntimeException No application encryption key has been specified error, please follow the link to get it fix and run the above command again.

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara57blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara57blog

DB_USERNAME=root

DB_PASSWORD=

Create Database Table

Now, we have to define table schema for posts table. Open terminal and use the following artisan command to generate <timestamp>create_posts_table.php migration.

php artisan make:migration create_posts_table --create=posts

1	php artisan make:migration create_posts_table --create=posts

laravel-5-7-crud-tutorial-with-example-3

Once this command is executed you will find a migration file created under “database/migrations”

laravel-5-7-crud-tutorial-with-example-4

lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->string('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Run Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the posts table will be created in database along with migrations, password_resets and users table.

In case if you get Specified key was too long error , please follow the link to get it fix and run the above command again.

Create Resource Controller and Model

In this step, we will use the following command to create post resource controller and model together

php artisan make:controller PostController --resource --model=Post

1	php artisan make:controller PostController --resource --model=Post

Once the above command executed, it will create a resource controller file “PostController.php” in “app/Http/Controllers/” directory. Resource controller automatically creates a list of following methods together with their parameters –

Index()
Create()
Store()
Show()
Edit()
Update()
Destroy()

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        //
    }
}

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

}

/**

* Display the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function show(Post $post)

{

}

/**

* Show the form for editing the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function edit(Post $post)

{

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function update(Request $request, Post $post)

{

}

/**

* Remove the specified resource from storage.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function destroy(Post $post)

{

}

Above command also creates model file “Post.php” in app directory

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

}

Next, we have to assign fillable fields using fillable property inside Post.php file. Update app/Post.php with following code –

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
    protected $fillable = [

        'title', 'body'

    ];

}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = [

'title', 'body'

];

}

Create Resource Route

After this, we need to add resource route for post controller. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::resource('posts','PostController');

1	Route::resource('posts','PostController');

we can use the following artisan command to list all the routes –

php artisan route:<span class="hljs-built_in">list</span>

1	php artisan route:<span class="hljs-built_in">list</span>

Output:-

Create Blade Files

In this step, we will create application view files for the first create following two directories for blade files inside “resources/views/” directory –

layouts
posts

Next, create a main layout file “app.blade.php” in “resources/views/layouts/” directory and put the following code in it.

resources/views/layouts/app.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>W3Adda - Laravel 5.8 CRUD Example Tutorial</title>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
  	<h2>W3Adda - Laravel 5.8 CRUD Example</h2>
    @yield('content')
  </div>
  <script src="{{ asset('js/app.js') }}" type="text/js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>W3Adda - Laravel 5.8 CRUD Example Tutorial</title>

</head>

<body>

<h2>W3Adda - Laravel 5.8 CRUD Example</h2>

@yield('content')

</div>

</body>

</html>

Now, we will create following blade files in “resources/views/posts” directory for CRUD (Create, Retrieve, Update, Delete) operations.

1) create.blade.php

2) edit.blade.php

3) index.blade.php

4) show.blade.php

Create Operation

In this step, first we will create a view file named create.blade.php inside “resources/views/posts” directory and put the following code inside it –

resources/views/posts/create.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Create Post
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('posts.store') }}">
          <div class="form-group">
              @csrf
              <label for="title">Title:</label>
              <input type="text" class="form-control" name="title" id="title" />
          </div>
          <div class="form-group">
              <label for="price">Body:</label>
              <textarea name="body" id="body" class="form-control"></textarea>
              
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
      </form>
  </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

Create Post

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div><br />

@endif

@csrf

<label for="title">Title:</label>

</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

@endsection

Now open the PostController.php file, and modify the create function as following –

 public function create()
    {
        //
        return view('posts.create');
    }

public function create()

{

return view('posts.create');

}

Once we have created the blade file for create operation and modified the create method in PostController.php, 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/create

Output:-

laravel_5_8_crud_tutorial_with_example_1

Validate and Save Data

After this, we create a script to validate and save data in database upon form submission. Lets open the PostController.php file, and modify the store function as following –

public function store(Request $request)
    {
        //
        $request->validate([

        'title' => 'required',

        'body' => 'required',

        ]);

        Post::create($request->all());

        return redirect()->route('posts.index')

                ->with('success','Post created successfully.');

    }

public function store(Request $request)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

Post::create($request->all());

return redirect()->route('posts.index')

->with('success','Post created successfully.');

}

Restart the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, visit the following URL in browser to create a post –

http://localhost:8000/posts/create

Here, now if you press the submit button the without filling up the required data(title or body), the store method validates the form data and you will be not able to save data to database and notified with following errors –

laravel_5_8_crud_tutorial_with_example_2

And, if after filling up the post title and body you press the submit button the form data will be submitted to the store method in PostController.php. The store method validates the form data and insert into the post table –

laravel-5-7-crud-tutorial-with-example-7

Upon the successful submission we will redirected to the index method –

http://localhost:8000/posts/

Retrieve Data

In this step, we will create a two view file named index.blade.php and show.blade.php inside “resources/views/posts” directory two list all the posts created and to view them individually. Lets create the blade files and put the following code inside it –

resources/views/posts/index.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>

  <div class="card uper">

  <div class="card-header">
    <a class="btn btn-primary" href="{{ route('posts.create') }}"> Create New Post</a>
  </div>
 
  <div class="card-body">
    @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div><br />
  @endif
     <table class="table table-striped">
    <thead>
        <tr>
          <td>ID</td>
          <td>Post Title</td>
          <td>Post Body</td>
          <td colspan="3">Action</td>
        </tr>
    </thead>
    <tbody>
        @foreach($posts as $post)
        <tr>
            <td>{{$post->id}}</td>
            <td>{{$post->title}}</td>
            <td>{{$post->body}}</td>
            <td><a href="{{ route('posts.edit',$post->id)}}" class="btn btn-primary">Edit</a></td>
            <td><a class="btn btn-primary" href="{{ route('posts.show',$post->id) }}">Show</a></td>
            <td>
                <form action="{{ route('posts.destroy', $post->id)}}" method="post">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-danger" type="submit">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
  </div>
</div>
  
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

<a class="btn btn-primary" href="{{ route('posts.create') }}"> Create New Post</a>

</div>

@if(session()->get('success'))

</div><br />

@endif

<thead>

<tr>

<td>Post Title</td>

<td colspan="3">Action</td>

</tr>

</thead>

<tbody>

@foreach($posts as $post)

<tr>

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

<td><a href="{{ route('posts.edit',$post->id)}}" class="btn btn-primary">Edit</a></td>

<td>

<form action="{{ route('posts.destroy', $post->id)}}" method="post">

@csrf

@method('DELETE')

<button class="btn btn-danger" type="submit">Delete</button>

</form>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endsection

resources/views/posts/show.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    View Post


                <a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>

            
  </div>
  <div class="card-body">
     <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12">

            <div class="form-group">

                <strong>Title:</strong>

                {{ $post->title }}

            </div>

        </div>
       

        <div class="col-xs-12 col-sm-12 col-md-12">

            <div class="form-group">

                <strong>Body:</strong>

                {{ $post->body }}

            </div>

        </div>

    </div>
    
  </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

View Post

</div>

<strong>Title:</strong>

</div>

</div>

@endsection

Now open the PostController.php file, and modify the index and show function with following code –

index method:-

public function index()
    {
        //
        $posts = Post::all();

        return view('posts.index', compact('posts'));
    }

public function index()

{

$posts = Post::all();

return view('posts.index', compact('posts'));

}

show method:-

public function show(Post $post)
    {
        //
        return view('posts.show',compact('post'));
    }

public function show(Post $post)

{

return view('posts.show',compact('post'));

}

Restart the development server again, now you will be able to list all the posts and to view them individually.

Update Data

In the previous step, we already have a “Edit” button linked to edit action for each of the post respectively.In this step, we will create a view file named edit.blade.php inside “resources/views/posts” directory and put the following code inside it –

resources/views/posts/edit.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Edit Post
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('posts.update', $post->id) }}">
                @csrf

        @method('PUT')

        <div class="form-group">
          <label for="title">Title:</label>
          <input type="text" class="form-control" name="title" id="post_title" value={{ $post->title }} />
        </div>
        <div class="form-group">
          <label for="price">Body:</label>
          <textarea name="body" id="post_body" class="form-control">{{ $post->body }}</textarea>
        </div>
        
        <button type="submit" class="btn btn-primary">Update</button>
      </form>
  </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

Edit Post

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div><br />

@endif

@csrf

@method('PUT')

<label for="title">Title:</label>

<input type="text" class="form-control" name="title" id="post_title" value={{ $post->title }} />

</div>

</div>

<button type="submit" class="btn btn-primary">Update</button>

</form>

</div>

@endsection

Now open the PostController.php file, and modify the edit and update function with following code –

edit() Method:-

public function edit(Post $post)
    {
        //
        return view('posts.edit',compact('post'));
    }

public function edit(Post $post)

{

return view('posts.edit',compact('post'));

}

update() method:-

public function update(Request $request, Post $post)
    {
        //
        $request->validate([
        'title' => 'required',
        'body' => 'required',
        ]);

        $post->update($request->all());

        return redirect()->route('posts.index')->with('success','Post updated successfully');
    }

public function update(Request $request, Post $post)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

$post->update($request->all());

return redirect()->route('posts.index')->with('success','Post updated successfully');

}

The edit() renders the edit view for respective post with prefilled post data, upon the form submission the form data will be submitted to the update() method in PostController.php. The update() method validates the form data and update the post data, after the successful update operation we will redirected to the index method.

Delete Operation

For deleting the post, we already have a “Delete” action button linked to delete action for each of the post respectively.In this step there is no need to create a view file, we just have to open the PostController.php file, and modify the destroy() function with following code –

 public function destroy(Post $post)
    {
        //
        $post->delete();



        return redirect()->route('posts.index')

                ->with('success','Post deleted successfully');

    }

public function destroy(Post $post)

{

$post->delete();

return redirect()->route('posts.index')

->with('success','Post deleted successfully');

}

Now, when we click to the “Delete” action button, the respective post will be deleted.

Finally, the PostController.php file looks like this –

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $posts = Post::all();

        return view('posts.index', compact('posts'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        return view('posts.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $request->validate([

        'title' => 'required',

        'body' => 'required',

        ]);

        Post::create($request->all());

        return redirect()->route('posts.index')

                ->with('success','Post created successfully.');

    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        //
        return view('posts.show',compact('post'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        //
        return view('posts.edit',compact('post'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        //
        $request->validate([
        'title' => 'required',
        'body' => 'required',
        ]);

        $post->update($request->all());

        return redirect()->route('posts.index')->with('success','Post updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        //
        $post->delete();



        return redirect()->route('posts.index')

                ->with('success','Post deleted successfully');

    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$posts = Post::all();

return view('posts.index', compact('posts'));

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

return view('posts.create');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

Post::create($request->all());

return redirect()->route('posts.index')

->with('success','Post created successfully.');

}

/**

* Display the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function show(Post $post)

{

return view('posts.show',compact('post'));

}

/**

* Show the form for editing the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function edit(Post $post)

{

return view('posts.edit',compact('post'));

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function update(Request $request, Post $post)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

$post->update($request->all());

return redirect()->route('posts.index')->with('success','Post updated successfully');

}

/**

* Remove the specified resource from storage.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function destroy(Post $post)

{

$post->delete();

return redirect()->route('posts.index')

->with('success','Post deleted successfully');

}

Now we have a working Laravel 5.8 CRUD Application ready, restart the development server using following artisan command –

php artisan serve

1	php artisan serve

and visit the following URL in browser to see the complete Laravel 5.7 CRUD Application in action –

http://localhost:8000/posts/

laravel_5_8_crud_tutorial_with_example_3

Laravel 5.7 CRUD Example | Step By Step Tutorial For Beginners

Leave a reply

Laravel 5.7 CRUD Example

Install Laravel 5.7

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

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

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

Make sure you have composer installed.

laravel-5-7-crud-tutorial-with-example-1

Now, lets switch to the project directory and 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/create

Output:-

laravel-5-7-crud-tutorial-with-example-2

In case if you get RuntimeException No application encryption key has been specified error, please follow the link to get it fix and run the above command again.

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara57blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara57blog

DB_USERNAME=root

DB_PASSWORD=

Create Database Table

Now, we have to define table schema for posts table. Open terminal and use the following artisan command to generate <timestamp>create_posts_table.php migration.

php artisan make:migration create_posts_table --create=posts

1	php artisan make:migration create_posts_table --create=posts

laravel-5-7-crud-tutorial-with-example-3

Once this command is executed you will find a migration file created under “database/migrations”

laravel-5-7-crud-tutorial-with-example-4

lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->string('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Run Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the posts table will be created in database along with migrations, password_resets and users table.

In case if you get Specified key was too long error , please follow the link to get it fix and run the above command again.

Create Resource Controller and Model

In this step, we will use the following command to create post resource controller and model together

php artisan make:controller PostController --resource --model=Post

1	php artisan make:controller PostController --resource --model=Post

Index()
Create()
Store()
Show()
Edit()
Update()
Destroy()

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        //
    }
}

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

}

/**

* Display the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function show(Post $post)

{

}

/**

* Show the form for editing the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function edit(Post $post)

{

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function update(Request $request, Post $post)

{

}

/**

* Remove the specified resource from storage.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function destroy(Post $post)

{

}

Above command also creates model file “Post.php” in app directory

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

}

Next, we have to assign fillable fields using fillable property inside Post.php file. Update app/Post.php with following code –

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
    protected $fillable = [

        'title', 'body'

    ];

}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = [

'title', 'body'

];

}

Create Resource Route

After this, we need to add resource route for post controller. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::resource('posts','PostController');

1	Route::resource('posts','PostController');

we can use the following artisan command to list all the routes –

php artisan route:<span class="hljs-built_in">list</span>

1	php artisan route:<span class="hljs-built_in">list</span>

Output:-

Create Blade Files

In this step, we will create application view files for the first create following two directories for blade files inside “resources/views/” directory –

layouts
posts

Next, create a main layout file “app.blade.php” in “resources/views/layouts/” directory and put the following code in it.

resources/views/layouts/app.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>W3Adda - Laravel 5.7 CRUD Example Tutorial</title>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
  	<h2>W3Adda - Laravel 5.7 CRUD Example</h2>
    @yield('content')
  </div>
  <script src="{{ asset('js/app.js') }}" type="text/js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>W3Adda - Laravel 5.7 CRUD Example Tutorial</title>

</head>

<body>

<h2>W3Adda - Laravel 5.7 CRUD Example</h2>

@yield('content')

</div>

</body>

</html>

Now, we will create following blade files in “resources/views/posts” directory for CRUD (Create, Retrieve, Update, Delete) operations.

1) create.blade.php

2) edit.blade.php

3) index.blade.php

4) show.blade.php

Create Operation

In this step, first we will create a view file named create.blade.php inside “resources/views/posts” directory and put the following code inside it –

resources/views/posts/create.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Create Post
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('posts.store') }}">
          <div class="form-group">
              @csrf
              <label for="title">Title:</label>
              <input type="text" class="form-control" name="title" id="title" />
          </div>
          <div class="form-group">
              <label for="price">Body:</label>
              <textarea name="body" id="body" class="form-control"></textarea>
              
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
      </form>
  </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

Create Post

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div><br />

@endif

@csrf

<label for="title">Title:</label>

</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

@endsection

Now open the PostController.php file, and modify the create function as following –

 public function create()
    {
        //
        return view('posts.create');
    }

public function create()

{

return view('posts.create');

}

Once we have created the blade file for create operation and modified the create method in PostController.php, 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/create

Output:-

laravel-5.7-crud-tutorial-with-example-5

Validate and Save Data

After this, we create a script to validate and save data in database upon form submission. Lets open the PostController.php file, and modify the store function as following –

public function store(Request $request)
    {
        //
        $request->validate([

        'title' => 'required',

        'body' => 'required',

        ]);

        Post::create($request->all());

        return redirect()->route('posts.index')

                ->with('success','Post created successfully.');

    }

public function store(Request $request)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

Post::create($request->all());

return redirect()->route('posts.index')

->with('success','Post created successfully.');

}

Restart the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, visit the following URL in browser to create a post –

http://localhost:8000/posts/create

laravel-5-7-crud-tutorial-with-example-6

laravel-5-7-crud-tutorial-with-example-7

Upon the successful submission we will redirected to the index method –

http://localhost:8000/posts/

Retrieve Data

resources/views/posts/index.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>

  <div class="card uper">

  <div class="card-header">
    <a class="btn btn-primary" href="{{ route('posts.create') }}"> Create New Post</a>
  </div>
 
  <div class="card-body">
    @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div><br />
  @endif
     <table class="table table-striped">
    <thead>
        <tr>
          <td>ID</td>
          <td>Post Title</td>
          <td>Post Body</td>
          <td colspan="3">Action</td>
        </tr>
    </thead>
    <tbody>
        @foreach($posts as $post)
        <tr>
            <td>{{$post->id}}</td>
            <td>{{$post->title}}</td>
            <td>{{$post->body}}</td>
            <td><a href="{{ route('posts.edit',$post->id)}}" class="btn btn-primary">Edit</a></td>
            <td><a class="btn btn-primary" href="{{ route('posts.show',$post->id) }}">Show</a></td>
            <td>
                <form action="{{ route('posts.destroy', $post->id)}}" method="post">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-danger" type="submit">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
  </div>
</div>
  
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

<a class="btn btn-primary" href="{{ route('posts.create') }}"> Create New Post</a>

</div>

@if(session()->get('success'))

</div><br />

@endif

<thead>

<tr>

<td>Post Title</td>

<td colspan="3">Action</td>

</tr>

</thead>

<tbody>

@foreach($posts as $post)

<tr>

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

<td><a href="{{ route('posts.edit',$post->id)}}" class="btn btn-primary">Edit</a></td>

<td>

<form action="{{ route('posts.destroy', $post->id)}}" method="post">

@csrf

@method('DELETE')

<button class="btn btn-danger" type="submit">Delete</button>

</form>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endsection

resources/views/posts/show.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    View Post


                <a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>

            
  </div>
  <div class="card-body">
     <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12">

            <div class="form-group">

                <strong>Title:</strong>

                {{ $post->title }}

            </div>

        </div>
       

        <div class="col-xs-12 col-sm-12 col-md-12">

            <div class="form-group">

                <strong>Body:</strong>

                {{ $post->body }}

            </div>

        </div>

    </div>
    
  </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

View Post

</div>

<strong>Title:</strong>

</div>

</div>

@endsection

Now open the PostController.php file, and modify the index and show function with following code –

index method:-

public function index()
    {
        //
        $posts = Post::all();

        return view('posts.index', compact('posts'));
    }

public function index()

{

$posts = Post::all();

return view('posts.index', compact('posts'));

}

show method:-

public function show(Post $post)
    {
        //
        return view('posts.show',compact('post'));
    }

public function show(Post $post)

{

return view('posts.show',compact('post'));

}

Restart the development server again, now you will be able to list all the posts and to view them individually.

Update Data

resources/views/posts/edit.blade.php

@extends('layouts.app')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Edit Post
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('posts.update', $post->id) }}">
                @csrf

        @method('PUT')

        <div class="form-group">
          <label for="title">Title:</label>
          <input type="text" class="form-control" name="title" id="post_title" value={{ $post->title }} />
        </div>
        <div class="form-group">
          <label for="price">Body:</label>
          <textarea name="body" id="post_body" class="form-control">{{ $post->body }}</textarea>
        </div>
        
        <button type="submit" class="btn btn-primary">Update</button>
      </form>
  </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<style>

.uper {

margin-top: 40px;

}

</style>

Edit Post

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div><br />

@endif

@csrf

@method('PUT')

<label for="title">Title:</label>

<input type="text" class="form-control" name="title" id="post_title" value={{ $post->title }} />

</div>

</div>

<button type="submit" class="btn btn-primary">Update</button>

</form>

</div>

@endsection

Now open the PostController.php file, and modify the edit and update function with following code –

edit() Method:-

public function edit(Post $post)
    {
        //
        return view('posts.edit',compact('post'));
    }

public function edit(Post $post)

{

return view('posts.edit',compact('post'));

}

update() method:-

public function update(Request $request, Post $post)
    {
        //
        $request->validate([
        'title' => 'required',
        'body' => 'required',
        ]);

        $post->update($request->all());

        return redirect()->route('posts.index')->with('success','Post updated successfully');
    }

public function update(Request $request, Post $post)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

$post->update($request->all());

return redirect()->route('posts.index')->with('success','Post updated successfully');

}

Delete Operation

 public function destroy(Post $post)
    {
        //
        $post->delete();



        return redirect()->route('posts.index')

                ->with('success','Post deleted successfully');

    }

public function destroy(Post $post)

{

$post->delete();

return redirect()->route('posts.index')

->with('success','Post deleted successfully');

}

Now, when we click to the “Delete” action button, the respective post will be deleted.

Finally, the PostController.php file looks like this –

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $posts = Post::all();

        return view('posts.index', compact('posts'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        return view('posts.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $request->validate([

        'title' => 'required',

        'body' => 'required',

        ]);

        Post::create($request->all());

        return redirect()->route('posts.index')

                ->with('success','Post created successfully.');

    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        //
        return view('posts.show',compact('post'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        //
        return view('posts.edit',compact('post'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        //
        $request->validate([
        'title' => 'required',
        'body' => 'required',
        ]);

        $post->update($request->all());

        return redirect()->route('posts.index')->with('success','Post updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        //
        $post->delete();



        return redirect()->route('posts.index')

                ->with('success','Post deleted successfully');

    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$posts = Post::all();

return view('posts.index', compact('posts'));

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

return view('posts.create');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

Post::create($request->all());

return redirect()->route('posts.index')

->with('success','Post created successfully.');

}

/**

* Display the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function show(Post $post)

{

return view('posts.show',compact('post'));

}

/**

* Show the form for editing the specified resource.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function edit(Post $post)

{

return view('posts.edit',compact('post'));

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function update(Request $request, Post $post)

{

$request->validate([

'title' => 'required',

'body' => 'required',

]);

$post->update($request->all());

return redirect()->route('posts.index')->with('success','Post updated successfully');

}

/**

* Remove the specified resource from storage.

* @param \App\Post $post

* @return \Illuminate\Http\Response

public function destroy(Post $post)

{

$post->delete();

return redirect()->route('posts.index')

->with('success','Post deleted successfully');

}

Now we have a working Laravel 5.7 CRUD Application ready, restart the development server using following artisan command –

php artisan serve

1	php artisan serve

and visit the following URL in browser to see the complete Laravel 5.7 CRUD Application in action –

http://localhost:8000/posts/

laravel_crud_tutorial_with_example_read_operation