Frontend

Par défaut

Étape 1 : Formulaire complet de sélection des articles et de coordonnées bancaires

Étape 2 : Suivi des commandes dans l’interface d’administration

On prépare le document : connexion et variables

<?php
$notifications = '';
// CONNEXION
$host = "localhost";
$usr = "root";
$bdd = "form";
$pwd  = "";
$connect=mysqli_connect($host, $usr,$pwd, $bdd) or die('<p class="ko">Connexion serveur/bdd : KO</p>');
$notifications .= '<p class="ok">Connexion serveur/bdd : OK</p>';
mysqli_query($connect,"SET NAMES 'utf8'");
$sql = 'SELECT * FROM panier ORDER BY id DESC';
$exec = mysqli_query($connect,$sql);
$nb_tickets = mysqli_num_rows($exec);
?>

On crée la première partie du formulaire : il y a 2 fieldset pour les tee-shirts, les hoodies. Le montant du panier est dans un <div>.

<form id="basket" name="basket" method="POST" action="05-panier-backoffice.php">
    <fieldset id="produits">
        <legend>Produits</legend>
        <fieldset>
            <legend>T-shirt <span class="prix">20<sup>€</sup></span></legend>
            <p>
                <select id="tee" name="tee" onBlur="Calculer()">
                    <option selected>T-shirt</option>
                    <option value="green" id="tee_green" onBlur="Calculer()">T-shirt vert</option>
                    <option value="red" id="tee_red" onBlur="Calculer()">T-shirt rouge</option>
                </select>
            </p>
            <p>
                <input type="text" value="0" name="q_tee" id="q_tee" onChange="Calculer()">
            </p>
        </fieldset>
        <fieldset>
...
            <select id="hoo" name="hoo" onBlur="Calculer()">
                <option selected>Hoodie</option>
                <option value="blue">Sweat bleu</option>
                <option value="black">Sweat noir</option>
            </select>
...
            <input type="text" name="q_hoo" value="0" id="q_hoodie" onChange="Calculer()">
...
        </fieldset>
        <div id="total_valide">
            <p id="logo"><span>ticket #<?php echo $nb_tickets; ?></span></p>
            <p id="date"></p>
            <p id="calcul">
                <label>Total : </label>
                <input type="text" value="0" id="total" disabled>
            </p>
            <p id="go">
                <input name="valide" type="button" id="submit" onClick="Affiche();" value="Je valide">
            </p>
    </fieldset>

On définit une fonction en Javascript pour réaliser des calculs : on récupère les valeurs value des différents éléments avec getElementById. La fonction Calculer() est appelée dès que les input de produits perdent le focus (onBlur) ou dès qu’il y a un changement dans la quantité (onChange)

function Calculer() {
    var px_tee = document.getElementById("q_tee").value * 20;
    var px_hoo = document.getElementById("q_hoodie").value * 35;
    document.basket.total.value = px_tee + px_hoo;
}

Quand le client valide sa sélection d’articles, on exécute la fonction Affiche() qui va faire apparaitre la deuxième partie du formulaire (coordonnées bancaires). Cette fonction est située dans <head><script>…

function affiche () {
    document.getElementById("paiement").style.display="block";    
}

Il faut également que #paiement soit en display:none;. On termine le formulaire. Voir également la boucle for en PHP pour écrire automatiquement du HTML (ligne 39 pour les mois, et ligne 52 pour les années).

<fieldset id="paiement" style="display: none;">
        <legend>Informations bancaires</legend>
        <fieldset id="carte" class="clearfix">
            <p>
                <input type="radio" name="carte" value="mastercard" id="mastercard" required>
                <label for="mastercard">MasterCard</label>
            </p>
            <p>
                <input type="radio" name="carte" value="visa" id="visa">
                <label for="visa">VISA</label>
            </p>
            <p>
                <input type="radio" name="carte" value="amex" id="amex">
                <label for="amex">AMEX</label>
            </p>
        </fieldset>
        <fieldset id="acheteur">
            <p>
                <label for="titulaire">Titulaire</label>
                <input type="text" id="titulaire" name="titulaire" placeholder="Nom inscrit sur la carte">
            </p>
            <p>
                <label for="numero">Numéro</label>
                <input type="text" pattern="[0-9]{13,16}" name="numero" id="numero" placeholder="XXXX XXXX XXXX XXXX">
                <!-- le pattern pour AMEX est différent : voir sur http://html5pattern.com/Cards -->
            </p>
            <p id="cryptogramme">
                <label for="crypto">Cryptogramme</label>
                <input type="password"  name="crypto" id="crypto" pattern="[0-9]{3}" placeholder="XXX">
            </p>
        </fieldset>
        <fieldset id="date_carte">
            <legend>Date d'expiration</legend>
            <p>
                <label for="mois">Mois</label>
                <select id="mois" name="mois" required>
                    <?php 
                $mois = array('Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre');
                for($i=1;$i<13;$i++) {
                    echo '<option value="'.$i.'">'.$i.' - '.$mois[$i-1].'</option>';
                }
            ?>
                </select>
            </p>
            <p>
                <label for="annee">Année</label>
                <select id="annee" name="annee" required>
                    <?php
                $y = date('Y');  
                for($i=$y;$i<$y+21;$i++) {
                    echo '<option value="'.$i.'">'.$i.'</option>';
                }
            ?>
                </select>
            </p>
        </fieldset>
        <button type="submit">Je paye !</button>
    </fieldset>
</form>

Voir la version complète avec du CSS3 et une fonction Javascript pour afficher l’heure du ticket.

Démo : panier

Démo : panier

Étape 2 : Suivi des commandes dans l’interface d’administration