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. Show 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 more1. Membuat Database dan TabelBuatlah sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel baru di dalamnya dengan nama gambar. Ikuti struktur tabelnya seperti gambar di bawah ini. 2. Membuat Folder drag-n-drop dan File index.phpBuatlah 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.
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.phpBuatlah 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
4. Membuat File data.phpBuatlah 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.
5. Membuat Folder uploadLangkah 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 6. Uji CobaSaatnya 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 fileSekian 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. |