DevLog

Explique comme si t'avais 5 ans

Ce guide explique tout ce qu'on a construit dans DevLog — sans jargon, sans blabla. Chaque concept est
explique avec une analogie du quotidien avant d'entrer dans le code.

Chapitres :

• 1 — C'est quoi une application web ?

• 2 — L'environnement de travail
• 3 — Flask : comment ca marche ?
• 4 — La base de donnees
• 5 — L'authentification
• 6 — Le CRUD
• 7 — Les templates HTML
• 8 — Git et GitHub
• 9 — Questions d'entretien + reponses
Chapitre 1 — C'est quoi une application web
?
■ Analogie : Imagine un restaurant. Le client (ton navigateur) commande un plat (une page). Le
serveur (Flask) prend la commande, va chercher les ingredients (la base de donnees), prepare le plat
(le HTML), et l'apporte au client. Ca se passe en quelques millisecondes a chaque fois que tu visites
une page.

Le navigateur et le serveur
Quand tu tapes [Link] dans ton navigateur, voici ce qui se passe :

• 1. Ton navigateur envoie une requete HTTP — il demande la page.

• 2. Flask recoit la demande, trouve quelle fonction executer.
• 3. Flask prepare la reponse (le HTML).
• 4. Ton navigateur recoit le HTML et l'affiche.

GET et POST — les deux facon de parler au serveur

■ Analogie : GET = tu regardes le menu sans rien commander. POST = tu passes commande.

• GET — tu veux juste voir une page. Ex : visiter /login

• POST — tu envoies des donnees au serveur. Ex : soumettre le formulaire de connexion

Les codes HTTP

Dans le terminal, tu vois des numeros apres chaque requete. Ils ont une signification :

• 200 — Tout va bien, page chargee.

• 302 — Redirection. Ex : apres le login, Flask t'envoie vers l'accueil.
• 304 — Le fichier n'a pas change, le navigateur utilise sa copie en cache.
• 404 — Page introuvable.
• 500 — Bug dans le code Python.
Chapitre 2 — L'environnement de travail
Le venv — environnement virtuel
■ Analogie : Imagine que tu cuisines deux plats differents. L'un a besoin de sel, l'autre pas. Si tu mets
tout dans la meme cuisine, tu fais des erreurs. Le venv c'est une cuisine separee pour chaque projet
— ce que tu installes dedans n'affecte pas tes autres projets.

Commandes utilisees :

python -m venv venv # Cree la cuisine isolee

venv\Scripts\activate # Entre dans la cuisine (Windows)
pip install flask ... # Installe les outils dans cette cuisine

Une fois active, tu vois (venv) au debut de chaque ligne du terminal. Ca veut dire que tu travailles dans le
bon environnement.

[Link]
■ Analogie : C'est la liste de courses. Si un ami veut recreer ta cuisine exactement, il prend ta liste et
achete les memes choses — meme marques, memes quantites.

pip freeze > [Link] # Genere la liste

pip install -r [Link] # Recrée l'environnement depuis la liste

Le .gitignore
On dit a Git d'ignorer certains fichiers. Le dossier venv/ fait des centaines de Mo et n'a pas besoin d'etre
sur GitHub — [Link] suffit pour le recreer.

venv/
instance/
__pycache__/
*.pyc
Chapitre 3 — Flask, comment ca marche ?
C'est quoi Flask ?
■ Analogie : Flask c'est le serveur du restaurant. Il recoit les commandes (les URLs), sait quoi faire
avec chacune, et renvoie la bonne reponse. Sans Flask, ton Python ne saurait pas quoi faire quand
quelqu'un visite ton site.

Flask est un framework web Python — une boite a outils qui gere tout ce qui concerne les requetes
HTTP pour que toi tu te concentres sur la logique de ton app.

Creer l'app Flask

from flask import Flask

app = Flask(__name__)

• Flask(__name__) — cree l'application. __name__ dit a Flask ou se trouve le fichier principal.

Les routes — le coeur de Flask

■ Analogie : Une route c'est comme une porte dans un immeuble. Chaque porte (URL) mene a une
piece differente (une fonction).

@[Link]('/') # Quand quelqu'un visite /

def index(): # Execute cette fonction
return 'Bonjour !' # Et renvoie ca

@[Link]('/login') # Quand quelqu'un visite /login

def login(): # Execute cette fonction
return 'Page de login'

Le @[Link]() est un decorateur — il lie une URL a une fonction Python.

Routes avec parametres

On peut mettre une variable dans l'URL :

@[Link]('/post/<int:post_id>')
def post_detail(post_id):
# Si l'URL est /post/3, alors post_id = 3
return f'Tu veux voir le post numero {post_id}'

render_template — afficher du vrai HTML

■ Analogie : Plutot que de cuisiner dans la rue, tu as une vraie cuisine (le dossier templates/).
render_template va chercher le bon fichier HTML et l'envoie au navigateur.

return render_template('[Link]', posts=posts)

Le deuxieme argument posts=posts envoie des donnees Python au fichier HTML. Dans le HTML, tu peux
alors utiliser {{ posts }} pour les afficher.
redirect, url_for et flash
return redirect(url_for('login')) # Redirige vers la page login
flash('Compte cree !') # Affiche un message temporaire

• redirect() — envoie le navigateur vers une autre page.

• url_for('login') — genere l'URL de la fonction login(). Plus safe qu'ecrire '/login' en dur.
• flash() — message qui s'affiche une seule fois sur la page suivante.
Chapitre 4 — La base de donnees
C'est quoi une base de donnees ?
■ Analogie : C'est un classeur Excel geant mais beaucoup plus puissant. Chaque feuille = une table
(ex: Users, Posts). Chaque ligne = un enregistrement (ex: un utilisateur). Chaque colonne = une
information (ex: username, password).

SQLite — la base de donnees dans un fichier

SQLite stocke toute la base de donnees dans un simple fichier .db. Pas besoin d'installer un serveur
separement. Dans DevLog, c'est le fichier instance/[Link].

SQLAlchemy — parler a la base en Python

■ Analogie : Sans SQLAlchemy, tu devrais ecrire du SQL brut (un autre langage). Avec SQLAlchemy,
tu ecris du Python normal et il traduit tout en SQL tout seul. C'est comme avoir un traducteur
automatique.

• Sans ORM : SELECT * FROM user WHERE username = 'rafik'

• Avec ORM : [Link].filter_by(username='rafik').first()

Les deux font exactement la meme chose — mais avec l'ORM c'est plus lisible et plus sur.

Les modeles — creer les tables

Un modele = une classe Python = une table dans la base. Chaque attribut = une colonne.

class User([Link], UserMixin):

id = [Link]([Link], primary_key=True) # ID unique auto
username = [Link]([Link](80), unique=True, nullable=False) # Texte court, unique, obli
password = [Link]([Link](200), nullable=False) # Texte court, obligatoire
posts = [Link]('Post', backref='author', lazy=True) # Lien avec la table Post

class Post([Link]):
id = [Link]([Link], primary_key=True)
title = [Link]([Link](100), nullable=False)
content = [Link]([Link], nullable=False) # Texte long
date = [Link]([Link], default=[Link]) # Date auto
user_id = [Link]([Link], [Link]('[Link]'), nullable=False) # Lien vers User

La ForeignKey — lier deux tables

■ Analogie : C'est comme mettre le numero de client sur chaque commande de restaurant. Chaque
post a un user_id qui dit 'ce post appartient a cet utilisateur'.

user_id = [Link]([Link], [Link]('[Link]'), nullable=False)

Les 4 operations CRUD

CRUD = Create, Read, Update, Delete. Ce sont les 4 seules choses qu'on fait avec une base de donnees.

# CREATE — ajouter
post = Post(title='Mon titre', content='Contenu', user_id=1)
[Link](post)
[Link]() # OBLIGATOIRE pour sauvegarder

# READ — lire
posts = [Link]() # Tous les posts
post = [Link](Post, 1) # Post avec id=1
user = [Link].filter_by(username='rafik').first()

# UPDATE — modifier
[Link] = 'Nouveau titre'
[Link]()

# DELETE — supprimer
[Link](post)
[Link]()

[Link]() c'est comme appuyer sur Sauvegarder. Sans ca, les changements sont perdus.
Chapitre 5 — L'authentification
Le hashage de mot de passe
■ Analogie : Imagine que tu transformes ton mot de passe en une suite de chiffres aleatoires.
Impossible de retrouver le mot de passe original depuis ces chiffres. Meme si quelqu'un vole ta base
de donnees, il ne peut pas lire les mots de passe.

from [Link] import generate_password_hash, check_password_hash

# A l'inscription
hashed = generate_password_hash('monmotdepasse')
# hashed = 'pbkdf2:sha256:260000$...' (illisible)

# A la connexion
check_password_hash(hashed, 'monmotdepasse') # True (correct)
check_password_hash(hashed, 'mauvais') # False (incorrect)

On ne stocke jamais un mot de passe en clair. Toujours le hash.

Flask-Login — se souvenir qui est connecte

■ Analogie : HTTP est sans memoire — chaque page visitee, le serveur oublie qui tu es. Flask-Login
resout ce probleme en stockant l'identite de l'utilisateur dans un cookie. C'est comme un bracelet
d'entree dans un parc : tu le montres a chaque porte.

login_manager = LoginManager(app)
login_manager.login_view = 'login' # Si non connecte, va sur /login

@login_manager.user_loader
def load_user(user_id): # Comment retrouver un user depuis son id
return [Link](User, int(user_id))

Proteger les routes

Certaines pages ne doivent etre accessibles qu'aux utilisateurs connectes. On ajoute @login_required
au-dessus de la route.

@[Link]('/post/new')
@login_required # Si pas connecte, redirige vers /login automatiquement
def new_post():
...

current_user
Flask-Login expose current_user partout dans l'app. C'est l'utilisateur actuellement connecte. Disponible
aussi dans les templates HTML.

# Dans [Link]
post = Post(title=..., user_id=current_user.id)

# Dans le HTML (Jinja2)

{% if current_user.is_authenticated %}
 Bonjour {{ current_user.username }} !
{% endif %}

Verification d'appartenance
Meme si un utilisateur est connecte, il ne doit pas pouvoir modifier les posts des autres. On verifie que le
post appartient bien a l'utilisateur connecte :

post = [Link](Post, post_id)

if post.user_id != current_user.id:
return redirect(url_for('index')) # Interdit, on renvoie a l'accueil
Chapitre 6 — Le CRUD des posts
CREATE — creer un post
@[Link]('/post/new', methods=['GET', 'POST'])
@login_required
def new_post():
if [Link] == 'POST': # Si le formulaire est soumis
post = Post(
title=[Link]['title'], # Recupere le champ 'title' du formulaire
content=[Link]['content'],
user_id=current_user.id # L'auteur c'est l'utilisateur connecte
)
[Link](post) # Ajoute a la base
[Link]() # Sauvegarde
return redirect(url_for('index')) # Retour a l'accueil
return render_template('post_form.html', title='Nouvelle entree', post=None)

READ — lire les posts

@[Link]('/')
def index():
posts = [Link].order_by([Link]()).all() # Du plus recent au plus vieux
return render_template('[Link]', posts=posts)

@[Link]('/post/<int:post_id>')
def post_detail(post_id):
post = [Link](Post, post_id) # Trouve le post par son id
return render_template('post_detail.html', post=post)

UPDATE — modifier un post

@[Link]('/post/<int:post_id>/edit', methods=['GET', 'POST'])
@login_required
def edit_post(post_id):
post = [Link](Post, post_id)
if post.user_id != current_user.id: # Securite : verifie l'appartenance
return redirect(url_for('index'))
if [Link] == 'POST':
[Link] = [Link]['title'] # Modifie les valeurs
[Link] = [Link]['content']
[Link]() # Sauvegarde
return redirect(url_for('post_detail', post_id=[Link]))
return render_template('post_form.html', title='Modifier', post=post)

DELETE — supprimer un post

@[Link]('/post/<int:post_id>/delete', methods=['POST'])
@login_required
def delete_post(post_id):
post = [Link](Post, post_id)
if post.user_id == current_user.id: # Securite : seulement si c'est ton post
[Link](post)
 [Link]()
return redirect(url_for('index'))
Chapitre 7 — Les templates HTML (Jinja2)
C'est quoi Jinja2 ?
■ Analogie : Jinja2 c'est du HTML avec des trous. Tu definis des trous dans le HTML, et Flask les
remplit avec des vraies donnees Python avant d'envoyer la page au navigateur.

<!-- Sans Jinja2 : statique, toujours pareil -->

<h1>Bonjour Inconnu</h1>

<!-- Avec Jinja2 : dynamique, change selon l'utilisateur -->

<h1>Bonjour {{ current_user.username }}</h1>

La syntaxe Jinja2
• {{ variable }} — affiche une valeur Python
• {% if condition %} ... {% endif %} — condition
• {% for item in liste %} ... {% endfor %} — boucle
• {% extends '[Link]' %} — herite d'un template parent
• {% block content %} ... {% endblock %} — zone remplacable

L'heritage de templates
■ Analogie : [Link] c'est le cadre d'un tableau. Chaque page (register, login, index...) est le dessin
qui remplit ce cadre. La navbar et le CSS sont dans le cadre — une seule fois — et toutes les pages
en profitent automatiquement.

<!-- [Link] : le cadre -->

<html>
<head>
<link rel='stylesheet' href="{{ url_for('static', filename='[Link]') }}">
</head>
<body>
<nav>DevLog | <a href='/login'>Login</a></nav>
{% block content %}{% endblock %} <!-- Trou a remplir -->
</body>
</html>

<!-- [Link] : remplit le trou -->

{% extends '[Link]' %}
{% block content %}
<h2>Creer un compte</h2>
<form method='POST'>...</form>
{% endblock %}

La navbar dynamique
On affiche Login/Register si pas connecte, et le username/Logout si connecte :

{% if current_user.is_authenticated %}
<span>{{ current_user.username }}</span>
 <a href='/logout'>Logout</a>
{% else %}
<a href='/register'>Register</a>
<a href='/login'>Login</a>
{% endif %}
Chapitre 8 — Git et GitHub
C'est quoi Git ?
■ Analogie : Git c'est une machine a remonter le temps pour ton code. Chaque commit c'est une
photo de ton projet a un moment precis. Si tu casses tout, tu reviens a la derniere photo.

Les commits de DevLog dans l'ordre

Commit Ce qu'on a fait

init: project setup venv, Flask installe, [Link] de base, [Link]

feat: database models Classes User et Post creees avec SQLAlchemy

feat: auth system Register, login, logout fonctionnels avec hashage

feat: templates and static CSS Tous les fichiers HTML + [Link] separe

feat: CRUD posts Creer, voir, modifier, supprimer les posts

feat: dynamic navbar and 404 Navbar selon connexion, page erreur custom

docs: complete README README complet sur GitHub avec badges

Convention de commits
• feat: nouvelle fonctionnalite
• fix: correction de bug
• docs: documentation
• init: premier commit
Chapitre 9 — Questions d'entretien
Voici les vraies questions que Monsieur HAZARD peut te poser, avec les reponses a donner — simples et
directes.

« Presentez-moi DevLog en 2 minutes. »

DevLog c'est une application web que j'ai construite en Python avec Flask. C'est un journal de bord pour
developpeurs — tu crees un compte, tu te connectes, et tu peux ecrire, modifier et supprimer des entrees.
J'ai tout construit from scratch : la base de donnees SQLite, l'authentification avec hashage de mot de
passe, et l'interface en HTML/CSS pur. C'est disponible sur mon GitHub avec un README complet.

« Pourquoi Flask ? »
J'ai choisi Flask parce qu'il est minimaliste — ca m'a force a comprendre chaque brique separement. Avec
Django tout est configure automatiquement, tu ne comprends pas forcement ce qui se passe. Flask m'a
oblige a apprendre vraiment comment ca fonctionne.

« C'est quoi un ORM ? »

Un ORM c'est un outil qui me permet de parler a la base de donnees en Python sans ecrire de SQL. Avec
SQLAlchemy, je cree des classes Python qui representent mes tables, et il traduit mes instructions en
requetes SQL automatiquement.

« Comment tu geres la securite des mots de passe ? »

Je n'ai jamais stocke un mot de passe en clair. A l'inscription, le mot de passe est hache avec Werkzeug
avant d'etre mis en base. A la connexion, je compare le hash — impossible de retrouver le mot de passe
original.

« Comment tu empeches un utilisateur de modifier le post d'un autre ? »

Chaque post a un champ user_id qui reference l'auteur. Avant de permettre la modification, je verifie que
post.user_id == current_user.id. Si ce n'est pas le cas, je redirige vers l'accueil.

« Qu'est-ce que tu ferais pour ameliorer ce projet ? »

Plusieurs choses : d'abord le deployer sur un vrai serveur pour qu'il soit accessible en ligne. Ensuite
passer de SQLite a PostgreSQL pour la production. J'aimerais aussi ajouter une API REST pour exposer
les posts en JSON, et des tests unitaires avec pytest.

« C'est quoi la difference entre GET et POST ? »

GET sert a recuperer une page — comme quand tu visites une URL. POST sert a envoyer des donnees
au serveur — comme quand tu soumets un formulaire. Dans DevLog, /login en GET affiche le formulaire,
et /login en POST traite les identifiants.
 Tu as construit un vrai projet backend from scratch.
C'est plus que la plupart des candidats en alternance. Bonne chance le 8 juillet.