Tài liệu: Báo cáo đồ án cơ sở 2 trang web bán đồ ăn trực tuyến

Báo cáo đồ án cơ sở 2 về thiết kế trang web bán đồ ăn trực tuyến. Tìm hiểu quy trình phát triển, chức năng và giải pháp công nghệ hoàn chỉnh.

• Tác giả: Trần Nguyên Anh
• Người hướng dẫn: Ts. Nguyễn Hà Huy Cường
• Trường học: Trường Đại học Công nghệ Thông tin & Truyền thông Việt Hàn
• Chuyên ngành: Khoa Học Máy Tính
• Đề tài: Trang Web Bán Đồ Ăn Trực Tuyến
• Loại tài liệu: Đồ án cơ sở
• Năm xuất bản: 2022
• Địa điểm: Đà Nẵng

Tóm tắt

I. Giới Thiệu Về Báo Cáo Đồ Án Cơ Sở 2 Trang Web Bán Đồ Ăn Trực Tuyến

Báo cáo đồ án cơ sở 2 là một dự án học tập quan trọng được thực hiện bởi sinh viên khoa Khoa học Máy tính trường Đại học Công nghệ Thông tin & Truyền thông Việt Hàn. Đề tài tập trung vào phát triển trang web bán đồ ăn trực tuyến với các tính năng hiện đại và giao diện thân thiện người dùng. Dự án được thực hiện dưới sự hướng dẫn của TS. Nguyễn Hà Huy Cường, nhằm giúp sinh viên áp dụng kiến thức lý thuyết vào thực tiễn. Báo cáo này cung cấp thông tin chi tiết về phân tích, thiết kế và triển khai hệ thống, từ đó giúp người đọc hiểu rõ quy trình phát triển một ứng dụng web thương mại điện tử hoàn chỉnh và chuyên nghiệp.

1.1. Bối Cảnh và Lý Do Chọn Đề Tài

Với sự phát triển nhanh chóng của công nghệ và nhu cầu mua sắm trực tuyến ngày càng tăng, trang web bán đồ ăn trở thành một giải pháp thiết thực. Đề tài được chọn nhằm giải quyết vấn đề khó khăn trong việc tìm kiếm và đặt hàng đồ ăn một cách tiện lợi. Dự án cung cấp nền tảng kỹ thuật vững chắc, kết hợp công nghệ React JS, Node JS và MongoDB để xây dựng ứng dụng web chuyên nghiệp.

1.2. Mục Tiêu và Phương Pháp Nghiên Cứu

Mục tiêu chính của đồ án là phát triển một nền tảng thương mại điện tử hoàn chỉnh với các tính năng bán hàng, quản lý đơn hàng và thanh toán trực tuyến. Phương pháp nghiên cứu bao gồm phân tích yêu cầu khách hàng, thiết kế cơ sở dữ liệu, và phát triển giao diện người dùng. Những phương pháp này đảm bảo sản phẩm cuối cùng đáp ứng đầy đủ nhu cầu của người dùng và nhà phát triển.

II. Công Nghệ và Công Cụ Sử Dụng Trong Dự Án

Báo cáo đồ án chi tiết các công nghệ hiện đại được sử dụng để phát triển trang web bán đồ ăn. Stack công nghệ gồm React JS cho frontend, Node JS cho backend, và MongoDB cho quản lý cơ sở dữ liệu. Ngoài ra, dự án cũng áp dụng Tailwind CSS để tạo giao diện đẹp mắt, RESTful API cho kết nối dữ liệu hiệu quả. Các công cụ phát triển như Visual Studio Code và MongoDB Compass GUI được sử dụng để hỗ trợ quá trình lập trình. Lựa chọn công nghệ này đảm bảo ứng dụng có khả năng mở rộng, bảo mật cao và hiệu năng tối ưu.

2.1. Frontend Framework React JS

React JS là thư viện JavaScript tiên tiến dùng để xây dựng giao diện người dùng tương tác. Nó cho phép phát triển các component tái sử dụng, giúp trang web trở nên linh hoạt và dễ bảo trì. React hỗ trợ quản lý trạng thái hiệu quả, cho phép ứng dụng cập nhật dữ liệu một cách mượt mà mà không cần tải lại trang. Công nghệ này là lựa chọn tối ưu cho các ứng dụng web đòi hỏi hiệu năng cao.

2.2. Backend Database và CSS Framework

Node JS được sử dụng để phát triển backend, cung cấp server mạnh mẽ xử lý các yêu cầu từ phía client. MongoDB là cơ sở dữ liệu NoSQL linh hoạt, phù hợp cho lưu trữ dữ liệu sản phẩm, đơn hàng và thông tin khách hàng. Tailwind CSS giúp tạo giao diện đẹp mắt với tiếp cận utility-first. Visual Studio Code là trình soạn thảo mã được yêu thích, hỗ trợ debug và tối ưu quá trình phát triển.

III. Phân Tích Thiết Kế Hệ Thống và Use Case Diagram

Phân tích thiết kế hệ thống trong báo cáo đồ án cơ sở 2 bao gồm các diagram chi tiết minh họa chức năng của từng module. Use-case diagram tổng quát thể hiện các tương tác giữa người dùng và hệ thống, bao gồm xem sản phẩm, phân loại hàng hóa, quản lý giỏ hàng, đăng ký đăng nhập, và thanh toán đơn hàng. Mỗi use-case được mô tả chi tiết thông qua activity diagram và workflow, giúp hiểu rõ luồng xử lý dữ liệu. Activity diagram cho thấy các bước thực hiện từng chức năng, từ khởi tạo đến hoàn tất. Thiết kế này đảm bảo tính logic và khả năng quản lý của hệ thống.

3.1. Các Chức Năng Chính của Hệ Thống

Trang web bán đồ ăn cung cấp các chức năng thiết yếu như xem sản phẩm, tìm kiếm theo loại, thêm vào giỏ hàng, cập nhật thông tin cá nhân, và thanh toán đơn hàng. Ngoài ra, người dùng có thể xem tin tức, liên hệ cửa hàng, thêm sản phẩm yêu thích, và đặt hàng trực tuyến. Mỗi chức năng được thiết kế để tối ưu trải nghiệm người dùng, từ giao diện đơn giản đến quy trình thanh toán an toàn.

3.2. Chi Tiết Workflow và Activity Diagram

Activity diagram chi tiết cho mỗi use-case giúp hiểu rõ luồng xử lý. Ví dụ, use-case đăng ký bao gồm các bước nhập thông tin, xác thực, và tạo tài khoản. Use-case thanh toán bao gồm xác nhận giỏ hàng, chọn phương thức thanh toán, và xác nhận đơn hàng. Workflow diagram minh họa các quyết định và điều kiện, đảm bảo tính chính xác và đầy đủ của quá trình.

IV. Giao Diện Website và Kết Luận Hướng Phát Triển

Báo cáo đồ án cung cấp hình ảnh chi tiết về các trang chính của website, bao gồm trang cửa hàng, trang tin tức, trang đăng nhập, trang giỏ hàng, và trang thanh toán. Giao diện được thiết kế thân thiện với người dùng, có logo rõ ràng, thẻ sản phẩm hấp dẫn, và bộ lọc sản phẩm tiện lợi. Trang web hỗ trợ các phương thức thanh toán đa dạng như tiền mặt và thanh toán online. Mỗi thành phần giao diện được tối ưu hóa cho trải nghiệm người dùng tốt nhất. Tuy nhiên, dự án vẫn có những nhược điểm cần cải thiện trong phiên bản tương lai, và báo cáo đề xuất các hướng phát triển tiếp theo.

4.1. Các Trang Chính và Thành Phần Giao Diện

Trang cửa hàng hiển thị danh sách sản phẩm với thẻ sản phẩm chứa hình ảnh, giá cả, và mô tả ngắn. Trang tin tức cung cấp thông tin cập nhật, trong khi trang chi tiết bài tin tức cho phép đọc toàn bộ nội dung. Trang giỏ hàng cho phép quản lý sản phẩm đã chọn. Thẻ sản phẩm và bộ lọc sản phẩm giúp người dùng tìm kiếm và so sánh dễ dàng, nâng cao tỷ lệ chuyển đổi bán hàng.

4.2. Nhược Điểm và Hướng Phát Triển Tương Lai

Mặc dù đồ án hoàn thành tốt các chức năng cơ bản, vẫn có những nhược điểm cần cải thiện như tối ưu hóa tốc độ tải, nâng cao bảo mật thanh toán, và thêm tính năng AI gợi ý sản phẩm. Hướng phát triển tương lai bao gồm tích hợp chatbot khách hàng, hệ thống đánh giá sản phẩm, và ứng dụng di động. Những cải tiến này sẽ giúp trang web trở thành nền tảng thương mại điện tử toàn diện và cạnh tranh hơn.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN 1. Tên đề tài: Xây dựng “TRANG WEB BÁN ĐỒ ĂN TRỰC TUYẾN. Bối cảnh thực hiện: - Tháng 10 năm 2022 đề xuất thực hiện đề án xây dựng TRANG WEB BÁN ĐỒ ĂN TRỰC TUYẾN. - Đơn vị khảo sát: Nhà hàng “Los pollos Hermanos” – Chuyên phục vụ các loại thức ăn nhanh.

- Hình thức kinh doanh: Đặt hàng, mua về nhà. Vấn đề cần giải quyết: - Chưa quảng bá được thương hiệu của cửa hàng đến những vùng xa trong nội thành, ngoại tỉnh. - Chưa triển khai dược hình thức giao hàng tận nhà vì khách hàng lần đầu biết đến quán không biết được menu có gì để đặt. Nội dung chính: - Tìm hiểu nguyên lý, cách tạo nên một trang web động, tạo REST- API với môi trường node js.

- Thiết kế đặc tả hệ thống. - Xây dựng các module cần thiết cho hệ thống. - Thiết kế giao diện, bên cạnh đó tìm hiểu và đánh giá tâm lý của khách hàng để thiết kế thêm vào đó là cải thiện để các chức năng trên trang web trở nên tiện lợi hơn đối với khách hàng - Website nhanh và hiệu quả hơn trong việc bán món ăn. - Áp dụng rộng rãi chức năng của các framework để tạo nên trang web và cơ sở dữ liệu dạng non-relational NOSQL với mã nguồn mở được sử dụng rộng rãi mongodb Cơ sở dữ liệu được đưa lên cloud để hợp tác và cũng có thể đưa dưới local để làm việc riêng biệt 1.

Phương pháp nghiên cứu. Phương pháp 1: - Tên phương pháp: Nghiên cứu thực tế. - Cách thực hiện: Khảo sát tại các quán, nhà hàng bán thức ăn nhanh. Phương pháp 2: - Tên phương pháp: Nghiên cứu qua sách báo.

- Cách thực hiện: Mượn từ thư viện về nghiên cứu. Phương pháp 3: - Tên phương pháp: Nghiên cứu qua internet. - Cách thực hiện: thực hiện đọc thông tin, xem mã nguồn bằng trình duyệt. Kết luận: Hình 1 So sánh các phương pháp nghiên cứu - Kết hợp thực hiện cả 3 phương pháp nghiên cứu nhưng ưu tiên sử dụng phương pháp 3 nhiều hơn.

Lý do chọn đề tài: Trong thời đại ngày nay, đất nước ta đang hội nhập vào WTO cùng với phát triển nhanh chóng của công nghệ thông tin được áp dụng trên mọi lĩnh vực của cuộc sống như kinh tế, chính trị, văn hóa xã hội,… tất cả đều cần có công nghệ thông tin. Như hiện nay chúng ta đã biết lập trình và thiết kế Website có thể được coi là ngành “hot” mà hiện nay chúng ta đang rất quan tâm. Sau khi nghiên cứu tình hình của công ty em đã đưa ra quyết định “TRANG WEB BÁN ĐỒ ĂN TRỰC TUYẾN” nhằm đáp ứng nhu cầu của khách hàng. Hiện nay nhu cầu sử dụng Internet ngày càng nhiều và hình thức kinh doanh trên mạng ngày càng đa dạng và phong phú rất được nhiều người sử dụng và ưa chuộng.

Cho nên khi xây dựng trang web này trên hệ thống trực tuyến sẽ giúp cho khách hàng thuận lợi trong việc mua các sản phẩm của công ty mà không cần phải vất vả đến tận nơi để mua hàng như lúc trước. Mục tiêu đề tài: - Giúp doanh nghiệp hoặc công ty đưa sản phẩm đến nhiều người mua hơn. - Giúp giảm thiểu khả năng đi lại trong mùa covid-19. - Giúp người dùng chỉ cần tốn vài phút để mua sản phẩm.

- Mang lại sự tiện dụng trong việc mua sắm của người dùng. - Đem lại được kiến thức thực tiễn cho chúng em, đáng để học hỏi cũng như trau dồi kiến thức. - Cải thiện kỹ năng lập trình của nhóm bọn em với React JS - Cung cấp cho nhóm em kiến thức về cách vận hành của một nhà hàng bán thức ăn nhanh. Kết quả: - Vận dụng những kiến thức cơ bản cần có về lập trình web để cho ra kết quả gần với các trang web thương mại điện tử ngoài thực tế nhất có thể.

- Ứng dụng và phát triển tất cả các chức năng của framework react js, công nghệ node js và công nghệ SPA trong react js cải thiện tốc độ trang web- Ứng dụng, phát triển được công nghệ thiết kế web bằng ReactJS - Với quy mô trang web vừa và nhỏ, cộng thêm thời gian không cho phép nên đề tài “TRANG WEB BÁN ĐỒ ĂN TRỰC TUYẾN” có thể chưa có đầy đủ các chức năng hoàn thiện của một trang web tìm việc. Trong quá trình làm còn nhều sai sót, do kiến thức có hạn lên website còn ít nhiều thiếu sót về việc hiển thị cũng như tối ưu thuật toán, thời gian thực hiện. Cũng như giao diện chưa được thân thiện với người dùng. Một số lỗi còn xảy ra trong lúc chạy chương trình.

Trong tương lai chúng tôi sẽ cố gắng khắc phục những sai sót này. GIỚI THIỆU CÁC PHẦN CỦA WEBSITE VÀ CHỨC NĂNG CỦA TỪNG PHẦN - Website được chia làm 3 trang chính: - Trang chủ - Shop - Trang thanh toán 1. Trang chủ - Hiển thị món nổi bật, món mới ra mắt, … - Cung cấp thông tin người dùng cần biết về trang web 1. Shop - Phân loại món ăn - Đưa vào giỏ hàng 1.

Thanh toán - Thanh toán bằng tiền mặt - Thanh toán bằng thẻ CHƯƠNG 2. GIỚI THIỆU CÔNG NGHỆ 2. React JS React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng, nó không phải là 1 framework js nào hết. React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.

React được xây dựng xung quanh các component. React không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. [CITATION Bảo18 \t \l 1033 ] Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cải thiện performance website thì những tính năng đặc biệt dưới đây có thể là lý do khiến bạn “chốt sale” với ReactJS và bắt đầu tìm hiểu nó từ bây giờ: - Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp. - Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google.

Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé! [CITATION TừQ21 \l 1033 ] Hình 2 React JS 2. MongoDB Hình 3 MongoDB MongoDB là một database hướng tài liệu (document), một dạng NoSQL database. Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON. MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau.

Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.[CITATION Got21 \l 1033 ] MongoDB cho phép ta: + Quản lý và truyền tải content + Hỗ trợ Cấu trúc Mobile và Social + Quản lý data khách hàng 2. HTML HTML (viết tắt của từ HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript. Hình 4 HTML Một website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng.

Lưu ý, HTML không phải là ngôn ngữ lập trình. Điều này có nghĩa là nó không thể thực hiện các chức năng “động”. Hiểu một cách đơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web. HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng.

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ức W3C (World Wide Web Consortium) vận hành và phát triển. 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ế HTML bằ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>…). CSS Hình 5 CSS 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.

Nó có thể hiểu đơn giả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 ra các đoạn văn bản, các tiêu đề, bảng…thì CSS sẽ giúp ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấ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ẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Mối tương quan giữa HTML và CSS rất mật thiết.

HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời. Javascript Hình 6 Javascript Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa. Javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome,.

trên máy tính lẫn điện thoại. Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng. Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client.

Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend.