Связать форму с базой данных

Обновлено: 24.04.2024

В 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 библиотеки. Пример такой библиотеки тут.

В предыдущем руководстве показано, как создать базу данных, вы ввели данные базы данных, изменив базу данных непосредственно в WebMatrix, работая в рабочей области "База данных ". Однако в большинстве приложений это не практический способ поместить данные в базу данных. Поэтому в этом руководстве вы создадите веб-интерфейс, который позволяет вам или любому пользователю вводить данные и сохранять их в базе данных.

Текстовые поля будут html-элементами , которые будут выглядеть следующим образом:

Создание базовой формы записи

Создайте страницу с именем AddMovie.cshtml.

Замените содержимое файла следующей разметкой. Перезапись всего; Вы добавите блок кода в начало в ближайшее время.

В этом примере показан типичный HTML-код для создания формы. Он использует элементы для текстовых полей и кнопки отправки. Заголовки для текстовых полей создаются с помощью стандартных элементов. Элементы помещают в форму хорошую коробку.

Обратите внимание, что каждое name текстовое поле имеет элемент ( title , , genre ). year Как вы видели в предыдущем руководстве, эти имена важны, так как у вас должны быть эти имена, чтобы позже можно было получить входные данные пользователя. Можно использовать любые имена. Полезно использовать значимые имена, которые помогают запоминать данные, с которыми вы работаете.

Атрибут value каждого элемента содержит немного кода Razor (например, Request.Form["title"] ). Вы узнали версию этого трюка в предыдущем руководстве, чтобы сохранить значение, введенное в текстовое поле (если таковые имеются) после отправки формы.

Получение значений формы

Затем добавьте код, обрабатывающий форму. В структуре вы выполните следующие действия:

Проверьте, публикуется ли страница (была отправлена). Код должен выполняться только в том случае, если пользователи нажали кнопку, а не при первом запуске страницы.
Получите значения, введенные пользователем в текстовые поля. В этом случае, так как форма использует POST команду, вы получите значения формы из Request.Form коллекции.
Вставьте значения в качестве новой записи в таблицу базы данных Movies .

В верхней части файла добавьте следующий код:

Первые несколько строк создают переменные ( title , genre и year ) для хранения значений из текстовых полей. if(IsPost) Строка гарантирует, что переменные задаются только при нажатии кнопки "Добавить фильм", то есть при публикации формы.

Как было показано в предыдущем руководстве, вы получите значение текстового поля с помощью выражения, например Request.Form["name"] , где имя — имя элемента.

Имена переменных ( title , genre и year ) являются произвольными. Как и имена, назначенные элементам, вы можете вызывать их как угодно. (Имена переменных не должны соответствовать атрибутам имен элементов в форме.) Но как и в случае с элементами, рекомендуется использовать имена переменных, которые отражают содержащиеся в них данные. При написании кода согласованные имена упрощают запоминать данные, с которыми вы работаете.

Добавление данных в базу данных

В только что добавленном блоке кода просто внутри закрывающей скобки if ( > ) блока (не только внутри блока кода) добавьте следующий код:

Этот пример аналогичен коду, используемому в предыдущем руководстве для получения и отображения данных. Строка, которая начинается с db = открытия базы данных, как и раньше, и следующая строка определяет оператор SQL еще раз, как вы видели ранее. Однако на этот раз он определяет оператор SQL Insert Into . В следующем примере показан общий синтаксис инструкции Insert Into :

INSERT INTO table (column1, column2, column3, . ) VALUES (value1, value2, value3, . )

Другими словами, вы указываете таблицу для вставки, а затем перечисляете столбцы для вставки, а затем перечисляете значения для вставки. (Как отмечалось ранее, SQL не учитывает регистр, но некоторые люди прописывает ключевые слова, чтобы упростить чтение команды.)

Столбцы, в которые вы вставляете, уже перечислены в команде (Title, Genre, Year) . Интересно, как получить значения из текстовых полей в VALUES часть команды. Вместо фактических значений отображаются @0 @1 и @2 , которые, конечно, являются заполнителями. При выполнении команды (в строке db.Execute ) передаются значения, полученные из текстовых полей.

Тем не менее внутри if блока добавьте следующую строку после db.Execute строки:

Полный блок кода выглядит следующим образом:

Тестирование команды insert (до сих пор)

Вы еще не сделали, но теперь хорошее время для тестирования.

В представлении дерева файлов в WebMatrix щелкните правой кнопкой мыши страницу AddMovie.cshtml и выберите команду "Запустить в браузере".

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

Введите фильм в форме, например "Гражданин Кейн", "Драма" и "1941". (Или что угодно.) Затем нажмите кнопку "Добавить фильм".

Если все пойдет хорошо, вы будете перенаправлены на страницу "Фильмы ". Убедитесь, что ваш новый фильм указан.

Проверка введенного пользователем

Вы снова перейдете на страницу "Фильмы ". Вы можете найти новый фильм, но он неполный.

При создании таблицы Movies вы явно указали, что ни одно из полей не может быть пустым. Здесь у вас есть форма записи для новых фильмов, и вы оставляете поля пустыми. Это ошибка.

В этом случае база данных не вызвала (или не вызвала) ошибку. Вы не указали жанр или год, поэтому код на странице AddMovie рассматривал эти значения как так называемые пустые строки. Когда команда SQL Insert Into выполнена, поля жанра и года не имели полезных данных в них, но они не были пустыми.

Очевидно, что вы не хотите, чтобы пользователи вводили в базу данных полупустые сведения о фильмах. Решение заключается в проверке входных данных пользователя. Изначально проверка будет просто убедиться, что пользователь ввел значение для всех полей (то есть, что ни один из них не содержит пустую строку).

Пустые и пустые строки

В программировании существует различие между различными понятиями "нет значения". Как правило, значение равно NULL , если оно никогда не было задано или инициализировано каким-либо образом. В отличие от этого, переменная, которая ожидает символьные данные (строки), может быть задана как пустая строка. В этом случае значение не равно NULL; Его просто явно задали в строку символов, длина которой равна нулю. Эти два оператора показывают разницу:

Это немного сложнее, чем это, но важно то, что null представляет своего рода неопределенное состояние.

Теперь, а затем важно понимать, когда значение равно NULL и когда это просто пустая строка. В коде страницы AddMovie вы получите значения текстовых полей с помощью Request.Form["title"] и т. д. При первом запуске страницы (перед нажатием кнопки) значение Request.Form["title"] null. Но при отправке формы Request.Form["title"] получает значение текстового title поля. Это не очевидно, но пустое текстовое поле не равно NULL; В нем просто есть пустая строка. Поэтому, когда код выполняется в ответ на нажатие кнопки, Request.Form["title"] в ней есть пустая строка.

Почему это различие важно? При создании таблицы Movies вы явно указали, что ни одно из полей не может быть пустым. Но здесь у вас есть форма входа для новых фильмов, и вы оставляете поля пустыми. Вы бы разумно ожидали, что база данных будет жаловаться, когда вы попытались сохранить новые фильмы, которые не имели значений для жанра или года. Но это точка, даже если оставить эти текстовые поля пустыми, значения не являются пустыми; Они пустые строки. В результате вы сможете сохранять новые фильмы в базе данных с пустыми столбцами, но не пустыми! — значения. Поэтому необходимо убедиться, что пользователи не будут отправлять пустую строку, которую можно сделать, проверяя входные данные пользователя.

Вспомогатель проверки

Чтобы проверить входные данные пользователя, выполните следующие действия.

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

Если возникла проблема, необходимо запретить вставку новых сведений о фильме в базу данных. В блоке if(IsPost) используйте && (логическое И) для добавления другого условия, которое проверяет Validation.IsValid() . По завершении весь if(IsPost) блок выглядит следующим образом:

Полный блок кода, включая код проверки, теперь выглядит следующим образом:

Отображение ошибок проверки

Измените разметку на странице так, чтобы она включает Html.ValidationMessage метод для каждого из трех элементов на странице, как показано в следующем примере:

Теперь полная страница выглядит следующим образом:

Чтобы узнать, как работает этот метод, добавьте элемент в раздел страницы. Затем определите именованные field-validation-error классы стилей и validation-summary-errors содержащие следующие правила:

Обычно вы, вероятно, помещаете сведения о стиле в отдельный CSS-файл , но для простоты их можно поместить на страницу. (Далее в этом руководстве вы переместите правила CSS в отдельный CSS-файл .)

Запустите страницу еще раз и намеренно оставьте несколько полей. Ошибки теперь более заметны. (На самом деле, они переучены, но это просто показать, что вы можете сделать.)

Добавление ссылки на страницу "Фильмы"

Один из последних шагов — сделать его удобным для получения страницы AddMovie из исходного списка фильмов.

Снова откройте страницу "Фильмы ". После закрывающего

тега, следующего за вспомогательным элементом WebGrid , добавьте следующую разметку:

По завершении запустите страницу "Фильмы ". Она будет выглядеть следующим образом:

Щелкните ссылку "Добавить фильм" , чтобы убедиться, что она перейдет на страницу AddMovie .

Ближайшие к следующему

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

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

С целью упрощения код не включает обработку исключений для выполнения в рабочей среде.

Предварительные требования

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

SQL Server Express LocalDB. если у вас нет SQL Server Express LocalDB, его можно установить на странице загрузки SQL Server.

Настройка образца базы данных

Создайте образец базы данных, выполнив следующие действия.

в Visual Studio откройте окно обозреватель сервера .

щелкните правой кнопкой мыши подключения к данным и выберите команду создать новую базу данных SQL Server.

В текстовом поле имя сервера введите (LocalDB) \mssqllocaldb.

В текстовом поле имя новой базы данных введите Sales, а затем нажмите кнопку ОК.

Пустая база данных Sales создается и добавляется в узел подключения к данным в обозреватель сервера.

Щелкните правой кнопкой мыши подключение к данным о продажах и выберите создать запрос.

Откроется окно редактора запросов.

вставьте скрипт T-SQL в редактор запросов, а затем нажмите кнопку выполнить .

По истечении короткого времени выполнение запроса завершается и создаются объекты базы данных. База данных содержит две таблицы: Customer и Orders. Эти таблицы изначально не содержат данных, но их можно добавить при запуске создаваемого приложения. База данных также содержит четыре простые хранимые процедуры.

Создание форм и добавление элементов управления

Создайте проект для приложения Windows Forms и назовите его SimpleDataApp.

Visual Studio создает проект и несколько файлов, включая пустую форму Windows Forms с именем Form1.

Добавьте две формы Windows Forms в проект, чтобы он включал три формы, и назначьте им следующие имена:

Навигация

NewCustomer

FillOrCancel

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

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

Форма навигации

Форма NewCustomer

Форма FillOrCancel

Сохранение строки подключения

Когда приложение пытается открыть подключение к базе данных, оно должно иметь доступ к строке подключения. Чтобы не вводить строку вручную в каждой форме, сохраните строку в файле App.config в проекте и создайте метод, возвращающий строку при вызове метода из любой формы в приложении.

Строку подключения можно найти, щелкнув правой кнопкой мыши подключение данных о продажах в Обозреватель сервера и выбрав Свойства. Найдите свойство ConnectionString , а затем с помощью клавиш CTRL + A, CTRL + C выберите и скопируйте строку в буфер обмена.

В столбце имя введите connString .

В списке тип выберите (строка подключения).

В списке область выберите приложение.

В столбце значение введите строку подключения (без кавычек), а затем сохраните изменения.

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

Написание кода для форм

Этот раздел содержит краткие обзоры того, что делает каждая форма. Он также предоставляет код, определяющий базовую логику при нажатии кнопки на форме.

Форма навигации

Форма навигации открывается при запуске приложения. Кнопка Добавить учетную запись открывает форму NewCustomer. Кнопка Выполнение или отмена заказов открывает форму FillOrCancel. Кнопка Выход закрывает приложение.

Преобразование формы навигации в начальную форму

если вы используете Visual Basic, в обозреватель решений откройте окно свойства , перейдите на вкладку приложение и выберите симпледатаапп. Navigation в списке начальных форм .

Создание автоматически создаваемых обработчиков событий

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

Если пропустить действие двойного щелчка в конструкторе и просто скопировать код и вставить его в файлы кода, не забудьте присвоить обработчику событий правильный метод. Это можно сделать в окне Свойства . Перейдите на вкладку события (воспользуйтесь кнопкой на панели инструментов с молнией) и найдите обработчик щелчка .

Добавление кода для логики формы навигации

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

Форма NewCustomer

если ввести имя клиента, а затем нажать кнопку создать учетную запись , форма NewCustomer создает учетную запись клиента, а SQL Server возвращает значение идентификатора в качестве нового идентификатора клиента. Затем можно разместить заказ для новой учетной записи, указав сумму и дату заказа и нажав кнопку поместить порядок .

Создание автоматически создаваемых обработчиков событий

Создайте пустой обработчик событий щелчка для каждой кнопки в форме NewCustomer, дважды щелкнув каждую из четырех кнопок. При двойном щелчке кнопки также добавляется автоматически созданный код в файл кода конструктора, который позволяет нажать кнопку для вызова события.

Добавление кода для логики формы NewCustomer

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

System.Data.SqlClient Перенесите пространство имен в область, чтобы не указывать полные имена его членов.

Добавьте в класс некоторые переменные и вспомогательные методы, как показано в следующем коде.

Заполните основные тексты методов для четырех обработчиков событий нажатия кнопки, как показано в следующем коде.

Форма FillOrCancel

Форма Филлорканцел запускает запрос для возврата заказа при вводе идентификатора заказа и нажатия кнопки найти заказ . Возвращенная строка отображается в сетке данных только для чтения. Можно пометить заказ как отмененный (X), если нажать кнопку отменить заказ или пометить заказ как заполненный (F), если нажать кнопку заполнить заказ . Если нажать кнопку найти порядок еще раз, появится обновленная строка.

Создание автоматически создаваемых обработчиков событий

Создайте пустые обработчики событий щелчка для четырех кнопок в форме Филлорканцел, дважды щелкнув кнопки. При двойном щелчке кнопки также добавляется автоматически созданный код в файл кода конструктора, который позволяет нажать кнопку для вызова события.

Добавление кода для логики формы Филлорканцел

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

Перенесите следующие два пространства имен в область, чтобы не указывать полные имена их членов.

Добавьте в класс переменную и вспомогательный метод, как показано в следующем коде.

Тестирование приложения

Запустите приложение и попробуйте создать несколько клиентов и заказов, чтобы убедиться, что все работает правильно. Чтобы убедиться, что база данных обновлена с учетом внесенных изменений, откройте узел таблицы в Обозреватель сервера, щелкните правой кнопкой мыши узлы Customers и Orders и выберите команду отобразить данные таблицы.

Урок посвящен языку PHP и базе данных MySQL. Рассматривается взаимодействие PHP и MySQL, способы занесения данных из формы в базу данных и вывод данных из базы на web-страницу.

В данном уроке PHP и MySQL Вам предстоит решить следующие задачи:

1. Создать базу данных, содержащую две таблицы: справочник пород кошек, таблицу сведений о потерявшихся животных.

2. Создать web-страницу, на которых будут размещена форма для подачи объявлений о потерявшихся кошках. Данные из этих объявлений заносятся в соответствующую таблицу сведений о потерявшихся животных.

3. Создать web-страницу, позволяющую просматривать информацию из базы данных. Данные в таблицы базы данных будут вноситься из объявлений, размещенных посетителями на сайте.

Задание № 1. Создание базы данных

Наши уроки PHP и MySQL начнем с создания базы данных.

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

Справочник пород

Название поля	Имя поля	Тип поля	Описание
идентификационный номер породы	id	Числовой
название породы	name_por	Символьный
характеристика породы	describe_por	Символьный	В поле хранится имя файла, который содержит описание породы и фотографию.

Сведения о потерявшихся кошках

Название поля	Имя поля	Тип поля	Описание
идентификационный номер кошки	id	Числовой
порода	por	Символьный
дата нахождения кошки: день месяц год	day month year	Символьный Символьный Символьный
место нахождения кошки	place	Символьный
пол кошки	pol	Символьный
возраст кошки	age	Символьный	Если возможно указать примерный возраст
описание кошки	outline	Символьный	Окрас, состояние здоровья и т. д.
координаты нашедшего	contact	Символьный	Любая контактная информация: телефон, e-mail, адрес
дополнительная информация	dop_info	Символьный	Например, кошка больна, есть клеймо, кормящая и пр.

В наших уроках PHP и MySQL рассмотрим два способа создания таблицы базы данных.

1. С помощью клиента MySQL.

2. Средствами PHP.

Способ 1. Создание базы данных с помощью клиента MySQL

С помощью клиентской программы MySQL - «phpMyAdmin» создадим таблицу Справочник пород (таблица 1).

1. Запустите Denwer ярлыком Start Denwer.

3. Создайте новую базу данных. Для этого впишите в поле Создать базу данных имя базы catsdb, кодировку установите utf8_general_ci и нажмите кнопку Создать (рис. 2).

5. Перейдите в базу данных catsdb, нажав соответствующую строку в левой панели (рис. 3).

6. Добавьте в базу данных таблицу Справочник пород, назовите ее: spravpor (структура таблицы и назначение полей приведены в таблице 1 Справочник пород). Для этого:

a. Внесите данные в поле Имя (имя таблицы - spravpor) и Количество столбцов (3), после чего нажмите кнопку ОК (рис. 4).

b. В открывшемся окне заполните данные по структуре таблицы (рис. 5).

c. После заполнения всех полей нажмите Сохранить. Перейдите в таблицу spravpor, нажав соответствующую строку в левой панели (рис. 6).

d. Откроется сама таблица (рис. 7).

Способ 2. Создание базы данных средствами PHP

В данном уроке PHP и MySQL создадим таблицу с помощью сценария PHP, но при этом база данных должна уже быть создана! В листинге 1 приведена программа создания таблицы под именем species средствами PHP. Структура таблицы species аналогична структуре таблицы spravpor.

1. Проанализируйте приведенные в листинге 1 PHP-сценарий и комментарии к нему в файле species.php.

2. Реализуйте код из листинга 1. Для этого:

3. После выполнения сценария убедитесь, что таблица species создана в базе данных catsdb (рис. 9, 10).

Листинг 1. Создание таблицы с помощью сценария PHP (файл species.php)

Комментарии к листингу 1:

1. Здесь адрес сервера MySQL — localhost (такой адрес указывается в случае если работа с базой данных ведется на локальном компьютере или компьютере где располагаются файлы с php-сценариями).

2. Программа на языке PHP обычно вставляется в HTML-текст. Поэтому предусмотрены специальные теги для отделения PHP-текста от HTML и ?>.

3. Если PHP-сценарий представляет собой самостоятельный модуль (как в листинге 1), он также должен начинаться с конструкции и заканчиваться конструкцией ?>.

4. Любой файл, содержащий PHP-сценарий, имеет расширение php, независимо от того, встроен сценарий в HTML-текст или полностью написан на PHP.

5. Многострочные комментарии должны начинаться с символов /* и завершаться символами*/. Однострочные комментарии предваряются символами //. Закрывать их не нужно.

6. В языке PHP имя переменной начинается со знака доллара ($), за которым следует собственно имя переменной. В именах переменных различаются верхний и нижний регистры. Имя переменной должно начинаться с буквы или символа подчеркивания, за которыми могут следовать буквы, цифры или знаки подчеркивания. Буквы должны быть из диапазона A—Z.

7. В конце каждого оператора php обязательно ставится точка с запятой.

8. Функции для работы с MySQL имеют префикс mysql_ (см. приложение 2).

В нашем уроке PHP и MySQL, используя программу из листинга 1 в качестве образца, напишите сценарий PHP для создания таблицы сведений о потерявшихся кошках (см. таблицу 2). Таблицу назовите catspotery, а файл сценария catspotery.php. Результат на рис. 11, 12

Добавление записи в базу данных

Мы подготовили таблицы базы данных. Сейчас на web-странице разместим форму подачи объявлений для тех, кто потерял кошку. Задача — обеспечить занесение информации из форм в соответствующие таблицы базы данных.

Примерный вид формы представлен на рис. 13.

При выполнениии данного урока PHP и MySQL создайте web-страницу с формой, как на рис. 13. Сохраните под именем forma_cats.html. В качестве файл-обработчика укажите poter_dobavl.php. Не забывайте о корреляции полей формы и полей соответствующей таблицы в базе данных и кодировка файла должна быть в utf-8 (Кодировка – Преобразовать в UTF-8).

Данные, введенные посетителем, заносятся в соответствующую таблицу базы данных. Имя PHP-сценария, отвечающего за эту операцию, указывается в атрибуте action тега . В листинге 2 приведен код PHP-сценария, осуществляющего подключение к серверу MySQL, выбор базы данных, запрос к базе данных. В данном случае это запрос INSERT, который вставляет данные из формы в базу данных.

1. Используя программу из листинга 2 в качестве образца, напишите PHP-сценарии, осуществляющие вставку записей в таблицы сведений о пропавших кошках.

2. Проверьте работоспособность формы. В базу данных (рис. 14) должна сохраняться информация, введенная в форму (рис. 13).

3. Наполните базу 5-ю записями.

Листинг 2. Занесение данных формы в базу данных (файл poter_dobavl.php)

Извлечение записей из базы данных

В нашем уроке PHP и MySQL Вы реализовали технологию заполнения базы данных.

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

Код сценария, представленный в листинге 3, выводит информацию из базы данных на web-страницу, в соответствии с рисунком 15.

Листинг 3. Вывод информации из базы данных на Web-страницу. Передача параметров (файл vivod_poter.php)

Изучите код сценария из листинга 3 и реализуйте его. Проверьте работоспособность сценария.

Реализуйте возможность работы со справочником пород spravpor. Для этого:

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

2. Используя запросы SQL (рис. 16), заполните базу 3-мя записями про породы кошек (длинношерстные, полудлинношерстные, короткошерстные) (рис. 17). Все необходимые материалы находятся в папке cats.

3. Реализуйте web-страницу, на которую выводятся данные из справочника пород. У каждой породы должна быть фотография.

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

В этом документе описана процедура создания простого веб-приложения, которое подключается к серверу базы данных MySQL. Здесь также рассмотрены основные идеи и технологии веб-разработки, такие какJavaServer Pages (JSP), библиотека стандартных тегов JavaServer Pages (JSTL), интерфейс API связи с базами данных Java (JDBC) и двухуровневая архитектура между клиентом и сервером. Этот учебный курс разработан для начинающих разработчиков, обладающих базовыми знаниями в области веб-разработок и желающих применить свои знания к базе данных MySQL.

MySQL является популярной системой управления базами данных с открытым кодом, которая обычно используется в веб-приложениях благодаря своей скорости, гибкости и надежности. MySQL использует SQL (язык структурированных запросов) для доступа к данным в базе данных и их обработки.

Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.

7.2, 7.3, 7.4, 8.0, пакет Java EE

Драйвер JDBC MySQL Connector/J

GlassFish Server Open Source Edition 3.1.2.2

Примечания:

Комплект загрузки Java среды IDE NetBeans позволяет пользователям установить сервер GlassFish. Для работы с данным учебным курсом требуется сервер GlassFish.

Если необходимо сравнить проект с работающим решением, можно загрузить демонстрационное приложение.

Планирование структуры

С помощью двухуровневой архитектуры, в которой клиент взаимодействует с сервером напрямую, можно создать простое веб-приложение. В рамках данного учебного курса веб-приложение Java взаимодействует напрямую с базой данных MySQL с использованием API связи с базами данных Java. В сущности, именно драйвер MySQL Connector/J JDBC обеспечивает обмен данными между кодом Java, распознанным сервером приложения (GlassFish), и любым содержимым на SQL, языке, понятном для сервера базы данных (MySQL).

Приложение, создаваемое в этом учебном курсе, предполагает создание двух страниц JSP. На каждой такой странице с помощью HTML и CSS реализован простой интерфейс, и применяется технология JSTL для выполнения логики, напрямую запрашивающей базу данных с вставкой извлеченных данных на двух страницах. В базе данных MySQL MyNewDatabase содержатся две таблицы базы данных Subject и Counselor , которые были созданы при работе с учебным курсом Подключение базы данных MySQL. Рассмотрим следующий двухуровневый сценарий.

Для реализации описанного выше сценария необходимо разработать простое приложение для организации IFPWAFCAD Международной ассоциации по консультированию и развитию для бывших профессиональных борцов.

index.jsp

response.jsp

Создание нового проекта

Сначала необходимо создать новый веб-проект в среде IDE:

С помощью этого мастера можно создать пустое веб-приложение в стандартном проекте IDE. В стандартном проекте для компиляции, развертывания и выполнения приложения используется созданный в среде IDE сценарий сборки проекта Ant.

В панели "Сервер и параметры" укажите сервер GlassFish в качестве сервера, на котором будет запускаться приложение.

*Примечание.*Сервер GlassFish отображается в раскрывающемся списке 'Сервер', если установлена версия Java IDE NetBeans. Поскольку сервер GlassFish включен в загрузку, он регистрируется в среде IDE автоматически. Для использования в проекте другого сервера нажмите кнопку "Добавить" рядом с полем с раскрывающимся списком "Сервер" и зарегистрируйте другой сервер в среде IDE. Работа с другими серверами, помимо GlassFish в рамках данного учебного курса не рассматривается.

В поле "Версия Java EE" выберите Java EE 5.

Для веб-проектов Java EE 6 и Java EE 7 использование дескриптора развертывания web.xml не требуется. Шаблон проекта NetBeans не содержит файл web.xml в проектах Java EE 6 и Java EE 7. Однако в данном учебном курсе рассматривается процесс объявления источника данных в дескрипторе развертывания. Функции, характерные только для Java EE 6 или Java EE 7, не требуются, поэтому в качестве версии проекта можно указать Java EE 5.

Примечание. Точно так же можно указать в качестве версии проекта Java EE 6 или Java EE 7, а затем создать дескриптор развертывания web.xml . В мастере создания файла выберите категорию "Web", а затем выберите "Стандартный дескриптор развертывания".

Подготовка веб-интерфейса

Настройка страницы приветствия

Убедитесь, что страница index.jsp открыта в редакторе. Если файл еще не открыт, дважды щелкните index.jsp под узлом "Веб-страницы" проекта IFPWAFCAD в окне "Проекты".

В редакторе измените текст между тегами на Домашняя страница IFPWAFCAD .

Палитру можно настроить в соответствии с существующими требованиями - щелкните правой кнопкой мыши палитру и выберите 'Показать крупные значки' и 'Скрыть имена элементов', чтобы палитра выглядела как на рисунке выше.

Установите курсор сразу же после тегов . (Именно в этом месте будет внедрена новая таблица HTML). Далее в окне "Палитра" дважды щелкните значок "Таблица".

В появившемся диалоговом окне "Вставка таблицы" укажите следующие значения и затем нажмите кнопку "ОК":

Рядов: 2

Столбцов: 1

Размер границы: 0 Код таблицы HTML создан и добавлен на страницу.

Добавьте следующее содержимое в заголовок таблицы и ячейку первой строки таблицы (новое содержимое выделено полужирным шрифтом):

Между тегами введите следующее содержимое (новое содержимое выделено полужирным шрифтом):

Нажмите клавишу Enter, чтобы добавить пустую строку после добавленного содержимого, затем дважды щелкните "Список" в палитре, чтобы открыть диалоговое окно "Вставить список".

В диалоговом окне "Вставить список" ведите subject_id для текстового поля "Имя" и нажмите "OK". Обратите внимание на то, что к форме добавляется фрагмент кода для раскрывающегося списка.

Количество параметров для раскрывающегося списка не имеет значения. Позже в этом учебном курсе будет показано добавление тегов JSTL для динамического создания на основе данных, полученных из таблицы базы данных "Subject".

Для форматирования кода щелкните правой кнопкой мыши в редакторе и выберите 'Формат' (Alt-Shift-F; Ctrl-Shift-F в Mac). Код автоматически форматируется и должен теперь выглядеть следующим образом:

Для просмотра этой страницы в браузере щелкните правой кнопкой мыши в редакторе и выберите 'Запустить файл' (Shift-F6; Fn-Shift-F6 в Mac). После этого страница JSP будет автоматически скомпилирована и развернута на сервере. Открывается браузер по умолчанию, и в нем выводится страница из местоположения, где она развернута.

Для подготовки интерфейса для страницы response.jsp сначала необходимо создать файл в проекте. Обратите внимание на то, что большая часть содержимого, отображаемого на странице, создана динамически с помощью технологии JSP. Поэтому в следующих шагах будет необходимо добавить метки-заполнители, которые позже будут заменены кодом JSP.

Щелкните правой кнопкой мыши узел проекта "IFPWAFCAD" в окне "Проекты" и выберите "Создать > JSP". Откроется диалоговое окно "Новый файл JSP".

В поле "Имя файла JSP" введите response . Обратите внимание на то, что в настоящий момент для поля "Расположение" выбран каталог "Веб-страницы", это означает, что файл будет создан в каталоге проекта web . Это то же местоположение, что и для страницы приветствия index.jsp .

Примите остальные значения по умолчанию и нажмите кнопку "Готово". В редакторе выполняется создание и открытие шаблона новой страницы response.jsp . Новый узел JSP также отображается в каталоге "Веб-страницы" в окне "Проекты".

В редакторе измените заголовок на IFPWAFCAD -

Для просмотра этой страницы в браузере щелкните правой кнопкой мыши в редакторе и выберите 'Запустить файл' (Shift-F6; Fn-Shift-F6 в Mac). Выполняется компиляция и развертывание страницы на сервере GlassFish с последующим открытием в браузере по умолчанию.

Создание таблицы стилей

Создайте простую таблицу стилей для расширения просмотра в веб-интерфейсе. При работе с данным учебным курсом предполагается, что пользователь обладает знаниями о правилах стилей и их влиянии на соответствующие элементы HTML на страницах index.jsp и response.jsp .

Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( ) на главной панели инструментов IDE. Выберите категорию "Web", а затем выберите "Каскадная таблица стилей" и нажмите кнопку "Далее".

Введите style в поле "Имя файла CSS" и нажмите кнопку "Готово". Среда IDE создает пустой файл CSS и располагает его в том же местоположении проекта, что и index.jsp и response.jsp . Обратите внимание на то, что узел для style.css отображается теперь внутри проекта в окне "Проекты", а файл открывается в редакторе.

В редакторе добавьте следующее содержимое к файлу style.css :

Подключите таблицу стилей к index.jsp и response.jsp . На обеих страницах добавьте следующую строку между тегами :

Для быстрого перехода между открытыми в редакторе файлами нажмите CTRL+TAB, а затем выберите требуемый файл.

Подготовка средств обмена данными между приложениями и базой данных

После подготовки источника данных и пула подключений для сервера необходимо определить в приложении необходимость использования источника данных. Как правило, для этого создается запись в дескрипторе развертывания приложения web.xml . Наконец, необходимо проверить доступность для сервера драйвера базы данных (JDBC MySQL Connector/J).

*Примечание. *Для дальнейшей работы необходимо убедиться в том, что база данных MySQL с именем MyNewDatabase настроена корректно и содержит данные примера из ifpwafcad.sql. Этот файл SQL создает две таблицы Subject и Counselor и затем заполняет их данными для примера. Если это не было выполнено ранее, или с этим заданием возникли сложности, то прежде чем продолжить учебный курс, обратитесь к разделу Подключение к базе данных MySQL.

Помимо этого для создания источника данных и работы с сервером GlassFish в рамках данного учебного курса необходимо защитить базу данных паролем. При использовании учетной записи MySQL root по умолчанию с пустым паролем с помощью командной строки можно установить другой пароль.

В качестве пароля в этом учебном курсе используется nbuser . Для установки пароля nbuser в командной строке откройте в системе MySQL каталог bin и введите следующие данные:

Дополнительные сведения приведены в официальном справочном руководстве по работе с MySQL: Защита исходных учетных записей MySQL.

Читайте также: