Change password feature in a web application is to let the user to change their old password at some periodic interval. It makes user to protect the sensitive pages from hackers.
Some web application fixes some expiration period for user’s password. It forces user to change password once the expiration period is elapsed. For example, some banking applications force users to change password for security.
We are going to see an example to change password with Javascript validation.
HTML Code for Change Password Form
This HTML code shows the change password.
<html>
<head>
<title>Change Password</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form name="frmChange" method="post" action="" onSubmit="return validatePassword()">
<div style="width:500px;">
<div class="message"><?php if(isset($message)) { echo $message; } ?></div>
<table border="0" cellpadding="10" cellspacing="0" width="500" align="center" class="tblSaveForm">
<tr class="tableheader">
<td colspan="2">Change Password</td>
</tr>
<tr>
<td width="40%"><label>Current Password</label></td>
<td width="60%"><input type="password" name="currentPassword" class="txtField"/><span id="currentPassword" class="required"></span></td>
</tr>
<tr>
<td><label>New Password</label></td>
<td><input type="password" name="newPassword" class="txtField"/><span id="newPassword" class="required"></span></td>
</tr>
<td><label>Confirm Password</label></td>
<td><input type="password" name="confirmPassword" class="txtField"/><span id="confirmPassword" class="required"></span></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Submit" class="btnSubmit"></td>
</tr>
</table>
</div>
</form>
</body></html>
All the fields are mandatory and the newPassword and confirmPassword should be same. We are using Javascript validation. The validation function is,
<script>
function validatePassword() {
var currentPassword,newPassword,confirmPassword,output = true;
currentPassword = document.frmChange.currentPassword;
newPassword = document.frmChange.newPassword;
confirmPassword = document.frmChange.confirmPassword;
if(!currentPassword.value) {
currentPassword.focus();
document.getElementById("currentPassword").innerHTML = "required";
output = false;
}
else if(!newPassword.value) {
newPassword.focus();
document.getElementById("newPassword").innerHTML = "required";
output = false;
}
else if(!confirmPassword.value) {
confirmPassword.focus();
document.getElementById("confirmPassword").innerHTML = "required";
output = false;
}
if(newPassword.value != confirmPassword.value) {
newPassword.value="";
confirmPassword.value="";
newPassword.focus();
document.getElementById("confirmPassword").innerHTML = "not same";
output = false;
}
return output;
}
</script>
PHP Change Password Script
After successful form submit, the PHP code will access MySQL to get current password. If this database value is matched with the forms current-password value, then the password will be changed. The PHP code is,<?php
$_SESSION["userId"] = "24";
$conn = mysql_connect("localhost","root","");
mysql_select_db("php_examples",$conn);
if(count($_POST)>0) {
$result = mysql_query("SELECT *from users WHERE userId='" . $_SESSION["userId"] . "'");
$row=mysql_fetch_array($result);
if($_POST["currentPassword"] == $row["password"]) {
mysql_query("UPDATE users set password='" . $_POST["newPassword"] . "' WHERE userId='" . $_SESSION["userId"] . "'");
$message = "Password Changed";
} else $message = "Current Password is not correct";
}
?>
After successful form submit, the PHP code will access MySQL to get current password. If this database value is matched with the forms current-password value, then the password will be changed. The PHP code is,
<?php
$_SESSION["userId"] = "24";
$conn = mysql_connect("localhost","root","");
mysql_select_db("php_examples",$conn);
if(count($_POST)>0) {
$result = mysql_query("SELECT *from users WHERE userId='" . $_SESSION["userId"] . "'");
$row=mysql_fetch_array($result);
if($_POST["currentPassword"] == $row["password"]) {
mysql_query("UPDATE users set password='" . $_POST["newPassword"] . "' WHERE userId='" . $_SESSION["userId"] . "'");
$message = "Password Changed";
} else $message = "Current Password is not correct";
}
?>
Style.css
body {
font-family:Arial;
}
input {
font-family:Arial;
font-size:14px;
}
label{
font-family:Arial;
font-size:14px;
color:#999999;
}
.tblSaveForm {
border-top:2px #999999 solid;
background-color: #f8f8f8;
}
.tableheader {
background-color: #fedc4d;
}
.btnSubmit {
background-color:#fd9512;
padding:5px;
border-color:#FF6600;
border-radius:4px;
color:white;
}
.message {
color: #FF0000;
text-align: center;
width: 100%;
}
.txtField {
padding: 5px;
border:#fedc4d 1px solid;
border-radius:4px;
}
.required {
color: #FF0000;
font-size:11px;
font-weight:italic;
padding-left:10px;
}Users Database
CREATE TABLE IF NOT EXISTS `users` (
`userId` int(8) NOT NULL AUTO_INCREMENT,
`userName` varchar(55) NOT NULL,
`password` varchar(55) NOT NULL,
`displayName` varchar(55) NOT NULL,
PRIMARY KEY (`userId`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
--
-- Dumping data for table `users`
--
INSERT INTO `users` (`userId`, `userName`, `password`, `displayName`) VALUES
(1, 'admin', 'admin123', 'Admin'); save as the users.sql
0 comments:
Post a Comment