Đề tài lập trình website cửa hàng bán áo one piece

Việc nh ng ữfan hâm m phim anime mu n khoát lên mình nh ng chi c áo có in nh ng nhân vộ ố ữ ế ữ ật mà h yêu thích.ọ Nắm bắt sự phát triển một Khách hàng đã đặt hàng thiết kế một website

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

VIỆN K THU T CÔNG NGH Ỹ Ậ Ệ

Bình Dương, tháng 07 năm 2021

PHIẾU ĐÁNH GIÁ PROJECT

(Đánh giá quá trình thực hiện, báo cáo văn bản và s ản phẩm)

Học phần: L P TRÌNH WEB Ậ

Họ và tên sinh viên (MSSV):

1 Nguyễn Văn Hoài MSSV: 1924801030016

2 Lê Thanh Tuấn MSSV: 1924801030291

Trung bình 50%

Kém 0%

Thái độ tham gia tích c c ự

Nêu ý tưởng 05

Tích c c tìm ự kiếm và ch ủ động đưa ra ý tưởng mang tính m i ớ

Tìm ki m và ế đưa ra được ý tưởng khá t t ố

Chọn ý tưởng trong s ố được đề nghị

Không quan tâm lựa ch n ý ọ tưởng

Lập k ế hoạch thực hiện

05

Hoàn toàn hợp lý, không c n ầ điều chỉnh

Khá h p lý, ợ điều chỉnh chút ít theo góp ý

Chưa hợp lý, có điều chỉnh theo góp ý

Không hợp lý và không điều chỉnh theo góp ý

Quá trình thực hi n ệ project nghiêm túc

Giai đoạn chuẩn

bị

10

Chuẩn bị tốt mọi điều kiện cho vi c th ệ ực hiện project,

có th ể khởi động ngay

Chuẩn bị được

đa số điều kiện cho việ c th ực hiện, có th ể khởi động và

bổ sung sau

Chuẩn bị được một s ố điều kiện cho vi c th ệ ực hiện nhưng cần

bổ sung thêm mới có thể khởi động

Không chuẩn b ị được điều kiện nào

Giai đoạn thực hiện

10

Thực hi n ệ hoàn toàn đúng phương pháp

Thực hi n khá ệ đúng phương pháp, sai sót nhỏ và có sửa chữa

Thực hiện tương đối đúng phương pháp, sai sót quan tr ng và có ọ sửa ch a ữ

Thực hi n ệ không đúng phương pháp, sai sót không

TRƯỜNG ĐH THỦ DẦU MỘT

KHOA KỸ THUẬT CÔNG NGHỆ

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

10

Triển khai đúng kế hoạch

Triển khai khá đúng kế hoạch,

có ch m tr ậ ễ nhưng không gây ảnh hưở ng

Triển khai tương đối đúng kế hoạch, có chậm trễ gây nh ả hưởng nhưng khắc ph ục đượ c

Triển khai chậm tr , ễ gây nh ả hưởng không khắc phục được Mức

độ đạ t

được mục tiêu thành phần

20

Ghi rõ t ng m c tiêu thành ph n ( mừ ụ ầ ở ỗi giai đoạn c a ủ

project) và thang điểm cụ thể

Làm vi c nhóm ệ

Hướng d n: Nhóm h p th o luẫ ọ ả ận đánh giá lẫn nhau Kết qu này sả ẽ đượ ử ụng để qui đổi t c s d ừ

điểm của nhóm thành điểm của mỗi cá nhân, tu theo % mỳ ỗi cá nhân đạt được

1) Thành viên có tham gia họp đầy đủ: 40%

nhân SV, không ph bi ổ ến cho

MỤC LỤC

LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

CHƯƠNG 1: TỔNG QUAN 3

1.1 Tên đề tài 3

1.2 M c tiêu cụ ủa đề tài 3

1.3 Ý nghĩa của đề tài 3

1.4 Đối tượng của đề tài 4

1.5 Một số trang chính c a Website 4 ủ CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 5

2.1 Gi i thi u v ASP.NET 5 ớ ệ ề 2.2 Ngôn ng ữ CSS 5

2.3 Ngôn ng Javascript 5 ữ CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ CƠ SỞ DỮ LIỆU VÀ HỆ THỐNG 7

3.1 Biểu đồ Usecase 7

3.1.1 Biểu đồ usecase t ng quát 8 ổ 3.1.2 Biểu đồ usecase người dùng 8

3.1.3 Biểu đồ usecase ADMIN 9

3.2 Đặc tả Usecase 9

3.2.1 Usecase đăng nhập ( người dùng) 9

3.2.2 Usecase đăng kí tài khoản 10

3.2.3 Usecase đặt mua 10

3.2.4 Usecase tìm kiếm sản phẩm 11

3.2.5 Usecase đăng nhập ( ADMIN) 12

3.3 Biểu đồ tuầ ựn t 13

3.3.1 Chức năng đăng nhập 13

3.3.2 Chức năng đăng kí 13

3.2.3 Chức năng tìm kiếm 14

3.2.4 Chức năng đặt mua 14

3.4 Thiết kế cơ sở ữ liệ d u 15 3.4.1 Bảng người dùng 15 3.4.2 B ng CTDANGHANG 15 ả 3.4.3 B ng DONDATHANG 16 ả 3.4.4 B ng Du_Lieu 16 ả 3.4.5 B ng Hang_ao 16 ả 3.5 Mô hình Class Diagram 17 CHƯƠNG 4: XÂY DỰNG WEBSITE BÁN ÁO ONEPIECE SHOP 18 4.1 Giao di n trang ch 18 ệ ủ 4.2 Giao di n trang giệ ới thiệu 20 4.3 Giao di n trang liên h 21 ệ ệ 4.4 Giao diện trang đăng ký 22 4.5 Giao diện trang đăng nhập 23 4.6 Giao di n trang danh mệ ục sản ph m 24 ẩ 4.6.1 Giao di n danh mệ ục Áo Luffy 25 4.6.2 Giao di n danh m c Áo Zoro 26 ệ ụ 4.6.3 Giao di n danh m c Áo Sanji 27 ệ ụ 4.6.4 Giao di n danh m c Áo Usopp 27 ệ ụ 4.6.5 Giao di n danh m c Áo Nami 28 ệ ụ 4.6.6 Giao di n danh m c Áo Nico Robin 28 ệ ụ 4.6.7 Giao di n danh m c Áo Brook 29 ệ ụ 4.6.8 Giao di n danh m c Áo Chopper 29 ệ ụ 4.7 Giao diện đăng nhập (ADMIN) 30 4.8 Giao di n quệ ản lí người dùng 30 4.9 Giao di n qu n lí s n ph m 31 ệ ả ả ẩ 4.10 Giao di n trang s n ph m 32 ệ ả ẩ 4.11 Giao di n gi hàng 32 ệ ỏ KẾT LUẬN 33

LỜI MỞ ĐẦU

Ngày nay, cùng v i s phát tri n cớ ự ể ủa đất nước ngành Công nghệ thông tin đã

có những bước phát tri n m nh m không ng ng và tin hể ạ ẽ ừ ọc đã trở thành chi c chìa ếkhóa dẫn đến thành công cho nhi u cá nhân trong nhiề ều lĩnh vực, hoạt động Với những ng d ng c a mình, ngành Công nghứ ụ ủ ệ thông tin đã góp phần mang l i nhi u ạ ềlợi ích mà không ai có th ph nhể ủ ận được Đặc biệt là trong lĩnh vực quản lý kinh tế, tin h c ọ đã góp phần t o ra sạ ự thay đổi nhanh chóng cho b m t xã h i Nh t là khi ộ ặ ộ ấviệc tin h c hóa vào công tác qu n lý, bán hàng là mọ ả ột trong những yêu c u c n thiầ ầ ết

đố ới v i các doanh nghiệp hiện nay

T nh ng ph n m m qu n lý giúp cho công vi c bán hàng c a c a hàng tr ừ ữ ầ ề ả ệ ủ ử ởnên nhanh chóng và d dàng, ngày nay công nghễ ệ thông tin đã phát triển m nh m ạ ẽhơn nữa, Website ra đời không chỉ đáp ứng cho các khách hàng đến trực tiếp cửa hàng mua s n ph m mà nó còn ph c v cho nh ng khách hàng xa Không nh ng ả ẩ ụ ụ ữ ở ữthế, vi c gi i thi u, qu ng bá hình nh v cệ ớ ệ ả ả ề ửa hàng, công ty được m r ng trên quy ở ộ

mô l n giúp cho viớ ệc kinh doanh, buôn bán, trao đổi tin t c thu n lứ ậ ợi hơn rất nhi u, ềmang lại hiệu qu kinh t ả ế cao hơn và tạo uy tín trong lòng khách hàng

Chính vì l i ích mà Website mang l i mà các cợ ạ ửa hàng, công ty đã áp dụng nó

để phát triển công việc kinh doanh và giới thiệu cửa hàng c a mình Trong số đó, ủquần áo là một lĩnh vực ph bi n s d ng nhiổ ế ử ụ ều đến Website Do v y, chúng em lậ ựa chọn đề tài “thiết k website c a hàng bán áo one pieceế ử ” nhằm đưa đến cho khách hàng một gợi ý lý tưởng trong vi c lệ ựa chọn mua các s n ph m qu n áo.ả ẩ ầ

Đặc bi t, chúng em xin chân thành cệ ảm ơn Thầy Nguy n Hễ ữu Vĩnh đã tận tình hướng dẫn, chỉ bảo, đưa ra những đóng góp ý kiến rất hữu ích và quý báu cho chúng em trong su t quá trình thố ực hiện đề tài này

Chúng em xin g i lử ời cám ơn đến gia đình, bạn bè đã động viên, chia s và ẻcung cấp các tài li u h u ích cho nhóm ệ ữ

Mặc dù đã cố ắ g ng n l c th c hiỗ ự ự ện đề tài v i quyớ ết tâm cao nhưng chắc h n ẳ

đề tài không thể tránh khỏi những thiếu sót Nhóm em rất mong nhận được những ý kiến đóng góp ý kiến của thầy cô và các bạn để đề tài của chúng em ngày càng hoàn thiện và hướng tới áp dụng thực tế hơn

Chúng em xin chân thành cảm ơn!

Thủ ầ D u M t, tháng ộ 07 năm 2021

Sinh viên thực hiện

Nguyễn Văn Hoài

Lê Thanh Tuấn

CHƯƠNG 1: TỔNG QUAN 1.1 Tên Đề Tài

THIẾT KẾ WEBSITE C A HÀNG BÁN ÁO ONE PIECE Ử

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

Ngày nay, xã h i phát tri n nh ng bộ ễ ữ ộ phim anime đã ngày càng ra nhiều với chất lượng hình ảnh được nâng cao Số lượng người mê những bộ phim anime ngày càng tăng Mỗi b phim anime dài tộ ập đã có số lượt xem ngày càng đông Việc nh ng ữfan hâm m phim anime mu n khoát lên mình nh ng chi c áo có in nh ng nhân vộ ố ữ ế ữ ật

mà h yêu thích.ọ Nắm bắt sự phát triển một Khách hàng đã đặt hàng thiết kế một website bán áo in hình những nhân v t chính cậ ủa bộ phim anime có tên là one piece,

website này sẽ đưa lên tất cả các áo được in hình các nhân vật trong phim để người mua có thể chọn được cái áo có hình mà mình ưng ý nhất

Đây cũng là xu hướng trong xã hội hi n nay khi mệ ọi người chỉ với một cú nh p ấchuột cũng có thể dễ dàng đặt mua được sản phầm mà mình ưng ý một cách dễ dàng

và không ph i m t thả ấ ời gian đi đế ận nơi đển t mua Vi c mua bán này giúp ti t kiệ ế ệm thời gian và tiền bạc khi mọi người có thể lựa chọn sản phẩm với giá cả đa dạng và nhu c u cá nhân c a tầ ủ ừng người

Thiết k website bán áo one piece v i các chế ớ ức năng cơ bản c n thi t cho mầ ế ột trang web buôn bán c n có vì em th y nhu c u mua s m ầ ấ ầ ắ và đây cũng là một th ịtrường tiềm năng có thể khai thác buôn bán

Website “bán áo one piece” thứ nhất dùng để quảng bá cho sân, th hai là kênh thông ứtin cho mọi người, th ba là mứ ột địa ch tin cỉ ậy để những khách hàng yêu thích nh ng ữnhân v t chính c a bậ ủ ộ phim anime one piece có được chi c áo in hình nh n v t mà ế ậ ậ

họ yêu thích

1.3 Ý Nghĩa Của Đề Tài

+ Đưa sản phẩm của cửa hàng đến gần hơn với người có cùng đam mê và sở thích

+ Quảng bá thương hiệu

1.4 Đối Tượng Của Đề Tài

+ Đối tượng nghiên cứu chủ yếu là những người yêu thích bộ phim anime one piece và mu n khoát lên mình ố cái áo được in hình nhân v t mà h yêu thích ậ ọ

1.5 Một Số Trang Chính Của Website

+ Trang chủ: Đây là trang giới thiệu sơ lược v các sề ản ph m m i cẩ ớ ủa c a hàng ử+ Trang Gi i thiớ ệu: Đây là trang giúp cho khách hàng xem biết thêm v thông tin cề ủa

Shop

+ Trang liên hệ: Đây là trang mà khách hàng có thể liên hệ ớ v i Shop

+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của trang

+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua s n ph m c a trang.ả ẩ ủ+ Trang s n phả ẩm: Đây là trang khách hàng xem ho c tham kh o các m t hàng cặ ả ặ ủa

cửa hàng có sẵn để lựa chọn

+ Trang chi ti t s n phế ả ẩm: Đây là trang khách hàng nh n vào t ng s n phấ ừ ả ẩm để xem

chi tiết

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu về ASP.NET

ASP.NET là mộ ề ảt n n t ng ứng d ng web ụ (web application framework) được phát triển và cung c p b i ấ ở Microsoft, cho phép những ngườ ậi l p trình t o ra nh ng trang ạ ữweb động, những ứng d ng web và những d ch vụ ị ụweb Lần đầu tiên được đưa ra thịtrường vào tháng 1 năm 2002 cùng với phiên bản 1.0 của.NET framework, là công nghệ n i ti p cố ế ủa Microsoft's Active Server Pages(ASP) ASP.NET được biên dịch dưới dạng Common Language Runtime (CLR), cho phép những ngườ ập trình viết i l

mã ASP.NET với b t kấ ỳ ngôn ng ữ nào được hỗ trợ ở b i.NET language

CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn

JavaScript là ngôn ngữ dướ ại d ng script có th g n vể ắ ới các file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn

JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhi u kiề ểu đối tượng,

ví dụ đối tượng Math v i t t c các chớ ấ ả ức năng toán học Nhưng JavaScript không là ngôn ng ữ hướng đối tượng như C++/Java

CHƯƠNG 3: PHÂN TÍCH THI T K Ế Ế CƠ SỞ Ữ LIỆ D U VÀ HỆ TH NG Ố

và các m t hàng c n bán ặ ầ

Người dùng đây là những người truy cập vào ởwebsite, có thể đăng kí làm thành viên hoặc không Người dùng chỉ có một số quyền nhất định đối với website như là xem thông tin cảu hàng, đặt hàng,

o Danh sách các Usecase

1 Đăng nhập UC này mô t ả chức năng đăng nhập vào h ệ thống của

người dùng hoặc Admin

2 Đăng kí UC này mô t ả chức năng đăng kí tài khoản làm thành

viên của người dùng và Admin

3 Đặt mua UC này mô tả chức năng đặt mua s n ph m tả ẩ ại

website của người dùng

4 Tìm ki m s n ế ả

phẩm

UC này mô t ả chức năng tìm kiếm các sản phẩm trên website của người dùng

5 Quản lý thông tin

UC này mô tả chức năng quản lý các thông tin như quản lý người dùng, sản phẩm, nhà cung cấp của Admin

3.1.1 Biểu đồ usecase t ng quátổ

Biểu đồ usecase tổng quát 3.1.2 Bi ểu đồ usecase ngườ i dùng

Biểu đồ usecase người dùng

3.1.3 Biểu đồ usecase ADMIN

Biểu đồ usecase ADMIN

- Dòng sự kiện chính

(1) Người dùng chọn chức năng đăng nhập từ trang chủ ủ c a website

(2) Trang ch s mủ ẽ ở đến trang đăng nhập

(4) Hệ thống xác nhận thông tin đăng nhập

(5) Hiển thị thông báo

(6) Kết thúc Use Case

3.2.2 Usecase đăng kí tài khoản

- Tóm t t ắ

Actor Người dùng là người s dử ụng Use Case này Use Case này được s d ng ử ụ

