Tutorial Microsoft WebMatrix
-
Upload
fredyfx -
Category
Technology
-
view
8.202 -
download
12
description
Transcript of Tutorial Microsoft WebMatrix
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 1
Correo: [email protected] | [email protected]
Twitter: @fredyfx
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 2
Tutorial Microsoft WebMatrix
Contenido Términos y Condiciones de uso .................................................................................... 4
Previo a la Instalación ................................................................................................. 4
Advertencia ............................................................................................................. 4
Instalación .............................................................................................................. 5
Introducción a Microsoft WebMatrix ............................................................................ 12
Características ......................................................................................................... 12
Elementos de la Interfaz ............................................................................................ 13
Iniciando el tutorial ................................................................................................... 15
HTML Básico ......................................................................................................... 15
Hojas de estilo ...................................................................................................... 16
Sintaxis Razor ....................................................................................................... 21
Creando una Interfaz consistente ............................................................................. 22
Header .............................................................................................................. 23
Footer ............................................................................................................... 25
Programación básica .............................................................................................. 25
intro.cshtml ........................................................................................................ 25
Formularios ........................................................................................................... 28
form.cshtml ....................................................................................................... 28
Creación de Base de datos ...................................................................................... 30
Operaciones CRUD ................................................................................................. 33
Create ............................................................................................................... 34
Read ................................................................................................................. 34
Update .............................................................................................................. 35
Delete ............................................................................................................... 36
Creación de estructura ........................................................................................... 37
Login .................................................................................................................... 37
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 3
_AppStart.cshtml ................................................................................................... 37
Carpeta account .................................................................................................... 38
new.cshtml ........................................................................................................ 38
login.cshtml ....................................................................................................... 40
logout.cshtml ..................................................................................................... 41
Carpeta crud ......................................................................................................... 41
read.cshtml ........................................................................................................ 42
create.cshtml ..................................................................................................... 43
update.cshtml .................................................................................................... 45
delete.cshtml ..................................................................................................... 47
Carpeta reports ..................................................................................................... 49
pricereport.cshtml ............................................................................................... 49
stockreport.cshtml .............................................................................................. 49
reports.cshtml ....................................................................................................... 49
error.cshtml .......................................................................................................... 50
web.config ............................................................................................................ 50
Finalizando el tutorial ................................................................................................ 51
Recursos Extras ....................................................................................................... 55
Palabras Finales ....................................................................................................... 56
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 4
Términos y Condiciones de uso [02 minutos]
Duración del tutorial: 1 Hora y 45 Minutos, 105 minutos en total distribuidos en: 15 de
introducción, 80 de programación y 10 de preguntas/respuestas. Si faltase tiempo, con
gusto las dudas que tengan serán respondidas mediante correo electrónico o vía twitter.
Para el presente tutorial no se requiere experiencia alguna en desarrollo web pero sí
conocimiento en desarrollo de aplicaciones, hoy aprenderemos con ejemplos simples y
directos, tengan en cuenta las siguientes recomendaciones para lograr un aprendizaje
exitoso:
Celulares en silencio.
Tener sus sentidos enfocados en el presente tutorial.
Leer detenidamente este material.
Prohibida la navegación en internet y reproducción de música.
Las preguntas se realizarán al final; se sugiere anotar cualquier tipo de duda para
luego hacerla saber; en caso falte tiempo para la resolución de dudas, vía correo
electrónico obtendrán respuestas.
Previo a la Instalación [02 minutos]
Actualmente sus computadoras ya se encuentran configuradas con todos los elementos que
utilizaremos, como verán en la imagen adjunta, tenemos instalado algunos módulos, como
el soporte para PHP, sí, tal y como están pensando: ¿Pero PHP no solo corre sobre un
apache? También corre sobre Internet Information Services (más conocido como IIS,
servidor web de Microsoft)
Advertencia [01 minuto]
Si también programan utilizando un servidor local como apache (con netbeans / eclipse /
wamp / xampp), tendrán problemas con el puerto 80 ya que lo estará usando el IIS
(referencia: localhost). Para solucionar este asunto tienen 2 opciones:
Configuran el apache para que utilice otro puerto.
Deshabilitar el IIS de manera temporal.
Por efectos de practicidad, veremos la 2da opción: nos dirigimos a Panel de control ->
Programas -> Programas y características -> Activar o desactivar las características de
Windows. Desmarcamos todo Internet Information Services, si requiere reinciar la
computadora, se reinicia y listo!
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 5
Instalación [00 minutos] [Cada quien ya tiene instalado en casa]
Para quienes no dispongan de Microsoft WebMatrix en sus ordenadores, podrán descargarlo
en el siguiente enlace: http://go.microsoft.com/fwlink/?LinkID=205867
Una vez descargado, procedemos a ejecutar:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 6
Debemos tener en cuenta los requisitos que necesita Microsoft WebMatrix.
Una vez aceptado los requisitos, procederá a descargarlos.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 7
Al final obtendremos un reporte sobre todo lo instalado en nuestra computadora.
Ahora tenemos instalado Microsoft WebMatrix, podemos agregar componentes adicionales:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 8
Viene lo interesante, instalaremos un módulo de soporte de PHP, para ello, se busca primero
“PHP” y luego clickeamos en el botón “agregar”.
De manera automática, se agregarán las dependencias
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 9
Debemos tener en cuenta que también se necesitará el conector MySQL/Net; y si todavía no
tienes el MySQL Instalado, se recomienda instalar las GUI Tools como el MySQL Query
Browser y/o MySQL Workbench, debido a que si solo se instala el MySQL, tendrás el manejo
via consola y via WebMatrix únicamente.
Ahora procedemos a verificar los elementos añadidos
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 10
Y procederemos con la instalación!
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 11
Aceptamos los términos y condiciones de uso
Esperamos mientras se ejecuta la descarga de los componentes antes mencionados
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 12
Listo, tenemos completamente preparado nuestro entorno de trabajo
Introducción a Microsoft WebMatrix [02 minuto]
WebMatrix es un software gratuito que trae consigo un conjunto de herramientas para
facilitar el desarrollo web utilizando ASP.net o PHP y una gran interacción con aplicaciones
Open Source tales como sistemas de gestores de contenido como Wordpress, Drupal, entre
otros.
Características [03 minutos]
Soporta PHP.
Internet Information Services Express [IIS Express] -> Servidor Web
ASP.net (VB | C#) -> Web Framework.
SQL Server Compact Edition [SQL Server CE] -> Gestor de Base de Datos nativo,
también soporta conexión con MySQL [Requiere un conector adicional].
Análisis de SEO y Rendimiento.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 13
Elementos de la Interfaz [05 minutos]
La intefaz que utiliza WebMatrix, es sencilla permitiendo una fácil navegación, del mismo
modo, los elementos son muy intuitivos, por lo cual permite adaptarse en poco tiempo, a su
vez, cabe mencionar que el menú principal que posee cuenta con estilo “Ribbon” (el cual
apareció en Office 2007).
Esta herramienta se divide prácticamente en 4 bloques:
Menú [Sección verde]
Elementos de trabajo [Sección naranja]
Contenido [Sección negra]
Panel [Sección azul]
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 14
A continuación se detallarán las interfaces:
Nos encontramos con las solicitudes, es decir, lo que pasa a
través del servidor mediante posts y gets; las opciones
generales del servidor: aquí es donde seleccionamos si
soporta ASP.net y/o PHP, si habilitamos SSL y qué páginas
serán mostradas primero.
Archivos, portapapeles, edición, vistas, iniciar visual studio,
cargar e instalar extensiones, son las opciones que
encontramos en esta sección.
Aquí podemos crear nuevas bases de datos tanto en SQL
Server CE como en MySQL [requiere extensión], del mismo
modo, crear tablas, modificar las conexiones, crear
consultas, vistas, procedimientos almacenados y realizar
una migración a SQL Server.
Se detallan informes de Rendimiento del sitio web, tanto de
tiempo, como de recursos, a su vez se obtiene un informe
SEO [Search Engine Optimization] para conocer qué tanta
aceptación tendrá nuestra web con los bots de los
buscadores.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 15
Iniciando el tutorial [80 minutos]
El presente tutorial busca dar un panorama general sobre la programación de aplicaciones
web: login de acceso, la seguridad web basado en los roles de usuario, un mantenimiento a
una tabla (agregar, editar, buscar, eliminar) y un par de reportes gráficos.
1. [10 minutos] Conociendo HTML
2. [10 minutos] Estilo haciendo uso de CSS a los bloques.
3. [10 minutos] Sintaxis Razor
4. [05 minutos] Creación de una interfaz consistente.
5. [05 minutos] Programación básica.
6. [07 minutos] Formularios: envío de variables métodos GET y POST
7. [10 minutos] Creación de Base de Datos: Tabla productos.
8. [10 minutos] Operaciones CRUD [Create Read Update Delete].
9. [03 minutos] Creación de estructura del proyecto.
10. [10 minutos] Login de acceso al sistema -> Sesiones.
HTML Básico [10 minutos]
Los elementos HTML son componentes que especifican como los documentos HTML deben
ser construidos y que tipo de contenido debe ser posicionado en que lugar de un documento
HTML.Los nombres de elementos son encerrados entre picos, también denominados
paréntesis angulares: <NombreElemento>, los cuales son llamados etiquetas. Si el elemento
contiene otro contenido, este termina con una etiqueta de cierre, donde el nombre del
elemento es precedido por un slash: </NombreElemento>.
Etiquetas Descripción <a>
</a>
Es uno de los elementos más importantes del HTML. Es el encargado de crear
los típicos vínculos hipertextuales. Puede actuar como origen y como destino
de estos enlaces. Además son muy apreciadas sus capacidades dinámicas.
<br /> br de "break" - ruptura. Fuerza al ruptura (o salto) de linea. <div>
</div> div de "division" - división. Sirve para crear secciones o agrupar contenidos.
<fieldset>
/fieldset> El elemento fieldset (grupo de campos) permite organizar en grupos los
campos de un formulario.
<legend>
</legend> El elemento <legend> (leyenda) crea un título para un grupos los campos
(<fieldset>) de un formulario.
<p></p> El elemento p (párrafo) es el apropiado para distribuir el texto en párrafos.
<input> El elemento input (<input>) es usado para crear controles interactivos para
formularios basados en la web.
<img> Esta etiqueta inserta una imagen.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 16
Hojas de estilo [10 minutos]
Comenzamos creando la carpeta
“style” y dentro de ella ubicaremos
a nuestra hoja de estilos *(CSS)
llamada StyleSheet.css
Luego de ello procedemos a definir
las características de los elementos
HTML.
*El código de nuestro CSS se encuentra líneas abajo.
Otra característica de Microsoft WebMatrix en la edición de hojas de estilo es su sencillez
para la definición de color por ejemplo, además de tener intellisense activado para la
rápida búsqueda de propiedades, te especifica en la descripción de cada elemento.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 17
A continuación presentamos el código de nuestra hoja de estilo llamada StyleSheet.css
/*Con esto definimos valores generales*/ * { margin:0; padding:0; } body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object { border:0; } body { padding: 15px; font: 12px/1.4 Verdana, Helvetica, sans-serif; font-size: 12px; color: #000; width: 960px; background-color: rgba(0, 0, 0, 0.07); } #header{ width: 960px; height: 150px; background-color: #235980; color: #fff; } #login{ float: right; padding-top: 20px; padding-right: 20px; clear: none; } #titulo{ clear: none; padding: 20px; } #menu{ background-color: #235980; width: 960px; color: #fff; } #menu li{ border-color: #ff6a00; border-style: solid; display: inline; padding: 10px;
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 18
font-size: 16px; color: #fff; } #help li{ font-size: 10px; display: inline; } a:hover { background-color: #2586d7; color: #ecff00; } a { color:#fff; text-decoration:none; border:none; } .enlace{ color: #000; } .footer { background-color: #235980; text-align: center; color: #fff; font-size: 12px; margin-top: 20px; padding: 5px; } img a { border:none; } h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, Sans Serif; margin:0 0 10px 0; } h1 { font-size:230%; } h2 { font-size:183%; font-weight: bold; }
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 19
h3 { font-size:140%; font-weight: bold; } h4 { font-size:120%; font-weight: bold; } h5 { font-size:100%; } h1.title { border-bottom:1px dotted #84a1af; margin:0 0 20px 0; } label { float:left; width: 15em; margin-right: 6em; } fieldset { padding: 1em; border: 1px solid; width: 35em; } legend { padding: 2px 4px; border: 1px solid; font-weight:bold; } /* Para resaltar los errores de validacion*/ .validation-summary-errors { font-weight:bold; color:red; font-size: 11pt; padding-left: 20px; float: right; margin: 50px 80px 0px 0px; } /* Para el slider*/ /* el rectangulo contenedor */ #slider_container_1 {
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 20
height: 375px; margin:0 auto; padding: 10px; width: 500px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; border-radius: 10px 10px; } /* el rectangulo con las imagenes */ #SliderName { height: 375px; margin: auto; width: 500px; } /* las flecha para ir hacia atras (son imagenes de 24x24 */ .SliderNamePrev, .SliderNameNext { background: url() no-repeat center center; display: block; height: 24px; position: absolute; text-decoration: none; top: 155px; width: 24px; } /* la flecha para ir hacia atras */ .SliderNamePrev { background-image: url('../images/left.png'); left: 10px; } /* la flecha para ir hacia adelante*/ .SliderNameNext { background-image: url('../images/right.png'); right: 10px; } /* el rectangulo con los textos */ .SliderNameDescription { font-family: Verdana; font-size: 25px; padding: 5px; text-align: left; } /* la barra de navegacion inferior */ #SliderNameNavigation { background-color: #FFF; height: 0px; margin: 10px 0 0 0;
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 21
text-align: center; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /* Publicidad de las comunidades */ .cherryL{ float: left; } .cherryR{ float: right; }
Sintaxis Razor [10 minutos]
La sintaxis Razor ofrece todo el poder de
ASP.NET, pero con una sintaxis simplificada que
es más fácil de aprender, de tal manera que
comprendes mejor la lógica de la programación
llegando a ser altamente productivos. Con
mucho esfuerzo, dedicación y constante
práctica llegaremos a ser ¡Expertos en
desarrollo web! A pesar de que esta sintaxis es
muy simple de usar, su relación familiar con
ASP.NET y el framework .NET significa que a
medida que los sitios que desarrollaremos se
vuelven más sofisticados, tenemos el poder
para lograrlo.
Para conocer esta sintaxis, debemos tener en cuenta que:
Las declaraciones comienzan con el caracter “arroba” @
Se encierran bloques de código entre llaves.
Dentro de un bloque, se termina cada instrucción de código con un punto y coma,
excepto si está mezclado con código HTML.
Se colocan valores literales entre comillas.
El código es sensitivo como en C#.
Gran parte de su codificación implica objetos.
Los espacios en blanco no afectan el funcionamiento.
Razor Sintaxis
ASP.net
.Net Framework
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 22
<!-- Single statement blocks --> @{ var numero = 7; } @{ var saludo = "Greetings World, we are programmers!"; } <!-- Inline expressions --> <p>El valor de su cuenta es: @numero </p> <p>Su mensaje : @mensaje</p> <!-- Multi-statement block --> @{
var diasemana = DateTime.Now.DayOfWeek; var saludocompleto = saludo + " Hoy es: " + diasemana; var saludoCompleto = saludo + " este es otro saludo";
}
Creando una Interfaz consistente [05 minutos]
¿Se imaginan estar programando los bloques o secciones por
página sin la necesidad de tener todo en cada una? Seamos
más productivos, ahorremos tiempo y reutilicemos código!
Dentro de la carpeta “style”, creamos 3 archivo:
header.cshtml
slider.cshtml
footer.cshtml
StyleSheet.css
Todas las páginas que veremos en este tutorial tendrán el siguiente esquema:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 23
Header
Nuestro “Header” contiene un pequeño formulario de login, por lo cual se optó de fusionar
junto con el menú en un mismo archivo llamado “header.cshtml” ubicado dentro de la
carpeta style:
@{ var mensaje = "Tutorial Microsoft WebMatrix"; } <head> <meta charset="utf-8"> <meta name=”description” content="tutorial desarrollado para el IX Congreso Internacional de Ingeniería de Software, Sistemas de Información y Telecomunicaciones UPAO 2012"> <title >:: IX Congreso Sistemas, Software, Telecomunicaciones UPAO::</title> <link rel="stylesheet" type="text/css" media="screen" href="@Href("~/style/StyleSheet.css")" /> <script src="@Href("~/js/sliderman.1.3.6.js")" type="text/javascript"></script> </head> <div id="header"> <div id="login"> @if(WebSecurity.IsAuthenticated) { <p>Bienvenido, @WebSecurity.CurrentUserName |
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 24
<a href="@Href("~/account/logout.cshtml")">Salir del sistema</a></p> } else { <form method="post" action="@Href("~/account/login.cshtml")"> Usuario: <input type="text" name="username"> Password: <input type="password" name="password"> <input type="submit" title="Acceder al sistema"> </form> <div id="help"> <ul> <li><a href="#">Olvidé mi password</a></li> <li><a href="@Href("~/account/new.cshtml")">| Cuenta nueva</a></li> <li> | Exactamente son: @DateTime.Now</li> </ul> </div> }</div> <div id="titulo"> <a href="@Href("~/index.cshtml")"><h1>@mensaje</h1></a> <h2><a href="http://www.upao.edu.pe/congreso_sistemas/2012" target="_blank"> IX Congreso Internacional de Ingeniería de Software, Sistemas de Información y Telecomunicaciones UPAO 2012 </a> </h2> </div> </div> <br /> <div id="menu"> <ol> <li><a href="@Href("~/intro.cshtml")">Introduccion</a></li> <li><a href="@Href("~/form.cshtml")">Formularios</a></li> <li><a href="@Href("~/crud/read.cshtml")">Operaciones CRUD</a></li> <li><a href="@Href("~/reports.cshtml")">Reportes</a></li> </ol> </div>
Dando como resultado:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 25
Detalle importante:
La utilización de una referencia @Href("~/intro.cshtml") crea una URL del tipo:
http://<server>/intro.cshtml es muy útil ya que se convierte simple nuestra
organización de archivos.
Footer <div class="footer"> ® Tutorial Desarrollo de Aplicaciones Web con Microsoft WebMatrix © Todos los derechos reservados - 2012 </div>
El resultado:
Programación básica [05 minutos]
A continuación se presenta el archivo intro.cshtml, el cual se creará en la raíz del proyecto
intro.cshtml @{ /* Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } */ } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Comenzando a programar en la Web!</h1> <p>Esperamos que el presente tutorial sea de su agrado</p> @{ // Estructuras condicionales simples var saldo = 4.99;
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 26
if(saldo == 0) { <p>Tienes cero nuevos soles de saldo.</p> } else if (saldo > 0 && saldo <= 5) { <p>Tu saldo @saldo es muy bajo.</p> } else { <p>Tu saldo es: $@saldo</p> } // Estructuras condicionales múltiples var weekday = "Miercoles"; var greeting = ""; switch(weekday) { case "Lunes": greeting = "Iniciamos la semana con todo el power!"; break; case "Martes": greeting = "Segundo día, vamos avanzando!"; break; case "Miercoles": greeting = "Día de tutoriales!"; break; default: greeting = "Algún otro día debe ser"; break; } <p>Veamos, @weekday, el mensaje para hoy es: @greeting</p> // Estructuras repetitivas for(var i = 0; i < 4; i++) { <p>Linea #: @i</p> } var countNum = 0; while (countNum < 5) { countNum += 1; <p>Line #@countNum: </p> } // Arreglos { <h3>Team Members</h3> string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"}; foreach (var person in teamMembers) { <p>@person</p> } }
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 27
//Diccionario de datos { var myScores = new Dictionary<string, int>(); myScores.Add("test1", 71); myScores.Add("test2", 82); myScores.Add("test3", 100); myScores.Add("test4", 59); <p>Mi nota en el test 3 es: @myScores["test3"]%</p> @(myScores["test4"] = 79); <p>Mi nota corregida en el test 4 es: @myScores["test4"]%</p> } // Manejo de excepciones float numeroa = 5; float numerob= 0; float resultado = numeroa/numerob; try{ <p>@resultado</p> }catch(Exception ex ){ <b>Errores:</b> @ex.Message; <p>@ex.Data</p> }finally{ } } @RenderPage("~/style/footer.cshtml") </body> </html> Dando como resultado:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 28
Formularios [07 minutos] [Métodos POST y GET]
En la programación de aplicaciones web, tenemos que tener en cuenta que son envíos de
peticiones http al servidor, por lo que se utilizan POST y GET, ambos envían las variables, a
diferencian de GET que hace uso del paso de las mismas vía url, POST no lo hace. Luego de
programar form.cshtml podremos ver con mayor claridad la diferencia mencionada.
form.cshtml
Editamos el archivo form.cshtml con el siguiente código:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 29
@{ /* Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } */ } <!DOCTYPE html> <html> @RenderPage("/style/header.cshtml") <body> <h1>Bienvenido al tutorial</h1> <div style="float: left; margin-right: 10px;"> <fieldset> <form action="" method="post"> <div> Ingrese su nombre: <input type="text" name="vnombre" value=""> <input type="submit" value="Enviar!" /> </div> <div> @if (IsPost){ if (Request["vnombre"].IsEmpty()){ <p style="color: #ff0000">*No olvide ingresar su nombre</p> }else{ <p> Bienvenido: <b> @Request["vnombre"] ! </b> Prepárate, vamos a programar en la web </p> } } </div> </form> </fieldset> <br /> </div> <fieldset> <form action="" method="get"> Numero A:<input type="text" name="numeroa" size="4" /> Numero B:<input type="text" name="numerob" size="4" /> <input type="submit" value=" La suma es: "/> @{ float numeroa = Request.QueryString["numeroa"].AsFloat(); float numerob = Request.QueryString["numerob"].AsFloat(); float resultado = numeroa+numerob; if(Request.QueryString["numeroa"].IsEmpty() || Request.QueryString["numerob"].IsEmpty()){ <p style="color: #ff0000">*No olvide ingresar datos numéricos</p> }else{
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 30
<b>@resultado</b> } } </form> </fieldset> </div> @RenderPage("/style/footer.cshtml") </body> </html>
Dando como resultado:
Haciendo uso de GET
Creación de Base de datos [10 minutos] [Haciendo uso de SQL Server CE]
En esta ocasión creamos una base de datos llamada “Tutorial” haciendo uso de SQL Server
Compact Edition, del siguiente modo:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 31
Primero seleccionamos “Base
de Datos” en el panel ubicado
en la parte inferior izquierda
Segundo, seleccionamos base de datos de SQL Server CE,
para que aparezca MySQL, se requiere un conector
adicional.
Tercero, colocamos un nombre a nuestra base de datos,
en este caso, “Razor” como se ve en la imagen de la
derecha.
Ahora que ya disponemos de la base de datos,
procedemos a crear una nueva tabla ya sea utilizando click
derecho y “Nueva tabla” ó directamente en el botón
seleccionado “Nueva tabla”
En la creación de tablas, debemos tener siempre en cuenta cuáles serán nuestras llaves
primarias, y si serán autogeneradas (1, 2, 3, 4…) por la misma base de datos.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 32
Como verán en las imágenes con ayuda de un zoom, se define el nombre del campo de la
tabla, luego se selecciona el tipo de dato, después se marcan los checks siguientes, lo que
genera el bloqueo de “Permitir valores NULL”, finalmente nos queda nuestra tabla productos
con los campos: id, nombre, descripción, precio, stock.
Ahora a poblar la tabla! Para ello nos dirigimos hacia “Datos”, y bueno, insertamos datos:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 33
Operaciones CRUD [10 minutos]
Se denominan operaciones CRUD por el siguiente detalle:
Create Read Update Delete, es decir, operaciones de
inserción, selección, actualización [ó modificación] y
eliminación de datos de una tabla en una base de datos, para
ello utilizaremos lenguaje SQL (Structured Query Language).
Anteriormente visualizamos la creación de una base de datos
junto con una tabla y su respectivo poblamiento en directo.
Veamos cómo trabaja una base de datos y luego crearemos
los formularios!
Para manipular los datos en una base de datos, la lógica es:
1. Abrimos conexión a la base de datos.
2. Establecemos el Query (Consulta SQL).
3. Ejecutamos el Query.
4. Obtenemos resultado de la ejecución.
5. Cerramos la conexión.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 34
Create
Sintaxis: INSERT INTO <NombreTabla> (campo1, campo2, …) VALUES (valor1, valor2, …) Ejemplo: INSERT INTO productos (nombre, descripcion, precio, stock) VALUES ('pilas duracell','baterias de larga duracion',2.50,40)
Read
Al igual que un “Hola mundo” que es la primera línea de código que vemos al iniciar en el
mundo de la programación, con las consultas en base de datos iniciamos con un “SELECT *
FROM <NombreTabla>”, esto quiere decir que seleccionará todos los campos que se
encuentren en la tabla definida.
Detalle importante: No es una buena práctica (Referencia: Situaciones de rendimiento), por
lo que se recomienda colocar los campos a seleccionar.
Sintaxis: SELECT <campo1>, <campo2>,<campo3>,<campoN-1>, <campoN> FROM <NombreTabla> Ejemplo: SELECT id, nombre, descripcion, precio, stock FROM productos
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 35
Update
Con el comando Update actualizaremos los datos, para ello necesitamos la respuesta a la
pregunta ¿Qué dato? O ¿Qué datos? De esta respuesta establecemos la condición necesaria.
Sintaxis: UPDATE <tabla> SET <campo1> = <nuevo valor>, <campo2> = <nuevo valor> WHERE <condición> Ejemplo 01:
UPDATE productos SET nombre='bluetooth', descripcion='sinmark v2', precio=25.70, stock=20 WHERE id=5 Ejemplo 02: UPDATE productos SET stock=100 WHERE id<15
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 36
Delete
Borraremos los datos y la pregunta al igual que en el caso de actualización: ¿Qué dato? O
¿Qué datos? Veamos!
Sintaxis: DELETE FROM <NombreTabla> WHERE <Condición> Ejemplo: DELETE FROM productos WHERE id=6
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 37
Creación de estructura [03 minutos] [Creamos las carpetas, vamos archivo por archivo]
Esta es la estructura final de nuestro pequeño tutorial:
Login [10 minutos]
Para tener un login, primero que debemos hacer es tener una tabla llamada “usuarios” con
las siguientes características:
Campo Tipo de
dato
Valor
predeterminado
¿Es clave
primaria?
¿Es
identidad?
Permitir
valores
NULL
usuarioid int Sí Sí No
email nvarchar(50) NULL No No No
_AppStart.cshtml Ahora procederemos a crear un archivo llamado “_AppStart.cshtml”, este archivo se
ejecutará al iniciar nuestra aplicación, el código que contiene es el siguiente:
@{ WebSecurity.InitializeDatabaseConnection("Razor", "usuarios", "usuarioid", "email", true); } <!DOCTYPE html> <html lang="es-pe">
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 38
<head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
Estas 3 tablas adicionales fueron generadas gracias al
archivo anterior, contienen una lógica básica en la seguridad:
Membership, que contiene la contraseña de acceso y otros
detalles, los roles de usuario, y la tabla de mezcla entre
usuarios y roles.
Carpeta account
Archivo para crear nuevas cuenta de usuario, en la raíz del proyecto crearemos una carpeta
llamada account con los siguientes archivos
new.cshtml @{ var username = ""; var password = ""; var confirmPassword = ""; var errorMessage = ""; if(!IsPost) { if(WebSecurity.IsAuthenticated){ errorMessage = String.Format("Estás actualmente logeado. (Usuario: {0})", WebSecurity.CurrentUserName); } } if(IsPost) { WebSecurity.Logout(); username = Request["username"]; password = Request["password"]; confirmPassword = Request["confirmPassword"]; if(username.IsEmpty()) { ModelState.AddError("username", "Complete el nombre de usuario"); }
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 39
if(password.IsEmpty() || confirmPassword.IsEmpty()) { ModelState.AddError("password","Complete su contraseña"); } if(password != confirmPassword) { ModelState.AddError("password", "*Debe ser la misma contraseña."); } if(!username.IsEmpty()) { if(WebSecurity.UserExists(username)) { ModelState.AddError("username","el usuario ya existe"); }else { if(ModelState.IsValid) { WebSecurity.CreateUserAndAccount(username,password,null,false); WebSecurity.Login(username, password, true); Response.Redirect("~/intro.cshtml"); } } } } } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Nuevo usuario</h1> <div style="float: left;clear: none"> <form method="post"> <fieldset> <legend>Registros</legend> <div style="clear: none;"> <label>Usuario (email):</label> <input name="username" type="text" size="50" value="" /> </div> <div> <label>Password:</label> <input type="password" name="password" id="password" size="50" value="" /> </div> <div> <label>Confirmación de Password:</label> <input type="password" name="confirmPassword" id="confirmPassword" size="50" value="" /> </div> <div> <br /> <input type="submit" value="Registrar nuevo usuario!"
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 40
size="50"/> <a href="@Href("~/index.cshtml")"><input type="button" value=" Regresar " /></a> </div> </fieldset> </form> </div> <p>@Html.ValidationSummary("Mensajes:")</p> <div style="clear: both;"> <br /> @RenderPage("~/style/footer.cshtml") </div> </body> </html>
login.cshtml
@{ var username = ""; var password = ""; var errorMessage = ""; if(IsPost){ username = Request["username"]; password = Request["password"]; if(username.IsEmpty() || password.IsEmpty()){ Response.Redirect("~/index.cshtml"); }else{ if(WebSecurity.Login(username,password,true)){ Response.Redirect("~/intro.cshtml"); }else { errorMessage = "Login was not successful."; } } } } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Login</h1> <fieldset> <form method="post"> @if(WebSecurity.IsAuthenticated){ <p>You are currently logged in as @WebSecurity.CurrentUserName. <a href="@Href("~/Logout")">Log out</a>
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 41
</p> } <p> <label for="username">Username:</label><br/> <input type="text" name="username" id="username" value="" /> </p> <p> <label for="password">Password:</label><br/> <input type="password" name="password" id="password" value="" /> </p> <p> <input type="submit" value="Submit" /> </p> <p style="color: #000">No user name? <br /> <a style="color: #000" href="@Href("~/account/new.cshtml")"> >>Register<<</a></p> <p style="color: #000"> <a style="color: #000" href="@Href("~/index.cshtml")">Regresa al inicio</a></p> </form> </fieldset> <p> @if(errorMessage != ""){ <span class="errorMessage">@errorMessage</span> } </p> @RenderPage("~/style/footer.cshtml") </body> </html>
logout.cshtml
@{ WebSecurity.Logout(); Response.Redirect("~/index.cshtml"); }
Carpeta crud
Debemos tener nuestra base de datos creada y con algunos datos ingresos como en el
ejemplo antes mostrado.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 42
read.cshtml
@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } var db = Database.Open("Razor"); var selectQueryString = "SELECT * FROM productos ORDER BY id"; db.Close(); } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("../style/header.cshtml") <body> <div id="contenido"> <h1>Listando Productos</h1> <form action="create.cshtml"> <button onclick="">Agregar nuevo producto</button> </form> <br /> <table> <thead> <tr> <th>Id</th> <th>Producto</th> <th>Descripcion</th> <th>Precio</th> <th>Stock</th> <th>Operaciones</th> </tr> </thead> <tbody> @foreach(var row in db.Query(selectQueryString)){ <tr> <td>@row.id</td> <td>@row.nombre</td> <td>@row.descripcion</td> <td>@row.precio</td> <td>@row.stock</td> <td><a class="enlace" href="@Href("~/crud/update.cshtml",row.id)">Editar</a> | <a class="enlace" href="@Href("~/crud/delete.cshtml", row.id)">Eliminar</a></td> </tr> }
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 43
</tbody> </table> </div> @RenderPage("/style/footer.cshtml") </body> </html>
create.cshtml
@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } // Abrimos conexión a base de datos var db = Database.Open("Razor"); var titulo = "Agregando nuevo producto"; // Recibimos las variables var nombre = Request["nombre"]; var descripcion = Request["descripcion"]; var precio = Request["precio"]; var stock = Request["stock"]; // Si se ha recargado la página if (IsPost) { // Leemos el nombre del producto nombre = Request["nombre"]; // Validamos que contenga datos if (nombre.IsEmpty()) { ModelState.AddError("nombre", "Se necesita el nombre del producto."); } descripcion = Request["descripcion"]; if (descripcion.IsEmpty()) { ModelState.AddError("descripcion", "Se necesita la descripcion del producto."); } stock = Request["stock"]; if (stock.IsEmpty()) { ModelState.AddError("stock", "Se necesita el stock del producto."); }
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 44
precio = Request["precio"]; if (precio.IsEmpty()) { ModelState.AddError("precio", "Se necesita el precio del producto."); } if(ModelState.IsValid) { // Establecemos la consulta de inserción. var insertQuery = "INSERT INTO Productos (nombre, descripcion, precio, stock) " + "VALUES (@0, @1, @2, @3)"; db.Execute(insertQuery, nombre, descripcion, precio.AsFloat(), stock.AsInt()); // Mostramos la página que contiene la lista de productos. Response.Redirect(@Href("~/crud/read.cshtml")); db.Close(); } } } <!DOCTYPE html> <html> @RenderPage("../style/header.cshtml") <body> <h1>@titulo</h1> <div style="float: left;clear: none"> <form method="post" action=""> <fieldset> <legend>Registros</legend> <div style="clear: none;"> <label>Nombre:</label> <input name="nombre" type="text" size="50" value="@nombre" /> </div> <div> <label>Descripcion:</label> <input name="descripcion" type="text" size="50" value="@descripcion" /> </div> <div> <label>Precio:</label> <input name="precio" type="text" size="50" value="@precio" /> </div> <div> <label>Stock:</label> <input name="stock" type="text" size="50" value="@stock" /> </div> <div> <br /> @if ( Roles.IsUserInRole("master")) { <input type="submit" value=" Registrar nuevo producto! " size="50"/>
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 45
}else{ <input type="submit" value=" Registrar nuevo producto! " disabled="disabled" size="50"/> } <a href="@Href("~/crud/read.cshtml")"><input type="button" value=" Regresar " /></a> </div> </fieldset> </form> </div> <p>@Html.ValidationSummary("Errors encontrados:")</p> </div> <div style="clear: both;"> <br /> @RenderPage("~/style/footer.cshtml") </div> </body> </html>
update.cshtml
@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } var db = Database.Open("Razor"); var consulta = "SELECT * FROM productos WHERE id=@0"; var productoid = UrlData[0]; if (productoid.IsEmpty()) { Response.Redirect(@Href("~/crud/read.cshtml")); } var row = db.QuerySingle(consulta, productoid); var nombre = row.nombre; var descripcion = row.descripcion; var precio = row.precio; var stock = row.stock; if (IsPost) {
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 46
// Leemos el nombre del producto nombre = Request["nombre"]; if (String.IsNullOrEmpty(nombre)) { ModelState.AddError("nombre", "Se necesita el nombre del producto."); } descripcion = Request["descripcion"]; if (String.IsNullOrEmpty(descripcion)) { ModelState.AddError("descripcion", "Se necesita la descripcion del producto."); } stock = Request["stock"]; if (String.IsNullOrEmpty(stock)) { ModelState.AddError("stock", "Se necesita el stock del producto."); } precio = Request["precio"]; if (String.IsNullOrEmpty(precio)) { ModelState.AddError("precio", "Se necesita el precio del producto."); } if(ModelState.IsValid) { var updateQueryString = "UPDATE productos SET nombre=@0, descripcion=@1, precio=@2, stock=@3 WHERE id=@4" ; db.Execute(updateQueryString, nombre, descripcion, precio, stock, productoid); Response.Redirect(@Href("~/crud/read.cshtml")); } } } <!DOCTYPE html> <html> @RenderPage("../style/header.cshtml") <body> <h1>Editando producto</h1> <p>@Html.ValidationSummary("Errors encontrados:")</p> <form method="post" action=""> <fieldset> <legend>Actualización de producto</legend> <div> <label>Nombre:</label> <input name="nombre" type="text" size="50" value="@nombre" /> </div> <div> <label>Descripcion:</label> <input name="descripcion" type="text" size="50" value="@descripcion"
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 47
/> </div> <div> <label>Precio:</label> <input name="precio" type="text" size="50" value="@precio" /> </div> <div> <label>Stock:</label> <input name="stock" type="text" size="50" value="@stock" /> </div> <div> <br /> @if ( Roles.IsUserInRole("master")) { <input type="submit" value=" Guardar edición " size="50"/> }else{ <input type="submit" value=" Guardar edición " disabled="disabled" size="50"/> } <a href="@Href("~/crud/read.cshtml")"><input type="button" value=" Regresar " /></a> </div> </fieldset> </form> @RenderPage("~/style/footer.cshtml") </body> </html>
delete.cshtml
@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } var db = Database.Open("Razor"); var productoid = UrlData[0]; if (productoid.IsEmpty()) { Response.Redirect(@Href("~/crud/read.cshtml")); } var producto = db.QuerySingle("SELECT * FROM productos WHERE ID = @0", productoid);
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 48
if( IsPost && !productoid.IsEmpty()) { var deleteQueryString = "DELETE FROM productos WHERE Id=@0"; db.Execute(deleteQueryString, productoid); Response.Redirect("~/crud/read.cshtml"); } } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("../style/header.cshtml") <body> <h1>Borrando productos - Confirmación</h1> <form method="post" action=""> <h3>¿Estás seguro que deseas borrar el siguiente producto?</h3> <fieldset> <p> Nombre: @producto.nombre <br /> Descripcion: @producto.descripcion <br /> Precio: @producto.precio <br /> Stock: @producto.stock <br /> </p> @if ( Roles.IsUserInRole("master")) { <input type="submit" value=" SI " /> }else { <input type="submit" value=" SI " disabled="disabled" /> } <a href="@Href("~/crud/read.cshtml")"><input type="button" value=" NO " /></a> </fieldset> </form> @RenderPage("~/style/footer.cshtml") </body> </html>
Como verán, se encuentran con botones deshabilitados, los
cuales ejecutan los comandos necesarios para interactuar
con la base de datos, lo que se tiene que hacer es crear un
rol llamado “master”
Se requiere haber creado un usuario antes, el cual será del
tipo administrador, en este caso lo definimos como “master”,
ir a la tabla siguiente y actualizarlos datos del UuserId con el
RoleId.
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 49
Carpeta reports
pricereport.cshtml @{ var db = Database.Open("Razor"); var data = db.Query("SELECT nombre, precio FROM productos"); var myChart = new Chart(width: 600, height: 400, theme:ChartTheme.Green) .AddTitle("PRECIOS de los productos de la tienda Razor") .DataBindTable(dataSource: data, xField: "nombre") .Write(); }
stockreport.cshtml @{ var db = Database.Open("Razor"); var data = db.Query("SELECT nombre, stock FROM productos"); var myChart = new Chart(width: 600, height: 400) .AddTitle("STOCK de los productos de la tienda Razor") .DataBindTable(dataSource: data, xField: "nombre") .Write(); }
reports.cshtml En la raíz del proyecto va este archivo con el siguiente código:
<!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Reportes Gráficos</h1> <form method="post"> <fieldset> <legend>Reportando</legend> Seleccione tipo de reporte: <select name="opcionreporte"> <option value="stock">Stock de productos</option> <option value="precio">Precio de productos</option> </select> <input type="submit" onclick="" value="Obtener Reporte" > </fieldset> </form> @{ if(IsPost) { var or = Request["opcionreporte"]; if(or=="stock")
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 50
{ <p>El reporte es:</p> <img src="/reports/stockreport.cshtml" alt="grafico" /> } if(or=="precio") { <p>El reporte es:</p> <img src="/reports/pricereport.cshtml" alt="grafico" /> } } } @RenderPage("~/style/footer.cshtml") </body> </html>
error.cshtml Este archivo, también va dentro de la raíz del proyecto.
<!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Error 404</h1> <fieldset> <legend>Not Found</legend> <p>Lo sentimos, la página solicitada no existe</p> </fieldset> @RenderPage("/style/footer.cshtml") </body> </html>
web.config Al igual que el anterior archivo, también va dentro de la raíz.
<?xml version="1.0" encoding="utf-8"?> <configuration> <system.web> <compilation debug="false" targetFramework="4.0" /> <customErrors mode="On" defaultRedirect="error.cshtml" /> </system.web> </configuration>
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 51
Finalizando el tutorial
Para publicar el sitio creado en internet necesitamos tener un hosting, creamos una cuenta
trial de 30 días gratis (teniendo en cuenta que luego dicha cuenta deberá ser eliminada
manualmente antes que los 30 días terminen, para evitar cobros por parte del servidor
hacia ustedes). En el siguiente enlace: http://hosting.parking.ru/webmatrix.aspx
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 52
En la sección de Services, nos dirigimos hacia Web, desplegando los sub-items que hay
dentro, en la sección derecha clickeamos en Get XML for WeMatrix
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 53
Ahora, en nuestra
herramienta, vamos a la
opción de publicar, ubicada
en la parte superior del
menú principal:
Aparecerán las siguientes opciones:
Luego de haber seleccionado el archivo que descargamos con anterioridad, se mostrará la
siguiente ventana:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 54
Continuamos con la tarea de publicación:
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 55
En la parte inferior de WebMatrix, encontramos el avance de la publicación.
Al final de la publicación, la herramienta nos dará un Log (archivo que guarda todo tipo de
movimiento, indicando fechas/horas, y tareas efectuadas principalmente, puede ser vía
texto plano o mediante algún tipo de formato especial como HTML. NO confundir con meta-
dato)
Recursos Extras
Microsoft Virtual Academy http://www.microsoftvirtualacademy.com
Elementos HTML https://developer.mozilla.org/es/docs/HTML/Elemento
Comunidad Académica en Tecnologías Microsoft “UPAO.net“
http://www.facebook.com/UPAO.net
IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO
Comunidades Microsoft Perú http://www.facebook.com/CMSPeru
Microsoft Geeks http://geeks.ms
Blog de Rodrígo Díaz Concha, Microsoft MVP ASP.net/Silverlight
http://rdiazconcha.com
Blog de Gonzalo “Chalalo” Pérez Correa, Microsoft MVP ASP/ASP.NET http://chalalo.cl
Blog de Peter Concha – MSP de Ecuador http://ptrconcha.wordpress.com/
W3Schools http://www.w3schools.com/aspnet/razor_intro.asp
Mike's web log
http://www.mikepope.com/blog/displayblog.aspx?category=webmatrix
Tutorial Inicial de ASP.net http://www.asp.net/web-pages/content-guide
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Página 56
Palabras Finales
Gracias por su paciencia, dedicación y esfuerzo, espero que hayan aprendido cómo se
trabaja una aplicación en la web, ahora es su turno de compartir el conocimiento en su
grupo de amigos.
Internet es mucho más que ratos de juego y ocio en las redes sociales, éstas mismas tienen
gran material de cientos, miles y millones de cibernautas que también van compartiendo
conocimiento, el punto clave es buscar y de preferencia en inglés, si desconoces el inglés, no
hay problema, en internet también se aprende idiomas.
Siempre busquen, investiguen más allá de lo que las clases pueden llegar, no veamos la
competencia entre nuestros entornos, la verdadera competencia radica en superarse a uno
mismo día a día.
En Facebook existen grupos de programación bastante buenos tanto en inglés como en
español, en Youtube hay gran cantidad de tutoriales desde muy básicos hasta niveles
increíbles, en Twitter, por medio de #hastags encuentras información en directo y las
personas responden con bastante respeto.
Y bueno, ya estando en el final de la redacción del tutorial, los invito a participar de la
comunidad en tecnologías Microsoft UPAO.net y/o formar parte de la IEEE Computer Society
UPAO, del mismo modo los invito visitar un proyecto blogero: www.codesinapsys.com y sin
nada más que agregar me despido hasta una próxima ocasión.
¡Saludos!
Atte. Fredy Rubén Guibert Díaz.
Fundador de la Comunidad en Tecnologías Microsoft UPAO.net | Presidente IEEE Computer
Society UPAO
PD: Si quedaron dudas pendientes, un correo a: [email protected] ó
[email protected] y desean elegir una opción más simple: envíen un tweet @fredyfx