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
Introducción
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Buenas prácticas en desarrollo web: separación frontend y backend
16/17Recursos
¿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.
Aportes 11
Preguntas 3
Ordenar por:
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.
Que bueno que aclaren esto, ya me andaba matando en como lograr ponerle bootstrap global en php xd
Creo que está clase se ha colocado mal, debería de ir al final del curso
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.
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/>";
}
}
Buena explicación, pero la verdad si fue confuso en ciertas partes la forma en la cual incluyo html con php, pero todo bien
Excelente explicacion
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);
}
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…
<?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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?