Báo Cáo Môn Học Lập Trình Web Nâng Cao

Báo Cáo Môn Học Lập Trình Web Nâng Cao

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ĐỒ ÁN LẬP TRÌNH WEB NÂNG CAO

ĐỀ TÀI :

XÂY DỰNG WEBSITE TRÀ SỮA XIAOHAHA.

Sinh viên thực hiện: MAI XUÂN TÌNH

MỤC LỤC

PHIẾU CHẤM ĐIỂM 2

LỜI MỞ ĐẦU 6

CHƯƠNG I: KHẢO SÁT VÀ XÂY DỰNG ĐỀ TÀI 7

1.Tổng quan về bài toán 7

1.1 Khảo sát hiện trạng 7

1.2 Mô tả bài toán 7

1.3 Ưu điểm trên website 8

1.4 Nhược điểm 8

2.Các hệ thống liên quan tương tự 9

3.Mục tiêu giải quyết của bài toán 11

4.Yêu cầu của trang web 11

CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 12

2.1 Xác định các Actor và Use case 12

Các Actor 12

2.1.1Use case tổng quát hệ thống 12

2.2Chức năng đăng nhập, đăng xuất và đăng ký 13

2.2.1Đặc tả use case đăng nhập 13

2.2.2Use case đăng nhập, đăng xuất và đăng kí 13

2.2.3Biểu đồ trình tự cho chức năng đăng nhập, đăng xuất và đăng kí 14

Chức năng danh mục sản phẩm 15

Đặc tả use case danh mục sản phẩm 15

2.3.2 Use case danh mục sản phẩm 15

2.3 Biểu đồ trình tự cho chức năng danh mục sản phẩm 16

2.4 Chức năng quản lý khách hàng 16

2.4.1 Đặc tả use case quản lý khách hàng 16

2.4.2 Use case quản lý khách hàng 17

3

2.4.3 Biểu đồ trình tự cho chức năng quản lý khách hàng 17

2.5 Chức năng quản lý sản phẩm 18

2.5.2 Đặc tả use case quản lý sản phẩm 18

2.5.3 Use case quản lý sản phẩm 18

2.5.4 Biểu đồ trình tự cho chức năng quản lý sản phẩm 19

4.2.2 Giao diện đăng ký/ đăng nhập 29

4.2.3 Giao diện tin tức của cửa hàng 29

4.2.4 Giao diện thông tin liên hệ nóng/địa chỉ 30

4.2.5 Giao diện mua hàng 30

4.2.6 Giao diện quản lý nội bộ 31

4.2.7 Giao diện quản lý đơn đặt hàng 31

4.2.8 Giao diện thống kê sản phẩm 32

4.2.9 Giao diện thêm/sửa/xoá sản phẩm 32

LỜI MỞ ĐẦU

Trong thời đại công nghệ 4.0 hiện nay, cùng với sự phát triển mạnh mẽ của công nghệ thông tin, tin học hóa đối với mỗi công ty, cơ quan và các tổ chức là điều mà cần phải nghĩ đến Tin học được ứng dụng trong mọi lĩnh vực cuộc sống, nó đem lại nhiều lợi ích to lớn, giúp cho người quản lý có cái nhìn tổng thể mà chi tiết thông tin được lưu trữ cập nhậy hàng ngày, nâng cao hiệu quả làm việc, tiết kiệm sức lao động.

Đi cùng với sự phát triển mạnh mẽ của công nghệ thông tin là sự phát triển thương mại hóa toàn cầu Những website mua bán, thương mại xuất hiện ngày càng nhiều, những trang thương mại nổi tiếng như www.amazone.com, www.alibaba.com

hay www.ebay.com không còn xa lạ với chúng ta.

Đối với một cửa công ty, doanh nghiện hay cửa hàng, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ là cần thiết Vậy phải quảng bá thế nào đó? Đó chính là xây dựng một Website cho cửa hàng của mình quảng bá tất cả các sản phẩm của mình bán Và nắm bắt được xu thế của thời đại

nên chúng em đã thực hiện đề tài “Xây dựng Website trà sữa xiaohaha ” nhằm phục vụ

cho nhu cầu tất yếu của cuộc sống tiện lợi và dịch vụ nhanh.

Trong thời gian thiết kế website, dưới sự giúp đỡ, hướng dẫn tận tình của thầy

