How to Create Android Image Gallery with Ionic Framework and Web Services

Seegatesite.com – create image gallery app on android using ionic php framework and web services. After introduction and installation of ionic framework, I want to continue the ionic framework tutorial, which create the image gallery application . Previously I’ve discussed how to create image galleries using android studio. Using ionic framework is much easier and faster. Let’s start the following tutorial.

How to Create Android Image Gallery with Ionic Framework and Web Services

Creating Web Services using mysql and php

  1. Create a database as wallpaper.
  2. Create a table myImage with the following scheme :
    Column Name Data Type Length PK? Not Null? Auto Incr?
    id int 11 V V V
    link text
  3. Fill in the table using the following query :

  4. Create new wallpaper’s folder and add a php file as list.php and then fill with the following code :

  5. Test the web service in a browser

    http://localhost/wallpaper/list.php

Creating ionic framework Project

1. Create new ionic framework project with name “wallpaper
ionic start wallpaper blank
2. Open folder “www” on wallpaper’s folder with your best script editor.
3. Please Edit index.html and add the code below

2. Add route on app.js

3. Create new controller with name “MyController”

Below the full script of app.js

4. Create 2 html file into templates folder to show the result :

list.html

Full.html

Finish!!. With a simple coding above, we have to create an image gallery like the screen shot below

How To Create Android Image Gallery With Ionic Framework And Web Services

To try on the server, please run ionic server with the following code

ionic serve

Build apk

ionic platform add android

ionid build android

If you want to try on your android smartphone, be sure to change the file app.js, find string “localhost” and change with your server ip address that has connected on network or your domain name.

Thus article about How to Create Android Image Gallery with Ionic Framework and Web Services, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

2 Comments

 Add your comment
  1. the image not showing, can u help me?

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.