MySQL Schema<\/p>\n\n\n\n
CREATE TABLE `users` (\n `id` int NOT NULL AUTO_INCREMENT,\n `name` varchar(50) NOT NULL,\n `age` int NOT NULL,\n `city` varchar(50) NOT NULL,\n PRIMARY KEY (`id`)\n) ENGINE=InnoDB;<\/code><\/pre>\n\n\n\nREST API<\/h2>\n\n\n\n
rest_api.php<\/p>\n\n\n\n
<?php\n\nheader('Access-Control-Allow-Origin: *');\n\n$servername = \"localhost\";\n$username = \"diituser\";\n$password = \"%TGBbgt5\";\n$dbname = \"ecom\";\n\ntry {\n $conn = new PDO(\"mysql:host=$servername;dbname=$dbname\", $username, $password);\n $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);\n\n} catch(PDOException $e) {\n echo \"Error: \" . $e->getMessage();\n}\n\n\n\n\nswitch($_SERVER['REQUEST_METHOD']) {\n case 'GET':\n\n if(isset($_REQUEST['id']) && $_REQUEST['id'] != '') {\n $id = $_REQUEST['id'];\n $sql = \"SELECT * FROM users WHERE id = $id\";\n $stmt = $conn->prepare($sql);\n $stmt->execute();\n $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);\n $records = $stmt->fetch();\n } else {\n $sql = \"SELECT * FROM users\";\n $stmt = $conn->prepare($sql);\n $stmt->execute();\n $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);\n $records = $stmt->fetchAll();\n }\n echo json_encode($records);\n\n case 'DELETE':\n\n $data = json_decode(file_get_contents('php:\/\/input'), true);\n\n $id = $data[\"id\"];\n $sql = \"DELETE FROM users WHERE id = $id\";\n $stmt = $conn->prepare($sql);\n $stmt->execute();\n echo json_encode([\"result\" => \"success\"]);\n\n case 'POST':\n\n $data = json_decode(file_get_contents('php:\/\/input'), true);\n\n $name = $data[\"name\"];\n $age = $data['age'];\n $city = $data['city'];\n $sql = \"INSERT INTO `users` (`id`, `name`, `age`, `city`) VALUES (NULL, '$name', '$age', '$city'); \";\n $stmt = $conn->prepare($sql);\n $stmt->execute();\n echo json_encode([\"result\" => \"success\"]);\n\n case 'PUT':\n\n $data = json_decode(file_get_contents('php:\/\/input'), true);\n\n $id = $data['id'];\n $name = $data[\"name\"];\n $age = $data['age'];\n $city = $data['city'];\n $sql = \"UPDATE users SET `name` = '$name', age = '$age', city = '$city' WHERE id = $id\";\n $stmt = $conn->prepare($sql);\n $stmt->execute();\n echo json_encode([\"result\" => \"success\"]);\n}\n\n\n$conn = null;\n<\/code><\/pre>\n\n\n\nFRONT END<\/h2>\n\n\n\n
script.js<\/p>\n\n\n\n
const api_url = \"rest_api.php\";\nfunction loadData(records = []) {\n var table_data = \"\";\n for (let i = 0; i < records.length; i++) {\n table_data += `<tr>`;\n table_data += `<td>${records[i].name}<\/td>`;\n table_data += `<td>${records[i].age}<\/td>`;\n table_data += `<td>${records[i].city}<\/td>`;\n table_data += `<td>`;\n table_data += `<a href=\"edit.php?id=${records[i].id}\"><button class=\"btn btn-primary\">Edit<\/button><\/a>`;\n table_data += \" \";\n table_data += `<button class=\"btn btn-danger\" onclick=deleteData('${records[i].id}')>Delete<\/button>`;\n table_data += `<\/td>`;\n table_data += `<\/tr>`;\n }\n \/\/console.log(table_data);\n document.getElementById(\"tbody\").innerHTML = table_data;\n}\nfunction getData() {\n fetch(api_url)\n .then((response) => response.json())\n .then((data) => {\n console.table(data);\n loadData(data);\n });\n}\nfunction getDataById(id) {\n fetch(`${api_url}?id=${id}`)\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n document.getElementById(\"id\").value = data.id;\n document.getElementById(\"name\").value = data.name;\n document.getElementById(\"age\").value = data.age;\n document.getElementById(\"city\").value = data.city;\n });\n}\nfunction postData() {\n var name = document.getElementById(\"name\").value;\n var age = document.getElementById(\"age\").value;\n var city = document.getElementById(\"city\").value;\n data = { name: name, age: age, city: city };\n fetch(api_url, {\n method: \"POST\",\n headers: {\n Accept: \"application\/json\",\n \"Content-Type\": \"application\/json\",\n },\n body: JSON.stringify(data),\n })\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n window.location.href = \"index.php\";\n });\n}\nfunction putData() {\n var id = document.getElementById(\"id\").value;\n var name = document.getElementById(\"name\").value;\n var age = document.getElementById(\"age\").value;\n var city = document.getElementById(\"city\").value;\n data = { id: id, name: name, age: age, city: city };\n fetch(api_url, {\n method: \"PUT\",\n headers: {\n Accept: \"application\/json\",\n \"Content-Type\": \"application\/json\",\n },\n body: JSON.stringify(data),\n })\n .then((response) => response.json())\n .then((data) => {\n console.table(data);\n window.location.href = \"index.php\";\n });\n}\nfunction deleteData(id) {\n user_input = confirm(\"Are you sure you want to delete this record?\");\n if (user_input) {\n fetch(api_url, {\n method: \"DELETE\",\n headers: {\n Accept: \"application\/json\",\n \"Content-Type\": \"application\/json\",\n },\n body: JSON.stringify({ id: id }),\n })\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n window.location.reload();\n });\n }\n}\n<\/code><\/pre>\n\n\n\nindex.php<\/p>\n\n\n\n
<html>\n\n<head>\n <title>Project<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" crossorigin=\"anonymous\"><\/script>\n<\/head>\n\n<body class=\"d-flex flex-column h-100 container\">\n <header>\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <div class=\"container-fluid\">\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">\n <div class=\"navbar-nav\">\n <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Listing<\/a>\n <a class=\"nav-link\" href=\"add.php\">Add New<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n <table class=\"table table-striped table-hover text-center\">\n <thead>\n <th>Name<\/th>\n <th>Age<\/th>\n <th>City<\/th>\n <th>Action<\/th>\n <\/thead>\n <tbody id=\"tbody\">\n <\/tbody>\n <tfoot>\n <\/tfoot>\n <\/table>\n <footer class=\"footer mt-auto py-3 bg-light\">\n <div class=\"container text-center\">\n <span class=\"text-muted\">right © 2021<\/span>\n <\/div>\n <\/footer>\n<\/body>\n<script src=\"script.js\"><\/script>\n<script>\n getData();\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\nadd.php<\/p>\n\n\n\n
<html>\n\n<head>\n <title>Project<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" crossorigin=\"anonymous\"><\/script>\n<\/head>\n\n<body class=\"d-flex flex-column h-100 container\">\n <header>\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <div class=\"container-fluid\">\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">\n <div class=\"navbar-nav\">\n <a class=\"nav-link\" href=\"index.php\">Listing<\/a>\n <a class=\"nav-link active\" aria-current=\"page\" href=\"add.php\">Add New<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n <h3>Add Document<\/h3>\n <form onsubmit=\"return false;\">\n <div class=\"mb-3\">\n <label for=\"name\" class=\"form-label\">Name<\/label>\n <input type=\"text\" class=\"form-control\" id=\"name\" autofocus>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"exampleInputPassword1\" class=\"form-label\">Age<\/label>\n <input type=\"text\" class=\"form-control\" id=\"age\">\n <\/div>\n <div class=\"mb-3\">\n <label for=\"city\" class=\"form-label\">City<\/label>\n <input type=\"text\" class=\"form-control\" id=\"city\">\n <\/div>\n <button class=\"btn btn-primary\" onclick=\"return postData()\">Submit<\/button>\n <a href=\"index.php\" class=\"btn btn-primary\">Cancel<\/a>\n <\/form>\n <footer class=\"footer mt-auto py-3 bg-light\">\n <div class=\"container text-center\">\n <span class=\"text-muted\">right © 2021<\/span>\n <\/div>\n <\/footer>\n<\/body>\n<script src=\"script.js\"><\/script>\n<script>\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\nedit.php<\/p>\n\n\n\n
<html>\n\n<head>\n <title>Project<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" crossorigin=\"anonymous\"><\/script>\n<\/head>\n\n<body class=\"d-flex flex-column h-100 container\">\n <header>\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <div class=\"container-fluid\">\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">\n <div class=\"navbar-nav\">\n <a class=\"nav-link\" href=\"index.php\">Listing<\/a>\n <a class=\"nav-link active\" aria-current=\"page\" href=\"add.php\">Add New<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n <h3>Edit Document<\/h3>\n <form onsubmit=\"return false;\">\n <input type=\"hidden\" class=\"form-control\" id=\"id\">\n <div class=\"mb-3\">\n <label for=\"name\" class=\"form-label\">Name<\/label>\n <input type=\"text\" class=\"form-control\" id=\"name\" autofocus>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"exampleInputPassword1\" class=\"form-label\">Age<\/label>\n <input type=\"text\" class=\"form-control\" id=\"age\">\n <\/div>\n <div class=\"mb-3\">\n <label for=\"city\" class=\"form-label\">City<\/label>\n <input type=\"text\" class=\"form-control\" id=\"city\">\n <\/div>\n <button class=\"btn btn-primary\" onclick=\"return putData()\">Update<\/button>\n <a href=\"index.php\" class=\"btn btn-primary\">Cancel<\/a>\n <\/form>\n <footer class=\"footer mt-auto py-3 bg-light\">\n <div class=\"container text-center\">\n <span class=\"text-muted\">right © 2021<\/span>\n <\/div>\n <\/footer>\n<\/body>\n<script src=\"script.js\"><\/script>\n<script>\n const urlParams = new URLSearchParams(window.location.search);\n const id = urlParams.get('id');\n getDataById(id);\n<\/script>\n\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
MySQL Schema REST API rest_api.php FRONT END script.js index.php add.php edit.php<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2185"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=2185"}],"version-history":[{"count":2,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2185\/revisions"}],"predecessor-version":[{"id":2187,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2185\/revisions\/2187"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=2185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=2185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=2185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}