Práctica 02. Formularios

(1)

(2)

El objetivo de esta práctica es desarrollar un formulario el cual podrá ser visto desde cualquier navegador y desde cualquier equipo de cómputo.

En esta práctica aprenderás a desarrollar una página web con HTML5 y con una hoja de estilos (CSS), para poder crear una interacción entre páginas se utilizará un lenguaje de programación (PHP) y con conexión a una Base de Datos

Cuando el proyecto se haya terminado será necesario enviar un print screen (imprimir pantalla) del proyecto, como se especifica en el mini-proyecto 02.

La carpeta llamada “contacto” tiene que almacenarse dentro de un servidor, con el cual se podrán subir los archivos o la carpeta “contactos” mediante FTP, revisar el tutorial

Instalación de un FTP, cuando se abre el FTP se debe almacenar dentro de “web/content”.

Para que se pueda tener interacción con una Base de Datos es necesario revisar el tutorial

Creación de una Base de Datos.

Recordar que los accesos al servidor se entregan una vez terminada la Práctica 01. La estructura de la página web ya esta lista, por que se creo en la Práctica 01, ahora es necesario agregar los siguientes archivos dentro de la carpeta llamada “php”.

Se crean los siguientes archivos: conexión.php

*esté archivo es uno de los mas importantes para el proyecto ya que desde aquí se realiza la conexión con la Base de Datos, la variable servidor se deja como esta en este ejemplo, las variables usuario, password y bd cambiarán ya que estás son enviadas cuando se termina la Práctica 01. <?php function conectarse(){ $servidor = "mysql51-026.wc1.ord1.stabletransit.com"; $usuario = "888149_clubuser1"; $password = "ClubDigital"; $bd = "888149_clubuser1";

$conectar = new mysqli($servidor, $usuario, $password, $bd); return $conectar;

(3)

$conexion = conectarse(); ?> agregar-contacto.php <?php

// Hacemos las inserciones a la base de datos cachanco los campos de HTML de nuestro form en variables locales

$email = $_POST["email_txt"]; $nombre = $_POST["nombre_txt"]; $sexo = $_POST["sexo_rdo"]; $nacimiento = $_POST["nacimiento_txt"]; $telefono = $_POST["telefono_txt"]; $pais = $_POST["pais_slc"];

// Dependiendo el sexo, la imagen predeterminada cambia $imagen_generica = ($sexo == "M")?"amigo.png":"amiga.png"; // Verificar que no exista el email del usuario en la BD

include("conexion.php");

$consulta = "SELECT * FROM contactos WHERE email ='$email'"; $ejecutar_consulta = $conexion->query($consulta);

$num_regs = $ejecutar_consulta->num_rows; // Devuelve el numero de columnas que trajo la consulta

// Si $num_regs es igual a cero, insertamos datos en la tabla, de lo contrario el usuario ya existe

if ($num_regs == 0){

// Función para subir la imagen include("funciones.php");

$tipo = $_FILES["foto_fls"]["type"]; //Detectar que tipo de imagen es $archivo = $_FILES["foto_fls"]["tmp_name"];

$se_subio_imagen = subir_imagen($tipo,$archivo,$email);

// Si la foto del formulario viene vacía, se asigna la foto predeterminada $imagen = empty($archivo)?$imagen_generica:$se_subio_imagen; $consulta = "INSERT INTO contactos

(email,nombre,sexo,nacimiento,telefono,pais,imagen) VALUES

('$email','$nombre','$sexo','$nacimiento','$telefono','$pais','$imagen')";

(4)

if ($ejecutar_consulta)

$mensaje = "Se ha dado de alta <b>$email</b> :)"; else

$mensaje = "No se pudo dar de alta <b>$email</b> :("; }

else{

$mensaje = "El correo $email ya existe :/"; } $conexion->close(); header("Location: ../index.php?op=alta&mensaje=$mensaje"); ?> cambio-form.php <div>

<label for="email">Email: </label>

<input type="email" id="email" class="cambio" name="email_txt" placeholder="Escribe tu email" title="Email" value="<?php echo

$registro_contacto["email"]; ?>" disabled required />

</div> <div>

<label for="nombre">Nombre: </label>

<input type="text" id="nombre" class="cambio" name="nombre_txt" placeholder="Escribe tu nombre" title="Nombre" value="<?php echo

$registro_contacto["nombre"]; ?>" required /> </div>

<div>

<input type="radio" id="m" name="sexo_rdo" title="Tu sexo" value="M" <?php if ($registro_contacto["sexo"] == "M"){ echo "checked"; } ?> required /> <label for="m">Masculino</label>

<input type="radio" id="f" name="sexo_rdo" title="Tu sexo" value="F" <?php if ($registro_contacto["sexo"] == "F"){ echo "checked"; } ?>required /> <label for="f">Femenino</label>

</div> <div>

<label for="nacimiento">Fecha de nacimiento: </label>

(5)

title="Tu fecha de nacimiento" value="<?php echo $registro_contacto["nacimiento"]; ?>" required />

</div> <div>

<label for="telefono">Telefono: </label>

<input type="number" id="telefono" class="cambio" name="telefono_txt" placeholder="Escribe telefono" title="Tu telefono" value="<?php echo

$registro_contacto["telefono"]; ?>"required /> </div>

<div>

<select id="pais" class="cambio" name="pais_slc" value="<?php echo $registro_contacto["pais"]; ?>" required>

</div> <div>

</div> <div>

</div> <div>

</div>

consulta-form.php <div>

<label for="email">Email: </label>

<input type="email" id="email" class="cambio" name="email_txt" placeholder="Escribe tu email" title="Email" value="<?php echo

$registro_contacto["email"]; ?>" disabled required />

(6)

<div>

<label for="nombre">Nombre: </label>

<input type="text" id="nombre" class="cambio" name="nombre_txt" placeholder="Escribe tu nombre" title="Nombre" value="<?php echo

$registro_contacto["nombre"]; ?>" disabled required /> </div>

<div>

<input type="radio" id="m" name="sexo_rdo" title="Tu sexo" value="M" <?php if ($registro_contacto["sexo"] == "M"){ echo "checked"; } ?> disabled required

/> <label for="m">Masculino</label>    

<input type="radio" id="f" name="sexo_rdo" title="Tu sexo" value="F" <?php if ($registro_contacto["sexo"] == "F"){ echo "checked"; } ?> disabled required

/> <label for="f">Femenino</label> </div>

<div>

<label for="nacimiento">Fecha de nacimiento: </label>

<input type="date" id="nacimiento" class="cambio" name="nacimiento_txt" title="Tu fecha de nacimiento" value="<?php echo $registro_contacto["nacimiento"]; ?>" disabled required />

</div> <div>

<label for="telefono">Telefono: </label>

<input type="number" id="telefono" class="cambio" name="telefono_txt" placeholder="Escribe telefono" title="Tu telefono" value="<?php echo

$registro_contacto["telefono"]; ?>" disabled required /> </div>

<div>

<select id="pais" class="cambio" name="pais_slc" value="<?php echo $registro_contacto["pais"]; ?>" disabled required>

</div> <div>

(7)

<div>

(8)

eliminar-contacto.php <?php $email = $_POST["email_slc"]; include ("conexion.php");

$consulta = "DELETE FROM contactos WHERE email='$email'"; $ejecutar_consulta = $conexion->query($consulta);

if($ejecutar_consulta)

$mensaje = "El contacto con el email <b>$email</b> ha sido eliminado :("; else

$mensaje = "El contacto con el email <b>$email</b> no se pudo eliminar :/"; $conexion->close(); header("Location: ../index.php?op=baja&mensaje=$mensaje"); ?> modificar-contacto.php <?php

//Asigno a variables php los valores que vienen del formulario

//Como el campo del email esta deshabilitado en el form php no lo reconoce por eso tengo que guardar su valor en campo oculto

$email = $_POST["email_hdn"]; $nombre = $_POST["nombre_txt"]; $sexo = $_POST["sexo_rdo"]; $nacimiento = $_POST["nacimiento_txt"]; $telefono = $_POST["telefono_txt"]; $pais = $_POST["pais_slc"]; include ("conexion.php");

$consulta = "SELECT * FROM contactos WHERE email = '$email'"; $ejecutar_consulta = $conexion->query($consulta);

$num_regs = $ejecutar_consulta->num_rows; //trae el numero de registros de la consulta

if($num_regs==1) {

// Si la foto viene vacia, asignamos el valor del boton oculto de la foto que tiene el valor anterior a la busqueda, si no, subir la nueva foto y reemplazar el valor

(9)

{ $imagen = $_POST["foto_hdn"]; } else { include("funciones.php"); $tipo = $_FILES["foto_fls"]["type"]; $archivo = $_FILES["foto_fls"]["tmp_name"]; $imagen = subir_imagen($tipo, $archivo, $email); }

// Actualizar los datos de la base

$consulta = "UPDATE contactos SET nombre='$nombre', sexo='$sexo', nacimiento='$nacimiento', telefono='$telefono', pais='$pais', imagen='$imagen' WHERE email='$email'";

$ejecutar_consulta = $conexion->query(utf8_decode($consulta)); if (ejecutar_consulta)

{

$mensaje="Cambios realizados correctamente con el email <b>$email</b> :)";

} else {

$mensaje="No se pudieron hacer los cambios para el email <b>$email</b> :(";

} }

else {

$mensaje="No se pudieron hacer los cambios en los datos del contacto con el email <b>$email</b> porque no existe o esta duplicado";

}

$conexion->close();

header("Location: ../index.php?op=cambios&mensaje=$mensaje"); ?>

(10)

select-email.php <?php

// Conectar a base de datos include("conexion.php");

// Query para obtener registros de la base de datos

$consulta = "SELECT email FROM contactos ORDER BY email"; // Ejecutar query

$ejecutar_consulta = $conexion->query($consulta);

// While recorre todos los registros generados de la consulta anterior while($registro = $ejecutar_consulta->fetch_assoc())

{

echo "<option value='".utf8_encode($registro["email"])."'"; if($_GET["contacto_slc"] == $registro["email"])

{

echo " selected"; }

echo ">".utf8_encode($registro["email"])."</option>"; //poniendo el valor de email

}

// $conexion->close(); cerrar conexion ?>

select-pais.php <?php

if(!$registro_contacto["pais"]) {

include ("conexion.php"); //codigo del archivo conexion.php }

$consulta="SELECT * FROM pais ORDER BY pais"; //Query para la extraccion de datos de la BD

$ejecutar_consulta = $conexion->query($consulta); //$conexion ya es un objeto de MySQLi y solo hay que pasarle la consulta

(11)

{

$nombre_pais = utf8_encode($registro["pais"]); echo "<option value='$nombre_pais'";

if ($nombre_pais==utf8_decode($registro_contacto["pais"])) { echo " selected"; } echo ">$nombre_pais</option>"; } ?>

Cuando se sube el proyecto al espacio virtual es necesario ingresar a la liga que se envía cuando se entregan los accesos, para este ejemplo es “http://user1.clubdigital.mx.php54-1.ord1-1.websitetestlink.com/contacto” y se puede corroborar si se realizo bien el proyecto.