PHP уроки
ПРОСТО самая лучшая обучалка PHP!
  • Студия LPHPRU
  • Заказать сайт
  • Уроки PHP
  • Контакты
  • Реквизиты
  • Помощь
Новости на email
Меню
  • PHP - с чего начать?
  • Уроки PHP
  • Функции PHP
  • Массивы
  • Denwer
  • MySQL
  • Информация
  • Dreamweaver уроки
  • JQuery уроки
  • Галерея
  • Блог
  • OpenCart
  • Тесты для разработчиков
  • Заказать сайт
Календарь
Декабрь (2019)
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

  • Что нового?

    • Тест №1 для разработчиков
    • PHP 5.6 RC1
    • SQL. Как cкопировать данные одной колонки в другую, в той же таблице
    • GRUB изменить порядок загрузки OS в Linux
    • SSH - вход на сервер без ввода пароля
    • PhpMyAdmin - проблема с загрузкой большого файла на сервер
    • Редактор vi в UNIX, Linux
  • Комментарии

    • Была такая проблема, решалась пе...
    • Возможно с течением времени этот...
    • Выполнил всё по инструкции, но... ...
    • I really enjoy the forum.Thanks Again. Cool.
    • как зделать пароль и логин
  • TOP-5

    • Метод POST (2683086)
    • Привет, МИР! (866786)
    • Метод GET (642805)
    • Операторы (584283)
    • Заказать сайт (537306)

PHP фотогалерея (часть 3)

Главная » Уроки PHP » PHP фотогалерея (часть 3)
PHP урок № 238
ЧАСТЬ III
Часть I Часть II
Сегодня я хочу рассказать, как создать страницу для просмотра фотографии в полную величину. Эта страница будет содержать постраничную навигацию, а так же возможен просмотр отдельных фотографий по выбору из строки навигации.
Задумка такая, при выборе фотографии на странице index.php (кликнув по ней), эта фотография открывается в полном размере в новом окне, сверху появляется строка навигации, отсчёт в ней(строке навигации), начинается с номера этой фотографии в БД. Будут сделаны указатели: следующая фотография (Next), предыдущая фотография (Васк), указатель начала просмотра, всех фото по этой теме и указатель перемещающий просмотр в конец галереи. Файл о котором идёт речь, получил название general-view.php. Именно он и будет отвечать за показ фотографий в полном размере.

Обновления и что появилось нового.

Файл index.php, в ходе разработки второй страницы, претерпел изменения, которые необходимы для работы всего сайта галереи. Обновлённая версия index.php - ссылка ниже. Просто меняете старый файл на новую версию.
Обновление: Файл index.php
Вы наверно уже обратили внимание, что фотографии представленные в ходе разработке сайта, как примеры, имеют одинаковый размер по ширине. От этого и будем отталкиваться, ширина полноразмерного изображения не будет превышать 1024px. Это сделано для удобства просмотра и эстетики. Чисто визуально приятнее воспринимать ряд фотографий имеющих один размер даже если они подогнаны к нему, с помощью различных приёмов. То же самое касается и файлов мини картинок (копии больших), их ширина составляет 200px.
Создан ещё один файл необходимый для работы системы фото галерея. Называется он var.inc - этот файл содержит и в последствии ещё будет пополняться всеми переменными которые участвуют в передаче информации между страницами сайта. Некий такой буфер, для обработки передаваемых данных и приведению их в удобочитаемые переменные. Смысл заключается в том, чтоб не писать каждый раз проверку передаваемой информации через глобальную переменную ($_POST или $_GET), а ограничится одним подключаемым файлом, в котором и будет происходить весь этот процесс. Размещаться он будет в корне сайта.

Листинг № 1 - Файл переменных var.inc

<?php
///////////////// ПЕРЕМЕННЫЕ ///////////
$id_theme = htmlspecialchars($_GET['id_theme']); // ID темы галлереи
$id_photo = htmlspecialchars($_GET['id_photo']); // ID фотографии 
 // количество фото выводимых в строку
$num_row = htmlspecialchars($_GET['num_row']); 
// значение кнопки, изменит кол-во фото в строке
$butt = htmlspecialchars($_REQUEST['butt']);
// номер страницы
$page = htmlspecialchars($_REQUEST['page']); 
// имя большой фотографии
$big_photo = htmlspecialchars($_REQUEST['big_photo']); 
// имя большой фотографии
$link = htmlspecialchars($_REQUEST['link']); 
// страница начала вывода big_photo 
$start = htmlspecialchars($_REQUEST['start']);      
///////////// конец - ПЕРЕМЕННЫЕ ///////////
?>
Обновился так же файл стилей нашего сайта. Ниже полная копия этого файла.

Листинг № 2 - Файл стилей для сайта фотогалерея.

.green {
color: #363;
}
.red {
color: #F03;
}
.orange {
color: #F63;
}
.autorize {
padding: 30px;
width: 650px;
position: relative;
background-color: #DFEAFF;
border: medium dashed #FFF;
margin-left: -325px;
left: 50%;
top: 200px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.8em;
color: #999;
font-weight: bolder;
}
.autorize label #button {
background-color: #FFF;
width: 250px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.5em;
font-weight: bolder;
color: #999;
position: relative;
left: 50%;
margin-left: -25%;
height: 40px;
}

.autorize .login label #textfield {
font-size: 30px;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #9FCFFF;
background-color: #FFFFE6;
border: thin solid #FFF;
}

.autorize .login {
margin: 5px;
padding: 40px;
width: 450px;
position: relative;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #09F;
font-size: 2.3em;
}
.autorize .password {
margin: 50px;
padding: 40px;
width: 450px;
position: relative;
}
Обновилась структура базы данных, дамп ниже.
Дамп базы данных.
Появилась новая папка в корне сайта - fn, в ней находится файл function-all.php - этот файл содержит все функции для работы сайта. Т.е. по ходу разработки сайта, все функции которые будем писать, сохраняем в файле function-all.php и затем по средствам функций include и require, будем подключать этот файл на все страницы, где будут задействованы данные функции. Таким образом структурируем архитектуру сайта.
Копия файла function-all.php:
Скачать файл функций, function-all.php.

Файл просмотра отдельной фотографии.

Ну и под конец мы подошли к самому интересному. Это вторая страница нашего сайта, в которой будет отображаться отдельно взятая фотография во весь размер с полосой постраничной навигации и выбора просмотра отдельной фотографии.
Вывод чисел сверху фотографии, есть ничто иное как, порядковый номер фотографии в базе данных. Кол-во выводимых номеров, можно регулировать с помощью переменной $N находящейся в начале кода страницы. Копию этого файла можно скачать ниже.
Скачать файл просмотра отдельной фотографии general-view.php.
  • Внешний вид страницы.
Разбирать по отдельности каждый файл проекта, как он писался, что лучше, что хуже, что можно заменить изменить или убрать, будем на форуме. В этой части я в частности изложил концепцию и предложил обновления к уже написанным файлам. Ошибки и исправления просьба излагать в доступной форме для понимания, на форуме.

Продолжение следует...

SETTER © LPHP.RU
Администрация сайта
07.12.2009 10:14:52

Обсудить на форуме.
Понравился урок? Не пропусти следующий!
Рекомендованные уроки этого раздела:
  • Как сделать поля ввода логин, пароль.
  • Загрузка файлов
  • Работа с Excel файлами в PHP
  • Хэш

Напишите свой комментарий
Ваше имя
Сообщение
Введите цифры с картинки:
 

Комментарии

labean 08.08.2011 21:59:15
Хотелось бы увидеть урок по созданию фотогалереи без использования БД (файловой) с загрузкой фото на сайт, автоматического создания миниизображений (тумбочек) и возможностью комментирования.
labean 09.08.2011 08:35:29
Спасибо за ответ, жду с нетерпением.
  • Яндекс.Метрика Здесь находится аттестат нашего WM идентификатора 185571665285
  • "Группа компаний Позитив" © 2009-2019 Студия LPHPRU
  • Реквизиты компании
  • Контакты
  • Услуги
  • Tweet