Размещено на http://www.allbest.ru/

Пояснительная записка

К курсовой работе по дисциплине

«Базы данных»

Тема: «Сайт для танцевальной группы c элементами рекламы»



Аннотация

Сайт находится на бесплатном хостинге.

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



Введение

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

В первом разделе отчёта представлено определение самого термина «База Данных» и «Веб сайт», происхождение и подразделы.

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

Третий раздел отчёта - метод составления базы данных в sql и сайта, пошаговый алгоритм.

Четвёртый раздел содержит пособие по эксплуатации сайта.

В пятом разделе находится анализ выполнения работы и скриншоты сайта.

В листинге представлен полный код сайта, где расположены по порядку все файлы с краткими комментариями.



Определение терминов

В литературе предлагается множество определений понятия «база данных», отражающих скорее субъективное мнение тех или иных авторов, однако общепризнанная единая формулировка отсутствует.

Определения из международных стандартов:

База данных -- совокупность данных, хранимых в соответствии со схемой данных, манипулирование которыми выполняют в соответствии с правилами средств моделирования данных.

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

Определения из авторитетных монографий:

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

База данных -- некоторый набор перманентных (постоянно хранимых) данных, используемых прикладными программными системами какого-либо предприятия.

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

В определениях наиболее часто (явно или неявно) присутствуют следующие отличительные признаки:

БД хранится и обрабатывается в вычислительной системе.

Таким образом, любые вне компьютерные хранилища информации (архивы, библиотеки, картотеки и т. п.) базами данных не являются.

Данные в БД логически структурированы (систематизированы) с целью обеспечения возможности их эффективного поиска и обработки в вычислительной системе.

Структурированность подразумевает явное выделение составных частей (элементов), связей между ними, а также типизацию элементов и связей, при которой с типом элемента (связи) соотносится определённая семантика и допустимые операции.

БД включает схему, или метаданные, описывающие логическую структуру БД в формальном виде (в соответствии с некоторой метамоделью).

«Постоянные данные в среде базы данных включают в себя схему и базу данных. Схема включает в себя описания содержания, структуры и ограничений целостности, используемые для создания и поддержки базы данных. База данных включает в себя набор постоянных данных, определённых с помощью схемы. Система управления данными использует определения данных в схеме для обеспечения доступа и управления доступом к данным в базе данных».

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

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

Сайт (от англ. website: web -- «паутина, сеть» и site -- «место», буквально «место, сегмент, часть в сети») -- совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом).

Страницы сайтов -- это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением стилей на языке CSS, что позволяет централизовать в определенном файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.

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

HTML (от англ. HyperText Markup Language -- «язык гипертекстовой разметки») -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

JavaScript -- прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript[~ 1].

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

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами[4]. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке[~ 2][5].

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation[6].

Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

PHP (англ. PHP: Hypertext Preprocessor -- первоначально Personal Home Page Tools -- «Инструменты для создания персональных веб-страниц»; произносится пи-эйч-пи) -- скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

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

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

MySQL является идеальным решением для малых и средних приложений. Исходники сервера компилируются на множестве платформ. Наиболее полно возможности сервера проявляются на Unix-серверах, где есть поддержка многопоточности, что дает значительный прирост производительности.

Краткий перечень возможностей MySQL.

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

2. Количество строк в таблицах может достигать 50 млн.

3. Быстрое выполнение команд. Возможно MySQL самый быстрый сервер из существующих.

4. Простая и эффективная система безопасности.

CSS

Основным понятием CSS является стиль - т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Мы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

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

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

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

Постановка задачи

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

Для этого следует:

а) Создать базу данных в MySQL или в phpMyAdmin, в которой мы создаём шаблон для удобного занесения информации в БД. Заносим определённую информацию в нужные поля и сохраняем.

б) Разработать веб сайт где:

- Подключиться к созданной БД в SQL;

- Вывести внесённую в БД информацию на экран ;

- Разработать удобный интерфейс сайта, для удобного просмотра информации.

- По возможности разнообразить странички фотографиями танцоров и выступлений.

Разработка алгоритмов решения задачи

1. Создание БД в phpMyAdmin

В первую очередь создаём базу данных под названием «performers» .

Размещено на http://www.allbest.ru/

galery: (таблицу «галерея» создал для того, чтобы посетитель мог просмотреть изображения с группой)

id	img

perforers: создал для того, чтобы пользователь имел понятие о каждом танцоре

id	picture	name	information

После того как мы смоделировали наши таблицы приступаем к их созданию. Заходим в phpMyAdmin. В адресной строке набираем http://localhost/phpMyAdmin/

Когда вы вошли, введите имя БД, и нажмите кнопку "Create":

Для создания таблицы щёлкните вкладку "Databases" и выберите БД, щёлкнув на ней:

Затем появится бокс "Create new table in database", где вы вводите имя таблицы и количество полей и нажимаете "Go".

Создадим таблицу с именем “performers”, которая содержит 4 поля:



Для поля "id" устанавливаем в столбце Index значение PRIMARY KEY

Для того, чтобы значения поля id автоматически наращивалось (поле типа Счетчик), можно в столбце конструктора AUTO_INCREMENT (A_I) поставить галочку.

Примечание: Название полей не должно содержать пробелов.

Закончив создание структуры таблицы, нажмите SAVE.

Для заполнения данными таблицы выберите на панели Insert.

Заполните данными в столбце, вводя их в столбец Value.



Нажмите GO.

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

По такому же принципу создаём и заполняем остальные таблицы.

2. Создание веб сайта с подключением к созданной БД

Для разработки сайта нам нужно визуально представить свой будущий сайт и его работу.

Наш сайт состоит из файлов “.php”, “.html”, “.css”, “.js” и изображений.

В папке menu находятся “.css”, “.js” код выпадающего меню сайта.

Подключаемся мы к БД с помощью следующих строк:

//Подключение к SQL

$servername = "sql-4.radyx.ru";

$username = "gjin19622";

$password = "sqf3fo43pg";

$dbname = "gjin19622";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

Сайт состоит из 7 страниц ( 7 файлов “.php”, “.html”) и файлов “.css”, “.js”.

1 файл “index.html” содержит в себе главную страницу сайта.

2 файл “news.php” подключается к базе данных ”performers” . и выводит все новости на экран.

3/4 те же функции выполняют файлы “crew.php” & ”galery.php”.

5 файл “about.html”, содержит 3 другие страницы.

6/7/8 galery.php, crew.php, history.html

9 Все размеры таблицы, цвет, шрифт, отступы, и даже цветовая гамма интерфейса, всё задано в файле “style.css”

10 Код выпадающего меню находится в файле “.js”

Краткое пособие по эксплуатации сайта:

После того как создали базу данных можно переходить к созданию сайта.

Наш сайт содержит 7 вкладок:

· Главная - где нас приветствуют на этом сайте;

· Новости - как написано выше, что раздел новости создан для просмотра активности группы.

· Связаться - отправить сообщение.

· О нас - раздел из которого можно перейти на 3 другие страницы.

· Команда - список танцоров.

· Галерея - фотографии.

· История - история мероприятий.

На этом в принципе пользовательские возможности заканчиваются, если не учесть того, что он может попасть на официальную страничку сайта.

Для поддержания сайта в обновлённом виде необходим администратор со своим доступом на изменение, добавление или удаление той или иной информации.

· Администрация сайти осуществляется через phpmyadmin.

Правило размещения сайта на бесплатном хостинге.

1. Регистрируемся на сайте http://www.radyx.ru

2. на нашу электронную почту было выслано письмо с необходимыми логинами и паролями.

3. авторизируемся на сайте http://www.radyx.ru и переходим в раздел «настройки аккаунта»

4. Выбираем кнопку «Управление базой SQL» и импортируем туда нашу Базу данных.

5. Затем нам нужно выбрать «Управление файлами» в разделе «настройки аккаунта» и загружаем туда все файлы нашего сайта, только в файлах db.php, где идёт подключение к базе данных необходимо сменить локальные данные на те, что указаны у нас в письме на электронной почте.

Значения тегов, используемых в программе

Тэги разметки - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.

Основные тэги разметки

<HEAD> и </HEAD>. Между этими тэгами располагается информация о документе.

<TITLE> и </TITLE>. В этих тэгах заключается название странички, которое будет выведено в рамке окна программы просмотра.

<BODY> и </BODY>. "Тело" документа (текст, графика и т.д.) располагается между этими двумя тэгами, то что выводится на экран компьютера.

Параметры тэга <BODY>:

BGCOLOR - цвет фона (<BODY BGCOLOR ="#FFFFFF">)

BACKGROUND - "обои" или бэкграунд

TEXT - цвет текста

LINK - цвет гипертекстовой связи (ссылки)

VLINK - цвет уже посещенной ссылки

ALINK - цвет активной ссылки

Тэги, служащие для форматирования текста

<P> и </P> Тэги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.

<BR> Тэг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.

<HR> Тэг, служащий для логического разделения текста горизонтальной линией.

<PRE> и </PRE> Между этими тэгами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".

Параметры выравнивания

Используются в <P> и <H*>

ALIGN=LEFT - выравнивание по левому полю

ALIGN=RIGHT - выравнивание по правому полю

ALIGN=CENTER - выравнивание по центру

Тэги выравнивания

<LEFT> и </LEFT> - выравнивание по левому полю

<RIGHT> и </RIGHT> - выравнивание по правому полю

<CENTER> и </CENTER> - выравнивание по центру

Заголовки, служащие для выделения логических частей текста

<H1> и </H1> Заголовок первого уровня.

<H2> и </H2> Заголовок второго уровня.

<H3> и </H3> Заголовок третьего уровня.

<H4> и </H4> Заголовок четвертого уровня.

<H5> и </H5> Заголовок пятого уровня.

<H6> и </H6> Заголовок шестого уровня.

Тэги для выделения текста и шрифта

<B> и </B> Тэги для выделения текста (слов, букв) жирным шрифтом.

<I> и </I> Тэги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

<U> и </U> Текст, расположенный между двумя этими тэгами, будет подчеркнут.

<FONT SIZE=+n> и </FONT>

<FONT SIZE=-n> и </FONT> Тэги для изменения размера шрифта.

<FONT COLOR="#0000FF> и </FONT> Тэги для изменения цвета шрифта.

Тэги для формирования списков

<OL> и </OL> Тэги, показывающие начало и конец нумерованного списка

<UL> и </UL> Тэги, показывающие начало и конец маркированного списка.

<LI> Элемент списка

<DL> и </DL> Тэги, показывающие начало и конец глоссария.

<DT> Термин глоссария, располагается без отступа от левого поля страницы.

<DD> Описание термина, располагается с отступом от левого поля страницы.

Тэги-команды для вставки в текст объектов нетекстовой информации

<IMG SRC ="file.gif"> или <IMG SRC =" file.jpg"> - команда для вставки графического изображения

<IMG SRC =" file.wav"> - команда для вставки звукового фрагмента

<IMG SRC =" file.avi"> - команда для вставки видео фрагмента

Параметры графического изображения

WIDHT - ширина картинки в пикселях.

HEIGHT- высота картинки в пикселях.

ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру).

HSPACE - горизонтальный отступ от графического изображения.

VSPACE - вертикальный отступ.

ALT - альтернативный текст, служит для обозначения изображения.

Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет

<A HREF="fail.htm"> и </A> или <A HREF="http://www.ru"> и </A> - гиперсвязи

Таблицы

Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста

<TABLE> и </TABLE> Тэги для вставки таблицы в HTML документ

Параметры Тэга <TABLE>

BGCOLOR - цвет фона

BORDER - ширина бордюра или границы таблицы

WIDHT - ширина таблицы

Тэги разметки таблицы

<CAPTION> и </CAPTION> - название таблицы, имеет параметр ALIGN=TOP - выравнивание над таблицей и ALIGN=BOTTOM - под таблицей.

<TR> и </TR> Строчка таблицы. Может иметь параметры BGCOLOR - цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри строки; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание внутри строки таблицы.

<TD> и </TD> Столбец таблицы. Может иметь параметры BGCOLOR - цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри столбца; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN растягивание клетки на несколько столбцов, ROWSPAN - растягивание клетки на несколько строк.

<TH> и </TH> Заголовок столбца. Может иметь параметры BGCOLOR - цвет фона под названием; ALIGN=LEFT, RIGHT, CENTER - выравнивание; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN, ROWSPAN - растягивание клетки на несколько столбцов или строк; WIDHT - ширина названия.

Также обращу ваше внимание на функцию “echo<<<HERE HERE;”

Используется эта функция для вывода на экран формы HTML в php блоках. Хочу также подчеркнуть, что это функция капризная, нужно следить чтобы после echo <<<HERE и HERE; не было даже ни одного пробела. А то функция не будет работать.

Анализ результатов

В итоге был разработан сайт со следующим интерфейсом:



Удобно расположенная панель навигации с работающими вкладками



Видно, что мы выбрали вкладку «Галерея» и получили в итоге фото группы.



база данные программа тег



Заключение

В процессе выполнения данного курсового проекта я улучшил свои навыки по работе с РНР, MySQL,HTML, CSS и JavaScript.

В результате проделанной работы, я изучил основы работы MySQL баз данных и языка программирования для Интернет PHP и научился с ними работать. Так же я разработал свою базу данных и сайт, при помощи которого пользователь может просматривать записи в базе данных, а администратор может добавлять, изменять и удалять записи в базе данных через работу с БД.

В ходе разработки я также улучшил свои знания и умения по работе с HTML страницами.

Еще я убедился в том, что РНР и MySQL на самом деле очень мощные среды программирования и хранения данных и они очень быстро работают и занимают очень мало места на жестком диске.



Список литературы

· «Справочник по MySQL, PHP, JavaScript, HTML, CSS». http://www.w3schools.com/

· Сайт http://www.zvirec.com/

· http://www.wikipedia.org/



Листинг программы

Пользовательская часть:

блок header

//стиль выводимого текста задан в style.css

<header>

<img src="img/head.png">

</header>

блок nav

//выпадающее меню сделано с помощью языков javascript & CSS

<nav>

<!--<a href="home.html"> Home </a>

<a href="about.html"> About </a>

<a href="news.html"> News </a>

<a href="contact.html"> Contact </a> -->

<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a href="index.html"> Home </a></li>

<li><a href="about.html"> About </a>

<ul>

<li><a href="galery.php"> Galery </a></li>

<li><a href="crew.php"> Crew </a></li>

<li><a href="history.html"> History </a></li>

</ul>

</li>

<li><a href="news.php"> News </a></li>

<li><a href="contact.html"> Contact </a></li>

</ul>

<br style="clear: left" />

</div>

</nav>

блок section

<section>

<h1> Who We Are </h1>

<img src="img/img1.jpg" style="max-height:300px; float: right; ">

<p> Maybe you saw us on America's Got Talent in 2011 or maybe you've heard about us through one of our international appearances or saw our Off-Broadway dance show at New World Stages in NY, NY. No matter how you found us, we're just glad you did!</p>

<p> iLuminate is quickly becoming a household name, and why not when we were called “the best new act in America” during our run on America's Got Talent?</p>

<p> iLuminate isn't just a dance show. We're a company based on the fusion of technology and dance.</p>

<p> We aim to create a visual display unlike anything you've ever seen, using dancers in electrified glow-in-the-dark suits to perform choreographed dances and illusions on a darkened stage. It's an experience that's completely unique to our brand and incomparable to any other dance show.</p>

<p> iLuminate is the brainchild of Miral Kotb, a woman whose true passions in life are dance and software engineering, which is why you'll see her both manning the keyboard and dancing on stage in our archive of video performances (which you absolutely should check out).

<p> In 2009, Miral combined her two passions to create our patented iLuminate technology, the tool that enables performers, choreographers, engineers, technicians, stylists and artistic directors to produce explosive performances with customized wireless lighting programs. The results are extraordinary lighting effects choreographed with phenomenal dance moves that take viewers on an exhilarating ride.</p>

<h1> Where You Can See Us </h1>

<img src="img/img2.jpg" style="max-height:300px; float: left; ">

<p> The iLuminate technology has been snapped up by A-listers in music, hitting the stage with Grammy-winning superstars such as Chris Brown, Christina Aguilera, The Black Eyed Peas, and David Guetta, among others.</p>

<p> We didn't stop on America's Got Talent while making television our domain. You can find us on other song & dance shows like Dancing with the Stars and the X-Factor, not to mention in a whole slew of music awards performances including the American Music Awards, MTV's Video Music Awards, BET Awards, The Nickelodeon Awards, Billboard, and Latin Billboard Awards.</p>

<p> We also love our daytime tv. Who doesn't? That's why we've spent time with The Ellen DeGeneres Show, The Wendy Williams Show, and Good Morning America.</p>

<p> But, as popular as we may be, we do have one long-standing relationship - our show Artist of Light at New World Stages in New York. Six nights a week (and two afternoons!) we hit the stage for an hour-long story told with lights, dance, and at least one giant, man-eating serpent! If you haven't seen it yet, we recommend you make it a priority.</p>

<h1> What's on the Horizon </h1>

<img src="img/img3.jpg" style="max-height:300px; float: right; ">

<p>As always, there's a ton of good stuff in the works here at iLuminate. After the exciting undertaking of launching our new opening number, written for us by Chris Brown, on October 8, 2014, we're promoting the single and trying to get butts in seats to share the mind-blowing new pieces of our show with the world.</p>

<p>In fact, there are whispers backstage about organizing a tour, maybe as soon as 2015! We want to spread the light far and wide.</p>

<p>We also have some merchandise coming to cyberspace in the very near future. Think iLuminate tech hoodies and branded tee shirts, toys and accessories all with our unique flare.</p>

<p>To stay in the loop, be sure to join our mailing list to get the jump on anything new! And, of course, to hear all about our world travels, our awesome dance sequences, and our appearances on your tv.</p>

<div id="footer-cleaner">

</div>

</section>

Файл index.html

//в php блоках мы ссылаемся на наши блоки сайта, описанные выше.

<!DOCTYPE html>

<html>

<head>

<title>HTML 5 макет страницы с фиксированной шириной</title>

<link rel="stylesheet" type="text/css" href="style/style.css">

<link rel="stylesheet" type="text/css" href="menu/jqueryslidemenu.css" />

<!--[if lte IE 7]>

<style type="text/css">

html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

</style>

<![endif]-->

<script type="text/javascript" src="menu/jquery.min.js"></script>

<script type="text/javascript" src="menu/jqueryslidemenu.js"></script>

</head>

<body>

<div class="content">

<header>

<img src="img/head.png">

</header>

<nav>

<!--<a href="home.html"> Home </a>

<a href="about.html"> About </a>

<a href="news.html"> News </a>

<a href="contact.html"> Contact </a> -->

<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a href="index.html"> Home </a></li>

<li><a href="about.html"> About </a>

<ul>

<li><a href="galery.php"> Galery </a></li>

<li><a href="crew.php"> Crew </a></li>

<li><a href="history.html"> History </a></li>

</ul>

</li>

<li><a href="news.php"> News </a></li>

<li><a href="contact.html"> Contact </a></li>

</ul>

<br style="clear: left" />

</div>

</nav>

<section>

<h1> Who We Are </h1>

<img src="img/img1.jpg" style="max-height:300px; float: right; ">

<p> Maybe you saw us on America's Got Talent in 2011 or maybe you've heard about us through one of our international appearances or saw our Off-Broadway dance show at New World Stages in NY, NY. No matter how you found us, we're just glad you did!</p>

<p> iLuminate is quickly becoming a household name, and why not when we were called “the best new act in America” during our run on America's Got Talent?</p>

<p> iLuminate isn't just a dance show. We're a company based on the fusion of technology and dance.</p>

<p> We aim to create a visual display unlike anything you've ever seen, using dancers in electrified glow-in-the-dark suits to perform choreographed dances and illusions on a darkened stage. It's an experience that's completely unique to our brand and incomparable to any other dance show.</p>

<p> iLuminate is the brainchild of Miral Kotb, a woman whose true passions in life are dance and software engineering, which is why you'll see her both manning the keyboard and dancing on stage in our archive of video performances (which you absolutely should check out).

<p> In 2009, Miral combined her two passions to create our patented iLuminate technology, the tool that enables performers, choreographers, engineers, technicians, stylists and artistic directors to produce explosive performances with customized wireless lighting programs. The results are extraordinary lighting effects choreographed with phenomenal dance moves that take viewers on an exhilarating ride.</p>

<h1> Where You Can See Us </h1>

<img src="img/img2.jpg" style="max-height:300px; float: left; ">

<p> The iLuminate technology has been snapped up by A-listers in music, hitting the stage with Grammy-winning superstars such as Chris Brown, Christina Aguilera, The Black Eyed Peas, and David Guetta, among others.</p>

<p> We didn't stop on America's Got Talent while making television our domain. You can find us on other song & dance shows like Dancing with the Stars and the X-Factor, not to mention in a whole slew of music awards performances including the American Music Awards, MTV's Video Music Awards, BET Awards, The Nickelodeon Awards, Billboard, and Latin Billboard Awards.</p>

<p> We also love our daytime tv. Who doesn't? That's why we've spent time with The Ellen DeGeneres Show, The Wendy Williams Show, and Good Morning America.</p>

<p> But, as popular as we may be, we do have one long-standing relationship - our show Artist of Light at New World Stages in New York. Six nights a week (and two afternoons!) we hit the stage for an hour-long story told with lights, dance, and at least one giant, man-eating serpent! If you haven't seen it yet, we recommend you make it a priority.</p>

<h1> What's on the Horizon </h1>

<img src="img/img3.jpg" style="max-height:300px; float: right; ">

<p>As always, there's a ton of good stuff in the works here at iLuminate. After the exciting undertaking of launching our new opening number, written for us by Chris Brown, on October 8, 2014, we're promoting the single and trying to get butts in seats to share the mind-blowing new pieces of our show with the world.</p>

<p>In fact, there are whispers backstage about organizing a tour, maybe as soon as 2015! We want to spread the light far and wide.</p>

<p>We also have some merchandise coming to cyberspace in the very near future. Think iLuminate tech hoodies and branded tee shirts, toys and accessories all with our unique flare.</p>

<p>To stay in the loop, be sure to join our mailing list to get the jump on anything new! And, of course, to hear all about our world travels, our awesome dance sequences, and our appearances on your tv.</p>

<div id="footer-cleaner">

</div>

</section>

</div>

<footer>

<div class="copyright">&copy; Eugeniu Cuzmin ia-132 Курсовая работа на тему сайт для танцевальной группы</div>

</footer>

</body>

</html>

Далее будет только тот код, которым отличаются файлы между собой.

Файл about.html

// изображения которые так же являются ссылками

<section>

<a href="galery.php">

<img src="galery/1.jpg" width="270" height="270" title="galery" border="0" style="margin:10px; padding:10px; float: left;">

</a>

<a href="crew.php">

<img src="galery/9.jpg" width="270" height="270" title="crew" border="0" style="margin:10px; padding:10px; float: left;">

</a>

<a href="history.html">

<img src="galery/11.jpg" width="270" height="270" title="history" border="0" style="margin:10px; padding:10px; float: left;">

</a>

<div id="footer-cleaner">

</div>

</section>

Файл crew.php

// подключение к БД и к таблице performers с последующим выводом на экран танцоров

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "performers";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "SELECT id, picture, name, information FROM performers";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

echo "<table>";

// output data of each row

while($row = $result->fetch_assoc()) {

echo "<tr><td>".$row["picture"]."</td><td>".$row["name"]."</td><td>".$row["information"]."</td></tr>";

}

echo "</table>";

} else {

echo "0 results";

}

$conn->close();

?>

Файл galery.php

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "performers";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "SELECT id, img FROM galery";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

// output data of each row

while($row = $result->fetch_assoc()) {

echo $row["img"];

}

} else {

echo "0 results";

}

$conn->close();

?>

Файл contact.php

//форма для того чтобы заказать выступление группы

<form method="post" action="order.php">

<p>

Name:<br>

<input type="text" name="name" >

</p>

<p>

Email:<br>

<input type="text" name="email" >

</p>

<p>

City:<br>

<input type="text" name="city" >

</p>

<p>

Date:<br>

<input type="text" name="date" >

</p>

<p>

Type of event:<br>

<input type="text" name="event" >

</p>

<p> Aditional information:<br>

<textarea name="info" cols="45" rows="5"></textarea>

</p>

<p>

<input type="submit" value="Order" width="20">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="Stop">

</p>

</form>

Файл order.php отправляет информацию с формы на почту создателя сайта

<!DOCTYPE html>

<html>

<head>

<title> Order </title>

</head>

<body>

<?php

// Получатель

$strEmail = "gjin19@mail.ru";

// Получить пользовательские вводы

$strSubject = $_POST["email"];

$strMessage = $_POST["event"];

mail($strEmail,$strSubject,$strMessage);

echo "We will contact you.";

?>

</body>

</html>

Файл style.css для меню

.jqueryslidemenu{

font: bold 12px Verdana;

background: grey; /* `оновый цвет всего меню */

width: 100%; /* Ўирина меню */

}

/* ”бираем пол¤ , отступы и маркеры дл¤ основного списка */

.jqueryslidemenu ul{

margin: 0;

padding: 0;

list-style-type: none;

}

/*¬ыстраиваем элементы списка горизонтально*/

.jqueryslidemenu ul li{

position: relative;

display: inline;

float: left;

}

/*--тили ссылок пунктов списка верхнего уровн¤*/

.jqueryslidemenu ul li a{

display: block;

background: grey; /*`оновый цвет ¤чеек меню в обычном состо¤нии*/

padding:8px 12px; /*ќтступы элементов меню: сверху-снизу и справа-слева*/

border-right: 5px solid #000; /*--тиль перегородки между ¤чейками*/

text-decoration: none;

}

* html .jqueryslidemenu ul li a{ /*'ак специально дл¤ IE6, чтобы достичь корректного отображени¤*/

display: inline-block;

}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{

color: #FF8E00; /*чвет текста ¤чеек меню*/

}

.jqueryslidemenu ul li a:hover{

background: black; /* чвет фона ¤чеек меню при наведении*/

color: #FF8E00;/* чвет текста меню при наведении*/

}

.jqueryslidemenu ul li ul{

position: absolute;

left: 0;

display: block;

visibility: hidden;

}

.jqueryslidemenu ul li ul li{

display: list-item;

float: none;

}

.jqueryslidemenu ul li ul li ul{

top: 0;

}

/* --тили дл¤ подменю */

.jqueryslidemenu ul li ul li a{

background:#666666; /* фоновый цвет подменю в обычном состо¤нии */

font: normal 12px Verdana; /* стиль шрифта элементов подменю */

width: 140px; /*ширина подменю*/

padding: 6px; /*отступы*/

margin: 0;

border-top-width: 0;

border-bottom: 1px solid gray; /* стиль перегородки между пунктами подменю */

}

.jqueryslidemenu ul li ul li a:hover{

background: black; /* фоновый цвет подменю при наведении */

color: #FFFF00; /* цвет текста подменю при наведении */

}

/* ######### --тили дл¤ изображений (стрелочки вниз и вправо) ######### */

.downarrowclass{

position: absolute;

top: 12px;

right: 7px;

}

.rightarrowclass{

position: absolute;

top: 7px;

right: 5px;

}

Файл style.css для страниц сайта

html, body {

height: 100%;

margin: 0px;

min-height: 100%;

padding: 0px;

}

html {

background: E6E9FF;

}

body {

background: #B0B0B0;

}

header {

background: #000000;

height: 60px;

}

section{

padding:20px;

}

footer {

background: black;

bottom: 0;

height: 25px;

line-height: 25px;

margin: -25px auto auto auto;

width: 1024px;

}

h1{

color:#FF8E00;

}

p {

margin: 0;

text-indent: 20px;

line-height:140%;

overflow: auto;

}

.content {

background-color: #fff;

height: auto !important;

height: 100%;

margin: auto;

min-height: 100%;

width: 1024px;

border-width:3px solid black;

}

#footer-cleaner {

clear: both;

height: 25px;

}

.copyright {

float: left;

color: red;

}

.site-developer {

float: right;

color: red;

}

файл jqueryslidemenu.js

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):

var arrowimages={down:['downarrowclass', 'menu/down.gif', 23], right:['rightarrowclass', 'menu/right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){

jQuery(document).ready(function($){

var $mainmenu=$("#"+menuid+">ul")

var $headers=$mainmenu.find("ul").parent()

$headers.each(function(i){

var $curobj=$(this)

var $subul=$(this).find('ul:eq(0)')

this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}

this.istopheader=$curobj.parents("ul").length==1? true : false

$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})

$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(

'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])

+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])

+ '" style="border:0;" />'

)

$curobj.hover(

function(e){

var $targetul=$(this).children("ul:eq(0)")

this._offsets={left:$(this).offset().left, top:$(this).offset().top}

var menuleft=this.istopheader? 0 : this._dimensions.w

menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft

if ($targetul.queue().length<=1) //if 1 or less queued animations

$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)

},

function(e){

var $targetul=$(this).children("ul:eq(0)")

$targetul.slideUp(jqueryslidemenu.animateduration.out)

}

) //end hover

}) //end $headers.each()

$mainmenu.find("ul").css({display:'none', visibility:'visible'})

}) //end document.ready

}

}

//build menu with ID="myslidemenu" on page:

jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

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