Введение

Я не знал, что написать в этой части, поэтому начну издалека. Тут будет много воды, наверное, основной тезис будет внизу. Скорее всего.

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

Многие зовут себя «вебмастерами», поддаваясь веянию моды в рунете. Еще бы, быть мастером приятно в любом деле. Что вы умеете? Установить WP, поставив пару плагинов и настроив автопостинг? Скачать красивую тему из паблика, установить нуленый DLE и сказать что у вас готов ваш «первый СДЛ»? Пользоваться софтом для спама, прочтя пару мануалов?

Что вы знаете о верстке, кроме того, что она бывает табличная, блочная, ну и, разумеется, волшебное слово «валидная» ? А о php, дополнениях к вашим любимым CMS, о js? Неужели никогда не хотелось разобраться хоть капельку во всем этом? Хотелось, но думали, что все это ужасно сложно? Вот, значит статья для вас. Сейчас мы сделаем первый шаг на пути к завоеванию настоящего звания «Веб-Мастер». Первый, но зато очень большой.

Я хотел сделать так, чтобы итоговым результатом этой статьи можно было бы реально пользоваться. Но я никак не мог подобрать тему – писать только о верстке или php бессмысленно, без опыта результатов не добиться. И я решил попробовать охватить несколько тем, просто чтобы вы почувствовали «вкус», заодно создав нечто полезное. Так и пришла в голову идея написать свою маленькую систему управления контентом.

Этот текст выше был написан еще вчера вечером. Чуть позднее я активно участвовал в дискуссии на тему самописных движков в этой теме. Совпало, реально

Нафига?

Во-первых, я сторонник хороших говносайтов. Во-вторых, я не люблю использовать большие CMS для простых задач, а WP так вообще громоздкий для сателлитов. В-третьих, когда что-то делаешь руками сам и знаешь как, что и где работает, ты знаешь также как, что и где добавить, чтобы было лучше и удобнее. В-четвертых, я чертовски хочу 1000$.

Да, есть различные маленькие удобные CMS, но лично мне проще сделать свое, чем разбирать чужое (до определенного момента, конечно). Программисты меня поймут.

Я там упомянул хорошие говносайты. Многие из вас называют такие сайты «полуСДЛ». Что мешает сделать сайт с человеческим контентом, полезный, на который будут попадать из поисковиков по низкочастотным запросам? На нем можно продавать дорого ссылки, размещать статьи, вешать Adsense. В случае каких-то проблем можно смело все снимать и требовать у Платонов их решения. Хватит унылого синонимайза, необдуманного копипаста, бессовестного скана! Долой ГС, вылетающие за три апа! Даешь копирайт и ручной перевод для создания хороших сайтов!

Это тоже было написано вчера, перед тем как создали эту тему, с которой я чертовски согласен. Еще одно совпадение.

Ставим цель

Итак, начальная тягомотина закончилась, теперь вода посодержательнее. В результате нижеописанных действий мы будем иметь на руках скрипт, позволяющий создавать простые сайты. Наша цель сейчас – сделать такой сайт. Шаблон возьмем общедоступный, контент возьмем из Википедии, картинки – из Яндекс.Картинок. Когда будете делать свой сайт, который будет классный и полезный – делайте все самостоятельно!

Определимся со структурой сайта. Почти ничего нового, почти все как обычно:



Все просто, похоже на WP шаблоны. У нас не будет никаких тегов, календарей и прочей ереси. Пока что обойдемся без дублирования контента.
Теперь о структуре самой CMS. Обойдемся без базы данных. Несмотря на то, что это чрезвычайно удобный инструмент, для наших микросайтов хватит и файлов, и это будет даже удобнее. Нам нужна будет простая админка, позволяющая добавлять страницы и новости. Каждая страница будет существовать физически, и содержать в себе (если надо) форматированный html текст и картинки, а также параметры, которые будут использованы для формирования заголовка (title) страниц, мета тегов и меню.

Как все будет работать?

Структура каждого файла будет такой:
• подключение шапки
• определение ссылок бокового меню
• содержание страницы
• подключение подвала

Поскольку установка мета тегов и заголовка страницы происходит в шапке шаблона, мы должны будем сделать их динамическими, в виде переменных, и задаваться эти переменные будут внутри страницы с контентом. Это рутина, но админка позволит делать все быстрее.
Определение ссылок в боковом меню будет происходить также – в зависимости от принадлежности открытой страницы к какому-то разделу, в боковом меню будут выводиться список ссылок на страницы этого раздела. Задавать это мы будем, опять же, в админке.

Вооружаемся.

Чтобы работать с php, сделаем самое элементарное – скачаем и установим Денвер – Джентельменский Набор Web Разработчика, Д.н.w.р. Это проект Дмитрия Котерова, известного php-гуру, написавшего несколько замечательных книг.

Пользоваться денвером чрезвычайно просто, не пугайтесь. Идем на denwer.ru, тыкаем кнопку скачать, заполняем мини-анкету, на почту приходит ссылка для скачивания. Скачиваем, запускаем установку. Работает, кстати, и на XP, и на Висте, и на Семерке.
После запуска появится черное терминальное окошко, в котором вам будет сообщаться о ходе процесса установки. Сразу же откроется окно браузера с информацией. Как только вы его закроете, установка будет продолжена.

Можете установить пакет на флешку, пожжете на комп. Мне удобнее была флешка, т.к. статью пишу с разных компьютеров, вы вполне можете оставить предложенный адрес C:\WebServers. Здесь беспокоиться совершенно не о чем. Далее будет создан виртуальный диск, обычно это диск Z, и будет предложено создать ярлыки на рабочем столе. По окончанию установки и запуска откройте браузер и наберите адрес http://localhost/ - увидите результат. Если будет ошибка – пишите, разберемся.

Следующим инструментом будет плагин к FireFox-у – FireBug. Плагин можно взять на http://getfirebug.com/

Тут отступление и еще больше воды на тему холиваров. Я понимаю, браузеры бывают разные, кому то нравится один, кому то другой. Мы люди цивилизованные и за личный выбор каждого калечить и разжигать ненависть не будем. Однако данный плагин идеально подходит для верстальщиков и вообще веб-мастеров, т.к. позволяет наглядно рассмотреть html код. В Опере и IE8 есть аналоги, но менее шустрые и с немного меньшим набором возможностей. В общем, если религия не позволяет устанавливать вам FireFox с этим плагином, ничего страшного, пользуйтесь своими инструментами.

Начинаем работать.

В выборе шаблона я париться не буду и просто возьму вот этот - http://www.freecsstemplates.org/preview/communication Он подходит под нашу структуру, довольно свободен и легок. Скачиваем, извлекаем содержимое архива по адресу

Z:\home\localhost\www\cms033\

Все изменения будут происходить также и по адресу C:\WebServers. Если хотите потом сверять с моими файлами, то используйте такой же адрес. 033 – типа маленькая cms, как маленькая бутылка пива))

Удаляем license.txt (не из плохих побуждений, мы же просто учимся), в этой папке теперь имеем:
• папку Images
• главную страницу - файл index.html
• файл стилей style.css

Открываем браузер, пишем http://localhost/cms033/index.html
Перед нами должна открыться скачанная нами страница. Порежем ее в соответствии с нашей структурой. Чтобы быстрее определить, какой код куда будет относиться, воспользуемся FireBug-ом. Нажимаем кнопку F12, снизу открывается панель

В верхней части панели жмите кнопочку со стрелкой и поводите по странице, выделяя блоки. Думаю, все понятно интуитивно. Нижняя часть разделена на две части – слева сам код, и назначенные выбранному элементу стили справа. Сверхудобно то, что все это можно редактировать и наблюдать изменения прямо на ходу. Попробуйте, например, выделить в боковом меню заголовок и поменять ему стили. Заметьте, что помимо изменения, вы можете также добавлять и на время выключать какие то css-свойства. Для добавления дважды щелкните на свободном месте в правой колонке, и наберите там font-weight, свойство, позволяющее сделать шрифт жирным. На картинке можно увидеть, что я поменял цвет, стиль и отступ у заголовка h2. Если вы нажмете F5, обновив страницу браузера, все изменения исчезнут.

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

