Создание простого веб приложения

Создание простого веб приложения

При устройстве на работу java программистом меня попросили написать тестовое web приложение «Телефонный справочник». Хочу поделиться с вами этим «шедевром».

Вид и функциональность приложения






Инструменты

Создание проекта

Укажите путь к Java в Project SDK.


Укажите путь к своей Maven home directory.



«Maven projects need to be imported» кликаем Enable Auto-Import.

Добавим Tomcat Server.



В Application server укажите путь до Tomcat сервера.




Ok -> Apply -> Ok

Проверим, что всё работает.



Клиент (ExtJS)

Добавим файлы фрэймворка.

Модель ExtJS MVC.

Создадим файл app.js

  • Метод Ext.application инициализирует приложение Ext JS;
  • name: ‘PhonesDir’ указывает имя приложения, которое будет затем использоваться для создания полных имен классов приложения;
  • appFolder: ‘app’ указывает на нашу папку с инфраструктурой приложения (controller, model, store, view);
  • launch: function()<> тут происходит создание приложения.

В файле index.jsp подключаем стили ExtJS, затем фреймворк ExtJS и только потом app.js:

Проверим, что всё работает.

Нам понадобится четыре вида — это вид поиска SearchPhones.js, вид таблицы PhoneGrid.js, вид формы добавления данных AddWindowForm.js и вид каркаса PhonesDirectory.js, куда мы поместим все виды.

Изменим параметр items в app.js.

  • phonesDirectory’ алиас, который мы указали в параметре alias в PhoneDirectory.js.
  • Метод Ext.define(‘Имя’, <параметры>) создает класс-компонент, который может быть унаследован от какого-нибудь компонента. Например в PhoneGrid.js указали extend: ‘Ext.grid.Panel’, что будет представлять собой таблицу.
Controller

Виды загружаются из контролера, поэтому создадим контролер PhonesDirectoryControoler.js и укажим его в app.js

  • С помощью параметра init инициализируются обработчики для компонентов (кнопки, поля и т.д). Связать конпонент с обработчиком помогает функция control.

Конечная структура app.js

Проверим, что всё работает.

Модель и хранилище

  • pageParam: ‘search’ нужен для реализации логики поиска на сервере. В нём будут находится данные из поля поиска и, если не пусто, сервер выполнит выборку данных из БД , иначе вернет все данные.
  • ‘phone’ имя, на которое будет замапен java-класс (контролер), который будет обрабатывать GET, POST, DELETE запросы с клиента.

Добавим модель PhonesDirectoryModel.js и хранилище PhonesDirectoryStore.js в контролер PhonesDirectoryController.js

Добавим в PhonesGrid.js параметр store: ‘PhonesDirectoryStore’, для отображения данных в таблице.

Проверим, что всё работает. 404 (Not Found) — это нормально, так как по адресу localhost:8080/phone еще ничего нет.

Сервер (Java)

Создадим папку java:

Создадим модель данных и слой доступа к данным (DAO)

  • Метод getPhones(String search) принимает значение параметра, которого мы указали в PhonesDirectoryModel.js;
  • Метод findByPhone(String name, String phone) используется для поиска дубликата при добавлении данных.

Создадим слой сервиса:

Создадим контролер, который будет замапен на адрес /phone для обработки запросов с клиента.

  • Каждый метод замапен на соответствующий запрос с клиента. Внедряем зависимость с помощью spring аннотации @Autowired и вызывает соответствующие методы у сервиса;
  • ExtResult — вспомогательный класс. Используется для ответа клиенту, что сущность, которую пытаемся записать в БД , дубликат или не дубликат.

Проверьте, что всё работает. Соберите проект с помощью maven install и запустите приложение.

Создадим spring контекст my-context.xml c:

  • настройками подключения к БД;
  • бином EntityManager — объект, через который происходит взаимодействие с БД. Инжектится в PhoneDaoImpl.java;
  • инжектом объекта класса PhoneDaoImpl.java в объект класса PhoneServiceImpl.java.

Создайте БД с названием phonedir или измените название в контексте на своё.

Создадим настройки для spring DispatcherServlet, который будет обрабатывать запросы с клиента.

  • context:component-scan поиск и регистрация компонентов в контейнере спринга;
  • mvc:view-controller домашняя страница;
  • mvc:resources автоматически обрабатывать запросы на получение статических данных.

Добавим spring контекст my-context.xml и настройки для spring DispatcherServlet в дескриптор развертывания web.xml

Добавим в контролер PhonesDirectoryController.js параметр refs и обработчики для компонентов.

  • ref ссылка на что-то в selector’e.
  • selector указывает на компоненты, для быстро обращения к ним через ref.
  • onSavePhone создается модель данных и сохраняется.
  • onAddPhone создает виджет формы добавления.
  • onDelPhone удаляет запись.
  • onChangeText загружает данные в соответствии со значением в поле поиска.
  • onLineGrid при выделении строки кнопка «Удалить» становится активной
  • onValidation валидация полей формы добавления.
Читайте также:  Комбинации в мортал комбат на сеге

И последнее — добавим иконки к кнопкам «Добавить» и «Удалить»:

Иногда очень нужна идея для очередного проекта, но в голову не идет мысль. Мы подготовили более 20 идей для создания веб-приложений.

Если вы читаете эту статью, значит вы в поисках идеи. Вероятно, вы хотите создать простое приложение, которое можно использовать в примере проекта, для тестирования нового фреймворка или API. Но Вы не можете найти ничего, что действительно резонирует с вами.

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

Подборка разделена на категории: без/с использованием внешнего API, без/с требованием серверной части и т. д.

Приложение для отслеживания веса

  • прием набора данных измерения веса, полученных в разное время;
  • построение графика;
  • отслеживание нескольких объектов;
  • хранение показателей веса.

Калькулятор

Реализовать стандартные операции +, -, *, / над числами и вывод результата.

Библиотека

  • хранение книг, которые вы прочитали/купили;
  • раздел “буду читать”;
  • хранение информации о книге и суперобложке.

Книга рецептов

  • ввод названия и описания;
  • возможность добавлять картинки блюд;
  • ранжирование по сложности и умению повара;
  • время приготовления;
  • этапы приготовления по шагам с картинками;
  • хранение всего перечисленного.

Контроль расходов

  • регистрация чеков, сумм и дат;
  • список чеков и квитанций;
  • возможность строить графики со статистикой (в этом году/в прошлом году);
  • хранение всего перечисленного.
  • облегченный Slack-функционал;
  • возможность входить без аутентификации, получать имя, которое будет храниться до следующей сессии;
  • хранение истории;
  • уведомления.

Блокнот

  • создание нового блокнота;
  • список всех заметок в сайдбаре;
  • хранение всего перечисленного.

Личный дневник

  • добавление записи с датой и текстом;
  • изменение порядка записей;
  • возможность добавлять картинки;
  • хранение всего перечисленного.

Таймер/будильник

  • ввод времени;
  • запуск таймера;
  • сигнал по прошествии времени.

Генератор мемов

  • хранение десяти популярных картинок-мемов;
  • возможность добавлять пользовательский текст;
  • результат картинка + текст;
  • хранение истории.

Крестики-нолики

Всем известная игра: попробуйте реализовать.

Игра в жизнь

Это приложение должно отображать процессы, протекающие в клетках организма: деление, движение, рост и т. д. Посмотрите видео для того, чтобы идея стала понятнее:

Движок блога

  • возможность логиниться и создавать посты;
  • дать возможность посетителям оставлять комментарии;
  • хранение всего перечисленного.

Вопрос-ответ

  • возможность логиниться;
  • создание вопросов и ответов;
  • возможность выбирать лучший ответ;
  • хранение всего перечисленного.

Форум

  • регистрация, авторизация, аутентификация;
  • возможность логиниться и создавать посты;
  • комментарии к постам;
  • хранение всего перечисленного.

Встроенный “живой” чат

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

Эта категория включает в себя более сложные, объемные и производительные приложения, поэтому для их создания лучше использовать API.

Новостной клиент

  • выведение на экран списка популярных новостей;
  • просмотр комментариев;
  • просмотр пользовательских профилей;
  • поиск.

Несколько примеров для вдохновения: раз, два.

Reddit клиент

  • просмотр списка популярных постов;
  • выведение списка комментариев к постам;
  • редактирование пользовательских профилей.

Instagram клиент

  • при написании хэштега выводить последние новости по нему;
  • при написании логина выводить последние новости от него;
  • разрешать хранить один или несколько хэштегов/логинов и получать все последние сообщения от них.

GitHub API клиент

  • требуется показывать список популярных репозиториев за сегодня/неделю/месяц;
  • выводить список коммитов к репозиторию;
  • показывать лицо, организацию или публичные репозитории с ранжированием по звездам.

Unsplash API клиент

  • организовать поиск изображения по теме;
  • позволить юзеру вводить ключевое слово и по нему делать поиск изображений.

Вот официальный хелп по данному API.

Для создания веб-приложений обязательно нужны данные для "заглушек", картинки, API и т. д.

Этот процесс гораздо скучнее, чем кодинг поэтому мы немного сэкономим вам время на поиске нужных компонентов.

  • Переводы , 18 марта 2018 в 14:35
  • Никита Прияцелюк

Одной из самых приятных особенностей Java является её многогранная природа. Конечно, создание традиционных десктопных и даже мобильных приложений — это здорово. Но что, если вы хотите уйти с проторенных дорожек и зайти на территорию разработки web приложений на Java? Для вас есть хорошая новость: в комплекте с языком идёт полноценный Servlet API, который позволяет вам создавать надёжные веб-приложения без особых хлопот.

Это статья для продолжающих. Если вы только начинаете знакомство с Java, советуем пройти быстрый старт, посмотреть видеокурс и выбрать одну из книг для новичков.

Создание приложений на Java с помощью Servlets

Встречайте сервлеты, особый тип Java-программ, выполняемый в пределах веб-контейнера (также называемый контейнером сервлетов, как, например, Tomcat и Jelly), которые позволяют обрабатывать запросы клиентов и ответы сервера просто и эффективно. Сейчас не время и не место дотошно объяснять вам, что из себя представляет сервлет. Достаточно сказать, что сервлеты создаются и уничтожаются их контейнерами, а не разработчиком, и действуют как промежуточный уровень между клиентами (как правило, веб-браузерами) и другими приложениями, запущенными на сервере (например, базами данных).

Читайте также:  Как просматривать инстаграм без регистрации

Сервлет — классная штука, которая помимо всего прочего может принимать данные от клиента, как правило через GET и POST-запросы, работать с cookie и параметрами сеанса. А ещё она обрабатывает данные через дополнительные уровни приложений и отправляет выходные данные клиенту как в текстовом, так и в бинарном форматах (HTML, XML, PDF, JPG, GIF и т.д.), во многих случаях используя Java Server Pages (JSP) файлы.

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

Разбираемся с конфигурационными файлами

Чтобы вы понимали структуру нашего будущего приложения, вот как она будет выглядеть:

Первым шагом к созданию приложения является определение так называемого дескриптора развёртывания. Он указывает, как приложение должно быть развёрнуто в определенной среде. Когда дело касается веб-приложений, дескриптор развёртывания представляет собой простой XML-файл, называемый web.xml и является частью стандартной спецификации Java EE. В нашем случае он будет выглядеть так:

Как вы видите, web . xml только определяет версию Java Servlet Specification (3.1), которую мы будем использовать в приложении. Разумеется, в нём может быть гораздо больше содержимого, включая директивы сопоставления сервлетов, параметры инициализации, список приветственных файлов и несколько дополнительных настроек. Но чтобы не усложнять процесс разработки, давайте оставим его таким как есть.

LATOKEN, Москва, от 200 000 до 360 000 ₽

Так как наше приложение будет использовать Servlet API и Java Servlet Pages (JSP) для отображения данных клиента, нам нужно загрузить все необходимые JAR. Maven сделает за нас трудную работу, вот как будет выглядеть файл POM:

Если говорить просто, pom.xml определяет все зависимости, необходимые для работы с сервлетами: JSP, Java Standard Tag Library (JSTL) и Java Expression Language (JEL).

Итак, мы уже создали конфигурационные файлы приложения. Однако в текущем состоянии оно буквально ничего не делает. Мы хотим, чтобы клиенты могли регистрироваться с помощью HTML-формы, поэтому следующее, что нам нужно сделать, — это создать JSP-файлы, которые будут отображать вышеупомянутую форму и данные клиента после успешного завершения регистрации. Этим мы сейчас и займёмся.

Работаем над внешним видом

Внешний вид приложения будет определяться двумя JSP-файлами — в контексте MVC они называются представлениями. Первый будет отвечать за отображение формы регистрации и возможных ошибок, вызванных после проверки введённых данных. Второй будет обычной страницей приветствия, в которой будут показаны данные, введённые клиентом, после успешного завершения процесса регистрации.

Вот первый JSP-файл:

Файл содержит простой HTML с парочкой дополнений. Вот она, прелесть JSP в сочетании с JSTL и JEL. Обратите внимание на то, как легко проверить наличие ошибок валидации, используя такие стандартные теги, как и .

Атрибут формы регистрации action указывает на следующий URL: $/processcustomer . Это значит, что каждый раз, когда клиент пытается зарегистрироваться, данные будут отправляться в processcustomer независимо от URL, по которому доступна форма. Это достигается за счёт функциональности объектов, доступных из JSP-файла, таких как request .

Скоро мы увидим, как сервлет связывается с URL processcustomer и как он взаимодействует с введёнными данными. А пока давайте посмотрим на JSP-файл, который отвечает за страницу приветствия:

Читайте также:  Ноутбук тошиба модель satellite

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

Пишем контроллер

Написать сервлет, способный получить данные из формы регистрации, проще простого. Всё, что нам нужно сделать, — это написать подкласс для класса HttpServlet и реализовать его методы doGet() или doPost() (или оба, если надо). В данном случае сервлет будет взаимодействовать с данными, поступающими из POST-запросов.

Вот как он выглядит:

Первое, на что здесь стоит обратить внимание, — использование аннотации @WebServlet(name ="CustomerController", urlPatterns = "/processcustomer") . Она говорит контейнеру сервлета использовать класс CustomerController для обработки HTTP-запросов по адресу /processcustomer . Того же эффекта можно достичь путём добавления директив сопоставления сервлетов в web.xml , как здесь, но так как мы используем Servlet Specification 3.1 нам нет необходимости прибегать к такому способу.

Здесь мы назвали сервлет CustomerController , так как считается хорошей практикой использовать имя класса сервлета в качестве значения атрибута name аннотации @WebServlet . В противном случае некоторые контейнеры не смогут выполнить сопоставление, что приведёт к ошибке 404.

Сам класс CustomerController выполняет несколько простых задач. Во-первых, он собирает введённые в форму данные, используя реализацию интерфейса HttpServletRequest , который содержит значения, соответствующие полям firstname , lastname и email формы. Затем он устанавливает эти значения в качестве атрибутов запроса, поэтому их можно повторно отобразить либо в форме, либо на странице с результатами. Наконец, валидаторы проверяют правильность введённых данных.

Валидаторы — это простые классы, которые проверяют определённые свойства, например, является ли строка пустой и выглядит ли email как email. На GitLab автора можно посмотреть на их реализацию.

Результат валидации влияет на дальнейший ход событий: если данные не валидны, клиент перенаправляется через объект RequestDispatcher на страницу регистрации, где отображаются соответствующие ошибки. Если всё в порядке, то отображается страница приветствия.

Итак, мы создали целое веб-приложение на Java, которое позволяет зарегистрировать клиентов с помощью HTML-формы, базового сервлета и нескольких JSP-файлов. Пора его запустить.

Запускаем приложение

Для запуска приложения нужно проделать следующие шаги:

  1. Для начала нам понадобится Git (убедитесь, что скачиваете подходящую версию), Maven и контейнер сервлета (например, Apache Tomcat, Jetty, или JBoss Wildfly). Если что-то из этого уже включено в вашу IDE, то вы можете использовать встроенный вариант.
  2. Используйте Git, чтобы клонировать репозиторий приложения, и импортируйте его в вашу IDE, желательно как проект Maven.
  3. Разверните проект в контейнере сервлета и запустите его. Развёртывание подразумевает создание WAR-файла или exploded WAR и его помещение в папку развёртывания контейнера по умолчанию. Зачастую IDE способна сделать развёртывание за вас, поэтому не перегружайте себя лишней работой и посмотрите документацию вашей IDE (документация для IntelliJ IDEA). Когда вы развернёте проект и запустите его, должен запуститься бразуер по умолчанию с окном регистрации.
  4. Попробуйте заполнить не все поля в форме или вовсе не заполнить их и вы увидите, как поверх соответствующих полей отобразятся ошибки. Введите всё как положено, и вас перенаправит на страницу приветствия.

Заключение

Итак, вы приобрели все навыки, необходимые для создания собственного веб-приложения на Java без необходимости прибегать к сложным фреймворкам. Всё, что вам нужно, — Servlet API, технология вроде JSP для отображения и встроенные средства Java. Здорово, правда?

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

Ссылка на основную публикацию
Сколько человек сидит в одноклассниках
Mail.Ru Group исследовала и сравнила аудитории самых популярных в России социальных сетей — «Одноклассники», «Мой Мир», «ВКонтакте», Facebook и Twitter....
Сигнал flash в телефоне panasonic
● 19.12.08 13:08 - krepsky - 9 / 19.12.08 Два дня ломаю голову… Такая ситуация - купили партию телефонов Panasonic...
Сигналы материнской платы при загрузке
BIOS (Basic Input/Output System – базовая система ввода-вывода). Программа системного уровня, предназначенная для первоначального запуска компьютера, настройки оборудования и обеспечения...
Сколько четырехзначных чисел можно составить из нечетных
Условие Решение 1 Решение 2 Решение 3 Поиск в решебнике Популярные решебники Издатель: Н. Я. Виленкин, В. И. Жохов, А....
Adblock detector