DOSSIER DE SYNTHÈSE DE PRATIQUE

Transcription

8 RUE PAUL BERT, 64000 PAU
3 BIS AVENUE NITOT, 64105 PAU CEDEX
DOSSIER DE SYNTHÈSE DE
PRATIQUE PROFESSIONNELLE
Titre professionnel : Développeur Logiciel
Sébastien LAFON
Novembre 2015
-MISE EN PLACE D’UN SITE INTERNET DE COMMERCE EN
LIGNE - INTEGRATION DE MAQUETTES dans WORDPRESS - RÉALISATION D’UNE APPLICATION DE RÉSERVATION DE
SALLES - APPLICATIONS MOBILES EN LIEN AVEC UNE BASE DE
DONNÉES -
1
DOSSIER DE SYNTHÈSE DE PRATIQUE PROFESSIONNELLE (DSPP)

SOMMAIRE
Curriculum Vitae
FICHE DESCRIPTIVE DE LA PRATIQUE PROFESSIONNELLE CORRESPONDANT À
L’ACTIVITÉ TYPE N° 1
FICHE DESCRIPTIVE DE LA PRATIQUE PROFESSIONNELLE CORRESPONDANT À
L’ACTIVITÉ TYPE N° 2
A : CCP N°1 PROJET SPEEDYMARKET
Présentation du projet SpeedyMarket
Liste des compétences validées par ce projet
Contexte
Front-office
Back-office
Maquetter une application

Et la maquette finale commune sur laquelle nous allons effectuer l’intégration
HTML et CSS.
Concevoir une base de données
Mettre en place une base de données
B : CCP N°1 et N°2
BACK OFFICE JAVA SPEEDYMARKET
Développer une interface utilisateur/ Développer des composants d'accès aux
données
Développement des premières interfaces
Travaux supplémentaires effectués :
Vues de l’interface finale
C : CCP N°2 INTÉGRATION DE MAQUETTES DANS WORDPRESS
Compétences mises en oeuvre : 6 et 7
Développer des pages web en lien avec une base de données
Mettre en œuvre une solution de gestion de contenu ou e-commerce
Modification du css et de la classe liste
Utiliser l’anglais professionnel informatique
Réalisation de commentaires techniques en anglais
D : CCP N°2 DÉVELOPPEMENT D’UNE APPLICATION DE RÉSERVATION DES SALLES
Développer des pages web en lien avec une base de données
Extraits de scripts et détails sur le développement
Mettre en œuvre une solution de gestion de contenu ou e-commerce
Création de l’accès sécurisé pour l’administrateur du site de Wordpress
<?php
Modification des chemins d’appels de script
Modification des chemins d’appels des images
E - CCP N°2 DÉVELOPPER UNE APPLICATION SIMPLE DE MOBILITÉ NUMÉRIQUE
(SOUS ANDROID ET JQUERY MOBILE)
Sous Android en natif
En jQuery Mobile dans le navigateur
LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 2 /70

F - COMPÉTENCES TRANSVERSALES
Actualiser et partager ses compétences en développement informatique
Démarche de contribution aux forums Wordpress Linkedin
Partage et versionning de code en anglais
Veille technologique
Poursuite de parcours
Organisation de mes activités de développement
Le planning initial concernant la période de stage est créé
Les comptes rendus d'activité sont créés
Mise en place de compte de gestion d’avancement des tâches
Discussion directe collaborative avec HangOut
Partage de ressources et de documents sur Google Drive
COMPLÉMENTS DE FORMATION
Évènements
Autres évènements
Webographie
Bibliographie
Veille technologique (comptes créés)
Logiciels utilisés
CONCLUSION

Nom Patronymique : LAFON Nom marital : Prénom : Sébastien Adresse : lieu dit Bigé
32400 BERNEDE
DOSSIER DE SYNTHESE DE PRATIQUE PROFESSIONNELLE
(

DSPP
) Titre professionnel visé Intitulé :
Développeur logiciel Votre objectif est d’obtenir un titre professionnel délivré par le ministère chargé de l’emploi
soit par la VAE (cocher la case), soit par la formation (cocher la case). V
alidation des
A
cquis de l’
E
xpérience
(VAE)
Vous avez reçu la décision de recevabilité de l’Unité Territoriale de la DIRECCTE.
Vous devez maintenant préparer votre parcours de validation. Pour cela, vous devez
compléter ce dossier qui sera soumis au jury. Vous y décrirez votre pratique
professionnelle et, à partir des informations fournies, le jury évaluera vos acquis par
rapport aux compétences requises du titre que vous souhaitez obtenir. Votre intérêt est
donc de remplir ce dossier avec le plus grand soin afin de mettre en valeur votre
expérience. Pour compléter ce document, vous devez vous reporter au mode d’emploi ci-joint. Vous y
décrirez de manière détaillée vos activités professionnelles à partir d’exemples concrets
mettant en valeur votre pratique professionnelle. Vous pouvez bénéficier d’un accompagnement pour vous aider à constituer ce dossier.
La demande d’accompagnement est à adresser au centre qui organisera votre session de
validation. Vous avez aussi la possibilité de fournir à l’accompagnateur et au jury des preuves
concrètes de votre activité professionnelle qui illustreront les informations portées dans le
dossier. Ces preuves pourront se présenter sur tout support (pièce, dossier, photos…). Parcours de formation Vous avez effectué des activités professionnelles soit avant d’entrer en formation,
soit au cours de votre formation elle-même, lors d’une période d’application en entreprise
ou dans votre organisme de formation. Vous devez compléter ce dossier afin de présenter
et de valoriser ce que vous avez mis en pratique durant ces expériences. Ce document est complété avec l’aide du formateur, tout au long du parcours de
formation. Le dossier est renseigné sous la responsabilité de l’organisme avec lequel a été
signé le contrat de stage. Au cas où le parcours est réalisé dans différents organismes de
formation, chacun de ces organismes doit s’assurer que le dossier décrit bien la pratique
professionnelle du candidat pour la partie du parcours effectué sous sa responsabilité. A partir de ces informations, le jury évaluera les compétences que vous avez acquises au
cours de cette période. LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 4 /70

- PRÉSENTATION DU DOSSIER - ➢ Ce dossier reste
votre propriété. ➢ Vous pouvez le
compléter
durant tout votre parcours de certification. ➢ Vous devez le conserver et le présenter obligatoirement à chaque
étape de la certification. Ce dossier comporte : 1.
UNE FICHE DESCRIPTIVE, de deux pages, destinée à présenter votre
pratique professionnelle pour chaque activité type du titre visé. Cette fiche
est à reproduire et à compléter en autant d’exemplaires que le titre contient
d’activités types ; 2. UN MODE D’EMPLOI
pour remplir la fiche, accompagné d’un exemple ;
3. UN TABLEAU
à renseigner si vous possédez une certification, un diplôme,
ou un CQP proche de tout ou partie du titre visé ;
4. UNE
DECLARATION SUR L’HONNEUR à formuler lors de l’élaboration du
dossier et à compléter, le cas échéant, avec la liste des éléments ajoutés
au dossier initial en cas de parcours progressif vers le titre.
Ce dossier doit être présenté
agrafé ou relié
. Les fiches doivent être
numérotées à la main
. LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 5 /70

- DIPLOMES, TITRES OU CERTIFICATS PRECEDEMMENT OBTENUS ET PROCHES DU TITRE PROFESSIONNEL VISE - (
à remplir le cas échéant
) Indiquez dans le tableau ci-dessous le ou les certificats et/ou diplômes que vous avez
déjà obtenus et qui sont
proches du domaine professionnel du titre que vous souhaitez
obtenir. Ils pourront, si l’arrêté de spécialité créant le titre professionnel que vous visez prévoit une
équivalence, vous permettre d’alléger vos modalités d’évaluation et augmenter vos
chances de réussite. Cette information communiquée au jury est donc importante. Autorité ayant délivré la
certification
(
Ministère,
branche
Date
d’obtention AFPA d’Istres
Certification du Ministère
chargé de l’emploi 2008 Centrum Vakopleiding,
Diemen, Amsterdam 2000 Intitulé de la certification obtenue (Titre, diplôme, CQP…) professionnelle…) Conseiller et assistant en technologies
d’information et de la communication
Diplôme de Niveau IV
Téléconseiller “Troubleshooting”
Stage informatique en anglais (2 mois)

- DÉCLARATION SUR L’HONNEUR - ❖ Elle garantit l’authenticité des informations et documents du dossier. ❖ Elle doit être nominative, datée et signée. Déclaration sur l’honneur du (de la) candidat(e) Je soussigné Sébastien LAFON déclare sur l’honneur de l’exactitude des renseignements fournis
dans ce dossier et être l’auteur des réalisations jointes en annexe. Fait à PAU le 30/11/2015 pour faire valoir ce que de droit. Signature : ❖ En cas de réussite partielle au titre (obtention de CCP), votre parcours de certification
s’effectuera en plusieurs étapes sur une durée maximale de 5 ans. ❖ Dans ce cas, vous pouvez ajouter à ce dossier initial des compléments et/ou
modifications acquis ultérieurement. Il convient donc de les lister dans le tableau
ci-dessous. Liste des éléments ajoutés au dossier initial en cas de poursuite de votre parcours après une réussite partielle au titre (obtention de CCP) - Candidats par VAE et par formation - Liste des éléments ajoutés au dossier Dates Signature devis parcours de formation “Digital Marketing”
janvier
2016

Curriculum Vitae

FICHE DESCRIPTIVE DE LA PRATIQUE
PROFESSIONNELLE
CORRESPONDANT
À
L’ACTIVITÉ TYPE N° 1 Intitulé de l’activité
-
type : Développer une application client-serveur
1 -

Indiquez les résultats directs de votre action
: produits fabriqués, ouvrages,
prestations de service ou autres productions que vous avez réalisés ou auxquels vous
avez contribué :
Développement d’un site de commerce en ligne fictif SpeedyMarket
2-
Décrivez les tâches et/ou opérations que vous avez directement effectuées en vue
des réalisations indiquées ci-dessus ainsi que leur fréquence de réalisation : Environnements de travail:
- Installation d’un éditeur de textes et d’un EDI
- Installation d’un gestionnaire de contenus CMS (Wordpress)
Conception
- Conception de la base de données
- Mise en place avec un jeu de données de test :
- Réalisation du MCD
- Passage au MLD et génération du script de création du modèle physique JMerise.
- Peuplement de la base de données
Développement de l’application en suivant le cahier des charges :
- Maquettage de l’application et mise en place les composants d’interface
utilisateur
- Création du diagramme des classes de l’application
- Développement des composants d'accès aux données
- Développement de l’application Fréquence de réalisation : ☐
Très fréquemment
x
Fréquemment
☐
Rarement LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 9 /70

3-
Lieux où cette pratique professionnelle
a été exercée : Nom
de
l’entreprise,
organisme ou association Lieu Chantier, atelier, services ou
autres (à préciser) GRETA SUD AQUITAINE
Lycée St John PERSE
Salle de cours 22,
3 bis avenue NITOT
2 rue Jules FERRY
domicile,
BP1505
64000 PAU
médiathèques de PAU,
64105 PAU Cedex 4-
Indiquez la
période

de l’exercice de cette pratique professionnelle : Du 14/04/2015 au 09/10/2015 5 -
Précisez les moyens que vous avez utilisés pour accomplir les tâches décrites :
matériels, outils, techniques, matériaux, produits, logiciels,… :
Logiciels EDI - Netbeans, Eclipse
Editeurs de texte - Sublime Text, Brackets, Notepad ++
Logiciels de modélisation : JMerise, ArgoUML, MySQLWorkbench
Langages informatiques utilisés : Php, Html, CSS, SQL
Méthodes de modélisation : Merise
6-
Pour la réalisation de ces tâches
ou opérations
, avez-vous travaillé seul ou en équipe,
avec ou sans consignes, en relation avec d’autres personnes de votre entreprises ou
extérieures à votre entreprise …) ? Si oui, précisez dans quelles circonstances : Projet d’équipe mené à quatre puis à trois suite à une modification des groupes.
7-
Documents annexes 7 A – Le cas échéant, documents prévus dans le règlement du titre visé : 7 B - Documents complémentaires en option
: indiquez ici la liste des documents que
vous souhaitez présenter au jury ANNEXE A : CCP n°1 Projet SpeedyMarket
Date : LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 10 /70

FICHE DESCRIPTIVE DE LA PRATIQUE
PROFESSIONNELLE
CORRESPONDANT
À
L’ACTIVITÉ TYPE N° 2 Intitulé de l’activité
-
type : Développer une application web
1 -

Indiquez les résultats directs de votre action
: produits fabriqués, ouvrages,
prestations de service ou autres productions que vous avez réalisés ou auxquels vous
avez contribué :
-
Back Office Speedy Market en Java
- intégration de maquettes dans Wordpress
- Développement d’une application de réservation des salles
- Développement d’une application simple de mobilité numérique (chefs - sous Android ;
Réservation de salles en jQuery Mobile)
2-
Décrivez les tâches et/ou opérations que vous avez directement effectuées en vue
des réalisations indiquées ci-dessus ainsi que leur fréquence de réalisation : Environnements de travail:
- Installation d’un éditeur de textes et d’un EDI
- Installation et configuration de serveurs web : locaux et distants
- Installation d’un gestionnaire de contenus CMS (Wordpress)
- Utilisation de Mozilla Developpment console
Réalisations :
-
cahier des charges
tutoriel destiné aux clients
compte rendu de réunion
Conception
- Conception de la base de données, mise en place
- Réalisation du MCD
- Passage au MLD et génération du script de création du modèle physique JMerise.
Développement de l’application :
- Maquettage de l’application et mise en place des composants d’interface
utilisateur
- Création du diagramme des classes de l’application
- Développement des composants d'accès aux données
- Développement de l’application Fréquence de réalisation : ☐
Très fréquemment
x
Fréquemment
☐
Rarement LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 11 /70

3-
Lieux où cette pratique professionnelle
a été exercée : Nom
de
l’entreprise,
organisme ou association Lieu Chantier, atelier, services ou
autres (à préciser) GRETA SUD AQUITAINE
Lycée St John PERSE
Bureau,
2 rue Jules FERRY
domicile,
64000 PAU
Médiathèques de PAU
CREAV
8 rue Paul BERT
64000 PAU
4-
Indiquez la
période

de l’exercice de cette pratique professionnelle : Du 22/06/2015 au 13/11/2015 5 -
Précisez les moyens que vous avez utilisés pour accomplir les tâches décrites :
matériels, outils, techniques, matériaux, produits, logiciels,… :
Logiciels EDI - Netbeans, Eclipse, Aptana
Editeurs de texte - Sublime Text, Brackets, Notepad ++
Maquettage, Zoning : Evolus Pencil, VUE
Logiciels de modélisation : JMerise, ArgoUML, MySQLWorkbench
Langages informatiques utilisés : Php, Html, CSS, SQL
Méthodes de modélisation : Merise 6-
Pour la réalisation de ces tâches
ou opérations
, avez-vous travaillé seul ou en équipe,
avec ou sans consignes, en relation avec d’autres personnes de votre entreprises ou
extérieures à votre entreprise …) ? Si oui, précisez dans quelles circonstances : Projet mené seul sous la responsabilité de Sylvain Péré, webmaster-développeur, et
Mirentxu Belly, chef de projet web.
7-
Documents annexes 7 A – Le cas échéant, documents prévus dans le règlement du titre visé : 7 B - Documents complémentaires en option
: indiquez ici la liste des documents que
vous souhaitez présenter au jury
B : CCP N°2 - BACK OFFICE JAVA SPEEDYMARKET
C : CCP N°2 - CMS REFONTES DE DEUX SITES WEB EN WORDPRESS
D : CCP N°2 - DÉVELOPPEMENT D’UNE APPLICATION DE RÉSERVATION DES SALLES
E : CCP N°2 - RÉALISATION D’UNE APPLICATION SIMPLE DE MOBILITÉ NUMERIQUE (sous
Android et jQuery Mobile)
Date : LAFON Sébastien | Titre professionnel “Développeur logiciel” | PAU | Novembre 2015 | 12 /70

ANNEXES
A : CCP N°1 - PROJET SPEEDYMARKET
B : CCP N°2 - BACK OFFICE JAVA SPEEDYMARKET
C : CCP N°2 - INTEGRATION DE MAQUETTE DANS WORDPRESS
D : CCP N°2 - DÉVELOPPEMENT D’UNE APPLICATION DE RÉSERVATION DES SALLES
E : CCP N°2 - RÉALISATION D’UNE APPLICATION SIMPLE DE MOBILITÉ NUMÉRIQUE
G - COMPLÉMENTS DE FORMATION

A : CCP N°1 PROJET SPEEDYMARKET
Présentation du projet SpeedyMarket
Liste des compétences validées par ce projet
Développer une interface utilisateur
Développer des composants d’accès aux
données
Développer des pages web en lien avec une base
de données
Utiliser l’anglais dans son activité professionnelle
en informatique
Contexte
SpeedyMarket est un projet transversal, fruit d’un travail à la fois collectif et individuel
réalisé dans le cadre de la formation. Il a permis de couvrir toutes les étapes de réalisation
des applications nécessaires à la gestion d’un drive de supermarché, de la base de
données commune à une interface web front-office de type e-commerce au back-office
pour la gestion des stocks et des commandes.
Front-office
Pour l’interface web front-office, nous avons abordé et quasiment finalisé deux versions
de vitrine.
1HTML/CSS/PHP reliée à la base de données SQL.
Le panier réalisé en PHP est une inspiration de la structure MVC.
2Une version Wordpress nous a permis de réaliser l’intégration de cette
maquette et de créer un plugin SpeedyMarket qui fait le lien entre le front office et
le
backoffice.
Back-office
Coté back-office, nous avons réalisé
1une interface en Java reliée à la base de données.
2une partie administrative dans un plugin Wordpress

Les extraits de code présentés dans cette section peuvent à la fois de moi même ou de
collaborations collectives, je saurais à même de vous commenter le fonctionnement si
vous m’interrogez sur ces scripts.
Avant de nous lancer dans le codage à proprement parler, nous avons réalisé une étude
concurrentielle d’autres sites de drive, d’envergure équivalente ou plus importante. Voici
un extrait du document réalisé, l’usage de Google docs nous a autorisé des commentaires
afin de faire évoluer le travail commun et partager les tâches ;
:
Puis nous avons effectuer un zoning et recenser les pages que nous souhaitions réaliser.
Voici la proposition de zoning pour la page d’accueil...

et le tunnel d’achat dont j’avais la charge...
Cependant, celui ci n’a pas été déployé car nous ne proposions pas de paiement : le site
est en effet fictif ! Le Panier décrit plus bas est un début de ce tunnel d’achat.
Payplug aurait été une évolution possible vers une solution de paiement facile à mettre en
place. Un compte avait été créé pour effectuer des essais :
Chacun a pu proposer des idées sur le projet, sur des sujets très variés tels le processus
de création, le contenu, le design de l’interface, le maquettage des pages principales, le
prototypage fonctionnel, l’intégration dans un CMS.

En ce qui me concerne, le chemin vers ma maquette définitive est passé par le papier :
Voici ma maquette réalisée avec Photoshop CS 5 et la grille de positionnement Bootstrap
1
.
1
Bootstrap est une norme de création, en règle générale sur 12 colonnes, elle est un moyen pratique de
respecter les standards en vigueur sur Internet en terme de responsivité - Bootstrap est aussi un
framework qui propose un positionnement par container, rangée et colonnes, ainsi que de nombreux
composants logiciels.

Et la maquette finale commune sur laquelle nous allons effectuer l’intégration HTML et CSS.

Afin de permettre le stockage des nombreuses données issues du site vitrine, nous avons
conçu en groupe une base de données. Le MCD 2 présenté montre l’ensemble de la base
de
données.
On remarque sur ce schéma :
— La quantité d’article en stock est directement stockée dans l’entité article , ce qui ne
permet la gestion que d’un seul stock. Pour gérer plusieurs stocks il faudrait une entité
supplémentaire.
— Un article est lié à une et une seule catégorie . Il pourrait être judicieux de permettre à un
article de se trouver dans plusieurs catégories.
— L’entité categorie contient une association réflexive qui permet de construire une
arborescence de catégories.
Le MCD retenu et étudié en cours pour le projet SpeedyMarket. L’équipe enseignante a
souhaité que l’on travaille, à juste titre, sur la même base de données.
2
Un modèle conceptuel des données permet de visualiser les contraintes, les entités, les associations
entre les tables, il est une étape essentielle pour parvenir à une intégrité maximale des données

Le schéma entité association a respecté les règles des cardinalités : telle entité est
associé à telle autre.
Par exemple, l’entité chaise peut avoir 1 ou plusieurs pieds, par contre un pied de chaise
ne peut appartenir qu’à 0 ou 1 seule table on aura donc un schéma entité association type
:
Dans cet exemple, je pars du principe qu’il existe des chaises à un pied. de plus,
un pied peut être monté sur une et une seule chaise, et peut ne pas être monté
sur une chaise.
De ce modèle relationnel découle un schéma physique des données qui pourra faire le lien
avec la base de données :

Afin de mettre en place une base de données, il existe de nombreuses manières de
procéder… selon les environnements et les habitudes de chacun.
On peut par exemple effectuer un import du fichier SQL, à partir de PHPmyAdmin.
Il faudra cependant que les mentions (If not Exists permet de ne pas écraser une base qui
porterait déjà le même nom)
CREATE DATABASE IF NOT EXISTS nomdelabase
Une autre possibilité consiste à écrire le script directement dans la page de PhpMyAdmin,
sous l’onglet SQL, il faut alors écrire selon le formalisme de SQL :
#-----------------------------------------------------------#
Script MySQL.
#-----------------------------------------------------------CREATE TABLE article(
id_article
int

(
16
)
Auto_increment NOT NULL ,
a_designation
Varchar

(
25
) CHARACTER SET utf8 COLLATE
utf8_general_ci NOT NULL,
a_pht
Float NOT NULL ,

a_description
Varchar

(
100
a_quantite_stock
IntNOT NULL ,
a_visible
BoolNOT NULL ,

id_categorie
Int,

url_image
Varchar

(
255
id_tva
Int,

PRIMARY KEY
(
id_article )
)
ENGINE
=
InnoDB;
Les contraintes sont écrites après la création des tables,
de sorte de pouvoir les retirer (DROP), les modifier
(ALTER, MODIFY) sans mettre en danger l’intégrité des
autres données présentes dans la base.
ALTER TABLE client ADD CONSTRAINT FK_client_id_personne FOREIGN KEY
(
id_personne
)REFERENCES personne
(
id_personne
);
ALTER TABLE ligne_commande ADD CONSTRAINT FK_ligne_commande_id_article
FOREIGN KEY
(
id_article
)REFERENCES article
(
id_article
);
ALTER TABLE ligne_commande ADD CONSTRAINT FK_ligne_commande_id_commande
FOREIGN KEY
(
id_commande
)REFERENCES commande
(
id_commande
);
Ensuite, il faut “peupler” la base ou procéder à une injection de tupples dans la
base :
INSERT INTO
`tb_article`
(
ìd_article`
,
à_designation`
,
à_pht`
,
à_description`
,
à_quantite_stock`

,
`a_visible`

,
ìd_categorie`
,
ùrl_image`
,
ìd_tva`
)VALUES
(
13
,
'tournedos francais'
,
3.25
,
'viande bovine france tendreetdouce'
,
2
,
0
,
15
,
'tournedos.jpg'
,
6
),
(
14
,
'Banane d equateur'
,
1.25
,
'banane douce et sucrée'
,
36
,
0
,
24
,
'banane.jpg'
,
6
),
(
15
,
'savon marseille'
,
5.76
,
'savon origine france'
,
0
,
0
,
11
,
'savonmarseille.jpg'
,
8
);

B : CCP N°1 et N°2
BACK OFFICE JAVA SPEEDYMARKET
Développer une interface utilisateur/ Développer des
composants d'accès aux données
-- JAVA
Connaissances mises en oeuvre
-- SQL
-- modele pattern DAO - POJO
-- concept de transaction --- hibernate ---- middleware outil pour faire la partie d’accès à la base de données - outil qui se trouve au
milieu - driver - framework qui fait l’interaction avec la bdd - JDBC
Pratiques
-- développer POO -- classes DAO -
Développement des premières interfaces
Afin d'organiser notre projet, nous allons créer un template de base template.xhtml qui
sera utilisé par l'ensemble des pages du projet. Ce template sera également associé à un
fichier css de base style.css.
L'arborescence cible sera la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>

Speedy Market Admin
</title>
<meta

http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<h:outputStylesheet

name
=
"css/style.css"
/>
<h:outputStylesheet

name
=
"font-awesome-4.4.0/css/font-awesome.css"
/>
</h:head>

<h:body>

<h:graphicImage

value
=
"resources/images/logo.png"
/>
<div

id
=
"header">
<div

id
=
"headerContent">
<h2>

Speedy Market Administration
</h2>
<h:graphicImage
value
=
"resources/images/bg.jpg"
/>
</div>

</div>

Afin que le projet fonctionne, nous devons nous assurer d’avoir toutes les bibliothèques
de composants présentes sur notre système.
La connexion à la base s’effectuera grâce au framework Hibernate.
L'environnement de travail pour cette application web en client léger s’effectue au sein du
framework JSF.
Le plugin JBossForge devra être installé depuis le menu Tools/Plugin/Available => search
for JBossForge.il sert à développer des applications Java EE basé sur Maven. Tout est
donc intégré pour utiliser le framework JSF, et notamment le serveur GlassFish.
packageorg
.
hibernate
.
engine
.
transaction
.
jta
.
platform
.
internal;
public
class
JBossAppServerJtaPlatform
extends
AbstractJtaPlatform{
ublic
p
static
final
StringAS7_TM_NAME
=
"java:jboss/TransactionManager";
public

static
final
StringAS4_TM_NAME
=
"java:/TransactionManager";
public

static
final
StringJBOSS_UT_NAME
=
"java:jboss/UserTransaction";
public

static
final
StringUT_NAME
=
"java:comp/UserTransaction";
Nous allons donc maintenant configurer une connexion à une base afin de pouvoir mettre
en place le pattern DAO dans notre projet, et ainsi gérer la persistance de nos données.
Avant
toute
chose,
créer
le
package
dans
les
sources
greta.speedymarket.modelHibernate, qui recevra l'ensemble des classes générées depuis
la base de données.

Hibernate Mapping Files and POJOs from Database...
En cliquant sur Finish, l'ensemble des POJOs correspondant aux tables sont générés dans
le package greta.speedymarket.modelHibernate.
Nous allons copier l'ensemble de ces classes dans le nouveau package
greta.speedymarket.model.
Afin de pouvoir récupérer les objets de la base grâce à Hibernate, nous allons créer la
classe HibernateUtil.javadans le package greta.speedymarket.services.
Travaux supplémentaires effectués :
Mise en place d’un fichier CSS. La mise en place d'une déconnexion.
Tous les menus et tous les tableaux sont là. Changement des icones du menu.
La mise en place d'un composant breadcrumb en bas de la page. Projet organisé sous
forme JSF.

Vues de l’interface finale

e

C : CCP N°2 INTÉGRATION DE MAQUETTES
DANS WORDPRESS
Compétences mises en oeuvre : 6 et 7
Développer des pages web en lien avec une base de
données
Nous avons au pralable effectué un découpage de la maquette de groupe à partir
INTEGRATION DES PAGES SPEEDY MARKET DANS LE THEME SPEEDY MARKET
<?
php
/**
*
The
template
fordisplaying CATEGORY
.
PHP
*/
get_header
();
?>
<div
id
=
"primary"
class
=
"content_area">
<main
id
=
"main"
class
=
"site_main"
role
=
"main">
<ul>
<?
php
/*beginning of the loop*/
while
(
have_posts
())
:the_post
();
echo
"<li class='liste'>";
the_title
();
echo get_the_post_thumbnail
();
/*ici on appelle une miniature de
l'image mise dans le post */
echo
"<a href='";
echo the_permalink
();
echo
"''>En savoir plus...</a>";
echo
"</li>";
endwhile
;
?>
</ul>
</main>
</div>

<?
php get_footer
();
?>
/*
Plugin
Name
:shop speedymarket
PluginURI
:http
:
//sebastienlafon.net/speedymarket
Description
:
Speedy
Market
,le drive de produits locaux
Version
:
1.0
.0
Author
:
Troisiemepromotion de titre
ProDEV
AuthorURI
:http
:
//sebastienlafon.net
*/
EXTRAIT DU FICHIER INSTALL QUI ENVOIE LA BASE DE DONNEES A COTE DES TABLES
DE WORDPRESS
function
__construct
($mode
=
'install'
){
global$wpdb;
$wpdb
->
tb_article
=$wpdb
->
prefix
.
'article'
;
$wpdb
->
tb_categorie
=$wpdb
->
prefix
.
'categorie'
;
$wpdb
->
tb_client
=$wpdb
->
prefix
.
'client'
;
$wpdb
->
tb_commande
=$wpdb
->
prefix
.
'commande'
;
$wpdb
->
tb_image
=$wpdb
->
prefix
.
'image'
;
$wpdb
->
tb_ligne_commande
=$wpdb
->
prefix
.
'ligne_commande'
;
$wpdb
->
tb_personne
=$wpdb
->
prefix
.
'personne'
;
$wpdb
->
tb_preparateur
=$wpdb
->
prefix
.
'preparateur'
;
$wpdb
->
tb_statut
=$wpdb
->
prefix
.
'statut'
;
$wpdb
->
tb_tva
=$wpdb
->
prefix
.
'tva'
;
if
($mode
==
"install"
)

add_action(
'admin_menu'
,
array
(
&
$this,
'speedymarket_menu'
));
}
function
my_admin_menu
() {
## Ajoute un lien vers le plugin dans le menu "extension" de
l'administration
add_submenu_page(
'plugins.php'
,
"speedymarket"
,
"Speedy
Market"
,
8
,
__FILE__
,
array
(
&
$this,
'homepage'
));
}
function
install
(){
## Initialisation du plugin
global$wpdb;
// Creation des tables du plugin
$result
=$wpdb
->query(
"
CREATE TABLE `
$wpdb-> tb_article` (
ìd_article` int(11) NOT NULL,
à_designation` varchar(100) NOT NULL,
à_pht` float(6,2) DEFAULT NULL,
à_description` text,
à_quantite_stock` int(11) DEFAULT NULL,
à_visible` tinyint(1) NOT NULL,
ìd_categorie` int(11) DEFAULT NULL,
ùrl_image` varchar(200) DEFAULT NULL,
ìd_tva` int(11) DEFAULT NULL
);
CREATE TABLE `
$wpdb-> tb_categorie` (

ìd_categorie` int(11) NOT NULL,
`c_libelle` varchar(100) NOT NULL,
ìd_categorie_mere` int(11) DEFAULT NULL,
ùrl_image` varchar(200) DEFAULT NULL
);
Mettre en œuvre une solution de gestion de contenu ou
e-commerce
J’ai souvent eu l’occasion d’installer le CMS Wordpress, c’est celui qui est choisi dans la
grande majorité des cas. Voici un extrait de la création du template pour la page accueil.
template personnalise - plutôt que de travailler sur l’index on va créer un template pour
travailler en sécurité sur ce template
<?
php
/*Template Name: Accueil*/
?>
<?
php
get_header
();
?>
<h1>
<?
php the_title
();?>
</h1>
<div>
<?
php
while
(
have_posts
())
:the_posts
();
the_content
();
endwhile;
?>
</div>
<?
php
get_footer
();
?>
SLIDER
--le script va venir dans le footer .php
ne pas oublier de mettre le fichier css bxslider dans le header
Afin de pouvoir permettre a un utilisateur de charger des photos dans le slider nous avons
procédé à l’installation du plugin advanced custom fields.
<?
php $image1
=
get_field
(
'slide2'
);?>
<img src="
<?
php echo $image2
[
'url'
];?>
" alt=""/>

Integration
du
slider
avec
l’outil
bxSlider,
la
fonction
Wordpress
get_bloginfo(‘template_directory’)
va récupérer le chemin relatif des images.

On peut assigner les ID CSS a chaque page dans wordpress.
Travail sur les catégories (afficher les catégories dans le menu)
Fonctions Wordpress uilisées :
afficher le titre de la page -> the_title
afficher les miniatures de l’article ->get_the_post_thumbnail();
obtenir le lien de la page -> the_permalink();

Le coeur du CMS, la boucle Wordpress!
Nous avons pris le fichier category.php absent dans le thème par défaut
pour 1listing articles associé a une categorie
On appeller le header get_header.php() et le footer get_footer.php()
On effectue un listing avec du li à l’intérieur de la boucle wordpress : tant qu’il y a des
articles on va créer classe liste.
Grace au plugin advance custon field on va recuperer les champs créés (prix - poids)
Dans la plupart des éditeurs de texte, et des EDI, on peut rajouter la syntaxe WordPress
voire même pour Netbeans, télécharger le dernier Zip en date de l’archive Wordpress et
procéder à son installation depuis l’EDI.

Modification du css et de la classe liste
Pour avoir une miniature (thumbs), on doit mettre l’image à la une

Partie bacck qui permet l’affichage des catégories, on notera l’emploi des fonctions wpdb
de Wordpress qui autorise la connexion avec la base de données :
<div
class
=
"form-group">
<label

for
=
"parent"
class
=
"col-sm-3 control-label"
>
Catégorie
</label>
<div

class
=
"col-sm-9">
<select

name
=
"categorie">
<option

value
=
"NULL"
>
<?
php echo esc_attr
(
__
(
'Aucun'
));
?>
</option>
<?

php
global$wpdb;

$cats
= $wpdb
->
get_results
(
"SELECT
id_categorie,c_libelle,id_categorie_mere
FROM
`tb_categorie`
");

//$wpdb->get_results($cats);

// $i = 0;

foreach

($cats
as$result
):
?>

<option

value
=
""
>
<?
php echo $result
->
c_libelle
?>
</option>
</select>

/div>
<
</div>

<?

php
endforeach;
?>

Utiliser l’anglais professionnel informatique
A de multiples reprises, cette compétence a pu être mise en oeuvre autant à l’oral qu’à
l’écrit. Un soin particulier a été mis sur les fautes de syntaxe et les temps afin de véhiculer
le message le plus clair possible
Expression orale :
Au tout début de notre formation au devCamp DOLIBARR : échanges avec des développeurs de
nationalités différentes à propos de la solution logicielle open source DOLIBARR 3
.
Compréhension orale :
Tutoriels vidéos sur la conception de plugin de Wordpress. Echanges variés entre collègues à propos de
termes informatiques.
Expression écrite :
Requêtes effectuées en anglais sur les moteurs de recherche. Questions soumises auprès de la
communauté de membres Stackoverflow, Wordpress Linkedin.
3
voir évènements en compléments de formation

Compréhension écrite :
De loin la compétence la plus mise en oeuvre. Lecture des pages de recherche sur des sujets techniques
liés au développement des applications dans tous les langages informatiques. Utilisation d’outils : EDI,
gestion de projet, éditeurs de textes en anglais 4.
Réalisation de commentaires techniques en anglais
Commentaires techniques rédigés en anglais sur certains de mes codes afin de générer la
documentation technique. Recherche de variables en anglais.
4
voir logiciels en compléments de formation

D : CCP N°2 DÉVELOPPEMENT D’UNE
APPLICATION DE RÉSERVATION DES SALLES
compétences présentées 6 et 7
Développer des pages web en lien avec une base de
données
J’ai souhaité programmer en orienté objet (POO)5 . Cela est très utile car la POO permet de
faire naviguer son code dans de nombreux environnements de travail et est plus évolutive
et maintenable. Les langages utilisés pour l’application sont le PHP, le jQuery, le CSS, le
HTML, Javascript.
J’ai étudié avant de me lancer dans le codage les recours à des frameworks évolués de
type Zend ou Symphony, mais leur usage me semblait inadapté au développement d’un
système simple de réservation de salles.
J’ai mis en application ce que nous avions vu en cours et je me suis librement inspiré du
paradigme 6 MVC. Mon application est fonctionnelle mais ne reprend pas exactement les
fondements du design Pattern roi.
Le MVC que j’aurais du utiliser
Extraits de scripts et détails sur le développement
Afin de lancer les classes automatiquement j’ai créé un fichier autoloader
<?
php
5
La POO est apparu dans les années 1960, elle est un paradigme qui associe des briques ou objets en
vue de leurs interactions
6
Un paradigme de programmation fournit (et détermine) la vue qu’a le développeur de l’exécution de son
programme.

/**
*

@paramClasses contenues dans le dossier class $class_name
*/

function__autoload
(
$class_name)
{
require

'class/'
.
$class_name
.
'.php';
require_once
'admin_header.php';
}
Afin de me connecter à la base de données, j’ai créé un fichier
Connection.php qui contient
une classe
Connection
<?
php
/**
*

Connection à la base de données
*
*

@authors
.
lafon
*/

class
Connection
{
/**
*
*

@var objet de type PDO statement connexion à la DB visible seulement
* à l'intérieur de cette classe et des classes filles
*/

protected$db;

Et une fonction dans laquelle je créé un objet PHP Data Object (PDO)
public
function
Connection
()
{

try

{
$this
->
db
=
newPDO
(
'mysql:host='
.
$this
->
host
.
';
dbname
=
'.$this->dbname.'
;
charset
=
utf8
', $this->user,
$this->password,
array
(
PDO
::
ATTR_ERRMODE
=>PDO
::
ERRMODE_EXCEPTION
));
}
catch

(
Exception$e)
{
die

(
'Erreur : '
.
$e
->
getMessage
());
}

}

J’ai crée des fichiers controller, model, view : les controllers assurent l’interface entre les
modèles et les vues. Les modèles assurent la liaison avec la base de données et les vues
qui gèrent l’affichage. Enfin, les fichiers présents à la racine jouent le rôle de routeur et ne
contiennent que des appels aux controllers. Les méthodes créées à l’intérieur des classes
deviennent de petits objets que l’on peut manipuler.

Ce dossier contient les classes
Vue du dossier local à partir du logiciel de transfert de fichiers Filezilla
Exemple du
controller
des inscriptions :
<?
php
/**
*

ControllerInscription
*

Controledes inscriptions
*

@authors
.
lafon
*/

class
{
/**

*

Controlede l
'ajout de client
*

@returnun tableau contenant les donn
é
es
àins
é
rer en
base
*/

public

functioncontrollerAddInscription
()
{
$this
->
ModelInscription
=
new
ModelInscription
();
$query
= $this
->
ModelInscription
->
modelAddSubscription
(
$nom
, $prenom
,
$email
,$telephone
);
$this
->
ViewInscription
=
new
ViewInscription
();
return$this

->
ViewInscription
->
viewFormAddCustomer
(
$query
);
}
}
Exemple du
model
des inscriptions :
<?
php
/**
*

Descriptionof
ModelInscription
*
*

@authors
.
lafon
*/

class
ModelInscription
extends
Connection
{
/**

*

Mod
è
le d
'ajout de client en base à partir d'
un formulaire
*

@paramvarchar $nom
*

@paramvarchar $prenom
*

@paramvarchar $email
*

@paramvarchar $telephone
*/

public

functionmodelAddSubscription
(
$nom
,$prenom
,$email
,$telephone)
{
}
$nom
=$_POST
[
'nom'
];
$prenom
=$_POST
[
'prenom'
];
$email
=$_POST
[
'email'
];
$telephone
=$_POST
[
'telephone'
];
$sql
="
INSERT INTO tb_client
(

idClient
,
Date
,nom
,prenom
,email
,telephone
)
VALUES
(
'NULL'
,
''
,
'$nom'
,
'$prenom'
,
'$email'
,
'$telephone'
);
";

$this
->
db
->
query
(
$sql
);
}
Exemple de la
view
Inscription :
<?
php
/**

*
Descriptionof
ViewInscription
*
*

@authors
.
lafon
*/

class
ViewInscription
{
/*

*

@paramtype $query
*

@return
string
*/

public

functionviewFormAddCustomer
(
$query)
{
$form
=
''
;
if

(
$form
!=
''
)
//n'affichera pas d'erreur car la variable existe
{
}
else

{

//onsubmit='".$controllerRoom->controllerAddNumeric()."'
$form
.="
<h1>

Inscription
</h1>
<form

action
=
'admin_inscription.php'
method
=
'post'>
<caption>

Inscrivez vous
</caption>
<p>

<label

for
=
'nom'
>
Veuillez saisir votre nom :
</label>
<input

type
=
'text'
name
=
'nom'
id
=
'nom'
placeholder
=
'Votre nom'
/>
<label

for
=
'prenom'
>
Veuillezsaisirvotreprénom:
</label>
<input
type
=
'text'
name
=
'prenom'
id
=
'prenom'
placeholder
=
'Votre prénom'
/>
<label
for
=
'email'
>
Veuillez saisir votre courriel :
</label>
<input

type
=
'text'
name
=
'email'
id
=
'email'
placeholder
=
'E-mail'
required
/>
<label

for
=
''
>
Veuillez saisir votre numéro de téléphone :
</label>
<input

type
=
'text'
maxlength
=
'10'
name
=
'telephone'
id
=
'telephone'
placeholder
=
'Téléphone'
/>
</p>

";

echo $form;
}

}
}
Exemple d’un fichier de type
routeur
présent à la base des dossiers :
<meta
http-equiv
=
"content-type"
content
=
"text/html; charset=utf-8"
/>
<?

php
require
(
'../autoloader.php'
);
include
'./admin_header.php';
$ControllerInscription
=
new
();
$formulaire
=$ControllerInscription
->
controllerAddInscription
();

Mettre en œuvre une solution de gestion de contenu ou
e-commerce
Vue des tables côte à côte avec celles de Wordpress
Création de l’accès sécurisé pour l’administrateur du site de Wordpress
Je crée un accès aux pages d’administration seulement à l'administrateur du site : ce code
est ensuite inclus à l’application :
<?
php
if
(is_user_logged_in
()
)
{
global$current_user

;
get_currentuserinfo
();
$utilisateur
=$current_user
->
user_login
;
if

(
$utilisateur
!=
"adminPepiniere"
)
{

}
else
{
header
(
"location:
http://creav.fr/pepiniere-test/admin_signin
"
)}
header
(
"location:
http://creav.fr/pepiniere-test/admin_index
"
);}
?>
ainsi que
<?

php wp_login_form
(
'redirect='
.
get_bloginfo
(
'url'
).
'/admin_index/'
); ?>
une fonction native de redirection wp elle renvoie vers admin_index si l’user a les droits.

Modification du fichier connection.php pour permettre aux pages d’administration et front de communiquer avec la base sans passer par les fonctions wpdb de Wordpress : private$host

=
'localhost';
/**

*

@var
stringnom de la
basede donn
é
es
*/

private$dbname

=
'confidentiel'; //je ne cite pas le nom mais il s’agit de la
base qui abrite le wordpress
/**

*

@var
stringnom d
'utilisateur de la DB
*/

private$user

=
'idem';
/**

*

@var
string mot de passe de l
'utilisateur de la DB
*/

private$password

=
'idem';
Création des templates a l’intérieur du thème enfant
L’autoloader est requis pour chaque page, celui ci permettra de lancer les classes qui
subissent également quelques modifications au passage dans l’environnement
Wordpress.
<?
php
/**
*

*

Template
Name
:
Front_index
*
*/

global$rt_sidebar_location;
get_header
();
require
(
'autoloader_front.php'
);
?> La section “content_block_background” va contenir le code de l'application
<section
class
=
"content_block_background">
<?
php
require
(
'autoloader.php'
);
include
'admin/admin_header.php';
$controllerRoom
=
new
ControllerRoom
();
$formAddRoom
=$controllerRoom
->
controllerFormAddRoom
();
echo $formAddRoom;
$controllerRoom
->
controllerAddRoom
();
?>

</section>

<?
php get_footer
();
?>
Modification des chemins d’appels de script Tous les appels aux scripts externes contenus dans l’application sont modifiés (Css, JavaScript, jQuery) 
<link rel="stylesheet" type="text/css" href="
<?
php echo
get_stylesheet_directory_uri
();?>
/css/templatemo_misc.css ">
<?
php echo
();?>
/css/bootstrap.css ">
<?
php echo
();?>
/css/templatemo_style.css ">
get_stylesheet_directory_uri() fonction wordpress qui permet de récupérer le chemin du template où se trouve le thème enfant Pépinièr. Modification des chemins d’appels des images
Les chemins des images présents dans les vues sont également modifiés : div
<
class
=
'item-thumb'>
<span
class
=
'note'
>
<img
src
=
'".get_stylesheet_directory_uri()."/img/small_logo_1.png'
alt
=
''
>
</span>
<img
src
=
'".get_stylesheet_directory_uri()."/img/$resultat->
url_photo1'>
<span
class
=
'note'
>
<img
src
=
'".get_stylesheet_directory_uri()."/img/small_logo_1.png'
alt
=
''
>
</span>
<img
src
=
'".get_stylesheet_directory_uri()."/img/$resultat->
url_photo2'>
</div>
<!-- /.item-thumb →
Je tiens à faire remarquer que l’indentation du code chère à tout bon développeur n’est
pas respectée ici car le format A4 impose certaines limites !

E - CCP N°2 DÉVELOPPER UNE APPLICATION
SIMPLE DE MOBILITÉ NUMÉRIQUE (SOUS
ANDROID ET JQUERY MOBILE)
Sous Android en natif
Le SDK est indispensable, il est le package de démarrage car il contient les plateformes
Android et distribution pour tester son application. De plus il faut installer le plugin ADT qui
va simplifier le développement et installer un émulateur et un convertisseur .class-to.dex
dans Eclipse. Il est très utile pour le déboguage, la création et les tests dans l’EDI.
Le SDK va nous permetre de télécherger les API des dernières versions des plateformes
Android.
Une fois ces deux élèments prêts, on peut commencer à créer des applis mobiles – on
pourra créer des machines virtuelles Android ou AVD pour Android Virtual Devices.
Le fichier activity est la classe de base du composant visuel de l’application

La classe AccesHTTP fournira, à l'application Android, un modèle de connexion au serveur
web
contenant
les
fichiers
PHP
d'accès à la base de données
Pour l’appplication que nous avons mise en oeuvre, nous avons placé les requêtes de
connexion à la base de données dans des fichiers PHP, ce sont eux qui ont assurés la
liaison avec la BD selon ce schéma.

Rendu final de l’application native Android
En jQuery Mobile dans le navigateur
je souhaitais explorer cette technologie qui me semblait intéressante, j’ai donc repris le
code de mon application de réservation de salles pour l’adapter afin d’avoir un rendu et
effectuer des essais en grandeur nature d’une solution alternative à l’aspect responsive
d’un site Internet abordé avec le bootstrap.
JQuery est une bibliothèque passionnante et très simple à mettre en oeuvre, elle est basée
sur du Html 5, du CSS. Il est aussi nécessaire de placer les fichiers jQueryMobile et jQuery
classique dans un dossier et de les appeler pour que l’application fonctionne.
Le principe est simple, sur une seule page, index.php par exemple, on va afficher tout le
code même si l’application contient plus d’écrans… Les écrans sont contenues dans des
balises de type
<div

data-role
=
"content">
uld
<
ata-role=
"
listview"
data-inset
=
"true">

Pour la réalisation de cette application, j’ai utilisé la console de développement de Google
Chrome comme très souvent lors des autres développements.
Vue des fichiers nécessaires à faire tourner une application

Vue de l’application Mobile
Qr code qui permet l’accès à l’application

Actualiser et partager ses
développement informatique
Démarche
de
contribution
aux
forums
compétences
Wordpress
en
Linkedin

Partage et versionning de code en anglais
Utilisation de la plateforme Github pour le travail collaboratif de coding et le partage
communautaire.
Intégration de gitHub en tant que plugin de l’IDE (cela permet la création de branche, de
copies, de fusion de manière plus intuitive et complète qu’avec le logiciel Github qui
s’avère trop limité et peu user-friendly)

Veille technologique 7
Poursuite de parcours
Le partage et l’amélioration s’est fait tout au long de mon parcours de formation avec
entre autre inscription à des cours en ligne, ceux particulièrement réussis de
Openclassroom
.
La poursuite de mon parcours professionnel de spécialisation sous forme d’une licence
“Digital Marketing ” en ligne, atteste d’ailleurs de cette démarche d’amélioration des
compétences. voir ci joint un extrait du devis destiné aux financeurs de mon futur
parcours.
7
(voir webographie

en annexe)

Organisation de mes activités de développement
Le planning initial concernant la période de stage est créé
Un planning de travail qui prévoit toutes les périodes de travail de la conception, la phase
d’interrogation, de recherches au développement à proprement parler a été créé en tout
début de période de stage.
Ce planning est réalisé avec le logiciel en ligne Google Gantter8
Les comptes rendus d'activité sont créés
La tenue d’un
rapport quotidien d'activité dans le cadre du stage a été maintenue, ce
dernier est documenté, lié aux documents en cours et ponctué d’annotations.
8
Gantter permet la réalisation de plannings avancés, une gestion des tâches avancées, ainsi que la gestion des ressources.

https://chrome.google.com/webstore/detail/gantter-for-google-drive/himomacamcpodhkahelbnmaddladgjgo

Extrait rapport quotidien d'activité
Mise en place de compte de gestion d’avancement des tâches
Après une longue période de tests et de comparatif d’outils de gestion de projets, j’ai jeté
mon dévolu sur Freedcamp, intuitif,avec un beau graphisme, il permet de savoir à quels
niveaux sont telles ou telles tâches de tel ou tel projet et de connaître le niveau de

participation
de
chacun
des
collaborateurs.
Discussion directe collaborative avec HangOut
Le chat intégré de google permet entre autre de parler à plusieurs mais aussi de se
partager des fichiers en direct, et de commenter ces fichiers, de plus il permet des
conversations vidéos. Il s’est avéré un outil précieux en ses temps de collaboration
intense.

Partage
de
ressources
et
de
documents
sur
Google
Drive
9
La plateforme Google Drive nous a permis d’avoir accès aux cours, à des ressources
partagées entre groupes et collègues stagiaires. De plus, les documents crées au sein de
la plateforme peuvent être commentés par ceux qui détiennent le lien de partage, de
modification ou de commentaires.
exemples de commentaires sur la correction d’un cahier des charges
9
Le GRETA avait prévu un accès un accès google Drive et une adresse email pour chacun des stagiaires avec le nom de

domaine greta-sud-aquitaine.fr

COMPLÉMENTS DE FORMATION
Évènements
Autres évènements
- Smart Apéro en compagnie de
l’association La mélée Adour à Tarbesle 15 juin 2015.
-
Conférence
crowdfunding
Maboiteestvous, CCI de Pau,
le 21 mai 2015.

Webographie
“Calcul Des Unités Bénéficiaires FIPHFP Secteur Public.”
Calcul FIPHFP des Unités Bénéficiaires
pour le secteur public
. Web. 12 Nov. 2015.
<
http://www.esat-midipyrenees.com/calcul-fiphfp-secteur-public.php
>
“Cours Et Tutoriels Sur Le Langage SQL.”
SQL
. Web. 12 Nov. 2015. <
http://sql.sh/
>
“Create Custom Shortcodes For WordPress in Two Minutes.”
RSS
. N.p., Jul. 2013. Web. 24 Nov. 2015.
<
http://www.sitepoint.com/create-custom-shortcodes-for-wordpress-in-two-minutes/
>
“Créer Un Thème De A à Z - Tutoriel WordPress.”
WordPress : Le Tutoriel
. Web. 24 Nov. 2015.
<
http://wordpress.bbxdesign.com/
>
“Grafikart.”
.fr
. Web. 12 Nov. 2015. <
http://www.grafikart.fr/
>
“HTML.”
W3Schools Online Web Tutorials
. Web. 12 Nov. 2015. <
http://www.w3schools.com/
>
“Insert Data Into MySQL Database.”
www.tutorialspoint.com
. Web. 24 Nov. 2015.
<
http://www.tutorialspoint.com/php/mysql_insert_php.htm
>
“JavaScript Validation API.”
JavaScript Form Validation
. Web. 24 Nov. 2015.
<
http://www.w3schools.com/js/js_validation_api.asp
>
“Javascript - Les Variables.”
Javascript - Les variables
. Web. 24 Nov. 2015.
<
http://www.lehtml.com/js/var.htm
>
“Le Blog De Nukleo.”
Afficher les articles en colonne avec WordPress
. Web. 24 Nov. 2015.
<
http://www.nukleo.fr/blog/afficher-articles-colonne-wordpress/
>
“Manuel PHP.”
PHP:
N.p., Nov. 2015. Web. 12 Nov. 2015. <
https://secure.php.net/manual/fr/
>
“Obtenez Un Titre Professionnel Reconnu Par l'État Devenez Chef De Projet Multimédia.”
OpenClassrooms, des MOOC et des cours accessibles à tous
. Web. 12 Nov. 2015.
<
http://openclassrooms.com/
>
“WordPress.Org.”
Main Page « WordPress Codex
. Web. 12 Nov. 2015. <
https://codex.wordpress.org/
>
“[Javascript] OnClick Et Function.”
CommentCaMarche
. Web. 24 Nov. 2015.
<
http://www.commentcamarche.net/forum/affich-2380672-javascript-onclick-et-function
>
“Timestamp - Outils De Conversion.”
timestamp - outils de conversion
. Web. 12 Nov. 2015.

<
http://www.timestamp.fr/
>
Bibliographie
● Draillard F. Premiers pas en CSS3 & HTML5. Paris: Eyrolles; 2013. Valade J. PHP &
● MySQL. Paris: First interactive; 2012.
● Lancker, Luc Van.
HTML5 Et CSS3: maîtrisez Les Standards Des Applications Web
St Herblain: Éditions ENI, 2013. Print.
● Anderruthy Jean-Noël.
Techniques De Veille Et e-réputation Comment Exploiter Les
Outils internet ?
St Herblain: Éd. ENI, 2009. Print.
● Pillou Jean-François, and Christine Eberhardt.
Tout Sur Le développement Logiciel:
écrire Du Code Ef cace. Paris: Dunod, 2011. Print.
● Rathenau, Gerard.
Google Analytics
. Culemborg: Van Duuren Informatica, 2014.
Print.
● Taché Philippe. Conduire Un Projet Informatique
. Paris: Eyrolles, 2014. Print.
● Valade, Janet, and Denis Duplan.
PHP Et MySQL Pour Les Nuls
. Paris: First
Interactive, 2010. Print.
● Seguy, Damien, and Philippe Gamache.
Sécurité PHP 5 Et MySQL
. Paris: Eyrolles,
2011. Print.
● Guitier, Laurence, and Jean-Pierre Imbert.
HTML 5
. Boulogne-Billancourt: Micro
application, 2014. Print.

Veille technologique (comptes créés)

Logiciels utilisés

Devis Open Classroom :

Facture progonlline

CONCLUSION
Cette formation fut passionnante et très dense. Les professeurs ont eu un temps restreint
pour nous donner les meilleures méthodologies et outils afin d’appréhender au mieux ce
métier passionnant et très chronophage. Le plus difficile a été d’estimer le temps
nécessaire pour effectuer des tâches.
il est également délicat de travailler avec les codes dont on s’inspire à travers les tutoriels,
les vidéos et les forums : tous les développeurs n’ont pas la même logique.
La rédaction du cahier des charges et de la documentation est une tâche plus naturelle
pour moi de par mes expérience passées de rédacteur dans les journaux locaux du Cantal.
Cependant, la réalisation de ces documents indispensables aux utilisateurs et aux
développeurs qui vont reprendre le code est très différente de l’écriture d’un article de
presse.
Le bon développeur doit s’efforcer de nommer correctement les variables, fonctions. Pour
un débutant il est aussi parfois difficile d’expliquer ce qu'on fait (ou ne fait pas).
La conception d‘une solution implique de traiter avec d’autres personnes : clients,
collègues, c’est un aspect important du métier de développeur.
Je tiens à remercier tous les intervenants de la formation, tant au niveau pédagogique
qu’administratif, ils ont offert un haut niveau de soutien et d’assistance et nous ont
magnifiquement accompagné dans notre apprentissage.