События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Причины появления депрессии.


Орущие коты мешают спать. Онлайн игра.


Почему в Англии левостороннее движение?


Объекты-призраки. Обман зрения.


Мы видим то, что хотим видеть. Иллюзии зрения.


Фильмы ужасов, которые стоит посмотреть. Часть 1.


Как вставить данные в базу данных (таблицу)?


Интересные сны, которые снились знаменитым людям.


Интересные, секретные фотографии. подборка (фото)


Честные слова, сказанные о жизни.


Хамбург: город деменции и мертвых душ. Легенда о Нубозавре: Часть2



“Не моря разделяют народы, а невежество, не различие языка, а враждебные отношения.”

Джон Рескин

Следующая цитата »

Это факт!


 Самым «мертвым» водоемом на Земле является не Мертвое море, в котором существуют некоторые грибки и бактерии, а озеро Смерти в Сицилии, со дна которого бьют источники концентрированной серной кислоты. Есть свое «мертвое» озеро и в России. Минерализация озера Эльтон в Волгоградской области достигает 500 г/л, что в 1,5 раза превышает концентрацию солей в Мертвом море.

Следующий факт »

Ра оставил тебе послание!... (0о0)

как на php сделать новостную ленту или список статей?



Теги: #статьи портала #Создание сайта (html,css,php,js)


php, mysql, sql, js, css, html, вывод данных, новость, новостная, список новостей, список статей, лента, новостная лента, лента статей,

Когда вы заходите на сайты, то в первую очередь видите список каких-то статей, ссылок, новостей. Как сделать себе на сайт такую штуку?
Наверно по началу вы дмаете, что это очень сложная задача, но на самом деле это совсем не так. Нужно лишь иметь базу данных, где у вас будет какая-то статья или текст.

В качестве примера я использую следующую таблицу, где будет распологаться какая-то статья.
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; /* отступ от блока с текстом */
}


вообщем-то это всё.




ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)