Tutorialmswebmatrixv4 130323164229 Phpapp02

Correo: Fredy.Guibert@studentpartner.com | Fredy.Guibert@ieee.
org Twitter: @fredyfx
Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Pgina 1
Tutorial Microsoft WebMatrix

Contenido
Trminos y Condiciones de uso .................................................................................... 4 Previo a la Instalacin ................................................................................................. 4 Advertencia............................................................................................................. 4 Instalacin .............................................................................................................. 5 Introduccin a Microsoft WebMatrix ............................................................................ 12 Caractersticas ......................................................................................................... 12 Elementos de la Interfaz ............................................................................................ 13 Iniciando el tutorial ................................................................................................... 15 HTML Bsico ......................................................................................................... 15 Hojas de estilo ...................................................................................................... 16 Sintaxis Razor ....................................................................................................... 21 Creando una Interfaz consistente............................................................................. 22 Header .............................................................................................................. 23 Footer ............................................................................................................... 25 Programacin bsica .............................................................................................. 25 intro.cshtml........................................................................................................ 25 Formularios ........................................................................................................... 28 form.cshtml ....................................................................................................... 28 Creacin de Base de datos ...................................................................................... 30 Operaciones CRUD ................................................................................................. 33 Create ............................................................................................................... 34 Read ................................................................................................................. 34 Update .............................................................................................................. 35 Delete ............................................................................................................... 36 Creacin de estructura ........................................................................................... 37 Login.................................................................................................................... 37
Pgina 2
_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
Pgina 3
Trminos y Condiciones de uso

[02 minutos] Duracin del tutorial: 1 Hora y 45 Minutos, 105 minutos en total distribuidos en: 15 de introduccin, 80 de programacin y 10 de preguntas/respuestas. Si faltase tiempo, con gusto las dudas que tengan sern respondidas mediante correo electrnico o va 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 navegacin en internet y reproduccin de msica. Las preguntas se realizarn al final; se sugiere anotar cualquier tipo de duda para luego hacerla saber; en caso falte tiempo para la resolucin de dudas, va correo electrnico obtendrn respuestas.
Previo a la Instalacin
[02 minutos] Actualmente sus computadoras ya se encuentran configuradas con todos los elementos que utilizaremos, como vern en la imagen adjunta, tenemos instalado algunos mdulos, como el soporte para PHP, s, tal y como estn pensando: Pero PHP no solo corre sobre un apache? Tambin corre sobre Internet Information Services (ms conocido como IIS, servidor web de Microsoft)
Advertencia
[01 minuto] Si tambin programan utilizando un servidor local como apache (con netbeans / eclipse / wamp / xampp), tendrn 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 opcin: nos dirigimos a Panel de control -> Programas -> Programas y caractersticas -> Activar o desactivar las caractersticas de Windows. Desmarcamos todo Internet Information Services, si requiere reinciar la computadora, se reinicia y listo!
Pgina 4
Instalacin
[00 minutos] [Cada quien ya tiene instalado en casa] Para quienes no dispongan de Microsoft WebMatrix en sus ordenadores, podrn descargarlo en el siguiente enlace: http://go.microsoft.com/fwlink/?LinkID=205867
Una vez descargado, procedemos a ejecutar:
Pgina 5
Debemos tener en cuenta los requisitos que necesita Microsoft WebMatrix.
Una vez aceptado los requisitos, proceder a descargarlos.
Pgina 6
Al final obtendremos un reporte sobre todo lo instalado en nuestra computadora.
Ahora tenemos instalado Microsoft WebMatrix, podemos agregar componentes adicionales:
Pgina 7
Viene lo interesante, instalaremos un mdulo de soporte de PHP, para ello, se busca primero PHP y luego clickeamos en el botn agregar .
De manera automtica, se agregarn las dependencias
Pgina 8
Debemos tener en cuenta que tambin se necesitar el conector MySQL/Net; y si todava 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, tendrs el manejo via consola y via WebMatrix nicamente.
Ahora procedemos a verificar los elementos aadidos
Pgina 9
Y procederemos con la instalacin!
Pgina 10
Aceptamos los trminos y condiciones de uso
Esperamos mientras se ejecuta la descarga de los componentes antes mencionados
Pgina 11
Listo, tenemos completamente preparado nuestro entorno de trabajo
Introduccin 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 interaccin con aplicaciones Open Source tales como sistemas de gestores de contenido como Wordpress, Drupal, entre otros.
Caractersticas
[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, tambin soporta conexin con MySQL [Requiere un conector adicional]. Anlisis de SEO y Rendimiento.
Pgina 12
Elementos de la Interfaz
[05 minutos] La intefaz que utiliza WebMatrix, es sencilla permitiendo una fcil navegacin, 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 prcticamente en 4 bloques: Men [Seccin verde] Elementos de trabajo [Seccin naranja] Contenido [Seccin negra] Panel [Seccin azul]
Pgina 13
A continuacin se detallarn las interfaces: Nos encontramos con las solicitudes, es decir, lo que pasa a travs 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 pginas sern mostradas primero.
Archivos, portapapeles, edicin, vistas, iniciar visual studio, cargar e instalar extensiones, son las opciones que encontramos en esta seccin.
Aqu podemos crear nuevas bases de datos tanto en SQL Server CE como en MySQL [requiere extensin], del mismo modo, crear tablas, modificar las conexiones, crear consultas, vistas, procedimientos almacenados y realizar una migracin 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 aceptacin tendr nuestra web con los bots de los buscadores.
Pgina 14
Iniciando el tutorial
[80 minutos] El presente tutorial busca dar un panorama general sobre la programacin 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 grficos. 1. [10 2. [10 3. [10 4. [05 5. [05 6. [07 7. [10 8. [10 9. [03 10. [10 minutos] minutos] minutos] minutos] minutos] minutos] minutos] minutos] minutos] minutos] Conociendo HTML Estilo haciendo uso de CSS a los bloques. Sintaxis Razor Creacin de una interfaz consistente. Programacin bsica. Formularios: envo de variables mtodos GET y POST Creacin de Base de Datos: Tabla productos. Operaciones CRUD [Create Read Update Delete]. Creacin de estructura del proyecto. Login de acceso al sistema -> Sesiones.
HTML Bsico
[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, tambin denominados parntesis 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 Descripcin Es uno de los elementos ms importantes del HTML. Es el encargado de crear los tpicos vnculos hipertextuales. Puede actuar como origen y como destino de estos enlaces. Adems son muy apreciadas sus capacidades dinmicas. br de "break" - ruptura. Fuerza al ruptura (o salto) de linea. div de "division" - divisin. Sirve para crear secciones o agrupar contenidos. El elemento fieldset (grupo de campos) permite organizar en grupos los campos de un formulario. El elemento <legend> (leyenda) crea un ttulo para un grupos los campos (<fieldset>) de un formulario. El elemento p (prrafo) es el apropiado para distribuir el texto en prrafos. El elemento input (<input>) es usado para crear controles interactivos para formularios basados en la web. Esta etiqueta inserta una imagen.
<a> </a> <br /> <div> </div>

<fieldset> /fieldset> <legend> </legend> <p></p> <input> <img>
Pgina 15
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 caractersticas de los elementos HTML.
*El cdigo de nuestro CSS se encuentra lneas abajo.
Otra caracterstica de Microsoft WebMatrix en la edicin de hojas de estilo es su sencillez para la definicin de color por ejemplo, adems de tener intellisense activado para la rpida bsqueda de propiedades, te especifica en la descripcin de cada elemento.
Pgina 16
A continuacin presentamos el cdigo 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;
Pgina 17
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; }
Pgina 18
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 {
Pgina 19
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;
Pgina 20
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 ms fcil de aprender, de tal manera que comprendes mejor la lgica de la programacin llegando a ser altamente productivos. Con mucho esfuerzo, dedicacin y constante prctica llegaremos a ser Expertos en desarrollo web! A pesar de que esta sintaxis es muy simple de usar, su relacin familiar con ASP.NET y el framework .NET significa que a medida que los sitios que desarrollaremos se vuelven ms 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 cdigo entre llaves. Dentro de un bloque, se termina cada instruccin de cdigo con un punto y coma, excepto si est mezclado con cdigo HTML. Se colocan valores literales entre comillas. El cdigo es sensitivo como en C#. Gran parte de su codificacin implica objetos. Los espacios en blanco no afectan el funcionamiento.
Razor Sintaxis ASP.net .Net Framework
Pgina 21
 @{ var numero = 7; } @{ var saludo = "Greetings World, we are programmers!"; }  <p>El valor de su cuenta es: @numero </p> <p>Su mensaje : @mensaje</p>  @{ 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 pgina sin la necesidad de tener todo en cada una? Seamos ms productivos, ahorremos tiempo y reutilicemos cdigo! Dentro de la carpeta style, creamos 3 archivo: header.cshtml slider.cshtml footer.cshtml StyleSheet.css Todas las pginas que veremos en este tutorial tendrn el siguiente esquema:
Pgina 22
Header
Nuestro Header contiene un pequeo 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 Ingeniera de Software, Sistemas de Informacin 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 |
Pgina 23
<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 Ingeniera de Software, Sistemas de Informacin 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:
Pgina 24
Detalle importante: La utilizacin de una referencia @Href("~/intro.cshtml") crea una URL del tipo: http://<server>/intro.cshtml es muy til ya que se convierte simple nuestra organizacin de archivos.
Footer
<div class="footer"> Tutorial Desarrollo de Aplicaciones Web con Microsoft WebMatrix Todos los derechos reservados - 2012 </div> El resultado:
Programacin bsica
[05 minutos] A continuacin se presenta el archivo intro.cshtml, el cual se crear en la raz 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;
Pgina 25
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 mltiples var weekday = "Miercoles"; var greeting = ""; switch(weekday) { case "Lunes": greeting = "Iniciamos la semana con todo el power!"; break; case "Martes": greeting = "Segundo da, vamos avanzando!"; break; case "Miercoles": greeting = "Da de tutoriales!"; break; default: greeting = "Algn otro da 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> } }
Pgina 26
//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:
Pgina 27
Formularios
[07 minutos] [Mtodos POST y GET] En la programacin de aplicaciones web, tenemos que tener en cuenta que son envos de peticiones http al servidor, por lo que se utilizan POST y GET, ambos envan las variables, a diferencian de GET que hace uso del paso de las mismas va 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 cdigo:
Pgina 28
@{ /* 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> Preprate, 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 numricos</p> }else{
Pgina 29
<b>@resultado</b> } } </form> </fieldset> </div> @RenderPage("/style/footer.cshtml") </body> </html> Dando como resultado:
Haciendo uso de GET
Creacin de Base de datos

[10 minutos] [Haciendo uso de SQL Server CE] En esta ocasin creamos una base de datos llamada Tutorial haciendo uso de SQL Server Compact Edition, del siguiente modo:
Pgina 30
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 botn seleccionado Nueva tabla
En la creacin de tablas, debemos tener siempre en cuenta cules sern nuestras llaves primarias, y si sern autogeneradas (1, 2, 3, 4) por la misma base de datos.
Pgina 31
Como vern en las imgenes con ayuda de un zoom, se define el nombre del campo de la tabla, luego se selecciona el tipo de dato, despus 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, descripcin, precio, stock .
Ahora a poblar la tabla! Para ello nos dirigimos hacia Datos, y bueno, insertamos datos:
Pgina 32
Operaciones CRUD
[10 minutos] Se denominan operaciones CRUD por el siguiente detalle: Create Read Update Delete, es decir, operaciones de insercin, seleccin, actualizacin [ modificacin] y eliminacin de datos de una tabla en una base de datos, para ello utilizaremos lenguaje SQL (Structured Query Language). Anteriormente visualizamos la creacin de una base de datos junto con una tabla y su respectivo poblamiento en directo. Veamos cmo trabaja una base de datos y luego crearemos los formularios! Para manipular los datos en una base de datos, la lgica es: 1. 2. 3. 4. 5. Abrimos conexin a la base de datos. Establecemos el Query (Consulta SQL). Ejecutamos el Query. Obtenemos resultado de la ejecucin. Cerramos la conexin.
Pgina 33
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 lnea de cdigo que vemos al iniciar en el mundo de la programacin, 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 prctica (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
Pgina 34
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 condicin necesaria.
Sintaxis: UPDATE <tabla> SET <campo1> = <nuevo valor>, <campo2> = <nuevo valor> WHERE <condicin> 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
Pgina 35
Delete
Borraremos los datos y la pregunta al igual que en el caso de actualizacin: Qu dato? O Qu datos? Veamos!
Sintaxis: DELETE FROM <NombreTabla> WHERE <Condicin> Ejemplo: DELETE FROM productos WHERE id=6
Pgina 36
Creacin de estructura
[03 minutos] [Creamos las carpetas, vamos archivo por archivo] Esta es la estructura final de nuestro pequeo tutorial:
Login
[10 minutos] Para tener un login, primero que debemos hacer es tener una tabla llamada usuarios con las siguientes caractersticas:
Campo
Tipo de dato int nvarchar(50)
Valor predeterminado
Es clave primaria? S No
Es identidad? S No
usuarioid email
NULL
Permitir valores NULL No No
_AppStart.cshtml
Ahora procederemos a crear un archivo llamado _AppStart.cshtml, este archivo se ejecutar al iniciar nuestra aplicacin, el cdigo que contiene es el siguiente: @{ WebSecurity.InitializeDatabaseConnection("Razor", "usuarios", "usuarioid", "email", true); } <!DOCTYPE html> <html lang="es-pe">
Pgina 37
<head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html> Estas 3 tablas adicionales fueron generadas gracias al archivo anterior, contienen una lgica bsica en la seguridad: Membership, que contiene la contrasea 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 raz del proyecto crearemos una carpeta llamada account con los siguientes archivos
new.cshtml
@{ var var var var username = ""; password = ""; confirmPassword = ""; errorMessage = "";
if(!IsPost) { if(WebSecurity.IsAuthenticated){ errorMessage = String.Format("Ests 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"); }
Pgina 38
if(password.IsEmpty() || confirmPassword.IsEmpty()) { ModelState.AddError("password","Complete su contrasea"); } if(password != confirmPassword) { ModelState.AddError("password", "*Debe ser la misma contrasea."); } 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>Confirmacin de Password:</label> <input type="password" name="confirmPassword" id="confirmPassword" size="50" value="" /> </div> <div> <br /> <input type="submit" value="Registrar nuevo usuario!"
Pgina 39
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>
Pgina 40
</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.
Pgina 41
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> }
Pgina 42
</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 conexin 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 pgina 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."); }
Pgina 43
precio = Request["precio"]; if (precio.IsEmpty()) { ModelState.AddError("precio", "Se necesita el precio del producto."); } if(ModelState.IsValid) { // Establecemos la consulta de insercin. 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 pgina 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"/>
Pgina 44
}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 var var var nombre = row.nombre; descripcion = row.descripcion; precio = row.precio; stock = row.stock;
if (IsPost) {
Pgina 45
// 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>Actualizacin 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"
Pgina 46
/> </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 edicin " size="50"/> }else{ <input type="submit" value=" Guardar edicin " 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);
Pgina 47
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 - Confirmacin</h1> <form method="post" action=""> <h3>Ests 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=" /></a> </fieldset> </form> @RenderPage("~/style/footer.cshtml") </body> </html> Como vern, 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. NO "
Pgina 48
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 raz del proyecto va este archivo con el siguiente cdigo: <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Reportes Grficos</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")
Pgina 49
{ <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, tambin va dentro de la raz 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 pgina solicitada no existe</p> </fieldset> @RenderPage("/style/footer.cshtml") </body> </html>
web.config
Al igual que el anterior archivo, tambin va dentro de la raz. <?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>
Pgina 50
Finalizando el tutorial
Para publicar el sitio creado en internet necesitamos tener un hosting, creamos una cuenta trial de 30 das gratis (teniendo en cuenta que luego dicha cuenta deber ser eliminada manualmente antes que los 30 das terminen, para evitar cobros por parte del servidor hacia ustedes). En el siguiente enlace: http://hosting.parking.ru/webmatrix.aspx
Pgina 51
En la seccin de Services, nos dirigimos hacia Web, desplegando los sub-items que hay dentro, en la seccin derecha clickeamos en Get XML for WeMatrix
Pgina 52
Ahora, en nuestra herramienta, vamos a la opcin de publicar, ubicada en la parte superior del men principal:
Aparecern las siguientes opciones:
Luego de haber seleccionado el archivo que descargamos con anterioridad, se mostrar la siguiente ventana:
Pgina 53
Continuamos con la tarea de publicacin:
Pgina 54
En la parte inferior de WebMatrix, encontramos el avance de la publicacin.
Al final de la publicacin, la herramienta nos dar un Log (archivo que guarda todo tipo de movimiento, indicando fechas/horas, y tareas efectuadas principalmente, puede ser va texto plano o mediante algn tipo de formato especial como HTML. NO confundir con metadato)
Recursos Extras
Microsoft Virtual Academy http://www.microsoftvirtualacademy.com Elementos HTML https://developer.mozilla.org/es/docs/HTML/Elemento Comunidad Acadmica en Tecnologas 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 Rodrgo Daz Concha, Microsoft MVP ASP.net/Silverlight http://rdiazconcha.com Blog de Gonzalo Chalalo Prez 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
Pgina 55
Palabras Finales
Gracias por su paciencia, dedicacin y esfuerzo, espero que hayan aprendido cmo se trabaja una aplicacin en la web, ahora es su turno de compartir el conocimiento en su grupo de amigos. Internet es mucho ms que ratos de juego y ocio en las redes sociales, stas mismas tienen gran material de cientos, miles y millones de cibernautas que tambin van compartiendo conocimiento, el punto clave es buscar y de preferencia en ingls, si desconoces el ingls, no hay problema, en internet tambin se aprende idiomas. Siempre busquen, investiguen ms all de lo que las clases pueden llegar, no veamos la competencia entre nuestros entornos, la verdadera competencia radica en superarse a uno mismo da a da. En Facebook existen grupos de programacin bastante buenos tanto en ingls como en espaol, en Youtube hay gran cantidad de tutoriales desde muy bsicos hasta niveles increbles, en Twitter, por medio de #hastags encuentras informacin en directo y las personas responden con bastante respeto. Y bueno, ya estando en el final de la redaccin del tutorial, los invito a participar de la comunidad en tecnologas 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 ms que agregar me despido hasta una prxima ocasin. Saludos! Atte. Fredy Rubn Guibert Daz. Fundador de la Comunidad en Tecnologas 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 opcin ms simple: enven un tweet @fredyfx
Pgina 56

Tutorialmswebmatrixv4 130323164229 Phpapp02

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorialmswebmatrixv4 130323164229 Phpapp02

Încărcat de

Drepturi de autor:

Formate disponibile

Correo: Fredy.Guibert@studentpartner.com | Fredy.Guibert@ieee.

org Twitter: @fredyfx

Tutorial Microsoft WebMatrix

Trminos y Condiciones de uso

Una vez descargado, procedemos a ejecutar:

Debemos tener en cuenta los requisitos que necesita Microsoft WebMatrix.

Una vez aceptado los requisitos, proceder a descargarlos.

Al final obtendremos un reporte sobre todo lo instalado en nuestra computadora.

Ahora tenemos instalado Microsoft WebMatrix, podemos agregar componentes adicionales:

De manera automtica, se agregarn las dependencias

Ahora procedemos a verificar los elementos aadidos

Y procederemos con la instalacin!

Aceptamos los trminos y condiciones de uso

Esperamos mientras se ejecuta la descarga de los componentes antes mencionados

Listo, tenemos completamente preparado nuestro entorno de trabajo

Introduccin a Microsoft WebMatrix

<a> </a> <br /> <div> </div>

Razor Sintaxis ASP.net .Net Framework

Creando una Interfaz consistente

Haciendo uso de GET

Creacin de Base de datos

Primero seleccionamos Base de Datos en el panel ubicado en la parte inferior izquierda

INSERT INTO <NombreTabla> (campo1, campo2, ) VALUES (valor1, valor2, )

Tipo de dato int nvarchar(50)

Permitir valores NULL No No

</tbody> </table> </div> @RenderPage("/style/footer.cshtml") </body> </html>

Aparecern las siguientes opciones:

Continuamos con la tarea de publicacin:

En la parte inferior de WebMatrix, encontramos el avance de la publicacin.

S-ar putea să vă placă și