Dans cette vidéo tutorielle, le présentateur montre pas à pas comment développer la première partie d’un jeu de loterie en ligne où l’utilisateur choisit 6 numéros parmi une grille de 49 cases. Il commence par expliquer le principe du jeu et les raisons de ne pas réaliser le tirage côté client pour éviter la triche. Ensuite il crée l’interface : mise en forme du corps de page (centrage, image d’arrière‑plan, animation CSS), stylisation du titre H1 et des boutons. La grille de 49 cases est générée automatiquement avec une boucle PHP qui attribue à chaque bouton un ID et une valeur, insère un saut de ligne toutes les 7 cases et applique les styles CSS (dimensions, couleurs, transitions, effets de survol). Le script JavaScript gère la sélection des cases : au clic, la fonction `jouer(val)` masque le bouton cliqué, ajoute le bouton sélectionné dans un conteneur dédié, concatène le numéro dans un champ caché, et limite le nombre de sélections à six grâce à un compteur. Une fois les six numéros choisis, le bouton de soumission (type submit) apparaît, permettant d’envoyer les numéros à la page `tirage.php`. Le présentateur souligne les redondances de style et propose l’usage de classes CSS pour les factoriser. La vidéo se conclut sur la validation du transfert des numéros vers la page de tirage, qui sera détaillée dans la prochaine vidéo.
Chapters
Bonjour à tous, et bienvenue dans cette nouvelle vidéo où nous allons voir comment créer un jeu de loterie en ligne. Le principe est simple: le joueur choisit 6 numéros dans une grille constituée de 49 cases, puis valide son choix. Juste après, on procède au tirage de 6 nombres aléatoires compris entre 1 et 49 que l'on compare avec la sélection du joueur. Ensuite, on affiche combien de bons numéros il a eu. La création de la grille et le tirage seront assurés en PHP, le reste du traitement sera fait en JavaScript. J'aimerais souligner que j'ai traité un exemple pareil entièrement en JavaScript, mais vu que le code s'exécute sur le client, alors quelqu'un pourrait facilement le trafiquer afin de produire un tirage en sa faveur. Je vous laisserai quand même le lien vers ce code-là dans la description. Au risque de se retrouver avec une vidéo trop longue, j'ai décidé de la diviser en 2. Dans la vidéo courante, nous allons traiter la création de la grille et le choix des cases. Dans la prochaine vidéo, nous allons voir comment procéder au tirage aléatoire et l'annonce du résultat. On commence par insérer un texte qui invite l'utilisateur à jouer. Maintenant on va appliquer un peu de CSS. On centre le contenu au milieu. On élimine les marges. On spécifie la hauteur minimale à 100vh. On spécifie une image d'arrière-plan. On centre celle-ci dans la page. Puis on va l'adapter à l'espace disponible. Regardons ce que ça donne. C'est bien. On pourrait même appliquer une petite animation sur l'arrière-plan. J'ai appliqué les 4 propriétés de base: le nom de l'animation, sa durée, le nombre de fois qu'il va se répéter et puis la cadence de l'animation ou bien l'accélération. Nous avons déjà traité les animations dans plusieurs vidéos avant. Maintenant on va appliquer les styles clés ou bien les keyframes. À l'instant 0%, on va agir sur background-size. On spécifie aussi le milieu et la fin de l'animation. Pour le milieu, on va choisir 120% pour la taille. Exécutons. Alors, l'animation est bien fonctionnelle. Maintenant on va styler le titre H1. On élimine ses marges, par contre on applique une marge interne de 20 pixels. On applique une bordure inférieure puis une couleur d'arrière-plan. Exécutons. Ça donne ce résultat, c'est bien. Maintenant on va créer la grille. Il s'agit en réalité de 49 boutons que l'on va intégrer de manière automatique. On va commencer par intégrer le premier bouton manuellement. Exécutons. Ça donne ça. Maintenant on va appliquer un peu de CSS pour améliorer le rendu. On applique des marges au container gris. Initialement juste la marge supérieure, ensuite le bouton. On va modifier ses dimensions, la taille de la police. On applique aussi le grain, on change la forme du pointeur, on élimine carrément l'arrière-plan, puis on applique les bordures. Regardons ce que ça donne. C'est pas mal, mais on va changer la couleur du texte. On va aussi appliquer le display inline-block parce que par défaut les inputs sont de type inline. Le inline-block va nous permettre d'appliquer des marges supérieures et inférieures. Donc les marges supérieures et inférieures c'est 4 pixels et les marges gauches et droites c'est 2 pixels. Exécutons. Ça donne ça, je crois que c'est bien. Maintenant si on survole le bouton on veut que celui-ci change d'apparence. On va l'agrandir de manière relative. On change la couleur du texte et la couleur d'arrière-plan. Ça donne ça. Le changement, c'est un peu brusque. On va appliquer des transitions. C'est bien. Jusqu'ici, nous n'avons créé qu'un seul bouton, mais on aura besoin de 49 cases. Pour automatiser la création des boutons, on va utiliser un script PHP. Alors, on va exécuter la boucle 49 fois, ce qui va donner naissance à 49 boutons. Exécutons. Ça donne ceci. Maintenant on va changer la valeur, au lieu de mettre 1 je mettrai la variable i. C'est bien. Ensuite je vais intégrer un retour à la ligne à chaque fois que j'atteins la valeur 7 ou bien multiple de 7. Donc si imod du dossier est égal à 0, j'imprime la balise BR. Donc ça donne ceci. Bon, je vais aussi intégrer un identifiant, l'attribut ID. Parce que j'en aurai besoin dans la partie JavaScript. Et là aussi j'applique la valeur de la variable i. Maintenant on va voir le code HTML qui a été envoyé au client. Alors on constate bien qu'il y a 49 boutons qui ont été créés, chacun avec une valeur et un ID différent. Maintenant on va s'attaquer à la sélection des cases. Pour ça on va créer un nouveau container identifié par sélection. C'est ce container qui va accueillir les numéros qui ont été joués. Et pour ça, on va ajouter un petit bout de code JavaScript. On va commencer par intégrer l'événement sur le bouton. Donc si on clique sur chacun des 49 boutons, on appelle une fonction qui s'appelle jouer à laquelle on va passer un argument qui est la valeur. C'est-à-dire pour le bouton qui porte le numéro 1, on envoie à la fonction jouer l'argument 1. Maintenant, on va intégrer le script. On va commencer par écarter les numéros qui ont été joués. Alors, on va les masquer. On applique le style CSS visibility égal à hidden. C'est bien. Après, on va ajouter le numéro qui a été sélectionné au container sélection. Bien sûr, le fait d'utiliser la méthode appendChild s'avère meilleur, mais pour simplifier, on va juste utiliser l'attribut innerHTML. Et comme valeur, on va mettre le code HTML du bouton. Et pour la valeur, on mettra l'argument val. Exécutons. C'est bien, on constate que le bouton a été ajouté. Mais à chaque fois, le numéro précédent qui a été joué est écrasé. Donc on va mettre ici une concaténation. Réexécutons. C'est bien. Il faut pas oublier que l'utilisateur peut jouer juste 6 numéros. Donc ce qu'on va faire, c'est limiter le nombre de boutons qui ont été sélectionnés. Alors pour ça, on va initialiser une variable i à 0. Puis on mettra une condition. Alors si i est inférieur à 6, on exécute ce bout de code et à chaque fois on va incrémenter i. Exécutons. C'est bien. Alors on est limité à 6 boutons. Ce qui reste à faire maintenant, c'est créer le bouton de type submit qui permettra de poster les numéros qui ont été joués à la page qui va assurer le tirage. On va faire ça ici. Donc c'est un formulaire que l'on va créer. Alors la page qui va assurer le tirage est appelée tirage.php. Ça donne ceci. On va encore appliquer du CSS. C'est presque le même style qu'on a appliqué pour les boutons, avec quelques modifications près. On a changé la couleur d'arrière-plan et la couleur de la bordure. Pour le texte, on veut que ça soit noir et display inline-block comme des boutons normaux. On va aussi ajouter des marges. Vous constatez qu'il y a quand même une petite redondance en ce qui concerne les styles qui ont été appliqués, c'est-à-dire qu'il y a des styles qui sont communs entre le bouton type submit et les boutons normaux. Alors on aurait pu prévoir une classe qui va englober les styles communs et appliquer juste les styles qui sont différents de manière indépendante. Mais bon, on a opté pour cette méthode. Exécutons. On ajoute aussi une pseudo-classe, c'est-à-dire au cas où le bouton est survolé. On applique juste une ombre portée. On va opter pour une couleur claire pour que ça donne effet de déclarage. On change aussi la couleur du texte. Donc ça donne ça, c'est bien. Il faudrait quand même styler les boutons qui ont été joués. Le container, c'est sélection. Alors là, tous les boutons qui sont intégrés dans ce container auront le style suivant. On va copier presque la même chose. Donc vous constatez que la redondance ici, c'est un peu plus perceptible. Alors là, une classe ferait vraiment l'affaire. On va quand même changer la couleur d'arrière-plan pour que ça soit différent de celle des boutons qui n'ont pas été joués. C'est presque les mêmes styles avec quelques couleurs qui ont été changées. Exécutons. Les boutons sont trop larges, on va réduire leur largeur, on mettra juste 60. Exécutons encore une fois. Je crois que c'est bien. On appliquera juste une marge sur le container. Non, comme ça c'est mieux. On peut appliquer une autre modification, c'est-à-dire on peut masquer le bouton jouer. Autrement dit, tant que l'utilisateur n'a pas sélectionné les 6 numéros, dans ce cas il pourra pas soumettre le formulaire. Alors on va masquer le bouton et on va juste ajouter une condition dans le code JavaScript afin d'afficher le bouton submit une fois les 6 numéros ont été joués. Alors là, on mettra la condition. Donc si i est égal à 6, on affiche le bouton type submit. Comme ça, exécutons. Donc là, le bouton s'est masqué. Une fois les 6 numéros ont été joués, le bouton est affiché et du coup l'utilisateur peut soumettre ses cases. Il reste un dernier détail, c'est quand l'utilisateur va cliquer sur le bouton jouer, il n'y a rien qui va vraiment être soumis parce qu'il n'y a pas de champ dans le formulaire à part le bouton submit. Donc ce qu'on va faire, c'est intégrer une zone de texte cachée ou bien un input type hidden. Dans lequel on va lister les numéros qui ont été joués. On va plutôt mettre type texte initialement pour être sûr que le comportement de la page s'accorde bien avec ce qui est attendu. Et après, bien sûr, on va changer le type. Et on appelle sélection. Et là, on va ajouter une instruction qui va appliquer les numéros joués à la zone de texte sélection. N'oublie pas de mettre la concaténation pour conserver les numéros qui ont été précédemment joués. Et là on met val. Si on fait que ça, les numéros seront collés, alors on va mettre un espace après. Exécutons. Donc notre zone de texte est là. Quand je clique, on voit bien que les numéros qui ont été joués s'affiche aussi dans la zone de texte. Maintenant, il est temps de masquer cette zone parce qu'on sait que ça fonctionne très bien comme on le souhaite. Alors, plus la peine que ça s'affiche. Alors, ça donne ceci. C'est bien. Maintenant, quand l'utilisateur clique sur jouer, il va aller sur une page qui s'appelle tirage. C'est dans la vidéo prochaine que l'on va traiter le code de cette page, mais pour le moment, on va juste s'assurer si les numéros ont bien été transférés à cette page. On va faire juste un petit test. Comme ça, on va récupérer le champ et exécutons. Il s'affiche bien les 6 numéros qui ont été joués par l'utilisateur. Alors là, on a fini avec la première page qui assure la création de la grille et la sélection des numéros. Dans la prochaine vidéo, on va traiter le code de la page qui va assurer le tirage aléatoire et l'affichage du résultat. J'espère que cet exemple vous a plu. Merci pour votre attention et à la vidéo prochaine.
