Skip to main content

Membuat Anak Tangga menggunakan PHP - P24

Cara Membuat Anak Tangga menggunakan Array 2 Dimensi & Looping 





Kali ini saya akan menunjukan kepada kalian cara membuat Anak Tangga di PHP menggunakan Array 2 dimensi & Looping dengan menyesuaikan Input dan pilihan warna dari User.
Semoga bermanfaat~


<?php 
error_reporting(0);
 $jumlah = $_POST['anakTangga'];
 $warna = $_POST['warnaTangga'];


 for ($i=0; $i < $jumlah; $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>";
 }
 ?>


Dan ini hasilnya

Keterangan:
Bahwa dalam menggunakan Array 2 Dimensi & Looping akan terus menerus mengulang sesuai dengan Input User



<!DOCTYPE html>
<html>
<head>
 <title>Tangga Berwarna</title>
</head>
<style type="text/css">
 div.kotak{
  width: 20px;height:20px;
  display: inline-block;
  margin: 1px;
}
div.hasilnya{
 background-color: white;
  padding: 20px;
}

body{
 background-color: #F5F7F6;
 color: #2B425D;
 font-family: sans-serif;
 font-size: 22px;
}
h1{
  text-align: center;
  margin-right: 800px;
  color: #CC6666;
}
.masukan {
  color:#CC6666;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}
label{
  font-family: 'Doppio One';
  font-size: 30px;
}
table{
  border-collapse: collapse;
 margin: 5px;
  padding: 5px;
}
input{ 
 font-family: sans-serif;
 font-size: 20px;
 padding: 5px;
  margin: 10px;
}
input[type='radio']{
  margin: 20px;
}
input[type='radio']::before {
  content:"";
  bottom: 10px;
  left: -10px;
  position: relative;
  display:inline-block;
  width:25px;
  height:25px;
  background:#fff;
  margin-right:5px;
  border:1px solid #ddd;
  border-radius:50%; -moz-border-radius:50%;
}
input[type='radio']:checked::before {
  background: #f44336;
  border:3px solid #fbfafb;
  width:22px;
  height:22px;
}
input[type='button']{
  background-color: #F88216;
  color: #F5F7F6;
  border-radius: 5px;
  font-family: sans-serif;
}
[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }
.table1 tr td{
 border: 1px solid;
 width: 100px;
 margin: 10px;
}
*:focus{
  outline: none;
}
</style>
<body>
 <h1>TANGGA BERWARNA</h1>
 <form method="post">
  <table cellpadding ="10">
   <tr>
    
    <td> 
     <input type="text" name="anakTangga" placeholder="Masukan Jumlah" class="masukan">
    </td>
   </tr>
   <tr>
    <td>Silahkan Pilih Warna</td>
    <td>: 
     <input type="radio" name="warnaTangga" value="lime"><label>HIJAU</label>
     <input type="radio" name="warnaTangga" value="darkviolet"><label>UNGU</label>
     <input type="radio" name="warnaTangga" value="orange"><label>ORANYE</label>
     <input type="radio" name="warnaTangga" value="navy"><label>BIRU</label>
     <input type="radio" name="warnaTangga" value="dimgray"><label>ABU</label>
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <input type="submit" value="BUAT TANGGA">
    </td>
   </tr>
  </table>
 </form>
<div class="hasilnya">
<?php 
error_reporting(0);
 $jumlah = $_POST['anakTangga'];
 $warna = $_POST['warnaTangga'];


 for ($i=0; $i < $jumlah; $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>";
 }
 ?>
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud...
4 comments
Read more

Algoritma C++ Konversi dan Menukar Bilangan dari User

MENJADIKAN CODING C++ BERMANFAAT UNTUK USER Selamat beraktivitas bagi pembaca sekalian dimanapun kalian berada.. Kali ini saya akan menunjukan kepada kalian coding sederhana dengan C++ sesuai dengan judulnya  Yang saya bahas kali ini adalah  -PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -PERTUKARAN NILAI TANPA MENGGUNAKAN VARIABEL BANTU -BILANGAN POSITIF & NEGATIF dan -KONVERSI WAKTU DARI DETIK KE JAM, MENIT, dan DETIK Langsung saja ke pembahasan di bawah ini. 1. PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -Kita menginisialisasikan terlebih dahulu variabelnya x, y, z dengan tipe data Integer sebenarnya variabel z hanya variabel pembantu saja -Lalu untuk pengulangannya saya memakai do while  dengan menginisialisasikan pilih dengan tipe data char -Lalu pengulangannya saya tulis do{ -Saya outputkan dengan  cout << "Masukan Nilai X : " ; dan input dengan cin >> a ; -Untuk proses saya masukan z = x ; x = y ; y = z ; ...
Post a Comment
Read more