Báo cáo phân tích xây dựng website bán hàng thời trang trẻ em online bằng nodejs

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.64 MB, 91 trang )

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI
KHOA CÔNG NGHỆ THƠNG TIN

TẠ THỊ BÍCH NGA

XÂY DỰNG WEBSITE
BÁN THỜI TRANG TRẺ EM ONLINE

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Hệ thống thông tin

Hà Nội - 2022

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI
KHOA CÔNG NGHỆ THƠNG TIN

TẠ THỊ BÍCH NGA

XÂY DỰNG WEBSITE
BÁN THỜI TRANG TRẺ EM ONLINE

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Hệ thống thông tin

Cán bộ hướng dẫn: Nguyễn Thái Sơn

Hà Nội – 2022

LỜI CẢM ƠN

Trong suốt quá trình thực hiện đồ án này, em luôn nhận được sự quan tâm, hướng dẫn
và giúp đỡ tận tình của các thầy, cơ giáo, cũng như các bạn trong ngành Hệ thống thơng tin
nói riêng cũng như trong khoa Cơng nghệ thơng tin nói chung. Lời đầu tiên, em xin được
bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu Trường Đại học Công nghệ Giao thông vận
tải, Ban chủ nhiệm Khoa Công nghệ thông tin, Trưởng ban chuyên ngành Hệ thống thông
tin đã tận tình giúp đỡ, tạo điều kiện cho em học tập tại trường. Đặc biệt, em xin gửi lời cảm
ơn sâu sắc đến thầy Th.S Nguyễn Thái Sơn – khoa Công nghệ thông tin – trường Đại học
Công nghệ giao thơng vận tải đã đồng hành, nhiệt tình hướng dẫn, giúp đỡ em hoàn thiện
tốt đồ án tốt nghiệp này. Nhân dịp này, em cũng xin bày tỏ lòng biết ơn đến gia đình, người
thân, bạn bè đã giúp đỡ, ủng hộ, tạo động lực tinh thần cho em hoàn thành học tập tại
trường Đại học Công nghệ Giao thông vận tải.

LỜI CAM ĐOAN
Em xin cam đoan rằng đồ án tốt nghiệp với đề tài “Xây dựng website bán thời trang
trẻ em online” này là nghiên cứu độc lập của em. Đồng thời, những số liệu được cung cấp
từ báo cáo đều là kết quả của sự nghiên cứu của bản thân em, hồn tồn trung thực, khơng
sao chép từ bất kì một nguồn tài liệu nào khác. Những tài liệu tham khảo, trích dẫn đều
được ghi rõ nguồn gốc, thời gian truy cập. Em xin chịu hoàn toàn trách nhiệm trước nhà
trường nếu trường hợp phát hiện ra bất cứ sai phạm hay vấn đề sao chép nào trong đồ án
này.

Hà Nội, ngày 09 tháng 06 năm
2022

Tạ Thị Bích Nga

MỤC LỤC
DANH MỤC HÌNH ẢNH....................................................................................................7

DANH MỤC BẢNG...........................................................................................................10
DANH MỤC TỪ VIẾT TẮT.............................................................................................11
LỜI NÓI ĐẦU.................................................................................................................... 12
CHƯƠNG 1: TỔNG QUAN..............................................................................................13
1.1.

Lý do chọn đề tài....................................................................................................13

1.2.

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

1.3.

Giới hạn và phạm vi của đề tài...............................................................................13

1.4.

Kết quả dự kiến đạt được........................................................................................14

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT..................................................................................16
2.1. Tìm hiểu về ngơn ngữ JavaScript..............................................................................16
2.2.

Tìm hiểu về ngơn ngữ HTML và CSS....................................................................18

2.2.1. HTML.................................................................................................................18
2.2.2. CSS.....................................................................................................................21
2.3.

Tìm hiểu về MongoDB...........................................................................................22

2.4.

Quy trình xây dựng website....................................................................................22

2.4.1.

Thiết kế website...............................................................................................22

