Diferencia entre revisiones de «Usuario:ManuelRomero/NewPHP/B2T1/formularios/practica»

De WikiEducator
Saltar a: navegación, buscar
 
(21 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{:Usuario:ManuelRomero/dwes/B2T1/formularios/nav}}
 
{{:Usuario:ManuelRomero/dwes/B2T1/formularios/nav}}
{{Actividad|Title=Gestión de música e imágenes|
+
{{MRM_Actividad|Title=Práctica 1 de repaso|
*Vamos a hacer un sitio web para subir canciones, imágenes, ficheros pdf, y otros,  y poderlas ver/reproducir
+
===Realiza una ficha de inscripción===
*La aplicación tendrá dos páginas php:
+
*Haz un formulario para recoger datos de una persona
;index.php<br />
+
*En el formulario has de solicitar los datos habituales, de forma que uses todos los inputs de html
[[imagen:musica_index1.png|center]]
+
*Aquí tienes un listado de todos los inputs
*En ella el usuario aporta datos y selecciona un fichero para subir
+
https://www.w3schools.com/html/html_form_input_types.asp
;descarga.php:
+
*Intenta insertar también una foto y recogerla como file
*En ella veremos los ficheros que se han subido agrupados por tipos
+
*Todas las validaciones se realizan en el servidor, de forma que si algún dato no es correcto, se volverá a entregar el fichero index.php de forma que aparezcan los datos que eran correctos, y el que no fuera correcto, tendrá un texto al lado del input en rojo que indique que el dato no es correcto
[[imagen:musica_descarga1.png|center|800px]]
+
*Cuando todos los datos sean correctos (deben de ser  todos obligatorios), se mostará en plan de ficha.
 +
}}
  
*Si el usuario no se identifica, se mostrará un mensaje y volveremos a pedir datos como se muestra en la imagen siguiente
 
[[imagen:musica_index2.png|center]]
 
  
*Si el usuario puede no seleccionar ningún fichero, la aplicación accederá a descargas.php
+
===Juego de adivinar un número===
 +
;Se trata de hacer un juego para que la aplicación adivine un número que tu pienses
 +
*La aplicación me mostrará 3 opciones
  
 +
*El usuario pensará un número del 1 al mayor número posible según la opción seleccionada
 +
*Una posible pantalla inicial del juego podría ser
 +
[[imagen:adivina1.png|700px]]
  
*Hay dos tipos de usuario
+
<hr / >{{MRM_Actividad|Title=Requisitos de la práctica|
#administrador  (usuario '''''admin''''' password '''''admin''''')
+
*Como hemos indicado, '''''el usuario de la aplicación piensa un número  en el intervalo establecido'''''.
#resto de usuario (cualquier otro usuario y passowrd)
+
*Después la aplicación, en diferentes intentos  procederá a adivinarlo.
*La aplicación tendrá la siguiente estructura de directorios
+
*La aplicación deberá usar la búsqueda dicotómica o algoritmica del número y así siempre lo acertará.
 +
*En cada iteración le informará de si el número que te especifica es '''menor, mayor o si lo ha acertado'''.
 +
*El número de intentos que hay, queda establecido según la opción seleccionada.
 +
*En cualquier momento podrás reiniciar el juego mientras estás jugando.
 +
**(Se calculará otro número y tendrás 10 intentos de nuevo)
 +
*La pantalla de jugar podría ser
 +
[[imagen:adivina2.png|400px]]
 +
<hr / >
 +
*Deberás de tener tres fichero:
 +
#index.html que te generará la información
 +
#jugar.php que es es juego
 +
#fin.php cuando termine la partida con la información del juego realizado.<br />
 +
[[imagen:adivina3.png|800px]]
 +
<hr />
 +
*Selecciona la práctica 3 en la siguiente url
 +
http://manuel.infenlaces.com/
 +
}}
  
[[imagen:musica_estructura_directorios1.png|center|200px]]
 
*Vemos un directorio descargas con dos subdirectorios '''uploads''' '''downloads'''
 
*Dentro de cada subdirectorio tenemos un directorio por cada tipo de ficheros que queremos almacenar
 
*El funcionamiento es el siguiente.
 
#Cuando un usuario sube un fichero, éste es almacenado en su carpeta correspondiente en el directorio '''''uploads'''''.
 
#Cuando el usuario es admin, se mostrará todos los ficheros de la carpeta uploads,
 
#Cada fichero tiene un checkbox, que nos permite seleccionarlo
 
#Al presionar publicar, los ficheros seleccionados '''''se moverán''''' a la carpeta correspondiente (musica, imagenes, ....) de la carpeta downloads.
 
*Mostramos el funcionamiento con imágenes,
 
;usuario no admin
 
[[imagen:caso_uso_11.png|center]]
 
;usuario admin
 
[[imagen:casos_uso_22.png]]
 
*Una vez que presionamos '''''publicar''''' podemos ver como al entrar ya tenemos los ficheros publicados
 
[[imagen:casos_uso_2a.png]]
 
  
*Los ficheros descargados estarán sensibles a hacer un click sobre ellos, de forma que el navegador intente abrirlos si puede
+
<!--
(Mostrar imágenes o pdf, o reproducir música)
+
{{Plegable|hide|juego adivinar: index.html|
[[Imagen:caso_uso_3.png]]
+
<source lang=php>
 +
<!doctype html>
 +
<html lang="en">
 +
    <head>
 +
        <meta charset="UTF-8">
 +
        <meta name="viewport"
 +
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 +
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
        <title>Adivina número</title>
 +
    </head>
 +
    <body>
 +
        <fieldset style="width: 60%;float:left;margin-left: 20%; background: bisque">
 +
            <legend><h1>Juego adivina número</h1></legend>
  
  
 +
            <h2>    Debes de adivinar un número que yo genero</h2>
 +
            <h2>    El número está entre 0 y 1024</h2>
 +
            <h2>    Cada vez que verifiques yo te diré</h2>
 +
            <ul>
 +
                <ol>Si el número buscado es mayor</ol>
 +
                <ol>Si el número buscado es menor</ol>
 +
                <ol>Si has aceertado el número</ol>
 +
            </ul>
 +
            <h2>    Tienes 10 intentos</h2>
 +
            <h2>    Se te indicará el número de intentos que llevas</h2>
 +
            <form action="jugar.php"><input type="submit" value="Empezar juego"></form>
 +
        </fieldset>
  
 +
    </body>
 +
</html>
 +
</source>
 +
}}
 +
{{Plegable|hide|jugar.php|
 +
<source lang=php>
 +
<?php
 +
switch ($_POST['enviar']) {
 +
    case 'jugar':
 +
        $numero_adivinar = filter_input(INPUT_POST, 'numAdivinar');
 +
        $intentos = filter_input(INPUT_POST, 'intentos');
 +
        $numero = filter_input(INPUT_POST, 'numero');
 +
        $intentos++;
 +
        $msj = valida($numero_adivinar, $numero);
 +
        if ($msj === "FIN")
 +
            terminar(true);
 +
        if ($intentos === 10)
 +
            terminar(false);
 +
        $msj.="<br />Llevas $intentos intentos restan " . (10 - $intentos);
 +
        $reiniciar = "";
 +
        break;
 +
    case 'volver':
 +
        header("Location:index.php");
 +
        exit();
  
 +
    case 'reiniciar':
 +
        $numero_adivinar = rand(0, 1024);
 +
        $msj = "Volvemos a empezar el juego";
 +
        $intentos = 0;
 +
        $reiniciar = "disabled";
 +
        break;
  
 +
    default: //vengo del index
 +
        $numero_adivinar = rand(0, 1024);
 +
        $msj = "Vamos a empezar a jugar, inserta un número";
 +
        $reiniciar = "disabled";
 +
        $intentos = 0;
 +
}
  
 +
function valida($numero_adivinar, $numero) {
 +
    switch (true) {
 +
        case ($numero > $numero_adivinar):
 +
            $msj = "El número $numero es MAYOR que el número buscado";
  
*La primera imagen es de la pantalla index.php
+
            break;
<br />[[imagen:indexDescargas.png]]<br />
+
        case ($numero < $numero_adivinar):
*El resto de imágenes es de la segunda ventana '''''descarga.php'''''
+
            $msj = "El número $numero es MENOR que el número buscado";
'''''index.php''''' (Especificaciones de la práctica)
+
            break;
 +
        case ($numero === $numero_adivinar):
 +
            $msj = "FIN";
 +
            break;
 +
    }
 +
    return $msj;
 +
}
  
*1.--La aplicación requiere que el usuario se identifique con nombre y password
+
function terminar($estado) {
*2.-En esa primera pantalla (no es lo normal), tendrá también la opción de subir un fichero.
+
    global $msj, $numero, $intentos, $numero_adivinar, $reiniciar;
*4.-El fichero debe de estar limitado en el cliente y en el servidor con un tamaño máximo de 10 Megas y  en el servidor los ficheros de un peso inferior a 10K serán descartados.
+
    if ($estado === true) {
'''''descarga.php'''''(Especificaciones de la práctica)
+
        $msj = "FELICIDADES,$numero ES EL NÚMERO BUSCADO<br />";
*Los ficheros que un usuario sube, irán a las siguientes carpetas
+
        $msj.="Lo has acertado en $intentos intentos";
<br />1.- ficheros de tipo imagen  ./upload/imagenes El type del fichero tiene la palabra '''''image'''''.
+
        $reiniciar = disabled;
<br />2.- ficheros de tipo musica o sonido  ./upload/musica El type del fichero tiene la palabra '''''audio'''''.
+
        $intentos = 0;
<br />3.- ficheros de otro tipo  ./upload/otros El type del fichero no tendrá las palabras anteriores (image, audio),
+
    } else {
*Si el usuario es  '''''admin''''' y password '''''admin''''' tendrá la  funcionalidad de administrar los ficheros subidos, según se especifica.
+
        $msj = "HAS TERMINADO TUS INTENTOS<br />";
*Administrar los ficheros subidos consiste en  visualizar una lista de los ficheros subidos con un '''checkbox''' cada fichero como se muestra en la imagen
+
        $msj.="El número buscado es $numero_adivinar<br />";
<br />
+
        $msj.="Buena suerte para la próxima vez";
[[imagen:administrarFicheros.png]]
+
<br />
+
*Sobre los ficheros en los cuales se seleccionen  serán publicados para que cualquier usuario los pueda ver
+
*Para ello serán copiados respectivamente a
+
<br />1.- de  ./upload/imagenes a ./download/imagenes
+
<br />2.- de  ./upload/musica a ./download/musica
+
<br />3.- de  ./upload/otros a ./download/otros
+
*El usuario no admin solo verá los ficheros que estén en la carpeta de download, los cuales podrá como ya hemos dicho hacer un click sobre ellos, y el navegador ya usará la acción correspondiente (visualizarlos o reproducirlos)
+
  
*Para ello simplemente usar el elemento
+
        $reiniciar = disabled;
<source lang=html5>
+
        $intentos = 0;
<a href =./dowload/imagenes/nombre.png>nombre de la imagen </a>
+
    }
</source>
+
}
*Esto sería lo que vería un usuario no admin
+
?>
<br />
+
[[Imagen:usarFicheros.png]]
+
<br />
+
Esto sería lo que vería un usuario admin (tendría la opción de administrar o publicar y la de visualizar ficheros publicados (los que están en carpeta download))
+
<br />
+
[[Imagen:portalDescargas1.png]]
+
<br />
+
*Si vemos en la imagen anterior tenemos seleccionados dos ficheros de música () y uno de imagen ()
+
*Después de clickear en publicar vemos como esos ficheros ya no están en la opción de administrar, pero sí que se ven en la sección pública (Se han copiado de la carpeta upload/* a la carpeta download/*
+
<br />
+
[[Imagen:portalDescargas2.png]]
+
<br />
+
  
 +
 +
<!doctype html>
 +
<html lang="en">
 +
    <head>
 +
        <meta char3="viewport"
 +
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 +
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
        <title>Document</title>
 +
    </head>
 +
    <body style="width: 60%;float:left;margin-left: 20%; ">
 +
 +
        <h3><?php echo $msj ?></h3>
 +
        <fieldset style="width:30%;background:bisque ">
 +
            <legend>Empieza el juego</legend>
 +
            <form action="jugar.php" method="POST" >
 +
                Escribe un número <input type="text" name="numero" id="">
 +
                <hr />
 +
                <input type="submit" value="jugar" name="enviar" >
 +
                <input type="submit" value="reiniciar" name="enviar" <?php echo $reiniciar ?> >
 +
                <input type="submit" value="volver" name="enviar"  >
 +
                <input type="hidden" value="<?php echo $intentos ?>" name="intentos">
 +
                <input type="hidden" value="<?php echo $numero_adivinar ?>" name="numAdivinar">
 +
            </form>
 +
        </fieldset>
 +
 +
    </body>
 +
</html>
 +
</source>
  
 
}}
 
}}
 +
-->
 +
 +
 +
*Realizaremos esta práctica siguiendo o implementando los siguientes requisitos
 +
#RF1: El fichero '''''index.php''''' me informará del juego
 +
#RF2: El mismo fichero '''''index.php''''' me mostrará las opciones (ver imagen anterior)
 +
#RF3: El fichero '''''index.php''''' tendrá un botón para empezar el juego
 +
#RNF1:  Deberemos identificar todas las variables que necesito
 +
##Realiza un análisis de juego
 +
##Juega directamente y anótate todas las variables que necesitas (''$jugada, $max, $min, $intentos,...''').
 +
#RF4 En el primer acceso a '''''jugar.php''''' inicializo las variables
 +
#RF5 Establece la estrategia (inputs:hidden) para pasar los valores de las variables
 +
#RF6 Actualiza las variables según jugada y apúntales en los hidden para la siguiente jugada
 +
#RF7 Controla el fin del juego (exceder el número de jugadas o haber acertado el número)
 +
*Se pide también que lleves un log, donde anotes la hora (minutos y segundos) de cada jugada, especificando el número de jugada y el número aportado.

Última revisión de 21:15 2 abr 2020




Icon activity.jpg
Práctica 1 de repaso

Realiza una ficha de inscripción

  • Haz un formulario para recoger datos de una persona
  • En el formulario has de solicitar los datos habituales, de forma que uses todos los inputs de html
  • Aquí tienes un listado de todos los inputs
https://www.w3schools.com/html/html_form_input_types.asp
  • Intenta insertar también una foto y recogerla como file
  • Todas las validaciones se realizan en el servidor, de forma que si algún dato no es correcto, se volverá a entregar el fichero index.php de forma que aparezcan los datos que eran correctos, y el que no fuera correcto, tendrá un texto al lado del input en rojo que indique que el dato no es correcto
  • Cuando todos los datos sean correctos (deben de ser todos obligatorios), se mostará en plan de ficha.




Juego de adivinar un número

Se trata de hacer un juego para que la aplicación adivine un número que tu pienses
  • La aplicación me mostrará 3 opciones
  • El usuario pensará un número del 1 al mayor número posible según la opción seleccionada
  • Una posible pantalla inicial del juego podría ser

Adivina1.png



Icon activity.jpg
Requisitos de la práctica
  • Como hemos indicado, el usuario de la aplicación piensa un número en el intervalo establecido.
  • Después la aplicación, en diferentes intentos procederá a adivinarlo.
  • La aplicación deberá usar la búsqueda dicotómica o algoritmica del número y así siempre lo acertará.
  • En cada iteración le informará de si el número que te especifica es menor, mayor o si lo ha acertado.
  • El número de intentos que hay, queda establecido según la opción seleccionada.
  • En cualquier momento podrás reiniciar el juego mientras estás jugando.
**(Se calculará otro número y tendrás 10 intentos de nuevo)
  • La pantalla de jugar podría ser

Adivina2.png


  • Deberás de tener tres fichero:
  1. index.html que te generará la información
  2. jugar.php que es es juego
  3. fin.php cuando termine la partida con la información del juego realizado.

Adivina3.png


  • Selecciona la práctica 3 en la siguiente url
http://manuel.infenlaces.com/





  • Realizaremos esta práctica siguiendo o implementando los siguientes requisitos
  1. RF1: El fichero index.php me informará del juego
  2. RF2: El mismo fichero index.php me mostrará las opciones (ver imagen anterior)
  3. RF3: El fichero index.php tendrá un botón para empezar el juego
  4. RNF1: Deberemos identificar todas las variables que necesito
    1. Realiza un análisis de juego
    2. Juega directamente y anótate todas las variables que necesitas ($jugada, $max, $min, $intentos,...').
  5. RF4 En el primer acceso a jugar.php inicializo las variables
  6. RF5 Establece la estrategia (inputs:hidden) para pasar los valores de las variables
  7. RF6 Actualiza las variables según jugada y apúntales en los hidden para la siguiente jugada
  8. RF7 Controla el fin del juego (exceder el número de jugadas o haber acertado el número)
  • Se pide también que lleves un log, donde anotes la hora (minutos y segundos) de cada jugada, especificando el número de jugada y el número aportado.