Ejercicio JSP

Vamos a crear una miniweb con lo siguiente:

Al entrar nos aparecerá una página de login con usuario y contraseña:

Usuario:[ ]
Password:[ ]
[Enviar]

Si el usuario no es ‘admin’ ‘admin’ nos vuelve a la página de login.
Si es ‘admin’ ‘admin’ nos sale una página con estos enlaces:

Tabla de multiplicar
Numero mayor

Si pinchan en tabla de multiplicar nos sale una página con lo siguiente:
Número[ ]
[Enviar]

Si nos introducen un número en esta misma página se mostrará la tabla de multiplicar de ese número

Si pinchan en mayor nos sale una página con lo siguiente:
Número 1 [ ] Número 2 [ ]
[Enviar]
Al darle a enviar nos dice cual es el número mayor de los dos

Mejoras: que tanto en la tabla de multiplicar como en los números ya estén por defecto los valores que hemos enviado en vez de quedarse en blanco.

Ejercicio extra:
Añadir un enlace ‘palíndromo’ con un formulario en el que ponemos una cadena y nos diga si es palíndromo.

Para crear funciones dentro de un jsp hay que utilizar el siguiente tag:


<%!

%>

https://www.javatpoint.com/jsp-declaration-tag

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Login</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="zstyle.css">
</head>
<body>
<!-- Recuperar el nombre y la contraseña. Si es admin admin ir a otra página -->

<%
String nombre=request.getParameter("nombre");
String pwd=request.getParameter("pwd");

if (nombre!=null && pwd!=null && nombre.equals("admin") && pwd.equals("admin")){
	response.sendRedirect("panel.jsp");
}
%>

 <form  method="post">
  <div class="form-group">
    <label for="nombre">Nombre:</label>
    <input type="text" class="form-control" placeholder="Introduce nombre" name="nombre" id="nombre">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Introduce contraseña" name="pwd">
  </div>
  
  <button type="submit" class="btn btn-primary">Enviar</button>
</form> 
	
</body>
</html>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tirar Monedas</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="zstyle.css">
</head>
<body>
<h1>Bienvenido a las utilidades maravillosas del ejercicio</h1>
<h2><a href="tabla.jsp">Tabla de multiplicar</a></h2>
<h2><a href="mayor.jsp">Mayor y menor</a></h2>
<h2><a href="palindromo.jsp">¿Es palíndromo?</a></h2>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tabla de multiplicar</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="zstyle.css">
</head>
<body>
<%
String numero=request.getParameter("numero");
%>

 <form>
  <div class="form-group">
    <label for="numero">Número:</label>
    <input type="number" class="form-control" placeholder="Introduce el número" name="numero"
    value="<%=numero!=null?numero:"" %>" >
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form> 
	
<%

if (numero!=null && !numero.equals("") && numero.chars().allMatch(Character::isDigit)){
	int num=Integer.parseInt(numero);
	for(int i=1;i<=10;i++){
	//	out.println("<p>"+i+" x "+num+" = "+(i*num)+"</p>");
		%>
		<p><%=i%> x <%=num %> = <%=(i*num) %></p>
		<%
	}
}

%>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Mayor y menor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="zstyle.css">
</head>
<body>

	<%
	String numero1 = request.getParameter("numero1");
	String numero2 = request.getParameter("numero2");
	numero1=numero1==null?"":numero1;
	%>

	<form>
		<div class="form-group">
			<label for="numero1">Número 1:</label> <input type="number"
				class="form-control" placeholder="Introduce el número"
				name="numero1" id="numero1" value="<%=numero1 %>">
		</div>
		<div class="form-group">
			<label for="numero2">Número 2:</label> <input type="number"
				class="form-control" placeholder="Introduce el número"
				name="numero2" value="<%=numero2!=null?numero2:"" %>">
		</div>
		<button type="submit" class="btn btn-primary">Enviar</button>
	</form>

	<%
	if (!numero1.equals("") && numero1.chars().allMatch(Character::isDigit) && numero2 != null
			&& !numero2.equals("") && numero2.chars().allMatch(Character::isDigit)) {
		int num1 = Integer.parseInt(numero1);
		int num2 = Integer.parseInt(numero2);

		if (num2 > num1) {
			num1 = num2;
		}
	%>
	<h2>
		El número mayor es
		<%=num1%></h2>
	<%
	}
	%>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>¿Es palíndromo?</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="zstyle.css">
</head>
<body>

	<%
	String cadena = request.getParameter("cadena");
	
	if (cadena != null) {
		if (esPalindromo(cadena)) {
	%>
	<h2>
		La cadena <b><%=cadena%></b> es un palíndromo
	</h2>
	<%
	} else {
	%>
	<h2>
		Lo siento, la cadena <b><%=cadena%></b> NO es un palíndromo
	</h2>
	<%
	}

	String mensaje = "";
	if (!esPalindromo(cadena)) {
	mensaje = " NO ";
	}
	%>
	<h2>
		La cadena <b><%=cadena%></b>
		<%=mensaje%>
		es un palíndromo
	</h2>
	<%
	}
	%>

	<form>
		<div class="form-group">
			<label for="numero1">Introduce la cadena:</label> <input type="text"
				class="form-control" placeholder="Introduce la cadena" name="cadena"
				value="<%=cadena != null ? cadena : ""%>">
		</div>
		<button type="submit" class="btn btn-primary">Enviar</button>
	</form>

	<%!boolean esPalindromo(String cadena) {
		cadena = normalizar(cadena);
		StringBuilder foo = new StringBuilder(cadena);
		return cadena.equals(foo.reverse().toString());
	}

	// He creado una función normalizar para otros caracteres
	String normalizar(String cadena) {
		return cadena.toLowerCase().replace("á", "a").replace("é", "e").replace("í", "i").replace("ó", "o")
				.replace("ú", "u").replace("ü", "u").replace(" ", "").replace(".", "").replace(",", "");
	}%>
</body>
</html>

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos