CuTeoHocLamWeb (7): Tạo một website cá nhân

Bài trước: CuTeoHocLamWeb (6): Viết mã JavaScript ở đâu

-----

7. Tạo một website cá nhân

Tới thời điểm này, chúng ta đã biết sử dụng HTML, CSS và JS để tạo ra các trang web đơn giản.

Sẽ thật vui, nếu chúng ta có một website riêng, để đưa các trang web của chúng ta lên Internet, tạo ra các nội dung hữu ích, rồi gửi cho mọi người, mời họ vào xem, đọc.

Chúng ta sẽ bắt tay vào thực hiện.

7.1 Tạo website miễn phí

Trang web (web page), là nội dung web được tạo ra từ một tập tin .html (có thể kèm theo mã nguồn CSS, JS, các tập tin tài nguyên khác).

Tập hợp nhiều trang web lại với nhau, theo một chủ ý của lập trình viên, sẽ tạo thành một website.

Trong máy tính của bạn, website là một thư mục, trong đó có chứa nhiều tập tin, gồm: HTML, CSS, JS và các tập tin tài nguyên khác như hình ảnh, âm thanh, video.

Muốn cho người khác truy cập được website, bạn cần làm 2 việc:

- Đăng ký cho website của bạn một cái tên, ví dụ: nguyenvanteo.blogspot.com, tuoitre.vn, youtube.com. Đây cũng là địa chỉ website của bạn trên Internet.

- Đưa toàn bộ mã nguồn website lên Internet. Cụ thể là chép mã nguồn HTML, CSS, JS và các tập tin hình ảnh, âm thanh, video lên Internet.

Đăng ký tên cho website

Tên của website là một chuỗi kí tự, được viết theo dạng sau:

tenwebsite.tenmien

Trong đó:

- tenwebsite là tên website của bạn

- tenmien là tên miền, một hệ thống đặt tên theo chuẩn của Internet

- chuỗi tenwebsite.tenmien phải là duy nhất trong hệ thống tên của Internet, gọi là hệ thống tên miền (Domain Name System - DNS)

Nếu muốn có một tenwebsite.tenmien theo ý bạn, thì bạn phải thực hiện đăng ký với ICANN hoặc VNNIC thông qua các nhà cung cấp dịch vụ Internet như GoDaddy, Mắt bão, Nhân hòa, Tenten, PAvietnam…v.v. Việc đăng ký tên này phải trả phí hàng tháng để duy trì.

Tuy nhiên, bạn vẫn có thể dùng tenwebsite.tenmien miễn phí, bằng cách đăng ký tên với một số nhà cung cấp miễn phí. Khi đó, phần tenmien sẽ là tên miền của nhà cung cấp dịch vụ. Ví dụ, chúng ta sẽ đăng ký tên website miễn phí dựa trên hệ thống blogger của công ty Google. Khi đó, phần tenmien sẽ bắt buộc phải là blogspot.com.

Bạn hãy đặt cho website của bạn một cái tên.

Một số gợi ý cho việc đặt tên:

- Tên website nên có chứa từ khóa tìm kiếm, giúp tăng thứ hạng trong các hệ thống tìm kiếm. Ví dụ: nhaxeABC, trungtamXYX, ABCshop. Hoặc cũng có thể đơn giản chỉ là tên mà bạn thích.

- Tên website nên ngắn gọn, sáng tạo, dễ phát âm, dễ viết

- Không nên sử dụng dấu gạch ngang (-) trong tên website

- Nên đăng ký nhanh, tránh trì hoãn, có thể bị người khác đăng ký trước 

Chép mã nguồn lên Internet

Hệ thống blogger sẽ cung cấp giao diện để chúng ta tạo hoặc chép mã nguồn HTML, CSS và JavaScript của website lên Internet. Hoặc bạn có thể tạo ra các trang web mà không cần biết HTML, CSS, và JavaScript. Chúng ta sẽ thực hành phần này sau khi tạo được một website trên hệ thống blogger.

7.2 Tạo website trên blogger

Bạn cần có một địa chỉ email của google trước khi thực hiện các bước tiếp theo.

Các bước để tạo một website:

- Mở trình duyệt, vào trang web của blogger: https://www.blogger.com

- Bấm nút CREATE YOUR BLOG, để tạo một website (dạng blog). Bạn sẽ được nhắc để đăng nhập email của google (nếu bạn chưa đăng nhập).

- Trong cửa sổ Choose a name for your blog, bạn nhập tiêu đề cho website, dòng tiêu đề sẽ xuất hiện ở phía trên của của trang web. Ví dụ một tiêu đề là: Trang ghi chép của Tèo. Bấm nút NEXT.

- Trong cửa sổ Choose a URL for your blog, nhập tên cho website. Đây cũng là địa chỉ của website. Nó là duy nhất trên Internet. 

Như đã biết, bạn có thể chọn tên website tùy ý. Tuy nhiên, tên website phải là duy nhất trên hệ thống của blogger. Nếu đã có người dùng rồi, thì bạn phải chọn tên khác, cho tới khi nào hệ thống không còn dòng thông báo màu đỏ (ý là tên này đã có người dùng rồi). Ví dụ, tên nguyenvanteodalat có thể dùng được. Khi đó địa chỉ website của bạn sẽ là nguyenvanteodalat.blogspot.com. Bạn sẽ nhớ nó, để lần sau truy cập, hoặc gửi địa chỉ này cho người khác, để họ có thể truy cập vào website của bạn ở bất kì đâu trên thế giới. Bấm nút NEXT.

- Trong cửa sổ Confirm your display name, bạn nhập tên chủ sở hữu của website. Ví dụ website của bạn Tèo thì sẽ nhập tên là Nguyễn Văn Tèo; website của một cửa hàng thì sẽ nhập là Cửa hàng thú cưng Cu Tèo,...v.v. Tên này sẽ là danh xưng khi bạn bình luận trong các bài viết. Bấm FINISH.

Bạn đã tạo ra được website của bạn.

7.3 Bài tập

1. Phát biểu nào chưa đúng khi nói về website và trang web (web page)?

A. Website chứa nhiều trang web

B. Trang web được tạo ra từ mã HTML, CSS, JS và hình ảnh, âm thanh 

C. Mỗi website có một địa chỉ duy nhất trên Internet

D. Trang web chứa nhiều website

2. Phát biểu nào chưa đúng khi nói về địa chỉ website?

A. Trình duyệt web (Chrome) sẽ dùng địa chỉ để truy cập tới website

B. Địa chỉ của website không nhất thiết phải là duy nhất trên Internet

C. Bạn có thể đăng ký một địa chỉ website miễn phí

D. Địa chỉ của website phải là duy nhất trên Internet

3. Bạn hãy vào ít nhất 3 trang web của một số nhà cung cấp dịch vụ đăng ký tên website. Cho biết giá đăng ký tên mỗi tháng (hoặc mỗi năm) là bao nhiêu?

4. Tạo ra website của riêng bạn trên hệ thống blogger.

-----

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

1(D), 2(B)

-----

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

Bài sau: 

Windows Form (9): Cài đặt và kết nối với DBMS bằng GUI

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

-----

8. Cài đặt và kết nối với DBMS bằng GUI

Phần này sẽ cùng làm quen với cách thứ 2 để làm việc với DBMS là sử dụng một phần mềm có giao diện đồ họa (gọi tắt là GUI: Graphical User Interface).

8.1. Tải và cài đặt GUI

Bạn có thể sử dụng một chương trình GUI tùy ý để kết nối và thao tác với DBMS. Một số chương trình phổ biến như:

- SSMS (SQL Server Management Studio): sản phẩm của Microsoft, miễn phí, được dùng nhiều.

