>> JASON HIRSCHHORN: Bienvenue tout le monde à la huitième semaine.
Nous avons une semaine passionnante nous attend.
Vous les gars avez plongé dans ce couple passé de conférences à PHP, SQL, HTML, CSS, si
quatre toutes nouvelles langues qui vont de prendre le reste de ce cours.
On y apprend aussi quelques autres langues avant la fin de cours.
Mais de toute façon, inutile de le dire, il s'agit d'une moment très excitant dans CS50, maintenant vous
ont maîtrisé C, en apparence, et sont de passer à la programmation pour les sites web.
>> Donc, cette semaine, nous allons aller sur une visite éclair à travers les quatre
langues je viens de mentionner, HTML, CSS, PHP et SQL.
Et j'espère que nous allons laisser suffisamment de temps à la fin de l'article pour parler
P sur le jeu et la réponse de cette semaine toutes les questions que vous avez tous.
>> Chaque semaine, la même liste de ressources pour vous, pour vous aider avec de la semaine
problème posé et aller sur le matériel -
mais cette semaine en particulier, pour les ensembles de problèmes sur le Web, il ya une
foule d'autres ressources sur il vous sera probablement
trouver incroyablement utile.
Je les ai ici.
Je vais vous envoyer ce après l'article, et ce sera également en ligne.
>> Mais en particulier, il ya beaucoup de grandes ressources là-bas.
Il ya aussi quelques pas si grande ceux, donc se méfier de ceux-ci.
Mais sur cette diapositive, j'ai quatre bonnes ressources, une pour chacun des
langues que vous allez travailler cette semaine -
une feuille de référence pour HTML, une feuille de référence pour le CSS.
Ce droit est ici le manuel de PHP.
>> Donc, au lieu de taper homme et une PHP commande, c'est là que vous le feriez
aller chercher le prototype de fonction et des exemples et aussi quelques conseils et
astuces pour l'utilisation de fonctions de PHP.
Vous allez utiliser souvent ce site, Je vous encourage donc à devenir
familier avec elle.
Il peut être un peu technique, mais il fournit également une tonne de ressources et
Des exemples de toutes les fonctions et même d'autres, comme la façon d'utiliser des tableaux ou
différents types de variables.
Ce site est très utile pour PHP.
>> Et puis, pour SQL, si vous avez plongé dans ce problème de jeu de la semaine, vous saurez
que nous utilisons une base de données.
Et nous avons accès à cette base de données par le biais une interface utilisateur relativement agréable.
Ou c'est une façon pour l'accès cette base de données.
L'interface utilisateur est appelé phpMyAdmin.
Il ya un onglet SQL, qui nous allons regarder plus tard aujourd'hui.
>> Et vous pouvez taper dans leur échantillon SQL requêtes, de faire les choses dans votre base de données
et puis exécutez ces requêtes.
Et si elles sont correctes, ça va dire, correcte de celui-ci.
Si elles sont incorrectes, ça va par exemple, il est incorrect.
C'est un endroit idéal pour pratiquer votre Requêtes SQL avant de les écrire dans
votre code, pour vous assurer d' avoir le format correct.
>> Enfin, un autre site ici.
Ceci est le site où vous pouvez aller et assurez-vous que votre
Le code HTML est valide.
Donc, avant de mettre vos problèmes mis cette semaine, assurez-vous que tous
votre code HTML est valide.
>> La semaine dernière, vous aviez exécuter valgrind, à assurez-vous que vous n'aviez pas de fuites de mémoire.
Cette semaine, vous devez vous assurer que tous de votre code est valide HTML5.
Si ce n'est pas HTML5 valide, vous êtes allez obtenir des points hors.
>> Donc, assurez -
juste parce que cela fonctionne ne pas dire qu'il est tout à fait valable.
Exécuter votre code via ce site avant de se tourner po
Encore une fois, voici le site.
>> Si vous avez des commentaires pour moi, nous avons un couple de plus de sections à gauche,
et je veux toujours faire ce que je peux pour vous tous fournir le meilleur article
l'expérience possible.
Alors laissez-moi savoir s'il ya quelque chose que je pouvons faire pour améliorer ou s'il ya
choses que vous voyez que je pouvais faire mieux.
Merci, Avi.
Mettez-le sur le site.
>> Ce fut le vélo que j'ai eu quand je a été, disons, quatre à la maison.
C'est une Tortue Ninja Teenage Mutant vélo, au cas où vous ne pouvez pas dire,
parce que c'est un peu flou.
Vous pouvez l'obtenir maintenant à ToysRUs pour, je crois, environ 100 $.
>> Mais la particularité de cette moto que je veux vous de faire attention à ces sont
ici.
Ce sont les roues de formation.
Jusqu'à maintenant, vous avez été de poche par C. Et nous avons pris une longue
temps, deux mois, plus, passer par C.
>> Pour ces deux prochaines langues, nous n'allons pas
passer autant de temps.
Les roues de formation sont à venir au large.
Et nous allons plonger dans les langues rapidement et se déplacer à travers
rapidement, ce qui ne veut pas dire que nous allons juste vous laisser piscine
là-bas sans aucun moyen de soutenir vous-même ou comprendre comment ces
langues de travail.
Je viens de vous montrer une liste de ressources pour vous aider.
>> Mais gardez à l'esprit que PHP est incroyablement similaire à C. Nous allons passer en revue
aujourd'hui et certaines des différences.
Mais la plupart du temps, il existe pour les boucles.
Il ya si les conditions.
>> Si vous voulez résoudre un problème, vous allez utiliser un
combinaison de ceux-ci.
Il est très similaire.
La logique doit être très proche de ce que vous avez fait dans le passé.
Ce qui est vraiment nouveau cette semaine est la la syntaxe et la façon dont vous vous exprimez.
Et vous voulez écrire une boucle for, mais il pourrait ressembler un peu différent.
Ou vous voulez créer un tableau, mais il pourrait ressembler un peu différent.
>> Donc, gardez à l'esprit que, aller de l'avant, la logique est très similaire à ce que
vous avez fait dans le passé.
Mais vous allez maintenant être rencontrer beaucoup de nouvelle syntaxe.
Et nous n'allons pas vous guidera à travers tous les éléments de la syntaxe.
Donc, c'est vraiment à vous de comprendre, en ligne ou par l'intermédiaire d'atteindre sur
Discuter ou m'écrivant ou de parler à l'autre, la façon d'écrire les choses en
PHP et comment écrire des requêtes SQL et comment utiliser HTML et CSS.
>> Mais si vous le savez, ce n'est pas que nous essayons de vous jeter là-bas
encore nager les requins.
C'est ce que vous allez probablement faire avec votre projet final, si vous choisissez un
autre langue, comme IOS et Objective C, ou si vous décidez de commencer
programmation à l'avenir et plonger dans d'autres langues,
comme Python ou Ruby.
>> Souvent, la logique est très semblable dans toutes ces langues, et la
syntaxe est ce qui est différent.
Et ce sera à vous, comme l' programmeur, d'aller utiliser le web
ressources disponibles pour vous et la figure comment exprimer ce que vous savez comment
à exprimer en C, à une autre langue.
Donc, c'est une bonne pratique, à la fois pour votre projet final, et encore, pour
ce que vous allez probablement faire après avoir quitté CS50.
>> Avant de passer, ne personne Pour toute question au sujet de ce
Je l'ai fait jusqu'à présent?
Grand.
Passons.
>> Tout d'abord, nous allons parler brièvement sur la commande chmod.
Ceci, nous le ferons au début de régler vos problèmes.
Une des premières instructions pour vous, après avoir téléchargé le
code de distribution, est de changer la permissions des fichiers et
répertoires que vous recevez.
>> Quelqu'un peut-il avancer une hypothèse ou savoir pourquoi il est important de changer la
permissions de certains fichiers et répertoires sur votre ordinateur?
Avi -
>> PUBLIC: Alors personne sauf pour vous pouvez voir ce que vous faites?
>> JASON HIRSCHHORN: OK.
Donc, si nous voulons mettre quelque chose sur la web et que vous avez les autorisations définir cette
que vous pouvez voir quelque chose, alors personne d'autre ne peut
voyez ce que vous avez créé.
Quoi d'autre?
Ouais.
>> PUBLIC: Empêcher quelqu'un d'autre que vous ne veulent pas voir quelque chose, de
voir quelque chose.
>> JASON HIRSCHHORN: C'est vrai aussi.
Il ya probablement un code qui vous écrivez, que vous n'avez pas
veulent que les gens voient.
Vous êtes probablement OK avec les gens de voir votre code HTML et JavaScript par votre navigateur.
Mais votre PHP, un code back-end, beaucoup de la logique de votre code, peut-être le
choses qui stockent certaines de vos mots de passe pour votre base de données, vous n'avez pas
veulent que les gens voient que type d'information.
>> Il est donc important que, chaque fichier et répertoire nous créons dispose des autorisations
applicable si nous voulons ou non les gens de voir ces types de fichiers et
répertoires et être en mesure d'y accéder et peut-être même les changer.
>> Donc, il ya trois types d'autorisations.
Il ya une autorisation de lecture, ce qui signifie vous pouvez lire un fichier ou une liste de la
contenu du répertoire.
Il ya la permission d'écriture, qui signifie que vous pouvez modifier un fichier ou un changement
un répertoire, puis l'exécuter autorisation, ce qui signifie que vous pouvez
exécuter un fichier ou plutôt, vous peut se déplacer dans un répertoire.
Donc CD quelque chose, si vous avez le autorisation de l'exécuter, vous pouvez déplacer
dans ce répertoire.
>> Il s'agit d'un bref exemple.
Encore une fois, vous avez dépassé ce dans le problème posé.
Mais je crée un répertoire avec la commande mkdir.
Je change les autorisations.
Ces deux lignes font réellement exactement la même chose.
C'est pour illustrer que la syntaxe pour la modification des autorisations, si vous faites
l'un ou x + 711, ce sont les mêmes.
>> Nous regardons en bas dans ce joli tableau.
Nous voyons qu'il ya utilisateur autorisations premier.
Que vous, l'individu a, et votre serveur, potentiellement.
Et puis il ya le groupe et les autres.
Les différences entre celles deux sont relativement trivial.
Donc, en général, nous groupons ceux ensemble.
>> Mais l'essentiel, si nous avons un fichier appelé comprend que nous voulons être
pouvoir nous éditer et que nous voulons d'autres pour être en mesure d'exécuter,
c'est l'autorisation 711.
Et nous voyons que le bas ici dans ce tableau.
Nous avons une lecture, écriture et exécution.
Pour chacun de nous, nous voulons être capable de faire les.
Groupe et les autres, nous voulons seulement qu'ils soient en mesure d'exécuter.
>> La façon dont nous traduisons dans un certain nombre d'
permission à travers binaire.
Donc, si nous avons trois petits, c'est un 1 dans la colonne des unités, un 1 dans les groupes de deux
colonne, une colonne 1, les quatre pattes.
C'est 7 là.
Et cette autorisation est 1.
Cette autorisation est 1.
Donc, quand 711 est le même que donner nous lire, écrire, et exécuter,
et tout le monde exécuter privilèges.
>> Cette ligne ici, nous avons généralement auront lire et à écrire quand nous
créer un répertoire.
Donc, cette ligne ici qu'ajouter exécuter privilèges à tous.
Donc, ce serait semblable à, en Outre ce que nous avons,
ajoutant 1, 1, 1 à tout le monde.
>> Considérant que la présente, il est inutile ajouter lire et écrire.
Mais si vous allez utiliser les chiffres, vous ne pouvez pas ajouter quelque chose.
Vous écrasez tout ce autorisation était là et les mettre en œuvre la nouvelle
numéro que vous donnez.
Cela a été assez rapide.
Quelqu'un at-il des questions sur la modification des autorisations?
>> OK.
Si j'ai un fichier PHP, quelles autorisations Je ne veux qu'il y ait?
Il s'agit de l'ensemble de problème spec.
Ainsi, vous pouvez regarder la spécification et alors lisez-moi la réponse.
>> PUBLIC: Vous voulez que l'utilisateur disposer des autorisations en lecture-écriture.
Et vous voulez que tout le monde autre de ne rien avoir.
>> JASON HIRSCHHORN: Et qu'est-ce numéros est-ce?
>> PUBLIC: 600.
>> JASON HIRSCHHORN: 600.
Donc chmod 600 - chaque fois que vous imprimez un fichier PHP, chmod à 600.
OK.
J'ai un répertoire.
Quelqu'un d'ailleurs Jeff, J'ai un dossier.
Quelles sont les autorisations que je veux à donner à ce dossier -
aussi le problème réglé spec, juste en dessous de cette réponse ou
la réponse précédente?
Aussi potentiellement sur la diapositive -
Marcus.
>> PUBLIC: Pour l'
dossier, c'est 711.
JASON HIRSCHHORN: 711 -
si un dossier, vous voulez donner 711.
Vous voulez être en mesure de lire ce dossier, changer de répertoire, se déplacer dans
ce dossier.
Et vous voulez que tout le monde soit en mesure pour naviguer dans ce dossier, mais
pas nécessairement changer son contenu.
Qu'en est-il d'un fichier non-PHP, dire, un fichier JavaScript?
Quelles sont les autorisations voulons-nous de donner ce type de fichier?
>> PUBLIC: 644.
>> JASON HIRSCHHORN: 644 -
Pourquoi voulons-nous lui donner 644?
>> PUBLIC: Pour permettre à d'autres personnes de le lire.
Et vous lisez ou écrivez.
>> JASON HIRSCHHORN: Alors bon, tout le monde d'autre ne peut lire ce fichier JavaScript.
Et vous pouvez changer cela, en plus d'être capable de le lire.
Donc, l'un des insectes les personnes les plus communs avoir avec ce problème et définir leur
projet final, si c'est une finale sur le Web projet, ils ne seront pas ont mis en
les autorisations appropriées.
Et ils ne seront pas en mesure voir leur site web.
Ou une partie spécifique de leur site web.
>> Donc, assurez-vous de régler la autorisations correctement.
Ne supposez pas que ce sera le faire automatiquement pour vous.
>> OK.
C'était une petite chose que nous avons passé une bonne quantité de temps, donc
nous pourrions clouer.
Passons à HTML.
>> Et encore, pour ces quatre thèmes suivants, nous allons passer en revue
relativement rapidement.
Alors s'il vous plaît n'hésitez pas à m'arrêter à tout temps, si vous avez des questions,
si elles sont liées à ce que je couvre ou quelque chose de conférence ou
même le problème réglé.
Arrêtez-moi quand vous avez besoin.
Quand nous arrivons à la fin, nous allons juste commencer à aller sur l'ensemble des problèmes.
>> Donc HTML signifie HyperText Markup Language.
Ce n'est pas un langage de programmation.
Tout ce qu'il fait est la structure de votre contenu et également fournir des métadonnées.
Ainsi, par exemple, sans doute, un grand nombre d' vous avez utilisé Facebook avant.
Et vous pouvez inclure des liens, ou vous peut mettre un lien que votre statut.
>> Et puis, vous remarquerez que le lien a toujours une belle photo
pour elle et un peu de texte.
Généralement, c'est des métadonnées pour une page web.
Et c'est métadonnées Facebook spécifique.
Et puis, quand Facebook est en train de lire que page et l'insertion de ce lien, il
regarde pour les métadonnées spécifiques, il sait ce que l'image à afficher, ce
titre à afficher, et ce le texte du résumé à afficher.
>> Donc, nous pouvons inclure des métadonnées avec notre page Web à l'aide HTML.
Et cela nous aide également la structure le contenu, en général, ce
nous voulons aller où.
>> Tout en HTML est un élément.
Et des éléments ici -
ce CS50, le texte est l'élément.
Et il a quelques balises.
Il a cette une étiquette.
Et nous remarquons qu'il ya un un à l' début, puis une barre oblique un, de sorte
la fermeture de l'un tag à la fin.
Parfois, il n'y a pas un ouvert tag et une balise de fermeture.
Il ya juste une chose.
>> Nous verrons un exemple de cette sur la diapositive suivante.
Donc, vous n'avez pas besoin d'un ouvert et une balise de fermeture.
Mais pour cela, nous enfermant ce élément CS50 dans la balise d'ancrage.
Et l'essentiel, ces balises disent le navigateur que faire
l'élément particulier.
>> Encore une fois, CS50 est le texte nous allons voir.
Et il va être un type d'ancrage.
Anchor est essentiellement utilisé des liens vers quelque chose.
En particulier, comme vous pouvez déjà dit, il s'agit d'une
lien vers la page d'accueil de CS50.
>> La prochaine partie de l'étiquette - ou, plus généralement, une partie de balises sont
attributs.
Et nous voyons ici, que l'une balise a une
attribuer, cet attribut href.
Et ils modifient un mot-clé particulier.
En fait, si vous allez à l'un des sites Web ou les références que je vous ai
avant ou regarder la balise en ligne, vous remarquerez qu'il ya une tonne de
attributs potentiels.
>> C'est probablement l'un des plus courantes.
Ce me dit de créer un un lien vers le site Web spécifique.
Et les attributs sont généralement donné, sinon exclusivement donné,
en paires clé-valeur.
>> Alors, voici la clé, href.
Et la valeur est ce droit ici.
Et qui vous sera utile plus tard, quand nous commençons à utiliser des bibliothèques de
nous aider à code JavaScript ou écrire le contenu HTML.
Nous sommes souvent allons être - comme nous ferait tableau support 0 et que
nous donnerait une certaine valeur.
>> Dans l'avenir, nous allons faire un grand nombre de des choses comme quelque chose de support href.
Et qui nous donnera la valeur de la href, ou si l'on veut mettre à jour le href
clé et puis de lui donner une valeur particulière.
Ainsi, tout comme avec des tableaux où nous avions touche 0 ou la touche 1 ou 2 ou même avec un
la table de hachage, bien, avec vos tables de hachage ainsi, vous avez probablement eu - il
était un tableau, si la touche 0, la touche 1, touche 2.
>> Cet indice là, nous pouvons penser que comme une clé.
Et quelle que soit la valeur est il a été stocké.
Tous ces attributs sont des paires clé-valeur.
Et ce sera important pour l'évolution ou de les mettre à jour ou
les insérer par la suite.
>> Enfin, vous avez vu cette structure avant, mais il s'agit de la plus élémentaire
la structure de la page HTML.
Au sommet, nous vous disons que c'est en fait HTML.
Et puis nous avons un fichier HTML ouvert tag et une balise HTML à proximité.
Donc, tout à l'intérieur de c'est le HTML.
>> Nous voyons la tête et le corps.
La tête de votre document comprend généralement ce?
Toutes les suppositions pour ce que vous mettre dans la tête?
>> PUBLIC: Vous mettez le titre et le style.
>> JASON HIRSCHHORN: Le titre.
Ce fut une grande conjecture.
Je vous ai averti à l'.
Quels sont les autres choses?
Nous avons mentionné l'un d'eux que pourrait aller dans la tête.
>> PUBLIC: Il a dit, les styles.
>> JASON HIRSCHHORN: Styles -
donc si vous voulez faire un lien dans un JavaScript ou même un CSS qui vous parlez
quand vous parlez sur les styles.
Un autre fichier, vous souhaitez lier dans un en dehors de fichier, qui va probablement aller
dans la tête.
>> Quoi d'autre?
Nous avons mentionné quelques diapositives Il ya une des choses que
HTML peut faire pour vous.
Il peut fournir -
commence par un M -
>> PUBLIC: Métadonnées.
>> JASON HIRSCHHORN: Métadonnées - donc beaucoup des métadonnées ira dans la tête,
parce que cela va pas nécessairement besoin de faire partie du corps de votre code.
C'est généralement - le corps est le contenu, ce que quelqu'un voit.
Et si je viens de loin la réponse à ma prochaine question.
Mais dans le corps est généralement le contenu qui va être affichée
sur la page Web.
>> Comme nous allons le voir, les sites Web complexes ont tendance à se mélanger ou modifier jusqu'à ce que
ils ont mis dans la tête et le corps.
Mais en général, la tête contient des choses que l'utilisateur ne va pas
voir sur l'écran.
Il relie dans d'autres fichiers et fournit des métadonnées.
Considérant que, le corps contient tout l'utilisateur va voir.
Toute idée de ce que signifie cette balise p?
>> AUDIENCE: Le paragraphe?
>> PUBLIC: Imprimer.
>> PUBLIC: Ne signifie pas l'impression.
>> PUBLIC: Est-ce que cela signifie paragraphe?
>> JASON HIRSCHHORN: Paragraphe - c'est donc un paragraphe.
Et cette balise p, j'aurais pu juste tapé ce sur l'écran, puis
inclus un saut de ligne à la fin de celui-ci.
Quelqu'un sait comment inclure un saut de ligne?
>> PUBLIC: pr -
>> JASON HIRSCHHORN: pr -
>> PUBLIC: Slash pr?
>> JASON HIRSCHHORN: slash pr synonyme de saut de ligne.
Mais paragraphes ont spécifique mise en forme.
Et nous aurons au formatage dans un deuxième, quand on parle de CSS.
Mais tout à l'intérieur de ces balises p aura une mise en forme par défaut
qui lui est associée, probablement quelque l'espacement entre les différents
paragraphes.
Et ce sera un moyen de différencier des blocs de code.
>> Toutes les autres balises -
ce sont d'autres balises que vous avez vu?
>> JASON HIRSCHHORN: H1 à H6.
h1 par h6, et qu'est-ce que?
>> PUBLIC: Il désignera la taille et les lettres en gras sont.
>> JASON HIRSCHHORN: droit, il est synonyme de tête.
Et si header1 est une grande tête.
Ce sera probablement, par défaut, être audacieux, un grande taille de la police, probablement centré sur
l'écran, tout en bas à h6, qui est une plus petite taille de police, la moins
souligné.
Bien sûr, vous pouvez, en vous êtes fichier CSS ou quelque part dans votre code - qui,
encore une fois, nous y reviendrons dans une seconde - changer ce comportement par défaut
d'une balise h1 est.
>> Mais gardez à l'esprit que Chrome, Safari, Firefox, Internet Explorer ont tous
défaut ressemble pour beaucoup de ces balises standard.
Vous pouvez, de plus, toujours changer à quoi ils ressemblent.
Toutes les autres balises que tout le monde a vu?
Oui -
>> PUBLIC: Un site div.
>> JASON HIRSCHHORN: Une balise div - balise div n'a aucune forme intégrée, par
soi, qui est utilisé pour obturer différents types de codes.
Toutes les autres balises?
Oui.
>> PUBLIC: li -
>> JASON HIRSCHHORN: li -
ce qui est li pour?
>> PUBLIC: Liste.
>> PUBLIC: Liste
>> JASON HIRSCHHORN: li est pour les éléments de la liste.
Il existe deux types de listes.
Quels sont les deux types?
>> PUBLIC: Commandé et non ordonnée.
>> JASON HIRSCHHORN: Commandé et non ordonnées - peuplements afin ul
pour la liste non ordonnée.
C'est, si vous voulez une balle signaler, une liste de balles.
Une liste ordonnée est une liste numérotée.
Et si vous faites une balise ul ouvert puis tonnes d'éléments de la liste, puis
fermer la balise ul. et que la volonté créer une liste non ordonnée.
>> Nous allons voir quelques exemples de HTML dans un peu.
Mais avant cela, je veux apprendre à CSS.
Et CSS signifie Cascading Feuilles de style.
Et cela est très étroitement liée en HTML, mais légèrement différente.
Cela vous permet de formater tout le contenu que les structures de HTML.
>> Donc, en CSS, nous avons généralement ne voulons pas le style de chaque en-tête unique ou chaque
une seule image ou chaque paragraphe unique.
Nous voulons le style de certains éléments ou peut-être un élément spécifique.
Et la façon dont nous le style d'un particulier élément est de lui donner une identité.
>> Donc, c'est un attribut.
Il possède une clé et une valeur.
ID est la clé.
Logo est la valeur.
J'ai pris logo hasard.
Et si vous donnez quelque chose d'un ID, général, qui ne doit être administré
à un élément.
>> Et puis, dans votre feuille de style, vous pouvez le style de cet élément particulier, mais
vous voulez qu'il regarde.
Si vous voulez un style à un certain nombre de éléments, c'est peut-être une certaine classe
des en-têtes, que certains de vos têtes.
C'est peut-être un en-tête et une image et un paragraphe que vous voulez tous être centré.
Ensuite, vous pouvez donner à ces groupes de tous les éléments d'une classe.
Et vous pouvez donner à la classe styles spécifiques.
Ainsi, un ID et une classe existe deux façons de briser votre code, de sorte que vous pouvez les aider soit
plus précis dans ce que vous section.
>> Il ya trois façons de style.
La première est, avec cet attribut de style.
Donc, vous voyez, la touche de style est le style.
La valeur de style est en fait autre liste de valeurs clés.
>> Dans ce cas, j'ai pris une clé, text-align.
Et je l'ai dit, centre.
Vous pourriez vous demander à ce stade, comment ai-je sais
text-align.
Qu'est-ce que même le faire?
C'est une excellente question à poser, et nous allons y arriver en une seconde.
Donc, c'est une façon de coiffer quelque chose, juste lui donner l'attribut style.
>> Une autre façon de coiffer quelque chose est - c'est Akshar mentionné plus tôt.
Vous pouvez utiliser les balises de style et de mettre ce dans la tête de votre document HTML.
Donc, vous dites essentiellement, le contenu à l'intérieur ici
est une partie du contenu de style.
Et le format qui est la chose que vous vouloir coiffer, puis, à l'intérieur de
accolades, la paire de valeur de clé de attributs que vous voulez donner à
ce type particulier d'élément.
>> Enfin, et c'est là le façon la plus courante.
Et c'est la façon dont nous faire en p ensemble 7.
Il s'agit d'une feuille de style externe.
Donc, vous avez un fichier css..
Et à l'intérieur de celui-ci, vous voyez beaucoup de choses qui ressemblent à celui-ci, le nom
d'un certain type d'élément ou d'une pièce d'identité ou une classe, puis, à l'intérieur de bouclés
bretelles, une liste de paires de valeurs de clés.
>> Bien sûr, si vous créez un externe fichier, vous allez
besoin de l'inclure -
forte inclure, qui serait être l'analogie C -
dans votre fichier HTML.
Donc, vous devez inclure ce code dans votre fichier HTML.
Ceci étant le nom du fichier et en supposant que c'est dans le même répertoire.
>> OK.
C'était beaucoup.
Et nous allons maintenant respirer et regarder à certains, site immobilier direct et
explorer cette plus.
Mais avant de faire cela, quelqu'un avez des questions?
>> Donc, si vous voulez faire cela avec moi, nous pouvons aller à l'appareil.
Et j'ai choisi la page d'accueil de CS50.
Vous pouvez faire cela avec n'importe quel site Web.
Mais pourquoi ne pas commencer avec la page d'accueil de CS50?
>> Rafraîchissons.
En fait, je vous recommande fortement de faire ceci avec moi, parce que ce que nous
vont faire maintenant va être incroyablement pratique pour vous, non seulement dans
P-Set 7, mais en P-Set 8 ainsi.
Ouais.
>> PUBLIC: Y at-il un moyen de faire des commentaires en HTML, sans utiliser PHP?
>> JASON HIRSCHHORN: Oui, vous pouvez faire des commentaires en HTML.
>> PUBLIC: Quelle est la syntaxe?
>> PUBLIC: Point d'exclamation tableau de bord tableau de bord.
>> PUBLIC: OK.
>> JASON HIRSCHHORN: Oui.
C'est la syntaxe.
Vous pouvez faire des commentaires en HTML.
Vous pouvez faire des commentaires en PHP.
>> Comme vous le verrez, commenter en HTML encore apparaître, quand on regarde la
Le code source HTML d'un site particulier.
Donc ce cs50.net.
Si vous faites un clic droit dans la plus moderne navigateurs sur la plupart n'importe quelle page, vous affichez
la source de la page.
Alors faisons-le sur CS50.
>> Et voilà, nous voir une chose géant.
CS50 semble en fait assez agréable.
Beaucoup de sites ne sera pas regarder cette belle.
Si vous allez à la page d'accueil de Google et de l'ouvrir.
Il ne sera pas regarder cette belle.
>> Mais vous remarquerez que, dans le haut -
c'est une sorte de petit.
Faisons de cette plus grande.
OK.
Au sommet, DOCTYPE HTML, c'est familier.
Ensuite, nous voyons la balise HTML et ouvert la tête, ici, tous les
de ces balises meta.
Et vous pouvez voir ce og, pas va entrer dans les détails.
Mais je suis presque à ce ceux qui seraient Facebook.
>> C'est en fait le Facebook.
Je pense que représente le graphique ouvert.
Donc me souviens, je parlais il ya Métadonnées spécifiques Faceboook vous pouvez
donner à une page.
C'est ce qui est juste ici.
>> Ainsi, lorsque vous liez cette page sur Facebook, l'image qu'elle va montrer
est-ce l'image de droite ici.
Et vous voyez que c'est Facebook, parce que c'est
l'image Facebook.
>> Mais de toute façon, nous obtenons de côté.
Nous avons donc des balises de métadonnées ici.
Nous voyons le titre de la CS50.
Et encore une fois, le titre est ce qui se passe ici dans l'onglet du navigateur.
Nous voyons cela relie en, ici, un fichier JavaScript externe.
>> Nous n'avons pas parlé beaucoup JavaScript, mais la semaine prochaine - et certainement si
vous faites un problème ensemble basé sur le Web, vous allez utiliser JavaScript.
C'est ainsi que vous vous connectez en externe Fichiers JavaScript.
Nous voyons ici, enfin, la CSS feuille de style, qui documente les
styles de ce code.
>> Ne nous laissons effectivement ouvrir que jusqu'à et jetez un oeil très rapidement.
Cela semble fou.
Il n'ya aucun moyen que je serais mesure à lire.
Ainsi, vous pouvez effectivement que, si vous prenez un coup d'oeil, vous pouvez sorte de voir que
il existe -
là nous allons.
>> Cela ressemble à quelque chose que nous avons vu avant, la couleur d'arrière-plan, sa mise en
égale à une certaine valeur rouge-vert-bleu.
Ce truc sorte de ne pas croire que étrangères, bien que, lorsqu'ils sont présentés
comme ça, il peut être un peu écrasante.
Nous n'allons pas à consulter ce fichier CSS ou passer beaucoup de temps là-dessus, parce que
il est, encore une fois, assez difficile à lire.
>> Revenons à cette page HTML pour CS50.
Et nous allons faire défiler vers le bas pour le corps.
Et à l'intérieur, nous voyons cette balise div.
Nous voyons une tête ici.
Nous voyons la balise d'ancrage.
>> Et cet élément de la liste est donné une classe spécifique.
Et nous voyons que la classe répété encore et encore.
Il vous Curtis.
Il est le commentaire en HTML5.
>> Et comme vous le constatez, nous pouvons encore voir , mais ce n'est pas à apparaître.
C'est effectivement très intéressant.
Il ressemble à cette liste de scores élément est commenté.
Si nous allons à cette page, encore une fois, il reste y apparaît, si intéressant.
>> Oh, c'est pourquoi, parce que de cette nouvelle ligne.
Que voyons-nous des intérêts?
Le reste de ce qui est plus déroutant, dans traiter cette moitié droite de l'
site, ce qui est un peu peu plus complexe.
>> Donc, c'est ce que certains HTML va ressembler.
Pour moi cependant, c'est un peu écrasante, et ce n'est pas
m'aider beaucoup.
Cependant, il ya quelque chose qui ne, en fait, m'aider beaucoup.
>> Et c'est ce que j'utilise quand je suis à essayer de comprendre comment quelque chose
regarde comme il le fait, ou comment peut- J'apporte des modifications à mon site.
Et c'est un outil de développement qui est intégré dans Chrome.
Donc, si vous allez à ces trois barres à droite ici et descendre à outils, cliquez sur
Outils de développement, une petite fenêtre apparaître au bas de la page.
Et, en particulier, de chrome, car il est merveilleux, formatera cette fenêtre et
prendre le HTML et le faire paraître beaucoup plus agréable pour vous.
Alors maintenant, il s'agit en fait d'une certaine pliable HTML que vous pouvez explorer à inspecter
les éléments de la page.
>> Si nous voulons nous pencher sur le corps, il souligne en fait.
Lorsque vous faites défiler sur une partie de l'HTML, dans cette fenêtre, il sera
mettre en évidence le rôle qu'elle parle sur la grande fenêtre.
Permettez-moi encore une fois essayer de souffler ce un peu.
OK.
>> Donc, nous allons ouvrir le corps.
Et je défilement au cours de cette div gauche.
Et vous remarquerez que c'est en soulignant cette moitié gauche de l'écran.
Donc, nous allons cliquer sur ce et développez.
>> A l'intérieur de celui-ci, il semble que il ya deux divs.
Il ya cette première div.
Je ne vois pas qui a mis en évidence.
Je ne sais pas, mais il semble que ce deuxième, à gauche intérieure, est le contenu
sur le côté gauche de l'écran.
>> Ensuite, il ya cette chose appelée tête.
On dirait que c'est soulignant la partie CS50.
Si nous ouvrons que vous, nous voyons que c'est rien de plus que la tête 1.
Il a donné une identité, et c'est compte tenu de la CS50 de texte.
>> Encore une fois, en regardant à travers ce console ou en utilisant les outils de développement
volet à la partie inférieure des marques d'écran explorer ce site, je l'espère, un
beaucoup moins intimidant et beaucoup plus accessible.
Elle nous permet aussi de comprendre que ce site, mais il semble très
jolie et agréable, n'est pas tant que ça plus que ce que vous allez être
faire le problème Set 7.
Et c'est tout à fait dans votre capacité à créer.
>> Si nous voulons -
l'autre chose cool à propos de l'utilisation de ces outils est, si vous faites un clic droit sur l'
titre, vous pouvez modifier le code HTML.
Alors appelons-Jason.
Et maintenant, vous remarquerez que j'ai changé le code HTML de cette page.
>> Bien sûr, je n'ai pas changé définitivement.
Si je me rafraîchir navigateur, alors il serait revenir à la HTML d'origine.
Mais parfois, je veux déboguer mon code, et je ne veux pas regarder juste avoir mon
fenêtre gedit et essayer de comprendre ce qui se passe.
>> Je veux voir ce qui se passera en direct.
Donc, je vais modifier le code comme ceci et obtenir la façon dont je veux qu'il ressemble.
Et puis je vais faire l' changements dans mon code.
>> Et je trouve que c'est beaucoup plus facile quand vous pouvez faire les choses
instantanément, comme ça.
Dites, encore une fois, nous voulons faire un autre hasard, parce que nous étudions avec
HTML et CSS pour le moment.
Je peux modifier le code HTML à l'heure actuelle.
Et je vais inclure un lien.
>> Donc, je vais changer de domicile de CS50 page, donc il sera relié à -
disons - ma page d'accueil.
Quel est le nom, si quelqu'un se souvient, ou ce qui est l'attribut Je veux donner
à une patte d'ancrage quand je veux à relier ailleurs?
>> PUBLIC: href?
>> JASON HIRSCHHORN: href -
Alors maintenant, vous verrez qu'il ya est un trait de soulignement sous Jason.
C'est parce que Chrome, par défaut, donne ancres un trait de soulignement.
Vous avez probablement vu que avant lorsque vous êtes allé à une page Web.
Les choses qui sont des liens sont souligné et en bleu.
Le style par défaut pour un lien est à souligner général
et mettre en bleu.
>> Si je n'aime pas, Je peux changer cela.
Et nous allons le changer en une seconde.
Mais maintenant, vous remarquerez également que, si je plane sur ce, en bas à gauche de l'
écran, juste au-dessus des éléments de texte est le lien que j'ai donné il.
>> Donc, si je l'ai fait de cliquer sur ce - et nous pouvons faites un clic droit sur cela, ouvrez un nouvel onglet.
Ce n'est pas vraiment ma page d'accueil.
C'est juste mon nom.
Là vous allez.
Nous avons maintenant la transformer en un lien.
>> Examinons quelques-unes CSS ainsi.
La belle chose - et je vais faire un peu plus petit - sur
cette console est, cette feuille CSS fou nous l'avons vu, c'était vraiment
difficile à analyser, est magnifiquement aménagé pour nous sur le côté gauche
de ce volet.
Donc, nous pouvons regarder.
Et si nous élargissons cet onglet styles, nous peut voir tous les différents styles
qui sont associés à, dans ce cas, cet élément particulier, cette
élément de liaison.
>> Si nous faisons l'onglet styles de composés, que nous montre juste, pas où tout
vient, mais la quasi-totalité de ces modèles qui fonctionnent sur
cet élément particulier en ce moment.
Et disons, nous voulons pour changer un peu.
C'est donc tous les styles qui sont d'exploitation sur cet élément particulier.
Disons que nous voulons changer, parce que nous veulent voir comment quelque chose semble.
Et nous sommes en train de jouer autour de ce moment.
Ou nous voulons tester quelque chose, avant écrit dans le code et en poussant
et de le rendre vivant.
>> Nous pouvons aller à l'onglet styles.
Et dans la première case, il dit, element.style.
Et ici, vous pouvez insérer, vous pouvez ajouter quelque chose.
>> Je tiens donc à -
Passons à mon lien et la définir la couleur d'arrière-plan.
Et il AutoFills fait pour vous, toutes les propriétés possibles.
La couleur de fond, et je veux pour faire que le bleu.
Blus n'est pas un mot.
Blue est un mot.
>> Ai-je le vois venir?
Oh, c'est parce que c'est dans le href?
OK.
Donc, je ne vois pas de changement ici.
Et c'est parce que, si nous mettons en évidence la lien, vous remarquerez que le lien
n'est pas effectivement commander l' propriétés de cet élément particulier.
Il s'agit en fait, si nous ouvrons le lien, cet en-tête ici c'est
contrôle à quoi il ressemble.
>> Donc, si je veux faire le fond bleu, j'ai fait changer
couleur de fond sur la élément d'en-tête.
Et maintenant, nous voyons que le fond est bleu.
>> Encore une fois, ce qui pourrait se passer rapidement à travers ce matériau assez rapidement.
Mais c'est essentiellement ce vous allez faire.
Ce n'est pas le problème Set 7, mais certainement lorsque vous êtes
codage sur le web.
>> OK.
Je veux faire le fond bleu.
Même si, dans ce cas, bleu semble assez laid.
Je peux aller ici, jouer.
Je vois que changer au bleu ne fonctionne pas sur l'un.
Je dois vraiment changer l'en-tête élément à inclure le bleu
fond.
>> Et puis, si je reviens à mon CSS fichier, comment puis-je effectivement mis ce
fond de bleu et faire ce changement bâton?
Parce que si nous remarquons si je rafraîchir la page, toutes les modifications que j'ai apportées ont disparu.
Donc, je me suis rendu, OK, mon fond est bleu.
>> J'ai besoin d'aller dans cet élément header1 et changer la couleur de fond en bleu.
Comment puis-je réellement faire ce changement?
Eh bien, rappeler que, si nous allons à l'intérieur d'ici, cet en-tête, la
titre dispose d'un ID.
Et c'est le titre.
>> Et si dans notre fichier CSS, nous pouvons dire, OK, prendre quoi que ce soit avec l'ID du titre et
donner cette propriété supplémentaire.
Comment pouvons-nous référençons quelque chose avec l' ID de titre, les idées, ou qui que ce soit
savoir comment nous référençons ID dans notre fichier CSS?
>> Un hachage, c'est tout à fait exact.
Et vous avez un soupçon de ce droit ici.
Donc, quelque part dans ce fichier CSS, il ya cette ligne de code -
# # Gauche gauche intérieure # header # titre.
Et c'est ce qui lui donne en bas de la marge, définissant le fond de la marge de cette
élément particulier.
>> Eh bien, si je voulais changer cela, Je voudrais aller dans ce fichier CSS.
Et je pourrais trouver ce soit partie du fichier CSS.
Ou je pourrais écrire mon propre.
>> Je pourrais faire hachage titre bouclés accolade et puis bleu couleur de fond du côlon
virgule et étroite qui accolade.
Et ce serait changer le fond couleur de cet élément au bleu.
La raison pour laquelle ils vous donnent tellement ici est ça, c'est nécessaire dans ce cas,
parce que le titre est un identifiant unique.
>> Mais ce que vous pouvez faire est de choses de nidification.
Donc, cela veut dire, OK, allez vers la gauche.
C'est très petit.
Je m'excuse pour cela.
>> Mais aller à la chose avec ID gauche.
À l'intérieur de cela, chercher la chose avec ID laissé intérieure.
A l'intérieur de ce regard, chercher la chose avec en-tête d'identification.
À l'intérieur de cela, regardez la chose titre d'identité et changer le titre d'identité.
Donc, c'est juste une façon des choses de nidification.
Certaines personnes aiment nid, car il fait un peu plus clair.
>> Vous verrez ici aussi, à droite ici, il n'y a pas de hachage.
C'est juste h1.
C'est parce que h1 est donné le Nom d'un tag générique.
Et il ya des propriétés CSS associé à chaque h1 unique.
Donc, si j'ai trouvé un autre h1 sur cette page, Je voudrais aussi voir que ce style était
qui lui est appliquée aussi bien.
>> Si je voulais appliquer un style à une classe, comment puis-je faire référence à une classe ou
parler d'une classe dans un fichier CSS?
>> PUBLIC: Dot.
>> JASON HIRSCHHORN: C'est avec un point.
Donc, revenons à cette page avant.
Si je fais hachage ID.
Cela change le style de la chose avec ID.
Ou désolé, si je fais logo hachage, c'est trouver la chose avec l'ID de logo
et en lui donnant un style CSS particulier.
>> Si je fais quelque chose dessus., C'est trouver tout avec la classe de haut et
changer ses modèles.
Si je ne H1 tout simplement, qui trouve chaque h1 simples et lui donne le quel que soit
style que je veux donner.
Si je fais espace h1, puis de haut..
Qui ira trouver tous les H1S puis tous ceux qui ont la classe de haut et
alors seulement changer les styles de ce que je veux lui donner.
>> Et encore, nous aurions pu écrire une partie de ce nous-mêmes.
Mais nous n'aurions pas eu jusque-là.
Bien mieux, il semble effectivement aller sur un vrai site en ligne et de voir comment
ils le font et regardent tous la choses fantastiques que vous obtenez à faire.
>> Regardons un autre site avant de passer.
Et c'est celui que vous aurez probablement se familiariser avec.
C'est CS50 Finances.
Encore une fois, vous pouvez réellement aller et observer ce fichier CSS de votre
ordinateur, parce que vous avez téléchargé ce fichier CSS, si vous avez téléchargé le
problème réglé.
>> Nous pouvons aller à Outils et Outils de développement.
Et nous voyons une mise en page HTML beaucoup plus simple.
Nous avons haut, au milieu, et en bas.
Et de nouveau, quelque chose que vous devrait être familier, parce que vous avez regardé
par l'intermédiaire du code de distribution pour le problème de cette semaine réglé.
>> Au sommet se trouve, par le code, une seule image appelé.
Et c'est la source de l'image.
Dire que j'ai terminé tout ce que Je voulais pour problème Set 7.
Et cela fonctionne correctement, mais Je veux changer quoi il ressemble.
Et je veux changer le fond du haut de la page pour,
par exemple, bleu.
Si c'était moi, je viens ici et comprendre, OK ce
que je veux changer.
>> Voyons, div haut d'identification, que les regards comme en haut de la page.
Alors allons-y.
Essayons de changer la couleur de fond.
Allons faire Alice bleu, parce c'est une chose de mieux.
>> Et vous remarquerez que -
vous ne pourrez probablement pas voir ça.
Mais il ya une lumière bleu, à côté du logo de CS50.
Changeons la place au rouge.
Et vous remarquerez maintenant j'ai juste changé la couleur de fond pour le rouge.
>> Alors maintenant, je voudrais aller dans mon fichier CSS et tapez # top parenthèse bouclés ici.
Vous pouvez voir le droit de code ici, accolade.
Et puis, je voudrais ajouter un fond couleur, rouge.
Et puis, il y aurait être une accolade.
Donc, c'est ce que je voudrais explorer et expérimenter mise sur le CS50
site de Finances.
>> Je pourrais le faire ici et essai il sur mon navigateur.
Et puis, je pourrais aller dans mon code réel et faire les changements qui
effectivement aller vivre et que les gens fait voir, si elles étaient à venir
mon site spécifique.
>> OK.
C'était beaucoup.
Je m'excuse de passer par si rapidement.
Quelqu'un at-il des questions tout sur le langage HTML ou CSS?
>> PUBLIC: Pouvez-vous revenir sur la façon dont vous lié ce qui est devenu Jason, encore une fois?
>> JASON HIRSCHHORN: Qu'est-ce voulez-vous dire lié?
>> PUBLIC: Vous avez fourni un lien vers un autre site, en utilisant l'élément d'ancrage.
>> JASON HIRSCHHORN: Alors demandez-vous, juste générique, comment vous faites un lien?
>> PUBLIC: Ouais.
>> JASON HIRSCHHORN: OK.
Le code de fabrication d'un lien -
>> PUBLIC: Non, comme dans le code HTML.
>> JASON HIRSCHHORN: Ici-bas, vous voulez dire?
Donc, si je veux inclure un lien quelque part, par exemple, c'est le code HTML de mon
page de droite ici.
Ceci est le HTML.
C'est peut-être ouvert dans un fichier index.html.
Je vais po
>> Ayons ce droit d'auteur John Harvard lien vers quelque chose.
Nous allons donc modifier tous ce que HTML.
Il vous suffit de comprendre l'un, de sorte encadrer un support de près la
début, puis le support oblique un crochet fermant à la fin.
>> Alors maintenant, j'ai inclus une balise d'ancrage.
Et en fait, si vous cliquez sur sur ce, il va maintenant
formater modifier en HTML.
Et disons, nous voulons lier.
Nous vous serions l'attribut href.
Et nous disons -
>> Et maintenant, comme vous le constatez, le droit d'auteur John Harvard est bleu.
Et quand je fais défiler sur , il est maintenant un lien.
Ainsi, vous pouvez écrire ce code.
Vous pouvez entourer à peu près tout que vous voulez dans une balise d'ancrage et de le transformer
dans un lien.
>> PUBLIC: OK.
Je l'ai.
>> JASON HIRSCHHORN: Et si je ne veux pas il - bien sûr, parfois, les gens ont tendance
de penser ces choses qui ne regardent bleu générique et souligné sont
pas la plus jolie façon de faire un lien.
Donc, si je viens ici, vous voyez que, quelque part dans un fichier CSS, il existe
écrit ce une puis deux accolades.
Donc, disons que, pour les liens, je ne sais pas veulent qu'ils deviennent bleu, plutôt je
voulez la couleur d'un lien vers être cette belle magenta.
>> Donnons-lui la couleur.
Reprenons magenta.
Maintenant, tous les liens sur ma page ont devenue cette belle couleur magenta.
Certaines personnes n'aiment pas les couleurs du tout.
Certaines personnes n'aiment pas soulignés.
Vous pouvez donc choisir.
>> Avec des liens, vous pouvez coiffer la façon dont ils regarder une fois que vous les avez visité.
Comme vous le remarquerez sur un grand nombre de pages, liens deviennent violettes sur vous les visitez.
Vous pouvez modifier cette couleur ainsi.
Ouais.
>> PUBLIC: Donc, vous changez pour chaque lien.
Mais si vous voulez juste faire ce lien elle-même, serait que vous venez de faire dans l'ID
bas ou quelque chose?
>> JASON HIRSCHHORN: Alors grande question.
Comme vous avez remarqué ici, j'ai changé un peu partie de la CSS qui s'applique à
tout ce qui est un A. Si je voulais juste faire le lien en bas, je
irait à mon fichier CSS et probablement faites comme vous l'avez dit, hachage
fond l'espace d'un.
Et cela me donnerait tout comme dans le fond.
>> Ou je pourrais, à défaut, de lui donner un ID unique et puis faire le lien de hachage.
Et cela me permettra pour changer cela.
Cependant, juste à distribuer des identifiants bon gré mal gré est généralement une mauvaise
pratique, parce que ceux doit être unique.
Et plus vous avez de ceux-ci, il peut être un peu déroutant.
Ouais.
>> PUBLIC: Pouvez-vous donner le même ID à plusieurs propriétaires?
>> JASON HIRSCHHORN: Techniquement, oui.
Rien ne va vous arrêter, mais vous Vous ne devriez pas devez lui donner une classe.
OK, d'autres questions sur le langage HTML ou CSS?
>> OK.
Passons à PHP.
Oh, oui.
>> PUBLIC: Qu'est ce que c'est sur ces sites qui signifie que nous pouvons modifier
avant de nous rafraîchir.
Mais une fois que nous renouvelons il revient sauvegarder le HTML initiale?
>> JASON HIRSCHHORN: Grande question -
alors quand nous avons chargé ce page Web, il est HTML.
Et c'est JavaScript.
Son PHP est exécuté pour nous donner ce type de site que nous voyons.
Et il est créé un fichier HTML, certains JavaScript, CSS et certains.
Et c'est maintenant accessible par notre ordinateur.
>> Et une copie de ces fichiers est enregistrée localement sur votre ordinateur,
pour le moment.
Donc, nous pouvons modifier cette copie locale.
Mais bien sûr, nous ne sommes pas l'édition la copie sur le serveur.
>> Et quand nous rafraîchir la page, nous obtenons une autre copie sur le serveur.
Et si nous voyons les choses comme ils étaient.
Si nous étions en mesure, d'ici, de modifier le site officiel, nous aurions beaucoup
de problèmes.
>> PUBLIC: Oui, nous pouvons lire et d'écrire cette copie.
>> JASON HIRSCHHORN: Droit.
Nous ne faisons que faire des changements locaux ici, mais encore une fois, très utile pour explorer,
souvent.
Quand j'écris mon projet final, pour exemple, je veux voir comment certains
site réalisé quelque chose de regard la façon dont ils l'ont fait.
Je vais y aller et utiliser ce volet en bas ici, à regarder ce qu'ils ont donné à CSS
ou de quelle couleur ils ont choisi ou comment ils obtenu en sorte que, lorsque vous plané
sur quelque chose, la liste est descendu dans un joli mode cascade.
C'est un excellent moyen de contrôler ce que les autres sites font et empruntent eux.
>> Passons à PHP.
PHP signifie, dans un sens récursif, Processeur PHP Hypertext.
Et PHP, ce qu'il va faire est exécuter côté serveur de code.
Donc, nous n'allons jamais voir le code PHP.
>> Cependant, il ne joue bien avec HTML et génère souvent
beaucoup de code HTML.
Mais comme vous serez familiarisé avec le problème Set 7, votre code PHP exécutera,
générer du code HTML, et c'est ce que l'utilisateur finira par voir.
>> PHP est incroyablement similaire à C. Cependant, il ya un couple de
différences et ces différences sont à noter.
Une différence est que les variables en PHP sont faiblement typé.
Quelqu'un at-il un sens de ce que cela signifie?
>> PUBLIC: Pas besoin de le lancer vous-même.
Comme aucun besoin d'écrire dans le texte.
>> JASON HIRSCHHORN: Je ne voudrais pas utiliser le mot coulé, mais oui, pas besoin de déclarer
un type à une variable particulière.
Comment la place ne nous déclarons une variable?
>> PUBLIC: Utilisez un signe de dollar.
>> JASON HIRSCHHORN: Utilisez un signe de dollar.
Donc $ x est une variable.
$ 1 est une variable.
$ String est une variable.
>> Les variables $ x pourrait être un nombre entier.
Ensuite, il pourrait s'agir d'une chaîne.
Ensuite, il pourrait s'agir d'un caractère.
Il n'a pas vraiment d'importance.
>> En outre, la chose cool à propos de PHP est, par exemple, $ x est une chaîne de caractères.
Et $ y est le personnage d'un.
Vous pouvez ajouter $ x et $ y, et il va vous donner 2, ce que vous attendez.
Donc, il ya des opérations en PHP.
Parce qu'il est lâche variables typées, certains conversion implicite est fait pour vous
et certaines opérations.
>> Vous pouvez effectuer des opérations sur des choses de différents types.
Alors qu'avant, vous obtenez souvent une erreur en C dit, ce n'est pas le type
qui est censé aller ici.
Seuls les choses de ce type peuvent aller ici.
Tu ne vas pas à obtenir ce type de l'erreur, en général, en PHP.
C'est donc une grande différence - la façon dont nous traitons avec des variables.
>> La deuxième grande différence est que le code PHP est interprété.
Où est, le code C est compilé.
Qu'est-ce que ça veut dire?
>> Eh bien, pour le code C vous avez exécuté à travers un compilateur.
Vous avez généré un fichier binaire.
Et vous avez exécuté ce fichier binaire.
Vous avez pris soin de toutes les erreurs avant vous avez généré le fichier binaire.
>> Bien sûr, il y aurait eu segmentation défauts, lorsque vous avez exécuté l'
fichier binaire.
Mais ce n'est pas comme vous avez oublié d'inclure la définition de printf, ou
vous n'avez pas utilisé une variable et juste créer une variable de gaspillage.
Ou vous n'avez pas défini une prototype de fonction.
>> Tout ce qui s'est passé avant vous avez compilé.
Il vous a donné toutes les erreurs ou mauvais les choses qu'il pensait peut arriver.
Et puis, vous avez eu votre 0 et 1 fichier que vous avez exécuté.
code PHP ne fonctionne pas comme ça.
>> Vous allez écrire votre code PHP.
Ensuite, vous allez enregistrer, sans doute.
Et au moins P-Set 7, vous allez pour rafraîchir votre navigateur, et
vous allez voir ce qui s'est passé.
Vous allez voir le résultat de ce code PHP.
>> Vous pouvez également voir, en haut de votre page, une erreur.
Parce que vous aviez une certaine erreur dans votre PHP.
Vous pouvez toujours voir le reste de la page web est à la recherche amende.
Mais une partie est mal, et il est une erreur à cet endroit.
Et c'est parce que cette partie de votre code PHP ne fonctionne pas.
>> En effet, lorsque vous exécutez, lorsque vous aller à quelque chose comme by.php.
Il va passer par votre PHP déposer ligne par ligne et l'exécuter
alors et seulement alors.
Il ne va pas à compiler avant de temps ou de compiler une copie puis donner
que compilé copie à tout le monde.
Chaque fois, il va passer par ligne par ligne et l'exécuter.
>> Ainsi, certaines lignes peuvent travailler et afficher quelque chose de correct.
Et d'autres lignes pourraient être cassés et la sortie d'erreur à la place.
Ainsi, lorsque le débogage avec PHP, nous avons donné vous une ou deux choses utiles
pour vous aider à déboguer, comme la fonction de vidage.
>> Mais en général, vous allez pour voir ces erreurs.
Et c'est comme ça que vous allez savez que vous avez fait quelque chose de mal.
Mais vous allez seulement à voir l'erreur une fois que vous exécutez le code en fait.
>> Un autre aspect important de PHP et le développement web est l'idée de get
par rapport à la poste.
Quelqu'un peut-il expliquer ce que la différence entre GET et POST sont?
Personne -
Oui.
>> PUBLIC: Ne pas l'un d'eux permet à l'utilisateur de voir les données,
et l'un d'eux ne fonctionne pas?
>> JASON HIRSCHHORN: Très bien.
Ouais, avez-vous quelque chose à ajouter?
>> PUBLIC: Je poste mince est une la variable super-globale.
>> JASON HIRSCHHORN: Donc, ces deux variables sont donnés à vous.
Ce ne sont que des variables.
Et vous savez qu'ils sont les variables, car ici je
utiliser le signe dollar.
>> Ce sont des variables données à vous par PHP.
Et quand vous vous déplacez entre les pages Web, vous voulez économiser de l'information.
Vous voulez probablement sauver si l'utilisateur est connecté po
Ce n'est pas sauvé GET et POST.
Cela enregistrées dans quelque chose d'autre, une variable différente.
>> Quelqu'un sait ce que la variable qui est sauvé , ou ce que vous utilisez dans la variable
P-Set 7, pour s'assurer que l'utilisateur est connecté?
$ _SESSION, C'est exactement ça, probablement important de se familiariser avec
les noms de ces choses vous utilisez souvent.
>> Donc, vous utilisez la variable de session pour sauver informations de page en page.
C'est une variable superbe.
Il existe sur chaque page, peut-être comme un variable globale, si vous voulez penser
à ce sujet comme ça.
>> Il ya un couple d'autres variables qui vous permettent de transférer des informations
de page en page.
En particulier, ceux que nous allons nous concentrer sur sont l'EEG et les variables de POST.
En PHP ils ressemblent $ _GET Et $ _POST.
Et la différence, comme Marcus a rupture, entre les deux d'entre elles est que,
informations dans $ _GET est affiché dans l'URL.
>> Donc, si nous regardons ici, nous voyons un lien YouTube.
Nous voyons cette interrogation.
Nous voyons v = puis une certaine valeur.
Retour à cette idée de la valeur de clé paire, le v est la clé.
Et ici est la valeur.
>> Donc, si nous devions aller à cette page ou codage sur cette page, nous aurions une
variable nommée $ _GET.
Si nous sommes allés à $ _GET parenthèse ouverte "v" ferme la parenthèse, très similaire à tableau
notation, il s'agit d'un tableau associatif parce que nous ne sommes pas en utilisant des indices.
Ont été en utilisant des chaînes comme clés.
Mais l'idée très similaire.
Si nous sommes allés nous, serait obtenir cette valeur.
>> Sur cette page, nous serions en mesure d'utiliser cette valeur.
Si nous regardons en fait, nous allons aller à une page YouTube.
Que devrions-nous regarder la vidéo?
Celui-ci, sont des gens Hobbit fans?
>> PUBLIC: Oui.
>> JASON HIRSCHHORN: Donc, je copie leur URL de part et
coller dans une nouvelle fenêtre.
Et maintenant, si vous regardez ici, vous aurez remarquer que, une fois de plus -
Je vais copier et coller dans gedit, afin que nous puissions voir en plus grand.
Vous remarquerez qu'il a ce point d'interrogation.
Le point d'interrogation désigne que tout après cela va être
enregistré dans la variable get.
>> Il a alors le v, c'est la première clé et cette première valeur.
Ampersand est spécial.
Ampersand dit, OK, nous terminer la première valeur.
Nous allons maintenant passer à un autre paire de valeur de la clé.
Ici, la clé est appelée fonction, et la valeur est youtu.be.
>> Donc, si j'étais un codage cette page et quelqu'un est allé à cette URL et j'ai eu
peut-être watch.php.
Et je codais cela.
Et je pourrais utiliser la variable $ _GET.
Et j'aurais un v, et Je voudrais avoir une fonction.
>> Et si j'utilise la touche v, je obtiendrait cette valeur.
Et si je faisais $ _GET support "caractéristique" ferme la parenthèse, je obtenir cette valeur.
Encore une fois, cela ne signifie pas nécessairement s'appliquer à -
évidemment, les clés et les valeurs YouTube et obtenir des informations ne s'applique pas aux
notre problème Set 7.
Mais il ya certaines choses que nous passer par EEG dans notre problème Set 7.
Et certes, quand vous allez à une page Web ou sont coder votre propre page, le
$ _GET Vous sera utile lorsque votre codage.
>> Ce qui est une raison d'utiliser $ _GET alors, si elle n'offre aucune intimité?
Vous voyez toutes ces informations C'est en cours de transfert.
Tout est affiché à l'utilisateur.
Mais ce qui est l'une des raisons que vous pourriez vouloir sauver quelque chose dans $ _GET, comme
opposition à $ _POST?
Pourquoi pourriez-vous faire cela?
>> Très bien.
Je vous ai demandé dans Quiz 1.
Quel est le pro de $ _GET?
Qu'est-ce que c'est un pro?
Oui -
>> PUBLIC: Il est plus facile de partager l'information.
>> JASON HIRSCHHORN: Je pense que c'est très bien.
Il est plus facile de partager des informations.
Il est plus facile de mettre en signet.
>> Vous pouvez marquer maintenant, YouTube.com / watch v = quelque chose? Et aller
à cette vidéo spécifique.
Si YouTube a toujours fait des requêtes POST à différentes pages, toutes les URL YouTube
serait YouTube.com.
Vous ne pouviez pas mettre en signet une seule vidéo.
Parce que si vous dites partagé ce lien avec quelqu'un d'autre, ils ne le font pas
obtenir automatiquement la variable de poste.
Ils sont juste de ce lien, et la lien est le même pour tout le monde.
>> Donc, c'est un pro.
Il vous permet de marquer cette informations ou partager cette information
ou faire un peu plus convivial.
Bien sûr, il n'ya pas de vie privée, nous avons donc cette variable de poste.
Et des informations de poste n'est pas affiché dans l'URL.
>> Ce n'est pas tout à fait privé.
Mais il est légèrement plus privé.
Et si vous voyez cette URL ici, cs50.net.
Que vous soyez ou non connecté au site, il va avoir la même
URL, cs50.net.
>> De toute évidence, quelque chose est différent, si vous êtes connecté au site.
Vous avez, un, probablement entrer votre code PIN.
Et il a confirmé que avec le serveur.
Et c'est probablement sauver certaines autres informations.
Mais l'URL ne change pas du tout.
>> Et si c'est le cas, quand quelque chose est envoyé par la poste.
L'URL ne change pas.
Cette information n'est pas POST affiché dans l'URL.
Mais un état a changé, et peut-être il ya des informations enregistrées dans le
Variables POST.
>> Désolé. avant d'entrer dans SQL, tout questions sur PHP, en particulier,
questions sur des choses que nous ne vont pas plus que vous avez trouvé ou aucune syntaxe ou
des questions de logique sur PHP?
OK.
>> Le texte final vous serez interagir avec cette semaine est la
Structured Query Language, SQL, prononcée suite souvent.
Cela vous permet d'interagir avec le base de données d'une manière formalisée.
Et il joue très bien avec PHP.
>> Comme vous le verrez dans le problème Set 7, nous avons vous a donné une fonction appelée requête.
Et il faut une chaîne SQL et exécute cette requête sur la base de données.
Dans les années passées, vous n'étiez pas donné cette fonction.
Vous avez eu à utiliser les fonctions PHP pour faire la requête sur la base de données et le contrôle
pour les erreurs et obtenir des résultats.
>> Et en fait, ce n'est pas si difficile, car encore une fois, il joue
très bien avec PHP.
Et PHP vous donne beaucoup de fonctions pour interagir avec une base de données SQL.
Trop souvent, les deux ceux-ci vont de pair.
Bien sûr, vous pouvez interagir avec la base de données SQL avec une
certain nombre d'autres langues.
Mais PHP est un grand choix.
>> Une base de données -
nous allons passer en revue ce rapidement, car c'est un mot à la mode, nous allons
commencer à utiliser souvent -
est une collection de tables.
Nous pouvons donc penser dans un fichier Excel.
Un fichier Excel a plusieurs onglets sur le bas de l'écran.
Chaque onglet nous allons maintenant appeler une table, où une table est une collection de lignes.
>> Et ce qui est une rangée?
Eh bien, une ligne est la même chose dans le fichier Excel.
Qui vient de certaines valeurs pour chaque domaine donné ou chaque colonne donnée.
C'est comme une entrée dans la table.
C'est un étudiant, qui a une identité, une ID spécifique, et un nom spécifique et un
Maison spécifique.
>> Ainsi, une base de données est une collection des tables.
Et tables elles-mêmes sont un nombre de lignes ou de dossiers.
Il existe aussi, dans chaque table, certains champs.
Et qui spécifie ce que chaque enregistrement est devoir, parfois appelés champs
colonnes mais généralement appelées champs.
>> Dans ce tableau très simple, j'ai trois champs, un champ ID, un nom d'utilisateur
champ, et un champ de hachage.
Et j'ai trois lignes.
À l'heure actuelle, elles sont vides.
Ils ne seraient probablement pas vide si c'était ma vraie base de données.
>> Donc, si vous avez utilisé Excel, idée similaire à ce que vous faites dans Excel, même si,
évidemment, maintenant nous allons être en mesure de faire des choses beaucoup plus puissants sur le
l'information qui est stockée dans notre base de données.
Vous créez vous-même un base de données pour un problème Set 7.
Mais vous allez créer multiple tables dans la base de données.
>> Vous allez créer une base de données ou une table pour les utilisateurs.
Vous serez également en train de créer une table pour probablement les transactions boursières, de garder
une trace d'eux, parce que vous devez mettre en œuvre une fonction de l'histoire.
Ces deux tables auront différents domaines.
Par exemple, dans un domaine d'utilisateur, souhaiterez probablement leur nom d'utilisateur et un
ID et un hachage du mot de passe.
>> Dans le tableau des stocks qui permet de suivre l'histoire ou la table de l'histoire, vous
probablement pas besoin du nom d'utilisateur et le hachage et l'ID.
Vous avez probablement besoin d'un seul de ceux valeurs qui sont uniques, d'associer
par un utilisateur donné.
>> Mais alors, vous souhaitez stocker d'autres des choses comme, ce temps
a été faite transaction.
Quel magasin a été acheté ou vendu?
Combien de parts des actions a été acheté ou vendu?
Quel était le prix auquel le actions a été acheté ou vendu?
>> Encore une fois, vous allez être en interaction avec des bases de données qui est
va avoir plusieurs tables.
Chaque table va avoir son propre ensemble de champs.
Cependant, il y aura probablement une semblable domaine dans chaque tableau, que
les relie les uns aux autres.
Habituellement, il s'agit d'un champ ID.
>> Parce que si chaque utilisateur possède un ID unique et que vous associez à chaque ID
opération qui permet l'utilisateur ou toute l'histoire de cet utilisateur.
Et vous avez l'ID de l'utilisateur.
Vous pouvez obtenir des informations d'une seule table.
Vous pouvez obtenir un nom d'utilisateur, et vous peut obtenir l'ensemble de leurs opérations.
>> Une question sur les bases de données, ou des questions spécifiques?
En fait, nous allons tenir que.
Nous y serons dans deux côtés.
>> Donc, il ya quatre opérations sur les bases de données que vous allez utiliser dans
Problème posé 7 et susceptible jamais être utiliser.
La première chose que vous voulez faire est d'insérer un nouvel enregistrement dans une table ou un
nouvelle ligne dans une table.
Il s'agit de la fonction générique, l' forme générique, de cette requête SQL.
>> Insérer dans la table, quelle que soit colonnes vous souhaitez insérer, puis
les valeurs que vous allez vouloir mettre dans ces colonnes ou des champs.
Si vous avez plusieurs tables dans un base de données ou plusieurs bases de données, vous
pourrait également avoir besoin de spécifier la base de données et la table que vous voulez
à mettre les choses en.
Mais très simple, si vous voulez insérer en quelque chose, dites-vous, voici le
domaines que je veux insérer dans.
Et voici les valeurs.
>> Dans certains tableaux, aussi, et cet utilisateur de table est un bon exemple.
Probablement dans le tableau de cet utilisateur et probablement dans la table de votre utilisateur P-Set
7, il n'y a pas seulement une valeur de nom d'utilisateur.
Il n'est pas seulement une valeur de rachat, ou sur le terrain, plutôt.
Il existe également un champ d'ID.
>> Je ne vais pas à insérer ce champ ID.
Cela va être donné à me automatiquement, lorsqu'un
nouvel enregistrement est inséré.
Donc, il ya un domaine que vous peut configuré pour être automatique.
>> Peut-être que vous voulez donner à chaque utilisateur $ 10,000 d'argent au large de la chauve-souris.
Je n'ai donc pas besoin d'insérer un certain nombre d'espèces ici.
Tout ce que je besoin d'insérer est le nom d'utilisateur.
Et puis, le champ de trésorerie sera pré-rempli, et le champ ID sera
être pré-peuplée.
>> Donc, souvent, nous ne sommes pas l'insertion quelque chose dans tous les domaines, car
les autres champs sont pré-remplies.
Parce que c'est la façon dont nous mettre en place cette table.
>> La deuxième chose que vous allez voulez faire est de supprimer un enregistrement.
Suppression quelque chose est très simple.
Vous donnez la table où vous voulez de supprimer quelque chose.
Et vous dites, OK, je veux supprimer la enregistrement qui possède un nom d'utilisateur de Milo.
Ou je veux supprimer tous les enregistrements avoir un nom d'utilisateur de Milo ou qui étaient une
transaction de l'ID utilisateur numéro 2.
Toutes les questions sur les deux types de requêtes?
>> PUBLIC: [inaudible].
>> JASON HIRSCHHORN: Oui.
Donc, je vais utiliser la ligne et enregistrer et une partie interchangeable
avec la colonne et le champ.
Mais une rangée est un enregistrement.
Une colonne est un champ, d'aller revenir à ce tableau.
>> OK.
La prochaine chose que vous êtes probablement aller à faire est d'obtenir une certaine
informations de la table.
C'est une requête de sélection.
Et encore, ce tableau je choisissais de?
Et ce que je veux colonne pour sélectionner ou quelle est la valeur que je veux pour sélectionner et
de quelle ligne?
>> Ainsi, le Select est un peu spécifique.
Je dis, OK, je veux ce tableau.
Et puis je veux que le nom d'utilisateur de la colonne, et Je veux de la ligne avec l'ID 2.
C'est une façon de faire une sélection.
>> Ou je peux dire, me donner tous les nom d'utilisateur unique.
Ou je peux dire, me donner une toute rangée de ce tableau, où
le nom d'utilisateur est 1.
Donc, il ya un couple de différentes manières à faire requêtes de sélection, en fonction de la façon dont
autant d'informations que vous voulez,
>> Vous pouvez toujours sélectionner tout de cette table spécifique, puis boucle
à travers elle, la cueillette les choses que vous voulez.
Mais gardez à l'esprit, si vous sélectionnez beaucoup de choses à partir d'une table et vous
avoir une très grande table, qui aura un certain temps, donc c'est mieux de ne sélectionner que
choses que vous allez pour finir par utiliser.
>> En outre, avec Select et avec tous ces d'autres commandes SQL ainsi, je suis
vous donnant la version dépouillée.
Mais dis, je sélectionne les utilisateurs et je veux de les imprimer par ordre alphabétique,
Je pourrais sélectionner tous les utilisateurs et puis trier les par ordre alphabétique dans mon code.
>> Ou il ya une façon d'écrire la sélection requête, qui sélectionne les choses dans un
mode alphabétique, basé hors d'un colonne spécifique, par ordre croissant ou
décroissant.
Donc, gardez à l'esprit que, beaucoup de ce que vous vouloir faire peut probablement être fait en
la requête par un montant supplémentaire de attribuer.
Donc, ne rechercher ces requêtes en ligne ou les autres choses que vous pouvez faire avec ces
requêtes pour en élargir la portée.
>> Enfin, la dernière chose que vous voulez faire est pas insérer quelque chose ou supprimer
quelque chose, mais plutôt mettre à jour quelque chose.
Et ce qui est fait avec la mise à jour requête, et encore, ce tableau.
Et ce changement que je veux faire?
Et à quelle ligne ou l'enregistrement ne Je veux faire ce changement?
Toutes les questions sur SQL?
>> OK.
Donc, nous avons environ 15 minutes.
Et c'est la dernière diapositive que j'ai.
Et nous espérons que, cette dernière diapositive est une bonne transition dans le problème réglé,
parce que la compréhension que nous voulons insérer des enregistrements, les supprimer, sélectionnez
eux, et les mettre à jour vont nous aider comprendre la logique plus large et de débit
du problème Set 7.
>> Donc, je sais toutes les réponses à ces questions.
Je ne vais pas vous dire toutes les réponses.
Mais si quelqu'un d'autre voudrait présenter une question au groupe ou un
répondre à l'une de ces questions, nous pouvons l'utiliser comme un point de sauter
parler de l'ensemble des problèmes.
Ou si quelqu'un a un plus générique question de l'ensemble des problèmes, n'hésitez pas
n'hésitez pas à demander aussi.
Et nous pouvons commencer par là.
Gardez à l'esprit que vous être silencieux est mal tout le monde.
Ouais.
>> PUBLIC: Alors, le seul moyen de passer variables et de différentes web
pages, ou le plus commode Ainsi, en utilisant POST ou GET?
>> JASON HIRSCHHORN: Alors oui, c'est la façon la plus commode de dire - quand
quelqu'un remplit un formulaire -
obtenir des informations sur un autre web la page, en utilisant la méthode GET ou POST.
Parce que le cadre nous utilisons dans ce jeu de problème, vous remarquerez
que, un grand nombre de fois, nous rendre une autre page.
Ou nous nous rendons dans un autre fichier, pas nécessairement une autre page.
>> Donc, nous passons dans une variable.
Et puis, il rend une page HTML en utilisant l'
l'information de cette variable.
Cela ne passe pas techniquement informations entre
différentes pages web.
Qui passe l'information entre les différents fichiers.
>> Et si nous pouvons utiliser n'importe quel variable pour le faire.
Mais oui, si nous voulions passer informations à partir d'une page en particulier à
une autre page, GET et POST serait être la façon de le faire.
D'autres questions sur le problème réglé?
>> OK.
Passons en revue, puis, un spécifique partie du problème réglé.
Vous allez avoir besoin de, à un moment donné, afficher le portefeuille de quelqu'un sur
l'écran.
Qu'est-ce que je veux dire quand je dis portefeuille, dans le contexte de ce problème posé?
>> PUBLIC: C'est comme les actions qu'ils avoir faire, de nombreuses actions dont ils sont propriétaires,
le prix, et le montant l'argent qu'ils ont quitté.
>> JASON HIRSCHHORN: Cela sonne bien.
Je tiens donc à afficher tous les stocks qu'ils possèdent pour chaque stock de l'entreprise
actions et probablement combien c'est valeur, puis une variable distincte,
combien d'argent qu'ils possèdent.
Alors dis que je veux décrire cela.
Commençons à parler de comment je pouvais s'y prendre, quelles sont les tables que je suis
allez avoir besoin d'avoir à être en mesure de le faire.
Oui -
>> PUBLIC: utilisateurs bien, et puis, je suppose vous pouvez faire une table appelée
Actions ou quelque chose comme ça, qui serait combien ils ont acheté.
>> JASON HIRSCHHORN: OK.
Donc, je vais avoir besoin d'une table appelée Les utilisateurs, qui assure le suivi de la
nom d'utilisateur, sans doute, probablement une pièce d'identité, probablement le mot de passe d'un individu.
Qu'est-ce que quelque chose d'autre que vous juste dit que c'est associé?
Quelqu'un d'ailleurs Michael, ce qui est autre chose qui est associé à
chaque utilisateur, unique pour eux?
>> PUBLIC: ID.
>> JASON HIRSCHHORN: ID -
ce qui est une autre chose que nous sommes probablement vouloir à
afficher sur cette page?
>> PUBLIC: Leur nom.
>> JASON HIRSCHHORN: Leur nom - ce qui est une autre chose se rapportant à ce
problème particulier mis en?
>> PUBLIC: Qu'est-ce que les stocks qu'ils détiennent -
>> JASON HIRSCHHORN: Il va y être beaucoup de ce que les stocks qu'ils possèdent.
Quelle est la valeur d'un bien spécifique, qu'ils vont avoir
qui leur sont associés?
Comment vont-ils acheter et de vendre leurs stocks?
>> PUBLIC: Cash.
>> JASON HIRSCHHORN: Ils sont va avoir de l'argent.
Ainsi, chaque utilisateur va avoir une valeur de l'argent.
Et cela va être unique à chaque utilisateur.
Ainsi, dans la table de l'utilisateur, il est sens de mettre en numéraire.
>> Vous pouvez, bien sûr, créer un autre table qui a des identifiants d'utilisateur et de leur
valeur de la trésorerie.
Mais il n'a pas de sens.
Il est logique de mettre juste tout cela dans un tableau.
>> Donc, nous allons avoir une table avec cette information.
Et puis, ce qui est l'autre table nous allons avoir?
Vous avez dit, une table de stocks.
Que mettons-nous dans la table sur les stocks?
Toute personne, les idées -
>> PUBLIC: La société.
>> JASON HIRSCHHORN: Nous allons à mettre dans le nom de l'
entreprise, afin AAPL pour Apple.
Ouais.
>> PUBLIC: Combien d'actions et combien ils valent.
>> JASON HIRSCHHORN: Combien d'actions, combien ils valent -
ce qui est autre chose que nous besoin dans ce tableau?
>> PUBLIC: Un ID utilisateur à indexer.
>> JASON HIRSCHHORN: Un ID de l'utilisateur.
Donc, dans ce tableau, nous allons ont probablement -
disons, si c'est quelqu'un qui possède trois actions, trois rangées, chacune avec
que ID utilisateur ou l'utilisateur de cette personne ID, mais un nom de société différent, un
nombre différent d'actions vraisemblablement, et une valeur différente de prix pour chaque
de ces stocks.
Encore une fois, ce que je dis maintenant n'est pas nécessairement la mise en oeuvre,
parce que vous vous rendez compte il ya un peu plus des moyens efficaces pour la mettre en œuvre.
Mais c'est un bon endroit pour commencer.
>> OK.
Ce sont donc les deux tables que nous avons.
Maintenant, nous voulons afficher cette page.
Qu'est-ce que le premier type de requête nous aurions besoin de faire.
Sur chaque page, suppose que c'est un utilisateur est connecté, nous avons leur ID utilisateur.
Alors, quel est le premier type de requête que nous devons faire?
Ouais.
>> PUBLIC: Leur ID utilisateur.
>> JASON HIRSCHHORN: Nous avons leur ID utilisateur, quand nous commençons à code à l'
à partir de notre page.
Alors, quel est le premier type de requête nous besoin de faire, compte tenu de l'ID d'un utilisateur?
Nous sommes allés au cours des quatre types.
Il ya seulement quatre réponses possibles.
>> PUBLIC: Il est de sélectionner un dossier.
>> JASON HIRSCHHORN: A Sélectionnez -
nous voulons sélectionner le mode de table pour obtenir, disons,
leur montant d'argent.
Et nous pouvons imprimer le montant d'argent sur le haut de l'écran.
OK.
Quel est le prochain type de requête que nous voulons faire?
>> Nous avons d'autres choses nous devons afficher.
Ceux-ci sont enregistrées dans une autre table.
Alors, comment allons-nous faire cela?
>> PUBLIC: Vous choisissez pour eux.
>> JASON HIRSCHHORN: A Sélectionnez - encore une fois, il n'y a que quatre options.
Sélectionnez probablement sons comme la bonne.
Nous devons donc faire une autre requête de sélection, à nouveau en utilisant cet identifiant.
Et maintenant, nous voulons revenir non seulement un rangée, bu toutes les lignes qui correspondent à notre
critères, où l'ID utilisateur est égal à 1.
>> Et puis nous pouvons aller et laisser une boucle juste imprimer tous ceux sur l'écran,
peut-être imprimer la société de chacun de ceux sur l'écran.
Grande, qui sonne comme c'est l'affichage d'un portefeuille, pas beaucoup plus
compliqué que cela.
>> OK, l'utilisateur décide alors qu'ils ont beaucoup d'argent qui reste.
Et ils veulent acheter des plusieurs actions d'un stock.
Disons, qu'ils possèdent déjà stock trop de cette société.
>> Alors, ils vont à votre page d'achat.
Ils entrée le nom de l'entreprise.
Quelle est la requête, après l'entrée de la le nom de l'entreprise, que vous devez
exécuter prochaine?
Ouais.
>> PUBLIC: mise à jour.
>> JASON HIRSCHHORN: Mise à jour - et ce Table voulez-vous mettre à jour?
>> PUBLIC: Leur table, sur la base leur numéro d'identification?
>> JASON HIRSCHHORN: Donc, mettre à jour pas de table de l'utilisateur -
afin de mettre à jour le tableau des stocks, où la ID utilisateur non seulement correspond, mais la
Nom du stock correspond également.
Vous aurez une certaine valeur.
Et puis, vous aurez envie de prendre cette valeur et ajouter cependant beaucoup de stocks, ils
envie d'acheter de lui.
>> Donc, vous ne voulez pas aveuglément remplacer cette valeur.
Mais vous pouvez, en effet, prendre cette première valoriser et juste mettre à jour.
Vous pouvez faire comme un plus égale, plutôt que seulement un signe égal.
>> Qu'est-ce que c'est quelque chose que - si nous sommes penser à ce sujet et nous voulons être
aussi robuste que possible - nous devons faire avant de courir cette mise à jour requête?
Ils veulent acheter cinq années d'Apple.
Chaque action d'Apple est de 200 $.
>> PUBLIC: Nous devons vérifier l'argent d'abord.
>> JASON HIRSCHHORN: Nous devrions vérifier d'abord l'argent.
Nous devons nous assurer qu'ils avoir assez d'argent.
Quel type de requête que nous pouvons exécuter pour s'assurer qu'ils ont assez d'argent?
>> PUBLIC: Un autre Select.
>> JASON HIRSCHHORN: A Sélectionnez -
nous sélectionnons en fonction de leur ID utilisateur, pour obtenir leur valeur en espèces.
Faire un rapide calcul.
Et si cela passe Muster, ils ont assez d'argent.
Ensuite, nous pouvons exécuter notre mise à jour.
Ou peut-être, sinon, on passe alors.
Nous leur donnons un avertissement.
>> OK.
Dire qu'ils n'ont pas une entreprise.
Ils achètent une nouvelle société.
Ils achètent Microsoft.
Quel genre de questions que nous voulons faire, si ils veulent acheter Microsoft?
Et ils ne possèdent pas de Microsoft.
Non Manu, quelqu'un d'autre, quelqu'un outre Marcus?
Carlos -
>> PUBLIC: Un Select, pour s'assurer ils ont assez d'argent.
>> JASON HIRSCHHORN: Ça sonne bien.
>> PUBLIC: Et puis vous insérez sur la [inaudible].
>> JASON HIRSCHHORN: Exactement, nous sommes allez vouloir insérer
dans la table des stocks.
Et nous allons vous souhaitez insérer.
Nous pouvons insérer leur nom d'utilisateur, le nom de la société, et le nombre d'actions
qu'ils veulent acheter.
>> Quelles sont les autres activités que des pages ou fonctionnalités que vous êtes
allez avoir à mettre en œuvre dans P-Set 7, que nous devrions aller plus?
>> PUBLIC: En fait, je n'ai type de une question sur celui-ci.
Avant d'afficher le portefeuille, devrait vous vérifie dans le site Web de Yahoo à
faire en sorte que les prix des actions n'ont pas changé?
>> JASON HIRSCHHORN: C'est sons comme une bonne idée.
Alors, que Marcus disons c'est OK, magasin les prix sont en constante évolution.
Dans les actions dont ils sont propriétaires table, notre table appelée stocks, nous pourrions économiser l'
prix de l'action, ils acheté à.
>> Mais cela ne semble pas que robuste, parce que le prix de l'action est
aller constamment de changer.
Donc, en fait, vous n'avez probablement pas besoin pour enregistrer le prix de l'action.
Mais chaque fois que vous affichez leur portefeuille, vous rafraîchir ou d'actualiser le
prix de l'action.
>> Et si vous avez - et vous avez déjà.
Je sais que vous avez tous regardé dans le problème définit déjà de retour.
Vous avez compris que nous avons écrit du code pour vous qui vous permettra
pour obtenir le prix d'une action, donné le nom d'une entreprise.
>> Alors oui, ça sonne probablement un peu plus robuste.
Mais ce tableau ne doit pas nécessairement pour enregistrer le prix de l'action.
OK.
Quels sont les autres fonctionnalités vous besoin pour mettre en œuvre cette semaine
nous pouvons parler?
Je veux en parler.
>> Que voulez-vous parler?
C'est probablement dans cette spécification.
Je voudrais simplement faire défiler vers le bas de la spécification et me demander le premier mot
vous voyez cela n'a pas de sens.
Une autre fonctionnalité -
Parlons un.
Nous allons commencer par là.
>> PUBLIC: Enregistrement des histoires.
>> JASON HIRSCHHORN: Enregistrement l'histoire, grand.
Donc, vous allez avoir à garder une trace d'un historique des transactions.
Donc, vous voulez garder une trace de tous les fois qu'ils achètent ou vendent un stock.
>> J'ai acheté mon stock.
Nous avons simplement dit, il est sans doute logique d'inclure un Select, pour obtenir leur
montant de la trésorerie et revenez.
Il est probablement intelligent alors d'inclure un insérer ou une mise à jour, en fonction de
si oui ou non ils possèdent ce stock.
Si nous voulons aussi garder une trace de une histoire, comment pouvons-nous faire?
Est-ce que aller dans le tableau sur les stocks?
>> PUBLIC: Non
>> JASON HIRSCHHORN: Non, il probablement va dans une autre table.
Parce que dites vous achetez 10 part d'Apple.
Ensuite, vous achetez 10 autres actions.
Vous voulez remorquer des registres distincts.
Ce sont deux opérations distinctes.
>> Donc, nous avons une autre table, une table de l'Histoire.
Encore une fois, nous achetons.
Nous exécutons un Select, puis une insertion ou une mise à jour.
Que faisons-nous maintenant?
Quelle est la prochaine requête, nous exécutons quand nous achetons quelque chose?
Nous voulons garder une trace de l'histoire.
Ouais.
>> PUBLIC: Vous voulez garder une trace de pas trop transactions.
>> JASON HIRSCHHORN: Eh bien, avant que nous dire ce type de transaction,
qu'est-ce que nous voulons -
Quel type de requête, Carlos, serait nous permettent de garder une trace
des choses en général?
Vous disposez de quatre suppositions.
Lequel pensez-vous?
>> PUBLIC: mise à jour.
>> JASON HIRSCHHORN: Non jour.
Quel est votre deuxième conjecture?
>> PUBLIC: Sélection.
>> JASON HIRSCHHORN: Si vous voulez garder piste de quelque chose, vous voulez probablement
à écrire quelque part ou l'enregistrer pour plus tard.
Donc, si pas à jour, alors -
>> PUBLIC: Insérez.
>> JASON HIRSCHHORN: Insertion, il nous aller.
Oui, si vous sélectionnez le montant de argent qu'ils ont, semble très bien.
Ils n'ont pas assez d'argent.
Cette opération ne va pas fonctionner.
Non, vous n'avez pas besoin de garder une trace de une transaction si elle ne fonctionne pas.
Ou vous pouvez, si vous voulez leur donner un moment difficile.
Mais vous n'avez pas à.
>> Ensuite, vous insérez ou mise à jour dans leur tableau des stocks.
Et maintenant, vous avez votre autre table.
Vous avez votre table ou de l'histoire tout ce que vous voulez l'appeler.
Et dans ce tableau, vous allez pour insérer une nouvelle ligne.
>> Cela va probablement disposer l'ID de l'utilisateur.
Il va probablement avoir le nom de l'action.
Il va probablement avoir une fois qu'ils l'ont fait.
Et dans ce cas, vous aurez probablement vous souhaitez insérer le prix.
Parce que pour une histoire, vous n'avez pas soin ce que le prix actuel.
Vous vous souciez ce que le prix est quand ils ont acheté ou vendu quelque chose.
>> Ainsi, il semble que, pour mettre en œuvre achat associe pleinement un certain nombre de différents
requêtes SQL, mais honnêtement, pas code qui bien ensemble.
OK.
Et qui prend soin de l'histoire.
>> Disons que nous voulons afficher notre histoire.
Nous avons parlé de l'affichage notre portefeuille.
Comment pourrions-nous voir notre histoire?
>> PUBLIC: On peut supposer que l'ordre chronologique.
>> JASON HIRSCHHORN: Vraisemblablement chronologiquement -
ce requête pensez-vous que nous aurions utilisé?
>> PUBLIC: Un sélectionnez.
>> JASON HIRSCHHORN: Une sélection -
sélectionnez peut-être toutes les lignes de la table qui correspondent à l'ID de l'utilisateur, puis
les afficher par ordre chronologique, sonne bien.
Avons-nous besoin d'écrire du code pour trier cette liste?
>> PUBLIC: Non, parce que vous avez dit nous, il ya un croissant
et descendant chose.
>> JASON HIRSCHHORN: chose?
>> PUBLIC: Ouais.
>> JASON HIRSCHHORN: Ouais.
OK, ne mettez pas dans le code pour moi, trie manuellement dans vos requêtes,
de les trier.
Ce code est déjà donné.
Vous pouvez écrire une requête de sélection qui trie les choses.
Trier à l'avance et puis les imprimer.
Il est tellement plus logique de le faire de cette façon, que dans l'autre sens.
Oui.
>> PUBLIC: Devons-nous les trier à l'avance?
Est-ce que vous voulez dire tri eux dans la base de données?
>> JASON HIRSCHHORN: La requête de sélection les retourne à vous de tri.
Donc le faire, plutôt que de simplement les revenir à vous dans un ordre aléatoire et
puis trier les vous-même.
Ouais.
>> PUBLIC: Est-il un moyen de le garder triés dans la base de données elle-même, de sorte que
vous n'avez pas à trier chaque fois que vous -
>> PUBLIC: Pouvez-vous insérer triés?
>> JASON HIRSCHHORN: Question -
Qu'importe que les choses sont triés dans la base de données?
>> PUBLIC: Non
>> JASON HIRSCHHORN: Eh bien, ils sont triés.
Ils sont classés par ordre chronologique.
Mais supposons que les choses sont triés
chronologiquement, de haut en bas.
Nous avons une forme de Google.
Chaque fois que quelqu'un répond à notre Google former, il vient se mettre dans le
bas de ce tableau.
Est-il important que les choses sont triés chronologiquement?
>> PUBLIC: Si ce n'est pas chronologique, n'avez-vous pas de faire le tri à chaque fois
vous prenez d'informations sur.
Mais si elle est déjà triée, tu ne peux pas ne pas avoir à le faire plus
appel de fonction?
>> JASON HIRSCHHORN: C'est en fait un bon point.
Pour nous, programmeurs, il peut avoir son importance.
Et nous pourrions trouver une base de données qui ne trie pas les choses
chronologiquement.
Ou mettre en place notre base de données, afin qu'il garde les choses triées par ID utilisateur.
>> Donc, de cette façon, par exemple, nous avons 1000 ID utilisateur.
Ou Facebook, nous avons des millions d'ID utilisateur.
Nous ne voulons pas que notre table pour être juste aléatoire ou notre base de données pour être aléatoire.
Ce serait bien si tous les ID utilisateur ont été triés.
Alors nous pourrions effectuer des recherches binaires sur notre table et ensuite trouver le juste
morceau spécifique.
>> Alors oui, en fonction de - si nous avons réduit jusqu'à, nous pourrions trouver une base de données
que les choses gardés triés dans un autre Ainsi, de telle sorte que ces requêtes
prendrait moins de temps.
Et nous n'avons pas eu à passer par notre base de données entière dans chaque rangée dans
une table donnée.
Mais le niveau que nous y travaillons, nous n'ont pas besoin de vous soucier de garder
les choses triées.
Nous pouvons supposer que le temps qu'il faut cette requête à exécuter va être
négligeable, compte tenu de ce nous avons affaire.
Mais oui, bonne idée - que nous extrapoler, il pourrait être judicieux de concevoir notre
base de données dans un peu d'une manière différente.
>> Une conception de base de données dernière chose que je veux parler ainsi, parce que vous voulez
être classé ou inscrit plutôt sur la conception de votre base de données.
Nous en avons parlé.
Cash est unique à chaque utilisateur.
Donc, vous avez une trésorerie de table appelée que a leur ID utilisateur et leur quantité de
trésorerie, puis une table appelée utilisateurs qui a son utilisateur
ID et un nom d'utilisateur.
>> Ces tableaux carte sur chaque autre un-à-un.
Il est probablement raisonnable pour qu'ils soient d'une table.
Donc, supposons que vous avez un utilisateur tableau qui permet de suivre
les noms d'utilisateur et de l'argent.
Vous avez maintenant une table qui a la une personne détient des stocks.
>> Et un individu peut posséder plus d'un stock.
Donc, ceux-ci ne correspondent pas sur chacun un à l'autre.
Il n'a pas de sens d'avoir un géant table qui a 30 enregistrements
tout répéter un nom d'utilisateur, que tous les répéter un mot de passe, que tout
répéter un certain nombre d'espèces.
Mais chacun a peut-être un stock différent nom ou un cours de différent.
>> Il n'a pas de sens d'avoir que de nombreuses grandes enregistrements.
Soyez intelligent sur lorsque vous créez ces bases de données, de sorte que vous ne faites pas
quelque chose de stupide comme ça, répéter beaucoup d'informations inutiles.
>> OK.
Nous avons deux minutes.
Gens de l'extérieur sont très heureux de rejoindre nous ou probablement, sans doute,
démarrer leur propre classe.
Quelqu'un at-il des questions avant que nous finissons?
>> OK, c'était en effet un tourbillon à travers tout.
Je m'excuse qu'il devait être si rapide et que nous ne pouvions pas être aussi pratique sur
cette semaine comme je l'aurais fait aimé être.
Mais si vous avez des questions sur tout ce que nous sommes allés au-dessus ou quoi que ce soit dans
ce problème réglé -
En supposant que vous avez lu et mettez dans un effort de bonne foi -
n'hésitez pas à m'envoyer un email ou contactez-moi.
Je suis plus qu'heureux de travailler par votre code avec vous ou de répondre
questions que vous avez.
>> Gardez à l'esprit que, cette semaine, beaucoup de votre temps sera consacré à l'apprentissage de la
nouvelle syntaxe et d'essayer de comprendre comment écrire des requêtes SQL ou PHP
fonctions ou accord avec un framework MVC.
Une grande partie de votre temps cette semaine probablement ne sera pas à essayer de comprendre la
logique folle que nous sommes vous demande de faire.
Beaucoup d'entre elles nous venons de voir est relativement simple.
>> Donc, cela ne signifie pas attendu jusqu'à la dernière minute.
Mais cela ne signifie ajuster la façon dont vous faites votre travailler en conséquence, pour s'assurer
vous comprendre et l'apprentissage de la syntaxe.
Donc vous n'êtes pas, tout d'un coup, sachant exactement ce que vous voulez faire,
mais avec aucune idée de comment exactement l'écrire.
OK, je vais vous voir la semaine prochaine.