CuTeoHocLamWeb(2): Tạo một trang web đơn giản

Bài trước: CuTeoHocLamWeb(1): Làm quen với HTML

-----

2. Tạo một trang web đơn giản

2.1 Tạo thư mục cho dự án web

Để tiện cho việc học và dần làm quen với cấu trúc thư mục của các dự án web, chúng ta sẽ tạo một thư mục để lưu các tập tin mã nguồn, hình ảnh, phông chữ. Ví dụ, bạn sẽ tạo một thư mục có tên là CuTeoHocLamWeb_Code, trong đó tạo 4 thư mục con là html, css, javascript và assets.

Trong đó:

- Thư mục html để chứa các tập tin mã nguồn HTML

- Thư mục css để chứa các tập tin mã nguồn CSS

- Thư mục javascript để chứa các tập tin mã nguồn JavaScript

- Thư mục assets (tài nguyên) dùng để chứa hình ảnh, phông chữ

2.2 Hiển thị tiếng Việt

Như đã biết, mã nguồn HTML sẽ được chứa trong các tập tin có phần mở rộng là .html. Chúng ta sẽ dùng Notepad, để tạo ra tập tin có tên là QueHuong.html.

Khi lưu tập tin QueHuong.html, bạn nên dùng dấu nháy kép để bao lại tên tập tin, để Notepad không thêm phần mở rộng .txt vào tên tập tin. Trình duyệt sẽ không thể dịch và hiển thị mã nguồn trang web khi có phần mở rộng là .txt. Phần Encoding, bạn chọn UTF-8.

UTF-8 là viết tắt của Unicode Transformation Format-8.

UTF-8 là một tiêu chuẩn mã hóa ký tự phổ biến và linh hoạt, nó đã trở thành một tiêu chuẩn cho việc hiển thị văn bản trên web và nhiều ứng dụng khác.

Khi bạn lưu một tập tin mã nguồn HTML với kiểu mã hóa là UTF-8, Notepad sẽ dùng UTF-8 để mã hóa văn bản tiếng Việt. Khi hiển thị trang web, trình duyệt sẽ có cơ sở để dịch và hiển thị chính xác văn bản tiếng Việt mà bạn đã tạo ra khi viết mã nguồn HTML.

Chúng ta sẽ viết mã nguồn để hiển thị 2 khổ thơ:

[QueHuong.html]

<!DOCTYPE html>

<html>

<head>

<title>Quê hương</title>

</head>

<body>

<h1>Quê Hương</h1>

<p>Quê hương là gì hả mẹ

Mà cô giáo dạy hãy yêu?

Quê hương là gì hả mẹ

Ai đi xa cũng nhớ nhiều?</p>

<p>Quê hương là chùm khế ngọt

Cho con trèo hái mỗi ngày

Quê hương là đường đi học

Con về rợp bướm vàng bay</p>

<p>Tác giả: Đỗ Trung Quân</p>

</body>

</html>

Mở tập tin QueHuong.html bằng trình duyệt để xem kết quả:

Bạn sẽ thấy trang web đã hiển thị được tiếng Việt. Rất có thể trình duyệt Chrome đã sử dụng bộ mã hóa mặc định là UTF-8 để dịch và hiển thị nội dung trang web.

Để chắc chắn là trình duyệt luôn sử dụng bộ mã hóa UTF-8 khi hiển thị văn bản, thì bạn cần thêm dòng khai báo <meta charset="UTF-8">:

<head>

<title>Quê hương</title>

<meta charset="UTF-8">

</head>

Dòng khai báo <meta charset="UTF-8"> được đặt trong phần tử head.

Phần tử meta, được sử dụng để mô tả một số đặc tính của trang web, ví dụ: bộ mã mà trang web sử dụng, mô tả vắn tắt nội dung của trang web, các từ khóa của trang web, tác giả của trang web. Meta là viết rút gọn của metadata. Metadata là siêu dữ liệu, nghĩa là dữ liệu để mô tả dữ liệu. Cụ thể ở đây là các thông tin để mô tả một số đặc tính của trang web. Phần tử meta không được hiển thị ra trình duyệt. Trình duyệt, máy tìm kiếm và các dịch vụ web khác sẽ đọc và sử dụng các phần tử meta này.

2.3 Chèn ảnh cho trang web

Chúng ta sẽ học cách chèn thêm một hình ảnh cho trang web, đồng thời cũng học luôn về thuộc tính (attribute) trong HTML.

Để chèn một ảnh vào trang web:

- Bạn vào trang google, gõ từ khóa: vietnam 800x400 (rộng 800px, cao 400px) để lấy một ảnh bạn thích, lưu vào thư mục assets.

- Thêm dòng mã sau (dòng tô đậm):

<body>

<img src="../assets/caphe.jpg">

<h1>Quê Hương</h1>

- Lưu lại tập tin mã nguồn, mở tập tin mã nguồn bằng trình duyệt để xem kết quả:

Phần tử img

Chúng ta sử dụng phần tử img để chèn ảnh vào trang web. Để ý, img là viết tắt của image (hình ảnh). Bạn nên nhớ các từ gốc tiếng Anh của các phần tử sẽ dễ dàng biết được chức năng của nó.

<img src="../assets/caphe.jpg">

Phần tử img là phần tử rỗng (empty element), nên chỉ có thẻ mở mà không có thẻ đóng (<img>).

Chỉ với cú pháp là <img> thì trình duyệt sẽ không thể biết được là phải lấy hình ảnh nào, lấy ở đâu? Vì vậy, cần phải sử dụng thêm thuộc tính (attribute) để cung cấp cho trình duyệt biết được tên và vị trí của hình ảnh.

Trong thẻ mở của img, chúng ta sử dụng thuộc tính src để chỉ ra vị trí và tên của hình ảnh (../assets/caphe.jpg). src là viết tắt của source (nguồn).

Thuộc tính trong HTML

Thuộc tính là thành phần bổ sung của mỗi phần tử HTML. Thuộc tính được dùng để thay đổi chức năng mặc định của phần tử hoặc là một thành tố bắt buộc phải có, để một phần tử có thể thực hiện đúng chức năng. Xem hình minh họa:

Thuộc tính luôn được đặt trong thẻ mở. Mỗi phần tử có thể chứa nhiều thuộc tính, mỗi thuộc tính cách nhau bởi một khoảng trắng, tính thứ tự trước sau của các thuộc tính là không quan trọng.

Hầu hết các thuộc tính đều có giá trị đi kèm, giá trị của thuộc tính nằm sau dấu “=”, được bao lại bằng dấu nháy kép ("") hoặc nháy đơn ('). Mọi người hay sử dụng dấu nháy kép. Tuy nhiên, cũng có một số giá trị không cần phải bao lại bằng dấu nháy. Lưu ý, đừng nhầm dấu ("") với dấu (“”) hoặc dấu (') với dấu (‘), việc chép mã HTML từ tài liệu Word để chạy thử hay bị nhầm các dấu này, và gây ra lỗi. Trong một số trường hợp, thuộc tính được viết rút gọn chỉ gồm một từ mô tả, ví dụ thuộc tính checked.

Giá trị của thuộc tính có thể là: văn bản, số, kí tự, URL, đơn vị đo.

Có bốn loại thuộc tính cơ bản gồm:

Loại thuộc tính	Mô tả
Thuộc tính bắt buộc (required attributes)	Là thuộc tính bắt buộc phải có để phần tử thực hiện đúng chức năng của nó. Ví dụ: thuộc tính href trong phần tử <a>, và <link>, thuộc tính src trong phần tử <img>
Thuộc tính tùy chọn (optional attributes)	Là thuộc tính được sử dụng để thay đổi chức năng mặc định của một phần tử. Ví dụ: thuộc tính maxlength trong phần tử <input>
Thuộc tính chuẩn (standard attributes) hay thuộc tính phổ dụng (global attributes)	Là thuộc tính có thể sử dụng được cho nhiều loại phần tử. Ví dụ: thuộc tính id, class, title
Thuộc tính sự kiện (event attributes)	Là thuộc tính được sử dụng để kích hoạt một hành động (script) trong các trường hợp cụ thể. ví dụ: thuộc tính onclick, onload

2.4 Bài tập

1. Trong UTF-8, UTF là viết tắt của các từ nào?

A. Uniform Text Format

B. Unicode Transformation Format

C. Uniform Transformation Format

D. Unicode Text Format

2. Metadata is "data that provides ________about other data". In other words, it is "data about data".

A. format

B. information

C. structure

D. standard

3. Technically, an ________is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element.

A. HTML attribute

B. HTML tag

C. HTML document

D. HTML element

4. One of the following markup examples is incorrect. Which one?

A. <img src = "birthday.jpg">

B. <em>Congratulations!<em>

C. <a href="file.html">linked text</a>

D. <p>This is a new paragraph</p>

5. Viết lại các đoạn mã trong bài học và tự làm thêm một trang web riêng của bạn.

-----

Gợi ý làm bài tập

1(B), 2(B), 3(D), 4(B)

------

Cập nhật: 4/12/2024

Bài sau:

-----

Windows Form (8): Thao tác với DBMS bằng dòng lệnh (2)

Bài trước: Windows Form (7): Thao tác với DBMS bằng dòng lệnh (1)

-----

Gán quyền truy cập database

Vậy là user1 đã có quyền đăng nhập (login) vào MS SQL Server. Tuy nhiên, để sử dụng cơ sở dữ liệu thì phải gán quyền truy cập cơ sở dữ liệu cho user1.

Để dễ hiểu, việc user1 có quyền đăng nhập vào MS SQL Server như là một người có quyền đi qua cổng của một khu căn hộ cao cấp (đã có Thẻ cổng). MS SQL Server chính là khu căn hộ cao cấp, gồm nhiều căn hộ, mỗi căn hộ là một cơ sở dữ liệu.

Để vào căn hộ, hay để truy cập vào cơ sở dữ liệu, bạn sẽ mang Thẻ cổng, gặp bộ phận quản lý, xin cấp Thẻ căn hộ, mỗi căn hộ sẽ có một thẻ riêng.

Ví dụ, chúng ta sẽ cho User1 được quyền truy cập cơ sở dữ liệu QuanLySach:

Trong thuật ngữ của MS SQL Server, việc cấp quyền sử dụng cơ sở dữ liệu được thực hiện bằng cách nhân bản (ánh xạ) tài khoản đăng nhập thành một database user. Tên của database user có thể giống hoặc khác tên tài khoản đăng nhập (login account).

- Xem bạn đang đứng ở cơ sở dữ liệu nào?

1> select db_name()

2> go

-------------------------------------------

master

(1 rows affected)

Bạn phải chuyển sang cơ sở dữ liệu cần phân quyền (QuanLySach):

1> USE QuanLySach

2> go

Changed database context to 'QuanLySach'.

1> select db_name()

2> go

--------------------------------

QuanLySach

(1 rows affected)

Tạo database user (tên là User1), để User1 có quyền truy cập QuanLySach (mới chỉ được vào căn hộ, mà chưa được làm gì thêm):

1> CREATE USER User1

2> FOR LOGIN User1

3> GO

Chương trình không báo lỗi là đã gán quyền truy cập thành công.

Phân quyền cho User1 được toàn quyền trên QuanLySach:

1> ALTER ROLE db_owner ADD MEMBER User1

2> GO

Từ khóa db_owner nghĩa là User được toàn quyền trong QuanLySach.

Tạo các bảng

Thử xem trong QuanLySach có bảng nào chưa?

1> SELECT TABLE_NAME

2> FROM QuanLySach.INFORMATION_SCHEMA.TABLES

3> WHERE TABLE_TYPE = 'BASE TABLE'

4> GO

TABLE_NAME

--------------------------------------

(0 rows affected)

Chúng ta sẽ tạo bảng NhaXuatBan với các cột dữ liệu: NXBanID, Ten, DiaChi.

1> CREATE TABLE NhaXuatBan(NXBanID int, Ten varchar(255), DiaChi varchar(255))

2> GO

Chương trình không báo lỗi, là đã tạo được.

Kiểm tra xem bảng NhaXuatBan đã được tạo ra chưa?

1> SELECT TABLE_NAME

2> FROM QuanLySach.INFORMATION_SCHEMA.TABLES

3> WHERE TABLE_TYPE = 'BASE TABLE'

4> GO

TABLE_NAME

------------------------------------------

NhaXuatBan

Nhập dữ liệu cho bảng

Ví dụ, chúng ta sẽ nhập dòng dữ liệu đầu tiên cho bảng NhaXuatBan:

1> INSERT INTO NhaXuatBan (NXBanID, Ten, DiaChi) VALUES (1, 'Langbiang', 'Nui Langbiang - DaLat')

2> GO

(1 rows affected)

Truy vấn (xem) thông tin trong một bảng

Ví dụ, chúng ta sẽ xem dữ liệu đang có trong bảng NhaXuatBan:

1> SELECT * FROM NhaXuatBan

2> GO

NXBanID Ten DiaChi

1 Langbiang Nui Langbiang - DaLat

(1 rows affected)

7.3 Bài tập

1. Để làm việc với hệ quản trị cơ sở dữ liệu, bạn có thể sử dụng các cách sau, chỉ ra một cách không đúng?

A. Sử dụng ngôn ngữ lập trình và các thư viện của ngôn ngữ lập trình

B. Sử dụng Notepad

C. Sử dụng các công cụ dòng lệnh, ví dụ CMD, Windows PowerShell

D. Sử dụng các công cụ đồ họa (GUI), ví dụ: SSMS, Azure Data Studio, Navicat for SQL Server

2. Muốn kết nối tới MS SQL Server, cần có các điều sau, điều nào không đúng?

A. Dịch vụ MS SQL Server phải đang chạy (running)

B. Bạn phải có tài khoản của Windows hoặc của DBMS

C. Trên máy đã cài đặt MS SQL Server

D. Máy tính phải có Visual Studio

3. Trong sqlcmd, lệnh select db_name() dùng để làm gì?

A. Cho biết danh sách các user đang có trong MS SQL Server

B. Lựa chọn database để kết nối

C. Cho biết database hiện hành đang được kết nối tới

D. Cho biết danh sách các database đang có trong MS SQL Server

4. Phát biểu nào không đúng khi nói về quyền truy cập một cơ sở dữ liệu của một tài khoản (ví dụ user1)?

A. User1 phải có quyền đăng nhập (login) vào MS SQL Server

B. User1 phải có quyền truy cập vào một DBMS cụ thể (ánh xạ quyền truy cập - mapping)

C. User1 phải có quyền truy cập và làm việc với database cụ thể (phân quyền sử dụng database)

D. User1 bắt buộc phải là người quản trị hệ thống (administrator)

5. Thực hành theo các hướng dẫn trong bài viết.

-----

Gợi ý làm bài tập

1(B), 2(D), 3(C), 4(D)

-----

Cập nhật: 2/12/2024

Bài sau: Windows Form (9):

Windows Form (7): Thao tác với DBMS bằng dòng lệnh (1)

Bài trước: Windows Form (6): Làm quen với Cơ sở dữ liệu

-----

7. Thao tác với DBMS bằng dòng lệnh

7.1 Kết nối với DBMS

Nhắc lại:

- DBMS là DataBase Management System là một phần mềm, dùng để tạo, quản lý và khai thác cơ sở dữ liệu

- MS SQL Server là một DBMS

- Bạn cần tải và cài đặt MS SQL Server lên máy tính

- MS SQL Server sẽ chạy dưới dạng một dịch vụ (chạy ngầm) trên máy tính

- Trước khi kết nối và sử dụng MS SQL Server, bạn cần đảm bảo chắc chắn là dịch vụ này đang ở trạng thái Running (có thể kiểm tra trong Task Manager hoặc Services)

Có nhiều cách để kết nối và làm việc với một MS SQL Server, ví dụ:

- Sử dụng cửa sổ dòng lệnh, ví dụ Command Line (CMD), Windows PowerShell, Command Prompt. Các chương trình này đều có sẵn trên Windows.

- Sử dụng các ứng dụng đồ họa, ví dụ: SQL Server Management Studio (SSMS), Azure Data Studio, Navicat for SQL Server

- Sử dụng ngôn ngữ lập trình, các thư viện của ngôn ngữ lập trình. Ví dụ: C#, ADO của C#

Mỗi cách kết nối và làm việc ở trên, sẽ phù hợp với từng tình huống sử dụng khác nhau. Ví dụ, dùng dòng lệnh thì đơn giản, dùng ứng dụng đồ họa thì dễ thao tác, dùng ngôn ngữ lập trình thì thực hiện được các xử lý logic phức tạp.

Chúng ta sẽ cùng trải nghiệm các cách kết nối và làm việc với MS SQL Server.

7.2 Sử dụng dòng lệnh

Bạn có thể sử dụng công cụ dòng lệnh Command Line (CMD), Windows PowerShell, hoặc Command Prompt.

Ví dụ, mở cửa sổ dòng lệnh, và gõ vào lệnh sau:

sqlcmd -S desktop-7lpdol6\sqlexpress02

Trong đó,

- sqlcmd là công cụ đi kèm với MS SQL Server, cho phép bạn kết nối, thực thi truy vấn SQL, Stored Procedure, hoặc một file SQL Script từ dòng lệnh. Để tìm hiểu thêm về các tham số đi kèm với lệnh sqlcmd, gõ sqlcmd -?.

- S là tham số (Server), theo sau là tên của MS SQL Server (SQLServerName) hoặc ServerName\SQLServerName.

Bạn cần phân biệt ServerName và SQLServerName:

- ServerName là tên của máy tính có cài đặt phần mềm MS SQL Server. Để biết ServerName, bạn mở cửa sổ dòng lệnh (cmd), gõ lệnh hostname. Ví dụ, tên máy tính đang minh họa là DESKTOP-7LPDOL6.

- Trên một máy tính có thể cài đặt nhiều phần mềm MS SQL Server có phiên bản khác nhau, mỗi phần mềm MS SQL Server sẽ có một tên riêng, gọi là SQLServerName hay SQL Server Instance Name.

- Bạn muốn kết nối vào bản SQLServerName nào thì phải chỉ rõ ra bằng tên của nó, để biết tên của SQLServerName, bạn xem trong Task Manager > tab Services, phần tên nằm trong cặp ngoặc nhọn (), cột Description. Ví dụ: SQLEXPRESS02.

Nếu kết nối tới MS SQL Server thành công, bạn sẽ thấy nội dung 1> xuất hiện, sẵn sàng để bạn nhập các lệnh tiếp theo. Để thoát khỏi kết nối, gõ lệnh exit.

Như vậy, bạn đã kết nối được tới MS SQL Server bằng dòng lệnh, sử dụng tài khoản đang truy cập Windows để chứng thực (kiểu kết nối này gọi là Trusted Connection, Windows Authentication). Bạn không cần phải nhập tài khoản của Windows, cũng như tài khoản của MS SQL Server.

Bạn đã sẵn sàng để ra lệnh cho MS SQL Server. Bạn sẽ gõ lệnh, kết thúc bằng lệnh go để thực thi.

Khi đã kết nối được vào hệ quản trị cơ sở dữ liệu, nếu bạn muốn làm việc với cơ sở dữ liệu nào, thì bạn lại phải thực hiện thao tác kết nối vào nó.

Tóm lại, để có thể thao tác với cơ sở dữ liệu, bạn cần phải: (1) nối tới được cái máy tính có cài đặt hệ quản trị cơ sở dữ liệu, (2) kết nối được vào hệ quản trị cơ sở dữ liệu, và (3) kết nối vào một cơ sở dữ liệu cụ thể.

Để biết bạn đang kết nối vào cơ sở dữ liệu nào, dùng lệnh select db_name()

Ví dụ: cơ sở dữ liệu mặc định khi bạn kết nối vào một hệ quản trị cơ sở dữ liệu là master. Master là cơ sở dữ liệu chứa các thông tin của hệ thống MS SQL Server, ví dụ: các tài khoản đăng nhập, cấu hình hệ thống, thông tin các cơ sở dữ liệu,...v.v.

- Liệt kê các cơ sở dữ liệu hiện có trong MS SQL Server?

1> select name from sys.databases

2> go

Kết quả:

master

tempdb

model

msdb

(4 rows affected)

Các loại tài khoản trong MS SQL Server

Bạn có thể sử dụng 2 loại tài khoản để đăng nhập (login account) vào hệ thống MS SQL Server:

- Tài khoản của MS SQL Server, gồm tên và mật khẩu được lưu trong hệ thống MS SQL Server

- Tài khoản của Windows: sử dụng tài khoản của hệ điều hành windows, hoặc của hệ thống mạng Domain để chứng thực (Windows Authentication).

Phần tiếp theo chúng ta sẽ cùng thực hiện một số thao tác trên MS SQL Server, nếu chúng ta hiểu được bản chất của các lệnh thì thực hiện trên môi trường nào cũng như nhau (dòng lệnh, đồ họa, ngôn ngữ lập trình).

Chúng ta sẽ thực hành một số thao tác sau:

- Tạo database

- Tạo tài khoản người dùng trong MS SQL Server

- Gán quyền truy cập database

- Tạo các bảng

- Nhập dữ liệu cho bảng

- Truy vấn

Tạo database

1> create database QuanLySach

2> go

Kiểm tra xem tạo database QuanLySach được chưa?

1> select name from sys.databases

2> go

name

-----------------------------------------------

master

tempdb

model

msdb

QuanLySach

(5 rows affected)

Tạo tài khoản người dùng trong MS SQL Server

Để an toàn cho hệ thống MS SQL Server, chúng ta nên tạo tài khoản thông thường, với các quyền vừa đủ để sử dụng cơ sở dữ liệu. Ví dụ chúng ta sẽ tạo tài khoản có tên là user1, mật khẩu là p@ssword1.

1> CREATE LOGIN user1 WITH PASSWORD = 'p@ssword1';

2> go

Kiểm tra xem user1 đã được tạo ra chưa? Nếu có tên user1 trong kết quả truy vấn là đã tạo được.

1> SELECT name FROM sys.sql_logins

2> go

name

----------------------------------------------------------------------------------------------

##MS_PolicyTsqlExecutionLogin##

##MS_PolicyEventProcessingLogin##

user1

(4 rows affected)

-----

Cập nhật: 2/12/2024

Bài sau: Windows Form (8): Thao tác với DBMS bằng dòng lệnh (2)

Menu

Tìm kiếm trong Blog

CuTeoHocLamWeb(2): Tạo một trang web đơn giản

2.1 Tạo thư mục cho dự án web

2.2 Hiển thị tiếng Việt

2.4 Bài tập

Windows Form (8): Thao tác với DBMS bằng dòng lệnh (2)

7.3 Bài tập

Windows Form (7): Thao tác với DBMS bằng dòng lệnh (1)

7. Thao tác với DBMS bằng dòng lệnh

7.1 Kết nối với DBMS

7.2 Sử dụng dòng lệnh