02.1 Embedding PHP in HTML and reusable includes

01 | WHY SPLIT A PAGE?

Continue using the PHP development server from 01.1. Create the files below inside one practice folder, preserving their filenames and subfolders. In VS Code open that folder, then start php -S 127.0.0.1:8000 in its terminal and open the named page through HTTP.

These are complete local examples for PHP 8. Text inputs and output are treated deliberately, but the examples are not a login system, a production deployment or a saved registration service. Where a page previews a submission only, nothing is sent or stored.

Two pages might share the same navigation and footer. Copying the whole layout into each works until you change a link and forget one copy.

An include executes another PHP file at that point in the request. Shared layout files let several pages produce consistent HTML while each page supplies its own content.

02 | PHP PREPARES; HTML PRESENTS

A useful beginner structure has a PHP block first to prepare values, then HTML to present them. Small expressions insert data into the response.

<?php
$pageTitle = 'About our clubs';
?>
<h1><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></h1>

<?= echoes an expression. The browser receives the resulting heading rather than the PHP instruction. Hardcoded HTML describes the structure; escaped values supply its content.

03 | CREATE THE FILE STRUCTURE

In VS Code Explorer, create the partials folder before its two files. Do not put a full second HTML document inside a page that already has one.

04 | ADD THE SHARED HELPER

Use this shared helper wherever the guide requests helpers.php. It escapes strings for HTML text and quoted ordinary HTML attribute values; it is not a universal encoder for every context.

helpers.php

<?php
function escapeHtml(string $text): string
{
    return htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
}

helpers.php contains PHP only, so it deliberately omits a final ?>. This avoids accidental trailing whitespace being sent as output.

The helper defines a function without printing anything. Each entry page loads it before the header needs it.

05 | BUILD THE SHARED LAYOUT

partials/header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= escapeHtml($pageTitle) ?></title>
</head>
<body>
<header>
    <h1>My club website</h1>
    <nav><a href="index.php">Home</a> | <a href="about.php">About</a></nav>
</header>
<main>

partials/footer.php

</main>
<footer><p>Practice website</p></footer>
</body>
</html>

The header opens html, body and main; the footer closes the matching elements. They form one complete response when assembled by a page.

The header expects $pageTitle to have been assigned before it is required. That is a small dependency you should document rather than leave mysterious.

06 | ASSEMBLE TWO COMPLETE PAGES

index.php

<?php
require_once __DIR__ . '/helpers.php';
$pageTitle = 'Club home';
require __DIR__ . '/partials/header.php';
?>
<h2>Welcome</h2>
<p>This page shares its header and footer with About.</p>
<?php require __DIR__ . '/partials/footer.php'; ?>

about.php

<?php
require_once __DIR__ . '/helpers.php';
$pageTitle = 'About our clubs';
require __DIR__ . '/partials/header.php';
?>
<h2>About</h2>
<p>Find a club that interests you.</p>
<?php require __DIR__ . '/partials/footer.php'; ?>

Each page loads its helper, assigns its title, emits the shared header, supplies local content and emits the footer. Open index.php, then follow the About link.

Change the footer text once and refresh both pages. Both responses should reflect the edit. The shared file is evaluated on each new request, not permanently pasted into the source files.

07 | REQUIRE, INCLUDE AND ONCE

require treats a missing required file as an error that normally stops the request unless handled. include raises a warning and can let execution continue. Use require for components the page needs to function.

require_once avoids loading the same file twice within a request. This is useful for helper definitions, since redeclaring the same function would fail. It does not mean “once forever” across browser requests.

Layout output is intentionally placed once at the correct position. A once variant is not a replacement for planning where the document opens and closes.

08 | FILESYSTEM PATHS AND BROWSER LINKS

__DIR__ is the directory of the PHP source file containing it. __DIR__ . '/partials/header.php' gives a reliable server filesystem path relative to that entry file.

The link href="about.php" is different: the browser interprets it as a URL. Do not place a server filesystem path such as C:\projects\about.php inside a web link.

Our header links assume these pages are requested from the same folder. Moving pages into nested URL folders may require a deliberate shared URL strategy.

09 | DO NOT LET INPUT CHOOSE A FILE

Keep require paths fixed or selected from a strict mapping you wrote. Do not pass a raw query parameter into require or include.

Output escaping is not a way to make an arbitrary filesystem path safe. Choosing code to execute and displaying text are separate operations.

Also keep session and redirect logic before requiring a header that prints HTML. The later sessions lesson explains why output timing matters.

10 | PRACTICE: ADD A THIRD PAGE

Explain which variables the header depends on and why require_once is appropriate for helpers. Next, a browser form will supply values rather than the page assigning all data itself.

KEEP LEARNING

Previous page 02.2 GET, POST and form processing

Official references: Includes and control structures · POST values · HTML escaping · Sessions · Cookies