để thực hiện chức năng đăng kí tài khoản của người dùng Sau khi đăng kí tài khoản, lúc đó Người dùng mới có thể đăng nhập vào website và thực hiện được các chức năng như là:đặt hàng, Gửi ý ki n ph n hế ả ồi…

- Dòng sự ệ ki n chính

(1) Người dùng ch n chọ ức năng đăng kí từ trang ch c a website ủ ủ

(2) Trang chủ ẽ ở đến trang đăng kí s m

(3) Người dùng nhập đầy đủ thông tin tài kho n và thông tin cá nhân ả

(4) Hệ thống xác nhận thông tin và lưu lại

(5) Hiển th thông báo ị

(6) Kết thúc Use Case

3.2.3 Usecase đặt mua

- Tóm tắt

Actor Người dùng là người sử dụng Use Case này Use Case này được sử dụng

để thực hiện chức năng đặt mua sản phẩm của người dùng Sau khi truy cập vào website và xem thông tin sản phẩm, người dùng có thể đặt mua s n ph m mà mình ả ẩcảm thấy vừa ý

- Dòng sự kiện chính

(1) Người dùng chọn chức năng xem thông tin chi tiết của sản ph m ẩ

(2) Trang ch s mủ ẽ ở đến trang thông tin chi tiết của sản ph m ẩ

(3) Người dùng xem và nhấn vào nút “đặt mua”

(4) Hệ thống xác nhận thông tin và lưu lại

(5) Kết thúc Use Case

3.2.4 Usecase tìm kiếm sản phẩm

- Tóm tắt

Actor Người dùng là người sử dụng Use Case này Use Case này được sử dụng

để thực hiện chức năng tìm kiếm sản phẩm Với chức năng này, Người dùng có thể tìm ki m s n ph m mà mình yêu thích và xem s n phế ả ẩ ả ẩm đó có tồ ạn t i trong website hay không?

- Dòng sự kiện chính

(1) Ngườ chọn chức năng tìm kiếm tài liệu từ trang chủ

(2) Người dùng nhập thông tin tìm kiếm

(4) Hệ thống xác nhận thông tin và thực hiện tìm kiếm

Use Case (6) Kết thúc

3.2.5 Usecase đăng nhập ( ADMIN)

- Tóm t t ắ

Actor Admin là người sử dụng Use Case này Use Case này được sử dụng để

thực hi n chệ ức năng đăng nhập vào hệ ống cth ủa Admin Sau khi đăng nhập vào hệ thống, trang qu n tr s hi n th và Admin s s dả ị ẽ ể ị ẽ ử ụng được các chức năng như quản

3.4.3 B ng DONDATHANG ả

Bảng DONDATHANG 3.4.4 B ng Du_Lieu ả

Bảng Du_Lieu 3.4.5 B ng Hang_ao ả

Bảng hang_ao

3.5 Mô hình Class Diagram

CHƯƠNG 4: XÂY DỰNG WEBSITE BÁN ÁO ONEPIECE SHOP

4.1 Giao diện trang chủ

 Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩm nổi bật và mới nh t ấ

 Trong giao diện cho người dùng, ch n ki u hi n th t ng theo Lo i S n Phọ ể ể ị ừ ạ ả ẩm.

 Mô tả chức năng: Trang này cho phép người dùng xem thông tin s n phả ẩm ngoài ra còn có th s các menu dể ử ọc,ngang để sang trang khác,

Hình 1.a: Giao di n trang ch ệ ủ

Hình 1.b: Giao diện trang chủ

Trang web được chia làm 7 phần:

- Phần 1: Logo c a trang web ủ

- Phần 2 - Menu ngang: Bao g m các m c: trang ch , gi i thi u, liên hồ ụ ủ ớ ệ ệ, đăng ký, đăng nhập,quản lý Mỗi danh mục liên kết đến một trang với nội dung khác nhau

4.2 Giao diện trang giới thiệu

 Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát về

shop, lịch sử hình thành và phát triển, định hướng phát triển trong tương lai

4.3 Giao diện trang liên hệ

 Mục đích: Trang này m c đích đụ ể khách hàng có thể liên lạc với shop

 Chức năng: Trong giao diện này cho phép người dùng g i những thông tin v ử ềsản phẩm, thái độ phục vụ, cũng như phản h i nh ng sai ph m c a nhân viên v ồ ữ ạ ủ ề shop

Hình 3: Giao diện trang liên hệ