• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

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

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » 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 Sigit Prasetya Nugroho ∙ February 23, 2016 ∙ 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.

Table of Contents

  • 1 How to Create Android Image Gallery with Ionic Framework and Web Services
    • 1.1 Creating Web Services using mysql and php
    • 1.2 Creating ionic framework Project
    • 1.3 Thus article about How to Create Android Image Gallery with Ionic Framework and Web Services, hope useful 🙂

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 :

  • Easily Download and Install Pokemon Go on Android in Unregistered Country
  • Tutorial How to Create Download File From Url On Ionic Framework
  • Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu

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 :

  • Easily Download and Install Pokemon Go on Android in Unregistered Country
  • Tutorial How to Create Download File From Url On Ionic Framework
  • Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu
  • Android Tutorial – Display Image To Android Gridview From Url Using Picasso
  • Android Tutorial – Step By Step Learning Android Sqlite Database for Beginner
  • Android Tutorial – Using AsyncTask for Android With Simple Example for Beginners

Avatar for Sigit Prasetya Nugroho

About 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.

Reader Interactions

Comments

  1. Avatar for jamesjames says

    December 14, 2016 at 7:02 am

    the image not showing, can u help me?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 14, 2016 at 8:22 am

      what is the error ?

      Reply
  2. Avatar for Niket naikNiket naik says

    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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      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

      Reply
  3. Avatar for RAVIKUMAR SAVSANIRAVIKUMAR SAVSANI says

    December 17, 2017 at 12:58 pm

    How to integrate cordova social sharing with this image gallery?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 17, 2017 at 2:31 pm

      I will answer it ASAP 🙂

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

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

Primary Sidebar

Welcome to my Home,

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



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com