├── css
    └── style.css
├── database
    ├── php_fetch_crud_2022-03-09_201959.sql
    └── table.sql
├── index.php
├── js
    └── app.js
└── php
    ├── config.php
    ├── delete-data.php
    ├── edit-data.php
    ├── get-total-count.php
    ├── insert-data.php
    ├── select-data.php
    └── update-data.php


/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0px;
  5 |     padding: 0px;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Fredoka', sans-serif;
  8 | }
  9 | .container-fluid{
 10 |     padding: 20px;
 11 |     background-color: #B53471;
 12 | }
 13 | .container-fluid .container{
 14 |     text-align: center;
 15 |     color: white;
 16 | }
 17 | 
 18 | .container{
 19 |     width: 80%;
 20 |     margin: 0px auto;
 21 | }
 22 | 
 23 | .card{
 24 |     border: 2px solid #6F1E51;
 25 |     width: 100%;
 26 |     padding: 10px 5px;
 27 |     margin: 20px 0px;
 28 |     border-radius:10px;
 29 | }
 30 | .card-body{
 31 |     display: flex;
 32 |     justify-content: space-between;
 33 |     align-items: center;
 34 | }
 35 | 
 36 | .btn{
 37 |     outline: none;
 38 |     border: none;
 39 |     padding: 10px 15px;
 40 |     border-radius: 10px;
 41 |     font-size: 18px;
 42 |     cursor: pointer;
 43 | }
 44 | .btn-primary{
 45 |     background-color: #0652DD;
 46 |     color: white;
 47 | }
 48 | .btn:active{
 49 |     transform:scale(.9)
 50 | }
 51 | 
 52 | table{
 53 |     width: 100%;
 54 |     border: 2px solid #eee;
 55 |     border-collapse: collapse;
 56 | }
 57 | thead tr th{
 58 |     border: 2px solid #eee;
 59 |     padding: 10px !important;
 60 | }
 61 | tr{
 62 |     border: 2px solid #eee;
 63 |     width: 100%;
 64 |     text-align: center;
 65 | }
 66 | tr>td{
 67 |     border: 2px solid #eee;
 68 |     padding: 10px !important;
 69 | 
 70 | }
 71 | 
 72 | .btn-success{
 73 |     background-color: #006266;
 74 |     color: white;
 75 | }
 76 | .btn-danger{
 77 |     background-color: #EA2027;
 78 |     color: white;
 79 | }
 80 | .modal{
 81 |     position:fixed;
 82 |     top: 0;
 83 |     background-color: rgba(0, 0, 0, 0.842);
 84 |     width: 100%;
 85 |     height: 100vh;
 86 |     display:none;
 87 |     justify-content: center;
 88 |     align-items:center;
 89 | }
 90 | .modal-body{
 91 |     background-color: white;
 92 |     width: 50%;
 93 |     padding: 30px;
 94 |     border-radius: 10px;
 95 | }
 96 | .modal-body h3{
 97 |     margin-bottom: 30px ;
 98 |     text-align: center;
 99 | }
100 | label{
101 |     margin: 10px 0px;
102 | }
103 | .form-group{
104 |     margin: 20px 0px;
105 | }
106 | .form-control{
107 |     width: 100%;
108 |     outline: none;
109 |     border: none;
110 |     background-color:none;
111 |     border-bottom: 1px solid #006266;
112 |     padding: 10px 0px;
113 |     font-size: 18px;
114 | }
115 | 
116 | .buttons{
117 |     display: flex;
118 |     justify-content: space-between;
119 | }
120 | 
121 | .alerts{
122 | }
123 | .alert{
124 |     position:fixed;
125 |     top: 10px;
126 |     right: 20px;
127 |     padding: 10px 20px;
128 |     border-radius: 10px;
129 |     color: white;
130 |     font-size: 18px;
131 | }
132 | .alert-success{
133 |     background-color: rgb(31, 192, 31);
134 |     display:none;
135 | }
136 | 
137 | .alert-danger{
138 |     background-color: rgb(194, 27, 27);
139 |     display:none;
140 | }
141 | @media screen and (max-width:700px) {
142 |     .table-responsive{
143 |         overflow-x: scroll;
144 |     }
145 | }


--------------------------------------------------------------------------------
/database/php_fetch_crud_2022-03-09_201959.sql:
--------------------------------------------------------------------------------
1 | /*!40101 SET NAMES utf8 */;
2 | /*!40014 SET FOREIGN_KEY_CHECKS=0 */;
3 | /*!40101 SET SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
4 | /*!40111 SET SQL_NOTES=0 */;
5 | CREATE DATABASE /*!32312 IF NOT EXISTS*/ php_fetch_crud /*!40100 DEFAULT CHARACTER SET utf8mb4 */;
6 | USE php_fetch_crud;
7 | 
8 | 


--------------------------------------------------------------------------------
/database/table.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE students(
2 |   id int NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'Primary Key',
3 |   std_name VARCHAR(255) COMMENT '',
4 |   std_age VARCHAR(255) COMMENT '',
5 |   std_country VARCHAR(255) COMMENT ''
6 | ) DEFAULT CHARSET UTF8 COMMENT '';


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Curd with javascript fetch</title>
  9 |     <link rel="stylesheet" href="css/style.css">
 10 | </head>
 11 | 
 12 | <body>
 13 |     <div class="container">
 14 |         <div class="alerts">
 15 |             <div class="alert alert-success">gg</div>
 16 |             <div class="alert alert-danger">ee</div>
 17 |         </div>
 18 |     </div>
 19 |     <div class="container-fluid">
 20 |         <div class="container">
 21 |             <h1>Crud with Javascript fetch api</h1>
 22 |         </div>
 23 |     </div>
 24 |     <div class="container">
 25 |         <div class="card">
 26 |             <div class="card-body">
 27 |                 <h3>Students ( <span id="total"></span> )</h4>
 28 |                     <button class="btn btn-primary" id="create">Create</button>
 29 |             </div>
 30 |         </div>
 31 |     </div>
 32 | 
 33 |     <div class="container">
 34 |         <div class="table-responsive">
 35 |             <table>
 36 |                 <thead>
 37 |                     <tr>
 38 |                         <th>Id</th>
 39 |                         <th>Name</th>
 40 |                         <th>Age</th>
 41 |                         <th>Country</th>
 42 |                         <th>Edit</th>
 43 |                         <th>Delete</th>
 44 |                     </tr>
 45 |                 </thead>
 46 |                 <tbody id="tbody">
 47 |                    
 48 |                 </tbody>
 49 |             </table>
 50 |         </div>
 51 |     </div>
 52 | 
 53 |     <!-- create student model -->
 54 | 
 55 |     <!-- <div class="container"> -->
 56 |     <div class="modal" id="create-student">
 57 |         <div class="modal-body">
 58 |             <h3>Create Student</h3>
 59 |             <div class="form-group">
 60 |                 <label for=""><b>Enter your Name</b></label>
 61 |                 <input type="text" placeholder="Enter your name" id="name" class="form-control">
 62 |             </div>
 63 |             <div class="form-group">
 64 |                 <label for=""><b>Enter your Age</b></label>
 65 |                 <input type="number" placeholder="Enter your age" id="age" class="form-control">
 66 |             </div>
 67 |             <div class="form-group">
 68 |                 <label for=""><b>Enter your Country</b></label>
 69 |                 <input type="text" placeholder="Enter your country" id="country" class="form-control">
 70 |             </div>
 71 |             <div class="form-group buttons">
 72 |                 <button class="btn btn-success" type="submit" id="save">Save</button>
 73 |                 <button class="btn btn-danger" type="submit" id="close">Close</button>
 74 |             </div>
 75 |         </div>
 76 |     </div>
 77 |     <!-- </div> -->
 78 | 
 79 |     <!-- edit student -->
 80 |     <div class="modal" id="update-student">
 81 |         <div class="modal-body">
 82 |             <h3>Update Student</h3>
 83 |             <div class="form-group">
 84 |                 <label for=""><b>Enter your Name</b></label>
 85 |                 <input type="text" placeholder="Enter your name" id="edit_name" class="form-control">
 86 |                 <input type="hidden" placeholder="Id" id="id" class="form-control">
 87 |             </div>
 88 |             <div class="form-group">
 89 |                 <label for=""><b>Enter your Age</b></label>
 90 |                 <input type="number" placeholder="Enter your age" id="edit_age" class="form-control">
 91 |             </div>
 92 |             <div class="form-group">
 93 |                 <label for=""><b>Enter your Country</b></label>
 94 |                 <input type="text" placeholder="Enter your country" id="edit_country" class="form-control">
 95 |             </div>
 96 |             <div class="form-group buttons">
 97 |                 <button class="btn btn-success" id="update" type="submit">Update</button>
 98 |                 <button class="btn btn-danger" type="submit" id="update_close">Close</button>
 99 |             </div>
100 |         </div>
101 |     </div>
102 |     <script src="js/app.js"></script>
103 | </body>
104 | 
105 | </html>
106 | 


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | let create = document.querySelector("#create");
  2 | let modal = document.querySelector("#create-student");
  3 | let update_model = document.querySelector("#update-student");
  4 | let close = document.querySelector("#close")
  5 | let update_close = document.querySelector("#update_close")
  6 | let save = document.querySelector("#save");
  7 | let update = document.querySelector("#update");
  8 | let success = document.querySelector(".alert-success")
  9 | let error = document.querySelector(".alert-danger")
 10 | 
 11 | 
 12 | create.addEventListener("click", () => {
 13 |     modal.style.display = "flex";
 14 | });
 15 | close.addEventListener("click", () => {
 16 |     modal.style.display = "none";
 17 | })
 18 | update_close.addEventListener("click", () => {
 19 |     update_model.style.display = "none";
 20 | 
 21 | })
 22 | 
 23 | 
 24 | // create Student
 25 | 
 26 | save.addEventListener("click", async () => {
 27 |     try {
 28 |         let name = document.querySelector("#name").value;
 29 |         let age = document.querySelector("#age").value;
 30 |         let country = document.querySelector("#country").value;
 31 | 
 32 | 
 33 |         const res = await fetch("php/insert-data.php", {
 34 |             method: "POST",
 35 |             body: JSON.stringify({ "name": name, "age": age, "country": country }),
 36 |             headers: {
 37 |                 "Content-Type": "application/json"
 38 |             }
 39 |         });
 40 |         const output = await res.json();
 41 | 
 42 |         if (output.success) {
 43 |             success.style.display = "flex";
 44 |             success.innerText = output.message;
 45 |             name = "";
 46 |             age = "";
 47 |             country = "";
 48 |             modal.style.display = "none";
 49 |             getStudents();
 50 |             getTotalCount();
 51 |             setTimeout(() => {
 52 |                 success.style.display = "none";
 53 |                 success.innerText = "";
 54 | 
 55 |             }, 1000)
 56 | 
 57 |         } else {
 58 |             error.style.display = "flex";
 59 |             error.innerText = output.message;
 60 |             setTimeout(() => {
 61 |                 error.style.display = "none";
 62 |                 error.innerText = "";
 63 | 
 64 |             }, 1000)
 65 |         }
 66 |     } catch (error) {
 67 |         error.style.display = "flex";
 68 |         error.innerText = error.message;
 69 |         setTimeout(() => {
 70 |             error.style.display = "none";
 71 |             error.innerText = "";
 72 | 
 73 |         }, 1000)
 74 |     }
 75 | });
 76 | 
 77 | // select Student
 78 | 
 79 | const getStudents = async () => {
 80 |     try {
 81 |         const tbody = document.querySelector("#tbody");
 82 |         let tr = "";
 83 |         const res = await fetch("php/select-data.php", {
 84 |             method: "GET",
 85 |             headers: {
 86 |                 "Content-Type": "application/json"
 87 |             }
 88 |         });
 89 | 
 90 |         const output = await res.json();
 91 |         if (output.empty === "empty") {
 92 |             tr = "<tr>Record Not Found</td>"
 93 |         } else {
 94 |             for (var i in output) {
 95 |                 tr += `
 96 |             <tr>
 97 |             <td>${parseInt(i) + 1}</td>
 98 |             <td>${output[i].std_name}</td>
 99 |             <td>${output[i].std_age}</td>
100 |             <td>${output[i].std_country}</td>
101 |             <td><button onclick="editStudent(${output[i].id})" class="btn btn-success">Edit</button></td>
102 |             <td><button onclick="deleteStudent(${output[i].id})"  class="btn btn-danger">Delete</button></td>
103 |             </tr>`
104 |             }
105 |         }
106 |         tbody.innerHTML = tr;
107 |     } catch (error) {
108 |         console.log("error " + error)
109 |     }
110 | }
111 | 
112 | getStudents();
113 | 
114 | 
115 | // edit students
116 | 
117 | const editStudent = async (id) => {
118 |     update_model.style.display = "flex";
119 | 
120 |     const res = await fetch(`php/edit-data.php?id=${id}`, {
121 |         method: "GET",
122 |         headers: { 'Content-Type': 'application/json' }
123 |     })
124 |     const output = await res.json();
125 |     if (output["empty"] !== "empty") {
126 |         for (var i in output) {
127 |             document.querySelector("#id").value = output[i].id
128 |             document.querySelector("#edit_name").value = output[i].std_name
129 |             document.querySelector("#edit_age").value = output[i].std_age
130 |             document.querySelector("#edit_country").value = output[i].std_country
131 |         }
132 |     }
133 | 
134 | }
135 | 
136 | // update student
137 | 
138 | update.addEventListener("click", async () => {
139 |     let id = document.querySelector("#id").value;
140 |     let name = document.querySelector("#edit_name").value;
141 |     let age = document.querySelector("#edit_age").value;
142 |     let country = document.querySelector("#edit_country").value;
143 | 
144 |     const res = await fetch("php/update-data.php", {
145 |         method: "POST",
146 |         body: JSON.stringify({
147 |             "id": id,
148 |             "name": name,
149 |             "age": age,
150 |             "country": country
151 |         })
152 |     });
153 | 
154 |     const output = await res.json();
155 |     if (output.success) {
156 |         success.style.display = "flex";
157 |         success.innerText = output.message;
158 |         name = "";
159 |         age = "";
160 |         country = "";
161 |         update_model.style.display = "none";
162 |         getStudents();
163 |         setTimeout(() => {
164 |             success.style.display = "none";
165 |             success.innerText = "";
166 | 
167 |         }, 1000)
168 |     } else {
169 |         error.style.display = "flex";
170 |         error.innerText = output.message;
171 |         setTimeout(() => {
172 |             error.style.display = "none";
173 |             error.innerText = "";
174 |         }, 1000)
175 |     }
176 | 
177 | })
178 | 
179 | // delete student
180 | 
181 | const deleteStudent = async (id) => {
182 |     const res = await fetch("php/delete-data.php?id=" + id, {
183 |         method: "GET",
184 |     });
185 |     const output = await res.json();
186 |     if (output.success) {
187 |         success.style.display = "flex";
188 |         success.innerText = output.message;
189 |         setTimeout(() => {
190 |             success.style.display = "none";
191 |             success.innerText = "";
192 |         }, 1000)
193 |         getStudents();
194 |         getTotalCount();
195 |     } else {
196 |         error.style.display = "flex";
197 |         error.innerText = output.message;
198 |         setTimeout(() => {
199 |             error.style.display = "none";
200 |             error.innerText = "";
201 |         }, 1000)
202 |     }
203 | }
204 | 
205 | // get total count  students;
206 | 
207 | const getTotalCount = async () => {
208 |     let total = document.querySelector("#total");
209 |     const res = await fetch("php/get-total-count.php", {
210 |         method: "GET"
211 |     })
212 |     const output = await res.json();
213 |     total.innerText = output;
214 | }
215 | getTotalCount();


--------------------------------------------------------------------------------
/php/config.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $localhost="localhost";
 4 | $username="root";
 5 | $password="";
 6 | $database="php_fetch_crud";
 7 | 
 8 | $conn=mysqli_connect($localhost,$username,$password,$database);
 9 | 
10 | ?>


--------------------------------------------------------------------------------
/php/delete-data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include "config.php";
 3 | 
 4 | $id=$_GET["id"];
 5 | $sql="DELETE  FROM students WHERE id='{$id}'";
 6 | $run_sql=mysqli_query($conn,$sql);
 7 | if($run_sql){
 8 |     echo json_encode(["success"=>true,"message"=>"Student Delete Succcessfully"]);
 9 | }else{
10 |     echo json_encode(["success"=>false,"message"=>"Server Problem"]);
11 | }
12 | 
13 | 
14 | ?>


--------------------------------------------------------------------------------
/php/edit-data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | include "config.php";
 4 | if(isset($_GET["id"])){
 5 |     $id=$_GET["id"];
 6 | $sql="SELECT * FROM students WHERE id='{$id}'";
 7 | $run_sql=mysqli_query($conn,$sql);
 8 | $output=[];
 9 | if(mysqli_num_rows($run_sql) > 0){
10 |     while($row=mysqli_fetch_assoc($run_sql)){
11 |         $output[]=$row;
12 |     }
13 | }else{
14 |     $output["empty"]="empty";
15 | }
16 | echo json_encode($output);
17 | }
18 | ?>


--------------------------------------------------------------------------------
/php/get-total-count.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include "config.php";
 3 | 
 4 | $sql="SELECT * FROM students";
 5 | $run_sql=mysqli_query($conn,$sql);
 6 | $result=mysqli_num_rows($run_sql);
 7 | 
 8 | echo json_encode($result);
 9 | 
10 | 
11 | ?>


--------------------------------------------------------------------------------
/php/insert-data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | include 'config.php';
 4 | 
 5 | // if(isset($_POST["name"]) || isset($_POST["age"]) || isset($_POST["country"])){
 6 |     $input=file_get_contents("php://input");
 7 |     $decode=json_decode($input,true);
 8 | 
 9 |     $name=$decode["name"];
10 |     $age=$decode["age"];
11 |     $country=$decode["country"];
12 | 
13 |     $sql="INSERT INTO students (std_name,std_age,std_country) VALUES ('{$name}',{$age},'{$country}')";
14 |     $run_sql=mysqli_query($conn,$sql);
15 |     if($run_sql){
16 |         echo json_encode(["success"=>true,"message"=>"Student Add Succcessfully"]);
17 |     }else{
18 |         echo json_encode(["success"=>false,"message"=>"Server Problem"]);
19 |     }
20 | // }
21 | 
22 | ?>


--------------------------------------------------------------------------------
/php/select-data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | include "config.php";
 4 | 
 5 | $sql="SELECT * FROM students ORDER BY id DESC";
 6 | $run_sql=mysqli_query($conn,$sql);
 7 | $output=[];
 8 | if(mysqli_num_rows($run_sql) > 0){
 9 |     while($row=mysqli_fetch_assoc($run_sql)){
10 |         $output[]=$row;
11 |     }
12 | }else{
13 |     $output["empty"]="empty";
14 | }
15 | echo json_encode($output);
16 | // print_r($output);
17 | ?>


--------------------------------------------------------------------------------
/php/update-data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include "config.php";
 3 | 
 4 | $input=file_get_contents("php://input");
 5 | $decode=json_decode($input,true);
 6 | 
 7 | $id=$decode['id'];
 8 | $name=$decode['name'];
 9 | $age=$decode['age'];
10 | $country=$decode['country'];
11 | 
12 | 
13 | $sql="UPDATE students SET std_name='{$name}', std_age='{$age}', std_country='{$country}' WHERE id='{$id}'";
14 | $run_sql=mysqli_query($conn,$sql);
15 | 
16 | if($run_sql){
17 |     echo json_encode(["success"=>true,"message"=>"Student Update Succcessfully"]);
18 | }else{
19 |     echo json_encode(["success"=>false,"message"=>"Server Problem"]);
20 | }
21 | 
22 | ?>


--------------------------------------------------------------------------------