Berikut adalah contoh form sederhana menggunakan PHP untuk meng-upload foto/file, menyediakan multiple checkbox, dan select dropdown. Saya juga akan menyertakan cara untuk menyimpan data ke dalam database menggunakan mysqli_query.
1. Struktur Database
Pertama, kita akan membuat tabel untuk menyimpan data hasil upload. Misalnya, kita buat tabel dengan nama uploads yang memiliki kolom id, filename, checkboxes, dan selected_option.
CopyCREATE TABLE uploads (
id INT AUTO_INCREMENT PRIMARY KEY,
filename VARCHAR(255) NOT NULL,
checkboxes TEXT NOT NULL,
selected_option VARCHAR(100) NOT NULL
);
2. Form Upload
Berikut adalah kode HTML dan PHP untuk membuat form upload:
Copy<?php
// Koneksi ke database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$checkboxes = isset($_POST['checkboxes']) ? implode(",", $_POST['checkboxes']) : '';
$selected_option = $_POST['select_option'];
// Handle file upload
if (isset($_FILES['photo']) && $_FILES['photo']['error'] == 0) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["photo"]["name"]);
if (move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file)) {
$filename = basename($_FILES["photo"]["name"]);
// Simpan data ke database
$sql = "INSERT INTO uploads (filename, checkboxes, selected_option) VALUES (?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $filename, $checkboxes, $selected_option);
$stmt->execute();
echo "File uploaded and data saved successfully.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Form</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label for="photo">Upload Photo/File:</label>
<input type="file" name="photo" id="photo" required><br><br>
<label>Select Checkboxes:</label><br>
<input type="checkbox" name="checkboxes[]" value="Option 1"> Option 1<br>
<input type="checkbox" name="checkboxes[]" value="Option 2"> Option 2<br>
<input type="checkbox" name="checkboxes[]" value="Option 3"> Option 3<br><br>
<label for="select_option">Select an Option:</label>
<select name="select_option" id="select_option">
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<?php
// Tutup koneksi
$conn->close();
?>
3. Penjelasan Kode
- Koneksi Database: Menggunakan
mysqliuntuk menyambung ke database. - File Upload: Memeriksa apakah file ada dan tidak ada error, kemudian memindahkan file ke direktori tujuan.
- Mengumpulkan Data: Checkbox dikumpulkan menjadi string dengan pemisah koma.
- Menjalankan Query: Menyimpan data ke tabel
uploads. - HTML Form: Form HTML untuk upload file, checkbox, dan pilihan dropdown.
4. Catatan
- Pastikan Anda sudah membuat direktori
uploadsdi server Anda untuk menyimpan file yang di-upload. - Gantilah
your_database_namedengan nama database Anda. - Pastikan Anda juga telah mengatur izin yang tepat untuk folder yang digunakan untuk upload file.
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat form untuk upload file dengan checkbox dan dropdown selection menggunakan PHP dan MySQL.
Saya akan menambahkan fitur untuk mengedit data yang telah di-upload. Untuk itu, kita perlu melakukan beberapa penyesuaian, termasuk menambahkan halaman edit dan menampilkan data yang telah di-upload sebelumnya.
1. Struktur Tabel
Kita akan menggunakan tabel uploads yang telah didefinisikan sebelumnya. Tidak ada perubahan yang perlu dilakukan pada struktur tabel.
2. Halaman Utama untuk Menampilkan Data
Kita akan menampilkan semua entri dari tabel uploads dengan link untuk mengedit setiap entri. Berikut adalah kode untuk menampilkan data dan link edit:
Copy<?php
// Koneksi ke database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Mengambil semua data dari tabel uploads
$sql = "SELECT * FROM uploads";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uploaded Files</title>
</head>
<body>
<h1>Uploaded Files</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Filename</th>
<th>Checkboxes</th>
<th>Selected Option</th>
<th>Action</th>
</tr>
<?php if ($result->num_rows > 0): ?>
<?php while($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['filename']; ?></td>
<td><?php echo $row['checkboxes']; ?></td>
<td><?php echo $row['selected_option']; ?></td>
<td><a href="edit.php?id=<?php echo $row['id']; ?>">Edit</a></td>
</tr>
<?php endwhile; ?>
<?php else: ?>
<tr>
<td colspan="5">No records found</td>
</tr>
<?php endif; ?>
</table>
</body>
</html>
<?php
$conn->close();
?>
3. Halaman Edit (edit.php)
Sekarang kita akan membuat halaman edit.php yang akan memungkinkan pengguna untuk mengedit data yang telah di-upload:
Copy<?php
// Koneksi ke database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$id = $_GET['id'];
$data = null;
if ($id) {
// Mengambil data berdasarkan ID
$sql = "SELECT * FROM uploads WHERE id=?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_assoc();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$checkboxes = isset($_POST['checkboxes']) ? implode(",", $_POST['checkboxes']) : '';
$selected_option = $_POST['select_option'];
// Handle file upload (optional)
if (isset($_FILES['photo']) && $_FILES['photo']['error'] == 0) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["photo"]["name"]);
if (move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file)) {
$filename = basename($_FILES["photo"]["name"]);
// Update data ke database
$sql = "UPDATE uploads SET filename=?, checkboxes=?, selected_option=? WHERE id=?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sssi", $filename, $checkboxes, $selected_option, $id);
$stmt->execute();
echo "File uploaded and data updated successfully.";
} else {
echo "Sorry, there was an error uploading your file.";
}
} else {
// Update data tanpa meng-upload file
$sql = "UPDATE uploads SET checkboxes=?, selected_option=? WHERE id=?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ssi", $checkboxes, $selected_option, $id);
$stmt->execute();
}
}
// Tampilkan form dengan data yang ada
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Upload</title>
</head>
<body>
<h1>Edit Upload</h1>
<form action="" method="post" enctype="multipart/form-data">
<label for="photo">Upload New Photo/File (optional):</label>
<input type="file" name="photo" id="photo"><br><br>
<label>Select Checkboxes:</label><br>
<?php
$checkboxes = explode(',', $data['checkboxes']);
$options = ['Option 1', 'Option 2', 'Option 3'];
foreach ($options as $option) {
$checked = in_array($option, $checkboxes) ? 'checked' : '';
echo "<input type='checkbox' name='checkboxes[]' value='$option' $checked> $option<br>";
}
?><br>
<label for="select_option">Select an Option:</label>
<select name="select_option" id="select_option">
<option value="Option A" <?php if($data['selected_option'] == 'Option A') echo 'selected'; ?>>Option A</option>
<option value="Option B" <?php if($data['selected_option'] == 'Option B') echo 'selected'; ?>>Option B</option>
<option value="Option C" <?php if($data['selected_option'] == 'Option C') echo 'selected'; ?>>Option C</option>
</select><br><br>
<input type="submit" value="Update">
</form>
</body>
</html>
<?php
$stmt->close();
$conn->close();
?>
Penjelasan Kode Edit
- Pengambilan Data: Memeriksa ID yang dikirim sebagai parameter GET, dan mengambil data terkait dari database.
- Form dengan Data: Menampilkan form yang sudah terisi dengan data yang diambil dari database.
- Proses Update: Saat form dikirimkan, data akan diperbarui dalam tabel.
- File Upload: Jika ada file baru yang di-upload, itu juga akan ditangani.
4. Penggunaan
- Menampilkan Data: Saat membuka file utama, daftar upload akan ditampilkan dengan link untuk mengedit.
- Edit Data: Klik link edit akan membawa Anda ke halaman edit di mana Anda dapat memperbarui entri dan meng-upload file baru jika diperlukan.
Dengan cara ini, pengguna dapat dengan mudah memperbarui informasi yang telah di-upload sebelumnya. Pastikan untuk mengganti your_database_name dengan nama database Anda dan membuat folder uploads/ sesuai kebutuhan.
Referensi Lainnya :
- https://drive.google.com/file/d/13orWusNkcZQ4zL_Qy-atZlvR9sXl3ku8/view?usp=classroom_web&authuser=0
- https://drive.google.com/file/d/1dNk-_zj3GloRu6ZB96XeGXCMQ-tapBfm/view?usp=classroom_web&authuser=0
- https://drive.google.com/file/d/1eqpZ1vtVESCx9JvbOOYNLoYeWZ4nCpot/view?usp=classroom_web&authuser=0
- https://drive.google.com/file/d/1ZytJEN2asGe1WZaw7XJoxWykRbQuUXPW/view?usp=classroom_web&authuser=0
