shoutbox.js

Gesponsorde koppelingen

PHP script bestanden

  1. shoutbox.php
  2. index.html
  3. shoutbox.js
  4. functions.php
  5. db_connect.php

« Lees de omschrijving en reacties



Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<?php
$(document).ready(function(){
    /**
     * Globale variablen die worden gezet zodra deze pagina wordt geladen.
     * De volgende attributen hebben met elkaar te maken
     *
     * - inputUser: Deze variable is gekoppeld met het input veld naam. ( nick ) Alle informatie wordt in deze variable opgeslagen
     * - inputMessage: Deze variable is gekoppeld met het veld waarin het bericht kan worden getypt. ( message ) Alle informatie wordt in deze variable opgeslagen
     * - loading: Deze variable is gekoppeld aan het AJAX load gifje.
     * - messageList: Deze variable is gekoppeld aan de ul waarin de berichten worden weergegeven.
     */

    var inputUser = $("#nick");
    var
inputMessage = $("#message");
    var
loading = $("#loading");
    var
messageList = $(".content > ul");
    
    /**
     * Deze functie haalt alle recente berichten op. Via een AJAX request wordt dit door PHP afgehandeld.
     * Deze functie wordt aangeroepen als men de eerste keer op de webpage komt maar ook als er een nieuw bericht is toegevoegd.
     */

    function updateShoutbox()
    {

        // Laat de lijst met de berichten verdwijnen
        messageList.hide();
        // Laat het gifje met de AJAX-loader te voorschijn komen
        loading.fadeIn();
        /**
         * Hier verzend AJAX alles naar PHP
         */

        $.ajax({
            type: "POST",
            url: "shoutbox.php",
            data: "action=update",
            complete: function(data)
            {

                // Wanneer de data is verzonden via AJAX naar PHP wordt het gifje met de AJAX-loader verborgen
                loading.fadeOut();
                // De lijst met alle berichten wordt gevuld met data
                messageList.html(data.responseText);
                // De lijst met berichten wordt weer te verschijn gehaald.
                messageList.fadeIn(2000);
            }
        });
    }

    
    /**
     * Functie om te kijken of alle velden zijn ingevoerd
     * De volgende velden worden gecontroleerd of deze niet leeg zijn
     *
     * - Naam ( nick )
     * - Bericht ( message )
     */

    function checkForm()
    {

        if(inputUser.attr("value") && inputMessage.attr("value"))
        {

            return true;
        }

        else
        {
            return false;
        }
    }

    
    // Voor de eerste keer de shoutbox updaten om zo recente berichten te kunnen weergeven
    updateShoutbox();
    
    /**
     * Als er op de submit button is gedrukt worden de volgende procedures op volgorde behandeld
     *
     * - Controleren of alle velden zijn ingevuld
     * - Nieuwe variablen worden gedefinieerd ( nick, message )
     * - De submit button wordt gedeactiveerd
     * - Er word een nieuwe tekst geplaatst in de button ( Laden ... )
     * - De nieuwe gegevens worden verzonden door AJAX, PHP pakt deze gegevens op en verzend deze gegevens naar de database.
     * - Als de data verzonden is wordt de functie 'updateShoutbox' aangeroepen en wordt de submit button weer geactiveerd
     */

    $("#form").submit(function()
    {

        // Controleren of alle velden zijn gevuld
        if(checkForm())
        {

            // Definieer nieuwe variablen met de inhoud van de velden
            var nick = inputUser.attr("value");
            var
message = inputMessage.attr("value");
            // Deactiveer de submit button en vul deze met een nieuwe tekst
            $("#send").attr({ disabled:true, value:"Laden..." });
            $("#send").blur();
            /**
             * Hier verzend AJAX alles naar PHP
             */

            $.ajax({
                type: "POST",
                url: "shoutbox.php",
                data: "action=insert&nick=" + nick + "&message=" + message,
                complete: function(data)
                {

                    // Wanneer de data is verzonden via AJAX naar PHP wordt de data geladen in de lijst met berichten
                    messageList.html(data.responseText);
                    // De functie updateShoutbox wordt aangeroepen om zo de lijst met berichten te vernieuwen en deze up te date te houden.
                    updateShoutbox();
                    // De submit button wordt weer geactiveerd en de oorspronkelijke tekst wordt weer getoond
                    $("#send").attr({ disabled:false, value:"Verzenden" });
                }
             });
        }

        else
        {
            // Niet alle velden zijn gevuld, melding geven doormiddel van een alert box
            alert("Niet alle velden zijn gevuld!");
            
        }

            // Omdat wij een refresh van de pagina willen voorkomen returnen wij hem false
            return false;
    });
});

?>

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.