Tutorial de acceso a datos en sitio Web creado con Visual Web Developer 2005 Express y SQL Server 2005 Express

• 0- Abre el Visual Studio 2005 (o el Visual Web Developer 2005 Express)
• 1- Crea un nuevo proyecto ASP.NET (vwdTut01)
• 1.a- Elege el lenguaje a usar para el código de forma predeterminada
   
• 2- Añade un nuevo elemento
• 2.a- Elige Base de datos de SQL Server y dale el nombre vwdTut01.mdf
• 2.b- Nos avisa de que la base de datos debe estar en la carpeta App_Data, acepta
   
• 3- Crea una tabla (debes mostrar la ficha Explorador de bases de datos)
• 3.a- Usa estos campos:
  • 3.b- ID, int, Identidad
  • 3.c- Correo, nvarchar(64)
  • 3.d- Clave, nvarchar(40)
  • 3.e- Nombre, nvarchar(50)
  • 3.f- Fecha, datetime
  • 3.g- Comentarios, nvarchar(300)
• 3.h- Dale a guardar y ponle el nombre Usuarios
   
• 4- Ahora te explico cómo crear el formulario de introducción de datos.
• 4.a- En el menú Sitio Web selecciona Agregar nuevo elemento
• 4.b- Selecciona WebForms y dale el nombre AgregarUsuario.aspx
• 4.c- El lenguaje será el indicado al principio, pero lo puedes cambiar (yo dejo Visual Basic)
• 4.d- Marca la casilla Colocar el código en un archivo independiente para que se separe el diseño del formulario del código que vamos a escribir.
   
• 5- Ahora vamos a añadir una tabla, para que queden alineado los textos y las cajas de textos
• 5.a- En el menú Diseño seleccionar Insertar tabla
• 5.b- En el cuadro de diálogo de insertar tabla, selecciona:
  3 filas y 2 columnas, ancho 90%, Alinear: center, Atributos: borde: 1, Espaciado celdas: 4
   
• 6- En la tabla recién creada, añade una etiqueta en la primera columna, un textBox en la segunda columna
   
• 7- Queremos que estén alineadas a la izquierda y arriba
• 7.a- Selecciona la celda (pulsando en la flecha que sale al pasar el ratón)
• 7.b- En la ventana de propiedades, en align selecciona left y en VAlign selecciona top
   
• 8- Selecciona esa fila y pulsa en Copiar de la barra de herramientas
• 8.a- Ahora, al pulsar en el botón Pegar y se añadirá una nueva fila con los controles
• 8.b- Selecciona la siguiente fila (la vacía) y pulsa en pegar
• 8.c- Repite los pasos anteriores hasta que tengas 4 filas con los controles
   
• 9- Añade un botón en la siguiente fila
• 9.a- Selecciona la fila del botón
• 9.b- En el menú Diseño selecciona Combinar celda
• 9.c- De esa forma, esa columna ocupará toda la fila
   
• 10- En la última fila, añade una etiqueta
• 10.a- Selecciona esa última fila para que ocupe las dos columnas, ya sabes:
• 10.b- En el menú Diseño, selecciona Combinar celda
   
• 11- Selecciona esa etiqueta y en la ventana de propiedades busca la propiedad Width y escribe 100% para que ocupe todo el ancho.
   
• 12- Cambia el texto de las 4 primeras etiquetas para que muestre: Correo, Clave, Nombre y Comentarios
   
• 13- Como puede ser que no interese que se vea la clave escrita, selecciona la segunda caja de textos
• 13.a- En la ventana de propiedades, en la propiedad TextMode selecciona Password
   
• 14- Selecciona la última caja de textos, te digo lo que hay que hacer para que tenga más espacio para escribir
• 14.a- En la ventana de propiedades, en la propiedad TextMode selecciona Multiline
• 14.b- En la propiedad Rows escribe 4 y en Columns escribe 60
   
• 15- Selecciona el botón y en el texto escribe Nuevo usuario
   
• 16- Lo correcto es que los controles tengan nombres que indiquen para que son
• 16.a- Siguiendo el orden de arriba abajo, a las cajas de texto dale estos nombres:
  • 16.b- txtCorreo, txtClave, txtNombre y txtComentarios
     
• 17- Al botón dale el nombre btnNuevo
   
• 18- A la etiqueta del final, dale el nombre lblAviso, el resto déjalas con el nombre que tienen ya que no las usaremos desde el código y da igual el nombre, pero si quieres, le puedes dar el nombre que te apetezca, aunque ya puestos, podría ser como el de la caja de textos que tienen al lado, pero en lugar de txt puedes usar lbl.
   
