Đồ Án Cơ Sở 1 Đề Tài Thiết Kế Website Bán Laptop.doc

MẪU ĐỒ ÁN KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT TT VIỆT HÀN ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI THIẾT KẾ WEBSITE BÁN LAPTOP 1 MỞ ĐẦU 2 1 Lí do chọn đề tài Trong thời đại ngày nay, đất nước ta đang[.]

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

ĐỒ ÁN CƠ SỞ 1

MỞ ĐẦU

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

- Trong thời đại ngày nay, đất nước ta đang hội nhập vào công nghệ 4.0 cùng

với sự phát triển nhanh chóng của công nghệ thông tin được áp dụng trên mọi lĩnh vực sống như kinh tế, chính trị, ăn hóa xã hội,… tất cả đều cần có công nghệ thông tin

- Để khách hàng trên internet biết đến doanh nghiệp mình nhiều hơn, theo quy luật tất yếu có cung thì sẽ có cầu và từ đó website thương mại điện tử cũng ra đời nhằm đáp ứng nhu cầu giao dịch giữa khách hàng và doanh nghiệp và ngược lại Chính vì vậy nhu cầu có một website thương mại điện tử để giao dịch trên mạng của doanh nghiệp tang cao

- Trong quá trình khảo sát và tìm hiểu, nắm bắt được nhu cầu của các doanh nghiệp hiện nay là cần một website thương mại điện tử Vì thế em dã chọn đề

tài “THIẾT KẾ WEBSITE BÁN LAPTOP”.

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

- Mục đích của em là xây dựng phần mềm ứng dụng được kết nối trên đường dây internet vụ phụ nhu cầu mua bán hàng hóa trực tuyến Người mua hàng chỉ cần tốn thời gian để dăng kí trực tuyến các thông tin của mình sau khi đã tìm hiểu đẩy thông tin cần thiết khi đặt hàng Khách hàng chấp nhận mua hàng, hệ thống báo cho khách hàng biết đã mua thành công Và công ty sẽ giao hàng đến địa chỉ khách hàng đã cung cấp

- Xây dựng một hệ thống hỗ trợ cho việc bán hàng trực tuyến trên internet:

+ Nhanh chóng, hiệu quả

+ Đảm bảo chính xác, tiện lợi và dễ dàng sử dụng ccho khách hàng + Thuận tiện trong việc bán và mua hàng

Chương 1

LỜI CẢM ƠN

Lời đầu tiên cho phép chúng em gửi lời cảm ơn tới các thầy cô giáo các cán bộ công tác tại Trường ĐH Công Nghệ Thông Tin đã tạo mọi điều kiện giúp đỡ để chúng em trong thời gian xây dựng và hoàn thành đồ án

Đặc biệt chúng em xin bày tỏ lòng biết ơn sâu sắc tới cô giáo Ninh Khánh Chi người

đã tận tình giúp đỡ, chỉ bảo về nghiệp vụ và trực tiếp hướng dẫn chúng em trong suốt quá trình hoàn thành đồ án này

Tuy nhiên do thời gian có hạn và cùng với nhiều nguyên nhân khác, mặc dù em đã nỗ lực hết mình xong đồ án của chúng em vẫn còn mắc phải những thiếu sót và hạn chế

Em rất mong nhận được sự thông cảm và chỉ bảo của các Thầy Cô cùng tất cả các bạn

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

M ỤC LỤC

MỞ ĐẦU 3

LỜI CẢM ƠN 4

NHẬN XÉT 5

MỤC LỤC 7

CHƯƠNG 1: CƠ SỞ LÍ THUYẾT 9

1.1.Giới thiệu về ngôn ngữ HTML, CSS, BOOTSTRAP 9

1.1.1 HTML là gì? 9

1.1.2 CSS là gì? 9

1.1.3.BOOTSTRAP là gì? 9

1.2.Giới thiệu về phần mềm Visual Studio Code 9

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 12

2.1 Mô tả chức năng 12

2.2 Yêu cầu đặt ra 12

CHƯƠNG 3 WESITE BÁN LAPTOPVIET 13

3.1 Giao diện Menu 13

3.2 Giao diện trang đăng nhập 14

3.4 Giao diện Main Content 16

3.5 Giao diện Footer 19

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

4.1 Kết quả đạt được 20

4.2 Hạn chế 20

4.3 Hướng phát triển 20

TÀI LIỆU THAM KHẢO 21

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

3 Hyper Text Markup Language HTML

CHƯƠNG 1: CƠ SỞ LÍ THUYẾT

1.1.Giới thiệu về ngôn ngữ HTML, CSS, BOOTSTRAP.

1.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ên các trang web trên World Wide Web

1.1.2 CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dung để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu

1.1.3.BOOTSTRAP là gì?

Bootstrap là một framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo một chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,

1.2.Giới thiệu về phần mềm Visual Studio Code

VisualCode là gì?

VisualCode là một công cụ soạn thảo mã nguồn do Microsoft phát triển, được giới thiệu lần đầu vào năm 2015 và chính thức phát hành năm 2016 VSCode có thể cài đặt và sử dụng trên cả Windows, MacOS và Linux VSCode là mã nguồn

mở và nó hoàn toàn miễn phí

Có thể nói VisualCode là sự kết hợp tuyệt vời giữa tính đơn giản của một editor

và các công cụ hỗ trợ mạnh mẽ dành cho lập trình viên như Debugger, Git, Terminal và còn nhiều hơn nữa Đúng vậy, nhìn chung thì VSCode vẫn chỉ là một Code Editor nhưng độ hữu ích thì không kém cạnh IDE nào

Những tính năng mạnh mẽ của VisualCode

Nói đến những tính năng hỗ trợ lập trình viên thì từ lúc bắt đầu, VSCode đã cho thấy sự vượt trội so với các Code Editor khác Tiêu biểu trong số các tính năng này có thể kể đến như:

IntelliSense là sự kết hợp giữa code auto-complete và trí tuệ nhân tạo (AI) Tính năng này cung cấp một loạt các đề nghị cùng với gợi ý hoặc mô tả ngắn khi ta đang viết code Những gợi ý này được tính toán dựa theo các nhân tố bối cảnh như ngôn ngữ lập trình, cú pháp, biến, hàm, cũng như các code trong file

Hầu hết các Code Editor hiện đại đều có IntelliSense, nhưng ít phần mềm nào chuyên nghiệp bằng VisualCode Đây là tính năng nâng cao hiệu suất lập trình và không thể thiếu đối với lập trình viên chuyên nghiệp

VisualCode cung cấp sẵn IntelliSense cho các ngôn ngữ lập trình JavaScript, CSS, HTML, TypeScript Ngoài ra bạn cũng có thể cài thêm IntelliSense cho các ngôn ngữ khác thông qua extension, hoặc bạn cũng có thể tự custom tính năng này cho phù hợp với mình, tiện quá đúng không nào!

2.Tích hợp sẵn Git

Nhu cầu làm việc nhóm và lưu trữ là không thể thiếu, vì vậy tích hợp Git vào Code Editor như một tính năng cơ bản là sự lựa chọn đúng đắn Git trên VisualCode cung cấp cho bạn những git action cơ bản như commit code, pull, push,… Và từng phiên bản thì việc hỗ trợ Git càng đầy đủ

3.Debugger

Một trong những tính năng chính của VisualCode chính là khả năng hỗ trợ debug tuyệt vời Theo mặc định, VisualCode chỉ kèm theo trình Debug hỗ trợ NodeJS Nhưng tất nhiên, một lần nữa, bạn cũng có thể cài thêm các extension để debug cho các ngôn ngữ khác

4.Tích hợp Terminal

Teminal là một chương trình giao diện cửa sổ dòng lệnh(Command line

interface) Cũng như Git, nhu cầu sử dụng terminal của lập trình viên là vô cùng quan trọng Trên VisualCode, bạn có thể mở một hoặc nhiều tab terminal tại thư mục làm việc hiện tại, điều này làm tăng hiệu suất công việc lên rất nhiều đấy

5.Khả năng tùy chỉnh và mở rộng

VisualCode cung cấp một khả năng tùy chỉnh tuyệt vời dành cho người dùng, từ theme, font chữ, kích thước đến tùy chỉnh tính năng, keyboard shortcut, snippets, coding style,… đều vô cùng linh hoạt Ngoài ra bạn còn có thể tùy chỉnh trên từng workspace rất tiện lợi cho từng loại dự án

Cũng như các Code Editor/IDE khác, VisualCode cũng có khả năng mở rộng

thông qua việc cài thêm các extension

1.3 Giới thiệu về môi trường hoạt động Chrome

Google lấy thông tin từ nhiều nguồn khác nhau, bao gồm:

- Trang web.

- Nội dung do người dùng gửi, chẳng hạn như nội dung người dùng gửi trong Google Doanh nghiệp của tôi và Maps.

- Nội dung quét từ sách.

- Cơ sở dữ liệu công khai trên Internet.

- Và nhiều nguồn khác.

Tuy nhiên, trang này sẽ tập trung vào các trang web.

Google thực hiện ba bước cơ bản để tạo kết quả từ các trang web

1.Thu thập dữ liệu

Bước đầu tiên là tìm những trang tồn tại trên web Google không lưu giữ một danh mục trung tâm về mọi trang web, do đó, chúng tôi phải liên tục tìm kiếm các trang mới và thêm những trang đó vào danh sách các trang đã biết Google biết đến một số trang vì chúng tôi đã truy cập các trang đó từ trước Google tìm thấy các trang khác khi đi theo đường liên kết từ một trang đã biết đến một trang mới Ngoài ra, chúng tôi cũng phát hiện một số trang khác khi chủ sở hữu trang web gửi danh sách các trang để Google thu thập dữ liệu Nếu bạn đang sử dụng một nhà cung cấp dịch vụ lưu trữ web được quản lý, thì họ có thể yêu cầu Google thu thập dữ liệu mọi trang bạn mới tạo hoặc cập nhật

Khi phát hiện ra URL của một trang, Google sẽ truy cập hoặc thu thập dữ

liệu trang đó để tìm hiểu nội dung trên trang Google hiển thị trang và phân tích

cả nội dung văn bản lẫn nội dung không phải văn bản cũng như bố cục hiển thị tổng thể để quyết định vị trí của trang trong kết quả của Tìm kiếm Càng hiểu rõ

về trang web của bạn bao nhiêu thì Google càng có thể hiển thị trang cho những người đang tìm kiếm nội dung của bạn một cách phù hợp bấy nhiêu

2.Lập chỉ mục

Sau khi tìm thấy một trang, Google sẽ cố gắng tìm hiểu nội dung của trang đó Quá trình này gọi là lập chỉ mục Google phân tích nội dung của trang, lập danh mục hình ảnh và tệp video nhúng trên trang và cố gắng tìm hiểu trang theo cách

khác Thông tin này được lưu trữ trong chỉ mục của Google – một cơ sở dữ liệu

khổng lồ lưu trữ trong rất nhiều máy tính

3.Phân phát (và xếp hạng)

Khi người dùng nhập cụm từ tìm kiếm, Google sẽ cố gắng tìm câu trả lời phù hợp nhất trong chỉ mục của chúng tôi dựa trên nhiều yếu tố Google cố gắng xác định các câu trả lời có chất lượng cao nhất và xem xét những yếu tố sẽ cung cấp trải nghiệm người dùng tốt nhất và câu trả lời phù hợp nhất, như vị trí, ngôn ngữ và thiết bị của người dùng (máy tính hoặc điện thoại) Ví dụ: dù cùng tìm kiếm "cửa hàng sửa xe đạp" nhưng người dùng ở Paris và người dùng ở Hong Kong sẽ nhận được những kết quả khác nhau Google không nhận tiền để xếp hạng các trang cao hơn và quy trình xếp hạng được thực hiện theo chương trình

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ

THỐNG

2.1 Mô tả chức năng

Đâ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ười tiêu dùng với các chi tiết mặt hàng với giá cả chính xác Có các chức năng sau:

- Hiển thị danh sách các mặt hàng theo từng loại.

- Hiển thị hàng hóa khách hàng đã chọn mua.

- Quản lý đơn đặt hàng.

- Cập nhật hàng hóa, nhà sản xuất, loại hàng, tin tức.

- Xử lý đơn hàng.

2.2Yêu cầu đặt ra

Thứ nhất: Dành cho khách hàng: 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

- Sau khi khách hàng chọn và đặt hàng trực tiếp thì phải hiện lên đơn hàng

để khách hàng có thể nhập thông tin mua hàng và xem hóa đơn mua hàng.

Thứ hai: Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiểm

soát mọi hoạt động của hệ thống Người này được cấp username và passwword để đăng nhập hệ thống thực hiện chức năng của mình:

-Chức năng cập nhật, sửa, xóa các mặt hàng, loại hàng, nhà sản xuất, tin tức Nó đòi hỏi sự chính xác.

-Tiếp nhận kiểm tra đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng -Thống kê theo ngày, khoảng thời gian.

Điều quan trọng là phải đảm bảo an toàn tuyệt đối thông tin khách hàng trong quá trình đặt mua Đồng thời trang Web phải luôn đổi mới, hấp dẫn

CHƯƠNG 3 WESITE BÁN LAPTOPVIET

3.1 Giao diện Menu

+Tên hãng laptop

+Laptop

+Phụ kiện

+Trả góp

+Hỏi đáp

+Khuyến mãi

+Đăng Nhập/Đăng ký

-Khi ta kích vào LAPTOP sẽ dropdown ra nhiều hãng laptop, PHỤ KIỆN cũng tương tự như vậy Ngoài ra còn có thể chọn các hãng được sổ xuống

sẽ di chuyển tới xuống trang đó.

-Kích vào TRẢ GÓP và HỎI ĐÁP sẽ hiện ra thông báo tính năng đang hoàn thiện.

-Kích vào ĐĂNG NHẬP/ĐĂNG KÝ sẽ hiện ra bảng để đăng nhập cho người đã có tài khoản, và đăng ký dành cho người chưa có tài khoản.

1.1 Giao diện trang đăng nhập

-Trang dùng để đăng nhập tài khoản hoặc đăng kí tài khoản mới và cấp lại mật khẩu.

-Sau khi đăng nhập đầy đủ thông tin và chọn đăng nhập ngay sẽ tới trang chủ của trang LapTopViet

-Tạo tài khoản và quên mật khẩu chưa hoàn thiện nên chưa thể dùng được

3.2 Giao diện Banner

-Có ba hình ảnh dùng để quảng cáo, cách vài giây sẽ tự sang hình ảnh khác hoặc có thể kích vào dấu mũi tên để nhảy sang ảnh khác nhanh hơn

mà không chờ đợi.

-Phía dưới Banner còn có nút LỌC và thanh tìm kiếm.

-Nút LỌC gồm có:

+Các hãng latop

+Các giá tiền

+Các phụ kiện

3.4 Giao diện Main Content

-Đây là phần chính của trang web chứa từng hãng Laptop trong nhiều khung.

-Góc trái của mỗi khung có tên của từng hãng Laptop Mỗi khung có nhiều ô nhỏ, mỗi ô chứa hình ảnh và thông tin về từng loại laptop như sau:

+TÊN LAPTOP

+ RAM

+CPU

+DISK

+LCD

-Khi kích vào Mua Ngay sẽ hiện ra nhiều thông tin chi tiết và thông số kỹ

thuật của loại laptop đó.

-Khi khách hàng chọn sản phẩm vừa ý có thể bấm ngay nút Mua Ngay phía dưới sẽ xuất hiện bảng Thông Tin Khách Hàng, điền thông tin đầy đủ và bấm nút Mua Ngay trang sẽ thông báo cảm ơn bạn đã mua hàng.

-Ngoài các hãng laptop ra thì còn có các phụ kiện như sau :

+Hàng đầu là phụ kiện loa gồm có hình ảnh, giá tiền và tên của sản phẩm.

+Hàng thứ 2 là phụ kiện tai nghe cũng gồm có hình ảnh, giá tiền và tên của các loại tai nghe.

