1. Понятие БД
2. Базы данных CSV
3. Описание
4. Внедрение на страницу
5. Управление с помощью JavaScript
6. Другие способы использования
7. Пишем интерфейс для редактирования

Понятие БД
Итак, в наше время очень распространены различные базы данных. Это объясняется тем, что Интернет активно развивается в коммерческой отрасли. А что такое коммерция? Это товары и цены. А как организовать порядок и соединить эти самые товары с их ценами? Для этого и существуют базы данных. Возьмём накладную в магазине. Накладная – это перечень всех продуктов, которые привез в магазин поставщик. Как будет выглядеть такая база данных?

Молоко | «Домик в деревне» | 1л | 13р.
Молоко | «Домик в деревне» | 0,2л | 7р.
Хлеб пшеничный | Батон нарезной | 600г | 10р.
Колбаса варёная | «Докторская» | 500г | 100р.
Сыр | Мааздам | 1кг | 170р

Вот то, что мы видим сверху и есть база данных. Я, честно говоря, не очень разбираюсь в торговле, да простят меня профессионалы, если я допустил какие-нибудь неточности. Итак, как же строятся электронные базы данных?... Точно также! Обыкновенная база данных в упрощенном понимании – это двухмерная таблица, состоящая из строк и столбиков. Только в программировании строки и столбики называются записями и полями. Различие лишь в том, что полями называются не все столбцы, а конкретно ячейки одной строки или записи. Для чего были приняты такие условности? Для построения работы программ с БД. Программа должна понимать БД как набор сток, состоящих из данных, разделённых определённым символом-разделителем. Эти данные и будут полями.

Базы данных CSV
Итак, теперь мы знаем, что представляет собой база данных. Надо сказать, что различных баз данных существует огромное количество, как и всего хорошего на свете. Описать все базы данных, которые используются хотя бы в Веб за одну статью невозможно. К тому же и никому это не надо, т.к. таких статей и без меня достаточно. Я же хочу рассказать о, сравнительно, новом и, поэтому, к сожалению, довольно редком виде баз данных. Это БД, основанные на программе MS Excel. «Что же, собственно говоря, делает Excel в Интернете?» - спросите Вы, - «раз и так предостаточно всяких разных этих баз?». Я отвечу. Да, сейчас я буду рассказывать, как использовать их, в качестве самостоятельных баз данных, но изначально-то рассчитывалось не на это. И всё же я объясню, как они связаны с Microsoft Excel. Итак, Попробуйте перенести табличку выше в программу Excel на Вашем компьютере. Поместите каждое поле в отдельную ячейку (надеюсь, что Вы поняли, что в моем примере – разделитель « | »). Теперь выберите «Файл/Сохранить как…» введите имя файла и в поле Тип выберите CSV (разделители - запятые) (*.csv). Если программа будет спрашивать о Листах, выберите ОК, чтобы она сохранила только первый Лист. Далее нажимайте ОК, если будут какие-то ещё ненужные нам вопросы. Теперь самое интересное! Откройте нужную Вам директорию, где вы и найдёте Ваш файл с расширением *.csv. Откройте этот файл с помощью программы «Блокнот» и Вы увидите результат – Базу данных CSV. Если Вы всё сделали правильно - вот, что должен показать «Блокнот»:

Цитата

Молоко;«Домик в деревне»;1л;13р. Молоко;«Домик в деревне»;0,2л;7р. Хлеб пшеничный;Батон нарезной ;600г;10р. Колбаса варёная;«Докторская»;500г;100р. Сыр;Мааздам;1кг;170р.

Итак, мы имеем БД, состоящую из строк и полей, разделённых разделителем «;». Не удаляйте её, она нам ещё пригодится в дальнейшем. Теперь поговорим о том, как привязать базу к вашему сайту и зачем это вообще нужно. Мы остановились на том, что Вы спрашивали, на кой нам эти базы сдались. Я думаю, что Вы уже сами нашли ответ на свой вопрос. Excel настолько распространён в настоящее время, что специалисты разработали великолепную возможность по преобразованию наших Excel-таблиц в БД для Сети. Надо сказать, что компании, не имеющие веб-сайтов чаще всего используют Microsoft Excel для своих прайс-листов. Если Вы сотрудник одной из таких компаний – радуйтесь – скоро Вас ждет повышение, потому что Вы сделаете электронную базу данных для Вашей компании. Даже если у Вас есть сайт-визитка, Вам очень подойдёт это решение. Потому что, наверняка, вы рассчитываете на то, что пользователь будет скачивать ваши прайсы в формате *.xls. Что ж, это возможно, но маловероятно. А мы сейчас научимся делать интерактивный онлайновый интерфейс к этим данным.

Описание
Какие же преимущества и недостатки имеет БД CSV. Начнем с того, что обработка данных происходит не на сервере, а на клиентской части (на компьютере пользователя). Данные обрабатываются с помощью элемента ActiveX браузера Internet Explorer, который запрашивает данные с сервера. Это значительно облегчает нагрузку на сервер, но без недостатков не обойтись. К сожалению, обработка CSV доступна только в MSIE 4.0+. К тому же для обработки большого количества данных требуется мощный компьютер и быстрый канал связи. И всё же если мы используем небольшую текстовую базу данных, то рекомендуется использовать именно такой вид хранения. Для этого не понадобятся знания сложных серверных языков (PHP, Perl), языка SQL, обрабатывающего основную серверную БД MySQL, поддержки всех этих технологий хостинг-провайдером. Для этого Вам понадобится всего лишь браузер IE, и знание некоторых необходимых для этого вида программирования возможностей языка JavaScript, которые описаны тут.

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

HTML

<OBJECT CLASSID="clsid:{идентификатор}" TYPE="{Тип данных мультимедиа}" CODE="{Интернет-адрес файла дистрибутива}" DATA="{Интернет адрес файла данных}"></OBJECT>

Что отсюда стоит выделить? CLASSID – это уникальный идентификатор класса. Этот номер нужен для регистрации нашего объекта в системном реестре. Он представляет собой 128-разрядное двоичное число, записываемое в шестнадцатеричной форме. Пример такого числа:
66A84652-8DB4-C321-B672-88BB54A9CB1
Элемент ActiveX поддерживает набор параметров, заключенных в теги <PARAM>. Когда их много, получается песенка: «Парам-парам». Эти теги служат для определения таких параметров, как цвет фона, цвет текста и пр. У них очень простой формат:
<PARAM NAME="{вид параметра}" VALUE="{значение}">
Вот вкратце то, что нам пригодится касательно тега <OBJECT>.
Едем дальше. Как внедрить нашу базу с помощью этого тега? Для этого используется специальный элемент TDC – Tabular Data Control. Вот как мы его вставим в страничку:

HTML

<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" ID="dbID" WIDTH="0" HEIGHT="0"> <PARAM NAME="DataURL" VALUE="http://mysite.ru/produkty/databases/db1.csv"> <PARAM NAME="UseHeader" VALUE="true"> </OBJECT>

итак, мы внедряем TDC, присваиваем ему имя dbID и ширину и высоту, равные нулю. Таким образом, он не будет отображаться на нашей страничке. Теперь необходимо привести некоторые полезные параметры элемента TDC.

CaseSensitive – если true (по умолчанию), при обработке данных будет учитываться регистр, если false – нет.
CharSet – набор символов. По умолчанию - windows-1525, для правильного отображения кириллицы, необходимо установить значение в windows-1251.
DataURL – Интернет-адрес нашей базы данных.
EscapeChar – если поля в нашей таблице разделены символом «;» то как же мы сможем использовать этот символ? Для этого и служит параметр, которые определяет, каким символом обозначать начало нашего разделителя, если мы используем его в качестве строки. По умолчанию, это символ «/». Таким образом, чтобы не было сбоев в программе необходимо ставить «/» перед символами, которые используются как разделители полей.
FieldDelim – символ для отделения полей. По умолчанию – запятая («;»). Если при сохранении в формате CSV, Excel обозначил разделителем точку с запятой, «;», задайте соответственно этот параметр.
Filter – строка условия фильтрации данных. Подробное описание дальше.
RowDelim – символ для отделения записей друг от друга. По умолчанию «новая строка».
Sort – задаёт условия сортировки. По умолчанию сортировка отсутствует. Подробное описание дальше.
TextQualifier – символ, в который заключается значение поля. Этот символ может быть полезен, если значение поля содержит пробелы, запятые и подобные им символы, используемые также в качестве служебных. По умолчания двойная кавычка.
UseHeader - если true (по умолчанию) то первая строка таблицы расценивается как набор заголовков для столбцов , если false – нет.

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

Код

document.getElementById("dataObj").object.Filter = "price < 100";

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

DATAFLD (dataFld) – название поля базы данных, к которому привязан элемент страницы
DATAFORMATAS (dataFormatAs) – формат представления данных. Если задано значение text, то данные будут отображаться «как есть», если HTML, то с учётом HTML-форматирования.
DATAPAGESIZE (dataPageSize) – применяется только для таблиц. Задаёт сколько записей будут одновременно отображаться в таблице. Если в БД 20 записей, а Вы не хотите, чтобы они растянулись в таблице, на всю страницу, задайте значение 5 – дальше мы научимся пролистывать данные, и у нас получится 4, как бы, странички в одной таблице, Которые мы сможем листать.
DATASRC (dataSrc) – задаёт элемент TDC-источник данных.

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

Цитата

Продукт;Наименование;Количество;Цена Молоко;«Домик в деревне»;1л;13р. Молоко;«Домик в деревне»;0,2л;7р. Хлеб пшеничный;Батон нарезной ;600г;10р. Колбаса варёная;«Докторская»;500г;100р. Сыр;Мааздам;1кг;170р.

что мы пишем в HTML.

HTML

<html> <head> <title>Прайс-лист магазина "ПРОДУКТЫ"</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> td, th {font-family:Verdana;font-size:11px;} </style> </head> <body> <OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" ID="producty" WIDTH="0" HEIGHT="0"> <PARAM NAME="DataURL" VALUE="db1.csv"> <PARAM NAME="UseHeader" VALUE="true"> <PARAM NAME="CharSet" VALUE="windows-1251"> <PARAM NAME="FieldDelim" VALUE=";"> </OBJECT> <table datasrc="#producty" width="500"> <thead> <tr> <th align="left">Продукт</th> <th align="left">Наименование</th> <th align="left">Количество</th> <th align="left">Цена</th> </tr> </thead> <tbody> <tr> <td><div datafld="Продукт"></div></td> <td><div datafld="Наименование"></div></td> <td><div datafld="Количество"></div></td> <td><div datafld="Цена"></div></td> </tr> </tbody> </table> </body> </html>

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



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

HTML

<div datasrc="#producty" datafld="db.csv">

Итак, мы узнали, как вставлять наши данные на страницу. Но как же нам управлять этими данными? Как осуществить поиск в базе, как отсортировать результат? Для этого существуют специальные объекты и свойства, с которыми мы можем работать с помощью JavaScript.

Управление с помощью JavaScript
Т. к. чаще всего приходится использовать всю таблицу с данными, а не отдельные поля, то очень удобно привязывать данные к тегу <TABLE>, как мы это делали выше. Но что делать, если база данных слишком велика и совсем не хочется, чтобы она растягивалась в 5 мониторов. Вспомните, я сказал, что для таблиц, к которым мы привязываем данные, существует параметр DATAFORMATAS. Также существует для объекта table набор методов для "листания". Вот они: previousPage() и nextPage() служат для перехода на предыдущий и следующий "листы", соответственно, а firstPage() и lastPage() – на первый и последний. В нашем случае мы не нуждаемся в "листании" таблицы, т.к. наша БД невелика, однако для примера мы переделаем нашу страничку:

HTML

<html> <head> <title>Прайс-лист магазина "ПРОДУКТЫ"</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> td, th {font-family:Verdana;font-size:11px;} </style> </head> <body> <OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" ID="producty" WIDTH="0" HEIGHT="0"> <PARAM NAME="DataURL" VALUE="db1.csv"> <PARAM NAME="UseHeader" VALUE="true"> <PARAM NAME="CharSet" VALUE="windows-1251"> <PARAM NAME="FieldDelim" VALUE=";"> </OBJECT> <table datasrc="#producty" datapagesize="2" id="dataTbl"> <thead> <tr> <th align="left" width="150">Продукт</th> <th align="left" width="150">Наименование</th> <th align="left" width="150">Количество</th> <th align="left" width="150">Цена</th> </tr> </thead> <tbody> <tr> <td><div datafld="Продукт"></div></td> <td><div datafld="Наименование"></div></td> <td><div datafld="Количество"></div></td> <td><div datafld="Цена"></div></td> </tr> </tbody> </table> <br> <a href="#" onclick="javascript:dataTbl.firstPage()">в начало</a> &bull; <a href="#" onclick="javascript:dataTbl.previousPage()">назад</a> &bull; <a href="#" onclick="javascript:dataTbl.nextPage()">вперёд</a> &bull; <a href="#" onclick="javascript:dataTbl.lastPage()">в конец</a> </body> </html>

Вот, что у нас получится:


Теперь поговорим о сортировке и фильтрации данных по определённым паризнакам…


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



Это сообщение отредактировал(а) ALEXANDRO - 25.11.2004, 13:41

ну как? правда я её ещё не радактировал и не дописал до конца, но... вообще?

Круто! Есть уже кой какие идеи, но похоже в ИЕ уже всё за нас продуманно, редко видишь такую находчивость то ИЕ

Кстати давай также ссылки на MSDN, что бы rеference сразу найти можно было.

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

очень интересует каким образом сделать
Если в БД 20 записей, а Вы не хотите, чтобы они растянулись в таблице, на всю страницу, задайте значение 5 – дальше мы научимся пролистывать данные, и у нас получится 4, как бы, странички в одной таблице, Которые мы сможем листать.

именно пролистование ..пробывал штот не получается...если можно на данном примере покажите

пасиб

