26.12.2011
Статья получилась длинной (10К+ знаков), однако всего с 6 иллюстрациями, так что я не стану разбивать её на части – постарайтесь перенести это непростое чтение… =)
Итак, вы уже знаете, как создавать сайт в WebMatrix, как использовать моделирование и слои, как сделать сайт меньше, легче в поддержке и быстро загружаемым в браузере. Вы создавали динамические страницы и чтобы они могли управлять данными. В этой статье вы научитесь создавать страницу, на которой пользователи смогут добавлять данные к вашей базе данных.
Создание и соединение добавляющей страницы
Используя WebMatrix создайте новую страницу и назовите ее «AddMovie.cshtml».
Удалите контент страницы, которую создал WebMatrix, и замените его на следующий:
<h1>Add a New Movie to the database</h1>
Теперь найдите свою страницу «datamovies.cshtml» и откройте ее. Она должна выглядеть примерно так:
@{ var db= Database.Open("Movies"); var sqlQ = "SELECT * FROM Favorites";
var data = db.Query(sqlQ); } <div id="movieslist"> <ol> @foreach(var row in data){
<li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li> } </ol></div>
Перед закрывающимся тегом </div> добавьте следующую хтмль строку (как вы помните из более ранней статьи, она показывает, как HTML определяет ссылку на другую страницу):
<a href="AddMovie.cshtml">Add a new movie</a>
Откройте сайт и просмотрите страницу в браузере. Она должна выглядеть примерно так:
Нажмите «Добавление нового фильма», и перейдете на страницу, которую создавали ранее.
Вы ничего не увидите. Добавление произойдет на следующем шаге.
Осуществляя добавление, вы, возможно, заметили, что, в отличие от остальных текстов текст «Добавление нового фильма к базе данных» разработан по-другому. В теге <h1> не был указан такой же путь, как в заголовке h1. Проверьте, заметили ли вы разницу. (Подсказка: заголовок h1 считают дочерним элементом тега <header>, но это не все… Что вы добавили бы к файлу CSS, чтобы прописать тот же самый путь?)
Создание формы добавления фильма
Как правило, при использовании HTTP ваш браузер обращается с запросами к серверу. Команда GET протокола HTTP предполагает получение информации с сервера. Вы часто делали это, но, возможно, не осознавали, потому что использовали GET неосознанно, и браузеры запрашивали страницы. Протокол HTTP также поддерживает протокол, называемый POST, который позволяет отсылать информацию назад к серверу.
Хорошо, если у вас есть динамичное приложение, то логично было бы спросить, трудно ли этому приложению отправлять данные на сервер и возвращать результат. Я уверен, что вы видели сотни сайтов, где необходимо вводить некоторую информацию и нажимать кнопку Submit (Отправить), чтобы отправить эту информацию на сервер.
Такие приложения используют HTML-форму. Когда вы нажимаете Submit, браузер отправляет информацию, содержащуюся в полях формы на сервер, используя команду POST. Опять-таки, все это происходит «под капотом», и вы не должны делать ничего лишнего, но вам полезно знать, какая команда использует запрос, таким образом, чтобы сервер соответствующе мог ответить. Вы узнаете, как сделать так, чтобы фильмы добавлялись в вашу базу данных.
Мы запустим очень простую форму. Она не очень симпатичная, но соответствует необходимым требованиям.
<h1>Add a New Movie to the Database</h1> <form action="" method="post">
<p>Name:<input type="text" name="formName" /></p>
<p>Genre:<input type="text" name="formGenre" /></p>
<p>Year:<input type="text" name="formYear" /></p>
<p><input type="submit" value="Add Movie" /></p> </form>
Вот, как она будет выглядеть (как я говорил, не очень симпатично):
Если вы не можете выяснить, добавляли ли содержимое ранее, вы можете легко зафиксировать CSS так, чтобы у нового тега <h1> был тот же самый стиль CSS, как и в заголовке тега <h1></h1>. Откройте файл movie.css, который создавали в части 3 и добавьте в него следующий код:
h1 { font-size: xx-large;font-weight: normal;padding: 0px;margin: 0px; }
Теперь попытайтесь запустить свою страницу «AddMovie.cshtml» снова. Обоим тегам <h1> необходимо применить тот же самый стиль.
Теперь давайте посмотрим на HTML, который мы только что написали, чтобы создать эту форму.
<form action="" method="post">
Первая новая вещь – это тег <form>. Он объявляет форму и, когда пользователь нажимает кнопку «submit», которая должна присутствовать в форме, тег <form> сообщает серверу, что действие будет отправлено HTTP. На основании того факта, что параметр действия пуст, эта же самая страница (то есть. AddMovie.cshtml) обрабатывает сообщение с формы.
<p>Name:<input type="text" name="formName" /></p>
<p>Genre:<input type="text" name="formGenre" /></p>
<p>Year:<input type="text" name="formYear" /></p>
Внутри тега <form> вы увидете три элемента управления <input>. Они используют HTML управление <input>, у которого может быть много настроек типа. В данном случае тип – это «текст», который предоставляет вам основное текстовое поле, в которое пользователь может вводить текст. Каждому полю дается имя, являющееся переменной, которую будет использовать сервер для сохранения значения, которое пользователь введет в текстовое поле перед передачей данных.
<p><input type="submit" value="Add Movie" /></p>
Наконец, у нас есть управляющий элемент <input> с типом «submit», который определяет представление кнопку. Когда пользователь нажмет на эту кнопку, будет вызвано действие POST HTTP, и данные, которые введет пользователь, будут отправлены на сервер.
Если вы нажмете на кнопку, ничего не произойдет, потому что вы не записали код, чтобы все-таки обработать отправку сообщения от сервера. Сделайте это далее.
Обработка данных из формы
Когда вы создавали форму, вы оставили параметр действия пустым, что означает, что вы определяете, что эта страница должна принять представление формы.
Обновите страницу «AddMovie.cshtml» с некоторым кодом, чтобы он выполнялся всякий раз, когда загружается страница. Для этого добавьте часть кода вверху страницы, как показано здесь:
@{
// Code to execute
}
<h1>Add a New Movie to the Database</h1>
<form action="" method="post">
<p>Name:<input type="text" name="formName" /></p>
<p>Genre:<input type="text" name="formGenre" /></p>
<p>Year:<input type="text" name="formYear" /></p>
<p><input type="submit" value="Add Movie" /></p> </form>
Ранее вы видели, что первый раз, когда вы называете страницу, вводя ее адрес в браузере (или нажимая Run при запуске файла), браузер делает запрос, чтобы страницы отображались, используя команду HTTP GET. Позже вы нажимали кнопку Submit, потому что свойство действия было пробелом, работа команды POST HTTP заключалась только в названии той же самой страницы.
Так, в своем коде вам необходимо будет определить, каким способом появляется страница: при использовании команды GET, или при использовании команды POST. К счастью, .NET Framework позволяет проверять команду, не вдаваясь в сложность разбивания HTTP-заголовков, чтобы посмотреть, какое вы получаете сообщение. Вы просто используете проверку If (IsPost), которая при истине означает, что пользователь использовал форму для размещения информации.
@{ If(IsPost) {
// Do something on the POST
} }
Когда вы устанавливаете форму, вы даете ей название (formName, formGenre, formYear) и заполняете значения, которые предоставляет пользователь. Когда браузер вызовет сервер, он будет использовать его, отправляя сообщение, которое содержит «formName=something», «formGenre=something», «formYear=something» и так далее.
Вы должны будете сначала установить некоторые переменные сервера, а затем считать их из сообщения HTTP. Это не так сложно, как кажется :)
@{ var MovieName=""; var MovieGenre=""; var MovieYear=""; if(IsPost){
MovieName=Request["formName"]; MovieGenre=Request["formGenre"];
MovieYear=Request["formYear"]; } }
В этой части кода вы видите, что были установлены 3 переменные (MovieName, MovieGenre и MovieYear), они инициализированы со значениями, которые представил пользователь. В следующем шаге вы добавите код, чтобы открыть базу данных и добавить в нее информацию.
Заполнение базы данных
В предыдущей статье для получения данных из базы, вы использовали запрос SQL «SELECT», который выбирал данные из базы для считывания. В данном случае вы добавляете данные к базе, используя запрос на вставку данных.
Команда SQL «INSERT» использует следующий синтаксис:
INSERT INTO Table (Column1, Column2, ...ColumnN) VALUES (Value1, Value2, ... ValueN)
Давайте посмотрим, как это будет выглядеть в нашем коде:
@{ var MovieName=""; var MovieGenre=""; var MovieYear=""; if(IsPost){
MovieName=Request["formName"]; MovieGenre=Request["formGenre"];
MovieYear=Request["formYear"];
var SQLINSERT = "INSERT INTO Favorites (Name, Genre, ReleaseYear) VALUES (@0, @1, @2)";
var db = Database.Open("Movies");db.Execute(SQLINSERT, MovieName, MovieGenre, MovieYear); } }
Вы можете замитить, что мы создаем строку под названием SQLINSERT. Razor позволяет определять параметризованные значения в этой строке, таким образом, вместо того, чтобы пытаться добавить значения к строке для «MovieName», «MovieGenre» и «MovieYear», мы можем просто использовать @0, @1 и @2. Когда мы выполним запрос, платформа позволит нам осуществить замену. Вы можете также «очистить» параметры прежде, чем ввести их в запрос. Это позволяет защитить код SQL от параметра, использующегося в качестве параметра атаки, называемого «Атака с использованием кода SQL».
Затем мы открываем базу данных и вызываем метод Execute в базе данных, чтобы дать команду выполнения запроса на вставку. Значения заменяются и добавляются к базе данных.
Давайте добавим еще одну строку после db.Execute(), которая перенаправит пользователя к странице, на которой можно просмотривать любимые фильмы и можно увидеть результаты добавления.
Response.Redirect("datamovies.cshtml");
Теперь запуститите страницу и увидеть форму. Добавьте к ней некоторые данные:
Нажмите кнопку «Add Movie». Сервер добавит данные к базе данных и затем перенаправит вас к списку для просмотра результатов. Вы увидете, что новый любимый фильм добавился в базу!
Важно знать: В данной статье вы узнали, как введенные пользователем данные добавить непосредственно в базу данных. Для изучения основ создания сайта это неободимо. Но прежде, чем вы пойдете дальше, необходимо сделать следующее:
- Проверьте входные параметры на допустимые значения, и предоставьте пользователям точные сведения, чтобы они вводили данные корректно. Например, если пользователи будут вводить некорректное значение в поле «Год», вместо того, чтобы позволить им ввести неправильное значение в базу данных, им нужно сообщить об этом,.
- Проверьте входные параметры на значения, которые могли бы использовать хакеры, чтобы избежать повреждения вашей базы данных. Общую атаку называют «инъекцией» SQL, когда пользователь отправляет команду SQL, а сервер выполняет потенциально разрушительные действия или предоставляет частные данные.
Более подробную информацию об использовании баз данных в WebMatrix вы можете найти здесь: www.asp.net/webmatrix/tutorials/5-working-with-data
Заключение
Вы научились добавлять данные к базе данных фильмов. Вы создавали HTML-форму, чтобы обработать пользователей, вводили и видели, как добавлять значения непосредственно к базе данных. Вы научились автоматически перенаправлять пользователя. Когда информация была добавлена, возвращались вниз страницы и просматривали данные, которые были добавлены.
В следующей статье вы сделаете шаг вперед и добавите функциональность, которая позволяет пользователю редактировать данные.
Важное примечание. Дорогие коллеги, в данном уроке я описал обращения с БД напрямую в рамках разработки в WebMatrix, однако не стоит забывать, что если вы используете WebMatrix, как инструмент для работы с какой-то CMS или фреймворком (например, я чаще всего работаю с .NET Forge), то правильнее (технологичнее и безопаснее) использовать API, а не прямые обращения к БД. Подобный подход приемлем только для «самописных» проектов и в очень редких случаях, если вы «гуру» (себя я к таковым не отношу). Постарайтесь быть аакуратными, поскольку если из-за критической ошибки и некорректного обращения к БД вы будете виноваты в поломке CMS или фреймвора, то отговорка «меня так научили в уроке по 101й разработке сайта» не поможет…
