Introducción
En esta primera parte del tutorial de cómo utilizar bases de datos en un
sitio Web usando Visual Web Developer 2005 Express, vas a ver cómo crear un
proyecto Web, crear una base de datos de SQL Server 2005 desde el IDE del
Visual Web Developer (VWD), añadir controles a una página Web ASPX, añadir
controles de validación, comprobar si un usuario ya está en la base de
datos, y en caso de que no esté, añadirlo.
Nota:
El código mostrado aquí es para Visual Basic 2005, pero
más abajo tienes los links para el código completo, tanto para Visual
Basic como para C#.
Ejemplo paso a paso
- 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.
Bueno, pues con esto ya tienes para entretenerte un rato. En la
próxima parte veremos cómo modificar los datos y cómo mostrar los que hay. Esto
último lo haremos de forma automática, usando un GridView y de forma manual,
para que podamos navegar entre los datos y se muestren uno a uno, etc.
Espero que te sea de utilidad y sepas agradecerlo... (es
de bien nacidos ser agradecidos) ;-))))
Nos vemos.
Guillermo
Nerja, 2 y 3 de Febrero de 2007
El código de ejemplo para Visual Basic 2005 y Visual
C# 2005
- El código de la página Web (solo el código HTML de la página
AgregarUsuario.aspx)
- El código para comprobar si existe el usuario y en caso de que no
exista, añadir uno nuevo
Volver al índice del
tutorial
|