[JavaScript] [Tutorial] PHP- & AJAX-Gästebuch, auch ohne JavaScript

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Hadean, 28. Mai 2009 .

Schlagworte:
  1. 28. Mai 2009
    [Tutorial] PHP- & AJAX-Gästebuch, auch ohne JavaScript

    Hi.

    In diesem Tutorial möchte ich eine kurze Möglichkeit für die Umsetzung eines AJAX-Gästebuchs mit Ausweichmöglichkeit für Ausgeschaltenes JavaScript aufzeigen.

    Ich werde hier jedoch keine großen Erklärungen für meinen PHP- oder JS-Code anstellen, also legen wir gleich los:

    Folgende PHP-Datei nimmt die Eingaben für unser Gästebuch auf. Dieser ist erst einmal egal, ob die Daten synchron oder asynchron per JS oder per Seiten-redirect kommen, die POST-Methode wird in beiden Fällen verwendet.

    PHP:
    if(
            isset(     $_POST [ 'name' ]) && ( trim ( $_POST [ 'name' ]) !==  '' ) &&
            isset(     $_POST [ 'email' ]) && ( trim ( $_POST [ 'email' ]) !==  '' ) &&
            isset(     $_POST [ 'content' ]) && ( trim ( $_POST [ 'content' ]) !==  '' ) &&
            isset(     $_POST [ 'public' ])

        )
        {
            function      shortify ( $type ,  $str )
            {
                if(     $type  ===  'name' )
                {
                         $str  =  preg_replace ( '/^\r|\n|\r\n|\r\s\n$/' ,  '' ,  $str );
                         $str  =  htmlentities ( $str ,  ENT_QUOTES ,  'UTF-8' );
                         $str  =  ucwords ( strtolower ( trim ( $str )));
                    return      $str ;
                }
                elseif(     $type  ===  'content' )
                {
                         $str  =  preg_replace ( '/^\r{2,}|\n{2,}|\r\n{2,}|\r\s\n{2,}$/' ,  '\n' ,  $str );
                         $str  =  htmlentities ( $str ,  ENT_QUOTES ,  'UTF-8' );
                         $str  =  preg_replace ( '~\S{60}~' ,  '\0 ' ,  trim ( $str ));
                    return      $str ;
                }
                elseif(     $type  ===  'email' )
                {
                         $str  = ( preg_match ( '/[\.a-z0-9_-]+@[a-z0-9-]{2,}\.[a-z]{2,6}$/i' ,  $str )) ?  $str  :  FALSE ;
                         $str  =  ucfirst ( strtolower ( $str ));
                    return      $str ;
                }
            }
                 $db -> doQuery ( "
                INSERT INTO
                    `gbook`
                (
                    `id`,
                    `ip`,
                    `active`,
                    `public`,
                    `confirmed`,
                    `stamp`,
                    `name`,
                    `email`,
                    `content`
                )VALUES(
                    '',
                    '"     . $_SERVER [ 'REMOTE_ADDR' ]. "',
                    0,
                    "     .(integer) $_POST [ 'public' ]. ",
                    0,
                    NOW(),
                    '"     . shortify ( 'name' ,  $_POST [ 'name' ]). "',
                    '"     . shortify ( 'email' ,  $_POST [ 'email' ]). "',
                    '"     . shortify ( 'content' ,  $_POST [ 'content' ]). "'
                )
            "     );
                 header ( 'Location: ./gaestebuch.html' );
        }
    Um den folgenden Code gehts im Großteil in unserem Tut: ein kleiner Auszug aus der Index-PHP-Datei:

    PHP:
    echo ( $seite  ===  'gaestebuch' ) ?  '<body onload="document.getElementById(\'gbuch\').action = \'void%200\';">' . "\n" :  '<body>' . "\n" ;
    Die eigentliche Funktion dieser Zeile ist irrelevant, sie läd das Body-Tag mit einem zusätzlichen Parameter wenn die Gästebuchseite angefordert wird. Doch hierum dreht es sich! Folgender Code zeigt das Loginformular, welches über den Einträgen steht:

    HTML:
    <form action="./set_db_entries.php" accept-charset="UTF-8" method="post" id="gbuch" onsubmit="sendInput(); return false;">
 <fieldset>
 <legend>Eintragen</legend>
 <ol>
 <li>
 <label for="name">Namen:</label>
 <input maxchars="40" onchange="javascript:checkInput(1);" type="text" name="name" />
 </li>
 <li>
 <label for="email">EMail-Adresse:</label>
 <input maxchars="120" type="text" onchange="javascript:checkInput(2);" name="email" />
 </li>
 <li><fieldset>
 <legend>Publizieren</legend>
 <label for="false"><input type="checkbox" name="public" />Ver&ouml;ffentlichen</label>
 </fieldset></li>
 <li><label for="content">Inhalt:</label><textarea cols="30" rows="5" name="content"></textarea></li>
 <li><input type="submit" value="Senden" /><input type="reset" value="Zur&uuml;cksetzen" /></li>
 </ol>
 </fieldset>
 </form>
    Es handelt sich hierbei um ein Formular, welches auf eine PHP-Datei verweist, welche die Eingaben validieren und ggf. in die Datenbank schreiben soll. Dieses Formular jedoch erfordert einen Seiten-Reload beim versenden, und wenn wir für das Versenden des Formulars über das HTTPRequestObjekt eine Javascript-Funktion im action-Parameter des Form-Tags aufrufen, werden die Personen, welche Javascript ausgeschalten haben, beim Posten gehindert. Deshalb der Code der Index-Datei. Im onload-Parameter des Body-Tags wird per DOM der action-Parameter des Formulars auf null gesetzt (void%200 steht für void 0), wer Javascript eingeschalten hat, wird beim Senden des Formulars keinen Seitenreload hinnehmen müssen.

    Falls noch einer Interesse an dem AJAX-Krämpel hat, folgend der Code (vielen Dank geht an den #javascript.de im Quakenet). Als kleines Zusatzfeature wird noch bei richtigen Eingaben so ein kleines Icon als Background-Image in das Input-Feld geladen...

    Code:
    /**
* xhr by Fabian Grutschus a.k.a crash
*
* @param string Method [get/post]
* @param string URL
* @param string data
* @param string Callback-function (optional)
* @param array Callback-function parameters (optional)
*/
 
/*@cc_on @if (@_win32 && @_jscript_version >= 5) if (!window.XMLHttpRequest)
window.XMLHttpRequest = function() { return new ActiveXObject('Microsoft.XMLHTTP') }
@end @*/
function xhr(method, url, data, cb, apply_para) {
 method = method.toLowerCase();
 var req;
 req = new XMLHttpRequest();
 req.open(method, url + (data && method == 'get' ? '?' + data : ''), true);
 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 if (method == 'post') {
 req.setRequestHeader("Method", "POST " + url + " HTTP/1.1");
 req.setRequestHeader("Content-Length", data.length);
 }
 req.onreadystatechange = function() {
 if (req.readyState == 4 && req.status == 200) {
 if (cb) {
 cb.apply(null, [req].concat(apply_para));
 }
 }
 }
 req.send(data);
}

function sendInput()
{
 var frm = document.getElementById('gbuch');
 if(frm.elements["name"].value.replace(/^\s|\s+$/g, '') == '')
 {
 alert('Bitte einen Namen eingeben...');
 frm.elements["name"].focus();
 return false;
 }
 if(frm.elements["email"].value.replace(/^\s|\s+$/g, '') == '')
 {
 alert('Bitte eine Emailadresse eingeben...');
 frm.elements["email"].focus();
 return false;
 }
 if(frm.elements["content"].value.replace(/^\s|\s+$/g, '') == '')
 {
 alert('Bitte einen Inhalt eingeben...');
 frm.elements["content"].focus();
 return false;
 }

 var qry = "";

 qry += (frm.elements["public"].checked == true) ? "public=1&" : "public=0&";
 qry += "name=" + frm.elements["name"].value + "&";
 qry += "email=" + frm.elements["email"].value + "&";
 qry += "content=" + frm.elements["content"].value;

 xhr("POST", "./", qry)
 frm.style.display = 'none';
}

function checkInput(typ)
{
 var frm = document.getElementById('gbuch');
 if(typ == 1)
 {
 if(frm.elements["name"].value.match(/^[a-zA-Z\s]{2,}$/))
 {
 frm.elements["name"].style.background = "url(./img/green.jpg) no-repeat center right";
 }
 else
 {
 frm.elements["name"].style.background = "url(./img/red.jpg) no-repeat center right";
 alert("Bitte nur Zeichen von A-Z eingeben...");
 }
 }
 else if(typ == 2)
 {
 if(frm.elements["email"].value.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6})+$/))
 {
 frm.elements["email"].style.background = "url(./img/green.jpg) no-repeat center right";
 }
 else
 {
 frm.elements["email"].style.background = "url(./img/red.jpg) no-repeat center right";
 alert("Bitte eine valide Emailadresse eingeben...");
 }
 }
}
     
    + Multi-Zitat Zitieren
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten