Construire un panier avec PHP et MySQL

Pour le didacticiel de cette semaine consacré au screencast +, nous allons vous apprendre à créer votre propre panier avec PHP et MySQL. Comme vous le constaterez, ce n’est pas aussi difficile que vous l’auriez pensé.

Options Premium

Si vous recherchez une solution rapide et prête à l'emploi, vous avez le choix entre plus de 50 scripts PHP pour les paniers d'achat sur le marché Envato. Voici un aperçu de quelques-uns d'entre eux.

1. LivelyCart - un magasin / magasin PHP JQuery

Il s’agit d’un panier facile à utiliser et personnalisable, piloté par PHP / MySQL. Il est équipé de deux options de paiement en utilisant Pay Pal et Soumettre la commande par email. Vous pouvez utiliser les deux ou l'un des deux.

LivelyCart - un magasin / boutique PHP JQuery sur le marché Envato

2. Boutique numérique universelle

Universal Digital Shop est un script puissant, qui vous permet de vendre des produits numériques directement sur votre site web. Il gère les paiements via plusieurs passerelles de paiement (PayPal, Payza / AlertPay, Skrill / Moneybookers, Authorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info et Stripe) et peut être facilement intégré à toute page Web..

Avec ce widget, vous n'avez pas besoin d'installer des paniers d'achat complexes et de créer leur design pour correspondre à votre site Web. Universal Digital Shop est le moyen le plus simple de distribuer des produits numériques et de monétiser un site Web..

Universal Digital Shop sur le marché Envato

3. Terminal de paiement à bande

Ce script vous permet de traiter rapidement et facilement un terminal de paiement par carte de crédit pour vos clients par stripe.com.

L'installation et la configuration du script prennent moins de 5 minutes (vous devez toutefois disposer de SSL et d'un compte stripe.com).

Stripe Payment Terminal sur le marché Envato

4. AJAX Cart pour sites Web HTML avec commandes et factures

Symbiotic - AJAX Cart est un système puissant qui peut être intégré aux nouveaux / anciens sites Web HTML pour étendre leurs fonctionnalités en tant que panier. Vous n'avez pas besoin d'utiliser OpenCart ni aucun autre panier pour votre site de commerce électronique. Vous pouvez créer votre propre site Web de commerce électronique en quelques minutes en utilisant ce système de panier..

Panier AJAX pour sites Web HTML avec commandes et factures sur le marché Envato

5. Embaucher un expert sur Envato Studio

Que vous utilisiez un CMS particulier tel que WordPress ou Magento ou que vous souhaitiez simplement disposer d'un site de commerce électronique avec un panier complet, il existe de nombreux développeurs experts sur Envato Studio qui vous aideront à un prix raisonnable. Donc, si vous êtes coincé, rendez-vous là-bas pour l'aide dont vous avez besoin.

Fournisseurs de paniers d'achat sur Envato Studio

Ceci est juste une petite sélection des paniers PHP disponibles sur le marché Envato. Si ces options ne résolvent pas votre problème, ou si vous préférez le faire vous-même, passons au processus de création de votre propre panier avec PHP et MySQL..

Aperçu de Screencast

Étape 1

Commençons par examiner la structure des dossiers:

Structure

reset.css - vous pouvez obtenir la réinitialisation de ce lien
style.css - notre propre fichier css que nous utiliserons pour styler notre balise HTML
connection.php - le fichier qui fera la connexion à notre base de données
index.php - le modèle pour notre panier
cart.php - le fichier où seront en mesure de changer nos produits du panier (ajouter, supprimer)
produits.php - la page de liste de produits

Étape 2

Nous allons commencer par écrire le balisage HTML, puis le styler. Tellement ouvert index.php et copiez / collez le code ci-dessous:

       Chariot

Comme vous pouvez le constater, notre page comporte deux colonnes: la colonne principale et la barre latérale. Passons au CSS. Ouvrir le fichier style.css et tapez le code ci-dessous:

 corps font-family: Verdana; taille de police: 12px; couleur: # 444;  #container width: 700px; marge: auto 150px; couleur de fond: #eee; débordement caché; / * Set overflow: caché pour effacer les flotteurs sur #main et #sidebar * / padding: 15px;  #main width: 490px; float: gauche;  #sidebar width: 200px; float: gauche;

Voici à quoi devrait ressembler notre page de produits:

Screencast complet

Étape 3

Avant de passer à la partie PHP / MySQL, nous devons créer la base de données. Alors ouvrez phpMyadmin et suivez ces étapes:

Aller au Privilèges onglet, cliquez sur le bouton Ajouter un nouvel utilisateur et utilisez les paramètres suivants: Nom d'utilisateur: Didacticiel; Hôte: localhost; Mot de passe: supersecretpassword ;. Assurez-vous maintenant que les privilèges globaux sont définis. puis passez à l'étape suivante.
Créez une nouvelle base de données appelée tutoriels.
Créez une nouvelle table appelée des produits et définissez le nombre de champs sur 4. Remplissez maintenant ces champs pour obtenir: id_integer - assurez-vous qu'il est défini sur INT et marquez-le comme PRIMARY (définissez-le également sur auto_increment); prénom - faites-le VARCHAR avec une longueur de 100; la description - VARCHAR d'une longueur de 250; prix - assurez-vous qu'il est réglé sur DECIMAL (2,6)
Remplissez votre table avec des exemples de produits

Pour gagner du temps, j'ai exporté ma table products afin que vous puissiez simplement exécuter la requête suivante:

 CREATE TABLE IF NOT PAS EXISTS 'produits' ('id_product' int (11) NOT NULL AUTO_INCREMENT, 'nom' varchar (100) NOT NULL, 'description' varchar (250) NON NULL, 'prix' décimal (6,2) NOT NULL, PRIMARY KEY ('id_product')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 7; INSERT INTO 'produits' ('id_product', 'nom', 'description', 'prix') VALEURS (1, 'Produit 1', 'Quelques descriptions aléatoires', '15.00 '), (2,' Produit 2 ', 'Description aléatoire', '20,00'), (3, 'Produit 3', 'Description aléatoire', '50,00 '), (4,' Produit 4 ',' Description aléatoire ', '55,00'), ( 5, 'Produit 5', 'Description aléatoire', '54,00 '), (6,' Produit 6 ',' Description aléatoire ', '34,00);

Étape 4

Avant de passer à l'extraction des données de la base de données, je vais faire mon index.php un modèle pour la liste de produits et le panier. Alors ajoutez le code suivant en haut de votre index.php page:

session_start () - c'est pour une utilisation ultérieure; cela nous permettra d'utiliser réellement les sessions (il est essentiel que le session_start soit écrit avant que toute autre donnée ne soit envoyée au navigateur).
Sur la deuxième ligne, nous incluons le fichier connection.php qui établira la connexion à la base de données (nous en traiterons dans une seconde). Une dernière chose: la différence entre include et require est que si vous utilisez require et que le fichier ne peut pas être trouvé, l'exécution du script se terminera. Si vous utilisez "include", le script continuera à fonctionner.
Au lieu de copier l'intégralité du code html (le lien vers le css, vers le js) pour chaque fichier de votre site, vous pouvez simplement les rendre tous relatifs à un seul fichier. Donc, d’abord, je vérifie s’il existe une variable GET appelée "ensemble de pages". Si ce n'est pas le cas, je crée une nouvelle variable appelée _pages. Si la variable GET appelée pages est définie en premier, je veux m'assurer que le fichier que je vais inclure est une page valide..

Pour que cela fonctionne, nous devons inclure le fichier; ajoutez cette ligne au fichier index.php entre le div avec l'id de "main":

Maintenant voici la complète index.php nous avons maintenant:

        Chariot

Créons la connexion à MySQL. Ouvrir connexions.php et tapez ce qui suit:

Étape 5

Il est maintenant temps d'écrire le balisage de la page des produits. Alors allez-y ouvrez-le et tapez ce qui suit:

 Liste de produits
   prénom  La description  Prix  action  
  Produit 1  Une description aléatoire  15 $ Ajouter au panier  
  Produit 2  Une description aléatoire  25 $ Ajouter au panier

prénom	La description	Prix	action
Produit 1	Une description aléatoire	15 $	Ajouter au panier
Produit 2	Une description aléatoire	25 $	Ajouter au panier

Jetons un coup d'oeil à la page:

Comme vous pouvez le voir, c'est assez moche. Alors appelons-le en ajoutant ce CSS supplémentaire.

 un couleur: # 48577D; text-decoration: none; a: survol text-decoration: souligné; h1, h2 marge-en-dessous: 15px h1 taille-police: 18px; h2 taille-police: 16px # table principale largeur : 480px;  #main table th padding: 10px; couleur de fond: # 48577D; couleur: #fff; text-align: left;  #main table td padding: 5px;  #main table tr background-color: # d3dcf2;

D'accord: regardons maintenant:

Ça a l'air beaucoup mieux, vous ne pensez pas? Ci-dessous vous avez le complet style.css code:

 corps font-family: Verdana; taille de police: 12px; couleur: # 444;  a color: # 48577D; text-decoration: none; a: survol text-decoration: souligné; h1, h2 marge-en-dessous: 15px h1 taille-police: 18px; h2 taille-police: 16px #container largeur: 700px; marge: auto 150px; couleur de fond: #eee; rembourrage: 15px; débordement caché;  #main width: 490px; float: gauche;  #main table width: 480px;  #main table th padding: 10px; couleur de fond: # 48577D; couleur: #fff; text-align: left;  #main table td padding: 5px;  #main table tr background-color: # d3dcf2;  #sidebar width: 200px; float: gauche;

Étape 6

Avant d'extraire le produit de la base de données, supprimons les 2 dernières lignes de notre table (nous ne l'utilisions que pour voir à quoi ressemblerait notre table). Enlève ça:

  Produit 1 Une description aléatoire 15 $ Ajouter au panier   Produit 2 Une description aléatoire 25 $ Ajouter au panier

Génial! Maintenant, à l'endroit où se trouvaient les lignes de la table, tapez le code PHP suivant:

     $ "> Ajouter au panier

Donc, nous utilisons d’abord SELECT pour récupérer les produits, puis nous parcourons chaque ligne de la base de données et nous l’envoyons à la page dans une ligne de tableau..
Vous pouvez voir que l'ancre est liée à la même page (lorsque l'utilisateur clique sur l'ancre pour l'ajouter au panier / à la session). Nous passons juste quelques variables supplémentaires comme l'id du produit.

Si vous survolez l’un des liens d’ajout au panier, vous pouvez voir, en bas de la page, que l’id du produit est passé..

Étape 7

Faisons fonctionner cette ancre en ajoutant le code suivant en haut de notre page:

  1, "price" => $ row_s ['price']);  else $ message = "Cet identifiant de produit n'est pas valide!"; ?>

Si la variable GET appelée action est définie et que sa valeur est ADD, nous exécutons le code.
Nous nous assurons que l'ID passé par la variable GET est un entier
Si l'identifiant du produit est dans le panier SESSION, nous incrémentons sa quantité de 1
Si l'identifiant n'est pas dans la session, nous devons nous assurer que l'identifiant transmis par la variable GET existe dans la base de données. Si c'est le cas, nous prenons le prix et créons sa session. Si ce n'est pas le cas, nous définissons une variable appelée message qui tiendra notre erreur.

Vérifions si cette variable de message est définie et transmettons-la à la page (tapez ce code sous le titre de la page H1):

 $ message";?>

Ici vous pouvez voir le complet produits.php page.

  1, "price" => $ row_s ['price']);  else $ message = "Cet identifiant de produit n'est pas valide!"; ?> Liste de produits
 $ message";?>   prénom  La description  Prix  action  
     $  "> Ajouter au panier

prénom	La description	Prix	action
		$	"> Ajouter au panier

Voici le message d'erreur si l'id du produit n'est pas valide

Étape 8

Revenons à la index.php et construire la barre latérale. Ajoutez le code suivant:

 Chariot
  $ valeur) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") ORDER BY name ASC"; $ query = mysql_query ($ sql); while ($ row = mysql_fetch_array ($ query)) ?>  X 
  
 Aller au panier Votre panier est vide. S'il vous plaît ajouter des produits.
";?>

Nous vérifions d’abord si le panier de session est défini. Si ce n'est pas le cas, nous affichons le message pour alerter l'utilisateur que le panier est vide..
Ensuite, nous faisons un SELECT SELECT mysql, mais nous ne sélectionnons que les produits existant dans la session. Pour ce faire, nous utilisons la fonction foreach. Nous parcourons donc la session en boucle et ajoutons l’identifiant du produit à la commande SELECT. Ensuite, nous utilisons la fonction substr pour supprimer la dernière virgule du SELECT.
En fin de compte, nous envoyons les données au navigateur..

Jetez un oeil aux images ci-dessous:

Index.php étant un modèle pour tous les fichiers, la barre latérale sera visible dans le cart.php aussi. Est-ce pas cool?!

Étape 9

Enfin, ouvrez cart.php et commencez par taper le code suivant:

 Voir le panier
 Retour à la page des produits   $ valeur) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") ORDER BY name ASC"; $ query = mysql_query ($ sql); $ totalprice = 0; while ($ row = mysql_fetch_array ($ query)) $ subtotal = $ _SESSION ['cart'] [$ row ['id_product']] ['quantité'] * $ row ['price']; $ totalprice + = $ sous-total; ?>   prénom  Quantité  Prix  Prix des articles  
    $  $  
   Prix total:  
 
 
  
 
 Pour supprimer un article, définissez sa quantité sur 0.

prénom	Quantité	Prix	Prix des articles
		$	$
Prix total:

Le code est similaire à celui de index.php et de products.php, je ne vais donc pas tout expliquer à nouveau. Vous devriez remarquer qu'au lieu d'afficher la quantité dans un formulaire, il est maintenant affiché dans une zone de saisie (afin que nous puissions changer la quantité). De plus, le tableau est placé dans une balise.Pour obtenir le prix total des articles, nous multiplions la quantité du produit spécifique (à partir de la session) par son prix. Ceci est fait dans chaque boucle.

REMARQUE: L'entrée est un tableau, la clé est l'id du produit et la quantité est la valeur..

Étape 10

La dernière étape que nous devons faire est de faire fonctionner le formulaire. Alors ajoutez ce code en haut de la page cart.php.

 if (isset ($ _ POST ['submit'])) foreach ($ _ POST ['quantité'] en tant que $ key => $ val) if ($ val == 0) unset ($ _SESSION ['cart'] [clé]];  else $ _SESSION ['cart'] [$ clé] ['quantité'] = $ val;

Nous vérifions d’abord si le formulaire a été soumis. S'il a été soumis et que la valeur de l'entrée était égale à zéro, nous avons annulé la session..
Si la valeur est une autre valeur, nous définissons la quantité sur cette valeur.

Voici le complet cart.php

  $ val) if ($ val == 0) unset ($ _SESSION ['cart'] [$ key]);  else $ _SESSION ['cart'] [$ clé] ['quantité'] = $ val; ?> Voir le panier
 Retourner à la page des produits.   $ valeur) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") ORDER BY name ASC"; $ query = mysql_query ($ sql); $ totalprice = 0; while ($ row = mysql_fetch_array ($ query)) $ subtotal = $ _SESSION ['cart'] [$ row ['id_product']] ['quantité'] * $ row ['price']; $ totalprice + = $ sous-total; ?>   prénom  Quantité  Prix  Prix des articles  
    $  $  
   Prix total:  
 
 
  
 
 Pour supprimer un article, définissez sa quantité sur 0.

prénom	Quantité	Prix	Prix des articles
		$	$
Prix total:

J'espère que vous avez apprécié ce tutoriel. Si vous avez des questions, veillez à regarder le didacticiel vidéo plus approfondi.!

Code