Báo-Cáo-TTSX-TÌM HIỂU VÀ XÂY DỰNG WEBSITE HỌC LẬP TRÌNH MIỄN PHÍ

KHOA CƠNG NGHỆ THƠNG TIN
BỘ MƠN KHOA HỌC MÁY TÍNH

BÁO CÁO THỰC TẬP SẢN XUẤT
ĐỀ TÀI
TÌM HIỂU VÀ XÂY DỰNG WEBSITE HỌC LẬP TRÌNH MIỄN PHÍ

SINH VIÊN THỰC HIỆN

CÁN BỘ HƯỚNG DẪN

HÀ NỘI - 2021

1


MỤC LỤC

2


DANH MỤC HÌNH VẼ

3


LỜI CẢM ƠN
Trước tiên với tình cảm sâu sắc và chân thành nhất, cho phép em được bày tỏ
lòng biết ơn đến tất cả các cá nhân và tổ chức đã tạo điều kiện hỗ trợ, giúp đỡ em trong
suốt quá trình học tập và nghiên cứu đề tài này. Trong suốt thời gian từ khi bắt đầu học
tập tại trường đến nay, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý Thầy

Cô và bạn bè.
Với lòng biết ơn sâu sắc nhất, em xin gửi đến q Thầy Cơ ở bộ mơn Khoa Học
Máy Tính đã truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học
tập tại trường. Nhờ có những lời hướng dẫn, dạy bảo của các thầy cô nên đề tài nghiên
cứu của em mới có thể hồn thiện tốt đẹp.
Một lần nữa, em xin chân thành cảm ơn cô Nguyễn Thuỳ Dương – người đã
trực tiếp giúp đỡ, quan tâm, hướng dẫn em hoàn thành tốt bài báo cáo này trong thời
gian qua.
Bài báo cáo thực tập thực hiện trong khoảng thời gian gần 3 tuần. Bước đầu đi
vào thực tế của em còn hạn chế và còn nhiều bỡ ngỡ nên khơng tránh khỏi những thiếu
sót, em rất mong nhận được những ý kiến đóng góp quý báu của quý Thầy Cô để kiến
thức của em trong lĩnh vực này được hồn thiện hơn đồng thời có điều kiện bổ sung,
nâng cao ý thức của mình.
Em xin chân thành cảm ơn!

4


CHƯƠNG I. TỔNG QUAN VỀ WEBSITE
I.1 Giới thiệu chung về website
I.1.1 Khái niệm
World Wide Web (www), gọi tắt là web, là một khơng gian thơng tin tồn cầu
mà mọi người có thể truy nhập (gửi và nhận thơng tin) qua các máy tính nối với mạng
Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ
Internet. Nhưng web thực ra chỉ là một trong các dịch vụ chạy trên Internet.
Các tài liệu trên web được lưu trữ trong một hệ thống siêu văn bản (hypertext)
đặt tại các máy Webserver nối mạng Internet. Người dùng phải sử dụng một chương
trình được gọi là trình duyệt web (web browser) để xem các siêu văn bản này. Chương
trình này sẽ nhận thông tin tại ô địa chỉ URL do người sử dụng u cầu, sau đó trình
duyệt sẽ tự động gửi thông tin đến máy webserver và hiển thị trên màn hình máy tính

của người xem.
Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web
để nối với các tài liệu khác hoặc gửi thông tin phản hồi lên máy chủ trong một q
trình tương tác. Hoạt động truy tìm thơng tin theo các siêu liên kết thường được gọi là
duyệt web. Quá trình này cho phép người dùng có thể lướt các trang web để lấy thơng
tin. Tuy nhiên độ chính xác và chứng thực của thông tin tùy thuộc vào uy tín của các
website đưa ra thơng tin đó.
Đặc điểm tiện lợi của web: Thông tin dễ dàng cập nhật, thay đổi, khách hàng có
thể xem thơng tin ngay tức khắc, ở bất kỳ nơi nào, tiết kiệm chi phí in ấn, gửi bưu
điện, fax, thông tin không giới hạn (muốn đăng bao nhiêu thông tin cũng được, không
giới hạn số lượng thơng tin, hình ảnh…) và khơng giới hạn phạm vi khu vực sử dụng
(tồn thế giới có thể truy cập).
I.1.2 Hoạt động của web
Thơng qua trình duyệt, người dùng cuối sẽ kết nối đến máy Webserver bằng địa
chỉ URL. Tại đây, máy Webserver sẽ xử lý kết nối và gửi yêu cầu đến ứng dụng web.
Tùy theo yêu cầu, ứng dụng web sẽ truy vấn đến cơ sở dữ liệu và nhận kết quả trả về,
sau đó sẽ gửi phản hồi về máy Webserver.
Cuối cùng máy Webserver sẽ gửi dữ liệu về trình duyệt dưới dạng siêu văn bản
và người dùng cuối sẽ nhận thông tin hiển thị trên trình duyệt.
5


