javascript - How to match credentails using XML on login HTML page?

Locally I am trying to match the login credentails using the XML page which will act like database. If the login credentails matches, it must proceed to next page which will be new HTML page containing something. Here's what I have till now in HTML & XML page. I did the validation using the JavaScript and hard coded for one user. In XML if I have say 10 users then how do I do?

<html>
<head><title>Login page</title></head>
<body>

<div align="right">
<h1 style="font-family:Times New Roman;text-align="center";font-size:20pt;
color:#00FF00;>
Wele to Login Page
</h1>
<form name="login">
Username: &nbsp <input type="text" name="userid"/><br><br>
Password:  &nbsp  <input type="password" name="paasword"/><br><br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "user1" && form.password.value == "pass1")
{
window.open('success.html')/*opens the target page while Id & password matches*/
}
else
{
alert("wrong Username or Password")/*displays error message*/
}
}
</script>
</div>
</body>
</html>

XML code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<student>

<details>
<username>user1</username>
<password>pass1</password>
<email>[email protected]</email>
</details>

<details>
<username>user2</username>
<password>pass2</password>
<email>[email protected]</email>
</details>

<details>
<username>user3</username>
<password>pass3</password>
<email>[email protected]</email>
</details>

<details>
<username>user4</username>
<password>pass4</password>
<email>[email protected]</email>
</details>

</student>

<html>
<head><title>Login page</title></head>
<body>

<div align="right">
<h1 style="font-family:Times New Roman;text-align="center";font-size:20pt;
color:#00FF00;>
Wele to Login Page
</h1>
<form name="login">
Username: &nbsp <input type="text" name="userid"/><br><br>
Password:  &nbsp  <input type="password" name="paasword"/><br><br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "user1" && form.password.value == "pass1")
{
window.open('success.html')/*opens the target page while Id & password matches*/
}
else
{
alert("wrong Username or Password")/*displays error message*/
}
}
</script>
</div>
</body>
</html>

XML code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<student>

<details>
<username>user1</username>
<password>pass1</password>
<email>[email protected]</email>
</details>

<details>
<username>user2</username>
<password>pass2</password>
<email>[email protected]</email>
</details>

<details>
<username>user3</username>
<password>pass3</password>
<email>[email protected]</email>
</details>

<details>
<username>user4</username>
<password>pass4</password>
<email>[email protected]</email>
</details>

</student>

Share Improve this question asked Oct 28, 2013 at 10:31 Rock 1692 gold badges8 silver badges18 bronze badges

Storing user data in XML? Hmmm.... – Joran Den Houting Commented Oct 28, 2013 at 10:43
@JoranDenHouting Yes, into the XML file, while will be like our local database. How to I macth and move to next page, say success.html which page 2 here.. Please help me with this.. Thank you.. – Rock Commented Oct 28, 2013 at 10:48

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

You can use jQuery and do something like this..

<html>
<head><title>Login page</title></head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
   $(document).ready(function(){
   var xml;
  $('#b1').click(function(){
       $.get('users.xml', null, function (data, textStatus) {
           xml=data;
            $(xml).find('details').each( function(){
                var item = $(this);

                if(item.find('username').text()==$('#userid').val() && item.find('password').text()==$('#pwd').val())
                {
                    window.open('success.html');
                }
           });
        });
    });
});
    </script>
<body>
<div align="right">
<h1> Wele to Login Page </h1>
Username: &nbsp <input type="text" id="userid" name="userid"/><br><br>
Password:  &nbsp  <input type="password" id="pwd" name="paasword"/><br><br>
<input type="button" id="b1" value="Login"/>
<input type="reset" value="Cancel"/>
</div>
</body>
</html>

You could create an XML file for each user, which will have better performance.

Then when login, check if the file exsists and read the password out of it:

<?php
if(isset($_POST['login'])){
$username = preg_replace('/[^A-Za-z]/', '', $_POST['username']);
$password = $_POST['password'];
if(file_exists('users/' . $username . '.xml')){
    $xml = new SimpleXMLElement('users/' . $username . '.xml', 0, true);
    if($password == $xml->password){
        session_start();
        $_SESSION['username'] = $username;
        header('Location: index.php');
        die;
    } else {
                echo "wrong password";
            }
} else {
    echo "User not found";
}
?>

I would suggest to use some password encryption too, like this:

$password = base_64_encode(md5($_POST['password']));

Ofcourse you'll need to save the passwordt using the same encoding in your XML files.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745005285a4605742.html

javascript - How to match credentails using XML on login HTML page? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to match credentails using XML on login HTML page? - Stack Overflow

2 Answers 2

相关推荐