Рубрики
Без рубрики

Вкладки пользовательского интерфейса jQuery (горизонтальные и вертикальные) Пример интеграции веб-приложений Java

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

Автор оригинала: Pankaj Kumar.

Пользовательский интерфейс jQuery построен поверх Библиотеки JavaScript jQuery , чтобы помочь веб-разработчикам в создании потрясающих веб-страниц с различными типами эффектов. Сегодня мы рассмотрим Вкладки пользовательского интерфейса jQuery функцию, которую мы можем легко использовать для создания вкладок на страницах просмотра. Мы будем использовать это в простом java веб-приложении , где пользователь может зарегистрироваться, а затем войти в систему. Формы регистрации и входа в систему будут частью домашней страницы на двух разных вкладках.

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

Настройка веб-приложения Java

На рисунке ниже показана окончательная структура нашего веб-приложения. Прежде чем мы приступим к коду, нам необходимо настроить наше приложение с помощью необходимых библиотек JS и CSS.

  1. Создайте “Динамический веб-проект” в Eclipse, вы можете выбрать любое имя, но если вы хотите использовать то же имя, что и мой проект, используйте jQueryUITabsLoginExample . После создания проекта преобразуйте его в проект maven, чтобы мы могли добавить необходимые зависимости.

  2. Я использую базу данных MySQL для хранения информации о пользователях, приведенный ниже скрипт можно использовать для создания таблицы Пользователи .

    3.  
  3. Поскольку я использую базу данных MySQL, нам нужно добавить драйвер MySQL Java в проект. Ниже приведен наш окончательный pom.xml, это просто и понятно. 
    Поскольку я использую базу данных MySQL, нам нужно добавить драйвер MySQL Java в проект. Ниже приведен наш окончательный pom.xml, это просто и понятно.
     
    4.  
  4. Загрузите библиотеку JavaScript jQuery из https://jquery.com/download/ и поместите в каталог js , как показано на изображении проекта.
    5.  
  5. Загрузите библиотеку пользовательского интерфейса jQuery с https://jqueryui.com/download/ , вы получите много файлов JS и CSS. Вам нужно включить только jquery-ui.js и jquery-ui.css файлы для проекта. Пользовательский интерфейс jQuery предоставляет множество тем, которые мы можем использовать в качестве основы, а затем настроить в соответствии с нашими требованиями. Макет на главной странице проекта-это тема Купертино , вы можете выбрать одну из тем на странице загрузки.
 
Настройка нашего проекта уже готова, теперь мы можем перейти к нашей части бизнес-логики.
 
Класс Модели
 
У нас есть класс пользователя для отображения таблицы базы данных, ниже приведен код класса модели пользователя.
 
У нас есть класс пользователя для отображения таблицы базы данных, ниже приведен код класса модели пользователя.
 
package com.journaldev.servlet.model;

public class User {
	
	private String name;
	private String email;
	private String password;
	private String address;
	
	public User(){}
	
	public User(String name, String email, String password, String address){
		this.name=name;
		this.email=email;
		this.password=password;
		this.address=address;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}

}

 
Класс утилиты подключения к базе данных
 
У нас есть простой служебный класс для подключения к базе данных, он не оптимизирован и предназначен только для примера.
 
У нас есть простой служебный класс для подключения к базе данных, он не оптимизирован и предназначен только для примера.
 
package com.journaldev.servlet.jdbc;

import java.sql.Connection;
import java.sql.DriverManager;

public class JDBCUtil {
	
private static Connection connection = null;

public static Connection getConnection() {
	if (connection != null)
		return connection;
	else {
		// database URL
		String dbUrl = "jdbc:mysql://localhost/TestDB";
		try 
		{
		Class.forName("com.mysql.jdbc.Driver");
		
		// set the url, username and password for the database
		connection = DriverManager.getConnection(dbUrl, "pankaj", "pankaj123");
		
		} catch (Exception e) {
			e.printStackTrace();
		}
		return connection;
	}
	}
}

 
Классы реализации DAO
 
Интерфейс Userdao определяет контракт на услуги, которые будут предоставляться для операций с таблицей пользователей.
 
Интерфейс Userdao || определяет контракт на услуги, которые будут предоставляться для операций с таблицей пользователей.
 
package com.journaldev.servlet.dao;

import com.journaldev.servlet.model.User;

public interface UserDAO {

	public int createUser(User user);
	
	public User loginUser(User user);
	
}

 
Ниже приведен класс реализации, мы также могли бы использовать Hibernate или любые другие инструменты ORM для реализации.
 
Ниже приведен класс реализации, мы также могли бы использовать Hibernate или любые другие инструменты ORM для реализации.
 
package com.journaldev.servlet.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import com.journaldev.servlet.jdbc.JDBCUtil;
import com.journaldev.servlet.model.User;

public class UserDAOImpl implements UserDAO {

	private Connection dbConnection;
	private PreparedStatement pStmt;

	private String SQL_SELECT = "SELECT name, address FROM users WHERE email = ? AND password = ?";
	private String SQL_INSERT = "INSERT INTO users (name,email,password,address) VALUES (?,?,?,?)";

	public UserDAOImpl() {
		dbConnection = JDBCUtil.getConnection();
	}

	public User loginUser(User user) {
		try {
			pStmt = dbConnection.prepareStatement(SQL_SELECT);
			pStmt.setString(1, user.getEmail());
			pStmt.setString(2, user.getPassword());
			ResultSet rs = pStmt.executeQuery();
			while (rs.next()) {
				user.setName(rs.getString("name"));
				user.setAddress(rs.getString("address"));
			}
		} catch (Exception e) {
			System.err.println(e.getMessage());
		}
		return user;
	}

	public int createUser(User user) {
		int result = 0;
		try {
			pStmt = dbConnection.prepareStatement(SQL_INSERT);
			pStmt.setString(1, user.getName());
			pStmt.setString(2, user.getEmail());
			pStmt.setString(3, user.getPassword());
			pStmt.setString(4, user.getAddress());
			result = pStmt.executeUpdate();
		} catch (Exception e) {
			System.err.println(e.getMessage());
		}
		return result;
	}
}

 
Классы и конфигурация сервлетов
 
У нас есть два класса контроллеров сервлетов для процесса регистрации и входа в систему. Существует несколько простых проверок, позволяющих избежать распространенных ошибок.
 
У нас есть два класса контроллеров сервлетов для процесса регистрации и входа в систему. Существует несколько простых проверок, позволяющих избежать распространенных ошибок.
 
package com.journaldev.servlet.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.journaldev.servlet.dao.UserDAO;
import com.journaldev.servlet.dao.UserDAOImpl;
import com.journaldev.servlet.model.User;

public class RegistrationController extends HttpServlet {

	private static final long serialVersionUID = -4006561145676424435L;

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		String name = request.getParameter("name");
		String email = request.getParameter("email");
		String password = request.getParameter("password");
		String address = request.getParameter("address");

		if ((name == null || "".equals(name))
				|| (email == null || "".equals(email))
				|| (password == null || "".equals(password))
				|| (address == null || "".equals(address))) {
			String error = "Mandatory Parameters Missing";
			request.getSession().setAttribute("errorReg", error);
			response.sendRedirect("index.jsp#register");
		} else {
			User user = new User(name, email, password, address);

			UserDAO userDAO = new UserDAOImpl();

			int result = userDAO.createUser(user);
			if (result == 1) {
				request.getSession().removeAttribute("errorReg");
				response.sendRedirect("success.jsp");
			}else{
				request.getSession().setAttribute("errorReg", "Internal Server Error, Please try again later.");
				response.sendRedirect("index.jsp#register");
			}
		}
	}
}

 
У нас есть два класса контроллеров сервлетов для процесса регистрации и входа в систему. Существует несколько простых проверок, позволяющих избежать распространенных ошибок.
 
package com.journaldev.servlet.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.journaldev.servlet.dao.UserDAO;
import com.journaldev.servlet.dao.UserDAOImpl;
import com.journaldev.servlet.model.User;

public class LoginController extends HttpServlet {

	private static final long serialVersionUID = -4602272917509602701L;

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		String error;
		String email = request.getParameter("email");
		String password = request.getParameter("password");
		
		User user = new User();
		user.setEmail(email); user.setPassword(password);
		
		HttpSession session = request.getSession();
		UserDAO userDAO = new UserDAOImpl();

		User userDB = userDAO.loginUser(user);

		if (userDB.getName() == null) {
			error = "Invalid Email or password";
			session.setAttribute("error", error);
			response.sendRedirect("index.jsp");
		} else {
			session.setAttribute("user", userDB.getName());
			session.removeAttribute("error");
			response.sendRedirect("welcome.jsp");
		}
	}

	@Override
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		if ("logout".equalsIgnoreCase(request.getParameter("param"))) {
			HttpSession session = request.getSession();
			if(session != null){
			session.invalidate();
			}
			response.sendRedirect("index.jsp");
		}
	}
}

 
Пришло время настроить эти сервлеты в web.xml файл, ниже приведен окончательный web.xml файл.
 
Пришло время настроить эти сервлеты в web.xml файл, ниже приведен окончательный web.xml файл.
 


	jQueryTabsWebAppExample
	
	
		LoginController
		com.journaldev.servlet.controller.LoginController
		
	
	
		RegistrationController
		com.journaldev.servlet.controller.RegistrationController
		
	
	
	
		LoginController
		/LoginController
	
	
		RegistrationController
		/RegistrationController
	
	
	
		index.jsp
	


 
Файл CSS проекта
 
Ниже приведен наш пользовательский CSS-файл для просмотра страниц.
 
Ниже приведен наш пользовательский CSS-файл для просмотра страниц.
 
body {
	background-color: #e7e7e7;
	font-family: Helvetica;
	font-size: 14px;
	color: #666;
	margin: 0px;
	padding: 0px;
}

.wrapper {
	width: 900px;
	height: 500px;
	margin: 0 auto;
	background: white;
	margin: 0 auto;
}

.container {
	min-height: 400px;
	border-top: 1px solid gray;
	padding: 50px;
}

 
Страница просмотра вкладок пользовательского интерфейса jQuery
 
Ниже приведен код JSP домашней страницы, где мы используем теги пользовательского интерфейса jQuery.
 
Ниже приведен код JSP домашней страницы, где мы используем теги пользовательского интерфейса jQuery.
 




Login and Registration Page











	

		

			

				
				

					<% 
  	if((String)session.getAttribute("error") != null){ %>
					
Invalid Email or Password. Please try again.

					<%} %>
					

						 
  
 
						
  

						
 
					

				

				

					<% 
  	if((String)session.getAttribute("errorReg") != null){ %>
					
<%=session.getAttribute("errorReg") %>

					<%} %>
					

						
  
 

						 
 
  
 

						 
 
 
					

				

			

		

	




 
jQuery JS-код для создания тегов-это:
 
$(function() {
  $( "#tabs" ).tabs();
});

 
Приведенный выше код преобразует вкладки div в разные вкладки. Для разных вкладок этот раздел должен иметь неупорядоченный список элементов, для нас это
 


 
Обратите внимание, что каждый элемент списка содержит привязанный URL-адрес, это должны быть другие элементы div, которые будут формировать представление вкладок. Вот почему у нас есть еще два дива – вход и регистрация . Вот и все, другие части страницы JSP-это простой HTML и скрипты JSP . Я знаю, что мы не должны использовать скриплеты, но опять же это пример, и я не хотел добавлять в него другую технологию, если вы до сих пор не догадались, я говорю о JSTL .
 
У нас есть еще пара простых страниц JSP для успешной регистрации и входа в систему.
 
У нас есть еще пара простых страниц JSP для успешной регистрации и входа в систему.
 




Registration Success Page







	

		

			You have been successfully registered. 
			[ Back to login page ]
		

	






 
У нас есть еще пара простых страниц JSP для успешной регистрации и входа в систему.
 


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>


Welcome Page







	

		<%
			String user = (String) session.getAttribute("user");
			if (user != null) {
		%>
		

			Welcome
			<%
				out.print(user);
			%>
			

			Logout
			<%
				} else {
			%>
			
Your don't have permission to access this page

			<%
				}
			%>
	






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




Login and Registration Page










  




	




  
  

  	<% 
  	if((String)session.getAttribute("error") != null){ %>
  		
 Invalid Email or Password. Please try again.

  	<%} %>
    

    	
    	

    	
    	

    	
    	

    	
    	

    	

    	
    

  

  

  	<% 
  	if((String)session.getAttribute("errorReg") != null){ %>
  		
<%=session.getAttribute("errorReg") %>

  	<%} %>
  	

  		

    	
    	

    	

    	
    	

    	

    	
    	

    	

    	
    	

    	

    	
  	

  










 
Ниже приведены некоторые изображения для вывода вертикальных вкладок.
 
Резюме
 
Мы опубликовали здесь множество руководств по jQuery, этот пример должен был показать, как легко интегрировать jQuery и пользовательский интерфейс jQuery в веб-приложение java. Вы можете скачать окончательный проект по ссылке ниже, не упустите возможность поделиться им и с другими.



Читайте ещё по теме: