báo cáo trang web kinh doanh đồ thể thao và dụng cụ bóng rổ

CHUONG 1: TONG QUAN VE DE TAI WEBSITE 1.1/Trinh bay khao sat website lién quan Cac trang web tham khao: trang web cua Nike, Adidas, 1.2/Ly do chon dé tai Ngày nay với sự phát triển của

DAI HOC QUOC GIA THANH PHO HO CHI MINH

TRUONG DAI HOC KINH TE - LUAT

KHOA HE THONG THONG TIN

MON HOC: THIET KE VA LAP TRINH

WEB KINH DOANH 1

TRANG WEB KINH DOANH DO THE THAO

Muc luc CHUONG 1: TONG QUAN VE DE TAI WEBSITE ccsscccssesssessssesstesseesseeseeseeees 5

1.1/Irinh bày khảo sát website liền quan 2G Gv 5

1.2/Lý do chọn đề tài - 5-52 c5 St 2x ETxEExEEEE111111111 111111 re 5

1.3.1/Đối với khách hàng - 2-2-5 tt 2x 2E E2 E211 crrree 6

1.3.2/Đối với các thành viên trong nhóm - 255252 St veEzxererrcrrrrcee 6 1.4/Công nghệ sử dụng (các công nghệ sử dụng để thiết kế, xây dựng và triển khai

121 ố ẻ ố ẻ 6 1.4.1/Hypertext Markup Language (HTIML): - 55 S Sàn 7 1.4.2/Cascading Style Sheets (CSS): HH HH He 8 1.4.3/Javascriptf (JŠ): - càng TH Ho TT cv re 9 1.4.4/Môi trường phát triển và các phần mềm được sử dụng: - 9 1.4.5CSS framework — BuÌIma - - G <+ 1n ng ngư 9 1.4.6/Môi trường INode - - HH ng ng ng 10 1.4.7/Cơ sở dữ liệu Mongodb - sọ ghnnHg ng n ng rh 10

2.1/Layout Trang Chủ - Ăn in 12 2.2/Layout trang Sản phẩm, Sản phẩm mới, Khuyến mãi . -5- 13 2.3/Layout trang Chỉ tiết sản phẩm - 2 22522 ‡EeEerkerxerkrrrrrrrrrree 14 2.4/Lay out trang Á min - - < + S1 in no TT nh vp 15

3.1/Sifemap của Ww€SIÍÉ€ «kh no HH To TH ke 16 3.2/Các trang chính - - «+ so Th kr 17 3.2.1/Trang chủ - - - - - se ng HT TT TC TH 17 3.2.2/Trang Đăng nhập - - + + + 1 nhọ nh ng 18 3.2.3/Trang Sản phẩm mới - 2 +22 S2 ©2x+S‡ExeEEeExeExerkrrkrrkrrrrrrrrrrrrrrrrree 19

ky vi 8 0, T5 6 dAH 21

3.2.8/Trang “Về chúng tôi” - - 5c + Sx9xcxe2x E2 EEEEEExEEererkererkererrrree 23 3.2.7/Trang Giỏ hàng - - Án HT TT TT nh tp 24 3.2.9/Irang Admin (Back nd) - 2Á Sàn ng 26 3.2.10/Giao diện trên m0 biÌÏ€ - + + nọ ng ng 28

3.2.9/Một số đoạn code tiêu biếu 5c 5c ctectttetkrrkrrrerrrrrerrrrrrvee 35

3.4/Dưa website lên h0S( - sàn TH TH nh nọ nh ng 43 3.4.1/Sơ lược về Herokuajpp - ¿- 5-5555 tSxEcE2kxereExerkerxrrkerkrrrrrrrrrrrree 43

4.1/Kết quả đạt được so với mục tiêu ban đầu 55-55 c7cccccececserecrs 45 4.2/Giải pháp khắc phục những vẫn đề chưa đạt -7- 5-5555 S5 c5 sec 45 K0 08) /1 80) nh 6 AỤAH,.H.HHAH , 46

CHƯƠNG 5: DANH MỤC THAM KHẢO -. 5-55 Sxccxerxerxrrrrrrrrreree 47

5.1/Các danh mục tham khảO - + Ăn nh nh ke 47

BANG PHAN CONG, GIOI THIEU CAC THANH VIEN TRONG NHOM

VA LICH LAM VIEC CUA NHOM VE DO AN

2 Hoàng Kỳ Anh K184060776 aa cbsite thoyat tink cho

Lập trình cho website, lên ý

3 | Hoàng Nguyễn Minh Du K184060779 tưởng chính, tìm kiếm hình

ảnh, thuyết trình Thuyết trình, góp y website,

thuyết trình

Đảng giới thiệu và phân công công việc của nhóm

Số lần họp nhóm Địa điềm họp nhóm Nội dung chính

2 Thư viện UEL Thao luận ý tưởng

7 Quán cafe Triên khai công việc

1 Khu tự học Thảo luận

CHUONG 1: TONG QUAN VE DE TAI WEBSITE

1.1/Trinh bay khao sat website lién quan

Cac trang web tham khao: trang web cua Nike, Adidas,

1.2/Ly do chon dé tai

Ngày nay với sự phát triển của xu hướng công nghệ 4.0, thương mại dần được toàn cầu hóa, công nghệ cao và các mô hình kinh doanh mới được phát triển đặc biệt là sự phát

triên Thương mại điện tử Đối với doanh nghiệp, Thương mại điện tử góp phần hình

thành những mô hình kinh doanh mới, tăng doanh thu, giảm chi phí, nâng cao hiệu qua kinh doanh và mở ra một thị trường rộng lớn với mọi đối tượng khách hàng trong và ngoài nước Đối với người tiêu dùng, Thương mại điện tử giúp người mua chỉ ngồi tại

nhà mà vẫn có thẻ lựa chọn hàng hóa, dịch vụ trên các thị trường ở mọi nơi trên thế giới bằng một vài động táckích chuột Thương mại điện tử là một trong những động lực quan

trọng thúc đây sự phát triển kinh tế Nhờ có Thương mại điện tử mà các hoạt động

thương mại trở nên thuận tiện hơn cho cả doanh nghiệp và khách hàng Theo báo cáo về Chi sé Thương mại điện tử (EBI) tại Việt Nam của Hiệp hội Thương mại điện tử Việt

Nam (VECOM), cho thấy tốc độ tăng trưởng năm 2017 so với năm trước ước tính trên 25% Nhiều doanh nghiệp cho biết tốc độ tang trưởng năm 2018 sẽ duy trì ở mức tương

tự Tốc độ tăng trưởng trong một số lĩnh vực cụ thể rất ngoạn mục Đối với lĩnh vực bán

lẻ trực tuyến, thông tin từ hàng nghìn website thương mại điện tử cho thấy tỷ lệ tăng trưởng doanh thu năm 2017 tăng 35% Khảo sát gián tiếp qua một số doanh nghiệp chuyển phát hàng đầu cho thấy tốc độ tăng trưởng doanh thu từ dịch vụ chuyên phát từ 62% đến 200% Từ các tập đoàn lớn đến các công ty nhỏ, hay các chủ cửa hàng online

đều bắt đầu có cho mình một website riêng để việc kinh doanh đươc thuận lợi hơn Tác

dụng của website bán hàng trong việc tăng doanh thu, thu hút khách hàng là không thê

phủ nhận Nhằm phục vụ nhu cầu mua sắm dụng cụ thể thao nói chung và đặc biệt là môn bóng rồ nói riêng hiện đang dần được hồ biến ở Việt Nam, đặc biệt là các trường học,

nhóm chúng em xin chon dé tài “Trang web kinh doanh đồ thẻ thao và dụng cụ bóng rổ”

1.3/Mục tiêu đề tài

1.3.1/Đối với khách hàng

Giúp cho các vận động viên, người mới bắt đầu, học sinh, sinh viên, có thể tiếp cận được việc mua sắm dụng cụ cho môn thê thao này một cách dễ dàng, nhanh chóng và hiệu quả Giao diện trang web đơn giản, dễ sử dụng, cung cấp cho khách hàng những sản phẩm

chất lượng với giả cả hợp lí vừa túi tiền

1.3.2/D6i với các thành viên trong nhóm

Thực hiện đồ án trang web kinh doanh đồ thể thao và dụng cụ chơi bóng rô vận dụng những kiến thức đang học ở môn “Thiết kế và lập trình website kinh doanh I” cũng như

tự tìm hiểu và áp dụng những kiến thức cần thiết bên ngoài Qua đó đó cái nhìn tổng quan

về hệ thống một website và trải nghiệm toàn bộ quá trình thiết kế và xây dựng website Bên cạnh đó chúng tôi cũng có cơ hội rèn luện những kỹ năng mềm cân thiết cho cả việc

học tập và làm việc sau này:

® Ky nang làm việc nhóm, quản lý nhóm

® Kỹ năng phân tích vấn đề

® Kỹ năng tự học, tự nghiên cứu

* - Kỹ năng quản lý tiến độ và thời gian

¢ KY nang thuyết trình, thực hiện powerpoint, viết bao cao

1.4/Công nghệ sử dụng (các công nghệ sử dụng để thiết kế, xây dựng và triển khai website)

Các công nghệ được sử dụng trong quá trình phát triển website

Giao điện người dùng

¢ Hypertext Markup Language (HTML)

¢ Cascading Style Sheets (CSS)

1.4.1/Hypertext Markup Language (HTML):

Ngôn ngữ đánh dấu siêu văn bản — Ngôn ngữ cơ bản nhất để xây dựng các trang web HTML sử dụng các tập ký hiệu đánh dấu thường được gọi là các thẻ (tags) để định dạng

cách hiền thị dữ liệu

Các trình duyệt thường không báo lỗi cú pháp cho ngôn ngữ HTML Nếu viết sai cú pháp

chỉ dẫn đến kết quả hiền thị không đúng với dự định

Tập tin HTML có nội dung dưới dạng text bao gồm các thẻ (tags) nhỏ Các thẻ hiển thị

nói cho trình duyệt biết nó phải hiển thị trang đó như thế nào

HTML

Figure 1 Ngén ngtt HTML

1.4.2/Cascading Style Sheets (CSS):

Được dùng đề miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML

Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiều dáng

(chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web

được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ đàng cho việc cập nhật nội dung

Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau

Figure 2 Ngén ngit CSS

1.4.3/Javascript (JS):

Javascript (viet tat 1a js) là một ngôn ngữ lập trình mang đầy đủ tính năng của một ngôn

ngữ lập trình động mà khi nó được áp dụng vào một tài liệu HTML, nó có thé dem lai

khả năng tương tác động trên các trang web rất nhiều môi trường phi trình duyệt khác cũng sử dụng ngôn ngữ này, như là Node.Js hay Apache CouchDB và Adobe Acrobat

Figure 3 Ngén ngit Javascript

1.4.4/Môi trường phát triển và các phần mềm được sử dụng:

Phần mềm lập trình được nhóm chúng em sử dụng là Visual Studio Code (VSC) Visual

Studio Code là một trình biên tập mã được phát triển bởi Microsoft dành cho Windows,

Linux và macOS Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tu hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nó cũng cho phép tùy chỉnh,

do đó, người dùng có thê thay đối theme, phím tắt, và cá tùy chọn khác

Visual Studio Code

1.4.6/Môi trường Node

Node.js là một hệ thông phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web Chương trình được viết bằng JavaScript, sử dụng

kỹ thuật điều khiến theo sự kiện, nhập/xuất không đồng bộ để tối thiêu tong chi phi và tối

đa khả năng mở rộng Node.js bao gồm có V8 JavaScript engine của Google, libUV, và

vài thư viện khác

S

1.4.7/Cơ sở dữ liệu Mongodb

MongoDB la m6t database hung tai ligu (document), mot dang NoSQL database Vi thé, MongoDB sé tranh cau tric table-based cua relational database đề thích ứng với các tai liệu như JSON có mét schema rat linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các

document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn

sẽ rất nhanh

} mongo

ee)

10

CHUONG 2: THIET KE LAYOUT WEBSITE

2.1/Layout Trang chu

2.2/Layout trang Sản phẩm, Sản phẩm mới, Khuyến mãi

Figưe 5 Layout trang Sản phẩm, Sản phẩm mới, Khuyến mãi

13

2.3/Layout trang Chi tiét san pham

Figure 6 Layout trang Chỉ tiết sản phẩm

2.4/Layout trang Admin

Figure 7 Layout Trang Admin

15

CHUONG 3: XAY DUNG VA TRIEN KHAI WEBSITE

3.1/Sitemap cua website

Website bao gồm một Trang chủ và 7 trang chính Trong mỗi trang chính được chia thành

nhiều trang nhỏ hơn, được thê hiện thông qua sitemap dưới đây

3.2/Cac trang chinh

3.2.1/Trang chủ

Shop 1104 ;

GÀ.) ty ee

Figure 9 Giao dién trang chu

1184 Sản phẩm mới Sảnphẩm Khuyến mã Bài viết /ề chúng tôi Q 4 © Bais

Quà tặng 1104SS

Một món quả vô củng ý nghĩa cho bất kì ai nhận lược hay thậm chí là chính bạn

Figure 10 Giao diện trang chủ

17

Figure 11 Giao điện Trang chu

3.2.2/Trang Dang nhap

Để giúp khách hàng thuận tiện hơn trong việc nhận các thông tin về sản phẩm, ưu đãi cũng như các đợt khuyên mãi, chúng em đã tạo ra chức năng đăng nhập

Trở thành Đăng nhập thành viên

để được hưởng nhiều

ưu đãi nhất

Figure 12 Giao dién trang déng nhdp

18

3.2.3/Trang Sản phẩm mới

Là trang cập nhật các sản phâm mới nhất của shop, khách hàng có thê lựa chọn theo mức gia, mau, size

1184 Sản phẩm mớ Sản phim Khuyến mãi Bài viết Vẽ chúng tôi 4 © Bait

Giày Quần áo Phụ kiện

Sản phẩm mới

Hang ¥ 9 Màu ¥ Mức giá 9 Sắp xếp theo v Ap dung

Figưe 13 Giao diện trang "Sản phẩm mới"

3.2.5/Trang Khuyến mãi

Trang hiện thị các sản phẩm đang được khuyến mãi vào các dịp lễ, các mùa trong năm

1194 Sản phẩm mới Sản phẩm Khuyến mãi Về chúng tôi Q ze T Giỏ(0)

Giảm 10% cho đơn 864i trả trong 30 Vận chuyển toàn

đầu tiền ngày quốc Thông tin sản phẩm +

Figure 16 Giao diện trang chỉ tiết sản phẩm

20

Figwe 17 Giao diện trang chỉ tiết sản phẩm

3.2.6/Trang Bài viết

T1#4 Sản phẩm mới Sản phẩm Khuyến mã Bài viết Về chúng tôi Q 4 © Mee(o

Air Jordan | — Lịch sử hình thành và phát triển

1194 Sản phẩm mới Sảnphẩm Khuyếnmãi Bàiviết — Về chúng tôi Q 4 © WGb(0)

Air Jordan là thương hiệu giày dép vả trang thiết bị thể thao được thành lập, thiết kế và sản xuất

riêng dành riêng cho Michael Jordan bởi một nhánh của Nike có tên thương mại là “Jordan |

Brand” Bài viết sẽ chỉ đề cập đến lịch sử ra đời các dòng giày Jordan chính, có số lượng tiêu thụ

cao và luôn tạo cơn sốt mỗi khi được ra mắt ( heat ) Các dòng giày Jordan thường được viết tắt là

3s, AJ, ví dụ Air Jordan 1 sẽ gọi là J1's hoặc 1s hoặc AJ 1, chân thành khuyên nền dừng việc viết tắt

Jordan la JD vi nghe khá là củ chuối, giống như phiên âm Jordan thành Jo-Đăn và viết tắt là JD vay

THỜI TRANG BÓNG RỔ - XU HƯỚNG MỚI CỦA

GIỚI TRẺ HIỆN NAY

Figư 18 Giao diện Trang Bài viết

3.2.8/Trang “Về chúng tôi”

Trang giới thiệu thông tin về shop, đội ngũ nhân viên

Q 29 MWee(t)

11%4 Sản phẩm mới Sảnphẩm Khuyếnmäi Bàiviết Về chúng tôi

Giày Quần áo Phụ kiện

Đội ngũ của chúng tôi

Hoàng Du gz Thanh Dat 1 Kỳ Anh Hoài Đức

@hodu26 i @thanhdat99 @kyanhoo @hoaiduc97

Lên ý tưởng, lập trình và chỉnh Viết báo cáo và tham Thiết kế, tạo nội dung và cố Thuyết trình chính và cố

sửa báo cáo @®dev #reports s, #consult van@design #consult vane nsult

#nightowl 1 #goodsleep #enoughs

02:00 AM - 1 Jan 2021 01:00 AM - 1 Jan 2021 11:00 PM - 31 Dec 2020 00:00 PM - 1 Jan 2021

Figure 19 Giao dién trang "Về chúng tôi"

23

3.2.7/Irang Gió hàng

Giỏ hàng là nơi khách hàng có thể check lại hoặc điều chính các sản pham ma minh dự

định đặt mua về số lượng, size cũng như màu sắc của sản phâm đó và tiễn hành đặt hàng

1194 Sản phẩm mới Sản phẩm Khuyến mã Vẽ chúng tôi Q 29 & Gid( 2)

Giay Quần áo Phụ kiện

Co 2 san pham trong gio nang cua bạn