Když se řekne adresář, představí si většina z nás papírový blok popsaný adresami a telefony známých, kolegů nebo přátel. Dnes se ale adresáře rychle přesouvají do mobilních telefonů, tak proč si jeden nevytvořit také na internetu?

Nejdříve si musíme uvědomit, co vlastně do adresáře chceme zapsat. Jméno, telefon a adresa jsou základní požadavky. Mimo mobilního telefonu si uložíme také číslo domů a na pracoviště. Protože si vytvoříme adresář na internetu, využijeme jeho nejrozšířenější služby, emailu, a uložíme si ho také. Pak budeme moci posílat uloženým lidem email přímo z adresáře. Další kontaktní údaj může být číslo ICQ.

Jako zajímavost si budeme schopni uložit také datum narození každého přítele, abychom nikdy nezapomněli na jeho narozeniny. Proto také doplníme funkci, která bude ukazovat všechny přátele, kteří mají v aktuálním měsíci narozeniny.

Již hotový adresář si můžete prohlédnout na adrese http://trinity.wz.cz/adresar3.

Seznam funkcí

Teď víme, co si můžeme o přátelích do adresáře uložit. Jaké funkce bude ale adresář mít?

• přidávání, upravování a mazání záznamů
• vypsání počtu zápisů v adresáři
• vyhledávání podle křestního jména, příjmení, adresy nebo emailu
• vypsání přátel kteří mají v měsíci narozeniny

Další kladnou vlastností adresáře je kompletní validita XHTML 1.1 a CSS2 ověřená na veřejném validátoru W3C. Z toho důvodu nejsou v kódu žádné formátovací tagy (align, width), ale vše je pomocí CSS. Komu není práce s CSS jasná, nemusí se bát, vše je jednoduše vysvětleno.

Databázová tabulka

Naše aplikace celá stojí na mySQL. Tuto tabulku musíme vložit do databáze.

CREATE TABLE adresar (
   id int(9) unsigned NOT NULL auto_increment,
   firstname varchar(50) NOT NULL,
   lastname varchar(50) NOT NULL,
   adresa varchar(255) NOT NULL,
   home varchar(20) NOT NULL,
   mobile varchar(20) NOT NULL,
   work varchar(20) NOT NULL,
   email varchar(50) NOT NULL,
   icq varchar(20) NOT NULL,
   day tinyint(2) NOT NULL,
   month varchar(10) NOT NULL,
   year varchar(4) NOT NULL,
   PRIMARY KEY (id)
);

Z anglických názvu si můžeme odvodit, k čemu jednotlivé sloupce patří. Pro nastavení údajů o databázi použijeme jeden soubor, ve kterém jsou uloženy všechny přístupové údaje. Tento soubor pak příkazem include(); vložíme do všech stránek. Soubor include/config.php.

<?php
$dbname = "";    //jméno databáze
$dbserver = "localhost";   //databázový server (adresa)
$dbuser = "";   //jméno uživatele
$dbpass = "password";   //heslo
$table = "adresar";   //název tabulky
?>

Další soubor obstarává spojení s databází. Spojení bychom mohli uskutečnit na každé stránce jednotlivě, ale v externím souboru vloženém do každé stránky je to výhodnější. Tyto vkládané soubory máme uloženy ve složce include. Zdrojový kód souboru include/dbconnect.php.

<?php
include("include/config.php");

$db = mysql_connect("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname",$db);
?>

Jestliže jsme mluvili o výhodách vkládání externích souborů, musím připomenout, že ve složce include jsou ještě dva soubory header.php a footer.php, které obstarávají grafický vzhled. Pro editování vzhledu stačí jen upravit tyto dva soubory, které jsou jen v XHTML.

Samotný adresář

Složka include je tady naplněna a můžeme se podívat na soubory, které už přímo uvidíme na obrazovce monitoru. Na prvním souboru index.php si ukážeme, jak zjistit kolik lidí máte zapsáno v databázi.

<?php
include ("include/header.php");
include ("include/dbconnect.php");

$sql="SELECT * FROM $table";
$result = mysql_query($sql);
$resultsnumber = mysql_num_rows($result);

echo "Celkem je v adresáři $resultsnumber lidí.";

include ("include/footer.php");
?>

Jaký byl postup při sestavení stránky? Nejprve jsme vložili hlavičku, pak soubor který obstarává spojení s databází. Následný postup je jednoduchý. Vybereme z databáze data a pak jen spočítáme, na kolik řádcích jsou. Výsledek uložíme do proměnné a zobrazíme v textu.

Podobně jednoduché budou i následující stránky. Ze začátku pro nás bude asi nejdůležitější vkládání záznamů do databáze. Data vložíme jednoduše přes formulář. Protože jeden příklad je víc než tisíc slov následuje ukázka. Rozbor souboru insert.php.

<?php
include ("include/header.php");
?>

<h1>Přidání údajů</h1>

Po vložení hlavičky následuje kontrola jestli byl formulář odeslán. Pokud byl již odeslán, vloží údaje do databáze a ukáže oznámení o správném vložení. V případě že ne, zobrazí formulář.

<?php
include("include/dbconnect.php");
if($submit)
{
$sql = "INSERT INTO $table  VALUES
 ('$firstname','$lastname','$adresa','$home','$mobile','$work','$email','$icq',
'$day','$month','$year')";
$result = mysql_query($sql);
echo "<br/><br/>Informace byly vloženy do databáze.\n";
}
else
{
?>

Protože zobrazujeme dlouhý formulář, použití příkazu echo by bylo těžkopádné. Proto jsme PHP odstavili a formulář si vytvoříme jen v XHTML. Hned u prvního tagu jsme museli kvůli validitě XHTML použít CSS. Tento zápis je ekvivalentem atributu width.

<form method="post" action="insert.php">

<table style="width: 100%" cellspacing="0" cellpadding="0">
<tr>
<td>
Křestní jméno: </td>
<td>
<input type="Text" name="firstname" size="35"/>
</td>
</tr>
<tr>
<td>Příjmení: </td>
<td>
<input type="Text" name="lastname" size="35"/>
</td>
</tr>
<tr>
<td>Adresa: </td>
<td>
<textarea name="adresa" rows="5" cols="35"></textarea>
</td>
</tr>
<tr>
<td><b>Telefon</b></td>
<td> </td>
</tr>
<tr>
<td>Domů: </td>
<td>
<input type="Text" name="home"/>
</td>
</tr>
<tr>
<td>Mobil: </td>
<td>
<input type="Text" name="mobile"/>
</td>
</tr>
<tr>
<td>Práce:</td>
<td>
<input type="Text" name="work"/>
</td>
</tr>
<tr>
<td><b>Kontakt</b></td>
<td> </td>
</tr>
<tr>
<td>Email: </td>
<td>
<input type="Text" name="email" size="35"/>
</td>
</tr>
<tr>
<td>ICQ: </td>
<td>
<input type="Text" name="icq" size="35"/>
</td>
</tr>
<tr>
<td><b>Ostatní</b></td>
<td> </td>
</tr>
<tr>
<td>Datum narození: </td>
<td>
<select name="day">
<option value="1" selected="selected">1</option>

Abychom nemuseli zdlouhavě psát téměř stejný kód, použijeme cyklus for který to udělá místo nás.

<?php
for ($counter=2; $counter<32; $counter++)
{
  echo "<option value=\"$counter\">$counter</option>";
}
?>
</select>
<select name="month">
<option value="Leden" selected="selected">Leden</option>
<option value="Únor">Únor</option>
<option value="Březen">Březen</option>
<option value="Duben">Duben</option>
<option value="Květen">Květen</option>
<option value="Červen">Červen</option>
<option value="Červenec">Červenec</option>
<option value="Srpen">Srpen</option>
<option value="Září">Září</option>
<option value="Říjen">Říjen</option>
<option value="Listopad">Listopad</option>
<option value="Prosinec">Prosinec</option>
</select>
<input type="text" name="year" size="4" maxlength="4"/>
</td>
</tr>
</table>
<input type="Submit" name="submit" value="Vložit">
</form>
<?php
}

include ("include/footer.php");
?>

Až si vložíme do adresáře všechny, které potřebujeme, jistě je budeme chtít mít zobrazeny ne jednom místě. A to si právě teď ukážeme.

Seznam záznamů

Seznam osob bude v jednoduché tabulce. Abychom adresáři trochu přidali na vzhledu pomůžeme si jednoduchým scriptem. Sudé a liché řádky budou mít jinou barvu. Vedle jména člověka bude také odkaz na prohlédnutí detailů, opravu údajů a smazání. Soubor seznam.php.

<?php
include ("include/header.php");
include("include/dbconnect.php");

$result = mysql_query("SELECT * FROM $table ORDER BY lastname",$db);
echo "<table cellpadding=\"2\" cellspacing=\"1\">";

$alternate = "1";
while ($row = mysql_fetch_array($result)) {
$id = $row["id"];
$firstname = $row["firstname"];
$lastname = $row["lastname"];

if ($alternate == "2") {
$color = "#ffffff";
$alternate = "1";
}
else {
$color = "#efefef";
$alternate = "2";
}
echo "<tr style=\"background-color: $color\"><td>$lastname, $firstname</td>
<td><a href=\"view.php?id=$id\">Detaily</a></td>
<td><a href=\"edit.php?id=$id\">Upravit</a></td>
<td><a href=\"delete.php?id=$id\">Odstranit</a></td>
</tr>";
}
echo "</table>";

include ("include/footer.php");
?>

Samotný výběr z tabulky jistě nemusím objasňovat, ale blíže se podíváme na různě obarvené řádky tabulky. V proměnné alternate máme uloženou hodnotu 1. Jestliže má hodnotu 1 použije určenou barvu a změní hodnotu na 2. Jestliže je hodnota 2 požije druhou barvu a změní hodnotu na 1. A tak stále dokola.

S ukázkou zdrojového kódu končí i článek. Příště si ukážeme, jak upravit údaje a způsob jak je smazat. Stranou nezůstane ani vyhledávání. Pak už bude adresář plně funkční.