Ionic 3 and Angular 4: Insert and Delete with Token Based Restful API
Wall Script
Wall Script
Monday, August 21, 2017

Ionic 3 and Angular 4: Insert and Delete with Token Based Restful API

This is the continued series of article on developing a mobile app with Ionic and Angular JS. This post deals with updating and deleting any post on the application. This also explains how to show the loading image by making an Ajax call. While deleting a post, it will show an alert message to confirm whether to delete or not. This post is all about this. Hope you all make use of this series of articles on Ionic and Angular to build your own mobile app.

Ionic 3 and Angular 4: Insert and Delete with Token Based Restful API


Live Demo

Part 1
Ionic 3 and Angular 4: Create a Welcome Page with Login and Logout.


Video Tutorial
Ionic 3 and Angular 4: PHP Token Based Restful API User Feed Update and Delete.


Database Design
To build the user feed system, you have to create two tables such as Users and Feed. You can check my previous tutorials for creating token-based API system.

Users
User table contains all the users registration details.
CREATE TABLE users(
user_id int AUTO_INCREMENT PRIMARY KEY,
username varchar(50),
password varchar(300),
name varchar(200),
email varchar(300));

Feed
This table contains user daily updates.
CREATE TABLE feed(
feed_id int PRIMARY KEY AUTO_INCREMENT,
feed text,
user_id_fk int,
created int
);

Download PHP Restul Project
$git clone https://github.com/srinivastamada/PHP-Slim-Restful.git


PHP RestFul Code
Simple PHP code with Slim framework, included new functions feedUpdate and feedDelete for user insert and delete operations.
<?php
require 'config.php';
require 'Slim/Slim.php';

\Slim\Slim::registerAutoloader();
$app = new \Slim\Slim();

$app->post('/login','login'); /* User login */
$app->post('/signup','signup'); /* User Signup  */
$app->post('/feed','feed'); /* User Feeds  */
$app->post('/feedUpdate','feedUpdate'); /* User Feed Update  */
$app->post('/feedDelete','feedDelete'); /* User Feed Delete  */


$app->run();

// Other Functions

function feedUpdate(){

    $request = \Slim\Slim::getInstance()->request();
    $data = json_decode($request->getBody());
    $user_id=$data->user_id;
    $token=$data->token;
    $feed=$data->feed;
    $systemToken=apiToken($user_id);

    try {
        if($systemToken == $token){
            $feedData = '';
            $db = getDB();
            $sql = "INSERT INTO feed ( feed, created, user_id_fk) VALUES 
                        (:feed,:created,:user_id)";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("feed", $feed, PDO::PARAM_STR);
            $stmt->bindParam("user_id", $user_id, PDO::PARAM_INT);
            $created = time();
            $stmt->bindParam("created", $created, PDO::PARAM_INT);
            $stmt->execute();

            $sql1 = "SELECT * FROM feed WHERE user_id_fk=:user_id ORDER BY 
                           feed_id DESC LIMIT 1";
            $stmt1 = $db->prepare($sql1);
            $stmt1->bindParam("user_id", $user_id, PDO::PARAM_INT);
            $stmt1->execute();
            $feedData = $stmt1->fetch(PDO::FETCH_OBJ);
            $db = null;
            echo '{"feedData": ' . json_encode($feedData) . '}';
        } else{
            echo '{"error":{"text":"No access"}}';
        }

    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }

}

function feedDelete(){
    $request = \Slim\Slim::getInstance()->request();
    $data = json_decode($request->getBody());
    $user_id=$data->user_id;
    $token=$data->token;
    $feed_id=$data->feed_id;
    $systemToken=apiToken($user_id);

    try {
        if($systemToken == $token){
            $feedData = '';
            $db = getDB();
            $sql = "DELETE  FROM feed WHERE user_id_fk=:user_id AND
                         feed_id=:feed_id";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("user_id", $user_id, PDO::PARAM_INT);
            $stmt->bindParam("feed_id", $feed_id, PDO::PARAM_INT);
            $stmt->execute();
            $db = null;
            echo '{"success":{"text":"Feed deleted"}}';
        } else{
            echo '{"error":{"text":"No access"}}';
        }

    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }

}
?>

home.ts
Go to Home page component and included feedUpdate and feedDelete functions.  These functions connect with feed update and delete APIs for database changes. Using unshift javascript built-in function pushing the feedUpdate result into dataSet feed object.
import {Component} from '@angular/core';
import {NavController, App, AlertControllerfrom 'ionic-angular';
import {AuthService} from "../../providers/auth-service";
import {Common} from "../../providers/common";

@Component({selector: 'page-home', templateUrl: 'home.html'})
export class HomePage {
  public userDetails : any;
  public resposeData : any;
  public dataSet : any;
  userPostData = {
    "user_id": "",
    "token": "",
    "feed": "",
    "feed_id": ""
  };

  constructor(public common : Common, public alertCtrl : AlertController, public navCtrl : NavController, public app : App, public authService : AuthService) {
    const data = JSON.parse(localStorage.getItem('userData'));
    this.userDetails = data.userData;
    this.userPostData.user_id = this.userDetails.user_id;
    this.userPostData.token = this.userDetails.token;
    this.getFeed();
  }

  getFeed() {
   // feed details function
  }

  feedUpdate() {
    if (this.userPostData.feed) {
      this.common.presentLoading();
      this.authService.postData(this.userPostData, "feedUpdate")
        .then((result) => {
          this.resposeData = result;
          if (this.resposeData.feedData) {
            this.common.closeLoading();
            this.dataSet.unshift(this.resposeData.feedData);
            this.userPostData.feed = "";
          } else {
            console.log("No access");
          }

        }, (err) => {
          //Connection failed message
        });
    }

  }

  feedDelete(feed_id, msgIndex) {
    if (feed_id > 0) {
      let alert = this.alertCtrl.create({
          title: 'Delete Feed',
          message: 'Do you want to buy this feed?',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked');
              }
            }, {
              text: 'Delete',
              handler: () => {
                this.userPostData.feed_id = feed_id;
                this.authService.postData(this.userPostData, "feedDelete")
                  .then((result) => {
                    this.resposeData = result;
                    if (this.resposeData.success) {
                      this.dataSet.splice(msgIndex, 1);
                    } else {
                      console.log("No access");
                    }
                  }, (err) => {
                    //Connection failed message
                  });
              }
            }
          ]
        });
      alert.present();
    }
  }

}
For delete function impleted with Ionic alert controller.

Creating Pre-Loading Provider
Creating new provider using Ionic generate command. If this not working please follow my previous articles.
$ionic generate provider common

commont.ts
Imported Ionic loading controller to implemente pre-loading feature for API calls. This is the most commonly used, so that we are creating this as an injectable provider.
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';

@Injectable()
export class Common {
      public loader: any;
      constructor(public loadingCtrl: LoadingController) {
         console.log('Hello Common Provider');
      }

      presentLoading(){
         this.loader = this.loadingCtrl.create({content: "Please wait ..."})
         this.loader.present();
      }

     closeLoading(){
        this.loader.dismiss();
      }

}

app.module.ts
Importing new plugins in the application module. Now go to src/app/app.module.ts and import Common for API pre-loading.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AuthService } from '../providers/auth-service';
import { SplitPane } from '../providers/split-pane';
import { Common } from '../providers/common';
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LinkyModule } from 'angular-linky';
import { MomentModule } from 'angular2-moment';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    Welcome,
    Login,
    Signup,
    TabsPage
  ],
  imports: [
    BrowserModule, HttpModule, LinkyModule, MomentModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    Welcome,
    Login,
    Signup,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen, AuthService, SplitPane, Common,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Build iOS App
Following commands for executing Xcode build, watch the video tutorial you will understand more.
$ cordova add platform ios
$ ionic build ios

Build Android App
Open Android build using Android SDK>
cordova add platform android
ionic build android

Previous Part Video Tutorial
Ionic 3 and Angular 4 Banana APP.



web notification

14 comments:

  1. after signup it will login automatically but before that it'll show some runtime error (screenshot: https://ibb.co/dODeU5). If I close the error the side menu with logout button and a blank home page. After clicking the logout button I tried logging in using the account that I created but it says "Please enter a valid username and password"

    ReplyDelete
  2. Hi Srinivas Tamada,
    Your tutorials are very useful. But I need one help I want to setup Slim Framework in my Linux share server for Application API. I search lot in google but I don't get any proper [easy] doc for setup slim framework in Linux. Please Help me.

    ReplyDelete
    Replies
    1. Contact your hosting provider to enable mod_rewrite extension for .htaccess support

      Delete
  3. Thanks Srinivas Tamada,
    your tutorials are just great, please can u make a tutorial on image upload along side with user post... thanks in advance...

    ReplyDelete
  4. HI, very helpfull buy i have a problem, if a send headers in a post or get api call always response error 404 but if, ut if user a curl command or other api test app return me the values please can you help me

    ReplyDelete
  5. Hi, I really find your tutorials very helpful. Thanks for taking the time to share your skills.

    ReplyDelete
  6. Sir this is good and very very nice tutorial

    ReplyDelete
  7. can you give any solution for this error


    D:\ionic\ionic3-angular4-signaturepad-master>ionic serve
    Error: Cannot find module 'D:\ionic\ionic3-angular4-signaturepad-master\node_mod
    ules\@ionic\app-scripts'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object. (C:\Users\Home\AppData\Roaming\npm\node_modules\ionic\
    node_modules\@ionic\cli-utils\lib\ionic-angular\app-scripts.js:9:16)
    at Generator.next ()
    at C:\Users\Home\AppData\Roaming\npm\node_modules\ionic\node_modules\tslib\t
    slib.js:103:75
    at new Promise ()
    at Object.__awaiter (C:\Users\Home\AppData\Roaming\npm\node_modules\ionic\no
    de_modules\tslib\tslib.js:99:16)
    at Object.importAppScripts (C:\Users\Home\AppData\Roaming\npm\node_modules\i
    onic\node_modules\@ionic\cli-utils\lib\ionic-angular\app-scripts.js:7:20)
    [ERROR] Error with .\node_modules\@ionic\app-scripts\package.json file:
    FILE_NOT_FOUND

    ReplyDelete
  8. hello can you give example, httpClient call with custom header parameter, I always failed the header parameter always became Access-Control-Request-Headers

    ReplyDelete
  9. Thanks bro but how to update feed table using token

    ReplyDelete

mailxengine Youtueb channel
Make in India
X