Membuat Segitiga, Persegi dan Motif dengan PHP For Loop

Pada artikel sebelumnya telah kita bahas tentang for loop pada PHP, pada kesempatan kali ini kita akan sedikit berkreasi dengan membuat motif bidang dengan for loop tersebut, kita akan membuat agar motif tersebut tampak seperti ubin yang tertata rapi. Kode yang digunakan di artikel ini hanya salah satu contoh saja banyak kode lain yang dapat menghasilkan output yang sama, sebagaimana istilah “Seribu jalan ke Roma”.

1. Pertama, Pertama kali mari kita buat persegi dengan motif bersilang, kode yang kita perlukan:

<?php
/** 
 $num_char merupakan jumlah karakter vertikal dan horizontal
 untuk kerapian isikan nilai ganjil misal 27 atau 31 
*/
$num_char   = 29; 
// onehalf_var nantinya nilainya bisa bertambah / berkurang, sedangkan half tetap
$onehalf   = floor($num_char / 2);
$onehalf_var = $onehalf;
$char1    = '-';
$char2    = '*';

echo '<div style="font:bold 16px courier new; line-height:10px">';
// loop baris
for ($row = 1; $row <= $num_char; $row++)
{
 // loop kolom
 for ($col = 1; $col <= $num_char; $col++)
 {
  $char = $col > $onehalf_var && $col <= ($num_char - $onehalf_var) ? $char2 : $char1;
  echo $char; 
 }
 $row <= $onehalf ? $onehalf_var-- : $onehalf_var++; 
 echo '<br/>';
}
echo '</div>';
?>

output yang dihasilkan adalah:
Penjelasan kode:
Pada kode tersebut diatas, loop kolom ($col) yang menentukan bentuk karakter *, jika ada diposisi tengah cetak * dengan jumlah karakter sesuai dengan urutan barisnya, misal pada baris ketiga, jika kolom > 11 ($col > $onehalf_var) maka cetak * dan jika kolom <= 17 ($col <= ($num_char - $onehalf_var)) juga cetak * . $onehalf_var menentukan jumlah karakter * perbarisnya, untuk baris pertama $onehalf_var bernilai 13 (setengan dari jumlah karakter – pembulatan kebawah – floor($num_char / 2)), baris kedua 12 dan seterusnya hingga bernilai 0 pada baris 14, selanjutnya bernilai 1 mulai baris 15 dan seterusnya hingga kembali bernilai 13 pada baris terakhir ($row <= $onehalf ? $onehalf_var-- : $onehalf_var++)

2. Selanjutnya kita buat motif lebih bervariasi, yaitu dengan membuat keempat sisi bujursangkar bermotif beda dan membuat sebuah bujursangkar kecil di tengah dengan warna yang lebih cerah, kode yang diperlukan sama dengan sebelumnya dengan beberapa penambahan:

<?php
/** 
 $num_char merupakan jumlah karakter vertikal dan horizontal
 untuk kerapian, karena motifnya agak banyak, isikan nilai dengan menambahkan atau mengurangi
 kelipatan 4, misal 25 atau 33
*/
$num_char  = 29;
$onehalf = floor($num_char / 2);
$onehalf_var  = $onehalf;
$onequarter  = floor($num_char / 4);
$threequarters = ceil($num_char * 3/4);
$char1   = '-';
$char2   = '*';

echo '<div style="font:bold 16px courier new; line-height:10px">';
for ($row = 1; $row <= $num_char; $row++)
{
 for ($col = 1; $col <= $num_char; $col++)
 {
  // Sama seperti kode sebelumnya
  $char = $col > $onehalf_var && $col <= ($num_char-$onehalf_var) ? $char2 : $char1;
  
  // Menambahakan bujursangkar di tengah
  if ( 
   $col > $onequarter  
   && $col <= $threequarters 
   && $row > $onequarter 
   && $row <= $threequarters 
  )
  {
   $char = '<span style="color:#CCC">'.$char.'</span>';
  }
  
  // Mengganti karakter dan warna keempat sisi bujursangkar 
  if (
   ($col <= $onequarter && $row <= $onequarter)
   || ($col > $threequarters && $row <= $onequarter)
   || ($row > $threequarters && $col <= $onequarter)
   || ($col > $threequarters && $row > $threequarters)
  )
  {
   $char = '<span style="color:#CCC">'.$char2.'</span>';
  }
   
  echo $char; 
 }
 
 // Sama seperti kode sebelumnya
 $row <= $onehalf ? $onehalf_var-- : $onehalf_var++; 
 echo '<br/>';
}
echo '</div>';
?>

output yang dihasilkan:

Penjelasan kode: Kode diatas sama dengan kode sebelumnya hanya ada 2 penambahan yaitu bujursangkar yang ada ditengah yang dapat dianalogikan seperti margin, margin kiri ($col > $onequarter), margin kanan ($col <= $threequarters), margin atas ($row > $onequarter) dan margin bawah ($row <= $threequarters), jika nilainya didalam margin maka buat karakter berbeda, sehingga membentuk bujursangkar baru sedangkan untuk bujursangkar yang ada di pojok kiri atas menggunakan kode ($col <= $onequarter && $row <= $onequarter), pojok kanan atas ($col > $threequarters && $row <= $onequarter), pojok kiri bawah ($row > $threequarters && $col <= $onequarter) dan pojok kanan bawah ($col > $threequarters && $row > $threequarters)

3. Ketiga Terakhir dengan menambahkan loop satu kali lagi, kita gabungkan beberapa persegi yang telah kita buat, sehingga berbentuk seperti pola ubin, jika sebelumnya untuk karakter1 kita menggunakan dash (-), maka untuk yang terakhir ini kita gunakan spasi kosong (&nbsp) agar hasilnya tampak lebih bersih, kode yang kita gunakan:

<?php
$patterns   = 9;
$patterns_col   = 3;
$cont_width   = 279 * $patterns_col;
$num_char  = 29;
$char1   = '&nbsp;';
$char2   = '*';
$onehalf   = floor($num_char / 2);
$onehalf_var  = $onehalf;
$onefourth  = floor($num_char / 4);
$threequarters  = ceil($num_char * 3/4);

echo '<div style="width:'.$cont_width.'px">';
for ($i = 1; $i <= $patterns; $i++)
{
 $onehalf_var   = $onehalf;
 echo '<div style="float:left;font:bold 16px courier new; line-height:10px">';
 for ($row = 1; $row <= $num_char; $row++)
 {
  for ($col = 1; $col <= $num_char; $col++)
  {
   $char = $col > $onehalf_var && $col <= ($num_char - $onehalf_var) ? $char2 : $char1;
   
   if ( 
    $col > $onefourth 
    && $col <= $threequarters 
    && $row > $onefourth 
    && $row <= $threequarters
   )
   {
    $char = '<span style="color:#CCC">'.$char.'</span>';
   }
  
   if (
    ($col <= $onefourth && $row <= $onefourth)
    || ($col > $threequarters && $row <= $onefourth)
    || ($row > $threequarters && $col <= $onefourth)
    || ($col > $threequarters && $row > $threequarters)
   )
   {
    $char = '<span style="color:#A0A0A0;">'.$char2.'</span>';
   }
    
   echo $char; 
  }
  $row <= $onehalf ? $onehalf_var-- : $onehalf_var++; 
  echo '<br/>';
 }
 echo '</div>';
}
echo '</div>';
?>

hasilnya akan tampak seperti gambar berikut:




Sumber : https://jagowebdev.com/membuat-segitiga-persegi-dan-motif-dengan-php-for-loop/#top

Share This :