Доброго времени суток! В данном цикле статей мы рассмотри с Вами, как можно реализовать простую систему с помощью которой можно будет добавлять новости на сайт . Реализована она будет на PHP .
Доброго времени суток! В данном цикле статей мы рассмотри с Вами, как можно реализовать простую систему с помощью которой можно будет добавлять новости на сайт. Реализована она будет на PHP.
Итак, для начала рассмотрим структуру нашего проекта:
.
├── css
│ ├── bootstrap.min.css
│ └── style.css
├── images
│ └── php-add-news-on-site.jpg
├── models
│ └── news_model.php
├── templates
│ ├── form.phtml
│ └── index.phtml
├── config.php
├── core.php
├── index.php
├── news.php
└── news_table.sql
Рассмотрим по отдельности каждую папку.
- css - как нетрудно догадаться папка со css-стилями. В примере используется Bootstrap 5
- image - папка для разных изображений
- models - папка моделей для работы с базой
- templates - html-шаблоны
- config.php - настройки доступа к базе данных и другие настройки
- core.php - несколько базовых функций
- index.php - выводит список последних новостей
- news.php - добавляет новость в базу
- news_table.sql - SQL-скрипт для создания таблицы новостей
Теперь рассмотрим подробнее SQL-скрипт и HTML-шаблоны.
create table news
(
id int auto_increment,
title varchar(512) not null,
content text not null,
created_at datetime default now() null,
constraint news_pk
primary key (id)
);
В данном примере новость имеет заголовок (text) и содержимое (content), а также дату добавления (created_at). Это минимально необходимые данные.
Теперь рассмотрим HTML-шаблоны, которые выводят данные новости и предоставляют интерфейс для их добавления в базу.
index.phtml - вывод списка новостей
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Последние новости</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container py-4 px-3">
<div class="container">
<h2 class="mb-3">Последние новости</h2>
<a class="btn btn-sm btn-warning my-3" href="news.php">Добавить новость</a>
<div class="row row-cols-1 row-cols-md-2 g-4">
<?php foreach($news as $post): ?>
<div class="col">
<div class="card h-100">
<!--<img src="..." class="card-img-top" alt="...">-->
<div class="card-body">
<h5 class="card-title"><?php print $post['title'] ?></h5>
<p class="card-text"><?php print $post['content'] ?></div>
<div class="card-footer">
<small class="text-muted"><?php print $post['created_at'] ?></small>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
</div>
</body>
</html>
form.phtml - форма добавления новости
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Форма для добавления новости</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container py-4">
<?php if($message): ?>
<div class="alert alert-info">
<?php print $message ?>
</div>
<?php endif ?>
<?php if($errors): ?>
<div class="alert alert-danger">
<ul>
<?php foreach ($errors as $error): ?>
<li><?php print $error ?></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Все новости</a></li>
<li class="breadcrumb-item active" aria-current="page">Добавить новость</li>
</ol>
</nav>
<form action="../news.php" method="post">
<h3 class="pb-3">Добавить новость</h3>
<div class="mb-3">
<label for="newsTitle" class="form-label">Заголовок</label>
<input type="text" class="form-control" id="newsTitle" name="title" value="Простая новость" placeholder="...">
</div>
<div class="mb-3">
<label for="newsText" class="form-label">Текст</label>
<textarea class="form-control" id="newsText" rows="3" name="content" placeholder="...">Просто контент</textarea>
</div>
<div class="mb-3">
<input type="submit" value="Добавить" class="btn btn-success" name="news_add" />
</div>
</form>
</div>
</body>
</html>
Таким образом, в данной статье мы рассмотрели с Вами структуру проекта и содержимое некоторых файлов. В следующей статье рассмотрим подробно код приложения.
