Bạn có bao giờ tò mò muốn biết thông tin chi tiết về một tên miền, như ai là chủ sở hữu, tên miền được đăng ký khi nào, hay khi nào hết hạn không? Với công cụ tra cứu WHOIS, bạn có thể dễ dàng khám phá những thông tin này chỉ trong vài giây. Trong bài viết hôm nay, mình sẽ hướng dẫn bạn từng bước để nhúng một công cụ tra cứu WHOIS trực tiếp vào bài viết của bạn, sử dụng HTML, CSS và JavaScript. Công cụ này cực kỳ đơn giản, chỉ cần sao chép, dán và chỉnh sửa một chút là hoạt động ngay – không cần kiến thức lập trình sâu!
WHOIS là gì?
WHOIS là một giao thức dùng để tra cứu thông tin về tên miền, chẳng hạn như tên chủ sở hữu, thông tin liên hệ, ngày đăng ký, ngày hết hạn, và nhiều dữ liệu khác. Đây là công cụ quan trọng để kiểm tra tính hợp pháp của một tên miền, liên hệ với chủ sở hữu, hoặc đơn giản là tìm hiểu trạng thái của nó. Với đoạn code mình chia sẻ hôm nay, bạn sẽ tự xây được một trang web tra cứu WHOIS mà không cần đến backend phức tạp.
Công cụ tra cứu WHOIS
Công cụ này là một trang web đơn giản với giao diện gồm ô nhập tên miền, nút “Tra cứu”, và khu vực hiển thị kết quả. Khi bạn nhập một tên miền (ví dụ: shian.pro) và nhấn nút “Tra cứu”, trang web sẽ gửi yêu cầu đến API của WhoisXMLApi và trả về thông tin WHOIS chi tiết như ngày đăng ký, thông tin liên hệ registrant, registrar, v.v.
Chuẩn bị trước khi bắt đầu
Trước khi bắt tay vào viết mã, bạn cần chuẩn bị một số thứ cơ bản:
- API Key từ WhoisXMLApi: Chúng ta sẽ dùng dịch vụ WhoisXMLApi để lấy thông tin WHOIS. Hãy truy cập WhoisXMLApi, đăng ký tài khoản miễn phí, và lấy API key. Quá trình này rất nhanh chóng, và bạn sẽ được cấp một số lượt tra cứu miễn phí để thử nghiệm.
- Trình soạn thảo mã: Bạn cần một công cụ để viết mã. Mình khuyên dùng Visual Studio Code (miễn phí, dễ sử dụng), nhưng bạn cũng có thể dùng Notepad hoặc bất kỳ trình soạn thảo nào bạn quen thuộc.
- Trình duyệt web: Để kiểm tra kết quả, hãy dùng Chrome, Firefox, hoặc bất kỳ trình duyệt nào bạn thích.
Khi đã chuẩn bị xong, chúng ta sẽ bắt đầu chia nhỏ dự án thành từng phần và setup từng bước một.
Hướng dẫn từng bước để nhúng công cụ tra cứu WHOIS
Công cụ này được chia thành ba phần chính: HTML (giao diện), CSS (định dạng), và JavaScript (logic). Mình sẽ giải thích từng phần và cung cấp mã để bạn dán trực tiếp.
Bước 1: Tạo giao diện với HTML
Phần này là “bộ khung” của công cụ, bao gồm ô nhập liệu, nút tra cứu, và khu vực hiển thị kết quả. Đây là mã HTML bạn sẽ dùng:
<div class="container">
<h1>Tra cứu WHOIS Domain</h1>
<div class="input-group">
<input id="domainInput" placeholder="Nhập domain (ví dụ: shian.pro)" type="text" />
<button onclick="lookupWhois()">Tra cứu</button>
</div>
<div id="result"></div>
</div>- Giải thích:
- Phần này là “bộ mặt” của công cụ:
- Một khung trắng (container) chứa toàn bộ nội dung.
- Tiêu đề “Tra cứu WHOIS Domain”.
- Ô nhập liệu để điền tên miền và nút “Tra cứu” để kích hoạt.
- Khu vực kết quả (result) sẽ hiển thị thông tin sau khi nhấn nút.
Bạn sẽ dán phần này vào nơi bạn muốn đặt công cụ hoặc thêm vào tệp html.
Bước 2: Tạo kiểu dáng với CSS
Để công cụ trông đẹp mắt và chuyên nghiệp, chúng ta cần thêm CSS. Bạn hãy nhúng trực tiếp bằng thẻ <style> như sau:
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
}
h1 {
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 20px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 15px;
}
input[type="text"] {
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
transition: border-color 0.3s;
}
input[type="text"]:focus {
border-color: #007bff;
}
button {
padding: 12px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 8px;
font-size: 14px;
color: #333;
white-space: pre-wrap;
display: none;
}
.loading {
text-align: center;
color: #007bff;
font-style: italic;
}
</style>- Giải thích:
- .container: Tạo khung trắng với bóng đổ nhẹ, giới hạn chiều rộng tối đa là 550px.
- h1: Định dạng tiêu đề với màu tối và căn giữa.
- .input-group: Sắp xếp ô nhập liệu và nút theo chiều dọc.
- input và button: Tạo kiểu dáng đẹp với viền bo góc, hiệu ứng khi nhấn hoặc focus.
- #result: Khu vực kết quả có nền xám nhạt, ẩn mặc định cho đến khi tra cứu xong.
- .loading: Hiệu ứng “Đang tra cứu” với chữ nghiêng.
Bước 3: Thêm logic với JavaScript
Phần quan trọng nhất là JavaScript, xử lý việc gửi yêu cầu đến API và hiển thị kết quả. Dán đoạn mã này bằng thẻ <script>:
<script>
async function lookupWhois() {
const domain = document.getElementById('domainInput').value.trim();
const resultDiv = document.getElementById('result');
if (!domain) {
resultDiv.textContent = 'Vui lòng nhập domain!';
resultDiv.style.display = 'block';
return;
}
resultDiv.textContent = 'Đang tra cứu...';
resultDiv.style.display = 'block';
resultDiv.classList.add('loading');
try {
const apiKey = 'YOUR_API_KEY_HERE';
const url = `https://www.whoisxmlapi.com/whoisserver/WhoisService?apiKey=${apiKey}&domainName=${domain}&outputFormat=JSON`;
const response = await fetch(url);
const data = await response.json();
resultDiv.classList.remove('loading');
if (data.ErrorMessage) {
resultDiv.textContent = `Lỗi: ${data.ErrorMessage.msg || 'Không thể tra cứu domain!'}`;
} else if (!data.WhoisRecord) {
resultDiv.textContent = 'Không tìm thấy thông tin WHOIS cho domain này!';
} else {
const whois = data.WhoisRecord;
const registryData = whois.registryData || {};
const output = `
Domain: ${whois.domainName || 'Không có thông tin'}
Registered On: ${whois.createdDate || registryData.createdDate || 'Không có thông tin'}
Expires On: ${whois.expiresDate || registryData.expiresDate || 'Không có thông tin'}
Updated On: ${whois.updatedDate || registryData.updatedDate || 'Không có thông tin'}
Status: ${registryData.status || whois.status || 'Không có thông tin'}
Name Servers: ${(registryData.nameServers?.hostNames || whois.nameServers?.hostNames || []).join('\n ') || 'Không có thông tin'}
Registrar Information
Registrar: ${whois.registrarName || 'Không có thông tin'}
IANA ID: ${whois.registrarIANAID || 'Không có thông tin'}
Abuse Email: ${registryData.registrar?.abuseContactEmail || 'Không có thông tin'}
Abuse Phone: ${registryData.registrar?.abuseContactPhone || 'Không có thông tin'}
Registrant Contact
Name: ${whois.registrant?.name || registryData.registrant?.name || 'Không có thông tin'}
Organization: ${whois.registrant?.organization || registryData.registrant?.organization || 'Không có thông tin'}
Street: ${whois.registrant?.street1 || registryData.registrant?.street1 || 'Không có thông tin'}
City: ${whois.registrant?.city || registryData.registrant?.city || 'Không có thông tin'}
State: ${whois.registrant?.state || registryData.registrant?.state || 'Không có thông tin'}
Postal Code: ${whois.registrant?.postalCode || registryData.registrant?.postalCode || 'Không có thông tin'}
Country: ${whois.registrant?.country || registryData.registrant?.country || 'Không có thông tin'}
Phone: ${whois.registrant?.telephone || registryData.registrant?.telephone || 'Không có thông tin'}
Email: ${whois.registrant?.email || registryData.registrant?.email || 'Không có thông tin'}
Administrative Contact
Name: ${whois.administrativeContact?.name || registryData.administrativeContact?.name || 'Không có thông tin'}
Organization: ${whois.administrativeContact?.organization || registryData.administrativeContact?.organization || 'Không có thông tin'}
Street: ${whois.administrativeContact?.street1 || registryData.administrativeContact?.street1 || 'Không có thông tin'}
City: ${whois.administrativeContact?.city || registryData.administrativeContact?.city || 'Không có thông tin'}
State: ${whois.administrativeContact?.state || registryData.administrativeContact?.state || 'Không có thông tin'}
Postal Code: ${whois.administrativeContact?.postalCode || registryData.administrativeContact?.postalCode || 'Không có thông tin'}
Country: ${whois.administrativeContact?.country || registryData.administrativeContact?.country || 'Không có thông tin'}
Phone: ${whois.administrativeContact?.telephone || registryData.administrativeContact?.telephone || 'Không có thông tin'}
Email: ${whois.administrativeContact?.email || registryData.administrativeContact?.email || 'Không có thông tin'}
Technical Contact
Name: ${whois.technicalContact?.name || registryData.technicalContact?.name || 'Không có thông tin'}
Organization: ${whois.technicalContact?.organization || registryData.technicalContact?.organization || 'Không có thông tin'}
Street: ${whois.technicalContact?.street1 || registryData.technicalContact?.street1 || 'Không có thông tin'}
City: ${whois.technicalContact?.city || registryData.technicalContact?.city || 'Không có thông tin'}
State: ${whois.technicalContact?.state || registryData.technicalContact?.state || 'Không có thông tin'}
Postal Code: ${whois.technicalContact?.postalCode || registryData.technicalContact?.postalCode || 'Không có thông tin'}
Country: ${whois.technicalContact?.country || registryData.technicalContact?.country || 'Không có thông tin'}
Phone: ${whois.technicalContact?.telephone || registryData.technicalContact?.telephone || 'Không có thông tin'}
Email: ${whois.technicalContact?.email || registryData.technicalContact?.email || 'Không có thông tin'}
Billing Contact
Name: ${whois.billingContact?.name || registryData.billingContact?.name || 'Không có thông tin'}
Organization: ${whois.billingContact?.organization || registryData.billingContact?.organization || 'Không có thông tin'}
Street: ${whois.billingContact?.street1 || registryData.billingContact?.street1 || 'Không có thông tin'}
City: ${whois.billingContact?.city || registryData.billingContact?.city || 'Không có thông tin'}
State: ${whois.billingContact?.state || registryData.billingContact?.state || 'Không có thông tin'}
Postal Code: ${whois.billingContact?.postalCode || registryData.billingContact?.postalCode || 'Không có thông tin'}
Country: ${whois.billingContact?.country || registryData.billingContact?.country || 'Không có thông tin'}
Phone: ${whois.billingContact?.telephone || registryData.billingContact?.telephone || 'Không có thông tin'}
Email: ${whois.billingContact?.email || registryData.billingContact?.email || 'Không có thông tin'}
`;
resultDiv.textContent = output;
console.log('Dữ liệu đầy đủ:', data); // Debug dữ liệu thô
}
} catch (error) {
resultDiv.classList.remove('loading');
resultDiv.textContent = 'Đã xảy ra lỗi khi tra cứu. Vui lòng thử lại!';
console.error(error);
}
}
document.getElementById('domainInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
lookupWhois();
}
});
</script>- Giải thích:
- Hàm lookupWhois(): Lấy tên miền từ ô nhập liệu, gửi yêu cầu đến API, và hiển thị kết quả.
- Kiểm tra lỗi: Nếu không nhập tên miền hoặc API trả về lỗi, sẽ hiển thị thông báo phù hợp.
- Sự kiện Enter: Nhấn phím Enter cũng kích hoạt tra cứu.
- Quan trọng: Tìm dòng const apiKey = ‘YOUR_API_KEY_HERE’; và thay ‘YOUR_API_KEY_HERE’ bằng API key thật của bạn từ WhoisXMLApi.
Bước 4: Cách nhúng mã vào bài viết
- Chuyển sang chế độ HTML: Khi soạn bài, chuyển sang chế độ chỉnh sửa HTML thay vì chế độ soạn thảo thông thường nếu bạn dùng Blogger hay WordPress.
- Dán mã: Sao chép toàn bộ đoạn mã trên và dán vào vị trí bạn muốn công cụ hiển thị trong bài viết.
- Thay API Key: Tìm dòng const apiKey = ‘YOUR_API_KEY_HERE’; và thay ‘YOUR_API_KEY_HERE’ bằng API key thật từ WhoisXMLApi.
- Lưu và kiểm tra: Lưu bài viết, sau đó xem trước hoặc đăng bài để kiểm tra. Nhập một tên miền như google.com và nhấn “Tra cứu” để xem kết quả.
Demo
Tra cứu WHOIS Domain
Tùy chỉnh công cụ theo ý thích
Khi công cụ đã hoạt động, bạn có thể tùy chỉnh thêm:
- Thay đổi màu sắc: Chỉnh sửa các giá trị như #3498db (màu xanh dương) trong CSS thành màu bạn thích.
- Tăng kích thước: Thay đổi font-size, padding, hoặc max-width trong .container để công cụ lớn hơn.
- Thêm thông tin: Mở rộng output trong JavaScript để hiển thị thêm dữ liệu từ API (dùng console.log(data) để xem dữ liệu thô).
Kết luận
Chỉ với vài bước đơn giản, bạn đã nhúng thành công một công cụ tra cứu WHOIS trực tiếp vào bài viết của mình. Đây là cách tuyệt vời để cung cấp giá trị cho độc giả, giúp họ tra cứu thông tin tên miền mà không cần rời khỏi trang của bạn. Nếu bạn gặp khó khăn trong quá trình setup hoặc muốn nâng cấp công cụ, đừng ngần ngại để lại câu hỏi, mình sẽ hỗ trợ ngay. Chúc các bạn thành công!
