Начинаем разработку веб-сайта. В этом уроке настроим необходимые параметры для будущего проекта. Код, домашние задания и другая полезная информация доступны на сайте itproger.com (ссылка в описании).
Использование готового макета
В качестве макета используется готовый дизайн (открыт в Figma – аналоге Photoshop). Разметка HTML и CSS создана заранее (отдельный курс по этому вопросу есть в описании). Ссылка на него, а также ссылка на урок по дизайну сайта, находятся в описании.
Подготовка проекта и настройка локального сервера
Скачайте готовый проект (ссылка в описании), разархивируйте папку «3w». Она содержит папки CSS (стили), изображения и HTML-файлы (страницы сайта). Изначально проект статичен, не использует PHP. Для работы с PHP, переименуйте все HTML-файлы, добавив расширение .php. PHP-файлы могут содержать стандартный HTML-код, обрабатываемый аналогично HTML, но требуют сервера для отображения в браузере.
Для запуска локального сервера можно использовать MAMP (бесплатная программа для Windows и Mac) или Open Server (бесплатная программа для Windows). В этом курсе используется MAMP. Установите выбранную программу и запустите локальный сервер. В MAMP достаточно нажать кнопку запуска сервера и кнопку «Web Start» для открытия стартовой страницы. В случае проблем, введите localhost:8888/MAMP или localhost:8888 в браузере. Изначально страница может быть пустой или содержать ошибку, так как сайт ещё не размещён на сервере.
Разместите проект в папке htdocs (обычно расположена в директории установки MAMP). Удалите файл index.html (или index.php, если он существует) из папки htdocs и переместите все файлы проекта в эту папку. Обновите страницу в браузере – сайт должен заработать. После перемещения файлов обновите ссылки на страницы в проекте, заменив расширение .html на .php. Ссылки должны указывать на файлы about.php и contacts.php.
Настройка кодировки и файла .htaccess
Создайте файл .htaccess в корневой папке проекта для настройки параметров сервера. Добавьте строку для указания кодировки UTF-8:
AddDefaultCharset utf-8
Важно: Ошибки в файле .htaccess могут привести к неработоспособности сайта. Будьте внимательны при его редактировании.
Создание динамических блоков (шапка и подвал)
Для избежания повторения кода на каждой странице, создайте отдельные файлы для шапки и подвала сайта. Создайте папку blocks и в ней файлы header.php и footer.php. Перенесите код шапки и подвала из файлов страниц в соответствующие файлы. Отредактируйте ссылки в header.php при необходимости. В файлах страниц (index.php, about.php, contacts.php) используйте функцию require_once для подключения файлов шапки и подвала:
<?php require_once 'blocks/header.php'; ?><?php require_once 'blocks/footer.php'; ?>Теперь шапка и подвал подключаются динамически, и изменения в них автоматически отражаются на всех страницах сайта.
Мы создали PHP-проект с динамическим подключением блоков и файлом .htaccess для настройки сервера. В следующих уроках добавим систему регистрации, авторизации и функционал работы со статьями.