Clase 2017-05-02
[fecha de publicación:2017-05-02]
En clase se realizo una evaluación, sobre selectores universales y descendentes (ver publicacion anterior)
y se propuso el siguiente ejercicio para hacer en casa:
Ejercicio propuesto, para practicar.
En clase se realizo una evaluación, sobre selectores universales y descendentes (ver publicacion anterior)
y se propuso el siguiente ejercicio para hacer en casa:
Ejercicio propuesto, para practicar.
- Crear sitio web dinámico con diseño tamplate normal o responsive.
- El tema será PQRSF (Peticiones, Quejas, Reclamos, Sugerencias y Felicitaciones).
- Debe crear cajas que indiquen: nombre, apellido, dirección, e-mail, número de teléfono celular, comentario, tipo de tema(caja de selección que tendrá 5 opciones[Peticiones, Quejas, Reclamos, Sugerencias y Felicitaciones]).
- Todo lo anterior debe estar válidado con javascript o html5.
- Si la información esta validada, se debe guardar dicha información en una base de datos y a su vez se debe visualizar en formato Pdf
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ana Montañez</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function guardar(){
document.getElementById("formulario").submit();
}
</script>
</head>
<body>
<div class="menu-wrapper">
<div class="menu">
<ul>
<li><a href="index.php">PRINCIPAL</a></li>
</ul>
</div>
</div>
<!--- menu-wrapper div end -->
<div class="clearing"></div>
<div class="border-bottom"></div>
<div class="logo-wrapper">
<div class="leftshadow"><img src="images/logo-wrap-left.jpg" /></div>
<div class="logo">
<h1>PQRSF</h1>
</div>
<div class="rightshadow"><img src="images/logo-wrap-right.jpg" /></div>
</div>
<div class="clearing"></div>
<!--- banner wrapper div end -->
<div class="container">
<div class="panel-wrapper">
<div class="left-colum">
<div class="panel">
<div class="title">
<div id="content">
<div id="contact" class="clear">
<h2></h2>
<form id="formulario" name="formulario" method="POST" action="generar_pdf1.php" target="_blank" >
<br>
<p>Nombre
<input title="Se necesita un nombre" type="text" name= "nombre" id="nombre" required/>
</p>
<br>
<p>Apellido
<input type="text" name= "apellido" id="apellido" required/>
</p>
<br>
<br>
<p>Direccion
<input type="text" name="dir" id="dir" required/>
</p>
<br>
<p>Email
<input type="email" name="email" id="email" required/>
</p>
<br>
<p>Teléfono Celular
<input type="number" name="cel" id="cel" required/>
</p>
<br>
<br>
<br>
<p>Comentario
<input type="text" name="comentario" id="comentario" required/>
</p>
<br>
<p>Tipo de tema:<select name="tema" required>
<option value="peticiones">Peticiones</option>
<option value="quejas">Quejas</option>
<option value="reclamos">Reclamos</option>
<option value="sugerencias">Sugerencias</option>
<option value="felicitaciones">Felicitaciones</option>
</select>
</p>
<br>
<br>
<br>
<br>
<p>
<input type="button" name="boton" id="boton" value="Guardar" onclick="guardar();" />
<br>
<br>
<font color:"ff0000">*IMPORTANTE: Contacto funciona mejor en navegador: Chrome 14.0 y Mozilla Firefox 7.0</font>
</form>
</form>
</div>
<!--- panel wrapper div end -->
</div>
<!--- container div end -->
<div class="clearing"></div>
<div class="footer-wrapper">
<div class="footer">
<p> © 2012 All Rights Reserved.<a href="http://www.alltemplates.com"> < www.alltemplateneeds.com ></a> Images From: <a href="http://photorack.net">www.photorack.net</a> </p>
</div>
</div>
</body>
</html>
generar pdf y conexion
<?php
require_once("librerias/fpdf.php"); //-- Llama la Libreria
class PDF extends FPDF{} //-- Define una clase de la Libreria
//-- variables para conectarse a la base de datos
$servidor = 'localhost';
$base_datos = 'ana_montannez';
$tabla = 'pqrsf';
$usr_sistema = 'root';
$pass_sistema = 'alumnos';
//-- Conexion a la Base de datos segun variables declaradas
$conexion=mysql_connect($servidor, $usr_sistema, $pass_sistema);
if (!$conexion){
header ("Location: index.php?mensaje=error de conexion.");
exit();
}
else{
//-- Captura de las variables del formulario.
$nombre = $_REQUEST['nombre'];
$apellido = $_REQUEST['apellido'];
$dir= $_REQUEST['dir'];
$email = $_REQUEST['email'];
$cel = $_REQUEST['cel'];
$comentario = $_REQUEST['comentario'];
$tema = $_REQUEST['tema'];
//-- Captura la variable del index.php
$pdf = new PDF(); //-- Crea una variable para trabajar con la Libreria
$pdf->AddPage(); //-- Crea una nueva pagina en el archivo Pdf
$pdf->SetFont('Arial','',8); //-- Define el tipo de fuente y el tamaño
$pdf->multiCell(0, 3, utf8_decode($nombre) );
$pdf->multiCell(0, 3, utf8_decode($apellido) );
$pdf->multiCell(0, 3, utf8_decode($dir) );
$pdf->multiCell(0, 3, utf8_decode($email) );
$pdf->multiCell(0, 3, utf8_decode($cel) );
$pdf->multiCell(0, 3, utf8_decode($comentario) );
$pdf->multiCell(0, 3, utf8_decode($tema) );
//-- Imprime en el Pdf la Variable que viene del index.php
//-- utf8_decode: Funcion PHP para convertir caracteres especiales, que se vean bien los acentos y otras letras del alfabeto latino.
$pdf->Output(); //-- Cierra la variable del Pdf y visualiza en pantalla el resultado en un Pdf.
//-- Consulta Sql para guardar el registro o datos digitados.
$sql = "INSERT INTO ".$base_datos.".".$tabla." (nombre,apellido,dir,email,cel,comentario,tema) "
."VALUES('$nombre','$apellido','$dir','$email','$cel','$comentario','$tema')";
$sql = mysql_query($sql, $conexion);
//-- Se devuelve a la pagina que inicial.
header ("Location: index.php?mensaje=Registro Incluido con Exito.");
exit();
}
?>
base de datos...sql
create database ana_montannez;
use ana_montannez;
CREATE TABLE `pqrsf` (
`id` int(111) NOT NULL auto_increment,
`nombre` varchar(100) NOT NULL,
`apellido` varchar(100) NOT NULL,
`dir` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`cel` int(255) NOT NULL,
`comentario` text NOT NULL,
`tema` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Comentarios
Publicar un comentario