VI Международная студенческая научная конференция Студенческий научный форум - 2014

В настоящее время производится множество различных программ стремящихся облегчить, и упростить жизнь современного человека. Разнообразнее стали и производимые программистом «продукты» - программные модули, программные комплексы и системы; а также интернет - программирование, компьютерные игры, интеграция информационных технологий, разработка модулей просмотра изображений, фотогалереи и т.д. Подобные системы начали появляться и в торговых сферах, появление интернет магазинов, программируемые рекламные щиты на улицах городов, онлайн ресурсы: библиотеки, выставки картин знаменитых, талантливых и всем известных художников, облака данных и др. Сегодня человеку можно сидя дома посетить множество различных, интересных, увлекательных мест, используя например фотогалерею. Открыв интернет и зайдя на необходимый сайт, можно попасть в музей, театр, посетить различные премьеры, концерты посмотреть видео файлы мероприятия и многое другое. Как правило, о каждом подобном событии на страницах web-сайта ведется отчет и чаще всего он закреплен различными фотографиями доступными любому пользователю. Это нормальная потребность ищущих людей показать окружающим плоды своей творческой деятельности. Еще такое желание может появиться у людей занимающихся web-рисованием и 3D моделированием. В связи с этим определена цель курсовой работы: разработать готовый модуль «Фотогалерея» для создания сайта.

Для достижения цели необходимо выполнить следующие задачи:

1. Ознакомится с существующими онлайн сервисами фотогалерей.

2. Рассмотреть особенности и возможности языка PHP.

3. Изучить Denwer.

4. Разработать скрипт «Фотогалерея».

5. Обработать полученные результаты, сделать выводы.

Посещая сайты, предназначенные для публикации различных изображений мы попадаем, в своего рода фотогалерею. Здесь мы можем просмотреть известные картины, фотографии с места проведенной акции, мероприятия, скачать понравившуюся заставку для рабочего стола нашего компьютера. Фотогалерея - это выставка определенных рисунков, фотографий, картин и прочих работ для общего обозрения. Целью её создания является привлечение людей к искусству или наглядно показать ход проделанных по заказу работ в той или иной тематике. Ярким примером подобных сайтов являются: www.GoodFon.ru, www.FreeFoto.com, www.creativity103.com и многие другие.

Зайдя на сайт creativity103.com наше внимание привлекает фотогалерея. Она имеет простое управление, фотографии переключаются либо нажатием на картинку, либо стрелочками управления, размещенными по краям, как архива изображений, так и у выбранного нами для просмотра файла. На рисунке 1 показана главная страница данного интернет ресурса. Цифры по краям изображений в нижнем меню обозначают количество показанных нам файлов. Изображение, выведенное для показа в списке, так же выделяется, это необходимо для быстрого поиска места, на котором пользователь остановил свой просмотр. Главными недостатками этого интернет ресурса является: маленькая база, архив изображений, интерфейс, сделанный на английском языке, запрет на публикацию собственных изображений. Обновление происходит раз в месяц, в связи с этим ресурс имеет маленький круг пользователей.

Рисунок 1- Главное окно сервиса creativity103.com

В достоинствах ресурса можно указать то, что в связи с небольшим количеством изображений на главной странице, сайт загружается очень быстро, так же имеет простой и доступный для каждого пользователя интерфейс.

Одной из самой крупной фотогалереи является FreeFoto.com. На страницах этого ресурса можно найти сотни тысяч изображений, фотографий, картинок, рисунков. Все они расположены по своим категориям. На рисунке 2 можем увидеть как все это организованно. В левой части сайта располагается информация об обновлении, правах на скачивание, так же показано, что этот ресурс имеет свой блог на страницах facebook. По центру экрана имеется система поиска, чуть ниже находятся последние добавленные изображения. Картинка меняется с равным промежутком времени и пользователь видит все добавленные файлы. В нижней части сайта мы видим категории, на которые делятся изображения.

Рисунок 2 - Главное окно сервиса FreeFoto.com

Подобно предыдущему имеет похожие недостатки: нет возможности публикации изображений пользователем, неудобный интерфейс, большой объем идентичных файлов, так же имеется категория платных файлов. Обновление базы происходит раз в неделю.

Является одним из самых популярных на сегодняшний день сайтов, имеет большое количество подписанных пользователей, огромный каталог изображений, ежедневное обновление. Здесь свои работы размещают профессиональные фотографы и фотохудожники. Фотографии можно не только просматривать, их можно комментировать, высказывать свои впечатления. И сервис превращается не только в место хранения файлов с видами и работами, но и в нечто, наподобие клуба, где можно общаться, знакомиться, назначать встречи. На рисунке 3 показана стартовая страница.

Рисунок 3 - Главное окно сервиса GoodFon.ru

В верхней части находится информация о количестве изображений, пользователей, скачиваний. В правой части регистрация и система поиска, чуть ниже располагаются категории поиска, где самые популярные выделяются более крупным шрифтом. Фотогалерея сайта имеет возможность настройки, показываемых изображений, состоит из двух критериев: сортировки и разрешения.

В связи с большими форматами, размерами изображений, пользователи, имеющие ограниченную скорость доступа в интернет, испытывают дискомфорт, посещая данный сайт. Страница медленно загружается, изображения открываются частично или в случае ошибки не открываются вообще. Так же есть проблема со скачиванием файла, для того чтобы это сделать пользователю необходимо нажать на выбранное изображение, в открывшемся меню указать размер и только после того, как будет нажата клавиша далее изображение можно будет загрузить на персональном компьютере.

Часто в интернете можно встретить совсем простые галерейки, представляющие из себя ряд изображений, которые увеличиваются при наведении и щелчке мыши. На этих порталах всегда предоставляется удобная возможность разложить свои работы по тематическим галерейкам, присвоив определенные метки и названия альбомам. Ведь фотогалерея это и есть коллекция фотоальбомов. Из рассмотренных ресурсов возможностью собственной публикации обладает GoodFon.ru, но для этого необходимо пройти регистрацию.Но это не так интересно, как сделать фотогалерею на сайте, где всё своё. Для этого, конечно, нужен свой сайт и программное обеспечение (движок), которое поможет сделать всё в лучшем виде. Чем большую функциональность имеет этот движок, тем большими возможностями будет наделена наша персональная, личная фотогалерия. Именно такая галерея крайне необходима на сайтах компаний, оказывающих какие-то услуги, или продающих какие-то товары. Это как раз тот инструмент, который позволит представить товар лицом. Ведь статистика показывает, что самыми популярными страницами сайтов являются прайсы и сопровождающие их фотогалереи.

Для начала надо подготовить для галереи материал. Изображения, из которых будет состоять галерея должны быть минимального объема, при хорошем качестве картинки, то есть они должны быть оптимизированы. Если предполагается, что фотографии будут открываться в отдельном окне, необходимо помнить, что тут же должно быть меню сайта с элементами управления, такими как кнопка возврата в начало галереи, перехода к другому изображению. Все изображения неплохо было бы пометить логотипом компании, сделав его полупрозрачным. Это будет говорить о принадлежности изображения и затруднит использование наших фотографий на других сайтах. Если при демонстрации намечено применение приемов характерных для слайд-шоу, таких как эффекты переходов и т.п., не забывайте, что не все имеют быстрый интернет, а поэтому подобные приемы используйте с осторожностью, чтобы галерея смотрелась хорошо во всех условиях. Фотогалерея так же может быть представлена в виде альбома, открытие которого происходит внутри страниц сайта. При этом очень хорошо смотрится эффектная рамка. Листать альбом можно при помощи кнопок вперед назад. Для перехода в начало тоже есть кнопка, которая обычно так и называется. В title ссылки необходимо прописать инструкцию, ну например: «Переход по щелчку», или – «Щёлкнуть для перехода». Для этого варианта необходим нормальный гармоничный дизайн фона. Если нет необходимости акцентировать внимание на мелких деталях изображения, то несложную, но очень наглядную галерею можно сделать, используя бегущую строку. Получится такое, скажем так, слайд шоу. Параметры и характеристики бегущей строки можно настраивать и изменять скорость прокрутки строки и её направление. Разработаем собственный модуль «Фотогалерея», учитывая все плюсы и минусы, выше рассмотренных сервисов, используя РНР язык.

Аббревиатура PHP является рекурсивным акронимом словосочетания - Hypertext Preprocessor (Препроцессор Гипертекста). PHP - это интерпретируемый язык программирования общего назначения с открытым исходным кодом. Он был сконструирован специально для ведения Web-разработок, основным преимуществом PHP-сценариев является возможность без проблем интегрироваться в обычные html-документы, при этом сохраняя всю функциональность, при условии, наличия на web-сервере интерпретатора языка PHP.

Главной областью применения PHP является написание сценариев, которые работают на стороне сервера. Помимо различных операций с содержимым ваших html-документов, с помощью PHP можно форматировать HTTP-заголовки, устанавливать cookie, управлять аутентификацией, а также перенаправлять пользователя на другие страницы. PHP предоставляет великолепные возможности по доступу к базам данных, позволяет интеграцию с различными внешними библиотеками. Рассмотрим некоторые достоинства PHP:

• Поддерживает работу с множеством СУБД (MySQL, Oracle, PostgreSQL и т.д.).

• Является программным обеспечением с открытым исходным кодом.

• Работает на разных платформах (Windows, Linux, Unix подобных систем).

• Поддержка различных web-серверов.

Таким образом, выбирая в качестве языка программирования PHP, вы получаете огромные возможности по использованию языка, свободу выбора понравившегося web-сервера и операционной системы.

Для того чтобы создать скрипт, необходимо установить локальный сервер на котором мы и будем работать. Denwer- локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые web-разработчиками для создания сайтов на «домашней» (локальной) windows-машине без необходимости выхода в интернет. Установив данную программу, выполнив ряд простых настроек, мы можем приступить к созданию скрипта.

Для того что бы разместить скрипт на сайте необходимо привести его в простой, доступный и удобный вид. Для этого создаем папку с понравившемся нам именем, желательно на английском языке, где и размещаем все файлы необходимые для работы скрипта.

Часто фотогалерея имеет привязку панели администратора, где находятся все настройки относительно внешнего вида, оформления, а так же права доступа на публикацию изображений в фотогалереи и в будущем на сайте. Так как панель администратора имеет ряд своих функций, то для нее выделим специальную папку и назовем ее - admin. В ней и будут находиться файлы необходимые для управления работы скриптом.

Кроме этого нам необходима папка, где будут храниться все загруженные нами или пользователями изображения, назовем ее - file. Следующая папка будет иметь имя - info, в дальнейшем в ней будет отображаться полная информация о том, кто из пользователей опубликовал изображение, его контактные данные, адрес и комментарий к файлу. Так же создаем папки tmp_file и tmp_info, где будут храниться временные файлы, изображения и информация не прошедшие контроль и проверку администратором.

Посещая различные сайты, первым делом обращаем внимание на его внешний вид, на всплывающие изображения, контур и прочие украшения. Все это так же работа php-скрипта, а данные изображения находятся в архиве. В нашем случае дадим имя подобному архиву, папке - img.

Одним из самых важных файлов, которые необходим и должен присутствовать в каждой из выше перечисленных папок, является - .htaccess.

.htaccess (с точкой в начале имени) - это файл, который дает возможность конфигурировать работу сервера в отдельных директориях (папках), не предоставляя доступа к главному конфигурационному файлу. Например, устанавливать права доступа к файлам в директории, менять названия индексных файлов, самостоятельно обрабатывать ошибки Apache, перенаправляя посетителей на специальные страницы ошибок. Как известно, конфигурационные директивы сервера Apache находятся в файлe httpd.conf. Но далеко не всегда будут права доступа к этому файлу. Например, если используется для хостинга виртуальный сервер, когда один сервер Apache обслуживает множество сайтов, то никто не позволит менять его конфигурацию. Но, тем не менее, есть возможность конфигурировать работу сервера в своих директориях. И делать это возможно с помощью файлов .htaccess. Файл может быть размещен в любом каталоге. Его директивы действует на все файлы в текущем каталоге и во всех его подкаталогах. Изменения, вносимые в файлы .htaccess, вступают в силу немедленно и не требуют перезагрузки сервера.

Далее в папке должны располагаться файлы непосредственно работы скрипта, а именно index.php, load.php, view.php, add.php и файл подсказки для начинающего работу со скриптом пользователя. В полном сборе папка должна выглядеть, как показано на рисунке 4.

Рисунок 4 - Каталог размещения файлов РНР скрипта

Для реализации этапа построения рассмотрим РНР скрипт в работе. Запустив файл index.php с используемого нами браузера, мы попадаем на стартовую страницу фотогалереи, где нас сразу встречают уже опубликованные пользователями фотографии, изображения, картинки, но так как мы запускаем ее впервые, то и изображений здесь нет как показано на рисунке 5.

Рисунок 5 - Стартовая страница разрабатываемого скрипта

Разработчику выпадает роль быть первым пользователем, который добавит и опубликует свое изображение, то, что необходимо для этого сделать показано на рисунке 6:

 

Найти подходящее тематике (если она имеется) фотогалереи изображение

 

 

Внести краткую информацию о себе и загружаемом файле

 

 

В случае ошибки повторить действие

Пройти проверку изображения администратором сайта, фотогалереи

 

 

Загрузить следующее изображение

Остаться на сайте, с целью просмотра других изображений

 

Рисунок 6 - Блок схема публикации изображения

Когда нужное изображение найдено, нажимаем на клавишу добавить первое изображение, и переходим в следующее меню. Здесь необходимо указать заданную администратором информацию о себе и о загружаемом файле. Это меню можем наблюдать на рисунке 7.

Рисунок 7 - Меню ввода информации о себе и о файле

Причины ошибок при загрузке файлов могут быть следующими:

• В случае не введенной информации, в какое либо окно.

• В случае если изображение превышает допустимый размер, а именно 2Мб.

• Если изображение имеет не допустимый для фотогалерии формат.

• Ошибка при указании проверочного кода.

• Неправильно записанный сайт, для которого предназначено изображение. Например, не указан http протокол.

Примером подобных ошибок является рисунок 8.

Рисунок 8 - Ошибка в указанных пользователем данных

В случае появления ошибки есть вариант - вернутся в обратное меню, где ввод данных придется произвести сначала. Если процедура добавления файла прошла успешно, на экране появится сообщение с благодарностью и если администратором разрешена мгновенная публикация то фотография, картинка появится на главной странице фотогалерии как это показано на рисунке 9.

Рисунок 9 - удачное добавление файла в фотогалерю

После этого будут доступны три варианта дальнейших действий, а именно: добавить еще изображение, перейти на главную страницу, перейти в каталог изображений. Нажав на первый вариант вернемся уже в знакомое нам окно регистрации, на второй попадем на главную страницу сайта или фотогалереи в зависимости от того что указано в коде, а третий вариант отправит в каталог где сможем увидеть все ранее опубликованные пользователями изображения. Однако если мгновенная публикация не включена то загруженное изображение переместится в архив, папку со временными файлами и будет опубликовано только после проверки администратора. На рисунке 10 можем увидеть успешное отображение добавленной фотографии на стартовой странице нашей фотогалереи.

Рисунок 10 - стартовая страница фотогалереи, после добавленного файла

Каждое последующее изображение будет отображаться ниже, образуя тем самым ленту для просмотра. Также можем заметить, что отображается информация о дате добавления, имя пользователя добавившего файл, его почтовый адрес, город проживания, сайт для которого предназначено изображение и информация о фотографии, её размер и уменьшенная копия. Весь внешний вид скрипта настраивается в панели администратора. Рассмотрим ее в подробностях.

Любая панель администратора должна иметь авторизацию и непосредственно защиту, поэтому первым делом создаем окно авторизации. Давайте обратим внимание на определенные моменты кода:

 

Код для цитирования: Скопировать