Artikel kali ini membahas tentang tutorial dalam melakukan upload gambar atau foto yang bersumber dari kamera ke dalam MySQL. Untuk upload foto ini, maka kamu membutuhkan coding backend dengan bahasa pemrograman yang kamu kuasai dalam eksekusi upload gambar ke MySQL. Penulis sendiri menggunakan bahasa pemrograman PHP sebagai backend untuk eksekusi upload tersebut ke dalam MySQL.
Sebelum memulai tutorial ini, pastikan XAMPP yang terutama Apache dan MySQL ini telah diaktifkan atau start dan mempersiapkan extension dari pihak ketiga yaitu generate Base Encode64 khusus file yang bisa diunduh dari situs KIO4 langsung disini.
Extension Base Encode 64 : http://kio4.com/appinventor/aplicaciones/com.KIO4_Base64.aix
- Menggunakan Tipe Data BLOB, ini tidak memerlukan hosting atau cloud storage sebagai penyimpanan data gambar.
- Menggunakan Encode Base64, ini membutuhkan hosting atau cloud storage.
Dari kedua cara diatas sebenarnya bisa dipelajari secara otodidak karena disini cuma fokus kepada proses upload gambar atau foto yang diambil dari kamera ke dalam MySQL di Kodular. Penulis menggunakan poin no.2 untuk upload gambar tersebut ke dalam MySQL.
Daftar Isi
MEMBUAT DATABASE, TABEL, dan ISI DATA
Pada poin ini, penulis akan memberikan database, tabel, beserta isi data dengan menggunakan PHPMyAdmin, MySQL Workbench, CMD / Terminal, dan sebagainya dengan sesuai kemampuan kamu. Penulis telah memberikan beberapa data yang akan dibuat sistem database MySQL dengan sebagai berikut:
Nama Database : dbase_galeri
Nama Tabel : tb_indoor
Isi dari field pada tabel :
- create table tb_indoor (id int(11) primary key auto_increment,
- nama_file varchar(40),
- gambar text);
Setelah kamu telah membuat sistem database seperti yang diatas, maka kamu bisa mulai ngoding dengan menggunakan bahasa pemrograman PHP untuk membuat fitur upload gambar yang diambil dari kamera ke MySQL.
MEMBUAT PROGRAM BACKEND UNTUK MEMBUAT FITUR UPLOAD GAMBAR YANG DIAMBIL DARI KAMERA KE MYSQL
Pada poin ini, kamu bisa memulai dalam melakukan ngoding untuk membuat fitur upload gambar dari kamera ke dalam tabel indoor yang terdapat pada database galeri dengan menggunakan bahasa pemrograman PHP sebagai backend. Penulis akan membuat semua itu dengan menggunakan server lokal dari XAMPP dan Text Editor yang menggunakan Visual Studio Code atau kamu bisa menggunakan Text Editor dan server yang berasal dari Control Panel yang terdapat di hosting atau VPS.
Untuk tutorial
MEMBUAT FOLDER KHUSUS UPLOAD GAMBAR
1. Buka folder “C:\xampp\htdocs” (direktori bisa mengikuti dengan sistem operasi di laptop atau PC).
2. Buatlah folder dengan bernama “upload_gambar_kamera_mysql_kodular”, tekan Enter.
3. Di dalam folder tersebut, buat lagi folder untuk menyimpan gambar yang telah diupload dengan nama “foto”, tekan Enter.
Setelah, kamu membuat folder khusus upload gambar yang diambil dari kamera ke dalam MySQL di Kodular. Maka, kamu bisa membuat program backend untuk upload gambar tersebut ke MySQL dengan bahasa pemrograman PHP.
MEMBUAT PROGRAM BACKEND UNTUK UPLOAD GAMBAR KE MYSQL
Pada poin ini, kamu bisa memulai dalam melakukan ngoding untuk upload gambar yang diambil dari kamera ke dalam tabel barang yang terdapat pada database toko dan hosting dengan menggunakan bahasa pemrograman PHP sebagai backend . Penulis akan membuat semua itu dengan menggunakan server lokal dari XAMPP dan Text Editor yang menggunakan Visual Studio Code atau kamu bisa menggunakan Text Editor dan server yang berasal dari Control Panel yang terdapat di hosting atau VPS.
Kode perintah untuk upload gambar yang diambil dari kamera ke MySQL :
<?php
//Koneksi database MySQL - PHP
$host = "localhost"; //Nama Host Server (localhost sebagai default)
$user = "root"; // Nama Pengguna
$pass = ""; // Kata Sandi
$dbase = "dbase_galeri"; // Nama Database
$koneksi = mysqli_connect($host,$user,$pass,$dbase);
//Tempat input data
$Nama_File = $_POST['nama_file'];
$Encode_Base64 = $_POST['encode_base64'];
//Kode perintah ini digunakan jika tidak membuat custom nama file dari aplikasi.
//$filename = "bukti-foto_";
$snow = strtotime(date("Y-m-d H:i:s"));
$gambar = $Nama_File . $snow . ".png";
//Jika tidak upload gambar atau gagal konversi file ke Encode Base64.
if($Encode_Base64 == null || $Encode_Base64 == ''){
$query = "INSERT INTO tbl_indoor VALUES (null, '$Nama_File','')";
}
//Jika ada upload gambar.
else{
$query = "INSERT INTO tbl_indoor VALUES (null, '$Nama_File', '$gambar')";
}
$result = mysqli_query($koneksi, $query);
//Jika tidak ada error dalam upload gambar ke dalam MySQL.
if($result){
//Melakukan Deskripsi Code Base64 menjadi file utuh.
$bin = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $Encode_Base64));
//Menambahkan file gambar baru setelah upload ke dalam hosting / server.
$ifp = fopen("foto/". $gambar, "wb");
fwrite( $ifp, $bin );
fclose( $ifp );
}
//Jika gagal upload gambar ke dalam MySQL.
else{
echo"2";
}
//Menutupi koneksi MySQL
mysqli_close($koneksi);
?>Setelah dibuat program backend untuk upload gambar yang diambil dari kamera ke MySQL, maka kamu bisa menyimpan file dengan memberikan nama “upload_gambar_kamera_mysql.php” di Text Editor. Misalkan, server lokal XAMPP, maka simpanlah file tersebut ke dalam folder “htdocs” pada XAMPP atau mengikuti aturan hosting dalam menyimpan file teks.
MEMBUAT APLIKASI ANDROID UNTUK UPLOAD GAMBAR DARI KAMERA KE MYSQL DI KODULAR
Pada poin ini, kamu bisa mulai dalam membuat aplikasi Android yang dikhususkan untuk fitur upload gambar yang diambil dari kamera ke server / hosting.
1. Bukalah kembali web browser di laptop atau PC kamu.
2. Kunjungi situs Kodular App Creator (c.kodular.io).
3. Buatlah project baru yang dikhususkan untuk menampung item data yang diambil dari database MySQL ke dalam Spinner.
4. Rancanglah tampilan aplikasi seperti ini.
5. Klik Pallete >>> Extension.
6. Klik Import Extension. Disini kamu memasukkan Extension KIO4 Base64 ke dalam project aplikasi.
7. Klik NO FILE CHOSEN.
8. Pilihlah file extension “com.KIO4_Base64.aix”, klik Open / OK.
9. Klik IMPORT FROM FILE.
10. Drag Extension Base64 tadi ke dalam Screen.
11. Klik Blocks.
12. Buatlah blok program variabel untuk menampung data pada konversi Encode Base64 dari file gambar.
13. Buatlah blok program untuk membuat event mulai.
14. Buatlah blok program untuk event upload.
15. Buatlah blok program tombol untuk membuka kamera.
16. Buatlah blok program untuk eksekusi program pada saat membuka aplikasi.
17. Buatlah blok program function untuk pengisian upload gambar yang akan digunakan di dalam komponen Web.
18. Buatlah blok program untuk menampilkan hasil pemotretan foto beserta konversi file gambar menjadi teks yang berisi encode base64.
19. Buatlah blok program untuk eksekusi upload gambar ke dalam MySQL (file tersebut tersimpan di server atau cloud storage).
20. Buatlah blok program untuk proses beserta hasil upload gambar tersebut ke dalam MySQL.
21. Klik Test >>> Connect to Companion.
22. Masukkan kode Companion ke dalam Aplikasi Kodular Companion yang terpasang di Android.
TESTING APLIKASI ANDROID
Pada poin ini, penulis memberikan tampilan gambar dari hasil pengujian aplikasi Android yang dikhususkan untuk fitur upload gambar yang diambil dari kamera ke MySQL.
1. Tampilan pada saat awal membuka aplikasi.
2. Tampilan aplikasi setelah mengambil kamera.
3. Tampilan aplikasi setelah upload gambar ke MySQL.
HASIL UPLOAD GAMBAR KE MYSQL
Poin ini membahas tampilan hasil upload gambar yang diambil dari kamera ke MySQL (berisi nama file gambar) dan server / hosting (untuk menyimpan gambar dengan nama file yang tertera di dalam tabel pada database).
1. Tampilan Hasil Input Data ke Tabel tbl_indoor.
2. Tampilan hasil tampungan file gambar yang telah upload di server.
Selesai.
CATATAN
Ada beberapa catatan yang diharuskan diperhatikan sebelum melakukan upload gambar ke dalam server dengan sebagai berikut:
- Apabila batasan izin maksimal ukuran file upload itu kecil, maka kamu perlu bantuan untuk kompresi gambar agar ukuran file tersebut menjadi kecil.
- Apabila batasan izin maksimal ukuran file upload itu besar, maka kamu membutuhkan kecepatan akses jaringan jauh lebih tinggi.
- Durasi waktu maksimal upload file gambar ke dalam server.
Hal ini bisa dilakukan di bagian php.ini yang terdapat di dalam XAMPP. Kamu bisa mencari tentang itu di internet.
PENUTUP
Kini, kamu bisa membuat fitur untuk upload gambar dengan sesuai kebutuhan kamu pada aplikasi Android yang dibuatkan dengan menggunakan Kodular. Fitur ini akan bekerja untuk menyimpan gambar yang telah diupload di aplikasi melalui take camera ke dalam MySQL dan server / hosting.
Hal ini cocok bagi kamu yang ingin membuat aplikasi Android yang melibatkan banyak komponen media komunikasi yaitu foto atau gambar seperti galeri, foto observasi, portal berita, dan sebagainya.
