Vanilla JS + PHP + MySQL

The full-stack pick for shared hosting - everything you need is already installed.

This trio has powered a huge share of the web for decades, and on shared hosting it's still the path of least resistance: PHP and MySQL are pre-installed, deployment means uploading files, and there's no build step anywhere.


Who gets this pick

You'll see this stack when you're on shared hosting and you're not building a real-time app (real-time projects get React + Node.js + Firebase, which also works on shared hosting).


How the pieces fit together

  • PHP builds each page on the server, reading from and writing to the database, and sends finished HTML to the browser.
  • MySQL stores your data; PHP talks to it with PDO.
  • Vanilla JavaScript adds enhancements on top - validation hints, a "like" button that doesn't reload the page, a filter - while the site still works if a script fails.

This "server-rendered first, JavaScript second" approach is called progressive enhancement. It's fast, accessible and search-engine friendly by default.


A small enhancement, end to end

A PHP endpoint that updates a like count and returns JSON:

<?php
// like.php
require __DIR__ . '/db.php';

$id = (int) ($_POST['id'] ?? 0);
$pdo->prepare('UPDATE posts SET likes = likes + 1 WHERE id = ?')->execute([$id]);

$stmt = $pdo->prepare('SELECT likes FROM posts WHERE id = ?');
$stmt->execute([$id]);

header('Content-Type: application/json');
echo json_encode(['likes' => (int) $stmt->fetchColumn()]);

And the JavaScript that calls it without reloading the page:

document.querySelectorAll(".like-btn").forEach((btn) => {
  btn.addEventListener("click", async () => {
    const res = await fetch("like.php", {
      method: "POST",
      body: new URLSearchParams({ id: btn.dataset.id }),
    });
    const data = await res.json();
    btn.textContent = `♥ ${data.likes}`;
  });
});

A first project

  1. Build the PHP + MySQL guestbook - it sets up the database connection (db.php) used above.
  2. Grow it into an event RSVP site: a page listing events, an RSVP form per event, and a count of attendees.
  3. Add an admin login (with password_hash() and sessions) to create and edit events.
  4. Add one JavaScript enhancement, like submitting the RSVP form with fetch and updating the count in place.

Hosting and cost

Shared hosting is inexpensive and usually includes the database, a free SSL certificate and email addresses for your domain. Check the backup policy, pick the newest PHP version in the control panel, and you're done - there's nothing else to provision.


Mistakes to avoid

  • Spaghetti files mixing SQL, logic and HTML. Keep queries at the top of a file or in functions, and HTML in templates you include.
  • Skipping the security basics: prepared statements for every query, htmlspecialchars() on every output, CSRF tokens on forms that change data.
  • Editing live files on the server with no copy anywhere else. Keep the project in Git on your machine and upload from there.
  • Reaching for jQuery. Everything it used to smooth over - selecting elements, AJAX, events - is now built into browsers.

As it grows

When you find yourself writing the same routing, validation and login code repeatedly, it's time for Laravel, which still runs on many shared hosts. And if one page needs a rich, app-like interface, you can drop Vue onto just that page with a script tag.


Take the quiz All picks