Mapa de Sitio: Mercado de Residuos y Sustancias Químicas
4.5.2 Creación y Diseño de la Plantilla Principal (Maestra) en Visual Studio
Una vez que se realizó el CSS del sitio, ahora se puede cargar en Microsoft Visual Studio como la hoja de estilo que se utilizará para realizar la página Maestra del Sitio.
73 Figura 4.6.Código aspx.cs de plantilla Maestra “Site Master”.
Una vez que abrimos el IDE y cargamos la hoja de estilo, empezamos a agregar el menú principal y los objetos que se encontrarán en todas las páginas del sitio. En este caso, se agregó el Título, el Menú de Navegación, un Logotipo del IPN y el Botón de Inicio de Sesión. Esos son los componentes principales que aparecerán en todo el sitio y por lo tanto se asignarán como elementos fijos en el Site Master.
Figura 4.7. Vista Diseño de la Plantilla “Site Master”.
Una vez realizado el Site Master, se le da clic derecho a cada una de las páginas creadas y se le aplica la plantilla Maestra. De este modo ya todas las páginas estarán referenciadas al Sitio Maestro y tendrán el Diseño General sin que se pueda modificar. De este modo se vuelve más seguro el desarrollo de las siguientes páginas, ya que la parte del diseño general queda bloqueado.
74 4.5.3 Desarrollo de la Aplicación WEB en ASP.Net con Visual Studio 2010
Una vez que se tiene la plantilla Maestra se procede a armar todas las páginas del sitio WEB. Se inició con la página principal y posteriormente se realizaron todas las demás páginas, dejando las que van referenciadas a una base de datos al final por ser más complejas que las demás (donde normalmente solo se involucra HTML y no funciones de ASP).
Figura 4.8. Página de Inicio “Default.aspx”.
En la página de Inicio se da una introducción al usuario a la Aplicación de Intercambio de Residuos y Sustancias Químicas. De igual manera se le invita a registrarse o a iniciar sesión para iniciar la búsqueda de sustancias y residuos, o realizar una acción de oferta/demanda dentro del mismo.
Esta es la página principal que aparecerá al entrar a la página por medio de una IP, por lo cual se ha decidido dejar la interfaz lo más amigable y sencilla (fácil de leer) para el usuario. Información detallada se dará a conocer en otras secciones del sitio.
75 Figura 4.9. Vista Diseño de la sección de Búsqueda de Residuos y Sustancias.
En la sección de búsqueda se agregó un pequeño formulario con el nombre, tipo y acción que se quiere buscar con el fin de ejecutar un comando y se extraiga información de la base de datos. En esta sección se requiere ligar un botón a la base para poder obtener información, código que se mostrará más adelante ya que por el momento solo se realizará el diseño.
76 Figura 4.10. Vista Diseño de la sección de Ofertas y Demandas.
La sección de Ofertas y Demandas es la más compleja del sitio, ya que requiere llenar un formulario bastante amplio donde se podrá ofertar y/o demandar alguna sustancia o residuo químico, por lo cual se requiere que llene datos técnicos como el CAS, el CPR, Tipo de Sustancia o Residuo, Estado y demás características de acuerdo a las normas establecidas para el manejo de sustancias.
Debido a que inicialmente se lanzará una prueba piloto en la Unidad Profesional Interdisciplinaria de Biotecnología (UPIBI) con un cierto grupo de alumnos y profesores, se asignaron funciones de creación, borrado y actualización de datos en esta sección. Posteriormente se tendría que mantener todo este tipo de actividades bajo un registro y control para que no se haga mal uso de esta aplicación WEB, y con una persona encargada de administrar y validar todos los procesos con previa autorización.
Adicionalmente, se agregaron procesos de validación en todos los campos ya sea porque fuesen campos de datos obligatorios, o para validar que esté bien escrito un
77
nombre, dirección de correo electrónico y también evitar que se creen bases de datos sin datos ya sea por equivocación o intencionalmente. Esta página solo puede ser vista una vez que el usuarios es registrado y validado por un administrador.
Figura 4.11. Vista Diseño de la sección de Enlaces.
En la sección de Enlaces se agregaron los logotipos de todos los departamentos e Instituciones a las cuales está ligada esta Aplicación con su respectivo enlace a su página WEB.
78 Figura 4.12.Vista Diseño de la sección “Conócenos”.
En la sección “Acerca del Sitio” se explica de manera más detallada cual es el
propósito y función de la Aplicación de Sustancias y Residuos Químicos. De igual manera, se explican las Normas y Leyes a las cuales está apegada esta aplicación y que se deben tener en cuenta a la hora de hacer uso de la misma.
79 Figura 4.13. Vista Diseño de la sección de Eventos y Noticias.
La sección de Eventos y Noticias es una sección que será encargada a una persona la cual deberá ser actualizada con Noticias y los últimos Eventos relacionados a la industria química y especialmente al manejo de Sustancias y Reactivos, pero no limitada a esto.
80 Figura 4.14. Vista Diseño de la sección de Inicio de Sesión.
Finalmente, se crearon 2 páginas para el usuario, donde podrá registrarse para ser miembro de esta aplicación, o en caso de ser ya miembro, iniciar sesión con su cuenta. Primeramente se trabajó en la sección de inicio de Sesión, donde se pide el Nombre de Usuario y Contraseña para poder iniciar sesión. De igual manera se da la
opción de guardar la información de las “cookies” para no tener que iniciar sesión cada
81 Figura 4.15. Vista Diseño de la sección de Registro de Usuario.
Posteriormente se creó la sección de registro, que lleva un formulario ligado a una base de datos donde se guarda todo el registro de los miembros de esta aplicación, con sus respectivos datos indispensables como lo son: nombre, unidad académica a la que pertenece, correo electrónico y contraseñas.
También se incluye los respectivos validadores para que no existan registros vacíos o llenados de manera incorrecta. Una vez que se ha creado un registro se podrá iniciar sesión con su cuenta en la Sección anterior, que es accesible desde cualquier página del sitio WEB incluyendo la página de Inicio.
82 4.5.4 Creación de Bases de Datos y Vinculación a la Aplicación
Posteriormente se creó la base de datos con sus respectivas tablas. Dentro de este proceso, se definió que se requiere una tabla para las Sustancias y Residuos Químicos, y otra base de Datos con una tabla de los usuarios. Adicionalmente, se requieren tablas para las Unidades Académicas participantes, y posteriormente se piensa realizar una tabla que contenga los números de CAS (que ascienden a miles de registros).
Por el momento, se crearon las tablas principales; la de Sustancias y Residuos Químicos para buscar, ofertar y/o demandar, y la de Usuarios para que se empiece a realizar el registro de los mismos. En la figura 4.16 se muestra la tabla para el registro de usuarios y sus respectivas variables y tipos de datos asignados a cada una.
Figura 4.16. Definición de atributos y tipos de Datos de la tabla Usuarios.
Estas tablas se realizaron directamente en SQL Server 2008 que viene integrado en Visual Studio 2010, sin embargo, para las tablas de prueba que se querían generar en UPIBI, se utilizó Microsoft Access 2007/2010 y posteriormente se convirtieron las tablas a un archivo con extensión .mdf para trabajarse en SQL Server.
En la figura 4.17 se muestra la tabla de las Sustancias y Residuos Químicos con sus respectivas variables y tipo de datos a guardar en la base de datos.
83 Figura 4.17. Definición de atributos y tipos de Datos de la tabla Formulario.
Finalmente, para ligar las Bases de Datos a la aplicación WEB se asignaron distintos botones (Crear, Actualizar y Borrar) y se asignaron los comandos SQL respectivos para cada acción en el código.
84
En el archivo aspx.cs se asignan las funciones para trabajar con la base de datos. Se crea una cadena de conexión y se abre para realizar un proceso y posteriormente se cierra. La función BEnvia_Click es el que se encarga de enviar una oferta o demanda a la base de datos. La función BBorra sirve para eliminar alguna oferta/demanda, y la función BActualiza nos permite actualizar la cantidad de material que se está ofertando o demandando.
public partial class About : System.WEB.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void BEnvia_Click(object sender, EventArgs e)
{
SqlConnection tabla = new
SqlConnection(SqlDataSource1.ConnectionString.ToString()); SqlCommand cmd;
tabla.Open();
cmd = new SqlCommand("INSERT into Formulario values ('" + DDLOD.SelectedItem.Value + "','" + TBNombre.Text + "','" + DDLTipo.SelectedItem.Value + "','" +
DDLEstado.SelectedItem.Value + "','" + TBCPR.Text + "','" + DDLCAS.SelectedItem.Value +
"','" + RBLCantidad.SelectedItem.Value + "'," + TBCantidad.Text + ",'" + DDLPeriodo.SelectedItem.Value + "','" + TBObservaciones.Text + "','" + DDLVigencia.SelectedItem.Value + "')", tabla); cmd.ExecuteNonQuery(); tabla.Close(); }
protected void BBorra_Click(object sender, EventArgs e)
{
SqlConnection tabla = new
SqlConnection(SqlDataSource1.ConnectionString.ToString()); SqlCommand cmd;
tabla.Open();
cmd = new SqlCommand("DELETE from Formulario WHERE Nombre='"+TBNombre.Text+"' AND TipoA='"+DDLOD.SelectedItem.Value+"'", tabla);
cmd.ExecuteNonQuery(); tabla.Close();
}
protected void BActualiza_Click(object sender, EventArgs e)
{
SqlConnection tabla = new
SqlConnection(SqlDataSource1.ConnectionString.ToString()); SqlCommand cmd;
tabla.Open();
cmd = new SqlCommand("UPDATE Formulario SET Cantidad="+TBCantidad.Text+" WHERE Nombre='"+TBNombre.Text+"'", tabla);
cmd.ExecuteNonQuery(); tabla.Close();
} }
85 Figura 4.19. Exportación de los archivos para su posterior publicación.
Una vez afinados todos los detalles del prototipo el cual se pondrá a prueba, se da clic derecho en la aplicación que se encuentra en el Explorador de Soluciones y se
generan los archivos a utilizar presionando “Publicar Sitio WEB”. Este IDE también
permite publicar el Sitio WEB directamente con un FTP o incluso con Servicios de Información de Internet (IIS), demostrando así que es una herramienta muy completa para el desarrollo de software en todas sus etapas.
86