От песочницы к реальным файлам

Что изменилось?

В базовом курсе вы писали код в песочнице:

Написали код в окошке на сайте
Нажали "Выполнить"
Увидели результат

Теперь процесс немного другой:

Пишете код в файле (VS Code)
Сохраняете файл (Ctrl+S)
Обновляете страницу в браузере (F5)
Видите результат

Но сам PHP-код — точно такой же! Всё, что вы учили, работает.

Давайте попробуем

Откройте файл public/index.php в VS Code. Сейчас там:

<?php
echo "<h1>Привет из Docker!</h1>";
echo "<p>PHP версия: " . phpversion() . "</p>";
?>

Замените содержимое на:

<?php
// Всё как в песочнице!

$name = "Мир";
$year = 2024;

echo "<h1>Привет, $name!</h1>";
echo "<p>Сейчас $year год.</p>";

// Массивы работают
$fruits = ["яблоко", "банан", "апельсин"];

echo "<h2>Фрукты:</h2>";
echo "<ul>";
foreach ($fruits as $fruit) {
    echo "<li>$fruit</li>";
}
echo "</ul>";

// Условия работают
$hour = date("H"); // Текущий час

if ($hour < 12) {
    echo "<p>Доброе утро!</p>";
} elseif ($hour < 18) {
    echo "<p>Добрый день!</p>";
} else {
    echo "<p>Добрый вечер!</p>";
}
?>

Сохраните файл: Ctrl+S
Откройте браузер: http://localhost:8080
Обновите страницу: F5

Видите результат? Всё работает!

Цикл разработки

Запомните этот цикл — вы будете повторять его сотни раз:

┌──────────────────────────────────────────┐
│                                          │
│  1. Редактируете код в VS Code           │
│              ↓                           │
│  2. Сохраняете (Ctrl+S)                  │
│              ↓                           │
│  3. Обновляете браузер (F5)              │
│              ↓                           │
│  4. Смотрите результат                   │
│              ↓                           │
│  5. Если что-то не так → к пункту 1      │
│                                          │
└──────────────────────────────────────────┘

Совет: Расположите окна VS Code и браузера рядом. Так удобнее работать — не нужно постоянно переключаться.

Когда что-то не работает

В песочнице ошибки показывались красным текстом. В реальности тоже!

Попробуйте добавить ошибку в код (забудьте точку с запятой):

<?php
echo "Привет"
echo "Мир";
?>

Сохраните и обновите страницу. Вы увидите сообщение об ошибке:

Parse error: syntax error, unexpected token "echo" in /var/www/html/index.php on line 3

Ошибка говорит:

Parse error: syntax error — синтаксическая ошибка
unexpected token "echo" — неожиданный "echo"
in /var/www/html/index.php — в каком файле
on line 3 — на какой строке

PHP ругается на строку 3, но ошибка на строке 2 — забыли точку с запятой. PHP понял проблему только когда увидел следующую команду.

Правило: Если ошибка указывает на строку N, проверьте также строку N-1!

PHP и HTML вместе

PHP отлично работает внутри HTML. Можно смешивать:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый сайт</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        h1 { color: #F36049; }
    </style>
</head>
<body>
    <h1>Добро пожаловать!</h1>
    
    <p>Сегодня: <?php echo date("d.m.Y"); ?></p>
    
    <?php
    $items = ["Первый пункт", "Второй пункт", "Третий пункт"];
    ?>
    
    <ul>
    <?php foreach ($items as $item): ?>
        <li><?php echo $item; ?></li>
    <?php endforeach; ?>
    </ul>
</body>
</html>

Обратите внимание на альтернативный синтаксис:

foreach (): ... endforeach; вместо foreach () { ... }
Удобнее когда PHP вперемешку с HTML

Краткий синтаксис вывода

Вместо <?php echo $x; ?> можно писать короче:

<?= $x ?>

Это одно и то же:

<p>Имя: <?php echo $name; ?></p>
<p>Имя: <?= $name ?></p>

Практика

Замените содержимое public/index.php на этот код и посмотрите результат:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой блог</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f5f5f5;
            padding: 40px;
        }
        .container { max-width: 800px; margin: 0 auto; }
        h1 { color: #333; margin-bottom: 20px; }
        .card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card h2 { color: #F36049; margin-bottom: 10px; }
        .date { color: #888; font-size: 14px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Мой блог</h1>
        
        <?php
        // Это будет из базы данных, а пока — массив
        $posts = [
            [
                "title" => "Первый пост",
                "content" => "Это мой первый пост в блоге!",
                "date" => "2024-01-15"
            ],
            [
                "title" => "Изучаю PHP",
                "content" => "Сегодня я узнал как работать с файлами.",
                "date" => "2024-01-16"
            ],
            [
                "title" => "Docker — это круто",
                "content" => "Docker сильно упрощает разработку.",
                "date" => "2024-01-17"
            ],
        ];
        ?>
        
        <?php foreach ($posts as $post): ?>
        <div class="card">
            <h2><?= $post["title"] ?></h2>
            <p class="date"><?= $post["date"] ?></p>
            <p><?= $post["content"] ?></p>
        </div>
        <?php endforeach; ?>
    </div>
</body>
</html>

Это уже похоже на настоящий блог! Пока данные в массиве, но скоро мы подключим базу данных.

Отлично! Вы перенесли знания из песочницы в реальную разработку. В следующем уроке научимся разделять код на несколько файлов.

Материалы по теме

Глоссарий digital-терминов Глоссарий
Статьи блога по разработке и SEO Блог
Практические чеклисты по внедрению Чеклисты

Что изменилось?

Давайте попробуем

Цикл разработки

Когда что-то не работает

PHP и HTML вместе

Краткий синтаксис вывода

Практика

Материалы по теме

Оставить заявку