Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kawthare/multipleprofilesmanaging
A Laravel 5.4 & AngularJS example of creating, saving and displaying multiple profiles
https://github.com/kawthare/multipleprofilesmanaging
angular-material angularjs laravel-framework laravel5 laravel54 smart-table ui-bootstrap ui-router
Last synced: 9 days ago
JSON representation
A Laravel 5.4 & AngularJS example of creating, saving and displaying multiple profiles
- Host: GitHub
- URL: https://github.com/kawthare/multipleprofilesmanaging
- Owner: KawtharE
- Created: 2018-01-11T16:18:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-13T16:58:59.000Z (almost 7 years ago)
- Last Synced: 2024-10-11T10:42:10.522Z (about 1 month ago)
- Topics: angular-material, angularjs, laravel-framework, laravel5, laravel54, smart-table, ui-bootstrap, ui-router
- Language: PHP
- Size: 3.73 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://laravel.com/docs/5.4/installation#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'=>'[email protected]', 'mobile'=>'123456789'],
['uniqueID'=>uniqid(),'firstname'=>'Tommie', 'lastname'=>'Seese', 'gender'=>'male', 'birthDate'=>'10/04/1990', 'country'=>'France', 'city'=>'Paris', 'email'=>'[email protected]', 'mobile'=>'123456789'],
['uniqueID'=>uniqid(),'firstname'=>'Daine', 'lastname'=>'Voorhies', 'gender'=>'male', 'birthDate'=>'10/21/1978', 'country'=>'New Zealand', 'city'=>'Wellington', 'email'=>'[email protected]', 'mobile'=>'123456789'],
['uniqueID'=>uniqid(),'firstname'=>'Lewis', 'lastname'=>'Tawney', 'gender'=>'male', 'birthDate'=>'02/04/1992', 'country'=>'United state', 'city'=>'New York', 'email'=>'[email protected]', 'mobile'=>'123456789'],
['uniqueID'=>uniqid(),'firstname'=>'Ling', 'lastname'=>'Craft', 'gender'=>'male', 'birthDate'=>'02/13/1971', 'country'=>'Russia', 'city'=>'Moscow', 'email'=>'[email protected]', 'mobile'=>'123456789'],
['uniqueID'=>uniqid(),'firstname'=>'Stephenie', 'lastname'=>'Noguera', 'gender'=>'female', 'birthDate'=>'12/29/1998', 'country'=>'Canada', 'city'=>'Ottawa', 'email'=>'[email protected]', 'mobile'=>'123456789'],
['uniqueID'=>uniqid(),'firstname'=>'Rodrigo', 'lastname'=>'Tulloch', 'gender'=>'male', 'birthDate'=>'01/26/1986', 'country'=>'Australia', 'city'=>'Canberra', 'email'=>'[email protected]', '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:
1. 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);
}
}
2. 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 [email protected] angular-ui-router bootstrap@3 angular-material [email protected] [email protected] [email protected] 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:
- Import css and js files:
- 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;
}
}
});
}
