ICT Practical Examination

Good Luck!

Friday, 6 March 2026

INSTRUCTIONS

  1. Create a static website based on a given case study.
  2. The website must be built using HTML for structure and Tailwind CSS for styling.
  3. Your final output should be a single HTML file containing all the necessary code, including the link to the Tailwind CSS CDN.
  4. The CDN can be accessed on the Tailwind CSS website. Link: Tailwind CDN
  5. Ensure your website is responsive and user-friendly.

Time Allotment

120 Minutes

Download PHP File

DOWNLOAD FILE

Case Study: Class Cash Management System

Context

You are the class treasurer. Currently, all cash records are written in a paper notebook that is easily lost or damaged. You want to build a simple web application to manage the class treasury funds. The system you build must be able to:

  1. save every income or expense entry into the database.
  2. display a list of all entered transactions in an organized table.
  3. modify or update an existing transaction if there was a mistake in the description or amount.
  4. delete a record if it is no longer needed.
  5. automatically calculate the total remaining balance.

Task

Complete the following features below:

  1. Set up the database based on the table below in XAMPP.
    Database Name: db_cash_yourname
    Table Name: class_cash
    Attribute Name Data type Notes
    id int PRIMARY KEY, AUTO_INCREMENT
    description VARCHAR(100) NOT NULL
    type VARCHAR(15) NOT NULL
    amount INT NOT NULL
    date DATE NOT NULL
  2. Establish a connection in your connection.php file.
  3. Analyze the structure of the index.php file to identify the form and table that will be modified in the task.
  4. Using the provided form input, use the INSERT INTO query to save data to your database.
  5. Display the transaction records from the database into an HTML table using a while loop.
  6. Determine the "type" styling in the HTML table using an if...else structure based on the following criteria.
    Criteria Styling Class
    Income bg-green-600 text-white
    Expense bg-red-600 text-white
  7. Update the data to modify existing transaction data (Update the amount or description).
    • Add an "Edit" button for each row.
    • When clicked, it should open a page with a form containing the existing data
    • Use the UPDATE query to save the changes back to the database.
  8. Add a delete button for each record to delete the existing record based on its id. Use DELETE FROM query to delete data.

Challenge Plus Point

Calculate and display the Final Balance below the table.

  1. Use the SUM() function in SQL Aggregate to calculate total income and expenses.
  2. SELECT SUM(column_name) AS alias_name FROM table_name WHERE condition;

  3. Calculate and display the final balance based on the formula below.
  4. final_balance = total_income - total_expense

  5. Use PHP number_format() (example: Rp 50.000)

Output References

Link Pengumpulan File Proyek

Unit Surakarta

Pengumpulan file project untuk unit Surakarta.

Submit here

Unit Sukoharjo

Pengumpulan file project untuk unit Sukoharjo.

Submit here

Unit Boyolali

Pengumpulan file project untuk unit Boyolali.

Submit here