Create login registration in angular js with laravel and Authencation

Create login registration in angular js with laravel, Authencation in laravel using angularjs,Angurjs is a framwork of client side script which are flow rules for Mvc in designing and script. create services, app, controller in angularjs,how to create Services,controller,app in angular js, create form using angular js, create directive for any service,submit from using angular js, edit data using angularjs, delete data using angular js. ng-model,create array in angularjs,create check box in angularjs, create radio buttion in angularjs.

Create laravel Controller

First create laravel Controller for User Login and Registration open app->controller and create UsersController.php and insert the following code

<?php
class UserController extends \BaseController {
    public function Login(){
    if(Auth::attempt(Input::only('username','password'))){
    return Auth::user();
    }else{
    return 'invalid username/pass combo';
    }
    }
    public Function Logout(){
    Auth::logout();
    return 'logged out';
    }
    
    public function create()
    {
        $pwd = Input::get('pwd');
        $cpwd => Input::get('cpwd');
        if($pwd!=$cpwd)
        {
            return array('status'=> 'Password and Confirm password are not match');
            
        }else
        {
            $user = array(
           'first_name' => Input::get('fname'),
           'last_name' =>Input::get('lname'),
           'email' => Input::get('email'),
           'password' => Input::get('email')
           );
           if($id = DB::table('users')->insert($user))
          {
          return array('status'=>'User Successfully created!.');
          }else{
          
          return array('status'=> 'Some Error in User Creating');
          }
        }
    }
    
}

Here
Login function for user login and authencation
Logout function for user logout
create function for user register

Create User Model

Now Create User.php in app->model and insert the following code

<?php

use Illuminate\Auth\UserTrait;
use Illuminate\Auth\UserInterface;
use Illuminate\Auth\Reminders\RemindableTrait;
use Illuminate\Auth\Reminders\RemindableInterface;

class User extends Eloquent implements UserInterface, RemindableInterface {
    
    use UserTrait, RemindableTrait;

    protected $table = 'users';

    protected $hidden = array('password', 'remember_token');
}
?>

 

Create Routes

Now go the app and open routes.php and insert the following code

'/api'),function(){

Route::post('login/auth','UserController@Login'); ////////////////////////route for login
Route::get('login/destroy','UserController@Logout');/////////////////////route for logout
Route::post('/register','UserController@create');///////////////////////route for register

Route::resource('posts','PostController');/////////////////////////////single route for post add, edit delete, find all

});
Route::get('/', function()
{
return View::make('main'); // will return app/views/index.php
});

Create Main View File

Now go to app->views->create and create main.php and insert the following code

<!doctype html>
<html lang="en">
<head>
<title>Blog Administration</title>
<!--css-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
 
<!--js-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
<!--angular-->

</head>
<div class="header">
    <ul>
        <li><a href="http://localhost/mylarvel/public/#/dashboard">Desboard</a></li>
        <li><a href="http://localhost/mylarvel/public/">Login</a></li>
        <li><a href="http://localhost/mylarvel/public/#/register">Register</a></li>
    </ul>
</div>
<body ng-app="blogApp">
 <div id="wrapper">
 <div class="container" id="view" ng-view>

 </div>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>

<script src="../../public/js/app.js"></script>
<script src="../../public/js/services/authService.js"></script>
<script src="../../public/js/controllers/loginController.js"></script>
<script src="../../public/js/controllers/UserController.js"></script>
<script src="../../public/js/controllers/postEditController.js"></script>
<script src="../../public/js/controllers/postController.js"></script>
<script src="../../public/js/services/authService.js"></script>
<script src="../../public/js/services/crudService.js"></script>

 </div>


</body>
</html>

In body tage ng-app=”blogApp” is the application name which are register on angular and this is used for perform any action on angular js or app.

ng-view is a tag for displaying the view of pages the angular js here display the view of layouts

Check these two tage are include or not if these tag are not included you api are not work.

Working of Angularjs

First Go to public folder and Create js. Now Create three another folder in public->js

1 folder : controllers

2 folder : services

3 folder : templates

Create app.js file

Go to public->js and create file name app.js and insert the following code

var app = angular.module('blogApp',[
'ngRoute',
//Login
'LoginCtrl',
//Auth Service
'AuthSrvc',
'CRUDSrvc'
]);
app.run(function(){
 
});
 
//This will handle all of our routing
app.config(function($routeProvider, $locationProvider){
 
$routeProvider.when('/',{
templateUrl:'js/templates/login.html',
controller:'LoginController'
});

});

Here var app=angular.modeule(‘blogApp'[]); used for register the application the blog app name come from you main.php file in app->view->main.php here your app are register.
ngRoute are use for create request to the service in service folder which are letter we use. app.config ($routeProvider,$locationProvider) the routeprovider provide the route for angular to send and recive the request to the server side script. and the locationprovider are used for provide the location for displaying the view files.

Create login Template

Now go to Public->js->template and create file name login.html and insert the following code

<div id="login" class="col-md-4 col-md-offset-4">
<div id="login-form">
<h4>Login</h4>
<form  ng-submit="loginSubmit()"><!--username-->
<div class="form-group"><input id="username" type="text" name="username"  /></div>
<!--password-->
<div class="form-group"><input id="password" type="password" name="password" /></div>
<!--submit-->
<div class="form-group"><button class="btn btn-primary" type="submit">Login</button></div>
</form></div>
</div>

hare ng-submit and js controller function which are call when data is submitted.

Create Angular Controller

Now open public->js->controller and create file name loginController.js and insert the following code

var login = angular.module('LoginCtrl',[]);
//alert(0);
login.controller('LoginController',function($scope,Login){
 
$scope.loginSubmit = function(){
var auth = Login.auth($scope.loginData);/////////////////service call
auth.success(function(response){
console.log(response);
});
}
});

Create services

Now crate service for authencation so go in public->js->services and create file name authService.js and insert the following code

var login = angular.module('AuthSrvc',[]);
login.factory('Login',function($http){
return{
auth:function(credentials)
{
var authUser = $http({method:'POST',url:'api/login/auth',params:credentials});
return authUser;
}
}
});

AuthSrvc are register in app.js this is service provider for authencation.so your authencation are completed

Register Service

Now open your app.js and insert the following code

var app = angular.module('blogApp',[
'ngRoute',
//Login
'LoginCtrl',
//Posts
//UserService
'UserCtrl',
//Auth Service
'AuthSrvc',
]);
app.run(function(){
 
});
 
//This will handle all of our routing
app.config(function($routeProvider, $locationProvider){
 
$routeProvider.when('/',{
templateUrl:'js/templates/login.html',
controller:'LoginController'
});
$routeProvider.when('/register',{
templateUrl:'js/templates/register.html',
controller:'UserController'
});
 });

Create User Register templaet

Now go to public->js and create register.html and insert the following code

<h3>Create User Register templaet</h3>
Now go to public->js and create register.html and insert the following code
<pre class="code">
<div id="login" class="col-md-4 col-md-offset-4">
<div id="login-form">
<h4>Here Register Your Self</h4>
<form><!--username-->
<span>First Name</span>
<input ng-model="new.fname" class="form-control" name="fname" type="text"/></div>
<span>Last Name</span>
<div class="form-group"><input ng-model="new.lname" class="form-control" name="lname" type="text"/></div>
<span>Email Name</span>
<div class="form-group"><input ng-model="new.email" class="form-control" name="email" type="text"/></div>
<span>Password </span>
<div class="form-group"><input ng-model="new.pwd" class="form-control" name="pwd" type="password"/></div>
<span>Confirm</span>
<div class="form-group"><input ng-model="new.cpwd" class="form-control" name="cpwd" type="password"/></div>

<!--submit-->
<div class="form-group"><button ng-click="submit()" class="btn btn-success">Save</button></div>
</form></div>
</div>
</div>

Controller for register

Now to public->js->controller and create file name UserController.js and insert the following code

var user = angular.module('UserCtrl',[]);
user.controller('UserController',function($scope,RegisterSrvc){
		
			$scope.submit = function(){
            var request = RegisterSrvc.user($scope.new);
                request.success(function(response){
                    $scope.flash = response.status;/////////display message
                });
        	}

});

Create service for reigstration

go to public->js->services and create file registerService.js and insert the following code

var register = angular.module('RegisterSrvc',[]);
register.factory('Register',function($http){
var authUser = $http({method:'POST',url:'api/register',params:credentials});
return authUser;

});

Create Database

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `last_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `password` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `remember_token` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;



Next:Create Blog App Create Block App

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates