V dalších dílech seriálu navážu na vaše znalosti o SQL z předchozích tří dílů a spolu si naprogramujeme bazar, čili jakousi formu inzerce na Internetu. Celá aplikace bude mít několik funkcí. Samozřejmostí je přidávání inzerátů, mazání inzerátů a výpis inzerátů. Mezi ty dodatečné funkce počítám stránkování výpisu z databáze a mimo jiné konverze inzertního centra na wapové stránky (.wml), aby si i početná komunita uživatelů mobilních telefonů přišla na své.
Začnu tvorbou tabulek v databázi. Bazar bude mít tři části - sekce koupím, prodám a ostatní. Proto si vytvoříme i tři tabulky se stejnými názvy (pouze bez háčků a čárek). Každá tabulka bude mít několik sloupců:
ID - identifikační číslo inzerátu
PASSWORD - heslo k inzerátu (abychom zabránili v mazání cizích inzerátů)
TITLE - titulek inzerátu
DATE - datum přidání
TEXT - a samotný obsah
Jsem si jist, že byste tvorbu tabulek zvládli sami, ale pro urychlení práce vám tu předkládám již hotové výpisy struktur:
Struktura tabulky `koupim`:
CREATE TABLE koupim (
ID tinyint(6) NOT NULL default '0',
PASSWORD varchar(200) default NULL,
TITLE varchar(255) default NULL,
DATE varchar(50) default NULL,
TEXT text,
PRIMARY KEY (ID)
) TYPE=MyISAM;
Struktura tabulky `ostatni`:
CREATE TABLE ostatni (
ID tinyint(6) NOT NULL default '0',
PASSWORD varchar(200) default NULL,
TITLE varchar(255) default NULL,
DATE varchar(50) default NULL,
TEXT text,
PRIMARY KEY (ID)
) TYPE=MyISAM;
Struktura tabulky `prodam`:
CREATE TABLE prodam (
ID tinyint(6) NOT NULL default '0',
PASSWORD varchar(200) default NULL,
TITLE varchar(255) default NULL,
DATE varchar(50) default NULL,
TEXT text,
PRIMARY KEY (ID)
) TYPE=MyISAM;
|
Předpokládám, že když se pouštíte do programování bazaru, již znáte alespoň základy HTML a PHP. Náš skript bude mít jednu zajímavou funkci a sice budete moci jednoduše změnit barvy pozadí, tabulek a dalších prvků stránek. Toho docílíme předdefinováním veškerých barev do souboru config.php. V každém souboru pak tento soubor načteme. Aby skript věděl, kam má dát které barvy, budeme nísto těchto barev pouřívat aliasy - proměnné, zastupující barvy. Obsah souboru config.php bude následující:
|
config.php
<?
$pozadi = "#eeeeee";
$hlavicka_inzeratu = "silver";
$telo_inzeratu = "#fffeee";
$odkazy = "navy";
$strankovani = 10; // kolik inzerátů se má zobrazit najednou
$zpet = "<a href=\"../index.php\">Zpět na index</a>"; // odkaz na úvodní stránku (pokud bude bazar ve jiné složce než stránky, není třeba zadávat cestu)
$email = "xx@xx.cz" // váš email
?>
|
V aplikaci budeme využívat i CSS stylů. Proč? Je s nimi jednodušší práce. Styly budou v souboru style.php. Už v tomto souboru využijeme naddefinované proměnné - tedy přesně jednu proměnnou - $odkazy. Bude velmi důležité, aby se ve stránkách načetl nejdříve soubor config.php a až po něm style.php. To proto, abychom v souboru style.php mohli využít již načtených proměnných ze souboru config.php.
|
style.php
<style type="text/css">
H1 {font-family: verdana; font-size: 16pt; font-weight: bold; text-decoration: underline; color: black; text-align: center; FONT-STYLE: italic}
div.rc1 {font-family:arial; font-size:11px; color:black; text-decoration:none; margin-left: 3px; margin-right: 3px; margin-top: 1px; margin-bottom: 1px}
a {color: <? echo $odkazy ?>; font-family: Arial; font-size: 11px; text-decoration: none; }
a:hover {color: <? echo $odkazy ?>; font-family: Arial; font-size: 11px; text-decoration: underline overline; }
.color {color: #000066;}
</style>
|
Další důležitým skriptem bude fce.php. Zde bude funkce obstarávající připojování k databázi. Do zvláštního souboru ji dávám proto, protože se k databázi budeme připojovat častěji a kdybychomi pak chtěli změnt například přístupové heslo do databáze, museli bychom měnit všechna připojení, která jsme zapsali. Stejně jako config.php, i fce.php budeme do každé stránky načítat pomocí include.
|
fce.php
<?
function spojeni()
{
if (!@$spojeni = MySQL_Connect("localhost", "", "")):
echo "Nepodařilo se spojit s databází. Chvíli vyčkejte a zkuste to znovu.<br>Pokud ani při opakovaném pokusu neuspějete, kontaktujte webmastera - ".$email.".";
die;
endif;
if (!@$select = MySQL_Select_Db("bazar")):
echo "Chyba při výběru databáze! Chvíli vyčkejte a zkuste to znovu.<br>Pokud ani při opakovaném pokusu neuspějete, kontaktujte webmastera - ".$email.".";
die;
endif;
}
?>
|
Nyní konečně přišla řada na skript pridej.php - hlavní náplň tohoto dílu. Tento skript nám umožní přidávat záznamy do databáze. Bude složen z několika částí, které vám všechny vysvětlím. Podstatné části skriptu, o kterých budu mluvit, budou zvýrazněny.
První částí bude struktura html stránky spolu s formulářem. Já jsem tento formulář vylepšil několika změnami ve stylech. Už v tomto souboru načteme soubory config.php, fce.php a style.php, jak můžete vidět na ukázce. Řekl jsem, že místo barev budeme používat aliasy - jak si můžete povšimnout ve třetím červeném textu. Je to prosté vypsání barvy na požadované místo užitím php příkazu ECHO. Poslední zvýraznění má za funkci přiřadit klávesové zkratce ALT+O funkci odeslání formuláře (to je jen pro pohodlí uživatelů). Je zde použito ještě přiřazení klávesové zkratky ALT+R pro reset. Myslím, že v této části už by neměl být žádný problém. Pustím se tedy do části s PHP příkazy.
|
pridej.php - html formular
<?include "config.php"; include "fce.php"; ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<? include "style.php"; ?>
</head>
<body bgcolor="<? echo $pozadi ?>">
<form>
<H1>Bazar</H1>
<hr size="1" color="black" width="500">
<table width="500" cellspacing="0" cellpadding="0" border="0" align="center">
<tr><td align="left">
Zde bude MENU
</td></tr>
</table>
<hr size="1" color="black" width="500">
</form>
... a tady bude vložená php část
<form action="" method="post">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" valign="bottom"><div class="rc1"><b>Titulek inzetátu :</b> </div><input type="text" name="titulek" value="" size="30" style="background-color:<? echo $telo_inzeratu ?>; border: 1 solid #000000"></td></tr>
<tr><td> </td></tr>
<tr><td><div class="rc1"><b>Popis :</b></div></td></tr>
<tr>
<td><textarea name="popis" cols="45" rows="10" style="background-color:<? echo $telo_inzeratu ?>; border: 1 solid #000000; scrollbar-3d-light-color: <? echo $telo_inzeratu ?>; scrollbar-arrow-color: #000000; scrollbar-base-color: #000000; scrollbar-dark-shadow-color: #000000; scrollbar-face-color: <? echo $telo_inzeratu ?>; scrollbar-highlight-color: <? echo $telo_inzeratu ?>;"></textarea></td></tr>
<tr><td> </td></tr>
<tr>
<td align="left" valign="bottom" colspan="2"><div class="rc1"><b>Inzerát patří do sekce :</b> </div>
<select name="sekce">
<option name="sekce" VALUE="" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">- - - - - - - - - - - - -</option>
<option name="sekce" VALUE="prodam" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Prodám</option>
<option name="sekce" VALUE="koupim" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Koupím</option>
<option name="sekce" VALUE="ostatni" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Ostatní</option>
</select>
<tr><td> </td></tr>
<tr><td><div class="rc1"><b>Heslo :</b> </div><input type="password" name="heslo" value="" size="20" style="background-color:<? echo $telo_inzeratu ?>; border: 1 solid #000000"></td></tr>
<tr><td><div class="rc1"><b>Heslo znovu :</b> </div><input type="password" name="heslo2" value="" size="20" style="background-color:<? echo $telo_inzeratu ?>; border: 1 solid #000000"></td></tr>
<input type="hidden" name="action" value="send">
</td></tr>
<tr><td> </td></tr>
<tr>
<td align="center"><label for="odeslat" accesskey="O"></label><button type="submit" id="odeslat" name="odeslat" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22;" title="Odešle údaje k dalšímu zpracování. (levý ALT+O)"><u>O</u>deslat</button> <label for="reset" accesskey="R"><button type="reset" id="reset" name="reset" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22;" title="Vymaže obsah formuláře. (levý ALT+R)"><u>R</u>eset</button></td></tr>
<tr><td><div class="rc1"><br>TIPY:<br>1. Titulek nevolte příliš dlouhý, stačí pár výstižných slov.<br>2. Do textu nezapomeňte uvést kontakty na vás.<br>3. Po odeslání vám bude sděleno ID, které je nutno si zapamatovat. <br>Toto ID po vás bude požadováno při dalších úpravách inzerátu společně s heslem.</div></td></tr>
</table>
</form>
</body></html>
|
V první části následující tabulky je umístěn JavaScript, který zajistí kontrolu vložených údajů ve formuláři a při chybě vyhodí výstražné okno. JavaScripty bývají pro kontrolu formulářů hodně využívány z důvodu, že návštěvník nemusí po odeslání čekat, až se mu zobrazí okno s chybou, ale na chybu je upozorněn již před odesláním údajů. Přiznám se, že JavaScriptu příliš nevelím, a tak jsem tento skript opsal z knihy. Ostatně hlavní náplní této části nejí onen JavaScript, nýbrž PHP skript umístěný hned pod ním. Pojďme se tedy podívat blíže na funkce...
Hned na začátku je podmínka IF. Ta říká, že pokud prvek označený jménem action bude mít hodnotu send (čili pokud se formulář odešle), provede se celá série příkazů v podmínce. Jako první z příkazů je námi vytvořená funkce spojeni();. Ta se spojí s databází a příkaz MySQL_Query pak provede výběr maximální hodnoty ID. Další řádek údaje setřídí a uloží do proměnné $in. Nyní je potřeba zjistit, jaké ID má mít právě přidávaný inzerát. To provedeme tak, že si zjistíme hodnotu maximálního ID v databázi a zvýšíme jej o 1. Toto číslo potom uložíme do proměnné $id. Nakonec databázi zavřeme a ukončíme podmínku.
Všiměte si, že formulář je schován v podmínce if($zobrazit):. Takto zajistíme, aby se po odeslání již znovu nezobrazoval. Pokud se stránka zobrazuje poprvé, hodnota proměnné $zobrazit je nastavena na true. Došlo-li však k jeho odeslání, tato proměnná se nastaví na false a tím zamezí v zobrazení formuláře.
V části konverze nebezpečných znaků je uvedeno pár příkazů, které mají zamezit vkládání html značek do inzerátů (HTMLSpecialChars()) a převádění konců řádků na tagy <BR> (NL2BR()).
Dostáváme se k části vkládání inzerátů. Celé je to opět v podmínce IF($action == "send") (proč asi? :-) ). V MySQL_Query se tentokrát provede vložení zápisu do databáze - to už znáte z předchozích lekcí. Nakonec nám skript předvede, v jaké podobě jsme inzerát vložili a nabídne nám přesměrování do jeho sekce. Toť vše.
|
pridej.php - php část
<script language="javascript">
function validate(formular)
{
if (formular.titulek.value=="")
{
formular.titulek.focus();
alert("Pole titulek musíte vyplnit!");
return false;
}
if (formular.popis.value=="")
{
formular.popis.focus();
alert("Pole popis musíte vyplnit!");
return false;
}
if (formular.sekce.value=="")
{
formular.sekce.focus();
alert("Pole sekce musíte určit!");
return false;
}
if (formular.heslo.value=="")
{
formular.heslo.focus();
alert("Pole heslo musíte vyplnit!");
return false;
}
if (formular.heslo.value!=formular.heslo2.value)
{
formular.heslo.focus();
alert("Hesla se neshodují. Vyplňte je prosím znovu.");
return false;
}
else
return true;
}
</script>
<?
if ($action == "send"):
spojeni();
$vysledek = MySQL_Query("SELECT Max(ID) FROM $sekce");
$in = MySQL_Fetch_Row($vysledek);
$id=$in[0]+1;
MySQL_Close();
endif;
$zobrazit=true;
//konverze nebezpečných znaků
$titulek=HTMLSpecialChars($titulek);
$popis=NL2BR(HTMLSpecialChars($popis));
$heslo=HTMLSpecialChars($heslo);
$datum=Date("Y-m-d H:i:s");
//skript...
if($action == "send"): //pokud byl formulář odeslán...
$zobrazit=false; //tak ho už nezobrazuj...
spojeni();
@$set = MySQL_Query("INSERT INTO $sekce VALUES ('$id', '$heslo', '$titulek', '$datum', '$popis')");
if (!$set):
echo "Chyba při ukládání dat do databáze. Kontaktujte prosím webmastera - ".$email.".";
break;
endif;
MySQL_Close();
echo "<table align=\"center\" valign=\"top\" border=0 cellpadding=0 cellspacing=0 width=\"500\" bgcolor=\"".$pozadi."\"><tr><td colspan=2><div class=\"rc1\" align=\"left\"><b>Váš inzerát byl úspěšně přidán v následující podobě:</b></div></td></tr><tr><td colspan=2> </td></tr><tr><td width=\"300\" bgcolor=\"".$hlavicka_inzeratu."\"><div class=\"rc1\" align=\"left\">$titulek</div></td><td width=\"200\" bgcolor=\"".$hlavicka_inzeratu."\"><div class=\"rc1\" align=\"left\">$datum</div></td></tr><tr><td colspan=2 bgcolor=\"".$telo_inzeratu."\"> </td></tr><tr><td colspan=2 bgcolor=\"".$telo_inzeratu."\"><div class=\"rc1\" align=\"left\">$popis</div></td></tr><tr><td colspan=2> </td></tr><tr><td colspan=2><div class=\"rc1\" align=\"left\"><span style=\"color:red\"><b>ID inzerátu je $id</b></span></div></td></tr><tr><td colspan=2> </td></tr><tr><td colspan=2><div class=\"rc1\" align=\"left\">Nyní klikněte <a href=\"$sekce.php\">sem</a>. Budete přesměrováni do sekce $sekce, kde můžete s inzerátem dále manipulovat</div></td></tr></table>";
endif;
?>
<? if($zobrazit): ?>
<form action="" method="post" onsubmit="return validate(this)"> // prvek form opravte podle příkladu
. . . Zde bude html formulář. . . .
</form>
<? endif; ?>
|
Jo, málem bych zapomněl na podstatnou část - menu. Já jsem zvolil zozbalovací seznam, abychom trochu ušetřili místo. Krátký JavaScript zajistí přesměrování do dané sekce po vybrání jedné z položek. Část menu umístěte na označené místo v části html.
Pokud se nechcete se skládáním skriptu piplat, stáhněte si ZIP.
Příště si naprogramujeme skript koupim.php, který bude vypisovat data z tabulky koupim. Zároveň si povíme něco o stránkování výpisu a upravíme si skript fce.php.
Do té doby vám přeji příjemné dny.
|
pridej.php - menu
<SCRIPT LANGUAGE="JavaScript">
<!--
function go(s) { var t=s.options[s.selectedIndex].value;
if (t!='') window.location.href=t; }
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<select onchange="go(this)">');
document.write('<option VALUE="" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Vyberte si z kategorií</option>');
document.write('<option VALUE="prodam.php" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Prodám</option>');
document.write('<option VALUE="koupim.php" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Koupím</option>');
document.write('<option VALUE="ostatni.php" style="border-style: solid; border-width: 1; background-color:<? echo $telo_inzeratu ?>; height:22; width:150;">Ostatní</option>');
document.write('</select>');
//-->
</SCRIPT>
|
Čevelíček Marek
|