RSS

Crear PDF desde PHP: Página en blanco (2/7)

30 Jun

Comenzaremos creando una página en blanco desde el proyecto PHP.

Para esto, le muestro los siguiente archivos:

  • index.php: Es la pantalla principal en el que habrá un enlace a un formulario
  • formulario_generar.php: Tiene el pequeño formulario para poner una matrícula y elegir una fecha (por el momento ahora no tienen funcionalidad). Aquí estará el botón para generar el PDF
  • PDF.php: Para empezar este archivo solo contendrá una clase sin métodos (ya lo verás)
  • creaPDF.php: Es el encargado de generar el PDF en una pestaña nueva

Recuerdo que usé de apoyo también el CSS de bootstrap.css el cual no incluyo aquí, ya que es muy largo, acá puedes descargar el ejemplo completo con la librería fpdf, css y todo el árbol de directorios desde mi dropbox (salta la publicidad).

El index.php es el siguiente:

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>PDF desde PHP</title>
		<meta charset="utf-8"/>
		<meta name="Author" content="Hugui Dugui www.huguidugui.wordpress.com"/>
		<meta rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css"/>
		<link rel="stylesheet" href="css/misestilos.css"/>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div class="wrap">
			<header>
				<img src="img/logoSS.png"/>
				<h1>Crear PDF desde PHP</h1>
			</header>

			<section id="sectionRegistro" class="menu">
				<nav>
					<ul>
						<li>
							<a href="php/formulario_generar.php">
								<div class="icono">
									<img src="img/icono_pdf.jpg">
								</div>
								<h2>Crear PDF</h2>
							</a>
						</li>
					</ul>
				</nav>
			</section>
		</div>
	</body>
</html>

Noten que está en una lista, aquí pueden agregar más tags li y hacer un menú. Bueno, el css del proyecto el siguiente:

body {
  background: url(../img/bg.png) repeat;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  line-height: 30px;
  z-index: -2;
}
.wrap {
  margin: 0 auto;
  width: 100%;
}
#skin {
  background: url(../img/skin.png) top left no-repeat;
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: -1;
}
header {
  padding-top: 30px;
  text-align: center;
  width: 100%;
}

header h1{
	color:#FF3456;
}

#formulario{
	width: 50%;
	margin: 0 auto;
}
#formulario form p{
	float: left;
	color: white;
	width: 30%
}

#generar{margin-bottom: 20px;}

#generar p {float: left;width: 30%;}
#generar input {float: left; width: 55%;}

#formulario form #fecha p {float: left; width: 15%;}
#formulario form #fecha select {margin: 0 10px 0 25px; float: left; width: 16%;}
#formulario form #fecha .de{float: left; width:3%}

#formulario form .generarBorrar{height: auto; width: 45%;}

nav{width: 100%;}
.menu {
  width: 100%;
}
.menu ul {
  list-style: none;
}
.menu ul li {
  height: 130px;
  max-height: 130px;
  min-height: 130px;
  width: 130px;
  max-width: 130px;
  min-width: 130px;
  background: url(../img/bgButton.png) no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  margin: 20px;
  vertical-align: top;
}
.menu ul li a {
  display: block;
  height: 100%;
  width: 100%;
}
.menu ul li a .icono {
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
  width: 100%;
}
.menu ul li a .icono img {
  height: 25px;
  max-height: 50px;
  min-height: 50px;
  width:25px;
  max-width: 50px;
  min-width: 50px;
}
.menu ul li a h2 {
  color: #12dcfe;
  font-size: 16px;
  font-weight: 300;
  margin: 0;
  line-height: 1em;
  text-align: center;
}
#sectionRegistro{
	text-align: center;
	width: 40%;
	margin: 10px auto;
	border-radius:15px;
	background: -webkit-linear-gradient(top, blue, white);
	background: -moz-linear-gradient(top, blue, white);
}

footer{
	background: #3454DD;
	border-radius: 15px;
	text-align: center;
	width: 450px;
	margin: 15px auto;
	padding: 5px;
}

div {
  margin: .4em 0;
}

div label {
  width: 25%;
  float: left;
}

.formulario {
    display:block;
    margin:0 auto;
    width:510px;
    color: #F5F6CE;
    font-family:Arial;
}
form {
    margin:0 auto;
    width:550px;
}

@media screen and (max-width: 720px) {
  .wrap {
    width: 100%;
  }
  .menu ul li {
   background: url("../img/bgButton.png") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);
    display: inline-block;
    height: 130px;
    margin: 20px;
    min-width: 130px;
  }
  .menu ul li a .icono img {

  }
}

Así se verá nuestro index.php:

index del ejemplo

index del ejemplo

Al dar click en sobre “Crear PDF”, nos llevará a formulario_generar.php, que es el siguiente:

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Sistema SS</title>
		<meta charset="utf-8"/>
		<meta name="Author" content="Hugui Dugui www.huguidugui.wordpress.com"/>
		<meta rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../css/bootstrap.css"/>
		<link rel="stylesheet" href="../css/misestilos.css"/>
		<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div class="wrap">
			<header>
				<a href="../index.php"><img src="../img/logoSS.png"/> </a>
				<h1>Formualrio para generar PDF</h1>
			</header>

			<section id="formulario">
				<form  method="post" ACTION="creaPDF.php" target="_blank">
						<div id="generar">
							<p>Generar formato a matricula</p>
							<input type="text" name="matricula">
						</div>
						<br>
						<br>
						<div id="fecha">
						<p>México D.F. a</p>

						  <select name="dia" id="dia">
							<option selected>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
							<option>13</option>
							<option>14</option>
							<option>15</option>
							<option>16</option>
							<option>17</option>
							<option>18</option>
							<option>19</option>
							<option>20</option>
							<option>21</option>
							<option>22</option>
							<option>23</option>
							<option>24</option>
							<option>25</option>
							<option>26</option>
							<option>27</option>
							<option>28</option>
							<option>29</option>
							<option>30</option>
							<option>31</option>
						  </select>

						  <p class="de">de</p> 

						  <select name="mes" id="mes">
							<option>Enero</option>
							<option>Febrero</option>
							<option>Marzo</option>
							<option>Abril</option>
							<option>Mayo</option>
							<option>Junio</option>
							<option>Julio</option>
							<option>Agosto</option>
							<option>Septiembre</option>
							<option>Octubre</option>
							<option>Noviembre</option>
							<option>Diciembre</option>
						  </select>

						  <p class="de">de</p> 

						  <select name="anio" id="anio">
							<option>2013</option>
							<option>2014</option>
							<option>2015</option>
							<option>2016</option>
							<option>2017</option>
						  </select>
					</div>

						<input name="buscar" type="submit" class="generarBorrar" value="Generar PDF" >
						<input type="reset" value="Borrar" class="generarBorrar">

				</form>
			</section>
		</div>
	</body>
</html>

Y se verá así:

formulario_generar.php

formulario_generar.php

Ahora lo interesante, en la carpeta php agregamos estos dos archivos:

PDF.php

<?php
include_once('fpdf.php');
class PDF extends FPDF
{

}//fin clase PDF
?>		

Y el creaPDF.php

<?php
include_once('PDF.php');
//include_once('myDBC.php');

	//Se crea un objeto de PDF
	//Para hacer uso de los métodos
	$pdf = new PDF();
	$pdf->AddPage('P', 'Letter'); //Vertical, Carta
	$pdf->SetFont('Arial','B',12); //Arial, negrita, 12 puntos

	$pdf->Output(); //Salida al navegador del pdf
?>

Al dar click sobre el botón “Generar PDF” la salida es la siguiente:

Página en blanco

Página en blanco

Así de simple ya tenemos una página en blanco desde un proyecto en php. Ahora bien, no pierdan de vista estos archivos: PDF.php y creaPDF.php que se les irá agregando código para las siguientes funcionalidades.

ringhugos@gmail.com || @huguidugui

 
Deja un comentario

Publicado por en 30 junio, 2014 en FPDF, PHP

 

Etiquetas: , ,

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: