PlaceboCMS — моя собственная идея, рассуждение на тему того, как можно было бы создать CMS без БД, без PHP, но с возможностью создать AJAX и динамические странички.
Этап 0. Создание структуры папок и файлов.
Ибо я отказался от PHP, MySQL, и вообще веб-сервера как такового, нужно продумать, как хорошо организовать систему хранения данных. Я сделал вот так:
Вот так организовал структуру папок и файлов.
Этап 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.
В итоге от шаблона осталось только следующее:
Это и есть весь шаблон WEB версии сайта.
Так же подправил CSS стили, убрав оттуда все лишние элементы оставив только самые нужные.
Теперь немного о структуре (не HTML) шаблона. Все данные я буду присваивать посредством изменения innerHTML объекта, отсюда я присвоил следующие id:
mySite — заголовк сайта
mySlogan — слоган сайта
myData — основной текст страницы
Пока всё. Остальное решу потом.
Этап 2. Создаем основной шаблон.
Так как я не использую PHP, то тут надо хорошо подумать над тем, как удет выглядеть сайт извне. Я не ориентировался на поисковики, проект внутренний, поэтому сделаю простейший шаблон 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(); Комментарии над строками!
Вот и все! Такова функция. Работает в Chrome и Opera и Mozilla новых версий, на старых не тестировал, и тем более не тестировал на IE, ибо на него вообще пофигу. Будет у кого желание, проверьте! Ссылка на демо в конце статьи.
Теперь про переменные, которые я описал в JS:
showhide_arr — массив состояний для объектов (функции show/hide/showhide)
page — массив данных о текущей странице,
site — массив данных с инфой о сайте
menu — массив нашего меню, который рендерится юзеру при загрузке шаблона
Этап 4. Обработка ссылое. (ёпёпёп)
Это отдельный этап работы. Я ведь польностью отказался от сервеной части работы, значит все делаем через JS. Функция для перехода по ссылке:
Этап 5. Нелокальный Chrome от Google.
Тут чисто о том, что я заметил. Chrome, а точнее его Linux воплощение — Chromium, не умеет работать в асинхроне с локальными файлами. Это на будущее, для тех, кто соберется отлаживать AJAX без сервера. Тут либо использовать Mozilla, который с этим прекрасно справляется, либо завести сервер. Я завел сервер LAMP, чтобы убить сразу двух зайцев — потестить в Chrome и Mozilla, а заодно обкатать разработку на Apache. И мой вердикт — замечательно! Конечно, работы еще много, но результат уже есть!
Этап 6. Файлы страниц.
Тут все до одури просто:
Это файл страницы. Все просто и смешно!
Этап 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
Этап 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