Upload Gambar Pada Php Mysqli native lengkap dengan sourcode dan penjelasan

admin1 September 02, 2013

 Upload Gambar PHP mysqli

Upload gambar merupakan hal yang paling penting yang wajib dikuasai didalam pembuatan aplikasi web. karena terkadang ada kalanya kita perlu upload file baik berupa foto, dokumen dan sebagainya. contoh yang kita sering temui adalah ketika kita menggunakan aplikasi sosial media, kita disuruh upload foto profil. artinya kita akan menggunakan perintah upload foto untuk bisa menampilkan profil kita ke sosial media.

untuk cara pembuatannya anda harus mengikuti langkah-langkah dibawah ini dengan terurut tanpa sedikitpun tertinggal. untuk langkah-langkahnya adalah sebagai berikut:

  1. membuat database beserta tabelnya
  2. membuat file koneksi.php
  3. membuat form input file dengan nama file user_tambah.php

Membuat Database & Tabel 

Langkah pertama yang perlu dilakukan adalah membuat databasenya terlebih dahulu. untuk perintahnya dapat dilihat dibawah ini.

     
   Create Database ujian;


Setelah database berhasil dibuat. langkah selanjutnya membuat tabel usernya, untuk perintahnya dapat dilihat pada code dibawah ini.

     
    CREATE TABLE user (
    user_id int NOT NULL AUTO_INCREMENT,     user_nama varchar(100) NOT NULL,     user_kontak varchar(15) NOT NULL,     user_alamat varchar(255) NOT NULL,     user_foto varchar(255) NOT NULL, PRIMARY KEY(user_id) )engine=InnoDB;


Membuat Koneksi Database

Untuk membuat koneksi database. kita buat terlebih dahulu file dengan nama koneksi.php kemudian isikan perintah dibawah ini.

     
    <?php $host="localhost"; $user="root"; $password=""; $db="ujian"; $kon = mysqli_connect($host,$user,$password,$db); if (!$kon){ die("Koneksi gagal:".mysqli_connect_error()); } ?>

Keterangan : 
  • Parameter pertama, kita mengetikkan nama host kita. yaitu localhost.
  • Parameter kedua kita mengetikan username dari mysql kita, defaultnya adalah root. 
  • Parameter ketiga kita ketikkan password mysql kita (jika ada), karena default nya kosong. jika anda menggunakan password pada mysql, silahkan anda ketik pada parameter ke tiga ini passwordnya. 
  • Parameter ke empat kita mengetik nama database yang ingin kita gunakan. atau database yang ingin kita hubungkan ke php. isikan sesuai dengan nama database yang ingin anda gunakan. karena tadi saya membuat database baru dengan nama ujian, maka di sini saya mengetikkan ujian.

Membuat Form Input File

Langkah selanjutnya adalah membuta form input file, form ini dimaksudkan untuk input file kedalam database. untuk form input file ini saya beri nama user_tambah.php. dan untuk sourcodenya dapat dilihat dibawah ini.

     
    <html> <head> <title>www.darsonoaja.blogspot.com - Upload file menggunakan php mysqli</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2 style="text-align: center;">Tambah Data Pegawai</h2> <form action="user_act.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>Nama :</label> <input type="text" class="form-control" placeholder="Masukkan Nama" name="nama" required="required"> </div> <div class="form-group"> <label>Kontak :</label> <input type="number" class="form-control" placeholder="Masukkan Kontak" name="kontak" required="required"> </div> <div class="form-group"> <label>Alamat :</label> <textarea class="form-control" name="alamat" required="required"></textarea> </div> <div class="form-group"> <label>Foto :</label> <input type="file" name="foto" required="required"> <p style="color: red">Ekstensi yang diperbolehkan .png | .jpg | .jpeg | .gif</p> </div> <input type="submit" name="" value="Simpan" class="btn btn-primary"> </form> </div> </body> </html>


Perhatikan pada bagian <link> pada bagian tersebut saya menggunakan bootstrap supaya membuat tampilan lebih menarik. kemudian yang perlu diperhatikan dalam upload file adalah pada bagian form. didalam form terdapat atribut berupa action, method dan enctype. kegunaanya adalah sebagai berikut
  • Action = action (aksi) digunakan untuk mengarahkan file apa yang bertugas mengirimkan data yang ada diformulir, dalam hal ini saya menggunakan file user_act.php.
  • Method = Method digunakan untuk mengambil atau mengirimkan data. untuk mengambil data biasanya menggunakan method GET dan untuk mengirim data menggunakan POST.
  • encytpe = multypart/form-data digunakan sebagai penyandi yang memungkinkan file dikirim melalui method POST. tanpa encytape sebuah file baik foto atau dokumen tidak dapat dikirim.
Kapan sebuah datab bisa dikirim? Saat tombol button di klik oleh user atau pengguna website tersebut.

Membuat Aksi Inputan File

Aksi input file digunakan untuk menampung data yang dikirimkan dari user_tambah.php diatas kedalam user_act.php. nantinya file user_act.php digunakan untuk memproses data yang telah tertapung didalamnya kedalam database. untuk perintahnya dapat dilihat dibawah ini.

     
    <?php include 'koneksi.php'; $nama = $_POST['nama']; $kontak = $_POST['kontak']; $alamat = $_POST['alamat']; $rand = rand(); $ekstensi = array('png','jpg','jpeg','gif'); $filename = $_FILES['foto']['name']; $ukuran = $_FILES['foto']['size']; $ext = pathinfo($filename, PATHINFO_EXTENSION); if(!in_array($ext,$ekstensi) ) { header("location:index.php?alert=gagal_ekstensi"); }else{ if($ukuran < 1044070){ $xx = $rand.'_'.$filename; move_uploaded_file($_FILES['foto']['tmp_name'], 'gambar/'.$rand.'_'.$filename); mysqli_query($koneksi, "INSERT INTO user VALUES(NULL,'$nama','$kontak','$alamat','$xx')"); header("location:index.php?alert=berhasil"); }else{ header("location:index.php?alert=gagak_ukuran"); } }


Keterangan :
  • include = include digunakan untuk membaca file atau dengan kata lain include merupakan fungsi yang digunakan untuk menyertakan file php lain ke dalam suatu program PHP sehingga file yang tertulis tidak berulang-ulang.
  • $nama adalah sebuah penamaan variabel. 
  • POST[ 'nama'] = yang berada didalam [] diambil dari name sebuah file.  perhatikan warna putih dari code dibawah ini
     
    <input type="text" name="nama" class="form-control" placeholder="Masukkan Nama" required="required">

  • sedangkan untuk pengiriman file foto dapat dilihat pada code seperti dibawah ini
     
    $rand = rand();
    $ekstensi =  array('png','jpg','jpeg','gif');
    $filename = $_FILES['foto']['name'];
    $ukuran = $_FILES['foto']['size'];
    $ext = pathinfo($filename, PATHINFO_EXTENSION);

Keterangan
  • Fungsi rand() digunakan untuk merandom nomor. fungsinya untuk memberikan penomoran pada file foto secara random supaya ketika ada foto dengan nama yang sama saat diupload maka ketika disimpan kedalam database menggunakan nama random sebagai pembedanya.misal nama file awal adalah foto_saya.jpg ketika menggunakan random saat diupload maka yang tersimpan menjadi 001234_foto_saya.jpg
  • ekstensi = digunakan untuk menyimpan ekstensi yang diperbolehkan ketika mengupload file. 
  • file name = digunakan untuk menyimpan nama file dari foto dari inputan sebelumnya.
  • ukuran = digunakan untuk mengetahui besar file yang tersimpan.
  • ext = digunakan untuk mengecek ekstensi yang diupload.
Kemudian setelah semua data sudah disiapkan, maka kita akan melakukan pengecekan baik dari ukuran serta ekstensi yang diperbolehkan. perhatikan kode dibawah ini.

     
    if(!in_array($ext,$ekstensi) ) {
        header("location:index.php?alert=gagal_ekstensi");
    }else{
        if($ukuran < 1044070){      
            $xx = $rand.'_'.$filename;
            move_uploaded_file($_FILES['foto']['tmp_name'], 'gambar/'.$rand.'_'.$filename);
            mysqli_query($koneksi, "INSERT INTO user VALUES(NULL,'$nama','$kontak','$alamat','$xx')");
            header("location:index.php?alert=berhasil");
        }else{
            header("location:index.php?alert=gagal_ukuran");
        }
    }


Keterangan :
  • Pada If yang paling atas (if yang pertama) kita akan mengecek ekstensi yang diperbolehkan untuk diupload. didalam if ini untuk mengecek ekstensi menggunakan fungsi in_array. !in_array disini dimaksudkan untuk mengecek jika ekstensi yang diperbolehkan dan ekstensi gambar tidak sama maka akan dikembalikan ke halaman index. dengan menampilkan pesan kegagalan
  • Sedangkan jika benar maka file akan disimpan kedalam database.
Hasil dari tampilan input file adalah seperti berikut:
Upload Gambar di PHP mysqli native


Menampilkan Hasil Inputan
Untuk perintah yang terakhir kita akan menampilkan hasil inputan yang berhasil kita upload. untuk perintahnya sendiri dapat dilihat seperti ini.

     
    <?php include 'koneksi.php'; ?>
    <!DOCTYPE html>
    <html>
    <head>
        <title>www.darsonoaja.blogspot.com - Upload file menggunakan php mysqli</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2 style="text-align: center;">Data Data User</h2>    
            <br>
            <?php
            if(isset($_GET['alert'])){
                if($_GET['alert']=='gagal_ekstensi'){
                    ?>
                    <div class="alert alert-warning alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h4><i class="icon fa fa-warning"></i> Peringatan !</h4>
                        Ekstensi Tidak Diperbolehkan
                    </div>                              
                    <?php
                }elseif($_GET['alert']=="gagal_ukuran"){
                    ?>
                    <div class="alert alert-warning alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h4><i class="icon fa fa-check"></i> Peringatan !</h4>
                        Ukuran File terlalu Besar
                    </div>                              
                    <?php
                }elseif($_GET['alert']=="berhasil"){
                    ?>
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h4><i class="icon fa fa-check"></i> Success</h4>
                        Berhasil Disimpan
                    </div>                              
                    <?php
                }
            }
            ?>
            <br>
            <a href="user_tambah.php" class="btn btn-info btn-sm">Tambah Data</a>
            <br>        
            <br>        
            <table class="table table-bordered">
                <tr>
                    <th width="20%">Nama</th>
                    <th width="20%">Kontak</th>
                    <th width="40%">Alamat</th>
                    <th width="20%">Foto</th>
                </tr>
                <?php
                $data = mysqli_query($koneksi,"select * from user");
                while($d = mysqli_fetch_array($data)){
                    ?>
                    <tr>
                        <td><?php echo $d['user_nama']; ?></td>
                        <td><?php echo $d['user_kontak']; ?></td>
                        <td><?php echo $d['user_alamat']; ?></td>
                        <td><img src="gambar/<?php echo $d['user_foto'] ?>" width="35" height="40"></td>
                    </tr>
                    <?php
                }

                ?>
            </table>
        </div>
    </body>
    </html>


Keterangan untuk file diatas sudah saya jelaskan pada bagian Crud mysqli. silahkan pelajari disini CRUD mysqli dengan PHP

Demikina tutorial upload foto atau file yang lainnya. semoga bermanfaat dan selamat mencoba. 

Jangan Lupa komennya ya jika tidak mengerti dan jika ada pertanyaan lebih lanjut mari berdiskusi dikolom komentar.

Tags
Reactions

Posting Komentar

0 Komentar