Báo cáo Đồ án cơ sở 1 Đề tài xây dựng website shop bán quần áo thời trang

Vậy phải quảng báthế nào đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cảcác sản phẩm của mình bán.. Giới thiệu về dự án: Việc kinh doanh - mua bán là nhu cầu không

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT – TT VIỆT HÀN

BÁO CÁO

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG WEBSITE SHOP BÁN

QUẦN ÁO THỜI TRANG

Sinh viên thực hiện: BÙI NGỌC QUÝ - 21CE044

TRƯƠNG TIẾN HOÀNG - 21CE022

Giảng viên hướng dẫn: THS.Phan Thị Quỳnh Hương

Đà Nẵng, ngày 01 tháng 06 năm 2021

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT – TT VIỆT HÀN

BÁO CÁO

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG WEBSITE SHOP BÁN

QUẦN ÁO THỜI TRANG

Sinh viên thực hiện: BÙI NGỌC QUÝ - 21CE044

TRƯƠNG TIẾN HOÀNG - 21CE022

Giảng viên hướng dẫn: THS.Phan Thị Quỳnh Hương

Đà Nẵng, ngày 01 tháng 06 năm 2021

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

Đà Nẵng, ngày 01 tháng 06 năm 2021 Giảng viên hướng dẫn

THS.Phan Thị Quỳnh Hương

LỜI CẢM ƠN

Để dự án này đạt kết quả tốt đẹp, em đã nhận được sự hỗ trợ, giúp đỡ của thầy cô.Với tình cảm sâu sắc, chân thành, cho phép chúng em được bày tỏ lòng biết ơn sâu sắcđến tất cả quý thầy cô đã tạo điều kiện giúp đỡ trong quá trình học tập và nghiên cứu vàphát triển đề tài

Trước hết chúng em xin gửi tới các thầy cô trường Đại học Công nghệ thông tin vàtruyền thông Việt – Hàn lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâu sắc.Với sự quan tâm, dạy dỗ, chỉ bảo tận tình chu đáo của các giảng viên đã truy ền tải các kĩnăng cần thiết, đến nay chúng em đã có thể hoàn thành Đồ án cơ sở 1

Đặc biệt chúng em xin gửi lời cảm ơn chân thành nhất tới thầy giáo – ThS NguyễnAnh Tuấn đã quan tâm, giúp đỡ tận tình chúng em hoàn thành tốt đồ án này trong thờigian qua

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế, đồ án này không thểtránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiếncủa các thầy cô để em có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơncông tác thực tế sau này

Chúng em xin chân thành cảm ơn!

MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổchức, cũng như của các công ty, đóng vai trò hết sức quan trọng, có thể tạo ranhững bước đột phá mạnh mẽ

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, côngnghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinhphục hết đỉnh cao này đến đỉnh cao khác Mạng Internet là một trong những sảnphẩ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 chính cho sự truyền tải, trao đổi thông tin trên toàn cầu

Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng:chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm ngay lập tức

cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hìnhảnh và thậm chí có cả những âm thanh nếu bạn cần…

Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn

và 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ử và chính phủ đ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 chất lượng cuộcsống con người

Trong hoạt động sản xuất, kinh doanh, giờ đây thương mại điện tử đã khẳng địnhđược vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một cửahàng hay shop bán hàng, việc quảng bá và giới thiệu đến khách hàng các sảnphẩm mới đáp ứng được nhu cầu của khác hàng sẽ là cần thiết Vậy phải quảng báthế nào đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cảcác sản phẩm của mình bán

Vì vậy, em đã thực hiện đồ án “XÂY DỰNG WEBSITE SHOP BÁN QUẦN ÁOTHỜI TRANG”

MỤC LỤC

Trang

LỜI CẢM ƠN ………

MỞ ĐẦU ……….……….……

DANH MỤC CÁC TỪ VIẾT TẮT ……….……….1

DANH MỤC HÌNH VẼ ………2

DANH MỤC SƠ ĐỒ ……….3

Chương 1: Giới thiệu đề tài ……….………….4

1.1 Tên đề tài………4

1.2 Giới thiệu về dự án ……… 4

1.3 Mục tiêu……….4

1.4 Công cụ thiết kế website ……… 5

Chương 2: Công cụ kĩ thuật ……….………6

2.1 Tìm hiểu về HTML ……….………… 6

2.2 Giới thiệu tổng qua về ngôn ngữ lập trình JavaScript ………… 6

2.3 Tìm hiểu về CSS – Cascading Style Sheets ………… …………7

2.4 Bootstrap ……….…… 7

