journal-promo-ada
Avril 2020
Mercredi 1er
CSS animation (OpenClassroom)
- Il existe deux moyens de créer des animations en CSS : les transitions, et les keyframes.
- Pour créer une transition, vous aurez besoin de plusieurs informations :
- une propriété CSS à modifier ;
- une valeur initiale pour votre propriété CSS ;
- une valeur finale pour cette même propriété ;
- une durée ;
- un événement pour déclencher votre transition.
(Ex:nous voulons que notre bouton grossisse quand un utilisateur passe sa souris dessus)
- nous pouvons choisir la propriété transform et sa fonction scale().
-
la fonction scale() permet de modifier la taille d’un élément, selon la valeur qu’on lui donne, sachant que 0 = 0 % et 1 = 100 %
-
on va utiliser du: Sass, un nouveau langage à partir du CSS : le SCSS. Tout ce qui est valide en CSS l’est aussi en SCSS, mais il y ajoute des expressions, des fonctions, des variables, une logique conditionnelle et des boucles. Il utilise ensuite un préprocesseur (un programme qui fonctionne sur votre ordinateur ou sur un serveur) chargé de traduire cette nouvelle syntaxe intelligente en CSS.
<body>
<div class="container">
<div class="btn">
Vois comme je grandis !
</div>
</div>
</body>
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transform: scale(1); // cela ne change rien pcq le btn est déjà à scale 1 de base
}
Nous voulons que le bouton grossisse de 15 % au survol de la souris. Pour cela, nous avons besoin de la pseudoclasse :hover, avec la fonction scale() définie sur 1.15
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transform: scale(1);
&:hover {
transform: scale(1.15);
}
}
Pour ajouter un peu de fluidité, nous devons indiquer à notre navigateur que le changement d’échelle, entre l’état inactif et le :hover, devra se faire par une transition animée. Pour cela, vous pouvez ajouter la propriété transition-property au sélecteur .btn. On lui indique que la propriété transform est celle sur laquelle le navigateur doit appliquer une transition :
$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
background: $cd-btn;
color: $cd-txt;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
transform: scale(1);
transition-property: transform; //pour plus fluide
transition-duration: 400ms; // possibilité en secondes (s) ou millisecondes (ms) pas trop long non plus donc 400 c'est bien
&:hover { // pour déclencher la transition, pseudo classe :hover comme if / else et il en existe une 50aine
transform: scale(1.15); // pcq on veut que ca grosis de 15%
}
}
Pour refactorer on écrirait: transition: transform 400ms;
Liste des pseudoclasses les plus couramment utilisées pour déclencher des transitions :
:hover, qui est déclenché au survol de la souris ;:active, activé au clic de l’utilisateur (le plus souvent pour les liens et boutons) ;:focus, qui se déclenche lorsque son élément reçoit le focus (soit il est sélectionné à l’aide du clavier, soit il est activé avec la souris) ;:valid, dont la validation du contenu s’effectue correctement par rapport au type de donnée attendu ;:invalid, qui inversement, correspond à un élément dont la validation du contenu ne s’effectue pas correctement par rapport au type de donnée attendu ;:not(), qui correspond à la négation. Elle prend un sélecteur en argument et permet de cibler les éléments qui ne sont pas représentés par cet argument ;:checked, qui correspond aux input de type checkbox, option ou radio qui sont cochés ;:enabled, un élément avec lequel on peut interagir ;:disabled, qui correspond à un élément dont l’interaction a été bloquée.
(Exemple pour valider un formulaire)
<body>
<div class="container">
<div class="form">
<div class="form__group">
<label for="">email</label>
<input type="email" name="" id="">
</div>
</div>
</div>
</body>
d-txt: #6300a0;
d-txt--invalid: #fff;
d-danger: #b20a37;
form {
&__group {
& input {
border: 2px solid $cd-box;
border-radius: 100rem;
color: $cd-txt;
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
outline: none;
padding: .5rem 1.5rem;
width: 100%;
transition: background-color 500ms; //un rapide effet de fondu entre le moment où l’utilisateur tape son adresse e-mail et l’affichage de la couleur rouge.
&:focus { //quand l’user clique, cela change l’état du champ à :focus,
border: 2px solid $cd-txt; ajoutant ainsi un contour violet à l’élément.
}
&:not(:focus):invalid { // la fonctionnalité de validation des champs avec :invalid
background-color: $cd-danger; :not(), combinée à la pseudoclasse :focus, afin de s’assurer que
border: 2px solid $cd-danger; l’utilisateur a terminé de renseigner son adresse e-mail avant
color: $cd-txt--invalid; de lui faire un feedback de validation.
}
}
}
}
(Ex:Les pseudoclasses peuvent aussi être utilisés pour changer le style d’un élément voisin.)
1.
<body>
<div class="container">
<div class="btn">
C'est partiii!
</div>
<div class="ball"></div>
</div>
</body>
.btn {
background: $cd-primary;
font-size: 3rem;
cursor: pointer;
padding: 1.85rem 3rem;
border-radius: 10rem;
&:active + .ball{ //la boule grossisse au clic de l’utilisateur en utilisant la pseudoclasse
transform: scale(1.0); :active plutôt que :hover
}
}
.ball {
width: $ball-size;
height: $ball-size;
background: $cd-secondary;
margin-bottom: 1rem;
border-radius: $ball-size * 0.5;
transform: scale(0.1); //l’échelle initiale scale() à .1 pour faire grandir le ballon et
transition: transform 4000ms; // pour créer une impression de ballon en train de gonflé pendant 4s
}
Les 12 principes de l’animation sont :
1.: Squash and Stretch, pour compresser et étirer un élément ;
:Anticipation, pour préparer l’audience à un mouvement à venir ;:Staging (mise en scène), pour guider les yeux de l’utilisateur vers les éléments importants d’une page ;:Straight Ahead and Pose to Pose (toute l'action d'un coup et partie par partie), qui correspond davantage à l’animation traditionnelle mais fait penser à la différence transitions/keyframes ;:Follow Through and Overlapping Action (continuité du mouvement initial et chevauchement de deux mouvements consécutifs), pour faire accélérer et décélérer un élément en fonction de sa masse ;:Slow in and slow out (ralentissement en début et en fin de mouvement), basé sur le fait que les objets ne démarrent pas et ne s’arrêtent pas instantanément ;:Arc, pour créer des mouvements naturels ;:Secondary Action (action secondaire), pour séparer différentes parties d’une scène dans une animation ;:Timing, pour faire se déplacer les objets à une vitesse crédible ;:Exaggeration (exagération), pour donner du caractère et de la personnalité à une animation ;:Solid Drawing (notion de volume), pour que les animations correspondent au résultat souhaité ;:Appeal (charisme), pour rendre les animations plus dynamiques.
(Ex: créez des animations naturelles en combinant les transitions)
- au survol de la souris, non seulement le bouton grossira, mais on lui appliquera également un effet de fondu.
$cd-btn-start: rgba(1, 28, 55, 0);
$cd-btn-end: rgba(1, 28, 55, 1);
.btn {
background-color: $cd-btn-start;
border: 4px solid $cd-btn;
border-radius: 10rem;
cursor: pointer;
font-size: 3rem;
padding: 1.85rem 3rem;
&:hover {
transform: scale(1.13);
background-color: $cd-btn-end;
}
}
-
on peut aussi retarder la transition:
transition: transform 450ms, background-color 300ms; -
retardez le début d’une transition:
Attention à bien respecter l’ordre qu’on a utilisé juste avant pour préciser la durée de chaque propriété. Dans notre cas précis, nous ne voulons pas retarder l’animation de transformation, mais celle de couleur d’arrière-plan
transition: transform 450ms, background-color 300ms;
transition-delay: 0, 150ms;
si on refactor ca donne :
transition: transform 450ms, background-color 300ms 150ms;
le code finale:
.btn {
background-color: $cd-btn-start;
border: 4px solid $cd-btn;
border-radius: 10rem;
cursor: pointer;
font-size: 3rem;
overflow: hidden;
padding: 1.85rem 3rem;
position: relative;
transition: transform 450ms, background-color 300ms 150ms;
&:hover {
transform: scale(1.13);
background-color: $cd-btn-end;
}
}
(Créez des animations plus naturelles avec les fonctions de timing)
1.L’accélération et la décélération des transitions sont contrôlées par la propriété transition-timing-function ; ex:
transition: transform 1000ms;
transition-timing-function: linear;
ou transition:
transform 1000ms linear;
2.Si aucune fonction de timing n’est indiquée, la transition utilisera la fonction ease. Elle suit un profil d’accélération plus net, et une rampe de décélération plus prononcée ;
3.Parmi les autres mots clés pour les fonctions de temporisation, on peut trouver ease-in, ease-out, ease-in-out, et linear ; ex:
transition: transform 1000ms ease-in-out;
ou ```css // Fonction de timing ease-in : transition: transform 1000ms ease-in; // Fonction de timing ease-out : transition: transform 1000ms ease-out; ```
4.Quand aucune fonction de timing par défaut ne correspond à l’animation, il est possible de créer ses propres courbes d’animation personnalisée à l’aide de la fonction cubic-bezier() ;
merci à https://cubic-bezier.com/#.17,.67,.83,.67
ce qui donnerai :
$trans-dur: 2000ms;
.strength {
transform: translateY(100%);
transition: transform $trans-dur cubic-bezier(0, .75, .08, 1);
}
5.Il existe des outils pour ajuster les effets de timing avec la fonction cubic-bezier() .
Jeudi 2 avril
CSS animation (OpenClassroom)
- FPS de 60 pour le navigateur
- Pour nous assurer que nos animations soient aussi fluides que possibles, nos main propriétés sont transform et
opacity. - Modifiez la taille d’un élément avec scale avec un parametre genre scale(2) = grossi de 200% pour taille uniforme:
.btn {
:hover + .box {
transform: scale(2);
}
}
.box {
transition: transform 330ms ease-in-out;
}
ou avec deux paramètres X et Y genre scale, X à 300 %, et Y à 50 % : pour un volume constant:
.btn {
:hover + .box {
transform: scale(3, 0.5);
}
}
.box {
transition: transform 330ms ease-in-out;
}
quand on veut modifier l’échelle dans une seule direction, on peut utiliser les fonctions scaleX() et scaleY().
- Modifiez **la position** d'un élément avec la fonction **translate** qui accepte différentes unités, comme les px, les vh ou
les em avec X et Y pour propriétés, déplacer notre boîte de 150 px vers la droite et 7 vh vers le haut:
```css
.btn {
:hover + .box {
transform: translate(150px, -7vh);
}
}
.box {
transition: transform 330ms ease-in-out;
}
Notes : Pour certaines propriétés CSS, les pourcentages sont calculés par rapport à leur élément parent. Par exemple, width:
50% signifie la moitié de la largeur du parent. Mais quand on utilise des pourcentages avec translate(), ces pourcentages
sont liés à l’élément lui-même. Il est possible de déplacer des éléments sur l’axe X et Y séparément, grâce aux fonctions
translateX() et translateY(). Ex:
(HTML) (CSS)
<div class="container"> .btn {
<button class="btn">Transform!</button> :hover + .box {
<div class="box"> transform: scale(1);
<span>Boop!</span> span {
</div> transform: translateY(0);
</div> }
}
}
.box {
transform: scale(0.1);
transition: transform 330ms ease-in-out;
overflow: hidden; // texte n'apparaît que dans la boîte
span {
display: inline-block;
transform: translateY(250%);
transition: transform 280ms ease-out 50ms;
}
}
Notes: transform ne peut pas manipuler d’éléments inline. Nous devons donc modifier le mode d’affichage en block ou
inline-block avant d’obtenir des résultats.
- Faites pivoter vos éléments avec rotate() ex:
(HTML) <div class="container"> <button class="btn">Transform!</button> <div class="boxes"> <div class="boxes__base boxes--rotDegrees">rotate(360deg)</div> <div class="boxes__base boxes--rotTurns">rotate(1turn)</div> </div> </div>(CSS) .btn { :hover + .boxes { & > .boxes--rotDegrees { transform: rotate(0deg); } & > .boxes--rotTurns { transform: rotate(0turn); } } } .boxes { //Chaque boîte démarre en position de rotation négative de &--rotDegrees { 360 deg/1 turn. Au survol du bouton, cela déclenche la transform: rotate(-360deg); transition. On les fait alors tourner vers la position transition: transform 500ms ease-in-out; 0 deg/0 turn sur une demi-seconde, en utilisant } la fonction de temporisation ease-in-out. &--rotTurns { background: pink; transform: rotate(-1turn); transition: transform 500ms ease-in-out; } } - si on ajoute une deuxième propriété transform, elle annule la première. On ne peut donc définir qu’une seule propriété transform dans un même sélecteur ;
- pour effectuer plusieurs transformations, on peut les lister dans une même propriété transform comme transform:translateX(200%) scale(2);
- une propriété avec plusieurs fonctions exécute les fonctions dans l’ordre, de droite à gauche ;
- les fonctions de transformations en 3D comme translate3d(), rotateZ() et scale3d() ont également besoin de la fonction perspective pour indiquer au navigateur la distance à laquelle l’utilisateur se trouve : plus la distance est grande, moins l’animation sera marquée.
- Notes: À vous de choisir entre degrés et turns selon vos préférences. Tendance à préférer turn lorsque l’élément fait au moins un tour sur lui-même, et deg lorsque valeurs inférieures à un tour.
Notes persos
**Les cours OpenClassRoom montrent parfois des exemples incomplet comme j’ai pu le constater avec Gauthier lorsque j’ai copié coller un code sur rotate transition … donc j’aurai peut etre pas du copier tout ces exemples hahahaha vu que je ne les ai pas testé moi-même, a par le dernier où d’ailleurs il manque un & et de la déco pour afficher les carrés rose et vert.. **
Tout les exemples donné dans le cours OpenClassroom son en SASS donc si on veut traduire les codes en CSS pure: https://www.sassmeister.com/
Pour étudier le CSS pure en animation : https://www.w3schools.com/css/css3_animations.asp
Mais je conseillerai juste de finir le cours OpenClassroom avant pcq on nous a pas encore introduit la notion de keyframes que l’on verra justement plus tard dans le cours OCR. Et j’avais envie du coup d’apprendre SCSS car comme me l’a montré Gauthier, c’est bien plus facile à manier et j’ai donc ce cours sous la main : https://la-cascade.io/se-lancer-dans-sass/ (Sarah est d’ailleurs en train de l’installer et de faire joujou avec, moi je continue sur la partie théorie, le temps d’avoir bien toute la base consolidé pour ensuite pouvoir mettre en pratique, chacun sa façon d’apprendre :)
- transform-origin permet de repositionner le point d’ancrage, qui se trouve par défaut au centre de l’élément ;
- on peut régler ce point d’origine en utilisant des unités comme px, rem, vh, etc. ;
- il est aussi possible d’utiliser des pourcentages pour X et Y ;
- ou encore, on peut utiliser des mots clés : left et right pour l’axe X, top et bottom pour l’axe Y, et center pour les deux ;
-
- il est possible de ne pas indiquer la valeur de l’axe Y ou, quand on utilise des mots clés, de mettre uniquement une valeur
- le navigateur comprend de lui-même à quel axe la valeur s’applique ;
- quand on change le point d’origine en 3D, la valeur de Z doit être exprimée en unités (et non en pourcentages) !
Les quatre étapes de la création d’une page web sont :
- Style : le navigateur comprend la structure HTML du code qu’il reçoit et prépare le style qui sera appliqué,
- Layout (mise en page) : le navigateur détermine la mise en page et la taille des éléments en fonction du style qu’il a reçu,
- Paint : il transforme les éléments en pixels,
- Composition : il combine tous les éléments pour composer la page qui s’affiche ; pour assurer la fluidité des animations, il faut se contenter d’animer des propriétés de l’étape composition. Les plus utiles sont transform et opacity
Animez les couleurs de manière performante avec opacity
- Animer la couleur d’une propriété déclenche des calculs de paint ;
- La propriété opacity nous permet de faire des transitions entre des couleurs en évitant ces calculs ;
- La propriété opacity reçoit une valeur entre 0 et 1, 0 étant complètement transparent et 1 complètement opaque ;
- Pour éviter d’avoir à ajouter des <div> supplémentaires, que l’on aurait dû ajouter à chaque fois dans le HTML, on peut utiliser le pseudoélément ::before ou ::after ;
- Pour créer un pseudoélément, ajoutez le nom du pseudoélément à un sélecteur, en utilisant le préfixe double deux-points :
.selector::after{…} - Les pseudo-éléments ::before et ::after créent un élément qui est respectivement le premier ou le dernier enfant de l’élément sélectionné ;
- Il est possible de créer des dégradés de couleur. Il suffit d’attribuer un dégradé au background-color de l’élément d’arrière-plan. On fera ensuite disparaître l’élément superposé avec opacity: 0.
Vendredi 3 avril
CSS animation (OpenClassroom)
- Intro des keyframes:
.progress { &__bar { opacity: 0; // le truc de base pour la bar a opacité 0 donc blanc } } @keyframes progress-bar{ 0% { transform: scaleX(0); } 17% { //là a 17% x=18 don du vert jusqu'a la transform: scaleX(.18); } 24% { transform: scaleX(.4); } 46% { transform: scaleX(.81); } 85%,100% { opacity: 1; // quand la barre atteint les 85% l'opacité est a 1 } 100% { transform: scaleX(1); // important pour qu'elle reste a 100% jusqu'a la fin } }-
On peut introdure un delay et une durée dans le keyframe:
$prog-bar-dur: 1000ms; $prog-bar-delay: 1000ms; .progress { &__bar { transform-origin: left; transform: scaleX(0.5); animation: progress-bar $prog-bar-dur $prog-bar-delay; animation-fill-mode: both; } }
-
- On peut rajouter du cubic : (+smooth)
@keyframes progress-bar{ 0% { transform: scaleX(0); } 17% { transform: scaleX(.18); } 24% { transform: scaleX(.40); animation-timing-function: cubic-bezier(.9,0,.1,1); } 46% { transform: scaleX(.81); animation-timing-function: cubic-bezier(.25,0.25,1); } 100% { transform: scaleX(1); } } - Nous pouvons retarder le démarrage des animations avec keyframes en utilisant la propriété animation-delay, avec un délai exprimé en secondes ou en millisecondes, tout comme les transitions ;
- Nous pouvons étendre ces valeurs du début à la fin de ces animations en utilisant la propriété animation-fill-mode :
- Le mot clé « backwards » prolonge les valeurs de départ d’une animation avant son lancement, couvrant la durée du délai assigné avant que l’animation elle-même ne commence,
- Le mot clé « forwards » prolonge les valeurs finales d’une animation jusqu’à ce que la page soit rechargée ou que le navigateur soit fermé,
- Le mot clé « both » prolonge l’animation dans les deux sens ;
- Nous pouvons définir une fonction de timing des @keyframes en utilisant la fonction animation-timing-function sur le sélecteur où l’animation a été assignée ;
-
Nous pouvons également définir un timing spécifique keyframe par keyframe, en assignant la propriété animation-timing- function aux keyframes en question.
- Pour faire un headshake de l’input:
$cd-danger : #b20a37 ; $cd-txt: #6300a0; $shake-intensity: 2%; .form { &__group { & input { &:active, &:focus { border: 2px solid $cd-txt; } &:not(:focus):invalid { color: white; border: 2px solid $cd-danger; background: $cd-danger; animation: headshake 100ms cubic-bezier(.4,.1,.6,.9); // durée et ease in out a diff point animation-iteration-count: 3; //pour qu'il le fasse 3 fois } } } } @keyframes headshake { 25% { // entièrement à droite transform: translateX($shake-intensity); // se décale un peu a droite } 75% { // entièrement à gauche transform: translateX($shake-intensity * -1); // se décale un peu a gauche } }
Samedi/ dimanche 4/ 5 avril
CSS animation (OpenClassroom)
- Faites boucler vos animations à l’infini :
.load {
width: 30vh;
height: 22.5vh;
display: flex;
justify-content: space-evenly;
}
.load__bar {
background-color: #15DEA5;
height: 100%;
width: 3vh;
animation: bars 1000ms backwards infinite;
animation-direction : nomal; // rare d'utiliser normal, souvent reverse pour jouer des
} animations avec des allers-retours ou alternate animation en
.load__bar--1 { boucle infinie et invisible
animation-delay: 200ms;
}
.load__bar--2 {
animation-delay: 400ms;
}
.load__bar--3 {
animation-delay: 600ms;
}
.load__bar--4 {
animation-delay: 800ms;
}
.load__bar--5 {
animation-delay: 1000ms;
}
.load__bar {
background-color: #15DEA5;
animation: bars 1000ms backwards infinite ease-in-out alternate; // tout mettre sur la même ligne
}
- Avec alternate reverse
(HTML) <div class="container"> <div class="load"> <div class="load__bar load__bar--1"></div> <div class="load__bar load__bar--2"></div> <div class="load__bar load__bar--3"></div> <div class="load__bar load__bar--4"></div> <div class="load__bar load__bar--5"></div> </div> <div class="load"> <div class="load__bar load__bar--1-inv"></div> <div class="load__bar load__bar--2-inv"></div> <div class="load__bar load__bar--3-inv"></div> <div class="load__bar load__bar--4-inv"></div> <div class="load__bar load__bar--5-inv"></div> </div> </div>```css
(CSS) .load__bar { animation: bars 1000ms backwards infinite ease-in-out alternate; } .load__bar–1 { animation-delay: 200ms; } .load__bar–1-inv { animation-delay: 200ms; animation-direction: alternate-reverse; background-color: #0E397F; } .load__bar–2 { animation-delay: 400ms; } .load__bar–2-inv { animation-delay: 400ms; animation-direction: alternate-reverse; background-color: #0E397F; } .load__bar–3 { animation-delay: 600ms; } .load__bar–3-inv { animation-delay: 600ms; animation-direction: alternate-reverse; background-color: #0E397F; } .load__bar–4 { animation-delay: 800ms; } .load__bar–4-inv { animation-delay: 800ms; animation-direction: alternate-reverse; background-color: #0E397F; } .load__bar–5 { animation-delay: 1000ms; } .load__bar–5-inv { animation-delay: 1000ms; animation-direction: alternate-reverse; background-color: #0E397F; }
- La propriété animation-play-state permet de mettre en pause ou de jouer des animations en utilisant respectivement les
mots clés « paused » ou « running »
```html
(HTML) (CSS)
<div class="container"> .spin {
<div class="spin"></div> background-color: #15DEA5;
</div> width: 30vh;
height: 30vh;
animation: spin 3s linear infinite paused; // on met paused pour
} qu'elle tourne pas à l'infini
.spin:hover {
animation-play-state: running; // comme on a mise pause il faut
} mettre :hover et running pour qu'
@keyframes spin { on sache quand elle démarre
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
- Cours openclassroom se finit en nous montrant comment marche Google Dev Tools pour les animations :)
Lundi 6 avril
PHP (OpenClassroom)
(Autodidact)
La Base *********
- Les instructions PHP sont placées dans une balise ouvrante et fermante : <?php ?>
- Pour afficher du texte en PHP, on utilise l’instructionecho. Ici ça nous affichera la date et l’heure d’aujourd’hui.
- Ex:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ma page web</title> </head> <body> <h1>Ma page web</h1> <p>Aujourd'hui nous sommes le <?php echo date('d/m/Y h:i:s'); ?>.</p> </body> </html>
-
On peut mettre des commentaires dans les balises php avec // ou /* */ et on doit mettre des “” pour les textes
```php <?php echo “J’habite en Chine.”; // Cette ligne indique où j’habite// La ligne suivante indique mon âge echo "J'ai 92 ans."; ?> // on remarquera que après les guillemets il y a un ; aka fin de l'instruction
> Notes
*********************
- Pour écrire des guillemets:
<?php echo "Cette ligne a été écrite \"uniquement\" en PHP."; ?>
> Là où ça bloque
*********************
* J'ai voulu suivre le tutos de OpenClassroom pour installer MAMP, il s'est avéré que je l'avais déjà installé y a 1 an sans
savoir ce que c'était parce que je voulais faire des modifications sur mon blog Wordpress.
* J'attends donc l'aide quelqu'un par partage d'écran et en attendant je continue le cours sur OpenClassroom. (Problème
résolu, il suffisait de cliquer sur démarrer... x)
* Maintenant je bloque sur où est mon fichier PHP stocké dans ma machine. C'est bon problème résolu: c'est pcq ils ont donné
un mauvais exemple! On peut mettre notre fichier roots où on veut et l'appeler comme on veut. Il suffit juste de Stop
servers puis de Start servers et normalement ils t'affichent une page direct de MAMP et il suffira de changer l'adresse:
http://localhost:8888/test/ le test est le nom de mon dossier que j'ai créer dans le dossier où j'ai mis mon PHP.
* Configuration PHP pour voir les erreurs : raccourci clavier avec cmd + F en même temps et check "display_errors = On"
& "error_reporting = E_ALL" souvent l'ordi le trouve 4 fois et il faut donc tous les check avant de trouver le bon (si ça
commence par ; au début de la ligne c'est que c'est pas le bon = commentaire), lorsqu'on rafraichit la page de localhost:
![OpenClassrooms aperçu] (https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/4238821-configurez-php-pour-visualiser-les-erreurs)
> Conclusion
*********************
J'ai pris plus de temps à savoir comment installer MAMP et à savoir comment relier mon fichier roots à PHP qu'à apprendre,
les joies du confinement x) mais ça avance petit à petit. J'ai décidé de faire un chapitre par jour (i.e. donc 1 chapitre
par jour pour toute la semaine)
## Mardi 7 avril
### PHP (OpenClassroom)
(Autodidact)
> Les variables
*********************
- Les variables sont capables de stocker **différents types d'informations. On parle de types de données.**
- Les chaînes de caractères **(string)** : le nom informatique qu'on donne au texte (aka chaîne de caractères).
- Les nombres entiers **(int)** : ce sont les nombres du type 1, -1 etc ...
Ex :
```php
<?php
$age_du_visiteur = 17;
?>
```
- Les nombres décimaux **(float)** : nombres à virgule, comme 14,738. Attention, les nombres doivent être écrits
avec un point au lieu de la virgule (c'est la notation anglaise).Exemple :14.738.
Ex :
```php
<?php
$poids = 57.3;
?>
```
- Les booléens **(bool)** : type très important qui permet de stocker soit vrai soit faux. (aka retenir si une information
est vraie ou fausse. On les utilise très fréquemment. On écrittruepour vrai, etfalsepour faux.
Ex :
<?php
$je_suis_un_zero = true;
$je_suis_bon_en_php = false;
?>
- Rien **(NULL)** : qu'une variable ne contient rien. Ce n'est pas vraiment un type de données, mais plutôt l'absence de type.
Ex :
<?php
$pas_de_valeur = NULL;
?>
- **Affecter une valeur à une variable**
1. D'abord, on écrit le symbole **« dollar » ($)** : il précède toujours le nom d'une variable. C'est comme un signe de
reconnaissance si vous préférez : ça permet de dire à PHP « J'utilise une variable ». Vous reconnaîtrez toujours qu'il y a
une variable par la présence du symbole « dollar » ($). Notes: le nom de la variable avec _ pour chaque espace du nom.
2. Ensuite, il y a le signe « égal » ** = **
3. À la suite, il y a la **valeur de la variable**, ici 17.
4. Enfin, il y a l'incontournable point-virgule **(;)** qui permet de terminer l'instruction
Ex:
```php
<?php
$age_du_visiteur = 17; // La variable est créée et vaut 17
$age_du_visiteur = 23; // La variable est modifiée et vaut 23
$age_du_visiteur = 55; // La variable est modifiée et vaut 55
?>```
- **Afficher et concaténer des variables**
Avec echo
Ex:
<?php
$age_du_visiteur = 17;
echo $age_du_visiteur;
?>
La concaténation
Ex :
```php
// pour écrire que le visiteur a 17 ans
<?php
$age_du_visiteur = 17;
echo "Le visiteur a ";
echo $age_du_visiteur;
echo " ans";
?>
// la même chose mais concaténer avec guillemets double
<?php
$age_du_visiteur = 17;
echo "Le visiteur a $age_du_visiteur ans";
?>
// la même chose mais concaténer avec guillemets simple
<?php <?php
$age_du_visiteur = 17; $age_du_visiteur = 17;
echo 'Le visiteur a $age_du_visiteur ans'; // Ne marche pas echo 'Le visiteur a ' . $age_du_visiteur . ' ans';
?> ?>
-
Faire des calculs simples Ex : ```php
<?php $nombre = 10; $resultat = ($nombre + 5) * $nombre; // $resultat prend la valeur 150 ?>Le modulo: le reste de la division entière. Par exemple, 6 / 3 = 2 et il n’y a pas de reste. En revanche, 7 / 3 = 2 (car le nombre 3 « rentre » 2 fois dans le nombre 7) et il reste 1. Le modulo permet justement de récupérer ce « reste ». Pour faire un calcul avec un modulo, on utilise le symbole%. Ex :
<?php $nombre = 10 % 5; // $nombre prend la valeur 0 car la division tombe juste $nombre = 10 % 3; // $nombre prend la valeur 1 car il reste 1 ?>
> Les conditions
*********************
1. Les symboles à connaître : il va d'abord falloir retenir quelques symboles qui permettent de faire des comparaisons. Soyez
attentifs car ils vous seront utiles pour les conditions.
== sert à tester l'égalité, à dire « Si c'est égal à… ». Dans les conditions, on utilisera toujours le double égal ==
Tout le reste comme d'hab = <= >= < > et != veut dire, est différent de
2. La structure if… else : ressemble beaucoup à JavaScript mais en moins compliqué ( ou peut-être pcq on l'a déjà vu).
Ex :
```php <?php
$autorisation_entrer = "Oui";
if ($autorisation_entrer == "Oui") // SI on a l'autorisation d'entrer
{
// instructions à exécuter quand on est autorisé à entrer
}
elseif ($autorisation_entrer == "Non") // SINON SI on n'a pas l'autorisation d'entrer
{
// instructions à exécuter quand on n'est pas autorisé à entrer
}
else // SINON (la variable ne contient ni Oui ni Non, on ne peut pas agir)
{
echo "Euh, je ne connais pas ton âge, tu peux me le rappeler s'il te plaît ?";
}
?>
- Si ca avait été des booléens, pas obligés d’ajouter le== true, PHP comprend très bien ce que vous avez voulu dire :
<?php $autorisation_entrer = true; if ($autorisation_entrer) { echo "Bienvenue petit nouveau. :o)"; } else { echo "T'as pas le droit d'entrer !"; } ?>Il y a un symbole qui permet de vérifier si la variable vautfalse : le point d’exclamation (!). On écrit :
<?php $autorisation_entrer = true; if (! $autorisation_entrer) { } ?>C’est une autre façon de faire. Si vous préférez mettreif ($autorisation_entrer == false)c’est tout aussi bien, mais la
méthode « courte » est plus lisible. -
Les conditions multiples
AND = Et = &&, ex:
<?php
$age = 8;
$langue = "anglais";
if ($age <= 12 AND $langue == "français")
{
echo "Bienvenue sur mon site !";
}
elseif ($age <= 12 AND $langue == "anglais")
{
echo "Welcome to my website!";
}
?>
OR = Ou = ||, ex:
<?php
$pays = "France";
if ($pays == "France" OR $pays == "Belgique")
{
echo "Bienvenue sur notre site !";
}
else
{
echo "Désolés, notre service n'est pas encore disponible dans votre pays !";
}
?>
- l’astuce bonus, remplacer echo par des accolades, ex:
<?php $variable = 23; if ($variable == 23) { echo '<strong>Bravo !</strong> Vous avez trouvé le nombre mystère !'; } ?> Les deux veulent dire la même chose sauf qu'avec les accolades plus de problemes de guillemets mais faut refermer. <?php $variable = 23; if ($variable == 23) { ?> <strong>Bravo !</strong> Vous avez trouvé le nombre mystère ! <?php } ?> - Dernier type de condition: switch, ex:
- Pour éviter ce genre de lourdeur
<?php $note = 16; if ($note == 0) { echo "Tu es vraiment un gros nul !!!"; } elseif ($note == 5) { echo "Tu es très mauvais"; } elseif ($note == 7) { echo "Tu es mauvais"; } elseif ($note == 10) { echo "Tu as pile poil la moyenne, c'est un peu juste…"; } elseif ($note == 12) { echo "Tu es assez bon"; } elseif ($note == 16) { echo "Tu te débrouilles très bien !"; } elseif ($note == 20) { echo "Excellent travail, c'est parfait !"; } else { echo "Désolé, je n'ai pas de message à afficher pour cette note"; } ?> - On écrirait comme ça:
<?php $note = 10; switch ($note) // on indique sur quelle variable on travaille { case 0: // dans le cas où $note vaut 0 echo "Tu es vraiment un gros nul !!!"; break; case 5: // dans le cas où $note vaut 5 echo "Tu es très mauvais"; break; case 7: // dans le cas où $note vaut 7 echo "Tu es mauvais"; break; case 10: // etc. etc. echo "Tu as pile poil la moyenne, c'est un peu juste…"; break; case 12: echo "Tu es assez bon"; break; case 16: echo "Tu te débrouilles très bien !"; break; case 20: echo "Excellent travail, c'est parfait !"; break; default: echo "Désolé, je n'ai pas de message à afficher pour cette note"; } ?>Avantage : on n’a plus besoin de mettre le double égal ! Défaut : ça ne marche pas avec les autres symboles (< > <= >= !=). En clair, leswitchne peut tester que l’égalité. Notes: En pratique, on utilise très souvent unbreakcar sinon, PHP lit des instructions qui suivent et qui ne conviennent pas. Pour une condition simple et courte, on utilise leif, et quand on a une série de conditions à analyser, on préfère utiliserswitchpour rendre le code plus clair.
- Les ternaires : des conditions condensées (pas très utiliser et difficile à lire mais au cas où)
- Un ternaire est une condition condensée qui fait deux choses sur une seule ligne : on teste la valeur d’une variable dans une condition ; on affecte une valeur à une variable selon que la condition est vraie ou non.
- Ex:
Au lieu d’écrire comme ça: On écrit comme ça:
<?php <?php
$age = 24; $age = 24;
if ($age >= 18) $majeur = ($age >= 18) ? true : false;
{ ?>
$majeur = true;
}
else
{
$majeur = false;
}
?>
Mercredi 8 avril
PHP (OpenClassroom)
(Autodidact)
Les boucles *********
Avec While, ex:
<?php
$nombre_de_lignes = 1; // initianilisation du nombre de ligne et commence à 1
while ($nombre_de_lignes <= 100)
{
echo 'Ceci est la ligne n°' . $nombre_de_lignes . '<br />';
$nombre_de_lignes++; // ça c'est pour la réitération du nombre de ligne +1 a chaque fois jusqu'a 100 donc
}
?>
Avec for, ex:
<?php
for ($nombre_de_lignes = 1; $nombre_de_lignes <= 100; $nombre_de_lignes++) // initialtn; condition; incrémnt
{
echo 'Ceci est la ligne n°' . $nombre_de_lignes . '<br />';
}
?>
Notes: Si vous hésitez entre les deux, il suffit simplement de vous poser la question suivante : « Est-ce que je sais d’avance combien de fois je veux que mes instructions soient répétées ? ». Si la réponse est oui, alors la boucleforest tout indiquée. Sinon, alors il vaut mieux utiliser la bouclewhile.
Les tableaux *********
- Les tableaux numérotés: c’est-à-dire que chaque case est identifiée par un numéro. Ce numéro est appelé clé. Ex:
<?php // La fonction array permet de créer un array $prenoms = array ('François', 'Michel', 'Nicole', 'Véronique', 'Benoît'); ?> ou peut s'écrire comme cela et voilà comment on écrirait pour afficher la valeur du tableau: <?php <?php $prenoms[0] = 'François'; echo $prenoms[1]; $prenoms[1] = 'Michel'; ?> $prenoms[2] = 'Nicole'; ?> - Les tableaux associatifs: au lieu de numéroter les cases, on va les étiqueter en leur donnant à chacune un nom diff. Ex:
<?php ou <?php // On crée notre array $coordonnees $coordonnees['prenom'] = 'François'; $coordonnees = array ( $coordonnees['nom'] = 'Dupont'; 'prenom' => 'François', $coordonnees['adresse'] = '3 Rue du Paradis'; 'nom' => 'Dupont', $coordonnees['ville'] = 'Marseille'; 'adresse' => '3 Rue du Paradis', ?> 'ville' => 'Marseille'); ?> et pour l'afficher: <?php echo $coordonnees['ville']; ?> - Parcourir un tableau avec:
- la bouclefor ;
<?php
// On crée notre array $prenoms
$prenoms = array ('François', 'Michel', 'Nicole', 'Véronique', 'Benoît');
// Puis on fait une boucle pour tout afficher :
for ($numero = 0; $numero < 5; $numero++)
{
echo $prenoms[$numero] . '<br />'; // affichera $prenoms[0], $prenoms[1] etc.
}
?>
- la boucleforeach ;
<?php $prenoms = array ('François', 'Michel', 'Nicole', 'Véronique', 'Benoît'); foreach($prenoms as $element) { echo $element . '<br />'; // affichera $prenoms[0], $prenoms[1] etc. } ?> et marche aussi pour les tableaux associatifs <?php $coordonnees = array ( 'prenom' => 'François', 'nom' => 'Dupont', 'adresse' => '3 Rue du Paradis', 'ville' => 'Marseille'); foreach($coordonnees as $cle => $element) { echo '[' . $cle . '] vaut ' . $element . '<br />'; } ?> - la fonctionprint_r(utilisée principalement pour le débogage): si vous n’avez pas besoin d’une mise en forme spéciale et que
vous voulez juste savoir ce que contient l’array. C’est une sorte deechospécialisé dans les arrays.
<?php $coordonnees = array ( 'prenom' => 'François', 'nom' => 'Dupont', 'adresse' => '3 Rue du Paradis', 'ville' => 'Marseille'); echo '<pre>'; print_r($coordonnees); echo '</pre>'; ?>
Notes: elle ne renvoie pas de code HTML comme
pour les retours à la ligne. Pour bien les voir, il faut donc utiliser la
balise HTML pre qui nous permet d’avoir un affichage plus correct.
- Rechercher dans un tableau:
-
array_key_exists: pour vérifier si une clé existe dans l’array ; ex:
En général: <?php array_key_exists(‘cle’, $array); ?>
<?php Et affichera sur la page : $coordonnees = array ( La clé "nom" se trouve dans les coordonnées! 'prenom' => 'François', 'nom' => 'Dupont', 'adresse' => '3 Rue du Paradis', 'ville' => 'Marseille'); if (array_key_exists('nom', $coordonnees)) { echo 'La clé "nom" se trouve dans les coordonnées !'; } if (array_key_exists('pays', $coordonnees)) { echo 'La clé "pays" se trouve dans les coordonnées !'; } ?> -
in_array : pour vérifier si une valeur existe dans l’array ;mais cette fois on recherche dans les valeurs.in_array renvoie true si la valeur se trouve dans l’array,falsesi elle ne s’y trouve pas.
<?php
$fruits = array ('Banane', 'Pomme', 'Poire', 'Cerise', 'Fraise', 'Framboise');
if (in_array('Myrtille', $fruits))
{
echo 'La valeur "Myrtille" se trouve dans les fruits !';
}
if (in_array('Cerise', $fruits))
{
echo 'La valeur "Cerise" se trouve dans les fruits !';
}
?>
Et ca affichera sur la page web : La valeur "Cerise" se trouve dans les fruits!
- array_search : pour récupérer la clé d’une valeur dans l’array.
<?php $fruits = array ('Banane', 'Pomme', 'Poire', 'Cerise', 'Fraise', 'Framboise'); $position = array_search('Fraise', $fruits); echo '"Fraise" se trouve en position ' . $position . '<br />'; $position = array_search('Banane', $fruits); echo '"Banane" se trouve en position ' . $position; ?>Et ca affichera sur la page web : "Fraise" se trouve en position 4 "Banane" se trouve en position 0
Les fonctions *********
Une fonction est une série d’instructions qui effectue des actions et qui retourne une valeur.
-
comment appelle-t-on une fonction ? Par son nom. Ex : calculCube();
-
mettre paramètre (un nombre, une chaîne de caractères, un booléen…), il faut l’écrire entre les () et si plusieurs paramétres à séparer avec des , Ex: fonctionImaginaire(17, ‘Vert’, true, 41.7);
-
Récupérer la valeur de retour de la fonction dans une variable, Ex: $volume = calculCube(4);
-
Les fonctions prêtes à l’emploi de PHP: c’est en partie là que réside la force de PHP : ses fonctions sont vraiment excellentes car elles couvrent la quasi-totalité de nos besoins avec ce site: https://www.php.net/manual/fr/funcref.php ex: ```php strlen: longueur d’une chaîne <?php $phrase = ‘Bonjour tout le monde ! Je suis une phrase !’; $longueur = strlen($phrase);
echo 'La phrase ci-dessous comporte ' . $longueur . ' caractères :<br />' . $phrase; ?>str_replace: rechercher et remplacer <?php $ma_variable = str_replace(‘b’, ‘p’, ‘bim bam boum’);
echo $ma_variable; ?>Récupérer la date
<?php // Enregistrons les informations de date dans des variables
$jour = date(‘d’); $mois = date(‘m’); $annee = date(‘Y’);
$heure = date(‘H’); $minute = date(‘i’);
// Maintenant on peut afficher ce qu’on a recueilli echo ‘Bonjour ! Nous sommes le ‘ . $jour . ‘/’ . $mois . ‘/’ . $annee . ‘et il est ‘ . $heure. ‘ h ‘ . $minute; ?>
> Les erreurs les plus courantes
*********************
**Parse error** ;
La plus basique, ex: Parse error: parse error in fichier.php on line 15
Souvent à cause de: ; - "" - } - trompé de concaténation
**Undefined function** ;
La fonction inconnue, ex: Fatal Error: Call to undefined function: fonction_inconnue() in fichier.php on line 27
soit la fonction n'existe vraiment pas. (i.e. faute de frappe ou orthographe)
soit la fonction existe vraiment, mais PHP ne la reconnaît pas : une extension de PHP que vous n'avez pas activée.
soit vous essayiez d'utiliser une fonction qui n'est pas disponible dans la version de PHP que vous avez
**Wrong parameter count**.
Si vous utilisez mal une fonction, ex: Warning: Wrong parameter count for fonction() in fichier.php on line 112
Cela signifie que vous avez oublié des paramètres pour la fonction, ou même que vous en avez trop mis.
Un peu moins courantes **Headers already sent by…**
ex: Cannot modify header information - headers already sent by ...
Ce que vous devez retenir, c'est que chacune de ces fonctions doit être utilisée au tout début de votre code PHP. Il ne faut
RIEN mettre avant, sinon ça provoquera l'erreur « Headers already sent by… »
**Maximum execution time exceeded**
> Inclure des portions de page
*********************
Si on a envie de mettre le header, menu et footer sur differentes pages et ne pas avoir a changer toutes les pages à
chaque fois qu'on change quelque chose dessus:
1. on converti toutes nos pages en .php
2. on copie colle la partie sur une nouvelle page en .php
3. à la place de la où on voudrait mettre la portion de page à dupliquer on met ce code :
<?php include("menus.php"); ?>
4. et voilà on répète l'action pour les autres (footer et header) et lorsqu'on veut changer quelque chose on le change direct
dans menu.php et les changements se feront d'eux-mêmes sur les autres pages.
> Coder proprement
*********************
Les standards à suivre en ce qui concerne l'écriture de code PHP. Ce consortium s'appelle le FIG (Framework Interop Group) et
a surtout été créé pour faire en sorte que l'ensemble des frameworks PHP respectent des règles communes. Avec les liens :
- https://www.php-fig.org/psr/
- https://www.php-fig.org/psr/psr-1/ : la base
- https://www.php-fig.org/psr/psr-2/ : le style
## Jeudi 9 avril
### PHP (OpenClassroom)
(Autodidact)
> Envoyer & récupérer des paramètres en PHP dans l'URL
*********************
Tu créer 2 pages .php, dans la première, tu marques :
<a href="bonjour.php?nom=THAY&prenom=Laura">Dis-moi bonjour !</a>
Dans la 2ème que tu as renommé bonjour.php, tu écris :
<p>Bonjour <?php echo $_GET['prenom'] . ' ' . $_GET['nom']; ?> !</p>
> Ne faites jamais confiance aux données reçues !
*********************
Issets pour confirmer que la réponse est valable, ici on teste si les variables$_GET['prenom']et$_GET['nom']existent.:
```php
<?php
if (isset($_GET['prenom']) AND isset($_GET['nom'])) // On a le nom et le prénom
{
echo 'Bonjour ' . $_GET['prenom'] . ' ' . $_GET['nom'] . ' !';
}
else // si il manque des paramètres, on avertit le visiteur
{
echo 'Il faut renseigner un nom et un prénom !';
}
?>
Contrôler la valeur des paramètres si on modifie dans l’URL : bonjour.php?nom=Thay&prenom=Laura&repeter=8
- On teste si le paramètre repeter existe lui aussi (avec isset($_GET[‘repeter’])). Si tous les paramètres sont bien là, on
fait une boucle (for mais while marche aussi). La boucle incrémente une petite variable $i pour répéter le message de bienvenue le nombre de fois indiqué.
<?php
if (isset($_GET['prenom']) AND isset($_GET['nom']) AND isset($_GET['repeter']))
{
for ($i = 0 ; $i < $_GET['repeter'] ; $i++)
{
echo 'Bonjour ' . $_GET['prenom'] . ' ' . $_GET['nom'] . ' !<br />';
}
}
else
{
echo 'Il faut renseigner un nom, un prénom et un nombre de répétitions !';
}
?>
-
Pour éviter les cas suivants: Le cas où le nombre qu’on vous envoie n’est pas une valeur raisonnable (répéter *100) ni logique (texte à la place de chiffre) Il faut donc vérifier que repeter contient bien un nombre & est compris dans un intervalle raisonnable (entre 1 et 100) = transtypage ```php
<?php $_GET[‘repeter’] = (int) $_GET[‘repeter’]; ?><?php if (isset($_GET['prenom']) AND isset($_GET['nom']) AND isset($_GET['repeter'])) { // 1 : On force la conversion en nombre entier $_GET['repeter'] = (int) $_GET['repeter']; // 2 : Le nombre doit être compris entre 1 et 100 if ($_GET['repeter'] >= 1 AND $_GET['repeter'] <= 100) { for ($i = 0 ; $i < $_GET['repeter'] ; $i++) { echo 'Bonjour ' . $_GET['prenom'] . ' ' . $_GET['nom'] . ' !<br />'; } } } else { echo 'Il faut renseigner un nom, un prénom et un nombre de répétitions !'; } ?>
> Transmettez des données avec les formulaires
*********************
Dans la balise form on applique:
- la méthode (method):
Au lieu de GET on prendra POST (pas de transistions de données dans l'url et possibilité +256 caractères + puissant+ commun)
Ex: method="POST"
- la cible (action):
Sert à définir la page appelée par le formulaire
Ex: action="cible.php"
Dans la page du formulaire: Et l'autre page cible.php:
<form action="cible.php" method="post"> <p>Je sais comment tu t'appelles, hé hé.
<p> Tu t'appelles <?php echo $_POST['prenom']; ?> !</p>
<input type="text" name="prenom" /> <p>Si tu veux changer de prénom, <a href="formulaire.php">
<input type="submit" value="Valider" /> clique ici</a> pour revenir à la page formulaire.php.</p>
</p> pour revenir à la page formulaire.php.
<p>Bonjour !</p> </p>
Rappel de HTML : le champ<input type="submit" />permet de créer le bouton de validation du formulaire qui commande l'envoi des
données, et donc la redirection du visiteur vers la page cible.
Si on a une liste déroulante :
<select name="choix"> $_POST['choix']
<option value="choix1">Choix 1</option>
<option value="choix2">Choix 2</option>
<option value="choix3">Choix 3</option>
<option value="choix4">Choix 4</option>
</select>
Si on a des cases à cocher:
<input type="checkbox" name="case" id="case" /> <label for="case">Ma case à cocher</label>
isset($_POST['case']) //pour vérifier si la case a cocher est validé ou non
Label n'est pas obligatoire mais permet d'associer le libellé à la case à cocher qui a le mêmeidque son attributfor, ce qui
permet de cliquer sur le libellé pour cocher la case. On y gagne donc en ergonomie.
Et si tu veux que la case sois coché par défaut:
<input type="checkbox" name="case" checked="checked" />
Si on a des cases à cocher multiple:
Aimez-vous les frites ?
<input type="radio" name="frites" value="oui" id="oui" checked="checked" /> <label for="oui">Oui</label>
<input type="radio" name="frites" value="non" id="non" /> <label for="non">Non</label>
Dans la page cible, une variable$_POST['frites']sera créée. Elle aura la valeur du bouton d'option choisi par le visiteur,
issue de l'attribut value. Si on aime les frites, alors on aura$_POST['frites'] = 'oui'// bien renseigner value!
Pour éviter les failles XSS: htmlspecialchars
<p>Je sais comment tu t'appelles, hé hé. Tu t'appelles <?php echo htmlspecialchars($_POST['prenom']); ?> !</p>
Il faut penser à utiliser cette fonction sur tous les textes envoyés par l'utilisateur qui sont susceptibles d'être affichés
sur une page web. Sur un forum par exemple, il faut penser à échapper les messages postés par vos membres, mais aussi leurs
pseudos (ils peuvent s'amuser à y mettre du HTML !) ainsi que leurs signatures. Bref, tout ce qui est affiché et qui vient à
la base d'un visiteur, vous devez penser à le protéger avechtmlspecialchars.
L'envoi de fichiers (++ difficile)
********************************
L'attribut enctype="multipart/form-data": le navigateur du visiteur sait qu'il s'apprête à envoyer des fichiers
```php
<form action="cible_envoi.php" method="post" enctype="multipart/form-data">
<p>
Formulaire d'envoi de fichier :<br />
<input type="file" name="monfichier" /><br /> //input type="file" permet envoyer un fichier
<input type="submit" value="Envoyer le fichier" />
</p>
</form>
Maintenant que le fichier est envoyé au serveur PHP il est stocké momentannement et c’est à nous de déterminer si on le valide ou pas. (si c’est la bonne taille, type de document) L’on validera grâce à move_uploaded_file ,comment savoir if ok?
(récapitulatif)
Variable
Signification
$_FILES[‘monfichier’][‘name’]
Contient le nom du fichier envoyé par le visiteur.
$_FILES[‘monfichier’][‘type’]
Indique le type du fichier envoyé. Si c'est une image gif par exemple, le type seraimage/gif.
$_FILES[‘monfichier’][‘size’]
Indique la taille du fichier envoyé. Attention :
cette taille est en octets. Il faut environ 1 000 octets
pour faire 1 Ko, et 1 000 000 d'octets pour faire 1 Mo.
Attention : la taille de l'envoi est limitée par PHP.
Par défaut, impossible d'uploader des fichiers de plus de 8 Mo.
$_FILES[‘monfichier’][‘tmp_name’]
Juste après l'envoi, le fichier est placé dans un répertoire temporaire sur le
serveur en attendant que votre script PHP décide si oui ou non il accepte de
le stocker pour de bon. Cette variable contient l'emplacement temporaire
du fichier (c'est PHP qui gère ça).
$_FILES[‘monfichier’][‘error’]
Contient un code d'erreur permettant de savoir si l'envoi s'est bien effectué ou s'il
y a eu un problème et si oui, lequel. La variable vaut 0 s'il n'y a pas eu d'erreur.
1.Vérifier tout d’abord si le visiteur a bien envoyé un fichier (en testant la variable$_FILES[‘monfichier’]avecisset()) et s’il n’y a pas eu d’erreur d’envoi (grâce à$_FILES[‘monfichier’][‘error’]).
<?php
// Testons si le fichier a bien été envoyé et s'il n'y a pas d'erreur
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
}
?>
2.Vérifier si la taille du fichier ne dépasse pas 1 Mo par exemple (environ 1 000 000 d’octets) grâce à$_FILES[‘monfichier’] [‘size’].
<?php
// Testons si le fichier a bien été envoyé et s'il n'y a pas d'erreur
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
// Testons si le fichier n'est pas trop gros
if ($_FILES['monfichier']['size'] <= 1000000)
{
}
}
?>
3.Vérifier si l’extension du fichier est autorisée (il faut interdire à tout prix que les gens puissent envoyer des fichiers PHP, sinon ils pourraient exécuter des scripts sur votre serveur). Dans notre cas, nous autoriserons seulement les images (fichiers .png, .jpg, .jpeg et .gif).
<?php
$infosfichier = pathinfo($_FILES['monfichier']['name']);
$extension_upload = $infosfichier['extension'];
?>
Ce qui nous donne au total:
<?php
// Testons si le fichier a bien été envoyé et s'il n'y a pas d'erreur
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
// Testons si le fichier n'est pas trop gros
if ($_FILES['monfichier']['size'] <= 1000000)
{
// Testons si l'extension est autorisée
$infosfichier = pathinfo($_FILES['monfichier']['name']);
$extension_upload = $infosfichier['extension'];
$extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
if (in_array($extension_upload, $extensions_autorisees))
{
}
}
}
?>
- Valider l’upload du fichier Si tout est bon, on accepte le fichier en appelant move_uploaded_file(). Cette fonction prend deux paramètres :
le nom temporaire du fichier (on l’a avec$_FILES[‘monfichier’][‘tmp_name’]) ; le chemin qui est le nom sous lequel sera stocké le fichier de façon définitive. On peut utiliser le nom d’origine du fichier$_FILES[‘monfichier’][‘name’]ou générer un nom au hasard.
Je propose de placer le fichier dans un sous-dossier « uploads ». On gardera le même nom de fichier que celui d’origine. Comme$_FILES[‘monfichier’][‘name’]contient le chemin entier vers le fichier d’origine (C:\dossier\fichier.pngpar exemple), il nous faudra extraire le nom du fichier. On peut utiliser pour cela la fonction basename qui renverra juste « fichier.png ».
<?php
// Testons si le fichier a bien été envoyé et s'il n'y a pas d'erreur
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
// Testons si le fichier n'est pas trop gros
if ($_FILES['monfichier']['size'] <= 1000000)
{
// Testons si l'extension est autorisée
$infosfichier = pathinfo($_FILES['monfichier']['name']);
$extension_upload = $infosfichier['extension'];
$extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
if (in_array($extension_upload, $extensions_autorisees))
{
// On peut valider le fichier et le stocker définitivement
move_uploaded_file($_FILES['monfichier']['tmp_name'], 'uploads/' . basename($_FILES['monfichier']['name']));
echo "L'envoi a bien été effectué !";
}
}
}
?>
Vendredi 10 avril
PHP (OpenClassroom)
(Autodidact)
TP
*********
Objectif:
- afficher du texte avec echo ;
- utiliser les variables (affectation, affichage…) ;
- transmettre des variables via une zone de texte d’un formulaire ;
- utiliser des conditions simples (if,else).
Scénario : Mettre en ligne une page web pour donner des informations confidentielles à certaines personnes. Cependant, pour limiter l’accès à cette page, il faudra connaître un mot de passe.Dans notre cas, les données confidentielles seront les codes d’accès au serveur central de la NASA (soyons fous !). Le mot de passe pour pouvoir visualiser les codes d’accès sera kangourou. Sauriez-vous réaliser une page qui n’affiche ces codes secrets que si l’on a rentré le bon mot de passe ?
Etapes: Créer 2 pages .Php, l’une pour le client qui entre le mdp et l’autre pour recevoir l’input que le client a mis.
Dans le 1er:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page protégée par mot de passe</title>
</head>
<body>
<p>Veuillez entrer le mot de passe pour obtenir les codes d'accès au serveur central de la NASA :</p>
<form action="secret.php" method="post">
<p>
<input type="password" name="mot_de_passe" />
<input type="submit" value="Valider" />
</p>
</form>
<p>Cette page est réservée au personnel de la NASA. Si vous ne travaillez pas à la NASA, inutile d'insister vous ne trouverez jamais le mot de passe ! ;-)</p>
</body>
</html>
Dans le 2eme:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Codes d'accès au serveur central de la NASA</title>
</head>
<body>
<?php
if (isset($_POST['mot_de_passe']) AND $_POST['mot_de_passe'] == "kangourou") // Si le mot de passe est bon
{
// On affiche les codes
?>
<h1>Voici les codes d'accès :</h1>
<p><strong>CRD5-GTFT-CK65-JOPM-V29N-24G1-HH28-LLFV</strong></p>
<p>
Cette page est réservée au personnel de la NASA. N'oubliez pas de la visiter régulièrement car les codes d'accès sont changés toutes les semaines.<br />
La NASA vous remercie de votre visite.
</p>
<?php
}
else // Sinon, on affiche un message d'erreur
{
echo '<p>Mot de passe incorrect</p>';
}
?>
</body>
</html>
Possibilité de réaliser ce TP en une seule page:
- sur la pageformulaire.php, s’appelle lui-même. En clair, l’attributactiondu formulaire seraitaction=”formulaire.php”.
- Il faut construire le code de votre pageformulaire.phpen deux grandes parties :
si aucun mot de passe n’a été envoyé (ou s’il est faux) : afficher le formulaire ;
si le mot de passe a été envoyé et qu’il est bon : afficher les codes secrets.
<?php // Le mot de passe n'a pas été envoyé ou n'est pas bon if (!isset($_POST['mot_de_passe']) OR $_POST['mot_de_passe'] != "kangourou") { // Afficher le formulaire de saisie du mot de passe } // Le mot de passe a été envoyé et il est bon else { // Afficher les codes secrets } ?>
Variables superglobales *********
Des variables un peu particulières pour trois raisons :
- écrites en majuscules et commencent toutes, à une exception près, par un underscore ex: (_).$_GETet$_POST;
- ce sont des array car elles contiennent généralement de nombreuses informations ;
- ces variables sont automatiquement créées par PHP à chaque fois qu’une page est chargée. Elles existent donc sur toutes les pages et sont accessibles partout : au milieu de votre code, au début, dans les fonctions, etc.
Afficher le contenu d’une superglobal, on utilise print_r pcq c’est une array:
<pre>
<?php
print_r($_GET);
?>
Les principales variables superglobales existantes:
$_SERVER : ce sont des valeurs renvoyées par le serveur. Elles sont nombreuses et quelques-unes d’entre elles peuvent nous être d’une grande utilité. Je vous propose de retenir au moins$_SERVER[‘REMOTE_ADDR’]. Elle nous donne l’adresse IP du client qui a demandé à voir la page, ce qui peut être utile pour l’identifier.
$_ENV : ce sont des variables d’environnement toujours données par le serveur. C’est le plus souvent sous des serveurs Linux que l’on retrouve des informations dans cette superglobale. Généralement, on ne trouvera rien de bien utile là-dedans pour notre site web.
$_SESSION : on y retrouve les variables de session. Ce sont des variables qui restent stockées sur le serveur le temps de la présence d’un visiteur. Nous allons apprendre à nous en servir dans ce chapitre.
$_COOKIE : contient les valeurs des cookies enregistrés sur l’ordinateur du visiteur. Cela nous permet de stocker des informations sur l’ordinateur du visiteur pendant plusieurs mois, pour se souvenir de son nom par exemple.
$_GET : vous la connaissez, elle contient les données envoyées en paramètres dans l’URL.
$_POST : de même, c’est une variable que vous connaissez et qui contient les informations qui viennent d’être envoyées par un formulaire.
$_FILES : elle contient la liste des fichiers qui ont été envoyés via le formulaire précédent.
Session & Cookies *********
Session (fonctionnement)
- Un visiteur arrive sur votre site. On demande à créer une session pour lui. PHP génère alors un numéro unique. Ex: a02bbffc6198e6e0cc2715047bc3766f. (i.e. sert d’identifiant et est appelé « ID de session » (ou PHPSESSID ). PHP transmet automatiquement cet ID de page en page en utilisant généralement un cookie.)
- Une fois la session générée, on peut créer une infinité de variables de session pour nos besoins.
Ex: $_SESSION[‘nom’] ou $_SESSION[‘prenom’]
Le serveur conserve ces variables même lorsque la page PHP a fini d’être générée. Cela veut dire que, quelle que soit la
page de votre site, vous pourrez récupérer par exemple le nom et le prénom du visiteur via la superglobale $_SESSION ! -
Lorsque le visiteur se déconnecte de votre site, la session est fermée et PHP « oublie » alors toutes les variables de session que vous avez créées. Il est en fait difficile de savoir précisément quand un visiteur quitte votre site. Le plus souvent, le visiteur est déconnecté par un timeout.
A retenir : session_start(): appeler cette fonction au tout début de chacune des pages où vous avez besoin des variables de session. session_destroy(): automatiquement appelée lorsque le visiteur ne charge plus de page de votre site > timeout, possibilité créer une page « Déconnexion » si le visiteur souhaite se déconnecter manuellement.
Ex :
<?php
// On démarre la session AVANT d'écrire du code HTML
session_start();
// On s'amuse à créer quelques variables de session dans $_SESSION
$_SESSION['prenom'] = 'Jean';
$_SESSION['nom'] = 'Dupont';
$_SESSION['age'] = 24;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
</head>
<body>
<p>
Salut <?php echo $_SESSION['prenom']; ?> !<br />
Tu es à l'accueil de mon site (index.php). Tu veux aller sur une autre page ?
</p>
<p>
<a href="mapage.php">Lien vers mapage.php</a><br />
<a href="monscript.php">Lien vers monscript.php</a><br />
<a href="informations.php">Lien vers informations.php</a>
</p>
</body>
</html>
dans lautre page :
<?php
session_start(); // On démarre la session AVANT toute chose
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
</head>
<body>
<p>Re-bonjour !</p>
<p>
Je me souviens de toi ! Tu t'appelles <?php echo $_SESSION['prenom'] . ' ' . $_SESSION['nom']; ?> !<br />
Et ton âge hummm... Tu as <?php echo $_SESSION['age']; ?> ans, c'est ça ? :-D
</p>
</body>
</html>
L’utilité des sessions en pratique
Enregistrer les infos de l’authentification (id et mdp) et les mettre partout sur toutes les pages du site ! Ex: Panier.
Cookies (fonctionnement) Les cookies sont donc des informations temporaires que l’on stocke sur l’ordinateur des visiteurs. La taille est limitée à quelques kilo-octets : vous ne pouvez pas stocker beaucoup d’informations à la fois, mais c’est en général suffisant. Comment l’écrire : <?php setcookie(‘pseudo’, ‘M@teo21’, time() + 365243600); ?> // nom, valeur et timestamp
Sécuriser son cookie avec le mode httpOnly réduire drastiquement les risques de faille XSS sur votre site, ex:
<?php setcookie('pseudo', 'M@teo21', time() + 365*24*3600, null, null, false, true); ?>
Créer le cookie avant d’écrire du HTML
<?php
setcookie('pseudo', 'M@teo21', time() + 365*24*3600, null, null, false, true); // On écrit un cookie
setcookie('pays', 'France', time() + 365*24*3600, null, null, false, true); // On écrit un autre cookie...
// Et SEULEMENT MAINTENANT, on peut commencer à écrire du code html
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma super page PHP</title>
</head>
<body>
etc.
Afficher un cookie
<p>
Hé ! Je me souviens de toi !<br />
Tu t'appelles <?php echo $_COOKIE['pseudo']; ?> et tu viens de <?php echo $_COOKIE['pays']; ?> c'est bien ça ?
</p>
Modifier un cookie existant Ex, si maintenant j’habite en Chine voila ce que je ferai:
<?php setcookie('pays', 'Chine', time() + 365*24*3600, null, null, false, true); ?>
Lire et écrire dans un fichier *********
Autoriser Il faut en effet donner le droit à PHP de créer et modifier les fichiers, CHMOD est un nombre à trois chiffres que l’on attribue à un fichier, 777 pour donner la peremission a PHP de créer/modifier des fichiers par lui-même
Ouvrir/Fermer La fonctionfopenpermet d’ouvrir le fichier,fgetsde le lire ligne par ligne etfputsd’y écrire une ligne.
Modifier/Ecrire À moins de stocker des données très simples, l’utilisation des fichiers n’est pas vraiment la technique la plus adaptée pour enregistrer des informations. Il est vivement recommandé de faire appel à une base de données.
Samedi et Dimanche 11 et 12 avril
Projet (App)
(Pages statut)
- Des amis m’ont filé une maquette à faire, pour une app qui te donne un lieu selon ce que tu désires/aimes/veux faire.
- Le plus gros dilemme au début était de le faire en responsive mobile first je commencais à m’embrouiller avec les differentes taille d’iphone. Et le fait aussi qu’ils voulaient des checkbox et non des button du coup il fallait trouver un moyen de ne pas afficher les cases a check mais j’ai fini par trouver un site qui en faisait une démo. Du coup là j’ai fait toutes les pages de la surface, il me reste plus qu’a ajouter du JS pour pouvoir faire des animations du style, quand on appuie sur le bouton infos ca affiche le texte en dessous de chaque catégorie correspondante.
Lundi 13 avril
Projet (App)
(Autodidact)
Objectifs *********
- Finir l’ensemble des pages de la maquette
-
Commencer les parties:
CSS-animation faire slider de bas en haut le titre p. index
JavaScript pour afficher lorsque l’on appuie sur le bouton infos, des textes en dessous de chaque catégorie apparaissent
- Reprendre et finir les pages de cours de PHP&MySQL (OC), les cours angular et react.JS (ENI) et essayer python.
Mardi 14 avril
Self-development
(Autodidact)
AI & Machine Learning visioconference *********
Joe Baguley, Vice President and Chief Technology Officer at VMware, as he talks to Jobteaser students about the future of tech and the important part AI, Machine Learning will play for humanity.
Machine learning is teaching a machine how humans work : teaching AI. Ex: Tesla is educating their cars to be autonomous. Not just data learning. AI is more like Alexa or Hey Google.
ML right now, why?
- so much data
- better computin infrastructure
- deep learning : better models and learning algorithms
- numerous framworks that aim to make ML easy
ML & AI will redefined the jobs we have not steal them. Change it so we can have more leisure/time than before.
Projet (CSS) *********
Syntaxe pour sélectionner le premier enfant label dans une div:
(CSS)
.petit-container label:first-of-type{ //et non pas first of child
padding-left: 3em;
margin-left: 5em;
padding-right: 3em;
}
(HTML)
<div class="petit-container">
<input id="toggle1" type="checkbox">
<label for="toggle1"> GO </label>
<input id="toggle2" type="checkbox">
<label for="toggle2"> WEBSITE </label>
</div>
Mercredi 15 avril
Projet (App)
(Autodidact)
- visio-cours ce matin avec Laïla sur le client/serveur (que j’avais déjà compris en lisant les cours OC mais la partie où elle nous a montré ses extensions Chrome pour catalyser son quotidien c’était pratique. La seamine pro, elle nous montrera comment mettre une API instagram :D j’ai hate.
CSS Animation ********* Alors j’ai un peu fouillé mes cours OC que j’avais stocké ici, pour pouvoir faire l’animation demander de la maquette app. Au début j’ai demandé sur le slack par quoi commencer, on m’a dit :active, j’ai essayé mais c’est pas tout à fait l’effet que je voulais pcq je n’arrivais pas à changer sa position Y tant que ça. Finalement j’ai fini par taper CSS animation generator et je suis tombée sur cette pépite:
https://www.theappguruz.com/tag-tools/web/CSSAnimations/
Comme ça y a juste à changer les points qui nous intéressent.
Jeudi 16 avril
Projet (App)
(Autodidact)
Javascript *********
Il me reste à afficher les textes infos lorsque l’on clique sur le bouton infos, que j’ai réussi pour la page with mais du coup il reste les 4 autres pages, quelque chose a péter quand j’ai changé le nom du bouton infos… J’ai un peu galéré ce matin à trouver le bon code JS, comme j’ai mes reflexes avec CSS: chercher sur internet si y a pas déjà un modèl que je pourrai refaire à ma sauce mais non. Du coup j’ai demandé de l’aide sur Slack et Leila m’a corriger ma réponse ce qui a donner:
(JS)
document.querySelector('.bouton-afficher').addEventListener('click', function(){
var paragraphes = document.querySelectorAll("p.infos-description");
paragraphes.forEach((p) => {
p.style.display = "block";
});
});
(CSS)
.bouton-afficher{
border: none;
color:inherit;
padding: 0px 0px;
}
.infos-description{
margin-left: 11em;
margin-top: -1em;
font-size: 0.5em;
display:none;
}
(HTML)
<input id="toggle1" type="checkbox" checked>
<label for="toggle1"> solo </label>
<p class="infos-description">< short description on i tap ></p>
<input id="toggle2" type="checkbox">
<label for="toggle2"> date </label>
<p class="infos-description">< short description on i tap ></p>
<input id="toggle3" type="checkbox">
<label for="toggle3"> duo </label>
<p class="infos-description">< short description on i tap ></p>
<input id="toggle4" type="checkbox">
<label for="toggle4"> group </label>
<p class="infos-description">< short description on i tap ></p>
AAAAHHH CA Y EST !! J’ai enfin fini de faire debugg mon app … A force de changer de nom de div ca finit par peter dans tous les sens, merci mon canard (j’ai pris l’habitude mainteannt a chaque fois que je voulais faire une nouvelle feature de le faire sur essaie sur un autre fichier puis de le copier coller une fois que ca marchait pcq on finit vite par s’y perdre et ne plus savoir a quoi ressemblait le code de base), petit mode d’emploi:
- check les noms
- check si les fichiers sont bien connecté js et css
- check l’indentation
Vendredi 17 avril
Projet (App)
(Autodidact)
Résultats *********
Jusqu’à maintenant, j’ai fait fini toutes les pages demandés de la maquette avec comme principales difficultés:
- faire des checkbox en input sans la forme cocher dégueu et stylisé le tout comme la maquette (merci google): DONE
- faire l’animation du début lors que le titre slide vers le haut et le reste du text apparait avec keyframes : DONE
- faire du javascript et lorsque l’on clique sur le bouton infos, les textes en desosus de chaque catégorie apparait :DONE
- dernier probleme: faire en sorte que les pages sois interconnecté avec les liens a mais je viens d’apprendre qu’on ne peut tu ne peux pas avoir un élément intéractif dans un autre élément intéractifs donc tu n’as pas le droit d’avoir un input dans un lien
Lundi 20 avril
Projet (App)
(Autodidact)
Finitions *********
Il ne reste plus qu’à fini la maquette avec exactements les mêmes mesures ce qui me donne extrêmement mal aux yeux … En plus en mobile first on voit rien!! Quel horreur …
Objectif de la semaine *********
- Faire 30 min du test de Souad tout les jours
- Finir le cours OC sur PHP
- Commencer le cours Angular de ENI et React.js de freeCodeCamp
- Finir mon projet perso
Mardi 21 avril
Loading
(Mood)
Temps mort *********
Pas trop d’avancé ces derniers 4 jours, j’essaie de me motiver à replonger dans les cours maintenant que j’ai fini l’app sans trop de succès. Aujourd’hui je me suis juste concentrer sur mes cours de chinois et j’ai fait un peu de Pix mais ce site m’irrite au possible, tellement pas intéressant ni ludique. Et dire qu’il y a une certification sur ca. Par contre changer de style les jounaux et mes sites web perso pas de soucis (ça détend)
Mercrei 22 avril
Leila
(Visioconf)
API Insta *********
Alors ce matin Leila nous a fait un petite démo très instructive sur comment faire une API insta, très heureuse de voir qu’elle prenait autant de temps à le faire malgré que ce sois une développeuse expérimenté, ça m’a rassuré, moi qui passait mon temps à regarder des tutos API insta mais sachant qu’ils ont des mesures de sécurité assez élevé, c’est juste plus rassurant de voir quelqu’un le faire et voici donc le petit bout de code pour afficher l’API insta :
Notes: le plus dur étant d’avoir le token (qui ne dure qu’1h) mais bon du coup on a revu fetch et le JS asynchrone
fetch('https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type,permalink&access_token= codeTOKEN')
.then((response) => {
return response.json();
})
.then((response_json) =>{
var medias = response_json.data;
var feed_container = document.getElementById('feed');
medias.forEach((media) => {
var image = document.createElement('img');
image.src = media.media_url;
feed_container.appendChild(image);
});
console.log(response_json);
});
OpenClassRoom
(PHP & SQL)
Base de donnée SQL ******* **Vocabulaire Une base de données = outil qui stocke données organisée et permet de les retrouver facilement par la suite. On communique avec MySQL grâce au langage SQL. Ce langage est commun à tous les systèmes de gestion de base de données (avec quelques petites différences néanmoins pour certaines fonctionnalités plus avancées). PHP fait l’intermédiaire entre vous et MySQL./ Une base de données contient plusieurs tables. Chaque table est un tableau où les colonnes = « champs » et les lignes « entrées ».
phpMyAdmin ********* Un outil qui nous permet de visualiser l’état de notre base de données ainsi que de la modifier, sans avoir à écrire de requêtes SQL.
On crée généralement un champ nommé id qui sert à numéroter les entrées d’une table. Ce champ doit avoir un index PRIMARY (on dit qu’on crée une clé primaire) et l’option AUTO_INCREMENT qui permet de laisser MySQL gérer la numérotation.
phpMyAdmin possède un outil d’importation et d’exportation des tables qui nous permettra notamment d’envoyer notre base de données sur Internet lorsque nous mettrons notre site en ligne.
Créer/modifier/supprimer/filtrer visuellement des tables, accéder plus facilement a la base de données Champ : permet de définir le nom du champ (très important !) ; Type : le type de données que va stocker le champ (nombre entier, texte, date…) ; Taille/Valeurs : permet d’indiquer la taille maximale du champ, utile pour le typeVARCHARnotamment, afin de limiter le nombre de caractères autorisés ; Index : active l’indexation du champ. Ce mot barbare signifie dans les grandes lignes que votre champ sera adapté aux recherches. Le plus souvent, on utilise l’indexPRIMARYsur les champs de typeid ; AUTO_INCREMENT : permet au champ de s’incrémenter tout seul à chaque nouvelle entrée. On l’utilise fréquemment sur les champs de typeid. VARCHAR : texte court (max 255 caractères) ;
La clé primaire permet d’identifier de manière unique une entrée dans la table. Souvent ID.
FreeCodeCamp
(Python)
Intro ******* Python is known for its clean **syntax. The print() method will display something. Ex:
print('First command') print('Second command')
Output:
First command
Second command // pas besoin de ; un retour a la ligne suffit
Indentation ********* Be aware of white spaces at the beginning of each line – they have meaning and might break your code if misplaced.
def my_function(): print('First command')
NON :
def my_function():
print('First command')
Python is case sensitive. So the variables name and Name are not the same thing and store different values.
name = 'Renan'
Name = 'Moura' = This means name stores 'Renan' and Name stores 'Moura'.
Comments #
Objective achieved
- API insta (3h), Pix(30min), OC(1h), FreeCamp (1h30)
Jeudi 23 avril
OpenClassRoom
(PHP & SQL)
Lire des données
********* Pour dialoguer avec MySQL depuis PHP, ex:
<?php
$bdd = new PDO ('mysql:host=localhost;dbname=test', 'root', 'root', array (PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$reponse = $bdd->query('SELECT console, nom, prix FROM jeux_video WHERE console="NES" OR console="PC" ORDER BY prix DESC');
while ($donnees = $reponse->fetch())
{
echo'<p>' . $donnees['console']. '-' . $donnees['nom'] . '-' . $donnees['prix'] . ' euros</p>';
}
?>
- on fait appel à l’extension PDO de PHP: Avant de dialoguer avec MySQL, il faut s’y connecter. On a besoin de l’adresse IP de la machine où se trouve MySQL, du nom base de données/ du login et d’un mot de passe.
- Les requêtes SQL commençant par SELECT permettent de récupérer des informations dans une base de données.
- Il faut faire une boucle en PHP pour récupérer ligne par ligne les données renvoyées par MySQL.
- Retenir les mots clés: WHERE(filtre),ORDER BY(tri) etLIMIT(limitation du nombre de résultats).
- Faire attention à lordre: d’abord on selectionne des champs précis ensuite on dit dans quel table, ensuite on dit si on veut filtrer, ensuite on trie et enfin si on a besoin on limite.
Pour que la requete change en fonction de la variable qu’on lui envoie, essayons de construire une page capable de lister les jeux appartenant à une personne et dont le prix ne dépasse pas une certaine somme, ex:
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
$req = $bdd->prepare('SELECT nom, prix FROM jeux_video WHERE possesseur = ? AND prix <= ? ORDER BY prix');
$req->execute(array($_GET['possesseur'], $_GET['prix_max']));
echo '<ul>';
while ($donnees = $req->fetch())
{
echo '<li>' . $donnees['nom'] . ' (' . $donnees['prix'] . ' EUR)</li>';
}
echo '</ul>';
$req->closeCursor();
?>
Objective achieved
- Pix(30min), OC(1h)
Vendredi 24 avril
OpenClassRoom
(PHP & SQL)
Ecrire des données
*********
INSERT INTO : ajout d’une entrée ;
UPDATE : modification d’une ou plusieurs entrées ;
DELETE : suppression d’une ou plusieurs entrées.
Comme pour la sélection de données, on utilise les requêtes préparées pour personnaliser nos requêtes en fonction de variables.
Lorsqu’on utilise UPDATE ou DELETE, penser à filtrer avec un WHERE sinon toute la table sera affectée par l’opération !
PHP indique si une erreur avec MySQL est intervenue.
Les fonctions SQL (phpMyAdmin) *********
MySQL permet d’exécuter certaines fonctions lui-même, no PHP needed. Ces fonctions modifient les données renvoyées.
Il existe deux types de fonctions :
-
les fonctions scalaires : elles agissent sur chaque entrée récupérée. Elles permettent par exemple de convertir tout le contenu d’un champ en majuscules ou d’arrondir chacune des valeurs ;
-
les fonctions d’agrégat : elles effectuent des calculs sur plusieurs entrées pour retourner une et une seule valeur. Par exemple : calcul de la moyenne, somme des valeurs, comptage du nombre d’entrées…
On peut donner un autre nom aux champs modifiés par les fonctions en créant des alias à l’aide du mot-clé AS. Lorsqu’on utilise une fonction d’agrégat, il est possible de regrouper des données avec GROUP BY. Après un groupement de données, on peut filtrer le résultat avecHAVING. Il ne faut pas le confondre avec WHERE qui filtre avant le groupement des données.
Les dates SQL (phpMyAdmin) *********
Voici les différents types de dates que peut stocker MySQL :
- DATE : stocke une date au format AAAA-MM-JJ (Année-Mois-Jour) ;
- TIME : stocke un moment au format HH:MM:SS (Heures:Minutes:Secondes) ;
- DATETIME : stocke la combinaison d’une date et d’un moment de la journée au format AAAA-MM-JJ HH:MM:SS. Ce type de champ plus précis ;
- TIMESTAMP : stocke le nombre de secondes passées depuis le 1er janvier 1970 à 00 h 00 min 00 s ;
- YEAR : stocke une année, soit au format AA, soit au format AAAA.
NOW() : obtenir la date et l’heure actuelles DATE_ADDetDATE_SUB : ajouter ou soustraire des dates
TP : un blog avec des commentaires *********
- réaliser les deux pages:
index.php : liste des cinq derniers billets ;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon blog</title> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>Mon super blog !</h1> <p>Derniers billets du blog :</p> <?php // Connexion à la base de données try { $bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', ''); } catch(Exception $e) { die('Erreur : '.$e->getMessage()); } // On récupère les 5 derniers billets $req = $bdd->query('SELECT id, titre, contenu, DATE_FORMAT(date_creation, \'%d/%m/%Y à %Hh%imin%ss\') AS date_creation_fr FROM billets ORDER BY date_creation DESC LIMIT 0, 5'); // pour ne récupérer que les 5 derniers billets while ($donnees = $req->fetch()) { ?> <div class="news"> <h3> <?php echo htmlspecialchars($donnees['titre']); ?> <em>le <?php echo $donnees['date_creation_fr']; ?></em> </h3> <p> <?php // On affiche le contenu du billet echo nl2br(htmlspecialchars($donnees['contenu'])); ?> <br /> <em><a href="commentaires.php?billet=<?php echo $donnees['id']; ?>">Commentaires</a></em> </p> //chaque billet est suivi d'un lien vers la pagecommentaires.phpqui transmet le numéro du billet dans l'URL </div> <?php } // Fin de la boucle des billets $req->closeCursor(); ?> </body> </html>
Elle permet de convertir les retours à la ligne en balises HTML
: n12br()
commentaires.php : affichage d’un billet et de ses commentaires.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon blog</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Mon super blog !</h1>
<p><a href="index.php">Retour à la liste des billets</a></p>
<?php
// Connexion à la base de données
try
{
$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
// Récupération du billet
$req = $bdd->prepare('SELECT id, titre, contenu, DATE_FORMAT(date_creation, \'%d/%m/%Y à %Hh%imin%ss\') AS date_creation_fr FROM billets WHERE id = ?');
$req->execute(array($_GET['billet']));
$donnees = $req->fetch();
?>
<div class="news">
<h3>
<?php echo htmlspecialchars($donnees['titre']); ?>
<em>le <?php echo $donnees['date_creation_fr']; ?></em>
</h3>
<p>
<?php
echo nl2br(htmlspecialchars($donnees['contenu']));
?>
</p>
</div>
<h2>Commentaires</h2>
<?php
$req->closeCursor(); // Important : on libère le curseur pour la prochaine requête
// Récupération des commentaires
$req = $bdd->prepare('SELECT auteur, commentaire, DATE_FORMAT(date_commentaire, \'%d/%m/%Y à %Hh%imin%ss\') AS date_commentaire_fr FROM commentaires WHERE id_billet = ? ORDER BY date_commentaire');
$req->execute(array($_GET['billet']));
while ($donnees = $req->fetch())
{
?>
<p><strong><?php echo htmlspecialchars($donnees['auteur']); ?></strong> le <?php echo $donnees['date_commentaire_fr']; ?></p>
<p><?php echo nl2br(htmlspecialchars($donnees['commentaire'])); ?></p>
<?php
} // Fin de la boucle des commentaires
$req->closeCursor();
?>
</body>
</html>
- réaliser deux tables:
pour le billet structurer de cette facon:
id(int) : identifiant du billet, clé primaire etauto_increment ;
titre(varchar 255) : titre du billet ;
contenu(text) : contenu du billet ;
date_creation(datetime) : date et heure de création du billet.
pour les commentaires structurer de cette facon:
id(int) : identifiant du commentaire, clé primaire etauto_increment ;
id_billet(int) : identifiant du billet auquel correspond ce commentaire ;
auteur(varchar 255) : auteur du commentaire ;
commentaire(text) : contenu du commentaire ;
date_commentaire(datetime) : date et heure auxquelles le commentaire a été posté.
Les jointures *********
-
les jointures internes : elles ne sélectionnent que les données qui ont une correspondance entre les deux tables ; à l’aide du mot-clé WHERE: l’ancienne syntaxe, tjrs use ajd, a connaître mais éviter d’use si vous avez le choix, ex:
marquer le nom de la table devant le nom du champ: SELECT jeux_video.nom, proprietaires.prenom FROM proprietaires, jeux_video // demande clairement de récupérer le nom du jeu et le prénom du propriétaire avec cette requête. SELECT jeux_video.nom, proprietaires.prenom FROM proprietaires, jeux_video WHERE jeux_video.ID_proprietaire = proprietaires.ID // on utilise les alias SELECT jeux_video.nom AS nom_jeu, proprietaires.prenom AS prenom_proprietaire FROM proprietaires, jeux_video WHERE jeux_video.ID_proprietaire = proprietaires.IDà l’aide du mot-clé JOIN : c’est la nouvelle syntaxe qu’il est recommandé d’utiliser. + efficace + lisible.ex: -
les jointures externes : elles sélectionnent toutes les données, même si certaines n’ont pas de correspondance dans l’autre table.
Notes: la jointure externe est donc plus complète car elle est capable de récupérer plus d’informations, tandis que la jointure interne est plus stricte car elle ne récupère que les données qui ont une équivalence dans l’autre table.
Créez des images en PHP *********
(bloquer ne peut activer leur bibilotheque GD) Voici le code PHP qu’il faut mettre pour « annoncer » au navigateur que l’on va renvoyer une image PNG :
<?php
header ("Content-type: image/png");
?>
2 façons de créer une image :
- soit vous créez une nouvelle image vide, avec la fonction imagecreate. Elle prend deux paramètres : la largeur et la
hauteur de l’image que vous voulez créer. Elle renvoie une information que vous devez mettre dans une variable (par
exemple$image). ex:
<?php header ("Content-type: image/png"); $image = imagecreate(200,50); // 200 pixels de large et 50 pixels de haut. ?> - soit vous chargez une image qui existe déjà et qui servira de fond à votre nouvelle image. Selon son type, ex:
<?php header ("Content-type: image/jpeg"); $image = imagecreatefromjpeg("couchersoleil.jpg"); ?>
Les images en PHP : On peut les afficher directement après les avoir créées :
<?php
header ("Content-type: image/png"); // 1 : on indique qu'on va envoyer une image PNG
$image = imagecreate(200,50); // 2 : on crée une nouvelle image de taille 200 x 50
// 3 : on s'amuse avec notre image (on va apprendre à le faire)
imagepng($image); // 4 : on a fini de faire joujou, on demande à afficher l'image
?>
ou les enregistrer sur le disque pour pouvoir les ré-afficher plus tard, sans avoir à refaire tous les calculs:
Les textes et couleurs en PHP *********
Pour définir une couleur en PHP, on doit utiliser la fonction imagecolorallocate. On lui donne quatre paramètres :
- l’image sur laquelle on travaille,
- la quantité de rouge,
- la quantité de vert,
- et la quantité de bleu.
Cette fonction nous renvoie la couleur dans une variable.
Grâce à cette fonction, on va pouvoir se créer des « variables-couleur » qui vont nous être utiles pour indiquer ensuite la couleur. ex de couleurs:
<?php header ("Content-type: image/png"); $image = imagecreate(200,50); $orange = imagecolorallocate($image, 255, 128, 0); $bleu = imagecolorallocate($image, 0, 0, 255); $bleuclair = imagecolorallocate($image, 156, 227, 254); $noir = imagecolorallocate($image, 0, 0, 0); $blanc = imagecolorallocate($image, 255, 255, 255); imagepng($image); ?>Notes: la première fois que vous faites un appel à la fonction imagecolorallocate, cette couleur devient la couleur de fond de votre image. Donc, si vous avez bien compris, ce code doit créer une image… toute orange !
Écrire du texte avec la fonction imagestring
<?php
imagestring($image, $police, $x, $y, $texte_a_ecrire, $couleur);
?>
En cominant les deux, ex:
<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);
$orange = imagecolorallocate($image, 255, 128, 0);
$bleu = imagecolorallocate($image, 0, 0, 255);
$bleuclair = imagecolorallocate($image, 156, 227, 254);
$noir = imagecolorallocate($image, 0, 0, 0);
$blanc = imagecolorallocate($image, 255, 255, 255);
imagestring($image, 4, 35, 15, "Salut les Zéros !", $blanc); // affiche le texte sur fond orange en blanc
// de 1-5 pour la taille de police et x,y pour la position
imagepng($image);
?>
Dessiner une forme *********
ImageSetPixel ($image, $x, $y, $couleur);
ImageSetPixel ($image, 100, 100, $noir)
// affiche x et x les lettre en noir
ImageLine ($image, $x1, $y1, $x2, $y2, $couleur);
ImageLine ($image, 30, 30, 120, 120, $noir);
// affiche une ligne noir
ImageEllipse ($image, $x, $y, $largeur, $hauteur, $couleur);
ImageEllipse ($image, 100, 100, 100, 50, $noir);
// afiche un cercle noir
ImageRectangle ($image, $x1, $y1, $x2, $y2, $couleur);
ImageRectangle ($image, 30, 30, 160, 120, $noir)
// affiche un rectangle
ImagePolygon ($image, $array_points, $nombre_de_points, $couleur);
$points = array(10, 40, 120, 50, 160, 160); ImagePolygon ($image, $points, 3, $noir);
Des fonctions encore plus puissantes *********
rendre une image transparente
<?php
imagecolortransparent($image, $couleur);
?>
si on reprend l’exemple du machin orange qu’on veut rendre transparent, ex:
<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);
$orange = imagecolorallocate($image, 255, 128, 0); // Le fond est orange (car c'est la première couleur)
$bleu = imagecolorallocate($image, 0, 0, 255);
$bleuclair = imagecolorallocate($image, 156, 227, 254);
$noir = imagecolorallocate($image, 0, 0, 0);
$blanc = imagecolorallocate($image, 255, 255, 255);
imagestring($image, 4, 35, 15, "Salut les Zéros !", $noir);
imagecolortransparent($image, $orange); // On rend le fond orange transparent
imagepng($image);
?>
mélanger deux images
<?php
header ("Content-type: image/jpeg"); // L'image que l'on va créer est un jpeg
// On charge d'abord les images
$source = imagecreatefrompng("logo.png"); // Le logo est la source
$destination = imagecreatefromjpeg("couchersoleil.jpg"); // La photo est la destination
// Les fonctions imagesx et imagesy renvoient la largeur et la hauteur d'une image
$largeur_source = imagesx($source);
$hauteur_source = imagesy($source);
$largeur_destination = imagesx($destination);
$hauteur_destination = imagesy($destination);
// On veut placer le logo en bas à droite, on calcule les coordonnées où on doit placer le logo sur la photo
$destination_x = $largeur_destination - $largeur_source;
$destination_y = $hauteur_destination - $hauteur_source;
// On met le logo (source) dans l'image de destination (la photo)
imagecopymerge($destination, $source, $destination_x, $destination_y, 0, 0, $largeur_source, $hauteur_source, 60);
// On affiche l'image de destination qui a été fusionnée avec le logo
imagejpeg($destination);
?> Explications: - Dans ce script, on manipule deux images :$source(le logo) et $destination(la photo). Les deux sont créées à l'aide de la fonction imagecreatefrompng(et fromjpegpour la photo). - Notre but est de savoir à quelles coordonnées placer le logo sur la photo. Moi, je veux le mettre tout en bas à droite. Pour ça, j'ai besoin de connaître les dimensions des images. J'utilise les fonctionsimagesxetimagesypour récupérer les dimensions du logo et de la photo. Ensuite, pour placer le logo tout en bas, il faut le mettre à la position$hauteur_de_la_photo - $hauteur_du_logo. On fait de même pour placer le logo à droite :$largeur_de_la_photo - $largeur_du_logo. Si j'avais voulu mettre le logo tout en haut à gauche, là, ça aurait été beaucoup plus simple : pas besoin de faire de calculs, vu qu'en haut à gauche les coordonnées sont (0, 0) - Vient ensuite la fonctionimagecopymerge, la plus importante. Elle prend de nombreux paramètres. Ce qu'il faut savoir, c'est qu'elle a besoin de deux images : une source et une destination. Elle modifie l'image de destination (ici, la photo) pour y intégrer l'image source. Cela explique pourquoi c'est$destinationque l'on affiche à la fin, et non pas$source(le logo) qui n'a pas changé.
Les paramètres à donner à la fonction sont, dans l’ordre, les suivants.
L’image de destination : ici$destination, la photo. C’est l’image qui va être modifiée et dans laquelle on va mettre
notre logo.
L’image source : ici $source, c’est notre logo. Cette image n’est pas modifiée.
L’abscisse à laquelle vous désirez placer le logo sur la photo : il s’agit ici de l’abscisse du point située à la
position $largeur_de_la_photo - $largeur_du_logo.
L’ordonnée à laquelle vous désirez placer le logo sur la photo : de même, il s’agit de l’ordonnée du point sur la photo
(ici,$hauteur_de_la_photo - $hauteur_du_logo).
L’abscisse de la source : en fait, la fonction imagecopymergepermet aussi de ne prendre qu’une partie de l’image source.
Ça peut devenir un peu compliqué, alors nous, on va dire qu’on prend tout le logo. On part donc
du point situé aux coordonnées (0, 0) de la source. Mettez donc 0 pour l’abscisse.
L’ordonnée de la source : de même pour l’ordonnée. Mettez 0.
La largeur de la source : c’est la largeur qui détermine quelle partie de l’image source vous allez prendre. Nous on
prend toute l’image source, ne vous prenez donc pas la tête non plus et mettez$largeur_source.
La hauteur de la source : de même, mettez$hauteur_source.
Le pourcentage de transparence : c’est un nombre entre 0 et 100 qui indique la transparence de votre logo sur la photo. Si vous mettez 0, le logo sera invisible (totalement transparent), et si vous mettez 100, il sera totalement opaque (il n’y aura pas d’effet de « fusion »). Mettez un nombre autour de 60-70, en général c’est bien. ;-)
redimensionner une image, pour créer une miniature par exemple
<?php
$source = imagecreatefromjpeg("couchersoleil.jpg"); // La photo est la source
$destination = imagecreatetruecolor(200, 150); // On crée la miniature vide
// Les fonctions imagesx et imagesy renvoient la largeur et la hauteur d'une image
$largeur_source = imagesx($source);
$hauteur_source = imagesy($source);
$largeur_destination = imagesx($destination);
$hauteur_destination = imagesy($destination);
// On crée la miniature
imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination, $hauteur_destination, $largeur_source, $hauteur_source);
// On enregistre la miniature sous le nom "mini_couchersoleil.jpg"
imagejpeg($destination, "mini_couchersoleil.jpg");
?>
Les paramètres de la fonction imagecopyresampled.
L’image de destination : c’est$destination, l’image qu’on a créée avecimagecreatetruecolor. L’image source : l’image dont on veut créer la miniature ; ici, c’est notrecouchersoleil.jpgqu’on a chargée avec imagecreatefromjpeg. L’abscisse du point à laquelle vous placez la miniature sur l’image de destination : pour faire simple, on va dire que notre image de destination contiendra uniquement la miniature. Donc on placera la miniature aux coordonnées (0, 0), ce qui fait qu’il faut mettre 0 à cette valeur. L’ordonnée du point à laquelle vous placez la miniature sur l’image de destination : pour les mêmes raisons, mettez 0. L’abscisse du point de la source : ici, on prend toute l’image source et on en fait une miniature. Pour tout prendre, il faut partir du point (0, 0), ce qui fait que là encore on met 0 à cette valeur. L’ordonnée du point de la source : encore 0. La largeur de la miniature : un des paramètres les plus importants, qui détermine la taille de la miniature à créer. Dans notre cas notre miniature fait 200 pixels de large. On a stocké ce nombre dans la variable$largeur_destination. La hauteur de la miniature : de même pour la hauteur de la miniature à créer. La largeur de la source : il suffit d’indiquer la taille de notre image source. On a stocké cette valeur dans$largeur_source, donc on la réutilise ici. La hauteur de la source : de même pour la hauteur.
Les expressions régulières *********
-
Definition:Les expressions régulières sont des outils de recherche et de remplacement de texte très avancés qui permettent d’effectuer des recherches très précises, pour vérifier par exemple que le texte saisi par l’utilisateur correspond bien à la forme d’une adresse e-mail ou d’un numéro de téléphone.
-
La fonction preg_match vérifie si un texte correspond à la forme décrite par une expression régulière. ex:
<?php if (preg_match("#guitare#", "J'aime jouer de la guitare.")) { echo 'VRAI'; } else { echo 'FAUX'; } ?> -
Une expression régulière est délimitée par un symbole (par exemple le dièse#):
^(accent circonflexe) : indique le début d'une chaîne ; $(dollar) : indique la fin d'une chaîne -
Les classes de caractères permettent d’autoriser un grand nombre de symboles (lettres et chiffres) selon un intervalle.
#gr[io]s# : Entre crochets, c'est ce qu'on appelle une classe de caractères. Cela signifie qu'une des lettres à l'intérieur peut convenir. Cette phrase contient une lettre : #[a-z]# : VRAI cette phrase ne comporte ni majuscule ni chiffre: #[A-Z0-9]# :FAUX Je vis au 21e siècle: #^[0-9]# :FAUX <h1>Une balise de titre HTML</h1>: #<h[1-6]># :VRAI #[^0-9]# : pour dire je ne veux pas de chiffre entre 0 et 9 mais a préciser dans les crochets -
Les quantificateurs permettent d’exiger la répétition d’une chaîne de texte un certain nombre de fois.
?(point d'interrogation) : ce symbole indique que la lettre est facultative. Elle peut y être 0 ou 1 fois. Ainsi,#a?#reconnaît 0 ou 1 « a » ; +(signe plus) : la lettre est obligatoire. Elle peut apparaître 1 ou plusieurs fois. Ainsi,#a+#reconnaît « a », « aa », « aaa », « aaaa », etc. ; *(étoile) : la lettre est facultative. Elle peut apparaître 0, 1 ou plusieurs fois. Ainsi,#a*#reconnaît « a », « aa », « aaa », « aaaa », etc. Mais s'il n'y a pas de « a », ça fonctionne aussi !{3} : si on met juste un nombre, cela veut dire que la lettre (ou le groupe de lettres s’il est entre parenthèses) doit être répétée 3 fois exactement. #a{3}#fonctionne donc pour la chaîne « aaa ».
{3,5} : ici, on a plusieurs possibilités. On peut avoir la lettre de 3 à 5 fois. #a{3,5}#fonctionne pour « aaa », « aaaa », « aaaaa ».
{3,} : si vous mettez une virgule, mais pas de 2e nombre, ça veut dire qu’il peut y en avoir jusqu’à l’infini. Ici, cela signifie « 3 fois ou plus ». #a{3,}#fonctionne pour « aaa », « aaaa », « aaaaa », « aaaaaa », etc. Je ne vais pas tous les écrire, ça serait un peu long.
Les expressions régulières part2 *********
-
Certains caractères sont spéciaux au sein d’une expression régulière : on parle de métacaractères. Si on souhaite les rechercher dans une chaîne, il faut les échapper en plaçant un symbole antislash devant. Par exemple
# ! ^ $ ( ) [ ] { } ? + * . \ | Je suis impatient ! s'écrit #impatient \!# Je suis (très) fatigué s'écrit #\(très\) fatigué# J'ai sommeil… s'écrit #sommeil\.\.\.# Le smiley :-\ s'écrit #:-\\# -
Il existe des classes abrégées, c’est-à-dire des classes toutes prêtes, comme par exemple \d qui revient à écrire[0-9].
\d Indique un chiffre Ça revient exactement à taper[0-9] \D Indique ce qui n'est PAS un chiffre Ça revient à taper[^0-9] \w Indique un caractère alphanumérique ou un tiret de soulignement. Cela correspond à[a-zA-Z0-9_] \W Indique ce qui n'est PAS un mot. Si vous avez suivi, ça revient à taper[^a-zA-Z0-9_] \t Indique une tabulation \n Indique une nouvelle ligne \r Indique un retour chariot \s Indique un espace blanc \S Indique ce qui n'est PAS un espace blanc (\t \n \r) . Indique n'importe quel caractère. Il autorise donc tout ! (Enoncé pour que ca fasse un numéro de téléphones) « 0153789999 »
- On veut qu’il y ait UNIQUEMENT le numéro de téléphone. On va donc commencer par mettre les symboles^et$pour indiquer un début et une fin de chaîne : #^$#
- Continuons. On sait que le premier caractère est forcément un 0. On tape donc : #^0$#
- Le 0 est suivi d’un nombre allant de 1 à 6, sans oublier le 8 pour les numéros spéciaux. Il faut donc utiliser la classe[1-68], qui signifie « Un nombre de 1 à 6 OU le 8 » : #^0[1-68]$# 4.Ensuite, viennent les 8 chiffres restants, pouvant aller de 0 à 9. Il nous suffit donc d’écrire[0-9]{8}pour indiquer que l’on veut 8 chiffres. Au final, ça nous donne cette regex : #^0[1-68][0-9]{8}$#
(A quoi ca ressemblerait)
<p>
<?php
if (isset($_POST['telephone']))
{
$_POST['telephone'] = htmlspecialchars($_POST['telephone']); // On rend inoffensives les balises HTML que le visiteur a pu entrer
if (preg_match("#^0[1-68]([-. ]?[0-9]{2}){4}$#", $_POST['telephone']))
{
echo 'Le ' . $_POST['telephone'] . ' est un numéro <strong>valide</strong> !';
}
else
{
echo 'Le ' . $_POST['telephone'] . ' n\'est pas valide, recommencez !';
}
}
?>
</p>
<form method="post">
<p>
<label for="telephone">Votre téléphone ?</label> <input id="telephone" name="telephone" /><br />
<input type="submit" value="Vérifier le numéro" />
</p>
</form>
(Enoncé pour que ca fasse un email)
j.dupont_2@orange.fr.
- on ne veut QUE l’adresse e-mail ; on va donc demander à ce que ça soit un début et une fin de chaîne : #^$#
- on a des lettres, chiffres, tirets, points, underscores, au moins une fois. On utilise donc la classe[a-z0-9.-]à la suite de laquelle on rajoute le signe+pour demander à ce qu’il y en ait au moins un : #^[a-z0-9.-]+$#
- Vient ensuite l’arobase (là ce n’est pas compliqué, on a juste à taper le caractère) : #^[a-z0-9._-]+@$#
- Puis encore une suite de lettres, chiffres, points, tirets, au moins deux fois. On tape donc{2,}pour dire « deux fois ou plus » : #^[a-z0-9.-]+@[a-z0-9.-]{2,}$#
- Ensuite vient le point (de « .fr » par exemple). Comme je vous l’ai dit plus haut, c’est un caractère spécial qui sert à indiquer « n’importe quel caractère » (même des accents). Or, ici, on veut enlever sa signification au point pour dire que l’on veut le symbole point dans notre regex. On va donc mettre un antislash devant :#^[a-z0-9.-]+@[a-z0-9.-]{2,}.$#
- Enfin, pour terminer, il nous faut deux à quatre lettres. Ce sont forcément des lettres minuscules, et cette fois pas de chiffre ou de tiret, etc. On écrit donc : #^[a-z0-9.-]+@[a-z0-9.-]{2,}.[a-z]{2,4}$#
<p>
<?php
if (isset($_POST['mail']))
{
$_POST['mail'] = htmlspecialchars($_POST['mail']); // On rend inoffensives les balises HTML que le visiteur a pu rentrer
if (preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $_POST['mail']))
{
echo 'L\'adresse ' . $_POST['mail'] . ' est <strong>valide</strong> !';
}
else
{
echo 'L\'adresse ' . $_POST['mail'] . ' n\'est pas valide, recommencez !';
}
}
?>
</p>
<form method="post">
<p>
<label for="mail">Votre mail ?</label> <input id="mail" name="mail" /><br />
<input type="submit" value="Vérifier le mail" />
</p>
</form>
Notes: Et ça, bah c’est tout bénef’ pour vous : vous venez d’apprendre à écrire des regex, vous n’avez presque rien à savoir de plus pour vous en servir avec MySQL. Il faut savoir cependant que MySQL ne comprend que les regex en langage POSIX, et pas PCRE comme on a appris. Vous avez juste besoin de retenir ce qui suit pour faire une regex POSIX :
- il n’y a pas de délimiteur ni d’options. Votre regex n’est donc pas entourée de dièses ;
-
il n’y a pas de classes abrégées comme on l’a vu plus haut, donc pas de\d, etc. En revanche, vous pouvez toujours utiliser le point pour dire : « n’importe quel caractère ».
-
La fonction preg_replace permet d’effectuer des remplacements dans une chaîne de texte.
#(anti)co(?:nsti)(tu(tion)nelle)ment#La seconde parenthèse n'est pas capturante. Il ne nous reste que trois variables (quatre si on compte$0) : $0 : anticonstitutionnellement $1 : anti $2 : tutionnelle $3 : tion - Dans le cas d’un remplacement, les parenthèses au sein d’une expression régulière permettent de capturer une portion de texte pour la réutiliser dans une autre chaîne.
(a revoir, trop fatigué pour comprenre là)
Samedi 25 avril
FreeCodeCamp
(Python)
Naming Conventions
*********
Variable names:
- Are Case sensitive: time and TIME are not the same
- Have to start with an underscore _ or a letter (DO NOT start with a number)
- Are allowed to have only numbers, letters and underscores. No special characters like: #, $, &, @, etc.
Dimanche 26 avril
Nop
(Not today)
Resting day
*********
Lundi 27 avril
App
(Maquette)
Debrief *********
Maquette done, il ne reste plus qu’à:
- faire disparaître les infos une fois qu’on reclique dessus
- faire une sorte de ease in ease out pour que les infos apparaissent un peu moins violemment
- remplacer par la bonne police, espacement des lettres et mettre les bons emoticones a discuter avec le DA
Projet
(Perso)
To-do-list *********
- Trouver de l’inspiration pour le blog, je veux rajouter des animations mais je ne sais pas lesquels pour que ca fasse plus pro et plus fluide
- Rajouter les articles, les photos
- Changer la couleur du hover de la galerie photo
Mardi 28 avril
Découvertes
(Self-improvement)
Des nouveaux bb *********
- Figma: pour montrer/faire des maquettes et communiquer sur un projet a plusieurs
- Telegram: pour parler/ stocker et partager en cloud en toute sécurité
- CSS Grid: pour faire du graphisme en codant
Mercredi 29 avril
Organisation
(Self-improvement)
Programme *********
- J’ai trouvé un site dont j’aimerai reproduire les animations CSS/ Js : https://studio-size.com/work/
- Et ensuite l’incorporer à mon portoflio Perso
- J’aimerai aussi faire des codewars pour améliorer mon Js avant de reprendre les cours la semaines prochaine
- Objectif : 4h cet aprem sur mon site perso et 4h ce soir pour le Js
Jeudi 30 avril
CodeWars
(JavaScript)
Exercices *********
10 exercices done qui passe par les bases donc array, objets… Notes: c’est quand même énervant qu’ils ne te disent pas où est l’erreur et que quand tu regardes la solution, tu vois que c’est presque pareil …
ex :
function saleHotdogs(n){
if (n < 5) return n * 100;
if (n >= 5 && n < 10) return n * 95; else return n * 90;
}
alors que j'avais marqué, fin la logique est là quoi ... c'est juste la syntaxe le problème à chaque fois.
function saleHotdogs(n){
return n<5 ? n*100 : n>=5 && n<10 ? n*95 : n>=10 ? n*90;
}