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

Create a database as wallpaper.
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

Fill in the table using the following query :

insert  into `myimage`(`id`,`link`) values (1,'http://4.bp.blogspot.com/-nT42I1cQpTQ/Umqq67yIMJI/AAAAAAAACPI/5Mew76YgKI0/s600/Final_Fantasy_7_Tifa_Cosplay_by_Chiara_01.png');
insert  into `myimage`(`id`,`link`) values (2,'http://2.bp.blogspot.com/-WZq94gRIi5E/Tb2olQqVedI/AAAAAAAADBg/lu4zpC8fh6Q/s600/Final_Fantasy_XIII-2_lightning.jpg');
insert  into `myimage`(`id`,`link`) values (3,'http://2.bp.blogspot.com/-cT1O387TmOI/UFYi7R_BU6I/AAAAAAAACI4/d8mm5bp_idE/s600/hd-game-wallpaper-final-fantasy-vii-hd-3d-final-fantasy-achtergrond.jpg');
insert  into `myimage`(`id`,`link`) values (4,'http://1.bp.blogspot.com/-o-9bYAUUank/UZ_9PS-gj_I/AAAAAAAABsQ/XCQGECYyZhc/s600/Mickey_Mouse_11.png');
insert  into `myimage`(`id`,`link`) values (5,'https://2.bp.blogspot.com/-SEP-Chk1sjo/VswWiY6hJ-I/AAAAAAAAAdY/PxjIfJTX5ws/s600/Ff8-rinoa.jpg');
insert  into `myimage`(`id`,`link`) values (6,'https://4.bp.blogspot.com/-MSkbwzBwf94/VswWpUHeaEI/AAAAAAAAAdc/gZP2SKfnQmo/s600/Yunasending.jpg');
insert  into `myimage`(`id`,`link`) values (7,'https://3.bp.blogspot.com/-c6gsexcQGmA/VswW0JUYjqI/AAAAAAAAAdg/O443KyCAGas/s600/741-Donald-Duck.jpg');

insert into `myimage`(`id`,`link`) values (1,'http://4.bp.blogspot.com/-nT42I1cQpTQ/Umqq67yIMJI/AAAAAAAACPI/5Mew76YgKI0/s600/Final_Fantasy_7_Tifa_Cosplay_by_Chiara_01.png');

insert into `myimage`(`id`,`link`) values (2,'http://2.bp.blogspot.com/-WZq94gRIi5E/Tb2olQqVedI/AAAAAAAADBg/lu4zpC8fh6Q/s600/Final_Fantasy_XIII-2_lightning.jpg');

insert into `myimage`(`id`,`link`) values (3,'http://2.bp.blogspot.com/-cT1O387TmOI/UFYi7R_BU6I/AAAAAAAACI4/d8mm5bp_idE/s600/hd-game-wallpaper-final-fantasy-vii-hd-3d-final-fantasy-achtergrond.jpg');

insert into `myimage`(`id`,`link`) values (4,'http://1.bp.blogspot.com/-o-9bYAUUank/UZ_9PS-gj_I/AAAAAAAABsQ/XCQGECYyZhc/s600/Mickey_Mouse_11.png');

insert into `myimage`(`id`,`link`) values (5,'https://2.bp.blogspot.com/-SEP-Chk1sjo/VswWiY6hJ-I/AAAAAAAAAdY/PxjIfJTX5ws/s600/Ff8-rinoa.jpg');

insert into `myimage`(`id`,`link`) values (6,'https://4.bp.blogspot.com/-MSkbwzBwf94/VswWpUHeaEI/AAAAAAAAAdc/gZP2SKfnQmo/s600/Yunasending.jpg');

insert into `myimage`(`id`,`link`) values (7,'https://3.bp.blogspot.com/-c6gsexcQGmA/VswW0JUYjqI/AAAAAAAAAdg/O443KyCAGas/s600/741-Donald-Duck.jpg');

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

<?php $server = "localhost"; $username = "root"; $password = ""; $database = "wallpaper"; // database name mysql_connect($server,$username,$password) or die("Failed to connect database"); mysql_select_db($database) or die("Database error"); $query = mysql_query("select * from myimage order by id desc"); $post = array(); while($data=mysql_fetch_array($query)){ $post[]=array( "link"=>$data['link'],
			"id"=>$data['id']
		);
}
echo json_encode($post);
?>

<?php $server = "localhost"; $username = "root"; $password = ""; $database = "wallpaper"; // database name mysql_connect($server,$username,$password) or die("Failed to connect database"); mysql_select_db($database) or die("Database error"); $query = mysql_query("select * from myimage order by id desc"); $post = array(); while($data=mysql_fetch_array($query)){ $post[]=array( "link"=>$data['link'],

"id"=>$data['id']

);

}

echo json_encode($post);

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
 <ion-pane>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<ion-pane>

<ion-nav-view></ion-nav-view>

</ion-pane>

</body>

</html>

2. Add route on app.js

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
         .state('full', {
                url: "/full/:fullid",
                templateUrl: "templates/full.html",
                controller:"MyController"
            })
        .state('lists', {
                url: "/lists",
                templateUrl: "templates/list.html",
                controller:"MyController"
            });
        $urlRouterProvider.otherwise('/lists');
    });

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('full', {

url: "/full/:fullid",

templateUrl: "templates/full.html",

controller:"MyController"

})

.state('lists', {

url: "/lists",

templateUrl: "templates/list.html",

controller:"MyController"

});

$urlRouterProvider.otherwise('/lists');

});

3. Create new controller with name “MyController”

angular.module('starter.controllers', [])
.controller("MyController", function($scope, $state, $stateParams,$http ) {
   $scope.images = [];  
   $scope.fullid=$stateParams.fullid;
   $http.get('http://localhost/wallpaper/list.php').then(function(resp) 
   {
          $scope.images = resp.data;
          console.log('Success', resp);
   }, function(err) {
          console.error('ERR', err);
  });
   
});

angular.module('starter.controllers', [])

.controller("MyController", function($scope, $state, $stateParams,$http ) {

$scope.images = [];

$scope.fullid=$stateParams.fullid;

$http.get('http://localhost/wallpaper/list.php').then(function(resp)

{

$scope.images = resp.data;

console.log('Success', resp);

}, function(err) {

console.error('ERR', err);

});

Below the full script of app.js

angular.module('starter', ['ionic', 'starter.controllers'])


.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
         .state('full', {
                url: "/full/:fullid",
                templateUrl: "templates/full.html",
                controller:"MyController"
            })
        .state('lists', {
                url: "/lists",
                templateUrl: "templates/list.html",
                controller:"MyController"
            });
        $urlRouterProvider.otherwise('/lists');
    });

angular.module('starter.controllers', [])
.controller("MyController", function($scope, $state, $stateParams,$http ) {
   $scope.images = [];  
   $scope.fullid=$stateParams.fullid;
   $http.get('http://localhost/wallpaper/list.php').then(function(resp) 
   {
          $scope.images = resp.data;
          console.log('Success', resp);
   }, function(err) {
          console.error('ERR', err);
  });
   
});

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if(window.cordova && window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

cordova.plugins.Keyboard.disableScroll(true);

}

if(window.StatusBar) {

StatusBar.styleDefault();

}

});

})

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('full', {

url: "/full/:fullid",

templateUrl: "templates/full.html",

controller:"MyController"

})

.state('lists', {

url: "/lists",

templateUrl: "templates/list.html",

controller:"MyController"

});

$urlRouterProvider.otherwise('/lists');

});

angular.module('starter.controllers', [])

.controller("MyController", function($scope, $state, $stateParams,$http ) {

$scope.images = [];

$scope.fullid=$stateParams.fullid;

$http.get('http://localhost/wallpaper/list.php').then(function(resp)

{

$scope.images = resp.data;

console.log('Success', resp);

}, function(err) {

console.error('ERR', err);

});

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

list.html

<ion-view title="Users">
	<ion-header-bar class="bar-stable">


<h1 class="title">Image Gallery</h1>


    </ion-header-bar>
   <ion-content ng-controller="MyController" >


<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">


<div class="col col-25 " ng-if="$index < images.length">
                  <a href="#/full/{{images[$index].id}}"><img ng-src="{{images[$index].link}}" width="100%" /></a>
              </div>




<div class="col col-25 " ng-if="$index + 1 < images.length">
                 <a href="#/full/{{images[$index+1].id}}">  <img ng-src="{{images[$index + 1].link}}" width="100%" /></a>
              </div>




<div class="col col-25 " ng-if="$index + 2 < images.length">
                 <a href="#/full/{{images[$index+2].id}}">  <img ng-src="{{images[$index + 2].link}}" width="100%" /></a>
              </div>




<div class="col col-25 " ng-if="$index + 3 < images.length">
                 <a href="#/full/{{images[$index+3].id}}">  <img ng-src="{{images[$index + 3].link}}" width="100%" /></a>
              </div>


          </div>


      </ion-content>
</ion-view>

<ion-view title="Users">

<ion-header-bar class="bar-stable">

<h1 class="title">Image Gallery</h1>

</ion-header-bar>

<ion-content ng-controller="MyController" >

</div>

</div>

</div>

</div>

</ion-content>

</ion-view>

Full.html

<ion-view title="Users">
<ion-header-bar class="bar-stable">
      <a class="button icon-left ion-chevron-left button-clear button-dark" href="#/lists"></a>
      </ion-header-bar>
	<ion-content ng-controller="MyController" >
		<ion-item ng-repeat="img in images | filter:{ id: fullid }">
			<image ng-src="{{img.link}}" width="100%" />
		</ion-item>
	</ion-content>
</ion-view>

<ion-view title="Users">

<ion-header-bar class="bar-stable">

</ion-header-bar>

<ion-content ng-controller="MyController" >

<ion-item ng-repeat="img in images | filter:{ id: fullid }">

</ion-item>

</ion-content>

</ion-view>

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

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 🙂

Bio
Latest Posts

Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Latest posts by Sigit Prasetya Nugroho (see all)

Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1 - January 4, 2019
How To Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel - December 15, 2018
Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018

6 Comments

Add your comment

james December 14, 2016 at 7:02 am
the image not showing, can u help me?
- Sigit Prasetya Nugroho December 14, 2016 at 8:22 am
  what is the error ?
Niket naik September 23, 2017 at 1:23 pm
I am getting the error at many places. can you please share the whole code as a zip file? I really need for it
- Sigit Prasetya Nugroho September 24, 2017 at 4:51 am
  dear niket naik,
  sorry, i lost the source code because my old hard disk was corrupt.
  thank you
RAVIKUMAR SAVSANI December 17, 2017 at 12:58 pm
How to integrate cordova social sharing with this image gallery?
- Sigit Prasetya Nugroho December 17, 2017 at 2:31 pm
  I will answer it ASAP 🙂

seegatesite

Seegatesite.com – Programming Tutorial , Sharing , How and Learn Together

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

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

Creating Web Services using mysql and php

Creating ionic framework Project

list.html

Full.html

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

Sigit Prasetya Nugroho

Latest posts by Sigit Prasetya Nugroho (see all)

6 Comments

Leave a Comment Cancel reply

Column Name	Data Type	Length	PK?	Not Null?	Auto Incr?
id	int	11	V	V	V
link	text