I.1.3 Trình duyệt web
Trình duyệt web (web browser) là một phần mềm ứng dụng cho phép người sử
dụng xem và tương tác với các văn bản, hình ảnh, đoạn phim, nhạc, trị chơi và các
thơng tin khác ở trên một trang web của một địa chỉ web trên mạng toàn cầu hoặc
mạng nội bộ.
Trình duyệt web cho phép người sử dụng truy cập các thông tin trên các trang
web một cách nhanh chóng và dễ dàng, nó đọc định dạng HTML, CSS, XML,… để
hiển thị, do vậy một trang web có thể hiển thị khác nhau trên các trình duyệt khác

nhau.
Một số trình duyệt web phổ biến hiện nay bao gồm Internet Explorer(Edge),
Mozilla Firefox, Safari, Google Chrome, Cốc Cốc, Opera,…
I.1.4 Địa chỉ URL
Địa chỉ URL (Uniform Resource Locator) được dùng để tham chiếu tới tài
nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng, các tài
nguyên khác nhau.
Ví dụ: />Một URL gồm các thành phần sau:
•

Giao thức (ví dụ: http, https, ftp)

•

Tên miền (ví dụ: humg.edu.vn)

•

Cổng (ví dụ: 80, 443), tuy nhiên thành phần này có thể khơng bắt buộc vì mặc
định sử dụng port 80

•

Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (ví dụ: gioi-thieu/co-cauto-chuc/)

I.1.5 Giao thức HTTP và HTTPS
HTTP (Hypertext Transfer Protocol), là giao thức thuộc lớp ứng dụng trong
mô hình OSI. Hoạt động thơng thường ở cổng (port) 80 và là giao thức hướng kết nối.
Các phương thức hoạt động của HTTP:

6


•

GET: Phương thức lấy một đối tượng hoặc tài nguyên nào đó trên máy chủ
(server).

•

POST: Phương thức mà máy trạm (Client) sử dụng để gửi thơng tin đến các
Server.

•

PUT: Phương thức dùng để máy trạm (Client) đẩy (upload) dữ liệu lên Server.

•

DELETE: Phương thức giúp Client xố các đối tượng, tài nguyên từ các máy
Webserver.

•

HEAD: Phương thức xác minh rằng một đối tượng có tồn tại hay khơng.

•

TRACE: Phương thức được sử dụng để gọi từ xa một lớp ứng dụng trở lại.

HTTPS (HTTP over SSL/TLS), là một sự kết hợp giữa giao thức HTTP và
giao thức bảo mật SSL hay TLS cho phép trao đổi thông tin một cách bảo mật trên
Internet. Các kết nối HTTPS thường được sử dụng cho các giao dịch thanh toán trên
Web và cho các giao dịch nhạy cảm trong các hệ thống thông tin, khi dữ liệu cần phải
được bảo vệ an toàn.
Khi một HTTPS được thiết lập nó sẽ giúp bảo mật thơng tin truyền giữa hai
máy tính. Vậy, cứ thơng tin nào cần bảo mật trên nền web thì có thể sử dụng nó.
Nhưng đi kèm với q trình bảo mật có nghĩa là hệ thống phải xử lý nhiều hơn.

Hình I.1 Top SSL Certificate Authorities sử dụng phổ biến
I.1.6 Tên miền
Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói
cách khác, dùng những tên dễ nhận biết, thay cho những tài nguyên Internet mà đa số
được đánh số bằng địa chỉ IP rất khó nhớ. Việc ánh xạ từ tên miền sang địa chỉ IP và
ngược lại do hệ thống DNS trên toàn cầu thực hiện.
Tên miền gồm hai dạng là tên miền Quốc gia và tên miền Quốc tế.
7


•

Tên miền Quốc gia quy định theo Quốc gia của bạn, ví dụ: Việt Nam là .vn;
Nhật Bản là .jp; Anh là .uk; Mỹ là .us ….

•

Tên miền Quốc tế: được dùng khắp trên thế giới như: .com; .net; .org; .edu.

Ý nghĩa một số tên miền mở rộng thơng dụng:
•

.com: Dành cho các cơng ty thương mại.

•

.net: Dành cho các công ty về mạng (network) hay cung cấp dịch vụ mạng.

•

.org: Dành cho các tổ chức, nhóm.

•

.gov: Dành cho các tổ chức chính phủ.

•

.edu: Dành cho các tổ chức giáo dục, trường học.

•

.biz: Dành cho các cơng ty thương mại trực tuyến.

Hình I.2 Top các tên miền phở biến
Ngơn ngữ dùng để viết Website
Để xây dựng một website ta có rất nhiều Ngơn ngữ có thể lựa chọn để phát triển
như; PHP, ASP.NET, Java, …

Hình I.3 Top các ngơn ngữ phổ biến
8

Hoặc ta cũng có thể chọn các Content Management Systems có sẵn để xây
dựng website.

