0

Disculpen mi inexperiencia pero no tengo una idea de concreta de cómo hacer lo siguiente. En una tabla base de datos (proyecto_snippets) en una tabla (code) tengo cuatro columnas: id, code, autor & link y id es la clave primaria. en la columna code quiero meter varios lenguajes, hasta ahorita PHP & Javascript pero quería que cada code tenga una tabla que separe conjuntos donde a su vez tenga otra, se vería algo así introducir la descripción de la imagen aquí

hasta ahora pude hacer lo siguiente.

try {
    $conexion = new PDO('mysql:host=localhost;dbname=proyecto_snippets','root','');
} catch (PDOException $e) {
    echo 'Error: ' . $e->getMessage();
    die();
}
$statement = $conexion->prepare('SELECT * FROM code');
$statement->execute();
$codigos = $statement->fetchAll();
foreach ($codigos as $code) {
  echo $code['id'] . ' - ' . $code['code'] . '<br>';
}

require 'views/index.view.php';

y el view se vería así

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snippets</title>
<link rel="stylesheet" href="css/master.css">
</head>
<body>
<div class="contenedor">
    <?php foreach ($codigos as $code): ?>
    <div class="title">
        <h1 class="title"><?php echo $code['code']; ?></h1>
        <sub class="link">
            <a href="<?php echo $code['link']; ?>" class="link" target="_blank">
                <?php echo $code['autor']; ?>
            </a>
        </sub>
        <button onclick="changeType('<?php echo strtolower($code['code']); ?>')" class="type" name="<?php echo strtolower($code['code']); ?>">VSCode</button>
    </div>
    <?php endforeach; ?>
</div>
<script src="js/master.js"></script>
</body>
</html>

y me muestra esto: introducir la descripción de la imagen aquí

Si alguien que tenga la suficiente pasciencia para decirme o decirme dónde poder encontrar una respuesta. Honestamente no es urgente ni necesario, lo hago nada más para practicar

3
  • 1
    ok, se entiende que quieres mostrar snippets de código, clasificados en distintos contenedores según su lenguaje. Lo que no me queda claro es el criterio de la subclasificación. Digamos... todo lo que es PHP debiera ir dentro del primer colapsable repartido en cajitas, tantas como sean necesarias?
    – ffflabs
    el 10 nov. 2018 a las 19:14
  • Correctamente, por ejemplo: en PHP>PDO>Start PDO Conection>el código de Snippet el 10 nov. 2018 a las 19:15
  • Y quería guardarlo todo en una base de datos por si quisiera agregar más en un futuro y no tenga que estar haciendo el código HTML a cada rato el 10 nov. 2018 a las 19:20

1 respuesta 1

1

Creo que la solución más corta sería pensar tu tabla con una estructura tipo:

id | lenguaje | seccion  | titulo      | codigo
-------------------------------------------------
1  | PHP      | PDO      | Conectar    | $PDO = new PDO(...)
2  | PHP      | Array    | array_merge | array_merge($arr1, $arr2)
3  | PHP      | Iterable | Iterar      | forEach($arr as $key => $value) {...
4  | JS       | DOM      | Select      | document.querySelector(...)
5  | JS       | Event    | Listener    | element.addListener(...)
6  | JS       | function | declaration | function decirHola() {...}
7  | JS       | function | expression  | var decirHola = function () {...}

Repito, esta es la solución corta. Más adelante diré por qué.

Con una tabla como esta tú puedes seleccionar igual que ahora y luego usar alguna lógica de negocios para inferir cambios de lenguaje y sección. Por ejemplo:

$query = 'SELECT * FROM code ORDER BY lenguaje, seccion, titulo;';

...

$codigos = $statement->fetchAll();
$lenguaje = null;
$seccion = null;
foreach ($codigos as $code) {

     //  Si cambié de lenguaje, viene otro contenedor
     if($code['lenguaje']!==$lenguaje) {
          $lenguaje=$code['lenguaje'];
         echo '<div class="title">';
         echo '<h1 class="title">'. $code['lenguaje'] .'</h1>';
         echo '</div>';
     }

    //  Si cambié de sección, viene un subcontenedor
     if($code['seccion']!==$seccion) {
          $seccion=$code['seccion'];
         echo '<div class="seccion">';
         echo '<h2 class="seccion">'. $code['seccion'] .'</h2>';
         ecoh '</div>';
     }
     echo '<div class="snippet">';
     echo '<h4>'.$code['titulo'].'</h4>';
     echo '<pre>'.$code['codigo'].'</pre>';
     echo '</div>';

}

Obviamente tienes que cambiar las clases y diagramación acorde a tus estilos, pero básicamente obtienes todas las filas ordenadas por lenguaje y luego por sección. Si el lenguaje de una fila es distinto al anterior, corresponde crear un contenedor principal. (Esto siempre se cumple en la primera fila, porque antes declaraste que el lenguaje era NULL). Con la sección pasa lo mismo. Ya que vienen en orden, si hubo un cambio de sección corresponde crear un subcontenedor. Y dentro de cada subcontenedor van los snippets con su respectivo título y código.

¿Cuál sería la solución elaborada?

Primero, en la solución propuesta los contenedores principales no contienen a los subcontenedores, ni éstos a sus snippets. Son simplemente un elemento más y se apilan en línea. No es difícil introducir la lógica para lograr esto pero el ejemplo se ensucia mucho.

Segundo, una tabla tipo "sábana" nunca es realmente flexible. Si quieres cambiar algo terminas añadiendo columnas, no tiene integridad referencial (luego podrías escribir mal un lenguaje y crear una sección nueva sin querer). Debiera haber una entidad de lenguajes capaz de tener muchas secciones, una entidad sección que pertenece a un lenguaje y puede tener muchos snippets, y una entidad snippet que pertenece a una sección. Eso a grandes rasgos.

Tercero, en mi sugerencia se está diagramando en PHP, y eso es subóptimo en nuestra época. El backend debiera entregar un json anidado y el frontend consumirlo para dibujar sus nodos en el DOM, pero como dijiste que no te manejabas con Ajax es mejor no ponerse sofisticados y renderear con PHP.

Finalmente, nunca me ha gustado la idea de intercalar PHP y HTML en el mismo archivo (abriendo y cerrando el tag <?php). Los IDEs y editores semiinteligentes no son capaces de indentar bien el código y es fácil que se te escapen errores de sintaxis cuando operas así.

7
  • Muchas gracias en serio, eres verdaderamente amable, al parecer funciona correctamente, estoy viendo si funciona igual agregándole el Link y el autor. No entiendo completamente porqué si es diferente a null si se pone, pero al parecer funciona, nuevamente, muchas gracias el 10 nov. 2018 a las 20:28
  • Olvídalo, no había visto el $lenguaje=$code['lenguaje']; ósease se guarda y luego compara. Dah, me siento tonto (lo soy) Nuevamente, gracias el 10 nov. 2018 a las 20:30
  • Otra pregunta, ¿cómo hago para contar los casillas código dependiendo del título, es que normalmente suelo poner la mitad en uno, luego la otra mitad en el lado derecho? el 10 nov. 2018 a las 20:34
  • Mejor crea las cajitas con estilo: display: inline-block; float:left; width:50%. Con eso se irán apilando en dos columnas. A lo mejor tendrás que poner menos del 50% para darle holgura a margenes, border y padding
    – ffflabs
    el 10 nov. 2018 a las 21:28
  • Ojo, inicialicé las variables como NULL representando un valor que necesariamente será distinto a la primera fila en la primera iteración, pero si tu tabla tuviese un código o sección en null, se rompería la lógica. A lo mejor sería conveniente inicializarlas como algo distinto. false a lo mejor sería mejor idea
    – ffflabs
    el 10 nov. 2018 a las 21:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.