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

В тази статия ще изследваме ръчното въвеждане на код в Dreamweaver, чрез създаване на две полезни допълнения към Вашия сайт: архивен календар и търсеща машина.


Ще научите как да:

използвате Dreamweaver PHP command бутоните за автоматично вмъкване на блокове код във Ваша страница
построяване на календар за Вашия blog и изобразяване на публикациите по дати
построяване на търсачка, откриваща низ във Вашата база данни
показване на резултатите от търсене
добавяне на навигационни ленти към страниците, за показване на голям брой записи
Добавяне на conditional regions, изобразяващи съобщения на страници без записи
Календарът

Календара, ще притежава хедър, показващ месеца и годината, плюс две навигации, отвеждащи Ви на следващия или на предишния месец. Под хедъра, календара ще показва дните от седмицата. PHP кода генерира тялото на календара, стартирайки от първия ден на текущия месец. Дните, в които има публикация, са показани като линкове. Когато потребител кликне определена дата, приложението зарежда нова страница (day.php), показвайки публикациите за този ден. За да изглеждат нещата по-изкусителни, на фиг.1 виждате как ще изглежда календара, когато попривършите с направата му.



фиг.1 Календара

Търсачката претърсва базата данни за низ от символи, които потребителя е нанесъл във формата. Тя връща всички статии, съдържащи указания низ. Ще добавите семпла и спретната търсеща форма към Вашия blog, както е показано на фиг.2.



фиг.2 Търсещата форма

За да стартирате, от панела Files във Dreamweaver, създайте следните файлове във root папката на Вашия сайт.

day.php
search.php
Генериране на семпъл календар

За да се показва календара на всички страници от blog-a, ще го създадете във темплейта (blgtemplate.dwt.php), който отдавна създадохте. Ще поставите календара във nugget, под навигационното меню. Използвайте следните стъпки, за създаване на празен nugget.

Отворете темплейт страницата (blgtemplate.dwt.php) от папка Templates, разположете курсора след линка Administrative section и натиснете еднократно Return.
Вмъкнете таблица с 3 реда и 1 колона, 100% width, border thickness 0, cell padding 0 и cell spacing 0.
На първия ред напишете Archive
Приложете съответния CSS стил: nugget към тага , nugheader към първия ред ( първия таг във таг селектора ) и nugbody към втория ред ( втория таг
във таг селектора )
Забележка: За да направите CSS стила на разположение във Вашата темплейт страница, убедете се, че пътя до файла blog.css е релативен на документа.

Ако хвърлите един поглед с F12, лявата секция на вашия темплейт ще изглежда taka


фиг.3 Празния календар

Следва да генерирате празен календар, който е без линкове за дните с асоциирани към тях статии. Действителния календар е генериран от PHP функция, наречена от нас build_calendar. За да построите тази функция, ще използвате някои от възможностите на Dreamweaver за кодиране на PHP. Но понеже тези възможности са все още леко ограничени, ще трябва да напишете собствен блок от код. Не се притеснявайте. Ще разгледаме кода в детайли и ще можете да го копирате и да го "пейстнете" директно в приложението Ви.

Разположете курсора във празния втори ред на таблицата на календара (nugget) и превключете на Split view , като кликнете съответния бутон от document toolbar, както е показано на фиг.4




фиг.4. Превключване на Split view

Вътре във Вашия nugget, ще създадете Вашия първи PHP кодов блок. Кликнете бутона Code Block от таба PHP на лентата Insert , както е показано на фиг.5



фиг.5. Вмъкване на PHP кодов блок

Както можете да видите от фиг.6 , Dreamweaver вмъква празен PHP кодов блок във nugget.



фиг.6. Празен PHP кодов блок

Вътре в този блок, декларирайте функцията build_calendar , като пейстнете следния код

function build_calendar($month,$day,$year) {
return $calendar;
}

Dreamweaver осветява различните PHP елементи от кода, за да направи кода по-четлив и разбираем. Забележете, че функцията приема 3 параметъра: месеца, деня и годината. Базирана на тези три PHP променливи, функцията построява календара и го връща като резултат.

Преди да започнете да строите календара, разгледайте нужните обекти за генерирането му:

масив със всички абревиатури на дните от седмицата, за генериране на хедъра на календара:
$daysOfWeek = array('Su','Mo','Tu','We','Th','Fr','Sa');

променлива, съхраняваща първия ден на входния месец ( месеца, получен като параметър на функцията ):
$firstDayOfMonth = mktime(0,0,0,$month,1,$year);

променлива съхраняваща броя дни на входния месец:
$noDays = date('t',$firstDayOfMonth);

масив съхраняващ компонентите на датата, съответстващи на първия ден от месеца:
$dateComponents = getdate($firstDayOfMonth);

променлива, определяща кой ден от седмицата е първия ден от месеца:
$dayOfWeek = $dateComponents['wday'];

променлива, извличаща името на входния месец:
$monthName = date('F',mktime(0,0,0,$month,1,$year));

Използвайте следните стъпки, за да продължите със създаване на календара.

Разположете курсора след отварящата къдрава скоба от първия ред на функцията и натиснете Enter клавиша, за да се появи празен ред във функцията .
Копирайте следните два реда код и с paste ги поставете на празното място:
$daysOfWeek = array('Su','Mo','Tu','We','Th','Fr','Sa');

$firstDayOfMonth = mktime

За да идентифицирате първия ден от месеца , използвате PHP функцията mktime. Тази функция връща времето, съответстващо на зададените аргументи. Разположете курсора след mktime и напишете отварящата скоба ( ( ).
Когато пишете тази функция, Dreamweaver загатва за кода, показвайки синтаксиса на функцията, както е показано на фиг.7.


фиг.7. Кодова подсказка за синтаксиса на функцията mktime



Разделяне на всяка стойност със запетайка, задаване на 0 за всичките 3 входа за часа ( int hour, int minute и int sec ), $month за int mon, 1 за int day ( за индикиране, че това е първия ден от месеца ) и $year за int year . Затворете декларирането на променливите със " )" и ";".
Забележете, как очакваната следваща входна стойност, става по-плътно маркирана във кодовия помощник, когато въведете запетайка. Вашият ред от код трябва да придобие вида:

$firstDayOfMonth = mktime(0,0,0,$month,1,$year);

Създайте следващ празен ред, за да вмъкнете реда
$noDays = date('t',$firstDayOfMonth);

Функцията date() е друга полезна PHP функция , която използвате за да определите броя на дните на входния месец. Функцията date() връща форматиран стринг, в съответствие със зададения формат, използващ зададената integer timestamp ( в случая, числото на месеца, зададено чрез $month ). Формата, определен чрез t връща броя дни в зададения месец. Ако форматиращия низ е F, функцията връща пълното текстово представяне на месеца, като примерно January или March. За пълният списък от форматиращи низове, проверете в PHP документацията.


фиг.8. Кодовата подсказка за функцията date()

Накрая, ще използвате и функцията getdate(). Копирайте и вмъкнете следния скрипт
$dateComponents = getdate($firstDayOfMonth);

Функцията getdate() връща асоциативен масив, съдържащ информацията за датата на timestamp (щампата на времето ) . Съдържа следните асоциативни елементи:

mday - числово представяне на деня от месеца (от 1 до 31)
wday - числово представяне на деня от седмицата (0 за Sunday и до 6 за Saturday)
mon - числово представяне на месеца ( от 1 до 12 )
year - 4-ри цифрено число, представящо годината ( примерно 2005 )
За пълно описание, проверете PHP reference manual


фиг.9. Кодовата подсказка за функцията getdate()

Вмъкнете в два нови празни реда, намиращи се под останалите, следния код:
$dayOfWeek = $dateComponents['wday'];
$monthName = date('F',mktime(0,0,0,$month,1,$year));

Ще използвате логическото условие if-else, за да пресметнете следващия (next) и предходния (previous) месец, за да ги използвате като навигация. Вмъкнете кода:
if($month == 1) {
$mn=12;
$yn=$year-1;
}
else {
$mn=$month-1;
$yn=$year;
}

Кодовия блок горе, следи за предходния месец. Ако не сте достигнали първия месец на годината (January), можете да намалявате променливата $month и да оставите променливата $year непроменена. Когато достигнете January, предходния месец е December (12 месец), а годината е намалена с единица.

Ще приложите аналогична логика , но за следващия месец. Вмъкнете кода:
if($month == 12) {
$mn2=1;
$yn2=$year+1;
}
else {
$mn2=$month+1;
$yn2=$year;
}

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



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