Algunos enlaces sobre el tema:
https://www.it.uc3m.es/labttlat/2007-08/material/servlets/
https://www.javatpoint.com/servlet-tutorial
MVC páginas y ejemplos
Ejercicio variables de sesion
Vamos a cambiar el login para que nos acepte cualquier usuario siempre que ponga un nombre y la contraseña sea ‘admin’.
El nombre del usuario lo vamos a guardar en una variable de sesión y lo vamos a mostrar en todas las páginas.
Si no hay nombre cuando accedo a una página, me redirige al login.
Vamos a añadir la variable de sesión ‘intentos’ con un valor de 10 y cada vez que hagamos algo (ver el número mayor, tabla de multiplicar o palindromo) le restamos uno. Si llegamos a cero que nos redirija a la página de login.
Ejemplo variables sesión
<%@ 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="style.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")){
// Estas variables son accesibles desde cualquier página
session.setAttribute("nombre", nombre);
session.setAttribute("saludo", "hola que tal");
session.setAttribute("intentos", 5);
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>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");
String nombre=(String) session.getAttribute("nombre");
Integer intentos=(Integer)session.getAttribute("intentos");
if(nombre==null){
response.sendRedirect("login.jsp");
}
%>
<h1>Hola <%=nombre %> tienes <%=intentos %> intentos</h1>
<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>
Github últimos ejercicios
Ejemplo JSP
<%@ 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>
<%
int num1 = (int) Math.floor(Math.random() * 2) + 1;
int num2 = (int) Math.floor(Math.random() * 2) + 1;
String moneda1 = num1 == 1 ? "cara" : "cruz";
String moneda2 = num2 == 1 ? "cara" : "cruz";
%>
<h1>
Juego de las monedas <img src="img/cara.png" />
</h1>
<h1>¡Lanza la monedas!</h1>
<p>
<%
if (num1 == 1) {
%>
<img src="img/cara.png">
<%
} else {
%>
<img src="img/cruz.png">
<%
}
%>
<img src="img/<%=moneda2%>.png">
</p>
<%
if (num1 == num2) {
%>
<h2>Has ganado</h2>
<%
} else {
%>
<h2>Has perdido ¡looser!</h2>
<%
}
%>
<a href="index.jsp" class="btn btn-primary">Volver a tirar</a>
<script src="js/codigo.js"></script>
</body>
</html>
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>
Objetos request y response
https://jtagua.wordpress.com/2010/10/07/tutorial-de-jsp-12-objeto-implicito-request/
https://jtagua.wordpress.com/2010/10/17/tutorial-de-jsp-13-objeto-implicito-response/
https://beginnersbook.com/2013/11/jsp-implicit-object-response-with-examples/
<%
String nombre=request.getParameter("nombre");
String email=request.getParameter("email");
if (nombre.equals("admin")){
response.sendRedirect("admin.jsp");
}
%>
Otro ejemplo:
<%
String num1 = request.getParameter("num1");
String num2 = request.getParameter("num2");
if (num1!=null && !num1.equals("")) {
out.print("Has enviado " + num1 + " y " + num2);
int suma=Integer.parseInt(num1)+Integer.parseInt(num2);
%>
<h2>La suma es <%=suma %></h2>
<%
}
%>
<form>
<input type="text" name="num1"> <input type="text" name="num2">
<input type="submit">
</form>
Tirada de monedas
Página que nos tire dos monedas (cara y cruz)
Y si las dos son cara o cruz nos diga -además de mostrar el resultado- ‘has ganado’ y si no ‘has perdido’.
Y un botón de volver a tirar.
Animaciones CSS
100 animaciones increíbles y fáciles de usar:
https://dev.to/afif/another-100-underline-overlay-animations-the-extended-css-collection-574c