Introducción
En esta tercera 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
buscar usuarios sabiendo la cuenta de correo, también actualizaremos los
datos de un usuario existente.
Como "extra", te muestro cómo averiguar el valor SHA1 de un texto y cómo
definir y usar un procedimiento almacenado de SQL Server para buscar el usuario
según la cuenta de correo.
Nota:
En esta ocasión, el código mostrado en el propio artículo es tanto para Visual Basic 2005
como para C#, (para que nadie se queje), pero
más abajo tienes los links para el código completo, tanto de la página
ASPX como para el código de Visual
Basic y de C#.
Estos son los pasos para completar esta tercera parte del tutorial:
- 1- Abre el proyecto vwdTut01.
- 2- Añade un nuevo WebForm (ya sabes los pasos).
- 2.a- El nombre será ModificarUsuario.aspx, dile que el código lo
ponga en un fichero aparte.
- 3- Como el formulario de modificar los datos será casi igual que el de introducir
nuevos datos, vamos a copiar el que ya tenemos y después le haremos los cambios
necesarios para darle la funcionalidad que queremos que tenga.
- 3.a- Abre la página AgregarUsuario.aspx en modo de
Código,
ya que vamos a copiar
todo el código HTML para pegarlo en la página que acabas de crear en el punto 2.
- 3.b- Selecciona desde la etiqueta <body> hasta el final, lo copias y lo pegas
en la página nueva.
- 3.c- Por supuesto, al pegar, debes hacerlo desde <body> hasta el final, pero
esto supongo que ya te lo imaginabas.
- 4- Ahora lo que hay que hacer es añadir un nuevo control (un botón), que estará
al lado de la caja de textos Correo.
- 4.a- Ese botón, al que le darás el nombre btnMostrar, servirá para mostrar el usuario
que quieres modificar.
- 4.b- El texto a mostrar en el botón será precisamente Mostrar.
- 5- Al botón que ya estaba, debes cambiarle el nombre y el texto para que sean:
btnActualizar y Actualizar respectivamente.
- 5.b- Si estás usando C# tendrás un pequeño problema al copiar el texto anterior
y cambiarle el nombre al botón, ya que si haces dobleclic en ese botón, en la ventana
de código se mostrará el método btnNuevo_Click en lugar del nombre que debería mostrarse:
btnActualizar_Click.
- 5.c- Esto es así porque en C# en las propiedades del botón estará asignado el valor
del atributo OnClick con el valor "btnNuevo_Click".
- 5.d- En Visual Basic esto no suele ocurrir, ya que si tenemos el código separado
del diseño (se usa un fichero aparte para el código), los métodos de los eventos
se manejan con la cláusula Handles, por tanto, lo importante es que esa instrucción
esté en un método para que ese método esté asociado con el evento que se indique
después de Handles.
- 5.e- Pero si en lugar de tener el código separado del diseño, está todo en el mismo
fichero, el problema será el mismo tanto en Visual Basic como en C#.
- 6- Para que en C# tenga el nombre "adecuado", lo que tienes que hacer es quitar
ese atributo (OnClick) y el código que se ha añadido al hacer antes dobleclic en
el botón.
- 6.a- Una vez que lo has borrado, vuelve a hacer dobleclic en el botón
Actualizar
y esta vez si que se creará el método con el nombre que debe tener.
¿Qué hacer para modificar un usuario?
- 7- Esa es la pregunta que tenemos que hacernos ahora, en principio, escribirás la
cuenta de correo del usuario a modificar, pulsarás en el botón Mostrar,
se mostrarán
los datos del usuario si es que existe, y en caso de que no exista se avisará de
ese hecho y no pasará nada.
- 7.a- Una vez que tenemos los datos del usuario que queremos modificar, los podremos
modificar y al pulsar en el botón Actualizar, se guardarán los datos en la base
de datos.
- 8- Ahora tenemos que plantearnos que hacemos con la clave, al menos si nuestra intención
es poder cambiarla. Ya que la guardamos como un valor SHA1.
- 8.a- La primera posibilidad que tenemos es introducir la clave en modo "normal"
y hacer lo mismo que hicimos en la parte de introducir un nuevo usuario, es decir,
crear la clave SHA1 a partir del texto que introduzcamos.
- 8.b- El problema es que si queremos modificar otros datos, pero dejar la clave como
estaba, pues... lo tendremos complicado, ya que en realidad no sabremos que clave
es... porque recuerda que si solo conocemos el valor SHA1 será imposible saber que
clave era... y como me imagino que no te vas a saber todas las claves de memoria,
pues... habrá que hacer algo para que no tengamos que preguntarle al usuario cual
era su clave, o decirle que se la hemos cambiado.
- 8.c- Si introducimos la clave directamente como un valor SHA1, ya no tendremos el
problema de saber que clave era, y de esa forma, si hacemos algún cambio en cualquiera
de los otros datos, no habrá problemas con la clave, ya que en esta ocasión no volveremos
a generar el valor SHA1, sino que guardaremos lo que haya en la caja de textos.
- 8.d- El problema lo tendremos a la hora de introducir una nueva clave (porque queramos
cambiarla), ya que tendremos que saber el valor SHA1 de esa nueva clave.
- 8.e- Una solución es tener un "generador" de valores SHA1 a partir de un texto,
de esa forma, si queremos cambiar una clave, escribiremos el texto de la nueva clave,
pulsaremos en el botón de generar el valor SHA1 y el resultado será lo que usemos
para guardar en el campo Clave.
- 8.f- Es decir, lo mismo (o casi) que hicimos a la hora de añadir un nuevo usuario,
pero sin que sea automático. Mejor te explico cómo hacerlo y así lo tendrás más
claro.
- 9- Añade un botón junto a la caja de textos de la clave.
- 9.a- Modifica las propiedades del botón para que muestre el texto
Generar clave
SHA1 y el nombre sea btnClaveSha1.
- 10- Como el editor de formularios Web se empeña en manejar el tamaño de las celdas
con valores en pixel, y para que se vea bien los 40 caracteres que tiene el valor
SHA1 generado, tendremos que "engañar" al editor... o casi.
- 10.a- Así que, vamos a seleccionar todas las columnas en las que están las cajas
de textos y le vamos a dar un valor en porcentaje.
- 10.b- Si mueves el cursor encima de la primera fila (el borde de la tabla), verás
que se muestra una especie de flecha.
- 10.c- Pon el ratón encima de la segunda columna y pulsa en la flechita esa, de esa
forma se seleccionarán todas las columnas (en realidad las columnas que están en
las filas que tienen dos columnas).
- 10.d- Una vez que tienes las columnas seleccionadas, en la ventana de propiedades
ve a la propiedad Style, verás que pone WIDTH: 100px,
borra desde los dos puntos,
y escribe 80%, de forma que ahora muestre WIDTH:
80%.
- 10.e- Ahora selecciona el control txtClave y en la propiedad
Width escribe 90% (o
100%, como quieras), esto hará que la caja de texto ocupe ese porcentaje de la celda
en la que está.
- 11- Ahora es tiempo de escribir el código. Te explico lo que hará al pulsar en el
botón de generar la clave SHA1
- 11.b- Se leerá el valor que haya en txtClave, se usará para generar el valor SHA1
y se volverá a asignar a ese mismo control.
- 11.c- Como en este caso queremos que se vea lo que se generará, asegúrate de que
el control txtClave NO tiene el valor Password
en la propiedad TextMode, sino que tiene el valor SingleLine.
- 12- Haz dobleclic en el botón de generar la clave y escribe este código:
Protected Sub btnClaveSha1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnClaveSha1.Click
' Generar la clave SHA1 a partir de lo que haya en txtClave
' y asignar nuevamente a ese mismo textBox el resultado
Dim clave As String
clave = FormsAuthentication.HashPasswordForStoringInConfigFile( _
txtClave.Text, "SHA1")
txtClave.Text = clave
End Sub
- 12.a- El código para C# es el siguiente:
protected void btnGenerarClaveSha1_Click(object sender, EventArgs e)
{
// Generar la clave SHA1 a partir de lo que haya en txtClave
// y asignar nuevamente a ese mismo textBox el resultado
string clave;
clave = FormsAuthentication.HashPasswordForStoringInConfigFile(
txtClave.Text, "SHA1");
txtClave.Text = clave;
}
- 13- Prueba esto que acabas de hacer, pero para que se pueda "navegar" a esta nueva
página, tendrás que añadir un nuevo control HyperLink en la página Default.aspx
para que vayas a esta nueva página al pulsar en él.
- 13.a- Para probar, escribe una clave y pulsa en el botón Generar clave SHA1 y verás
que se muestra el valor que le corresponde al texto que has escrito, por ejemplo,
para el valor 123456, el valor de SHA1 será: 7C4A8D09CA3762AF61E59520943DC26494F8941B.
- 13.b- Por supuesto, para hacer esa prueba, debes escribir una cuenta de correo y
un nombre, ya que al tener los validadores, pues... nos avisará de que esos campos
deben tener algo.
Mostrar los datos de un usuario
- 14- Ahora le toca al código del botón Mostrar, en ese botón vamos a comprobar si
el correo indicado está en la tabla, y en caso de que así sea, mostraremos los datos
en las cajas de texto que correspondan.
- 14.a- Para leer los datos, usaremos un objeto SqlConnection, un objeto
SqlCommand
con la cadena de selección para recuperar todos los datos del usuario que tenga
la cuenta de correo que indiquemos. Para poder acceder a esos datos devueltos por
la consulta, usaremos un objeto SqlDataAdapter y un objeto DataTable.
- 14.b- En realidad no nos hacen falta ni el objeto para la conexión ni el comando,
ya que lo podríamos hacer todo con el adaptador, pero así podrás ver otra forma
de acceder a los datos, ya que te será útil si, por ejemplo usas un procedimiento
almacenado (stored procedure) para hacer esa comprobación.
- 14.c- ¿Que dices? ¿Quieres que usemos un procedimiento almacenado?
- 14.d- Vale... pero primero te muestro el código para hacerlo de forma normal.
- 15- En el formulario ModificarUsario.aspx, pulsa en el botón
Mostrar y escribe lo
siguiente:
15.a- Primero en Visual Basic:
Protected Sub btnMostrar_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnMostrar.Click
Me.lblAviso.Text = ""
'
' Comprobamos si el nombre ya existe
Using cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString)
' La cadena de slección será la que tenga el DataSource,
' pero buscando el correo que hemos escrito
Dim sel As String
sel = Me.SqlDataSource1.SelectCommand & _
" WHERE Correo = @Correo"
Dim cmd As New SqlCommand(sel, cnn)
' Abrimos la conexión
cnn.Open()
' Añadimos el valor del parámetro de la consulta
cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text)
' El resultado lo guardaremos en una tabla
Dim tabla As New DataTable
' Usaremos un DataAdapter para leer los datos
Dim da As New SqlDataAdapter(cmd)
' Llenamos la tabla con los datos leídos
da.Fill(tabla)
' Si la tabla no tiene filas, es que no existe ese usuario
If tabla.Rows.Count = 0 Then
' Avisamos y salimos
Me.lblAviso.Text = "El usuario NO existe"
Exit Sub
End If
' Mostramos los datos
' que estarán en la primera fila de la tabla,
' ya que solo debería haber un solo usuario con ese correo
Me.txtClave.Text = tabla.Rows(0)("Clave").ToString
Me.txtFecha.Text = tabla.Rows(0)("Fecha").ToString
Me.txtNombre.Text = tabla.Rows(0)("Nombre").ToString
Me.txtComentarios.Text = tabla.Rows(0)("Comentarios").ToString
Me.lblAviso.Text = "El usuario existe y se han leído los datos."
' Al salir del bloque Using se cierra la conexión
End Using
End Sub
- 15.b- Ahora el código de C#:
protected void btnMostrar_Click(object sender, EventArgs e)
{
this.lblAviso.Text = "";
//
// Comprobamos si el nombre ya existe
using (SqlConnection cnn = new SqlConnection(this.SqlDataSource1.Connec
{
// La cadena de slección será la que tenga el DataSource,
// pero buscando el correo que hemos escrito
string sel;
sel = this.SqlDataSource1.SelectCommand +
" WHERE Correo = @Correo";
SqlCommand cmd = new SqlCommand(sel, cnn);
// Abrimos la conexión
cnn.Open();
// Añadimos el valor del parámetro de la consulta
cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text);
// El resultado lo guardaremos en una tabla
DataTable tabla = new DataTable();
// Usaremos un DataAdapter para leer los datos
SqlDataAdapter da = new SqlDataAdapter(cmd);
// Llenamos la tabla con los datos leídos
da.Fill(tabla);
// Si la tabla no tiene filas, es que no existe ese usuario
if (tabla.Rows.Count == 0)
{
// Avisamos y salimos
this.lblAviso.Text = "El usuario NO existe";
return;
}
// Mostramos los datos
// que estarán en la primera fila de la tabla,
// ya que solo debería haber un solo usuario con ese correo
this.txtClave.Text = tabla.Rows[0]["Clave"].ToString();
this.txtFecha.Text = tabla.Rows[0]["Fecha"].ToString();
this.txtNombre.Text = tabla.Rows[0]["Nombre"].ToString();
this.txtComentarios.Text = tabla.Rows[0]["Comentarios"].ToString();
this.lblAviso.Text = "El usuario existe y se han leído los datos.";
// Al salir del bloque Using se cierra la conexión
}
}
- 15.c- Acuérdate de añadir las importaciones para System.Data y
System.Data.SqlClient
- 16- Si quieres probar esto... pruébalo, pero antes de ir a probarlo, deberías leer
lo que te voy a decir...
- 16.a- Tal como está el código de esta página, si no escribes nada en la clave ni
en el nombre, te mostrará el mensaje de error y no te dejará hacer nada.
- 16.b- Así que, lo mejor será que quitemos los controles de validación, al menos
los de la clave y los del nombre.
- 16.c- Pero al hacer eso, tenemos el problema de que nos olvidemos de escribir algo
en esas cajas de texto, y... bueno... que no podemos tenerlo todo, así que... tienes
que decidir que quieres hacer...
- 17- ¿Quieres dejar los controles de validación?
- 17.a- En ese caso, cuando solo quieras mostrar los datos, tendrás que rellenar los
controles que se validan.
- 18- ¿Quieres quitar los controles de validación?
- 18.a- En ese caso, si modificas y borras el contenido de la clave o del nombre,
pues no habrá nadie que te avise.
- 19- Mejor quita los controles de validación que controlan la clave y el nombre.
Pero puedes hacer lo que quieras.
- 19.a- Si quitas los controles de validación, al menos deja los dos que validan la
cuenta de correo.
Crear un procedimiento almacenado
- 20- Ahora vamos a añadir un procedimiento almacenado a la base de datos.
- 20.a- Muestra la ventana del Explorador de bases de datos.
- 20.b- Si es preciso, expande la conexión de la base vwdTut01.mdf.
- 20.c- En la carpeta Procedimientos almacenados, pulsa con el botón derecho del ratón
y selecciona Agregar nuevo procedimiento almacenado.
- 20.d- Se abrirá una nueva ventana en la que podemos escribir el código de ese procedimiento
almacenado, inicialmente tendrá este código:
CREATE PROCEDURE dbo.StoredProcedure1
/*
(
@parameter1 int = 5,
@parameter2 datatype OUTPUT
)
*/
AS
/* SET NOCOUNT ON */
RETURN
- 20.e- Sustitúyelo por este otro y pulsa en el botón guardar.
ALTER PROCEDURE dbo.MostrarUsuario
@Correo nvarchar(64)
AS
SELECT Correo, Clave, Nombre, Fecha, Comentarios
FROM dbo.Usuarios
WHERE Correo = @Correo
RETURN
- 20.f- Este procedimiento almacenado hace lo mismo que en el código anterior (punto
15)
- 21- Ahora solo falta cambiar el código del objeto SqlCommand para que use este procedimiento
almacenado.
- 21.a- En el código del método del botón mostrar, sustituye el código de la declaración
del comando (y el de la variable sel) y pon este para Visual Basic:
' Usando un procedimiento almacenado
Dim cmd As New SqlCommand()
cmd.CommandText = "MostrarUsuario"
cmd.CommandType = CommandType.StoredProcedure
cmd.Connection = cnn
// Usando un procedimiento almacenado
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "MostrarUsuario";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = cnn;
- 21.c- El resto del código es exactamente igual, pruébalo y saldrás de dudas.
- 21.d- Fíjate que al usar un procedimiento almacenado, asignamos a la
propiedad CommandType del comando el valor
CommadType.StoredProcedure para que se entere de que estamos usando
un procedimiento almacenado en lugar de una sentencia T-SQL directa.
- 21.e- Cuando no asignamos el valor StoredProcedure a la
propiedad CommandType, el valor que tiene es Text, que es
el predeterminado de esa propiedad.
El código para actualizar los datos modificados
- 22- Lo siguiente que tienes que hacer es escribir el código para actualizar los
datos escritos.
- 22a- En el evento Click del botón Actualizar tendrás que escribir el código para
actualizar los datos del usuario cuyo correo hayas escrito.
- 22b- ¿Que haremos en ese método?
- 22c- Pues, comprobar que el correo indicado está en la base de datos.
- 22d- Si no está, mostrar un error.
- 22.e- Si existe, usaremos el contenido de la propiedad UpdateCommand del
DataSource para actualizar los datos.
- 22.f- La llamada a ese comando de actualización la hacemos por medio
del método ExecuteNonQuery del comando, pero una vez que hemos asignado
los valores de los parámetros, que en este caso, también usamos el
método AddWithValue.
- 22.g- Este es el código para Visual Basic:
Protected Sub btnActualizar_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnActualizar.Click
Me.lblAviso.Text = ""
'
' Comprobamos si el nombre ya existe
Using cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString)
' El valor que necesitamos es el ID
Dim cmd As New SqlCommand( _
"SELECT ID " & _
"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 cero, es que no existe
Dim i As Integer
i = CInt(cmd.ExecuteScalar())
If i = 0 Then
' Avisamos y salimos
Me.lblAviso.Text = "El usuario NO existe"
Exit Sub
End If
' Si llegamos aquí, es que el usuario existe
' Deberíamos hacer las comprobaciones de que haya datos que guardar,
' pero... eso te lo dejo a ti...
'
' Seguimos usando la misma conexión, pero cambiamos el comando
' Usamos el comando Update del DataSource
cmd = New SqlCommand(Me.SqlDataSource1.UpdateCommand, cnn)
' Añadimos el valor del parámetro de la consulta
cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text)
' La clave la guardaremos como un valor SHA1
' pero como ya estará como SHA1, simplemente la asignamos
cmd.Parameters.AddWithValue("@Clave", txtClave.Text)
' Esto nos puede dar problemas dependiendo del forma
' del servidor en el que está la base de datos
cmd.Parameters.AddWithValue("@Fecha", txtFecha.Text)
cmd.Parameters.AddWithValue("@Nombre", txtNombre.Text)
cmd.Parameters.AddWithValue("@Comentarios", txtComentarios.Text)
' El valor de la variable i es el ID a actualizar
cmd.Parameters.AddWithValue("@ID", i)
' Ejecutamos el comando de actualización
' podemos usar el método Update del DataSource
' (pero no actualiza nada)
'Me.SqlDataSource1.Update()
' Mejor con una llamada a ExecuteNonQuery
cmd.ExecuteNonQuery()
' Al salir del bloque Using se cierra la conexión
End Using
Me.lblAviso.Text = "Se han actualizado los datos correctamente"
End Sub
- 22.h- Este es el código del método de evento del botón Actualizar para C#:
protected void btnActualizar_Click(object sender, EventArgs e)
{
this.lblAviso.Text = "";
//
// Comprobamos si el nombre ya existe
using (SqlConnection cnn =
new SqlConnection(this.SqlDataSource1.ConnectionString))
{
// El valor que necesitamos es el ID
SqlCommand cmd = new SqlCommand(
"SELECT ID " +
"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 cero, es que no existe
int i = (int)cmd.ExecuteScalar();
if (i == 0)
{
// Avisamos y salimos
this.lblAviso.Text = "El usuario NO existe";
return;
}
// Si llegamos aquí, es que el usuario existe
// Deberíamos hacer las comprobaciones de que haya datos que guardar,
// pero... eso te lo dejo a ti...
//
// Seguimos usando la misma conexión, pero cambiamos el comando
// Usamos el comando Update del DataSource
cmd = new SqlCommand(this.SqlDataSource1.UpdateCommand, cnn);
// Añadimos el valor del parámetro de la consulta
cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text);
// La clave la guardaremos como un valor SHA1
// pero como ya estará como SHA1, simplemente la asignamos
cmd.Parameters.AddWithValue("@Clave", txtClave.Text);
// Esto nos puede dar problemas dependiendo del forma
// del servidor en el que está la base de datos
cmd.Parameters.AddWithValue("@Fecha", txtFecha.Text);
cmd.Parameters.AddWithValue("@Nombre", txtNombre.Text);
cmd.Parameters.AddWithValue("@Comentarios", txtComentarios.Text);
// El valor de la variable i es el ID a actualizar
cmd.Parameters.AddWithValue("@ID", i);
// Ejecutamos el comando de actualización
// con una llamada a ExecuteNonQuery
cmd.ExecuteNonQuery();
// Al salir del bloque using se cierra la conexión
}
this.lblAviso.Text = "Se ha añadido el nuevo usuario correctamente";
}
- 23- En el código hay un par de cosas que te quiero comentar.
- 23.a- En el primer comando he usado el ID como valor a recuperar para comprobar
si existe el usuario, ya que ese valor del ID lo necesitaremos para el comando
UpdateCommand
del DataSource.
- 23.b- La conexión no la he cerrado, ya que después hay que volver a abrirla, y en
realidad podemos aprovecharla para las dos cosas que hay que hacer. Por eso solo
hay un bloque Using.
- 23.c- La otra cosa es que en teoría, el objeto DataSource tiene un
método Update,
que supuestamente es para actualizar los datos usando la cadena de UpdateCommand,
pero... bueno, a mi no me funciona, así que, mejor usar el método ExecuteNonQuery del
objeto SqlCommand, que si que funciona.
Y esto es todo, creo que con lo explicado en estas tres partes tendrás una pequeña
idea de cómo manejar los datos en un sitio Web creado con ASP.NET.
Lo que queda por explicarte es que podamos crear una parte del sitio que esté protegida
por contraseña, de forma que el usuario que quiera entrar deba escribir la contraseña
que se le ha asignado.
Otra cosa que habrá que hacer es crear otro directorio con las páginas que
estamos creando en estas tres partes del tutorial, ya que, al menos
en teoría, solo el usuario que tenga los permisos suficientes debería poder crear,
modificar y ver los datos del resto de usuarios.
Para que te vayas haciendo una idea (y puedas ir modificando el código que ya tenemos
e incluso hacerlo por tu cuenta), hay que añadir otro campo a la tabla de usuarios,
de forma que nos sirva para saber el "nivel" que tiene, por ejemplo, el nivel cero
es para los usuarios normales, y el nivel 3 para los que puedan modificar los datos
de los usuarios.
Ese campo será de tipo entero (int) y el nombre del campo puede ser
Nivel.
Bueno, esto es todo por ahora... ¡que te diviertas!
Nos vemos.
Guillermo
Nerja, 4 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
ModificarUsuario.aspx)
- Este es el código usado en los métodos de los botones de esa página:
Volver al índice del
tutorial
|