ĐỀ TÀI THIẾT KẾ WEBSITE KINH DOANH áo QUẦN ONLINE

Đối với một cửa hàng, việc quảng bá và giới thiệu sảnphẩm đến khách hàng đáp ứng nhu cầu mua sắm ngày càng cao của khách hàng sẽ làcần thiết và đáp ứng được những nhu cầu tất yếu của khá

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

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: THIẾT KẾ WEBSITE KINH

DOANH ÁO QUẦN ONLINE

Sinh viên: Nguyễn Thị Như Ý Mã: 21AD071

Đặng Thị Thanh Nhi Mã: 21AD046

Giảng viên hướng dẫn: ThS.Lê Viết Trương

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu Trường Đại họcCông nghệ thông tin và Truyền thông Việt - Hàn, các thầy cô thuộc Khoa Khoa họcmáy tính đã tận tình giúp đỡ em suốt thời gian học tập và thực hiện đồ án đầu tiên

Đặc biệt, em xin gửi lời cảm ơn chân thành nhất đến ThS Lê Viết Trương.Trong quá trình nghiên cứu và thực hiện đồ án cơ sở 1, em đã nhận được sự quan tâmgiúp đỡ, hướng dẫn chu đáo, tâm huyết của thầy Thầy đã giúp em tích lũy thêm nhiềukiến thức để có cái nhìn sâu sắc và chuyên môn hơn Đây là hành trang quí báu, làkinh nghiệm đầu tiên trên con đường mai sau

Có lẽ kiến thức là vô hạn mà sự tiếp nhận kiến thức của bản thân mỗi ngườiluôn tồn tại những hạn chế nhất định Do đó, trong quá trình hoàn thành đồ án, chắcchắn không tránh khỏi những thiếu sót Bản thân em rất mong nhận được những góp

ý đến từ thầy để bài đồ án được hoàn thiện hơn

Kính chúc thầy sức khỏe, hạnh phúc thành công trên con đường sự nghiệpgiảng dạy

Em xin trân trọng cảm ơn

Sinh viên,

Nguyễn Thị Như ÝĐặng Thị Thanh Nhi

MỤC LỤC

Trang

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN iii

LỜI CẢM ƠN iv

MỤC LỤC v

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

MỞ ĐẦU 1

Chương 1 GIỚI THIỆU 3

1.1 Tổng quan 3

1.1.1 Bối cảnh thực hiện đề tài 3

1.1.2 Lí do chọn đề tài 3

1.1.3 Vấn đề cần giải quyết 3

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

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

1.2.1 Phương pháp triển khai thực hiện 4

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

1.3 Cấu trúc đồ án 5

Chương 2 NGHIÊN CỨU TỔNG QUAN VÀ 6

PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 6

2.1 Cơ sở lý thuyết 6

2.1.1 HTML là gì ? 6

2.1.2 CSS là gì ? 7

2.1.3 JavaScript là gì ? 8

2.2.Phân tích đề tài 8

2.2.1 Chức năng 8

2.2.2 Đặc điểm 8

2.2.3 Ưu điểm 9

2.4 Thiết kế chi tiết 9

2.5 Kết chương 2 10

Chương 3 TRIỂN KHAI XÂY DỰNG 11

3.1 Thiết kế cài đặt chương trình 11

3.1.1 Trang đăng nhập và đăng kí 11

3.1.2 Trang chủ home về sản phẩm 11

3.1.3 Trang shop 12

3.1.4 Trang blog 13

3.1.5 Trang about 13

3.1.6 Trang contact 14

3.1.7 Trang giỏ hàng 14

3.1.8 Trang hỗ trợ 15

KẾT LUẬN 16

4.1 Kết luận 16

4.2 Hướng phát triển 16

TÀI LIỆU THAM KHẢO i

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

HTML HyperText Markup Language

W3C World Wide Web Consortium

CSS Cascading Style Sheets

DANH MỤC HÌNH VẼ

Trang

Hình 1 Giao diện trang chủ website 5

Hình 2 Ảnh minh hoạ về cấu trúc cơ bản của một tập tin html 7

Hình 3 Ảnh minh hoạ cách nhúng CSS vào website 8

Hình 4 Giao diện về trang đăng nhập 11

Hình 5 Giao diện đăng kí 11

Hình 6 Giao diện home về sản phẩm 12

Hình 7 Giao diện về trang shop 12

Hình 8 Giao diện blog 13

Hình 9 Giao diện về trang about 13

Hình 10 Giao diện về trang Contact 14

Hình 11 Giao diện về giỏ hàng 14

Hình 12 Trang hỗ trợ 15

MỞ ĐẦU

1 Giới thiệu

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ Máy tínhđiện tử không còn là một thứ phương tiện quý hiếm mà đang ngày càng trở thành mộtcông cụ làm việc và giải trí thông dụng của con người, không chỉ ở nơi làm việc màcòn ngay cả trong gia đình Đặc biệt là công nghệ thông tin được áp dụng trên mọi lĩnhvực kinh tế, chính trị, xã hội Ứng dụng công nghệ thông tin và tin học hóa được xem

là một trong các yếu tố mang tính quyết định trong hoạt động của quốc gia, tổ chức vàtrong cả các doanh nghiệp Nó đóng vai trò hết sức quan trọng và có thể tạo nên bướcđột phá mạnh mẽ

Mạng INTERNET là một trong những sản phẩm có giá trị hết sức lớn lao vàngày càng trở nên một công cụ không thể thiếu, là nền tảng để truyền tải, trao đổithông tin trên toàn cầu Bằng INTERNET, chúng ta đã thực hiện được những côngviệc với tốc độ nhanh hơn, chi phí thấp hơn nhiều so với cách thức truyền thống.Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử trênkhắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao đời sống con người.Trong hoạt động sản xuất, kinh doanh, thương mại điển tử đã khẳng định và thúc đẩy

sự phát triển của doanh nghiệp Đối với một cửa hàng, việc quảng bá và giới thiệu sảnphẩm đến khách hàng đáp ứng nhu cầu mua sắm ngày càng cao của khách hàng sẽ làcần thiết và đáp ứng được những nhu cầu tất yếu của khách hàng Vì vậy, nhóm chúng

em quyết định xây dựng JK STORE là một trang web kinh doanh áo quần online dànhcho mọi đối tượng

ý mà không cần phải đến tận nơi để xem và mua hàng, thay vào đó khách hàng có thểxem trực tiếp trên website mà không cần tốn nhiều thời gian đi lại Đưa sản phẩm củashop có thể tiếp cận đến người dùng nhanh hơn và góp phần tăng doanh thu cho JKSTORE

JK STORE là kênh mua sắm online uy tín, cùng với đội ngũ nhân viên chuyênnghiệp, chúng tôi cam kết đem đến những sản phẩm tốt nhất, luôn đổi mới mỗi ngày

và đảm bảo chất lượng với dịch vụ tốt nhất đến với mọi khách hàng

2 Mục tiêu của đề tài

Mục tiêu của đề tài nhằm xây dựng cho shop một website bán hàng với đầy đủcác chức năng và giao diện được thiết kế đơn giản, tỉ mĩ giúp cho khách hàng có thểthoải mái mua sắm trực tuyến tại JK STORE Giúp khách hàng có thể nhanh chóngbiết đến những sản phẩm của shop với nhiều ưu đãi hấp dẫn Shop luôn được cập nhậtthường xuyên các mặt hàng mới về khách hàng có thể bắt kịp theo xu hướng thời tranghiện nay

3 Nội dung và kế hoạch thực hiện

+ Xây dựng một trang web tĩnh hoàn thiện dựa trên 3 ngôn ngữ chính đó là:

+ Thêm google map vào trang web để giúp cho khách hàng biết và hiểu rõ hơn

về vị trí của shop

4 Bố cục báo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau: Chương 1 Giới thiệu.

Chương 2 Nghiên cứu tổng quan và phân tích, thiết kế hệ thống

Chương 3 Triển khai xây dựng.

Cuối cùng là Kết luận, Tài liệu tham khảo liên quan đến đề tài.

Chương 1 GIỚI THIỆU

1.1 Tổng quan

1.1.1 Bối cảnh thực hiện đề tài

Thế giới ngày càng bùng nổ về mạng máy tính, con người có thể nhanh chónggiao tiếp và kết nối với nhau dễ dàng thông qua Internet, đây chính là điều kiện thuậnlợi cho lĩnh vực thương mại điện tử ngày càng phát triển hơn Với đà phát triển này,thương mại điện tử dần dần tiếp cận với mọi người, và đến nay việc du lịch thông quaInternet và các phương tiện điện tử khác không còn xa lạ với chúng ta, thậm chí nóđang dần trở nên ưa chuộng và thiết yếu không những với giới trẻ mà còn đối vớinhiều người ở nhiều lứa tuổi khác nhau, từ đó cho ta thấy sự quan trọng trong thươngmại điện tử đối với khách hàng Cùng với sự phát triển như vậy, rất nhiều website bánhàng online mọc lên, khiến cho khách hàng luôn bối rối trong việc tìm các nơi uy tín,phù hợp với mong muốn và có rất nhiều rủi ro xảy ra khi gặp phải những websitekhông đáng tin cậy

Vì vậy, JK Store – một website về áo quần, ra đời nhằm đáp ứng và cải thiệnnhững vấn đề mà khách hàng gặp phải, giúp cho khách hàng có những trải nghiệm mộtcách tốt nhất

1.1.2 Lí do chọn đề tài

Cuộc sống ngày càng phát triển, nhu cầu của con người ngày càng được nângcao, việc mua hàng online bây giờ đã trở thành sở thích, đam mê của nhiều người Vìvậy, họ thường tìm đến các dịch vụ của shop uy tín để chọn cho mình một bộ trangphục phù hợp Trước đây, họ thường phải đến tận nơi cửa hàng để mua thì ngày nay,với sự phát triển của thương mại điện tử, việc đi mua sắm không còn là chuyện khókhăn đối với mọi người Thay vì phải đến tận nơi thì bây giờ chỉ cần một nút click là

có thể giải quyết được các vấn đề trên mà không cần phải ra ngoài đường Vì đã có cáctrang web quần áo online đáp ứng mọi yêu cầu của mọi người

Theo như sự tìm hiểu của nhóm, hiện nay ở Quảng Trị vẫn có rất ít các trangweb về bán quần áo

Do đó, vốn là những người được sinh ra và lớn lên ở Quảng Trị nên nhóm quyếtđịnh thành lập một trang web chuyên cung cấp các sản phẩm quần áo chất lượng, vớitên gọi là “JK Store ” với mong muốn đáp ứng các nhu cầu của khách hàng

1.1.3 Vấn đề cần giải quyết

- Tìm kiếm sản phẩm quần/áo một cách nhanh chóng, hiểu quả.

- Giới thiệu chi tiết về sản phẩm, giúp khách hàng tìm được áo quần phù hợp

- Website đáp ứng được khả năng truy cập cập nhanh, thông tin tin cậy, chínhxác

- Nội dung và cách trình bày của website phải rõ ràng và dễ sử dụng

- Hỗ trợ khách hàng như :giải đáp các thắc mắc của khách hàng và luôn nghenhững góp ý của khách hàng để xây dựng trang web ngày càng hoàn thiện hơn

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

- Xây dựng Website bán áo quần có giao diện thân thiện, dễ sử dụng.

- Xây dựng Website có tốc độ tải trang nhanh chóng và hạn chế các thủ tụcrườ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

- Xây dựng Website công khai và minh bạch nhằm đem lại sự tin cậy chokhách hàng

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

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

Phương pháp nghiên cứu đề tài: Tìm hiểu về nhu cầu của khách hàng trên thịtrường, từ đó làm cầu nối đến khách hàng, giúp khách hàng hiểu thêm về các sản phẩmcũng như các mode hiện tại Từ đó lựa chọn cho mình những bộ trang phục phù hợpnhất Đặc biệt là hiện nay dịch covid-19 đã và đang diễn ra khá phức tạp nên việc muasắm online cũng là việc tất yếu giúp cho mọi người có thể giải quyết và đáp ứng đượcnhu cầu của mình và đảm bảo được các yếu tố an toàn đến sức khỏe của mọi ngườibên cạnh đó thì mọi người chỉ cần vài giây với công nghệ hiện đại như ngày nay thì cóthể lựa chọn cho mình những món đồ mà mình thích mà không cần phải ra các cửahàng để chọn lựa

Cái mới của đề tài: Xây dựng được một website dễ dàng truy cập, thiết kế giaodiện có tính thẩm mĩ cao hơn, dễ nhìn, sử dụng hình ảnh thật và giá cả hợp lí giúpngười dùng dễ nhìn nhận cũng như lựa chọn sản phẩm phù hợp

Kết quả của đề tài: Hoàn thành được một website có đầy đủ các chức nănggiúp cho mọi người dễ dàng tìm kiếm sản phẩm Hướng đến một website được nhiềungười biết đến Hệ thống của website đảm bảo được bảo mật trong các thông tin đăng

kí, đăng nhập,…

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

Xây dựng được một website giúp cho người dùng có thể lựa chọn cho mìnhnhững bộ trang phục phù hợp với nhu cầu của bản thân Thiết kế được giao diện đơngiản, tỉ mĩ và đảm bảo uy tín chất lượng, an toàn và luôn đề cao và quan tâm kháchhàng là việc hàng đầu của shop hướng tới.Từ đó JK Store giúp cho mọi người có thểtrở nên có mối quan hệ gần gũi và thân thiện hơn khi có được website như người bạnđồng hành cùng mình lựa chọn những mặt hàng ưng ý mà không cần phải tốn nhiềuthời gian và chi phí đi lại để lựa chọn áo quần trực tiếp

Hình 1 Giao diện trang chủ website

1.3 Cấu trúc đồ án

Chương 1: Giới thiệu Giới thiệu chung về đề tài, ý nghĩa và các mục tiêu của

đề tài

Chương 2: Nghiên cứu tổng quan và phân tích, thiết kế hệ thống Giới thiệu

tổng quan về hệ thống sẽ xây dựng, các nhiệm vụ mà hệ thống sẽ thực hiện, và các giảipháp liên quan Và có các chức năng cần có, các bước để xây dựng một trang web

Chương 3: Triển khai xây dựng Xây dựng các trang đã đề ra bằng các công

cụ hỗ trợ

Chương 4: Kết luận và hướng phát triển.Trình bày tóm tắt các kết quả đạt

được và đề xuất các hướng mở rộng, phát triển trong tương lai

5

Chương 2 NGHIÊN CỨU TỔNG QUAN VÀ PHÂN TÍCH, THIẾT KẾ HỆ THỐNG

2.1 Cơ sở lý thuyết

2.1.1 HTML là gì ?

HTML (viết tắt của từ HyperText Markup Language, hay là "Ngôn ngữ

Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nêncác trang web trên World Wide Web Nó có thể được trợ giúp bởi các công nghệnhư CSS và các ngôn ngữ kịch bản giống như JavaScript

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưutrữ cục bộ và render tài liệu đó thành các trang web đa phương tiện HTML mô tả cấutrúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho

sự xuất hiện của tài liệu

Các phần tử HTML là các khối xây dựng của các trang HTML Với cấu trúcHTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúngvào trang được hiển thị HTML cung cấp một phương tiện để tạo tài liệu có cấu trúcbằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs,lists, links, quotes và các mục khác Các phần tử HTML được phân định bằng các tags,

được viết bằng dấu ngoặc nhọn Các tags như <img /> và <input /> giới thiệu trựctiếp nội dung vào trang Các tags khác như <p> bao quanh và cung cấp thông tin vềvăn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ Các trình duyệtkhông hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang

HTML có thể nhúng các chương trình được viết bằng scripting như JavaScript,điều này ảnh hưởng đến hành vi và nội dung của các trang web Việc bao gồm CSSxác định giao diện và bố cục của nội dung World Wide Web Consortium (W3C), trướcđây là đơn vị bảo trì HTML và là người duy trì hiện tại của các tiêu chuẩn CSS, đãkhuyến khích việc sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997

Nội dung của một tập tin HTML phải được bắt đầu bằng thẻ <html> và kết thúcbởi thẻ </html>

Hình 2 Ảnh minh hoạ về cấu trúc cơ bản của một tập tin html

2.1.2 CSS là gì ?

+ CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử

dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu(HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thểhiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website nhưviệc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêmstyle vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ,thay đổi cấu trúc…

+ CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996,

vì HTML không được thiết kế để gắn tag để giúp định dạng trang web

+ Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng

chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó

sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

+ Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ

markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giaodiện website), chúng là không thể tách rời

Để CSS có thể thực thi trên website hoặc HTML Documents thì phải tiến hànhnhúng CSS vào website Nếu không, các định dạng CSS sẽ không thực thi trên HTML

Hình 3 Ảnh minh hoạ cách nhúng CSS vào website

2.1.3 JavaScript là gì ?

Javascript là một ngôn ngữ lập trình website, được tích hợp và nhúng trongHTML và giúp cho website trở nên sống động hơn Đây là dạng ngôn ngữ theo kịchbản, được hình thành dựa trên chính đối tượng phát triển có sẵn hoặc đơn giản là tựđịnh nghĩa ra Javascript cho phép bạn kiểm soát các hành vi của trang web tốt hơn sovới việc chỉ sử dụng mỗi HTML Có thể kể đến một vài ứng dụng thực tiễn cực kỳquen thuộc của Javascript như slideshow, pop-up quảng cáo hay tính năngautocomplete của Google,… chúng đều được viết bằng ngôn ngữ Javascript

2.2.Phân tích đề tài

Tên đề tài : “Thiết kế website kinh doanh áo quần online

2.2.1 Chức năng