Báo cáo Đồ án Cơ sở 2: Xây dựng Website Bán Cà Phê - SV. Trần Trương Nhật Huy

Tải báo cáo đồ án xây dựng website bán cà phê. Tài liệu tham khảo chi tiết về phân tích, thiết kế hệ thống, giao diện và các chức năng website.

Chuyên ngành

Kỹ Thuật Máy Tính Và Điện Tử

Người đăng

Ẩn danh

Thể loại

Đồ án cơ sở 2

2023

58
0
0

Phí lưu trữ

30 Point

Tóm tắt

I. Giới Thiệu Về Đồ Án Xây Dựng Website Bán Cà Phê

Trong era chuyển đổi số hiện nay, website bán cà phê đã trở thành một công cụ thiết yếu để các doanh nghiệp F&B phát triển kinh doanh. Đồ án này nhằm xây dựng một nền tảng thương mại điện tử chuyên biệt cho lĩnh vực bán cà phê, kết hợp giữa công nghệ hiện đại và trải nghiệm người dùng tuyệt vời. Website bán hàng cà phê không chỉ giúp quảng bá thương hiệu và sản phẩm một cách hiệu quả, mà còn tạo điều kiện thuận lợi cho khách hàng tiếp cận và mua sắm. Bộ báo cáo toàn diện này bao gồm phân tích chi tiết, thiết kế hệ thống, triển khai kỹ thuật và các giải pháp quản lý thực tiễn. Thông qua hệ thống quản lý bán hàng tích hợp, doanh nghiệp có thể tối ưu hóa quy trình kinh doanh, nâng cao chất lượng dịch vụ khách hàng và tăng hiệu suất bán hàng.

1.1. Bối Cảnh và Tầm Quan Trọng

Trong bối cảnh cạnh tranh gay gắt của ngành cà phê Việt Nam, website thương mại điện tử là yếu tố quyết định để doanh nghiệp nổi bật. Khách hàng ngày nay yêu cầu trải nghiệm mua sắm trực tuyến tiện lợi, an toàn và chuyên nghiệp. Việc xây dựng một nền tảng bán cà phê trực tuyến giúp mở rộng thị trường, tiếp cận khách hàng rộng hơn, và xây dựng lòng tin thương hiệu.

1.2. Mục Tiêu Đề Tài

Đồ án hướng tới xây dựng một hệ thống website bán cà phê hoàn chỉnh với chức năng back-end mạnh mẽ: quản lý sản phẩm, danh mục, comment, hóa đơn, thống kê doanh thu. Front-end cung cấp giao diện thân thiện: mua hàng, đặt hàng, tìm kiếm, liên hệ và đánh giá sản phẩm, đảm bảo trải nghiệm người dùng tối ưu.

II. Phân Tích Yêu Cầu Hệ Thống Website Bán Cà Phê

Phân tích yêu cầu là bước nền tảng trong việc xây dựng website bán cà phê chuyên nghiệp. Hệ thống cần đáp ứng các yêu cầu chức năng và phi chức năng để đảm bảo hoạt động hiệu quả. Yêu cầu chức năng bao gồm: thiết kế giao diện hấp dẫn và dễ sử dụng, trang chủ hiện đại với các module chính như danh mục sản phẩm, giỏ hàng, tin tức sự kiện. Quản lý back-end cho phép xem, thêm, sửa, xóa dữ liệu về thể loại, sản phẩm, comment, tin tức và nhân viên. Tính năng tìm kiếm và lọc nâng cao giúp khách hàng dễ dàng tìm sản phẩm theo từ khóa, mã số, tên gọi hoặc các tiêu chí khác. Hệ thống cũng cần hỗ trợ liên hệ trực tuyến, đánh giá sản phẩm và quản lý giỏ hàng, đặt hàng một cách tiện lợi.

2.1. Yêu Cầu Chức Năng Chi Tiết

Phần front-end của website bán cà phê cần có: trang chủ ấn tượng với hình ảnh sản phẩm chất lượng, danh mục sản phẩm được sắp xếp logic, chức năng giỏ hàng cho phép thêm/xóa/thay đổi số lượng. Phần admin cần quản lý toàn bộ: sản phẩm, danh mục, đơn hàng, khách hàng, nhân viên, comment với quyền truy cập hạn chế theo chức vụ.

2.2. Yêu Cầu Phi Chức Năng

Website bán cà phê phải đáp ứng các tiêu chí: giao diện tiếng Việt 100%, tốc độ tải nhanh, bảo mật dữ liệu khách hàng, khả năng mở rộng cho tương lai, tương thích với các thiết bị di động, và hỗ trợ tính năng liên hệ thông qua Google Map, email, số điện thoại.

III. Công Nghệ và Ngôn Ngữ Lập Trình Sử Dụng

Việc lựa chọn công nghệ phù hợp là yếu tố quan trọng quyết định thành công của dự án website bán cà phê. Đồ án này sử dụng các công nghệ web hiện đại và phổ biến để xây dựng một hệ thống ổn định, bảo mật và dễ bảo trì. HTML được dùng để cấu trúc nội dung, CSS để tạo giao diện đẹp mắt và hấp dẫn, JavaScript để tăng tính tương tác. Phía back-end có thể sử dụng PHP, Python hoặc Node.js để xử lý logic kinh doanh. Cơ sở dữ liệu sử dụng MySQL hoặc PostgreSQL để lưu trữ thông tin sản phẩm, khách hàng, đơn hàng một cách an toàn. Framework như Laravel, Django hay Express.js giúp tăng tốc độ phát triển và đảm bảo mã nguồn chất lượng cao.

3.1. Ngôn Ngữ Front End

HTML, CSS, JavaScript tạo nên nền tảng giao diện website bán cà phê. HTML cung cấp cấu trúc trang web, CSS định dạng và tạo layout hấp dẫn, JavaScript thêm các hiệu ứng tương tác như validation form, hiển thị giỏ hàng động, popup liên hệ. Sử dụng Bootstrap hoặc Tailwind CSS giúp design responsive, tương thích đầy đủ trên mobile, tablet, desktop.

3.2. Công Nghệ Back End và Cơ Sở Dữ Liệu

Back-end của hệ thống quản lý bán cà phê sử dụng PHP với Framework Laravel hoặc Python Django để xử lý logic kinh doanh. MySQL hoặc PostgreSQL là giải pháp cơ sở dữ liệu mạnh mẽ, đảm bảo lưu trữ an toàn các bảng: sản phẩm, danh mục, hóa đơn, khách hàng, nhân viên.

IV. Triển Khai Xây Dựng và Các Chức Năng Chính

Giai đoạn triển khai xây dựng website bán cà phê là bước chuyển đổi thiết kế thành sản phẩm thực tế. Phần giao diện người dùng (Front-End) được phát triển với ưu tiên trải nghiệm khách hàng: trang chủ hấp dẫn với hình ảnh sản phẩm chất lượng cao, danh mục sản phẩm được sắp xếp logic, tính năng tìm kiếm và lọc nâng cao giúp khách hàng nhanh chóng tìm thấy sản phẩm mong muốn. Giỏ hàng cho phép thêm, xóa, thay đổi số lượng sản phẩm trước khi thanh toán. Phần quản trị viên (Admin Panel) cung cấp các công cụ mạnh mẽ: quản lý danh mục sản phẩm, chi tiết sản phẩm, giá cả, hình ảnh, quản lý đơn hàng, khách hàng, nhân viên, xem comment, đánh giá khách hàng, thống kê doanh thu, báo cáo bán hàng. Hệ thống được trang bị tính năng bảo mật: đăng nhập an toàn, phân quyền người dùng, mã hóa mật khẩu.

4.1. Giao Diện Người Dùng Front End

Giao diện website bán cà phê được thiết kế hiện đại, thân thiện với người dùng. Trang chủ hiển thị sản phẩm nổi bật, khuyến mãi, tin tức mới nhất. Trang danh mục cho phép xem chi tiết sản phẩm, đọc mô tả, xem hình ảnh, giá bán, đánh giá từ khách hàng khác. Giỏ hàng cung cấp tổng quan chi phí, cho phép thanh toán trực tuyến hoặc đặt hàng để giao sau. Chức năng liên hệ, đánh giá sản phẩm giúp khách hàng gửi feedback.

4.2. Giao Diện Quản Trị Admin

Admin Panel website bán cà phê cho phép quản lý toàn bộ hệ thống: thêm sửa xóa sản phẩm, danh mục, tin tức, nhân viên; xem danh sách khách hàng, đơn hàng, hóa đơn; trả lời hoặc xóa comment không phù hợp; xem thống kê doanh thu, báo cáo bán hàng theo thời gian. Hệ thống phân quyền đảm bảo chỉ nhân viên được phép truy cập các tính năng tương ứng.

18/12/2025

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

CHƯƠNG I. Khái quát đề tài 1.1 Phân tích yêu cầu đề tài Yêu cầu của đề tài xây dựng một Website bán hàng, người dùng có thể mua hàng online qua mạng bằng cách đăng ký tài khoản cá nhân. Thanh toán khi nhận hàng trực tiếp hoặc tích hợp thanh toán online bằng thẻ ngân hàng. Cửa hàng sẽ thường xuyên cập nhật các sản phẩm mới nhất, thuận tiện nhất cho người mua và người bán.

Khách hàng có thể dễ dàng tìm kiếm các sản phẩm phù hợp. Giao diện đơn giản, dễ sử dụng, thân thiện với người dùng. Phần quản trị có thể thêm, sửa, xóa các danh mục sản phẩm, thiết lập website, hoàn toàn có thể thay đổi toàn bộ giao diện trên trang quản trị. Giúp người dùng có thể thay đổi theo ý mình.2 Phạm vi đề tài Phạm vi quay quanh các nghiệp vụ bán hàng, tuân theo nghiệp vụ quán lý của quán cafe, đảm bảo đầy đủ các chức năng chính của phần mềm và khai thác các chức năng mới có liên quan đến quản lý quán café nhằm giúp cho phần mềm thêm phần tiện ích.

Giới thiệu ngôn ngữ và công nghệ sử dụng 2.1 Tìm hiểu về HTML 2. HTML là gì? HTML có tên đầy đủ là Hypertext Markup Language nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML thường được sử dụng để tạo và cấu trúc các phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, link, blockquotes,… HTML không phải là một ngôn ngữ lập trình mà chỉ là một ngôn ngữ đánh dấu. Điều này đồng nghĩa với việc HTML không thể thực hiện các chức năng “động”.

Nói cách khác, HTML tương tự như phần mềm Microsoft Word, chỉ có tác dụng định dạng các thành phần có trong website. Vai trò của HTML HTML là một loại ngôn ngữ đánh dấu siêu văn bản. Nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web.

Đồng thời, nó còn hỗ trợ khai báo các File kỹ thuật số như nhạc, Video, hình ảnh, … Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn sẽ cần đến HTML. HTML thực chất chứa những yếu tố cần thiết cho mọi thể loại Website. Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập. Điều này đúng dù trang của bạn xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu 2.

Đặc điểm của HTML HTML có nhiều thẻ định dạng, do đó bạn có thể trình bày trang Web dễ dàng, hiệu quả với ngôn ngữ đánh dấu siêu văn bản này. Với tôi, nó là một ngôn ngữ đánh dấu dễ dàng và đơn giản để sử dụng. Chúng ta có thể sử dụng nó để thiết kế trang Web cùng với văn bản một cách linh hoạt. HTML có thể liên kết đến các trang Web khác.

Nhờ ngôn ngữ đánh dấu này, bạn có thể thêm các Video, hình ảnh, âm thanh vào để các Website hấp dẫn, đẹp mắt và dễ tương tác hơn. Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux, Windows, và Mac vì nó là một nền tảng độc lập 2. Ưu nhược điểm của HTML a. - Kho tài nguyên khổng lồ với cộng đồng người dùng rộng lớn - Sử dụng mã nguồn mở nên người dùng có thể sử dụng miễn phí - Hoạt động mượt mà trên hầu hết các trình duyệt - Cách thức hoạt động đơn giản nên người học có thể dễ dàng nắm bắt được kiến thức để triển khai cho website của mình - Có thể tích hợp với nhiều ngôn ngữ khác nhau như PHP, Java, NodeJs, Ruby,… giúp người dùng xây dựng được một trang web với nhiều tính năng hấp dẫn - Sử dụng các markup ngắn gọn và có tính đồng nhất cao - Quy định theo một tiêu chuẩn nhất định và được vận hành bởi World Wide Web Consortium (W3C) b.

Nhược điểm. - Chỉ áp dụng được cho web tĩnh, không có sự tương tác với người dùng. Nếu muốn trang bị cho web các tính năng tự động thì cần phải sử dụng dịch vụ của bên thứ 3. - Một số trình duyệt còn cập nhật chậm để hỗ trợ các phiên bản mới của HTML, đặc biệt là HTML5 - Việc kiểm soát cách đọc và hiển thị file HTML của trình duyệt khó thực hiện - Chỉ áp dụng với cấu trúc nhất định, không có khả năng sáng tạo 2.

Cấu trúc cơ bản trang HTML <!DOCTYPE html> <html> <head> <title>Tiêu đề trang web</title> </head> <body> .Phầ n thân viết ở đây. Lịch sử của HTML HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet. Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức.

Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML. Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới. Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại). Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website.

Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website. Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.

Ví dụ và kết quả 2.2 Tìm hiểu về CSS 2. CSS là gì? CSS là chữ viết tắt của Cascading Style Sheets, là ngôn ngữ tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản, HTML không được thiết kế để gắn tag để giúp định dạng trang web. Chỉ có thể dùng nó để “đánh 2.2 Vai trò của CSS Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.

Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau. Cấu trúc của CSS Một đoạn CSS có cấu trúc 4 phần như sau: + selector : tên thẻ html hoặc class hoặc Id + { } : Cặp thẻ mở đóng, các thuộc tính của selector sẽ nằm trong cặp ngoặc nhọn này. + Thuộc tính: Thuộc tính của css qui định về cách bố trí, màu sắc,. + Giá trị thuộc tính: Nằm bên phải dấu " : " chỉ ra giá trị của thuộc tính đó.

VD: selector { thuộc tính 1 : giá trị 1; thuộc tính 2 : giá trị 2;. Lịch sử phát triển CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10 năm 1994. Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee tại CERN. Một số ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu tiên (CSS1) được phát hành vào năm 1996.

Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS. Tập tin định kiểu theo tầng đã tồn tại ở dạng này hay dạng khác kể từ khi bắt đầu Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML -Standard Generalized Markup Language) vào những năm 1980 và CSS được phát triển để cung cấp biểu định kiểu cho web. Một yêu cầu đối với ngôn ngữ biểu định kiểu web là nó đến từ các nguồn khác nhau trên web. Do đó, các ngôn ngữ biểu định kiểu hiện có như DSSSL và FOSI không phù hợp.

Mặt khác, CSS để cho kiểu của tài liệu bị ảnh hưởng bởi nhiều biểu định kiểu theo kiểu “cascading” Khi HTML phát triển, nó đã bao gồm nhiều phong cách hơn để đáp ứng nhu cầu của các nhà phát triển web. Sự phát triển này đã cho nhà thiết kế kiểm soát nhiều hơn về diện mạo trang web. Một điều nữa đó là chi phí HTML phức tạp hơn. Sự khác biệt trong việc triển khai trình duyệt web, chẳng hạn như ViolaWWW và WorldWideWeb, khiến giao diện trang web nhất quán trở nên khó khăn và người dùng ít kiểm soát hơn cách hiển thị nội dung web.

Ví dụ và kết quả 2. Javascript là gì? JavaScript là một ngôn ngữ kịch bản (scripting language) dùng để tương tác với các trang HTML dựa trên đối tượng (object-based scripting language). Ngôn ngữ này chủ yếu dùng cho kỹ thuật lập trình ở phía client Các chương trình JavaScript thường được nhúng trực tiếp vào tập tin HTML bằng tag <script> hoặc tích hợp vào trang web thông qua một tập tin được khai báo trong tag <link> JavaScript có một số đặc điểm: Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành không cần biên dịch trước(precompile). Trình duyệt dịch Script phân tích và thi hành ngay tức thời Lập trình theo cấu trúc (Structured programing) Có phân biệt chữ hoa và chữ thường 2.

Vai trò của Javascript Responding (đáp lại) nhanh chóng các request (yêu cầu) của người dùng. + Tạo ra các thành phần HTML nằm trong thành phần HTML khác. + Kiểm tra tính hợp lệ của dữ liệu do người dùng nhập (gửi nhận file, đăng ký người dùng, .) + Thực hiện các tính toán đơn giản phía client (người dùng) 2. Cấu trúc của Javascript Đoạn mã javascript được đặt trong cặp thẻ mở javascript <script> </script> 2.

Lịch sử của Javascript JavaScript được bắt đầu vào năm 1995 tại Netscape Communications. Vào thời gian này, các nhà sản xuất Netscape browser nhận ra rằng, việc thêm một "glue language" để nâng cao trải nghiệm người dùng sẽ làm tăng sự tiêu thụ nội dung của người dùng. Vì vậy, họ đã đưa Brendan Eich nhúng vào Scheme Programming language.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