(Tiểu luận) đồ á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.. Xây dựng website cho phép người

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

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

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ọctậ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 đồ ánnà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 độ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ềutí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ự đá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.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óanhư đ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 doanhcủ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ậpinternet 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 đượctính thiết thực của điều đó em đã nhận đề tài: “ Xây dựng website thời trang” sử dụngngô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ớimộ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.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ìnhmuố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ườidù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

Ư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 đơ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ảnphẩ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 Trangweb 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ệntrong việc theo dõi hay cập nhật những chiếc xe trên trang web nhờ các email thôngbá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ù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ập tinHTML 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 CMSchạ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ầnmề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ànhwindows và được thay thế bởi Edge trên Windows 10 hay Chrome được phát triểnbở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ậptrì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ù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ộtphươ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-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ông quaInternet 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-Leekhô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êncứ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ợpphứ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áttriể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 haynhữ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ểntả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ốtnghiệp trường Đại học Illinois tên là Marc Andreessen phát triển thành công một phầnmề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ảntrê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ậ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ụ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ácbả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ểnphầ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ếtnữa Nhờ đó, hàng triệu người với vốn kinh nghiệm ít ỏi cũng đã có thể lập trangWeb 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ừ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

5.1.3 Trang giới thiệu

Hình 4.7 Trang giới thiệu website

5.1.4 Trang mua hang

Hình 4.8 Trang mua hàng website

5.1.5 Trang giỏ hàng

Hình 4.9 Trang giỏ hàng website

5.2 Code trên VSCode

5.2.1 Trang chủ

Hình 4.10 Code HTML trang chủ website

Hình 4.11 Code CSS trang chủ website

5.2.2 Trang đăng nhập

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

Hình 4.13 Code CSS trang đăng nhập website

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

6.1 Kết luận

6.1.1 Qua việc làm đồ án này, em xin đưa ra kết quả thu được như sau:

Bản thân tích lũy được kinh nghiệm trong việc phân tích và thiết kế hệ thống Xây dựng được website sử dụng công cụ Bootstrap và JavaScrip.Cho phép tất cả mọi người có thể truy cập đến trang web để nhận và xem thông tin

Cho phép người dùng có thể tương tác với nhau bằng việc đăng nhập đơn giảnvào website

Website hỗ trợ tiếng Việt Unicode

6.1.2 Về hạn chế

Giao diện chưa được tốt

Chương trình chưa kiểm tra hết các trường hợp có thể xảy ra

6.2 Hướng phát triển

6.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:

Tìm hiểu thêm cách xử lí tìm kiếm trong webstite

Khai thác thêm các ứng dụng như responsive cho trang website…