Đồ án cơ sở 1 Đề tài xây dựng website shop thới trang

Việc các doanh nghiệp đang dần hoàn thiện bộ máy tổ chức một cách linhhoạt nhất và việc ứng dụng công nghệ thông tin vào mọi hoạt động kinh doanhcủa doanh nghiệp là một việc làm tất yếu,

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

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

MỞ ĐẦU

Ngày nay cùng với sự bùng nổ của Internet, ngày càng mở rộng ở khắpnơi trên thế giới, chỉ cần máy tính kết nối Internet thì việc sử dụng nguồn tàinguyên này là vô cùng phong phú

Việc các doanh nghiệp đang dần hoàn thiện bộ máy tổ chức một cách linhhoạt nhất và việc ứng dụng công nghệ thông tin vào mọi hoạt động kinh doanhcủa doanh nghiệp là một việc làm tất yếu, một trong những cải tiến đó là doanhnghiệp đã chủ động xây dựng những trang thông tin của riêng mình để quảng báhình ảnh của công ty, mặt khác là để kinh doanh trực tuyến, áp dụng thương mạiđiện tử vào trong thương mại

Và một trong những công cụ hữu ích nhất cho việc phát triển này đó làxây dựng được một dự án công nghệ thông tin hoàn chỉnh, đáp ứng được cácnhu cầu của người dùng

Đối với ngành công nghệ thực phẩm, việc ứng dụng công nghệ thông tincũng giúp cho các doanh nghiệp xử lý công việc chính xác, hiệu quả, tiết kiệmchi phí, quảng bá hình ảnh doanh nghiệp rộng rãi trong nước và quốc tế, mặtkhác còn khắc phục được những yếu kém trong công tác quản lý nội bộ củadoanh nghiệp và khách hàng Từ những kiến thức được học, em đã tìm hiểu về

đề tài “Xây dựng trang web shop thời trang”

LỜI CẢM ƠN

Để hoàn thành đề tài này, em xin gửi lời cảm ơn chân thành đến cô giáo DươngThị Mai Nga- giảng viên Khoa Công nghệ thông tin và Truyền thông (CNTT & TT)Đại học Đà Nẵng – Người hướng dẫn chính - đã tận tình chỉ bảo và hướng dẫn em đểhoàn thành đồ án

Em cũng xin cảm ơn thầy cô Khoa CNTT & TT đại học Đà Nẵng đã truyền đạtcho em kiến thức cũng như kỹ năng để hoàn thành bài đồ án này

Trong quá trình làm đồ án còn nhiều thiếu sót, em rất mong nhận được sự chỉbảo, đóng góp ý kiến của các thầy cô để em có điều kiện bổ sung, khắc phục nhữnghạn chế của bài đồ án cơ sở này

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

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

NHẬN XÉT

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

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU 1

1.1 Tổng quan 1

1.1.1 Lí do chọn đề tài 1

1.1.2 Mục tiêu đề tài 1

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

1.2.1 Phương pháp thực hiện 1

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

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 4

2.1 Cơ sở lý luận và thực tiễn 4

2.1.1 Khái niệm website 4

2.1.2 Có hai loại web: Web tĩnh và Web động: 4

2.1.3 Lịch sử hình thành và phát triển của website 4

- Chi phí thấp so với các ấn phẩm thông thường 6

- Thị trường mở rộng 6

- Đa dạng hóa doanh thu 6

- Phục vụ 24/7 và 365 ngày 6

- Thuận tiện 6

CHƯƠNG 3 PHƯƠNG PHÁP NGHIÊN CỨU 7

1.1 Giới thiệu về đồ án 7

3.1.1 Các phương pháp công nghệ sử dụng trong đồ án 7

3.1.2 Hình thức thể hiện đồ án: 7

3.1.3 Quy mô đồ án 7

3.2 Phương pháp nghiên cứu 7

3.2.1 Phương pháp 1: Nghiên cứu thực tế 7

3.2.2 Phương pháp 2: Đọc và tham khảo sách báo 8

3.2.3 Phương pháp 3: Tham khảo trên Internet 8

Kết luận: Kết hợp cả 3 phương pháp để có thể nhận được một thông tin chính xác góp phần hoàn thiện trang web giúp trang web trở nên hữu ích, dễ dàng cho người dùng 8

CHƯƠNG 4 PHÂN TÍCH THIẾT KẾ 9

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

4.1.1 Biểu đồ phân tích thiết kế hướng đối tượng 9

4.1.2 Mô tả hệ thống 9

4.2Thiết kế chi tiết: 9

4.2.1 Thiết kế trên phần mềm Visual studio code: 9

4.2.2 Lý do chọn: 9

CHƯƠNG 5 TRIỂN KHAI XÂY DỰNG 11

5.1 Code trên Visual studio code : 11

CHƯƠNG 6 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 13

DANH MỤC HÌN

Hình 1 Trang chủ 2

Hình 2 Sản phẩm 2

Hình 3 Giới thiệu 3

Hình 4 Hướng dẫn đặt hàng 3

Hình 6 Bố cục rõ ràng, đơn giản bắt mắt 7

Hình 7 Code CSS 11

Hình 8 Thanh menu 11

Hình 9 Code đăng nhập 12 Y

CHƯƠNG 1: GIỚI THIỆU

1.1 Tổng quan

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

- Ngày nay, bán hàng trực tuyến đã và đang được phổ biến rộng rãi trên thếgiới, hình thức bán hàng này không chỉ giúp cho nhà phân phối sản phẩm tiết kiệm được nhiều chi phí về quản lý, kho bãi mà còn giúp cho người tiêu dùng cập nhập thông tin về sản phẩm một cách nhanh chóng, đầy đủ, tiết kiệm chi phí, thời gian đi lại Thay vì một phòng trưng bày thì giờ đây trang web sẽ hiển thị tất cả các sản phẩm và khách hàng có thể đặt mua bất cứ lúc nào và ở bất cứ nơi đâu Cùng với một giao diện thân thiện, trang web sẽ giúp khách hàng dễ dàng lựa chọn và mua những sản phẩm mình thích

1.1.2 Mục tiêu đề tài

 Tạo ra một website có thể:

 Tăng cơ sở khách hàng hiện có, tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng

 Nơi giao tiếp hiệu quả với khách hàng

 Cung cấp cho khách hàng cơ hội mua hàng hóa và sử dụng dịch vụ với sự trợ giúp của hệ thống thanh toán điện tử mà không cần rời khỏi nhà

 Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên

về các hoạt động của công ty và phạm vi dịch vụ được cung cấp;

- Em đã tạo nó những tính năng mà một trang web bán hàng cần có nhưgiới thiệu, tìm kiếm, giỏ hàng,sản phẩm, hổ trợ…

Hình 2 Sản phẩm

- Em cũng tạo cho trang web một trang hướng dẫn khách hàng cách thứcđặt hàng và thanh toán.

Hình 4 Hướng dẫn đặt hàng

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 Cơ sở lý luận và thực tiễn

