Практическое введение в HTML-формы Smans
Данная статья нацелена на Web-разработчиков начального и среднего уровня, желающих усилить уровень поддержки Web-сайта посредством базы данных. Для разработки интерфейса с базой данных предлагается новый декларативный язык основанный на HTML-формах. В результате разработчик может ограничить себя только HTML без написания соответствующих скриптов на SQL и одном из языков обработки данных, таких как PHP, ASP/C# или JSP/Java. Это существенно упрощает создание динамического Web-сайта.
Статья объясняет простейший подход, основанный на HTML-формах и реализованный в системе управления Web-контентом Smans. При таком подходе для создания базы данных достаточно знать только HTML. Например, чтобы регистрировать новых пользователей, все, что необходимо от Web-разработчика, создать HTML-форму. Соответствующая таблица будет создана или подкорректирована автоматически в течение регистрации пользователя. Имя каждого поля таблицы будет тем же самым, как и имя соответствующего поля в HTML-форме.
HTML-формы могут управлять не только созданием базы данных, но и выполнением запросов к ней. В последнем случае осуществляется контроль введенных данных, получение из базы данных определенных параметров и передача их нужным Web-ресурсам. Все это задается в обычной HTML-форме с использованием специальных управляющих, обычно скрытых, полей.
Создание базы данных с помощью HTML-формы
Как известно, HTML-форма, это — блок HTML-страницы позволяющий вводить данные из Web-браузера на удаленный или локальный Web-сервер. Блок формы помечается тэгами <form. > и </form> . Поля внутри HTML-формы могут иметь разные типы, например список или текстовое поле. В листинге 1 показан пример описания формы, а на рис. 1 вид этой формы в Web-браузере.
Листинг 1. Код HTML-формы
Рис. 1. Вид HTML-формы
HTML-форма обычно используется для ввода только одной записи в таблицу базы данных. Каждый атрибут name определяет имя соответствующего поля формы или вводимой записи. Одновременно, для сервера Smans , это же имя рассматривается как имя колонки в соответствующей таблице. Дополнительная информация, обычно невидимая для пользователя, передается серверу Smans благодаря управляющим полям HTML-формы. Наиболее важным из управляющих полей является $ Table . Атрибут action в дескрипторе form задает имя Smans-сервлета /servlet/record , принимающего и обрабатывающего HTML-форму с управляющими полями. Например:
Поле $Table обозначает таблицу формируемую в базе данных. Рассмотрим пример записывающей управляющей HTML-формы, формирующий таблицу Order в листинге 2 и рис. 2.
Листинг 2. Код записывающей HTML-формы
Рис 2. Вид записывающей HTML-формы
Каждая входная запись должна иметь первичное ключевое поле(я). В рассматриваемом случае таблица Order будет иметь ключевое поле Order . Так как поле Order отсутствует в HTML -форме, значение первичного ключевого поля Order автоматически генерируется сервером Smans как номер записи (ряда) таблицы в увеличивающемся порядке. Если таблицы Order в базе данных еще нет, она будет создана. В случае, если таблица уже существует с другими колонками, к ней будут добавлены новые колонки, описываемые в форме. В результате таблица, как минимум, будет иметь следующий список колонок:
Вы можете легко изменить выводимое сообщение или последующие действия в случае успешного ввода записи с помощью поля $Forward . Например:
Все управляющие поля можно называть также управляющими параметрами. Кроме перечисленных выше, используются параметры $PKey . Они полезны, если таблица имеет несколько первичных ключевых колонок , когда необходимо предотвратить повторное появление нескольких значений колонок. Каждый параметр $PKey указывает на имя обычного параметра ( поля ) в HTML-форме, например:
В дистрибутиве сервера Smans есть соответствующие примеры, они находятся в директории hforms . Простейшие примеры реализованы на HTML-страницах wapp /hforms/Order.html и wapp /hforms/Product.html . Обратиться к странице из Web-браузера можно так: http:// <domain>[ / <application>] /hforms/Order.html . После ввода записи, сервер Smans выдаст некоторое сообщение, по умолчанию:
С ценари й диалога посредством HTML-формы
Весьма обычная ситуация, когда изображение страницы зависит от некоторых входных параметров, обрабатываемых посредством PHP, JSP или ASP. Такими параметрами могут быть тип Web-браузера, язык общения, личные данные пользователя или его интересы и т.д. Часть параметров определяется из запроса пользователя при его первоначальном обращении. Часть параметров берется из cookies, сохраненных в компьютере клиента от предыдущих сеансов. Другая часть устанавливается в процессе диалога.
Зависимости одних параметров от других, это — данные, которые проще хранить отдельно в базе данных, чем вперемежку с разного рода директивами внутри управляющих скриптов или программ. Важность такого подхода не только в большей наглядности. Система базы данных позволяет легко найти нужные группы параметров и зависимостей по запросу. Кроме того, разработчик получает возможность легко менять значения параметров и их зависимости, а значит и конкретный сценарий диалога, не трогая соответствующие скрипты или программы.
Рассмотрим распространенную ситуацию, связанную с предоставлением разных ресурсов разным пользователям. Нужные зависимости и соответствующую базу данных можно сформировать в процессе регистрации пользователя. В моем примере, в листинге 3, такими ресурсами являются новости. Управляющее поле $ Table , кроме задания таблицы , указывает на ключевое поле Username . Пользователь сам выбирает, какие новости его интересуют в поле ExpectedNews . Зависимость Username-ExpectedNews сохраняется в базе данных со схемой Username(Password,ExpectedNews) .
Листинг 3. Записывающая HTML-форма. Регистрация пользователя.
При успешной регистрации, управление передается HTML-странице hforms/Login.html посредством $Forward . В этой странице помещена вызывающая управляющая HTML-форма, необходимая для входа (login) пользователя в систему, смотрите Листинг 4. Значение ../servlet/recall есть Smans-сервлет для обработки вызывающей формы. Поля $Param указывают параметры, передаваемые Internet-ресурсу поля $Forward . Значения этих параметров выбираются из базы данных в соответствии с зависимостями: < вхо дные данные>-> $ Table -> < $Param, . >.
Листинг 4. Вызывающая HTML-форма. Логин пользователя.
Логика вызывающей HTML -формы для каждого $Param выглядеть в SQL так:
Затем все найденные параметры будут переданы по $Forward адресу (URL) , в моем случае к hforms/News.jsp , подобно hforms/News.jsp?Username=. &ExpectedNews=. &ExpectedNews=. . Кроме JSP, любой другой ресурс мог быть на этом месте , например серверная страница PHP , сервлет, Perl скрипт и т.д. . Возможный JSP фрагмет изображен на Рис.5.
Рис. 5. JSP фрагмент . Отклик сервера .
Описанный выше пример реализован в файлах Register.html , Login.html , и News.jsp в директории hforms сервера Smans, распространяемого бесплатно и с открытым кодом.
Заключение
Мо я задач а был а показать, как можно просто и быстро разработать динамический Web-сайт не зная SQL и не будучи специалистом по СУБД. Рассмотренных Smans инструментов вполне достаточно, чтобы сконструировать большой разветвленный диалог , когда предыдущая вызывающая HTML -форма пересылает параметры к JSP/PHP/ASP странице, которая в свою очередь может содержать следующую вызывающую HTML -форму и т.д . Важно помнить, что скрытые (hidden) поля внутри HTML-форм нельзя скрыть от пользователя. Тем не менее, Smans-данные вполне защищены. Таблицы создаются и используются только с тех HTML-страниц, которые находятся в одном Web-приложении работающем с сервером Smans.
Интернет-технологии — наиболее динамично развивающаяся область, сейчас. В рамках уже существующих языков и стандартов появляются новые языки и новые стандарты. Большинство из них направлено на упрощение и облегчение труда Вэб-разработчиков. Примерами являются:
— серверные страницы PHP или JSP,
— недавно появившийся фреймворк Ruby on Rails, базирующийся на архитектуре MVC и языке Ruby,
— AJAX — JavaScript-расширение базирующееся на XML.
К новым Интернет-технологиям относятся также HTML-формы Smans, которые представляют собой декларативный язык в рамках существующего языка HTML. Преимущества Smans HTML-форм определяются особенностями базы данных с которой работает сервер Smans и прежде всего гибкостью структуры этой базы и возможностью вводить данные, заранее не определяя схему базы данных.
HTML5 – База данных Web SQL
API базы данных Web SQL на самом деле не является частью спецификации HTML5, но представляет собой отдельную спецификацию, которая представляет набор API для управления базами данных на стороне клиента с помощью SQL.
Я предполагаю, что вы отличный веб-разработчик, и если это так, то, без сомнения, вы бы хорошо знали концепции SQL и RDBMS. Если вы все еще хотите провести сеанс с SQL, тогда вы можете пройти наш учебник по SQL .
База данных Web SQL будет работать в последних версиях Safari, Chrome и Opera.
Основные методы
В спецификации определены следующие три основных метода, которые я собираюсь рассмотреть в этом уроке:
openDatabase – этот метод создает объект базы данных либо используя существующую базу данных, либо создавая новую.
транзакция – этот метод дает нам возможность контролировать транзакцию и выполнять фиксацию или откат в зависимости от ситуации.
executeSql – этот метод используется для выполнения фактического запроса SQL.
openDatabase – этот метод создает объект базы данных либо используя существующую базу данных, либо создавая новую.
транзакция – этот метод дает нам возможность контролировать транзакцию и выполнять фиксацию или откат в зависимости от ситуации.
executeSql – этот метод используется для выполнения фактического запроса SQL.
Открытие базы данных
Метод openDatabase заботится об открытии базы данных, если она уже существует, этот метод создаст ее, если она уже не существует.
Чтобы создать и открыть базу данных, используйте следующий код –
Вышеуказанный метод принял следующие пять параметров –
- Имя базы данных
- Номер версии
- Текстовое описание
- Размер базы данных
- Создание обратного вызова
Последний и пятый аргумент, callback создания будет вызван, если база данных создается. Однако без этой функции базы данных по-прежнему создаются на лету и корректно корректируются.
Выполнение запросов
Для выполнения запроса вы используете функцию database.transaction (). Эта функция нуждается в единственном аргументе, который заботится о фактическом выполнении запроса следующим образом:
Приведенный выше запрос создаст таблицу с именем LOGS в базе данных «mydb».
ВСТАВИТЬ Операция
Для создания записей в таблицу мы добавим простой SQL-запрос в приведенном выше примере следующим образом:
Мы можем передавать динамические значения при создании ввода следующим образом:
Здесь e_id и e_log являются внешними переменными, а executeSql отображает каждый элемент в аргументе массива на «?».
ЧИТАЙТЕ Операцию
Чтобы прочитать уже существующие записи, мы используем обратный вызов для захвата результатов следующим образом:
Последний пример
Итак, наконец, давайте сохраним этот пример в полноценном документе HTML5 следующим образом и попробуем запустить его с браузером Safari.
Как сделать базу данных для сайта html
- Главная /
- JAVASCRIPT /
- SQL html
SQL html
Всем привет. Сегодня мы рассмотрим работу с api Web SQL которое позволяет нам хранить данные в локальной базе данных в браузере. Данный api работает примерно потому же принципу что и localStorage. Отличие в том что localStorage хранит данные в виде пары ключ и значение, а Api Web SQL хранит данные в таблицах локальной базы данных. И для обращения к таблицам базы используются SQL запросы. Кросс доменные ограничения также распространяются на данный api. То есть вы не сможете использовать общую базу данных на разных доменах. Итак, приступим!
Первое что нам необходимо сделать, создать базу и установить с ней соединение. Делается это одной строчкой.
C помощью данного кода мы создали базу данных с названием DB, указали ей версию 0.1 и описание «My first dataBases web SQL», последним параметром мы выставили приблизительный размер 200000 выделенный под содержимое базы.
В переменной dataBases у нас теперь хранится соединение с базой данных. Для проверки успешного соединения с базой нам необходимо выполнить следующий код.
При успешном соединении идем далее. Следующим шагом у нас будет создание таблиц в базе данных.
C помощью данного кода мы создали таблицу user. Здесь мы уже воспользовались sql запросом «CREATE TABLE IF NOT EXISTS `user`(id INTEGER PRIMARY KEY, name TEXT, age INT)».
Те кто слабо знаком с SQL поясню, мы создаем таблицу `user` ,если она не существует, со следующими полями(столбцами) id , name и age. Cправа от каждого названия поля мы указываем тип данных который он будет содержать. INTEGER , INT- целочисленный, TEXT — текстовой, PRIMARY KEY — уникальный ключ включает c собой автозаполнение autoicrement.
Для отправки и формирования запроса мы воспользовались такой конструкцией:
где dataBases — переменная содержащая соединение с базой данных,
transaction() — метод для отправки sql запроса к базе данных соединения,
executeSql() — Формирование sql запроса. Заметьте что метод executeSql() принимает в себя четыре аргумента.
Первый это сам sql — запрос. Вторым параметром идет массив, он может в себя принимать разные элементы которые мы можем через знак вопроса(?) по порядку подставлять в сам запрос. Что то вроде шаблонизатора.
Последние два аргумента это функции. Первая вызывается если sql запрос сформирован правильно и не содержит ошибок, вторая как раз вызывается при неправильном формировании sql -запроса.
Отлично! Идем дальше!
После создания таблицы мы можем начать ее наполнять своими данными.
Здесь мы сформировали новый sql запрос с помощью которого добавляем новую строчку в таблицу user где в поле name помещаем значение «Andrey», а в age — 24. Заметьте что здесь мы воспользовались для удобства вторым параметром, массивом элементы которого последовательно подставляются вместо знаков вопроса(?) в самом запросе.
Теперь рассмотрим вывод значений из таблицы:
С помощью данного кода мы выведем все строки и их поля таблицы user. Причем если вы не закомментировали предыдущую строчку с добавлением новых значений, то при каждой перезагрузке страницы нам будет добавляться новая строка. Обратите внимание на поле id. При добавлении данных в таблицу мы его не указывали. Оно заполняется самостоятельно благодаря типу INTEGER и первичному(уникальному) ключу PRIMARY KEY который мы указали при создании таблицы. Это поле лучше использовать во всех таблицах, так как оно неповторимо, уникально и позволяет более точно указывать какую строку мы хотим обновить или удалить.
Обновление и удаление это наши последние операции которые мы рассмотрим.
Итак, рассмотрим пример с удалением. Допустим мы хотим удалить строку из таблицы с То есть это по сути первый элемент таблицы.
После выполнения данного кода строка с id равная 1, будет удалена из таблицы user. Теперь возможно вы понимаете для чего нужен id. С помощью него мы можем идентифицировать каждую строку в таблице получить, обновить, удалить ее не затрагивая другие строки.
Если мы хотим удалить все данные из таблицы нам достаточно не указывать условие WHERE.
C помощью данного кода мы полностью очистим таблицу user.
И в завершении данной статьи рассмотрим обновление данных в таблице.
Допустим мы хотим обновить значения полей таблицы user в строке с >
Здесь с помощью sql запроса обновления(update) мы в строке с изменили значение поля name и age. В поле name мы установили значение Maks, а в поле age — 30.
Вот в принципе и все что я хотел вам рассказать про API web SQL.
API web SQL позволяет нам создавать мощные приложения имеющие свою локальную базу данных которая будет хранится на стороне клиента. Конечно для того чтобы им пользоваться необходимо уметь строить и понимать основные sql запросы. Без этого никак.
Использование данного api в небольших проектах не имеет особого смысла. Так как существует тот же самый api localStorage.
В общем лучше использовать данное api когда нет других альтернатив. Если у вас остались или появились вопросы оставляйте их в комментариях или пишите в группу
База данных в HTML
Собственно меня давно просят сделать поиск для сайта. Там конечно очень мало чего искать, но как задел на ближайшее будущее. В планах добавление новых единиц для поиска. Этот туманный и не изученный мной альбион SQL отпугивал своей загадочностью. Но не в файлах же хранить данные. Стоп, а почему бы и нет? Поиск производить с помощью JavaScript. Я подумал о том, что можно в скрипт подгружать данные для поиска и т.д. Заразила меня эта идея, и, когда я приступил к написанию, подумал: «А зачем так усложнять? Пусть всё будет на странице, а пункты не подходящие по характеристикам будут просто скрываться». Заодно и страница поисковикам видна со всеми результатами. Пользователю доступны все данные сразу, и остаётся только выбирать автономно от сервера. Страницу можно сжать и в кэш положить на веки вечные.
История
Создал новый HTML файл и начал свои эксперименты. Добавил select:
Добавил div с данными:
Выбирать что есть. Из чего тоже есть. Теперь осталось сделать чем.
JavaScript
И так первое что нам нужно сделать — это обработать все пункты. Это просто:
Теперь надо определить подходит ли этот пункт под заданные характеристики.
function is_filtred ( node ) <
if ( no_text ( node , «style» ) ) return true ;
>
function no_text ( node , filter ) <
var style_filter = get ( document. getElementById ( filter ) , [ «value» ] ) ;
var home_style = get ( node. getElementsByClassName ( filter ) , [ 0 , «textContent» ] ) ;
if ( style_filter && ( ! home_style || ( home_style. indexOf ( style_filter ) < 0 ) ) )
return true ;
>
Если мы не находим заданной характеристики то элемент скрывается.
Так. С этим справились. Но есть ещё величины, которые списком не задашь. Для них делаем фильтр.
function is_filtred ( node ) <
if ( no_text ( node , «style» ) ) return true ;
if ( compare ( node , «square» ) ) return true ;
>
function compare ( node , filter , comparer ) <
var square_filter = get ( document. getElementById ( filter ) , [ «value» ] ) ;
var home_square = get ( node. getElementsByClassName ( filter ) , [ 0 , «textContent» ] ) ;
if ( square_filter && ! home_square )
return true ;
else if ( square_filter && home_square ) <
square_filter = parseFloat ( square_filter )
home_square = parseFloat ( home_square )
if ( ( ! comparer || comparer == «>» ) ? square_filter > home_square : comparer == «<» ? square_filter < home_square : comparer == » #339933″>? square_filter != home_square : false )
return true ;
>
>
Ну вот вроде и все. Ах да. Что ж за get такой?
Он предотвращает ошибку, если вдруг элемент или его свойство не найдены.
Так как в HTML у нас представлены голые данные, а нам надо дать пользователю понимание, на что он смотрит, добавляем в CSS такие строки.
.name : :before <
content : «Название: » ;
color : gray ;
>
.style : :before <
content : «Стиль: » ;
color : gray ;
>
.wall_material : :before <
content : «Материал стен: » ;
color : gray ;
>
.square : :before <
content : «Общая площадь: » ;
color : gray ;
>
.square : :after , .living_space : :after <
content : » кв. м.» ;
color : gray ;
>
.floors : :before <
content : «Этажи: » ;
color : gray ;
>
.living_space : :before <
content : «Жилая площадь: » ;
color : gray ;
>
Поскольку эти данные вторичны, мы даем действительно значащему контенту выйти на первый план, задав серый цвет этому тексту.
Заключение
Просто и надеюсь быстро. Не для миллионных списков, но с небольшим количеством данных, думаю, справится. Ну и плюс для меня — наполнение можно переложить на чужие плечи, ибо это просто.