Note: This program will work only on Internet Explorer.
This article explains the best way to implement a simple login form to check account information details of a user within a database. If the user details exist in the database then the user is redirected to a welcome page, otherwise we should instead display "Invalid Username/Password".
First I created a database EmpDetail and now I created a table in this database.
Query Code
create table Login_Info
(
Emp_Name varchar(50),
Passwrd varchar(50)
)
Now Insert some Data in LoginDetail table.
insert into Login_Info values('Sharad','sharad')
insert into Login_Info values('Manish','manish')
Select * from Login_Info
![sql-image.jpg]()
Now the following procedure is used.
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
Give the name of your application as "Login" and then click "Ok".
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css file.
![solution-ex.jpg]()
Coding
Login_Page.ts
class Login_Page
{
login()
{
var a = 0;
var txtuname = (<HTMLTextAreaElement>(document.getElementById('txtuname'))).value;
var txtpwd = (<HTMLTextAreaElement>(document.getElementById('Pwd'))).value;
if (txtuname.length != 0 && txtpwd.length != 0) {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=password@123;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from Login_Info where Emp_Name='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);
while (!rs.eof)
{
window.location.assign('WelcomePage.html');
a = 1;
rs.MoveNext();
}
if (a == 0)
{
alert("Invalid UserName and Password");
}
rs.close();
connection.close();
}
else
{
alert("Please Enter Values in Textbox ");
}
}
cancelLogin()
{
document.getElementById('txtuname').innerText = "";
document.getElementById('Pwd').innerText = "";
}
}
window.onload = () =>
{
var bttn = document.getElementById("login");
var obj = new Login_Page();
bttn.onclick = function ()
{
obj.login();
}
var bttncancel = document.getElementById("cancel");
bttncancel.onclick = function ()
{
obj.cancelLogin();
}
};
Default.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Login_Page.js"></script>
</head>
<body>
<fieldset style="font-size: medium; width: 356px;">
<legend style="background-color: #99CCFF; font-size:larger">User Login</legend>
<br />
<b>UserName</b>
<input id="txtuname" type="text" /><br />
<br />
<b>Password</b>
<input id="Pwd" type="password" /><br />
<br />
<input id="login" type="button" value="Login" />
<input id="cancel" type="button" value="Cancel" />
</fieldset>
</body>
</html>
Login_Page.js
var Login_Page = (function () {
function Login_Page() { }
Login_Page.prototype.login = function () {
var a = 0;
var txtuname = ((document.getElementById('txtuname'))).value;
var txtpwd = ((document.getElementById('Pwd'))).value;
if(txtuname.length != 0 && txtpwd.length != 0) {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=password@123;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from Login_Info where Emp_Name='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);
while(!rs.eof) {
window.location.assign('WelcomePage.html');
a = 1;
rs.MoveNext();
}
if(a == 0) {
alert("Invalid UserName and Password");
}
rs.close();
connection.close();
} else {
alert("Please Enter Values in Textbox ");
}
};
Login_Page.prototype.cancelLogin = function () {
document.getElementById('txtuname').innerText = "";
document.getElementById('Pwd').innerText = "";
};
return Login_Page;
})();
window.onload = function () {
var bttn = document.getElementById("login");
var obj = new Login_Page();
bttn.onclick = function () {
obj.login();
};
var bttncancel = document.getElementById("cancel");
bttncancel.onclick = function () {
obj.cancelLogin();
};
};
//@ sourceMappingURL=Login_Page.js.map
Output 1
![login-img.jpg]()
Enter the username and password and then click on the Login button.
![enter-detail.jpg]()
The user is redirected to the "WelcomPage.html" page.
![welcome-page.jpg]()
Output 2
If we enter the wrong UserName or Password then:
![wrong-pwd.jpg]()
Output 4
If you enter a UserName and Password and then click on the "Cancel" button:
![enter-detail.jpg]()
After clicking on the "Cancel" button:
![cancel.jpg]()
For more information, download the attached sample application.