2.1.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 giaothức HTTP Trang mạng có thể được xây dựng từ các tệp tin HTML (trangmạ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ầ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ành windows và được thay thế bởi Edge trên Windows 10 hayChrome được phát triển bởi Google và Firefox được phát triển bởi Mozilla

Để 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àntoà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ảntrị để 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âydựng website động bao gồm PHP, ASP.NET, Java,

2.1.3 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ếthà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 Internetnhư một phương tiện để giao tiếp như thư điện tử, trò chuyện toàn cầu và mạngtoàn cầu.

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ứuthông qua Internet Berners-Lee muốn rằng đó không chỉ là cách in các văn bảntrự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àiliệ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ốngtương tự, và vào khoảng những năm 80, các ứng dụng như Ngôn ngữ đánh dấutổ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ảicá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ũngnhư 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ănbả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ọcIllinois 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ả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ập Netscape Communications, đánh dấu cho sự khởi đầu củacuộc cách mạng Internet

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áttriể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òncầ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

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

- 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 3 PHƯƠNG PHÁP NGHIÊN CỨU

3.1 Giới thiệu về đồ án

3.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 Bootstrap và 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, còn Bootstrap giúp tạo giao diện web đẹp mắt với hiệu ứng sinhđộng

Website được code trên phần mềm Visual studio code là một phần mềmphổ biến hiện nay giúp người dùng linh động, dễ dàng có thể tạo rawebsite

3.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 dungtừng trang web Các trang web là các trang riêng biệt, có bố cục khá tươngđồng, đượ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,đơn giản dễ dàng sử dụng 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

Hình 5 Bố cục rõ ràng, đơn giản bắt mắt

3.1.3 Quy mô đồ án

Trang web gồm 6 trang chính Mỗi trang có bố cục khá giống nhau, xuyên suốttoàn bộ trang web Trang web không chỉ giới thiệu, mua bán mà còn cập nhậtthông tin nhanh chóng về tin tức hay xu hướng thời trang từng ngày

3.2 Phương pháp nghiên cứu

3.2.1 Phương pháp 1: Nghiên cứu thực tế

Em đã đi thực tế một số địa điểm, trải nghiểm một số shop thời trang.Vìkiện không cho phép nên trong phương pháp này nhóm chúng em chưathực sự đúc kết được nhiều thông tin

3.2.2 Phương pháp 2: Đọc và tham khảo sách báo

Sách báo nói về thời trang theo em được biết là vô cùng nhiều, nhómchúng em có tham khảo qua một vài trang báo thời trang, những quyểnsách nói về th

Tuy việc đúc kết thông tin từ sách báo tuy ưu điểm hơn phương pháp 1nhưng lại tốn kém rất nhiều thời gian

3.2.3 Phương pháp 3: Tham khảo trên Internet

Phương pháp này theo em nghiên cứu là một phương pháp tối ưu nhất,nhanh nhất mà thông tin nhận được vô cùng nhiều, chúng em đã thu thậpthông tin từ cả 3 phương pháp nhưng đa phần phương pháp 3 này chiếmphần lớn

Table 1

Bảng 1 Bảng so sánh các phương pháp

Kết luận: Kết hợp cả 3 phương pháp để có thể nhận được một thông tin chính

xác góp phần hoàn thiện trang web giúp trang web trở nên hữu ích, dễ dàng chongười dùng

Chưa ưu việt

- Được

CHƯƠNG 4 PHÂN TÍCH THIẾT KẾ

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

4.1.1 Biểu đồ phân tích thiết kế hướng đối tượng

4.1.2 Mô tả hệ thống

Thông qua website, người dung có thể:

+ Chỉnh sửa, xóa thông tin cá nhân

+ Tìm kiếm trang phục mà mình ưa thích

+ Lựa chọn và đặt hàng

4.2Thiết kế chi tiết:

4.2.1 Thiết kế trên phần mềm Visual studio code:

Visual studio code là một phần mềm khá được ưa chuộng với lập trình viên hiệnnay

 Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux vàmacOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem

là một sự kết hợp hoàn hảo giữa IDE và Code Editor

 Hỗ trợ nhiều ngôn ngữ lập trình phù hợp với nhu cầu của lập trình viên

 Là một công cụ có thể sử dụng miễn phí và cũng có thể trả phí

4.2.2 Lý do chọn:

 Visual studio code khác với các IDE khác ở điểm rất nhẹ, linh hoạt,cài đặt dễ dàng, dễ sử dụng, cung cấp nhiều tính năng tiện lợi cho cáclập trình viên

Hệ Thống Website thời trang

USER

Đăng kí, đăng

nhập

Sửa ,xóa thông

 Thời gian khởi động của Visual studio code rất nhanh, rơi vào khoảng1-2 giây, khác với các IDE khác chúng ta thường phải chờ tầm 10giây để mở lên.

 Visual studio code cho phép chúng ta tùy biến thông qua việc cài đặtcác extensions hoặc các Automation Task

 Visual studio code có giao diện người dùng trực quan, đơn giản, dễ sửdụng

 Hỗ trợ nhiều chức năng mạnh mẽ có thể mở rộng thêm thông quaPackage Control

 Hỗ trợ nhận diện, tô màu từ khóa cho hơn 20 ngôn ngữ khác nhaunhư HTML, CSS, Javascript, PHP, …

 Visual studio code hỗ trợ trên nhiều nền tảng hệ điều hành khác nhau

CHƯƠNG 5 TRIỂN KHAI XÂY DỰNG5.1 Code trên Visual studio code :

- Sử dụng CSS, Bootstrap và Javascrip để code

- Xây dựng code đăng nhập cho user: thực hiện nhờ Javascrip và CSSkết hợp với nhau tạo giao diện sinh động

Hình 8 Code đăng nhập

CHƯƠNG 6 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kết luận

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à xemthông tin

 Cho phép user thực hiện được các chức năng sửa, thêm hang vào giỏ, xóathông tin cá nhân

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

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

Hướng phát triển

 Xây dựng được giao diện thân thiện hơn với người dùng

 Kiểm tra các trường hợp còn thiếu sót

 Tận dụng thế mạnh của ngôn ngữ lập trình

 Xây dựng thêm nhiều chức năng để hệ thống đầy đủ và toàn vẹn hơn

 Tìm hiểu xu hướng của người dùng để chỉnh sửa, bổ sung hệ thống phù hợptheo yêu cầu