• 19- Ahora vamos a darle funcionalidad al botón, de forma que al pulsar en él se cree un nuevo usuario con los datos que tenemos
• 19.a- Como queremos que las cosas se hagan bien, después añadiremos validadores para que se escriba lo que haya que escribir
• 19.b- Haz dobleclic en el botón para que se muestre la ventana de código
• 19.c- El código se habrá mostrado en un fichero aparte con el mismo nombre que la página y con la extensión del lenguaje que has elegido, en mi caso es: AgregarUsuario.aspx.vb
• 19.d- Antes de hacer nada te explico que es lo que habría que hacer para añadir correctamente los datos.
   
• 20- No debemos admitir ninguna de las cajas en blanco, salvo la de comentarios (ahora veremos como)
   
• 21- La fecha la podremos nosotros de forma automática, para que tenga la fecha actual
• 21.a- Para que se muestre la fecha, deberíamos agregar una nueva fila, por ejemplo, entre el nombre y los comentarios
• 21.b- Selecciona la fila del nombre y pulsa en copiar
• 21.c- Selecciona la fila de los comentarios y pulsa en pegar, se insertara una nueva fila
• 21.d- Cambia el texto de la etiqueta a Fecha y el nombre de la caja de textos a txtFecha
• 21.e- Como la fecha es de solo lectura, selecciona la caja de textos y en las propiedades, asigna el valor True a la propiedad ReadOnly
• 21.f- Para que se vea de otro color, en las propiedades, selecciona BackColor y en el cuadro de propiedades que te muestra, selecciona la ficha Web y el color WhiteSmoke
   
• 22- Otra cosa a hacer es que si ese correo ya existe, que diga que no es válido
   
• 23- Pero antes de hacer nada, necesitamos crear la conexión a la base de datos
   
• 24- Con el Visual Web Developer Express y el SQL Express la forma mas fácil de crear una conexión a la base que hemos creado es haciendo lo siguiente: (a lo mejor hay otra forma mejor, pero... esto me funciona siempre)
• 24.a- Muestra la página de agregar usuario en modo diseño
• 24.b- En el explorador de bases de datos, arrastra la tabla de Usuarios a la página
• 24.c- Esto creará un GridView y un control DataSource, el GridView lo vamos a borrar
• 24.d- Selecciona solo el GridView y pulsa la tecla suprimir, pulsa antes en cualquier parte de la página y después selecciona el grid
• 24.e- Ahora tendrás un control llamado SqlDataSource1 que tendrá todos los comandos para insertar, eliminar, actualizar, etc.
• 24.f- También se habrá creado el fichero web.config con los datos de conexión a la base de datos
   
• 25- Vamos a añadir controles de validación para que el usuario tenga que escribir algo en ellos
• 25.a- Muestra la página en modo de diseño y del Cuadro de herramientas, selecciona el grupo Validación
• 25.b- Arrastra un control RequiredFieldValidator y déjalo al lado del textBox del correo
• 25.c- Seguramente se pondrá debajo de la caja de textos, posiciónate justo delante del control de validación y borra (con la tecla backspace) el espacio que habrá, para que quede pegado al textBox, después puedes pulsar un espacio para que haya algo de separación
• 25.d- Añade otro al lado de la caja de textos de la clave y otro al lado del textBox del nombre
• 25.e- Para la fecha y los comentarios no hace falta añadir ninguno
   
• 26- Como queremos que la cuenta de correos sea valida, vamos a añadir un control de validación de expresiones regulares junto al textBox del correo (detrás del validador que ya había)
• 26.a- En la ventana de propiedades, selecciona la propiedad ValidationExpression y pulsa en el botón
• 26.b- Del cuadro de dialogo selecciona Dirección de correo electrónico de Internet y pulsa en aceptar
   
• 27- Ahora vamos a enlazar esos controles de validación con las cajas de texto correspondientes
• 27.a- Selecciona el primer RequiredFieldValidator (Correo) y busca la propiedad ControlToValidate y de la lista desplegable que te mostrará, selecciona txtCorreo
• 27.b- Haz lo mismo con el control RegularExpressionValidator (el de la expresiones regulares)
• 27.c- Ahora el de la clave y después el del nombre, seleccionando los controles correspondientes en la propiedad ControlToValidate
• 27.d- Puedes cambiar el mensaje de aviso de cada uno de los controles de validación, con idea de que si, por ejemplo, no se escribe nada en la clave diga que debe escribir algo... La propiedad que debes asignar es ErrorMessage.
   
• 28- Si queremos que la clave tenga un mínimo de caracteres, podemos agregar un control CustomValidator, indica que control se debe validar, escribe el texto del mensaje de error, por ejemplo: Debes escribir más de 5 caracteres
• 28.a- Haz dobleclic en el control de validación y en el evento que se crea en el fichero de código, escribe lo siguiente: (args es el nombre del segundo parámetro)

args.IsValid = (args.Value.Length > 5)

• 28.b - Esto hará que se compruebe que no este vacío y que tenga más de 5 caracteres
   
• 29- Si en lugar de hacer la validación en el servidor, quieres hacerla en el lado del cliente, tendrás que crear un código Script en la pagina con este código:

<script type="text/javascript">
function comprobarClave(oSrc, args){
    args.IsValid = (args.Value.length > 5);
}
</script>

• 29.a- Selecciona el control y en la propiedad ClientValidationFunction escribe el nombre de la función, en este caso comprobarClave.
   
• 30- Como los controles de validación se empeñan en ponerse como les da la gana, si quieres, puedes poner todos esos controles de validación en la parte inferior de la tabla, aunque en el caso de que, por ejemplo, el usuario pulse en el botón sin haber escrito nada, le mostrará todos los mensajes de error, por tanto, esos mensajes deberían decir lo que queremos que haga el usuario, es decir, no lo dejes con el texto predeterminado.
   
• 31- Antes de seguir, decirte que si la caja de textos está en modo Password, y cuando se compruebe por código si el usuario existe, etc., y se cancele la creación del usuario, lo que se escriba se borrará, así que si quieres que se siga manteniendo la contraseña, debes dejarla como texto normal. En cualquier caso, mejor dejarlo como Password y si el usuario se equivoca, pues... que hubiese prestado más atención, je, je.
   
• 32- Ahora vamos a escribir el código de validación de que el usuario no exista ya y en caso de que exista, que se cancele la inserción de datos, y si no existe, que se añada a la base de datos.
• 32.a- Muestra el código del evento del botón (el que creaste en el punto 19)
• 32.b- Al principio del fichero añade las importaciones de los espacios de nombres que vamos a usar, en particular el System.Data.SqlClient
• 32.c- Lo primero es comprobar si el usuario ya existe, por tanto vamos a ejecutar la siguiente sentencia (cadena de selección):

SELECT Count(*) FROM Usuarios WHERE Correo = @Correo

• 32.d- Esto hará que se compruebe en la tabla de Usuarios si el correo escrito ya está, el truco es que si esas instrucciones devuelven algún valor que no sea cero, es que ya hay una cuenta de correo como la que buscamos.
• 32.e- Para ejecutar esa sentencia de SQL vamos a usar un objeto SqlConnection y un objeto SqlCommand
• 32.f- Para el objeto Connection necesitas la cadena de conexión, y como ya tenemos en el formulario (pagina Web) un objeto SqlDataSource, pues la tomamos de ahí.
• 32.g- Este es el código para comprobar si el usuario ya existe, verás que uso una instrucción Using para controlar la conexión, de esa forma, si nos salimos nos aseguramos de que el objeto se destruye y se cierra la conexión, ya que esa instrucción se encarga de liberar todos los recursos que estuviera usando al llegar al final del bloque, en Visual Basic, será al llegar a End Using.

' Comprobamos si el nombre ya existe
Using cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString)
    Dim cmd As New SqlCommand( _
            "SELECT Count(*) " & _
            "FROM Usuarios " & _
            "WHERE Correo = @Correo", cnn)
    ' Abrimos la conexión
    cnn.Open()
    ' Añadimos el valor del parámetro de la consulta
    cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text)
    ' Si devuelve algún valor, es que ya existe
    Dim i As Integer
    i = CInt(cmd.ExecuteScalar())
    If i > 0 Then
        ' Avisamos y salimos
        Me.lblAviso.Text = "El usuario ya existe"
        Exit Sub
    End If
    ' Al salir del bloque Using se cierra la conexión
End Using

• 32.h- El parámetro @Correo lo asignamos usando el método AddWithValue que es la forma más cómoda de crear los parámetros al tiempo que se le asigna el valor que tendrá.
• 32.i- Al llamar al método ExecuteScalar del comando, le estamos diciendo que devuelva la primera columna de la primera fila, y como resulta que lo que queremos es el número de veces que esté en la tabla Usuarios esa cuenta de correo, pues si ya está una vez, devolverá un 1, si no está devolverá un cero. El valor que devuelve esa función es de tipo Object, ya que en realidad el tipo devuelto depende de lo que pongamos después de SELECT, en este caso es un valor entero, que es lo que devuelve la función Count(*).
• 32.j- Si lo que devuelve es mayor de cero, es que hay algún correo como el que se ha escrito, por tanto mostramos el mensaje de error y salimos del método.
   
• 33- Si se continúa, es decir, se llega después del End Using, es que no existe esa cuenta de correo, por tanto debemos agregar los datos.
• 33.a- Ahora debemos hacer casi lo mismo de antes, pero ejecutando el comando Insert, el cual también lo tomaremos del objeto SqlDataSource1.
• 33.b- Aunque antes de guardar nada en la base de datos debemos asignar los valores de los parámetros, que si te fijas en el código de la página, esos parámetros se llaman igual que los campos, pero empezando con la arroba (@).
• 33.c- Otra cosa que debemos hacer es convertir el password (la clave) en un valor SHA1. Esto es para no guardar la clave como un texto en la base de datos, de esa forma, el que vea los datos que hay no sabrá cual es la clave de cada usuario. Ese valor SHA1 lo podemos crear usando un objeto de tipo SHA1CryptoServiceProvider o bien usar la función HashPasswordForStoringInConfigFile de la clase FormsAuthentication, que es lo que normalmente haremos en una pagina Web, ya que así nos evitamos tener que crear nuestro propio código. De todas formas, en el código completo, he añadido la función para crear ese valor SHA1, por si quieres ver como hacerlo, por ejemplo para una aplicación de Windows.
• 33.d- Una vez que tenemos todo esto, lo juntamos y lo mezclamos bien... je, je, mejor es que veas el código para que lo tengas más claro:

' El usuario no existe, lo añadimos
Using cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString)
    ' Usamos el comando Insert del DataSource
    Dim cmd As New SqlCommand(Me.SqlDataSource1.InsertCommand, cnn)
    ' Abrimos la conexión
    cnn.Open()
    ' Añadimos el valor del parámetro de la consulta
    cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text)

    ' La clave la guardaremos como un valor SHA1
    Dim clave As String
    clave = FormsAuthentication.HashPasswordForStoringInConfigFile(txtClave.Text, "SHA1")
    'clave = generarClaveSHA1(txtClave.Text)
    cmd.Parameters.AddWithValue("@Clave", clave)

    ' La fecha a guardar es la actual
    txtFecha.Text = DateTime.Now.ToString()
    cmd.Parameters.AddWithValue("@Fecha", txtFecha.Text)
    cmd.Parameters.AddWithValue("@Nombre", txtNombre.Text)
    cmd.Parameters.AddWithValue("@Comentarios", txtComentarios.Text)
    ' Ejecutamos el comando de inserción
    cmd.ExecuteNonQuery()
    ' Al salir del bloque Using se cierra la conexión
End Using

Me.lblAviso.Text = "Se ha añadido el nuevo usuario correctamente"

• 34- Ya lo único que nos queda es poner en la pagina principal (Default.aspx) un link para que podamos entrar a la página de crear nuevos usuarios. En esa misma página crearemos links para otras funcionalidades, por ejemplo, modificar un dato o ver los datos que tenemos, etc.
• 34.a- Muestra la página Default.aspx en modo diseño y del Cuadro de herramientas añade un control HyperLink, en la propiedad Text escribe Añadir usuario y en la propiedad NavigateUrl pulsa en el botón con los puntos suspensivos para que puedas seleccionar la página a la que quieres que navegue cuando se pulse en el link, en este caso la página que debes seleccionar del cuadro de diálogo que te muestra es AgregarUsuario.aspx
   
• 35- Vamos a probar que todo funciona, pero antes, en el explorador de soluciones, selecciona la página Default.aspx y pulsando con el botón derecho, selecciona del menú contextual la opción Establecer como página de inicio, de esta forma, cada vez que pulses F5 se iniciara con esa página, si no haces esto que te acabo de comentar, cuando pulses F5 se iniciara por la página que en ese momento esté seleccionada.
   
• 36- Una vez que esté en ejecución, prueba a no escribir nada en las cajas de texto y pulsa en el botón, verás que salen los mensajes de aviso. Sigue haciendo pruebas de validación, por ejemplo no escribas bien el correo, escribe menos de 6 caracteres en la clave, etc.
   
• 37- Una vez que hayas probado que las validaciones funcionan, introduce un usuario (o varios) y después intenta introducir uno que ya exista, para que veas que se muestra el mensaje de error y esas cosas.