Веб-разработка 101: Часть 5, Использование данных (начало)


23.12.2011

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

Итак вы уже узнали, как создавать страницу HTML с посмощью WebMatrix; как начать эффективно создавать сайт; как разработать веб-страницу, используя каскадные таблицы стилей (CSS) (начало и конец урока); как использовать функционал слоев, встроенный в WebMatrix с синтаксисом 'Razor', чтобы сосредоточиться на контенте своей страницы и не отвлекаться на инфраструктуру (начало и окончание урока).

В этой главе мы рассмотрим статический список фильмов, который вы использовали, и сделаем его динамическим. За короткий промежуток времени вместо создания списка фильмов от руки в HTML мы поместим список в базу данных, и сделаем так, чтобы WebMatrix считал базу данных и сгенерировал HTML. Таким способом можно легко изменять базу данных и автоматически обновлять веб-страницы.

Создание баз данных в WebMatrix

Для начала найдите рабочее пространство «Баз данных» в WebMatrix и откройте его. В центре окна вы увидете опцию «Добавление базы данных к своему сайту».

Веб-разработка 101: Часть 5, Использование данных

Выберите это меню, и WebMatrix создаст новую базу данных под названием «Movies.sdf». Если у вашего сайта будет другое имя, например, «foo», то WebMatrix создаст базу данных, основанную на этом имени (то есть foo.sdf).

Вы увидете базу данных в списке баз данных в левой стороне окна:

Веб-разработка 101: Часть 5, Использование данных

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

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

Веб-разработка 101: Часть 5, Использование данных

WebMatrix построит таблицу и откроет редактор столбца. Это позволит вам создавать новые столбцы в пределах своей таблицы базы данных. На языке базы данных «Запись» - это все данные для определенного объекта. Так, например, данные для человека были бы записью их имени, возраста, адреса и телефонного номера. Столбцы – это значения отдельной части данных, независимо к какой записи они относятся. Так, в вышеупомянутом примере Имя является таким же столбцом, как и возраст.

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

Веб-разработка 101: Часть 5, Использование данных

Во-первых, давайте создадим ID. ID – это просто идентификатор для определенной записи. У вас не должно быть одного ID, особенно для простой базы данных как эта. Но это хороший пример того, чтобы создать более сложные базы данных. Он покажется вам полезным для отслеживания данных и создания запросов данных.

В редакторе столбца заполните детали, как показано ниже:

Веб-разработка 101: Часть 5, Использование данных

Столбец получит имя «идентификатор», и определит его тип как числовой (bigint), у которого должно быть значение (Позвольте Нули, установлен в Ложь). После этого определится, что поле содержит идентификационные данные, что означает, что мы сообщаем базе данных, что используем это значение в качестве ID. Плюс в том, что когда мы добавляем новую запись в базу данных, она обновит ID автоматически, таким образом, мы не должны будем волноваться об отслеживании той информации, которая была добавлена в последнюю очередь, не должны будем получать ID и убеждаться в том, что запись является новой.

Отметим, что это поле является Первичным ключом (термин базы данных). Ключ – это столбец в базе данных, который имеет специальное значение, и обычно это значение является основным значением, которое вы хотите использовать при выборе записей. Оно используется для того, чтобы найти данные в базе данных было легче. Например, вы могли бы найти общее количество сотрудников в базе. Ключ облегчает задачу сделать это, поскольку найти номер «333102» намного легче, чем найти сотрудника «Nizhoni Benally», особенно если таких сотрудников в организации несколько. Появляется необходимость в пронумеровке сотрудников и в присваивании каждому сотруднику уникального ключа. В базе данных может быть несколько ключей, чтобы найти вас, но Первичный ключ считается основным.

Так, при регистрации наших фильмов в базе данных мы зададим каждому фильму ID и сделаем ID первичным ключом.

Используйте кнопку «New Column» на панели инструментов, чтобы создать еще 3 столбца. Выберете 3, пробел, неназванные столбцы в пределах вашей таблицы.

Выберите первую пустую строку, и задайте ей имя «Имя», и Тип данных «ntext». Удостоверьтесь, что «Идентификационные данные» - правда, и «Первичный ключ» - ложь.

Веб-разработка 101: Часть 5, Использование данных

Второй пустой строке задайте имя «ReleaseYear» и выберете тип «bigint».

Третьей пустой строке задайте имя «Жанр» и выберете тип «ntext».

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

Веб-разработка 101: Часть 5, Использование данных

Перед вами отобразится диалоговое окно, запрашивающее имя таблицы. Назовите его «Избранное».

Веб-разработка 101: Часть 5, Использование данных

Таблица появится в левой стороне окна.

Веб-разработка 101: Часть 5, Использование данных

Заполнение таблицы данными

Дважды щелкните по таблице, и откроется пустая строка, не содержащая данных.

Веб-разработка 101: Часть 5, Использование данных

Поместите курсор в Поле имени и заполние его. После этого нажмите клавишу Tab на клавиатуре, чтобы переместиться в следующее поле (Год выпуска), задайте ему значение, перейдите на Вкладку и введите значение в поле «Жанр».

Веб-разработка 101: Часть 5, Использование данных

Когда вы нажмете кнопку Tab снова, то вы увидете, что в поле «идентификатор» появится номер '1'. Хорошая идея - не вводить что-либо в этот столбец и позволить базе данных делать это автоматически. Вы увидите, что курсор находится теперь внутри поля. Нажмите на вкладку снова, чтобы вернуться к полю «Имя».

Проделайте это несколько раз, чтобы ввести несколько фильмов. Вот набор 4 фильмов, которые мы использовали

Веб-разработка 101: Часть 5, Использование данных

В первой половине этого урока мы уделили основное внимание системным настройкам WebMatrix и могло создаться впечатление, что это простой продукт для тех, кто только «тыкает кнопочки». Однако в окончании статьи я намерен развеять это заблуждение и привести несколько примеров кода, который может понадобиться при работе с данными.

23 декабря 2011 г.

Здаойный А.В.


Веб-разработка 101: Часть 5, Использование данных (начало)

<p style="text-align: justify; "><i><font color="#00a650">Примечание автора:</font> Для данной статьи пришлось сделать 17 иллюстраций, так что урок получился просто чудовищно длинным. При сохранении на одной странице всей статьи целиком она загружается весьма неторопливо, а поиск нужного материала требует усилий. К сожалению, разбить материал на более мелкие уроки не получается возможным – темы довольно объёмны и требуют соответствующего освещения. </i></p> <p style="text-align: justify; ">Итак вы уже узнали, как <a href="/information/veb_razrabotka_101_chast_2_sozdanie_svoey_pervoy_veb_stranitsy/" >создавать страницу HTML с посмощью WebMatrix</a>; как начать эффективно создавать сайт; как разработать веб-страницу, используя каскадные таблицы стилей (CSS) (<a href="/information/veb_razrabotka_101_chast_3_sozdanie_stiley_nachalo/" >начало</a> и <a href="/information/veb_razrabotka_101_chast_3_sozdanie_stiley_okonchanie/" >конец</a> урока); как использовать функционал слоев, встроенный в WebMatrix с синтаксисом 'Razor', чтобы сосредоточиться на контенте своей страницы и не отвлекаться на инфраструктуру (<a href="/information/veb_razrabotka_101_chast_4_ispolzovanie_razmeshcheniya_nachalo/" >начало</a> и <a href="/information/veb_razrabotka_101_chast_4_ispolzovanie_razmeshcheniya_okonchanie/" >окончание</a> урока).</p> <p style="text-align: justify; ">В этой главе мы рассмотрим статический список фильмов, который вы использовали, и сделаем его динамическим. За короткий промежуток времени вместо создания списка фильмов от руки в HTML мы поместим список в базу данных, и сделаем так, чтобы WebMatrix считал базу данных и сгенерировал HTML. Таким способом можно легко изменять базу данных и автоматически обновлять веб-страницы.</p> <h2 style="text-align: center; ">Создание баз данных в WebMatrix</h2> <p style="text-align: justify; ">Для начала найдите рабочее пространство «Баз данных» в WebMatrix и откройте его. В центре окна вы увидете опцию «Добавление базы данных к своему сайту».</p> <p style="text-align: justify; "><img src="/upload/medialibrary/1f2/1f2a2154c091b1f8a03afcfa9d50344c.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="442" height="74" /></p> <p style="text-align: justify; ">Выберите это меню, и WebMatrix создаст новую базу данных под названием «Movies.sdf». Если у вашего сайта будет другое имя, например, «foo», то WebMatrix создаст базу данных, основанную на этом имени (то есть foo.sdf).</p> <p style="text-align: justify; ">Вы увидете базу данных в списке баз данных в левой стороне окна:</p> <p style="text-align: justify; "><img src="/upload/medialibrary/ac7/ac76e103e7e6a76b9e15de74ed2f172b.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="256" height="120" /></p> <h2>Добавление таблицы в базу данных</h2> <p style="text-align: justify; ">Вверху окна вы увидете панель инструментов, отображающую разные вещи, которые вы можете создавать с помощью базы данных, включая составление таблиц и запросов и переход на другие базы данных. На этой панели выберите инструмент «Новая таблица». Если ничего не произойдет после выбора этого пункта меню, убедитесь, что у вас создан Movies.sdf, выбираемый в списке баз данных.</p> <p style="text-align: justify; "><img src="/upload/medialibrary/e47/e47ea30a3af4fc76459e66e11e757e89.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="738" height="145" /></p> <p style="text-align: justify; ">WebMatrix построит таблицу и откроет редактор столбца. Это позволит вам создавать новые столбцы в пределах своей таблицы базы данных. На языке базы данных «Запись» - это все данные для определенного объекта. Так, например, данные для человека были бы записью их имени, возраста, адреса и телефонного номера. Столбцы – это значения отдельной части данных, независимо к какой записи они относятся. Так, в вышеупомянутом примере Имя является таким же столбцом, как и возраст.</p> <p style="text-align: justify; ">Для наших фильмов мы создадим базу данных, которая немного будет похожа на эту:</p> <p style="text-align: justify; "><img src="/upload/medialibrary/a56/a56fdb785256e6243f604e51a86c8fa4.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="549" height="249" /></p> <p style="text-align: justify; ">Во-первых, давайте создадим ID. ID – это просто идентификатор для определенной записи. У вас не должно быть одного ID, особенно для простой базы данных как эта. Но это хороший пример того, чтобы создать более сложные базы данных. Он покажется вам полезным для отслеживания данных и создания запросов данных.</p> <p style="text-align: justify; ">В редакторе столбца заполните детали, как показано ниже:</p> <p style="text-align: justify; "><img src="/upload/medialibrary/68d/68d090a84f0d6681e5cde3b90896e1c0.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="740" height="336" /></p> <p style="text-align: justify; ">Столбец получит имя «идентификатор», и определит его тип как числовой (bigint), у которого должно быть значение (Позвольте Нули, установлен в Ложь). После этого определится, что поле содержит идентификационные данные, что означает, что мы сообщаем базе данных, что используем это значение в качестве ID. Плюс в том, что когда мы добавляем новую запись в базу данных, она обновит ID автоматически, таким образом, мы не должны будем волноваться об отслеживании той информации, которая была добавлена в последнюю очередь, не должны будем получать ID и убеждаться в том, что запись является новой.</p> <p style="text-align: justify; ">Отметим, что это поле является Первичным ключом (термин базы данных). Ключ – это столбец в базе данных, который имеет специальное значение, и обычно это значение является основным значением, которое вы хотите использовать при выборе записей. Оно используется для того, чтобы найти данные в базе данных было легче. Например, вы могли бы найти общее количество сотрудников в базе. Ключ облегчает задачу сделать это, поскольку найти номер «333102» намного легче, чем найти сотрудника «Nizhoni Benally», особенно если таких сотрудников в организации несколько. Появляется необходимость в пронумеровке сотрудников и в присваивании каждому сотруднику уникального ключа. В базе данных может быть несколько ключей, чтобы найти вас, но Первичный ключ считается основным.</p> <p style="text-align: justify; ">Так, при регистрации наших фильмов в базе данных мы зададим каждому фильму ID и сделаем ID первичным ключом.</p> <p style="text-align: justify; ">Используйте кнопку «New Column» на панели инструментов, чтобы создать еще 3 столбца. Выберете 3, пробел, неназванные столбцы в пределах вашей таблицы.</p> <p style="text-align: justify; ">Выберите первую пустую строку, и задайте ей имя «Имя», и Тип данных «ntext». Удостоверьтесь, что «Идентификационные данные» - правда, и «Первичный ключ» - ложь.</p> <p style="text-align: justify; "><img src="/upload/medialibrary/003/003d62462f96e7342e42c4470aba7754.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="740" height="164" /></p> <p style="text-align: justify; ">Второй пустой строке задайте имя «ReleaseYear» и выберете тип «bigint».</p> <p style="text-align: justify; ">Третьей пустой строке задайте имя «Жанр» и выберете тип «ntext».</p> <p style="text-align: justify; ">Нажмите кнопку сохранения в строке заголовка WebMatrix, чтобы сохранить Таблицу.</p> <p style="text-align: justify; "><img src="/upload/medialibrary/798/7987774a1714c34dfe4f69fcc19475f5.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="229" height="183" /></p> <p style="text-align: justify; ">Перед вами отобразится диалоговое окно, запрашивающее имя таблицы. Назовите его «Избранное».</p> <p style="text-align: justify; "><img src="/upload/medialibrary/a83/a83543d360e225d056cd6516c0ccbebd.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="397" height="226" /></p> <p style="text-align: justify; ">Таблица появится в левой стороне окна.</p> <p style="text-align: justify; "><img src="/upload/medialibrary/e1b/e1b2bcc108c9cd51051b3df8c514f1d7.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="252" height="127" /></p> <h2 style="text-align: center; ">Заполнение таблицы данными</h2> <p style="text-align: justify; ">Дважды щелкните по таблице, и откроется пустая строка, не содержащая данных.</p> <p style="text-align: justify; "><img src="/upload/medialibrary/488/488614bf8cc209643e5975f32afd2d12.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="466" height="112" /></p> <p style="text-align: justify; ">Поместите курсор в Поле имени и заполние его. После этого нажмите клавишу Tab на клавиатуре, чтобы переместиться в следующее поле (Год выпуска), задайте ему значение, перейдите на Вкладку и введите значение в поле «Жанр».</p> <p style="text-align: justify; "><img src="/upload/medialibrary/c34/c34614235a77af66bffd132d960c2c94.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="450" height="102" /></p> <p style="text-align: justify; ">Когда вы нажмете кнопку Tab снова, то вы увидете, что в поле «идентификатор» появится номер '1'. Хорошая идея - не вводить что-либо в этот столбец и позволить базе данных делать это автоматически. Вы увидите, что курсор находится теперь внутри поля. Нажмите на вкладку снова, чтобы вернуться к полю «Имя».</p> <p style="text-align: justify; ">Проделайте это несколько раз, чтобы ввести несколько фильмов. Вот набор 4 фильмов, которые мы использовали</p> <p style="text-align: justify; "><img src="/upload/medialibrary/818/8181a51fb6feb30b445d7a621c5ac08d.PNG" title="Веб-разработка 101: Часть 5, Использование данных" border="0" alt="Веб-разработка 101: Часть 5, Использование данных" width="468" height="206" /></p> <p style="text-align: justify; ">В первой половине этого урока мы уделили основное внимание системным настройкам WebMatrix и могло создаться впечатление, что это простой продукт для тех, кто только «тыкает кнопочки». Однако в <a href="/information/veb_razrabotka_101_chast_5_ispolzovanie_dannykh_okonchanie/" >окончании статьи</a> я намерен развеять это заблуждение и привести несколько примеров кода, который может понадобиться при работе с данными.</p> <p style="text-align: right; ">23 декабря 2011 г.</p> <p style="text-align: right; ">Здаойный А.В.</p>

Возврат к списку

Яндекс.Метрика