La programación web se ha convertido en una de las habilidades más demandadas en el mundo digital. En este concurso te proponemos dos ejercicios prácticos que pondrán a prueba tu dominio de la conexión con bases de datos, el diseño de interfaces y la implementación de soluciones seguras y eficientes.

Estos retos están diseñados para que desarrolles tus competencias en desarrollo web full stack, desde la planificación del modelo de datos hasta la presentación visual del sistema.

Objetivo

Aplicar los principios del desarrollo web para crear aplicaciones dinámicas con conexión a base de datos, incorporando seguridad, validación, diseño responsivo y funcionalidad completa de CRUD (crear, leer, actualizar y eliminar).

Sobre los Ejercicios

Los ejercicios propuestos buscan fortalecer el pensamiento lógico y la estructura técnica detrás de una aplicación web.

• En el Gestor de Comentarios, pondrás en práctica la autenticación, los permisos y el manejo de datos. Se recomienda la siguiente lista de criterio para este ejercicio:

• En el Mini Cotizador, aprenderás a trabajar con relaciones entre tablas, formularios interactivos y generación de documentos. Se recomienda los siguientes criterios para este ejercicio:

Ambos retos simulan escenarios reales de trabajo en el desarrollo web profesional.

Estos ejercicios te preparan para enfrentar los desafíos reales del desarrollo web profesional. Combina la creatividad con la lógica, experimenta con nuevas herramientas y demuestra tu talento.

Participa, aprende y reta tus límites. El conocimiento se fortalece con la práctica y la curiosidad.

La entrada Programación Web y el Acceso a Bases de Datos se publicó primero en Frexus.

Convertir números a letras, suele ser un ejercicio muy peculiar en el tema de la programación, el detalle esta en los primeros 19 números de la numeración ya que a partir del 20 hasta el infinito no es más que la conjugación de estos. A continuación se describe la función que se desarrollo:

Código fuente

function convertirNumeroALetras($numero) {
    # arreglo con los nombres de los números del 0 al 19
    $numerosHastaDiecinueve = array(
        0 => 'un', 1 => 'uno', 2 => 'dos', 3 => 'tres', 4 => 'cuatro', 5 => 'cinco',
        6 => 'seis', 7 => 'siete', 8 => 'ocho', 9 => 'nueve', 10 => 'diez', 11 => 'once',
        12 => 'doce', 13 => 'trece', 14 => 'catorce', 15 => 'quince', 16 => 'dieciséis',
        17 => 'diecisiete', 18 => 'dieciocho', 19 => 'diecinueve'
    );

    # arreglo con los nombres de las decenas
    $decenas = array(
        20 => 'veinte', 30 => 'treinta', 40 => 'cuarenta', 50 => 'cincuenta',
        60 => 'sesenta', 70 => 'setenta', 80 => 'ochenta', 90 => 'noventa'
    );

    # arreglo con los nombres de las centenas
    $centenas_letras = array(
        100 => 'cien', 200=> 'docientos', 300=>'trecientos', 400=>'cuatrocientos', 500=>'quinientos',
        600=>'seicientos', 700=>'setecientos', 800=>'ochocientos', 900=>'novecientos', 1000 => 'mil'
    );


    if ($numero < 20) {
        # Si el número es menor que 20, se busca en el array de números hasta diecinueve
        if($numero == 00){
            #break;
        }else{
            return $numerosHastaDiecinueve[$numero];
        }
    }elseif ($numero < 100 ) {
        # Si el número es menor que 100, se descompone en decenas y unidades
        $decena = floor($numero / 10) * 10;
        $unidad = $numero % 10;
        $letra = $decenas[$decena];
        if ($unidad > 0) {
            $letra .= ' y ' . $numerosHastaDiecinueve[$unidad];
        }
        return $letra;
    } elseif ($numero < 1000) {
        # Si el número es menor que 1000, se descompone en centenas, decenas y unidades
        $centena = floor($numero / 100);
        $resto = $numero % 100;
        $centena = floor($numero / 100)*100;
        $decena = $numero - $centena;
        $letra = ($numero < 200 && $numero > 100) ? $centenas_letras[$centena].'to '.convertirNumeroALetras($decena) : $centenas_letras[$centena].' '.convertirNumeroALetras($decena);
        return $letra;
    } else {
        # Si el número es mayor o igual a 1000, se descompone en miles, centenas, decenas y unidades
        $millar = floor($numero / 1000);
        $resto = $numero % 1000;
        $letra = $millar == 1 ? $centenas_letras[1000] : convertirNumeroALetras($millar) . ' mil';
        # si el número es mayor de 100 y menor a los 102, ciento un mil ... y no ciento uno mil...
        if( ($millar >100 && $millar <102)){
            $letra = $centenas_letras[$millar-1].'to '.$numerosHastaDiecinueve[0].' mil ';
        }
        # validaciones para los 201, 301, 401, ... 901 los docientos ... un mil 
        if(($millar > 200 && $millar < 202) || ($millar > 300 && $millar < 302) || ($millar > 400 && $millar < 402) || ($millar > 500 && $millar < 502) || ($millar > 600 && $millar < 602) || ($millar > 700 && $millar < 702) || ($millar > 800 && $millar < 802) || ($millar > 900 && $millar < 902)){
            $letra = $centenas_letras[$millar-1].' '.$numerosHastaDiecinueve[0].' mil ';
        }
        if ($resto > 0) {
            $letra .= ' ' . convertirNumeroALetras($resto);
        }
       # si el número es menor o igual a 1'000,000, se descompone en los millares, miles, centenas, decenas y unidades.
        if ($numero == 1000000){
            $letra =  $numerosHastaDiecinueve[0].' millón';
        }elseif ($numero > 1000000){
            $millon = floor($numero / 1000000);
            $centimas = $numero - (1000000*$millon);
            if ($millon == 1){
                $letra = $numerosHastaDiecinueve[0].' millón '.convertirNumeroALetras($centimas);
            }else{
                $letra = convertirNumeroALetras($millon).' millones '.convertirNumeroALetras($centimas);
                #$letra = $centimas;
            }
        }
        return $letra;
    } 
}

Explicando la función

Primero hay que tener en cuenta que la se creo tres grupos de arreglos donde se encuentren los que no son compuestos, las decenas y centenas; el resto de los números son el resultado de la composición o mezcla de estos tres arreglos. Los arreglos son:

• numerosHastaDiecinueve: Este arreglo contiene todos los números desde el uno hasta el 19, también cuenta con una posición donde esta la palabra “un” este es usado para referirse a las cantidades del millón, es decir, no suele escribirse uno millón, sino un millón.
• decenas: Este arreglo contiene todas las descripciones que se pueda tener en el orden de las decenas.
• centenas_letras: Este arreglo contiene las descripciones que se puede tener en el orden de las centenas.

Cuando se recibe una cantidad la función la procesa, identificando todos los números menores a 20 (los que se encuentran en el primer arreglo). Si esta condición se cumple ( if ($number < 20) ) se valida que la cantidad que se envía no sea igual a cero, de ser así se envía el contenido que tiene el arreglo en la posición de la cantidad dada; así al recibir la cantidad 11, 10, 1 o cualquiera que sea menor a veinte escribirá once, diez, uno o lo que contenga la casilla en esa posición.

Luego se usa la condición $numero < 100 para descomponer las decenas y si el número llega a ser menor de 20 se concatena con el llamado a la función usando la recursividad para los unidades y así componer la descripción de la cantidad.

Para el caso de las centenas se sigue la misma regla solo que ahora la condición es para cuando $numero < 1000, se tiene el caso de que las cantidades sea 101, 201, que debe escribir un y no uno, para ello se agrego en la posición cero del arreglo numerosHastaDiecinueve, la notación un, que también se utilizará cuando se este en el rango de los millones, se escribirá un millón. Sin esta variante se escribiría uno millón o ciento uno mil.

Ejecución del script

Se puede apreciar en la imagen 1, el resultado que se tiene al ejecutar el script en el rango de los millones. Mientras en el vídeo 1, se observa como el script puede ser modificado para convertir diferentes tipos de cantidades.

Este script permite convertir números a letras hasta el orden de los millones, faltaría agregar las correspondientes líneas para billones, trillones y demás. Si se utilizar en algún sistema de presupuestos o facturación solo hay que cambiar en el contenido uno del array numerosHastaDiesinueve por un, y posteriormente concatenarlo con las palabras “Pesos M.N.”.

Versión en ingles

Código fuente disponible en el github

La entrada Convertir números a letras se publicó primero en Frexus.

Y resulta que al querer enseñar unas instalaciones básicas se me han olvidado los comandos, y veo que en mi bitácora de apuntes no tengo nada al respecto por lo que bajo el contexto de que se tiene acceso a una terminal se dejaran los comandos para la creación de un servidor web clásico.

Servidor web apache.

Para su instalación se escribe el siguiente comando:

sudo apt install apache2 -y

Para comprobar la instalación de apache, hay que obtener la ip del equipo en el que se ha instalado y esa ip colocarlo en el navegador. Si fue en tu propio equipo solo con escribir localhost se mostrará una página, esta se encuentra en la ruta /etc/var/www/html en el se podrá observar un fichero index.html que es el que se visualiza en el navegador. En caso que lo hayas instalado en un equipo o una raspberry y se este accediendo vía ssh. Con la dirección ip en el navegador se mostrará el index de apache.

Instalar PHP

Para la instalación de php no hace mas que escribir el siguiente comando:

sudo apt install php

Instalará la última versión estable que se encuentre en los repositorios. Para validar que se ha instalado correctamente el lenguaje de scripting php, con que se escriba un archivo con nombre phpinfo.php en la ruta /etc/var/www/html/ y debe de contener el siguiente código:

<?php
    phpinfo();
?>

Para visualizar el script con que se escriba en el navegador localhost/phpinfo.php se mostrará todos los detalles de la instalación de php. Se debe de sustituir el localhost por la dirección ip del servidor en que se ha instalado.

Es posible que se presente algún detalle de permisos en el momento de escribir el archivo phpinfo.php, y es porque el único que puede escribir en esa ruta (/etc/var/www/html) es el super usuario, por lo que se tiene dos opciones

1. Crear el archivo como super usuario, esto se logra colocando la palabra sudo al fichero que se va a crear.
2. Brindar los privilegios de lectura, escritura y ejecución a todos los usuarios o al usuario en particular para que pueda escribir y ejecutar sin detalles, eso se solventa con la ejecución del comando: sudo chmod -R 777 html/ no es lo ideal estos permisos en producción.

Instalar MariaDB

Esto se logra con ejecutar el comando:

sudo apt install mariadb-server php-mysql

Posteriormente hay que ejecutar el comando de configuración de mysql con la siguiente instrucción

sudo mysql_secure_installation

Se sigue el asistente y se responde a las preguntas y listo

Instalar phpmyadmin

Con la ejecución del siguiente comando se logra:

sudo apt install phpmyadmin

Pedirá la contraseña de root, la que se coloco en la instalación de mariadb, y preguntará si se usara apache2 como servidor web, para esta guía se deja marcado apache2.

Instalar servicio ftp

Esta parte super fácil se debe de ejecutar lo siguiente:

sudo apt install vsftpd

Después de que se ejecute la instalación hay que ir al fichero de configuración y validar que este activo (sin que este comentado) las siguientes lineas:

local_enable=YES
write_enable=YES

El fichero de configuración del servicio ftp se encuentra en la siguiente ruta: /etc/vsftpd.conf no olvidar que debe de abrirse con el comando sudo quedando la orden de la siguiente manera:

sudo nano /etc/vsftpd.conf

Finalmente para que se puedan enviar ficheros al servidor web pues simple al cliente ftp que se use se le proporciona la dirección ip, el usuario y la contraseña, regularmente estas credenciales son con los que se autentica en el equipo en donde se ha realizado la instalación.

La entrada Y un buen día se olvida se publicó primero en Frexus.

Regularmente siempre se es partidario de instalar todo directamente en el equipo, a lo mucho virtualizar un window por cuestiones de ofimática en donde no exista alguna compatibilidad con las diversas alternativas.

Sin embargo cuando un cliente te solicita crear el ambiente clásico de desarrollo en una macbook air con chip M1 y su actualización 12 del sistema operativo, te sueles topar en que muchas cosas cambian y que lo mejor en todo caso es correr o emular (en el mejor de los términos) el ambiente dentro de la M1. Y es ahí donde entra docker.

Después de varias horas invertidas en el aprendizaje de conceptos y demás utilidades. Se pudo montar un ambiente clásico web. Lo que se puede apreciar es que cuenta con una aplicación de escritorio para poder descargar imágenes, montar los contenedores y hacer uso de microservicios (claro en la aplicación que se vaya a crear).

Y lo que más agrado, fue que se puede hacer lo mismo desde una terminal, me gusto que se puede emular las partes básicas de un sistema operativo (alpine, debian, ubuntu entre otros). Otra cosa cosa que encanto fue la fácil que llega ser montar, crear tu propia imagen, usarla, eliminarla; y como en su momento me lo comentaron “el consumo de recurso” es mínimo.

Al calce dejo el script con el que se monto el ambiente clásico, (claro por clásico se hace referencia a un servidor web -apache- un lenguaje de programación -php- el gestor de base de datos -mariadb- y no puede faltar la interfaz gráfica -phpmyadmin-).

version: "2"
services:
    www:
        container_name: www
        image: php:7.2-apache
        restart: always
        ports:
            - "80:80"
        volumes:
            - ../public/:/var/www/html
        links:
            - db:db
        networks:
            - default
    db:
        container_name: db
        image: mariadb:latest
        restart: always
        ports:
            - "3307:3306"
        volumes:
           - db-data:/var/lib/mysql
        environment:
            MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
            
    phpmyadmin:
        container_name: phpmyadmin
        image: phpmyadmin/phpmyadmin
        restart: always
        links:
            - db:db
        ports:
            - 81:80
volumes:
    db-data:

¿Qué es lo que hace?

Bueno, pues crea tres contenedores uno web, donde esta apache y php, llamado www. Otro contenedor llamado db donde estará la instancia de mariadb y la contraseña del root estará vacía. El contenedor número tres tiene de nombre phpmyadmin y si en él se encuentra solamente la interfaz gráfica que gestiona todo en maria db, esté estará disponible desde el puerto 81 del localhost y esta vinculado con el contenedor db. Y se crea un volumen llamada db-data donde todos los contenedores estarán convergiendo.

¿Cómo funciona?

Primero el código anterior debe de estar guardado en un fichero con nombre “docker-compose.yml“, se copia tal cual y luego se debe de ejecutar el comando:

% docker-compose up -d

Después ya solo escribes en el navegador localhost:81 y se mostrará la página de acceso de phpmyadmin. Si escribes localhost se mostrará la página de apache. Y lo interesante es que se crea una carpeta con el nombre de public y dentro de ella es donde se colocarán todos los proyectos que se quieran hacer usando la tecnología clásica apache + php + mariadb + docker.

¿Qué se puede hacer?

Aún no se si pueda ser posible emular de tal grado una ofimática de Microsoft en docker aunque solo sería para los que usamos distribuciones basadas en linux. Aun falta por aprender más cosas. como construir tu propia imagen de docker, la ventaja es que si formateas llevas esa misma imagen a otro equipo la “instalas” y se tiene de nuevo el ambiente creado para desarrollar.

La entrada Docker, sus manías y encantos. se publicó primero en Frexus.