Báo cáo chuyên Đề học phần cơ sở lập trình web Đề t i xây dựng website ivyshop

Đề tài tập trung vào việc nghiên cứu các vấn đề liên quan như tìm hiểu hệ thống bán hàng, cách thức phân loại các loài chó khác nhau, tìm hiểu yêu cầu của khách hàng về các loài đó.. Đề

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

CƠ SỞ LẬP TRÌNH WEB

ĐỀ T I:

XÂY DỰNG WEBSITE IVYSHOP

Giảng viên hướng dẫn :

MỤC LỤC

LỜI NÓI ĐẦU 4

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ T I 5

1.1 Tổng quan về bài toán 5

1.1.1 Khảo sát hiện trạng 5

1.1.2 Mô tả bài toán 5

1.1.3 Ưu điểm của websize IvyShop 5

1.1.4 Nhược điểm của websize IvyModa 6

1.2 Xác lập dự án 7

1.2.1 Mục tiêu của dự án 7

1.2.2 Yêu cầu của trang web 7

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

2.1 Xác định các Actor và Use case tổng quát của hệ thống 8

2.1.1 Các Actor 8

2.1.2 Use case tổng quát của hệ thống 8

2.2 Phân rã use case 10

2.2.1 Biểu đồ use case 10

2.3 Biểu đồ trình tự 18

2.3.1 Đăng nhập 18

2.3.2 Tìm kiếm sản phẩm 19

2.3.4 Cập nhật mặt hàng 20

2.3.5 Quản lý khách hàng 22

2.3.6 Thống kê 22

2.4 Biểu đồ lớp tổng quát của hệ thống 23

CHƯƠNG 3: C I ĐẶT GIAO DIỆN HỆ THỐNG 24

3.1 Giao diện 24

3.1.1 Giao diện trang chủ 24

3.1.2 Giao diện sản phẩm 25

3.1.3 Giao diện giỏ hàng 25

3.1.4 Giao diện xem sản phẩm 26

3.1.5 Giao diện giao hàng 26

3.1.6.Giao diện thanh toán 27

KẾT LUẬN 28

LỜI NÓI ĐẦU

Hiện nay, với thời đại 4.0, công nghệ phát triển thì ứng dụng công nghệthông tin và tin học vào đời sống được xem là một trong những yếu tố mang tínhquyết định trong hoạt động của các chính phủ, tổ chức cũng như các công ty.Cùng với sự phát triển không ngừng của kĩ thuật máy tính và mạng điện tử, côngnghệ thông tin đã lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác và cómột vị trí nhất định Mạng Internet là một trong những sản phẩm có giá trị hếtsức to lớn và là công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, traođổi thông tin trên toàn cầu trong thời đại công nghệ 4.0

Cùng với sự phát triển vượt bậc của công nghệ thông tin, con người đãxây dựng, phát triển và bảo trì các trang web được lưu trữ trên internet dưới hìnhthức lập trình web Một trang web đơn giản có thể được viết bằng ngôn ngữHTML, CSS và chỉ chứa vài trăm dòng lệnh Chính vì vậy, để đáp ứng nhữngnhu cầu đó trên sơ sở kế thừa những trang web bán hàng khác nên em đã thựchiện đề tài “Xây dựng Website IvyModa” để phục vụ cho nhu cầu tất yếu củacuộc sống và ưu chuộng sở thích của mọi người

Trong thời gian thiết kế website, dưới sự giúp đỡ, hướng dẫn tận tình củacô,chúng em đã tiến hành tìm hiểu và xây dựng website thương mại Websitenày đã giúp chúng em phát huy được tính sáng tạo, 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

Là những sin viên mới tiếp cận các phương pháp của môn Cơ Sở Lập Trình Web nên trong quá trình thực hiện chúng

em không thể tránh khỏi những thiếu sót Chúng em rất mong nhận được sự góp ý từ thầy cô để đề tài này có thể đạt được kếtquả tốt hơn, sát với nhu cầu của mọi người trong tương lai.Chúng em xin chân thành cảm ơn quý thầy cô!

5

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tổng quan về bài toán

1.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 PetShoptrê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

Quản lý danh sách cũng như số lượng thú cưng đặc biết là chó trong mộtcửa hàng là vấn đề cần phải đề cập đến Việc quản lý không tốt sẽ ảnh hưởng rấtlớn đến việt tìm kiếm của khách hàng và của người mua hàng Quản lý thông tincủa các loài chó sẽ giúp chúng ta biết được thông tin về nội dung cũng như vị trícủa chúng trên trang web Khi chúng ta muốn biết thông tin về của loài nào thìchúng ta có thể tìm kiếm nhanh chóng được loài đó thông qua Website Ví dụnhư: Tên loài chó, nó thuộc khu vực nào của đất nước cũng như nước nào củathế giới, tình trạng còn hay đã hết hàng

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

Đề tài tập trung vào việc nghiên cứu các vấn đề liên quan như tìm hiểu hệ thống bán hàng, cách thức phân loại các loài chó khác nhau, tìm hiểu yêu cầu của khách hàng về các loài đó

Đề tài Website PetShop được xầy dựng dựa trên nhu cầu thực tế của kháchhàng về việc tiếp cận đến công nghệ thông tin một cách nhanh nhất.Đưa đến chongười nuôi thú cưng những chú chó đáng yêu thông qua phương pháp bán hàng trực tuyến ,giúp người nuôi thú cưng sẽ được biết đến những loài chó mới được nhân giống thành công.Hệ thống được xây dựng nhằm giảm tối đa chi phí hoạt động, nâng cao chất lượng của việc bán hàng cũng như quản lý việc nhập hàng

và xuất hàng.Việc quản lý và lưu trữ thông tin không qua giấy tờ sổ sách sẽ làm giảm chi phí và công sức làm việc của các nhân viên, cũng như tránh được các

1.1.3 Ưu điểm của websize IvyShop

1.1.3.1 Lợi ích của chủ website

- Có khả năng quản lý việc kinh doanh theo thời gian linh hoạt

- tự làm chủ được các mặt hàng

- dễ dàng theo dõi và chăm sóc khách hành hiệu quả nhất

- có khả năng bắt kịp được các ý muốn của khách hàng

- có thể chăm sóc kể cả người mua lẫn những chú cún từ xa thông qua internet,

1.1.4 Nhược điểm của websize IvyModa

Việc lưu trữ thông tin phải thông qua nhiều giấy tờ sổ sách rất mất thời gian vàcông sức cho công việc này, việc lưu trữ thông tin dễ thất thoát trong trường hợprủi ro và cần phải có nhiều nhân viên cho việc quản lý và lưu trữ thông tin dẫn đến tăng chi phí lao động

Việc tìm kiếm thông tin cần phải mất nhiều thời gian vì phải tìm trong sổ sách giấy tờ và tìm trong cửa hàng Phương pháp thủ công không phù hợp cho việc quản lý và tìm kiếm các loài chó khác nhau trong cửa hàng.Vì quản lý bằng phương pháp thủ công rất phức tạp hệ thống cần phải có nhiều nhân viên quản lýnhiều mục trong công việc Do đó sẽ tạo ra bộ máy cồng kềnh, kém hiệu quả Khả năng đáp ứng không cao

Độ bảo mật internet ở nước ta khá thấp , hệ thống mạng dễ bị xâm nhập, đnáh cắp dữ liệu gây bất lợi cho hệ thống website

Khó khăn trong vấn đề tạo dựng sự tin tưởng của khách hàng, khó làm nên thương hiệu do hiện tượng lừa đảo diễn ra càng phổ biến

8

1.2 Xác lập dự án

1.2.1 Mục tiêu của dự án

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

- Websize hiển thị sinh động, đẹp mắt và đơn giản để cho mọi người đề cóthể sử dụng Hỗ trợ người sửa dụng một cách nhanh nhất

- 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 HTML, CSS, JAVASCRIPT giúp cho website sinhđộng và hấp dẫn hơn

1.2.2 Yêu cầu của trang web

- 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

- Đảm bảo an toàn dữ liệu khi chạy website trực tuyến.

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

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Xác định các Actor và Use case tổng quát của hệ thống.

lý khách hàng, xem giỏ hàng, tìmkiếm…

2

