OGI.
Open Group Innovation

Formation Professionnelle

Developpement Web Full Stack
Programme Certifiant

Developpement Web Complet

HTML · CSS · PHP Natif · MySQL

Duree totale120 heures
NiveauDebutant a Intermediaire
CertificationAttestation de formation OGI
LangueFrancais
FormatPresentiel / Hybride
PrerequisAucun (formation accessible aux debutants complets)
Stack techniqueHTML5, CSS3, PHP 8+, MySQL 8+
OutilsXAMPP, Sublime Text, FileZilla
Open Group Innovations (OGI)
Juin 2026 - Tous droits reserves
OGI.
Open Group Innovation

Programme Developpement Web

120 Heures

1. Introduction

Ce programme de formation a ete concu pour permettre a toute personne, meme sans experience prealable en programmation, de maitriser les fondamentaux du developpement web. Dans le monde professionnel actuel, la capacite a creer des sites web et des applications dynamiques est un atout majeur pour l'emploi, l'entrepreneuriat et la transformation digitale des organisations.

La formation couvre l'ensemble du pipeline de developpement web : installation et configuration de l'environnement de developpement, creation de pages web statiques avec HTML et CSS, programmation cote serveur avec PHP natif, gestion de bases de donnees avec MySQL en ligne de commande, developpement d'applications CRUD completes et deploiement en production sur hebergement web. Chaque participant repartira avec des competences operationnelles immediates et une methodologie rigoureuse applicable en entreprise ou en freelance.

Objectifs de la formation

2. Public Cible et Prerequis

Public cible

  • Professionnels en reconversion vers les metiers du developpement web
  • Etudiants en informatique, sciences sociales, economie, gestion
  • Entrepreneurs souhaitant creer leur propre site web ou application
  • Charges de communication et community managers voulant autonomie technique
  • Professionnels du marketing digital souhaitant comprendre le code
  • Freelancers et consultants souhaitant offrir des services web
  • Enseignants et formateurs souhaitant creer des plateformes pedagogiques
  • Toute personne curieuse de comprendre comment fonctionne le web

Prerequis

  • Aucun prerequis technique obligatoire - formation accessible aux debutants complets
  • Connaissance de base de l'informatique (navigation web, fichiers, dossiers)
  • Notions de logique et d'algorithmique de niveau lycee (souhaitable)
  • Esprit analytique, patience et curiosite pour la programmation
  • Materiel personnel : ordinateur avec 4Go de RAM minimum et 20Go d'espace disque
  • Connexion Internet stable pour les telechargements et deploiements
OGI.
Open Group Innovation

Programme Developpement Web

120 Heures

3. Structure du Programme

Le programme est structure en 7 modules progressifs couvrant l'ensemble du pipeline de developpement web. Chaque module comporte des sequences theoriques, des ateliers pratiques guides et des mini-projets realises sur des cas concrets.

ModuleTitreDureeType
Module 1Installation et configuration des outils de developpement8hAteliers pratiques
Module 2HTML5 - Structure et semantique des pages web16hTheorie + Pratique
Module 3CSS3 - Stylisation et mise en page responsive18hTheorie + Pratique
Module 4Bases du PHP natif - Programmation cote serveur20hTheorie + Pratique
Module 5MySQL - Langage SQL en ligne de commande16hAteliers pratiques
Module 6CRUD complet - Application PHP/MySQL dynamique22hTheorie + Pratique
Module 7Projet complet et hebergement web20hAteliers pratiques
Total : 120 heures de formation, reparties sur 4 semaines en mode intensif ou 8 semaines en mode standard.

Architecture Web et Outils

XAMPP

Serveur Apache, PHP, MySQL, phpMyAdmin integres en local

Sublime Text

Editeur de code leger, coloration syntaxique, plugins, snippets

FileZilla

Client FTP/SFTP pour transfert de fichiers vers hebergement

HTML5

Structure semantique des pages web, balises, attributs, formulaires

CSS3

Stylisation, selecteurs, flexbox, grid, animations, responsive

PHP 8+

Langage serveur natif, variables, boucles, fonctions, sessions

MySQL 8+

SGBD relationnel, SQL, shell, procedures stockees, index

phpMyAdmin

Interface web de gestion MySQL (alternative au shell)

Git/GitHub

Versioning, collaboration, deploiement continu (introduction)

OGI.
Open Group Innovation

Programme Developpement Web

Module 1 - Installation

4. Module 1 : Installation et Configuration des Outils

Duree totale8 heures
Format2h theoriques + 6h ateliers
ObjectifInstaller et configurer l'environnement de developpement complet

Plan de cours detaille

Seq.ThemeDureeType
1.1Introduction au web : historique, architecture client-serveur, cycle requete-reponse HTTP, navigateurs, serveurs1h00Theorie
1.2Presentation des outils : XAMPP, Sublime Text, FileZilla, alternatives (WAMP, MAMP, VS Code)0h30Theorie
1.3Installation de XAMPP : telechargement, installation Windows/macOS, configuration Apache et MySQL, ports1h00Atelier
1.4Atelier : Demarrage d'Apache et MySQL, acces au localhost, htdocs, phpMyAdmin, resolution des conflits de ports1h00Atelier
1.5Installation de Sublime Text : telechargement, installation, packages (Emmet, ColorPicker, SidebarEnhancements)0h30Atelier
1.6Atelier : Configuration de Sublime Text, snippets personnalises, raccourcis clavier, themes, coloration syntaxique1h00Atelier
1.7Installation de FileZilla : telechargement, configuration, gestionnaire de sites, connexion FTP/SFTP0h30Atelier
1.8Atelier : Connexion a un serveur distant avec FileZilla, transfert de fichiers, permissions, gestion des sites1h00Atelier
1.9Organisation du workspace : arborescence de projet, conventions de nommage, gestion des versions avec Git (intro)0h30Theorie + Pratique
1.10Atelier : Creation d'une arborescence de projet standard, premier fichier index.html, test sur localhost1h00Atelier
1.11Diagnostic et depannage : erreurs courantes, logs Apache/MySQL, permissions, pare-feu, antivirus0h30Theorie

Fiche Technique - Installation XAMPP

/* === INSTALLATION XAMPP (Windows) === */ /* 1. Telecharger sur https://www.apachefriends.org */ /* 2. Executer l'installateur en administrateur */ /* 3. Choisir les composants : Apache, MySQL, PHP, phpMyAdmin */ /* 4. Choisir le dossier d'installation (C:\xampp recommande) */ /* 5. Desactiver le pare-feu Windows ou autoriser Apache/MySQL */ /* === DEMARRAGE DES SERVICES === */ /* Via le panneau de controle XAMPP */ /* - Start Apache (port 80) */ /* - Start MySQL (port 3306) */ /* Si port 80 occupe : Config > Apache > httpd.conf */ /* Modifier : Listen 80 -> Listen 8080 */ /* Modifier : ServerName localhost:80 -> localhost:8080 */ /* === VERIFICATION === */ /* Ouvrir le navigateur : http://localhost */ /* ou http://localhost:8080 si port modifie */ /* phpMyAdmin : http://localhost/phpmyadmin */ /* === STRUCTURE DES DOSSIERS XAMPP === */ /* C:\xampp\htdocs\ -> Racine web (vos projets) */ /* C:\xampp\mysql\bin\ -> Binaires MySQL */ /* C:\xampp\php\ -> Binaires PHP */ /* C:\xampp\apache\conf\ -> Configuration Apache */ /* C:\xampp\mysql\data\ -> Bases de donnees */ /* === ACCES AU SHELL MYSQL === */ /* Ouvrir CMD en administrateur */ cd C:\xampp\mysql\bin mysql -u root -p /* Mot de passe par defaut : vide (appuyer sur Entree) */
Tip Web : Toujours installer XAMPP dans un chemin simple sans espaces (C:\xampp). Evitez "C:\Program Files\xampp" qui cause des problemes de permissions. Gardez le panneau XAMPP ouvert pendant toute la formation.
OGI.
Open Group Innovation

Programme Developpement Web

Module 2 - HTML

5. Module 2 : HTML5 - Structure et Semantique

Duree totale16 heures
Format4h theoriques + 12h ateliers
ObjectifCreer des pages web structurees et semantiques avec HTML5

Plan de cours detaille

Seq.ThemeDureeType
2.1Introduction a HTML : historique, versions, standards W3C, structure d'un document HTML, DOCTYPE1h00Theorie
2.2Structure de base : html, head, body, meta, title, charset, viewport, liens CSS/JS1h00Pratique
2.3Atelier : Creation de 5 pages HTML de base avec structure complete et validation W3C1h00Atelier
2.4Balises de texte : titres (h1-h6), paragraphes, listes (ul, ol, dl), emphases, citations, code1h00Pratique
2.5Atelier : Mise en forme d'un article complet avec titres, listes, citations et code source1h00Atelier
2.6Balises semantiques : header, nav, main, article, section, aside, footer, figure, figcaption1h00Theorie + Pratique
2.7Atelier : Reconstruction d'une page avec balises semantiques (blog, portfolio, landing page)1h00Atelier
2.8Liens et navigation : a, href, target, rel, ancres, navigation interne, liens externes0h30Pratique
2.9Atelier : Creation d'un site multi-pages avec menu de navigation complet (5 pages liees)1h00Atelier
2.10Images et medias : img, src, alt, width, height, picture, source, audio, video, iframe1h00Pratique
2.11Atelier : Integration d'images responsives, videos embarquees et cartes interactives1h00Atelier
2.12Tableaux : table, thead, tbody, tr, th, td, colspan, rowspan, caption, accessibilite1h00Pratique
2.13Atelier : Creation de tableaux de donnees complexes (planning, tarifs, comparatifs)1h00Atelier
2.14Formulaires : form, input (text, email, password, number, date, checkbox, radio), textarea, select, button, label, fieldset1h00Theorie + Pratique
2.15Atelier : Creation d'un formulaire d'inscription complet avec validation HTML5 (required, pattern, min, max)1h00Atelier
2.16Attributs globaux et accessibilite : id, class, data-*, title, lang, aria-*, tabindex, accessibilite WCAG0h30Theorie
2.17Atelier : Audit d'accessibilite et correction d'une page existante (contraste, labels, alt)1h00Atelier
2.18Mini-projet HTML : Creation d'un site vitrine complet (5 pages) avec semantique, formulaire, medias2h00Atelier

Fiche Syntaxe - HTML5

<!-- === STRUCTURE DE BASE HTML5 === --> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titre de la page</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- === STRUCTURE SEMANTIQUE === --> <header> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="apropos.html">A propos</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <main> <article> <h1>Titre principal</h1> <p>Paragraphe de contenu avec <strong>importance</strong>.</p> <figure> <img src="image.jpg" alt="Description" width="600"> <figcaption>Legende de l'image</figcaption> </figure> </article> <aside> <h2>Articles connexes</h2> <ul><li><a href="#">Lien 1</a></li></ul> </aside> </main> <footer> <p>© 2026 - Mon Site</p> </footer> <!-- === FORMULAIRE COMPLET === --> <form action="traitement.php" method="POST"> <fieldset> <legend>Informations personnelles</legend> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom" required minlength="2"> <label for="email">Email :</label> <input type="email" id="email" name="email" required placeholder="exemple@email.com"> <label for="sexe">Sexe :</label> <input type="radio" id="masculin" name="sexe" value="M"> <label for="masculin">M</label> <input type="radio" id="feminin" name="sexe" value="F"> <label for="feminin">F</label> <label for="pays">Pays :</label> <select id="pays" name="pays"> <option value="">Choisir...</option> <option value="RDC">Republique Democratique du Congo</option> <option value="FR">France</option> </select> <label for="message">Message :</label> <textarea id="message" name="message" rows="5" required></textarea> <button type="submit">Envoyer</button> </fieldset> </form> </body> </html>
HTML Tip : Utilisez toujours des balises semantiques (header, nav, main, article, footer) plutot que des div generiques. Cela ameliore l'accessibilite, le referencement SEO et la lisibilite du code. N'oubliez jamais l'attribut alt sur les images.
OGI.
Open Group Innovation

Programme Developpement Web

Module 3 - CSS

6. Module 3 : CSS3 - Stylisation et Responsive Design

Duree totale18 heures
Format4h theoriques + 14h ateliers
ObjectifStyliser des pages web avec CSS3 et creer des designs responsives

Plan de cours detaille

Seq.ThemeDureeType
3.1Introduction a CSS : historique, versions, integration (inline, internal, external), cascade, heritage, specificite1h00Theorie
3.2Selecteurs CSS : element, classe, id, attribut, pseudo-classes (:hover, :focus, :nth-child), pseudo-elements (::before, ::after)1h00Pratique
3.3Atelier : Stylisation d'un article avec 10 types de selecteurs differents et pseudo-classes interactives1h00Atelier
3.4Box Model : content, padding, border, margin, box-sizing, width, height, overflow1h00Pratique
3.5Atelier : Reproduction fidele d'une maquette avec Box Model precis et mesures exactes1h00Atelier
3.6Couleurs et typographie : couleurs (hex, rgb, rgba, hsl), polices (Google Fonts, @font-face), tailles, graisses, line-height1h00Pratique
3.7Atelier : Creation d'une charte graphique complete (palette, typographie, espacements)1h00Atelier
3.8Flexbox : container, direction, wrap, justify-content, align-items, align-content, flex-grow, flex-shrink1h00Theorie + Pratique
3.9Atelier : Mise en page d'un header, d'une galerie d'images et d'un footer avec Flexbox1h00Atelier
3.10CSS Grid : grid-template, grid-gap, grid-area, auto-fit, minmax, zones nommees1h00Theorie + Pratique
3.11Atelier : Creation d'une mise en page magazine complexe avec CSS Grid (sidebar, contenu, aside)1h00Atelier
3.12Responsive Design : media queries, breakpoints, mobile-first, viewport, images responsives1h00Theorie + Pratique
3.13Atelier : Adaptation d'un site desktop en version mobile et tablette (3 breakpoints)1h00Atelier
3.14Animations et transitions : transition, transform, @keyframes, animation, hover effects1h00Pratique
3.15Atelier : Creation de 5 animations (bouton, menu, loader, carte, modal) avec transitions fluides1h00Atelier
3.16Variables CSS et organisation : :root, var(), calc(), organisation BEM, architecture CSS0h30Theorie
3.17Atelier : Refactoring d'un CSS en architecture BEM avec variables et organisation modulaire1h00Atelier
3.18Mini-projet CSS : Stylisation complete du site vitrine HTML avec design responsive et animations2h00Atelier

Fiche Syntaxe - CSS3

/* === VARIABLES CSS ET BASE === */ :root { --primary-color: #003B7A; --secondary-color: #F26522; --text-color: #1a1a1a; --bg-light: #f5f5f5; --font-main: 'Segoe UI', Arial, sans-serif; --spacing: 1rem; --radius: 5px; } /* === RESET ET BASE === */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); color: var(--text-color); line-height: 1.6; background: var(--bg-light); } /* === SELECTEURS AVANCES === */ .btn { padding: 10px 20px; border: none; border-radius: var(--radius); cursor: pointer; transition: all 0.3s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn--primary { background: var(--primary-color); color: white; } .btn--secondary { background: var(--secondary-color); color: white; } /* === FLEXBOX === */ .header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing); background: var(--primary-color); color: white; } .nav__list { display: flex; gap: 20px; list-style: none; } /* === CSS GRID === */ .layout { display: grid; grid-template-columns: 250px 1fr 200px; grid-template-areas: "header header header" "sidebar main aside" "footer footer footer"; gap: var(--spacing); min-height: 100vh; } .layout__header { grid-area: header; } .layout__sidebar { grid-area: sidebar; } .layout__main { grid-area: main; } .layout__aside { grid-area: aside; } .layout__footer { grid-area: footer; } /* === RESPONSIVE DESIGN === */ @media (max-width: 768px) { .layout { grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "aside" "footer"; } .nav__list { flex-direction: column; gap: 10px; } .header { flex-direction: column; text-align: center; } } /* === ANIMATIONS === */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeIn 0.5s ease-out; background: white; padding: 20px; border-radius: var(--radius); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card:hover { transform: scale(1.02); box-shadow: 0 8px 16px rgba(0,0,0,0.15); transition: all 0.3s ease; }
CSS Tip : Adoptez l'approche mobile-first : commencez par le CSS mobile de base, puis ajoutez des media queries pour les ecrans plus larges. Utilisez CSS Grid pour les mises en page globales et Flexbox pour les alignements de composants. Les variables CSS facilitent la maintenance et la coherence graphique.
OGI.
Open Group Innovation

Programme Developpement Web

Module 4 - PHP Bases

7. Module 4 : Bases du PHP Natif - Programmation Cote Serveur

Duree totale20 heures
Format5h theoriques + 15h ateliers
ObjectifMaitriser la programmation PHP native sans framework

Plan de cours detaille

Seq.ThemeDureeType
4.1Introduction a PHP : historique, versions, integration avec Apache, balises PHP, commentaires, echo, print1h00Theorie
4.2Variables et types : declaration, typage faible, int, float, string, bool, null, array, conversion1h00Pratique
4.3Atelier : Manipulation de variables, calculs mathematiques, concatenation, interpolation1h00Atelier
4.4Operateurs : arithmetiques, de comparaison, logiques, d'incrementation, ternaire, null coalescing, spaceship1h00Pratique
4.5Atelier : Calculatrice interactive, systeme de notation, validation avec operateurs logiques1h00Atelier
4.6Conditions : if, else, elseif, switch, match (PHP 8), operateurs logiques, conditions imbriquees1h00Theorie + Pratique
4.7Atelier : Systeme de authentification basique, menu dynamique selon role, calculatrice avancee1h00Atelier
4.8Boucles : for, while, do-while, foreach, break, continue, boucles imbriquees1h00Pratique
4.9Atelier : Generation de tableaux de multiplication, liste dynamique, pagination simple1h00Atelier
4.10Tableaux : indexes, associatifs, multidimensionnels, fonctions (count, sort, array_merge, array_filter)1h00Theorie + Pratique
4.11Atelier : Gestion d'un catalogue de produits (tableau multidimensionnel), recherche, filtrage, tri1h00Atelier
4.12Fonctions : declaration, parametres, valeurs par defaut, types de retour, portee des variables, references1h00Pratique
4.13Atelier : Bibliotheque de fonctions utilitaires (validation, formatage, calculs, securite)1h00Atelier
4.14Superglobales : $_GET, $_POST, $_REQUEST, $_SESSION, $_COOKIE, $_SERVER, $_FILES1h00Theorie + Pratique
4.15Atelier : Traitement de formulaires, upload de fichiers, gestion des sessions utilisateur1h00Atelier
4.16Include et require : organisation du code, templates, header/footer communs, autoloading0h30Pratique
4.17Atelier : Refactoring d'un site en templates modulaires avec includes et fonctions reutilisables1h00Atelier
4.18Manipulation de chaines et dates : strlen, substr, strpos, str_replace, explode, implode, date, strtotime0h30Pratique
4.19Atelier : Formatage de dates, validation d'emails, generation de slugs, nettoyage de texte1h00Atelier
4.20Mini-projet PHP : Application de gestion de taches avec sessions, formulaires et fonctions2h00Atelier

Fiche Syntaxe - PHP Natif

<?php // === VARIABLES ET TYPES === $nom = "Jean Dupont"; $age = 25; $prix = 19.99; $estActif = true; $utilisateur = null; // Tableau indexe $fruits = ["pomme", "banane", "orange"]; echo $fruits[0]; // pomme // Tableau associatif $personne = [ "nom" => "Dupont", "prenom" => "Jean", "age" => 25 ]; echo $personne["nom"]; // Dupont // === CONDITIONS === if ($age >= 18) { echo "Majeur"; } elseif ($age >= 13) { echo "Adolescent"; } else { echo "Enfant"; } // Switch switch ($role) { case "admin": echo "Acces total"; break; case "user": echo "Acces limite"; break; default: echo "Acces refuse"; } // Match (PHP 8) $message = match ($role) { "admin" => "Acces total", "user" => "Acces limite", default => "Acces refuse" }; // === BOUCLES === for ($i = 0; $i < 10; $i++) { echo $i; } foreach ($fruits as $fruit) { echo $fruit; } foreach ($personne as $cle => $valeur) { echo "$cle : $valeur"; } // === FONCTIONS === function calculerTTC(float $prixHT, float $tva = 0.20): float { return $prixHT * (1 + $tva); } function validerEmail(string $email): bool { return filter_var($email, FILTER_VALIDATE_EMAIL) !== false; } // === SUPERGLOBALES === // Traitement formulaire POST if ($_SERVER["REQUEST_METHOD"] === "POST") { $nom = htmlspecialchars($_POST["nom"] ?? ""); $email = htmlspecialchars($_POST["email"] ?? ""); } // Sessions session_start(); $_SESSION["utilisateur"] = $nom; $_SESSION["connecte"] = true; // Upload de fichiers if (isset($_FILES["photo"])) { $dossier = "uploads/"; $fichier = $dossier . basename($_FILES["photo"]["name"]); move_uploaded_file($_FILES["photo"]["tmp_name"], $fichier); } // === INCLUDE ET REQUIRE === require_once "config.php"; include "header.php"; // Contenu de la page include "footer.php"; ?>
PHP Tip : Utilisez toujours htmlspecialchars() pour echapper les donnees utilisateur avant affichage. Cela previent les attaques XSS. Preferez require_once pour les fichiers critiques et include pour les optionnels. Adoptez le typage strict (declare(strict_types=1)) pour plus de fiabilite.
OGI.
Open Group Innovation

Programme Developpement Web

Module 5 - MySQL

8. Module 5 : MySQL - Langage SQL en Ligne de Commande

Duree totale16 heures
Format4h theoriques + 12h ateliers
ObjectifManipuler des bases de donnees MySQL via le shell en ligne de commande

Plan de cours detaille

Seq.ThemeDureeType
5.1Introduction aux bases de donnees : SGBD, relationnel vs NoSQL, modele entite-relation, cles primaires/etrangeres1h00Theorie
5.2Connexion au shell MySQL : acces via XAMPP, commandes de base, prompt, aide, historique0h30Pratique
5.3Atelier : Premieres connexions au shell MySQL, exploration des bases systeme, creation d'un utilisateur1h00Atelier
5.4Gestion des bases de donnees : CREATE DATABASE, DROP DATABASE, USE, SHOW DATABASES, SHOW TABLES0h30Pratique
5.5Atelier : Creation de 3 bases de donnees, exploration de la structure, suppression avec verification1h00Atelier
5.6Creation de tables : CREATE TABLE, types de donnees (INT, VARCHAR, TEXT, DATE, DECIMAL, ENUM), contraintes (NOT NULL, UNIQUE, DEFAULT, AUTO_INCREMENT)1h00Theorie + Pratique
5.7Atelier : Creation de 5 tables (utilisateurs, produits, categories, commandes, details) avec contraintes1h00Atelier
5.8Insertion de donnees : INSERT INTO, VALUES, INSERT multiple, DEFAULT VALUES, INSERT SELECT0h30Pratique
5.9Atelier : Insertion de 50 enregistrements repartis sur 5 tables avec donnees coherentes1h00Atelier
5.10Requetes SELECT : SELECT, FROM, WHERE, AND, OR, LIKE, BETWEEN, IN, IS NULL, ORDER BY, LIMIT1h00Pratique
5.11Atelier : 15 requetes de recherche complexe (filtres, tris, pagination, recherche textuelle)1h00Atelier
5.12Fonctions d'agregation : COUNT, SUM, AVG, MIN, MAX, GROUP BY, HAVING1h00Theorie + Pratique
5.13Atelier : Rapports statistiques (ventes par categorie, moyenne des prix, total des commandes)1h00Atelier
5.14Jointures : INNER JOIN, LEFT JOIN, RIGHT JOIN, CROSS JOIN, JOIN multiple, alias de tables1h00Pratique
5.15Atelier : Requetes avec 3-4 jointures (produits + categories + commandes + utilisateurs)1h00Atelier
5.16Modification et suppression : UPDATE, DELETE, TRUNCATE, CASCADE, transactions (BEGIN, COMMIT, ROLLBACK)0h30Pratique
5.17Atelier : Mise a jour de prix, suppression conditionnelle, annulation avec rollback1h00Atelier
5.18Index et optimisation : CREATE INDEX, EXPLAIN, index composites, cles etrangeres, integrite referentielle0h30Theorie
5.19Atelier : Analyse de performance, creation d'index, verification des requetes lentes1h00Atelier
5.20Export et import : mysqldump, SOURCE, LOAD DATA INFILE, backup et restauration0h30Pratique
5.21Atelier : Sauvegarde complete d'une base, restauration, import de donnees CSV1h00Atelier

Fiche Syntaxe - MySQL Shell

-- === CONNEXION AU SHELL MYSQL === -- Depuis le dossier C:\xampp\mysql\bin mysql -u root -p -- Mot de passe par defaut : vide (Entree) -- === GESTION DES BASES === SHOW DATABASES; CREATE DATABASE mon_projet CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE mon_projet; SHOW TABLES; DROP DATABASE IF EXISTS test_db; -- === CREATION DE TABLES === CREATE TABLE utilisateurs ( id INT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(100) NOT NULL, email VARCHAR(255) NOT NULL UNIQUE, mot_de_passe VARCHAR(255) NOT NULL, role ENUM('admin', 'user', 'moderateur') DEFAULT 'user', date_inscription DATETIME DEFAULT CURRENT_TIMESTAMP, actif BOOLEAN DEFAULT 1 ) ENGINE=InnoDB; CREATE TABLE produits ( id INT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(200) NOT NULL, description TEXT, prix DECIMAL(10,2) NOT NULL, stock INT DEFAULT 0, categorie_id INT, FOREIGN KEY (categorie_id) REFERENCES categories(id) ON DELETE SET NULL ON UPDATE CASCADE ) ENGINE=InnoDB; -- === INSERTION === INSERT INTO utilisateurs (nom, email, mot_de_passe, role) VALUES ('Jean Dupont', 'jean@email.com', 'hash123', 'admin'), ('Marie Martin', 'marie@email.com', 'hash456', 'user'); -- === REQUETES SELECT === SELECT * FROM utilisateurs; SELECT nom, email FROM utilisateurs WHERE role = 'admin'; SELECT * FROM produits WHERE prix BETWEEN 10 AND 50; SELECT * FROM produits WHERE nom LIKE '%ordinateur%'; SELECT * FROM utilisateurs ORDER BY date_inscription DESC LIMIT 10; -- === AGREGATION === SELECT COUNT(*) AS total_users FROM utilisateurs; SELECT AVG(prix) AS prix_moyen FROM produits; SELECT categorie_id, COUNT(*) AS nb_produits, AVG(prix) AS prix_moyen FROM produits GROUP BY categorie_id HAVING COUNT(*) > 5; -- === JOINTURES === SELECT p.nom, p.prix, c.nom AS categorie FROM produits p INNER JOIN categories c ON p.categorie_id = c.id; SELECT u.nom, c.date_commande, p.nom AS produit, d.quantite FROM utilisateurs u LEFT JOIN commandes c ON u.id = c.utilisateur_id LEFT JOIN details_commande d ON c.id = d.commande_id LEFT JOIN produits p ON d.produit_id = p.id; -- === MODIFICATION ET SUPPRESSION === UPDATE produits SET prix = prix * 1.1 WHERE categorie_id = 1; DELETE FROM utilisateurs WHERE actif = 0 AND date_inscription < DATE_SUB(NOW(), INTERVAL 1 YEAR); TRUNCATE TABLE logs; -- === TRANSACTIONS === START TRANSACTION; UPDATE produits SET stock = stock - 1 WHERE id = 1; INSERT INTO commandes (utilisateur_id, total) VALUES (1, 29.99); COMMIT; -- ou ROLLBACK si erreur -- === INDEX ET OPTIMISATION === CREATE INDEX idx_email ON utilisateurs(email); CREATE INDEX idx_categorie_prix ON produits(categorie_id, prix); EXPLAIN SELECT * FROM produits WHERE categorie_id = 2; -- === EXPORT ET IMPORT === -- Export (depuis CMD, pas dans le shell MySQL) -- mysqldump -u root -p mon_projet > backup.sql -- Import SOURCE C:\xampp\backup.sql; LOAD DATA INFILE 'C:\xampp\data.csv' INTO TABLE produits FIELDS TERMINATED BY ';' LINES TERMINATED BY '\n' IGNORE 1 LINES;
MySQL Tip : Utilisez toujours ENGINE=InnoDB pour beneficier des transactions, des cles etrangeres et de l'integrite referentielle. Preferez les requetes preparees en PHP pour eviter les injections SQL. Indexez les colonnes frequemment utilisees dans les WHERE et les JOIN.
OGI.
Open Group Innovation

Programme Developpement Web

Module 6 - CRUD

9. Module 6 : CRUD Complet - Application PHP/MySQL Dynamique

Duree totale22 heures
Format5h theoriques + 17h ateliers
ObjectifDevelopper une application web complete avec Create, Read, Update, Delete

Plan de cours detaille

Seq.ThemeDureeType
6.1Architecture MVC simplifiee : separation Model-View-Controller, organisation des fichiers, routing basique1h00Theorie
6.2Connexion PHP-MySQL : PDO vs mysqli, DSN, gestion des erreurs, configuration centralisee1h00Pratique
6.3Atelier : Creation d'une classe de connexion PDO avec singleton, gestion des exceptions, fichier config.php1h00Atelier
6.4CREATE - Insertion : formulaire HTML, validation cote serveur, requetes preparees, messages de confirmation1h00Pratique
6.5Atelier : Creation d'un formulaire d'ajout de produit avec validation complete et insertion securisee1h00Atelier
6.6READ - Lecture : liste paginee, recherche, filtrage, tri, affichage detaille, jointures PHP/MySQL1h00Pratique
6.7Atelier : Liste de produits avec pagination (10 par page), recherche par nom, tri par prix/date1h00Atelier
6.8UPDATE - Modification : formulaire pre-rempli, detection des changements, mise a jour conditionnelle1h00Pratique
6.9Atelier : Edition de produits avec conservation des valeurs, validation, confirmation de modification1h00Atelier
6.10DELETE - Suppression : confirmation, suppression logique vs physique, cascade, messages de feedback1h00Pratique
6.11Atelier : Suppression avec confirmation JavaScript, suppression logique (colonne deleted_at), restauration1h00Atelier
6.12Authentification : inscription, connexion, hashage de mots de passe (password_hash), verification, sessions1h00Theorie + Pratique
6.13Atelier : Systeme complet d'authentification (register, login, logout, profil, mot de passe oublie)1h00Atelier
6.14Autorisation et roles : middleware basique, controle d'acces, pages protegees, redirections1h00Pratique
6.15Atelier : Restriction des pages admin, menu dynamique selon le role, messages d'erreur 4031h00Atelier
6.16Securite : prevention XSS (htmlspecialchars), CSRF (tokens), SQL injection (prepare), upload securise1h00Theorie + Pratique
6.17Atelier : Audit de securite d'une application existante, correction des vulnerabilites identifiees1h00Atelier
6.18Validation avancee : regex, validation email, dates, numeros de telephone, messages d'erreur personnalises0h30Pratique
6.19Atelier : Bibliotheque de validation reutilisable, messages multilingues, affichage des erreurs1h00Atelier
6.20Upload de fichiers : images, documents, validation type/taille, renommage securise, redimensionnement0h30Pratique
6.21Atelier : Gestion d'avatar utilisateur, galerie de produits avec miniatures, suppression de fichiers1h00Atelier
6.22Mini-projet CRUD : Application complete de gestion de stock (produits, categories, utilisateurs, commandes)2h00Atelier

Fiche Syntaxe - CRUD PHP/MySQL

<?php // === CONNEXION PDO === class Database { private static $instance = null; private $pdo; private function __construct() { try { $dsn = "mysql:host=localhost;dbname=mon_projet;charset=utf8mb4"; $this->pdo = new PDO($dsn, "root", ""); $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $this->pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); } catch (PDOException $e) { die("Erreur de connexion : " . $e->getMessage()); } } public static function getInstance() { if (self::$instance === null) { self::$instance = new self(); } return self::$instance->pdo; } } // === CREATE (INSERT) === function ajouterProduit($nom, $description, $prix, $stock, $categorie_id) { $pdo = Database::getInstance(); $sql = "INSERT INTO produits (nom, description, prix, stock, categorie_id) VALUES (:nom, :description, :prix, :stock, :categorie_id)"; $stmt = $pdo->prepare($sql); $stmt->execute([ ':nom' => htmlspecialchars($nom), ':description' => htmlspecialchars($description), ':prix' => $prix, ':stock' => $stock, ':categorie_id' => $categorie_id ]); return $pdo->lastInsertId(); } // === READ (SELECT) === function getProduits($page = 1, $parPage = 10, $recherche = "") { $pdo = Database::getInstance(); $offset = ($page - 1) * $parPage; $sql = "SELECT p.*, c.nom AS categorie FROM produits p LEFT JOIN categories c ON p.categorie_id = c.id WHERE p.nom LIKE :recherche ORDER BY p.id DESC LIMIT :limit OFFSET :offset"; $stmt = $pdo->prepare($sql); $stmt->bindValue(':recherche', '%' . $recherche . '%', PDO::PARAM_STR); $stmt->bindValue(':limit', $parPage, PDO::PARAM_INT); $stmt->bindValue(':offset', $offset, PDO::PARAM_INT); $stmt->execute(); return $stmt->fetchAll(); } function getProduitById($id) { $pdo = Database::getInstance(); $stmt = $pdo->prepare("SELECT * FROM produits WHERE id = :id"); $stmt->execute([':id' => $id]); return $stmt->fetch(); } // === UPDATE === function modifierProduit($id, $nom, $description, $prix, $stock, $categorie_id) { $pdo = Database::getInstance(); $sql = "UPDATE produits SET nom = :nom, description = :description, prix = :prix, stock = :stock, categorie_id = :categorie_id WHERE id = :id"; $stmt = $pdo->prepare($sql); return $stmt->execute([ ':id' => $id, ':nom' => htmlspecialchars($nom), ':description' => htmlspecialchars($description), ':prix' => $prix, ':stock' => $stock, ':categorie_id' => $categorie_id ]); } // === DELETE === function supprimerProduit($id) { $pdo = Database::getInstance(); $stmt = $pdo->prepare("DELETE FROM produits WHERE id = :id"); return $stmt->execute([':id' => $id]); } // === AUTHENTIFICATION === function inscrireUtilisateur($nom, $email, $motDePasse) { $pdo = Database::getInstance(); $hash = password_hash($motDePasse, PASSWORD_BCRYPT); $stmt = $pdo->prepare("INSERT INTO utilisateurs (nom, email, mot_de_passe) VALUES (:nom, :email, :mdp)"); return $stmt->execute([ ':nom' => htmlspecialchars($nom), ':email' => filter_var($email, FILTER_SANITIZE_EMAIL), ':mdp' => $hash ]); } function connecterUtilisateur($email, $motDePasse) { $pdo = Database::getInstance(); $stmt = $pdo->prepare("SELECT * FROM utilisateurs WHERE email = :email AND actif = 1"); $stmt->execute([':email' => $email]); $user = $stmt->fetch(); if ($user && password_verify($motDePasse, $user['mot_de_passe'])) { session_start(); $_SESSION['user_id'] = $user['id']; $_SESSION['user_nom'] = $user['nom']; $_SESSION['user_role'] = $user['role']; return true; } return false; } function estConnecte() { session_start(); return isset($_SESSION['user_id']); } function estAdmin() { session_start(); return ($_SESSION['user_role'] ?? '') === 'admin'; } function deconnecter() { session_start(); session_destroy(); header("Location: login.php"); exit; } ?>
CRUD Tip : Utilisez toujours des requetes preparees avec PDO pour eviter les injections SQL. Ne stockez jamais les mots de passe en clair - utilisez password_hash() et password_verify(). Protegez toutes les pages sensibles avec une verification de session. Implementez des tokens CSRF pour les formulaires sensibles.
OGI.
Open Group Innovation

Programme Developpement Web

Module 7 - Projet & Hebergement

10. Module 7 : Projet Complet et Hebergement Web

Duree totale20 heures
Format2h theoriques + 18h ateliers
ObjectifConcevoir, developper et deployer une application web complete

Plan de cours detaille

100
Seq.ThemeDureeType
7.1Methodologie de projet : analyse des besoins, cahier des charges, wireframes, maquettes, planning1h00Theorie
7.2Atelier : Redaction du cahier des charges d'une application de gestion (users, produits, commandes, dashboard)1h00Atelier
7.3Conception de la base de donnees : MCD, MLD, dictionnaire des donnees, normalisation (1NF, 2NF, 3NF)1h00Pratique
7.4Atelier : Creation du MCD/MLD complet, script SQL de creation, insertion de donnees de test1h00Atelier
7.5Architecture du projet : arborescence, fichiers communs, config, autoloading, helpers, constants0h30Pratique
7.6Atelier : Mise en place de l'architecture de projet, creation des fichiers de base, tests de connexion1h00Atelier
7.7Developpement frontend : integration HTML/CSS, responsive design, formulaires, tableaux, graphiques1h00Pratique
7.8Atelier : Creation des vues (liste, detail, formulaire, dashboard) avec design responsive1h00Atelier
7.9Developpement backend : CRUD complet, authentification, autorisation, validation, securite1h00Pratique
7.10Atelier : Implementation des controllers, models, validation, gestion des erreurs1h00Atelier
7.11Fonctionnalites avancees : recherche, pagination, tri, filtrage, export CSV, statistiques1h00Pratique
7.12Atelier : Ajout de la recherche full-text, pagination dynamique, graphiques de statistiques1h00Atelier
7.13Tests et debogage : tests fonctionnels, gestion des erreurs, logs, validation croisee0h30Pratique
7.14Atelier : Tests complets de l'application, correction des bugs, optimisation des requetes1h00Atelier
7.15Hebergement web : choix de l'hebergeur, criteres (prix, performance, support), types d'hebergement0h30Theorie
7.16Atelier : Comparaison de 5 hebergeurs, choix selon les besoins du projet, creation de compte1h00Atelier
7.17Configuration de l'hebergement : creation de base de donnees, utilisateurs, permissions, PHP0h30Pratique
7.18Atelier : Configuration complete de l'hebergement (base de donnees, utilisateur, version PHP)1h00Atelier
7.19Deploiement avec FileZilla : connexion FTP, transfert de fichiers, structure, permissions, htaccess1h00Pratique
7.20Atelier : Transfert complet du projet, configuration du .htaccess, test du site en ligne1h00Atelier
7.21Migration de la base de donnees : export local, import distant, verification, ajustements0h30Pratique
7.22Atelier : Export de la base locale, import sur l'hebergement, verification des donnees, ajustement des configsAtelier
7.23Maintenance et monitoring : sauvegardes automatisees, mises a jour, securite, performance0h30Theorie
7.24Atelier : Mise en place d'une sauvegarde automatisee, test de restauration, checklist de securite1h00Atelier
7.25Projet final : Livraison complete, documentation, presentation, defense du projet2h00Atelier

Fiche Technique - Deploiement et Hebergement

/* === FICHIER .htaccess (Routage et Securite) === */ # Redirection vers index.php pour le routing RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php?url=$1 [QSA,L] # Protection des fichiers sensibles <FilesMatch "^\."> Order allow,deny Deny from all </FilesMatch> # Desactiver l'affichage des repertoires Options -Indexes # Compression gzip <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/css application/javascript </IfModule> /* === CONFIGURATION DE CONNEXION (config.php) === */ <?php // En local (XAMPP) define('DB_HOST', 'localhost'); define('DB_NAME', 'mon_projet'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_CHARSET', 'utf8mb4'); // En production (hebergement) // define('DB_HOST', 'sql123.hebergeur.com'); // define('DB_NAME', 'hebergeur_nombase'); // define('DB_USER', 'hebergeur_user'); // define('DB_PASS', 'mot_de_passe_securise'); define('BASE_URL', 'http://localhost/mon_projet/'); define('UPLOAD_DIR', 'uploads/'); define('MAX_FILE_SIZE', 2097152); // 2Mo define('SESSION_NAME', 'MonProjetSession'); ?> /* === EXPORT BASE DE DONNEES (mysqldump) === */ # Depuis CMD Windows cd C:\xampp\mysql\bin mysqldump -u root -p mon_projet > C:\backup\mon_projet.sql # Import sur hebergement (via phpMyAdmin ou shell) mysql -u hebergeur_user -p hebergeur_nombase < mon_projet.sql /* === SCRIPT DE SAUVEGARDE AUTOMATISEE (backup.php) === */ <?php require_once 'config.php'; $date = date('Y-m-d_H-i-s'); $fichier = "backup/backup_$date.sql"; $commande = "mysqldump -u " . DB_USER . " -p" . DB_PASS . " " . DB_NAME . " > $fichier"; system($commande); // Suppression des backups de plus de 30 jours $backups = glob("backup/backup_*.sql"); foreach ($backups as $backup) { if (filemtime($backup) < strtotime('-30 days')) { unlink($backup); } } ?>
Deploiement Tip : Toujours separer la configuration locale et production. Utilisez des variables d'environnement ou un fichier config distinct. Ne versionnez jamais les mots de passe. Testez exhaustivement en local avant de deployer. Configurez des sauvegardes automatiques des bases de donnees.
OGI.
Open Group Innovation

Programme Developpement Web

Synthese

11. Synthese du Pipeline de Developpement Web

Pipeline complet : De l'installation des outils au deploiement d'une application web complete en production
EtapeActionOutils / TechnologiesLivrable
1. InstallationInstaller et configurer l'environnementXAMPP, Sublime Text, FileZillaEnvironnement operationnel
2. HTMLCreer la structure des pages webHTML5, balises semantiques, formulairesSite statique structure
3. CSSStyliser et rendre responsiveCSS3, Flexbox, Grid, animations, media queriesDesign professionnel responsive
4. PHPProgrammer la logique serveurPHP natif, variables, boucles, fonctions, sessionsApplication dynamique
5. MySQLGerer les donnees en baseSQL, shell MySQL, PDO, requetes prepareesBase de donnees relationnelle
6. CRUDDevelopper l'application completeArchitecture MVC, authentification, securiteApplication fonctionnelle
7. ProjetConcevoir et developper un projet reelAnalyse, conception, developpement, testsProjet web complet
8. HebergementDeployer en productionHebergeur, FTP, configuration, migrationSite en ligne accessible

Evaluation et Certification

Modalites d'evaluation

  • QCM theorique (15%) : HTML, CSS, PHP, MySQL, architecture web, securite
  • Ateliers pratiques (30%) : Installation, HTML/CSS, PHP, MySQL, CRUD
  • Projet intermediaire (20%) : Application CRUD fonctionnelle avec authentification
  • Projet final (25%) : Application web complete deployee en ligne
  • Presentation orale (10%) : Defense du projet, explication du code, reponses aux questions

Criteres du projet final

  • Architecture de la base de donnees (normalisation, cles etrangeres, index)
  • Qualite du code PHP (structure, fonctions, securite, documentation)
  • Design frontend (HTML semantique, CSS responsive, UX/UI)
  • Fonctionnalites CRUD completes et fonctionnelles
  • Securite (XSS, CSRF, SQL injection, hashage mots de passe)
  • Authentification et autorisation (roles, sessions, protection)
  • Deploiement reussi (hebergement, configuration, tests en ligne)
  • Documentation et presentation du projet

Competences acquises a l'issue de la formation

Installer

Configurer XAMPP, Sublime Text, FileZilla et organiser le workspace

Structurer

Creer des pages HTML5 semantiques avec formulaires et medias

Styliser

Developper des designs CSS3 responsive avec Flexbox et Grid

Programmer

Developper en PHP natif avec variables, boucles, fonctions, sessions

Modeliser

Concevoir et gerer des bases MySQL avec SQL en ligne de commande

Developper

Implementer le CRUD complet avec PDO, validation et securite

Securiser

Prevenir XSS, CSRF, SQL injection et hasher les mots de passe

Authentifier

Implementer inscription, connexion, roles et pages protegees

Deployer

Heberger une application web avec FileZilla et configurer le serveur

OGI.
Open Group Innovation

Programme Developpement Web

Inscriptions

12. Contact et Inscription

Responsable de la Formation

NomSylla Haman Habdoura
FonctionCharge de Formation et Expert Developpement Web
Emailhaman.sylla@opengroupinnovation.tech
Telephone+243 810 015 922
WhatsApp+243 810 015 922
Open Group Innovations (OGI)
Site webhttps://opengroupinnovations.com
AdresseBlvd du 30 juin, Arret Vodacom/BCDC
11 Av. de la presse, Imm. Moanda, Entree A, 3eme Niveau
Derriere Hotel Memling, Kinshasa, RDC

Modalites d'Inscription

  1. Contact initial : Email ou appel au responsable de formation
  2. Entretien de positionnement : Evaluation des prerequis et definition du parcours
  3. Signature du contrat de formation et paiement
  4. Acces aux ressources pedagogiques : supports, jeux de donnees, modeles de code
  5. Debut de la formation : selon calendrier etabli

Tarifs et Formules

FormuleDureeTarifAvantages
Intensif4 semaines (full-time)Sur devisImmersion complete, projet final inclus, suivi personnalise
Standard8 semaines (part-time)Sur devisCompatible avec une activite professionnelle, temps d'assimilation
EntrepriseSur mesureSur devisContenu adapte aux besoins metier, analyse de projets internes
IndividuelSur mesureSur devisAccompagnement 100% personnalise, rythme adapte
Equipement fourni en formation : Ordinateurs equipes de XAMPP, Sublime Text, FileZilla, jeux de donnees de test, modeles de code PHP/MySQL, supports pedagogiques imprimes, certificat de formation OGI. Les participants repartent avec leur projet web complet heberge en ligne et leur portfolio de code.
Open Group Innovations (OGI) - Juin 2026 - Tous droits reserves
Reproduction interdite sans autorisation