Upload
douglas-pop
View
11
Download
5
Embed Size (px)
DESCRIPTION
para crear una pagina web con conexión a base de datos
Citation preview
Manual Técnico
Proyecto
2
INSTALAR APACHE TOMCAT ........................................................................................... 3
PASO 1 DESCARGAR PROGRAMA ........................................................................... 3
PASO 2 SELECCIONAR PROGRAMA .......................................................................... 3
PASO 3 INSTALAR PROGRAMA ................................................................................. 4
PASO 4 ABRIR EL NAVEGADOR ............................................................................... 4
INSTALAR XAMPP .......................................................................................................... 5
PASO 1 DESCARGAR XAMPP .................................................................................. 5
PASO 2 EJECUTAR E INSTALAR PROGRAMA ............................................................ 5
PASO 3 ACEPTAR LA CONFIGUARACION PREDETERMINADA ........................................ 6
PASO 4 EJECUTAR PROGRAMA .............................................................................. 6
PASO 4 ABRIMOS EL CONTROL DE XAMPP .............................................................. 7
PASO 6 INICIAR LOS COMPONENTES DE APACHE Y MYSQL ....................................... 7
TAMBIÉN PUEDES INICIAR LOS OTROS COMPONENTES SI LOS VAS A USAR. .................... 7
INSTALAR NETBEANS ..................................................................................................... 8
PASO 1 DESCARGAR PROGRAMA .......................................................................... 8
PASO 2 EJECUTAR E INSTALAR PROGRAMA ............................................................. 9
PASO 3 EJECUTAR PROGRAMA .............................................................................. 9
CREAR PROYECTO JAVA WEB ...................................................................................... 10
PASO 1 CREAR NUEVO PROYECTO ........................................................................ 10
PASO 2 AGREGAMOS LIBRERÍA ............................................................................ 12
CREAR BASE DE DATOS ............................................................................................... 13
CREAR JSP CONEXIÓN ................................................................................................. 14
CÓDIGO CONEXIÓN .............................................................................................. 15
CREAR JSP CONSULTA ................................................................................................ 16
CÓDIGO .............................................................................................................. 17
CREAR JSP INGRESO_PRODUCTO ................................................................................. 19
CODIGO .............................................................................................................. 20
PROYECTO ................................................................................................................. 21
PAGINA PRINCIPAL .............................................................................................. 21
PÁGINA DE SERVICIO ........................................................................................... 21
Contenido
3
PÁGINA DE SOLICITUD .......................................................................................... 22
PÁGINA DE INGRESO DE PRODUCTO ...................................................................... 22
BASE DE DATOS .................................................................................................. 23
PÁGINA CONSULTA DE PRODUCTO ........................................................................ 23
Instalar Apache Tomcat
Paso 1 Descargar programa
Lo primero que haremos es bajar nuestra versión windows zip de Apache Tomcat 7 (al momento de escribir esta entrada, esta la versión 7.0.40) de la siguiente dirección: http://tomcat.apache.org/download-70.cgi
Paso 2 Seleccionar programa
Dependiendo de la arquitectura de nuestro sistema operativo, si tenemos un sistemas de 32 bits haremos click en 32-bit Windows zip, o si de lo contrario tenemos uno de 64 bits haremos click en 64-bit Windows zip, en mi caso descargo las versión de 32 bits a como se muestra en la siguiente imagen:
4
Paso 3 instalar programa
Dependiendo del directorio donde hayan descargado el windows zip de Tomcat, el siguiente paso es descomprimir el archivo zip. Para esta entrada, yo procederé a descomprimirlo en raíz de C:, como se muestra en la siguiente imagen:
Paso 4 Abrir el navegador
Ahora el paso final consiste en abrir nuestro navegador favorito (yo use Firefox) y tecleamos en la barra de direcciones http://localhost:8080 y se mostrara la ventana Apache Tomcat/7.0.40 al cual nos muestra la pantalla de bienvenida de Apache Tomcat, esto quiere decir que todo se ha configurado exitosamente.
5
Instalar Xampp
XAMPP para Windows ofrece una fácil instalación de los frameworks ApacheMySQL,
PHP, PERL, PEAR. XAMPP te ahorra tiempo y esfuerzo, y proporciona soporte de
frameworks como Drupal, Joomla, Moodle, o Wikimedia en cualquier computadora con
Windows.
Paso 1 Descargar Xampp
Descargamos Xampp de la web https://www.apachefriends.org/es/index.html
6
Paso 2 Ejecutar e Instalar Programa
Una vez que tu descarga termine, instala el programa haciendo clic en “Ejecutar”.
Paso 3 Aceptar la configuaracion Predeterminada
Un comando se abrirá y te ofrecerá una instalación inicial. Simplemente presiona Enter
y acepta la configuración predeterminada. Para hace más fácil la instalación,
simplemente pulsa Enter cada vez que se te indique en la línea de comandos. La
configuración puede ser cambiada en cualquier momento en la edición de los archivos
de configuración.
Paso 4 Ejecutar Programa
Cuando la instalación se haya completado, cierra la línea de comandos.
7
Paso 4 Abrimos el control de Xampp
Inicia el panel de control de XAMPP.
8
Paso 6 Iniciar los Componentes de Apache y MySQL
También puedes iniciar los otros componentes si los vas a usar.
Instalar Netbeans
Paso 1 Descargar Programa
Descargamos e instalamos Java JDK
9
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-
1880260.html?ssSourceSiteId=otnes
Nos interesan las señaladas en un cuadro verde (dependiendo de si el sistema
operativo es de 32 o 64 bits)
Paso 2 Ejecutar e Instalar Programa
Descargar e Instalar NEtbeans
https://netbeans.org/downloads/index.html
1
0
Paso 3 Ejecutar Programa
Instalamos Netbeans
Crear Proyecto Java Web
Paso 1 Crear Nuevo Proyecto
Damos clic en la siguiente ventanita marcada de amarillo de Netbeans
1
1
Seleccionamos en Categorías Java Web y en proyectos Web Aplicación, presionamos
el botón next
Escribimos el nombre de nuestro proyecto y presionamos el botón next
1
2
Seleccionamos el apache tomcat y presionamos next, luego finalizar
Se crea nuestro proyecto
1
3
Paso 2 Agregamos librería
Presionamos clic derecho en librerías, add library, seleccionamos MySql JDBC
Driver y presionamos el botón Add Library
Nos agregó la librería a nuestro proyecto
1
4
Crear base de datos
Seleccionamos admin de la Fila MySQL
Creamos la base de datos
Creamos la tabla dentro de la base de datos
1
5
Crear jsp Conexión
clic derecho en nuestra aplicación
Seleccionamos New Jsp, escribimos el nombre de nuestro jsp en este caso es
Conexión y presionamos finalizar
1
6
Código Conexión
<%@page contentType="text/html" pageEncoding="UTF-8"
import="java.sql.Connection"
import="java.sql.DriverManager"
import="java.sql.ResultSet" import="java.sql.Statement"
import="java.sql.SQLException"
%>
<%
Connection conex=null;
Statement sql=null;
1
7
try {
Class.forName ("com.mysql.jdbc.Driver");
conex=(Connection)DriverManager.getConnection("jdbc:mysql://127.0.0.1/dbaltecsist
em","root","");
sql=conex.createStatement();
//out.print("CONEXION EXITOSA");
}catch(Exception e){
out.print("ERROR DE CONEXION" + e);
}
%>
Crear jsp Consulta
Le damos clic derecho en nuestra aplicación
Seleccionamos New Jsp, escribimos el nombre de nuestro jsp en este caso es consulta
y presionamos finalizar
1
8
Código
<%@page contentType="text/html" pageEncoding="UTF-8"
import="java.sql.Connection"
import="java.sql.DriverManager"
import="java.sql.ResultSet" import="java.sql.Statement"
import="java.sql.SQLException"
%>
<h1>Consulta a base de datos</h1>
1
9
<%
try
{
// Conexion con bd
Class.forName("com.mysql.jdbc.Driver");
Connection conex =
DriverManager.getConnection("jdbc:mysql://127.0.0.1/dbaltecsistem","root","");
if (!conex.isClosed())
{
// La consulta
Statement st = conex.createStatement();
ResultSet rs = st.executeQuery("select * from t_producto" );
// Ponemos los resultados en un table de html
out.println("<h1>"); out.println("<table
border=\"1\"><tr><td>Id</td><td>cod_prod</td><td>Nombre</td><td>Descripcion</t
d><td>Precio</td></tr>");
while (rs.next())
{
out.println("<tr>");
out.println("<td>"+rs.getObject("id_din")+"</td></td>");
out.println("<td>"+rs.getObject("cod_prod")+"</td></td>");
out.println("<td>"+rs.getObject("nom_prod")+"</td></td>");
out.println("<td>"+rs.getObject("descrip_prod")+"</td></td>");
out.println("<td>"+rs.getObject("precio_prod")+"</td></td>");
out.println("</tr>"); out.println("</h1>");
}
out.println("</table>");
conex.close();
2
0
}
else
// Error en la conexion
out.println("fallo");
}
catch (Exception e)
{
// Error en algun momento.
out.println("Excepcion "+e);
e.printStackTrace();
}
%>
<br/><br/><br/><br/>
</body>
</html>
Crear jsp ingreso_producto
Le damos clic derecho en nuestra aplicación
Seleccionamos New Jsp, escribimos el nombre de nuestro jsp en este caso es
Ingreso_producto y presionamos finalizar
2
1
Codigo
<h1>Insertar Datos</h1>
<%
String cod_prod=request.getParameter("txtcod_prod");
String nom_prod=request.getParameter("txtnom_prod");
String descrip_prod=request.getParameter("txtdescrip_prod");
String precio_prod=request.getParameter("txtprecio_prod"); if
( cod_prod!=null && nom_prod!=null && descrip_prod!=null &&
precio_prod!=null){
2
2
String qry="insert into
t_producto(cod_prod,nom_prod,descrip_prod,precio_prod)values
('"+cod_prod+"','"+nom_prod+"','"+descrip_prod+"','"+precio_prod+"')";
sql.executeUpdate(qry);
out.print("PRODUCTO INGRESADO SATISFACTORIAMENTE");
}else{
%>
<form name="frmcod_prod" method="post" action="ingreso_producto.jsp">
Codigo_Producto: <input type="text" name="txtcod_prod"/><br/><br/>
Nombre: <input type="text" name="txtnom_prod"/><br/><br/>
Descripcion: <input type="text" name="txtdescrip_prod"/><br/><br/>
Precio: <input type="text" name="txtprecio_prod"/><br/><br/>
<input type="submit" value="Enviar"/>
</form>
<%} //else%>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Proyecto
2
3
Pagina Principal
Página de Servicio
2
4
Página de Solicitud
2
5
Página de Ingreso de Producto
Base de Datos
2
6
Página Consulta de Producto