JavaScript adalah bahasa pemrograman yang memungkinkan Anda untuk menambahkan interaktivitas ke halaman web. Berikut adalah beberapa cara untuk menambahkan interaktivitas ke website sederhana yang sudah kita bangun menggunakan JavaScript.
Menambahkan File JavaScript #
Buat file JavaScript baru dalam direktori proyek Anda. Misalnya, buat file script.js.
Struktur Folder Baru:
mywebsite/
│
├── index.php
├── about.php
├── contact.php
├── styles.css
├── script.js
└── includes/
├── header.php
└── footer.phpMenghubungkan File JavaScript #
Tambahkan referensi ke file JavaScript di dalam tag <head> di setiap halaman HTML.
index.php
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<h1>Selamat Datang di My Website</h1>
<p>Ini adalah halaman utama website saya.</p>
<?php include 'includes/footer.php'; ?>
</body>
</html>about.php
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<h1>Tentang Kami</h1>
<p>Informasi tentang kami.</p>
<?php include 'includes/footer.php'; ?>
</body>
</html>contact.php
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<h1>Hubungi Kami</h1>
<form method="post" action="contact.php">
Nama: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Pesan: <textarea name="message"></textarea><br><br>
<input type="submit" value="Kirim">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
echo "<h2>Pesan yang Dikirim:</h2>";
echo "Nama: " . $name . "<br>";
echo "Email: " . $email . "<br>";
echo "Pesan: " . $message . "<br>";
}
?>
<?php include 'includes/footer.php'; ?>
</body>
</html>Menambahkan Interaktivitas dengan JavaScript #
Berikut adalah beberapa contoh bagaimana Anda bisa menambahkan interaktivitas dengan JavaScript.
Menampilkan Alert Saat Halaman Dimuat #
script.js
document.addEventListener('DOMContentLoaded', (event) => {
alert('Selamat datang di My Website!');
});Menambah Interaktivitas pada Tombol #
Tambahkan tombol pada index.php untuk memeriksa waktu saat ini.
index.php (modifikasi)
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<h1>Selamat Datang di My Website</h1>
<p>Ini adalah halaman utama website saya.</p>
<button id="timeButton">Tampilkan Waktu Saat Ini</button>
<p id="timeDisplay"></p>
<?php include 'includes/footer.php'; ?>
</body>
</html>script.js (modifikasi)
document.addEventListener('DOMContentLoaded', (event) => {
alert('Selamat datang di My Website!');
const timeButton = document.getElementById('timeButton');
timeButton.addEventListener('click', () => {
const timeDisplay = document.getElementById('timeDisplay');
const now = new Date();
timeDisplay.textContent = 'Waktu saat ini: ' + now.toLocaleTimeString();
});
});Validasi Formulir #
Tambahkan validasi formulir di contact.php untuk memastikan bahwa nama dan email diisi.
contact.php (modifikasi)
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<h1>Hubungi Kami</h1>
<form id="contactForm" method="post" action="contact.php">
Nama: <input type="text" name="name" id="name"><br><br>
Email: <input type="email" name="email" id="email"><br><br>
Pesan: <textarea name="message" id="message"></textarea><br><br>
<input type="submit" value="Kirim">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
echo "<h2>Pesan yang Dikirim:</h2>";
echo "Nama: " . $name . "<br>";
echo "Email: " . $email . "<br>";
echo "Pesan: " . $message . "<br>";
}
?>
<?php include 'includes/footer.php'; ?>
</body>
</html>script.js (modifikasi)
document.addEventListener('DOMContentLoaded', (event) => {
alert('Selamat datang di My Website!');
const timeButton = document.getElementById('timeButton');
if (timeButton) {
timeButton.addEventListener('click', () => {
const timeDisplay = document.getElementById('timeDisplay');
const now = new Date();
timeDisplay.textContent = 'Waktu saat ini: ' + now.toLocaleTimeString();
});
}
const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', (event) => {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (name === '' || email === '') {
alert('Nama dan Email harus diisi!');
event.preventDefault();
}
});
}
});Dengan menambahkan interaktivitas ini, website Anda akan menjadi lebih dinamis dan responsif terhadap pengguna. Anda dapat mengembangkan lebih lanjut dengan menambahkan lebih banyak fitur interaktif sesuai kebutuhan. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.
