Top Banner
[ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre le fonctionnement Utiliser les thèmes (Smarty, JQuery) Les bonnes pratiques (Référencement). Personnalisation (Module)
41

[ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Jul 13, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

[ Intégrateur ]

SOMMAIRE

Grandadam Emmanuel - LCProd.net

Prestashop

Architecture WebConcepts fondamentaux

Installer et configurer PrestashopComprendre le fonctionnement

Utiliser les thèmes (Smarty, JQuery)Les bonnes pratiques (Référencement).

Personnalisation (Module)

Page 2: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Architecture Web

Page 3: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer et configurer Prestashop

Architecture WebClient / Serveur

Client Serveur

Requêtehttp://serveur/page.html

RéponseHTML/CSS

3

Page 4: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer et configurer Prestashop

Architecture WebTechnologies

Client Serveur

BDD

PHP

PHP(HTML/CSS)

Javascript(AJAX/JQuery)

4

Page 5: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer et configurer Prestashop

Architecture WebSolutions

• Apache (Serveur Web)

• PHP (Programmation)

• MySQL (Base de données)

Serveur

BDD

PHP

5

Page 6: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer et configurer Prestashop

Architecture WebOutils

• En ligne = Serveur de production

• En Local = Serveur de test

- EasyPHP

- WAMP/MAMP

6

Page 7: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Concepts fondamentaux

Page 8: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Concepts fondamentaux

Normalisation du W3CLangages :

• HTML

• XML

• XHTML

• HTML5

• CSS

Normalisation

• Affichages différents selon les navigateurs‣ Tests ACID (http://fr.wikipedia.org/wiki/Acid3)

8

Page 9: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Concepts fondamentaux

Structure d'un CMSSéparer le fond de la forme

• Les données = la base de données

• Les affichages = les thèmes

Structurer les contenus (Sémantique)

• Expliquer les objets (Titre, Contenu, Description...)

Organiser les contenus

• Catégories, Mots clés...

9

Page 10: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Concepts fondamentaux

Architecture MVCModèles

• Traitement des données,

• Gestion de la BDD et assure l'intégrité

Vues

• Interfaces utilisateurs

• Affiche les résultats et gère les actions

Contrôleurs

• Traite les demandes

• Invoque les vues

10

Page 11: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer et configurer Prestashop

Page 12: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer Prestashop

Préparer l'installationFichiers

• Télécharger les fichiers‣ Ouvrir l'archive

‣ Copier les fichiers sur le serveur Web (www)

Base de données

• PhpMyAdmin‣ Créer une base (vide)

12

Page 13: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer Prestashop

Installer PrestashopAccéder au serveur Web

- http://127.0.0.1

Lancer l'auto-installateur

13

Page 14: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Installer Prestashop

Configurer PrestashopLa boutique

• Face visible par l'internaute

L'interface d'administration

• Outils d'administration

Configuration pour le développement

• Gestion du cache

• Gestion de la compilation des templates Smarty

14

Page 15: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Comprendre le fonctionnement

Page 16: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Comprendre le fonctionnement

Le panneau d'administrationCatalogue : Les produits, les catégories, les fournisseurs...

Commandes : Les Factures, suivi, avoirs, retours...

Clients : Compte clients, SAV, Paniers...

Promotions : Les codes, les règles...

Transports : Calculs des frais, gestion des livraisons...

Localisation : Langues et traductions...

Modules : Fonctionnalités, affichages...

Préférences : Thèmes, CMS, configuration...

Paramètres avancés : Base de données, serveurs...

Administration : Comptes utilisateur, accès...

Stats : Statistiques16

Page 17: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Comprendre le fonctionnement

Structure des pagesGestion des blocs

Gestion des modules

Gestion des Hook (crochets)

"Live Edit"

17

Page 18: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Comprendre le fonctionnement

Structure des fichiers

18

Page 19: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Page 20: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Fonctionnement d'un thèmeStructure d'un thème

• Fichier tpl (template)

Intégration avec Smarty

• Moteur de rendu

• Compilation et cache

Utilisation de Javascript

• Bibliothèque JQuery

20

Page 21: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Modifier un thèmeEditeurs

• Editeur HTML/CSS‣ Notepad++ (pc)

‣ Textmate (mac)

‣ CSSEdit

‣ ..

• Dreamweaver

21

Page 22: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

SmartyMoteur de rendu

• Séparer l'application des vues

Gestion du cache

• Paramètres avancés > Performances

Console Smarty

• Paramètres avancés > Performances

22

Page 23: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Smarty : Le langageLes variables utiles

{$base_dir} {$img_ps_dir} {$img_dir} {$css_dir} {$js_dir}{$tpl_dir}{$modules_dir}{$shop_name}{$cart}

23

Page 24: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Smarty : Le langageStructure de boucles

{foreach from=$items key=myId item=i} <li> <a href="item.php?id={$myId}">{$i.no}:{$i.label}</a> </li>{/foreach}

24

Page 25: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Smarty : Le langageStructure décisionnelles

{if $coffee eq ‘good'} {* Stagiaires heureux *}{else} {* Stagiaires malheureux *}{/if}

25

Page 26: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Smarty : Le langageLes littéraux

{literal} <script type="text/javascript"> ...</script>{/literal}

Variable $smarty

{$smarty.get.variable}{$smarty.post.variable}

26

Page 27: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Javascript : JQueryFramework Javascript

• Gestion des événements

• Effets et animations

• Manipulations CSS

• Requêtes asynchrone (AJAX)

• Plugins

27

Page 28: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Javascript : JQueryDOM : Document Object Model

• Structure logique du document‣ Le DOM doit être chargé pour pouvoir intervenir sur la page.

$(function(){ ...});

28

Page 29: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Javascript : JQueryGestion des écouteurs

$('#ex1').click(function(){ alert("Bouton 1");})

29

Page 30: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Javascript : JQueryGestion des effets

$('#btHide').click(function() $('#logo').hide(500);})

.show(500);

.fadeIn(500);

...

30

Page 31: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Javascript : JQueryGestion des animations

$('#logo1').css('padding-left', 200); $('#logo1').animate({ 'padding-left': "+=250", 'opacity' : 0.25}, 600, function(){ alert('terminé !');});

31

Page 32: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Utiliser les thèmes

Javascript : JQueryGestion des requêtes asynchrone

$('#btAjax').click(function(e){ $.ajax({ url : '4.1a.html', type : 'GET', success : function(rep) { alert(rep); } });})

32

Page 33: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Les bonnes pratiques

Page 34: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Les bonnes pratiques

Les imagesFormat

• PNG

• JPG

Résolution

• 72dpi

- Le cas des mobiles :‣ iPhone 4/5 : 326 dpi

‣ iPad 4 : 264dpi

34

Page 36: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Les bonnes pratiques

Le référencementSEO : Optimisation pour les moteurs de recherche

- Rendre le contenu du site visible pour les moteurs : Gratuit !

• Préférences > SEO & URLs‣ Site : Titre des pages

‣ Site : URL simplifiée : Ré-écriture d'URL (URL Rewriting)

‣ Site : Fichier robots.txt

‣ Produits : Balises Meta

‣ Produits : Utilisation de <strong>

‣ Le plus important : le contenu !

36

Page 37: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Les bonnes pratiques

Le référencementOutils Google pour les webmasters

• https://www.google.com/webmasters/tools

Module 'Google sitemap'

- Plan du site

• Configurer > Mettre à jour le fichier sitemaphttp://monsite.fr/sitemap.xml

37

Page 38: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Les bonnes pratiques

Les statistiquesPrestashop

• Statistiques‣ Visites, CA, Produits...

Google Analytics

• Analyse d'audience‣ Visites, Visiteurs uniques, Durée de visite, Taux de rebond...

Module 'Google Analytics'

• Code de suivi / Compte GA

38

Page 39: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Personnalisation

Page 40: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Personnalisation

Modifier l'apparenceManipulation CSS

• Comprendre quel style modifier :

- Developer Tools de Google Chrome / Safari

Modifier l'apparence d'un module par surcharge CSS

• Copier le fichier CSS du module vers le thème

/themes/montheme/css/modules/nom_module/nom_module.css

40

Page 41: [ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr

Grandadam Emmanuel - LCProd.net

Merci de votre attentionVous êtes libres : de reproduire, distribuer et communiquer cette création au public selon les conditions suivantes :

Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).

Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins commerciales.

Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette création.