Hình I.1.4 WordPress vẫn là Content Management Systems phổ biến nhất.
I.2 Lịch sử ra đời của website
Ngày 21/12/1990, tại cơ sở của CERN nằm ở dãy núi Alps của Thụy Sĩ, nhà vật
lý học, chuyên gia phần mềm người Anh Tim Berners-Lee đã khởi chạy thành công
trang web đầu tiên trên thế giới, với tên miền info.cern.ch, chạy trên 1 máy chủ NeXT
của CERN. Hiện trang web này vẫn còn tồn tại cho đến ngày nay.
Vào thời điểm đó, chỉ có Berners-Lee và các đồng nghiệp của mình tại CERN
mới có thể truy cập vào trang web này bởi 1 lý do đơn giản: chỉ có máy tính của họ
mới có trình duyệt web. Phải đến tận năm 1993, khi trình duyệt Mosaic dành cho nền
tảng Unix và Windows ra đời, lúc này website mới bắt đầu dần trở nên phổ biến hơn.
Nội dung của trang web cung cấp các thông tin về world wide web, nền tảng cơ
bản của Internet, nơi các văn bản và các trang trên Internet có thể truy cập bởi các
URL (Uniform Resource Locator – Định vị Tài nguyên thống nhất) và kết nối với nhau
thông qua các siêu liên kết.
Khi Berners-Lee sáng tạo ra trang web đầu tiên, mạng “Internet” là một nhóm
các tài liệu tĩnh, sử dụng gần như độc quyền bởi các tổ chức quốc phòng và các tổ
chức nghiên cứu mang tính học thuật. Ý tưởng khởi tạo website của Berners-Lee nhằm
giúp cho phép các tài liệu điện tử trên Internet dẽ dàng được tìm kiếm và chia sẻ.
“Khi chúng ta liên kết thông tin trên web, chúng ta có thể khám phá sự thật, tạo
ra những ý tưởng, mua bán mọi thứ và tạo nên những mối quan hệ với tốc độ và quy
mô không thể tưởng tượng được vào thời đại đó”, Berners-Lee, “cha đẻ” của trang
web đầu tiên chia sẻ.
Mặc dù trang web đầu tiên được ra đời vào ngày 21/12/1990, tuy nhiên đến
ngày 6/8/1991, Berners-Lee mới đăng tải cơng khai bản tóm tắt về dự án xây dựng
9

trang web của mình trên một số nhóm hoạt động trên Internet. Đây là động thái đánh
dấu sự ra mắt công khai của trang web đầu tiên trên thế giới với cộng đồng Internet.
Năm 1994, Berners-Lee thành lập Tổ chức World Wide Web (thường biết đến
với tên gọi W3C) tại học viện công nghệ MIT (Bang Massachusetts, Mỹ). Tổ chức
W3C sẽ chịu trách nhiệm để tạo ra những tiêu chuẩn cho các trang web để đảm bảo
rằng các trang web khác nhau sẽ hoạt động theo cách tương tự nhau.
Hiện tại Berners-Lee vẫn tiếp tục giữ vai trò lãnh đạo W3C. Mặc dù hiện nay
vẫn có một vài sự khác biệt giữa các trang web và trình duyệt, nhưng nếu khơng có sự
định hướng của W3C, chắc hẳn thế giới web sẽ trở thành một “mớ hỗn độn” và sẽ
không như chúng ta biết ngày hơm nay.

Hình I.4 Tim Berners-Lee, “cha đẻ” của website
Berners-Lee cũng đang kêu gọi một tiêu chuẩn riêng tư mới trên web, nơi người
dùng có quyền sở hữu hợp pháp những dữ liệu của họ trên web mà khơng ai được sử
dụng nếu khơng có sự cho phép của người dùng.
Có thể nói, sự ra đời của web là một trong những sự ra đời có vai trò quan trọng
trong sự phát triển của Internet. Thậm chí, nhiều người cho rằng nếu khơng có sự xuất
hiện của website, chưa chắc Internet đã trở nên phổ biến rộng rãi và đóng vai trị quan
trọng trong cuộc sống ngày nay.

10


CHƯƠNG II. CÁC LOẠI WEBSITE
II.1 Website tĩnh
II.1.1 Trang web tĩnh là gì?

Hình II.1 Trang web tĩnh là gì?

Trang web tĩnh về cơ bản được định nghĩa là một trang web sử dụng hồn tồn
ngơn ngữ chính là HTML (có đi html hoặc htm), sau khi tải trang HTML từ máy
chủ xuống, trình duyệt sẽ biên dịch mã và hiển thị nội dung trang web, người dùng hầu
như sẽ không thể tương tác với trang web được.
II.1.2 Các ngôn ngữ để lập trình website tĩnh
Website tĩnh sẽ được xây dựng chủ yếu từ ngơn ngữ HTML, bên cạnh đó để
thiết kế một website tĩnh đẹp hơn, người ta sẽ sử dụng thêm các ngôn ngữ phụ trợ như
CSS và Javascript. Hiện nay khi cơng nghệ lập trình web ngày càng phát triển,
HTML5 và CSS3 dần được sử dụng để thay thế cho HTML và CSS cũ.
Như vậy, một trang web tĩnh hiện nay sẽ được xây dựng bởi 3 ngôn ngữ cơ bản
là HTML5, CSS3 và Javascript.
Một website tĩnh thường sẽ có thiết kế khá đẹp và bắt mắt, tuy nhiên do khó
khăn về thay đổi nội dung nên nó ít được sử dụng. Website tĩnh chỉ thường được sử
dụng ở các đơn vị chuyên về thiết kế website bởi họ đủ điều kiện và khả năng để thay
đổi các thông tin đã được gắn tĩnh trên web.
11


II.1.3 Ưu điểm của website tĩnh
•

Tốc độ truy cập nhanh: Do được thiết kế chủ yếu bằng ngôn ngữ HTML5 có
bổ sung và phụ trợ từ CSS3 và JS nên dung lượng của một trang web tĩnh
thường khá nhẹ từ đó tốc độ truy cập web cũng nhanh hơn.

•

Giao diện thiết kế mới lạ: Do không phải biến đổi thông tin quá thường xuyên
nên một website tĩnh có thể được thiết kế khá tùy ý với nhiều giao diện độc đáo,
mới lạ đầy ấn tượng mà website động không thể có được.

•

Chi phí đầu tư thấp: Một trang web tĩnh thường có chi phí đầu tư khá thấp so
với web động, cụ thể là cũng với cùng một giao diện, website động sẽ yêu cầu
sự tham gia của coder chứ không chỉ riêng nhân viên cắt giao diện, điều này
khiến chi phí cuối cùng bị đội lên khá nhiều.

•

Thân thiện với bộ máy tìm kiếm: Việc đặt tên file HTML tùy ý giúp trang
web tĩnh thân thiện hơn với bộ máy tìm kiếm

•

Ít tốn tài ngun máy chủ: Nhu cầu cấu hình máy chủ thấp, nên chi phí máy
chủ thấp, cũng như các chi phí vận hành, bảo trì, sao lưu dự phịng.

•

Gần như khơng thể hack: Một ưu điểm có thể nói là bất khả chiến bại của
website tĩnh đó chính là việc nó "gần như khơng thể hack được". Sử dụng
web tĩnh sẽ loại trừ được hầu hết yếu tố bị tấn công từ bên trong máy chủ, việc
tấn công 1 trang web tĩnh chỉ mở duy nhất port 80, 443 là rất khó, nếu khơng
nói là khơng thể.

II.1.4 Nhược điểm của website tĩnh
•

Khó quản lý nội dung: Do các nội dung trên website tĩnh sẽ được nhập trực

tiếp trên file HTML, CSS nên việc quản lý nội dung sẽ trở lên khó khăn hơn rất
nhiều, đặc biệt với những website có nhiều trang web tĩnh.

•

Khó nâng cấp bảo trì: Thơng thường với một website động, việc nâng cấp sẽ
chỉ cần thực hiện trên một trang là sẽ được đồng bộ trên những trang dùng
chung. Tuy nhiên với môt website tĩnh điều này sẽ là không thể. Để thay đổi
thông tin cho một website tĩnh, bạn sẽ cần tự vào thủ công từng trang một để
tiến hành thay đổi.

•

Khơng có sự tương tác với người dùng: Một đặc điểm chủ yếu nhất khiến
website tĩnh không thường được trọng dụng hiện nay chính là sự tương tác.
Trong thời đại thương mại điện tử bùng nổ, hầu hết các website hiện nay đều
12


được lập ra với mục đích kinh doanh và bán hàng trực tuyến, nó địi hỏi người
sở hữu website phải liên tục cập nhật các thông tin, sản phẩm cũng như các
chính sách hấp dẫn đến khách hàng nhưng với một trang web tĩnh điều này gần
như là không thể. Bạn sẽ không thể ngày nào cũng báo với đơn vị thiết kế
website thêm nội dung cho website của mình cũng như việc họ sẽ không thể
luôn luôn hỗ trợ bạn, cũng chính vì lý do này mà website tĩnh bị mất dần vị thế
của nó.
II.1.5 Các ứng dụng của website tĩnh
Về cơ bản website tĩnh sẽ được sử dụng để làm website cho các công ty thiết kế
web hoặc cho các cơ quan, đơn vị mà thông tin trên đó gần như ít hoặc khơng cần thay
đổi trong một thời gian dài.

Với các website dạng khác, website tĩnh cũng có thể được sử dụng cho những
trang thường khơng cần thay đổi về nội dung như trang liên hệ, giới thiệu,...
II.2 Website động
II.2.1 Trang web động là gì?
Trang web động là một tập hợp các dữ liệu số hóa được tổ chức thành cơ sở dữ
liệu, các dữ liệu số hóa được gọi ra trình diễn trên các trang web dưới dạng văn bản,
âm thanh, hình ảnh.nó có thêm các phần xử lý thông tin và truy xuất dữ liệu.
Khác với web tĩnh, web động ln ln có thơng tin mới do các thông tin này
được cập nhật bởi phần mềm quản trị web do các công ty thiết kế website cung cấp.
Các thông tin mới này được lưu vào cơ sở dữ liệu của website và đưa ra sử dụng dựa
theo yêu cầu của người dùng.
II.2.2 Các ngôn ngữ để lập trình website động
Web động sử dụng các cơng nghệ như HTML, CSS, JAVASCRIPT,... và điều
đặc biệt là có sử dụng một ngơn ngữ lập trình server như PHP, Java, Python,... một hệ
quản trị cơ sở dữ liệu như MySQL, SQL Server,... vì vậy web động phải chạy trong
máy chủ.
II.2.3 Ưu điểm của website động
•

Dễ dàng quản lý nội dung: Đây có lẽ là ưu điểm đầu tiên cần nhắc đến của
website động. Với việc dễ dàng quản lý nội dung, người dùng có thể dễ dàng
thực hiện việc thay đổi nội dung theo ý muốn của mình trên trang web. Điều
này mang đến sự thuận tiện và tiện lợi hơn cho người dùng. Đặc biệt là những
13


trang web mang tính chất như blog hay tin tức, việc thay đổi nội dung diễn ra
khá phổ biến. Do vậy, sử dụng các website động là sự lựa chọn phù hợp và hợp
lý nhất.
•

Dễ dàng nâng cấp và bảo trì:
Với bất kỳ website hay thiết bị, hệ thống nào thì việc nâng cấp, bảo trì
ln là một nhu cầu, yêu cầu thiết yếu. Việc nâng cấp, bảo trì sẽ giúp cho hệ
thống trang web được sử dụng một cách tốt hơn, có thể tích hợp thêm một số
tính năng tiện ích khác đem lại trải nghiệm tốt hơn cho người dùng. Đồng thời,
đây cũng là quá trình giúp cho việc kiểm tra, xem xét lại các tính năng khác có
vận hành một cách tốt nhất theo những gì mong muốn hay khơng để có thể kịp
thời đưa ra các phương pháp phù hợp.
Có rất nhiều trang web thực hiện việc nâng cấp, bảo trì khá khó khăn bởi
vì những tính năng trong hệ thống quá cũ hay các tiện ích mới quá không phù
hợp. Tuy nhiên, với trang web động thì lại được thực hiện nâng cấp và bảo trì
dễ dàng hơn. Đem đến sự thuận tiện trong việc cải tiến và hứa hẹn được sự trải
nghiệm tốt nhất.

•

Có thể xây dụng được web lớn:
Với các website động thì hầu như ứng dụng của nó chính là việc được sử
dụng các trang web lớn. Vì thế đây cũng được coi là một tiện ích, ưu điểm của
web động. Với loại web này thì việc tạo các website có quy mơ, tính chất lớn và
tầm cỡ thì sẽ dễ dàng hơn so với các nền tảng web khác.
Nhờ vào việc được tạo nên từ các công nghệ phổ biến và việc sở hữu
ngơn ngữ lập trình và hệ quản trị dữ liệu cơ sở tối ưu mà web động có thể cho
phép các lập trình viên dễ dàng để xây dựng, thiết lập một trang web mà có thể
chứa tải được nhiều nội dung, tính năng và các tiện ích khác nhau. Có lẽ chính
vì ưu điểm này mà website động được trở nên phổ biến hơn rất nhiều.

•

Thường sử dụng tương tác với người dùng cao:
Với những tiện ích và việc dễ dàng sử dụng, website động cho phép
người dùng có thể thực hiện dễ dàng các tương tác, thay đổi khác trên trang
web trong quá trình sử dụng. Thêm vào đó, người dùng có thể thực hiện các
thao tác như chỉnh sửa văn bản, tải ảnh, thêm video,...hay bất kỳ thao tác nào
khác mà mình muốn.

14


Chính vì điều này mà web động có một sự tương tác, trao đổi khá lớn
với người dùng, đem đến những tiện ích mới mẻ, phù hợp hơn.
•

Thân thiện với bộ máy tìm kiếm: Có thể nhiều người nghĩ rằng việc thực hiện
công việc SEO trên các website động sẽ khá khó khăn. Tuy nhiên, hiện nay,
việc thực hiện SEO tốt vẫn có thể được thực hiện một cách dễ dàng. Với các
website động thì để SEO bạn có thể sử dụng chức năng Rewrite URL. Với chức
năng này bạn có thể dùng để thực hiện việc chuyên URL thân thiện.

II.2.4 Nhược điểm của website động
•

Chi phí xây dựng cao: So với các nền tảng web khác thì chi phí dùng để xây
dựng website động sẽ cao và tốn hơn rất nhiều. Vì thế, khi quyết định việc xây
dựng trên web động thì bạn sẽ phải xác định chi phí mình bỏ ra là khá lớn và
cần phải được đầu tư một cách nghiêm túc.

•

