Cara menggunakan save image php mysql

Question

Pengunggahan file adalah fitur penting untuk aplikasi berbasis web, seluler, atau desktop apa pun. File yang diunggah bisa berupa gambar, video, musik, atau jenis file lainnya. Pada kesempatan kali ini Kelas Programmer. com akan membagikan tutorial cara upload file khusus gambar di php dengan menggunakan database mysql sebagai tempat menyimpan informasi data gambar

Table of Contents Show

Tutorial Cara Upload File Gambar di PHP
Konfigurasi Basis Data
Unduh Bootstrap
Unduh Jquery.dll
Buat File Proyek di htdocs
Buat file basis data. php
Buat file indeks. php
Buat file penyimpanan. php
Buat file hapus. php
Unduh Kode Sumber
Bisakah MySQL menyimpan gambar?
Bagaimana menghubungkan PHP dengan database MySQL?
Langkah-langkah upload database melalui PhpMyAdmin?

Fitur upload foto (gambar) yang akan kita buat juga memanfaatkan jquery dimana saat gambar dibuka dari source komputer kita, gambar sudah bisa di preview secara langsung. Selain itu, saya juga menggunakan CSS Bootstrap untuk membantu mendesain tata letak, tabel, dan tombol. Ikuti saja tutorial berikut ini

Daftar isi

Tutorial Cara Upload File Gambar di PHP

Persiapan

Konfigurasi Basis Data

Buat database di mysql menggunakan CMD atau phpMyAdmin

create database upload_file

kemudian buat tabel dengan nama gambar di database

create table gambar (
id_gambar int not null primary key auto_increment,
gambar varchar(100)
);

_

Unduh Bootstrap

Dalam tutorial ini saya menggunakan bootstrap 4 yang dapat Anda unduh dari situs resminya

Unduh Jquery.dll

Jquery yang saya gunakan masih menggunakan versi 3. 4. 1 jika ingin menggunakan versi terbaru bisa lihat disini

Buat File Proyek di htdocs

Buat folder baru bernama upload_file di direktori htdocs. Sesuaikan dengan letak folder instalasi xampp anda masing-masing

Selanjutnya, buat folder bootstrap, image dan js. Ketiga folder ini berfungsi untuk menampung file bootstrap, image dan jquery

Masukkan semua hasil download file bootstrap ke dalam folder bootstrap dan hasil download file jqery ke dalam folder js

Pada folder gambar saya meletakkan file gambar default berukuran 80x80 sebagai gambar pratinjau sebelum pengguna memilih gambar yang akan diunggah

Buat file basis data. php

Buat file basis data. php di direktori proyek upload_file

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

Sintaks di atas berfungsi untuk konfigurasi database yang digunakan. Sesuaikan konfigurasi pada parameter user, password dan db jika anda memiliki konfigurasi yang berbeda

Buat file indeks. php

Indeks file. php berfungsi sebagai halaman utama saat proyek upload_file dipanggil melalui localhost. Dengan menampilkan form unggah gambar dan juga menampilkan daftar gambar yang telah diunggah

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload File Gambar di PHP dan MySQL</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
    <br>
    <div class="container">
        <?php
        //Validasi untuk menampilkan pesan pemberitahuan
        if (isset($_GET['add'])) {
      
            if ($_GET['add']=='berhasil'){
                echo"<div class='alert alert-success'><strong>Berhasil!</strong> File gambar telah diupload!</div>";
            }else if ($_GET['add']=='gagal'){
                echo"<div class='alert alert-danger'><strong>Gagal!</strong> File gambar gagal diupload!</div>";
            }    
        }

        if (isset($_GET['hapus'])) {
    
            if ($_GET['hapus']=='berhasil'){
                echo"<div class='alert alert-success'><strong>Berhasil!</strong> File gambar telah dihapus!</div>";
            }else if ($_GET['hapus']=='gagal'){
                echo"<div class='alert alert-danger'><strong>Gagal!</strong> File gambar gagal dihapus!</div>";
            }    
        }
        ?>
        <form action="simpan.php" method="post" enctype="multipart/form-data">
            <!-- rows -->   
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <div id="msg"></div>
                        <input type="file" name="gambar" class="file" >
                            <div class="input-group my-3">
                                <input type="text" class="form-control" disabled placeholder="Upload Gambar" id="file">
                                <div class="input-group-append">
                                        <button type="button" id="pilih_gambar" class="browse btn btn-dark">Pilih Gambar</button>
                                </div>
                            </div>
                        <img src="gambar/80x80.png" id="preview" class="img-thumbnail">
                    </div>
                </div>
            </div>

                <button type="submit" name="btn_simpan" class="btn btn-success">Simpan</button>
        </form>

        <hr>
        <div class="row">
            <div class="col-sm-6">
                <div class="table-responsive">
                    <table class="table table-bordered" width='20%'cellspacing="0">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th width='60%'>Gambar</th> 
                                <th>Aksi</th>
                            </tr>
                        </thead>

                        <tbody>
                        <?php
                            // include database
                            include 'database.php';
                            // perintah sql untuk menampilkan daftar bank yang berelasi dengan tabel kategori bank
                            $sql="select * from gambar order by id_gambar desc";
                            $hasil=mysqli_query($kon,$sql);
                            $no=0;
                            //Menampilkan data dengan perulangan while
                            while ($data = mysqli_fetch_array($hasil)):
                            $no++;
                        ?>
                        <tr>
                            <td><?php echo $no; ?></td>
                            <td><img src="gambar/<?php echo $data['gambar'];?>" class="rounded" width='100%' alt="Cinque Terre"></td>
                            <td><a href="hapus.php?id_gambar=<?php echo $data['id_gambar'];?>&gambar=<?php echo $data['gambar'];?>" onclick="konfirmasi()" class="btn btn-danger" role="button">Hapus</a></td>
                        </tr>
                        <!-- bagian akhir (penutup) while -->
                        <?php endwhile; ?>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<style>
    .file {
    visibility: hidden;
    position: absolute;
    }
</style>

<script>

    function konfirmasi(){
        konfirmasi=confirm("Apakah anda yakin ingin menghapus gambar ini?")
        document.writeln(konfirmasi)
    }

    $(document).on("click", "#pilih_gambar", function() {
    var file = $(this).parents().find(".file");
    file.trigger("click");
    });

    $('input[type="file"]').change(function(e) {
    var fileName = e.target.files[0].name;
    $("#file").val(fileName);

    var reader = new FileReader();
    reader.onload = function(e) {
        // get loaded data and render thumbnail.
        document.getElementById("preview").src = e.target.result;
    };
    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
    });
</script>

Buat file penyimpanan. php

Menyimpan file. php digunakan untuk menyimpan gambar yang dipilih oleh pengguna. Gambar akan diunggah ke direktori gambar menggunakan metode move_uploaded_file()

Nama gambar juga akan tersimpan di tabel gambar di database upload_file yang sudah kita buat di mysql

<?php

    if (isset($_POST['btn_simpan'])) {
        //Include file koneksi, untuk koneksikan ke database
        include 'database.php';
        //Cek apakah ada kiriman form dari method post
        if ($_SERVER["REQUEST_METHOD"] == "POST") {

            $ekstensi_diperbolehkan	= array('png','jpg');
            $gambar = $_FILES['gambar']['name'];
            $x = explode('.', $gambar);
            $ekstensi = strtolower(end($x));
            $file_tmp = $_FILES['gambar']['tmp_name'];

            if (!empty($gambar)){
                if (in_array($ekstensi, $ekstensi_diperbolehkan) === true){
    
                    //Mengupload gambar
                    move_uploaded_file($file_tmp, 'gambar/'.$gambar);

                    $sql="insert into gambar (gambar) values ('$gambar')";

                    $simpan_bank=mysqli_query($kon,$sql);

                    if ($simpan_bank) {
                        header("Location:index.php?add=berhasil");
                    }
                    else {
                        header("Location:index.php?add=gagal");
                    }
                    
                }
            }else {
                $gambar="bank_default.png";
            }
        }

    }
?>

_

Buat file hapus. php

Menghapus berkas. php berfungsi untuk menghapus gambar yang diinginkan. Gambar akan dihapus dari direktori proyek kami menggunakan fungsi unlink(). Selain itu, data citra di database juga akan terhapus

<?php
    include 'database.php';

    $id_gambar=$_GET["id_gambar"];
    $gambar=$_GET["gambar"];
    $sql="delete from gambar where id_gambar=$id_gambar";
    $hapus_bank=mysqli_query($kon,$sql);

    //Menghapus file gambar
    unlink("gambar/".$gambar);

    if ($hapus_bank) {
        header("Location:index.php?hapus=berhasil");
    }
    else {
        header("Location:index.php?hapus=gagal");

    }
?>

Cobalah

Berikut adalah hasil pengujian dari tampilan tutorial di atas

Gambar di sebelah kiri adalah tampilan folder gambar di direktori aplikasi kita di htdocs, sedangkan di sebelah kanan adalah tampilan dari aplikasi upload file gambar yang dibuka melalui browser

Terlihat dari contoh demo diatas saya mencoba mengupload 2 file gambar dan mencoba menghapus salah satunya. File yang dihapus di direktori juga akan dihapus

Sekian tutorial kali ini tentang cara membuat fitur upload file gambar dengan PHP dan MySQL menggunakan CSS Bootstrap dan Jquery. Jika tutorial ini dapat membantu semua orang yang belajar pemrograman web

Unduh Kode Sumber

Bagi teman-teman yang ingin source code aplikasi sederhana contoh upload file foto/gambar di php bisa download dari link dibawah ini, tapi sebelumnya tolong kasih jempol (like) di fanpage Kelas Programmer, terima kasih atas dukungannya

Bisakah MySQL menyimpan gambar?

MySQL memiliki tipe data BLOB (binary greater object) yang dapat menampung data biner dalam jumlah besar. Tipe data BLOB sangat cocok untuk menyimpan data gambar .