1PROMTAI.RU | Простое PHP-приложение с админ-панелью, шпаргалка

Создадим простое 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: улучшить внешний вид и пользовательский интерфейс приложения с помощью более сложных стилей и взаимодействий.

Мобильная адаптация: убедиться, что приложение хорошо работает на мобильных устройствах.