2.4.3.

Lựa chọn và mua tên miền...............................................................................24

2.4.4.

Lựa chọn và thiết lập web server.....................................................................24

2.4.5.

Upload website................................................................................................25

2.4.6.

Cập nhật và chỉnh sửa website.........................................................................25

2.4.7.

Quảng bá..........................................................................................................25

2.4.8.

Bảo trì..............................................................................................................25

2.5.

Cơng cụ hỗ trợ........................................................................................................25

2.5.1.

Visual Studio Code..........................................................................................25

2.5.2.

ReactJS............................................................................................................27

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG..............................................31
3.1.

Khảo sát hệ thống...................................................................................................31

3.2.

Phân tích và thiết kế hệ thống.................................................................................33

3.2.1.

Mơ tả bài toán..................................................................................................33

3.2.2.

Phân tich chức năng.........................................................................................35

3.2.3.

Biểu đồ Use Case.............................................................................................37

3.2.4.

Biểu đồ tuần tự của từng chức năng.................................................................53

3.2.5.

Biểu đồ hoạt động của từng chức năng............................................................61

3.2.6.

Biểu đồ lớp.......................................................................................................66

3.2.7.

Biểu đồ trạng thái.............................................................................................67

3.3.

Thiết kế cơ sở dữ liệu vật lý...................................................................................68

3.4.

Thiết kế giao diện...................................................................................................71

3.4.1.

Giao diện của khách hàng................................................................................71

3.4.2.

Giao diện của quản trị và nhân viên.................................................................74

CHƯƠNG 4: CÀI ĐẶT VÀ XÂY DỰNG CHƯƠNG TRÌNH.......................................77
4.1.

Chuẩn bị mơi trường...............................................................................................77

4.1.1.

Tải và cài đặt NodeJS......................................................................................77

4.1.2.

Cài đặt VS Code..............................................................................................80

4.1.3.

Cài đặt ReactJS................................................................................................81

4.2.

Một số mã nguồn mẫu............................................................................................83

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN........................................................................87
TÀI LIỆU THAM KHẢO.................................................................................................88
PHỤ LỤC...........................................................................................................................89

Tạ Thị Bích Nga_69DCHT20087

DANH MỤC HÌNH ẢNH
Hình 2.1: Biểu trượng của JavaScript..............................................................................17
Hình 2.2: Cấu trúc cơ bản của HTML..............................................................................20
Hình 3.1: Trang web được khảo sát.................................................................................31
Hình 3.2: Sơ đồ Use Case tổng quát.................................................................................39
Hình 3.3: Use Case quản lý tài khoản của quản trị...........................................................39
Hình 3.4: Use Case quản lý tài khoản đối với nhân viên và khách hàng..........................42
Hình 3.5: Use Case quản lý danh mục.............................................................................44
Hình 3.6: Use Case quản lý bài viết.................................................................................46
Hình 3.7: Use Case quản lý sản phẩm..............................................................................47
Hình 3.8: Use Case quản lý giỏ hàng...............................................................................49
Hình 3.9: Use Case quản lý đơn hàng..............................................................................50
Hình 3.10: Use Case tìm kiếm.........................................................................................51
Hình 3.11: Use Case thống kê báo cáo.............................................................................52
Hình 3.12: Biểu đồ tuần tự chức năng đăng nhập............................................................53
Hình 3.13: Biểu đồ tuần tự chức năng đăng ký................................................................54
Hình 3.14: Biểu đồ tuần tự chức năng sửa tài khoản........................................................54
Hình 3.15: Biểu đồ tuần tự chức năng đặt hàng...............................................................55
Hình 3.16: Biểu đồ tuần tự chức năng xem đơn hàng......................................................55
Hình 3.17: Biểu đồ tuần tự chức năng thêm mới danh mục.............................................56
Hình 3.18: Biểu đồ tuần tự chức năng sửa danh mục.......................................................56
Hình 3.19: Biểu đồ tuần tự chức năng xóa danh mục.......................................................57

