Báo cáo chuyên đề học phần môn lập trình web nâng cao đề ti xây dựng cửa hàng bán gấu bông

Khảo sát các trang web v ề văn phòng phẩm .... Xác định yêu cầu của website .... Hướng phát triể ..... Như chúng ta đã biết, các dịch vụ xuất hiện nhằm nâng cao cuộc sống “Multikart ”...

TỔNG QUAN

Giới thi ệu đề tài

“Xây dựng Website gấu bông ”

✓ Sinh viên th c hiự ện:

Lý do ch ọn đề tài

➢ Việc áp d ng công ngh thông tin hi n t i vào h u hụ ệ ệ ạ ầ ết các lĩnh vực, bán hàng cũng là một lĩnh vực cần thiết áp dụng công nghệ thông tin

Để một công ty có thể được biết đến rộng rãi và thu hút khách hàng từ khắp nơi, việc xây dựng một website quảng bá sản phẩm là rất cần thiết Điều này giúp công ty không chỉ giới hạn ở khu vực địa lý xung quanh mà còn tiếp cận được nhiều khách hàng tiềm năng hơn.

Gấu bông ngày càng trở nên phổ biến trong giới trẻ và trẻ em Để đáp ứng nhu cầu của khách hàng, các cửa hàng cần có sự chọn lựa kỹ lưỡng trước khi mua sản phẩm Vì vậy, chúng tôi quyết định xây dựng một trang web bán gấu bông với những yêu cầu thiết kế đầy đủ và hấp dẫn nhất.

Ưu điể m, khuy ết điể m

✓ Đề tài mang tính gần gũi với sinh viên

✓ Em đã giải quyết được một số nghiệp vụ chính: Giới thiệu sản phẩm, c p nh t s n ph m m i qu n lý tin t c, c p nh t thông tin ậ ậ ả ẩ ớ ả ứ ậ ậ mới

✓ Vấn đề bảo mật chưa cao

✓ Chưa khai thác được hết vấn đề

4 Hướng ti p c n cế ậ ủa đề tài

✓ Khảo sát chi ti t các nghi p v c a hế ệ ụ ủ ệ thống n m b t rõ các yêu ắ ắ cầu của ngườ ử ụng i s d

✓ Thông qua các tài liệu liên quan đến đề tài để giải quyết vấn đề

5 Nội dung th c hi n cự ệ ủa đề tài

Kế hoạch thực hiện bao gồm khảo sát nghiệp vụ của website tin tức trực tuyến trên mạng internet, kết hợp với việc tìm hiểu thêm các tài liệu liên quan nhằm phục vụ cho đề tài Chúng tôi sẽ lựa chọn công cụ phù hợp để cài đặt và xây dựng các module cần thiết của chương trình Ngôn ngữ sử dụng trong dự án là C#, và cơ sở dữ liệu sẽ được triển khai trên SQL Server 2019.

✓ Công c ụ cài đặt Visual studio 2022

✓ Các bước thực hiện: o Khảo sát nghi p v ệ ụ o Nghiên c u lý thuy t v website ứ ế ề o Xây d ng, phân tích, thi t k ự ế ế cơ sở ữ d liệu. o Cài đặt chương trình o Chạy th ử

6 Ý nghĩa lý luận và ý nghĩa thực ti n cễ ủa đề tài

Sinh viên sẽ trở nên thành thạo hơn trong việc sử dụng các ngôn ngữ lập trình web và phát triển ứng dụng, từ đó xây dựng trang web theo yêu cầu Họ cũng sẽ hiểu rõ hơn về quy trình nghiệp vụ của người quản lý website cũng như nguyên lý hoạt động của trang web.

✓ Ý nghĩa thực tiễn: o Rèn luy n cách làm ệ việc độ ậc l p có hi u qu ệ ả o Tăng cường nhận thức và tư duy o Củng c và nâng cao ki n th c cho cá nhân ố ế ứ

Báo cáo bao g m các phồ ần chính như sau:

➢ Lý do chọn đề tài

➢ Hướng ti p c n cế ậ ủa đề tài

➢ Ý nghĩa thực tiễn và ý nghĩa lý luận của đề tài

➢ Chương I: Khảo sát h ệthống o Khảo sát h ệthống o Nội dung kh o sát ả o Kết quả kh o sát ả o Ưu nhược điểm của hệ thống o Xác định yêu cầu c a h ủ ệthống

➢ Chương II: Phân tích thi t k h ế ế ệthống o Phân tích yêu c u c a h ầ ủ ệthống o Các nhân t cố ủa h ệthống

11 o Biểu đồ UseCase h ệthống o Biểu đồ lớp o Biểu đồ tuần tự

➢ Chương III: Phân tích thiết kế cơ sở dữ liệu o Mô hình c s d u t ng quát ở ở ữliệ ổ o Danh sách các b ng trong CSDL ả

➢ Chương IV: Giao diện ứng dụng o Giao di n qu n tr ệ ả ị o Giao diện người dùng

✓ Thực nghiệm, đánh giá kết quả và hướng phát tri n ể

➢ Kết quả đạt được của đề tài

NỘI DUNG

1.1 Khảo sát các trang web v ề văn phòng phẩm a,Một s yêu cố ầu cơ bản

Bước đầu tiên trong thiết kế một website là xác định các yếu tố quan trọng để đạt hiệu quả như mong muốn Khi thiết kế, chúng ta cần phân tích các trang của website, chẳng hạn như trang chủ, trang sản phẩm, và trang tin tức Việc này giúp chúng ta bố trí các phần quan trọng như sản phẩm và dịch vụ ở những vị trí mà người dùng dễ dàng nhìn thấy, từ đó thu hút người xem và nâng cao trải nghiệm người dùng.

- Đơn giản trong thi t kế ế có ưu điểm: d xem, dễ ễ đọc và dễ thấy; gi m thiả ểu thời gian load; nội dung được nhấn mạnh; d ễquản lý

Khi thiết kế website, người đọc nên được đặt làm trung tâm Mục tiêu là thu hút càng nhiều người biết đến trang web càng tốt Hãy đảm bảo rằng các thành phần trên trang web mang lại sự tiện lợi cho người dùng Nếu hiệu ứng động của banner làm chậm tốc độ tải trang, hãy loại bỏ nó Quảng cáo không nên che khuất nội dung, và nếu menu sử dụng Javascript khó sử dụng, hãy thay thế bằng menu trực quan hơn Khi bạn luôn quan tâm đến nhu cầu của người đọc và cung cấp thông tin họ muốn, bạn sẽ thu hút được sự quan tâm và lòng tin từ họ.

- Với font chữ:sử d ng font ch chu n cho website ụ ữ ẩ

Để đảm bảo hiệu quả của website, cần kiểm tra tính tương thích của nó trên các trình duyệt phổ biến hiện nay như Internet Explorer, Firefox và Google Chrome Việc này giúp phát hiện lỗi và điều chỉnh cho phù hợp với người dùng.

- Màu s c s d ng khi thi t k hài hòa ắ ử ụ ế ế

KHẢO SÁT HỆ THỐNG

Khảo sát các trang web v ề văn phòng phẩm

a,Một s yêu cố ầu cơ bản

Bước đầu tiên trong thiết kế một website là xác định các yếu tố quan trọng để đạt hiệu quả như mong muốn Khi thiết kế, chúng ta cần phân tích các trang của website, chẳng hạn như trang chủ, trang sản phẩm, và trang tin tức Việc này giúp chúng ta bố trí các phần quan trọng như sản phẩm và dịch vụ ở những vị trí mà người dùng dễ dàng nhìn thấy, từ đó thu hút sự chú ý của người xem.

- Đơn giản trong thi t kế ế có ưu điểm: d xem, dễ ễ đọc và dễ thấy; gi m thiả ểu thời gian load; nội dung được nhấn mạnh; d ễquản lý

Khi thiết kế website, người đọc nên được đặt làm trung tâm Mục tiêu là thu hút càng nhiều người biết đến trang web càng tốt, vì vậy cần tạo điều kiện thuận lợi cho họ khi tiếp cận thông tin Nếu hiệu ứng động của banner làm trang load chậm, hãy loại bỏ nó Quảng cáo không nên che khuất nội dung, và nếu menu sử dụng Javascript khó sử dụng, hãy thay thế bằng menu trực quan hơn Luôn đặt mình vào vị trí người đọc và cung cấp những gì họ cần, điều này sẽ giúp bạn thu hút được sự quan tâm và lòng tin từ họ trong tương lai.

- Với font chữ:sử d ng font ch chu n cho website ụ ữ ẩ

Để đảm bảo hiệu quả của website, cần kiểm tra tính tương thích của nó trên các trình duyệt phổ biến hiện nay như Internet Explorer, Firefox và Google Chrome Việc này giúp phát hiện lỗi và điều chỉnh cho phù hợp với người dùng.

- Màu s c s d ng khi thi t k hài hòa ắ ử ụ ế ế

Khi thiết kế sản phẩm, cần đảm bảo thông tin về sản phẩm phải rõ ràng, có trật tự và được sắp xếp hợp lý để khách hàng dễ dàng nhận biết các đặc tính quan trọng và nổi bật của sản phẩm, đặc biệt là giá cả phải được niêm yết rõ ràng Màu sắc cần phù hợp với màu sắc chủ đạo của cửa hàng hoặc sản phẩm, dịch vụ Tránh sử dụng các loại thiết kế quá phức tạp, màu sắc chói mắt, khiến người xem khó chịu Không nên niêm yết giá sản phẩm một cách mập mờ hoặc không rõ ràng.

✓ Trang web không nên quá ph c tứ ạp.

✓ Dung lượng file không quá lớn

✓ Thanh menu thật đơn giản

✓ Mua domain cho riêng bạn

✓ Phải có thông tin liên h ệ

✓ Font ch ữ đơn giản, dễ nhìn

✓ Tránh dùng ch g ch chân ữ ạ

✓ Tuyệt đối không nên dùng hình n n và nh c nề ạ ền.

✓ Không nên dùng hiệu ứng cho tr chuỏ ột

✓ Kiểm tra xem trang c a bủ ạn có tương thích với nh ng trình duy t phữ ệ ổ bi n.ế

✓ Luôn kiểm tra các đường link

Khảo sát nghi p v c ệ ụ ủa công ty Multikart

• Sau khi kh o sát tả ại công ty, đưa ra được các chức năng chính như:

➢ Quản lý thông tin s n phả ẩm.

• Xác định được các yêu c u c a công ty ầ ủ

➢ Không c n quá cầ ầu k cho thi t k giao diỳ ế ế ện

➢ Cập nhật các thông tin nhanh chóng

➢ Đầy đủ các chức năng cần thiết

1.3 Xác định yêu cầu c a website ủ

Yêu cầu chung về phần mềm cơ bản áp dụng rộng rãi, phù hợp với nhiều người sử dụng, ít xảy ra lỗi, đầy đủ, mạch lạc và rõ ràng Phần mềm có các chức năng cơ bản như quản lý sản phẩm và quản lý thông tin Giao diện đơn giản và thân thiện, đáp ứng tính bảo mật trên website Thao tác nhanh chóng, hiệu quả và chính xác.

Tổng quan về sản phẩm bao gồm các chức năng dành cho người dùng như hiển thị sản phẩm, chi tiết sản phẩm, cập nhật tin tức và thông tin liên quan Đối với người quản trị, hệ thống cho phép thêm, sửa, và xóa các thông tin một cách dễ dàng.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Phân tích yêu c u c a h ầ ủ ệ thống

Sau khi kh o sát th c t ả ự ế và xác định được các yêu c u c a hầ ủ ệ thống, có th ể đưa ra quy trình nghiệp vụ chung c a h ủ ệthống bao g m các phồ ần:

