RSS

Generar gafetes con HTML2PDF

12 Abr

En este tuto vamos a generar gafetes en PDF de una base de datos previamente llena con los siguientes datos: nombre, mail, edad y una ruta de la imagen de perfil que hayan subido. Suponemos que se tienen que hacer gafetes para un evento y necesitamos que se muestren 4 gafete por hoja.

El ejemplo completo con BD, comentarios en el código, la librería, imágenes y árbol de directorios listo para usarse, están el zip de descarga desde mi googleDrive 😀

Para esto vamos a requerir un poco de lógica de programación para ver cómo hacer lo antes mencionado. El diseño de cada gafete es un tabla hecha con HTML y pueden darle el estilo CSS que requieran, en el archivo de la vista ya verán cómo está hice el diseño. Cada hoja que se genere, tendrá las siguientes posiciones de cada gafete generado:

Posiciones en que se va generando cada gafete

Posiciones en que se va generando cada gafete

Entonces, nuestro algoritmo será de la siguiente forma:

  1. Obtener todos los registro de la BD
  2. Contar los registros
  3. Comenzar un ciclo for con una variable que inicia en cero
  4. Dentro del for, la variable que aumenta la colocaremos en un switch
  5. Cuando la variable llegue a 3 (es decir, la posición 3 en la imagen) se resetea a cero de nuevo la variable para comenzar en la siguiente hoja en la posición 0

La Base de datos contiene lo siguiente:

imagenes

Una vez viendo el código se verá más claramente esto 😉 Comencemos con el archivo de configuración de la BD, dbconfig.php:

<?php
    define("DB_SERVER", "localhost");
    define("DB_USER", "root");
    define("DB_PASS", "");
    define("DB_NAME", "imagenes");
?>

En seguida el archivo myDBC.php que define los dos métodos que utilizaremos, es decir, obtener todos los registros y contar registros. Los métodos están al final:

<?php
class myDBC {

    public $mysqli = null;

    public function __construct() {

        include_once 'dbconfig.php';
        $this->mysqli = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);

        if ($this->mysqli->connect_errno) {
            echo "Error MySQLi: ("&nbsp. $this->mysqli->connect_errno.") " . $this->mysqli->connect_error;
            exit();
        }
        $this->mysqli->set_charset("utf8");
    }

    public function __destruct() {
        $this->CloseDB();
    }

    public function runQuery($qry) {
        $result = $this->mysqli->query($qry);
        return $result;
    }

    public function CloseDB() {
        $this->mysqli->close();
    }

    public function clearText($text) {
        $text = trim($text);
        return $this->mysqli->real_escape_string($text);
    }

	public function contar_registros(){
        $q = "SELECT nombre FROM imagenes";

        $result = $this->mysqli->query($q);
		//Regresa el número de filas
        return $this->mysqli->affected_rows;
    }

     public function seleccionar_datos(){
        $q = "SELECT ruta, nombre, email, edad FROM imagenes";

        $result = $this->mysqli->query($q);

        //Array asociativo que contendrá los datos
        $valores = array();

        //Si no hay resultados
        //Se avisa al usuario y se redirige al index de la aplicación
        if( $result->num_rows == 0)
        {
            echo'<script type="text/javascript">
              alert("Ningun registro");
            </script>';
            return false;
        }
      //En otro caso, se recibe la información y se
      //se regresa un array con los datos de la consulta
      else{
            while($row = mysqli_fetch_assoc($result)){
                //Se agrega cada valor en el array
                array_push($valores, $row);
            }
      }
        //Regresa array asociativo
        return $valores;
    }

}//Fin clase
?>

Ahora estos métodos los vamos a utilizar en el archivo php/pdf/vistas/gafetes.php para generar cada gafete en la posición que le corresponde, esto es el algoritmo que mencioné al inicio, veamos el código:

<?php
	require_once'../myDBC.php';
	$obj = new myDBC();

	$numero_registros = $obj->contar_registros();
	$registros = $obj->seleccionar_datos();
?>
<style>
<!--
#encabezado {padding:10px 0; margin-bottom: 20px; border-top: 1px solid; border-bottom: 1px solid; width:100%;}
#encabezado .fila #columna {text-align:center; width: 100%}

.contenedor0 {margin-top: 30px; border:1px solid #666;  width:50%;}
.left0 {  border:1px solid #fff; width: 40%;}
.right0 { width: 60%;}
.down0 {text-align:center; width: 100%;}

.contenedor1 {border:1px solid #666; position:absolute; top:30px; left: 250px; margin-left:120px;  width:50%;}
.left1 { border:1px solid #fff;  width: 40%;}
.right1 { width: 60%;}
.down1 { width: 100%;}

.contenedor2 {border:1px solid #666; position:absolute; top:500px; margin-top: 40px;  width:50%;}
.left2 { border:1px solid #fff;  width: 40%;}
.right2 { width: 60%;}
.down2 { width: 100%;}

.contenedor3 {border:1px solid #666; position:absolute; top:500px; margin-top: 40px; left: 250px; margin-left:120px; width:50%;}
.left3 {  border:1px solid #fff; width: 40%;}
.right3 { width: 60%;}
.down3 { width: 100%;}

.foto {border:1px solid; height:90px; width:100px; text-align:center}
.recuadro {border:1px solid; padding:5px 0; margin:5px 0; text-align:center;}
-->
</style>

<!-- page define la hoja con los márgenes señalados -->
<page backtop="10mm" backbottom="10mm" backleft="10mm" backright="20mm">

    <?php
    //Posición de cada gafete. Ver imagen de posiciones
    $posicion = 0;

    for($i = 0; $i < $numero_registros; $i++)
    {
        switch($posicion)
        {
			case 0:?>
			<table class="contenedor0">
			  <tr>
				<td class="left0">
					<div class="foto">
						<img style=" width:100%" src="../../<?php echo $registros[$i]["ruta"];?>">
					</div>
				</td>
				<td class="right0">
					<div>Nombre:</div>
					<div class="recuadro"><?php echo $registros[$i]["nombre"];?></div>
					<div>Mail:</div>
					<div class="recuadro" ><?php echo $registros[$i]["email"];?></div>
					<div>Edad:</div>
					<div class="recuadro"><?php echo $registros[$i]["edad"];?></div>
				</td>
			  </tr>
			  <tr>
				<td class="down0" colspan="2">
					<img style="width:100%;" src="../../imagenes/expo.jpg">
				</td>
			  </tr>
			</table>
			<?php $posicion++; break;
			case 1: ?>
				<table class="contenedor1">
			  <tr>
				<td class="left1">
					<div class="foto">
						<img style=" width:100%" src="../../<?php echo $registros[$i]["ruta"];?>">
					</div>
				</td>
				<td class="right1">
					<div>Nombre:</div>
					<div class="recuadro"><?php echo $registros[$i]["nombre"];?></div>
					<div>Mail:</div>
					<div class="recuadro" ><?php echo $registros[$i]["email"];?></div>
					<div>Edad:</div>
					<div class="recuadro"><?php echo $registros[$i]["edad"];?></div>
				</td>
			  </tr>
			  <tr>
				<td class="down1" colspan="2">
					<img style="width:100%;" src="../../imagenes/expo.jpg">
				</td>
			  </tr>
			</table>
			<?php $posicion++; break;
			case 2: ?>
			<table class="contenedor2">
			  <tr>
				<td class="left2">
					<div class="foto">
						<img style=" width:100%" src="../../<?php echo $registros[$i]["ruta"];?>">
					</div>
				</td>
				<td class="right2">
					<div>Nombre:</div>
					<div class="recuadro"><?php echo $registros[$i]["nombre"];?></div>
					<div>Mail:</div>
					<div class="recuadro" ><?php echo $registros[$i]["email"];?></div>
					<div>Edad:</div>
					<div class="recuadro"><?php echo $registros[$i]["edad"];?></div>
				</td>
			  </tr>
			  <tr>
				<td class="down2" colspan="2">
					<img style="width:100%;" src="../../imagenes/expo.jpg">
				</td>
			  </tr>
			</table>
			<?php $posicion++; break;
			case 3:
				$posicion = 0;?>
			<table class="contenedor3">
			  <tr>
				<td class="left3">
					<div class="foto">
						<img style=" width:100%" src="../../<?php echo $registros[$i]["ruta"];?>">
					</div>
				</td>
				<td class="right3">
					<div>Nombre:</div>
					<div class="recuadro"><?php echo $registros[$i]["nombre"];?></div>
					<div>Mail:</div>
					<div class="recuadro" ><?php echo $registros[$i]["email"];?></div>
					<div>Edad:</div>
					<div class="recuadro"><?php echo $registros[$i]["edad"];?></div>
				</td>
			  </tr>
			  <tr>
				<td class="down3" colspan="2">
					<img style="width:100%;" src="../../imagenes/expo.jpg">
				</td>
			  </tr>
			</table>
			<?php break;
			}// Fin switch

		} //Fin for?>
</page>

Ahora una secuencia en imágenes:

gafetes_index

gafetes

Puedes ver en funcionamiento el gafetespdf.huguidugui.com (solo espera 5 segundos y clicka en “saltar publicidad” y te lleva directo)

Te recuerdo que puedes bajar el directorio completo de trabajo con imágenes, la BD y la librería lista para usarse en tu localhost desde mi googleDrive 😀 

 

 
3 comentarios

Publicado por en 12 abril, 2015 en HTML2PDF

 

Etiquetas: , ,

3 Respuestas a “Generar gafetes con HTML2PDF

  1. che

    19 abril, 2015 at 20:23

    gracias desde venezuela

     
    • huguidugui

      19 abril, 2015 at 21:13

      Gracias a ti por seguir el blog desde Venezuela 😀

       
  2. pedro852009

    20 julio, 2015 at 20:37

    eres genial

     

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: