Coding – Step 3 – 🔐 Secure Access Project – Comparing Languages and Security

This section provides a practical example of how the same login functionality can be implemented using three different technologies. Each version is based on the same user database (username and hashed password), but the logic, structure, and experience vary significantly depending on the approach.

💡 The Goal

To compare how secure login systems work when written in:

• pure PHP
• API-based architecture
• JavaScript-based asynchronous logic

Each method has pros and cons, both for the user and the site developer.

🧩 The 3 Secure Access Versions

🔸 1. Secure PHP Login

• Language: Pure PHP
• Behavior: The login form posts directly to a PHP script. If login is valid, user is redirected to a success page; otherwise to an error page.
• User experience: Traditional (page reload)
• Management: Easy to deploy, no frontend frameworks required

Main code snippet:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];

    $stmt = $pdo->prepare("SELECT password FROM users WHERE username = ?");
    $stmt->execute([$username]);
    $user = $stmt->fetch();

    if ($user && password_verify($password, $user['password'])) {
        header("Location: welcome.php");
    } else {
        header("Location: error.php");
    }
}

✅ Pros: Minimalistic and functional
❌ Cons: Less interactive; not ideal for modern UIs

🔸 2. Secure API-Based Login

• Language: PHP + JSON API
• Behavior: The login form sends credentials to an API endpoint. The server responds with a JSON message (success or error). The page updates accordingly without reload.
• User experience: Fast and dynamic
• Management: Scalable and modular; allows decoupling frontend and backend

API backend logic (PHP):

$data = json_decode(file_get_contents("php://input"), true);
$username = $data['username'] ?? '';
$password = $data['password'] ?? '';

$stmt = $pdo->prepare("SELECT password FROM users WHERE username = ?");
$stmt->execute([$username]);
$user = $stmt->fetch();

echo json_encode([
  "status" => $user && password_verify($password, $user['password']) ? "success" : "error"
]);

✅ Pros: Clean separation of responsibilities
❌ Cons: Requires frontend logic and good error handling

🔸 3. Secure JavaScript Login

• Language: HTML + JavaScript (AJAX) + PHP backend
• Behavior: The JS handles form submission using fetch() and updates the page dynamically.
• User experience: Instant and modern
• Management: Needs secure backend and client-side validation

JavaScript logic:

document.getElementById("loginForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const form = new FormData(this);
  const res = await fetch("check.php", { method: "POST", body: form });
  const result = await res.json();

  if (result.status === "success") {
    window.location.href = "welcome.html";
  } else {
    document.getElementById("errorMsg").innerText = "Invalid login";
  }
});

✅ Pros: Great user experience
❌ Cons: Needs CSRF and session protection

📊 Summary Table

🧠 Why This Matters

Even a simple login form should never rely on insecure practices like storing plain-text passwords. That’s why in all three methods, I implemented:

• ✅ password_hash() and password_verify()
• ✅ SQL injection protection using prepare()
• ✅ Session management
• ✅ Optional CSRF tokens

🏁 Final Thoughts

This project is an educational showcase that compares three different paths to building the same functionality. They highlight:

• how technology influences user experience,
• what each approach demands from the developer,
• and how to think about security early in any project.

The code is available, the demos are online, and this can serve both as a study reference and a demonstration of programming style and evolution.