Tutoriál:Vytvoření Shoutboxu pomocí PHP a jQuery

V tomto tutoriálu vytvoříme skrýš s PHP a jQuery, který umožní návštěvníkům vašeho webu zanechat si navzájem krátké komentáře. Výkřiky budou uloženy na serveru jako soubory, nebude vyžadována žádná databáze jako MySQL. Pro usnadnění použijeme dvě PHP knihovny - Flywheel pro ukládání výkřiků jako souborů json a RelativeTime pro vytváření lidských čitelných relativních časových značek. K instalaci těchto knihoven použijeme Composer.

Na straně klienta používáme prostý kód jQuery a knihovnu Emoji One, což je bezplatný projekt a knihovna pro přidávání pěkných emotikonů do webových aplikací. Začněme!

Spuštění hlášky

Zdrojový kód si můžete stáhnout z tlačítka Stáhnout výše. Má spoustu komentářů a je snadné ho sledovat. Chcete-li jej spustit, jednoduše jej nahrajte do svého webhostingového prostoru nebo jej přidejte do složky apache htdocs, pokud používáte něco jako XAMPP nebo MAMP. Poté otevřete http://localhost ve svém prohlížeči (nebo na svém webu, pokud jste jej nahráli do svého hostingového prostoru). Zde je několik věcí, které byste měli hledat:

  • Soubory zip již obsahují závislosti, takže nemusíte instalovat Composer. Díky tomu je snadné začít s kódem – jednoduše jej nahrajte a použijte!
  • Ujistěte se, že adresář data/shouts existuje a je možné do něj zapisovat. V opačném případě uvidíte chyby v souboru protokolu a nebudou uloženy žádné výkřiky. Pokud se stále zobrazují chyby, možná jej budete muset upravit na 777.

HTML

Začněme s index.html . Je to běžný dokument HTML5, který zahrnuje naše JavaScriptové knihovny, skripty a šablony stylů. Zde jsou části relevantní pro hlášku:

index.html

<div class="shoutbox">

    <h1>Shout box <img src='./assets/img/refresh.png'/></h1>

    <ul class="shoutbox-content"></ul>

    <div class="shoutbox-form">
        <h2>Write a message <span>×</span></h2>

        <form action="./publish.php" method="post">
            <label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
            <label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
            <input type="submit" value="Shout!"/>
        </form>
    </div>

</div>

Pomocí JavaScriptu vložíme publikované výkřiky do prvku

    . Formulář je ve výchozím nastavení skrytý a zobrazí se pouze po kliknutí na záhlaví "Napsat zprávu".

    Kód JavaScript

    A tady je naše script.js , díky kterému výše uvedené HTML funguje:

    assets/js/script.js

    $(function(){
    
        // Storing some elements in variables for a cleaner code base
    
        var refreshButton = $('h1 img'),
            shoutboxForm = $('.shoutbox-form'),
            form = shoutboxForm.find('form'),
            closeForm = shoutboxForm.find('h2 span'),
            nameElement = form.find('#shoutbox-name'),
            commentElement = form.find('#shoutbox-comment'),
            ul = $('ul.shoutbox-content');
    
        // Replace :) with emoji icons:
        emojione.ascii = true;
    
        // Load the comments.
        load();
    
        // On form submit, if everything is filled in, publish the shout to the database
    
        var canPostComment = true;
    
        form.submit(function(e){
            e.preventDefault();
    
            if(!canPostComment) return;
    
            var name = nameElement.val().trim();
            var comment = commentElement.val().trim();
    
            if(name.length && comment.length && comment.length < 240) {
    
                publish(name, comment);
    
                // Prevent new shouts from being published
    
                canPostComment = false;
    
                // Allow a new comment to be posted after 5 seconds
    
                setTimeout(function(){
                    canPostComment = true;
                }, 5000);
    
            }
    
        });
    
        // Toggle the visibility of the form.
    
        shoutboxForm.on('click', 'h2', function(e){
    
            if(form.is(':visible')) {
                formClose();
            }
            else {
                formOpen();
            }
    
        });
    
        // Clicking on the REPLY button writes the name of the person you want to reply to into the textbox.
    
        ul.on('click', '.shoutbox-comment-reply', function(e){
    
            var replyName = $(this).data('name');
    
            formOpen();
            commentElement.val('@'+replyName+' ').focus();
    
        });
    
        // Clicking the refresh button will force the load function
    
        var canReload = true;
    
        refreshButton.click(function(){
    
            if(!canReload) return false;
    
            load();
            canReload = false;
    
            // Allow additional reloads after 2 seconds
            setTimeout(function(){
                canReload = true;
            }, 2000);
        });
    
        // Automatically refresh the shouts every 20 seconds
        setInterval(load,20000);
    
        function formOpen(){
    
            if(form.is(':visible')) return;
    
            form.slideDown();
            closeForm.fadeIn();
        }
    
        function formClose(){
    
            if(!form.is(':visible')) return;
    
            form.slideUp();
            closeForm.fadeOut();
        }
    
        // Store the shout in the database
    
        function publish(name,comment){
    
            $.post('publish.php', {name: name, comment: comment}, function(){
                nameElement.val("");
                commentElement.val("");
                load();
            });
    
        }
    
        // Fetch the latest shouts
    
        function load(){
            $.getJSON('./load.php', function(data) {
                appendComments(data);
            });
        }
    
        // Render an array of shouts as HTML
    
        function appendComments(data) {
    
            ul.empty();
    
            data.forEach(function(d){
                ul.append('<li>'+
                    '<span class="shoutbox-username">' + d.name + '</span>'+
                    '<p class="shoutbox-comment">' + emojione.toImage(d.text) + '</p>'+
                    '<div class="shoutbox-comment-details"><span class="shoutbox-comment-reply" data-name="' + d.name + '">REPLY</span>'+
                    '<span class="shoutbox-comment-ago">' + d.timeAgo + '</span></div>'+
                '</li>');
            });
    
        }
    
    });

    Knihovna Emoji One má verzi pro JavaScript i PHP. V metodě appendComments používáme funkci emojione.toImage() k převodu všech napsaných smajlíků na emotikony. Podívejte se na všechny podporované funkce a podívejte se na tento praktický web s kódem emoji. Nyní, když je frontend připraven, přejděme k backendu.

    Kód PHP

    Máme dva soubory – publish.php a load.php. První přijme POST požadavek na uložení výkřiků do datového úložiště a druhý vrátí 20 posledních výkřiků. Tyto soubory návštěvníci neotevírají přímo – zpracovávají pouze požadavky AJAX.

    publish.php

    <?php
    
    // Include our composer libraries
    require 'vendor/autoload.php';
    
    // Configure the data store
    
    $dir = __DIR__.'/data';
    
    $config = new \JamesMoss\Flywheel\Config($dir, array(
        'formatter' => new \JamesMoss\Flywheel\Formatter\JSON,
    ));
    
    $repo = new \JamesMoss\Flywheel\Repository('shouts', $config);
    
    // Store the posted shout data to the data store
    
    if(isset($_POST["name"]) && isset($_POST["comment"])) {
    
        $name = htmlspecialchars($_POST["name"]);
        $name = str_replace(array("\n", "\r"), '', $name);
    
        $comment = htmlspecialchars($_POST["comment"]);
        $comment = str_replace(array("\n", "\r"), '', $comment);
    
        // Storing a new shout
    
        $shout = new \JamesMoss\Flywheel\Document(array(
            'text' => $comment,
            'name' => $name,
            'createdAt' => time()
        ));
    
        $repo->store($shout);
    
    }

    Zde přímo používáme knihovnu Flywheel, kterou jsme zmínili na začátku. Jakmile je nakonfigurován, můžete ukládat jakýkoli typ dat, která budou zapsána jako soubor JSON do složky data/shouts. Čtení těchto výkřiků se provádí v load.php:

    načíst.php

    <?php
    
    require 'vendor/autoload.php';
    
    // If you want to delete old comments, make this true. We use it to clean up the demo.
    $deleteOldComments = false;
    
    // Setting up the data store
    
    $dir = __DIR__.'/data';
    
    $config = new \JamesMoss\Flywheel\Config($dir, array(
        'formatter' => new \JamesMoss\Flywheel\Formatter\JSON,
    ));
    
    $repo = new \JamesMoss\Flywheel\Repository('shouts', $config);
    
    // Delete comments which are more than 1 hour old if the variable is set to be true.
    
    if($deleteOldComments) {
    
        $oldShouts = $repo->query()
                    ->where('createdAt', '<', strtotime('-1 hour'))
                    ->execute();
    
        foreach($oldShouts as $old) {
            $repo->delete($old->id);
        }
    
    }
    
    // Send the 20 latest shouts as json
    
    $shouts = $repo->query()
            ->orderBy('createdAt ASC')
            ->limit(20,0)
            ->execute();
    
    $results = array();
    
    $config = array(
        'language' => '\RelativeTime\Languages\English',
        'separator' => ', ',
        'suffix' => true,
        'truncate' => 1,
    );
    
    $relativeTime = new \RelativeTime\RelativeTime($config);
    
    foreach($shouts as $shout) {
        $shout->timeAgo = $relativeTime->timeAgo($shout->createdAt);
        $results[] = $shout;
    }
    
    header('Content-type: application/json');
    echo json_encode($results);

    Zahrnuli jsme kód, který odstraní výkřiky starší než hodinu. Tuto funkci používáme k udržení čistoty ukázky. Pokud chcete, můžete jej povolit. Po výběru výkřiků také vypočítáváme pro člověka čitelné relativní časové razítko pomocí knihovny RelativeTime.

    S tímto je naše hláska připravena! Můžete jej vložit na svůj web, přizpůsobit si jej a změnit kód jakýmkoli způsobem. Doufáme, že se vám bude líbit!