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.
Table of Contents
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 :1234567insert 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 :123456<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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> |
2. Add route on app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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”
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <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> |
Full.html
1 2 3 4 5 6 7 8 9 10 | <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> |
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 🙂
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.
the image not showing, can u help me?
what is the error ?
I am getting the error at many places. can you please share the whole code as a zip file? I really need for it
dear niket naik,
sorry, i lost the source code because my old hard disk was corrupt.
thank you
How to integrate cordova social sharing with this image gallery?
I will answer it ASAP 🙂