Выделите каждый из этих блоков и посмотрите на правую часть панели, в стили. Вы увидите свойство float. У сайдбара оно имеет значение left, а у контента – right. Прямо здесь же измените эти значения – у сайдбара поставьте right, а у контента – left (кстати, заметили как удобно автоматически подбираются значения свойств после введения первых букв?). Два блока поменялись местами, нам не пришлось возиться и копировать с одного места в другое. Чтобы изменения вступили в силу, их нужно внести не в плагине, а файле стилей.
Откройте файл styles.css блокноте (тут, кстати, я пользуюсь Notepad++, великолепный блокнот), и через поиск найдите описание свойств для блоков content и sidebar. Измените значение свойств float и там и там, сохраните и обновите страницу. Блоки должны быть поменяны.

Теперь давайте выделим код, который уйдет в шапку шаблона. Туда должен уйти весь html код, не относящийся к постам. Для этого выделим первый же пост и попробуем найти строчку, которой будет заканчиваться наша шапка:


Начиная с кода <div class=”post”> идет контент. Все что выше – нужно отправить в шаблон. Теперь открываем исходный код, ищем первую строчку <div class=”post”>, и не включая ее, а все что выше – вырезаем. Далее создаем в папке файл “_header.php”, и вставляем все это туда. С подчеркивания называем файл потому, что так он будет в начале списка и с ним удобно будет работать. Мне так захотелось )) В итоге в файле шапки будет код, начинающийся со строчки

и заканчивающийся строчкой

«Полдела сделано!» подумали вы. Хрен там, мы только начали. По аналогии с шапкой создадим файл подвала “_footer.php”. В него поместим код, расположенный сразу после последнего поста – этот код будет начинаться со строчки

и заканчиваться


Да, сейчас мы засунули в подвал и боковую колонку. На самом деле файл футера в шаблоне не обязательно должен быть горизонтальной плашкой с копирайтом. Он должен содержать часть кода, которая повторяется для каждой страницы. С меню мы разберемся позже.
Теперь мы имеем три файла – обрубленный index.html, _header.php с шапкой и _footer.php с подавлом. Естественно, нужно их как то подключить. Начинаем воевать с PHP ))
Для того, чтобы было чуть проще, отредактируйте index.html, оставив в нем только один пост – сейчас там их три. Для проверки - код, который должен там остаться, начинается с

и заканчивается

Пересохраните файл, изменив расширение на “.php”. Теперь index.html можно удалить, а index.php открыть для продолжения работы. Знакомимся с include. Include с англ. включать, содержать в себе, охватывать. Проще говоря, мы вставляем в наш index.php код, содержащийся в других файлах. В начале файла index.php пишем код:

В конце пишем

Теперь открываем браузер, пишем http://localhost/cms033/ и смотрим результат. Отображается шаблон? Значит все сделали правильно и ваши первые строки в php сработали без ошибок Если все же умудрились напортачить – пишите, разберемся.

Начальное наполнение

Чтобы сайт не был совсем пустым, давайте его наполним. Там в заголовке есть иконка телефона, значит, сделаем сайт про телефоны. С помощью FireBug-а или вручную по коду можете найти и изменить заголовок в шапке и пункты меню. Затем нужно написать что то на главной – для этого пока вручную отредактируем index.php – не напутайте с тегами там, просто замените английский текст русским. Затем переходим к боковому меню – оно, если не забыли, находится у нас сейчас в файле _footer.php. Удалим все колонки, оставив всего одну с начальными разделами. Попробуйте самостоятельно, если у вас что-то не получится – выкладываю первый чекпойнт

comphost .info/check1.zip

Сайт - это мой ГС, сделанный по такому же подобию, как я сейчас описывваю, только без админки. Сравните, запустите, посмотрите. Он уже с первым контентом и полностью со всем тем, что мы сделали.
Заметьте, я там изменил title, meta теги, изменил кодировку с UTF-8 (международная) на windows-1251 (кириллица). Спустя пару часов, в процессе написания статьи, появится больше контента на сайте (ха, пару часов, знал бы я *ля сколько я буду ее писать, наивный). Пока понаблюдайте за меню, отметьте себе, что я удалил ссылки на комментарии и автора под названием. Также обратите внимание на подвал - я оставил ссылку на сайт, где взял дизайн, но обрамил ее в noindex-nofollow. Если все еще не знаете, как это делается - посмотрите в коде.

Сага об админке, часть первая

Я уже ненавижу WP. Главную страницу будем использовать просто для анонсирования новых страниц. Конечно, править все в файле руками не интересно. Нужно сделать так, чтобы в index.php загружались новости, которые мы будем писать в админке.
Также в админке мы будем создавать новые страницы, и назначать их определенным разделам. И конечно же позаботиться о том, чтобы никто кроме нас не смог попасть туда. Я не претендую на звание php-мастера, сделано будет, наверное, как попало, но для первого раза нам сойдет )
Итак, вынесем новости в отдельный файл "_news.php", а в index.php пишем нужный include, в итоге его содержимое сейчас:


Теперь создаем файл _admin.php и пробуем сделать возможность добавления новости. Не буду разжевывать все подряд, не укладываюсь по времени, освещу лишь основные моменты:
• нам нужен заголовок новости
• поле для ввода текста новости
• кнопка сохранения
Логика такова – при нажатии на кнопку «сохранить» форма передает параметр savenews. Админка при загрузке обрабатывает строку параметров, если встречает его – записывает в файл _news.php введенные данные и html-теги, соответствующие заголовку и тексту новости. После сохранения в админку загружается текст новостей, чтобы проверить результат. Выкладываю второй чекпойнт с зачатками админки.

comphost . info/check2.zip

Заходим по адресу http://localhost/cms033/_admin.php и пробуем написать новость, а потом проверить ее на самом сайте. Работает? Круто же.
Стоит отметить, что теперь html-код новостей получается слипшийся и его неудобно читать. Это можно исправить при желании. Код немного прокомментирован, кстати.
Идем дальше. Вручную создадим сейчас внутреннюю страницу и разберемся с заголовком, мета тегами и меню. Страница у нас будет немного отличаться от новости по структуре – так же заголовок, дата добавления, текст, плюс опционально картинка

Копируем index.php и вместо среднего include-а вставляем текст одной новости и редактируем его. Я вставлю текст из статьи Википедии ( http://ru.wikipedia.org/wiki/телефоны ), это будет страница про неэлектрические телефоны. Сохраню ее под именем neelectr.php и открою по адресу http://localhost/cms033/neelectr.php
Все работает. Теперь нужно установить заголовок и мета теги. Как это сделать, ведь шапка подключается до того, как мы пишем контент? Опять обратимся к php.
В месте, где подключается заголовок, вместо самого заголовка напишем:


Т.е. вместо заголовка мы написали php-переменную. Эту переменную мы и будем задавать в каждом из файлов. Заходим в index.php, пишем в начале:



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


Код типа if (!isset($myTitle)) проверяет, устанавливали ли мы этой переменной какое-то значение, если нет – ставим по умолчанию.

Вернемся к нашим баранам, то бишь неэлектрическим телефонам. Пропишем в начале страницы нужные параметры:

Обновляем страницу http://localhost/cms033/neelectr.php, смотрим мета теги и заголовок. Все по плану? Отлично. Нет? Задаем вопросы.

Точно также создадим вторую страницу про электрические телефоны и поправим навигацию. Чекпойнт номер 3, сверяемся

comphost .info/check3.zip

Теперь о грустном. Я устал писать, вы запарились читать, и вообще все это видится мне тоскливым и бесполезным. Но, назвался груздем, вали в корзину, что называется… Смотрите в чем подстава – когда сайт находится на хостинге, корневая папка “/” для php чаще всего та, где располагается весь набор файлов ваших. В денвере же корневой папкой выступает папка www, а мы уже находимся в /www/cms033/. Все бы ничего, но нам нужно прописать абсолютные пути, чтобы файлы статей можно было бы размещать в подпапках, а файлы шаблона и стили подгружались бы с одного и того же места. Сейчас у нас прописаны относительные пути, т.е. файл стилей, шапка и подвал грузятся с той же папки, где находится файл, в котором они подключаются. Если мы с вами захотим создать подпапку /articles/ и в ней создавать таким же образом файлы статей, то нам придется менять относительный путь и писать не <? include '_footer.php'; ?>, а <? include './_footer.php'; ?>. Точка и слэш означают, что мы обращаемся к файлу, который находится на уровень выше.

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

Сага об админке, часть вторая

Итак, создадим админку номер два для добавления страниц. Берем первую, сохраняем как _addpage.php и приступаем к редактированию. .....Уже сил нет писать эту ересь делаю все тяп-ляп, объясняю мало....

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

Чекпойнт 4, смотрим.

comphost .info/check4.zip

Обратите внимание в админке есть поле TITLE. Его можно сделать таким же как и заголовок статьи, нажав на соответствующий текст рядом. Сделано это с помощью js, это несложно:

Onclick – это событие. Оно происходит при нажатии на этот элемент, в данном случае A. document.getElementById – ищем элемент на странице с заданным id. В данном случае мы ищем на странице поле с id=”titleinput” и записываем туда то же самое, что и в поле с id=”zaginput”. Но не спешите изучать JS ) лучше возьмитесь за js-фреймворки типа jQuery и ему подобные. Прогресс, знаете ли.
Можете заметить что я создал страницы Радиотелефон и Сотовый телефон, поправив также навигацию в верхнем меню. Страницу с контактами создайте сами, посмотрите, это несложно.

Менюшка

Так, ну а теперь давайте о меню. Для начала достанем его из футера и запишем в отдельный файл _menu.php, который include-ом подключим в том же футере. Все останется на своих местах, все ок, просто нам будет чуть удобнее работать.
Сейчас уже можно щелкать по всем ссылкам, но удручает то, что правое меню всегда одинаковое, да? Нужно сделать так, чтобы его содержимое менялось в зависимости от того, на какой мы странице сейчас. Для этого введем у страниц по аналогии с переменными $myTitle еще и $myMenu, которая будет означать, к какому разделу страница относится. Значение будет цифрой.
Объясняю на белочках: представьте что радиотелефоны – это раздел номер 1, сотовые – раздел номер 2, контакты – раздел номер 3. Когда мы в 1 или 2 «разделе», справа должен появиться список марок радиотелефонов либо список статей про сотовые телефоны. Для этого установим (пока руками) в файлах radiotel.php и sotovyy.php значение переменной $myMenu.
Затем редактируем “_menu.php”. Здесь мы просто пишем условие, в котором проверяем, какое значение сейчас у переменной $myTitle, и в зависимости от этого выводим список ссылок на соответствующие страницы.

Тут опять замечание. Я хотел изначально все сделать классно, чтобы можно было меню наполнять из админки. Да, себе я так сделаю через недельку-другую, но на конкурс не успеваю, к сожалению. По желанию народа потом дополню, если не обленюсь в конец.

Также добавим в нашу вторую админку поле для установления значения $myMenu и сохраним все. В принципе, все готово. Чекпойнт 5.

comphost .info/check5.zip

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

Чего мы добились? Я надеюсь, если вы ничего в этом не понимаете, то вы не просто скачали пятый чекпойнт, залили на хостинг и запустили посмотреть результат. Уделите время, прочитайте, возможно, вас заинтересует что-то из веб-разработки, это не только работа, зачастую это же творчество!

Что мы упустили? Кучу всего. Админка не защищена паролем – хотя изначально планировал. Меню набивать надо руками – хотя тоже планировал. Каких то мелочей я упустил миллион, и наверняка еще упустил что-то важное. Но я показал сам процесс, попытался объяснить – еще больше жаль что не хватило терпения расписать все подробнее.

Самостоятельно вы можете добавить сюда код сапы – в футер и в меню, например. Тот большой кусок кода поместите в файл шапки _header.php. Мне даже лень проверять, будет ли это все работать на хостинге – но я сделаю, чтобы дать ссылку тем, кто не стал читать и хочет просто посмотреть. Одно только – я отключил там возможность сохранять файлы, чтобы кто нибудь не нашалил потому что проверки в админке на валидность данных тоже не сделано, а это чревато.


Для тех, кто хочет просто посмотреть:
Получившийся сайт - comphost .info/check5/
Добавление новости - comphost .info/check5/_admin.php
Добавление страницы - comphost .info/check5/_addpage.php (и там и там функционал отключил)

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

В общем, вот.

Покупайте ссылки, а не арендуйте – мега-опция для естественного продвижения!
Почему много денег? Потому что Главмед! Лей трафик и живи без бед!


p.s. пока так, сил перечитывать нет, возможно поправлю текст еще к ночи немного, но суть уже меняться не будет. Извините, что так много ))

Сообщение отредактировал bitrixoid - 13.1.2010, 20:48