PWPB | Upload Image
Upload Image Pada PHP
Assalamualaikum, bagaimana kabarnya teman teman semua sudah lama saya tidak upload blog terbaru karena ada beberapa kesibukan akhir akhir ini. Pada blog ini saya akan kembali menjelaskan tentang Pembutan sistem upload image menggunakan Bahasa Pemogramman PHP. Langsung saja siapkan project yang CRUD kemarin di text-editor masing masing.
Langkah Pertama
Tambah kolom file pada tabel siswa di database, dengan struktur seperti gambar di bawah ini :
setelah itu buatlah folder image di dalam folder assets untuk menyimpan gambar yang akan di upload
Langkah Kedua
1. tambahkan attribut enctype = "multipart/form-data" pada form di v_tambah, attribut tersebut digunakan ketika form yang kita buat memiliki form upload (input type file).
2. tambahkan kodingan di bawah ini ke dalam file v_tambah untuk mengupload gambar atau mengedit gambar yang telah di upload
Langkah Pertama
Tambah kolom file pada tabel siswa di database, dengan struktur seperti gambar di bawah ini :
setelah itu buatlah folder image di dalam folder assets untuk menyimpan gambar yang akan di upload
Langkah Kedua
1. tambahkan attribut enctype = "multipart/form-data" pada form di v_tambah, attribut tersebut digunakan ketika form yang kita buat memiliki form upload (input type file).
2. tambahkan kodingan di bawah ini ke dalam file v_tambah untuk mengupload gambar atau mengedit gambar yang telah di upload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" type="text/css" href="Assets/css/style_tambah.css">
</head>
<body>
<?php
$action = 'tambah.php';
$disabled = '';
$judul = 'Input Data Siswa';
if (!empty($siswa)){
$action = 'edit.php';
$disabled = 'readonly';
$judul = 'Edit Data Siswa';
}
?>
<center>
<!-- action diisi sesuai kondisi diatas -->
<form action="<?= $action ?>" method="POST" enctype="multipart/form-data">
<fieldset>
<legend><?= $judul ?></legend>
<table align="center" width="100%">
<tr>
<td>Foto</td>
<td>
<?php if ($action == "edit.php"){ ?>
<img width="100" height="110" src="<?php echo base_url()?>/Assets/image/<?php echo @$siswa['file']?>">
<br>
<input type="hidden" name="foto" value="<?php echo @$siswa['file']?>">
<?php } ?>
<input type="file" name="foto" class="border" autocomplete="off"></td>
</tr>
<tr>
<td><label for="nis">NIS</label></td>
<td><input autocomplete="off" required type="text" name="nis" value="<?= @$siswa['nis'] ?>" <?= $disabled ?>></td>
</tr>
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input autocomplete="off" required type="text" name="nama_lengkap" value="<?= @$siswa['nama_lengkap'] ?>"></td>
</tr>
<tr>
<td><label for="jenis_kelamin">Jenis Kelamin</label></td>
<td>
<input autocomplete="off" required type="radio" name="jenis_kelamin" value="L" <?= @$siswa['jenis_kelamin'] == 'L' ? 'checked' : '' ?>>Laki - Laki
<input autocomplete="off" required type="radio" name="jenis_kelamin" value="P" <?= @$siswa['jenis_kelamin'] == 'P' ? 'checked' : '' ?>>Perempuan
</td>
</tr>
<tr>
<td><label for="kelas">Kelas</label></td>
<td>
<select required name="kelas" class="select1">
<option value="XI - RPL1" <?= @$siswa['kelas'] == 'XI - RPL1' ? 'selected' : '' ?>>XI RPL 1</option>
<option value="XI - RPL2" <?= @$siswa['kelas'] == 'XI - RPL2' ? 'selected' : '' ?>>XI RPL 2</option>
<option value="XI - RPL3" <?= @$siswa['kelas'] == 'XI - RPL3' ? 'selected' : '' ?>>XI RPL 3</option>
</select>
</td>
</tr>
<tr>
<td><label for="jurusan">Jurusan</label></td>
<td><input autocomplete="off" required type="text" name="jurusan" value="<?= @$siswa['jurusan'] ?>"></td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td><textarea required name="alamat"cols="40" rows="10"><?= @$siswa['alamat'] ?></textarea></td>
</tr>
<tr>
<td><label for="golongan_darah">Golongan Darah</label></td>
<td>
<select required name="golongan_darah" class="select2">
<option value="A" <?= @$siswa['golongan_darah'] == 'A' ? 'selected' : '' ?>>A</option>
<option value="AB" <?= @$siswa['golongan_darah'] == 'AB' ? 'selected' : '' ?>>AB</option>
<option value="B" <?= @$siswa['golongan_darah'] == 'B' ? 'selected' : '' ?>>B</option>
<option value="O" <?= @$siswa['golongan_darah'] == 'O' ? 'selected' : '' ?>>O</option>
</select>
</td>
</tr>
<tr>
<td><label for="nama_ibu">Nama Ibu</label></td>
<td><input autocomplete="off" required type="text" name="nama_ibu" value="<?= @$siswa['nama_ibu'] ?>"></td>
</tr>
<tr>
<td><label for="nama_ayah">Nama Ayah</label></td>
<td><input autocomplete="off" required type="text" name="nama_ayah" value="<?= @$siswa['nama_ayah'] ?>"></td>
</tr>
<tr>
<td colspan="3" valign="middle" ><br>
<input type="submit" value="Submit">
<a href="index.php"><div class="link"><div class="br"></div>Kembali</div></a>
</td>
</tr>
</table>
</fieldset>
</form><br><br><br>
</center>
</body>
</html>
3. Ini adalah halaman data siswa
4. Tambahkan kodingan di bawah ini ke dalam file tambah.php yang sebelumnya kita buat
<?php
include 'lib/library.php';
if($_SERVER['REQUEST_METHOD']=='POST') {
// Digunakan untuk memeriksa apakah ada request dalam bentuk POST yang dikirim ke halaman ini? (Halaman tambah.php)
$nis = htmlspecialchars($_POST['nis']);
$nama_lengkap = htmlspecialchars($_POST['nama_lengkap']);
$jenis_kelamin = htmlspecialchars($_POST['jenis_kelamin']);
$kelas = htmlspecialchars($_POST['kelas']);
$jurusan = htmlspecialchars($_POST['jurusan']);
$alamat = htmlspecialchars($_POST['alamat']);
$golongan_darah = htmlspecialchars($_POST['golongan_darah']);
$nama_ibu = htmlspecialchars($_POST['nama_ibu']);
$nama_ayah = htmlspecialchars($_POST['nama_ayah']);
$foto = $_FILES['foto'];
if (!empty($foto) AND $foto['error'] == 0) {
$path = './Assets/image/';
$upload = move_uploaded_file($foto['tmp_name'], $path.$foto['name']);
if (!$upload) {
flash('error', "Upload file gagal!");
header('location:index.php');
}
$file = $foto['name'];
}
// Untuk membuat SQL string untuk memasukan data ke tabel siswa
$sql = "INSERT INTO siswa VALUES ('$nis', '$nama_lengkap', '$jenis_kelamin', '$kelas', '$jurusan', '$alamat', '$golongan_darah', '$nama_ibu', '$nama_ayah', '$file' )";
$mysqli->query($sql) or die ($mysqli->error);
// Digunakan untuk melakukan query ke SQL. Apabila error maka akan memunculkan pesan error nya
header('location: index.php');
// Digunakan untuk mengarahkan (redirect) halaman ke index.php
}
include 'views/v_tambah.php';
?>
5. Tambahkan kodingan di bawah ini ke dalam file v_index.php yang sebelumnya kita buat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link href="Assets/fontawesome/css/all.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Assets/css/style.css">
<style>
tr th {
padding:5px;
}
</style>
</head>
<body>
<br><br>
<center>
<div class="judul">
<div class="smk">
<img src="Assets/img/smk.png" width="50%">
</div>
<div class="jdl"><br><br>
<h1>Data Siswa SMK Negeri 4 Bandung</h1>
</div>
<div class="ava">
<img src="Assets/img/ava.png" width="50%">
</div>
</div>
<!-- Tambahan Fitur Search -->
<div class="search">
<form method="GET" action="index.php">
<input type="text" name="search" id="search" value="<?= @$search ?>" autocomplete="off">
<button type="submit" class="cari" name="cari" id="tombol-cari"><i class="fas fa-search"></i></button>
</form>
<form action="">
<button type="submit" class="sync" style="margin-left: 5px;"><i class="fas fa-sync"></i></button>
</form>
<a href="tambah.php" class="tdata"><i class="fas fa-plus"></i> Tambahkan Data</a>
<a href="logout.php" class="logout" onclick="return confirm('Yakin Akan Logout ?');"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
<!-- Tambahan Fitur Ordering -->
<table border="1" cellspacing="0.1" cellpadding="0.1" width="95%">
<thead>
<tr>
<th>No</th>
<th>Foto</th>
<th>
NIS
<a href="index.php?sort=nis&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=nis&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Nama Lengkap
<a href="index.php?sort=nama_lengkap&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=nama_lengkap&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Gender
<a href="index.php?sort=jenis_kelamin&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=jenis_kelamin&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Kelas
<a href="index.php?sort=kelas&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=kelas&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Jurusan
<a href="index.php?sort=jurusan&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=jurusan&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Alamat
<a href="index.php?sort=alamat&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=alamat&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Goldar
<a href="index.php?sort=golongan_darah&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=golongan_darah&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th>
Nama Ibu
<a href="index.php?sort=nama_ibu&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=nama_ibu&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th colspan="2">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
while ($siswa = @$list_siswa->fetch_array()) {
?>
<tr align="center">
<td height="40"><?= $i++ ?></td>
<td>
<img width="80" height="80" src="<?php echo base_url()?>/Assets/image/<?php echo $siswa['file']?>">
</td>
<td><?= $siswa['nis'] ?></td>
<td><?= $siswa['nama_lengkap']?></td>
<td><?= $siswa['jenis_kelamin']?></td>
<td><?= $siswa['kelas']?></td>
<td><?= $siswa['jurusan']?></td>
<td><?= $siswa['alamat']?></td>
<td><?= $siswa['golongan_darah']?></td>
<td><?= $siswa['nama_ibu']?></td>
<!-- link untuk mengedit data -->
<td><a href="edit.php?nis=<?= $siswa['nis']?>" name="edit"><div class="edit"><div class="br"></div><i class="fas fa-edit"></i></div></a></td>
<!-- link untuk menghapus data -->
<td><a href="delete.php?nis=<?= $siswa['nis']?>" onclick="return confirm('Yakin Mau Menghapus Data ini ?');" name="edit"><div class="delete"><div class="br"></div><i class="fas fa-trash"></i></div></a></td>
</tr>
<?php } ?>
</tbody>
</table>
<br><br>
</center>
</body>
</html>
6. Tambahkan kodingan di bawah ini ke dalam file edit.php yang sebelumnya kita buat
<?php
include 'lib/library.php';
// Digunakan untuk mengambil value dari GET parameter dengan key nis
$nis = $_GET['nis'];
// Digunakan untuk memeriksa apakah ada request dalam bentuk POST yang dikirim ke halaman ini? (Halaman edit.php)
if ($_SERVER['REQUEST_METHOD']=='POST') {
// Digunakan untuk mengambil data dalam bentuk POST dari form
$nis = htmlspecialchars($_POST['nis']);
$nama_lengkap = htmlspecialchars($_POST['nama_lengkap']);
$jenis_kelamin = htmlspecialchars($_POST['jenis_kelamin']);
$kelas = htmlspecialchars($_POST['kelas']);
$jurusan = htmlspecialchars($_POST['jurusan']);
$alamat = htmlspecialchars($_POST['alamat']);
$golongan_darah = htmlspecialchars($_POST['golongan_darah']);
$nama_ibu = htmlspecialchars($_POST['nama_ibu']);
$nama_ayah = htmlspecialchars($_POST['nama_ayah']);
$file = $_POST['foto'];
$foto = $_FILES['foto'];
if (!empty($foto) && $foto['error'] == 0) {
$path = './Assets/image/';
$upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']);
if (!$upload) {
flash('error', "Upload file gagal!");
header('location:index.php');
}
$file = $foto['name'];
}
// Digunakan untuk membuat SQL string untuk mengubah data pada tabel siswa
$sql = "UPDATE siswa SET
nama_lengkap = '$nama_lengkap',
jenis_kelamin = '$jenis_kelamin',
kelas = '$kelas',
jurusan = '$jurusan',
alamat = '$alamat',
golongan_darah = '$golongan_darah',
nama_ibu = '$nama_ibu',
nama_ayah = '$nama_ayah',
file = '$file'
WHERE nis = '$nis'";
$mysqli->query($sql) or die ($mysqli->error);
header('location: index.php');
}
// Digunakan untuk memeriksa apakah parameter nis ada pada url? Jika tidak ada maka arahkan halaman kembali ke index.php
if(empty($nis)) header('location : index.php');
// Mengambil data dari tabel siswa berdasarkan nis sesuai dengan parameter get nya
$sql = "SELECT * FROM siswa WHERE nis = '$nis' ";
$query = $mysqli->query($sql);
// $query->fetch_array() tanpa looping artinya hanya mengambil hasil query baris pertama saja (1 data)
$siswa = $query->fetch_array();
// Digunakan untuk memeriksa apakah data siswa dengan nis tersebut ada pada tabel siswa? Jika tidak ada maka arahkan halaman kembali ke index.php
if(empty($siswa))header('location : index.php');
include 'views/v_tambah.php';
?>
7. Kita Coba Untu menggunakan fitur upload gambar dan edit di form tambah data siswa
setelah di submit maka data akan dikirim ke halam index dan hasilnya seperti di bawah ini :
fitur upload gambar sudah bisa digunakan, sekarang kita coba untuk mengedit salah satu data dan mengubah gambarnya
setelah data siswa di edit kita submit dan hasilnya seperti di bawah ini :
Ohh yaa terakhir jika kalian mengalami error saat meng upload gambar dengan ukuran yang melebihi 2MB kalian bisa rubah maximal size untuk uploadnya, cara caranya bisa dilihat di bawah ini :
1. Kalian buka xampp kalian masing masing dan tekan config pada apache dan tekan PHP.ini seperti gambar di bawah ini :
2. Cari kata upload_max pada file php.ini dan rubah valuenya sesuai yang kalian inginkan , seperti gambar di bawah ini
Mungkin cukup sekian materi yang dapat saya berikan kepada teman teman semua semoga bermanfaat bagi kita semua, Wassalamualaikum
0 Comments