Как изменить главную страницу сайта php

Уроки PHP и MySQL

Скачать материалы к учебному курсу:

Скачать Notepad++ Portable

Скачать Denwer3 (версия p5.3.13_m5.5.25_pma3.5.1)

Скачать папку CD_php для изучения курса «Уроки PHP и MySQL» (692 Кб)

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

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

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

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

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

Рис. 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).

Рис. 7

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

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

Рис. 8

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

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

Рис. 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.

$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()?

Просмотров: 30414
Дата последнего изменения: 11.01.2023

Ранее


Создание шаблона – первый шаг в интеграции дизайна.

Примечание: Ранее можно было задавать внешний вид шаблона сайта с помощью визуального редактора. С версии 14.0 работа выполняется без визуального редактора.

Подробнее…

мы создали папку шаблона сайта. Однако для корректного отображения шаблона на сайте нужно еще адаптировать вёрстку, подключив все стили и js-файлы в шапке и подвале сайта, а также прописав новые пути до картинок и объектов.

Необходимо выполнить три важных шага:

1. Редактирование шапки сайта (header.php)
2. Редактирование подвала сайта (footer.php)
3. Подключение шапки и подвала (index.php), добавление контента

1. Редактирование шапки сайта (header.php)

• В папке шаблона откроем файл header.php в режиме редактирования как PHP.
• Первой строкой пропишем служебный код (защита от подключения файла напрямую без подключения ядра):

  <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>
  

• Внутри тегов <head> добавим следующие строки:
  • Код отображения заголовка страницы:

    <title><? $APPLICATION->ShowTitle(); ?></title>
    

  • Код вывода в шаблоне сайта основных полей тега <head> (мета-теги Content-Type, robots, keywords, description; стили CSS; скрипты):

    <? $APPLICATION->ShowHead();  ?>
    

• После открывающего тега <body> пропишем код для отображения административной панели <? $APPLICATION->ShowPanel(); ?> . В связи с особенностями данного html-макета заключим код отображения панели в теги <div> (панель будет отображаться внизу страницы), иначе административная панель «наедет» на меню:

  <div id="panel">
      <? $APPLICATION->ShowPanel(); ?> 
  </div>
  

• Во все строках, где есть обращение к файлам, добавим в начале пути константу
  
  <?=SITE_TEMPLATE_PATH?>
  
  
  Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.
  
  
  
  и слеш /.

  Рассмотрим на примере блока <!-- Bootstrap core JavaScript -->:

    <!-- Bootstrap core JavaScript -->
    <script src="<?=SITE_TEMPLATE_PATH?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?=SITE_TEMPLATE_PATH?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  

• Сохраним изменения.

2. Редактирование подвала сайта (footer.php)

Подвал сайта почти

не нуждается в изменениях

Проверьте обязательно наличие строки <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?> в начале файла.


. Необходимо только в строках, обращающихся к файлам, добавить в начале пути константу

<?=SITE_TEMPLATE_PATH?>


Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.



со слешем / и сохранить изменения.

3. Подключение шапки и подвала (index.php), добавление контента

• Необходимо удостовериться в подключении на странице вывода файлов header.php и footer.php.

  Для этого в файле главной страницы сайта
  
  index.php
  
  (Контент > Структура сайта > Файлы и папки > index.php)
  
  
  
  
  сверим следующие конструкции:

  • первая строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
  • последняя строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
• Добавим
  
  статический
  
  
  Т.е. для изменения контента страницы нужно будет вновь отредактировать вручную код страницы index.php.
  
  
  
  контент.

  Откроем файл с подготовленной вёрсткой (index.html) и скопируем код между шапкой (header) и подвалом сайта (footer) — тот, который мы в пункте 1 заменяли на #WORK_AREA#, то есть контент сайта.

  Настроим пути к картинкам. Пропишем в существующих путях уже знакомую константу <?=SITE_TEMPLATE_PATH?>/.

Удобнее, разумеется, настроить вывод динамической информации и работать с ним. Подробнее об этом в

следующем уроке.


В предыдущем уроке мы создали шаблон главной страницы сайта. Однако пока вся информация на сайте — статическая, и для внесения любых изменений придется править главную страницу index.php. Это не очень удобно, если информация на сайте должна постоянно обновляться. И при этом слишком громоздко.

Поэтому однородную информацию лучше заносить в инфоблоки, а потом с помощью компонентов выводить её на сайте. А чтобы информация отображалась именно так, как задумал дизайнер, необходимо кастомизировать шаблон компонента.

Подробнее…

Готово! Теперь осталось только

назначить


Откройте в Административном разделе страницу Настройки > Настройки продукта > Сайты > Список сайтов. С помощью меню действий откройте для редактирования нужный сайт.

Выберите шаблон, который вы хотите применить и условия.

Подробнее…

созданный шаблон для тестового сайта и посмотреть результат.