Latihan Kode Program PHP: Membuat Pola Segitiga Bintang Terbalik

Latihan algoritma kode program PHP kali ini akan membahas cara membuat pola segitiga bintang terbalik. Materi ini melatih logika program, terutama pemahaman terkait konsep perulangan bersarang (nested loop).


Soal Membuat Pola Segitiga Bintang Terbalik

Buatlah kode program dalam bahasa PHP untuk menampilkan pola gambar segitiga terbalik dalam bentuk kumpulan karakter bintang (karakter *). Sebagai bonus, buat juga sebuah form untuk menginput tinggi segitiga.

Berikut contoh tampilan akhir yang diinginkan (1) :

Kode Program PHP - Segitiga Bintang Terbalik (7)

 * * * * * * *
 * * * * * *
 * * * * *
 * * * *
 * * *
 * *
 *

Berikut contoh tampilan akhir yang diinginkan (2) :

Kode Program PHP - Segitiga Bintang Terbalik (10)

 * * * * * * * * * *
 * * * * * * * * *
 * * * * * * * *
 * * * * * * *
 * * * * * *
 * * * * *
 * * * *
 * * *
 * *
 *

Tips Membuat Kode Program Segitiga Bintang Terbalik

Soal ini melatih pemahaman terkait perulangan bersarang (nested loop). Berikut tutorial pendahuluan yang bisa di ikuti:

Kita perlu membuat perulangan bersarang atau nested loop untuk memecahkan soal ini. Perulangan luar (outer loop) dipakai untuk membuat tinggi persegi, dan perulangan dalam (inner loop) dipakai untuk membuat lebar persegi.


Kode Program PHP Pola Segitiga Bintang Terbalik

Berikut salah satu konsep dasar cara membuat pola segitiga bintang terbalik menggunakan bahasa pemrograman PHP:

<?php
  echo "<p>Kode Program PHP - Segitiga Bintang Terbalik (10)</p>";
  echo "<pre>";

  $tinggi_segitiga = 10;
  for($i = 0; $i < $tinggi_segitiga; $i++) {
    for($j = 1; $j <= $tinggi_segitiga - $i; $j++) {
      echo " *";
    }
    echo "<br>";
  }

  echo "</pre>";
?>

Hasil kode program:

Latihan Kode Program PHP - Membuat Pola Segitiga Bintang Terbalik

Kode program diawali dengan perintah echo untuk menampilkan tag <h1> yang berisi judul program, serta tag <pre> agar hasil segitiga bintang terbalik terlihat lebih rapi.

Di baris 5, variabel $tinggi_segitiga di isi angka 10. Variabel inilah yang akan menentukan tinggi segitiga.

Proses menampilkan karakter bintang dilakukan oleh perulangan for di baris 6-11. Perulangan luar dengan variabel counter $i dipakai untuk membuat tinggi segitiga. Ini dimulai dari  $i = 0 hingga $i < $tinggi_segitiga.

Karena saat ini variabel $tinggi_segitiga berisi angka 10, maka perulangan luar akan dijalankan sebanyak 10 kali. Dalam setiap iterasi, jalankan perulangan dalam serta sebuah perintah echo "<br>" di baris 11 untuk proses pindah baris.

Perulangan dalam dengan variabel counter $j dipakai untuk membuat karakter bintang. Karena kita membuat sebuah segitiga terbalik, maka proses perulangan dilakukan hingga $tinggi_segitiga - $i agar karakter bintang turun bertahap mulai dari $tinggi_segitiga-0$tinggi_segitiga-1$tinggi_segitiga-2, dst.

Dalam setiap iterasi, jalankan perintah echo " *". Perintah inilah yang akan menampilkan karakter spasi dan bintang. Jika tidak ingin ada jarak, silahkan hapus awalan spasi di " *".


Membuat Pola Segitiga Bintang Terbalik dengan Inputan Form

Jika ingin membuat kode program PHP yang bisa menerima nilai input dari user, maka butuh sebuah form HTML. Bahasan tentang cara memproses form lumayan panjang, jika butuh materi dasar bisa lanjut ke tutorial cara memproses form HTML dengan PHP.

Berikut kode program membuat pola segitiga bintang terbalik dengan perpaduan kode HTML, CSS dan PHP:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Soal Algoritma Bahasa PHP</title>
  <style>
    body  { text-align: center; font-family: "Trebuchet MS", serif; }
    h1,h2 { margin-bottom: 0; }
    hr    { width: 80%; }
    form  { margin-top: 2rem; }
    pre   { margin-top: 1.4rem; text-align: left; }
    .result {
      margin: 1rem auto; 
      padding: 0.25rem 0.25rem 1rem 0.25rem;
      background-color: ghostwhite;
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>Kode Program PHP - Segitiga Bintang Terbalik</h1>
  <hr>
  <form action="" method="post">
    <div>
      Tinggi Segitiga: <input type="text" name="tinggi_segitiga" size="1">
      <input type="submit" name="submit">
    </div>
  </form>
  
    <?php
      if (isset($_POST['submit'])) {
        $tinggi_segitiga = $_POST['tinggi_segitiga'];

        echo "<div class='result'>";
        echo "<h2>Hasil Kode Program</h2>";
        echo "<span>(tinggi segitiga: $tinggi_segitiga)</span>";
        echo "<pre>";

        for($i = 0; $i < $tinggi_segitiga; $i++) {
          for($j = 1; $j <= $tinggi_segitiga-$i; $j++) {
            echo " *";
          }
          echo "<br>";
        }
        echo "</pre>";
        echo "</div>";
      }
    ?>
  
</body>
</html>

Latihan Kode Program PHP - Membuat Pola Segitiga Bintang Terbalik dengan Form

Selain struktur dasar HTML, pada script ini juga terdapat kode CSS di dalam tag <style> untuk mempercantik tampilan halaman (baris 7-22).

Kode untuk membuat form HTML ada di baris 27-32. Di dalamnya terdapat tag <input> untuk menampung nilai input tinggi_segitiga, serta tag <input type="submit" name="submit"> untuk membuat tombol “Submit”.

Kode PHP sendiri ada di baris 34-52. Kondisi if(isset($_POST['submit'])) berguna untuk memeriksa apakah form sudah di submit atau belum. Hanya jika kondisi ini terpenuhi, barulah kode PHP lain akan di proses.

Agar lebih praktis, nilai form yang tersimpan di global variable $_POST['tinggi_segitiga'] dipindahkan ke variabel $tinggi_segitiga pada baris 36.

Perintah echo antara baris 38-41 berguna untuk membuat struktur HTML sebagai tempat dari segitiga bintang terbalik kita. Setelah itu baru masuk ke perulangan for yang akan menampilkan pola segitiga bintang terbalik seperti bahasan sebelumnya.


Itulah tutorial singkat membahas cara membuat pola segitiga bintang terbalik menggunakan bahasa PHP.

Soal ini memang cukup sederhana, tapi menjadi dasar dari pembuatan pola bintang lain seperti piramida bintang hingga diamond bintang. Semua ini akan dibahas dalam tutorial terpisah.

Add Comment