John's Learning Journal: CST336 Week 7

Some great new content this week including AJAX, XML and JSON (mostly new to me). Using what we learned this week I began improving a web site of mine. For assignment 7 I began work on http://www.diablofirearms.com/classSignup.php. This courses content has given me all kinds of ideas on using databases more throughout this site. For this page I used the following code to require a log in (or creation of user account):

<?php
session_start();

if(!isset($_SESSION['username'])) {
 header("Location: userLogin.php");
}
?>

Then for the login/account creation page I used the following:

<?php
session_start();

if (isset($_POST['loginname'])) {
 require 'db_connection.php';

 $sql = "SELECT *
 FROM students
 WHERE username = :username
 AND password = :password";

 $stmt = $dbConn -> prepare($sql);
 $stmt -> execute(array(":username" => $_POST['loginname'], ":password" => hash("sha1", $_POST['password'])));
 $record = $stmt -> fetch();
 if (!empty($record)) {
  $_SESSION['username'] = $record['username'];
  $_SESSION['name'] = $record['name'];
  header("Location: classSignup.php");
 }
}
?>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <title>Diablo Firearms Training - Student Login</title>

<!-- Extra code removed for size -->

  <u><font color="red" size="5"><strong>Account Log In</strong></font></u>
      <form method=post>
        <table border="0">
          <tbody>
            <tr>
              <td style="text-align: right;">Username: </td>
              <td><input tabindex="1" name="loginname"></td>
            </tr>
            <tr>
              <td style="text-align: right;">Password: </td>
              <td><input tabindex="2" name="password" type="password"></td>
            </tr>
            <tr>
              <td style="text-align: center;" colspan="2"><input tabindex="3" value="Log In" type="submit"><input value="Reset" type="reset"></td>
            </tr>
          </tbody>
        </table>
      </form>

      <div align="center"><u><font color="red" size="5"><strong>New Account
Creation</strong></font></u></div>
      <form method=post action=createUser.php>
        <table border="0">
          <tbody>
            <tr>
              <td style="text-align: right;">New Username: </td>
              <td><input id="username" name="username" type=text required><span id="checkUsername"></span></td>
            </tr>
            <tr>
              <td style="text-align: right;">Password: </td>
              <td><input id=newPassword name="newPassword" type="password" required><span id="checkPassword"></span></td>
            </tr>
            <tr>
              <td style="text-align: right;">Repeat Password: <br>
              </td>
              <td><input id=newPasswordRepeat name="newPasswordRepeat" type="password" required></td>
            </tr>
            <tr>
              <td style="text-align: right;">Full Name: <br>
              </td>
              <td><input type=text name="realName" required><br>
              </td>
            </tr>
            <tr>
              <td style="text-align: right;">Email: <br>
              </td>
              <td><input type=text name="email" required><br>
              </td>
            </tr>
<tr>
              <td style="text-align: center;" colspan="2"><input value="Create Account" type="submit"><input value="Reset" type="reset"></td>
            </tr>
          </tbody>
        </table>
      </form>
      </center>

<!-- Extra code removed for size -->
<script>
 $("#username").change( function newUser() {
  $.ajax({
   type: "post",
   url: "userLookup.php",
   dataType: "json",
   data: { "username": $("#username").val() },
   success: function(data,status) {
    if (data['exists'] == "true")  {
     $("#checkUsername").html("<br>Username is already taken.");
     $("#checkUsername").css("color","red");
     $("#username").css("background-color","LightCoral");
     $("#username").focus();
    } else if (document.getElementById("username").value.length < 5) {
     $("#checkUsername").html("<br>Username is too short.");
     $("#checkUsername").css("color","red");
     $("#username").css("background-color","LightCoral");
     $("#username").focus();
    } else {
     $("#checkUsername").html("");
     $("#username").css("background-color","White");
    }
   },
  });
 });
 $("#newPassword").change( function newPass() {
  if (document.getElementById("newPassword").value.length < 7) {
   $("#checkPassword").html("<br>Password is too short.");
   $("#checkPassword").css("color","red");
   $("#newPassword").css("background-color","LightCoral");
   $("#newPassword").focus();
  } else {
   $("#checkPassword").html("");
   $("#newPassword").css("background-color","White");
  }
 });
 $("#newPasswordRepeat").change( function newPassRepeat() {
  if (document.getElementById("newPasswordRepeat").value.length < 7) {
   $("#checkPassword").html("<br>Password is still too short.");
   $("#checkPassword").css("color","red");
   $("#newPasswordRepeat").css("background-color","LightCoral");
   $("#newPassword").focus();
  } else if (document.getElementById("newPassword").value != document.getElementById("newPasswordRepeat").value) {
   $("#checkPassword").html("<br>Passwords do not match");
   $("#checkPassword").css("color","red");
   $("#newPassword").css("background-color","LightCoral");
   $("#newPasswordRepeat").css("background-color","LightCoral");
   $("#newPasswordRepeat").focus();
  } else {
   $("#checkPassword").html("");
   $("#newPassword").css("background-color","White");
   $("#newPasswordRepeat").css("background-color","White");
  }
 });
</script>
</body>
</html>

John's Learning Journal

16 February 2016

CST336 Week 7

1 comment:

Search This Blog