index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Modules</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="module" src="./js/index.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container mt-5">
<div id="header-div"><h1 id="header-text">STUDENTS DATABASE</h1></div>
<div id="main-div">
<div class="row mt-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
id="school-id"
placeholder="School ID"
/>
</div>
<div class="col-md-6">
<input
type="text"
class="form-control"
id="last-name"
placeholder="Last Name"
/>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<input
class="form-control"
type="text"
id="first-name"
placeholder="First Name"
/>
</div>
<div class="col-md-6">
<select class="form-select" id="course"></select>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<input
type="date"
class="form-control"
id="birth-date"
placeholder="Birthday"
/>
</div>
<div class="col-md-6">
<input
type="text"
class="form-control"
id="address"
placeholder="Address"
/>
<br />
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<input
type="number"
class="form-control"
id="balance"
placeholder="Balance"
/>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-primary w-100" id="btn-submit">
Submit</button
><br />
</div>
</div>
</div>
<div id="table-div"></div>
<div id="footer-div"></div>
</div>
<!-- BLANK MODAL -->
<div class="modal fade" id="blank-modal" role="modal">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-white" style="background-color:#006400">
<h5 class="modal-title" id="blank-modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="blank-modal-body">
<div class="row" id="blank-main-div" style="padding:5px;"></div>
</div>
<div class="modal-footer" id="blank-modal-footer">
<button type="button" class="btn btn-secondary btn-sm w-100" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
index.js
import { viewModal } from "./modules/view.js";
const baseApiUrl = "http://localhost/jslecture/api";
sessionStorage.setItem("baseAPIUrl", baseApiUrl);
document.addEventListener("DOMContentLoaded", () => {
displayCourses();
displayStudents();
document.getElementById("btn-submit").addEventListener("click", () => {
insertStudent();
});
});
const displayStudents = async () => {
const response = await axios.get(`${baseApiUrl}/students.php`, {
params: { operation: "getAllStudents" },
});
if (response.status == 200) {
displayStudentsTable(response.data);
} else {
alert("Error!");
}
};
const displayStudentsTable = (students) => {
const tableDiv = document.getElementById("table-div");
tableDiv.innerHTML = "";
const table = document.createElement("table");
table.classList.add("table", "table-hover", "table-striped", "table-sm");
const thead = document.createElement("thead");
thead.innerHTML = `
<tr>
<th>ID</th>
<th>LAST NAME</th>
<th>FIRST NAME</th>
<th>COURSE</th>
<th>ADDRESS</th>
<th>ACTION</th>
</tr>
`;
table.appendChild(thead);
const tbody = document.createElement("tbody");
students.forEach((student) => {
let row = document.createElement("tr");
row.innerHTML = `
<td>${student.stud_school_id}</td>
<td>${student.stud_last_name}</td>
<td>${student.stud_first_name}</td>
<td>${student.crs_code}</td>
<td>${student.stud_address}</td>
<td>
<button type='button' class='btn btn-primary btn-sm btn-view'>View</button>
<button type='button' class='btn btn-success btn-sm btn-update'>Update</button>
<button type='button' class='btn btn-danger btn-sm btn-delete'>Delete</button>
</td>
`;
tbody.appendChild(row);
row.querySelector(".btn-view").addEventListener("click", () =>{
viewModal(student.stud_id);
});
row.querySelector(".btn-update").addEventListener("click", () =>{
alert("You clicked the UPDATE button");
});
row.querySelector(".btn-delete").addEventListener("click", () =>{
alert("You clicked the DELETE button");
});
});
table.appendChild(tbody);
tableDiv.appendChild(table);
};
const displayCourses = async () => {
const select = document.getElementById("course");
const response = await axios.get(`${baseApiUrl}/courses.php`, {
params: { operation: "getCourses" },
});
if (response.status == 200) {
//display courses in the select element
const courses = response.data;
courses.forEach((course) => {
let option = document.createElement("option");
option.innerText = course.crs_title;
option.value = course.crs_id;
select.appendChild(option);
});
} else {
alert("Error!");
}
};
const insertStudent = async () => {
const jsonData = {
schoolId: document.getElementById("school-id").value,
lastName: document.getElementById("last-name").value,
firstName: document.getElementById("first-name").value,
courseId: document.getElementById("course").value,
address: document.getElementById("address").value,
dob: document.getElementById("birth-date").value,
balance: document.getElementById("balance").value,
};
const formData = new FormData();
formData.append("operation", "insertStudent");
formData.append("json", JSON.stringify(jsonData));
const response = await axios({
url: `${baseApiUrl}/students.php`,
method: "POST",
data: formData,
});
console.log(response);
if (response.data == 1) {
displayStudents();
alert("Student Successfully save!");
} else {
alert("ERROR");
}
};
view.js
export const viewModal = async (studId) => {
//prepare the modal content
document.getElementById("blank-modal-title").innerText = "View Details";
const student = await getStudentDetails(studId);
console.log(student)
const myHtml = `
<table class="table table-sm">
<tr>
<td>School ID</td>
<td>${student[0].stud_school_id}</td>
</tr>
<tr>
<td>Last Name</td>
<td>${student[0].stud_last_name}</td>
</tr>
<tr>
<td>First Name</td>
<td>${student[0].stud_first_name}</td>
</tr>
<tr>
<td>Address</td>
<td>${student[0].stud_address}</td>
</tr>
<tr>
<td>Birthday</td>
<td>${student[0].stud_dob}</td>
</tr>
<tr>
<td>Course</td>
<td>${student[0].crs_code}</td>
</tr>
<tr>
<td>Balance</td>
<td>${student[0].stud_balance}</td>
</tr>
</table>
`;
document.getElementById("blank-main-div").innerHTML = myHtml;
const myModal = new bootstrap.Modal(document.getElementById("blank-modal"), {
keyboard: true,
backdrop: "static",
});
myModal.show();
};
const getStudentDetails = async (studId) => {
const params = {
operation: "getStudent",
json: JSON.stringify({ studId: studId }),
};
const response = await axios.get(
`${sessionStorage.baseAPIUrl}/students.php`,
{
params: params,
}
);
return response.data;
};
students.php
<?php
header('Content-Type: application/json');
header("Access-Control-Allow-Origin: *");
class Student {
function getAllStudents(){
//connect to the database
include "connection-pdo.php";
$sql = "SELECT a.*, b.crs_code
FROM tblstudents a INNER JOIN tblcourses b
ON a.stud_course_id = b.crs_id
ORDER BY a.stud_last_name";
$stmt = $conn->prepare($sql);
$stmt->execute();
$rs = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rs);
}
function insertStudent($json){
include "connection-pdo.php";
$json = json_decode($json, true);
$sql = "INSERT INTO tblstudents(stud_school_id, stud_last_name, stud_first_name, stud_course_id,
stud_address, stud_dob, stud_balance)
VALUES(:schoolId, :lastName, :firstName, :courseId, :address, :dob, :balance)";
$stmt = $conn->prepare($sql);
$stmt->bindParam(":schoolId", $json['schoolId']);
$stmt->bindParam(":lastName", $json['lastName']);
$stmt->bindParam(":firstName", $json['firstName']);
$stmt->bindParam(":courseId", $json['courseId']);
$stmt->bindParam(":address", $json['address']);
$stmt->bindParam(":dob", $json['dob']);
$stmt->bindParam(":balance", $json['balance']);
$stmt->execute();
$returnValue = 0;
if($stmt->rowCount() > 0){
$returnValue = 1;
}
echo json_encode($returnValue);
}
function getStudent($json){
include "connection-pdo.php";
$json = json_decode($json, true);
$sql = "SELECT a.*, b.crs_code
FROM tblstudents a INNER JOIN tblcourses b
ON a.stud_course_id = b.crs_id
WHERE a.stud_id = :studId";
$stmt = $conn->prepare($sql);
$stmt->bindParam(":studId", $json['studId']);
$stmt->execute();
$rs = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rs);
}
}
//submitted by the client - operation and json
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
$operation = $_GET['operation'];
$json = isset($_GET['json']) ? $_GET['json'] : "";
}else if($_SERVER['REQUEST_METHOD'] == 'POST'){
$operation = $_POST['operation'];
$json = isset($_POST['json']) ? $_POST['json'] : "";
}
$student = new Student();
switch($operation){
case "getAllStudents":
echo $student->getAllStudents();
break;
case "insertStudent":
echo $student->insertStudent($json);
break;
case "getStudent":
echo $student->getStudent($json);
break;
}
?>
No comments:
Post a Comment