Descargar Código Fuente:
Nota:
Modificar el archivo web.config de acuerdo a la forma en que se va a conectar a la base, en el tutorial se detalla un poco sobre este punto.
Pre-requisitos para el Tutorial:
- Visual Studio 2008 (Podría funcionar en 2005 y 2010).
- Haber configurado previamente la base de datos de SQL Server en algún equipo que funja como servidor o localmente.
- Este tutorial utiliza la versión 2005 de SQL Server.
- Tener instalado el SQL Server Management Studio.
- Tener permisos para creación de tablas en la base de datos a utilizar.
Creación de altas, Bajas y modificaciones usando SQLConnection y SQLCommand.
Creación de la Base de Datos.
Abrimos el SQL Server Management Studio e ingresamos. Creamos la base de datos, en este caso se llama “prueba” en ella crearemos una tabla de llamada “usuario”. La base debe tener los siguientes campos:
Nombre Varchar(30) Llave Primaria.
Clave Varchar(30)
Mail Varchar(30)
Creación del sitio web y la plantilla.
Creamos el Sitio Web, lo llamaremos ManttoSimple.
Eso creará el árbol de archivos del Sitio Web.
Creamos la MasterPage para el proyecto, sino sabe cómo crearla le recomiendo que lea el Tutorial de MasterPages:
Aqui
Le colocamos de nombre “MainPage.aspx”
Y la MasterPage trae el código por defecto siguiente:
<%@ Master Language="VB" CodeFile="MainPage.master.vb" Inherits="MainPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Creada la MasterPage vamos a crear un Hoja de Estilos la cual la nombraremos como “StyleMP.css”.
Utilizaremos el mismo código CSS que utilizamos en el tutorial anterior, de manera que vamos a sustituir el código que existe actualmente en StyleMP.css por lo siguiente:
body {
margin: 0;
padding-bottom: 2em;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top: 2px solid #B51032;
}
/* Header Section */
#header {
border-top: 3px solid #B51032;
border-bottom: 1px dotted #B51032;
height: 3em;
}
#header .title {
font: 190% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
color: black;
background-color: transparent;
float: left;
margin-right: 2em;
margin-top: 0.3em;
margin-left: .8em;
}
#header a:link, a:visited {
color: #B51032;
}
/* Navigation */
#navigation {
width: 200px;
top: 5em;
left: 1em;
width: 13em;
position:absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
#header .breadcrumb {
font: 90% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
color: black;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.8em;
font-weight:bold;
}
/* Main Content */
#content
{
margin-top:1em;
margin-left: 16em;
margin-right: 2em;
}
h1 {
font: 150% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;
}
#content ul {
font-size: 80%;
line-height: 1.6em;
}
Ahora, ya con el CSS procedemos a sustituir el código de la MasterPage y utilizaremos el siguiente:
<%@ Master Language="VB" CodeFile="MainPage.master.vb" Inherits="MainPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>La Aplicación Web</title>
<link href="StyleMP.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">Tutorial de Mantenimiento</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent" runat="server">
<!-- El contenido específico de la página puede ir acá... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
Aquí podría haber un menú.
</div>
</form>
</div>
</body>
</html>
Una vez lista la creación de la MasterPage procedemos a crear las páginas de contenido.
Creación de Páginas de Contenido.
Crearemos una nueva página “default.aspx”, sustituyendo la ya existente, recordar ponerle la opción Seleccionar la página principal.
La página “default.aspx” solamente tendrá los hipervínculos al resto de páginas:
- Alta de usuarios.
- Baja de usuarios.
- Consulta de usuarios.
- Modificación de usuarios.
Para ello crearemos 4 objetos hyperlink del Cuadro de herramientas:
Y los colocaremos en el lienzo en modo diseño, modificaremos la propiedad Text de cada uno y colocaremos el siguiente texto en orden:
- Alta de Usuarios
- Consulta de Usuarios
- Baja de Usuarios
- Modificación de Usuarios
Creamos las 4 páginas de contenido, las asociamos con la MasterPage (chequear la opción Seleccionar la página principal) y les colocaremos los siguientes nombres:
altausuario.aspx
consultausuario.aspx
bajausuario.aspx
modificacionusuario.aspx
Cuando las páginas de contenido han sido creadas, procedemos a enlazar cada uno de los hipervínculos de la página “default.aspx” con su respectiva página de enlace. Para lograr esto accedemos a la propiedad Navigate URL.
Definición de la cadena de conexión.
Para conectarse a la base de datos que creamos utilizaremos el archivo web.config, el cual nos permitirá definir la cadena de conexión que será utilizada en el proyecto para hacer consultas SQL a la base de datos.
Buscamos el apartado donde se muestra lo siguiente:
<appSettings/>
<connectionStrings/>
<system.web>
Entonces sustituímos <connectionStrings/>
Si nuestra base de Datos esta en el mismo equipo donde estamos programando la aplicación entonces agregamos lo siguiente:
<connectionStrings>
<add name="prueba"
connectionString="Data Source=(local);Initial Catalog=prueba;Integrated Security=SSPI;"/>
</connectionStrings>
Si no es así y se encuentra en un servidor remoto de la red o a través de un túnel VPN:
<!-- Abrimos la cadena de conexion-->
<connectionStrings>
<add name="prueba" connectionString="Data Source=Nombre/IpServidor;User ID=UsuarioBaseDatos;Password=ContraseñaBaseDatos" providerName="System.Data.SqlClient"/>
</connectionStrings>
<!--Cerramos la cadena de conexion-->
En donde:
Nombre/IPServidor: Será el nombre o la dirección IP del Servidor donde está configurada la Base de Datos.
UsuarioBaseDatos: Es el usuario con el que podemos ingresar a la base de datos que hemos configurado en SQLServer.
ContraseñaBaseDatos: Es la contraseña con la que podemos ingresar a la base de datos que hemos configurado en SQLServer.
Hay diferentes situaciones que pueden presentarse al momento de configurar el String, si se ha pedido que la contraseña sea con autentificación de Windows o a través de un Servicio LDAP llámese Active Directory, etc. De todas maneras recomiendo que vean el siguiente sitio donde muestra varias formas de acceder a los distintos gestores de bases de datos:
Aqui
Este tutorial se he hecho pensando en un servidor externo, por lo que utilizaré la segunda opción que intento explicar acá.
Codificando la aplicación.
Inserción.
Y comenzamos la parte entretenida del desarrollo: la programada. Abrimos la página altausuario.aspx en modo diseño y añadimos los siguientes objetos:
- 4 Labels
- 3 TextBox
- 1 Button
- 1 HyperLink
El HyperLink debe apuntar a la página “default.aspx” como un retorno al menú principal. Recordar que para que apunte a esa página hay que modificar la propiedad NavigateURL.
Vamos a modificar el control TextBox donde pide la clave, y le colocaremos a la propiedad TextMode el valor “Password”, los otros TextBox tienen que tener el valor como SingleLine.
Queda a criterio del programador dejar los elementos con los nombres actuales o colocarles nombres más adecuados utilizando siempre las convenciones de programación para nombrar a los objetos generalmente aceptados para mayor entendimiento. Esto dependerá de la elegancia con la que se quiera programar, no interfiere en el resultado.
El formulario deberá quedar de la siguiente manera:
El siguiente paso a dar es codificar el evento clic del botón, dando doble clic el botón de Alta, será posible ver el editor de código y aparecerá algo similar a lo siguiente:
Partial Class altausuario
Inherits System.Web.UI.Page
Protected Sub btnAgregar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAgregar.Click
End Sub
End Class
Lo primero será hacer una improtación de la clase SqlClient del Namespace System.Data, estó en la parte General del Editor de código:
Imports System.Data.SqlClient
Ahora agregaremos código dentro del evento clic del botón:
Protected Sub btnAgregar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAgregar.Click
Try
'Declaracion de Variables
Dim vNombre As String = Me.txtNombre.Text
Dim vClave As String = Me.txtClave.Text
Dim vEmail As String = Me.txtEmail.Text
Dim SqlString As String = ConfigurationManager.ConnectionStrings("prueba").ConnectionString
Dim conexion As New SqlConnection(SqlString)
'Abre la conexion
conexion.Open()
'Creación del objeto con los datos cargados para el Comando SQL
Dim comando As New SqlCommand("INSERT INTO USUARIO(Nombre, Clave, Email) VALUES('" _
& vNombre & "','" & vClave & "','" _
& vEmail & "')", conexion)
'Ejecuta el Comando SQL
comando.ExecuteNonQuery()
'Mensaje Si es exitoso
Me.lblMessage.Text = "Se registró el Usuario " & vNombre
'Cierra la conexión
conexion.Close()
'Limpia los TextBox, tras añadir el Usuario
Me.txtNombre.Text = ""
Me.txtClave.Text = ""
Me.txtEmail.Text = ""
'Captura del error en caso de producirse
Catch ex As SqlException
Me.lblMessage.Text = ex.Message
End Try
End Sub
Con esto debe ser posible Insertar datos desde el Formulario hacia la Base de Datos:
Con esto completamos la creación de usuarios. Lo siguiente será consultar los usuarios que hemos creado.
Consulta.
Para la consulta abrimos el formulario “consultausaurio.aspx” y agregamos los siguientes elementos:
- 2 Labels
- 1 TextBox
- 1 Botón
- 1 HyperLink
Los organizamos de manera que se vean como el siguiente:
Una vez mas en el código General importamos la clase SqlClient:
Imports System.Data.SqlClient
Y procedemos a codificar su funcionalidad en el evento clic del botón:
Protected Sub btnBuscar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnBuscar.Click
Try
'Declaración de variables
Dim vNombre As String = Me.txtBusqueda.Text
Dim SqlString As String = ConfigurationManager.ConnectionStrings("prueba").ConnectionString
Dim conexion As New SqlConnection(SqlString)
'Abrimos la conexión
conexion.Open()
'Creación del objeto con los datos cargados para el Comando SQL
Dim comando As New SqlCommand("SELECT Nombre, Clave, Email FROM USUARIO " _
& "WHERE Nombre ='" & vNombre & "'", conexion)
'Creación de objeto SqlDataReader e inicialización mediante ExecuteReader
Dim registro As SqlDataReader = comando.ExecuteReader
'Validación de registro coincidente
If registro.Read Then
Me.lblMessage.Text = "Clave: " & registro("clave") & "<br>" _
& "Mail: " & registro("email")
Else
Me.lblMessage.Text = "No existe usuario con nombre" & vNombre
End If
Catch ex As SqlException
Me.lblMessage.Text = ex.Message
End Try
End SubImports System.Data.SqlClient
Ahora, la consulta debe estar en funcionamiento:
Eliminación.
Tenemos las Altas y las Consultas ahora crearemos la interfaz para la Eliminación. Para ello crearemos un Formulario similar al de la consulta, con la diferencia que en el botón de búsqueda se leera eliminar.
Ahora codificamos el evento clic del botón Borrar:
Protected Sub btnBorrar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnBorrar.Click
Try
'Declaraciones
Dim SqlString As String = ConfigurationManager.ConnectionStrings("prueba").ConnectionString
Dim vUsuario As String = Me.txtUsuario.Text
Dim conexion As New SqlConnection(SqlString)
'Abrimos la conexión
conexion.Open()
Dim comando As New SqlCommand("DELETE FROM USUARIO WHERE Nombre='" _
& vUsuario & "'", conexion)
Dim cant As Integer = comando.ExecuteNonQuery
'Comprobación de registros encontrados
If cant = 1 Then
Me.lblMessage.Text = "Se elimino el usuario " & vUsuario
Me.txtUsuario.Text = ""
Else
Me.lblMessage.Text = "No existe un usuario con nombre " & vUsuario
End If
'Cerramos la conexion
conexion.Close()
Catch ex As Exception
Me.lblMessage.Text = ex.Message
End Try
End Sub
Y la prueba mostrará algo similar:
Modificación.
El último punto es la modificación, para ello crearemos un formulario con los siguientes objetos:
Serían entonces:
- 5 Labels
- 3 TextBox
- 3 Button
- 1 HyperLink
Ahora a codificar el botón Buscar, no olvidemos importar System.Data.SqlClient al inicio, en la parte general. Para la Modificación merecemos esforzarnos un poco más porque ya aprendimos a usar la herramienta en los formularios anteriores. El Código Completo quedaría así:
Imports System.Data.SqlClient
Partial Class modificacionusuario
Inherits System.Web.UI.Page
Protected Sub btnBuscar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnBuscar.Click
Try
Dim vNombre As String = Me.txtNombre.Text
Dim SqlString As String = ConfigurationManager.ConnectionStrings("prueba").ConnectionString
Dim conexion As New SqlConnection(SqlString)
'Lmpiamos las Cajas de Mensaje
Me.lblMsgUno.Text = ""
Me.lblMsgDos.Text = ""
conexion.Open()
Dim comando As New SqlCommand("SELECT Nombre, Clave, Email FROM USUARIO " _
& "WHERE Nombre ='" & vNombre & "'", conexion)
Dim registro As SqlDataReader = comando.ExecuteReader
If registro.Read Then
Me.txtClave.Text = registro("clave")
Me.txtEmail.Text = registro("Email")
'Deshabilitamos el TextBox del Nombre para evitar que los datos de un usuario
'se inyecten en otro usuario
Me.txtNombre.Enabled = False
'Habilitamos el botón de nueva consulta para permitir realizar una nueva consulta
Me.btnConsulta.Enabled = True
Else
Me.lblMsgUno.Text = "No existe registro para ese usuario"
End If
Catch ex As SqlException
Me.lblMsgUno.Text = ex.Message
End Try
End Sub
Protected Sub btnModificar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnModificar.Click
Try
Dim SqlString As String = ConfigurationManager.ConnectionStrings("prueba").ConnectionString
Dim conexion As New SqlConnection(SqlString)
Dim vNombre As String = Me.txtNombre.Text
Dim vClave As String = Me.txtClave.Text
Dim vEmail As String = Me.txtEmail.Text
conexion.Open()
Dim comando As New SqlCommand("UPDATE USUARIO SET " & _
"Clave='" & vClave & "' ," & _
"Email='" & vEmail & "'" & _
"WHERE Nombre='" & vNombre & "'", conexion)
Dim cant As Integer = comando.ExecuteNonQuery()
If cant = 1 Then
Me.lblMsgDos.Text = "Datos Modificados"
Else
Me.lblMsgDos.Text = "No existe el Usuario"
End If
conexion.Close()
Catch ex As SqlException
Me.lblMsgDos.Text = ex.Message
End Try
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.btnConsulta.Enabled = False
End Sub
Protected Sub btnConsulta_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnConsulta.Click
'Limpia los campos
Me.txtClave.Text = ""
Me.txtEmail.Text = ""
Me.txtNombre.Text = ""
'Permite ingresar un nuevo Nombre a Consulta
Me.txtNombre.Enabled = True
End Sub
End Class
Y ahora solo queda probarlo:
Mas adelante iremos modificando esta misma aplicación con detalles mas profesionales, pero por el momento tenemos con esto para crear un Mantenimiento Sencillo.
Si se me quedo algún punto, ejemplo el HyperLink de retorno de la pantalla de Borrar espero posteriormente ir subiendo los ejemplos con su respectivo código para que los descarguen y eso incluye los que ya están hechos (inclyendo este). Terminamos este Tutorial, si les gusta están los botones sociales para darle más publicidad al blog.
Fuente:
ASP .NET Ya
.jpg)
