Hola Amigos, muchos de ustedes quizas esten iniciandose en la carrera de sistemas y tengan dudas de como hacer un Alta, Baja y Modificación de Registros de una Base de Datos desde una Pagina Web.
Por eso les acerco este post completamente hecho por mi, paso a paso de como lo pueden hacer.
Utilizando un lenguaje muy menospreciado como es el Visual Basic Script y con un Motor (?) Access..
Si queres mas información de lo que es una base de datos podes
Si necesitas mas info de la carrera de sistemas podes Ir a
Este post está orientado, mas que nada a la gente que tenga conocimientos basicos sobre html y programación..pero cualquiera, investigando un poco se puede inmiscuir
Este sistemita no está orientado al diseño, se enfoca en la parte de programación
NOTA: EL POST ES 100% DE MI AUTORIA, ASI QUE POR FAVOR, SEPAN VALORAR EL ESFUERZO, COMETANDO SIEMPRE CON RESPETO.
¿Que es un ABM?
Es un conjunto de operaciones programadas que permiten realizar listados, modificar, borrar, buscar, o manipular datos desde una fuente externa a una base de datos sin usar un gestor predeterminado del motor. Mediante una conexion entre dicha fuente o programa (Browser en este caso) y la base de datos en cuestión.
¿Para que sirve?
Imaginemos:
Uno va a hacerse socio de una mutual..En dicha mutual, el que lo atiende le pide sus datos para ingresarlos en la base de datos. Esto se conoce como ALTA
Despues resulta que nos cambiamos de domicilio. Por lo que, luego de un tiempo, nuestra direccion vieja tendra que modificarse por la nueva en el sistema de la mutual. Este proceso se conoce como MODIFICACION
Pasado unos meses, nos damos cuenta de que esa mutual, no presta los servicios que nosotros creiamos, o directamente no la necesitamos mas, por lo que solicitamos una BAJA de nuestra cuenta.
Ahora si pasemos a la parte practica..
Primero que nada vamos al Access (no me puteen ya se que no hay como SQL o MySql ) Y creamos una tabla, bien simple llamada productos:
Solamente utilizaremos esta tabla para hacerlo bien sencillo
Una vez que tenemos esto vamos al Dreamweaver, declaramos el sitio
Y com primer paso creamos el archivo que va a contener la conexión a la base de datos. El Include
Este es el include, que contiene la cadena de conexion. A continuacion la explicare por partes:
Se crea una variable comun llamada "ruta" (puede ser cualquier nombre que queramos, en donde se almacena la ruta fisica donde se encuentra la base de datos en el servidor. Como nosotros tenemos la base de datos dentro de la carpeta donde estan los archivos que van a acceder a ella, simplemente ponermos su nombre y extensión.
Se setea una variable comun llamada "conn" (puede ser cualquier nombre) en donde se almacena un objeto del servidor, llamado Connection. La cual sirve para justamente, tanto para abrir la conexion a la base de datos, mediante una cadena de conexión (que se encuentra en el paso siguiente) como para cerrarla.
Se setea una variable comun llamada "rs" (puede ser cualquier nombre) en donde se almacena un objeto del servidor, llamado recordset . Este objeto (o variable en este caso) nos va a servir de variable intermediaria entre lo que traigamos de la base de datos y lo que mostremos en la pagina
Mediante la variable anteriormente creada "conn" abrimos la conexion, asignandole una cadena de conexión..la cual, la seccion donde se debe ingresar el origen de los datos (Data Source) se asigna la variable "ruta" explicada en el primer punto
Luego en primer lugar creamos un index o pagina de inicio, donde se encontrara un muy sencillo menú con solamente 2 opciones, que nos linkearan a las otras secciones
Continuamos con la primer pagina con codigo de programacion, el listado:
En primer lugar realizamos la inclusion del archivo que contiene la cadena de conexion y los objetos del servidor (que nosotros llamamos "include" ). Esto se puede hacer haciendo click en "Insertar/Server Side Include/Seleccionamos el archivo. Dicho paso se encuentra realizado en la instruccion anterior
Establecemos una variable llamada "txtlista" en donde se almacena la consulta a la base de datos que trae todos los campos de la tabla productos
A la variable (objeto de servidor) "rs" asignamos la ejecucion de la consulta mediante la instrucción (set rs = conn.execute( "nombre de la variable que contiene la consulta" ))
Realizamos la impresion en pantalla de los campos (mediante el objete response.write o <%= 'Lo que queremos imprimir' %> , mediante el rs y el nombre (tambien puede ser el numero) de campo..es importante hacerlo dentro de un ciclo DO WHILE NOT RS.EOF --esto quiere decir que se va a realizar la impresion en la pantalla mientras que el RS no llegue al final de la tabla. Cuando lo haga, dejara de mostrar resultados en pantalla. Para que avance campo por campo en la tabla se realiza un movenext y para que repita el bucle se pone un loop.
Yo ordené los resultados dentro de 1 Tabla que tiene (1 fila y 3 columnas) cuyas filas van a ir aumentando segun la cantidad de resultados se traiga y cuantas iteraciones o repeticiones haga el ciclo do while..es IMPORTANTE que la tabla este declarada fuera del bucle asi como su cierre </table>. Porque sino en vez de filas va a repetir tablas y va a ser un lio.
Agregué dos columnas mas a la tabla ademas de la que te trae los resultados: La primera EDICION: Por cada resultado que te traiga de la base de datos, va a haber un link (<a href: "editar.asp"?=ID=<%=rs( "id_producto" ) "> ese link tiene, despues del destino ("editar.asp" ) un simbolo de pregunta, ese simbolo significa que se va a pasar un campo de la base de datos ("id_producto" ) mediante el ya mencionado RS..esta informacion se va a guardar en la variable "ID" que se encuentra luego del simbolo de pregunta que se va a pasar a la siguiente pagina mediante el metodo GET .
Igual pasa con la columna ELIMINACION, lo unico diferente es que cambia el destino ("eliminar.asp" )
Acá está todo el codigo del listado
Y así se ve en el navegador
Bien, hasta ahi tenemos hecha la primera operacion (el Listado de datos) pero esta no entra en el ABM.
Por lo que comenzaremos por la Modificacion/Edicion o Actualizacion de datos
Recuperacion de datos mediante QueryString
Recuperamos en una nueva variable (a) lo que enviamos desde el listado (la variable "ID" ). Al ser metodo GET se recupera de la siguiente manera request.QueryString("ID" )
Una vez que recuperamos la variable (ID), ya tenemos en nuestro poder el id del producto (porque fue el campo recuperado desde la base de datos que guardamos en la variable "ID", que pasamos a nuestra nueva pagina y recuperamos mediante el metodo querystring guardandola en la variable (a)). Por lo cual podremos hacer una consulta (de actualizacion, listado o eliminacion) agregandole como filtro, ese campo.
Creamos una nueva consulta para que nos devuelva exclusivamente el campo que nosotros queremos cambiar...simplemente para mostrarlo y saber que tenemos, antes de editar. Esta consulta se guarda en la variale (txtprod) y le ponemos como filtro de id_producto, la variable (a) en donde se guardo lo recuperado mediante querystring ("&a&" ). Y lo ejecutamos como habiamos aprendido.
Ahora procederemos a ingresar los nuevos valores: Primero creamos un formulario que va a contener una nueva fila con 4 columnas, que a la vez 3 de ellas, van a contener cajas de texto en donde se van a ingresar los nuevos valores (nombre, precio y marca) para el producto que deseamos modificar. Este formulario va a enviar todos sus elementos juntos, mediante el metodo POST. Por lo que cada elemento debe tener un identificador para luego ser recuperado. En este caso el identificador de las cajas de texto es la propiedad "name" (nom, pre, mar). Para que pueda enviar el formulario es necesario un botón ("Modificar". FIJARSE QUE SIEMPRE ESTE ACTIVADA LA OPCION "Enviar Formulario". Yo puse en un campo oculto de nuevo la ID recuperada por querystring para agilizar la consulta de actualizacion en la proxima pagina
Asi se ve en el browser
Nuevamente recuperamos los valores pasados con el formulario, esta vez con el metodo POST. -- (OFF TOPIC: Ojo tanto el metodo post como el metodo get, estan explicados en su forma practica en PHP)-- Por lo tanto la forma de recuperarlo es a traves de Request.Form()
Y llevamos a cabo la consulta de modificación. Es muy importante acordarse de los permisos sobre el archivo de la base de datos, si no tenemos los PERMISOS , nos va a dejar leer los datos pero NO MODIFICARLOS NI BORRARLOS. Tambien dichos permisos deben estar sobre la CARPETA EN LA CUAL SE ENCUENTRA LA BASE DE DATOS.
Como vemos, guardamos en la variable "txtmodifica" la consulta de actualizacion a los campos, asignandoles a cada uno los valores escritos en las cajas de texto de la pagina anterior y enviados por el formulario.
Y asi, llevamos a cabo la primer operacion del ABM..seguimos ahora con la ELIMINACION
Recuperamos la variable (ID) que pasamos en el link para eliminar mediante el metodo QueryString
Realizamos una previa muestra de lo que vamos a eliminar mediante una consulta Select
Pasamos nuevamente el id del producto mediante el metodo GET, pero esta vez a traves de la variable (a)
Aca todo el codigo pre eliminación
En el Browser
Finalmente, en la siguiente pagina, recuperamos el ID del producto, como aprendimos con QueryString, mediante el cual vamos a poder realizar la eliminación, utilizandolo como filtro .
Y realizamos la consulta de eliminacion, utilizando la variable (a) que contiene el id..como filtro
Ahora solamente nos falta el ALTA, procederemos a hacerlo:
Para ello tenemos un formulario, en el cual ponemos 3 campos de texto para introducir valores que iran en los nuevos campos.. El formulario se enviara con metodo post
Aca recuperamos los valores que enviamos desde el formulario (nom, pre, mar)
Y realizamos la inserción..el campo Id_producto no es necesario porque al ser autonumerico, al ingresar los demas campos se genera solo.
Bueno amigos, ya estoy cansado jaja, acá terminamos nuestro ABM, les repito, por favor no hagan bardo, si comentan haganlo con respeto y cualquier duda que tengan, no duden en preguntarme.
Gracias!!!
Mirá Posts Relacionados con Sistemas:
Y ahora como diria Arnold: Comenta o Muere!
Por eso les acerco este post completamente hecho por mi, paso a paso de como lo pueden hacer.
Utilizando un lenguaje muy menospreciado como es el Visual Basic Script y con un Motor (?) Access..
Si queres mas información de lo que es una base de datos podes
Si necesitas mas info de la carrera de sistemas podes Ir a
Este post está orientado, mas que nada a la gente que tenga conocimientos basicos sobre html y programación..pero cualquiera, investigando un poco se puede inmiscuir
Este sistemita no está orientado al diseño, se enfoca en la parte de programación
NOTA: EL POST ES 100% DE MI AUTORIA, ASI QUE POR FAVOR, SEPAN VALORAR EL ESFUERZO, COMETANDO SIEMPRE CON RESPETO.
¿Que es un ABM?
Es un conjunto de operaciones programadas que permiten realizar listados, modificar, borrar, buscar, o manipular datos desde una fuente externa a una base de datos sin usar un gestor predeterminado del motor. Mediante una conexion entre dicha fuente o programa (Browser en este caso) y la base de datos en cuestión.
¿Para que sirve?
Imaginemos:
Uno va a hacerse socio de una mutual..En dicha mutual, el que lo atiende le pide sus datos para ingresarlos en la base de datos. Esto se conoce como ALTA
Despues resulta que nos cambiamos de domicilio. Por lo que, luego de un tiempo, nuestra direccion vieja tendra que modificarse por la nueva en el sistema de la mutual. Este proceso se conoce como MODIFICACION
Pasado unos meses, nos damos cuenta de que esa mutual, no presta los servicios que nosotros creiamos, o directamente no la necesitamos mas, por lo que solicitamos una BAJA de nuestra cuenta.
Ahora si pasemos a la parte practica..
Primero que nada vamos al Access (no me puteen ya se que no hay como SQL o MySql ) Y creamos una tabla, bien simple llamada productos:
Solamente utilizaremos esta tabla para hacerlo bien sencillo
Una vez que tenemos esto vamos al Dreamweaver, declaramos el sitio
Y com primer paso creamos el archivo que va a contener la conexión a la base de datos. El Include
Este es el include, que contiene la cadena de conexion. A continuacion la explicare por partes:
Se crea una variable comun llamada "ruta" (puede ser cualquier nombre que queramos, en donde se almacena la ruta fisica donde se encuentra la base de datos en el servidor. Como nosotros tenemos la base de datos dentro de la carpeta donde estan los archivos que van a acceder a ella, simplemente ponermos su nombre y extensión.
Se setea una variable comun llamada "conn" (puede ser cualquier nombre) en donde se almacena un objeto del servidor, llamado Connection. La cual sirve para justamente, tanto para abrir la conexion a la base de datos, mediante una cadena de conexión (que se encuentra en el paso siguiente) como para cerrarla.
Se setea una variable comun llamada "rs" (puede ser cualquier nombre) en donde se almacena un objeto del servidor, llamado recordset . Este objeto (o variable en este caso) nos va a servir de variable intermediaria entre lo que traigamos de la base de datos y lo que mostremos en la pagina
Mediante la variable anteriormente creada "conn" abrimos la conexion, asignandole una cadena de conexión..la cual, la seccion donde se debe ingresar el origen de los datos (Data Source) se asigna la variable "ruta" explicada en el primer punto
Luego en primer lugar creamos un index o pagina de inicio, donde se encontrara un muy sencillo menú con solamente 2 opciones, que nos linkearan a las otras secciones
Continuamos con la primer pagina con codigo de programacion, el listado:
En primer lugar realizamos la inclusion del archivo que contiene la cadena de conexion y los objetos del servidor (que nosotros llamamos "include" ). Esto se puede hacer haciendo click en "Insertar/Server Side Include/Seleccionamos el archivo. Dicho paso se encuentra realizado en la instruccion anterior
Establecemos una variable llamada "txtlista" en donde se almacena la consulta a la base de datos que trae todos los campos de la tabla productos
A la variable (objeto de servidor) "rs" asignamos la ejecucion de la consulta mediante la instrucción (set rs = conn.execute( "nombre de la variable que contiene la consulta" ))
Realizamos la impresion en pantalla de los campos (mediante el objete response.write o <%= 'Lo que queremos imprimir' %> , mediante el rs y el nombre (tambien puede ser el numero) de campo..es importante hacerlo dentro de un ciclo DO WHILE NOT RS.EOF --esto quiere decir que se va a realizar la impresion en la pantalla mientras que el RS no llegue al final de la tabla. Cuando lo haga, dejara de mostrar resultados en pantalla. Para que avance campo por campo en la tabla se realiza un movenext y para que repita el bucle se pone un loop.
Yo ordené los resultados dentro de 1 Tabla que tiene (1 fila y 3 columnas) cuyas filas van a ir aumentando segun la cantidad de resultados se traiga y cuantas iteraciones o repeticiones haga el ciclo do while..es IMPORTANTE que la tabla este declarada fuera del bucle asi como su cierre </table>. Porque sino en vez de filas va a repetir tablas y va a ser un lio.
Agregué dos columnas mas a la tabla ademas de la que te trae los resultados: La primera EDICION: Por cada resultado que te traiga de la base de datos, va a haber un link (<a href: "editar.asp"?=ID=<%=rs( "id_producto" ) "> ese link tiene, despues del destino ("editar.asp" ) un simbolo de pregunta, ese simbolo significa que se va a pasar un campo de la base de datos ("id_producto" ) mediante el ya mencionado RS..esta informacion se va a guardar en la variable "ID" que se encuentra luego del simbolo de pregunta que se va a pasar a la siguiente pagina mediante el metodo GET .
Igual pasa con la columna ELIMINACION, lo unico diferente es que cambia el destino ("eliminar.asp" )
Acá está todo el codigo del listado
Y así se ve en el navegador
Bien, hasta ahi tenemos hecha la primera operacion (el Listado de datos) pero esta no entra en el ABM.
Por lo que comenzaremos por la Modificacion/Edicion o Actualizacion de datos
Recuperacion de datos mediante QueryString
Recuperamos en una nueva variable (a) lo que enviamos desde el listado (la variable "ID" ). Al ser metodo GET se recupera de la siguiente manera request.QueryString("ID" )
Una vez que recuperamos la variable (ID), ya tenemos en nuestro poder el id del producto (porque fue el campo recuperado desde la base de datos que guardamos en la variable "ID", que pasamos a nuestra nueva pagina y recuperamos mediante el metodo querystring guardandola en la variable (a)). Por lo cual podremos hacer una consulta (de actualizacion, listado o eliminacion) agregandole como filtro, ese campo.
Creamos una nueva consulta para que nos devuelva exclusivamente el campo que nosotros queremos cambiar...simplemente para mostrarlo y saber que tenemos, antes de editar. Esta consulta se guarda en la variale (txtprod) y le ponemos como filtro de id_producto, la variable (a) en donde se guardo lo recuperado mediante querystring ("&a&" ). Y lo ejecutamos como habiamos aprendido.
Ahora procederemos a ingresar los nuevos valores: Primero creamos un formulario que va a contener una nueva fila con 4 columnas, que a la vez 3 de ellas, van a contener cajas de texto en donde se van a ingresar los nuevos valores (nombre, precio y marca) para el producto que deseamos modificar. Este formulario va a enviar todos sus elementos juntos, mediante el metodo POST. Por lo que cada elemento debe tener un identificador para luego ser recuperado. En este caso el identificador de las cajas de texto es la propiedad "name" (nom, pre, mar). Para que pueda enviar el formulario es necesario un botón ("Modificar". FIJARSE QUE SIEMPRE ESTE ACTIVADA LA OPCION "Enviar Formulario". Yo puse en un campo oculto de nuevo la ID recuperada por querystring para agilizar la consulta de actualizacion en la proxima pagina
Asi se ve en el browser
Nuevamente recuperamos los valores pasados con el formulario, esta vez con el metodo POST. -- (OFF TOPIC: Ojo tanto el metodo post como el metodo get, estan explicados en su forma practica en PHP)-- Por lo tanto la forma de recuperarlo es a traves de Request.Form()
Y llevamos a cabo la consulta de modificación. Es muy importante acordarse de los permisos sobre el archivo de la base de datos, si no tenemos los PERMISOS , nos va a dejar leer los datos pero NO MODIFICARLOS NI BORRARLOS. Tambien dichos permisos deben estar sobre la CARPETA EN LA CUAL SE ENCUENTRA LA BASE DE DATOS.
Como vemos, guardamos en la variable "txtmodifica" la consulta de actualizacion a los campos, asignandoles a cada uno los valores escritos en las cajas de texto de la pagina anterior y enviados por el formulario.
Y asi, llevamos a cabo la primer operacion del ABM..seguimos ahora con la ELIMINACION
Recuperamos la variable (ID) que pasamos en el link para eliminar mediante el metodo QueryString
Realizamos una previa muestra de lo que vamos a eliminar mediante una consulta Select
Pasamos nuevamente el id del producto mediante el metodo GET, pero esta vez a traves de la variable (a)
Aca todo el codigo pre eliminación
En el Browser
Finalmente, en la siguiente pagina, recuperamos el ID del producto, como aprendimos con QueryString, mediante el cual vamos a poder realizar la eliminación, utilizandolo como filtro .
Y realizamos la consulta de eliminacion, utilizando la variable (a) que contiene el id..como filtro
Ahora solamente nos falta el ALTA, procederemos a hacerlo:
Para ello tenemos un formulario, en el cual ponemos 3 campos de texto para introducir valores que iran en los nuevos campos.. El formulario se enviara con metodo post
Aca recuperamos los valores que enviamos desde el formulario (nom, pre, mar)
Y realizamos la inserción..el campo Id_producto no es necesario porque al ser autonumerico, al ingresar los demas campos se genera solo.
Bueno amigos, ya estoy cansado jaja, acá terminamos nuestro ABM, les repito, por favor no hagan bardo, si comentan haganlo con respeto y cualquier duda que tengan, no duden en preguntarme.
Gracias!!!
Mirá Posts Relacionados con Sistemas:
Y ahora como diria Arnold: Comenta o Muere!