Как отображать последние сообщения в DOM с помощью PHP и MySQL?
Часто мы хорошо знакомы с «последними блогами» или «недавними сообщениями» на веб-сайтах. Итак, вот простое решение для отображения последних блогов в DOM с помощью PHP и MySQLi.
Требования:
- База данных и таблицы
- Сервер XAMPP
- Редактор (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 > |
Требования:
- База данных 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="
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
;
}
Выход:
Теперь нам нужно подключиться к базе данных и получить «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=
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>
Окончательный результат: