Backend

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

Le formulaire du panier d’achat envoie un tableau : on traite les données et on les enregistre dans la base.

if($_POST) {
    $tee = $_POST['tee'];
    $q_tee = $_POST['q_tee'];
    $hoo = $_POST['hoo'];
    $q_hoo = $_POST['q_hoo'];
    $carte = $_POST['carte'];
    $titulaire = $_POST['titulaire'];
    $numero = $_POST['numero'];
    $crypto = $_POST['crypto'];
    $mois = $_POST['mois'];
    $annee = $_POST['annee'];

    
    // ENREGISTREMENT
    $sql= "INSERT INTO panier VALUES ('','$tee','$q_tee','$hoo','$q_hoo','$carte','$titulaire','$numero','$crypto','$mois','$annee',now() );";
    $exec = mysqli_query($connect,$sql);
            if(!$exec) {
                $notifications .= '<p class="ko">Enregistrement : KO</p>';
            }
            else {
                $notifications .= '<p class="ok">Enregistrement : OK</p>';
            }
}

Après, on affiche la requête SELECT * dans un tableau. PHP nous permet de créer les lignes du tableau avec une boucle while().

<?php
$sql = 'SELECT * FROM panier ORDER BY id DESC';
$exec = mysqli_query($connect,$sql);
?>
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>Time</th>
            <th>T-shirt</th>
            <th>nb tee</th>
            <th>Hoodie</th>
            <th>nb hoo</th>
            <th>carte</th>
            <th>Titulaire</th>
            <th>numéro</th>
            <th>crypto</th>
            <th>mois</th>
            <th>année</th>
            <th>total</th>
        </tr>
    </thead>
    <tbody>
        <?php
while($data=mysqli_fetch_assoc($exec)) {
            echo '<tr>';
            echo '<th>'.$data['id'].'</th>';
            echo '<td>'.$data['timestamp'].'</td>';
            echo '<td><span class="'.$data['tee'].'">'.$data['tee'].'</span></td>';
            echo '<td>'.$data['q_tee'].'</td>';
            echo '<td><span class="'.$data['hoo'].'">'.$data['hoo'].'</span></td>';
            echo '<td>'.$data['q_hoo'].'</td>';
            echo '<td>'.$data['carte'].'</td>';
            echo '<td>'.$data['titulaire'].'</td>';
            echo '<td>'.$data['numero'].'</td>';
            echo '<td>'.$data['crypto'].'</td>';
            echo '<td>'.$data['mois'].'</td>';
            echo '<td>'.$data['annee'].'</td>';
            $total= '0';
            if($data['tee']!='' || $data['hoo']!='') {
            $total = ($data['q_tee'] *20) + ($data['q_hoo'] *35);
            }
            echo '<td';
            if($total<'1') echo ' class="empty"';
            echo '>'.$total.'€</td>';
            echo '</tr>';

    }
    ?>
    </tbody>
</table>

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

Administration

Par défaut

Étape 1 : on saisit une adresse dans le formulaire

Étape 2 : on enregistre l’adresse dans la base de données

Étape 3 : on gère les adresses saisies (modification/suppression)

On interroge la base de données et on récupère toutes les informations (*)

$sql = "SELECT * FROM newsletter";
$exec = mysqli_query($connect,$sql);

On fait une boucle avec les résultats (fonction while)

while($data=mysqli_fetch_assoc($exec)) {
    echo '<p><strong>'.$data['email'].'</strong> : ';
    echo '<a href="?email='.$data['email'].'&action=delete">delete</a> / ';
    echo '<a href="?old_email='.$data['email'].'&action=update">update</a></p>';
}

En cliquant sur un des deux liens, on transmet un tableau $_GET via l’URL : ?email=test@exemple.fr&action=delete

if(isset($_GET['action'])) {
    if($_GET['action']=='delete') {
        $email = $_GET['email'];
        $sql="DELETE FROM newsletter WHERE email = '$email'";
        $exec = mysqli_query($connect,$sql) or die('<p class="ko">Effacement email : KO</p>');
        $notifications .= '<p>L\'email '.$_GET['email'].' a été supprimé</p><p><a href="03-news-admin.php">Rechargez la page</a></p>'; 
}

Et pour la modification

    elseif($_GET['action']=='update') {?>
<form id="update" method="POST" action="03-news-admin.php">
    <p><label for="new_email">Nouvelle adresse</label>
    <input type="email" id="new_email" name="new_email" placeholder="Veuillez saisir la nouvelle adresse"></p>
    <input type="hidden" name="old_email" value="<?php echo $_GET['old_email']?>">
    <input type="submit" value="Je modifie">
</form>
        <?php
    }
}

On envoie de nouvelles informations via $_POST

if(isset($_POST['new_email'])) {
    $sql="UPDATE newsletter SET email='".$_POST['new_email']."' WHERE email = '".$_POST['old_email']."'";
    if(!mysqli_query($connect,$sql)) echo('<p class="ko">Modification email : KO<br/>'.$sql.'</p>');
    $notifications .= '<p class="ok">L\'email '.$_POST['new_email'].' a été modifié';     
}

Il faut maintenant assembler les différentes étapes : VERSION COMPLETE

<article>
<h1>ADMIN NEWSLETTER</h1>
<?php
// 1, CONNEXION
$host = "localhost";
$usr = "root";
$bdd = "form";
$pwd  = "";
$notifications = '';
$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'");

// 2, ON EXECUTE les INSTRUCTIONS GET
if(isset($_GET['action'])) {
    if($_GET['action']=='delete') {
// 2a, DELETE
        $email = $_GET['email'];
        $sql="DELETE FROM newsletter WHERE email = '$email'";
        $exec = mysqli_query($connect,$sql) or die('<p class="ko">Effacement email : KO</p>');
        $notifications .= '<p>L\'email '.$_GET['email'].' a été supprimé</p><p><a href="03-news-admin.php">Rechargez la page</a></p>'; 
    }
// 2b, FORM UPDATE
    elseif($_GET['action']=='update') {
        ?>
            <form id="update" method="POST" action="03-news-admin.php">
                <p><label for="new_email">Nouvelle adresse</label><input type="email" id="new_email" name="new_email" placeholder="Veuillez saisir la nouvelle adresse"></p>
                <input type="hidden" name="old_email" value="<?php echo $_GET['old_email']?>">
<input type="submit" value="Je modifie">
            </form>
        <?php
    }
}

// 2c,     ON EXECUTE LES INSTRUCTIONS POST SI ON RECOIT UNE MODIFICATION D'ADRESSE
if(isset($_POST['new_email'])) {
    $sql="UPDATE newsletter SET email='".$_POST['new_email']."' WHERE email = '".$_POST['old_email']."'";
    if(!mysqli_query($connect,$sql)) echo('<p class="ko">Modification email : KO<br/>'.$sql.'</p>');
    $notifications .= '<p class="ok">L\'email '.$_POST['new_email'].' a été modifié';     
}
// 3, SINON, ON INTERROGE la BDD DANS SON ENSEMBLE
    $sql = "SELECT * FROM newsletter";
    $exec = mysqli_query($connect,$sql);
    
// 3, ON AFFICHE les RESULTATS
    while($data=mysqli_fetch_assoc($exec)) {
        echo '<p><strong>'.$data['email'].'</strong> : <a href="?email='.$data['email'].'&action=delete">delete</a> / <a href="?old_email='.$data['email'].'&action=update">update</a></p>';
    }
    echo $notifications;

?></article>

Enregistrement

Par défaut

Étape 1 : Les données proviennent de 01-news-inscription.php

Étape 2 : on enregistre l’email enregistré

Le tableau $_POST

// ON RECUPERE LA VALEUR
$email = $_POST['email'];

Identifiants de connexion à changer selon votre serveur (d’évaluation)

// 1, CONNECTION
$host = "localhost";
$usr = "root";
$bdd = "form";
$pwd  = "";
$link = mysqli_connect($host, $usr,$pwd, $bdd);

On vérifie si l’email saisi est déjà enregistré. S’il est enregistré,  le résultat de la requête contiendra au moins une ligne ( > 0 )

$sql = "SELECT email FROM newsletter WHERE email ='$email'";
$exec = mysqli_query($link,$sql);
if(mysqli_num_rows($exec) > 0) {
    echo '<p>Email déjà enregistré</p>';
}

Si l’email n’existe pas, on l’enregistre

else {
    $sql = "INSERT INTO newsletter VALUES ('$email');";
    $exec = mysqli_query($link,$sql);
}

Opération de calcul en SQL avec COUNT(), fonction de test sur l’exécution avec or die () et interrogation du tableau associatif avec mysqli_fetch_array() et $nb[0]

$sql = "SELECT COUNT(email) FROM newsletter";
$exec = mysqli_query($link,$sql) or die("COUNT() IMPOSSIBLE");
$nb = mysqli_fetch_array($exec);
echo '<p>NB enregistrements : '.$nb[0].'</p>';

VERSION COMPLETE

<article>
<h1>ENREGISTREMENT NEWSLETTER</h1>
<?php
$notifications = '';
if(!$_POST) {
    $notifications .= '<p class="ko">Aucune adresse saisie : <a href="01-news-inscription.php">veuillez recommencer</a></p>';
}
else {
    // ON RECUPERE LA VALEUR
    $email = $_POST['email'];
    
    // ON VERIFIE LA VALEUR : FORMAT MAIL ?
    
    
    // ON AFFICHE LA VALEUR
    $notifications .=  '<p class="email">Email : '.$email.'</p>';
    
    /* ON ENREGISTRE LA VALEUR dans la BDD
     1, on se connecte à la bdd
     2, on enregistre la valeur dans la table
     3, on se déconnecte
     4, on notifie
     */    
     
    // 1, CONNECTION
    $host = "localhost";
    $usr = "root";
    $bdd = "form";
    $pwd  = "";
    $link = mysqli_connect($host, $usr,$pwd, $bdd); // extensions MySQLI en mode procédural depuis PHP 5.5.0
    if(!$link) {
        $notifications .= '<p class="ko">Connexion serveur : KO</p>';
    }
    else {
        $notifications .= '<p class="ok">Connexion serveur : OK</p>';
        mysqli_query($link,"SET NAMES 'utf8'");
        $notifications .= '<p class="ok">Connexion BDD : OK</p>';    
        // 2,ENREGISTREMENT
        // ON VERIFIE L'ENREGISTREMENT
        $sql = "SELECT email FROM newsletter WHERE email ='$email'";
        $exec = mysqli_query($link,$sql);
        if(!$exec) {
            $notifications .= '<p class="ko">VERIFICATION EMAIL : KO</p>';
        }
        elseif(mysqli_num_rows($exec)>0) {
            $notifications .= '<p class="ko">Email déjà enregistré : <a href="01-news-inscription.php">veuillez en choisir un autre</a></p>';
        }
        else {
            $sql = "INSERT INTO newsletter VALUES ('$email');";
            $exec = mysqli_query($link,$sql);
            if(!$exec) {
                $notifications .= '<p class="ko">Enregistrement : KO</p>';
            }
            else {
                $notifications .= '<p class="ok">Enregistrement : OK</p>';
            }
        }
    // 3, DECONNECTION
     
    // 4, NOTIFICATION
    // 5, STATISTIQUES : NB ENREGISTREMENTS
        $sql = "SELECT COUNT(email) FROM newsletter";
        $exec = mysqli_query($link,$sql) or die("COUNT() IMPOSSIBLE");
        $nb = mysqli_fetch_array($exec);
        $notifications .=  '<p class="nb">NB ENREGISTREMENTS : '.$nb[0].'</p>';
    }
}

echo $notifications;
?>
<p><a href="01-news-inscription.php">Nouvel enregistrement</a></p>
</article>

Étape 3 :  Interface d’administration des emails enregistrés

PHP

Par défaut