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

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

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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...");
     }
     }
    }
    
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.

  3. Videos zum Thema
Die Seite wird geladen...
  • Annonce

  • Annonce