Webbserver - Love Blomberg

Show sourcecode

The following files exists in this folder. Click to view.

public_html/exercises/quizproject/

admin/
createtable.php
dbconnection.php
icons/
index.php
login.php
logout.php
quiz/
quiz_styles.css
register.php

register.php

129 lines UTF-8 Windows (CRLF)
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Quizzer | Sign Up</title>
  <link rel="stylesheet" href="./quiz_styles.css">
  <link rel="shortcut icon" href="./icons/add-user-icon.svg" type="image/x-icon">
</head>

<body>
  <?php
  session_start
();

  
// Felmeddelande
  
$message null;
  
$messageClass 'alert-warning';
  if (
    isset(
$_POST['username']) && isset($_POST['password']) &&
    !empty(
$_POST['username']) && !empty($_POST['password'])
  ) {
    
$username $_POST['username'];
    
$password $_POST['password'];
    
$fullname $_POST['fullname'];
    
$passwordHash password_hash($passwordPASSWORD_DEFAULT);
    
    
// Koppla till databas
    
include('./dbconnection.php');
    if (!
$dbconn) {
      die(
"Connection failed: Can't connect to database.");
    }
    try {
      
// Skapa ny användare i users table
      
$sql "INSERT INTO users (username, password, fullname) 
          VALUES (?, ?, ?)"
;
      
$stmt $dbconn->prepare($sql);
      
$data = array($username$passwordHash$fullname);
      
$stmt->execute($data);

      
$lastId $dbconn->lastInsertId();
      
$messageClass 'alert-success';
      
$message "User created successfully. ID: " . (int)$lastId;
   
header('Location: ./login.php');
   die();
    } catch (
PDOException $e) {
      
// Skriv ut error
      
$messageClass 'alert-error';
      
$message $sql "<br>" htmlspecialchars($e->getMessage());
    }

    
$dbconn null;
  } else {
    
$message "Please fill in all required fields to register";
  }
  
?>

  <div class="page page-narrow">
    <div class="page-header">
      <div>
        <h1 class="page-title">Sign up</h1>
        <p class="page-subtitle">Register your account.</p>
      </div>
      <div class="actions">
        <a class="btn btn-ghost" href="./login.php">&#8592; Back to login</a>
      </div>
    </div>

    <?php if ($message): ?>
      <div class="alert <?= $messageClass?>"><?= $message?></div>
    <?php endif; ?>

    <div class="card">
      <form method="post" action="">
        <table>
          <tr>
            <td>Username*:</td>
            <td>
              <div class="input-wrapper">
                <input type="text" name="username" maxlength="64" required>
                <span class="char-count">64/64</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Password*:</td>
            <td>
              <div class="input-wrapper">
                <input type="password" name="password" maxlength="32" required autocomplete="new-password">
                <span class="char-count">32/32</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Full name:</td>
            <td>
              <div class="input-wrapper">
                <input type="text" name="fullname" maxlength="64" autocomplete="name">
                <span class="char-count">64/64</span>
              </div>
            </td>
          </tr>

          <tr>
            <td class="meta">* = Required</td>
            <td><button type="submit" class="btn btn-success">Sign Up</button></td>
          </tr>
        </table>
      </form>
    </div>
  </div>

  <script>
    document.querySelectorAll('.input-wrapper input').forEach(input => {
      const charCount = input.parentElement.querySelector('.char-count');
      const maxLength = input.getAttribute('maxlength');
      
      // Initialize counter
      charCount.textContent = maxLength - input.value.length;
      
      // Update counter on input
      input.addEventListener('input', function() {
        const remaining = maxLength - this.value.length;
        charCount.textContent = remaining;
      });
    });
  </script>
</body>

</html>