+Hàng tiếp theo là phụ kiện dây sạc luôn đi kèm và không thể thiếu cho laptop cũng gồm hình ảnh, giá tiền và tên của mỗi hãng laptop khác nhau -Cách xem thông tin và mua hàng giống như laptop.

3.5 Giao diện Footer

-Phần cuối của trang web

là chân trang thường chứa các thông tin như thông báo bản quyền và thông tin liên lạc

+Phía góc trái là bản quyền:@Coppy Right

+Ở giữa là thông tin liên lạc: Email và Phone

+Phía góc phải là năm bản quyền: 2021

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT

TRIỂN

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

-Nắm bắt được một số khái niệm cơ bản phục vụ cho việc viết báo cáo

-Trình bày được báo cáo một cách khoa học và có hệ thống những kiến thức hiểu biết của bản thân, có tham khảo các tài liệu về các vấn đề có liên quan đến nội dung tìm hiểu, nghiên cứu

-Trong thời gian làm đề tài đã hoàn thiện thêm kiến thức đã được học ở trường trong suốt học kì

-Tăng khả năng tư duy logic, có thể nghiên cứu độc lập một vấn đề mà trước đây chúng em không mấy quan tâm

-Về cài đặt chương trình:

+Giới thiệu các mặt hàng kinh doanh đến với khách hàng

+Cho phép tra cứu mặt hàng khi khách hàng có nhu cầu tìm hiểu và đặt mua hàng

+Cập nhật: Mặt hàng, khách hàng, đơn đặt hàng

+Thống kê: Chủng loại mặt hàng, tin tức

-Về tính năng chương trình:

+Thông tin về mặt hàng được cập nhật kịp thời, chính xác

+Giao diện thân thiện với người dùng

1.3 Hạn chế

-Mặc dù đã có nhiều cố gắng, tìm hiểu kiến thức đã học, kết hợp tra cứu các tài liệu chuyên ngành nhưng do hạn chế về khả năng và kinh nghiệm nên không thể tránh khỏi những thiếu sót nhất định

-Báo cáo chưa giải quyết được trọn vẹn những vấn đề phát sinh trong quá trình quản lý

-Báo cáo chưa đạt tính thẩm mĩ cao, phong cách hành văn còn lủng củng, còn nhiều vấn đề chưa chính xác cần khắc phục trong quá trình phát triển, nâng cấp phần mềm giai đoạn sau

1.4 Hướng phát triển

- Mở rộng mô hình qua từng năm

- Tiếp cận đến nhiều đối tượng nhất là ở những nơi khó khăn

- Xây dựng chiến lược kinh doanh, phát triển mô hình bền vững

- Mở rộng thị trường hướng đến quốc tế

-Tìm hiểu thêm một số ngôn ngữ, các phần mềm ứng dụng để nâng cao giao diện

đồ họa đẹp mắt, sinh động hơn

Xây dựng trang Web quy mô lớn hơn với nhiều ứng dụng

TÀI LIỆU THAM KHẢO

[1] https://vi.wikipedia.org/wiki/HTML

[2] https://www.hostinger.vn/huong-dan/css-la-gi - Tác giả: Hai G [3]

https://viblo.asia/p/bai-1-bootstrap-la-gi-gioi-thieu-ve-bootstrap-DzVkpLbDknW - Tác giả: Pham Thi Ngoc Mai

[4] https://www.marketenterprise.vn/blog/gioi-thieu-ve-visual-studio-code-ky-i.html#:~:text=VSCode%20l%C3%A0%20m%E1%BB%99t%20c%C3%B4ng

%20c%E1%BB%A5,n%C3%B3%20ho%C3%A0n%20to%C3%A0n%20mi

%E1%BB%85n%20ph%C3%AD – Tác giả: Trung Dang

[5] https://developers.google.com/search/docs/beginner/how-search-works?hl=vi [6]

https://tailieu.vn/doc/bao-cao-xay-dung-website-ban-hang-qua-mang-426706.html - Tác giả: Nguyen Thi Thanh Huyen

[7] https://tailieumienphi.vn/doc/do-an-tot-nghiep-xay-dung-website-ban-hang-truc-tuyen-l3e8tq.html - Tác giả: Truong Cong Tra