Tugas Struktur Kontrol - PHP (Change Images)

Pada kali ini saya akan membuat sebuah program sederhana dengan menggunakan IF-ELSE, ELSE-IF, dan ELSE. Dalam kasus ini saya membuat sebuah kode untuk mengganti nama jika kita mengetikkan sebuah Teks, menggunakan method POST

📐Struktur Kode

<!DOCTYPE html>
<html>

<head>
    <title>Ubah Gambar</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            color: #fff;
            text-align: center;
        }

        .wrapper {
            display: flex;
            justify-content: center;
        }

        h1 {
            text-align: center;
            color: #fff;
        }

        img {
            margin-top: 50px;
            width: 300px;
            height: 300px;
            border-radius: 200px;
            border: 4px solid #fff;
        }
        label {
            display: block;
            margin-bottom: 20px;
        }
        input {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #fff;
            border-radius: 15px;
        }
        button {
            background-color: orange;
            border: transparent;
            padding: 5px;
            border-radius: 10px;
        }
    </style>
</head>

<body style="background-color: #333333;">
    <h1>Ubah Gambar</h1>
    <div class="wrapper">
        <form method="POST" action="">
            <p><small><i>Tulis Teks <b>"Aku"</b> atau <b>"Dia"</b></i></small></p>
            <hr>
            <label for="teks">Masukkan teks: </label>
            <input type="text" name="teks" id="teks" placeholder="Ketik teks" required>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>

</html>

<?php
if (isset($_POST['teks'])) {
    $teks = $_POST['teks'];

    if (strcasecmp($teks, "AKU") === 0 || strcasecmp($teks, "Aku") === 0 || strcasecmp($teks, "aku") === 0) {
        echo '<img src="gambar1.png" alt="Gambar 1">';
    } elseif (strcasecmp($teks, "KAMU") === 0 || strcasecmp($teks, "Kamu") === 0 || strcasecmp($teks, "kamu") === 0) {
        echo '<img src="gambar.jpg" alt="Gambar 2">';
        echo "<script>alert('Hello')</script>";
    } else {
        echo '<p style="margin-top: 20px;"><i>Teks tidak cocok.</i></p>';
    }
}
?>

👻Penjelasan Kode:

1. Elemen HTML dan CSS:
   - Dalam bagian `<head>`, Anda mendefinisikan judul halaman dan beberapa aturan gaya CSS untuk halaman web.
   - Elemen-elemen seperti `<body>`, `<h1>`, `<img>`, `<label>`, `<input>`, dan `<button>` digunakan untuk membangun tampilan halaman web.

2. Formulir HTML:
   - Dalam `<form>`, Anda membuat formulir yang akan digunakan untuk menerima input dari pengguna.
   - Terdapat label untuk input teks yang memberikan petunjuk kepada pengguna.
   - Elemen `<input>` digunakan untuk memasukkan teks. Pengguna diminta untuk memasukkan teks yang mengandung kata "Aku" atau "Kamu".
   - Terdapat tombol `<button>` yang digunakan untuk mengirimkan formulir.

3. PHP Script:
   - Kode PHP dimulai setelah tag `<?php` dan berakhir sebelum tag `?>`.
   - Saat formulir dikirimkan (dengan mengklik tombol "Submit"), PHP menerima input teks dari formulir menggunakan `$_POST['teks']` dan menyimpannya dalam variabel `$teks`.

4. Pengujian Teks:
   - Kode PHP kemudian memeriksa nilai dari variabel `$teks` menggunakan strcasecmp(), yang memungkinkan perbandingan teks tanpa memperhatikan huruf besar atau kecil.
   - Jika `$teks` cocok dengan "AKU", "Aku", atau "aku", gambar `gambar1.png` akan ditampilkan.
   - Jika `$teks` cocok dengan "KAMU", "Kamu", atau "kamu", gambar `gambar.jpg` akan ditampilkan. Selain itu, sebuah pesan "Hello" akan muncul dalam sebuah jendela pop-up menggunakan JavaScript.
   - Jika teks tidak cocok dengan kedua pilihan tersebut, pesan "Teks tidak cocok" akan ditampilkan di bawah formulir.

Repository Github

Tugas Struktur Kontrol - PHP (Change Images)

📐Struktur Kode

👻Penjelasan Kode:

1 Komentar

POST ADS1

POST ADS 2