Part-17: User authentication using Store procedure Javascript AngularJS JQUERY ASP.NET MVC

11/8/2021 11:27:41 AM

In this post, You will learn User authentication & authorization using SQL SERVER Store procedure Jquery AngualrJS ASP.NET MVC. Here you will learn how to create store procedure and update store procedure then making login page to enter username and password.

Steps:

Step-1:

Modify store Procedure for Insert Student as user.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_Student with writing the below highlight code.


ALTER PROCEDURE [dbo].[sp_Insert_Student]
	-- Add the parameters for the stored procedure here
	 @StudentName nvarchar(max)=null ,
	 
	 @BatchId int=null ,
	 @SectionId int=null ,
	 @DOB datetime=null ,
	 @Gender nvarchar(max)=null ,
	 @Religion nvarchar(max)=null ,
	 @FatherName nvarchar(max)=null ,
	 @MotherName nvarchar(max)=null ,
	 @PresentAddrees nvarchar(max)=null ,


	 @PermanentAddress nvarchar(max)=null ,
	 @AddmittedDate datetime=null ,
	 @Status bit=null ,
	 @StudentIdNO nvarchar(max)=null 


	 
AS
BEGIN
	-- SET NOCOUNT ON added to prevent extra result sets from
	INSERT INTO [dbo].[tblStudent]
           ( StudentName, [BatchId]
           ,[SectionId]
           ,[DOB]
           ,[Gender]
           ,[Religion]
           ,[FatherName]
           ,[MotherName]
           ,[PresentAddrees]
           ,[PermanentAddress]
           ,[AddmittedDate]
           ,[Status],StudentIdNO)
     VALUES
            (@StudentName,@BatchId,@SectionId,@DOB,@Gender,@Religion,@FatherName,@MotherName,@PresentAddrees,@PermanentAddress,@AddmittedDate,
			@Status,@StudentIdNO)

			declare @MaxStudentId int 

	 select	@MaxStudentId= MAX(StudentId) from tblStudent 
	 	declare @Bat int 
	 select @Bat= BatchId from tblStudent  where StudentId=@MaxStudentId
	 


	 	declare @BatName nvarchar(max) 
	 select @BatName= BatchName from tblBatch  where BatchId=@Bat
	   declare @StuIDNO nvarchar(max)
	   select @StuIDNO=   ISNULL(MAX(ISNULL(StudentIdNO,0)),0)+1   from tblStudent 
	   
	   where StudentId=@MaxStudentId and BatchId=@Bat
	  

	  insert into tblUser ([UserName]
           ,[LoginName]
           ,[Password]
           ,[UserType]
           ,[StudentId],ActiveStatus)
		   values(
		   @StudentName,
		  @BatName+ @StuIDNO,
		  @BatName+ @StuIDNO,
		   'Student',
		   @MaxStudentId,1
		   )

	   update tblStudent set StudentIdNO=@StuIDNO where  StudentId=@MaxStudentId
END

Step-2:

Create HomeController.cs.
Go to Solution Explorer > Controllers Folder> Controller> create HomeController > in this controller with writing the below code.

        public ActionResult LoginPage()
        {
            return View();
        }

In the LoginPage() Action Result Mouse right button Select Add View > Click Add Button> LoginPage.cshtml page has been created.

Step-2:

Modify LoginPage.cshtml page with writing the below code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
     
    <link href="~/Content/plugins/fontawesome-free/css/all.min.css" rel="stylesheet" />
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="~/Content/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/Content/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">



    <div ng-app="ABCApp" ng-controller="HomeController">
        <div class="login-box">
            <div class="login-logo">
                <a href="../../index2.html"><b>Admin</b>LTE</a>
            </div>
            <!-- /.login-logo -->
            <div class="card">
                <div class="card-body login-card-body">
                    <p class="login-box-msg">Sign in to start your session</p>

                    <form action="../../index3.html" method="post">
                        <div class="input-group mb-3">
                            <input  ng-model="UserDAO.LoginName" class="form-control" placeholder="Email">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-envelope"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="password" ng-model="UserDAO.Password" class="form-control" placeholder="Password">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8">
                                <div class="icheck-primary">
                                    <input type="checkbox" id="remember">
                                    <label for="remember">
                                        Remember Me
                                    </label>
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-4">
                                <input type="button" ng-click="LoginData()" class="btn btn-primary" value="{{btnLogin}}" />

                            </div>
                            <!-- /.col -->
                        </div>
                    </form>

                    <div class="social-auth-links text-center mb-3">
                        <p>- OR -</p>
                        <a href="#" class="btn btn-block btn-primary">
                            <i class="fab fa-facebook mr-2"></i> Sign in using Facebook
                        </a>
                        <a href="#" class="btn btn-block btn-danger">
                            <i class="fab fa-google-plus mr-2"></i> Sign in using Google+
                        </a>
                    </div>
                    <!-- /.social-auth-links -->

                    <p class="mb-1">
                        <a href="forgot-password.html">I forgot my password</a>
                    </p>
                    <p class="mb-0">
                        <a href="register.html" class="text-center">Register a new membership</a>
                    </p>
                </div>
                <!-- /.login-card-body -->
            </div>
        </div>
    </div>
    <!-- /.login-box -->
    <!-- jQuery --> 
    <!-- Bootstrap 4 -->
    <script src="~/Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="~/Content/dist/js/adminlte.min.js"></script>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/AngularController/HomeControllerJS.js"></script>
</body>
</html>

Step-3:

Create HomeControllerJS.js file.
Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create ‘HomeControllerJS.js > for Login with writing the below code.

var MyApp = angular.module("ABCApp", []);
MyApp.controller("HomeController", function ($scope, $http) {
    $scope.btnLogin = "Sign In";

    $scope.LoginData = function () {

        $scope.btnLogin = "Signing.....";
        $http({
            method: 'POST',
            url: '/Home/GetLoginInfo',
            data: $scope.UserDAO
        }).success(function (a) {
            window.location.href = "Index"
        }).error(function () {

            $scope.btnLogin = "Sign In";
            $scope.UserDAO = null;
            alert("Faild to Login");
        });
    };
});

Step-4:

In HomeController.cs class add GetLoginInfo() JsonResult for Login.
Go to Solution Explorer > Controllers Folder > HomeController.cs in this controller with writing the below code.

        public JsonResult GetLoginInfo(UserDAO dao)
        {
            DataTable dt = aDal.LoadAllDataDAL(dao);

            string mes = "";
            if (dt.Rows.Count > 0)
            {
                Session["LoginName"] = dao.LoginName;
                mes = "Login Successfully";
            }
            else
            {
                mes = "Login Faild";
            }
            return Json(mes, JsonRequestBehavior.AllowGet);
        }

Step-5:

Create UserDAL.cs class.
Go to Solution Explorer > DAL Folder > UserDAL.cs Class with writing the below code.

        public DataTable LoadAllDataDAL(UserDAO dao)
        {
            SqlCommand com = new SqlCommand("sp_LoginInfo", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@LoginName", dao.LoginName);
            com.Parameters.AddWithValue("@Password", dao.Password);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataTable dss = new DataTable();
            da.Fill(dss);
            return dss;
        }

Step-6:

Create UserDAO.cs class.
Go to Solution Explorer > DAO Folder > UserDAO.cs Class with writing the below code.

    public class UserDAO
    {
        public string LoginName { get; set; }
        public string Password { get; set; }
    }

Step-7:

Create store Procedure for Login.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoginInfo with writing the below code.

create proc [dbo].[sp_LoginInfo]
@LoginName nvarchar(max),
@Password nvarchar(max)

as 

begin
select  * from tblUser where LoginName=@LoginName and Password=@Password
end

Step-11: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him

Comments

Save Reset

{{data.CreatedOn}} {{data.ProfileName}}

reply

{{item.CreatedOn}} {{item.ProfileName}}

SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET

SMS-28: Student Result show by search trimester and myasp server registration and login using Jquery & Angular js in ASP.NET MVC

SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC

SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC

0 Comments

AngularJS

27 Articles