Tugas 10 - CRUD Upload dengan PHP

Tiap mahasiswa diberikan tugas untuk membuat website upload gambar menggunakan PHP dan MySQL berdasarkan tutorial yang diberikan.
Deployment website Tugas 10 yaitu website CRUD Upload dapat diakses melalui click here.
Seluruh source code pada website ini dapat diakses melalui source code here.

Tampilan Website

Di bawah ini merupakan tampilan dari index.php.

Tampilan Form Tambah Data

Di bawah ini merupakan tampilan dari Form Tambah Data yang akan digunakan oleh user untuk menambahkan data.

Tampilan Form Ubah Data

Di bawah ini merupakan tampilan dari Form Ubah Data yang akan digunakan oleh user untuk mengedit data yang telah terdaftar.

Source Code

Di bawah ini merupakan code pada file koneksi.php untuk menghubungkan PHP dengan Database.

<?php
    $host = "localhost"; // Nama hostnya
    $username = "root"; // Username
    $password = ""; // Password (Isi jika menggunakan password)
    $database = "mynotescode"; // Nama databasenya
    // Koneksi ke MySQL dengan PDO
    $pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>

Selanjutnya merupakan code pada file index.php untuk tampilan data dalam database.

<h1>Data Siswa</h1>
<a href="form_simpan.php"><button class="button-33" role="button">Tambah Data</button></a><br><br>
<div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Foto</th>
            <th>NIS</th>
            <th>Nama</th>
            <th>Jenis Kelamin</th>
            <th>Telepon</th>
            <th>Alamat</th>
            <th colspan="2" style="text-align:center; padding-right: 60px">Aksi</th>
        </tr>
        <div class="button-41">
            <?php
                // Load file koneksi.php
                include "koneksi.php";
                // Buat query untuk menampilkan semua data siswa
                $sql = $pdo->prepare("SELECT * FROM siswa");
                $sql->execute(); // Eksekusi querynya
                while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
                    echo "<tr>";
                    echo "<td><img src='images/".$data['foto']."' width='100' height='100'></td>";
                    echo "<td>".$data['nis']."</td>";
                    echo "<td>".$data['nama']."</td>";
                    echo "<td>".$data['jenis_kelamin']."</td>";
                    echo "<td>".$data['telp']."</td>";
                    echo "<td>".$data['alamat']."</td>";
                    echo "<td><a href='form_ubah.php?id=".$data['id']."'>Ubah</a></td>";
                    echo "<td><a href='proses_hapus.php?id=".$data['id']."'>Hapus</a></td>";
                    echo "</tr>";
                }
            ?>
        </div>
    </thead>
    </table>
</div>

Lalu menambahkan data pada file form_simpan.php sebagai halaman untuk menginputkan data ke dalam database.

<form id="styling" method="post" action="proses_simpan.php" enctype="multipart/form-data">
<h3>Tambah Data Siswa</h3>
<fieldset>
    <p>NIS</p>
    <input placeholder="NIS"  type="text" name="nis" tabindex="1" required autofocus>
</fieldset>
<fieldset>
    <p>Nama</p>
    <input placeholder="Your Name" type="text" name="nama" tabindex="2" required>
</fieldset>
<fieldset>
    <p>Jenis Kelamin</p>
    <input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki <br />
    <input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
</fieldset>
<fieldset>
    <p>Telepon</p>
    <input placeholder="Your Phone" type="text" name="telp" tabindex="4" required>
</fieldset>
<fieldset>
    <p>Alamat</p>
    <textarea placeholder="Type your address here..." name="alamat" tabindex="5" required></textarea>
</fieldset>
<fieldset>
    <p>Foto</p>
    <input placeholder="Upload your photo here..." type="file" name="foto" tabindex="5" required>
</fieldset>
<fieldset>
    <button name="submit" type="submit" value="Simpan" id="styling-submit" data-submit="...Sending">Submit</button>
    <a href="index.php"><button type="button" value="Batal">Batal</button></a>
</fieldset>
</form>

Menambahkan skrip untuk menyimpan data ke dalam database pada file proses_simpan.php.

// Load file koneksi.php
include "koneksi.php";

// Ambil Data yang Dikirim dari Form
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];

// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;

// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;

// Proses upload
if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil diupload atau tidak
  // Proses simpan ke Database
  $sql = $pdo->prepare("INSERT INTO siswa(nis, nama, jenis_kelamin, telp, alamat, foto) VALUES(:nis,:nama,:jk,:telp,:alamat,:foto)");
  $sql->bindParam(':nis', $nis);
  $sql->bindParam(':nama', $nama);
  $sql->bindParam(':jk', $jenis_kelamin);
  $sql->bindParam(':telp', $telp);
  $sql->bindParam(':alamat', $alamat);
  $sql->bindParam(':foto', $fotobaru);
  $sql->execute(); // Eksekusi query insert

  if($sql){ // Cek jika proses simpan ke database sukses atau tidak
    // Jika Sukses, Lakukan :
    header("location: index.php"); // Redirect ke halaman index.php
  }else{
    // Jika Gagal, Lakukan :
    echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
    echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
  }
}else{
  // Jika gambar gagal diupload, Lakukan :
  echo "Maaf, Gambar gagal untuk diupload.";
  echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
}
?>

Selanjutnya membuat skrip untuk menghapus data pada file proses_hapus.php.

<?php
    // Load file koneksi.php
    include "koneksi.php";
    // Ambil data NIS yang dikirim oleh index.php melalui URL
    $id = $_GET['id'];
    // Query untuk menampilkan data siswa berdasarkan ID yang dikirim
    $sql = $pdo->prepare("SELECT foto FROM siswa WHERE id=:id");
    $sql->bindParam(':id', $id);
    $sql->execute(); // Eksekusi query insert
    $data = $sql->fetch(); // Ambil semua data dari hasil eksekusi $sql
    // Cek apakah file fotonya ada di folder images
    if(is_file("images/".$data['foto'])) // Jika foto ada
    unlink("images/".$data['foto']); // Hapus foto yang telah diupload dari folder images
    // Query untuk menghapus data siswa berdasarkan ID yang dikirim
    $sql = $pdo->prepare("DELETE FROM siswa WHERE id=:id");
    $sql->bindParam(':id', $id);
    $execute = $sql->execute(); // Eksekusi / Jalankan query
    if($execute){ // Cek jika proses simpan ke database sukses atau tidak
    // Jika Sukses, Lakukan :
    header("location: index.php"); // Redirect ke halaman index.php
    }else{
    // Jika Gagal, Lakukan :
    echo "Data gagal dihapus. <a href='index.php'>Kembali</a>";
    }
?>

Kemudian membuat form untuk melakukan update data pada file form_ubah.php.

<?php
    // Load file koneksi.php
    include "koneksi.php";
    // Ambil data NIS yang dikirim oleh index.php melalui URL
    $id = $_GET['id'];
    // Query untuk menampilkan data siswa berdasarkan ID yang dikirim
    $sql = $pdo->prepare("SELECT * FROM siswa WHERE id=:id");
    $sql->bindParam(':id', $id);
    $sql->execute(); // Eksekusi query insert
    $data = $sql->fetch(); // Ambil semua data dari hasil eksekusi $sql
?>
<form id="styling" method="post" action="proses_ubah.php?id=<?php echo $id; ?>" enctype="multipart/form-data">
<h3>Ubah Data Siswa</h3>
<fieldset>
    <p>NIS</p>
    <input placeholder="NIS"  type="text" name="nis" value="<?php echo $data['nis']; ?>" tabindex="1" required autofocus>
</fieldset>
<fieldset>
    <p>Nama</p>
    <input placeholder="Your Name" type="text" name="nama" value="<?php echo $data['nama']; ?>" tabindex="2" required>
</fieldset>
<fieldset>
    <p>Jenis Kelamin</p>
    <?php
    if($data['jenis_kelamin'] == "Laki-laki"){
        echo "<input type='radio' name='jenis_kelamin' value='laki-laki' checked='checked'> Laki-laki";
        echo "<input type='radio' name='jenis_kelamin' value='perempuan'> Perempuan";
    }else{
        echo "<input type='radio' name='jenis_kelamin' value='laki-laki'> Laki-laki";
        echo "<input type='radio' name='jenis_kelamin' value='perempuan' checked='checked'> Perempuan";
    }
    ?>
</fieldset>
<fieldset>
    <p>Telepon</p>
    <input placeholder="Your Phone" type="text" name="telp" value="<?php echo $data['telp']; ?>" tabindex="4" required>
</fieldset>
<fieldset>
    <p>Alamat</p>
    <textarea placeholder="Type your address here..." name="alamat" tabindex="5" required><?php echo $data['alamat']; ?></textarea>
</fieldset>
<fieldset>
    <p>Foto</p>
    <input placeholder="Upload your photo here..." type="file" name="foto" tabindex="5">
</fieldset>
<fieldset>
    <button name="submit" type="submit" value="Ubah" id="styling-submit" data-submit="...Sending">Submit</button>
    <a href="index.php"><button type="button" value="Batal">Batal</button></a>
</fieldset>
</form>

Menambahkan skrip untuk memproses update data pada file proses_ubah.php.

<?php
// Load file koneksi.php
include "koneksi.php";

// Ambil data ID yang dikirim oleh form_ubah.php melalui URL
$id = $_GET['id'];

// Ambil Data yang Dikirim dari Form
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];

// Ambil data foto yang dipilih dari form
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];

// Cek apakah user ingin mengubah fotonya atau tidak
if(empty($foto)){ // Jika user tidak memilih file foto pada form
  // Lakukan proses update tanpa mengubah fotonya
  // Proses ubah data ke Database
  $sql = $pdo->prepare("UPDATE siswa SET nis=:nis, nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat WHERE id=:id");
  $sql->bindParam(':nis', $nis);
  $sql->bindParam(':nama', $nama);
  $sql->bindParam(':jk', $jenis_kelamin);
  $sql->bindParam(':telp', $telp);
  $sql->bindParam(':alamat', $alamat);
  $sql->bindParam(':id', $id);
  $execute = $sql->execute(); // Eksekusi / Jalankan query

  if($sql){ // Cek jika proses simpan ke database sukses atau tidak
    // Jika Sukses, Lakukan :
    header("location: index.php"); // Redirect ke halaman index.php
  }else{
    // Jika Gagal, Lakukan :
    echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
    echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
  }
}else{ // Jika user memilih foto / mengisi input file foto pada form
  // Lakukan proses update termasuk mengganti foto sebelumnya
  // Rename nama fotonya dengan menambahkan tanggal dan jam upload
  $fotobaru = date('dmYHis').$foto;

  // Set path folder tempat menyimpan fotonya
  $path = "images/".$fotobaru;

  // Proses upload
  if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil diupload atau tidak
    // Query untuk menampilkan data siswa berdasarkan ID yang dikirim
    $sql = $pdo->prepare("SELECT foto FROM siswa WHERE id=:id");
    $sql->bindParam(':id', $id);
    $sql->execute(); // Eksekusi query insert
    $data = $sql->fetch(); // Ambil semua data dari hasil eksekusi $sql

    // Cek apakah file foto sebelumnya ada di folder images
    if(is_file("images/".$data['foto'])) // Jika foto ada
      unlink("images/".$data['foto']); // Hapus file foto sebelumnya yang ada di folder images

      // Proses ubah data ke Database
    $sql = $pdo->prepare("UPDATE siswa SET nis=:nis, nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat, foto=:foto WHERE id=:id");
    $sql->bindParam(':nis', $nis);
    $sql->bindParam(':nama', $nama);
    $sql->bindParam(':jk', $jenis_kelamin);
    $sql->bindParam(':telp', $telp);
    $sql->bindParam(':alamat', $alamat);
    $sql->bindParam(':foto', $fotobaru);
    $sql->bindParam(':id', $id);
    $execute = $sql->execute(); // Eksekusi / Jalankan query

    if($sql){ // Cek jika proses simpan ke database sukses atau tidak
      // Jika Sukses, Lakukan :
      header("location: index.php"); // Redirect ke halaman index.php
    }else{
      // Jika Gagal, Lakukan :
      echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
      echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
    }
  }else{
    // Jika gambar gagal diupload, Lakukan :
    echo "Maaf, Gambar gagal untuk diupload.";
    echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
  }
}
?>

Resource

• Github Repository