Forem: Durgesh Sahani

Migration from Rackspace Server to Google Cloud Platform(GCP)

Durgesh Sahani — Thu, 23 Mar 2023 06:49:18 +0000

Migrating from a Rackspace server to the Google Cloud Platform (GCP) can be a daunting task, but it can also bring many benefits such as scalability, security, and cost savings. In this blog, we will walk through the process of migrating from a Rackspace server to GCP and discuss some of the key considerations and best practices to keep in mind.

Before beginning the migration process, it is important to plan and prepare for the move. This includes identifying which resources and data need to be migrated, as well as determining the most efficient and cost-effective way to move them.

RackSpace Server

Server
- Hardwares
- 8GB RAM, 100GB SSD
- Softwares
- Debian 10, Apache 2.4, PHP 7.4
Database
- MySQL 5.7
Resources
- Images, PDF’s, Excel, etc
DNS
- Domain, Subdomain, Other Records like CNAME, A, TXT, MX, etc
Additional Dependency’s
- Additional Softwares like: RabbitMQ, Elasticsearch, CRONS, etc
- Check Enabled PORTS like: 80, 443, 21, etc

One of the most important considerations for migration is the data. It is important to take a full backup of all data on the Rackspace server, including databases, files, and configurations. This backup should be tested to ensure that it can be restored successfully.

Next, it is important to choose the appropriate GCP services for your workloads. GCP offers a wide range of services, including compute, storage, networking, and databases, that can be used to run your applications and store your data. Depending on the specific requirements of your workloads, you may want to use services like Google Compute Engine, Google Kubernetes Engine, Google Cloud Storage, or Cloud SQL.

Create Replica Of RackSpace Server to Google Cloud Platform(GCP)

Server – Google Compute Engine
- Hardwares
- 8GB RAM, 100GB SSD
- Softwares
- Debian 10, Apache 2.4, PHP 7.4
Database – Cloud SQL
- MySQL 5.7
Resources – Cloud Storage
- Images, PDF’s, Excel, etc
- Created/Configured CDN with Loadbalancer to access these resources
DNS – Cloud DNS
- Domain, Subdomain, Other Records like CNAME, A, TXT, MX, etc
Additional Dependency’s
- Additional Softwares like: RabbitMQ, Elasticsearch, CRONS, etc
- Enabled PORTS like: 80, 443, 21, etc

Along with server migration we moved all resources to Google Cloud Bucket and created CDN to access them. We have also updated the code to access file from CDN, upload files to Cloud bucket, Download file from Cloud bucket. By following these steps, we have optimise our server resources and improve your website’s overall performance.

To do this you have to make sure you have given right permission to bucket so files can be accessible, also handle the CORS issue by making some configuration changes in cloud bucket. Another issue we faced was resizing images as first we have to download it then resize and finally upload it again.

Once you have chosen the appropriate GCP services, you can begin migrating your data and resources. There are several different methods for migrating data and resources, including manual migration, using migration tools, or using a hybrid approach. The method you choose will depend on the size and complexity of your workloads, as well as the resources and expertise available to you.

Google Cloud Platform offers a range of powerful tools like gsutil that can greatly simplify and automate many tasks related to managing and using cloud services.

Gsutil is a command-line tool that allows you to interact with Cloud Storage from the command line. With gsutil, you can also automate tasks such as backups, synchronizing data between local and cloud storage, and running batch jobs. This can save you time and effort, and help you to more efficiently manage your cloud resources.

We configured it to Rackspace server to transfer all the resources(Images, PDF’s, Excel files, etc), exported mysql databases.

Another helpful tool we used was SCREEN.

The screen tool is a terminal multiplexer that allows you to create multiple “virtual” terminals within a single terminal window. This can be useful for a variety of tasks, including running multiple commands simultaneously, detaching from a terminal session while leaving the commands running in the background, and transferring larger files in the background.

To transfer larger files in the background using screen, you can start a screen session and then initiate the file transfer using a command-line tool such as rsync or scp In our case we used gsutil. Once the transfer has started, you can detach from the screen session using the key combination Ctrl+a d. This will leave the transfer running in the background and allow you to continue using the terminal for other tasks.

To reattach to the screen session and check the progress of the transfer, you can use the command screen -r. This will restore the screen session and allow you to view the output of the running commands.

