23.12.2011
Примечание автора: Для данной статьи пришлось сделать 17 иллюстраций, так что урок получился просто чудовищно длинным. При сохранении на одной странице всей статьи целиком она загружается весьма неторопливо, а поиск нужного материала требует усилий. К сожалению, разбить материал на более мелкие уроки не получается возможным – темы довольно объёмны и требуют соответствующего освещения. В первой половине этого урока мы уделили основное внимание системным настройкам WebMatrix и могло создаться впечатление, что это простой продукт для тех, кто только «тыкает кнопочки». Однако в окончании статьи я намерен развеять это заблуждение и привести несколько примеров кода, который может понадобиться при работе с данными.
Создание страницы, которая использует данные.
В предыдущей статье вы видели, что ваш сайт использует слой, чтобы создать HTML <head>, стиль, тело и все остальное. Если вы прочитаете дальше, то столкнетесь с уже установленными _siteLayout.cshtml и _PageStart.cshtml. Если вы не сделаете этого, то остальная часть этого кода не заработает, и вам необходимо будет вернуться к статье 3.
Хорошо бы использовать слои.Теперь вы должны написать определенный код для определенной страницы, используя @RenderBody () (так называеется шаблон). Вставьте его во всю страницу.
С его помощью создайте новую страницу CSTHML и назовите ее datamovies.cshtml.
Замените весь код этой страницы на статический HTML, который использовали ранее:
<div id="movieslist"> <ol> <li><a href="#">It's a wonderful life</a></li>
<li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li>
<li><a href="#">The Lion King</a></li> </ol> </div>
Когда вы повнимательнее его рассмотрите, то увидете <div>, который определяет список <ol>.
У статического списка есть 4 элемента. Если мы захотим добавить 5-ый элемент, мы добавляем новую запись в <li></li>.
При получении данных по запросу из базы данных страница не знает, сколько элементов находится в базе данных, таким образом, она должна произвести «n-элементов» в <li></li>, где «n» - число записей в базе данных. Это идеально для циклического выполнения кода, и через мгновение вы точно запишете этот цикл.
Но прежде, чем вы сделаете это, сначала давайте сообщим странице о базе данных. Вверху datamovies.cshtml введите следующий код:
@{ var db= Database.Open("Movies"); var sqlQ = "SELECT * FROM Favorites";
var data = db.Query(sqlQ); }
Вы, наверняка, помните символ «@» из последней статьи, который использовался, чтобы сообщить серверу, что следующий код, который необходимо выполнить, является кодом Razor. В этом случае у нас есть много строк кода, таким образом, вместо того, чтобы помещать перед каждым этот символ, мы можем использовать символ «{« и затем писать весь наш код, заканчивая блок кода символом «}».
Если программировали на Java, C++, C, или C#, то, вероятно, узнаете эти символы, которые называют «фигурными скобками».
Давайте разберем этот код построчно:
var db= Database.Open("Movies");
Достаточно задать тип «var» для переменной и это уже адресуемый элемент, содержащий данные. Данный код сообщает серверу, что необходимо открыть базу данных под названием «Фильмы», и сохранить ссылку на нее в переменной под названием «db».
var sqlQ = "SELECT * FROM Favorites";
Данная строка кода создает sqlQ с типом var, и хранит SELECT * FROM.
При использовании баз данных язык под названием «Язык структурированных запросов» (SQL) обычно используется, чтобы найти данные, которые вы хотите. Фактически SQL используется не только для запросов данных,но и может использоваться, чтобы вставлять новые данные. С этим вы познакомитесь в следующей статье, а пока мы используем SQL для получения данных.
При получении данных из базы данных обычно используется команда «SELECT». Синтаксис: SELECT <что получить> FROM <откуда получить> WHERE <условие>
<Что получить> может быть списком полей или подстановочным знаком (*) - символ, который означает «все». Мы не установили условие, поэтому чтобы получить все столбцы и все записи из таблицы «Избранное» необходим следующий запрос: SELECT * FROM Favorites.
var data = db.Query(sqlQ);
Это рабочая лошадка страницы. Ранее вы открывали базу данных и использовали переменную «db», чтобы обратиться к ней. WebMatrix понимал, то, что вы открываете, является базой данных. У объекта базы данных в WebMatrix есть несколько функций (обычно их называют «методы»), с помощью которых вы можете обратиться к БД. Один из таких методов называется «Query», он выполняет команду SQL. Вы передаете эту команду, как строку, и база данных выполняет ее, возвращая ряд записей. Такой набор записей загружается в переменную, называемую «данные». Теперь, когда у нас есть данные, с их помощью мы можем создавать интересные вещи.
В данный момент ваша страница должна быть похожа на:
@{ var db= Database.Open("Movies"); var sqlQ = "SELECT * FROM Favorites";
var data = db.Query(sqlQ); } <div id="movieslist"> <ol>
<li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div>
Мы получили данные из базы данных, но мы ничего еще не сделали с ними. У нас все еще присутствует статический HTML-код на странице. Давайте изменим это.
Во-первых, удалите весь код, кроме одной части, включающую поля <li> так, чтобы <ol> стал похож на это:
<ol> <li><a href="#">It's a wonderful life</a></li> </ol>
Как вы помните, ранее, когда мы расказывали, что, если у нас есть n-ое количество полей в базе данных, то у нас должно быть n-ое количество записей в списке. Это достижимое использование цикла, которое позволяет написать цикл.
Используя «Razor», добавляете в свой код символ @, таким образом, цикл станет похож на:
<ol> @foreach(var row in data) { <li><a href="#">It's a wonderful life</a></li> } </ol>
Код говорит, что серверу необходимо считать число строк в данных и для каждой из них выписывать тег <li>.
Результат этого, конечно, «It’s a wonderful life», выписанный 4 раза, поскольку в моей базе данных 4 записи.
Сервер понимает, что ему говорят сделать, и код говорит ему выписывать название фильма для каждой строки в базе данных.
Давайте будем поумнее. То, что мы действительно хотим сделать для каждой строки в базе данных, это выписать имя фильма. Другими словами, замените текст «It’s a wonderful life» именем фильма в строке, на которой в настоящий момент остановился цикл.
Когда вы создавали базу данных, вы назвали столбец, который содержит имя фильма «Имя», и уже знаете, что текущую запись называют «строкой», таким образом, вы можете вывести строку значения. Столбец «Имя» будет содержать имя фильма.
Измените свой код на этот:
<ol> @foreach(var row in data) { <li><a href="#">@row.Name</a></li> } </ol>
Теперь вы сообщаете серверу, что для каждой строки в базе данных, необходимо выписать поле «Имя» из строки с элементом <li>. Давайте посмотрим, как это выглядит. Запустите свою страницу из файла datamovies.cshtml:
Вы увидите, что у нас опять есть все фильмы!
Теперь, когда страница стала динамической, и загруженные фильмы основаны на данных в базе, давайте добавим другой фильм к базе, и посмотрим, что произойдет.
Просто вернитесь к редактору базы данных, откройте таблицу «Избранное», и добавьте новую строку данных, как показано здесь:
Затем запустите свою страницу. Появится новый фильм в списке, не написанный в HTML.
Если вы писали код на встроенных языках, как это делали раньше, то, возможно, заметили, что WebMatrix находит контент, когда он помещен внутрь тегов <li>. Я не должен был писать @row.Name или что-либо подобное этому, так как пишу @row.Name в том месте, где необходимо. Это делает редактирование и поддержку файлов CSHTML намного легче, чем в таких языках, как PHP, где я использовал бы <?php echo(row.Name);>, или что-то подобное.
Это также позволяет мне легко смешивать динамический и статический контент. Например, если я изменяю код на этот:
<div id="movieslist"> <ol> @foreach(var row in data){
<li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li> } </ol> </div>
Результат – это интеграция статического HTML-кода в динамический управляемый базой данных контент (поля), который похож на:
Вы создали свою первую управляемую данными динамическую веб-страницу. Лучше один раз увидеть, чем десять раз услышать!
Заключение
В этой статье вы взяли список фильмов, который создали до этого и превратили его в динамический управляемый данными веб-сайт. Вы создали SQL-серверную компактную базу данных с таблицей, которая содержит ваши любимые фильмы, и затем посмотрели, как написать код, чтобы найти фильмы в базе данных и выписать их описание HTML в браузере. Вместе с функционалом слоев из статьи 3, вы узнали, как создавать простую и полезную для продвижения бизнеса страницу CSHTML.
В следующей статье вы сделаете следующий шаг и увидете, что происходит, если вы позволяете своим пользователям добавлять фильмы к базе данных, если у них нет доступа к исходному коду WebMatrix. Вы увидете, как создать веб-интерфейс, который позволяет пользователям использовать свой браузер, чтобы изменять детали и код, который вы написали, загрузить эти детали в базу данных. После чего сайт сразу необходимо обновить, чтобы просмотреть получившиеся изменения!
В следующей части вы узнаете, как создавать веб-страницу, которая позволит вашим пользователям добавлять данные к вашему сайту.
23 декабря 2011 г.
Здаойный А.В.
