Home Laravel 9 Laravel 9 React Complete CRUD Application

Laravel 9 React Complete CRUD Application

19 min read
0
0
930

This tutorial will teach you how to make simple Crud Application using Laravel 9 with React Frontend application using Api access Crud application.

First Step What you have to do is you to divide the Front-End and Back-End.

Front-End – React JS

Back-End – Laravel

Create the folder myprojects. inside the folder frond end project you maintaing with the seperate folder.
backend project

Install Laravel 9

Create  a new Project type  the command on the command prompt  . I create the project name Office

type the command office-backend

After Type the Command you have to wait till the project has been created. in this example i gave the project name as office-app. instead of that you have to give office-backend

after created the project you will get the success message i attached the screen shot below.

Second Step : You have to create the database so you have to go the mysql by typing the browser address bar http://localhost/phpmyadmin  then you will get the database dashboard after that you have to create the new database. I attached the screen shot image below.in this example i have create the database name is office.

after create the database.you have to open your project into Visual Studio Code Editor. after that you have to configure the database details into Laravel project .env file. i attach the database details below.

in this section DB-DATABASE  you have to give the name of the database which you have created.

After that run and check the application of the welcome screen of Laravel framework look like this.

Create Migration

Create the tables by typing this command

After that inside  database folder create_employees_table.php  migrations  file has been created.  you can open the file.

Click and open the create_employees_table.php file. you can see by default look like this.

then you have to create the following fields.

$table->string(‘name’);

$table->string(‘address’);

$table->string(‘mobile’);

inside the function up() .function i shown in below clearly.

After that type the following command on the console.

the table has been created.you can check on the database.

Create Controller

Create the controller name which is EmployeeController

after that open up the EmployeeController

EmployeeController

All view pages are manageable through the Controller. you have to add the Model namespace here

use App\Models\Employee  Data is coming from the database via the Model. Model is the part where communicate the with database to pass the data to the controller.

In the Employee Controller we have 4 different  functions(Index,Store,Update,destroy) shall able to perform  the Crud operations.

Lets Learn by On by One

index() Function : inside the index function we have written following codes.

Employee::all(); in this code snippet describes get all the Employee details from Model Class which name is Employee and assign to $employees variable and pass as Json Format.

store() Function : public function store(Request $request) : in this code snippet describes when fill the form on the Front End(Vue JS) click Save button all the form data come and store variable $request.then set Form variable to database tables columns then assign to $employees variables.after that call $employees->save(); then record insert successfully get the response as json format.

Update() Function :  public function update(Request $request, $id) : in this code snippet describes when we make the changes of the  form on the Front End(Vue JS) click Save button all the form data come and store variable $request  along the $id variable. then set all the Form variable to database tables columns match with id find($id); variable.after that call $employees->update(); then record update successfully get the response as json format.

destroy($id) Function  : public function destroy($id) in this code snippet describes when click the delete button on the table row of the Front End(Vue JS) application  get the id of row record and find($id); method to find the id. then delete the entire row records.

Full Code of the EmployeeController

Create Model

Model is used to get the data from the database.

Create the Model name which is Employee

After Model is Created the look like this. Code inside Model Class(app\Models)

Change it as like this

Add the namespace above

After that set Routes

go to the folder Routes inside folder select Routes file as api.php 

Now BackEnd Part is Done. let’s start the Frond-End Part

React

Installing React

After complete the installation and run the project using following command.

Now you see the React Welcome Page.

After that open the React project into VS code editor.

now you can see the following file structure

After that install the Bootstrap by typing the following command

After that install the axios by typing the following command

Creating a new Component Employee.

Paste code inside the app.js

App.js

i have attached the video link below. which will do this tutorials step by step.

 

 

    Load More Related Articles
    Load More By admin
    Load More In Laravel 9

    Leave a Reply

    Your email address will not be published.

    Check Also

    Node js React Mongodb Search Functionality

    In this articles will teach how to search records Node js React Express Mongodb.how the se…