Daftar dan Belajar Sekarang!

Membuat Agenda dengan Warna Latar Belakang Dinamis Menggunakan PHP

foto onirusama
265 Kontribusi 179 Coto
3 tahun yang lalu
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: https://skspace.sgp1.digitaloceanspaces.com/forums/images/db_1458918111_275.jpg 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: https://skspace.sgp1.digitaloceanspaces.com/forums/images/hasil.jpg Kasus semacam ini dapat dikembangkan lagi dengan menggunakan fungsi time() pada PHP agar warna dan tulisannya dapat berubah berdasarkan waktu kapan agenda berakhir.

Jawaban
foto azis
4 Kontribusi 1 Coto
3 tahun yang lalu
bagian ini <td class="<?php if ($row['status'] == 1){echo "Open";}else{echo "Close";}?>"> <?php if ($row['status'] == 1){echo "Open";}else{echo "Close";}?> </td> mksdnya gimana ya?

foto onirusama
265 Kontribusi 179 Coto
3 tahun yang lalu
tutorial ini sy buat saat baru mengenal php jadi mungkin syntax (code)nya agak ribet gan. berikut syntax yang lebih efisiennya beserta penjelasannya. bagian yang agan tanyakan itu gunanya untuk membuat class agar nanti kita mudah memberi style di cssnya dan memberi text pada <td>:
<td class="<?php if ($row['status'] == 1){echo "Open";}else{echo "Close";}?>">
....
</td>

// kode di atas terdiri dari 2 struktur html dan php
// HTML-nya kan gini
<td class="">

// PHP-nya gini
if($row['status'] == 1){
  echo "Open";
}else{
  echo "Close";
}

// kode php tersebut diselipkan masuk ke dalam class="" pada html sehingga jadilah code di atas
// arti dari kode php itu sendiri adalah jika nilai dari $row['status'] sama dengan 1, maka tulis "Open" pada class=""
// kalau ternyata nilai dari $row['status'] tidak sama degan 1, maka tulis "Close" pada class=""
// dimana kita telah memberi style pada css untuk class open (.open) warnanya merah dan class close (.close) warnanya hitam
untuk syntax yang lebih singkat agan dapat menggunakan:
<td class="<?= $row['status'] ? 'Open' : 'Close';?>">
// kode ini setara dengan
<td class="<?php if ($row['status'] == 1){echo "Open";}else{echo "Close";}?>">
jadi, syntax yang lebih sederhananya bisa ditulis seperti ini:
<td class="<?= $row['status'] ? 'Open' : 'Close';?>">
   <?= $row['status'] ? 'Open' : 'Close';?>
</td>


Login untuk diksusi di forum sekolah koding