Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Database Migration
C:\xampp\htdocs\laravel\my-app>php artisan migrate
php artisan tinker
User::factory()->count(50)->create()
Create Controller
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller UserController
app\Http\Controllers\UserController.php
//app\Http\Controllers\UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use App\Http\Requests\UserStoreRequest;
class UserController extends Controller
{
public function index()
{
$users = User::all();
// Return Json Response
return response()->json([
'results' => $users
],200);
}
public function store(UserStoreRequest $request)
{
try {
// Create User
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => $request->password
]);
// Return Json Response
return response()->json([
'message' => "User successfully created."
],200);
} catch (\Exception $e) {
// Return Json Response
return response()->json([
'message' => "Something went really wrong!"
],500);
}
}
public function show($id)
{
// User Detail
$users = User::find($id);
if(!$users){
return response()->json([
'message'=>'User Not Found.'
],404);
}
// Return Json Response
return response()->json([
'users' => $users
],200);
}
public function update(UserStoreRequest $request, $id)
{
try {
// Find User
$users = User::find($id);
if(!$users){
return users()->json([
'message'=>'User Not Found.'
],404);
}
//echo "request : $request->image";
$users->name = $request->name;
$users->email = $request->email;
// Update User
$users->save();
// Return Json Response
return response()->json([
'message' => "User successfully updated."
],200);
} catch (\Exception $e) {
// Return Json Response
return response()->json([
'message' => "Something went really wrong!"
],500);
}
}
public function destroy($id)
{
// Detail
$users = User::find($id);
if(!$users){
return response()->json([
'message'=>'User Not Found.'
],404);
}
// Delete User
$users->delete();
// Return Json Response
return response()->json([
'message' => "User successfully deleted."
],200);
}
}
php artisan make:request UserStoreRequest C:\xampp\htdocs\laravel\laravel10project>php artisan make:request UserStoreRequest
app\Http\Requests\UserStoreRequest.php
//app\Http\Requests\UserStoreRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class UserStoreRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*/
public function authorize(): bool
{
//return false;
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
*/
public function rules(): array
{
if(request()->isMethod('post')) {
return [
'name' => 'required|string|max:258',
'email' => 'required|string',
'password' => 'required|string'
];
} else {
return [
'name' => 'required|string|max:258',
'email' => 'required|string',
'password' => 'required|string'
];
}
}
public function messages()
{
if(request()->isMethod('post')) {
return [
'name.required' => 'Name is required!',
'email.required' => 'Email is required!'
'password.required' => 'password is required!'
];
} else {
return [
'name.required' => 'Name is required!',
'email.required' => 'email is required!'
'password.required' => 'password is required!'
];
}
}
}
routes/api.php
//
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::get('users', [UserController::class, 'index']);
Route::get('users/{id}', [UserController::class, 'show']);
Route::post('addnew', [UserController::class, 'store']);
Route::put('usersupdate/{id}', [UserController::class, 'update']);
Route::delete('usersdelete/{id}', [UserController::class, 'destroy']);
Run C:\xampp\htdocs\laravel\laravel10project>php artisan serve Starting Laravel development server: http://127.0.0.1:8000/api/users
React JS
https://create-react-app.dev/
Create Project
C:\react-js>npx create-react-app myreactdev
Run
C:\react-js\myreactdev> npm start
C:\react-js\myreactdev\src\App.js
//C:\react-js\myreactdev\src\App.js
import React, { } from "react";
import "./App.css";
import Home from "./components/Home";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import View from "./components/View";
import Edit from "./components/Edit";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/view/:id" element={<View/>}/>
<Route exact path="/edit/:id" element={<Edit/>}/>
</Routes>
</Router>
</div>
);
}
export default App;
https://github.com/axios/axios Installing the Axios Client
$ npm install axios
C:\reactdev\myreactdev>npm install axios
Install React Router Dom
https://www.npmjs.com/package/react-router-dom
C:\react-js\myreactdev>npm i react-router-dom --save
C:\react-js\myreactdev\src\components\Home.js
//C:\react-js\myreactdev\src\components\Home.js
import React, { useState } from 'react';
import List from './List';
import axios from 'axios';
const Home = () => {
const [userField, setUserField] = useState({
name: "",
email: "",
password: ""
});
const changeUserFieldHandler = (e) => {
setUserField({
...userField,
[e.target.name]: e.target.value
});
//console.log(userField);
}
const [loading,setLoading]=useState()
const onSubmitChange = async (e) => {
e.preventDefault();
try {
const responce= await axios.post("http://127.0.0.1:8000/api/addnew", userField);
console.log(responce)
setLoading(true);
} catch (err) {
console.log("Something Wrong");
}
}
if(loading){
return <Home/>
}
return (
<div className="container">
<h2 className='w-100 d-flex justify-content-center p-3'>React JS Laravel 10 REST API CRUD (Create, Read, Update and Delete) | Axios Mysql</h2>
<div className='row'>
<div className='col-md-4'>
<h3>Add Your Detail</h3>
<form>
<div className="mb-3 mt-3">
<label className="form-label"> Full Name:</label>
<input type="text" className="form-control" id="name" placeholder="Enter Your Full Name" name="name" onChange={e => changeUserFieldHandler(e)} />
</div>
<div className="mb-3 mt-3">
<label className="form-label">Email:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email" name="email" onChange={e => changeUserFieldHandler(e)} required/>
</div>
<div className="mb-3 mt-3">
<label className="form-label">Password:</label>
<input type="text" className="form-control" id="password" placeholder="Enter password" name="password" onChange={e => changeUserFieldHandler(e)} required/>
</div>
<button type="submit" className="btn btn-primary" onClick={e => onSubmitChange(e)}>Add User</button>
</form>
</div>
<div className='col-md-8'>
<List />
</div>
</div>
</div>
)
};
export default Home;
C:\react-js\myreactdev\src\components\List.js
//C:\react-js\myreactdev\src\components\List.js
import React, { useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom';
import axios from 'axios'
const List = () => {
const [userData, setUSerData] = useState([]);
useEffect(() => {
fetchData();
}, [])
const fetchData = async () => {
try {
const result = await axios("http://127.0.0.1:8000/api/users");
//console.log(result.data.results);
setUSerData(result.data.results)
} catch (err) {
console.log("somthing Wrong");
}
}
const handleDelete=async(id)=>{
console.log(id);
await axios.delete("http://127.0.0.1:8000/api/usersdelete/"+id);
const newUserData=userData.filter((item)=>{
return(
item.id !==id
)
})
setUSerData(newUserData);
}
return(
<div className="container">
<h3>User Details</h3>
<table className="table table-bordered">
<thead>
<tr>
<th>S No.</th>
<th>Full Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
userData.map((user, i) => {
return (
<tr key={i}>
<td>{i + 1}</td>
<td>{user.name} </td>
<td>{user.email} </td>
<td>
<NavLink to={`/view/${user.id}`} className="btn btn-success mx-2">View</NavLink>
<NavLink to={`/edit/${user.id}`} className="btn btn-info mx-2">Edit</NavLink>
<button onClick={()=>handleDelete(user.id)} className="btn btn-danger">Delete</button>
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
);
};
export default List;
C:\react-js\myreactdev\src\components\View.js
//C:\react-js\myreactdev\src\components\View.js
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import { useParams,useNavigate } from 'react-router-dom';
const View = () => {
const {id}=useParams();
// console.log(id);
const[user,setUser]=useState([]);
const navigate = useNavigate();
useEffect(()=>{
fetchUser();
},[id]);
const fetchUser=async()=>{
try{
const result=await axios.get("http://127.0.0.1:8000/api/users/"+id);
console.log(result.data.users);
setUser(result.data.users)
}catch(err){
console.log("Something Wrong");
}
}
const clickToBackHandler=()=>{
navigate('/');
}
return <div>
<div className="container">
<div className='row'>
<div className='col-md-12'>
<h1>User Details</h1>
<table className="table">
<thead>
<tr>
<th>S No.</th>
<th>Full Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className='container d-flex justify-content-center'>
<div><button className='btn btn-primary' onClick={clickToBackHandler}>Back To Home</button></div>
</div>
</div>;
};
export default View;
C:\react-js\myreactdev\src\components\Edit.js
//C:\react-js\myreactdev\src\components\Edit.js
import React,{ useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate ,useParams } from 'react-router-dom';
const Edit = () => {
const {id}=useParams()
const navigate = useNavigate();
const clickToBackHandler=()=>{
navigate('/');
}
const [userField, setUserField] = useState({
name: "",
email: ""
});
useEffect(()=>{
fetchUser();
},[id])
const fetchUser=async()=>{
try{
const result=await axios.get("http://127.0.0.1:8000/api/users/"+id);
// console.log(result.data.users);
setUserField(result.data.users)
}catch(err){
console.log("Something Wrong");
}
}
const changeUserFieldHandler = (e) => {
setUserField({
...userField,
[e.target.name]: e.target.value
});
console.log(userField);
}
const onSubmitChange = async (e) => {
e.preventDefault();
try {
await axios.put("http://127.0.0.1:8000/api/usersupdate/"+id, userField);
navigate('/');
} catch (err) {
console.log("Something Wrong");
}
}
return(
<div className="container">
<h1>Edit Form</h1>
<form>
<div className="mb-3 mt-3">
<label className="form-label"> ID:</label>
<input type="text" className="form-control" id="id" placeholder="Enter Your Full Name" name="id" value={id} disabled />
</div>
<div className="mb-3 mt-3">
<label className="form-label"> Full Name:</label>
<input type="text" className="form-control" placeholder="Enter Your Full Name" name="name" value={userField.name} onChange={e => changeUserFieldHandler(e)} />
</div>
<div className="mb-3 mt-3">
<label className="form-label">Email:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email" name="email" value={userField.email} onChange={e => changeUserFieldHandler(e)}/>
</div>
<div className="mb-3 mt-3">
<label className="form-label">Password:</label>
<input type="password" className="form-control" id="password" placeholder="Enter password" name="password" value={userField.password} onChange={e => changeUserFieldHandler(e)}/>
</div>
<button type="submit" className="btn btn-primary" onClick={e=>onSubmitChange(e)}>Update</button>
</form>
<div className='container d-flex justify-content-center'>
<button className='btn btn-primary' onClick={ clickToBackHandler}>Back To Home</button>
</div>
</div>
);
};
export default Edit;
react-js\myreactdev\public\index.html
//react-js\myreactdev\public\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Run C:\react-j\myreactdev>npm start http://localhost:3000/
