Báo cáo bài tập lớn môn thiết kế web giới thiệu về Đề tài và bài toán

Giới thiệu về vấn đề Gần đây, với sự phát triển đến chóng mặt của công nghệ thì việc số hóa mọi khía cạnh trong xã hội là một vấn đề vô cùng đáng được quan tâm, tất nhiên ngành dịch vụ c

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI

KHOA ĐÀO TẠO QUỐC TẾ

BÁO CÁO BÀI TẬP LỚN MÔN

THIẾT KẾ WEB

()

Giảng viên hướng dẫn: Lại Mạnh Dũng

Sinh viên thực hiện 1: Nguyễn Duy Thị Nguyệt Ánh - 232630973 Sinh viên thực hiện 2: Lưu Lại Tâm -232631050

Sinh viên thực hiện 3: Nguyễn Hoàng Nam – 232631035

Sinh viên thực hiện 4: Nguyễn Quốc Kỳ - 232631021

Sinh viên thực hiện 5: Phạm Ngọc Phúc - 232631041

Chương 1: GIỚI THIỆU VỀ ĐỀ TÀI VÀ BÀI TOÁN

1.1 Giới thiệu về vấn đề

Gần đây, với sự phát triển đến chóng mặt của công nghệ thì việc số hóa mọi

khía cạnh trong xã hội là một vấn đề vô cùng đáng được quan tâm, tất nhiên ngành

dịch vụ cũng không nằm ở ngoại lệ.Với ưu điểm của mình là có thể truy cập ở mọi

nơi, mọi thiết bị chỉ cần có trình duyệt, website là một lựa chọn vô cùng được ưa

chuộng trong cộng đồng công nghệ Nhằm hỗ trợ khách hàng trong việc dễ dàng tiếp cận với quán cafe cùng mục tiêu giúp cho khách hàng có trải nghiệm tốt hơn khi sử

dụng dịch vụ của quán

Trang web hiện tại đã và đang được deploy trên đường dẫn:

Source code của nhóm:https://github.com/JohanPhamK64/BTL_TKEWeb

1.2 Nghiệp vụ hệ thống:

● Khách hàng có thể theo dõi menu của quán ngay trên web

● Khách hàng có thể đặt bàn online bằng trang web cũng như liên hệ với quán

một cách dễ dàng

● Giao diện hệ thông có khả năng tương thích với nhiều loại thiết bị được người dùng sử dụng

- Chi tiết:

+ Cung cấp đầy đủ thực đơn của quán

+ Hiển thị những đánh giá mà khách hàng để lại

+ Giúp người dùng có thể xem rõ vị trí của quán trên bản đồ

+ Cung cấp những thông tin đầy đủ về quán cafe

1.3 Phân tích mục đích, yêu cầu của hệ thống

Mục đích của website là cung cấp cho người dùng một trải nghiệm thân thiện, tiện lợi, dễ sử dụng trong việc sử dụng những dịch vụ của quán

Yêu cầu của trang web

1

● Thân thiện với người sử dụng: Người dùng sẽ không gặp quá nhiều khó khăn

trong việc sử dụng trang web

● Tương thích với nhiều loại thiết bị được sử dụng: Giao diện được thiết kế để

có thể hoạt động mà vẫn dễ dàng sử dụng trên nhiều loại thiết bị

CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH 2.1.Các website cùng chủ đề

- Starbuck

- Highland coffee

- Chén trà Phúc Long

Dựa vào việc tham khảo, học tập các website của những quán café lớn nhỏ

khác, sản phẩm của nhóm mong muốn mang lại trải nghiệm tốt nhất có thể cho người

sử dụng

2.2.Các đối tượng sử dụng

Website của nhóm được thiết kế dành cho mọi đối tượng

CHƯƠNG 3: THIẾT KẾ 3.1 Use-case diagram

Biểu đồ use-case chính

2

3.2 Sitemap

3.3 Wireframe

3

Trang chủ:

4

Trang đặt bàn:

8

Trang thông tin món ăn:

9

CHƯƠNG 4: TRIỂN KHAI 4.1.Cấu trúc thư mục dự án

-Thư mục breakfast chứa html cùng css và ảnh của những món ăn trong menu bữa sáng.

-Thư mục css chứa bootstrap và css sử dụng cho trang chủ và trang đặt bàn.

-Thư mục js chứa file js mà chúng em sử dụng.

- Thư mục product chứa html cùng css và ảnh của những món ăn trong menu đồ uống.

-Thư mục videos chứa video sử dụng cho trang chủ phần thông tin về quán.

4.2.Giải thích giao diện và cách xây dựng

1 Trang chủ

Giao diện ban đầu khi mở web

-Bọn em tạo 1 thanh như trên đầu trang sẽ di chuyển khi mình cuộn trang lên

xuống

-Background sẽ là ảnh thay đổi lần lượt

-Ấn vào những phần trên thanh như menu, review,…sẽ tự động dẫn đến phần đó

10

Sơ lược về quán

-Giao diện nửa là video, nửa là nội dung

Những thành viên(Hình ảnh mang tính chất tượng trưng do nhóm em ngại)

11

-Tạo thành 2 bảng menu

12

Liên hệ

13

2 Trang thông tin món ăn:

Món ăn và chú thích

-Chia ra 1 nửa là ảnh món ăn, 1 nửa là tên, giá tiền cùng với chú thích của món ăn -Thanh công cụ phía trên sẽ di chuyển theo khi mình cuộn lên xuống trang web

14

Những món ăn khác

-Hiện ra 4 món ăn khác trong menu

Footer

15

3 Trang đặt bàn:

Giao diện đặt bàn

-Bọn em tạo 1 thanh như trên đầu trang sẽ di chuyển khi mình cuộn trang lên

xuống

-Form điền thông tin bao gồm ảnh và phần nhập thông tin cùng với nút đặt bàn

Footer

16

CHƯƠNG 5: KIỂM THỬ 1.1 Mục tiêu phát hiện lỗi trong quá trình thiết kế

Mục tiêu của kiểm thử trong quá trình thiết kế là phát hiện các lỗi logic, lỗi cấu trúc, lỗi giao diện, trong giai đoạn sớm nhất của quá trình phát triển phần mềm Điều này giúp giảm thiểu chi phí và thời gian sửa lỗi sau này

1.2 Cách thức xây dựng các test case link, effect, data validation

Test case link: Kiểm tra tính liên kết giữa các trang, tính logic của các link,

Test case effect: Kiểm tra hiệu ứng của các thao tác trên phần mềm, ví dụ như khi click vào một nút thì có hiện ra một trang mới hay không,

Dưới đây là một số cách thức nhóm em xây dựng các test case cụ thể:

● Test case link: Nhóm em sử dụng các phương pháp thủ công như nhập các link vào trình duyệt để kiểm tra, bấm vào các trang xem có chuyển sang trang đó không

● Test case effect: Nhóm em sử dụng các phương pháp thủ công như bấm vào các nút, nhập dữ liệu vào các ô điền, để kiểm tra hiệu ứng của các thao tác

Bảng điểm tự đánh giá:

Nguyễn Duy Thị

Nguyệt Ánh

Nguyễn Hoàng

Nam

Bảng nhóm tự đánh giá:

17

1.1 1.2 1.3 1.4 2.1 2.2 2.3 3.1 3.2 3.3 3.4

Nguyễn Duy Thị

Nguyệt Ánh

Nguyễn Hoàng

18