PlaceboCMS — моя собственная идея, рассуждение на тему того, как можно было бы создать CMS без БД, без PHP, но с возможностью создать AJAX и динамические странички.
Этап 0. Создание структуры папок и файлов.
Ибо я отказался от PHP, MySQL, и вообще веб-сервера как такового, нужно продумать, как хорошо организовать систему хранения данных. Я сделал вот так:
public_html — основная папка (ну или www, кому как удобнее) |→ pages = хранит html файлы страниц style = тут стилевое оформление |→ style.css = основной css файл |→ img = картинки для CSS |→ templ = два файла html расширения |→ web.html — шаблон для WEB (расположение эл-тов) |→ pda.html — шаблон для мобильных устройств java — хранилище js функций (захотелось назвать java) |→ my.js — функции JS images |→ Тут будут картинки для всех страниц, которые используются Вот так организовал структуру папок и файлов.
Этап 1. Создание шаблона.
За основу был взят простой HTML5 шаблон статической страницы. т.к. дизайн я делаю адаптивный (для всех экранов), то надо сделать обработку на JS, поэтому первоначально пишу функциональную примочку для работы с размером экрана. Скажу сразу — IE я не учитываю как браузер вообще, так как все мои проекты ориентированы на Linux, где его и в помине нет.
Этап 2. Создание шаблона второго уровня.
Сейчас поясню. Есть шаблн первого уровня — это шаблон определяющий поведение всего сайта в целом, определяет, поддерживает ли браузер AJAX, и обрабатывает ли он JS в реальном времени. Пример: Opera Mini обрабатывает JS на своем сервере и отдает пользователю отрендеренную страничку, в которой JS как такового и нет вовсе. В новых версиях примерно так же. Именно для этого наш JS должен уметь работать и с таким браузером тоже. В нашем случае — шаблон второго уровня задает поведение самих страничек (их загрузки в AJAX либо же их открытия посредством обычных URL).
Этап 3. Создание шаблона одной страницы.
Тут не то, чтобы сложно, скорее надо хорошо продумать то, как будет страница выглядеть в браузере и в каком виде ее лучше хранить на сервере. Для начала я взял простой блок текста на HTML и сохранил его как ‘index.html’. В этом случае адрес сайта имеет вид: skanersoft.ru/index.html
JS парсит адрес сайта и видит, что грузить надо index.html, что и делает. При этом если браузер не поддерживает динамическую обработку JS или в нем нет AJAX то ссылки имеют обычный вид: Имя ссылки, если все работает, то ссылка имеет вид: Имя ссылки
В самом шаблоке страницы ссылки имеют обычный вид.
Это были этапы планирования. Теперь переходим к реализации.
Этап 1. Рвём на части HTML шаблон!
Создавать с нуля шаблон (оформление) мне не очень улыбается… посему я решил воспользоваться готовым решением. Скачал в интернетах несложный шаблон. Мне сейчас оттуда нужны CSS стили, картинки, чтобы с нуля не рисовать, и каркас. Нашел очень хороший шаблон, вот такой:
Сойдет! Идем дальше. Этот шаблон я буду использовать как WEB тему для сайта, значит его нужно запихать в файл style/templ/web.html и убрать из него все лишнее.
Я убрал из шаблона все лишнее, оставив только то, что было между …, Но потерялись стили CSS! Решение пришло простое, просто динамически подгружать стили, когда потребуется. Придем к этому потом. Теперь нужно отделить меню от контента. Я подумал, что лучше хранить меню в js файле в виде строки, хотя был вариант использовать AJAX для загрузки, а CSS для позиционирования, либо же iframe, но решил оставить в js.
В итоге от шаблона осталось только следующее:
<div class="content"> <div id="header"> <div class="title"> <h1 id="mySite">Заголовок</h1> <h2 id="mySlogan">Слоган</h2> </div> </div> <div id="main"> <div class="right_side" id="myData"> Текст страницы </div> <div class="left_side"> <div class="nav"> <ul id="myMenu"> </ul> </div> <br /> </div> </div> <div id="footer"> <div class="padding"> (C) 2015 - SkanerSoft </div> </div> </div> Это и есть весь шаблон WEB версии сайта.
Так же подправил CSS стили, убрав оттуда все лишние элементы оставив только самые нужные.
Теперь немного о структуре (не HTML) шаблона. Все данные я буду присваивать посредством изменения innerHTML объекта, отсюда я присвоил следующие id:
mySite — заголовк сайта
mySlogan — слоган сайта
myData — основной текст страницы
Пока всё. Остальное решу потом.
Этап 2. Создаем основной шаблон.
Так как я не использую PHP, то тут надо хорошо подумать над тем, как удет выглядеть сайт извне. Я не ориентировался на поисковики, проект внутренний, поэтому сделаю простейший шаблон html:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link id="myCss" type="text/css" rel="stylesheet" href=""> <script id="myScript" type="text/javascript" src="java/my.js"></script> <title id="myTitle"></title> </head> <body id="myBody" onload="placebo_start();"></body> </html> И опять же:
myCss — файл стиля для подключения
myScript — скрипт для подключения функций
myTitle — тот заголовок, что видно в окне браузера
myBody — то хорошее место, куда будем грузить наш шаблон
Файл получился более, чем миниатюрный, однако от этого не менее функциональный!
Этап 3. my.js
Вот это самая бяка, с точки зрения времязатратности. Я на написание этого файла потратил почти 5 часов!
Список функций, которые я написал для дальнейшей работы:
$(id) — получение DOM объекта по id
$$(id) — получение DOM объекта по name
hScreen() — высота экрана юзера
wScreen() — ширина
showhide() — скрывает/открывает объект
hide() – скрывает объект
show() — открывает
startajax() вернет объект для работы с AJAX потоком
setCookie() — устанавливает cookie запись в браузер
getCookie() — соответственно, вернет их
i() — аналог ParseInt
fDown() — прижмет объект в низ экрана (position: fixed;)
fRight() — прижмет к правому краю
Обе функции не чувствительны к скроллингу
goURLA() — переходит по ссылке в асинхронном режиме
reLoad() — переходит по ссылке в асинхронном режиме, только если пользователь нажмет на навигационные кнопки (назад/вперед)
loadTempl() — функция загрузки шаблона
getPageName() — возвращает название файла страницы из URL адреса
allLinkToClick() — функция пробегает по всем ссылкам и делает асинхронными, если поддерживает браузер, иначе не пробегает.
placebo_start() — та самая функция в onload тела документа (объект «body»). Она подгружает шаблон, стили, и пробегает по ссылкам при возможности.
Вот и все. Расписывать сами функции не буду, при желании можно заглянуть в исходник.
Распишу только одну функцию: placebo_start(); Комментарии над строками!
function placebo_start() { // если открыта страница по ссылке в браузере, получаем название страницы, которую надо подгрузить page.name= getPageName(document.location.href); // добавляем возможность асинхронно передвигаться по исптории перемещения window.addEventListener('popstate', function() { reLoad(getPageName(document.location.href)); }); // проверяем размер экрана, если больше 700px, считаем, что зашел с компа или планшета, короче экран широкий, выводим WEB шаблон if (wScreen() > 700) { // подгружаем стиль $('myCss').href= site.domain+'style/templ/web/style.css'; // подгружаем шаблон, передаем название папки шаблона и функцию // которая запустится как только шаблон будет полностью загружен loadTempl('web', function() { // добавляем меню в наш шаблон $('myMenu').innerHTML= menu.web; // асинхронно грузим ту страницу, которую получили, когда сайт был открыт в браузере // опять же, передаем функцию, как только страница будет загружена! goURLA(page.name, function() { // переключаем все ссылки в асинхронный режим allLinkToClick(); // отрисовываем юзеру название сайта $('mySite').innerHTML= site.name; // отрисовываем слоган $('mySlogan').innerHTML= site.slogan; }); }); } // если мы не с компа, грузим шаблон PDA, который я не сделал else { loadTempl('pda'); } } Вот и все! Такова функция. Работает в Chrome и Opera и Mozilla новых версий, на старых не тестировал, и тем более не тестировал на IE, ибо на него вообще пофигу. Будет у кого желание, проверьте! Ссылка на демо в конце статьи.
Теперь про переменные, которые я описал в JS:
showhide_arr — массив состояний для объектов (функции show/hide/showhide)
page — массив данных о текущей странице,
site — массив данных с инфой о сайте
menu — массив нашего меню, который рендерится юзеру при загрузке шаблона
Этап 4. Обработка ссылое. (ёпёпёп)
Это отдельный этап работы. Я ведь польностью отказался от сервеной части работы, значит все делаем через JS. Функция для перехода по ссылке:
function goURLA(pageName, func) { var ajax= startajax(); // создаем объект для работы с AJAX ajax.open('GET', site.domain+'pages/'+pageName+'.html'); // посылаем запрос бедному серверу, который даже не в курсе, что творится ajax.onreadystatechange = function () { if(ajax.readyState == 4) // если загрузка окончена { if (ajax.status != 404) // и если это не 404 ответ от сервера { $('myData').innerHTML= ajax.responseText; // рисуем юзеру страницу $('myTitle').innerHTML= $('myH2').innerHTML; // рисуем браузера зуголовок window.history.pushState(null, null, site.domain+'index.html?' +pageName); // добавляем запись в историю браузера, что мы перешли на новую страницу и заодно меняем строку адреса } else { $('myData').innerHTML= '<div id="myError">Ошибка загрузки! Код ошибки: 404</div>'; } // на тот случай, если сервер не нашел страницу, которую нам надо if (func) func(); // если была функция, выполняем ее } else { $('myData').innerHTML= '<div id="myError">Ошибка загрузки! Код ошибки: 500</div'; } // на тот случай, если сервер нас обломил } ajax.send(null); / посылаем запрос } Этап 5. Нелокальный Chrome от Google.
Тут чисто о том, что я заметил. Chrome, а точнее его Linux воплощение — Chromium, не умеет работать в асинхроне с локальными файлами. Это на будущее, для тех, кто соберется отлаживать AJAX без сервера. Тут либо использовать Mozilla, который с этим прекрасно справляется, либо завести сервер. Я завел сервер LAMP, чтобы убить сразу двух зайцев — потестить в Chrome и Mozilla, а заодно обкатать разработку на Apache. И мой вердикт — замечательно! Конечно, работы еще много, но результат уже есть!
Этап 6. Файлы страниц.
Тут все до одури просто:
<h2 id="myH2">Заголовок страницы</h2> <p id="myHTML"> Основной текст страницы! </p> <p id="myFooter"> Какая-еибудь подпись под текстом </p> Это файл страницы. Все просто и смешно!
Этап 7. Внешний вид
Вот так выглядит сайт в режиме отладки в Chrome. Никаких ошибок и ничего прочего! Все прекрасно работает! Странички грузятся, адрес сайта меняется, наполняй сайт страницами и радуйся!
Вывод.
Сей проект я затеял для публикации небольших статей и демо проектов от имени своего канала на YouTube, потому что прикладывать исходник к видео хорошо, а иметь живой пример — еще лучше! Кроме всего прочего, сайт на этой вот PlaceboCMS (название я уже присвоил) никак не грузит сервер, вся работа ложится на клиент-браузер.
Заморачиваться с установкой каких-либо CMS мне тоже не очень хотелось, как и искать нормальный хостинг, где эти CMS бы запускались и не глючили, а там еще и настройка БД, дампы, ну их всех.
Создавать сайт при помощи html редактора и создания каждой страницы в отдельности тоже не для меня, а вдруг я захочу сменить дизайн? Править каждый раз все файлы? А если из будет больше 100? А если больше 1000?
Именно для этого и была создана такая вот небольшая псевдо CMS — PlaceboCMS.
Никоим образом не призываю делать так же, просто делюсь опытом, на тот случай, если кто-то захочет сделать что-либо подобное.
Время разработки от идеи до внедрения: ~7 часов =)
Итог сей басни есмь таков:
Плюсы:
+ не грузит сервер никак
+ работает очень быстро, ибо нет никаких БД
+ невозможно взломать
+ невозможно получить доступ к админке, так как ее нет =)
+ возможность смены дизайна
+ легкий перенос на любой сервер
+ не требует MySQL и PHP, вообще ничего не требует
+ маленький вес! Ну совсем маленький, 5kb всего.
+ расширяется в любую сторону, куда фантазия глянет
Минусы:
— Плохая индексируемость поисковиками, если не нулевая
— Необходимость лезть в файлы, чтобы что-то поправить
— Требуются минимальные знания HTML
Это только так, на вскидку, вообще и плюсов и минусов куда больше, зависит от ситуации, мне же для моего проекта в самый раз! В будущем будет допиливаться, наверное заведу серверную часть.
Пример работы: http://skanersoft.hol.es
Внимание! Может не запуститься в IE.
На мобильниках точно не попрет, так как пова не сделал мобильную версию.
И небольшая пометка для тех, кто начнет кричать «Это не CMS, че ты!!!», я прекрасно знаю что такое CMS, и что называть ЭТО CMS никоим образом не следует, но мне так захотелось, потому что со своей задачей эта программа справляется на отлично. Хотя утром этого проекта даже в замыслах не существовало… кто осилил прочесть всё — тот молодец! За исходниками, кому нужны, можно ВК написать: vk.com/i.skaner
ссылка на оригинал статьи http://habrahabr.ru/post/260551/
Добавить комментарий