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

Изтегли Всички файлове

Във Internet информационната джунгла е много трудно човек да остане видим.

http://www.interaktonline.com/

Бла, бла, бла..............бла.

Да започваме:) Набързо за сайта:

Ще представлява динамичен сайт, извеждащ в списък, динамично екстрактнатите статии или новини от базата данни. Посетителите ще могат да четат статиите в отделни страници, да сърфират между разделените по теми статии и т.н. Като администратори ще можете да добавяте нови теми и да поствате нови статии, които автоматично ще бъдат съхранявани в базата данни. За по-голяма функционалност и по-удобно управление на дизайна, сайта ще е базиран на темплейт, който ще можете да модифицирате отделно, по всяко време на денонощието.

Уроците ще са доста, но затова пък ще са изтощителни:)

Е, накрая удоволствието ще си заслужава. И така.

Изисквания

Операционна система: Windows

Денвер - знаете откъде. (или някое апаче като XAMPP)

И разбира се Dreamweaver MX 2004.

Инсталирайте Денвер и Dreamweaver MX 2004. Ще поизчакаме:)

На десктопа изскочиха иконите на Денвъра. Стартираме го и след като се появи червеното перо там долу някъде до часовника да се поразходиме до C:WebServershomelocalhostwww.

Тук ще създадеме папката blg и във нея папката img.

Сега отиваме в My Documents и създаваме пак, папка blg и в нея папка img. Във папката img ще поставиме logo.jpg , която ще присъства в .zip-а който, ще Ви предоставим за сваляне от сайта.

Дефиниране на сайта в Dreamweaver

Ето как сме конфигурирали тази секция за примерния сайт

Local Info section:

Site name: blg
Local root folder: C:/Documents and Settings/niama/My Documents/blg/
Refresh local file list automatically: отметнато
Default images folder:C:/Documents and Settings/niama/My Documents/blg/img/
Cache: Enable cache
Remote Info section:

Access: Local/Network
Remote folder: C:/WebServers/home/localhost/www/blg/
Refresh remote file list automatically: отметнато
Automatically upload files to server on save: отметнато
Testing Server section:

Server model: PHP_MySQL
Access: Local/Network
Testing server folder: C:/WebServers/home/localhost/www/blg/
Refresh remote file list automatically: отметнато
URL prefix: http://localhost/blg/
Следва да създадеме 4 страници за Вашето приложение:

index.php
article.php
topic.php
post.php
За да създадете всеки от тези файлове:

Убедете се blg сайта е отворен във Files панела.
Кликнете с десен бутон върху името на сайта.
Изберете New File от изскочилото меню.
Въведете името на файла и натиснете Enter.
Повторете тези стъпки и за 4-те файла изброени горе.

Изграждане на базата данни

След като сайта Ви е настроен, да хвърлиме по-близък поглед върху архитектурата на базата данни. Всеки динамичен сайт е движен от база данни, която дефинира структурата и организацията на данните, които ще манипулирате. Базата данни съхранява цялата информация на сайта и може да бъде достъпена чрез сървъра на приложението, като използваме запитвания. Съответната информация от която се нуждае посетителя е върната като набор от резултати (recordset), предизвикани от запитването.

За да създадете и управлявате Ваша собствена MySQL база данни, може да използвате някой от многото инструменти предлагащи приятелски интерфейс за работа с бази данни. Един такъв инструмент е и използваният от нас phpMyAdmin.

Да разгледаме изискванията на приложението. Понеже сайта ще бъде нещо като журнал (blog), в основата си той съдържа списък от статии(новини).Можете да групирате статиите по теми и всяка статия има асоциирани към нея коментари, поствани от потребителите.Какво имаме: статии, теми, коментари, потребители. Можете да предположите, че базата данни ще съдържа 4-ри таблици, всяка съхраняваща една от горните структури на данни. Засега ще оставиме тези за коментари и потребители.

Да разгледаме другите две таблици и кореспондиращия им SQL код предизвикващ създаването им.

Теми: blg_topic_top

id_top Primary key: уникален числов идентификатор за всяка тема

title_top Заглавието на темата. То ще бъде изобразено в браузъра.

description_top Кратко описание на темата

Както можете да видите от следния SQL код, той говори сам за себе си.

CREATE TABLE blg_topic_top (
id_top int(11) NOT NULL auto_increment,
title_top varchar(100) NOT NULL default '',
description_top varchar(255) NOT NULL default '',
PRIMARY KEY (id_top));

Забележка: Вие използвате primary key, който е поле от тблицата уникално идентифициращ записите в таблиците.Стойността на primary key трябва да е уникална и не може да бъде null. Обикновено primary key е настроен на auto_increment, което означава, че стойността му нараства автоматично всеки път, когато е добавен нов запис към таблицата. Гарантира се, че изискванията налагани от primary key, са изпълнени.

Статии: blg_article_art

id_art Primary key: уникален числов идентификатор за всяка тема

idtop_art Foreign key: численият ID на темата към която тази статия е асоциирана

title_art Заглавието на статията. То ще бъде изобразено в браузъра.

description_art Кратко описание на съдържанието на статията. Ще бъде изобразено в списъка на статиите.

text_art Съдържанието на статията.

date_art Датата и часа, когато статията е била постната. Ще бъдат използвани за сортиране и извикване на статиите по дата. Автоматично, ще бъдат вмъкнати в таблицата.

CREATE TABLE blg_article_art (
id_art int(11) NOT NULL auto_increment,
idtop_art int(11) NOT NULL default '0',
title_art varchar(100) NOT NULL default '',
description_art varchar(255) NOT NULL default '',
text_art longtext NOT NULL,
date_art datetime default NULL,
PRIMARY KEY (id_art));

Забележка: Foreign key е поле от таблицата отнасящо се към (целещо се към) специфичен ключ, обикновено primary key, във друга таблица. Това е удобен начин за логическо свързване на информацията от явно несвързани таблици. В нашия случай, Вие линквате всяка статия към темата, към която принадлежи. Използвайте idtop_art foreign key в таблицата за статиите да се отнася към idtop primary key от таблицата за темите.

Сега след като имате SQL скрипта за генериране на blog базата данни, подкарайте го на сървъра за база данни. От сайта Ни можете да даунлоуднете всички файлове нужни за създаването на blog-а, а в случая с базата данни използвайте файла blg_blog.sql от пакета за даунлоуд. Включете следният ред в началото, ако желаете да създадете отделна база данни.

create database blg_blog;

За да заредите вашата база с примерни данни използвайте, data.sql от пакета за даунлоуд.

Забележка: Когато дефинирате база данни, добре е да сте сигурни че няма да се появят конфузии с имената. Препоръчваме следните правила:

Дайте на таблиците от една и съща база данни общ префикс (във Вашият случай, blg_ ), за да ги различаваме от други таблици притежание на други бази данни съхранявани на същия сървър.
Дайте на всички полета от една и съща таблица общ суфикс( пример: всички полета от таблицата blg_comment_com завършват с _com )
Дайте на всички foreign и primary ключове префикс id.
В Нашият случай достигате до панела на phpMyAdmin чрез http://localhost/phpmyadmin

Създаване на Dreamweaver Template

Следващата стъпка е създаване на сайт темплейт дефиниращ плана на положението и графичният аспект на Вашият blog.

Забележка: Темплейта е фиксиран план на положението. Можете да дефинирате в темплейта редактируеми региони за документите базирани на този темплейт. Използвате темплейтите за да контролирате, кои елементи от страницата могат да бъдат редактирани от потребителите. Една от най-мощните употреби на темплейтите е способността им за ъпдейт на множество страници от раз.

За да създадете blog темплейта:

Отворете Dreamweaver.
Отворете blog сайта, който дефинирахте, кликвайки върху името му от изскочилото меню във Files таба на Files панела.
Убедете се, че работите във Local view, която сте избрали във Files таба.
Селектирайте File>New и изберете Template page>PHP template от General таба, както е показано на фиг.1 долу.



фиг.1. Създаване на нова PHP темплейт страница с използване на New Document диалоговата кутия

Кликнете Create. Отваря се празна( blank) страница.
Да разгледаме за момент плана на разположението. Blog страниците, би следвало да имат следната основна организация:

Хедър (header), съдържащ логото на сайта
Футър (footer), където са вмъкнати copyright информацията и линкове
Навигационно меню, където е изобразен списък с темите
Главна зона, за показване списъкът на статиите
фиг.2 показва генералният план на положението



фиг.2. Базов план на положението на темплейта

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

Във Вашият случай хедър и футър секциите, както и лявото меню трябва да останат неизменни за целия сайт. Единствената секция, която се променя е централната в страницата, изобразяваща извикваната от посетителя информация.

За да дефинирате плана на сайта, ще използвате HTML таблица. Няма нужда да се безпокоите за HTML кода зад нея. Първо, създайте таблица с две колони и три реда:

Изберете Insert>Table.
Попълнете появилата се Table диалогова кутия, както е показано на фиг.3


фиг.3. Table диалогова кутия

таблицата трябва да заема цялата страница, така че ширината(width), трябва да е настроена на 100%
от естетично естество, направете невидими table borders, настройвайки Border thickness на 0.
Cell padding и Cell spacing дефинират пространството вътре във и между клетките
Кликнете в клетка и забележете как tag selector-а и Property inspector-а се променят в съответствие. Ще използвате тези два инструмента за да селектирате и форматирате различни елементи от темплейта. Tag selector-a показва йерархията на таговете обграждащи текущата селекция.

Забележка: Ако не виждате Property inspector, изберете Window>Properties.

А сега форматирайте таблицата както следва:

Кликнете в една от левите клетки.
Задайте и width(W) 15% във Property inspector.
Изберете първия ред кликвайки в него и избирайки <tr> тага от tag selector, както е показано на фиг.4

фиг.4. Избиране на първия ред с tag selector

Кликнете Merge бутона от Property inspector както е показано на фиг.4 с червеното заграждение
Приложете същите операции за последния ред.
Изберете всяка таблична клетка и задайте за нея Vertical alignment да е Top във Property inspector.
Таблицата би трябвало да изглежда като на фиг.5



фиг.5. Как трябва да изглежда в момента Вашият темплейт

Съхранете темплейт файла избирайки File>Save. Изскача съобщение предупреждаващо Ви, че не сте създали редактируеми региони. Кликнете OK за да продължите.
Забележка: Страница базирана на темплейт, който няма дефинирани региони за редактиране, не може да бъде модифицирана. Вие ще дефинирате такива региони по-късно.

Във Save As Template диалоговата кутия, изберете blg, където ще използвате този темплейт.
Наименувайте файла blgtemplate.
Кликнете Save.
Dreamweaver създава специална папка Templates във root папката на сайта. Всички темплейт файлове, ще се съхраняват в тази папка.

Dreamweaver задава на всички темплейт файлове специално DWT разширение. Ако името на темплейта е blgtemplate, както е във Вашия случай съответното име ще стане blgtemplate.dwt.php.

Следва да редактирате секциите на Вашият темплейт: хедър, футър и меню.

Ще продължим по темата в Урок 1.1




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