Đồ án cơ sở 1 đề tài xây dựng website bán laptop

Cùng với đó sự ra đời của các ngôn ngữ lập trình cho phép thiết kế và xây dựng các ứng dụng thương mại điện tử dưới nhiều hình thức khác nhau.. Dịch vụ này cho phép người dùng tìm kiếm l

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

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

ĐỒ ÁN CƠ SỞ 1

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

Sinh viên thực hiện: LÊ ĐỨC THIỆN - 21AD056 HOÀNG HỮU TIẾN ĐẠT - 21AD011

Giảng viên hướng dẫn: ThS NGUYỄN ĐỖ CÔNG PHÁP

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

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

ĐỒ ÁN CƠ SỞ 1

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

Sinh viên thực hiện: LÊ ĐỨC THIỆN - 21AD056 HOÀNG HỮU TIẾN ĐẠT - 21AD011

Giảng viên hướng dẫn: ThS NGUYỄN ĐỖ CÔNG PHÁP

LỜI CẢM ƠN

Lời đầu tiên cho phép 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 Khoa Khoa Học Máy Tính – Trường ĐH Công Nghệ Thông Tin Và Truyền Thông Việt Hàn đã 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 em xin bày tỏ lòng biết ơn sâu sắc tới thầy Ths Nguyễn Đỗ

Công Pháp người đã tận tình giúp đỡ, chỉ bảo về nghiệp vụ và trực tiếp hướng dẫn

nhóm 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ù chúng em đã nỗ lực hết mình xong

đồ án của nhóm, tuy 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ùng tất cả các bạn

Sinh viên,

Hoàng Hữu Tiến Đạt Lê Đức Thiện

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

MỞ ĐẦU

Ngày nay, khoa học công nghệ đã có những bước phát triển mạnh mẽ cả về chiều rộng lẫn chiều sâu Máy tính điện tử không chỉ được coi là một phương tiện quý

hiếm mà nay đã trở thành một công cụ làm việc, giải trí thông dụng của con người không những ở công sở mà thậm chí còn ở ngay trong gia đình Trong thời buổi hiện nay, khi mà công nghệ phát triển, công nghệ thông tin phát triển trên thế giới cũng như Việt Nam và dần khẳng định được vị thế của mình trong nghành kinh tế thị trường Cùng với đó sự ra đời của các ngôn ngữ lập trình cho phép thiết kế và xây dựng các ứng dụng thương mại điện tử dưới nhiều hình thức khác nhau Và một trong những ứng dụng của thương mại diện tử phổ biến ở nước ta đó là kinh doanh bán hàng qua mạng internet Dịch vụ này cho phép người dùng tìm kiếm lựa chọn sản phẩm cần mua mà không cần phải đến trực tiếp của hàng mua về nhà, mà chỉ cần sử dụng thiết

bị máy tính hoặc điện thoại có kết nối internet để truy cập website

Tuy nhiên dịch vụ này vẫn còn khá mới đối với nhiều người, đặc biệt là những người không có kiến thức về công nghệ thông tin Nên hiện giờ các đối tượng chính của trang web vẫn chủ yếu là tầng lớp tri thức và học sinh, sinh viên Là những người sinh viên, cũng có chút kiến thức về tin học cũng như tiếp xúc nhiều về các dịch vụ kinh doanh và bán hàng trên mạng Hiểu được các vấn đề đó cũng như mong muốn đưa website bán máy tính xách tay đến với nhiều người tiêu dùng Vì vậy chúng em

quyết định thực hiện đề tài: “Thiết kế website bán máy tính xách tay”.

Đồ án cơ cở của em gồm ba chương:

- Chương 1: Tổng quan về đề tài

- Chương 2: Cơ sở lý thuyết

- Chương 3: Xây dựng Website

Những kiến thức, năng lực đạt được trong quá trình học tập của em trong một năm qua sẽ được đánh giá qua đợt bảo vệ đồ án cuối kỳ Sản phẩm là kết quả đạt được của những kiến thức đã được tích luỹ trong quá trình học tập và nghiên cứu Đây cũng

là sản phẩm đầu tiên của nhóm chúng em trong năm học thứ nhất tại trường

NHẬN XÉT

MỤC LỤC LỜI CẢM ƠN 3

MỞ ĐẦU 4

NHẬN XÉT 5

MỤC LỤC 6

1.1 Tổng quan về đề tài 8

1.1.1 Tên đề tài: Website bán máy tính xách tay 8

1.1.2 Lý do chọn đề tài: 8

1.1.3 Mục tiêu đề tài 8

