ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: WEBSITE SHOP THỜI TRANG K&T. Giảng viên hướng dẫn : THS. LÊ THÀNH CÔNG

MỞ ĐẦUNgày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong 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

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

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

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: WEBSITE SHOP THỜI

TRANG K&T

Sinh viên thực hiện : VÕ TẤN THÀNH, PHẠM DUY KHANG Giảng viên hướng dẫn : THS.LÊ THÀNH CÔNG

Lớp : 20IT8

Đà Nẵng, 31 tháng 5 năm 2021

1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

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

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: WEBSITE SHOP THỜI

TRANG K&T

Đà Nẵng, 31 tháng 5 năm 2021

3

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ột trong 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, nó đóng vai trò hết sức quan trọng, có thể tạo

ra nhữ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ông nghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác 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 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 thì gần như 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í đôi lúc 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ên khắ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ộc số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ửa hàng hay shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩ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 BÁN HÀNG THỜI TRANG” cho một shop bán đồ K&T SHOP Người chủ cửa hàng đưa các sản phẩm đó lên website của mình và quản lý bằng website đó, khách hàng có thể đặt và mua hàng trên website mà không cần đến cửa hàng Chủ cửa hàng sẽ gửi sản phẩm cho khách hàng khi nhận được tiền Với sự hướng dẫn tận tình của Thầy Lê Thành Công

em đã hoàn thành cuốn báo cáo đồ án cơ sở 1 này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm và góp ý của quí Thầy

cô Em xin chân thành cảm ơn

Đà Nẵng, 31 tháng 5 năm 2021 Sinh viên thực hiện: Võ Tấn Thành

Phạm Duy Khang

LỜI CẢM ƠN

5

Em xin chân thành cảm ơn quí thầy cô đã giúp đỡ em thực hiện đề tài này Đặc biệt thầy Lê Thành Công đã tận tình hướng dẫn, giúp đỡ, chỉ bảo em trong suốt thời gian thực hiện đồ án cơ sở 1 này Đồng thời em cũng xin trân trọng cảm ơn những tình cảm quí báu mà các thầy cô trong trường Đai Học CNTT và truyền thông Việt-Hàn đã truyền đạt cho em, những kinh nghiệm, kỹ thuật và cách thức trong việc xây dựng đề tài này Và cuối cùng tôi cũng xin được gửi lời cảm ơn đến gia đình đã luôn luôn động viên, ủng hộ, những người bạn đã gắn bó, chia sẻ rất nhiều kinh nghiệm và những kiến thức và nhất là trong thời gian thực hiện đề tài, để đề tài có thể hoàn thành một cách thành công nhất

Tuy nhiên, do thời gian có hạn nên em không thể phát huy hết những ý tưởng, khả năng hổ trợ của ngôn ngữ và kỹ thuật lập trình vào đề tài Trong quá trình xây dựng website, không thể tránh khỏi những sai xót, mong nhận được sự thông của quí thầy cô và các bạn Em xin chân thành cảm ơn

Đà Nẵng, 31 tháng 5 năm 2021 Sinh viên thực hiện: Võ Tấn Thành

Phạm Duy Khang

NHẬN XÉT

(Của cơ quan thực tập, nếu có)

………

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

………

…

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

………

………

………

………

………

7

MỤC LỤC

(Chèn mục lục tự động: References/Table of Contents)

Trang

MỞ ĐẦU 1

Chương 1 Giới thiệu 13

1.1 Tổng quan 13

1.2 Cấu trúc đồ án 14

Chương 2 Phân tích thiết kế hệ thống 15

2.1 Mô hình tổng quan của hệ thống nghiên cứu 15

2.2 Thiết kế chi tiết 15

2.2.1 Index.html 15

2.2.2 Gioithieu.html 15

2.2.3 lienhe.html 15

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

Chương 4 Kết luận và Hướng phát triển 19

PHỤ LỤC 121

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

DANH MỤC CÁC BẢNG

(In đậm, in hoa, size16) (Chèn danh mục hình ảnh tự động: References/Insert Table of Figures,

chọn nhãn phù hợp)

Trang Bảng 2.1 – Bảng so sánh các phương pháp 13

9

DANH MỤC HÌNH

Trang

Hình 1.1 – Thanh Nav 16

Hình 1.2 – Carousel Quảng Cáo và Bảng tin tức 16

Hình 1.3 – Sản Phẩm Nổi Bật 16

Hình 1.4 – Sản phẩm đang sale 17

Hình 1.5 – Footer 17

Hình 1.6 – Giới thiệu về shop 17

Hình 1.7 – Thông tin thêm về shop 18

Hình 1.8 – Thông tin liên hệ của shop 18

Hình 1.9 – Thông tin chủ shop 18

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

1 Công nghệ phần mềm CNPM

2 Công nghệ thông tin CNTT

11

Chương 1 Giới thiệu

1.1 Tổng quan

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

Hiện nay internet đang rất thịnh hành Đặc biệt là về các trang web bán hàng online, các cửa hàng online mọc lên như nấm, nên vì thế mức độ cạnh tranh cũng ngày càng cao Thế nên muốn thu hút khách hàng thì cửa hàng đó phải có một trang web thật sự bắt mắt, thịnh hành nhiều món đồ, dễ hiểu và liên tục cập nhật các mẫu thời trang hot v.v…Thế nên chúng em cần phải thiết kế một website thật chất lượng và đạt được sự thỏa mãn của khách hàng thì mới duy trì được lâu dài

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

Thiết kế được một website tương đối đẹp, dễ nhìn Giao diện không quá cầu

kì, nên đơn giản để thu hút khách hàng Có đầy các chức năng mà một trang shop thời trang cần có

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

a Thiết bị và phần mềm

- Máy tính có thể thiết kếđược web

- Phần mềm Visual Studio Code

b Yêu cầu trang Web

- Khách hàng là những người có nhu cầu mua sắm hàng hóa, họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này

+ Vì thế phải có các chức năng sau:

- Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa chọn và mua

- Khách hàng xem các thông tin tin tức mới, khuyến mãi trên trang web

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

- Phương pháp:

+Về mặt lý thuyết:

- Tìm hiểu kỹ thuật lập trình, cách thức hoạt động và các đối tượng trong

Bootstrap4, HTML, Css,

- Trau dồi kiến thức từ những thứ cơ bản đến nâng cao để dễ dàng hơn trong việc thiết thiết kế website

+Về mặt lập trình:

Sử dụng các kiến thức đã học từ môn Công Nghê WEB ở học kì 2 về HTML, CSS, BOOTSTRAP 4, để thực hiện thiết kế đề tài website Shop thời trang này

+Về mặt hoạt động:

- Trang web có thể thể hiện tương đối đầy đủ chức năng về mặt hình thức với giao diện đơn giản dễ nhìn, khiến khách hàng nhìn vào thấy hứng thú và khi truy cập

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

- Một website Shop Thời Trang trên nền tảng HTML sử dụng CSS và Boostrap

để design

- 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 Tổng quan về Website Shop Thời Trang K&T Trong chương

này, báo cáo trình bày các khái niệm, đặc điểm của kĩ thuật thiết kế web

 Chương 2 Phân tích thiết kế Website Shop Thời Trang K&T Nội dung

chương bao gồm các mục: Mô hình tổng quan và phân tích chi tiết

 Chương 3 Xây dựng website

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

13

Chương 2 Phân tích thiết kế hệ thống

2.1 Mô hình tổng quan của hệ thống nghiên cứu

- Thiết kế trang chủ của website index.html

- Thiết kế trang giới thiệu về website gioithieu.html

- Thiết kế trang thông tin liên hệ lienhe.html

2.2 Thiết kế chi tiết

2.2.1 Index.html

- Thiết kế thanh navitagtion gồm các nav item: Home, Giới Thiệu, Sản Phẩm, Liên Hệ, Khung Tìm Kiếm và Logo WEBsite

- Thiết kế carousel để đăng các thông báo, sale,…

- Thiết kế bảng tin tức gồm các tin tức về thời trang được đăng tải

- Sản phẩm nội bật: Mục này là một container bao gồm các card có hình ảnh sản phẩm, tên sản phẩm, giá tiền và button Mua Hàng

- Sản phẩm đang sale: Tương tự sản phẩm nổi bật, mục này cũng bao gồm các card để hiển thị sản phẩm

- Footer: Gồm các thông tin về website, các liên kết dẫn đến các trang của trang web

2.2.2 Gioithieu.html

- Thiết kế một container gồm ảnh và văn bản giới thiệu về shop, về website

- Thiết kế một container gồm các ưu điểm của shop như Hàng chính hãng, Freeship,… các đối tượng này được sắp xếp, căn chỉnh sao cho hợp lí, đẹp mắt

2.2.3 lienhe.html

- Một container gồm Bản Đồ địa chỉ của shop, bên phải là các thông tin liên hệ dành cho khách hàng

- Thiết kế một container gồm danh sách của những người sáng tạo ra website, chủ shop,…

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

Hình 1.1 – Thanh Nav

Hình 1.1 – Carousel Quảng Cáo và Bảng tin tức

Hình 1.3 – Sản Phẩm Nổi Bật

15

Hình 1.4 – Sản phẩm đang sale

Hình 1.5 – Footer

Hình 1.6 – Giới thiệu về shop

Hình 1.7 – Thông tin thêm về shop

Hình 1.8 – Thông tin liên hệ của shop

Hình 1.9 – Thông tin chủ shop

17

Chương 4 Kết luận và Hướng phát triển

Ưu điểm

+ Nắm được hầu hết các class cơ bản của Bootstrap 4 và cách dùng của nó Từ đó thiết kế website được chuyên nghiệp hơn thay vì chỉ dùng HTML thuần Việc sử dụng bootstrap sẽ giúp website trở nên mượt mà hơn,không bị thô khi dùng thuần HTML

+ Luyện tập thêm việc viết Css, HTML, … thành thạo hơn, biết thêm được nhiều thẻ mới, áp dụng được vào trang web

+ Nắm bắt được các nội dung mà một website cần phải có, từ đó sang tạo them được nhiều phần tạo sự khác biệt

Hạn chế

+ Chưa có áp dụng được kiến thức Javascript được học ở học kì 2 năm 1 để làm hiệu ứng, giúp web thu hút ánh nhìn hơn, sống động hơn

+ Đơn thuần là web tĩnh chưa áp dụng them nâng cao việc viết PHP và lien kết cơ

sở dữ liệu

+ Phân chia bố cục, sắp xếp các đối tượng còn thiếu sót nhiều trong việc thiết kế website

+ Việc trình bày những dòng lệnh trong mã nguồn còn thiếu khoa học, thiếu hợp

lí Thừa thiếu một số class không nên có

Hướng phát triển

+ Xây dựng website chuyên nghiệp hơn, đẹp mắt hơn trong những môn đồ án sau

+ Áp dụng được nhiều kiến thức nâng cao vào đề tài để tăng sự sinh động cho đề tài

+ Sắp xếp các đối tượng trong mã nguồn một cách hợp lí hơn, khoa học hơn

PHỤ LỤC (kèm theo)

19