Tugas Struktur Kontrol - PHP
Projek PHP sederhana - Struktur Kontrol
Halo semua!
Pada kesempatan ini saya akan sharing projek buatan saya, pada materi pembelajaran Pemrograman Web dan Perangkat Bergerak, yaitu Struktur Kontrol dengan bahasa pemrograman PHP.
Disini saya akan membuat design dengan konsep sederhana, menggunakan ELSE-IF, IF, dan ELSE.
Saya membuat konsep dimana saat kita menuliskan nama rempah pada kolom, jika nama rempah tersebut adalah rempah yang ada pada script saya maka akan muncul gambar rempah tersebut beserta manfaatnya, berikut ini adalah kode/scriptnya ;
<!DOCTYPE html>
<html>
<head>
<title>Galeri Rempah-rempah</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #007bff;
}
form {
text-align: center;
}
label {
font-weight: bold;
color: #333;
}
input[type="text"] {
padding: 5px;
}
input[type="submit"] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
img {
display: block;
margin: 0 auto;
margin-top: 20px;
max-width: 150px;
height: auto;
border: 3px solid #007bff;
}
p {
text-align: center;
margin-top: 20px;
font-size: 16px;
color: #444;
}
</style>
</head>
<body>
<h1>Galeri Rempah-rempah</h1>
<form method="post" action="">
<label for="nama_rempah">Masukkan Nama Rempah:</label>
<input type="text" name="nama_rempah" id="nama_rempah">
<input type="submit" value="Tampilkan Gambar">
</form>
<?php
if (isset($_POST['nama_rempah'])) {
$nama_rempah = strtolower($_POST['nama_rempah']);
if ($nama_rempah == 'kunyit') {
echo '<img src="kunyit.jpeg" alt="Kunyit">';
echo '<p style="color: #007bff;">Manfaat Kunyit: Sifat antioksidan dan antiinflamasi pada kunyit membantu mengurangi gejala yang berkaitan dengan masalah kesehatan paru kronis atau jangka panjang.</p>';
} elseif ($nama_rempah == 'jahe') {
echo '<img src="jahe.jpeg" alt="Jahe">';
echo '<p style="color: #ff7f00;">Manfaat Jahe: Jahe mengandung senyawa yang memiliki efek menenangkan, yang mampu mengurangi ketegangan dan stres, faktor-faktor yang seringkali menjadi penyebab gangguan tidur.</p>';
} elseif ($nama_rempah == 'lada') {
echo '<img src="lada.jpeg" alt="Lada">';
echo '<p style="color: #d9534f;">Manfaat Lada: Lada dapat membantu merangsang asam klorida di perut, sehingga tubuh dapat mencerna dan menyerap makanan dengan lebih baik.</p>';
} elseif ($nama_rempah == 'sereh') {
echo '<img src="sereh.jpeg" alt="Sereh">';
echo '<p style="color: #5bc0de;">Manfaat Sereh: Sereh bermanfaat untuk pengobatan penyakit seperti menurunkan demam, meredakan nyeri dan bengkak, dan melancarkan menstruasi.</p>';
} elseif ($nama_rempah == 'pala') {
echo '<img src="pala.jpeg" alt="Pala">';
echo '<p style="color: #5bc0de;">Manfaat Pala: Buah pala memiliki sifat antiinflamasi dan antispasmodik yang dapat membantu meredakan gangguan pencernaan seperti perut kembung, gas, dan diare.</p>';
} elseif ($nama_rempah == 'lengkuas') {
echo '<img src="lengkuas.jpeg" alt="Lengkuas">';
echo '<p style="color: #5bc0de;">Manfaat Lengkuas: Lengkuas kaya akan senyawa fenolik yang berperan sebagai antioksidan, membantu melindungi sel-sel tubuh dari kerusakan akibat radikal bebas.</p>';
} else {
echo 'Rempah tidak ditemukan';
}
}
?>
</body>
</html>
Penjelasan Singkat elemen dan perintah
1. `<!DOCTYPE html>`: Ini adalah deklarasi tipe dokumen (Document Type Declaration) yang mengindikasikan bahwa halaman ini adalah dokumen HTML.
2. `<html>...</html>`: Ini adalah tag awal dan akhir untuk elemen HTML, yang mengapit seluruh halaman HTML.
3. `<head>...</head>`: Ini adalah elemen kepala halaman, yang berisi informasi tentang halaman seperti judul (title) dan tautan ke berkas CSS (meskipun dalam kasus ini tidak ada tautan CSS yang diberikan).
4. `<title>Galeri Rempah-rempah</title>`: Ini adalah tag judul, yang menentukan judul halaman yang akan ditampilkan di tab peramban.
5. `<style>...</style>`: Ini adalah elemen gaya internal, yang digunakan untuk mendefinisikan beberapa gaya CSS untuk halaman web. Ini mencakup pengaturan font, warna latar belakang, dan sebagainya.
6. `<body>...</body>`: Ini adalah elemen badan halaman, yang berisi konten yang akan ditampilkan kepada pengguna.
7. `<h1>Galeri Rempah-rempah</h1>`: Ini adalah tajuk utama yang ditampilkan dalam bentuk judul besar pada halaman.
8. `<form>...</form>`: Ini adalah elemen formulir HTML. Form ini digunakan untuk mengambil input pengguna dalam bentuk teks.
9. `<label for="nama_rempah">Masukkan Nama Rempah:</label>`: Ini adalah elemen label yang digunakan untuk memberikan petunjuk kepada pengguna tentang apa yang diharapkan dalam kotak input. Atribut `for` menghubungkannya dengan elemen input.
10. `<input type="text" name="nama_rempah" id="nama_rempah">`: Ini adalah elemen input teks. Pengguna diminta untuk memasukkan nama rempah di sini. Atribut `name` dan `id` digunakan untuk mengidentifikasi input ini.
11. `<input type="submit" value="Tampilkan Gambar">`: Ini adalah elemen tombol "submit" yang digunakan untuk mengirimkan formulir ketika pengguna mengkliknya.
12. Kode PHP di bawahnya digunakan untuk memproses data yang dikirimkan oleh pengguna saat mereka mengklik tombol "Tampilkan Gambar." Kode ini dimulai dengan `if (isset($_POST['nama_rempah']))`, yang memeriksa apakah ada data yang dikirimkan dalam formulir.
- `$nama_rempah = strtolower($_POST['nama_rempah']);`: Ini mengambil nilai yang dikirimkan oleh pengguna (nama rempah) dari formulir dan mengonversinya menjadi huruf kecil.
- Selanjutnya, ada serangkaian pernyataan `if` dan `elseif` yang memeriksa nilai dari `$nama_rempah` dan, jika cocok, menampilkan gambar dan deskripsi rempah tertentu bersama dengan warna teks yang sesuai.
- Jika tidak ada kecocokan dengan nama rempah yang diberikan, maka akan ditampilkan pesan "Rempah tidak ditemukan."
Ini adalah skrip PHP sederhana yang digunakan untuk membuat halaman web yang memungkinkan pengguna untuk memasukkan nama rempah dan kemudian menampilkan gambar dan deskripsi rempah berdasarkan nama yang dimasukkan.
Link Github
Terima kasih!!😇😇🤩🤺🤺
Comments
Post a Comment