14.05.2020
"Компьютерная графика и web-программирование"
Этап совершенствования 5 год обучения
Тема: Формирование HTML-кода с помощью PHP.
Цель: познакомить со способами создания web-страницы с помощью серверных языков программирования.
Образовательные задачи: научить создавать web-страницы с помощью серверных языков программирования на примере PHP.
Развивающие задачи: развивать умение использовать современные инструменты web-программирования.
Воспитательные задачи: профессиональная ориентация и подготовка к трудовой деятельности, воспитание информационной культуры, самостоятельности, ответственности.
Ход занятия
Теоретическая часть
Важное примечание
Для разработки простых статичных web-страниц достаточно веб-браузера и текстового редактора, которые есть на любом компьютере. В то же время для работы с языком PHP требуется настройка серверного окружения.
Можно устанавливать отдельно все элементы (Apache, PHP, MySQL), но проще установить сборку, например Denwer или XAMMP.
Ссылка для скачивания XAMMP:
https://www.apachefriends.org/ru/download.html
Инструкция по установке:
https://ipipe.ru/info/ustanovka-xampp
или
https://use-web.ru/news.php?id=38&tid=4
Работа с PHP
Итак, вы установили и настроили XAMPP по вышеприведенным инструкциям. Перейдем к работе с PHP.
Для чего вообще предназначены серверные языки программирования? Когда вы создавали web-страницы вы должны были обратить внимание, что многие элементы страницы (шапка сайта, меню, подвал) совпадают у различных страниц. Вместо того, чтобы копировать эти элементы вручную из файла в файл, можно поручить эту работу серверным языкам программирования, таким как PHP.
Оператор echo
Если вы используете XAMPP, то рабочей папкой вашего проекта будет C:/XAMPP/htdocs/ Если устанавливали компоненты по отдельности, то рабочей папкой вашего проекта будет C:/Apache/htdocs/
В рабочей папке создайте файл index.php со следующим содержимым:
<!DOCTYPE html>
<html>
<head>
<title>Первый сайт на PHP</title>
<meta charset="utf-8">
</head>
<body>
<?php
echo 'Первый сайт на PHP';
?>
</body>
</html>
Это самый простой способ использования php-скриптов. Фактически мы пишем html со вставками php-кода. PHP-интерпретатор обрабатывает php-файл и весь html-код пропускает, передавая его браузеру, а встретив теги <?php?> выполняет код заключенный между этими тегами.
Оператор echo служит для вывода текста на web-страницу. Теперь если мы перейдем по адресу https://localhost/ то в браузере отобразится:
В тексте для оператора echo можно использовать html-теги:
<?php
echo '<h1>Первый сайт на PHP</h1>';
?>
Вывод браузера будет выглядеть так:
Функции include() и require()
Для подключения больших объемов текста и кода удобно использовать функции include() и require(). Их действие очень похоже.
В файл index.php между тегами body запишем следующий код:
<body>
<?php
echo '<h1>Первый сайт на PHP</h1>';
include('1.html');
echo 'строка после include';
require('1.html');
echo 'строка после require';
?>
</body>
Создадим файл 1.html со следующим содержимым:
<div>
Блок с текстом
</div>
Если теперь зайти по адресу https://localhost/ то в браузере отобразится:
Ниже вывода браузера я открыл консоль, чтобы вы видели как функции require и include подключают код из файла 1.html
В чем же их отличие?
Заменим код в файле index.php на следующий:
<body>
<?php
echo '<h1>Первый сайт на PHP</h1>';
include('2.html');
echo 'строка после include';
require('2.html');
echo 'строка после require';
?>
</body>
Мы попытаемся подключить файл 2.html, который не существует. Вывод браузера будет таким:
Обе функции не найдя файл выдают сообщение об ошибке, но функция include() сообщает об ошибке и продолжает выполнение сценария (обратите внимание на выделенной синим сообщение «строка после include»). А функция require() при ошибке в сценарии останавливает выполнение сценария (сообщение «строка после require» не выводится).
Решение какую функцию применять зависит от логики работы программы. Иногда удобнее использовать include, иногда require.
С помощью inqlude и require удобно подключать части сайта, которые на всех страницах сайта являются неизменными.
Задание
Повторите вышеприведенные примеры.