2.9 Trang quản lý bài viết- Lấy dữ liệu từ LocalStorage với Key Blog đưa vào mảng “ Blogs” - Tạo mảng con “paginatedUsers” dựa trên mảng “Blogs”.. ● Chỉnh sửa bài viết:- Tạo form cho ngư
Trang 1TRƯỜNG ĐẠI HỌC SÀI GÒN
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO ĐỒ ÁN LẬP TRÌNH WEB VÀ ỨNG DỤNG
Đề tài: Xây dựng trang web cho doanh nghiệp kinh doanh cà phê
Giáo viên hướng dẫn: ThS Từ Lãng Phiêu
Sinh viên thực hiện: Quách Thanh Nhã - 3121410357
Nguyễn Thế Vinh - 3122410475
Võ Thái Tuấn - 3121410563
Vũ Hoàng Nguyên - 3121410354 Thái Minh Phúc - 3121410396
TP.Hồ Chí Minh, Ngày 11 tháng 11, năm 2023
1
Trang 21 Mục tiêu
- Tăng doanh số bán hàng: Một trong những mục tiêu chính của trang web là tăng cường doanh số bán hàng cho sản phẩm cafe của bạn
-Xây dựng thương hiệu: Tăng cường nhận thức thương hiệu của doanh nghiệp và sản
phẩm, giúp xây dựng uy tín và lòng tin từ khách hàng
-Cung cấp thông tin chi tiết: Hiển thị thông tin chi tiết về các sản phẩm cà phê, nguồn
gốc, và các thông tin khác để giúp khách hàng hiểu rõ về sản phẩm
-Tương tác qua Tài Khoản: Cung cấp cơ hội cho khách hàng để đánh giá và đưa ra
phản hồi thông qua tài khoản cá nhân của họ
-Quản lý Thông tin Cá nhân: Cho phép người dùng tùy chỉnh và cập nhật thông tin cá
nhân của họ một cách dễ dàng
2 Phương pháp
Tổng quan các thiết kế trong figma:
link:https://www.figma.com/file/SauaGN6ci9OPMc4tcAeAjt/katjewelry.vn?type=desig n&node-id=0%3A1&mode=dev
link ảnh:
https://drive.google.com/drive/folders/13OOlQ6uiTOJCNoumuqmbJ5Lp9BuFW6yT?us p=sharing
2
Trang 32.1 Đăng nhập:
- Tạo form để người dùng điền thông tin cá nhân
- Dùng vòng lặp đề kiểm tra thông tin người dùng điền có trùng khớp với thông tin trong LocalStorage không
- Nếu kiểm tra đúng chuyển hướng sang trang tổng quát, ngược lại xuất hiện bảng thông báo “Đăng nhập thất bại!”
- Push thông tin người dùng vào LocalStorage với Key “Login”.
2.2 Đăng ký:
- Tạo form để người dùng điền thông tin cá nhân
- Kiểm tra thông tin người dùng điền vào xem có đủ điều kiện đăng ký tài khoản không
- Nếu đủ điều kiện thì kiểm tra xem tài khoản đã có trong danh sách tài khoản hay chưa
- Push thông tin tài khoản lên LocalStorage với Key “accounts”.
3
Trang 42.3 Gửi thông tin liên hệ:
- Tạo form để người dùng có thể nhập thông tin
- Sử dụng phương thức saveContactInformation để lấy giá trị từ các trường nhập
- Sau đó lưu vào local storage
- Sử dụng phương thức resetContactForm để làm mất giá trị và trả về giá trị trống cho các trường
2.4 Blog:
4
Trang 5- Khi ấn vào các số trên thanh paging thì nó sẽ hiện lên từng trang tương ứng.
- Khi ấn vào mũi tên qua phải tương ứng với với tăng số trang lên 1 và khi ấn mũi tên qua trái thì số trang sẽ giảm đi 1
- Mỗi trang tương ứng với 4 phần tử khác nhau
- Khi ấn vào 1 phần tử sẽ nhảy ra 1 trang blog con
2.5 Các trang blog con:
5
Trang 81 Khi ấn vào mỗi item ở trang blog sẽ hiện ra 1 bài blog con tương ứng
2 Các bài blog con sẽ được lưu vào local storage với tiêu đề và nội dung tương ứng
2.6 Tài khoản:
8
Trang 91 Kiểm Tra Trạng Thái Đăng Nhập:
○ Khi trang web được tải, sự kiện DOMContentLoaded được kích hoạt.
○ Hàm checkLoginStatus kiểm tra xem người dùng đã đăng nhập chưa bằng
cách kiểm tra tên người dùng trong Local Storage
(localStorage.getItem('login'))
○ Nếu đã đăng nhập, ẩn các liên kết đăng ký/đăng nhập và hiển thị tên người dùng
○ Lấy thông tin tài khoản từ Local Storage và hiển thị trong các trường nhập
liệu (fullname và email).
2 Sự Kiện Nút "Lưu":
○ Nếu người dùng nhấn nút "Lưu" (có id là btnLuu), sự kiện click sẽ kích
hoạt
○ Hàm validateForm kiểm tra và xử lý dữ liệu nhập liệu (fullname và
email)
○ Nếu dữ liệu hợp lệ, thông tin người dùng được cập nhật trong Local Storage và hiển thị thông báo
3 Sự Kiện Nút "Đổi Mật Khẩu":
○ Nếu người dùng nhấn nút "Đổi Mật Khẩu" (có id là btnDoiMk), sự kiện click sẽ kích hoạt.
○ Hàm changePassWord kiểm tra và xử lý dữ liệu nhập liệu liên quan đến
việc đổi mật khẩu
○ Nếu dữ liệu hợp lệ, mật khẩu người dùng được cập nhật trong Local Storage và hiển thị thông báo
Lưu ý: Mã này giả định rằng HTML có các phần tử và id như đã được tham chiếu trong
mã JavaScript, và các thay đổi mật khẩu được thực hiện dựa trên một số quy định cụ thể như độ dài tối thiểu và việc chứa ký tự in hoa
2.7 Từ chúng tôi
9
Trang 1010
Trang 11- Ban đầu sẽ có 5 hình ảnh.
- Khi ấn vào dấu mũi tên phải thì sẽ ẩn từng hình ảnh từ phải qua trái và hiển thị 1 hình ảnh của đầu bên trái qua
- Khi ấn vào mũi tên trái thì sẽ ẩn và hiện ngược lại với bên phải
2.8 Trang tổng quan
● Số tài khoản tựa trưng cho số lượng tài khoản được tạo ra
● Số bài viết tựa trưng cho số lượng sản phẩm hiện có
● Số sản phẩm tựa trưng cho số lượng sản phẩm đang có
1 Sử dụng DOMContentLoaded được kích hoạt khi toàn bộ DOM đã được tải
xong
2. Kiểm tra nếu trình duyệt hỗ trợ Local Storage
3. Lấy dữ liệu từ Local Storage
4. Nếu dữ liệu tồn tại, giải mã JSON và cố gắng đặt số lượng của dữ liệu vào phần
tử tương ứng
5. Nếu có lỗi khi phân tích cú pháp JSON, in ra console lỗi
6. Nếu không có dữ liệu tài khoản, thông báo ra console
11
Trang 122.9 Trang quản lý bài viết
- Lấy dữ liệu từ LocalStorage với Key Blog đưa vào mảng “ Blogs”
- Tạo mảng con “paginatedUsers” dựa trên mảng “Blogs”.
- Duyệt qua toàn bộ mảng con “paginatedUsers” tạo phần tử ul đại diện cho mỗi
bài đăng trên Blog
- Mỗi bài đăng bao gồm id, tiêu đề, nội dung, loại bài viết
- Thêm phần tử ul vừa tạo vào đối tượng “ container”
12
Trang 13● Chỉnh sửa bài viết:
- Tạo form cho người dùng điền thông tin cần chỉnh sửa
- Dùng phương thức find Nó kiểm tra xem “tieude” của từng phần tử “blog”
trong mảng “blogs” có bằng với “tieude” của “currentBlog” hay không.
- Nếu có thì sửa “tieude”, “noidung”, “loai” trùng với nội dung được lấy từ form.
- Push mảng “blogs” lên LocalStorage với Key Blog.
● Thêm bài viết:
13
Trang 14- Tạo form cho người dùng điền thông tin bài viết cần thêm.
- Kiểm tra thông tin bài viết có trong LocalStorage hay chưa
- Nếu chưa thì push bài viết lên LocalStorage với Key Blog.
● Chức năng tìm kiếm:
- Lấy dữ liệu từ LocalStorage với Key Blog đưa vào mảng “Blogs”.
- Dùng forEach để duyệt qua từng phần tử của mảng “Blogs”.
- Nếu tìm kiếm hợp lệ tạo phần tử ul đại diện cho bài đăng cần tìm kiếm trên Blog.
- Bài đăng bao gồm id, tiêu đề, nội dung, loại bài viết
- Thêm phần tử ul vừa tạo vào đối tượng “container”.
- Ngược lại, nếu tìm kiếm không hợp lệ in ra văn bản “Không tìm thấy tài khoản”
2.10 Trang quản lý người dùng
- Trang này lấy dữ liệu từ Key = “accounts” trên localStorage và được hiển thị lên giống như trang quản lý bài viết ở trên
- Trang cũng có chức năng thêm, xóa bài viết và cơ chế hoạt động cũng tương tự
“Quản lý bài viết”
14
Trang 15Chức năng sửa thông tin tài khoản:
- Từ form quản lý người dùng chọn button chỉnh sửa từ tác vụ, hiện lên form chỉnh sửa tài khoản từ đó có thể sửa thông tin tài khoản
- Có thể chỉnh sửa họ tên, email, quyền của tài khoản
- Sau khi chỉnh sửa nhất nút “Lưu thay đổi” sẽ lấy dữ liệu từ những thay đổi vừa nhập
và cập nhật theo từng thuộc tính của tài khoản từ localStorage và tải lại trang
15
Trang 16Chức năng xóa thông tin tài khoản:
- Từ trang quản lý bài viết ở mỗi bài viết được hiện thị từ danh sách, ở phần tác vụ ta
có thể thấy button xóa
- Khi nhấn vào button xóa sẽ lấy dữ liệu từ localStorage tìm và xóa bài viết dựa trên
ID sau đó cập nhật lại dữ liệu vào localStorage
Chức năng tìm kiếm thông tin tài khoản:
- Ta có thể tìm kiếm bài viết theo từng loại như: email, họ tên hoặc quyền từ form quản lý người dùng
- Nhập vào thông tin cần tìm kiếm, sau đó lấy dữ liệu vừa nhập kết hợp với lựa chọn tùy chọn tìm kiếm so sánh với dữ liệu trên localStorage Nếu trùng khớp hiển thị ra màn hình
16
Trang 172.11 Trang quản lý thông tin:
- Trang này chứa những thông tin được khách hàng gửi về Nó có thể là những khiếu nại về nhân viên, về chất lượng sản phẩm hay thậm chí là những thông tin như khách có nhu cầu đặt hàng số lượng lớn, nhượng quyền,
- Trang được lấy dữ liệu từ Key = “thongTinKhachHang” và cũng có thêm, xóa, tìm kiếm giống phần “Quản lý bài viết”
Chức năng chỉnh sửa thông tin khách hàng:
17
Trang 18- Từ form quản lý người dùng chọn button chỉnh sửa từ tác vụ, hiện lên form chỉnh sửa thông tin khách hàng từ đó có thể sửa thông tin khách hàng
- Có thể chỉnh sửa họ tên, email, số điện thoại
Sau khi chỉnh sửa nhất nút “Lưu thay đổi” sẽ lấy dữ liệu từ những thay đổi vừa nhập và cập nhật theo từng thuộc tính của thông tin khách hàng từ localStorage và tải lại trang
Chức năng xóa thông tin khách hàng:
- Từ trang quản lý thông tin khách hàng được hiện thị từ danh sách, ở phần tác vụ ta
có thể thấy button xóa
- Khi nhấn vào button xóa sẽ lấy dữ liệu từ localStorage tìm và xóa bài viết dựa trên
ID sau đó cập nhật lại dữ liệu vào localStorage
Chức năng tìm kiếm thông tin tài khoản:
- Ta có thể tìm kiếm bài viết theo từng loại như: email, họ tên hoặc số điện thoại từ form quản lý người dùng
- Nhập vào thông tin cần tìm kiếm, sau đó lấy dữ liệu vừa nhập kết hợp với lựa chọn tùy chọn tìm kiếm so sánh với dữ liệu trên localStorage Nếu trùng khớp hiển thị ra màn hình
18
Trang 193 Kết luận:
- Với tốc độ phát triển ngày càng tăng của mạng máy tính thì việc thiết kế và cài đặt các ứng dụng cho người dùng là rất cần thiết Vì vậy ý tưởng giới thiệu và bán hàng qua mạng tuy không phải là mới nhưng phần nào cũng giúp cho khách hàng thuận tiện trong việc lựa chọn và mua hàng Hiện nay việc ứng dụng thương mại điện tử ở Việt Nam chỉ đáp ứng được một số vấn đề cơ bản về mua bán, chưa được linh hoạt Việc ứng dụng này đòi hỏi phải tốn nhiều thời gian và tiền bạc Với kiến thức nền tảng đã được học ở trường và bằng sự nỗ lực của mình, chúng em đã hoàn thành đề tài “Xây dựng Website doanh nghiệp CAFEVIET” Mặc dù đã cố gắng và đầu tư rất nhiều nhưng do thời gian có hạn Em rất mong nhận được sự thông cảm và góp ý của Thầy giáo để đề tài của chúng em được hoàn thiện hơn Một lần nữa chúng em xin chân thành cảm ơn thầy Từ Lãng Phiêu đã tận tình giúp đỡ chúng em trong suốt thời gian thực hiện đề tài này Chúng em xin chân thành cảm ơn Thầy!
19