Thêm/sửa/xóa khóa học với Fetch và REST API
HTML-код
- Опубликовано: 18 сен 2024
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Trong video này mình đưa ra một ví dụ hơn giản làm chức năng Thêm/sửa/xóa khóa học với Fetch và REST API. Tuy chỉ là ví dụ nhỏ nhưng trong thực tế đây chính là cách mà website tương tác với dữ liệu qua API.
#hoclaptrinh #hoclaptrinhmienphi #javascript #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
Hôm nay em mới phỏng vấn xong. Với vị trí frontend. Những câu hỏi người tuyển dụng hỏi đều có hết trong những kiến thức anh đã dạy. Và họ đáng giá tốt về buổi phỏng vấn. Em thật sự cảm ơn anh đã cho em những kiến thức bổ ích này. Em sẽ cố gắng hơn nữa. Em chúc anh và gia đình anh thật mạnh khỏe và nhiều niềm vui. I love Mr. Sơn
Chúc mừng em nha
bạn phỏng vấn fresher hay intern ạ?
Cho mình hỏi là những phần nào của F8 channel được hỏi trong buổi phỏng vấn vậy ạ?
ngta hỏi những gì vậy bạn chia sẻ mình với đc ko bn
@@F8VNOfficial Anh Sơn ơi còn các phần dưới như localStorage, ... các thứ khác thì anh để ở series nào vậy ạ, em học xong js cơ bản lẫn nâng cao rồi nhưng k thấy ạ
em cám ơn anh Sơn, mong a nhiều sức khoẻ và đầy nhiệt huyết để truyền lửa cho những đứa tụi em, cám ơn a vì những kiến thức của a mang lại. Em hóng anh dạy reactjs quá :))
Quá hay , e xem xong bài này tổng hợp cả 1 hệ thống kiến thức cộng với việc cleancode
Wow what an acNice tutorialevent! Best of luck for the rest of your future, I’m looking forward to being able to invest when I turn 21 in November!
quá tuyệt vời anh ơi
🍜 Hay quá anh ơi 🥳, giúp em hệ thống lại kiến thức + clean code hơn nhiều ạ ✅
Loay hoay tí cũng làm được cái sửa mừng quá
code cho ae tham khảo phần edit nhe:
1. thêm class vào trong phần render
${course.name}
${course.description}
2. tạo 2 function , 1 function edit , 1 function để xử lý trong edit
function editFormCourse(id, data, callback) {
var options = {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data)
};
fetch(courseApi + '/' + id, options)
.then(function(response){
response.json();
})
.then(callback)
}
function handleEditFormCourse(id){
// lấy class cho từng phần tử name và description
var name = document.querySelector(".name-" + id);
var desc = document.querySelector(".desc-" + id);
var btnEdit = document.querySelector('#create');
// lấy ra ô input
var nameInput = document.querySelector('input[name="name"]');
var descriptionInput = document.querySelector('input[name="description"]');
if (name && desc) { // nếu có
nameInput.value = name.innerText; // gán ô input = giá trị của name
descriptionInput.value = desc.innerText;
btnEdit.innerText = "Save";
}
btnEdit.onclick = function() {
var formData = {
name: nameInput.value,
description: descriptionInput.value
}
editFormCourse(id, formData, function () {
getCourses(renderCourses);
})
// edit xong thì trả về lại tạo form
btnEdit.innerText = "Create";
nameInput.value = '';
descriptionInput.value = '';
handleCreateForm()
}
}
không đc ạ
tks ban :3
Quá hay, anh làm vài video chuyên sâu về chủ đề này được không ạ, e không tìm thấy nhiều nguồn học về API lắm
Toát mồ hôi hột viết xong cái tính năng sửa, mà viết xong cảm giác thông não quá ạ
bạn còn source code phần đó ko cho mình xin với
Anh ơi cho em hỏi là trong hàm createCourse thì nó chuyền đi dữ liệu để thêm vào trong file db.json sau đấy hàm renderCourse sẽ map vào trong cái dữ liệu đó thì tự động sẽ render ra dữ liệu thêm vào khi tạo mới mà anh đâu cần gọi cái promise callback để render dữ liệu trong hàm createCourse để render lại anh, em không viết đoạn ấy vẫn render dữ liệu ra bình thường ý
tôi cũng thấy vậy ông ạ, nó truyền new courses vào rồi, thì thằng render nó tự xử lý đâu cần phải promise callback nữa phải ko
Hay quá a
Loving you
Cái callback ảo thiệt đó
mn đổi extension: Preview on Web Server là không bị refresh lại trang nha
Anh ơi ! Nào anh ra Reactjs vậy anh.Ngồi hóng quá anh ơi
cho e hỏi chút ạ ... khi e ấn button thêm sửa xóa thì nó reload lại trang... không biết do e code sai chỗ nào hay do postman ạ?/ e cảm ơn
mong anh Sơn ra thêm Video về asyns await
Rảnh anh ra thêm sau nhé
@@F8VNOfficial ok anh, em dân trái nghành, giờ kiểu bị nghiện giọng anh Sơn rồi, lúc nào cũng hóng video mới từ anh
ôi cuối cùng cũng làm đc cái thêm sửa mừng ỉa chảy =))
bạn ơi cho mình xin code phần edit với
@@chienphung9633 Lâu quá roi mh xóa mất phàn đó lun r =))
Bạn làm hướng dẫn về FormData đi ạ!
thanks anh Sơn dzai
anh ơi, phiền a update nốt phần edit course được không anh.
anh dạy cách viết API bóc tách dữ liệu web đi ạ
anh có thể hướng dẫn em sử dụng response header của backend và frontend như thế nào cho chính xác được ko ạ
a có khóa học offline nào không
sao e post dữ liệu đều bị refresh trang vậy ạ, sử dụng postman cũng bị tự tải lại, làm sao để tắt tự tải lại khi đẩy dữ liệu vậy ạ, (vấn đề không phải ở bên html đâu ạ chỉ khi đẩy dữ liệu mới bị)
Cho mình hỏi đôi chút ạ?Ví dụ mình làm cái api nó trả về cho mình đối tương json chạy trên trình duyệt web á,nhưng đó chỉ là local.Nhưng minh muốn dùng 1 cái máy khác truy cập vô cái link đó vẫn lấy được đối tượng json trả về .Bước tiếp theo là cần làm gì ạ?Mình xin cảm ơn!
cho mình hỏi từ bài 6: DOM location đến bài 10 sao mình không thấy có video vậy ạ?
cho mình hỏi sao mình ko thấy các bài như localstrorage va sessionstorage vậy ạ
Anh ơi. cho em hỏi. bây giờ em fetch data ra rồi. em muốn ấn vào 1 sản phẩm thì nhảy đến 1 template mới rồi hiện ra danh sách sản phẩm. thì làm như nào ạ?
Gọi Fetch với method:POST mà cứ bị auto repeater, mỗi lần refesh code hoac page tự động add 3 - 4 record data là do lỗi gì vậy thầy? Cám ơn thầy!
bạn sủa nhu ưnafo vậy mình cũng biij
good
7:53 dùng phím tắt nào để nhảy ra thẻ trong template string vậy ạ.
anh ơi, cái đoạn courses.map(function(course) sao của e nó cứ báo là courses.map is not a function vậy nhỉ
b paste code lên đây mn chỉ cho b
@@TungPham-dt6tr
var courceAPI = '127.0.0.1:5500/db.json';
function start(){
getListing(renderListing);
}
start();
function getListing(callback){
fetch(courceAPI)
.then(function(respone){
return respone.json();
}).then(callback);
}
function renderListing(coures){
var listing = document.querySelector("#list");
}
// mình bị y chang lỗi như bạn
Đọc cmt hóng xem có ai làm edit không mà không thấy
Mọi người ơi cho em hỏi khi em tạo 1 khoá học mới thì id không phải là số mà lại là kiểu 6fd5, 937a,... vậy ạ
Cho mình hỏi chỗ đoạn 4:20 chỗ đoạn callback mình m hiểu rõ lắm ai giải thích cho mình hiểu với
Unexpected token 'i',
"title=danh%20sach%20" is not valid JSON anh ơi em làm như anh ấn post rồi thêm key-value nhưng mà posman hiện thông báo lỗi như này anh ạ
Ra video tiếp đi anh ơi
Em có thắc mắc là mỗi lần bấm thêm hoặc xóa thì minh sẽ gọi API vậy khi gọi đó nó có làm refresh lại trang của mình k ạ... do em thấy code của anh nó k refresh trang mà khi em làm theo cách của em thì mỗi lần như v nó cứ refresh lại trang
Anh Sơn ơi còn các phần dưới localStorage, ... các thứ khác thì anh để ở series nào vậy ạ, em học xong js cơ bản lẫn nâng cao rồi nhưng k thấy ạ
kênh cũ của anh sơn có giảng về phần đó ấy bạn , bạn search với key đấy là ra luôn
@@ChangMasbu kênh cũ của anh sơn là kênh nào vậy bạn
@@ChangMasbu bạn ơi kênh cũ của anh ấy là gì vậy bạn
anh Sơn ơi cho em hỏi là có thêm được dữ liệu dạng ảnh không ạ
30:55 tại sao xóa mất ở DOM mà database cũng bị mất lun là sao vậy a
à mình hiểu r, bn nào biết cmt thử xem coi có cùng ý kiến k
bạn gửi một cái request bằng fetch với method là delete thì json-server nó tự hiệu thì nó tự xóa ở db thôi, còn cái việc xóa mất ở DOM chỉ là xử lí phía client để người dùng có thể thấy được mà không cần refresh lại trang. Vì khi refresh lại thì nó sẽ chạy lại hàm start() là sẽ call lại api get nên giảm hiệu năng
@@igdev6095 bác hiểu khúc này, giải thích lại giúp em với ạ. Vì xóa ở DOM mà không gửi request DELETE thì không thể xóa ở Database được ạ.
cái của em gửi request đi chưa kịp dụng then() bắt reponse thì nó tự f5 lại trang @@
bạn fix được chưa chỉ mình với
Anh ơi cái posman có dùng nhiều ko ạ, e tải về vs cop link vào chạy nó lỗi ạ, ko hiểu sao
Hóng ReactJs quá
AD cho em code của em 26:16 code của em code như anh. nhưng đến phần này bấm xóa là xóa được phần tử . chứ không cần thao tác với DOM để xóa nữa. sao lại có sự khác nhau vậy ạ
lúc đấy xóa dữ liệu trên fake server rồi thì làm gì còn để hiện ra đâu
cho em hỏi sao mỗi lần em gửi đi api để tạo khóa học mới thì web nó auto load lại có cách nào để khắc phục không ạ
em cảm ơn
mình cũng bị như vậy mà không tìm ra cách khắc phục
e.preventdefault()
e có thắc mắc là lúc ở hàm renderCourse() e có thêm tên cho class h4 với p, mà khi querySelector ra ờ dưới start() hoặc ở trong start() đều ra null nhỉ? chỉ khi bỏ vô các hàm event thì mới query ra.
có phải bạn thêm file js ở head đúng ko, nếu v thì chuyển đoạn ấy xuống dưới thẻ h4 với p là đc nha
Sao code e chạy tới đoạn fetch() method POST nó cứ refesh lại trang.
mình cũng bị giống vậy, xóa hay create nó cũng tự refesh lại
Mn ơi mình muốn học phần này từ bài đầu tiên, cho mình hỏi bắt đầu từ bài nào ạ
A ơi tại sao khi e thay đổi dữ liệu json server web nó bị tự load lại
Em bỏ json server ra khỏi dự án HTML đang chạy với live server em nhé.
Mọi người ơi cho mình hỏi
function handleDeleteCourse(id) {
var options= {
method:'DELETE',
headers: {
'Content-Type': 'application/json',
}
}
fetch(courseAPI+'/'+id,options)
.then(function(response) {
response.json();
})
.then(function(){
var courseItem = document.querySelector('.course-item-'+id);
if(courseItem) {
courseItem.remove();
}
});
Hàm handleDeleteCourse của mình không gọi lại API mà sao mỗi khi mình thực hiện xóa đi một course thì tự động load lại trang vậy.
chắc do extension của Live Server đấy bạn
b tách file của json sever riêng file của html css riêng nhá b là sẽ hết
sao em create toàn ra obj thôi ạ , mặc dù code giống anh luôn ạ
đoạn 29:40 e làm như vậy rồi nhưng mà sao nó vẫn reload lại trang nhỉ :
Anh ơi em có 1 file json up lên github nhưng khi fetch file đó vs đường link của github thì nó bị lỗi, anh giúp em fix lỗi đc ko ạ
Lỗi như nào em ơi, console có báo đỏ gì ko em ơi?
anh ơi sao anh khóa hết mấy bài giảng v ạ
lời khuyên cho anh em là hãy nắm chắc bài form validation rồi hãy chiến tới bài này nhé. Nếu không là sẽ lùng bùng đấy =))
Mà ở trên trang F8 thì nó lại nằm chung trong phần JSon luôn ông 😢 nên tới này cái mơ mơ liền
sao em check cai network no cu hien ra GET method hoai vay mn mac du minh use POST vs DELETE
bạn giống mình. Không hiểu sao bị vậy luôn. Bạn giờ có fix được chưa ạ
16:00 25:31
Cho mình hỏi tại sao lại dùng method delete lại phải /id nhỉ
id là khóa chính nhé xóa khóa chính là xóa hết body
tại api để xóa post của json server là local..../post/id với method là Delete
Tại sao mình không truyền trược tiếp hàm createCourse(formData,
getCourse(renderCourse)
); mà lại phải thông qua function: createCourse(formData,function () {
getCourse(renderCourse)
}); Ai giải thích hộ mình với 21:44
bời vì createCourse nhận vào 2 tham số data, callback, mà callback là function, còn nếu bạn gọi luôn getCourse(renderCourse) nó sẽ không thoả mãn cái .then(callback) của hàm createCourse
getCourse(renderCourse) tổng thể nó là một promise chứ không phải là một function để callback ý, chỉ có renderCourse mới là funcion thôi nên nó mới được truyền trực tiếp vào callback của getCourse. mình lúc đầu cũng bị hiểu lầm cái này
Hình như b truyền trực tiếp ko qua function vẫn chạy đc nha, vì getCourse nó là 1 function
tại sao chrome của em nó cứ tự reload lại trang vậy ạ
cùng câu hỏi, chrome của mình cũng vậy, mình tưởng mình code sai
@@nguyenvanucok15dn61 bạn để nơi JSON ra folder khác nhé, còn folder html ra folder khác (Kiểu nó bị chung với live-server ý)
@@vienong2772Thanks bác nó ko reload rồi. Nhưng mà ném nó sang folder khác phải bật 2 cái vscode 1 cái để chạy json server với 1 cái để code hả bác? Mình phải bật 2 cái mới được, chứ đổi sang folder khác là json server nó sập luôn :D
@@leephan1912 ở VScode bác chọn file-> add folder to workspace để thêm folder server vào workspace hiện tại nhé
@@tomtoan8131 mình bật cmd cho nó chạy riêng với vscode luôn r bác. :v thấy cũng tiện.
ai giúp mình với ạ, mình create thành công rồi nhưng id không tăng dần mà lại thành một chuỗi ramdom
ảo z cho mình xem code được không =))
bạn cũng y hệt mình
Có ai làm phần update rồi không.Cho mình tham khảo nhé
có chưa bác t xin tham khảo với viết k đc :((
@@_PhanQuocTrieu
function updateCourse(id,data,callback){
var options = {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}
fetch(coursesAPI + "/"+id,options)
.then(function(response){
return response.json();
})
.then(callback)
}
function handleUploadForm(id){
var courseItem= document.querySelector(".course-item-"+ id);
var getName=courseItem.querySelector("h4").innerText;
var getDescription=courseItem.querySelector("p").innerText;
var name=document.querySelector("input[name='name']")
var description=document.querySelector("input[name='description']")
name.value=getName;
description.value=getDescription;
if(!document.querySelector("#update")){
document.querySelector("#create").id="update"
}
document.querySelector("#update").innerText="Luu";
var btnUpdate=document.querySelector("#update")
btnUpdate.onclick=function(){
var formData={
name:name.value,
description:description.value,
};
if(name.value != "" && description.value !=""){
updateCourse(id,formData,function(){
getCourses(renderCourses);
document.querySelector("#update").id="create";
document.querySelector("#create").innerText="Create";
name.value="";
description.value="";
handleCreateForm();
})
}
else{
alert("Ban hay nhap day du thong tin")
}
}
}
@@thangnguyenchien6986 b còn giữ source code không cho mình xin với ạ
Quên hết rồi bác ạ :V
anh ơi cho em bài học ` ${ } ` với ạ . em xin cảm ơn ạ
Đây bạn ruclips.net/video/7Ls-fa8iVXA/видео.html
Trong phần về js es6 anh sơn có nói về cái này
ai cho mình xin code phần sửa với
Em làm y hệt vậy nhưng tại sao createCourse(formData); ko cần gọi đến render mà mỗi lần tạo nó vẫn tự động render ạ? E vẫn ko sửa được...
function createCourse(data, callback) {
fetch(courseAPI, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then(function (response) {
return response.json();
})
.then(callback);
}
function handleCreateForm() {
var createBtn = document.querySelector("#create");
createBtn.onclick = function () {
var name = document.querySelector("input[name='name']").value;
var desc = document.querySelector("input[name='desc']").value;
var formData = {
name: name,
desc: desc,
};
createCourse(formData);
};
}
do Live Server của VScode. Để thư mục json_server ở một nơi riêng để tránh khi auto save db.json dẫn đến reload cái page đang viết
@Huu Hoang Pham bạn có câu trả lời chưa ?
có ai ko hiểu chỗ callback ko mình giải thích cho
ai giải thích em đoạn ném callback vào với 4.30
mình cũng không rõ chỗ đấy như thế nào , sao lại cho callback ở đấy xong lại đưa vào trong getCourses(callback). tưởng đoạn 4.30 là funtion(course ){} xong gọi lại callback ở chỗ khác chứ nhỉ ? bạn hiểu đoạn đó chưa, giải thích giúp mình với
@@canhpham7163 ở trong hàm start( ) nó gọi hàm getCourses( ) rồi truyền 1 function in ra các khóa học vào cho nó, sau đó thằng ".then(callback)" có tham số là callback nhận đc function kia rồi in ra các khóa học đó b
E call api toàn bị lỗi cros
có ai có code a ko ạ :v e xin vs
code rì b =))
Ai biết extension gợi ý code cho javascript (onclick = funtion (){} ....) ở phút 12:38 không ạ? chỉ em vs . Thank a
tìm mấy cái keywords như: html, js, es6 ... + thêm snippets
ai có code phần này k gửi mình với mình code theo nhưng nó luôn bị call api mỗi khi xóa hoặc tạo mới mặc dù đúng với video
Giống mình không hiểu tại sao luôn
Bị load lại trang khi xóa hoặc thêm
@Hoàng Hà giúp mình với
Mọi người cho mình hỏi. Tại sao mỗi lần mình điền dữ liệu xong create thì id nó không hiện theo thứ tự mà nó bị hiện lung tung nhỉ
fix được chưa bạn, mình cũng bị
Theo mình nghĩ, Id này là do nó tự tạo ra nên là không theo thứ tự đó kiểu 1 rồi đến 2 đó bạn.
dạ em làm theo anh khi tới method 'POST' thì trang web tự động reload lại và hiện lên tất cả khóa học mà không cần gọi renderCourse() hoặc getCourse(). Có cách nào để fix vấn đề này ạ. Em cảm ơn.