Редактирование на странице и CSS

Редактирование HTML-элементов прямо на странице

Каждый фрагмент данных, извлекаемый нами из БД, заключается потом в HTML-тэг: текст мы помещаем внутри DIV, а картинку (путь к файлу изображения) внутри тэга IMG в атрибут SRC.

Для "прямого" редактирования того, что мы видим на сайте, нам надо решить последовательно четыре задачи:

1. На стороне Php назначить элементам однозначные идентификаторы (чтобы потом Javascript мог работать с ними на стороне клиента). Решаем сразу – через атрибут class: "_edit table id {field_name} {старый_класс}", то есть сохраняем класс, который был задуман дизайнером, отодвигая его в конец группы, а на первые четыре места ставим метку редактирования (_edit), наименование таблицы, номер id в таблице и наименование поля, которое будем править.

2. Дать пользователю возможность вызвать форму редактирования для любого элемента с данными. Для этого сделаем две вещи:

• кнопочку со словом "Редактировать", которая будет всплывать (становиться видимой) при наведении мыши на редактируемый элемент,
• и например, будем ещё открывать форму по щелчку мышкой на элементе с доп. клавишами: Ctrl + Alt + Click.

Это всё будем делать на стороне клиента (Javascript).

3. По щелчку на кнопке "Редактировать" надо генерировать HTML-форму с единственным полем ввода; посылать "фоновый" запрос на сервер (что-то вроде XmlHttpRequest, в просторечии называемый ajax'ом), извлекать этим запросом содержание текущего поля и вставлять это содержание в форму.

• Форма должна быть на переднем плане; остальной текст страницы затенён; должна быть возможность закрыть форму – для этого делаем крестик справа вверху.

4. При отправке формы (submit) по щелчку на кнопке "Сохранить", в фоновом же режиме (ajax) посылать POST-запрос на сервер для сохранения данных; получать в ответ от сервера сохранённые данные и помещать их в редактируемый HTML-элемент (обновлять его).

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

Это не всё. Нужны кнопки для создания новой страницы и удаления текущей страницы. И, как бы мы ни старались сэкономить за счёт "прямого редактирования полей", всё равно понадобится общая большая форма для редактирования всех полей страницы – потому что там будут скрытые от пользователя поля (например, поле для сортировки, определяющее очерёдность страниц в списках). Эти общие для всей страницы кнопки будем помещать на фиксированном месте вверху страницы – они будут всплывать при наведении мыши на страницу.

Ещё нужен будет сигнал, передаваемый от Php к Javascript: этот сигнал будет сообщать о том, что страницу можно редактировать, и, следовательно, к элементам надо подрисовывать соответствующие всплывающие кнопочки. Потому что в обычном режиме, для неавторизованных посетителей, кнопочки всплывать не должны.

Если сказать коротко, в результате у нас получится 4 файла (которые мы с этой версии 05 http://nichtig.ru/05/ должны будем теперь помещать в отдельные папки на сайте): index.php, core.php, site.js, site.css общим размером ~36 килобайт. А до этого мы обходились одним файлом index4-3.php http://nichtig.ru/index4-3.php?code размером 6 килобайт. Разницу как раз и составляет код CMS – системы редактирования сайта (без CMS код сайта в 5-6 раз меньше).

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

CSS

Мы упомянули в списке выше файл site.css как новый, но мы уже давно незаметно использовали его. Например, ссылки в меню (в предыдущей версии – index4-3.php) выровнены по центру – потому что в файле site.css в строке 40 (приблизительно) мы описали класс: .menu1 {text-align:center;}, а в коде php поместили список ссылок в элемент <div class="menu1">. А вся страница расположена в центре экрана, потому что мы именно так и описали её класс: div.page {width:900px; margin:0 auto;}.

В новой же версии (05) для CSS работы прибавилось: скрывать и показывать ссылки редактирования, раскрасить эти ссылки поярче; показывать в центре страницы форму редактирования, затенив остальные элементы. Меню слева от текста страницы – с помощью свойства float:rigth;. В общем, много чего. Всё это занимает сейчас 3 килобайта (около 100 строк кода). Вы должны удивиться, как это мало (учитывая, что в этот код входит оформление визуального редактора HTML).

В дальнейшем мы не будем упоминать CSS (если именно на нём не основана логика работы); просто смотрите в файл site.css внимательно: хорошее знание этой области очень помогает в создании сайта.

Обратите внимание на стиль работы – как именно связываются javascript и CSS при динамическом изменении страницы: мы никогда не пишем "element.style.color='red'", но всегда javascript оперирует только готовыми CSS-классами:

element.className = 'redColor'

Хотя на самом деле и это не совсем так: CSS-классы HTML-элементам добавляет специальная функция cc ("change class"), которая не трогает существующий набор "слов" – классов элемента, а добавляет к нему что-то новое (или удаляет одно из слов).

Иногда мы используем CSS-3, не стремясь к кроссбраузерности, – это учебные страницы, и не очень принципиально, если в каком-нибудь Интернет Эксплорере-9 вы не увидите у какого-нибудь элемента прозрачную гладкую тень (тень будет квадратной и чёрной, или её вовсе не будет). Но вы должны понимать, что на реальном сайте обеспечить правильную работу всех планируемых "украшений" будет несколько сложнее - это особенности работы html-верстальщика (мы не вдаёмся здесь в подробности этой работы).