Install bootstrap
npm install react-bootstrap bootstrap@5.1.3
C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3
https://react-bootstrap.github.io/getting-started/introduction/
run
C:\reactdev\myreactdev>npm start
CREATE TABLE `employee` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`position` varchar(100) NOT NULL,
`office` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`salary` int(11) NOT NULL,
`date_of_join` date NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`, `date_of_join`) VALUES
(1, 'Tiger Wood', 'Accountant', 'Tokyo', 36, 5689, '2020-01-09'),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, 5648, '2020-02-15'),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, 5689, '2020-03-01'),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, 54654, '2020-01-24'),
(5, 'Rhona Davidson', 'Software Engineer', 'San Francisco', 26, 5465, '2020-01-11'),
(6, 'Quinn Flynn', 'Integration Specialist', 'New York', 53, 56465, '2020-02-23'),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, 456, '2020-03-04'),
(9, 'Airi Satou updated', 'Pre-Sales Support updated', 'New York', 25, 4568, '2020-04-28'),
(10, 'Angelica Ramos updated', 'Sales Assistant updated', 'New York', 45, 456, '2020-01-12'),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, 54565, '2020-02-06'),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, 5485, '2020-03-21'),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, 65468, '2020-04-14'),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, 354685, '2020-01-29'),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, 65465, '2020-02-22'),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, 56465, '2020-03-10'),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, 6548, '2020-04-26'),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, 545, '2020-01-17'),
(19, 'Sakura Yamamoto', 'Support Engineer', 'Tokyo', 48, 5468, '2021-02-01'),
(20, 'Serge Baldwin', 'Data Coordinator', 'Singapore', 85, 5646, '2021-03-19'),
(21, 'Shad Decker', 'Regional Director', 'Tokyo', 45, 4545, '2022-03-09');
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
URL : http://localhost/devtest/reactjs/employee.php
src/index.js //src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' ReactDOM.render(public/index.html, document.getElementById('root') )
//public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>ReactJS </title> </head> <body> <div id="root"></div> </body> </html>src/App.js
//src/App.js import {useEffect,useState} from 'react'; const Dashboard = () => { const[record,setRecord] = useState([]) const [rs,setrs] = useState({ id:'', userName:'', username:'', email:'', website:'' }) const getData = () => { fetch('http://localhost/devtest/reactjs/employee.php') .then(resposne=> resposne.json()) .then(res=>setRecord(res)) } useEffect(() => { getData(); },[]) const showDetail = (id) => { fetch(`http://localhost/devtest/reactjs/employee.php?id=${id}`) .then(resposne=> resposne.json()) .then(res=>setrs(res)) } return ( <div class="container mt-2"> <div class="row mt-2 "> <div class="col-lg-1 col-md-6 col-sm-12"> </div> <div class="col-lg-11 col-md-6 col-sm-12"> <h4 class="mt-3 mb-3 text-secondary"> ReactJS PHP Mysqli Display Record in Modal Box | Bootstrap Modal </h4> <div class=" mt-5"> <table class="table table-striped table-sm"> <thead class="thead-light"> <tr> <th>No</th> <th>Name</th> <th>Position</th> <th>Show Details</th> </tr> </thead> <tbody> {record.map((names,index)=> <tr key={index}> <td>{names.id}</td> <td>{names.name}</td> <td>{names.position}</td> <td><button class="btn btn-primary" onClick={(e)=>showDetail(names.id)} data-bs-toggle="modal" data-bs-target="#myModal">View Details</button></td> </tr> )} </tbody> </table> </div> </div> </div> <div class="modal" id="myModal"> <div class="modal-dialog" style={{width:"700px"}}> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Employee Details</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Employee ID : {rs.id}</p> <p>Name : {rs.name}</p> <p>Position : {rs.position}</p> <p>Office : {rs.office}</p> <p>Age : {rs.age}</p> <p>Salary : {rs.salary}</p> <p>Date Hire : {rs.date_of_join}</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> ) } export default Dashboardemployee.php http://localhost/devtest/reactjs/employee.php
//employee.php http://localhost/devtest/reactjs/employee.php <?php header("Access-Control-Allow-Origin: *"); //add this CORS header to enable any domain to send HTTP requests to these endpoints: $host = "localhost"; $user = "root"; $password = ""; $dbname = "testingdb"; $id = ''; $con = mysqli_connect($host, $user, $password,$dbname); $method = $_SERVER['REQUEST_METHOD']; if (!$con) { die("Connection failed: " . mysqli_connect_error()); } switch ($method) { case 'GET': if(isset($_GET["id"])){ $id = $_GET['id']; } //$sql = "select * from employee"; $sql = "select * from employee".($id?" where id=$id":''); break; } // run SQL statement $result = mysqli_query($con,$sql); // die if SQL statement failed if (!$result) { http_response_code(404); die(mysqli_error($con)); } if ($method == 'GET') { if (!$id) echo '['; for ($i=0 ; $i<mysqli_num_rows($result) ; $i++) { echo ($i>0?',':'').json_encode(mysqli_fetch_object($result)); } if (!$id) echo ']'; }else { echo mysqli_affected_rows($con); } $con->close();