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>
