Пишем фотоальбом на PHP
В предыдущих уроках мы с вами писали систему авторизации на PHP и скрипт для загрузки файлов на сервер. В этом уроке мы с вами объединим эти умения в единую систему и создадим фотоальбом.
Это будет веб-приложение, в котором после авторизации можно загружать новые фото, а все остальные пользователи смогут видеть список фоток, а также просматривать каждую фотографию отдельно.
Мы будем расширять уже созданную нами ранее систему авторизации, её исходный код до начала изменений вы можете скачать тут.
Создадим также файл upload.php из прошлого урока и папку upload. Должно получиться вот так.
Загружать картинки может только авторизованный пользователь
Теперь давайте сделаем так, чтобы upload.php мог использовать только авторизованный пользователь.
Для этого в начале скрипта добавим проверку того, что пользователь авторизован:
<?php
require __DIR__ . '/auth.php';
$login = getUserLogin();
if ($login !== null && !empty($_FILES['attachment'])) {
...Этим мы просто не допустим загрузку файла на сервер. Помимо этого в upload.php нужно неавторизованному пользователю вообще не показывать форму для загрузки файлов. Проще простого, добавляем ещё одно условие:
...
<html>
<head>
<title>Загрузка файла</title>
</head>
<body>
<?php if ($login === null): ?>
<a href="/login.php">Авторизуйтесь</a>
<?php else: ?>
Добро пожаловать, <?= $login ?> |
<a href="/logout.php">Выйти</a>
<br>
<?php if (!empty($error)): ?>
<?= $error ?>
<?php elseif (!empty($result)): ?>
<?= $result ?>
<?php endif; ?>
<br>
<form action="/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="attachment">
<input type="submit">
</form>
<?php endif; ?>
</body>
</html>Отлично, теперь загружать файлы можно только после логина.
Список фотографий
Давайте теперь сделаем страничку с выводом списка фотографий. Для этого мы изменим файл index.php.
Для начала давайте загрузим с помощью upload.php несколько фоток. Я взял картинки с котиками, назвал их 1.jpg, 2.jpg, 3.jpg и загрузил их через формочку. После этого они появились в папке uploads.
Так как наши фоточки сохраняются в папку uploads, то из неё и будем формировать наш список.
В домашнем задании к одному из прошлых уроков вы должны были познакомиться с функцией scandir(). Она возвращает список файлов в директории в виде массива.
Давайте запишем в файл index.php следующий код:
<?php
var_dump(scandir(__DIR__ . '/uploads'));Теперь запустим скрипт в браузере и увидим следующее:
. и .. – это текущая директория и родительская директория соответственно. А вот всё остальное – это наши файлы.
Давайте сформируем список ссылок на наши картинки. Пройдёмся по массиву с именами файлов и приклеим перед их именами текст http://myproject.loc/uploads/, а ещё нам нужно проигнорировать папки . и ...
$files = scandir(__DIR__ . '/uploads');
$links = [];
foreach ($files as $fileName) {
if ($fileName === '.' || $fileName === '..') {
continue;
}
$links[] = 'http://myproject.loc/uploads/' . $fileName;
}
var_dump($links);Теперь в $links лежат прямые ссылки на все наши загруженные картинки.
Остаётся только вывести превьюшки!
<html>
<head>
<title>Фотоальбом</title>
</head>
<body>
<?php
$files = scandir(__DIR__ . '/uploads');
$links = [];
foreach ($files as $fileName) {
if ($fileName === '.' || $fileName === '..') {
continue;
}
$links[] = 'http://myproject.loc/uploads/' . $fileName;
}
foreach ($links as $link):?>
<img src="<?= $link ?>" height="80px">
<?php endforeach; ?>
</body>
</html>Полюбуемся на результат.
Остаётся только добавить ссылки, чтобы при клике на картинки открывалась исходная фоточка.
...
foreach ($links as $link):?>
<a href="<?= $link ?>"><img src="<?= $link ?>" height="80px"></a>
<?php endforeach; ?>
...Вот и всё! Полный исходный код текущего состояния доступен здесь. А изменения, которые были произведены в данном уроке, можно наглядно рассмотреть вот здесь.
Комментарии