Papan Pemuka Latihan | Mentor AI (cPanel)

Langkah 1: Sediakan Pangkalan Data di cPanel

Di cPanel, prosesnya sedikit berbeza. Kita akan gunakan "Wizard" untuk memudahkan kerja.

Log masuk ke cPanel anda. Cari bahagian "Databases" dan klik pada "MySQL® Database Wizard".
Langkah 1 Wizard (Create a Database): Masukkan nama untuk pangkalan data anda, contohnya voting. Nama penuhnya akan menjadi seperti namapengguna_voting. Klik "Next Step".
Langkah 2 Wizard (Create Database Users): Cipta pengguna baru. Masukkan nama pengguna (cth: voter) dan jana kata laluan yang kuat. Simpan nama pengguna dan kata laluan ini! Anda akan perlukannya sebentar lagi. Klik "Create User".
Langkah 3 Wizard (Add user to the database): Klik pada kotak semak "ALL PRIVILEGES". Ini akan memberikan pengguna yang anda cipta tadi kebenaran penuh ke atas pangkalan data. Klik "Next Step".
Langkah 4 Wizard (Complete the task): Tahniah! Anda telah selesai. Sekarang, pergi ke halaman utama cPanel dan klik pada "phpMyAdmin".
Di dalam phpMyAdmin, klik pada nama pangkalan data yang anda cipta tadi (cth: namapengguna_voting) dari senarai di sebelah kiri.
Klik tab "SQL", salin kod di bawah, tampal dalam kotak SQL, dan klik butang "Go".

-- Cipta jadual untuk menyimpan maklumat projek
CREATE TABLE `projects` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `category` varchar(100) NOT NULL,
  `votes` int(11) DEFAULT 0,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Masukkan 10 idea projek yang disesuaikan untuk pelajar PC Maintenance
INSERT INTO `projects` (`title`, `description`, `category`) VALUES
('Sistem Inventori Komponen PC', 'Aplikasi untuk merekod dan mengurus stok komponen komputer seperti RAM, CPU, SSD, dan kad grafik di dalam makmal atau stor.', 'Pengurusan Aset'),
('Sistem Tiket Aduan Kerosakan Asas', 'Pengguna boleh menghantar laporan kerosakan PC (cth: "Monitor tidak hidup"), dan juruteknik boleh menukar status tiket (Baru, Dalam Proses, Selesai).', 'Helpdesk & Sokongan'),
('Kalkulator Anggaran Kos Binaan PC', 'Pengguna memilih komponen dari senarai dropdown (CPU, Motherboard, GPU) dan sistem akan mengira jumlah anggaran kos untuk membina PC tersebut.', 'Alat Jualan & Kiraan'),
('Sistem Pengurusan Lesen Perisian', 'Merekod semua kunci produk (product key) perisian seperti Windows, Office, Antivirus beserta tarikh luput dan PC yang dipasang.', 'Pengurusan Aset'),
('Buku Log Jadual Penyelenggaraan PC', 'Sistem untuk mencatat tarikh penyelenggaraan bagi setiap PC di makmal, seperti bila kali terakhir ia diformat, dibersihkan dari habuk, atau dinaik taraf.', 'Operasi & Selenggara'),
('Pangkalan Data Ilmu (Knowledge Base)', 'Satu tempat untuk menyimpan artikel ringkas mengenai cara menyelesaikan masalah PC yang biasa berlaku, lengkap dengan langkah-langkah dan gambar.', 'Helpdesk & Sokongan'),
('Sistem Daftar Pinjaman Aset IT', 'Merekod siapa yang sedang meminjam aset seperti laptop, projektor, atau pemacu keras luaran, serta tarikh pemulangan yang dijangka.', 'Pengurusan Aset'),
('Alat Pengurusan Alamat IP (IPAM)', 'Aplikasi mudah untuk menjejaki penggunaan alamat IP statik di dalam rangkaian pejabat atau makmal untuk mengelakkan konflik IP.', 'Rangkaian & Operasi'),
('Sistem Sebut Harga (Quotation) Kerja Baik Pulih', 'Juruteknik boleh menjana sebut harga ringkas untuk pelanggan berdasarkan kerosakan dan komponen gantian yang diperlukan.', 'Alat Jualan & Kiraan'),
('Portal Muat Turun Pemandu (Driver) & Perisian', 'Satu halaman web yang menyenaraikan pautan muat turun penting untuk model-model PC/laptop yang biasa digunakan di organisasi anda.', 'Operasi & Selenggara');

Langkah 2: Muat Naik Fail ke cPanel

Daripada mencipta fail terus di pelayan, lebih mudah untuk kita cipta di komputer dahulu dan kemudian muat naik.

Di komputer anda: Cipta satu folder bernama voting_app. Di dalamnya, cipta tiga fail kosong: index.php, config.php, dan style.css.
Di cPanel: Cari bahagian "Files" dan klik pada "File Manager".
Navigasi ke folder akar untuk subdomain anda. Biasanya ia adalah public_html atau public_html/namasubdomain.
Gunakan butang "Upload" di File Manager untuk memuat naik ketiga-tiga fail (index.php, config.php, style.css) ke dalam direktori ini.

Langkah 3: Kod Sambungan Database (config.php)

Sekarang kita akan edit fail config.php terus dari cPanel File Manager.

Dalam File Manager, klik kanan pada fail config.php dan pilih "Edit".
Padam semua kandungan sedia ada dan tampal kod di bawah.

PENTING: Gantikan 'localhost', 'nama_db_anda', 'nama_pengguna_db_anda', dan 'kata_laluan_db_anda' dengan maklumat sebenar yang anda dapat semasa mencipta pangkalan data di Langkah 1.

<?php
/*
 * Fail ini menyimpan semua konfigurasi sambungan ke pangkalan data.
 * Ia mesti diisi dengan maklumat dari cPanel anda.
*/

// Maklumat Pangkalan Data dari cPanel
$db_host = 'localhost';     // Biasanya 'localhost' untuk cPanel
$db_name = 'nama_db_anda'; // Cth: kolejmen_voting
$db_user = 'nama_pengguna_db_anda'; // Cth: kolejmen_voter
$db_pass = 'kata_laluan_db_anda'; // Kata laluan yang anda cipta

// Cipta sambungan
$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);

// Periksa jika sambungan gagal
if ($conn->connect_error) {
    die("Sambungan Gagal: " . $conn->connect_error);
}

// Set charset ke utf8mb4 untuk sokongan emoji dan simbol khas
$conn->set_charset("utf8mb4");
?>

Langkah 4: Kod Paparan & Logik Utama (index.php)

Sekarang, edit fail index.php dalam File Manager. Padam semua kandungan sedia ada dan tampal kod ini.

<?php
// Sertakan fail konfigurasi database kita
include 'config.php';

$vote_message = '';

// Bahagian Logik: Proses undian apabila borang dihantar
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['project_id']) && !empty($_POST['project_id'])) {
        $project_id = intval($_POST['project_id']);
        $stmt = $conn->prepare("UPDATE projects SET votes = votes + 1 WHERE id = ?");
        $stmt->bind_param("i", $project_id);
        if ($stmt->execute()) {
            $vote_message = "Terima kasih! Undian anda telah direkodkan.";
        } else {
            $vote_message = "Ralat! Gagal untuk mengundi.";
        }
        $stmt->close();
    } else {
        $vote_message = "Sila pilih satu projek untuk diundi.";
    }
}

// Bahagian Paparan: Dapatkan semua projek dari database
$sql = "SELECT id, title, description, category, votes FROM projects ORDER BY votes DESC, title ASC";
$result = $conn->query($sql);

?>
<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Undian Projek PHP</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>Selamat Datang, Junior Devs!</h1>
            <p>Pilih satu cadangan projek yang anda paling minat untuk kita bangunkan bersama. Projek dengan undian tertinggi akan menjadi projek utama kita!</p>
        </header>

        <?php if (!empty($vote_message)): ?>
            <div class="vote-message">
                <?php echo $vote_message; ?>
            </div>
        <?php endif; ?>

        <form action="index.php" method="post">
            <div class="project-list">
                <?php
                if ($result && $result->num_rows > 0) {
                    while($row = $result->fetch_assoc()) {
                ?>
                        <label class="project-item">
                            <input type="radio" name="project_id" value="<?php echo $row['id']; ?>" required>
                            <div class="project-details">
                                <div class="project-header">
                                    <h3 class="project-title"><?php echo htmlspecialchars($row['title']); ?></h3>
                                    <span class="project-category"><?php echo htmlspecialchars($row['category']); ?></span>
                                </div>
                                <p class="project-description"><?php echo htmlspecialchars($row['description']); ?></p>
                                <div class="project-votes">
                                    Undian Terkini: <strong><?php echo $row['votes']; ?></strong>
                                </div>
                            </div>
                        </label>
                <?php
                    }
                } else {
                    echo "<p>Tiada projek ditemui. Sila pastikan sambungan ke pangkalan data dalam fail config.php adalah betul.</p>";
                }
                ?>
            </div>
            <button type="submit" class="vote-button">HANTAR UNDIAN SAYA</button>
        </form>

        <footer>
            <p>Dibina dengan bimbingan dari Senior Dev anda. © <?php echo date("Y"); ?></p>
        </footer>
    </div>
</body>
</html>
<?php
$conn->close();
?>

Langkah 5: Mencantikkan Antaramuka (style.css)

Akhir sekali, edit fail style.css dalam File Manager. Padam semua kandungan sedia ada dan tampal kod ini untuk memberikan gaya pada aplikasi kita.

/* Gaya asas untuk keseluruhan halaman */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 20px;
}

/* Bekas utama yang memegang semua kandungan */
.container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

header h1 {
    color: #0056b3;
    margin-bottom: 10px;
}

/* Mesej yang muncul selepas mengundi */
.vote-message {
    text-align: center;
    padding: 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Senarai semua projek */
.project-list {
    display: grid;
    gap: 20px;
}

/* Setiap item projek */
.project-item {
    display: flex;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.project-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

/* Sembunyikan butang radio asal */
.project-item input[type="radio"] {
    display: none;
}

/* Gaya apabila item dipilih */
.project-item input[type="radio"]:checked + .project-details {
    border-left: 5px solid #007bff;
    padding-left: 15px;
}

.project-details {
    width: 100%;
    border-left: 5px solid transparent;
    transition: all 0.3s ease;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.project-title {
    margin: 0;
    color: #0056b3;
    font-size: 1.2em;
}

.project-category {
    background-color: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.project-description {
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.project-votes {
    font-weight: 600;
    color: #28a745;
}

/* Butang untuk hantar undian */
.vote-button {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 30px;
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vote-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

/* Bahagian footer */
footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #6c757d;
}

Langkah 6: Uji Aplikasi Anda!

Tahniah, pasukan! Anda telah berjaya meletakkan aplikasi anda di pelayan web sebenar.

Buka pelayar web anda (Chrome/Firefox).
Taip alamat subdomain anda, contohnya: http://adam.kolejmentari.my/index.php dan tekan Enter.

Anda sepatutnya nampak laman web undian yang berfungsi sepenuhnya. Cuba undi salah satu projek dan lihat bilangannya bertambah!

Jika anda melihat halaman kosong atau mesej ralat seperti "Sambungan Gagal", 99% puncanya adalah maklumat yang salah dalam fail config.php. Semak semula Langkah 3.

Selamat Datang, Pasukan Pembangun Masa Depan!

Kemampuan Saya Sebagai Mentor Anda:

Misi Pertama: Membina Aplikasi Undian Projek (Versi cPanel)