Comprendre le développement Web : un guide du Web pour débutants

1. Introduction à la « Compréhension du développement Web »: Bonjour et bienvenue à ma première classe Skillshare, compréhension du développement web. Je suis Chris. Je suis un développeur web autodidacte et créateur de contenu qui travaille pour des startups et des petites entreprises en tant que freelance depuis 2015. Travaillant à distance, j'ai pu utiliser cette compétence pour travailler à partir de sites partout dans le monde et pour une variété de clients. Je suis un grand croyant dans le pouvoir d'apprendre à coder et je suis heureux de partager avec vous ce que je crois sont les principales choses que vous devez savoir pour comprendre comment fonctionne le web et comment vous pouvez le développer. Dans ce cours, nous discuterons de certains des principaux concepts derrière le développement pour le web, y compris : un pour vous familiariser avec le fonctionnement du web, deux pour apprendre la différence entre le développement frontal et le développement back-end, et trois pour vous comment déployer votre propre site Web sur Internet. Nous allons également passer en revue certains des outils et langages nécessaires au développement web, y compris HTML, CSS , JavaScript, PHP et MySQL, et des frameworks tels que Bootstrap et Jquery. Mon objectif pour cette classe est qu'à la fin, vous aurez une large compréhension du développement web et de devenir clair de la façon dont vous voulez utiliser cette importante compétence de développement web dans votre carrière professionnelle ou pour un usage personnel. Donc, si vous êtes prêt à commencer, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Que contient ce cours: Donc, dans cette classe, je vais vous donner un aperçu du développement web et vous donner un avant-goût du développement HTML, CSS, JavaScript, PHP et MySQL, en plus de vous aider à déployer votre site Web sur Internet. À la fin de la classe, vous devriez être capable de comprendre la différence entre front-end et back-end, le but de HTML, CSS et JavaScript, ce qu'est un framework et pourquoi vous devriez en utiliser un, le but de PHP et MySQL la différence entre un nom de domaine et l'hébergement, et enfin, comment publier votre site Web sur Internet. Je crois que le développement web est mieux appris en faisant, et donc cette classe va être très pratique plutôt que purement théorique. Vous apprendrez ce que sont HTML, CSS, JavaScript et PHP en les utilisant réellement. L' objectif à la fin de cette classe est que vous ayez une bonne compréhension du web et du processus de développement web, après quoi, vous serez en meilleure position pour choisir domaine de développement web sur lequel vous souhaitez en savoir plus. Donc, sans plus tarder, commençons la première leçon de compréhension du développement web. 3. Comment éditer n'importe quelle page sur le web: Pour commencer ce cours, je veux vous montrer quelque chose de cool que vous n'avez peut-être pas réalisé. Cela aidera à démontrer la différence entre le front end et le backend dans un contexte réel de la vie avant d'entrer dans la théorie. Pour cette démo, j'utilise un navigateur appelé Google Chrome. C' est celui que j'utilise en tant que consommateur et régulièrement en tant que développeur web. Mais vous pourriez utiliser Firefox, que j'ai ouvert ici aussi, et Safari. Vous pouvez faire des choses similaires, peu près la même chose, juste avec des outils légèrement différents dans l'un de ces navigateurs. Je vais te montrer comment faire ça en une seconde. Mais revenons à Chrome et allons sur Google.com. Maintenant, vous pouvez faire cette petite expérience dans n'importe quel site Web du tout. Mais je pensais qu'on irait si un site que nous connaissons tous, et c'est Google.com. Maintenant, un secret peu connu que vous ne connaissez peut-être pas déjà est que vous pouvez modifier pratiquement n'importe quelle page Web directement dans votre navigateur. Tout ce que vous avez à faire dans Chrome, est un clic droit sur n'importe quel élément. Je vais faire un clic droit sur ce bouton ici et cliquez sur Inspecter. Je l'ai fait un peu vite. Cliquez avec le bouton droit, cliquez sur Inspecter. Ce que cela ouvre sur le côté ici est le Google Chrome Developer Tools. Si nous allons dans Firefox et allons faire la même chose, Google Chrome. Je viens de Google.com. Allez sur Google sur Safari aussi. Sur Firefox, nous pouvons faire exactement la même chose. On peut inspecter l'élément, et il amène une console similaire ici. Sur Safari, vous devez aller dans Préférences et activer les Outils de développement. Vous allez vers le bas pour cliquer sur Avancé, allez vers le bas dans Afficher le menu Développer dans la barre de menus. Alors à partir d'ici, je ne suis pas sûr de ce que vous cliquez. Je pense montrer Web Inspector et vous pouvez voir des choses similaires. C' est une chose similaire dans tous les navigateurs Web ou les principaux navigateurs Web. Mais comme je l'ai dit avant, j'aime utiliser Chrome. Ce que vous pouvez faire ici, c'est tout le HTML et c'est tout le CSS. Si nous allons dans la console, nous pouvons interagir directement avec la page en utilisant JavaScript. Mais ne t'écrasons pas maintenant si tu ne fais que commencer. Tout ce que je veux vous montrer, c'est que c'est complètement modifiable. Vous pouvez voir ici cette valeur. Je cliquerai dessus, puis je cliquerai à nouveau. Juste si je double-clique sur cette valeur, je peux maintenant modifier cette valeur. Vous voyez ici il dit recherche Google ici, il dit recherche Google là-bas. Je peux changer ça à ce que je veux. Peut-être que je dis ma recherche, et Wallah, vous pouvez changer le texte là-dessus. Si vous vouliez changer le style, ce qui est fait avec CSS, je peux descendre ici avec le style Element, et je peux taper en couleur, et je peux faire défiler toutes ces différentes couleurs. Je peux littéralement le colorer tout ce que je veux. Prenons du chocolat. Juste parce que ça a l'air amusant. Je peux même supprimer des éléments. Je vais cliquer dessus et appuyer sur la touche Supprimer. Boom, c'est parti. Mais avant d'être vraiment excité et de penser, « Wow, je suis en train de changer la page d'accueil de Google, » comment cela va affecter tout le monde qui utilise Google ? Cliquez sur le bouton Recharger et vous verrez que Google sort exactement comme il était à l'avance. C' est parce qu'on édite juste le front end. Lorsque vous appuyez sur recharger ou revenez à Google, il envoie une autre requête au serveur et touche le backend. Google utilise toute logique complexe qu'ils ont sur le backend pour déterminer ce qui apparaît ici. Tout ce que vous changez ici est juste dans votre navigateur et pas réellement sur Google. Mais cela, comme vous le verrez à la fin du cours, est super puissant. Pour travailler sur vos propres sites Web, vous pouvez entrer et vérifier n'importe quoi sur le front, le modifier en direct fondamentalement, et ensuite vous pouvez comprendre comment le faire dans votre éditeur de code ou autre. La raison pour laquelle je voulais vous montrer que tout droit est parce que je pense que c'est un moyen pratique de démontrer physiquement la façon dont le Web fonctionne ou plutôt comment le frontend fonctionne parce que vous pouvez interagir avec, j'ai juste appuyez sur l'option Commande I sur Mac. Si vous utilisez Mac et que vous utilisez Chrome pour ouvrir les outils de développement, vous pouvez interagir avec n'importe quelle page Web sur Internet, toutes les ressources frontales, le HTML, le CSS, le JavaScript, que nous aborderons plus tard. Il ne vous montre pas le backend malheureusement parce que c'est tout privé, mais nous allons comprendre pourquoi le backend est privé et comment nous travaillons avec le backend dans ce cours également. Ce que je vais faire dans la prochaine vidéo, c'est plonger dans la théorie, ce qui est un peu lourd, c'est pourquoi je voulais d'abord faire cette vidéo. Ensuite, nous allons entrer dans un code réel. J' espère que c'était une petite démo cool, et parlons maintenant de théorie dans la leçon suivante. 4. Extrémité frontale vs extrémité arrière: Probablement le concept le plus important pour comprendre le développement web, est l'idée entre front-end et back-end. Pour expliquer cela, je veux utiliser un diagramme de Felix Thea. Je vais aller à felixthea.com/frontend-vs- backend. Au bas de cet article, vous pouvez trouver le diagramme. Ce que nous avons vu dans la première vidéo, c'est que j'interagissais avec ce qu'on appelle le frontend. Comme vous pouvez le voir, le code frontend est toujours écrit en HTML, CSS et JavaScript. Le code frontend est fondamentalement ce qui vient à donner à votre navigateur pour créer ce que vous voyez et interagir avec dans votre navigateur. La raison pour laquelle le code sur le frontend est toujours HTML, CSS et JavaScript, est parce que nous utilisons tous navigateurs web similaires comme Chrome, Safari et Firefox. Des normes internationales devaient être élaborées pour que les développeurs se mettent d'accord sur les technologies qui constitueraient les sites Web que nous voyons et avec lesquels nous interagissons. Le frontend, cependant, n'est que la pointe de l'iceberg car le backend peut être infiniment plus complexe. Le rôle du backend est simplement de générer le frontend, mais d'une manière beaucoup plus intelligente. Revenons à notre exemple dans la première vidéo. Que se passe-t-il lorsque nous cliquons sur « Recharger » après avoir édité la page ? Les changements disparaissent, non ? Eh bien, bien sûr, ça a du sens. Google ne va pas nous laisser changer leur site Web, mais que se passe-t-il réellement lorsque nous cliquons sur ce bouton de rechargement ? La réponse est que nous créons une nouvelle requête au serveur. Lorsque nous faisons cette demande, le backend effectue un nombre quelconque de calculs simples ou complexes, puis envoie au navigateur HTML, CSS et JavaScript. Ces trois scripts sont ensuite interprétés par votre navigateur pour générer le site Web que vous voyez et avec lequel vous interagissez. Dans l'exemple Google, le backend peut calculer le numéro 1, pays à partir duquel vous accédez au site Web. Numéro 2, que vous soyez connecté ou déconnecté. Quels que soient les calculs que Google peut effectuer sur le backend, est complètement privé. Le code backend ne parvient jamais à votre navigateur, et par conséquent, il n'y a aucun moyen de le visualiser. Contrairement au frontend, le backend d'un site Web peut être généré ou créé à l'aide de n'importe quel langage de programmation ou technologie. Votre navigateur nécessite toujours HTML, CSS et JavaScript, mais il ne se soucie pas vraiment de la façon dont il y arrive. Il se soucie juste que le code sur le frontend soit lisible. Cela dit, il y a quelques choix populaires qui alimentent la majeure partie du web. Ce sont PHP, Ruby, Python, Java, C # et C ++. Revenons au diagramme. Nous avons parlé du frontend et du backend, mais il y a un autre point d'interaction ici, et c'est la base de données. La base de données est l'endroit où les données sont stockées. En utilisant cet exemple dans le diagramme, un utilisateur peut cliquer sur un bouton pour accéder à une galerie de photos. La requête est ensuite envoyée au backend, qui interroge ensuite la base de données, puis la base de données retournera les informations de photo au backend. Ensuite, le backend déterminera ce qu'il faut envoyer au navigateur. Si tout a du sens en ce moment, génial, mais sinon, gardez à l'esprit que vous commencerez à mieux comprendre une fois que vous commencerez à travailler directement avec le backend et le frontend, et une fois que nous aurons un code, mais pour terminer cette section, je voulais juste partager un dernier exemple assez commun dans le développement web, et c'est un processus appelé authentification. Maintenant, l'authentification est quelque chose que vous rencontrez probablement tout le temps. C' est juste un mot de fantaisie pour se connecter à quelqu'un et déconnecter quelqu'un à partir d'un site Web ou d'une application. Si un utilisateur est authentifié, cela signifie simplement qu'il a été en mesure de s'identifier et de se connecter au site. L' authentification implique toujours ou doit toujours impliquer le backend, car les informations de l'utilisateur doivent toujours être sauvegardées privé et il doit interagir avec la base de données. Rappelez-vous, tout ce qui se trouve sur le backend, y compris la base de données, n'est pas visible pour l'utilisateur. Seul ce qui est livré au frontend peut être visualisé et interagi avec. Dans le cas de l'authentification, l'utilisateur numéro 1, tape son nom d'utilisateur et son mot de passe, puis clique sur « Entrée ». Numéro 2, les informations sont ensuite envoyées au backend, qui interroge la base de données pour voir si un, le nom d'utilisateur existe dans une base de données et deux, si le mot de passe correspond à ce qui est stocké pour cet utilisateur. Numéro 3, si les deux conditions correspondent, le backend décide que l'utilisateur doit avoir accès et, en collaboration avec le frontend, déclare l'utilisateur comme connecté. Voyez-vous maintenant comment le frontend et le backend interagissent ? Faisons-le, je pourrais vous jeter beaucoup plus de théorie, mais le développement web est mieux appris en faisant. Sautons dans le code dans la prochaine vidéo. Encore une fois, rappelez-vous que vous n'avez pas besoin d' avoir tout super clair pour sauter dans la section suivante. C' est toute la théorie qui aura tellement plus de sens quand nous entrons dans un code. Revisionnez simplement cette vidéo si vous en avez besoin, mais sachez qu'une fois que nous aurons terminé ce cours, les concepts dont nous avons parlé dans cette leçon deviendront plus clairs. Jetons dans un peu de HTML dans la prochaine vidéo. 5. HTML: Plongons directement dans du HTML. Pour cela, nous allons avoir besoin d' un éditeur de code. Si vous utilisez Windows, vous pouvez simplement ouvrir le Bloc-notes et utiliser le Bloc-notes de manière réaliste. Sur Mac, je ne recommande pas nécessairement d'utiliser l'édition de texte, donc je recommande de télécharger un éditeur de code gratuit. Celui que j'utilise s'appelle Atom. Vous pouvez le trouver juste en allant sur atom.io et le télécharger. C' est vraiment, comme vous pouvez le voir, assez maigre et agréable de travailler avec. J' ai mon navigateur ouvert bien sûr. Nous allons avoir besoin d'un navigateur Web pour voir notre projet réel. Ce dont vous aurez besoin, aussi, est un dossier de projet que j'ai mis en place ici. Ce que vous allez faire en premier, c'est aller sur cette page pour nous obtenir un peu de modèle, un point de départ pour un projet de base. Vous pouvez taper ceci dans Google, je suis sûr qu'il viendra ou je peux insérer le lien quelque part. Vous faites simplement défiler ici et vous pouvez copier coller ceci. Je vais copier ça, diriger vers ce fichier et le coller. La raison pour laquelle nous n'avons pas la belle coloration, comme elle l'a fait ici pour les différentes parties, est parce que notre éditeur de code ici, Atom ne sait pas quel type de fichier il s'agit. C' est toujours une bonne idée de sauver notre projet tout de suite. Allons dans Fichier, cliquez sur « Enregistrer sous », et dans notre répertoire de projet, nous allons le nommer. Vous pouvez le nommer comme vous voulez, aussi longtemps qu'il has.HTML à la fin. Vous pouvez le nommer avec une extension différente comme TXT, mais alors votre navigateur et votre éditeur de code ne sauront pas que c'est HTML. Pour une page d'accueil d'un site Web, c'est généralement index.php et c'est pour quelques raisons que nous pourrions examiner plus tard. Mais pour l'instant, appelons-le index.html. Je vais juste fermer ça. Soudain, vous avez la coloration parce que Atom sait que c'est HTML, et soudain vous avez votre projet ici aussi. Une fois que nous ajoutons d'autres fichiers, cela devient important car nous pouvons aller dans les autres fichiers, cliquer dessus et les éditer. Juste la navigation générale. Ce que nous allons faire maintenant que nous avons un fichier HTML, c'est le voir. Il y a quelques façons de le faire. Le moyen le plus simple est juste de cliquer dessus avec le bouton droit de la souris et de cliquer sur ouvrir avec. Chrome est l'application par défaut sur mon ordinateur pour ouvrir HTML, donc je peux simplement cliquer dessus et bam, il arrive. Maintenant, vous pensez peut-être, eh bien, nous avons juste un écran blanc. Comment sais-tu que ça arrive avec succès Chris ? que je sais, c'est là-haut. Ici, il est écrit le HTML5 Herald, qui est ce que nous avons dans cette étiquette de titre ici, le HTML5 Herald. Si nous changeons cela, changeons simplement cela à mon projet HTML et appuyez sur « Enregistrer ». J' utilise juste Command S sur un Mac, mais vous pouvez aller enregistrer comme ceci, ou n'importe quel raccourci c'est. Ensuite, nous cliquons sur notre navigateur, nous cliquons sur « Reload » ou Commande R, et nous pouvons voir que le titre de la page est maintenant changé. Nous pourrions faire une série de deux heures sur HTML dans ce cours, mais je veux juste vous donner un aperçu. Il y a beaucoup d'informations ici, mais les principales choses que vous devez savoir, c'est la tête et le corps. Dans la section tête, vous ne pouvez pas nécessairement voir sur la page ce qui se passe en tête, mais il y a quelques balises importantes qui vont ici. Vous pouvez créer un lien vers des fichiers externes ici. Celui-ci n'existe pas encore, c'est juste dans le modèle. Il y a des méta informations ici qui sont importantes pour le référencement. Il y a le titre avec lequel nous avons déjà interagi, et il y a d'autres choses que vous pouvez mettre ici aussi. Mais la balise body est l'endroit où vous allez mettre des choses qui apparaîtront dans le corps réel de votre document HTML de votre page Web. Quelques éléments de base que nous pouvons mettre dans notre corps pour commencer est un div. Ce qui est fondamentalement juste un bloc, et ça nous donne juste un moyen d'organiser notre code. Vous pouvez mettre deux divs dedans. En passant, la convention reste toujours la même avec HTML. Vous faites un signe inférieur à, puis le nom de l'élément sans espace, puis un signe supérieur à, puis vous mettez le contenu à l'intérieur, et à la fin vous faites exactement la même chose sauf que vous mettez une barre oblique devant le nom de l'élément. Comme vous pouvez le voir, nous avons deux divs ici. Mais si je clique sur Enregistrer, nous ne verrons rien parce que ces divs sont juste pour structurer fondamentalement. Nous ne verrons rien sauf si nous définissons des styles sur ces divs ou si nous y mettons du contenu. Ce que je vais faire, c'est mettre, que dois-je faire ? Une étiquette de titre. La plupart des pages Web commencent par une balise de titre, et il y a quelques balises de titre que nous pouvons faire. Il va de H1, H2, H3, H4, jusqu'à H6, peut-être même plus longtemps. Je pense que H6 pourrait être le plus long. Mais H1 est un titre qui est censé être le titre de premier niveau. Habituellement, vous n'avez qu'un seul H1 dans une page Web et appelons simplement ce titre de page. Ensuite, pour fermer cette étiquette, comme nous l'avons mentionné, même chose que ce qu'on a fait pour l'ouvrir, on a juste mis une barre oblique devant ça. Je vais cliquer sur « Enregistrer », faire le même processus, venir ici, recharger la page et boom, vous avez un titre de page. Ce que nous allons faire ici, dans cette div, est de mettre une balise p, et p tag signifie juste paragraphe. C' est quand on met un peu de texte. Je vais dire, c'est plutôt mauvais mais bla, bla, bla, bla, bla, appuyez sur « Sauver ». On a bla, bla, bla. n'y a rien de vraiment spécial sur les balises p jusqu'à ce que vous les assemblez, et ensuite cela vous donne la division des paragraphes. C' est une chose fondamentale que vous pouvez faire pour avoir un titre, des paragraphes, peut-être un autre titre pour une sous-section où vous faites H2, H2 et dites sous-section. Voila. Juste pour ramener à la maison la différence, parce que pour l'instant ces divs ne font rien vraiment, c'est que je vais appliquer un style. Nous entrons un peu dans CSS maintenant, mais ne soyez pas averti, n'ayez pas peur. Ce que nous allons faire ici, c'est donner un attribut à notre élément. façon dont nous faisons cela est que nous trouvons le dernier caractère du nom de l'élément, l'espace presse, et l'attribut que nous allons lui donner est le style. Nous allons taper dans le style, équivaut à des guillemets doubles ouverts et fermer des guillemets doubles. Mon éditeur de code me donne déjà les guillemets doubles de fermeture parce qu'il sait ce que j'essaie de faire. Donnons à ça une bordure, donc je vais taper une bordure, un px, noir solide. Mettez un point-virgule pour dire que c'est la fin de la règle, cliquez sur « Enregistrer », et vous verrez que la boîte a maintenant une bordure qui la rend réellement visible. Ce que nous pouvons faire ici, est de copier cette balise de style, mettre ici, d'appuyer sur « Enregistrer », puis vous pouvez voir la deuxième div. divs sont importants pour l'imbrication, nous pouvons rendre ces divs plus petits, nous pouvons les mettre côte à côte, et cela nous permet d'affecter la structure de notre page. Comme je l'ai dit, nous pourrions passer des heures sur HTML, et il y a tellement d'autres éléments que vous pourriez apprendre, mais c'est un cours d'aperçu. Je viens de vous donner un peu de teaser. Vous pouvez plonger profondément dans le HTML à travers un autre cours, ou peut-être que je peux en créer un pour vous si vous le souhaitez. Mais cela devrait vous donner quelques indications sur ce que le HTML fait pour vous. Il s'agit essentiellement du contenu de votre page Web et de la façon dont elle est structurée. Dans la prochaine vidéo, nous allons parcourir CSS, ce que nous avons fait un peu de style ici. Mais il est déjà temps pour un peu de CSS, donc nous allons construire sur ce que nous avons fait ici avec un peu de style. 6. CSS: Très bien, donc dans cette leçon sur CSS, je vais commencer là où on s'est arrêté dans la dernière vidéo. Ce que nous avons ici est notre fichier HTML, et nous avons le résultat de notre fichier HTML dans notre navigateur. Maintenant, une chose sur laquelle je veux attirer votre attention ici est ce lien vers une feuille de style externe. C' est en fait une balise qui n'a pas de balise de fermeture car elle n'a pas de contenu. Il a juste des attributs. Ce que je veux dire par là, c'est que vous n'avez pas besoin d'aller comme ça pour le fermer parce qu'il n'y a rien entre les deux, c'est juste un lien vers une feuille de style externe. Le premier attribut ici est rel égal à feuille de style. indique simplement que nous sommes liés à une feuille de style fondamentalement, et href est juste l'emplacement de la feuille de style. abord, c'est tout avant que le styles.css soit un chemin de dossier donc nous allons avoir besoin de créer un dossier appelé CSS dans ce répertoire. Ensuite, nous allons avoir besoin de créer un fichier appelé styles.css. Ceci est juste un paramètre de requête supplémentaire qui parle de la version. En fait, je n'ai jamais eu besoin de l'utiliser avant, alors débarrassons-nous de cela pour plus de simplicité. Bon, donc comme je l'ai dit, nous devons aller dans notre répertoire de projet, nous devons créer un nouveau dossier appelé CSS. Comme vous pouvez le voir, tout va arriver ici pour qu'il puisse facilement être navigué à partir de notre éditeur de code. Je vais aller dans ce dossier. En fait, je ne crée pas le nouveau fichier ici. Je retourne dans l'éditeur de code et ce que je peux faire est de créer un nouveau fichier dans l'éditeur de code. Avant d'écrire un CSS, je vais l'enregistrer avec l'extension appropriée afin que notre éditeur de code et notre navigateur sachent exactement quel type de fichier il s'agit. Comme nous l'avons défini dans notre balise de lien, je pense que c'était styles.css, donc vous devez l'appeler un point CSS. On peut toujours changer ça à ce qu'on veut. On n'a pas besoin d'être des styles. Nous avons juste à mettre à jour le lien dans le document HTML, mais il doit toujours se terminer par point CSS. Donc maintenant, nous avons notre fichier CSS point. Oui, comme nous pouvons le voir, cela devrait maintenant être lié à ce fichier HTML car nous avons cette balise de lien et cette adresse est CSS. Donc, il va dans le dossier CSS. En fait, je l'ai nommé avec des majuscules alors que peut-être n'aurait pas dû. Maintenant, il va à CSS, puis il va à styles.css, que nous avons là. Maintenant, je peux déjà voir une opportunité de créer une classe CSS dans notre document. C' est là que vient cette occasion. J' ai deux divs et je copie et colle du code. C' est une bonne leçon à apprendre pour tous ceux qui font du développement web. Chaque fois que vous copiez et collez du code beaucoup, il y a probablement une meilleure façon de le faire. Dans ce cas, au lieu de définir des styles particuliers sur chacun de ces divs, nous pouvons définir un nom de classe pour ces deux divs, puis définir les styles qui sont attribués à ces noms de classe en CSS. Maintenant, tout comme en HTML, il y a tellement de choses que nous pouvons faire avec CSS et cela pourrait être un cours de deux heures seul. Donc, je vais vous donner juste un peu de CSS dans cette vidéo. Mais ce que je vois ici est la grande opportunité pour nous d'utiliser CSS pour créer une classe. Maintenant, pour créer une classe, ce que nous devons faire est de commencer par un point. Vous allez simplement dans votre fichier CSS et appuyez sur point. Ensuite, nous pouvons nommer une classe. Je vais juste appeler ça box. Nom très simple, mais nous n'avons besoin de rien d'autre. Maintenant, cela définit notre classe fondamentalement, mais nous devons lui donner des styles, sinon cela ne va rien faire. Nous ouvrons un support bouclé [inaudible] et M est déjà généré un support bouclé de fermeture pour moi. Ensuite, je vais appuyer sur Entrée. Ce que nous pouvons faire, c'est que nous pouvons retourner ici où nous avons ce style défini. Prends ça, mets-le ici. Maintenant, n'importe quel div ou n'importe quel élément de cette question où il peut avoir une bordure, chaque fois que nous mettons cette classe dessus, il aura une bordure d'un pixel de large, solide et noire. Faisons ça maintenant. On va supprimer tout ça et au lieu du style, on va avoir de la classe. Rappelez-vous quand nous avons mis dans la classe, la même convention qu'avant, avec un signe égal et deux guillemets doubles, mais nous ne mettons pas réellement le point dans. Nous avons défini la classe ici. En CSS, nous définirons le point pour nous assurer que tout le monde sait qu'il s'agit d'une classe. Mais ici, nous tapons juste dans la boîte. Ce que nous pouvons faire est de copier cela et de le remplacer par boîte. Maintenant, vous pourriez penser que nous n'avons pas sauvé autant de personnages. Mais une fois que vous commencez à générer des tas de styles, comme peut-être vous voulez mettre une min-hauteur ici et tout cela. Nous ne voulons pas avoir à copier et coller l'un de ces changements, est juste un système beaucoup mieux organisé pour avoir des classes. Ceux-ci héritent tous des styles que nous avons définis ici. Si je donne ça un vraiment évident comme 500 sera super évident. Maintenant, vous verrez tous les divs avec la boîte de nom de classe, que nous pourrions appeler des boîtes, va être d'une hauteur minimale de 500. Je vais recharger et bam, maintenant tout avec une boîte de classe va être 500. Il y a d'autres façons de cibler des éléments dans ce domaine également. Si vous voulez cibler chaque élément, il suffit de taper le nom de l'élément p. Cela va créer un style sur chaque élément p. Je vais juste aller à la couleur. Ces règles de style, vous ne les connaîtrez pas tout de suite, vous les apprenez simplement au fil du temps. Tu n'aimes pas, oh, comment tu changes la couleur du texte ? Comment changez-vous ça ? Littéralement juste Google. C' est juste un jeu de mémoire pour beaucoup de ces choses. Mettez dans un espace là, et faisons la couleur bleue. Maintenant, vous pouvez voir chaque balise de paragraphe va maintenant avoir cette couleur bleue. Ce que nous aurions pu faire ici est juste aller div et chaque div aurait eu cela donc ça va cibler chaque div. Mais si nous voulons avoir des divs qui n'ont pas les styles et des divs qui ne le font pas. Il est préférable d'être spécifique et de mettre un nom de classe. Maintenant, l'autre que nous avons est un ID et qui est défini avec un hachage. Un ID ne doit être donné qu'à un seul élément. Nous aurons un nom vraiment spécifique comme box1. Que devrions-nous faire ici ? Donnons-lui une couleur de fond de noir. Essayons juste. Ce ne sera pas le plus beau site Web, mais vous obtenez le message. Maintenant, ce qu'il faut faire ici, c'est donner une de ces boîtes, l'identification. C' est juste une simple question d'ID équivaut à box1. C' est vrai. Box1 sans le hachage parce que nous lui avons déjà donné son nom d'attribut. Va ici et comme noir. Maintenant, évidemment, nous avons un autre problème maintenant, qui est que la couleur du texte est noire aussi, donc vous ne pouvez pas le voir. Si nous voulons avoir un fond noir, il va sans dire que nous allons avoir besoin d' peu de contraste dans le texte afin que nous puissions changer la couleur en blanc. Maintenant, au risque d'entrer dans quelque chose d'un peu plus compliqué, plus de réactivité mobile est très importante à l'époque actuelle du développement web. Vous pouvez définir des styles en fonction de la taille de l'écran à l'aide de balises multimédias. Maintenant, je saute quelques pas ici parce que nous avons à peine gratté la surface avec CSS, mais je voulais juste vous donner pour quand vous atteignez cette section de, comment puis-je rendre mon site web réactif ? C' est à travers les tags de médias. Vous pouvez avoir, à l'écran des médias. Ensuite, vous définissez. Encore une fois, je ne vais pas passer beaucoup de temps là-dessus. Je vous montre juste un exemple, largeur maximale, 500 pixels. Ensuite, nous allons ouvrir les crochets bouclés et ensuite nous devons mettre une autre chose ici. L' autre chose avec CSS est plus spécifique la règle est, plus elle remplacera une autre règle. Par exemple, on est là, on n' était pas très précis ici, on dit juste que tous les p sont bleus. Si je suis plus spécifique et dire que la largeur maximale 500 de l'écran, je peux mettre une autre règle. Lorsque la largeur de l'écran est inférieure à 500 pixels, cette règle remplace cette règle ici. Je vais le rendre rouge à la place. Je vais recharger la page et vous ne pouvez rien voir de différent. Mais si je vais redimensionner la fenêtre, regardez ça. Soudain, à 500 ans, le texte devient rouge. Ce n'est pas si pratique d'une application, mais vous pouvez comprendre le concept, au moins que les requêtes média vous permettent de modifier le style de votre page Web en fonction de la taille de l'écran. Très bien, donc j'espère que cela explique un peu CSS. Encore une fois, beaucoup de profondeur vous pouvez aller dans CSS. Nous n'avons pas beaucoup de temps pour couvrir toutes les différentes choses que vous pouvez faire avec CSS. J' espère que c'était un bon aperçu. Dans la vidéo suivante, nous allons parler du script différent final ou d'un morceau de code que vous voulez avoir sur votre front, et c'est JavaScript. Je suis impatient de vous voir dans la prochaine vidéo. 7. Javascript: Très bien, donc dans cette vidéo, nous allons parler de JavaScript. On va sauter là où on s'est arrêté comme on l'a fait dans la dernière vidéo. Ce que notre document HTML a ici qu'il avait avant pour CSS, ici il avait une balise de lien vers CSS qui a défini où mettre notre fichier CSS. Ici, nous pouvons voir une balise de script dans notre section corps qui nous donne un chemin pour mettre notre JavaScript. Je vais suivre ce que le modèle dit ici et je vais aller dans mon répertoire de projet qui est ici. Je vais faire un nouveau dossier, appelez-le js, ce qui est en passant, c'est une convention standard pour mettre vos fichiers HTML à la racine. C' est ce qu'on appelle la racine du répertoire. Ensuite, placez vos fichiers CSS dans un dossier CSS et placez vos fichiers JavaScript dans un dossier JavaScript. Je vais revenir ici pour générer un nouveau fichier. Cliquez sur Nouveau fichier. Je vais un peu plus vite cette fois parce que nous avons déjà passé ça, donc j'espère que c'est bien pour vous les gars. Ce que je vais faire ici, c'est, Enregistrer sous et je vais aller en JavaScript. J' ai oublié ce qu'ils appelaient ça. Ils l'ont appelé scripts dot js. Je vais retourner ici, Enregistrer sous, aller dans js, copier à travers ça. Ce n'est pas le cas, copier-coller, donc je dois le taper. C' était juste des scripts dot js. Cool. Maintenant, tout le monde sait, le navigateur sait, l'éditeur de code sait que, c'est un fichier JavaScript. Les fichiers JavaScript se terminent par dot js. Juste pour être clair, nous n'avons pas besoin de suivre ces chemins, je pourrais changer n'importe lequel de cela, mais il doit juste correspondre à l'endroit où le fichier est stocké. C' est juste un lien vers le fichier où qu'il soit. Je suis juste en train de suivre la convention ici parce que c'est assez standard convention. Maintenant, avant d'écrire du JavaScript, il est important de savoir ce que JavaScript est réellement. JavaScript est un langage de programmation. JavaScript est le langage de programmation frontal interactif. Ce que je veux dire par là, c'est qu'il est livré avec le front end. Chaque fois que vous interagissez avec une page, vous cliquez sur quelque chose et quelque chose s'ouvre. C' est JavaScript qui fonctionne pour vous, sauf bien sûr, il recharge la page, auquel cas cela envoie probablement une requête au serveur qui crache le HTML, CSS et JavaScript à nouveau. J' essaie juste de penser à ce qui est une chose lourde JavaScript que nous pourrions regarder. Google Sheets, par exemple et Gmail et tout cela, ce sont des applications en temps réel. Toute l'interaction faite ici est JavaScript parce que, comme vous pouvez le voir, tout est en temps réel. Si je clique sur ceci et ceci, et cliquez sur cela et qui se cache et qui montre. Je clique dessus, cela s'ouvre. Il définit la façon dont vous interagissez avec une page Web. Comme vous pouvez le voir, comme je fais tout cela, la page Web ne se recharge pas, c'est tout JavaScript. Qu' est-ce que cela signifie pour notre projet ? Cela signifie que nous pouvons manipuler certaines de ces choses ici ou déclencher d'autres fonctions. L' un des plus basiques que nous pouvons faire est un journal de console. Un journal de console est idéal pour cracher des variables ou tout ce que vous devez vérifier lorsque vous faites du développement JavaScript. Je vais juste sortir un journal de points de console et dire Bonjour monde. Vous ne comprendrez probablement pas le but derrière le journal de la console en ce moment, mais quand il s'agit de déboguer plus tard, c'est vraiment important. Je vais mettre mon navigateur là-bas, ouvrir des outils de développement et ce que je vais faire, c'est parce que nous l'avons, je vais juste le mettre au bas pour que nous puissions tout voir. Ce que vous pouvez faire, c'est vous pouvez passer sur la console ici et recharger. Il apparaît avec Hello world. Mais je sais que ce n'est pas vraiment pratique. Mais disons par exemple, que vous vouliez vérifier si une fonction fonctionnait ou quelque chose, vous pourriez mettre hello console log là-dedans. Ensuite, vous pouvez commencer à programmer des choses comme définir une variable. Vous diriez var x, appelez x, Bonjour monde. Ensuite, au lieu de journaliser explicitement Bonjour monde, vous pouvez enregistrer x et vous obtenez exactement la même chose. Quand je débogage, j'aime dire, par exemple, si j'essayais de trouver la valeur de x, je taperais quelque chose comme, x comme une chaîne. Si je mets ces guillemets de chaque côté, ça veut dire que je vais juste mettre tout ce que j'ai écrit là-bas. Ensuite, une virgule vous permet d'y mettre une autre variable ou un morceau de chaîne. Une chaîne est juste du texte comme vous le découvrirez. Alors je peux voir x est Bonjour monde. Maintenant, une autre chose que vous pouvez faire, que nous pouvons réellement voir se produire dans notre navigateur est une alerte. C' est l'une des choses les plus basiques que vous pouvez faire en JavaScript aussi. Je vais recharger la page et vous obtenez une alerte disant, bonjour monde. Chaque fois que vous rechargez la page, elle apparaîtra à nouveau. Maintenant, utilisons-la réellement pour interagir avec cette page parce que honnêtement ce que nous faisons ici, juste définir une variable et ensuite l'éteindre, ce n'est pas vraiment interagir avec notre page Web. Ce que nous pourrions faire, c'est, et je vous encourage à le faire aussi, rendez-vous sur Google et demandez à Google comment faire les choses. C' est en fait une compétence vraiment importante en tant que développeur. Les développeurs ne se souviennent pas comment tout faire et ils oublient souvent, parfois je devais faire quelque chose. Il y a beaucoup de documentation en ligne et d'autres choses. Tu n'es pas censé te souvenir de tout. Si jamais vous oubliez comment faire quelque chose ou que vous voulez simplement apprendre à faire quelque chose tout de suite. Si vous tapez une bonne question dans Google, vous obtiendrez une bonne réponse et vous saurez comment le faire. Disons simplement, comment cacher et élément avec JavaScript. Vous pouvez taper js à coup sûr. Je vais charger la page. JavaScript, afficher l'élément de masquage. Jetons un coup d'oeil à celui-ci. Ce site Web est un site Stack Overflow. Si vous avez un problème, vous pouvez aller voir quels ont été les problèmes des autres et voir comment ils l'ont résolu. Si vous avez un problème similaire, il vous donne des idées sur la façon de résoudre votre problème particulier. Ce qu'on peut faire ici, c'est que je vais copier cette partie ici. En fait, je vais copier ça. Je vais revenir à notre projet ici. Je vais aller dans nos scripts et expliquer ce que nous avons ici. Mais d'abord, avant d'expliquer, je vais modifier ça. Je vais sauver ça et je vais appuyer sur recharger. Qu' est-ce qui s'est passé ici ? JavaScript est ce qu'on appelle un langage orienté objet. Ce que cela signifie, c'est que nous pouvons cibler des éléments imbriqués en mettant des points entre eux. Encore une fois, ne vous laissez pas submerger par ça, j'essaie juste d'expliquer ce qui se passe ici. C' est essentiellement, nous commençons par le document, qui est notre page web juste ici. Nous avons un point et cette méthode est obtenir élément par ID, qui trouve juste notre élément basé sur un ID. Rappelez-vous que nous avons mis en place un ID ici pour cette div, ID box 1. Ce que nous devons faire est de mettre dans une chaîne, qui se souvient, une chaîne est juste du texte ici et nous ciblons la case 1. Maintenant, nous sommes dans cet élément et dans cet élément, nous pouvons cibler le style. Nous sommes dans le style maintenant donc nous avons besoin d'une autre chose et c'est, dans le style, nous pouvons cibler un attribut appelé display. Ensuite, nous pouvons le mettre à zéro en utilisant un signe égal. Une autre chose importante à savoir dans la programmation, je sais que je lance beaucoup de choses ici comme je pense à cela, c' est un seul égal est l'affectation. Si vous faisiez une comparaison, par exemple, si disons x, je sais que nous n'avons pas encore cette configuration de variable, mais si x est égal à un, vous feriez deux égaux. C' est plus comme ce que vous penseriez avec des égaux. Égal dans les langages de programmation comme JavaScript est des affectations. Nous disons juste, attribuez cette partie à cette partie. Comme vous pouvez le voir, il est de définir la propriété de style de tout ce qui a l'ID de la boîte un à zéro. Ce que nous pouvons faire est de mettre ceci à bloquer, qui est une autre valeur possible et il apparaît à nouveau. Cela nous donne l'occasion d'éditer des choses basées sur la logique. En ce moment, c'est juste le cacher, ce qu'il n'a vraiment pas besoin de faire. Mais ce que nous pourrions faire, c'est mettre dans un conditionnel, ce qui serait, par exemple, si quelque chose était le cas, cacher la boîte. Sans entrer dans beaucoup de détails ici, mettons juste dans une déclaration qui n'est certainement pas vraie. Si un est supérieur à deux, n'affichez aucun. Évidemment, un n'est pas plus grand que deux, donc il ne le fera pas. Est-ce qu'un de moins de deux ? Oui, c'est le cas. Ne l'affichez pas. Maintenant, je sais que c'est un exemple primitif, mais nous ne pouvons pas entrer dans une description complète de JavaScript dans cette vidéo. Mais la chose importante à savoir ici est que nous avons notre document HTML ici. Il est lié à une feuille de style, qui est là où se trouve notre CSS, qui définit nos styles. Il est également lié à notre JavaScript où nous pouvons définir le comportement frontal programmatique. Nous aurions pu, par exemple, si quelqu'un clique dessus, cela arrive. Si une boîte a une certaine taille, cette autre boîte ne devrait pas apparaître. Des trucs comme ça. Tout ce que vous pouvez vraiment penser en termes de ce qui apparaît sur le front, ce que l'utilisateur interagit avec ou ce que vous avez vu sur d'autres sites Web. Il suffit de faire ce que nous avons fait sur Google. Je sais que j'ai utilisé une partie de mon expérience pour déterminer quelle partie de la page Web copier. Si vous avez fait un peu plus creuser et c'est quelque chose que vous allez apprendre au fil du temps, est comment utiliser Google en tant que développeur. Vous pouvez voir ici qu'ils le font aussi. Documenter, obtenir l'élément par ID, en l'affectant à une variable, puis en basculant. Mais oui. Fondamentalement, vous pouvez faire une quantité infinie de choses avec JavaScript. Pour être honnête, utiliser un framework comme jQuery, lequel nous allons aller dans la vidéo suivante, est vraiment puissant et vous aide à vraiment simplifier ce que vous faites avec JavaScript en termes de manipulation HTML. Dans la vidéo suivante, je veux vous montrer jQuery, qui est un framework JavaScript populaire. Je veux aussi vous montrer Bootstrap, qui est un framework CSS populaire. Une fois que nous avons mis dans ces frameworks, qui vont faire beaucoup de poids lourd pour nous et rendre les choses beaucoup plus faciles, vous commencerez à voir que nous pouvons développer plus rapidement et plus facilement et beaucoup de développeurs développent réellement de cette façon. Il est important que vous sachiez que ces cadres existent et comment commencer à les utiliser. Je suis impatient de vous voir dans la prochaine vidéo sur les frameworks. 8. Cadres: Bienvenue de retour. Dans cette vidéo, nous allons parler des frameworks, des frameworks et de la façon dont ils nous aident à développer pour le web. Upwork ont un bon article sur les frameworks. Je suis sûr que si vous recherchez cela sur Google, vous le trouverez probablement, sinon, voici l'URL directe. Ce que j'aime dans cet article, c'est qu'il partage les caractéristiques principales d'un framework d'application Web et partage également quelques exemples communs de frameworks que de vrais développeurs Web utilisent réellement les fonctionnalités principales d'un framework d'application Web, bibliothèques, API, échafaudage, Ajax, mise en cache, sécurité et compilateurs. Selon l'endroit où vous êtes dans votre parcours d'apprentissage du code, certains d'entre eux pourraient ne pas avoir de sens, peut-être tous pourraient ne pas avoir de sens et c'est bien. La meilleure façon de penser à un cadre, c'est vraiment un cadre. C' est un tas de code qui est déjà mis en place pour vous de développer. Il prend en charge le levage lourd dans certaines zones afin que vous puissiez vous concentrer sur les parties entièrement personnalisables de votre code. Techniquement, tout est personnalisable, mais le framework est configuré de sorte que vous n'avez pas à faire des fonctionnalités communes encore et encore. Nous avons parlé de l'authentification, par exemple, dans une vidéo antérieure. C' est quelque chose qui est assez commun dans beaucoup d'applications Web et de sites Web différents. Il est logique que, cela devient une partie du cadre et ensuite d'autres choses qui vous aideront à développer plus rapidement. Il y a une courbe d'apprentissage supplémentaire avec l'apprentissage d'un cadre parce que vous devez apprendre à développer dans ce cadre. Mais cela vous fait généralement gagner beaucoup de temps et beaucoup de maux de tête et surtout sur le front, utilisant un framework CSS et un framework JavaScript, je pense que c'est une très bonne idée. Je suis sur le point de vous montrer deux frameworks que j'utilise et qui sont très populaires. Mais avant de plonger dans ces frameworks front-end, je voulais parler de ces frameworks backend. Si vous avez fait une étude sur Python, vous avez probablement entendu parler de Django, qui est, je pense que le framework le plus populaire pour Python, c'est certainement un framework très populaire. Si vous avez déjà regardé Ruby pour le développement web, vous avez probablement entendu parler de Ruby on Rails, mais il y a d'autres frameworks que vous pouvez utiliser comme Sinatra et pour PHP, il y a aussi un tas de frameworks. Code allumé que j'ai utilisé avant, et je sais que Ravel est très populaire. Ce que je veux faire est de vous montrer deux frameworks que j'utilise le plus souvent. Nous allons les télécharger dans notre projet et nous allons commencer à les utiliser immédiatement parce que comme d'habitude, la meilleure façon d'apprendre un concept est de le faire. Le premier que je veux vous montrer s'appelle un Bootstrap. Si nous tapons Bootstrap CSS dans Google, nous allons trouver Bootstrap, qui est un framework CSS. Bootstrap est vraiment puissant pour créer des sites web réactifs. Mais aussi il fournit un tas de styles déjà dedans pour créer des composants. Tout d'abord, les choses réactives, comme vous pouvez le voir ici, nous avons div et nous avons travaillé avec div dans la leçon sur HTML et CSS. Mais au lieu de construire nos propres classes, nous pouvons simplement attacher une classe immédiatement du milieu de colonne 1. Comment fonctionne Bootstrap est que comme un système de 12 colonnes. Si je mettais six là, cela signifierait que c'est la moitié de la largeur de la page et si j'y mettais trois, ça représenterait un quart de la largeur de la page. Vous pouvez commencer à, ici quelques autres exemples. Cela va prendre huit colonnes, cette division, et celle-ci va prendre quatre colonnes. Cela vous aide à construire ces conteneurs réactifs fluides et en le faisant de manière colonne. Mais aussi ce que Bootstrap fait, c'est qu'il vous donne des composants, vous pouvez venir ici et voir n'importe quel nombre de composants différents qu'il a. Si vous vouliez faire une barre de progression qui ressemblait exactement à ceci, vous pouvez le faire avec Bootstrap, vous avez juste besoin de télécharger Bootstrap, lier à votre projet, puis vous pouvez construire une structure comme celle-ci avec quelques pour dire à HTML quelle classe aller après dans Bootstrap, puis, boom, vous avez une barre de progression qui ressemble à ceci. Comme je le dis toujours, vous commencerez à comprendre comment cela fonctionne comme nous l'utilisons réellement. Mais il y a un autre framework que je veux introduire avant nous soyons coincés dans notre projet, et c'est jQuery. jQuery est un framework JavaScript. Je ne sais pas, cela rend juste faire JavaScript beaucoup plus facile et intuitif, au moins pour moi c'est le cas. Ce que nous pouvons faire avec jQuery, c'est que nous pouvons manipuler le DOM en utilisant jQuery. Pour ceux d'entre vous ne savent pas ce qu'est le DOM, son signifie Document Object Model. Cela signifie simplement votre structure de votre page que vous avez définie ici avec HTML. Nous pouvons utiliser les classes que nous avons utilisées dans CSS. Vous avez vu avant comment nous avons défini un ID avec un hachage et nous définissons une classe par un point. Vous pouvez utiliser ces sélecteurs dans jQuery pour trouver un élément ciblé, puis changer un attribut comme, c'est HTML. C' est très puissant et vous verrez en une seconde, comment allons-nous l'utiliser. Dans la prochaine vidéo, parce que celui-ci a pris un peu de temps, je vais vous montrer ces frameworks. Dans la vidéo suivante, je vais vous montrer une démonstration en direct de l'utilisation de ces frameworks. Je pense que vous allez commencer à comprendre comment ils nous font vraiment gagner du temps et beaucoup plus intuitif à utiliser. Cette vidéo est un peu longue, donc je vais la briser dans la prochaine vidéo. On va passer à la démo. 9. Bootstrap: Dans la dernière vidéo, nous avons parlé de frameworks et j'ai introduit deux frameworks que j'utilise couramment, qui étaient Bootstrap et jQuery. Dans cette vidéo, je veux parler spécifiquement de Bootstrap. Nous allons télécharger Bootstrap et nous allons commencer à jouer avec. Si vous allez à la page d'accueil de Bootstrap, qui je crois est getbootstrap.com, vous pouvez cliquer sur le bouton « Télécharger Bootstrap », et nous pouvons simplement télécharger Bootstrap en cliquant sur ce bouton ici. Je vais trouver mon répertoire de projet et je vais cliquer sur « Enregistrer ». Pour revenir à ma fenêtre de Finder, je vais ouvrir ceci parce que c'est un fichier zip. Je vais double-cliquer dessus, il va extraire. Je peux jeter le fichier zip. Si nous regardons à l'intérieur du dossier, nous pouvons voir une structure similaire à ce que nous avons déjà. Nous n'avons pas nécessairement de fonds, mais ils ont organisé leurs CSS et JavaScript de la même manière que nous. La chose que je n'ai pas nécessairement mentionné est que Bootstrap a aussi JavaScript, mais pour l'instant nous voulons juste utiliser leur fichier CSS. Allez dans CSS, et ici, bootstrap.css est le fichier que nous recherchons. Je vais juste cliquer sur le faire glisser pour le déplacer dans le dossier CSS. Je ne sais pas pourquoi ça arrive comme ça. Mais si nous retournons en arrière, nous pouvons maintenant supprimer le reste des fichiers Bootstrap. Si nous allons dans notre éditeur de code, nous avons maintenant Bootstrap dedans. Nous pouvons effectivement cliquer dessus et le regarder. C' est un fichier long et il est rempli avec un tas de styles différents, un tas de règles différentes et c'est ce qui fait fonctionner Bootstrap. Mais la bonne nouvelle, c'est que tu n'as pas à connaître tout ça. Vous avez juste besoin de savoir comment l'utiliser. Je vais fermer ça. Il y a une autre étape que nous devons faire avant de pouvoir commencer à l'utiliser dans notre projet, et c'est de lier à cette feuille de style. Rappelez-vous comment nous avons lié ici à notre styles.css ? Eh bien, nous devons recommencer. Ce que je vais faire, c'est que je vais copier cela en appuyant sur Commande C, nouvelle ligne Commande V, ou l'équivalent sur un ordinateur Windows et tous les détails seront les mêmes que définir le nom de fichier est différent, donc je vais mettre ici bootstrap.css Je veux que vous regardiez de près pendant que nous actualisons la page car il va y avoir quelques changements tout de suite. Si je recharge, vous pouvez voir que le style de notre page a déjà changé. Dans ce cas, nous savons que Bootstrap fonctionne maintenant. Comment utilisons-nous Bootstrap ? Eh bien, juste là est la documentation. documentation est juste le terme technique car vous pouvez le penser comme un manuel ou juste toutes les informations que vous devez connaître pour pouvoir utiliser un framework ou un logiciel. Ici, nous pouvons définir les colonnes comme nous l'avons mentionné précédemment, mais ce que nous pouvons faire ici, qui sera un peu plus amusant, est de copier sur un composant. Vous pouvez voir à quelle vitesse nous pouvons obtenir un site Web stylisé apparaissant sur notre écran. Je vais développer la fenêtre afin que je puisse voir la barre de menu ici et je vais descendre à l'en-tête de page. Je vais encore effondrer ça. Où est-il ? Ici, c'est. Je vais supprimer tous nos divs que nous avons jusqu'à présent, donc en sélectionnant tout cela et en le supprimant. On a un document vierge. Ce que je veux faire est de commencer à construire notre document à nouveau, mais en utilisant des éléments Bootstrap. Pour obtenir cet en-tête, nous pouvons le copier et le mettre directement dans. Maintenant, copier-coller parfois ne fonctionne pas, donc vous devriez onglet votre contenu pour le rendre aussi agréable qu'ici. Si je recharge la page, nous avons un en-tête et nous pouvons ajouter n'importe quel nombre de composants ici. Je peux aller à ce truc qu'ils appellent un jumbotron. Ça a l'air plutôt cool. Je vais copier ce code et ensuite je le mettrai après notre div d'en-tête de page. Je vais cliquer sur « Enregistrer », puis il apparaît. Maintenant, le rembourrage est un peu désactivé et c'est parce que nous n'avons pas utilisé une autre fonctionnalité de bootstrap, qui est un conteneur. Ce que je dois faire, c'est envelopper tout ce que nous venons de créer dans un conteneur. C' est tout, bien sûr, un choix personnel. C' est à vous de décider comment vous stylisez votre site Web. Mais tout ce que nous devons faire est d'obtenir un div et de lui donner une classe de conteneur. Je vais indenter cela donc il est évident que c'est dans cette div parent, et puis je vais fermer la balise div, fermeture. Maintenant, je veux que tu regardes de près. Je vais ouvrir la page et regarder que nous actualisons la page. Nous l'avons maintenant mis dans un récipient, ce qui le regarde sur un grand écran, il lui donne juste plus de rembourrage sur les côtés, puis quand nous le regardons sur un écran plus petit, le rembourrage se rétrécit, et ensuite si nous devions le déplacer comme ceci, il est réactif, ce qui, selon la façon dont vous écrivez votre code, est un énorme gain de temps. Maintenant, nous avons ce joli conteneur. Nous avons ce joli en-tête de page que nous pouvons éditer n'importe quoi d'ailleurs, nous pouvons revenir ici et dans cette balise H1, nous pouvons dire, « Notre site Web génial. » Quel serait le sous-texte de notre site génial, « Le meilleur site Web jamais. » Alors dis, au lieu de dire bonjour monde, « Bonjour et bienvenue. » Ensuite, dans notre balise p, « C'est le meilleur site Web que vous verrez jamais. » Réclamation en gras sur. Vous avez tout changé maintenant. Vous pouvez changer le texte sur le bouton aussi en entrant ici, je vais développer et entre les balises a, ce qui est juste une façon de définir un lien, vous pouvez mettre le texte que vous voulez ici. Au lieu d'en apprendre davantage, nous pouvons dire : « Commencez  », à la place, sauvegardez cela. Déplacez cela sur le côté, rafraîchissez et soudainement vous pouvez voir comment Bootstrap fonctionne pour nous. Maintenant, si nous devions coder cela nous-mêmes, ce serait beaucoup plus long parce que nous devrons définir tous ces styles nous-mêmes. Juste pour montrer ce que Bootstrap fait pour nous, si nous devions retirer ces cours, à quoi ressemblerait notre site Web ? Je vais me débarrasser de ce cours et rafraîchir la page. Oui, ça a toujours l'air bien, mais il n'y a pas de bordure là-bas, il n'y a pas de rembourrage. Pour un effet plus dramatique, je pourrais me débarrasser de ce cours ici sur jumbotron. En revenant, il n'y a pas de gros rembourrage, il n'y a pas de couleur de fond. Bootstrap ajoute tout cela. J' espère que vous pouvez commencer à voir comment bootstrap rend ce processus de développement de sites web réactifs qui ont l'air assez cool. Je pense que c'est assez bon design, et ils le rendent beaucoup plus facile. Je vous encourage à télécharger Bootstrap et juste commencer à jouer avec. Copiez et collez certains de ces différents bits de code dans et si vous voulez, disons par exemple, que vous vouliez construire un formulaire et qu'il soit agréable, vous pouvez rechercher un formulaire et ensuite vous pouvez descendre à des formulaires, et vous pouvez mettre ont ces différents onglets, toutes sortes de choses, et vous obtenez tous ces composants stylisés dès la sortie de la boîte avec Bootstrap. Je pense que j'ai clairement indiqué à quel point un framework comme Bootstrap vous donne tellement et vous fait économiser beaucoup temps si vous voulez créer une application et le styliser. Dans la vidéo suivante, nous allons parler de l'autre framework que j'aime vraiment, et c'est jQuery. 10. Jquery: Dans la dernière vidéo, nous utilisons un framework CSS populaire appelé Bootstrap pour rationaliser la façon dont nous créons nos pages Web et nous avons pu créer des composants comme celui-ci avec une petite quantité de code et tout dépend de la façon dont nous structurons notre document et aussi mettre différentes classes sur nos éléments pour hériter de certains de ces styles directement à partir de Bootstrap. Dans cette vidéo, nous allons parcourir jQuery très brièvement en passant. Il y a beaucoup de choses que vous pouvez faire avec jQuery. Mais jQuery, si nous allons sur leur site Web qui est jQuery.com est une bibliothèque JavaScript, ce n'est techniquement pas un framework. C' est une bibliothèque où vous pouvez écrire moins de code et en faire beaucoup avec. Si nous faisons défiler vers le bas sur la page d'accueil, nous pouvons jeter un bref coup d'œil aux trois principales fonctionnalités de jQuery. L' un étant DOM Traversal et Manipulation. Cela semble fantaisie, mais fondamentalement ce que DOM signifie est modèle d'objet de document et essentiellement ce qu' un modèle d'objet de document est exactement ce que nous avons ici. Nous avons différents éléments et il est structuré d'une certaine manière. Ce DIV par exemple est imbriqué dans ce DIV et nous avons cette balise de titre dans le DIV. Fondamentalement, vous pouvez penser à notre structure HTML comme modèle d'objet de document. Ce que jQuery nous permet de faire est de manipuler nos éléments. Nous pouvons cibler un élément particulier en utilisant un sélecteur jQuery et ensuite nous pouvons appeler une méthode pour changer quelque chose. Dans ce cas, nous allons regarder ce bouton avec la classe continuer et ensuite nous allons changer le HTML à l'étape suivante, dot-dot-dot. La deuxième fonctionnalité pour laquelle jQuery est vraiment bonne est la gestion des événements. Gestion des événements, fondamentalement un événement est tout où quelque chose se passe sur la page donc je pourrais cliquer sur ce bouton. C' est un événement, même moi déplacer ma souris peut être un événement, moi faire un clic droit, me faire défiler à une certaine position sur la page, sont tous moi interagissant avec la page web et qui est considéré comme un événement. Chaque fois qu'un événement se produit, ce que nous pouvons faire est de programmer avec jQuery pour que quelque chose d'autre se produise. Dans cet exemple que nous allons créer un exemple similaire dans notre projet est si quelque chose est cliqué sur, donc dans ce cas un bouton dans le conteneur de bouton. Si elle est cliquée, cette case cachée s'affichera. La troisième chose que nous pouvons faire avec jQuery est Ajax. Ajax est un peu plus un concept avancé, mais c'est un moyen que nous pouvons appeler un script local sur le serveur. Nous pouvons essentiellement accéder au backend et récupérer des données sans avoir à recharger la page et utiliser du code back-end. Ne vous inquiétez pas trop d'Ajax pour l'instant, mais il est très puissant une fois que vous commencez à aller plus loin dans jQuery. Sur le site Web de jQuery, je veux que vous cliquiez sur le « bouton Télécharger », et sur la page de téléchargement, nous trouverons un lien vers la production compressée jQuery. Tout d'abord, nous allons simplement cliquer dessus. Il ressemble à du charabia parce qu'il a été ce qu' on appelle minifié pour en faire un fichier plus petit. Mais si nous voulions regarder à quoi il ressemble vraiment, nous pouvons cliquer sur le fichier suivant et ensuite nous pouvons voir tout un tas de JavaScript avec des commentaires décrivant ce qui se passe. On ne s'attend pas à ce que tu comprennes tout ça d'ailleurs. Oups, je dois y retourner. Nous pouvons revenir ici et nous pouvons simplement télécharger celui-ci et ne vous inquiétez pas du numéro de version jamais, cela va constamment augmenter à chaque fois. Faites un clic droit dessus et cliquez sur « Enregistrer le lien sous ». Ce que nous serons un fichier JavaScript et vous avez juste besoin d'aller votre répertoire de projet et aller votre répertoire JavaScript qui est où vous stockez tous vos JavaScript pour votre projet et cliquez sur « Enregistrer ». Vous pouvez le voir ici déjà apparaître. Vous pouvez le regarder dans votre éditeur de code mais cela n'aura aucun sens car il est minifié, qui est démontré par ce point min point JS. Si nous avons téléchargé celui-ci par exemple, si j'ouvre celui-ci dans un nouvel onglet, il n'a pas ce point min dessus. Vous pouvez voir l'ensemble du fichier non compressé. Mais pour nos besoins, nous n'avons pas vraiment besoin de regarder le code pour que nous puissions simplement le minifier. Maintenant, comme nous l'avons fait avec CSS, il y a une autre chose que nous devons faire pour l'inclure dans notre projet et c' est de le référencer avec cette balise de script. Comme on l'a fait à l'avance, je vais copier ça. Je vais le mettre ci-dessus parce que je veux que mon jQuery se charge avant l' utiliser en utilisant mes propres scripts et je vais juste faire clic droit ici et renommer ceci afin que je puisse copier et coller le nom, me faire gagner un peu de temps. Je fermerai ça et retournerai ici et c'est sur la même photo, on a juste besoin de changer le nom du fichier. Maintenant, cela va être inclus et si nous rechargeons la page, nous ne remarquerons rien encore parce que nous n'avons pas réellement utilisé de jQuery. Ce que je vais faire est d'aller dans des scripts, supprimer ceci parce que cette case d'élément 1, nous ne l'avons même plus dans notre projet donc cela ne fait pratiquement rien. Je vais revenir en arrière et ce que je vais faire est de commencer avec quelque chose qui est vraiment commun dans jQuery et ne vous inquiétez pas, je vais expliquer ce que c'est dans un instant. Mais je vais taper le signe dollar document point prêt. Ouvrir la fonction de parenthèses, ouvrir et fermer les parenthèses, espace. Crochets bouclés, allez à la fin, mettez dans un point-virgule et à l'intérieur ici, je vais mettre le journal de points de console jQuery chargé, puis terminer cela avec un point-virgule. Nous allons actualiser la page de ce côté après avoir cliqué sur « Enregistrer ». Comment pouvons-nous savoir si ça marche ? Parce que nous venons de faire un journal de console. Ça ne change rien sur la page. Mais si vous vous souvenez des outils de développement avec lesquels nous avons travaillé dès le début de notre vidéo, nous pouvons les ouvrir. Je suis sur un Mac donc j'appuie sur l'option Commande I sur Chrome et nous pouvons maintenant voir la console ouverte. Probablement j'ai déjà ouvert ma console avant. Il viendra probablement avec cela, puis vous cliquez sur « Console » et vous pouvez commencer à voir votre console JavaScript. ce moment, nous avons une erreur et l'erreur est le signe du dollar n'est pas défini. Qu' avons-nous fait de mal ici ? Laisse-moi revenir en arrière. J' ai dit que nous aurions dû mettre ça en premier, mais nous ne l'avons pas fait. Donc je vais couper et coller ça et le mettre là où il est censé aller au-dessus. C' est important plutôt concept à comprendre est l'ordre de vos fichiers. Si je commence à utiliser le signe dollar dont tout cela est un sélecteur jQuery et une méthode jQuery, si je commence à l'utiliser avant même d'avoir chargé jQuery, donc comme c'était avant où il était en dessous. Où il était en dessous. Cela se charge avant même que jQuery ne se charge, donc c'est bien sûr qu'il a une erreur. Alors assurez-vous que c'est au-dessus. Rechargez la page, et il est dit jQuery chargé. Maintenant, nous savons que jQuery fonctionne, mais qu'est-ce que c'est ? Fondamentalement, la première partie de ceci est le sélecteur, et la deuxième partie est la méthode. Dans le modèle d'objet de document, nous pouvons cibler l'ensemble du document à l'aide d'une variable appelée document. La convention avec les sélecteurs jQuery va toujours, $, les crochets ouverts, puis tout ce que vous voulez sélectionner. Ensuite, vous fermez vos crochets, mettez un point pour définir votre méthode. Dans ce cas, nous avons une méthode prête, qui, fondamentalement, fait que cette fonction se déclenche chaque fois que cela est prêt. Nous avons donc sélectionné le document, puis quand il sera prêt, nous allons lancer cette fonction. Encore une fois, je vais probablement vous jeter sous le bus ici, mais nous verrons dans une seconde à quel point c'est puissant. Nous ne voulons pas seulement faire une déconnexion de la console, cela nous aide simplement à déterminer si jQuery fonctionne ou non. Ce que nous pouvons faire, c'est au lieu de faire ce journal de console, commencer à gérer un événement sur la page et faire quelque chose qui fait un peu plus de sens. Ce que je vais faire est de sélectionner l'un de nos objets sur notre page en utilisant un sélecteur jQuery, et ce qui est génial à propos des sélecteurs jQuery, c'est que nous pouvons cibler les éléments de la même façon que nous ciblons avec styles.css, avec CSS, désolé, en général. Ainsi, nous pouvons cibler des éléments d'un certain ID en utilisant le hachage, et nous pouvons cibler des éléments d'une certaine classe en utilisant le point. Donc, ce que je vais faire, nous n'avons plus ça, donc c'est plutôt inutile, je pourrais aussi bien les supprimer. Nous n'en avons plus, mais ce que nous avons, ce sont ces différents éléments. Ce que je peux faire ici est de cibler ce div particulier par sa classe. Comme je vous l'ai déjà montré, nous pouvons faire des points pour dire que c'est une classe, et ensuite nous pouvons dire en-tête de page. Je pense que c'était ce que c'était. En-tête de page, oui, c'est correct. Maintenant, nous avons sélectionné tous les éléments avec l'en-tête de page de classe. Dans ce cas, il n'y en a qu'un, donc nous pouvons entrer ici, et nous pouvons manipuler le HTML comme l'exemple que nous avons vu dans le site Web de jQuery. Chaque fois que nous tapons juste du texte brut, nous devons avoir des guillemets simples ou des guillemets doubles, donc ce que je vais faire ici est juste de mettre en bonjour, et de mettre un point-virgule à la fin de cette fonction, et soudain, le l'intégralité de mon en-tête de page a été remplacée par bonjour, qui n'est pas si génial. Je pense que c'est probablement une meilleure idée de le laisser. Mais ça va vous montrer comment le numéro 1, je vais remonter ça. Comment numéro 1, nous pouvons sélectionner un élément et ensuite nous pouvons le manipuler. C' est très puissant. Nous pouvons mettre toutes sortes de logiques ici, comme nous le ferions en JavaScript. Mais où jQuery aide vraiment est en ayant ces sélecteurs et ces méthodes à manipuler facilement. Maintenant, je parle peut-être sur votre tête en ce moment, mais je veux juste vous montrer exactement à quoi jQuery est génial. Ce que je veux faire est un handle commun, un événement commun, qui est un clic. Donc, ce que je vais faire pour rendre cela un peu plus facile, c'est que je vais descendre à ce bouton, qui est la balise A ici, et ce que je vais faire est de donner un ID, afin que nous puissions le cibler très spécifiquement. Je vais l'appeler, bouton Démarrer. Donc, il y a un cours maintenant. Maintenant, ce que je vais faire, c'est que je vais mettre en place un gestionnaire d'événements, et comment vous le faites, c'est que vous ciblez d'abord l'élément. Donc je vais, en fait, il y a quelques façons de le faire, mais je vais te montrer comme ça. Je vais prendre le bouton Démarrer. J' ai mis un hachage parce que c'est un ID. Je vais sélectionner le bouton Démarrer. Je vais faire la méthode on, et la première chose que je vais dire est Click, parce que c'est l'événement que nous voulons gérer. Ensuite, la deuxième partie sera la fonction. Alors, que va-t-il se passer lorsque le clic est réellement déclenché ? À la fin, je vais mettre un point-virgule parce que nous utilisons JavaScript. Ici, je peux faire n'importe quel nombre de choses que je veux, mais faisons juste quelque chose de stupide juste pour le bien, et cachons l'en-tête de la page. Nous pouvons saisir cette classe, et ensuite nous pouvons utiliser un autre sélecteur jQuery pour put.page-header.hide. Hide est une méthode que vous pouvez utiliser. C' est une méthode jQuery, et c'est juste très facile. Je le sélectionne, puis je peux mettre .hide et ensuite je vais le cacher. Voyons si ça marche. Je vais actualiser notre projet, cliquer sur le bouton Démarrer, et nous avons caché l'en-tête de la page. Maintenant, je sais que ce n'est pas vraiment très pratique, alors ce que je vais faire, c'est donner un meilleur exemple. Autrement dit, je vais mettre du texte caché ci-dessous. Commençons par une balise p, pointant le p, et nous mettrons caché. Disons que c'est la réponse à votre problème. Maintenant, si nous sauvegardons cela, et actualisons la page, elle apparaîtra. Il apparaîtra par défaut, qui est probablement ce que vous attendiez. Mais si nous voulons qu'il soit caché au début, ce que nous allons faire est que nous pouvons ajouter un attribut à cette balise p, style égal, guillemets doubles, et à l'intérieur nous pouvons faire un affichage none. Enregistrez cela, actualisez la page, et il n'y a pas de paragraphe. Une autre chose que je veux faire est de lui donner un ID afin que je puisse le cibler spécifiquement, et je vais appeler ce texte caché. Maintenant, il a un ID, et il a un style qui lui dit de ne pas s'afficher lors du premier chargement de la page. Ce que je peux faire, c'est que je peux le cibler ici, en utilisant son ID, qui est un texte caché. C' est un ID, donc je vais utiliser le hachage. Maintenant, j'ai sélectionné le texte caché, et ce que je vais faire est d'utiliser une méthode, une méthode très simple dans jQuery, qui est .show. Alors enregistrez cette page, actualisez. Vous ne verrez rien encore, mais que se passe-t-il quand on clique sur le bouton ? Les textes cachés que nous avons définis pour afficher comme aucun dans notre HTML ont maintenant été manipulés en utilisant jQuery. C' est un exemple très basique de ce que nous pouvons faire avec jQuery. Il y a tellement de choses que nous pouvons faire avec jQuery. Je veux juste que vous pensiez à toutes les différentes façons de manipuler une page Web ou de gérer des événements. Donc, nous pourrions faire quelque chose que si je clique sur ce titre, quelque chose se passe ou si je fais défiler quelque chose se passe. Ou nous pourrions comprendre, nous pourrions faire des problèmes mathématiques et toutes sortes de choses ici et nous pouvons essentiellement faire un nombre infini de choses en utilisant jQuery pour cibler des éléments, puis les manipuler. Ensuite, nous pouvons également combiner cela avec des gestionnaires d'événements comme nous l'avons fait ici, et nous pouvons essentiellement manipuler le DOM, manipuler notre document en fonction de la façon dont la personne interagit avec la page Web. Maintenant, bien sûr, vous pouvez le faire avec juste JavaScript, vous n'avez pas besoin de jQuery. Mais ces sélecteurs et ces méthodes le rendent tellement plus facile au point où je peux en toute confiance entrer ici et cibler un autre élément si nous donnons juste à cela un ID de jumbotron, et nous pouvons simplement faire #jumbotron .htmlblah. Vérifions, c'est tout correct, jumbotron, bla. Soudain, ça se transforme en bla. Si je devais le faire en JavaScript, peut-être que je le chercherais, mais avec jQuery, cela le rend si facile et intuitif, et cela m'évite beaucoup de maux de tête et j'aime vraiment travailler avec. Compte tenu de sa popularité, je dirais que beaucoup de gens aiment travailler avec elle aussi. Dans la vidéo suivante, nous allons passer du front-end et commencer à regarder le back-end. Espérons que nous ne vous écrasons pas jusqu'à présent. N' hésitez pas à poser des questions et je vous aiderai du mieux que je peux, et j'espère que nous apprenons quelques bonnes choses jusqu'à présent. Je te vois sur la prochaine vidéo. 11. Configurer un serveur de base: Nous avons maintenant notre site Web de base que nous avons construit avec HTML, CSS et JavaScript. Mais le développement web front-end peut être juste la pointe de l'iceberg quand il s'agit du processus global de développement web, et le back-end comme nous l'avons discuté précédemment, peut être construit dans un nombre quelconque de langages de programmation avec n'importe quel nombre de configurations de serveur, il peut devenir infiniment plus complexe. Mais dans la vidéo d'aujourd'hui, et dans les prochaines vidéos, je veux parler du back-end de la manière la plus simple. Aussi avec le back-end, cela peut être une chose difficile à comprendre sans réellement le voir, en interagissant réellement avec lui, et en fait implémenter dans votre projet. C' est ce qu'on va faire tout de suite. Nous allons d'abord obtenir un serveur puis nous allons commencer à écrire du code PHP. PHP est un langage de programmation back-end très commun pour le web. C' est ce que beaucoup de sites Web utilisent, et cela va nous faciliter le déploiement de notre site Web plus tard, ayant PHP comme base de code. Ce dont vous avez besoin pour le développement web back-end, si vous regardez notre site Web que nous venons de construire sur le front end ici. Nous avions juste un dossier, et nous pouvons littéralement ouvrir le fichier comme nous l'avons fait avant la main et juste le lire directement du système de fichiers dans notre navigateur. Voyez ici, nous pouvons voir qu'il ne fait que lire le dossier. La différence entre cela et le développement back-end est que nous ne pouvons pas simplement le lire sur le système de fichiers final. Lorsque nous faisons de la programmation back-end, nous avons besoin de ce qu'on appelle un serveur. Maintenant, pour PHP, une pile commune, comme ils l'appellent, est la pile de lampe, que nous tapons, pile de lampe est Linux. Linux qui est le système d'exploitation, Apache, qui est le serveur HTTP, MySQL et d'autres alternatives, et PHP et d'autres alternatives. Pour nous, nous allons juste utiliser MySQL et PHP. Peu importe que nous utilisions Apache. Vous n'avez pas vraiment besoin de savoir pourquoi c'est. Mais nous n'utilisons pas nécessairement Linux. J' ai un ordinateur, mon ordinateur est Mac OS X. Vous pouvez développer sur Windows, selon que vous développez sur Windows ou que vous développez sur Mac ou même Linux, vous avez besoin d'un serveur. Pour Mac, je vais juste étendre cela. Il y a un serveur appelé MAMP que vous pouvez installer et MAMP est juste lampe avec le L remplacé par M pour Mac. Si vous êtes un utilisateur Windows, vous pouvez taper WAMP, en fait je n'ai jamais utilisé WAMP parce que j'ai toujours utilisé MAMP. Mais c'est essentiellement l'équivalent de MAMP mais pour Windows. En passant à MAMP, je vais télécharger MAMP ici. Je vais juste trouver la dernière version. Télécharger. Je vais juste mettre cela dans mon répertoire de téléchargement. Très bien, après avoir longtemps attendu MAMP est maintenant téléchargé et nous avons juste besoin de l'installer. Je vais juste cliquer à travers les invites. D' accord, ça va prendre un giga d'espace, je ne savais pas que c'était si grand. Saisissez votre mot de passe pour installer le logiciel. Très bien, notre installation a été réussie, il n'y a pas de champs spéciaux là quoi que nous ayons à savoir comment faire quand nous installons ça, nous cliquons simplement continuer essentiellement sur tout, nous fermons ces sites Maintenant. Une fois MAMP installé, nous pouvons l'ouvrir, et il apparaît comme ceci. Avant de pouvoir démarrer le serveur cependant, nous devons changer certains paramètres. Allez sur le serveur web ici. Ce que je veux que vous fassiez, c'est cliquer sur cette icône pour aller dans notre projet et cliquer dessus. Maintenant, je l'ai défini dans mon répertoire de projet et je vais cliquer sur OK. Maintenant, ce que je vais faire est de cliquer sur Démarrer le service. Vous pouvez voir maintenant que le, désolé il a déménagé. Mais vous pouvez voir maintenant que le serveur MySQL est maintenant vert, ce qui signifie qu'il est activé, et le serveur Apache est vert, ce qui signifie qu'il est maintenant activé. Il ouvrira la page de démarrage du MAMP. Ce que vous pouvez faire pour accéder à votre site Web est de cliquer sur mon site Web. Nous avons encore notre site web. Nous pouvons y accéder via le système de fichiers comme celui-ci, ou nous pouvons y accéder via notre nouveau serveur, qui est localhost colon 8888. Pourquoi cela est important, pourquoi nous avons besoin d'un serveur est parce que nous allons bientôt transformer notre code en code back-end. Une autre chose que nous pouvons faire dans la page de démarrage de MAMP est d'aller aux outils et de cliquer sur PHP mon administrateur. Maintenant que nous sommes en PHP mon administrateur, nous pouvons voir quelles bases de données nous avons installées. PHP mon administrateur est juste fondamentalement un panneau de contrôle pour travailler avec des bases de données. Donc il y en a un ici qui vient de s'appeler MySQL. Mais nous allons bientôt créer une nouvelle base de données. Je pense que je vais le laisser là pour cette vidéo parce que la prochaine nous allons faire du PHP. Mais maintenant que vous avez votre serveur, vous êtes prêt à commencer à faire de la programmation back-end. Je te verrai dans la prochaine vidéo. 12. PHP: Dans la dernière vidéo, nous avons configuré MAMP parce que je suis sur un ordinateur Mac. Si vous êtes sur Windows, vous auriez configuré WAMP, et si vous êtes sur Linux, vous pouvez configurer un équivalent Linux, et maintenant nous avons un serveur. La raison pour laquelle cela se produit lorsque nous allons à localhost 8888 est parce que nous avons dirigé, si vous vous souvenez, dans nos Préférences, dans notre racine de document, nous avons défini notre projet sur document root. Nous pouvons mettre en place un nouveau projet et nous pouvons diriger le serveur vers là et il apparaîtra là, mais j'ai pensé qu'il serait plus facile de commencer par ce que nous avons déjà créé. Maintenant, la première chose que nous pouvons faire pour commencer à utiliser PHP et transformer notre projet purement frontal en quelque chose qui utilise le back-end, c'est que nous pouvons entrer ici et au lieu de ce being.html, nous pouvons appeler it.php. Comment je fais ça ? Je vais fermer cela, et j'irai ici, et je vais cliquer avec le bouton droit sur Renommer index.PHP et cela dira au serveur que c'est un fichier PHP. Je vais recharger la page et rien ne change. Alors tu es comme Chris, pourquoi on a fait ça ? Eh bien, quelque chose a changé et si nous l' ouvrons ou essayons de l'ouvrir juste à partir du système de fichiers, il affichera juste le contenu de la page. Il n'affichera pas HTML car vous pouvez simplement extraire des fichiers HTML ici. Ce dont vous avez besoin est un sever et pourquoi nous avons besoin do.PHP est parce que nous allons commencer à mettre du code PHP ici. Au lieu de h1, ce que je veux faire est d'écrire du code PHP. Maintenant, la bonne chose à propos de PHP est que vous pouvez simplement l'insérer n' importe où sur un document PHP qui ressemble autrement au HTML. ce moment, nous avons du HTML pur, même si c'est got.PHP là. Ce que nous pouvons faire pour insérer du PHP est un crochet d'ouverture, interrogation PHP et puis je vais le fermer tout de suite pour ne pas oublier, vous avez encore un point d'interrogation et une balise de fermeture. Maintenant, ce que je peux faire ici, qui ne va pas être aussi incroyable, est d'utiliser l'impression de fonction pour dire, « Bonjour monde. » Il a besoin d'une fermeture. Donc, si je déplace cela ici, vous verrez que cette première partie de la balise h1 est maintenant « Hello World » parce que j'ai mis dans une programmation PHP. n'y a aucun moyen que votre navigateur puisse le comprendre à moins qu'il ne s'agisse d'exécuter un serveur, car si je tape simplement ceci, il apparaîtra directement comme nous l'avons tapé. Il le voit juste comme du texte. C' est pourquoi nous avons besoin d'un serveur capable d'interpréter PHP et de traiter ce back-end. Ce n'est pas vraiment pertinent, nous aurions pu simplement taper « Hello World » ici et obtenir les mêmes résultats. Que pouvons-nous faire avec PHP ? Eh bien, nous pouvons l'utiliser comme langage de programmation. Ce que je peux faire ici, c'est que je peux définir certaines variables. Je vais juste obtenir quelques balises d'ouverture et de fermeture PHP et je dirai, en PHP par la façon dont vous définissez des variables avec un signe $ et ensuite le nom des variables. Nous appellerons cette rubrique, et j'appellerai ceci, comment ai-je appelé le site Web avant ? Laissez-moi revenir en arrière, « Notre site Web génial ». Je vais juste remettre tout cela et puis le titre sera maintenant point-virgule pour terminer « Mon site génial ». Alors donc ici, au lieu de mettre une chaîne, qui est juste le texte explicite, nous pouvons faire imprimer en-tête. « Mon site Web génial ». Donc vous voyez ici nous avons défini une variable et maintenant nous la mettons ici. Pourquoi est-ce important ? Eh bien, nous allons maintenant faire la programmation back-end afin que nous puissions taper des choses comme une instruction if. Si je ne sais pas, nous n'avons pas vraiment mis en place beaucoup de variables ici, mais si une est inférieure à deux, changeons le titre changeons le titreen « Mon site pas si génial. » Un, c'est moins de deux. Donc, l'en-tête change, s'il était défini sur, si un est supérieur à deux, l'en-tête ne changerait pas. Espérons que cela démontre comment nous pouvons mettre un peu de logique et commencer à faire de la programmation réelle et une chose que je veux préciser est bien que ce code back-end est tout côté serveur. Ce que cela signifie, c'est que cela arrive avant qu'il n'arrive à votre navigateur. Si nous regardons réellement la source de la page ici, nous ne verrons aucune de la logique, nous verrons littéralement la sortie. Dans « Mon site pas si génial », nous ne verrions pas ce code ici, parce que ce qui se passe du côté back-end est que tout est compris, tout cela est compris, puis il envoie juste un HTML à l'interface frontale. Nous ne voyons que les résultats dans notre navigateur de ce qui s'est passé sur le back-end, nous ne voyons pas le code back-end réel. Alors que si nous écrivions en JavaScript, nous pourrions descendre à nos outils de développement, regarder dans Sources, nous pouvons voir tous les scripts ici. Je peux regarder cela, je peux regarder ici, je peux voir les scripts, je peux voir toute la programmation qui se passe ici, et si je devais changer quelque chose avec JavaScript, disons par exemple, rappelez-vous que nous pouvons inspecter différents éléments de la page. Si nous avons pu trouver cela, nous y allons, nous pouvons trouver cet élément, c'est afficher aucun. Si nous cliquons sur Get Started, soudainement cela change en direct devant nous et nous pouvons voir ce code ici dans notre photo de scripts. Tout est front-end, c'est le point que je fais valoir. Mais tout ce qui est sage de programmer que nous faisons en PHP, c'est un langage back-end, donc il ne va pas arriver au front-end. Tout est calculé côté serveur, donc sur ce serveur, et la seule chose qui arrive donc sur ce serveur, à votre navigateur est le HTML, CSS et JavaScript. J' espère que j'ai réellement mis du code dans nos projets l'a rendu un peu plus clair pour vous et dans la vidéo suivante, nous allons voir comment développer un PHP est réellement utile au-delà simplement créer une variable de titre et ensuite le mettre dans une balise de titre. Je te verrai dans la prochaine. 13. MySQL: Dans la dernière vidéo, nous avons commencé avec PHP, mais nous n'avons rien fait d'aussi incroyable ou tout ce que nous n'aurions vraiment pas pu faire en utilisant ce que nous pouvons faire sur le front. Ce que nous pouvons utiliser le backend pour, et c'est ce qui est vraiment important d'utiliser le backend, c'est l'interaction avec une base de données. Avant d'écrire un peu plus de code PHP, je veux parler un peu de bases de données et créer une base de données avec quelques tables. Je vais faire cette pleine largeur. Ce que je vais faire est d'ouvrir l'administrateur PHP. Nous pouvons le faire en allant à votre page de démarrage MAMP ou à la page de démarrage WAMP. Allez dans Outils, puis allez à phpMyAdmin. Si vous utilisez un autre serveur que MAMP, vous devrez peut-être rechercher comment accéder à phpMyAdmin, mais il devrait être là. Maintenant, dans phpMyAdmin, ce que nous pouvons faire est de faire n'importe quel nombre de fonctions de base de données en tant qu'administrateur. Nous pouvons cliquer sur « Nouveau » ici et créer une nouvelle base de données. Je vais juste appeler cette base de données test_db. Je vais créer, et soudain nous avons une base de données. Maintenant, une base de données est un endroit où vous stockez vos données, et il peut être complexe, comment vous les structurez. La chose la plus difficile avec les bases de données est de savoir comment le concevoir et comment l'obtenir parfaitement pour que les tables se rapportent les unes aux autres de la manière la plus efficace possible. Mais nous ne faisons que couvrir les bases ici, et donc ce que vous pouvez penser des bases de données comme des sélections ou des groupes de tables. Un type d'objet commun dans les applications et les sites Web est un utilisateur. Je vais commencer là et créer une table pour les utilisateurs. Je vais appeler ça les utilisateurs. Aller avec le nombre de colonnes par défaut. Le premier champ devrait être un identifiant unique, donc je vais juste l'appeler ID. Je vais juste le garder sur INT, ce qui signifie entier. Je vais cliquer dessus pour le rendre non signé, ce qui signifie que ce ne sera pas négatif. Je vais en faire l'index primaire, et cliquez sur « OK » sur ce sujet. Je vais cliquer ici, les incréments automatiques, donc au lieu de définir l'ID à chaque fois, chaque nouveau, chaque nouvel enregistrement que nous créons, il y aura un nouvel ID automatiquement. Je vais juste mettre dans quelques champs de base, nom d'utilisateur, puis nous choisissons le texte de type. Disons mot de passe, TEXTE, et e-mail, TEXTE. Vous pouvez également insérer des règles sur la durée de validité de ces champs. Nous n'avons pas vraiment besoin de cela pour l'instant, donc nous pouvons simplement cliquer sur « Enregistrer » ou cliquer sur « Preview SQL ». Pourquoi je voulais mentionner l'aperçu SQL, c' est ici le code SQL que PHP, mon administrateur a généré pour nous. Si nous voulions écrire ceci nous-mêmes, nous pourrions simplement copier cela, aller dans l'onglet SQL, et écrire cela nous-mêmes et appuyer sur « Execute ». Nous obtiendrions le même résultat. Mais cela le rationalise évidemment pour nous, rend un peu plus facile avec être interactif et tout, et vous n'avez pas besoin de connaissances SQL. Pour regarder cette requête juste rapidement afin que vous puissiez reconnaître SQL lorsque vous le voyez. Nous avons quelques mots clés ici, CREATE TABLE. Ensuite, nous définissons la base de données que nous ciblons. Pointez la table que nous ciblons. L' ID qui est un entier non signé, ce n'est pas nul, ce qui signifie qu'il n'est pas vide et qu'il va ordonner l'incrément. Ensuite, le nom d'utilisateur, qui n'est pas le texte nul, et le mot de passe, le texte non nul, e-mail, le texte non nul. La clé primaire étant ID et le moteur étant InnoDB. Je vais cliquer sur « Fermer » dessus et je vais cliquer sur « Enregistrer ». Vous pouvez voir maintenant nous avons une table qui apparaît dans notre base de données. On peut voir les différents champs ici. Ce que nous pouvons faire avec ce tableau, c'est que nous pouvons insérer. Je vais mettre un nom d'utilisateur. Disons juste que Chris, pour mot de passe, je vais taper le mot de passe Chris. Ici, je vais taper chris@christhefreelancer.com. Cliquez sur « Allez, et nous avons une nouvelle ligne. Voici le code que nous aurions pu faire nous-mêmes pour insérer une ligne dans notre table. Si nous retournons à parcourir, nous pouvons voir que c'est notre table. Nous avons l'ID 1, le nom d'utilisateur de Chris, mot de passe de Chris et l'e-mail de chris@christhefreelancer.com. Maintenant, comme je l'ai dit, nous pouvons exécuter SQL nous-mêmes, donc je vais copier dans le SQL que nous avons généré auparavant. Je peux juste changer ces détails. Peut-être que c'est Denise et on a le mot de passe Denise, et je veux partager son mot de passe avec tout le monde donc je vais juste taper denise@gmail.com. Si je clique sur « Go », cela devrait fonctionner. Il dit cocher une ligne insérée. Si nous revenons en arrière, nous avons deux utilisateurs dans notre base de données maintenant et j'ai mal orthographié Denise, ce qui signifie que je peux juste entrer ici et cliquer sur « Modifier ». Elle ne s'appelle pas Dennis, c'est Denise. Cet e-mail pourrait mener quelque part, mais ça ne mène pas à Denise que je connais. Ce que nous pouvons faire maintenant est d'ajouter une autre table. C' est une piste dans les bases de données relationnelles. Ce que je vais faire est de créer à nouveau l'ID, et je vais faire un index primaire non signé qui incrémente automatiquement comme avant. Ce que je vais faire ici, c'est mettre dans l'ID du propriétaire. Ce que nous pouvons faire avec l'ID du propriétaire est d'avoir que lié à un ID dans les utilisateurs, sorte que nous pouvons associer cet animal dans notre table, animaux à un utilisateur particulier. Je vais mettre le nom ici, faire de ça un champ de texte. Ensuite, je vais créer un type, disons type. Ça peut être un chien, un chat, peu importe, et on va cliquer sur « Enregistrer ». Maintenant, nous avons cette table pour animaux de compagnie. Allons et insérons un nom d'animal de compagnie, un ID de propriétaire. Allons me l'assigner. J' en étais un, alors attribue-le moi. Je l'appellerai Boris, et c'est un chien. Alors on a ça là. Maintenant, ceux-ci ne sont pas encore liés, et il y a certaines façons de le faire dans phpMyAdmin, mais nous n'allons pas aller trop loin dans les bases de données dans ce cours. Mais ce que nous voulons faire maintenant est d'utiliser cette base de données, interagir avec cette base de données en utilisant un code PHP. Nous avons déjà notre projet maintenant, il y a déjà PHP dedans. L' étape suivante pour nous est de nous connecter à cette base , puis commencer à sortir des choses à partir de la base de données. Quand nous le ferons, vous pourrez voir tout se réunir. La base de données travaillant avec le backend pour produire le front end, puis l'inverse où nous pouvons utiliser le front end pour envoyer une requête de serveur au backend pour manipuler la base de données. C' est, en substance, tout le cycle de développement web. Je suis heureux de vous montrer la prochaine vidéo, qui est l'endroit où nous allons nous connecter à la base de données et créer notre application web très basique, mais j'espère très révélatrice. Je te verrai sur la prochaine vidéo. 14. Connexion à une base de données: Dans la dernière vidéo, nous avons créé une base de données. Nous avons inséré quelques tables dans cette base de données, puis nous avons inséré quelques enregistrements dans ces tables de base de données. Maintenant, dans cette vidéo, nous allons enfin apporter ces enregistrements dans nos projets en utilisant PHP. La façon de le faire est d'établir une connexion à la base de données, puis d'accéder à ces différents enregistrements via SQL, puis d'implémenter avec PHP. L' une des façons de démarrer la connexion est que je viens d'obtenir de la documentation de MAMP. Ils nous ont donné du code pour travailler ici. Je vais juste copier tout sauf les tags parce que nous les avons déjà dans notre projet. Je vais voir mon éditeur de code. Je peux m'en débarrasser parce que c'est idiot de toute façon. Ensuite, je peux coller dans cet exemple de code. Maintenant, ce que nous allons devoir faire est de changer cela pour une circonstance spécifique. Nous ne regardons pas une base de données appelée Performance Schema. Nous sommes maintenant à la recherche d'une base de données appelée test DB. Maintenant, si nous avons tout fait correctement, cela devrait se connecter avec succès et nous devrions voir un message de réussite. Il dit connecté avec succès. La raison pour laquelle c'est parce que nous avons mis ici écho. Echo est une autre façon d'imprimer du texte sur un écran en utilisant PHP. S' il y avait une époque, la page serait morte et alors ce que nous aurions craché l'erreur. Mais parce qu'il s'est connecté avec succès, nous avons reçu cette rétroaction. Maintenant que nous savons que nous avons une connexion, il s'agit maintenant d'apporter les données que nous possédons et de les mettre dans notre application. Pour cela, j'ai un autre article ici des écoles du W3. Ils ont ce petit exemple ici. Ce que nous avons déjà fait, c'est que nous avons créé notre connexion, donc nous n'avons pas besoin de le refaire. Mais ce que nous devons faire est de créer une requête SQL, puis prendre le résultat et faire une boucle ici sur tous les résultats. Ensuite, sortez-le sur la page afin que vous puissiez réellement le voir. Je vais copier ça. Je vais aller à mon éditeur de code ici. Je vais maximiser l'écran et où je veux le sortir est ici. Je vais créer un autre div. Je vais juste lui donner la ligne de classe. Rappelez-vous que nous travaillons avec bootstrap ici, donc row est une classe bootstrap que nous pouvons utiliser. Ensuite, je vais insérer notre PHP. J' ai besoin des étiquettes d'ouverture et de fermeture. Moins de signe point d'interrogation, PHP, point d'interrogation, balise de fermeture. Ensuite, entre ici, tout le code entre. On a les étiquettes de fermeture. J' ai besoin de me débarrasser de ça et de pousser ça. Bouge ça, oups, bouge ça en arrière. Ce que nous avons ici est la construction web d'une requête SQL et l'assigner à cette variable. C'est un exemple. Ce que nous allons devoir faire est de l'ajuster pour nous et nous n'avons pas vraiment besoin de l'ID en soi. Mais si nous allons dans notre table ici, nous avons un nom d'utilisateur et un mot de passe. Cet exemple, ne montrons pas comment utilise le mot de passe à l'écran. Nous pouvons taper le nom d'utilisateur et l'e-mail. Ce que nous disons ici, nous voulons sélectionner le nom d'utilisateur de la colonne et l'e-mail de la colonne. Cela doit correspondre à ces colonnes d'ici et puis c'est le nom de la table, donc ce ne sont pas mes invités, ses utilisateurs. Une autre chose que nous allons devoir changer ici est l'objet qui définit notre connexion. Donc, dans cet exemple ici, ils ont utilisé conn comme connexion. Vous pouvez voir ici, conn est égal au nouveau MySQL. Il est assigné la connexion à cette variable. Mais dans notre exemple, si nous faisons défiler vers le haut, nous avons assigné la connexion à cette variable. Je vais aller cliquer dessus et puis remplacer la mention de conn ici. Ce que nous assignons au résultat ici, c'est que nous prenons réellement la connexion où en utilisant une méthode appelée requête, nous mettons dans le SQL que nous venons de construire ici dans cette méthode de requête. Il va nous retourner un certain résultat et ensuite nous allons le stocker dans cette variable. Ensuite, ici, ce que nous allons demander est si le nombre de lignes qui sortent des résultats est supérieur à zéro, nous allons produire quelque chose. Sinon, nous allons produire seulement zéro résultats, le texte zéro résultats. Ensuite, à la fin de cela, nous allons fermer notre connexion à la base de données. Ce que nous allons devoir faire ici, c'est changer à nouveau ces champs, donc nous ne montrons pas d'ID. Il peut faire, c'est se débarrasser de ça. Nous montrons le nom d'utilisateur. Au lieu de nom, je vais mettre le nom d'utilisateur. Ensuite, au lieu du prénom ici, allez mettre un nom d'utilisateur et aller à quoi d'autre est-il là ? On a un email ici, qu'on a retiré d'ici. Nous pouvons faire un email avec un deux-points. Ensuite, nous pouvons changer ce que nous ciblons ici par e-mail. Puis une balise BR à la fin. BR signifie juste que c'est une balise de rupture en HTML et cela signifie juste aller à la ligne suivante. Si nous avons de la chance, nous avons écrit un code correctement et cela fonctionnera réellement. Je vais rafraîchir la page et quelque chose s'est passé. Je vais inspecter ça parce qu'on dirait que c'est la coupure ici. Pourquoi ça ne marche pas ? Eh bien, nous avons encore une faute de frappe dans notre code. Autrement dit, nous n'avons pas changé le nom de notre connexion ici, et nous avons déjà fermé notre connexion ici. Ce que je vais faire ici, c'est remplacer contre MySQL et me débarrasser de cette proximité parce que nous allons le fermer ici. Je vais cliquer sur « Enregistrer ». Je vais rafraîchir la page. Nous recevons maintenant des champs de la base de données. Certes, ils ont l'air assez terribles en ce moment, mais nous pouvons toujours les mettre en scène avec notre connaissance du code frontal. Au lieu de cela, ce que je vais faire est que je vais créer un div. Nous pouvons insérer n'importe quel HTML que nous voulons ici. Div ici, fermeture div. Je vais appeler cela donner à cela une classe de DB, ligne. Cliquez sur « Enregistrer », actualisez la page. Peu de choses ont changé parce que nous n'avons pas appliqué de styles. Une chose que je veux faire en premier, c'est que cette rangée n'est pas à l'intérieur du conteneur, donc c'est la première chose que je réparerais. J' irais à l'intérieur et mettrais cela imbriqué dans le conteneur div. Il est maintenant dans le conteneur. Ce que nous pouvons faire est d'appliquer quelques styles supplémentaires pour le rendre un peu plus agréable. C' est à vous de voir comment vous voulez le faire. Mais faisons un point parce que nous avons une classe, une ligne DB, crochets bouclés ouverts pour définir nos styles et donnons juste marge plus au bas afin que nous obtenions 10 px. Recharger la page est un peu plus de marge là. Peut-être voulons-nous la première partie, audacieuse. Nous pouvons le faire sans CSS. Nous pouvons simplement utiliser HTML pour créer une balise forte. Tout ce qui se trouve dans une balise forte sera la lumière de la police sera rocher. Habituellement, nous pouvons l'utiliser à d'autres fins. Je peux mettre en forte. Ensuite, vous pouvez maintenant voir que l'étiquette est en gras et le résultat n'est pas en gras. Nous avons établi une connexion à notre base de données. Nous avons récupéré des éléments de notre base de données. Vous pouvez commencer à voir maintenant le back-end travailler pour nous. La bonne chose à propos de la base de données, c'est qu'elle est permanente. Si nous faisons un changement ici, nous laissons la base de données s'asseoir là. A chaque fois que nous allons sur le site, si nous avons fait un changement, il apparaîtra. Pour le démontrer, je vais faire un changement dans la base de données en ce moment. Je vais insérer un autre utilisateur, appeler cet utilisateur Marco est positif, sera Marco polo, et ce sera Marco @gmail. Cependant, nous changeons la base de données, où la lecture directement de la base de données sur cette page Web. Il devrait apparaître peu importe comment nous changeons cette base de données et il le fait. C' est essentiellement le back-end qui travaille pour nous. Encore une fois, si nous devions inspecter cela, nous ne verrions aucun code back-end. Nous verrions littéralement juste un tas de DB rose avec le code HTML de sortie. C' est bon pour la sécurité. On ne sait pas ce qui se passe à l'arrière. Bien que ce soit vraiment important est pour un certain nombre de raisons, mais une que je peux vous montrer en ce moment, et c'est que nous avons toutes ces informations ici avec un nom d'utilisateur et un mot de passe. Nous ne voulons certainement pas que quiconque accède à notre site Web à l'autre extrémité puisse le voir. Si c'était comme, disons par exemple, du code JavaScript, si nous mettons juste cela dans un fichier JavaScript, encore une fois, nous pouvons ouvrir nos outils de développement, aller au réseau, désolé, sources, pas réseau. On peut y aller et voir ce que sont les scripts. Mais sur le back-end, il n'y a aucun moyen de voir ces données de configuration. C' est l'une des raisons pour lesquelles si vous établissez une connexion à la base de données, si vous travaillez avec des informations utilisateur. Si vous segrégez les informations selon que quelqu'un est connecté et que vous voulez uniquement afficher les informations que cet utilisateur est autorisé à voir, alors toutes les informations doivent être sécurisées. C' est pourquoi il est très important que nous ayons le back-end pour se connecter à la base de données et aussi être très privé. Espérons que vous pouvez comprendre le rôle du back-end maintenant et comment nous sommes en mesure de nous connecter à une base de données. Encore une fois, une explication ou une démonstration très simple de la façon dont le back-end fonctionne en utilisant une base de données. Nous pourrions faire un cours complet sur PHP avec MySQL et passer par la façon dont nous pourrions créer, mettre à jour et supprimer ces enregistrements. Mais c'est une vue d'ensemble du développement web. On n'a pas le temps d'entrer dans une énorme 12 heures. Ça pourrait être 12 heures de cours pour être honnête là-dessus. Si vous voulez rester à la fin et que vous voulez réellement faire un projet PHP MySQL. J' aurai quelques recommandations à la fin. Mais dans la prochaine vidéo, nous allons découvrir comment réellement ce qu'on appelle déployer ce site Web, ce qui signifie le mettre sur un serveur accessible depuis n'importe où et essentiellement créer un site Web en direct. Je suis heureux de vous montrer comment déployer votre nouvelle petite application de base. Je te vois dans la prochaine vidéo. 15. Déploiement P1. 1 : Domaine: Dans les prochaines vidéos, nous allons déployer notre site Web, et déployer n'est qu'un terme de développeur signifiant, nous mettons notre site Web sur un autre serveur, et nous allons déployer notre site Web sur le Web, qui signifie que nous allons simplement le mettre sur un autre serveur afin que nous puissions accéder à notre site Web depuis n'importe où dans le monde. Essentiellement, nous mettons notre site Web sur Internet. heure actuelle, il est juste stocké sur notre ordinateur local, et nous exécutons un serveur localement, mais nous devons mettre notre site Web sur un serveur connecté à Internet et fonctionnant 24 heures sur 24, 7 jours sur 7, afin que les gens puissent accéder à notre site Web autour de l'horloge de n'importe où. Les deux concepts que nous devons comprendre pour faire ce domaine et l'hébergement, et beaucoup de gens pensent que les domaines et l'hébergement sont la même chose, mais ils ne le sont certainement pas. Donc, ce que je vais faire, suffit de faire une recherche Google pour la différence entre le domaine et l'hébergement, et juste commencer votre recherche là pour comprendre quelle est la différence si vous avez besoin de faire une lecture supplémentaire, mais je vais cliquez sur le premier article et jetez un oeil à cette analogie maison. Essentiellement, votre domaine est une adresse. Lorsque vous achetez, disons simplement skillsharecourse.com, ou quelque chose comme ça, vous obtenez juste l'adresse. Vous obtenez juste le nom de domaine. Vous n'avez pas vraiment un endroit pour réellement commencer à construire votre site Web. Vous pouvez considérer le nom de domaine comme une adresse, et cette adresse pointera vers l'emplacement de votre site Web qui est hébergé quelque part. Ces fichiers doivent être installés quelque part sur une plate-forme d'hébergement sur un autre serveur Web, et c'est ce qui servira votre site Web. Vous pouvez penser, dans cette analogie maison, le nom de domaine est juste votre adresse, et la maison elle-même héberge dans cette analogie. La première étape sera d'obtenir votre domaine, et essentiellement ce qui se passe lorsque vous enregistrez un domaine, est-ce qu'il va dans un système centralisé appelé DNS. Je vais juste taper, « Où sont stockés les domaines de site Web ? » Sur howstuffworks.com, vous pouvez tout savoir sur l'emplacement de stockage de votre domaine. Fondamentalement, ce que vous faites lorsque vous enregistrez un domaine sur GoDaddy, ou Namecheap, ou l'un de ces sites d'achat de domaine, c'est que vous obtenez essentiellement une liste dans ce système DNS entier. Comment obtenons-nous un domaine ? Eh bien, vous avez peut-être vu ça avant. Nous pouvons aller à n'importe quel nombre de fournisseurs de domaine. GoDaddy est populaire, et ils sont aussi un hôte. Je suis sûr que si vous allez à l'hébergement, vous pouvez acheter un compte d'hébergement qui vient avec un domaine, mais si nous cliquons simplement sur « Domaines » et trouver un domaine, nous obtiendrions juste le domaine et leur site Web. GoDaddy n'est pas forcément le moins cher. Il y en a un autre appelé Namecheap, et apparemment je suis juste en train d'enregistrer un domaine que je ne vais pas vraiment utiliser, mais juste montrer comme un exemple. Je vais utiliser Namecheap et je vais taper skillsharecourt, et maintenant il va charger toutes les idées, tous les domaines disponibles que nous pourrions avoir. Skillsharecourse.com est assez certain que ce n'est pas disponible, mais nous pouvons obtenir tous ces obscurs comme skillsharecourse.xyz, et skillsharecourse.space. Je vais juste choisir l'un des moins chers parce que ce n'est qu'un exemple, donc je vais aller au panier. Ça va me coûter un dollar australien. On n'a pas besoin des extras, donc je vais confirmer. Connectez-vous à mon compte parce que j'ai déjà un compte avec Namecheap, et vérifiez mes coordonnées, payez maintenant. Il commencera à traiter votre commande, et voilà. Je viens d'acheter skillsharecourse.space, et ce que je peux faire maintenant, c'est que je peux cliquer sur « Gérer » et cela devrait être similaire sur tous les fournisseurs de domaine. Voici une liste d'autres domaines que j'ai. Je peux descendre à skillsharecourse.space, cliquer sur « Gérer » et pourquoi nous cliquons sur « Gérer » tout de suite est de descendre à nos serveurs de noms. Ici, nous avons des serveurs de domaine que nous devons configurer. C' est essentiellement là que nous allons pointer notre domaine vers l'endroit où notre site Web est stocké. Donc essentiellement où se trouve notre hébergement. Maintenant, parce que Namecheap, eh bien, ils le font, font l'hébergement, mais si nous allions par exemple héberger notre site Web sur Namecheap, nous avons déjà acheté un domaine, donc nous pourrions simplement laisser cela comme DNS de base Namecheap. Juste pour répéter que, si vous deviez héberger votre site Web au même endroit que vous avez acheté votre domaine, vous n'avez probablement pas besoin de modifier vos paramètres DNS. Ils sont déjà configurés pour diriger vers le site Web sur lequel vous l'avez acheté, mais si vous hébergez votre site Web sur un autre hôte différent de celui où vous avez acheté votre domaine, vous devrez configurer ici à l'aide du DNS personnalisé, où vous voulez que ce domaine soit dirigé. Maintenant, le choix de l'endroit où vous hébergez votre site Web est à vous. J' héberge en utilisant mon compte revendeur sur un hôte appelé Netorigin en Australie. Je ne recommanderais pas nécessairement cela pour vous si vous êtes aux États-Unis, au Royaume-Uni, ou ailleurs dans le monde, mais pour moi en Australie, c'est l'hôte que j'utilise, mais que vous utilisiez ou non ou non, ou tout hôte que vous utilisez, la chose que vous devez faire pour lier votre domaine à votre hébergement, est de trouver les serveurs de noms de cet hôte particulier. Pour moi, c'est Netorigin, et c'est comme ça que je fais. Je vais juste taper les serveurs DNS Netorigin, et si vous allez avec GoDaddy, vous pouvez taper dans les serveurs Godaddy.DNS, et ici il y a un article de base de connaissances de Netorigin, qui est la société que j'utilise, et voici quelques serveurs de noms de domaine. Je peux prendre le premier, le mettre là, le second le mettre là, et vous n'avez probablement pas besoin des quatre, mais je pense que c'est juste pour le renfort. Mettez-le là, et puis je vais cliquer sur « Cocher » ou quoi que ce soit, sur votre chose de domaine particulier que vous utilisez pour enregistrer. Comme il est dit ici, cela peut prendre 48 heures pour entrer en vigueur, mais c'est souvent beaucoup plus court que cela, mais assez tôt, nous aurons notre fournisseur de domaine lié à notre fournisseur d'hébergement, et ce qui se passera quand vous frappez sur ce domaine, va rechercher des sites Web sur ce serveur de noms de domaine, et votre hôte, quel que soit son Netorigin, ou GoDaddy, ou qui qu'il soit, trouvera votre site Web et le servira à vous. Et si vous n'avez pas déjà un hôte comme moi ? Comme je l'ai dit, tu peux aller dans un endroit comme GoDaddy. J' ai toujours mal orthographié GoDaddy. Je ne savais pas qu'il y avait un site Web appelé GoDay. Vous pouvez aller à GoDaddy, cliquer pour « Hosting » et acheter un hébergement web. Vous pouvez acheter de l'économie c'est seulement cinq dollars par mois, et alors ce que vous faites lorsque vous vous inscrivez pour l'hébergement est, quand ils demandent votre nom de domaine, vous pouvez le mettre dans. Avec GoDaddy cependant, ils vous offrent un domaine gratuit. Il est probablement plus rentable pour vous simplement obtenir votre domaine avec votre hébergement, et vous n'avez même pas à les relier ensemble, mais pour moi, j'ai mon hébergement sur Netorigin, et je voulais juste acheter un domaine bon marché sur Namecheap. Donc, ce lien est nécessaire, et aussi il va juste vous montrer la différence entre les domaines et l'hébergement. Si je suis allé à GoDaddy et obtenir l'hébergement web avec le domaine gratuit, je ne comprends peut-être pas complètement la différence entre les domaines et l'hébergement web, parce qu'ils rendent si facile de rassembler les deux. Donc, je pense que même si vous décidez d'aller avec un hôte qui vous donnera un domaine gratuit, et de le lier automatiquement pour vous, il est bon de connaître la différence entre les domaines et l'hébergement, et de pouvoir le lier à l'avenir si vous avez besoin à. 16. Déploiement P2 : fichiers: Très bien, donc maintenant vous devriez avoir votre domaine, que vous avez enregistré via un registre de domaine comme Name Cheap et vous devriez avoir votre hébergement que vous avez enregistré au même endroit ou quelque part différent, si elles sont quelque part différent, vous devriez les lier ensemble, en mettant vos serveurs de noms de domaine personnalisés. Donc, la prochaine étape sera d'accéder à votre panneau de contrôle et si vous vous souvenez avant, dans la dernière vidéo, il a dit que cela allait prendre jusqu'à 48 heures pour lier notre domaine à notre hébergement. Mais cela prend souvent beaucoup moins de temps et je l'ai laissé environ 5-10 minutes et c'est déjà lié. Donc, ce que je vais faire est d'abord de vérifier que nous pouvons accéder à notre panneau de contrôle et aussi changer certaines choses sur notre Panneau de configuration et commencer à déployer notre site Web. Je vais taper l'adresse de notre site Web, qui était Skillsharecourse.space/cPanel. Je vais appuyer sur « Entrée » et cPanel est juste un panneau de contrôle standardisé que vous pouvez utiliser pour faire beaucoup de fonctions dans votre site Web. Il est préférable de le voir et d'interagir avec lui que de le décrire à distance. Ce que je vais faire, c'est me connecter et te montrer tout de suite. Donc je vais utiliser un nom que nous avons mis en place sur la plateforme d'hébergement. Je l'ai fait en privé, mais pour vous, vous avez peut-être fait ça sur GoDaddy ou tout autre nombre d' hôtes et ensuite nous avons mis notre mot de passe et nous nous connectons. C' est cPanel et il vous donne un gestionnaire de fichiers, vous pouvez entrer et changer vos fichiers, il y a phpMyAdmin, donc nous pouvons faire notre base de données là-bas. Nous pouvons installer des applications comme WordPress ou Joomla presse pour magasiner en un clic fondamentalement, nous simplement cliquer là et puis cliquez sur « Installer ». C' est très pratique. Nous pouvons créer des sous-domaines, nous pouvons créer des comptes de messagerie. Il y a beaucoup de choses différentes que nous pouvons faire, beaucoup de choses que je n'ai même pas faites auparavant. Ce que je veux que tu fasses maintenant, c'est que tu vas voir ton gestionnaire de fichiers et que tu regardes ici. Très bien, donc en regardant cette structure, nous pouvons voir que nous avons notre répertoire personnel et nous avons ces différents dossiers, ETC, journaux, courrier, FTP public, HTML, SSL, TMP. Vous n'avez pas besoin de savoir ce que tout cela fait, mais si vous avez un dossier appelé HTML public, cliquez certainement dessus parce que c'est là que vous allez mettre votre site Web parce que lorsque vous frappez votre domaine, il va servir le à partir de cet emplacement. moment, nous venons d'avoir cette photo aléatoire de la poubelle CGI qui est complètement vide, donc il n'y a aucun risque à faire avec ça en ce moment parce qu'elle est complètement vide. Donc, l'étape suivante serait de télécharger notre site Web dans ce gestionnaire de fichiers. Donc, ce que je vais faire pour cela, c'est que je vais aller à mon cours Skillshare mon dossier de projet. Je vais y retourner, je vais le trouver ici, et ensuite je vais le zip pour que nous puissions le télécharger en un seul fichier. Donc sur Mac, j'appuie sur « Compresser » et j'ai un fichier zip. Donc je vais y aller, je vais cliquer sur « Télécharger ». Je vais prendre ce fichier zip qui est juste ici, il va télécharger. Je vais revenir en arrière et puis à partir de notre gestionnaire de fichiers, je peux cliquer dessus et cliquer sur « Extraire », je pense que c'est le mot sur le panneau C. Donc maintenant, nous avons ceci parce que je l'ai compressé sur un Mac, nous avons ce dossier MacOSX, plutôt, nous pouvons supprimer cela et puis ici est notre site Web. Nous allons avoir besoin de prendre tout ça et de le déplacer en arrière. Donc, plutôt que cette photo, nous allons juste nous débarrasser de cela et la déplacer au HTML public. Retournez en HTML public, ce dossier est maintenant vide, donc nous pouvons le supprimer. Wallah, nous avons notre site web là-haut. Juste une seconde. Je pense que nous allons supprimer ce fichier zip aussi, mais oui, nous avons nos actifs frontaux là-bas, et voyons ce qui se passe quand nous tapons dans notre domaine maintenant. Skillsharecourse.espace. Nous allons obtenir une erreur de connexion à la base de données et cela ne me surprend pas du tout parce que nous avons oublié une étape importante en ce moment, et c'est que nous n'avons pas configuré notre base de données. Donc mettre tous les fichiers est bien et bon, mais nous avons défini ici, si vous cliquez dans le fichier, puis cliquez sur « Modifier », vous pouvez éditer le fichier directement à partir de votre gestionnaire de fichiers. Nous avons toutes ces informations. Nous avons tous ces serveurs et base de données à connecter et la base est vraiment une entité distincte, donc juste mettre nos fichiers ici ne suffit pas. Nous devons également configurer notre base de données et copier cette base de données. C'est ce que nous allons faire dans la prochaine vidéo. 17. Déploiement P3 : base de données: Dans la dernière vidéo, nous avons téléchargé les fichiers de notre site Web sur notre nouvel hôte, mais il manque une chose, c'est notre base de données. D' où pourquoi quand nous allons sur un site Web, il dit erreur de connexion. C' est un bon signe dans le sens où nous savons que notre site Web charge maintenant le code que nous avons créé, mais nous n'avons pas réellement configuré la base de données sur ce serveur distant. Bien sûr, nous allons obtenir une erreur de connexion. Maintenant, juste pour être clair, si nous n'avions pas de connexion à la base de données, peut-être que nous téléchargeions une application qui n'avait même pas de backend, nous n'aurions pas de problème. Je veux juste le démontrer rapidement. Vous n'avez pas à suivre. Mais si nous creusons, revenir à ce qu'il était avant qui était déteste HTML, et je clique sur Modifier, et je viens de me débarrasser de tout le PHP, ce qui n'aurait pas de sens dans un document HTML de toute façon. Rappelez-vous que nous avons ce fichier enregistré localement afin que vous n'ayez pas à vous soucier de perdre votre progression. On peut l'attraper tant qu'on l'a sauvegardé sur notre ordinateur. Je vais cliquer sur Enregistrer. Je vais juste vérifier. Il n'y a pas de PHP. Je vais revenir sur mon site Web, actualiser la page et vous pouvez voir que nous avons maintenant le meilleur site Web jamais connu. Je viens de réaliser que nous avons du PHP ici. Nous avions le titre, donc je peux mettre dans le meilleur site de tous les temps. Je pense que ce n'était pas ce que le nom était, mais tout va bien, mais on peut y retourner. Vous pouvez voir que nous avons un site web en direct sur Internet. Mais nous voulons déployer un site web connecté avec un back-end, avec une base de données. Je vais juste supprimer ce fichier et ensuite télécharger notre fichier PHP à nouveau. Je vais retourner à mon cours de partage scolaire, remettre ça. Il est téléchargé. Je peux revenir ici et nous aurons cette erreur de connexion à nouveau, car nous devons configurer la base de données. Ce que nous pouvons faire est d'utiliser phpMyAdmin. Le même programme que nous avons utilisé sur notre serveur de carte local, nous pouvons également utiliser sur un hôte. Ce que je vais faire est de trouver notre phpMyAdmin. Vous pouvez y accéder via ici, mais si vous n'avez pas cette page, vous pouvez également prendre votre nom d'hôte puis entrer /phpMyAdmin. Ce que nous allons faire ici, c'est cliquer sur la base de données test, et nous allons exporter tout ici pour que nous puissions rapidement l'importer sur votre hôte et commencer à créer une connexion. Je vais faire une exportation rapide. C' est le code SQL qui va tout créer. Nous avons juste besoin de copier tout ça. Ensuite, nous allons retourner à notre cPanel, et à partir de là, nous allons utiliser phpMyAdmin qui est juste ici en une seconde. Mais tout d'abord, nous devons créer cette base de données que nous avons faite sur notre site web local, la base de données test parce qu'elle n'existe pas encore sur notre hôte. Je vais cliquer sur MySQL Bases de données, et je vais créer une nouvelle base de données. Je vais juste appeler ça test. Il est créé et vous pouvez descendre ici et voir qu'il a skillsharecourse_test. Cela nous oblige à l'espace de noms en utilisant ce qui est le nom de notre site Web. Ce que nous devons faire maintenant est de créer un utilisateur pour accéder à cette base de données. Je vais juste appeler cet administrateur utilisateur, et je vais taper pour le mot de passe. Vous pouvez taper ce que vous voulez. Je vais juste générer un mot de passe au hasard ici dans mon seul gestionnaire de mots de passe. Il y a des mots de passe très forts. Assurez-vous de copier cela. Je vais créer un nouveau document juste pour que je puisse stocker ce chemin. Tu ne veux pas le perdre. C' est le mot de passe que j'ai sélectionné, puis créez l'utilisateur. Maintenant, vous avez créé un utilisateur de base de données avec succès. Maintenant, la dernière chose que vous voulez faire est d'ajouter l'utilisateur à la base de données. L' utilisateur va être skillsharecourse/admin, et la base de données est skillsharecourse_test. Cliquez sur Ajouter et accordez-lui tous les privilèges. Cliquez sur Effectuer des modifications et les modifications ont été apportées. Maintenant, nous pouvons aller à phpMyAdmin que nous pouvons faire en cliquant ici. Allez dans phpMyAdmin, et d'ici vous pouvez voir que nous avons notre skillsharecourse_test. Maintenant, la première chose que vous devriez remarquer est que c'est différent dans son nom de notre base de données de test qui est db de test. Nous allons également devoir y apporter quelques changements. Mais nous pouvons entrer ici, dans notre SQL et copier à travers notre requête. Nous avons un mot de passe maintenant, donc je vais devoir retourner ici, copier sur cette requête que nous avons mise là avant, coller ici. Au lieu de test db, je vais changer cela en skillsharecourse_test qui est un nouveau nom de base de données. Maintenant, cherchez d'autres références de test_db. Cela devrait être son fait plus. Si nous cliquons maintenant, il devrait sélectionner cette base de données, puis importer toutes nos tables. Espérons voir si ça marche. Il indique qu'aucune base de données n'est sélectionnée. Ce que nous allons faire, c'est que nous allons aller dans la base de données et ensuite mettre le SQL à partir du contexte de cette base de données. Je vais revenir ici, mettre à nouveau le nom de la base de données, cliquez sur Aller. Les animaux de table existent déjà. On dirait que notre importation a déjà fonctionné. Nous pouvons maintenant entrer et voir que nous avons notre table pour nos utilisateurs et maintenant table pour les animaux de compagnie. Maintenant, c'est un cas d'utilisation de toutes les informations. Le nom de la base de données, le nouvel utilisateur que nous avons créé, et maintenant changer cela dans notre code afin que nous puissions obtenir une connexion à la base de données. et ce sera la dernière étape de l'affichage de notre site Web. Faisons ça maintenant. Nous avons maintenant notre base de données sur notre nouveau site Web. Ce que nous devons faire est de mettre à jour notre fichier index.php parce que le nom de la base de données est changé et aussi l'utilisateur que nous utilisons pour accéder à cette base de données a changé. Si nous allons ici et allons dans notre index php, nous pouvons l'éditer. Si vous double-cliquez, il sera téléchargé. Vous voudrez simplement cliquer dessus une fois, puis cliquez sur Modifier et vous pouvez le modifier directement dans votre navigateur. Quand vous faites de petits changements comme ça, c'est bon. Mais si vous faites de gros changements de site Web, vous voudriez probablement aller avec FTP, auquel vous pouvez accéder ici. C' est un peu plus d'où pouvez-vous y accéder, auquel vous pouvez accéder à partir d'ici. Mais c'est plus un concept avancé. Pour l'instant, ce que nous faisons, c'est tout à fait bien juste d'utiliser le Gestionnaire de fichiers. Ce que nous allons faire est de mettre à jour ces champs ici, ce nom d'utilisateur, mot de passe, hôte et base de données. Le plus facile que nous connaissons est que la base de données n'est plus test db, c'est skillsharecourse_test. Je vais mettre ça là-dedans. J' ai intuitivement appuyé sur Command S pour enregistrer, mais vous ne le faites pas lorsque vous utilisez le Gestionnaire de fichiers. Pour en revenir à ici, si nous ne nous souvenons pas de notre nom d'utilisateur, nous pouvons simplement aller dans les bases de données MySQL et vérifier les utilisations actuelles. Notre nom d'utilisateur était skillsharecourse_admin. On peut y retourner, mettre ça comme nom d'utilisateur. N' oubliez pas que j'ai créé un document pour enregistrer notre mot de passe. Je vais entrer, copier ça et mettre ce mot de passe. Maintenant, pour DB HOST, nous pouvons simplement le laisser comme localhost. Cliquez sur Enregistrer. Passez à notre projet, actualisez la page, et voyons ce qui se passe. Connexion réussie et nous avons notre site Web ici et toutes nos références à la base de données fonctionnent encore. La seule chose qui a vraiment changé était le nom de notre base de données, mais tout à l'intérieur est le même. Aussi l'utilisateur qui se connecte à la base de données, qui est juste d'avoir un utilisateur pour se connecter à la base de données. Une fois connecté à la base de données, tout est le même. La table où les noms étaient les mêmes, les champs étaient les mêmes, et c'est pourquoi nous avons soudainement un site Web ici. Dans la vidéo suivante, je vais vous montrer comment vous pouvez éditer votre site web en direct, en utilisant FTP. Parce que si vous devez apporter des modifications encore et encore, vous ne voulez pas vraiment le faire dans le Gestionnaire de fichiers. Il y a des chances que vous vouliez probablement le faire localement d'abord si vous faites beaucoup de développement, alors modifiez-le ici et ensuite porté à travers. Il existe plusieurs façons de déployer un sage plus avancé à déployer. Mais je voulais juste vous montrer rapidement FTP parce qu'il est important de connaître en tant que développeur web. Je te vois dans la prochaine vidéo. 18. Utilisation de FTP: Dans la dernière vidéo, nous avons mis à jour notre index.php en utilisant l'éditeur intégré dans notre gestionnaire de fichiers cpanel. Mais dans cette vidéo, nous allons parler de FTP, qui signifie File Transfer Protocol. Ce qui est vraiment bénéfique à propos de FTP dans notre situation, c'est dire par exemple nous ne voulons pas éditer ces fichiers à partir de cette interface cloud. Peut-être que nous voulons les éditer en utilisant notre éditeur de code Adam, car au moins pour moi c'est beaucoup plus agréable à utiliser et nous pouvons avoir tous nos fichiers ici rapidement modifiables. Ça rend les choses plus faciles. Nous pouvons utiliser nos outils locaux pour apporter des modifications en direct à notre site Web. Maintenant, un avertissement, en fonction de la taille de votre site Web ou des changements que vous apportez, vous ne voudrez peut-être pas faire de changements en direct, donc vous devriez probablement tout construire localement, développer tout sur votre hôte local ici, vérifiez qu'il fonctionne, puis commencez à le migrer. Il y a des moyens plus sophistiqués que de simplement copier les fichiers comme nous l'avons fait. Vous pouvez aussi le faire via FTP, mais disons par exemple, il y a eu un petit changement ou tout ce que vous pensez ne va pas causer un gros problème et que vous vouliez modifier cela en utilisant votre propre éditeur de code, nous pouvons utiliser ce qui est appelé FTP. Je pensais que ce serait important d'inclure FTP parce que c'est quelque chose que j'utilise tout le temps avec mes projets. On va retourner à cpanel ici, et on va retourner à la page d'accueil. Ce que nous pouvons faire pour créer un compte FTP est de cliquer sur les comptes FTP. Ici, je ne vais pas être trop créatif, je vais juste l'appeler compte FTP. Je vais aller à un mot de passe pour générer un mot de passe aléatoire à utiliser. Ce qui est important ici, c'est le répertoire de sorte que vous voulez vous débarrasser de tout cela parce que par défaut, il y a une section de la quantité d'informations que ce compte FTP peut recueillir. Si vous exécutiez un grand site Web et que vous vouliez juste donner à un utilisateur particulier l'accès à une petite partie de votre site. vous pourriez peut-être créer un répertoire différent pour eux, mais nous voulons éditer l'ensemble du site, donc nous allons nous en débarrasser. Nous n'avons pas vraiment besoin d'un codeur parce que nous l'utilisons donc nous allons créer le compte FTP. Maintenant, on peut le voir ici. Maintenant, l'autre chose que vous allez avoir besoin d'utiliser FTP localement, sur votre propre ordinateur est un client FTP et le client FTP que j'utilise est appelé Cyberduck, il y en a aussi un qui s'appelle FileZilla. Mais fondamentalement, c'est un petit programme qui vous permet de vous connecter via FTP. Ils vous permettent également de connecter d'autres serveurs. J' ai déjà installé Cyberduck, tout ce que vous avez à faire est de le télécharger et de l'installer, il n' y a pas beaucoup de configuration qui doit se produire à cet égard. Ce que j'aime à propos de cpanel, c'est que je peux simplement cliquer dessus et vous pouvez télécharger les fichiers de configuration. Si vous voulez vous simplifier la vie dans votre Windows, utilisez FileZilla ou CoreFTP et si vous êtes sur Mac, vous pouvez utiliser Cyberduck comme moi et vous pouvez télécharger le fichier de configuration qui aura toutes les informations enregistrées pour vous déjà. Si vous voulez le faire manuellement, sont les champs que vous devez mettre dans votre client. Ce que je vais faire, c'est télécharger le fichier de configuration FTP pour Cyberduck. Il suffit d'enregistrer dans les téléchargements. Tout ce que je dois faire maintenant est juste de cliquer dessus et soudainement Cyberduck s'ouvre et il va s'ouvrir, ou il va commencer à ouvrir une connexion à notre site Web. Il est là, le nom d'utilisateur est prérempli et nous pouvons y accéder. Nous avons juste besoin de taper notre mot de passe à nouveau parce qu'il n'enregistre pas le mot de passe pour raisons de sécurité afin que nous puissions coller ce mot de passe là, cliquez sur Connectez-vous. Il va dire connexion non sécurisée le plus souvent, il suffit de cliquer sur Continuer. Une fois connecté, vous pourrez voir l'ensemble de votre site Web. Ensuite, vous pouvez cliquer dans HTML public et il y a votre index php. La chose cool à propos de l'utilisation de FTP est que je peux cliquer avec le bouton droit sur cela. Je ne veux pas cliquer sur Modifier avec l'édition de texte afin que je puisse changer mes préférences et aller dans l'éditeur et dire que je veux éditer avec Atom et toujours utiliser cette application. Je pense que vous avez peut-être besoin de vous rafraîchir. Maintenant, je peux cliquer sur le bouton d'édition et soudainement nous l'avons dans notre éditeur de code. Maintenant, quelque chose que vous devez être conscient est la différence entre votre index php sur votre serveur web distant et l'index php que vous avez localement. Si vous les avez ouverts en même temps, je vais juste étendre cela, Atom vous fera savoir qui est lequel. Celui dans les dossiers var privés est celui que vous modifiez temporairement pour ensuite télécharger à nouveau sur votre site Web et celui-ci est dans votre répertoire de projet de cours Skillshare ou peu importe ce qu'il est appelé, mien est juste appelé cours Skillshare. On peut faire des trucs comme aller ici et je vais aller ici où on peut voir notre site web en direct, le mettre sur le côté, et changer certaines choses. Disons « Bonjour et bienvenue sur ce site  », puis nous appuyons sur Enregistrer. Ce qui va se passer, c'est qu'il va télécharger avec Cyberduck. Il dit téléchargement terminé, une fois qu'il dit téléchargement terminé, nous devrions être en mesure de rafraîchir la page et il dit « Bonjour et bienvenue sur ce site ». Maintenant, nous sommes en mesure d'éditer notre site Web en direct en utilisant un système beaucoup plus familier pour nous lorsque nous développons ce qui est appelé localement, c' est-à-dire localement sur notre propre ordinateur, nous pouvons utiliser notre propre éditeur de code, nous pouvons naviguer vers fichiers différents. Dites par exemple, si je voulais éditer un autre fichier aussi, disons par exemple que je voulais que les styles soient ouverts en même temps, je peux les éditer et donc je peux rebondir entre index.php et styles.css sur le serveur distant et cliquez sur Enregistrer. Dès qu'il télécharge, ces modifications sont en ligne sur notre site Web, donc c'est l'avantage d'utiliser FTP. Il y a d'autres avantages, mais pour moi en tant que développeur, j'utilise FTP de cette façon le plus souvent, étant capable d'éditer un site Web sur un serveur distant, qui parfois n'est même pas un site Web en direct, peut être sur ce qu'on appelle un serveur. Un serveur intermédiaire est un site Web en direct, mais ce n'est pas à l'adresse du site Web final. C' est un peu à propos de FTP, Cyberduck est un programme léger cool pour une utilisation sur Mac, pour vous les gars sur Windows, vous pourriez aimer FileZilla. Mais maintenant que nous avons couvert FTP, nous savons maintenant comment construire un site Web, le mettre sur Internet, et maintenant le modifier en utilisant FTP et c'est donc essentiellement la majeure partie du cours. J' ai encore quelques vidéos à venir pour nous terminer. Oui, j'espère que vous pouvez commencer à comprendre maintenant comment fonctionne le développement web et les différentes parties qui réunissent pour vous obtenir un site Web sur Internet. Si vous avez des questions, bien sûr, laissez-les dans la section des questions, et je vous verrai dans la prochaine vidéo. 19. Bonus : Wordpress: D' accord. Dans cette vidéo, je veux partager avec vous un peu de bonus et ce bonus est WordPress. Maintenant, dans ce cours, nous avons construit tout à partir de zéro. Oui, nous avons utilisé quelques frameworks dans le cas de jQuery et Bootstrap et nous avons utilisé un peu d'un modèle pour commencer sur notre page d'accueil mais vous remarquerez que tout le PHP que nous devions faire nous-mêmes et si vous deviez construire un application web personnalisable, vous devrez programmer vous-même et utiliser des bibliothèques et peut-être développer l'un de ces frameworks back-end que nous avons abordés dans la leçon sur les frameworks mais pour beaucoup de gens, nous n'avons pas besoin de réinventer la roue, nous avons juste besoin un site Web de contenu simple et l'une des meilleures plateformes à développer qui est un système appelé WordPress. Maintenant, si nous allons dans, tapez WordPress dans Google, ce dont je ne parle pas est wordpress.com, qui est un site Web qui vous permettra de créer un site WordPress sur leur propre hébergement et ils contrôlent tout mais ce dont nous parlons, c'est le logiciel open source. WordPress est un tas de code que vous pouvez simplement télécharger et éditer complètement ou utiliser comme il vous est donné dès la sortie de la boîte. Juste pour démontrer que, si nous devions télécharger WordPress, il ne s'agit que d'un fichier de neuf mégaoctets, donc je peux aller dans les téléchargements, je vais décompresser WordPress et puis c'est essentiellement le back-end d'un site WordPress. Donc, vous avez tout un tas de fichiers PHP ici, vous avez des plugins et des thèmes et différentes choses que nous allons obtenir en juste une seconde mais je voulais juste faire le point de vous obtenir un tas de fichiers PHP lorsque vous téléchargez WordPress mais ensemble, ils créent un site Web immédiatement sorti de la boîte. Pour le démontrer, ce que je vais faire, c'est que je vais revenir à notre projet ici et je jamais été trop attaché à ce site pour commencer. Ce que je vais faire est juste de supprimer ce que nous avons ici, si vous avez mis beaucoup d'efforts dans votre site Web, peut-être que vous ne voulez pas supprimer cela et peut-être que vous devriez le faire sur un autre site Web mais je ne suis pas trop attaché à cela, donc je vais utiliser exactement le même hôte pour le faire dans le même domaine. Donc, je vais aller à cPanel et ce qui est génial à propos de cPanel est que vous pouvez installer quelques applications avec, fondamentalement, ils l'appellent une installation en un clic mais il n'y a que quelques clics à faire. Installer WordPress sur votre propre ordinateur prend un peu de temps, vous devez mettre en place des bases de données comme nous l'avons fait mais en utilisant cPanel, nous pouvons simplement obtenir un site WordPress assez facilement. Donc, nous avons WordPress ici, nous pouvons cliquer sur « Installer l'application » et il va nous poser quelques questions. Nous voulons l'installer directement sur notre domaine parce que je viens de supprimer les fichiers, ne me dérange pas que cela va devenir mon site WordPress maintenant. Vous pouvez rester avec les paramètres standard, ce que je vais faire est que je vais changer mon nom d'utilisateur Administrateur juste en Admin et je vais mettre un autre mot de passe. Je sais que nous avons créé beaucoup de mots de passe dans ce cours, mais nous devrions vraiment créer un mot de passe séparé pour WordPress aussi et donc ce que je vais faire est comme toujours, je vais aller à mon seul mot de passe et juste générer un nouveau mot de passe et assurez-vous de garder ça quelque part. J' ai le mot de passe FTP ici, WordPress, mot de passe. D' accord. Celui-ci est vide. Votre e-mail administrateur est l'e-mail auquel il va envoyer des informations en fonction de ce qui se passe, sur WordPress. Je vais changer ça à chris@christhefreelancer.com et vous pouvez nommer votre site web, peu importe. Je vais juste le laisser comme mon blog, juste un autre site WordPress et vous pouvez laisser tout le reste le même et cliquer sur « Installer ». Vous verrez ici comment vous pouvez obtenir rapidement une application d'installation WordPress. Je fermerai ça et j'espère pouvoir te montrer ça en temps réel. Donc très rapide, j'espère qu'il ne sera pas bloqué sur 99 et l'installation est terminée, quelle vitesse était-ce ? Maintenant, quand nous allons à notre domaine, nous avons un site WordPress. Ça ne ressemble pas beaucoup maintenant, mais il y a quelques choses qui se passent ici et ce que nous pouvons faire, c'est que nous pouvons accéder à l'administrateur. La chose importante à savoir est que beaucoup de gens se confondent, j'ai déjà mes informations de connexion pour cPanel, pourquoi ai-je besoin de me connecter à WordPress et d'aller dans un tableau de bord différent. Eh bien, cPanel est une couche plus profonde, c'est juste un endroit pour gérer votre site Web et vous pouvez réellement accéder au code, donc si nous revenons à notre gestionnaire de fichiers, nous pouvons voir maintenant qu'en HTML public, cette structure que nous avons vu avant quand nous avons téléchargé WordPress est maintenant sur ici. Comme je l'ai déjà dit, WordPress est juste un tas de fichiers de code qui ensemble font de vous un site Web. Dans cPanel, c'est là que vous feriez toutes les choses que nous avons déjà faites, comme accéder à vos fichiers, vous regarderiez votre base de données manuellement, faites toutes ces adresses e-mail, sous-domaines, tout ce que vous feriez de votre cPanel mais en termes de votre nouveau site WordPress, c'est le backend. Ceci est votre tableau de bord et vous avez donc besoin d'un identifiant différent pour cela. Comment fonctionne WordPress et la magie de celui-ci est en fait commencé comme une plate-forme de blogs, est que je peux créer des messages. Je peux cliquer ici et au lieu de Hello World, je vais juste laisser Hello World là pour une seconde et je dirai billet de blog numéro deux et ensuite nous pouvons simplement taper contenu du blog et nous pouvons lui donner une catégorie aussi bien. Disons que ce sont des articles de voyage, j'adore voyager. Je sais que cela n'est pas lié au voyage, mais juste à titre d'exemple, nous pouvons cliquer sur « Publier » et ensuite nous pouvons le voir. Maintenant, nous avons un billet de blog avec le contenu du blog et ensuite n'importe où qui fait référence à tous les messages de blog, nous allons voir. Donc, par défaut, quand nous allons sur notre site Web, il nous montrera tous nos articles de blog. Maintenant, vous pouvez voir Hello World et vous pouvez également voir des billets de blog aussi. Maintenant, nous sommes actuellement connectés, donc nous avons cette barre en tant qu'administrateur mais si nous devions l'ouvrir dans une fenêtre Incognito, que nous puissions la voir comme l'utilisateur le verrait, ils la voient exactement la même chose sauf sans cette barre et ils sont pas en mesure d'éditer des choses ici non plus. Si vous remarquez d'avant, il y a quelques choses supplémentaires qui apparaissent comme edit, l'utilisateur n'aura pas cela à leur fin. C' est complètement sécurisé à moins que vous ne leur donniez un login et qu'ils peuvent réellement changer ces choses. La première chose avec avoir un site WordPress que vous voudrez personnaliser est un thème et ce que vous voyez ici, lorsque vous allez sur le site actuel est un thème de base par WordPress lui-même appelé 2017. Chaque année, ils en créent un nouveau en fonction de l'année et c'est ce à quoi ressemblait 2015, c'est à quoi ressemble 2016. Je suppose que le nouveau sortira bientôt et qu'il y en aura un autre l'année suivante. Mais j'aime utiliser un thème appelé Divi et vous pouvez trouver Divi, suffit de taper dans le thème Divi, il est fourni par des thèmes élégants. Vous n'avez certainement pas à utiliser celui-ci, mais cela paie pour investir dans un beau thème WordPress qui a un générateur de page. Parce que, si on voulait, j'ai trop de choses en même temps. Si nous voulions personnaliser et créer une page dans ce thème actuel, nous pouvons aller à « Ajouter une nouvelle page » et nous obtenons essentiellement la même interface que nos messages et nous pouvons ajouter des images. Mettons juste une image de mon visage là-dedans, n'est pas parce que je m'aime, c'est juste parce qu'il est apparu en premier et peut-être que ce n'est pas une question de page pour moi, donc je peux aligner ça sur la gauche et ensuite mettre, « Salut, je suis Chris » et je clique sur le lien là, donc c'est essayer de lier quelque part mais je peux juste éditer cela et vous pouvez voir que nous n'avons pas encore eu à creuser dans le code, tout est juste en utilisant cet éditeur. Je ne peux toujours pas me débarrasser de ça. Essentiellement pour se débarrasser de cela, nous pouvons réellement creuser dans le HTML et c'est fait en cliquant sur cet onglet de texte. Je peux voir ici maintenant que nous avons une balise de lien, donc vous pouvez vous en débarrasser de chaque côté et cela nous permet de revenir ici et de voir la représentation visuelle. Mais lorsque vous utilisez un thème qui n'a pas de générateur de page, c'est toute la personnalisation que vous obtenez. Vous pouvez aligner, vous pouvez mettre dans une citation, vous pouvez mettre dans des liens, des en-têtes différents. Donc, je vais mettre dans le premier titre. Ensuite, nous pouvons publier cela comme une page ou peut-être pas. Je devrais probablement lui donner un titre d'abord, à propos. Ensuite, nous pouvons avoir notre page About. Ça va apparaître en fonction de notre thème. Mais l'avantage d'utiliser quelque chose comme Divi est que vous obtenez un générateur de page. Comme Divi est un thème premium, vous ne pouvez pas le rechercher ici, vous devrez le télécharger une fois que vous l'aurez téléchargé. Encore une fois, nous ne faisons pas un cours complet sur le développement Divi ou WordPress. Je voulais juste vous donner un peu de démonstration sur la façon dont vous pouvez créer un site Web avec un code minimal et l'avoir entièrement personnalisable. C' est juste le téléchargement maintenant, c'est un thème assez grand, nous allons juste avancer rapidement ceci et je vous verrai dans juste une seconde. Divi a téléchargé sur notre site WordPress maintenant. Ils vont juste l'installer maintenant pour nous. Comme vous pouvez le voir ici, il est dit, Thème installé avec succès. La dernière étape, sera de l'activer si nous sommes confiants que nous voulons définitivement changer à ce thème. Nous n'avons encore rien sur notre site Web, donc ce n'est pas un problème. Vous pouvez voir qu'il a déjà ajouté quelques trucs à notre liste ici. Il y a un autre type de poste dans Divi appelé Projets et c'est bon pour les portefeuilles. Si vous utilisez un thème premium comme Divi, il vous donnera souvent un autre menu et vous donnera des options de thème afin que vous puissiez modifier des entités directement dans le thème. Si nous revenons à notre site Web, nous pouvons aller ici et cliquer sur Visiter le site. Soudain, notre site web semble complètement différent. Nous avons encore les deux billets de blog, mais nous avons une toute nouvelle structure, je suppose une nouvelle peau, vous pouvez dire, et c'est vraiment le nouveau thème, Divi. Mais la chose puissante à propos de Divi et quelques autres thèmes premium aussi, c'est que vous pouvez créer une nouvelle page et vous pouvez la structurer en utilisant leur générateur de page. Maintenant que nous avons Divi, vous pouvez voir ces choses violettes supplémentaires à venir. Nous avons les paramètres ici, et puis nous avons un bouton ici pour utiliser le Divi Builder. Ce que je vais faire, c'est, je vais nommer cette page Divi Page et je vais cliquer sur Utiliser Divi Builder. Vous pouvez réellement utiliser Visual Builder. Je vais te montrer ça. Ceci est un visuel spécial Ce que vous voyez est ce que vous obtenez constructeur dans Divi, et puis vous pouvez réellement interagir avec la page juste en face de vous. C' est idéal pour les designers qui veulent voir leurs changements se produire immédiatement. Ici, je peux juste mettre un texte, bonjour, bonjour et vous pouvez le voir tout de suite. Ensuite, nous pouvons changer d'autres aspects de conception comme l'alignement, le dimensionnement, il y a beaucoup d'options ici et il faudra un certain temps pour se familiariser avec, et cela dépendra du thème que vous utilisez, j'utilise juste Divi. Si nous cliquez sur Enregistrer, je vais vous montrer, je vais publier plutôt parce qu'il s'agit d'une nouvelle page. Maintenant que cela a été enregistré et publié, je vais quitter Visual Builder et vous montrer l'autre façon que nous pouvons éditer. Nous avons Divi et c'est à travers ce Divi Builder et nous pouvons construire des sections. Où est notre rangée ici ? Nous avons notre rangée dans le module. Nous pouvons ajouter une autre ligne et nous pouvons la configurer comme nous le voulons, comme quatre colonnes de même taille, ou nous pouvons l'avoir comme ça avec une taille des deux tiers et une taille d'un tiers, nous pouvons le diviser en deux. Faisons ça. Ensuite, nous avons ces espaces pour cliquer et mettre un module. Vous pouvez rechercher les différents dans Divi si vous êtes intéressé, mais nous pourrions mettre comme une image, par exemple, et ensuite nous pourrions mettre dans cette image que nous avions avant, appuyer sur Enregistrer. Si vous ne voulez pas réellement publier les modifications, disons que si vous l'utilisez sur un site Web en direct, vous pouvez simplement afficher un aperçu pour voir à quoi elles ressembleraient avant d'enregistrer. Je n'ai pas mis de restrictions sur l'image réelle, donc elle apparaît comme toute la largeur. Mais si nous voulions en changer la largeur à 12 %, nous pourrions le rafraîchir. Ensuite, dans l'autre partie, nous pourrions le déplacer vers le bas, supprimer cette ligne, mettre dans un champ de texte. Je joue juste pour être honnête, je te montre ce qu'on peut faire à Divi. Je vais mettre le texte de test, enregistrer, mettre à jour, voir la page. Vous pouvez voir qu'on a une colonne ici et une colonne là-bas. Maintenant, évidemment, ce n'est pas le plus beau site Web. Il y a encore du travail à faire. Mais je voulais vous montrer WordPress et comment nous pouvons faire beaucoup de levage lourd dès la sortie de la boîte avec WordPress, c'est un logiciel open source très puissant. La raison pour laquelle il est appelé open source est parce que nous pouvons éditer le code directement. En fait, nous pouvons aller directement dans l'apparence, l' éditeur, et cela dit, soyez très prudent sur l'édition du code back-end. Je dis oui, et nous pouvons éditer n'importe quel fichier de thème de n'importe lequel de nos thèmes. À partir de WordPress, nous pouvons éditer n'importe quoi dans cette photo particulière. Ceci est juste un exemple, mais sur ce site, nous verrions un autre dossier pour Divi, et nous pourrions éditer tous ces fichiers. Ensuite, si nous allons plus loin, comme nous l'avons fait avec notre gestionnaire de fichiers, nous pouvons aller directement dans notre structure de fichiers et éditer n'importe lequel de ces fichiers. Maintenant, vous ne voudriez pas éditer aucun de ces éléments parce que sont ceux qui font fonctionner WordPress. Mais encore une fois, juste pour démontrer que c'est open source, c'est juste un tas de fichiers que vous pouvez éditer, mais il est incroyablement puissant et vous pouvez personnaliser autant que vous le souhaitez avec WordPress. Il fournit le bon équilibre de faire beaucoup de levage lourd, préparer certains des trucs que vous ne voudriez pas coder à partir de zéro, puis de vous permettre de toujours éditer complètement et de personnaliser le site autant que vous avez besoin. Je veux juste vous laisser avec WordPress parce que pour beaucoup de mes sites clients qui viennent à moi et ils disent juste, je veux un site web, je les recommande WordPress, et Divi est le thème que j'ai utilisé récemment, mais il y a d'autres thèmes que je recommanderais aussi. Un que j'ai utilisé sur un projet client a été Fortuna, qui est livré avec son propre constructeur de page. Je ferais totalement vos propres recherches pour trouver un thème avec un bon constructeur de page, et vous pouvez avoir des sites Web en marche comme ça. Par exemple, mon propre site, Chris le développeur, j'ai construit très rapidement en utilisant WordPress et Divi. C' est assez facile. Avec WordPress, vous définissez vos menus, vous pouvez tout définir dynamique, vous pouvez créer des pages comme nous l'avons fait, vous pouvez voir des billets de blog, et vous pouvez télécharger vos photos et logos et différentes choses. J' espère que c'était une bonne petite introduction dans WordPress. Si vous ne voulez pas tout construire à partir de zéro et que vous avez juste besoin d'un site Web de contenu de base et même pas un site de contenu de base, mais un blog ou quelque chose qui ne le fait pas, comme une application autonome entière qui doit faire quelque chose de spécial. WordPress est souvent un bon choix. Si vous faites un site de commerce électronique, il y a aussi quelques plates-formes différentes, mais je fais principalement des sites de contenu et WordPress est un très populaire ce qu'on appelle Content Management System, aka CMS, pour faire du contenu sites Web. J' espère que ce fut une bonne introduction à WordPress. Dans les prochaines vidéos, nous allons terminer et vous lancer dans votre propre projet de classe. Je te vois dans la prochaine vidéo. 20. Conclusion et projet de classe: Il est temps de terminer ce cours et de vous initier à votre projet de classe. Maintenant, vous devriez comprendre la différence entre le front et le backend, le but de HTML, CSS et JavaScript, ce qu'est un framework et pourquoi vous devriez en utiliser un, le but de PHP et MySQL, la différence entre un nom de domaine et hébergement et comment publier votre site Web sur Internet. Dans notre projet de classe, il est temps de rassembler toutes ces nouvelles connaissances pour publier votre premier site Web sur Internet ou le deuxième ou le troisième, peut-être que vous l'avez déjà fait auparavant. Quoi qu'il en soit, je vais vous donner quelques options. Numéro 1, vous pouvez construire votre site à partir de zéro comme nous l'avons fait dans la majorité de cette classe ou deux, comme nous l'avons fait à la fin, commencer par vous inscrire à l'hébergement et commencer à construire votre site sur WordPress. C' est à vous de voir comment vous voulez le faire. N' oubliez pas que chaque fois que vous ne savez pas faire quelque chose, commencez à googler. Je suis sérieux ici et je n'exagère pas quand je dis que recherche constante est quelque chose que vous devrez faire tout au long de votre carrière de développeur. Même si vous venez juste pour en apprendre davantage sur le web, apprendre à rechercher comme un développeur web est une compétence dont nous pouvons tous profiter. Après tout, les développeurs ne sont que des résolveurs de problèmes et Internet lui-même est une vaste ressource pour apprendre quoi que ce soit, comme nous l'avons fait dans le cadre de ce cours. Si vous avez besoin d'aide supplémentaire, laissez-moi juste un commentaire dans la boîte de discussion et laissez-moi savoir si vous voulez que je crée une autre classe pour vous les gars, en donnant plus de détails sur tout ce dont nous avons parlé dans la classe d'aujourd'hui. Cela conclut le cours. Je vous remercie beaucoup d'avoir regardé et j'ai hâte de voir vos projets de classe. Bonne chance, et je vous verrai dans la section discussion.