Phương Văn Cảnh, nhóm chúng em đã tiến hành tìm hiểu và xây dựng website thương

mại Website này đã giúp chúng em phát huy được tính sáng tạo, tinh thần làm việc tập thể, khả năng vận dụng kiến thức đã học để có thể hoàn thành tốt báo cáo.

Mặc dù đã có nhiều cố gắng trong quá trình làm dự án, tuy nhiên do kiến thức còn hạn chế và thời gian có hạn nên dự án này còn nhiều thiếu sót, chúng em rất mong được sự giúp đỡ, góp ý, sửa chữa của thầy cô để báo cáo của chúng em hoàn thiện hơn.

Chúng em xin chân thành cảm ơn quý thầy cô!

5

CHƯƠNG I: KHẢO SÁT VÀ XÂY DỰNG ĐỀ TÀI.1 Tổng quan về bài toán

1.1 Khảo sát hiện trạng.

Thực hiện tìm hiểu, khảo sát hệ thống, cụ thể là một số website bán các mặt hang khác trên internet, đánh giá hiện trạng của cửa hàng, xác định các mặt hạn chế của hệ thống cũ, từ đó đề xuất khắc phục.

Xã hội ngày càng phát triển, nhu cầu mua sắm, thời trang, thực phẩm của con người càng được nâng cao Trong đó không thể thiếu những loại đồ ăn/ đồ uống chất lượng Những loại đồ uống mới du nhập ngày càng thu hút được nhiều người quan tâm, nhất là những người ưu chuộng sự tiện lợi và mùi vị Tuy nhiên các cửa hàng, website bán café đồ uống thường chưa đáp ứng được các yêu cầu của khách hàng, phục vụ chưa được chu đáo, tốn nhiều thời gian Các trang web bán đồ uống chưa được phổ biến, phong phú Nhằm khắc phục điều này và mong muốn có một môi trường giao tiếp tiện lợi giữa khách hàng, đơn giản hóa việc mua sắm, chúng em đã xây dựng website này.

Bên cạnh đó , khách hàng có thể phản hồi về cho cửa hàng và chia sẻ với mọi người, đóng góp ý kiến của mình với website để chúng em có thể hoàn thiện hơn, phục vụ khách hàng tốt nhất Qua website, khách hàng có thể nắm được những thông tin bổ ích từ sản phẩm, liên tục cập nhật thông tin từ hãng sản xuất.

1.2 Mô tả bài toán.

- Website có thể giúp cho chủ cửa hàng có thể quản lý các món trong cửa hàng

một cách thuận tiện hơn, đồng thời chủ cửa hàng có thể cập nhật các mặt hàng mới nhập lên website, lưu thông tin các mặt hàng đã được bán cho khách hàng, đồng thời có thể kiểm tra, chỉnh sửa các bài viết về sản phẩm, hiển thị thông tin lên theo mục.

- Một website bán hàng đều có quy trình bắt đầu bằng việc nhận đơn hàng từ

phía khách hàng, nhận trực tiếp hoặc gián tiếp qua điện thoại, email, theo đó sẽ tiếp nhận thông tin đơn đặt hàng, sản phẩm đặt hàng sau đó lưu vào kho đơn đặt hàng của tất cả các khách hàng Sau đó thì người quản lí hệ thống sẽ lên lịch hẹn với khách hàng về thời điểm giao hàng cũng như vị trí giao hàng thuận tiện nhất.

- Website gồm nhiều trang, mỗi trang có một chủ đề và một chức năng riêng.

Mỗi chủ đề phải có đường dẫn đến từng trang, có tên và chủ đề và nội dung của từng

7

trang Trang chủ sẽ tóm tắt nội dung của toàn bộ website bao gồm các loại đồ quần áo thể thao.

- Đối với người truy cập Website với tư cách là User sẽ cho phép đăng kí,

đăng nhập, tìm kiếm và tham khảo thông tin sản phẩm, cho phép bình luận về bài viết và đánh giá về sản phẩm.

1.3 Ưu điểm trên website

Ngày nay hình thức kinh doanh online đã mang lại nhiều ưu điểm và thuận lợi:

 Tiết kiệm được nguồn tài chính đầu tư

 Không cần thuê nhiều nhân viên bán hàng

 Khách hàng sẽ thoải mái lựa chọn đồ muốn muốn mua

 Việc mua hàng cũng dễ dàng thuận tiện cho người mua, mang đến tâm lý thoải mái cho khách hàng.

1.4 Nhược điểm.

Bên cạnh nhưng ưu điểm thì khi kinh doanh bán hàng trên web cũng tồn tại những nhược điểm nhất định:

 Hiện nay khách hàng vẫn chưa tin tưởng vào hình thức bán hàng trên web vì một số trang web thực hiện “ đăng một đằng bán một kiểu” nên đã gây hoang mang cho khách hàng.

 Đòi hỏi website phải chủ động và linh hoạt trong mọi khâu: từ khâu quảng bá sản phẩm đến khâu chăm sóc khách hàng, giao hàng, thanh toán, lấy hàng, Trong quá trình này khi kinh doanh trên web cũng gặp khá nhiều khó khăn.

 Sự cạnh tranh giữa các website là rất lớn Nên nếu sản phầm không chất lượng, đa dạng, đẹp và làm ăn không uy tín thì khó có thể duy trì được lâu.

 Khách hàng sau khi đặt hàng nhưng đến khi giao hàng lại không nhận nên chủ shop lại mất thêm chi phí.

 Một số trang web giả mạo, lừa đảo.

2 Các hệ thống liên quan tương tự.

Một số website tìm hiểu và tham khảo:  Website: https://tocotocotea.com/

- Tocotoco cũng là một trong những chuỗi cửa hàng đưa các đồ ăn thức uống của mình

lên website để quảng bá khá thành công.

 Website: http://www.royaltea.vn/

9

- Royal Tea cũng là một trong những cửa hàng mang tên tuổi của mình đính kèm sự nổi

tiếng của các KOL các nền tảng Những chiến dịch của họ có sự đầu tư lớn về phần hình ảnh, đưa chất lượng của mình lên một tầm cao mới và mỗi bước quảng bá là một cú bùng nổ thông qua marketing tầm rộng.

 Website: https://www.starbucks.vn/

- Starbucks là một ông vua trong ngành hàng Mang đến cho khách hàng một dịch vụ và

sản phẩm ở tầm đẳng cấp cao mới, tuy đơn giản nhưng mang giá trị cốt lỗi lớn Thế mạnh của doanh nghiệp nằm ở sự xa xỉ và chất lượng đồ ăn/ đồ uống bán ra cực tốt, độ đồng đều trước sau như một Chế độ chi ân khách hàng tốt và lịch thiệp, tận dụng khách hàng để làm kênh quảng bá 0đ vô cùng khéo léo nhưng hiệu quả cực lớn  Nhận xét về website

+ Nhìn tổng quan những trang web của Việt Nam chất lượng không thua kém gì những trang web của nước ngoài.

+ Layout được phân chia đều, đẹp, dễ nhìn.

11

+ Thông tin đều rõ ràng, đầy đủ cho người xem.

+ Trang web thấy rất tối ưu, đơn giản, đầy đủ, trang trí đẹp về cả hình ảnh, sản phẩm và bố cục.

3 Mục tiêu giải quyết của bài toán

- Xây dựng các chức năng cơ bản của một website bán hàng thương mại Website có khả năng tự tương thích, hiển thị được trên tất cả các thiết bị hiện tại và có thể nâng cấp trong tương lai.

- Website được hiển thị một cách sinh động, đẹp mắt nhưng không quá phức tạp để cho tất cả mọi người đều có thể sử dụng được.

- Hỗ trợ khách hàng một cách nhanh nhất khi nhận được yêu cầu liên hệ từ khách hàng.

- Quản lý các mặt hàng sản phẩm, cấu hình website.

- Nắm bắt được công nghệ thiết kế web bằng các ngôn ngữ như: ngôn ngữ đánh dấu siêu văn bản C# net framework giúp cho website sinh động và hấp dẫn hơn.

4 Yêu cầu của trang web.

Website có dung lựng không quá lớn, tốc độ xử lý nhanh.

 Công việc tính toán thực hiện chính xác, không chấp nhận sai sót  Sử dụng mã hóa các thông tin cá nhân của khách hàng.

 Đảm bảo an toàn dữ liệu khi chạy website trực tuyến  Hình thức thông tin đa dạng và sống động.

 Giao diện thân thiện, dễ nhìn, an toàn dữ liệu  Cung cấp thông tin và phát triển hoạt động 24/24  Thông tin được cập nhật và sửa đổi thường xuyên.

CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.

Xác định các Actor và Use case Các Actor

1 Bộ phận quản lý - Quản lý đăng nhập - Quản lý nhân viên

2.2 Chức năng đăng nhập, đăng xuất và đăng ký

2.2.1 Đặc tả use case đăng nhập

Tên Use

Mô tảUse Case này cho phép người dùng đăng nhập, đăng xuất và đăng kýtài khoản vào hệ thống

ActorNgười quản lý, Nhân viên, Khách hàng

1 Người dùng chọn chức năng đăng nhập2 Form đăng nhập hiển thị

3 Nhập tên, mật khẩu vào form đăng nhập4 Hệ thống kiểm tra tên, mật khẩu người dùng

5 Đăng nhập thành công, chuyển đến màn hình chính của hệ thống

Ngoại lệA Người dùng đăng nhập không thành công

1 Hệ thống báo lại quá trình đăng nhập không thành công2 Yêu cầu người dùng đăng nhập lại

2.2.2 Use case đăng nhập, đăng xuất và đăng kí

15

2.2.3 Biểu đồ trình tự cho chức năng đăng nhập, đăng xuất và đăng kí

Biểu đồ trình tự cho chức năng đăng nhập

17

Biểu đồ trình tự cho chức năng đăng xuất

Chức năng danh mục sản phẩm

Đặc tả use case danh mục sản phẩm

Tên Use CaseQuản lý hệ thống danh mục sản phẩm

Mô tảUse Case này cho phép người dùng quản lý được tất cả danh mục sản phẩm đang được kinh doanh trong cửa hàng

ActorNhân viên quản lýUse Case

liên quan

Thêm, sửa, xóa, tìm kiếm danh mục sản phẩmTiền điều

kiện Người quản lý đăng nhập vào hệ thống

Hậu điều kiệnNgười quản lý sẽ biết được thông tin của các danh mục sản

2 Form danh mục sản phẩm xuất hiện, hệ thống hiển thị thông tin cá các danh mục sản phẩm.

3 Hệ thống cung cấp liên kết để thành viên có thể sửa thôngtin

2.3 Biểu đồ trình tự cho chức năng danh mục sản phẩm

2.4 Chức năng quản lý khách hàng

2.4.1 Đặc tả use case quản lý khách hàng

Tên Use CaseQuản lý khách hàng

Mô tảUse Case này cho phép người dùng quản lý được tất cả các khách hàng đã mua hàng trong cửa hàng

Use Case liên quan

Thêm, sửa, xóa, tìm kiếm khách hàngTiền điều

kiện Người dùng đăng nhập vào hệ thống

Hậu điều kiệnNgười dùng lựa chọn chức năng quản lý khách hàng và thực hiện các chức năng mở rộng

19

2.4.2 Use case quản lý khách hàng

2.4.3 Biểu đồ trình tự cho chức năng quản lý khách hàng

Chức năng quản lý sản phẩm

2.5.2 Đặc tả use case quản lý sản phẩm

Tên Use CaseQuản lý sản phẩm

Mô tảUse Case này cho phép người dùng quản lý được sản phẩm có trong cửa hàng

ActorNhân viên quản lý, nhân viên cửa hàngUse Case liên quanThêm, sửa, xóa, tìm kiếm sản phẩmTiền điều kiệnNgười quản lý đăng nhập vào hệ thống

Hậu điều kiệnNgười quản lý sẽ biết được số hàng hiện có, biết thiếu hàng nào

2.5.4 Biểu đồ trình tự cho chức năng quản lý sản phẩm

Biểu đồ lớp

2.2 Phân tích tiến trình thực hiện

tích yêu cầu 1 ngày 1.2 Viết hiến chương dự

chưa, có thuận tiện cho người dùng chưa

6.4 Thực hiện việc fix các

4.1 Thiết kế hệ thống hướng đối tượng4.1.1 Cơ sở lý thuyết

- Là quy trình để phát triển và bảo trì một ứng dụng hệ thống thông tin với mục đích nâng cao hiệu quả công việc.

- PTTKHĐT được thực hiện dựa trên quy trình công nghệ phần mềm gồm phương pháp luận, công nghệ và công cụ.

- Phương pháp luận: Trình tự của cách tiếp cận từng bước để phát triển sản phẩm cuối cùng là HTTT.

- Kỹ năng: Trình tự mà người phân tích hệ thống theo để thực hiện các công việc như phỏng vấn người dùng để xác nhận yêu cầu, lập kế hoạch, vẽ biểu đồ,…

- Công cụ: Chương trình máy tính Ví dụ như CASE (computer- aided software engineering) để thực hiện các kỹ năng cụ thể một cách dễ dàng - Phương pháp luận, kỹ thuật, công cụ tạo nên một cách tiếp cận có hệ thống

để phân tích và thiết kế hệ thống.

- Đóng vai trò cốt lõi trong việc phát triển hệ thống: Phân tích hệ thống là nghiên cứu vấn đề trong tổ chức, đưa ra giải pháp để nâng cao tổ chức.

4.1.2 Phần mềm sử dụng

- Để đáp ứng được yêu cầu của phân tích, chúng em đã sử dụng đến phần mềm draw.io để giúp người dùng hình dung cụ thể hơn về đề tài của chúng em + Rational Rose là phần mềm công cụ mạnh hỗ trợ phân tích , thiết kế hệ thống phần mềm theo đối tượng Nó giúp ta mô hình hóa hệ thống trước khi viết mã chương trình Draw.io hỗ trợ cho mô hình làm doanh nghiệp , giúp bạn hiểu được hệ thống của mô hình Giúp chúng ta phân tích hệ thống và giúp chúng ta có thể thiết kế được mô hình

+ Theo phong cách lập trình truyền thống thì sau khi đã xác định yêu cầu của hệ thống, người phát triển sẽ lấy 1 vài yêu cầu , quyết định thiết kế và lấy mã chương trình

● Ưu điểm: Cung cấp nhiều tính năng + Mô hình hướng đối tượng

+ Cung cấp cho UML + Kiểm tra ngữ nghĩa

+ Hỗ trợ phát sinh mã cho ngôn ngữ ● Nhược điểm :

+ Phải căn chỉnh nhiều cho mô hình được đẹp

+ Trong bản free không hỗ trợ phát sinh mã cho một số ngôn ngữ.

4.2 Thiết kế giao diện

4.2.1 Giao Diện Chính

31

4.2.2 Giao diện đăng ký/ đăng nhập

4.2.3 Giao diện tin tức của cửa hàng

4.2.4 Giao diện thông tin liên hệ nóng/địa chỉ.

4.2.5 Giao diện mua hàng.

33

4.2.6 Giao diện quản lý nội bộ.

4.2.7 Giao diện quản lý đơn đặt hàng.

4.2.8 Giao diện thống kê sản phẩm.

4.2.9 Giao diện thêm/sửa/xoá sản phẩm.

35

CHƯƠNG 5: CÀI ĐẶT5.1 Giới thiệu về Visual Studio Code

Visual Studio Code là một trong những trình soạn thảo mã nguồn rất phổ

biến được các lập trình viên sử dụng Với các ưu điểm nổi bật là sự nhanh chóng, nhẹ, hỗ trợ đa nền tảng cùng nhiều tính năng và là mã nguồn mở chính Visual Studio Code ngày càng được ưa chuộng sử dụng, là lựa chọn hàng đầu của các lập trình viên Bài viết sau đây sẽ cung cấp các thông tin để giúp bạn hiểu rõ hơn Visual Studio Code là gì cũng như các tính năng nổi bật của Visual Studio Code.

Visual Studio Code là gì được rất nhiều người tìm hiểu Đây cũng là một

trong các ứng dụng được dân IT “săn đón” và tải về và sử dụng rất nhiều Visual Studio Code cũng luôn có những cải tiến và tạo ra đa dạng các tiện ích đi kèm từ đó giúp cho các lập trình viên sử dụng dễ dàng hơn Trong đó có thể kể đến những ưu điểm sau:

 Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++,…

 Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung

 Các tiện ích mở rộng rất đa dạng và phong phú

 Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug),…

 Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống.

Visual Studio Code là một trong những trình biên tập Code rất phổ biến nhất

hiện nay Ứng dụng này cũng ngày càng chứng tỏ ưu thế vượt trội của mình khi so