Hình 3.20: Biểu đồ tuần tự chức năng thêm giỏ hàng......................................................57
Hình 3.21: Biểu đồ tuần tự chức năng sửa giỏ hàng.........................................................58
Hình 3. 22: Biểu đồ tuần tự chức năng xóa sản phẩm khỏi giỏ hàng...............................58
Hình 3.23: Biểu đồ tuần tự chức năng thêm mới sản phẩm..............................................59
Hình 3.24: Biểu đồ tuần tự chức năng sửa thơng tin sản phẩm........................................59
Hình 3.25: Biểu đồ tuần tự chức năng xóa sản phẩm.......................................................60
Hình 3.26: Biểu đồ tuần tự chức năng thống kê báo cáo..................................................60
Hình 3.27: Biểu đồ hoạt động chức năng đăng nhập........................................................61
Hình 3.28: Biểu đồ hoạt động chức năng đăng ký............................................................61
7

Tạ Thị Bích Nga_69DCHT20087

Hình 3.29: Biểu đồ hoạt động chức năng tìm kiếm..........................................................62
Hình 3.30: Biểu đồ hoạt động chức năng xem đơn hàng..................................................62
Hình 3.31: Biểu đồ hoạt động chức năng thêm mới danh mục.........................................63
Hình 3.32: Biểu đồ hoạt động chức năng sửa danh mục..................................................63
Hình 3.33: Biểu đồ hoạt động chức năng xóa danh mục..................................................64
Hình 3.34: Biểu đồ hoạt động chức năng cập nhật giỏ hàng............................................64
Hình 3.35: Biểu đồ hoạt động chức năng thêm mới sản phẩm.........................................65
Hình 3.36: Biểu đồ hoạt động chức năng sửa sản phẩm...................................................65
Hình 3.37: Biểu đồ hoạt động chức năng xóa sản phẩm..................................................66
Hình 3.38: Biểu đồ lớp.....................................................................................................67
Hình 3.39: Biểu đồ trạng thái đơn hàng...........................................................................68
Hình 3.40: Thiết kế giao diện trang chủ của khách hàng..................................................72
Hình 3.41: Thiết kế xem chi tiết sản phẩm.......................................................................72
Hình 3.42: Thiết kế giỏ hàng............................................................................................73
Hình 3.43: Thiết kế xem đơn hàng ở trạng thái chờ xử lý................................................73
Hình 3.44: Thiết kế xem đơn hàng ở trạng thái đã giao hàng...........................................74

Hình 3.45: Thiết kế giao diện trang chủ của quản trị.......................................................74
Hình 3.46: Thiết kế quản lý sản phẩm..............................................................................75
Hình 3.47: Thiết kế quản lý đơn hàng..............................................................................75
Hình 3.48: Thiết kế thống kê báo cáo..................................................................................
Hình 4.1: Trang chủ NodeJS............................................................................................77
Hình 4.2: Sau khi chạy tập tin cài đặt...............................................................................78
Hình 4.3: Đọc và chấp nhận yêu cầu bản quyền NodeJS.................................................78
Hình 4.4: Thực hiện hướng dẫn mặc định của NodeJS....................................................79
Hình 4.5: Mơi trường NodeJS đang cài đặt......................................................................79
Hình 4.6: Hồn thành cài đặt NodeJS..............................................................................80
Hình 4.7: Tích tùy chọn cài đặt VS Code.........................................................................81
Hình 4.8: Kích chuột phải mở Command window...........................................................82
Hình 4.9: Dịng lệnh tạo thư mục React...........................................................................83
Hình 4.10: Giao diện đầu tiên trang web dùng thư viện ReactJS.....................................83
Hình 4.11: Mã nguồn đăng nhập......................................................................................84
Hình 4.12: Mã nguồn thêm sản phẩm vào giỏ hàng.........................................................84
8

Tạ Thị Bích Nga_69DCHT20087

