Tiểu Luận Lập Trình Web Và Ứng Dụng Đề Tài Thiết Kế Giao Diện Website Bán Đồ Ăn Nhanh.pdf

Khi nhấn vào icon đăng nhập/ giỏ hàng/ sẽ chuyển qua trang login/cart bằng location.href = './login.html' ; location.href = './cart.html'  Hiển thị sản phẩm theo phân loại, có phân tran

TRƯỜNG ĐẠI HỌC SÀI GÒN

KHOA CÔNG NGHỆ THÔNG TIN

MÔN: LẬP TRÌNH WEB VÀ ỨNG DỤNG

Đề tài:

THIẾT KẾ GIAO DIỆN WEBSITE BÁN ĐỒ ĂN NHANH

Sinh viên thực hiện tiểu luận:

Họ và tên: Phạm Lê Huyền Trang

Mã số sinh viên: 3120410012

Thành viên nhóm đồ án:

Phạm Lê Huyền Trang - 3120410012 Mai thanh An - 3120410019 Huỳnh Thị Phương Vy - 3120410627

Võ Kim Uyên - 3124010602

Giảng viên hướng dẫn: Nguyễn Thanh Sang

Thành phố Hồ Chí Minh - tháng 12/2021

MỤC LỤC

Trang

1 Giới thiệu đề

tài 1

1.1 Giới thiệu đề tài 1

1.2 Lí do chọn đề tài 1

1.3 Mục đích, yêu cầu 1

1.4 Các chức năng chính của website 2

1.5 Link source code 2

2 Nội dung chi tiết 2

2.1 Trang chủ (index) 2

2.2 Trang giỏ hàng (cart) 6

2.3 Trang đăng nhập/ đăng ký (login) 9

2.4 Trang thông tin tài khoản cá nhân (user-page) 13

3 Kết luận 17

1 GIỚI THIỆU ĐỀ TÀI

1.1 Giới thiệu đề tài

Đề tài này, tập trung thiết kế một giao diện website bán đồ ăn nhanh đơn giản, thân thiện với người dùng Website có đầy đủ các chức năng front-end, back-end đơn giản Là một trang web bán đồ ăn nhanh thân thiện, dễ sử dụng với giao diện ưa nhìn, tối giản, tiện lợi phù hợp với hầu hết người tiêu dùng Có các chức năng cho người dùng cuối (end-user) và các chức năng cho người quản trị web (web-admin)

1.2 Lý do chọn đề tài

Trong thời đại công nghiệp hóa - hiện đại hóa của đất nước ngày càng vững mạnh, mọi thứ đều được số hóa, số lượng người sử dụng công nghệ cao, mạng xã hội tăng lên nhanh chóng Đặc biệt trong bối cảnh tình hình dịch bệnh diễn biến phức tạp, tất cả mọi người đều phải làm việc tại nhà, mọi hoạt động vui chơi - giải trí - ăn uống đều tạm hoãn Hiểu được tâm trạng lo lắng của những người bán đồ ăn, nhu cầu cần thiết của những người không thể ra khỏi nhà vì dịch bệnh Trong môn học Lập trình web và ứng dụng, em quyết định chọn đề tài Thiết kế giao diện website bán đồ ăn nhanh đề phù hợp với bối cảnh hiện tại, có tính ứng dụng cao trong đời sống hàng ngày

1.3 Mục đích, yêu cầu

 Các chức năng người dùng cuối (end-user)

- Hiển thị sản phẩm theo phân loại (có phân trang).

- Hiển thị chi tiết sản phẩm

- Tìm kiếm (kết quả tìm kiểm có phân trang)

+ Cơ bản: theo sản phẩm

+ Nâng cao: theo tên sản phẩm, có chọn phẩn loại và khoảng giá

- Đăng nhập/ đăng ký

- Đăng ký (phải đăng ký trở thành khách hàng mới được phép mua hàng)

- Khách hàng chọn mua sản phẩm

- Khách hàng xem lại các đơn hàng đã đặt

1.4 Các chức năng chính của website

- Hiển thị sản phẩm theo phân loại (có phân trang).

- Hiển thị chi tiết sản phẩm

- Tìm kiếm (kết quả tìm kiểm có phân trang)

+ Cơ bản: theo sản phẩm

+ Nâng cao: theo tên sản phẩm, có chọn phân loại và khoảng giá

- Đăng nhập/ đăng ký

- Đăng ký (phải đăng ký trở thành khách hàng mới được phép mua hàng)

- Khách hàng chọn mua sản phẩm

- Khách hàng xem lại các đơn hàng đã đặt

1.5 Link source code

https://drive.google.com/file/d/1cnnUWAO_X0Hm6K3iQr2R8vV0peu4v0m2/v iew?usp=sharing

2.1 Trang chủ (index)

- Có đầy đủ các nút đăng nhập, xem giỏ hàng và tìm kiếm Khi nhấn vào icon đăng nhập/ giỏ hàng/ sẽ chuyển qua trang login/cart bằng location.href =

'./login.html' ; location.href = './cart.html'

 Hiển thị sản phẩm theo phân loại, có phân trang

- Trang index hiển thị sản phẩm theo phân loại FOOD/ DRINK có phân trang Bắt sự kiện click ở thẻ li chứa FOOD/ DINK để inner mảng food/drink

 Tìm kiếm theo sản phẩm

- Tìm kiếm sản phẩm theo tên Nhập dữ liệu cần vào thẻ input sau đó thêm sự kiện onchange, xét includes của giá trị đó và tên các sản phẩm, nếu đúng thì inner sản phẩm đó (tìm kiếm tương đối)

for (index = 0; index < itemArr.length; index++)

if

(itemArr[index].name.toUpperCase().includes(valueSearch.toUpperCase()))

dataFilter.push(itemArr[index]);

 Tìm kiếm theo khoảng giá

- Tìm kiếm theo khoảng giá Sort mảng sản phẩm theo tăng dần/ giảm dần/ khoảng giá người dùng nhập

 Hiển thị chi tiết sản phẩm và chọn sản phẩm cần mua

- Khánh hàng nhấn nút “Thêm vào giỏ hàng” để hiển thị thông tin sản phẩm và chọn số lượng muốn thêm Bắt sự kiện click ở thẻ button để inner modal chứa thông tin sản phẩm Bắt sự kiện click ở thẻ button “thêm vào giỏ hàng” trong modal, alert thông báo thêm thành công, remove class ‘modal’

- Responsive: khi chiều ngang của giao diện dưới 1024px, một vài thành phần trong

trang sẽ được thay đổi để thuận tiện cho người dùng bằng @media Cho thẻ div chưa mobie-menu display = ‘block’, thẻ ul chưa các li HOME/ FOOD/ DRINK display thành ‘none’; lắng nghe sự kiện click vào thẻ p chứa ‘danh mục’, cho display thẻ ul thành ‘block’/ ‘none’ để tạo menu ẩn/ hiện khi người dùng ấn vào chữ danh mục

2.2 Trang giỏ hàng (cart)

- Khi nhấn vào biểu tượng giỏ hàng ở trang index, địa chỉ đường dẫn sẽ đổi từ index.html thành cart.html để chuyển qua trang giỏ hàng

- Khi giỏ hàng trống

- Khi có sản phẩm được thêm vào giỏ hàng Hứng key ‘buyItems’ từ localStorage vào mảng itemList Nếu mảng itemList khác rỗng thì inner các item, ngược lại inner

‘không có sản phẩm nào’

- Có thể thêm/ bớt số lượng sản phẩm khi nhấn vào dấu +/- ở ô số lượng Bắt sự kiện onclick vào thẻ p chứa +/-, số lượng (quantity) của item tăng/giảm Thành tiền được tính lại bằng số lượng nhân giá tiền (element.quantity *

parseInt(element.price)) Duyệt mảng itemList, tổng tiền bằng tổng cộng dồn của số lượng 1 sản phẩm nhân giá tiền 1 sản phẩm (sum += element.quantity *

parseInt(element.price) )

- Khi nhấn vào biểu tượng thùng rác, modal hỏi bạn có chắc chắn xóa sản phẩm đó

sẽ hiện lên bằng cách lắng nghe sự kiện click vào icon delete, display của modal =

‘flex’ Nếu nhấn √ thì lắng nghe sự kiện click; alert (‘xóa thành công’); cho display của modal = ‘none’; duyệt mảng itemList tìm item có id trùng với item vừa được chọn xóa, xóa item đó bằng splice() Nếu nhấn Ø thì cho display của modal =

‘none’

 Khách hàng mua hàng

- Khi nhấn Đặt hàng nếu chưa đăng nhập sẽ hiện lên thông báo ‘Chưa đăng nhập’ Kiểm tra đăng nhập chưa bằng cách lấy dữ liệu từ localStorage:

if(localStorage.getItem('userInfo') !== null) {

account = JSON.parse(localStorage.getItem('userInfo'));

};

Nếu account === undefined thì alert(‘Chưa đăng nhập’) Ngược lại, đẩy dữ liệu lên localStorage với key ‘order’ và xóa itemList

- Nhấn vào biểu tượng đăng nhập địa chỉ đường dẫn sẽ đổi từ /cart.html thành /login.html để chuyển qua trang đăng nhập

2.3 Trang đăng nhập/ đăng ký (login)

- Có thể truy cập trang đăng nhập/ đăng ký bằng cách nhấn vào biểu tượng đăng nhập ở trang chủ hoặc ở trang giỏ hàng, đường dẫn sẽ được đổi thành location.href

= './login.html' Giao diện đầu tiên của trang login là form đăng nhập, có 2 thẻ input chứa tên đăng nhập và mật khẩu và 1 thẻ button đăng nhập Khi click vào thẻ button

sẽ kiểm tra value của 2 thẻ input, nếu trống sẽ yêu cầu nhập Nhận key accountList chứa danh sách các tài khoản từ localStorage vào mảng userArr gồm user-name và password, duyệt mảng xét nếu giá trị tên đăng nhập và mật khẩu vừa nhập trùng với

