Contoh Program PHP, Membuat Kotak Catur dengan PHP, HTML & CSS

0 Comments


Lama rasanya saya gak menulis di blog satu ini. Terlalu sibuk dengan kegiatan harian dan blog saya yang lain. Tapi mudah-mudahan tetap masih ada peminatnya ya, kalau saya kembali nulis tentang pemrograman.

Baik, kali ini saya ingin sedikit berbagi mengenai Pemrograman Berbasis Web atau bahasa kerennya Web Based Programming. Tulisan ini terinspirasi dari tugas kuliah dulu waktu mempelajari pemrograman web.

Program yang akan kita buat ini adalah pemrograman yang sangat sederhana. Yaitu membuat tampilan seperti papan catur dengan jumlah kotak sesuai input yang diberikan (kolom dan baris). Nah, dalam ide sederhana yang akan diterapkan, kita akan menggunakan table HTML sebagai elemen utamanya. Setelah itu, untuk jumlah kolom dan baris kita akan menggunakan iterasi di PHP agar bisa menampilkan baris (tag ) dan kolom (tag ) sesuai dengan input yang diberikan. Sedangkan untuk pewarnaan kotak, kita menggunakan bantuan class CSS yang diatur berselang-seling pada setiap kotaknya.

Membuat Kotak Catur dengan PHP

Oke, kita langsung saja pada intinya. Silakan perhatikan kode berikut ini.
Untuk tampilan form isian untuk input jumlah kolom dan baris yang diinginkan, kita ketik file html dengan list kode sbb:

<!DOCTYPE html>
<html>
<head>
 <title>Table Creator :. PBW Sore - Ahyar (2012470132)</title>
 <style type="text/css">
 
 </style>
</head>
<body>
<center>
<h2>Papan Catur Creator</h2>
<form name="papancatur" action="papan-catur.php" method="GET">
<table border="0">
 <tr><td>Baris : </td><td><input type="text" size="10" name="bar"></td></tr>
 <tr><td>Kolom : </td><td><input type="text" size="10" name="kol"></td></tr>
 <tr><td><input type="reset" value="Reset"></td><td><input type="submit" value="Tampilkan"></td></tr>
</table> 
</form>
</center>
<br/>
</body>
</html>
Kemudian, buat file dengan nama papan-catur.php dan isi dengan list kode sbb:

<table border="1">
  <?php
  /*
   * Belang-belang papan catur 
   * ayayank.com
   * */
  $baris = $_GET['bar'];//'bar'-> di form-nya brarti <input type="text" name="bar"/>
  $kolom = $_GET['kol'];//sama aja
  $awal = 0;//0 brarti ga ada warna (putih)
  
  for($i=0;$i<$baris;$i++){
   //for pertama buat bikin baris
   echo "<tr>";
   $hitam=$awal;
   for($j=0;$j<$kolom;$j++){
    //for kedua buat bikin kotak-kotaknya sekalian warnanya
    echo "<td width='30' height='30' class='hitam$hitam'></td>";
    if($hitam==0)
    $hitam=1;
    else
    $hitam=0;
    }
   echo "</tr>";
   if($awal==0)
   $awal=1;
   else
   $awal=0;
   }
  ?>
 </table>
<style type="text/css">
.hitam1{background-color:#000;}
</style>
Seperti pemrograman PHP biasanya, letakkan kedua file tersebut dalam satu folder di lokasi htdocs aplikasi XAMPP atau aplikasi sejenisnya.
Baca juga : Enkripsi dan Dekripsi MD5 di PHP, bisakah?
Setelah digunakan, tampilan akhir yang akan didapatkan seperti gambar berikut :

Program PHP Papan Catur
Tampilan Kotak Isian
Kotak Papan Catur dengan PHP HTML & CSS
Tampilan Kotak Papan Catur dengan PHP

Nah, kira-kira demikian contoh aplikasi pemrograman web PHP sederhana untuk menampilkan gambar papan catur dengan bantuan CSS dan PHP. Semoga bermanfaat.

Baca Tulisan Lainnya Juga :)

0 komentar: