Глава 2. Разработка web – сайта для мебельной компании ооо “Мебель лидер”

2.1. Разработка сайта

Дизайн сайта – это совокупность графических элементов, шрифтов и цветов, реализованных на сайте.

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

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

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

Эксклюзивность и оригинальность сайта.

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

Страницы сайта должны быстро загружаться, и иметь приличный вид даже при отключенных рисунках. Кроме того, сайт должен быть совместим с наиболее популярными браузерами (Internet Explorer, Opera, Mozilla Firefox).

И самое главное: сайт – лицо компании!

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

При разработки дизайна для информационного сайта «Мебель Лидер» использовался графический редактор Adobe Photoshop.

Ниже представлен дизайн-макет шаблона нашего сайта:

Рис.7 Общий вид сайта

Так же будут использованы следующие инструменты разработки:

HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

Т.е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т.е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением .htm или .html.

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

Документ в формате HTML состоит из трех основных частей:

• cтрока, содержащая информацию о версии HTML;

заголовочная часть (определяется тегом <HEAD>);

• тело, которое включает собственно содержимое документа (определяется тегом <BODY> или тегом <FRAMESET>).

Кроме того, вторая и третья части должны охватываться тегом <HTML>.

Заголовочная часть содержит информацию о документе в целом, которая не отображается в окне браузера. В теле находится непосредственно информационное содержание страницы, вместе с описанием своего форматирования – то что выводится в окне браузера. Вместо тела документ может содержать описание фреймов (тег <FRAMESET>). Следующий пример демонстрирует теги, образующие скелет простейшего документа:

HTML:

<html>

<head>

<title>Простой HTML-документ</title>

</head>

<body text="#0000ff" bgcolor="#ffffff">

<h1>Заголовок документа</h1>

<p> Пример простого документа</p>

</body>

</html>

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

Теги языка HTML

<a>

Якорь – создает ссылку на Internet-ресурс, указанный обязательным атрибутом href.

<b>

Заключенный в теги текст отображается жирным шрифтом.

<base>

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

Относительные адреса разрешаются в соответствии с базовым URL. Тег <BASE> при помощи атрибута href позволяет явно указать базовый URL документа.

<big>

Заключенный в теги текст отображается шрифтом большего размера.

<body>

Определяет тело документа. Атрибут text позволяет задать цвет основного текста в документе. Атрибуты bgcolor и background задают цвет фона и фоновое изображение соответственно. Атрибуты link, alink и vlink устанавливают цвет обычных, активных и посещенных гипертекстовых ссылок соответственно.

<br>

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

<button>

Элемент позволяет создавать кнопки в формах, действующие аналогично кнопкам, создаваемым с помощью элемента <INPUT>, но обеспечивающим более богатые возможности представления. Кнопки могут иметь содержимое в виде изображения или текста.

<code>

Заключенный в теги текст представляет собой отрывок текста программы и отображается шрифтом фиксированной ширины.

<div>

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

<font>

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

<form>

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

<frame>

Определяет один фрейм в составе тега <FRAMESET>. Атрибут src задает путь к HTML-файлу, который должен быть загружен во фрейм.

<h1…h6>

Заключенный в теги текст представляет собой заголовок соответствующего уровня (от 1 до 6).

<html>

Обозначает начало и конец HTML-документа.

<i>

Заключенный в теги текст отображается наклонным шрифтом.

<img>

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

<input>

Создает управляющие элементы форм, тип которых определяется атрибутом type:

button – настраиваемая кнопка;

checkbox – элемент ввода флажок (флажки работают как переключатели, имеющие состояние "включен" и "выключен", причем одновременно может быть включено несколько элементов);

file – позволяет передавать на обработку вместе с формой внешние файлы;

hidden – элемент формы, не отображаемый браузером (может использоваться для передачи на сервер специальной информации, связанной с формой, которую не может изменить пользователь);

image – позволяет использовать изображение в качестве замены

кнопки типа submit;

password – элемент ввода текста – вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек), часто используется для ввода паролей;

radio – кнопка-переключатель, в отличии от элемента checkbox в группе переключателей во включенном состоянии может находиться только один (группу составляют элементы, имеющие одно имя);

reset – кнопка, очищающая содержимое элементов формы (или восстанавливающая их значения по умолчанию);

submit – создает кнопку, которая отсылает информацию, содержащуюся в форме, на обработку серверу;

text – элемент ввода текста.

<label>

Используется для связывания информации с элементами управления.

Каждый элемент <LABEL> должен быть ассоциирован только с одним элементом управления формы.

<p>

Заключенный в теги текст представляет собой абзац.

<script>

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

<span>

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

<style>

Позволяет помещать описание каскадных таблиц стилей в раздел <HEAD>документа.

<table>

Определяет начало и конец таблицы. Атрибуты height и width позволяют задать общую высоту и ширину таблицы соответственно (в пикселах или процентах от размера окна браузера).

<title>

Каждый документ HTML должен иметь элемент <TITLE> в разделе <HEAD>, который используется для идентификации его содержимого.

Создание и использование стилей CSS

Каскадные таблицы стилей (CSS, Cascade Style Sheet) являются достаточно новой технологией в web - дизайне. Являясь аналогами стилей в программах верстки и мощных текстовых процессорах, они позволяют авторам использовать типографские приемы определения представления и размещения к элементам на web - странице.

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

Таблицы стилей состоят из набора правил, описывающих формат представления элементов документа. Правило представляет собой объявление способа отображения элементов страницы, и записывается в следующем формате: селектор {правило: значение; правило: значение;}.

Предположим, что нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:

<P><FONT color="blue">Это синий текст</FONT></P>

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас останутся только теги логического форматирования текста:

<P class="bluetext">Это синий текст</P>

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

Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

<H1 class="bluetext">Это синий цвет</H1>

<CENTER class="bluetext">Это синий цвет</CENTER>

Это<B class="bluetext">жирный синий</B>текст

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

<H7><B>Этот</B> текст будет синим</H7>

<P>А<B>этот</B> - не будет!</P>

Более того, вы можете встроить определение стиля прямо в тег:

<P style="color: blue">Это синий текст</P>

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

<H1 id="headerofdocument">Это заголовок документа</H1>

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>:

<Style [type="text/css"]>

. . .

</STYLE>

Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css.

Таблицу стилей можно вынести в отдельный файл и использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу стилей:

<LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">

Язык программирования PHP

PHP (читается как пи-эйч-пи) - один из популярнейших языков программирования в сети Интернет. Дословно аббревиатура переводиться как Personal Home Page. Данный язык существует с 1994 года. Его создателем является Расмус Лердорф (Rasmus Lerdorf). История создания достаточно банальна, но теперь этот язык использует более 10,5 миллиона сайтов и других различных проектов в сети Internet по всему миру. Первые версии скрипт-движка использовались исключительно только в личных целях автора. PHP начал свою жизнь как ненавязчивая CGI-оболочка написанная на Perl. Небольшое отступление: СGI (Common Gateway Interface) - общий шлюзовой интерфейс - является стандартом, который предназначен для создания серверных приложений HTTP. Такое приложение, которое называют шлюзом или CGI-программой, запускается www-сервером в реальном времени. Сервер передает запросы пользователя CGI-программе, которая их обрабатывает и возвращает результат своей работы на экран пользователя. Таким образом, Интернет-серфер получает динамическую информацию, которая может изменяться в результате влияния различных факторов. Сам шлюз может быть написан на C/C++, Fortran, Perl, TCL, Unix Schell, Visual Basic, Apple Script и других подобных языках. Но в случае с РНР, для написания его в первоначальном варианте был выбран язык Perl. Из воспоминаний автора: Я написал это в течение полудня в промежутке между деловыми встречами. Тогда я нуждался в быстром инструменте, чтобы иметь представление о тех людях, которые читали мое резюме, размещенное в Сети. Даже не предполагалось, что оболочка будет использоваться кем-то кроме меня. Сервер, на котором располагалось мое резюме, был постоянно перегружен. Я переписал Perl-оболочку на C, чтобы избавиться от значительных непроизводительных затрат: Люди, которые использовали тот же сервер, натолкнулись на мою оболочку и попросили ее для использования у себя". Уже через год появилась первая версия продукта, и уже тогда она имела большую популярность. Но Расмус понимал, что эта версия обладала очень скромными возможностями. На тот момент в функции входили: простейший анализатор кода, несколько команд и некоторые утилиты, подходящие только персональным страницам (гостевая книга, счетчик и т.п.). Процесс создания сильно развивался и уже к серидине 1995 года PHP был основательно переработан. Был добавлен Form Interpreter (FI), для упрощения обработки данных, вводимых с помощью форм. Также появилась поддержка mSQL, позволившая работать с базами данных. В таком виде появилась вторая версия продукта, которая носила название PHP/FI Version 2. После этого люди еще больше заинтересовались и стали сами писать библиотеки, расширяя функциональность языка. Итак, на сегодняшний день РНР, несмотря на свое скромное название (Personal Home Page - персональная домашняя страница), - это мощный кроссплатформенный набор средств, который располагается на сервере и предназначается для обработки кода, встраиваемого в html-документы. Благодаря этому, появляется возможность создавать динамические Web-страницы. То есть вы создаете их как обычно, используя язык HTML и вставляя в документ, по мере необходимости, РНР-команды. Файлы, созданные таким образом, хранятся на сервере. Когда посетитель обращается к вашей страничке, РНР обрабатывает встроенные в нее команды и выдает результат браузеру пользователя - точно так же, как это делает CGI-программа, написанная на С или Perl. Только в отличие от последней, РНР имеет ряд преимуществ: - создание и отладка скриптов PHP значительно проще, чем отладка и создание скриптов на других языках, так как РНР-команды просто вставляются в текст html-документа, отпадает необходимость в различных IDE (интегрированная среда разработки); - для решения разных специфических задач не нужно писать и отлаживать многочисленные маленькие CGI-программы, что сводит к минимуму время доступа к вашим страницам, а также продолжительность разработки страниц и сайта в целом. Вместе с тем, РНР обладает огромным набором функций и большой гибкостью, которые могут быть значительно расширены с помощью дополнительных внешних библиотек. Вы можете управлять доступом к вашим страницам, создавать и обрабатывать базы данных любой сложности, генерировать изображения или PDF-документы и тому подобное.

Синтаксис языка

Каждая команда РНР обычно начинается с тэга "<?php" и заканчивается "?>". Если вы используете несколько команд подряд, они могут быть объединены внутри одной пары тэгов - в этом случае каждую команду необходимо отделять друг от друга символом ";". В любом месте РНР-скрипта можно размещать комментарии. Для начала комментария используется символы "/*", а для его завершения - "*/". Если комментарий небольшой, удобней использовать символы "//" - тогда все, что следует за ними до конца строки, будет игнорироваться, подобно лишним символам пробела, табуляции и новой строки.

РНР позволяет использовать переменные - при этом их не нужно описывать так, как это делается в Visual Basic или Pascal. Вы просто вводите необходимую переменную там, где вам нужно и тогда, когда вам это нужно. Имена переменных начинаются с символа "$". Переменные могут быть трех типов: целые, с плавающей запятой и символьные строки. Хотя разделение на типы скорее условное, и каждая функция стремится использовать правильный тип автоматически. Например: <?php $a = 7; $b = 9.5; $c = "Hello"; ?>. Здесь переменной "а" присваивается значение "7", и она приобретает тип целочисленной. Переменная "b" обретает вещественный тип и становится равной "9,5". Строка "Hello" присваивается переменной "с", в результате чего она становится строковой.

Для отображения переменных или результатов работы скрипта используется команда echo. Вот небольшой пример рабочей страницы, для того, что бы можно было оценить, как просто включить PHP-скрипт в обычный html-документ: <?php $d = date(d.m.Y); echo "Последние обновления: $d "; ?> В результате загрузки такой страницы, РНР обработает все команды, которые находятся между специальными тэгами, и вы увидите, в данном случае, строку вроде "Последние обновления: 8.04.2004". Браузер получает чистый HTML-код и если просмотреть его, вы не найдете там никаких следов пребывания РНР.

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

Создание базы данных.

Mysql

MySQL – это одна из самых популярных и самых распространенных СУБД (система управления базами данных) в интернете. Она не предназначена для работы с большими объемами информации, но ее применение идеально дляинтернет сайтов, как небольших, так и достаточно крупных.

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

Немаловажным фактором является ее бесплатность. MySQL распространяется на условиях общей лицензии GNU (GPL, GNU Public License).

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

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

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

Приложение на РНР, использующее для хранения информации базу данных (в частности MySql) всегда работает быстрее приложения, построенного на файлах. Дело в том, что базы данных написаны на языке C++, и написать на PHP программу, которая работала бы с жёстким диском эффективнее базы данных - задача неразрешимая по определению, поскольку программы на PHP в принципе работают медленнее, чем программы на C++, так как РНР - интерпретатор, а С++ - компилятор.

Таким образом, основное достоинство базы данных заключается в том, что она берёт на себя всю работу с жёстким диском и делает это очень эффективно.

SQL - язык структурированных запросов для доступа к базам данных и их управления.

SQL может:

• выполнять запросы к базе данных

• извлекать данные из базы данных

• добавить записи в базу данных

• обновить записи в базе данных

• удалить записи из базы данных

• создавать новые базы данных

• создавать новые таблицы в базе данных

• создавать хранимые процедуры в базе данных

• настроить разрешения для таблиц

Принятые переменные:

• table_name - имя таблицы

• column_name - колонки(поля)

• value - значения

• pattern - шаблон

• database_name - имя базы данных (БД)

SQL является стандартным - но...

Несмотря на то, что SQL придерживается ANSI (Американского национального института стандартов) стандарта, существует много различных диалектов языка SQL. Вместе с тем, чтобы быть совместимым со стандартом ANSI, все они поддерживают, по крайней мере, основные команды (например, SELECT, UPDATE, DELETE, INSERT, WHERE). Большинство из реляционных баз данных имеют свои собственные расширения(функций, команд...) в дополнение к SQL стандарту!

В данном описании я буду рассматривать язык SQL в разрезе MySQL.

Чаще всего база данных содержит одну или несколько таблиц. Каждая таблица имеет определенное имя (например, "people" или "cars"). Таблицы содержат поля (колонки) с записями(строки). Сейчас забежим немного наперед, то есть создадим сразу БД, табличку и заполним её.

Все действия в базе данных осуществляется с помощью SQL запросов.

Например следующий SQL запрос выведет все записи из таблицы "people" :

SELECT * from people;

(Для SQL не важен регистр символов, заглавные, прописные, все равны (SELECT и select - одно и тоже), также важно помнить что MySQL требует чтобы каждый запрос заканчивался символом ";")

Для более легкого запоминания и понимания можно запросы разделить на 3 типа: DML(Data Manipulation Language) - управление данными(УД), и определение(вид) данных DDL(Data Definition Language) (ОД).

И еще пожалуй системные запросы (СЗ)DCL (Data Control Language).Также необходимо всегда иметь под рукой информацию о том какие типы данных применяются в таблицах MySQL и в конце концов определить пользователей и их права.

К УД можно отнести:

SELECT - извлечение(выборка) данных из БД

UPDATE - обновление данных в БД

DELETE - удаление данных из БД

INSERT INTO - вставка(заполнение) новыми данными БД

к ОД:

CREATE DATABASE - создать новую БД

CREATE TABLE - создать новую таблицу

ALTER TABLE - изменить таблицу

DROP TABLE - удалить таблицу

CREATE INDEX - создать индекс (поисковый ключ)

к СЗ:

show processlist - показать процессы БД

Создание БД

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

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

Создание таблицы

Запуск phpMyAdmin происходит по адресу http://localhost/phpMyAdmin/index.php, на первой странице содержится текстовое поле для ввода имени новой базы данных (БД), здесь же можно переключить интерфейс на русский язык (рис. 8).

Рис. 8. Настройка русского языка

Вводим имя подходящей базы данных и нажимаем кнопку «Создать». После чего БД с указанным именем будет создана (рис. 9).

Рис. 9. Создание новой базы данных

Если база уже создана, ее следует выбрать из списка в левом фрейме (рис. 10).

Рис. 10. Выбор текущей базы данных

БД с именем mysql создается автоматически для внутренних целей, поэтому она будет присутствовать в списке баз.

Теперь необходимо создать таблицы для нашего сайта со следующей структурой:

Таблица, содержащая данные администратора сайта, для входа в админ панель – admin

Рис. 11. Таблица данных администратора

Таблица, содержащая информацию о Новостях фирмы - ap_articles

Рис. 12. Таблица данных новостей

Таблица, содержащая категории продукции - mb_cat

Рис. 13. Таблица данных категорий продукции

В этой таблице находиться информации о продукции - mb_catalogue

После ввода имени каждой из этих таблиц, появится таблица для редактирования полей. Введите имена полей, укажите их тип, длину поля, для первых двух полей задайте атрибут UNSIGNED, который означает, что числа будут только положительными. Обязательно надо задать для первого поля id первичный ключ и, чтобы не изменять значение поля самим, — параметр auto_increment (рис. 14). Для удобства можно добавить к таблице комментарий.

Рис.14. Добавление нового поля

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

Рис.15. Добавление данных

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

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

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

До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом и подвергнуты остракизму. Любое использование фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам? Только переходить к таблицам. Поэтому вёрстка с использованием таблиц на долгое время стала определенным стандартом.

И как только таблицы не применяются — и рамки с помощью них делают, и модульные сетки задают, и цветной фон создают, и элементы выравнивают по разным краям. Конечно, это противоречит идеологии разделения оформления и содержания, но о такой «мелочи» никто и не вспоминает.

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

Преимущества и недостатки слоёв. Слои удобно задавать и настраивать через стили. Возможности стилей гораздо шире, чем традиционного html и расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код. Справедливости ради, отметим, что данное утверждение можно отнести и к любым другим элементам веб-страницы, а не только к стилям. Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.

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

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

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

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

Работа с таблицами менее гибкая, чем со стилями, при использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

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

Усложненная верстка при большом количестве таблиц. Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Macromedia Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

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

Вся информация храниться в БД MySQL, которая является одной из множества ПО для работы с SQL базами данных.

SQL – это структурированный язык запросов, созданный для управления реляционными БД. Он обладает широким перечнем возможностей, например, создать таблицу, редактировать и удалять данные, производить запросы из таблиц и многое другое.

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

Есть четыре основных типа запросов данных в SQL, которые относятся к так называемому языку манипулирования данными (Data Manipulation Language или DML):

SELECT – выбрать строки из таблиц;

INSERT – добавить строки в таблицу;

UPDATE – изменить строки в таблице;

DELETE – удалить строки в таблице;

Каждый из этих запросов имеет различные операторы и функции, которые используются для того, чтобы произвести какие-то действия с данными. Запрос SELECT имеет самое большое количество опций. Существуют также дополнительные типы запросов, используемых вместе с SELECT, типа JOIN и UNION. Но пока, мы сосредоточимся только на основных запросах.

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

SELECT column1, column2 FROM table_name;

Также, можно получить все столбцы из таблицы, используя подстановочный знак «*»:

SELECT * FROM table_name;

Это может быть полезно в том случае, когда вы собираетесь выбрать данные с определенным условием WHERE. Следующий запрос возвратит все столбцы со всех строк, где «column1» содержит значение «3»:

SELECT * FROM table_name WHERE column1=3;

Кроме «=» (равно), существуют следующие условные операторы:

Дополнительно можно использовать условия BITWEEN и LIKE для сравнения с условием WHERE, а так же комбинации операторов AND и OR.

SELECT * FROM table_name WHERE ((Age >= 18) AND (LastName BETWEEN ‘Иванов’ AND ‘Сидоров’)) OR Company LIKE ‘%Motorola%’;

Что в переводе на русский язык означает: выбрать все столбцы из таблицы table_name, где значение столбца age больше или равно 18, а также значение столбца LastName находится в алфавитном промежутке от Иванов до Сидоров включительно, или же значением столбца Company является Motorola.

Запрос INSERT используется для создания новой строки данных. Для обновления уже существующих данных или пустых полей строки нужно использовать запрос UPDATE.

Примерный синтаксис запроса INSERT:

INSERT INTO table_name (column1, column2, column3) VALUES (‘data1’, ‘data2’, ‘data3’);

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

Изменяется уже существующая информация в базе данных очень похожим образом.

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

UPDATE table_name SET column1 = ‘data1’, column2 = ‘data2’ WHERE column3 = ‘data3’;

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

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

Хостинг – это размещение сайта в сети. При этом сайт размещается на сервере компании по размещению сайтов, которая называется хостинговой компанией. Хостинг бывает нескольких видов. Вид хостинга зависит от масштабности компании. Небольшие сайты пользуются так называемым «виртуальным хостингом». В данном случае отсутствует потребность у клиента в подключении своего оборудования к серверу хостера. Когда сайто владелец пользуется виртуальным хостингом, это предполагает, что он арендует часть сервера хостера для размещения и хранения своих файлов.

Для информационного сайта «Мебель Лидер» был выбран следующий хостинг-провайдер TimeWeb Их сайт http://timeweb.ru/

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

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

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

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

Доменное имя

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

В данном случае было принято решения использовать следующее доменное имя для информационного сайта «Мебель Лидер»: www.mklider.tmweb.ru

Поскольку фирма осуществляет свою деятельность на территории Российской федерации то и домен должен располагаться в зоне .ru