Menguasai Pemrograman Web Kelas 11 Semester 2: Contoh Soal dan Pembahasan Mendalam

Dunia pemrograman web terus berkembang pesat, dan bagi siswa kelas 11 semester 2, pemahaman yang kokoh tentang konsep-konsep fundamental menjadi kunci untuk melangkah ke jenjang yang lebih tinggi. Semester ini biasanya menjadi titik krusial di mana siswa diperkenalkan pada teknologi yang lebih canggih dan praktik pengembangan yang lebih realistis. Artikel ini akan membahas secara mendalam contoh-contoh soal pemrograman web yang umum ditemui di kelas 11 semester 2, lengkap dengan penjelasan dan strategi penyelesaiannya.

Memahami Ruang Lingkup Materi

Sebelum menyelami contoh soal, penting untuk mengingatkan kembali materi yang biasanya dibahas di semester 2 kelas 11. Fokus utama seringkali tertuju pada sisi server (backend) dan bagaimana data dikelola serta disajikan ke sisi klien (frontend). Materi-materi kunci meliputi:

• Konsep Dasar Database: Relasi antar tabel, normalisasi, dan bahasa kueri SQL (Structured Query Language).
• Bahasa Pemrograman Sisi Server: Umumnya PHP, namun Python (dengan framework seperti Flask/Django) atau Node.js juga bisa menjadi pilihan.
• Interaksi dengan Database: Membuat, membaca, memperbarui, dan menghapus (CRUD – Create, Read, Update, Delete) data dari database menggunakan bahasa pemrograman sisi server.
• Konsep Keamanan Web Dasar: Penanganan input pengguna, pencegahan serangan umum seperti SQL Injection.
• Pengembangan Aplikasi Web Sederhana: Mengintegrasikan frontend (HTML, CSS, JavaScript) dengan backend dan database untuk membangun fungsionalitas dinamis.

Contoh Soal dan Pembahasan

Mari kita bedah beberapa contoh soal yang mencakup aspek-aspek di atas.

Soal 1: Desain Basis Data Sederhana

Soal: Anda diminta untuk merancang skema basis data untuk sebuah sistem perpustakaan sederhana. Sistem ini perlu menyimpan informasi tentang buku dan peminjam.

• Tabel buku:
  • id_buku (Primary Key, Integer, Auto Increment)
  • judul (VARCHAR)
  • penulis (VARCHAR)
  • penerbit (VARCHAR)
  • tahun_terbit (YEAR)
  • isbn (VARCHAR, Unique)
• Tabel peminjam:
  • id_peminjam (Primary Key, Integer, Auto Increment)
  • nama_lengkap (VARCHAR)
  • alamat (TEXT)
  • nomor_telepon (VARCHAR)
  • email (VARCHAR, Unique)

Pertanyaan:
a. Tuliskan perintah SQL untuk membuat kedua tabel tersebut.
b. Buatlah sebuah tabel tambahan, peminjaman, yang akan mencatat transaksi peminjaman buku. Tabel ini harus menghubungkan tabel buku dan peminjam.
c. Tuliskan perintah SQL untuk menyisipkan (INSERT) setidaknya 3 data ke dalam tabel buku dan 2 data ke dalam tabel peminjam.
d. Tuliskan perintah SQL untuk menampilkan judul buku, nama peminjam, dan tanggal peminjaman untuk semua buku yang dipinjam. (Asumsikan tabel peminjaman memiliki kolom tanggal_pinjam dan tanggal_kembali).

Pembahasan:

a. Perintah SQL untuk membuat tabel buku dan peminjam:

-- Membuat tabel buku
CREATE TABLE buku (
    id_buku INT AUTO_INCREMENT PRIMARY KEY,
    judul VARCHAR(255) NOT NULL,
    penulis VARCHAR(255) NOT NULL,
    penerbit VARCHAR(255),
    tahun_terbit YEAR,
    isbn VARCHAR(20) UNIQUE
);

-- Membuat tabel peminjam
CREATE TABLE peminjam (
    id_peminjam INT AUTO_INCREMENT PRIMARY KEY,
    nama_lengkap VARCHAR(255) NOT NULL,
    alamat TEXT,
    nomor_telepon VARCHAR(20),
    email VARCHAR(255) UNIQUE
);

• Penjelasan:
  • CREATE TABLE nama_tabel (...) digunakan untuk membuat tabel baru.
  • INT AUTO_INCREMENT PRIMARY KEY mendefinisikan kolom sebagai bilangan bulat yang akan bertambah secara otomatis dan menjadi kunci utama tabel.
  • VARCHAR(panjang) digunakan untuk menyimpan teks dengan panjang tertentu.
  • TEXT digunakan untuk menyimpan teks yang lebih panjang.
  • YEAR untuk menyimpan tahun.
  • UNIQUE memastikan setiap nilai dalam kolom tersebut unik.
  • NOT NULL memastikan kolom tersebut tidak boleh kosong.

b. Tabel peminjaman yang menghubungkan buku dan peminjam:

Untuk menghubungkan tabel buku dan peminjam, kita perlu membuat foreign key. Tabel peminjaman akan memiliki id_buku dan id_peminjam sebagai foreign key.

-- Membuat tabel peminjaman
CREATE TABLE peminjaman (
    id_peminjaman INT AUTO_INCREMENT PRIMARY KEY,
    id_buku INT,
    id_peminjam INT,
    tanggal_pinjam DATE NOT NULL,
    tanggal_kembali DATE,
    FOREIGN KEY (id_buku) REFERENCES buku(id_buku) ON DELETE CASCADE,
    FOREIGN KEY (id_peminjam) REFERENCES peminjam(id_peminjam) ON DELETE CASCADE
);

• Penjelasan:
  • id_peminjaman adalah kunci utama untuk tabel ini.
  • id_buku dan id_peminjam adalah kolom yang akan menyimpan nilai dari kunci utama tabel buku dan peminjam secara berurutan.
  • FOREIGN KEY (nama_kolom_fk) REFERENCES tabel_induk(nama_kolom_pk) mendefinisikan foreign key.
  • ON DELETE CASCADE adalah opsi yang akan menghapus semua baris di tabel peminjaman jika baris terkait di tabel buku atau peminjam dihapus.

c. Perintah SQL untuk menyisipkan data:

-- Menyisipkan data ke tabel buku
INSERT INTO buku (judul, penulis, penerbit, tahun_terbit, isbn) VALUES
('Laskar Pelangi', 'Andrea Hirata', 'Bentang Pustaka', 2005, '978-602-8889-01-1'),
('Bumi Manusia', 'Pramoedya Ananta Toer', 'Hasta Mitra', 1980, '978-979-759-057-3'),
('Filosofi Teras', 'Henry Manampiring', 'Kompas', 2018, '978-602-412-559-8');

-- Menyisipkan data ke tabel peminjam
INSERT INTO peminjam (nama_lengkap, alamat, nomor_telepon, email) VALUES
('Budi Santoso', 'Jl. Merdeka No. 10, Jakarta', '081234567890', '[email protected]'),
('Siti Aminah', 'Jl. Bahagia No. 5, Bandung', '087654321098', '[email protected]');

• Penjelasan:
  • INSERT INTO nama_tabel (kolom1, kolom2, ...) VALUES (nilai1, nilai2, ...) digunakan untuk menambahkan baris baru ke tabel.
  • Kita bisa menyisipkan banyak baris sekaligus dengan memisahkan setiap set nilai dengan koma.

d. Menampilkan data peminjaman:

Untuk menampilkan data yang melibatkan lebih dari satu tabel, kita perlu menggunakan JOIN.

-- Menampilkan judul buku, nama peminjam, dan tanggal peminjaman
SELECT
    b.judul,
    p.nama_lengkap,
    pj.tanggal_pinjam
FROM
    peminjaman pj
JOIN
    buku b ON pj.id_buku = b.id_buku
JOIN
    peminjam p ON pj.id_peminjam = p.id_peminjam;

• Penjelasan:
  • SELECT kolom1, kolom2, ... memilih kolom yang ingin ditampilkan.
  • FROM nama_tabel_utama alias_utama menentukan tabel utama dan memberikannya alias (misalnya pj untuk peminjaman).
  • JOIN nama_tabel_lain alias_lain ON kondisi_join menggabungkan tabel lain berdasarkan kondisi yang sesuai. Dalam kasus ini, kita menggabungkan peminjaman dengan buku menggunakan id_buku, dan peminjaman dengan peminjam menggunakan id_peminjam.
  • Penggunaan alias (pj, b, p) membuat kueri lebih ringkas dan mudah dibaca.

Soal 2: Logika Pemrograman Sisi Server (PHP)

Soal: Anda diminta untuk membuat skrip PHP sederhana yang akan menerima input nama dari pengguna melalui formulir HTML, kemudian menampilkan pesan sambutan.

File HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Sambutan</title>
</head>
<body>
    <h2>Masukkan Nama Anda</h2>
    <form action="proses_sambutan.php" method="post">
        <label for="nama">Nama:</label><br>
        <input type="text" id="nama" name="nama"><br><br>
        <input type="submit" value="Kirim">
    </form>
</body>
</html>

File PHP (proses_sambutan.php):

<?php
// Memeriksa apakah data nama telah dikirimkan melalui metode POST
if (isset($_POST)) 
    // Mengambil nilai nama dari input formulir dan membersihkannya dari potensi karakter berbahaya
    $nama = htmlspecialchars($_POST);

    // Menampilkan pesan sambutan
    echo "<h1>Selamat Datang, " . $nama . "!</h1>";
    echo "<p>Terima kasih telah mengunjungi halaman kami.</p>";
 else 
    // Jika tidak ada data nama yang dikirim
    echo "<h1>Terjadi Kesalahan</h1>";
    echo "<p>Silakan kembali ke formulir dan masukkan nama Anda.</p>";

?>

Pertanyaan:
a. Jelaskan cara kerja formulir HTML dalam mengirimkan data ke skrip PHP.
b. Jelaskan fungsi isset() dan $_POST dalam skrip PHP.
c. Mengapa digunakan fungsi htmlspecialchars()? Berikan contoh potensial serangan yang dapat dicegah oleh fungsi ini.
d. Modifikasi skrip PHP agar jika pengguna tidak memasukkan nama (kolom nama kosong), akan muncul pesan kesalahan yang spesifik.

Pembahasan:

a. Cara kerja formulir HTML:

• Formulir HTML (<form>) mendefinisikan bagaimana data akan dikumpulkan dari pengguna.
• Atribut action="proses_sambutan.php" menentukan bahwa data yang dikirim dari formulir ini akan diproses oleh skrip proses_sambutan.php.
• Atribut method="post" menentukan metode pengiriman data. Metode POST mengirimkan data secara tersembunyi dalam permintaan HTTP, berbeda dengan metode GET yang menampilkan data di URL.
• Setiap elemen input di dalam formulir (<input>) yang memiliki atribut name akan mengirimkan nilainya. Dalam kasus ini, input dengan name="nama" akan mengirimkan teks yang dimasukkan pengguna ke dalam server.

b. Fungsi isset() dan $_POST:

• $_POST: Ini adalah variabel superglobal di PHP yang digunakan untuk mengumpulkan data yang dikirimkan melalui metode HTTP POST. Kunci dari array ini adalah nilai dari atribut name pada elemen input formulir. Jadi, $_POST akan berisi nilai yang dimasukkan pengguna ke dalam input field dengan name="nama".
• isset(): Fungsi ini digunakan untuk memeriksa apakah sebuah variabel sudah diatur (memiliki nilai) dan tidak NULL. Dalam konteks ini, isset($_POST) memeriksa apakah data dengan kunci ‘nama’ telah dikirimkan oleh formulir dan memiliki nilai. Ini penting untuk mencegah error jika pengguna mencoba mengakses skrip PHP secara langsung tanpa melalui formulir.

c. Fungsi htmlspecialchars():

• Fungsi htmlspecialchars() mengonversi karakter khusus menjadi entitas HTML. Ini adalah langkah keamanan penting untuk mencegah serangan Cross-Site Scripting (XSS).
• Contoh Potensial Serangan XSS:
  Misalkan pengguna memasukkan kode JavaScript berbahaya ke dalam kolom nama, seperti:
  <script>alert('Anda telah diretas!');</script>
  Jika skrip PHP hanya menampilkan $nama tanpa sanitasi, kode JavaScript tersebut akan dieksekusi di browser pengguna yang melihat halaman hasil.
  Dengan htmlspecialchars($_POST), input di atas akan diubah menjadi:
  <script>alert('Anda telah diretas!');</script>
  Browser akan menampilkannya sebagai teks biasa, bukan mengeksekusinya sebagai kode.

d. Modifikasi skrip PHP untuk validasi input kosong:

<?php
// Memeriksa apakah data nama telah dikirimkan melalui metode POST
if (isset($_POST)) 
    // Mengambil nilai nama dari input formulir
    $nama = $_POST;

    // Validasi jika nama kosong
    if (empty(trim($nama)))  // trim() menghapus spasi di awal dan akhir
        echo "<h1>Peringatan</h1>";
        echo "<p>Nama tidak boleh kosong. Silakan masukkan nama Anda.</p>";
     else 
        // Membersihkan nama dari potensi karakter berbahaya
        $nama_aman = htmlspecialchars($nama);

        // Menampilkan pesan sambutan
        echo "<h1>Selamat Datang, " . $nama_aman . "!</h1>";
        echo "<p>Terima kasih telah mengunjungi halaman kami.</p>";
    
 else 
    // Jika tidak ada data nama yang dikirim
    echo "<h1>Terjadi Kesalahan</h1>";
    echo "<p>Silakan kembali ke formulir dan masukkan nama Anda.</p>";

?>

• Penjelasan Modifikasi:
  • Kami menambahkan sebuah blok if (empty(trim($nama))) setelah mengambil nilai $nama.
  • trim($nama) digunakan untuk menghapus spasi kosong di awal dan akhir string $nama. Ini memastikan bahwa jika pengguna hanya memasukkan spasi, itu tetap dianggap sebagai input kosong.
  • empty() memeriksa apakah variabel kosong atau belum diatur.
  • Jika nama kosong, pesan peringatan yang spesifik ditampilkan. Jika tidak kosong, barulah htmlspecialchars() digunakan dan pesan sambutan ditampilkan.

Soal 3: Interaksi Database dengan PHP (CRUD)

Soal: Anda memiliki database dengan tabel produk (id_produk, nama_produk, harga, stok). Buatlah skrip PHP untuk menampilkan daftar produk dari database.

Asumsikan Anda sudah memiliki koneksi ke database (misalnya menggunakan PDO atau MySQLi).

Struktur Tabel produk:

• id_produk (INT, Primary Key, Auto Increment)
• nama_produk (VARCHAR)
• harga (DECIMAL)
• stok (INT)

Kode PHP (tampilkan_produk.php):

<?php
// Konfigurasi Database (Contoh menggunakan PDO)
$host = 'localhost';
$db   = 'nama_database_anda'; // Ganti dengan nama database Anda
$user = 'root';
$pass = ''; // Ganti dengan password database Anda jika ada
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = ;

