eugeniaperez.es
eugeniaperez.es
Aplicación alojada en un servidor web, a la cual se accede mediante un navegador.
Normalmente no es solo estática. Contiene elementos para la comunicación activa entre el cliente y el servidor (formularios).
Puede estar escrita en múltiples lenguajes de programación:
eugeniaperez.es
Clasificación de lenguajes y frameworks en función de su propósito:
Presentación
Estructuración
Programación cliente
Programación servidor
Frameworks de desarrollo
eugeniaperez.es
eugeniaperez.es
eugeniaperez.es
eugeniaperez.es
eugeniaperez.es
eugeniaperez.es
Capacidad de conexión con la mayoría de los motores de BD actuales, destaca su conectividad con MySQL y PostgreSQL.
Amplia documentación y soporte en la web:
Documentación oficial:
eugeniaperez.es
Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
Permite aplicar técnicas de POO.
Tiene manejo de excepciones.
Tiene soporte de Frameworks MVC.
eugeniaperez.es
Mientras que las páginas web (HTML simple o con JavaScript y CSS) son ficheros con contenido estático que no cambia desde el servidor web al navegador del cliente.
Las páginas dinámicas (.php) antes de servirse se procesan en el servidor y el resultado de esa ejecución se sirve al cliente como HTML.
En este caso, el contenido del fichero PHP en el servidor y en el cliente es distinto.
eugeniaperez.es
Los scripts PHP están incrustrados en los documentos HTML y el servidor los lee, interpreta y los ejecuta
antes de servirlos al cliente.
Por lo tanto el cliente no ve en ningún caso el código PHP (como sí sucedía con JS...) si no que ve los resultados finales.
eugeniaperez.es
https://www.apachefriends.org/es/index.html
eugeniaperez.es
eugeniaperez.es
Vete a la carpeta htdocs y renombra index.php a index_old.php, por ejemplo. Ahora crea un fichero index.php:
<html>
<head>
<title>Index</title>
</head>
<body>
<h1><?php echo “Hola, Alumnos de DAM!!”;?></h1>
</body>
</html>
eugeniaperez.es
eugeniaperez.es
Si abrimos el archivo de configuración httpd.conf (en C:\xampp\apache), hallamos la siguiente directiva:
# DirectoryIndex: sets the file that Apache will serve if
# a directory is requested.
#
<IfModule dir_module>
DirectoryIndex index.php index.pl index.cgi index.asp index.shtml index.html index.htm \
default.php default.pl default.cgi default.asp default.shtml default.html default.htm \
home.php home.pl home.cgi home.asp home.shtml home.html home.htm
</IfModule>
eugeniaperez.es
Renombra index.php como index.html.
Para crearlo utiliza el mismo código fuente, pero sustituye el elemento h1 del anterior ejemplo por éste:
Conéctate al servidor con el navegador: localhost.
<h1>Hola, clase de Desarrollo Web!!</h1>
eugeniaperez.es
eugeniaperez.es
Como se ha indicado es posible acceder a cualquier ficheros en xampp/htdocs;
En este ejemplo, el index.php se crea dentro del subdirectorio tu_nombre, y se accede a él en dicha ruta:
Ahora le añadiremos una función que nos permite comprobar la versión de php/configuración/variables:
<?php
echo “Hola Qué Tal?”;
?>
phpInfo();
eugeniaperez.es
eugeniaperez.es
Para poder utilizar el delimitar corto del ejercicio anterior hemos de modificar la directiva Short Open Tag, del archivo php.ini, y sustituir el Off por defecto por un On.
En principio, verás que no hace falta reiniciar…
eugeniaperez.es
Pág. 12
eugeniaperez.es
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href = "css/style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>
<body>
<div id="header">
<img src="img/cuatrovientoslogo.gif"/>
<h1>Página web de Eugenia</h1>
</div>
<div id="content">
<p>Este es el contenido de la página</p>
<p>Aquí podría poner toda la información que quisiese</p>
</div>
<div id="footer">
<p>Av. de San Jorce Etorbidea, 2, 31012 Pamplona, Navarra
948 12 41 29
<img src="img/email.png" style="vertical-align: middle;" alt="email ctl"></p>
<p><a href="/mapa-web.aspx" title="Mapa web">Mapa web</a></p>
</div>
</body>
</html>
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href = "css/style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>
<body>
<div id="header">
<img src="img/cuatrovientoslogo.gif"/>
<h1>Página web de Eugenia</h1>
</div>
<div id="content">
<p>Este es el contenido de la página</p>
<p>Aquí podría poner toda la información que quisiese</p>
</div>
<div id="footer">
<p>Av. de San Jorce Etorbidea, 2, 31012 Pamplona, Navarra
948 12 41 29
<img src="img/email.png" style="vertical-align: middle;" alt="email ctl"></p>
<p><a href="/mapa-web.aspx" title="Mapa web">Mapa web</a></p>
</div>
</body>
</html>
eugeniaperez.es
<?php
include("header.php");
echo '<div id = "content">
<p>Este es el contenido de la página</p>
<p>Aquí podría poner toda la información que quisiese</p>
</div>';
include("footer.php");
?>
Solución: proyecto includeFiles
eugeniaperez.es
eugeniaperez.es
Se utiliza para pedir recursos al servidor a través de una URI, HTML o imagen, una consulta de una base de datos, etc. El servidor procesa la petición y devuelve el resultado generado.
Esta petición viajará en el siguiente este formato:
http://www.sitioremoto.org/files/index.html?param1=valor1¶m2=valor2
eugeniaperez.es
http://www.sitioremoto.org/files/index.html?param1=valor1¶m2=valor2
eugeniaperez.es
<form action = "welcome.php" method = "get">
Name: <input type = "text" name = "name">
Age: <input type = "text" name = "age">
<input type = "submit" value ="Sent">
</form>
El formulario quedaría de la siguiente manera:
El fichero "welcome.php" sera el encargado de recoger los parámetros enviados mediante la variable $_GET:
echo "Bienvenido ".$_GET["name"]. " con edad: ".$_GET["age"];
eugeniaperez.es
if (isset($_GET["name"]) && (!empty($_GET["name"]))) {
echo "Bienvenido ".$_GET["name"]. " con edad: ".$_GET["age"];
}
Sobre este fichero podemos hacer la comprobación siguiente:
Solución: ejemploGET
eugeniaperez.es
La diferencia fundamental es que al hacerlo por POST, los parámetros enviados ya no nos aparecerán en la URL. Este método se utiliza normalmente cuando queremos enviar información al servidor mediante un formulario (autenticación, inserción, actualización, etc).
Transfórmalo a POST...
eugeniaperez.es
Siempre habrá ataques de SQLInjection, etc
Simplemente son para propósitos distintos
eugeniaperez.es
La Web se basa en un modelo no conectado (stateless) donde no existe el estado, por lo que el salto de una página web a otra implica la pérdida de datos.
Para registrar estos estados existen las sesiones, permitiendo que estos puedan ser gestionados.
eugeniaperez.es
Las sesiones controlan de forma segura los recursos ofrecidos por las aplicaciones web.
Guardan información específica de cada usuario mientras este navega por una aplicación web.
Cada usuario tiene su sesión propia, evitándose que cuando el usuario pase de una página a otra se pierda la información.
eugeniaperez.es
Mediante el objeto Session se pueden gestionar las sesiones del usuario que visita la página, utilizando la función session_start().
También se puede cerrar manualmente mediante session_destroy().
if (isset($_GET["nombre"]) && (!empty($_GET["nombre"]))) {
echo "Bienvenido ".$_GET["nombre"];
session_start();
$_SESSION["nombre"] = $_GET["nombre"];
header("Location: index1.php?nombre=".$_GET["nombre"]);
}
eugeniaperez.es
Recogiendo los datos enviados en la Session:
session_start();
echo "El nombre del usuario " . $_SESSION["nombre"]."<br />";
if (isset($_GET["nombre"]) && (!empty($_GET["nombre"]))) {
echo "El nombre del usuario " . $_GET["nombre"];
}
//session_destroy();
eugeniaperez.es
eugeniaperez.es
El resultado será:
eugeniaperez.es
eugeniaperez.es
Como resultado se visualizará:
eugeniaperez.es
Haz un formulario que te pida introducir tu nombre y tu dirección de correo electrónico y envíe esta información al servidor por POST, y la muestre en un nuevo fichero.
eugeniaperez.es
A continuación modifica el fichero del formulario (tendrás que ponerle extensión .php) para que dicha información se muestre en la misma página que el formulario origen.
De la siguiente manera:
eugeniaperez.es
Realiza un formulario de contacto como el siguiente, que contenga un mapa de Google Maps donde especifiques la localización de CTL y los siguientes campos:
eugeniaperez.es
eugeniaperez.es
Se crea un index con un formulario:
eugeniaperez.es
Reglas a introducir:
eugeniaperez.es
Resultado de validación:
eugeniaperez.es
Es muy habitual realizar esta tarea mediante una librería, que se basa en JavaScript, y que es muy popular y ampliamente utilizada en el entorno empresarial: jQuery.
Deberás descargarte el fichero js con la librería de jQuery, y su extensión para validar formularios:
eugeniaperez.es
Crea un nuevo proyecto en el Netbeans, e inclúyelos en un directorio que puedes llamar lib. Acuérdate de incluirlos en el fichero:
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
eugeniaperez.es
Realizaremos un formulario
HTML como el siguiente:
eugeniaperez.es
Se crea el index.html:
<form id="orderForm" action="reservar-get.php" method="GET">
<fieldset>
<legend>Reserva de vuelo</legend>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" placeholder="Joe" />
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Bloggs" />
<label for="origen">Origen</label>
<input type="text" name="origen" id="origen" placeholder="Pamplona" />
<label for="salida">Fecha salida</label>
<input type="date" name="salida" id="salida"/>
<label for="destino">Destino</label>
<input type="text" name="destino" id="destino" placeholder="Madrid" />
<label for="llegada">Fecha llegada</label>
<input type="date" name="llegada" id="llegada" />
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="name@example.com" />
</fieldset>
<input type="submit" name="reservar" value="Reservar" />
</form>
eugeniaperez.es
A continuación vamos a añadir el código que nos permite validar el formulario mediante jQuery (en el head del fichero, bajo la inclusión de los ficheros de validación jQuery):
Copiar del html del proyecto del ejemplo…
eugeniaperez.es
Una vez que el documento se haya terminado de cargar, se valida el formulario (con id en este caso #orderForm) en base a :
eugeniaperez.es
Este será el resultado final.
eugeniaperez.es
Partiendo del proyecto de internacionalización.
Sustituye las cadenas de texto a traducir por función _(): shortcut de gettext() y como parámetro una clave que nos servirá para obtener luego la traducción.
<h2>PHP Form Validation Example</h2>
Pasa a ser:
<h2><?php echo _("title.h2"); ?></h2>
eugeniaperez.es
Descargar Poedit: http://www.poedit.net/download.php
Selecciona la opción Archivo -> New y selecciona inglés.
Ahora pulsa la opción Extract from sources.
Guarda el proyecto (para ello tienes que asignarle un nombre en Catálogo-Propiedades).
eugeniaperez.es
Crea una estructura de carpetas como en la siguiente imagen (no prestes atención de momento a los ficheros .mo):
eugeniaperez.es
Desde Poedit, vete a Catálogo->Propiedades, y a la pestaña Directorios fuente.
En Directorio raíz mete la ruta de tu proyecto. En mi caso:
http://C:\Users\Eugenia\Documents\NetBeansProjects\internacionalizacionCTLform
eugeniaperez.es
En la parte de abajo, en Carpetas, debes meter todos aquellos directorios en los que tengas ficheros PHP susceptibles de ser traducidos.
De momento, comenzamos con el directorio actual (el mismo que el de arriba). Para ello debes poner el carácter '.'.
eugeniaperez.es
Ahora vete a Catálogo->Actualizar desde fuentes. Al hacer esto, Poedit debería ir al directorio indicado, buscar en todos los ficheros PHP todas las ocurrencias de llamadas a la función _().
En mi caso obtengo
lo siguiente:
Proporciona traducciones a todas esas claves en el idioma correspondiente.
Pulsa en el botón Guardar y también en Actualizar.
Y añadimos a la aplicación la lógica necesaria para establecer el idioma a utilizar:
<!DOCTYPE html>
<?php
$language = "en_GB";
putenv("LC_ALL=$language");
setlocale(LC_ALL, $language);
bindtextdomain("messages", "locale");
textdomain("messages");
?>
<html>
<head>
Para que el código anterior funcione, los ficheros .po deben llamarse messages, y debes seleccionar la misma estructura de carpetas recomendada anteriormente. Puede ser necesario que reinicies el Apache para que incorpore los cambios.
eugeniaperez.es
Deberías poder visualizarlo en inglés:
eugeniaperez.es
Prueba a internacionalizarlo a español (realiza el mismo proceso y acuérdate de cambiar $language = “es_ES"; ):
eugeniaperez.es
Para que el usuario pueda cambiar el idioma cómodamente, podemos incluir unos enlaces en la parte superior de la pantalla.
Al pulsar en ellos, deben pasar por GET el lenguaje elegido (por ejemplo es_ES) a un fichero PHP, el cuál introducirá en sesión el idioma y redireccionará de nuevo al usuario a la página de index.
eugeniaperez.es
Para que el usuario pueda cambiar el idioma cómodamente, podemos incluir unos enlaces en la parte superior de la pantalla.
Al pulsar en ellos, deben pasar por GET el lenguaje elegido (por ejemplo es_ES) a un fichero PHP, el cuál introducirá en sesión el idioma y redireccionará de nuevo al usuario a la página de index.
<a href="changeLanguage.php?lang=es_ES"><?php echo _("spanish"); ?></a> |
<a href="changeLanguage.php?lang=en_GB"><?php echo _("english"); ?></a>
eugeniaperez.es
Como se puede ver, los enlaces van a la página changeLanguage.php, pasando un parámetro lang con el idioma seleccionado por el usuario. Este fichero almacenaría en sesión el idioma:
<?php
session_start();
if (isset($_GET["lang"])) {
$_SESSION["language"] = $_GET["lang"];
header('Location: ' . "index.php", true);
die();
}
?>
eugeniaperez.es
Se redirecciona de vuelta a la página de index, la cual comprueba si el idioma está en sesión, y en tal caso lo asigna a la aplicación:
<?php
session_start();
if (isset($_SESSION["language"])) {
$language = $_SESSION["language"];
} else {
$language = "en_GB";
}
putenv("LC_ALL=$language");
setlocale(LC_ALL, $language);
…
eugeniaperez.es
Se parte del proyecto AccesoDatos -> login de usuario
Se crea la BD login y la tabla usuario:
CREATE TABLE `login`.`usuario` (
`idusuario` INT NOT NULL AUTO_INCREMENT COMMENT '',
`username` VARCHAR(45) NOT NULL COMMENT '',
`password` VARCHAR(45) NOT NULL COMMENT '',
PRIMARY KEY (`idusuario`) COMMENT '');
Se crea un usuario:
INSERT INTO `login`.`usuario` (`username`, `password`) VALUES ('admin', 'admin');
eugeniaperez.es
ManejadorPersistencia:
Se establecen los parámetros de conexiones a BD.
//Parámetros de conexión a la BD.
private $usuarioBD = "root";
private $psswdBD = "";
private $nombreBD = "login";
private $hostBD = "localhost";
eugeniaperez.es
ManejadorPersistencia:
Para establecer la conexión:
//Constructor de la clase: se encarga de establecer una conexion con nuestro GBBDD.
public function __construct() {
ManejadorPersistencia::$conexion = mysqli_connect($this->hostBD,
$this->usuarioBD, $this->psswdBD, $this->nombreBD)
or die("Could not connect to db: " . mysqli_error());
mysqli_query(ManejadorPersistencia::$conexion, "SET NAMES 'utf8'");
}
eugeniaperez.es
consultarUsuario:
Se accede a los campos de los registros:
if ($resultado && mysqli_num_rows($resultado) > 0) {
//Creamos un array asociativo para acceder al resultado
$usuario = mysqli_fetch_array($resultado);
echo "Usuario correctamente logueado: " . $usuario['username'];
} else {
echo "Usuario no logueado";
}
eugeniaperez.es
Métodos y propiedades para el tratamiento del conjunto
de resultados PHP:
http://php.net/manual/es/mysqli.summary.php
eugeniaperez.es
eugeniaperez.es
Creamos una BD llamada blog con dos tablas:
Tabla posts:
eugeniaperez.es
Tabla usuarios:
eugeniaperez.es
Intentamos hacer una pantalla de login que se dirija a una parte privada que liste los posts de los usuarios. En principio solo tendremos un usuario que será el administrador.
eugeniaperez.es
eugeniaperez.es
Para ello:
eugeniaperez.es
Para ello...
eugeniaperez.es
Si todo ha ido correcto, el usuario se encuentra en la BD se le envía a esta pantalla (en caso contrario se mantiene en la pantalla de login y se muestra un error):
eugeniaperez.es
Creamos la página protegida.php, que inicialmente recogerá todos los posts de la BD y los listará. Para ello:
eugeniaperez.es
Como estamos mostrando el $_SESSION["nombre"] del usuario, necesitaremos iniciar la sesión.
Hacemos el logout.php: finalizamos sesión (session_destroy) y redirigimos.
Importante: es privado… Luego se debe restringir su acceso:
Si no está en sesión, redirigimos de nuevo a la página de login
if (!isset($_SESSION["nombre"])) {
header("Location: index.php?error=1");
}
eugeniaperez.es
Añadiendo funcionalidad:
Listado de posts: el enlace redireccionará a la propia página.
Escribir nuevo: Redirige a esta página ->
Editar perfil: pendiente
eugeniaperez.es
Creamos la página insertarpost.php, que contendrá un formulario de inserción. Para ello:
Importante: es privado… Luego se debe restringir su acceso.
Se crea el formulario de inserción.
Un controlador del post, que acceda a BD e inserte un post:
$sql = "INSERT INTO posts (titulo, contenido) VALUES('" . $_POST["titulo"] . "','" . $_POST["contenido"] . "')";
¡Hemos finalizado la primera versión de nuestro blog!
eugeniaperez.es
Cargamos el simple_login 2 (ó 3). Comprobar:
eugeniaperez.es
Cargamos el simple_login 2 (ó 3). Comprobar:
Borrar un mensaje: PASO POR GET: borrar.php?id=" . $registro["id"]
Si es true un isset($_GET["id"]) =>
eugeniaperez.es
eugeniaperez.es
Finalmente en la versión del simple_login 2 (ó 3).
Vamos a ver como mostrar la información de usuario, en perfil.php.
Y la modificación del perfil en modificarPerfil.php:
eugeniaperez.es
MEJORAS: