Multiple Profiles Managing

A Laravel 5.4 & AngularJS example of creating, saving and displaying multiple profiles.

Form validation

Step by Step

Note: when downloading this example, make sure first of all to run the following command line, in order to generate the autoload files.

      $ composer update --no-scripts

1- Configuring local development environment

- Installing a local server:

-WAMP: Windows,
-LAMP: Linux,
-MAMP: MAC,
-XAMPP: Windows, Linux, OSx

- Server requirements:

make sure all necessary extensions for Laravel are installed.

The server requirements can be found in the official documentation of Laravel 5.4

- Install Composer:

$ sudo apt-get update
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer
$ sudo chmod +X /usr/local/bin/composer

2- Creating a new Laravel project and developing the server side

- Install Laravel and start new project:

$ cd /var/www/html
$ composer create-project laravel/laravel --prefer-dist multipleProfilesManaging 5.4
$ cd multipleProfilesManaging
$ php artisan serve

-> The laravel project served on http://localhost:8000

- Create and configure the database:

From the PhpMyAdmin dashboard we need to create new database profiles

Edit .env file and remove .env.example file:

.env

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=profiles
  DB_USERNAME=YOUR_DB_USERNAME
  DB_PASSWORD=YOUR_DB_PASSWORD

Edit the users table file which is located under database/migrations folder:

  public function up()
  {
      Schema::create('users', function (Blueprint $table) {
          $table->increments('id');
          $table->string('uniqueID');
          $table->string('firstname');
          $table->string('lastname');
          $table->string('gender');            
          $table->string('birthDate');
          $table->string('country');
          $table->string('city');
          $table->string('email')->unique();
          $table->string('mobile');
          $table->timestamps();
      });
  }

From the CLI migrate the local configuration to the development server using the following command

 $ php artisan migrate

Seed the users table by editing database/seeds/DatabaseSeeder.php

        ...
        public function run() {
             Model::unguard();
             DB::table('users')->delete();
             $users = array(
                 ['uniqueID'=>uniqid(),'firstname'=>'Kaouther', 'lastname'=>'Mefteh', 'gender'=>'female', 'birthDate'=>'09/29/1992', 'country'=>'Tunisia', 'city'=>'Mahdia', 'email'=>'meftehkaouther@gmail.com', 'mobile'=>'123456789'],
                 ['uniqueID'=>uniqid(),'firstname'=>'Tommie', 'lastname'=>'Seese', 'gender'=>'male', 'birthDate'=>'10/04/1990', 'country'=>'France', 'city'=>'Paris', 'email'=>'TommieSeese@gmail.com', 'mobile'=>'123456789'],
                 ['uniqueID'=>uniqid(),'firstname'=>'Daine', 'lastname'=>'Voorhies', 'gender'=>'male', 'birthDate'=>'10/21/1978', 'country'=>'New Zealand', 'city'=>'Wellington', 'email'=>'DaineVoorhies@gmail.com', 'mobile'=>'123456789'],
                 ['uniqueID'=>uniqid(),'firstname'=>'Lewis', 'lastname'=>'Tawney', 'gender'=>'male', 'birthDate'=>'02/04/1992', 'country'=>'United state', 'city'=>'New York', 'email'=>'LewisTawney@gmail.com', 'mobile'=>'123456789'],
                 ['uniqueID'=>uniqid(),'firstname'=>'Ling', 'lastname'=>'Craft', 'gender'=>'male', 'birthDate'=>'02/13/1971', 'country'=>'Russia', 'city'=>'Moscow', 'email'=>'LingCraft@gmail.com', 'mobile'=>'123456789'],
                 ['uniqueID'=>uniqid(),'firstname'=>'Stephenie', 'lastname'=>'Noguera', 'gender'=>'female', 'birthDate'=>'12/29/1998', 'country'=>'Canada', 'city'=>'Ottawa', 'email'=>'StephenieNoguera@gmail.com', 'mobile'=>'123456789'],
                 ['uniqueID'=>uniqid(),'firstname'=>'Rodrigo', 'lastname'=>'Tulloch', 'gender'=>'male', 'birthDate'=>'01/26/1986', 'country'=>'Australia', 'city'=>'Canberra', 'email'=>'RodrigoTulloch@gmail.com', 'mobile'=>'123456789'] ,
             );
             foreach($users as $user){
               User::create($user);
             }
             Model::reguard();
         }


   $ php artisan db:seed

- Developing the server side functions:

First of all we need to make a small but very important change in the config/auth.php file in order to be able to use the laravel project as an API and not a web app:

       'default' => [
           'guard' => 'api',
           'passwords' => 'users',
      ];

Main functions of the server side are:

creating a new Profile

    function saveForm(ProfileFormRequest $request) {
         $newProfile = $this->user->create([
            'uniqueID' => uniqid(),
            'firstname' => $request->get('firstname'),
            'lastname' => $request->get('lastname'),
            'gender' => $request->get('gender'),
            'birthDate' => $request->get('birthDate'),
            'country' => $request->get('country'),
            'city' => $request->get('city'),
            'email' => $request->get('email'),
            'mobile' => $request->get('mobile')
        ]);
       if (!$newProfile) {
          return response()->json(['failed to create new profile'], 500);
        } else {
          return response()->json(['new profile was successfully created'], 200);
        }
    }

