Create Responsive Login Page (Same as Gmail) in ASP.NET using Bootstrap and SQL Server

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


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Login Page</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</head>

<body>

    <div class="row">

        <div class="col-lg-4"></div>

        <div class="col-lg-4">

            <div class="container">

                <div class="alert alert-success" role="alert">

                    <h4 class="alert-heading">Login Here!</h4>

                    <p>Please enter your credentials to login!</p>

                    </div>

                 <form runat="server">

                     <div class="form-floating mb-3">

                       <input type="email" class="form-control" runat="server" id="txtEmail" placeholder="name@example.com"/>

                       <label for="floatingInput">Email address</label>

                     </div>

                     <div class="form-floating mb-3">

                       <input type="password" class="form-control" runat="server" id="txtPassword" placeholder="Password"/>

                       <label for="floatingPassword">Password</label>

                     </div>

                     <asp:Button ID="Button1" runat="server" Text="Login" CssClass="btn btn-primary" OnClick="Button1_Click"/>

                 </form>

            </div>

        </div>

        <div class="col-lg-4"></div>

    </div>

</body>

</html>

ABOVE FILE IS login.aspx
















using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace Responsive_Login_Page_Same_as_Gmail
{
    public partial class login : System.Web.UI.Page
    {
        string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            try
            {
                using (SqlConnection con = new SqlConnection(cs))
                {
                    con.Open();
                    string username = txtEmail.Value;
                    string password = txtPassword.Value;
                    string query = "SELECT * FROM login WHERE username=@username AND password=@password";
                    SqlCommand cmd = new SqlCommand(query,con);
                    cmd.Parameters.AddWithValue("@username",username);
                    cmd.Parameters.AddWithValue("@password",password);
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    DataTable data = new DataTable();
                    sda.Fill(data);
                    if (data.Rows.Count > 0)
                    {
                        Response.Write("<script type='text/javascript'>alert('Login successful !');location.href='Index.aspx';</script>");
                    }
                    else
                    {
                        Response.Write("<script>alert('Error in Login, Login Failed !!')</script>");
                    }
                }
            }
            catch (SqlException ex)
            {
                Response.Write("SqlException : " + ex.Message);
            }
            catch (Exception ex)
            {
                Response.Write("Exception : " + ex.Message);
            }
        }
    }
}
ABOVE FILE IS login.aspx.cs
















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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Welcome to Index page !</h1>
        </div>
    </form>
</body>
</html>
ABOVE FILE IS Index.aspx















<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.7.2" />
    <httpRuntime targetFramework="4.7.2" />
    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization" />
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
      </controls>
    </pages>
  </system.web>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Antlr3.Runtime" publicKeyToken="eb42632606e9261f" />
        <bindingRedirect oldVersion="0.0.0.0-3.5.0.2" newVersion="3.5.0.2" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Web.Infrastructure" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-13.0.0.0" newVersion="13.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-1.6.5135.21930" newVersion="1.6.5135.21930" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701" />
      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
    </compilers>
  </system.codedom>
<connectionStrings>
<add name="dbcs" connectionString="Data Source=DESKTOP-77M6N4G\SQLEXPRESS;Initial Catalog=reslogin;Integrated Security=True;TrustServerCertificate=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
</configuration>
ABOVE FILE IS Web.config














CREATE DATABASE reslogin;

USE reslogin;

CREATE TABLE login(
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL
);

INSERT INTO login(username,password)
VALUES('admin@gmail.com','admin'),
('user@gmail.com','user');

SELECT * FROM login;






Comments

Post a Comment

Popular posts from this blog

Create a User Registration Form in ASP.NET using SQL Server, Visual Studio 2022 & Bootstrap

Image
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="userreg.aspx.cs" Inherits="Registration_Form.userreg" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>User Registration</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </head> <body>     <div class="container">         <form class="row g-3 bg-light" runat="server" meth...
Read more

Create a Simple Login Form in ASP.NET using Visual Studio 2022

Image
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="LoginFormASP.login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title> </head> <body>     <h1 align="center">Login Form</h1>     <form id="form1" runat="server">         <table align="center">             <tr>                 <td>Username</td>                 <td>                     <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>                 </td>             </tr>             <tr>       ...
Read more

SqlCommand Class ADO.Net | ExecuteNonQuery | ExecuteReader | ExecuteScalar

Image
 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Data; using System.Data.SqlClient; using System.Configuration; namespace SQLConnectionADO {     internal class Program     {         static void Main(string[] args)         {             Program.Connection();             Console.ReadLine();         }         static void Connection()         {             string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;             SqlConnection con = null;             try             {                 using (con = new SqlConnection(cs))       ...
Read more