React JS Submit Form with php mysql

React JS Submit Form with php mysql

Create Project

C:\react-js>npx create-react-app myreactdev

Run

C:\react-js\myreactdev> npm start

Install React Router Dom

https://www.npmjs.com/package/react-router-dom

C:\react-js\myreactdev>npm i react-router-dom --save

Install Axios

https://www.npmjs.com/package/axios

C:\react-js\myreactdev>npm install axios --save

C:\react-js\myreactdev\src\App.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

//react-js\myreactdev\src\App.js import { useState } from 'react'; import axios from 'axios'; import './App.css';   function App() {   const [name,setName] = useState('');   const [mobile,setMobile] = useState('');   const [email,setEmail] = useState('');     const handleSubmit = () => {     if(name.length === 0){       alert("Name has left Blank!");     }     else if(mobile.length === 0){       alert("Mobile has left Blank!");     }     else if(email.length === 0){       alert("Email has left Blank!");     }     else{       const url = 'http://localhost/test/formsubmit.php';       let fData = new FormData();       fData.append('name', name);       fData.append('mobile', mobile);       fData.append('email', email);       axios.post(url, fData).then(response=> alert(response.data)).catch(error=> alert(error));     }   }     return (     <div className="vh-100 gradient-custom">       <div className="mask d-flex align-items-center h-100 gradient-custom-3">         <div className="container h-100">             <div className="row d-flex justify-content-center align-items-center h-100">             <div className="col-12 col-md-9 col-lg-7 col-xl-6">             <div className="card">               <div className="card-body p-5">                 <h3 className="text-center mb-5">React JS Submit Form with php mysql</h3>                 <form>                   <div className="form-outline mb-4">                     <label className="form-label" for="name">Your Name</label>                     <input type="text" className="form-control form-control-lg" name="name" id="name" value={name} onChange={(e) => setName(e.target.value)} />                   </div>                   <div className="form-outline mb-4">                     <label className="form-label" for="mobile">Your Mobile</label>                     <input type="text" className="form-control form-control-lg" name="mobile" id="mobile" value={mobile} onChange={(e) => setMobile(e.target.value)} />                   </div>                   <div className="form-outline mb-4">                   <label className="form-label" for="email">Your Email</label>                     <input type="email" className="form-control form-control-lg" name="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />                   </div>                   <div className="form-check d-flex justify-content-center mb-5">                     <input className="form-check-input me-2" type="checkbox" value="" id="form2Example3cg" />                     <label className="form-check-label" for="form2Example3g">                       I agree all statements in <a href="#!" className="text-body"><u>Terms of service</u></a>                     </label>                   </div>                   <div className="d-flex justify-content-center">                   <input type="button" className="btn btn-success btn-block btn-lg gradient-custom-4 text-body" name="submit" id="submit" value="Register" onClick={handleSubmit} />                   </div>                     <p className="text-center text-muted mt-5 mb-0">Have already an account? <a href="#!" className="fw-bold text-body"><u>Login here</u></a></p>                   </form>             </div>             </div>             </div>             </div>         </div>       </div>     </div>   ); }   export default App;

react-js\myreactdev\src\App.css

?

1 2 3 4 5 6 7

//react-js\myreactdev\src\App.css .card {   border-radius: 15px; } .gradient-custom {   background: linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1)); }

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/

CREATE TABLE `reactusers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`mobile` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

http://localhost/test/formsubmit.php

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//http://localhost/test/formsubmit.php <?php     header('Access-Control-Allow-Origin: *');           $conn = new mysqli("localhost","root","","projectdb");           if(mysqli_connect_error()){         echo mysqli_connect_error();         exit();     }     else{         $name = $_POST['name'];         $mobile = $_POST['mobile'];         $email = $_POST['email'];                   $sql = "INSERT INTO reactusers(name,mobile,email) VALUES('$name','$mobile','$email');";         $res = mysqli_query($conn, $sql);                   if($res){             echo "Success!";         }         else{             echo "Error!";         }         $conn->close();     } ?>

Run C:\react-j\myreactdev>npm start