It’s also important to keep in mind the security and compliance requirements during this migration process. GCP provides various security and compliance features such as encryption, firewalls, and identity and access management to keep your data and resources secure.

Once the migration is complete, it is important to thoroughly test your applications and services to ensure that they are working as expected. This includes monitoring the performance of your workloads, troubleshooting any issues that may arise, and making any necessary adjustments to your GCP configuration.

Some major issues we faces post migrations are:

We experience slowness issue on production server. Root cause was cache was disabled in Apache, innodb buffer size, query cache mode was disabled in MySQL.
Apache configuration updates were missing like: http_module, rewrite_module, headers_module, ssl_module. Execute this apachectl -M command to get all the list of modules.
Missed to update MySQL modes like: NO_ENGINE_SUBSTITUTION, innodb_buffer_pool_size, query_cache_size, etc Directory permissions were missing to create folders, upload files, etc.
Email with attachments were missing the file as file were on bucket not on server anymore.

In conclusion, migrating from a Rackspace server to GCP can be a complex process, but it can bring many benefits such as scalability, security, and cost savings. It’s important to plan and prepare for the move, choose the appropriate GCP services, and keep in mind the security and compliance requirements during the migration process. It’s also important to thoroughly test your applications and services after the migration to ensure that they are working as expected.

Thanks for taking the time to read this. If you have any further questions or need more information, please don't hesitate to ask.

Reach Out

https://dwebworks.in/
dwebworks.in@gmail.com

Upgrading from PHP 5.6 to PHP 7.4

Durgesh Sahani — Tue, 21 Mar 2023 05:17:16 +0000

Upgrading from PHP 5.6 to 7.4 can be a daunting task, but it is important to do so in order to take advantage of the many new features and performance improvements in the latest version of the language.

Before starting the upgrade process, it is important to thoroughly test your application on a development or staging server to ensure that it is compatible with PHP 7.4. This will allow you to identify and fix any issues before deploying to a production environment.

One of the biggest changes in PHP 7.4 is the deprecation of several functions and features that were previously available in PHP 5.6. For example, the create_function() function has been removed, and the mysql_* functions have been deprecated in favor of the mysqli_* or PDO_* functions.

Additionally, certain syntax changes have been made in PHP 7.4. For example, the list() function now requires parentheses, and the callable type has been replaced with Closure.

It is also important to note that PHP 7.4 has removed support for several older versions of popular extensions, such as mcrypt, and openssl. It’s important that you update these to the latest version of these extensions to be compatible with PHP 7.4.

Once all compatibility issues have been addressed, the actual process of upgrading can begin. This typically involves updating the PHP version on the server and updating any necessary extensions.

It’s also important to note that you should also update any dependencies and libraries that are used by your application. This includes updating any frameworks or libraries that are used by your application.

Once the upgrade is complete, it is important to thoroughly test your application again to ensure that everything is working as expected.

Some major issues we faces post migrations are:

We migrated from mysql_* with PDO

We implemented PDO in such a way that it can also handle read-replica in future Db::getPdoRead, Db::getPdoWrite, but there was a challenge in the beginning, team was making mistake to using it in right object which actually created problem for form data not being stored in database,
Converting bigger SELECT with multiple tables joins and multiple parameters query to PDO
Another issue we faced was after conversion sometime response got swapped index_value to key_value or voice-versa
Other issue related to same we faced was we have to fetchAll() record but we use fetch() or voice-versa we created data mismatch
We decided to replace mysql_real_escape_string() with addslashes() which created another issue on production while saving html contents.

Merging branches, lots of conflicts, if someone forgot to rebase or worked for weeks without taking updates. It took week to resolve conflicts.

In summary, upgrading from PHP 5.6 to 7.4 can be a complex process, but it is important to do so in order to take advantage of the many new features and performance improvements in the latest version of the language. It’s important to thoroughly test your application before and after the upgrade, and to update any necessary dependencies and libraries.

Thanks for taking the time to read this. If you have any further questions or need more information, please don't hesitate to ask.

Reach Out

https://dwebworks.in/
dwebworks.in@gmail.com

Unlocking the Power of Offshore Development Teams: How to Build a Successful Remote Team in India

Durgesh Sahani — Thu, 23 Feb 2023 05:13:04 +0000

As the world becomes more interconnected, businesses are expanding their reach beyond borders to tap into new markets and take advantage of cost-effective solutions. One such solution is offshore development teams, which have become increasingly popular among companies looking to streamline their operations and reduce costs. Offshore development teams provide access to skilled professionals at a fraction of the cost of hiring in-house staff, and they offer a range of benefits that can help businesses achieve their long-term goals. In this blog, we'll explore the advantages of offshore development teams and why they're a smart choice for US/UK-based companies looking to stay ahead of the competition.

Why offshore team is better options than hiring contractors, freelancers?

Offshore teams offer several advantages over hiring contractors or freelancers for software development.
Firstly, offshore teams are generally more reliable and consistent than hiring individual contractors or freelancers. Offshore teams are often composed of multiple team members, which means that there is more accountability and less reliance on any one individual. This can help ensure that deadlines are met, quality is consistent, and work is completed on time.

Secondly, offshore teams typically offer a broader range of skills and expertise than individual contractors or freelancers. An offshore team is often composed of multiple developers with different areas of expertise, such as front-end development, back-end development, database management, and more. This can help ensure that all aspects of a project are covered and that there are no gaps in knowledge or skill.

Thirdly, offshore teams are often more cost-effective than hiring contractors or freelancers. Offshore teams are typically based in countries with lower labor costs, which means that the cost of hiring a team of developers can be significantly lower than the cost of hiring individual contractors or freelancers.
Finally, offshore teams are often able to provide better project management and support than individual contractors or freelancers. Offshore teams typically have project managers and other support staff who can help ensure that the project runs smoothly and that any issues or challenges are addressed promptly.

Overall, offshore teams can offer a number of advantages over hiring contractors or freelancers for software development, including reliability, expertise, cost-effectiveness, and project management and support.

Now lets talk about Opportunities, Challenges, Solutions and Long-term goals

Opportunities:
Despite the challenges, offshore development teams in India offer several opportunities for US/UK companies. One of the biggest opportunities is cost savings. Offshore development teams in India can offer up to 50-70% cost savings compared to in-house teams. India's highly skilled workforce and large pool of talent offer a wide range of expertise and skills for US/UK companies to tap into. This can help companies to access a wider talent pool, improve productivity and reduce time to market.
Challenges:
However, setting up an offshore development team in India is not without its challenges. One of the biggest challenges is the cultural and language barrier. It is important for US/UK companies to understand the cultural differences and work towards bridging the gap. Language is another barrier that can affect communication and productivity. Finding the right talent and managing them remotely can also be a challenge.
Solutions:
To overcome the challenges and make the most of the opportunities, US/UK companies need to adopt certain strategies. One of the most important strategies is to partner with a reliable and experienced offshore development team provider in India. This can help companies to overcome the cultural and language barriers, as well as ensure that they have access to the right talent. Building a strong and collaborative relationship with the offshore team is also crucial for success.
Long-term goals:
Offshore development teams in India can offer several long-term benefits for US/UK companies. By leveraging India's highly skilled workforce and cost advantages, companies can focus on innovation, growth, and expanding their global reach. Offshore development teams can also offer a flexible and scalable solution that can adapt to the changing needs of the company. This can help companies to stay competitive and agile in the rapidly evolving business landscape.
In conclusion, offshore development teams in India offer several benefits and opportunities for US/UK companies. However, it is important to understand the challenges and adopt the right strategies to make the most of the offshore team. With the right partner, US/UK companies can build a successful and long-lasting offshore development team in India.

How we are helping company’s to scale?

As a seasoned software engineer with over 10 years of experience in the industry, I have seen the immense value that offshore teams can bring to a company. Many businesses in the US and UK are facing the challenge of finding skilled developers who are not only affordable but also capable of delivering high-quality work.
That's where we come in - our company, based in India, specializes in building offshore teams that are tailor-made to meet the unique needs of our clients. We understand that every business is different, and we work closely with our clients to create teams that are perfectly suited to their specific requirements.
One of the biggest advantages of working with an offshore team is the cost savings that come with it. With salaries and expenses in India being significantly lower than those in the US or UK, companies can save up to 50-70% on their development costs without sacrificing quality or reliability.
But cost savings are just the beginning - offshore teams also offer a range of other benefits that can help companies to achieve their long-term goals. For example, by tapping into a global talent pool, businesses can access a wider range of skills and experience than they might find locally. This can lead to more innovative solutions, better products, and a stronger competitive edge.
Of course, there are also challenges that come with building an offshore team, such as language and cultural barriers, time zone differences, and communication issues. But these challenges can be overcome with the right approach and the right partner. Our team is experienced in working with clients from around the world, and we have developed processes and tools to ensure seamless collaboration and communication across borders.

