¿Cómo mostrar publicaciones recientes en DOM usando PHP y MySQL?

Posted on by Rudeus Greyrat

Muchas veces, estamos muy familiarizados con los «últimos blogs» o «publicaciones recientes» en los sitios web. Así que ahora, aquí hay una solución simple para mostrar los blogs recientes en el DOM usando PHP y MySQLi.

Requisitos:

  1. base de datos y tablas
  2. Servidor XAMPP
  3. Editor (Código VS en este artículo).

Nota: El bootstrap requerido en el código se puede descargar desde Bootstrap Download . Agregue los archivos requeridos en sus códigos HTML o PHP como se muestra a continuación.

Fragmento de código : el siguiente fragmento de código muestra cómo agregar las bibliotecas requeridas en sus respectivos códigos HTML o PHP.

<head> 
 <link rel="stylesheet" 
  href="https://stackpath.bootstrapcdn.com/
  bootstrap/4.3.1/css/bootstrap.min.css"> 
</head> 
<body> 
  
<script src="
   https://code.jquery.com/jquery-3.2.1.slim.min.js"
   integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/
   Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script> 
<script src="
   https://stackpath.bootstrapcdn.com/bootstrap/
   4.5.2/js/bootstrap.min.js">
</script> 
</body>

Requisitos:

  1. Base de datos MySQL y tablas.
  2. Servidor XAMPP (Para descargar – Servidor de descargas )
  3. Editor (VS Code se utilizó en este artículo).

Pasos a seguir:

  1. Cree una base de datos con la tabla «publicaciones» que tengan «id» y los contenidos necesarios para mostrarse en la página.
  2. Pasos para crear una tabla en la herramienta phpmyadmin:
    • Ir a phpmyadmin
    • Inicie sesión con su nombre de usuario como «root» y contraseña como «».
    • En la página de inicio de phpmyadmin , haga clic en *nuevo* en la barra lateral izquierda para crear una nueva base de datos.

    • Asigne un nombre a la base de datos.

    • Para Crear tabla , proporcione un nombre para la tabla con el número de columnas para ella.

    • Proporcione los nombres de las columnas y sus respectivos tamaños o longitudes.

    • Vaya a la pestaña Insertar e inserte los valores que se almacenarán. (Esto es solo un ejemplo)

    Agregue los valores que se mostrarán.

    tabla de publicaciones

  3. Cree una página PHP llamada posts.php y coloque la carpeta dentro de la carpeta htdocs dentro de XAMPP .

    Código HTML: descargue el directorio font-awesome en su carpeta de trabajo y consulte la ubicación adecuada para el archivo «font-awesome.min.css» como se muestra a continuación.

    HTML

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href="
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            crossorigin="anonymous">
      
        <!--Font Awesome-->
        <link rel="stylesheet" href="
        path/to/font-awesome/css/font-awesome.min.css">
        <!--Stylesheet-->
        <link href="style.css" rel="stylesheet" />
      
        <link rel="stylesheet" href="
        https://unpkg.com/flickity@2/dist/flickity.min.css">
    </head>
      
    <body>
      
        <!-- Blog Latest -->
        <div class="blog-latest">
            <div class="container">
                <h1 class="blog-secondary-heading text-dark">
                    Latest Blogs
                </h1>
      
                <div class="main-carousel p-2 " 
                    id="latestCarousel">
      
                    <div class="carousel-cell p-2">
                        <div class="card  mx-2" 
                            style="width: 18rem;">
                            <img class="card-img-top" 
                                src="img/1.jpg" 
                                alt="Card image cap">
                            <div class="card-body">
      
                                <h5 class="card-title">
                                    <a href="blog-template.php" 
                                    class="blog-link">
                                        CAT 1
                                </h5>
                                </a>
                                <h6 class="card-subtitle 
                                    mt-2 text-muted">
                                    The domestic cat is a member 
                                    of the Felidae,a family that 
                                    had a common ancestor about 
                                    10–15 million years ago. The 
                                    genus Felis diverged from the 
                                    Felidae around 6–7 million 
                                    years ago.
                                </h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      
        <!-- Bootstrap -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
            integrity=
    "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous">
        </script>
          
        <script src=
    "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
        </script>
      
        <script src=
    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
            crossorigin="anonymous">
        </script>
          
        <script src="
    https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js">
        </script>
    </body>
      
    </html>

    Fragmento de código CSS: el siguiente archivo «style.css» se usa en el código anterior para diseñar los controles HTML.

    *{
      box-sizing: border-box;    
    }
      
    .card {
        height: 40%;
    }
      
    a.blog-link {    
        color:black;
        text-decoration:none;
    }
      
    a.blog-link:hover {    
        color: #adadad;
    }
      
    .column {
        float:left;
        width:15%;
        padding:2px;
        height:100px;
    }
      
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    Producción:

    Publicación única aquí

  4. Ahora, tenemos que conectarnos a la base de datos y recuperar la «id» y, por lo tanto, todos los detalles correspondientes se agregan en el DOM. Para ello, utilizaremos las consultas de MySQL.
    Aquí, primero ordenamos la base de datos usando la marca de tiempo , usando la cláusula «ordenar por» seguido de la identificación del último blog en una array seguida de otras identificaciones en el archivo » recuperar_id.php «.

    PHP

    <?php
       
    $servername = "localhost";
    $username = "root";
    $password = "";
    $db= "latest";
       
    $conn = mysqli_connect($servername, $username, $password, $db);
       
    if (!$conn) {
      die('Could not connect: ' . mysqli_error());  
    }
      
    /* To sort the id and limit the post by 4 */
    $sql = "SELECT * FROM posts ORDER BY timestamp desc limit 4 "; 
    $result = $conn->query($sql);
    $sqlall= "SELECT * FROM posts ORDER BY timestamp desc";
    $resultall = $conn->query($sqlall);
       
    $i = 0;
       
    if ($result->num_rows > 0) {  
      
        // Output data of each row
        $idarray= array();
        while($row = $result->fetch_assoc()) {
            echo "<br>";  
            
            // Create an array to store the
            // id of the blogs        
            array_push($idarray,$row['id']); 
        } 
    }
    else {
        echo "0 results";
    }
    ?>

  5. Cambie el archivo » posts.php » e incluya el «recuper_id.php» anterior en él. Coloque la tarjeta dentro de un bucle que se ejecutará hasta un número de acuerdo con la cantidad de publicaciones que desee mostrar. Usando las consultas de MySQL, recupere los valores de la tabla DB usando la array «id» creada en » recuperar_id.php «.

    Coloque el código PHP o las variables que tengan valores recuperados de la base de datos en el código HTML donde sea necesario.

    Código Final: Es la combinación de todos los pasos y códigos anteriores.

    PHP

    <?php 
    include 'retrieve_id.php'
    ?>
      
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content=
        "width=device-width, initial-scale=1">
      <title>Posts</title>
      
      <link rel="stylesheet" href="style.css">
      
      <link rel="stylesheet" href=
    "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        crossorigin="anonymous">
      
      <!--Font Awesome-->
      <link rel="stylesheet" href=
    "path/to/font-awesome/css/font-awesome.min.css">
      
      <link rel="stylesheet" href=
    "https://unpkg.com/flickity@2/dist/flickity.min.css">
    </head>
      
    <body>
      <!-- Blog Latest -->
      
      <div class="blog-latest">
        <div class="container">
          <h1 class="blog-secondary-heading text-dark">
            Latest Blogs</h1>
      
          <div class="main-carousel p-2 " 
            id="latestCarousel">
            <div class="row">
      
              <?php 
                  
                for($x = 0; $x < 4; $x++) {
      
                  // This is the loop to display all
                  // the stored blog posts
                  if(isset($x)) {
                    $query = mysqli_query(
    $conn,"SELECT * FROM `posts` WHERE id = '$idarray[$x]'");
                      
                    $res = mysqli_fetch_array($query);
       
                    $image = $res['img'];
                    $blog_title = $res['title'];
                    $blog_text = $res['text'];
                    $blog_id = $res['id'];
              ?>
              <div class="column">
                <div class="carousel-cell p-2">
                  <div class="card  mx-2" style="width: 18rem;">
                    <img class="card-img-top" src=
                      "<?php echo $image; ?>" alt="Card image cap">
                    <div class="card-body">
                      <h5 class="card-title">
                        <a href="blog-template.php" class="
                                    blog-link">
                          <?php 
                             echo $blog_title;
                        ?>
                      </h5>
                      </a>
                      <h6 class="card-subtitle mt-2 text-muted">
                        <?php 
                        echo $blog_text;
                      ?>
                      </h6>
                    </div>
                  </div>
                </div>
              </div>
              <?php
                  }
                 }
               ?>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Bootstrap -->
      <script src="
    https://code.jquery.com/jquery-3.5.1.slim.min.js" 
        integrity=
    "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
      </script>
      
      <script src=
    "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
      </script>
        
      <script src=
    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        crossorigin="anonymous">
      </script>
        
      <script src=
    "https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js">
      </script>
    </body>
      
    </html>

    Salida final:

    Publicaciones añadidas recientemente

Publicación traducida automáticamente

Artículo escrito por apurva412 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *