04_MySQL_Ionic

Hi All,

Today I am going to show how to develop Ionic App for MySQL database. Hopefully you enjoyed it !!!

Credit to this website: https://medium.com/ampersand-academy/ionic-4-add-to-cart-example-using-php-mysql-b2b321a5ab1e

There are two parts that you need to:

  1. Enable mySQL and Write data to it.
  2. Write ionic app for read data from mySQL database

It is a simple example using Ionic 4 with PHP, MySQL . It used to as attendance class at different features which are:

  1. Find student name
  2. Add new student name
  3. List all student name
  4. Delete student name

The output will be like below:

                     

Step 1 : Start Apache

You can go to my previous page on how to install and start Apache based on XAMPP. Here is the link:

https://people.utm.my/shaharil/install-apache-web-server-on-windows/

Press the both buttons for Apache and MySQL module in XAMPP.

Step 2 : Create a data in MySQL

Let write the:

  • database name : u883849789_control_1516
  • table_name: attendance_control_1516

Step 3 : Copy folder control

Source Link

https://github.com/shaharil85/ionic_php_mysql

Just copy folder control and put it in your XAMPP htdocs.

Step 4 : Create the App

The three most common starters are the blank starter, tabs starter, and sidemenu starter. Get started with the ionic start command:

$ ionic start 09_list_data_localhost blank

Step 5 : Run the App

The majority of Ionic app development can be spent right in the browser using the ionic serve command:

$ cd 09_list_data_localhost 
$ ionic serve -l

Step 6 : Copy home.page.html,home.module.ts and home.ts

Just copy the home.html and home.ts file or code inside those files in the your app folder (src–>app–>home).

Run and preview it.

Source Link

https://github.com/shaharil85/ionic_php_mysql

Done !!!!