Gestor notas

.devcontainer/Dockerfile

@@ -2,6 +2,7 @@
 # [Choice] PHP version (use -bullseye variants on local arm64/Apple Silicon): 8, 8.0, 7, 7.4, 7.3, 8-bullseye, 8.0-bullseye, 7-bullseye, 7.4-bullseye, 7.3-bullseye, 8-buster, 8.0-buster, 7-buster, 7.4-buster, 7.3-buster
 ARG VARIANT=7-bullseye
 FROM mcr.microsoft.com/vscode/devcontainers/php:0-${VARIANT}
+RUN docker-php-ext-install mysqli pdo_mysql
 
 # [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
 ARG NODE_VERSION="none"

README.md

@@ -56,7 +56,8 @@ Some things to try:
    - Press <kbd>F5</kbd> to launch the app in the container.
    - Once the breakpoint is hit, try hovering over variables, examining locals, and more.
 1. **Running a server:**
-   - From the terminal, run `php -S 0.0.0.0:8000`
+   -php -S 0.0.0.0:8000 From the terminal, run ``php -S 0.0.0.0:8000
+`
    - Click "Open in Browser" in the notification that appears to access the web app on this new port.
       - You can view an organized table of your forwarded ports in the 'Ports' view, which can be accessed with the command **Ports: Focus on Ports View**.
       - Notice port 8000 in the 'Ports' view is labeled "Hello Remote World." In `devcontainer.json`, you can set `"portsAttributes"`, such as a label for your forwarded ports and the action to be taken when the port is autoforwarded.

practicas/mini-wp2/README.TXT

@@ -0,0 +1,7 @@
+Primera pagina: formulario para iniciar session login.php
+si pasa, nos llevara a index.php
+y de ahi nos tiene que saludar desde un personajes.php
+y no mostrara un formulario que nos pedira nuestro personaje favorita
+
+y en otra pagina se tendrá que ver el personaje y para cerrar sesion logout.php
+header.php, el header.php debe aparecer en index.php y y en personajes.php, ese header sera dinamico

practicas/mini-wp2/data.php

@@ -0,0 +1,49 @@
+<?php
+// Iniciamos la sesión para poder guardar datos entre páginas
+// Las sesiones permiten almacenar variables que persisten mientras el navegador esté abierto
+session_start();
+
+// Comprobamos si la variable de sesión 'noticias' ya existe
+if (!isset($_SESSION['noticias'])) {
+    // Si no existe, creamos un array multidimensional con noticias de ejemplo
+    $_SESSION['noticias'] = [
+        [
+            'titulo' => 'Noticia 1',
+            'contenido' => 'Contenido de la noticia 1',
+            'fecha' => '2024-10-01',
+            'imagen' => 'https://via.placeholder.com/150',
+            'categoria' => 'Tecnología'
+        ],
+        [
+            'titulo' => 'Noticia 2',
+            'contenido' => 'Contenido de la noticia 2',
+            'fecha' => '2024-10-02',
+            'imagen' => 'https://via.placeholder.com/150',
+            'categoria' => 'Salud'
+        ],
+        [
+            'titulo' => 'Noticia 3',
+            'contenido' => 'Contenido de la noticia 3',
+            'fecha' => '2024-10-03',
+            'imagen' => 'https://via.placeholder.com/150',
+            'categoria' => 'Deportes'
+        ],
+        [
+            'titulo' => 'Noticia 4',
+            'contenido' => 'Contenido de la noticia 4',
+            'fecha' => '2024-10-04',
+            'imagen' => 'https://via.placeholder.com/150',
+            'categoria' => 'Cultura'
+        ],
+        [
+            'titulo' => 'Noticia 5',
+            'contenido' => 'Contenido de la noticia 5',
+            'fecha' => '2024-10-05',
+            'imagen' => 'https://via.placeholder.com/150',
+            'categoria' => 'Economía'
+        ]
+    ];
+}
+
+// Fin de data.php
+?>

practicas/mini-wp2/form.php

@@ -0,0 +1,114 @@
+<?php
+// Incluimos data.php para:
+// 1) Iniciar la sesión (session_start())
+// 2) Inicializar las noticias de ejemplo en $_SESSION si aún no existen
+include_once 'data.php';
+
+// ------------------------------
+// 1. COMPROBAMOS SI SE ENVIÓ EL FORMULARIO
+// $_SERVER['REQUEST_METHOD'] devuelve el método HTTP usado: GET ó POST.
+// Solo procesamos los datos si el formulario fue enviado con POST
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+
+    // ------------------------------
+    // 2. RECOGEMOS LOS DATOS DEL FORMULARIO
+    // Usamos el operador null coalescing (??) para asignar valores por defecto
+    // Esto evita errores si algún campo no se envía
+    // Si no se envía, la variable se inicializa como cadena vacía
+    $titulo    = $_POST['titulo'] ?? '';
+    $contenido = $_POST['contenido'] ?? '';
+    $fecha     = $_POST['fecha'] ?? '';
+    $imagen    = $_POST['imagen'] ?? '';
+    $categoria = $_POST['categoria'] ?? '';
+
+    // ------------------------------
+    // 3. VALIDAMOS QUE TODOS LOS CAMPOS ESTÉN LLENOS
+    // trim() elimina espacios en blanco al inicio y al final
+    // empty() verifica si la cadena está vacía
+    if ( !empty(trim($titulo)) && 
+        !empty(trim($contenido)) && 
+        !empty(trim($fecha)) && 
+        !empty(trim($imagen)) && 
+        !empty(trim($categoria)) ) {
+
+        // ------------------------------
+        // 4. AÑADIMOS LA NOTICIA A LA SESIÓN
+        // $_SESSION['noticias'] es un array multidimensional
+        // Cada noticia es un array asociativo con título, contenido, fecha, imagen y categoría
+        $_SESSION['noticias'][] = [
+            'titulo'    => $titulo,
+            'contenido' => $contenido,
+            'fecha'     => $fecha,
+            'imagen'    => $imagen,
+            'categoria' => $categoria
+        ];
+
+        // ------------------------------
+        // 5. MOSTRAMOS MENSAJE DE ÉXITO
+        $mensaje = "<p style='color:green;font-weight:bold;'>Noticia añadida correctamente.</p>";
+
+    } else {
+        // ------------------------------
+        // 6. MENSAJE DE ERROR SI ALGÚN CAMPO ESTÁ VACÍO
+        $mensaje = "<p style='color:red;font-weight:bold;'>Error: Todos los campos son obligatorios.</p>";
+    }
+}
+// Fin del bloque POST
+?>
+
+<?php 
+// Incluimos el header común de la página
+// Contiene <html>, <head>, el menú y el inicio del <body>
+include 'inc/header.php'; 
+?>
+
+<main>
+    <h2>Añadir nueva noticia</h2>
+
+    <!-- Mostramos mensaje de éxito o error si existe -->
+    <?= $mensaje ?? '' ?>
+
+    <!-- ------------------------------
+         FORMULARIO HTML
+         ------------------------------
+         Cada campo tiene 'required' para validación básica del navegador.
+    -->
+    <form method="POST" action="">
+        <!-- Campo Título -->
+        <label>Título:<br>
+            <input type="text" name="titulo" required>
+        </label><br><br>
+
+        <!-- Campo Contenido -->
+        <label>Contenido:<br>
+            <textarea name="contenido" rows="4" required></textarea>
+        </label><br><br>
+
+        <!-- Campo Fecha -->
+        <label>Fecha:<br>
+            <input type="date" name="fecha" required>
+        </label><br><br>
+
+        <!-- Campo URL Imagen -->
+        <label>URL de imagen:<br>
+            <input type="url" name="imagen" placeholder="https://ejemplo.com/imagen.jpg" required>
+        </label><br><br>
+
+        <!-- Campo Categoría -->
+        <label>Categoría:<br>
+            <input type="text" name="categoria" required>
+        </label><br><br>
+
+        <!-- Botón de envío -->
+        <button type="submit">Añadir noticia</button>
+    </form>
+
+    <!-- Enlace para volver al listado de noticias -->
+    <p><a href="index.php">Volver a la lista de noticias</a></p>
+</main>
+
+<?php 
+// Incluimos el footer común de la página
+// Contiene <footer> y cierra </body> y </html>
+include 'inc/footer.php'; 
+?>

practicas/mini-wp2/inc/footer.php

@@ -0,0 +1,15 @@
+<?php
+// FOOTER.PHP
+// Este archivo contiene el pie de página que se incluirá en todas las páginas
+?>
+<!-- Separador visual -->
+<hr>
+
+<!-- PIE DE PÁGINA -->
+<footer>
+    <!-- Mostramos el año actual dinámicamente con PHP -->
+    <p>Desarrollado por Carolina Gonzalez &copy; <?= date('Y') ?></p>
+</footer>
+
+</body>
+</html>

practicas/mini-wp2/inc/header.php

@@ -0,0 +1,32 @@
+<?php
+// HEADER.PHP
+// Este archivo contiene la cabecera de todas las páginas del mini WordPress
+// Incluye el DOCTYPE, <head>, enlace a CSS y el menú de navegación
+?>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <!-- Configuración de caracteres y responsive -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Título de la página -->
+    <title>Mini WordPress</title>
+
+    <!-- Enlace a CSS -->
+    <link rel="stylesheet" href="../styles/index.css">
+</head>
+<body>
+    <!-- CABECERA PRINCIPAL -->
+    <header>
+        <!-- Título del sitio -->
+        <h1>Mini WordPress con Array Multidimensional</h1>
+
+        <!-- MENÚ DE NAVEGACIÓN -->
+        <nav>
+            <ul>
+                <li><a href="index.php">Inicio</a></li>
+                <li><a href="form.php">Añadir noticia</a></li>
+            </ul>
+        </nav>
+    </header>

practicas/mini-wp2/index.php

@@ -0,0 +1,107 @@
+<?php
+// ------------------------------
+// 1. INCLUIR DATA.PHP
+// ------------------------------
+// Esto hace dos cosas:
+// 1) Inicia la sesión con session_start()
+// 2) Inicializa las noticias de ejemplo si no existen en $_SESSION
+include_once 'data.php';
+
+// ------------------------------
+// 2. ELIMINAR UNA NOTICIA SI SE SOLICITA
+// ------------------------------
+// Comprobamos si existe un parámetro GET llamado 'eliminar'
+// Esto ocurre cuando el usuario hace clic en "Eliminar noticia"
+if (isset($_GET['eliminar'])) {
+
+    // Convertimos el valor recibido a entero para mayor seguridad
+    $indice = (int) $_GET['eliminar'];
+
+    // Verificamos que el índice exista dentro de $_SESSION['noticias']
+    if (isset($_SESSION['noticias'][$indice])) {
+
+        // Eliminamos la noticia correspondiente usando unset()
+        unset($_SESSION['noticias'][$indice]);
+
+        // Reordenamos los índices del array para evitar huecos
+        // Esto es importante para que el foreach funcione correctamente
+        $_SESSION['noticias'] = array_values($_SESSION['noticias']);
+
+        // Creamos un mensaje de éxito que se mostrará al usuario
+        $mensaje = "<p style='color:green;font-weight:bold;'>Noticia eliminada correctamente.</p>";
+    }
+}
+?>
+
+<?php
+// ------------------------------
+// 3. INCLUIR HEADER
+// ------------------------------
+// Contiene <html>, <head>, <body> y el menú de navegación
+include 'inc/header.php';
+?>
+
+<main>
+    <h2>Noticias actuales</h2>
+
+    <!-- ------------------------------
+         4. MOSTRAR MENSAJE DE ACCIÓN
+         ------------------------------
+         Si se eliminó alguna noticia, $mensaje contendrá el texto de confirmación
+    -->
+    <?= $mensaje ?? '' ?>
+
+    <!-- ------------------------------
+         5. RECORRER TODAS LAS NOTICIAS
+         ------------------------------
+         foreach recorre $_SESSION['noticias']
+         $indice es la posición en el array, útil para eliminar
+         $noticia es el array asociativo con datos de la noticia
+    -->
+    <?php foreach ($_SESSION['noticias'] as $indice => $noticia): ?>
+        <article style="background-color:white; margin:20px; padding:20px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1);">
+
+            <!-- Título de la noticia -->
+            <!-- htmlspecialchars protege contra inyección de HTML -->
+            <h3><?= htmlspecialchars($noticia['titulo']) ?></h3>
+
+            <!-- Fecha y categoría -->
+            <p>
+                <em>
+                    <?= htmlspecialchars($noticia['fecha']) ?> |
+                    <?= htmlspecialchars($noticia['categoria']) ?>
+                </em>
+            </p>
+
+            <!-- Imagen de la noticia -->
+            <!-- Usamos htmlspecialchars en el src y alt para seguridad -->
+            <img src="<?= htmlspecialchars($noticia['imagen']) ?>" 
+                 alt="<?= htmlspecialchars($noticia['titulo']) ?>" 
+                 style="max-width:100%; height:auto; border-radius:10px;">
+
+            <!-- Contenido de la noticia -->
+            <!-- nl2br convierte saltos de línea en <br> -->
+            <p><?= nl2br(htmlspecialchars($noticia['contenido'])) ?></p>
+
+            <!-- Enlace para eliminar la noticia -->
+            <!-- Pasamos el índice de la noticia por GET -->
+            <p><a href="?eliminar=<?= $indice ?>" style="color:red;">Eliminar noticia</a></p>
+            <!-- ? → indica inicio de parámetros GET.
+             eliminar= → nombre del parámetro que PHP recibirá.
+             <?= $indice ?> → imprime el valor del índice actual.
+             Resultado final: ?eliminar=2
+             PHP recibe esto en $_GET['eliminar'] y sabe qué noticia eliminar. -->
+        </article>
+    <?php endforeach; ?>
+
+    <!-- Enlace para ir al formulario y añadir nuevas noticias -->
+    <p><a href="form.php">Añadir nueva noticia</a></p>
+</main>
+
+<?php
+// ------------------------------
+// 6. INCLUIR FOOTER
+// ------------------------------
+// Contiene <footer> y cierra </body> y </html>
+include 'inc/footer.php';
+?>