In this tutorial, we'll walk through the process of creating a full-stack CRUD (Create, Read, Update, Delete) application using React.js, Vite for the frontend, PHP for the backend, and MySQL as the database. This project will help you understand how to set up a modern development environment and integrate the different components seamlessly.
Prerequisites
Before getting started, make sure you have the following tools installed:
- Node.js
- npm (Node Package Manager)
- PHP
- Composer
- MySQL
Steps for Create PHP React CRUD Application
- Installation
- Set Router for Fetch Data
- Create Fetch Data API
- Make Insert Data Component & Set Route
- Submit Form Data
- Set Router for Edit Data Component
- Make Update Data API
- Create Delete Data API
Step 1 - Installation
Here we have make CRUD Application by using React.js with PHP API. So first we want to download and install React.js on our local computer. So here we have use Vite tool and it is a front end tool which is used for building fast and optimized web application.
Now we want to download React Framework by using Vite. So first we have goes to command prompt and And here we have goes into directory from which we can run PHP application and for download and install React.js we have to run following command in terminal.
npm create vite@latest phpreactcrud
When you have run this command then it will create phpreactcrud directory and then after it will display JavaScript framework and from this list of framework we have to select React framework by pressing down key. And after selecting React and press enter then it has again ask for selecting JavaScript variant. So by pressing down key we have to select JavaScript and press enter.
After this, we have goes into phpreactcrud directory by run following command.
cd phpreactcrud
Inside your project directory, you'll need to install the project's dependencies using npm:
npm install
So after run this command it will start download React framework in phpreactcrud directory. Once download is complete, so we need to check React is properly install or not. So we have need to run following command.
npm run dev
When we have run this command then it will start React development server and provide us base url of our React Application. So from this url we can open React Application in the browser.
If React web page open in browser that means React is properly installed in our computer.
Directory Structure of React
Below you can find directory structure of React.js framework.
Step 2 - Set Router for Fetch Data
This is second step for create PHP React.js CRUD application and under this step we have to set Router for Fetch Data. But before set Router for fetch data, first we have to install Bootstrap 5 library under this React CRUD Application.
So To use Bootstrap 5 in your React application, you need to install the Bootstrap package from npm. Bootstrap 5 comes with Sass, so you can take advantage of its customization features. Run the following command to install Bootstrap:
npm install bootstrap
So this command will download and install Bootstrap 5 library under this our React.js Application. Next we have to use Bootstrap library under this React CRUD Application.
So we have to open src/App.jsx file and for import the Bootstrap CSS at the top of the file:
import 'bootstrap/dist/css/bootstrap.min.css';
Next for display user data, we have to create Component/Userlist.jsx file and under this file, we want to import React, so we have to write following statement under this file.
import React from 'react';
So it will import React dependencies under this file. After this we have create React component for this Userlist by writing following code.
Component/Userlist.jsx
function Userlist(){
return (
<div className="card">
<div className="card-header">
<div className="row">
<div className="col-md-6"><b>User Data</b></div>
<div className="col-md-6">
</div>
</div>
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
);
}
And for export this component, we have to write following code at the end of this file. So after write this code we can import this component in other file also.
export default Userlist;
Next we have open App.jsx file and under this file we have to first import React router dom library. So we have goes to command prompt and run following command. This command will download and install React router dom library under this App.jsx file.
npm install react-router-dom
After installing this library we can able to import React router dom library component like BrowserRouter, Routes, Route, Link by writing following statement under App.jsx file.
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
BrowserRouter - Here BrowserRouter component is represents the router for your application, And it is the key component from react router dom, which provided routing functionality to react application.
Routes - Routes component is typically used to define collection of routes.
Route - Route component is used to define, individual route in your application.
Link - Link component is used for creating hyperlink, that navigate to different parts of your application.
Next we want to import Component/Userlist.jsx file under this App.jsx file. So we have to add following statement under App.jsx file.
import Userlist from './Component/Userlist';
After import React router dom library and Userlist component, in below code you can find how to define route for fetch data.
src/App.jsx
import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Userlist from './Component/Userlist';
function App() {
return(
<div className="container">
<h1 className="mt-5 mb-5 text-center"><b>PHP React.js CRUD Application - <span className="text-primary">Create Delete Data API - 8</span></b></h1>
<BrowserRouter>
<Routes>
<Route path="/" element={<Userlist />} />
</Routes>
</BrowserRouter>
</div>
)
}
export default App
src/Component/Userlist.jsx
import React from 'react';
function Userlist(){
return (
<div className="card">
<div className="card-header">
<div className="row">
<div className="col-md-6"><b>User Data</b></div>
<div className="col-md-6">
</div>
</div>
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
);
}
export default Userlist;
Step 3 - Create Fetch Data API
After set Router for Fetch Data, now we want to make PHP API for fetch data from MySQL table. But before this we have to write JavaScript under Component/Userlist.jsx file for send fetch data request to PHP API.
Source Code of Create Fetch Data API
src/Component/Userlist.jsx
import React, { useEffect, useState } from 'react';
function Userlist(){
const [users, setUsers] = useState([]);
useEffect(() => {
const apiUrl = 'http://localhost/tutorial/phpreactcrud/api/action.php'; //This URL change according to path of your PHP Script
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
setUsers(data);
});
}, []);
return (
<div className="card">
<div className="card-header">
<div className="row">
<div className="col-md-6"><b>User Data</b></div>
<div className="col-md-6">
</div>
</div>
</div>
<div className="card-body">
<table className="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{users.map((user, index) => (
<tr key={index}>
<td>{user.first_name}</td>
<td>{user.last_name}</td>
<td>{user.email}</td>
<td>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
export default Userlist;
1 - Import Statements:
import React, { useEffect, useState } from 'react';
- The code imports the necessary functionalities from the react library.
- useEffect is a hook used for side effects in functional components, and useState is a hook for managing state.
2 - Component Definition:
function Userlist(){
- The functional component named Userlist is defined.
3 - State Initialization:
const [users, setUsers] = useState([]);
- This line initializes a state variable users using the useState hook. The setUsers function is used to update the state.
4 - Data Fetching using useEffect:
useEffect(() => {
const apiUrl = 'http://localhost/tutorial/phpreactcrud/api/action.php';
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
setUsers(data);
});
}, []);
- The useEffect hook is used to perform side effects in functional components. In this case, it fetches data from a specified API endpoint when the component mounts ([] as the dependency array means it runs once when the component mounts).
- The data fetched is expected to be in JSON format, and it updates the users state with the received data.
5 - Rendering JSX:
return (
<div className="card">
{/* ... */}
</div>
);
- The return statement contains JSX code that represents the structure of the component.
6 - JSX Structure:
- The component renders a Bootstrap-styled card with a header and body.
- The body contains a table displaying user data with columns for "First Name," "Last Name," "Email," and an "Action" column.
7 - Mapping Through User Data:
{users.map((user, index) => (
<tr key={index}>
<td>{user.first_name}</td>
<td>{user.last_name}</td>
<td>{user.email}</td>
<td>
{/* Action content */}
</td>
</tr>
))}
- The component maps through the users array and renders a table row (</tr>) for each user.
- User details such as first name, last name, and email are displayed in the corresponding columns.
8 - Export Statement:
export default Userlist;
- The Userlist component is exported as the default export of this module, making it available for use in other parts of the application.
<?php
header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers:* ");
header("Access-Control-Allow-Methods:* ");
$connect = new PDO("mysql:host=127.0.0.1;dbname=testing", "root", "password");
$method = $_SERVER['REQUEST_METHOD']; //return GET, POST, PUT, DELETE
if($method === 'GET')
{
//fetch all user
$query = "SELECT * FROM sample_users ORDER BY id DESC";
$result = $connect->query($query, PDO::FETCH_ASSOC);
$data = array();
foreach($result as $row)
{
$data[] = $row;
}
echo json_encode($data);
}
?>
This PHP code is designed to handle HTTP requests, specifically for the GET method, and it interacts with a MySQL database to retrieve data. Let's break down the code:
1 - Cross-Origin Resource Sharing (CORS) Headers:
header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers:* ");
header("Access-Control-Allow-Methods:* ");
- These lines set up CORS headers, allowing cross-origin requests from any origin (*). CORS headers are necessary for web applications hosted on one domain to make requests to a different domain.
2 - Database Connection:
$connect = new PDO("mysql:host=127.0.0.1;dbname=testing", "root", "password");
- It establishes a connection to a MySQL database named "testing" on the local server (127.0.0.1). The username is "root," and the password is "password." This connection is created using the PDO (PHP Data Objects) extension.
3 - Request Method Check:
$method = $_SERVER['REQUEST_METHOD'];
- It retrieves the HTTP request method (GET, POST, PUT, DELETE) from the $_SERVER superglobal.
4 - Handling GET Requests:
if ($method === 'GET') {
//fetch all user
$query = "SELECT * FROM sample_users ORDER BY id DESC";
$result = $connect->query($query, PDO::FETCH_ASSOC);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
echo json_encode($data);
}
- If the request method is GET, the code executes a SELECT query to retrieve all records from the "sample_users" table, ordering them by the "id" column in descending order.
- The result of the query is fetched using the query method, and the data is extracted using a foreach loop.
- The retrieved data is then encoded as JSON using json_encode and echoed back to the client.
This PHP code handles GET requests, connects to a MySQL database, retrieves all records from a specific table, and returns the data in JSON format with appropriate CORS headers to allow cross-origin requests.
Step 4 - Make Insert Data Component & Set Route
Once we have fetch data from MySQL database and display on web page under this React.js CRUD Application. Next We will create insert data component in which we will create Add user data form, and then after we will set router of that insert data component under this React.js PHP CRUD Application.
src/Component/Add.jsx
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
function Add(){
let navigate = useNavigate();
const [user, setUser] = useState({
first_name : '',
last_name : '',
email : ''
});
const handleChange = (event) => {
const { name, value } = event.target;
setUser({
...user,
[name] : value
});
};
return (
<div className="card">
<div className="card-header">
<div className="row">
<div className="col-md-6">Add User</div>
<div className="col-md-6">
<Link to="/" className="btn btn-success btn-sm float-end">View All</Link>
</div>
</div>
</div>
<div className="card-body">
<div className="row">
<div className="col-md-4"> </div>
<div className="col-md-4">
<form method="POST">
<div className="mb-3">
<label>First Name</label>
<input type="text" name="first_name" className="form-control" onChange={handleChange} />
</div>
<div className="mb-3">
<label>Last Name</label>
<input type="text" name="last_name" className="form-control" onChange={handleChange} />
</div>
<div className="mb-3">
<label>Email</label>
<input type="email" name="email" className="form-control" onChange={handleChange} />
</div>
<div className="mb-3">
<input type="submit" className="btn btn-primary" value="Add" />
</div>
</form>
</div>
</div>
</div>
</div>
);
}
export default Add;
This React.js code defines a functional component called Add that represents a form for adding a new user. It uses the useNavigate hook from react-router-dom to programmatically navigate between different views. Let's break down the code:
1 - Import Statements:
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
- The code imports the necessary functionalities from the react library, including the useState hook.
- It also imports Link and useNavigate from react-router-dom. Link is used to create navigation links, and useNavigate is a hook used for programmatic navigation.
2 - Component Definition:
function Add(){
- The functional component named Add is defined.
3 - Navigation Setup:
let navigate = useNavigate();
- The useNavigate hook is used to get the navigate function, which can be used to navigate between different views in a React application.
4 - State Initialization:
const [user, setUser] = useState({
first_name : '',
last_name : '',
email : ''
});
- This line initializes a state variable user using the useState hook. The state represents the user data with properties first_name, last_name, and email.
5 - Event Handler Function:
const handleChange = (event) => {
const { name, value } = event.target;
setUser({
...user,
[name] : value
});
};
- The handleChange function is an event handler for input changes. It uses object destructuring to extract the name and value from the changed input element.
- The setUser function is then used to update the user state by spreading the existing state and updating the property corresponding to the changed input.
6 - Rendering JSX:
return (
<div className="card">
{/* ... */}
</div>
);
- The return statement contains JSX code that represents the structure of the component.
7 - JSX Structure:
- The component renders a Bootstrap-styled card with a header and body.
- The body contains a form with input fields for "First Name," "Last Name," and "Email," along with a submit button labeled "Add."
8 - Navigation Link:
<Link to="/" className="btn btn-success btn-sm float-end">View All</Link>
- This is a Link component that creates a link to the root path ("/"). It's styled as a Bootstrap button and is labeled "View All."
- Clicking on this link will navigate the user to the specified path.
9 - Form Input Fields:
<input type="text" name="first_name" className="form-control" onChange={handleChange} />
<input type="text" name="last_name" className="form-control" onChange={handleChange} />
<input type="email" name="email" className="form-control" onChange={handleChange} />
- These input fields are controlled components, meaning their values are controlled by the state (user).
- The onChange event is set to the handleChange function, ensuring that any changes to the input fields update the state.
10 - Submit Button:
<input type="submit" className="btn btn-primary" value="Add" />
- This is a submit button for the form. It triggers the submission of the form data.
11 - Export Statement:
export default Add;
- The Add component is exported as the default export of this module, making it available for use in other parts of the application.
This component provides a form for adding a new user. It captures input changes, updates the component state accordingly, and allows for the submission of the form data.
After creating this src/Component/Add.jsx file, now we want to import in src/App.jsx file.
src/App.jsx
import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Userlist from './Component/Userlist';
import Add from './Component/Add';
function App() {
return(
<div className="container">
<h1 className="mt-5 mb-5 text-center"><b>PHP React.js CRUD Application - <span className="text-primary">Create Delete Data API - 8</span></b></h1>
<BrowserRouter>
<Routes>
<Route path="/" element={<Userlist />} />
<Route path="/add" element={<Add />} />
</Routes>
</BrowserRouter>
</div>
)
}
export default App
1 - Import Statements:
import Add from './Component/Add';
- Component Add are imported from separate files.
2 - React Router Setup:
<BrowserRouter>
<Routes>
/* ... */
<Route path="/add" element={<Add />} />
</Routes>
</BrowserRouter>
- The BrowserRouter component from react-router-dom is used to set up routing for the application.
- Inside it, the Routes component defines different routes using the Route component. Two routes are defined:
- The path /add renders the Add component.
So this way we can create Add user form component and import into App.jsx file.
Step 5 - Submit Form Data
Now you can move to How to submit form data by using React handle submit function and then after you will learn how to make PHP API for Insert Form data under this React CRUD Application.
src/Component/Add.jsx
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
function Add(){
let navigate = useNavigate();
const [user, setUser] = useState({
first_name : '',
last_name : '',
email : ''
});
const handleChange = (event) => {
const { name, value } = event.target;
setUser({
...user,
[name] : value
});
};
const handleSubmit = (event) => {
event.preventDefault();
fetch('http://localhost/tutorial/phpreactcrud/api/action.php', {
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
body : JSON.stringify(user)
})
.then((response) => response.json())
.then((data) => {
navigate("/");
})
};
return (
<div className="card">
<div className="card-header">
<div className="row">
<div className="col-md-6">Add User</div>
<div className="col-md-6">
<Link to="/" className="btn btn-success btn-sm float-end">View All</Link>
</div>
</div>
</div>
<div className="card-body">
<div className="row">
<div className="col-md-4"> </div>
<div className="col-md-4">
<form method="POST" onSubmit={handleSubmit}>
<div className="mb-3">
<label>First Name</label>
<input type="text" name="first_name" className="form-control" onChange={handleChange} />
</div>
<div className="mb-3">
<label>Last Name</label>
<input type="text" name="last_name" className="form-control" onChange={handleChange} />
</div>
<div className="mb-3">
<label>Email</label>
<input type="email" name="email" className="form-control" onChange={handleChange} />
</div>
<div className="mb-3">
<input type="submit" className="btn btn-primary" value="Add" />
</div>
</form>
</div>
</div>
</div>
</div>
);
}
export default Add;
1 - Event Handler Function (handleSubmit):
const handleSubmit = (event) => {
event.preventDefault();
fetch('http://localhost/tutorial/phpreactcrud/api/action.php', {
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
body : JSON.stringify(user)
})
.then((response) => response.json())
.then((data) => {
navigate("/");
});
};
- The handleSubmit function is an event handler for form submission. It prevents the default form submission behavior using event.preventDefault().
- It then makes a POST request to the specified API endpoint ('http://localhost/tutorial/phpreactcrud/api/action.php') with the user data in JSON format.
- Upon successful submission, it navigates the user back to the root path ("/") using the navigate function.
2 - Form onSubmit Event Handler:
<form method="POST" onSubmit={handleSubmit}>
- The onSubmit attribute is set to the handleSubmit function.
- This means that when the form is submitted (either by clicking a submit button or pressing Enter within a form field), the handleSubmit function will be called.
<?php
header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers:* ");
header("Access-Control-Allow-Methods:* ");
$connect = new PDO("mysql:host=127.0.0.1;dbname=testing", "root", "password");
$method = $_SERVER['REQUEST_METHOD']; //return GET, POST, PUT, DELETE
if($method === 'GET')
{
//fetch all user
$query = "SELECT * FROM sample_users ORDER BY id DESC";
$result = $connect->query($query, PDO::FETCH_ASSOC);
$data = array();
foreach($result as $row)
{
$data[] = $row;
}
echo json_encode($data);
}
if($method === 'POST')
{
$form_data = json_decode(file_get_contents('php://input'));
$data = array(
':first_name' => $form_data->first_name,
':last_name' => $form_data->last_name,
':email' => $form_data->email
);
$query = "
INSERT INTO sample_users (first_name, last_name, email) VALUES (:first_name, :last_name, :email);
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo json_encode(["success" => "done"]);
}
?>
This PHP code is a simple server-side script that handles HTTP requests, specifically for the POST method. It interacts with a MySQL database to insert data submitted through a JSON-encoded payload.
if($method === 'POST') {
// Process POST data
$form_data = json_decode(file_get_contents('php://input'));
$data = array(
':first_name' => $form_data->first_name,
':last_name' => $form_data->last_name,
':email' => $form_data->email
);
$query = "
INSERT INTO sample_users (first_name, last_name, email) VALUES (:first_name, :last_name, :email);
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo json_encode(["success" => "done"]);
}
- If the request method is POST, the code proceeds to handle the incoming data.
- It uses json_decode to parse the JSON data received from the client via the php://input stream.
- The parsed data is then used to construct an associative array $data with keys corresponding to database columns.
- A SQL query is prepared to insert the data into the "sample_users" table.
- The query is executed using the prepared statement, and a success message is echoed back as a JSON response.
In summary, this PHP script checks for incoming POST requests, parses the JSON data, inserts it into a MySQL database, and responds with a JSON success message.
Remaining tutorial will be published very soon.
Conclusion
Congratulations! You've successfully built a full-stack CRUD application using React.js, Vite, PHP, and MySQL. This project provides a solid foundation for more complex applications, and you can further enhance it by adding features like authentication, error handling, and improved user interfaces.
Remember to follow best practices for security, such as validating and sanitizing user input on the server side, securing your database connections, and implementing proper authentication mechanisms. Happy coding!