- Azure Data Studio: mã nguồn mở, gọn nhẹ, chạy được trên đa nền tảng

- DBeaver: miễn phí, mã nguồn mở

Chúng ta sẽ tải và cài đặt SSMS.

Bạn vào google để gõ từ khóa tìm kiếm SSMS hoặc vào trực tiếp trang này để tải SSMS về máy: https://learn.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver16

Sau khi tải về, thực hiện cài đặt như một chương trình thông thường.

Khi cài đặt xong, bạn sẽ thấy chương trình SSMS xuất hiện trong thanh Start của Windows.

SSMS là một chương trình con của Microsoft SQL Server Tools. Tên đầy đủ của SSMS là Microsoft SQL Server Management Studio. SSMS có nhiều phiên bản, ví dụ 18, 19, 20, 21, 22…v.v.

Để chạy SSMS, bạn vào menu Start của Windows, chọn Microsoft SQL Server Tools, chọn Microsoft SQL Server Management Studio. Lưu ý: phiên bản SSMS có thể khác nhau, tài liệu này minh họa trên SSMS 18.

8.2 Kết nối vào với DBMS

Khi bạn mở chương trình SSMS, nó sẽ hiện ra cửa sổ để bạn kết nối tới DBMS. Xem hình minh họa:

Nếu SSMS không hiện cửa sổ kết nối, bạn có thể mở nó bằng cách: ở cửa sổ Object Explorer (khung bên trái) > vào mục Connect > chọn Database engine; hoặc vào menu File > chọn Connect Object Explorer.

Nếu bạn đã thao tác với DBMS bằng dòng lệnh, thì các thông tin ở cửa sổ này không có gì xa lạ. Cụ thể:

- Server type: loại server sẽ kết nối tới. Database Engine là tên gọi khác của DBMS. Chúng ta sẽ kết nối tới DBMS để thao tác và xử lý cơ sở dữ liệu.

- Server name: tên của DBMS. Gồm tên của máy tính (hoặc server) có cài đặt DBMS (ví dụ: DESKTOP-7LPDOL6), và tên của DBMS đã được cài đặt trên máy tính (ví dụ SQLEXPRESS).

- Authentication: kiểu chứng thực tài khoản người dùng. Nếu chứng thực bằng tài khoản của hệ điều hành Windows (hoặc Domain), thì chọn là Windows Authentication. Nếu chứng thực bằng tài khoản của SQL Server thì chọn là SQL Server Authentication. Ví dụ, chúng ta sẽ chọn kiểu chứng thực là Windows Authentication.

- Bấm nút Connect để kết nối tới DBMS có tên là SQLEXPRESS, chứng thực bằng tài khoản đang đăng nhập Windows.(tài khoản có tên là Maxsys, mật khẩu để trắng)

Chúc mừng bạn nếu hệ thống không báo lỗi.

Hoặc bạn có thể gặp lỗi như sau:

Đọc thông báo lỗi, thì thấy báo là SSMS không tìm thấy hoặc không truy cập được DBMS. Hãy đảm bảo là đã nhập đúng tên DBMS.

Kinh nghiệm cá nhân: khi thấy thông báo lỗi, hay bất kì cửa sổ thông báo xuất hiện, bạn hãy bình tĩnh đọc xem nội dung báo lỗi/thông báo là gì. Đó chính là đầu mối tốt nhất để tìm cách sửa lỗi.

Vào lại cửa sổ Services để kiểm tra, thì thấy tên của DBMS phải là EXPRESS02. Vậy mục Server name sẽ nhập thông tin là DESKTOP-7LPDOL6\EXPRESS02.

Nếu kết nối thành công vào DBMS, giao diện của SSMS sẽ hiển thị thông tin kết nối (vùng màu đỏ ở hình phía dưới) và bạn có thể thực hiện các thao tác trên hệ thống.

Thông tin kết nối nằm ở hàng trên cùng của cửa sổ Object Explorer, gồm: ServerName (ví dụ DESKTOP-7LPDOL6), SQLServerName (hay Instance name, SQLEXPRESS02), phiên bản của SQL server (16.0.1135), User đang đăng nhập (DESKTOP-7LPDOL6\Maxsys.

Như đã biết, chúng ta có thể thao tác với DBMS bằng giao diện dòng lệnh (CLI - Command Line Interface), giao diện đồ họa (GUI - Graphical User Interface), hoặc bằng ngôn ngữ lập trình.

Nhớ lại ở phần trước, chúng ta đã dùng CLI để tạo ra cơ sở dữ liệu có tên là QuanLySach, tạo bảng có tên NhaXuatBan, tạo tài khoản người dùng có tên user1.

Bạn hãy dùng SSMS để kiểm tra lại các thông tin đã được tạo ở CLI.

8.3 Chứng thực bằng tài khoản của SQL Server

Từ đầu tài liệu đến giờ, chúng ta đang sử dụng phương pháp chứng thực bằng tài khoản của hệ điều hành Windows (Windows Authentication).

Phần này, chúng ta sẽ thực hiện chứng thực bằng tài khoản của MS SQL Server.

Ở bài học trước, bạn đã tạo ra tài khoản đăng nhập có tên là user1, mật khẩu: p@ssword1.

Bạn hãy ngắt kết nối (disconnect) tới MS SQL Server. Cách làm: trong cửa sổ Object Explorer, chọn kết nối cần ngắt > bấm vào biểu tượng disconnect ở phía trên của cửa sổ; hoặc chuột phải vào kết nối cần ngắt > chọn disconnect.

Tạo kết nối mới, bằng cách vào File > chọn Connect Object Explorer. Trong cửa sổ Connect to Server, mục Server type, Server name nhập như bình thường; riêng mục Authentication, chọn SQL Server Authentication, nhập thông tin cho mục Login và Password (ví dụ user1/p@ssword1) > bấm nút Connect.

Nếu bạn đăng nhập thành công, thì chúc mừng bạn.

Có thể bạn sẽ gặp thông báo lỗi, không cho đăng nhập. Lý do có thể do MS SQL Server đang được cấu hình chỉ chấp nhận chứng thực theo kiểu Windows Authentication. 

Nếu bị lỗi này, bạn hãy đăng nhập lại vào MS SQL Server bằng kiểu Windows Authentication. Trong cửa sổ Object Explorer, chuột phải vào dòng thông tin kết nối (dòng trên cùng) > chọn Properties > chọn mục Security > đánh dấu chọn vào mục SQL Server and Windows Authentication mode. Xem hình minh họa.

Sau đó, vào cửa sổ Services, khởi động lại (restart) dịch vụ MS SQL Server.

Thực hiện kết nối lại tới MS SQL Server, chứng thực bằng user1 sẽ thành công.

8.4 Bài tập

1. Bạn có thể sử dụng các chương trình GUI sau để làm việc với DBMS, phát biểu nào không đúng?

A. SSMS

B. SQLCMD

C. Azure Data Studio

D. DBeaver

2. Liên quan đến chứng thực người dùng khi đăng nhập vào MS SQL Server, phát biểu nào không đúng?

A. Có thể chứng thực kiểu Windows Authentication

B. Có thể chứng thực kiểu SQL Server Authentication

C. Bạn có thể cấu hình lại chế độ chứng thực cho MS SQL Server 

D. Bạn không thể cấu hình lại chế độ chứng thực cho MS SQL Server

3. Làm sao để ngắt kết nối tới MS SQL Server bằng SSMS? Phát biểu nào không đúng?

A. Trong SSMS, chọn kết nối cần ngắt, bấm nút Disconnect 

B. Trong SSMS, chuột phải vào kết nối cần ngắt, chọn Disconnect

C. Tắt SSMS

D. Trong SSMS, chuột phải vào kết nối cần ngắt, chọn Remove

4. Thực hành các thao tác trong bài học.

-----

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

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

-----

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

Bài sau: Windows Form (10): 

CuTeoHocLamWeb (6): Viết mã JavaScript ở đâu

Bài trước: CuTeoHocLamWeb (5): Làm quen với JavaScript

-----

6. Viết mã JavaScript ở đâu

Để việc học JavaScript thú vị, chúng ta sẽ học lý thuyết gắn với các ví dụ cụ thể.

Trong lĩnh vực làm web, cụ thể là lập trình giao diện web, bạn sẽ dùng JavaScript để thực hiện các xử lý nghiệp vụ, tạo ra các hành động và hiệu ứng thú vị cho trang web.

Muốn có các hành động và hiệu ứng, chúng ta sẽ dùng các đoạn mã JavaScript làm thay đổi nội dung của HTML, và CSS. Vì HTML và CSS tạo ra giao diện, nên thay đổi HTML và CSS sẽ làm thay đổi giao diện.

6.1 Viết mã JavaScript ở 3 nơi khác nhau

Bạn sẽ viết mã JavaScript trong các tập tin, để trình duyệt có thể dịch và thực thi mã nguồn.

Cũng như CSS, bạn có thể viết mã JavaScript (từ đây sẽ viết tắt là JS) ở 3 nơi khác nhau:

- Viết mã JS ở trong phần tử HTML

- Viết mã JS ở trong tài liệu HTML

- Viết mã JS ở ngoài tài liệu HTML

Viết mã JS ở trong phần tử HTML

Chúng ta sẽ tạo ra giao diện web gồm 1 bóng đèn và 2 nút bấm, để bật và tắt bóng đèn.

Bạn vào trang google, gõ từ khóa tìm kiếm là “pic_bulbon.gif” (bóng đèn sáng), tải hình này về thư mục assets.

Bạn vào lại trang google, gõ từ khóa tìm kiếm là “pic_bulboff.gif” (bóng đèn tắt), tải hình này về thư mục assets.

Như vậy, bạn đã có 2 cái hình của bóng đèn, với 2 trạng thái là bật và tắt. Khi tải ảnh bóng đèn, nên để ý kích thước của 2 ảnh phải bằng nhau thì hiệu ứng sẽ đẹp hơn.

Dùng phần mềm lập trình (ví dụ VS code), mở mã nguồn HTML (tập tin QueHuong.html), hoặc tạo một tập tin HTML mới cũng được, để chèn hình bóng đèn và nút bấm.

Thêm đoạn mã HTML sau (đoạn mã tô đậm) vào ngay sau thẻ <body>. Bạn chưa cần hiểu ý nghĩa của đoạn mã JS, chúng ta sẽ học sau.

<body>

    <button onclick="document.getElementById('myImage').src='../assets/pic_bulbon.gif'">Bật đèn</button>

    <img id="myImage" src="../assets/pic_bulboff.gif" style="width:100px">

    <button onclick="document.getElementById('myImage').src='../assets/pic_bulboff.gif'">Tắt đèn</button>

    <br>

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

Lưu lại tập tin mã nguồn, mở trang QueHuong.html bằng trình duyệt để xem kết quả. Bạn bấm vào nút Bật đèn và Tắt đèn để xem bóng đèn bật và tắt.

Vậy là bạn đã viết được 2 dòng mã JS ở trong thẻ mở <button>: 

onclick="document.getElementById('myImage').src='../assets/pic_bulbon.gif'"

onclick="document.getElementById('myImage').src='../assets/pic_bulboff.gif'"

Viết mã JS ở trong tài liệu HTML

Bạn xóa mã JS ở trong thẻ <button>, mã nguồn sẽ như sau:

<body>

    <button>Bật đèn</button>

    <img id="myImage" src="../assets/pic_bulboff.gif" style="width:100px">

    <button>Tắt đèn</button>

    <br>

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

Lưu lại mã nguồn và mở lại trang web trên trình duyệt, bạn sẽ vẫn thấy bóng đèn, nút bấm, tuy nhiên, bấm chuột vào 2 nút bấm thì không thấy bóng đèn thay đổi trạng thái.

Bạn thêm đoạn mã sau vào tập tin QueHuong.html:

    </style>

    <script>

        function batTatDen() {

          const img = document.getElementById('myImage');

          if (img.src.endsWith('pic_bulboff.gif')) {

            img.src = '../assets/pic_bulbon.gif';

          } else {

            img.src = '../assets/pic_bulboff.gif';

          }

        }

      </script>

</head>

<body>

      <button onclick="batTatDen()">Bật/Tắt đèn</button>

      <img id="myImage" src="../assets/pic_bulboff.gif" style="width:100px">

      <br>

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

Lưu lại tập tin mã nguồn, mở lại trang web QueHuong.html bằng trình duyệt, bấm vào nút Bật/Tắt đèn để xem kết quả.

Ở phần này, bạn đã viết mã JS ở trong phần tử <script></script>. Phần tử <script> nằm trong tài liệu HTML. Tài liệu HTML được lưu trong tập tin QueHuong.html. 

Viết mã JS ở ngoài tài liệu HTML

Khi tạo thư mục của dự án (ở các bài học trước), bạn đã tạo sẵn thư mục javascript để chứa mã nguồn JS (nếu chưa có bạn hãy tạo thêm). Trong thư mục javascript, tạo tập tin main.js.

Mở main.js bằng Notepad hoặc VS code, chuyển mã nguồn trong phần tử <script> trong tập tin QueHuong.html sang tập tin main.js. Lưu lại những thay đổi trong main.js.

Trong tập tin QueHuong.html, thêm đoạn mã sau:

</style>

    <script src="../javascript/main.js"></script>

</head>

Lưu và mở tập tin QueHuong.html bằng trình duyệt để xem kết quả, nút Bật/Tắt đèn đã hoạt động bình thường.

Như vậy, chúng ta đã viết mã JS ở tập tin riêng, nằm ngoài tài liệu HTML, có phần mở rộng là .js. Tất nhiên, chúng ta cũng phải viết lệnh trong HTML, để tìm và gọi mã JS từ tập tin .js bên ngoài vào tập tin .html (<script src="../javascript/main.js"></script>).

Tóm lại, chúng ta có thể viết mã JS ở trong thẻ mở của một phần tử HTML, viết trong phần tử <script> của tài liệu HTML và viết một tập tin riêng. Tùy từng tình huống, chúng ta sẽ lựa chọn nơi viết mã JS cho phù hợp.

6.2 Bài tập

1. Bạn có thể viết mã JS ở đâu? Đáp án nào không đúng.

A. Viết trong thẻ mở của một phần tử HTML

B. Viết trong phần tử <script> của HTML

C. Viết trong thẻ đóng của một phần tử HTML

D. Viết trong tập tin .js

2. Đoạn mã <script src="../javascript/main.js"></script> là gì? Phát biểu nào không đúng.

A. Là một phần tử của HTML

B. Dùng để triệu gọi mã nguồn JS

C. Báo cho trình duyệt biết vị trí của tập tin main.js

D. Là một đoạn mã JS

3. Phát biểu nào sau đây không đúng?

A. Dùng HTML để tạo ra nội dung cho trang web

B. Dùng CSS để định dạng hiển thị cho trang web

C. Dùng JS để lập trình xử lý logic, tương tác của trang web

D. Dùng CSS để lập trình xử lý logic cho trang web

4. Viết và chạy các đoạn mã trong bài học.

-----

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

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

-----

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

Bài sau: CuTeoHocLamWeb (7): Tạo một website cá nhân