1 phần tử trong mảng userArr thì thông báo đăng nhập thành công và chuyển qua trang chủ Nếu chỉ trùng tên tài khoản mà không trùng mật khẩu thì thông báo sai mật khẩu

- Nếu trước đó người dùng chưa có tài khoản thì nhấn vào thẻ p chứa ‘Tạo tài khoản’, form đăng kí sẽ hiện ra thay thế form đăng nhập bằng cách cho display của form đăng kí thành ‘none’ và display của form đăng nhập thành ‘flex’

- Form đăng nhập chưa 6 thẻ input và 1 thẻ button ‘tạo tài khoản’ Khi click vào thẻ button, lần lượt kiểm tra value của thẻ input nào trống thì alert nhập giá trị đó và kiểm tra mật khẩu và nhập lại mật khẩu có trùng nhau không

- Sau khi nhập đầy đủ và đúng dữ liệu, kiểm tra tên đăng nhập có trùng với các tên đăng nhập đã có trước đó ở mảng userArr nhận từ localStorage, nếu trùng thì thông báo yêu cầu nhập lại tên đăng nhập

- Nếu sau khi kiểm tra, mọi dữ liệu đều được nhập đầy đủ và hợp lệ thì alert Đăng

ký thành công; push dữ liệu vừa nhập vào mảng userArr rồi đẩy dữ liệu trong mảng lên localStorage với key accountList Trở về form đăng nhập bằng cách cho display form đăng ký thành ‘none’, display form đăng nhập thành ‘flex’ để người dùng đăng nhập tài khoản mình vừa tạo

2.4 Trang thông tin tài khoản cá nhân (user-page)

- Khi đăng nhập, dữ liệu của tài khoản được đẩy lên localStorage với key

‘UserInfo’ Trang index kiểm tra nếu nhận được dữ liệu với key ‘UserInfo’ từ

localStorage thì inner tên của đăng nhập của khách hàng và menu tùy chọn khi nhấn vào tên user bằng cách cho display của user-menu thành ‘block’

- Khi chọn Đăng xuất, xóa key ‘UserInfo’ ở localStorage và trở về trang index ban đầu

localStorage.removeItem('userInfo');

location.href = './index.html';

- Nếu chọn ‘xem hồ sơ’ Bắt sự kiện click ở thẻ li chứa ‘xem hồ sơ’, chuyển qua trang thông tin tài khoản (user) location.href = ‘./user.html’

- Trang thông tin tài khoản hiện đầy đủ thông tin của khách hàng bằng cách nhận key UserInfo từ localStorage Dữ liệu nhận gồm đầy đủ các thông tin của khách

hàng, cho value của các thẻ input bằng dữ liệu tương ứng Khi nhấn đăng xuất ở trang thông tin tài khoản tương tự nhấn đăng xuất ở trang chủ

 Khách hàng xem lại các đơn hàng đã đặt

- Bắt sự kiện click vào thẻ button chứa ‘Xem đơn hàng’ Nhập key ‘order’ chứa dữ liệu các đơn hàng đã mua được trang giỏ hàng đưa lên localStorage, nếu rỗng alert (‘Chưa có đơn hàng nào’)

- Nếu nhận được key ‘order’ từ localStorage, đưa dữ liệu vào mảng orderList gồm

mã khách hàng, mã đơn hàng, tổng tiền, ngày lập và một mảng các sản phẩm được chọn

(date = today.getDate()+'-'+ (today.getMonth()+1) +'-'+ today getFullYear ())

Duyệt mảng orderList, inner số thứ tự đơn hàng, ngày mua, tổng tiền và 1 thẻ button

‘xem chi tiết’

- Xem chi tiết đơn hàng: bắt sự kiện click vào thẻ button ‘xem chi tiết’, truyền vào

vị trí của đơn hàng, inner ra các sản phẩm trong mảng các sản phẩm được chọn của đơn hàng đó gồm tên, số lượng và giá tiền

3 KẾT LUẬN

Website tương đối đầy đủ các tính năng cho người dùng, thuận tiện, đẹp mắt Trang web hướng tới sự thân thiện, thuận tiện tối đa cho người sử dụng, dễ dàng và hiệu quả trong từng thao tác Tuy còn một vài thiếu sót ở phân loại sản phẩm theo tên có chọn phân loại và khoảng giá; chưa kiểm tra thông tin đăng ký rõ ràng, chính xác; phần xem lại đơn hàng đã mua của khách hàng chưa thật sự tối ưu, thuận tiện Song cá nhân em thấy đây vẫn là một trang web khả quan, có thể đưa vào sử dụng nếu được chỉnh sửa kĩ hơn Khi con người ngày càng trở nên bận rộn

và xu hướng giải quyết mọi việc bằng công nghệ ngày càng phát triền, các website bán đồ ăn ra đời như một điều tất yếu của cuộc sống Thấu hiểu được nhu cầu và xu hướng, chúng em thiết kế giao diện website bán đồ ăn nhanh vừa phù hợp với bối cảnh hiện tại, vừa phù hợp với thói quen ăn uống và tiêu dùng của các bạn trẻ