1.1.4 Đối tượng phạm vi đề tài: 9

1.1.5 Tiêu chí chức năng của đề tài: 9

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

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

1.2.1 Phương pháp 11

1.2.2 Kết quả 11

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

1.1 Sơ lược về ngôn ngử lập trình HTML 12

1.2 Sơ lược về ngôn ngữ lập trình Web Bootstrap 12

1.3 Giới thiệu về phần mềm Visual Studio Code 12

1.3.1 Visual Code là gì? 12

1.3.2 Những tính năng mạnh mẽ của Visual Code 13

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

1.4.1 Thu thập dữ liệu 15

1.4.2 Lập chỉ mục 15

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

CHƯƠNG 3- XÂY DỰNG WEBSTIE 1.1 Giao diện Website 1.2 Kết luận và định hướng phát triển DANH MỤC HÌNH ẢNH Hình 1: Hình ảnh logo Website Hình 2: Giao diện trang chủ 16

Hình 3: Giao diện thông tin sản phẩm 17

Hình 4: Giao diện giỏ hàng 17

Hình 5: Giao diện đăng nhập 18

Hình 6: Giao diện đăng ký 18 Hình 7: Giao diện thanh toán 19 Hình 8: Thông báo thanh toán 19

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

STT Ký hiệu chữ viết tắt Chữ viết đầy đủ

3 VSCode Visual Studio Code

5 AI Artificial Intelligence

CHƯƠNG 1 – TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tổng quan về đề tài

1.1.1 Tên đề tài: Website bán Laptop

Hình 1 Hình ảnh logo website

1.1.2 Lý do chọn đề tài:

Kể từ khi đại dịch Covid-19 diễn ra, xu hướng làm việc tại nhà (work from home) dần trở nên phổ biến và có khả năng thay thế kiểu làm việc truyền thống tại văn phòng Dịch Covid-19 ảnh hưởng đến tất cả mọi thứ, khiến môi trường làm việc hiện nay đã thay đổi, yêu cầu sự cải tiến trong các giải pháp trực tuyến Làm việc tại nhà hay bất cứ đâu trở nên bình thường hóa ở thời điểm hiện tại Tuy nhiên, nhiều người

do vẫn làm việc theo hướng truyền thống tại văn phòng nên việc trang bị các thiết bị làm việc, học tập trực tuyến vẫn chưa được đầy đủ Nhận thức được nhu cầu cực kì lớn của người dùng trong thị trường máy tính nói chung và các thiết bị di dộng như laptop nói riêng, nhóm chúng em quyết định xây dựng một trang web cung cấp cho người dùng những mẫu laptop mới nhất với giá cả phù hợp với túi tiền của tất cả mọi người

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

Có 2 mục tiêu thực hiện nghiên cứu đề tài:

- Học tập và nghiên cứu các kiến thức như sau: Phân tích và hệ thống thông tin, cách xây dựng một trang web thương mại điện tử, HTML/CSS, JavaScript

- Xây dựng sản phẩm là trang “Website bán laptop” cung cấp một số chức

năng cơ bản để đáp ứng nhu cầu mua sắm trực tuyến của khách hàng

1.1.4 Đối tượng phạm vi đề tài:

- Đối tượng nghiên cứu:

+ Quy trình thực hiện và thiết kế website bán laptop trực tuyến bằng HTML/CSS và Javascript đảm bảo các chức năng cơ bản cho khách hàng

- Phạm vi đề tài:

+ Website bán laptop được áp dụng cho các cá nhân hay tổ chức muốn

sử dụng, kinh doanh máy tính xách tay bằng hình thức trực tuyến nhằm tiết kiệm chi phí mặt bằng, nguồn nhân lực, thời gian quản lý

+ Ngoài ra website khi được mở rộng có thể đáp ứng cho các công ty muốn mua lượng lớn máy tính xách tay cho nhân viên

1.1.5 Tiêu chí chức năng của đề tài:

- Sản phẩm là website “Bán laptop” với những chức năng cho hai đối tượng là khách hàng

- Một số tiêu chí chức năng:

+ Khách hàng:

* Giao diện web dễ sử dụng và có tính thẩm mĩ cao

* Giao diện web phải thiết kế sao cho nội dung hiển thị phải chính xác và đầy đủ thông tin nhất để đáp ứng nhu cầu của khách hàng

* Để thuận tiện cho việc mua bán và giao dịch, hệ thống cần phải cho phép người dùng đăng kí tài khoản, thông tin đăng kí phải được bảo mật an toàn, chính xác, tránh sai sót

* Để thuận tiện cho việc lựa chon sản phẩm hệ thống cung cấp chức năng cho phép khách hàng có thể tìm kiếm sản phẩm theo yêu cầu

* Để thuận tiện cho việc chọn mua sản phẩm hệ thống cho phép người truy cập hoặc người dùng xem chi tiết một mặt hàng bất kì

* Để tiến hành mua hàng hệ thống cho phép người truy cập hoặc người dùng được phép thêm sản phẩm bắt kì vào giỏ hàng

* Để thuận tiện cho khách hàng việc tính toán giá cả các mặt hàng hệ thống cho phép người truy cập hoặc người dùng xem chi tiết giỏ hàng hiện tại của họ

* Để thuận tiện cho mua hàng hệ thống cho phép người truy cập hoặc người dùng cập nhật số lượng, thêm, xóa các sản phẩm trong giỏ hàng của họ

- Nếu người dùng đã đăng nhập thì có thể thanh toán và tiến hành giao hàng

- Hình thức thanh toán phải dễ sử dụng và bảo mật

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

Thiết kế giao diện Website bán laptop nhằm để cung cấp cho tất cả mọi người Thiết kế giao diện website cho phép một dùng truy cập vào trang web một cách nhanh chóng mà không các thủ tục phức tạp Website công khai, minh bạch và cung cấp thông tin chính xác nhằm đem lại sự tin cậy cho người dùng

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

1.2.1 Phương pháp:

Trước tiên ta phải phân tích và thiết kế giao diện, hệ thống của website bằng phần mềm Dựa trên kiến thức đã học, chúng ta sử dụng các ngôn ngữ HTML, CSS, Bootstrap và một số công cụ lập trình như Sublime Text để thiết kế một website tĩnh Tham khảo, tiếp thu ý kiến, thông tin từ giảng viên hướng dẫn để hoàn thiện website tốt hơn phần mềm và ngôn ngữ sử dụng

1.2.2 Kết quả:

Giao diện hội tụ đủ ba yếu tố độc đáo, tinh tế và hiện đại Hình ảnh sắc nét và sống động Tiện lợi cho việc người dùng tìm và hiểu rõ hơn về các loại ngôn ngữ lập trình Tốc độ tải trang web nhanh Website có thể tương thích với mọi thiết bị di động hay máy tính trên thị trường Ngoài ra trang web được thiết kế dễ dàng sử dụng và tiện nâng cấp trong tương lai

Nhưng bên cạnh đó, trang web còn một số chức năng chưa hoàn thiện và chưa khai thác được nhiều nội dung Nhóm sẽ cố gắng cải tiến và khắc phục trong thời gian sớm nhất

CHƯƠNG 2 - CƠ SỞ LÝ THUYẾT 1.1 Sơ lược về ngôn ngữ lập trình HTML

HTML là chữ viết tắt của HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) HTML được sinh ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web HTML có thể được viết lên bởi các phần mềm, các trình soạn thảo văn bản thông thường như notepad++, editplus… hoặc các trình soạn thảo chuyên dụng như visual studio, sublime text 3… Một file HTML sẽ có hai định dạng mở rộng là html và htm

1.2 Sơ lược về ngôn ngữ lập trình Web CSS

CSS (Cascading Style Sheet) Web được cấu tạo từ các thẻ các html nhưng với các thẻ html thì mới thể hiện được bộ khung của website Để căn chỉnh, trình bày cho đẹp mắt thì ta cần sử dụng ngôn ngữ CSS Đây là ngôn ngữ được dùng nhiều trong ngôn ngữ website, thường đi cùng ngôn ngữ html

1.3 Sơ lược về ngôn ngữ lập trình Web Bootstrap

Bootstrap được xây dựng dựa trên nền tảng HTML templates, CSS templates

và Javascript cơ bản để hình thành nên những mẫu thiết kế có sẵn như typography, forms, buttons (nút bấm), tables (bảng), navigation, modals, image carousels cũng như nhiều thành phần khác nữa Với mục đích giúp cho các nhà phát triển có thể thiết kế reponsive cho website được dễ dàng và nhanh hơn, các plugin của Javascript đã được tích hợp và trong Bootstrap

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

1.4.1 Visual Code 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

2.4.1 Những tính năng mạnh mẽ của Visual Code

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:

+ 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!

- 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à một 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à qua từng phiên bản thì việc hỗ trợ Git càng đầy đủ

- 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

- Tích hợp Terminal:

+ Terminal 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

- 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.5 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

1.5.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, nhóm 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