Input, Process, Output

Target Pertemuan

Di akhir kelas, Anda mampu mengubah kebutuhan sederhana menjadi langkah program PHP yang dapat dijalankan di XAMPP.

Kode boleh di-copy–paste. Yang tidak boleh di-copy–paste adalah pemahaman.

Pertanyaan Pembuka

Kasir memasukkan 2 barang dengan harga Rp60.000 per barang. Jika total belanja minimal Rp100.000 mendapat diskon 10%, berapa yang dibayar pelanggan? Tuliskan langkahnya dahulu—belum perlu membuka editor.

1. Dari Pertemuan 2 ke Pertemuan 3

Pada pertemuan sebelumnya, kita mengirim form menggunakan POST. PHP menerima request itu; sekarang kita bahas logika yang berjalan setelahnya.

2. Input, Process, Output (IPO)

Hampir semua fitur dapat dipahami dengan tiga pertanyaan: data apa yang diterima, aturan apa yang dijalankan, dan hasil apa yang dikembalikan?

Latihan lisan: Pada fitur login, apa input-nya? Apa yang harus diproses server? Seperti apa output jika password benar dan jika salah?

3. Sequence — Instruksi Dieksekusi Berurutan

Sequence berarti urutan instruksi. Urutan yang keliru dapat menghasilkan angka atau keputusan yang salah, meskipun setiap baris tampak benar.

<?php
$jumlah = 2;
$harga = 60000;
$subtotal = $jumlah * $harga;
$diskon = 0;
$totalBayar = $subtotal - $diskon;
echo $totalBayar;
?>

4. Variabel, Tipe Data, dan Operator

Variabel menyimpan nilai yang dipakai dalam proses. Dalam PHP, nama variabel diawali tanda $.

5. Condition — Program Membuat Keputusan

Condition menggunakan if, elseif, dan else. Kondisi harus menghasilkan benar (true) atau salah (false).

<?php
$subtotal = 120000;

if ($subtotal >= 100000) {
    $diskon = intdiv($subtotal, 10); // 10 persen, dibulatkan ke bawah ke rupiah utuh
} else {
    $diskon = 0;
}

$totalBayar = $subtotal - $diskon;
echo 'Total bayar: Rp ' . number_format($totalBayar, 0, ',', '.');
?>

Untuk subtotal Rp120.000, syarat bernilai benar, diskon Rp12.000, dan total bayar Rp108.000. Ubah subtotal menjadi 90000; cabang else yang dijalankan.

6. Repetition — Mengulang Proses

Repetition (perulangan) berguna saat langkah yang sama harus dilakukan pada beberapa data.

<?php
for ($i = 1; $i <= 3; $i++) {
    echo "<p>Baris ke-$i</p>";
}
?>

<?php
$daftarHarga = [12000, 25000, 50000];
$subtotal = 0;

foreach ($daftarHarga as $harga) {
    $subtotal += $harga;
}

echo $subtotal; // 87000
?>

7. Praktik Utama — Kalkulator Total Belanja

Kita gabungkan form POST, input, validasi, sequence, condition, repetition, dan output. Contoh menerima sampai 3 barang, memberi diskon 10% jika subtotal minimal Rp100.000, lalu menampilkan rincian.

Siapkan di XAMPP

1. Buka XAMPP Control Panel dan klik Start pada Apache. MySQL tidak perlu dinyalakan karena latihan ini belum memakai database.
2. Buat folder C:\xampp\htdocs\web-lanjut\pertemuan-3\. Jika lokasi XAMPP Anda berbeda, buat folder web-lanjut\pertemuan-3 di dalam folder htdocs.
3. Buat file index.php di folder tersebut, lalu salin seluruh kode di bawah ini.
4. Buka http://localhost/web-lanjut/pertemuan-3/ melalui browser. Jangan membuka file dengan double-click; PHP perlu diproses oleh Apache.

<?php
function e($nilai): string
{
    return htmlspecialchars((string) $nilai, ENT_QUOTES, 'UTF-8');
}

function rupiah(int $angka): string
{
    return 'Rp ' . number_format($angka, 0, ',', '.');
}

$namaInput = $_POST['nama'] ?? [];
$jumlahInput = $_POST['jumlah'] ?? [];
$hargaInput = $_POST['harga'] ?? [];

// Pastikan nilai dari form berbentuk array sebelum diproses.
if (!is_array($namaInput)) {
    $namaInput = [];
}
if (!is_array($jumlahInput)) {
    $jumlahInput = [];
}
if (!is_array($hargaInput)) {
    $hargaInput = [];
}

// Form latihan dibatasi tiga barang dan nilainya tetap terisi setelah submit.
$jumlahBaris = 3;
$produkForm = [];

for ($i = 0; $i < $jumlahBaris; $i++) {
    $nama = $namaInput[$i] ?? '';
    $jumlah = $jumlahInput[$i] ?? '';
    $harga = $hargaInput[$i] ?? '';

    $produkForm[] = [
        'nama' => is_scalar($nama) ? trim((string) $nama) : '',
        'jumlah' => is_scalar($jumlah) ? trim((string) $jumlah) : '',
        'harga' => is_scalar($harga) ? trim((string) $harga) : '',
    ];
}

$terkirim = $_SERVER['REQUEST_METHOD'] === 'POST';
$error = [];
$daftarProduk = [];
$subtotal = 0;
$diskon = 0;
$totalBayar = 0;

if ($terkirim) {
    
    foreach ($produkForm as $index => $produk) {
        // Abaikan baris yang memang dibiarkan kosong.
        if ($produk['nama'] === '' && $produk['jumlah'] === '' && $produk['harga'] === '') {
            continue;
        }

        $jumlah = filter_var($produk['jumlah'], FILTER_VALIDATE_INT);
        $harga = filter_var($produk['harga'], FILTER_VALIDATE_INT);

        // Validasi server tetap diperlukan meskipun form memakai type="number".
        if ($produk['nama'] === '' || $jumlah === false || $jumlah < 1 || $harga === false || $harga < 0) {
            $error[] = 'Baris ' . ($index + 1) . ': isi nama, jumlah minimal 1, dan harga 0 atau lebih (angka bulat).';
            continue;
        }

        $totalItem = $jumlah * $harga;
        $daftarProduk[] = [
            'nama' => $produk['nama'],
            'jumlah' => $jumlah,
            'harga' => $harga,
            'total' => $totalItem,
        ];
        $subtotal += $totalItem;
    }

    if (empty($daftarProduk) && empty($error)) {
        $error[] = 'Isi setidaknya satu produk sebelum menghitung.';
    }

    
    if (empty($error)) {
        if ($subtotal >= 100000) {
            $diskon = intdiv($subtotal, 10); // Diskon 10%, rupiah dibulatkan ke bawah.
        }
        $totalBayar = $subtotal - $diskon;
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Belanja</title>
    <style>
        * { box-sizing: border-box; }
        body { margin: 0; padding: 24px; background: #f4f6fb; color: #172033; font: 16px/1.6 Arial, sans-serif; }
        main { max-width: 850px; margin: 0 auto; padding: 24px; background: #fff; border: 1px solid #e5e9f2; border-radius: 16px; }
        h1, h2 { line-height: 1.25; }
        .baris { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5e9f2; }
        label { display: block; font-weight: 700; }
        input { display: block; width: 100%; margin-top: 5px; padding: 10px; border: 1px solid #cfd5e2; border-radius: 8px; font: inherit; }
        button { margin-top: 18px; padding: 11px 18px; border: 0; border-radius: 9px; background: #405cf5; color: white; font: inherit; font-weight: 700; cursor: pointer; }
        table { width: 100%; border-collapse: collapse; margin-top: 12px; }
        th, td { padding: 10px; border-bottom: 1px solid #e5e9f2; text-align: left; }
        th { background: #f8f9fc; }
        .angka { text-align: right; white-space: nowrap; }
        .alert { padding: 12px 16px; border-left: 4px solid #b42318; border-radius: 6px; background: #fef3f2; color: #7a271a; }
        .ringkasan { max-width: 370px; margin: 16px 0 0 auto; }
        .ringkasan p { display: flex; justify-content: space-between; gap: 16px; margin: 7px 0; }
        .total { padding-top: 10px; border-top: 2px solid #172033; font-size: 1.15rem; font-weight: 800; }
        .catatan { color: #667085; font-size: .92rem; }
        @media (max-width: 600px) { body { padding: 12px; } main { padding: 16px; } .baris { grid-template-columns: 1fr; gap: 8px; } table { display: block; overflow-x: auto; } }
    </style>
</head>
<body>
<main>
    <h1>Kalkulator Total Belanja</h1>
    <p>Masukkan maksimal tiga produk. Diskon 10% berlaku jika subtotal minimal Rp100.000.</p>

    <form method="POST" action="">
        <?php foreach ($produkForm as $index => $produk): ?>
            <div class="baris">
                <label>
                    Nama produk
                    
                    <input type="text" name="nama[]" maxlength="80" placeholder="Contoh: Buku" value="<?= e($produk['nama']) ?>">
                </label>
                <label>
                    Jumlah
                    <input type="number" name="jumlah[]" min="1" step="1" inputmode="numeric" placeholder="1" value="<?= e($produk['jumlah']) ?>">
                </label>
                <label>
                    Harga satuan (Rp)
                    <input type="number" name="harga[]" min="0" step="1" inputmode="numeric" placeholder="25000" value="<?= e($produk['harga']) ?>">
                </label>
            </div>
        <?php endforeach; ?>
        
        <button type="submit">Hitung Total</button>
    </form>

    <?php if ($terkirim): ?>
        <section aria-live="polite">
            
            <?php if (!empty($error)): ?>
                
                <div class="alert">
                    <strong>Periksa kembali input:</strong>
                    <ul>
                        <?php foreach ($error as $pesan): ?>
                            <li><?= e($pesan) ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            <?php else: ?>
                <h2>Rincian Belanja</h2>
                
                <table>
                    <thead>
                        <tr><th>Produk</th><th class="angka">Jumlah</th><th class="angka">Harga</th><th class="angka">Total</th></tr>
                    </thead>
                    <tbody>
                        <?php foreach ($daftarProduk as $produk): ?>
                            <tr>
                                <td><?= e($produk['nama']) ?></td>
                                <td class="angka"><?= e($produk['jumlah']) ?></td>
                                <td class="angka"><?= e(rupiah($produk['harga'])) ?></td>
                                <td class="angka"><?= e(rupiah($produk['total'])) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                
                <div class="ringkasan">
                    <p><span>Subtotal</span><strong><?= e(rupiah($subtotal)) ?></strong></p>
                    <p><span>Diskon</span><strong><?= e(rupiah($diskon)) ?></strong></p>
                    <p class="total"><span>Total bayar</span><span><?= e(rupiah($totalBayar)) ?></span></p>
                </div>
            <?php endif; ?>
        </section>
    <?php endif; ?>
    <p class="catatan">Latihan ini hanya menghitung di server, belum menyimpan transaksi ke database.</p>
</main>
</body>
</html>

Alur program pada kode

8. Jalankan, Uji, dan Amati

Uji beberapa keadaan, bukan hanya satu contoh. Catat hasil yang Anda prediksi sebelum klik tombol.

Periksa request di browser

1. Tekan F12, pilih tab Network, lalu kirim form.
2. Pilih request ke halaman yang sama dan periksa Request Method: POST.
3. Lihat parameter form, status response, dan hasil HTML yang dikembalikan server.
4. Ingat: kode PHP diproses di server; browser menerima HTML hasilnya, bukan kode PHP mentah.

9. Mini Challenge

Ubah program kasir dan jelaskan keputusan yang Anda ambil:

1. Ubah batas diskon menjadi Rp150.000. Baris kondisi mana yang harus disesuaikan?
2. Buat diskon 5% untuk subtotal Rp50.000 sampai kurang dari Rp150.000, dan 10% untuk subtotal minimal Rp150.000. Gunakan if / elseif / else.
3. Tambahkan kolom kategori produk. Menurut Anda, apakah perlu validasi kategori di server? Mengapa?
4. Temukan satu input yang sengaja salah dan amati bagaimana program menanganinya.

10. Hubungkan dengan Project Semester

Ambil satu aktivitas utama dari sistem yang Anda pilih pada pertemuan pertama. Rancang dulu input, aturan proses, dan output—baru pikirkan tampilan.

Jangan langsung menyalin contoh kasir ke semua project. Ganti data dan aturan dengan kebutuhan sistem pilihan Anda. Tulis kondisi bisnisnya dengan jelas; misalnya “jika jadwal sudah terisi, pemesanan ditolak”.

11. Tugas Project Book — Minggu 3

1. Tetap gunakan sistem yang dipilih untuk project semester.
2. Pilih satu fitur dan buat tabel IPO: data input, aturan proses, serta output yang diharapkan.
3. Tulis urutan algoritma dalam bahasa sendiri, termasuk minimal satu kondisi dan satu proses yang berulang jika memang dibutuhkan.
4. Buat satu contoh PHP yang menjalankan alur tersebut di XAMPP. Kode boleh dibantu AI, tetapi Anda harus dapat menjelaskan tiap bagian yang dipakai.
5. Uji minimal dua skenario: satu kondisi terpenuhi dan satu kondisi tidak terpenuhi. Catat input dan hasilnya.
6. Tulis analisis tangan di Project Book, lalu foto/scan dengan jelas dan unggah ke Google Drive sesuai arahan dosen. Simpan buku dan file kode untuk pertemuan selanjutnya.

12. Quis Pertemuan 3

Jawab dengan bahasa sendiri. Yang dinilai adalah pemahaman, bukan hafalan istilah.

1. Jelaskan Input, Process, dan Output dengan contoh dari project pilihan Anda.
2. Apa yang dimaksud sequence? Mengapa urutan menghitung subtotal dan diskon perlu diperhatikan?
3. Apa perbedaan operator = dan === di PHP?
4. Jika subtotal tepat Rp100.000 dan syaratnya $subtotal >= 100000, apakah diskon diberikan? Jelaskan.
5. Untuk apa foreach digunakan pada contoh kasir?
6. Mengapa validasi perlu dilakukan di PHP walaupun input HTML sudah memakai type="number"?
7. Jelaskan alur satu request POST sejak form dikirim sampai output tampil di browser.

Quis/aktivitas mengikuti aturan kelas dan arahan dosen. Pastikan jawaban serta kode yang dikumpulkan dapat Anda jelaskan.

13. Ringkasan

Request membawa data. Logika PHP menentukan proses. Response mengirim hasilnya kembali.

Pertemuan berikutnya dapat membangun project lebih jauh dari alur yang sudah Anda rancang. Pastikan Anda menyimpan Project Book, kode, dan hasil pengujian.

Glosarium

Istilah bergaris putus-putus dapat diarahkan kursor atau difokuskan untuk melihat arti singkat.