Khách hàng truy cập vàowebsite có thể thực hiện các chứcnăng của website như tìm kiếm, xemsản phẩm, xem giỏ hàng,

Ngoài ra, khách hàng còn cóthể thay đổi thông tin cá nhân củamình hoặc để lại các bài đánh giácủa mình về sản phẩm của website

2.1.2 Use case tổng quát của hệ thống

10

Hình 2.1 Biểu đồ use case tổng quát.

Biểu đồ Use case tổng quan cho ta thấy được khái quát các chức năng chính của hệ thống như đăng nhập, cật nhật mặt hàng, thống kê, thanh toán, đánh giá sản phẩm Tác nhân tham gia vào hệ thống:

2 Tìm kiếm sản phẩm

Chức năng này giúp người dùng tìm kiếm sảnphẩm trên website, để thực hiện các tương tác vớisản phẩm

3 Thanh toán

Người dùng có thể thanh toán cho sản phẩmcủa mình qua hình thức online hoặc thanh toánkhi nhận hàng

4 Cập nhật mặt hàng

Chức năng này cho phép Admin đăng nhậpvào hệ thống để thêm, sửa, xóa mặt hàng để phùhợp với thị trường

Sau khi đăng nhập Admin có thể xem dữ liệucác mặt hàng đã bán lượng hàng còn trong kho, incác báo cáo dữ liệu đó để tiện cho việc quản lý

6 Quản lý khách hàng

Admin sẽ quản lý được thông tin khách hàngcập nhật lên hệ thống phù hợp cho việc giaohàng, đồng thời có thể lưu trữ điểm khi kháchháng mua hàng để có những ưu đãi thích hợp chokhách hàng

2.2 Phân rã use case.

2.2.1 Biểu đồ use case.

2.2.1.1 Đăng nhập

12

Hình 2.2 Biểu đồ use case chức năng đăng nhập.

muốn truy cập vào website

+ Hệ thống sẽ hiển thị ra yêu cầu nhập tên đăng nhập vàmật khẩu

+ Tác nhân nhập tên đăng nhập và mật khẩu

+ Hệ thống kiểm tra tên đăng nhập và mật khẩu Nếuđúng thì tác nhân được cho phép vào

+ Nếu tác nhân khách hàng quên mật khẩu muốn đổimật khẩu thì phải xác thực danh tính, nếu đúng thì hệthống cho phép đổi mật khẩu

+ Nếu chưa có tài khoản đăng nhập, tác nhân kháchhàng đăng kí tài khoản, điền thông tin danh tính củamình (họ tên, SĐT, email, địa chỉ) Sau khi hoàn thành

hệ thống cho phép đăng nhập bằng tài khoản vừa đăngkí

- Dòng sự kiện phụ:

+ Nếu trong kịch bản chính đăng nhập tên hoặc mậtkhẩu bị sai thì hệ thống thông báo đăng nhập lại hoặcquên mật khẩu, sau khi tác nhân chọn tiếp tục hoặc hủy

bỏ việc đăng nhập, kết thúc ca sử dụng

2.2.1.2 Tìm kiếm sản phẩm:

Hình 2.3 Biểu đồ use case chức năng tìm kiếm sản phẩm.

truy nhập vào website và chọn danh mục sản phẩm Hệthống hiển thị danh mục các sản phẩm Khách hàngchọn sản phẩm cụ thể, hệ thống sẽ hiển thị thông tin chitiết sản phẩm (gồm giá tiền, chất liệu, thương hiệu)

14

- Khách hàng có thể chọn xem sản phẩm hoặc thêm vàogiỏ hàng hoặc kết thúc ca sử dụng.

2.2.1.3 Thanh toán:

Hình 2.4 Biểu đồ use case chức năng thanh toán.

Mục đích Khách hàng thanh toán đơn hàng sau khi đặt hàng

thành công

Mô tả - Dòng sự kiện chính: Usecase này bắt đầu khi tác nhân

chọn “Thanh toán”

+ Hệ thống yêu cầu đăng nhập tài khoản Sau khi đăngnhập, Form thanh toán xuất hiện, hệ thống hiển thị vàmột số thông tin mặc định của hóa đơn

+ Khách hàng nhập các thông tin: họ tên, số tài khoản,phương thức thanh toán, số điện thoại để hoàn thànhhóa đơn

+ Hệ thống hiển thị các lựa chọn về phương thức thanhtoán (thanh toán khi nhận hàng, thanh toán online)+ Nếu khách hàng chọn “Thanh toán khi nhận hàng” thì

hệ thống hiển thị đã xác nhận đơn+ Nếu khách hàng chọn “Thanh toán online” thì sau khikhách hàng chuyển khoản thành công thì hiển thị giaodịch thành công, xác nhận đơn

Hình 2.5 Biểu đồ use case chức năng cập nhật mặt hàng.

mới thêm (tên hàng, giá tiền, chất liệu, thương hiệu )+ Nếu tác nhân chọn “Sửa mặt hàng” thì hệ thống cấpphép để admin sửa thông tin mặt hàng

+ Nếu tác nhân chọn “Xóa mặt hàng” thì hệ thống tựđộng xóa sản phẩm khỏi danh mục sản phẩm - Dòng sựkiện phụ:

+ Nếu đăng nhập không thành công, hệ thống khôngcấp phép quyền sửa thông tin Ca sử dụng kết thúc

2.2.1.5 Quản lý khách hàng:

Hình 2.6 Biểu đồ use case chức năng quản lý khách hàng.

+ Admin xem và trả lời các tin nhắn tư vấn khách hànglựa chọn sản phẩm phù hợp với khách hàng khi hệthống gửi thông báo tới Admin từ chức năng “Hỗ trợkhách hàng”, hoặc tác nhân chọn mục “Hỗ trợ kháchhàng”

2.2.1.6 Thống kê kho:

Hình 2.7 Biểu đồ use case chức năng thống kê kho.

18

Mô tả - Dòng sự kiện chính: Usecase này bắt đầu khi tác nhân

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

Hình 2.11 Biểu đồ trình tự chức năng thêm vào giỏ hàng

2.3.3 Thanh toán:

Hình 2.12 Biểu đồ trình tự chức năng thanh toán

2.3.6 Thống kê

Hình 2.17 Biểu đồ trình tự chức năng thống kê

2.4 Biểu đồ lớp tổng quát của hệ thống

24

Hình 2.18 Biểu đồ lớp tổng quát của hệ thống

CHƯƠNG 3: C I ĐẶT GIAO DIỆN HỆ THỐNG

3.1 Giao diện

3.1.1 Giao diện trang chủ

26

Hình 3.1 : Giao diện trang chủ của IvyModa

3.1.2 Giao diện sản phẩm

Hình 3.2 : Giao diện sản phẩm

3.1.3 Giao diện giỏ hàng

Hình 3 3 Giao diện giỏ hàng

3.1.4 Giao diện xem sản phẩm

Hình 3.4 : Giao diện xem sản phẩm

3.1.5 Giao diện giao hàng

28

Hình 3.5 : Giao diện giao hàng

3.1.6.Giao diện thanh toán

Hình 3.6 : Giao diện thanh toán

KẾT LUẬN

Nhìn chung, giao diện website đáp ứng được nhu cầu của người dùng và đạtđược những tiêu chí sau:

 Hoàn thiện được ý tưởng và nội dung của trang web

 Thiết kế giao diện đơn giản, đáp ứng nhu cầu với người dùng

 Thao tác trên trang web dễ dàng

 Dễ hoạt động trên nền tảng công nghệ

Tuy nhiên, do hạn chế về trình độ nên giao diện website vẫn còn nhiều vấn đề:

 Do thời gian nghiên cứu có hạn và khả năng còn hạn chếnên một số vấn đề vẫn chỉ còn trên ý tưởng, chưa đượcthực thi

 Chương trình có tính chuyên nghiệp chưa cao

 Chưa giải quyết trọn vẹn các vấn đề nảy sinh trong quá trình xử lý

Do những hạn chế về trình độ, thời gian nên em không khỏi có những thiếu sóttrong quá trình tìn hiểu, nghiên cứu cũng như thực hiện Em rất mong nhận được

sự thông cảm cũng như những đánh giá và chỉnh sửa từ thấy cô

30