Laravel 5 – Simple CRUD Application Using ReactJS – Part 1

1) Step 1 : Install Laravel 5.5

2) Step 2 : Database Configuration

3) Step 3 : Create products Table and Model

4) Step 4 : Create Web Route and API Route

5) Step 5 : Create ProductController

6) Step 6 : Install Configuration For ReactJS

7) Step 7 : Create React Components Files

8) Step 8 : Create Main Blade File

9) Step 9 : Run Project

After successfully all step you will get crud application like as bellow screen shot i attached.

Preview:

Step 1 : Install Laravel 5.5

we are going from scratch, So we require to get fresh Laravel 5.5 version application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Database Configuration

In second step, we should make database configuration for example database name, username, password etc for our crud application of laravel 5.5. So let’s open .env file and fill all details like as bellow:

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)

Step 3: Create products Table and Model

we are going to create crud application for products table with react js. so we have to create migration for products table using Laravel 5.5 php artisan command, so first fire bellow command:

php artisan make:migration create_products_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create products table.

<?php

use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

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

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

After creating table we have to create model for “products” table so just run bellow command and create new model:

php artisan make:model Product

Ok, so after run bellow command you will find app/Product.php and put bellow content in Product.php file:

app/Product.php

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Product extends Model
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 4: Create Web Route and API Route

In this is step we need to add web route and also api route for products. so open your routes/web.php file and add following route.

routes/web.php

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

routes/api.php

Route::resource('products', 'ProductController');

Step 5 : Create ProductController

In this step, we need create new controller as ProductController. So run bellow command and create new controller. bellow controller for create resource controller.

php artisan make:controller ProductController -resource

After bellow command you will find new file in this path app/Http/Controllers/ProductController.php.

In this controller will write code for following method:

1)index()

2)store()

3)edit()

4)update()

5)destroy()

So, let’s copy bellow code and put on ProductController.php file.

app/Http/Controllers/ProductController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppProduct;

class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        $products = Product::all();
        return response()->json($products);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        $product = new Product([
          'title' => $request->get('title'),
          'body' => $request->get('body')
        ]);
        $product->save();

        return response()->json('Product Added Successfully.');
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        $product = Product::find($id);
        return response()->json($product);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function update(Request $request, $id)
    {
        $product = Product::find($id);
        $product->title = $request->get('title');
        $product->body = $request->get('body');
        $product->save();

        return response()->json('Product Updated Successfully.');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function destroy($id)
    {
      $product = Product::find($id);
      $product->delete();

      return response()->json('Product Deleted Successfully.');
    }
}

Next we have following rest of step :

6) Step 6 : Install Configuration For ReactJS

7) Step 7 : Create React Components Files

8) Step 8 : Create Main Blade File

9) Step 9 : Run Project

You can see above left step on next link, so click bellow next button.