Cara Membuat Upload File Dengan PHP dan MySQL

Cara Membuat Upload File Dengan PHP dan MySQL
Cara Membuat Upload File Dengan PHP dan MySQL

Cara Membuat Upload File Dengan PHP dan MySQL - Kali ini saya akan memberikan artikel cara membuat form upload file, foto atau gambar, menggunakan bahasa pemrograman php dan javascript untuk upload nya, bagi kalian yang sering membuat sistem informasi berbasis native, dan apalagi kalian sedang membuat sistem informasi akademik, disitulah kalian harus membuat sebuah crud yang ada form upload file nya, yang dimana form tersebut biasanya digunakan, baik untuk data siswa, guru maupun upload berkas - berkas yang memang penting.

Maka dari kesempatan artikel kali ini saya sendiri tidak perlu menjelaskan lengkap tentang fungsi dari form ini, karena bagi kalian yang melihat artikel ini tentu sedang mencari nya, dan memang sudah tau kegunaan dari form tersebut. maka dari itu berikut langkah - langkah pembuatannya.

Cara Membuat Upload File Dengan PHP dan MySQL

  1. Silahkan siapkan Text Editor kalian.
  2. Lalu buat folder didalam htdocs kalian dengan nama latihan_foto.
  3. Kemudian kalian buat database baru dengan nama ruangcoderfoto ( bebas ).
  4. Buat file cukup 3 saja, kemudian isi field tersebut sesuai gambar dibawah ini.


  5. Lanjut buat file koneksi terlebih dahulu, dengan membuat file baru didalam folder yang telah dibuat dengan nama koneksi.php
  6. <?php
        // koneksi ke engine host mysql
        // valuenya adalah host, user, dan password
        $Open = mysql_connect("localhost","root","");
            if (!$Open){
                die ("Koneksi ke Engine MySQL Gagal !<br>");
            }
            //jika koneksi ke host berhasil
            else{
                echo "Koneksi ke Engine MySQL Berhasil !<br>";
            }
        
        // koneksi ke database mysql
        // valuenya adalah database name
        $Koneksi = mysql_select_db("ruangcoderfoto");
            if (!$Koneksi){
                die ("Koneksi ke Database Gagal !");
            }
            //jika koneksi ke database berhasil
            else{
                echo "Koneksi ke Database MySQL Berhasil !";
            }
    ?>
    
    
    Perhatikan!
    Kode dibawah ini merupakan fungsi untuk membuat form yang berguna untuk mengupload file yang ingin kita upload
    enctype="multipart/form-data"
  7. Lanjut, kita buat file baru dengan nama index.php file ini digunakan untuk form inputan nantiny
  8. <?php
    error_reporting(0);
    //membuat koneksi ke database
    include "koneksi.php";
    // jumlah data yang akan ditampilkan per halaman
    $dataPerPage = 10;
    // apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
    // sedangkan apabila belum, nomor halamannya 1.
    if(isset($_GET['page']))
    {
        $noPage = $_GET['page'];
    } 
    else $noPage = 1; {
    }
    // perhitungan offset
    $offset = ($noPage - 1) * $dataPerPage;
    ?>
     
     <html>
     <title> Upload Gambar </title>
     <script language="javascript">
     function tanya() {
     if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
     return true;
      } else {
       return false;
      }
      }
    </script>
    <body width='900px'>
    <center> 
    <h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
    <hr>
    <br>
    <!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
    <form action='tambah.php' method='POST'>
    <table >
     <tr>
     <center><td> <input type='submit' name='tambah' value='Tambah Gambar'> </td> 
     </tr>
    </table>
    </form>
    <!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->
    <table  border='1' Width='600' cellpadding="5">  
    <tr>
     <th> NO </th>
     <th> Gambar </th>
     <th> Keterangan </th>
     <th colspan='2'> Action </th>
    </tr>
     
    <?php  
    // Perintah untuk menampilkan data
    $queri="Select * From gambar order by id desc LIMIT $offset, $dataPerPage " ;  //menampikan data dari tabel siswa menggunakan limit (untuk membatasi)
    $hasil=MySQL_query ($queri);    //fungsi untuk SQL
    // nilai awal variabel untuk no urut
    $i = $offset+1;
    // perintah untuk membaca dan mengambil data dalam bentuk array
    while ($data = mysql_fetch_array ($hasil)){
    $id = $data['id'];
     echo "  
       <tr>
      <td><center>".$i."</center></td> 
      <td><center><img src='img/" . $data['gambar']. "' alt='' width='80' height='60' /></td>
      <td><center>".$data['ket']."</td>
      
      <td><center> <form action = 'edit.php' method = 'GET'>
      <center><input type = 'submit' name = 'tombol' value = 'Edit' class = 'edit'>"; 
    echo " <input type = 'hidden' name = 'id' value = '".$data['id']."'> </center> 
      </form></td>
      <td><center> 
      <form action = 'delete.php' method = 'GET'>
      <input type = 'hidden' name = 'nama' value = '".$data['nama']."'>
      <input type = 'hidden' name = 'id' value = '".$data['id']."'>
      <input type = 'submit' name = 'tombol2' value = 'Delete' class = 'delete'
      onclick='return tanya(". $data['id'].")'>  
      </form></td>
      </tr> 
      "; 
     $i++; 
    }
    ?>
    </table>
    
    <?php
    // mencari jumlah semua data dalam tabel guestbook
    $query   = "SELECT COUNT(*) AS jumData FROM gambar";
    $hasil  = mysql_query($query);
    $data     = mysql_fetch_array($hasil);
    $jumData = $data['jumData'];
    // menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
    $jumPage = ceil($jumData/$dataPerPage);
    // menampilkan link previous
    if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
    // memunculkan nomor halaman dan linknya
    for($page = 1; $page <= $jumPage; $page++)
    {
             if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
             {   
                if (($showPage == 1) && ($page != 2))  echo "..."; 
                if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
                if ($page == $noPage) echo " <b>".$page."</b> ";
                else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
                $showPage = $page; 
             }
    }
    // menampilkan link next
    if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
    ?>
    
    
    </body>
    </html> 
  9. Selanjutnya, buat file untuk fungsi upload nya dan beri nama file baru ini dengan nama tambah.php
  10. <?php
    error_reporting(0);
    include "koneksi.php";
    
    ////////////////////////////////////////add atau input data////////////////////////////////
    if (isset($_POST['add'])) {
    $ket = $_POST['ket'];
    ///////////////////////////direktori untuk menyimpan gambar //////////////////////////////// 
    $lokasi_file = $_FILES['gambar']['tmp_name'];
    $foto_file = $_FILES['gambar']['name'];
    $tipe_file = $_FILES['gambar']['type'];
    $ukuran_file = $_FILES['gambar']['size'];
    
    $direktori = "img/$foto_file"; // tempat penyimpanan
    $sql = null;
    $MAX_FILE_SIZE = 1000000;
    //100kb
    if($ukuran_file > $MAX_FILE_SIZE) {
        header("Location:tambah.php");
        exit();
    }
    $sql = null;
    if($ukuran_file > 0) {
        move_uploaded_file($lokasi_file, $direktori);
    }
    
    // perintah SQL
    $query="INSERT INTO gambar (id,gambar,ket) VALUES ('','$foto_file' ,'$ket') " ;
    
    $hasil=mysql_query($query);
    
    if ($hasil){
    //header ('location:view.php');
    echo " <center> <b> <font color = 'red' size = '4'> <p> Data Berhasil disimpan </p> </center> </b> </font> <br/>
     <meta http-equiv='refresh' content='2; url= index.php'/>  ";
    } else { echo "Data gagal disimpan
     <meta http-equiv='refresh' content='2; url= tambah.php'/> ";
    }
      } 
    ?>
    <html>
    <head>
     <title> Tambah Data Gambar </title>
     <link href ="css_submit.css" rel="stylesheet" type="text/css">
     
    </head>
    <body width='900px' style = 'margin : 20px; font : 16px arial;'>
    <center> 
    <h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
    <hr>
    <br>
     <center>
     <p> Tambah Data Gambar</p>
     
     <form method = 'POST' action = ' ' enctype ="multipart/form-data" role="form">
     <table border = '1' cellspacing = '1' cellpadding = '10'
     style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
     <tr>
      <td> gambar </td>
      <td width = '5' align = 'center'> : </td>
      <td widht="5">
       <input type="file"   id="uploadImage1"  onchange="PreviewImage(1)" name='gambar'>
             <br>
             <br>
              <a class="cboxElement " > <?php echo " <img src='img/". $data['gambar'] ."' id='uploadPreview1' width='100' height='120'/>"; ?> </a>
                 
       </td>
      </tr>
     <tr>
      <td> Keterangan </td>
      <td align = 'center'> : </td>
      <td> <input type = 'text' placeholder='Keterangan' name = 'ket' /> </td>
      </tr>
      
     <tr>
     <td colspan = '3' align = 'center'>
     <input type = 'submit' name = 'add' value = 'Submit'/>
     <input type = 'reset' name = 'Reset' value = 'Reset' /> </td>
     </tr>
    </table>
    <a href = 'index.php'> Kembali </a>
    </form>
    
        <!-- upload gambar dengan preview -->
        <script type="text/javascript">
        function PreviewImage(no) {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
    
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
            };
        }
    </script>
    <!-- end upload gambar dengan preview -->
    </body>
    </html>
    Perhatikan!
    Sebaikanya kalian coba terlebih dahulu, jika berhasil terupload file nya, maka lanjut ke tahap yang lain
  11. Selanjutnya, kita buat form untuk merubah datanya, dan buat file baru dengan nama edit.php
  12. <?php
    include "koneksi.php";
    // membaca informasi yang dikirim dari file view.php pada address bar
    $id = $_GET['id'];
    // Perintah sql untuk menampilkan database
    $queri = "select * from gambar where id = '$id'";
    // perintah untuk menjalankan sql
    $hasil = mysql_query($queri);
    // menjadikan data dalam bentuk array
    $data  = mysql_fetch_array($hasil);
    $ket = $data['ket'];
    
    /////////////////////////////////////////////////////update//////////////////////////////
    if (isset($_POST['update'])) {
    $ket = $_POST['ket'];
    ///////////////////////////foto //////////////////////////////// 
    $lokasi_file = $_FILES['gambar']['tmp_name'];
    $foto_file = $_FILES['gambar']['name'];
    $tipe_file = $_FILES['gambar']['type'];
    $ukuran_file = $_FILES['gambar']['size'];
    
    $direktori = "img/$foto_file";
    $sql = null;
    $MAX_FILE_SIZE = 1000000;
    //100kb
    if($ukuran_file > $MAX_FILE_SIZE) {
        header("Location:url=edit.php");
        exit();
    }
    $sql = null;
    if($ukuran_file > 0) {
        move_uploaded_file($lokasi_file, $direktori);
    }
        $d = mysql_fetch_array(mysql_query("SELECT * FROM gambar WHERE id='$_GET[id]'"));
                  if(empty($foto_file)){
                    $hasil=mysql_query("UPDATE gambar SET ket='$_POST[ket]'
                      WHERE id='$_POST[id]'");
                    echo "<script>window.location='index.php'</script>";
                  } else{
                     $hasil=mysql_query("UPDATE gambar SET ket='$_POST[ket]',gambar='$foto_file'
                      WHERE id='$_POST[id]'");
                    echo "<script>window.location='index.php'</script>";
                  }
              }
    
    ?>
    
    
    <html>
    <head>
     <title> Update Data Gambar </title>
     
    </head>
    <body width='900px' style = 'margin : 20px; font : 16px arial;'>
    <center> 
    <h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
    <hr>
    <br>
    <?php 
    echo "
     <center>
     <p> Upload Gambar dengan PHP dan Java Script </p>
     
     <form method ='POST' action = ' ' enctype ='multipart/form-data' role='form'>
     <table border = '1' cellspacing = '1' cellpadding = '10'
     style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
     
     <input type = 'hidden' name = 'id' value = '".$id."' />
     <tr>
      <td> gambar </td>
      <td width = '5' align = 'center'> : </td>
      <td widht='5'>
       <input type='file'   id='uploadImage1'  onchange='PreviewImage(1)'' name='gambar'>
             <br>
             <br> "; ?>
              <a class="cboxElement " > <?php echo " <img src='img/". $data['gambar'] ."' id='uploadPreview1' width='100' height='120'/>"; ?> </a>
           <?php echo "      
       </td>
      </tr>
     <tr>
      <td> Keterangan </td>
      <td align = 'center'> : </td>
      <td> <input type = 'text' placeholder='Keterangan' name = 'ket' value = '".$ket."'/> </td>
      </tr>
    
      
     <tr>
     <td colspan = '3' align = 'center'>
     <input type = 'submit' name = 'update' value = 'Update'/>
     </td>
     </tr>
    </table>
    <a href = 'index.php'> Kembali </a>
    ";?>
    
        <!-- upload gambar dengan preview -->
        <script type="text/javascript">
        function PreviewImage(no) {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
    
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
            };
        }
    </script>
    <!-- end upload gambar dengan preview -->
    
    </form>
    </body>
    </html>
  13. Langkah terkahir, kita membuat fungsi hapus datanya, buat file baru dengan nama delete.php
  14. <?php
    include "koneksi.php";
    error_reporting(E_ALL ^ E_NOTICE);
    $id = $_GET['id'];
    $gambar = $_GET['gambar'];
    $ket = $_GET['ket'];
    
    $delete = "delete from tabel_gambar where id = '$id'";
    $hasil = mysql_query($delete);
    
    if ($hasil){
    //header ('location:view.php');
    echo " <center> <b> <font color = 'red' size = '4'> <p> Data dengan nama $nama Berhasil dihapus </p> </center> </b> </font> <br/>
     <meta http-equiv='refresh' content='1; url= index.php'/>  ";
    } else { echo "Data gagal dihapus";
    }
    
    ?>
  15. Selesai...

Penutup

Nah jadi itu dia artikel tentang Cara Membuat Upload File Dengan PHP dan MySQL semoga bermanfaat buat kalian yang sedang belajar pemrograman, dan agar semakin semangat dalam belajarnya, terimakasih sudah berkunjung.