CRUD JQuery Ajax MySQL PhpStorm

Description

Laravel CRUD (create retrieve update delete) with jQuery Ajax MySQL PhpStorm It is easy and complete video tutorial for beginners. Step by step designed in Ph

Laravel CRUD Operations

In this tutorial we are going to initiate Laravel CRUD operations project for learning.

Note: Before you start install laravel you need to install composer package installer in your system. Follow the steps.

Step 1: Composer Installation

To Install composer in your system click here

Step 2: Create new project via Composer

For creating a new project via a composer. you need to run a command in command line console or terminal.

cmd: composer create-project --prefer-dist laravel/laravel mysite

Note: You will see list of directories where you run above command. let's discuss most important directories.

app - this directory contains list of models, http > controllers directory. This is a important directory where you write a controller and model.
public - this directory contains assets like Image files, CSS files, Script files.
resources - this directory contains views.
routes - this directory contains all routes. Routes for specific URL.
.env - this file contains configuration for database.

Step 3: Start a local server

There is also command for starting a server.

cmd: php artisan serve

Step 3: Create database

Create database with name of crud.
Create database table books.

	CREATE SCHEMA `new_schema` ;

CREATE TABLE `books` (
   `book_id` int(11) NOT NULL AUTO_INCREMENT,
   `book_name` varchar(45) DEFAULT NULL,
   `book_price` decimal(4,0) DEFAULT NULL,
   PRIMARY KEY (`book_id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Step 4: Set Connection with database

Set the database name like crud
Set the username like root
Set the password if there is.

filename: .env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost

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

BROADCAST_DRIVER=log
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=

Step 5: Create Controller

define a function for getting welcome file.
define a function for save or update a book model.
define a function to retrieve list of books.
define a method to delete a book.

filename: Controller.php

<?php
namespace App\Http\Controllers;

use App\Books;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;

class Controller extends BaseController
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
    public function getIndex(){
        return view("welcome");
    }

    public function saveOrUpdate(Request $request){
        $book = new Books;
        if($request->book_id){
            $book = Books::find($request->book_id);
        }
        $book->book_name = $request->name;
        $book->book_price = $request->price;
        $result = $book->saveOrFail();
        if($result){
            return response()->json(array('message'=>'Record successfully saved or updated'));
        }else{
            return response()->json(array('message'=>'Failed to saved or updated'));
        }
    }

    public function getList(){
        $books = Books::all();
        return response()->json(array('data' => $books));
    }

    public function deleteRecord(Request $request){
        $book = Books::find($request->book_id);
        $book->delete();
        return response()->json(array('message'=>'Record deleted successfully!'));
    }
}

Step 6: Create a view

create a view for showing data table and form for input.
add jQuery for manipulation of adding, deleting and showing data in view.

filename: welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <title>Laravel</title>
    </head>

    <body onload="load();">
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <input type="hidden" id="book_id">
        Book Name <input type="text" id="name" required="required" name="name"><br>
        Price: <input type="number" id="price" required="required" name="price"><br>
        <button onclick="submit();">Submit</button>

        <table id="table" border=1>
            <tr> <th> Name </th> <th> Price </th> <th> Edit </th> <th> Delete </th> </tr>
        </table>

        <script type="text/javascript">

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

            data = "";
            submit = function(){
                    $.ajax({
                        url:'api/saveOrUpdate',
                        type:'POST',
                        data:{book_id:$("#book_id").val(),name:$('#name').val(),price:$('#price').val()},
                        success: function(response){
                            alert(response.message);
                            load();
                        }
                    });
                };

            load = function(){
                $.ajax({
                    url:'api/list',
                    type:'POST',
                    success: function(response){
                        data = response.data;
                        $('.tr').remove();
                        for(i=0; i<response.data.length; i++){
                            $("#table").append("<tr class='tr'> <td> "+response.data[i].book_name+" </td> <td> "+response.data[i].book_price+" </td> <td> <a href='#' onclick= edit("+i+");> Edit </a>  </td> </td> <td> <a href='#' onclick='delete_("+response.data[i].book_id+");'> Delete </a>  </td> </tr>");
                        }
                    }
                });
            };

            edit = function (index){
                $("#book_id").val(data[index].book_id);
                $("#name").val(data[index].book_name);
                $("#price").val(data[index].book_price);
            };

            delete_ = function(id){
                $.ajax({
                    url:'api/delete',
                    type:'POST',
                    data:{book_id:id},
                    success: function(response){
                        alert(response.message);
                        load();
                    }
                });
            }

        </script>
    </body>
</html>

Step 7: Finally update Route web.php and api.php

update web.php file for getting main view to display.
update api.php file for api level operations.

filename: web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/','Controller@getIndex')->name('index');

filename: api.php

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('saveOrUpdate','Controller@saveOrUpdate')->name('saveOrUpdate');
Route::post('list','Controller@getList')->name('list');
Route::post('delete','Controller@deleteRecord')->name('delete');

Note: If do you need help for developing and creating this application, please comment blow so that we may reach you or reply you as asap.