CHƯƠNG 2 - CAC CHUC NANG CUA UNG DUNG Ung dung cé | giao dién chinh , có các chức năng được chia thành các ô nhỏ , trong đó ,, ô lớn ở giữa sử dụng tinh nang iframe dé nhung va hién thị
Trang 1Bài tập lớn Môn Phát triển ứng dụng Web
BO GIAO DUC VA DAO TAO
TRUONG DAI HOC MO - DIA CHAT
BAI TAP LO'N
Môn học: Phát triển ứng dung Web
ĐÈ TÀI : UNG DUNG WEB GIAI TRI
(Doc — Nghe — Nhin)
NHOM THUC HIEN: NHOM 5 CAN BO GIANG DAY
Nguyễn Quang Anh Họ và tên giảng viên: Nguyễn Hoàng Long
(2121050849) Bộ môn: Phát triển ứng dụng Web
Lớp: DCCTCLC67A
Hà nội, Năm 2024
Trang 2
Bài tập lớn Mơn Phát triển ứng dụng
MỤC LỤC
MỤC LỤC - L2 22221121 121111 1211211115111 1 118111151281 1 01H H H1 1111111111111 1xkra 2
CHƯƠNG I : TÊN VÀ NHĨM NGƯỜI DÙNG 2-2222: 222222222222222 222 3
1.2 Nhĩm người dùng - - - 2L 2 1220112211121 1 1121115211181 1 118111111821 1 11H11 kg 3 CHƯƠNG 2 : CÁC CHỨC NĂNG CỦA ỨNG DỤNG 52:52cc22sc2ssce 3 2.1 Khung điều hướng S111 1111111111111111 111 T1 11 1112121111111 ra 3 PIN N5): 0(1,:¬äaiiiiadadaẳắẳỶÝỶẢẲÄẲẢẲ 3 2.1.2 Xem phiím 2 1 2212222111311 11011111 1111111111011 1111101111011 1011122 kk 4
“S2 na 4
2.1.4 Feedbaek c n1 nn12 121111111111 112011011111 1 101K 1 g1 1111111111 5 2.1.5 ControÏ GefIfFe .- 12c 211221121112 110111811111 1111111 11111 11 11 111g nhu 6 V4 hi co ỢGHiiididiidiỶẮẮẮẰŨŨŨ 6 CHƯƠNG 3 : CÁC CHỨC NĂNG ĐỘNG TƯƠNG TÁC C§DL 7
E0 7
3.3 Phân quyền và định danh người đùng 5s 1E2111111111211 1 xe ret 7 3.4 CRUD và tương tác qua lại giữa csdÌ 5 2 2221111112211 11121 11111122222 8
CHƯƠNG 4: TỰ ĐÁNH GIÁ VỀ PHẦN ĐÃ LÀM - 22c 22222 II
Nguyễn Quang Anh
Trang 3Bài tập lớn Môn Phát triển ứng dụng
CHƯƠNG l1 - TÊN VÀ NHÓM NGƯỜI DÙNG
1.1 Tên website
Tén Website: playground
1.2 Nhóm người dùng
Ứng dụng hướng đến đối tượng người dùng ở mọi lứa tuổi
CHƯƠNG 2 - CAC CHUC NANG CUA UNG DUNG
Ung dung cé | giao dién chinh , có các chức năng được chia thành các ô nhỏ , trong đó ,, ô lớn ở giữa sử dụng tinh nang iframe dé nhung va hién thị các trang với các chức năng khác theo mong muôn của người dùng
2.1 Khung điều hướng
- _ Có tác dụng như 1 thanh điều hướng , phục vụ nhu cầu người dùng muốn chỉnh nội dung của khung chính
- Giao diện tính năng
dete Retro)
b4 = san
Con fale) (ermnb)
May tinh (emb)
Con éch (emb) Shrines
Em xì
2.2.1 Nghe nhạc Mục tiêu:
+ Nơi chia sẻ, trao đổi thông tin, cảm nhận về lĩnh vực âm nhạc
+ Giao diện thiết kế tối giản , tiện dung Chức năng: Cho phép người dùng có thể nghe nhạc qua audio player
trong khi có thế làm việc khác với khung chính
Nguyễn Quang Anh
Trang 4Bài tập lớn Môn Phát triển ứng dụng
Giao diện của tính năng :
Lavender ộ 2®
) 000/2:02 4) Lotus bs 2
Cst cemetery bs 2
2.2.2 Xem phim Mục tiêu:
+ Nơi xerm phim , dành cho các tín dé đam mê điện ảnh + Trang web nhằm đem lại các video giải trí sau những giờ căng thăng + Trang web có lấy ý tưởng từ các trang web video
Lavender
> 000) 202 Lotus
> 000) 7.02 Cat cemetery
rag
ki
ow that you have rights? Ï
eT
2.2.3 Doc truyện Mục tiêu: Trang web dành cho những người yêu thích đọc truyện, những người yêu thích sáng tác tự truyện
- - Giao diện :
Nguyễn Quang Anh
Trang 5Bài tập lớn Môn Phát triển ứng dụng
2.2.4 Feedback ¬ Mục tiêu : Trang đề hiện thị feedback và trả lời của admin + Giao diện :
Nguyễn Quang Anh
Trang 6Bài tập lớn Môn Phát triển ứng dụng
2.2.5 Control centre
Là một trang dành cho admin có tác dụng điêu hướng tới các trang quản trị
2.2 Khung feedback
Cho phép người dùng gửi feedback , là một form có chức năng thêm vào bảng feedback, phải đăng nhập mới có thê gửi đi
Your feedback
ubrnit
Nguyễn Quang Anh
Trang 7Bài tập lớn Môn Phát triển ứng dụng
CHƯƠNG 3 - CÁC CHỨC NĂNG ĐỘNG TƯƠNG TÁC CSDL
Bồ sung thêm các chức năng cho dự án ở phân trước bao gôm
3.1.1 Đăng nhập : Người dùng có thể đăng nhập hoặc đăng ký đề lưu tiến trinh(feedback) của mình
3.1.2 Gui feedback : Người dùng đã đăng nhập dưới đủ quyên có thế đề lại ý kiên hoặc câu hỏi của mình, những đóng góp đê lại sẽ được lưu lại và được phản hồi bởi admin
3.1.3 Hiến thị thông tin : bao gồm thông tin từ đatabase và một số thông tin chỉ
có admin mới có quyên hiện thị 3.1.4 Quản lí : Bao gồm thêm bớt sửa xóa thông tin từ đatabase mà chỉ có admin mới có quyên truy cập
3.2 Cơ sở dữ liệu
Câu trúc của cơ sở dữ liệu
Mo feedback
@ feedback_id : int(255) feedback_content : text
m created_at : date
#user_id : int(255) leo usergroup Ue user
@ usergroup _id : int(11) ° @ user_id : int(255)
title : varchar(11) user_name : varchar(99)
view : binary(1) email : varchar(99)
© post : binary(1) password - varchar(99)
@ manage : binary(1) Ấ # usergroup _id : int(255) Mo reply
@ reply_id : int(11) reply_content : text
m created_at : date
# feedback_id : int(255)
# user_id : int(255)
3.3 Phân quyền và định danh người dùng
Có chức năng phân role khi chọn tài khoản trong combox có giá trị được lây từ bảng khác
Nguyễn Quang Anh
Trang 8Bài tập lớn Môn Phát triển ứng dụng
Dưới tư cách là guest người dùng không có quyên post (gửi feedback)
Dưới quyền là user người dùng có quyên được post nhưng không thê hiền thị 1 số tính năng Dưới quyền ađmin , người đùng có toàn quyền CRUD và toàn bộ tính năng của app
Lavender
nh (emb)
ermb)
know that you have rinht
ky)
ity, every man, woman, ai
3.4 CRUD va tuong tac qua lai giira csdl
CRUD voi bang chính là User và 2 bang feedback va reply(g6p chung 1 bảng)
a Chức năng thêm đữ liệu :
Bằng cách tạo tài khoản mới , thêm trực tiếp trong phần quản lí , dé lại feedback ,
và phan hoi feedback
Nguyễn Quang Anh
Trang 9Bài tập lớn Môn Phát triển ứng dụng Tạn lận tái khoản mới
Tên người dùng |
-
Insert
b Chức năng xóa dữ liệu:
Băng cách chọn record trên bảng cân xóa vả tiên hành xóa
— sdit dalete
"sa
= _ hatrnail so Ke ¬ cố eqfanpqanswejc=14587.ahatrnail corr 23 =i cdit delete
=quunbbavb je2140504 ahotrail corm aie is edit delate equinbbavbxxjezi40504a@hotmailcom 123 ie Sa
c Chức năng chỉnh sửa dữ liệu:
Nguyễn Quang Anh
Trang 10Bài tập lớn Môn Phát triển ứng dụng
Tương tự tính năng xóa, trang hiến thị dữ liệu của record chứa các dữ liệu cũ cân sửa
Lap nhat thang tin
eawnbbavbxxiezi40504 a
1a3 Update
d Tìm kiếm đữ liệu:
Thông qua text box , kết quả đưa ra chính xác
edit
b
i delete
e Tương tác giữa các bảng :
Bằng Mysqli_ fetch result hiển thị các trường vốn đã k có trong bảng thông qua khóa phy cua record do
Ngoài ra nếu khóa phu bị mắt đi sẽ để gia tri thanh NULL
Nguyễn Quang Anh
Trang 11STT
Bài tập lớn Môn Phát triển ứng dụng
CHƯƠNG 4-
Yêu cầu
Tạo được bảng dữ liệu và
kết nối thành công
Có tính năng thêm dữ liệu
vào bảng
Có tính năng xóa dữ liệu
trong bảng
Có tính năng sửa dữ liệu
trong bảng
Có tính năng tìm kiếm dữ
liệu
Đăng nhập + phân quyền
Nâng cao
Nguyễn Quang Anh
(2121050849)
TU DANH GIA VE PHAN DA LAM
Tiểu chí đã hoàn thành
Tạo được 03 bảng đữ liệu có liên kết với nhau
và kết nô! thành công Các trường dữ liệu trong bảng được thiệt kê hợp lý Thêm được dữ liệu mới vào trong bảng thông qua giao diện ứng dụng web được viết bằng PHP
Một trong các trường thêm vào được lấy giá
tri từ một coơmbox với các giá trị được ghi từ 1
hoặc 2 bảng khác trong CSDL Giao diện trang web được thiết kế hợp lý, có đây đủ các thành phần
Hiến thì danh sách các record trong bảng, cho phép người dùng chọn record muốn xóa, sau
đó tiến hành xóa thành công Giao diện trang web được thiết kế hợp lý, có đầy đủ các thành phần
Hiến thì danh sách các record trong bảng, cho phép người dùng chọn record muốn sửa, sau
đó tiến hành sửa thành công Giao diện trang web được thiết kế hợp lý, có đầy đủ các thành phần
Tìm kiếm thành công thông qua l text box, kết quả tìm kiếm được in ra màn hình chính xác
Có tính năng quản lý người dùng, người dùng phải đăng nhập mới được sử dụng một số chức năng của trang web Xây dựng được menu cho phép di chuyển giữa các trang web
Có kiêm tra thông tin trước khi đăng ký Các tính năng khác trên web
Tổng điểm 7
Diem
1,5
0,5
Trang 12Bài tập lớn Môn Phát triển ứng dụng
JAVA SCRIPT
Kiểm tra giá trị nhập vào Ứng dụng web có kiểm traxem 2
người dùng đã nhập giá trị vào
các phân input hay chưa, sau đó thông báo lại cho người dùng bằng thông báo tiếng Việt
Sử dụng sự kiện NA 0
adEventListener
Code sạch đẹp Tên biến được đặt hợp lyvaco 2
ý nghĩa Code được việt sạch đẹp và căn lề hợp ly
Có các chức năng được xây dựng từ Java Script ngoài phần
kiểm tra giá trị nhập vào và các
chức năng đã được giới thiệu trên lớp (2 điểm cho 1 chức năng) - không giới han diém cộng
Điểm nhóm Mọi thành viên trong nhóm đều 1
hiệu và trình bày được những
gi minh lam
Tổng điểm : 5
Nguyễn Quang Anh
Trang 13Bài tập lớn Môn Phát triển ứng dụng
Nguyễn Quang Anh
Trang 14Bài tập lớn Môn Phát triển ứng dụng
Nguyễn Quang Anh