How To Create a Login Page In ASP.net MVC with Database
Good day, IT Source Coders! For this simple tutorial, you can learn the step-by-step and easy process of How To Create a Login Page In ASP.net MVC with Database.
What is a Login Page in ASP.net?
A login page is a web page or website entry page that requires user identification and authentication, which is often accomplished by providing a username and password combination.
Logins might give you access to the full site or just a section of it.
Logging in allows the website to track the user’s activity and habits in addition to providing site access.
The user can log off a webpage or site manually, or it can happen automatically when specified criteria (such as closing the page, turning off the computer, or waiting a long period) are met.
What is the difference between login and user in SQL Server?
- SQL login is specific for the database server, and SQL Server database user is set for individual SQL Server Database if the SQL Server login is the Windows system account.
- SQL Server login account differs from a Database user in that it is the login user for a SQL Server database. If you have multiple databases, each database user has their own SQL Server login. At the same time, one or a few login users are restricted to a single database user.
So far, we’ve learned that SQL Server login is linked to the database user and that the two are distinct.
To connect to SQL Server, you’ll need an SQL Server login, and you’ll need a database user to access a specific database.
We could only log into SQL Server and access a certain database if we logged in as both SQL Server and database user at the same time.
Create Login Page In ASP.net MVC with Database: About the project
In this 2022 ASP.NET tutorial, We will learn How To Create a Login Page In ASP.NET MVC with a Database.
A programmer can develop two types of login forms: one that is static and the other that is dynamic.
The username and password in a static login form are fixed and predefined by the programmer, however in a dynamic login form, the username and password match the database username and password, and multiple users can log in with this dynamic login form.
Create a database table for username and password before creating a dynamic login form in asp.net.
We’ve made a table called “LoginMst” that has three columns: ID, Username, and Password.
Login Page In ASP.net Output
We first check if the username and password textboxes are blank in this asp.net login form example, then show the error message “Please input username” for the username textbox and “Please enter password” for the password textbox using the required field validator control in asp.net.
If the textbox is not empty, compare the username and password to database fields; if they match, display a success message such as “Welcome to System,” if they don’t, display an error message such as “Invalid username and password.”
Login Page in ASP.net Web Application: Project Details and Technology
Project Title: | Login Page Project In ASP.net |
---|---|
Abstract : | Login Page in ASP.net A login page is a web page or website entry page that requires user identification and authentication. |
Project Type: | Website |
Technology : | ASP.Net Visual Studio 2022 with C# Language |
Database : | SQL-Server 2021 |
To start creating this Login Page in ASP.net make sure that you have a Microsoft Visual Studio and SQL Server installed on your computer.
Steps on How to Create a Login Page In ASP.net MVC with Database
Time needed: 10 minutes
These are the steps on How to Create a Login Page In ASP.net MVC with Database
- Step 1: Open SQL Server
Open SQL Server (enter the Server Name, ID and Password then click on Connect).
- Step 2: Create a new database
Create a new database (right-click on Database then select New Database).
- Step 3: Name your database
Enter “Login” for the database name then click OK.
- Step 4: Create a new table
Create a new table (explore the CRUD database and right-click on Tables then select New Table).
- Step 5: Design the table
Design the table (name the columns and set the data types as shown in the following figure).
- Step 6: Open Visual Studio
Create a New Web Application (open Visual Studio then select File -> New ->New Project).
- Step 7: Select ASP.NET Web Application
Next, select ASP.NET Web Application(.NET Framework).
- Step 8: Name your project
Next, name your project and then, click the Create button.
- Step 9: Select an empty project
Next, select an empty project, then click Create.
- Step 10: Add a new item
Next, right-click on your project name on the right side under Solution Explorer and click Add then New Item.
- Step 11: Select web form
Next, select web form click add, and name your form “Login”
- Step 12: Add reference
Next, right-click the project in the solution explorer then click Add the click reference.
- Step 13: Add mysql.data.dll
Next, add mysql.data.dll then click ok.
- Step 14: Copy the code given
Finally, copy all code given below and paste it to each designated file.
Default.aspx
Here’s the code for Default.aspx file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1 { width: 391px; } .style2 { width: 131px; } .style3 { width: 79px; } </style> </head> <body> <form id="form1" runat="server"> <div> <table align="center" class="style1" style="border: thin solid #008080"> <tr> <td colspan="3" style="text-align: center; font-weight: 700; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #008080; background-color: skyblue"> User Login Area</td> </tr> <tr> <td class="style3"> </td> <td class="style2"> </td> <td> </td> </tr> <tr> <td class="style3"> UserName :</td> <td class="style2"> <asp:TextBox ID="txtusername" runat="server" Width="120px"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtusername" ErrorMessage="Please, enter username" ForeColor="Red"></asp:RequiredFieldValidator> </td> </tr> <tr> <td class="style3"> Password :</td> <td class="style2"> <asp:TextBox ID="txtpassword" runat="server" TextMode="Password" Width="120px"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtpassword" ErrorMessage="Please, enter password" ForeColor="Red"></asp:RequiredFieldValidator> </td> </tr> <tr> <td class="style3"> </td> <td class="style2"> <asp:Button ID="btnlogin" runat="server" onclick="btnlogin_Click" Text="Login" /> </td> <td> </td> </tr> <tr> <td class="style3"> </td> <td colspan="2"> <asp:Label ID="lblmsg" runat="server"></asp:Label> </td> </tr> </table> </div> </form> </body> </html>
Default.aspx.cs
Here’s the code for Default.aspx.cs file
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page { SqlConnection SQLConn = new SqlConnection("Data Source=LAPTOP-AMM1MQ8C; Initial Catalog=Login; Integrated Security=True"); protected void Page_Load(object sender, EventArgs e) { } protected void btnlogin_Click(object sender, EventArgs e) { lblmsg.Text = ""; SqlDataAdapter SQLAdapter = new SqlDataAdapter("Select * from LoginMst where username='" + txtusername.Text + "' and password='" + txtpassword.Text + "'", SQLConn); DataTable DT = new DataTable(); SQLAdapter.Fill(DT); if (DT.Rows.Count > 0) { lblmsg.Text = "Welcome to System"; lblmsg.ForeColor = System.Drawing.Color.Green; } else { lblmsg.Text = "Invalid username or password"; lblmsg.ForeColor = System.Drawing.Color.Red; } } }
Conclusion
Using the .Net Framework 4.7.2 and a code generation tool, we learned how to develop an ASP.NET Web application and link it to a SQL Server to execute basic Login Form tasks.
I hope you found it beneficial. Please let us know what you think in the comments area below.
Download the Source Code below
Anyway, if you want to level up your programming knowledge, especially ASP.net, try this new article I’ve made for you ASP.Net Projects With Source Code For Final Year Students.
Related Articles
- Laravel Login Page With Source Code
- C++ Login System Source Code
- Login Page In CodeIgniter With Database
- Login Page In Javascript With Source Code
- Login and Registration DFD Levels 0 1 2 | Data Flow Diagrams
Inquiries
If you have any questions or suggestions about Login Page in ASP.net MVC With Source Code, please feel free to leave a comment below.