Differences

This shows you the differences between two versions of the page.

--- es:web_development:forms:inputs [2022/05/09 09:58]
mag [Preparación]
+++ es:web_development:forms:inputs [2023/08/16 09:33] (current)
@@ Line 10: / Line 10: @@
   * [[https://techschool.murraygunn.id.au/webdev/classes/forms/1/form.es.php|form.php]]
   * [[https://techschool.murraygunn.id.au/webdev/classes/forms/1/process_form.es.php|process_form.php]]
+==== Enviar un Formulario ====
+  * Abra 'formulario.php'. Mostraremos nuestro formulario aquí.
+  * <html><main></html>Agregue una nueva línea debajo de la etiqueta de apertura .
+  * Escriba 'formulario' y seleccione la opción que aparece.
+  * La etiqueta <html><form></html> tiene un parámetro llamado <html>action</html>. Aquí es donde desea enviar sus datos.
+  * Establecer <html>action</html> en 'process_form.php'.
+<code>        <form action="process_form.php"></form></code>
+  * Mueva el párrafo existente dentro de las etiquetas <html><form></html>.
+  * Ahora agregue nuestras opciones de héroe como botones 'enviar'.
+<code>            <button type="submit" name="nombre" value="Loki"></button>
+            <button type="submit" name="nombre" value="Hulk"></button></code>
+  * Establecer el <html>type</html> en 'enviar' significa que cuando hacemos clic en el botón, se enviará el formulario y los datos. Ambos botones harán esto.
+  * <html>name</html> es el nombre del parámetro a enviar. Los botones de envío a menudo se llamarán 'enviar' y no contendrán datos, pero a veces habrá dos formularios en una página (o enviados a una página) y necesita saber cuál procesar. Lo usamos aquí para diferenciar a los héroes seleccionados.
+  * El <html>value</html> es el texto que aparecerá en el botón.
+  * Guarde y cargue el archivo, luego abra la página.
+  * Haga clic en su héroe elegido y luego verifique los resultados. ¿Ves el nombre de tu héroe?
+  * Esta es una forma rara de usar un botón Enviar, pero es válida. Veamos otras opciones.
+==== Entrada de Texto ====
+  * Creemos un formulario para agregar héroes a nuestra base de datos.
+  * Necesitaremos campos de entrada para el alias del héroe, la identidad (secreta), si es un héroe o un villano, el año en que apareció por primera vez en los cómics de Marvel (o en otro lugar) y cuál es la fuente de su poder.
+  * Podríamos usar una tabla para presentar nuestro formulario con etiquetas a la izquierda y entradas a la derecha, pero eso no responde, es decir, no se adaptará a pantallas más pequeñas.
+  * En su lugar, usaremos una lista, donde cada etiqueta/par de entrada es un elemento de la lista.
+  * Elimine todo lo que esté dentro de la etiqueta <html><form></html> y agregue el siguiente código.
+<code>                <ul>
+                    <li>
+                    </li>
+                </ul></code>
+  * Los campos para el alias y la identidad del héroe pueden ser simples campos de texto.
+<code>                    <li>
+                        <label for="alias">Alias de héroe:</label>
+                        <input type="text" name="alias" size="30" maxlength="50" hint="Iron Man">
+                    </li>
+                    <li>
+                        <label for="identidad">Identidad:</label>
+                        <input type="text" name="identidad" size="30" maxlength="50" hint="Tony Stark">
+                    </li></code>
+  * Aquí tenemos una etiqueta para nuestra entrada, usando la etiqueta <html><label></html>.
+  * Luego tenemos una entrada, pero en lugar de ser de <html>type="button"</html> o <html>type="submit"</html>, se <html>type="text"</html> usa para un campo de texto simple, generalmente de hasta 100 caracteres más o menos.
+  * Le damos un <html>name</html> que informará a 'process_form.php' a qué se refiere el valor.
+  * Hay dos atributos adicionales que no hemos visto antes. <html>size</html> establece el tamaño del cuadro de entrada en 30 caracteres y <html>maxlength</html> limita la longitud de los caracteres que se pueden ingresar.
+  * Finalmente, tenemos la opción de darle al usuario una pista sobre qué tipo de contenido esperamos aquí usando <html>hint</html>.
+  * Guarde y cargue el código para ver cómo se ve en vivo.
+==== Botones de Radio ====
+  * Cuando tenemos una entrada con solo unas pocas opciones configuradas y solo se puede seleccionar una a la vez, usamos botones de radio.
+  * El ejemplo más común de esto es 'masculino' y 'femenino'.
+  * En este caso queremos saber si nuestro héroe es realmente heroico o villano. Agregue el siguiente código para mostrar esto.
+<code>                    <li>
+                        <label>Side:</label>
+                        <input type="radio" name="lado" value="Hero" checked="checked"> Hero<br>
+                        <input type="radio" name="lado" value="Villain"> Villain
+                    </li></code>
+  * He etiquetado esta distinción héroe/villano como 'lado', pero si se te ocurre un término mejor, siéntete libre de usarlo.
+  * Una vez más, los botones de radio usan la etiqueta <html><input></html> y, al igual que los botones, tienen un nombre y un valor.
+  * no <html>value</html> se muestra como está en un botón, porque no hay espacio en un botón de opción. En cambio, el valor es el texto que queremos enviar a 'process_form.php'.
+  * Añadimos el texto antes o después de <html><input></html> dependiendo de cómo queramos que aparezca el formulario.
+  * Finalmente, observe el <html>checked</html> atributo en la primera entrada. Esto establece el elemento predeterminado si desea uno.
+  * Guarda y sube para ver cómo se ve.
+==== Número ====
+  * Nuestro próximo campo es el año en que el héroe apareció por primera vez en un cómic (o película, etc.).
+  * Se enviará como texto, pero en realidad es un número y podemos ayudar a nuestro usuario especificándolo.
+  * Agregue el siguiente código a su formulario.
+<code>                    <li>
+                        <label for="año">Primera aparición:</label>
+                        <input type="number" name="año">
+                    </li></code>
+  * También podemos configurar sizey maxlength, pero veremos mejores formas de administrar esto más adelante.
+  * Guarde y cargue el código para ver cómo se ve. Casi exactamente lo mismo que una entrada de texto, ¿verdad?
+  * Tenga en cuenta que tiene flechas hacia arriba y hacia abajo para permitir a los usuarios cambiar el número por incrementos.
+  * Si tiene un dispositivo móvil para cargar la página, también notará que el teclado cambia automáticamente a una entrada numérica en lugar del diseño de teclado habitual.
+==== Cuadros Desplegables ====
+  * Nuestro próximo campo es la fuente del poder del héroe. Este es un tipo de categoría, donde queremos controlar las opciones que se pueden seleccionar.
+  * Para esto usamos un <html><select></html> campo.
+  * Copie el siguiente código en su formulario.
+<code>                    <li>
+                        <label>Fuente de poder:</label>
+                        <seleccione nombre="poder">
+                            <option value="habilidad">Habilidad</option>
+                            <option value="bio">Biológica</option>
+                            <option value="magia">Magia</option>
+                            <option value="tech">Tecnología</option>
+                            <option value="mutante">Mutante</option>
+                        </seleccionar>
+                    </li></code>
+  * Tenemos una serie de opciones enumeradas usando etiquetas <html><option></html> y <html><select></html> todas se ubican dentro de la etiqueta.
+  * En lugar de configurar namepara cada opción individualmente, lo configuramos una vez en la etiqueta <html><select></html>.
+  * El valor enviado a 'process_form.php' se toma del <html>value</html> atributo, mientras que el usuario ve el texto entre las etiquetas <html><option></html>.
+  * Guarde y cargue el archivo para ver que aparece como un cuadro desplegable.
+  * Finalmente, agregue el botón Enviar para que el formulario funcione.
+<code>                <input type="enviar" name="enviar" value="Añadir héroe"></code>
+  * Guarde y cargue el archivo.
+  * Agregue algunos datos y haga clic en el botón para enviar sus datos.
+  * Tenga en cuenta que si elige 'Biológico' como fuente de poder, el resultado se envía como 'poder=bio' en lugar de 'poder=Biológico' debido a lo <html>value</html> asociado con esa opción.
+==== Consulta de Base de Datos ====
+  * También nos gustaría poder agregar las apariencias de cada héroe. Esto se puede hacer de varias maneras, pero vamos a crear un formulario separado para ello.
+  * Agregue un formulario debajo del existente con la misma acción ('process_form.php').
+  * Agregue una lista desordenada con dos entradas.
+  * La primera entrada tendrá una etiqueta de 'Héroe' y un cuadro de selección con todos nuestros héroes conocidos. Como queremos que se actualice si agregamos héroes usando el primer formulario, debemos extraer los datos de la base de datos.
+  * Para hacer esto, primero necesitaremos configurar nuestra base de datos.
+  * Agregue la siguiente línea antes de incluir el encabezado.
+<code>    include('database.php');</code>
+  * Ahora cree un nuevo archivo llamado 'database.php' y llénelo con el código de configuración de la base de datos que usamos en 'mysql.php'.
+<code><?php
+    // Configurar la conexión a la base de datos
+    define ('DBCONNECT', "../../pdo.php"); // database connection
+    include DBCONNECT;
+    $db  = 'webdev';
+    $dsn = "mysql:host=$db_host;dbname=$db;charset=utf8mb4";
+    try
+    { // conectar
+        $pdo = new MyPDO($dsn, $db_user, $db_pass, $db_options);
+    } catch (\PDOException $e) {
+        throw new \PDOException ($e->getMessage(), (int)$e->getCode());
+    }
+?></code>
+  * En algún momento después de eso (prefiero al final del primer bloque de PHP para que todos los includecomandos estén juntos) agregue algo de código para obtener los nombres de los héroes.
+<code>    // obtener la lista de héroes
+    $query = "SELECT * FROM heroes";
+    $args  = array();
+    $rslt  = $pdo->prepare($query);
+    $rslt->execute($args);</code>
+  * Ahora podemos recorrer la respuesta y agregar una opción para cada una.
+<code>                    <li>
+                        <label for="hero">Héroe</label>
+                        <select name="heroe">
+<?php
+    // mostrar la lista de héroes
+    while($row = $rslt->fetch()) {
+?>
+                            <option value="<?php echo $row['alias']; ?>"><?php echo $row['alias']; ?></option>
+<?php
+    }
+?>
+                        </select>
+                    </li></code>
+  * Subir el código y refrescar la página para comprobar que se muestra como queremos.
+==== Casillas de Verificación ====
+  * El segundo elemento de la lista en este formulario serán las películas.
+  * También necesitaremos obtener esta lista de la base de datos.
+  * Agregue el siguiente código debajo de la consulta de héroe
+<code>    // obtener la lista de películas
+    $query = "SELECT * FROM appearances";
+    $args  = array();
+    $mrslt = $pdo->prepare($query);
+    $mrslt->execute($args);</code>
+  * Ahora muestre cada película debajo de la etiqueta 'Película'.
+<code><?php
+    // mostrar lista de peliculas
+    while($row = $mrslt->fetch()) {
+?>
+                            <li></li>
+<?php
+    }
+?></code>
+  * Debe reconocer la mayor parte de este código, ya que es el mismo que el código anterior con algunas modificaciones. <html>$hrslt</html> ahora es <html>$mrslt</html> porque estamos mirando el resultado de la consulta de la película en lugar del resultado de la consulta del héroe.
+  * Ahora, agreguemos la casilla de verificación
+<code>                            <li><input type="checkbox" name="movie[]" value="<?php echo $row['movie']; ?>" id=""> <?php echo $row['movie']; ?></li></code>
+  * Tenga en cuenta que la entrada de la casilla de verificación es muy similar a una entrada de radio. Tiene un nombre y un valor y un texto para mostrar.
+  * El nombre es ligeramente diferente. El nombre 'película' se agrega <html>[]</html> porque queremos enviar una lista de apariencias como una matriz.
+  * Cargue el código guardado y actualice la página.
+  * Debería ver una lista de películas con una casilla de verificación al frente.
+  * Desafortunadamente, 'Los Vengadores' aparece 5 veces.
+==== GROUP BY ====
+  * Para solucionar esto, echemos un vistazo directamente a la base de datos.
+  * Abra PHPMyAdmin y seleccione la tabla 'apariencias'.
+  * La lista de películas aparece tal como lo hizo en nuestra página, lo que dice que nuestra consulta funcionó correctamente.
+  * Nuestro problema es que realmente solo queremos ver cada película una vez.
+  * Podemos hacerlo usando 'GROUP BY' en nuestra consulta.
+  * Haga clic en la pestaña 'SQL' e ingrese la siguiente consulta.
+<code>SELECT * FROM `appearances` GROUP BY movie</code>
+  * Obtendrá un error que indica que hay una 'columna no agregada' en nuestro resultado. Esto significa que algunos de los otros datos (en este caso, tanto id como character_name pueden tener datos diferentes para el mismo valor de película y MySQL no sabe qué mostrar.
+  * Mira las líneas 4 y 5 para ver esto. Cuando agrupamos a todos los héroes que aparecen en 'Los Vengadores', MySQL quiere comprimir el id (4 y 5) y el character_name (Capitán América y Hulk) en la misma fila, pero no puede.
+  * Hay algunos trucos que podemos hacer con números (como probar el total) e incluso podríamos obtener solo la primera entrada, pero por ahora solo queremos el nombre de la película, así que especifíquelo en la consulta.
+<code>SELECT movie FROM `appearances` GROUP BY movie</code>
+  * Ejecute esta consulta y verá que obtenemos una lista de películas, cada una de las cuales aparece solo una vez. Perfecto.
+  * Ahora coloquemos esto en nuestra consulta en 'form.php'.
+<code>    // get list of movies
+    $query = "SELECT movie FROM appearances GROUP BY movie";
+    $args  = array();
+    $mrslt = $pdo->prepare($query);
+    $mrslt->execute($args);</code>
+  * Actualiza la página y comprueba que cada película solo aparece una vez.
+==== Agregar Película ====
+  * ¿Qué hará nuestro usuario cuando quiera agregar una apariencia para una película que aún no está en la lista?
+  * Por ejemplo, Scarlet Witch aparece como una heroína, pero no aparece en ninguna de las películas de la lista.
+  * Necesitamos una línea donde el usuario pueda agregar otra película.
+  * Agregue este código después del ciclo (pero antes de la etiqueta <html><ul></html>).
+<code>                            <li><input type="checkbox" name="movie[]" value="new" id=""> <input type="text" name="new_movie"></li></code>
+==== Parámetros Múltiples ====
+  * Finalmente, necesitamos nuestro botón de envío antes de la etiqueta de cierre <html></form></html>.
+<code>                <input type="submit" name="submit" value="Add Appearance"></code>
+  * Actualice la página, ingrese algunos datos y haga clic en enviar.
+  * Mire la URL con todos nuestros datos en ella.
+  * Tenga en cuenta que en lugar de usar comas para separar cada par de nombre/valor, los pares están separados por <html>&</html>.
+  * Observe también que cuando envía un campo con dos palabras, el espacio se reemplaza por un <html>+</html> símbolo. Es por eso que comenzamos con solo 'Hulk' y 'Thor' en la primera actividad.
+  * Ahora que tenemos todo funcionando, creo que podemos mejorar un poco el estilo.
+==== Codigo Final ====
+  * [[https://techschool.murraygunn.id.au/webdev/classes/forms/2/form.es.php|form.php]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/forms/2/database.es.php|database.php]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/forms/2/form.php|resultado]]
+[[es:web_development:forms:styling|Siguiente: Estilismo]]

Tech School

User Tools

Site Tools

Differences

Page Tools