shannon.acrostictech.com

How a frontend talks to a backend

This page is the frontend. It runs on the device in your hand.
Somewhere else, on a server, sits the backend. It has the data.
Press the buttons below and watch them talk.

Runs in your browser

🖥️ Frontend

The HTML, the styling, the buttons. Everything you can see and click. It is downloaded to you — which means anyone can read it, and nothing in it can be trusted with a secret.

Runs on the server

☁️ Backend

PHP files you can never see the source of. It holds the data, does the work that matters, and decides what to hand back. The only way to reach it is to ask.

1

Ask the server who it is

The simplest possible conversation: the frontend asks, the backend answers.

Sends a GET request to /api/hello.php

The answer will appear here.

Show me the code on both sides

🖥️ Frontend app.js — in your browser

// Ask, then wait for the answer to come back.
const res  = await fetch('/api/hello.php');
const data = await res.json();

show(data.php_version, data.hostname);

☁️ Backend api/hello.php — on the server

<?php
// Facts only this machine knows.
send([
  'php_version' => PHP_VERSION,
  'hostname'    => php_uname('n'),
  'server_time' => date('c'),
]);
2

Send something up, get something back

Now the frontend sends data with the question. The server does the work and returns only the result.

Sends a POST with a JSON body to /api/echo.php

The server's reply will appear here.

Show me the code on both sides

🖥️ Frontend app.js — in your browser

// Package the data up and send it along.
const res = await fetch('/api/echo.php', {
  method:  'POST',
  headers: { 'Content-Type': 'application/json' },
  body:    JSON.stringify({ name: 'Shannon' })
});
const data = await res.json();

☁️ Backend api/echo.php — on the server

<?php
$in   = body();          // read what was sent
$name = trim($in['name'] ?? '');

if ($name === '')        // never trust the browser
  fail('Please send a name.', 422);

send(['greeting' => "Good morning, $name!"]);
3

The server remembers

This is the one that matters. Leave a note, then reload the page — or open this site on your phone. It's still there, because it was never stored in your browser at all.

POST to save, GET to load — /api/messages.php

Loading the notes already on the server…

Show me the code on both sides

🖥️ Frontend app.js — in your browser

// Save a note...
await fetch('/api/messages.php', {
  method:  'POST',
  headers: { 'Content-Type': 'application/json' },
  body:    JSON.stringify({ name, text })
});

// ...and read every note back.
const { messages } = await
  (await fetch('/api/messages.php')).json();

☁️ Backend api/messages.php — on the server

<?php
// Read the stored list, add to it, write it back.
$messages   = json_decode(file_get_contents($file));
$messages[] = ['name' => $name, 'text' => $text];

file_put_contents($file, json_encode($messages));

send(['messages' => $messages]);

📡 What actually went over the wire

Every message this page has exchanged with the server, newest first. This is the connection, written down.

Nothing yet — press a button above.