nmk

Лекція 1 (2 години). Вступ до веброзробки та екосистеми PHP

План лекції

  1. Принципи архітектури клієнт-сервер.
  2. Що таке серверна (Backend) розробка. Мова програмування PHP.
  3. Локального сервери та середовища розробки: XAMPP, MAMP, Laragon.
  4. Базовий синтаксис PHP: включення коду, коментарі, команди виводу.

Перелік умовних скорочень

Вступ

Сьогоднішній веб простягається далеко за межі простих статичних документів. Увійшовши в інтернет-магазин або соціальну мережу, ви взаємодієте з динамічними даними. Огляд архітектури клієнт-сервер, встановлення та налаштування локального сервера (XAMPP/MAMP) та базовий синтаксис PHP є першим і критично важливим кроком до створення власного повноцінного вебдодатка. Ця лекція закладає фундамент розуміння того, “як працює Інтернет під капотом”.

1. Принципи архітектури клієнт-сервер

Кожен раз, коли користувач вводить адресу сайту (наприклад, http://google.com), відбувається складний процес спілкування двох основних типів програм: Клієнта та Сервера.

  1. Клієнт (Client): Це програма, яка ініціює запит і яка безпосередньо взаємодіє з кінцевим користувачем. Найчастіше клієнтом виступає веббраузер (Chrome, Safari, Firefox), але це також може бути мобільний додаток (Instagram на смартфоні) або спеціальна програма-бот. Клієнт відповідає за візуальне відображення інформації (HTML/CSS) та інтерактивність в браузері (JavaScript).
  2. Сервер (Server): Це потужний комп’ютер (або програмне забезпечення на ньому), що працює 24/7, очікуючи на запити від клієнтів. Він зберігає файли сайту, виконує обчислювальну логіку, дістає дані з бази даних і формує відповідь.

Як вони спілкуються (Життєвий цикл HTTP-запиту)

2. Що таке серверна (Backend) розробка. Мова програмування PHP

Розробка для вебу традиційно поділяється на дві великі частини:

Чому PHP?

PHP (Hypertext Preprocessor) — це мова програмування серверного рівня з динамічною типізацією, створена спеціально для веброзробки. На PHP працює понад 75% всіх вебсайтів у світі з відомою серверною мовою (включно зі світовими гігантами як Facebook /спочатку/, Wikipedia, Slack та CMS-системами WordPress, Drupal).

Переваги PHP:

  1. Низький поріг входу: PHP дуже поблажлива до новачків і дозволяє писати робочий код з першого дня вивчення.
  2. Величезна екосистема: Тисячі готових безкоштовних бібліотек для підключення платіжних систем, генерації PDF, роботи з Telegram-ботами тощо.
  3. Безшовна інтеграція з HTML: PHP можна змішувати безпосередньо зі звичайним HTML-кодом на одній сторінці, що робить його ідеальною “мовою шаблонізування”.
  4. Дешевий і доступний хостинг: Практично будь-який, навіть найбюджетніший хостинг у світі підтримує стандартний набір “LAMP/LEMP” (Linux, Apache/Nginx, MySQL, PHP).

3. Локальні сервери: XAMPP, MAMP, Laragon

Оскільки PHP-код виконується сервером, а не браузером, ви не можете просто клікнути двічі на файлі .php, щоб відкрити його. Браузер сам по собі не розуміє код PHP і просто надрукує його на екран як звичайний текст.

Щоб розробляти і тестувати сайти на своєму домашньому комп’ютері, нам потрібно “навчити” його прикидатися повноцінним бойовим сервером. Для цього використовують локальні збірки (Local Web Server stacks).

Найпопулярніші збірки (мінус-сервери):

Як працює локальний сервер

Після встановлення (наприклад, XAMPP), програма створює на диску певну “публічну” директорію (зазвичай C:\xampp\htdocs\ у Windows). Вебсервер (наприклад Apache) налаштований “слухати” звернення до комп’ютера на 80-му порту (стандарт для звичайного HTTP).

Якщо ви покладете файл-скрипт script.php в папку htdocs, а потім в адресному рядку браузера введете спеціальну адресу для звернення “до самого на себе” — http://localhost/script.php, станеться наступне:

  1. Браузер робить запит на localhost (вашому власному комп’ютеру).
  2. Apache перехоплює запит, шукає в папці htdocs файл script.php.
  3. Apache бачить розширення .php і не віддає файл одразу клієнту, а передає його PHP-інтерпретатору.
  4. PHP виконує команди (наприклад, звертається до БД, розраховує математику) і видає фінальний “чистий” HTML-результат.
  5. Сервер відсилає цей готовий результат у свій же браузер.

4. Базовий синтаксис PHP

Включення PHP-коду (Теги PHP)

Щоб сервер зрозумів, де закінчується звичайний HTML-текст і починаються програмовані команди, використовують спеціальні конструкції-обгортки (теги PHP). Будь-яка інформація, що лежить поза цими тегами, просто відправляється в браузер “як є”.

Стандартний синтаксис <?php ... ?>:

<!DOCTYPE html>
<html>
  <head>
    <title>Мій перший сайт</title>
  </head>
  <body>
    <p>Це звичайний HTML. Він не обробляється сервером.</p>

    <?php // Все, що розташоване всередині цих тегів — виконується сервером. //
    Браузер НІКОЛИ не побачить цього вихідного PHP-коду! // Він отримає лише
    фінальний результат виконання. ?>

    <p>Ще трохи звичайного HTML.</p>
  </body>
</html>

Важливе правило: У файлах-скриптах, що містять ВИКЛЮЧНО PHP-код (наприклад класи або файли конфігурації configure.php), закриваючий тег ?> не пишеться. Його зумисно ігнорують, щоб випадково не надіслати в браузер зайві пробільні символи (пробіли, перенесення рядка) після нього, що може зламати роботу механізмів сесій та cookie (Headers already sent error).

Команди виведення інформації: echo та print

Для того, щоб динамічно “намалювати” щось на екрані (відправити клієнту), в PHP найчастіше використовується мовна конструкція echo. Всі інструкції в PHP мають обов’язково завершуватись крапкою з комою ;.

<?php
// Виводимо рядок тексту:
echo "Hello, Teacher!";

// Виводимо текст, відформатований HTML-тегами (це цілком законно!):
echo "<h1>Це великий червоний заголовок</h1>";
echo "Ціна товару: <b>500 грн</b>";

// Функція `print` робить приблизно те ж саме, але працює трішки повільніше,
// бо завжди повертає значення 1 (що дозволяє використовувати її у виразах).
print "Просто ще один текст.";
?>

Коментарі в коді

Коментарі існують виключно для розробників. PHP ігнорує їх і ніколи не відправляє на сторону клієнта. Вони вкрай важливі для опису того, чому написаний той чи інший код (особливо в складних алгоритмах).

<?php
// Це однорядковий коментар у стилі С++. Найбільш поширений.

# Це однорядковий коментар у стилі Bash/Python. Використовується рідко.

/*
 * А це —
 * багаторядковий коментар.
 * Чудово підходить для об'ємних пояснень чи тимчасового "вимкнення"
 * великих шматків коду.
 */
?>

Типи помилок

Якщо ви забудете крапку з комою ; або зробите опечатку, сервер може призупинити і навіть повністю зупинити виконання сторінки:

Висновки

  1. Веб працює на базі архітектури клієнт-сервер. Клієнт (браузер) робить запит, сервер його обробляє і повертає відповідь.
  2. PHP — це мова бекенду (серверу), що генерує HTML-документ перед його відправкою користувачу. Ніхто в інтернеті ніколи не має доступу до вашого оригінального вихідного PHP-коду (відповідно, він є безпечним місцем для зберігання бізнес-логіки та паролів до БД).
  3. Для тестування PHP-коду на власному комп’ютері використовується спеціальне програмне забезпечення — локальні сервери (XAMPP).
  4. PHP-код можна довільно вплітати всередину HTML-документів за допомогою конструкцій <?php ... ?>.

Джерела

  1. Офіційна документація PHP: https://www.php.net/manual/uk/ (або українською, де перекладено).
  2. XAMPP Windows Installer: https://www.apachefriends.org/download.html
  3. Довідник з основ клієнт-серверної архітектури (MDN Web Docs): https://developer.mozilla.org

Запитання для самоперевірки

  1. Чим функціонально відрізняються Front-end та Back-end напрямки веброзробки?
  2. Опишіть своїми словами життєвий цикл типового HTTP-запиту від моменту натискання “Enter” у браузері.
  3. Чому спроба розглядати файл .php просто розширенням “Якась папка/index.php” (через подвійне клацання в системі файлів) не спрацює і чому замість HTML ви побачите програмний код? Поясніть роль локального сервера.
  4. За допомогою якої базової мовної конструкції в PHP дані виводяться на екран (в поточний HTTP Response)? Який синтаксичний знак є обов’язковим в кінці цього виразу?
  5. Чому PHP-коментарі (наприклад // TODO: Перевірити пароль) вважаються безпечними, на відміну від HTML-коментарів (<!-- TODO: ... -->), і чи може кінцевий користувач сайту знайти їх через функціонал браузера “Переглянути вихідний код”?