Foros del Web » Programando para Internet » PHP »

Aporte - Generar html dinámicamente

 Estas en el tema de Aporte - Generar html dinámicamente en el foro de PHP en Foros del Web. Hola! Hace mucho que no paso por este foro, la verdad ni tengo tiempo pero ya me voy a poner más activo (si es que ...
  #1 (permalink)  
Antiguo 12/01/2012, 01:30
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 1 mes
Puntos: 101
Aporte - Generar html dinámicamente
Hola!

Hace mucho que no paso por este foro, la verdad ni tengo tiempo pero ya me voy a poner más activo (si es que puedo) e iré actualizando los post (viejos) que más me preguntan.

Ahora quiero compartirles una herramienta que creé y me ayudó mucho a hacer webs, y que, combinado con un buen sistema mvc, es una gran ayuda.

Es muy parecido a jQuery, pero obviamente en php. La idea surgió porque yo uso mucho el mismo y me encanta la forma de como se crea y manipula el html (aclaro que me encanta a morir javascript ). Así que me pregunté, "se podría hacer algo parecido en php?" y surgió a los pocos días esto.

Yo siempre lo uso en html5 así que tiene mucho soporte.

Sin más que decir, el código y luego explico como se usa:

- Ver código (fdw ahora soporta menos caracteres así que no lo pongo acá D:!)

Modo de uso, muy simple si sabes jQuery

Código PHP: 
Ver original
  1. <?php
  2.     // creamos un div y le agregamos texto
  3.     echo h("div")->text("mi texto");
  4.     
  5.     
  6.     // creamos un div, le agregamos texto y un poco de estilo
  7.     echo h("div")->text("mi texto")->css(array( "color" => "#999", "background" => "#EEE", "padding" => "15px"));
  8.     
  9.     
  10.     // creamos un div, le agregamos texto, un poco de estilo y una id
  11.     echo h("div")->text("mi texto")->css(array( "color" => "#999", "background" => "#EEE", "padding" => "15px"))->attr("id", "div-1");
  12.     
  13.     
  14.     // creamos un div, le agregamos texto, un poco de estilo, una id y una clase
  15.     echo h("div")->text("mi texto")->css(array( "color" => "#999", "background" => "#EEE", "padding" => "15px"))->attr("id", "div-1")->addClass("mensaje");
  16. ?>

Ahora sí, ya aprendimos a crear un div a agregarle cosas, como texto (OJO! es texto, no html).

Código PHP: 
Ver original
  1. <?php
  2.     // creamos un div y le agregamos texto con html
  3.     echo h("div")->html("mi <strong>texto</strong> con html!");
  4. ?>

Ahí esta, texto con HTML!

Veamos como crear una web simple..

Código PHP: 
Ver original
  1. <?php
  2.     require "html.php";
  3.  
  4.     // Creamos la etiqueta principal, html (con doctype html5), donde vamos a tener toda la web
  5.     $html = h("html", "html5")->attr("lang", "es")->append(
  6.         $head = h("head"), // creamos el head
  7.         $body = h("body") // creamos el body
  8.     );
  9.     
  10.     h("title")->text("mi web!")->appendTo($head); // Agreamos un titulo al head
  11.     h("style")->css(array(
  12.         "body" => array(
  13.             "background" => "#EEE",
  14.             "font-family" => '"Segoe UI", Tahoma'
  15.             ),
  16.         ".mensaje" => array(
  17.             "background" => "#CCC",
  18.             "padding" => "15px"
  19.         ),
  20.         ".diferenciar" => array(
  21.             "background" => "#F00"
  22.         ),
  23.         ".web" => array(
  24.             "width" => "900px",
  25.             "margin" => "20px auto",
  26.             "padding" => "15px"
  27.         ),
  28.         "h1, h2, h3" => array(
  29.             "margin" => "0",
  30.             "padding" => "0"
  31.         )
  32.     ))->appendTo($head); // Creamos un style y lo agreagamos al head
  33.     
  34.     
  35.     h("header")->append( // Creamos un header (etiqueta html5)
  36.         h("h1")->text("Mi web!"), // Agregamos un h1 con el titulo
  37.         h("h2")->text("Puro php!")->css("color", "#999") // Agregamos un h2 con un "eslogan"
  38.     )->addClass("web")->css("background", "#FFF")->appendTo($body); // Le damos una clase y estilos, y lo metemos en el body
  39.     
  40.     h("section")->appendTo($body)->append( // Creamos un section y lo agregamos al body (etiqueta html5)
  41.         $form = h("form", array("method" => "post", "action" => ""))->append( // Creamos un form y le damos propiedades
  42.             $ul = h("ul") // Creamos una lista
  43.         )
  44.     )->addClass("web"); // Le damos una clase
  45.     
  46.     for($i = 0; $i < 10; $i++)
  47.         h("li")->append( // Creamos un li para la lista
  48.             h("input", array("type" => "submit", "name" => "boton_" . $i))->val("Boton " . $i)->addClass($i % 2 != 0? "diferenciar" : "nodiferenciar") // Agregamos un submit y cada uno de por medio una "diferencia" (clase)
  49.         )->appendTo($ul); // Lo metemos a la lista
  50.         
  51.     $form->append(
  52.         h("input", array("type" => "submit", "name" => "borrar_diferencia"))->val("Borrar botones rojos"), // Agrego 1 boton
  53.         h("input", array("type" => "submit", "name" => "borrar_no_diferencia"))->val("Borrar botones no rojos"),
  54.         h("input", array("type" => "submit", "name" => "cambiar_titulo"))->val("Cambiar titulo por 'Hola mundo'")
  55.     );
  56.     
  57.     if($_POST){ // Si es que hay post...
  58.         switch(true){
  59.             case isset($_POST["borrar_diferencia"]):
  60.                     $html->find(".diferenciar")->remove(); // Agarramos todos los de class diferenciar y los borramos :D
  61.                 break;
  62.             
  63.             case isset($_POST["borrar_no_diferencia"]):
  64.                     $html->find(".nodiferenciar")->remove(); // Agarramos todos los de class nodiferenciar y los borramos :D
  65.                 break;
  66.             
  67.             case isset($_POST["cambiar_titulo"]):
  68.                     $html->find("h1:first")->text("Hola mundo")->reset();
  69.                 break;
  70.             
  71.             default:
  72.                 $value = array_values($_POST);
  73.                 
  74.                 $html->find("section:first")->prepend( // Buscamos el primer section y le agregamos un div con el mensaje
  75.                     h("div")->html("Se presiono: " . $value[0])->addClass("mensaje")
  76.                 )->reset();
  77.                 break;
  78.         }
  79.     }
  80.     
  81.     echo $html; // Imprimimos la web!
  82. ?>
Ejemplo

Bueno ya en una respuesta pongo otro ejemplo que no alcanzan los caracteres D:

Espero que les haya gustado y les sea tan útil como me es a mí.

Gracias!
Saludos!
__________________
Half Music - www.halfmusic.com
  #2 (permalink)  
Antiguo 12/01/2012, 01:32
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 1 mes
Puntos: 101
Respuesta: Aporte - Generar html dinámicamente
Código PHP: 
Ver original
  1. <?php
  2.     require "html.php";
  3.     
  4.     
  5.     $html = h("html", "html5", array("lang" => "es"));
  6.     $head = h("head")->appendTo($html);
  7.     $body = h("body")->appendTo($html);
  8.  
  9.     h("title")->html("Web de prueba")->appendTo($head);
  10.     
  11.     $style = h("style", array("type" => "text/css"))->css(array(
  12.         "body" => array(
  13.                             "background" => "#F5F5F5",
  14.                             "font-size" => "16px",
  15.                             "font-family" => '"Trebuchet MS", Arial, Helvetica, sans-serif;'
  16.                         ),
  17.         ".web" => array(
  18.                             "width" => "900px",
  19.                             "margin" => "0 auto"
  20.                         ),
  21.         "header" => array(
  22.                             "background" => "#FFF",
  23.                             "padding" => "20px",
  24.                             "margin-bottom" => "20px !important",
  25.                             "border-radius" => "30px"
  26.                         ),
  27.         "h1, h2" => array(
  28.                             "margin" => "0",
  29.                             "padding" => "0"
  30.                         ),
  31.         "nav" => array(
  32.                             "background" => "#333",
  33.                             "padding" => "20px",
  34.                             "border-radius" => "20px 10px / 15px 15px"
  35.                         ),
  36.         "nav > a" => array(
  37.                             "color" => "#FFF",
  38.                             "display" => "inline-block",
  39.                             "text-decoration" => "none",
  40.                             "padding" => "5px 0",
  41.                             "min-width" => "100px",
  42.                             "text-align" => "center"
  43.                         ),
  44.         "nav > a:hover, nav > a.activado" => array(
  45.                             "color" => "#000",
  46.                             "background" => "#FFF",
  47.                             "border-radius" => "3px 10px"
  48.                         ),
  49.         "section" => array(
  50.                             "background" => "#FFF",
  51.                             "padding" => "20px",
  52.                             "margin-top" => "20px !important",
  53.                             "border-radius" => "10px"
  54.                         ),
  55.         "fieldset" => array(
  56.                             "width" => "80%",
  57.                             "padding" => "15px",
  58.                             "border" => "solid 1px #CCC",
  59.                             "border-radius" => "5px"
  60.                         ),
  61.         "label" => array(
  62.                             "display" => "block"
  63.                         ),
  64.         "input[type='text'], input[type='email'], textarea" => array(
  65.                             "display" => "block",
  66.                             "width" => "80%",
  67.                             "padding" => "5px",
  68.                             "font-size" => "20px",
  69.                             "border" => "solid 1px #CCC",
  70.                             "border-radius" => "5px",
  71.                             "outline" => "none"
  72.                         ),
  73.         "input[type='text']:focus, input[type='email']:focus, textarea:focus" => array(
  74.                             "border" => "solid 1px #000"
  75.                         ),
  76.         "textarea" => array(
  77.                             "height" => "130px",
  78.                             "resize" => "none"
  79.                         ),
  80.         "input[type='submit']" => array(
  81.                             "display" => "block",
  82.                             "width" => "80%",
  83.                             "padding" => "10px 5px",
  84.                             "font-size" => "20px",
  85.                             "border" => "solid 1px #CCC",
  86.                             "border-radius" => "5px",
  87.                             "outline" => "none",
  88.                             "background" => "-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5)",
  89.                             "opacity" => "0.7"
  90.                         ),
  91.         "input[type='submit']:hover" => array(
  92.                             "opacity" => "1"
  93.                         ),
  94.         "input[type='submit']:active" => array(
  95.                             "background" => "-webkit-linear-gradient(#e5e5e5, #f4f4f4 40%, #fafafa)"
  96.                         ),
  97.         ".mensaje" => array(
  98.                             "padding" => "15px",
  99.                             "background" => "#EEE"
  100.                         ),
  101.         "footer" => array(
  102.                             "background" => "rgba(0, 0, 0, 0.1)",
  103.                             "padding" => "20px",
  104.                             "margin-top" => "20px !important"
  105.                         )
  106.     ))->appendTo($head);
  107.     
  108.     function menu(){
  109.         switch($_GET["mod"]){
  110.             case "menu1":
  111.                 $selecionado = "menu1";
  112.                 $titulo = "Menu 1";
  113.             break;
  114.             case "menu2":
  115.                 $selecionado = "menu2";
  116.                 $titulo = "Menu 2";
  117.             break;
  118.             case "contacto":
  119.                 $selecionado = "contacto";
  120.                 $titulo = "Contacto";
  121.             break;
  122.             default:
  123.                 $selecionado = "inicio";
  124.                 $titulo = "Inicio";
  125.             break;
  126.         }
  127.         
  128.         return array($selecionado, $titulo);
  129.     }
  130.     
  131.     function generar_menu(&$body, $selecionado){
  132.         $seleccionado = menu();
  133.         
  134.         $inicio =  h("a")->attr("href", "?")->text("Inicio")->addClass($selecionado == "inicio"? "activado" : "");
  135.         $menu1 = h("a")->attr("href", "?mod=menu1")->text("Menu 1")->addClass($selecionado == "menu1"? "activado" : "");
  136.         $menu2 = h("a")->attr("href", "?mod=menu2")->text("Menu 2")->addClass($selecionado == "menu2"? "activado" : "");
  137.         $contacto = h("a")->attr("href", "?mod=contacto")->text("Contacto")->addClass($selecionado == "contacto"? "activado" : "");
  138.         
  139.         $nav = h("nav")->append($inicio, $menu1, $menu2, $contacto)->addClass("web")->appendTo($body);
  140.     }
  141.     
  142.     function generar_header(&$body){
  143.         h("header")->append(
  144.             h("h1")->text("Mi web"),
  145.             h("h2")->text("Totalmente hecha en php")->css("color", "#999")->css("font-size", "18px")
  146.         )->addClass("web")->appendTo($body);
  147.     }
  148.         
  149.     
  150.     $pagina = menu();
  151.     
  152.     generar_header($body);
  153.     generar_menu($body, $pagina[0]);
  154.     
  155.     $section = h("section")->addClass("web")->appendTo($body);
  156.     
  157.     if($pagina[0] == "inicio"){
  158.         h("article")->append(
  159.              h("h3")->text($pagina[1]),
  160.              h("p")->text("Bueno esta es la pagina de inicio jajajja")
  161.         )->appendTo($section);
  162.     }
  163.     
  164.     if($pagina[0] == "menu1"){
  165.         h("article")->append(
  166.              h("h3")->text($pagina[1]),
  167.              h("p")->text("La pagina del menu 1 jajajajjaja :D"),
  168.              h("p")->text("Espero que les guste"),
  169.              h("aside")->text("Totalmente generado con php ;)")
  170.         )->appendTo($section);
  171.     }
  172.     
  173.     if($pagina[0] == "menu2"){
  174.         h("article")->append(
  175.              h("h3")->text($pagina[1]),
  176.              h("p")->text("La pagina del menu 2 jajajajjaja :D"),
  177.              h("p")->text("Espero que les guste"),
  178.              h("aside")->text("Totalmente generado con php ;)")
  179.         )->appendTo($section);
  180.     }
  181.     
  182.     if($pagina[0] == "contacto"){
  183.         
  184.         if($_POST)
  185.             $mensaje = h("div")->addClass("mensaje")->text("Mensaje enviado correctamente! en brevedad nos pondremos en contacto.");
  186.         
  187.         
  188.         $article = h("article")->append(
  189.             $mensaje,
  190.              h("h3")->text($pagina[1]),
  191.              h("p")->text("Esta es la pagina de contacto... a continuacion puedes mandarnos un email (no funciona)")
  192.         )->appendTo($section);
  193.         
  194.         $form = h("form", array("method" => "post", "action" => "?mod=contacto"))->append(
  195.             h("label")->attr("for", "nombre")->text("Su nombre:"),
  196.             h("input")->attr(array("type" => "text", "placeholder" => "Ej. Patricio", "name" => "nombre", "id" => "nombre", "required" => "true")),
  197.             h("label")->attr("for", "email")->text("Su e-mail:"),
  198.             h("input")->attr(array("type" => "email", "placeholder" => "Ej. [email protected]", "name" => "email", "id" => "email", "required" => "true")),
  199.             h("label")->attr("for", "comentario")->text("Comentario:"),
  200.             h("textarea")->attr(array("name" => "comentario", "id" => "comentario", "required" => "true")),
  201.             h("input")->attr(array("type" => "submit"))->val("Enviar")
  202.         );
  203.         
  204.         h("fieldset")->append(
  205.             h("legend")->text("Contactanos"),
  206.             $form
  207.         )->appendTo($article);
  208.         
  209.         
  210.     }
  211.     
  212.     h("footer")->addClass("web")->attr("id", "algo")->text("Todos los derechos reservados 2012 - Pato12")->appendTo($body);
  213.     
  214.     
  215.     echo $html;
  216.  
  217. ?>
Ejemplo
__________________
Half Music - www.halfmusic.com

Etiquetas: html, aportes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:38.