Đồ án cơ sở 1 thiết kế website bán áo quần

Nhận được tính thiết thực của điều đó em đã nhận đề tài: “ Xây dựngwebsite thời trang” sử dụng ngôn ngữ HTML và CSS để đáp ứng nhu cầu đó.Mục đích đề tài là đáp ứng nhu cầu mua bán, xem

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

VIỆT HÀNKHOA KỸ THUẬT MÁY TÍNH



ĐỒ ÁN CƠ SỞ 1 THIẾT KẾ WEBSITE BÁN ÁO

QUẦN

SVTH: Đoàn Thanh Linh

Lớp: 22CE GVHD: Trần Thị Trà Vinh

Đà Nẵng, ngày…tháng…năm 2023

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

VIỆT HÀNKHOA KỸ THUẬT MÁY TÍNH



ĐỒ ÁN CƠ SỞ 1 THIẾT KẾ WEBSITE BÁN ÁO

QUẦN

SVTH: Đoàn Thanh Linh

Lớp: 22CE GVHD: Trần Thị Trà Vinh

Đà Nẵng, ngày…tháng…năm 2023

LỜI CẢM ƠN

Được sự giúp đỡ tận tình của ThS Trần Thị Trà Vinh trong việc giảng dạy và giảiđáp những lời thắc mắc của sinh viên chúng em Trong quá trình rèn luyện, học tậpchúng em đã tiếp thu những kiến thức quý báu của các thầy cô trong môi trường ĐạiHọc, cũng như những kinh nghiệm để bây giờ chúng em hoàn thành bài đồ án này mộtcách thuận lợi

Xin gửi lời cám ơn đến anh/chị khóa trên cùng với các bạn bè K22 đã luôn độngviên và đánh giá về bài đồ án này để chúng em có thể mài dũa tiếp thu nhiều điều tíchcực mới khi làm đồ án cuối kì này

Trong quá trình làm bài cũng gặp không ít khó khăn và nhận lại nhiều sự đánhgiá của mọi người nhưng nhờ sự đoàn kết của các bạn trong nhóm cũng như sự độngviên các bạn trong lớp đã góp phần giúp chúng em hoàn thành đề tài này đúng thờihạn

Xin chân thành cảm ơn!

NHẬN XÉT (Của giảng viên hướng dẫn)

Đà Nẵng, ngày…tháng…năm 2023

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

ThS Trần Thị Trà Vinh

MỤC LỤC

L I C M NỜ Ả Ơ 3

NH N XÉTẬ 4

M C L CỤ Ụ 5

DANH M C HÌNH NHỤ Ả 7

Chương 1: M Đầầuở 8

1.1 Bốối c nh th c hi n đềầ tàiả ự ệ 8

1.2 Đềầ xuầốt n i dung th c hi nộ ự ệ 8

1.3 Phương pháp 8

1.3.1 Phương pháp tri n khai th c hi n đềầ tàiể ự ệ 8

1.4 Đ c đi mặ ể 9

1.5 Ch c năngứ 9

1.5.1 Vềầ giao di nệ 9

1.5.2 u đi mƯ ể 10

1.5.3 Nhược đi mể 10

1.6 M t sốố website hi n cóộ ệ 10

1.6.1 Nowsaigon 10

1.6.2 The shirt you need 11

1.7 Kềốt quả 11

1.8 Ch c năngứ 11

Chương 2: C S Lý Thuyềốtơ ở 13

2.1 Khái ni m websiteệ 13

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

2.1.2 Có hai lo i web, web tnh và web đ ng:ạ ộ 13

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

2.2.1 L ch s c a Webị ử ủ 14

2.3 Lí do gì làm cho Web thành cống đềốn nh v y?ư ậ 15

2.4 L i ích khi có websiteợ 15

Chương 3: Phương Pháp Nghiền C uứ 16

3.1 Gi i thi u vềầ đốầ ánớ ệ 16

3.1.1 Các ph ương pháp cống ngh s d ng trong đốầ ánệ ử ụ 16

3.1.2 Hình th c th hi n đốầ ánứ ể ệ 17

3.1.3 Quy mố đốầ án 17

Chương 4: Tri n Khai Xầy D ngể ự 18

4.1.2 Trang đăng nh pậ 18

4.1.3 Trang gi i thi uớ ệ 19

4.1.4 Trang mua hang 19

4.1.5 Trang gi hàngỏ 19

4.2 Code trền VSCode 20

4.2.1 Trang chủ 20

4.2.2 Trang đăng nh pậ 21

Chương 5: KẾẾT LU N VÀ HẬ ƯỚNG PHÁT TRI NỂ 22

5.1 Kềốt lu nậ 22

5.1.1 Qua vi c làm đốầ án này, em xin đ a ra kềốt qu thu đệ ư ả ược nh sau:ư 22

5.1.2 Vềầ h n chềốạ 22

5.2 Hướng phát tri nể 22

DANH MỤC HÌNH ẢNH

Hình 1.1 Trang ch Nowsaigonủ 9

Hình 1.2 Trang ch The shirt you needủ 10

Hình 3.1 Photoshop 15

Hình 3.2 VSCode 15

Hình 4.1 Trang ch websiteủ 17

Hình 4.2 Trang đăng nh p websiteậ 17

Hình 4.3 Trang gi i thi u websiteớ ệ 18

Hình 4.4 Trang mua hàng website 18

Hình 4.5 Trang gi hàng websiteỏ 19

Hình 4.6 Code HTML trang ch websiteủ 19

Hình 4.7 Code CSS trang ch websiteủ 19

Hình 4.8 Code HTML trang đăng nh p websiteậ 20

ậ

Chương 1:

Chương 2: Mở Đầu 2.1 Bối cảnh thực hiện đề tài

Trên thị trường hiện nay có rất nhiều công ty cửa hàng buôn bán các loại hànghóa như điện thoại, máy tính, quần áo,… Chính vì vậy nhu cầu quảng bá hình ảnh củacông ty, cửa hàng ngày càng được đầu tư và mở rộng trên nhiều mặt Giới thiệu sảnphẩm rộng rãi ra công chúng và mở rộng thị trường là một phần tất yếu chiến lượcphát triển kinh doanh của công ty Với sự bùng nổ của internet, mỗi ngày có hàng trămtriệu người truy cập internet với nhu cầu tìm tin tức, mua bán một cách thuận tiện,nhanh chóng Nhận được tính thiết thực của điều đó em đã nhận đề tài: “ Xây dựngwebsite thời trang” sử dụng ngôn ngữ HTML và CSS để đáp ứng nhu cầu đó.Mục đích đề tài là đáp ứng nhu cầu mua bán, xem thông tin sản phẩm mới mộtcách nhanh chóng tiện lợi, an toàn

2.2 Đề xuất nội dung thực hiện

 Xây dựng website thời trang thiết thực nhằm giúp người dùng dễ dàng tìmkiếm được thông tin các dòng sản phẩm mà họ thắc mắc

 Xây dựng website cho phép người dùng mua hàng, đăng bài bán của mình trênwebsite một cách nhanh chóng và tiện lợi mà không cần các thủ tục phức tạp

 Xây dựng website có tốc độ tải trang nhanh chóng và hạn chế các thủ tục rườm

rà tốn thời gian

 Website đảm bảo bảo mật thông tin cá nhân của khách hàng Website côngkhai, minh bạch và cung cấp thông tin chính xác nhằm đem lại sự tin cậy chongười dùng

2.3 Phương pháp

2.3.1 Phương pháp triển khai thực hiện đề tài

 Trước tiên ta phải phân tích và thiết kế giao diện, hệ thống của website bằngphần mềm StarUML

 Dựa trên các kiến thức đã học, chúng ta sử dụng các ngôn ngữ HTML, CSS,JavaScript để xây dựng website.

 Tham khảo, tiếp thu ý kiến, thông tin từ giáo viên hướng dẫn để hoàn thiệnwebsite tốt hơn

 Tìm hiểu các website tương tự để rút ra lĩnh vực còn thiếu sót để bổ sung cũngnhư khắc phục các điểm còn hạn chế của website khác

2.4 Đặc điểm

Trang web có hướng dẫn rõ ràng, thanh menu điều hướng Nội dung trực quan.Website có đầy đủ các tính năng của một website mua và bán hàng Giao diện sẽ đượcxây dựng bắt mắt, đẹp giúp người dung cảm thấy thú vị khi sử dụng trang web Ngườidùng có thể tìm kiếm xem thông tin chi tiết của sản phẩm, xem đánh giá của kháchhàng hay trực tiếp đánh giá theo ý kiến riêng của mình Mỗi mặt hàng mà người dùngmuốn đăng bán sẽ phải chờ kiểm duyệt của admin trước khi đăng bán

2.5 Chức năng

2.5.1 Về giao diện

Phần trang chủ của website sẽ giới thiệu tổng quan về website Tại đây bạn cóthể xem được giờ làm việc hay địa chỉ của shop chúng tôi Người dùng sẽ xem đượcchi tiết giờ làm việc, địa chỉ cụ thể của shop, người dùng có thể biết được các xemđược các đối tác và khách hàng từ đó có thể tăng tính tin cậy về mặt hàng mà mìnhmuốn tham khảo Người dùng có thể xem chi tiết sản phẩm của món hàng mình muốn

từ đó đưa ra quyết định cho riêng mình Người dùng có thể đọc bình luận và đánh giá

về món hàng mà mình đã mua hay định mua Thông qua giỏ hàng người dùng có thểxem xét trước khi đưa ra quyết định

Trang web sẽ cập nhật những tin tức liên quan đến các sản phẩm và giá cả từ

đó giúp người dùng nắm bắt được thông tin một cách khách quan nhất

Để giúp hoàn thiện trang web thì trang web cung cấp các chức năng phản hồilại người quản trị hoặc người dùng có thể gửi những câu hỏi thông qua email trêntrang web

2.5.2 Ưu điểm

Giao diện hội tụ ba yếu tố độc đáo, tinh tế và hiện đại Hình ảnh sắc nét vàsống động Tốc độ tải trang web nhanh Website có thể tưởng thích với mọi thiết bị diđộng hay máy tính trên thị trường Ngoài ra trang web được thiết kế dễ dàng sử dụng

và tiện nâng cấp trong tương lai Website cũng được tích cực cơ chế bảo mật giúp đảmbảo các thông tin khách hàng không bị đánh cắp

Ưu điểm: giao diện của website đơn giản và hiện đại Hình ảnh sống động vàsắc nét Tốc độ tải trang cực nhanh Website tương thích mọi thiết bị di động phổ biếntrên thị trường Website được thiết kế dễ sử dụng, tiện nâng cấp trong tương lai.Website cung cấp nhiều chức năng và thông tin cho người dùng

Nhược điểm: các chức năng còn hạn chế

2.6.2 The shirt you need

Hình 1.2 Trang chủ The shirt you need

Về giao diện: trang web được xậy dựng với giao diện đơn giản và bố cục đơngiản Trang web chủ yếu cung cấp cho người dùng những thông tin của các loại xekhác nhau theo từng khu vực hoặc là toàn quốc

Ưu điểm: giao diện của website đơn giản Hình ảnh đẹp mắt và sắc nét Tốc độtải trang nhanh Website tương thích mọi thiết bị di động phổ biến trên thị trường.Website được thiết kế dễ sử dụng

Nhược điểm: các chức năng còn hạn chế

2.7 Kết quả

2.8 Chức năng

Giới thiệu tổng quan về website và các thương hiệu thời trang Cung cấp cáctính năng giúp người dùng có thể xem thông tin các sản phẩm từ các thương hiệu vàlưu lại các thông tin mà mình muốn xem sau Nếu người dùng tìm thấy một sản phẩmưng ý thì người dùng có thể mua nó thông qua những thủ tục được định sẵn, ngườidùng có thể đánh giá và bình luận cho nhiều sản phẩm trên trang web Trang web cũngcung cấp các phương thức đăng kí và đăng nhập giúp cho khách hàng tiện trong việctheo dõi hay cập nhật những chiếc xe trên trang web nhờ các email thông báo sẽ đượcgửi về cho người dùng Mọi thông tin của khách hàng đã đăng kí sẽ được bảo mật đểđảm bảo an toàn thông tin cho người dùng

Người dùng có thể xem được thông tin chi tiết về sản phẩm mà người dùngmuốn xem Ngoài ra người dùng cũng có thể xem được số lượng đánh giá của nhữngsản phẩm đó cũng như bình luận của những người dùng đã bình luận và đánh giátrước đó.

Chương 3: Cơ Sở Lý Thuyết 3.1 Khái niệm website

Website (tiếng Anh: website), còn gọi là trang web (có 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ột tên

miền hoặc tên miền phụ trên World Wide Web của Internet Một trang web là tậptin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP Trang 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ằngcá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ể đếnnhư Internet Explorer được cài đặt mặc định vào mỗi máy tính cài hệ điều hànhwindows và được thay thế bởi Edge trên Windows 10 hay Chrome được phát triển bởiGoogle và Firefox được phát triển bởi Mozilla

3.1.1 Để 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.1.2 Có hai loại web, web tĩnh và web động:

Website tĩnh là website mà người quản trị (những người không phải là lập trìnhviê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 HTML CSS và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 trị để tùybiến nội dung dành cho webmaster (người quản trị) có thể dễ dàng thay đổi nội dung,hình ảnh 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,

3.2 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 niệm hoàn toàn khácnhau 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àngtriệ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ươngtiện để giao tiếp như thư điện tử, trò chuyện toàn cầu và mạng toàn cầu

3.2.1 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 lý học Tim Berners-Leemuố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ôngqua 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ênInternet mà còn là cách hiển thị các đường dẫn để đưa người đọc đến các phần kháccủ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ạngInternet Đ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ệulại với nhau Nhưng Berners-Lee đã phát triển một hệ thống mà trong đó không đòihỏ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,gọi là Giao thức truyền siêu văn bản (HTTP) cũng như phát minh ra một bộ đơn giảncá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ộttài liệu Web đã bùng nổ vào năm 1993 khi một sinh viên tốt nghiệp trường Đại họcIllinois tên là Marc Andreessen phát triển thành công một phần mềm giúp hiển thị cáctrang Web dưới dạng đồ họa Phần mềm của Andreessen, được gọi là một “trìnhduyệ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áctrang web Kết quả là Web đã lớn mạnh nhanh chóng, vượt ra khỏi cả phạm 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ậpNetscape Communications, đánh dấu cho sự khởi đầu của cuộc cách mạng Internet.

3.3 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ó dễ 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ụngmộ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ầnmề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 choriêng mình

3.4 Lợi ích 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

 Đa dạng hóa doanh thu

 Phục vụ 24/7 và 365 ngày

 Thuận tiện

 Thêm giá trị gia tăng và hài lòng

 Cải thiện tin cậy

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



Chương 4: Phương Pháp Nghiên Cứu 4.1 Giới thiệu về đồ án

4.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 tảng Photoshop, Photoshop là phầm mềnchỉnh sửa, cắt ghép hình ảnh, thiết kế các hiệu ứng ảnh

Hình 3.3 Photoshop

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

Hình 3.4 VSCode

4.1.2 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ừngtrang web Các trang web là các trang riêng biệt, có bố cục khác nhau, được liên kếtvới nhau Trang web tạo ấn tượng nhờ sự sắp xếp bố cục hình ảnh, thông tin mới lạ,bắt mắt thu hút người xem Trọng tâm của web là trang chủ, các trang con phát triểndự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

4.1.3 Quy mô đồ án

Trang web gồm 5 trang chính Mỗi trang có bố cục khác nhau nhưng vẫn dựatrên một phong cách chung, xuyên suốt toàn bộ trang web

Chương 5: Triển Khai Xây Dựng

5.1 Tổng quan của website