Crear menu restaurante en PDF con Php

Hace poco me vi en la necesidad de crear una web para un restaurante y entre las peticiones, el cliente quería enviar el menú del día a sus clientes inscritos en el Newsletter.

En un principio les expliqué dos formas de hacerlo:

  1. Crear el menú en Word y subirlo después al FTP manualmente.
  2. Crear un formulario online para que el sistema en PHP cree un archivo PDF con el menú elegido.

No entré en temas de boletín de noticias y demás porque ya tenían una lista bastante grande de inscritos y un sistema de pago para enviar los mails (algo que me ahorraba).

Primera opción – Crear Word y subir a FTP manualmente

La verdad es que la más fácil en cuanto a desarrollo sería esta opción, pero el problema no era la facilidad para el desarrollador, sino para el que se dedicara en el restaurante a hacer estas funciones.

Pero ¿Cuál es el problema en esta opción?, la respuesta es simple, la mayoría de los camareros no tenían ni idea de utilizar un FTP y además podrían tocar donde no deben (aunque podría dar privilegios básicos a carpetas determinadas, al final terminarían por llamarme para cualquier problema).

Tanto el cliente como yo descartamos esta opción, que aunque hubiera sido mas económica no era la conveniente.

Formulario web para crear PDF

Esta segunda opción ya es más profesional, eso si, para el cliente tenia un coste mayor.

Una vez decidimos usar esta opción, nos pusimos manos a la obra, y me gustaría contaros el proceso que lo podemos englobar en dos partes:

  • ¿Qué necesitamos?
  • Crear Formulario para que el cliente introduzca los menus
  • Crear PDF con los datos del formulario
  • Envío del PDF por correo elctrónico en PHP

¿Qué necesitamos?

Para empezar con este pequeño proyecto y hacerlo lo más rápido posible, tuve que acudir a Google y buscar scripts, clases, librerías que permitieran de una manera fácil crear un pdf en PHP y me encontré con la clase ezPdf con su correspondiente documentación.

Queda por descontado que para hacer pruebas necesitaremos un servidor web local montado con Apache, Php y MySQL, si aún no lo tenéis podéis acudir al tutorial que hace poco publiqué: Instalar Appserv o Wamp en mi ordenador.

Por otra parte tenemos que tener claro como será el concepto de la carta, es decir, donde iría cada elemento como gráficos, títulos, etc .. En mi caso y creo que todos deberían acostumbrase a hacerlo, utilicé un lápiz y un folio para ver distintas opciones.

Barajé posibilidades y al final junto con el cliente decidimos que el mejor formato sería el siguiente:

Boceto carta restaurante en PDF

De todas maneras, en este tutorial voy a aplicar otro tipo de formato más simple, puesto que la misión de éste es tener los conocimientos mínimos para crear un PDF en PHP en lugar de complicar el asunto, esto ya va con la inquietud y el querer aprender de cada uno.

Asi que nuestro ejemplo quedará de la siguiente forma en el PDF:

Boceto carta restaurante en PDF

Nota: He usado el logo del Restaurante Pepperoni como ejemplo para este tuturial (sacado de la web logopond). No es propiedad de COLORATE.

Ya tenemos todo lo que necesitamos para empezar con nuestro pequeño proyecto.

Crear formulario para introducir los menús

Ya sabemos perfectamente donde va a ir cada elemento, y que valores tenemos que recoger del usuario (en este caso el chef encargado de crear el menu) que son 3 platos por cada tipo de plato (ENTRANTES, SEGUNDOS, POSTRES, SUGERENCIAS DEL CHEF). En total 12 platos.

El formulario final, nos quedará de la siguiente manera:

Formulario menu restaurante

Muy bien ya tenemos controlado los campos que necesitamos, ahora vamos a crear el formulario HTML. (Recomiendo usar CSS si o si, y además en los formularios no usar tablas sino capas y labels).

En el caso del restaurtante, el cliente me dijo que como máximo habría 3 platos distintos en ENTRANTES, 3 en SEGUNDOS, 3 en POSTRES y 3 en SUGERENCIAS DEL CHEF..

Así que tan solo necesitamos para el formulario 12 campos engloban todos los platos:

[html]

ENTRANTES

SEGUNDOS

POSTRES

SUGERENCIAS DEL CHEF

[/html]

Esto nos devuelve algo asi:

Formulario sin CSS

Como veis en el formulario, a los inputs (que es donde el «chef» va a introducir los platos) le hemos puesto como parámetro name (que es el que vamos a pasar a PHP por el método POST) los siguientes:

  • ENTRANTES
    • Primer Plato de Entrantes: Plato 1_1
    • Segundo Plato de Entrantes: Plato 1_2
    • Tercer Plato de Entrantes: Plato 1_3
  • SEGUNDOS
    • Primer Plato de Segundos: Plato 2_1
    • Segundo Plato de Segundos: Plato 2_2
    • Tercer Plato de Segundos: Plato 2_3
  • POSTRES
    • Primer Plato de Postres: Plato 3_1
    • Segundo Plato de Postres: Plato 3_2
    • Tercer Plato de Postres: Plato 3_3
  • SUGERENCIAS DEL CHEF
    • Primer Plato de Sugerencias del Chef: Plato 4_1
    • Segundo Plato de Sugerencias del Chef: Plato 4_2
    • Tercer Plato de Sugerencias del Chef: Plato 4_3

Por tanto en nuestro archivo php los tendremos que recuperar de la siguiente manera:

[php]
$plato1_1 = $_POST[‘plato1_1’];
[/php]

Y así sucesivamente con todos los platos, hasta lograr tener en variables php todos los que ha introducido el «Chef».

A partir de aquí, una vez hemos almacenado los datos que nos han pasado por el formulario, ya podemos empezar a crear el PDF.

Crear PDF con los datos del formulario

Para la creación del archivo PDF con el menú del restaurante, vamos a utilizar una clase ya creada que nos facilitará mucho el trabajo llamada ezPDF. Existen varias clases en php para crear PDF pero la elección de esta clase se debe a que no necesita de ningún tipo de módulo PHP adicional, esto es muy aconsejable puesto que dependiendo del servidor donde tengamos alojados los archivos puede que soporte o no la inserción de modulos externos.

Con ezPDF no tendremos ningún problema, además podremos usarlo totalmente gratis para uso comercial.

Lo primero que tenemos que hacer es descargar la clase ezPDF.

Una vez descargado, hay que descomprimirlo en la carpeta que hayamos creado para este pequeño proyecto. En mi caso los archivos quedan de la siguiente manera:

Carpetas de proyecto

Como hemos visto en el formulario, el método POST hace una llamada al archivo pdf.php en la siguiente línea:

[html]

[/html]

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:

Menu con errores

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:


Descargar archivos menu restaurante en PDF con PHP

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


Descargar archivos menu restaurante en PDF con PHP