vsemplus
сейчас с временем жуткий напряг... даже не знаю, когда смогу дописать статью... а по поводу Вашего вопроса, будут ли индексироваться такие таблицы в поисковиках..... я никогда об этом не задумывался.. по идее должны.. может быть Sardar знает?
Добавлено @ 09:55
кстати, я смотрел на вашу таблицу вот тут: http://www.vsemplus.com/gifts.csv... она как-то очень странно постоена:

Цитата

Наименование <a href=http://www.bolero.ru/index.php?level=4&pid=22216554>Подставка на рабочий стол Капля</a> "<a href=http://www.bolero.ru/index.php?level=4&pid=22216556>Подставка на рабочий стол ""Зеленый акрил""</a>" "<a href=http://www.bolero.ru/index.php?level=4&pid=22216557>Подставка на рабочий стол ""Золотое&Черное""</a>" "<a href=http://www.bolero.ru/index.php?level=4&pid=22216560>Подставка на рабочий стол ""Шотландка""</a>" "<a href=http://www.bolero.ru/index.php?level=4&pid=22216561>Подставка на рабочий стол ""Ранчо""</a>" "<a href=http://www.bolero.ru/index.php?level=4&pid=22216563>Подставка на рабочий стол ""Загон""</a>" "<a href=http://www.bolero.ru/index.php?level=4&pid=22216570>Стакан для карандашей и ручек ""Ранчо - кожа""</a>"

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

Цитата

Наименование <a href=http://www.bolero.ru/index.php?level=4&pid=22216554>Подставка на рабочий стол Капля</a> <a href=http://www.bolero.ru/index.php?level=4&pid=22216556>Подставка на рабочий стол "Зеленый акрил"</a> <a href=http://www.bolero.ru/index.php?level=4&pid=22216557>Подставка на рабочий стол "Золотое&Черное"</a> <a href=http://www.bolero.ru/index.php?level=4&pid=22216560>Подставка на рабочий стол "Шотландка"</a> <a href=http://www.bolero.ru/index.php?level=4&pid=22216561>Подставка на рабочий стол "Ранчо"</a> <a href=http://www.bolero.ru/index.php?level=4&pid=22216563>Подставка на рабочий стол "Загон"</a> <a href=http://www.bolero.ru/index.php?level=4&pid=22216570>Стакан для карандашей и ручек "Ранчо - кожа"</a>

т.е. не нужно использовать такое количество кавычек...

пасиб ... а как мне Sardar найти ?! может он появляется здесь пусть напишет ...пожалуйста а то не знаю делать весь свой сайт именно так базой через csv мне самое главное чтобы индексировали поисковики....

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

скорее всего так и есть.. потому что если бы вы меня не спросили, я бы никогда об этом и не задумался бы... т.е., сл., проблемы по идее не должно быть.. А Sardar, да, иногда в этот форум заглядывает.....

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

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

ловите

большок пасиб !!! то что надо....

Привет! У меня следующий вопрос:
с выпадающим списком все получилось, но в таблице есть повторяющиеся поля:
Производитель;Автомобиль;Код детали;Комментарий;Цена
DEMO;Калина;TKALINA014;Anry;10 800,00р.
DEMO;Калина;TKALINA024;T-T;11 500,00р.
DEMO;Нива;TCHEVNIVAN001;Защита переднего бампера труба 63,5 мм;4 000,00р.
DEMO;Нива;TCHEVNIVAN002;Защита перед.бампера низкая с доп.защит.двигателя 63,5 мм;8 800,00р.
DEMO;Mazda;TMZN001;Защита переднего бампера труба 63,5 мм BT-50;7 000,00р.
DEMO;Mazda;TMZN002;Защита перед.бампера  с доп.защитой двигателя 63,5 мм BT-50;14 000,00р.
DEMO;Mazda;TMZN003;Защита порогов труба 76 мм   BT-50;9 500,00р.
DEMO;Mazda;TMZN004;Защита заднего бампера труба 63,5 мм    BT-50;10 000,00р.
DEMO;Toyota;TTYN001;Защита порогов труба 76 мм  RAV 4;10 000,00р.
DEMO;Kia;TKIAN001;Защита перед.бампера с доп.защит.двигателя 63,5 мм SORENTO;14 000,00р.
DEMO;Kia;TKIAN002;Защита порогов труба 76 мм  SORENTO;9 000,00р.
DEMO;Kia;TKIAN003;Защита порогов труба 76 мм  SPORTAGE c 2006 г.;9 000,00р.
DEMO;Kia;TKIAN004;"Защита заднего бампера ""уголки"" 63,5 мм  SORENTO";4 500,00р.
Как сделать фильтр для таблицы, чтоб в выпадающем списке было по одному полю?
Калина
Нива
Mazda
Toyota
Kia