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

Основные разделы сайта должны быть доступны с главной страницы. На главной странице не должно быть большого объема текстовой информации. Можно представить карту будущего интернет-каталога (рис1.3).

Рис.1.3.Карта сайта интернет-каталога

1.3 Средства разработки интернет-каталога

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

Денвер - это программная оболочка (эмулятор веб сервера на системе unix) включающая в себя набор дистрибутивов и модулей (Apache+SSL, PHP5, MySQL5, phpMyAdmin и т.д.) для отладки сайтов на (локальном, http://localhost) компьютере или ноутбуке без необходимости выхода в Интернет [3].

Поддержка ОС (Операционных систем): Windows XP/Vista/7/8.

Все компоненты Денвера уже настроены и готовы для работы (в частности, корректно настроена русскоязычная кодировка MySQL, SSL и т.д.). Кроме того, вы можете обновлять любой из сервисов Денвера (Apache, PHP, MySQL и т.д.) вручную, просто копируя новые версии дистрибутивов поверх старых.

На следующем этапе следует определиться с выбором языка программирования. В разработке данного курсового проекта будут использоваться: язык сценариев JavaScript, язык гипертекстовой разметки HTML, PHP - скриптовый язык программирования, язык каскадных таблиц стилей CSS [2].

Язык сценариев JavaScript. Язык JavaScript разрабатывался компанией Netscape как язык сценариев просмотра HTML-страниц. JavaScript является объектно-ориентированным языком. В целом язык ориентирован на встроенные объекты NetscapeNavigator: окна, формы, поля форм, элементы рабочих областей Navigator. Это сильно облегчает обучение языку и позволяет сразу писать интересные и полезные программы.

Используя JavaScript, можно организовать многооконный интерфейс с локальной справочной системой и встроенной графикой, возложив при этом многие вопросы проверки вводимых пользователем данных на JavaScript. По своим функциональным возможностям JavaScript довольно сильно уступает Java: можно организовать прокрутку текста, организовать открытие нового окна, запрограммировать калькулятор, но не более того [7].

Язык гипертекстовой разметки HTML. Всемирная паутина состоит из веб-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (Hypertext Markup Language, HTML) [9].

HTML дает нам средства для [10]:

* публикации электронных документов с заголовками, текстом, таблицами, списками, фотографиями;

* загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке;

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

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

Документы HTML являются обычными текстовыми ASCII-файлами. Для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту [11].

Документ HTML разделяется на две основные части: заголовок - head и тело - body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега [10].

PHP скриптовый язык программирования. PHP (Personal Home Page персональная домашняя страница) - это система разработки скриптов, включающая в себя CGI - интерфейс, интерпретатор языка и набор функций для доступа к базам данных и различным объектам WWW. PHP располагается на сервере и предназначается для обработки кода, встраиваемого в HTML-документы. Благодаря этому, появляется возможность создавать динамические Web-страницы. То есть Web-документ создается как обычно, используя язык HTML, а затем в него встраиваются РНР-команды по мере необходимости. Файлы, созданные таким образом, хранятся на сервере. Когда посетитель обращается к вашей страничке, РНР обрабатывает встроенные в нее команды и выдает результат браузеру пользователя. РНР обладает огромным набором функций и большой гибкостью, которые могут быть значительно расширены с помощью дополнительных внешних библиотек. Можно управлять доступом к страницам, создавать и обрабатывать базы данных любой сложности, генерировать изображения или PDF-документы. Недостатком PHP можно отметить, то, что этот язык реализуется при написании небольших программ, выполняемых на сервере [6].

Каскадные таблицы стилей (CSS) и интерфейс сайта. CSS - один из самых простых и удобных в использовании инструментов, имеющихся в распоряжении веб-разработчиков.

CSS используется главным образом для создания описаний (или деклараций) стилей (к примеру, шрифта, размера или цвета) и их применения к выбранным частям HTML-кода посредством селекторов - ссылок на элемент или группу элементов, по отношению к которым нужно применить указанный стиль [9].

Преимущества CSS [12]:

* Более чистый код:

* Этот код легче поддерживать;

* быстрая загрузка;

* лучшая оптимизация для поисковых систем;

* Модульный код:

* Правила стиля могут применяться ко множеству страниц;

* Единообразный дизайн;

* Код легче поддерживать;

* Сила дизайна;

* Точность контроля (позиционирование, размер, поля и др.);

* Разделение труда;

* Задача разработчика - разрабатывать, задача дизайнера - создавать дизайн;

* Лучше доступность;

* Теги больше не используются не по назначению (например, <blockquote> для форматирования);

* Нет необходимости в позиционировании невидимых картинок;

* Пользователи могут переписывать стилевые таблицы автора;

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

На третьем этапе установим редактор для создания динамических страниц нашего веб-портала. Выберем NotePad++. Notepad++ - это бесплатный редактор текстовых файлов (замена стандартного Блокнота) с поддержкой синтаксиса большого количества языков программирования, ориентирован для работы в операционной системе MS Windows.

Этот проект базируется на компоненте Scintilla (очень мощном компоненте для редактирования) написанном на C++ с использованием только Win32 API и STL (что гарантирует максимальную скорость выполнения при минимальном размере программы), распространяется под лицензией GPL [5].

1.4 Проектирование базы данных

Выводы к главе I

В результате рассмотрения предметной области «Цифровая и бытовая техника» выяснилось, что представляет собой данный термин, преим.

Были описаны функционал и структура интернет - каталога, его дизайн. Составлены схемы страниц сайта.

Проведен обзор средств разработки. Рассмотрены языки программирования: php, html, JavaScript, css.

Была спроектирована база данных, которая будет составлена из 5 сущностей, необходимых для существования сайта.

ГЛАВА II. РАЗРАБОТКА ИНТЕРНЕТ-КАТАЛОГА ЦИФРОВОЙ И БЫТОВОЙ ТЕХНИКИ

интернет каталог цифровой техника

После установки и настройки Denwer переходим к непосредственному созданию реляционной базы данных в локальном доступе - phpMyAdmin. Сначала нужно запустить Denwer. После чего нужно запустить любой браузер, и в адресной строке ввести http://localhost, и в данной странице перейти по адресу: http://localhost/Tools/phpMyAdmin.

С помощью веб-интерфейса phpMyAdmin создадим новую базу данных «digital-electronics» (рис. 2.1).

Рис. 2.1. Создание новой БД

Далее создадим новую таблицу «Application» с пятью полями: ключевое поле id, поля типа varchar - name и email, поле tel с типом int, и текстовое message. Данная таблица будет содержать данные о пользователях, которые оставили заявку на сайте.

Рис 2.2. Таблица «Application»

Аналогичным образом создадим все таблицы. Следующим этапом разработки БД было создание таблицы «reviews», которая будет отвечать за хранение отзывов, представленных на странице reviews.php (рис. 2.3).

Рис 2.3. Таблица «reviews»

Завершительным этапом разработки базы данных «digital-electronics» является создание 3-х таблиц, которые содержат информацию о каждой категории товаров, предоставленных на сайте:

· Телевизоры (рис. 2.4);

· Смарт-часы (рис 2.5);

· Кофе машины (рис 2.6).

Рис. 2.4. Таблица «tv»

Рис. 2.5. Таблица «coffee»

Рис. 2.6 Таблица «watches»

В конечном итоге разработанная база данных «digital-electronics» содержит 5 таблиц (рис. 2.7):

· Application;

· Coffee;

· Reviews;

· Tv;

· Watches.

Рис. 2.7. БД «digital-electronics»

2.2 Реализация компонентов Web-сайта

Разработанная главная страница сайта «Интернет-каталог цифровой и бытовой техники» отображает последние 5 товаров из каждой категории (рис. 2.7). Так, например, в блоке с телевизорами отображается результат вывода 5 записей из таблицы «tv» (листинг 2.1)

Листинг 2.1. Запрос для вывода характеристик телевизоров

$query = mysql_query("SELECT * FROM `tv` ORDER BY `id_tv` DESC");

$tv = mysql_fetch_array($query);

$i = 0;

while($i < 5) {

$diagonal = $tv['diagonal'] * 2.5;

printf('<div class="item-product">

<div class="title-product">

%s (%s")

</div>

<img src="images/product/tv/%s" class="img-product">

<div class="text-product">

Телевизор %s, производитель %s.<br>Цвет %s, диагональ %s"(%sсм)

</div>

<div class="button-wrap">

<a href="tv-view?id=%s">

<button class="view-product-btn">Посмотреть</button>

</a>

</div>

</div>',

$tv['name'], $tv['diagonal'], $tv['img'], $tv['name'], $tv['manufacturer'], $tv['color'],

$tv['diagonal'], $diagonal, $tv['id_tv']);

$i++;

$tv = mysql_fetch_array($query);

}

Рис 2.7. Главная страница сайта «index.php»

Страница about.php (О компании) отображает основную информацию о компании: описание истории компании и фотографию склада с товарами (рис. 2.8). Данная страница не содержит взаимодействия с базой данных и является статической.

Рис. 2.8. Страница «О компании»

Страница contact.php содержит контактную информацию компании, а именно: номер телефона, физический адрес, электронную почту и ссылки на социальные сети. А также на данной странице представлена карта, по которой посетитель сайта может найти компанию. Для подключения карты на сайт была использована система «Яндекс. Карты», которая позволяет вставлять интерактивные карты на любой сайт(листинг 2.2). Выбор «Яндекс. Карты» обосновывается тем, что данная система проста в подключении и настройке. Таким образом мы выбрали наш физический адрес - г. Симферополь (рис. 2.9).

Рис. 2.9. Страница «Контакты»

Листинг 2.2. Подключение карты на страницу«Контакты.

<div class="map">

<iframe src="https://api-maps.yandex.ru/frame/v1/-/CVhkmX39" width="850" height="400" frameborder="0"></iframe>

</div>

Страница reviews.php отображает блок с отзывами, которые оставили посетители сайта и форму для добавления нового отзыва (рис. 2.10).

Рис. 2.10. Форма добавления нового отзыва

При добавлении нового отзыва пользователь должен ввести так называемую «капчу», которая позволит исключить возможность спама (листинг 2.3).

Листинг 2.3. Реализация «капчи»

var num1 = parseInt(getRandom(0, 10));

var num2 = parseInt(getRandom(0, 10));

document.getElementById("num1").innerHTML = num1;

document.getElementById("num2").innerHTML = num2;

var sum = document.getElementById("sum_comp");

sum.value = num1 + num2;

function getRandom(min, max) {

return Math.random() * (max - min) + min;

}

Страницы «О компании», «Отзывы» и «Контакты» содержат панель, расположенную слева от основного блока с контентом, со случайно генерируемыми товарами (приложение 1). Например, страница отзывов выглядит следующим образом (рис. 2.11).

Рис 2.11. страница «Отзывы»

Одной из основных страниц сайта является страница «Каталог» (приложение 2). Блок контента отображает все товары из выбранной категории и панель навигации (рис. 2.12).

Рис. 2.12. Страница «tv.php»

Для вывода полной информации о каждом товаре была создана отдельная страница (рис. 2.13).

Рис. 2.13. Страница с выводом конкретного товара (tv?id=8)

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

В ходе выполнения первой главы данного курсового проекта были получены следующие результаты: описана предметная область; описаны функционал и структура интернет - каталога, его дизайн; проведено ознакомление со средствами разработки; приведено описание языков программирования PHP, JavaScript, язык гипертекстовой разметки HTML, СSS; были описаны и продемонстрированы практические детали данного курсового проекта. Также были описаны элементы разработки основных страниц сайта, базы данных, интерфейса. Для интерфейса основным реализующим элементом стал JavsScript.

Была разработана база данных в СУБД "myPhpAdmin",которая содержит в себе всю необходимую для интернет-каталога информацию. База данных содержит 5 таблиц. Три таблицы были созданы для доступных товаров на сайте: таблица "cofee", ''tv'' и "watch".Была создана таблица "Application" для хранения данных о заявках, оставленных пользователями, и была создана таблица "reviews" для хранения отзывов, оставленных пользователями.

Также был создан понятный, легкий и удобный в использовании интерфейс.

Была спроектирована структура сайта, которая содержит в себе все необходимые страницы: главную страницу, страницу "Каталог", страницу "Контакты", "О компании" и страницу "Отзывы".

Было осуществлено взаимодействие веб-сайта с базой данных, которое необходимо для вывода информации на одну из страниц информационного сайта.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Листинг файла nav-left-pages.php

<div class="nav-left nav-left-pages">

<?php

include_once "connect.php";

$res = mysql_query("SELECT COUNT(*) FROM `tv`", $connect);

$row = mysql_fetch_assoc($res);

$count = $row['COUNT(*)'];

$rand_tv = rand(1, $count);

$query2 = mysql_query("SELECT * FROM `tv` WHERE id_tv='$rand_tv'");

$tv2 = mysql_fetch_array($query2);

$diagonal = $tv2['diagonal'] * 2.5;

printf('<div class="item-product">

<div class="title-product">

%s (%s")

</div>

<img src="images/product/tv/%s" class="img-product">

<div class="text-product">

Телевизор %s, производитель %s.<br>Цвет %s, диагональ %s" (%sсм)

</div>

<div class="button-wrap">

<a href="tv-view?id=%s">

<button class="view-product-btn">Посмотреть</button>

</a>

</div>

</div>',

$tv2['name'], $tv2['diagonal'], $tv2['img'], $tv2['name'], $tv2['manufacturer'], $tv2['color'], $tv2['diagonal'], $diagonal, $tv2['id_tv']);

$res = mysql_query("SELECT COUNT(*) FROM `watches`", $connect);

$row = mysql_fetch_assoc($res);

$count = $row['COUNT(*)'];

$rand_watch = rand(1, $count);

$query = mysql_query("SELECT * FROM `watches` WHERE id_watches='$rand_watch'");

$watch = mysql_fetch_array($query);

printf('<div class="item-product">

<div class="title-product">

%s

</div>

<img src="images/product/watches/%s" class="img-product">

<div class="text-product">

Смарт-часы %s, производитель %s.<br>Цвет %s, продолжительность работы %s

</div>

<div class="button-wrap">

<a href="watch-view?id=%s">

<button class="view-product-btn">Посмотреть</button>

</a>

</div>

</div>',

$watch['name'], $watch['img'], $watch['name'], $watch['manufacturer'], $watch['color'], $watch['running_time'], $watch['id_watches']);

$res = mysql_query("SELECT COUNT(*) FROM `coffee`", $connect);

$row = mysql_fetch_assoc($res);

$count = $row['COUNT(*)'];

$rand_coffee = rand(1, $count);

$query = mysql_query("SELECT * FROM `coffee` WHERE `id_coffee`='$rand_coffee'");

$coffee = mysql_fetch_array($query);

printf('<div class="item-product">

<div class="title-product">

%s

</div>

<img src="images/product/coffee/%s" class="img-product">

<div class="text-product">

Кофемашина %s %s.<br>Цвет %s, мощность %s Вт, объем %s л

</div>

<div class="button-wrap">

<a href="coffee-view?id=%s">

<button class="view-product-btn">Посмотреть</button>

</a>

</div>

</div>',

$coffee['name'], $coffee['img'], $coffee['manufacturer'], $coffee['name'], $coffee['color'], $coffee['power'], $coffee['volume'], $coffee['id_coffee']);

?>

</div> <!-- nav-left -->

ПРИЛОЖЕНИЕ 2

Листинг файла tv.php

include "connect.php";

$manufacturers = array("Panasonic", "LG", "Samsung", "DEXP", "Philips", "Thomson");

$current_manufacturer = "";

if(isset($_GET["manufacturer"])) {

$current_manufacturer = $manufacturers[$_GET["manufacturer"]-1];

$query = mysql_query("SELECT * FROM `tv` WHeRE manufacturer='$current_manufacturer'");

$tv = mysql_fetch_array($query);

$current_manufacturer = "> " . $current_manufacturer;

}

else {

$query = mysql_query("SELECT * FROM `tv` ORDER BY `id_tv` DESC");

$tv = mysql_fetch_array($query);

}

$res = mysql_query("SELECT COUNT(*) FROM `tv` ORDER BY `id_tv` DESC", $connect);

$row = mysql_fetch_assoc($res);

$count = $row['COUNT(*)'];

Размещено на Allbest.ru