23
Mar
Tutorial 4 : CRUD User interfaces with Ionic
Html pages
Starting from mab2, modify the file in the www/templates folder, named profile.html with this content:
www/templates/profile.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 |
<ion-view view-title="Profile"> <ion-content class="padding" ng-init="getCurrentUser()"> <br> <h2 class="text-center">USER PROFILE</h2> <br><br> <div class="list"> <label class="item item-input"> <span class="input-label">Prénom :*</span> <input type="text" ng-model="currentUser.firstName" > </label> <label class="item item-input"> <span class="input-label">Nom :*</span> <input type="text" ng-model="currentUser.lastName"> </label> <label class="item item-input"> <span class="input-label">Nom d'utilisateur :*</span> <input type="text" ng-model="currentUser.username" > </label> <label class="item item-input"> <span class="input-label">Email :*</span> <input type="text" ng-model="currentUser.email"> </label> </div> <button class="button button-full button-calm" ng-click="updateUserProfile()">Modifier</button> </ion-content> </ion-view> |
|
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 |
<ion-view view-title="Devices"> <ion-content class="padding" ng-init="getAllDeviceOfUser()"> <br> <h2 class="text-center">USER DEVICE</h2> <div class=" col col-center"> <button ui-sref="newDevice" class="button button-full button-calm"> Ajouter un nouveau appareil </button> </div> <div class="list" style="width:100;margin:auto"> <div ng-repeat="device in devices"> <div class="item item-divider">{{device.name}}</div> <div class="item"> <label> <strong>Nom: </strong> {{device.name}} </label> <br> <label> <strong>Matricule: </strong> {{device.uniqueId}} </label> <br> <label> <strong>Status: </strong> {{device.status}} </label> <br> <label> <strong>Téléphone: </strong> {{device.phoneNumber}} </label> <br> <div class="post-actions row "> <div class="col col-33 "> <a class="button button-small button-full button-calm" ng-click="selectDeviceToUpdate(device)"> Modifier </a> </div> <div class="col col-33"> <button type="button" class="button button-small button-full button-calm" ng-click="deleteConfirmation(device.id)"> Supprimer </button> </div> </div> </div> </div> </div> </ion-content> </ion-view> |
|
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 |
<ion-view view-title="Nouveau device"> <ion-content class="padding"> <br> <h2 class="text-center">NOUVEAU APPAREIL</h2> <div class="list"> <label class="item item-input"> <span class="input-label">Nom :*</span> <input type="text" ng-model="newDevice.name" > </label> <label class="item item-input"> <span class="input-label">Unique id :*</span> <input type="text" ng-model="newDevice.uniqueId" > </label> <label class="item item-input"> <span class="input-label">Téléphone :*</span> <input type="text" ng-model="newDevice.phoneNumber" > </label> <label class="item item-input item-select"> <span class="input-label">Status :*</span> <select ng-model="newDevice.status" ng-options="__status._status for __status in status" > </select> </label> <button type="button" class="button button-full button-calm" ng-click="addNewDevice()"> Sauvegarder </button> </div> </div> </ion-content> </ion-view> |
www/templates/updateDevice.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 |
<ion-view view-title="Modifier appareil"> <ion-content class="padding"> <br> <h2 class="text-center">MODIFIER APPAREIL</h2> <div class="list"> <label class="item item-input"> <span class="input-label">Nom :*</span> <input type="text" ng-model="deviceToUpdate.name" > </label> <label class="item item-input"> <span class="input-label">Téléphone :*</span> <input type="text" ng-model="deviceToUpdate.phoneNumber" > </label> <label class="item item-input item-select"> <span class="input-label">Status :*</span> <select ng-model="deviceToUpdate.status" ng-options="__status._status for __status in status" > </select> </label> <button type="button" class="button button-full button-calm" ng-click="updateDevice(deviceToUpdate.id)"> Sauvegarder </button> </div> </div> </ion-content> </ion-view> |
Service
|
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
angular.module('starter.services', []) .service('LoginService', function($resource,SERVER_PATH) { return $resource('login:', {}, { authenticate: { method: 'POST', url:SERVER_PATH.path+'/login/authenticate' } } ); }) .service('ProfileService', function($resource,SERVER_PATH) { return $resource('profile:', {}, { getCurrentUser: { method: 'GET', url:SERVER_PATH.path+'/users/getCurrentUser' }, updateUserProfile: { method: 'POST', url:SERVER_PATH.path+'/users/updateUserProfile' } } ); }) .service('DeviceService', function($resource,SERVER_PATH) { return $resource('device:', {}, { addNewDevice: { method: 'POST', url:SERVER_PATH.path+'/devices/addNewDevice' }, getAllDeviceOfUser: { method: 'GET', isArray:true, url:SERVER_PATH.path+'/devices/getByUserId' } } ); }) .service('PopupService', function($ionicPopup,$state) { var popups={}; popups.showPopupConfirmation=function(message,functiontoExecute){ var confirmPopup = $ionicPopup.confirm({ title: 'Confirmation', template: message }); confirmPopup.then(function(res) { if(res) { functiontoExecute; } }); } popups.showPopup=function(title, message, goTo){ var popupAlert = $ionicPopup.alert({ title: title, template: message }); popupAlert.then(function(result) { if(goTo!==''){ $state.go(goTo); } }); } return popups; }) .service('DataService', function($resource,SERVER_PATH) { var data = {}; return { getData: function () { return data; }, setData: function (_data) { data = _data; } }; }) ; |
Controller
|
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
angular.module('starter.controllers', []) .controller('LoginCtrl', function($scope, $state, $rootScope, $cookieStore, $http, $ionicLoading, LoginService) { $scope.credentials = { username: '', password: '' } var xAuthTokenHeaderName = 'x-auth-token'; $scope.login = function() { $ionicLoading.show({ template: 'Chargement...' }); $scope.invalidCredentials=false; LoginService.authenticate({username: $scope.credentials.username, password: $scope.credentials.password}) .$promise.then(function(user) { if(user.status=="OK"){ $rootScope.user = user; $http.defaults.headers.common[ xAuthTokenHeaderName ] = user.token; $cookieStore.put('user', user); $state.go('tab.profile'); }else{ $scope.invalidCredentials=true; } $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } }) .controller('DeviceCtrl', function($scope,DataService,$state,$http, $ionicLoading,SERVER_PATH, PopupService, DeviceService, SERVER_PATH) { $scope.devices=[]; $scope.getAllDeviceOfUser=function(){ $ionicLoading.show({ template: 'Chargement...' }); DeviceService.getAllDeviceOfUser() .$promise.then(function(response){ $scope.devices=response; $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.status=[ {id:'1',_status:"ONLINE"}, {id:'2',_status:"OFFLINE"} ]; $scope.newDevice={}; $scope.addNewDevice=function(){ $ionicLoading.show({ template: 'Chargement...' }); DeviceService.addNewDevice({name:$scope.newDevice.name,uniqueId: $scope.newDevice.uniqueId, status:$scope.newDevice.status._status,phoneNumber:$scope.newDevice.phoneNumber}) .$promise.then(function(response){ $scope.devices.push(response); PopupService.showPopup('Bien', 'Votre appareil a été ajouté','tab.device'); $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.deviceToUpdate=DataService.getData();; $scope.selectDeviceToUpdate=function(device){ DataService.setData(device); $state.go('updateDevice'); } $scope.updateDevice=function(deviceId){ $scope.newDevicetoUpdateData={ name:$scope.deviceToUpdate.name, status: $scope.deviceToUpdate.status._status, phoneNumber:$scope.deviceToUpdate.phoneNumber } $http.put(SERVER_PATH.path+"/devices/updateDevice/"+deviceId,$scope.newDevicetoUpdateData) .success(function(response){ PopupService.showPopup('Bien', 'Votre appareil a été modifié','tab.device'); $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.deleteDevice=function(deviceId){ $ionicLoading.show({ template: 'Chargement...' }); $http.delete(SERVER_PATH.path+"/devices/deleteDevice/"+deviceId) .success(function(response){ if(response.status=="Success"){ $scope.getAllDeviceOfUser(); } $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.deleteConfirmation=function(deviceId){ PopupService.showPopupConfirmation("ddd",$scope.deleteDevice(deviceId)); } }) .controller('ProfileCtrl', function($scope, $ionicLoading, PopupService, ProfileService,$http) { $scope.currentUser={}; $scope.getCurrentUser=function(){ $ionicLoading.show({ template: 'Chargement...' }); ProfileService.getCurrentUser().$promise.then(function(response){ $scope.currentUser=response; $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } $scope.updateUserProfile=function(){ ProfileService.updateUserProfile({firstName:$scope.currentUser.firstName,lastName: $scope.currentUser.lastName, username:$scope.currentUser.username,email:$scope.currentUser.email}) .$promise.then(function(response){ PopupService.showPopup('Bien', 'Votre profile a été modifié',''); $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } }); |
Run the Server application
Download the server source code (lab3) from bitbucket:
https://bitbucket.org/intellitech-team/spring-labs/src/b07388e0252dc3680c5b57eea151432ea26a214d/Lab3/?at=master
Create database with name and run the script in PostgreSQL database :
src/main/resources/static/sql/insert.sql
|
1 2 3 4 |
INSERT INTO public.role (id, role_name) VALUES (1, 'ROLE_ADMIN'); INSERT INTO public.role (id, role_name) VALUES (2, 'ROLE_USER'); INSERT INTO public.user (id, first_name, last_name, email, password, username, role_id) VALUES (1, 'Nizar', 'Ellouze','nizarellouze@gmail.com', '$2a$10$bpNMKeaQXKpJ4JVxOHWvu.tZdmCLT9nKcZreJ/ELfCgmTCyhC7GPy', 'admin', 1); INSERT INTO public.user (id, first_name, last_name, email, password, username, role_id) VALUES (2, 'Omar', 'Kessemtini','kessemtini.omar@gmail.com', '$2a$10$TA.UfUqLa8uDeGkt95FfLeq7T5Y5vpDpzAtvJrHSLzLliY/PARXUq', 'user', 2); |
Now, run the application by launching the SpringBootApplication class using the command mvn spring-boot:run and visit and authenticate with one of the two users:
: username=user, password=user
: username=admin, password=admin
Run the Mobile application
Download source Source code from :
https://bitbucket.org/intellitech-team/spring-labs/src/b07388e0252dc3680c5b57eea151432ea26a214d/Lab4(IONIC_CRUD)/?at=master and run the following command
|
1 2 |
cd auth-with-ionic ionic serve --lab |
Bablofil
Thanks, great article.
chirurgie esthetique Tunisie
Meilleur site dans cette catégorie; merci !