Презентация на тему: Разработка веб-интерфейса к базе данных

Разработка веб-интерфейса к базе данных
Предварительные условия
Особенности разработки веб интерфейсов
Введение
Разработка веб-интерфейса к базе данных
Разработка веб-интерфейса к базе данных
Отображение данных в WinForm
Подход Microsoft
Разработка веб-интерфейса к базе данных
Отображение простой таблицы БД
Постановка задачи
Сведения о студентах
Два подхода
Создание проекта
ASP.NET Core
Настройте свойства проекта
Страница проекта
Структура папок
О структуре проекта
О страницах
Разработка веб-интерфейса к базе данных
Общий шаблон
Общий шаблон
Разработка веб-интерфейса к базе данных
Запуск приложения
Пример страницы приложения
Что дальше
Алгоритм последующих действий
Модель, контроллер и виды
Что и где
Добавление модели
Модель класса Student
Заготовка класса
Первичный ключ (обязательно!!!)
Добавьте остальные поля
Тонкая настройка
Полный текст файла модели
Добавление контроллера
Добавление контроллера
Контроллер и автоматически создаваемые виды
Диалог добавления контроллера
Выбор модели и имени контекста
Контроллер
Проверка
Убедитесь, что созданы эти файлы
Чего не хватает ?
Миграция
Миграция
Миграцию делают командами в консоли
Обновление БД
Вызов консоли
Консоль ввода команд
Начальная миграция
Применение миграции
Первичное тестирование приложения
Разработка веб-интерфейса к базе данных
Убедитесь, что страница открывается (пока без данных)
Добавление пункта меню для доступа к списку студентов
Почему именно так ?
Завершение
Страница списка
Форма ввода даннных
Результат
1/63
Средняя оценка: 4.7/5 (всего оценок: 13)
Код скопирован в буфер обмена
Скачать (1542 Кб)
1

Первый слайд презентации: Разработка веб-интерфейса к базе данных

Изображение слайда
2

Слайд 2: Предварительные условия

Установлена среда разработки MS Visual Studio 2017 Загружены необходимые компоненты среды: Программирования.NET ASP.NET ASP Net Core Имеются общие сведения о работе в Visual Studio Желательно выполнить работу о создании БД и связи БД с элементами формы

Изображение слайда
3

Слайд 3: Особенности разработки веб интерфейсов

Изображение слайда
4

Слайд 4: Введение

HTML страницы – удобный и универсальный инструмент для отображения на практически любом оборудовании и в любой операционной системе С другой стороны, для разработки серьезной информационной системы необходимо владеть не только приемами разработки HTML, но и технологиями поставки данных и интерактивного формирования веб-страниц Существует ряд решений для автоматизации рутинных задач в указанной области, основанных на модели MVC – модель, вид, контроллер Модель хранит описание данных и их взаимосвязи, вид – отображает данные, контроллер осуществляет логику работы с данными

Изображение слайда
5

Слайд 5

Изображение слайда
6

Слайд 6

Верно и обратное – действия пользователя (вид) через логику контроллера влияют на данные модели

Изображение слайда
7

Слайд 7: Отображение данных в WinForm

Мы уже знаем, что данные удобно хранить в базе данных Для этого надо создать БД Подключиться к ней Считать как ее структуру, так и данные в соответствии со структурой Привязать (спроецировать) таблицы и поля базы данных к визуальным элементам Поддерживать установленную связь в направлении от БД к интерфейсу и пользователю и обратно – от действий пользователя к БД

Изображение слайда
8

Слайд 8: Подход Microsoft

Далее рассматривается реализация с помощью трех основных технологий фирмы, взаимосвязанных между собой Entity Framework – создание моделей NET Core – веб взаимодействие Razor Pages – шаблоны страниц HTML с реализованной логикой работы пользователя

Изображение слайда
9

Слайд 9

Руководство предназначено для студентов-медиков, изучающих дисциплину «Информационные медицинские системы» Как следствие, демонстрируется лишь базовая и элементарная функциональность, изложение ведется преимущественно основываясь на примерах.

Изображение слайда
10

Слайд 10: Отображение простой таблицы БД

Изображение слайда
11

Слайд 11: Постановка задачи

Создадим интерактивную страницу, отражающую список студентов Список студентов будем хранить в таблице БД Список будет выводится в виде страницы HTML, которая обеспечит просмотр данных (списком или пофамильно), редактирование и удаление записей Здесь и далее не рассматриваются вопросы защиты информации, ограничения доступа к данным и т.п. Практически не затрагиваются действия по редактированию и доработке стандартных страниц

Изображение слайда
12

Слайд 12: Сведения о студентах

N Тип Название Описание int ID Первичный ключ string Name1 Фамилия string Name2 Имя string Name3 Отчество string BirthDate Дата рождения string Phone Номер телефона string Code Номер зачетной книжки bool Dorm Нуждается в общежитии Сведения о студентах, которые мы храним в БД будут храниться в колонках таблицы, иначе говоря – в ее полях. Любая таблица включает колонку первичного ключа ID Мы будем почти всегда хранить данные в строках

Изображение слайда
13

Слайд 13: Два подхода

Мы можем ( Data First ): Создать БД Подключиться Сгенерировать модель по БД (сделать реверс-инжиниринг БД) Отобразить ее в виде HTML страниц Альтернатива ( Code First) Создать классы модели Отобразить классы на веб-страницы Отобразить классы на БД (фактически – создать БД и таблицы, соответствующие модели) Мы используем подход с созданием кода, так как он несколько проще

Изображение слайда
14

Слайд 14: Создание проекта

Изображение слайда
15

Слайд 15: ASP.NET Core

Обратите внимание на тип проекта – ASP.NET Core

Изображение слайда
16

Слайд 16: Настройте свойства проекта

Изображение слайда
17

Слайд 17: Страница проекта

Изображение слайда
18

Слайд 18: Структура папок

Изображение слайда
19

Слайд 19: О структуре проекта

Ожидается, что файлы, которые вы создадите лежат в «правильных» местах, поэтому обращайте внимание на место создания файлов Назначение папок: Controllers – контроллеры для классов моделей Models – модели (классы со свойствами) Views – виды (страницы для отображения в браузере, точнее – наборы страниц )

Изображение слайда
20

Слайд 20: О страницах

Среда создает специальные страницы, в которых имеются как элементы, единые для всего сайта, так и места под заполнение поступающей информацией. За заполнение страниц отвечают связанные с ними программы на C# (их можно посмотреть в Solution Explorer, открыть, но лучше не редактировать )

Изображение слайда
21

Слайд 21

Папка Home содержит страницы «о компании», контакты, страница для отображения по умолчанию Index и т.д.

Изображение слайда
22

Слайд 22: Общий шаблон

Чтобы все страницы выглядели одинаково, они строятся на основании общего шаблона. Этот шаблон хранится в папке Shared Он, грубо говоря, состоит из двух частей: Навигационное меню вверху страницы и подвал внизу Место между ними для заполнения ( RenderBody ) Остальные страницы получаются так: Сначала применяется шаблон, Затем внутрь шаблона вставляется страница (например, About ) Скомпонованная итоговая страница «просчитывается», если это необходимо программой (например, выводятся данные из БД через контроллер)

Изображение слайда
23

Слайд 23: Общий шаблон

Файл шаблона – Layout Содержит пункты меню в верхней части экрана – Index, About, Contact Файл шаблона – Layout Место под переменные данные

Изображение слайда
24

Слайд 24

Обратите внимание, следующая строка: < li >< a asp-area ="" asp-controller ="Home" asp-action ="Contact"> Contact </ a ></ li > Соответствует папке Home и файлу Contact внутри папки, с одной стороны С другой – она отображает пункт меню « Contact » в навигационной панели и создает гиперссылку Аналогично работают и два других пункта Если надо добавить новые пункты навигации, то их надо добавлять здесь Поле RenderBody замещается последующими, специализированными страницами

Изображение слайда
25

Слайд 25: Запуск приложения

Наше приложение уже работоспособно Для его запуска нужен или веб-сервер или встроенный отладочный сервер (в примере – сервер IIS, входящий в состав Windows) Чтобы сократить время запуска рекомендуется запускать упрощенную версию отладчика клавишами Ctrl+F5 Приложение откроется в виде страницы в браузере

Изображение слайда
26

Слайд 26: Пример страницы приложения

Изображение слайда
27

Слайд 27: Что дальше

Изображение слайда
28

Слайд 28: Алгоритм последующих действий

Изображение слайда
29

Слайд 29: Модель, контроллер и виды

Изображение слайда
30

Слайд 30: Что и где

Модель – это public класс со свойствами Как минимум, одно из свойств должно быть int и иметь название ID – это поле первичного ключа в БД Модели создаются в папке Models Принято называть файлы именами в единственном числе ( Name а не Names ) Контроллер создается для каждого класса модели в папке Controllers Контроллеры регистрируются в контексте БД Первый контекст генерируется, последующие классы лишь модифицируют его При создании контроллера мы автоматически будем создавать виды

Изображение слайда
31

Слайд 31: Добавление модели

Изображение слайда
32

Слайд 32: Модель класса Student

Изображение слайда
33

Слайд 33: Заготовка класса

Изображение слайда
34

Слайд 34: Первичный ключ (обязательно!!!)

Изображение слайда
35

Слайд 35: Добавьте остальные поля

Изображение слайда
36

Слайд 36: Тонкая настройка

Уточнить свойства поля можно при помощи его атрибутов (небольшой функции в квадратных скобках перед свойством. Например, DisplayName задает название поля для отображения на экране ( Name1 – Фамилия и т.п.) Другой атрибут - [ DataType ( DataType.Date )] – означает, что надо отобразить только дату из поля типа DateTime Рекомендуется задавать хотя бы отображаемые имена полей на русском языке Следует добавить в раздел using строки using System.ComponentModel ; using System.ComponentModel.DataAnnotations ; Или убедиться в их наличии

Изображение слайда
37

Слайд 37: Полный текст файла модели

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

Изображение слайда
38

Слайд 38: Добавление контроллера

Напомним, что контроллер создается в папке контроллеров Контроллер создается для класса Мы создадим контроллер и сгенерируем контекст Если классов больше чем один, то контекст будет создан один раз, а далее будет только корректироваться Мы создадим контроллер и сгенерируем необходимые виды (страницы для просмотра, редактирования и т.п.)

Изображение слайда
39

Слайд 39: Добавление контроллера

Изображение слайда
40

Слайд 40: Контроллер и автоматически создаваемые виды

Изображение слайда
41

Слайд 41: Диалог добавления контроллера

Необходимо выбрать класс из списка У нас не было создано контекста – его надо добавить Мы хотим создать виды Кнопка Add – добавить – будет доступна по заполнении полей Обратите внимание(!!!): Имя модели выбирается из списка Название контекста будет сгенерировано автоматически, менять его НЕ НАДО Страница шаблона ( Layout) у нас уже есть, это поле следует оставить пустым

Изображение слайда
42

Слайд 42: Выбор модели и имени контекста

Изображение слайда
43

Слайд 43: Контроллер

Изображение слайда
44

Слайд 44: Проверка

Просмотрите папку видов и убедитесь, что добавлена подпапка студентов, а ней – файлы для работы с данными Должен быть создан контроллер, Подпапка для видов Внутри подпапки – index, detail, edit, delete, create – страницы для просмотра списка данных, подробных сведений о выбранной записи, форма редактирования, удаления и создания (соответственно)

Изображение слайда
45

Слайд 45: Убедитесь, что созданы эти файлы

Изображение слайда
46

Слайд 46: Чего не хватает ?

Нам по-прежнему нужна БД для постоянного хранения данных (в принципе можно и не хранить данные в БД) Для создания правильной БД нужно выполнить миграцию.

Изображение слайда
47

Слайд 47: Миграция

Изображение слайда
48

Слайд 48: Миграция

Это процесс создания или обновления БД, изменения структуры данных, таблиц и т.п. В процессе миграции также создается подключение к БД (во всяком случае – строка такого подключения). Для миграции необходим провайдер БД. Такие провайдеры предлагает как Microsoft (для собственного SQL Server), так и, например, разработчики PostgresSQL, MySQL и ряда других БД.

Изображение слайда
49

Слайд 49: Миграцию делают командами в консоли

Основных команд, связанных с миграцией, всего три: Add-Migration InitialMigration – первая миграция. Создает БД и подключение, если есть модели – добавляет таблицы в БД в соответствии с моделями и связями между ними Add-Migration Student – добавляет к существующей БД новую таблицу (после добавления модели) или обновляет определение для существующей модели при ее существенных изменениях Можно рассматривать миграцию как слепок с текущего состояния модели, который нужно применить к БД Несколько миграций записываются в виде последовательности файлов Remove - Migration – удаляет последнюю не примененную к БД миграцию

Изображение слайда
50

Слайд 50: Обновление БД

Обновление БД делает еще одна команда: Update-Database Эта команда ФАКТИЧЕСКИ выполняет миграцию Таким образом, вы можете скорректировать действия по миграции, добавить или удалить некоторые из них, и лишь затем применить их к БД командой Update-Database База создается в каталоге пользователя C:\Users\<UserName>, где UserName – имя текущего пользователя Windows

Изображение слайда
51

Слайд 51: Вызов консоли

Изображение слайда
52

Слайд 52: Консоль ввода команд

Изображение слайда
53

Слайд 53: Начальная миграция

После ввода команды (факультативно) просмотрите папку Migrations

Изображение слайда
54

Слайд 54: Применение миграции

Изображение слайда
55

Слайд 55: Первичное тестирование приложения

Изображение слайда
56

Слайд 56

Запустите приложение командой Ctrl+F5 Откройте в браузере добавьте к адресу приложения папку Students

Изображение слайда
57

Слайд 57: Убедитесь, что страница открывается (пока без данных)

Изображение слайда
58

Слайд 58: Добавление пункта меню для доступа к списку студентов

Откройте файл _ Layout.cshtml (папка Shared) Скопируйте строку и отредактируйте ее как показано

Изображение слайда
59

Слайд 59: Почему именно так ?

Система ожидает определенного порядка размещения файлов, в соответствии с логикой приложения В частности: Мы создали контроллер для студентов и папку для хранения видов Если мы хотим показать некие данные, то мы должны указать ее контроллер (по соглашению это еще и папка с html файлами) и конкретное действие над данными (например, просмотр). Действию соответствует вид – файл с тем же именем, что и действие типа cshtml. Студенты связаны с контроллером/папкой Students Базовое действие – просмотр списка – Index (на странице Index есть переход к другим действиям).

Изображение слайда
60

Слайд 60: Завершение

Запустите приложение Создайте 5-6 студентов Удалите 2-го Отредактируйте фамилию последнего

Изображение слайда
61

Слайд 61: Страница списка

Изображение слайда
62

Слайд 62: Форма ввода даннных

Обратите внимание, что дата вводится через элемент «календарь» Нужно ли общежитие - чекбокс

Изображение слайда
63

Последний слайд презентации: Разработка веб-интерфейса к базе данных: Результат

Можно позвонить по Skype

Изображение слайда