.png)
In this tutorial, you'll learn how to fetch and display data from a MySQL database onto your Kodular or MIT App Inventor screen using a mysql.php script hosted on your web server. The video walks you through setting up the necessary files, connecting your app to the database, handling response codes, writing SQL SELECT queries, and displaying the results in a clean format using labels. You’ll also learn how to parse CSV response content, loop through dynamic data, and fix common mistakes like incorrect table names or label assignments. Whether you're using Kodular or MIT App Inventor, the process is nearly identical, and you'll be able to export/import the AIA file between the two platforms. Perfect for beginners and intermediate users looking to build database-powered apps without external APIs.
Why MIT App Inventor Instead of Kodular?
Due to temporary issues with the Kodular Companion, the project is demonstrated using MIT App Inventor, which functions almost identically. The same AIA file can be exported and imported between the two platforms without any issues.
MySQL Setup and PHP Script
A downloadable mysql.php script is provided (link shown in video).
This file must be uploaded to your public_html directory on your web server.
Inside the PHP file, you’ll:
- Enter your database credentials
- Use a secret SQL key to secure your requests
Once uploaded, the file URL (e.g., https://yourdomain.com/mysql.php) will be used in your Kodular/App Inventor project.
App Configuration in Kodular / App Inventor
Add a Web component to your app
Set global variables:
- Global URL = link to your mysql.php
- Global Key = the secret key defined in your PHP file
Add required blocks for:
- Screen initialization
- Error handling
- Web1 GotText response
Handling Web Responses
Only responseCode = 200 is used (for SELECT queries).
Other codes like 201 for INSERT/UPDATE/DELETE are removed as they’re not needed in this example.
Data is fetched and organized using:
- list from csv table
- for each number loop
A global variable (name) is used to store parsed data for display.
Querying and Displaying Data
A SELECT * FROM mytable query is used.
On button click, the query is triggered, and results are shown on a label.
A loop iterates through the returned rows.
Index is started from 2 to skip column headers.
Data is displayed on lbl_name.Text.
Testing and Troubleshooting
Emulator and Companion QR code are used for live testing.
Final app correctly displays MySQL data on-screen.
Key Features Covered
- MySQL + PHP backend setup
- Kodular/App Inventor database integration
- CSV data parsing
- Dynamic list processing
- UI data display
Need Help?
If you have any questions, run into issues, or want more advanced functionality (like INSERT, UPDATE, DELETE), feel free to comment below. I’ll be happy to help!
Stay Connected
Subscribe to KodularFreeAIA for more tutorials like this on Kodular, App Inventor, and backend integration.
Download & Resources
✅ Download