УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки PHP и MySQL

Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать Denwer3 (версия p5.3.13_m5.5.25_pma3.5.1)
Скачать папку CD_php для изучения курса «Уроки PHP и MySQL» (223 Кб)




Уроки PHP. Урок 3. Создание сайта на PHP

Создание сайта на PHP - урок, посвященный созданию шаблона простого сайта с использованием функций require() и include(), которые позволяют не дублировать одинаковые для всех страниц блоки, а создать их только один раз, а затем редактировать и изменения будут происходить на всех страницах сайта, где использованы эти блоки.

Функция require() при ошибке в сценарии останавливает выполнение сценария, а функция include() сообщает об ошибке и продолжает выполнение сценария. В этом разница между ними.

Упражнение 1. Создание простого шаблона сайта

На рис. 1 приведен шаблон сайта. В основе шаблона лежит макетная таблица, в ячейках с цветным фоном расположены одинаковые элементы сайта, на разных страницах сайта меняется содержимое только центральной ячейки.

Для создания единых элементов можно использовать функцию require, действие которой аналогично функции readfile.

 Создание сайта на PHP

Рис. 1

 

1. Создайте папку site_inc.ru в папке home на виртуальном сервере.

2. Внутри папки site_inc.ru создайте папку www.

3. Перезапустите Денвер. Все файлы простого шаблона сохраняйте в папку www.

4. Осуществите код из рис. 2, и сохраните файл под именем index.php в папке www.

 

Рис. 2

 

5. Создайте файл verh.inc (рис. 3) и сохраните в папку www.

 

Рис. 3

 6. Создайте файл left.inc (рис. 4) и сохраните в папку www.

Рис. 4

 7. Создайте файл right.inc (рис. 5) и сохраните в папку www.

Рис. 5

 8. Создайте файл niz.inc (рис. 6) и сохраните в папку www.

 

Рис. 6

 9. Просмотрите результат, набрав в адресной строке www.site_inc.ru и нажав Enter (рис. 7).

 Создание сайта на PHP

Рис. 7

10. Копированием файла index.php создайте файлы: kompany.php, product.php, uslugi.php, kontakt.php. В каждом файле измените содержимое центральной ячейки. Проверьте работоспособность гиперссылок. Результат на рис. 8.

11. Измените содержимое файла verh.inc. Убедитесь, что изменения произошли на всех страницах сайта.

 

Рис. 8

Упражнение 2. Создание сайта на PHP с разворачивающейся панелью навигации

Будем создавать сайт газеты «Из первых рук» (рис. 9). 

Создание сайта на PHP

Рис. 9. Сайт газеты «Из первых рук»

В данном уроке создание сайта на PHP начинается с главной страницы.

Задание 1

1. В директории home на виртуальном сервере создайте папку с именем gazeta.local, внутри нее папку www. Запустите/перезапустите Денвер.

2. В папке www создайте главную страницу сайта index.php и впишите в нее код из листинга на рис. 10:

3. Создайте папку image в корне сайта (папка www). Скопируйте в нее изображения logo.gif и fon.jpg из папки CD_php/ php-3.

4. Создайте внутри папки www папку flash и скопируйте в нее файл banner.swf из папки CD_php/php-3.

 

Рисунок 10

Для просмотра в браузере в адресной строке введите gazeta.local/ Должно получиться так, как на рисунке 11.

Рис. 11 

Задание 2

Как видно из рис. 10, наша страница берет все стили из файла style.css, который находится в папке CSS. Отсюда следующее задание.

1. Создайте папку CSS.

2. В ней создайте файл style.css, и впишите в него код, как на рис. 12. 

Риунок 12

Создание сайта на PHP требует достаочно частой проверки внесенных изменений. Для проверки в адресной строке браузера введите gazeta.local/ Если все задания выполнены правильно, то в окне браузера отобразится сайт газеты «Из первых рук» (рис.13). 

Рис. 13. Результат выполнения заданий 1 и 2

 

РАЗВОРАЧИВАЮЩАЯСЯ ПАНЕЛЬ НАВИГАЦИИ

Сначала создадим несколько страниц. Страницу с новостями назовем – news.php; статьи – stats.php; рубрики – rubrics.php; партнеры – partners.php; главная уже создана – index.php.

Также добавим подпункты в меню новости и статьи. В новостях добавим: «горячие» новости – hotnews.php; последние новости – lastnews.php. В статьях: заказать статью – zakaz.php; TOP 10 – TOP10.php

Имея теперь название страниц, займемся созданием панели навигации.

Задание 3

1. Создайте в корне сайта файл menu.php.

2. Наберите в нем код из листинга на рис. 14.

Рисунок 14. Файл menu.php

Подробней разберем код из листинга на рис. 14.

$t1= $_GET[‘t1’];  // эта строка задает переменную t1, значение которой передается GET методом.

$but1=’<a href=”index.php?t1=1”>Главная</a>’; // здесь определяем переменную but1, которая несет в себе часть панели навигации. Также из значения атрибута href видно, что при переходе на страницу index.php, передается значение переменной t1, равное единице.

Так как остальные переменные but выполняют подобную функцию, мы сразу рассмотрим строку 18:

if ($t1==’1’) {echo $but1.$but2.$but3.$but4.$but5;}; // здесь выполняется условие, при соблюдении которого, скрипт выводит на странице значение определенных переменных.

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

Пришло время использовать функцию include(). Чтобы не путаться в переменных $but и в операторах if, вынесем часть кода, которая содержит значения переменных $but в отдельный файл.

Задание 4

1. Создайте в корне сайта config.php.

2. Перенесите в него весь код из файла menu.php, который содержит определение переменных $but. Не забудьте, код надо вставить между тэгами <? и ?>.

3. Вместо вырезанного кода, в файле menu.php впишите include (‘config.php’);.

В результате выполнения задания 4, коды файлов menu.php и config.php должны соответствовать листингам на рис. 15 и 16.

Рисунок 15. Файл menu.php


Рисунок 16. Файл config.php

ШАБЛОН СТРАНИЦЫ

Мы создали главную страницу сайта, сотдельный файл со всеми стилями, и разворачивающуюся панель навигации. Но проверить панель в действии, пока не можем, так как не существует страниц, на которые она ссылается. Значит, пора браться за создание шаблона страниц. Но сначала разберем логику, по которой будет создан наш шаблон.

Рассмотрим наш сайт. Основная часть страницы, текст в центре, окружена панелью навигации слева, дублером навигации и шапкой страницы сверху, и баннером справа. Только текст в центре несет в себе индивидуальное наполнение страницы, все остальное копируется на каждой странице. Внеся изменения, например, в заголовке title, нам придется вносить изменения во все файлы сайта, что довольно долго и не интересно.

Теперь посмотрим на сайт, точнее на его главную страничку, изнутри. Весь код идет сверху вниз, а 10% индивидуальной информации расположены где то посередине. Что наводит на простую мысль, которую мы реализуем, выполнив задание 5.

Задание 5

1. Скопируйте код, который предоставлен на рис. 17, из файла index.php.

2. Создайте файл top.php и вставьте код в него.

3. Повторите шаг 1 и 2, используя листинг на рис. 18 и создав файл endmenu.php.

4. Повторите шаг 1 и 2, используя листинг на рис. 19 и создав файл down.php.

В результате у вас должны появиться три новых файла, код которых должен соответствовать рис. 17, 18 и 19.

Рисунок 17. Файл top.php

 

 

Рисунок 18. Файл endmenu.php 


Рисунок 19. Файл down.php

 

Теперь изменим главную страницу, сделав ее шаблонной.

Задание 6

Замените весь код страницы index.php на пять строчек из листинга на рис. 20. 

Рисунок 20 

Посмотрите сайт в браузере (рис. 21).

Рисунок 21

Создадим остальные страницы сайта.

Задание 7

1. Создайте файл news.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">Разделы новостей</font><br>

2. Создайте файл hotnews.php, вписав в него код из  рис. 20, заменив строку 4 на:

<font class="Btext">"Горячие" новости</font><br>
<font class="Mtext">Буквально сегодня произошло...</font>

3. Создайте файл lastnews.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">Последние новости</font><br>
<font class="Mtext">За последнюю неделю...</font>

4. Создайте файл stats.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">Список статей за месяц...</font>

5. Создайте файл zakaz.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">Заказ статьи</font><br>
<font class="Mtext">...</font>

6. Создайте файл TOP10.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">10 лучших</font><br>
<font class="Mtext">1...<br>2...<br>3...</font>

7. Создайте файл rubriks.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">Список рубрик</font><br>
<font class="Mtext">1...<br>2...<br>3...</font>

8. Создайте файл partners.php, вписав в него код из рис. 20, заменив строку 4 на:

<font class="Btext">Информация партерам</font><br>
<font class="Mtext">текст...</font>

 

Сейчас надо добавить гиперссылки для дублера навигации.

Задание 8

Замените в файле top.php часть кода, которая указана на рис. 22,  на код из рис. 23.

Рисунок 22 

Рисунок 23

Проверьте работу всех ссылок (рис. 24)

Рисунок 24

 

Контрольные вопросы

1. Что делает функция include()?

2. Чем отличается функция include() от require()?