Buenas prácticas en desarrollo web: separación frontend y backend

Contenido del curso

Introducción

Conceptos básicos en la práctica

Microproyecto de lógica

Conclusiones

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:33

Buenas prácticas en desarrollo web: separación frontend y backend

Curso Práctico de PHP

Clase 17 de 18

Clase 17 / 18

Recursos

¿Cómo mejorar el desarrollo de aplicaciones mediante buenas prácticas?

En el mundo del desarrollo de aplicaciones, no basta con que el código funcione; es esencial que esté bien estructurado y sea comprensible para otros desarrolladores. Aprender e implementar buenas prácticas en tus proyectos no solo optimiza el rendimiento, sino también eleva tu nivel de conocimiento y profesionalismo. Aquí exploraremos cómo puedes mejorar tus habilidades de programación mediante el uso de técnicas que aseguran un código más limpio y organizado.

¿Por qué es importante mantener la uniformidad en el lenguaje de programación?

El primer aspecto que debes considerar al desarrollar aplicaciones es la consistencia en el idioma de tus variables y funciones. Esto puede parecer un detalle menor, pero el impacto en la claridad y comprensión del código es significativo.

Consistencia Lingüística: Es común ver proyectos que mezclan idiomas en los nombres de variables, lo cual es una mala práctica. Mantener un solo idioma, preferiblemente inglés debido a su aceptación global en la comunidad de desarrollo, facilita la comprensión y colaboración en equipos internacionales.
Estándares Globales: Al adoptar una uniformidad en inglés, aprovechas un estándar que puede ser entendido y utilizado mundialmente, lo que también es esencial si planeas publicar tus proyectos y ayudar a más personas.

¿Cómo estructurar adecuadamente el frontend y el backend?

Separar correctamente el frontend del backend es fundamental para el mantenimiento y escalabilidad de una aplicación. Cada sección tiene un propósito distinto:

Frontend: Debería manejar la estructura y presentación utilizando HTML, CSS y JavaScript. Aquí se realiza la interacción con el usuario, mostrando datos de forma clara y visualmente atractiva.
Backend: Debería enfocarse en el procesamiento de datos, las comparaciones, análisis y validaciones utilizando lenguajes como PHP. Este enfoque distribuye las responsabilidades del código adecuadamente, explotando las fortalezas de cada tecnología.

¿Cómo integrar HTML, JavaScript y PHP de manera efectiva?

La integración de estas tecnologías te permite desarrollar aplicaciones más dinámicas y robustas. Aquí hay algunos consejos para lograrlo:

Modularización: Diseña tu aplicación separando claramente la presentación y el procesamiento de datos. HTML y CSS se encargan del diseño, mientras que JavaScript administra la lógica de interacción del usuario.
Funcionalidades de PHP en el Backend: PHP debe manejar el procesamiento y análisis de datos del formulario. Por ejemplo, verificar entradas, realizar cálculos, y devolver resultados que luego tu frontend mostrará adecuadamente.
Conocimiento contínuo: Plataformas educativas como Platzi ofrecen cursos desde nivel básico hasta avanzado en estas tecnologías. Aprovechar estos recursos te capacita para realizar maquetaciones excepcionales y formularios dinámicos, integrando perfectamente frontend y backend.

A medida que sigues aprendiendo y practicando, recuerda que implementar estas buenas prácticas te ayudará a llevar tu desarrollo a un nivel superior. El desafío es claro: separa tu aplicación con un frontend bien estructurado y conecta con JavaScript, mientras desarrollas un análisis de datos riguroso con PHP. Este enfoque no solo mejorará la calidad de tus proyectos actuales, sino que sentará las bases para crecer profesionalmente en el mundo del desarrollo de software.

Daniel Condía Figueredo

Hace 3 años

El primer reto de la clase 15, lo integre con jquery, e hice algunas buenas practicas que mencionan aqui. en donde php solo se usa para la lógica, y separando la parte de html de php

index.html

<html lang="es">
<head>
    <title>Descuentos a la vista</title>
    <meta charset="UTF-8"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <form method="post" id="form_number_products">
            <label for="input_number_products">
                <strong>¿A cuantos productos va a aplicar el descuentos?:</strong>
            </label>
            <input name="input_number_products" type="number" id="input_number_products"
                   placeholder="Ingrese el número de productos" required />
            <button type="button" id="button_submit">Enviar</button>
        </form>
    </div>
    <script src="index.js"></script>
</body>
</html>

Se validan las cosas en:

index.js

function valid_number_products() {
    const ALERT_ERROR_EMPTY = "El campo no puede estar vacío";
    const ALERT_ERROR_INT = "ERROR, solo ingrese números enteros";

    //Validamos los campos de texto
    if ($('#input_number_products').val() === "") {
        alert(ALERT_ERROR_EMPTY);
        $("#input_number_products").focus();
        return false;
    } else if (isNaN($('#input_number_products').val())) {
        alert(ALERT_ERROR_INT);
        return false;
    }
    return true;
}

function valid_prices() {
    let inputsPrices = document.querySelectorAll("#inputs_prices");
    for (let i = 0; i < inputsPrices.length; i++) {
        if (inputsPrices[i].value === "") {
            return false;
        }
    }
    return true;
}

$(document).ready(function () {
    const JUMP = "<br/>";
    const MESSAGE_INPUT = "Ingrese el valor del producto: ";
    const ALERT_DATA_PRICES_EMPTY = "Favor llenar todos los campos";

    $("#button_submit").click(() => {
        if (valid_number_products()) {
            let number_products = parseInt($('#input_number_products').val());
            $('#input_number_products').val('');

            //Se crea el div y se agrega al body
            $('<span/>', {
                id: 'container_inputs'
            }).appendTo('body');

            for (let i = 1; i <= number_products; i++) {
                let new_text = $('<span/>').text(MESSAGE_INPUT + "#" + i);
                let new_input = $('<input/>').attr("type", "number").prop("id", "inputs_prices");
                $('#container_inputs').append(new_text, new_input, JUMP);
            }
            $('<button/>', {
                type: 'button',
                id: 'button_submit_prices',
                text: 'Submit'
            }).appendTo('#container_inputs');
        }
    });

    // Se usa delegacion de eventos, para escuchar los eventos de los elementos que se crean dinamicamente
    $('body').on('click', '#button_submit_prices', () => {
            if (valid_prices()) {
                let inputsDataPrices = [];
                $('#container_inputs input').each(function() {
                    inputsDataPrices.push({
                        id: $(this).prop('id'),
                        value: $(this).val()
                    });
                });

                $.ajax({
                    url: 'services.php',
                    method: 'POST',
                    data: { inputsDataPrices: inputsDataPrices },
                    success: function(response) {
                        //Creamos el objeto json para recibir la respuesta
                        let respuesta = JSON.parse(response);
                        $('<span/>', {
                            id: 'container_outputs'
                        }).appendTo('body');
                        for (let key in respuesta) {
                            //Se verifica si la clave del objeto tiene un valor
                            if (respuesta.hasOwnProperty(key)) {
                                //Se captura el valor de la llave
                                let valor = respuesta[key];
                                let new_output = $('<p/>').text(key + " " + valor);
                                $('#container_outputs').append(new_output);
                            }
                        }
                        $('body').append($('#container_outputs'));
                    }
                });
            }
            else
                alert(ALERT_DATA_PRICES_EMPTY);
        });
});

y la logica de php:

services.php

<?php

const PERCENTAGE = 35;
$output_prices = array();

//Evaluamos si inputsDataPrices si esta definido o no con isset
if (isset($_POST['inputsDataPrices'])) {
    $input_prices = $_POST['inputsDataPrices'];
    foreach ($input_prices as $price) {
        $percentage_input = ($price['value'] * PERCENTAGE) / 100;
        $total = ($price['value'] - $percentage_input);
        $output_prices['Precio: ' . $price['value']] = " tiene descuento de $percentage_input y en total queda = $total";
    }
    echo json_encode($output_prices);
}

Comentarios (14)14 comentarios

Andrés Felipe Lopez gomez

Hace 5 años

Jorge Enríquez

Alvaro H. Ruiz V.

Abdiel Ortega

Erick Fernando Guzmán Valerio

Luis Antonio Rosales Ochoa

Guadalupe Monge Barale

Hace 4 años

Diego Antonio García Rivas

Juan Castro

Profesor

Iván Andrés Pineda Salazar

Aldo Miguel Ortiz Parodi

Daniel Schmidt

Joseph Dakkak

Jainelker Jesus Yepez

Kenneth Angulo L

Brayan Enrique González Placeres

Ermilo Joel Dorantes Uc

Víctor Adrián Ramírez de la Cruz

DIEGO ANDRES GONZALEZ ALVAREZ

Raymundo Lara Garcia

Alexis Damián Pacheco Rivero

Introducción

Curso actualizado

Fundamentos de PHP sin Frameworks y Desarrollo de Microproyecto

Uso de la Consola de Comandos en Visual Studio Code

Pensamiento Lógico en Desarrollo de Software: Estrategias y Aplicaciones

Conceptos básicos en la práctica

Operadores Lógicos en PHP: Uso y Ejemplos Prácticos

Operadores aritméticos en PHP: suma, resta, multiplicación y más

Estructuras de Control en PHP: If, Else, While, For, Switch

Funciones en PHP: Creación, Uso y Documentación

Funciones matemáticas en PHP: max, min, pi, rand y sqrt

Interacción entre Formularios HTML y Scripts PHP

Ejercicios de Lógica con PHP: Edades y Dibujos en Consola

Microproyecto de lógica

Desarrollo de Aplicación para Ordenar Palabras Desordenadas

Creación de Formularios y Validación de Datos en PHP

Escalabilidad de Formularios Dinámicos en PHP

Validación Dinámica de Datos en Formularios Web

Ejercicios de PHP: Descuentos y Orden de Productos

Conclusiones

Buenas prácticas en desarrollo web: separación frontend y backend

Resumen de Aprendizajes en PHP y Programación Lógica

Buenas prácticas en desarrollo web: separación frontend y backend

Progreso del curso

Introducción

Conceptos básicos en la práctica

Microproyecto de lógica

Conclusiones

Recursos

Recursos