In this 5th tutorial on dynamic web application development, we will learn how to create a login page in ASP.NET. We will create the static login page both for user login page & admin login page & also do its styling using bootstrap framework.
Watch the video tutorial at the end of this video to understand more about how to create master page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
User Login Page Code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="userlogin.aspx.cs" Inherits="WebApplication3.userlogin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Member ID"></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="TextBox2" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-success btn-block btn-lg" ID="Button1" runat="server" Text="Login" />
</div>
<div class="form-group">
<a href="usersignup.aspx"><input class="btn btn-info btn-block btn-lg" id="Button2" type="button" value="Sign Up" /></a>
</div>
</div>
</div>
</div>
</div>
<a href="homepage.aspx"><< Back to Home</a><br><br>
</div>
</div>
</div>
</asp:Content> Admin Login Page Code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="adminlogin.aspx.cs" Inherits="WebApplication3.adminlogin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/adminuser.png"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Admin Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div class="row">
<div class="col">
<label>Admin ID</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Admin ID"></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="TextBox2" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-success btn-block btn-lg" ID="Button1" runat="server" Text="Login" />
</div>
</div>
</div>
</div>
</div>
<a href="homepage.aspx"><< Back to Home</a><br><br>
</div>
</div>
</div>
</asp:Content> CSS Style (customstylesheet.css)-
.footerlinks {
color: #ffffff;
text-decoration: none ;
}
.footerlinks:hover {
color: #ffd800;
}
#footer1 {
background: #762b00;
}
#footer2 {
background: #531f00;
}