Week 9

>> ENCEINTE 1: Tout, droit accueillir à nouveau. C'est CS50. Et c'est le début de la neuvième semaine. Et c'est le début du reste de votre temps dans CS50, dans lequel nous transition maintenant, enfin, sur le web aspect de la formation, où vous pouvez constater que beaucoup des principes fondamentaux qui Nous exportons pendant des semaines toujours revenir visiter, ou hanter, nous. Mais maintenant, vous verrez que c'est une ordre de grandeur plus facile d' accomplir certaines tâches et résoudre certains problèmes - tant et si bien que même si vous pensiez certains ensembles de problèmes étaient amusants dans leur façon, je pense que vous trouverez que P a placé 7, p réglé 8, puis, en fin de compte, le projet final sera d'autant plus gratifiant parce que vous allez constatons que nous commençons à prendre pour acquis maintenant les choses comme la gestion de la mémoire, et pointeurs, et ce qui se passe le dessous de la hotte. Et encore une fois, thématiques, tout au long de l' semestre a été cette stratification et la superposition. Et maintenant, nous sommes en quelque sorte des ici, debout sur le épaules de ces dernières semaines. >> Maintenant, souvenez de la dernière fois que nous parlé de la façon dont l'Internet a fonctionné. Et c'était peut-être un simpliste, mais n'oubliez pas que chaque ordinateur dans le monde a une adresse IP répondre, même si c'est un peu une simplification encore. Et ces adresses sont utilisées pour unique identifier les machines de sorte que lorsque vous envoyez des informations, ou des paquets, pour ainsi dire, ils peuvent avoir une origine l'adresse et une adresse de destination. Et ces mêmes adresses IP peuvent être utilisés à la fois pour de bon et aussi pour le mal, à vous suivre, par exemple. En fait, chacun de vous avec un ordinateur portable ouvrir maintenant, ou un téléphone dans votre poche, possède une adresse IP sur le réseau de Harvard. Et ce n'est pas du tout difficile à corréler cela à qui et où vous sont de nos jours. Mais plus sur cela peut-être dans le futur. >> Maintenant, j'ai pensé ramener un peu souvenirs de [? améliorer?] et vous donner un autre clip d'un spectacle, vous pourrait trouver familier. Si nous pouvions éteindre les lumières pour quelques secondes. Le spectacle Numb3rs. >> ENCEINTE 2: Il s'agit d'une adresse de IPP4 32-bit. >> Intervenant 3: IPP, comme dans Internet? >> ENCEINTE 2: réseau privé. Pour le réseau privé d'Amita. Elle est tellement incroyable. >> Intervenant 3: Allez, Charlie. >> ENCEINTE 2: C'est. Une adresse IP du miroir. Elle nous laisser regarder ce elle le fait en temps réel. >> Intervenant 1: Ok, donc un certain nombre de choses mal avec cette image. Donc un, et celui-ci est acceptable, il s'agit en fait pas une adresse IP valide. Une adresse IP valide doit être des nombres de la forme w.x.y.z, où chacun de ces lettres est de 0 à 255. Mais c'est bien parce que tout comme le films où ils numéros de téléphone faux, ils fausses adresses IP. Vous n'avez pas réellement touché serveurs réels. >> Mais attention, il s'agit d'un navigateur. Et les navigateurs ne commencent pas émettre code informatique comme ça. Et si nous regardons un peu plus loin, remarquons que la langue qu'ils voient sur l'écran est un langage appelé Objective C, qui est la langue dans qui applications iPhone sont écrits, en particulier celles impliquant crayons, comme vous pouvez le voir le code source ici. >> OK, je pensais que c'était drôle. Donc, ce bout de code n'a absolument rien à voir avec quoi que ce notamment épisode était d'environ. Donc, la plaisanterie est une sorte de sur les gens en prenant pour cette accordée. Mais ce n'est pas si difficile à obtenir ces détails techniques adéquates. Et je voudrais vous encourager. Et effectivement, 50 pourrait très bien gâcher beaucoup d'émissions de télévision et des films ou vous parce que vous vous rendrez compte que c'est juste pas possible ce qu'ils sont faire à l'écran. Mais en effet, c'est le code qui vous pourrait voir dans une application iPhone ou une application Mac OS. Il n'a rien du tout à voir avec la sécurité. Alors gardez un œil sur les plus ces choses amusantes comme ça. >> Mais aujourd'hui, nous commençons à plonger vraiment profondément à toute une gamme de langues. Un effet, l'un des global emporter de cette partie de la n'est évidemment pas à apprendre à programmer en PHP, pour ne pas apprendre le langage SQL en soi, pas d'apprendre JavaScript en soi, mais plutôt pour vous enseigner la façon d'enseigner vous-même de nouvelles langues, car, en effet, nous commençons à prendre maintenant l' roues d'entraînement hors de sorte qu'après la fin de cours, vous ne vous attendez pas à 20 Page spécification pour vous dire comment de mettre en œuvre certains programmes. Vous avez assez d'ingrédients dans votre esprit, et assez d'outils dans votre outil kit, avec qui commencer à construire des solutions aux problèmes d'intérêt pour vous pour un groupe d'étudiants, pour certains projet de recherche, ou vraiment n'importe quoi de vous intéresser. >> Donc, à cette fin, rappelons que ce n'était l'image que nous a fait la dernière fois. Et c'est deux ordinateurs, le client et rompre, parler les uns aux autres. Et le protocole, la langue, ainsi parlent, que ces deux ordinateurs se produisent de prendre la parole est appelé HTTP. Et ce n'est que le protocole utilisé par ordinateurs de transférer des informations sur le world wide web. Le web, bien sûr, c'est juste un service de qui tourne au-dessus de la dits Internet. Quel est un autre service disponible sur dessus de l'Internet ces jours-ci? Un autre protocole ou - ce que c'est? >> AUDIENCE: FTP. >> INTERLOCUTEUR 1: FTP. Donc, protocole de transfert de fichier est une autre. La plupart d'entre vous n'ont probablement pas utilisé. Mais la plupart d'entre vous ont probablement utilisé des choses comme Gchat, ou instantanée messagerie plus généralement, certainement email. Et ceux, aussi, sont des services qui s'exécutent sur dessus de l'Internet parce que, à l' fin de la journée, l'Internet lui-même vraiment juste obtenir des données d'un point A à le point B. Et il utilise un certain nombre de particules elle-même, dont l'une ou deux d'entre eux plus généralement appelé TCP / IP, ce qui veut dire que sur un seul ordinateur Internet peut effectivement être fait choses différentes, email, et sur le Web, et ainsi de suite. Google fait beaucoup de cela. Alors, comment sont les services unique identifié, avons-nous dit, sur un ordinateur qui pourrait effectivement être font plusieurs choses? >> Le numéro de port. Et ce ne sont que des êtres humains arbitraire conventions comme 80 est web, 443 est Web crypté, 25 est email. Et il ya des grappes d'autrui. Et ces chiffres sont tout simplement incluses dans ces paquets d'informations, ces enveloppe virtuelle, qui fait contenu d'une demande ou d'une réponse. >> Ainsi, lorsque vous rentrez une réponse de la Web, généralement, vous ne voyez pas tout numéros que ce soit en termes de le code d'état de la réponse. Vous ne voyez pas en réalité l' fonctionnement interne de l' paquets qui reviennent. Mais 200 ne signifie pas en effet sur OK. Et cela signifie que tout va bien. Vous pourriez avoir vu un tas de ces derniers. Ce qui est probablement le plus commun vous avez vu sur le web? >> 404. Cela signifie simplement que le fichier n'est pas trouvé. Cela signifie que quelqu'un foiré. Vous avez par mistyping l'URL, ou quelqu'un d'autre a fait en vous donnant une URL valide, ou ils ont supprimé la fichier et l'URL est toujours utilisé par les gens. Donc, un certain nombre de raisons peuvent expliquer pourquoi un fichier est introuvable. Et vous verrez, dans les semaines à venir, ces autres codes d'erreur, et vous aurez profiter de certains d'entre eux. Le pire, c'est 500. Si vous obtenez une erreur 500 dans le code que vous avez écrit penser que comme une sorte de analogique de défauts dans le seg monde de la programmation web. Il n'est pas aussi désastreuse. Mais cela signifie simplement que, quelque part, vous foiré. Donc, nous nous réjouissons de ceux-ci. >> Mais nous allons voir si nous pouvons voir ci dans son contexte. Permettez-moi de passer à un navigateur ici et procédez comme suit. Donc, c'est Chrome, qui se trouve être installé dans l'appareil. Mais la plupart tous les navigateurs ces jours-ci a certaines fonctionnalités équivalentes. Je vais monter le menu du Chrome, et allez dans Outils, et je vais aller à outils du développeur. Et vous verrez que ce petit panneau s'ouvre dans la partie inférieure de la fenêtre. Un autre raccourci, pour être honnête, que je utiliser habituellement moi-même est à un clic droit ou Control cliquez n'importe où sur le web page et aller juste pour inspecter le. Et ce ne sera pas seulement ouvrir cela a pour vous. Il ouvrira également, en particulier, la partie des éléments sur le côté gauche. >> Nous sommes donc bien sûr de voir Google. Ils ont changé leur logo aujourd'hui. Mais si je fais défiler vers le bas ici, notez que, sous Elements, vous voyez ce qu'on appelle HTML, Hypertext Markup Langue, et c'est la langue que cela et toutes les pages web, vraiment, sont écrits po Mais c'est en fait formaté pour nous tellement plus lisible qu'elle ne l'est normalement. En fait, si je effectuer un zoom arrière, et je place il suffit de cliquer ou de configuration, cliquez droit cliquez sur la page, puis cliquez sur Affichage Source de la page, c'est littéralement ce que Google a fait descendre sur mon navigateur. >> Alors, une ou plusieurs personnes ont écrit Google.com en utilisant ce code source. La plupart de ces n'est pas HTML. C'est en fait un langage appelé JavaScript qui nous viendrons à mercredi. Mais ce que Chrome, et ce tous les navigateurs peut faire pour nous, est une sorte de voir passé toutes les distractions de l' syntaxe fou, et remettre en place un espace blanc pour nous, et même la coloration syntaxique, ou coloriser les choses pour nous. Donc, vous vous rendrez compte que ces soi-disant outils de développement intégrées dans les navigateurs va rendre la vie tellement, tellement plus facile parce que vous pouvez explorer, via ce menu Interface, exactement ce que le sous-jacent code source est pour n'importe quelle page sur Internet. Et en effet, c'est l'un des plus des moyens efficaces pour apprendre à faire quelque chose de nouveau, au moins si la page n'est pas aussi complexe que de submerger, est pour commencer à fouiller c'est HTML, regardez à sa soi-disant CSS, que nous viendrons pour un peu, ainsi, d'obtenir une comprendre comment ce programmeur mis en œuvre un certain particulier fonction de la page. >> Mais le plus intéressant techniquement droit maintenant ça va être ça. Si je vais à l'onglet Réseau, Voyons maintenant effacer cela. Je vais cliquer sur la petite traverser symbole ici, et puis aller à un autre site Web. Et je vais juste à taper dans Facebook.com. N HTTP, HTTPS pas, aucun WWW. Voyons voir réellement ce qui se passe ici. >> Entrée. Maintenant, remarquez tout un tas de trucs juste paru dans ce panneau de fond, en plus de la page Web apparaissant dans la partie supérieure. Je vais revenir en arrière vers le haut dans l' onglet Réseau, et je vais cliquez sur la première rangée. Ce que cet outil va nous révéler est chacune des requêtes HTTP qui vient de passer rapidement en arrière et vient entre mon navigateur et le serveur de Facebook. Et chacune de ces lignes représente une telle demande ou réponse, un ou plusieurs des ceux enveloppe virtuelle. Ou de façon plus décontractée, c'est comme une personne comme une personne, un client dans un restaurant, demander quelque chose encore, et encore, et encore. Et le garçon revient sans cesse de nouveau un par un. >> Alors maintenant, si je zoom sur ce, notez et ce sera le genre de chose que vous êtes le bienvenu et encouragé à jouer avec vous-même, parce que nous ne passera pas à travers tout dans les moindres détails. Mais remarquez qu'il ya un quelques sous onglets ici - Têtes, Aperçu, réponse, Cookies, et le calendrier. Je vais juste regarder têtes pour l'instant, parce que ceux-ci ne sont guère ingrédients à l'intérieur de l'enveloppe que aident à obtenir des données d'un endroit. >> Alors d'abord, permettez-moi de cliquer sur ce, Voir Source côté de têtes de demande. Il ya la demande que mon navigateur, Chrome, dans ce cas, envoyé à l'intérieur de cette enveloppe virtuelle. Vous vous souviendrez semaine dernière, j'ai manuellement tapé tout faire semblant d'être un navigateur. Puis il a rappelé le serveur que c'est la recherche de l'hôte appelé Facebook.com. Et puis il ya un peu plus obscur informations que nous agitons nos mains pour le moment. >> Mais si je commence à défiler vers le bas maintenant cette fenêtre, permettez-moi de rendre à l' têtes de réponse. C'est ce qui est dans le virtuel enveloppe qui est revenue de Facebook.com. Et si je clique sur Afficher la source juste pour voir le texte brut de celui-ci, remarquer quelques petites choses. Un, Facebook parle aussi la même protocole, la version de celui-ci 1.1. Donc, c'est bien. Mais le code de statut 301, déplacé de façon permanente. >> Eh bien, où diable n'a Facebook aller? Qu'est ce que c'est d'essayer de nous transmettre? Eh bien, remarquez ici-bas il ya un autre Lieu-tête appelé. Alors pourquoi Facebook me disant qu'ils déplacé de façon permanente à cette URL à côté de Lieu? J'ai oublié le www. >> Donc, c'était mon choix. En fait, la plupart d'entre nous rarement, sans doute, taper www.whatever.com ces jours-ci. Mais il s'avère un administrateur système, comme de Facebook, ne peut configurer leurs serveurs de telle manière que ce soit Facebook.com fonctionne, ou www.Facebook.com fonctionne, ou, vraiment, tout comme préfixe devant leur nom de domaine. Alors qu'ils ont fait pour nous. Et ils nous réorientent, probablement pour certaines techniques, des raisons de marketing. Ils veulent juste canoniser sur www.Facebook.com. >> Mais ce n'est pas tout à fait cela. Si je fais défiler vers le bas ici, nous allons voir ce qui se passe. Cela me dit que nous déplacé de façon permanente à http://www.Facebook.com. Voyons donc à la deuxième demande que mon navigateur envoie. Malheureusement, il ressemble à Facebook a déménagé à nouveau parce que le second demande, en sélectionnant cette URL à la place, dit que, lui aussi, a déménagé de façon permanente. Et permettez-moi de faire défiler vers le bas ici pour les en-têtes de réponse. Où est passé maintenant Facebook? >> Alors HTTPS. Alors maintenant, Facebook a commencé, particulièrement à la lumière de courant événements de ces derniers mois, en particulier et également dans les deux dernières années pour contraindre l'ensemble de leurs utilisateurs, dans un bon Ainsi, pour utiliser le protocole HTTPS, qui est plus sécuriser, bien que pas tout à fait sûr. Et maintenant ma page, mon navigateur va demander cette troisième URL. Et maintenant, enfin, nous obtenons l' autrement invisible 200 OK. >> Alors que dans le monde ou la totalité des ces autres lignes ici. J'ai littéralement tapé une chose, et mon navigateur semble avoir demandé comme 20 des choses bizarres. Qu'est-ce que c'est? >> AUDIENCE: Scripts? >> INTERLOCUTEUR 1: scripts, d'autres fichiers écrit dans un langage appelé JavaScript, ce qui, encore une fois, nous allons voir un peu de mercredi. Quoi d'autre? Les feuilles de style. Donc, quelque chose dans un langage appelé CSS, ce que nous verrons dans un instant. Gifs et JPEG, et PNG, et des images, et les fichiers vidéo - quelle que soit la page Web a le plus de chances de la forme d'un fichier. Et si ce que nous voyons sur la gauche côté il ya tous les fichiers que Chrome avait à télécharger, récursive, si vous voulez, pour composer la totalité de la page. >> Donc ce que nous avons vu il ya un moment avec Google, si je clique sur les éléments onglet, cela, bien sûr, est le HTML, le langue qui compose la page. Mais il ya des grappes d'autres choses. Il ya un logo. Il ya ceux bleuâtre icônes là-bas. Et il ya d'autres éléments encore la page qui eux-mêmes pourraient être fichiers séparés. >> Alors qu'est-ce qui est bien sur un navigateur, c'est que il ressemble à la langue que nous allons de commencer à écrire, ou si vous avez déjà l'écriture a commencé en P série 7, les chiffres où vivent ces fichiers, et va et les saisit ainsi. Et je ne peux pas souligner assez, même si certains cela pourrait paraître un peu arcane ou écrasante au premier coup d'œil, Apprendre à programmer applications pour le web, il est inestimable pour comprendre comment ces petits outils de travail. Ce sont un peu comme GDB comme des outils, mais beaucoup plus simple, en définitive, à utiliser - et vous donne vraiment les yeux sur ce qui nous avons tenant pour acquis pour un certain temps maintenant. >> Alors, que pouvons-nous faire maintenant avec cette information? Eh bien, nous allons effectivement prendre un coup d'oeil les concepts sous-jacents HTML. Et nous allons reporter, comme nous l'avons déjà, à sections de cette semaine pour le problème set 7 spécification, à certains des plus détails de ces langues. Mais nous allons voir si nous ne pouvons pas peindre une image de ce que vous devez comprendre ensemble ici. >> Donc, HTML, Hypertext Markup Language, n'est pas un langage de programmation. Qu'est-ce que cela signifie vraiment? Alors HTML ressemble à ceci. Et certains d'entre vous le savent déjà. Certains d'entre vous avez fait depuis un certain temps. Mais nous allons voir si nous ne pouvons pas remplir dans certains ébauches ainsi. Alors remarquer un certain nombre de choses ici. Premièrement, il ya juste le texte. Donc, c'est comme code source dans C, ou une autre langue. >> Remarquez qu'il n'y paraît être un modèle ici. Il ya indentation, mais techniquement l'indentation est juste humain convention. A navigateurs ne se soucient pas si il ya neuf lignes et les tabulations comme si nous y voyons. Mais remarquez qu'il ya symétries ici. Il ya ce que j'appellerai, au sommet de ce fichier, l'étiquette ouverte, ou le début tag, appelé HTML. Et puis, tout en bas, parfaitement alignés up, un peu comme nous le faisons avec des accolades, nous voyons parenthèse ouverte, avant slash, HTML, fermer la parenthèse. C'est donc la fin correspondante tag, ou à la fin tag, pour cette chose. >> Ensemble, tout à l'intérieur de l' soi-disant tag s'ouvrent et se ferment tag composons ce que nous appellerons un élément. Et nous verrons, dans un instant, c'est vraiment comme un nœud dans un arbre. Parce que si vous pensez maintenant l' indentation qui est sous-entendu ici, vous genre d'avoir, comme, un grand-parent nœud appelé HTML. Combien d'enfants pourriez-vous dire, sur la base Sur cette photo, l'élément HTML a? >> Donc probablement deux. L'un est l'élément de tête, apparemment. Et l'on est l'élément de corps. Et pourquoi deux enfants? Eh bien, je suis juste un peu d'inférer que si J'ai une étiquette de tête ouverte, puis une balise de fermeture de la tête, c'est un élément. Et puis, si il ya un autre corps ouvert tag et une balise de fermeture du corps, c'est comme un autre élément. Donc, en ce sens que si je sorte de rotation l'image sur le côté, c'est comme avoir une balise HTML, puis un étiquette de tête, et ensuite une étiquette de corps, et puis un texte, bonjour le monde, se balançant hors de l'étiquette de corps lui-même. >> Ainsi, nous pouvons dessiner une image qui pourrait ressembler à ceci. Les formes sont arbitraires. Mais remarquez que j'ai utilisé une sorte de ellipse au sommet pour représenter l' document lui-même. Il s'avère qu'il ne peut y avoir d'autres choses à l'intérieur d'une page web que je n'ai pas dessiné ici. Nous allons donc à même accrocher le HTML hors de noeud d'un noeud dit document. Et puis nous avons la tête et corps et le titre, avis, qui est emboîtée plus loin. Je n'ai pas pris la peine de mettre en ligne supplémentaire pauses à l'intérieur de la balise title. C'était juste comme il commençait à faire un peu trop verbeux. Donc je l'ai laissé dans une ligne là-bas, avec Titre ouvert, bonjour tout le monde, à proximité titre. Et puis nous avons un texte pendait hors d'ici. >> Donc, cette image va revenir quand nous plonger dans JavaScript. Et comprendre que lorsque vous écrire en HTML comme ça, qu'est-ce est un navigateur fait? Eh bien, nous n'avons pas à nous inquiéter comment il fait ça, ou avec ce que algorithme, mais à la fin de la journée, quand un navigateur reçoit HTML comme que, à partir de Facebook ou Google, il analyse il, pour ainsi dire, il le lit, avec quelque chose comme fread, de haut en bas, de gauche à droite, et comme il réalise, oh, balise ouverte, puis fermez tag, il commence à malloc, pour ainsi dire, un noeud dans un arbre. Et quand elle rencontre, comme nous l'avons sous-entendu ici avec l'indentation, une nœud enfant, il mallocs un noeud pour que et attaché à ce que l'arbre. >> Donc, les structures d'arbres, arbres binaires, arbres ternaires, et de plus grands arbres, qui nous regarda une ou deux semaines, un avis que le même principe est revenir à nous. Et quiconque œuvre, Chrome quel que soit équipe a fait que, probablement dû de mettre en œuvre une sorte de structure arborescente sous la hotte. Et que lui-même est probablement dans un langage comme C ou C + +, ou une faible langue de niveau que nous allons maintenant utiliser au sommet de la web. >> Alors maintenant, peut-être, cette volonté plus de sens. Tatouage réel de certains gars qui pourrait regretterez pas finalement, en quelque sorte. OK, d'accord, donc beaucoup d'humour web. Il ne va pas vraiment plus si bien aujourd'hui. Donc, nous allons passer à autre chose. Très bien. >> Donc, nous allons jeter un coup d'oeil maintenant quelques exemples. Le plus simple possible chose peut-être cela. Je vais aller de l'avant et d'ouvrir en gedit un fichier appelé hello.php. Et à l'intérieur d'ici, je vais rapidement tout cela, printf, citer unquote, "Bonjour tout le monde." >> Donc, avis, et je ferai de mon anti-slash n, Je n'ai pas pris la peine de déclarer principale. Il s'avère, en PHP, et beaucoup de langues, vous n'avez pas besoin d'un principal fonction en soi. Vous pouvez commencer à écrire votre programme. Maintenant, quand je sauve ce fichier, notez que je suis allez avoir à faire ce qui suit. Je ne vais pas utiliser faire, et je ne suis pas va utiliser clang parce que PHP, à la différence C, n'est pas un langage compilé. C'est ce qu'on appelle une interprétation langue, ce qui signifie que vous exécutez en entrée par le biais d'un autre programme appelé un interprète. Et ce programme le lit de haut en bas, de gauche à droite, et ne tout ce que vous lui dites de faire. >> Donc dans ce cas là, je n'ai une ligne qui indique printf. Donc, quand je lance ce code source, hello.php, mais un programme qui arrive, idéalement, être appelé PHP, ce programme PHP va lire ce fichier, de haut en bas, de gauche à droite, et ça va faire ce que je lui dire de le faire - l'exécution de code, et si il ne reconnaît pas quelque chose, recracher. Donc, je vais aller de l'avant et exécuter PHP de hello.php. Entrée. >> Et ce n'est pas tout à fait ce que je voulais. Eh bien, pourquoi est-ce? Eh bien, PHP est un langage qui est en fait conçu pour être assez entrelacé avec le web. Lors de pages Web avec cette langue PHP, comme nous le verrons bientôt, nous allons envie de faire quelque chose comme impression les lignes de ce genre. >> Donc, je vais le faire. Ouvert support, point d'interrogation, PHP, et maintenant je vais juste tiret juste pour garder de belles choses. Et maintenant, je vais faire une question marquer fermer la parenthèse. Donc, il ya un peu d'asymétrie ici. Vous ne faites pas cela. Et vous ne faites pas une barre oblique, de sorte PHP est un peu différent. >> Mais maintenant, si je RERUN ce programme, PHP hello.php, maintenant je réellement obtenir Bonjour tout le monde. Et nous allons voir pourquoi cela est précieux. Premièrement, il me permet de spécifier, Super explicitement, c'est code, exécuter cela. Et c'est en effet ce que ces balises spéciales impliquent ici. >> Mais cela signifie aussi que si je fais juste quelque chose comme je vise ici, que signifie que, littéralement, ce sera seulement être imprimé sans la nécessité d' fait appeler printf, ou impression, ou une fonction similaire. Donc, nous allons revenir là-dessus dans un instant. >> Tout d'abord, nous allons le faire. A l'intérieur de l'appareil, nous avons une répertoire appelé Vhosts, pour virtuelle hôtes, slash hôte local, Slash public. Donc c'est un peu verbeux, mais longue histoire Bref, l'appareil est conçu pour ne pas seulement pour soutenir C. Il est également conçu pour supporter PHP. Mais il est également conçu pour être une bande serveur et un serveur de base de données. Et il est conçu, et bien configuré, être penser à tout commerciale d'hébergement Web de la société qui vous pourriez payer 5 $ par mois pour, 100 $ par mois pour. Quel que soit le service est, il est configuré être très similaire à un véritable serveur de production mondiale. >> Et qu'est-ce que cela signifie, c'est que courir sur l'appareil est un logiciel de serveur web. Il arrive à être appelé Apache. C'est juste libre et open source, et très populaire. Et nous avons configuré Apache savoir que si je visite un certain URL, avec Chrome ou tout autre navigateur à l'intérieur de l' appareil, de se pencher sur ce dossier pour les fichiers qui l' utilisateur demande. >> En d'autres termes, laissez-moi aller de l'avant et le faire. A l'intérieur de mon répertoire public, je vais à aller de l'avant et créer un fichier appelé index.html. Cela me donne l'onglet ici. Et je vais aller très vite et aller de l'avant et *** ce programme ici. Doctype HTML, qui pour l'instant, juste supposons que vous ayez à taper. C'est juste une étiquette arcane, ce n'est pas vraiment une balise HTML, qui précise que voici quelques-unes HTML. >> Je vais aller de l'avant et de recréer ce que nous avons vu il ya un moment. Voici la tête de la page. A l'intérieur de la tête était le - afin titre. Donc, nous allons dire bonjour, monde. Et puis, ici-bas était la balise body. Permettez-moi de terminer la balise body. Et puis ici, je vais aussi dire, Par souci de clarté, bonjour tout le monde. >> Donc, c'est, sans doute, le plus simple possible la page Web que vous peut faire c'est valable. C'est syntaxiquement valide. Tout ce qui est ouvert est fermé. Tout va bien dans StyLED et en retrait. Voyons donc maintenant comment je peut accéder à ce fichier. >> Eh bien, permettez-moi de passer à Chrome ici. Et laissez-moi aller à http://localhost/index.html. Alors, quelle est l'hôte local? Eh bien, la plupart de n'importe quel ordinateur dans le monde, Linux, Mac OS, Windows, a un surnom appelé hôte local. Donc, si jamais vous voulez parler sur votre propre ordinateur - mais, bizarrement réflexe - vous vous appelez hôte local. Peu importe ce que votre ordinateur est réelle appelé, que ce soit MacBook de David Air, ou quelque chose de plus verbose comme ça. >> Donc, cette URL est apparemment va utiliser le HTTP pour parler à l'hôte local, le même ordinateur, l'appareil, et il va demander, il suffit de prendre un deviner, ce fichier? Index.html. Alors que l'appareil a été configuré dans avancer de savoir que si je demande quelque chose comme index.html, rechercher dans un dossier appelé Vhosts, dans un dossier appelé localhost, dans un dossier celui-ci a appelé public. C'est là toute ma publique fichiers vont être. Donc, je vais maintenant vous appuyez sur Entrée. >> Et putain, il est interdit que message, autrement connu comme la 403, la code numérique pour elle. Alors quel est le problème ici? Eh bien, il ne suffit pas de mettre juste le fichier à l'intérieur de mon dossier. Je dois vraiment faire ce qui suit. >> Laissez-moi aller dans mon répertoire Vhosts, en localhost, en public et laissé me fais ls dash l. Et il ya quelques autres choses ici pour les besoins d'aujourd'hui. Mais remarquez sur le côté gauche, à côté à index.html, on ne voit un RW. Et dans le passé, ce qui RW a défendu? >> Il suffit de lire ou d'écrire. Le fait qu'il dit rw sur la gauche signifie I, le propriétaire de ce fichier, peut lire ou écrire. Mais je dois laisser les gens dans le monde lisez ceci, mais pas écrire. Donc, je vais changer le mode de l' fichier, chmod, tous plus R pour donner tout le monde l'autorisation de lecture sur le fichier appelé index.html. >> Et si je maintenant retaper ls dash l, avis que, par ici, un peu plus R allons avoir surgi. Et pour l'instant, la spécification va plus en détail. Pour P série 7, cela signifie simplement que tout le monde peut maintenant lire ce fichier. Si je reviens à mon navigateur maintenant et recharger, voila. Bonjour tout le monde. >> Et je ne peux même pas ouvrir mes outils Chrome et à voir, tout comme avec Google et Facebook qu'il ya mon HTML, formaté un peu différemment et colorisé. Si je vais dans l'onglet réseau et rechargez la page, notez qu'il est l'obtenir demander que Chrome envoie à l'appareil. Il ya le 200 pour que notamment image. Donc en bref, c'est la façon dont tout cela divers morceaux se rassemblent. Il se trouve que le serveur Web Nous utilisons en ce moment n'est pas éloigné, comme Facebook. C'est littéralement sur le même ordinateur, ce qui est parfaitement OK. >> Alors, que pouvons-nous faire dans une page web? Eh bien, tout simplement, nous allons brise à travers un couple de ces choses. Mais permettez-moi d'aller de l'avant et de rouvrir Gedit avec index.html. Et permettez-moi d'aller de l'avant et dire bonjour CS50, enregistrer ce fichier, revenir à la navigateur, le changement décevante vraiment. >> Mais que faire si nous voulons réellement lien vers quelque chose maintenant? Ainsi, il s'avère que nous pouvons avoir l' liens HTML qui sont juste balises eux-mêmes. Il arrive d'être appelé balise d'ancrage. a href égale https://www.cs50.net, www.cs50.net Fermer citation, fermer la parenthèse. Et maintenant, voyons ce que vient d'autre à côté. >> J'ai ouvert la balise. Je dois maintenant lui donner une phrase comme CS50. Permettez-moi de fermer la balise. Et remarquez quelques petites choses. Même si il ya cette chose énigmatique ici, je ne l'ai pas répété lorsque vous fermer la balise. Vous venez de fermer la balise avec son nom seul. Et c'est ce qu'on appelle un attribut avec une valeur. Attributs il suffit de modifier le comportement d'une certaine étiquette à l'intérieur de la page. >> Donc, ce n'est précisant que l'hyper référence, la façon élégante de dire l' URL de cet ancrage, pour cette liaison, doit être CS50.net. Et le texte que nous voulons montrer l' utilisateur n'est pas URL brute, mais plutôt le mot CS50. >> Donc, si maintenant je recharge, laissez-moi un zoom avant pour clarté, permettez-moi de recharger la page, Notez que nous avons cette ancienne école bleu souligné lien. Et si je plane au-dessus, et ça va être difficile à voir, en bas à gauche coin de l'écran, notez qu'il dit l'URL à laquelle Je vais y aller. Et si je clique là, voila, maintenant je fais des pages web. Et nous avons conduit nous-mêmes à la page d'accueil. >> Mais remarquez ce potentiel Cela nous offre. La sécurité est très en vogue ces jours-ci. Et si je dis plutôt quelque chose comme cela, et je vais plutôt, disons, nous allons voir, fakeCS50.net. Recharger cette page. >> OK, donc remarqué qu'il ressemble encore je suis va CS50, sauf un oeil astucieux remarquerez que je vais faire semblant CS50. Je devine que ce domaine n'est pas prise. OK, donc ce n'est pas disponible. Donc, c'est bien. Personne n'a réellement ce domaine. >> Mais soyons un peu plus méchant parce que c'est un peu stupide. Que faire si nous changeons cela Paypal. Et si nous appelons cela, comme, www.paypal.badguy.com, quel que soit le domaine est. Cela existe probablement. Alors maintenant, permettez-moi de recharger la page. Et ici nous avons une sorte de phishing attaque, P-H-I-S-H-I-N-G, qui est le mot stupide donnée pour une attaque qui essaie d'information de poisson, ou, mieux encore, de l'argent, de personnes en incitant eux en fournissant des informations qui ils ne pourraient pas faire autrement. Cela semble tout à fait légitime, non? Je dois avoir un lien ici pour Paypal.com. En toute honnêteté, si je sexué il avec une certaine graphiques, nous pouvons le faire paraître plus comme PayPal. Droite? Parce que je le pouvais, en aparté, Je pourrais continuer à Paypal.com. Et nous venons de voir comment je peux Voir toutes leurs HTML. Je ne pouvais tout simplement copier et recréer l' esthétique de Paypal plutôt que d'aller vieille école ici. Mais remarquez, bien sûr, et c'est un peu petite encore, seulement dans la partie inférieure coin gauche, la même 10 points d' police, voyez-vous ce que vous êtes URL en fait va être conduit à. >> Et si vous avez déjà reçu le spam dire Allez-y, et vous êtes compte a été compromise. S'il vous plaît cliquer sur ce lien et dites-nous votre mot de passe afin que nous puissions vous assurer que vous êtes vous, ne jamais le faire. Ces choses devraient aller de soi. Mais c'est merveilleusement amusant, et tragique, comment chaque année, ce qui semble arriver à une certaine non-zéro nombre de personnes. >> Et c'est la beauté des attaques de phishing. Vous pouvez envoyer un million d'e-mails. Et même si 0,01% de personnes effectivement cliquez sur Paypal et vous donner votre mot de passe, c'est encore un nombre non nul des gens qui viennent de donner vous leur argent. Et l'envoi d'emails, bien sûr, est tout à fait facile et, essentiellement, d'une connexion ces jours-ci. >> Tant histoire courte, merveilleusement belle idée, non? Il ya quelques années, ce fut la première Web, ce qui permet d'une bande de liens entre les ressources. Mais si rapidement pourrait-il être utilisés à des fins néfastes. Et e-mail, il suffit de dire que ces jours, ont HTML intégré à l'intérieur. >> Eh bien, laissez-moi juste une autre chose. Et nous remettons en grande partie à la section dans problème réglé sept pour vous permettre de explorer les détails. Mais permettez-moi d'aller de l'avant et faire quelques petites choses ici. Je vais y aller et déclarer ce qu'on appelle un div ou division, de la page. Permettez-moi de conclure que balise div. >> Et je vais dire jusqu'à ici haut de la page. Et puis, en dessous, je vais faire quelque chose comme un autre div, fermer cette tag, et faire en bas de page. Et nous allons l'enregistrer. >> Alors maintenant, revenons à mon dossier. Très décevant. Mais ce qui est utilisé pour la division, sous le capot, c'est que c'est effectivement un élément structurel agréable. Il n'a pas pour autant que l'esthétique nous pouvons voir, sauf, apparemment, mettre les choses sur les nouvelles lignes. >> Mais remarquez, en passant, juste en pressant Entrez ne pas couper en HTML comme il Est-ce en C. Vous pourriez penser que c'est va mettre un beau gros écart entre en haut et en bas de la page. Mais elle est ignorée. L'espace blanc est essentiellement ignoré dans pages autres que la première caractère espace bar, ou retour chariot, que vous frappez sur le clavier. Si vous voulez plus de sauts de ligne, vous avoir à spécifier vous-même. >> Donc, je vais faire quelques petites choses ici pour montrer ce qui se passe. Je vais ajouter un attribut qui existe et encore une fois, la façon dont vous apprenez quels sont les attributs existent, quelles sont les balises, vraiment, c'est références en ligne. HTML est le genre de langage - c'est pas un langage de programmation. C'est un langage de balisage - qu'après une bonne demi-heure, peut-être, une heure avec , vous aurez certainement saisir, plus probable, l'idée de base. Et puis, une recherche sur Google est loin tous les balises possibles que vous pourriez être intéressé po Et pour la spécification, qui est tout à fait bienvenus et encouragés ici. >> Alors maintenant, laissez-moi aller de l'avant et faire quelque chose comme ça. Background-color. Et maintenant, je vais faire quelque chose comme le rouge, point-virgule. Et vous pouvez le faire dans de plusieurs manières différentes. Je suis juste un peu taper en tant que super explicitement que possible. >> Mais il s'avère que cette valeur est ici ce qui est appelé CSS, Cascading Style Feuilles, ce qui est un autre langue tout à fait. CSS n'a rien à voir avec ouvrir tags et balises de fermeture. Il a à voir avec les propriétés. >> Et les propriétés sont simplement valeur clé paires, ce qui signifie que quelques mots, virgule, puis un autre mot. Et si vous avez plusieurs petits, ou tout simplement Personne ici, vous pouvez vous retrouver avec un virgule, juste pour plus de clarté. Mais ça aussi, va travailler ici. >> Maintenant ce qui est ce que ça va faire? Vous pouvez probablement le deviner. Permettez-moi d'aller de l'avant et rechargez cette page. Et maintenant, il vient vraiment long. Donc haut de ma page est rouge. Mais ce qui est important ici, c'est que je l'ai mentionné plus tôt, qui vous donne div une division de la page. Et c'est effectivement ce qu'il fait. Il divise essentiellement la page en un rectangle que vous pouvez ensuite manipuler. >> Et cette notion de rectangles est une sorte de convaincante en ce que si vous pensez plus un site Web, il ya probablement une structure à elle. La plupart d'entre vous ont sans doute rarement vu La page d'accueil de Facebook si vous êtes connecté tout le temps. >> Mais sur la page d'accueil de Facebook, il ya une sorte de div long du sommet. Et il pourrait ne pas être aussi simple comme une div, mais il ya une région rectangulaire là. Le reste de la page est comme un énorme div, comme beaucoup zone rectangulaire plus grande. Tant histoire courte, tout en ayant ces petits blocs de construction, les possibilité de choses des modèles que des rectangles, si large ou étroit, vous pouvez aussi faire des colonnes potentiellement, vous permet d' des mises en pages, vraiment, mais vous voudraient. Nous sommes vraiment juste gratter la surface ici. >> En effet, si je fais une autre, laissez-moi aller de l'avant et faire le modèle, background-color, nous ferons quelque chose comme, à proximité citations bleus. Allons Recharger cette. Alors maintenant, ça devient encore plus laid. Mais maintenant, je peux sorte de montrer mon P fixé cinq compétences, non? Rouge. Cela me rappelle RVB, rouge Vert Bleu triples. Eh bien, il s'avère que dans la programmation web, ou de la conception web, qui est-ce, nous avons encore rien programmé en soi, vous pouvez réellement avoir le code hexadécimal. Donc, quelque chose quelque chose, quelque chose quelque chose, quelque chose de quelque chose. Ainsi, vous pouvez avoir six hexadécimal caractères, ou trois, dans certains cas, et chacun de ces points d'interrogation doit être un chiffres hexadécimaux, zéro à f. >> Si je veux avoir beaucoup de rouge, et pas de vert et en bleu, ce qui est le en face de zéro lors de l'utilisation hexagone? C'est f. Donc, je peux faire ff, zéro zéro, zéro zéro, enregistrer cette, et maintenant venir ici. Et je ne vois réellement pas un changement. Alors citation unquote "rouge" est apparemment synonyme pour tout rouge, pas de vert, pas bleu. En attendant, nous allons changer délibérément celui-ci soit quelque chose aléatoire, comme ABCDF. >> Voyons voir ce que c'est. C'est un très beau bleu, en fait, bleu bébé. Très bien, alors ceux-ci sont tout à l'heure combinaisons un peu aléatoires de caractères. Nous n'allons donc pas nous enliser ici. Mais encore une fois, cela témoigne de la précision que vous pouvez commencer à appliquez - même si vous êtes très dépassés par l'esthétique. En fait, si vous voulez vraiment être impressionné, laissez-moi aller de l'avant et changer la taille de la police, par exemple. Et remarquez la virgule, qui il est nécessaire. >> Taille de la police, on peut être tout simplement ridicule ici, 96 points. Sauf que. Wow, c'est une grande taille de police. D'accord, donc c'est très facile. Et en fait, vous êtes essentiellement voir Dès la première page web que j'ai fait il ya des années, quand j'ai appris ce genre de choses. C'est très facile de faire très choses hideuses rapidement. >> Et si vous êtes familier avec la Wayback Automatique sur archive.org, vous peut trouver toute ma hideuse pages Web de premier cycle. Il fallait Kermit la grenouille sur le devant. Je suis passé par une phase où je pensais c'était cool de prendre le fond de un rideau rouge, quand j'ai appris comment vous can images de tuiles, encore et encore, et encore une fois, pour remplir une page avec un grand rideau rouge collant. Et puis, en plus de cela, était une icône que vous deviez cliquer pour entrer dans ma maison page parce que c'était très en vogue. >> Et puis mon premier programme que j'ai jamais écrit n'était pas en PHP, mais dans une langue appelé Pearl, a écrit un livre d'or, qui est une chose vraiment cool qu'un Beaucoup de gens vous attendez d'avoir sur une page d'accueil. Lorsque vous arrivez à la page, ils vous veulent connecter, et dites qui vous êtes, et pourquoi vous êtes là. C'est très années 1990 conception de sites Web de style. >> Mais ces jours-ci, sûrement, nous avons venir beaucoup plus loin. Et vous verrez, en coupe, et même dans le problème posé sept, par s'appuyant sur les bibliothèques de nos jours, c'est tellement plus facile de faire jolies choses rapidement. Vraiment ici, nous ne faisons que gratter la surface de ce que vous pouvez faire stylistiquement. >> Et en fait, déjà, permettez-moi de souligner que ça commence à être laid, pas seulement esthétiquement, mais en termes du style de mon code, ou l' conception de mon code. J'ai actuellement mêlés HTML, qui sont les balises ouvertes verdâtres là, avec Propriétés CSS, qui est totalement légitime. C'est vraiment là où la langue eu ses origines. >> Mais dans l'intérêt de design épuré, tout comme nous avons commencé trucs d'affacturage à partir des fichiers C dans les fichiers. h, laissez- me fait pratiquer ce genre d' principe et commencer à faire cette place. Permettez-moi de mettre une balise de style ici, qui existe aussi en HTML, et laissez-moi préciser ce qui suit. Permettez-moi de supprimer ce. Couleur de fond va être rouge. Je vais supprimer cette entièrement. Je vais me débarrasser du style j'attribue, et je vais unique identifier cette div avec un mot - arbitrairement, mais raisonnablement, citation Ils ont dit "top". Et id est un particulier attribut qui définit de façon unique un certain élément HTML comme ayant cet id. >> Si je veux maintenant c'est stylisé, ici dans la tête de ma page, à l'intérieur de l' balise de style, notez que Je peux le faire en haut de hachage. Et puis je peux mettre quelques bouclés accolades, rappelant C, puis laissez- me coller dans cette stylisation. Et permettez-moi d'aller de l'avant ici et d'anticiper où je veux en venir. Permettez-moi également créer un pour la div de fond. Permettez-moi de saisir cette hideuse Code du bas ici, le mettre ici, et je serai il un peu plus *** maintenant et stylisé simplement en mettant les choses sur leur propre ligne, se terminant par des points-virgules. Permettez-moi de me débarrasser de l'étiquette de style. >> Mais je n'ai pas encore fini. J'ai besoin de faire autre chose. Ouais, id est égal unquote, "fond", citant Identifiant ou quoi que je veux donner cet élément. Maintenant, permettez-moi de revenir ici. Et c'est atroce. Je ne peux pas traiter avec 96 points. Faisons 24 points. Ou vous pourriez être plus précis. Vous pouvez réellement utiliser des pixels, PX, de sorte que vous avez vraiment un grain plus fin contrôle sur votre page. >> Soit dit en passant, ce n'est pas nécessairement la meilleure chose que si les utilisateurs, pour des raisons d'accessibilité, veulent être en mesure d'augmenter la taille. Alors réalisent pas qu'il ya des façons de faire choses qui ne sont pas nécessairement coder en dur tout. >> D'accord, donc il est plus grand, 24 points, que quelle que soit la valeur par défaut est. Mais maintenant c'est un peu plus propre. Et permettez-moi d'aller un peu plus loin. Tout comme l'idée de fichiers d'en-tête, remarquons que nous sommes un peu plus à ce sujet. J'ai pris, mais encore parti, à l'intérieur de ma page, ces règles CSS. Pourquoi pourrais-je vouloir prendre un peu En outre, supprimer ce tout à fait, et le mettre dans un fichier séparé? >> Donc, je peux le réutiliser, non? C'est juste une sorte d'intuition en ce moment. Avant, je prétendais que c'était juste se laid ayant le style attributs à l'intérieur de l' se DIV. Mais juste un peu de penser qu'à travers. Comme page ne cesse de s'allonger, si vous mettez ici, et ici, et ici, et ici, tous ces différents couleurs et tailles de polices, et autres attributs, votre page est très rapidement va devenir ingérable pour vous. >> Si quelqu'un vient à vous et dit, oh, vous savez quoi? Je voudrais vraiment changer la taille de la police par deux points supplémentaires, vous pourrait avoir à aller chercher et remplacer un grand nombre de lignes de code. Il est beaucoup plus convaincant pour centraliser tous ces esthétique ici. Mais si vous voulez réutiliser ceux esthétique dans plusieurs pages Web, toutes les le plus convaincant, par par exemple, créer un fichier appelé avec ces matières. >> Et laissez-moi faire. Enregistrez ce fichier. Je dis styles.css, arbitraire, mais classique. Je vais le mettre dans la maison de John Harvard Répertoire maintenant pour plus de simplicité. Et ce que je peux faire dans ma page web est d'obtenir débarrasser de l'étiquette de style tout à fait, et un peu unintuitively, utilisez le lien tag, qui ne vous donne pas un lien dans le lien hypertexte, cliquable sens, mais où je dis lien href égale styles.css. Et la relation que cet élément a avec la page web est de servir sa feuille de style. >> Alors, comment ai-je le savoir? One, vous venez de lire le manuel, ou vous Google autour et vous regarder les différentes ressources. Je veux dire, c'est vraiment la façon dont vous prenez techniques de ce genre, et, conformément avec cette idée d'enseigner soi-même nouveau langues, encore une fois, vous verrez que il ya seulement un nombre limité de choses à n'importe quel langage qui, une fois que vous obtenez , vous verrez que cela devient plus rapide et plus rapide à écrire. En effet, l'apprentissage d'une nouvelle programmation langue est tellement plus rapide que d'une nouvelle langue parlée parce que ces choses sont beaucoup plus petits et beaucoup plus précisément défini. >> Mais j'ai souligné un peu d'une anomalie ici. Pourquoi ai-je mis cette slash ici? Parce que je dois fermer la balise. Je dois fermer la balise. Et vous trouverez d'innombrables ressources en ligne qui n'en ont pas nécessairement proche tags. Et de façon réaliste, il n'est pas strictement nécessaire pour des raisons techniques et il ya raisons de la réalité, les navigateurs ne sont que assez tolérants d'erreurs dans le Web pages, pour le meilleur ou pour le pire, mais surtout pire. >> Donc ce ici est juste un moyen plus propre de dire quelque chose de stupide comme ça, où si vous voulez ouvrir la balise link mais le fermer, il n'ya vraiment aucune notion de contenu pour une étiquette de lien. Cela signifie simplement charger cette déposer et le mettre ici. C'est comme include forte en C. Vous pouvez ouvrir et fermer une balise à la fois à l'intérieur de la même balise. Et il ya d'autres exemples. Ce n'est pas la façon de le faire, mais la balise br, pour les sauts de ligne, si je vraiment envie de réaliser ce que j'étais essayer d'avant en appuyant sur Entrée, si Je dis explicitement saut de ligne, saut de ligne, saut de ligne, saut de ligne, et puis rechargez cette page, maintenant, vous remarquerez que bas de la page est, en effet, beaucoup plus bas dans le bas de la page. Mais même cela peut être fait beaucoup plus proprement avec CSS, et avec des marges, et avec d'autres tels esthétique techniques. >> Donc pour l'instant, les plats à emporter sont cela. En HTML, nous avons ces choses appelées tags. En CSS, nous avons ces choses appelé propriétés. Nous pouvons comingle ces deux langues, soit en utilisant l'attribut style ou la balise de style, ou mieux encore, l'affacturage it out tout à fait, comme nous le faisons en problème posé 7. Questions, ensuite, sur le bases conceptuelles ici? >> AUDIENCE: J'ai une question. >> INTERLOCUTEUR 1: Oh, désolé. >> AUDIENCE: Pourquoi n'était-il pas de couleur - >> INTERLOCUTEUR 1: Oh, dans l'autre onglet? Ce ici? >> PUBLIC: Non, c'est comme le - >> INTERLOCUTEUR 1: Oh, c'est parce que J'étais bâclée. Je mets le fichier au mauvais endroit. Donc, si j'ai effectivement mis ici, et je chmod, tout ce + r pour styles.css, et désormais chargement de la page, maintenant nous obtenir la stylisation dos. Et parce que les tailles de police sont différent, nous ne voyons pas tout à fait autant espace blanc. Nous voyons plutôt quel est le défaut est place. Bonne question. Oui? >> AUDIENCE: Pourquoi est le lien balise à l'intérieur de l'en-tête? >> INTERLOCUTEUR 1: Pourquoi les liens étiquette à l'intérieur de l'en-tête - réponse courte, juste parce que. C'est ce qui a été décidé. C'est là que les balises de liens vont quand vous avez ce qu'on appelle un feuille de style externe. D'autres questions? >> Très bien, alors nous allons le faire. Nous avons tellement de plaisir devant nous aujourd'hui. C'est juste gratter la surface du CSS. Faisons-le. Prenons une pause de cinq minutes ici parce que, par mon e-mail, nous allons traîner dans là jusqu'à 02h30-ish aujourd'hui. Mais si vous avez à laisser, c'est très bien. Mais nous allons aller de l'avant après une pause de cinq minutes. Et nous allons en apprendre un petit quelque chose sur PHP, MySQL, et plus encore. >> Bon, essayons donc, maintenant, de lier une quelques-unes de ces idées ensemble et de faire, dire notre propre moteur de recherche. J'ai remarqué que, curieusement, ce qui suit. Lorsque vous êtes à Google.com, vous êtes typiquement à une URL comme celle-là avec rien après la dot com. Mais si je cherche quelque chose de stupide comme chats et appuyez sur Entrée, nous aurons - pas stupide, mais vous le savez. >> OK, donc le constater, en haut de la page, Maintenant, l'URL a, bien sûr, changé. Et ce n'est pas rien nouveau pour chacun de nous. Vous cliquez sur des liens et des trucs qui se passe sur le web. Mais ce qui est intéressant ici est la suivante. Il ya tout un tas de fouillis, mais nous allons me jetez tout ce que je n'aime pas tout comprendre ou de ne pas regarder vraiment pertinente. >> Permettez-moi de me débarrasser de cela. Permettez-moi de me débarrasser de cela. Et permettez-moi de me débarrasser de tout cela. Et maintenant, remarquent que les chats sont dans l'URL, suivi avec un q, puis un pied d'égalité signer en face de lui. Ainsi, il s'avère que c'est la façon dont le façon dont il fonctionne quand il s'agit d'entrée et de sortie. >> Nous avons longtemps parlé boîtes noires, non? Donc, si c'est une fonction implémentée ici comme une boîte noire, il prend en entrée et produit une sortie, eh bien, les moyens par lequel vous fournissez entrée à un site est par ailleurs, souvent, de son URL. Il vous suffit de mettre un point d'interrogation puis sur une touche égale valeur. Et puis peut-être une esperluette, puis une autre clé est égale à la valeur, alors peut-être autre esperluette, clé égale valeur. C'est comme ça que vous passez en touches et les valeurs, les paires d'entrées. >> Donc, si je frappe Entrez maintenant, ce qui est intéressant sur Google, c'est que tous les qui encombrent J'ai supprimé n'apparaît pas strictement nécessaire. Tout ce que je dois envoyer à Google est question marque q est égal à chats pour obtenir sauvegarder certains chats. Eh bien, l'implication de cela, alors, est que si je tire gedit, j'ai commencé faire mon propre moteur de recherche ici dans un fichier appelé seach0.html. >> Et permettez-moi d'aller de l'avant et de supprimer une ligne de plus que vous n'étaient pas censés voir. Et maintenant, laissez-moi aller dans mon propre navigateur, afin de ne pas Google, et aller à http://localhost. Et cela va obtenir de la manière. Nous allons donc devoir dire au revoir à que pour l'instant, déplacez ceci ici, oh, maintenant nous allons devoir dire au revoir à ce fichier. >> Chaque fois que vous avez un fichier nommé index.html ou index.php dans un répertoire, si le serveur Web est configuré de cette manière, ce que vous allez voir, par défaut, est le contenu de ce fichier plutôt qu'une liste de la répertoire, comme je le voulais ici. Plus à ce sujet dans la spec. Vous n'avez pas vu cela. >> Donc, c'est ce que je voulais. Mais il ya un moment, il y avait un fichier dans ce dossier appelé index.html et index.php. Et si le serveur Web est me montrant ces fichiers. Au lieu de cela, je veux que ce répertoire liste ici. >> Donc, je vais aller dans CSS et aller à search0. Et je prétends que ce n'est que ça va être le début de mon propre compétitif moteur de recherche. Et pour ce faire, je vais aller dans ici, en CSS, et ouvrir avec gedit, recherche 0. Mais malheureusement, il ya pas grand-chose qui se passe ici. Je n'ai fait utiliser une balise de titre, qui arrive d'être appelé h1, qui signifie essentiellement grand et audacieux, et c'est tout. Mais les moyens par lesquels nous pouvons fournir des entrées se font via ces choses appelées formes. >> Alors laissez-moi aller de l'avant et ouvrir et fermer, préventivement, une balise form là. Et permettez-moi d'aller de l'avant et de faire quelque chose comme ça. Entrée, le type est égal texte. Et puis nous allons fermer la balise à l'intérieur les crochets. Je n'ai pas besoin de démarrer un champ de texte et arrêter un champ de texte. Il va juste être là ou non. >> Et puis, en dessous, nous allons faire type d'entrée est égale à soumettre. Sauvegarder cette. Et maintenant, nous allons juste faire une bilan de santé rapide. Nous allons recharger. >> OK, donc c'est pas mal. Ce n'est pas le style de Google, mais c'est assez proche. Il ya un champ de texte. Je peux taper des trucs dedans, appuyez sur Entrée, mais rien ne se passe encore. Et c'est parce que je n'ai pas spécifié une action de cette forme, pour ainsi dire. Donc, si je reviens à l'élément de formulaire, il s'avère, et je sais que cela ne d'avoir lu la documentation, que la balise form prend un attribut appelée action qui est l'URL du site sur lequel vous vouloir envoyer le formulaire. >> Je ne pense pas que nous ayons le temps de mettre en œuvre toute la fin de retour pour une moteur de recherche aujourd'hui. Donc, nous allons juste dire, hein, aller à google.com / search. Et maintenant, permettez-moi de terminer mes citations. Et je précise en outre que la méthode à utiliser va d'être appelé obtenir. >> Longue histoire courte, il ya deux façons, à moins, que vous pouvez soumettre des informations à partir du navigateur vers le serveur. On est d'obtenir, et, pour les besoins d'aujourd'hui, cela signifie simplement que dans l'URL. Vous voyez exactement les points d'interrogation, les le signe égal, et que esperluètes nous l'avons vu plus tôt. Ou il ya une alternative appelée post. Pour l'instant, sachez ce poste est souvent utilisé si vous souhaitez télécharger des fichiers, comme images et ainsi de suite, ou quand vous voulez soumettre des informations de carte de crédit, ou mots de passe, quelque chose qu'il ne vraiment de sens, conceptuellement, ou sécurité sage, pour finir dans l'URL votre navigateur, où les parents d'espionnage, ou colocataires, ou toute personne ayant accès à votre ordinateur pourrait voir. >> Alors sauvons-le ici. Et j'ai besoin de faire autre chose. Il ne suffit pas simplement de dire me donner un champ de texte. Je dois donner de la matière valoriser un nom. Alors permettez-moi d'emprunter le choix de Google noms, Q et préciser que la deuxième j'attribue Je ne me soucie pas vraiment le nom du bouton Envoyer. Tout ce qui m'importe est la soumission ce que l'utilisateur tape po >> Et maintenant, c'est un peu laid. Il dit simplement soumettre. Il s'avère, et je sais ce à partir de la documentation, je ne peux réellement dire valeur est égale à GUILLEMETS "CS50 seach, "fermant. Ensuite, nous allons charger à nouveau. Donc je continue à frapper de commande R, ou Control-R sur mon clavier pour recharger. >> Maintenant nous avons un plus intéressant moteur de recherche. Il n'a pas tout à fait ressembler Google encore, cependant. Donc, nous allons aller de l'avant ici et faire un saut de ligne peu. >> OK, alors maintenant nous avons Google. En fait, nous avons presque Google. Alors maintenant, qu'est-ce qui va se passer? Je vais taper dans quelque chose Comme les chats. Et le navigateur va analyser cette forme que j'ai défini. Et il va envoyer l'utilisateur de cette URL. Alors, cette fois, pour une raison étrange, J'ai eu plus d'informations sur les stocks que sur les chats réels. Mais c'est bien parce que nous avons encore remarquer fini ici, q est égal à chats. >> Tant histoire courte, il semble assez trivial d'obtenir les commentaires de l'utilisateur. Et pour être juste, il ya des grappes d'autres types de champs de formulaire. Il ya des cases à cocher, et peu commun boutons radio exclusifs, et menus déroulants, etc. Mais tous ceux qui sont aussi relativement facilement mis en œuvre comme ce champ de texte était. Et finalement, nous avons juste à faire que quelqu'un est à l'écoute de l'autre fin de la ligne, afin d'obtenir que les informations traitées, en quelque sorte, et nous redonner nos chats. >> Regardons un peu exemple plus impliqué. Laissez-moi aller dans le répertoire de mon Vhost, dans l'hôte local, public, et où je mettre le code source d'aujourd'hui. Tout cela aura sur le parcours de site web pour vous permettre de bricoler avec. Et si je vais dans froshims, permettez-moi d'ouvrir jusqu'à ce fichier maintenant, froshim0.php. Celui-ci est un peu plus bavard, donc nous n'allons pas écrire ce à partir de zéro. Mais juste remarquer maintenant quelques peu caractéristiques familières. >> Un, balise form, action différente. Ce n'est pas une URL complète. Maintenant, il est apparemment fichier appelé register0.php parce que, dans un moment, Je vais moi-même apprendre un peu quelque chose à propos de PHP, une programmation langage, car PHP peut être utilisé pour mettre en œuvre ce que Google mis en œuvre l'extrémité arrière de leurs moteurs de recherche. >> Google, en réalité, utilise probablement certains Python, certains C + +, et grappes d'autres langues. Mais nous pourrions certainement mettre en œuvre la recherche résultats à l'aide de PHP, si nous voulions. Mais pour l'instant, nous allons garder les choses simples. Et ce n'est effectivement pas sans rappeler une des autres premiers sites que j'ai faite il ya des années. >> Dans mon temps, vous vous êtes inscrit sports intra-muros comme un étudiant de première année par remplissant une feuille de papier, la marche à travers la cour, et en le déposant dans la boîte aux lettres d'un Proctor dans Wigglesworth, et que c'était la façon dont vous enregistré. Et si mon projet peu de temps après CS50, était de mettre ce qui rend parfait sens, sur le web, ce qui n'était pas comme en vogue alors que c'est maintenant. Mais tout ce que nous avions à faire était de créer, essentiellement, un formulaire HTML. >> Et cette forme regardé à peu près comme ça. J'ai eu une entrée pour le Le nom de recrue. J'ai eu une autre case à cocher si oui ou ou non ils voulaient être capitaine, ce qui leur sexe était, et ce qui leur dortoir était. Et puis j'ai codé en dur dans les choses comme Apley Cour, et Canaday, Gris, et ainsi de suite. >> Encore une fois, de nouvelles balises. Je n'ai pas vu ces derniers avant, nouveau attributs, mais assez accessible. Une fois que vous voyez un exemple, vous pouvez genre d'emprunter cette idée et de faire une chute Menu pour la plupart quoi que ce soit. Mais ce qui est important est que chacun des ces choses ont des noms. Et au bas de ce formulaire, il ya un bouton submit dont l'étiquette, ou de la valeur, est du registre. >> Allons donc à cette page. Permettez-moi de revenir dans le inscription dans l'annuaire. Laissez-moi aller dans froshims, et aller à froshim0.php. Donc, c'est hideux, pour être juste. Donc, je pourrais certainement styliser cette avec un peu de CSS, je pourrais faire quelque graphiques, peut-être ajouter quelques couleurs, et faire de cette jolie. Mais fonctionnellement, je dirais que ce est en fait assez complète. >> Malheureusement, quand je remplis cette rupture, David, le capitaine, Male, nous allons choisir, disons Matthews, Register, tout ce qui se passe, c'est cela. Mais remarquez un couple de plats à emporter. Un, ce fichier renvoyé ceux résultats, apparemment? Donc, il est, en effet, register0.php. Donc, le fait que nous avons vu que l'action valeur d'il ya un moment pour register0, cette corrobore ce que nous avons fait fini place à ce fichier particulier. >> Maintenant, c'est juste du texte laid. Mais remarquez que ce texte est provenant de l'hôte local, ce qui est de l'appareil. Pensez à l'appareil maintenant comme juste un serveur Web qui pourrait être dans le Science Center. Il pourrait être sur le web réelle. Il n'est donc accessible au public. >> Donc, clairement, il ya une certaine façon de passer former entrées sur le terrain à un serveur afin qu'il puisse faire quelque chose avec eux. Malheureusement, register0 est assez stupide. Tout ce qu'il fait est imprimer un tableau qui ressemble à ceci. Et ce n'est pas un tableau dans le sens que nous la connaissons. Il s'avère que PHP, et beaucoup de langues, ont non seulement numériquement tableaux indexés dont le premier index est zéro, un, puis deux, puis dot, point, point, n moins 1. >> C'est ce qu'on appelle un tableau associatif. Un tableau associatif est un dans lequel vous pouvez stocker des paires clé-valeur où la clé n'est pas nécessairement un nombre. Il pourrait en fait être une chaîne, un mot. Et si cela peut être mis en œuvre, sous le capot, il s'avère, en utilisant une structure de données appelée un? Pensée quelque chose de dramatique qui allait se passer - table de hachage. >> Ainsi, une table de hachage, rappel, ceux d'entre vous qui a fait ça pour P série 6, ou même rappeler elle, au moins, même si vous avez fait un essai, un table de hachage, dans notre usage, a été utilisé pour juste stocker des mots. Mais vraiment, vous avez enregistrés clés et des valeurs. Si vous avez implémenté une table de hachage pour P set 6 dictionnaire, les touches ont été les paroles elles-mêmes, et les valeurs étaient effectivement vrai ou faux. Oui, ici, ou implicitement, non, pas ici. >> Eh bien, nous pouvons généraliser cette idée. Et nous pourrions utiliser des données très similaires Structure pour stocker pas la chaîne lui-même seul dans votre table de hachage, mais Supposons que, dans chacun de vos hachage Les nœuds de table. Et vous pouvez même le faire dans un essai plutôt que de simplement avoir un bool. Vous pourriez avoir quelque chose d'autre. Que faire si la clé n'est pas maxwell, pour exemple, mais unquote «nom» devis ou GUILLEMETS «capitaine». Et à l'intérieur de votre structure de données C, vous mettez un valeur, et pas seulement un booléen, mais de valeur comme quote unquote «David», ou «M» ou «Matthews", et ainsi de suite. >> Donc, ces mêmes structures de données que nous avons utilisées apparemment exister dans d'autres langues. Et je dirais qu'ils sont en réalité beaucoup, beaucoup plus simple pour accéder ici. Disons en fait un coup d'oeil maintenant à un tel syntaxe. >> Je vais aller dans un répertoire PHP. Et je vais ouvrir un meilleur version de Bonjour-0 avant de partir. Remarquez que je n'ai fait que ajouter des commentaires. Donc, nous pouvons nous débarrasser de cette distraction. >> Et ce programme ne fait imprime bonjour parce que j'ai spécifié entre balises que je veux exécuter ce code. Maintenant, nous le verrons dans un instant pourquoi c'est utile. Mais ouvrons un autre exemple ici. Permettez-moi d'aller de l'avant et d'ouvrir dire, gedit une des conditions. >> C'est le chemin du retour dans le temps présent. Mais il ya quelques semaines, je pense que, dans une semaine ou deux semaines, nous avons eu un exemple appelé conditions1.c. Et j'ai décidé de ré-écrire en PHP, juste genre de souligner que PHP, syntaxiquement, est presque identique à C. Ce n'est pas un énorme bond la semaine dernière à ce sujet. >> Avis au sommet de ce programme, qui commence, comme avant, avec une certaine commentaires, dont je vais vous débarrasser comme une distraction. Remarquez que je suis en PHP mode dans ce fichier. Donc, ce code, nous le verrons, seront exécutés. Notez qu'il ya readline, ce qui est probablement le analogique en PHP de GetString. Remarquez que c'est un peu différent. Vous indiquez en fait une invite à l' fonction appelée ligne lue, et c'est ce que l'utilisateur voit. Donc, vous n'avez pas à printf manuellement. Mais ce n'est pas une grosse affaire. Je vais stocker, à l'intérieur de $ n, le Retourne la valeur de cela, donc quel que soit le utilisateur tape est leur int. Et voici une autre curiosité. Il s'avère, en PHP, une variable vient d'être préfixé avec un signe de dollar. C'est un peu gênant. Mais remarquez que je n'ai pas fait en PHP. Ce qui manque dans la main gauche côté du signe égal? >> Aucune mention du genre. Donc ce qui est différent de C. Pour une meilleure ou pour le pire, PHP est un lâche langage typé. Il possède chiffres. Il possède des chaînes. Il possède booléens. Et elle a un peu d'autres types de données. Mais vous, le programmeur, habituellement ne pas avoir à s'occuper d'eux. L'avantage de ceci est que cela rend un peu plus facile à programmer. Vous pouvez penser un peu moins. L'inconvénient est qu'il vous ouvre également à bogues potentiels si vous avez accidentellement traiter un nombre sous forme de chaîne, une chaîne comme un nombre, potentiellement, mais même puis, PHP, et un grand nombre de langues, sont assez tolérants. Ils vont utiliser ce qu'on appelle conversion implicite. Et si vous essayez d'utiliser n dans le contexte d'une situation numérique, il sera convertir ce qui est ici va être un chaîne, parce que si l'utilisateur tape quelque chose, et vous obtenez le résultat, comme avec readline, ou obtenir chaîne, cela va retourner une chaîne. >> Mais remarquez, quelques lignes plus ***, je vérifier si n est supérieur à zéro. Donc, PHP va jeter implicitement mon 123 "string", ou quel que soit l'utilisateur types de, dans un int. Donc en bref, des trucs fonctionne beaucoup plus intuitive. Alors maintenant, nous commençons à détendre un peu de l' choses que nous avons fait dans le passé. >> Un grand nombre de ce genre de choses est le même, cependant. Vous n'avez toujours égal à égal à égal. En tant que PHP côté a aussi égale égale égaux, mais plus à ce sujet, peut-être, l'avenir. C'était un. Typo mais deux signes égal signifie la même chose chose comme avant, à titre de comparaison. printf signifie la même chose qu'avant. Backslash n signifie la même chose chose qu'avant. >> Alors, comment puis-je exécuter ce programme? Eh bien, comme avant, si je fais PHP, conditions1.php, et tapez un nombre comme 123. C'est un nombre positif. Si je tape dans 0, je prends 0. Et si je tape dans 123 négative, je reçois sauvegarder un nombre négatif, ce qui est seulement à-dire syntaxiquement, PHP est super, super similaire. >> Alors pourquoi est-ce maintenant utile dans un contexte web? Eh bien, revenons à cette froshims par exemple, qui avait l'air, encore une fois, comme ça ici. Et soyons réellement tirer vers le haut de la page Web encore une fois, qui ressemblait à ça. Que pouvons-nous faire avec l' données qui sont soumis? >> Eh bien, permettez-moi d'ouvrir une nouvelle version de ce produit. Et vous verrez que le problème spécification des ensembles vous guide à travers quelques-uns d'entre eux. Plutôt que de commencer par un zéro, regardons froshims3, qui fait un peu plus. >> Remarquez d'abord, effectivement, ouvrons jusqu'à ce que 0 était, si vous voyez ce registre était 0. Remarquez ce registre 0 fait. Un, je n'ai commentaires au début. Supprimer ceux et se concentrer uniquement sur ce point. La plupart du contenu de register0.php sont, bien évidemment, quelle langue? Juste PHP brut. >> Alors avis, ce fichier ne démarre pas avec, pour le moment, parenthèse ouverte, point d'interrogation, PHP. PHP ne vous permettent s'entremêlent Code PHP avec des balises HTML. Mais je l'ai fait ici à l'intérieur de la page ici. >> Maintenant, encore une fois, tu ne le sais par avoir regardé le manuel. print_r, il s'avère, est print_recursive. _recursive Et c'est juste un outil pratique fonction d'utilité qui imprime vient de sortir, récursive, ce que vous lui donnez. Si vous remettez un tableau, il va imprimer un tableau. Si vous lui donnez un numéro, il va imprimer un numéro. Remettre une chaîne, il va imprimer une chaîne. Si vous lui donnez une table de hachage, il imprimera une table de hachage. Vous n'avez pas à écrire tout de ce code vous-même. >> Maintenant, remarquez que je suis entrée Mode PHP ici. Je suis sortie du mode PHP ici. Ainsi, lorsque le serveur Web lit ce fichier de haut en bas, de gauche à droite, parce que il se termine par un nom de fichier appelé. php, tout n'est pas à l'intérieur de balises PHP est tout va être spit rupture, comme HTML brut. No big deal. Mais dès que remarque le serveur Web cela, il va dire, je ne devrais pas cracher, littéralement, print_r de poste. Je devrais exécutez la commande suivante ligne de code. >> Ainsi, la dernière question, alors, de ce fichier est bien, ce que le diable est-ce? Faites une conjecture. Qu'est-ce que $ _POST, sans doute? >> AUDIENCE: [Inaudible] >> INTERLOCUTEUR 1: Ouais, les données affichées. Rappelons, nous allons revenir en arrière dans temps pendant un moment. froshim0, encore une fois, ressemblait à ça. Un super-majorité de ceci est juste HTML. Encore une fois, certaines étiquettes que vous n'avez pas encore vu, ou avec qui Vous êtes déjà familier. Mais la chose intéressante est la suivante. Celui-ligne est ce qui lie vraiment à notre fichier register0.php. Je soumets par méthode POST. Et cela signifie que les paramètres les types d'utilisateurs ne sont pas en va finir où. >> Ils ne vont pas à apparaître dans l'URL. Ils vont continuer à être envoyés à partir de la client, à partir du navigateur, à l' serveur, mais seulement par l'intermédiaire d'une autre mécanisme qui nous annulerons nos mains à pour aujourd'hui, mais ce n'est pas dans l'URL. Mais remarquez la relation avec l'entreprise affectation, qui, par convention, est minuscules ici. >> Mais si j'ouvre register0.php, Je suis apparemment l'impression cela. Donc, c'est une sorte de bizarre convention de nommage. Mais ce qui est bien en PHP, c'est que lorsque l'utilisation de PHP dans un contexte Web, pas à une ligne de commande comme je l'ai fait il ya un moment, lorsque vous êtes en train de l'utiliser dans un réseau page dans un répertoire Vhost que nous sommes, sera automatiquement PHP combler cette chose, qui est un tableau associatif pour ainsi dire, une table de hachage, avec tout l'utilisateur a tapé po >> En bref, $ _POST tout en majuscules est une variable globale PHP juste crée par magie pour vous lorsque l'utilisation de PHP dans un contexte web. Et il met à l'intérieur de celui-ci tous les noms des paramètres dans la forme que a été soumis à ce dossier et tous les valeurs que l'utilisateur a tapé po Donc, il tend à vous ce que l'utilisateur tapé à ce formulaire. >> Donc, avant, nous avons vraiment stupide sortie de voir juste parce que tout ce que je faisais a été récursive imprimer ce tableau. La clé est le nom, la valeur est David. La clé est le capitaine. La valeur est en marche. Et la double flèche et l'angle support de là, c'est juste arbitraire. Ce n'est pas un code. C'est juste la façon de vous montrer de PHP quelle est la valeur d'une certaine clé est. >> Mais maintenant, je vous propose que, dans froshIMs3, c'est presque identiques sauf qu'il soumet à ce fichier. Et encore une fois, nous allons sorte de juste coup d'oeil sur ce, juste pour voir la syntaxe, mais remarquez que ce fichier fait. Essayez de deviner juste, fondée sur les lignes de code, qui probablement ne ressemble Grecque, dans une certaine mesure, est apparemment faire. >> Ce fichier est en quelque sorte lié au courrier, e-mail. Alors, quel est ce programme fait? Dans cette version, si je devais réellement Remplissez ce formulaire - et laissez-moi aller à froshIMs3, pas froshIMs0 - la forme est la même. David, capitaine, mâle, dortoir, Matthews. Mais si je soumets cela, ce fichier est va aller à register3.php. >> Et je prétends, en regardant ce n'est code source, il va en quelque sorte impliquer email. Permettez-moi d'aller de l'avant et ouvrez ce dans une fenêtre plus grande, de sorte que nous peut voir plus proprement. Nous sommes dans Vhosts, hôte local, publique, froshims. Je vais ouvrir un autre programme, juste pour nous peut voir plus à la fois. >> Alors maintenant, ici, remarquer quelques petites choses. Au début du fichier est ouvert support, point d'interrogation, PHP. Ensuite, il ya un tas de commentaires, que nous ne pouvons ignorer, c'est inintéressant pour l'instant. >> Maintenant, il ya cela. Il s'avère que PHP a beaucoup de code appelé exiger. Il est très proche de l'esprit de C de inclure, notamment de hachage, ce qui saisit essentiellement le contenu de certains autre fichier flac et juste ici, de sorte que vous pouvez les utiliser. Dans ce cas, l'appareil est, pré-installé, une bibliothèque, libre et bibliothèque open source appelé PHP mailer que n'importe qui peut télécharger à partir d'Internet. Nous avons juste fait pour vous. Et cela signifie que je dois maintenant email fonctionnalité à ma disposition. >> Maintenant, remarquez quelques petites choses. Je vais valider l' La soumission de formulaire. Il s'avère que PHP, un, a exclamation points pour l'opérateur pas, tout comme C. Mais PHP dispose également d'une fonction appelé vide. >> Vide renvoie seulement vrai si la valeur de la chose que vous remettez en parenthèses est vide, comme le utilisateur ne tapez rien po Donc, cela veut dire, et notez la syntaxe, très réminiscent de C, si l' touche de nom, de sorte que le champ de nom dans le formulaire, qui a été soumis par la poste, par l'utilisateur, n'est pas à vider, et leur le sexe n'est pas vide dans la forme que bien, et leur dortoir n'est pas vide - mais notez que je ne me soucie pas de capitaine, alors qu'est-ce qu'on va faire? >> Je vais exécuter cette ligne de code. Et vous pouvez penser à ce genre de comme malloc, mais c'est un peu plus sophistiqué que cela. Mais pour l'instant cela me donne une spéciale truire le type PHP mailer. Mais ignorer le mot nouveau pour aujourd'hui. >> Maintenant, je vais appeler une fonction appelée IsSMTP, qui dit utiliser SMTP. C'est le port 25, tout comme la vidéo la semaine dernière, lorsque la chose jetait e-mails dans le pare-feu. Le port 25 est SMTP. SMTP signifie utiliser le serveur de messagerie. Lequel, nous pouvons utiliser Harvard SMTP.fas.harvard.edu. >> Nous pouvons définir l'adresse comme John Harvard. Si je fais défiler vers le bas plus loin, je peux mettre l'adresse du destinataire, juste arbitrairement, comme John Harvard est ainsi. Donc, il va être lui-même envoyer un courriel. >> Maintenant, je peux mettre le sujet être enregistrement. Et je peux mettre le corps du courrier électronique comme suit. Cette ligne est un peu plus cryptique, mais c'est juste parce qu'il ya beaucoup des informations qu'il contient. Un, il ya un opérateur point. Quelqu'un doit déjà savoir ce que l'opérateur point fait. C'est concaténation. Donc, si vous voulez prendre une chaîne en PHP, et l'annexer, ou faites-le précéder, à une autre chaîne en PHP, je vous remercie Dieu ne pas avoir à utiliser StrCopy et malloc, et tout ça. >> Si vous souhaitez concaténer deux chaînes, qui se soucie de la mémoire. Laissez chiffre PHP que pour vous. Que PHP va faire avec l'opérateur point Voici juste faire une grande peine à de cette ligne, cette ligne, cette ligne, cette ligne. Et maintenant, avis, ça va à brancher valeurs. Donc, l'e-mail que John Harvard va recevoir va littéralement dire nom, du côlon, quelque chose, plutôt, nous fermer la chaîne et de les enchaîner sur quel que soit l'utilisateur a tapé dans, puis une nouvelle ligne. >> Puis, sur la prochaine ligne de John Harvard e-mail, il va dire Capitaine, Le ou rien. Il va dire le sexe, mâle ou femelle. Dorm va être Matthews dans mon cas. Et puis notez virgule familier à la toute fin. Et puis, ici, un avis, un peu énigmatique encore, mais encore une fois, à la suite d'une modèle qui deviendra plus familier après P a placé 7, si l'envoi de l'e-mail retourne false, alors allez-y et mourir. >> Donc, PHP dispose d'une fonction appelée matrice, qui, littéralement, tue tout le site web et juste imprime sur tout vous lui dites - son se meurt mots, pour ainsi dire. Et que, dans le cas, il affichera ce que l'information d'erreur est de qu'est-il arrivé à aller mal. Tant histoire courte ici, ce que nous avons est un exemple où lorsque l'utilisateur soumet le formulaire, froshim0, froshims3.php, il va à register3.php. Mais register3.php procède ensuite à exécuter l'ensemble de ces lignes. >> Donc, il ya quelques Emporter j'adopte ici. Premièrement, il est apparemment assez facile, programme, d'envoyer des e-mails, ce qui est bon. Lorsque les utilisateurs s'enregistrent pour votre site, en ce cas, lors de leur inscription à votre sport, vous pouvez envoyer le freshman Proctor, ou John Harvard, dans ce cas. >> Mais cela signifie aussi que vous pouvez faire quoi? Envoyez des courriels à partir de n'importe qui à n'importe qui. Et cela est très vrai. Ce n'est pas aussi facile à faire si vous êtes habitué à utiliser Gmail. Mais si vous avez déjà utilisé Eudora ou Outlook, vous pouvez très bien dire à un serveur de messagerie que vous êtes qui vous voulez. Et c'est là que je dois mettre sur ce chapeau et dire, ne fais pas ça. Mais ce n'est testament à quel point facile il est d'effectuer des attaques de phishing, et envoyer des emails anonymes, et spam, de façon plus générale. Et il se résume à l' fait que tout ce que vous avez besoin est une l'accès programmatique. >> Soit dit en passant, mon plus proche rencontre avec le conseil de l'annonce, ma propre première année, C'était quand j'ai découvert ce cool tromper que, wow, vous pouvez envoyer des courriels à partir de n'importe qui. Et si nous avions quelque stupide argumentation, littéralement, dans Matthews, parmi mon groupe de Proctor. Je ne me souviens même pas quel était le problème. Mais je voulais essayer de mettre un fin à ce débat stupide. >> Donc, j'ai décidé que je vais envoyer un courriel à mon groupe de Proctor, feignant d'être l'autre gars avec qui j'ai opinion désaccord, et lui ont acquiescé à quel que soit mon opinion était en ce débat. Et si j'ai forgé cet e-mail en utilisant un technique similaire dans l'esprit à ce sujet. Mais c'était effectivement plus facile à l'époque. Envoyez à vos amis. Il n'était pas content, ni ne ont été le conseil de l'annonce. >> Et j'ai été très rapidement pris à l'intérieur secondes parce que, comme vous le savez, je signe mes e-mails d'une certaine manière. Et si je le fais manuellement, en grande partie, 15 ans plus *** parce que j'étais traumatisé par cela. Je n'ai pas de signature sur mon e-mail maintenant. Mais en 1995, je viens d'avoir un sig, une signature dans mon email. Il y avait donc cette note disant: Cher groupe Proctor, je acquiescer mon opinion et d'accord avec David, a signé pour et oui, nouvelle ligne, la nouvelle ligne, DJM. >> Donc, ne pas le faire ou, en général, prendre avantage de cette technique. Mais lors d'un site web, comme par votre projet final, lors d'un site Web pour quelque chose d'entreprise, c'est ainsi que, de façon pragmatique, vous pouvez exploiter d'autres services sur l'Internet comme le courrier et puis effectivement envoyer des choses à l'aide de code. >> Alors, comment pouvons-nous améliorer cela? Eh bien, d'abord nous allons jeter un rapide tour d' quelques-unes des choses que vous verrez, puis jetez un oeil à quelques exemples. Donc un, pour rassurer, parce que nous volons à travers PHP. Et je sais que, à un certain point, vous aurez pour réellement commencer à écrire cette option si vous ont pas déjà fait. Sachez que, un, principal genre de la fenêtre avec PHP. Si vous voulez écrire du code qui obtient exécutée, vous venez de commencer à l'écrire dans un fichier appelé. php tant que vous avez la parenthèse ouverte interrogation PHP tag. >> Mais remarquez ce sont conditions en PHP. Remarquez, c'est la même lame exacte nous avons eu dans la première semaine où nous avions conditions dans des conditions C dans PHP sont structurellement et syntaxiquement la même. Seule véritable différence est que si vous avez variables impliquées, vous avez ceux signes de dollar. >> Pendant ce temps, les expressions booléennes regarder juste comme ça pour ou-ing ou et-ing ensemble. Commutateurs sont exactement les mêmes. Ce qui est bien en PHP, alors qu'en C, commutateurs doivent être cas sur primitives comme ints ou chars, en PHP vos déclarations de cas peuvent effectivement être sur toute une chaîne, qui est en fait assez agréable. Vous permet d'économiser du temps. Impossible de le faire en C. >> Voici une boucle en PHP. Elle est identique. Pourriez avoir quelques signes de dollar pour les variables. Vous n'avez pas de mentionner que quelque chose est un int. Vous venez de déclarer avec un signe de dollar et le nom de la variable. Mais une boucle for est la même. Une boucle de temps est la même. Une boucle Do While est le même. >> C'est un peu différent. Donc avec PHP, avec un tableau, vous pouvez statiquement déclarer un tableau, comme dans C, mais vous utilisez les crochets. En C, vous pouvez utiliser des accolades, si vous connaissiez même pas. Mais c'est en fait très commun en PHP de déclarer un tableau, dans ce cas, des nombres, et appeler le nombre variable. >> Variables elles-mêmes ressemblent à ceci. Voici une chaîne, GUILLEMETS "bonjour monde. "Vous pourriez avoir un anti-slash n. Je fais simplement pas dans ce cas. >> Maintenant, c'est un concept intéressant. C n'a pas cela. Mais c'est super gentil. Et vous verrez cela dans P série 7 spec - un pour chaque construction. Si vous voulez réitérer sur l'ensemble de la éléments d'un tableau, vous n'avez pas pour faire face à i $ et $ n, et + +, et tout ça. Vous pouvez littéralement dire en PHP, cette - pour chacun des nombres sous forme de nombre, de sorte que Je suppose que $ numéros est un tableau de nombres. Et quand je dis à chacun des nombres que le nombre, cela va automatiquement, comme ma boucle s'exécute, mettre à jour, à chaque itération, la valeur à l'intérieur du nombre de signe dollar - encore, et encore, et encore marcher pour moi sur ce tableau. Donc, il nous sauve juste code. Aucun des points-virgules, aucun + + 's, pas i, pas de n, c'est juste beau. >> Mais PHP dispose également présent. Et c'est super puissant. Et vous allez l'utiliser, mains sur, dans P set 7. Et un tableau associatif est également déclarée avec crochets. Mais remarquez la syntaxe maintenant. Cela rappelle ce que nous avons vu avec print_r il ya un instant. Combien de touches, comme un petit test de cohérence, ce tableau ne semblent avoir. >> Ainsi, il a deux. Et ce que j'appelle un tableau. Mais si cela peut aider, vous pouvez penser de cette table de hachage, ou comme un tableau associatif. Mais c'est juste une autre type de tableau. Et encore, les différentes langues avoir ces. Nous allons voir quelque chose de semblable en JavaScript ainsi. Il ya deux touches. On est entre guillemets, "symbole", celui-ci est GUILLEMETS «prix». Et ces touches ont chacune une valeur. Dans ce cas, la valeur de symbole FB, pour La valeur de Facebook, et le prix est de 49, 26, qui était le stock de Facebook Prix ​​à partir de ce matin. >> Donc, ce qui est utile sur un tableau associatif. J'aurais pu avoir un numériquement tableau indexé avec juste crochets simples. Et j'aurais pu signe dollar citation correspond exactement cela. Permettez-moi de le faire réellement. Supposons que je viens de déclarer à la place ce tableau comme ça. C'est tout à fait valable, syntaxiquement. Il ne perd pas de l'information, en soi. Je vois encore que le symbole est fb, et que le prix est de 49, 26. Alors pourquoi associative tableaux convaincants? >> PUBLIC: Vous n'avez pas à retenir où vous mettez les choses. >> INTERLOCUTEUR 1: Justement, vous n'avez pas de se rappeler où vous mettez des choses. Vous n'avez pas à retenir arbitrairement ce symbole boursier est dans le support zéro, et le cours des actions est dans le support un, ce qui est particulièrement dangereux si vous changer les choses, finalement. C'est beaucoup plus agréable d'associer ce que nous appellerons les métadonnées avec vos données réelles. Je dirais que ce que nous nous soucions vraiment ici, c'est fb et 49, 26. Le symbole et le prix est métadonnées qui décrit les données que nous réellement se soucier. Mais c'est juste tellement facile d'accès. >> Maintenant, comme ce qui est de côté le prix que nous payons? Nous avons fait cela en CS50 pendant des semaines. Cette fonction doit venir à un certain coût. Mémoire. Donc, vous n'êtes pas seulement stocker un 32-bit nombre entier, par exemple. Vous n'êtes stockage symbole / 0, probablement. Vous utilisez donc plus de mémoire. >> Et quelle est la performance de regarder quelque chose dans un tableau associatif, sans doute? C'est probablement plus lente. Accès aléatoire est agréable, surtout quand vous pouvez faire des recherches binaire. Mais si vous êtes en train de regarder maintenant pas pour les chiffres, mais pour cordes, cette vraiment est mis en œuvre sous l' capot, probablement comme une table de hachage, où vous utilisez soit une table de hachage avec chaînage séparé. Ou si vous utilisez un essai à fait stocker les valeurs. Alors peut-être que vous pouvez faire à temps constant, mais vous avez encore de regarder S-Y-M-B-O-L, potentiellement, au lieu de 32 bits à ressembler à quelque chose. Encore une fois, ces mêmes idées à venir sauvegarder à se reproduire dans ce contexte. >> Mais encore une fois, PHP dispose désormais certains super- globales qui, il s'avère, sont tableaux associatifs. Nous avons vu un il ya un moment, $ _POST. Et cette super mondiale a les clés et valeurs. Plus précisément, les touches s'aligner avec quoi? D'où viennent les clés $ _POST viennent? Juste pour récapituler? >> AUDIENCE: Nom. >> INTERLOCUTEUR 1: Nom, où? >> AUDIENCE: [Inaudible] >> INTERLOCUTEUR 1: Nom est l'attribut. Eh bien si, où sont-ils provenir en premier? La forme. Donc, si une page HTML possède une balise form, à l'intérieur de laquelle sont certains intrants, comme cases à cocher, zones de texte, tombent menus, dont chacune a un nom, ces Les noms finissent comme clés dans $ _POST, et, franchement, d'ailleurs, $ _GET. Si la méthode est GET, même idée. C'est juste dans un autre super-global. Et les valeurs, bien sûr, viennent d' quel que soit l'utilisateur a tapé dans au son ou son navigateur. >> Mais il ya quelques autres. Il ya biscuit, que nous allons revenir par la suite. Mais ce sont les choses que vous savez le web utilise depuis un certain bon ou mauvais. Mais nous reviendrons sur ce sujet. Server et session, et ces deux avoir une certaine utilité particulière. >> Mais jetons un coup d'oeil. Permettez-moi d'aller de l'avant et d'ouvrir un exemple appelé mvc0.php Alors MVC signifie ce qui suit. Et nous introduisons un peu plus tôt que ce qui est typique, vraiment, pour vous aider à concevoir ensemble du problème 7, et également des projets définitifs, dans une sorte d'industrie façon standard, et une manière propre. C'est un bon design. >> Donc, vous êtes sur le point de voir, et vous expérience, en P set 7, paradigme, en quelque sorte d'une mentalité de programmation, qui ressemble un petit quelque chose de ce genre. M pour le modèle, C pour le contrôleur, V pour Voir. Longue histoire courte, MVC est juste un peu d'une méthode, une façon de faire sites, en particulier, par lequel vous mettre tout votre, phrase stupide - la logique métier - tous de votre propriété intellectuelle ce qu'on appelle un contrôleur, un fichier comme index.php, ou nous le verrons, quote.php ou buy.php. >> Dans le contexte du problème posé 7, votre modèles contiennent généralement vos données, tout ce qui touche à une base de données, comme nous allons finalement voir, et votre point de vue contenir l'esthétique de votre site, le HTML, le CSS. Donc déjà nous avons vu cela en C un peu bit en utilisant des fichiers. h. Nous avons vraiment vu il ya un moment avec CSS, En tenant compte de la stylisation CSS bourrer de notre HTML. >> Alors MVC est vraiment juste sur le dessin lignes dans le sable et dire, le code de programmation intéressante pour votre site appartient à ce que nous appellerons le contrôleur. Articles liés aux bases de données en général aboutit dans un modèle. Mais vous verrez, dans la série de problèmes 7, nous fusionner C et M de garder les choses simples. Mais vue est l'endroit où tous vos HTML et l'esthétique vont généralement. >> Alors qu'est-ce que cela signifie concrètement? Eh bien, laissez-moi aller dans notre MVC répertoire comme suit. Et vous verrez plusieurs de ces en tournée à travers la spec. Donc, en mvc0, je prétends que c'est, comme, Version 0 des sites Web de CS50. >> Tout ce que nous avons, c'est certain HTML, comme une grande balise h1, apparemment. Et puis, une liste à puces. Je n'ai jamais vu une liste à puces avant, mais pas une grosse affaire. Voyons rapidement regarder le code source. Il s'avère une liste non ordonnée avec des balles est ul parenthèse ouverte avec un ou plus d'articles de liste, li. Donc avis ici est une balise d'ancrage. Nous avons vu qu'il ya un moment. >> Voilà donc comment j'ai mis en place cette page. J'ai deux liens, deux éléments de liste, un ul pour une liste non ordonnée, et la fin Par conséquent, esthétiquement, est-ce très joli site Web, la version 0 ici. Mais ce qui est intéressant maintenant est de savoir comment cette est mis en oeuvre sous la hotte. >> Laissez-moi aller dans gedit et ouvrir cette tout premier exemple de peindre un tableau. Et nous allons voir ce qui est imparfait, potentiellement, ici. Maintenant, si je vais dans localhost, public, MVC, notez quelques fichiers. Je vais appeler ceux-ci, pour l' Actuellement, tous les contrôleurs. Mais c'est un peu un abus parce vous verrez tout est mélangé à l'intérieur d'elles. >> Et laissez-moi aller à l'intérieur de index.php. Et nous voyons, littéralement, le même HTML. Ainsi, même si ce fichier se termine par . Php, il ne signifie pas qu'il doit avoir un code PHP. Il peut juste être HTML brut, bien que c'est un peu ridicule. Mais remarquez qu'il n'y a pas ouverte support PHP étiquette, à l'exception de ce qui, franchement, est juste là pour servir de commentaire. Mais ce n'est pas fonctionnellement même intéressant. >> Mais remarquez cela. Ce qui est intéressant maintenant est ce que changements sur cette page. Permettez-moi clique conférences. Et remarquez l'URL est sur le point de changer. Maintenant, je suis à lectures.php. Permettez-moi clique sur zéro. Maintenant, je suis à week0.php Et maintenant, permettez- moi ouvrir ces fichiers dans gedit. Non seulement l'index, mais laissez- m'ouvrir conférences. Et permettez-moi de me débarrasser des commentaires de se concentrer sur cette partie seulement. >> Et maintenant, permettez-moi de m'ouvrir juste un plus, week0.php, jeter les commentaires, juste pour nettoyer ça. Et maintenant remarquer ce qui suit. Penser vraiment sorte de bien à conception, et faisons-le en ligne le même, ce qui pourrait être fait mieux ici, pensez-vous? >> Comment ai-je fait une semaine-là? Comment à ce sujet. Voilà donc comment j'ai fait la première semaine. Je suis allé jusqu'à File, New, coller, enregistrer week1.php, et puis je suis allé là-dedans. Et j'ai changé un - quelle était cette, une au vendredi. J'ai changé les zéros à un. J'ai changé ce à un. >> OK, donc maintenant regarder mes fichiers. Que pourrait-on faire autrement? Où est l'occasion, peut-être? Donc, il ya la possibilité de commencer affacturage ce genre de choses. Permettez-moi de vous livrer comme un spoiler, pour ce que vous verrez dans le jeu P 7. Si j'ouvre maintenant, index.php dans la version cinq de cela, il a l'air bien plus cryptique, certes. >> Mais cela, maintenant, est ce que j'appelle une contrôleur qui contrôle l' logique de ma page. Et vous pouvez genre de reconstruire, intuitivement, peut-être, ce qui se passe. Sur la première ligne, c'est un peu énigmatique. Mais notez que je suis exigeant, comme avec include forte, un fichier appelé helpers.php. Et puis je vais appeler, apparemment, un fonction, appelée rendu, en passant deux arguments. >> Un devis est unquote, en-tête. Et l'autre est, quel genre de type de données est présent, basée sur notre syntaxe plus tôt? C'est un tableau associatif. Plus précisément, il est de passage dans le titre avec des métadonnées qui rappelle moi ce que c'est et sa valeur. Puis je vois un disque codé UL, de sorte que certains HTML brut. Mais alors je suis de retour en mode PHP appel d'une fonction de rendu. Donc, même si vous n'avez jamais utilisé HTML ou PHP avant, et même si cela ressemble effrayant, pourquoi est-ce probablement meilleure conception? Quoi de mieux à ce sujet, basée sur l'inférence? >> AUDIENCE: [Inaudible] >> INTERLOCUTEUR 1: Moins redondant puisque il n'y a pas de balise HTML plus, pas plus têtes tag, pas plus balise body dans chaque fichier fous. Au lieu de cela, j'ai pris le communs et vraisemblablement les mettre dans un fichier en quelque sorte liés à un en-tête. Et même chose pour le corps à proximité tag, le tag HTML proximité. C'est sans doute ici-bas à l'intérieur de la part footer. Et vous verrez, dans la série de problèmes 7, un petit tour par là. >> Alors qu'est-ce qui nous attend? La seule chose que nous n'avons pas la capacité encore, c'est de stocker effectivement données. Et donc ce que nous allons commencer à voir Mercredi par exemple, c'est que votre vieil ami Excel, ou des chiffres, vous permet de stocker beaucoup de données dans des lignes et des colonnes. Il s'avère que vous pouvez le faire en ce qui appelée une base de données, par programmation. maniaque et il s'avère, après cela, nous serons en mesure de stocker des choses comme ce que vous verrez de nouveau en P ensemble 7, tout un tas de noms d'utilisateurs et les mots de passe, ce dernier dont sont réellement crypté, un peu comme ils étaient en pirate l'édition de P set 2. Et finalement, vous allez mettre en œuvre, votre propre site eTrade-comme ça met en œuvre collectivement CS50 finance. >> Enfin, puisque vous séjourné ici si *** Aujourd'hui, si vous revenez à cette partie du campus, à 16h00 aujourd'hui, nous allons vous donnera non seulement des conseils, au SCES Conseiller Fair, à 16h00 dans la Maxwell-Dworkin, nous allons vous donner quelques Dream Americone, cerise Garcia, Chocolate Fudge Brownie, Chocolat Cookie Dough Chip, et, quand vous Google Chunky Monkey, vous obtenez ceci. Donc, tout cela vous attend à 4h00 PM dans Maxwell-Dworkin. Rendez-vous le mercredi ainsi. >> ENCEINTE 2: Lors de la prochaine CS50, RJ dort po >> RJ: Mon section! Ha! Oh,