Katcerina.ru

Деньги в сети
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать шаблон сайта

Создание PHP+MySQL сайта: от простого к сложному — шаг первый

Для создания перспективного, расширяемого и эффективного сайта любой сложности следует начинать с простого. Это процесс нелёгкий, требует определённых базовых знаний PHP и MySQL, но если его рассмотреть по пунктам — то можно составить своего рода «рабочий план», который пригодится при создании новых сайтов. Подготовим «ядро» и базу для проекта. Вначале это будет обычный сайт визитка, но потом, добавляя функционал, его можна превратить во что угодно. Итак, приступим.

1. Подготовка базы данных. Создаём первую таблицу в БД MySQL

Создаём новую базу данных, например «mysite». Лично я привык работать с кодировкой UTF-8, по-этому сразу оговорюсь: проследите, чтобы все текстовые файлы сайта, сама база, таблицы и поля таблиц были в одной кодировке.
В новой базе делаем таблицу. Назовём её «pages». В этой таблице будут храниться статические страницы будущего сайта и информация о них. Таблица должна содержать следующие поля:

  • page_id — идентификатор страницы (SMALLINT, primary key, auto_increment);
  • page_alias — псевдоним страницы для строки адреса ЧПУ (VARCHAR, 255);
  • page_title — название страницы в окне браузера (VARCHAR, 255);
  • page_meta_d — мета описание страницы для тега meta description (VARCHAR, 255);
  • page_meta_k — мета ключевые слова для тега meta keywords (VARCHAR, 255);
  • page_h1 — заголовок страницы (VARCHAR, 255);
  • page_s_desc — краткое описание материала, например если материалы сайта будут в виде блога (TEXT);
  • page_content — основной текст страницы, который будет выводиться в центральную колонку сайта (TEXT);
  • page_publish — содержит «Y» — если страница опубликована, или «N» — если она скрыта (CHAR, по умолчанию «Y»).

Сразу после создания таблицы вставляем в неё значения для главной страницы сайта. В поле «page_alias» для главной страницы предлагаю вставить значение «home». Метатеги — соответственно тематике всего сайта. Таким же образом можно посоздавать другие страницы, например «О компании» с алиасом «about» и своими метатегами, или «Контакты» с алиасом «contacts» и т.д.

2. Создаём файл конфигурации сайта

В корневой папке сайта, которая должна быть пуста на данном этапе, создаём папочку «cfg», в ней с помощью .htaccess закрываем доступ директивой «deny from all». Создаём файл core.php следующего содержания:

link = mysql_connect($this->dbhost, $this->dblogin, $this->dbpass);
mysql_select_db($this->db);
mysql_query(‘SET NAMES utf8’);
>

function close() <
mysql_close($this->link);
>

function run($query) <
$this->query = $query;
$this->result = mysql_query($this->query, $this->link);
$this->err = mysql_error();
>
function row() <
$this->data = mysql_fetch_assoc($this->result);
>
function fetch() <
while ($this->data = mysql_fetch_assoc($this->result)) <
$this->fetch = $this->data;
return $this->fetch;
>
>
function stop() <
unset($this->data);
unset($this->result);
unset($this->fetch);
unset($this->err);
unset($this->query);
>
>

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

Если Вы работаете в среде 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();

Переменная $_GET[option] будет указывать главному контроллеру какой компонент сайта загружать при запросе. Сейчас в нашем сайте предусмотрено только два компонента: «страница» и «главная страница» (в принципе можно обойтись и одним компонентом вывода обычной страницы, но часто вид главной страницы сайта отличается от обычных страниц пунктов меню). Логика работы главного контроллера такова: из URL строки извлекается название нужного компонента (значение переменной $option), в зависимости от его значения подключается файл самого компонента (содержится в папке /com). Файл компонента выполняет все необходимые работы, извлекает из базы данные и записывает их в переменные, для передачи в шаблон дизайна. В самом конце подключается файл дизайна сайта, в который и передаются все переменные и данные, извлечённые в компонентах. Это звучит намного сложнее, чем работает.

4. Создаём компонент вывода обычной страницы

В корне сайта создаём папочку «com» — в ней будут храниться файлы компонентов. Компонент сайта, в моём понимании — это файл, в котором происходит обработка данных для разных разделов сайта. Например компонент обычной страницы извлекает из базы данных название, описание и текст материала, и записывает их в переменные $title, $meta_d, $meta_k, $content и др. Эти данные потом передаются в шаблон дизайна (под каждый компонент можно создавать свой шаблон дизайна) и выводятся пользователю в виде HTML-страницы. Например, компонент каталога, который можно создать в будущем, выполнял бы почти то же самое, но с данными про товары — а там своя специфика, другие поля в таблице, итд. По-этому для каждого функционального раздела сайта стоит создавать отдельный компонент. В схеме MVC (Model-View-Controller) компонент выполняет роль модели.

Создаём в папке «com» файл «page.php». Содержимое файла следущее:

run($query);
$db->row();
// ПЕРЕМЕННЫЕ КОМПОНЕНТА
$ >data[page_id];
$alias = $db->data[page_alias];
$title = $db->data[page_title];
$h1 = $db->data[page_h1];
$meta_d = $db->data[page_meta_d];
$meta_k = $db->data[page_meta_k];
$s_desc = $db->data[page_s_desc];
$component = $db->data[page_content];
// ЕСЛИ СТРАНИЦЫ НЕ СУЩЕСТВУЕТ
if (!$id) <
header(«HTTP/1.1 404 Not Found»);
$component = «ОШИБКА 404! Данной страницы не существует»;
>
$db->stop();

5. Создаём компонент вывода главной страницы

Главная страница у нас в базе данных хранится под псевдонимом «home», и пока по своей структуре не отличается от обычных страниц сайта — это просто статья. Тем не менее создадим для неё отдельный компонент — на перспективу, так сказать.

Содержимое компонента «home.php» в папке «com» почти совпадает с содержимым компонента обычной страницы, за исключением строки запроса к базе и названия компонента. Строка запроса теперь выглядит так:

$query = «SELECT * FROM wx_pages WHERE page_alias=’home’ LIMIT 1»;

6. Создаём шаблон дизайна всего сайта

В корне сайта создаём файл template.php. По сути это обычный макет web-дизайна в формате HTML+CSS, только с PHP переменными в нужных местах. Между тегами title вставочка , в центральной колонке сайта вставочка и так по всему шаблону расставляем нужные переменные, которые объявлены в компонентах.

В корневой папке также должны быть папки «css» и «images» для элементов дизайна. В файле /css/style.css — можно настроить стили по своему усмотрению.

Читать еще:  Как делать одностраничные сайты для продажи

7. Чистые ссылки и файл .htaccess

Для создания чистых ссылок я использую mod_rewrite с прямыми указаниями правил для каждого компонента отдельно, так как разбор адресной строки средствами самого контроллера считаю излишним функционалом. Содержимое .htaccess на данном этапе такое:

RewriteEngine On
RewriteBase /

# ЗАПРЕЩЁННЫЕ ФАЙЛЫ
RewriteRule .htaccess — [F]
RewriteRule template.php — [F]

# ПРАВИЛА mod_rewrite
RewriteRule page/([a-z0-9_-]+)([/]<0,1>).htm$ index.php?option=page&alias=$1 [L]

В будущем мы будем дописывать правила для компонентов поиска, каталога, блога статей и т.д. Смысл один: преобразовать ссылки вида «mysite.com/index.php?option=pages&alias=about» в ссылку вида «mysite.com/pages/about.htm» — смотрится довольно красиво. Старайтесь в разработке избегать массива $_GET в целях безопасности и не надеяться на него. Целесообразно хранить в нём только параметры для главного контроллера (переменная $option) и для компонента (переменная $alias).

Также в каждой папке сайта «на всякий случай» создайте пустой файл index.html — это нужно для того, чтобы при обращении к каталогу через адресную строку ничего не отображалось.

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Как можно создать уникальный шаблон для своего сайта

Сегодня не только модно, но порой и просто необходимо иметь свой сайт в сети для привлечения большей аудитории к товарам или услугам, для успешного ведения бизнеса и поиска новых партнеров. Каждый, кто хоть раз задумывался о создании подобного веб-ресурса, несомненно, мечтает о самом лучшем, привлекательном и неповторимом его оформлении. Если вы относитесь к числу таких людей и безудержно желаете создать сайт для себя, бизнеса, компании или просто надоело старое оформление страниц, то наверняка задавались вопросом «Как выбрать шаблон для сайта или сделать его самостоятельно?».

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

Если же нет желания приобретать один из предложенных вариантов или просто не нашли один, идеально подходящий, то оптимальной альтернативой будет скачать несколько бесплатных и сделать «примерку» каждого из них.

Советы по выбору идеального шаблона

Выбирая из всего многообразия макетов, прислушайтесь к советам профессионалов, которые помогут сделать вам правильный выбор:

  • выбирайте привлекательные и профессионально выполненные шаблоны, при этом помните, что картинка должна соответствовать информационной составляющей сайта;
  • для того чтобы сайт успешно можно было продвигать в сети рассматривайте варианты только из SEO-оптимизированных экземпляров;
  • убедитесь, что на выбранном макете при необходимости можно будет поместить свой логотип и сделать это без лишних затруднений, а оформление страницы будет с ним сочетаться;
  • если в дальнейшем вы планируете монетизировать сайт, выбирайте макет с предусмотренным местом и соответствующей поддержкой рекламных баннеров на боковой панели;
  • выберите сначала несколько шаблонов максимально подходящих вам по оформлению и функциональности. Сделать выбор из нескольких наиболее подходящих макетов будет легче, чем из тысяч, представленных в сети;
Читать еще:  Статистика посещений чужого сайта

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

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

Конечно же, встретить два одинаковых платных образца на просторах сети труднее, но все же такая вероятность существует, а о бесплатных и говорить не приходится.

Два пути чтобы сделать шаблон уникальным

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

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

В том или ином случае потребуются определенные знания и умения:

  • разбираться в языке разметки документов HTML;
  • знать CSS (язык описания внешнего вида документов);
  • иметь представление о языке программирования PHP;
  • уметь работать с CMS. Это может быть WordPress, Joomla, Drupal или Blogger.

Более того, придется загрузить и установить на своем компьютере несколько инструментов для создания дизайна и настройки будущего шаблона. Один из:

  • конструкторов шаблонов Artisteer, TemplateToaster, WebSite X5 – для создания структуры и редактирования шаблона;
  • графических редакторов Photoshop, CorelDraw, Paint – для создания оформления страниц;
  • текстовых редакторов Notepad++, WordPad, AkelPad – для написания или редактирования кода.

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

Вместо заключения

Если же вы не уверены, что сможете создать конкурентоспособный шаблон, отвечающий всем актуальным требованиям или не готовы к проведению такой кропотливой работы – не расстраивайтесь. Специалисты нашей веб-студии всегда рады помочь и разработать уникальный, рассчитанный только для вашего сайта шаблон. Сделают они это профессионально, качественно, быстро и совсем недорого, после чего помогут загрузить макет на сайт и настроить его.

  • создать современный, уникальный дизайн;
  • используя новейшие технологии, сделать макет с удобными панелями навигации;
  • для удобного просмотра сайта на любом мобильном устройстве создать адаптировать интерфейс;
  • для корректного отображения во всех популярных интернет-браузерах выполнить кроссбраузерную верстку;
  • SEO-оптимизировать сайт для более эффективного его продвижения.

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

Ссылка на основную публикацию
Adblock
detector