T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
29th February

Avtomatska preusmeritev pri uporabniku prijaznem sporočilu o napaki

Z pomočjo PHP funkcij (Output Control Functions) lahko "nadzorujemo" kdaj bo izhodni tok podatkov (v našem primeru HTML) poslan za obdelavo brskalniku. S pomočjo teh funkcij lahko vse podatke zadržimo v vmesnem stanju in jih pošljemo brskalniku šele takrat, ko mi to želimo oz. zahtevamo. Kot je bilo že v samem namenu bloga povedano se ne bomo spuščali na posamezne funkcije, kot je naprimer ob_start, zatorej samo preprosto povejmo, da na začetku skripte (prve klicane skripte - najverjetneje index.php) dodamo ob_start, s katerim dosežemo zgoraj omenjeno delovanje. Zakaj bi nam shranjevanje izhodnih podatkov v začasni notranji pomnilnik lahko koristilo? V našem primeru pri oblikovanju uporabniku prijaznega sporočila.

V našem primeru bomo uporabili napake v povezavi z bazo. Primer, ko želimo vzpostaviti povezavo:

PHP:
  1. echo 'Tole sporočilo bi videli, če ne bi prišlo do napake pri povezavi do baze';
  2.  
  3. $connection = @mysql_pconnect('ne_bo_delalo', 'vedno_bo', 'error');
  4. if ($connection){
  5.     if (!(@mysql_select_db('ne_ne_tudi_to_ne_bo_delalo', $connection)) ){
  6.         error('A database error occured when trying to select a database');
  7.     }
  8. }else{
  9.     error('A database error occured when trying to connect to a database', '/blog/');
  10. }

Poskušamo najprej vpozstaviti povezavo do MySQL strežnika, nato pa še izbrati bazo. Pri obeh primerih lahko pride do napake (v našem vedno, ker je to primer hehe:P), ki jo na lep način posredujemo uporabniku. Primer funkcije, ki skrbi za podajanje informacij uporabniku.

PHP:
  1. function error($error, $location = false){
  2.     ob_end_clean();
  3.     $location   = ($location === false) ? 'javascript:history.go(-1);' : $location;
  4.     $text     = '
  5.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.     <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="sl">
  7.     <head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.         <title>TRSplet » Blog Archive » PHP &amp; Primer uporabniku prijaznega sporočila</title>
  10.         <style type="text/css">
  11.             div#error {margin: 20% auto auto auto; padding: 20px; background: #CCC; width: 500px; border: 2px solid #FFF;}
  12.         </style>
  13.     </head>';
  14.  
  15.     $text      .= "
  16.     <body>
  17.         <div id='error'>
  18.             <h2>Error</h2>
  19.             <p>$error. Browser will redirect you in <strong><span id='timespan'>".REDIRECT_TIME."</span>s</strong>, you can also click <a href='$location' target='_parent'>here</a> for manual redirection.</p>";
  20.         if (!DEBUG){
  21.             $text .= "
  22.                 <script type='text/javascript'>
  23.                     //tukaj pride javascript, ki jo vidite v spodnjem oknu, kjer je bila premaknjena v posebno okno za izboljšano berljivost. Celotno kodo si lahko ogledati v priponki
  24.                    setInterval(\"redirectDueToError('$location',".REDIRECT_TIME.")\",1000);
  25.                 </script>";
  26.         }
  27.         $text .= '
  28.         </div>
  29.     </body>
  30.     </html>';
  31.     echo $text;
  32.     exit;
  33. }

Uporabljene konstante pri zgoraj napisani funkciji (mislim, da njihova imena dovolj nazorno pokažejo čemu so namenjene):

PHP:
  1. define('REDIRECT_TIME', 3); // v sekundah
  2. define('DEBUG', true);

Opis funkcije:

  1. funkcija počisti vso izhodno vsebino, ki je trenutno shranjena v vmesnem stanju (internal buffer) - v našem primeru je to "Tole sporočilo bi videli, če ne bi prišlo do napake pri povezavi do baze" string.
  2. v primeru, da ne podamo kam mora funkcija preusmeriti uporabnika se pomaknemo v zgodovino za eno stran nazaj
  3. defeniramo design sporočila (poljubno)
  4. izpišemo sporočilo ...
  5. ... in v primeru, da DEBUG konstanta ni vrednosti false pokličemo javascript, ki bo čez X sekund avtomatsko preusmerila uporabnika. X čas je določen z konstanto REDIRECT_TIME.

Javascript funkcija, ki skrbi za avtomatsko preusmeritev in posodabljanje našega span elementa, ki odšteva sekunde (oz. čas) do avtomatske preusmeritve:

JAVASCRIPT:
  1. function redirectDueToError(link, interval){
  2.     if (typeof(this.time) === 'undefined'){
  3.         this.time = interval;
  4.     }
  5.  
  6.     if (this.time === 0){
  7.         this.time = interval;
  8.         location.href = link;
  9.     }else{
  10.         this.time = this.time-1;
  11.         var spantime = document.getElementById('timespan');
  12.         spantime.innerHTML = this.time;
  13.     }
  14. }

Z pomočjo setInterval dosežemo, da se naša funkcija redirectDueToError pokliče na vsako sekundo. V tej funkciji preverjamo trenutni čas, ga odštevamo in v primeru da dosežemo vrednost 0 sekund preusmerimo uporabnika na želeno (podano) lokacijo.

Zakaj uporaba DEBUG? Če delamo na strani je uporabno, da se sporočilo obrži več časa. Seveda je izboljšav še veliko, primeri:

  • izpis SQL stavkov v primeru debugiranja in podobne podatke, ki nam lahko koristijo v fazi izdelovanja strani ali popravljanja
  • V primeru 404 napake lahko posredujemo novo stran, kjer ima uporabnik še polje za iskanje in podobno
  • posredujete tudi informacije uporabniku na lep način brez ostalih podatkov, kar pomeni, da bo uporabnik namenil več pozornosti tem informacijam

Vsekakor stvar, ki se jo da še zelo dodelati. Je pa treba tukaj paziti, da se ne posreduje preveč informacij uporabniku, ki (bolj vešči med njimi) le-to izrabijo.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Avtomatska posodobitev PHP skript preko centralne lokacije
  2. AJAX na enostaven način
  3. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  4. Javascript – avtomatsko osveževanje strani – refresh page – reload page
  5. Spreminanje input type text v input type password – Javascript
  6. Javascript – alert – confirm – prompt
  7. Napiši svoj PHP error handler (obdelovalec napak:P)
  8. Javascript – delci uporabne kode
  9. Javascript – print – tiskanje – document – onload
  10. Igranje s frejmi (frameset, frame)

3x komentirano na “Avtomatska preusmeritev pri uporabniku prijaznem sporočilu o napaki”

  1. zaxy je napisal:

    Zelo lepo napisano!

  2. Roky je napisal:

    Tnx ...

  3. .: TRSplet - internetne storitve .: » Blog Archive » PHP setlocale (seznam držav in kode le-teh) je napisal:

    [...] Ob_clean se lahko uporablja tudi za uporabniku prijazna sporočila. [...]

Dodaj komentar