Laravel CRUD Using jQuery AJAX PART – 1

Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern.

Today, I will give you some little demo on the Laravel CRUD using the jQuery AJAX.

Before I start, I Want to clarify that the people who are too much greedy to know how it will be done and already know Laravel, They can directly click here to know about the How to call perform the CURD with the jQuery.

So let’s First create the new Laravel project with name “CRUDWithJQuery”, You have to create this project inside the www folder of the WAMP server (Here I am using the WAMP server). So open the command prompt and set the path to the www folder. (I hope you already configured the Laravel and composer for the Laravel project)

laravel new CRUDWithJQuery

It will create the new project for you. It’s directory structure look like this:

Laravel CRUD using jQuery AJAX

Laravel CRUD using jQuery AJAX

after that you have to copy paste the .env.example file and give the name of the file .env only.

Laravel CRUD using jQuery AJAX

Laravel CRUD using jQuery AJAX

Now open that file and give the 32 character long key to APP_KEY and set the all properties of the MySQL connection.

Laravel CRUD using jQuery AJAX

Laravel CRUD using jQuery AJAX

I already created one blank database named “book” inside the phpMyAdmin(MySQL). Please create that one also.

Now in command prompt change the path to the CRUDWithJQuery directory, the directory which is created by the Laravel for your new project.

After that fired below command to create the migration file for the our new table called “book”.

php artisan make:migration create_book_table

This command will create the one new blank file inside the database->migration folder with prefix time span.

Laravel CRUD using jQuery AJAX

Laravel CRUD using jQuery AJAX

Now change the replace the code of that file with the following code.

File Name: 2016_08_14_100353_create_book_table.php

<?php

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

class CreateBookTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('Book',function(Blueprint $table){
          $table->bigIncrements("ID");
          $table->string("BookName");
          $table->string("AuthorName");
          $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
	{
        Schema::drop("Book");
    }
}

After that we have to execute the below command on the command prompt to create the table inside the MySQL server.

php artisan migrate

Above command will create the new table inside the book database with the “book” name.

Now we have to create the model class for the book table. So we have to execute the below command on the command prompt.

php artisan make:model Book

It will create the model class with name Book inside the app folder.

Laravel CRUD using jQuery AJAX

Laravel CRUD using jQuery AJAX

Now change the code of the Book class with the following code.
File Name: Book.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    //
    protected $table = "book";
}

Now we have to create the controller, that will handle all the requests coming form the client. For creating controller we have to execute the below command on the command prompt.

php artisan make:controller BookController

It will create the BookController class inside the app->Http->Controllers folder.

Laravel CRUD using jQuery AJAX

Laravel CRUD using jQuery AJAX

Now change the code of the BookController class with the below code.
File Name: BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Book;
use Validator;
use DB;

class BookController extends Controller
{
    public function AddBook(Request $request)
	{
        $rules=
		[
            'txtBookName'=>'required',
            'txtAuthorName'=>'required',
        ];

        $messages=
		[
            'txtBookName.required'=>'Please, Enter book name.',
            'txtAuthorName.required'=>'Please, Enter author name.',
        ];

        $validator=Validator::make($request->all(),$rules,$messages);

		if($validator->fails())
		{
          return $validator;
        }

        $book = new Book;
        $book->BookName=$request->txtBookName;
        $book->AuthorName=$request->txtAuthorName;

        $book->save();

        $success=
		[
          "Book is successfully saved!!!"
        ];

        return $success;
    }

    public function GetBooks(Request $request)
	{
      return DB::table('book')->orderBy('id','desc')->get();
    }

    public function UpdateView($id)
	{
      $books = DB::table('book')->where('id',$id)->get();
      if(count($books)>0)
	  {
        return view('update')->with("data",$books[0]);
      }
      else
	  {
        return redirect('/');
      }
    }

    public function UpdateBook(Request $request)
	{
      $id = $request->ID;
      $bookName = $request->txtBookName;
      $AuthorName = $request->txtAuthorName;

      DB::table('book')->where('ID',$id)->update(['BookName'=>$bookName, 'AuthorName'=>$AuthorName]);

      return "Book is successfully updated!!!";
    }

    public function DeleteView($id)
	{
      $books = DB::table('book')->where('id',$id)->get();
      if(count($books)>0)
	  {
        return view('delete')->with("data",$books[0]);
      }
      else
	  {
        return redirect('/');
      }
    }

    public function DeleteBook(Request $request)
	{
      DB::table('book')->where('ID',$request->id)->delete();

      return "Book is successfully deleted!!!";
    }
}

Above code have the different different methods that will help us to handle the various types of request that come from the client like the request for the Add book, Delete book, Update book and Display books on the screen.

Now let’s register all the routes that will help us to display the specific page on the screen. So now open the routes.php files located inside the app folder and replace the code of that file with the following code.
File Name : routes.php

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/

Route::get('/', function () {
    return view('CRUD');
});

Route::get('/Update/{id}', 'BookController@UpdateView');

Route::post('/Update', 'BookController@UpdateBook');

Route::post('/AddBook', 'BookController@AddBook');

Route::get('/AllBooks', 'BookController@GetBooks');

Route::get('/Delete/{id}', 'BookController@DeleteView');

Route::post('/Delete', 'BookController@DeleteBook');

I hope you enjoyed the article till this and I hope you also noticed that we done all the server side of the Laravel project means all the CRUD related code is done below, Now the only client side AJXA code is left. For that please click here.

Happy Coding…

🙂