Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini kita akan membahas tutorial pemrograman yang sangat seru, yaitu cara membuat drag & drop file beserta prosesnya dengan php, mysql, dan dropzone js. Penasaran?, ayo ikuti tutorialnya berikut ini.

Ada kalanya web yang kalian bangun membutuhkan fitur hebat ini, yaitu drag & drop upload file. Dimana secara UX fitur ini lebih memudahkan user dalam mengunggah file yang ada di komputer. Contoh lainnnya adalah gdrive, dimana untuk mengunggah file penguna hanya perlu menggeser file dari komputer ke gdrive itu sendiri.

Intinya jika kalian mampir di sini, artikel ini adalah pilihan yang tepat. Karena saya akan membahasnya lengkap dengan proses storing data ke dalam database dan menampilkan datanya menggunakan jquery ajax sehingga user tidak perlu reload halaman.

Baca Artikel Lain ✨

📰 1. Cara Cepat Membuat Back-end Restful API Tanpa Coding dengan Typicode Json Server read more

📰 2. Cara Menggunakan Library Datatable Serverside di Laravel Moodle read more

📰 3. Cara Membuat Import Data Excel ke Database Mysql dengan php read more

📰 4. Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API read more

Cara Membuat Drag & Drop dengan Dropzone Js

1. Membuat Database dan Tabel

Buatlah sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel baru di dalamnya dengan nama gambar. Ikuti struktur tabelnya seperti gambar di bawah ini.

Struktur tabel gambar

2. Membuat Folder drag-n-drop dan File index.php

Buatlah sebuah folder baru di dalam htdocs dengan nama drag-n-drop. Lalu buat sebuah file baru di dalamnya dengan nama index.php lalu copy script di bawah ini dan pastekan.

    

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Dropzone css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.6/dropzone.css"
            integrity="sha512-7uSoC3grlnRktCWoO4LjHMjotq8gf9XDFQerPuaph+cqR7JC9XKGdvN+UwZMC14aAaBDItdRj3DcSDs4kMWUgg=="
            crossorigin="anonymous" />
        <!-- bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>
    
    <body>
        <br>
        <div class="container">
            <form action="upload.php" class="dropzone" id="myDropzone">
                <div id="data">
                    <!-- file yang telah disimpan di database akan ditampilkan disini -->
                </div>
            </form>
        </div>
        <!-- <script src="js/dropzone.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.6/dropzone.js"
            integrity="sha512-/diY7kiMCU8WBbgrhBMJjMDtrsJGPP2LQG4gaw9tHRYlQ50sJLhAQZH/MSpEPdQHcY0YXYfsosyjMArCDTa3SA=="
            crossorigin="anonymous"></script>
        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <!-- bootstrap js  -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
        </script>
        <script>
            // saat dokumen selesai dibuat maka jalankan fungsi update 
            $(document).ready(function () {
                update();
            });
    
            // myDropzone adalah id form 
            Dropzone.options.myDropzone = {
                // saat upload file berhasil maka jalankan fungsi update 
                success: function (file, data) {
                    update()
                }
            }
    
            var myDropzone = new Dropzone("#myDropzone");
    
            //jika proses upload selesai, maka hapus field atau thumbnail upload
            myDropzone.on("complete", function (file) {
                myDropzone.removeFile(file);
            });
    
            //fungsi tampil data
            function update() {
                $.ajax({
                    url: 'data.php',
                    type: 'get',
                    success: function (data) {
                        $('#data').html(data);
                    }
                });
            }
    
        </script>
    </body>
    
    </html>

Penjelasan:

class="dropzone" digunakan untuk membuat seluruh area di dalamnya bisa digunakan sebagai drag and drop file. <div id="data">...</div> digunakan untuk menampilkan data dari database menggunakan jquery ajax. myDropzone.removeFile(file); digunakan untuk menghapus file yang sudah diupload. function update() {} digunakan untuk mengupdate dari dari database.

Saya juga sudah menyertakan penjelasan tambahan dengan menggunakan komentar pada script di atas. Jika ada yang membingungkan silahkan langsung tanya di kolom komentar.

3. Membuat File upload.php

Buatlah sebuah file baru lagi dengan nama upload.php. File ini berfungsi untuk memproses dan menyimpan gambar ke dalam database. Silahkan copy script di bawah ini dan pastekan ke dalam file tersebut

    

<?php
    if(!empty($_FILES)){
        //menghubungkan ke database
        $conn = new mysqli('localhost', 'root', '', 'latihan');
     
        $targetDir = "upload/";
        $namaFile = $_FILES['file']['name'];
        $targetFile = $targetDir.$namaFile;
    
        // move_uploaded_file digunakan untuk memindahkan file dari tempat asal ke tujuan
        if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
            //memasukkan informasi file ke dalam database
            $conn->query("INSERT INTO gambar (nama_file, diupload) VALUES('".$namaFile."','".date("Y-m-d H:i:s")."')");
        }
    }
?>

4. Membuat File data.php

Buatlah sebuah file baru lagi dengan nama data.php. File ini berfungsi untuk menampilkan data yang sudah disimpan di dalam database, dan file ini kita include di dalam file index dengan menggunakan metode ajax agar data bisa tampil tanpa reload halaman.

        

<div class="row">
    <?php
        //koneksi ke database
        $koneksi    = new mysqli('localhost', 'root', '', 'latihan');
        //mengambil data ke tabel gambar
        $select     = mysqli_query($koneksi, 'select * from gambar');
        //melakukan looping dengan while
        while ($hasil = mysqli_fetch_array($select)) {
    ?>
    <div class="col-md-2">
        <!-- data ditampilkan dalam bentuk gambar -->
        <img src='upload/<?php echo $hasil['nama_file'];?>' width="100%" />
        <!-- data ditampilkan dalam bentuk text  -->
        <p style="text-align:center"><?php echo $hasil['nama_file']; ?></p>
    </div>
    <?php
        }
    ?>
</div>

5. Membuat Folder upload

Langkah terakhir, buatlah sebuah folder baru dengan nama upload. Folder ini berada di dalam folder drag-n-drop dan sejajar dengan file index.php, upload.php, dan data.php. Tidak perlu diisi apapun, karena folder ini akan menampung semua file yang akan kita upload

Struktur folder dan file

6. Uji Coba

Saatnya uji coba, bukalah browser, lalu ketik url http://localhost/drag-n-drop. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Uji coba drag and drop file

Sekian tutorial cara membuat drag & drop file dan prosesnya dengan php dan dropzone js. Semoga tulisan singkat ini dapat membantu kalian, jika ada yang ingin ditanyakan silahkan langsung tanyakan di kolom komentar di bawah ini dan mari kita diskusikan bersama. Sampai jumpa di tutorial menarik lainnya.

Sahretech

Cara Membuat Drag & Drop File dan Prosesnya dengan Php, Mysql dan Dropzone Js

Cara Membuat Drag & Drop dengan Dropzone Js

1. Membuat Database dan Tabel

2. Membuat Folder drag-n-drop dan File index.php

Penjelasan:

3. Membuat File upload.php

4. Membuat File data.php

5. Membuat Folder upload

6. Uji Coba

No comments

Kategori Pemrograman

Popular

Facebook