шаблон многостраничного сайта php
Создание PHP+MySQL сайта: от простого к сложному — шаг первый
Для создания перспективного, расширяемого и эффективного сайта любой сложности следует начинать с простого. Это процесс нелёгкий, требует определённых базовых знаний PHP и MySQL, но если его рассмотреть по пунктам — то можно составить своего рода «рабочий план», который пригодится при создании новых сайтов. Подготовим «ядро» и базу для проекта. Вначале это будет обычный сайт визитка, но потом, добавляя функционал, его можна превратить во что угодно. Итак, приступим.
1. Подготовка базы данных. Создаём первую таблицу в БД MySQL
Создаём новую базу данных, например «mysite». Лично я привык работать с кодировкой UTF-8, по-этому сразу оговорюсь: проследите, чтобы все текстовые файлы сайта, сама база, таблицы и поля таблиц были в одной кодировке.
В новой базе делаем таблицу. Назовём её «pages». В этой таблице будут храниться статические страницы будущего сайта и информация о них. Таблица должна содержать следующие поля:
Сразу после создания таблицы вставляем в неё значения для главной страницы сайта. В поле «page_alias» для главной страницы предлагаю вставить значение «home». Метатеги — соответственно тематике всего сайта. Таким же образом можно посоздавать другие страницы, например «О компании» с алиасом «about» и своими метатегами, или «Контакты» с алиасом «contacts» и т.д.
2. Создаём файл конфигурации сайта
function close() <
mysql_close($this->link);
>
Этот файл пока содержит только простой класс подключения к базе данных, но в дальнейшем в него можно добавлять разные полезные функции, которые будут доступны из любого места в коде сайта. Не забудьте изменить логин и пароль к Вашей базе.
Если Вы работаете в среде Windows, я могу порекоммендовать использовать редактор Notepad++. В этом редакторе есть нумерация строк, и он легко переводит текст из одной кодировки в другую. ВНИМАНИЕ! Если Вы работаете в кодировке UTF-8 — конвертируйте файлы в UTF-8 without BOM — это поможет избежать проблем в будущем.
3. Создаём index.php — главный контроллер сайта
Файл конфигурации создан. Теперь в корневой папке сайта создаём index.php — это и будет основной скрипт сайта, своего рода «главный контроллер». Содержание файла index.php:
// ГЛАВНЫЙ КОНТРОЛЛЕР
switch ($_GET[option]) <
case «page»:
include($_SERVER[DOCUMENT_ROOT].»/com/page.php»);
break;
default:
include($_SERVER[DOCUMENT_ROOT].»/com/home.php»);
break;
>
include ($_SERVER[DOCUMENT_ROOT].»/template.php»);
$db->close();
4. Создаём компонент вывода обычной страницы
Создаём в папке «com» файл «page.php». Содержимое файла следущее:
5. Создаём компонент вывода главной страницы
Главная страница у нас в базе данных хранится под псевдонимом «home», и пока по своей структуре не отличается от обычных страниц сайта — это просто статья. Тем не менее создадим для неё отдельный компонент — на перспективу, так сказать.
Содержимое компонента «home.php» в папке «com» почти совпадает с содержимым компонента обычной страницы, за исключением строки запроса к базе и названия компонента. Строка запроса теперь выглядит так:
$query = «SELECT * FROM wx_pages WHERE page_alias=’home’ LIMIT 1»;
6. Создаём шаблон дизайна всего сайта
В корневой папке также должны быть папки «css» и «images» для элементов дизайна. В файле /css/style.css — можно настроить стили по своему усмотрению.
RewriteEngine On
RewriteBase /
Шаблонизация в PHP
Шаблонизация — это работа по интеграции готовой, статичной вёрстки на сайт.
Ведя работу над сайтом, написанном на PHP, мы разрабатываем логику, которая управляет представлением.
Логика — это PHP-сценарии, где происходит объявление переменных, функций, использование массивов и циклов, получение и обработка информации.
Представление — это внешний вид сайта. Сюда входят его страницы, которые содержат общие элементы оформления (шапка, меню, подвал) и контент (страницы, статьи и тому подобное).
Имея на руках готовую вёрстку, надо правильно её внедрить в работающий сайт, чтобы в определённых местах страниц информация выводилась динамически, под контролем PHP-сценариев.
Что такое «шаблон» и причём тут рыба?
Шаблон — это готовая вёрстка страницы или блока, которая состоит только из оформления, и не содержит никакого контента (полезной информации).
Шаблон по своей сути — это обычный PHP-сценарий, который на 90% состоит из HTML-кода и только на 10% из PHP-конструкций. Основная задача программиста в процессе работы над сайтом — это превратить статичные HTML-страницы в динамичные PHP-шаблоны, которые будут использоваться для показа итоговых страниц.
Но если статичная вёрстка страниц не содержит динамического контента, то что будет на его месте до начала внедрения этих страниц? Когда дизайнер или верстальщик хотят показать как будет выглядеть страница на сайте, то вместо реального контента используется так называемая «рыба».
Рыба — это заполнитель. Бессмысленный текст, который используется в вёрстке, чтобы показать как будет выглядеть страница, наполненная контентом.
Проблемы типичного процесса вёрстки
Когда верстальщик работает над несколькими страницами, ему приходится копировать бол́ьшую часть HTML-кода между страницами, так как эти страницы содержат много повторяющихся элементов: подключение стилей, шапка сайта с логотипов, футер сайта, различные меню и тому подобное.
В результате, когда дело доходит до правок, то при необходимости поменять что-нибудь в той же шапке, это изменение нужно будет сделать во всех HTML-файлах, чтобы они выглядели одинаково. Конечно, такой мартышкин труд никому не понравится.
Общие фрагменты страниц сайта
Взглянув на страницы практически любого сайта, можно заметить их сходство друг с другом. Ведь все страницы состоят из общих частей, которые не меняются, а также из областей с уникальным содержимым. И как было бы удобно редактировать общие блоки, вроде шапки сайта, отдельно, а затем вкладывать их во все страницы. Тогда при смене логотипа потребуется внести изменение только в одном месте, а все страницы сайта обновятся автоматически.
Шаблонизация — это и есть деление всей вёрстки на независимые шаблоны и дальнейшее их подключение и вкладывание друг в друга.
Сбор страницы из частей
Если поделить всю вёрстку сайта на отдельные, небольшие шаблоны мы получим сразу несколько преимуществ. Станет легче следить за единообразием интерфейса. Выделив представление сайта в шаблоны, мы также существенно упростим PHP-сценарии, ведь в них останется только PHP-код. Можно даже доверить верстальщику редактировать непосредственно шаблоны, так как в них почти нет программного кода, а тот, что есть, очень простой.
Потренируйтесь собирать страницы из фрагментов, выполнив это задание.
Термины шаблонизации
В разговоре о шаблонизации очень важно придерживаться определённых терминов, чтобы всегда было понимание, о чём идёт речь. Договоримся использовать следующую терминологию:
Лейаут — это шаблон, который содержит HTML-код, общий для всех страниц сайта. В нём могут содержаться подключение стилей, мета-теги, шапка, подвал. Также лейаут содержит область для вставки уникального содержимого каждой страницы.
Шаблон страницы — это шаблон с уникальным для одной страницы HTML-кодом. Например, для главной страницы там может быть список новостей. Также шаблон страницы может включать в себя блоки.
Блок — это шаблон очень небольшого блока страницы. Например, это может быть один элемент списка новостей. Удобство блоков в том, один блок могут включать разные страницы.
Содержимое шаблона
Что же находится внутри шаблона? Вы уже знаете, что шаблон почти полностью состоит из HTML-кода. Но помимо HTML-тегов, там также лежат данные и простая логика.
Данные в шаблоне
Шаблон показывает динамическую информацию. Прилагательное «динамическая» означает, что эти данные могут меняться и показываться в зависимости от различных условий. Сама информация, как правило, хранится в базе данных, а PHP-сценарий извлекает её оттуда и передаёт в шаблон.
Вне зависимости от источника информации есть правило, которое никогда нельзя нарушать: любой шаблон (лейаут, шаблон страницы, блок) должен иметь доступ только к тем данным, которые ему явно передали.
Такую изоляцию данных обеспечивает специальная функция-шаблонизатор, о которой пойдёт речь далее.
Логика шаблона
В шаблоне должна находиться только несложная логика. Иными словами, шаблоны не содержат «тяжёлого» PHP-кода, а только простые конструкции.
Так, в шаблоне можно показывать переменные, использовать условия, циклы, обходить массивы, вызывать функции и подключать файлы. Всё другое запрещено. Оставшаяся бизнес-логика остаётся в PHP-сценариях, которые вызывают шаблоны и передают в них информацию.
Функция-шаблонизатор
Шаблонизатор — это функция, которая подключает файл шаблона, передаёт ему данные и возвращает сгенерированный HTML.
Именно шаблонизатор является тем клеем, что скрепляет воедино отдельные шаблоны в итоговую страницу. Работает он следующим образом: PHP-сценарий страницы выполяет все действия для подготовки необходимой информации, к примеру, запрашивает записи из базы данных. Эти записи в виде массива отправляются шаблонизатору вместе с именем шаблона страницы.
Шаблонизатор подключает указанный файл шаблона и передаёт туда всю информацию. Но, вместо вывода на экран содержимого этого шаблона, он захватывает получившийся HTML-код и возвращает его.
Затем сценарий вызывает шалбонизатор ещё раз, но теперь с его помощью подключает общий лейаут, куда отправляется общая информация, а также содержимое страницы, полученное из предыдущего шага. Весь результат работы выводится на экран.
Пример использования
Посмотрим на примере, как это всё работает. Начнём с того, что определим три шаблона: лейаут, шаблон страницы и какой нибудь блок.
Напоминаю, что в лейаут выносим общий HTML-код.
[layout.php]
Теперь очередь за шаблоном страницы:
[main.php]
Здесь обрати внимание, что шаблон страницы помимо интерации по массиву, для каждого его элемента вызывает функцию-шаблонизатор. Шаблонизатор получает контент из шаблона блока и показывает его внутри списка.
Как сделать многостраничным сайт
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Что сделать, что бы поисковики видели сайт и как вставить счетчик на сайт
1. Добавила свой сайт http://www.vystyplenie.ru в каталог поисковика mail.ru, после этого он.
Как сделать сайт?
Как мне сделать свой сайт если хто может сделайте!
Как сделать анимацию на сайт?
Помогите, люди добрые. Фотографирую, делаю сайт, очень увлёкся. Видел на других сайтах анимацию.
Как сделать сайт приватным?
Ребята в общем проблема такова, у меня на сайте есть форум punbb, я хочу что бы про него знала.
Документ это скорее одна страница чем сайт предоставляющий доступ к данным.
Плюс к одной странице часто прилагается куча дополнительно получаемых из сети файлов.
Если например это один php-файл и работает с базой данных, где на самом деле и лежат все данные,
то всё равно это ограничение, например для наращивания новых возможностей.
Каждый раз надо будет снова и снова праить этот файл, который и содержит весь код для работы с данными.
Можно это наверное назвавть модульность.
Решение
Можете попробовать писать языковые фалйы.
Весь текст на сайте помещает в констатны например
Создаете файл ru.php и в нем задаете
также создаете файл en.php
и теперь на странице перед первым выводом информации подключаете файл в зависимости от выбранного языка (например GET параметром)
Shoshona, а если этого GET-параметра не будет, в нем передадут идентификатор языка, для которого отсутствует файл, или и того хуже «идентификатор», ссылающийся на неязыковой файл?
Добавлено через 3 минуты
Посмотрите мои примеры. Прежде чем фронт-контроллер начнет использовать шаблон order.php или news.php, он проверит существование идентификатора order или news в базе данных.
Вам нужно хотя бы в коде подготовить таблицу с допустимыми идентификаторами языков.
Добавлено через 1 минуту
Тем более, что еще и
Посоветуйте еще автору сделать статические страницы. Вам же «нравится именно такой подход».
Для чего это? Вывода нет.
Не статические, а статико-динамические. Я Вам, припоминаю, уже говорил о пользе их с точки зрения Яндекса. Убеждать более не буду.
Еще раз (не для Вас, ибо вам, похоже, что в той пословице): динамические страницы приемлемы там и только там, где требуется именно динамичность. Если же страница более-менее «константна» (т.е. не меняется существенно), целесообразно, на мой (субъективный) взгляд делать ее статико-динамической и дополнять контентом уже по мере необходимости (дополнительными запросами на сервер).
Таких «константных» страниц в интернете, вроде бы, не менее 70. 80%.
Шаблоны в PHP для чайников
И снова здравствуйте. Давно я как-то не писал ничего путного, даже как-то самому неприятно. Так что сразу к теме. Давайте, товарищи умники, забудем такие слова, как XML, XHTML и прочий X…, и поговорим о вещах, приближенных к реальности.
Сужествует такая «проблема», как разделение оформления и содержания, и отделение исполняемого кода от получаемого html’я. Мухи — там, котлеты — тут. Грубо говоря, программист программирует, дизайнер дизайнит и никто никому не мешает жить. А если надо поменять что-то в оформлении, то сделать это сможет один оформитель, сиречь дизайнер, самостоятельно.
PHP хорош (хорош, собака!) тем, что позволяет встраивать исполняемые конструкции прямо в html. Плюсы понятны. Минусы, например: довольно сложно менять оформление в таком коде: echo « «.$boldtext.» «; Глупый дизайнер испугается и убежит, а умный программист скажет «я вам не глупый дизайнер, чтобы ерундой заниматься».
Чего хочется в идеале? Чтобы была html-страница, где все, как у людей: здоровые, полноценные html-тэги, а в тех местах, где выводится информация, стояли специальные, простые, понятные как для верстальщика, так и для движка/программиста указатели.
То есть, что-то вроде такого:
Там, где стоит [TITLE], движок выводит заголовок, там, где [TEXT] — соответственно, текст.
Легко и просто. И все счастливы. И это правильно. Но! Тут и начинается маразм. Сначала пишется «движок шаблонов», что-то (я утрирую) вроде такого:
Дальше — больше. Оказывается, что в некоторых случаях этого мало. Нужно больше функций! Например, нам нужно проверять: если [TEXT] пустой, то выводить одно, если не пустой, то выводить другое, то есть, фактически, вводить уже минимальную логику отображения. И мы пишем супер-пупер наророченый язык шаблонов. На PHP. И называем его SMARTASS (Super Mega And Revolutionary Totally Automatized Shablon System).
До такой степени навороченный, что дизайнер, ради которого все затевалось, — чтобы тот смог сам менять оформления, уже не может сменить оформление пока специально не выучит язык шаблонов.
А теперь потрясем мозгами и хорошенько подумаем, что же у нас получилось. У нас получился фактически язык программирования, написанный на PHP, который можно встраивать в html-код и тем самым менять логику его (html-кода) отображения.
Поздравим друг друга. У нас получился PHP, написанный на PHP. Велосипед для велосипеда. Осмысление этого придет позже.
А теперь возвращаемся к первому примеру.
Помните? Сравним его со следующим примером и попробуем найти кардинальные различия.
То есть следующий пример php-страницы выведет все, как надо:
Дальше — больше. Выносим все шаблоны в отдельный файл. И пишем просто:
Ну что плохого в таком вот шаблоне страницы?
Плюсы — налицо. Для его вывода не нужно никаких дополнительных вещей. Кроме PHP.
Вот, собственно, и все.
PS. Уважаемые умники. Данный способ «шаблонизации» действительно покрывает 95% нужд простых смертных. Если вам что-то не нравится — идите, побрейтесь бритвой Оккама.
Спасибо! Действительно коротко и ясно. Блин шарил интернет читал книжку принципы их понял а вот чтобы что-нить сделать. Спасибо автору за доступность!
А у меня так не работает
Зато работает так, как показано
*ПХП на сервере есть
в шаблоне вывод текста лучше делать так:
А что делать с кавычками в контенте?
20 бесплатных HTML шаблонов корпоративного сайта для студии
Создание корпоративного сайта — это отличный старт для студии, а также неплохой способ привлечения клиентов к сотрудничеству.
В этой статье подобраны готовые шаблоны сайтов, которые помогут представить студию с лучшей стороны, что в итоге сэкономит ваши деньги и время на создании сайта. На корпоративном сайте встречаются следующие элементы: логотип, информация о студии, списки услуг, портфолио, блог и контактная информация. Иногда вставляется список сотрудников, отзывы клиентов, анимация и другие элементы. Информация на сайте располагается удобно и наглядно для восприятия посетителя.
В наши дни немаловажно, чтобы сайты были адаптивными, так как приличная часть трафика идет с мобильных устройств и планшетов. Текущая подборка не отпугнет владельцев смартфонов и других девайсов. Вы можете все увидеть и протестировать сами.
Подписывайтесь на обновления Вконтакте, если еще не подписаны и оставляйте комментарии. Желаю приятного обзора.
Sparrow
Шаблон корпоративного сайта в современном стиле. Включает слайдер, портфолио, блог, меню вверху и внизу страницы, страницу о нас и контактную информацию. Может подойти для презентации мобильных приложений.
Thomsoon
Качественный шаблон для корпоративного сайта. выполнен в стиле минимализм. Содержит информацию о себе, портфолио и контактные данные. Позволяет настроить боковую панель, классическое или полноэкранное меню навигации, стиль галереи (включая кирпичный стиль), Parallax эффект, количество колонок под содержимое контента и контактную форму. Замечательно смотрится на любых устройствах. Эта тема — настоящая находка.
Infusion
Тема для корпоративного сайта студии любого рода деятельности. Выполнен в плоском стиле. Содержит меню, полноэкранное изображение, галерею с фильтром работ, слайдер с изображениями, слайдер с отзывами. Вернуться в начало страницы помогает кнопка «вверх».
Kappe
Корпоративный сайт с фиксированным меню в левой части экрана. Галерея работ выполнена в виде сетки, при нажатии на работу открывается описание проекта. В блоге статьи выстроены в кирпичном стиле. Шаблон сделан качественно. Хорошее решение для студии дизайна.
Creativs
Тема для корпоративного сайта в современном стиле. Включает такие страницы: домашняя, о нас, услуги, портфолио, новостная страница и контакты.
Basic
Шаблон выделяется наличием слайдера изображений на главной странице и выполнен в зеленых тонах. Включает информация о команде, отзывы клиентов, портфолио, прайс, достижения и список услуг.
Excel
Чистая тема для корпоративного или личного сайта. Содержит четыре варианта домашней страницы, слайдер с прикольной анимацией, отзывы, футер с виджетами, портфолио, блог и контактную информацию.
Kanzi
Качественная тема с интересным оформлением. На главной странице есть: jQuery слайдер с анимацией, список услуг, список довольных клиентов, портфолио, блог и отзывы.
Gamez
Корпоративный сайт на игровую тематику. Здесь посетителя встречает полноэкранное изображение, ниже идет приветствие, галерея игр, видео обзор и последние статьи. Также есть страница с играми (галерея и описания), блог, о нас и контактная страничка.
Solid
Шаблон в голубых тонах для студий веб-дизайна и фрилансеров. Состоит из семи страниц, поддерживает шрифтовые иконки Font Awesome, Retina мониторы. Галерея выполнена в кирпичном стиле с лайтбоксом.
Creative Work
Креативный шаблон многостраничного сайта. Включает в себя список клиентов, описание опыта, список услуг, портфолио, блог, список сотрудников, контактную информацию и много других элементов и особенностей.
Free Style
Многостраничный шаблон в плоском стиле. Первые четыре пункта в меню навигации прокручивают страницу к якорям на этой же страницу. Остальные пункты меню, а именно блог и контакты, открывают страницы с соответствующей информацией.
Качественный HTML5 шаблон, который включает в себя: слайдер с изображением и текстом, блок с новостями, событиями и заметками, портфолио с анимацией приближения при наведении на элементы. Есть возможность выбрать внешний вид из предложенных вариантов. Шаблон заслуживает внимания.
UI Brush
Приятный сайт с хорошим оформлением. Включает информацию о студии. индикаторы выполнения (progress bar), список сотрудников, галерею работ, прайс и форму обратной связи.
Creative Bee
Элегантный шаблон корпоративного сайта группы разработчиков в голубых тонах. На главной странице есть меню, изображение, информация о команде, отзывы клиентов, достижения и список услуг. Также есть страницы: о нас, услуг, портфолио с lightbox галереей, прайс и контактная.
Yellow!
Шаблон на Twitter Bootstrap 3 с формой захвата. Некоторые особенности: элегантный дизайн, три варианта размещения работ в портфолио, современная страница контактов формой обратной связи.
Webworld
HTML/CSS шаблон для корпоративного сайта для студии дизайна. Содержит три страницы: главная, портфолио и контакты. На главной размещена информация о студии, слайдер текста, проекты, отзывы.
Конактная информация включает Google карту и контактную форму.
Elegant
Классная тема для презентации студии. Особенности: Чистое оформление, полноэкранное изображение в рамках которого за курсором следует интересная анимация, полноэкранное меню навигации, аккуратное портфолио, блог и много других элементов.
Namaste
Светлый шаблон. На странице есть слайд-панель навигации, полноэкранное изображение, галерея работ с lightbox презентацией, отображаются последние статьи из блога, кнопка вверх. Сам блог и контакты идут на отдельных страницах. Шаблон поддерживает Retina мониторы.
Triangle
Классная тема в рисованном стиле для креативных студий. Особенности: чистый дизайн, поддержка шрифтовых иконок Font Awesome, анимация при прокрутке, контактная форма Ajax, содержит как минимум два варианта оформления на каждую страницу.