Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Monday, July 10, 2017

107 Ionic Creator Url Shortener Form


.


107 Ionic Creator Url Shortener Form
This tutorial continues from:
You need to create a web api first (refer the above tutorial) before working on this tutorial.

1. Create a new project

Project Name= ShortenUrl
Template=Blank

2. Add Components

PassCode
Data type=password
ng-model=data.passcode
Long Url
Data type=text
ng-model=data.longurl
Shorten Url
ng-click = doShortenUrl()
Short Url
Data type=text
ng-model=data.shorturl
ng-show=is.shortened
Click To Copy
ng-click=doCopyUrl()
ng-show=is.shortened

3. Add Controller Codes

Controller
function ($scope, $stateParams,DataService,$ionicLoading,$ionicPopup) {
    $scope.data={}
    $scope.is={}
    $scope.copieddata=''
    $scope.is.shortened=false
   $scope.showAlert = function(strTitle,strMessage) {
      var alertPopup = $ionicPopup.alert({
         title: strTitle,
         template: strMessage
      });
      alertPopup.then(function(res) {
         // Custom functionality....
      });
   };    
   
   $scope.doShortenUrl=function(){
        var invalidcheck=0;
        objData={};
        if ($scope.data.passcode=='' || $scope.data.passcode==undefined){
            $scope.showAlert ('error','invalid passcode');
            invalidcheck++;
        }else{
            objData.passcode=$scope.data.passcode;
        }        
        if ($scope.data.longurl=='' || $scope.data.longurl==undefined){
            $scope.showAlert ('error','invalid long url');
            invalidcheck++;
        }else{
            objData.longurl=$scope.data.longurl;
        }        
        if (invalidcheck==0){ /*if login data valid*/
          objData.cmd="shorten";
          var sendparameters=Object.keys(objData).map((i)=>i+'='+objData[i]).join('&');  
          $ionicLoading.show();
          DataService.requestPost(sendparameters)
          .then(function(response){
              switch(response.data.result){
                case 'success':
                    if(response.data.content.rescode==100){
                        $scope.showAlert ('success',response.data.content.resdesc);  
                        $scope.is.shortened=true
                        $scope.data.shorturl=response.data.content.resshort
                    }
                   
                    break;
                case 'error':
                    $scope.showAlert ('error','unknown input');  
                    break;                    
                default:
                    $scope.showAlert ('error','unknown error');  
              }
              console.log(response.data.content);              
              console.log(response);
          })
          .finally(function(){
              $scope.person={};
              $ionicLoading.hide();
          });
        }/*if login data valid*/      
       
       
       
   }
   
   
    $scope.doCopyUrl=function(){
        var textArea = document.createElement("textarea");
        textArea.style.position = 'fixed';
        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.width = '2em';
        textArea.style.height = '2em';
        textArea.style.padding = "0";
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';
        textArea.style.background = 'transparent';
        
        /*
        switch (sourceCode){
          case "providerSource":
          textArea.value = this.providerSource;
          break;
          case "pageSource":
          textArea.value = this.providerSource;
          break;
        }
        */
                  textArea.value = $scope.data.shorturl;
        document.body.appendChild(textArea);
        textArea.select();
        try {
          var successful = document.execCommand('copy');
          var msg = successful ? 'successful' : 'unsuccessful';
          $scope.showAlert ('clipboard',msg);
          //alert('Copied ' + msg);
        } catch (err) {
          console.log('Oops, unable to copy');
        }
        document.body.removeChild(textArea);
    }
}
For var sendparameters=Object.keys(objData).map((i)=>i+'='+objData[i]).join('&');
Alternatively, we can write as follows
var sendparameters= Object.keys(objData).map(function(key){
                    return encodeURIComponent(key) + '=' +
                    encodeURIComponent(objData[key]);
                    }).join('&');

4. Add Service Codes

DataService
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('DataService', ['$http',function($http){
    var api_url='https://script.google.com/macros/s/AKfycbyYhj7gWw3Qse9ULBY1ouqS7F1u-N3vhFOrTOGySWAcDy_NDEI/exec?';
   
   return {
   
    requestPost: function(requestparam){
        return $http({
          method  : 'POST',
          url     : api_url,
          data    : requestparam, //forms user object
          headers : {'Content-Type': 'application/x-www-form-urlencoded'}
         })
          .then(function(response) {
            //console.log(response);
            return response;
            if (data.errors) {//data.errors
            } else {//data.message
              return(data);
            }
          });        
                },/*RequestPost*/      
   }
}]);

.
.

No comments:

Post a Comment