Dalam tutorial ini, kita akan belajar cara membuat pemrograman sederhana yang mengganti warna halaman web menggunakan bahasa pemrograman PHP. Pemrograman ini akan memungkinkan pengguna untuk mengklik tombol atau elemen tertentu untuk mengubah warna latar belakang halaman secara dinamis.
Langkah 1: Membuat Struktur Dasar HTML Buatlah file HTML baru dengan ekstensi ".php". Di dalam file tersebut, buat struktur dasar HTML seperti berikut:
html<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Ganti Warna Menggunakan PHP</title>
<style>
body {
text-align: center;
}
.container {
margin-top: 100px;
}
.color-box {
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Pemrograman Ganti Warna</h1>
<div class="color-box"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Langkah 2: Membuat File JavaScript Buat file JavaScript baru dengan nama "script.js" dalam direktori yang sama dengan file HTML. Di dalam file tersebut, tambahkan kode berikut:
javascriptvar colorBox = document.querySelector('.color-box');
colorBox.addEventListener('click', function() {
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
});
Langkah 3: Menjalankan Program Simpan semua file dalam direktori yang sama. Buka file HTML melalui browser web dan Anda akan melihat tampilan halaman dengan kotak warna yang dapat diklik.
Setiap kali kotak warna di-klik, program JavaScript akan memilih secara acak warna dari daftar warna yang telah ditentukan. Kemudian, warna latar belakang halaman akan berubah sesuai dengan warna yang dipilih.
Selamat! Anda telah berhasil membuat pemrograman sederhana untuk mengganti warna menggunakan PHP. Anda dapat mengembangkan lebih lanjut dengan menambahkan fitur seperti transisi animasi, pilihan warna yang lebih banyak, atau tampilan yang lebih menarik.
Pemrograman ini adalah contoh sederhana dari penggunaan PHP bersama dengan JavaScript dalam pengembangan web. Teruslah bereksperimen dan kembangkan keterampilan Anda dalam pemrograman PHP untuk menciptakan aplikasi yang lebih kompleks dan menarik.
0 comments
Posting Komentar