Cours RechercherCtrl K

Fiches de révision

Fiches Mini-projets

4 fiches, une par leçon, dans l'ordre du cours. Retour au cours Mini-projets

Mini-projets · Projet 1

Ma page de présentation

À retenir

  • Une page = trois fichiers : index.html (contenu), style.css (apparence), script.js (interactivité).
  • Structure sémantique : header, nav, main, section, article, footer.
  • Un lien href="#id" fait défiler jusqu'à l'élément qui a cet id.
  • Flexbox (display: flex + gap) aligne un menu ou des cartes.
  • JavaScript : querySelector, addEventListener, classList.toggle, textContent.

Mémo

<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

nav { display: flex; gap: 16px; }
main { max-width: 800px; margin: 0 auto; }

document.querySelector("#theme")
  .addEventListener("click", () => document.body.classList.toggle("sombre"));

Pièges à éviter

  • Un id doit être unique dans la page.
  • Oublier <link rel="stylesheet"> : le CSS ne s'applique pas.

Revoir la leçon et ses exercices

Mini-projets · Projet 2

Un livre d'or

À retenir

  • Une application web = une base de données + des formulaires + des pages qui lisent et affichent.
  • CREATE TABLE avec NOT NULL pour les champs obligatoires ; INSERT INTO … VALUES pour ajouter.
  • ORDER BY id DESC : du plus récent au plus ancien.
  • En PHP : trim($_POST["x"] ?? ""), vérifier que ce n'est pas vide, puis enregistrer.
  • Toujours htmlspecialchars() à l'affichage : contre la faille XSS.

Mémo

CREATE TABLE messages (
  id INTEGER PRIMARY KEY,
  auteur TEXT NOT NULL,
  contenu TEXT NOT NULL
);
SELECT auteur, contenu FROM messages ORDER BY id DESC;

$auteur = trim($_POST["auteur"] ?? "");
if ($auteur !== "") { … }
echo htmlspecialchars($auteur);

Pièges à éviter

  • Afficher un message sans htmlspecialchars().
  • Ne vérifier les champs qu'en HTML (required) : ça se contourne.

Revoir la leçon et ses exercices

Mini-projets · Projet 3

Mettre son site en ligne

À retenir

  • Ordinateur → GitHub : git init, git add ., git commit, git remote add origin …, git push -u origin main.
  • Serveur : apt update puis apt install nginx, un dossier dans /var/www, propriétaire utilisateur:www-data, droits 750.
  • systemctl start lance un service, systemctl enable le relance à chaque démarrage.
  • Vérifier : nslookup (DNS), curl -I (code HTTP), ss -tln (ports).

Mémo

# ordinateur
git init && git add . && git commit -m "v1"
git remote add origin https://github.com/lea/portfolio.git
git push -u origin main

# serveur
sudo apt update && sudo apt install nginx
sudo mkdir -p /var/www/portfolio
sudo chown lea:www-data /var/www/portfolio
sudo chmod 750 /var/www/portfolio
sudo systemctl enable --now nginx

# vérifications
nslookup monsite.fr
curl -I https://monsite.fr
ss -tln

Pièges à éviter

  • Envoyer un fichier .env sur GitHub : ajoute-le au .gitignore.
  • Mettre chmod 777 « pour que ça marche ».

Revoir la leçon et ses exercices

Mini-projets · Projet 4

Un quiz en console

À retenir

  • Séparer les données (questions.py), les outils (outils.py) et le programme (main.py).
  • Une liste de dictionnaires décrit des éléments qui ont tous les mêmes champs.
  • Une boucle de jeu : poser, comparer, compter, puis afficher le score.
  • .strip().lower() rend une comparaison tolérante aux espaces et aux majuscules.

Mémo

# questions.py
QUESTIONS = [{"question": "…", "reponse": "…"}]

# main.py
import questions
score = 0
for q in questions.QUESTIONS:
    if input(q["question"]).strip().lower() == q["reponse"].lower():
        score += 1
print(f"Score : {score}/{len(questions.QUESTIONS)}")

Pièges à éviter

  • Comparer input() à un nombre : "4" == 4 est faux.
  • Dans une f-string entre "…", utiliser '…' pour les clés.

Revoir la leçon et ses exercices