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

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

Array pada JS - P13

Di pembahasan kali ini akan membahas JS Array..Langsung simak aja guys... 1. Pengertian Array 2. Jenis jenis Array 3. Contoh contoh Array 1. Pengertian Array     Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dst.     Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan elemen dari array ‘tidak terur...
Post a Comment
Read more

Passing Data terhadap View pada Laravel

Passing Data terhadap View pada Laravel Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT, dibangun dengan konsep MVC (model view controller). Laravel adalah pengembangan website berbasis MVP yang ditulis dalam PHP yang dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya pemeliharaan, dan untuk meningkatkan pengalaman bekerja dengan aplikasi dengan menyediakan sintaks yang ekspresif, jelas dan menghemat waktu. KONSEP MVC Nah itu penjelasan singkat mengenai Laravel Framework, dan sekarang kita Analisis kedua subject kodingan.. THE SUBJECT Example Kodingan A Penjelasan mengembalikan nilai dengan tipe variabel array ( lebih dari 1 variabel ) yang diarahkan kepada folder pages yang didalamnya terdapat file belajar.blade.php , dengan mempassing data dengan variabel $data . Example Kodingan B Penjelasan mengembalikan nilai dengan tipe variabel string namun, varia...
Post a Comment
Read more