Code as used in the video:
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>
</body>
</html>
index.js
const baseApiUrl = "http://localhost/jslecture/api";
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>
</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>
`;
tbody.appendChild(row);
});
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");
}
}
No comments:
Post a Comment