Категории: Ajax

Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (настройка и оформление)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
Это завершающая статья цикла о создании web редактора. Наш редактор позволяет создавать/изменять/удалять записи в обычном списке.

В предыдущих статьях мы рассмотрели:
структуру приложения;
создание главной страницы;
добавление новых записей;
редактирование записей;
и удаление записей.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь несколько слов об установке этого приложения.

Прежде всего, вам нужно скачать архив с исходным кодом.

Естественно, у вас уже должен быть установлен web сервер (Apache), интерпретатор PHP и база данных MySQL. (Если у вас возникли сложности на этом этапе смотрите статью «Установка и настройка WAMP5»).

После этого создайте базу данных с одной таблицей.

Примечание. В архиве находится файл db.sql с sql запросом для создания нужной таблицы.

Теперь переименуйте файл dbdata_tmpl.php в dbdata.php (находится в папке scripts) и укажите в нем параметры подключения к базе данных.

Оформление списка

Изменить размещение элементов списка можно с помощью таблицы стилей, которая находится в файле styles.css.

Здесь нет ничего сложного. Единственное, на что стоит обратить внимание, это стили классов itemNum и itemValue.

.itemNum {
	float: left;
	width: 50px;
}

.itemValue {
	float: left;
	margin: 0px 0px 0px 0px;
}

Для них задано правило float: left, что позволяет разместить их в одну строку.

Такое же правило задано и для элемента listForm

#listForm {
	float: left;
}

Помните, этот элемент содержит форму встраиваемого редактора и при активации заменяет itemValue.

Для того чтобы каждая запись списка начиналась с новой строки, используется правило clear: both для тегов li

#list li {
	clear: both;
	margin: 0;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #d5dded;
}

Заключение

Вот и все. Наше web приложение закончено. Посмотреть демонстрационную версию вы можете здесь. Обо всех замеченных недостатках пишите в комментариях.

Удачи!

Интересное

Соблазнение девушки — мифы и реальность.

Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (удаление записей)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
Это пятая часть цикла статей о создании web приложения, использующего технологию Ajax для редактирования списка.
В предыдущих статьях мы рассмотрели:
структуру приложения;
создание главной страницы;
добавление новых записей;
и редактирование записей.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь добавим возможность удаления записей.
Чтобы удалить запись, пользователю нужно нажать на ссылку с изображением крестика после соответствующей записи. При этом будет вызвана функция deleteItem(), которой в качестве параметра передается id записи в БД.
Читать дальше

Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (редактирование записей)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
В этой статье мы продолжаем создание web редактора. Этот редактор позволяет создавать/изменять/удалять записи списка. Напомню, что мы уже разобрали структуру приложения, создали его главную страницу и научились создавать новые записи. Сейчас мы переходим к редактированию записей.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Возможность редактирования записей в списке – это, наверное, главное преимущество данного приложения. Обеспечивается она с помощью встраиваемого редактора, входящего в состав библиотеки Scriptaculous. Создание и настройку этих редакторов мы рассмотрели в статье (Как сделать редактор списка в стиле Web 2.0 (главная страница)). Напомню, что на данный момент редакторы для каждой записи в списке находятся в массиве editors.

Теперь разберем, как работает редактор. При нажатии на кнопку «Сохранить» выполняется Ajax запрос к скрипту updateitem.php.
Работа этого скрипта практически полностью аналогична additem.php, рассмотренному в предыдущей части.
Читать дальше

Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (добавление новых записей)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
Это третья часть цикла статей о создании web приложения, использующего технологию Ajax для редактирования списка.
В прошлых частях мы разобрали общую структуру приложения, работу с базой данных и структуру его основной страницы.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Как вы, наверное, помните, внизу страницы размещена форма добавления новых записей в список. Разберем подробнее как реализовано создание новых записей.

Когда посетитель нажимает кнопку «Добавить», выполняется вызов функции addItem(), размещенной в файле tasks.js. Посмотрите на ее код:

function addItem() {
	//читаем введенное в форму значение
	var v = $('item_value').value;
	//формируем строку с параметрами запроса
	var pars = $H({value:v}).toQueryString();
	//выполняем запрос
	new Ajax.Request(
		"scripts/additem.php",
		{method:"post", parameters:pars, onSuccess:parseAddItemResponse}
	);
}

Читать дальше

Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (главная страница)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
В прошлый раз мы начали создание web приложения, позволяющего редактировать простой список. На данный момент мы разобрали общую структуру приложения и функцию подключения к базе данных (БД).

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь переходим к созданию главной страницы (index.php). Html разметку постараемся максимально упростить, т.к. нам придется изменять ее в процессе работы web приложения.
Заголовок страницы, в общем-то, обычный

<?php
require_once("scripts/dbdata.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>WebListEditor</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="scripts/libs/prototype.js"></script>
<script type="text/javascript" src="scripts/libs/scriptaculous.js?load=effects,controls"></script>
<script type="text/javascript" src="scripts/tasks.js"></script>
</head>

Прежде всего, мы подключаем файл dbdata.php с функцией подключения к БД, затем указываем тип страницы, кодировку, размещения файлов с таблицей стилей и JavaScript библиотеками.
Читать дальше

Как сделать редактор списка в стиле Web 2.0 (структура приложения)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
Сейчас в интернете можно найти множество статей о web2.0. Но для меня понятие web2.0 прежде всего связано с технологией Ajax. Казалось бы, предельно простая идея, отправлять запросы с помощью JavaScript, но благодаря ей web приложения приобрели ряд новых возможностей.

В этой статье я покажу, как написать редактор списка, использующий технологию Ajax. Серверная часть будет реализована на PHP.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Требования
Прежде всего, определимся с требованиями к нашему web приложению. Они довольно простые:
1) читать список записей из базы данных и показывать его на web странице;
2) добавлять новые записи (вставленная запись должна подсвечиваться);
3) удалять записи;
4) при щелчке по записи должно появляться поле редактирования с текстом этой записи и кнопки «Обновить» и «Отмена»;
5) все операции должны выполняться без перезагрузки страницы.

Для того чтобы сократить объем JavaScript кода мы используем библиотеки Prototype и Scriptaculous, о которых я уже неоднократно писал. Главное преимущество этих библиотек в данном случае состоит в том, что Scriptaculous содержит готовый компонент для реализации четвертого требования. Это т.н. in-place text editor (встраиваемый текстовый редактор).
Читать дальше

Web разработка. Ajax без JavaScript?

Владимир | | Ajax, JavaScript, PHP.

картинка xajax
Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: «Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript». Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.

Прежде всего, разберем, что представляет собой xajax. Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.
Читать дальше

Использование JSON в web приложениях. Обработка данных PHP скрипта.

Владимир | | Ajax, JavaScript, PHP.

В предыдущей статье я обещал показать пример использования JSON в реальном web приложении. А обещания, как известно, нужно выполнять, тем более такие простые 🙂 . К тому же, уже написано очень подходящее для этого примера web приложение.

Приложение, о котором идет речь, используется для тестирования регулярных выражений. Подробно о его структуре и работе я писал в статье «Тестирование регулярных выражений». Точнее, это был цикл из трех статей (часть 1, часть 2, часть 3).
Читать дальше

PHP скрипт. Тестирование регулярных выражений (серверная часть).

Владимир | | Ajax, PHP.

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

PHP скрипт. Тестирование регулярных выражений (клиентская часть)

Владимир | | Ajax, PHP.

В прошлый раз (Тестирование регулярных выражений) мы начали писать web приложение для проверки регулярных выражений. Мы разобрались с его назначением, функциями и структурой. Теперь посмотрим, что собой представляют его отдельные компоненты.
Читать дальше