Diseño de Aplicaciones Web - Front-End

MAIN-Menú

🐘 PHP: Desarrollo Backend

PHP es un lenguaje de scripting del lado del servidor especialmente diseñado para el desarrollo web. Permite crear sitios dinámicos que interactúan con bases de datos y generan contenido personalizado.

📌 Conceptos Básicos de PHP

Sintaxis Fundamental


  <?php

echo "Hola Mundo!"; // Imprime texto

$variable = "Valor"; // Variable con $

define("CONSTANTE", "Valor constante");

if ($condicion) {
    // Código condicional
} elseif ($otraCondicion) {
    // Más código
} else {
    // Alternativa
}

for ($i = 0; $i < 10; $i++) {
    echo $i . " ";
}

function saludar($nombre) {
    return "Hola " . $nombre;
}
?>

Tipos de Datos

🌐 PHP en el Desarrollo Web Backend

Cliente (Frontend)

HTML/CSS/JS

⇨

Servidor (Backend PHP)

Procesamiento

Base de datos

Lógica de negocio

⇨

Cliente (Frontend)

Resultados

Flujo de una Aplicación PHP

  1. El navegador solicita un archivo PHP al servidor
  2. El servidor ejecuta el código PHP
  3. PHP puede interactuar con bases de datos u otros servicios
  4. PHP genera HTML dinámico
  5. El servidor envía el HTML resultante al navegador
  6. El navegador muestra la página al usuario

📡 Manejo de Formularios

PHP procesa datos enviados desde formularios HTML:

Formulario HTML + PHP

<!-- formulario.html -->
<form action="procesar.php" method="post">
    <input type="text" name="nombre" placeholder="Tu nombre">
    <input type="email" name="email" placeholder="Tu email">
    <button type="submit">Enviar</button>
</form>

<!-- procesar.php -->
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $nombre = $_POST['nombre'];
    $email = $_POST['email'];
    
    // Validar y sanitizar datos
    $nombre = htmlspecialchars($nombre);
    $email = filter_var($email, FILTER_SANITIZE_EMAIL);
    
    // Procesar datos (ej. guardar en DB)
    echo "Hola " . $nombre . ", hemos recibido tu email: " . $email;
}
?>

🗃️ Conexión con Bases de Datos

PHP se integra con múltiples sistemas de bases de datos:

MySQLi (MySQL Improved)

<?php
$conexion = new mysqli('localhost', 'usuario', 'contraseña', 'basedatos');

if ($conexion->connect_error) {
    die("Error de conexión: " . $conexion->connect_error);
}

// Consulta preparada (segura)
$stmt = $conexion->prepare("INSERT INTO usuarios (nombre, email) VALUES (?, ?)");
$stmt->bind_param("ss", $nombre, $email);

// Asignar valores y ejecutar
$nombre = "Juan Pérez";
$email = "juan@example.com";
$stmt->execute();

echo "Registro creado con ID: " . $stmt->insert_id;

$stmt->close();
$conexion->close();
?>

🛠️ Frameworks PHP Modernos

Plataformas que facilitan el desarrollo backend:

Framework Descripción Característica Clave
Laravel Framework MVC elegante y expresivo Eloquent ORM, Blade templates
Symfony Framework modular y flexible Componentes reutilizables
CodeIgniter Framework ligero y rápido Configuración mínima
Yii Framework de alto rendimiento Generadores de código

🔒 Seguridad en PHP

Buenas prácticas esenciales:

📂 Enlaces a Recursos

Profundiza en el desarrollo con PHP:

📊 Contenidos
inicio

🗃️ Bases de Datos Relacionales

Las bases de datos relacionales organizan los datos en tablas relacionadas entre sí, permitiendo un almacenamiento estructurado y eficiente de la información con integridad y consistencia.

📌 Conceptos Fundamentales

🔍 Modelo Entidad-Relación (ER)

Representación gráfica de las entidades y sus relaciones:

CLIENTE
───
1:N
───
PEDIDO

Ejemplo: Un cliente puede tener muchos pedidos (relación 1 a N)


Componentes del Modelo ER:

📊 Normalización de Bases de Datos

Proceso para organizar los datos eficientemente y minimizar la redundancia:

Forma Normal Descripción Ejemplo
1FN Atributos atómicos (sin valores repetidos o compuestos) Separar "Nombre Completo" en "Nombre" y "Apellido"
2FN Cumple 1FN y todos los atributos no clave dependen de toda la clave primaria Eliminar datos que dependen solo de parte de una clave compuesta
3FN Cumple 2FN y ningún atributo no clave depende de otro atributo no clave Mover datos que dependen de otros campos no clave a tablas separadas

📜 Lenguaje SQL

Structured Query Language, estándar para gestionar bases de datos relacionales:

Operaciones Básicas (CRUD)

SELECT * FROM clientes WHERE edad > 30;
INSERT INTO clientes (nombre, email) VALUES ('Juan Pérez', 'juan@example.com');
UPDATE clientes SET email = 'nuevo@email.com' WHERE id = 1;
DELETE FROM clientes WHERE id = 5;

Consultas Avanzadas

SELECT c.nombre, COUNT(p.id) AS total_pedidos
FROM clientes c
LEFT JOIN pedidos p ON c.id = p.cliente_id
GROUP BY c.id
HAVING COUNT(p.id) > 5
ORDER BY total_pedidos DESC;

🔄 Conexión con PHP

Ejemplo de conexión a MySQL desde PHP usando PDO (PHP Data Objects):

<?php
try {
    // Crear conexión PDO
    $pdo = new PDO('mysql:host=localhost;dbname=mi_base_de_datos', 
                   'usuario', 
                   'contraseña');
    
    // Configurar el manejo de errores
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // Consulta preparada (segura contra inyección SQL)
    $stmt = $pdo->prepare("SELECT * FROM clientes WHERE pais = :pais");
    $stmt->execute(['pais' => 'México']);
    
    // Obtener resultados
    $clientes = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // Mostrar resultados
    foreach ($clientes as $cliente) {
        echo "Nombre: " . htmlspecialchars($cliente['nombre']) . "<br>";
    }
} catch(PDOException $e) {
    echo "Error de conexión: " . $e->getMessage();
}
?>

Buenas Prácticas PHP/MySQL:

📂 Enlaces a Recursos

Profundiza en estos temas relacionados:

📊 Contenidos
inicio

🖥️ Ejemplos Prácticos con PHP en Localhost

📌 Configuración Inicial

Para ejecutar estos ejemplos en tu computadora:

  1. Instala XAMPP o WAMP (incluyen Apache + PHP + MySQL)
  2. Coloca tus archivos PHP en la carpeta htdocs (XAMPP) o www (WAMP)
  3. Inicia los servicios Apache y MySQL desde el panel de control
  4. Accede a http://localhost/tu_archivo.php en tu navegador

1. Sistema de Comentarios Básico

comment_system.php

<?php
// Guardar comentario si se envió el formulario
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['comment'])) {
    $comment = htmlspecialchars($_POST['comment']);
    $name = !empty($_POST['name']) ? htmlspecialchars($_POST['name']) : 'Anónimo';
    $date = date('Y-m-d H:i:s');
    
    // Guardar en un archivo (en producción usaría base de datos)
    $file = fopen('comentarios.txt', 'a');
    fwrite($file, "$date - $name: $comment\n");
    fclose($file);
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Sistema de Comentarios</title>
</head>
<body>
    <h1>Deja un comentario</h1>
    
    <form method="post">
        <input type="text" name="name" placeholder="Tu nombre (opcional)"><br>
        <textarea name="comment" placeholder="Tu comentario" required></textarea><br>
        <button type="submit">Publicar Comentario</button>
    </form>
    
    <h2>Comentarios Anteriores</h2>
    <?php
    if (file_exists('comentarios.txt')) {
        echo '<pre>' . file_get_contents('comentarios.txt') . '</pre>';
    } else {
        echo '<p>No hay comentarios aún. ¡Sé el primero!</p>';
    }
    ?>
</body>
</html>

2. Lista de Tareas (To-Do)

todo_list.php

<?php
// Iniciar sesión para almacenar las tareas
session_start();

// Inicializar array de tareas si no existe
if (!isset($_SESSION['tasks'])) {
    $_SESSION['tasks'] = [];
}

// Añadir nueva tarea
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['task'])) {
    $newTask = [
        'id' => uniqid(),
        'text' => htmlspecialchars($_POST['task']),
        'done' => false
    ];
    array_push($_SESSION['tasks'], $newTask);
}

// Marcar tarea como completada
if (isset($_GET['complete'])) {
    $taskId = $_GET['complete'];
    foreach ($_SESSION['tasks'] as &$task) {
        if ($task['id'] == $taskId) {
            $task['done'] = !$task['done'];
            break;
        }
    }
}

// Eliminar tarea
if (isset($_GET['delete'])) {
    $taskId = $_GET['delete'];
    $_SESSION['tasks'] = array_filter($_SESSION['tasks'], function($task) use ($taskId) {
        return $task['id'] != $taskId;
    });
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Lista de Tareas</title>
    <style>
        .completed { text-decoration: line-through; color: #777; }
        .task-list { margin: 20px 0; }
        .task { margin: 5px 0; padding: 5px; background: #f5f5f5; }
    </style>
</head>
<body>
    <h1>Mi Lista de Tareas</h1>
    
    <form method="post">
        <input type="text" name="task" placeholder="Nueva tarea" required>
        <button type="submit">Añadir</button>
    </form>
    
    <div class="task-list">
        <?php foreach ($_SESSION['tasks'] as $task): ?>
            <div class="task <?php echo $task['done'] ? 'completed' : ''; ?>">
                <span><?php echo $task['text']; ?></span>
                <a href="?complete=<?php echo $task['id']; ?>"><?php echo $task['done'] ? 'Desmarcar' : 'Completar'; ?></a>
                <a href="?delete=<?php echo $task['id']; ?>" style="color: red;">Eliminar</a>
            </div>
        <?php endforeach; ?>
    </div>
</body>
</html>

3. Sistema de Login Básico

login_system.php

<?php
session_start();

// Usuarios válidos (en producción usaríamos una base de datos)
$validUsers = [
    'admin' => '123456', // En producción usar password_hash()
    'usuario' => 'clave123'
];

// Cerrar sesión
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: login_system.php');
    exit;
}

// Procesar formulario de login
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    
    if (isset($validUsers[$username]) && $validUsers[$username] == $password) {
        $_SESSION['logged_in'] = true;
        $_SESSION['username'] = $username;
        header('Location: login_system.php');
        exit;
    } else {
        $error = 'Usuario o contraseña incorrectos';
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Sistema de Login</title>
    <style>
        .container { width: 300px; margin: 50px auto; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; }
        button { padding: 8px 15px; background: #3498db; color: white; border: none; }
        .error { color: red; }
    </style>
</head>
<body>
    <div class="container">
        <?php if (isset($_SESSION['logged_in'])): ?>
            <h2>Bienvenido, <?php echo htmlspecialchars($_SESSION['username']); ?></h2>
            <p>Has iniciado sesión correctamente.</p>
            <a href="?logout">Cerrar sesión</a>
        <?php else: ?>
            <h2>Iniciar Sesión</h2>
            <?php if (isset($error)): ?>
                <p class="error"><?php echo $error; ?></p>
            <?php endif; ?>
            
            <form method="post">
                <div class="form-group">
                    <label for="username">Usuario:</label>
                    <input type="text" id="username" name="username" required>
                </div>
                
                <div class="form-group">
                    <label for="password">Contraseña:</label>
                    <input type="password" id="password" name="password" required>
                </div>
                
                <button type="submit">Ingresar</button>
            </form>
            
            <p>Usuarios de prueba: admin/123456 o usuario/clave123</p>
        <?php endif; ?>
    </div>
</body>
</html>

📂 Enlaces a Recursos

Para continuar aprendiendo:

🛠️ Proyectos
inicio