Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tutorial Microsoft WebMatrix

11,168 views

Published on

El presente tutorial fue expuesto en el IX Congreso Internacional de Ingeniería de Sistemas, Software y Telecomunicaciones de la Universidad Privada Antenor Orrego, espero sea de vuestra utilidad.

Published in: Technology

Tutorial Microsoft WebMatrix

  1. 1. Correo: Fredy.Guibert@studentpartner.com | Fredy.Guibert@ieee.org Twitter: @fredyfxComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 1http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  2. 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.................................................................................................................... 37Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 2http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  3. 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 ....................................................................................................... 56Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 3http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  4. 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 Página 4http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  5. 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 Página 5http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  6. 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 Página 6http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  7. 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 Página 7http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  8. 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 dependenciasComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 8http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  9. 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ñadidosComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 9http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  10. 10. Y procederemos con la instalación!Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 10http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  11. 11. Aceptamos los términos y condiciones de uso Esperamos mientras se ejecuta la descarga de los componentes antes mencionadosComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 11http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  12. 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 Página 12http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  13. 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 Página 13http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  14. 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 Página 14http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  15. 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> Es uno de los elementos más importantes del HTML. Es el encargado de crear </a> 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 de "division" - división. Sirve para crear secciones o agrupar contenidos. </div> <fieldset> El elemento fieldset (grupo de campos) permite organizar en grupos los /fieldset> campos de un formulario. <legend> El elemento <legend> (leyenda) crea un título para un grupos los campos </legend> (<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 Página 15http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  16. 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 Página 16http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  17. 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 Página 17http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  18. 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 Página 18http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  19. 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 Página 19http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  20. 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 Página 20http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  21. 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 Razor Sintaxis comprendes mejor la lógica de la programación llegando a ser altamente productivos. Con mucho esfuerzo, dedicación y constante ASP.net 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 .Net Framework 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.Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 21http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  22. 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 Página 22http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  23. 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 Página 23http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  24. 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 Página 24http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  25. 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 Página 25http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  26. 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 Página 26http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  27. 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 Página 27http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  28. 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 Página 28http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  29. 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 Página 29http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  30. 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 Página 30http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  31. 31. Primero seleccionamos “Base Segundo, seleccionamos base de datos de SQL Server CE, de Datos” en el panel ubicado para que aparezca MySQL, se requiere un conector en la parte inferior izquierda 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 Página 31http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  32. 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 Página 32http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  33. 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 Página 33http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  34. 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 productosComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 34http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  35. 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<15Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 35http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  36. 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=6Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 36http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  37. 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 Valor ¿Es clave ¿Es Permitir dato predeterminado primaria? identidad? 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 Página 37http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  38. 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 Página 38http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  39. 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 Página 39http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  40. 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 Página 40http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  41. 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 Página 41http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  42. 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 Página 42http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  43. 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 Página 43http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  44. 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 Página 44http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  45. 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 Página 45http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  46. 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 Página 46http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  47. 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 Página 47http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  48. 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 Página 48http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  49. 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 Página 49http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  50. 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 Página 50http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  51. 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.aspxComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 51http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  52. 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 WeMatrixComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 52http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  53. 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 Página 53http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  54. 54. Continuamos con la tarea de publicación:Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 54http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  55. 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  Mikes web log http://www.mikepope.com/blog/displayblog.aspx?category=webmatrix  Tutorial Inicial de ASP.net http://www.asp.net/web-pages/content-guideComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 55http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
  56. 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: Fredy.Guibert@studentpartner.com ó Fredy.Guibert@ieee.org y desean elegir una opción más simple: envíen un tweet @fredyfxComunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO Página 56http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

×