Báo cáo chuyên đề học phần lập trình web nâng cao đề ti xây dựng website bán đồ uống

CHƯƠNG 1: Khảo sát và xác lập dự án 1.1 Khảo sát các hệ thống tương tựHệ thống webite bán đồ uống được thiết kế và phát triển dựa trên một số trangweb bán hàng khác và có những điểm tươn

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH WEB NÂNG CAO

ĐỀ TI:

XÂY DỰNG WEBSITE BÁN ĐỒ UỐNG

Sinh viên thực hiện : LÊ MINH TÚ

: VŨ BÁ TÂN Giảng viên hướng dẫn : ThS PHƯƠNG VĂN CẢNH

Chuyên ngành : CÔNG NGHỆ PHẦN MỀM

Hà Nội, tháng12 năm 2022

Mục Lục

Mục lục hình ảnh 1

Mục lục bảng biểu 2

LỜI CẢM ƠN 3

LỜI MỞ ĐẦU 4

CHƯƠNG 1: Khảo sát và xác lập dự án 5

1.1 Khảo sát các hệ thống tương tự 5

1.2 Đặt vấn đề 6

1.3 Các chức năng chính của dự án 6

CHƯƠNG 2 : PHÂN TÍCH VO THIẾT KẾ HỆ THỐNG 8

2.1 Phân tích thiết kế hệ thống 8

2.1.1 Các chức năng của hệ thống 8

2.1.2 Các tác nhân của hệ thống 8

2.2 Các biểu đồ mô tả hệ thống 9

2.2.1 UseCase Diagram 9

2.2.2 Activity Diagram 17

2.2.3 Sequence Diagram 25

2.2.4 Biểu đồ Class của hệ thống 30

Chương 3: Giao diện sơ bộ các chức năng hệ thống 31

3.1.Trang chủ 31

3.2.Cà phê 32

3.3 Trà 33

3.4.Menu 34

3.5.Chuyện nhà 35

3.6.Của hàng 36

3.7.Tuyển dụng 37

3.8.Sản phẩm cà phê 38

3.9 Đăng nhập Admin 39

3.10 Giao diện trang chủ Admin 39

3.11 Giao diện quản lý sản phẩm 40

3.12 Giao diện thêm mới sản phẩm 40

3 13 Giao diện sửa sản phẩm 41

3.14 Giao diện xóa sản phẩm 41

3.15 Giao diện quản lý sản phẩm Hot 42

3.16 Giao diện quản lý loại sản phẩm 42

KẾT LUẬN 43

Mục lục hình ảnh

Hình 2 1 Biểu đồ use case tổng quát 9

Hình 2 2 Biểu đồ use đăng nhập 10

Hình 2 3 Biểu đồ use case quản lý sản phẩm 11

Hình 2 4 Biểu đồ use case đặt hàng 13

Hình 2 5 Biểu đồ use case quản lý khách hàng 14

Hình 2 6 Biểu đồ use case thống kê 16

Hình 2 7 Biểu đồ Activity Đăng nhập 17

Hình 2 8 Biểu đồ Activity Quản lý sản phẩm (thêm/sửa) 18

Hình 2 9 Biểu đồ Activity Quản lý sản phẩm(xóa) 19

Hình 2 10 Biểu đồ Activity đặt hàng 20

Hình 2 11 Biểu đồ Activity Thêm sản phẩm vào giỏ hàng 21

Hình 2 12 Biểu đồ Activity xóa sản phầm giỏ hàng 22

Hình 2 13 Biểu đồ Activity xem danh sách khách hàng 23

Hình 2 14 Biểu đồ Activity thống kê 24

Hình 2 15 Biểu đồ Sequence Diagram – Login 25

Hình 2 16 Biểu đồ Sequence Diagram – Quản lý sản phẩm 26

Hình 2 17 Biểu đồ Sequence Diagram – Đặt hàng 27

Hình 2 18 Biểu đồ Sequence Diagram - Quản lý Khách hàng 28

Hình 2 19 Biểu đồ Sequence Diagram - Quản lý liên hệ 29

Hình 2 20 Biểu đồ Class của hệ thống 30

Hình 3 1 Trang chủ 31

Hình 3 2 Cà phê 32

Hình 3 3 Trà 33

Hình 3 4 Menu 34

Hình 3 5 Chuyện nhà 35

Hình 3 6 Chuyện nhà 36

Hình 3 7 Tuyển dụng 37

Hình 3 8 Sản phẩm cà phê 38

Hình 3 9 Hình ảnh giao diện đăng nhập Admin 39

Hình 3 10 Hình ảnh giao diện trang chủ Admin 39

Hình 3 11 Hình ảnh giao diện quản lý sản phẩm 40

Hình 3 12 Hình ảnh giao diện thêm mới sản phẩm 40

Hình 3 13 Hình ảnh giao diện sửa sản phẩm 41

Hình 3 14 Hình ảnh giao diện xóa sản phẩm 41

Hình 3 15 Hình ảnh giao diện quản lý sản phẩm Hot 42

Hình 3 16 Hình ảnh giao diện quản lý loại sản phẩm 42

Mục lục bảng biểu

Bảng 2 1 Đặc tả usecase tổng quát 10

Bảng 2 2 Đặc tả use đăng nhập 11

Bảng 2 3 Đặc tả use case quản lý sản phẩm 12

Bảng 2 4 Đặc tả usecase đặt hàng 14

Bảng 2 5 Đặc tả usecase quản lý khách hàng 15

Bảng 2 6 Đặc tả use case thống kê 17

LỜI CẢM ƠN

Trên thực tế, không có sự thành công nào mà không gắn liền với những sự

hỗ trợ, sự giúp đỡ dù ít hay nhiều, dù là trực tiếp hay gián tiếp của người khác.Trong suốt thời gian từ khi bắt đầu học tập ở giảng đường Đại học đã đến nay, em

đã nhận được rất nhiều sự quan tâm, giúp đỡ của thầy cô, gia đình và bạn bè.Với lòng biết ơn sâu sắc nhất, em xin gửi đến thầy cô ở Khoa Công NghệThông Tin- trường Đại Học Điện Lực đã cùng với tri thức và tâm huyết của mình

để truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập tạitrường Và đặc biệt, trong kỳ này, em được tiếp cận với môn học rất hữu ích đốivới sinh viên ngành Công Nghệ Thông Tin Đó là môn: “Lập trình Web nâng cao”

Em xin chân thành cảm ơn thầy Phương Văn Cảnh đã tận tâm hướng dẫnchúng em qua từng buổi học trên lớp cũng như những buổi nói chuyện, thảo luận

về môn học Trong thời gian được học tập và thực hành dưới sự hướng dẫn củathầy, em không những thu được rất nhiều kiến thức bổ ích, mà còn được truyền sựsay mê và thích thú đối với bộ môn “Lập trình Web nâng cao” Nếu không cónhững lời hướng dẫn, dạy bảo của thầy thì em nghĩ báo cáo này rất khó có thể hoànthành được

Mặc dù đã rất cố gắng hoàn thiện báo cáo với tất cả sự nỗ lực, tuy nhiên, dobước đầu đi vào thực tế, tìm hiểu và xây dựng báo cáo trong thời gian có hạn, vàkiến thức còn hạn chế, nhiều bỡ ngỡ, nên báo cáo “Xây dựng web bán đồ uống”chắc chắn sẽ không thể tránh khỏi những thiếu sót Em rất mong nhận được sựquan tâm, thông cảm và những đóng góp quý báu của các thầy cô và các bạn đểbáo cáo này được hoàn thiện hơn

Một lần nữa, em xin chân thành cảm ơn và luôn mong nhận được sự đónggóp của mọi người

Trân trọng

Trong hoạt động sản xuất, kinh doanh giờ đây thương mại điện tử và ứngdụng công nghệ thông tin đã khẳng định được vai trò xúc tiến và thúc đẩy sự pháttriển của doanh nghiệp Đối với một cửa hàng hay shop, việc quảng bá và giớithiệu sản phẩm đến khách hàng đáp ứng được nhu cầu của khách hàng đồng thờicho khách hàng thấy được sự khác biệt giữa các sản phẩm của các thương hiệukhác nhau sẽ là cần thiết Vậy phải quảng bá thế nào, đó là xây dựng được mộtweb cho cửa hàng của mình giới thiệu tất cả các sản phẩm của mình bán.Chính vì vậy, để đáp ứng những nhu cầu đó trên sơ sở kế thừa những trangweb bán hàng khác em xây dựng một website qua mạng để đáp ứng nhu cầu muasắm của mọi người, giúp họ tiết kiệm được thời gian, chi phí trong việc phải đi racác shop, các cửa hàng truyền thống để mua và tìm kiếm sản phẩm Thay vào đóchỉ việc ngồi ở nhà hay bất cứ đâu với chiếc máy tính,điện thoại kết nối interner

là mọi người có thể thỏa sức tìm kiếm, lựa chọn những chiếc đồng hồ, mẫu mã

mà mình yêu thích Giúp cho người quản trị dễ dàng trong việc phân quyền quản

lý khách hàng, sản phẩm, các nhãn hiệu và các đơn đặt hàng Đó là chính lý do

mà nhóm em đã chọn đề tài “Xây dựng website bán đồ uống

CHƯƠNG 1: Khảo sát và xác lập dự án 1.1 Khảo sát các hệ thống tương tự

Hệ thống webite bán đồ uống được thiết kế và phát triển dựa trên một số trangweb bán hàng khác và có những điểm tương tự về những chức năng , các vận hànhcũng như những mục tiêu mà trang web bán hàng cần phải có như:

➢ Về giao diện: Đơn giản, đẹp mắt, dễ thao tác trên màn hình, phù hợp cho mọi đối tượng khách hàng

➢ Về chức năng :

- Dành cho khách hàng: khách hàng là người có nhu cầu mua bán, tìm kiếmthông tin về sản phẩm họ sẽ tìm kiếm sản phẩm từ web Vì thế web giớithiệu có các chức năng sau:

+ Chức năng hiển thị danh sách sản phẩm theo sanh mục sản phẩm đểkhách hàng tìm kiếm sản phẩm từ đó khách hàng có thể thấy thông tin củasản phẩm như tên sản phẩm, hình ảnh, giá cả,

+ Chức năng hiển thị danh sách sản phẩm theo thương hiệu Chức năng đăng ký, đăng nhập tài khoản

+ Chức năng quản lý thông tin cá nhân

+ Chức năng đặt hàng

- Dành cho cộng tác viên: cộng tác viên là người có nhu cầu đăng giới thiệusản phẩm để quảng bá và kiếm lợi nhuận Họ sẽ đăng thông tin sản phẩm vàyêu cầu admin phê duyệt bài đăng Cộng tác viên thực hiện các chức năng:+ Chức năng đăng nhập, đăng ký, thay đổi thông tin cá nhân.+ Chức năng đăng tin giới thiệu sản phẩm

+ Chức năng thêm, sửa, xóa sản phẩm đã được đăng bởi chính cộng tác viên đó

+ Chức năng quản lý đơn hàng, các đơn hàng này là các đơn hàng được

đặt hàng bởi khách hàng và các sản phẩm mà khách hàng đặt đấy chính là sản phẩm do cộng tác viên đó đăng

- Dành cho người quản trị(admin): Người quản trị là chủ hệ thống và kiểmsoát mọi hoạt động của hệ thống Người quản trị được cấp quyền đăng nhập vào hệ thống để thực hiện chức năng:

+ Chức năng thêm, sửa, xóa người dùng

+ Chức năng thêm, sửa, xóa sản phẩm

+ Chức năng thêm, sửa, xóa danh mục sản phẩm

Mục tiêu➢

Là giới thiệu và quảng bá sản phẩm mà hiện nay các bạn trẻ ưa thích Kháchhàng sẽ biết được thông tin chi tiết về sản phẩm như: Tên sản phẩm, giá cá, Ngoài ra website còn có mục đích giới thiệu cho nhiều khách hàng được biết hơn

về không gian cửa hàng, vị trí cũng như các đợt khuyến mãi đã, đang và sắp tới củacửa hàng

1.2 Đặt vấn đề

Khi xây dựng một website đầu tiên phải hình dung chúng ta cần phải thiết kếcái gì? Cho website của mình Không có chủ định và mục tiêu rõ ràng thì cảwebsite đó trở nên sai lầm, lan man và cuối cùng đi tới một hướng khó có thể trởlại Thiết kế cẩn thận và định hướng rõ là chìa khóa hướng tới thành công của việcxây dựng một website Vận dụng tổng hợp những kiến thức đã học để tiến hànhthiết kế website bán hàng online nhằm giải quyết những khó khăn hiện tại của cửahàng Tìm hiểu thực trạng thương mại điện tử tại Việt Nam để triển khai hệ thốngthương mại điện tử tại của cửa hàng cho phù hợp Khai phá lợi ích của Internet đểhướng đến một môi trường kinh doanh toàn cầu

Dựa trên các kiến thức nền tảng được thầy cô trao đổi trên lớp và một số tàiliệu tham khảo em đã tổng hợp kiến thức để xây dựng một trang web Báo cáo sẽlập trình trên nền web “Website Bán Đồ Uống”

Trước khi đi xây dựng websitte chúng ta cần:

+Xác định đối tượng khách hàng là ai?

+Website có mục đích gì?

+Xác định rõ các chủ đề chính của website là những gì ?

+Thiết lập các khối thông tin chính mà website sẽ cung

cấp

Việc xây dựng một website là cả một quá trình liên tục, nó không đơn thuần

là một dự án duy nhất và một lần với các thông tin chính Việc biên tập, quản lý vàduy trì kỹ thuật dài hạn bao trùm lên kế hoạch xây dựng website

- Quản lý thông tin sản phẩm (thêm, sửa, xóa, tìm kiếm).

- Quản lý thông tin khách hàng

- Quản lý thông tin đơn hàng

- Quản lý thông tin liên hệ

- Thống kê

CHƯƠNG 2 : PHÂN TÍCH V THIẾT KẾ HỆ THỐNG

2.1 Phân tích thiết kế hệ thống

2.1.1 Các chức năng của hệ thống

Hệ thống quản trị trang web

- Quản lý các đơn hàng các giao dịch

- Quản lý sản phẩm: cập nhật thông tin về sản phẩm

- Quản lý danh sách người dùng

- Quản lý liên hệ người dùng

- Cho phép người dùng đánh giá sản phẩm

- Cho phép người dùng gửi liên hệ

Tác nhân Khách hàng: Tìm kiếm sản phẩm, xem chi tiết sản phẩm, so sánhsản phẩm, đặt hàng, xem giỏ hàng, tra cứu đơn hàng, liên hệ

Tóm tắt Login, quản lý sản phẩm, quản lý đơn hàng, quản lý

khách hàng, quản lý giỏ hàng, quản lý liên hệ, thống kê

Dòng sự kiện chính - Admin đăng nhập vào hệ thống và thao tác với các

chức năng thuộc quyền quản lý của mình

- Customer không cần đăng nhập vài hệ thống

- Hệ thống đưa ra các chức năng để người dùng thaotác

Các dòng sự kiện 1a Đăng nhập

1 Thành công Vào trong hệ thống

2 Không thành công Hệ thống báo tài khoản/mật

kh u ch a đúng ẩ ưHình 2 1 Biểu đồ use case tổng quát

2a Quản lý

1 Thao tác với hệ thống

2 Hệ thống cập nhật dữ liệu mới3a Thêm, sửa, xóa, tìm kiếm

1 Thêm, sửa, xóa, tìm kiếm thông tin sản phẩm

2 Hệ thống hiển thị thông tin sản phẩm4a Orders

1 Thêm hàng vào giỏ hàng

2 Sửa, xóa sản phẩm trong giỏ hàng5a Liên hệ, đánh giá

1 Gửi liên hệ

2 Gửi đánh giá6a Thống kê

Điều kiện tiên quyết Không có

Các yêu cầu đặc Giao diện và các thao tác dễ dùng với người lần đầu

Bảng 2 1 Đặc tả usecase tổng quát

• Biểu đồ use case đăng nhập

Hình 2 2 Biểu đồ use đăng nhập

• Biểu đồ use case Quản lý Sản phẩm

Login

Tóm tắt Hê thống cấp quyền cho phép nguời dùng login

Dòng sự kiện Người dùng đăng nhập hệ thống để sử dụng chức năng

chính

Các dòng sự kiện 1a Không đăng nhập được

1 Hệ thông báo tài khoản/mật khẩu không đúng

2 Hệ thống báo chưa có tài khoản

2a Đăng nhập thành công

Điều kiện tiên Thông tin đăng nhập (id, pass)

Quản lý sản phẩm

Tóm tắt Thêm, sửa, xóa, thông tin khuyến mãi các sản phẩm có

trong phần quản lý

Dòng sự kiện Người dùng đăng nhập hệ thống để sử dụng chức năng,

chính cập nhật thông tin sản phẩm

Các dòng sự kiện 1a Đăng nhập vào hệ thống

2a Hệ thống hiện thị các chức năng và thông tin sảnphẩm

1 Thêm sản phẩm

2 Sửa sản phẩm

3 Xóa sản phẩm

4 Thông tin khuyến mãi

Điều kiện tiên Đăng nhập được vào hệ thống

quyết

Các yêu cầu đặc biệt

Giao diện và các thao tác dễ dùng với người lần đầu tiên

sử dụng

Bảng 2 3 Đặc tả use case quản lý sản phẩm

• Biểu đồ use case Đặt hàng

Các dòng sự kiện 1a Đăng nhập vào hệ thống

2a Hệ thống hiển thị các thông tin sản phẩm, hình ảnh

1 Thêm sản phẩm vào giỏ hàng

2 Đặt hàng

Hình 2 4 Biểu đồ use case đặt hàng

3Xem thông tin đơn hàng.

4Sửa thông tin giỏ hàng

Tóm tắt Xem, sửa, xóa các tài khoản người dùng

Dòng sự kiện chính Người dùng đăng nhập hệ thống để sử dụng chức năng Các dòng sự kiện 1a Đăng nhập vào hệ thống

Hình 2 5 Biểu đồ use case quản lý khách hàng

2a Hệ thống hiện thị các chức năng và thông tin ngườidùng

1 Xem thông tin người dùng

2 Thêm thông tin người dùng

3 Sửa thông tin

4 vXóa thông tin người dùngĐiều kiện tiên quyết

Đăng nhập được vào hệ thống

Các yêu cầu đặc biệt

Giao diện và các thao tác dễ dùng với người lần đầu tiên sử dụng

Bảng 2 5 Đặc tả usecase quản lý khách hàng

• Biểu đồ use case Thống kê

2a Hệ thống hiện thị các chức năng

1 Xem thông tin thống kê

2 Hiển thị danh sách

Hình 2 6 Biểu đồ use case thống kê

Điều kiện tiên Đăng nhập được vào hệ thống

Biểu đồ Activity Đăng nhập

Hình 2 7 Biểu đồ Activity Đăng nhập

Biểu đồ Activity Quản lý sản phẩm

Hình 2 8 Biểu đồ Activity Quản lý sản phẩm (thêm/sửa)

Biểu đồ Activity Quản Lý

Hình 2 9 Biểu đồ Activity Quản lý sản phẩm(xóa)

Biểu đồ Activity Đặt hàng

Hình 2 10 Biểu đồ Activity đặt hàng

Biểu đồ Activity thêm sản phẩm vào giỏ hàng

Hình 2 11 Biểu đồ Activity Thêm sản phẩm vào giỏ hàng

Biểu đồ Activity Xóa sản phẩm giỏ hàng

Hình 2 12 Biểu đồ Activity xóa sản phầm giỏ hàng

Biểu đồ Activity Xem danh sách khách hàng

Hình 2 13 Biểu đồ Activity xem danh sách khách hàng

Biểu đồ Activity Thống kê

Hình 2 14 Biểu đồ Activity thống kê

2.2.3 Sequence Diagram

Biểu đồ Sequence Diagram - Login

Hình 2 15 Biểu đồ Sequence Diagram – Login

Biểu đồ Sequence Diagram - Quản lý Sản phẩm

Hình 2 16 Biểu đồ Sequence Diagram – Quản lý sản phẩm

Biểu đồ Sequence Diagram – Đặt hàng

Hình 2 17 Biểu đồ Sequence Diagram – Đặt hàng

Biểu đồ Sequence Diagram - Quản lý khách hàng

Hình 2 18 Biểu đồ Sequence Diagram - Quản lý Khách hàng

Biểu đồ Sequence Diagram - Quản lý liên hệ

Hình 2 19 Biểu đồ Sequence Diagram - Quản lý liên hệ

2.2.4 Biểu đồ Class của hệ thống

Hình 2 20 Biểu đồ Class của hệ thống

Chương 3: Giao diện sơ bộ các chức năng hệ thống 3.1.Trang chủ

Hình 3 1 Trang chủ

3.2.Cà phê

Hình 3 2 Cà phê

3.3 Trà

Hình 3 3 Trà

Hình 3 4 Menu

3.5.Chuyện nhà

Hình 3 5 Chuyện nhà

3.6.Của hàng

Hình 3 6 Chuyện nhà

3.7.Tuyển dụng

Hình 3 7 Tuyển dụng

3.8.Sản phẩm cà phê

Hình 3 8 Sản phẩm cà phê

3.9 Đăng nhập Admin

Hình 3 9 Hình ảnh giao diện đăng nhập Admin

3.10 Giao diện trang chủ Admin

Hình 3 10 Hình ảnh giao diện trang chủ Admin

3.11 Giao diện quản lý sản phẩm

Hình 3 11 Hình ảnh giao diện quản lý sản phẩm

3.12 Giao diện thêm mới sản phẩm

Hình 3 12 Hình ảnh giao diện thêm mới sản phẩm

3 13 Giao diện sửa sản phẩm

Hình 3 13 Hình ảnh giao diện sửa sản phẩm

3.14 Giao diện xóa sản phẩm

Hình 3 14 Hình ảnh giao diện xóa sản phẩm