Code Review del proyecto y buenas prácticas

Curso Práctico de PHP

Introducción

¡Practiquemos con PHP!

¿Qué es la consola de comandos?

Cómo entrenar tu pensamiento lógico

Conceptos básicos en la práctica

Operadores lógicos con PHP

Operadores aritméticos con PHP

Estructuras de control con PHP

¿Qué son las funciones?

Ejercicios matemáticos con código

Mostrando datos en HTML desde PHP

¡Ponte a prueba!

Microproyecto de lógica

Microproyecto: Juego de ordenamiento de palabras, diseño de flujo y algoritmo

¡Creando nuestro juego!

Mejorando nuestro juego

Finalizando nuestro juego

Ejercicios de práctica

Conclusiones

Code Review del proyecto y buenas prácticas

Cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Andrés Felipe Lopez gomez

hace 3 años

Seria bueno un curso de como integrar html javascript php y base de datos asi practico como se dio este curso, me parece que en la ruta backend php no se explica esta integracion, ya que se brinca a laravel

Abdiel Ortega

hace 3 años

Es posible tener en el mismo PHP las vistas, inclusive los frameworks ofrecen motores de plantillas para hacer más legible el código.

Sin embargo por lo general queda mejor separar el frontend y el backend. Tener el backend como solo una API y el frontend para sacarle todo el provecho a Javascript.

Erick Fernando Guzmán Valerio

hace 3 años

Que bueno que aclaren esto, ya me andaba matando en como lograr ponerle bootstrap global en php xd

Diego Antonio García Rivas

hace 3 años

Creo que está clase se ha colocado mal, debería de ir al final del curso

Aldo Miguel Ortiz Parodi

hace 3 años

Ok este reto no lo puedo hacer porque no sé cómo enviarme la información desde html 😦, pero igual imagino que lo podré hacer en un futuro.

Guadalupe Monge Barale

hace 3 años

Aquí está mi código, pero no me convence.
Iré mejorándolo
.
HTML

<!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">
    <title> Juego </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section id="game">
            <h1> Ordena las palabras </h1>
            <button class="click" type="submit" onclick="startForm()">Jugar </button>
        </section>
    </main>
<script src="script.js"></script>
</body>
</html>

JavaScript

const where = document.getElementById("game");

const words = ["sol", "luna","cielo", "estrellas", "lluvia"];

function startForm(){
    
    let newWords = [];
    
    function shuffle(string) {

        let parts = string.split('');
        for (let i = parts.length; i > 0;) {
            let random = parseInt(Math.random() * i);
            let temp = parts[--i];
            parts[i] = parts[random];
            parts[random] = temp;
        }

        return parts.join('');
    }

    for (let word of words){
        newWords.push(shuffle(word));
    } 
    let form = `<form action="analisis.php" id="form">`;

    for (let i = 0; i < newWords.length; i++) { 
        form += "La palabra: " + newWords[i] + " " + 
        " <input type='text' name='palabra"+ i + "'/> " +
        "<br/> <br/>";
    }

    const button = `<button type='submit'> Enviar </button>`;
    const formCierre = `</form>`;

    const html = form + button + formCierre;

    where.innerHTML = html;

}

PHP

$words = array("sol", "luna","cielo", "estrellas", "lluvia");


for ($i=0; $i < count($words); $i++) { 
    if ($_REQUEST['palabra'.$i]== $words[$i]) {
        echo "La palabra ingresada es correcta <br/>";
    }else {
        echo "La palabra ingresada es incorrecta. La palabra correcta es " . $words[$i] . "<br/>";
    }
}

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

hace 3 años

Buena explicación, pero la verdad si fue confuso en ciertas partes la forma en la cual incluyo html con php, pero todo bien

Andrés Felipe Lopez gomez

hace 3 años

Excelente explicacion

Daniel Condía Figueredo

hace un año

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);
}

DIEGO ANDRES GONZALEZ ALVAREZ

hace 2 años

Chevere el curso, pero debio haberse aplicado a algo mas de la vida real, algun procesamiento de datos, cálculos, y tal vez mas extenso, aun quedan cosas muy sueltas, la integracion con html no fue muy precisa, la profesora es excelente, inclusive su tono de voz es muy adecuado, pero el contenido del curso muy cuestionable…

Alexis Damián Pacheco Rivero

hace 2 años

<?php

$productos = array('Camiseta','Blusas','Pantalon','Zapatos');
$option="";

$formulario="<form action=‘productos.php’>";
$label="<label> Seleciona el producto a comprar </label> <br><br>";

    $select="<select name='Productos'> <option value=''></option> " ;
                for ($i=0; $i < count($productos); $i++) {     
                   $option.="<option value='$i'> $productos[$i] </option> ";
                }
    $cierre_select="</select>  <br><br>";       
    $submit="<button type='submit'> Enviar</button>";

$cierreformulario="</form>";

echo $formulario.$label.$select.$option.$cierre_select.$submit.$cierreformulario;

<?php

//$product=$_REQUEST[“Productos”];

$porcentajedescuento=35;

$precios= array(‘50000’,‘150000’,‘60000’,‘250000’);

for ($i=0; $i < count($precios); $i++) { 

    if ($_REQUEST["Productos"] == $i) {
        
        $descuento=$precios[$i]-(($precios[$i]*$porcentajedescuento)/100);
        echo"El valor del producto seleccionado es de $precios[$i], y con el $porcentajedescuento % de descuento, queda en un total de $descuento";

        break;
       
    }
}

Con esto me funcionó, pero solo seleccionando un producto.