Báo cáo thiết kế web Đề tài xây dựng website shop thới trang

Việc các doanh nghiệp dang dần hoàn thiện bộ máy tổ chức một cách linh hoạt nhất và việc ứng dụng công nghệ thông tin vào mọi hoạt động kinh doanh của doanh nghiệp là một việc làm tất yế

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYEN THONG VIET HAN

Khoa Khoa Học Máy Tinh

BAO CAO THIET KE WEB

DE TAI: XAY DUNG WEBSITE SHOP THOI TRANG

Sinh viên thực hiện : NGO MINH PHU

BUI VAN NHAT

DAO LE QUOC KHANH Giảng viên hướng dan: Ths LUONG KHANH TY

Đà Nẵng, tháng 6 năm 2022

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYEN THONG VIET HAN

Khoa Khoa Học Máy Tinh

THIẾT KẾ WEB

WEBSITE SHOP THỜI TRANG

Đà Nẵng, tháng 6 năm 2022

MO DAU

Ngày nay cùng với sự bùng nỗ cua Internet, ngay cang mở rộng ở khắp nơi trên thế giới, chỉ cần máy tính kết nối Internet thì việc sử dụng nguồn tài nguyên này là vô cùng phong phú

Việc các doanh nghiệp dang dần hoàn thiện bộ máy tổ chức một cách linh hoạt nhất và việc ứng dụng công nghệ thông tin vào mọi hoạt động kinh doanh của doanh nghiệp là một việc làm tất yếu, một trone những cải tiến đó là doanh nghiệp đã chủ động xây dựng những trang thông tin của riêng mình đề quảng bá hình ảnh của công ty, mặt khác là đề kinh doanh trực tuyến, áp dụng thương mại điện tử vào trong thương mại

Và một trong những công cụ hữu ích nhất cho việc phát triển này đó là xây dựng được một dự án công nghệ thông tin hoàn chỉnh, đáp ứng được các nhu câu của người dùng

Đối với ngành thời trane, việc ứng dụng công nghệ thông tin cũng giúp cho các shop xử lý công việc chính xác, hiệu quả, tiết kiệm chỉ phí, quảng bá

hình ảnh shop rộng rãi trong nước và quốc tế Từ những kiến thức được học, em

đã tìm hiểu về đề tài “Xây dựng trang web shop thời trang”

LỜI CẢM ƠN

Đề hoàn thành để tài này, em xin gửi lời cảm ơn chân thành đến thầy giáo Lương Khánh Tý - giảng viên Khoa Công nghệ thông tin và Truyền thông (CNTT & TT) Đại học Đà Nẵng - Người hướng dẫn chính - đã tận tình chỉ bảo và hướng dẫn em

để hoàn thành đồ án

Em cũng xin cảm ơn thầy cô Khoa CNTT & TT đại học Đà Nẵng đã truyền đạt cho em kiến thức cũng như kỹ năng đề hoàn thành bài đồ án nay

Trong quá trình làm đồ án còn nhiều thiêu sót, em rât mong nhận được sự chỉ bảo, đóng góp ý kiên của các thây cô đề em có điêu kiện bô sung, khắc phục những hạn chê của bài đồ án cơ sở này

Em xin chân thành cảm ơn!

Đà Nẵng, tháng 6 năm 2022

NHẬN XÉT

(Của giảng viên hướng dẫn)

CHƯƠNG I1: GIỚI THIỆU -¿-22222222222222223222212222222 + l

1.1 Tổng quan 2S St SE 1211211 121121 1111 11 11c re 1 1.1.1 Lí do chọn để tải - 5-2222 22221222127112112221227 112.1 ae 1 1.1.2 Mục tiêu để tải 0: 222222211 2111221271127111121121 11c ee 1 1.2 Phương pháp, kết quả - 2-5 S1 SE1221511211 111111211 1121221 1g tr 1 1.2.1 Phương pháp thực hiện - G22 22212221 2211121 1211112115118 re 1 1.2.2 Kết À|);N:;1Nt11:9,vpbiiiaaiiaididiidddi 1

CHƯƠNG2_ CƠ SỞ LÝ THUYÊT 2:-©22¿22222212221223222122222222 4

2.1 Cơ sở lý luận và thực tiễn - - s1 S1 1111121 12111111 11112121111 rca 4

2.1.1 Khái niệm websife 1 0k KHE T TT 111kg 4 2.1.2 Có hai loại web: Web tĩnh và Web động c2 2nnceeree 4 2.1.3 Lịch sử hình thành và phát triển của websife se se ccczsze2 4 CHUGNG3 PHƯƠNG PHÁP NGHIÊN CỨU ¿-22:222c22zc2+ 7

LL GiGi thidu na anỪDỖỶ 7 3.1.1 Cac phuong phap céng nghé str dung trong d6 an 7 3.1.2 Hình thức thê hiện đồ án: -2¿©22¿2222222+222E222E22EEExrErxrrrrree 7 3.1.3 Quy m6 d6 ổn ai iẳI 7 3.2 Phương pháp nghiên cửu - - 12c 22211211121 1121 12111211821 81 11182111 ke 7 3.2.1 Phương pháp 1: Nghiên cứu thực tẾ s- 5s 2sctE 21211122 te 7 3.2.2 Phương pháp 2: Doc và tham khảo sách báo - c 522cc 8 3.2.3 Phương pháp 3: Tham khảo trên Internet ¿55-2552 s+ c2 8 CHƯƠNG4 _ TRIÊN KHAI XÂY DỰNG 222: 22222122 sree 9 Code trên Visual studio code : - - 0 2111121112211 1211111221111 111221 1111k gà 9

MỤC LỤC

DANH MỤC HÌN

si 1 Trang Chu —.- 2 n1 VN) 00 p:HaadiddddảỶảỶảỶảỶ 2

Hinh 4 Huong dan dat 0 — À 3 Hình 6 Bồ cục rõ ràng, đơn giản bắt mắt s5 5c 21211 1211112121121 211 c2 7

si 00.91 11 Hinh 8 Thanh menu - (22 222223121323 1121 1321151115115 51 119211111115 11 111821 ra 11 Hình 9 Code đăng nhập - 002001211211 12112111 101120111 1111111111 112221118111 g 12 Y

DANH MỤC CỤM TỪ VIẾT TẮT

tắt

CNPM CNTT DHDN

CHUONG 1: GIOI THIEU

1.1 Tong quan

1.1.1 Lido chọn đề tài

- Ngày nay, bán hàng trực tuyến đã và đang được phô biến rộng rãi trên thế giới, hình thức bán hàng này không chỉ giúp cho nhà phân phối sản phẩm tiết kiệm được nhiều chi phí về quản lý, kho bãi mà còn giúp cho người tiêu dùng cập nhập thông tin về sản phẩm một cách nhanh chóng, đầy đủ, tiết kiệm chỉ phí, thời gian đi lại Thay vì một phòng trưng bày thì giờ đây trang web sẽ hiền thi tất cả các sản phẩm và khách hàng có thể đặt mua bắt cứ lúc nào và ở bat ctr noi đâu Cùng với một giao diện thân thiện, trang web sẽ giúp khách hàng dễ dàng lựa chọn và mua những sản pham minh thich

1.1.2 Mục tiêu đề tài

Với những yếu tổ thuận lợi bên trong và bên ngoài, cùng với tiềm năng phát triên thị trường kinh doanh bên website ở Việt Nam chính là cơ sở dé chúng em tin rằng website shop thời trang Degrey

sẽ trở thành:

® - Nơi giao tiếp hiệu quả với khách hàng

e _ Cung cấp cho khách hàng cơ hội mua hàng hóa và sử dụng dịch vụ với sự trợ gIÚp của hệ thông thanh toán điện tử mà không cần rời khỏi nhà

° Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên

về các hoạt động của công ty và phạm vi dịch vụ được cung cấp;

® Tăng cơ sở khách hàng hiện có, tiếp cận khách hàng mới và tăng chuyên đổi thành khách hàng tiềm năng

1.2 Phương pháp, kết quả

1.2.1 Phương pháp thực hiện

- _ Đọc xem tài liệu, và tìm hiễu các mã nguồn mở thiết kế một giao diện phù hợp với yêu cầu đặt ra của trang web

- _ Tham khảo trên mạng và qua sách báo Tìm kiếm những thông tin

liên quan đến thời trang hiện nay

- Nghiên cứu thực tê để có thế nắm vững các vấn đề liên quan đến đối tượng

- _ Thu thập thông tin từ nhiều nguồn khác nhau, tổng hợp va phân tích, rút ra những yếu tô cần thiết để đưa vào đỗ án

1.2.2 Kết quả đạt được

- Nhóm em bước đầu đã xây dựng được một trang web về thoi trang mang tên Shop thời trang Degrey

CIR G đwesekonsoa -Ð Ð “lo ® Giữ ®% g

DEG3EU' Trang thd San phim Giớithệu Sự kiêamớishất Hệ hổng còaháng Hướng đẩn đật hàng a am

-=

az 2, L ý : s a

Hinh 1 Trang cha

- Em đã tạo nó những tính năng mà một trang web bán hàng cần có như giới thiệu, tìm kiêm, giỏ hàng, sản phẩm, hồ trợ

Đl@Gn0es xiBw+œ XD paame x# -~- 8 Xx

DE€3EU' lagechù Sảnghẩm Gidithidu Sựki&nmớinhểẻ Hệthổngcùahing Hướng dan dat hang Qa wy

-

Tất cả sản phẩm

Tim teen Q Trang cd / Dat hàng trước: Hiện * đến 12 của 163 sản phi

TAT CA SAN PHAM | ALL *

40 | CLOTHES B QUẦN | PANTS

PHY KIEN | ACCESSCRIES:

Giá Tiên 100.000 - 600.000

+s trie B@Oonpoupegsax ^Đ ẨM 99149 „oan ©

DEGIEY’ Trang chd Sanpham Giihiệu Sykiénméinhét Hệthổngcừahing Hưởngdẫndithàng ÔC th cÓ

=

+ Te erie B@Oonoueasa x AGM PUM som O

Hình 3 Giới thiệu

- Em cũng tạo cho trang web một trang hướng dẫn khách hàng cách thức đặt hàng và thanh toán

ˆ^ lạ @ G'°% ®@ ©

Trang chủ Đảnphẩm Giớithiệu hiện mớinhk Hệthốngcjnhang Hướng dẫn đặt hàng a œ 'Ð

Hướng dẫn mua hàng tại degrey.vn _

'Qưy khách vui lòng liên hệ nếu đơn hàng gặp vẫn đỏ:

Ho§ng: 0336311117

sản phẩm, địa chi

'Chísh sạch đổi hàng: hifps:!/degrey:vnpagesichinh-sach-doi-hang ~

Hình 4 Hướng dẫn đặt hàng

CHƯƠNG2 CƠ SỞ LÝ THUYẾT

2.1 Khái niệm website

Website (tiéng Anh: website), con goi la trang web (co thé nhằm lẫn với

"web page") hoặc trang mạng, là một tập hợp trang web, thường chỉ nằm

trong mộttên miền hoặc tên miền phụ trên World Wide Web cua Internet

Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP Trane mạng có thế được xây dựng từ các tệp tin HTML (trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (trang mạng động)

Trang mạng có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP, ASP.NET, Java, Ruby on Rails, Perl )

Website được giao tiếp và hiển thị cho người dùng truy cập bằng các phần mềm được gọi là trình duyệt website Một sô trình duyệt website nỗi tiếng có thé ké đến như Internet Explorer được cải đặt mặc định vào mỗi máy tính cài

hệ điêu hành windows va được thay thê bởi Edge trên Windows 10 hay Chrome được phát triền bởi Google và Firefox được phát triên bởi MozilHa

Đề một website hoạt động cần 3 yếu tố:

- _ Cần có tên miễn

- Nơi lưu trữ website

- Nội dung các trang web hoặc cơ sở dữ liệu thông tin

2.2 Có hai loại web: Web tĩnh và Web động:

- Website tinh la website mà người quản trị (những người không phải

là lập trình viên) không thể tùy ý thay đổi nội dung và hình ảnh mà phải cần kiến thức về HTML cơ bản Website tĩnh được viết hoản

toàn dựa trên nền tảng HTIML CSSvà thêm các hiệu ứng

từ Javascript nếu muốn

- Website động là website được viết kèm theo một bộ công cụ quản tri dé tùy biến nội dung dành cho webmaster (người quản trị) có thể

dễ dàng thay đổi nội dung, hinh anh Website động được thiét ké bởi các lập trình viên để làm sao cho phép website có thê thay đổi được nội dung thường xuyên Một số công nghệ, ngôn ngữ để xây dựng website động bao gồm PHP, ASP.NET, Java

2.3 Lịch sử hình thành và phát triển của website

Nhiều người vẫn thường có thói quen sử dụng hai từ World wide web và Internet thay thế cho nhau, nhưng thực ra đây lại là hai khái nệm hoàn toàn khác nhau Internet có nghĩa là một “mạng lưới toàn cầu của các mạng lưới”, liên kết hàng triệu các máy tính cùng chia sẻ thông tin thông qua một tập hợp những giao thức chia sẻ phần mềm Ngược lại, có các ứng dụng lại sử dụng mạng Internet

như một phương tiện đề giao tiếp như thư điện tử, trò chuyện toàn cầu và mạng toàn cầu

Lịch sử của Web

Web xuất hiện lần đầu tiên vào năm 1989 khi nhà vật ly hoc Tim Berners-Lee muốn tìm ra một cách thức giúp các nhà khoa học trao đối tài liệu nghiên cứu thông qua Internet Berners-Lee muốn rằng đó không chỉ là cách in các văn bản trực tiếp trên Internet mà còn là cách hiển thị các đường dẫn để đưa người đọc đến các phần khác của tài liệu, hoặc thậm chí là dẫn đến các tài liệu được đặt ở một nơi khác trên mạng Internet Điều đó có nghĩa là tạo nên một hệ thống tài liệu được kết nối toàn cầu

Thực ra thì Berners-Lee không phải là người đưa ra ý tưởng này đầu tiên Ngay

từ những năm 40, các nhà nghiên cứu khác cũng đã từng mô tả một hệ thống tương tự, và vào khoảng những năm 80, các ứng dụng như Ngôn ngữ đánh dấu tông quát chuẩn (SGML) cũng đã sử dụng một tập hợp phức tạp các siêu liên kết

đề kết nối các tài liệu lại với nhau Nhưng Berners-Lee đã phát triển một hệ thống

mà trong đó không đòi hỏi phải sử dụng các phần mềm mắc tiền hay những kỹ năng lập trình cao Ông đã phát minh ra một giao thức cơ bản cho việc chuyên tải các tài liệu lên mạng Internet, sọi là Giao thức truyền siêu van ban (HTTP) cũng như phát minh ra một bộ đơn giản các lệnh gọi là Ngôn ngữ đánh dấu siêu văn bản (HTML) đề mô tả cấu trúc của một tài liệu

Web da bung nỗ vào năm 1993 khi một sinh viên tốt nghiệp trường Đại học Illinois tên 14 Mare Andreessen phat triển thành công một phần mềm giúp hiên thị các trane Web dưới dạng đồ họa Phần mềm của Andreessen, được gọi là một

“trình duyệt”, cho phép người sử dụng có thê hiến thị hình ảnh cũng như văn bản trên các trang web Kết quả là Web đã lớn mạnh nhanh chóng, vượt ra khỏi cả pham vi sử dụng nhỏ hẹp ban đầu của các nhà khoa học Sau đó Andreessen đã tiếp tục đồng sáng lập Netscape Communications, đánh dấu cho sự khởi đầu của cuộc cách mạng Internet

Lí do gì làm cho Web thành công đến như vậy?

Web phát triển như vậy không chỉ vì nó để sử dụng mà còn vì bất cứ ai cũng có thể thực hiện trang Web riêng của họ Ngôn ngữ HTML cơ bản rất dễ học Nó sử dụng một tập hợp các đuôi đơn giản giúp mô tả các đầu đề, đoạn văn, danh sách, các bảng và các thành tố khác của một trang Web Mới đây, nhiều công ty đã phát triển phần mềm xử lý tự động hóa, làm cho việc học HTML trở nên không còn cần thiết nữa Nhờ đó, hàng triệu người với vốn kinh nghiệm ít ỏi cũng đã có thé lập trang Web cho riêng mình

Loi ich khi có website

Chi phí thấp so với các ấn phâm thông thường Thị trường mở rộng

Da dang hóa doanh thu

Phuc vu 24/7 va 365 ngay

Thuan tién

Thêm gia tri gia tang va hai long

Cai thién tin cay

Cơ hội tăng trưởng, đễ đàng nhận thông tin phản hồi.

CHƯƠNG3_ PHƯƠNG PHÁP NGHIÊN CỨU

3.1 Giới thiệu về đồ án

3.1.1 Các phương pháp công nghệ sử dụng trong đồ án

Thiết kế giao dién trang web trén nén tang Bootstrap va photoshop

Photoshop là phầm mén chinh sửa, cắt ghép hình ảnh, thiết kế các hiệu

ứng ảnh, còn Bootstrap giúp tạo giao diện web đẹp mắt với hiệu ứng sinh động

Website được code trên phần mềm Visual studio code là một phần mềm phô biến hiện nay giúp người dùng linh động, dễ dảng có thể tạo ra

website

Hình thức thể hiện đồ án:

Thiết kế Website có chiều rộng max, chiều dài phụ thuộc vào nội dung từng trang web Các trang web là các trang riêng biệt, có bố cục khá tương đồng, được liên kết với nhau Trang web tạo ấn tượng nhờ sự sắp xếp bố cục hình ảnh,đơn giản dễ đàng sử dụng Trọng tâm của web là trang chủ, các trang con phát triển dựa trên mô tuýp của trang chủ Các trang có tính đồng nhất và liên kết với nhau

DECTEY

oa ae oe 4 4

Áo kheác Degrey Thi Vang - AKOV fo Rhode Vai Ring -ARVT Áo Khoác Nắm Degrey - AKND Áo khoác Hoa Tién Den - RIB 480,000 VND 450.000 VND 450.009 VND

ee a

Hinh 5 Bé cục rõ rang, đơn giản bắt mắt

3.13 Quy mô đồ án

Trang web gồm 6 trang chính Mỗi trang có bố cục khá giống nhau, xuyên

suốt toàn bộ trang web Trang web không chỉ giới thiệu, mua bán mà còn cập nhật thông tin nhanh chóng về tin tức hay xu hướng thời trang từng npày

3.2

3.2.1

Phương pháp nghiên cứu

Phương pháp 1: Nghiên cứu thực tế

Em đã đi thực tế một số địa điểm, trải nghiém một số shop thời trang Vì

kiện không cho phép nên trong phương pháp này nhóm chúng em chưa

thực sự đúc kết được nhiều thông tin