1 BÁO CÁO “ĐỒ ÁN WEBSITE BÁN SÁCH” Bộ Giáo dục và Đào tạo Trường Đại học Ngoại ngữ Tin học TP Hồ Chí Minh ĐỒ ÁN WEBSITE BÁN SÁCH Ngành Công nghệ thông tin Bộ môn Lập trình web Giảng viên hướng dẫn ThS[.]
Trang 1Bộ Giáo dục và Đào tạo Trường Đại học Ngoại ngữ - Tin học TP Hồ Chí Minh
ĐỒ ÁN: WEBSITE BÁN SÁCH
Ngành: Công nghệ thông tin
Bộ môn: Lập trình web
Giảng viên hướng dẫn: ThS Trần Phương Tuấn
Sinh viên thực hiện: Huỳnh Thiệu Huy - 20DH111187
Nguyễn Hoàng Triều - 21DH114222 Nguyễn Triệu Kha - 21DH113731
Võ Thiện Nhân – 21DH111296
TP.Hồ Chí Minh, ngày 31 tháng 2 năm 2002
Trang 2Bộ Giáo dục và Đào tạo Trường Đại học Ngoại ngữ - Tin học TP Hồ Chí Minh
ĐỒ ÁN: WEBSITE BÁN SÁCH
Ngành: Công nghệ thông tin
Bộ môn: Lập trình web
Giảng viên hướng dẫn: ThS Trần Phương Tuấn
Sinh viên thực hiện: Huỳnh Thiệu Huy - 20DH111187
Nguyễn Hoàng Triều - 21DH114222 Nguyễn Triệu Kha - 21DH113731
Võ Thiện Nhân – 21DH111296
TP.Hồ Chí Minh, ngày 31 tháng 2 năm 2002
Trang 3MỤC LỤC
Danh mục các hình ảnh 5
Danh mục các từ viết tắt 7
Danh mục bảng biểu 8
Chương 1: Mở đầu 9
1.1 Lí do chọn đề tài 9
1.2 Mục đích chọn đề tài 9
Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng 10
2.1 HTML 10
2.2 CSS 11
2.3 Javascript 12
Chương 3: Thiết kế 13
3.1 Giao diện trang chủ 13
3.2 Giao diện trang danh mục sản phẩm 17
3.3 Giao diện trang chi tiết sản phẩm 20
3.4 Giao diện trang giỏ hàng 22
3.5 Giao diện trang xác nhận đơn hàng 23
3.6 Giao diện trang đơn hàng của tôi 24
3.7 Giao diện trang chi tiết đơn đặt hàng 24
3.8 Giao diện trang thông tin tài khoản 25
3.9 Giao diện trang đăng nhập 25
3.10 Giao diện trang đăng ký 26
3.11 Giao diện trang Admin 27
3.12 Giao diện trang thêm sản phẩm 27
3.13 Giao diện trang xóa sản phẩm 28
3.14 Giao diện trang sửa sản phẩm 29
3.15 Giao diện trang quản lý loại sản phẩm 29
3.16 Giao diện trang quản lý người dùng 31
Chương 4: Các chức năng ứng dụng 33
4.1 Chức năng đăng nhập 33
4.2 Chức năng đăng ký 34
4.3 Chức năng đăng xuất 35
4.4 Chức năng slideshow 36
4.5 Chức năng bộ đếm ngược thời gian 37
4.6 Chức năng hiển thị và ẩn danh sách dãy sản phẩm 39
4.7 Chức năng mở và đóng hình ảnh con 41
4.8 Chức năng form đăng ký với số điện thoại 42
4.9 Chức năng cập nhật thông tin người dùng 43
4.10 Chức năng thêm, sửa, xóa sản phẩm, thanh toán trong giỏ hàng 44
4.11 Chức năng tìm kiếm sản phẩm 50
4.12 Chức năng thêm, xóa, sửa sản phẩm 51
4.13 Chức năng thêm, xóa, sửa loại sản phẩm 55
4.14 Chức năng xem chi tiết, xóa User 58
Chương 5: Kết luận và bảng phân công công việc 60
Tài liệu tham khảo 61
Trang 5Danh mục các hình ảnh
Hình 1 Giao diện trang chủ: Header, Banner 13
Hình 2 Giao diện trang chủ: Danh mục sản phẩm 13
Hình 3 Giao diện trang chủ: Flash sale 14
Hình 4 Giao diện trang chủ: Danh mục sách bài học cuộc sống 14
Hình 5 Giao diện trang chủ: Danh mục sách kinh doanh 15
Hình 6 Giao diện trang chủ: Danh mục sách ngôn tình 15
Hình 7 Giao diện trang chủ: Danh mục sách phát triển bản thân 16
Hình 8 Giao diện trang chủ: Xu hướng 17
Hình 9 Giao diện trang chủ: Footer 17
Hình 10 Danh mục sản phẩm "Bài học cuộc sống" 18
Hình 11 Danh mục sản phẩm "Kinh doanh" 19
Hình 12 Danh mục sản phẩm "Ngôn tình" 19
Hình 13 Danh mục sản phẩm "Phát triển bản thân" 20
Hình 14 Trang chi tiết sản phẩm 22
Hình 15 Giao diện trang giỏ hàng 23
Hình 16 Giao diện trang xác nhận đơn hàng 24
Hình 17 Giao diện trang đơn hàng của tôi 24
Hình 18 Giao diện trang chi tiết đơn đặt hàng 25
Hình 19 Giao diện trang thông tin tài khoản 25
Hình 20 Giao diện trang đăng nhập 26
Hình 21 Giao diện trang đăng ký 26
Hình 22 Giao diện trang Admin 27
Hình 23 Giao diện trang thêm sản phẩm 28
Hình 24 Giao diện trang xóa sản phẩm 28
Hình 25 Giao diện trang sửa sản phẩm 29
Hình 26 Giao diện trang quản lý loại sản phẩm 30
Hình 27 Thêm loại sản phẩm 30
Hình 28 Chỉnh sửa loại sản phẩm 30
Hình 29 Xóa loại sản phẩm 31
Hình 30 Giao diện trang quản lý người dùng 31
Hình 31 Giao diện trang chi tiết người dùng 32
Hình 32 Giao diện trang xóa người dùng 32
Hình 33 Hàm Login lấy thông tin người dùng nhập vào 33
Hình 34 Hàm Login kiểm tra thông tin người dùng nhập vào 33
Hình 35 Hàm Register lấy thông tin người dùng nhập vào 34
Hình 36 Hàm Register kiểm tra thông tin người dùng nhập vào 35
Hình 37 Hàm Logout để đăng xuất 35
Hình 38 HTML của Slideshow 36
Hình 39 Java của Slideshow 36
Hình 40 HTML của bộ đếm ngược thời gian 38
Hình 41 Java của bộ đếm ngược thời gian 38
Hình 42 HTML của hiển thị và ẩn danh sách dãy sản phẩm 40
Hình 43 JavaScript của hiển thị và ẩn danh sách dãy sản phẩm 40
Hình 44 HTML của mở và đóng hình ảnh con 41
Hình 45 Javascript của mở và đóng hình ảnh con 41
Hình 46 HTML của form đăng ký với số điện thoại 42
Hình 47 JavaScript của form đăng ký với số điện thoại 42
Hình 48 Hàm Infor lấy thông tin người dùng 43
Hình 49 Hàm Infor lấy thông tin người dùng nhập vào 43
Hình 50 Class Cart.cs 44
Hình 51 Class CartItem 44
Trang 6Hình 52 Class Cart 44
Hình 53 Hàm Add thêm sản phẩm vào giỏ hàng 45
Hình 54 Hàm UpdateQuantity để cập nhật số lượng sản phẩm trong giỏ hàng 45
Hình 55 Hàm TotalAllProduct tính tổng số tiền trong giỏ hàng 45
Hình 56 Hàm RemoveCartItem xóa hết sản phẩm trong giỏ hàng 46
Hình 57 Hàm TotalQuantity tính tổng số lượng sản phẩm đang có trong giỏ hàng 46
Hình 58 Hàm ClearCart để xoá tất cả sản phẩm trong giỏ hàng 46
Hình 59 Hàm GetCart lấy dữ liệu Cart để xử lý thông tin người dùng đã thêm sản phẩm vào giỏ hàng 47
Hình 60 Hàm AddtoCart để thêm sản phẩm người dùng chọn vào Cart 47
Hình 61 Hàm ShowToCart 47
Hình 62 Hàm UpdateQuantityCart dùng để cập nhật số lượng sản phẩm 48
Hình 63 Hàm RemoveCart để xóa sản phẩm trong giỏ hàng thông qua hàm RemoveCartItem của biến Cart 48
Hình 64 Hàm BagCart để lấy tổng số lượng sản phẩm đang có trong giỏ hàng thông qua hàm TotalQuantity của biến cart 49
Hình 65 Hàm CheckOut để thanh toán giỏ hàng 49
Hình 66 50
Hình 67 Hàm Search dùng để tìm kiếm sản phẩm 51
Hình 68 Hàm Index để hiển thị thông tin tất cả sản phẩm 51
Hình 69 Hàm SelectCate dùng để tạo dropdownlist hiển thị tất cả loại sản phẩm để admin chọn 51
Hình 70 Hàm SelectTacGia dùng để tạo dropdownlist hiển thị tất cả tác giả để admin chọn .52
Hình 71 Hàm SelectNSX dùng để tạo dropdownlist hiển thị tất cả nhà sản xuất để admin chọn 52
Hình 72 Hàm Create để lấy thông tin sản phẩm admin nhập vào 52
Hình 73 Hàm Create dùng để xử lý thông tin admin nhập vào 53
Hình 74 Hàm Edit dùng để hiển thị thông tin sản phẩm admin muốn chỉnh sửa 54
Hình 75 Hàm Edit dùng để xử lý thông tin admin nhập vào 54
Hình 76 Hàm Delete hiển thị thông tin sản phẩm admin muốn xóa 55
Hình 77 Hàm Delete dùng để xóa sản phẩm 55
Hình 78 Hàm ListProductType hiển thị tất cả loại sản phẩm 56
Hình 79 Hàm Create để nhận thông tin người dùng nhập vào 56
Hình 80 Hàm Create dùng để lấy dữ liệu từ admin nhập vào 56
Hình 81 Hàm Edit để hiển thị thông tin loại sản phẩm mà admin muốn chỉnh sửa 56
Hình 82 Hàm edit xử lý thông tin mà admin muốn thay đổi loại sản phẩm 57
Hình 83 Hàm Delete hiển thị thông tin loại sản phẩm mà admin muốn xóa 57
Hình 84 Hàm Delete xóa loại sản phẩm mà admin muốn xóa 58
Hình 85 Hàm UserAll để hiển thị tất cả thông tin của tất cả thành viên 58
Hình 86 Hàm DetailUser để hiển thị thông tin chi tiết của người dùng 58
Hình 87 Hàm DetailUserPartial hiển thị thông tin chi tiết người dùng được truyền dữ liệu từ hàm DetailUser 59
Hình 88 Hàm DeleteUser dùng để hiển thị thông tin user mà admin muốn xóa 59
Hình 89 Hàm Delete tiến hành xóa User 59
Trang 7Danh mục các từ viết tắt
Trang 8Danh mục bảng biểu
Trang 9Chương 1: Mở đầu
1.1 Lí do chọn đề tài
Ngày nay, nhờ cách mạng 4.0, công nghệ thông tin đã ngày càng ảnh hưởng tích cựctới rất nhiều các lĩnh vực trong đời sống Máy tính, smartphone là một vật không thểthiếu trong tất cả các lĩnh vực của đời sống Kể cả việc mua sắm đang là một xu hướngdành cho tất cả các doanh nghiệp và cửa hàng nhằm giúp khách hàng có thể thuận tiệnhơn trong việc lựa chọn và mua sản phẩm Thị trường buôn bán sách cũng không làngoại lệ, khi ngày càng nhiều nhà sách chuyển dần sang việc mua bán online và thu lạiđược nhiều hiệu quả
1.2 Mục đích chọn đề tài
- Đưa các sản phẩm lên website để khách hàng dễ dàng lựa chọn.
- Tăng hiệu quả kinh doanh và dễ dàng quản lý dữ liệu.
- Giúp khách hàng dễ dàng tìm được địa chỉ của cơ sở kinh doanh.
- Tra cứu được thông tin sản phẩm nhanh chóng.
- Nhanh chóng, tiện lợi cho cả người mua và người bán.
Trang 10Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng
2.1 HTML
2.1.1 Định nghĩa
- HTML (Hypertext Markup Language) là chuẩn ngôn ngữ đánh dấu siêu văn bản
cho phép hiển thị nội dung văn bản lên trình duyệt web
- HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiên
cứu CERN ở Thụy Sĩ Hiện nay, HTML đã trở thành một chuẩn Internet được tổ chứcW3C (World Wide Web Consortium) vận hành và phát triển Bạn có thể tự tìm kiếmtình trạng mới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3C
- Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML Phiên bản
HTML 4.01 được xuất bản năm 1999 Sau đó, các nhà phát triển đã thay thế HTMLbằng XHTML vào năm 2000
- Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm
vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như: <article>,
<header>, <footer>,…)
2.1.2 Ưu điểm
HTML được sử dụng để tạo bố cục, cấu trúc trang web Nó có một số ưu điểm sau:
- Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn
- Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay
- Học HTML khá đơn giản.
- Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao.
- Sử dụng mã nguồn mở, hoàn toàn miễn phí.
- HTML là chuẩn web được vận hành bởi W3C.
- Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js,…) 2.1.3 Nhược điểm
Bên cạnh ưu điểm, HTML cũng có các nhược điểm nhất định Cụ thể như sau:
- Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động, lập
trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như:PHP)
- Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như
header, footer
Trang 11- Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số
trình duyệt cũ không render được tag mới Do đó, dù trong HTML document có sửdụng các tag này thì trình duyệt cũng không đọc được)
- Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML.
2.2 CSS
2.2.1 Định nghĩa
- CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng
để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML).Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểu đơngiản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo racác đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vàocác phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổicấu trúc…
- CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì
HTML không được thiết kế để gắn tag để giúp định dạng trang web
- Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có
thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ ápdụng các thuộc tính cần thay đổi lên vùng chọn đó
2.2.2 Ưu điểm
- Khả năng tiết kiệm thời gian: CSS khi sử dụng có thể viết lần đầu, đồng thời sử
dụng lại trong các trang HTML tiếp theo KHông chỉ vậy, chúng ta hoàn toàn có thểxác định được một kiểu cho từng thành phần HTML và cũng áp dụng được cho nhiềutrang web khác khi cần thiết
- Khả năng tải trang nhanh chóng: Đặc trưng của CSS khi sử dụng là ít mã hơn Bởi
thế mà thời gian tải xuống nhanh chóng, giúp tiết kiệm thời gian đáng kể Khi viếtđược một quy tắc CSS của một thẻ cụ thể và lúc này chúng ta có thể áp dụng nó chomọi lần xuất hiện tiếp theo của thẻ đó, đồng thời hoàn toàn không cần tiến hành thayđổi thuộc tính của thẻ HTML
- Dễ dàng khi thực hiện bảo trì: Khi cần chúng ta chỉ cần thay đổi một kiểu và mọi
thành phần trong tất cả những website thì lúc này CSS sẽ hỗ trợ cập nhật hoàn toàn tựđộng
Trang 12- Sở hữu thuộc tính rộng: CSS được đánh giá cao nhờ sở hữu những thuộc tính rộng
hơn nếu đánh giá và so sánh với HTML
- Khả năng tương thích tốt: Khả năng tương thích với nhiều thiết bị cũng là ưu điểm
của CSS Cùng sử dụng một tài liệu HTML song với nhiều phiên bản website khácnhau được trình bày ở từng thiết bị di động đều được hỗ trợ tốt, có độ tương thích cao
2.3 Javascript
2.3.1 Định nghĩa
- JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML
giúp website sống động hơn JavaScript cho phép kiểm soát các hành vi của trang webtốt hơn so với khi chỉ sử dụng mỗi HTML Vậy ứng dụng thực tiễn của JavaScript làgì? Các slideshow, pop-up quảng cáo và tính năng autocomplete của Google là những
ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằng JavaScript
- JavaScript là ngôn ngữ lập trình được hỗ trợ hầu như trên tất cả các trình duyệt như
Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động
2.3.2 Ưu điểm
- JavaScript là ngôn ngữ lập trình dễ học.
- Lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn.
- JavaScript hoạt động trên nhiều trình duyệt, nền tảng.
- JavaScript giúp website tương tác tốt hơn với khách truy cập.
- JavaScript nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác.
2.3.3 Nhược điểm
- Dễ bị khai thác.
- Có thể được dùng để thực thi mã độc trên máy tính của người dùng.
- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất.
Trang 13Chương 3: Thiết kế
3.1 Giao diện trang chủ
Hình 1 Giao diện trang chủ: Header, Banner
Hình 2 Giao diện trang chủ: Danh mục sản phẩm
- Header: Logo, phần tìm kiếm sản phẩm, chế độ darktheme (trang trí).
- Các thẻ liên kết tới các trang gồm có:
Trang 14 Phát triển bản thân
- Banner
Hình 3 Giao diện trang chủ: Flash sale
- Sản phẩm Flash Sale.
- Thời gian còn lại của Flash Sale.
- Button để kéo qua các sản phẩm Flash Sale khác.
Hình 4 Giao diện trang chủ: Danh mục sách bài học cuộc sống
- Danh sách sản phẩm thể loại “Bài học cuộc sống”, gồm:
Trang 15Hình 5 Giao diện trang chủ: Danh mục sách kinh doanh
- Danh sách sản phẩm thể loại “Kinh doanh”, gồm:
Hình ảnh sách
Tên sách
Giá sách
Sao đánh giá
- Button “Xem thêm” để hiển thị thêm các sản phẩm thể loại “Kinh doanh”.
Hình 6 Giao diện trang chủ: Danh mục sách ngôn tình
- Danh sách sản phẩm thể loại “Ngôn tình”, gồm:
Hình ảnh sách
Trang 16 Tên sách
Giá sách
Sao đánh giá
- Button “Xem thêm” để hiển thị thêm các sản phẩm thể loại “Ngôn tình”.
Hình 7 Giao diện trang chủ: Danh mục sách phát triển bản thân
- Danh sách sản phẩm thể loại “Phát triển bản thân”, gồm:
Hình ảnh sách
Tên sách
Giá sách
Sao đánh giá
- Button “Xem thêm” để hiển thị thêm các sản phẩm thể loại “Phát triển bản thân”.
Hình 8 Giao diện trang chủ: Xu hướng
Trang 18Hình 10 Danh mục sản phẩm " Bài học cuộc sống"
Giao diện trang danh mục gồm:
- Tên danh mục của sách “Bài học cuộc sống”.
- Danh sách sản phẩm của danh mục, mỗi danh mục gồm: Hình ảnh sách, tên sách ,
giá sách, sao đánh giá
Hình 11 Danh mục sản phẩm " Kinh doanh"
Trang 19Giao diện trang danh mục gồm:
- Tên danh mục của sách “Kinh doanh”.
- Danh sách sản phẩm của danh mục, mỗi danh mục gồm: Hình ảnh sách, tên sách ,
giá sách, sao đánh giá
Hình 12 Danh mục sản phẩm " Ngôn tình"
Giao diện trang danh mục gồm:
- Tên danh mục của sách “Ngôn tình”.
- Danh sách sản phẩm của danh mục, mỗi danh mục gồm: Hình ảnh sách, tên sách ,
giá sách, sao đánh giá
Trang 20Hình 13 Danh mục sản phẩm " Phát triển bản thân"
Giao diện trang danh mục gồm:
- Tên danh mục của sách “Phát triển bản thân”.
- Danh sách sản phẩm của danh mục, mỗi danh mục gồm: Hình ảnh sách, tên sách ,
giá sách, sao đánh giá
3.3 Giao diện trang chi tiết sản phẩm
Trang 22Hình 14 Trang chi tiết sản phẩm
Giao diện trang chi tiết sản phẩm gồm:
- Hình ảnh sản phẩm (bấm vào hình để hiển thị thêm hình ảnh), tên sản phẩm
Trang 23Hình 15 Giao diện trang giỏ hàng
Giao diện trang giỏ hàng gồm:
- Các sản phẩm đã được đưa vào giỏ hàng ( Số lượng sản phẩm, giá tiền )
- Input để lựa chọn sản phẩm cần mua / Input để chọn tất cả sản phẩm trong giỏ hàng
- Button thùng rác để bỏ sản phẩm trong giỏ hàng
- Input để nhập thông tin khách hàng
- Input lựa chọn cách giao hàng
- Input lựa chọn phương thức thanh toán
- Button “Thành tiền” để đặt hàng
3.5 Giao diện trang xác nhận đơn hàng
Hình 16 Giao diện trang xác nhận đơn hàng
Trang 24Giao diện trang xác nhận đơn hàng gồm:
- Dấu tick đã xác nhận đơn hàng
- Button “Tiếp tục mua sắm” để quay lại trang chủ
- Button “Xem chi tiết đơn hàng” để xem lại đơn hàng
3.6 Giao diện trang đơn hàng của tôi
Hình 17 Giao diện trang đơn hàng của tôi
Giao diện trang đơn hàng của tui gồm:
- Các thông tin chi tiết về đơn hàng (mã hàng, số tiền,…)
- Button thùng rác để hủy đơn hàng
- Chi tiết sản phẩm (bấm vào sẽ chuyển tới trang chi tiết đơn đặt hàng) 3.7 Giao diện trang chi tiết đơn đặt hàng
Hình 18 Giao diện trang chi tiết đơn đặt hàng
Giao diện trang chi tiết đơn đặt hàng gồm:
- Thông tin sản phẩm đã đặt hàng
- Tổng số tiền các sản phẩm đã đặt
3.8 Giao diện trang thông tin tài khoản
Trang 25Hình 19 Giao diện trang thông tin tài khoản
Giao diện trang thông tin tài khoản gồm:
- Thông tin chi tiết tài khoản
- Button “Lưu thay đổi” để cập nhật thông tin tài khoản
3.9 Giao diện trang đăng nhập
Hình 20 Giao diện trang đăng nhập
Giao diện trang đăng nhập gồm:
- Input để nhập tài khoản
- Input để nhập mật khẩu
Trang 26- Button “Đăng nhập” để bắt đầu vào trang chủ mua hàng
- Button “Đăng ký” để tới trang đăng ký tài khoản
3.10 Giao diện trang đăng ký
Hình 21 Giao diện trang đăng ký
Giao diện trang đăng ký gồm:
- Input để nhập tài khoản
- Input để nhập mật khẩu
- Input để nhập lại mật khẩu lần nữa
- Button “Đăng kí” để hoàn tất đăng kí
- Button “Đăng nhập” để tới trang đăng nhập
3.11 Giao diện trang Admin
Hình 22 Giao diện trang Admin
Trang 27Giao diện trang Admin gồm:
- Tất cả sản phẩm có trong cửa hàng
- Header:
Thanh tìm kiếm
Sản phẩm: hiển thị, thêm, xóa, sửa tất cả sản phẩm trong cửa hàng
Người dùng: hiển thị, xóa danh sách người dùng
Loại sản phẩm: hiển thị, thêm, xóa, sửa từng danh mục sản phẩm
- Button “Thêm” để tới trang thêm sản phẩm mới.
- Button “Sửa” để tới trang sửa sản phẩm đã chọn.
- Button “Xóa” để xóa sản phẩm đã chọn.
3.12 Giao diện trang thêm sản phẩm
Hình 23 Giao diện trang thêm sản phẩm
Giao diện trang thêm sản phẩm gồm:
Trang 28- Nhập thông tin chi tiết sản phẩm cần thêm mới
- Mục chọn tệp hình ảnh
- Button “Tạo mới” để thêm sản phẩm lên trang web
3.13 Giao diện trang xóa sản phẩm
Hình 24 Giao diện trang xóa sản phẩm
Giao diện trang xóa sản phẩm gồm:
- Thông tin chi tiết sản phẩm cần xóa
- Button “Xóa” để xóa sản phẩm khỏi trang web
3.14 Giao diện trang sửa sản phẩm
Trang 29Hình 25 Giao diện trang sửa sản phẩm
Giao diện trang sửa sản phẩm gồm:
- Sửa thông tin chi tiết sản phẩm
- Chọn tệp hình ảnh
- Button “Lưu” để lưu sản phẩm đã sửa
3.15 Giao diện trang quản lý loại sản phẩm
Trang 30Hình 26 Giao diện trang quản lý loại sản phẩm
Giao diện trang quản lý loại sản phẩm có:
- Tên loại sản phẩm đang có
- Button “Thêm”, “Sửa”, “Xóa”
Hình 27 Thêm loại sản phẩm
Giao diện trang thêm loại sản phẩm có:
- Input nhập tên loại sản phẩm
- Button “Thêm” để thêm loại sản phẩm
Hình 28 Chỉnh sửa loại sản phẩm
Giao diện trang sửa loại sản phẩm có: