Diferencia entre revisiones de «Usuario:ManuelRomero/php/smarty/enunciado1»

De WikiEducator
Saltar a: navegación, buscar
(Forma de proceder)
 
(8 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{:Usuario:ManuelRomero/php/smarty/tienda1/nav}}
 
{{:Usuario:ManuelRomero/php/smarty/tienda1/nav}}
===Enunciado original===
+
 
__NOTOC__
+
{|cellpadding="5" cellspacing="6" style="width:100%;background:#DFFFFF; border-style:solid; border-width:2px; border-color:#0066FF;"
+
| width="100%" valign="top" style="padding: 0; margin:0px;" |
+
{|cellpadding="5" cellspacing="6" style="width:100%;background:#DFFFFF; border-style:solid; border-width:1px; border-color:#0066FF;"
+
| width="100%" valign="top" style="padding: 0; margin:0px;" |
+
<span style="background:#FFFF99">
+
</span>
+
[[Imagen:DWES_TituloPracticaTienda.png|center]]
+
|}
+
 
==DESCRIPCIÓN DE LA PRÁCTICA DE LA TIENDA ON LINE==
 
==DESCRIPCIÓN DE LA PRÁCTICA DE LA TIENDA ON LINE==
 
*Vamos a hacer un ejemplo práctico en el que vamos a usar sesiones
 
*Vamos a hacer un ejemplo práctico en el que vamos a usar sesiones
Línea 116: Línea 107:
  
  
que venimos trabajando
 
 
*El siguiente diagrama muestra el escenario que queremos representar
 
*El siguiente diagrama muestra el escenario que queremos representar
*El programa debe de ser en la medida de lo posible orientado a objetos (Ver en sección más abajo clases que se recomienda utilizar)
+
*El programa debe de ser orientado a objetos (Ver en sección más abajo clases que se recomienda utilizar)
[[Archivo:tienda1.png]]
+
[[Archivo:WebTienda.png]]<br />
 
*Explicación funcional de las páginas
 
*Explicación funcional de las páginas
 +
 
;Login (login.php).
 
;Login (login.php).
 
:Su función es autentificar al usuario de la aplicación web.  
 
:Su función es autentificar al usuario de la aplicación web.  
Línea 134: Línea 125:
 
:Esta página desconecta al usuario de la aplicación y redirige al usuario de forma automática a la pantalla de autentificación.
 
:Esta página desconecta al usuario de la aplicación y redirige al usuario de forma automática a la pantalla de autentificación.
 
: No muestra ninguna información en pantalla, por lo que no es visible para el usuario.
 
: No muestra ninguna información en pantalla, por lo que no es visible para el usuario.
*Para realizar esta práctiva vamos a utilizar la siguiente hoja de estilo, que vamos a ir creciendo según vamos incorporando nuevos elementos
+
*Para realizar esta práctiva vamos a utilizar la siguiente hoja de estilo, disponible en un fichero puesto en el moodle
{{Plegable|hide|Hoja de estilo version 1|
+
<source lang=css>
+
.error {
+
    font-family: Verdana, Arial, sans-serif;
+
    font-size: 0.7em;
+
    color: #900;
+
    background-color : #ffff00;
+
}
+
 
+
#login fieldset {
+
    position: absolute;
+
    left: 50%;
+
    top: 50%;
+
    width: 230px;
+
    margin-left: -115px;
+
    height: 160px;
+
    margin-top: -80px;
+
    padding:10px;
+
    border:1px solid #ccc;
+
    background-color: #eee;
+
}
+
 
+
#login legend {
+
    font-family : Arial, sans-serif;
+
    font-size: 1.3em;
+
    font-weight:bold;
+
    color:#333;
+
}
+
 
+
 
+
#login label {
+
    font-family : Arial, sans-serif;
+
    font-size:0.8em;
+
    font-weight: bold;
+
}
+
 
+
 
+
#login input{
+
    font-family : Arial, Verdana, sans-serif;
+
    font-size: 0.8em;
+
    line-height:140%;
+
    color : #000;
+
    padding : 3px;
+
    border : 1px solid #999;
+
    height:18px;
+
    width:220px;
+
}
+
 
+
#pie {
+
    padding: 0 10px;
+
    background-color: #99ccff;
+
    border-top-width: thin;
+
    border-right-width: thin;
+
    border-bottom-width: thin;
+
    border-left-width: thin;
+
    border-top-style: solid;
+
    border-right-style: solid;
+
    border-bottom-style: solid;
+
    border-left-style: solid;
+
}
+
 
+
}
+
 
+
 
+
</source>
+
 
+
}}
+
 
+
 
*Observa los diferentes div definidos para poderlos utilizar como es el caso de '''''error'''''
 
*Observa los diferentes div definidos para poderlos utilizar como es el caso de '''''error'''''
 
*Podemos ver el ejercicio funcionando en esta url
 
*Podemos ver el ejercicio funcionando en esta url
http://www.manuel.infenlaces.com/tiendaPagar/login.php
+
;Imprimir:
 +
*Imprimir.php
 +
:mostrará una página con un fichero '''''pdf''''' que se podrá imprimir o descargar.
  
===Clases a utilizar===
 
*Se recomienda usar las siguientes clases, se aportan ejemplos de los métodos
 
;BD.php
 
  
Clase con los métodos necesarios para acceder/consultar/validar en la base de datos. Por ejemplo
+
===Especificaciones no funcionales generales===
validarCliente($usuario,$password)
+
*En este caso se trata de cumplir una serie de especifiaciones nuevas
obtenerProducto($codigo)
+
*Vamos a separar la lógica del negocio de la presentación usando un sistema de plantillas de '''''smarty'''''
obtenerProductos ()
+
*Vamos a realizar el desarrollo totalmente orientado a objetos, creando las clases necesarias y usándolas en el programa principal.
;Producto.php
+
*El resultado será un proyecto con muchos mas ficheros, pero mucho más organizado y especializado
*Clase para interactuar con un producto concreto
+
*Deberá de tener todos los atributos que tenga la tabla '''''producto''''' (Al menos todos los que necesitemos en nuestra aplicación.
+
  
 
===Forma de proceder===
 
===Forma de proceder===
*Vamos a hacer este ejercicio de forma incremental, realizando cada parte con el fin de ir asimilando bien los conceptos de plantillas y la separación de negocio o lógica y presentación.
+
*Para realizar este ejercicio, procederemos de una manera  incremental, realizando cada parte con el fin de ir asimilando bien los conceptos de plantillas y la separación de negocio o lógica y presentación.
#Login ==> Nos identificaremos para acceder al sitio web
+
*por ello crearemos una estructura de directorios para el despliegue de nuestra aplicación
#Porductos ==> Se visualizarán una lista de todos los productos
+
*Estableceremos los siguientes directorios
#Logoff ==> Tendremos la opción de desconectarnos
+
[[Archivo:DirectoriosTienda.png]]
#Cesta ==> Aparecerá la posibilidad de ir incorporando nuevos elementos a la cesta
+
;logica
#Opciones de Cesta ==> Podremos o pagar y terminar la app o bien vaciar la cesta de la compra
+
:Aquí irán todos los ficheros php que contengan funcionalidad y que se invoquen directamente en el url
*Cada una de estas cinco acciones deben de constituir una aplicación.
+
:Constituirá la lógica de la aplicación (El programa principal que se ejecutará)
#Botón de PayPall
+
;clases
#Opciones de imprimir una factura usando pdf
+
:Se implementarán todas las clases de nuestro desarrollo, las cuales luego usaremos en nuestra lógica
 +
;vista
 +
:Se implementarán los ficheros que se van a visualizar, lo que habitualmente veníamos haciendo con html, en este caso lo implementaremos con Samrty
 +
;images
 +
:Cargaremos imágenes
 +
;js
 +
:Si tenemos algo de javascript lo insertaremos en este fichero(por si usáramos ajax)

Última revisión de 21:41 18 abr 2019



DESCRIPCIÓN DE LA PRÁCTICA DE LA TIENDA ON LINE

  • Vamos a hacer un ejemplo práctico en el que vamos a usar sesiones
  • Consiste en implementar una tienda on line con los datos siguientes
Diagrama de entidades

DiagramaEntidadesTienda.png


  • El siguiente diagrama muestra el escenario que queremos representar
  • El programa debe de ser orientado a objetos (Ver en sección más abajo clases que se recomienda utilizar)

WebTienda.png

  • Explicación funcional de las páginas
Login (login.php).
Su función es autentificar al usuario de la aplicación web.
Todos los usuarios de la aplicación deberán autentificarse utilizando esta página antes de poder acceder al resto de páginas.
Listado de productos (productos.php).
Presenta un listado de los productos de la tienda, y permite al usuario seleccionar aquellos que va a comprar.
Cesta de compra (cesta.php).
Muestra un resumen de los productos escogidos por el usuario para su compra y da acceso a la página de pago.
Pagar (pagar.php).
Una vez confirmada la compra, la última página debería ser la que permitiera al usuario escoger el método de pago y la forma de envío.
En esta aplicación simplemente mostrará un mensaje de tipo "Gracias por su compra" y ofrecerá un enlace para comenzar una nueva compra.
Logoff (logoff.php).
Esta página desconecta al usuario de la aplicación y redirige al usuario de forma automática a la pantalla de autentificación.
No muestra ninguna información en pantalla, por lo que no es visible para el usuario.
  • Para realizar esta práctiva vamos a utilizar la siguiente hoja de estilo, disponible en un fichero puesto en el moodle
  • Observa los diferentes div definidos para poderlos utilizar como es el caso de error
  • Podemos ver el ejercicio funcionando en esta url
Imprimir
  • Imprimir.php
mostrará una página con un fichero pdf que se podrá imprimir o descargar.


Especificaciones no funcionales generales

  • En este caso se trata de cumplir una serie de especifiaciones nuevas
  • Vamos a separar la lógica del negocio de la presentación usando un sistema de plantillas de smarty
  • Vamos a realizar el desarrollo totalmente orientado a objetos, creando las clases necesarias y usándolas en el programa principal.
  • El resultado será un proyecto con muchos mas ficheros, pero mucho más organizado y especializado

Forma de proceder

  • Para realizar este ejercicio, procederemos de una manera incremental, realizando cada parte con el fin de ir asimilando bien los conceptos de plantillas y la separación de negocio o lógica y presentación.
  • por ello crearemos una estructura de directorios para el despliegue de nuestra aplicación
  • Estableceremos los siguientes directorios

DirectoriosTienda.png

logica
Aquí irán todos los ficheros php que contengan funcionalidad y que se invoquen directamente en el url
Constituirá la lógica de la aplicación (El programa principal que se ejecutará)
clases
Se implementarán todas las clases de nuestro desarrollo, las cuales luego usaremos en nuestra lógica
vista
Se implementarán los ficheros que se van a visualizar, lo que habitualmente veníamos haciendo con html, en este caso lo implementaremos con Samrty
images
Cargaremos imágenes
js
Si tenemos algo de javascript lo insertaremos en este fichero(por si usáramos ajax)