Время на прочтение
3 мин
Количество просмотров 156K
В 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:
if(!db){alert("Failed to connect to database.");}
Всегда предпринимайте данную проверку, даже если соединение с БД для данного пользователя уже производилось в прошлом, и было успешно. Могут измениться настройки безопасности, закончиться дисковое пространство (скажем, если пользователь использует смартфон) или фаза луны окажется неподходящей.
Выполнение запросов.
Для выполнения запросов к БД предварительно надо создать транзакцию, вызвав функцию database.transaction(). У неё один аргумент, а именно другая JavaScript функция, принимающая объект транзакции и предпринимающая запросы к базе данных.
Собственно сам SQL запрос можно выполнить, вызвав функцию executeSql объекта транзакции. Она принимает 4 аргумента:
- строка SQL запроса
- массив параметров запроса (параметры подставляются на место вопросительных знаков в SQL запросе)
- функция, вызываемая при успешном выполнении запроса
- функция, вызываемая в случае возникновения ошибки выполнения запроса
Пример работы функции executeSql ниже:
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('<b>' + result.rows.item(i)['label'] + '</b><br />');
}}, null)});
Заключение.
Использование web SQL database предоставляет мощные возможности, но не стоит увлекаться. Если задачу можно решить с помощью web storage, лучше использовать его.
Вы можете найти дополнительную информацию по данной теме в соответствующем разделе сайта консорциуме w3c.
Также для web SQL database уже начали разрабатывать ORM библиотеки. Пример такой библиотеки тут.
В этом уроке мы научимся выводить из базы данных MySql необходимые нам данные. Я покажу Вам как выводить данные в цикле, а также как вывести данные из базы по определенному запросу.
В двух прошлых уроках мы научились создавать базу данный MySql, а также вносить в нее новые записи из формы веб страницы.
В этом уроке будем учиться выводить информацию, хранящуюся в базе данных MySql на веб страницу.
Мы научимся выводить информацию в цикле. Эти знания могут Вам понадобиться если Вы будете выводить из базы список новостей, заметок или чего-либо подобного.
А также научимся извлекать конкретную запись с учетом запроса пользователя.
Вывод информации из базы данных MySql
Что нам нужно сделать?
1. Мы создадим html файл, в котором будет кнопка для вывода всего списка в цикле и форма для запроса конкретного пользователя из списка.
2. Конкретного пользователя мы будем запрашивать по имени и фамилии (можете запрашивать по имени и e-mail адресу, принцип все равно будет один).
3. В зависимости от того на какую кнопку нажал пользователь (полный список или конкретная запись) будет запускаться соответствующий файл обработчик, который мы также создадим.
4. Файл обработчик будет обрабатывать наш запрос и выводить на экран то, что мы от него потребовали.
1. Итак, создадим новый html файл и назовем его search_user.html Для сохранения будем использовать папку с файлами из прошлого урока “db1” (эту папку Вы можете найти в исходниках к уроку или скачать из исходников прошлого урока. Не забудьте вписывать свои данные в файл connect.php).
Давайте в созданном файле реализуем выбор из двух опций вывода: либо вывести всех пользователей, либо информацию о каком-то конкретном. У нас должно быть две кнопки, каждая будет запускать свой файл обработчик. И еще помимо кнопок нужно два поля, которые будут передавать введенные данные.
Таким образом, код получится следующий:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Вывод данных</title> </head> <body> <fieldset> <form method="post" action="select_user.php"> <label for="first_name">Имя для поиска:</label><br/> <input type="text" name="first_name" size="30"><br/> <label for="last_name">Фамилия для поиска:</label><br/> <input type="text" name="last_name" size="30"><br/> <input id="submit" type="submit" value="Найти и вывести"><br/> </form> </fieldset> <fieldset> <form method="post" action="all_users.php"> <input id="submit" type="submit" value="Вывести всех пользователей"><br/> </form> </fieldset> <a href="info_form.html">Добавить пользователя</a> </body> </html>
А выглядеть страница будет вот так:
Помимо формы мы поместили в нее ссылку на файл, через который мы можем добавлять пользователей ( см. предыдущий урок). Это для того, чтобы мы могли перемещаться по веб страницам и с легкостью обращаться к любому файлу.
2. Если Вы нажмете на любую из кнопок, то увидите ошибку. Так и должно быть, потому что еще никаких файлов-обработчиков мы не создали, а только прописали их имена в “action”.
Давайте это исправим и создадим первый файл, который будет искать и выводить пользователя по заданным имени и фамилии.
Создадим файл ‘select_user.php’ и разместим его в том же каталоге, что и html файл.
1. В этом файле мы сначала подключим файл “connect.php” (он обеспечит подключение к базе данных MySql).
2. Затем получим значения введенные в поля и поместим их в переменные “$first_name” и “$last_name”.
3. После сформируем запрос для выбора элементов с заданными параметрами из таблицы базы данных MySql.
4. С помощью функции “mysql_query” исполним этот запрос. В качестве результата эта функция возвращает массив, который мы должны разбить на строки. Делает это специальная функция “mysql_fetch_array”. Результат ее работы мы заносим в переменную “$row”.
5. При помощи конструкции “if – else” мы проверяем есть ли запись с введенными параметрами и если есть, то при помощи функции “printf” выводим на экран результат, подставляя в нужное место вывода каждый из параметров записи. Если записи с заданными параметрами нет, то выводим сообщение о том, что в базе данных отсутствуют записи с такими параметрами.
6. В конце страницы вставляем ссылки для перехода обратно в режим поиска, либо для вставки нового элемента в таблицу базы данных MySql.
Вот код всей вышеописанной процедуры:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Selected User</title> </head> <body> <?php require 'scripts/connect.php'; $first_name = trim($_REQUEST['first_name']); $last_name = trim($_REQUEST['last_name']); $sql_select = "SELECT * FROM users WHERE first_name='$first_name' && last_name='$last_name'"; $result = mysql_query($sql_select); $row = mysql_fetch_array($result); if($row) { printf("<p>Пользователь: " .$row['first_name'] . " " .$row['last_name'] ."</p> <p><i>Контактные данные</i></p><p>E-mail: " .$row['email'] . "</p><p>Facebook: " .$row['facebook'] . "</p>---------<br/> ); } else{echo ("Пользователя с таким именем в базе нет<br/><br/>");} ?> <a href="search_user.html">Вернуться к поиску</a><br/><br/> <a href="info_form.html">Добавить пользователя</a> </body> </html>
Теперь вставьте в таблицу Вашей базы данный несколько записей людей с разными именами и фамилиями и попробуйте скрипт в действии.
Введите сначала существующие параметры – посмотрите результат, потом введите только имя без фамилии (или наоборот), введите несуществующие параметры – протестируйте Ваш скрипт. (Перед тем как начать будьте уверены, что Ваш Денвер запущен).
7. Если Вы поняли принцип того, что мы сделали в файле “select_user.php”, то вывести всех пользователей не составит труда.
Создайте файл “all_users.php” и поместите его в тот же каталог, где лежит файл “search_user.html”.
Отличаем этого файла от предыдущего будет то, что мы не будем передавать никаких параметров из файла “search_user.html”. Мы просто составим запрос к базе данных и попросим вывести все записи из таблицы базы.
А далее вместо конструкции “if – else” мы будем использовать конструкцию “do – while”. Эта конструкция скажет нашей программе выводить записи до тех пор пока они есть в таблице базы. Это и есть вывод данных из базы в цикле.
Итак, пропишите в файле “all_users.php” следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Selected User</title> </head> <body> <?php require 'scripts/connect.php'; $sql_select = "SELECT * FROM users"; $result = mysql_query($sql_select); $row = mysql_fetch_array($result); do { printf("<p>Пользователь: " .$row['first_name'] . " " .$row['last_name'] ."</p> <p><i>Контактные данные</i></p><p>E-mail: " .$row['email'] . "</p><p>Facebook: " .$row['facebook'] . "</p>---------<br/>" ); } while($row = mysql_fetch_array($result)); ?> <a href="search_user.html">Вернуться к поиску</a><br/><br/> <a href="info_form.html">Добавить пользователя</a> </body> </html>
Протестируйте кнопку, которая выводит всех пользователей:
Теперь Вы умеете выводить записи из базы данных MySql в цикле и по заданным параметрам. Практическое применение этому Вы найдете практически везде, где речь заходит о php и MySql.
В следующем уроке этой серии я расскажу Вам как можно внести изменения в запись таблицы базы данных, а также удалить запись из веб страницы.
Если Вы еще не подписаны на рассылку, обязательно подпишитесь, чтобы не пропустить все самое интересное.
Также жду Ваших комментариев и пожеланий.
Успехов Вам и до встречи в следующем уроке!
Работа с БД с помощью SQL-запросов.
В предыдущей части рассказывается, что такое MySQL, и как создавать базы и таблицы с помощью phpMyadmin, а сейчас речь пойдёт о вводе и выводе информации с помощью своей веб-страницы.
Итак, у нас есть БД домашней библиотеки — homelib и таблица polka1.
Теперь нужно сделать html-страницу из которой мы будем добавлять книги/записи в БД в таблицу polka1.
Создаём файл index.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" href="style.css" type="text/css">
<title>MySQL</title>
</head>
<body>
<form action="rec.php" method="post">
<input type="text" name="author" placeholder="Автор" size="30"><b/>
<b/>
<input type="text" name="title" placeholder="Название" size="30"><b/>
<b/>
<input type="text" name="text" placeholder="Текст" size="30"><b/>
<b/>
<input id="submit" type="submit" value="Записать"><b/>
</form>
</body>
</html>
Маленький нюанс, надо в теги <b/> дописать букву ‘r’
Создаём файл style.css
body{
width:400px;
margin:15px auto;
background-image: url('//istarik.ru/file/bg.png');
}
#submit{
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;
}
#submit:hover{
box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.6);
}
Зайдите в браузер /. Должно получиться так:
Здесь всё просто, вводим имя автора, название книги и вставляем текст. Поле для текста совсем маленькое, но оно предназначено только для копипасты.
Нажатие на кнопку вызывает скрипт rec.php и передаёт ему содержимое полей.
Чтобы заработало, надо создать rec.php:
<?php
require 'connect.php'; // Подключает файл с логином/паролем и именем БД
mysql_set_charset('utf8'); // Устанавливает кодировку клиента
$author = trim($_REQUEST['author']); // Получает содержимое поля "Автор" и убирает возможные пробелы в начале строки
$title = trim($_REQUEST['title']); // То же самое для поля "Название"
$text = mysql_real_escape_string(trim($_REQUEST['text'])); // То же самое для поля "Текст" + (см.ниже)
$insert_sql = "INSERT INTO polka1 (author, title, text)" . // Указывает в какую таблицу и в какие поля ...
"VALUES('{$author}', '{$title}', '{$text}');"; // ...записывать данные
mysql_query($insert_sql); // отправляем данные в базу
?>
<html>
<head>
<META HTTP-EQUIV='Refresh' CONTENT='1,URL=index.html'> <!-- Возврат обратно -->
</head>
<body>
</body>
</html>
Объяснение работы заключено в комментариях. Файл (connect.php) с данными для аутинтефикации в базе, сделаем отдельно, чтоб его можно было подключать в других скриптах.
Почитать про trim(), $_REQUEST, mysql_real_escape_string(), INSERT INTO и mysqli_query().
Создаём connect.php.
В предыдущей части, мы создали базу с именем homelib и её пользователем homelib с паролем 12345
<?php
mysql_connect("localhost", "homelib", "12345"); // логин, пароль
mysql_select_db("homelib"); // имя бызы
?>
Все файлы должны лежать в одной папке.
Теперь введите данные и нажмите «Записать». В БД появится новая книжка.
Если что-то не работает, то проверьте права на файлы, логин и пароль.
Следующим этапом, будет вывод всех писателей и названий из БД, а также возможность читать определённую книгу.
Изменим существующий index.html вот так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Главная</title>
</head>
<body>
<form action="rec.php" method="post">
<input type="text" name="author" placeholder="Автор" size="30"><b/>
<b/>
<input type="text" name="title" placeholder="Название" size="30"><b/>
<b/>
<input type="text" name="text" placeholder="Текст" size="30"><b/>
<b/>
<input id="submit" type="submit" value="Записать"><b/>
</form>
<form method="post" action="allauthor.php">
<input id="submitover" type="submit" value="Показать всех"><b/>
</form>
</body>
</html>
Допишите в теги <b/> букву ‘r’.
И дополним файл 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{
width:100px;
margin:0 0 0 45px;
}
Получится так:
Не хватает обработчика нажатия на кнопку, это файл allauthor.php, сделаем его:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Все авторы</title>
</head>
<body>
<?php
require 'connect.php'; // Подключает файл с логином/паролем и именем БД
mysql_set_charset('utf8'); // Устанавливает кодировку клиента
$sql_select = "SELECT * FROM polka1"; // Выбираем таблицу из которой читать данные
$result = mysql_query($sql_select); // Запрос к БД
$row = mysql_fetch_array($result); // Разбираем полученый массив
do
{
printf("<p>Номер книги: ".$row['id']."</p><p>Автор: ".$row['author']."</p><p>Название: ".$row['title']
."</p>----------------------------------------<b>");
}
while($row = mysql_fetch_array($result));
?>
<form method='post' action='read.php'><b>
<input id="Nknig" type='text' name='nk' placeholder="Номер книги"><b><b>
<input id='submitread' type='submit' value='Читать...'><b><b>
</form>
<form method="post" action="index.html">
<input id="submitback" type="submit" value="На главную">
</form>
</body>
</html>
Читать про mysql_fetch_array().
Нажатие переведёт пользователя на страницу со списком авторов и их книг, сохранённых в таблице polka1.
Создадим обработчик (read.php) нажатия на кнопку «Читать», она будет выводить на отдельную страничку текст книги.
read.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Читать</title>
</head>
<body>
<?php
require 'connect.php';
mysql_set_charset('utf8');
$id = $_REQUEST['nk'];
$sql_select = "SELECT * FROM polka1 WHERE id='$id'";
$result = mysql_query($sql_select);
$row = mysql_fetch_array($result);
if($row) { printf($row['text']); }
else { echo ("Такой книги в базе нет"); }
?>
<form method='post' action='allauthor.php'><b/>
<input id='submitread' type='submit' value="Вернуться к поиску"><b/><b/>
</form>
<form method="post" action="index.html">
<input id="submitback" type="submit" value="На главную">
</form>
</body>
</html>
Теперь если ввести в поле номер книги и нажать «Читать», то откроется страница с текстом.
Внизу будут кнопки возврата к поиску и на главную страницу.
Ну вот, Вы научились вводить и выводить данные со своей html-странички.
Материал написан для ознакомления с БД и не подходит для работы на сервере имеющем доступ в интернет, так как может быть подвержен sql инъекциям.
Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать Denwer3 (версия p5.3.13_m5.5.25_pma3.5.1)
Скачать папку CD_php для изучения курса «Уроки PHP и MySQL» (692 Кб)
Уроки PHP и MySQL. Урок 5. Формы и базы данных в web
Урок посвящен языку PHP и базе данных MySQL. Рассматривается взаимодействие PHP и MySQL, способы занесения данных из формы в базу данных и вывод данных из базы на web-страницу.
В данном уроке PHP и MySQL Вам предстоит решить следующие задачи:
1. Создать базу данных, содержащую две таблицы: справочник пород кошек, таблицу сведений о потерявшихся животных.
2. Создать web-страницу, на которых будут размещена форма для подачи объявлений о потерявшихся кошках. Данные из этих объявлений заносятся в соответствующую таблицу сведений о потерявшихся животных.
3. Создать web-страницу, позволяющую просматривать информацию из базы данных. Данные в таблицы базы данных будут вноситься из объявлений, размещенных посетителями на сайте.
Задание № 1. Создание базы данных
Наши уроки PHP и MySQL начнем с создания базы данных.
Сначала необходимо создать таблицу-справочник пород и таблицу сведений о потерявшихся животных. Структура таблиц следующая:
Справочник пород
Таблица 1
Название поля | Имя поля | Тип поля | Описание |
идентификационный номер породы | id | Числовой | |
название породы | name_por | Символьный | |
характеристика породы | describe_por | Символьный | В поле хранится имя файла, который содержит описание породы и фотографию. |
Сведения о потерявшихся кошках
Таблица 2
Название поля | Имя поля | Тип поля | Описание |
идентификационный номер кошки | id | Числовой | |
порода | por | Символьный | |
дата нахождения кошки: день месяц год |
day month year |
Символьный Символьный Символьный |
|
место нахождения кошки | place | Символьный | |
пол кошки | pol | Символьный | |
возраст кошки | age | Символьный | Если возможно указать примерный возраст |
описание кошки | outline | Символьный | Окрас, состояние здоровья и т. д. |
координаты нашедшего | contact | Символьный | Любая контактная информация: телефон, e-mail, адрес |
дополнительная информация | dop_info | Символьный | Например, кошка больна, есть клеймо, кормящая и пр. |
В наших уроках PHP и MySQL рассмотрим два способа создания таблицы базы данных.
1. С помощью клиента MySQL.
2. Средствами PHP.
Способ 1. Создание базы данных с помощью клиента MySQL
Задание 1
С помощью клиентской программы MySQL – «phpMyAdmin» создадим таблицу Справочник пород (таблица 1).
1. Запустите Denwer ярлыком Start Denwer.
2. Запустите браузер и перейдите по ссылке http://localhost/. На открывшейся странице в разделе Утилиты запустите: phpMyAdmin – администрирование СУБД MySQL. Запустится программа phpMyAdmin (рис. 1).
Рис. 1
3. Создайте новую базу данных. Для этого впишите в поле Создать базу данных имя базы catsdb, кодировку установите utf8_general_ci и нажмите кнопку Создать (рис. 2).
Рис. 2
4. Если все было выполнено верно, то будет выведено сообщение об удачном создании базы.
5. Перейдите в базу данных catsdb, нажав соответствующую строку в левой панели (рис. 3).
Рис. 3
6. Добавьте в базу данных таблицу Справочник пород, назовите ее: spravpor (структура таблицы и назначение полей приведены в таблице 1 Справочник пород). Для этого:
a. Внесите данные в поле Имя (имя таблицы – spravpor) и Количество столбцов (3), после чего нажмите кнопку ОК (рис. 4).
Рис. 4
b. В открывшемся окне заполните данные по структуре таблицы (рис. 5).
Рис. 5
c. После заполнения всех полей нажмите Сохранить. Перейдите в таблицу spravpor, нажав соответствующую строку в левой панели (рис. 6).
Рис. 6
d. Откроется сама таблица (рис. 7).
Рис. 7
Способ 2. Создание базы данных средствами PHP
В данном уроке PHP и MySQL создадим таблицу с помощью сценария PHP, но при этом база данных должна уже быть создана! В листинге 1 приведена программа создания таблицы под именем species средствами PHP. Структура таблицы species аналогична структуре таблицы spravpor.
Задание 2
1. Проанализируйте приведенные в листинге 1 PHP-сценарий и комментарии к нему в файле species.php.
2. Реализуйте код из листинга 1. Для этого:
- скопируйте его в Notepad++
- преобразуйте кодировку файла в utf-8 командой Кодировка – Преобразовать в UTF-8
- сохраните в папку localhost/www под именем species.php
- запустите файл, набрав в адресной строке localhost/species.php
- появится сообщение, что таблица успешно создана (рис. 8).
Рис. 8
3. После выполнения сценария убедитесь, что таблица species создана в базе данных catsdb (рис. 9, 10).
Рис. 9
Рис. 10
Листинг 1. Создание таблицы с помощью сценария PHP (файл species.php)
<?php /*Определяем параметры соединения. В случае удаленного доступа к серверу баз данных адрес хоста (переменная $host), имя базы данных (переменная $db) и ваше пользовательское имя (переменная $user) уточните у преподавателя. В случае использования локального сервера переменная $host имеет значение 127.0.0.1 или "localhost". */ $host="localhost"; $user="root"; $pass=""; $db="catsdb"; //Соединяемся с сервером mysql_connect ($host, $user, $pass); //Выбираем БД mysql_select_db ($db); //Формируем запрос на создание таблицы, по структуре аналогичной справочнику пород $query="CREATE TABLE species (id INT(4) NOT NULL auto_increment primary key, name_por VARCHAR(20) NOT NULL, describe_por VARCHAR(100) NOT NULL)"; //Выполняем запрос $result=mysql_query ($query); if ($result == true) print ("Таблица базы данных успешно создана"); //Печать сообщения else print ("Запрос не выполнен"); //Закрываем соединение mysql_close(); ?>
Комментарии к листингу 1:
1. Здесь адрес сервера MySQL — localhost (такой адрес указывается в случае если работа с базой данных ведется на локальном компьютере или компьютере где располагаются файлы с php-сценариями).
2. Программа на языке PHP обычно вставляется в HTML-текст. Поэтому предусмотрены специальные теги для отделения PHP-текста от HTML <?php и ?>.
3. Если PHP-сценарий представляет собой самостоятельный модуль (как в листинге 1), он также должен начинаться с конструкции <?php и заканчиваться конструкцией ?>.
4. Любой файл, содержащий PHP-сценарий, имеет расширение php, независимо от того, встроен сценарий в HTML-текст или полностью написан на PHP.
5. Многострочные комментарии должны начинаться с символов /* и завершаться символами*/. Однострочные комментарии предваряются символами //. Закрывать их не нужно.
6. В языке PHP имя переменной начинается со знака доллара ($), за которым следует собственно имя переменной. В именах переменных различаются верхний и нижний регистры. Имя переменной должно начинаться с буквы или символа подчеркивания, за которыми могут следовать буквы, цифры или знаки подчеркивания. Буквы должны быть из диапазона A—Z.
7. В конце каждого оператора php обязательно ставится точка с запятой.
8. Функции для работы с MySQL имеют префикс mysql_ (см. приложение 2).
Задание 3
В нашем уроке PHP и MySQL, используя программу из листинга 1 в качестве образца, напишите сценарий PHP для создания таблицы сведений о потерявшихся кошках (см. таблицу 2). Таблицу назовите catspotery, а файл сценария catspotery.php. Результат на рис. 11, 12
Рис. 11
Рис. 12
Добавление записи в базу данных
Мы подготовили таблицы базы данных. Сейчас на web-странице разместим форму подачи объявлений для тех, кто потерял кошку. Задача — обеспечить занесение информации из форм в соответствующие таблицы базы данных.
Примерный вид формы представлен на рис. 13.
Рис. 13
Задание 4
При выполнениии данного урока PHP и MySQL создайте web-страницу с формой, как на рис. 13. Сохраните под именем forma_cats.html. В качестве файл-обработчика укажите poter_dobavl.php. Не забывайте о корреляции полей формы и полей соответствующей таблицы в базе данных и кодировка файла должна быть в utf-8 (Кодировка – Преобразовать в UTF-8).
Данные, введенные посетителем, заносятся в соответствующую таблицу базы данных. Имя PHP-сценария, отвечающего за эту операцию, указывается в атрибуте action тега <form>. В листинге 2 приведен код PHP-сценария, осуществляющего подключение к серверу MySQL, выбор базы данных, запрос к базе данных. В данном случае это запрос INSERT, который вставляет данные из формы в базу данных.
Задание 5
1. Используя программу из листинга 2 в качестве образца, напишите PHP-сценарии, осуществляющие вставку записей в таблицы сведений о пропавших кошках.
2. Проверьте работоспособность формы. В базу данных (рис. 14) должна сохраняться информация, введенная в форму (рис. 13).
3. Наполните базу 5-ю записями.
Листинг 2. Занесение данных формы в базу данных (файл poter_dobavl.php)
<?php //Создание коротких переменных $por=$_POST['por']; $day=$_POST['day']; $month=$_POST['month']; $year=$_POST['year']; $place=$_POST['place']; $pol=$_POST['pol']; $age=$_POST['age']; $outline=$_POST['outline']; $contact=$_POST['contact']; $dop_info=$_POST['dop_info']; $hostname="localhost"; $username="root"; $dbname="catsdb"; $pass=""; $usertable="catspotery"; mysql_connect ($hostname, $username, $pass); mysql_select_db ($dbname); $query="insert into $usertable (por, day, month, year, place, pol, age, outline, contact, dop_info) values ('$por', '$day', '$month', '$year', '$place', '$pol', '$age', '$outline', '$contact', '$dop_info')"; $result=mysql_query ($query); if ($result == true) print ("Данные занесены"); //Печать сообщения else print ("Данные не занесены"); mysql_close(); ?>
Рис. 14
Извлечение записей из базы данных
В нашем уроке PHP и MySQL Вы реализовали технологию заполнения базы данных.
Теперь необходимо реализовать задачу вывода информации из базы данных. Т.е. необходимо представить на сайте информацию из базы данных в следующем виде:
Рис. 15
Код сценария, представленный в листинге 3, выводит информацию из базы данных на web-страницу, в соответствии с рисунком 15.
Листинг 3. Вывод информации из базы данных на Web-страницу. Передача параметров (файл vivod_poter.php)
<?php /*Определяем переменные для хранения адреса хоста, названия базы данных, таблицы базы данных, имени и пароля пользователя */ $hostname="localhost"; $username="root"; $usertable="catspotery"; $dbname="catsdb"; $password=""; //Соединяемся с базой данных mysql_connect($hostname, $username, $password); mysql_select_db($dbname); //Формируем текст запроса $query="select id, por, day, month, year, place, pol, age, outline, contact, dop_info from $usertable"; //Выполняем запрос с сохранением идентификатора результата $result=mysql_query($query); //Печатаем шапку таблицы print ("<p align=center><font face=verdana><b>Найденные</b> <table border=1 align=center width=90% cellpadding=5> <tr bgcolor=#ffffcc> <td>Порода</td> <td>Дата находки</td> <td>Район</td> <td>Пол</td> <td>Возраст</td> <td>Приметы</td> <td>Контакты</td> <td>Дополнительная информация</td> </tr>"); //Печатаем содержимое таблицы while ($a=mysql_fetch_array($result)) { $id=$a['id']; $poroda=$a['por']; $dat_day=$a['day']; $dat_month=$a['month']; $dat_year=$a['year']; $place_find=$a['place']; $pol_por=$a['pol']; $age_por=$a['age']; $outline_por=$a['outline']; $contact_por=$a['contact']; $dop_info=$a['dop_info']; print ("<tr> <td>$poroda</td> <td>$dat_day $dat_month $dat_year</td> <td>$place_find</td> <td>$pol_por</td> <td>$age_por</td> <td>$outline_por</td> <td>$contact_por</td> <td>$dop_info</td> </tr>"); } print ("</table>"); //Закрываем соединение mysql_close(); ?>
Задание 6
Изучите код сценария из листинга 3 и реализуйте его. Проверьте работоспособность сценария.
Задание 7
Реализуйте возможность работы со справочником пород spravpor. Для этого:
1. Добавьте к созданной таблице поле foto, в котором будет храниться ссылка на фотографию породы.
2. Используя запросы SQL (рис. 16), заполните базу 3-мя записями про породы кошек (длинношерстные, полудлинношерстные, короткошерстные) (рис. 17). Все необходимые материалы находятся в папке cats.
3. Реализуйте web-страницу, на которую выводятся данные из справочника пород. У каждой породы должна быть фотография.
4. Если скрипт обрезает описание породы, увеличьте длину поля describe_por, чтобы можно было вводить длинные описания.
5. Примерный результат на рисунке 18.
Рис. 16
Рис. 17
В этом руководстве вы узнаете, как получать и отображать данные из базы данных в PHP с помощью jQuery ajax.
В этом посте мы создадим список клиентов и добавим кнопку просмотра в этот список клиентов. После этого у нас будут извлекаться данные из базы данных при нажатии кнопки просмотра в PHP и отображать данные на веб-странице без перезагрузки всей веб-страницы с помощью jQuery ajax.
Как получить и отобразить данные из базы данных с помощью Ajax без обновления страницы
Выполните следующие шаги для того, чтоб научиться получать и отображать данные из базы данных MySQL в PHP с помощью ajax без перезагрузки веб-страницы:
Шаг 1 – Создать базу данных и таблицу
Прежде всего, перейдите на панель phpmyadmin и создайте базу данных и таблицу, используя следующий запрос sql:
CREATE DATABASE my_db;
CREATE TABLE `customers` (
`id` int(10) UNSIGNED NOT NULL,
`fname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`lname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`created_date` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Шаг 2 – Подключение к базе данных MySQL
На этом этапе вы создадите файл с именем mydbCon.php и обновите приведенный ниже код в свой файл.
Следующий код используется для создания подключения к базе данных MySQL в PHP. Кроме того, вы можете использовать PHP-код для подключения к базе данных при извлечении, вставке, обновлении или удалении записей из базы данных MySQL с использованием и без использования ajax:
<?php
$host='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($host,$username,$password,"$dbname");
if(!$conn)
{
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Шаг 3 – Получить данные списка из базы данных
Отображение данных в таблице HTML.
Итак, создайте файл customers.php и добавьте в него следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Code to Fetch All Data from MySQL Database and Display in html Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container mt-2">
<div class="page-header">
<h2>Customers List</h2>
</div>
<div class="row">
<div class="col-md-8">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Email</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'mydbCon.php';
$query = "select * from customers limit 200"; // Fetch all the data from the table customers
$result = mysqli_query($dbCon, $query);
?>
<?php if ($result->num_rows > 0) : ?>
<?php while ($array = mysqli_fetch_row($result)) : ?>
<tr>
<th scope="row"><?php echo $array[0]; ?></th>
<td><?php echo $array[1]; ?></td>
<td><?php echo $array[2]; ?></td>
<td><?php echo $array[3]; ?></td>
<td>
<a href="jаvascript:void(0)" class="btn btn-primary view" data-id="<?php echo $array[0]; ?>">View</a>
</tr>
<?php endwhile; ?>
<?php else : ?>
<tr>
<td colspan="3" rowspan="1" headers="">No Data Found</td>
</tr>
<?php endif; ?>
<?php mysqli_free_result($result); ?>
</tbody>
</table>
</div>
<div class="col-md-4">
<span id="fname"></span><br>
<span id="lname"></span><br>
<span id="email"></span><br>
</div>
</div>
</div>
<script type="text/jаvascript">
$(document).ready(function($) {
$('body').on('click', '.view', function() {
var id = $(this).data('id');
// ajax
$.ajax({
type: "POST",
url: "ajax-fetch-record.php",
dаta: {
id: id
},
dataType: 'json',
success: function(res) {
$('#fname').html(res.fname);
$('#lname').html(res.lname);
$('#email').html(res.email);
}
});
});
});
</script>
</body>
</html>
Шаг 4 – Получение и отображение с использованием Ajax без перезагрузки страницы
На этом этапе извлеките данные из базы данных с помощью запроса ajax. Поэтому создайте файл ajax-fetch-record.php и отобразите данные из базы данных с помощью ajax без обновления или перезагрузки всей веб-страницы.
Итак, обновите следующий код в файле ajax-fetch-record.php:
<?php
include "mydbCon.php";
$id = $_POST['id'];
$query = "SELECT * from customers WHERE id = '" . $id . "'";
$result = mysqli_query($dbCon, $query);
$cust = mysqli_fetch_array($result);
if ($cust) {
echo json_encode($cust);
} else {
echo "Error: " . $sql . "" . mysqli_error($dbCon);
}
?>
Как получить данные из базы данных на php с помощью ajax и jquery, будет выглядеть как на следующем изображении:
Вывод
Здесь вы узнали, как получать данные из таблицы MySQL в PHP с помощью jQuery ajax без перезагрузки или обновления всей веб-страницы.