Pohodlná aktualizace záznamů v databázi

12. května 2002

•

Aktualizace dat v databázi, pokud ji provádíte častěji, se stává poměrně zdlouhavou a pracnou. Neustálé vyhledávání a „reloady“ stránek po vyvolání SQL dotazu práci také příliš nezrychlí. Ukáži vám, jak lze vše usnadnit a alespoň částečně urychlit.

Pro názornost předpokládejme, že jsme majiteli virtuálního zverimexu a budeme chtít aktualizovat počet a pohlaví hlodavců v našem internetovém obchodě. Simulátor kódu je sice bez možnosti úpravy dat v tabulce, ale jako ukázka postačuje. Jako první krok si necháme vyhledat v tabulce zvirata všechny hlodavce a vypíšeme si je do tabulky. První stránka pro výběr druhu bude obsahovat formulář asi v této podobě:

…….
<form action=“zmena.php“ method=“post“>
<select name=“druh“ >
    <option>vyber druh
    <option value=“hlodavec“ >hlodavci
    <option value=“plaz“ >plazy
    <option value=“ryba“ >ryby
    ……….
</select>
<input type=“submit“ value=“najdi“ >
</form>
………

Formulář s proměnnou bude odeslán na stránku zmena.php, která bude mít tuto podobu:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN“>
<html>
<head>
<title>AKTUALIZACE</title>
<style>
      .seda  {
   background-color:#CCCCCC;
   text-align:center;
   font-weight:bold;
   cursor:default;
}
      .nadpis {
   position: absolute;
   left:2px;
   top:-15px;
   font-size:x-small;
   cursor:default;
}
</style>
</head>
<body>
<center><h4 >AKTUALIZACE</h4></center>
<form >
<input type=“button“ value=“Nové hledání“ onclick=“location=’index.php'“ >
</form>
// začátek 1. části
<?php
if(!$aktiv){
echo“Klikni na položku k úpravě“;
}
else {
@$spojeni=mysql_Connect(„hostitel“,“uzivatel“, „heslo“);
if(!$spojeni):
echo“nepodařilo se připojit k serveru“;
endif;
$result = mysql(„obchod“, „UPDATE zvirata SET pocet=’$ctvrty‘, samec=’$paty‘, samice=’$sesty‘ where id=’$prvni'“);
echo“<hr width=’90%‘>“;
echo“<CENTER><TABLE BORDER=1   unselectable=’on‘ style=’font-weight:bold;width:50%;background-color:#99CCCC‘>“;
echo „Bylo změněn záznam číslo „;
echo $prvni;
&nbsp &nbsp echo „<br>“;
$result = mysql(„obchod“, „SELECT * FROM zvirata where id=’$prvni‘ „);
  echo „<TR >\n“;
  echo „<TD ALIGN=CENTER>“.mysql_Result($result, $i, „id“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „druh“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „nazev“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „pocet“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „samec“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „samice“).
       „</TD>\n“ ;
&nbsp   echo „</TR>\n“;
  echo „</TABLE></CENTER>“;
}
?>
// ..konec 1. části
<hr width=“90%“>
// ..začátek 2. části
<TABLE BORDER=1 CELLPADDING=2  unselectable=’on‘ style=“cursor:default;“>
<TR>
    <TH>Číslo</TH>
    <TH>Druh</TH>
    <TH>Název</TH>
    <TH>Počet</TH>
    <TH>Samců</TH>
    <TH>Samic</TH>
</TR>
&nbsp <?php
@$spojeni=mysql_Connect(„hostitel“,“uzivatel“, „heslo“);
if(!$spojeni):
echo“nepodařilo se připojit k serveru“;
endif;
$result = mysql(„obchod“, „SELECT * FROM zvirata WHERE druh=’$druh‘ ORDER BY ‚nazev'“);
$pocet = mysql_NumRows($result);
echo „V tabulce \“$druh\“ je
      $pocet záznamů.\n“;
echo „<BR>“;
for($i=0; $i<$pocet; $i++):
  echo „<TR  onclick=’vypis()‘>\n“;
  echo „<TD ALIGN=CENTER  >“.mysql_Result($result, $i, „id“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „druh“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „nazev“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „pocet“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „samec“).
       „</TD>\n“;
  echo „<TD >“.mysql_Result($result, $i, „samice“).
       „</TD>\n“ ;
&nbsp   echo „</TR>\n“;
endfor;
?>
</TABLE>
// ..konec 2. části
// ..začátek 3. části
<div id=“formul“ style=“border:1 ridge #CCCCCC; padding:15 5 5 5; background-color:#CCCCCC; display:none; position:absolute“>
<form name=“zamen“ METHOD=POST>
<span STYLE=“position:relative;“><input class=“seda“ unselectable=“on“ name=“prvni“ size=“3″ type=“text“ value=““><SPAN unselectable=“on“ class=“nadpis“>číslo</span> </span>
<span STYLE=“position:relative;“><input class=“seda“ unselectable=“on“ name=“druhy“ size=“15″ type=“text“ value=““><SPAN unselectable=“on“ class=“nadpis“>druh</span></span>
<span STYLE=“position:relative;“><input class=“seda“ unselectable=“on“ name=“treti“ size=“15″ type=“text“ value=““><SPAN unselectable=“on“ class=“nadpis“>název</span></span>
<span STYLE=“position:relative;“><input name=“ctvrty“ size=“3″ type=“text“ value=““>
<SPAN unselectable=“on“ class=“nadpis“>počet</span></span>
<span STYLE=“position:relative;“><input name=“paty“ size=“3″ type=“text“ value=““>
<SPAN unselectable=“on“ class=“nadpis“>samců</span></span>
<span STYLE=“position:relative;“><input name=“sesty“ size=“3″ type=“text“ value=““>
<SPAN unselectable=“on“ class=“nadpis“>samic</span></span>
<?php
echo „<input name=’druh‘ type=’hidden‘ value=’$druh‘>“;
echo „<input name=’aktiv‘ type=’hidden‘ value=true>“;
?>
<center>
<input type=“button“ style=“margin:-10px 5px -20px 0;“ onclick=“hide()“ value=“Storno“>
<input type=“submit“ style=“margin:-10px 5px -20px 0;“ value=“Změnit“ >
</center>
</form>
</div>
// ..konec 3. částí
</body>
</html>

Kód je rozdělen do tří částí, jejichž funkci si nyní přiblížíme. Stránka při prvním načtení zobrazí tlačítko, které nás vrátí na předešlou stránku pro nový výběr kategorie. V první části kódu proměnná $aktiv ještě nemá hodnotu, takže bude zobrazen text Klikni na….

Ve druhé části se z databáze vypíší do tabulky zvířata, která odpovídají proměnné z předchozí stránky s parametry číslo, druh, název, celkový počet, počet samců a počet samiček. Všimněte si v elementu <TR> ovladače onclick=vypis(), který aktivuje skript po kliknutí na řádek tabulky.

Třetí část kódu nebude zobrazena, protože příslušný DIV má zatím parametr display: none. Zde jsou důležitá dvě skrytá pole. První s názvem druh uchovává proměnnou $druh z výběru z předešlé stránky. Druhé, s výše zmiňovanou proměnnou $aktiv, zajistí v první části kódu po první aktualizaci zobrazení upraveného řádku.

Nyní už chybí jen obslužný skript, pomocí kterého budeme odesílat data z tabulky do formuláře. Ten bude vypadat takto:

<SCRIPT>
function vypis() {
   var najdi=event.srcElement.parentElement.getElementsByTagName(„TD“);
   document.zamen.prvni.innerText=najdi[0].childNodes[0].nodeValue;
   document.zamen.druhy.innerText=najdi[1].childNodes[0].nodeValue;
   document.zamen.treti.innerText=najdi[2].childNodes[0].nodeValue;
   document.zamen.ctvrty.innerText=najdi[3].childNodes[0].nodeValue;
   document.zamen.paty.innerText=najdi[4].childNodes[0].nodeValue;
   document.zamen.sesty.innerText=najdi[5].childNodes[0].nodeValue;
   poz_Y = event.clientY + document.body.scrollTop-100;
   formul.style.top=poz_Y;
   formul.style.display=“;
}
function hide() {
formul.style.display=’none‘;
}
</SCRIPT>

Po kliknutí na řádek tabulky, který chceme upravit, se nám nad ním objeví formulář ze třetí části kódu, který byl dosud schovaný. Pozici formuláře určí proměnná poz_Y, která je o zadaný počet bodů nad kursorem. Do polí formuláře budou pomocí JavaScriptu načtena data z řádku, který máme v úmyslu upravovat. První rámeček řádku zleva bude mít index 0 - 'najdi[0]...', poslední length-1' - najdi[najdi.length-1]'.

Formulář nám povolí upravovat pouze ta data, která jsme si předem určili. Předpokládejme, že nebudeme aktualizovat primární klíče a další důležité položky používané při prohledávání databáze. Tyto parametry se zobrazují se šedým pozadím a obsahují ovladač unselectable=on, který brání jejich výběru.

V příkladě je povolena změna celkového počtu jedinců, počtu samců a počtu samiček. Po úpravě položek ve formuláři odešleme data kliknutím na tlačítko Změnit. Po odeslání se v databázi provede aktualizace a v první části (proměnná $aktiv je již definována skrytým polem ve formuláři) se zobrazí řádek tabulky s novými hodnotami. Ve druhé části se do tabulky vypíší aktualizované položky zvoleného druhu. Kliknutím na řádek v tabulce můžeme pokračovat v aktualizaci.

Vzhledem k použitému JavaScriptu vyvstává problém s nezávislostí na prohlížeči. Skript správně zpracuje pouze Internet Explorer 5+. Update databáze ale většinou nepatří k činnostem, které vykonává běžný návštěvník webových stránek, a tak lze i přes tento nedostatek popisovaný kód s úspěchem provozovat.