Práctica 02. Formularios

Transcripción

1 Práctica 02. Formularios Página 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. function conectarse() $servidor = "mysql wc1.ord1.stabletransit.com"; $usuario = "888149_clubuser1"; $password = "ClubDigital"; $bd = "888149_clubuser1"; $conectar = new mysqli($servidor, $usuario, $password, $bd); return $conectar; Página 2

3 $conexion = conectarse();?> agregar-contacto.php // Hacemos las inserciones a la base de datos cachanco los campos de HTML de nuestro form en variables locales $ = $_POST[" _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 del usuario en la BD include("conexion.php"); $consulta = "SELECT * FROM contactos WHERE ='$ '"; $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,$ ); // 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 ( ,nombre,sexo,nacimiento,telefono,pais,imagen) VALUES ('$ ','$nombre','$sexo','$nacimiento','$telefono','$pais','$imagen')"; $ejecutar_consulta = $conexion->query(utf8_encode($consulta)); Página 3

4 else if ($ejecutar_consulta) $mensaje = "Se ha dado de alta <b>$ </b> :)"; else $mensaje = "No se pudo dar de alta <b>$ </b> :("; $mensaje = "El correo $ ya existe :/";?> $conexion->close(); header("location:../index.php?op=alta&mensaje=$mensaje"); cambio-form.php <label for=" "> </label> <input type=" " id=" " class="cambio" name=" _txt" placeholder="escribe tu " title=" " value=" echo $registro_contacto[" "];?>" disabled required /> <input type="hidden" name=" _hdn" value=" echo $registro_contacto[" "];?>" /> <label for="nombre">nombre: </label> <input type="text" id="nombre" class="cambio" name="nombre_txt" placeholder="escribe tu nombre" title="nombre" value=" echo $registro_contacto["nombre"];?>" required /> <label for="m">sexo: </label> <input type="radio" id="m" name="sexo_rdo" title="tu sexo" value="m" 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" if ($registro_contacto["sexo"] == "F") echo "checked";?>required /> <label for="f">femenino</label> <label for="nacimiento">fecha de nacimiento: </label> <input type="date" id="nacimiento" class="cambio" name="nacimiento_txt" Página 4

5 title="tu fecha de nacimiento" value=" echo $registro_contacto["nacimiento"];?>" required /> <label for="telefono">telefono: </label> <input type="number" id="telefono" class="cambio" name="telefono_txt" placeholder="escribe telefono" title="tu telefono" value=" echo $registro_contacto["telefono"];?>"required /> <label for="pais">pais: </label> <select id="pais" class="cambio" name="pais_slc" value=" echo $registro_contacto["pais"];?>" required> <option value="">- - -</option> include("select-pais.php");?> </select> <label for="foto">foto: </label> <div class="adjuntar-archivo cambio"> <input type="file" id="foto" name="foto_fls" title="subir foto" /> <input type="hidden" name="foto_hdn" value=" echo $registro_contacto["imagen"];?>" /> <img src=" echo "img/fotos/".$registro_contacto["imagen"];?>" /> <input type="submit" id="enviar-alta" class="cambio" name="enviar_btn" value="actualizar" /> consulta-form.php <label for=" "> </label> <input type=" " id=" " class="cambio" name=" _txt" placeholder="escribe tu " title=" " value=" echo $registro_contacto[" "];?>" disabled required /> <input type="hidden" name=" _hdn" value=" echo $registro_contacto[" "];?>" /> Página 5

6 <label for="nombre">nombre: </label> <input type="text" id="nombre" class="cambio" name="nombre_txt" placeholder="escribe tu nombre" title="nombre" value=" echo $registro_contacto["nombre"];?>" disabled required /> <label for="m">sexo: </label> <input type="radio" id="m" name="sexo_rdo" title="tu sexo" value="m" 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" if ($registro_contacto["sexo"] == "F") echo "checked";?> disabled required /> <label for="f">femenino</label> <label for="nacimiento">fecha de nacimiento: </label> <input type="date" id="nacimiento" class="cambio" name="nacimiento_txt" title="tu fecha de nacimiento" value=" echo $registro_contacto["nacimiento"];?>" disabled required /> <label for="telefono">telefono: </label> <input type="number" id="telefono" class="cambio" name="telefono_txt" placeholder="escribe telefono" title="tu telefono" value=" echo $registro_contacto["telefono"];?>" disabled required /> <label for="pais">pais: </label> <select id="pais" class="cambio" name="pais_slc" value=" echo $registro_contacto["pais"];?>" disabled required> <option value="">- - -</option> include("select-pais.php");?> </select> <label for="foto">foto: </label> <img src=" echo "img/fotos/".$registro_contacto["imagen"];?>" /> Página 6

7 Página 7

8 eliminar-contacto.php $ = $_POST[" _slc"]; include ("conexion.php"); $consulta = "DELETE FROM contactos WHERE ='$ '"; $ejecutar_consulta = $conexion->query($consulta); :/";?> if($ejecutar_consulta) $mensaje = "El contacto con el <b>$ </b> ha sido eliminado :("; else $mensaje = "El contacto con el <b>$ </b> no se pudo eliminar $conexion->close(); header("location:../index.php?op=baja&mensaje=$mensaje"); modificar-contacto.php //Asigno a variables php los valores que vienen del formulario //Como el campo del esta deshabilitado en el form php no lo reconoce por eso tengo que guardar su valor en campo oculto $ = $_POST[" _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 = '$ '"; $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 if (empty($_files["foto_fls"]["tmp_name"])) Página 8

9 else $imagen = $_POST["foto_hdn"]; include("funciones.php"); $tipo = $_FILES["foto_fls"]["type"]; $archivo = $_FILES["foto_fls"]["tmp_name"]; $imagen = subir_imagen($tipo, $archivo, $ ); // Actualizar los datos de la base $consulta = "UPDATE contactos SET nombre='$nombre', sexo='$sexo', nacimiento='$nacimiento', telefono='$telefono', pais='$pais', imagen='$imagen' WHERE ='$ '"; $ejecutar_consulta = $conexion->query(utf8_decode($consulta)); if (ejecutar_consulta) $mensaje="cambios realizados correctamente con el <b>$ </b> :)"; else $mensaje="no se pudieron hacer los cambios para el <b>$ </b> :("; else $mensaje="no se pudieron hacer los cambios en los datos del contacto con el <b>$ </b> porque no existe o esta duplicado";?> $conexion->close(); header("location:../index.php?op=cambios&mensaje=$mensaje"); Página 9

10 select- .php // Conectar a base de datos include("conexion.php"); // Query para obtener registros de la base de datos $consulta = "SELECT FROM contactos ORDER BY "; // 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[" "])."'"; if($_get["contacto_slc"] == $registro[" "]) echo " selected"; valor de echo ">".utf8_encode($registro[" "])."</option>"; //poniendo el?> // $conexion->close(); cerrar conexion select-pais.php if(!$registro_contacto["pais"]) include ("conexion.php"); //codigo del archivo conexion.php $consulta="select * FROM pais ORDER BY pais"; extraccion de datos de la BD $ejecutar_consulta = $conexion->query($consulta); objeto de MySQLi y solo hay que pasarle la consulta //Query para la //$conexion ya es un while ($registro = $ejecutar_consulta->fetch_assoc()) Página 10

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 y se puede corroborar si se realizo bien el proyecto. Página 11