Skip to content

GitLab

Commit d8df3ef5 authored by Bonnegent Sebastien's avatar Bonnegent Sebastien
Browse files

cours 2 presque ok

parent 3ad5a327
Hide whitespace changes
Inline Side-by-side
cours_02.md
View file @ d8df3ef5
......@@ -92,6 +92,20 @@ admin.site.register(Entretien, EntretienAdmin)
https://fr.wikipedia.org/wiki/Modèle-vue-contrôleur
~~~
# Contrôle
## Contrôle
### garage/views.py
~~~python
from django.http import HttpResponse
def home(request):
"""Page d'accueil"""
return HttpResponse('ça marche !')
~~~
# Vue
## Routage d'URLs
### conf/urls.py
~~~python
......@@ -120,31 +134,108 @@ urlpatterns = [
]
~~~
## Contrôle
### garage/views.py
~~~python
from django.http import HttpResponse
## Frontend (JS mais pas trop)
### Bootstrap
- https://pypi.org/project/django-bootstrap-static/
- https://getbootstrap.com/
def home(request):
"""Page d'accueil"""
return HttpResponse('ça marche !')
### Installation
~~~
$ pipenv install django-bootstrap-static
$ mkdir -p garage/templates/garage
~~~
## Vue
### conf/settings.py
~~~python
INSTALLED_APPS = [
# ...
'bootstrap',
'fontawesome',
]
~~~
## garage/templates/garage/home.html
### head (v1)
~~~html
{% load static %}
<!doctype html>
<html lang="fr"><head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>Garage</title>
<link rel="stylesheet"
href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script defer
src="{% static 'fontawesome/js/fontawesome-all.min.js' %}">
</script></head>
~~~
### TODO
- bootstrap
- template par défaut
## garage/templates/garage/home.html
### head (v1)
~~~html
<body>
{% block content %}<p>Bienvenue !</p>{% endblock %}
<script src="{% static 'bootstrap/js/jquery.min.js' %}">
</script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}">
</script>
</body>
</html>
~~~
## Modifier la vue
### garage/views.py
~~~python
from django.shortcuts import render
from .models import Question
def home(request):
return render(request, 'garage/home.html', {})
~~~
## garage/templates/garage/home.html
### avec navbar (v2), responsive design ?
~~~html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Garage</a>
<button class="navbar-toggler" type="button" ...
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" ...
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">Accueil</a>
<a class="nav-item nav-link" href="#">Véhicules</a>
</div>
</div>
</nav>
~~~
## garage/templates/garage/home.html
### avec navbar (v3)
~~~
{% if user.is_authenticated %}
...
{% if user.is_staff %}
...
{% endif %}
{% endif %}
~~~
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
context = {'latest_question_list': latest_question_list}
return render(request, 'polls/index.html', context)
## Connexion
### conf/urls.py
~~~python
# ...
path('accounts/', include('django.contrib.auth.urls')),
# ...
~~~
## Bonnes pratiques
- Pensez à utiliser le mode développeur (F12) !
- CDN, attention aux dépendances
pdf/02.pdf
View file @ d8df3ef5
No preview for this file type
plan.md
View file @ d8df3ef5
......@@ -15,8 +15,6 @@
* outils et frontend
- administration, runserver, urls, logs et messages / templates ?
> urls comment est fait la résolution ?
## En attente
* premières vues
......@@ -29,7 +27,7 @@
les fonctions dans les modèles
- views (classe générique) / template
- hijack + restriction d'accès / login_required
> user / perms dans templates
> user / perms dans templates / PERMISSION
- script dans management
- tests (pytest / export / import)
>> black dans les tests
......
supports_cours_02/home_v1.html 0 → 100644
View file @ d8df3ef5
{% load static %}
<!doctype html><html lang="fr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Garage</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script defer src="{% static 'fontawesome/js/fontawesome-all.min.js' %}"></script>
</head><body>
<div class="container-fluid">
{% block content %}
<p>Bienvenue !</p>
{% endblock %}
</div>
<script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body></html>
supports_cours_02/home_v2.html 0 → 100644
View file @ d8df3ef5
{% load static %}
<!doctype html><html lang="fr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Garage</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script defer src="{% static 'fontawesome/js/fontawesome-all.min.js' %}"></script>
</head><body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Garage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">Accueil</a>
<a class="nav-item nav-link" href="#">Véhicules</a>
</div>
</div>
</nav>
<div class="container-fluid">
{% block content %}
<p>Bienvenue !</p>
{% endblock %}
</div>
<script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body></html>
supports_cours_02/home_v3.html 0 → 100644
View file @ d8df3ef5
{% load static %}
<!doctype html><html lang="fr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Garage</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script defer src="{% static 'fontawesome/js/fontawesome-all.min.js' %}"></script>
</head><body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Garage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="/">Accueil</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Véhicules</a></li>
</ul>
<ul class="navbar-nav navbar-right">
{% if user.is_authenticated %}
{% if user.is_staff %}
<li class="nav-item"><a class="nav-link" href="/admin">Admin</a></li>
{% endif %}
<li class="nav-item"><a class="nav-link" href="{% url 'logout' %}">Déconnexion</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'login' %}">Connexion</a></li>
{% endif %}
</ul>
</div>
</nav>
<div class="container-fluid">
{% block content %}
<p>Bienvenue !</p>
{% endblock %}
</div>
<script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body></html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment