Đồ án cơ sở 1 thiết kế website kinh doanh thiết bị Điện tử

Trong quá trình rèn luyện, học tập chúng em đã tiếp thu nhữngkiế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âygiờ chúng em hoàn thành bài đồ á

KHOA KỸ THUẬT MÁY TÍNH & ĐIỆN TỬ

ĐỒ ÁN CƠ SỞ 1

THIẾT KẾ WEBSITE KINH DOANH THIẾT BỊ ĐIỆN TỬ

Sinh viên thực hiện: Võ Hoàng Khôi Nguyên MSV:22CE.B020 Nguyễn Văn Quân MSV:22CE067 Lớp: 22CEB - 22CE

Giảng viên hướng dẫn: Th.S Bạch Như Nguyện

Đà nẵng,tháng 5 năm 2023

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN-TRUYỀN THÔNG VIỆT-HÀNVIETNAM-KOREA University of Information and Comunication Technology

_

KHOA KỸ THUẬT MÁY TÍNH & ĐIỆN TỬ

ĐỒ ÁN CƠ SỞ 1

THIẾT KẾ WEBSITE KINH DOANH THIẾT BỊ ĐIỆN TỬ

Sinh viên thực hiện: Võ Hoàng Khôi Nguyên MSV:22CE.B015 Nguyễn Văn Quân MSV:22CE.B025 Lớp: 22CEB-22CE

Giảng viên hướng dẫn: Th.S Bạch Như Nguyện

Đà nẵng, tháng 5 năm 2023

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN-TRUYỀN THÔNG VIỆT-HÀNVIETNAM-KOREA University of Information and Comunication Technology

_

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

LỜI CẢM ƠN

Được sự giúp đỡ tận tình của TS Bạch Như Nguyện trong việc giảng dạy và giải đáp những lờithắc mắc của sinh viên chúng em Trong quá trình rèn luyện, học tập chúng em đã tiếp thu nhữngkiế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âygiờ chúng em hoàn thành bài đồ án nà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è khóa k22 đã luôn động viên và đánhgiá về bài đồ án này để chúng em có thể mài dũa tiếp thu nhiều điều tích cực mới khi làm đồ án cơ

sở 1 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ự đánh giá của mọi ngườinhưng nhờ sự đoàn kết của các bạn trong nhóm cũng như sự động viên các bạn trong lớp đã gópphần giúp chúng em hoàn thành đề tài này đúng thời hạn

Xin chân thành cám ơn!

MỤC LỤC

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

LỜI CẢM ƠN ii

MỤC LỤC iii

DANH MỤC HÌNH VẼ v

LỜI MỞ ĐẦU vi

I CƠ SỞ LÝ LUẬN 1

A TÊN ĐỀ TÀI 1

B LÍ DO 1

C MỤC ĐÍCH 1

D Ý NGHĨA 1

E PHƯƠNG PHÁP NGHIÊN CỨU 1

F PHẠM VI ĐỀ TÀI 1

G KẾT QUẢ DỰ KIẾN 1

II NỘI DUNG KẾT QUẢ NGHIÊN CỨU 2

A Thiết kế giao diện 2

1 Ý tưởng 2

2 Hiện thực hóa ý tưởng 2

3 Phân tích chức năng của trang web 2

B Hoàn thiện giao diện 2

1 Thiết kế giao diện Home : 2

2 Thiết kế giao diện Shop: 12

3 Thiết kế giao diện Products: 12

4 Thiết kế giao diện Blog: 12

5 Thiết kế giao diện About Us: 13

6 Thiết kế giao diện Contact: 13

III KIẾN NGHỊ VÀ KẾT LUẬN 13

A KẾT QUẢ 13

1 Trang web hoàn thiện: 13

2 Các chức năng có trong website: 13

B HẠN CHẾ 13

DANH MỤC HÌNH VẼ

Hình 1: Navigation Bar của trang web 3

Hình 2: Code HTML của Navigation Bar 4

Hình 3: Code CSS của Navigation Bar 5

Hình 4: Banner giới thiệu trang web 5

LỜI MỞ ĐẦU

Trên thế giới hiện nay, tin học là một ngành phát triển không ngừng Có thể nói tin học đã chiếm một vị trí quan trọng trong cuộc sống hàng ngày và trong các ngành khoa học kỹ thuật Trong những năm gần đây cùng với với sự phát triển chung của ngành tin học thế giới và khu vực, ngành tin học nước ta đã có bước phát triển nhất định

Việc đưa tin học vào công việc quản lý nhằm giảm bớt sức lao đọng của con người, tiết kiệm thời gian, độ chính xác cao và tiện lợi hơn rất nhiều so với việc làm quản lý giấy tờ bằng thủ công như trước đây Tin học nhằm thu hẹp không gian lưu trữ, tránh làm thất lạc dữ liệu, tự động hóa và cụ thể hóa các thông tin theo nhu cầu của con người Còn ở Việt Nam, nghành tin học tuy còn non trẻ nhưng cũng đang từng bước bứt phá được những thành công trong việc áp dụng tin học vào việc phát triển kinh tế, xã hội Tuy nhiên để có thể quảng bá hình ảnh sản phẩm và tin tức đến với nhiềungười dùng hơn nên họ đã phát triển ra các trang web để phổ biến tiếp cận đến nhiều người Cũng

từ đó ngành thiết kế website là một ngành vô cùng hot, chúng em đã chọn đề tài “ Thiết kế giao diện website mua bán thiết bị điện tử” cho đồ án cơ sở 1

Nhận thấy đây là một trong những ngành được ưa chuộng rất nhiều tại Việt Nam cũng như trên toàn thế giới Chúng em đã cảm thấy rất phấn khích khi nhận thấy điều đó và đã phải chuẩn bị rất nhiều thời gian, tài liệu để hoàn thành đồ án cơ sở lần này

Chúng em xin cảm ơn ThS.Bạch Như Nguyện đã hướng dẫn nhiệt tình giúp chúng em hoàn thành được đề tài của mình với sự chỉ dạy của c Trong quá trình làm bài, chắc chắn chúng em sẽ mắc phải những thiếu sót nên rất mong nhận được sự đóng góp ý kiến của cô để chúng em có cơ hội sửa sai, phát triển trong thực tế và từng bước hoàn thiện mình

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

C MỤC ĐÍCH

- Xây dựng một website kinh doanh thiết bị điện tử Bao gồm:

+ Giới thiệu các thiết bị điện tử, một số hình ảnh minh họa

+ Đưa ra địa chỉ email và số điện thoại nếu cần giao tận nơi

D Ý NGHĨA

Website mang lại cho các doanh nghiệp nói chung và doanh nghiệp bán thiết bị điện tử nóiriêng rất nhiều lợi ích như: Khả năng quảng cáo, phổ biến tên tuổi công ty trên môi trườngmạng toàn cầu; giảm thiểu chi phí nhân viên cho tiếp thị, quảng cáo; giúp doanh nghiệpcung cấp cho khách hàng những lựa chọn linh hoạt và tiện lợi trong việc tìm mua sảnphẩm thông qua trang web

E PHƯƠNG PHÁP NGHIÊN CỨU

- Phương pháp nghiên cứu tài liệu: Tham khảo, nghiên cứu một số tài liệu liên quan đến đềtài, cấu trúc của một trang website, kiến thức liên quan đến lập trình…

- Phương pháp nghiên cứu thực tiễn: Quan sát một số website liên quan đến đề tài

- Phương pháp chuyên gia: Tham khảo ý kiến của giảng viên hướng dẫn

F PHẠM VI ĐỀ TÀI

- Đề tài này được thực hiện trong khuôn khổ học tập và nghiên cứu tài liệu tham khảo

- Phục vụ cho việc kinh doanh thiết bị điện tử được đặt trước qua website

- Hướng tới những người đang cần mua một bộ PC của riêng mình

G KẾT QUẢ DỰ KIẾN

- Xây dựng một website kinh doanh thiết bị điện tử bao gồm giới thiệu các loạilinh kiện máy tính, một số hình ảnh minh họa đưa ra dịch vụ cho khách hàng nhậpđịa chỉ , email và số điện thoại nếu cần giao hang và lắp đặt tận nơi.

II NỘI DUNG KẾT QUẢ NGHIÊN CỨU

A Thiết kế giao diện

1 Ý tưởng

● Có 7 giao diện chính : Home , Shop , Blog , About , Contact , Login , Giỏ Hàng

● Giao diện được tạo sẽ là một trang gồm 3 phần: Header, Main và Footer

● Trong phần Header sẽ cho hiển thị logo và menu

● Trong phần Main của trang chủ trước hết sẽ để những banner và các list sản phẩm

mà chúng em muốn giới thiệu đến cho người dùng

● Footer là đích đến của phần liên hệ để dễ dàng liên hệ đến chúng mình hơn dành chongười dùng

2 Hiện thực hóa ý tưởng

- Sử dụng ngôn ngữ HTML,CSS,JS để code hoàn thành website đã được lên ýtưởng như trên Tham khảo các website có ý tưởng gần giống với ý tưởng đã lên gồmcó: Chợ tốt, Phong Vũ, GearVn,…

3 Phân tích chức năng của trang web

- Thứ nhất là chức năng xem các sản phẩm được trưng bày Click chọn vào cácmục lớn của sản phẩm sẽ cho ra những sản phẩm con trong mục đó để tham khảo tên,thông số kỹ thuật của sản phẩm cũng như giá của sản phẩm đó

- Thứ hai là chức năng liên hệ Click vào liên hệ để kéo trang xuống phần footer

để có thể xem chi tiết hơn về vị trí của cửa hàng, số điện thoại hay có thể liên hệ ngaylập tức đến với cửa hàng để có thể đặt hàng hay nhận được sự hỗ trợ từ của hàng

- Thứ ba là phần dịch vụ Click vào dịch vụ có thể đưa người dùng đến mộtform đăng ký để có thể đăng ký cũng như lấy suất để được hỗ trợ trước về vấn lắp đặtcũng như muốn mua các linh kiện máy tính của cửa hàng

B Hoàn thiện giao diện

1 Thiết kế giao diện Home :

a) Header

Hình 1: Navigation Bar của trang web

Code HTML :

Hình 2: Code HTML của Navigation Bar

Code CSS :

Hình 3: Code CSS của Navigation Bar

b) Main

● Banner

Hình 4: Banner giới thiệu trang web

- Code HTML :

- Code CSS :

- Code HTML :

- Code CSS :

- Code HTML :

- Code CSS :

● Main Content (Danh Sách Thiết Bị)

- Code HTML :

- Code CSS :

- Code HTML :

- Code CSS :

c) Footer

● Footer

- Code HTML :

- Code CSS :

2 Thiết kế giao diện Shop:a) Header :

b) Main :

c) Footer :

3 Thiết kế giao diện Products:

4 Thiết kế giao diện Blog:

5 Thiết kế giao diện About Us:

6 Thiết kế giao diện Contact:

III KIẾN NGHỊ VÀ KẾT LUẬN

A KẾT QUẢ

1 Trang web hoàn thiện:

2 Các chức năng có trong website:

- Hiển thị thông tin: Trang web có thể được sử dụng để hiển thị thông tin tĩnh,chẳng hạn như giới thiệu về công ty, sản phẩm và dịch vụ, thông tin liên hệ, câu hỏithường gặp, v.v

- Tương tác và giao tiếp: Một trang web có thể cung cấp các chức năng đểngười dùng tương tác với nội dung, bao gồm việc bình luận, đánh giá, chia sẻ trênmạng xã hội, gửi tin nhắn, v.v

- Quản lý nội dung: Trang web có thể cung cấp giao diện quản trị để ngườiquản trị có thể quản lý nội dung trên trang web, bao gồm việc thêm, sửa đổi hoặc xóabài viết, hình ảnh, video, v.v

- Tích hợp dịch vụ bên thứ ba: Trang web có thể tích hợp các dịch vụ bên thứ

ba như thanh toán trực tuyến, bản đồ, công cụ phân tích, hệ thống email, tích hợpmạng xã hội, v.v

- Tạo và quản lý tài liệu: Trang web có thể cung cấp chức năng tạo và quản lýtài liệu, bao gồm tải lên, lưu trữ, chia sẻ và tải về các tài liệu như tài liệu hướng dẫn,bài viết, bản tin, v.v

B HẠN CHẾ

Các vấn đề cần cải thiện:

- Không hỗ trợ giỏ hàng, không thể thực hiện quá trình mua bán sản phẩm trực tuyến

- Không có chức năng đăng nhập, ảnh hưởng đến tính bảo mật của trang web

- Giao diện trang web không sống động, không thu hút người dùng

- Bảo mật của trang web còn kém, dẫn đến nguy cơ bị tấn công và mất dữ liệu

- Chưa có danh sách động, dẫn đến khả năng hiển thị sản phẩm và nội dung trang web bị hạn chế Phải cập nhật thủ công, không có tính năng tự động cập nhật, tốn nhiều thời gian và công sức

- Thiếu chức năng tìm kiếm, gây khó khăn cho người dùng khi tìm kiếm thông tin sản phẩm hay dịch vụ cần thiết

- Chưa có kết nối với cơ sở dữ liệu, dẫn đến khả năng xử lý số lượng dữ liệu và thông tin sản phẩm

bị giới hạn

- Mã nguồn phức tạp và dài dòng, gây khó khăn trong việc bảo trì và phát triển trang web