Microsoft Virtual Academy

Cursos tcnicos gratuitos en lnea

Tome un curso gratuito en lnea.

http://www.microsoftvirtualacademy.com

Aprendiendo a Programar
Captulo V

El servidor web
El principal servicio que nos interesa que brinda un servidor,
es el de enviarle al usuario la pgina web que el mismo
requiere. Y esto lo hace de distintas maneras. Si la pgina es
simplemente un archivo esttico, que no cambia nunca,
directamente lo enva para su visualizacin.
En cambio, si lo que nuestra aplicacin necesita es mostrar
distinta informacin de acuerdo a lo que interacta el usuario
mientras navega, ah empezamos con lo que llamamos
programacin de pginas dinmicas

Pginas dinmicas
Un sitio web dinmico es uno que puede tener cambios frecuentes en la
informacin. Cuando el servidor web recibe una peticin para una
determinada pgina de un sitio web, la pgina se genera
automticamente por el software, como respuesta directa a la peticin de
la pgina.
Hablando de manera mas general el trmino "pgina web dinmica" lo
usamos para referirnos a alguna pgina especfica que es generada de
manera diferente para cada usuario, en cada recarga de la pgina o por
las acciones especficas que los usuarios realizan al navegarla

Navegacin condicionada
Las pginas dinmicas son el resultado de la ejecucin de un programa en
algn tipo de lenguaje de programacin en el servidor de la pgina web, el
cual genera la pgina antes de enviarla al cliente, o bien de la ejecucin en
nuestra PC de un cdigo que crea la pgina completa antes de que un
navegador la visualice.
De esto nace el concepto de Navegacin Condicionada, que se refiere a
cierta informacin o pantallas que se pueden mostrar o no en funcin
del valor de una condicin, que depende de las acciones del usuario. En
este captulo vamos a ver unos primeros ejemplos de cmo hacer esto en
.NET.

MVC
MVC en la informtica, significa sencillamente ModelViewController, o
en espaol Modelo-Vista-Controlador. Referirnos al patrn MVC,
sencillamente significa que es una forma de ordenar nuestros sistemas
que se repiten constantemente, y por ello se dice que es un patrn.
Este patrn lo que hace, es separar nuestro sistema en partes para que
sea mas sencillo de programar y de entender. Cmo separa el patrn
nuestro sistema? En tres partes principales: el Modelo (todo lo que tiene
que ver con la inteligencia de mi sistema y los datos), las Vistas (la interfaz
de usuario) y los Controladores (quizs lo mas difcil de entender, que es
quien reconoce las acciones de los usuarios y ejecuta acciones).

MVC

Para ponerlo mas fcil, piensen en una pgina web que estn navegando. Lo que
estn viendo, es la vista de la pantalla inicial o Index. En esa pantalla ustedes
tienen un men desplegable donde pueden seleccionar de que pas son. Una vez
que seleccionan su pas, el controlador le enviar la informacin al modelo, quien
a su vez, en base a lo que hayan programado, decidir que provincias o estados se
corresponden a ese pas, y le dir a la vista que muestre otro men con la
informacin que corresponde.
De esta manera, tengo 3 partes de mi aplicacin separadas, cada una ocupndose
de una parte distinta, y haciendo mas sencilla mi programacin. Esto nos va a
permitir tambin hacer mas fcil el testing de mi sistema y el mantenimiento,
porque cada parte es mas chica que el total.

Flujo general MVC

En general, el flujo en una aplicacin que tiene la forma MVC es la
siguiente:
El usuario interacta con la Interfaz alguna manera (por ejemplo, presionando
algn botn del ratn, o presionando una tecla para ingresar un nmero o
caracter).
El Controlador recibe la informacin ingresada a travs de la interfaz, y la
convierte en la accin que corresponde, para que sea entendida por el
modelo.
El controlador notifica al modelo de la interaccin del usuario, y esto muchas
veces hace que cambie el estado del modelo, porque nuevos datos son
ingresados y el modelo debe aprenderlo y modificar otra informacin en base
a ellos (por ejemplo si el usuario agreg un producto a un carrito de compras).
La vista le pregunta al modelo si hubo cambios para generar una nueva
interfaz de usuario apropiada (por ejemplo, mostrando la nueva lista del
carrito de compras).
La interfaz de usuario se queda esperando por nuevas interacciones,
empezando de nuevo todo el ciclo.

Primera aplicacin web MVC

Para crear nuestra primera aplicacin web, usaremos la
herramienta llamada Visual Web Developer que en realidad
ya viene dentro del programa Visual Studio. Esta herramienta
nos permite ya tener muchas cosas solucionadas en nuestro
sistema y nos da tambin algunas funcionalidades para armar
nuestro programa de manera mas visual y sencilla.
Cuando abran el Visual Studio, si ya tienen el Visual Web
Developer incluido, seleccionen Nuevo Proyecto.

Primera aplicacin web MVC

Primera aplicacin web MVC

Se abrir la ventana que les mostramos antes. All tienen que:

Abrir las plantillas de Visual C#

Seleccionen la plantilla Aplicacion Web ASP.NET MVC 3
Pongan como Nombre del Proyecto MvcDemo
Pongan la direccin de los archivos en el lugar que prefieran. Por
ejemplo c:\Demo
Clickeen en OK

Primera aplicacin web MVC

Cuando se abra la siguiente ventana de Nuevo Proyecto:

Seleccionen la plantilla de Aplicacin para Internet

Seleccionen el Motor Razor
Seleccionen HTML5 Markup
Clickeen en OK

Visual Studio abrir una ventana como la siguiente:

Primera aplicacin web MVC

Primera aplicacin web MVC

Como ven en la ventana de la derecha, al crear un proyecto MVC, Visual Studio

automticamente nos creo las carpetas Models o Modelos (dependiendo del
idioma), Controllers o Controladores, Views o Vistas.
En la carpeta App_Data van a encontrar distinta informacin relacionada a la
aplicacin, como ser conexiones a bases de datos, que veremos luego en otro
captulo.
En la carpeta Content es donde guardarn todo lo referido a diseo, imgenes y
otros recursos que puedan necesitar para su sistema.
En la carpeta scripts guardaremos toda la programacin en lenguaje Javascript que
sea necesaria para nuestro sistema (acuerdens, que siempre se usa mas de un
lenguaje para programar, aunque haya uno principal)

Primera aplicacin web MVC

Para empezar a crear nuestra primera aplicacin web, lo que
vamos a hacer incialmente es darle un poco de diseo a
nuestro sistema. Para ello en la carpeta Shared, dentro de
Views o Vistas vamos a editar el archivo _Layout.cshtml, que
representa la diagramacin de nuestras interfaces.
Cambiemos el contenido del archivo por el siguiente:

Primera aplicacin web MVC

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Peliculas", "Index", " Peliculas ")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
</section>
</body>
</html>

Primera aplicacin web MVC

En el cdigo que escribimos lo que est en rojo y empieza con el smbolo
@ nos permite modificar que es lo que se mostrar en la pantalla:
@Url.Content(): Aqu se mostrarn links a recursos o archivos que vamos a
estar usando
@Html.ActionLink(): Aqu se mostrarn links a otras pantallas
@ViewBag.Title: Aqu se mostrarn los ttulos de las pantallas
@RenderBody(): Esta instruccin mostrar el contenido de la pantalla que
necesitemos

Luego le daremos un diseo a nuestra aplicacin modificando el archivo

Site.css que se encuentra en la carpeta Content. Reemplacemos su
contenido con lo siguiente:

Primera aplicacin web MVC

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}

Primera aplicacin web MVC

/* Menu Styles ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}

Primera aplicacin web MVC

/* Forms Styles ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}

Primera aplicacin web MVC

/* Data Styles ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}

Primera aplicacin web MVC

Luego, en nuestra carpeta Controllers veremos que tenemos dos archivos:
HomeController.cs (para las pginas Home y About) y
AccountControllers.cs (para las pantallas de Login).
En una aplicacin web comn, uno directamente le pide al servidor un
archivo, como por ejemplo index.html, o index.asp. En una aplicacin
MVC, lo que se hace cuando pido por la pantalla Index, o Home, o About,
es llamar a un programa que se encuentra en mis Controladores que
mostrarn una pantalla de acuerdo a la direccin web que le estoy
pasando.
Entonces abrimos el HomeController.cs y reemplazamos el cdigo con lo
siguiente:

Primera aplicacin web MVC

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{return View();}
public ActionResult About()
{return View();}
}
}

Primera aplicacin web MVC

En la carpeta Views, dijimos que tendramos las interfaces a mostrar, y las
mismas podrn tener distintas extensiones: HTML, ASP, ASPX, CSHTML,
etc.
En Views tendremos una subcarpeta por cada uno de los controladores
que definamos. De esa manera un controlador puede mostrar cualquiera
de las pantallas definidas en su subcarpeta correspondiente. Por ejemplo,
al tener el controlador HomeController, tendremos la carpeta Home
donde guardaremos la pgina inicial de nuestra aplicacin, llamada
index.cshtml y la pgina about.cshtml.
En el archivo index.cshtml pondremos el siguiente cdigo:

Primera aplicacin web MVC

@{ViewBag.Title = "Home Page";}
<h1>Hello World!</h1>
<p>This is my first MVC website</p>

Y en el about.cshtml pondremos:

@{ViewBag.Title = "About Us";}

<h1>About Us</h1>
<p>We are the greatest ever!</p>

Luego, en Visual Studio, presionamos F5 para ver en el navegador nuestra primera aplicacin funcionando.
Podemos clickear en Home o About para ver nuestras dos pantallas.

Seguir avanzando
Qu pasa si queremos hacer algo mas avanzado? Que
interacte de otras maneras con mis usuarios? Cmo hago si
quiero enviar un mail cuando un usuario se registra en mi
sitio, o si alguien me hace una consulta y yo quiero recibirla
en mi casilla de correo? O cmo hago para crear un chat y
divertirme con mis amigos?
Todo esto es posible de manera muy sencilla y lo veremos
mas adelante, pero primero debemos entender como es que
funcionan este tipo de mensajeras.

Mensajera
Tanto para enviar un correo electrnico como un mensaje de
un chat mi sistema debe conectarse de alguna manera con un
programa, o servidor, que se encarga de recibir el contenido
que quiero enviar, junto con mucha informacin que alguna
nosotros podemos ver y otra es invisible a nosotros como
usuarios. En el mensaje no solo envo texto, o el ttulo, sino
que tambin, a quin estoy dirigiendo el mensaje, el formato
del mismo (si es HTML, texto plano, emoticones, imgenes,
etc) y otros aspectos de los que podemos saber o no.

Mensajera
Una vez que mediante nuestra programacin nos conectamos con el
sistema correspondiente y les brindamos la informacin necesaria, se
resolver si la direccin de destino es correcta y se enviar el mensaje. Al
enviar el mensaje pueden ocurrir distintos inconvenientes por el cual la
informacin no llega a destino, ya sea en un mail o en un chat. El nico
problema no es que la direccin no exista. Podra ocurrir que quien va a
recibir el correo o mensaje de chat nos tenga bloqueados, o que no tenga
espacio para recibir la informacin. Y en esos casos el servidor de envo de
mensajes nos devolver algn tipo de cdigo de error que nuestro sistema
deber entender y traducirlo a un lenguaje para que los usuarios lo
entiendan.

Mensajera
La diferencia principal entre un correo electrnico y un chat es
que cuando abrimos el chat y seleccionamos con que usuario
queremos conversar, ya automticamente el programa tiene
guardada la direccin de adonde se debe entregar el mensaje,
y no hay posibilidad de error con ello. Lo nico que puede
ocurrir es que el receptor nos tenga bloqueados, o no se
encuentre conectado y no pueda recibir el mensaje. Pero
aparte de ello, ambos tipos de funcionalidades

Mensajera

Pero enviar un email en .NET puede ser tan sencillo como escribir:

try
{
// Send email
WebMail.Send(to:"someone@example.com", subject: "Email example" +
customerEmail, body: customerRequest );
}
catch (Exception ex )
{
<text>@ex</text>
}

Pero esto lo veremos mas adelante a medida que armemos nuestra aplicacin.