Menu dinámico con PHP y CSS Drop-down menu framework
En esta oportunidad quiero presentarles el framework CSS Drop-down menu para crear menus desplegables y como podemos usarlo para generar menus en forma dinámica con PHP.
La ventaja de usar este framework es que nos evita el uso de javascript, flash u otro tipo de tecnología para crear menus. Usando CSS hacemos que nuestro sitio sea más compatible con los estándares web y por lo tanto más accsesible para navegadores y usuarios. Además, aumenta la eficiencia y velocidad del sitio ya que no se sobre carga con librerías javascript.
Otro aspecto a favor es que CSS Drop-down menu esta bajo licencia GPL por lo que podemos usarlo, contribuir y mejorar el proyecto.
Debido a que CSS Drop-down menu se basa en los tags ul y li para crear las diferentes partes del menu, es realmente útil cuando queremos generar el menu dinámicamente, es decir, cuando las opciones se cargan por ejemplo, desde una base de datos y por lo tanto lo único que tenemos que generear es código HTML puro.
Otra ventaja del framework es que nos permite cambiar el layout del menu simplemente incluyendo el archivo CSS correspondiente y cambiando la clase CSS usada en el tag ul principal; de igual forma podemos cambiar la apariencia mediante themes lo que nos provee de gran flexibilidad a la hora de ajustar los menus a nuestras necesidades.
Como punto en contra, no podemos dejar pasar el hecho de que usa un mínimo de javascript para que los menus puedan visualizarse de forma correcta en IE 6 y sus anteriores versiones.
Bueno, presentado el framework, vamos a pasar a ver un ejemplo sencillo y claro sobre como implementar el menú dinámico con PHP.
Lo primero que debemos hacer es descargar el framework CSS y descomprimirlo en nuestra carpeta de trabajo.
<ul id="nav" class="dropdown dropdown-vertical"> <?php $menu[] = array('Colores' => array('Rojo', 'Verde', 'Azul') ); $menu[] = array('Animales' => array('Perro', 'Gato', 'Conejo') ); foreach ($menu as $menu_key => $menu_item){ foreach($menu_item as $menu_name => $sub_menu){ echo "<li><a href='#'>".$menu_name."</a>"; if (isset($sub_menu)){ echo "<ul>"; foreach($sub_menu as $items){ echo "<li><a href='#'>".$items."</a>"; } echo "</ul>"; } echo "</li>"; } } ?> </ul>
Para este ejemplo, usamos un array pre cargado con las opciones del menú, pero es claro que en general serán cargadas desde otras fuentes (base de datos, archivos, etc.). La idea básica es iterar el array de acuerdo a la estructura de nuestro menú e ir generando las etiquetas ul y li .
Obviamente, la complejidad del menú depende de los requerimientos de la aplicación o del sitio que estemos desarrollando, por ejemplo se podría agregar información en el array para cada opción del menú, por ejemplo la url, la clase, etc.; sin embargo, este ejemplo abre los caminos para crear todo tipo de menus.
Más información:
http://www.lwis.net/free-css-drop-down-menu/
Mysql Workbench 5
Mysql Workbench, es una poderosa herramienta que nos ofrece la posibilidad de diseñar base de datos en forma visual, es decir, podemos “dibujarla” y luego automáticamente crea los scripts necesarios para su creación en el servidor; además, permite documentar y manejar nuestras bases. En esta oportunidad vamos a ver de forma simple, como podemos usar Mysql Workbench para diseñar una base de datos.
Mysql Workbench es el sucesor de DBdesigner 4 que era desarrollado por la empresa fabForce.net, ahora el proyecto lo desarrolla el equipo de Sun Microsystems pero continúa siendo dirigido por el fundador y creador de DBdesigner, Michael G. Zinner.
El proyecto es open source y está bajo licencia GPL, el mismo puede ser descargado desde el sitio web oficial, también está disponible para las principales plataformas (linux , Mac y windows); actualmente la versión 5.1 esta en fase Beta.
Entre sus principales características podemos encontrar:
- permite exportar la base en varios formatos por ejemplo pdf, png, etc.,
– permite crear los scripts sql a partir del modelo generado,
– podemos usar diferentes estilos de notacion,
- permite modelar vistas, tablas, rutinas, etc.,
- soporta multiples diagramas para un mismo proyecto,
- la calidad visual de la aplicación es excelente.
Guia de uso básico
1- Para crear un nuevo diagrama debes clickear el icono “Add Diagram”, luego una nueva pestaña “EER Diagram” aparecerá junto a la pestana “Mysql Model”.
2- Luego, puedes comenzar a agregar las tablas al modelo, para ello haz click en el icono marcado en
la imagen.
3- Al hacer doble click en la tabla que acabas de crear, aparecerá un menú en la parte inferior del área de trabajo, donde puedes configurar las diferentes opciones de la tabla (nombre, motor de la base, etc.), además usando las pestañas puedes agregar las columnas, los índices, trigers, etc.
4- Finalmente, solo falta agregar los conectores que necesitemos, esto lo logramos clickeando en los iconos de conectores de la barra. También podemos configurar las opciones de la relación creada haciendo click en la línea del diagrama.
Conclusiones
Mysql Workbench es una herramienta poderosa, profesional y esencial para cualquier desarrollador y/o diseñador, por eso la recomendamos fuertemente. Esperamos que esta guía básica les sea de utilidad y puedan aprovecharla al máximo.
Mas información:
http://dev.mysql.com/workbench/
Leer másPHP y el Framework CodeIgniter
En esta oportunidad vamos a ver como iniciarnos con este excelente framework para desarrollar aplicaciones web usando php. Esta es la primera parte de una serie de artículos que iremos publicando para conocer todo sobre CodeIgniter.
Codeigniter es un framework sumamente liviano y velóz, su núcleo esta compuesto por unas pocas librerías; adopta el modelo MVC lo que permite una buena separación entre la lógica y la presentación de la aplicación; el paquete incluye una gran cantidad de librerías y es sumamente extensible a través de plugins y hooks de sistema, entre otros. La última versión al momento de escribir este artículo es la 1.7.1
Éstas son sólo algunas de sus principales características, si quieres saber más puedes ir al sitio oficial y conocer a fondo las posibilidades que ofrece; en el sitio encontrarás varios video tutoriales y muchísima documentación.
Instalando CodeIgniter
La instalación es realmente simple y sencilla y podemos hacerla en cuestión de minutos:
1.- Lo primero que debemos hacer es descargar el framework desde el sitio web http://codeigniter.com/user_guide/installation/downloads.html
2.- Luego debemos descomprimirlo en nuestro directorio de trabajo.
3.- Finalmente, podemos ingresar mediante el explorador web a nuestro sitio local y si todo ha salido bien deberíamos ver el siguiente mensaje:
Con esto ya estamos listos para comenzar a trabajar y a sacarle el máximo provecho a este framework, para la próxima comenzaremos a trabajar en una aplicación de ejemplo, ya que la mejor forma de aprender es trabajando en algo real.
Más información:
Leer másRecorrer array multidimensional recursivamente
A veces tenemos que tartar con arrays multidimensionales que son bastante complicados en su estructura, por lo que tenemos que empezar a escribir foreach’s anidados como locos, con la consecuencia inmediata de bajar la eficiencia de nuestros scripts y de disminuir la legibilidad de nuestro código.
Vamos a ver como mejorar estos inconvenientes usando una función recursiva.
Supongamos que tenemos el siguiente array:
<?php $frases[] = array('yahoo'=> array('title'=> array('count'=>1, 'text'=>"Yahoo!!") , '__total__'=>20)); $frases[] = array('google'=> array('title'=> array('count'=>21, 'text'=>"google!!") , '__total__'=>230)); $frases[] = array('msn'=> array('title'=> array('count'=>25, 'text'=>"msn!!") , '__total__'=>123, 'mas'=> array('elem1','elem2'))); $frases[] = array('elem3'); /* asi se ve la estructura del array Array ( [0] => Array ( [yahoo] => Array ( [title] => Array ( [count] => 1 [text] => Yahoo!! ) [__total__] => 20 ) ) [1] => Array ( [google] => Array ( [title] => Array ( [count] => 21 [text] => google!! ) [__total__] => 230 ) ) [2] => Array ( [msn] => Array ( [title] => Array ( [count] => 25 [text] => msn!! ) [__total__] => 123 [mas] => Array ( [0] => elem1 [1] => elem2 ) ) ) [3] => Array ( [0] => elem3 ) ) */ ?>
Como podemos ver es bastante complicado en su estructura, por lo que utilizar foreach anidados para recuperar los datos sería un dolor de cabeza; además, para diferentes estructuras deberíamos reescribir el código para recorrerla.
Veríamos algo como lo siguiente:
<?php foreach($frases as $frase_key => $frase_info){ foreach($frase_info as $tag_key => $tag_info){ foreach($tag_info as $data_key => $data_info){ ..... ..... ?>
La clave del asunto es ver este tipo de arrays como si fueran grafos (ver teoría de grafos) y de esta manera crear una función recursiva que use algún algoritmo conocido para recuperar los valores.
Veamos la función:
<?php function recorro($matriz){ foreach($matriz as $key=>$value){ if (is_array($value)){ //si es un array sigo recorriendo echo 'key:'. $key; echo '<br>'; recorro($value); }else{ //si es un elemento lo muestro echo $key.': '.$value ; echo '<br>'; } } } ?>
Esta función recorre el array completamente sin importar lo intrincado de su estructura, además, es muy eficiente y la lectura del código es muy simple, también es una solución genérica y reusable.
Crear PDF con PHP y FPDF
Vamos a ver como crear pdfs con la clase FPDF, la misma esta escrita totalmente en PHP lo que nos libera de usar una librería externa como PDFlib. Para saber más sobre FPDF haz click aquí.
Crear un PDF es simple, lo primero que debemos hacer es bajarnos la clase desde aqui, luego debemos copiarla a nuestro directorio de trabajo y estamos listos para empezar.
Veamos un ejemplo:
<?php require('fpdf.php'); $pdf=new FPDF(); $pdf->AddPage(); $pdf->SetFont('Arial','B',16); $pdf->Cell(40,10,'¡Hola, Mundo!'); $pdf->Output(); ?>
El código anterior es simple y claro, incluimos la clase mediante “require”, creamos una instancia de la misma, agregamos una página con “AddPage”, seteamos la fuente a usar, definimos un rectángulo donde aparecerá el texto y finalmente creamos el pdf con “output”.
Ahora que conocemos las funciones básicas, vamos a hacer algo mas avanzado, supongamos que queremos imprimir 100 recibos donde queremos cambiar el número de recibo automáticamente.
Aquí es donde entra en juego la colección de clases de FPDI, que permite leer documentos PDF y tratarlos como templates desde FPDF, para bajarte FPDI puedes hacerlo desde aqui.
Siguiendo con la situación planteada:
<?php // libreria para escribir un PDF require_once('lib/fpdf/fpdf.php'); // libreria para importar documentos dentro de FPDF require_once('lib/fpdi/fpdi.php'); $template_pdf = "recibo_template.pdf"; $pdf = new FPDI(); // importamos el documento $pdf->setSourceFile($template_pdf); // seteamos la fuente, el estilo y el tamano $pdf->SetFont('Times','B',10); // seteamos la posicion inicial $pdf->SetXY(25, 80); // iteramos 100 veces, una por recibo for($i=0; $i < 100; $i++){ //agregamos una pagina $pdf->AddPage(); // seleccionamos la primera pagina del docuemnto importado $tplIdx = $pdf->importPage(1); // usamos la pagina importado como template $pdf->useTemplate($tplIdx); //seteamos la posicion X $pdf->SetX(25); //escribimos el numero de recibo $pdf->Write(0, "Numero: " . $i); //salto de linea $pdf->Ln(5); } //enviamos cabezales http para no tener problemas header("Content-Transfer-Encoding", "binary"); header('Cache-Control: maxage=3600'); header('Pragma: public'); //enviamos el documento creado con un nombre nuevo y forzamos su descarga. $pdf->Output('recibos.pdf', 'D'); ?>
El código anterior genera un documento llamado recibos.pdf de 100 páginas, una por recibo (por favor, leer los comentarios en el código).
Es fácil darse cuenta que estas librerías son súmamente útiles a la hora de trabajar con documentos PDF, basta con leer la documentación oficial para comprender las posibilidades que nos ofrecen.
Leer másDestacados
Anuncios
Síguenos también en…
