Как отображать последние сообщения в DOM с помощью PHP и MySQL?

Опубликовано: 5 Января, 2022

Часто мы хорошо знакомы с «последними блогами» или «недавними сообщениями» на веб-сайтах. Итак, вот простое решение для отображения последних блогов в DOM с помощью PHP и MySQLi.

Требования:

База данных и таблицы
Сервер XAMPP
Редактор (VS Code в этой статье).

Примечание. Необходимую в коде загрузочную программу можно загрузить с сайта Bootstrap Download. Добавьте необходимые файлы в свои коды HTML или PHP, как показано ниже.

Фрагмент кода. В следующем фрагменте кода показано, как добавить необходимые библиотеки в соответствующие коды HTML или 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 > 

Требования:

База данных MySQL и таблицы.
Сервер XAMPP (для загрузки - сервер загрузки)
Editor (в этой статье использовался VS Code).

Действия, которые необходимо выполнить:

Создайте базу данных с таблицей «posts», имеющей «id», и содержимым, которое необходимо отображать на странице.
Шаги по созданию таблицы в инструменте phpmyadmin:
- Зайдите в phpmyadmin
- Войдите, используя свое имя пользователя как «root» и пароль как «».
- На домашней странице phpmyadmin нажмите * new * на левой боковой панели, чтобы создать новую базу данных.
- Дайте имя для базы данных.
- В поле «Создать таблицу» укажите имя таблицы с количеством столбцов для нее.
- Укажите имена столбцов и соответствующие размеры или длину.
- Перейдите на вкладку вставки и вставьте значения для сохранения (это всего лишь пример).
Добавьте значения для отображения.
таблица сообщений

Создайте страницу PHP с именем posts.php и поместите папку в папку htdocs внутри XAMPP .

HTML-код: загрузите каталог font-awesome в свою рабочую папку и укажите соответствующее место для файла «font-awesome.min.css», как показано ниже.

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 > 

Фрагмент кода CSS: следующий файл «style.css» используется в приведенном выше коде для стилизации элементов управления 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 ;
 }

Выход:

Одно сообщение здесь

Теперь нам нужно подключиться к базе данных и получить «id», и, следовательно, все соответствующие ему детали добавляются в DOM. Для этого мы будем использовать запросы MySQL.
Здесь мы сначала сортируем базу данных, используя временную метку , используя предложение «порядок по», за которым следует вставка идентификатора последнего блога в массив, за которым следуют другие идентификаторы в файле « retrieve_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" ;
 }
 ?>

Измените файл «posts.php » и включите в него указанный выше « retrieve_id.php ». Поместите карточку в цикл, который будет выполняться до числа, соответствующего количеству сообщений, которые вы хотите отобразить. Используя запросы MySQL, извлеките значения из таблицы БД, используя массив «id», созданный в « retrieve_id.php ».

Поместите PHP-код или переменные, значения которых получены из базы данных, в HTML-код там, где это необходимо.

Окончательный код: это комбинация всех вышеперечисленных шагов и кодов.

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>

Окончательный результат:

Недавно добавленные посты

Как отображать последние сообщения в DOM с помощью PHP и MySQL?

HTML

PHP

PHP

РЕКОМЕНДУЕМЫЕ СТАТЬИ