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>

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/

http://chuwiki.chuidiang.org/index.php?title=Pasar_datos_entre_JSPs_y_Servlets._Page,_Request,_Session_y_Application_scope

<%
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.

Ejercicio JSP

Crear una web que nos haga una tirada de un dado:

¡Lanza los dados!

Has sacado un XX
Volver a tirar

Usad el ejemplo de cara y cruz que tenéis en la otra entrada.
Volver a tirar es un enlace a la propia página.