Kuis Sederhana Bagian 3 | Halaman Tambah Pertanyaan
Pada dua tutorial kuis php sederhana sebelumnya telah dijelaskan cara menampilkan pertanyaan dan jawaban acak dan juga cara untuk menyimpan hasil jawaban kuis pengguna ke database. Di tutorial kuis bagian ketiga ini akan dijelaskan cara untuk menambahkan pertanyaan dan jawaban. Dimana sebelumnya soal dan jawaban dimasukkan ke database secara manual menggunakan PhpMyAdmin.
Video Tutorial Form Tambah Soal Kuis PHP
Jika Anda belum mengikuti dua tutorial sebelumnya silahkan kunjungi tutorial tersebut terlebih dahulu untuk menghindari kebingungan di tutorial ini, karena ada beberapa file yang sudah dibuat di tutorial sebelumnya.
Membuat Halaman Daftar Pertanyaan
Pertama buatlah halaman untuk menampilkan daftar pertanyaan. Halaman ini adalah halaman yang sederhana yang mana pertanyaan ditampilkan dalam sebuah tabel. Sudah terdapat beberapa tutorial sebelumnya untuk menampilkan data dari database termasuk cara menampilkan data dari beberapa tabel.
Buatlah file pertanyaan.php di bawah untuk menampilkan daftar soal
<?php
require_once 'cek-akses.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Daftar Pertanyaan</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
vertical-align: top;
padding: 8px;
}
table th {
text-align: left;
}
table ul {
margin: 0;
}
.benar {
color: green;
}
</style>
</head>
<body>
<h2>Daftar Pertanyaan</h2>
<p>
<a href="tambah-pertanyaan.php">Tambah Pertanyaan</a>
</p>
<table>
<thead>
<tr>
<th>Pertanyaan</th>
<th>Skor</th>
<th>Jawaban</th>
</tr>
</thead>
<tbody>
<?php
$pdo = require 'koneksi.php';
$query = $pdo->prepare("SELECT * FROM pertanyaan");
$query->execute();
while($data = $query->fetch()) {
?>
<tr>
<td><?php echo htmlentities($data['deskripsi']);?></td>
<td><?php echo htmlentities($data['skor']);?></td>
<td>
<?php
$queryJawaban = $pdo->prepare("SELECT * FROM jawaban WHERE id_pertanyaan=:id");
$queryJawaban->execute(array('id' => $data['id']));
echo '<ol type="A">';
while($jawaban = $queryJawaban->fetch()) {
echo '<li '.($jawaban['benar'] == 1 ? 'class="benar"' : '').'>'.htmlentities($jawaban['deskripsi']).'</li>';
}
echo '</ol>';
?>
</td>
</tr>
<?php }?>
</tbody>
</table>
</body>
</html>Mulai dari baris ke-48 kita membuat koneksi ke database menggunakan PDO. Kemudian membuat SQL query untuk membaca semua soal dari table pertanyaan. Di baris ke-58 dibuat SQL query baru untuk mengambil jawaban untuk setiap soal dan jawaban ditampilkan menggunakan ordered list <ol>. Jika jawaban benar akan ditampilkan menggunakan warna hijau.
Membuat Form Tambah Pertanyaan
Di file pertanyaan.php di atas sudah ditambahkan link ke form tambah pertanyaan seperti <a href="tambah-pertanyaan.php">Tambah Pertanyaan</a>. Maka buatlah file tambah-pertanyaan.php dan tambahkan kode HTML untuk membuat form tambah pertanyaan seperti di bawah.
<!DOCTYPE html>
<html>
<head>
<title>Tambah Pertanyaan</title>
</head>
<body>
<h2>Tambah Pertanyaan</h2>
<form action="" method="POST">
<p>
<label>Deskripsi</label><br>
<textarea cols="50" rows="6" name="deskripsi" required></textarea>
</p>
<p>
<label>Skor</label><br>
<input type="number" name="skor" required/>
</p>
<div>
<strong>Jawaban</strong>
<table>
<thead>
<tr>
<td>Deskripsi</td>
<td>Benar</td>
<td></td>
</tr>
</thead>
<tbody id="jawaban">
<tr>
<td><input type="text" name="jawaban[1]" required/></td>
<td><input type="radio" name="benar" value="1" required/></td>
<td></td>
</tr>
<tr>
<td><input type="text" name="jawaban[2]" required/></td>
<td><input type="radio" name="benar" value="2"/></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td><button type="button" onclick="tambah()">+</button></td>
</tr>
</tfoot>
</table>
<p>
<button type="submit">Simpan</button>
</p>
</div>
</form>
</body>
</html>Di bagian jawaban pada form di atas, sudah disediakan dua input untuk menambahkan dua jawaban. Pertanyaan pilihan ganda memerlukan minimal 2 jawaban. Perlu diperhatikan bagian input diberi nama dengan kurung siku seperti <input type="text" name="jawaban[1]" required/> dan juga di sebelahnya ditambahkan radio button benar <input type="radio" name="benar" value="1" required/>. Value dari radio button ini adalah nilai di dalam kurung siku nama input jawaban. Hal ini dilakukan agar dapat mengetahui jawaban mana yang benar.
Membuat Fungsi JavaScript Tambah Jawaban
Pada form di atas juga telah ada tombol tambah + yang memanggil fungsi tambah() pada saat tombol diklik. Buatlah fungsi JavaScript di bawah untuk menambahkan lebih dari 2 jawaban. Tambahkan di bagian bawah form.
<script>
let jumlah = 2;
function tambah() {
jumlah ++;
let content = '<td><input type="text" name="jawaban[' + jumlah + ']" required/></td>'+
'<td><input type="radio" name="benar" value="' + jumlah + '" required/></td>'+
'<td><button type="button" onclick="hapus('+jumlah+')">×</button></td>';
const tr = document.createElement('tr');
tr.innerHTML = content;
tr.setAttribute('id', 'jawaban-' + jumlah);
document.getElementById('jawaban').append(tr);
}
function hapus(id) {
document.getElementById('jawaban-'+id).remove();
}
</script>Fungsi tambah() akan membuat baris baru di table jawaban pada form di atas. Menggunakan fungsi document.createElement untuk membuat tr dan menambahkan attribute id untuk mempermudah menghapus baris table yang ditambahkan, menggunakan fungsi hapus() di bawahnya.
Menyimpan Pertanyaan ke Database
Setelah form tambah pertanyaan selesai maka kita perlu menyimpan pertanyaan ke database seleteh user mengklik tombol simpan. Tambahkan kode php di bawah di bagian paling atas file tambah-pertanyaan.php.
<?php
require_once 'cek-akses.php';
if(!empty($_POST)) {
$pdo = require 'koneksi.php';
try {
$pdo->beginTransaction();
$query = $pdo->prepare("INSERT INTO pertanyaan (deskripsi, skor)
VALUES (:deskripsi, :skor)");
$query->execute(array(
'deskripsi' => $_POST['deskripsi'],
'skor' => $_POST['skor']
));
$idPertanyaan = $pdo->lastInsertId();
foreach($_POST['jawaban'] as $index => $jawaban) {
$benar = 0;
if ($index == $_POST['benar']) {
$benar = 1;
}
$queryJawaban = $pdo->prepare("INSERT INTO jawaban (deskripsi, benar, id_pertanyaan)
VALUES (:deskripsi, :benar, :id_pertanyaan)");
$queryJawaban->execute(array(
'deskripsi' => $jawaban,
'benar' => $benar,
'id_pertanyaan' => $idPertanyaan
));
}
$pdo->commit();
header("Location: pertanyaan.php");
} catch(Exception $e) {
$pdo->rollback();
}
}
?>Di baris ke-4 dibuat koneksi ke database menggunakan PDO seperti sebelumnya. Kemudian kita perlu menyimpan data soal dan jawaban ke tabel masing masing dalam satu transaksi. Maka di baris selanjutnya kita membuat try catch block. Pada baris ke-6 transaksi database dimulai, kemudian data pertanyaan disimpan pada baris 7-12. Di baris 13 id pertanyaan diambil untuk digunakan menyimpan semua jawaban. Semua jawaban disimpan di dalam foreach. Jika index dari jawaban sama dengan nilai $_POST['benar'] maka jawaban akan diset sebagai jawaban benar dan sisanya salah.
Kesimpulan
Untuk membuat halaman tambah pertanyaan kuis kita perlu membuat form html terlebih dahulu untuk menerima data dari pengguna. Kemudian membuat kode JavaScript untuk menambahkan lebih dari 2 jawaban pilihan ganda. Setelah form dibuat maka kita mengunakan kode php untuk menyimpan pertanyaan dan jawaban dalam satu transaksi database agar semua jawaban dan pertanyaan tersimpan. Selamat mencoba. Jika ada pertanyaan silahkan gunakan kolom komentar di bawah.