Журнал LinuxFormat - перейти на главную

LXF93:WEB

Материал из Linuxformat
(Различия между версиями)
Перейти к: навигация, поиск
(Вдарим по таблицам)
(Вдарим по таблицам)
Строка 210: Строка 210:
 
Первая команда активирует нашу базу '''manager''', а вторая изменяет
 
Первая команда активирует нашу базу '''manager''', а вторая изменяет
 
поле '''id''' в таблице – первую колонку, которую мы создали. Это строка
 
поле '''id''' в таблице – первую колонку, которую мы создали. Это строка
снабжает номером каждую запись о CD, чтобы потом можно было лег-
+
снабжает номером каждую запись о CD, чтобы потом можно было легко их удалять. Сказать ''MySQL'' «удали запись номер 5» куда проще, чем
ко их удалять. Сказать MySQL «удали запись номер 5» куда проще, чем
+
 
«удали где-то там запись с текстом, содержащим слово Бах», особенно
 
«удали где-то там запись с текстом, содержащим слово Бах», особенно
если вы поклонник Баха и у вас таких полно! К сожалению, OpenOffice.
+
если вы поклонник Баха и у вас таких полно! К сожалению, ''OpenOffice.org'' не позволяет полю '''id''' увеличиваться каждый раз при добавлении
org не позволяет полю id увеличиваться каждый раз при добавлении
+
новой записи, поэтому без описанного выше трюка он просто продолжал бы ставить 0 в поле '''id'''. Ключевое слово '''auto_increment''' говорит, что записям последовательно присваиваются номера 1, 2, 3 и так далее.
новой записи, поэтому без описанного выше трюка он просто продол-
+
 
жал бы ставить 0 в поле id. Ключевое слово auto_increment говорит, что
+
Давайте припомним свои достижения: мы спроектировали страницу, которая будет служить интерфейсом к каталогизатору дисков,
записям последовательно присваиваются номера 1, 2, 3 и так далее.
+
включая форму для добавления новых альбомов. Затем мы использовали ''MySQL'' и ''OpenOffice.org Base'' для создания базы, соответствующей форме на нашей странице с тем, чтобы они могли передавать
    Давайте припомним свои достижения: мы спроектировали стра-
+
ницу, которая будет служить интерфейсом к каталогизатору дисков,
+
включая форму для добавления новых альбомов. Затем мы исполь-
+
зовали MySQL и OpenOffice.org Base для создания базы, соответству-
+
ющей форме на нашей странице с тем, чтобы они могли передавать
+
 
друг другу информацию. Короче, мы создали графическую оболочку
 
друг другу информацию. Короче, мы создали графическую оболочку
 
нашей программы и внутреннюю часть для хранения данных, и все
 
нашей программы и внутреннюю часть для хранения данных, и все
 
это ни написав ни строчки кода. Теперь добавим немного PHP, чтобы
 
это ни написав ни строчки кода. Теперь добавим немного PHP, чтобы
 
связать их вместе!
 
связать их вместе!
    Войдите в раздел Журнал/WebDev на нашем диске и скопируйте
+
 
файл control.php в свой домашний каталог. Теперь откройте в двух
+
Войдите в раздел '''Журнал/WebDev''' на нашем диске и скопируйте
окнах редактора файлы manager.php и control.php, для переноса содер-
+
файл '''control.php''' в свой домашний каталог. Теперь откройте в двух
жимого control.php в manager.php. Менять ничего не надо – просто
+
окнах редактора файлы '''manager.php''' и '''control.php''', для переноса содержимого '''control.php''' в '''manager.php'''. Менять ничего не надо – просто скопируйте содержимое '''control.php''' и вставьте перед тэгом '''</body>''' в
скопируйте содержимое control.php и вставьте перед тэгом </body> в
+
'''manager.php'''. Если вы забуксовали, просмотрите файл '''manager-final.php''' в разделе '''Журнал/WebDev''' на диске, это полная и окончательная версия того, что должно быть.
manager.php. Если вы забуксовали, просмотрите файл manager-final.php в разделе '''Журнал/WebDev''' на диске, это полная и окончательная
+

Версия 10:19, 21 ноября 2008


Web-проект Простой способ создавать программы с помощью открытых инструментов

Содержание

Web: Сделай свой CD-менеджер

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

Если я скажу «разработка программного обеспечения», вам на ум, возможно, придут часы, проведенные в текстовых редакторах и командной строке за магическими трюками, на постижение которых ушли годы. И зря! Чтобы создать программу, вам не нужны ни 600-страничная книга, ни знание бесчисленных флагов GCC – вот это я и попытаюсь продемонстрировать на данном уроке. Мы сделаем нечто реально клевое: каталогизатор музыкальных дисков, работающий через браузер, который вы по мере обучения сможете расширять. К концу урока вы сумеете приспособить его для учета DVD, игр и даже, если угодно, хомячков.

Но как же мы создадим программу, не программируя? Ответ прост: заставим чужие программы выполнить всю черновую работу за нас. Воспользуемся Nvu для проектирования интерфейса нашего приложения, а также OpenOffice.org Base как хранилищем данных о нашей CD-коллекции. Мы свяжем их с помощью небольшого скрипта на PHP, имеющегося на нашем диске – это очень просто. Даже если вы сроду не написали на PHP ни строчки, вы все равно поймете, о чем речь, из комментариев в коде.

Наше руководство создаст вам твердую почву для разработки сетевых приложений, работающих с базой данных, и создания форм с помощью HTML-редактора. Конечный проект будет работать на вашем PC, доступный через браузер. Познакомившись с тем, как он делает это, вы сможете выложить приложение в Сеть на суд своих друзей. А всего лучше, что мы не будем скучать, а создадим что-то с нуля и изучим различные инструменты. Хватит болтать – начнем!

Экипируемся

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

  • Apache. Самый популярный web-сервер. Наша программа будет

работать внутри браузера, и ее страничку надо обслуживать; а Apache это здорово умеет.

  • MySQL. СУБД для хранения данных о музыкальных дисках. Мы не

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

  • OpenOffice.org. Компонент Base из этого пакета позволит нам создавать и управлять базами данных, не прикасаясь к командной строке.
  • Nvu. Web-редактор на движке Mozilla. Nvu позволит создать главное окно программы, не задумываясь об HTML-тэгах.
  • PHP. Популярнейший язык программирования сценариев, используемый многими сайтами в сети. Мы будем использовать его для связи интерфейса страницы с содержимым базы данных.

Эти программы должны быть доступны в вашем менеджере пакетов (Synaptic в Ubuntu, Control Center в Mandriva, Pirut в Fedora, Yast в SUSE) за несколько щелчков мыши. Если у вас возникли проблемы с их поиском или нет выхода в Интернет, можете взять их с нашего DVD: Apache и MySQL находятся в разделе Сервер, OpenOffice.org в разделе Офис, PHP в разделе Разработка, а Nvu в разделе Интернет. Однако, простоты ради, рекомендую вам по возможности использовать менеджер пакетов – это избавляет от ручной компиляции и установки.

Чтобы получить и установить требуемые пакеты через Интернет в Ubuntu, введите в терминале следующую команду:

sudo apt-get install apache2 libapache2-mod-php5 mysql-server openoffice.org nvu

В других дистрибутивах поищите в вашем менеджере пакетов Apache и MySQL (никаких библиотек разработчика не потребуется). Обычно они называются mysql, mysql-server, apache, apache2 и т.п. Во всех дистрибутивах Apache и MySQL после установки должны стартовать автоматически. Но для уверенности откройте терминал и переключитесь в режим пользователя root (sudo bash в Ubuntu и su в других дистрибутивах), затем наберите

/etc/init.d/apache2 start
/etc/init.d/mysql start

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

Создаем интерфейс

Итак, мы установили вспомогательные серверные программы и запустили их. Теперь спроектируем интерфейс приложения! С его помощью вы сможете просматривать содержимое базы данных и добавлять и удалять информацию о дисках через текстовые поля. Запустите Nvu, и увидите пустую страницу, готовую для редактирования – если нет, выберите в меню File > New. В правой панели Nvu введите что-нибудь наподобие Каталогизатор CD 1.0, выделите набранный текст и нажмите на панели инструментов кнопку B, чтобы шрифт стал жирным. Вот вам и заголовок нашей программы.

Далее необходимо создать форму для ввода информации о дисках, добавляемых в базу . Нажмите Form на самой верхней панели инструментов, введите Main в качестве имени и manager.php в качестве Action URL, затем выберите метод POST . Наконец, нажмите ОК, и увидите подсвеченную синим область на главной странице. Теперь можно добавлять к интерфейсу текстовые поля – именно их мы используем в готовой программе для внесения в базу информации о новых дисках.

Напечатайте Name, затем выберите Insert > Form > Form Field. Укажите Text в качестве типа поля, затем введите CDName в поле Filed Name. Заметим, что строка CDName очень важна: имена полей текстовых элементов ввода должны соответствовать заголовкам, используемым в базе данных, которую мы скоро создадим. Значение Initial Box устанавливать не надо: просто нажмите OK, и увидите текстовый компонент на странице.

Итак, у нас есть куда вводить информацию об альбоме в законченном продукте. Теперь не мешает добавить еще одно текстовое поле, на сей раз для его автора. Повторите шаги предыдущего абзаца, но на этот раз перед вставкой поля формы введите Author: и назовите его CDAuthor, а не CDName. Теперь у нас есть два текстовых поля ввода на главной странице. Повторите инструкции предыдущего параграфа, но теперь введите перед полем CDDate:, а само поле назовите NewDate. Все понятно? Итого, у вас должны быть три текстовых поля с именами CDName, CDAuthor, CDDate с метками Name:, Author:, Date: перед ними.

Давайте добавим поле описания: мало ли что еще можно сказать про диск! После поля Date: введите Description:, затем выберите в меню Insert > Form > Text Area. Назовите новое поле CDDesc в Field Name и установите размер в 5 строк на 40 столбцов, а затем нажмите ОК. Наконец, нам нужна кнопка отправки, чтобы занести информацию о диске в базу после ее ввода. Перейдите в Insert > Form > Form Field, затем выберите Submit Button из ниспадающего списка Field Type и введите Add Entry в окошке Field Value. По завершении нажмите ОК.

Теперь ваша форма должна выглядеть как на рис. 1. Поздравляем – вы создали интерфейс! Конечно, сейчас он простоват, но вы можете украсить его цветом, картинками и чем пожелаете, применив средства Nvu. Выполните команду File > Save As, введите CD Manager в качестве заголовка страницы (Page Title), а затем сохраните ее как manager.php (не manager.html, так как позже мы вставим туда PHP-код).

Рис. 1

Рис. 1. Так должны выглядеть ваши текстовые поля и кнопка посылки данных Add Entry.

Если, по-вашему, что-то пошло не так, проверьте файл manager.php в разделе Журнал/WebDev на нашем диске; он содержит HTML-код, который вы пытались создать. Откройте его в текстовом редакторе и сверьте с тем, что у вас получилось, чтобы ничего не упустить.

Время делать базу

Разработав «лицо» программы, займемся внутренней частью. Теперь наша задача – использовать MySQL для создания базы данных, в которой мы будем хра нить информацию о CD. Возможно, вы удивляетесь, почему в таком маленьком проекте мы не пишем данные просто в текстовый файл. Но ведь потребуется писать процедуру обработки текстовых файлов! Куда проще установить MySQL, накидать туда данных, и пусть выполняет всю остальную работу. Откройте терминал и переключитесь в режим root (sudo bash или просто su). Затем введите

mysql -uroot -p

Вы получите права администратора на доступ к базам MySQL. Большинство дистрибутивов по умолчанию не устанавливают пароль для MySQL, и в ответ на запрос можете просто нажать Enter. Если вы установили пароль до этого – введите его. В командной строке MySQL наберите

create database manager;

Эта команда создаст новую базу данных для нашего каталога.

Нажмите Ctrl+D, чтобы выйти из командной строки MySQL. Теперь нужно установить специальный компонент для связи Openoffice.org и MySQL; скачиваем mysql-connector-java-5.0.5.tar.gz с http://www.mysql.com/products/connector/j и сохраняем его в домашний каталог. Версию 3.1 не берите, она слишком стара.

Вернитесь в командную строку (проверьте, что вы все еще root) и введите

tar xfvz mysql-connector-java-5.0.5.tar.gz -C /opt/

Эта команда извлечет инструмент «коннектор» в каталог /opt вашего компьютера. Теперь запустите OpenOffice.org и перейдите в Tools > Options. Выберите пункт Java в подменю OpenOffice.org слева, затем на кнопку Class Path справа, затем Add Archive. Перейдите в каталог /opt/mysql-connector-java-5.0.5, укажите файл mysql-connector-java-5.0.5bin.jar и щелкните кнопку Open. Нажмите ОК и снова ОК, чтобы убрать два появившихся диалога, и ваш коннектор установлен. Наконец, перезапустите OpenOffice.org.

Откройте File > New > Database, и когда появится Мастер, выберите Connect To An Existing Database и укажите MySQL в выпадающем меню Нажмите Next, и на очередном экране выберите соединение с помощью JDBC. Щелкните Next. Теперь будем заполнять базу информацией. Введите manager в качестве имени базы и localhost в качестве URL нажмите Next и введите root в качестве имени пользователя. Наконец нажмите Next, чтобы перейти на последний экран, а там нажмите Finish Вас могут попросить ввести новое имя файла – просто укажите старое имя, так как мы в дальнейшем не будем его использовать.

Вдарим по таблицам


Теперь выберите Create Table In Design View в панели Tasks в главном окне OOo Base. Появится сетка, в которой можно проектировать базу данных. В столбце Field Name введите ID, щелкните правой кнопкой мыши на квадрате слева (с зеленой стрелкой) и выберите пункт Primary Key. Щелкните на тип TEXT [VARCHAR] в поле справа от ID (под заголовком Field Type) и выберите Integer [INT]. Благодаря этому у добавляемых CD в нашей базе будет целочисленный индекс.

Далее надо сообщить имена текстовых полей, созданных с помощью Nvu, поэтому введите CDName, CDAuthor, CDDate, CDDesc вертикально под ID. Вы заметите, что OOo назначает этим полям базы тип данных Text [VARCHAR] под заголовком Field Type, то есть они могут содержать текст переменной длины.

Для поля CDDesc щелкните на поле Text [VARCHAR] и выберите Memo [TEXT] из выпадающего списка – тогда нам перепадет побольше пространства для хранения описания альбома. Теперь окно вашего OOo Base должно выглядеть как на рис. 2. Выберите в меню File > Save, введите entries в качестве имени таблицы и нажмите ОК. Ура – мы сделали это! Теперь закроем OOo и перейдем к финальным стадиям.

Рис. 2

Рис. 2. Убедитесь, что таблица базы данных в Base соответствует изображенной здесь!

Одну из настроек базы надо сменить, чтобы новые записи о дисках получали новые номера ID. Откройте терминал, переключитесь в режим root и введите mysql -uroot -p, чтобы войти в MySQL как было описано раньше. В строке MySQL введите

use manager;
alter table entries change id id int(10) auto_increment;

Первая команда активирует нашу базу manager, а вторая изменяет поле id в таблице – первую колонку, которую мы создали. Это строка снабжает номером каждую запись о CD, чтобы потом можно было легко их удалять. Сказать MySQL «удали запись номер 5» куда проще, чем «удали где-то там запись с текстом, содержащим слово Бах», особенно если вы поклонник Баха и у вас таких полно! К сожалению, OpenOffice.org не позволяет полю id увеличиваться каждый раз при добавлении новой записи, поэтому без описанного выше трюка он просто продолжал бы ставить 0 в поле id. Ключевое слово auto_increment говорит, что записям последовательно присваиваются номера 1, 2, 3 и так далее.

Давайте припомним свои достижения: мы спроектировали страницу, которая будет служить интерфейсом к каталогизатору дисков, включая форму для добавления новых альбомов. Затем мы использовали MySQL и OpenOffice.org Base для создания базы, соответствующей форме на нашей странице с тем, чтобы они могли передавать друг другу информацию. Короче, мы создали графическую оболочку нашей программы и внутреннюю часть для хранения данных, и все это ни написав ни строчки кода. Теперь добавим немного PHP, чтобы связать их вместе!

Войдите в раздел Журнал/WebDev на нашем диске и скопируйте файл control.php в свой домашний каталог. Теперь откройте в двух окнах редактора файлы manager.php и control.php, для переноса содержимого control.php в manager.php. Менять ничего не надо – просто скопируйте содержимое control.php и вставьте перед тэгом </body> в manager.php. Если вы забуксовали, просмотрите файл manager-final.php в разделе Журнал/WebDev на диске, это полная и окончательная версия того, что должно быть.

Персональные инструменты
купить
подписаться
Яндекс.Метрика