Cần có thể cần thêm nhân sự chuyên ngành:
Việc sử dụng và tuyển dụng thêm nhân sự chuyên ngành để đảm nhận
việc xây dựng website động là điều bắt buộc và cần thiết khi trang web mà bạn
định tạo ra là một trang web lớn, quy mô và tầm cỡ. Khi thực hiện việc xây
dựng sẽ có rất nhiều những vấn đề khác phát sinh. Do vậy, mà bạn có thể sẽ
phải sử dụng những nhân sự có sự hiểu biết chuyên sâu và kỹ càng hơn để có
thể giải quyết được việc này.
Đây có lẽ là những ưu điểm và nhược điểm mà ta có thể dễ dàng nhận
thấy trong việc sử dụng web động. Có thể thấy rằng nhược điểm của việc dùng
web động khá ít tuy nhiên lại rất đáng phải suy nghĩ khi quyết định có nên sử
dụng hay khơng.

II.2.5 Các ứng dụng của website động
Hiện nay, hầu hết các trang web đều là website động. Với những ưu điểm vượt
trội, khả năng tương tác người dùng cao, dễ dàng nâng cấp, bảo trì nên website động
được sử dụng phổ biến là điều dễ hiểu. Các trang web nên sử dụng website động như:
mạng xã hội, các sàn thương mại điện tử, trang web tin tức, blog,...

15


CHƯƠNG III. NỘI DUNG TÌM HIỂU
III.1 Cơng cụ sử dụng
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã
nguồn phổ biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa nền
tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS
Code ngày càng được ứng dụng rộng rãi.
III.1.1 Visual Studio Code là gì?

Hình III.1 Visual Studio Code là gì?

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.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax
highlighting, tự hồn thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính
năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím
tắt, và các tùy chọn khác.

16


III.1.2 Một số tính năng của Visual Studio Code

Hình III.2 Một số tính năng của Visual Studio Code
•

Hỗ trợ nhiều ngơn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#, F#, Visual
Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra
thơng báo nếu chương chương trình có lỗi.

•

Hỗ trợ đa nền tảng
Các trình viết code thơng thường chỉ được sử dụng hoặc cho Windows hoặc
Linux hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động tốt trên
cả ba nền tảng trên.

•

Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình khơng
nằm trong số các ngơn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở
rộng. Điều này vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần
mở rộng này hoạt động như một chương trình độc lập.

•

Kho lưu trữ an tồn
Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn. Với Visual
Studio Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng kết nối với Git
hoặc bất kỳ kho lưu trữ hiện có nào.

•

Hỗ trợ web
17


Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngoài ra, nó cũng có một trình
soạn thảo và thiết kế website.
•

Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau.
Ngồi ra, Visual Studio Code cịn cung cấp các thư mục cho một số tệp đặc biệt
quan trọng.

•

Hỗ trợ viết Code
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng. Visual
Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.

•

Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải
chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao
tác.

•

Màn hình đa nhiệm
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục –
mặc dù chúng khơng hề liên quan với nhau.

•

Intellisense

Hình III.3 Intellisense
18


Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense, nhưng ít
chương trình nào chun nghiệp bằng Visual Studio Code. Nó có thể phát hiện
nếu bất kỳ đoạn mã nào khơng đầy đủ. Thậm chí, khi lập trình viên qn khơng
khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cú pháp cịn thiếu.
•

Hỗ trợ Git
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub. Mã này
sau đó có thể được thay đổi và lưu lại trên phần mềm.

•

Bình luận
Việc để lại nhận xét giúp người dùng dễ dàng nhớ công việc cần hồn thành.

III.1.3 Ưu điểm của Visual Studio Code
•

Hỗ trợ đa nền tảng: Windows, Linux, Mac

•

Hỗ trợ đa ngơn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript,
JSON

•

Ít dung lượng

•

Tính năng mạnh mẽ

•

Intellisense chun nghiệp

•

Giao diện thân thiện

III.2 Ngơn ngữ sử dụng
III.2.1 HTML(Hyper Text Markup Language)
III.2.1.1 HTML là gì?
HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngơn
ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan
đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệc ta
gọi là Browser. Hiện nay có khá nhiều Browser như Firefox, Chrome, Cốc Cốc,...Tất
cả Browser đều có điểm chung là giúp người dùng thao tác với website và nó đều có
khả năng biên dịch những đoạn mã HTML, CSS và JavaScript.
III.2.1.2 Cấu trúc cơ bản của HTML
19


Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3
phần:
<!Doctype>: Phần khai báo chuẩn của html hay xhtml.
<head></head>: Phần khai báo ban đầu, khai báo về meta, title, css,
javascript…
<body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung.

Hình III.4 Cấu trúc cơ bản của HTML
III.2.2 CSS (Cascading Style Sheets)
III.2.2.1 CSS là gì?
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử

dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví
dụ như HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các
phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ
giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi
màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.

20


Hình III.5 Vai trị của CSS
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn
có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp
dụng các thuộc tính cần thay đổi lên vùng chọn đó.
III.2.2.1 Cấu trúc CSS

Hình III.6 Cấu trúc CSS
Một đoạn CSS bao gồm 4 phần:
vùng chọn {
thuộc tính : giá trị;
thuộc tính: giá trị;
.....
}

21


Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị
sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln có một giá trị riêng,
giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS. Phần giá
trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dịng khai báo

thuộc tính sẽ ln có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng khơng giới
hạn thuộc tính.
III.2.3 JavaScript
III.2.3.1 JavaScript là gì?
JavaScript là một ngơn ngữ kịch bản (scripting language) được dùng để tạo các
script ở máy client (client-side script) và máy server (server-side script). Các script ở
máy client được thực thi tại trình duyệt, các script ở máy server được thực hiện trên
server. Chương này sẽ giới thiệu cho chúng ta về ngôn ngữ Javascript, và cách chèn
một script vào trong tài liệu HTML.
HTML lúc đầu được phát triển như là một định dạng của tài liệu có thể chuyển
dữ liệu trên Internet Tuy nhiên, khơng lâu sau đó, trọng tâm của HTML nặng tính hàn
lâm và khoa học dần chuyển hướng sang người dùng thường nhật vì ngày nay người
dùng xem Internet như là một nguồn thơng tin và giải trí. Các trang Web ngày càng
mang tính sáng tạo và đẹp mắt hơn nhằm thu hút nhiều người dùng hơn. Nhưng thực
chất kiểu dáng và nội dung bên trong vẫn không thay đổi. Và người dùng hầu như
không thể điều khiển trên trang Web mỗi khi nó được hiển thị.
Javascript được phát triển như là một giải pháp cho vấn đề nêu trên. Javascript
là một ngôn ngữ kịch bản được Sun Microsystems và Netscape phát triển. Nó được
dùng để tạo các trang Web động và tương tác trên Internet. Đối với những người phát
triển HTML, Javascript rất hữu ích trong việc xây dựng các hệ thống HTML có thể
tương tác với người dùng.
Sun Microsystems đã viết ra một ngôn ngữ phức tạp và mạnh mẽ mà chúng ta
đã biết đó là ngơn ngữ Java. Mặc dù Java có tính khả dụng cao nhưng nó lại phù hợp
nhất đối với các nhà lập trình có kinh nghiệm và cho các cơng việc phức tạp hơn.
Netscape Communications nhận thấy nhu cầu cần một ngôn ngữ thiết kế web có khả
năng tương tác vớI ngườI sử dụng hay vớI các Java Applet, dễ sử dụng ngay cả vớI
những ngườI lập trình ít kinh nghiệm.

22

LiveScript là một ngôn ngữ mới chỉ ở dạng phác thảo, tuy nhiên nó hấp dẫn
ngườI sử dụng vì hứa hẹn sẽ đáp ứng tốt những yêu cầu trên. LiveScript được thiết kế
theo tinh thần của nhiều ngôn ngữ script đơn giản nhưng nó lại có tính khả dụng cao
được thiết kế đặc biệt để xây dựng các trang Web (chẳng hạn như HTML và các form
tương tác). Để giúp “bán chạy” ngôn ngữ mới này, Netscape hợp tác với Sun cho ra
đời ngôn ngữ Javascript. Trên thực tế, Microsoft là người tiên phong triển khai phiên
bản của Javascript (còn có tên là Jscript), nhưng họ khơng sử dụng các đặc tả chính
thức của Javascript.
Mục tiêu của JavaScript là nhằm cung cấp cho các nhà phát triển Web một số
khả năng và quyền điều khiển chức năng cho trang Web. Mã Javascript có khả năng
nhúng trong tài liệu HTML để điều khiển nội dung của trang Web và kiểm tra sự hợp
lệ của dữ liệu mà người dùng nhập vào. Khi một trang hiển thị trong trình duyệt, các
câu lệnh được trình duyệt thơng dịch và thực thi.
JavaScript là một ngôn ngữ kịch bản dựa trên đối tượng nhằm phát triển các
ứng dụng Internet chạy trên phía client và phía server.
Các ứng dụng client được chạy trong một trình duyệt như Netscape Navigator
hoặc Internet Explorer, và các ứng dụng server chạy trên một Web server như
Microsoft’s Internet Information Server hoặc Netscape Enterprise Server.
III.2.3.2 Hiệu ứng và quy tắc JavaScript
JavaScript là một ngơn ngữ lập trình được nhúng được trong các trang HTML.
JavaScript nâng cao tính động và khả năng tương tác cho web-site bằng cách sử dụng
các hiệu ứng của nó như thực hiện các phép tính, kiểm tra form, viết các trò chơi, bổ
sung các hiệu ứng đặc biệt, tuỳ biến các chọn lựa đồ hoạ, tạo ra các mật khẩu bảo mật
và hơn thế nữa.
Chúng ta có thể sử dụng JavaScript để:
•

Tương tác với người dùng.Chúng ta có thể viết mã để đáp lạI các sự kiện. Các
sự này sẽ có thể phát sinh bởi người dùng - - nhấp chuột hay được phát sinh từ

hệ thống - - định lại kích thước của trang và v.v.

