Estudi de Caso TiendaMusical_material1
-
Upload
cinthya-wishu -
Category
Documents
-
view
231 -
download
0
Transcript of Estudi de Caso TiendaMusical_material1
-
7/31/2019 Estudi de Caso TiendaMusical_material1
1/40
M. en I. DAVID HUMBERTO JIMNEZ
Desarrollo de Aplicaciones
con el
Patrn de Diseos MVC
CASO DE ESTUDIO TIENDA
MUSICAL
UNIDAD III. DESARROLLO WEB
-
7/31/2019 Estudi de Caso TiendaMusical_material1
2/40
Caso Tienda MusicalLa aplicacin que vamos a construir es una tienda de
msica simple. Hay tres partes principales de laaplicacin: ir de compras, pago y administracin.
CARACTERISTICAS DEL SITIO Los visitantes pueden navegar lbumes de Gnero. Pueden ver un solo lbum y agregarlo a su carro. Ellos pueden revisar su carro, la eliminacin de
cualquier elemento que ya no quieren. Procediendo a la comprobacin Dar lugar para
registrarse o para obtener una cuenta de usuario.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
3/40
Despus de crear una cuenta, pueden completar el
pedido llenando el pago y envo de informacin.Para mantener las cosas simples, vamos a crear unapromocin espectacular: todo es gratis si se
introduzca el cdigo de promocin "GRATIS"! La pgina de Administracin muestra una lista de
los lbunes de la cual los administradores pueden
crear, editar y eliminar lbumes:
-
7/31/2019 Estudi de Caso TiendaMusical_material1
4/40
Aspectos Generales Empezaremos creando un nuevo ASP.NET MVC del
proyecto en Visual Studio 2010, y de forma incrementala aadir caractersticas para crear una aplicacin defuncionamiento completo.
En el camino, vamos a cubrir: el acceso de base dedatos, la lista de puntos de vista y detalles, los datos deactualizar las pginas, validacin de datos, utilizandopginas maestras para el diseo de la pginacoherente, AJAX para actualizar la pgina y lavalidacin, la pertenencia del usuario, y mucho ms.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
5/40
Modelo Vista - Controlador Es un patrn de diseo, estilo de arquitectura de software
que separa los datos de una aplicacin.
Es utilizado para crear paginas webs profesionales con unabuena organizacin de nuestra informacin a visualizar
trabajando junto con la arquitectura de la informacin.
Es de mucha utilidad para los desarrolladores ya que no setendran que crear pginas por pginas para terminar un
proyecto.
El MVC beneficia tanto el desarrollador y el usuario final.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
6/40
MVC es un patrn de diseo que se divide en
tres partes.Controlador, Vista, Modelo, junto con estos tres
elementos se forma el famoso MVC para administrarpginas web.
Modelo: datos y reglas de negocio
Vista: muestra la informacin del modelo alusuario
Controlador: gestiona las entradas del usuario
-
7/31/2019 Estudi de Caso TiendaMusical_material1
7/40
Como opera el MVC
-
7/31/2019 Estudi de Caso TiendaMusical_material1
8/40
Fundamentos de MVC en Visual Studio 2010
Carpeta Propsito/ Controladores Controladores que responden a las entradas desde el navegador,
decidir qu hacer con ella, y la respuesta de vuelta al usuario.
/ Vistas Vistas mantener nuestra interfaz de usuario de plantillas
/ Modelos Modelos de poseer y manipular los datos/ Contenido Esta carpeta contiene nuestras imgenes, CSS, y cualquier otrocontenido esttico
/ Scripts Esta carpeta contiene nuestros archivos JavaScript
/ App_Data Esta carpeta contiene los archivos de datos que pueden ser ledos yactualizados por la aplicacin
-
7/31/2019 Estudi de Caso TiendaMusical_material1
9/40
Visual C#
(MVC)
DESARROLLO DE LA
APLICACIN WEB
-
7/31/2019 Estudi de Caso TiendaMusical_material1
10/40
Crearemos un nuevo Proyecto
-
7/31/2019 Estudi de Caso TiendaMusical_material1
11/40
Seleccionamos el Patrn MVC en blanco
-
7/31/2019 Estudi de Caso TiendaMusical_material1
12/40
Un vistazo a la aplicacin
-
7/31/2019 Estudi de Caso TiendaMusical_material1
13/40
CONTROLADOR
-
7/31/2019 Estudi de Caso TiendaMusical_material1
14/40
Diseado los controladores Comenzamos con una prueba bsica de algunos
controladores que usaremos.
Nuestro sitio se inici con una pgina principal, as
que vamos a aadir un controlador para manejar lapgina principal del sitio. Vamos a seguir laconvencin y lo llaman HomeController.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
15/40
Creando El HomeController.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
16/40
Cambie el Nombre del Nuevo controlador
-
7/31/2019 Estudi de Caso TiendaMusical_material1
17/40
Para empezar lo ms sencillo posible, vamos a sustituirlo
con un mtodo simple que slo devuelve una cadena.
Vamos a hacer dos cambios simples:
Cambiar el mtodo para devolver una cadena en lugarde un ActionResult
Cambie la instruccin de retorno para regresar "PAGINA PRINCIPAL DE NUESTRA APLICACINWEB "
-
7/31/2019 Estudi de Caso TiendaMusical_material1
18/40
Cambie el cdigo por lo siguiente:public string Index()
{return PAGINA PRINCIPAL DE NUESTRA
APLICACIN WEB, EN MVC";
}
Ejecutar Aplicacin. (F5)
-
7/31/2019 Estudi de Caso TiendaMusical_material1
19/40
Ahora vamos a configurar un controlador para
nuestra tienda. La tienda tiene tres niveles:
El ndice de listas de los gneros de la tienda.
La pgina Examinar, muestra las listas de todos loslbumes en un gnero
La pgina Detalles muestra la informacin de un
lbum especfico
-
7/31/2019 Estudi de Caso TiendaMusical_material1
20/40
Creando otro ControladorVamos a empezar por agregar una nueva
StoreController, al igual que hemos creado laHomeController.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
21/40
Configurando el Controlador StoreController Cuando se ponga el nuevo controlador habr un
mtodo ndice. Tambin deber aadir mtodos para manejar las
dos otras pginas en la tienda: Examinar, yDetalles.
Estos mtodos llaman a las acciones delcontrolador, y como ya hemos visto con el ndicede HomeController () del controlador de accin,
su trabajo consiste en responder a las peticiones deURL y (en general) poner el contenido en unapgina.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
22/40
Vamos a empezar por cambiar el mtodo para
volver StoreController.Index la cadena "Hola desdeStore.Index ()" y aadiremos los mismos mtodospara Examinar y Detalles:
-
7/31/2019 Estudi de Caso TiendaMusical_material1
23/40
-
7/31/2019 Estudi de Caso TiendaMusical_material1
24/40
Ejecutar Checarlo con las siguientes direcciones. ESCRIBE
EN LA URL
/tienda/Browser
/tienda/Details
/tienda
-
7/31/2019 Estudi de Caso TiendaMusical_material1
25/40
Aunque estos son slo simples cadenas. Vamos a
hacerlos dinmicos, por lo que tomaremos lainformacin de la URL y mostraremos losresultados de la pgina.
En primer lugar vamos a cambiar la accin enDetalles para leer y mostrar un parmetro de
entrada, que es el nombre de identificacin.Quedando asi:
-
7/31/2019 Estudi de Caso TiendaMusical_material1
26/40
ejemplo
Ejecutarlo con:
store/details/5
Observar que le pasamos un valor por la URL, en este caso el 5,pero pueden probar con cualquier Numero.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
27/40
Eso fue especialmente fcil porque la
identificacin es un caso especial. ASP.NET MVCutiliza un sistema llamado de enrutamiento a losvalores de URL con los parmetros de accin delcontrolador, y que incluye por defecto una "ruta"con un parmetro de identificacin ya establecidosen todos los nuevos proyectos. Eso es configurable,
y veremos que ms tarde.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
28/40
Tambin se puede leer los valores de la cadena de
consulta desde una direccin URL sin cambios deenrutamiento. Vamos a modificar la accin de lavista y pasar como parmetro la bsqueda delGnero:
-
7/31/2019 Estudi de Caso TiendaMusical_material1
29/40
Ejecutarlo con:
Tienda/Browser?genero=Banda
Es parecido al ejemplo anterior pero aqu le mandamos unacadena a la URL y esta la puede consultar
-
7/31/2019 Estudi de Caso TiendaMusical_material1
30/40
ResumenVamos a recapitular lo que hemos hecho hasta ahora:
Hemos creado un nuevo proyecto en Visual Studio
Hemos completado el panorama de la estructura
bsica de carpetas de una aplicacin ASP.NET MVC Hemos aprendido cmo manejar nuestro sitio web
utilizando el servidor de desarrollo ASP.NET
Hemos creado dos controladores. El Controlador concuatro acciones que respondan a las peticiones de URLy el texto vuelve al navegador
-
7/31/2019 Estudi de Caso TiendaMusical_material1
31/40
VISTA Y VISTAMODELOMVC
-
7/31/2019 Estudi de Caso TiendaMusical_material1
32/40
Actividades que se van a desarrollar Uso de MasterPage para elementos comunes del
sitio.
Colocando la plantilla de vistas.
Probar hasta este momento.
Usando el ModeloVista pasando informacin a
nuestra Vista.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
33/40
Agregar una pagina Maestra
-
7/31/2019 Estudi de Caso TiendaMusical_material1
34/40
Seleccionamos una pagina Maestra y le
cambiamos de nombre
-
7/31/2019 Estudi de Caso TiendaMusical_material1
35/40
Agregamos el siguiente cdigo
-
7/31/2019 Estudi de Caso TiendaMusical_material1
36/40
Agregando una plantilla de la Vista Regresamos al
HomeController ymodificamos elcdigo paradejarlo comosigue.
-
7/31/2019 Estudi de Caso TiendaMusical_material1
37/40
Despus creamos una vista como se muestra En el mismo
cdigo de laanterior lamina,en Index le doyclic derechopara agregar la
vista
-
7/31/2019 Estudi de Caso TiendaMusical_material1
38/40
Agregar el siguiente cdigo
Checar la creacin de la vista
-
7/31/2019 Estudi de Caso TiendaMusical_material1
39/40
Ejecutarlo con F5
-
7/31/2019 Estudi de Caso TiendaMusical_material1
40/40
Continuamos con la VistaModelo para
Generar esta Pagina.