Laravel 5 – Simple CRUD Application Using ReactJS – Part 1

Laravel 5 – Simple CRUD Application Using ReactJS – Part 1

In this post we will give you information about Laravel 5 – Simple CRUD Application Using ReactJS – Part 1. Hear we will give you detail about Laravel 5 – Simple CRUD Application Using ReactJS – Part 1And how to use it also give you demo for it if it is necessary.

In this post, i want to share with you how to create crud(Create Read Update Delete) application with react js in PHP Laravel framework. In this example you can learn how to built setup for laravel reactjs application, I also used axios post request, get request, put request and delete request for insert update delete application.

we always would like to prefer make setup for any javascript framework like vuejs, angularjs, reactjs etc. here i share with you basic setup for react and laravel with crud application. You have to just follow following 9 step as listed bellow:

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)

Also see:PHP AngularJS CRUD with Search and Pagination Example From Scratch

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

Also see:Laravel 5 – Simple CRUD Application Using ReactJS – Part 2

<?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.

Hope this code and post will helped you for implement Laravel 5 – Simple CRUD Application Using ReactJS – Part 1. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

7  +  2  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US