By GokiSoft.com|
15:12 05/06/2023|
Học JS
[Share Code] Tìm hiểu về JSON & Ứng dụng JSON trong dự án & API - C2209I
#guideline.txt
Nội dung kiến thức:
- JSON:
- Tạo tài liệu JSON
- Trao đổi dữ liệu Client & Server
- Chuyển Object / Array <-> JSON -> Dễ code
- NoSQL -> JSON -> MongoDB
- Hiểu về nó
- Ứng dụng ở đâu
- Ví dụ ứng dụng JSON trong phát triển phần mềm
- Client: Dự án quản lý sinh viên
- Bố nhớ
- localStorage: Browser -> JS thao tác dữ liệu
key -> dữ liệu (string)
- cookie: Browser (Client) -> JS thao tác dữ liệu & sử dụng ngôn ngữ server để thao tác dữ liêu -> Đọc lại
- session: Server -> Chỉ sử dụng ngôn ngữ phía server để thao tác dữ liệu
- sql
- Sql server
- mysql
- Code API
- Hiểu API là gì
- HTTP/HTTPS (GET/POST)
- Rest (Restfull) (GET/PUT/POST/DELETE)
- Ứng dụng
======================================================================
#index.php
[{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"},{"fullname":"345345345","email":"gokisoft.com@gmail.com","birthday":"2023-06-05","address":"345345345"}]#student.json
[
{
"fullname": "TRAN VAN A",
"age": 20,
"address": "Ha Noi"
},
{
"fullname": "TRAN VAN B",
"age": 20,
"address": "Ha Noi"
}
]#vidu.html
<!DOCTYPE html>
<html>
<head>
<title>Student Management Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading bg-info p-2 mb-3">
<h2 class="text-center">Input Form</h2>
</div>
<div class="panel-body">
<div class="form-group mb-3">
<label for="usr">Name:</label>
<input required="true" type="text" class="form-control" id="usr">
</div>
<div class="form-group mb-3">
<label for="email">Email:</label>
<input required="true" type="email" class="form-control" id="email">
</div>
<div class="form-group mb-3">
<label for="birthday">Birthday:</label>
<input type="date" class="form-control" id="birthday">
</div>
<div class="form-group mb-3">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address">
</div>
<button class="btn btn-success" onclick="addUser()">Register</button>
<button class="btn btn-success" onclick="callAPI()">Call API</button>
</div>
</div>
</div>
<div class="container mt-5">
<div class="panel panel-primary">
<div class="panel-heading bg-info p-2 mb-3">
<h2 class="text-center">Student Management</h2>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Birthday</th>
<th>Address</th>
<th style="width: 200px"></th>
</tr>
</thead>
<tbody id="std-list-id">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
// Quan ly thong tin sinh vien vao 1 mang:
var stdList = [];
var json = localStorage.getItem('student-list')
if(json != null && json != "") {
stdList = JSON.parse(json)
showStudents()
}
function addUser() {
let fname = document.getElementById('usr').value
let email = document.getElementById('email').value
let birthday = document.getElementById('birthday').value
let address = document.getElementById('address').value
let std = {
fullname: fname,
email: email,
birthday: birthday,
address: address
}
stdList.push(std)
console.log(stdList)
showStudents()
//Luu thong tin sinh vien -> localStorage
let json = JSON.stringify(stdList)
localStorage.setItem('student-list', json)
}
function showStudents() {
let html = ``
for (var i = 0; i < stdList.length; i++) {
html += `<tr>
<td>${stdList[i].fullname}</td>
<td>${stdList[i].email}</td>
<td>${stdList[i].birthday}</td>
<td>${stdList[i].address}</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>`
}
document.getElementById('std-list-id').innerHTML = html
}
function callAPI() {
$.get('http://localhost:8081/api/index.php', function(data) {
console.log(data)
stdList = JSON.parse(data)
showStudents()
})
}
</script>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
