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

Đề 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ìm kiếm được thông tin các dòng sản phẩm mà họ thắc mắc.. Trang web sẽ cập nhật những ti

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

QUẦN

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

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

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

QUẦN

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ập chú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 Đại Họ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ột cá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 động viê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ích cự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ự đánh giá 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ự động viê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ời hạ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 T ng quan c a website ổ ủ 18

4.1.1 Trang chủ 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

5.2.1 V i nh ng h n chềố và tốần t i nều trền, h ớ ữ ạ ạ ướ ng nghiền c u d kiềốn nh sau: ứ ự ư 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

Hình 4.9 Code CSS 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àng hó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ủa cô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ản phẩ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ược phá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ăm triệ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ựng website 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ột cá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ìm kiế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ên website 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ông khai, minh bạch và cung cấp thông tin chính xác nhằm đem lại sự tin cậy cho ngườ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ằng phầ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ện website 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ũng như 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ẽ được xâ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ười dù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ách hà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ùng muố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 được chi 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ình muố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ồi lạ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ên trang 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 đảm bả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ến trê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 đơn giả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 xe khá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ác tí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ười dùng có thể đánh giá và bình luận cho nhiều sản phẩm trên trang web Trang web cũng cung 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ệc theo 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ẽ được gử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ùng muốn xem Ngoài ra người dùng cũng có thể xem được số lượng đánh giá của những sả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ập tin 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ằ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 và đượ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 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ì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 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ù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, 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á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.

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-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, 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ả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 đã bùng nổ vào năm 1993 khi một sinh viên tốt nghiệp trường Đại học Illinois 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ác trang 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ả 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ập Netscape 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ụ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.

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ền chỉ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ện nay 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ừng trang web Các trang web là các trang riêng biệt, có bố cục khác nhau, đượ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, 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ể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.

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ựa trên một phong cách chung, xuyên suốt toàn bộ trang web.