retrieving all saved data from the server

    function getProfiles() {
      $users = User::all();
      return $users;
    }

Configure the API routes in routes/api.php that will be used to call the previous functions

      Route::post('/saveForm', 'ProfilesController@saveForm');
      Route::post('/getProfiles', 'ProfilesController@getProfiles');

3- Creating the AngularJS project and developing the front-end

- create the AngularJS project and install the necessary dependencies:

      $ cd public
      $ mkdir AngularProject
      $ cd AngularProject
      $ mkdir css
      $ mkdir js
      $ mkdir templates
      $ npm install angular@1.5.11 angular-ui-router bootstrap@3 angular-material angular-animate@1.5.11 angular-aria@1.5.11 angular-messages@1.5.11 angular-smart-table angular-ui-bootstrap

note: The version of angular-animate, angular-aria and angular-messages must be the same version as angularjs!

- create the master.php file under resources/views

Add ng-app="ProfilesManaging" to html tag.

Add metas:

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

Import css and js files:

              <!--CSS files-->
              <link href="AngularProject/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
              <link href="AngularProject/node_modules/angular-material/angular-material.css" rel="stylesheet">
              <link rel="stylesheet" type="text/css" href="AngularProject/css/main.css">

              <!--JS files-->
              <script src="AngularProject/node_modules/angular/angular.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
              <script src="AngularProject/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
              <script src="AngularProject/node_modules/angular-ui-router/release/angular-ui-router.js"></script>
              <script src="AngularProject/node_modules/angular-aria/angular-aria.js"></script>
              <script src="AngularProject/node_modules/angular-animate/angular-animate.js"></script>
              <script src="AngularProject/node_modules/angular-material/angular-material.js"></script>
              <script src="AngularProject/node_modules/angular-messages/angular-messages.js"></script>
              <script src="AngularProject/node_modules/angular-smart-table/dist/smart-table.js"></script>
              <script src="AngularProject/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>


              <script src="AngularProject/js/app.js"></script>
              <script src="AngularProject/js/FormController.js"></script>
              <script src="AngularProject/js/ProfilesController.js"></script>

Add the ui-view tag

- create js/app.js file

Inject dependencies:

    	angular.module('ProfilesManaging', [
  	'ui.router', 
  	'ngMaterial', 
  	'ngMessages', 
  	'smart-table', 
  	'ui.bootstrap'
  	])

Configure routing:

  .config(function($stateProvider, $urlRouterProvider){
          $urlRouterProvider.otherwise('/form');
  	$stateProvider
  		.state('form', {
  	          	url: '/form',
  			templateUrl: '/AngularProject/templates/form.html',
  			controller: 'FormController',
  			controllerAs: 'fm'
  		})
  		.state('profiles', {
  			url: '/profiles',
  			templateUrl: 'AngularProject/templates/profiles.html',
  			controller: 'ProfilesController',
  			controllerAs: 'pf'
  		});
  })

- create templates/form.html and js/FormController.js

The main function of this controller is saving a new profile, if the form is validate a new profile will be created and the user will be redirected to profiles page.

	    	$http({
	             method: 'POST',
	             url: 'api/saveForm',
	             data: "firstname="+$scope.user.firstname+"&lastname="+$scope.user.lastname+"&gender="
	             		+$scope.user.gender+"&birthDate="+$scope.user.birthDate+"&country="+$scope.user.country
	             		+"&city="+$scope.user.city+"&email="+$scope.user.email+"&mobile="+$scope.user.mobile,
	         	headers: {'Content-Type': 'application/x-www-form-urlencoded'}	    		
	    	}).success(function(response){
	    		console.log(response);
    		    $window.location.href = '/#/profiles';
	    	}).error(function(response){
	    		console.log(response);
    			$scope.openAlert('Error', response.email[0]);
	    	});

- create templates/profiles.html and js/ProfilesController.js

displaying all saved profiles by retrieving them from the server:

 $scope.getProfiles = function(){
   $http({
     method: 'POST',
     url: '/api/getProfiles',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
   }).success(function(response){
     $scope.profiles = response;
   }).error(function(error){

   });
 }

display each one of theme as a Modal

  ...
     .controller('ProfileCtrl', function ($scope, $uibModalInstance, user) {
      	$scope.user = user;
      })
  ...
  $scope.openProfile = function (_user, size) {

      var modalInstance = $uibModal.open({
        animation: true,
        controller: "ProfileCtrl",
        templateUrl: 'profile.html',
        backdrop  : 'static',
        keyboard  : false,
        size: size,
          resolve: {
              user: function()
              {
                  return _user;
              }
          }
      });
  }

KawtharE / MultipleProfilesManaging