Forem: Ulises A.F.C

Primeros pasos con AJAX: XMLHttpRequest

Ulises A.F.C — Wed, 06 Aug 2025 02:25:45 +0000

Para empezar a utilizar AJAX y consumir API's es necesario tener conocimientos básicos en el lenguaje.

XMLHttpRequest es un objeto de JavaScript, es un estándar en la W3C, y nos proporciona información de una URL de forma fácil.

Iniciaremos creando dos archivos, un archivo html y el otro archivo javascript:

Dentro del archivo html incluiremos el archivo javascript para verlo en la consola del navegador.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XMLHttpRequest</title>
    <style>
        body {
            font-family: monospace;
        }
    </style>
</head>
<body>

    <h1>XMLHttpRequest</h1>
    <hr>

    <script src="xmlhttp.js"></script>

</body>
</html>

Ahora trabajaremos con el archivo javascript.

Para empezar a utilizar XMLHttpRequest debemos entender que es un objeto el cual debemos hacer una instancia de ella en nuestro archivo y para ello definiremos una constante de la siguiente manera:

const xhr = new XMLHttpRequest;

Al crear una instancia del objeto XMLHttpRequest podemos ver sus metodos y propiedades al mostrarlo en consola:

console.log(xhr);

Podemos ver que al imprimir en consola nos muestra todos sus metodos, propiedades y eventos, de los cuales tomaremos en cuenta los siguientes:

Como primer paso readystatechange, este contiene el manejador del evento que es invocado cuando se dispara el evento readystatechange, lo cual sucede cada vez que cambia el valor de la propiedad readyState.

Al saber lo antes mencionado asignaremos el evento readystatechange a nuestra instancia del objeto XMLHttpRequest, y dentro mandaremos a imprimir la instancia:

xhr.addEventListener("readystatechange", e => {
    console.log(xhr);
});

Al hacerlo observamos que ya no nos muestra nada en consola, pero, es porque esta esperando a que el valor de la propiedad readyState cambie. Por defecto su valor es cero, pero sus valores pueden cambiar segun su estado del cliente.

Cada numero que se muestra significa un estado en el que se encuentra el cliente XMLHttpRequest, y cada numero significa lo siguiente:

Para que el cliente vaya cambiando su valor hasta llegar a "4" DONE, debemos continuar con el paso siguiente, iniciar la solicitud recien creada y eso lo hacemos invocando al metodo open() de la siguiente manera:

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

El cual recibe dos parametros principales, primero, el metodo de solicitud HTTP, y segundo, la direccion URL de la API o al recurso donde se hara la solicitud, para la URL usaremos JSONPlaceholder, que nos permite a acceder a una API falsa con datos ficticios para poder practicar..

Entre los principales metodos de solicitud HTTP son:

GET

El metodo HTTP GET solicita una representación del recurso especificado. Las solicitudes que usan GET solo deben usarse para recuperar datos (no deben incluir datos).

POST

El metodo HTTP POST envía datos al servidor. El tipo del cuerpo de la solicitud está indicado por la cabecera Content-Type.

PUT

El metodo (idempotente) HTTP PUT crea un nuevo elemento o reemplaza una representación del elemento de destino con los datos de la petición.

Diferencia entre PUT & POST es que PUT es un metodo idempotente, es decir, llamarlo una o más veces de forma sucesiva tiene el mismo efecto (sin efectos secundarios), mientras que una sucesión de peticiones POST idénticas pueden tener efectos adicionales, como enviar una orden varias veces.

DELETE

El metodo HTTP DELETE elimina el recurso especificado.

...

Una vez sabiendo esto podemos continuar con el siguiente paso, que es enviar la peticion invocando al metodo send():

xhr.send();

Al tener todo esto escrito en nuestro codigo, se debe de ver asi:

const xhr = new XMLHttpRequest;

xhr.addEventListener("readystatechange", e => {

    console.log(xhr);

});


xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

xhr.send();

Hoy si podemos visualizar en consola lo siguiente:

Nos imprime 4 veces en consola la instancia realizada con el evento readystatechange, es porque segun va cambiando de estado nos va imprimiendo cada valor de la propiedad readyState, por eso es que si observamos bien podemos ver que en la propiedad readyState se va mostrando por cada impresion en consola el numero 1, 2, 3, 4:

Ahora teniendo en cuenta esto, volvemos dentro del evento readystatechange que asignamos a nuestra instancia del objeto XMLHttpRequest, aca es donde sucede la magia:

xhr.addEventListener("readystatechange", e => {

    console.log(xhr);

});

Antes de imprimir el objeto vamos a hacer algunas validaciones, ya que hasta este paso el objeto nos muestra cuatro veces en consola por cada cambio de valor de la propiedad readyState, y nos interesa que nos muestre en consola solo cuando readyState* tenga como valor el numero 4.

Para eso hacemos la validacion correspondiente agregando dentro del evento lo siguiente:

    if (xhr.readyState !== 4) return;

Accedemos a la propiedad readyState y validamos que cuando el valor de la propiedad readyState sea diferente de 4, que no haga nada, por eso ponemos "return". Ya que nos interesa que solo nos muestre cuando el valor de la propiedad readyState sea "4".

Al ver en consola vemos que ya solo nos imprime una vez:

Ahora que ya validamos eso, nos toca evaluar cuando la propiedad status este en el codigo de estado de respuesta HTTP correcto, estos codigos empiezan desde el numero 100 hasta 599.

Los codigos de estado de respuesta HTTP son los siguientes:

Respuestas informativas (100 - 199)
Respuestas satisfactorias (200 - 299)
Redirecciones (300 - 399)
Errores de los clientes (400 - 499)
Errores de servidores (500 - 599)

Cada codigo representa algo en la web y mas cuando hacemos peticiones con AJAX, aca te muestro una captura donde podemos observar esos codigos que se estan ejecutando a medida que vamos realizando este tutorial, en el navegador cuando inspeccionamos la pagina, en el apartado de "network" vemos lo siguiente:

Podemos ver el status (codigos de estado de respuesta HTTP), observamos que nos muestra un codigo de respuestas informativas (101), estas son solo de informacion, en este caso es del web socket que se implementa en el navegador y el servidor de visual studio para ver en vivo los resultados del tutorial.

Nos aparecen códigos de respuestas satisfactorias (200), este es porque se ha hecho correctamente la petición a la API de JSONPlaceholder.

Y también nos muestra dos códigos de redirecciones (304), este es porque se están usando los dos archivos que creamos al inicio del tutorial y se almacenan en cache del navegador.

Los errores (400 - 499) son cuando no se encuentra el recurso de la peticion que se esta realizando, y los errores (500 - 599) suceden cuando el servidor donde se ha alojado el recurso no ha sido encontrado.

...

Ahora sabiendo esto, el siguiente paso es hacer la validacion cuando la respuesta sea satisfactoriamente, pondremos dentro del codigo lo siguiente:

    if (xhr.status >= 200 && xhr.status < 300) {
        let req = xhr.responseText;
        console.log(req);
    } else {
        console.log("error");
    }

Creamos un "if else" donde validamos que la respuesta sea satisfactoria con un operador logico, cuando el status sea mayor o igual a un codigo de respuesta 200 && status sea menor a un codigo de respuesta menor a 300 (el numero 300 no se toma en cuenta, 299 si). Si esto se cumple, entonces, declaramos una variable llamada "req" donde almacenaremos la respuesta a la peticion.

La respuesta a la peticion se almacena en la propiedad responseText y tambien en la propiedad response, la diferencia en ambos es que responseText devuelve la respuesta en texto plano, en cambio response devuelve la respuesta en un tipo de dato JavaScript.

Para acceder a la respuesta de la peticion, llamamos a la propiedad responseText para tenerlo en formato de texto plano, y mandamos a imprimir en consola.

Si esta condicion no se cumple, entonces imprimimos un error en consola.

Veamos el resultado de esto:

Ya podemos ver la respuesta en formato de texto plano en consola, pero, en formato de texto plano no nos sirve, debemos convertirlo en formato JSON, para eso lo convertimos de la siguiente manera:

Agregamos lo siguiente al codigo luego de mandar a imprimir en consola la variable "req":

    let data = JSON.parse(req);
    console.log(data);

Creamos una variable llamada "data" y hacemos uso de JSON para invocar al metodo parse() quedando de la siguiente manera **JSON.parse()** y dentro de los parentesis ponemos la variable donde almacenamos la respuesta de la peticion. Finalmente mandamos a imprimir en consola la variable "data" donde ya convertimos la respuesta en formato JSON.

El código final nos debe quedar así:

const xhr = new XMLHttpRequest;

xhr.addEventListener("readystatechange", e => {

    if (xhr.readyState !== 4) return;

    if (xhr.status >= 200 && xhr.status < 300) {
        let req = xhr.responseText;
        let data = JSON.parse(req);
        console.log(data);
    } else {
        console.error("error");
    }

    console.log(xhr);

});


xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

xhr.send();

Y si vemos la consola en el navegador ya podemos ver lo siguiente:

Ya podemos obtener la respuesta a la petición que hemos hecho a JSONPlaceholder en formato JSON.

Con esto hemos finalizado la petición a la API de JSONPlaceholder, ya con esto ya solo queda mostrar los datos en el DOM, en una tabla o en tarjetas dinámicas mediante el DOM, pero eso lo veremos en el próximo blog.

Manejo del DOM #5: modificando elementos.

Ulises A.F.C — Tue, 26 Mar 2024 05:53:12 +0000

Desde JavaScript podemos modificar elementos, reemplazando elementos por otros, insertar elementos en diferentes posiciones del DOM por medio del traversing.

Veremos como hacerlo de la forma antigua y con los nuevos métodos y mejoras que ECMAScript ha implementado con el pasar de los años.

Para ambas formas usaremos como ejemplo la siguiente estructura HTML:

<section class="cards">
    <figure class="card">
        <img src="https://picsum.photos/id/237/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/23/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/137/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/267/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/27/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/239/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>
</section>

Forma antigua de modificar elementos

En un archivo JavaScript accederemos al contenedor donde se encuentran cada una de las figure:

const $cards = document.querySelector(".cards")

Crearemos un elemento figure y le asignaremos un nombre de referencia:

const $newCard = document.createElement("figure")

De manera rápida crearemos el contenido del elemento figure que acabamos de crear:

$newCard.innerHTML = `
    <img src="https://picsum.photos/id/111/200/200" alt="any">
    <figcaption>Any</figcaption>
`

Por ultimo solo agregamos la clase CSS:

$newCard.classList.add("card")

Ahora que tenemos el elemento creado empezaremos a ver como podemos modificar e insertar el elemento al DOM.

.replaceChild()

Este método reemplaza el elemento por uno nuevo, este recibe dos parámetros, el primero, el elemento que se insertará al DOM, el segundo, el elemento del cual se va a reemplazar por el nuevo.

$cards.replaceChild($newCard, $cards.children[1])

A través del "traversing" podemos buscar el elemento hijo que va a ser reemplazado.

.insertBefore()

Este método inserta el elemento antes de un elemento de referencia, este recibe dos parámetros, el primero, el elemento que se insertará al DOM, el segundo, la posición del elemento que tomará como referencia para insertarlo antes de él.

$cards.insertBefore($newCard, $cards.firstElementChild)

En este ejemplo lo estamos insertando al principio de todas las figure, aunque podemos insertarlo antes de cualquier elemento existente.

.removeChild()

Este método nos permite remover un elemento del DOM, si queremos eliminar un elemento del DOM lo podríamos hacer con este método, este recibe un parámetro el cual es el elemento a remover.

$cards.removeChild($cards.lastElementChild)

En este ejemplo estamos removiendo el ultimo elemento.

Forma reciente de modificar elementos

Con las nuevas actualizaciones de ECMAScript se han implementado nuevos métodos para poder modificar elementos, a continuación cada uno de los métodos que se pueden utilizar:

.insertAdjacentElement(position, element)

Este método nos permite insertar adyacentemente un elemento al DOM.

.insertAdjacentHTML(position, html)

Este método nos permite insertar adyacentemente código HTML, es equivalente a .innerHTML.

.insertAdjacentText(position, text)

Este método nos permite insertar texto adyacentemente, es equivalente a .textContent.

Cada uno de estos métodos reciben dos parámetros, el primero es la posición en la que se insertarán en el DOM, el segundo, puede ser una variable con codigo HTML en el caso de .insertAdjacentHTML(), puede ser texto en el caso de .insertAdjacentText(), o puede ser el elemento que se insertará en el caso de .insertAdjacentElement.

Como primer parámetro recibe la posición en la que se insertará el elemento, código o texto hacia al DOM, para eso existen de forma establecida por JavaScript lo siguiente:

beforebegin "hermano anterior"
afterend "hermano siguiente"
afterbegin "primer hijo"
beforeend "ultimo hijo"

Veamos un ejemplo para poder comprender mejor:

Accederemos al contenedor de cada una de las figure:

const $cards = document.querySelector(".cards")

Crearemos un elemento figure con un nombre de referencia:

const $newCard = document.createElement("figure")

Ahora empezaremos a implementar cada uno de los método y posiciones, primero, en una variable definiremos código HTML que será el contenido del elemento figure que acabamos de crear:

let contentHTML = `
    <img src="https://picsum.photos/id/111/200/200" alt="any">
    <figcaption></figcaption>
`

.insertAdjacentHTML()

A continuación, insertaremos este código al elemento figure:

$newCard.insertAdjacentHTML("afterbegin", contentHTML)

Como primer parámetro utilizamos afterbegin para definirlo como "primer hijo", y el segundo parámetro es el código HTML que se insertará.

Una vez teniendo la estructura del elemento figure, insertaremos texto a la etiqueta figcaption ya que la hemos dejado vacía:

.insertAdjacentText()

Insertaremos el texto de la siguiente manera:

$newCard.querySelector("figcaption").insertAdjacentText("afterbegin", "Any")

Con el método .querySelector() accedemos a la etiqueta figcaption para poder definir el texto con el metodo .insertAdjacentText(), como primer parametro elegimos la posición "afterbegin" (primer hijo), y como segundo parámetro definimos el texto a insertar.

Ahora que ya tenemos formado nuestro elemento figure insertaremos el elemento al DOM:

.insertAdjacentElement()

$cards.insertAdjacentElement("afterbegin", $newCard)

Utilizamos "afterbegin" para insertarlo al inicio, pero fácilmente podemos insertarlo en "x" posición o como hermano anterior o hermano siguiente del contenedor.

Con esto ya tenemos insertado el elemento figure en el DOM. Ambas formas funcionan, nos permiten tener opciones de como modificar e insertar elementos al DOM.

Manejo del DOM #4: traversing, creando elementos, fragmentos y templates.

Ulises A.F.C — Thu, 14 Mar 2024 04:45:19 +0000

DOM Traversing

Recorrido del DOM, desde JavaScript podemos recorrer elementos HTML tomando como referencia un nodo en especifico. Podemos acceder a los "hijos" de un elemento "padre", podemos acceder al elemento "padre", saber cuantos elementos "hijos" tiene un elemento en concreto, acceder al primer y ultimo elemento, acceder a elementos hermanos, siempre y cuando tomemos de referencia un nodo para poder recorrer el DOM.

Tomaremos de ejemplo el siguiente código HTML:

<main>

    <article>
        <input type="search" name="buscar" id="txtsearch">
        <a class="linkuser" href="index.html" data-link="inicio de pagina" data-name="enlace home">Ir a</a>
    </article>

    <section class="cards">
        <figure class="card">
            <img src="https://picsum.photos/id/237/200/200" alt="card">
            <figcaption>Card</figcaption>
        </figure>

        <figure class="card">
            <img src="https://picsum.photos/id/23/200/200" alt="card">
            <figcaption>Card</figcaption>
        </figure>

        <figure class="card">
            <img src="https://picsum.photos/id/137/200/200" alt="card">
            <figcaption>Card</figcaption>
        </figure>

        <figure class="card">
            <img src="https://picsum.photos/id/267/200/200" alt="card">
            <figcaption>Card</figcaption>
        </figure>

        <figure class="card">
            <img src="https://picsum.photos/id/27/200/200" alt="card">
            <figcaption>Card</figcaption>
        </figure>

        <figure class="card">
            <img src="https://picsum.photos/id/239/200/200" alt="card">
            <figcaption>Card</figcaption>
        </figure>
    </section>

    <div></div>

</main>

En un archivo .js accederemos a un elemento en concreto:

const $cards = document.querySelector(".cards")

Veamos cada uno de las propiedades para recorrer elementos:

.childElementCount

Nos devuelve la cantidad de elementos "hijos" del elemento de referencia.

console.log($cards.childElementCount)

.childNodes

Nos devuelve la cantidad de nodos secundarios de un elemento, esta propiedad toma en cuenta los nodos del documento HTML, esto incluye los saltos de línea o espacios en blanco.

console.log($cards.childNodes)

.children[]

Nos devuelve el elemento "hijo" especificando la posición en la que se encuentra, si hay 5 elementos y queremos acceder al elemento "3" especificamos la posición numero #3.

console.log($cards.children[3])

.firstElementChild

Nos devuelve el primer elemento "hijo" del elemento de referencia.

console.log($cards.firstElementChild)

.lastElementChild

Nos devuelve el ultimo elemento "hijo" del elemento de referencia.

console.log($cards.lastElementChild)

.parentElement

Nos devuelve el elemento "padre" del elemento de referencia:

console.log($cards.parentElement)

.previousElementSibling

Nos devuelve el elemento "hermano anterior" del elemento de referencia:

console.log($cards.previousElementSibling)

.nextElementSibling

Nos devuelve el elemento "hermano siguiente" del elemento de referencia:

console.log($cards.nextElementSibling)

De esta manera podemos recorrer elementos del DOM tomando de referencia un elemento en concreto, esto nos permite tener acceso a elementos en específicos para tomarles de referencia y en base a eso insertar elementos adicionales al DOM.

Creando elementos HTML desde JavaScript

Desde JavaScript podemos crear elementos HTML e insertarlos en el documento, hay diferentes formas de hacerlo y veremos cada una de ellas.

Seguiremos tomando de ejemplo el código HTML del ejemplo anterior y crearemos una nueva card para insertarla junto a las demás.

Primer forma:

Seleccionamos el contenedor de donde se encuentran las card:

const $cards = document.querySelector(".cards")

Para empezar debemos tomar en cuenta que las card que hemos creado incluye una etiqueta img las cuales como atributo indica una dirección URL de una imagen y un nombre alternativo, iniciaremos creando una constante para la dirección URL de la imagen y para el nombre alternativo:

/* ATRIBUTOS IMG */
const SRC = "https://picsum.photos/id/199/200/200"
const ALT = "Card New"

Iniciemos a crear elementos HTML:

.createElement()

Con este metodo podemos crear elementos HTML, toda aquella etiqueta de apertura y cierre HTML. Con ello crearemos la etiqueta figure, la etiqueta img y la etiqueta figcaption para completar una card adicional al documento:

// creando elementos
const $figure = document.createElement("figure")
const $img = document.createElement("img")
const $figcaption = document.createElement("figcaption")

.createTextNode()

Este método nos permite crear texto en forma que el navegador lo interprete como un nodo de tipo texto. Con este método crearemos el texto que ira dentro de la etiqueta figcaption con el texto de CARD NEW indicando que es la nueva card que estamos creando:

// creando nodo de texto
const $figcaptionText = document.createTextNode("CARD NEW")

Ya tenemos las partes de la card creadas, solo nos falta unirlas y complementarlas, iniciaremos con la etiqueta img definiendo sus atributos con las constantes que habíamos creado anteriormente, recordemos que para asignar atributos se utiliza .setAttribute():

// definiendo atributos a IMG
$img.setAttribute("src", SRC)
$img.setAttribute("alt", ALT)

.appendChild()

Con este método podemos asignarle un elemento hijo a un elemento padre, en este caso empezaremos a asignarle el nodo de tipo texto como hijo al elemento figcaption, que vendría siendo el elemento padre:

// insertando nodo de texto a elemento FIGCAPTION
$figcaption.appendChild($figcaptionText)

Haremos lo mismo con la etiqueta img para asignársela como elemento hijo al elemento figure:

// insertando elemento IMG a elemento FIGURE
$figure.appendChild($img)

Y también con la etiqueta figcaption para asignarsela como elemento hijo al elemento figure:

// insertando elemento FIGCAPTION a elemento FIGURE
$figure.appendChild($figcaption)

Ya tenemos armada la card con sus elementos hijos, solo nos falta insertarla como elemento hijo al elemento padre que es donde se encuentran todas nuestras card:

// insertando elemento FIGURE a contenedor .cards
$cards.appendChild($figure)

Hasta acá ya tenemos nuestra card creada e insertada en el documento HTML donde corresponde, pero falta una cosa, y es asignarle la clase CSS para que tome el mismo estilo que las demás card:

// definiendo clase CSS a elemento FIGURE
$figure.classList.add("card")

Esta es la forma en la que podemos crear elementos, los métodos .createElement() & .appendChild() nos dan accesibilidad a crear elementos y armarlos por partes. Existen otros métodos como el siguiente que veremos a continuación:

Segunda forma:

Continuaremos con otra forma de crear elementos desde JavaScript, crearemos otra card pero de una forma diferente.

Crearemos un nuevo elemento:

const $figureDos = document.createElement("figure")

Una vez creado nuestro elemento figure podemos empezar a armar nuestra card con lo siguiente:

.innerHTML

Esta propiedad nos permite definir código HTML dentro de JavaScript, veamos como:

$figureDos.innerHTML = `
    <img src="${SRC}" alt="${ALT}">
    <figcaption>CARD NEW</figcaption>`

Con ayuda de template string que vienen siendo un tipo de comilla para incrustar variables, con la ayuda de ello podemos definir los valores de src y alt con las constantes que habíamos creado anteriormente, si puedes observar es código HTML, esto nos permite insertar código HTML en el elemento que creamos.

Como paso siguiente es agregarle la clase CSS al elemento figure:

$figureDos.classList.add("card")

Por ultimo, nos queda insertarlo en el documento HTML, lo incrustaremos en el contenedor de donde se encuentran todas nuestras card.

$cards.appendChild($figureDos)

Y ya podemos ver los resultados en el navegador, esta es una manera rápida de hacerlo, es válido hacerlo si solamente es algo pequeño de incrustar HTML en el documento desde JavaScript.

A continuación, veremos otras dos formas de crear elementos desde JavaScript pero de forma dinámica, es decir, si queremos crear varios elementos a partir de mucha información, desde un objeto o un arreglo, veamos los siguiente ejemplos:

Tercera forma

En el documento HTML crearemos un div con un id llamado "meses" :

<div id="meses"></div>

Seleccionamos ese div desde JavaScript:

const $divmeses = document.getElementById("meses")

Crearemos un array con los meses del año para posteriormente crear una lista de ellos e insertarlos en el documento HTML:

const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"]

Vamos a crear una lista ul:

const $ul = document.createElement("ul")

El siguiente paso es recorrer el array de datos con los meses del año, luego nos apoyaremos de la propiedad .innerHTML para crear los items de la lista dinámicamente a cada elemento del array:

meses.forEach(el => {
    $ul.innerHTML += `<li>${el}</li>`
})

Por cada elemento recorrido iremos agregando un li (list item) dentro de nuestra lista ul, para ello asignamos con += para que vaya agregando un elemento tras otro.

Solo nos queda insertar en el documento HTML la lista que hemos creado:

$divmeses.appendChild($ul)

Esta es la tercera forma de crear elementos pero de una forma dinámica en base a varios elementos en común a partir de cierta información, en este caso fue un array de los meses del año.

Cuarta forma

Continuaremos con la siguiente forma de crear elementos de una forma dinámica, pero a traves de un fragmento, empezaremos creando un div en el documento HTML para después insertar los elementos dentro:

<div id="estaciones"></div>

Luego crearemos un array con las estaciones del año:

const estaciones = ["verano", "invierno", "primavera", "otoño"]

Ahora crearemos un fragment con .createDocumentFragment():

const $fragment = document.createDocumentFragment()

Este fragmento nos permite adicionar elementos dentro de él, para posteriormente insertarlos al DOM. Se muestran en el DOM hasta que son insertados.

Crearemos una lista:

const $ulEst = document.createElement("ul")

Ahora viene lo interesante del uso de fragment, recorreremos el array para crear un li por cada elemento recorrido:

estaciones.forEach(el => {
    const $li = document.createElement("li")
    $li.textContent = el
    $fragment.appendChild($li)
})

Por cada elemento, creamos un elemento li y dentro de el por medio de .textContent le asignamos el valor de cada elemento recorrido, por último, al fragment le vamos adicionando cada li que se crea por cada vuelta del bucle.

Ahora dentro del fragment se encuentra cada li con cada estación del año, ahora agregaremos este fragmento dentro de la lista:

$ulEst.appendChild($fragment)

Ahora ya tenemos la lista creada, solo falta insertarlo al div donde lo queremos mostrar:

$divestaciones.appendChild($ulEst)

Y ya podemos ver el resultado en la página, esta es otra manera de crear elementos de forma dinámica utilizando fragmentos, los fragmentos nos permiten adicionar elementos sin que se muestren en el DOM, solamente se muestran o están preparados para mostrarse hasta que se asigna como hijos. Es una forma correcta de hacerlo.

Template HTML y elementos dinámicos

Los "template" HTML se crean con la etiqueta <template></template>, este es un mecanismo para contener fragmentos HTML que pueden usarse a través de JavaScript o mantenerse oculto en el DOM.

Ya que hemos visto los "fragmentos" ahora veremos como usarlos también implementando los "template" HTML, veamos un ejemplo sencillo generando "cards" dinámicamente a través de un objeto.

Empezaremos creando un template en el documento HTML y a darle forma de una "card", esta será nuestra plantilla de como queremos mostrar las "card" que crearemos dinámicamente:

<template id="template-card">
    <figure class="card">
        <img>
        <figcaption></figcaption>
    </figure>
</template>

Al "template" le pondremos un selector de identificador con el nombre de "template-card" para poder acceder a su contenido desde JavaScript. Dentro tenemos la estructura de una "card" con la clase "card" en donde se le aplicarían los estilos CSS, dentro tenemos la etiqueta "img" y la etiqueta "figcaption".

A través de JavaScript crearemos un array objetos, donde cada objeto tendrá dos propiedades con una dirección URL de diferentes imágenes y un titulo para el "figcaption":

const data = [
    {
        src: "https://picsum.photos/id/31/200/200",
        title: "ID31"
    },
    {
        src: "https://picsum.photos/id/32/200/200",
        title: "ID32"
    },
    {
        src: "https://picsum.photos/id/33/200/200",
        title: "ID33"
    },
    {
        src: "https://picsum.photos/id/34/200/200",
        title: "ID34"
    },
    {
        src: "https://picsum.photos/id/35/200/200",
        title: "ID35"
    }
]

Este es el array de objetos llamado "data", con la propiedad llamada "src" con una direccion URL de una imagen la cual le asignaremos como atributo a la etiqueta "img" del "template" que hemos creado, asi mismo para el "figcaption" donde le insertaremos el texto de la propiedad "title" del array de objetos.

Continuaremos seleccionando el contenedor de todas las "card" para luego insertar las demás "card" que iremos creando:

const $cards = document.querySelector(".cards")

Tambien accederemos al "template" de la siguiente manera:

const $templateCard = document.getElementById("template-card").content

Accedemos al "template" pero añadimos .content para poder acceder a los elementos dentro del "template".

Por ultimo nos falta crear un "fragmento":

const $fragment = document.createDocumentFragment()

Ahora veamos como podemos hacer uso del "fragmento" y del "template" para crear "cards" dinámicas, según este ejemplo:

data.forEach(el => {
    $templateCard.querySelector("img").setAttribute("src", el.src)
    $templateCard.querySelector("figcaption").textContent = el.title

    let clone = document.importNode($templateCard, true)
    $fragment.appendChild(clone)
})

Primero, recorreremos el "array" con el método foreach, luego, por cada elemento que este recorra accederemos al elemento "img" y le asignaremos como atributo la propiedad "src" del array de objetos, así mismo accederemos al elemento "figcaption" para incrustarle el texto de la propiedad "title" del array de objetos.

Dentro del "template" tenemos los elementos "img" y "figcaption" totalmente vacíos, al obtener el "template" desde JavaScript junto con la propiedad .content, este nos permite mapear lo que hay dentro de las etiquetas "template" con ayuda de un .querySelector(). Por medio de eso podemos asignarle los atributos e incrustar el texto a los elementos desde las propiedades del "array de objetos" que creamos.

Una vez hecho esto ahora viene lo interesante, a partir de lo que tenemos hasta el momento, debemos crear "clones", es decir, el "template" nos sirve como plantilla de lo que queremos crear y mostrar, es por eso que por cada vuelta del bucle foreach vamos a crear "x" cantidad de lo mismo:

    let clone = document.importNode($templateCard, true)
    $fragment.appendChild(clone)

Por ello definimos una variable llamada "clone" y lo creamos con el método .importNode(), este recibe 2 parámetros, el primero es de donde sacaremos los clones, el segundo es un valor boolean, especificamos a true para indicarle que queremos clonar toda la estructura según como lo hemos indicado, con todo sus elementos, atributos, textos, etc.

Luego de eso, al "fragmento" le añadimos como hijos todos los "clones" que acabamos de definir. Se lo añadimos al "fragmento" ya que no queremos mostrarlos al DOM todavía.

Por ultimo, al salir del bucle ya podemos insertar los elementos creados que se encuentran en el "fragmento" listos para mostrarse en el DOM:

$cards.appendChild($fragment)

Añadimos el "fragmento" dentro del contenedor donde se mostraran cada "card" creada.

Y con esto ya podemos ver el resultado, los "template" nos permiten definir plantillas, y dinámicamente podemos definir datos desde JavaScript para poder insertar elementos al DOM, todo esto con ayuda de "fragmentos", este fue un ejemplo sencillo donde podemos simular un arreglo de datos, así como lo es una petición a una API.

Manejo del DOM #3: Estilos y clases CSS, texto y HTML

Ulises A.F.C — Mon, 19 Feb 2024 04:58:51 +0000

Atributo `style`

Desde JavaScript podemos acceder a estilos CSS en etiquetas HTML, también podemos definir estilos CSS y redefinir su valor a estilos CSS. Veamos un ejemplo a continuación:

Tomaremos de ejemplo la siguiente etiqueta HTML:

<a href="index.html" class="link-home" data-name="enlaceHome" style="background-color: lightpink;">Ir a inicio</a>

Es un enlace que contiene como atributo style, ósea, contiene estilos CSS en línea.

No es recomendable usar estilos en línea, esto es solamente de ejemplo de como se implementan los estilos desde JavaScript.

Para acceder a los estilos desde JavaScript se hace con la notación del punto con la propiedad .style, veamos un ejemplo:

// accedemos al enlace
const $linkhome = document.querySelector(".link-home")

// para acceder a los estilos se hace con la notacion del punto
console.log($linkhome.style)

Al mostrar por consola el resultado, nos devuelve un objeto llamado CSSStyleDeclaration este es un objeto con todas las propiedades con respecto a los estilos CSS, veamos la imagen:

Observemos, primero nos muestra enumeradas las propiedades que son afectadas por el elemento HTML y las que hemos definido en su atributo style. Además nos muestra todas las propiedades CSS que podemos acceder, pero, la mayoría no tienen un valor, solamente tienen valor las propiedades que han sido definidas en el atributo style y las que tienen mayor relevancia al elemento HTML.

Veamos la imagen:

Con la notación del punto podemos acceder al valor de una propiedad en especifico, veamos un ejemplo:

// podemos acceder a una propiedad en especifico
console.log($linkhome.style.backgroundColor)

Este nos devolverá su valor establecido por el elemento HTML o establecido en su atributo style.

Con la notación del punto accedemos a los estilos de un elemento siempre y cuando estén definidos en su atributo style, de igual manera al definir valor a estilos CSS con la notación del punto, estos se añaden al atributo style del elemento HTML.

.getComputedStyle()

Es un método que nos devuelve un objeto en forma de mapa con todas las propiedades CSS de un elemento con estilos previamente definidos. Tomaremos de ejemplo el enlace anterior a los ejemplos previos.

console.log(getComputedStyle($linkhome))

Al método .getComputedStyle() se le pasa como parámetro el elemento que queramos analizar sus estilos CSS. Este nos devolverá todo un mapeo de propiedades CSS que han sido definidos al elemento en cuestión.

Si queremos acceder a una propiedad en especifico con este método, se usa otro método llamado:

.getPropertyValue()

Este método nos devuelve el valor de una propiedad CSS que ha sido definida a un elemento, veamos como podemos usarla:

console.log(getComputedStyle($linkhome).getPropertyValue("background-color"))

Así obtendremos el valor de cualquier propiedad CSS, siempre y cuando esta propiedad tenga valor y haya sido definida previamente al elemento en cuestión.

.setProperty()

Este método nos permite definir estilos CSS a elementos HTML desde JavaScript, estos estilos se terminan de asignar como estilos en línea en su atributo style del elemento.

No es recomendable hacerlo, ya que estos estilos se terminan quedando en el atributo style del elemento, lo cual afecta al SEO de la página, se usa solamente en casos especiales, aunque no se recomienda hacerlo.

Veamos un ejemplo de como se pueden asignar estilos a propiedades CSS con este método:

$linkhome.style.setProperty("text-decoration", "none")
$linkhome.style.setProperty("display", "inline-block")
$linkhome.style.setProperty("padding", "8px 16px 8px 16px")
$linkhome.style.setProperty("border-radius", "5px")

Clases CSS desde JavaScript

Desde JavaScript podemos asignar clases CSS a elementos HTML, así como podemos asignar elementos también podemos removerlos.

Veamos un ejemplo, tomaremos de ejemplo el siguiente código HTML:

<section class="cards">
    <figure class="card">
        <img src="https://picsum.photos/id/237/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/23/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/137/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/267/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/27/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/239/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>
</section>

Tenemos un contenedor con elementos figure con una imagen y una descripción, agreguemos un poco de estilos:

.card {
    display: inline-block;
    background-color: darkslateblue;
    color: lightcyan;
}

.card figcaption {
    padding: .5rem 1rem;
    text-align: center;
}

El resultado es el siguiente:

Hasta este punto tenemos las clases CSS llamadas .card. Para poder asignar clases CSS a elementos HTML desde JavaScript debemos tenerlas ya definidas, crearemos las siguientes clases CSS y las asignaremos al elemento HTML desde JavaScript:

.rotate-45 {
    transform: rotate(45deg);
}

.rotate-145 {
    transform: rotate(145deg);
}

Una vez tengamos las clases CSS definidas podemos asignarlas a elementos HTML desde JavaScript, veamos como podemos hacerlo:

// accedemos al primer elemento ".card"
$card = document.querySelector(".card")

// asignando una clase css a elementos
$card.classList.add("rotate-45")

Con la notación del punto accedemos a su listado de clases del elemento e invocamos al método add(), este método recibe como parámetro el nombre de la clase a asignar.

Una vez asignado se verá el resultado:

Podemos notar que se le ha asignado la clase al primer elemento, es por ello que vemos el elemento inclinado.

También podemos remover clases CSS a elementos que ya tengan asignado una clase, veamos como:

// quitando una clase css a elementos
$card.classList.remove("rotate-45")

Con el método .remove() quitamos la clase al elemento, este recibe como parámetro el nombre de la clase que queremos remover.

También existe otro método llamado .toggle() que recibe como parámetro el nombre de la clase CSS, este método asigna una clase CSS si no ha sido asignado previamente, si ya estaba asignada la clase CSS la removerá del elemento.

$card.classList.toggle("rotate-45")

Texto en HTML desde JavaScript

Para poder introducir texto en algún elemento HTML desde JavaScript podemos usar 3 maneras de hacerlo, veamos como:

Pongamos de ejemplo este código HTML:

<main>
    <article>
        <p id="texto">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fuga eius fugit, accusantium distinctio quos voluptas tempora voluptatibus similique omnis tempore quam, iste sed ad beatae dolores reiciendis laudantium soluta!
        </p>
    </article>
</main>

Ahora obtengamos estos elementos desde JavaScript y creamos una variable con un parrafo:

let $texto = document.getElementById("texto")

let parrafo = `
    <p>Este es un ejemplo de como <strong>definir texto</strong> a elemento HTML desde JavaScript</p>
    <br><br>
    <p><i>Primer ejemplo</i></p>
`

Para introducir texto podemos usar la notación del punto utilizando .textContent:

// con textContent, este nos renderiza el texto en una cadena de texto normal
$texto.textContent = parrafo

Veamos el resultado:

Podemos observar que al introducir texto cumple con lo que queremos, pero, si notamos, en el texto tenemos etiquetas HTML, al introducir texto con la notación del punto al usar .textContent este lo renderizado en forma de texto plano de una sola línea.

Para renderizar en formato HTML se usa otra manera usando la notación del punto con .innerHTML:

// con innerHTML nos permite renderizar el codifo en formato HTML, respetando etiquetas y texto segun el contedido definido
$texto.innerHTML = parrafo

Veamos el resultado:

Tambien podemos usar otra manera llamada .outerHTML, este nos permite renderizar código HTML pero reemplazando el elemento padre si sus descendiente son del mismo tipo. Por ejemplo, si en un <p> </p> desde JavaScript introducimos texto en el cual vaya otro <p> </p>, esto no es semántico para nuestra página web, esto hace que evalúe sus descendientes y reemplaza al elemento.

Veamos una imagen:

En la imagen podemos ver señalizadas con unas flechas rojas los párrafos que están dentro de un párrafo, esto semánticamente no es correcto, esto es cuando utilizamos .innerHTML, pero podemos corregir esto con .outerHTML:

$texto.outerHTML = parrafo

Ahora veamos el resultado:

Con esto hemos terminado las diferentes formas de introducir texto en HTML desde JavaScript, cada una de ellas nos permiten introducir texto o renderizar código según nuestro objetivo y lo que queramos introducir en elementos HTML.

Manejo del DOM #2: Attributes & Data Attributes

Ulises A.F.C — Wed, 24 Jan 2024 04:32:38 +0000

¿Qué es un Attribute?

Los attributes nos proporcionan información adicional sobre los elementos del documento HTML, todos los elementos HTML pueden tener attributes, por ejemplo, <html lang="es"> su atributo es lang y su valor es es, esto indigo el lenguaje de la pagina a español.

En los enlaces de una pagina, por ejemplo, <a href="index.html">Inicio</a> su atributo es href y su valor es una dirección URL.

Primera forma de obtener el valor de un atributo

Accediendo a elementos del HTML tenemos acceso a sus atributos con la notación del punto, veamos un ejemplo de como hacerlo.

Tomaremos como referencia un enlace en el documento HTML:

<a class="linkuser" href="index.html" data-link="inicio de pagina" data-name="enlace home">Ir a</a>

Accederemos al enlace y a su atributo:

let linkhref1 = document.querySelector(".linkuser").href
console.log(linkhref1)

Esto nos devuelve el valor del atributo href como en la siguiente imagen:

Hay que tomar en cuenta en el resultado que nos muestra por consola, podemos observar que en este ejemplo el valor que nos muestra es una URL absoluta, diferente al valor que tiene en el documento, el valor que tiene es index.html, en los enlaces, por ejemplo, podríamos necesitar el valor de la URL absoluta ó solamente el valor que tiene en el documento.

Hay otra forma de acceder a los atributos de los elementos con un método en especifico el cual veremos a continuación:

Segunda forma de obtener el valor de un atributo

Existe un método que nos permite acceder al valor de un atributo llamado .getAttribute() veamos como se utiliza:

let linkhref2 = document.querySelector(".linkuser").getAttribute("href")
console.log(linkhref2)

Este nos devuelve el valor que tiene en el atributo, mas no nos devuelve la ruta absoluta, veamos la imagen:

Ambas formas nos permiten acceder al valor del atributo, hay excepciones en el caso de los enlaces así como el ejemplo anterior que nos puede devolver la ruta absoluta, esto depende de la necesidad del programador del valor que requiera.

Creando y asignando valores a atributos en elementos HTML

Podemos asignar valores a atributos y a la vez crear nuevos atributos a elementos HTML con el método llamado .setAttribute() y se usa de la siguiente forma:

// asignando un nuevo atributo
$linkuser.setAttribute("target", "_blank")
$linkuser.setAttribute("rel", "noopener")

Tomando de referencia el enlace de ejemplo, le estamos asignando valores al atributo target & al atributo rel, independientemen si tenga el atributo o no, este cambia su valor o le asigna el nuevo atributo al elemento HTML.

Validar si existe o no un atributo en elementos HTML

En caso de necesitar validar si existe un atributo en un elemento HTML. podemos usar un método especifico para eso llamado .hasAttribute() este nos devolverá un valor booleano indicando si existe o no el atributo en el elemento HTML que le indiquemos.

Veamos un ejemplo:

console.log($linkuser.hasAttribute("rel"))

En este ejemplo nos devolverá true ya que anteriormente lo hemos asignado al enlace del documento, en caso de no haberlo asignado, se validaría con false.

Eliminar atributo de un elemento HTML

También podemos eliminar atributos de elementos HTML en caso de que lo necesitemos con el método llamado .removeAttribute() y se usa de la siguiente forma:

$linkuser.removeAttribute("rel")
console.log($linkuser.hasAttribute("rel"))

Primero eliminamos el atributo que queremos eliminar, posterior, validamos que el atributo que eliminamos se haya removido del elemento HTML correctamente.

¿Qué es un Data-attribute?

Los data-attribute fueron diseñados para que sea mas fácil de extender datos asociados a un elemento en particular sin necesidad de que tengan un significado definido, permiten almacenar información sobre un elemento HTML, su sintaxis es la siguiente:

data-nombre="valor"

Los data-attribute deben anteponerse con la palabra data seguido por un guion (-) y un nombre, veamos un ejemplo:

<a class="linkuser" href="index.html" data-link="inicio de pagina" data-name="enlace home">Ir a</a>

Tomando de referencia el código anterior, en el enlace podemos ver que tenemos dos data-attribute llamados data-link & data-name. Así es como podemos definir data-attributes a elementos HTML con información adicional que necesitemos.

Para poder ver todos los data-attributes del documento HTML podemos hacerlo con la notación del punto seguido de la palabra dataset, veamos como:

// podemos acceder a todos los data-attributes del elemento
console.log($linkuser.dataset)

Esto nos devuelve un DOMStringMap es una colección con los nombres de los data-attribute que hemos definido en elementos del documento HTML. Veamos una imagen según el resultado anterior:

Esto nos permite darnos una mejor visibilidad de todos los data-attributes que hemos definido.

Obtener el valor de un único Data Attribute

Para acceder al valor de un data-attribute lo hacemos con la notación del punto seguido del nombre del data-attribute, de la siguiente forma:

// podemos acceder a un data-attributes con la notación del punto
console.log($linkuser.dataset.name)

Este nos devuelve su valor definido en su data-attribute.

Creando un nuevo Data Attribute y definiendo su valor

Para crear un nuevo data-attribute se hace similar al ejemplo anterior donde obtenemos el valor de ello, solo que esta vez se le asigna un valor, veamos un ejemplo:

// creando un nuevo data-attribute
$linkuser.dataset.unit = "nuevo dataset"

Con esto creamos y le asignamos valor a un nuevo data-attribute, pero a la vez, si el data-attribute ya existe, solamente sobrescribe su valor.

Para validar si existe un data-attribute se usa el método .hasAttribute() nos sirve para validar cualquier atributo o data attribute.

Para eliminar un data-attribute se usa el método .removeAttribute(), son los mismo métodos para cualquier tipo de atributo.

Hasta aca hemos visto el valor que tiene los atributo y data-attribute en los elementos HTML, a criterio del programador los usara de manera que lo requiera.

Manejo del DOM #1: Nodos, selectores y elementos.

Ulises A.F.C — Mon, 22 Jan 2024 05:28:21 +0000

¿Que son los nodos?

Cada etiqueta del documento y cada texto del documento es un nodo, lo que nos da como resultado tener nodos de tipo elementos y nodos de tipo texto. Por ejemplo, un nodo de tipo elemento seria un <p></p> y un nodo de tipo texto seria lo que contenga dentro de la etiqueta <p></p>.

Con JavaScript podemos acceder a estos elementos del documento, a cada etiqueta HTML, podemos acceder a clases y a identificadores por medio del DOM.

Buscar elementos por su etiqueta

Para acceder a cada elemento del documento por su etiqueta podemos hacerlo con un método llamado .getElementsByTagName("p") y se usa de la siguiente forma:

// Buscar elementos por su etiqueta
let listItem = document.getElementsByTagName("li")

Este nos devuelve un HTMLCollection, este representa una colección genérica de elementos (objeto tipo array) y ofrece métodos y propiedades para seleccionarlos de la lista.

Buscar elementos por su nombre de clase

Para acceder a elementos por su nombre de clase podemos hacerlo con el método .getElementsByClassName("card") y se usa de la siguiente manera:

// Buscar elementos por su nombre de clase
let clases = document.getElementsByClassName("card")

Este método también nos devuelve un HTMLCollection con una lista con todas los elementos que tengan como nombre de clase el parámetro que le indicamos.

Buscar elementos por su nombre de formulario

Con estos dos métodos mencionados anteriormente, podemos acceder una lista de elementos buscándolos por nombre de etiqueta o por su nombre de clase, pero, en el caso que tengamos un formulario en nuestra página podemos acceder a elementos con su nombre de formulario y para eso se utiliza el método llamado .getElementsByName("buscar") y se usa de la siguiente manera:

// Buscar elementos por su nombre de formulario "name"
let nameForm = document.getElementsByName("buscar")

Este nos devuelve un NodeList es una coleccion de nodos, este no es un array, pero, es posible interactuar con .foreach() y tambien se puede convertir en array con Array.from.

Buscar elementos por su nombre de ID

Tambien podemos buscar elementos por su nombre de "id" con el método .getElementById("header") y se usa de la siguiente manera:

// Buscar elementos por su nombre de id
let id = document.getElementById("header")

Este nos devuelve la sintaxis HTML de la primer coincidencia que encuentre.

Con las nuevas actualizaciones del lenguaje han aparecido nuevos métodos que nos simplifican el uso de acceder a elementos del documento HTML, los 3 métodos vistos anteriormente han sido reemplazados por los métodos:

.querySelector()
.querySelectorAll()

En ambos métodos se debe especificar con un punto (.) cuando queramos buscar elementos por nombre de clase, y con un (hashtag, gatito, etc.) (#) cuando queramos buscar elementos por nombre de ID. .querySelector() nos devuelve la primer coincidencia encontrada, y, .querySelectorAll() nos devuelve todas las coincidencias encontradas.

Ambos métodos se usan de las siguiente manera:

let enlaces = document.querySelectorAll("a")
let card = document.querySelector(".card")

// nos devuelve todos los enlaces que existan
console.log(enlaces)
// nos devuelve el primer .card que exista
console.log(card)

En el caso de .querySelectorAll() puede compartir método como .foreach(), siguiendo el ejemplo anterior, recorriendo todos los enlaces:

// puede compartir metodos como en este ejemplo:
enlaces.forEach(el => {
  console.log(el)
})

Hasta acá hemos visto como podemos acceder a elementos del documento HTML y poder interactuar con ellos por medio del DOM. Hemos aprendido métodos que nos pueden ayudar a acceder a elementos HTML, poro, a día de hoy se utiliza mas el método .querySelector(), esto a medida que el programador lo requiera, ya que hay diferentes implementaciones que un método nos pueda ayudar mas que otro en el rendimiento de nuestra pagina según vaya creciendo el código.

Introducción a PHP y su sintaxis básica

Ulises A.F.C — Sun, 31 Dec 2023 04:32:37 +0000

Etiquetas PHP

Cuando PHP analiza un archivo, busca etiquetas de apertura y cierre, las cuales son: <?php y ?> que le indican a PHP que comience e interprete el código entre ellas. De esta manera permite que PHP se incruste en todo tipo de documentos diferentes, ya que al analizar el código que se encuentre entre estas etiquetas ignora todo lo que esta fuera de ellas.

Veamos un ejemplo de su sintaxis básica:

<?php

// esto es un comentario
// aca estarán instrucciones, código PHP

echo "hola mundo";

?>

echo es una instrucción en PHP para mostrar un mensaje, podemos usar su version corta con la siguiente sintaxis:

<?= "hola mundo" ?>

Esta version corta solo es valida en instrucciones echo.

Solamente lo que se encuentra dentro de estas etiquetas <?php ... ?> sera interpretado por PHP.

Veamos otro ejemplo donde incrustamos código PHP en un documento HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>PHP Sintaxis</h1>
    <?php echo "hola mundo"; ?><br>

    <?= "hola mundo con la version corta "; ?><br> 
</body>
</html>

En este caso PHP interpreta el código que se encuentra dentro de sus etiquetas, ósea, interpreta su sintaxis de código, ignorando el demás código, el navegador interpreta las etiquetas HTML y las muestra en el navegador, pero, PHP interpreta el código de su sintaxis dentro de sus etiquetas mostrando así su resultado, desde mostrar un simple mensaje a el resultado de alguna validación con sentencias condicionales, entre otros.

Tipos de Selectores en CSS

Ulises A.F.C — Tue, 12 Sep 2023 03:11:55 +0000

Los selectores en CSS son aquellos donde asignamos estilos a etiquetas del documento HTML.

Este tutorial se tratara de como podemos usar los selectores en CSS, veremos la mayor parte código de CSS.

Empecemos por clasificar los tipos de selectores que hay en CSS:

Selector universal
Selector de etiqueta
Selector de identificador (ID)
Selector de clase
Selector de atributo
Selectores agrupados
Selectores descendientes
Selector de hermano
Selector de hijo directo

Veremos a continuación cada uno de ellos, empecemos...

Selector universal

El selector universal en CSS se compone por el símbolo de un asterisco *, este selector hace referencia a todo el documento visible de una pagina web, por lo tanto, al definir estilos con este selector, este se aplica a todas las etiquetas del body.

* {
  background-color: darkslateblue;
  font-family: Arial, Helvetica, sans-serif
}

Este selector es mas utilizado para definir propiedades como box-sizing: border-box, fuente de letra o un color de fondo.

Selector de etiqueta

Los selectores de etiqueta son aquellos que se componen por el nombre de etiquetas HTML, como por ejemplo: body, p, header, article, section, footer, entre otros.

Para asignar estilos mediante selector de etiquetas, basta con colocar el nombre de la etiqueta HTML:

h1 {
  color: lightcyan;
}

h2 {
  color: lemonchiffon;
}

p {
  color: lawngreen;
}

b {
  color: aliceblue;
}

Selector de identificador (ID)

Los selectores de ID (identificador) se compone por el símbolo de # seguido de un nombre identificador.

#cabecera {
  background-color: lightskyblue;
  padding: 5px;
}

#contenido {
  background-color: lightblue;
  padding: 5px;
}

#titulo {
  color: darkred;
}

Selectores de clase

Los selectores de clase se componen por el símbolo del punto . seguido de un nombre.

.texto {
  color: darkslateblue;
}

Selectores de atributo

Los selectores de atributo se asignan por medio de corchetes [], dentro de ellos va el atributo al cual se le asignaría estilos.

Un ejemplo de como poder usar este tipo de selector, supongamos que en nuestra pagina tenemos enlaces hacia diferentes redes sociales, pero que dependiendo la URL podamos asignar un color al enlace, seria de la siguiente manera:

Estos serian los enlaces:

<a href="https://www.twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.instagram.com">Intagram</a>

En CSS seria de la siguiente forma:

[href="https://www.twitter.com"] {
  background-color: dodgerblue;
  padding: 6px;
  color: #222;
}

[href="https://www.facebook.com"] {
  background-color: navy;
  padding: 6px;
  color: #ccc;
}

[href="https://www.instagram.com"] {
  background-color: mediumvioletred;
  padding: 6px;
  color: pink;
}

Asi se definen los selectores de atributo. Una ventaja de usar este tipo de selector en casos muy especiales, es que podemos definir un patron. Por ejemplo, si queremos asignar estilos a un atributo que empieze por x palabra, o que termina en x palabra, o que contenga x palabra.

Veamos un ejemplo:

/* 
lo que empiece con la palabra "curso",
poner en mayuscula y pintar de color verde 
*/
[href^="curso"] {
  text-transform: uppercase;
  color: greenyellow;
}

/*
lo que termine con la palabra "css3"
pintarlos de color rosa 
*/
[href$="css3"] {
  color: palevioletred;
}

/* 
todo lo que lleva la palabra 'maquetar' 
poner en minuscula y pintarlo de blanco 
*/
[href*="maquetar"] {
  color: #fff;
  text-transform: lowercase;
}

Con el símbolo de ^ definimos el patrón para la búsqueda de "palabras que empiecen con".
Con el símbolo de $ definimos el patrón para la búsqueda de "palabras que terminen con".
Con el símbolo de * definimos el patrón para la búsqueda de "palabras que incluyan la palabra de".

Selectores agrupados

Los selectores agrupados son aquellos elementos que comparten mismos estilos que otros elementos, ya sea, selectores de etiqueta, selectores de ID, selectores de clase, entre otros. El objetivo de agrupar selectores es no repetir codigo. Don't repeat yourself.

article, #section {
  background-color: darkturquoise;
}

.titulo_uno, .titulo_dos, #titulo_tres {
  color: darkred;
}

Estos van separados por comas ,. como el ejemplo anterior.

Selectores descendientes

Los selectores descendientes no son mas que otro tipo de selector que se encuentre dentro de otro, y así sucesivamente. Un ejemplo seria:

En nuestro documento HTML tengamos lo siguiente:

<article class="parrafo">
  <h2 class="titulo">Concepto</h2>
  <p class="texto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Quaerat veritatis sint eius quasi, beatae vitae culpa 
    libero distinctio minima.
  </p>
</article>

El selector descendiente de article son la etiqueta h2 y p.

En CSS seria de la siguiente forma:

.parrafo .titulo {
  color: #558a05;
}

.parrafo .texto {
  color: #000111;
}

Así se asigna un selector descendiente, estas nos van separadas por comas , a diferencia de los selectores agrupados.

Aunque esta forma de usarlo no es tan usado, ya que para asignar estilos a un elemento de nuestro body en el html basta con poner el tipo de selector directamente. A diferencia de los tipos de selectores que nos restan por ver.

Selectores de hermano

Los selectores de hermano hacen referencia al hermano siguiente de un elemento HTML. Para acceder al hermano siguiente mas cercano, se utiliza el símbolo de +. También si queremos acceder a todos los hermanos siguientes se utiliza el símbolo de ~.

Un ejemplo, veamos el siguiente código HTML:

<main>
  <article>
    <h2>Titulo del parrafo</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Quaerat veritatis sint eius quasi, beatae vitae culpa 
      libero distinctio minima.
    </p>

    <p id="cita">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Quaerat veritatis sint eius quasi, beatae vitae culpa 
      libero distinctio minima.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Quaerat veritatis sint eius quasi, beatae vitae culpa 
      libero distinctio minima.
    </p>
  </article>
</main>

Para poder asignar estilos a un hermano siguiente de un elemento se hace de la siguiente forma:

h2 + p {
  color: purple;
}

#cita + p {
  color: cyan;
}

Como podemos observar en el ejemplo, la etiqueta h2 su hermano siguiente es un párrafo p, a ese párrafo se estaría aplicando el color: purple. También en el otro ejemplo, #cita tiene un hermano siguiente que es otro párrafo p, a ese párrafo se estaría aplicando el color: cyan.

Para poder asignar estilos a un hermano siguiente se debe anteponer el elemento anterior, ósea, su hermano anterior. Deben estar a la par ambos elementos para poder usar selectores de hermano, de lo contrario no funcionaria.

En caso de asignar estilos a todos los hermanos siguientes funciona de la misma manera, deben estar a la par del siguiente elemento para que funcione.

h2 ~ p {
  color: purple;
}

Así todos los hermanos p de h2 cambiarían de color. A excepción de si se encontrase una sentencia similar a esta:

#cita + p {
  color: cyan;
}

El hermano de #cita ese no cambiaria de color.

Selectores de hijo directo

Un selector de hijo directo se refiere a todos los elementos hijos de un elemento en especifico. Para hacer referencia a los hijos directos de un elemento se usa el símbolo de >.

Veamos el siguiente codigo HTML:

<section>
  <h2>Titulo del parrafo</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Quaerat veritatis sint eius quasi, beatae vitae culpa 
      libero distinctio minima.
    </p>

  <h2>Titulo del parrafo</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Quaerat veritatis sint eius quasi, beatae vitae culpa 
      libero distinctio minima.
    </p>

  <h2>Titulo del parrafo</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Quaerat veritatis sint eius quasi, beatae vitae culpa 
      libero distinctio minima.
    </p>
</section>

Para asignar estilos con selector de hijo directo, se haria de la siguiente forma:

section > h2, p {
  color: cadetblue;
}

Si queremos dar estilos a mas de un elemento que conformen hijos directos de un elemento, despues del simbolo >,los elementos van separados por comas ,.

Tambien, en un caso particular a este, podemos jugar con selector de hijo directo y selector de hermano:

section > h2 + p {
  color: cadetblue;
}

En este caso, section tiene como hijo directo "muchos" h2, pero esos h2 tienen un hermano p, a ese p se estarían aplicando los estilos.

En conclusión

Los selectores en CSS no son muy complejos, pero es necesario saber como es su comportamiento. Les invito a que puedan practicar con ejemplos muy sencillos y que no puedan olvidar estos temas, por muy sencillos que parezcan se pueden volver complejos si no practicamos de vez en cuando.

Puedes practicar en codi.link es un editor de código en linea muy ligero para poder hacer practicas.

Gracias por terminar hasta aquí.
Saludos <3

META TAG's HTML5

Ulises A.F.C — Thu, 27 Apr 2023 23:01:09 +0000

Etiquetas básicas META TAG y su función en nuestro sitio web.

Empecemos:

Definimos la codificación de caracteres en nuestro sitio web.

<meta charset="UTF-8">

Definimos la compatibilidad del navegador en que será visto nuestro sitio web. Si tu sitio web se vera en navegadores recientes no sera necesario esta meta tag.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Definimos la vista gráfica de nuestro sitio web para que se acople a diferentes tamaños de pantallas. Esto nos servirá para ser responsive nuestro sitio web.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Definimos palabras claves de búsqueda en el navegador para nuestro sitio web.

<meta name="keywords" content="HTML, Curso HTML, Sintaxis HTML, HTML5">

Definimos una descripción de nuestro sitio web.

<meta name="description" content="Curso basico y sintaxis de HTML5">

Definimos el nombre del autor del sitio web.

<meta name="author" content="Ulises AFC">

Desarrollar un proyecto MVC con PHP puro.

Ulises A.F.C — Wed, 09 Nov 2022 01:56:17 +0000

Si quieres desarrollar un proyecto web en PHP te presento una manera de como estructurar tu proyecto con buenas practicas y con el patron de diseño MVC.

Empezemos primero con la estructura de carpetas en tu editor de codigo o IDE favorito:

Se compone de dos carpetas principales: app/ & public/

En la carpeta public/:

Tendremos carpetas donde tendremos archivos estaticos, carpetas como:

css/
js/
img/

entre otras carpetas como por ejemplo puede ser:

fonts/

Adicional un archivo llamado index.php en el cual se va cargar lo necesario de la carpeta app/, para mostrar las vistas del proyecto en conjunto con los modelos y controladores, que al fin y al cabo la estructura del proyecto es MVC (modelo, vista, controlador).

En la carpeta app/:

Tendremos la logica de negocio, osea, tendremos el control de las vistas y los modelos en un controlador.
Carpetas como:

config/
lib/
helpers/
models/
views/
controllers/

Y adicional un archivo llamado init.php.

A medida que vayamos empezando iremos agregando archivos en las carpetas para explicar en que consiste cada archivo.

Si pudiste observar en la imagen de arriba, hay archivos llamados .htaccess. Estos archivos nos ayudaran mucho para evitar acceso a carpetas y mapear URL, veremos poco a poco en que consisten, pero antes te dire en donde iran ubicados estos archivos:

El primer .htaccess lo crearemos en la carpeta raiz del proyecto:

El segundo .htaccess lo crearemos en la carpeta app/:

Y el tercer .htaccess lo crearemos en la carpeta public/:

A continuación escribiremos las instrucciones en los archivos .htaccess:

Empezamos por el .htaccess de la carpeta app/ con la siguiente instruccion:



Options -Indexes

Con esa instruccion haremos que no se tenga acceso a esa carpeta ya que tendremos la logica del negocio, el funcionamiento de la aplicacion web y no nos interesa que tengan acceso a dichas carpetas de personas (mal intencionadas) en caso de que asi sea.

Continuaremos por el .htaccess de la carpeta public/:

Antes de explicar estas instrucciones debemos saber que por defecto el primer archivo que lee el navegador es el index. Ahora bien, sucede lo siguiente: Al nosotros digitar una url con un archivo que no existe por ejemplo localhost/mvc-php/about.php pues el servidor nos lanza un error 500 llamado Internal Server Error ya que el archivo about.php no lo tenemos en nuestro proyecto.

Es por eso que escribimos las siguientes instrucciones:



<IfModule mod_rewrite.c>
Options -Multiviews
RewriteEngine on
RewriteBase /mvc-php/public
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
</IfModule>

Con estas instrucciones hacemos que se eviten las Multiviews es decir que en nuestro proyecto /mvc-php/public si no encuentra un archivo en la carpeta public/ que no existe pues, redireccionar automaticamente al index.php, adicionalmente pasamos un argumento llamado ?url en donde mas adelante veremos como podremos mapear la URL a travez de ese argumento y extraer esos datos con la funcion explode() de php.

Recuerda que nuestra carpeta o proyecto se llama mvc-php por eso hemos escrito ese nombre en nuestro archivo .htaccess. Si tu proyecto o carpeta se llamara diferente debes ponerle el nombre de tu proyecto para evitar problemas a la hora de correr la web.

Terminaremos por el .htaccess de la carpeta raiz:

Antes de explicar las instrucciones, sucede una cosa, cuando abrimos nuestro proyecto en la web a travez de un servidor local nos muestra el directorio de nuestro proyecto:

Para evitar esto, escribiremos las siguientes instrucciones:



<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ public/ [L]
RewriteRule (.*) public/$1 [L]
</IfModule>

Con estas instrucciones hacemos que nos lea de principio a fin (^$) seguido de la carpeta public/ y nos cargue un archivo con cualquier extension (.*). Este archivo se lo pasamos a travez de la URL en el argumento ?url=$1 del archivo .htaccess de la carpeta public/

Hasta acá hemos terminado con las instrucciones de los archivos .htaccess

A continuación empezaremos a trabajar con la URL para el funcionamiento de nuestro proyecto:

Dentro de la carpeta app/ iremos a la carpeta lib/ y crearemos el archivo Core.php y escribiremos el siguiente codigo:



class Core
{

  public function __construct()
  {
    $this->getUrl();
  }

  public function getUrl()
  {
    echo $_GET['url'];
  }
}

Estamos obteniendo la url del navegador, ya explicare de donde sacamos la url, continuando, iremos al fichero index.php de la carpeta public/ y escribiremos lo siguiente:



require_once '../app/init.php';

Recordemos que en el archivo index.php de la carpeta public/ cargaremos todo lo necesario de la carpeta app/

Continuando, iremos al archivo init.php de la carpeta app/ y por el momento escribiremos lo siguiente:



echo "<h1>HELLO WORLD!!!</h1>";

Abramos nuestro proyecto en el navegador por medio del servidor local y veremos el mensaje de HELLO WORLD, si es así, vamos por buen camino.

Esto era prueba para verificar que funcione lo que tratamos de hacer, volvemos al archivo init.php de la carpeta app/ y cargaremos los ficheros de la carpeta lib/ con las siguientes lineas de codigo:



spl_autoload_register(function($lib){
  require_once 'lib/' . $lib . '.php';
});

Con esto hacemos que vayamos cargando automaticamente los ficheros de la carpeta lib/, luego, para mapear la URL lo haremos en el fichero de Core.php, entonces debemos instanciar la clase que tenemos en Core.php en el archivo index.php de la carpeta public/ con la siguiente linea de codigo:



$init = new Core;

Ahora recargaremos en el navegador nuestro proyecto y no nos debe aparecer nada. Si es asi vamos por buen camino:

Ahora para probar que estamos obteniendo la URL digitaremos algo en nuestra URL por ejemplo:

Podemos ver que se imprime la URL, explicaré a detalle como es que obtenemos lo que escribimos despues de localhost/mvc-php/. Recordemos que escribimos algunas instrucciones en el archivo .htaccess de la carpeta public/ y en pocas palabras evitabamos las Multiviews, es decir, si buscabamos un archivo que no existe en nuestro proyecto pues que nos redireccione al index.php y a la vez indicabamos que la base de nuestro proyecto seria /mvc-php/public ya que en esa direccion se encuentra pues valga la redundancia el index.php, luego, pasabamos un parametro ?url=$1 donde todo lo que escribamos despues de nuestra base lo obtendriamos a travez de ese parametro. Por eso es que cuando escribimos una direccion localhost/mvc-php/usuarios/listado.php pues nos imprime justamente usuarios/listado.php

Continuando, seguiremos de por lleno en el fichero Core.php:

Recordemos que teniamos una clase con un constructor y un método donde obteniamos la URL. En el método getUrl() borraremos lo que teniamos y escribiremos las siguientes lineas de codigo:



public function getUrl()
{
  if(isset($_GET['url']))
  {
    $url = rtrim($_GET['url'], '/');
    $url = filter_var($url, FILTER_SANITIZE_URL);
    $url = explode('/', $url);

    return $url;
  }
}

Evaluamos si existe un valor en url, si es así entonces, obtenemos la url y retiramos espacios en blanco al final de la cadena con la funcion rtrim(), fijate que agregamos un parametro adicional (/), esto es para que nos elimine ese caracter también ya que una URL se separa por ese caracter.

Continuando, filtramos la url con la funcion filter_var() y lo filtramos como FILTER_SANITIZE_URL. Esto es para que lo considere como una URL en sí.

Luego con la funcion explode() guardamos en un array los valores de la URL separados por el caracter /, es decir, va a recortar una cadena de texto cuando encuentre el caracter /. Y con esto estariamos mapeando la URL.

Para probar que funciona, en el constructor de la clase escribiremos lo siguiente:



public function __construct()
{
  print_r($this->getUrl());
}

Ahora veamos en el navegador y escribamos algo en la URL para que nos devuelva los valores en un array:

Observemos que en el indice [0] se guardo usuarios, en el indice[1] se guardo mostrar-usuarios, y en el indice[2] se guardo pues el numero 2. Ahora sí, ya tenemos mapeada la URL.

Vamos a terminar de escribir las ultimas lineas de codigo en el constructor, pero antes, debemos definir unas variables, y son las siguientes:



protected $controller;
protected $method;
protected $parameters = [];

Tengamos en cuenta que la url nos devuelve un array lo cual lo interpretaremos de la siguiente manera:

indice[0] va ser igual al controlador
indice[1] va ser igual al metodo del controlador
indice[2] va ser igual a los parametros que iran como argumento en los metodos

Luego dentro del constructor escribiremos las siguientes lineas de codigo:



public function __construct()
{
  $url = $this->getUrl();

  if(file_exists('../app/controllers/' . ucwords($url[0]) . '.php'))
  {
    $this->controller = ucwords($url[0]);
    unset($url[0]);
  }

  require_once '../app/controllers/' . $this->controller . '.php';
  $this->controller = new $this->controller;

  if(isset($url[1]))
  {
    if(method_exists($this->controller, $url[1]))
    {
      $this->method = $url[1];
      unset($url[1]);
    }
  }

  $this->parameters = $url ? array_values($url) : [];
  call_user_func_array([$this->controller, $this->method], $this->parameters);
}

Empezemos explicando, primero evaluamos si existe un controlador en la carpeta controllers/ con la funcion file_exists y tambien utilizamos la funcion ucwords() para convertir en mayusculas la primer letra ya que por ende estaremos usando clases y las clases empiezan con una letra mayuscula. Entonces, si el archivo existe procedemos a asignar el valor del indice[0] de la url a la variable $controller, asi mismo utilizamos la funcion unset() para destruir el valor anterior del indice[0]. Luego lo que hacemos es requerir ese archivo y como es una clase hacemos instancia de la misma.

Segundo, evaluamos si existe un valor en el indice[1] osea, un metodo, y este metodo se encuentra dentro del controlador entonces tambien evaluamos si el metodo existe con la funcion method_exists, si el metodo existe pues asignamos el valor del indice[1] de la url a la variable $method, y de igual forma utilizamos la funcion unset() para destruir el valor anterios del indice[1].

Tercero, con los parametros recordemos que le asignamos un array vacio, entonces vamos asignar a $parameters el valor de $url y pues $url es otro array con valores. Si te fijas, usamos operadores ternarios, es decir si $parameters es igual a url entonces utilizamos la funcion array_values() que lo que hace es devolver los valores de un array, con eso evitamos guardar un array dentro de otro array. Y si no hay nada en $parameters pues seguira siendo un array vacio. Para finalizar utilizamos la funcion call_user_func_array() y esta recibe dos parametros, primero, recibe un callback, segundo, el parametro a pasar a la callback es por eso que pasamos como callback un array con los valores de $controller y $method, y pues el parametro que se va a pasar es el de $parameters.

Hasta acá hemos terminado de configurar el Core.php, ahora bien, como saber si esto funciona. Pues vamos a la carpeta controllers/ y crearemos un archivo, yo lo llamare Views.php, recordemos que estas deben ser clases. Dentro escribiremos algunos metodos, esto lo haremos con fin de demostrar, para seguir el ejemplo puedes escribir las siguientes lineas de codigo:



class Views
{

  public function inicio()
  {
    echo "<h1>Pagina de Inicio</h1>";
  }

  public function update($id)
  {
    echo "Update view " . $id;
  }

}

Vayamos al navegador y escribamos la direcion indicando el controlador y el metodo que queremos que se cargue:

Y en efecto vemos que se imprime lo que hemos indicado en el metodo inicio().

Probemos con el otro metodo:

Y en efecto vemos que recibe el parametro e imprime lo que hemos indicado en el metodo update($parametro).

A continuacion agregaremos otro fichero a la carpeta lib/ llamado Control.php

Cual será la función de este archivo, pues, se encargará de cargar los modelos y las vistas de sus respectivas carpetas, osea, desde models/ y de views/pages/

Entonces escribiremos las siguientes lineas de codigo:



class Control
{
  public function load_model($model)
  {
    require_once '../app/models/' . $model . '.php';

    return new $model;
  }

  public function load_view($view, $datos = [])
  {
    if(file_exists('../app/views/pages/' . $view . '.php'))
    {
      require_once '../app/views/pages/' . $view . '.php';
    }
    else
    {
      die("404 NOT FOUND");
    }
  }
}

Explicando, pues el metodo load_model($model) se encarga de requerir el modelo que vamos a utilizar en el controlador. Y el metodo load_view($view, $datos = []) se encarga de requerir la vista que queremos que se cargue en el controlador, adicional podemos mandar un array de datos para mostrarlo en la vista.

Ya una vez teniendo esta clase con los metodos que nos ayudaran a cargar los modelos y las vistas, haremos que la clase View.php herede de Control.php para tener acceso a esos metodos, y eso se hace de la siguiente manera:

class Views extends Control

Ahora, antes de probar esos metodos debemos de terminar de configurar nuestro proyecto.

En la carpeta config/ crearemos un fichero llamado config.php, y escribiremos lo siguiente:



define('APP', dirname(dirname(__FILE__)));
define('URL', 'http://localhost/mvc-php');

En pocas palabras estamos definiendo dos constantes y como valor estamos asignando una ruta, en el caso de la constante APP la ruta es hacia las carpetas dentro de APP, y en el caso de URL estamos definiendo la url del proyecto, esto nos ayudara a tener acceso de archivos de ambas carpetas.

Para que este archivo nos funcione, lo vamos a requerir en init.php y vamos a escribir lo siguiente:

require_once 'config/config.php';

Luego nos iremos a la carpeta de views/ y a la carpeta de inc/ donde crearemos dos archivos llamados header.php y footer.php.

Primero editaremos el fichero de header.php y escribiremos lo siguiente:



<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?= URL . '/css/bootstrap.min.css' ?>">
  <title><?= $datos['title'] ?></title>
</head>
<body>

Simplemente es codigo HTML5 con la diferencia que estamos cargando estilos CSS3, en este caso pues de Bootstrap. Ademas, fijate que en title tenemos codigo PHP, esto es porque cuando vayamos a cargar una vista desde el controlador le podemos pasar parametros en un array, y cuando le demos un valor a title se imprimira automaticamente ahí.

Ahora en footer.php escribiremos lo siguiente:



  <script src="<?= URL . '/js/bootstrap.bundle.min.js' ?>"></script>
</body>
</html>

Y pues, es codigo HTML5, estamos cargando el archivo JavaScript de Bootstrap, y a la vez estamos cerrando las etiquetas de body y html.

Estos archivos son repetitivos, por lo tanto con esto nos ahorramos escribir en cada vista este codigo.

Ahora vayamos a la carpeta de views/ y a la carpeta de pages/ y crearemos un fichero llamado inicio.php y escribiremos lo siguiente:



<?php require_once APP . '/views/inc/header.php' ?>

<div class="container-fluid bg-light py-5">
  <div class="container">
    <h1 class="display-4">Welcome!!!</h1>
  </div>
</div>

<?php require_once APP . '/views/inc/footer.php' ?>

Fijate que estamos cargando header.php al inicio, y tambien estamos cargando footer.php al final. Con esto, cada vez que vayamos a escribir codigo HTML5 ya tendremos el codigo reutlizable y solo lo tendremos que requerir con require(). Esto nos ayudara a optimizar un poco el codigo en estos archivos.

También estamos mostrando pues un mensaje Welcome con algunas clases de bootstrap para darle estilos a nuestras paginas.

Ya teniendo esto, hoy si vayamos a Views.php dentro de controllers/ y editaremos el metodo llamado inicio():



public function inicio()
{
  $datos = [
    "title" => "Inicio"
  ];
  $this->load_view('inicio', $datos);
}

Fijate que en el metodo inicio(), primero, asignamos un array llamado $datos y creamos un key llamado title, el valor que este obtenga se mostrara en la etiqueta de cada pagina. Luego hacemos uso del metodo que nos ayuda a cargar las views/pages que queremos mostrar, solamente indicamos el nombre de la vista, y le pasamos el array de $datos para que tambien muestre el titulo de la pagina.

Finalmente, probemos como es que va terminar funcionando:

Vayamos al navegador y nos dirigimos a la URL de nuestro proyecto:

No nos aparecera nada, pero si en la URL indicamos el controlador y el metodo que queremos ver, nos muestra lo siguiente:

Y vemos que se carga la pagina de inicio que habiamos creado en pages/views/inicio.php por medio del controlador y el metodo dentro del cual requerimos esa vista con el metodo load_view().

CONCLUSIONES:

Hasta aquí hemos terminado de cierta manera el funcionamiento del proyecto, el cual consiste en aplicar el patron de diseño MVC (modelo, vista, controlador) y a la vez aplicar POO (programacion orientada a objetos). También decir que, consideraría este proyecto como un template donde puedes usarlo para crear un proyecto para desarrollar un CRUD.

Hasta acá dejaré desarrollado este proyecto, y posteriormente subiré otra nota donde usaremos este mismo proyecto pero realizando un CRUD y como poder desarrollarlo.

Te dejo el link del repositorio en GITHUB y puedas usar este template para desarrollar un proyecto.

Si puedes deja una estrella al repositorio :p

template-mvc-php