Untitled

<html>
<body>

<?php
/*config is included in order to protect my login info*/
require('config.php');
Echo "Project 4";

/*SQL connection*/
$conn = new mysqli(DB_HOST,DB_USER,DB_PASS,DB_NAME);

/*Checking Connection*/
if (mysqli_connect_errno()) {
    printf("Connect failed: %sn", mysqli_connect_error());
    exit();
}
$sql = "SELECT * FROM p4Data";
$data2 = mysqli_query($conn, $sql);

/*Display Data*/
echo "<table border = 1 style='float:left'>
<tr>
    <th>Username</th>
    <th>Password</th>
</tr>";

//Array Declarations
$usernameArr = [];
$passwordArr = [];

while($records = mysqli_fetch_array($data2)){
  array_push($usernameArr,$records["username"]);
  array_push($passwordArr,$records["password"]);
}
echo "</table>";

//JSON Conversion
$usernameJson = json_encode($usernameArr);
$passwordJson = json_encode($passwordArr);
mysqli_close($conn);
?>


<!-- JAVA SECTION -->
<script type="text/javascript">
  var obj = JSON.parse('<?= $usernameJson; ?>');
  var obj2 = JSON.parse('<?= $passwordJson; ?>');

  function verifUser(){
    var usernameData = document.getElementById("username").value;
    var passwordData = document.getElementById("password").value;
    for (i = 0; i < 30; i++){

      if(usernameData == obj[i]){
        alert("Username verfied at " + i);
        indexLocated = i;
        break;
       }
      }
    }
</script>


<form name='form-main'>
  Username: <input type="text" id="username"><br>
  Password: <input type="password" id="password"><br>
  <input type="button" value="Login >>" id="submitButton"
onclick="verifUser()">
</form>
</body>
</html>