How to create Login Page using Asp.net MVC using stored procedure ?

To create a login page using ASP.NET MVC that utilizes a stored procedure for authentication, follow these detailed steps:

Step 1: Create a New ASP.NET MVC Project

1. Open Visual Studio.
2. Create a new project:
   • Go to File > New > Project.
   • Select ASP.NET Web Application and name your project (e.g., StudentLoginApp).
   • Choose the MVC template and click OK.

Step 2: Set Up the Database

1. Create a SQL Server Database:
   • Open SQL Server Management Studio (SSMS).
   • Create a new database named StudentDB.
2. Create a Table:
   • Execute the following SQL script to create a table for storing student credentials:

sql

CREATE TABLE Students (

Id INT PRIMARY KEY IDENTITY(1,1),

Username VARCHAR(50) NOT NULL,

Password VARCHAR(50) NOT NULL

);

3. Insert Sample Data:

• Add some sample records:

sql

INSERT INTO Students (Username, Password) VALUES (‘student1’, ‘password1’);

INSERT INTO Students (Username, Password) VALUES (‘student2’, ‘password2’);

4. Create a Stored Procedure:

Create a stored procedure to validate user credentials:

csharp

public class LoginModel

{

public string Username { get; set; }

public string Password { get; set; }

}

Step 4: Create the Controller

1. Create a Controller:
   • Right-click on the Controllers folder and add a new controller named AccountController.cs:

csharp

using System.Data;

using System.Data.SqlClient;

using System.Web.Mvc;

using YourNamespace.Models; // Update with your actual namespace

public class AccountController : Controller

{

private string connectionString = “YourConnectionStringHere”; // Update with your connection string

public ActionResult Login()

{

return View();

}

[HttpPost]

public ActionResult Login(LoginModel model)

{

if (ModelState.IsValid)

{

using (SqlConnection conn = new SqlConnection(connectionString))

{

SqlCommand cmd = new SqlCommand(“ValidateStudentLogin”, conn);

cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.AddWithValue(“@Username”, model.Username);

cmd.Parameters.AddWithValue(“@Password”, model.Password);

conn.Open();

SqlDataReader reader = cmd.ExecuteReader();

if (reader.HasRows)

{

// Login successful

return RedirectToAction(“Index”, “Home”); // Redirect to home page

}

else

{

ModelState.AddModelError(“”, “Invalid username or password.”);

}

}

}

return View(model);

}

}

Step 5: Create the Login View

1. Create a View for Login:
   • Right-click on the Login action in AccountController and select Add View.
   • Name the view Login.cshtml and use the LoginModel as the model.

xml



@model YourNamespace.Models.LoginModel

@{

ViewBag.Title = “Login”;

}

<h2>Login</h2>

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<div>

@Html.LabelFor(m => m.Username)

@Html.TextBoxFor(m => m.Username)

@Html.ValidationMessageFor(m => m.Username)

</div>

<div>

@Html.LabelFor(m => m.Password)

@Html.PasswordFor(m => m.Password)

@Html.ValidationMessageFor(m => m.Password)

</div>

<div>

<input type=”submit” value=”Login” />

</div>

}

Step 6: Configure the Connection String

1. Update Connection String:
   • Open Web.config and add your connection string inside the <connectionStrings> section:
   xml

<connectionStrings>

<add name=”DefaultConnection” connectionString=”Data Source=YOUR_SERVER;Initial Catalog=StudentDB;Integrated Security=True” providerName=”System.Data.SqlClient” />

</connectionStrings>

Update the connectionString variable in the AccountController to use this connection string:

csharp

private string connectionString = ConfigurationManager.ConnectionStrings[“DefaultConnection”].ConnectionString;

Step 7: Run Your Application

1. Start the Application:
   • Press F5 to run your application.
   • Navigate to /Account/Login to access the login page.
   • Enter the credentials you added to the database and click Login.

Conclusion:

This post explains how to create a login page in ASP.NET MVC using a stored procedure for authentication. This solution can be improved by including features such as password hashing, user sessions, and error handling to make the program more robust.

Create Mind Map step:

To create a mind map for a Login Page, follow these steps:

Steps to Create a Mind Map

1. Identify the Central Idea: Begin with the central concept of the mind map. In this case, write “Login Page” in the center of the page. This represents the main topic you will be exploring.
2. Branch Out Ideas: From the central idea, draw branches that represent key elements related to the login page. These might include:
   • User Interface Elements
   • Functionality Features
   • Security Measures
   • User Experience Enhancements
   • Access Options
3. Add Sub-branches: For each branch, add sub-branches to detail specific aspects. For instance, under “User Interface Elements,” you may include:
   • Username field
   • Password field
   • Login button
   • Forgot password link
   • Create account link
4. Use Visual Aids: Incorporate colors, images, and icons to differentiate between categories and subcategories. This makes the mind map more visually appealing and easier to comprehend.
5. Review and Revise: Once all ideas are organized, review the mind map for completeness and clarity. This is the time to add any additional notes or ideas you may have.

Elements to Include in a Login Page Mind Map

• User Interface Elements
  • Input fields (Username, Password)
  • Buttons (Login, Forgot Password, Create Account)
  • Captcha for security
• Functionality Features
  • Remember Me option
  • Multi-Factor Authentication
  • Password recovery process
• Security Measures
  • Use of HTTPS
  • Encryption for passwords
  • Security questions
• User Experience Enhancements
  • Clear error messages
  • Mobile responsiveness
  • Visual feedback (e.g., loading indicators)
• Access Options
  • Links to social media logins (e.g., Google, Facebook)
  • Guest login options (if applicable)

By following these steps and including the relevant elements, you can effectively create a mind map for a Login Page that serves as a useful guide for design and development. This structured approach helps visualize the components and their interconnections, ultimately leading to a more efficient design process.