In conclusion, offshore teams offer a compelling solution for businesses that are looking to stay competitive in a rapidly changing marketplace. By working with a company like ours, US and UK companies can access a pool of talented developers at a fraction of the cost, without sacrificing quality or reliability. So why not take advantage of this opportunity and start building your offshore team today?

Thanks for taking the time to read this. If you have any further questions or need more information, please don't hesitate to ask.

Reach Out

https://dwebworks.in/
dwebworks.in@gmail.com

React CRUD operations using PHP API and MySQL

Durgesh Sahani — Tue, 18 Jan 2022 13:38:34 +0000

What we are going to learn?

ReactJs introduction, Create React APP, NodeJs NPM and Homebrew installations
Create Link and Handle Routing in React | react-router-dom package installation
Create database in PHPMyAdmin and design form in React Component
Create PHP API and consume using axios | handle CORS issue on localhost
Connect MySQL database using PDO | Access React form data and Save in Database
Create GET PHP API and consume in React using axios | List in react table component
Load user details for edit form and create PHP PUT API to update user data
Create DELETE PHP API, consume it using axios and delete user from database

What is ReactJs?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Here is the official website of ReactJs https://reactjs.org/.

To create react app you’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

What is NodeJs and NPM?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. You can download from official NodeJs website: https://nodejs.org/en/. NPM will get install along with NodeJs. NPM is the default package manager for the JavaScript runtime environment NodeJs.

What is Homebrew?

For mac you can also use Homebrew to install it on your machine. Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s operating system, macOS, as well as Linux. The name is intended to suggest the idea of building software on the Mac depending on the user’s taste. here is the official website https://brew.sh/

Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install NodeJs
brew install nodejs

Create ReactJS APP
npx create-react-app react-crud

npx is not a typo — it’s a package runner tool that comes with npm 5.2+.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

Run react app

cd react-crud
npm start

Now visit to following link you should be able to see ReactApp running:
http://localhost:3000/

To create RestFull API, we’ll be needing PHP, MYSQL and Apache. You are free to install each software separately and configure them or use stacked app. In my case I’m going to use MAMP(Mac Apache MySQL PHP) which is design for mac and comes with all required softwares

What is PHP?

PHP is a open-source general-purpose server side scripting language that is especially suited to web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1994. The PHP reference implementation is now produced by The PHP Group.

What is MySQL?

MySQL is an open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language.

What is Apache?

The Apache HTTP Server is a free and open-source cross-platform web server software, released under the terms of Apache License 2.0. Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation.

Stacked Application

WAMP for Windows
https://www.wampserver.com/en/
LAMP for Linux
https://bitnami.com/stack/lamp/installer
MAMP for Mac
https://www.mamp.info/en/mac/
XAMPP: Open Source, Cross-platform
https://www.apachefriends.org/index.html

Awesome now we are all set to start. Open you project to your favourite code editor in my case I’m using Visual Studio Code.

Create Link and Handle Routing in React | react-router-dom package installation

Create new directory components under your src/ directory and create 3 new components which we’ll update shortly:
src/components/ListUser.js

export default function ListUser() {
  return (
      <h1>List Users</h1>
  );
}

src/components/CreateUser.js

export default function CreateUser() {
  return (
      <h1>Create User</h1>
  );
}

src/components/UpdateUser.js

export default function UpdateUser() {
  return (
      <h1>Update User</h1>
  );
}

Now let’s Install react router for creating link and configuring routes
npm install react-router-dom

Update App.js for handling routing

