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


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.


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:


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.


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.


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/40

Como opera el MVC


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


9/40

Visual C#

(MVC)

DESARROLLO DE LA

APLICACIN WEB


10/40

Crearemos un nuevo Proyecto


11/40

Seleccionamos el Patrn MVC en blanco


12/40

Un vistazo a la aplicacin


13/40

CONTROLADOR


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.


15/40

Creando El HomeController.


16/40

Cambie el Nombre del Nuevo controlador


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 "


18/40

Cambie el cdigo por lo siguiente:public string Index()

{return PAGINA PRINCIPAL DE NUESTRA

APLICACIN WEB, EN MVC";

}

Ejecutar Aplicacin. (F5)


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


20/40

Creando otro ControladorVamos a empezar por agregar una nueva

StoreController, al igual que hemos creado laHomeController.


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.


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:


23/40


24/40

Ejecutar Checarlo con las siguientes direcciones. ESCRIBE

EN LA URL

/tienda/Browser

/tienda/Details

/tienda


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:


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.


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.


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:


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


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


31/40

VISTA Y VISTAMODELOMVC


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.


33/40

Agregar una pagina Maestra


34/40

Seleccionamos una pagina Maestra y le

cambiamos de nombre


35/40

Agregamos el siguiente cdigo


36/40

Agregando una plantilla de la Vista Regresamos al

HomeController ymodificamos elcdigo paradejarlo comosigue.


37/40

Despus creamos una vista como se muestra En el mismo

cdigo de laanterior lamina,en Index le doyclic derechopara agregar la

vista


38/40

Agregar el siguiente cdigo

Checar la creacin de la vista


39/40

Ejecutarlo con F5


40/40

Continuamos con la VistaModelo para

Generar esta Pagina.

Documents

Estudi de Caso TiendaMusical_material1