CRUD MySQL App Inventor Kodular

Berjumpa lagi dengan saya, pada postingan kali ini akan menjelaskan tutorial membuat aplikasi CRUD MySQL App Inventor Kodular. Jika pada tutorial sebelumnya yaitu membuat aplikasi CRUD yang menggunakan TinyDB sebagai tempat menyimpan data, kali ini aplikasi yang dibuat akan menyimpan data ke database server lokal dengan bantuan MySQL. Aplikasi yang dibuat untuk menyimpan data kali ini akan menggunakan konsep CRUD, CRUD sendiri merupakan singkatan dari “Create”,”Read”, “Update”, “Delete” dimana aplikasi dapat menyimpan data, membaca data, merubah data dan menghapus data yang ada di database.

CRUD MySQL App Inventor Kodular
CRUD MySQL App Inventor Kodular

sebelumnya apakah kamu tahu apa itu MySQL?

MySQL adalah sebuah aplikasi atau perangkat lunak yang dapat membantu pengguna dalam memanajemen basis data atau mengelola basis data dengan menggunakan perintah dasar SQL (Stuctured Query Language).

Dalam membuat aplikasi CRUD MySQL disini saya menggunakan App Inventor, namun tentunya kode ataupun desain yang dibuat pada App Inventor dapat juga di jalankan pada Kodular. Jadi kamu bebas memilih mau menggunakan App Inventor atau Kodular.

Cara membuat aplikasi CRUD MySQL App Inventor Kodular

Hal pertama yang harus dilakukan adalah Login terlebih dahulu ke App Inventor untuk membuat aplikasinya, jika kamu menggunakan Kodular silahkan login. Apbila sudah login, buat nama projectnya dengan nama CRUD MySQL.

Buat Database

Setelah kamu login di App Inventor atau Kodular, selanjutnya adalah membuat database sebagai tempat untuk menyimpan datanya. Disini saya menggunakan database dari server lokal yang menggunakan jaringan LAN (Local Area Network), jika kamu tidak mempunyai server sendiri kamu dapat membuatnya dengan menggunakan bantuan dari aplikasi XAMPP.

Baca juga: Menyimpan data ke Firebase menggunakan App Inventor Kodular

Jika sudah menginstall XAMPP, kamu dapat menjalankan aplikasi XAMPP untuk membuat databasenya. Buka XAMPP Control Panel kemudian klik start pada bagian Apache dan MySQL. Tunggu sebentar hingga muncul tulisan status running, jika sudah muncul running selanjutnya buka browser dan ketikkan link ini localhost/phpmyadmin di google chrome.

Buat database dengan nama yang kalian suka, kemudian buatlah sebuah tabel dengan nama warga. Pada tabel warga yang dibuat terdiri dari 3 kolom yang berisi NIK, NAMA, ALAMAT. Kamu bisa membuatnya seperti format dibawah ini.

membuat tabel di database
membuat tabel di database

NIK dibuat dengan jenis integer dengan panjang karakter 10, kemudian NAMA dibuat dengan jenis varchar dengan panjang karater 50, dan untuk ALAMAt jenisnya text.

Setelah membuat database dan tabel jangan lupa untuk membuat jaringan lokal LAN agar smartphone dapat terhubung dengan server di komputermu.

Desain Aplikasi

selanjutnya adalah perancangan desain pada aplikasi CRUD MySQL dengan App Inventor. Kamu dapat membuat rancangannya seperti gambar dibawah ini

Desain Aplikasi
Desain Aplikasi

Pada perancangan tersebut komponen yang digunakan adalah TextBox, ListView, Notifier, Web, dan Button. Komponen TextBox digunakan untuk proses intput data, kemudian ListView untuk menampilkan data yang tersimpan di database, Notifier digunakan untuk notifikasi dan Web digunakan untuk menghubungkan aplikasi dengan file php.

Upload file PHP

Agar proses CRUD MySQL dengan App Inventor atau Kodular ini dapat berjalan dengan baik, maka diperlukan file php yang digunakan sebagai penghubung antara aplikasi dengan server database. Aplikasi CRUD MySQL yang dibuat dengan App Inventor dan Kodular ini menggunakan beberapa file PHP.

Baca juga : Upload gambar/image ke database MySQL Kodular

Kamu dapat mengunduh file PHP nya disini. Kemudian jangan lupa untuk merubah data di file koneksi.php, rubah dibagian yang saya beri kotak warna merah.

file koneksi untuk untuk menghubungkan aplikasi dengan database
file koneksi untuk untuk menghubungkan aplikasi dengan database

isikan hostname dengan nama server kamu, jika kamu memakai XAMPP maka isikan localhost, kemudian isi nama usernya dengan root, dan isikan password jika terdapat password pada database jika tidak ada maka kosongkan saja, selanjutnya masukkan nama database yang sudah kamu buat di variabel $database.

Agar aplikasi CRUD MySQL App Inventor dan Kodular ini dapat menjalankan tugasnya dengan baik maka file php harus di upload ke server. Disini saya akan menyimpan filenya di folder htdocs yang ada di xampp.

simpan file php ke htdocs di xampp
simpan file php ke htdocs di xampp

Kode Program Aplikasi CRUD MySQL App Inventor Kodular

Kode program Read data

Kode program membaca data
kode program untuk membaca data

Kode program Save, Update, Delete data

kode program Save, Update, Delete data
kode program untuk Save, Update, Delete data

Kode program untuk menampilkan data

Kode program untuk menampilkan data
kode program untuk menampilkan data

pada saat mengisi url pada komponen web untuk awalan link nya gunakan alamat IPv4 LAN Address. Misal pada button save maka untuk url pada komponen web dapat diisi seperti ini http://192.168/173.1/namaweb/buat.php

Namun sebelum kamu melihat IPv4 LAD Adress-nya, kamu harus setting windows firewall terlebih dahulu dengan cara ‘buka control panel’ lalu klik ‘system and security’ klik ‘windows firewall’ kemudian klik ‘Allow a program or feature through windows firewall’ lalu centang semua yang saya tandai dengan kotak merah seperti gambar di bawah ini.

Set windows firewall
Set windows firewall

Setelah itu klik ‘ok’. Apabila kamu telah selesai mengatur windows firewall selanjutnya adalah menemukan IPv4 LAN Adress.

IP LAN adress
IP LAN adress

Untuk mengetahui IPv4 LAN address kamu, klik start pada windows lalu klik all programs dan masuk ke folde accessories kemudian klik kana pada cmd jalankan sebagai administrator, kemudian ketik ip config tekan enter, lalu scroll keatas untuk melihat IPv4 LAN Adress.

Baca juga: Menyimpan data ke Spreadsheet Airtable Kodular

Build Aplikasi

Setelah selesai membuat program selanjutnya adalah membangun aplikasinya dengan merubahnya dalam bentuk apk. Berikut dibawah ini adalah tampilan aplikasi CRUD MySQL yang dibuat dengan App Inventor Kodular.

tampilan akhir dari aplikasi yang sudah jadi
tampilan akhir dari aplikasi yang sudah jadi

untuk menjalankan aplikasi diatas smartphone harus terhubung dalam satu jaringan LAN dengan server lokal yang sudah kamu buat, agar Aplikasi CRUD MySQL App Inventor Kodular ini dapat menyimpan data, mangambil data, merubah data, dan menghapus data yang ada di database.

Sekian tutorial dari saya, jika ada yang tidak di pahami silahkan tulis dikomentar

11 comments

  1. Coding read data utk databasenya tidak tampil dilayar android. Coding sudah diketik sesuai petunjuk.. Mohon pencerahannya, ada apa yang menjadi masalah utk read data di MyAdminphp

    Salam
    Moriko

  2. Sangat bermanfaat.. Sy membuat CRUD langsung di hosting.. tapi setiap perubahan data di listview tidak langsung update. Masih delay beberapa menit baru terupdate.. gmn cara settingnya biar perubahan data langsung terupdate?

Leave a Reply

Your email address will not be published. Required fields are marked *