| zloi_volk | Дата: Четверг, 16.05.2013, 08:49 | Сообщение # 1 |
|
S
Группа: Администраторы
Сообщений: 207
Награды: 2
Репутация: 6
Статус:  | Сервис онлайн-записочек очень прост, и эта простота дьявольски притягивает. После захода на сайт весь экран браузера становится пустым. Если нажать на пустом месте, то появится «клейкий листочек» - некий квадратик, в котором можно писать текст и затем его редактировать. Также, в углу есть маленький квадратик, нажимая на который можно менять цвет листочка. И есть крестик, которым удаляется записочка. Весь интерфейс выполнен с использованием AJAX, и страница при работе не перегружается. Рабочая поверхность, на которой находятся записочки, называется «доска» (board) и имеет уникальный идентификатор, что отображается в URL. Эту информацию я рассказал, потому что без нее сложно понять статью. Оптимальным вариантом будет, если перед прочтением следующих абзацев ты зайдешь на сайт и сам испробуешь функционал.
Возрождение старой методики
Вернемся к рассмотрению мега-старой методики, которая сейчас снова возрождается. Раньше все сайты были статическими - состояли из HTML-файлов и картинок. Это добро отдавалось браузеру полностью для отображения. Чтобы скопировать сайт с потрохами, нужно было лишь запустить программу, которая открывает все ссылки на сайте и сохраняет все, что отдает сервер. Но затем в мир Веба пришла динамика, и копирование сайта стало задачей чрезвычайно трудной. К примеру, форум с сообщениями. Даже если по нему пройдется бот и сохранит все страницы, – это ничего не даст. Практически весь функционал заброшен в скрипты, которые остаются для нас закрытыми. При этом, тенденции к упрощению функционала не наблюдается и, казалось бы, скопировать сайт стало невозможно. Но тут пришла эра Веб 2.0! Одним из ее аспектов является перенос большой части функционала с серверного уровня на браузерный, на JavaScript... – а ведь он отдается нам в открытом виде! Чем больше система будет работать на стороне браузера, тем меньше кода на сервере – то есть, скрытого от нас кода. Этот маленький участок кода, который можно и самому дописать, – мелочь по сравнению с той частью, что мы без проблем скопируем. Теория может показаться немного непонятной, но после практики все встанет на свои места.
Итак, в качестве примера мной был выбран сайт zapisochki.ru. Много функциональности в нем находится на стороне JavaScript, а на стороне сервера лишь выполняются несколько запросов по сохранению, обновлению и удалению клейких листочков. Если попытаться эмулировать эти запросы, то можно полностью скачать с сайта все остальное. Правда, сначала нужно понять, как работает приложение, какими командами обменивается серверная и клиентская часть, как генерируется первая страница и т.п. Пошагово пройдемся по всему процессу полного клонирования.
Инструменты
Чтобы разобраться с работой сайта, воспользуемся FireFox с установленными тремя плагинами:
Temper Data (https://addons.mozilla.org/en-US/firefox/addon/966) для просмотра, перехвата и изменения запросов;
Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) для отключения кеша браузера, для просмотра и удаления кукисов;
FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843) для отладки JavaScript и анализа запросов.
Также необходим Offline Browser для скачивания всего сайта (триальная версия есть на www.metaproducts.com/mp/Portable_Offline_Browser.htm или у нас на диске).
Этапы копирования
Копирование сайта «Записочки» состоит со следующих этапов:
Анализ и эмуляция идентификации;
Копирование страницы с записочками;
Анализ протокола обмена клиентской части с серверной;
Анализ генерации главной страницы;
Программинг серверной части.
В результате мы получим полностью рабочий сайт zapisochki.ru у себя на локальном сервере.
Анализ идентификации
Перед копированием разберемся с идентификацией юзера, ведь у каждого своя страница с клейкими листочками, и нужно знать, какому юзеру какие записочки отображать. Перед началом анализа я, с помощью плагина Web Developer, удалил все кукисы для чистоты эксперимента. Включив Temper Data, я загрузил zapisochki.ru, – на что сервер вернул код переадресации 302 на zapisochki.ru/много_цифр/, да и еще бросил кукисы с каким-то логином и паролем. Я попробовал удалить пришедшие кукисы и загрузил zapisochki.ru/много_цифр/. Даже без логина и пароля, что были в кукисах, страничка нормально отобразилась. Делаем вывод, что идентификация происходит именно по этих циферкам в URL, а логин и пароль требуются лишь для внутренних нужд сайта.
Теперь можно копировать сайт и реализовать идентификацию. Для этого я быстро создал на Денвере хост с многозначительным названием «z». Для эмуляции главной странички – набросал скрипт, который при заходе на сайт «z» будет проверять кукисы. Если они есть, то, исходя из них, юзер будет переброшен на ту доску, которая прописана у него в кукисах.
Таким образом, если в оригинале в кукисах хранятся логин и пароль, по которым уже показываются записочки, то мы немного все упростим и будем хранить идентификатор доски. Записочки будут привязаны к этому идентификатору. Да, это не совсем правильно со стороны безопасности, но нам главное получить рабочий сайт, а доводкой уже можно заниматься потом.
Итак, мы можем написать маленький скрипт, который будет эмулировать идентификацию, как указано выше. Этим скриптом мы эмулировали функциональность, связанную с идентификацией. Пора приступить к следующему этапу.
Offline Explorer в работе
Рассмотрим копирование функциональности самих листочков. Перейдем на сайт zapisochki.ru/много_цифр/, создадим несколько разных записок и попробуем скопировать HTML-страницу со всей обвязкой. Конечно, можно все это и вручную проделать, – смотреть, какие файлы загружаются вместе со страничкой, и потом их копировать по одному – но лучше воспользоваться инструментом для создания фейков, а именно Offline Browser. Запустим его и в качестве исходного URL зададим zapisochki.ru/много_цифр/. Пара кликов на Next – и сайт полностью сохранен. После этого воспользуемся функцией экспорта и сохраним результат. В каталоге экспорта появилась папка с названием zapisochki.ru, а в ней, в папке themes, – все нужные картинки, скрипты и пр. Также там есть папка «много_цифр», а в ней один файлик с названием default.htm.
Далее я скопировал в Денвер папки themes и «много_цифр», а default.htm переименовал на index.php. Если зайти в браузере на http://z/много_буковок/, то отобразится страничка с нашими закладками, правда, не все пока работает. Почему-то не двигаются закладки. Сейчас исправим…
FireBug vs. Offline Explorer
Откроем наш FireBug и активируем весь функционал, например, нажав на вкладке «Net». Поставим везде галочки и нажмем «Применить». Теперь, когда перейдем на вкладку «Console», там пишется что-то типа «ошибка с dragdrop». Тут нужно отлаживать JavaScript, смотреть, в чем проблема, но я воспользовался другой методикой, и она сработала! Я открыл скачанный default.htm и в поиске ввел «dragdrop» - курсор переместился на строчку:
Код <script
src="../scriptaculous.js@load=effects,dragdrop"
type="text/javascript"></script>
Сразу в глаза бросается, что после scriptaculous.js идет «@», хотя в теории должен быть «?» (это же Get-запрос). Понятно, что так сделал Offline Browser, чтобы превратить динамически сайт в статический, но нам оно не нужно. Поэтому возвращаем все назад и заменяем «@» на «?», а файл scriptaculous.js@load=effects,dragdrop переименуем в изначальный - scriptaculous.js. После этого мы увидим, что во вкладе Net в FireBug появились две ошибки номер 404, то есть, двух файлов не было обнаружено, а именно:
effects.js
dragdrop.js
Достать их не проблема! Смотрим в FireBug пути, загружаем с сервера записочек и сохраняем к остальным скриптам. Обновимся и увидим, что все отобразилось, ошибок нет, да и к тому же, все функции с записочками стали нормально работать. Один из этапов выполнен.
Удаление лишнего
Красоту немного портит «разьехавшийся» дизайн – будем исправлять! Если нажать на «инспектора» в FireBug и навести на наше меню, то увидим, что это все одна таблица. Нам ее не жалко, заходим в исходник страницы и удаляем все между тегами <table>, да и сами теги также. После обновления наблюдаем идеальный минималистский дизайн.
Но в «Console» FireBug опять появились ошибки. На этот раз – в файле sticker.js. Также там возле ошибки указывается номер проблемной строки. Если перейти на нее, а потом удалить строку, то после обновления ошибки больше не будет. Вот так, иногда удаление бывает эффективнее создания.
Протокол обмена
Записочки двигаются, текст и цвет меняется, однако, все это не сохраняется. Давай разберемся в протоколе обмена, чтобы в будущем его эмулировать. Откроем наши записочки в FireBug с вкладкой Console. Будем пробовать записочки в действии. Нажмем на пустом месте – появляется пустая записка. Теперь введем любой текст и выставим цвет. Видим, что браузер послал запрос:
Код Post
board: 70012862175107245171625585615874
color: 1
id:
text: sometext
x: 123.1
y: 543.2
Причем, переменная board берется с начала нашего файла default.htm, где есть строчка:
var board = '70012862175107245171625585615874';
Это важно, ведь потом данную строчку будет генерировать скрипт. Также видим, что id передается пустым, а в результате сервер возвращает число. Если изменить какой-то параметр записочки (цвет, расположения или текст), то посылается такой же запрос, только id становится не пустым. Из этого можно сделать вывод, что, если id пустое, то сервер создает в базе новую запись о записочке и возвращает клиенту ее идентификатор. В противном случае изменяются в базе параметры той записочки, идентификатор которой передается. Посмотрев на default.htm, видим строку:
var saveURL = '../noteboard/save/';
– она определяет путь к файлу, что обрабатывает сохранение, но мы его изменим на:
var saveURL = '../save.php';
Написанием этого файла займемся позже. Теперь рассмотрим удаление. Если нажать на крестик, то в FireBug появится такой запрос:
POST /NoteBoard/delete/37094
Видим, что при удалении в запросе указывается id записочки. URL, по которому будет отослан запрос, так же, как и для сохранения хранится в default.htm:
var deleteURL = '../noteboard/delete/';
Хотя это несколько неудобно, ведь нужно настраивать .htaccess для таких запросов. Поэтому упростим алгоритм, изменив URL на:
var deleteURL = '../delete.php?';
С этого времени запросы всегда будут обращаться на файл delete.php, а id листочка –приходить как GET-параметр. Мы знаем протокол обмена между сервером и клиентом и уже можем написать сценарии save.php и delete.php, но оставим программерскую часть на потом. Ведь у нас осталась еще генерация первой страницы. То есть, когда уже страница загрузилась, дальше всю работу по прорисовке берет на себя JavaScript. Но первый раз страницу нужно генерировать. А именно – вверху, в переменную board, вписать тот идентификатор, по которому пришел юзер.
Формирование записочек
Если посмотреть в конец исходника default.htm, то можно увидеть следующее:
Код <form id="stickers">
<textarea id="s36734"
style="left:61px;top:32px;z-index:1">
текст записочки 1</textarea>
<textarea id="s36735"
style="left:90px;top:33px;z-index:0">
текст записочки 2</textarea>
</form>
Нам нужно взять из базы «записочки» данные и потом их выводить как textarea, где в стиле прописывать позицию в параметры left и top, в z-index писать цвет, а в id - идентификатор записочки. Также между тегами <textarea> надо вписать текст.
Программирование
Теперь мы знаем, как генерировать первую страницу, как обрабатывать AJAX-запросы от JavaScript и можем начать последний этап - программирование. В качестве языка был выбран PHP.
Нам требуется сделать четыре файла: .htaccess, index.php, save.php, delete.php. В .htaccess пропишем правила перенаправления всех несуществующих каталогов к index.php (это нужно, чтобы перехватить запросы на адреса со многими циферками). Файл .htaccess будет следующим:
Код RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?$1 [L,QSA]
Подумаем над проблемой хранения информации. Создадим в MySQL базу данных с одной простой таблицей и следующими полями, выбранными исходя из параметров записочки:
Код id - integer, для хранения идентификатора записочки
board - bigint, для хранения доски, в которой находится записочка
color - tinyint, для хранения цвета
x - float, для хранения x-координаты
y - float, для хранения y-координаты
text - varchar(255), для хранения текста
Файл save.php очень простой. Он лишь должен уметь принимать Post-данные и генерировать запрос на создание новой записочки:
Код INSERT INTO z SET `board`='$board', `text`='$text', `x`='$x', `y`='$y', `color`='$color'
– или запрос для обновления уже существующей:
UPDATE z SET `board`='$board', `text`='$text', `x`='$x', `y`='$y', `color`='$color' WHERE `id`='$id'
Ну а delete.php будет не сложнее:
DELETE FROM z WHERE id='$id' AND board='$board'
Файл index.php, как мы уже обсуждали, нужен для переадресации юзера по его кукисам на необходимую страничку. То есть, он будет «брать» идентификатор доски id, который хранится в кукисах, и выбирать с базы все соответствующие записочки, а дальше выводить тот файл, что мы получили от Offline Browser, и в нем между тегами <form> помещать записочки в формате, который мы определили выше.
Все у наших ног
На создание сайта у автора ушел, как минимум, месяц, а мы его скопировали за час. И таких сайтов сейчас очень много, так что простор для творчества огромен. Позволю себе напомнить, что вся информация представлена лишь для ознакомления. Если у тебя будут вопросы, то координаты найдешь на моем сайте http://tutamc.com. Всегда с радостью отвечу и помогу.
Вся информация, конечно же, представлена лишь в ознакомительных целях. Не нужно повторять глупости за автором :).
WWW
Адрес нашего подопытного: http://zapisochki.ru.
Все дополнения к FireFox: https://addons.mozilla.org.
|
| |
| |
