Video summary

Create Full Stack Login And Register Form With User & Admin Page Using HTML CSS PHP & MySQL Database

Main summary

Key takeaways

Technology

Summary of the video (technological concepts & features)

This tutorial walks through building a full-stack authentication system with:

  • Frontend: HTML/CSS
  • Backend: PHP + MySQL

It supports:

  • Login
  • Registration
  • Two roles: user and admin
  • Role-based access control for separate pages
  • Session-based authentication with logout

UI / Frontend (HTML + CSS + JS)

Login form (default view)

  • Inputs: email, password
  • Login button
  • Link to show the registration form

Registration form (hidden by default)

  • Inputs: name, email, password
  • Role dropdown to select user or admin
  • Register button
  • Link to return to the login form

Switching between forms

  • Uses JavaScript via a showForm(formID) function
  • Toggles the CSS class active on the login/register containers:
    • Registration form starts with display: none
    • The active form changes to display: block

Styling

  • Imports Google Fonts
  • Uses Flexbox to center and lay out elements
  • Adds styling for inputs/buttons, including hover effects
  • Includes styling for error messages (pink background, dark red text)

Backend setup (PHP + MySQL)

Database creation (phpMyAdmin)

A database (e.g., usersDB) and a table (e.g., users) are created with 5 columns:

  1. id (INT, primary key, auto-increment)
  2. name (VARCHAR(255))
  3. email (VARCHAR(255), UNIQUE)
  4. password (VARCHAR(255), stores hashed passwords)
  5. roll (ENUM: user, admin)

Key constraint: the email is unique, preventing duplicate registrations.

Configuration file: config.php

  • Stores MySQL connection parameters (host/user/password/database name)
  • Connects using new mysqli(...)
  • Stops execution on connection error

Form submission flow (index.php + loginorregister.php)

index.php (main page)

  • Uses sessions to remember:
    • which form is active (login or register)
    • error messages
  • Displays errors using helper functions:
    • showP(error) to render an error paragraph
    • isActiveForm(formName, activeForm) to apply the active CSS class to the correct form

loginorregister.php (processor for both login & register)

The same endpoint processes both actions using:

  • isset($_POST['register'])
  • isset($_POST['login'])

Registration logic

  • session_start()
  • Includes config.php
  • Reads: name, email, password, roll
  • Hashes password using: password_hash(..., PASSWORD_DEFAULT)
  • Checks if the email already exists:
    • If yes: sets a session error like “email is already registered” and keeps the user on the registration form
    • If no: inserts the user into MySQL
  • Redirects to index.php to show the login form

Login logic

  • Looks up the user by email in MySQL
  • If user exists:
    • Validates password using password_verify(enteredPassword, storedHash)
    • Stores session variables such as:
      • name
      • email
    • Redirects based on role:
      • If roll == admin → redirect to admin page.php
      • Otherwise → redirect to user page.php
  • If login fails:
    • Sets session error “incorrect email or password”
    • Keeps the login form active
    • Redirects back to index.php

Role-based protected pages (user/admin pages)

user page.php and admin page.php

Both pages enforce access control by:

  • session_start()
  • If the user is not logged in (session key missing), redirect to index.php
  • If logged in:
    • Display the user’s name from the session
    • Include a logout button

The tutorial notes denying access when these pages are opened directly via URL without an active session.

Logout flow (logout.php)

A logout.php file:

  • Starts the session (session_start())
  • Clears session variables using session_unset()
  • Ends the session using session_destroy()
  • Redirects back to index.php

Tutorial result / demonstrated behavior

  • Registering a user → redirects to login; correct login → user page
  • Registering an admin → correct login → admin page
  • Wrong email/password → shows “incorrect email or password”
  • Trying to access admin/user pages directly without a session → redirected to login

Main speakers / sources

  • Speaker/source: “codow” (YouTube channel: codow)

Original video