Selamat malam sobat blogger yang masih setia mengunjungi blog sederhana saya ini, setelah sekian lama tidak menulis artikel kini saya hadir lagi untuk berbagi sedikit pengetahuan dan trik mengenai cara membuat upload gambar dengan preview menggunakan php dan java script. Sebenarnya sudah banyak tutorial di google yang membahas tentang judul ini, namun saya rasa cukup sulit bagi teman-teman untuk menemukan artikel yang benar-benar sesuai dengan keinginan teman-teman semua, saya pun mengalami hal yang sama, karena pada beberapa artikel di google atau lebih tepatnya blog berbahasa indonesia hanya membahas cara mengupoad image saja tanpa menambahkan fitur untuk preview image jadi image yang di upload akan langsung tersimpan kedalam database, kemudian setelah lama mencari tutorial ini akhirnya saya menemukan jawabannya disalah satu web forum bahasa inggris dan saya rasa inilah cara yang paling sederhana diantara cara-cara yang lain, maka dari itu saya mencoba membahasnya disini, siapa tahu sobat juga membutuhkan tutorial ini hehe, berikut adalah langkah - langkahnya :

  1. Langkah pertama adalah kita siapkan dulu database dan tabelnya untuk menyimpan gambar yang akan kita upload, misalnya kita buat tabel dengan nama gambar_db dan tabelnya dengan nama tabel_gambar. Seperti contoh dibawah ini: 

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql

    Baca : Cara membuat database dan tabel dengan menggunakan phpmyadmin.

  2. Kemudian kita buat sebuah folder dalam file htdocs di xampp dengan nama “latihan-gambar” ,  tanpa tanda kutip, seperti gambar dibawah ini 

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql
  3. Kemudian kita akan membuat file dengan ekstensi “koneksi.php” tanpa tanda kutip untuk mengkoneksikan file dengan database yang sebelumnya kita buat. Berikut adalah source untuk koneksi.php

    Baca : Cara Membuat koneksi Ke database mysql

  4. <?php
    mysql_connect('localhost','root','');
    mysql_select_db('gambar_db');
    ?>
    
  5. Setelah itu kita buat lagi file dengan ekstensi “index.php” tanpa tanda kutip, sebagai tampilan pertama ketika kita mengetikkan http://localhost/latihan-gambar. disini saya buatkan dalam bentuk tabel saja untuk menampilkan gambar yang sudah diinput kedalam database, berikut adalah script untuk index.php
    <?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 tabel_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='upload/" . $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 tabel_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> 
    
    dan berikut adalah tampilan dari halaman index.php

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql

  6. Kemudian kita buat tampilan form untuk menginputkan atau meng-upload gambar yang kita inginkan kedalam database, kita berinama “tambah.php” tanpa tanda kutip, berikut adalah script untuk tambah.php:
    <?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 = "upload/$foto_file";
    $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 tabel_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='upload/". $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>  
    

    *note : di file tambah.php inilah kita memainkan javascript untuk preview gambar, sehingga pada file tambah.php ini kita tambahkan baris code java scriptnya. (Lihat baris kode yang berwarna biru)
    *keterangan tambahan dalam proses input data gambar, sebelumnya sobat harus menyiapkan dulu sebuah folder untuk menyimpan gambar yang diupload (direktori untuk penyimpanan gambar , lihat baris kode yang berwarna merah, silahkan sobat ganti dengan nama direktori di komputer sobat), jadi selain menyimpan dalam database kita juga menyimpan file gambar.jpg nya didalam sebuah folder, disini kita berinama “upload”, dan nantinya kita arahkan agar gambar tersimpan kedalam folder “upload” tersebut.  
    * Pada source code diatas kita batasi maksimum ukuran gambar yang bisa diupload adalah 1 Mb, jika sobat mengupload gambar yang ukurannya lebih dari satu Mb maka gambar tersebut tidak dapat disimpan didatabase. teman-teman bisa merubah batas maksimum sesuai dengan keinginan dan kebutuhan sobat.
    Berikut adalah tampilan halaman tambah.php
    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql
  7. Setelah proses input berhasil, teman-teman akan kembali kehalaman index.php dan melihat bahwa gambar sudah berhasil di upload dan disimpan kedalam database.

    Cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql

    Sampai disini sebenarnya pembahasan kita mengenai cara membuat upload image dengan preview menggunakan php dan java script kedalam database mysql, hanya sebatas upload gambar dan menyimpannya dalam database. Tapi jika sobat ingin melengkapi latihan-gambar ini dengan fitur CRUD berikut akan saya akan lanjutkan. Hehe
  8. Langkah selanjutnya jika sobat ingin melengkapi source ini dengan fitur CRUD kita perlu menambahkan file “edit.php” dan “delete.php”.
  9. Berikut ini adalah file edit.php, sedikit pemberitahuan, pada file ini sobat diberikan dua pilihan, yaitu mengupdate gambar atau tidak. Maka dalam kita berikan dua kondisi pada query untuk update tabelnya, berikut adalah script untuk file edit.php :
    <?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 tabel_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 = "upload/$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 tabel_gambar WHERE id='$_GET[id]'"));
                  if(empty($foto_file)){
                    $hasil=mysql_query("UPDATE tabel_gambar SET ket='$_POST[ket]'
                      WHERE id='$_POST[id]'");
                    echo "<script>window.location='index.php'</script>";
                  } else{
                     $hasil=mysql_query("UPDATE tabel_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='upload/". $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>
      
    
  10. Yang terakhir adalah membuat file delete.php, berikut adalah script codenya : 
  11. <?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";
    }
    
    ?>  
    


Baiklah sobat, demikian tutorial kali ini yaitu tentang cara Membuat upload gambar dengan preview menggunakan php dan javascript ke dalam database mysql, mudah bukan? Sobat pasti bisa kok.. hehe . tutorial ini sangat dasar dan sederhana sekali karena tidak menggunakan css, sehingga tampilannya sekedar saja sekedar bisa menampilkan data hehe. Sobat dapat mengembangkan script ini sesuka hati dan sesuai dengan kreatifitas sobat semua.
Bagi sobat yang ingin source lengkap dari tutorial diatas, silahkan klik link  disini
Semoga artikel ini bisa bermanfaat untuk sobat blogger semua, terimakasih sudah berkunjung dan menyempatkan waktu untuk membaca artikel kami , tetap semangat dan Happy Coding :)

UPDATE : Cara membuat tampilan gambar kedalam bentuk layout grid seperti pada gallery
Label: , ,

Post a Comment

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.