Все авторы

HTML 5. Работа с Web SQL базой данных

В HTML 5 есть много новых возможностей, которые позволяют web разработчикам создавать более мощные и насыщенные приложения. К этим возможностям относятся и новые способы хранения данных на клиенте, такие как web storage(поддерживается в IE8) и web SQL database.

При этом если web storage ориентирован на хранение пар ключ-значение, то в случае с web SQL database у нас есть полноценный sqlite(во всех текущих реализациях применяется именно этот движок баз данных, что является проблемой при стандартизации).

Далее я расскажу, как работать с web SQL database. При этом примеры естественно будут на JavaScript. Кроме того, стоит отметить, что с поддержкой браузерами всего этого хозяйства дела обстоят, не очень хорошо, но всё постепенно меняется к лучшему и, скажем, в Opera 10.50 поддержка будет, а браузерах на движке WebKit она уже есть. Более подробно про то, какой браузер, что поддерживает можно узнать, пройдя по ссылке.

Соединение с базой данных.

Подсоединиться к базе данных очень просто:

db = openDatabase(«ToDo», «0.1», «A list of to do items.», 200000);

Данный код создаёт объект, представляющий БД, а если базы данных с таким именем не существует, то создаётся и она. При этом в аргументах указывается имя базы данных, версия, отображаемое имя и приблизительный размер. Кроме того важно отметить, что приблизительный размер не является ограничением. Реальный размер базы данных может изменяться.

Успешность подключения к БД можно оценить, проверив объект db на null:

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

Выполнение запросов.

Для выполнения запросов к БД предварительно надо создать транзакцию, вызвав функцию database.transaction(). У неё один аргумент, а именно другая JavaScript функция, принимающая объект транзакции и предпринимающая запросы к базе данных.

• строка SQL запроса
• массив параметров запроса (параметры подставляются на место вопросительных знаков в SQL запросе)
• функция, вызываемая при успешном выполнении запроса
• функция, вызываемая в случае возникновения ошибки выполнения запроса

db.transaction(function(tx) tx.executeSql(«SELECT COUNT(*) FROM ToDo», [], function(result)<>, function(tx, error)<>);
>);

Давайте теперь изменим код так, чтобы при невозможности выборки из таблицы «ToDo»(которой пока не существует), данная таблица создавалась.

db.transaction(function(tx) tx.executeSql(«SELECT COUNT(*) FROM ToDo», [], function (result) < alert('dsfsdf') >, function (tx, error) tx.executeSql(«CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)», [], null, null);
>)>);

Вставка данных.

Давайте вставим новую строку в таблицу «ToDo». Для знакомых с синтаксисом SQL пример, приведённый ниже, покажется очень знакомым:

db.transaction(function(tx) tx.executeSql(«INSERT INTO ToDo (label, timestamp) values(?, ?)», [«Купить iPad или HP Slate», new Date().getTime()], null, null);
>);

Первый знак вопроса в SQL запросе заменяется на «Купить iPad или HP Slate», а второй на метку времени. В итоге выполнен будет примерно такой запрос:
INSERT INTO ToDo (label, timestamp) values («Купить iPad или HP Slate», 1265925077487)

Работа с результатами запросов.

Результат выполнения запроса на выборку данных содержит набор строк, а каждая строка содержит значения столбцов таблицы для данной строки.

Вы можете получить доступ к какой-либо строке результата вызвав функцию result.rows.item(i), где i – индекс строки. Далее, для получения требуемого значения, нужно обратиться к конкретному столбцу по имени – result.rows.item(i)[ «label»].

Следующий пример выводит результат запроса к базе данных на страницу:

db.transaction(function(tx) tx.executeSql(«SELECT * FROM ToDo», [], function(tx, result) for(var i = 0; i < result.rows.length; i++) document.write('‘ + result.rows.item(i)[‘label’] + ‘
‘);
>>, null)>);

Заключение.

Использование web SQL database предоставляет мощные возможности, но не стоит увлекаться. Если задачу можно решить с помощью web storage, лучше использовать его.

Вы можете найти дополнительную информацию по данной теме в соответствующем разделе сайта консорциуме w3c.
Также для web SQL database уже начали разрабатывать ORM библиотеки. Пример такой библиотеки тут.

Источник

HTML5 — Web SQL Database

The Web SQL Database API isn’t actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

I’m assuming you are a great web developer and if that is the case then no doubt, you would be well aware of SQL and RDBMS concepts. If you still want to have a session with SQL then, you can go through our SQL Tutorial.

Web SQL Database will work in latest version of Safari, Chrome and Opera.

The Core Methods

There are following three core methods defined in the spec that I am going to cover in this tutorial −

• openDatabase − This method creates the database object either using existing database or creating new one.
• transaction − This method gives us the ability to control a transaction and performing either commit or rollback based on the situation.
• executeSql − This method is used to execute actual SQL query.

Opening Database

The openDatabase method takes care of opening a database if it already exists, this method will create it if it already does not exist.

To create and open a database, use the following code −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

The above method took the following five parameters −

• Database name
• Version number
• Text description
• Size of database
• Creation callback

The last and 5th argument, creation callback will be called if the database is being created. Without this feature, however, the databases are still being created on the fly and correctly versioned.

Executing queries

To execute a query you use the database.transaction() function. This function needs a single argument, which is a function that takes care of actually executing the query as follows −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) < tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); >);

The above query will create a table called LOGS in ‘mydb’ database.

INSERT Operation

To create enteries into the table we add simple SQL query in the above example as follows −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) < tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); >);

We can pass dynamic values while creating entering as follows −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) < tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; >);

Here e_id and e_log are external variables, and executeSql maps each item in the array argument to the «?»s.

READ Operation

To read already existing records we use a callback to capture the results as follows −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) < tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); >); db.transaction(function (tx) < tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) < var len = results.rows.length, i; msg = "
Found rows: " + len + "
"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++) < alert(results.rows.item(i).log ); >>, null); >);

Final Example

So finally, let us keep this example in a full-fledged HTML5 document as follows and try to run it with Safari browser.

      
Status Message
   

This will produce the following result −

Источник

Html: работа с базами данных в примерах

В настоящее время информацию рассматривают как один из основных ресурсов развития общества, а информационные системы и технологии как средство повышения производительности и эффективности работы людей.

Информационные системы и базы данных стали неотъемлемой частью нашей повседневной жизни: покупка в супермаркете, расчеты с использованием кредитной карты, работа в Internet, обучение в университете и пр. Большинство отраслей человеческой деятельности связано с внедрением и использованием баз данных, которые обеспечивают хранение информации, представление данных для пользователей, что повышает эффективность работы. Наиболее широко информационные системы и базы данных используются в производственной, управленческой и финансовой деятельности.

Язык разметки гипертекста (HTML) позволяет быстро и эффективно разрабатывать самые разнообразные приложения, включая и приложения для работы с базами данных.

Цель предлагаемой программы: познакомить слушателей с основными понятиями, связанными с проектированием баз данных, с процессом создания приложений для них с помощью HTML, который поддерживает язык программирования VBScript для разработки запросов, организации взаимодействия внешних данных с базой данных в HTML.

1. Рассмотреть основной понятийный аппарат реляционных баз данных.
2. Научить проектировать реляционные базы данных и приложения.
3. Показать технологию создания информационных систем.
4. Познакомить слушателей с основными элементами языка HTML и языка программирования VBScript для работы с базами данных.
5. Показать возможность применения языка разметки гипертекста (HTML) для быстрой разработки приложений при работе с базами данных.

• формулировать основные понятия, связанные с базами данных: информационная систем, база данных;
• перечислять основные объекты базы данных и определять их назначение;
• формулировать основные понятия реляционных баз данных: отношение, атрибут, запись, ключи и индексы;
• распознавать подходы к проектированию баз данных;
• выделять основные элементы языка разметки гипертекста (HTML) для работы с базами данных;
• перечислять компоненты, основные функции языка программирования VBScript для доступа к данным и для работы с ними (отбор данных из таблиц);
• определять характеристику проекта в HTML (состав проекта, файл проекта, файлы формы, файл ресурсов, параметры проекта).

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

Источник

SQL-запросы из web-страницы

В предыдущей части рассказывается, что такое MySQL, и как создавать базы и таблицы с помощью phpMyadmin, а сейчас речь пойдёт о вводе и выводе информации с помощью своей веб-страницы.

Итак, у нас есть БД домашней библиотеки — homelib и таблица polka1.

Теперь нужно сделать html-страницу из которой мы будем добавлять книги/записи в БД в таблицу polka1.

Создаём файл index.html.

Маленький нюанс, надо в теги дописать букву ‘r’

Создаём файл style.css

Зайдите в браузер /. Должно получиться так:

Здесь всё просто, вводим имя автора, название книги и вставляем текст. Поле для текста совсем маленькое, но оно предназначено только для копипасты.

Нажатие на кнопку вызывает скрипт rec.php и передаёт ему содержимое полей.

Чтобы заработало, надо создать rec.php:

‘, », »);»; // . записывать данные mysql_query($insert_sql); // отправляем данные в базу ?>

Объяснение работы заключено в комментариях. Файл (connect.php) с данными для аутинтефикации в базе, сделаем отдельно, чтоб его можно было подключать в других скриптах.

Создаём connect.php.

В предыдущей части, мы создали базу с именем homelib и её пользователем homelib с паролем 12345

Все файлы должны лежать в одной папке.

Теперь введите данные и нажмите «Записать». В БД появится новая книжка.

Если что-то не работает, то проверьте права на файлы, логин и пароль.

Следующим этапом, будет вывод всех писателей и названий из БД, а также возможность читать определённую книгу.

Изменим существующий index.html вот так:

И дополним файл style.css

 body < width:400px; margin:15px auto; background-image: url('//istarik.ru/file/bg.png'); >#submit < width:200px; height: 40px; border:0px ; background:#af87b1; margin:5px 0px 10px 63px; font-size: 18px; color: #ffffff; cursor: pointer; box-shadow: 0px 5px 2px -1px rgba(0,0,0,0.5); border-radius: 0; >#submitover < width:200px; height: 40px; border:0px ; background:#65c178; margin:5px 0px 10px 63px; font-size: 18px; color: #ffffff; cursor: pointer; box-shadow: 0px 5px 2px -1px rgba(0,0,0,0.5); border-radius: 0; >#submitback < width:200px; height: 40px; border:0px ; background:#65c178; font-size: 18px; color: #ffffff; cursor: pointer; box-shadow: 0px 5px 2px -1px rgba(0,0,0,0.5); border-radius: 0; >#submitread < width:200px; height: 40px; border:0px ; background:#8491b7; font-size: 16px; color: #ffffff; cursor: pointer; box-shadow: 0px 5px 2px -1px rgba(0,0,0,0.5); border-radius: 0; >#submit:hover, #submitover:hover, #submitback:hover, #submitread:hover < box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.6); >#Nknig

Не хватает обработчика нажатия на кнопку, это файл allauthor.php, сделаем его:

Номер книги: «.$row[‘id’].»

Автор: «.$row[‘author’].»

Название: «.$row[‘title’] .»

—————————————-«); > while($row = mysql_fetch_array($result)); ?>

Нажатие переведёт пользователя на страницу со списком авторов и их книг, сохранённых в таблице polka1.

Создадим обработчик (read.php) нажатия на кнопку «Читать», она будет выводить на отдельную страничку текст книги.

Теперь если ввести в поле номер книги и нажать «Читать», то откроется страница с текстом.

Внизу будут кнопки возврата к поиску и на главную страницу.

Ну вот, Вы научились вводить и выводить данные со своей html-странички.

Материал написан для ознакомления с БД и не подходит для работы на сервере имеющем доступ в интернет, так как может быть подвержен sql инъекциям .

7 июня 2015, 20:19

stD

32456

—>

Известит Вас о новых публикациях

Источник