{"id":15188350,"url":"https://github.com/kawthare/multipleprofilesmanaging","last_synced_at":"2026-03-01T20:33:37.450Z","repository":{"id":214318224,"uuid":"117123055","full_name":"KawtharE/MultipleProfilesManaging","owner":"KawtharE","description":"A Laravel 5.4 \u0026 AngularJS example of creating, saving and displaying multiple profiles","archived":false,"fork":false,"pushed_at":"2018-01-13T16:58:59.000Z","size":3912,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T03:14:59.083Z","etag":null,"topics":["angular-material","angularjs","laravel-framework","laravel5","laravel54","smart-table","ui-bootstrap","ui-router"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KawtharE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-11T16:18:47.000Z","updated_at":"2018-01-12T09:58:27.000Z","dependencies_parsed_at":"2023-12-27T11:45:29.771Z","dependency_job_id":null,"html_url":"https://github.com/KawtharE/MultipleProfilesManaging","commit_stats":null,"previous_names":["kawthare/multipleprofilesmanaging"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KawtharE%2FMultipleProfilesManaging","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KawtharE%2FMultipleProfilesManaging/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KawtharE%2FMultipleProfilesManaging/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KawtharE%2FMultipleProfilesManaging/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KawtharE","download_url":"https://codeload.github.com/KawtharE/MultipleProfilesManaging/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240970218,"owners_count":19886526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-material","angularjs","laravel-framework","laravel5","laravel54","smart-table","ui-bootstrap","ui-router"],"created_at":"2024-09-27T19:03:58.177Z","updated_at":"2026-03-01T20:33:37.395Z","avatar_url":"https://github.com/KawtharE.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multiple Profiles Managing\nA Laravel 5.4 \u0026amp; AngularJS example of creating, saving and displaying multiple profiles.\n\n![Starting Screen](https://github.com/KawtharE/MultipleProfilesManaging/blob/master/assets/Screencast%202018-01-12%2014_29_44.gif)\n\n**Form validation**\n\n![Starting Screen](https://github.com/KawtharE/MultipleProfilesManaging/blob/master/assets/Screencast%202018-01-12%2015_57_09.gif)\n\n# Step by Step\n\n**Note:** when downloading this example, make sure first of all to run the following command line, in order to generate the autoload files.\n          \n          $ composer update --no-scripts\n          \n ## 1- Configuring local development environment\n #### - Installing a local server:\n \n    -WAMP: Windows,\n    -LAMP: Linux,\n    -MAMP: MAC,\n    -XAMPP: Windows, Linux, OSx\n    \n#### - Server requirements:\nmake sure all necessary extensions for Laravel are installed.\n\n[The server requirements](https://laravel.com/docs/5.4/installation#server-requirements) can be found in the official documentation of Laravel 5.4\n\n#### - Install Composer:\n\n    $ sudo apt-get update\n    $ curl -sS https://getcomposer.org/installer | php\n    $ sudo mv composer.phar /usr/local/bin/composer\n    $ sudo chmod +X /usr/local/bin/composer\n    \n ## 2- Creating a new Laravel project and developing the server side\n \n #### - Install Laravel and start new project:\n \n    $ cd /var/www/html\n    $ composer create-project laravel/laravel --prefer-dist multipleProfilesManaging 5.4\n    $ cd multipleProfilesManaging\n    $ php artisan serve\n    \n-\u003e The laravel project served on http://localhost:8000\n\n#### - Create and configure the database:\n- From the PhpMyAdmin dashboard we need to create new database **profiles**\n\n- Edit **.env** file and remove **.env.example** file:\n\n  *.env*\n  \n        DB_CONNECTION=mysql\n        DB_HOST=127.0.0.1\n        DB_PORT=3306\n        DB_DATABASE=profiles\n        DB_USERNAME=YOUR_DB_USERNAME\n        DB_PASSWORD=YOUR_DB_PASSWORD\n        \n- Edit the **users table** file which is located under **database/migrations** folder:\n\n        public function up()\n        {\n            Schema::create('users', function (Blueprint $table) {\n                $table-\u003eincrements('id');\n                $table-\u003estring('uniqueID');\n                $table-\u003estring('firstname');\n                $table-\u003estring('lastname');\n                $table-\u003estring('gender');            \n                $table-\u003estring('birthDate');\n                $table-\u003estring('country');\n                $table-\u003estring('city');\n                $table-\u003estring('email')-\u003eunique();\n                $table-\u003estring('mobile');\n                $table-\u003etimestamps();\n            });\n        }\n    \n From the CLI migrate the local configuration to the development server using the following command\n \n     $ php artisan migrate\n \n - Seed the users table by editing **database/seeds/DatabaseSeeder.php** \n \n               ...\n               public function run() {\n                    Model::unguard();\n                    DB::table('users')-\u003edelete();\n                    $users = array(\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Kaouther', 'lastname'=\u003e'Mefteh', 'gender'=\u003e'female', 'birthDate'=\u003e'09/29/1992', 'country'=\u003e'Tunisia', 'city'=\u003e'Mahdia', 'email'=\u003e'meftehkaouther@gmail.com', 'mobile'=\u003e'123456789'],\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Tommie', 'lastname'=\u003e'Seese', 'gender'=\u003e'male', 'birthDate'=\u003e'10/04/1990', 'country'=\u003e'France', 'city'=\u003e'Paris', 'email'=\u003e'TommieSeese@gmail.com', 'mobile'=\u003e'123456789'],\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Daine', 'lastname'=\u003e'Voorhies', 'gender'=\u003e'male', 'birthDate'=\u003e'10/21/1978', 'country'=\u003e'New Zealand', 'city'=\u003e'Wellington', 'email'=\u003e'DaineVoorhies@gmail.com', 'mobile'=\u003e'123456789'],\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Lewis', 'lastname'=\u003e'Tawney', 'gender'=\u003e'male', 'birthDate'=\u003e'02/04/1992', 'country'=\u003e'United state', 'city'=\u003e'New York', 'email'=\u003e'LewisTawney@gmail.com', 'mobile'=\u003e'123456789'],\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Ling', 'lastname'=\u003e'Craft', 'gender'=\u003e'male', 'birthDate'=\u003e'02/13/1971', 'country'=\u003e'Russia', 'city'=\u003e'Moscow', 'email'=\u003e'LingCraft@gmail.com', 'mobile'=\u003e'123456789'],\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Stephenie', 'lastname'=\u003e'Noguera', 'gender'=\u003e'female', 'birthDate'=\u003e'12/29/1998', 'country'=\u003e'Canada', 'city'=\u003e'Ottawa', 'email'=\u003e'StephenieNoguera@gmail.com', 'mobile'=\u003e'123456789'],\n                        ['uniqueID'=\u003euniqid(),'firstname'=\u003e'Rodrigo', 'lastname'=\u003e'Tulloch', 'gender'=\u003e'male', 'birthDate'=\u003e'01/26/1986', 'country'=\u003e'Australia', 'city'=\u003e'Canberra', 'email'=\u003e'RodrigoTulloch@gmail.com', 'mobile'=\u003e'123456789'] ,\n                    );\n                    foreach($users as $user){\n                      User::create($user);\n                    }\n                    Model::reguard();\n                }\n \n \n          $ php artisan db:seed\n \n #### - Developing the server side functions:\n 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:\n \n           'default' =\u003e [\n               'guard' =\u003e 'api',\n               'passwords' =\u003e 'users',\n          ];\n          \n Main functions of the server side are: \n \n   1. creating a new Profile\n      \n              function saveForm(ProfileFormRequest $request) {\n                   $newProfile = $this-\u003euser-\u003ecreate([\n                      'uniqueID' =\u003e uniqid(),\n                      'firstname' =\u003e $request-\u003eget('firstname'),\n                      'lastname' =\u003e $request-\u003eget('lastname'),\n                      'gender' =\u003e $request-\u003eget('gender'),\n                      'birthDate' =\u003e $request-\u003eget('birthDate'),\n                      'country' =\u003e $request-\u003eget('country'),\n                      'city' =\u003e $request-\u003eget('city'),\n                      'email' =\u003e $request-\u003eget('email'),\n                      'mobile' =\u003e $request-\u003eget('mobile')\n                  ]);\n                 if (!$newProfile) {\n                    return response()-\u003ejson(['failed to create new profile'], 500);\n                  } else {\n                    return response()-\u003ejson(['new profile was successfully created'], 200);\n                  }\n              }\n\n\n   2. retrieving all saved data from the server\n      \n              function getProfiles() {\n                $users = User::all();\n                return $users;\n              }\n \n Configure the **API** routes in **routes/api.php** that will be used to call the previous functions\n \n          Route::post('/saveForm', 'ProfilesController@saveForm');\n          Route::post('/getProfiles', 'ProfilesController@getProfiles');\n          \n ## 3- Creating the AngularJS project and developing the front-end\n \n #### - create the AngularJS project and install the necessary dependencies:\n \n          $ cd public\n          $ mkdir AngularProject\n          $ cd AngularProject\n          $ mkdir css\n          $ mkdir js\n          $ mkdir templates\n          $ 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\n \n **note:** The version of angular-animate, angular-aria and angular-messages must be the same version as angularjs!\n\n#### - create the master.php file under resources/views\n\n- Add **ng-app=\"ProfilesManaging\"** to **html** tag.\n\n- Add metas:\n         \n          \u003cmeta charset=\"utf-8\"\u003e\n          \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n          \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n- Import css and js files:\n                    \n                    \u003c!--CSS files--\u003e\n                    \u003clink href=\"AngularProject/node_modules/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n                    \u003clink href=\"AngularProject/node_modules/angular-material/angular-material.css\" rel=\"stylesheet\"\u003e\n                    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"AngularProject/css/main.css\"\u003e\n\n                    \u003c!--JS files--\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular/angular.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-ui-router/release/angular-ui-router.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-aria/angular-aria.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-animate/angular-animate.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-material/angular-material.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-messages/angular-messages.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-smart-table/dist/smart-table.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js\"\u003e\u003c/script\u003e\n\n\n                    \u003cscript src=\"AngularProject/js/app.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/js/FormController.js\"\u003e\u003c/script\u003e\n                    \u003cscript src=\"AngularProject/js/ProfilesController.js\"\u003e\u003c/script\u003e\n\n- Add the **ui-view** tag\n\n#### - create js/app.js file\n\n- Inject dependencies:\n\n          \tangular.module('ProfilesManaging', [\n\t\t\t'ui.router', \n\t\t\t'ngMaterial', \n\t\t\t'ngMessages', \n\t\t\t'smart-table', \n\t\t\t'ui.bootstrap'\n\t\t\t])\n                              \n- Configure routing:\n\n\t\t.config(function($stateProvider, $urlRouterProvider){\n\t\t        $urlRouterProvider.otherwise('/form');\n\t\t\t$stateProvider\n\t\t\t\t.state('form', {\n\t\t\t          \turl: '/form',\n\t\t\t\t\ttemplateUrl: '/AngularProject/templates/form.html',\n\t\t\t\t\tcontroller: 'FormController',\n\t\t\t\t\tcontrollerAs: 'fm'\n\t\t\t\t})\n\t\t\t\t.state('profiles', {\n\t\t\t\t\turl: '/profiles',\n\t\t\t\t\ttemplateUrl: 'AngularProject/templates/profiles.html',\n\t\t\t\t\tcontroller: 'ProfilesController',\n\t\t\t\t\tcontrollerAs: 'pf'\n\t\t\t\t});\n\t\t})\n                    \n#### - create templates/form.html and js/FormController.js\nThe 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.\n\n\t\t    \t$http({\n\t\t             method: 'POST',\n\t\t             url: 'api/saveForm',\n\t\t             data: \"firstname=\"+$scope.user.firstname+\"\u0026lastname=\"+$scope.user.lastname+\"\u0026gender=\"\n\t\t             \t\t+$scope.user.gender+\"\u0026birthDate=\"+$scope.user.birthDate+\"\u0026country=\"+$scope.user.country\n\t\t             \t\t+\"\u0026city=\"+$scope.user.city+\"\u0026email=\"+$scope.user.email+\"\u0026mobile=\"+$scope.user.mobile,\n\t\t         \theaders: {'Content-Type': 'application/x-www-form-urlencoded'}\t    \t\t\n\t\t    \t}).success(function(response){\n\t\t    \t\tconsole.log(response);\n\t    \t\t    $window.location.href = '/#/profiles';\n\t\t    \t}).error(function(response){\n\t\t    \t\tconsole.log(response);\n\t    \t\t\t$scope.openAlert('Error', response.email[0]);\n\t\t    \t});\n                    \n\n![Starting Screen](https://github.com/KawtharE/MultipleProfilesManaging/blob/master/assets/Screenshot%20from%202018-01-13%2017-45-34.png)\n \n #### - create templates/profiles.html and js/ProfilesController.js\n - displaying all saved profiles by retrieving them from the server:\n \n \t    $scope.getProfiles = function(){\n\t      $http({\n\t        method: 'POST',\n\t        url: '/api/getProfiles',\n\t        headers: {'Content-Type': 'application/x-www-form-urlencoded'}\n\t      }).success(function(response){\n\t        $scope.profiles = response;\n\t      }).error(function(error){\n\n\t      });\n\t    }\n\n![Starting Screen](https://github.com/KawtharE/MultipleProfilesManaging/blob/master/assets/Screenshot%20from%202018-01-13%2017-45-59.png)\n\n- display each one of theme as a Modal\n\t\t\n\t\t...\n\t       .controller('ProfileCtrl', function ($scope, $uibModalInstance, user) {\n\t        \t$scope.user = user;\n\t        })\n\t\t...\n\t    $scope.openProfile = function (_user, size) {\n\n\t        var modalInstance = $uibModal.open({\n\t          animation: true,\n\t          controller: \"ProfileCtrl\",\n\t          templateUrl: 'profile.html',\n\t          backdrop  : 'static',\n\t          keyboard  : false,\n\t          size: size,\n\t            resolve: {\n\t                user: function()\n\t                {\n\t                    return _user;\n\t                }\n\t            }\n\t        });\n\t    }\n                    \n![Starting Screen](https://github.com/KawtharE/MultipleProfilesManaging/blob/master/assets/Screenshot%20from%202018-01-13%2017-46-21.png)                 \n                    \n                    \n                    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkawthare%2Fmultipleprofilesmanaging","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkawthare%2Fmultipleprofilesmanaging","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkawthare%2Fmultipleprofilesmanaging/lists"}