Наверно по началу вы дмаете, что это очень сложная задача, но на самом деле это совсем не так. Нужно лишь иметь базу данных, где у вас будет какая-то статья или текст.
В качестве примера я использую следующую таблицу, где будет распологаться какая-то статья.
id - номер статьи
name - название статьи
img - картинка к статье
tetxt - текст статьи
Называться таблица будет news12
| id | name | img | text |
| 1 | оказывается крым был римским. | https://recsgames.ru/imgdf/sheo/142219.jpg | политика политота текст текст текст текст |
| 2 | бостон атаковали трехногие инопланетные гиганские машины | https://recsgames.ru/imgdf/menu/psy.jpg | тут очень очень мнооооооого текста ой многобукв |
Далее sql запросом делаем вывод статьи:
Select id, name, img from news12. Дословно - выбрать id, название, картинку ИЗ таблицы news12
И сам php код с запросом. Не забудьте подключиться к вашей базе данных ;)
//подключение к БД
$servername = "localhost"; //это оставляете как есть
$username = "username"; //ваш логин от БД
$password = "password"; //ваш пароль от БД
$dbname = "myDB"; // название вашей базы данных, где находится сама таблица с домами
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Если что-то введено неверно, то будет выведена ошибка
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
//сам запрос к БД
$sql = "SELECT id, name, img FROM news12"; // сам запрос..
$result = $conn->query($sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "<b>" . $row["name"]. "</b><br><img width='300px'src='" . $row["img"]. "'><br><a href='ссылка_на_статью'>прочитать статью тут</a><br><br>"; //вариант вывода. созданы отступы, теги img, a и br, которые сделают выведенную строку полноценной частью списка статей
}
} else {
echo "ничего нет"; // если в таблице ничего нет, то выведется это сообщение
}
mysqli_close($conn); //конец подключения
вот как будет выглядеть результат:
бостон атаковали трехногие инопланетные гиганские машины
прочитать статью тут
оказывается крым был римским
прочитать статью тут
Если у вас будет много статей, то можно уменьшить количесво выведенных статей, добавив в запрос слово LIMIT.
SELECT id, name, img FROM news12 LIMIT 3 // LIMIT 3, а именно цифра 3 будет означать, что нужно вывести не больше 3-х статей. (цифру можно менять)
Вообщем-то это всё. Оказалось, что сделать список статей или новостную ленту достатоно легко.
Выводится и название и картинка, а текст самой статьи остается невидимым и его можно будет увидеть на странице самой статьи.
Я предлагаю вам сделать вид списка статей красивее и более приятным для восприятия. Для этого можно подправить первоначальный код и добавить несколько css классов и стилей, которые я описывал в этой статье.
$sql = "SELECT id, name, img FROM news12"; // сам запрос..
$result = $conn->query($sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "<div class='contmeleft'>
<img width='140px' src='". $row["img"]. "' >
<p>" . $row["name"]. "</p>
</div>";//вариант вывода. выведем картинку и название
}
} else {
echo "ничего нет"; // если в таблице ничего нет, то выведется это сообщение
}
Еще нужно добвить css стили и оформление.
.contmeleft {
border-radius:8px; /* скругляем края блока*/
width: 320px; /* общая ширина блока*/
border: 1px solid #d9d9d9; /* рамка блока*/
overflow: hidden; /* скрывает возможность появления прокрутки блока. */
}
.contmeleft img {
width: 140px; /* ширина картинки 140 */
height: 90px; /* ысота картинки, от неё будет зависеть и размер общего блока */
object-fit: cover; /* обрезаем края картинки, если они не вместятся в блок */
object-position: 0 70; /* тоже обрезка краев */
margin-right: 10px;
float: left; /* важный момент. с помощью этого знаения, мы показывем браузеру, что блок должен соприкасаться со вторым блоком приемущественно с левой стороны */
}
.contmeleft p{
overflow-wrap: normal; /* показывает тексту, что он не должен заходить за границы блока */
word-wrap: normal;
word-break: normal; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */
line-break: auto; /* нет поддержки для русского языка */
-webkit-hyphens: none; -ms-hyphens: none; hyphens: none; /* значение auto не поддерживается Chrome */
padding: 10px; /* отступ от рамки до текста - делает его красивее */
margin-left: 15px; /* отступ с левой стороны от блока с картинкой */
display: block; /* обознначает, что это не просто бесформенный текст, а блок внутри блока */
font-weight:bold; /* толщина текста - толстый */
font-size:14px; /* размер текста*/
margin: 2px 0 0 0; /* отступ от блока с текстом */
}
вообщем-то это всё.
.jpg)
.jpg)
