Create Login Form in ASP.NET with MySQL

Hello Developers, Here is Article to Create Login Form in C# ASP.NET using MySQL.Here i am using Microsoft Visual Studio and MySQL.Let’s Follow some important steps.

step 1 : Open Visual Studio.Go to File Tab –>Project –>Web –>ASP.NET Web Application–>Select Empty –>Check Web Forms and MVC–>OK. see below image.

step 2 : Right click on Project –>Add –>Web Forms(WebForm2)–>Item name –> OK. see below image.

Step 3 : Remove all previous Codes and Copy+Paste Following given codes in WebForm2.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="LoginTest.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            font-size: xx-large;
            color: #003399;
        }
        .auto-style3 {
            width: 401px;
        }
        .auto-style4 {
            background-color: #0099CC;
        }
        .auto-style5 {
            background-color: #33CCCC;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table class="auto-style1">
                <tr>
                    <td>
                        <table class="auto-style1">
                            <tr>
                                <td class="auto-style2"><strong>-------------------Register---------------</strong></td>
                            </tr>
                            <tr>
                                <td>Create Your Account.Its Free and Only Takes a Minute</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <table class="auto-style1">
            <tr>
                <td class="auto-style3">
                    <asp:Label ID="Label1" runat="server" Text="Enter First Nae"></asp:Label>
                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtFirstName" ErrorMessage="Enter FirstName" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
                <td>
                    <asp:Label ID="Label2" runat="server" Text="Enter Last Name"></asp:Label>
                    <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtLastName" ErrorMessage="Enter Last Name" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>
        <table class="auto-style1">
            <tr>
                <td>
                    <asp:Label ID="Label3" runat="server" Text="Enter Email"></asp:Label>
                    <asp:TextBox ID="txtEmail" runat="server" TextMode="Email" Width="348px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="Enter Email" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label4" runat="server" Text="Enter Password"></asp:Label>
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="316px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtPassword" ErrorMessage="Enter Password" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label5" runat="server" Text="Enter Confirm Password"></asp:Label>
                    <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" Width="258px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtConfirmPassword" ErrorMessage="Enter Confirm Password" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPassword" ControlToValidate="txtConfirmPassword" ErrorMessage="Password Must be Match" ForeColor="#FF3399"></asp:CompareValidator>
                </td>
            </tr>
        </table>
        <asp:CheckBox ID="CheckBox1" runat="server" CssClass="auto-style5" Text="I accept the Terms of Use &amp; Privacy Policy" />
        <table class="auto-style1">
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" CssClass="auto-style4" Height="50px" OnClick="Button1_Click1" Text="Submit" Width="306px" />
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Step 4 . Install two important packages “mysql-for-visualstudio” and “mysql-connector”.see below image.Click “Tools” Tab and next Click “Connect to Database”.Choose “MySQL Database” from Data source and click “Continue” button.see below image.

Step 5.Give MySQL Server name ,Enter User name and Password.Select or enter a database(sakila) from drop-down box. Click “Test Connection”button. if connection succeeded then click OK. Follow below image.

Step 6.Right click on References–>Add References–>Browse–>give the path–>select “MySql.Data.dll”–>click “Add” button. see below image.

Step 7. Add package “using MySql.Data.MySqlClient. After write any types of codes related with MySQL in WebForm2.aspx.cs. see below image.

Step 8 :Right click on Project –>Add –>Web Forms (WebForm4.aspx) –>Item name –> OK.write below codes.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="LoginTest.WebForm4" %>

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .auto-style1 {
                font-size: xx-large;
                background-color: #003399;
                color: #0000FF;
            }
            .auto-style2 {
                width: 154px;
            }
            .auto-style3 {
                text-align: left;
            }
            .auto-style4 {
                width: 89px;
            }
        </style>
    </head>
    <body>  
        <form id="form1" runat="server">  
            <div >  
                <table style="width:100%;">  
                    <caption class="auto-style3">  
                        <strong><span class="auto-style1">Login Form</span></strong>  
                    </caption>  
                    <tr>  
                        <td class="auto-style4">  
     </td>  
                        <td class="auto-style2">  
     </td>  
                        <td>  
     </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style4">  
    Username:</td>  
                        <td class="auto-style2">  
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
                        </td>  
                        <td>  
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"   
    ControlToValidate="TextBox1" ErrorMessage="Please Enter Your Username"   
    ForeColor="Red"></asp:RequiredFieldValidator>  
                        </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style4">  
                            Password:</td>  
                        <td class="auto-style2">  
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
                        </td>  
                        <td>  
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"   
    ControlToValidate="TextBox2" ErrorMessage="Please Enter Your word"   
    ForeColor="Red"></asp:RequiredFieldValidator>  
                        </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style4">  
     </td>  
                        <td class="auto-style2">  
     </td>  
                        <td>  
     </td>  
                    </tr>  
                    <tr>  
                        <td class="auto-style4">  
     </td>  
                        <td class="auto-style2">  
                            <asp:Button ID="Button1" runat="server" Text="Log In" onclick="Button1_Click" />  
                        </td>  
                        <td>  
                            <asp:Label ID="Label1" runat="server"></asp:Label>  
                        </td>  
                    </tr>  
                </table>  
            </div>  
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/WebForm2.aspx">Sign UP</asp:HyperLink>
        </form>  
    </body> 
</html>

Step9 : write the below codes in webform.aspx.cs. see below image.