import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import './App.css';
import CreateUser from './components/CreateUser';
import EditUser from './components/EditUser';
import ListUser from './components/ListUser';
function App() {
  return (
    <div className="App">
      <h5>React CRUD operations using PHP API and MySQL</h5>
      <BrowserRouter>
        <nav>
          <ul>
            <li>
              <Link to="/">List Users</Link>
            </li>
            <li>
              <Link to="user/create">Create User</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route index element={<ListUser />} />
          <Route path="user/create" element={<CreateUser />} />
          <Route path="user/:id/edit" element={<EditUser />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

Create database in PHPMyAdmin and design form in React Component

CREATE DTAABASE react_crud;

CREATE TABLE `react_crud`.`users` 
(
`id` int NOT NULL auto_increment,
`name` varchar(50),
`email` varchar(60),
`mobile` bigint(10),
`created_at` timestamp,
`updated_at` timestamp, PRIMARY KEY (id)
);

Update src/components/CreateUser.js

import { useState } from "react";
export default function ListUser() {
    const [inputs, setInputs] = useState([]);
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(inputs);
    }
    return (
        <div>
            <h1>Create user</h1>
            <form onSubmit={handleSubmit}>
                <table cellSpacing="10">
                    <tbody>
                        <tr>
                            <th>
                                <label>Name: </label>
                            </th>
                            <td>
                                <input type="text" name="name" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Email: </label>
                            </th>
                            <td> 
                                <input type="text" name="email" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Mobile: </label>
                            </th>
                            <td>
                                <input type="text" name="mobile" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2" align ="right">
                                <button>Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    )
}

Create PHP API and consume using axios | handle CORS issue on localhost

Install axios for making API calls from ReactJs
npm install axios

Now update your src/components/CreateUser.js file again for making POST API call

import axios from "axios";
const handleSubmit = (event) => {
    event.preventDefault();
    axios.post('http://localhost:8888/api/user/save', inputs).then(function(response){
        console.log(response.data);
    });
}

Create PHP file for writing API and name it index.php

<?php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: *");
    echo "Testing";
?>

Notice at the top we have added headers to solved CORS issue.
Also, Let’s create .htaccess file to handle pretty URLs like PHP lumen framework, and add following line inside.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

Hoola, Finally our API file is ready.

Connect MySQL database using PDO | Access React form data and Save in Database

Now, Let’s create a database connect file and name it DbConnect.php and add following code snippet inside. Update credentials as per yours and it will connect to your database using PDO(PHP Data Object).

<?php
    /**
    * Database Connection
    */
    class DbConnect {
        private $server = 'localhost';
        private $dbname = 'react_crud';
        private $user = 'root';
        private $pass = '';
        public function connect() {
            try {
                $conn = new PDO('mysql:host=' .$this->server .';dbname=' . $this->dbname, $this->user, $this->pass);
                $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                return $conn;
            } catch (\Exception $e) {
                echo "Database Error: " . $e->getMessage();
            }
        }

    }
?>

Create POST API

include("DbConnect.php");
    $conn = new DbConnect();
    $db = $conn->connect();
    $method = $_SERVER['REQUEST_METHOD'];
    switch($method) {
        case 'POST':
            $user = json_decode(file_get_contents('php://input'));
            $sql = "INSERT INTO users(id, name, email, mobile, created_at) values(null, :name, :email, :mobile, :created_at)";
            $stmt = $db->prepare($sql);
            $date = date('Y-m-d');
            $stmt->bindParam(':name', $user->name);
            $stmt->bindParam(':email', $user->email);
            $stmt->bindParam(':mobile', $user->mobile);
            $stmt->bindParam(':created_at', $date);
            if($stmt->execute()) {
                $data = ['status' => 1, 'message' => "Record successfully created"];
            } else {
                $data = ['status' => 0, 'message' => "Failed to create record."];
            }
            echo json_encode($data);
            break;
}

// Reference database connection class file and connect to MySQL Database
include("DbConnect.php");
$conn = new DbConnect();
$db = $conn->connect();

// Give you Method used to hit API
$method = $_SERVER['REQUEST_METHOD'];

// Read the POST JSON data and convert it into PHP Object
$user = json_decode(file_get_contents('php://input'));

Create GET PHP API and consume in React using axios | List in react table component

Update src/components/ListUser.js

import axios from "axios"
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function ListUser() {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        getUsers();
    }, []);
    function getUsers() {
        axios.get('http://localhost:8888/api/users/').then(function(response) {
            console.log(response.data);
            setUsers(response.data);
        });
    }
    return (
        <div>
            <h1>List Users</h1>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map((user, key) =>
                        <tr key={key}>
                            <td>{user.id}</td>
                            <td>{user.name}</td>
                            <td>{user.email}</td>
                            <td>{user.mobile}</td>
                            <td>
                                <Link to={`user/${user.id}/edit`} style={{marginRight: "10px"}}>Edit</Link>
                                <button>Delete</button>
                            </td>
                        </tr>
                    )}

                </tbody>
            </table>
        </div>
    )
}

Update index.php file for adding new GET API to get all users

case 'GET':
    $sql = "SELECT * FROM users";
    $stmt = $db->prepare($sql);
    $stmt->execute();
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);        
    echo json_encode($users);
    break;

Load user details for edit form and create PHP PUT API to update user data

Update src/components/UpdateUser.js

import { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
export default function ListUser() {
    const navigate = useNavigate();
    const [inputs, setInputs] = useState([]);
    const {id} = useParams();
    useEffect(() => {
        getUser();
    }, []);
    function getUser() {
        axios.get(`http://localhost:8888/api/user/${id}`).then(function(response) {
            console.log(response.data);
            setInputs(response.data);
        });
    }
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        axios.put(`http://localhost:8888/api/user/${id}/edit`, inputs).then(function(response){
            console.log(response.data);
            navigate('/');
        });

    }
    return (
        <div>
            <h1>Edit user</h1>
            <form onSubmit={handleSubmit}>
                <table cellSpacing="10">
                    <tbody>
                        <tr>
                            <th>
                                <label>Name: </label>
                            </th>
                            <td>
                                <input value={inputs.name} type="text" name="name" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Email: </label>
                            </th>
                            <td> 
                                <input value={inputs.email} type="text" name="email" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Mobile: </label>
                            </th>
                            <td>
                                <input value={inputs.mobile} type="text" name="mobile" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2" align ="right">
                                <button>Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    )
}

Update get method to return specific user details by ID

case "GET": 
        $sql = "SELECT * FROM users";
        $path = explode('/', $_SERVER['REQUEST_URI']);
        if(isset($path[3]) && is_numeric($path[3])) {
            $sql .= " WHERE id = :id";
            $stmt = $conn->prepare($sql);
            $stmt->bindParam(':id', $path[3]);
            $stmt->execute();
            $users = $stmt->fetch(PDO::FETCH_ASSOC);
        } else {
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }

        echo json_encode($users);
        break;

Now create update API to Handle PUT request

case "PUT": 
            $user = json_decode( file_get_contents('php://input') );
            $sql = "UPDATE users SET name= :name, email =:email, mobile =:mobile, updated_at =:updated_at WHERE id = :id";
            $stmt = $conn->prepare($sql);
            $updated_at = date('Y-m-d');
            $stmt->bindParam(':id', $user->id);
            $stmt->bindParam(':name', $user->name);
            $stmt->bindParam(':email', $user->email);
            $stmt->bindParam(':mobile', $user->mobile);
            $stmt->bindParam(':updated_at', $updated_at);

            if($stmt->execute()) {
                $response = ['status' => 1, 'message' => 'Record updated successfully.'];
            } else {
                $response = ['status' => 0, 'message' => 'Failed to update record.'];
            }
            echo json_encode($response);
            break;

Create DELETE PHP API, consume it using axios and delete user from database

Update src/components/ListUser.js

const deleteUser = (id) => {
        axios.delete(`http://localhost:8888/api/user/${id}/delete`).then(function(response){
        console.log(response.data);
        getUsers();
    });
}
<button onClick={() => deleteUser(user.id)}>Delete</button>

Update index.php again for writing delete API

case "DELETE": 
        $sql = "DELETE FROM users WHERE id = :id";
        $path = explode('/', $_SERVER['REQUEST_URI']);

        $stmt = $conn->prepare($sql);
        $stmt->bindParam(':id', $path[3]);
        if($stmt->execute()) {
            $response = ['status' => 1, 'message' => 'Record deleted successfully.'];
        } else {
            $response = ['status' => 0, 'message' => 'Failed to delete record.'];
        }
        echo json_encode($response);
        break;

Awesome, you have just completed REACT-CRUD using PHP and MySQL, Now run you application and build something beautiful.

You can download complete source code from GitHub:
https://github.com/durgesh-sahani/react-crud-php-api-mysql

Thank you for reading this blog.