2.5 Phần mềm Visual Studio Code ……… 7

Chương 3: Phân tích và thiết kế hệ thống ……… 9

3.1 Khảo sát hiện trạng và xây dựng hệ thống mới ……… 9

3.2 Phân tích hệ thống ……… 9

Chương 4: Triển khai xây dựng website ……… .13

4.1 Tên Website……….……… 13

4.2 Hệ thống thông tin ……… .13

4.3 Cấu trúc của trang web ……… 13

4.4 Hình ảnh chi tiết Website ………14

Tổng kết ……….……… 19

Kết quả ………19

Hướng phát triển ……… ……….19

DANH MỤC TÀI LIỆU THAM KHẢO ……… 20

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

1 HyperText Markup Language HTML

2 Cascading Style Sheets CSS

3 Microsoft FrontPage MS FrontPage

4 World Wide Web Consortium W3C

DANH MỤC HÌNH

Hình 2 – 4: Giao diện sử dụng của phần mềm Visual Studio Code ……… 8

1

Hình 4 – 2: Logo website ……… 13

Hình 4 – 4 – 1: Trang chủ ……….14

Hình 4 – 4 – 2: Trang chủ responsive ……… 15

Hình 4 – 4 – 3: Trang danh mục sản phẩm ……… 15

Hình 4 – 4 – 4: Trang danh mục sản phẩm responsive ……….16

Hình 4 – 4 – 5: Trang chi tiết sản phẩm ……… 16

Hình 4 – 4 – 6: Trang chi tiết sản phẩm responsive ……… 17

Hình 4 – 4 – 7: Trang hỗ trợ khách hàng ……… 18

Hình 4 – 4 – 8: Trang hỗ trợ khách hàng responsive ………18

DANH MỤC SƠ ĐỒ Hình 3 – 2 – 1: Biểu đồ luồng dữ liệu mức khung cảnh……….… … 9

2

Hình 3 – 2 – 2: Sơ đồ phân cấp chức năng mức dưới đỉnh……… ………10

Hình 3 – 2 – 3: Sơ đồ chức năng Khách hàng……… 11

Hình 3 – 2 – 4: Sơ đồ chức năng nghiệp vụ quản lý kho …… ……… 11

Hình 3 – 2 – 5: Sơ đồ chức năng nghiệp vụ bán hàng……… 12

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài:

“XÂY DỰNG WEBSITE SHOP BÁN QUẦN ÁO THỜI TRANG”

3

1.2 Giới thiệu về dự án:

Việc kinh doanh - mua bán là nhu cầu không thể thiếu đối với mỗi chúng ta.Trong thời đại cạnh tranh hiện nay việc giới thiệu sản phẩm kinh doanh đến từng cánhân với chi phí thấp, hiệu quả cao là một vấn đề nan giải của người kinh doanhcũng như với nhu cầu mua sắm với những sản phẩm đa chủng loại, đạt chất lượng,

và hợp túi tiền của người tiêu dùng vì vậy thương mại điện tử đã được ra đời và dầndần phát triển trên toàn thế giới

Việc phổ biến các sản phẩm của cửa hang kinh doanh đến khách hàng thôngqua các bảng báo giá tuy nhiên chi phí cao vì số lượng sản phẩm ngày một đa dạng

vì giá cả thay đổi liên tục và tính phổ biến không cao chưa đáp ứng được nhu cầungười dùng Mặt khác cửa hàng còn gặp nhiều khó khăn như chưa quản lí đượcngười dùng, thông tin nhà sản xuất, cập nhập giá sản phẩm, quản lí sản phẩm …Nắm bắt tình hình trên nhóm chúng em tiến hành thiết kế XÂY DỰNG WEBSITESHOP BÁN QUẦN ÁO THỜI TRANG để mong sao giúp cho các cửa hàng pháttriển nhanh hơn, giúp cho chủ cửa hàng có thể quản lí cửa hàng cửa mình một cáchtốt hơn

1.3 Mục tiêu của dự án:

- Thiết kế Website shop bán quần áo thời trang với giao diện bắt mắt, phù hợp với sản phẩm của bạn, thân thiện với người dùng, dễ sử dụng và dễ quản lý

- Thiết kế Website shop bán quần áo thời trang với chi phí hợp lý nhất

- Hỗ trợ bảo mật nhiều lớp cho Website của bạn tránh bị hacker quấy phá

- Sử dụng ngôn ngữ lập trình web HTML, Javascript và các công cụ hỗ trợ định dạngnhư CSS và bootstrap để tạo một Website tĩnh.

- Sử dụng Visual Studio Code

CHƯƠNG 2: CÔNG CỤ KĨ THUẬT2.1 Tìm hiểu về HTML:

2.1.1: HTML là gì?

- HTML là chữ viết tắt của Hypertext Markup Language Nó giúp cho người dùng tạocấu trúc thành phần trong Website hoặc ứng dụng, phân chia các đoạn văn, heading, links,blockquotes

2.1.2: Lịch sử của HTML:

5

- HTML được sáng tạo bởi “Tim Berners – Lee”, nhà vật lý học của trung tâm nghiêncứu CERN ở Thụy Sĩ Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nềnInternet.

- Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại gì, như là < article>,

- Có quá trình học đơn giản và trực tiếp

- Mã nguồn mở và hoàn toàn miễn phí

- Dễ dàng tích hợp với các ngôn ngữ phụ trợ như PHP và Node.js

- Một số trình duyệt chậm hỗ trợ tính năng mới

2.2 Tìm hiểu về ngôn ngữ lập trình JavaScript:

- JavaScript là một ngôn ngữ kịch bản (scriping language) dùng để tương tác với cáctrang HTML dựa trên đối tượng (object-based scriping language) Ngôn ngữ này chủyếu dùng cho kỹ thuật lập trình ở phía client

- JavaScript có một số đặc điểm sau:

+ Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hànhkhông cần biên dịch trước (precompile)

+ Giống như C và Java, chúng có phân biệt chữ HOA và thường

2.3 Tìm hiểu về CSS – Cascading Style Sheets:

2.3.2 Giới thiệu CSS – Cascading Style Sheets

* CSS là gì?

- CSS là ngôn ngữ tạo phong cách cho Website – Cascading Style Sheetslanguage Nó dung để tạo phong cách và định kiểu cho những yếu tố được viết dướidạng ngôn ngữ đánh dấu, như HTML Nó phân biệt cách hiển thị của trang bằngcách điều khiển bố cục, màu sắc và font chữ

* Ưu điểm của CSS:

- Kết hợp và làm tăng sức mạnh cho HTML

- Có thể đặt các đối tượng ở bất kì vị trí nào trên webpage

- CSS tương thích với hầu hết các trình duyệt

- Hỗ trợ tối đa việc tùy biến webpage

2.5 Phần mềm Visual Studio Code:

2.5.1 Visual Studio Code là gì?

- Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mãnguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nềntảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trộ khiến VSCode ngày càng được ứng dụng rộng rãi

2.5.2 Lý do nên chọn Visual Studio Code:

- Lý do nên sử dụng Visual Studio Code là vì nó có rất nhiều ưu điểm vượt trội sovới bất kỳ IDE nào khác:

+ Hỗ trợ đa nền tảng: Windows, Linux, Mac

+ Hỗ trợ đa ngôn ngữ: C/C+, C#, Visual Basic, HTML, CSS, JavaScript, JSON + Tính năng mạnh mẽ

+ Giao diện thân thiện

- Và trên hết, Visual Studio Code là phần mềm miễn phí, được đông đảo lập trìnhviên trên thế giới sử dụng

7

- Giao diện sử dụng:

Hình 2 – 4: Giao diện sử dụng của phần mềm Visual Studio Code

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG3.1 Khảo sát hiện trạng và xây dựng hệ thống mới:

* Sau khi khảo sát em đã nắm bắt được thông tin:

- Quản lý khách hàng: Mỗi khách hàng được quản lý các thông tin sau: Họ tên, địachỉ, số điện thoại, ngày sinh, email…

- Quản lý hàng hóa: Tên hàng hóa, đơn giá, số lượng, hình ảnh, chi tiết, tên loại hàng

- Quản lý nhà sản xuất: Mã nhà sản xuất, tên nhà sản xuất

- Xử lý được đơn hàng và thống kê

8

* Khách hàng: Người lựa chọn mặt hàng để mua Khác với mua trực tiếp tại cửahàng, công ty ở đây khách hàng tự thao tác thông qua từng bước cụ thể để có thể muahàng Trên mạng các mặt hàng được sắp xếp theo thứ tự dễ dàng tìm kiếm.

“Xây dựng website shop bán quần áo thời trang online”

- Xây dựng biểu đồ phân cấp chức năng

- Biểu đồ luồng dữ liệu:

Ta xây dựng biểu đồ luồng “WEBSITE SHOP”

Hình 3 – 2 – 1: Biểu đồ luồng dữ liệu mức khung cảnh:

9

Hình 3 – 2 – 2: Sơ đồ phân cấp chức năng mức dưới đỉnh

10

Hình 3 – 2 – 3: Sơ đồ chức năng Khách hàng

Hình 3 – 2 – 4: Sơ đồ chức năng nghiệp vụ quản lý kho

11

Hình 3 – 2 – 5: Sơ đồ chức năng nghiệp vụ bán hàng

12

CHƯƠNG 4: TRIỂN KHAI XÂY DỰNG WEBSITE4.1 Tên Website (Tên cửa hàng):

Sau khi lên ý tưởng và tham khảo ý kiến của giáo viên hướng dẫn thì chúng em quyếtđịnh đặt tên website là FASHION SHOP Vừa đơn giản, nhưng giúp người dùng có thểnhớ tên website và tìm kiếm một cách rất dễ dàng trên các công cụ tìm kiếm phổ biến

4.2 Logo Website:

Hình 4.2: Logo WebsiteLogo của website được thiết kế đơn giản với sắc màu nhẹ nhàng và đẹp Giúp ngườidùng ấn tượng với logo của trang, không bị hòa lẫn với những logo đầy màu sắc của cáctrang khác

4.3 Cấu trúc của Website:

Đây là một website bán và giới thiệu sản phẩm của cửa hàng, công ty đến ngườidùng với các chi tiết mặt hàng với giá thành chính xác Website gồm có các trang:+ Home

Hình 4 – 4 – 1: Trang chủ

15

Hình 4-4-2: Trang chủ responsive

16

Hình 4 – 4 –3: Trang danh mục sản phẩm

17

Hình 4 – 4 –4: Trang danh mục sản phẩm responsive

20

Hình 4 – 4 –5: Trang chi tiết sản phẩm

Hình 4-4-6: Trang chi tiết sản phẩm responsive

21

Hình 4-4-7: Trang hỗ trợ khách hàng

22

Hình 4-4-8: Trang hỗ trợ khách hàng responsive

TỔNG KẾT Kết quả

Trên nghiên cứu về ngôn ngữ Website và các ứng dụng lập trình Dưới sự hướng dẫncủa thầy Nguyễn Tuấn Anh, chúng em đã thiết kế thành công được một Website xây dựngWebsite Shop đồ kiểng xe online Tuy kết quả đạt được chưa cao, Website còn nhiều điểmhạn chế chưa khắc phục được, nhưng đó cũng là bước khởi đầu để chúng em có thể hướngtới một Website hoàn thiện và có thể đi kinh doanh được Bên cạnh đó, trong quá trình xâydựng Website demo, chúng em đã học hỏi được nhiều thứ, những kĩ năng bootstrap,javascript, CSS để có thể thiết kế được những Website có chất lượng cao hơn sau này

23

Về Website demo, sau khi chúng em lấy ý kiến của các giáo viên và cá bạn trong khoa.Website đạt được những kết quả khả quan và có tiềm năng phát triển rất lớn trong tươnglai.

Chúng em mới là những sinh viên bước đầu lập trình, nên Website cũng không thể tránhkhỏi những lỗi, những điểm chưa hợp lí và đó cũng là động lực để chúng em có thể làm tốthơn sau này

Hướng phát triển:

Có nhiều hướng phát triển cho Website này, có thể phát triển rất nhiều mặt, xây dựngthêm trang Admin dành cho chủ cửa hàng để quản lí khách hàng, cập nhật sản phẩm cũngnhư giá thành sản phẩm, hoặc có thể xây dựng Website hỗ trợ tìm kiếm do chính chúng

em phát triển Có thể xây dựng thêm những Website đa ngôn ngữ, để bất kì vị khách hàngnào cũng có thể xem và hiểu được

Hướng phát triển của Website là tiến đến một thương mại điện tử với đầy đủ cácchức năng thanh toán tiền qua mạng Nhưng vì trong nước ta hiện nay vấn đề thanh toánqua mạng còn gặp nhiều khó khăn và chưa phổ biến lắm cho nên chức năng của Websitedùng để hỗ trợ cho nhà quản trị còn hạn chế Vấn đề chính của Website là phục vụ việcquảng cáo Từ đó, bên cạnh việc thương mại thì vấn đề cần phải tập trung thu hút kháchhàng liên hệ và thỏa thuận thiết kế, lắp đặt một công trình nào đó thuộc lĩnh vực chuyênmôn của công ty, cửa hàng

DANH MỤC TÀI LIỆU THAM KHẢO

[1] Lê Đình Duy – Thiêt kế và lập trình ứng dụng Web bằng ASP, NXB Thống Kê, năm 2002[2] VN-Guilde – Những bài thực hành ASP, NXB Thống Kê, năm 2002

24