Ну вот я дома) Родной форум, родная жизнь. Как-будто вернулся на Кхарак =) Чтоже, продолжим наш забавный уголок кодера. Должен сказать что много воды утекло с тех времён как рухнул форум. Жизнь кидала то в одну сторону то в другую. Было не легко, но пришлось выжить) Вобщих чертах, уже полгода я не принимаю участие в каких либо разработках или же проектах команды. Занимаюсь исключительно вебом. Жизнь заставила) Да и как то по душе мне это. Вобщем слова php, java, html, mysql, apache и bred3 стали родными и вписались в ДНК =)
Ладно, хватит трепаться по чём зря, пора бы уже и честь знать. А начну я своё краткое повествование сегодня именно с web'а, а конкретрней разберём простенький "движок" сайта... с примерами конечно =) Будем писать мы его на php используя естесственно html и JS. Сегодня мы разберём пример простенького информационного сайта с выпадающем меню. Причём будет две версии сайта. Одна - с выпадающем меню вниз. Соответственно меню будет у нас распологаться сверху полоской, под логотипом и названием сайта. И второй вариант это - выпадающее меню вправо. Собственно это рабочие варианты и их можно смело использовать в разработках более серьёзных проектов =)
Теперь от слов к делу. Для начала нам потребуется установить пакет Denver. Его вы можете скачать с моей странички
http://webtestphp.h17.ru/ (так же на моей странице вы сможете найти различную информацию как по web'у так и по другим языкам программирования :о).
Устанавливаем его, там собственно нет ничего сложного, просто лично я в конце установки выбираю второй вариант (это когда виртуальный диск не создаётся при загрузке системы, а грузится патом уже в процессе работы. делается это автоматически как только мы запускаем комплекс). Так, причина номер раз по которой я выбрал Denver. Во первых этот комплекс соответствует структуре большинства интернет-серверов. В него встоено уже всё что нужно, а именно apache+php+mysql. Соответственно не нужно склеивать все три утилиты в одну долгими мутарствами (если вы новичёк в этом деле) чтобы начать работать. Причина номер два: перенос сайта на любой linux'овый сервер происходит с минимальными усилиями, что просто незаминимо. Единственная нехорошая ситуация с денвером да и вообще с сервером apache может возникнуть у людей имеющих Windows 2003 Server, ибо в него уже интегрирован IIS (виндовый сервак) который конфликтует с апачем. Я бы им посоветовал пересадить апач на другой порт или же совсем снести IIS =)
После того как вы установили Denver (Если по дефалту, то рабочая директория со всеми причендалами у вас именно C:\WebServers\) Вобщем всё что нам необходимо для работы у нас есть. Скажу сразу что место где мы будем создавать сайт - это папка HOME. в ней нужно создать каталог с именем url которое вы будете потом набирать в строке браузера. Ну к примеру если у вас сайт имеет имя z-test, то соответственно в папке HOME нужно создать каталог "z-test". В нём нужно создать ещё один каталог с именем "www". И только уже в каталоге WWW мы и будем работать. Т.е. путь к главной странице сайта будет таким: C:\WebServers\home\z-test\www\index.php. Да да да. именно index.php а не .html или там .asp. Тепереча перейдём непосредственно к созданию сайта. Открываем файл с именем index.php и пишем следующее (должен сказать что php очень похож на c++):
//главная страница сайта
Code:
<?
//***********************************************************************************************//
$show = 2; //переменная на отработку главной страницы
//***********************************************************************************************//
//***********************************************************************************************//
// подготовка форм кнопок меню и самого меню //
//***********************************************************************************************//
$space = "<td width=\"16\"></td>";
//кнопка ГЛАВНАЯ СТРАНИЦА
$main = '<td width="126" height="40">
<form action="index.php">
<input type="submit" name="main" value="Главная страница" style="border: 0; background: url(menu.jpg); background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; width: 130; height: 40; cursor: pointer;">
</form>
</td>';
$tspace = ' </td>
</table>
</div>
</div>
</td>';
//кнопки меню Информация
$form_info = "
<form action=\"index.php\" class=\"form_m\">
<input type=\"submit\" name=\"info\" value=\"Информация\" style=\"border: 0; background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; width: 120; height: 20; cursor: pointer;\" onMouseOut=\"Fade(this, '6699cc', '114477');\" onMouseOver=\"Fade(this, '114477', '6699cc')\"><br>
<input type=\"submit\" name=\"shem\" value=\"Схема проезда\" style=\"border: 0; background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; width: 120; height: 20; cursor: pointer;\" onMouseOut=\"Fade(this, '6699cc', '114477');\" onMouseOver=\"Fade(this, '114477', '6699cc')\">
</form>";
$form_00 = ' <td>
<div style="position: absolute;">
<div onMouseOut="hide_menu(1);" onMouseOver="show_menu(1);" style="position: absolute; width: 56; height: 40; visibility: hidden; left: 0; top: 20;" id="m1">
<table class="menu" width="120" cellpadding="0" cellspacing="0" border=0>
<tr><td>';
$form_01 = '
<td width="86" height="40" onMouseOut="hide_menu(1);" onMouseOver="show_menu(1);" style="cursor: pointer;">
<font class="menu">Информация
</td>';
//кнопки меню О Проекте
$form_proj = "
<form action=\"index.php\" class=\"form_m\">
<input type=\"submit\" name=\"price\" value=\"Сроки обучения и стоимость\" style=\"border: 0; background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; width: 250; height: 20; cursor: pointer;\" onMouseOut=\"Fade(this, '6699cc', '114477');\" onMouseOver=\"Fade(this, '114477', '6699cc')\"><br>
<input type=\"submit\" name=\"otdel\" value=\" Отделения \" style=\"border: 0; background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; text-align: right; width: 250; height: 20; cursor: pointer;\" onMouseOut=\"Fade(this, '6699cc', '114477');\" onMouseOver=\"Fade(this, '114477', '6699cc')\"><br>
<input type=\"submit\" name=\"pract\" value=\"Производственная практика\" style=\"border: 0; background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; text-align: right; width: 250; height: 20; cursor: pointer;\" onMouseOut=\"Fade(this, '6699cc', '114477');\" onMouseOver=\"Fade(this, '114477', '6699cc')\"><br>
<input type=\"submit\" name=\"work\" value=\"Учебно-исследовательская работа\" style=\"border: 0; background-color: #114477; color: #ffffff; font-family: system; font-size: 10pt; width: 250; height: 20; cursor: pointer;\" onMouseOut=\"Fade(this, '6699cc', '114477');\" onMouseOver=\"Fade(this, '114477', '6699cc')\">
</form>";
$form_10 = ' <td>
<div style="position: absolute;">
<div onMouseOut="hide_menu(2);" onMouseOver="show_menu(2);" style="position: absolute; width: 56; height: 40; visibility: hidden; left: 0; top: 20;" id="m2">
<table class="menu" width="240" cellpadding="0" cellspacing="0" border=0>
<tr><td>';
$form_11 = '
<td width="150" height="40" onMouseOut="hide_menu(2);" onMouseOver="show_menu(2);" style="cursor: pointer;">
<font class="menu">О Проекте
</td>';
//***********************************************************************************************//
// вывод заголовка и скриптов //
//***********************************************************************************************//
echo "<html>
<head>
<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=windows-1251\">
<title>z-test</title>
<link rel=\"SHORTCUT ICON\" href=\"icon.ico\"/>
<script type=\"text/javascript\">
function show_menu(Code){
document.getElementById(\"m\"+Code).style.visibility=\"visible\";
}
function hide_menu(Code){
document.getElementById(\"m\"+Code).style.visibility=\"hidden\";
}
function openurl(s_url){
window.open(s_url, target=\"mainfr\");
}
var s, c1, c2, r1, g1, b1, r2, g2, b2;
var fTimeout, fObj, fSteps = 25, fDelay = 5;
function Fade(obj, color1, color2){
if (fTimeout) {
clearTimeout(fTimeout);
if (fObj) fObj.style.backgroundColor = c2;
}
fObj = obj; c1 = color1; c2 = color2;
r1 = eval('0x' + c1.substring(0,2));
g1 = eval('0x' + c1.substring(2,4));
b1 = eval('0x' + c1.substring(4,6));
r2 = eval('0x' + c2.substring(0,2));
g2 = eval('0x' + c2.substring(2,4));
b2 = eval('0x' + c2.substring(4,6));
s = 0;
DoFade();
}
function DoFade(){
var d = s/fSteps, m = 1 - d;
fObj.style.backgroundColor = \"#\" + Dec2Hex(r1 * m + r2 * d) + Dec2Hex(g1 * m + g2 * d) + Dec2Hex(b1 * m + b2 * d);
if (s < fSteps) fTimeout = setTimeout('DoFade()', fDelay);
s++;
}
function Dec2Hex(Dec){
var hexChars = new Array(\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"a\", \"b\", \"c\", \"d\", \"e\", \"f\");
var a = parseInt(Dec) % 16, b = (parseInt(Dec) - a)/16;
var hex = \"\" + hexChars[b] + hexChars[a];
return hex;
}
</script>
</head>
<body vlink=\"#000000\" alink=\"#000000\" link=\"#000000\">
<LINK REL=STYLESHEET TYPE=\"text/css\" HREF=\"style.css\">
<!--MAIN TABLE-->
<table cellpadding=\"0\" cellspacing=\"0\" height=\"100%\" width=\"100%\"> <!--height=\"1024\"-->
<tr height=\"200\" valign=\"top\">
<td>
<!--таблица с логотипом-->
<table class=\"top_menu\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout:fixed;\">
<tr>
<td width=\"374\" height=\"200\" align=\"left\" background=\"cr.jpg\" style=\"background-position: center; background-repeat: no-repeat;\"></td>
<td width=\"100%\"></td>
<td width=\"395\" height=\"200\" align=\"right\" background=\"top00.jpg\"></td>
</table>
</td>
</tr>
<tr height=\"40\" valign=\"top\">
<td align=\"center\" valign=\"middle\">
<table class=\"menu\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" height=\"40\" width=\"100%\">
<tr>
<td>
<table cellpadding=\"0\" cellspacing=\"0\" align=\"left\" height=\"40\" width=\"1000\" style=\"table-layout: fixed;\">
<tr>";
//***********************************************************************************************//
// вывод меню //
//***********************************************************************************************//
print "$space"; print "$main";
print "$space"; print "$form_00"; print "$form_info"; print "$tspace"; print "$form_01";
print "$space"; print "$form_10"; print "$form_proj"; print "$tspace"; print "$form_11";
print "$space"; print "<td width=\"100%\"></td>";
echo " </tr>
</table>
</td>
</tr>
</table>
</td>
</tr>";
//***********************************************************************************************//
// обработка кнопок меню и кнопок страниц //
//***********************************************************************************************//
//КОЛЛЕДЖ
if (@$info) {$show = 1; include("00_main/info.php");} else {$show = 0;}
if (@$shem) {$show = 1; include("00_main/shem.php");}
//ОБУЧЕНИЕ В КОЛЛЕДЖЕ
if (@$price) {$show = 1; include("01_ln/price.php");}
if (@$otdel) {$show = 1; include("01_ln/otdel.php");}
if (@$pract) {$show = 1; include("01_ln/pract.php");}
//КНОПКИ НА ДРУГИХ СТРАНИЦАХ
//Информация
if (@$license) {$show = 1; include("00_main/license.php");}
if (@$accred) {$show = 1; include("00_main/accred.php");}
//ГЛАВНАЯ
if ($show==0) {include("main.php"); $show = 1;}
?>
я постарался прокоментировать максимальное количество всего этого безобразия, но думаю стоит начать по порядку...
Краткий экскурс в php. В php переменные объявляются со знаком $<имя_переменной>. Вывод содержимого, насколько мне помниться производится функцией либо print "$<имя_переменной>" либо echo "$<имя_переменной>" либо одно из двух =) Теперь смотрим на кусок кода. В самом начале я объявил переменную логическую $show. Она сразу равна 2, это просто чисто мера предосторожности чтобы даже ни в друг чего =) Далее мы подготавливаем пункты меню. Да, кто-то может сказать что их можно сразу было бы вывести перед обработкой кнопок. Не знаю, как вам, а мне если что, править удобнее одну переменную нежели выискивать нужный кусочек в общей мешанине...
Теперь разберём меню. Оно представляет сабой таблицу, каждый пункт меню есть кнопка. У кнопки стоит тип "submit", т.е. Кнопка с запросом. Хочу заметить, то что каждую кнопку или группу кнопок необхадимо засунуть в тег "<form>" для того чтобы php понял где висит обработчик кнопок необходимо в action указать файл содержащий обработчик. В данном случае все кнопки меню естесственно обрабатываются главной страницей.
Что-то как-то я не по русски излагаю. Совсем забыл... Структура сайта представляет собой таблицу. Начало которой висит в INDEX.PHP, а завершение в остальных файлах сайта =) Многие пробегаясь по куску кода спросят: А где обработчик кнопки "Главная страница"? На что у меня есть ответ: А ЗАЧЕМ? Посмотрите внимательней... Нажимая каждый раз на кнопку, форма реагирует на нажатие и отправляет нас в поисках обработчика кнопки на соответствующую страницу... Нажав на "Главную страницу", скрипт увидит сначала переменную $show, которая равна изначально 2, далее он выведет меню и будет искать чтоже делать с кнопкой. Пробежав по всем IF'ам и ненайдя нужной переменной отвечающей за главную страницу скрипт наткнётся на последний IF где дословно написано что если нету такой кнопки->вывести главную страницу.
Теперь наверняка у новичков возникнет вопрос: Зачем в условиях обработки кнопок перед переменными написана @ (собака)? Поясню, что если этого не сделать, php по дефалту будет выдавать "Warning'и" потому что переменные объявлены в html но лежат в других переменных php... вот такие заморочки, но так было всегда :о)
Теперь для совсем полного счастья нам не достаёт написать ещё пару файликов. Это собственно главная страница, и пару файлов для того чтобы показать как отрабатывать кнопки в других директориях сайта :о)
Итак, создаём файл main.php, в который помещаем дословно следующее:
Code:
<?
echo " <tr>
<td height=\"100%\" width=\"100%\">
<table border=\"0\" width=\"100%\" height=\"100%\">
<tr height=\"8\"><td colspan=\"3\"></td>
<tr><td width=\"10\"> </td><td width=\"100%\" valign=\"top\">
<font><div align=\"justify\">
<u class=\"dark_blue\">z-test</u> - The debate over our past on this world reaches back through the entire documented history of civilization, a period covering over 1300 years. The harsh conditions across this world, Kharak, [A1] fueled the myths of other places and times where we did not have to spend so much of our strength on simple survival. While the issue of our distant past was primarily a religious matter [A2], it wasn’t until the dawning of the Time of Reason [A3] that advances in the biological and chemical sciences revealed a disturbing lack of commonality between our biochemical makeup and that of most Kharakid life. Ironically, it was the birth of the Daiamid Movement, with its many scientific breakthroughs, that created a philosophical environment where the oldest myths and the newest theories could be wedded into what we now have accepted as the XenoGenesis Theory. Except for a small variety of bacteria and a single species of small forager, our helix proteins are completely different from all other forms of life on Kharak. We are left with no other choice but to seriously consider the theory that we are aliens to this world. Of course, this answer only led to more questions.
</div></td><td width=\"10\"> </td>
<tr height=\"8\"><td colspan=\"3\"></td>
</table>
</td>
</tr>
</table>
</body>
</html>";
?>
в принципе, по идее оно же пофигу чё писать на главной, вот и я взял кусок прям из мануала по первому Хомке. Так что не обессудьте. Здесь, как видите, идёт наше продолжение таблицы... и как итог закрываем полностью весь документ. Да, у когото возникнет вопрос, зачем я понаставил столько обратных слешей. Ответ прост. Дело в том что php одинаковые кавычки воспринимает неадекватно и ругается на них, так что если хотите вывести "", то пишите либо " \"\" " либо ' "" '. вот. Кстати Bred3 это всё понимает и подсвечивает. Советаю скачать. Ну а чтобы не рыться по рунету в поисках оного также можете у меня на "сайте" его скачать)
Тепереча создаём папку с именем 00_main к примеру. И в ней создаём пару файлов с именами info.php, shem.php, accred.php, license.php. Приведу их код в том порядке как они записаны а разъясню только первый.
//файл info.php
Code:
<?
if (@$license || @$accred) {include("../index.php");} else {
$lic = '<form action="index.php">
<input type="submit" name="license" value="Лицензия" style="border: 0; background: url(00_main/license_s.jpg); background-color: #cccccc; color: #336699; font-family: system; font-size: 10pt; width: 178; height: 256; cursor: pointer;">
</form>';
$acr = '<form action="index.php">
<input type="submit" name="accred" value="Аккредитация" style="border: 0; background: url(00_main/accred_s.jpg); background-color: #cccccc; color: #336699; font-family: system; font-size: 10pt; width: 178; height: 256; cursor: pointer;">
</form>';
echo " <tr>
<td height=\"100%\" width=\"100%\">
<table border=\"0\" width=\"100%\" height=\"100%\">
<tr height=\"8\"><td colspan=\"3\"></td>
<tr><td width=\"10\"> </td><td width=\"100%\" valign=\"top\">
<font><div align=\"justify\">
<u>Информация</u><p>";
echo "<table><tr><td width=\"100%\" height=\"100%\" valign=\"top\">";
echo "
<font>бла бла бла и всё такое
<p>пишем тут всякий разный текст... думаю понятно =)
";
echo "</td><td valign=\"top\">"; print "$lic"; print "$acr"; echo"</td></table>";
echo "
</div></td><td width=\"10\"> </td>
<tr height=\"8\"><td colspan=\"3\"></td>
</table>
</td>
</tr>
</table>
</body>
</html>";}
?>
здесь значит что мы видим... тут как раз две кнопки, на которых были картинки... по нажатию на которые соответственно должны выводится эти самые картинки в увеличенном виде. Собственно разъясняю как это работает:
1. если была нажата какая либо из двух кнопок, то мы подключаем файл и корневой директории с именем index.php иначе подготавливаем кнопки-картинки и выводим информацию с кнопками-картинками.
2. php, как только мы ткнулись на одну из двух картинок-кнопок смотрит где лежит обработчик, а лежит он в index.php. я его незря положил именно туда, т.к. в итоге мы получим цельную красивую страницу с логотипом, менюшкой и картинкой в большом формате. думаю тут всё понятно =)
да... поскольку я использовал файл со стилями, в котором по умолчанию поставил отступы для страницы по нолям, поэтому внутри таблицы, там где мы выводим текст файлов, я использую ещё одну таблицу ячейки которой "работают" за эти самые отступы...
вот. следуем далее:
//файл shem.php
Code:
<?
echo " <tr>
<td height=\"100%\" width=\"100%\">
<table border=\"0\" width=\"100%\" height=\"100%\">
<tr height=\"8\"><td colspan=\"3\"></td>
<tr><td width=\"10\"> </td><td width=\"100%\" valign=\"top\">
<font><div align=\"justify\">
<u>Схема проезда</u><p>
<center><img src=\"00_main/tmc_map.jpg\" width=\"724\" height=\"732\"></img></center>
</div></td><td width=\"10\"> </td>
<tr height=\"8\"><td colspan=\"3\"></td>
</table>
</td>
</tr>
</table>
</body>
</html>";
?>
//файл accred.php
Code:
<?
echo " <tr>
<td height=\"100%\" width=\"100%\">
<table border=\"0\" width=\"100%\" height=\"100%\">
<tr height=\"8\"><td colspan=\"3\"></td>
<tr><td width=\"10\"> </td><td width=\"100%\" valign=\"top\">
<font><div align=\"justify\">
<center><img src=\"00_main/accred_f.jpg\"></img>
</div></td><td width=\"10\"> </td>
<tr height=\"8\"><td colspan=\"3\"></td>
</table>
</td>
</tr>
</table>
</body>
</html>";
?>
//файл license.php
Code:
<?
echo " <tr>
<td height=\"100%\" width=\"100%\">
<table border=\"0\" width=\"100%\" height=\"100%\">
<tr height=\"8\"><td colspan=\"3\"></td>
<tr><td width=\"10\"> </td><td width=\"100%\" valign=\"top\">
<font><div align=\"justify\">
<center><img src=\"00_main/license_f.jpg\"></img>
</div></td><td width=\"10\"> </td>
<tr height=\"8\"><td colspan=\"3\"></td>
</table>
</td>
</tr>
</table>
</body>
</html>";
?>
теперь текст файла с таблицей стилей, который необходимо разместить рядом с index.php
//файл style.css
Code:
body{
scrollbar-face-color: #114477;
scrollbar-highlight-color: #336699;
scrollbar-3dlight-color: #225588;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #5588bb;
scrollbar-track-color: #336699;
background-image: url();
background-repeat: no-repeat;
background-attachment: fixed;
text: #000000;
text-align: justify;
background-color: #ffffff;
margin: 0;
padding: 0;
}
font{
font-family: verdana, cursor, utopia;
font-size: 10pt;
color: #000000;
}
font.menu{
font-family: system, cursor, utopia;
font-size: 10pt;
color: #ffffff;
}
font.menu2{
font-family: system, cursor, utopia;
font-size: 12pt;
color: #ffffff;
}
b{
font-family: system, arial, cursor, utopia;
font-size: 10pt;
color: #000000;
}
i{
font-family: arial, cursor, utopia;
font-size: 12pt;
color: #000000;
}
u.dark_blue{
font-family: verdana, cursor, utopia;
font-size: 10pt;
color: #114477;
}
font.h2{
font-family: arial;
font-size: 12pt;
color: #000000;
}
table{
border-style: hidden;
border-collapse: collapse;
empty-cells: hide;
}
table.top_menu{
border-style: hidden;
border-collapse: collapse;
background-image: url();
background-repeat: repeat-x;
empty-cells:hide;
}
table.menu{
border-collapse: collapse;
background-image: url(menu.jpg);
background-repeat: repeat-x;
background-color: #114477;
empty-cells: hide;
}
table.bt{
border-collapse: collapse;
background-image: url(menu.jpg);
background-repeat: repeat-x;
background-position: top;
background-color: #114477;
empty-cells: hide;
}
pre{
font-family: arial;
font-size: 10pt;
color: #f4f4f4;
}
form.form_m{
font-family: system, verdana, arial cyr;
border: solid 1 #000000;
background-color: #000000;
padding: 0;
margin: 0;
font-size: 8pt;
}
form.form_link{
font-family: verdana, arial cyr;
border: solid 0 #ffffff;
background-color: #ffffff;
padding: 2;
margin: 0;
font-size: 10pt;
}
собственно на этом первый вариант "движка" простейшего информационного сайта можно считать рассмотренным. Ах да, меню... что могу сказать... меню реагирует на выпадение по id'шнику... т.е. для каждого пункта меню свой id. для пункта информация это 1, для пункта О проекте это 2... и т.д. Подробно описывать работу меню просто уже лень) так что сори) если хотите сами покопайтесь в скрипте =)
рабочую версию прилагаю вложением тут же. а завтра отпишусь по "движку" с выпадающим меню вправо.