-
Notifications
You must be signed in to change notification settings - Fork 1
/
django.multilang.html
4068 lines (3161 loc) · 223 KB
/
django.multilang.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="{{fr|en}}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="django-with-bird.png" rel="icon" type="image/png" />
<title>Apprenez à programmer un site web avec Django !</title>
<meta property="og:image" content="https://robertvandeneynde.be/parascolaire/django-with-bird.png" />
<meta property="og:description" content="Apprenez à programmer un site web avec Django" />
<!-- <meta property="og:url" content="" /> -->
<meta property="og:title" content="Apprenez à programmer un site web avec Django" />
<meta property="og:type" content="article" />
<link rel="stylesheet" type="text/css" href="base.css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="animations.js"></script>
<script src="utils.js"></script>
<script src="slides.js"></script>
<style>
mark {
background: #ffc;
}
body {
background: url('diamond.jpg');
background-size: 400px;
}
img:not(.free), pre {
max-width: 100%;
}
pre {
overflow-x: auto;
border: 1px solid #ccc;
}
figcaption:not(.mandatory) {
display: none;
}
p code.hljs {
display: inline !important;
}
:not(pre) > code {
border: 1px solid #ccc;
display: inline-block;
padding: 2px !important;
}
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 5px;
}
kbd {
border: 1px solid #ccc;
display: inline-block;
padding: 2px;
font-family: serif;
border-radius: 5px;
background: white;
}
table.shortcuts > tbody > tr > td:first-child {
text-align: center;
min-width: 160px;
}
table.shortcuts em {
font-style: normal;
}
tr {
background-color: rgb(252, 252, 255);
}
tr.interesting-row {
background: rgb(255, 251, 221); /* rgb(255, 250, 240); */
}
.slide.next {
cursor: pointer;
}
code.url {
color: #001eff !important;
}
figcaption.mandatory {
font-style: italic;
padding-left: 20px;
}
.little-box {
border: 1px solid black;
border-left: 0;
border-right: 0;
padding: 5px 0;
}
.closable:not(.little-box) {
padding-top: 20px;
}
button {
cursor: pointer;
}
</style>
<link id="stylesheet" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>
$(function(){
$('figure.half-size img').each(function(){
var self = this;
function applyWidth() {
// console.log('applyWidth', self.id, self.src, self.width, $(self).width())
if(self.width) { // attention, self.width != $(self).width()
$(self).css('max-width', self.width / 2)
} else {
setTimeout(applyWidth, 1000);
}
}
applyWidth();
$(this).wrap( $('<a>').attr('href', $(this).attr('src') ) )
$(this).parent().append(
$("<figcaption class='mandatory'>Cliquez pour agrandir</figcaption>"))
})
$('pre.developpement').addClass('closable') // must be before next block
var DEFAULT_SYMBOL = '{{Solution|Solution}}';
$('.developpement').each(function(){
var self = $(this)
var substitute = $('<button>').text(
(self.attr('symbol') == 'iff' ? '⇔' : self.attr('symbol') != null ? self.attr('symbol') : DEFAULT_SYMBOL)
+ ' ... '
+ (self.attr('symbolpost') == 'iff' ? '⇔' : self.attr('symbolpost') != null ? self.attr('symbolpost') : '')
);
this.substitute = substitute;
self.hide().before(substitute)
substitute.click(function(){
substitute.hide()
self.fadeIn(800)
})
if(self.hasClass('closable')) {
self.css('position', 'relative')
self.append($('<button>❌</button>').css({ // ✕ × https://stackoverflow.com/questions/7493954/what-is-the-unicode-character-for-the-close-symbol-used-by-twitter-bootstrap#17622391
position: 'absolute',
top: '0px',
right: '0px',
transform: self.is('pre') ? '' : 'translate(0, -50%)',
cursor: 'pointer',
}).click(function(){
// self.fadeOut(300, function(){ substitute.show() })
self.hide()
substitute.show()
}))
}
})
$(".open-all-developpement").click(function(){
var p = $(this).parent()
if(p.prop('tagName').toLowerCase() != 'section')
p = $(document.body)
p.find('.developpement').each(function(){
if(! this.substitute)
return console.log('error, .developpement has no substitute')
if($(this.substitute).is(':visible')) {
$(this.substitute).click()
}
})
if(p.attr('name'))
location.hash = '#' + p.attr('name')
$(this).hide()
})
});
</script>
<script>
$(function(){
utils.dedentPreCode()
var COMMENT_ELEM = [
['py', ['# ', '']],
['html', ['<!-- ', ' -->']],
]
function forEachComment(callback) {
for(var i = 0; i < COMMENT_ELEM.length; i++)
callback(COMMENT_ELEM[i][0], COMMENT_ELEM[i][1])
}
$('pre.developpement').each(function(){
var pre = $(this)
var code = pre.find('code')
if(! code.attr('class')) {
forEachComment(function(k, l) {
if(pre.attr('symbol').indexOf('.' + k) != -1)
code.addClass(k)
})
}
forEachComment(function(k, l) {
if(code.hasClass(k))
code.html(l[0] + pre.attr('symbol') + l[1] + '\n\n' + $(code).html())
})
})
$('[contains-code]').each(function(){
var cls = $(this).attr('contains-code')
$(this).find('code:not([class])').addClass(cls)
})
hljs.initHighlightingOnLoad()
$('p > code[class]').each(function(i, block) {
hljs.highlightBlock(block);
// console.log($(block).text())
});
utils.sectionNameAfterH2Id();
utils.makeTitleLinks()
utils.smoothLinks()
function replaceUrls(hostname) {
$('code.url, .contains-group').each(function(){
var is_group = $(this).is('.contains-group')
var is_code_url = $(this).is('code.url')
if(! $(this).data('base-url')) {
var path = $(this).text()
$(this).data('base-url', path)
if(! is_group)
$(this).wrap('<a>')
} else {
var path = $(this).data('base-url')
}
if(is_group) {
if(hostname.indexOf('127.0.0.1') != -1)
var username = 'assomptionedube1'
else
var username = hostname.split('.')[0] || 'assomptionedube1'
$(this).text(path.replace(/assomptionedube1/g, username).replace(/username/g, username))
} else { // code.url
if(path.indexOf('127.0.0.1:8000') != -1) {
var url = path.replace('127.0.0.1:8000', hostname)
$(this).text(url);
} else {
var url = hostname + path
}
$(this).parent().attr('href', 'http://' + url)
}
})
}
replaceUrls('127.0.0.1:8000')
$('#group_selector_ok').click(function() {
var s = $('#group_selector').val()
// var m = /^infosgr(\d+)$/.exec(s.toLowerCase().trim()) || /^(\d+)$/.exec(s.toLowerCase().trim())
var m = /^(\d+)$/.exec(s.toLowerCase().trim())
var username = m ? 'infosgr' + parseInt(m[1]) : s.trim()
replaceUrls(username + '.pythonanywhere.com')
var saved = $('#group_selector_saved');
if(! saved.data('orignal-template'))
saved.data('orignal-template', saved.text() )
saved.text( saved.data('orignal-template').replace('{username}', username) ).show()
setTimeout(function(){
saved.fadeOut();
}, 3000);
})
$('#group_selector').on('keyup', function(ev){
if(ev.keyCode == 13) {
$('#group_selector_ok').trigger('click')
ev.target.blur()
}
})
$('#group_selector_saved').hide()
$('#group_selector_saved').click(function(){
$(this).fadeOut()
})
})
</script>
</head>
<body class="algos">
<div id="wrapper">
<h1><!-- class="nocontent"
--><a class="homeicon" href="index.html"></a><!--
--><span class="text">Apprenez à programmer un site web avec Django</span><!--
--></h1>
<section>
<p>Bienvenue dans le tutoriel django, voici une liste d'exercice à faire pour bien comprendre les concepts de base de django !
<p>Dans ce tutoriel, nous ferons un site de sondage, appelé <code>askme</code>, c'est une version simplifiée du <a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">tutoriel django officiel</a>, nous serons capables de :</p>
<ul>
<li>Créer une question.</li>
<li>Voir la liste des questions et cliquer dessus pour la voir en détail.</li>
<li>Avoir les réponses possibles à une question en cas de choix multiple.</li>
<li>Répondre à une question.</li>
<li>Voir les résultats d'une question.</li>
<li>Bien séparer les questions par <em>catégories</em> (Sport, Sciences, Culture).</li>
<li>Ne voir que les résultats quand la date de fin est passée.</li>
<li>Limiter la création des questions aux administrateurs.</li>
</ul>
<p class="comment">Les paragraphes en italique indiquent une information complémentaire non nécessaire pour la compréhesion et la réussite du cours, bien entendu, ça peut toujours aider.
C'est un peu comme une section « Pour en savoir plus ».
<p class="comment">Pour faire un site économique du style, <em>marketplace</em>,
on choisira un nom comme <code>funnycoin</code> et non <code>askme</code>, on y verra quelques opérations de base du même style dans ce but.
</section>
<nav>
<a href="django.{{en|fr}}.html"><img src="flag-{{en|fr}}.png" /></a>
</nav>
<nav>
<a href="#{{prerequis|prerequisites}}">Prérequis</a>
</nav>
<nav>
<a href="#{{site-statique|static-site}}">Site statique</a>
<a href="#{{bdd|db}}">Lire une base de données</a>
<a href="#form">Formulaires</a>
<a href="#{{bddr|rdb}}">Bases de données <em>relationnelles</em></a>
</nav>
<h2 id="{{prerequis|prerequisites}}">Prérequis</h2>
<section name="{{prerequis|prerequisites}}">
<p class="lang-switch"><a href="django.{{en|fr}}.html#{{prerequis|prerequisites}}" lang="{{en|fr}}" hreflang="{{en|fr}}"><img style="vertical-align:middle; margin-right: 5px;" src="flag-{{en|fr}}.png"/>{{English here!|Français ici !}}</a>
<h3 id="{{prerequis|prerequisites}}-python">Python</h3>
<p>Une petite connaissance préalable de python est conseillée, vous pouvez avoir un petit rappel de théorie sur mon site
<a href="https://robertvandeneynde.be/parascolaire">de programmation pour débutants</a> :
<ol>
<li>Cliquez sur le petit fichier qui tient sur deux pages
<a href="https://robertvandeneynde.be/parascolaire/theorie1_egal_if_fr.html">theorie1</a>
ou bien regardez ou sa <a href="https://youtu.be/zJ-w2izNvg4">vidéo en bêta</a> !
Ensuite, essayez de faire les exercices 0, 1, 2, 3, voire 4.
<li>Ensuite lisez le fichier
<a href="https://robertvandeneynde.be/parascolaire/theorie2_liste_while.html">theorie2</a>
qui tient aussi sur deux pages,
essayez de faire au moins l'exercice 5, mais vous pouvez tenter les 6, 7, 8, 9.
<li>Finalement si vous êtes chaud, lisez le fichier
<a href="https://robertvandeneynde.be/parascolaire/theorie3_fonctions_et_objets.html">theorie3</a>
qui tient peut-être sur plus de deux pages.
<li>Et si vous êtes encore plus chaud, vous pouvez même lire les parties <em>Pour en savoir plus</em>
ou bien mes fichiers dont les noms commencent par <a href="https://robertvandeneynde.be/parascolaire/#progra">progra</a> !
</ol>
<nav class="external">
<a href="https://robertvandeneynde.be/parascolaire">
Programmation pour débutants
<img src="flag-fr.png" style="margin-right: 5px;"><!--
--><img src="flag-en.png" style="margin-right: 5px;"><!--
--></a>
<hr/>
<ul>
<li> <a href="https://robertvandeneynde.be/parascolaire/theorie1_egal_if_{{fr|en}}.html">
Théorie 1
<img src="flag-{{fr|en}}.png" style="vertical-align: middle; margin-right: 5px;"></a><!--
--><a href="https://robertvandeneynde.be/parascolaire/theorie1_egal_if_{{en|fr}}.html"><img src="flag-{{en|fr}}.png" style="margin-right: 5px;"></a>
<li> <a href="https://youtu.be/zJ-w2izNvg4">
Vidéo de la théorie 1 (en bêta)
<img src="flag-fr.png" style="vertical-align:middle; margin-right: 5px;"></a>
</a>
<ul>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice0_trier_deux_nombres.py.html">
Exercice 0 </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice1_minute_suivante.py.html">
Exercice 1 </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice2_minute_suivante_un_print.py.html">
Exercice 2 </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice3_trier_trois_nombres.py.html">
Exercice 3 </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice4_le_sept_parfait.py.html">
Exercice 4 (facultatif) </a>
</ul>
</li>
<li> <a href="https://robertvandeneynde.be/parascolaire/theorie2_liste_while.html">
Théorie 2
<img src="flag-fr.png" style="vertical-align: middle; margin-right: 5px;"></a>
<ul>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice5_max_list.py.html">
Exercice 5 </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice6_in_list.py.html">
Exercice 6 (facultatif) </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice7_filtre_des_grands.py.html">
Exercice 7 (facultatif) </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice8_somme.py.html">
Exercice 8 (facultatif) </a>
<li> <a href="https://robertvandeneynde.be/parascolaire/exercice9_doublons.py.html">
Exercice 9 (facultatif) </a>
</ul>
</li>
<li> <a href="https://robertvandeneynde.be/parascolaire/theorie3_fonctions_et_objets.html">Théorie 3</a>
<li> <a href="https://robertvandeneynde.be/parascolaire/#progra">Plus de programmation</a>
</ul>
</nav>
<h3 id="{{prerequis|prerequisites}}-html-css">Html/Css</h3>
<p>Des connaissances de html, voici mon propre tutoriel html :</p>
<nav class="external">
<a href="html.html">
Introduction à html et css
<img src="flag-fr.png" style="vertical-align:middle; margin-right: 5px;"></a>
</a>
</nav>
<p>Pour en savoir plus, je recommande l'excellent <a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3">tutoriel html</a> de openclassrooms :</p>
<nav class="external">
<a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/">
Tutoriel html et css sur OpenClassrooms
<img src="flag-fr.png" style="vertical-align:middle; margin-right: 5px;"></a>
</a>
<hr/>
<ol>
<li> <a href="https://openclassrooms.com/en/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604192-comment-fait-on-pour-creer-des-sites-web">
Les bases de HTML5 </a>
<li> <a href="https://openclassrooms.com/en/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettre-en-place-le-css">
Les joies de la mise en forme avec CSS </a>
<li> <a href="https://openclassrooms.com/en/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurer-sa-page">
Mise en page du site </a>
<li> <a href="https://openclassrooms.com/en/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606851-les-tableaux">
Fonctionnalités évoluées </a>
<li> <a href="https://openclassrooms.com/en/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607901-envoyez-votre-site-sur-le-web">
Annexes </a>
</ol>
</nav>
</section>
<h2 id="{{site-statique|static-site}}">Un site statique</h2>
<section name="{{site-statique|static-site}}">
<p class="lang-switch"><a href="django.{{en|fr}}.html" lang="{{en|fr}}" hreflang="{{en|fr}}"><img style="vertical-align:middle; margin-right: 5px;" src="flag-{{en|fr}}.png"/>{{English here!|Français ici !}}</a>
<button class="open-all-developpement">Cliquez ici pour faire apparaître toutes les corrections et annexes !</button>
<p>Lors de mes présentations, j'ai parlé du protocole http, et de la communication entre client et serveur qui ressemblait à un envoi de lettres postales.
Maintenant, place au code django !
<!-- <p class="comment">Créez un projet django vide, si vous avez du mal, demandez à vos voisins !
J'ai quelques machines virtuelles sous la main si vous voulez facilement vous lancer,
ou bien vous pouvez simplement créer un compte sur <a href="https://pythonanywhere.com">pythonanywhere.com</a> que vous soyez sous Windows ou Mac.
-->
<p>J'ai créé pour toi un projet django, il s'appelle <code>projet</code> et contient une application appelée <code>askme</code>, va dans les fichiers et vérifie ça !
<p class="comment">
Si tu es sur un Chromebook,
connecte-toi à l'utilisateur <code>assomptionedube1</code> sur <a href="https://pythonanywhere.com">pythonanywhere.com</a>,
je te donnerai le mot de passe.
<div class="comment" style="line-height:2em;">
<p>Si vous êtes sur pythonanywhere, le site sera accessible à l'addresse <code class="bash contains-group">assomptionedube1.pythonanywhere.com/</code>
en remplaçant bien <code class="bash contains-group">assomptionedube1</code> par votre propre nom d'utilisateur, pour vous facilitez la tâche, entrez votre nom d'utilisateur ici :
<div>
<input type="int" placeholder="assomptionedube1" style="width:240px; margin: 10px; text-align:center;" id="group_selector"/>
<button id="group_selector_ok">Ok</button>
<span id="group_selector_saved" style="border: 1px solid #0c0; background: #090; color: white; padding: 5px; text-wrap:nowrap;">Page mise à jour pour {username} !</span>
</div>
</div>
<p>Si tu veux savoir comment j'ai fait pour créer un projet, voici les instructions :
<div class="developpement little-box closable" symbol="startproject sur pythonanywhere (Chromebook)">
<p>Connectez-vous au compte <code>assomptionedube1</code>, je vous donnerai le mot de passe.</p>
<p>Ouvrez l'onglet <em>Console</em>, et entrez les commandes suivantes :
<pre><code class="bash">
mkvirtualenv django2 --python=/usr/bin/python3.7
pip install django
workon django2
python3 -m django startproject monsite
mv monsite projet
cd projet
python3 manage.py startapp askme
</code></pre>
<p>Dans l'onglet <em>Files</em>, vous devriez avoir un dossier <code>projet</code> qui contient un dossier <code>monsite</code> et <code>askme</code> !
<p>Dans l'onglet <em>Web</em>, indiquez <code class="contains-group">/home/assomptionedube1/.virtualenvs/django2</code> dans le champ <em>Virtualenv</em>.
<!-- <p>Ensuite, créez un fichier dans votre home appelé <code>wsgi.py</code>, on aura donc en <code>/home/myusername/wsgi.py</code> : -->
<p>Ensuite, dans l'onglet <em>Web</em>, cliquez sur <code>/var/www/myusername_pythonanywhere_com_wsgi.py</code>, vous y collez ce code :
<pre><code class="py">
import os
import sys
path = os.path.expanduser('~/projet')
if path not in sys.path:
sys.path.append(path)
os.environ['DJANGO_SETTINGS_MODULE'] = 'monsite.settings'
from django.core.wsgi import get_wsgi_application
from django.contrib.staticfiles.handlers import StaticFilesHandler
application = StaticFilesHandler(get_wsgi_application())
</code></pre>
<!-- <p>Et dans l'onglet <em>Web</em>, indiquez <code>/home/myusername/wsgi.py</code> dans le champ nommé <em>WSGI configuration file</em>. -->
<p>Finalement, lancez le serveur dans l'onglet <em>Web</em> en cliquant sur <em>Reload</em>.
Veuillez noter qu'en bas de la plage, il y a un truc qui s'appelle <code>error.log</code>,
que vous pouvez lire si vous vous doutez que <em>Reload</em> a créé une erreur,
après avoir cliqué dessus, vous devrez aller tout en bas de la page pour avoir les messages les plus récents.
<p>Ouvrez le fichier <code>monsite/settings.py</code>, cherchez la ligne qui contient <code>ALLOWED_HOSTS</code> et écrivez-y :
<pre><code class="py contains-group">
ALLOWED_HOSTS = ["assomptionedube1.pythonanywhere.com"]
</code></pre>
<p>Afin que les urls marchent, il faudra ouvrir le fichier <code>monsite/urls.py</code> et y ajouter des lignes pour qu'il soit comme ceci :
<pre><code class="py">
from django.contrib import admin
from django.urls import include<mark>, path</mark>
urlpatterns = [
path('admin/', admin.site.urls),
<mark>path('', include('askme.urls')),</mark>
]
</code></pre>
<p>Et l'on créera le fichier <code>askme/urls.py</code> et y ajouter des lignes pour qu'il soit comme ceci :
<pre><code class="py">
urlpatterns = [
]
</code></pre>
<p>Pour avoir les messages en français, j'ai été dans <code>monsite/settings.py</code> et j'ai remplacé la ligne parlant de <code>LANGUAGE_CODE</code> :
<pre><code class="py">LANGUAGE_CODE = 'en-us'</code></pre>
</div>
<p></p>
<div class="developpement little-box closable" symbol="startproject sur linux">
<p>Pas besoin de virtualenv, utilisez le <code>python3</code> déjà installé sur votre distribution :
<pre><code class="bash">
python3 -m pip install django
python3 -m django startproject monsite
mv monsite projet
cd projet
python3 manage.py startapp askme
</code></pre>
<p>Cela a créé un dossier <code>projet</code> qui contient un dossier <code>monsite</code> et <code>askme</code> !
<p>Pour lancer le serveur, <code>python3 manage.py runserver</code>, observez bien ce qui est affiché là-bas, ça peut être utile.
<p>Afin que les urls marchent, il faudra ouvrir le fichier <code>monsite/urls.py</code> et y ajouter des lignes pour qu'il soit comme ceci :
<pre><code class="py">
from django.contrib import admin
from django.urls import include<mark>, path</mark>
urlpatterns = [
path('admin/', admin.site.urls),
<mark>path('', include('askme.urls')),</mark>
]
</code></pre>
<p>Et l'on créera le fichier <code>askme/urls.py</code> et y ajouter des lignes pour qu'il soit comme ceci :
<pre><code class="py">
urlpatterns = [
]
</code></pre>
</div>
<p>Essayez de faire les exercices. Ensuite, si vous n'arrivez pas, regardez la solution en cliquant sur les boutons !
Si nous n'arrivez pas à faire un exercice, pas de panique, la correction est là pour vous aider et probablement que vous comprendrez mieux lors d'un exercice ultérieur.
<p>Dernière petite remarque : Django est <strong>vaste</strong>, il permet souvent de faire une chose de <strong>beaucoup de manières différentes</strong>,
ici je me concentre sur les fonctionnalités que je juge <strong>fondamentales</strong>, indispensables pour la création d'un site web.
<!-- Concept d'enveloppe, headers, communication client serveur, poste = ip, address = addresse ip -->
<h3 id="exerci{{c|s}}e-1">Exerci{{c|s}}e 1{{ |}}: Les urls et les vues</h3>
<p>Lancez le serveur.
<p class="comment">
Pour faire cela sur pythonanywhere, c'est déjà configuré et vous devez juste cliquer sur <em>Reload</em> dans l'onglet <em>Web</em> de pythonanywhere.
Veuillez noter qu'en bas de la plage, il y a un truc qui s'appelle <code>error.log</code>,
que vous pouvez lire si vous vous doutez que <em>Reload</em> a créé une erreur,
après avoir cliqué dessus, vous devrez aller tout en bas de la page pour avoir les messages les plus récents.
<!--
<p class="comment">
Si vous utilisez une machine virtuelle et Eclipse, allez dans Eclipse et faites <em>Run as > Django application</em>
ou via le terminal comme un pro <code class="bash">python3 manage.py runserver</code>. -->
<p class="comment">
Si vous êtes sous linux, ouvrez le <em>Terminal</em> puis tappez <code>cd projet</code> pour aller dans le dossier projet,
et finalement tappez <code class="bash">python3 manage.py runserver</code> pour lancer le serveur, ne fermez pas le terminal, ça tourne !
<p>Que se passe-t-il quand je vais sur <code class="url">127.0.0.1:8000/</code> ?
<p class="developpement little-box closable">
Il est marqué <em>It works</em> ou <em>L'installation c'est déroulée avec succès</em> et la petite fusée de Django est affichée.
<p>Et quand je vais sur <code class="url">127.0.0.1:8000/hello</code> ?
<p class="developpement little-box closable">
Erreur 404, et on voit la liste des urls disponibles, il n'y a que <code>admin/</code>
<h4>Première url</h4>
<p>Faites une page à l'url <code class="url">/hello</code>, qui va afficher <em>Coucou les amis !</em>
<p>Pour cela, vous devrez modifier (ou créer) le fichier <code>urls.py</code> qui se trouve dans le dossier <strong>de votre app</strong> (dossier <code>askme/</code>).
<div class="developpement little-box closable" symbol="Créer un fichier sur pythonanywhere">
<p>Pour créer un fichier dans pythonanywhere, naviguer dans le bon dossier, puis à droite où il est marqué <em>Enter new filename</em>, écrivez <code>urls.py</code> (attention, <strong>avec l'extension</strong> <code>.py</code>)
et appuyez sur <kbd>Enter</kbd>.
<figure class="half-size">
<img src="screenshot_pythonanywhere_newfile.png" />
</figure>
<p>Ensuite, vous n'avez qu'à cliquer sur le fichier et un éditeur de texte apparaîtra, n'oubliez pas de <strong>Sauver</strong> le fichier après modification en cliquant sur <em>Save</em>
en haut à droite de l'écran.
<p>Sur pythonanywhere, quand vous modfier un fichier de code, vous devez souvent <em>Reload</em> le serveur, allez dans l'onglet <em>Web</em> et cliquez sur le gros bouton <em>Reload</em>.
</div>
<p></p>
<pre class="developpement" symbol="urls.py (django 2.0)"><code class="py">
<mark>from django.urls import path</mark>
<mark>from . import views</mark>
urlpatterns = [
<mark>path('hello', views.dire_bonjour),</mark>
]
</code></pre>
<p>On dit donc que quand on va sur l'<strong>url</strong> <code>hello</code>, <!-- because it doesn't begin with a slash, one could not write code class="url" -->
on va dans <code>views.dire_bonjour</code>, il faut donc aller dans <code>views.py</code> et y définir <code>dire_bonjour</code>.
<p>Vous devrez donc également modifier (ou créer) le fichier <code>views.py</code> qui se trouve dans le même dossier, on y verra :
<!-- Remarquez que certains projets utilisent un <strong>dossier</strong> <code>views/</code>, dans ce cas, suivez <a href="#dossier-views">ces instructions</a>. -->
<pre class="developpement" symbol="views.py"><code class="py">
from django.http import HttpResponse
def dire_bonjour(request):
return HttpResponse("Coucou les amis !")
</code></pre>
<!-- <div class="comment">
<p>Attention à la version de django, ce tutoriel est sous django 2.0, mais certains tutoriels sont encore en 1.11 où vous verrez des fichiers <code>urls.py</code>
comme ceci :
<pre class="developpement" symbol="urls.py (django 1.11)"><code class="py">
from django<mark>.conf</mark>.urls import <mark>url</mark>
from . import views
urlpatterns = [
<mark>url</mark>(<mark>r'^hello$'</mark>, views.dire_bonjour),
]
</code></pre>
</div> -->
<div class="comment">
<div id="dossier-views"></div>
<p>Si on a vraiment beaucoup d'urls, vous pouvez choisir de ne pas faire un
<strong>fichier</strong> <code class="bash">views.py</code>
mais d'avoir un <strong>dossier</strong> <code class="bash">views/</code>,
dans ce cas vous devez créer un (ou plusieurs) fichier(s) <code class="bash">.py</code> dans le dossier <code class="bash">views/</code>,
comme par exemple <code>base.py</code>, vous devrez alors écrire <code class="bash">urls.py</code> comme ceci :
<pre class="developpement" symbol="urls.py (avec dossier views)"><code class="py">
from django.urls import path
from . import views
<mark>from .views import base</mark>
urlpatterns = [
path('hello', views<mark>.base</mark>.dire_bonjour),
]
</code></pre>
<pre class="developpement" symbol="views/base.py (avec dossier views)"><code class="py">
from django.http import HttpResponse
def dire_bonjour(request):
return HttpResponse("Coucou les amis !")
</code></pre>
</div>
<p>Que se passe-t-il maintenant quand je vais sur <code class="url">/hello</code> ?
<p class="developpement little-box closable">
On voit <em>Coucou les amis !</em>
<p>Et quand je vais sur <code class="url">/superapp</code> ?
<p class="developpement little-box closable">
Une erreur 404
<h4>Une autre url</h4>
<p>Je vous ai montré une url en exemple, donc mainteant à vous d'en faire une autre,
j'aimerais que quand on va sur <code class="url">/cv</code>, on y voit :
<ul>
<li><em>Cv de René : Surfeur, programmeur mais humain avant tout</em></li>
</ul>
<pre class="developpement" symbol="urls.py"><code class="py">
from django.urls import path
from . import views
urlpatterns = [
path('hello', views.dire_bonjour),
<mark>path('cv', views.montrer_cv),</mark>
]
</code></pre>
<pre class="developpement" symbol="views.py"><code class="py">
from django.http import HttpResponse
def dire_bonjour(request):
return HttpResponse("Coucou les amis !")
<mark>def montrer_cv(request):</mark>
<mark>return HttpResponse("Cv de René : Surfeur, programmeur mais humain avant tout")</mark>
</code></pre>
<p>Quand on va sur l'<strong>url</strong> <code>/cv</code>, on va dans la <strong>fonction</strong> <code>montrer_cv</code> qui se trouve dans <code>views</code>.
Petit rappel, <code class="py">def</code> définit une fonction comme dit dans <a href="https://robertvandeneynde.be/parascolaire/theorie3_fonctions_et_objets.html">theorie3</a>.
<p>Le fichier contient donc maintenant deux fonctions, <code>dire_bonjour</code> et <code>montrer_cv</code>, on peut en créer autant que l'on veut.
<p>Remarquez que j'aurais également pu appeler mes fonctions <code class="py">hello</code> et <code class="py">cv</code>
en écrivant <code style="white-space:nowrap" class="py">def hello(request)</code> et <code style="white-space:nowrap" class="py">def cv(request)</code> dans <code class="bash">views.py</code>
pour que chaque fonction aie le même nom que son url, mais j'ai préféré faire la différence.
<h3 id="exerci{{c|s}}e-2">Exerci{{c|s}}e 2{{ |}}: Du html !</h3>
<p>Comment mettre par exemple <em>René</em> en <strong>gras</strong> ?
<pre class="developpement" symbol="views.py"><code>
from django.http import HttpResponse
def dire_bonjour(request):
return HttpResponse("Coucou les amis !")
def montrer_cv(request):
return HttpResponse("Cv de <strong>René</strong>: Surfeur, programmeur mais humain avant tout")
</code></pre>
<p class="comment">Remarquez maintenant qu'il y a une différence entre ce qu'on a envoyé (le code html) et ce qui est affiché à l'utilisateur par le navigateur (la page).
Faites un clic droit sur la page et cliquez sur <strong>Afficher la source</strong>, vous verrez le html qu'on a envoyé.
<p class="comment">
Pour afficher la source, sous Google Chrome ou Firefox, il existe le raccourci <kbd>Ctrl</kbd>+<kbd>U</kbd> ou <kbd>⌘ Cmd</kbd>+<kbd>U</kbd> sous Mac,
si vous êtes sous <em>Safari</em> et que vous ne voulez pas télécharger Google Chrome,
<a href="https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/">allez dans les options avancées</a>
et activez <em>montrer l'url en entier</em> (tout en haut) et <em>montrer les outils de développement</em>
(tout en bas) ce qui fera que vous pourrez y accéder avec un clic droit.
<p>Et comment lister ses compétences dans une liste comme celle-ci :
<ul>
<li>Surfeur
<li>Programmeur
<li>Humain avant tout
</ul>
<pre class="developpement" symbol="views.py"><code class="py">
def montrer_cv(request):
return HttpResponse("Cv de <strong>René</strong>: <ul> <li>Surfeur</li> <li>Programmeur</li> <li>Mais humain avant tout</li> </ul>")
</code></pre>
<h3 id="exerci{{c|s}}e-3">Exerci{{c|s}}e 3{{ |}}: Un template pour René</h3>
<p>Cela devient un peu confus de mettre des données dans le code python, vous imaginez bien que tout un article de blog n'a rien à faire
dans un fichier python.
Comment faire un document html séparé ?
<pre class="developpement" symbol="views.py"><code class="py">
from django<mark>.shortcuts</mark> import render
def montrer_cv(request):
return render(request, 'le_cv.html')
</code></pre>
<pre class="developpement" symbol="le_cv.html"><code class="html">
Cv de <strong>René</strong>
<ul>
<li>Surfeur</li>
<li>Programmeur</li>
<li>Mais humain avant tout</li>
</ul>
</code></pre>
<p>Attention à ce que le fichier html soit dans le dossier <code>templates/</code> et veillez à ce que
<code>INSTALLED_APP</code> dans <code>settings.py</code> contient bien <code class="py">'askme.apps.AskmeConfig'</code> :
<pre class="developpement closable" symbol="settings.py"><code>
...
INSTALLED_APP = [
<mark>'askme.apps.AskmeConfig'</mark>,
...
]
...
</code></pre>
<p>Remarquez, qu'en html, on peut passer à la ligne autant que l'on veut et rajouter des espaces pour rendre le document plus clair.
Si l'on veut passer à la ligne dans le document, on crée simplement un nouveau paragraphe avec <code class="html"><p></code> fermé par <code class="html"></p></code>.
<p>L'outil qui a fait du web une révolution, c'est le <strong>lien</strong>, faites un petit lien vers notre autre page à l'url <code class="url">/hello</code> !
<pre class="developpement" symbol="le_cv.html"><code class="html">
Allez voir <a href="/hello">ici</a> ma super page
et j'espère que je vous ferai sourire !
</code></pre>
<h4 id="html-est-joli">Possibilités d'html</h4>
<div symbol="Possibilités d'html" class="developpement closable little-box">
<p>Afin que notre page soit plus jolie, on peut apprendre d'autres balises html, si vous
voulez garder un site peu joli mais passer directement au côté fontionnel <a href="#template-et-variables">passez cette section</a>,
sinon voici un aperçu de ce qu'un
<a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/">
bon tutoriel html</a>
dans son
<a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/comment-fait-on-pour-creer-des-sites-web">
premier chapitre</a>
vous dira :
<p>Il est plus structuré de mettre le tout dans une balise <code class="html"><html></code>
qui contient une balise <code class="html"><head></code> et <code class="html"><body></code>,
de mettre des paragraphes <code class="html"><p></code>
de telle sorte que le document soit maintenant :
<pre class="developpement" symbol="le_cv.html"><code class="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!-- pour pouvoir entrer des accents et autres caractères sans erreurs -->
<title>René le magnifique</title>
</head>
<body>
<p>Cv de <strong>René</strong></p>
<p>Voici mes hobbys :</p>
<ul>
<li>Surfeur</li>
<li>Programmeur</li>
<li>Mais humain avant tout</li>
</ul>
<p>&copy; René &amp; Marie </p> <!-- n'importe quel caractère <a href="https://robertvandeneynde.be/blog/unicode/">unicode</a> ! -->
</body>
</html>
</code></pre>
<p>Où est passé le texte <em>René le magnifique</em> dans mon exemple ? Regardez bien partout !
<p>Et comment faire une présentation avec des titres de niveau 1 et 2 ? Et des paragraphes ?
<pre class="developpement" symbol="le_cv.html"><code class="html">
<html>
<head>
<meta charset="utf-8"/> <!-- pour éviter les erreurs d'accent -->
<title>René le magnifique</title>
</head>
<body>
<h1>Cv de René</h1>
<p>René est un expert depuis le début de sa vie.</p>
<!-- on peut passer à la ligne et mettre des commentaires -->
<p>
Il a rencontré Chuck Norris
et a compté jusqu'à l'infini avec lui,
deux fois.
</p>
<h2>Compétences incroyables</h2>
<ul>
<li>Surfeur</li>
<li>Programmeur</li>
<li>Mais humain avant tout</li>
</ul>
<h2>Parcours international</h2>
<p> René connaît le Cyrillique et aime beaucoup les
lettres <strong>и</strong> et <strong>&#x044E;</strong> </p> <!-- U+044E ю CYRILLIC SMALL LETTER YU -->
<p>Il adore également parler des angles avec des &theta; et des φ< en faisant 2&times;90° = 180°/p>
<!-- n'importe quel caractère <a href="https://robertvandeneynde.be/blog/unicode/">unicode</a> ! -->
<p>&copy; René</p>
</body>
</html>
</code></pre>
<p class="comment">Toute cette structure peut être retrouvée en ouvrant les <em>outils de développement</em>,
faites un clic droit puis <em>Inspecter</em> ou sous Google Chrome et Firefox <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd>.
Vous pouvez ensuite balader votre souris pour voir les correspondances entre le html et les blocs.
<div class="developpement little-box closable" contains-code="html" symbol="Omission de fermeture de balise...">
<p>Certaines balises html comme <code><li></code> ou <code><p></code>
<a href="{{https://developer.mozilla.org/fr/docs/Web/HTML/Element/li|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li}}">ont le droit</a>
d'omettre leur tab de fin dans certaines situations très courantes.
On lira dans
<a href="{{https://developer.mozilla.org/fr/docs/Web/HTML/Element/li|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li}}">la référence</a>
de <code><li></code> :
<p><em>
{{ La balise de fin peut être absente si l'élément est immédiatement suivi par un autre élément <code><li></code> ou s'il n'y a plus d'autre contenu dans son élément parent.
| The end tag can be omitted if the list item is immediately followed by another <code><li></code> element, or if there is no more content in its parent element. }}
</em>
<p>En d'autres mots,
si vous avez un <code></li></code> directement suivi d'un <code><li></code> ou de la fermeture de liste comme <code></ul></code>,
vous pouvez omettre le <code></li></code>.
<p>Ce qui fait que cette liste est du html tout à fait valide :
<pre class="" symbol="le_cv.html"><code class="html">
<ul>
<li>Surfeur
<li>Programmeur
<li>Mais humain avant tout
</ul>
</code></pre>
<p>Ce qui ressemble vachement au résultat !
<ul>
<li>Surfeur
<li>Programmeur
<li>Mais humain avant tout
</ul>
<p>Pour <code><p></code>,
c'est <a href="{{https://developer.mozilla.org/fr/docs/Web/HTML/Element/p|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p}}">en gros la même chose</a>,
si vous avez un <code></p></code> directement suivi d'un <code><p></code>,
vous pouvez omettre le <code></p></code>, rendant ce code valide :
<pre class="" symbol="le_cv.html"><code class="html">
<h1>Cv de René</h1>
<p>René est un expert depuis le début de sa vie.
<p>Il a rencontré Chuck Norris