SchoolBlog: Pertemuan Keduapuluhempat

Assalamualaikum Wr, Wb.
Di postingan kali ini saya Syahrul Ramadhan akan membagikan kodingan tentang Nested dan Array. Sebelum itu jangan lupa untuk terus mengikuti setiap postingan saya yaa. Langsung aja ke topik pembahasan.

POLA LOOPING :

1. Nested Looping
Kodingannya :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>M Syahrul R XI-RPL3 buat tangga</title>
  <style type="text/css">
      .kotak{
          width: 30px;
          height: 30px;
          margin: 2px;
          display: inline-block;

      }
      .judul{
          font-size: 50px;
          padding-bottom: 50px;
          color: pink;
      }
      table{
          background: silver;
          border: 2px solid;
          margin: auto;
      }
      .submit{
          height: 25px;
          width: 100px;
          background-color: salmon;
          border-color: purple;
      }
      .submit:hover{
          background-color: purple;
          border-color: salmon;
      }
      .input{
          height: 25px;
      }
      td{
          padding-bottom: 15px;
      }
  </style>
</head>
<body>
  <form method="post">
      <table>
<tr>
              <th colspan="2" class="judul">Tangga Berwarna</th>
          </tr>
<tr>
              <td>Jumlah Anak Tangga</td>
              <td><input type="text" name="angka" id="angka" class="input"></td>
          </tr>
<tr>
              <td>Warna</td>
              <td><input type="radio" name="warna" id="warna" value="green"><font color="green">HIJAU</font>
                  <input type="radio" name="warna" id="warna" value="purple"><font color="purple">UNGU</font>
                  <input type="radio" name="warna" id="warna" value="yellow"><font color="yellow">YELLOW</font>
                  <input type="radio" name="warna" id="warna" value="blue"><font color="blue">BIRU</font>
                  <input type="radio" name="warna" id="warna" value="red"><font  color="red">MERAH</font>
              </td>
          </tr>
<tr>
              <td></td>
              <td><input type="submit" name="button" id="button" value="Buat Tangga" class="submit">
              </td>
          </tr>
</table>
<?php
      $angka = $_POST['angka'];
      $warna = $_POST['warna'];

      for ($i = 0; $i < $angka; $i++)
      {
          for ($j = 0; $j < $i; $j++)
          {
              echo "<div class = 'kotak' style='background-color: $warna'></div>
";
          }
          echo "<div class='kotak' style='background-color: $warna'>
  </div>
</br>";
      }
      ?>
  </form>
</body>
</html>

Hasilnya jadi bisa membuat tangga dengan kotak kotak yang di susun seperti pada gambar dibawah ini :

3. Array 2D dan Looping

Kodingannya :

<!DOCTYPE html>
<html>
<head>
 <title>M Syahrul R XI-RPL3 Array2D</title>
<style type="text/css">
 body{
  background: #FFF;
 }
 table{
  background: skyblue;
  margin: auto;
 }
</style>
</head>
<body>
<table>
<tr>
  <td>
<?php
 $siswa = array(array("1819117605","Stark","MIF1"),
  array("1819117605","Tony","MIF2"),
  array("1819117605","Banner","MIF3"));
 echo '<table border="1">
<tr>
     <th>NIS</th>
     <th>Nama</th>
     <th>Kelas</th>
    </tr>
';

 for ($i = 0; $i < 3; $i++) {
  echo '<tr>';
  for ( $j = 0; $j < 3; $j++) {
   echo '<td>'. $siswa[$i][$j].'</td>';
  }
  echo '</tr>
';
 }
 echo '</table>
';
 ?>
   </td>
  </tr>
</table>
</body>
</html>

Hasilnya jadi seperti ini :

Cukup segitu untuk postingan di pertemuan kali ini. Mohon maap bila ada kesalahan atau kekurangan, Semoga berguna atau bermanfaat.

Wassalamualaikum Wr, Wb.

SchoolBlog

inlinecss

Jumat, 04 Oktober 2019

Pertemuan Keduapuluhempat

2 komentar: