Step 7 of 10

PHP - The Server Behind the Curtain

📖 Lesson

What is PHP?

PHP is a programming language that runs on the server (not in the browser). When a browser requests a page, the server runs PHP code and sends the result.

HTML/CSS/JS = runs in browser (frontend)
PHP = runs on server (backend)

PHP can do things that browser JS cannot: read files on the server, access databases, send emails...

Basic PHP syntax

<?php
// Variable
$name = "John";

// Output
echo "Hello, " . $name . "!";

// Condition
if ($hour < 12) {
echo "Good morning!";
}
?>

PHP code is written between <?php and ?>. Variables start with $.

PHP + HTML together

You can mix PHP directly with HTML. The server processes PHP and sends the resulting HTML:

<h1>Today is <?php echo date("m/d/Y"); ?></h1>
<p>It's <?php echo date("h:i A"); ?>.</p>

Result in browser: Today is 03/27/2026

PHP processes dynamic content (dates, database data, counters) and sends clean HTML. The user never sees the PHP code!

💻 Example to try

index.php

🚀 Try on Vibmy

<?php
/**
 * PHP - The Server Behind the Curtain
 * This page shows what PHP can do on the server.
 */

// Current time and date
date_default_timezone_set("Europe/Prague");
$currentTime = date("H:i:s");
$currentDate = date("F j, Y");
$dayOfWeek = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][date("w")];

// Random joke
$jokes = [
    "Why do programmers wear glasses? Because they can't C#.",
    "What did HTML say to CSS? Without you I have no style.",
    "How many programmers does it take to change a light bulb? None - that's a hardware problem.",
    "Why do Java and JavaScript not get along? Because they have different classes.",
    "A SQL query walks into a bar, sees two tables, and asks... Can I JOIN you?",
    "Why did the developer go broke? Because he used up all his cache.",
    "Why did the database break up? Too many relationships.",
    "What's a programmer's favorite hangout? Foo Bar."
];
$randomJoke = $jokes[array_rand($jokes)];

// Visit counter (saved in file)
$counterFile = __DIR__ . "/visit_counter.txt";
$visits = file_exists($counterFile) ? (int)file_get_contents($counterFile) : 0;
$visits++;
file_put_contents($counterFile, $visits);

// Server information
$phpVersion = phpversion();
$serverSoftware = $_SERVER["SERVER_SOFTWARE"] ?? "Unknown";
$userAgent = $_SERVER["HTTP_USER_AGENT"] ?? "Unknown";
$userIP = $_SERVER["REMOTE_ADDR"] ?? "Unknown";

// Greeting based on time of day
$hour = (int)date("G");
if ($hour < 6) $greeting = "Good night";
elseif ($hour < 12) $greeting = "Good morning";
elseif ($hour < 18) $greeting = "Good afternoon";
else $greeting = "Good evening";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Server</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            min-height: 100vh;
            font-family: "Segoe UI", system-ui, sans-serif;
            background: linear-gradient(135deg, #0f0c29, #1a1a3e);
            color: #e0e0e0;
            padding: 2rem;
        }
        h1 {
            text-align: center;
            font-size: 2.2rem;
            background: linear-gradient(to right, #00d4aa, #7b68ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }
        .subtitle { text-align: center; color: #6b7280; margin-bottom: 2rem; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            max-width: 900px;
            margin: 0 auto;
        }
        .card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 1.5rem;
        }
        .card h2 { color: #00d4aa; font-size: 1.1rem; margin-bottom: 1rem; }
        .big-time {
            font-size: 3rem;
            font-weight: 800;
            text-align: center;
            color: #00d4aa;
            font-family: monospace;
        }
        .date-info { text-align: center; color: #8892a4; margin-top: 0.5rem; }
        .joke-text {
            font-style: italic;
            color: #c0c0c0;
            line-height: 1.7;
            padding: 1rem;
            background: rgba(123,104,238,0.08);
            border-radius: 12px;
            border-left: 3px solid #7b68ee;
        }
        .counter-big {
            font-size: 4rem;
            font-weight: 800;
            text-align: center;
            background: linear-gradient(to right, #ff6b9d, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .counter-label { text-align: center; color: #8892a4; }
        .info-list { list-style: none; }
        .info-list li {
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-size: 0.9rem;
        }
        .info-list li:last-child { border: 0; }
        .info-list strong { color: #a78bfa; }
        .greeting-big {
            font-size: 1.8rem;
            text-align: center;
            padding: 1rem;
        }
        .reload-btn {
            display: block;
            margin: 2rem auto 0;
            padding: 0.8rem 2rem;
            background: linear-gradient(135deg, #00d4aa, #7b68ee);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        .reload-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,212,170,0.4); }
        .php-badge {
            text-align: center;
            margin-top: 2rem;
            color: #555;
            font-size: 0.85rem;
        }
        @media (max-width: 600px) { body { padding: 1rem; } h1 { font-size: 1.8rem; } }
    </style>
</head>
<body>
    <h1>&#x1F5A5;&#xFE0F; PHP Server</h1>
    <p class="subtitle">Everything on this page is generated by PHP on the server</p>

    <div class="grid">
        <div class="card">
            <h2>&#x23F0; Server Time</h2>
            <div class="big-time"><?php echo $currentTime; ?></div>
            <p class="date-info"><?php echo $dayOfWeek . ", " . $currentDate; ?></p>
        </div>

        <div class="card">
            <h2>&#x1F44B; Greeting</h2>
            <div class="greeting-big"><?php echo $greeting; ?>!</div>
        </div>

        <div class="card">
            <h2>&#x1F602; Joke of the Day</h2>
            <div class="joke-text"><?php echo htmlspecialchars($randomJoke); ?></div>
        </div>

        <div class="card">
            <h2>&#x1F4CA; Visit Count</h2>
            <div class="counter-big"><?php echo number_format($visits); ?></div>
            <p class="counter-label">total visits to this page</p>
        </div>

        <div class="card" style="grid-column: span 2">
            <h2>&#x2699;&#xFE0F; Server Info</h2>
            <ul class="info-list">
                <li><strong>PHP:</strong> <?php echo $phpVersion; ?></li>
                <li><strong>Server:</strong> <?php echo htmlspecialchars($serverSoftware); ?></li>
                <li><strong>Your browser:</strong> <?php echo htmlspecialchars(substr($userAgent, 0, 80)); ?>...</li>
                <li><strong>Your IP:</strong> <?php echo htmlspecialchars($userIP); ?></li>
                <li><strong>Random number:</strong> <?php echo rand(1, 1000); ?></li>
            </ul>
        </div>
    </div>

    <button class="reload-btn" onclick="location.reload()">&#x1F504; Reload (new joke!)</button>

    <p class="php-badge">Generated by PHP on server &#x2022; <?php echo date("H:i:s"); ?></p>
</body>
</html>

← Back 7 / 10 Next step →