Senin, 22 Maret 2021

Upload pada PHP

   Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi dan lagi sedikit ilmu di dunia percodingan, yaitu tentang Upload pada PHP. Mari kita bahas!

   Baik, pembahasan kali ini adalah pembahasan lanjutan dari postingan sebelumnya, untuk source code lebih lengkap silahkan cek postingan sebelumnya atau pada github yang terterta di bawah.

   Untuk menambahkan fitur Upload kita harus menambahkan beberapa syntax/codingan pada source code kita, menambahkan kolom pada database yang sebelumnya telah kita buat, dan membuat folder path untuk tempat upload.

   Pertama - tama kita tambahkan kolom pada table yang telah kita buat di database sebelumnya, dengan contoh :


   Kedua kita akan membuat folder baru untuk penyimpanan upload, dengan contoh :



   Lalu selanjutnya kita akan mulai menambahkan beberapa syntax/codingan pada source code kita.

Buat file baru di folder views dengan nama v_form_siswa.php :


<form class="" action="<?php echo $url ?>" method="POST" enctype="multipart/form-data">
  <div class="">
    <label>NIS</label>
    <div class="">
      <input type="text" name="nis" value="<?php echo @$result->nis ?>">
    </div>
  </div>
</form>

   enctype="multipart/form-data" digunakan ketika form yang kita buat memiliki form upload.

Lalu selanjut kita tambahkan syntax/codingan pada file v_tambah.php tepat diatas tag button submit :


<div class="">
            <label>Foto</label>
            <br>
            <?php
            if ($action == "edit.php") {
            ?>
            <img width = "120" heigt = "160" src="<?php echo empty ($siswa ['file']) ?  'assets/images/ava1.png' : 'assets/images/' . $siswa ['file'] ?>" id="output">
            <input type="hidden" name="foto" value="<?= @$siswa['foto']; ?>">
            <?php } else { ?>
            <img src="assets/images/ava1.png" id="output" style="width:120px;height:160px;">
           <?php } ?>
           <input type="file" name="foto"> 
        </div>

   Pada form tersebut terdapat seleksi, jika form dalam kondisi edit, maka tampilan image yang sebelumnya sudah di upload namun jika belum ada foto maka akan menggunakan avatar default.

Selanjutnya kita tambahkan syntax/codingan pada file tambah.php dan edit.php tepat dibawah variabel $nama_ortu :


$file = $_POST['foto'];

    $foto = $_FILES['foto'];

    if (!empty($foto) && $foto['error'] == 0) {
      $path = './assets/images/';
      $upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']);

      if(!$upload){
        flash('error', "Upload file gagal");
        header('location:index.php');
      }
      $file = $foto['name'];
    }

   Isi path dengan folder yang sudah kita buat untuk penyimpanan file yang telah diupload.

Selanjutnya kita tambahkan syntax/codingan pada file v_index.php tepat dibawah tag td setalah bagian nama ortu :


<td>
                    <?php if (!empty($siswa['file'])) { ?>
                    <img src="<?= base_url(); ?>/assets/images/<?= $siswa['file']; ?>" width="90px";>
                    <?php } else { ?>
                    <img width="90" height="120" src="assets/images/ava1.png">
                    <?php } ?>
                </td>

   Syntax atau codingan ini digunakan untuk memunculkan kembali foto yang telah diupload, dan apabila belum meng-upload foto maka akan menggunakan avatar default.

Selanjutnya kita tambahkan syntax/codingan pada file edit.php pada bagian sqlnya :


 $sql = "UPDATE siswa SET
                nama_lengkap = '$nama_lengkap',
                jenis_kelamin = '$jenis_kelamin',
                kelas = '$kelas',
                jurusan = '$jurusan',
                alamat = '$alamat',
                gol_darah = '$gol_darah',
                nama_ortu = '$nama_ortu',
                file = '$file'
                 WHERE nis = '$nis';
            ";

   Tambahkan bagian file='$file' pada bagian sql di edit.php


Hasil :




Link Source Code Pada GITHUB
Previous Post
Next Post

0 komentar: