Membuat Agenda dengan Warna Latar Belakang Dinamis Menggunakan PHP

Salam koding!

Di tutorial ini kita akan belajar membuat daftar agenda dengan cara membedakan warna latar belakangnya berdasarkan statusnya di database. Jadi idenya adalah kita ingin agenda yang ditampilkan akan memiliki warna latar belakang yang berbeda. Jika statusnya open maka latar belakangnya merah sedangkan bila statusnya close latar belakangnya hitam. Ada banyak cara untuk mengerjakan kasus semacam ini, misalnya dengan bantuan javascript atau jquery, namun untuk tutorial ini kita akan kerjakan dengan php. Tampa berpanjang lebar berikut langkahnya:

1. Buat database agenda dan tabel seminar tabelnya seperti gambar di bawah:

atau bisa juga gunakan sql ini:

CREATE TABLE `agenda`.`seminar` ( `id` INT NOT NULL AUTO_INCREMENT ,
`seminar` INT NOT NULL ,
`status` INT NOT NULL ,
PRIMARY KEY (`id`)) ENGINE = InnoDB;

2.Selanjutnya kita buat file index.php dan cssnya beserta koneksi ke database

kodenya seperti ini:

<?php
$host	= "localhost";
$user	= "root";
$pass	= "";
$db		= "agenda";

$db_con	= mysqli_connect($host, $user, $pass, $db) or die(mysqli_error());

$query	= "SELECT * FROM seminar";
$eks	= mysqli_query($db_con, $query);

$no		= 1;
?>

<style type="text/css">
thead, tr{
	text-align:left;}

.open{
	color:white;
	background-color:red;}

.close{
	color:white;
	background-color:black;}
</style>

<table>
	<thead>
		<th>No</th>
		<th>Seminar</th>
		<th>Status</th>
	</thead>

	<!-- Bagian dinamis -->
	<tr>
		<td></td>
		<td></td>
		<td class=""></td>
	</tr>

</table>

3. Selanjutnya kita munculkan data dari database pada bagian dinamis dengan kode sebagai berikut:

	<?php while ($row = mysqli_fetch_assoc($eks)){?>
	<tr>
		<td><?php echo $no++;?></td>
		<td><?php echo $row['seminar'];?></td>
		<td class="<?php if ($row['status'] == 1){echo "Open";}else{echo "Close";}?>">
			<?php if ($row['status'] == 1){echo "Open";}else{echo "Close";}?>
		</td>
	</tr>
	<?php } ?>

Jadi pada bagian class kita biar kosong kemudian kita mengeluarkan data dari "status agenda". Status pada agenda sendiri kita hanya menggunakan dua pilihan angka saja yaitu angka 1 atau angka 0. Sehingga bila statusnya angka 1 maka akan dibuat class "open", sedangkan bila angkanya 0 maka akan dibuat class "close". Untuk contoh ini kita hanya menggunakan 2 angka pada status di database, ini dikarenakan kita hanya akan membuat 2 pilihan warna saja yaitu merah untuk open dan hitam untuk close. Jika ingin menggunakan 3 warna silahkan gunakan 3 angka, dan seterusnya. Intinya adalah angka-angka tersebut berfungsi untuk membuat class pada kode HTML kita, sehingga class yang direncanakan itu telah diatur warnanya pada bagian css.

contoh hasil dari semua code di atas adalah sebagai berikut:

Kasus semacam ini dapat dikembangkan lagi dengan menggunakan fungsi time() pada PHP agar warna dan tulisannya dapat berubah berdasarkan waktu kapan agenda berakhir.