Създаване на сайт с Dreamweaver MX 2004, PHP и MySQL , Урок 1.1

И така, решете, какво изображение ще използвате, като лого на Вашия сайт и го съхранете в папка img, на Вашия сайт. Ако искате, използвайте logo.jpg, от предложения пакет за сваляне от сайта Ни. За да вмъкнете логото във хедър секцията на темплейта:


Кликнете в хедъра на темплейта.
Кликнете Image бутона от Common таба на Insert лентата.
Отидете до желания image и го маркирайте. Понеже зададохте default images folder, когато дефинирахте сайта, Dreamweaver, автоматично прави копие на logo.jpg във Вашата default images folder.
Внимавайте с URL: свалете / , защото темплейта е в различна папка в сравнение с останалите файлове от приложението. Релативния път “img/logo.jpg” гарантира коректното изобразяване на изображението в страниците, базирани на темплейта.
Изберете logo.jpg във Design view и въведете index.php във полето link на Property inspector, така че, посетителите на сайта, да могат да се върнат обратно на home страницата, от всяка друга страница, кликвайки логото.


фиг.6. Вмъкване на лого изображението и настройване на пътя му

Следва да настроите футър секцията. Въведете желания текст и линковете в табличната клетка. Селектирайте текста и въведете желания URL във link полето на Property inspector.

Следва да научите, как да създадете динамично навигационно меню, което работи с данни от recordset (набор с резултати, извлечени от базата данни).

Създаване на Навигационно меню

В тази част ще създадете навигационно меню на blog темплейта. То ще съдържа всички теми, които динамично са екстрактнати от базата данни. За това ще са Ви нужни:

Връзка към базата данни
recordset със всичките теми
Дефиниране на връзка към базата данни

Във Application панела , селектирайте Databases таба.
Кликнете бутона (+) и изберете MySQL Connection.
Попълнете MySQL Connection диалоговият прозорец както следва:
Connection name: connBlog

MySQL server: localhost

User name:

password:

Database: blg_blog

Настройките трябва да са според Вашия конкретен случай.

Нашият е с Денвър и липса на username и парола за MySQL сървъра. Тестваме на домашен комп.

Кликнете Ok когато приключите.
Връзката се изобразява във панела Databases. Както е показано на фиг.7, можете да видите организацията на таблиците във blg_blog базата данни.




фиг.7. Разглеждане на информацията за базата данни, използвайки таба Databases на Application панела.

Забележка: Dreamweaver автоматично генерира PHP/MySQL кода за връзка към базата данни и съхранява тази информация във специален файл (connBlog.php) на новосъздадената папка Connections във root папката на сайта.

Създаване на recordset

А сега трябва да екстрактнете информацията, която Ви е необходима от базата данни и затова създавате recordset:

В Application панела, селектирайте Bindings таба.
Кликнете бутона (+) и изберете Recordset от поаказалото се меню.
Попълнете Recordset диалоговата кутия, както е показано на фиг.8


фиг.8. Създаване на rsTopics recordset.

От падащото меню Table, изберете таблицата от която ще екстрактвате информация: blg_topic_top.
Сортирате записите по азбучен ред (Ascending) на техните заглавия (title_top).
Кликнете OK, когато финиширате.
Dreamweaver извежда съобщение, предупреждаващо Ви, че последващи промени към така генерирания код, няма да се копират на документите базирани на темплейта. Ето защо е важно да генерирате коректно recordset-a още първия път. Кликнете Ok за да затворите съобщението.




фиг.9. Предупредително съобщение за recordset-a на темплейта

Recordset-a се показва във Bindings таба.



фиг.10. Recordset-a rsTopics показан във Bindings таба на Application панела

Да се върнем на навигационното меню за да научим как да изобразим данните от recordset-a, който създадохте.

Кликнете във лявата клетка на таблицата за плана на положението.
Кликнете Application таба от лентата Insert.
Изберете Dynamic Table от меню бутона Dynamic Data.
Попълнете диалоговия прозорец Dynamic Table, както е показано на фиг.11


фиг.11. Диалоговия прозорец Dynamic Table, използващ rsTopics recordset

Изобразяват се всички теми, за да могат потребителите да сърфират през всички теми.

Кликнете Ok, когато сте готови.
Таблицата се вмъква в лявата клетка. Обаче, Вие имате нужда само от имената на темите, така че изтрийте id_top и description_top колоните; селектирайте колоната и ч изтрийте с клавиша Del. След това променете хедъра на колоната от title_top на нещо по-четливо за човек. Нека да бъде Topics.

Към този момент елементите от менюто нямат асоциирани линкове към тях. Всеки елемент от менюто трябва да води към страницата topic.php и трябва да и подаде URL параметър, който приема като стойност кореспондиращия ID за всяка тема. За да създадете линк:

Селектирайте динамичния текст с етикета rsTopics.title_top.
Във Property inspector, кликнете папка иконата, намираща се до текстовото поле link.
Разходете се до root папката на сайта(на локалната машина) и изберете файла topic.php.
Във URL текстовото поле, изтрийте предхождащия символ /, защото използвате релативния път до файла.URL-то трябва да е topic.php
Кликнете бутона Parameters до URL текстовото поле. Dreamweaver отваря диалогов прозорец, където трябва да дефинирате URL параметъра асоцииран към този линк.
Кликнете бутона (+) за да добавите нов параметър.
Въведете името му: id_top
Въведете неговата стойност, кликвайки във Value полето, последващо кликване върху иконата светкавица и избиране на id_top полето от rsTopics recordset.
Кликнете Ok и пак Ok
След дефиниране на URL параметъра, кликнете OK.
Преди да финиширате с темплейта, дефинирайте кои региони могат впоследствие да бъдат редактирани и кои не. Вашият blog темплейт ще има само един редактируем регион: централната част (main area), където ще бъдат изобразявани статиите. За да направите този регион редактируем:

Изберете дясната таблична клетка във средния ред.
Кликнете Common таба от Insert лентата.
Изберете Editable Region от меню бутона Templates.
Dreamweaver отваря диалогов прозорец питащ Ви за името на редактируемия регион. Именувайте го: main
Кликнете OK.
Селектирайте main текста вмъкнат от Dreamweaver и го изтрийте.
Запишете темплейт файла. Фиг.12 показва как изглежда към момента темплейт страницата във Dreamweaver Design view


фиг.12. Темплейта в Design view

Следва продължение в Урок 1.2


/ Трябва да сте регистриран за да напишете коментар /