Creating a login page in MVC with a database is a crucial step in developing secure web applications. In this article, I will guide you through the process of building a login page in MVC and connecting it to a database. As an experienced developer, I will provide personal insights and tips to help you understand the concepts better. Let’s dive into the details!
Setting up the Database
The first step is to set up the database where we will store user login credentials. For this tutorial, we will be using a SQL database.
To create the login table, you can use the following SQL script:
CREATE TABLE Users (
ID INT IDENTITY(1,1) PRIMARY KEY,
Username NVARCHAR(50) NOT NULL,
Password NVARCHAR(50) NOT NULL
);
Make sure to adjust the table name and column names as per your application’s requirements. Now that the database is set up, let’s move on to the MVC part.
Creating the Controller
In MVC, the controller handles user requests and interacts with the database. To create a login page, we need to create a new controller that will handle the login functionality.
Create a new controller by right-clicking on the Controllers folder, selecting “Add,” and choosing “Controller.” Name the controller as “AccountController.”
Inside the AccountController, add an action method named “Login” which will handle the GET request for the login page:
public ActionResult Login()
{
return View();
}
Next, add another action method named “Login” with the [HttpPost] attribute to handle the POST request when the user submits the login form:
[HttpPost]
public ActionResult Login(string username, string password)
{
// Check if the username and password are valid
// Retrieve the user from the database and compare the passwords
if (valid)
{
// Redirect the user to the home page
return RedirectToAction("Index", "Home");
}
else
{
// Display an error message
ViewBag.ErrorMessage = "Invalid username or password";
return View();
}
}
Inside the POST action method, you need to add code to validate the user credentials. This involves querying the database to retrieve the user with the given username and comparing the password with the one stored in the database. If the credentials are valid, you can redirect the user to the home page; otherwise, display an error message.
Creating the View
Now that the controller is set up, let’s create the view for the login page. Right-click on the Views folder, select “Add,” and choose “View.” Name the view as “Login.”
Inside the Login.cshtml file, add the HTML markup for the login form. Include inputs for the username and password, and a submit button:
@using (Html.BeginForm("Login", "Account", FormMethod.Post))
{
@Html.LabelFor(model => model.Username)
@Html.TextBoxFor(model => model.Username)
@Html.LabelFor(model => model.Password)
@Html.PasswordFor(model => model.Password)
}
Make sure to adjust the form action to point to the “Login” action in the “Account” controller.
Conclusion
Creating a login page in MVC with a database is a critical step in building secure web applications. By following the steps outlined in this article, you should now have a better understanding of how to create a login page in MVC and connect it to a database. Remember to handle user input validation and store passwords securely to ensure the safety of your users’ data.
For a live example of a login page implementation in MVC with a database, you can visit the login page of our demo application.