Цель занятия: научиться создавать простые веб-приложения, принимающие ввод данных от пользователя.

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

В качестве простейшей задачи предлагается следующая:

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

Сайт должен содержать в себе следующие страницы:

  • Главная страница, содержащая ссылки на все другие страницы, а также описание решаемой задачи. Маршрут /.
  • Страница для ввода данных для решения задачи. Маршрут /triangles/new.
  • Страница для вывода всех решений задачи, для которых были введены данные пользователем. Маршрут /triangles.
  • Страница для показа информации о создателе приложения. Маршрут /about.

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

Главная страница должна содержать описание назначения данной системы, а также условия задачи, которая будет решена.

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

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

Страница о создателе приложения должна содержать фотографию создателя.

Подумайте какие из данных страниц должны быть динамическими, а какие статическими.

Предлагаемый подход к решению задачи

  • Создайте каталог для сайта. Разместите в корне данного каталога следующие директории: lib, public, views.
  • В каталог public поместите файлы CSS-фреймворка Bootstrap.
  • Создайте Gemfile и добавьте в качестве зависимостей sinatra, rubocop, erb_lint, rerun, puma. Для Windows также желательно установить джем wdm.
  • Создайте файл app.rb в корне проекта, в котором подключите джем Sinatra.
  • Добавьте обработчик маршрута по умолчанию '/', выведите пользователю сообщение ‘Маршрут работает’.
  • Запустите приложение main.rb и откройте браузер по ссылке http://localhost:4567 и убедитесь, что всё работает.
  • Завершите работу приложения main.rb, нажав комбинацию клавиш Ctrl+C. Запустите приложение с помощью rerun: rerun app.rb. Теперь после сохранения файлов сервер будет автоматически перезапущен. Для остановки Rerun введите q и нажмите ввод.
  • Добавьте файл views/layout.erb, в котором разместите навигационную панель, а для центральной части разместите вызов yield. То есть сделайте общую раскладку для сайта. В навигационной панели должны быть ссылки на все страницы сайта.
  • Добавьте файл views/index.erb, в котором разместите необходимое содержимое для первой страницы. Исправьте обработчик пути по умолчанию, чтобы он выводил содержимое файла index.erb.
  • В каталоге lib создайте классы, описывающие треугольник и список треугольников.
    • Класс Triangle должен содержать методы:
      • Конструктор, принимающий длины сторон в качестве аргументов.
      • triangle? — возвращает true или false в зависимости можно ли создать треугольник из данных сторон или нет.
      • area — возвращает площадь для треугольника и 0, если фигура не является треугольником.
    • Класс TriangleList должен содержать методы:
      • add_triangle, принимающий объекты типа Triangle и добавляющий их в конец списка.
      • each — итератор по всем добавленным треугольникам.
  • Подключите класс TriangleList в файл app.rb и поместите экземпляр данного класса в настройки.
  • Создайте страницу views/triangle_new.erb, содержащую форму для ввода данных. Отобразите эту страницу при переходе по маршруту /triangles/new. Форма должна посылать результаты обработки с помощью POST-запроса.
  • Корректно обработайте данные, передаваемые со страницы ввода данных. Ошибочными ситуациями считается отсутствие данных в поле ввода, а также отсутствие вещественных чисел в поле ввода.
  • Создайте страницу views/trianges.rb, которая может отобразить результаты ввода данных. Странице в качестве параметра должна передаваться ссылка на объект TriangleList.

Важно удостоверьтесь, что ваши исходные файлы могут быть успешно проверены с помощью Rubocop и ERB Lint.