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

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

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

Требования:

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

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

Фрагмент кода. В следующем фрагменте кода показано, как добавить необходимые библиотеки в соответствующие коды HTML или PHP.

< head >
< link rel = "stylesheet"
bootstrap/4.3.1/css/bootstrap.min.css">
</ head >
< body >
< script src="
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/
Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" >
</ script >
< script src="
4.5.2/js/bootstrap.min.js">
</ script >
</ body >

Требования:

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

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

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

    • Дайте имя для базы данных.

    • В поле «Создать таблицу» укажите имя таблицы с количеством столбцов для нее.

    • Укажите имена столбцов и соответствующие размеры или длину.

    • Перейдите на вкладку вставки и вставьте значения для сохранения (это всего лишь пример).

    Добавьте значения для отображения.

    таблица сообщений

  3. Создайте страницу 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="
    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="
    </ 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 -->
    integrity =
    "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin = "anonymous" >
    </ script >
    < script src =
    integrity =
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin = "anonymous" >
    </ script >
    < script src =
    crossorigin = "anonymous" >
    </ script >
    < script src="
    </ 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 ;
    }

    Выход:

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

  4. Теперь нам нужно подключиться к базе данных и получить «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" ;
    }
    ?>

  5. Измените файл «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=
    crossorigin= "anonymous" >
    <!--Font Awesome-->
    <link rel= "stylesheet" href=
    "path/to/font-awesome/css/font-awesome.min.css" >
    <link rel= "stylesheet" href=
    </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=
    integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin= "anonymous" >
    </script>
    <script src=
    crossorigin= "anonymous" >
    </script>
    <script src=
    </script>
    </body>
    </html>

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

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

Предыдущий
Node.js | Buffer.readInt16LE () Метод
Следующий
Как определить IP-адрес сервера в PHP?
Рекомендуемые статьи
Страница :
Статья предоставлена:
apurva412
@ apurva412
Голосуйте за трудности
Теги статьи:
  • HTML-Разное
  • PHP-Разное
  • HTML
  • PHP
  • Программы PHP
  • Веб-технологии
  • Вопросы о веб-технологиях
Теги практики:
  • HTML
  • PHP
Сообщить о проблеме
Вопросы о Web технологиях PHP-Misc PHP HTML HTML-Misc

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