try 
    $pdo = new PDO($dsn, $user, $pass, $options);

    // 1. Mengambil data produk dari database
    $stmt = $pdo->query("SELECT id_produk, nama_produk, harga, stok FROM produk ORDER BY nama_produk ASC");
    $produk = $stmt->fetchAll();

    // 2. Menampilkan data dalam bentuk tabel HTML
    echo "<h2>Daftar Produk</h2>";
    if (count($produk) > 0) 
        echo "<table border='1'>";
        echo "<tr><th>ID</th><th>Nama Produk</th><th>Harga</th><th>Stok</th></tr>";
        foreach ($produk as $row) 
            echo "<tr>";
            echo "<td>" . $row . "</td>";
            echo "<td>" . htmlspecialchars($row) . "</td>"; // Sanitasi output
            echo "<td>Rp " . number_format($row, 2, ',', '.') . "</td>";
            echo "<td>" . $row . "</td>";
            echo "</tr>";
        
        echo "</table>";
     else 
        echo "<p>Belum ada produk yang ditambahkan.</p>";
    

 catch (PDOException $e) 
    // Menangani error koneksi atau query
    echo "Error: " . $e->getMessage();

?>

Pertanyaan:
a. Jelaskan bagian konfigurasi database dan tujuan dari $dsn serta $options dalam contoh PDO.
b. Jelaskan fungsi $pdo->query() dan $stmt->fetchAll().
c. Mengapa htmlspecialchars() tetap digunakan pada nama_produk saat ditampilkan, meskipun data berasal dari database?
d. Apa yang akan terjadi jika tabel produk kosong? Bagaimana skrip menangani kasus ini?
e. Jika Anda ingin menambahkan fitur "Tambah Produk Baru", jelaskan langkah-langkah utama yang perlu dilakukan (konsep, bukan kode lengkap).

Pembahasan:

a. Konfigurasi Database dan Tujuan $dsn, $options:

• Konfigurasi Database: Variabel $host, $db, $user, $pass, dan $charset menyimpan informasi kredensial untuk terhubung ke server database.
• $dsn (Data Source Name): String yang berisi informasi tentang database yang akan dihubungkan. Formatnya bervariasi tergantung driver database, namun untuk MySQL, umumnya mysql:host=nama_host;dbname=nama_database;charset=set_karakter. Ini memberi tahu PHP driver mana yang digunakan, di server mana, dan database apa yang dituju.
• $options: Array yang berisi pengaturan tambahan untuk koneksi PDO.
  • PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION: Mengatur agar PDO melempar PDOException saat terjadi error database. Ini sangat berguna untuk debugging karena Anda bisa menangkap errornya.
  • PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC: Mengatur agar hasil kueri secara default dikembalikan sebagai array asosiatif (nama kolom sebagai kunci), bukan array numerik.
  • PDO::ATTR_EMULATE_PREPARES => false: Menonaktifkan emulasi prepared statements, menggunakan prepared statements asli dari driver database, yang umumnya lebih aman dan efisien.

b. Fungsi $pdo->query() dan $stmt->fetchAll():

• $pdo->query("SQL_QUERY"): Metode ini digunakan untuk menjalankan kueri SQL yang tidak memerlukan parameter dinamis (atau jika Anda tidak menggunakan prepared statements). Ia mengembalikan objek PDOStatement jika kueri berhasil. Dalam contoh ini, query() digunakan untuk mengambil semua data dari tabel produk.
• $stmt->fetchAll(): Metode ini dipanggil pada objek PDOStatement ($stmt). Ia mengambil semua baris hasil dari kueri yang dieksekusi dan mengembalikannya sebagai array. Karena kita mengatur PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, setiap baris dalam array yang dikembalikan adalah array asosiatif di mana kunci adalah nama kolom.

c. Penggunaan htmlspecialchars() pada data dari database:

Meskipun data berasal dari database, penggunaan htmlspecialchars() tetap penting untuk keamanan. Ada beberapa alasan:

1. Data yang Disalahgunakan: Data yang masuk ke database bisa saja disisipkan dengan sengaja atau tidak sengaja dalam format yang mengandung karakter HTML/JavaScript berbahaya. Misalnya, jika ada bug di proses penambahan produk yang tidak melakukan sanitasi dengan benar, karakter <script> bisa masuk ke kolom nama_produk.
2. Konsistensi Keamanan: Menerapkan sanitasi pada semua output, terlepas dari sumbernya, adalah praktik keamanan yang baik. Ini menciptakan lapisan pertahanan yang konsisten.
3. Pencegahan XSS: Sama seperti pada contoh sebelumnya, ini mencegah kode JavaScript berbahaya yang mungkin tersimpan di database dieksekusi di browser pengguna.

d. Penanganan Tabel produk Kosong:

Jika tabel produk kosong, maka $stmt->fetchAll() akan mengembalikan array kosong (). Skrip menangani ini dengan kondisi:

if (count($produk) > 0) 
    // Tampilkan tabel
 else 
    echo "<p>Belum ada produk yang ditambahkan.</p>";

• count($produk) akan menghasilkan 0 jika array $produk kosong.
• Dalam kasus ini, blok else akan dieksekusi, menampilkan pesan "Belum ada produk yang ditambahkan." yang informatif bagi pengguna.

e. Langkah-langkah Utama untuk Fitur "Tambah Produk Baru":

1. Buat Formulir HTML Baru:

   • Buat file HTML (misalnya tambah_produk_form.html atau tambah_produk.php dengan logika menampilkan formulir).
   • Formulir ini akan berisi input field untuk nama_produk, harga, dan stok.
   • Atur method="post" dan action mengarah ke skrip PHP yang akan memproses data.

2. Buat Skrip PHP Pemroses (tambah_produk_proses.php):

   • Ambil Data dari Formulir: Gunakan $_POST, $_POST, $_POST.
   • Validasi Input:
     • Periksa apakah input tidak kosong.
     • Pastikan harga dan stok adalah angka (gunakan is_numeric() atau casting).
     • Sanitasi input string (misalnya nama_produk) menggunakan htmlspecialchars() atau metode lain yang sesuai jika diperlukan.
   • Koneksi Database: Buat koneksi ke database (sama seperti pada contoh soal 3).
   • Siapkan Kueri SQL INSERT: Gunakan prepared statements untuk keamanan. Kueri akan terlihat seperti: INSERT INTO produk (nama_produk, harga, stok) VALUES (?, ?, ?).
   • Eksekusi Kueri: Bind parameter ke prepared statement dan eksekusi.
   • Arahkan Ulang (Redirect): Setelah berhasil menambahkan, arahkan pengguna kembali ke halaman daftar produk (tampilkan_produk.php) menggunakan header redirect (header("Location: tampilkan_produk.php"); exit;).
   • Tangani Error: Jika terjadi error saat validasi atau eksekusi kueri, tampilkan pesan kesalahan yang sesuai.

Kesimpulan

Menguasai pemrograman web di kelas 11 semester 2 melibatkan pemahaman yang kuat tentang database, logika sisi server, dan bagaimana keduanya berinteraksi. Contoh-contoh soal di atas mencakup konsep-konsep fundamental seperti desain basis data, manipulasi data SQL, penanganan input pengguna di PHP, dan interaksi dasar dengan database.

Dengan berlatih mengerjakan soal-soal semacam ini dan memahami logika di baliknya, siswa dapat membangun fondasi yang kuat untuk proyek-proyek yang lebih kompleks dan mempersiapkan diri untuk tantangan di dunia pengembangan web profesional. Ingatlah selalu pentingnya keamanan (seperti sanitasi input dan penggunaan prepared statements) dalam setiap pengembangan aplikasi web. Teruslah bereksperimen, belajar, dan membangun!