Aporte - Generar html dinámicamente

[pato12]

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:

<?php
    // creamos un div y le agregamos texto
    echo h("div")->text("mi texto");
    
    
    // creamos un div, le agregamos texto y un poco de estilo
    echo h("div")->text("mi texto")->css(array( "color" => "#999", "background" => "#EEE", "padding" => "15px"));
    
    
    // creamos un div, le agregamos texto, un poco de estilo y una id
    echo h("div")->text("mi texto")->css(array( "color" => "#999", "background" => "#EEE", "padding" => "15px"))->attr("id", "div-1");
    
    
    // creamos un div, le agregamos texto, un poco de estilo, una id y una clase
    echo h("div")->text("mi texto")->css(array( "color" => "#999", "background" => "#EEE", "padding" => "15px"))->attr("id", "div-1")->addClass("mensaje");
?>
 

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

Código PHP:

<?php
    // creamos un div y le agregamos texto con html
    echo h("div")->html("mi <strong>texto</strong> con html!");
?>
 

Ahí esta, texto con HTML!

Veamos como crear una web simple..

Código PHP:

<?php
    require "html.php";
 
    // Creamos la etiqueta principal, html (con doctype html5), donde vamos a tener toda la web
    $html = h("html", "html5")->attr("lang", "es")->append(
        $head = h("head"), // creamos el head
        $body = h("body") // creamos el body
    );
    
    h("title")->text("mi web!")->appendTo($head); // Agreamos un titulo al head
    h("style")->css(array(
        "body" => array(
            "background" => "#EEE",
            "font-family" => '"Segoe UI", Tahoma'
            ),
        ".mensaje" => array(
            "background" => "#CCC",
            "padding" => "15px"
        ),
        ".diferenciar" => array(
            "background" => "#F00"
        ),
        ".web" => array(
            "width" => "900px",
            "margin" => "20px auto",
            "padding" => "15px"
        ),
        "h1, h2, h3" => array(
            "margin" => "0",
            "padding" => "0"
        )
    ))->appendTo($head); // Creamos un style y lo agreagamos al head
    
    
    h("header")->append( // Creamos un header (etiqueta html5)
        h("h1")->text("Mi web!"), // Agregamos un h1 con el titulo
        h("h2")->text("Puro php!")->css("color", "#999") // Agregamos un h2 con un "eslogan"
    )->addClass("web")->css("background", "#FFF")->appendTo($body); // Le damos una clase y estilos, y lo metemos en el body
    
    h("section")->appendTo($body)->append( // Creamos un section y lo agregamos al body (etiqueta html5)
        $form = h("form", array("method" => "post", "action" => ""))->append( // Creamos un form y le damos propiedades
            $ul = h("ul") // Creamos una lista
        )
    )->addClass("web"); // Le damos una clase
    
    for($i = 0; $i < 10; $i++)
        h("li")->append( // Creamos un li para la lista
            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)
        )->appendTo($ul); // Lo metemos a la lista
        
    $form->append(
        h("input", array("type" => "submit", "name" => "borrar_diferencia"))->val("Borrar botones rojos"), // Agrego 1 boton
        h("input", array("type" => "submit", "name" => "borrar_no_diferencia"))->val("Borrar botones no rojos"),
        h("input", array("type" => "submit", "name" => "cambiar_titulo"))->val("Cambiar titulo por 'Hola mundo'")
    );
    
    if($_POST){ // Si es que hay post...
        switch(true){
            case isset($_POST["borrar_diferencia"]):
                    $html->find(".diferenciar")->remove(); // Agarramos todos los de class diferenciar y los borramos :D
                break;
            
            case isset($_POST["borrar_no_diferencia"]):
                    $html->find(".nodiferenciar")->remove(); // Agarramos todos los de class nodiferenciar y los borramos :D
                break;
            
            case isset($_POST["cambiar_titulo"]):
                    $html->find("h1:first")->text("Hola mundo")->reset();
                break;
            
            default:
                $value = array_values($_POST);
                
                $html->find("section:first")->prepend( // Buscamos el primer section y le agregamos un div con el mensaje
                    h("div")->html("Se presiono: " . $value[0])->addClass("mensaje")
                )->reset();
                break;
        }
    }
    
    echo $html; // Imprimimos la web!
?>
 

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!