Seegatesite.com

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

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

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

By ∙ ∙ Android ∙ 5 Comments

Share : TwitterFacebookTelegramWhatsapp

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 NameData TypeLengthPK?Not Null?Auto Incr?
    idint11VVV
    linktext
  3. Fill in the table using the following query :

    1
    2
    3
    4
    5
    6
    7
    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');

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

    1
    2
    3
    4
    5
    6
    <?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);
    ?>

  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

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

Related Articles :

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

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 🙂

Another Android Related Post :

Reader Interactions

Comments

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.