Crear una aplicación Web desde Cero (VB y CSharp)- Part I

Antes de comenzar con la explicación correcta debemos tener bien claros los conceptos siguientes:



  • .Net Framework
  • ASP.net
  • Visual Basic
  • Visual C#
  • Base de Datos
  • SQL Server 2005 Express Editions
  • HTML
  • Programación Orientada a Objeto

Que fastidio porque tengo que buscar esos conceptos y no los explico?? Pues la respuesta es muy simple, con esos conceptos podrás entender de mejor manera y más rápido lo que se intenta plasmar en este mini-tutorial, además si te lo explico dejaría todo al facilismo y no mostrarías el interés en aprender.


Ahora a seleccionar el entorno donde desarrollaremos nuestro primer aplicativo web así pueden descargar desde la web de Microsoft el Visual Web Developer 2008 Express es totalmente gratuito y no pagaran por licencias J, si lo desean pueden usar Visual Studio 2005 o Visual Studio 2008 (también versiones anteriores pero no queremos ir atrás o sí?), Yo estaré usando el Visual Studio 2008 Team Suite que para efectos de este Tutorial no hay diferencias al crear un Proyecto Web.


Cual será nuestro plan de Trabajo dentro de este tutorial y de futuros tutoriales que publicare a partir de este:



  1. Crearemos un Aplicación Web
  2. Crearemos una página maestra.
  3. Consultaremos datos de una base de datos de prueba (AdventureWorks)
  4. Insertar y Actualizar datos.
  5. Uso del SiteMap y Menús (Sera un articulo Aparte)
  6. Uso de Controles de Validación (Sera un articulo Aparte)
  7. Uso de la Membrecía (Sera un articulo Aparte)
  8. Temas y Skins (Sera un articulo Aparte)
  9. LINQ (Sera un articulo Aparte)
  10. AJAX (Sera un articulo Aparte)
  11. Reportes: Invocacion a un reporte de Reporting Services
  12. Reportes: Invocacion a un reporte de Crystal Reports

Todos estos puntos se estará realizando con los siguientes lenguajes de programación Visual Basic y Visual C# para que el tutorial sea justo lo que necesita para empezar y no se vea limitado por el lenguaje a utilizar. Cabe destacar que el punto 9 que es LINQ es utilizando únicamente el .net Framework 3.5 los demás pueden usarse con .net Framework 2.0 y 3.5 sin problemas.


Arrancaremos con el Punto 1: Crear una Aplicación Web



Primero que nada debemos abrir nuestro Visual Web Developer y nos vamos al menú Archivo->Nuevo->Sitio Web luego les debe aparecer una pantalla de la siguiente manera:


clip_image002


En lo que crean el proyecto verán la página Default.aspx en el “Tags Código” es decir el visor de Visual Studio o de Visual Web Developer se lo mostrara en Código HTML


Formas de Visualizar el formulario Web

· Diseño: En esta Vista observaran el formulario en blanco, aquí arrojaran los controles a utilizar


· Dividir: Podrán ver el código HTML y la Pagina natural al mismo tiempo


· Código: Podrán ver solo el código HTML, esto no quiere decir que verán el código en el lenguaje que seleccionaron.


Imagen del Tag:


clip_image004


Quizás estén algo confundidos con el Tag Código de la Pagina con el Código que iremos desarrollando en la pagina y no es para menos a muchos le ha pasado eso así que no te sientas mal, a medida que te familiarice con la herramienta te reirás de estos primeros momentos, solo te recuerdo ASP.net tiene la posibilidad de tener el código del lenguaje que seleccionaste en otro archivo o mejor dicho en la mayoría de los casos es así pero existen personas que para no deja su modo de trabajar en ASP deciden incrustar el código sea VB o C# dentro del Código en HTML.


Ubicarnos dentro del Entorno de Trabajo


Ok antes de seguir debemos saber dónde estamos ubicados, fíjense en la imagen siguiente:


clip_image006


Ese es nuestro marco de Trabajo allí tenemos a la vista lo siguientes elementos importantes:


1. Web Forms: Esta demás decir que es el lugar donde arrojaremos nuestros controles y empezar a jugar con el código.


2. Explorador de Soluciones: lugar donde estarán nuestros Proyectos, en el caso que no lo lleguemos a ver podremos darle a la combinación de teclas: Ctrl.+Alt+L


a. Nuestro Proyecto: Allí estarán todos los archivos a utilizar en nuestra aplicación, es decir, el diseño de los formularios, los archivos de código, las referencias que se hagan a cierto Espacios de Nombres, etc., etc.


3. Barra de Herramientas: Lugar donde veremos todos los controles a utilizar, ya sean los propios de Visual Studio o los que encontremos en la Web. Combinación de teclas: Ctrl.+Alt+X


4. La ventana de Propiedades: Allí definiremos las características que tendrá los controles y el formulario. Combinación de teclas: F4


5. Explorador de Servidores: Allí veremos y podremos colocar los Servidores de Base de Datos con lo que estaremos trabajando. Combinación de teclas: Ctrl.+Alt+S


6. Lista de Errores: Aquí podrás observar los errores, advertencias o información que ocurra mientras realizas las compilaciones del tu aplicación web. Combinación de teclas: Ctrl.+W


Teniendo claro nuestro entorno de trabajo, arrojaremos tres simples controles que serán:



















Control Nombre Texto
Label lblmensaje  
TextBox txtmensaje  
Button btnmensaje Mostrar Mensaje


Para cambiar el Identificador del control basta con seleccionar el Control e ir a las propiedades y en la propiedad ID le colocaran el nombre arriba descrito. La idea es arrancar con un simple “Hola mundo” o lo que deseen mostrar J con la intención de validar que entendemos el entorno y que cada control que arrojemos al formulario web tengan un identificador único de esta manera al momento de referenciarlo desde el código no tengamos ningún inconveniente.


Nuestro código html dentro del tag de Body quedara de esta manera:



   1: <body>
   2:     <form id=»form1″ runat=»server»>
   3:         <div>
   4:             <asp:Label ID=»lblmensaje» runat=»server» Text=»»></asp:Label>
   5:             <asp:TextBox ID=»txtmensaje» runat=»server»></asp:TextBox>
   6:             <asp:Button ID=»btnmensaje» runat=»server» Text=»Mostrar Mensaje»/>
   7:         </div>
   8:     </form>
   9: </body>
  10:  

Notese que en la página los controles están desordenado asi que si queremos que se vea mas arreglado debemos utilizar hojas de estilos (css) o sencillamente insertar tablas y dentro de ellas agregar los controles.


Ahora le damos doble click al botón y le agregaremos el siguiente código:


Visual Basic:




   1: Protected Sub btnmensaje_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnmensaje.Click
   2:       lblmensaje.Text = txtmensaje.Text
   3: End Sub
   4:  


Visual C#:




   1: protected void btnmensaje_Click(object sender, EventArgs e)
   2: {
   3:     lblmensaje.Text = txtmensaje.Text;
   4: }
   5:  

Notese la diferencia entre los dos lenguajes en C# es muy similar a C++ por la utilizacion de los punto y comas y llaves. Recomendación al momento de asignar el identificador de los controles traten de tener un estandar y una nomenclatura para hacer mas facil su lectura y futuras modificaciones, es decir si lo escribes en minusculas mantenlo de esa manera y no tendras problemas en el codigo ya que en C# el entiende minusculas y mayusculas de manera diferente, ejemplo txtFoto no es igual txtfoto mientras que en visual basic si puede entender que son los mismos. En cuanto a la nomenclatura es si el control es un Label utilice lbl y si un textbox use txt antes del nombre que les quieran asignar… de esta manera se evitan dolores de cabezas de identificadores repetidos, de igual pasa en las declaraciones de variables J


Ademas de las diferencias de lenguaje quiero resaltar que al momento de darle doble click con el mouse al boton nos hemos redireccionado a una hoja de codigo aparte y esas lineas de codigo escrita es lo que dispara el evento Click del Boton, es decir, que al momento de darle click al boton la pagina leera lo que esta en el TextBox (txtmensaje) y lo escribira en el Label (lblmensaje). Asi que probemos nuestra aplicación presionando F5.


Al ser la primera ves que compilamos nuestra aplicación el Visual Studio o Visual Web Developer necesita escribir un Tag en nuestro archivo de configuracion llamado web.config por lo que nos mostrara el siguiente mensaje, el cual daremos al boton Aceptar


clip_image008


Quieres saber que es el Web.Config pues entra en la definición que da WikiPedia


Con esto terminamos el Punto 1, por lo que estén atentos al resto de los puntos que estaré publicando por este medio.