Hình 4.13: Mã nguồn đặt hàng.........................................................................................85
Hình 4.14: Mã nguồn thêm bình luận sản phẩm...............................................................86
Hình 4.15: Giao diện trang chủ khách hàng.....................................................................89
Hình 4.16: Xem chi tiết sản phẩm....................................................................................89
Hình 4.17: Giỏ hàng.........................................................................................................90
Hình 4.18: Xem đơn hàng................................................................................................90
Hình 4.19: Giao diện trang chủ admin.............................................................................91
Hình 4.20: Quản lý tài khoản...........................................................................................91
Hình 4.21: Quản lý danh mục..........................................................................................92

Hình 4.22: Quản lý đơn hàng...........................................................................................92
Hình 4.23: Thống kê báo cáo...........................................................................................93
Y

9

Tạ Thị Bích Nga_69DCHT20087

DANH MỤC BẢNG
Bảng 3.1: Nội dung khảo sát đối tượng quản lý website..................................................31
Bảng 3.2: Nội dung khảo sát nhân viên website...............................................................33
Bảng 3.3: Mô tả các tác nhân...........................................................................................38
Bảng 3.4: Đặc tả Use Case thêm tài khoản.......................................................................40
Bảng 3.5: Đặc tả Use Case sửa tài khoản.........................................................................40
Bảng 3.6: Đặc tả Use Case xóa tài khoản.........................................................................41
Bảng 3.7: Đặc tả Use Case đăng nhập..............................................................................43
Bảng 3.8: Đặc tả Use Case thêm danh mục (thể loại)......................................................44
Bảng 3.9: Đặc tả Use Case sửa danh mục (thể loại).........................................................45
Bảng 3.10: Đặc tả Use Case xóa danh mục (thể loại).......................................................45
Bảng 3.11: Đặc tả Use Case thêm mới bài viết................................................................46
Bảng 3.12: Đặc tả Use Case thêm mới sản phẩm.............................................................47
Bảng 3.13: Đặc tả Use Case sửa sản phẩm.......................................................................48
Bảng 3.14: Đặc tả Use Case xóa sản phẩm......................................................................48
Bảng 3.15: Đặc tả Use Case giỏ hàng..............................................................................49
Bảng 3.16: Đặc tả Use Case cập nhật trạng thái đơn hàng...............................................50
Bảng 3.17: Đặc tả Use Case tìm kiếm..............................................................................51
Bảng 3.18: Đặc tả Use Case thống kê, báo cáo................................................................52
Bảng 3.19: Bảng dữ liệu Product (sản phẩm)...................................................................68
Bảng 3.20: Bảng dữ liệu customer (khách hàng)..............................................................69

Bảng 3.21: bảng dữ liệu Staff (nhân viên)........................................................................69
Bảng 3.22: Bảng dữ liệu User (người dùng)....................................................................70
Bảng 3.23: Bảng dữ liệu categorys_product (danh mục sản phẩm)..................................70
Bảng 3.24: Bảng dữ liệu purchase_order (đơn hàng).......................................................70

10

Tạ Thị Bích Nga_69DCHT20087

DANH MỤC TỪ VIẾT TẮT
Từ viết tắt

Ý nghĩa

HTML

Hyper Text Markup Language

CSS

Cascading Style Sheets

JS

Java Script

VS Code

Visual Studio Code

CSDL

Cơ sở dữ liệu

Admin

Người quản trị

DOM

Document Object Model

Web

Website

JSX

Javascript Syntax Extension

W3C

World Wide Web Consortium

UI

User Interface

SEO

Search Engine Optimization

11

Tạ Thị Bích Nga_69DCHT20087

LỜI NĨI ĐẦU

Trong những năm gần đây với sự phát triển vượt trội của khoa học kỹ thuật đặc biệt
là công nghệ thông tin, với những ứng dụng của công nghệ thông tin vào các lĩnh vực đã
đóng góp phần to lớn cho sự nghiệp phát triển của con người. Trong các lĩnh vực đó thì
lĩnh vực quản lý thật sự giúp ích được nhiều cho con người, việc áp dụng quản lý mua
bán bằng máy tính thay cho quản lý bằng thủ công ở các doanh nghiệp, công ty, cá nhân,
v.v là rất cần thiết và thật sự cần thiết. Do đó, việc áp dụng cơng nghệ thơng tin vào lĩnh
vực mua bán hàng hóa là rất có ích cho cá nhân hay doanh nghiệp.
Năm 2008 là năm đầu tiên Việt Nam có sự phát triển lớn mạnh về lĩnh vực thương
mại khi chính thức trở thành thành viên thứ 150 của tổ chức thương mại thế giới WTO.
Với sự phát triển mạnh mẽ đó khơng thể phủ nhận sự đóng góp của thương mại điện tử,
một lĩnh vực nóng hiện nay. Một đất nước phát triển mạnh mẽ, cuộc sống con người càng
ngày nâng cao, mức tiêu thụ sản phẩm ngày càng tăng tóm lại nhu cầu con người ngày
càng cao. Vì thế việc trao đổi mua bán cũng như quản lý hàng hóa cần phải có sự thay
đổi từ thủ cơng sang máy móc.
Chương trình được chạy trên mơi trường hệ điều hành Windows, Linux, Mac… sử
dụng ngôn ngữ chuẩn về xử lý dữ liệu như HTML, JavaScript, XML, CSS và hệ quản trị
cơ sở dữ liệu MongoDB. Dùng ReactJS làm framework và NodeJS làm mơi trường
WebServer .
Hồn thành đồ án này, em xin gửi lời cảm ơn chân thành đến các thầy cô, khoa
CNTT trường Đại Học Công Nghệ Giao Thông Vận Tải đã truyền đạt kiến thức cho em

trong quá trình học tập, đặc biệt là thầy Nguyễn Thái Sơn đã trực tiếp hướng dẫn em
hoàn thành đồ án này. Bằng kiến thức học tập và sự tìm hiểu, phân tích thiết kế và cài đặt
hệ thống nhưng chắc chắn không tránh khỏi những thiếu sót. Em rất mong được sự thơng
cảm và góp ý của q thầy cơ.
Em xin chân thành cảm ơn!

12

Tạ Thị Bích Nga_69DCHT20087

CHƯƠNG 1: TỔNG QUAN
1.1.

Lý do chọn đề tài
Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh

doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn
đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất. So với kinh doanh
truyền thống thì thương mại điện tử chi phí thấp hơn, hiệu quả đạt cao hơn. Hơn thế nữa,
với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sản phẩm nhanh chóng,
thuận tiện. Kết hợp với bộ phận giao hàng tận nơi, là thông qua bưu điện và ngân hàng để
thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển.
Biết được những nhu cầu đó thì “Xây dựng website bán thời trang trẻ em online”
được xây dựng nhằm để đáp ứng cho mọi người tiêu dùng trên tồn quốc và thơng qua hệ
thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết. Do đó, với sự
ra đời các website bán hàng qua mạng, mọi người có thể mua mọi thứ hàng hóa mọi lúc
mọi nơi mà không cần phải tới tận nơi để mua. Trên thế giới có rất nhiều trang website
bán hàng trực tuyến nhưng vẫn chưa được phổ biến rộng rãi. Và khái niệm thương mại
điện tử còn khá xa lạ. Trước thực tế đó em đã chọn đề tài: “Xây dựng website bán thời

trang trẻ em online” làm đề tài đồ án tốt nghiệp.
1.2.

Mục tiêu của đề tài
- Xây dựng thành công website có đầy đủ các chức năng cần thiết và hoạt động hiệu

quả, áp dụng công nghệ thông tin vào quản lý các mặt hàng gia dụng cho doanh nghiệp.
- Trình bày được các vấn đề liên quan đến JavaScript,HTML,CSS, ReactJS.
- Phân tích hệ thống chương trình bao gồm giao diện, các user control nhằm đáp
ứng nhu cầu người dùng.
- Triển khai và truy cập website trong môi trường web.
- Kiểm chứng những kiến thức đã được học trên giảng đường Đại học, đồng thời
trang bị những kiến thức mới, là hành trang chuẩn bị bước vào cuộc sống.
1.3.

Giới hạn và phạm vi của đề tài
- Xây dựng được phần mềm sử dụng công nghệ HTML thao tác với WEB SERVER

trong lập trình website.

13

Tạ Thị Bích Nga_69DCHT20087

- Chương trình tập trung xử lý dữ liệu giải quyết bài toán kinh doanh thời trang trẻ
em online.
1.4.

Kết quả dự kiến đạt được

-

Bản báo cáo đặc tả về phân tích, thiết kế hệ thống.

-

Website bán đồ gia dụng bao gồm:

Về khách hàng:
+ Danh mục sản phẩm:


Xem danh mục nhóm thời trang

+ Chi tiết danh mục sản phẩm:


Danh sách chi tiết các sản phẩm



Thông tin sản phẩm

+ Tìm kiếm:


Tìm kiếm thơng tin sản phẩm

+ Giỏ hàng:


Lưu trữ số lượng, giá thành sản phẩm theo nhu cầu khách hàng.

+ Thanh tốn:


Chi tiết thơng tin đặt hàng: thơng tin khách hàng, số lượng sản

phẩm, hình thức thanh tốn.
Về người quản trị:
+ Quản lý danh mục sản phẩm


Thêm, sửa, xoá danh mục sản phẩm

+ Tìm kiếm


Tìm kiếm khách hàng, sản phẩm, đơn hàng

+ Quản lý đơn hàng


Thông tin khách hàng



Số lượng sản phẩm, ngày đặt hàng, tổng chi phí

+ Quản lý kho



Thông tin sản phẩm: số lượng bán, số lượng tồn, ngày nhập, ngày

xuất, giá thành, giới thiệu sản phẩm


Thêm, sửa, xoá sản phẩm
14

Tạ Thị Bích Nga_69DCHT20087

+ Báo cáo thống kê


Báo cáo chi tiết doanh thu



Thống kê số lượng đơn hàng, sản phẩm

- Xây dựng ứng dụng website bán đồ gia dụng trên mơi trường lập trình website.

15

Tạ Thị Bích Nga_69DCHT20087

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

2.1. Tìm hiểu về ngôn ngữ JavaScript
JavaScript (JS) là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có
sẵn hoặc tự định nghĩa. JavaScript được sử dụng rộng rãi trong các ứng dụng Website.
JavaScript được hỗ trợ hấu như trên tất cả các trình duyệt như Firefox, Chrome, Cốc cốc,
v.v. trên máy tính lẫn điện thoại.
JavaScript được Brendan Eich (đồng sáng lập dự án Mozilla và tập đoàn Mozilla)
cho ra mắt vào năm 1995. Lần đầu được biết đến lần đầu tiên với tên Mocha, và sau đó là
LiveScript, nhưng công ty Netscape đã đổi tên thành JavaScript bởi vì sự phổ biến như là
một hiện tượng của java lúc bấy giờ.
JS cho phép thêm động nội dung HTML vào DOM, tạo khai báo kiểu động, tìm
nạp nội dung từ một web khác, v.v. Từ đây, JavaScript có khả năng biến các trang web
HTML tĩnh trở thành các website tương tác bằng cách tự động cập nhật nội dung, xác
thực dữ liệu biểu mẫu, hình ảnh động và rất nhiều thứ khác trên tràng web.
Nhiệm vụ của JavaScript là xử lý những đối tượng HTML trên trình duyệt. Nó có
thể can thiệp với các hành động như thêm, sửa, xóa thuộc tính CSS và các thẻ HTML
một cách dễ dàng. Hay nói cách khác, JavaScript là một ngơn ngữ lập trình trên trình
duyệt ở phía khách hàng. Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho
JavaScript có thể làm việc ở backend.
Cách thứ hoạt động của JavaScript: JS được nhúng vào một trang web hoặc nếu
khơng nhúng nó sẽ được đưa vào tệp .js riêng. JavaScript là ngơn ngữ phí máy khách
“Client-Side”, chúng được tải xuống máy tính của khách truy cập trang web, sau đó được
xử lý (JavaScript khơng phải là ngơn ngữ máy chủ “Sever” và không xử lý trên máy chủ
rồi chuyển kết quả đến khách truy cập).
Sức mạnh của JavaScript là không thể chối cãi, bằng chứng là hiện nay có rất
nhiều thư viện và framework được viết bằng JavaScript ra đời như: ReactJS, Angular,
NodeJS, jQuery, BackboneJS, v.v.
Tệp .js trong thư mục có biểu tượng để nhận biết dễ dàng.

16

Tạ Thị Bích Nga_69DCHT20087

Hình 2.1: Biểu trượng của JavaScript.
Một số ví dụ điển hình về các cơng việc được hỗ trợ bởi JavaScript:
-

Sửa đổi CSS;

-

Xác thực dữ liệu;

-

Hiển thị thông báo bật lên;

-

Thêm nội dung bổ sung vào trang;

-

Xử lý các sự kiện của phần tử HTML;

-

Thêm tính tương tác vào website;

-

Trinhg đơn thả xuống nhất thể hiển thị;

-

Thay đổi màu sắc của các phần tử trên website;

-

Tự động hóa các quy trình mà người dung phải thực thi từng bước;

-

Yêu cầu hình ảnh tự tạo hoạt ảnh, ảnh chuyển qua dạng trình chiếu;

-

Tạo website, trị chơi, phát triển các ứng dụng di động (Smart phone,
Tablet).

Tuy là ngôn ngữ lập trình nổi tiếng, nhưng bản thân JavaScript khơng thể hồn hảo
được. Sau đây là một số ưu điểm và nhược điểm của JavaScript:
 Ưu điểm của JavaScript:
-

Giảm thiểu sự tương tác với server: Bằng cách xác nhận đầu vào (Input) người sử

dụng trước khi gửi trang đến server giúp tiết kiệm lưu lượng máy và giảm tải trên máy
chủ;
17

Tạ Thị Bích Nga_69DCHT20087

-

Khơng cần một trình biên dịch: JavaScript hoạt động được trên nhiều trình duyệt,

nền tảng và khơng cần sử dụng trình biên dịch vì trình duyệt web hồn tồn có thể biên
dịch nó bằng HTML;
-

JavaScript được đánh giá là ngơn ngữ lập trình dễ học, hoạt động nhanh và nhẹ

hơn, dễ phát hiện lỗi và thuận tiện sửa chữa lỗi hơn so với các ngôn ngữ khác;
-

Giao diện phong phú: Các yếu tố về thành phần kéo và thả (drag-and-drop), thanh

trượt (Sliders) trên JavaScript giúp giao diện trở nên phong phú và sinh động hơn cho
khách truy cập vào website;
-

Khả năng phản hồi ngay lập tức tới khách truy cập: Với JavaScript, các khách

không cần phải tốn thời gian để kiểm tra những sai sót của họ (quên nhập nội dung nào
đó, v.v.);
-

Tăng khả năng tương tác hơn: Với ưu điểm này, hồn tồn có thể tạo ra các giao

diện phản ứng lại mỗi khi người dùng thực hiện các động tác di chuyển chuột qua chúng
hoặc kích hoạt chúng thơng qua bàn phím.
 Nhược điểm của JavaScript:
- Vì lý do bảo mật, js phía máy khách (Client-Side) không cho phép việc đọc hoặc
ghi tệp;
- JS không có những hỗ trợ sẵn có và chúng cũng khơng được sử dụng trong việc
kết nối mạng các ứng dụng;
- Hiện tượng khơng đồng nhất khi JS có thể bị triển khai khác nhau tùy từng thiết bị;
- JS không có các khả năng đa luồng hoặc đa xử lý nào;
-

Ngồi ra, do ngơn ngữ này được sử dụng phổ biến và rộng rãi trên website nên

khả năng cao sẽ dễ bị khai thác hoặc được triển khai để thực thi mã độc trên máy tính của
người dùng với những hacker, scammer.
2.2.

Tìm hiểu về ngơn ngữ HTML và CSS

2.2.1. HTML
HTML (Hyper Text Markup Language): là một ngôn ngữ đánh dấu được thiết kế
ra để tạo nên các trang web, nghĩa là các mẩu thơng tin được trình bày trên World Wide
Web.
18

Tạ Thị Bích Nga_69DCHT20087

Những HTML khơng phải là một ngơn ngữ lập trình, HTML giống như một ngơn

ngữ được xác định đâu là ý nghĩa, mục đích và cấu trúc của một tài liệu. Cùng với CSS
và JavaScript, HTML tạo ra bộ ba nên tảng kỹ thuật cho các website.
Vai trò của HTML:
Một website thường chứa nhiều trang con. Mỗi trang con sẽ có một tập tin HTML
riêng. Dù lập trình bằng bất cứ ngơn ngữ nào, trên bất cứ Framework nào, khi chạy trên
nền website đều có hai chế độ xem: HTML và văn bản thường.
Chức năng chính của HTML là xây dựng cấu trúc siêu bản trên một website, hoặc
khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc. HTML thường được
dùng để phân chia các tiêu đề, đoạn văn, đường dẫn, v.v.
HTML có thể:
- Thêm tiêu đề, định dạng đoạn văn, ngắt dòng điều khiển;
- Tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo
liên kết;
- Xây dựng bảng, điều khiển một số biểu mẫu.
Như đã đề cập ở trên, HTML không phải là ngôn ngữ lập trình. Do đó, HTML
cũng khơng thể tạo ra các chức năng động được. Hiểu đơn giản, HTML giống như
Microsoft Word dùng để bố cục và định dạng trang web.
Tóm lại, HTML là ngôn ngữ đánh dấu, dễ đọc, dễ hiểu, dễ áp dụng. Tuy nhiên,
một website được viết bằng HTML rất đơn giản, nếu không muốn nhàm chán website cần
sự hỗ trợ của CSS và JavaScript.
Nếu HTML cung cấp cấu trúc cơ bản của trang web thì CSS và JavaScript sẽ cải
tiến và sửa đổi cho website sinh động hơn.
Cấu trúc cơ bản của HTML:

- Một tài liệu HTML luôn được đóng gói trong cặp thẻ <html> và </html>
- Phần tiêu đề được viết bởi cặp thẻ <head> và</head>. Nếu sử dụng cặp thẻ
này bắt buộc phải thêm một cặp thẻ nữa là <title></titile>, giữa cặp thẻ này là
tên của trang web được hiển thị phía trên cùng của menubar.

19

Tạ Thị Bích Nga_69DCHT20087

-

Cặp thẻ <body> và </body> là nơi mơ tả những gì có thể nhìn thấy trên trang
web.

Hình 2.2: Cấu trúc cơ bản của HTML.
Các thẻ cơ bản trong HTML:
Các thẻ trong HTML được bắt đầu dấu < và kết thúc bằng dấu >, tên thẻ nằm giữa
cặp dấu <>. Cặp thẻ được tạo nên từ thẻ mở và thẻ đóng, và nội dung của thẻ được nằm
giữa thẻ đóng và thẻ mở. Ví dụ: <a><a/> trong đó: <a> là thẻ mở, <a/> là thẻ đóng. Cũng
có một số thẻ chỉ có thẻ mở khơng có thẻ đóng như <img/>,
, <hr/>, v.v.
 Các thẻ tiêu đề (HTML Heading): Thường được sử dụng để thể hiện tiêu đề của
bài viết, bản tin hay các mục nhấn mạnh. Bao gồm các thẻ từ