✓ Phần dành cho người quản trị

➢ Khi người quản trị đăng nhập quản trị vào phần dành cho người quản tr h ị ệthống

➢ Tác nhân: Người qu n trả ị hệthống

✓ Phần dành cho người dùng

Khi truy cập vào trang web, thông tin sẽ được hiển thị theo sự phân loại của người lập trình Khách hàng không cần đăng nhập để đọc tin tức mà họ quan tâm Nếu khách hàng muốn đặt hàng, họ có thể thực hiện dễ dàng trên trang.

➢ Tác nhân th c hiự ện: Người quản tr , khách hàng ị

➢ Người qu n tr ả ịthực hi n các chệ ức năng quản tr , qu n lý s n ph m, ị ả ả ẩ chi ti t s n ph m, tin t c ế ả ẩ ứ

➢ Có th thêm s n ph m m i, tin t c m i hoể ả ẩ ớ ứ ớ ặc xóa thông tin cũ cần thiết sao đó lưu lại trong CSDL

➢ Cập nhật những thông tin đã thay đổi lên trang web

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

Các đối tượng sẽ tương tác với website nhưng bảng 2.1:

Bảng 2.1: Các đối tượng tương tác với website

STT Tên Actor Ý nghĩa/ Ghi chú

Là người có quyền cao nh t c a h ấ ủ ệ thống, ngoài việc được tác động đến các chức năng quản lý s n ph m, QL tin t c, ả ẩ ứ

… admin còn có quyền tạo tài kho n, ả cấp quy n cho Nhân viên qu n tr ề ả ị

Admin Là actor chính c a h ủ ệthống

Là người có thể tác động đến các chức năng quản lý mà họ được phân quy n, ề như quản lý sản ph m, qu n lý tin t c, ẩ ả ứ

Là người sẽ tương tác với hệ thống, tìm hiểu thông tin

Có quyền đặt hàng, đọc tin tức, xem thông tin s n ph m ả ẩ 2.3 H ệthống UseCase

2.3.1 Các use case chính c a h ủ ệthống

Bảng 2.2: Các use case chính c a h ủ ệthống

STT Tên UC Ghi chú

Người nhân viên qu n trị có quy n sẽ đưả ề ợc cập nh t sậ ản phẩm m i, s a thông tin sớ ử ản phẩm và xóa s n phả ẩm

2 QLNhóm s n ph m ả ẩ Người nhân viên qu n trị có quy n sẽ đưả ề ợc quản lý nhóm s n ph m ả ẩ

3 QL Bán hàng Quản lý đặt hàng và duyệt hóa đơn

Người qu n tr có quy n s ả ị ề ẽquản lý thông tin của khách hàng đặt hàng, để có thể tiện liên lạc

5 Quản lý menu Nhân viên qu n tr có quy n sả ị ề ẽ quản lý, cập nhật menu khi c n thiầ ết

6 QL Tin t c ứ Cập nhật thông tin, tin tức công ty, tin tức điện tho i ạ

Khách hàng cần liên h v i công ty, nhân ệ ớ viên có quy n sề ẽ quản lý các liên h cệ ủa khách hàng

8 QL Qu ng cáo ả Nhân viên qu n tr có quy n s ả ị ề ẽquản lý thông tin qu ng cáo ả

9 QL H ỗtrợ Nhân viên qu n tr ả ịquản lý h ỗtrợ khách hàng khi khách hàng cần.

Admin có quy n truy nh p vào hề ậ ệ thống tạo tài kho n và phân quy n cho t ng Actor cả ề ừ ủa hệ thống

Nhân viên qu n tr cả ị ần đăng nhập hệ thống trước khi qu n lý nh ng ph n mà nhân viên ả ữ ầ đó có quyền

Hình 2.1: Use Case t ng quátổ

Hình 2.2: Use Case QL S n phả ẩm

2.3.4 Use case QL Bán hàng

Hình 2.3: Use case QL Bán hàng

2.3.5 Use case QL Khách hàng

Hình 2.4 :Use case QL Khách hàng

Hình 2.5 :Use case QL Tin t c ứ

Hình 2.6: Use case QL Liên h ệ

2.3.8 Use case QL Quảng cáo hea

Hình 2.7: Use Case QL Qu ng Cáoả

Hình 2.8: Use case QL H ỗTrợ

2.3.10 Use case QL Người dùng

Hình 2.9: Use case QL Người dùng 2.3.11 Use case Đăng nhập

Hình 2.10: Use case Đăng nhập

Dưới đây là biểu đồ tuần tự cho mộ ốt s chức năng chính:

2.5.1 Biểu đồtuầ ựn t cho Use case đăng nhập

Hình 2.12: Biểu đồtuầ ự cho Use case đăng nhập n t

Khi nhân viên quản trị thực hiện đăng nhập vào hệ thống, họ cần nhập tên đăng nhập và mật khẩu Hệ thống sẽ kiểm tra thông tin đăng nhập trong cơ sở dữ liệu Nếu thông tin đúng, nhân viên sẽ được truy cập vào trang quản trị; ngược lại, nếu thông tin sai, hệ thống sẽ thông báo lỗi và yêu cầu nhập lại.

2.5.2 Biểu đồtuầ ựn t cho Use case QL s n ph m ả ẩ

Hình 2.13: Biểu đồtuầ ựn t cho Use case QL s n phả ẩm

Nhân viên quản trị phải đăng nhập vào hệ thống để truy cập trang quản trị Sau khi đăng nhập thành công, nhân viên có thể yêu cầu chức năng quản lý sản phẩm Hệ thống sẽ hiển thị danh sách sản phẩm và giao diện quản lý tương ứng.

2.5.2.1 Biểu đồtuầ ựn t cho use case Thêm s n ph m ả ẩ

Hình 2.14: Biểu đồtuầ ựn t cho use case Thêm s n ph m ả ẩ

Nhân viên quản trị đăng nhập vào hệ thống và yêu cầu chức năng thêm sản phẩm Hệ thống sẽ yêu cầu nhập tất cả các thông tin cần thiết của sản phẩm và chi tiết sản phẩm Khi nhân viên quản trị nhập thông tin sản phẩm và chi tiết sản phẩm, hệ thống sẽ tạo đối tượng sản phẩm và chi tiết sản phẩm, đồng thời kiểm tra thông tin sản phẩm Nếu thông tin sản phẩm đúng, hệ thống sẽ thêm thông tin sản phẩm vào bảng sản phẩm Sau khi thêm thành công, hệ thống sẽ tải ra bảng thông tin sản phẩm sau khi thêm sản phẩm.

2.5.2.2 Biểu đồtuầ ựn t cho use case S a s n ph m ử ả ẩ

Hình 2.15: Biểu đồtuầ ựn t cho use case S a s n ph m ử ả ẩ

Nhân viên quản trị cần đăng nhập vào hệ thống để yêu cầu chức năng sửa sản phẩm Sau khi chọn sản phẩm cần sửa, hệ thống sẽ tải thông tin và chi tiết sản phẩm lên giao diện cho nhân viên Nhân viên quản trị sẽ thực hiện việc sửa thông tin, và hệ thống sẽ lưu lại thông tin đã sửa vào cơ sở dữ liệu, sau đó hiển thị danh sách sản phẩm lên giao diện.

2.5.2.3 Biểu đồtuầ ựn t cho use case xóa s n ph m ả ẩ

Hình 2.16: Biểu đồtuầ ựn t cho use case Xóa s n ph m ả ẩ

Nhân viên đăng nhập vào hệ thống và yêu cầu chức năng xóa sản phẩm Hệ thống hiển thị danh sách sản phẩm để nhân viên chọn sản phẩm cần xóa Sau khi chọn, hệ thống yêu cầu xác nhận việc xóa sản phẩm Nếu nhân viên đồng ý, sản phẩm sẽ được xóa khỏi cơ sở dữ liệu, và hệ thống sẽ cập nhật danh sách tất cả các sản phẩm sau khi đã xóa.

2.5.2.4 Biểu đồtuầ ựn t cho use case Tìm ki m s n ph m ế ả ẩ

Hình 2.17: Biểu đồtuầ ựn t cho Use case Tìm ki m s n ph m ế ả ẩ

2.5.4 Biểu đồtuầ ựn t cho use case QL Bán hàng

Hình 2.18: Biểu đồtuầ ựn t cho UC QL Bán hàng

2.5.5 Biểu đồtuầ ựn t cho use case QL Khách hàng

Hình 2.19: Biểu đồtuầ ựn t cho UC QL Khách hàng

2.5.7 Biểu đồtuầ ựn t cho use case QL tin t c ứ

Hình 2.20: Biểu đồtuầ ựn t cho use case QL tin t c ứ

➢ Mô t ả o Nhân viên qu n tr ả ịmuốn qu n lý tin tả ức trước hết phải đăng nhập h ệthống

32 o Yêu c u chầ ức năng quản lý tin t c, h ứ ệthống s truy vẽ ẫn cơ sở ữ d liệu và trả về danh sách tin tức.

2.5.7.1 Biểu đồtuầ ựn t cho use case Thêm tin t c ứ

Hình 2.21: Biểu đồtuầ ựn t cho use case Thêm tin t c ứ

Nhân viên quản trị đăng nhập vào hệ thống và yêu cầu chức năng thêm thông tin Hệ thống yêu cầu nhập thông tin cần thiết Sau khi nhân viên nhập thông tin, hệ thống sẽ kiểm tra tính hợp lệ Nếu thông tin thỏa mãn yêu cầu, hệ thống sẽ thêm thông tin đó vào cơ sở dữ liệu và trả về danh sách tất cả thông tin trên giao diện.

2.5.7.2 Biểu đồtuầ ựn t cho use case S a tin t c ử ứ

Hình 2.22: Biểu đồtuầ ựn t cho use case S a tin t c ử ứ

Nhân viên quản trị cần đăng nhập vào hệ thống để sử dụng chức năng sửa tin tức Sau khi chọn tin tức cần sửa, hệ thống sẽ tải thông tin lên giao diện cho nhân viên Sau khi thực hiện sửa đổi, hệ thống sẽ lưu thông tin đã chỉnh sửa vào cơ sở dữ liệu và hiển thị lại danh sách tin tức trên giao diện.

2.5.7.3 Biểu đồtuầ ựn t cho use case Xóa tin t c ứ

Hình 2.23: Biểu đồtuầ ựn t cho use case Xóa tin t c ứ

Nhân viên quản trị yêu cầu đăng nhập để xóa tin Hệ thống sẽ yêu cầu chọn tin cần xóa Sau khi nhân viên chọn, hệ thống sẽ xác nhận thông tin tin tức cần xóa Nếu nhân viên quản trị yêu cầu xóa, hệ thống sẽ xóa tin tức đó trong cơ sở dữ liệu và trả về danh sách các tin tức còn lại trên giao diện.

2.5.8 Biểu đồtuầ ựn t cho use case QL Liên h ệ

Hình 2.24: Biểu đồtuầ ựn t cho use case QL Liên hệ

2.5.9 Bi u ể đồtuầ ựn t cho use case QL Qu ng cáo ả

Hình 2.25: Biểu đồtuầ ựn t cho use case QL Qu ng cáo ả

2.5.10 Biểu đồtuầ ựn t cho use case QL H ỗtrợ

Hình 2.26: Biểu đồtuầ ựn t cho use case QL H ỗtrợ

2.5.11 Biểu đồtuầ ự cho use case QL Người dùng n t

Hình 2.27: Biểu đồtuầ ự cho use case QL Người dùng n t

H ệ thố ng UseCase