Differences

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

--- es:web_development:forms:inputs [2022/07/05 06:01]
mag [Entrada de Texto]
+++ es:web_development:forms:inputs [2023/08/16 09:33] (current)
@@ Line 90: / Line 90: @@
 <code>                    <li>
-                        <label>Primera aparición:</label>
+                        <label for="año">Primera aparición:</label>
                         <input type="number" name="año">
                     </li></code>
@@ Line 99: / Line 99: @@
   * 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