TECNOLGICO DE ESTUDIOS SUPERIORES

DE ECATEPEC

MANUAL TCNICO
Grupo: 6801
Turno: Matutino
Asignatura:
Desarrollo de aplicaciones web
Alumnos:
Hernndez Roldn Omar Isaas
Oropeza Ibez Juana Gabriela
Conde Cedillo Azucena
Profesor:
Moreno Villalba Leonardo Miguel

Observaciones:________________________________________
_____________________________________________________
____________________________________________________

OBJETIVO:
Instruir el uso adecuado del Sistema de votacin de framework realizado en jsp, para el acceso
oportuno y adecuado al momento de realizar alguna modificacin u actualizacin al mismo, as
como la descripcin de la funcionalidad de cada pgina publicada en el mismo.

Tecnologas utilizadas:
JSP: Es una tecnologa Java que permite a los desarrolladores de software generar dinmicamente
HTML, XML u otros tipos de documentos, en respuesta al requerimiento de un cliente web.
Esta tecnologa permite que cdigos Java y ciertas otras acciones predefinidas, sean integrados en
contenido esttico.
HTML5: Es una coleccin de estndares para el diseo y desarrollo de pginas web . Est coleccin
representa la manera en que se presenta la informacin en el explorador de internet y la manera
de interactuar con ella.
Nos permite una mayor interaccin entre nuestras pginas web y contenido media (video, audio,
gifs, etc.) as como una mayor facilidad a la hora de codificar nuestro diseo bsico.
Esta versin de HTML contiene elementos dedicados ampliamente a mejorar la experiencia del
usuario en una pgina web, haciendo ms fcil al diseador poder agregar elementos multimedia,
as como organizar sus contenidos utilizando menos cdigo. Es muy eficiente y ocupa menos
recursos en la computadora del cliente, en particular mediante el uso del nuevo reproductor que
no requiere flash o adobe player para utilizarse, y siendo HTML5 compatible con las versiones
anteriores de HTML, utilizar esta versin en una pgina ya diseada implica un menor trabajo que
si fuera una coleccin completamente nueva.

CSS3: Mientras que HTML nos permite definir la estructura de una pgina web, las hojas de estilo
en cascada (Cascading Style Sheets) son las que nos ofrecen la posibilidad de definir las reglas y
estilos de representacin en diferentes dispositivos, ya sean pantallas de equipos de escritorio,
porttiles, mviles, impresoras u otros dispositivos capaces de mostrar contenidos web.
Las hojas de estilo nos permiten definir de manera eficiente la representacin de nuestras pginas
y es uno de los conocimientos fundamentales que todo diseador web debe manejar a la
perfeccin para realizar su trabajo.

A continuacin se muestra la forma en que se dividi el proyecto.

En la carpeta Source Packages se encuentran los siguientes paquetes:

En el paquete DAO se encuentran los archivos:

El archivo UsuarioDAO.java contiene el siguiente cdigo:

package DAO;
import EIS.BdManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import models.Usuario;
public class UsuarioDAO {
public boolean validaUser(Usuario usr) {
try {
BdManager bd = new BdManager();
PreparedStatement pstmt = bd.getConnection().prepareStatement("Select * from usuarios
where "
+ "usrName = ? and usrPass = ?");
pstmt.setString(1, usr.getUsrName());
pstmt.setString(2, usr.getUsrPass());
ResultSet rs = pstmt.executeQuery();
if (rs.next()) {
return true;
} else {
return false;
}
} catch (Exception e) {
e.printStackTrace();
System.out.println(e);

return false;
}
}
public boolean insertUser(Usuario usr) {
try {
BdManager bd = new BdManager();
PreparedStatement pstmt = bd.getConnection().prepareStatement("insert into usuarios
values"
+ "(null,?,?,?)");
pstmt.setString(1, usr.getUsrName());
pstmt.setString(2, usr.getUsrPass());
pstmt.setString(3, usr.getTipoUsr());
int rowAft = pstmt.executeUpdate();
if (rowAft <= 0) {
return false;
} else {
return true;
}
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
public ArrayList<Usuario> getUsers(){
try {
BdManager bd = new BdManager();

Statement stmt = bd.getConnection().createStatement();

ResultSet rs = stmt.executeQuery("Select * from usuarios;");
ArrayList<Usuario> lista = new ArrayList<Usuario>();
while(rs.next()){
lista.add(new Usuario(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getString(4)));
}
return lista;
}catch (Exception e) {
e.printStackTrace();
return null;
}
}
public boolean userDelete(Usuario usr){
try {
BdManager bd = new BdManager();
PreparedStatement pstmt = bd.getConnection().prepareStatement("delete from usuarios "
+ "where Idusuario = ?");
pstmt.setInt(1, usr.getIdusuario());
int rowAft = pstmt.executeUpdate();
if(rowAft<=0)
return false;
else
return true;
} catch (Exception e) {
e.printStackTrace();
return false;

}
}
public boolean actualizaUsuario(Usuario usr) {
try {
BdManager bd = new BdManager();
PreparedStatement pstmt = bd.getConnection().prepareStatement("update usuarios set "
+ "UsrName = ?, UsrPass = ?, TipoUsr = ? where Idusuario = ?");
pstmt.setString(1, usr.getUsrName());
pstmt.setString(2, usr.getUsrPass());
pstmt.setString(3, usr.getTipoUsr());
pstmt.setInt(4, usr.getIdusuario());
int rowAft = pstmt.executeUpdate();
if (rowAft <= 0) {
return false;
} else {
return true;
}
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
public Object getTipoUser(Usuario usr) {
throw new UnsupportedOperationException("Not supported yet."); //To change body of
generated methods, choose Tools | Templates.
} }

En el paquete EIS

Este archivo es el que tiene el cdigo en el cual se realiza la conexin a base de datos.
package EIS;
import java.sql.Connection;
import java.sql.DriverManager;
public class BdManager {
static Connection conn;
static{
try {
Class.forName("com.mysql.jdbc.Driver");
conn= DriverManager.getConnection("jdbc:mysql://localhost:3306/leop","root","root");
} catch (Exception ex) {
ex.printStackTrace();
}
}
public static Connection getConnection(){
return conn;
} }

Tambin es necesario verificar en la pestaa de Servicios que la base de datos a la cual se hizo la
conexin es visible.

En el paquete Controller

El cdigo para los Servlets que se utiliz es el siguiente:

package controller;

import DAO.UsuarioDAO;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import models.Usuario;
import java.util.ArrayList;
import java.util.Iterator;

@WebServlet(name = "ServletValidaUser", urlPatterns = {"/ServletValidaUser"})

public class ServletValidaUser extends HttpServlet {

/**
* Processes requests for both HTTP
* <code>GET</code> and
* <code>POST</code> methods.
*
* @param request servlet request
* @param response servlet response

* @throws ServletException if a servlet-specific error occurs

* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
/* TODO output your page here. You may use following sample code. */
String usrName = request.getParameter("usrName");
String usrPass = request.getParameter("usrPass");
Usuario usr = new Usuario(usrName, usrPass);
UsuarioDAO usrDAO = new UsuarioDAO();
if (usrDAO.validaUser(usr)) {
request.setAttribute("userName", usr.getUsrName());
if (usrDAO.getTipoUser(usr).equals("registrado")) {
request.getRequestDispatcher("index.jsp").forward(request, response);
} else {
request.getRequestDispatcher("index.jsp").forward(request, response);
}
} else {
request.setAttribute("error", "voto registrado");
request.getRequestDispatcher("votos.jsp").forward(request, response);
}

} finally {
out.close();
}
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the
left to edit the code.">
/**
* Handles the HTTP
* <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP
* <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response

* @throws ServletException if a servlet-specific error occurs

* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}

En el paquete Models se encuentran los archivos

package models;

public class Usuario {

String usrName, usrPass, tipoUsr;
int idusuario;
public Usuario() {
}
public Usuario(String usrName) {
this.usrName = usrName;
}
public Usuario(String usrName, String usrPass) {
this.usrName = usrName;
this.usrPass = usrPass;
}

public Usuario(String usrName, String usrPass, String tipoUsr) {

this.usrName = usrName;
this.usrPass = usrPass;
this.tipoUsr = tipoUsr;
}
public Usuario(int idusuario,String usrName, String usrPass, String tipoUsr) {
this.idusuario = idusuario;
this.usrName = usrName;
this.usrPass = usrPass;
this.tipoUsr = tipoUsr;
}
public int getIdusuario() {
return idusuario;
}
public void setIdusuario(int idusuario) {
this.idusuario = idusuario;
}
public String getUsrName() {
return usrName;
}
public void setUsrName(String usrName) {
this.usrName = usrName;
}
public String getUsrPass() {
return usrPass;
}

public void setUsrPass(String usrPass) {

this.usrPass = usrPass;
}
public String getTipoUsr() {
return tipoUsr;
}
public void setTipoUsr(String tipoUsr) {
this.tipoUsr = tipoUsr;
}
}
En la carpeta de Web Pages encontramos los archivos de las pginas que se muestran para la
votacin y que se describen en el manual de usuario

La pgina de index contiene el siguiente cdigo:

<%@page import="java.util.Iterator"%>
<%@page import="models.Usuario"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8"/>
<title>Registro de Alumnos</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script src="modernizr-2.0.6.min.js"></script>
</head>
<body>
<center><div id="header"><h1>Administraci&oacute;n de usuarios</h1></div></center>
<br>
<div id="nav">
<ul id="menu">

<a href="index.jsp">Registro</a>
<a href="votos.jsp">Votaci&oacute;n General</a>
<a href="voto_leo.jsp">Votaci&oacute;n Profesor Leonardo</a>
<a href="voto_dolores.jsp">Votaci&oacute;n Profesora Dolores</a>
</ul>
</div>

<div id="hr1"></div>
<div id="agrupar">
<form action="servletProcesaUsuarios" method="get"/>
<input type="hidden" name="idUser" value="<%=request.getParameter("idusuario")%>"/>
Nombre
<input type="text" name="usrName"<%if (request.getAttribute("modificar")
!=null){%>value ="<%=request.getParameter("usrNameH")%><%}%>" /><br>
Matricula <input type="text" name="tipo_usuario"<%if (request.getAttribute("modificar")
!=null){%>value ="<%=request.getParameter("usrType")%><%}%>"/><br>
<input type="submit" name="boton" value="insertar"/>
<input type="submit" name="boton" value="consultar"/>
<%if (request.getAttribute("modificar") !=null){%>
<input type="submit" name="boton" value="actualizar"/>
<%}else{
out.println("");
}
%>
</div>
<% if (request.getAttribute("mensaje") == null) {
out.println("");
} else {%>
<em><%=request.getAttribute("mensaje")%></em>
<%}%>
<%if (request.getAttribute("lista") == null) {
out.print("");
} else {%>
<div id="tabla">

<table border="1">
<thead>
<tr>
<th bgcolor="red">IdUsuario</th>
<th bgcolor="red">Nombre Alumno</th>
<th bgcolor="red">Matricula</th>
<th bgcolor="blue">accion</th>
<th bgcolor="blue">accion</th>

</tr>
</thead>
<tbody>
<% ArrayList<Usuario> lista = (ArrayList) request.getAttribute("lista");
Iterator itr = lista.iterator();
while (itr.hasNext()) {
Usuario usr = (Usuario) itr.next();
%>
<tr><form action="servletProcesaUsuarios" method="post"/>
<th><%=usr.getIdusuario()%>
value="<%=usr.getIdusuario()%>"/> </th>
<th><%=usr.getUsrName()%>
value="<%=usr.getUsrName()%>"/> </th>
<th><%=usr.getTipoUsr()%>
value="<%=usr.getTipoUsr()%>"/> </th>

<input

type="hidden"

<input

<input

type="hidden"

type="hidden"

<th><input type="submit" name="boton" value="eliminar"/></th>

<th><input type="submit" name="boton" value="modificar"/></th>

name="idusuario"

name="usrNameH"

name="usrType"

</tr>
<%}%>
</tbody>
</table><br><br>
</div>
<%}%>
<div id="hr"></div>
<div id ="footer">T&eacute;cnologico de Estudios Superiores de Ecatepec
Aplicaciones Web<br>
Alumnos:Gabriela Oropeza/Omar Hernandez/ Azucena Conde

Desarrollo de

Grupo: 6801</div>

</body>
</html>

La pgina Voto Dolores y Voto Leonardo contienen prcticamente el mismo cdigo, que a
continuacin se presenta:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Votos</title>
<link href="votos.css" rel="stylesheet" type="text/css">
<script src="modernizr-2.0.6.min.js"></script>
</head>
<body>
<header><h1>P&aacute;gina de votaci&oacute;n Asesor Dolores</h1></header>

<div id="nav">
<ul id="menu">
<a href="index.jsp">Registro</a>
<a href="votos.jsp">Votaci&oacute;n General</a>
<a href="voto_leo.jsp">Votaci&oacute;n Profesor Leonardo</a>
<a href="voto_dolores.jsp">Votaci&oacute;n Profesora Dolores</a>
</ul>
</div>
<div id="hr1"></div>
<section id="contenedor">
<section id="principal">

<center>Dispositivos M&oacute;viles</center>
<br><br>
<center><a href="9.jsp">Proyecto 1 </a></center>
<br>
<center> <a href="10.jsp">Proyecto 2</a>
</center>
<br>
<center><a href="11.jsp">Proyecto 3</a></center>
<br>
<center> <a href="12.jsp">Proyecto 4</a>
</center>
<br>
<center> <a href="13.jsp">Proyecto 5</a>
</center>

<br>

<center> <a href="14.jsp">Proyecto 6</a>

</center>
<br>
<center><a href="15.jsp">Proyecto 7</a></center>
<br>
<center> <a href="16.jsp">Proyecto 8</a>
</center>
<br>
</section>
</section>
<div id="hr"></div>
<div id="footer">
T&eacute;cnologico de Estudios Superiores de Ecatepec
Web<br>
Alumnos:Gabriela Oropeza/Omar Hernandez/ Azucena Conde
</div>
</html>

Desarrollo de Aplicaciones

Grupo: 6801

En las pginas 1 a la 16 que se refiere a los proyectos , a continuacin el cdigo:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<html lang="es">
<head>
<meta charset="utf8"/>
<title>proyecto uno</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script src="modernizr-2.0.6.min.js"></script>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>voto proyecto uno</title>
</head>
<body>

<center><h1>Proyecto Uno</h1></center><br>

<form action="ServletValidaUser" method="get">

<center> Matricula <input type="text" name="usrPass"/></center><br><br>
<center><input type="submit" name="boton" value="Votar"></center><br>
<a href="votos.jsp">ver mas proyectos</a>

</form>
<% if(request.getAttribute("error")==null){
out.println("");
}else{%>
<em><%=request.getAttribute("error")%></em>
<%}%>
<div id="hr"></div>
<div id ="footer">T&eacute;cnologico de Estudios Superiores de Ecatepec
Aplicaciones Web<br>

Desarrollo de

Alumnos:Gabriela Oropeza/Omar Hernandez/ Azucena Conde

6801</div>
</body>
</html>

Para estas pginas se utiliz el siguiente cdigo en CSS para dar formato a las mismas:

*{
margin: 0;
padding: 0;
}
@font-face{
font-weight:normal;
font-style:normal;
}

Grupo:

#agrupar {
align: center;
width:100%;
margin: 90px auto;
}

#header{
background: url(logotese.jpg) no-repeat;
width: 100%;
heigth: 100%;
align: left;
border: 1px solid #ffffff;
padding: 20px;
}
nav{
display:inline-block;
clear:both;
float:left;
overflow: hidden;
width: 100%
}
#menu{
background: chocolate;
padding: 5px 15px;
}
#menu li{

display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}
body {
background:url(fondo.jpg);
color:cornsilk;
font-family:Arial, Helvetica, verdana;
font-size: 2em;
}
h1{
font: bold 20px verdana, sans-serif;
}

#hr{
border: 1px solid khaki; height: 3px; background-color: darkred;
width: 100%;
position: absolute;
}
#tabla{
width: 75%;
margin:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:18px;

text-align: center;
width: 900px;
}
#hr1{
border: 1px solid khaki; height: 3px; background-color: darkred;
width: 100%;
position: absolute;
}

#footer {
background: url(fondo.jpg);
font: 15px sans-serif, verdana;
text-align: center;
width: 100%;
bottom: 0;
left: 0;
}