(Autodidact)
Objectives routines (j’ai bien marqué objectives haha) *********
(Wagon)
API websites *********
HTML/ CSS/ landing page: https://cdn.ireland.production.livestorm.io/uploads/media/file/2e6e9cc1-d0cc-429f-96f0-36f74898bd37/1ffb0183-739a-4119-8605-945d7d592eee.mp4?v=1588414988
API tutos: https://learn.lewagon.com/batches/547
(Autodidact)
Sticky Nav *********
C’est ce que j’essaie d’incorporer à mon site perso :https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css–cms-24042
(Autodidact)
Text animation *********
J’ai trouvé ce site pour apprendre à faire des animations comme Apple le fait pendant ses pubs: https://freefrontend.com/css-text-animations/ et j’ai demandé un tutos pour faire ce genre d’animation mais avec plusieurs liens et photos. En attendant la réponse.
So far so good *********
Je maintiens le planning:
(WebApp)
LifexP *********
On est en train de monter une web app pour participer à l’effort collectif post confinement en délivrant une web app, on discussion pour l’instant mais devrait être opérationnel d’ici le 20 mai. (Challenge accepted)
(Planning)
Daily *********
- 30 min Pix
- 2-3 Kata
- Finir les boutons de l’app
- Figma done
- Travailler sur projet perso (manque gallery image, nav, footer, 3 autres pages)
(Blank)
Rien à signaler ********* Black out
(Autodidact)
Planning (réalité) *********
<div class="longdiv red">
<p>Mon super texte</p>
</div>
<div class="longdiv blue">
<img src="http://placekitten.com/g/200/300" class="image"/>
<img src="http://placekitten.com/g/200/300" class="image"/>
<img src="http://placekitten.com/g/200/300" class="image" />
<img src="http://placekitten.com/g/200/300" class="image" />
</div>
<div class="longdiv red">
<img src="http://placekitten.com/g/200/300" class="image"/>
<img src="http://placekitten.com/g/200/300" class="image"/>
<img src="http://placekitten.com/g/200/300" class="image" />
<img src="http://placekitten.com/g/200/300" class="image" />
</div>
img {
visibility: hidden;
}
.fadeIn {
-webkit-animation: fade 0.8s;
animation: fade 0.8s;
visibility: visible;
}
@-webkit-keyframes fade {
0%{opacity:0}
100%{opacity:1}
}
/* Style pour faire deux grandes divs */
.longdiv {
height: 1000px;
margin-bottom: 50px;
font-size: 46px;
padding: 50px;
}
p {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
margin: 0;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
text-align: center;
}
version + light:
var images = document.getElementsByClassName('image');
var cpt = 0;
window.onscroll = (event) => {
cpt++;
// console.log(images[0].getBoundingClientRect());
for ( var i=0; i < images.length; i++) {
if ( window.scrollY + 300 > images[i].offsetTop && ! images[i].classList.contains('fadeIn') ) {
images[i].classList.add('fadeIn');
console.log("Affichage images au bout de " + cpt + " entrées dans onscroll");
}
}
};
version + gourmande
var images = document.getElementsByClassName('image');
var cpt = 0;
window.onscroll = (event) => {
cpt++;
// console.log(images[0].getBoundingClientRect());
for ( var i=0; i < images.length; i++) {
if ( window.scrollY + 300 > images[i].offsetTop && ! images[i].classList.contains('fadeIn') ) {
images[i].classList.add('fadeIn');
console.log("Affichage images au bout de " + cpt + " entrées dans onscroll");
}
}
};
Liens utiles *********
(HakiVOREV1)
Difficultés rencontré *********
MAIS j’ai presque fini l’app en une journée donc pas peu fière :) il ne reste qu’une demi page et quelque boutons a revoir!
(Atelier)
Feedback *********
(HakiVOREV1)
Done *********
- Une dernière demi page à coder et c’est plier!
(Atelier)
Feedback *********
Je n’ai pas fini la journée pcq je m’étais couché a 4h du mat la veille et l’atelier commencait a 9h du matin, j’ai fait celui du matin juqu’à midi puis j’ai essayé d’aller me coucher sans succès. Je suis sortie pendant 2h et après ça allait mieux. Mais j’avais presque fini le blog avec Python mais mon app était plus urgente.
(Haki)
Progress *********
Hier soir je pensais qu’il ne me restait qu’une seule page mais le CTO m’a appelé me disant que ce n’etait pas au pixel pres et qu’il fallait prendre les mesures de Figma, que j’avais essayé moi même au début et qui étaient erroné, seul certains détails sont valable comme la couleur, la font mais pas la width ni la height et en plus elle n’inclcus pas non plus les flex ou grid.
Du coup j’ai appris à mieux me servir de Figma:
(Haki)
DONE *********
Ca y est après avoir galéré toute la nuit pour faire la transition fadeOut de la premiere page pour laisser place à la 2eme page en fadeIn j’ai enfin réussi (merci les mentors que j’ai bien harcelé dans tout les sens haha) :
$(document).ready(function() {
const newLocation = 'justeUnMoment.html';
function newPage() {
window.location = newLocation
}
// On affiche le corps de la page en fadeIn
$('body').fadeIn(1000);
window.setTimeout(
// Cette fonction sera appelée à la fin du temps que tu donnes (ici 1000 millisecondes)
function() {
// On fadeout la page actuelle et on execute la fonction newpage à la fin du fadeout
$('body').fadeOut(1000, newPage);
},
1000
);
});
et merci jQuery de nous faciliter la vie :) Je pensais aussi qu’il fallait que je mette le script sur les deux pages vu que je les utilise toutes les deux mais en fait si on fait caa, la page n’arrete pas de se recharger à l’infini, il faut donc juste la mettre sur la premiere page.
J’ai aussi fait un autre script qui consiste à ce que l’utilisateur ne puisse avoir accès au bouton next que lorsque qu’il a coché au moins une checkbox.
$(document).ready(function() {
var boxes = $(' input[type=checkbox]').on('change', function() {
var flag = boxes.filter(':checked').length > 0;
$('#next-container').toggle(flag);
});
});
Et puis jai retouché tout les petits details de la derniere page pour que les padding et les tailles correspondent bien, et dire que je travaillais au début avec les tout petit écrans alors qu’on peut ajuster la taille à la fenetre et bouger la console a droite… Si javais su ca avant. Ca m’aurait fait gagner beaucoup de temps. Mais au moins j’ai fini.
(PHP)
Cours *********
ctrl + r = raccourci clavier pour rafraîchir la page
(PHP)
Cours *********
- Nicolas nous a appris à mettre include sur la page principale et ainsi créer d’autres feuilles php pour ne pas avoir à changer partout où on a écrit notre code, si on le change à un endroit. pratique.
(PHP)
Cours *********
Petit reminder pour les cours:
```php <?php $nom_du_resto = “boheme”;
$_dossier_template = "templates/site2020/"; // repertoire dans lequel j'ai mis l'ensemble des gabarits de mon site
$_url_base = "http://localhost:8888/jour3/resto2/";
// c'est l'url pour accéder à la page d'accueil de mon site.
// si la racine de mon site était https://www.mon_super_resto.com/,
// $_url_base = "https://www.mon_super_resto.com/"; ``` - footer.php : pour mettre la nav et copyrights, ex :
```php <footer> © <?php echo $nom_du_resto ?> </footer>
- navigation.php : pour ne pas avoir à la re écrire partout, ex :
```php
<nav>
<ul>
<li>
<a href="index.php">Accueil</a>
</li>
<li>
<a href="lundi.php">Lundi</a>
</li>
<li>
<a href="mardi.php">Mardi</a>
</li>
<li>
<a href="mercredi.php">Mercredi</a>
</li>
<li>
<a href="jeudi.php">Jeudi</a>
</li>
<li>
<a href="vendredi.php">Vendredi</a>
</li>
<li>
<a href="samedi.php">Samedi</a>
</li>
<li>
<a href="dimanche.php">Dimanche</a>
</li>
</ul>
</nav>
<?php include "config.php"?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $titre . " - " . $nom_du_resto ?></title>
<link rel="stylesheet" href="css/mes_styles.css" />
</head>
<body>
<header>
<div class="container">
<?php include "navigation.php" ?>
</div>
</header>
<main>
<div class="container">
<h1><?php echo $titre?></h1>
<h2>Entrée</h2>
<?php echo $entree ?>
<h2>Plat</h2>
<?php echo $plat ?>
<h2>Dessert</h2>
<?php echo $dessert ?>
</div>
</main>
<?php include "footer.php" ?>
</body>
</html>
<?php
include "config.php";
include $_dossier_template . "accueil.php";
une page type, ex: ````php <?php include “config.php”; // le plus important
$titre = "Menu du lundi";
$entree = "Velouté de courgette";
$plat = "Saumon teriyaki aux légumes";
$dessert = "Gatêau au chocolat";
include $_dossier_template . "page_menu_du_jour.php"; // pour pouvoir changer comme un template
$annee = 2020;
?> ```
pour afficher une image, ex:
<img src="<?php echo $_url_base . $_dossier_template ?>img/logo.png"> <!-- afficher une image -->
(PHP)
Cours *********
On a vu les fonctions de bases avec les calculs, incrémentation, %, constantes/ magiques On a vu les conditions if else == != , la difference entre == (meme valeur) et === (strictement pareil), && et || On a vu empty (si variable est vide ou nulle) et isset (pour savoir si une variable est défini) et switch break
(PHP)
Cours *********
Comment passer du switch au if et else if:
$fruit = "amande";
switch ($fruit) {
case 'kiwi' :
case 'banane' :
echo 'J\'aime les fruits exotiques <br>';
break; // obligatoire pour sortir du switch
case 'pomme' :
case 'poire' :
echo 'J\'aime les fruits classiques <br>';
break;
case 'amande' :
echo 'J\'aime les graines <br>';
break;
default : // cas par défaut : aucun des précédents cas n'a été validé.
echo 'J\'ai l\'impression que je n\'aime pas trop les fruits<br>';
break;
}
$fruit = "amande";
if ($fruit == 'kiwi' || $fruit == 'banane') {
echo 'J\'aime les fruits exotiques';
}
else if ($fruit == 'pomme' || $fruit == 'poire') {
echo 'J\'aime les fruits classiques';
}
else if ($fruit == 'amande') {
echo 'J\'aime les graines';
}
else {
echo 'J\'ai l\'impression que je n\'aime pas trop les fruits';
}
Comment écrire une fonction pour que ca sorte en html
1er exemple:
function addBrX($monParametreAAfficher, $couleurBordureDiv){
echo "
<div style=\"border: 1px solid $couleurBordureDiv, padding:10px;\"> // ne pas oublier les antislash pour que ca passe au verre
$monParametreAAfficher
</div>
";
}
2eme exemple:
htmlDiv("Super contenu 1", "superclass");
//autre exemple
function htmlDiv($contenu, $class){
echo "
<div class=\"$class\">
$contenu
</div>
";
}
htmlDiv("Super contenu", "superclass2");
(Autodidact)
Devoirs PHP *********
Faire un site internet de 3 pages pour artiste (que je commence maintenant a 19h) merci le déconfinement, on avait oublié ce que c’était que d’avoir une vie… Bonjour procrastination. Mais tranquille j’ai plein de templates déjà fait que j’aurai juste à rajouter.
PS: premiere prise de contact avec mon mentor pour travailler Js. J’ai hate de m’y mettre et d’avoir accès aussi à la salle.
(PHP)
Cours *********
- On est a fini de voir les boucles et les conditions et les tableaux :
- Particulierement fiere de ma trouvaille pour afficher une table de multiplication dasn un tableu
function tableDeMultiplication($NbrCol, $NbrLigne) {
$NbrCol = "10";
$NbrLigne = "10";
echo '<table border="1" width="400">';
// 1ere ligne (ligne 0)
echo '<tr>';
echo '<td bgcolor="pink"> i X j </td>';
for ($j=1; $j<=$NbrCol; $j++) {
echo '<td bgcolor="pink">'.$j.'</td>';
}
echo '</tr>';
for ($i=1; $i<=$NbrLigne; $i++) {
echo '<tr>';
for ($j=1; $j<=$NbrCol; $j++) {
// 1ere colonne (colonne 0)
if ($j==1) {
echo '<td bgcolor="pink">'.$i.'</td>';
}
// colonnes suivantes
if ($i==$j) {
echo '<td bgcolor="yellow">';
} else {
echo '<td>';
}
// ------------------------------------------
// AFFICHAGE ligne $i, colonne $j
echo $i*$j;
echo '</td>';
}
echo '</tr>';
$j=1;
}
echo '</table>';
}
(PHP)
Cours *********
Correction des exos:
function tableDeMultiplication($NbrCol, $NbrLigne) {
echo '<table border="1" width="400">';
// 1ere ligne (ligne 0)
echo '<tr>';
echo '<td bgcolor="pink"> i X j </td>';
for ($j=1; $j<=$NbrCol; $j++) {
echo '<td bgcolor="pink">'.$j.'</td>';
}
echo '</tr>';
for ($i=1; $i<=$NbrLigne; $i++) {
echo '<tr>';
for ($j=1; $j<=$NbrCol; $j++) {
// 1ere colonne (colonne 0)
if ($j==1) {
echo '<td bgcolor="pink">'.$i.'</td>';
}
// colonnes suivantes
if ($i==$j) {
echo '<td bgcolor="yellow">';
} else {
echo '<td>';
}
// ------------------------------------------
// AFFICHAGE ligne $i, colonne $j
echo $i*$j;
echo '</td>';
}
echo '</tr>';
$j=1;
}
echo '</table>';
}
tableDeMultiplication(10,10);
Array to table qui reçoit en paramètre un tableau et qui écrit ce tableau dans une balise <table>
$contact = array(
"prenom" => "Laura",
"nom" => "Thay",
"email" => "nogmail@gamil.com",
"telephone" => "xxxx",
);
function arrayToTable($minion){
echo '<table style="border: 5px pink solid;">' .'<tr>'.PHP_EOL;
foreach($minion as $cle => $valeur){
echo "<td>$valeur</td>".PHP_EOL;
}
echo "</tr>" . "</table>";
};
echo arrayToTable($contact).PHP_EOL;
$contenuSite = array(
"accueil" => array(
"titre" => "MinionLand",
"texte" => " Le \"BOHEME\". Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
),
"menus" => array(
"lundi" => array(
"titre" => " Yummy in my tummy",
"entree" => "Tarama à la truffe",
"plat" => "Poké au Crevette Edamame Mangue Ananas Wakame Oignon Frit et Ciboulettes",
"dessert" => "Foccacia Chocolat",
),
"mardi" => array(
"titre" => "Leftovers, no waste please",
"entree" => "Samossa vegetarien",
"plat" => "Kourma vegetarien",
"dessert" => "Salade de fruits",
),
Dans la page lundi.html :
include "config.php";
include "contenu.php";
$menu_a_afficher = $contenuSite ["menus"]["lundi"];
include $_dossier_template . "page_menu_du_jour.php";
et se souvenir de la page config.php :
$nom_du_resto = "Boheme";
$_dossier_template = "templates/site2020/"; // repertoire dans lequel j'ai mis l'ensemble des gabarits de mon site
$_url_base = "http://localhost:8888/jour8/resto/";
(CSS-Grid)
Visio cours *********
Laila nous a fait une intro sur comment marche le CSS-Grid et son agencement avec ses codepen: https://codepen.io/collection/APZpRR
Et une video demo pas à pas plus pousser : https://www.twitch.tv/videos/575905135
(Mentorat)
Visio aide *********
On s’est mis d’accord sur 1h par semaine pour m’aider à faire des exercices de Kata où j’ai bloqué ainsi que d’essayer de faire des animations de scratch et un peu de coding games !
(Autodidact)
Exos de cours *********
Incorporation de notre site du musée en php, on commence par les bases :
C’est une petite gymnastique mental à incorporer surtout et se souvenir de bien renommer les chemins pour les images et dans le dossier config.php comme ceci :
$_dossier_template = "templates/site2020/"; // repertoire dans lequel j'ai mis l'ensemble des gabarits de mon site
$_url_base = "http://localhost:8888/jour8/resto/";
(Autodidact)
Une page en CSS Grid *********
Faire une page en CSS Grid pour faire un peu de graphisme.
(Autodidact)
Exercices d’application *********
(Autodidact)
Exercices d’application *********
(PHP)
Correction des exos *********
$GET *********
Pour afficher une table de multiplication en mettant un include dans la page des fonctions :
tableDeMultiplication($_GET["multiplierpar"]);
Pour afficher 10 fois des liens de multiplications :
for($i=1; $i<=10; $i++){
echo"<a href=\"get.php?multiplierpar=$i\"> Multiplication $i </a> <br>";
}
Pour les formulaires :
<form method="get" action="get.php"> <!-- Attention : dans la construction d'une URL, ne pas confondre les paramètres d'URL qui sont séparé par ? et & avec les ancres qui sont à la fin de l'URL séparé par # -->
<input name="nom" type="text">
<input name="prenom" type="text">
<button type="submit">Valider</button>
</form>
(PHP)
Incorporation de GET *********
(PHP)
POST *********
<?php
require "pays_du_monde.php";
function addClassErreurChamp($nomChampVide) {
//
// Ajoute une class "champ_erreur" si le champ en question est vide.
// pour que ce soit visible, vérifier que nous avons donné un style à cette class.
//
if( !empty($_GET["champ_erreur"]) && $_GET["champ_erreur"] == $nomChampVide) {
echo " champ_erreur "; //
}
}
?><!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/mes_styles.css">
</head>
<body>
<?php
if( isset($_GET["err"]) && $_GET["err"] == "CHAMP") {
// Si dans mon url, j'ai un paramètre d'url qui s'appelle err
// et que ce paramètre vaut "CHAMP"
// alors j'écris une div avec mon message d'erreur.
echo "<div class='erreur'>Merci de remplir tous les champs</div>";
}
?>
<!--
Une fois validé, mon formulaire va envoyer sous forme de paramètres d'URL
la valeur des champs au fichier verifier_reponses.php
-->
<form method="get" action="verifier_reponses.php">
<div class="<?php addClassErreurChamp("nom")?>" >
<label>Nom</label>
<input type="text" name="nom">
</div>
<div class="<?php addClassErreurChamp("prenom")?>" >
<label>Prénom</label>
<input type="text" name="prenom">
</div>
<div class="<?php addClassErreurChamp("annee")?>" >
<label>Année de naissance</label>
<select name="annee">
<option></option>
<?php
for($i=1960; $i <= date("Y") - 16; $i++) {
echo "<option value='$i'>$i</option>";
}
?>
</select>
</div>
<div class="<?php addClassErreurChamp("email")?>" >
<label>Email</label>
<input type="text" name="email">
</div>
<div class="<?php addClassErreurChamp("pays")?>" >
<label>Pays</label>
<select name="pays">
<?php
foreach ($pays as $arr_pays) {
echo "<option value='" . $arr_pays[3] . "'>" . $arr_pays[3] . "</option>";
}
?>
</select>
</div>
<div class="part-valider">
<button type="submit">Valider</button>
</div>
</form>
(PHP)
POST login *********
<form method="post" action="verifier_login.php"> <!-- c'est cette ligne qui est important avec action pour voir les réponses -->
<input type="text" id="login" class="fadeIn second" name="identifiant" placeholder="login"> <!-- c'est le name qui est important pour le fichier verigier login -->
<input type="password" id="password" class="fadeIn third" name="mdp" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<?php
session_start();
var_dump($_POST);
//login Descodeuse
// mdp PHP2020
if(
// on verifie dabord que ca existe
isset($_POST["identifiant"]) &&
isset($_POST["mdp"]) &&
$_POST["identifiant"] == "Descodeuse" &&
$_POST["mdp"] == "PHP2020" ){
// je vais vers mon Site
$_SESSION["peut_se_connecter"] = TRUE;
header("location:http://localhost:8888/jour8/resto/admin.php"); //c'est le lien qui re dirige vers le site une fois connecté
exit;
} else {
// je ne co pas
header("location:login.php"); // le lien qui reste sur le formulaire de login si erreur
echo "re essaie encore";
}
?>
(PHP)
POST login admin *********
<?php
session_start();
if (empty($_SESSION["peut_se_connecter"])) { //si la connection n'est pas validé
header("location:login.php") // elle renvoie a la page login
}
?>