Crear menu restaurante en PDF con Php

Plato 1

Plato 2

Plato 3

Plato 1

Plato 2

Plato 3

Postre 1

Postre 2

Postre 3

Entrante

Segundo

Postre

Por tanto, hay que crear el archive pdf.php para tartar los datos y crear el PDF con el menu del restaurante.

Dentro del archivo pdf.php vamos a empezar a codificar interactuando con la clase ezPDF.

Lo primero que hay que hacer es incluir el archivo php que contiene la clase e instanciarla para poder utilizar sus funciones, métodos, etc ..

[php]

//Incluimos la clase en nuestro archivo
include (‘class.ezpdf.php’);

//Función constructora de la clase
$pdf =& new Cezpdf();
[/php]

Para poder utilizar los valores que ha introducido el «Chef» en el formulario, hay que recogerlos con el método POST de la siguiente manera:

[php]
/Recogemos los valores con el método POST

//Primeros Platos
$plato1_1 = $_POST[‘plato1_1’];
$plato1_2 = $_POST[‘plato1_2’];
$plato1_3 = $_POST[‘plato1_3’];

//Segundos Platos
$plato2_1 = $_POST[«plato2_1»];
$plato2_2 = $_POST[«plato2_2»];
$plato2_3 = $_POST[«plato2_3»];

//Postres
$plato3_1 = $_POST[«plato3_1»];
$plato3_2 = $_POST[«plato3_2»];
$plato3_3 = $_POST[«plato3_3»];

//Sugerencias del Chef
$plato4_1 = $_POST[«plato4_1»];
$plato4_2 = $_POST[«plato4_2»];
$plato4_3 = $_POST[«plato4_3»];
[/php]

Muy bien, ya tenemos en nuestro archivo las variables con la información necesaria para construir el PDF. Ahora solo se trata de acceder a las funciones que dispone esta clase.

Formato del PDF

Como ya tenemos instanciada la clase en nuestro archivo vamos a darle un poco de formato al PDF, seleccionando una tipografía concreta (si vais a usar una fuente especifica podéis incluir la tipografía que vayais a usar en la carpeta fonts) que tenéis disponible en la carpeta FONTS del proyecto.

Esto se consigue de la siguiente manera:

[php]
$pdf->selectFont(‘./fonts/Helvetica.afm’);
[/php]

Cabecera de la carta

Tal y como hemos podido ver en el boceto, en la cabecera tenemos los siguientes campos:

• Título: Menu Restaurante Pepperoni
• Fecha: Dia/Mes/Año actual del sistema
• Logo: Logo del Restaurante

Como vamos a introducir la fecha en el título del Menú, tendremos que recurrir a la función date de Php y a continuación lo escribimos:

[php]
//Añadimos el contenido

//Titulo
$pdf->ezText(‘RESTAURANTE COLORATE’,20,array(‘justification’->’center’));

//Fecha
$menu_dia = ‘Menu del día: ‘ . $fecha;
$pdf->ezText($menu_dia, 16,array(‘justification’=>’center’)); [/php]
$fecha=date(«d/m/Y»);
//Añadimos el Logo
$pdf->addPngFromFile(«img/logo.png»,199,$pdf->y-200,200,0);

//Mostrar por pantalla
$pdf->ezStream();
[/php]

Lo probamos y vemos que nos escribe perfectamente en un PDF la cabecera que hemos codificado.

Selección de Platos del Menú

Ahora viene lo realmente importante del PDF.

Ya tenemos los platos en variables PHP, asi que sólo tenemos que utilizar las funciones de la clase para mostrar estos por pantalla de la siguiente manera:

[php]
/*PRIMEROS PLATOS*/
$pdf->ezText(‘PRIMEROS PLATOS’,20);
$pdf->ezText($plato1_1,14);
$pdf->ezText($plato1_2,14);
$pdf->ezText($plato1_3,14);

/*SEGUNDOS PLATOS*/
$pdf->ezText(‘SEGUNDOS PLATOS’,20);
$pdf->ezText($plato2_1,14);
$pdf->ezText($plato2_2,14);
$pdf->ezText($plato2_3,14);

/*POSTRES*/
$pdf->ezText(‘POSTRES’,20);
$pdf->ezText($plato3_1,14);
$pdf->ezText($plato3_2,14);
$pdf->ezText($plato3_3,14);

/*SUGERENCISA DEL CHEF*/
$pdf->ezText(‘SUGERENCIAS DEL CHEF’,20);
$pdf->ezText($plato4_1 . » (Suplemento de 3 €)»,14);
$pdf->ezText($plato4_2 . » (Suplemento de 2 €)»,14);
$pdf->ezText($plato4_3 . » (Suplemento de 2,50 €)»,14);

//Mostrar por pantalla
$pdf->ezStream();
[/php]

Como veis el resultado no es del todo esperado. Se nos ha compactado los platos con el logo:

Para arreglarlo tenemos que hacer uso de la función ezSetY que coloca el siguiente contenido a partir de los píxeles en «Y» que le indiquemos por parámetro. En el caso de que queramos que el contenido lo coloque a 500 píxeles del final del documento, tendríamos que poner:

[php]
$pdf->ezSetY(500);
[/php]

Asi que para cada tipo de plato pondremos una distancia de 100 píxeles empezando por los 500 píxeles desde el pie. Es decir, el código para el contenido quedaría así:

[php]

//Posicionamos en eje Y
$pdf->ezSetY(500);

/*PRIMEROS PLATOS*/
$pdf->ezText(‘PRIMEROS PLATOS’,20);
$pdf->ezText($plato1_1,14);
$pdf->ezText($plato1_2,14);
$pdf->ezText($plato1_3,14);

//Posicionamos en eje Y
$pdf->ezSetY(400);

/*SEGUNDOS PLATOS*/
$pdf->ezText(‘SEGUNDOS PLATOS’,20);
$pdf->ezText($plato2_1,14);
$pdf->ezText($plato2_2,14);
$pdf->ezText($plato2_3,14);

//Posicionamos en eje Y
$pdf->ezSetY(300);

/*POSTRES*/
$pdf->ezText(‘POSTRES’,20);
$pdf->ezText($plato3_1,14);
$pdf->ezText($plato3_2,14);
$pdf->ezText($plato3_3,14);

//Posicionamos en eje Y
$pdf->ezSetY(200);

/*SUGERENCISA DEL CHEF*/
$pdf->ezText(‘SUGERENCIAS DEL CHEF’,20);
$pdf->ezText($plato4_1 . » (Suplemento de 3 €)»,14);
$pdf->ezText($plato4_2 . » (Suplemento de 2 €)»,14);
$pdf->ezText($plato4_3 . » (Suplemento de 2,50 €)»,14);

//Mostrar por pantalla
$pdf->ezStream();
[/php]

Pié de página

El pié de página en el caso del tutorial lo he usado para incluir el enlace al mismo (c:alink). Esta vez utilizaremos una función llamada «addText» indicándole los valores de «x»,»y»,»tamaño de letra»,»texto»,»enlace»:

[php]
$pdf->addText(30,20,12,»Este PDF corresponde a un tutorial publicado en el blog COLORATE»,0);

[/php]

Si lo que queréis es que el para PDF salga una ventana con opción de guardarlo en vuestra computadora, tan solo teneis que cambiar ezStream por lo siguiente:

[php]
//Mostrar por pantalla (LO ASTERISCAMOS)
// $pdf->ezStream();

//Forzar descarga: En este caso se guardaría en el PC del usuario.
header(«Cache-Control: cache, must-revalidate»);
header(«Pragma: public»);
header(«Content-Type: application/force-download»);
header(«Content-Disposition: attachment; filename=\»menu.pdf\»»);
echo $pdf->output();
exit;
//fin forzar descarga
[/php]

Con esto ya tenemos terminado nuestro PDF.

Ahora seguro que estaréis pensando: ¿Que feo el formulario no?, bueno, pues para eso está CSS, para estilizar la página y eso es lo que vamos a utilizar. Así que crearemos un archivo llamado «main.css» que se encargará de «poner el formulario bonito».

El archivo «main.css» tendrá el siguiente código (que no pasaré a explicar puesto que no es la misiva de este tutorial):

[css]
body {
background-color: #E4FBFF;
background-image:url(‘img/pattern.png’);
background-repeat:repeat-y repeat-x;
color: #FFFFFF;
font-family: Trebuched Ms;
margin: 100px;
}
#cabecera{
padding: 1em;
background-color: #E4FBFF;
height: 200px;
margin: -100px;
border-bottom: 10px solid #4DB7CC;
}
#cabecera h1{
color: #FFFFFF;
font-size: 4em;
background: #4DB7CC;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
/*: uppercase*/
}

h1, h2{color: #4DB7CC;}
#theform {
background-color: #4DB7CC;
width: 40em;
border:10px solid #FFFFFF;
}
#theform fieldset {
height: 20em;
width: 11em;
border: 0;
margin: 0;
padding: 1em;
float: left;
}
#theform fieldset legend {
font-size: 4em;
font-family: Georgia, «Times New Roman», Times, serif;
color: #FFFFFF;
}
#theform fieldset legend span {
display: none;
}
#theform fieldset h3 {
height: 4em;
font-size: 1em;
}
#theform fieldset div.help {
color: #FFFF99;
font-size: 0.7em;
font-weight: bold;
height: 5em;
}
#theform fieldset label {
font-size: 1em;
display: block;
line-height: 1.5em;
}
#theform fieldset input {
font-size: 1.2em;
height: 1.8em;
background-color: #E4FBFF;
color: #4DB7CC;
width: 450px;
}

/* Error Styling */
#theform fieldset.error,
#theform fieldset.error legend,
#theform fieldset.error div.help {
color: #FFCC33;
}
#theform fieldset strong.error {
color: #fff;
background-color: #CC0000;
padding: 0.2em;
font-size: 0.7em;
font-weight: bold;
/*display: block;*/
}
#theform #pt1{clear: both;}
#theform #pt2{clear: both;}
#theform #pt3{clear: both;}
#theform #pt_sugerencias{clear: both;}
/* Part 4 Styling */
#theform #pt4 {
clear: both;
width: 38em;
height: 0,5em;
border: 10px solid #E4FBFF;
border-width: 10px 0;
padding: 1em;
}
#theform #pt4 legend {
display: none;
}
#theform #pt4 h3 {
display: none;
}
#theform #pt4 #disclaimer {
width: 22em;
float: left;
font-size: 0.7em;
}
#theform #pt4 input {
/*height: 5em;*/
font-size: 1em;
width: 22em;*/
color: #666666;
background: #f3f3f3;
font-weight: bold;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
float: right;
}

#copyright {
clear: both;
padding: 0.5em;
font-size: 0.8em;
color: #9F9F00;
font-style: italic;
}

[/css]

Ahora solo falta hacer referencia a este archivo CSS desde nuestro formulario para que aplique los cambios. Así que entre las etiquetas HEAD, justo después de título, por ejemplo, ponemos lo siguiente:

[html] [/html]

Con esto ya tenemos nuestra pequeña aplicación para crear un PDF desde PHP.

Para verlo en funcionamiento, acceder a este enlace:

Y aquí os dejo los archivos para que lo descarguéis: