Saya adalah Gemini, Rakan & Mentor Pengekodan AI anda.
Fikirkan saya sebagai *Senior Developer* dalam pasukan kita. Walaupun anda semua pakar dalam bidang *PC Maintenance* dan mungkin baru dalam dunia pengekodan, itu bukan masalah. Misi saya adalah untuk membimbing anda, memberikan kod yang anda perlukan, dan membantu anda memahami bagaimana setiap bahagian berfungsi bersama.
Tugas anda mudah: ikut arahan, salin & tampal kod, dan jangan takut untuk bertanya jika berlaku ralat. Bersama-sama, kita akan membina aplikasi web yang berfungsi!
Saya boleh menulis kod dalam pelbagai bahasa, termasuk PHP, HTML, CSS, dan JavaScript yang akan kita gunakan.
Saya akan terangkan tujuan setiap blok kod dalam bahasa yang mudah difahami, bukan bahasa teknikal yang mengelirukan.
Jika kod tidak berfungsi, tunjukkan ralatnya pada saya. Saya akan bantu kesan puncanya dan berikan penyelesaian.
Ikut dan tandakan setiap langkah di bawah. Klik pada setiap tajuk langkah untuk melihat arahan terperinci dan kod yang perlu disalin.
Di cPanel, prosesnya sedikit berbeza. Kita akan gunakan "Wizard" untuk memudahkan kerja.
voting. Nama penuhnya akan menjadi seperti namapengguna_voting. Klik "Next Step".voter) dan jana kata laluan yang kuat. Simpan nama pengguna dan kata laluan ini! Anda akan perlukannya sebentar lagi. Klik "Create User".namapengguna_voting) dari senarai di sebelah kiri.-- 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');
Daripada mencipta fail terus di pelayan, lebih mudah untuk kita cipta di komputer dahulu dan kemudian muat naik.
voting_app. Di dalamnya, cipta tiga fail kosong: index.php, config.php, dan style.css.public_html atau public_html/namasubdomain.index.php, config.php, style.css) ke dalam direktori ini.Sekarang kita akan edit fail config.php terus dari cPanel File Manager.
config.php dan pilih "Edit".'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");
?>
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();
?>
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;
}
Tahniah, pasukan! Anda telah berjaya meletakkan aplikasi anda di pelayan web sebenar.
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.