Pembahasan UKK RPL Paket 2 Aplikasi Todolist Tahun 2025

Ujian Kompetensi Keahlian (UKK) merupakan salah satu tahapan penting bagi siswa jurusan Rekayasa Perangkat Lunak (RPL) untuk menguji pemahaman dan keterampilan mereka dalam pengembangan perangkat lunak. Salah satu topik yang sering muncul dalam UKK RPL adalah pembuatan Aplikasi Todolist yang menguji kemampuan siswa dalam pemrograman, logika proses kerja, serta antarmuka pengguna.

Learningku Indonesia dalam artikel ini, kita akan melakukan Pembahasan Soal UKK RPL Paket 2 Aplikasi Todolist, mulai dari analisis soal, langkah-langkah penyelesaian, hingga teknik pemrograman yang bisa diterapkan. Panduan ini diharapkan dapat membantu siswa dalam memahami konsep yang diujikan serta meningkatkan kesiapan mereka dalam menghadapi UKK.

Gabung Ke Grup Learningku Indonesia di Telegram : https://t.me/learningku

Ringkasan Soal UKK RPL Paket 2

1. Identifikasi Kebutuhan Aplikasi

Sebelum mulai coding, penting untuk mengidentifikasi fitur utama yang akan diimplementasikan, yaitu:

Menambah tugas dengan atribut seperti nama, status (selesai/belum selesai), prioritas, dan tanggal.
Menampilkan tugas dengan format yang mudah dibaca.
Mengedit tugas untuk mengubah detail yang diperlukan.
Menandai tugas sebagai selesai agar pengguna bisa melihat progresnya.
Menghapus tugas yang sudah tidak diperlukan.

2. Desain Struktur Data

Untuk menyimpan tugas, diperlukan struktur data yang efisien, misalnya menggunakan list atau array. Setiap tugas akan memiliki atribut berikut:

Nama tugas
Status (selesai/belum selesai)
Prioritas (opsional)
Tanggal

3. Rancang Logika Aplikasi

Logika aplikasi harus jelas dan sistematis. Sebagai langkah awal, siswa dapat membuat flowchart untuk menggambarkan proses berikut:

Menambah tugas
Menampilkan daftar tugas
Menghapus tugas tertentu
Mengedit tugas atau menandainya sebagai selesai

Pembahasan UKK RPL Paket 2 – `Struktur File`

Berikut merupakan struktur file pada UKK RPL Paket 2 :

allTodo.php
formAddTodo.php
formEditTodo.php
function.php
fungsiCRUD.php
header.php
index.php
nav.php
style.css
todoBelumSelesai.php
todoSelesai.php

Pembahasan UKK RPL Paket 2 – `index.php`

Berikut adalah penjelasan dari kode index.php pada proyek Todolist App:

<?php
include "function.php";
include "fungsiCRUD.php";
?>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Todolist App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <?php include "header.php"; ?>
    <div class="container">
        <?php
        include "nav.php";
        include "formAddTodo.php";
        ?>
        <div class="row">
            <!-- todolist -->
            <div class="col-md-8">
                <?php include "allTodo.php" ?>
                <br>
            </div>
            <div class="col-md-4">
                <?php include "todoSelesai.php" ?>
                <br>
                <?php include "todoBelumSelesai.php" ?>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

File index.php ini merupakan halaman utama dari aplikasi Todolist yang menggunakan PHP dan Bootstrap untuk tampilan antarmuka. Berikut adalah penjelasan bagian per bagian:

1. Inklusi File PHP

<?php
include "function.php";
include "fungsiCRUD.php";
?>

Kode ini menyertakan (include) dua file:

function.php → Kemungkinan berisi fungsi umum yang digunakan di seluruh aplikasi.
fungsiCRUD.php → Kemungkinan berisi fungsi-fungsi CRUD (Create, Read, Update, Delete) untuk mengelola daftar tugas (todolist).

2. Struktur HTML Dasar

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Todolist App</title>

Bagian ini mendefinisikan dokumen HTML standar dengan pengaturan karakter (utf-8) dan tampilan responsif (viewport).

3. Menghubungkan Bootstrap dan CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="style.css">

Kode ini menyertakan:

Bootstrap 5.3.3 untuk tampilan yang lebih rapi dan responsif.
Font Awesome 6.7.2 untuk ikon yang digunakan dalam aplikasi.
style.css sebagai file CSS tambahan untuk kustomisasi tampilan.

4. Memuat Header dan Navigasi

<?php include "header.php"; ?>
<div class="container">
    <?php
    include "nav.php";
    include "formAddTodo.php";
    ?>

Bagian ini:

header.php → Kemungkinan berisi judul atau logo aplikasi.
nav.php → Memuat navigasi atau menu.
formAddTodo.php → Formulir untuk menambahkan tugas baru ke todolist.

5. Menampilkan Daftar Todo

<div class="row">
    <!-- todolist -->
    <div class="col-md-8">
        <?php include "allTodo.php" ?>
        <br>
    </div>
    <div class="col-md-4">
        <?php include "todoSelesai.php" ?>
        <br>
        <?php include "todoBelumSelesai.php" ?>
    </div>
</div>

Bagian ini membagi halaman menjadi dua kolom:

Kolom 8 (besar) → Memuat allTodo.php, yang kemungkinan berisi daftar semua tugas.
Kolom 4 (kecil) → Memuat dua bagian:
- todoSelesai.php → Daftar tugas yang sudah selesai.
- todoBelumSelesai.php → Daftar tugas yang masih belum selesai.

6. Memuat Bootstrap JavaScript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Kode ini mengimpor Bootstrap JavaScript untuk fitur-fitur seperti modal, dropdown, dan interaksi lainnya.

Pembahasan UKK RPL Paket 2 – `function.php`

Kode PHP berikut digunakan untuk menghubungkan ke database MySQL dalam aplikasi Todolist App. Berikut adalah penjelasan rinci bagian per bagian:

Kode Lengkap

<?php 

$con = mysqli_connect("localhost", "root", "", "db_todolist_ukkp2");

if(!$con) {
    die("Koneksi Gagal: ". mysqli_connect_error());
}
?>

Penjelasan

1. Koneksi ke Database

$con = mysqli_connect("localhost", "root", "", "db_todolist_ukkp2");

mysqli_connect(host, user, password, database) adalah fungsi bawaan PHP untuk menghubungkan ke database MySQL.
Parameter yang digunakan:
- "localhost" → Server database, dalam kasus ini berjalan secara lokal.
- "root" → Nama pengguna database (default untuk XAMPP/MAMP/LAMP).
- "" (kosong) → Kata sandi (default kosong di localhost, tetapi harus diatur di server produksi).
- "db_todolist_ukkp2" → Nama database yang digunakan dalam proyek Todolist App.

2. Cek Koneksi

if(!$con) {
    die("Koneksi Gagal: ". mysqli_connect_error());
  }

if(!$con) → Mengecek apakah koneksi ke database gagal.
die("Koneksi Gagal: ". mysqli_connect_error());
- Jika koneksi gagal, eksekusi program akan dihentikan.
- Pesan error akan ditampilkan, misalnya: Koneksi Gagal: Access denied for user 'root'@'localhost'
mysqli_connect_error() → Mengambil pesan error spesifik dari MySQL jika koneksi gagal.

Pembahasan UKK RPL Paket 2 – `header.php`

Berikut adalah kode HTML untuk header pada aplikasi todolist :

<div class="container-fluid wrap bg-warning" style="padding: 2%">
    <div class="row">
        <div align="center">
            <h1><strong>Aplikasi Todolist</strong></h1>
            <p>Nama Peserta - No Peserta</p>
        </div>
    </div>
</div>

Pembahasan UKK RPL Paket 2 – `nav.php`

Kita akan membuat navigasi dengan nama file nav.php. Terdapat button yang digunakan untuk memanggil modal tambah data. Dengan data-bs-target="#modalAddTodo", yang akan dibaca oleh modal dengan id tersebut.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Aplikasi Todolist</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <button type="button" class="btn btn-primary" data-bs-target="#modalAddTodo" data-bs-toggle="modal">
                        Tambah Todo
                    </button>
                </li>
            </ul>
        </div>
    </div>
</nav><br>

Pembahasan UKK RPL Paket 2 – `formAddTodo.php` (modal)

Melanjutkan dari nav.php diatas, karena terdapat button dengan data-bs-target="#modalAddTodo", maka kita lanjutkan untuk kode formAddTodo.php yang akan muncul sebagai formulir modal.

Jangan lupa untuk memberikan name pada setiap input yang sudah dibuat.
Pada div modal terdapat id="modalAddTodo", yang akan digunakan agar ketika tombol tambah data di klik maka modal akan muncul.
button dengan name="tambahTodo" akan digunakan pada method POST di fungsiCRUD.php.

<div class="modal fade" id="modalAddTodo" tabindex="-1" aria-labelledby="modalAddTodoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modalAddTodoLabel">Tambah Todo</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="POST">
                    <div class="form-group">
                        <input type="text" class="form-control mb-2" name="taskname" placeholder="Masukan nama todo"
                            required>
                        <select class="form-select mb-2" name="status" required>
                            <option selected disabled>Pilih Status</option>
                            <option value="selesai">Selesai</option>
                            <option value="belum selesai">Belum Selesai</option>
                        </select>
                        <select class="form-select mb-2" name="prioritas" required>
                            <option selected disabled>Pilih Prioritas</option>
                            <option value="tinggi">Tinggi</option>
                            <option value="sedang">Sedang</option>
                            <option value="rendah">Rendah</option>
                        </select>
                        <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" name="tanggal"
                            class="form-control mb-2" placeholder="Masukan Tanggal" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" name="tambahTodo" class="btn btn-primary">Tambah Todo</button>
                    </div>
                </form>

            </div>

        </div>
    </div>
</div>

#Fungsi Create pada AddTodo

File berikut di letakan di dalam fungsiCRUD.php.

<?php
include "function.php";

// fungsi tambah todolist
if (isset($_POST["tambahTodo"])) {
    $taskname = $con->real_escape_string($_POST['taskname']);
    $status = $con->real_escape_string($_POST['status']);
    $prioritas = $con->real_escape_string($_POST['prioritas']);
    $tanggal = $con->real_escape_string($_POST['tanggal']);

    // simpan ke table todolist
    $sql = "INSERT INTO todolist (taskname, status, prioritas, tanggal) VALUES ('$taskname', '$status', '$prioritas', '$tanggal')";
    $query = $con->query($sql);
    var_dump($query);
    if ($query === true) {
        header("Location: index.php");
    } else {
        echo "
            <script> alert ('Tambah Todolist Gagal'); </script>
        ";
    }
}


// fungsi edit todolist

// fungsi hapus todolist
<?

Kode ini adalah bagian dari fungsi untuk menambahkan tugas (todo) ke dalam database. Berikut penjelasan detailnya:

1. Memasukkan File function.php

include "function.php";

Menyertakan file function.php, yang kemungkinan berisi koneksi database atau fungsi tambahan yang diperlukan.

2. Mengecek Jika Tombol “Tambah Todo” Ditekan

if (isset($_POST["tambahTodo"])) {

Memeriksa apakah tombol “Tambah Todo” telah ditekan.
Jika form dikirimkan dengan tombol Tambah Todo, maka proses penambahan tugas akan dieksekusi.

3. Mengambil Data dari Form Input dan Melakukan Escape String

$taskname = $con->real_escape_string($_POST['taskname']);
$status = $con->real_escape_string($_POST['status']);
$prioritas = $con->real_escape_string($_POST['prioritas']);
$tanggal = $con->real_escape_string($_POST['tanggal']);

$con->real_escape_string() digunakan untuk mencegah SQL Injection, yaitu serangan yang bisa merusak atau mencuri data dari database.
Mengambil input pengguna dari form:
- taskname → Nama tugas.
- status → Status tugas (“selesai” atau “belum selesai”).
- prioritas → Tingkat prioritas (“tinggi”, “sedang”, “rendah”).
- tanggal → Tanggal tugas.

4. Menyimpan Data ke Database

$sql = "INSERT INTO todolist (taskname, status, prioritas, tanggal) VALUES ('$taskname', '$status', '$prioritas', '$tanggal')";
$query = $con->query($sql);
var_dump($query);

Membuat query SQL untuk menyimpan data ke tabel todolist.
Menjalankan query dengan $con->query($sql);.
var_dump($query); → Digunakan untuk menampilkan hasil query dalam bentuk true atau false, berguna untuk debugging.

5. Redirect ke index.php Jika Berhasil

if ($query === true) { 
  header("Location: index.php");
}

Jika query berhasil ($query === true), maka pengguna akan diarahkan kembali ke halaman utama (index.php).

6. Menampilkan Pesan Jika Gagal

else {
    echo "
        <script> alert ('Tambah Todolist Gagal'); </script>
    ";
}

Jika query gagal, maka muncul notifikasi alert “Tambah Todolist Gagal”.

Pembahasan UKK RPL Paket 2 – `allTodo.php`

<div class="card border-1 border-warning shadow-lg">
    <div class="card-body">
        <h4 class="text-center">Todolist</h4>
        <ul class="list-group">
            <?php
            $sql = "SELECT * FROM todolist";
            $result = $con->query($sql);
            while ($data = $result->fetch_array()) { ?>
                <li class="list-group-item border-bottom border-warning">
                    <div class="row justify-content-between">
                        <div class="col-md-9 text-start">
                      <?php if ($data['status'] === 'selesai') { ?>
                                <span class="fw-bold position-relative"><?= $data['taskname'] ?>
                                    <i class="position-absolute top-0 start-100 badge bg-success fa-solid fa-check"
                                        style="margin-left: 10px;"> </i><br>
                                </span>
                      <?php } else { ?>
                                <span class="fw-bold position-relative"><?= $data['taskname'] ?>
                                    <i class="position-absolute top-0 start-100 badge bg-danger fa-solid fa-xmark"
                                        style="margin-left: 10px;"> </i><br>
                                </span>
                      <?php } ?>
                          <span class="fw-normal span-date badge bg-primary">Date: <?= $data['tanggal'] ?></span> | 
                      <?php if($data['prioritas'] === 'tinggi') { ?>
                        <span class="text-capitalize fw-normal span-date badge bg-danger"><?= $data['prioritas'] ?></span>
                      <?php } else if($data['prioritas'] === 'sedang') { ?>
                       <span class="text-capitalize fw-normal span-date badge bg-warning"><?= $data['prioritas'] ?></span>
                      <?php } else if($data['prioritas'] === 'rendah') { ?>
                       <span class="text-capitalize fw-normal span-date badge bg-success"><?= $data['prioritas'] ?></span>
                            <?php } ?>
                        </div>
                        <div class="col-md-3 text-end">
                            <a class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#modalEditTodo<?= $data['id']; ?>"><i class="fa-regular fa-pen-to-square"> </i></a>
                            <a href="fungsiCRUD.php?hapus=<?= $data['id'] ?>" onclick="return confirm('Apakah Anda Yakin?')" class="btn btn-sm btn-danger"><i class="fa-solid fa-trash"> </i></a>
                        </div>  
                    </div>
                    <?php include "formEditTodo.php" ?>
                </li>
            <?php } ?>
        </ul>
    </div>
</div>

1. Mengambil Data dari Database

$sql = "SELECT * FROM todolist";
$result = $con->query($sql);

Query SQL → Mengambil semua data dari tabel todolist.
$result = $con->query($sql); → Mengeksekusi query dan menyimpan hasilnya dalam variabel $result.

2. Menampilkan Data dalam Bentuk List

while ($data = $result->fetch_array()) { ?>
    <li class="list-group-item border-bottom border-warning">

while ($data = $result->fetch_array()) → Melakukan perulangan untuk menampilkan setiap tugas dalam database.
Setiap tugas dimasukkan ke dalam elemen <li> dengan gaya Bootstrap.

3. Menampilkan Nama Tugas dan Status

<?php if ($data['status'] === 'selesai') { ?>
    <span class="fw-bold position-relative"><?= $data['taskname'] ?>
        <i class="position-absolute top-0 start-100 badge bg-success fa-solid fa-check" style="margin-left: 10px;"></i><br>
    </span>
<?php } else { ?>
    <span class="fw-bold position-relative"><?= $data['taskname'] ?>
        <i class="position-absolute top-0 start-100 badge bg-danger fa-solid fa-xmark" style="margin-left: 10px;"></i><br>
    </span>
<?php } ?>

Jika status = “selesai”, maka:
- Nama tugas ditampilkan tebal (fw-bold).
- Ikon centang hijau (fa-check) ditampilkan.
Jika status bukan “selesai”, maka:
- Nama tugas tetap tebal (fw-bold).
- Ikon X merah (fa-xmark) ditampilkan.

4. Menampilkan Tanggal dan Prioritas

<span class="fw-normal span-date badge bg-primary">Date: <?= $data['tanggal'] ?></span> | 
<?php if($data['prioritas'] === 'tinggi') { ?>
    <span class="text-capitalize fw-normal span-date badge bg-danger"><?= $data['prioritas'] ?></span>
<?php } else if($data['prioritas'] === 'sedang') { ?>
    <span class="text-capitalize fw-normal span-date badge bg-warning"><?= $data['prioritas'] ?></span>
<?php } else if($data['prioritas'] === 'rendah') { ?>
    <span class="text-capitalize fw-normal span-date badge bg-success"><?= $data['prioritas'] ?></span>
<?php } ?>

Menampilkan tanggal tugas dalam badge berwarna biru (bg-primary).
Menampilkan prioritas tugas dengan warna berbeda:
- Tinggi → Merah (bg-danger).
- Sedang → Kuning (bg-warning).
- Rendah → Hijau (bg-success).

5. Tombol Edit dan Hapus

<div class="col-md-3 text-end">
    <a class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#modalEditTodo<?= $data['id']; ?>"><i class="fa-regular fa-pen-to-square"> </i></a>
    <a href="fungsiCRUD.php?hapus=<?= $data['id'] ?>" onclick="return confirm('Apakah Anda Yakin?')" class="btn btn-sm btn-danger"><i class="fa-solid fa-trash"> </i></a>
</div>

Tombol Edit:
- Menggunakan modal Bootstrap untuk mengedit tugas.
- Modal dipicu dengan data-bs-target="#modalEditTodo<?= $data['id']; ?>".
Tombol Hapus:
- Menghapus tugas dengan mengakses fungsiCRUD.php?hapus=id_tugas.
- Menampilkan konfirmasi sebelum menghapus (return confirm('Apakah Anda Yakin?')).

6. Menyertakan Form Edit

<?php include "formEditTodo.php" ?>

Form edit dimuat dari file formEditTodo.php.
Modal edit hanya akan muncul saat tombol edit ditekan.

#Fungsi Delete pada AllTodo

Kode berikut ini di letakan pada file fungsiCRUD.php .

// fungsi tambah todolist

// fungsi edit todolist

// fungsi hapus todolist

if (isset($_GET['hapus'])) {
    $id = $_GET['hapus'];
    $query = mysqli_query($con, "DELETE FROM todolist WHERE id='$id'");
    header("Location: index.php");
}

Kode berikut digunakan untuk menghapus data dari tabel todolist berdasarkan ID tugas (id). Berikut penjelasan detailnya:

📌 Penjelasan Kode

if (isset($_GET['hapus'])) {

Memeriksa apakah ada parameter hapus dalam URL (GET).
Jika parameter hapus ada, berarti pengguna ingin menghapus sebuah tugas.

$id = $_GET['hapus'];

Mengambil nilai id dari parameter hapus di URL.
Misalnya, jika pengguna mengakses: fungsiCRUD.php?hapus=5 maka $id = 5 (tugas dengan ID 5 akan dihapus).

$query = mysqli_query($con, "DELETE FROM todolist WHERE id='$id'");

Menjalankan query SQL untuk menghapus data dari database.
DELETE FROM todolist WHERE id='$id' →
Artinya, hapus baris dalam tabel todolist yang memiliki ID sesuai dengan $id.

header("Location: index.php");

Mengalihkan pengguna kembali ke halaman utama (index.php) setelah tugas dihapus.
Ini berguna untuk memperbarui tampilan daftar tugas tanpa perlu me-refresh secara manual.

Pembahasan UKK RPL Paket 2 – `formEditTodo.php` (modal)

Melanjutkan dari tombol edit di allTodo.php diatas, karena terdapat button dengan data-bs-target="#modalEditTodo<?= $data['id']; ?>", maka kita lanjutkan untuk kode formEditTodo.php yang akan muncul sebagai formulir modal.

Jangan lupa untuk memberikan name pada setiap input yang sudah dibuat.
Pada div modal terdapat id="modalEditTodo", yang akan digunakan agar ketika tombol tambah data di klik maka modal akan muncul.
button dengan name="editTodo" akan digunakan pada method POST di fungsiCRUD.php.

<div class="modal fade" id="modalEditTodo<?= $data['id'] ?>" tabindex="-1" aria-labelledby="modalEditTodoLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modalEditTodoLabel">Edit Todo</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="POST">
                    <div class="form-group">
                        <input type="text" class="form-control mb-2" value="<?= $data['taskname'] ?>" name="taskname"
                            placeholder="Masukan nama todo" required>
                        <input type="text" name="id" value="<?= $data['id'] ?>" hidden>
                        <select class="form-select mb-2" name="status" required>
                            <option selected disabled>Pilih Status</option>
                            <option <?php if ($data['status'] === 'selesai') { ?> selected <?php } ?> value="selesai">
                                Selesai</option>
                            <option <?php if ($data['status'] === 'belum selesai') { ?> selected <?php } ?>
                                value="belum selesai">Belum Selesai</option>
                        </select>
                        <select class="form-select mb-2" name="prioritas" required>
                            <option selected disabled>Pilih Prioritas</option>
                            <option <?php if ($data['prioritas'] === 'tinggi') { ?> selected <?php } ?> value="tinggi">
                                Tinggi</option>
                            <option <?php if ($data['prioritas'] === 'sedang') { ?> selected <?php } ?> value="sedang">
                                Sedang</option>
                            <option <?php if ($data['prioritas'] === 'rendah') { ?> selected <?php } ?> value="rendah">
                                Rendah</option>
                        </select>
                        <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" name="tanggal"
                            class="form-control mb-2" placeholder="Masukan Tanggal" value="<?= $data['tanggal'] ?>"
                            required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" name="editTodo" class="btn btn-primary">Edit Todo</button>
                    </div>
                </form>

            </div>

        </div>
    </div>
</div>

#Fungsi Edit pada Edit Todo

File berikut di letakan di dalam fungsiCRUD.php.

// fungsi add todo

// fungsi edit todo

if (isset($_POST["id"])) {
    $id = $_POST['id'];
    $taskname = $con->real_escape_string($_POST['taskname']);
    $status = $con->real_escape_string($_POST['status']);
    $prioritas = $con->real_escape_string($_POST['prioritas']);
    $tanggal = $con->real_escape_string($_POST['tanggal']);

    // simpan ke table todolist
    $sql = "UPDATE todolist SET taskname='$taskname', status='$status', prioritas='$prioritas', tanggal='$tanggal' WHERE id='$id'";
    $query = $con->query($sql);
    var_dump($query);
    if ($query === true) {
        header("Location: index.php");
    } else {
        echo "
            <script> alert ('Edit Todolist Gagal'); </script>
        ";
    }
}

// fungsi delete todo

Pembahasan UKK RPL Paket 2 – `todoSelesai.php`

<div class="card border-1 border-success shadow-lg">
    <div class="card-body">
        <h4 class="text-center">Todolist Selesai</h4>
        <ul class="list-group">
            <?php
            $sql = "SELECT * FROM todolist WHERE status='selesai'";
            $result = $con->query($sql);
            while ($data = $result->fetch_array()) { ?>
                <li class="list-group-item border-bottom border-success">
                    <?= $data['taskname'] ?>
                </li>
            <?php } ?>
        </ul>
    </div>
</div>

Pembahasan UKK RPL Paket 2 – `todoBelumSelesai.php`

<div class="card border-1 border-warning shadow-lg">
    <div class="card-body">
        <h4 class="text-center">Todolist Belum Selesai</h4>
        <ul class="list-group">
            <?php
            $sql = "SELECT * FROM todolist WHERE status='belum selesai'";
            $result = $con->query($sql);
            while ($data = $result->fetch_array()) { ?>
                <li class="list-group-item border-bottom border-warning">
                    <?= $data['taskname'] ?>
                </li>
            <?php } ?>
        </ul>
    </div>
</div>

Pembahasan UKK RPL Paket 2 – `style.css`

.list-group-item {
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.span-date {
    font-size: 12px;
}

#Full Source Code

Untuk Source Code UKK RPL Paket 2 dengan studi kasus membuat Aplikasi Todolist, bisa anda dapatkan di link berikut : https://github.com/wahyupambudi/ukk-rpl-paket-2

Kesimpulan

Pembahasan Uji Kompetensi Keahlian (UKK) RPL Paket 2 tentang Aplikasi Todolist tahun 2025 mencakup berbagai aspek teknis dalam pengembangan aplikasi berbasis web. Dalam proyek ini, peserta diuji dalam keterampilan pemrograman menggunakan PHP, MySQL, dan Bootstrap, serta implementasi konsep CRUD (Create, Read, Update, Delete) untuk mengelola daftar tugas (todolist)

Pembahasan UKK RPL Paket 2 Aplikasi Todolist Tahun 2025

Table of Contents

Ringkasan Soal UKK RPL Paket 2

Pembahasan UKK RPL Paket 2 – `Struktur File`

Pembahasan UKK RPL Paket 2 – `index.php`

Pembahasan UKK RPL Paket 2 – `function.php`

Pembahasan UKK RPL Paket 2 – `header.php`

Pembahasan UKK RPL Paket 2 – `nav.php`

Pembahasan UKK RPL Paket 2 – `formAddTodo.php` (modal)

#Fungsi Create pada AddTodo

Pembahasan UKK RPL Paket 2 – `allTodo.php`

#Fungsi Delete pada AllTodo

Pembahasan UKK RPL Paket 2 – `formEditTodo.php` (modal)

#Fungsi Edit pada Edit Todo

Pembahasan UKK RPL Paket 2 – `todoSelesai.php`

Pembahasan UKK RPL Paket 2 – `todoBelumSelesai.php`

Pembahasan UKK RPL Paket 2 – `style.css`

#Full Source Code

Kesimpulan

Comments

Tinggalkan Balasan Batalkan balasan

Table of Contents

Ringkasan Soal UKK RPL Paket 2

Pembahasan UKK RPL Paket 2 – Struktur File

Pembahasan UKK RPL Paket 2 – index.php

Pembahasan UKK RPL Paket 2 – function.php

Pembahasan UKK RPL Paket 2 – header.php

Pembahasan UKK RPL Paket 2 – nav.php

Pembahasan UKK RPL Paket 2 – formAddTodo.php (modal)

#Fungsi Create pada AddTodo

Pembahasan UKK RPL Paket 2 – allTodo.php

#Fungsi Delete pada AllTodo

Pembahasan UKK RPL Paket 2 – formEditTodo.php (modal)

#Fungsi Edit pada Edit Todo

Pembahasan UKK RPL Paket 2 – todoSelesai.php

Pembahasan UKK RPL Paket 2 – todoBelumSelesai.php

Pembahasan UKK RPL Paket 2 – style.css

#Full Source Code

Kesimpulan

Comments

Tinggalkan Balasan Batalkan balasan

Pembahasan UKK RPL Paket 2 – `Struktur File`

Pembahasan UKK RPL Paket 2 – `index.php`

Pembahasan UKK RPL Paket 2 – `function.php`

Pembahasan UKK RPL Paket 2 – `header.php`

Pembahasan UKK RPL Paket 2 – `nav.php`

Pembahasan UKK RPL Paket 2 – `formAddTodo.php` (modal)

Pembahasan UKK RPL Paket 2 – `allTodo.php`

Pembahasan UKK RPL Paket 2 – `formEditTodo.php` (modal)

Pembahasan UKK RPL Paket 2 – `todoSelesai.php`

Pembahasan UKK RPL Paket 2 – `todoBelumSelesai.php`

Pembahasan UKK RPL Paket 2 – `style.css`