Создадим простое PHP-приложение с админ-панелью, аутентификацией пользователей и адаптивным дизайном с использованием CSS Grid. Ниже приведен полный код для приложения.
Структура проекта
/your_project/
│
├── /admin/
│ ├── index.php
│ ├── login.php
│ └── logout.php
│
├── /css/
│ └── styles.css
│
├── /config.php
├── /index.php
├── /news.php
└── /.htaccess
1. Конфигурация базы данных (config.php)
Создаем файл config.php для подключения к базе данных:
<?php
$host = 'localhost';
$db = 'your_database';
$user = 'your_username';
$pass = 'your_password';
$pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
2. Таблица пользователей
Создаём таблицу пользователей в нашей базе данных:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
Добавим пользователя:
INSERT INTO users (username, password) VALUES ('admin', '\$2y\$10$eImiTXuWVxfA2l9y.1gZhe9qk0Vh0r3C9D3jHk7D1H8D5WQ4L6x5K');
3. .htaccess
Создаём файл .htaccess для настройки ЧПУ:
RewriteEngine On
RewriteRule ^news/([0-9]+)$ news.php?id=\$1 [L,QSA]
4. Главная страница (index.php)
Создаём файл index.php для отображения новостей:
<?php
include 'config.php';
$stmt = $pdo->query('SELECT * FROM news ORDER BY id DESC');
$news = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>Главная страница</title>
</head>
<body>
<header>
<h1>Новости</h1>
<nav>
<a href="admin/login.php">Вход в админку</a>
</nav>
</header>
<main>
<div class="grid-container">
<?php foreach ($news as $row): ?>
<div class="grid-item">
<a href="news/<?= $row['id'] ?>"><?= $row['title'] ?></a>
</div>
<?php endforeach; ?>
</div>
</main>
</body>
</html>
5. Страница новостей (news.php)
Создаём файл news.php для отображения отдельной новости:
<?php
include 'config.php';
if (isset($_GET['id'])) {
$stmt = $pdo->prepare('SELECT * FROM news WHERE id = ?');
$stmt->execute([$_GET['id']]);
$news = $stmt->fetch();
} else {
header('Location: index.php');
exit();
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title><?= $news['title'] ?></title>
</head>
<body>
<header>
<h1><?= $news['title'] ?></h1>
<nav>
<a href="index.php">Назад к новостям</a>
</nav>
</header>
<main>
<article>
<p><?= $news['content'] ?></p>
</article>
</main>
</body>
</html>
6. Админ-панель (admin/login.php)
Создаём файл admin/login.php для аутентификации:
<?php
session_start();
if (isset($_SESSION['user_id'])) {
header('Location: index.php');
exit();
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
include '../config.php';
$username = $_POST['username'];
$password = $_POST['password'];
$stmt = $pdo->prepare('SELECT * FROM users WHERE username = ?');
$stmt->execute([$username]);
$user = $stmt->fetch();
if ($user && password_verify($password, $user['password'])) {
$_SESSION['user_id'] = $user['id'];
header('Location: index.php');
exit();
} else {
$error = 'Неверный логин или пароль';
}
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/styles.css">
<title>Вход в админку</title>
</head>
<body>
<h1>Вход в админку</h1>
<?php if (isset($error)): ?>
<p style="color:red;"><?= $error ?></p>
<?php endif; ?>
<form method="post">
<input type="text" name="username" placeholder="Логин" required>
<input type="password" name="password" placeholder="Пароль" required>
<button type="submit">Войти</button>
</form>
</body>
</html>
7. Защита админ-панели (admin/index.php)
Создайте файл admin/index.php для отображения админ-панели:
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: login.php');
exit();
}
include '../config.php';
$stmt = $pdo->query('SELECT * FROM news ORDER BY id DESC');
$news = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/styles.css">
<title>Админ-панель</title>
</head>
<body>
<header>
<h1>Админ-панель</h1>
<nav>
<a href="logout.php">Выйти</a>
</nav>
</header>
<main>
<h2>Список новостей</h2>
<div class="grid-container">
<?php foreach ($news as $row): ?>
<div class="grid-item">
<a href="edit.php?id=<?= $row['id'] ?>"><?= $row['title'] ?></a>
</div>
<?php endforeach; ?>
</div>
</main>
</body>
</html>
8. Выход из админ-панели (admin/logout.php)
Создаём файл admin/logout.php для выхода из админ-панели:
<?php
session_start();
session_destroy();
header('Location: login.php');
exit();
?>
9. Стили для страниц (css/styles.css)
Создаём файл styles.css для стилизации страниц с использованием CSS Grid:
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
nav {
margin: 20px 0;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
padding: 20px;
}
.grid-item {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
.grid-item a {
text-decoration: none;
color: #333;
}
article {
padding: 20px;
}
Теперь у нас есть полное PHP-приложение с админ-панелью, аутентификацией пользователей и адаптивным дизайном. Вы можете добавлять, редактировать и удалять новости, а также просматривать их на главной странице.
Вот несколько направлений, которые можно рассмотреть для дальнейшего развития приложения:
Добавление функций CRUD: возможность добавления, редактирования и удаления новостей в админ-панели.
Управление пользователями: расширить функциональность админ-панели для управления пользователями (добавление, редактирование, удаление).
Классификация новостей: Добавить категории для новостей, чтобы пользователи могли фильтровать их по интересам.
Комментарии: Реализовать систему комментариев к новостям, чтобы пользователи могли оставлять свои мнения.
Поиск: возможность поиска новостей по заголовку или содержимому.
Аутентификация и авторизация: возможность добавления ролей пользователей (например, администратор и редактор) с различными уровнями доступа.
Стилизация и UX: улучшить внешний вид и пользовательский интерфейс приложения с помощью более сложных стилей и взаимодействий.
Мобильная адаптация: убедиться, что приложение хорошо работает на мобильных устройствах.