•

Thay đổi nội dung động. Mã JavaScript có thể dùng để thay đổi nội dung và vị
trí các phần tử một cách động trên một trang nhằm đáp lại sự tương tác với
người dùng.

23


•

Kiểm tra tính hợp lệ dữ liệu. Chúng ta có thể viết mã nhằm kiểm tra tính hợp
lệ của dữ liệu do người dùng nhập vào trước khi nó được gửi lên Web server để
xử lý.

Giống như các ngôn ngữ khác, JavaScript cũng tuân thủ một số quy tắc ngữ
pháp căn bản. Việc nắm vững các quy tắc ngữ pháp này có thể giúp ta đọc được script
và tự viết các script không bị lỗi.
Một số trong các luật này bao gồm:
•

Dùng Caps. JavaScript phân biệt chữ hoa chữ thường

•

Dùng Pairs. Trong JavaScript, ln ln có cặp ký hiệu mở và đóng. Lỗi sẽ
xuất hiện khi bỏ sót hoặc đặt sai một trong hai ký hiệu này.

•

Dùng Spaces (các ký tự trắng).Như HTML, JavaScript thường bỏ qua ký tự
trắng. Trong JavaScript, ta có thể thêm vào các ký tự trắng hoặc các tab giúp
cho ta dễ dàng đọc hay sửa các file script.

•

Dùng Chú thích (Comments).Các chú thích giúp ta ghi chú về chức năng của
đoạn script, thờI gian và ngườI tạo ra đoạn script.

Mặc dù cả client-side JavaScript và server-side JavaScript đều dựa trên một
ngôn ngữ nền tảng như nhau, nhưng mỗI loạI cịn có thêm những tính năng chun
biệt phù hợp với mơi trường mà nó chạy. Nghĩa là, client-side JavaScript bao gồm các
đối tượng được định nghĩa sẵn chỉ có thể sử dụng trên trình dut, Server-side
JavaScript bao gồm các đối tượng và các hàm được định nghĩa sẵn chỉ có thể sử dùng
trong các ứng dụng phía server (server-side applications)
III.2.3.2 Các cơng cụ JavaScript và IDE, và môi trường thực thi
Các công cụ sinh mã JavaScript và IDE giúp tạo ra mã JavaScript rất hữu hiệu. .
Các cơng cụ này cịn giúp ta nhanh chóng phát triển website của mình.
Một vài cơng cụ JavaScript và IDE được đề cập dưới đây:
•

Dialog Box.Cơng cụ này tự động tạo mã để sinh ra các hộp thoại tuỳ biến trên
các trình duyệt khác nhau (alert, confirm, prompt, v.v.) mang lại kiểu dáng
chuyên nghiệp cho website.

•

Pop-up Menu builder. Chỉ cần đưa vào các lựa chọn, công cụ này sẽ tự động

tạo ra các pop-up menu trên các trình duyệt khác nhau.

•

Remotes. Tự động sinh mã để mở ra một cửa sổ popup.
24


Như chúng ta đã biết, JavaScript có thể được chạy trên máy khách (client) và
máy chủ (server). Bên phía máy khách, trình duyệt sẽ thực thi mã lệnh javascript trong
trang web khi mở nó. Bên phía máy chủ, mã javascript sẽ được thực thi tại máy chủ và
do máy chủ thực hiện.
•

Client-side Java Script

Khi máy client yêu cầu một trang HTML, server sẽ kiểm tra xem trang đó có chứa
script hay khơng. Nếu nó chứa các client-side script, server sẽ chuyển toàn bộ tài liệu
bao gồm mã lệnh JavaScript và nội dung HTML của nó cho trình duyệt. Khi trình
duyệt nhận được tài liệu đó, nó thực thi các mã lệnh HTML và JavaScript mà khơng
cần bất kì sự tương tác nào với server.
•

JavaScript trên Web Server

Chúng ta có thể nhúng các lệnh JavaScript chạy trên server (server-side script)
vào trong tài liệu HTML. Quá trình tạo ra các ứng dụng server-side là một quá trình
gồm hai giai đọan.
Các trang HTML có chứa các câu lệnh JavaScript của cả client-side và serverside đều được tạo ra cùng với các file JavaScript. Tất cả các file này sẽ được biên dịch
thành dạng mã thực thi được là bytecode.

Khi trình duyệt yêu cầu trang HTML, run-time engine sẽ thực thi mã lệnh
server-side JavaScript rồi trả trang HTML về cho trình duyệt.
Một số cơng dụng của script server-side bao gồm:
o

Kết nối vào các cơ sở dữ liệu

o

Chia sẻ thông tin cho những người dùng của một ứng dụng

o

Truy cập vào hệ thống file trên server

III.2.3.2 Nhúng JavaScript vào trong trang web
Chúng ta có thẻ chèn các lệnh JavaScritp vào trong một tài liệu HTML theo những
cách sau đây:
•

Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ
<SCRIPT>

•

Liên kết file nguồn JavaScript với tài liệu HTML
25