Portafolio 3er parcial

Programacin de aplicaciones web

Benjamin Gutierrez Valdez

BGV_FORMULARIO Marco terico Un formulario permite que nuestra pgina web sea ms dinmica por parte del usuario y a nosotros como programadores nos permite recopilar diversa informacin para poderla almacenar en una base de datos por ejemplo. Entre los diferentes controles que se pueden tener para agregar a nuestros formularios son:

Cuadros de texto -> Permite agregar texto por medio de teclado. Etiquetas -> Muestran leyendas al usuario. Select -> Muestra una lista desplegable para la seleccin de alguna de las opciones. Botn -> Botn que permite realizar funciones en la pgina como podra ser mandar un email u ocultar o des ocultar un men de opciones entre otras.

Cdigo <form id="frmRegistro" name="frmRegistro" method="post" action="altaUsuario.php"></form> <label for="txtUsuario">Usuario:</label> <input name="txtUsuario" class="texto" id="txtUsuario" placeholder="Nombre de usuario"/> <textarea class="areadetexto" id="txtDireccion" cols="10" #4567"></textarea> type="text" required

name="txtDireccion"

rows="5" placeholder="Ejemplo: Col. Las lomas

<input class="botonenviar" name="btnEnviar" type="submit" value="Enviar"/>

BGV_FORMULARIO 2 Marco terico El control select permite elegir una opcin de la lista desplegable que nos muestra, pero cmo llenamos esa lista de valores? Para indicar que valores tendr nuestra lista debemos indicarlas con el tag <option>. Cdigo <select name="municipios" id="municipios"> <option>Municipio</option> <option value="Cuautepec">Cuautepec</option> <option value="Ixmiquilpan">Ixmiquilpan</option> <option value="Pachuca">Pachuca</option> <option value="Santiago">Santiago</option> <option value="Tulancingo">Tulancingo</option> </select> Pantallas

BGV_SCRIPT Marco terico Los scripts nos permiten realizar funciones dentro de nuestra pgina web que necesitamos para realizar diferentes tareas ya sea mostrar la hora y fecha o pequeas validaciones dentro de esta. Un script se define dentro de la etiqueta <script></script> Para nuestro caso el tipo de script que utilizamos es JavaScript, que se determina en la propiedad type. Cdigo <p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script>

Pantallas

BGV_PRCTICA 4 Marco terico Una vez que comenzamos a trabajar con JavaScript, veremos que ya hay algunas funciones propuestas en dentro de algunas libreras, tales como lo son JQuery, y con la que estaremos trabajando ser con la llamada Validity. Cdigo <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript">

$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });

}); </script> Pantallas

BGV_PRCTICA 5 Marco terico La versin validity de JQuery nos permite realizar diferentes validaciones para nuestros formularios, por ejemplo que nuestros campos no estn vacos, o que el formato de la informacin sea el requerido, por ejemplo a la hora de ingresar una direccin de correo que ste sea valido o las contraseas sean iguales, entre otras tantas funciones ms. Cdigo <script type="text/javascript" src="Jquery/jquery/jquery.js"></script> <script type="text/javascript" src="Jquery/jquery/jQuery.validity.min.js"></script>

<script type="text/javascript"> $(function(){ $("form").validity(function(){ $("input").require("El campo no debe de estar vaco"); $("#txtEmail").match("email","La direccin de correo no es vlida").require("El campo no debe de estar vacio"); $("#txtMensaje").require("El campo no debe de estar vaco"); $("#txtNumero").match("number","Debe de ser un nmero"); }); }); </script> Pantallas

BGV_PRCTICA 6 Marco terico Usaremos una funcin con nombre equal, esta funcin nos permite evaluar los valores que se agregan a nuestro formulario y determinar si son iguales, tambin disponemos de una funcin similar pero se denomina distinct, esta nos permite evaluar si son distintas. Cdigo <link type="text/css" rel="stylesheet" href="JQuery/jquery/jquery.validity.css"/> <script type="text/javascript" src="Jquery/jquery/jquery.js"></script> <script type="text/javascript" src="Jquery/jquery/jQuery.validity.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("form").validity(function(){ $(".nuevas").equal("Las contraseas no coinciden"); $("#txtPassActual,#txtPassNew").distinct("Las contraseas deben de ser diferentes"); }); }); </script> Pantallas

Portafolio 3er parcial

Programacin de aplicaciones web

Benjamin Gutierrez Valdez

Marco terico index: ndex de la pgina, aqu se muestran finalmente ya todos los requerimientos hechos como por ejemplo login, contactoetc.

Marco terico bsqueda de casas: En esta pantalla se muestra lo que es el apartado de bsqueda de casa, como puede visualizarse en la imagen, da la opcin de elegir en que municipio quiere realizar la bsqueda, selecciona su municipio y da clic en buscar.

Marco terico galera: En esta otra captura se puede visualizar la galera de imgenes de las casas que estn en venta

Marco terico contacto: Aqu podemos ver la seccin de contctanos, en el cual podemos llenar el formulario y enviar el mensaje deseado para los administradores de la pgina.

Marco terico login: Esta es la pantalla de login, en la cual el administrador inicia sesin y puede en ella ver los mensajes que le han enviado con respecto a la venta de las casas.

Marco terico cuenta de usuario: Aqu se muestra ya la sesin iniciada del administrador y en ella las opciones que todo administrador debe tener (agregar casa, eliminar casas, etc.).

Marco terico informacin personal: En esta pantalla se muestra la opcin de la informacin personal en este caso solo es la contrasea y si se quiere cambiar pues ya se dan las opciones.

Marco Terico men casas: En esta pantalla se muestran las opciones de agregar y buscar casas.

Marco Terico agregar casas: En esta pantalla se muestra la opcin de agregar una casa, pide lo que es la ubicacin de la misma y obviamente lo que son las caractersticas, una vez ya realizado esto se le da clic en el botn enviar y listo la casa ha sido agregada a la BD.

Marco Terico bsqueda de casas: Se muestra en pantalla la opcin de bsqueda de casas, en ella se ingresa la ubicacin de la misma y enseguida muestra una tabla con las casas disponibles en la ubicacin ingresada anteriormente.

Y bueno, aqu se muestra lo antes ya mencionado, es decir, la tabla con la ubicacin y las caractersticas de las casas en la ubicacin que se ingres inicialmente.

Marco Terico usuarios: En esta pantalla se muestra la opcin de usuarios y da las opciones de crear y buscar usuarios. Enseguida se detallar cada una de las pantallas.

Marco terico agregar usuario: En este apartado se visualiza la parte de agregar usuario en la cual pide llenar los campos solicitados para que se pueda cumplir al 100% el registro del usuario, en caso de que falte algn campo por llenar se le solicitar que llene todos los campos.

Marco terico buscar usuario: En esta pantalla se muestra la opcin de buscar usuario y en la cual podemos ver en una tabla los datos del usuario al que se le solicit la bsqueda como se muestra en la pantalla siguiente.

Por ltimo en esta pantalla se muestran los datos del usuario buscado anteriormente.