1 00:00:00,000 --> 00:00:11,470 2 00:00:11,470 --> 00:00:12,764 >> SPEAKER 1: Alle, rett velkommen tilbake. 3 00:00:12,764 --> 00:00:14,140 Dette er CS50. 4 00:00:14,140 --> 00:00:16,800 Og dette er starten på uke ni. 5 00:00:16,800 --> 00:00:19,960 Og dette er starten på resten av din tid i CS50, der vi 6 00:00:19,960 --> 00:00:23,170 overgang nå, endelig, til nettet aspektet av kurset, hvor du vil 7 00:00:23,170 --> 00:00:26,200 finne at mye av det grunnleggende at vi har vært eksport i flere uker 8 00:00:26,200 --> 00:00:29,270 fortsatt komme tilbake å besøke, eller tilholdssted, oss. 9 00:00:29,270 --> 00:00:33,440 Men nå, vil du finne at det er en størrelsesorden lettere 10 00:00:33,440 --> 00:00:36,540 utføre visse oppgaver og løse visse problemer - 11 00:00:36,540 --> 00:00:41,050 så mye slik at selv om du trodde visse problem sett var det gøy i sitt 12 00:00:41,050 --> 00:00:44,200 egen måte, tror jeg at du vil finne at p satt 7, satt p 8, og deretter, 13 00:00:44,200 --> 00:00:47,990 til slutt, vil det endelige prosjektet være desto mer gledelig fordi du vil 14 00:00:47,990 --> 00:00:51,830 finner ut at vi begynner å ta for gitt nå ting som minnehåndtering, og 15 00:00:51,830 --> 00:00:54,190 pekere, og hva som skjer på under panseret. 16 00:00:54,190 --> 00:00:57,310 Og igjen, tematisk, alle i hele semester har vært denne lagdeling 17 00:00:57,310 --> 00:00:58,030 og lagdeling. 18 00:00:58,030 --> 00:01:00,530 Og nå er vi liksom opp her, stå på 19 00:01:00,530 --> 00:01:01,930 skuldrene til uker tidligere. 20 00:01:01,930 --> 00:01:05,360 >> Nå husker fra sist gang at vi snakket om hvordan internett fungerte. 21 00:01:05,360 --> 00:01:08,120 Og dette var kanskje en overforenkling, men husk at 22 00:01:08,120 --> 00:01:12,960 hver datamaskin i verden har en IP- adresse, selv om det er litt av en 23 00:01:12,960 --> 00:01:14,570 overforenkling fortsatt. 24 00:01:14,570 --> 00:01:18,180 Og disse adressene brukes til entydig identifisere maskiner slik at 25 00:01:18,180 --> 00:01:22,010 når du sender informasjon, eller pakker, så å si, kan de ha en opprinnelse 26 00:01:22,010 --> 00:01:24,000 adresse og en adresse. 27 00:01:24,000 --> 00:01:27,830 Og de samme IP-adresser kan brukes både for godt og også for det onde, 28 00:01:27,830 --> 00:01:29,270 til å spore deg, for eksempel. 29 00:01:29,270 --> 00:01:32,200 Faktisk, hver og en av dere med en bærbar PC åpne nå, eller en telefon i din 30 00:01:32,200 --> 00:01:35,070 lomme, har en IP-adresse på Harvard nettverk. 31 00:01:35,070 --> 00:01:39,120 Og det er ikke så vanskelig å relatere det til hvem og hvor du 32 00:01:39,120 --> 00:01:40,180 er i disse dager. 33 00:01:40,180 --> 00:01:42,090 Men mer om det kanskje i fremtiden. 34 00:01:42,090 --> 00:01:46,510 >> Nå tenkte jeg at jeg ville bringe tilbake noen minner fra [? styrke?] og gi deg 35 00:01:46,510 --> 00:01:49,360 annet klipp fra et show du kan finne kjente. 36 00:01:49,360 --> 00:01:52,710 Hvis vi kunne dempe lysene for bare noen få sekunder. 37 00:01:52,710 --> 00:01:53,960 Showet Numb3rs. 38 00:01:53,960 --> 00:01:57,510 39 00:01:57,510 --> 00:02:00,540 >> SPEAKER 2: Det er en 32-bit IPP4 adresse. 40 00:02:00,540 --> 00:02:01,610 >> SPEAKER 3: IPP, som i internett? 41 00:02:01,610 --> 00:02:02,968 >> SPEAKER 2: Privat nettverk. 42 00:02:02,968 --> 00:02:04,960 Til Amita private nettverk. 43 00:02:04,960 --> 00:02:16,930 44 00:02:16,930 --> 00:02:19,602 Hun er så fantastisk. 45 00:02:19,602 --> 00:02:21,030 >> SPEAKER 3: Kom igjen, Charlie. 46 00:02:21,030 --> 00:02:21,490 >> SPEAKER 2: Det er. 47 00:02:21,490 --> 00:02:22,470 Et speil IP-adresse. 48 00:02:22,470 --> 00:02:27,680 Hun la oss se på hva hun gjør i sanntid. 49 00:02:27,680 --> 00:02:30,930 >> SPEAKER 1: OK, så et par ting galt med dette bildet. 50 00:02:30,930 --> 00:02:32,920 Så en, og dette er akseptabelt, dette er faktisk 51 00:02:32,920 --> 00:02:34,400 ikke en gyldig IP-adresse. 52 00:02:34,400 --> 00:02:38,190 En gyldig IP-adresse må være tall av formen w.x.y.z, hvor hver av 53 00:02:38,190 --> 00:02:40,000 disse brevene er 0 til 255.. 54 00:02:40,000 --> 00:02:42,330 Men det er fint fordi akkurat som filmer hvor de falske telefonnumre, 55 00:02:42,330 --> 00:02:43,520 de falske IP-adresser. 56 00:02:43,520 --> 00:02:45,230 Du trenger faktisk ikke treffer reelle servere. 57 00:02:45,230 --> 00:02:46,760 >> Men merk deg, dette er en nettleser. 58 00:02:46,760 --> 00:02:50,760 Og nettlesere ikke starte sender ut datakode som dette. 59 00:02:50,760 --> 00:02:54,230 Og hvis vi ser litt dypere, merker at språket de ser 60 00:02:54,230 --> 00:02:57,040 på skjermen er et språk som kalles Mål C, som er det språket 61 00:02:57,040 --> 00:02:59,520 som iPhone-apps er skrevet, spesielt de som involverer 62 00:02:59,520 --> 00:03:03,540 fargestifter, som du kan se fra kildekoden her. 63 00:03:03,540 --> 00:03:06,600 64 00:03:06,600 --> 00:03:07,560 >> OK, jeg trodde dette var morsomt. 65 00:03:07,560 --> 00:03:12,240 Så dette kodebit har absolutt ingenting å gjøre med hva dette 66 00:03:12,240 --> 00:03:13,940 bestemt episode var om. 67 00:03:13,940 --> 00:03:17,590 Så spøken er liksom på folk tar for gitt. 68 00:03:17,590 --> 00:03:20,220 Men dette er ikke alt som er vanskelig å få disse tekniske detaljene riktig. 69 00:03:20,220 --> 00:03:21,980 Og jeg vil oppfordre deg. 70 00:03:21,980 --> 00:03:25,530 Og faktisk, kanskje 50 svært godt ødelegge en rekke TV-programmer og filmer, eller du 71 00:03:25,530 --> 00:03:27,320 fordi du vil finne at det er bare ikke mulig hva de er 72 00:03:27,320 --> 00:03:28,630 gjør på skjermen. 73 00:03:28,630 --> 00:03:31,750 Men ja, dette er koden som du kan se det i en iPhone-applikasjon 74 00:03:31,750 --> 00:03:33,640 eller Mac OS program. 75 00:03:33,640 --> 00:03:35,685 Det har ingenting i det hele tatt å gjøre med sikkerhet. 76 00:03:35,685 --> 00:03:38,610 Så hold et øye for mer slike morsomme ting som det. 77 00:03:38,610 --> 00:03:42,720 >> Men i dag begynner vi å dykke i virkelig dypt til en hel rekke språk. 78 00:03:42,720 --> 00:03:45,410 En faktisk en av de overordnede gatekjøkken av denne delen av 79 00:03:45,410 --> 00:03:51,815 Kurset er ikke å lære å programmere i PHP, for ikke å lære SQL per se, ikke 80 00:03:51,815 --> 00:03:58,100 å lære JavaScript per se, men snarere å lære deg hvordan å undervise 81 00:03:58,100 --> 00:04:02,030 selv nye språk fordi, ja, vi begynne å ta nå 82 00:04:02,030 --> 00:04:06,020 trening hjul av slik at etter kursets slutt, trenger du ikke forvente en 20 83 00:04:06,020 --> 00:04:08,890 side spesifikasjon for å fortelle deg hvordan å gjennomføre noen program. 84 00:04:08,890 --> 00:04:12,970 Du har nok ingredienser i din sinn, og nok verktøy i verktøyet ditt 85 00:04:12,970 --> 00:04:15,750 kit, å som begynne å bygge løsninger på problemer av interesse for 86 00:04:15,750 --> 00:04:19,130 du for noen studenter gruppe, for noen forskningsprosjekt, eller egentlig noe 87 00:04:19,130 --> 00:04:20,140 av interesse for deg. 88 00:04:20,140 --> 00:04:24,150 >> Så mot dette målet, husker at dette var bildet vi tegnet den siste tiden. 89 00:04:24,150 --> 00:04:27,620 Og dette er to datamaskiner, klient og Sever, snakker med hverandre. 90 00:04:27,620 --> 00:04:31,130 Og protokollen, språket, så å si, at disse to maskiner skje 91 00:04:31,130 --> 00:04:33,220 å bli sett kalles HTTP. 92 00:04:33,220 --> 00:04:37,730 Og det er bare den protokollen som brukes av datamaskiner for å overføre informasjon via 93 00:04:37,730 --> 00:04:38,710 World Wide Web. 94 00:04:38,710 --> 00:04:41,770 Nettet, selvfølgelig, er bare én tjeneste som kjører på toppen av 95 00:04:41,770 --> 00:04:43,000 såkalt Internett. 96 00:04:43,000 --> 00:04:48,660 Hva er en annen tjeneste tilgjengelig på toppen av internett i disse dager? 97 00:04:48,660 --> 00:04:51,600 Noen annen protokoll eller - hva er det? 98 00:04:51,600 --> 00:04:52,300 >> PUBLIKUM: FTP. 99 00:04:52,300 --> 00:04:52,790 >> SPEAKER 1: FTP. 100 00:04:52,790 --> 00:04:54,630 Så File Transfer Protocol er en annen. 101 00:04:54,630 --> 00:04:56,050 De fleste av dere sannsynligvis ikke har brukt det. 102 00:04:56,050 --> 00:04:58,830 Men de fleste av dere sikkert har brukt ting som Gchat, eller øyeblikkelig 103 00:04:58,830 --> 00:05:00,970 messaging mer generelt, sikkert e-post. 104 00:05:00,970 --> 00:05:04,470 Og disse også er tjenester som kjører på toppen av Internett fordi, ved 105 00:05:04,470 --> 00:05:08,180 slutten av dagen, selve Internett egentlig bare hente data fra punkt A til 106 00:05:08,180 --> 00:05:12,480 punkt B. Og den bruker en rekke partiklene i seg selv, en av dem eller to 107 00:05:12,480 --> 00:05:17,340 av dem mest generelt kalt TCP / IP, som er å si at en datamaskin på 108 00:05:17,340 --> 00:05:19,960 Internett kan faktisk være å gjøre forskjellige ting, e-post 109 00:05:19,960 --> 00:05:20,980 og web, og så videre. 110 00:05:20,980 --> 00:05:22,220 Google gjør mye av dette. 111 00:05:22,220 --> 00:05:26,310 Så hvordan er disse tjenestene unikt identifisert, vi sier, på en datamaskin 112 00:05:26,310 --> 00:05:29,080 som faktisk kan være å gjøre flere ting? 113 00:05:29,080 --> 00:05:29,860 >> Portnummer. 114 00:05:29,860 --> 00:05:34,180 Og dette er bare vilkårlig menneske konvensjoner som 80 er web, er 443 115 00:05:34,180 --> 00:05:36,580 kryptert web, er 25 e-post. 116 00:05:36,580 --> 00:05:38,230 Og det er en bunter av andre. 117 00:05:38,230 --> 00:05:41,860 Og disse tallene er ganske enkelt inkluderes i de pakker med informasjon, de 118 00:05:41,860 --> 00:05:46,230 virtuell konvolutt, som faktisk inneholdt en anmodning eller en respons. 119 00:05:46,230 --> 00:05:51,300 >> Så når du får tilbake et svar fra web, typisk, trenger du ikke se noen 120 00:05:51,300 --> 00:05:54,780 tallene overhodet i forhold til status for svaret. 121 00:05:54,780 --> 00:05:56,770 Du trenger faktisk ikke se interne driften av 122 00:05:56,770 --> 00:05:58,090 pakker som kommer tilbake. 123 00:05:58,090 --> 00:05:59,860 Men 200 betyr faktisk OK. 124 00:05:59,860 --> 00:06:01,530 Og det betyr at alt er vel. 125 00:06:01,530 --> 00:06:02,870 Du har kanskje sett en haug av disse. 126 00:06:02,870 --> 00:06:05,710 Som er trolig den vanligste du har sett på nettet? 127 00:06:05,710 --> 00:06:05,980 >> 404. 128 00:06:05,980 --> 00:06:07,330 Det betyr bare fil ikke funnet. 129 00:06:07,330 --> 00:06:08,270 Det betyr at noen skrudd opp. 130 00:06:08,270 --> 00:06:11,450 Du gjorde ved tastefeil URLen, eller noen andre gjorde ved å gi deg en 131 00:06:11,450 --> 00:06:15,100 ugyldig URL, eller de slettet filen og nettadressen er fortsatt 132 00:06:15,100 --> 00:06:16,130 blir brukt av mennesker. 133 00:06:16,130 --> 00:06:19,670 Så en rekke årsaker kan forklare hvorfor en fil ikke er funnet. 134 00:06:19,670 --> 00:06:22,990 Og du vil se, i ukene som kommer, disse andre feilkoder, og du vil 135 00:06:22,990 --> 00:06:24,195 dra nytte av noen av dem. 136 00:06:24,195 --> 00:06:25,760 Det verste er 500. 137 00:06:25,760 --> 00:06:29,820 Hvis du får en 500-feil i koden du har skrevet, tenk på det som liksom den 138 00:06:29,820 --> 00:06:33,290 analog av SEG feil i verden av web-programmering. 139 00:06:33,290 --> 00:06:34,560 Det er ikke fullt så ille. 140 00:06:34,560 --> 00:06:36,660 Men det betyr bare at, et sted, du skrudd opp. 141 00:06:36,660 --> 00:06:38,260 Så ser frem til dem. 142 00:06:38,260 --> 00:06:39,910 >> Men la oss se om vi kan se disse i sammenheng. 143 00:06:39,910 --> 00:06:43,460 La meg gå til en nettleser her og gjør følgende. 144 00:06:43,460 --> 00:06:45,710 Så dette er Chrome, som skjer for å være installert i apparatet. 145 00:06:45,710 --> 00:06:49,410 Men de fleste alle nettlesere disse dager har noen tilsvarende funksjonalitet. 146 00:06:49,410 --> 00:06:52,610 Jeg kommer til å gå opp Chrome-menyen, og gå til Verktøy, og jeg kommer til å gå 147 00:06:52,610 --> 00:06:53,990 til utviklerverktøy. 148 00:06:53,990 --> 00:06:57,040 Og du vil se at denne lille panel åpnes i bunnen av vinduet. 149 00:06:57,040 --> 00:07:00,190 En annen snarvei, for å være ærlig, at jeg vanligvis bruker meg selv er å høyreklikke 150 00:07:00,190 --> 00:07:04,370 eller Kontroll klikke hvor som helst på nettet side og bare gå til Inspiser Element. 151 00:07:04,370 --> 00:07:07,440 Og det vil ikke bare åpne dette har for deg. 152 00:07:07,440 --> 00:07:10,230 Det vil også åpne, spesifikt, Elements delen på 153 00:07:10,230 --> 00:07:11,430 venstre side. 154 00:07:11,430 --> 00:07:12,460 >> Så vi er selvfølgelig å se Google. 155 00:07:12,460 --> 00:07:13,930 De endret sin logo i dag. 156 00:07:13,930 --> 00:07:20,200 Men på hvis jeg ruller nedover her oppe, merker at under Elements, ser du 157 00:07:20,200 --> 00:07:23,460 det som kalles HTML, HyperText Markup Språk, og dette er språket 158 00:07:23,460 --> 00:07:26,000 at denne og alle nettsider, egentlig, er skrevet i. 159 00:07:26,000 --> 00:07:28,950 Men det er faktisk formatert for oss så mye mer forståelig leses 160 00:07:28,950 --> 00:07:29,970 enn det normalt er. 161 00:07:29,970 --> 00:07:34,810 Faktisk, hvis jeg zoome ut, og jeg i stedet Bare høyreklikk eller Kontroll-klikk 162 00:07:34,810 --> 00:07:39,630 Klikk på siden, og deretter gå til Vis Page Source, er dette bokstavelig talt hva 163 00:07:39,630 --> 00:07:42,150 Google sendt ned til nettleseren min. 164 00:07:42,150 --> 00:07:46,480 >> Så noen person eller personer skrev Google.com bruke denne kildekoden. 165 00:07:46,480 --> 00:07:47,790 Mesteparten av dette er ikke HTML. 166 00:07:47,790 --> 00:07:49,340 Det er faktisk et språk som heter JavaScript, noe som 167 00:07:49,340 --> 00:07:50,880 vi kommer til onsdag. 168 00:07:50,880 --> 00:07:55,580 Men hva Chrome, og hva alle nettlesere kan gjøre for oss, er slags se 169 00:07:55,580 --> 00:07:59,610 forbi alle distrahert av gal syntaks, og sett tomrom 170 00:07:59,610 --> 00:08:02,940 for oss, og selv syntaks høydepunkt, eller fargelegge ting for oss. 171 00:08:02,940 --> 00:08:06,470 Så du vil finne at disse såkalte utviklerverktøy innebygd i nettlesere 172 00:08:06,470 --> 00:08:10,830 vil gjøre livet så, så mye lettere fordi du kan utforske, via denne menyen 173 00:08:10,830 --> 00:08:13,940 grensesnitt, nøyaktig hva den underliggende kildekoden er for 174 00:08:13,940 --> 00:08:15,750 en side på internett. 175 00:08:15,750 --> 00:08:19,070 Og ja, dette er en av de mest effektive måter å lære hvordan du gjør 176 00:08:19,070 --> 00:08:22,860 noe nytt, i det minste hvis den side er ikke så komplisert som å overvelde, er 177 00:08:22,860 --> 00:08:26,700 å starte poking rundt det er HTML, se på sitt såkalte CSS, som vi vil komme 178 00:08:26,700 --> 00:08:30,310 til litt også, for å få en forståelse av hvordan programmerer 179 00:08:30,310 --> 00:08:33,480 implementert noen bestemt Funksjonen av siden. 180 00:08:33,480 --> 00:08:36,530 >> Men mer teknisk interessant rett nå kommer det til å være dette. 181 00:08:36,530 --> 00:08:39,429 Hvis jeg går til kategorien Nettverk la oss nå klare dette. 182 00:08:39,429 --> 00:08:43,429 Jeg kommer til å klikke den lille krysse symbol her, og deretter 183 00:08:43,429 --> 00:08:45,630 gå til et annet nettsted. 184 00:08:45,630 --> 00:08:48,430 Og jeg skal bare skrive i Facebook.com. 185 00:08:48,430 --> 00:08:51,940 Ingen HTTP, ingen HTTPS, ingen WWW. 186 00:08:51,940 --> 00:08:53,850 La oss faktisk se hva som skjer her. 187 00:08:53,850 --> 00:08:55,030 >> Enter. 188 00:08:55,030 --> 00:08:58,480 Nå merker en hel haug med ting bare dukket opp i denne nedre panelet, i 189 00:08:58,480 --> 00:09:00,285 tillegg til websiden vises i toppen. 190 00:09:00,285 --> 00:09:04,890 Jeg kommer til å rulle tilbake opp i Nettverk kategorien her, og jeg kommer til å 191 00:09:04,890 --> 00:09:06,080 Klikk på første rad. 192 00:09:06,080 --> 00:09:10,580 Hva dette verktøyet kommer til å åpenbare for oss er hver og en av HTTP-forespørsler 193 00:09:10,580 --> 00:09:13,550 som raskt gikk tilbake og tilbake mellom nettleseren min 194 00:09:13,550 --> 00:09:14,930 og Facebook server. 195 00:09:14,930 --> 00:09:17,830 Og så hver og en av disse radene representerer en slik anmodning eller 196 00:09:17,830 --> 00:09:20,970 svar, en eller flere av de virtuelle konvolutt. 197 00:09:20,970 --> 00:09:24,080 Eller mer tilfeldig, det er som en person som en person, en kunde i en 198 00:09:24,080 --> 00:09:26,710 restaurant, ber om noe igjen og igjen, og nytt. 199 00:09:26,710 --> 00:09:29,400 Og servitør holder bringe det tilbake en av gangen. 200 00:09:29,400 --> 00:09:33,850 >> Så nå, hvis jeg zoomer inn på dette, merker og dette vil være den typen ting 201 00:09:33,850 --> 00:09:36,600 at du er velkommen til og oppmuntret å spille med på egen hånd, fordi vi 202 00:09:36,600 --> 00:09:38,150 vil ikke gå gjennom alt i stor detalj. 203 00:09:38,150 --> 00:09:40,070 Men merker det er en noen underfanene her - 204 00:09:40,070 --> 00:09:43,700 Overskrifter, Forhåndsvisning Response, Cookies, og timing. 205 00:09:43,700 --> 00:09:48,280 Jeg skal bare se på overskrifter for nå fordi disse er lite 206 00:09:48,280 --> 00:09:53,600 ingredienser innsiden av konvolutten som hjelpe data komme til og fra steder. 207 00:09:53,600 --> 00:09:57,590 >> Så først, la meg klikker på denne, Vis Kilde ved siden forespørselstopptekster. 208 00:09:57,590 --> 00:10:01,910 Det er kravet om at min nettleser, Krom, i dette tilfellet, sendes inne i 209 00:10:01,910 --> 00:10:02,910 som virtuell konvolutt. 210 00:10:02,910 --> 00:10:04,800 Du husker forrige uke jeg manuelt skrev den mens 211 00:10:04,800 --> 00:10:06,380 utgir seg for å være en nettleser. 212 00:10:06,380 --> 00:10:09,980 Så det minnet serveren som det er ser for verten heter 213 00:10:09,980 --> 00:10:10,835 Facebook.com. 214 00:10:10,835 --> 00:10:13,630 Og så er det litt mer uforståelige informasjon som vi vil vinke 215 00:10:13,630 --> 00:10:14,830 våre hender for nå. 216 00:10:14,830 --> 00:10:18,640 >> Men hvis jeg begynner å bla nedover nå i dette vinduet, la meg komme til 217 00:10:18,640 --> 00:10:19,980 respons overskrifter. 218 00:10:19,980 --> 00:10:23,270 Dette var hva som er i den virtuelle konvolutt som kom tilbake fra 219 00:10:23,270 --> 00:10:24,095 Facebook.com. 220 00:10:24,095 --> 00:10:27,390 Og hvis jeg klikker Vis kilde bare se teksten til det rå, 221 00:10:27,390 --> 00:10:28,400 merke noen ting. 222 00:10:28,400 --> 00:10:32,130 One, taler Facebook også den samme protokollen, versjon 1.1 av denne. 223 00:10:32,130 --> 00:10:33,390 Så det er fint. 224 00:10:33,390 --> 00:10:36,820 Men status code 301, flyttet permanent. 225 00:10:36,820 --> 00:10:38,880 >> Vel, hvor pokker Facebook reise? 226 00:10:38,880 --> 00:10:40,430 Hva er dette prøver å formidle til oss? 227 00:10:40,430 --> 00:10:44,310 Vel, merke her nede er det en annen header kalt Location. 228 00:10:44,310 --> 00:10:51,050 Så hvorfor er Facebook forteller meg at de flyttet permanent til denne nettadressen 229 00:10:51,050 --> 00:10:53,580 ved siden av Sted? 230 00:10:53,580 --> 00:10:54,962 Jeg glemte www. 231 00:10:54,962 --> 00:10:56,250 >> Så det var mitt valg. 232 00:10:56,250 --> 00:11:00,450 Faktisk, de fleste av oss sjelden, sannsynligvis, skriver www.whatever.com disse dager. 233 00:11:00,450 --> 00:11:03,390 Men det viser seg et system administrator, som Facebooks, kan 234 00:11:03,390 --> 00:11:06,800 konfigurere sine servere på en slik måte at enten Facebook.com fungerer, eller 235 00:11:06,800 --> 00:11:12,450 www.Facebook.com fungerer, eller, egentlig, enhver slik prefiks foran sitt 236 00:11:12,450 --> 00:11:13,210 domenenavn. 237 00:11:13,210 --> 00:11:14,500 Så de har gjort det for oss. 238 00:11:14,500 --> 00:11:16,910 Og de er omdirigere oss, sannsynligvis for noen tekniske, 239 00:11:16,910 --> 00:11:18,100 noen markedsføring grunner. 240 00:11:18,100 --> 00:11:21,570 De ønsker bare å canonicalize på www.Facebook.com. 241 00:11:21,570 --> 00:11:24,040 >> Men det er ikke helt det. 242 00:11:24,040 --> 00:11:28,560 Hvis jeg ruller nedover her, la oss se hva som skjer. 243 00:11:28,560 --> 00:11:30,810 Dette forteller meg at vi flyttet permanent til 244 00:11:30,810 --> 00:11:33,450 http://www.Facebook.com. 245 00:11:33,450 --> 00:11:36,620 Så la oss se på den andre forespørselen at min nettleser sender. 246 00:11:36,620 --> 00:11:40,070 Dessverre ser det ut som Facebook har flyttet igjen fordi andre 247 00:11:40,070 --> 00:11:44,420 anmodning, ved å velge den aktuelle nettadressen i stedet, sier at også flyttet 248 00:11:44,420 --> 00:11:45,010 permanent. 249 00:11:45,010 --> 00:11:48,140 Og la meg bla nedover her til respons overskrifter. 250 00:11:48,140 --> 00:11:51,530 Hvor har Facebook gått nå? 251 00:11:51,530 --> 00:11:52,680 >> Så HTTPS. 252 00:11:52,680 --> 00:11:56,130 Så nå Facebook har startet, spesielt i lys av nåværende 253 00:11:56,130 --> 00:11:59,750 hendelser de siste månedene, spesielt og også i de siste par årene 254 00:11:59,750 --> 00:12:03,670 å tvinge alle sine brukere, i en god måte, for å bruke HTTPS, som er mer 255 00:12:03,670 --> 00:12:06,210 sikker, selv om ikke helt sikker. 256 00:12:06,210 --> 00:12:10,000 Og så nå min side, er min nettleser kommer til å be om dette tredje URL. 257 00:12:10,000 --> 00:12:14,710 Og nå, endelig, får vi ellers usett 200 OK. 258 00:12:14,710 --> 00:12:18,830 >> Så hva i all verden eller alle disse andre rader ned her. 259 00:12:18,830 --> 00:12:22,630 Jeg bokstavelig talt skrevet en ting, og min Nettleseren synes å ha bedt om like 260 00:12:22,630 --> 00:12:23,840 20 noen merkelige ting. 261 00:12:23,840 --> 00:12:24,640 Hva er det? 262 00:12:24,640 --> 00:12:25,810 >> PUBLIKUM: Scripts? 263 00:12:25,810 --> 00:12:28,460 >> SPEAKER 1: Scripts, så andre filer skrevet i et språk som heter 264 00:12:28,460 --> 00:12:30,780 JavaScript, som, igjen, vil vi se litt av på onsdag. 265 00:12:30,780 --> 00:12:32,760 Hva annet? 266 00:12:32,760 --> 00:12:33,390 Stilark. 267 00:12:33,390 --> 00:12:36,350 Så noe på et språk som heter CSS, som vi vil se i en bit. 268 00:12:36,350 --> 00:12:40,690 GIF og JPEG, og PNG og bilder, og filmfiler - hva en nettside 269 00:12:40,690 --> 00:12:43,280 har mest sannsynlig i form av en fil. 270 00:12:43,280 --> 00:12:46,750 Og så det vi ser til venstre side er det alle filene 271 00:12:46,750 --> 00:12:50,280 at Chrome måtte laste ned, rekursivt, om du vil, for å 272 00:12:50,280 --> 00:12:52,430 komponere helheten på siden. 273 00:12:52,430 --> 00:12:56,210 >> Så hva vi så for et øyeblikk siden med Google, Hvis jeg klikker på Elements 274 00:12:56,210 --> 00:13:00,470 tab, dette sikkert, er HTML, den språk som komponerer denne siden. 275 00:13:00,470 --> 00:13:01,890 Men det er bunter av andre ting. 276 00:13:01,890 --> 00:13:02,640 Det er en logo. 277 00:13:02,640 --> 00:13:04,680 Det er de blå-ish ikoner der borte. 278 00:13:04,680 --> 00:13:07,610 Og det er andre elementer fortsatt på siden som seg selv kan være 279 00:13:07,610 --> 00:13:08,610 separate filer. 280 00:13:08,610 --> 00:13:11,860 >> Så hva er fint om en nettleser er at den ser på det språket vi skal 281 00:13:11,860 --> 00:13:14,690 å begynne å skrive, eller du har allerede begynte å skrive i P 7 sett, viser tall 282 00:13:14,690 --> 00:13:17,970 ut hvor disse filene bor, og går og griper dem også. 283 00:13:17,970 --> 00:13:21,010 Og jeg kan ikke understreke nok, selv selv om noe av dette kan se litt 284 00:13:21,010 --> 00:13:24,820 uforståelige eller overveldende ved første øyekast, lære å programmere 285 00:13:24,820 --> 00:13:28,500 applikasjoner for web, er det uvurderlig for å forstå hvordan disse 286 00:13:28,500 --> 00:13:29,410 små verktøyene fungerer. 287 00:13:29,410 --> 00:13:33,830 Dette er liksom som GDB som verktøy, men mye enklere, til slutt, for å bruke - 288 00:13:33,830 --> 00:13:37,690 og gir deg virkelig øynene inn i hva vi har tatt for gitt 289 00:13:37,690 --> 00:13:39,170 ganske lang tid nå. 290 00:13:39,170 --> 00:13:42,270 >> Så hva kan vi nå gjøre med denne informasjonen? 291 00:13:42,270 --> 00:13:44,875 Vel, la oss faktisk ta en titt på begrepene underliggende HTML. 292 00:13:44,875 --> 00:13:49,025 Og vi vil utsette, som vi allerede har, for å seksjoner denne uken, på problemet 293 00:13:49,025 --> 00:13:53,260 satt 7 spesifikasjonen, til noen av de mer opplysninger om følgende språk. 294 00:13:53,260 --> 00:13:57,020 Men la oss se om vi ikke kan male et bilde av hva du bør forstå 295 00:13:57,020 --> 00:13:57,940 samlet her. 296 00:13:57,940 --> 00:14:02,280 >> Så HTML, HyperText Markup Language, er ikke et programmeringsspråk. 297 00:14:02,280 --> 00:14:03,520 Hva betyr det egentlig? 298 00:14:03,520 --> 00:14:05,690 Så HTML ser slik ut. 299 00:14:05,690 --> 00:14:06,810 Og noen av dere allerede vet dette. 300 00:14:06,810 --> 00:14:08,130 Noen av dere har gjort dette for en stund. 301 00:14:08,130 --> 00:14:10,270 Men la oss se om vi ikke kan fylle i noen mellomrom i tillegg. 302 00:14:10,270 --> 00:14:11,760 Så oppdager et par ting her. 303 00:14:11,760 --> 00:14:13,030 Ett, er det bare tekst. 304 00:14:13,030 --> 00:14:15,960 Så det er akkurat som kildekode i C, eller i et annet språk. 305 00:14:15,960 --> 00:14:17,750 >> Legg merke til at det synes å være et mønster her. 306 00:14:17,750 --> 00:14:20,870 Det er innrykk, men teknisk innrykk er bare menneskelig 307 00:14:20,870 --> 00:14:21,205 konvensjonen. 308 00:14:21,205 --> 00:14:24,980 A nettlesere bryr seg ikke om det er nytt linjer og kategorier som vi ser det. 309 00:14:24,980 --> 00:14:27,410 Men legg merke til at det er symmetrier her. 310 00:14:27,410 --> 00:14:31,180 Det er hva jeg skal kalle, på toppen av denne filen, den åpne koden, eller starten 311 00:14:31,180 --> 00:14:33,030 tag, heter HTML. 312 00:14:33,030 --> 00:14:36,800 Og så, der nede, helt foret opp, mye som vi gjør med klammeparentes, 313 00:14:36,800 --> 00:14:40,910 vi ser åpen brakett, frem slash, HTML, tett brakett. 314 00:14:40,910 --> 00:14:44,610 Så det er det tilsvarende nær tag, eller end tag, for den tingen. 315 00:14:44,610 --> 00:14:47,990 >> Sammen, alt inne i såkalt åpen tag og tett tag 316 00:14:47,990 --> 00:14:50,440 komponere det vi vil kalle et element. 317 00:14:50,440 --> 00:14:53,910 Og vi får se, om en liten stund, er det virkelig liker en node i trærne. 318 00:14:53,910 --> 00:14:57,470 For hvis du tenker på nå innrykk som er underforstått her, du 319 00:14:57,470 --> 00:15:00,780 type har, liker, en besteforelder node kalles HTML. 320 00:15:00,780 --> 00:15:06,870 Hvor mange barn vil du kanskje si, basert på dette bildet, har HTML-elementet? 321 00:15:06,870 --> 00:15:07,720 >> Så sannsynligvis to. 322 00:15:07,720 --> 00:15:10,240 En er leder element, tilsynelatende. 323 00:15:10,240 --> 00:15:11,710 Og en er kroppen element. 324 00:15:11,710 --> 00:15:12,555 Og hvorfor to barn? 325 00:15:12,555 --> 00:15:15,840 Vel, jeg bare slags dedusere at dersom Jeg har et åpent hodet tag og deretter en 326 00:15:15,840 --> 00:15:17,820 nær hodet tag, det er et element. 327 00:15:17,820 --> 00:15:21,200 Og så, hvis det er en annen åpen kropp tag og en nær body-koden, det er som 328 00:15:21,200 --> 00:15:22,340 et annet element. 329 00:15:22,340 --> 00:15:26,000 Så i den forstand at hvis jeg slags rotere bildet på sin side, er det 330 00:15:26,000 --> 00:15:29,910 som å ha en HTML-kode, og deretter en head tag, og deretter en body-koden, og 331 00:15:29,910 --> 00:15:34,290 så litt tekst, hello world, dingler ut av kroppen koden selv. 332 00:15:34,290 --> 00:15:36,620 >> Så vi kan tegne et bilde som kan se slik ut. 333 00:15:36,620 --> 00:15:38,020 Formene er vilkårlig. 334 00:15:38,020 --> 00:15:40,870 Men legg merke til at jeg har brukt liksom en ellipse på toppen for å representere 335 00:15:40,870 --> 00:15:41,860 dokumentere seg selv. 336 00:15:41,860 --> 00:15:45,980 Det viser seg at det kan være andre ting innsiden av en nettside som jeg har ikke 337 00:15:45,980 --> 00:15:46,940 trukket hit. 338 00:15:46,940 --> 00:15:50,800 Så vi kommer til og med henge HTML node av av en såkalt dokument node. 339 00:15:50,800 --> 00:15:53,730 Og så har vi hode og kropp og tittel, varsel, 340 00:15:53,730 --> 00:15:55,360 som er nestet videre. 341 00:15:55,360 --> 00:15:58,650 Jeg gadd ikke å sette ekstra linje pauser inne i tittelen koden. 342 00:15:58,650 --> 00:16:02,710 Det føltes bare som det var å få litt for ordrik. 343 00:16:02,710 --> 00:16:07,000 Så jeg forlot den i en linje der, med åpen tittel, hello world, nær tittelen. 344 00:16:07,000 --> 00:16:09,380 Og så har vi litt tekst dingler ut av her. 345 00:16:09,380 --> 00:16:12,200 >> Så dette bildet vil komme tilbake til oss når vi dykke inn i JavaScript. 346 00:16:12,200 --> 00:16:15,110 Og forståelse som når du skrive HTML som dette, hva 347 00:16:15,110 --> 00:16:16,250 er en nettleser gjør? 348 00:16:16,250 --> 00:16:19,290 Vel, vi trenger ikke å bekymre deg hvordan den gjør dette, eller med hva 349 00:16:19,290 --> 00:16:23,090 algoritmen, men ved slutten av dagen, når en nettleser mottar HTML som 350 00:16:23,090 --> 00:16:27,510 at fra Facebook eller Google, analyserer det det, så å si, leser den det, 351 00:16:27,510 --> 00:16:31,160 med noe sånt fread, topp til bunn, venstre til høyre, og som det 352 00:16:31,160 --> 00:16:36,300 innser, oh, åpen kode, og deretter lukke tag, begynner det å malloc, så å si, 353 00:16:36,300 --> 00:16:37,800 en node i et tre. 354 00:16:37,800 --> 00:16:41,130 Og når den støter på, som vi har antydet her med innrykk, en 355 00:16:41,130 --> 00:16:45,400 barnenode, mallocs det en node for at og festet det til treet. 356 00:16:45,400 --> 00:16:49,150 >> Slik at treet strukturer, binære trær, trefoldig trær, og større trær, som 357 00:16:49,150 --> 00:16:53,380 Vi kikket på en uke eller to siden, varsel at det samme prinsipp er 358 00:16:53,380 --> 00:16:54,220 kommer tilbake til oss. 359 00:16:54,220 --> 00:16:57,590 Og den som gjennomføres, Chrome uansett Teamet gjorde det, antagelig hadde 360 00:16:57,590 --> 00:17:00,800 å gjennomføre noen form for trestruktur under hetten. 361 00:17:00,800 --> 00:17:05,329 Og det i seg selv er sannsynligvis i en språk som C eller C + +, eller en lavere 362 00:17:05,329 --> 00:17:08,540 nivå språk som vi vil bruker nå toppen nettet. 363 00:17:08,540 --> 00:17:11,200 >> Så nå, kanskje, vil dette være mer fornuftig. 364 00:17:11,200 --> 00:17:15,420 Selve tatovering fra en fyr som kanskje angre på det til slutt, på en måte. 365 00:17:15,420 --> 00:17:17,359 OK, greit, så mye av web humor. 366 00:17:17,359 --> 00:17:18,599 Det er egentlig ikke kommer enn så godt i dag. 367 00:17:18,599 --> 00:17:19,560 Så vi vil gå videre. 368 00:17:19,560 --> 00:17:20,180 OK. 369 00:17:20,180 --> 00:17:22,760 >> Så la oss ta en titt nå ved noen eksempler. 370 00:17:22,760 --> 00:17:24,660 Enklest mulig ting kan være dette. 371 00:17:24,660 --> 00:17:29,170 Jeg kommer til å gå videre og åpne opp i gedit en fil som heter hello.php. 372 00:17:29,170 --> 00:17:31,730 373 00:17:31,730 --> 00:17:36,330 Og innsiden av her, kommer jeg til å raskt bare gjøre dette, printf, siterer 374 00:17:36,330 --> 00:17:38,590 unquote, "hello world". 375 00:17:38,590 --> 00:17:42,460 >> Så varsel, og jeg skal gjøre mitt backslash n, Jeg har ikke brydd seg med å erklære viktigste. 376 00:17:42,460 --> 00:17:45,310 Det viser seg, i php, og mye av språk, trenger du ikke en hoved 377 00:17:45,310 --> 00:17:46,090 funksjon per se. 378 00:17:46,090 --> 00:17:47,720 Du kan bare begynne å skrive programmet. 379 00:17:47,720 --> 00:17:51,210 Nå, når jeg lagrer denne filen, merker jeg er nødt til å gjøre følgende. 380 00:17:51,210 --> 00:17:55,360 Jeg kommer ikke til å bruke sminke, og jeg er ikke kommer til å bruke klang fordi PHP, i motsetning til 381 00:17:55,360 --> 00:17:57,400 C, er ikke et kompilert språk. 382 00:17:57,400 --> 00:18:01,400 Det er det som kalles en tolket språk, noe som betyr at du kjører den 383 00:18:01,400 --> 00:18:04,650 som et innspill gjennom et annet program kalt tolk. 384 00:18:04,650 --> 00:18:08,150 Og at programmet leser det, topp til bunn, venstre til høyre, og gjør 385 00:18:08,150 --> 00:18:09,290 uansett hva du ber den om. 386 00:18:09,290 --> 00:18:12,920 >> Så i dette tilfellet her har jeg en linje som sier printf. 387 00:18:12,920 --> 00:18:17,990 Så når jeg kjører denne kildekoden, hello.php, men et program som 388 00:18:17,990 --> 00:18:22,830 skjer, praktisk, å bli kalt PHP, at programmet PHP kommer til å lese 389 00:18:22,830 --> 00:18:26,120 denne filen, topp til bunn, fra venstre til høyre, og det kommer til å gjøre det jeg 390 00:18:26,120 --> 00:18:30,110 ber den om - utførende kode, og hvis det ikke gjenkjenner noe, bare 391 00:18:30,110 --> 00:18:31,320 spytter det ut. 392 00:18:31,320 --> 00:18:34,940 Så jeg kommer til å gå videre og kjøre PHP av hello.php. 393 00:18:34,940 --> 00:18:37,110 Enter. 394 00:18:37,110 --> 00:18:39,690 >> Og det er ikke helt det jeg hadde tenkt. 395 00:18:39,690 --> 00:18:40,530 Vel, hvorfor er det? 396 00:18:40,530 --> 00:18:43,910 Vel, er PHP et språk som faktisk er designet for å være ganske 397 00:18:43,910 --> 00:18:46,150 sammenvevd med nettet. 398 00:18:46,150 --> 00:18:50,460 Når du lager nettsider med dette språket PHP, som vi vil snart se, vil vi 399 00:18:50,460 --> 00:18:54,560 ønsker å gjøre noe sånt print ut linjer som dette. 400 00:18:54,560 --> 00:18:55,940 >> Så jeg kommer til å gjøre dette. 401 00:18:55,940 --> 00:19:00,810 Åpen brakett, spørsmålstegn, PHP, og nå er jeg bare skal rykke inn bare for å holde 402 00:19:00,810 --> 00:19:01,960 ting fine. 403 00:19:01,960 --> 00:19:04,910 Og nå skal jeg gjøre et spørsmål markere tett brakett. 404 00:19:04,910 --> 00:19:06,270 Så det er litt av asymmetri her. 405 00:19:06,270 --> 00:19:07,490 Du trenger ikke gjøre dette. 406 00:19:07,490 --> 00:19:10,530 Og du trenger ikke gjøre en skråstrek, så PHP er litt annerledes. 407 00:19:10,530 --> 00:19:14,610 >> Men nå, hvis jeg kjøre dette programmet, PHP hello.php, nå er jeg 408 00:19:14,610 --> 00:19:16,090 faktisk få Hello World. 409 00:19:16,090 --> 00:19:17,750 Og vi vil se hvorfor dette er verdifullt. 410 00:19:17,750 --> 00:19:20,960 One, det tillater meg å spesifisere, super eksplisitt, er denne 411 00:19:20,960 --> 00:19:22,480 kode, utføre dette. 412 00:19:22,480 --> 00:19:25,480 Og det er faktisk hva disse spesielle koder innebærer her. 413 00:19:25,480 --> 00:19:30,330 >> Men det betyr også at hvis jeg bare gjøre noe som jeg tar sikte over her, at 414 00:19:30,330 --> 00:19:34,000 betyr at, bokstavelig talt, som vil bare skrives ut uten å måtte 415 00:19:34,000 --> 00:19:36,850 faktisk kalle printf, eller print, eller en lignende funksjon. 416 00:19:36,850 --> 00:19:39,445 Så får vi komme tilbake til det på bare et øyeblikk. 417 00:19:39,445 --> 00:19:40,470 >> Først, la oss gjøre dette. 418 00:19:40,470 --> 00:19:43,950 Innsiden av maskinen, har vi en katalog kalt Vhosts, for virtuell 419 00:19:43,950 --> 00:19:47,000 verter, slash lokale verten, slash offentligheten. 420 00:19:47,000 --> 00:19:50,240 Så det er litt detaljert, men lang historie Kort sagt, er apparatet utformet ikke 421 00:19:50,240 --> 00:19:53,770 bare for å støtte C. Det er også utformet for å støtte PHP. 422 00:19:53,770 --> 00:19:57,440 Men det er også designet for å være en web server, og en database server. 423 00:19:57,440 --> 00:20:00,230 Og det er konstruert, og virkelig konfigurert, å være minner om noe 424 00:20:00,230 --> 00:20:04,230 kommersielle web hosting selskap som du kan betale $ 5 i måneden for, 425 00:20:04,230 --> 00:20:05,040 $ 100 i måneden for. 426 00:20:05,040 --> 00:20:08,200 Uansett hva tjenesten er, det er konfigurert å være svært lik en 427 00:20:08,200 --> 00:20:10,170 virkelige verden produksjon server. 428 00:20:10,170 --> 00:20:13,485 >> Og hva det betyr er at du kjører på apparatet er web server software. 429 00:20:13,485 --> 00:20:15,060 Det skjer for å bli kalt Apache. 430 00:20:15,060 --> 00:20:17,790 Det er bare gratis, og åpen kildekode, og svært populære. 431 00:20:17,790 --> 00:20:23,260 Og vi har konfigurert Apache å vite at hvis jeg besøke en bestemt nettadresse, med 432 00:20:23,260 --> 00:20:28,060 Krom eller en hvilken som helst nettleser innsiden av apparatet, for å se nærmere på denne katalogen 433 00:20:28,060 --> 00:20:31,030 for filene som brukeren ber om. 434 00:20:31,030 --> 00:20:32,790 >> Med andre ord, la meg gå videre og gjøre dette. 435 00:20:32,790 --> 00:20:36,890 Innsiden av min offentlig katalog, jeg kommer å gå videre og lage en fil 436 00:20:36,890 --> 00:20:39,580 heter index.html. 437 00:20:39,580 --> 00:20:41,000 Det gir meg den kategorien her. 438 00:20:41,000 --> 00:20:44,210 Og jeg kommer til å gå veldig fort og gå videre og banke ut 439 00:20:44,210 --> 00:20:45,010 dette programmet her. 440 00:20:45,010 --> 00:20:48,410 DOCTYPE HTML, som for nå, bare anta må du skrive. 441 00:20:48,410 --> 00:20:53,490 Det er bare en avleggs tag, det er ikke virkelig en HTML-kode, som angir at 442 00:20:53,490 --> 00:20:55,050 her kommer noen HTML. 443 00:20:55,050 --> 00:20:57,400 >> Jeg kommer til å gå videre og gjenskape hva vi så for et øyeblikk siden. 444 00:20:57,400 --> 00:20:58,650 Her er hodet på siden. 445 00:20:58,650 --> 00:21:01,170 Innsiden av hodet var - 446 00:21:01,170 --> 00:21:01,890 så tittelen. 447 00:21:01,890 --> 00:21:04,340 Så vi vil si hei, verden. 448 00:21:04,340 --> 00:21:06,570 Og deretter ned her var body-koden. 449 00:21:06,570 --> 00:21:08,580 La meg nær kroppen tag. 450 00:21:08,580 --> 00:21:12,280 Og så her vil jeg også si, bare for klarhet, hallo verden. 451 00:21:12,280 --> 00:21:14,770 >> Så dette er uten tvil den enkleste mulig nettsiden du 452 00:21:14,770 --> 00:21:15,770 kan gjøre som er gyldig. 453 00:21:15,770 --> 00:21:17,030 Det er syntaktisk gyldige. 454 00:21:17,030 --> 00:21:18,620 Alt som er åpnet er stengt. 455 00:21:18,620 --> 00:21:20,910 Alt er pent i stylet og innrykket. 456 00:21:20,910 --> 00:21:23,600 Så la oss se nå hvordan jeg kan få tilgang til denne filen. 457 00:21:23,600 --> 00:21:25,540 >> Vel, la meg gå til Chrome her. 458 00:21:25,540 --> 00:21:35,050 Og la meg gå til http://localhost/index.html. 459 00:21:35,050 --> 00:21:36,200 Så hva er lokale verten? 460 00:21:36,200 --> 00:21:39,400 Vel, de fleste helst datamaskin i verden, Linux, Mac OS, Windows, har et kallenavn 461 00:21:39,400 --> 00:21:40,680 kalt lokale verten. 462 00:21:40,680 --> 00:21:42,900 Så hvis du noen gang ønsker å snakke til din egen datamaskin - 463 00:21:42,900 --> 00:21:45,140 riktignok merkelig reflexively - 464 00:21:45,140 --> 00:21:47,080 du kaller deg selv lokale verten. 465 00:21:47,080 --> 00:21:50,390 Uansett hva den faktiske datamaskinen er heter, enten det er Davids MacBook 466 00:21:50,390 --> 00:21:52,490 Air, eller noe mer ordrik sånn. 467 00:21:52,490 --> 00:21:57,760 >> Så denne nettadressen er tilsynelatende kommer til å bruke HTTP til å snakke med den lokale verten, 468 00:21:57,760 --> 00:22:00,800 samme datamaskin, apparatet, og det kommer til å be om, bare ta en 469 00:22:00,800 --> 00:22:02,570 gjette, hvilken fil? 470 00:22:02,570 --> 00:22:04,460 Index.html. 471 00:22:04,460 --> 00:22:08,650 Så apparatet er konfigurert i avansere å vite at hvis jeg spør 472 00:22:08,650 --> 00:22:13,460 for noe sånt som index.html, se etter i en mappe kalt Vhosts, i en 473 00:22:13,460 --> 00:22:17,950 mappe kalt localhost, i en mappe deri kalles offentlig. 474 00:22:17,950 --> 00:22:20,400 Det er der alt av offentlig min filene skal være. 475 00:22:20,400 --> 00:22:22,610 Så jeg nå kommer til å treffe på Enter. 476 00:22:22,610 --> 00:22:27,100 >> Og faen, det er det forbudt melding, også kjent som 403, den 477 00:22:27,100 --> 00:22:28,490 numerisk kode for det. 478 00:22:28,490 --> 00:22:30,130 Så hva er galt her? 479 00:22:30,130 --> 00:22:33,210 Vel, det er ikke nok å bare sette filen innsiden av mappen min. 480 00:22:33,210 --> 00:22:35,790 Jeg må faktisk gjøre følgende. 481 00:22:35,790 --> 00:22:40,210 >> La meg gå inn i min Vhosts katalog, inn localhost, i offentligheten, og la 482 00:22:40,210 --> 00:22:41,680 meg gjøre ls dash l. 483 00:22:41,680 --> 00:22:44,510 Og det er et par andre ting her for dagens formål. 484 00:22:44,510 --> 00:22:50,540 Men legg merke til på venstre side, ved siden til index.html, vi bare se en RW. 485 00:22:50,540 --> 00:22:53,560 Og i det siste, hva har RW sto for? 486 00:22:53,560 --> 00:22:54,240 >> Bare lese eller skrive. 487 00:22:54,240 --> 00:22:58,000 Det faktum at det står rw til venstre betyr at jeg, eieren av denne filen, kan 488 00:22:58,000 --> 00:22:59,020 lese eller skrive det. 489 00:22:59,020 --> 00:23:05,010 Men jeg må la alle mennesker i verden lese dette, men ikke skrive det. 490 00:23:05,010 --> 00:23:09,650 Så jeg kommer til å endre modus på fil, chmod, alle pluss r å gi 491 00:23:09,650 --> 00:23:13,910 alle leserettigheter på fil som heter index.html. 492 00:23:13,910 --> 00:23:18,040 >> Og hvis jeg nå retype ls dash l, varsel som over her, noen mer 493 00:23:18,040 --> 00:23:19,160 R-er har dukket opp. 494 00:23:19,160 --> 00:23:21,090 Og for nå går spec i mer detalj. 495 00:23:21,090 --> 00:23:24,450 For P 7 sett, det betyr bare at alle kan nå lese denne filen. 496 00:23:24,450 --> 00:23:27,790 Hvis jeg går tilbake til nettleseren min nå og laste, voila. 497 00:23:27,790 --> 00:23:28,750 Hei verden. 498 00:23:28,750 --> 00:23:32,260 >> Og jeg kan til og med åpne mine Chrome verktøy og se, akkurat som med Google og 499 00:23:32,260 --> 00:23:34,590 Facebook at det er min HTML, formatert litt 500 00:23:34,590 --> 00:23:35,930 annerledes og fargelegges. 501 00:23:35,930 --> 00:23:40,450 Hvis jeg går til nettverket fanen og legg siden, merker at det er få 502 00:23:40,450 --> 00:23:42,900 be om at Chrome sender til apparatet. 503 00:23:42,900 --> 00:23:46,020 Det er 200 for at bestemt fil. 504 00:23:46,020 --> 00:23:49,340 Så kort sagt, dette er hvordan alle disse ulike delene kommer sammen. 505 00:23:49,340 --> 00:23:53,530 Det bare så skjer at webserveren vi bruker akkurat nå er ikke ekstern, 506 00:23:53,530 --> 00:23:54,210 som Facebook. 507 00:23:54,210 --> 00:23:58,330 Det er bokstavelig talt på samme datamaskin, som er helt OK. 508 00:23:58,330 --> 00:24:00,590 >> Så hva mer kan vi gjøre i en web-side? 509 00:24:00,590 --> 00:24:03,110 Vel, bare, la oss sus gjennom et par av disse tingene. 510 00:24:03,110 --> 00:24:07,860 Men la meg gå videre og åpne Gedit med index.html. 511 00:24:07,860 --> 00:24:13,980 Og la meg gå videre og si hei CS50, lagre denne filen, går du tilbake til 512 00:24:13,980 --> 00:24:16,260 nettleser, virkelig uimponerende endring. 513 00:24:16,260 --> 00:24:19,130 >> Men hva hvis vi ønsker å faktisk koble til noe nå? 514 00:24:19,130 --> 00:24:23,480 Så det viser seg at vi kan ha koblinger i HTML som er bare koder 515 00:24:23,480 --> 00:24:24,140 seg selv. 516 00:24:24,140 --> 00:24:27,320 Det skjer for å bli kalt anker tag. a href lik 517 00:24:27,320 --> 00:24:33,190 https://www.cs50.net, www.cs50.net nær sitat, tett brakett. 518 00:24:33,190 --> 00:24:35,230 Og nå la oss se hva ellers kommer etterpå. 519 00:24:35,230 --> 00:24:36,500 >> Jeg har åpnet tag. 520 00:24:36,500 --> 00:24:38,990 Jeg må nå gi den en setning som CS50. 521 00:24:38,990 --> 00:24:40,600 La meg lukke taggen. 522 00:24:40,600 --> 00:24:42,010 Og legg merke til et par ting. 523 00:24:42,010 --> 00:24:45,270 Selv om det er denne kryptiske ting her, jeg har ikke gjentatt det når du 524 00:24:45,270 --> 00:24:46,010 lukk taggen. 525 00:24:46,010 --> 00:24:48,230 Du bare lukke tag med sitt navn alene. 526 00:24:48,230 --> 00:24:50,940 Og dette er det som kalles et attributt med en verdi. 527 00:24:50,940 --> 00:24:56,070 Attributter bare endre atferd av noen kode innsiden av en side. 528 00:24:56,070 --> 00:24:59,150 >> Så dette er å spesifisere at hyper referanse, den fancy måte å si det 529 00:24:59,150 --> 00:25:03,660 URL for dette ankeret, for dette kobling, bør være CS50.net. 530 00:25:03,660 --> 00:25:07,440 Og teksten som vi ønsker å vise Brukeren er ikke så rå URL, men heller 531 00:25:07,440 --> 00:25:08,730 ordet CS50. 532 00:25:08,730 --> 00:25:13,710 >> Så hvis jeg nå laste, la meg zoome inn for klarhet, la meg laste siden på nytt, 533 00:25:13,710 --> 00:25:16,460 legge merke til at vi har denne gamle skolen blå understreket link. 534 00:25:16,460 --> 00:25:20,000 Og hvis jeg sveve over det, og det kommer å være vanskelig å se, i nedre venstre 535 00:25:20,000 --> 00:25:23,690 hjørne av skjermen, merker at det står nettadressen som 536 00:25:23,690 --> 00:25:24,430 Jeg kommer til å gå. 537 00:25:24,430 --> 00:25:27,940 Og hvis jeg klikker der, voila, nå er jeg lage websider. 538 00:25:27,940 --> 00:25:30,140 Og vi har ført oss til hjemmesiden. 539 00:25:30,140 --> 00:25:32,670 >> Men legg merke til hvilket potensial dette gir oss. 540 00:25:32,670 --> 00:25:34,890 Sikkerhet er veldig mye på moten i disse dager. 541 00:25:34,890 --> 00:25:41,210 Hva om jeg i stedet si noe sånt dette, og jeg i stedet gå til, si, la oss 542 00:25:41,210 --> 00:25:42,460 se, fakeCS50.net. 543 00:25:42,460 --> 00:25:44,660 544 00:25:44,660 --> 00:25:46,360 Last denne siden. 545 00:25:46,360 --> 00:25:50,180 >> OK, så merker det fortsatt ser ut som jeg er kommer til å CS50, med mindre en slu øye 546 00:25:50,180 --> 00:25:51,560 vil merke jeg skal falsk CS50. 547 00:25:51,560 --> 00:25:54,550 Jeg gjetter dette domenet er ikke tatt. 548 00:25:54,550 --> 00:25:55,960 OK, så det er ikke tilgjengelig. 549 00:25:55,960 --> 00:25:56,600 Så det er bra. 550 00:25:56,600 --> 00:25:57,900 Ingen har faktisk det domenet. 551 00:25:57,900 --> 00:26:00,380 >> Men la oss være litt mer skadelig fordi det er skikkelig teit. 552 00:26:00,380 --> 00:26:02,240 Hva om vi endrer dette til Paypal. 553 00:26:02,240 --> 00:26:09,960 Og hva om vi kaller dette, liker, www.paypal.badguy.com, 554 00:26:09,960 --> 00:26:12,070 hva domenet er. 555 00:26:12,070 --> 00:26:13,700 Som eksisterer sannsynligvis. 556 00:26:13,700 --> 00:26:16,260 Så nå la meg laste siden på nytt. 557 00:26:16,260 --> 00:26:22,890 Og her har vi liksom en phishing angrep, P-H-I-S-H-I-N-G, som er den 558 00:26:22,890 --> 00:26:26,760 dumt ord gitt for et angrep som prøver å fiske informasjon, eller bedre 559 00:26:26,760 --> 00:26:30,450 ennå, penger, ut av folk ved å lure dem til å oppgi informasjon som 560 00:26:30,450 --> 00:26:31,990 de ellers kanskje ikke ville gjøre. 561 00:26:31,990 --> 00:26:33,500 Dette ser helt legit, ikke sant? 562 00:26:33,500 --> 00:26:34,930 Jeg må ha en link her til Paypal.com. 563 00:26:34,930 --> 00:26:37,700 564 00:26:37,700 --> 00:26:40,430 I rettferdighet, hvis jeg sexed det opp med noen grafikk, kan vi gjøre det ser 565 00:26:40,430 --> 00:26:41,310 mer som PayPal. 566 00:26:41,310 --> 00:26:41,510 Høyre? 567 00:26:41,510 --> 00:26:43,815 Fordi jeg kunne, som en side, Jeg kunne gå til Paypal.com. 568 00:26:43,815 --> 00:26:47,110 Og vi har bare sett hvordan jeg kan se alle HTML deres. 569 00:26:47,110 --> 00:26:50,560 Jeg kunne bare kopiere det og gjenskape estetikk Paypal heller enn å gå 570 00:26:50,560 --> 00:26:51,490 gamle skolen her. 571 00:26:51,490 --> 00:26:55,010 Men legg merke til, selvfølgelig, og det er litt liten fortsatt, bare i nedre 572 00:26:55,010 --> 00:26:59,190 venstre hjørne, inn som en 10 poeng skrift, ser du hva nettadressen du er 573 00:26:59,190 --> 00:27:01,310 faktisk kommer til å bli ledet til. 574 00:27:01,310 --> 00:27:06,580 >> Og så hvis du noen gang har fått spam si gå videre, og du er konto 575 00:27:06,580 --> 00:27:07,420 har blitt kompromittert. 576 00:27:07,420 --> 00:27:10,615 Vennligst klikk på denne linken og gi oss beskjed passordet ditt, slik at vi kan sikre at du er 577 00:27:10,615 --> 00:27:13,010 deg, ikke noen gang gjør det. 578 00:27:13,010 --> 00:27:14,180 Disse tingene bør gå uten å si. 579 00:27:14,180 --> 00:27:17,670 Men det er fantastisk morsomt, og tragisk, hvor hvert år dette synes å 580 00:27:17,670 --> 00:27:19,660 skje med noen ikke-null antall personer. 581 00:27:19,660 --> 00:27:21,400 >> Og det er skjønnheten av phishing-angrep. 582 00:27:21,400 --> 00:27:23,160 Du kan sende ut en million e-poster. 583 00:27:23,160 --> 00:27:27,720 Og selv om 0,01% av folk faktisk klikk på Paypal og gi deg din 584 00:27:27,720 --> 00:27:31,040 passord, er det fortsatt en ikke-null nummer mennesker som har bare gi 585 00:27:31,040 --> 00:27:32,200 du pengene sine. 586 00:27:32,200 --> 00:27:36,170 Og sende e-poster, selvfølgelig, er ganske enkelt og, i hovedsak, gratis 587 00:27:36,170 --> 00:27:36,970 disse dager. 588 00:27:36,970 --> 00:27:40,410 >> Så lang historie kort, fantastisk vakker idé, ikke sant? 589 00:27:40,410 --> 00:27:44,620 År siden, var dette den tidligste web, slik at et nett av 590 00:27:44,620 --> 00:27:46,330 hyperlenker mellom ressurser. 591 00:27:46,330 --> 00:27:49,520 Men så fort kan det være brukes for syke formål. 592 00:27:49,520 --> 00:27:54,100 Og e-post, er nok å si, disse dager, har HTML innebygd inni. 593 00:27:54,100 --> 00:27:55,410 >> Vel, la meg bare en ting til. 594 00:27:55,410 --> 00:27:58,640 Og vi vil utsette hovedsak seksjon i Problemet satt sju slik at du kan 595 00:27:58,640 --> 00:28:00,000 utforske enkeltheter. 596 00:28:00,000 --> 00:28:01,990 Men la meg gå videre og gjøre et par ting her. 597 00:28:01,990 --> 00:28:04,840 Jeg kommer til å gå inn og erklære det som kalles en div, eller 598 00:28:04,840 --> 00:28:06,080 divisjon, på siden. 599 00:28:06,080 --> 00:28:07,770 La meg nær at div tag. 600 00:28:07,770 --> 00:28:11,460 >> Og jeg kommer til å si opp her øverst på siden. 601 00:28:11,460 --> 00:28:14,940 Og så under dette, kommer jeg til å gjøre noe som en annen div, lukke dette 602 00:28:14,940 --> 00:28:17,800 tag, og gjøre nederst på siden. 603 00:28:17,800 --> 00:28:18,840 Og la oss lagre det. 604 00:28:18,840 --> 00:28:21,040 >> Så nå la oss gå tilbake til min fil. 605 00:28:21,040 --> 00:28:22,120 Veldig uimponerende. 606 00:28:22,120 --> 00:28:25,520 Men det som er brukt for divisjon, under panseret, er det faktisk 607 00:28:25,520 --> 00:28:26,920 en fin strukturelle element. 608 00:28:26,920 --> 00:28:30,300 Det har ikke noen estetikk så vidt vi kan se, annet enn, tilsynelatende, 609 00:28:30,300 --> 00:28:31,890 å sette ting på nye linjer. 610 00:28:31,890 --> 00:28:36,290 >> Men legg merke til, som en side, bare treffer Tast ikke klippe det i HTML som det 611 00:28:36,290 --> 00:28:39,840 ikke i C. Du tenker kanskje at det er kommer til å sette en fin stor gap mellom 612 00:28:39,840 --> 00:28:41,300 øverst og nederst på siden. 613 00:28:41,300 --> 00:28:43,420 Men det er ignorert. 614 00:28:43,420 --> 00:28:48,040 Tomrom er hovedsakelig ignorert i websider andre enn den aller første 615 00:28:48,040 --> 00:28:51,530 space bar tegn eller linjeskift, at du treffer på tastaturet. 616 00:28:51,530 --> 00:28:55,370 Hvis du vil ha flere linjeskift, du må spesifisere det selv. 617 00:28:55,370 --> 00:28:59,080 >> Så jeg kommer til å gjøre et par ting her for å vise hva som skjer. 618 00:28:59,080 --> 00:29:02,700 Jeg kommer til å legge til et attributt som finnes Og igjen, måten du lærer 619 00:29:02,700 --> 00:29:07,110 hvilke attributter finnes, hva kodene finnes, egentlig er online referanser. 620 00:29:07,110 --> 00:29:09,750 HTML er slags språk - det er ikke et programmeringsspråk. 621 00:29:09,750 --> 00:29:12,460 Det er et kodespråk - at etter en god halvtime, kanskje, en time med 622 00:29:12,460 --> 00:29:15,930 det, vil du sikkert forstå, mest sannsynligvis, den grunnleggende ideen. 623 00:29:15,930 --> 00:29:20,350 Og så et Google-søk er borte alle mulige koder som du kan være 624 00:29:20,350 --> 00:29:21,170 interessert i. 625 00:29:21,170 --> 00:29:24,290 Og per spec, er at ganske velkommen og oppmuntret her. 626 00:29:24,290 --> 00:29:26,120 >> Så nå la meg gå videre og gjøre noe som dette. 627 00:29:26,120 --> 00:29:28,690 Background-color. 628 00:29:28,690 --> 00:29:32,060 Og nå kommer jeg til å gjøre noe som rød, semikolon. 629 00:29:32,060 --> 00:29:33,970 Og du kan gjøre dette i et par forskjellige måter. 630 00:29:33,970 --> 00:29:36,770 Jeg er bare slags skrive det som super eksplisitt som mulig. 631 00:29:36,770 --> 00:29:41,960 >> Men det viser seg at denne verdien her er det som kalles CSS, Cascading Style 632 00:29:41,960 --> 00:29:43,700 Ark, som er en annen språk helt. 633 00:29:43,700 --> 00:29:46,770 CSS har ingenting å gjøre med åpne koder og nære koder. 634 00:29:46,770 --> 00:29:48,230 Det har å gjøre med egenskaper. 635 00:29:48,230 --> 00:29:52,660 >> Og egenskaper er rett og slett nøkkelen verdi parene, som bare betyr noen ord, 636 00:29:52,660 --> 00:29:54,680 kolon, og deretter noen andre ord. 637 00:29:54,680 --> 00:29:57,940 Og hvis du har flere seg, eller bare en her, kan du avslutte den med en 638 00:29:57,940 --> 00:29:59,390 semikolon, bare for klarhet. 639 00:29:59,390 --> 00:30:01,370 Men det vil også fungere her. 640 00:30:01,370 --> 00:30:02,500 >> Nå hva dette kommer til å gjøre? 641 00:30:02,500 --> 00:30:03,610 Du kan sikkert gjette. 642 00:30:03,610 --> 00:30:05,930 La meg gå videre og laste denne siden. 643 00:30:05,930 --> 00:30:07,300 Og nå er det virkelig kommer sammen. 644 00:30:07,300 --> 00:30:09,150 Så øverst på siden min er rød. 645 00:30:09,150 --> 00:30:12,380 Men det som er viktig her er at, jeg nevnte tidligere, som gir div deg 646 00:30:12,380 --> 00:30:13,220 en divisjon av siden. 647 00:30:13,220 --> 00:30:14,410 Og det er faktisk hva det gjør. 648 00:30:14,410 --> 00:30:17,920 Den deler egentlig siden inn et rektangel som du kan deretter 649 00:30:17,920 --> 00:30:18,720 manipulere. 650 00:30:18,720 --> 00:30:22,330 >> Og denne oppfatningen av rektangler er slags overbevisende i det, hvis du tenker på 651 00:30:22,330 --> 00:30:26,410 mest hvilken som helst nettside, er det sannsynligvis noen strukturen til den. 652 00:30:26,410 --> 00:30:29,620 De fleste av dere har sikkert sjelden sett Facebook sin hjemmeside hvis du er logget 653 00:30:29,620 --> 00:30:30,440 i hele tiden. 654 00:30:30,440 --> 00:30:33,920 >> Men på Facebook hjemmeside, er det en slags div langs toppen. 655 00:30:33,920 --> 00:30:36,140 Og det er kanskje ikke så enkelt som en div, men det er en 656 00:30:36,140 --> 00:30:37,560 rektangulært område der. 657 00:30:37,560 --> 00:30:40,290 Resten av den siden som er en stor div, som en mye 658 00:30:40,290 --> 00:30:41,910 større rektangulært område. 659 00:30:41,910 --> 00:30:44,540 Så lang historie kort, bare ved å ha disse små byggesteiner, de 660 00:30:44,540 --> 00:30:49,250 evne til å modellere ting som rektangler, enten bred eller smal, kan du også 661 00:30:49,250 --> 00:30:53,680 lage kolonner potensielt, kan du legge ut sider, egentlig, men du 662 00:30:53,680 --> 00:30:54,100 ønsker. 663 00:30:54,100 --> 00:30:56,170 Vi er egentlig bare skrape overflaten her. 664 00:30:56,170 --> 00:30:59,820 >> Faktisk, hvis jeg gjør en annen en, la meg gå videre og gjøre stilen, 665 00:30:59,820 --> 00:31:05,410 background-color, vil vi gjøre noe som blå, nære anførselstegn. 666 00:31:05,410 --> 00:31:06,620 La oss laste dette. 667 00:31:06,620 --> 00:31:08,260 Så nå det blir enda styggere. 668 00:31:08,260 --> 00:31:11,520 Men nå kan jeg slags briljere min P satt fem ferdigheter, ikke sant? 669 00:31:11,520 --> 00:31:12,690 Red. 670 00:31:12,690 --> 00:31:15,640 Det minner meg om RGB, Red Grønne Blå tremannsrom. 671 00:31:15,640 --> 00:31:19,330 Vel, det viser seg i webprogrammering, eller web design, som er denne, har vi 672 00:31:19,330 --> 00:31:21,650 ennå ikke programmert noe per se, kan du faktisk 673 00:31:21,650 --> 00:31:22,880 har heksadesimalskrift. 674 00:31:22,880 --> 00:31:26,480 Så noe noe, noe noe, noe noe. 675 00:31:26,480 --> 00:31:30,650 Så du kan ha seks heksadesimale tegn, eller tre, i noen tilfeller 676 00:31:30,650 --> 00:31:33,480 og hver av disse spørsmålstegn må være en heksadesimalsifre, 677 00:31:33,480 --> 00:31:34,985 null gjennom f. 678 00:31:34,985 --> 00:31:41,000 >> Hvis jeg ønsker å ha mye rødt, og ingen grønne, og ingen blå, hva er 679 00:31:41,000 --> 00:31:43,740 motsatte av null ved bruk av hex? 680 00:31:43,740 --> 00:31:44,480 Det er f. 681 00:31:44,480 --> 00:31:51,130 Så jeg kan gjøre ff, null null, null null, lagre dette, og nå kommer ned hit. 682 00:31:51,130 --> 00:31:52,700 Og jeg faktisk ikke se en endring. 683 00:31:52,700 --> 00:31:56,230 Så quote unquote "rød" er tilsynelatende synonymt for alle røde, 684 00:31:56,230 --> 00:31:57,610 ingen grønne, ingen blå. 685 00:31:57,610 --> 00:31:59,960 I mellomtiden, la oss bevisst endre dette å være noe 686 00:31:59,960 --> 00:32:01,210 tilfeldig, som ABCDF. 687 00:32:01,210 --> 00:32:03,790 688 00:32:03,790 --> 00:32:05,860 >> La oss se hva det er. 689 00:32:05,860 --> 00:32:08,530 Det er en veldig fin blå, faktisk, baby blå. 690 00:32:08,530 --> 00:32:11,820 Ok, så dette er bare nå noe tilfeldige kombinasjoner av 691 00:32:11,820 --> 00:32:12,210 tegn. 692 00:32:12,210 --> 00:32:13,410 Så vi vil ikke overbelastes ned her. 693 00:32:13,410 --> 00:32:15,930 Men igjen, taler dette til presisjon at du kan begynne å 694 00:32:15,930 --> 00:32:19,090 gjelder - selv om du er veldig overveldet av estetikk. 695 00:32:19,090 --> 00:32:21,750 Faktisk, hvis du virkelig vil være imponert, la meg gå videre og endre 696 00:32:21,750 --> 00:32:23,500 skriftstørrelse, for eksempel. 697 00:32:23,500 --> 00:32:25,960 Og legg merke til semikolon, som er nødvendig der. 698 00:32:25,960 --> 00:32:29,570 >> Skriftstørrelse, kan vi være bare latterlig her, 96 poeng. 699 00:32:29,570 --> 00:32:31,280 Lagre som. 700 00:32:31,280 --> 00:32:33,670 Wow, det er en stor skriftstørrelse. 701 00:32:33,670 --> 00:32:35,490 Ok, så det er veldig enkelt. 702 00:32:35,490 --> 00:32:38,260 Og faktisk, er du i hovedsak å se den aller første web side jeg laget 703 00:32:38,260 --> 00:32:40,060 år siden, da jeg først lært denne ting. 704 00:32:40,060 --> 00:32:42,190 Det er veldig enkelt å lage svært heslig ting raskt. 705 00:32:42,190 --> 00:32:46,115 >> Og hvis du er kjent med Wayback Minibank på archive.org, du 706 00:32:46,115 --> 00:32:48,210 kan finne all min heslig undergrad nettsider. 707 00:32:48,210 --> 00:32:50,090 En hadde Kermit the Frog på forsiden. 708 00:32:50,090 --> 00:32:53,150 Jeg gikk gjennom en fase der jeg trodde det var kjølig for å ta bakgrunnen av 709 00:32:53,150 --> 00:32:56,320 en rød gardin, da jeg lærte hvordan du can fliser bilder igjen, og igjen, og 710 00:32:56,320 --> 00:32:59,540 igjen, for å fylle en side med en stor klebrig rød gardin. 711 00:32:59,540 --> 00:33:03,120 Og så, på toppen av dette, var et ikon at du måtte klikke for å gå inn i min hjem 712 00:33:03,120 --> 00:33:04,960 side fordi det var veldig mye på moten. 713 00:33:04,960 --> 00:33:08,870 >> Og så min første programmet jeg noen gang skrev var ikke i PHP, men på et språk 714 00:33:08,870 --> 00:33:12,260 kalt Pearl, skrev en gjestebok, som er en veldig kul ting at en 715 00:33:12,260 --> 00:33:14,250 Mange forventer at du å ha på en hjemmeside. 716 00:33:14,250 --> 00:33:17,510 Når du kommer til siden, de vil ha deg å logge på, og si hvem du er, 717 00:33:17,510 --> 00:33:18,720 og hvorfor du er der. 718 00:33:18,720 --> 00:33:21,320 Dette er veldig 1990-tallet stil webdesign. 719 00:33:21,320 --> 00:33:24,130 >> Men i disse dager, sikkert, har vi kommet mye lenger. 720 00:33:24,130 --> 00:33:27,560 Og du vil se, i snitt, og selv i problemet satt syv, etter 721 00:33:27,560 --> 00:33:31,570 utnytte bibliotekene i disse dager, det er så mye enklere å gjøre 722 00:33:31,570 --> 00:33:33,400 penere ting raskt. 723 00:33:33,400 --> 00:33:36,550 Virkelig her, vi bare skrape overflaten av hva du kan gjøre 724 00:33:36,550 --> 00:33:37,400 stilistisk. 725 00:33:37,400 --> 00:33:41,660 >> Og faktisk, allerede, la meg understreke at dette er allerede å få stygge, ikke 726 00:33:41,660 --> 00:33:46,030 bare estetisk, men i form av stilen koden min, eller 727 00:33:46,030 --> 00:33:47,260 utformingen av koden min. 728 00:33:47,260 --> 00:33:52,350 Jeg har for tiden comingled HTML, som er de grønnlige åpne kodene der, med 729 00:33:52,350 --> 00:33:55,160 CSS egenskaper, som er helt legit. 730 00:33:55,160 --> 00:33:57,200 Dette er virkelig der språket hadde sin opprinnelse. 731 00:33:57,200 --> 00:34:01,030 >> Men av hensyn til ren design, mye som vi startet factoring ting 732 00:34:01,030 --> 00:34:05,370 ut fra C-filer til. h filer, la meg faktisk praktisere den slags 733 00:34:05,370 --> 00:34:07,990 prinsippet og begynne å gjøre dette stedet. 734 00:34:07,990 --> 00:34:13,280 La meg sette en stil tag opp her, som også finnes i HTML, og la meg 735 00:34:13,280 --> 00:34:15,330 angir du følgende. 736 00:34:15,330 --> 00:34:16,360 La meg slette denne. 737 00:34:16,360 --> 00:34:18,110 Bakgrunnsfargen skal være rød. 738 00:34:18,110 --> 00:34:19,800 Jeg kommer til å slette dette helt. 739 00:34:19,800 --> 00:34:22,580 Jeg kommer til å kvitte seg med stil attributt, og jeg kommer til unikt 740 00:34:22,580 --> 00:34:24,620 identifisere denne div med et ord - 741 00:34:24,620 --> 00:34:28,750 vilkårlig, men rimelig, sitat unquote "topp." Og id er en spesiell 742 00:34:28,750 --> 00:34:32,530 attributt som unikt definerer en viss HTML element 743 00:34:32,530 --> 00:34:33,850 som å ha som id. 744 00:34:33,850 --> 00:34:37,969 >> Hvis jeg nå ønsker å stilisert det, her oppe i hodet på siden min, innsiden av 745 00:34:37,969 --> 00:34:41,730 stil tag, legge merke til at Jeg kan gjøre hash toppen. 746 00:34:41,730 --> 00:34:45,300 Og så kan jeg sette et par krøllete bukseseler, som minner om C, og la 747 00:34:45,300 --> 00:34:47,130 me lim i at stilisering. 748 00:34:47,130 --> 00:34:49,929 Og la meg gå videre her og forutse hvor jeg skal med dette. 749 00:34:49,929 --> 00:34:53,380 La meg også opprette en for den nederste div. 750 00:34:53,380 --> 00:34:58,010 La meg ta denne heslig koden fra ned her, legg den inn her, og jeg skal være 751 00:34:58,010 --> 00:35:00,770 litt mer anal nå og stilisert det ved bare å sette ting på egenhånd 752 00:35:00,770 --> 00:35:02,540 linje, og endte med semikolon. 753 00:35:02,540 --> 00:35:04,430 La meg bli kvitt stilen tag. 754 00:35:04,430 --> 00:35:05,320 >> Men jeg er ikke ferdig ennå. 755 00:35:05,320 --> 00:35:07,406 Jeg trenger å gjøre en annen ting. 756 00:35:07,406 --> 00:35:10,070 Ja, lik id sitat unquote, "bottom", eller hva id jeg vil 757 00:35:10,070 --> 00:35:11,740 gi dette elementet. 758 00:35:11,740 --> 00:35:13,420 Nå, la meg gå tilbake hit. 759 00:35:13,420 --> 00:35:14,360 Og dette er fryktelig. 760 00:35:14,360 --> 00:35:15,805 Jeg kan ikke forholde seg til 96 poeng. 761 00:35:15,805 --> 00:35:16,960 La oss gjøre 24 poeng. 762 00:35:16,960 --> 00:35:18,320 Eller du kan være mer presis. 763 00:35:18,320 --> 00:35:21,800 Du kan faktisk bruke piksler, px, så at du virkelig får finere korn 764 00:35:21,800 --> 00:35:23,220 kontroll over siden din. 765 00:35:23,220 --> 00:35:26,860 >> Som en side, det er ikke nødvendigvis den beste tingen hvis brukerne, for 766 00:35:26,860 --> 00:35:29,650 tilgjengelighet grunner, ønsker å være i stand til å øke størrelser. 767 00:35:29,650 --> 00:35:32,650 Så innse at det finnes måter å gjøre ting som ikke nødvendigvis 768 00:35:32,650 --> 00:35:34,230 hardt kode alt. 769 00:35:34,230 --> 00:35:37,220 >> Ok, så det er større, 24 poeng, enn hva standard er. 770 00:35:37,220 --> 00:35:38,630 Men nå er det litt renere. 771 00:35:38,630 --> 00:35:40,230 Og la meg ta dette ett skritt videre. 772 00:35:40,230 --> 00:35:47,220 Akkurat som ideen om header-filer, merker vi er ett skritt nærmere den. 773 00:35:47,220 --> 00:35:52,000 Jeg har priset ut, men fortsatt igjen, innsiden av min side, disse CSS-regler. 774 00:35:52,000 --> 00:35:56,200 Hvorfor kan jeg ønsker å ta dette ett skritt videre, fjerne denne helt, og 775 00:35:56,200 --> 00:35:59,860 legg den i en egen fil? 776 00:35:59,860 --> 00:36:01,070 >> Så jeg kan bruke det, ikke sant? 777 00:36:01,070 --> 00:36:03,155 Dette er bare slags intuisjon akkurat nå. 778 00:36:03,155 --> 00:36:06,340 Før, hevdet jeg at det var bare får stygge ha stil 779 00:36:06,340 --> 00:36:08,480 attributter innsiden av DIVs seg. 780 00:36:08,480 --> 00:36:09,750 Men bare slags tror at gjennom. 781 00:36:09,750 --> 00:36:13,560 Som din side blir lengre og lengre, hvis du setter her, og her, og 782 00:36:13,560 --> 00:36:18,350 her, og her, alle disse forskjellige farger og skriftstørrelser og andre slike 783 00:36:18,350 --> 00:36:22,550 attributter, er siden din svært raskt kommer til å bli uhåndterlig for deg. 784 00:36:22,550 --> 00:36:24,570 >> Hvis noen kommer opp til deg og sier, oh, vet du hva? 785 00:36:24,570 --> 00:36:28,070 Jeg hadde virkelig lyst til å endre skriftstørrelsen med ytterligere to poeng, du 786 00:36:28,070 --> 00:36:31,275 kanskje gå og finne og erstatte et stort antall linjer med kode. 787 00:36:31,275 --> 00:36:35,170 Det er mye mer overbevisende å sentralisere alle slike estetikk her. 788 00:36:35,170 --> 00:36:38,850 Men hvis du ønsker å gjenbruke de estetikk i flere websider, alle 789 00:36:38,850 --> 00:36:41,100 jo mer overbevisende til, for eksempel opprette en fil 790 00:36:41,100 --> 00:36:45,290 heter med dette innholdet. 791 00:36:45,290 --> 00:36:46,680 >> Og la meg gjøre dette. 792 00:36:46,680 --> 00:36:51,150 793 00:36:51,150 --> 00:36:51,920 Lagre denne filen. 794 00:36:51,920 --> 00:36:55,580 Jeg sier styles.css, vilkårlig, men konvensjonelle. 795 00:36:55,580 --> 00:36:58,770 Jeg skal sette den i John Harvard hjem katalogen nå for enkelhet. 796 00:36:58,770 --> 00:37:03,880 Og hva jeg kan gjøre i min nettside er få kvitte seg med stil tag helt, 797 00:37:03,880 --> 00:37:08,270 og noe unintuitively, bruker en link tag, som ikke gir deg en kobling i 798 00:37:08,270 --> 00:37:13,140 hyperkoblingen, klikkbare forstand, men hvor jeg si link, href lik 799 00:37:13,140 --> 00:37:15,120 styles.css. 800 00:37:15,120 --> 00:37:20,050 Og forholdet at dette element har med nettsiden er å tjene som 801 00:37:20,050 --> 00:37:21,280 sin stilark. 802 00:37:21,280 --> 00:37:22,670 >> Så hvordan fikk jeg vite dette? 803 00:37:22,670 --> 00:37:25,950 One, du bare lese manualen, eller du Google rundt, og du 804 00:37:25,950 --> 00:37:27,000 se på ulike ressurser. 805 00:37:27,000 --> 00:37:30,520 Jeg mener, det er virkelig hvordan du plukke opp teknikker som dette, og konsekvent 806 00:37:30,520 --> 00:37:34,720 med denne ideen om å lære seg nye språk, igjen, vil du finne at 807 00:37:34,720 --> 00:37:38,830 det er bare et endelig antall ting til alle språk som, når du får 808 00:37:38,830 --> 00:37:41,310 dem, vil du finne at det blir raskere og raskere å skrive. 809 00:37:41,310 --> 00:37:44,180 Faktisk, lære et nytt programmeringsspråk språket er så mye raskere enn en ny 810 00:37:44,180 --> 00:37:47,380 talespråk fordi disse tingene er mye mindre og mye mer 811 00:37:47,380 --> 00:37:48,820 presist definert. 812 00:37:48,820 --> 00:37:51,590 >> Men jeg har merket litt av en anomali her. 813 00:37:51,590 --> 00:37:57,750 Hvorfor har jeg understreket dette skråstrek her? 814 00:37:57,750 --> 00:37:59,420 Fordi jeg må lukke taggen. 815 00:37:59,420 --> 00:38:00,530 Jeg skal lukke taggen. 816 00:38:00,530 --> 00:38:02,750 Og du vil finne utallige ressurser online som ikke gjør det 817 00:38:02,750 --> 00:38:04,080 nødvendigvis nære koder. 818 00:38:04,080 --> 00:38:08,770 Og realistisk, det er ikke strengt nødvendig for teknisk og det finnes 819 00:38:08,770 --> 00:38:11,950 Av hensyn til virkeligheten, nettlesere er bare ganske tolerant av feil i nettet 820 00:38:11,950 --> 00:38:14,360 sider, for bedre eller verre, men stort sett verre. 821 00:38:14,360 --> 00:38:18,830 >> Så dette her er bare en renere måte si noe dumt som dette, 822 00:38:18,830 --> 00:38:22,330 der hvis du ønsker å åpne link tag men lukke det, det er egentlig ingen forestilling 823 00:38:22,330 --> 00:38:23,720 av innhold for en link tag. 824 00:38:23,720 --> 00:38:26,000 Det betyr bare laste denne filen og legg den her. 825 00:38:26,000 --> 00:38:30,610 Det er som skarp inkluderer i C. Du kan åpne og lukke en kode på en gang 826 00:38:30,610 --> 00:38:31,660 innenfor den samme koden. 827 00:38:31,660 --> 00:38:33,520 Og det er andre eksempler på dette. 828 00:38:33,520 --> 00:38:37,280 Dette er ikke måten å gjøre dette på, men br tag, for linjeskift, hvis jeg 829 00:38:37,280 --> 00:38:41,780 virkelig ønsket å oppnå det jeg var prøver å før ved å trykke Enter, hvis 830 00:38:41,780 --> 00:38:45,380 Jeg eksplisitt sier linjeskift, linjeskift, linjeskift, linjeskift, og 831 00:38:45,380 --> 00:38:49,100 deretter laste denne siden, nå vil du legge merke til at bunnen av siden er, 832 00:38:49,100 --> 00:38:51,940 ja, mye lenger ned i nederst på siden. 833 00:38:51,940 --> 00:38:55,840 Men selv om det kan gjøres mye mer rent med CSS, og med marginer, 834 00:38:55,840 --> 00:38:58,120 og med andre slike estetiske teknikker. 835 00:38:58,120 --> 00:38:59,940 >> Så for nå, takeaways er dette. 836 00:38:59,940 --> 00:39:02,320 I HTML har vi disse ting kalt tags. 837 00:39:02,320 --> 00:39:04,830 I CSS har vi disse tingene kalt egenskaper. 838 00:39:04,830 --> 00:39:08,700 Vi kan comingle disse to språkene, enten ved hjelp av stil-attributt, 839 00:39:08,700 --> 00:39:14,240 eller stilen tag, eller det aller beste, factoring den ut helt, som vi gjør 840 00:39:14,240 --> 00:39:17,270 i problemet satt syv. 841 00:39:17,270 --> 00:39:23,820 Spørsmål, da, om konseptuelle grunnleggende her? 842 00:39:23,820 --> 00:39:24,740 >> PUBLIKUM: Jeg har et spørsmål. 843 00:39:24,740 --> 00:39:25,630 >> SPEAKER 1: Oh, sorry. 844 00:39:25,630 --> 00:39:28,880 >> PUBLIKUM: Hvorfor var det ikke farget - 845 00:39:28,880 --> 00:39:31,410 >> SPEAKER 1: Oh, i den andre kategorien? 846 00:39:31,410 --> 00:39:32,232 Dette her? 847 00:39:32,232 --> 00:39:33,482 >> PUBLIKUM: Nei, det er liksom - 848 00:39:33,482 --> 00:39:35,330 849 00:39:35,330 --> 00:39:39,480 >> SPEAKER 1: Å, det er fordi Jeg ble slurvete. 850 00:39:39,480 --> 00:39:41,350 Jeg satte filen på feil sted. 851 00:39:41,350 --> 00:39:47,840 Så hvis jeg faktisk si det her, og jeg chmod det, alt + r for styles.css, og 852 00:39:47,840 --> 00:39:52,050 nå laste siden på nytt, nå er vi få stilisering tilbake. 853 00:39:52,050 --> 00:39:54,530 Og fordi skriftstørrelser forskjellige, ser vi ikke fullt så mye 854 00:39:54,530 --> 00:39:55,010 white space. 855 00:39:55,010 --> 00:39:58,240 Vi i stedet se hva som er den Standard er stedet. 856 00:39:58,240 --> 00:40:00,050 Godt spørsmål. 857 00:40:00,050 --> 00:40:00,846 Ja? 858 00:40:00,846 --> 00:40:02,630 >> PUBLIKUM: Hvorfor er linken tag inne i header? 859 00:40:02,630 --> 00:40:06,270 >> SPEAKER 1: Hvorfor er linkene tag innsiden av hodet - 860 00:40:06,270 --> 00:40:07,650 korte svaret, bare fordi. 861 00:40:07,650 --> 00:40:08,930 Det er hva som ble bestemt. 862 00:40:08,930 --> 00:40:10,720 Det er der koblingen kodene gå når du har det som kalles en 863 00:40:10,720 --> 00:40:13,650 eksternt stilark. 864 00:40:13,650 --> 00:40:16,430 Andre spørsmål? 865 00:40:16,430 --> 00:40:17,770 >> Greit, vel la oss gjøre dette. 866 00:40:17,770 --> 00:40:20,500 Vi har så mye moro foran oss i dag. 867 00:40:20,500 --> 00:40:22,480 Det er bare skrape overflaten av CSS. 868 00:40:22,480 --> 00:40:23,010 La oss gjøre dette. 869 00:40:23,010 --> 00:40:25,980 La oss ta en fem minutters pause her fordi, per e-posten min, la oss henge i 870 00:40:25,980 --> 00:40:27,200 der til 02:30-ish dag. 871 00:40:27,200 --> 00:40:28,540 Men hvis du må forlate, det er fint. 872 00:40:28,540 --> 00:40:30,380 Men vi skal videre etter en fem minutters pause. 873 00:40:30,380 --> 00:40:35,930 Og vi vil lære noe om PHP, MySQL, og mer. 874 00:40:35,930 --> 00:40:44,520 >> Ok, så la oss prøve, nå, å knytte en noen av disse ideene sammen og gjøre, 875 00:40:44,520 --> 00:40:46,180 si, vår egen søkemotor. 876 00:40:46,180 --> 00:40:48,570 Jeg la merke til, heller nysgjerrig, følgende. 877 00:40:48,570 --> 00:40:52,610 Når du er på Google.com, er du vanligvis på en URL som dette her 878 00:40:52,610 --> 00:40:54,870 med ingenting etter dot com. 879 00:40:54,870 --> 00:40:59,760 Men hvis jeg søke noe dumt som katter, og trykk Enter, vil vi komme - ikke 880 00:40:59,760 --> 00:41:01,300 dum, men du vet. 881 00:41:01,300 --> 00:41:05,410 >> OK, så legge merke til, på toppen av siden, nå har URL, selvfølgelig, forandret seg. 882 00:41:05,410 --> 00:41:07,190 Og dette er ikke noe nytt for noen av oss. 883 00:41:07,190 --> 00:41:09,290 Du klikker linker og sånt skjer på nettet. 884 00:41:09,290 --> 00:41:11,420 Men det som er interessant her er følgende. 885 00:41:11,420 --> 00:41:14,500 Det er en hel masse rot, men la meg kaste bort ting som jeg ikke 886 00:41:14,500 --> 00:41:16,600 helt forstår eller ikke ser virkelig relevant. 887 00:41:16,600 --> 00:41:18,490 >> La meg bli kvitt dette. 888 00:41:18,490 --> 00:41:20,030 La meg bli kvitt dette. 889 00:41:20,030 --> 00:41:22,630 Og la meg bare bli kvitt av det hele. 890 00:41:22,630 --> 00:41:28,840 Og nå merke til at kattene er i nettadressen, etterfulgt med en Q, og et likt 891 00:41:28,840 --> 00:41:29,710 signere foran den. 892 00:41:29,710 --> 00:41:32,110 Så det viser seg at dette er hvordan Måten det fungerer når det gjelder 893 00:41:32,110 --> 00:41:33,360 til inngang og utgang. 894 00:41:33,360 --> 00:41:37,510 >> Vi har lenge snakket om svarte bokser, ikke sant? 895 00:41:37,510 --> 00:41:41,650 Så hvis dette er en funksjon implementert her som en svart boks, tar det inngang 896 00:41:41,650 --> 00:41:45,290 og gir utskrifter, vel, det betyr som du gi innspill til en 897 00:41:45,290 --> 00:41:49,270 Nettstedet er i form, ofte, av webadresser sin. 898 00:41:49,270 --> 00:41:52,850 Du bare setter et spørsmålstegn og deretter en tast lik verdi. 899 00:41:52,850 --> 00:41:56,740 Og så kanskje en ampersand, og deretter en annen viktig lik verdi, så kanskje 900 00:41:56,740 --> 00:41:58,810 en annen ampersand, lik sentral verdi. 901 00:41:58,810 --> 00:42:03,030 Det er hvordan du passerer i nøklene og verdier, par innganger. 902 00:42:03,030 --> 00:42:07,050 >> Så hvis jeg trykker på Enter nå, hva interessant om Google er at alle 903 00:42:07,050 --> 00:42:10,420 det rotet jeg slettes ikke vises å være strengt nødvendig. 904 00:42:10,420 --> 00:42:15,120 Alt jeg trenger å sende til Google er spørsmålet mark q lik katter å få 905 00:42:15,120 --> 00:42:16,160 sikkerhetskopiere noen katter. 906 00:42:16,160 --> 00:42:20,160 Vel, konsekvensen av det, da, er om jeg trekke opp gedit, har jeg begynt 907 00:42:20,160 --> 00:42:24,360 å lage min egen søkemotor her i en fil kalt seach0.html. 908 00:42:24,360 --> 00:42:26,750 >> Og la meg gå videre og slette en mer linje som du 909 00:42:26,750 --> 00:42:27,910 var ikke ment å se. 910 00:42:27,910 --> 00:42:31,070 Og nå, la meg gå inn i min egen nettleser, så ikke til Google, og gå til 911 00:42:31,070 --> 00:42:34,900 http://localhost. 912 00:42:34,900 --> 00:42:36,220 Og det kommer til å komme i veien. 913 00:42:36,220 --> 00:42:43,240 Så vi er nødt til å si farvel til det for nå, flytte denne over her, 914 00:42:43,240 --> 00:42:46,270 oh, nå er vi nødt til å si farvel til den filen. 915 00:42:46,270 --> 00:42:51,700 >> Når du har en fil som heter index.html eller index.php i en 916 00:42:51,700 --> 00:42:54,980 katalog, hvis webserveren er konfigurert på denne måten, hva du vil 917 00:42:54,980 --> 00:42:59,600 se, som standard, er innholdet i den fil snarere enn en liste av 918 00:42:59,600 --> 00:43:02,330 katalog, som jeg ønsket her. 919 00:43:02,330 --> 00:43:03,750 Mer om dette i spec. 920 00:43:03,750 --> 00:43:04,610 Du fikk ikke se det. 921 00:43:04,610 --> 00:43:06,360 >> Så dette er hva jeg egentlig ville. 922 00:43:06,360 --> 00:43:08,810 Men et øyeblikk siden, var det en filen i denne mappen som heter 923 00:43:08,810 --> 00:43:11,290 index.html og index.php. 924 00:43:11,290 --> 00:43:13,380 Og så webserveren var viser meg disse filene. 925 00:43:13,380 --> 00:43:15,900 I stedet ønsker jeg denne katalogen liste her. 926 00:43:15,900 --> 00:43:18,340 >> Så jeg kommer til å gå inn CSS og gå til search0. 927 00:43:18,340 --> 00:43:21,770 Og jeg påstår at dette er det skal være I begynnelsen av min egen konkurrerende 928 00:43:21,770 --> 00:43:22,490 søkemotor. 929 00:43:22,490 --> 00:43:27,630 Og for å gjøre dette, jeg kommer til å gå i her, i CSS, og åpne opp med 930 00:43:27,630 --> 00:43:30,190 gedit, 0 søket. 931 00:43:30,190 --> 00:43:32,280 Men dessverre, det er ikke mye som skjer her. 932 00:43:32,280 --> 00:43:35,690 Alt jeg gjorde var å bruke en overskrift tag, som skjer for å bli kalt h1, som 933 00:43:35,690 --> 00:43:38,180 betyr i hovedsak store og fet, og det er det. 934 00:43:38,180 --> 00:43:40,810 Men de midler som vi kan gir innganger er via disse 935 00:43:40,810 --> 00:43:42,180 ting som kalles former. 936 00:43:42,180 --> 00:43:46,040 >> Så la meg gå videre og åpne og lukke, preemptively, en form tag der. 937 00:43:46,040 --> 00:43:48,060 Og la meg gå videre og gjøre noe sånt som dette. 938 00:43:48,060 --> 00:43:51,430 Input, type er lik tekst. 939 00:43:51,430 --> 00:43:56,320 Og så la oss lukke tag innen brakettene selv. 940 00:43:56,320 --> 00:43:58,800 Jeg trenger ikke å starte et tekstfelt og stoppe et tekstfelt. 941 00:43:58,800 --> 00:44:01,080 Det er bare kommer til å være der eller ikke. 942 00:44:01,080 --> 00:44:06,210 >> Og deretter under det, la oss gjøre input type lik sende. 943 00:44:06,210 --> 00:44:06,870 Lagre dette. 944 00:44:06,870 --> 00:44:08,630 Og nå la oss bare gjøre en rask tilregnelighet sjekk. 945 00:44:08,630 --> 00:44:09,820 La oss lesse. 946 00:44:09,820 --> 00:44:10,890 >> OK, så det er ikke ille. 947 00:44:10,890 --> 00:44:13,260 Det er ikke Googles stil, men det er ganske nær. 948 00:44:13,260 --> 00:44:13,920 Det er et tekstfelt. 949 00:44:13,920 --> 00:44:17,190 Jeg kan skrive noen ting i, trykk Enter, men ingenting skjer ennå. 950 00:44:17,190 --> 00:44:21,090 Og det er fordi jeg ikke har spesifisert en handling for dette skjemaet, så å si. 951 00:44:21,090 --> 00:44:23,860 Så hvis jeg går tilbake til skjemaet element, det viser seg, og jeg vet at dette bare 952 00:44:23,860 --> 00:44:27,460 fra å ha lest dokumentasjonen, at form tag tar et attributt 953 00:44:27,460 --> 00:44:31,880 kalt handling som er nettadressen på nettsiden som du 954 00:44:31,880 --> 00:44:34,790 ønsker å sende skjemaet. 955 00:44:34,790 --> 00:44:37,610 >> Jeg vet egentlig ikke tror vi har tid til å gjennomføre hele bakenden for en 956 00:44:37,610 --> 00:44:38,570 søkemotor i dag. 957 00:44:38,570 --> 00:44:41,900 Så vi bare kommer til å si, eh, gå til google.com / søk. 958 00:44:41,900 --> 00:44:43,450 Og nå la meg lukke mine sitater. 959 00:44:43,450 --> 00:44:46,070 Og la meg presisere at metoden å bruke kommer 960 00:44:46,070 --> 00:44:47,120 å bli kalt får. 961 00:44:47,120 --> 00:44:50,650 >> Lang historie kort, det er to måter, ved minst, som du kan sende informasjon 962 00:44:50,650 --> 00:44:51,880 fra nettleseren til serveren. 963 00:44:51,880 --> 00:44:55,340 En er få, og for dagens formål, det betyr bare i nettadressen. 964 00:44:55,340 --> 00:44:58,730 Du ser akkurat de spørsmålstegnene, de likhetstegn, og ampersand at 965 00:44:58,730 --> 00:44:59,780 vi så tidligere. 966 00:44:59,780 --> 00:45:02,890 Eller er det et alternativ kalt post. 967 00:45:02,890 --> 00:45:06,490 For nå vet at innlegget er ofte brukt når du ønsker å laste opp filer, som 968 00:45:06,490 --> 00:45:09,820 bilder og så videre, eller når du vil sende inn kredittkortinformasjon, eller 969 00:45:09,820 --> 00:45:13,810 passord, noe som det ikke virkelig fornuftig, konseptuelt, eller 970 00:45:13,810 --> 00:45:18,020 sikkerhet klok, for å ende opp i nettadressen nettleseren, der snusing foreldre, 971 00:45:18,020 --> 00:45:21,520 eller romkamerater, eller noen med tilgang til datamaskinen din kan se. 972 00:45:21,520 --> 00:45:23,110 >> Så la oss lagre det her. 973 00:45:23,110 --> 00:45:24,480 Og jeg trenger å gjøre en annen ting. 974 00:45:24,480 --> 00:45:27,250 Det gjør nok ikke bare for å si gi meg et tekstfelt. 975 00:45:27,250 --> 00:45:29,850 Jeg må gi den feltets verdsetter et navn. 976 00:45:29,850 --> 00:45:34,500 Så la meg låne Googles valg av navn, q og angir at andre 977 00:45:34,500 --> 00:45:38,150 tilskriver jeg egentlig ikke bryr seg om navnet på Send-knappen. 978 00:45:38,150 --> 00:45:40,890 Alt jeg bryr meg om er å sende inn hva brukeren skriver i. 979 00:45:40,890 --> 00:45:41,940 >> Og nå er dette slags stygg. 980 00:45:41,940 --> 00:45:42,820 Den sier bare sende. 981 00:45:42,820 --> 00:45:46,350 Det viser seg, og jeg vet dette fra dokumentasjon, kan jeg faktisk si 982 00:45:46,350 --> 00:45:51,710 verdi tilsvarer sitat unquote "CS50 seach, "close sitat. 983 00:45:51,710 --> 00:45:53,030 Så la oss laste igjen. 984 00:45:53,030 --> 00:45:57,020 Så jeg holder trykket Kommando-R, eller Kontroll-R på min tastaturet for å lesse. 985 00:45:57,020 --> 00:45:58,605 >> Nå har vi en mer interessant søkemotor. 986 00:45:58,605 --> 00:46:00,340 Det ikke helt ser ut som Google ennå, though. 987 00:46:00,340 --> 00:46:04,100 Så la oss gå videre inn her og gjøre litt linjeskift. 988 00:46:04,100 --> 00:46:06,066 >> OK, så nå har vi Google. 989 00:46:06,066 --> 00:46:08,260 Vi har faktisk nesten har Google. 990 00:46:08,260 --> 00:46:10,460 Så nå hva som skal skje? 991 00:46:10,460 --> 00:46:12,220 Jeg kommer til å skrive noe liker katter. 992 00:46:12,220 --> 00:46:16,570 Og nettleseren kommer til å analysere at form som jeg definert. 993 00:46:16,570 --> 00:46:19,470 Og det kommer til å sende brukeren til denne nettadressen. 994 00:46:19,470 --> 00:46:23,420 Så denne gangen, for noen nysgjerrige grunn, Jeg fikk mer informasjon om aksjer 995 00:46:23,420 --> 00:46:24,410 enn om faktiske katter. 996 00:46:24,410 --> 00:46:30,580 Men det er fint fordi vi merker fortsatt endte opp her, er lik q katter. 997 00:46:30,580 --> 00:46:35,200 >> Så lang historie kort, det virker ganske trivielt å få input fra brukeren. 998 00:46:35,200 --> 00:46:38,190 Og for å være rettferdig, det er bunter av andre typer skjemafelt. 999 00:46:38,190 --> 00:46:41,510 Det er boksene, og lite gjensidig eksklusive radio knapper og 1000 00:46:41,510 --> 00:46:42,960 drop down menyer og mer. 1001 00:46:42,960 --> 00:46:46,160 Men alle disse er som relativt enkelt implementeres som 1002 00:46:46,160 --> 00:46:48,040 dette tekstfeltet var. 1003 00:46:48,040 --> 00:46:52,050 Og til slutt, vi må bare gjøre at noen lytter på den andre 1004 00:46:52,050 --> 00:46:56,490 ende av linjen for å få det informasjon bearbeides, liksom, og 1005 00:46:56,490 --> 00:46:58,440 gi oss tilbake våre katter. 1006 00:46:58,440 --> 00:47:00,840 >> La oss se på et litt mer involvert eksempel. 1007 00:47:00,840 --> 00:47:06,020 La meg gå inn i min vhost katalog, inn i lokale verten, offentlig, og hvor jeg 1008 00:47:06,020 --> 00:47:06,980 sette dagens kildekode. 1009 00:47:06,980 --> 00:47:09,800 Alt dette vil være på emnets nettstedet for deg å tinker med. 1010 00:47:09,800 --> 00:47:15,420 Og hvis jeg går inn froshims, la meg åpne opp denne filen nå, froshim0.php. 1011 00:47:15,420 --> 00:47:18,460 Denne er en litt mer detaljert, så vi vil ikke skrive dette fra scratch. 1012 00:47:18,460 --> 00:47:21,970 Men bare legge merke til nå noen noe kjente karakteristikker. 1013 00:47:21,970 --> 00:47:24,550 >> One, skjema tag, forskjellige tiltak. 1014 00:47:24,550 --> 00:47:25,670 Det er ikke en full URL. 1015 00:47:25,670 --> 00:47:29,930 Nå er det tydeligvis til fil kalt register0.php fordi, i et øyeblikk, 1016 00:47:29,930 --> 00:47:32,660 Jeg kommer til å lære meg litt noe om PHP, et programmeringsspråk 1017 00:47:32,660 --> 00:47:37,360 språk, fordi PHP kan brukes til å implementere hva Google implementert som 1018 00:47:37,360 --> 00:47:39,650 bakenden av sine søkemotorer. 1019 00:47:39,650 --> 00:47:42,890 >> Google i realiteten bruker sannsynligvis noen Python, noen C + +, og 1020 00:47:42,890 --> 00:47:44,230 bunter av andre språk. 1021 00:47:44,230 --> 00:47:48,230 Men vi kan sikkert gjennomføre søk resultater ved hjelp av PHP hvis vi ønsket. 1022 00:47:48,230 --> 00:47:49,610 Men for nå, vil vi holde det enkelt. 1023 00:47:49,610 --> 00:47:53,320 Og dette er faktisk minner om en av de andre aller første nettsteder jeg 1024 00:47:53,320 --> 00:47:54,490 laget år siden. 1025 00:47:54,490 --> 00:47:58,160 >> Tilbake i min tid, registrert deg for egenutført idrett som en førsteårsstudent ved 1026 00:47:58,160 --> 00:48:00,880 fylle ut et stykke papir, turgåing over gården, og slippe den i 1027 00:48:00,880 --> 00:48:04,890 postkassen av en Proctor i Wigglesworth, og det var hvordan du 1028 00:48:04,890 --> 00:48:05,460 registrert. 1029 00:48:05,460 --> 00:48:09,650 Og så mitt prosjekt kort tid etter CS50, var å sette det, som gjør perfekt 1030 00:48:09,650 --> 00:48:13,460 forstand, inn på nettet, var som ikke som på moten da som det er nå. 1031 00:48:13,460 --> 00:48:17,510 Men alt vi måtte gjøre var å opprette, hovedsak, et HTML-skjema. 1032 00:48:17,510 --> 00:48:19,640 >> Og det skjemaet så omtrent som dette. 1033 00:48:19,640 --> 00:48:22,480 Jeg hadde en inngang for freshman navn. 1034 00:48:22,480 --> 00:48:27,780 Jeg hadde en annen merket for hvorvidt eller de ikke ønsket å være kaptein, hva 1035 00:48:27,780 --> 00:48:30,400 deres kjønn var, og hva deres dorm var. 1036 00:48:30,400 --> 00:48:33,370 Og da jeg hardkodet i ting som Apley Court, og Canaday, 1037 00:48:33,370 --> 00:48:34,880 Grays, og så videre. 1038 00:48:34,880 --> 00:48:36,300 >> Så igjen, nye koder. 1039 00:48:36,300 --> 00:48:39,820 Har ikke sett disse før, ny attributter, men ganske tilgjengelig. 1040 00:48:39,820 --> 00:48:42,360 Når du ser et eksempel, kan du typen av låne den ideen og lage en dråpe 1041 00:48:42,360 --> 00:48:43,820 down menyen for de fleste noe. 1042 00:48:43,820 --> 00:48:46,350 Men kjernen er at hver av disse tingene har navn. 1043 00:48:46,350 --> 00:48:49,720 Og i bunnen av denne formen, er det en submit knapp som etikett, 1044 00:48:49,720 --> 00:48:51,510 eller verdi, er register. 1045 00:48:51,510 --> 00:48:52,670 >> Så la oss gå til denne siden. 1046 00:48:52,670 --> 00:48:55,050 La meg gå tilbake til katalogoppføring. 1047 00:48:55,050 --> 00:48:59,410 La meg gå inn froshims, og gå til froshim0.php. 1048 00:48:59,410 --> 00:49:01,150 Så det er heslig, for å være rettferdig. 1049 00:49:01,150 --> 00:49:03,950 Så jeg kunne definitivt stilisere dette med litt CSS, kunne jeg gjøre noen 1050 00:49:03,950 --> 00:49:06,890 grafikk, kanskje legge noen farger, og gjøre dette penere. 1051 00:49:06,890 --> 00:49:10,530 Men funksjonelt, vil jeg hevde at dette er faktisk ganske komplett. 1052 00:49:10,530 --> 00:49:15,190 >> Dessverre, når jeg fyller ut dette, David, kaptein, Mann, velger vi, 1053 00:49:15,190 --> 00:49:20,510 la oss si Matthews, Register, alt som skjer er dette. 1054 00:49:20,510 --> 00:49:21,910 Men legg merke til et par gatekjøkken. 1055 00:49:21,910 --> 00:49:27,130 One, returneres hvilken fil de resultater, tilsynelatende? 1056 00:49:27,130 --> 00:49:29,470 Så det er faktisk register0.php. 1057 00:49:29,470 --> 00:49:34,570 Så det faktum at vi så at handlingen verdi for et øyeblikk siden for register0, dette 1058 00:49:34,570 --> 00:49:37,500 bekrefter at vi faktisk endte opp på den aktuelle filen. 1059 00:49:37,500 --> 00:49:39,040 >> Nå er dette bare stygg tekst. 1060 00:49:39,040 --> 00:49:42,810 Men legg merke til at denne teksten er kommer fra lokale verten, 1061 00:49:42,810 --> 00:49:44,170 som er fra apparatet. 1062 00:49:44,170 --> 00:49:46,350 Tenk på apparatet nå som bare en web server som kan være i 1063 00:49:46,350 --> 00:49:46,910 Science Center. 1064 00:49:46,910 --> 00:49:48,060 Det kan være på selve nettsiden. 1065 00:49:48,060 --> 00:49:49,850 Så det er offentlig tilgjengelig. 1066 00:49:49,850 --> 00:49:55,480 >> Så klart, det er noen måte å formidle skjemafeltoppføringer innganger til en server 1067 00:49:55,480 --> 00:49:56,840 slik at den kan gjøre noe med dem. 1068 00:49:56,840 --> 00:49:59,020 Dessverre, register0 er ganske dum. 1069 00:49:59,020 --> 00:50:01,870 Alt den gjør er å skrive ut en matrise som ser slik ut. 1070 00:50:01,870 --> 00:50:04,790 Og det er ikke en matrise i forstand at vi vet det. 1071 00:50:04,790 --> 00:50:08,760 Det viser seg at PHP, og mye av språk, har ikke bare tallmessig 1072 00:50:08,760 --> 00:50:12,350 indeksert arrays som første indeksen er null, så en, så to, deretter prikk, 1073 00:50:12,350 --> 00:50:13,780 prikk, prikk, n minus en. 1074 00:50:13,780 --> 00:50:16,400 >> Dette er det som kalles en assosiativ array. 1075 00:50:16,400 --> 00:50:21,150 En assosiativ array er en der du kan lagre viktige verdi-par der 1076 00:50:21,150 --> 00:50:23,160 nøkkelen er ikke nødvendigvis et nummer. 1077 00:50:23,160 --> 00:50:25,580 Det kan faktisk være en streng, et ord. 1078 00:50:25,580 --> 00:50:28,230 Og så dette kan gjennomføres, under panseret, viser det seg, 1079 00:50:28,230 --> 00:50:31,896 ved hjelp av en datastruktur kjent som en? 1080 00:50:31,896 --> 00:50:33,600 Trodde noe dramatisk var i ferd med å skje - 1081 00:50:33,600 --> 00:50:34,840 hash table. 1082 00:50:34,840 --> 00:50:38,955 >> Så en hash table, tilbakekalling, de av dere som gjorde det for P sett 6, eller engang huske 1083 00:50:38,955 --> 00:50:44,110 det, i hvert fall selv om du gjorde et forsøk, en hash table, i bruk vår, ble brukt til å 1084 00:50:44,110 --> 00:50:45,090 bare lagre ord. 1085 00:50:45,090 --> 00:50:47,980 Men egentlig, ble du lagre nøkler og verdier. 1086 00:50:47,980 --> 00:50:51,940 Hvis du implementert en hash tabell for P satt seks ordbok, var nøklene 1087 00:50:51,940 --> 00:50:56,890 ordene selv, og verdiene var effektivt sant eller usant. 1088 00:50:56,890 --> 00:51:00,190 Ja, her, eller implisitt, nei, ikke her. 1089 00:51:00,190 --> 00:51:02,140 >> Vel, vi kan generalisere den ideen. 1090 00:51:02,140 --> 00:51:06,230 Og vi kunne bruke en veldig lignende data struktur for å lagre ikke strengen 1091 00:51:06,230 --> 00:51:10,180 seg alene i din hash table, men anta at i hvert eneste av dine hasj 1092 00:51:10,180 --> 00:51:11,130 tabellen noder. 1093 00:51:11,130 --> 00:51:14,210 Og du kan selv gjøre dette i et forsøk snarere enn bare å ha en bool. 1094 00:51:14,210 --> 00:51:15,350 Du kunne ha noe annet. 1095 00:51:15,350 --> 00:51:19,590 Hva om nøkkelen var ikke maxwell, for eksempel, men sitat unquote "navn", eller 1096 00:51:19,590 --> 00:51:22,900 sitere unquote "kaptein". Og innsiden av C-datastruktur, sette deg en 1097 00:51:22,900 --> 00:51:26,170 verdi, ikke bare en boolsk, men av verdi like tilbud unquote "David", eller 1098 00:51:26,170 --> 00:51:28,690 "M" eller "Matthews," og så videre. 1099 00:51:28,690 --> 00:51:33,170 >> Så de samme datastrukturer vi brukte tilsynelatende eksisterer i andre språk. 1100 00:51:33,170 --> 00:51:37,650 Og jeg vil påstå at de er faktisk mye, mye enklere å få tilgang til her. 1101 00:51:37,650 --> 00:51:40,300 La oss faktisk ta en titt nå på noen slik syntaks. 1102 00:51:40,300 --> 00:51:43,120 >> Jeg kommer til å gå inn i en PHP-katalogen. 1103 00:51:43,120 --> 00:51:48,390 Og jeg kommer til å åpne opp en bedre versjon av hei-0 fra før. 1104 00:51:48,390 --> 00:51:50,270 Legg merke til at alt jeg gjorde var legge til noen kommentarer. 1105 00:51:50,270 --> 00:51:52,530 Så vi kan bli kvitt det distraksjon. 1106 00:51:52,530 --> 00:51:57,610 >> Og dette programmet gjør faktisk skriver hei fordi jeg har spesifisert mellom 1107 00:51:57,610 --> 00:52:01,420 tags som jeg ønsker å kjøre denne koden. 1108 00:52:01,420 --> 00:52:03,380 Nå vil vi se på et øyeblikk hvorfor dette er nyttig. 1109 00:52:03,380 --> 00:52:05,630 Men la oss åpne en annen eksempel her. 1110 00:52:05,630 --> 00:52:10,430 La meg gå videre og åpne opp si, gedit av forhold man. 1111 00:52:10,430 --> 00:52:12,970 >> Dette er langt tilbake i tid nå. 1112 00:52:12,970 --> 00:52:16,320 Men uker siden, tror jeg, i uke én eller uke to, hadde vi et eksempel kalt 1113 00:52:16,320 --> 00:52:18,470 conditions1.c. 1114 00:52:18,470 --> 00:52:22,050 Og jeg bestemte meg for å reimplement det i PHP, bare for å slags understreke at 1115 00:52:22,050 --> 00:52:26,500 PHP, syntaktisk, er nesten identisk til C. Dette er ikke et stort sprang 1116 00:52:26,500 --> 00:52:27,840 fra forrige uke til denne. 1117 00:52:27,840 --> 00:52:31,230 >> Legg merke til på toppen av dette programmet, som begynner, som før, med noen 1118 00:52:31,230 --> 00:52:34,260 kommentarer, som jeg skal bli kvitt som en distraksjon. 1119 00:52:34,260 --> 00:52:37,410 Legg merke til at jeg er i PHP modus i denne filen. 1120 00:52:37,410 --> 00:52:40,160 Så denne koden, vil vi se, vil bli henrettet. 1121 00:52:40,160 --> 00:52:42,670 Legg merke til at det er readline, som sannsynligvis er 1122 00:52:42,670 --> 00:52:46,230 analog i PHP av getstring. 1123 00:52:46,230 --> 00:52:47,390 Legg merke til at det er litt annerledes. 1124 00:52:47,390 --> 00:52:51,410 Du faktisk angir et spørsmål til funksjon som heter lese linje, og det er 1125 00:52:51,410 --> 00:52:52,180 hva brukeren ser. 1126 00:52:52,180 --> 00:52:53,520 Så du trenger ikke å printf manuelt. 1127 00:52:53,520 --> 00:52:54,860 Men det er ikke en stor avtale. 1128 00:52:54,860 --> 00:52:59,150 Jeg kommer til å lagre, innsiden av $ n, den returnere verdien av dette, så uansett 1129 00:52:59,150 --> 00:53:00,490 brukeren skriver inn er deres int. 1130 00:53:00,490 --> 00:53:01,660 Og her er en annen nysgjerrighet. 1131 00:53:01,660 --> 00:53:05,810 Det viser seg, i PHP, noe variabel bare må ha prefikset 1132 00:53:05,810 --> 00:53:06,970 med et dollartegn. 1133 00:53:06,970 --> 00:53:08,110 Det er litt irriterende. 1134 00:53:08,110 --> 00:53:10,870 Men legg merke til hva jeg har gjort i PHP. 1135 00:53:10,870 --> 00:53:13,980 Hva mangler på venstre hånd side av likhetstegnet? 1136 00:53:13,980 --> 00:53:15,430 >> Ingen omtale av type. 1137 00:53:15,430 --> 00:53:19,400 Så dette er forskjellig fra C. For bedre eller verre, er PHP et løst 1138 00:53:19,400 --> 00:53:20,550 skrevet språk. 1139 00:53:20,550 --> 00:53:22,010 Det har tall. 1140 00:53:22,010 --> 00:53:23,240 Det har strenger. 1141 00:53:23,240 --> 00:53:24,015 Det har boolske. 1142 00:53:24,015 --> 00:53:26,220 Og det har noen andre datatyper. 1143 00:53:26,220 --> 00:53:30,570 Men du, programmerer, vanligvis trenger ikke å bry seg om dem. 1144 00:53:30,570 --> 00:53:34,010 På oppsiden av dette er at det gjør det litt lettere å programmere. 1145 00:53:34,010 --> 00:53:35,380 Du kan tenke litt mindre. 1146 00:53:35,380 --> 00:53:39,840 Ulempen er at det også åpner du opp til potensielle feil hvis du ved et uhell 1147 00:53:39,840 --> 00:53:43,080 behandle en rekke som en streng, en snor som et tall, som potensielt kan, men selv 1148 00:53:43,080 --> 00:53:46,150 da, PHP, og en rekke språk, er ganske tolerant. 1149 00:53:46,150 --> 00:53:49,050 De vil bruke det som kalles implisitt casting. 1150 00:53:49,050 --> 00:53:55,220 Og hvis du prøver å bruke n i sammenheng av en numerisk situasjon vil det 1151 00:53:55,220 --> 00:53:58,040 konvertere det her kommer til å bli en streng, fordi hvis brukeren skriver 1152 00:53:58,040 --> 00:54:01,570 noe i, og du får resultatet, som med readline, eller få streng, 1153 00:54:01,570 --> 00:54:02,910 som kommer til å returnere en streng. 1154 00:54:02,910 --> 00:54:07,360 >> Men legg merke til et par linjer senere, jeg undersøke om n er større enn null. 1155 00:54:07,360 --> 00:54:13,370 Så PHP kommer til å implisitt kastet min "Streng" 123, eller hva brukeren 1156 00:54:13,370 --> 00:54:14,860 typer i, til en int. 1157 00:54:14,860 --> 00:54:18,730 Så kort sagt, fungerer ting bare mye mer intuitivt. 1158 00:54:18,730 --> 00:54:23,410 Så vi nå begynne å slappe av noen av ting som vi har gjort i det siste. 1159 00:54:23,410 --> 00:54:24,780 >> Mye av dette er ting den samme, selv om. 1160 00:54:24,780 --> 00:54:26,340 Likevel har lik lik. 1161 00:54:26,340 --> 00:54:30,350 Som en digresjon PHP også har lik lik lik, men mer om det, kanskje, i 1162 00:54:30,350 --> 00:54:30,850 fremtiden. 1163 00:54:30,850 --> 00:54:31,150 Det var en. 1164 00:54:31,150 --> 00:54:35,660 Typo men to likhetstegn betyr det samme ting som før, for sammenligning. 1165 00:54:35,660 --> 00:54:37,060 printf betyr det samme som før. 1166 00:54:37,060 --> 00:54:39,160 Backslash n betyr det samme ting som før. 1167 00:54:39,160 --> 00:54:40,390 >> Så hvordan kjører jeg dette programmet? 1168 00:54:40,390 --> 00:54:44,400 Vel, som før, hvis jeg ikke gjør PHP, conditions1.php, og skriv inn 1169 00:54:44,400 --> 00:54:46,560 et tall som 123.. 1170 00:54:46,560 --> 00:54:47,720 Det er et positivt tall. 1171 00:54:47,720 --> 00:54:49,510 Hvis jeg skriver i 0, plukker jeg 0. 1172 00:54:49,510 --> 00:54:53,700 Og hvis jeg skriver i negativ 123, får jeg sikkerhetskopiere et negativt tall, som bare er 1173 00:54:53,700 --> 00:54:59,050 å si, syntaktisk, PHP er super, super lignende. 1174 00:54:59,050 --> 00:55:03,250 >> Så hvorfor er dette nå nyttig i en web-sammenheng? 1175 00:55:03,250 --> 00:55:06,710 Vel, la oss gå tilbake til dette froshims eksempel, som så, 1176 00:55:06,710 --> 00:55:08,600 igjen, som dette her. 1177 00:55:08,600 --> 00:55:11,580 Og la oss faktisk dra opp nettside igjen, så som som dette. 1178 00:55:11,580 --> 00:55:14,930 Hva kan vi gjøre med data som er sendt? 1179 00:55:14,930 --> 00:55:18,770 >> Vel, la meg åpne opp en nyere versjon av denne. 1180 00:55:18,770 --> 00:55:20,920 Og du vil se at problemet sett spesifikasjonen leder deg 1181 00:55:20,920 --> 00:55:22,850 gjennom noen av disse. 1182 00:55:22,850 --> 00:55:29,610 Snarere enn å starte med null, la oss se på froshims3, 1183 00:55:29,610 --> 00:55:31,410 som gjør litt mer. 1184 00:55:31,410 --> 00:55:34,780 >> Legg merke til først, faktisk, la oss åpne opp hva 0 var, slik at du ser 1185 00:55:34,780 --> 00:55:37,170 hva register 0 var. 1186 00:55:37,170 --> 00:55:40,040 Legg merke til hva register 0 gjorde. 1187 00:55:40,040 --> 00:55:41,730 En, har jeg kommentarer på toppen. 1188 00:55:41,730 --> 00:55:43,900 Slett dem og fokusere bare på dette. 1189 00:55:43,900 --> 00:55:48,730 Mesteparten av innholdet i register0.php er, selvsagt, hvilket språk? 1190 00:55:48,730 --> 00:55:49,980 Bare rå PHP. 1191 00:55:49,980 --> 00:55:53,430 >> Så varsel, ikke denne filen ikke starte med, i øyeblikket, åpen brakett, 1192 00:55:53,430 --> 00:55:54,970 spørsmålstegn, PHP. 1193 00:55:54,970 --> 00:55:59,800 PHP gjør at du kan omgås PHP-kode med HTML-koder. 1194 00:55:59,800 --> 00:56:04,130 Men jeg har gjort det her inne på siden over her. 1195 00:56:04,130 --> 00:56:08,180 >> Nå, igjen, vil du bare vite dette fra å ha sett på den manuelle. print_r, 1196 00:56:08,180 --> 00:56:13,410 det viser seg, er print_recursive. _recursive Og dette er bare en hendig 1197 00:56:13,410 --> 00:56:16,780 nyttefunksjon som bare skriver ut, rekursivt, uansett hva du leverer den. 1198 00:56:16,780 --> 00:56:18,760 Hvis du leverer den en matrise, det vil skrive ut en matrise. 1199 00:56:18,760 --> 00:56:20,180 Hvis du leverer den et tall, det vil skrive ut et tall. 1200 00:56:20,180 --> 00:56:21,570 Gi det en streng, vil det skrive ut en streng. 1201 00:56:21,570 --> 00:56:24,500 Hvis du leverer den en hash table, det vil skrive ut en hash table. 1202 00:56:24,500 --> 00:56:26,730 Du trenger ikke å skrive alt av den koden selv. 1203 00:56:26,730 --> 00:56:29,490 >> Nå merker at jeg går inn PHP-modus over her. 1204 00:56:29,490 --> 00:56:32,070 Jeg avslutter PHP-modus over her. 1205 00:56:32,070 --> 00:56:35,950 Så når webserveren leser denne filen topp til bunn, fra venstre mot høyre, fordi 1206 00:56:35,950 --> 00:56:40,750 det ender i et filnavn som heter. php, hva er ikke på innsiden av PHP-koder er 1207 00:56:40,750 --> 00:56:42,820 bare skal være spytte ut, som rå HTML. 1208 00:56:42,820 --> 00:56:43,630 No big deal. 1209 00:56:43,630 --> 00:56:49,280 Men så snart webserveren merknader dette, det kommer til å si, skulle jeg ikke 1210 00:56:49,280 --> 00:56:51,850 spytte ut, bokstavelig talt, print_r av innlegget. 1211 00:56:51,850 --> 00:56:54,910 Jeg skal utføre følgende linje med kode. 1212 00:56:54,910 --> 00:56:59,850 >> Så det siste spørsmålet, da, av denne filen er, vel, hva pokker er dette? 1213 00:56:59,850 --> 00:57:00,530 Ta en gjetning. 1214 00:57:00,530 --> 00:57:04,230 Hva er $ _POST, sannsynligvis? 1215 00:57:04,230 --> 00:57:07,070 >> PUBLIKUM: [uhørlig] 1216 00:57:07,070 --> 00:57:08,830 >> SPEAKER 1: Ja, de bokførte data. 1217 00:57:08,830 --> 00:57:11,350 Husker, la oss bla tilbake i tid for bare et øyeblikk. 1218 00:57:11,350 --> 00:57:13,165 froshim0, igjen, så ut som dette. 1219 00:57:13,165 --> 00:57:15,640 En super mesteparten av dette er bare HTML. 1220 00:57:15,640 --> 00:57:18,410 Igjen, noen koder du har ikke sett ennå, eller med hvilken 1221 00:57:18,410 --> 00:57:19,360 du allerede er kjent. 1222 00:57:19,360 --> 00:57:21,990 Men det interessante var dette. 1223 00:57:21,990 --> 00:57:27,270 Denne linjen er det som virkelig knytter det til vår register0.php fil. 1224 00:57:27,270 --> 00:57:29,200 Jeg sender via metoden innlegget. 1225 00:57:29,200 --> 00:57:33,130 Og det betyr at parametrene brukeren skriver inn er ikke 1226 00:57:33,130 --> 00:57:35,150 kommer til å ende opp der. 1227 00:57:35,150 --> 00:57:36,175 >> De kommer ikke til å dukke opp i nettadressen. 1228 00:57:36,175 --> 00:57:39,020 De er fortsatt kommer til å bli sendt fra klienten, fra nettleseren, til 1229 00:57:39,020 --> 00:57:42,080 server, men bare via noen andre mekanisme som vi vil frafalle våre hender 1230 00:57:42,080 --> 00:57:44,330 på for i dag, men det er ikke i nettadressen. 1231 00:57:44,330 --> 00:57:47,630 Men legg merke til forholdet nå med post, som etter konvensjonen, er 1232 00:57:47,630 --> 00:57:49,160 små bokstaver her. 1233 00:57:49,160 --> 00:57:54,090 >> Men hvis jeg åpner opp register0.php, Jeg er tydeligvis skrive dette. 1234 00:57:54,090 --> 00:57:56,450 Så dette er en slags merkelig navnekonvensjonen. 1235 00:57:56,450 --> 00:58:01,430 Men hva er fint i PHP er at når bruke PHP i en web sammenheng, ikke i en 1236 00:58:01,430 --> 00:58:04,480 kommandolinje som jeg gjorde for et øyeblikk siden, når du faktisk bruker den i en web 1237 00:58:04,480 --> 00:58:10,580 side, i et vhost katalog som vi er, automatisk vil PHP fylle dette 1238 00:58:10,580 --> 00:58:15,560 ting, som er en assosiativ array, så å si, en hash table, med 1239 00:58:15,560 --> 00:58:17,290 alt brukeren har skrevet i. 1240 00:58:17,290 --> 00:58:22,000 >> Kort sagt, $ _POST i alle caps er en global variabel som PHP bare 1241 00:58:22,000 --> 00:58:25,050 magisk skaper for når du bruke PHP i en web sammenheng. 1242 00:58:25,050 --> 00:58:29,160 Og det setter innsiden av det hele navnene på parametrene i form at 1243 00:58:29,160 --> 00:58:33,200 ble sendt til denne filen og alle verdiene som brukeren har skrevet inn 1244 00:58:33,200 --> 00:58:37,790 Så det hender til deg hva brukeren skrevet inn på det skjemaet. 1245 00:58:37,790 --> 00:58:42,210 >> Så før, fikk vi virkelig dum utgang for bare å se dette fordi alt jeg gjorde 1246 00:58:42,210 --> 00:58:44,400 ble rekursivt ut denne matrisen. 1247 00:58:44,400 --> 00:58:46,060 Nøkkelen er navnet, er verdien David. 1248 00:58:46,060 --> 00:58:46,980 Nøkkelen er kaptein. 1249 00:58:46,980 --> 00:58:47,970 Verdien er på. 1250 00:58:47,970 --> 00:58:52,300 Og den doble pilen og vinkelen brakett der, er dette bare tilfeldig. 1251 00:58:52,300 --> 00:58:53,270 Dette er ikke koden. 1252 00:58:53,270 --> 00:58:57,690 Dette er bare PHP måte å vise deg hva verdien av noen tast er. 1253 00:58:57,690 --> 00:59:03,000 >> Men nå la meg foreslå at i froshIMs3, det er nesten identiske 1254 00:59:03,000 --> 00:59:04,950 bortsett fra at det underordner seg denne filen. 1255 00:59:04,950 --> 00:59:08,570 Og igjen, skal vi slags bare blikk på dette, bare for å se noen 1256 00:59:08,570 --> 00:59:12,040 syntaks, men merke til hva Denne filen. 1257 00:59:12,040 --> 00:59:14,930 Ta en gjetning bare basert på linjene av kode, som trolig ser ut som 1258 00:59:14,930 --> 00:59:17,410 Gresk, til en viss grad, er tilsynelatende gjør. 1259 00:59:17,410 --> 00:59:20,580 1260 00:59:20,580 --> 00:59:23,110 >> Denne filen er noe relatert til e-post, e-post. 1261 00:59:23,110 --> 00:59:24,770 Så hva er dette programmet gjør? 1262 00:59:24,770 --> 00:59:28,740 I denne versjonen, hvis jeg skulle faktisk fylle ut dette skjemaet - og la meg gå til 1263 00:59:28,740 --> 00:59:30,760 froshIMs3, ikke froshIMs0 - 1264 00:59:30,760 --> 00:59:33,280 1265 00:59:33,280 --> 00:59:34,540 skjemaet ser det samme. 1266 00:59:34,540 --> 00:59:37,980 David, kaptein, male, sovesal, Matthews. 1267 00:59:37,980 --> 00:59:42,980 Men hvis jeg sender dette, er denne filen kommer til å gå til register3.php. 1268 00:59:42,980 --> 00:59:46,330 >> Og jeg hevder, ved å se på det kildekoden, det kommer til å 1269 00:59:46,330 --> 00:59:47,650 en eller annen måte involverer e-post. 1270 00:59:47,650 --> 00:59:49,620 La meg gå videre og åpne denne opp i et større vindu, så vi 1271 00:59:49,620 --> 00:59:51,030 kan se det mer renslig. 1272 00:59:51,030 --> 00:59:57,220 Vi er i Vhosts, lokale verten, offentlige, froshims. 1273 00:59:57,220 --> 00:59:58,680 Jeg kommer til å åpne opp en annen program, akkurat slik vi 1274 00:59:58,680 --> 01:00:00,160 kan se mer på en gang. 1275 01:00:00,160 --> 01:00:03,100 >> Så nå her, merke noen ting. 1276 01:00:03,100 --> 01:00:06,530 På toppen av filen er åpen brakett, spørsmålstegn, PHP. 1277 01:00:06,530 --> 01:00:08,920 Så er det en haug med kommentarer, som vi kan overse, er 1278 01:00:08,920 --> 01:00:10,450 uinteressant for nå. 1279 01:00:10,450 --> 01:00:11,300 >> Nå er det dette. 1280 01:00:11,300 --> 01:00:14,200 Det viser seg PHP har mye av koden kalt krever. 1281 01:00:14,200 --> 01:00:19,110 Det er veldig lik i ånden til Cs inkludere, hash omfatter, som 1282 01:00:19,110 --> 01:00:21,980 det vesentlige griper innholdet i enkelte annen fil og bare plops dem her, 1283 01:00:21,980 --> 01:00:22,930 slik at du kan bruke dem. 1284 01:00:22,930 --> 01:00:27,060 I dette tilfellet må kjølemaskinen, forhåndsinstallert, bibliotek, gratis og 1285 01:00:27,060 --> 01:00:29,900 åpen kildekode bibliotek som heter PHP mailer som alle kan 1286 01:00:29,900 --> 01:00:30,770 laste ned fra internett. 1287 01:00:30,770 --> 01:00:32,000 Vi bare gjorde det for deg. 1288 01:00:32,000 --> 01:00:36,130 Og dette betyr at jeg nå har e-post funksjonalitet til min disposisjon. 1289 01:00:36,130 --> 01:00:38,170 >> Legg nå merke til et par ting. 1290 01:00:38,170 --> 01:00:41,120 Jeg kommer til å validere skjema for innsending. 1291 01:00:41,120 --> 01:00:45,980 Turns out PHP, en, har utropstegn poeng for ikke operatøren, akkurat som 1292 01:00:45,980 --> 01:00:49,810 C. Men PHP har også en funksjon kalt tom. 1293 01:00:49,810 --> 01:00:53,920 >> Tom returnerer bare true hvis verdien av tingen hånd du det i 1294 01:00:53,920 --> 01:00:57,190 parenteser er tom, slik som bruker ikke skrive noe i. 1295 01:00:57,190 --> 01:01:02,680 Så dette sier, og merker syntaks, veldig minner om C, hvis 1296 01:01:02,680 --> 01:01:07,730 Navnet nøkkelen, så navnefeltet i form, som ble sendt via post, etter 1297 01:01:07,730 --> 01:01:13,010 brukeren, er ikke å tømme, og deres kjønn er ikke tom i form som 1298 01:01:13,010 --> 01:01:15,980 vel, og deres sovesal er ikke tom - 1299 01:01:15,980 --> 01:01:19,980 men merker jeg bryr meg ikke om kaptein, så hva skal vi gjøre? 1300 01:01:19,980 --> 01:01:21,990 >> Jeg kommer til å kjøre denne linjen med kode. 1301 01:01:21,990 --> 01:01:24,100 Og du kan tenke på denne typen som malloc, men det er litt 1302 01:01:24,100 --> 01:01:24,800 mer avansert enn det. 1303 01:01:24,800 --> 01:01:29,200 Men for nå dette gir meg en spesiell konstruere av typen PHP mailer. 1304 01:01:29,200 --> 01:01:31,410 Men ignorerer søkeordet nytt for i dag. 1305 01:01:31,410 --> 01:01:35,670 >> Nå skal jeg kalle en funksjon kalt IsSMTP, som sier, bruker SMTP. 1306 01:01:35,670 --> 01:01:39,380 Dette er port 25, akkurat som video forrige uke, da ting var å kaste 1307 01:01:39,380 --> 01:01:40,710 e-post i brannmuren. 1308 01:01:40,710 --> 01:01:42,440 Port 25 er SMTP. 1309 01:01:42,440 --> 01:01:44,410 SMTP betyr bruke e-postserveren. 1310 01:01:44,410 --> 01:01:46,215 Hvilken, kan vi bruke Harvards SMTP.fas.harvard.edu. 1311 01:01:46,215 --> 01:01:48,850 1312 01:01:48,850 --> 01:01:51,590 >> Vi kan sette fra adresse å være John Harvard. 1313 01:01:51,590 --> 01:01:55,090 Hvis jeg ruller ned ytterligere, kan jeg stille mottakerens adresse, bare 1314 01:01:55,090 --> 01:01:56,840 vilkårlig, for å være John Harvard er så vel. 1315 01:01:56,840 --> 01:01:59,210 Så han kommer til å være e-post selv. 1316 01:01:59,210 --> 01:02:01,600 >> Nå kan jeg sette faget å være registrering. 1317 01:02:01,600 --> 01:02:03,700 Og jeg kan sette kroppen av e-post som følger. 1318 01:02:03,700 --> 01:02:06,500 Denne linjen ser litt mer kryptisk, men det er bare fordi det er mye 1319 01:02:06,500 --> 01:02:07,450 av informasjonen i den. 1320 01:02:07,450 --> 01:02:10,670 En, det er en prikk operatør. 1321 01:02:10,670 --> 01:02:14,510 Noen må vite allerede hva prikken operatør gjør. 1322 01:02:14,510 --> 01:02:15,436 Det er sammensetning. 1323 01:02:15,436 --> 01:02:19,240 Så hvis du ønsker å ta en streng i PHP, og legge det, eller foranstille det, til 1324 01:02:19,240 --> 01:02:23,500 en annen streng i PHP, Gudskjelov at du trenger ikke å bruke strcopy og malloc, 1325 01:02:23,500 --> 01:02:25,490 og alt dette lenger. 1326 01:02:25,490 --> 01:02:28,765 >> Hvis du ønsker å sette sammen to strenger, hvem bryr seg om minnet. 1327 01:02:28,765 --> 01:02:30,850 La PHP finne det ut for deg. 1328 01:02:30,850 --> 01:02:35,200 Hva PHP vil gjøre med dot operatør her er å lage bare en stor setning ut 1329 01:02:35,200 --> 01:02:37,900 av denne linjen, denne linjen, denne linjen, denne linjen. 1330 01:02:37,900 --> 01:02:40,460 Og nå varsel, det kommer skal plugge inn verdiene. 1331 01:02:40,460 --> 01:02:43,680 Så e-post som John Harvard kommer å motta bokstavelig talt kommer til å si 1332 01:02:43,680 --> 01:02:49,450 navn, tykktarm, noe heller, så vi lukke streng og sette sammen på 1333 01:02:49,450 --> 01:02:52,220 hva brukeren har skrevet i, deretter en ny linje. 1334 01:02:52,220 --> 01:02:54,570 >> Deretter, på den neste linje av John Harvard e-post, kommer det til å si 1335 01:02:54,570 --> 01:02:55,910 Kaptein, On or Nothing. 1336 01:02:55,910 --> 01:02:57,810 Det kommer til å si kjønn, mann eller kvinne. 1337 01:02:57,810 --> 01:02:59,680 Dorm kommer til å være Matthews i mitt tilfelle. 1338 01:02:59,680 --> 01:03:03,400 Og så merker kjent semikolon helt på slutten. 1339 01:03:03,400 --> 01:03:07,830 Og så, her nede, varsel, noe kryptisk fortsatt, men igjen, etter en 1340 01:03:07,830 --> 01:03:12,730 mønster som vil bli mer kjent etter P satt 7, hvis du sender mail 1341 01:03:12,730 --> 01:03:16,610 returnerer false, og deretter gå videre og dø. 1342 01:03:16,610 --> 01:03:19,610 >> Så PHP har en funksjon som heter die, som, bokstavelig talt, dreper bare 1343 01:03:19,610 --> 01:03:22,830 nettside og bare skriver ut uansett du forteller det - det er døende 1344 01:03:22,830 --> 01:03:24,280 ord, så å si. 1345 01:03:24,280 --> 01:03:28,310 Og det, i tilfelle, vil den skrive ut ut hva feilen info er for 1346 01:03:28,310 --> 01:03:29,860 hva skjedde med å gå galt. 1347 01:03:29,860 --> 01:03:34,490 Så lang historie kort her, det vi har er et eksempel hvor når brukeren 1348 01:03:34,490 --> 01:03:39,150 sender inn skjemaet, froshim0, froshims3.php, går den til 1349 01:03:39,150 --> 01:03:40,760 register3.php. 1350 01:03:40,760 --> 01:03:45,290 Men register3.php fortsetter deretter for å utføre alle disse linjer. 1351 01:03:45,290 --> 01:03:46,620 >> Så det er noen take aways her. 1352 01:03:46,620 --> 01:03:50,380 Ett, er det tydeligvis ganske lett, programmatisk, sende e-post, 1353 01:03:50,380 --> 01:03:50,830 noe som er bra. 1354 01:03:50,830 --> 01:03:53,500 Når brukere registrerer for området, i dette tilfellet, når de registrerer seg for din 1355 01:03:53,500 --> 01:03:56,220 sport, kan du sende freshman Proctor, eller John 1356 01:03:56,220 --> 01:03:57,650 Harvard, i dette tilfellet. 1357 01:03:57,650 --> 01:04:01,630 >> Men det betyr også at du kan gjøre hva? 1358 01:04:01,630 --> 01:04:03,970 Send e-post fra noen til noen. 1359 01:04:03,970 --> 01:04:05,430 Og dette er veldig sant. 1360 01:04:05,430 --> 01:04:08,580 Dette er ikke så lett gjort hvis du er vant til å bruke Gmail. 1361 01:04:08,580 --> 01:04:11,310 Men hvis du noen gang har brukt Eudora eller Outlook, kan du ganske mye fortelle en 1362 01:04:11,310 --> 01:04:13,720 postserveren om at du er hvem du vil. 1363 01:04:13,720 --> 01:04:16,450 Og det er her jeg må sette på den hatten og si, ikke gjør dette. 1364 01:04:16,450 --> 01:04:21,140 Men dette er testament til hvor enkelt det er å utføre phishing-angrep, og 1365 01:04:21,140 --> 01:04:24,310 sende anonyme e-poster, og spam, mer generelt. 1366 01:04:24,310 --> 01:04:27,330 Og det virkelig koker ned til det faktum at alt du trenger er noen 1367 01:04:27,330 --> 01:04:28,500 programmatisk tilgang. 1368 01:04:28,500 --> 01:04:31,940 >> Som en side, min nærmeste møte med annonsen bord, min egen freshman år, 1369 01:04:31,940 --> 01:04:34,320 var da jeg oppdaget denne kule lure at, wow, kan du 1370 01:04:34,320 --> 01:04:36,850 sende e-post fra noen. 1371 01:04:36,850 --> 01:04:39,770 Og så vi skulle ha noen dum argument, bokstavelig talt, i Matthews, 1372 01:04:39,770 --> 01:04:40,790 blant mine Proctor gruppe. 1373 01:04:40,790 --> 01:04:42,470 Jeg kan ikke engang huske hva problemet var. 1374 01:04:42,470 --> 01:04:44,970 Men jeg ville forsøke å sette en slutt på denne tåpelige debatten. 1375 01:04:44,970 --> 01:04:48,580 >> Så jeg bestemte meg for jeg vil bare sende en e-post til min Proctor gruppe, later til å være 1376 01:04:48,580 --> 01:04:52,000 den andre fyren, med som mener jeg uenige, og har føye ham til 1377 01:04:52,000 --> 01:04:54,680 uansett min mening var i denne debatten. 1378 01:04:54,680 --> 01:04:59,320 Og så jeg forfalsket denne e-posten ved hjelp av en Teknikken ligner i ånden til dette. 1379 01:04:59,320 --> 01:05:01,256 Men det var faktisk lettere på den tiden. 1380 01:05:01,256 --> 01:05:02,435 Trykk send. 1381 01:05:02,435 --> 01:05:06,660 Han var ikke fornøyd, og heller ikke ville har vært ad bord. 1382 01:05:06,660 --> 01:05:10,280 >> Og jeg var veldig raskt fanget innenfor sekunder fordi, som du vet, registrerer jeg 1383 01:05:10,280 --> 01:05:11,420 mine e-poster i en bestemt måte. 1384 01:05:11,420 --> 01:05:14,200 Og om jeg gjør det manuelt, i stor del, 15 år senere fordi jeg var 1385 01:05:14,200 --> 01:05:15,080 traumatisert av det. 1386 01:05:15,080 --> 01:05:16,960 Jeg har ikke en signatur på min e-post nå. 1387 01:05:16,960 --> 01:05:20,440 Men i 1995, måtte jeg bare en sig, en signatur i e-posten min. 1388 01:05:20,440 --> 01:05:24,630 Så var det dette notatet sa Kjære Proctor gruppe, acquiesce jeg min mening 1389 01:05:24,630 --> 01:05:31,240 og er enig med David, signert så og så, ny linje, ny linje, DJM. 1390 01:05:31,240 --> 01:05:36,220 >> Så ikke gjør det, eller generelt ta Fordelen med denne teknikk. 1391 01:05:36,220 --> 01:05:39,950 Men når du gjør et nettsted, som for det endelige prosjektet, når du gjør en 1392 01:05:39,950 --> 01:05:43,460 nettstedet for noe gründer, dette er hvordan, pragmatisk, kan du 1393 01:05:43,460 --> 01:05:47,000 utnytte andre tjenester på internett som e-post og deretter faktisk 1394 01:05:47,000 --> 01:05:49,440 sende ting ved hjelp av kode. 1395 01:05:49,440 --> 01:05:51,240 >> Så hvordan kan vi forbedre dette? 1396 01:05:51,240 --> 01:05:54,370 Vel, først la oss ta en rask gjennomgang av noen av de tingene som du ser, 1397 01:05:54,370 --> 01:05:56,170 og deretter ta en titt på et par eksempler. 1398 01:05:56,170 --> 01:05:59,500 Så en, for å berolige, fordi vi flyr gjennom PHP. 1399 01:05:59,500 --> 01:06:02,470 Og jeg vet, på et tidspunkt, vil du ha å faktisk begynne å skrive dette hvis du 1400 01:06:02,470 --> 01:06:03,460 ikke allerede har. 1401 01:06:03,460 --> 01:06:06,220 Innse at man er viktigste slag av ut av vinduet med PHP. 1402 01:06:06,220 --> 01:06:09,420 Hvis du ønsker å skrive kode som får henrettet, du bare begynne å skrive det i 1403 01:06:09,420 --> 01:06:13,970 en fil som heter. php så lenge du har den åpne braketten 1404 01:06:13,970 --> 01:06:15,620 spørsmålstegn PHP-koden. 1405 01:06:15,620 --> 01:06:19,730 >> Men legg merke til disse er forholdene i php. 1406 01:06:19,730 --> 01:06:22,610 Legg merke til, er dette nøyaktig samme lysbilde vi hadde i uke en når vi hadde 1407 01:06:22,610 --> 01:06:25,670 forholdene i C. Forholdene i PHP er strukturelt og 1408 01:06:25,670 --> 01:06:27,140 syntaktisk det samme. 1409 01:06:27,140 --> 01:06:30,290 Eneste virkelige forskjellen er hvis du har variabler involvert, har du dem 1410 01:06:30,290 --> 01:06:31,600 dollartegn. 1411 01:06:31,600 --> 01:06:33,970 >> I mellomtiden, boolske uttrykk ser akkurat slik ut for 1412 01:06:33,970 --> 01:06:35,725 eller-ing eller og-ing sammen. 1413 01:06:35,725 --> 01:06:37,780 Brytere ser akkurat det samme. 1414 01:06:37,780 --> 01:06:42,180 Hva er fint i PHP, mens i C, brytere må være tilfeller på 1415 01:06:42,180 --> 01:06:46,380 Primitiv som ints eller chars, i PHP ditt tilfelle uttalelser kan faktisk være 1416 01:06:46,380 --> 01:06:48,430 På en hel strenger, som er faktisk slags hyggelig. 1417 01:06:48,430 --> 01:06:49,480 Sparer du litt tid. 1418 01:06:49,480 --> 01:06:50,820 Kunne ikke gjøre det i C. 1419 01:06:50,820 --> 01:06:52,880 >> Her er en for løkke i PHP. 1420 01:06:52,880 --> 01:06:53,740 Det er identiske. 1421 01:06:53,740 --> 01:06:55,400 Kanskje har noen dollartegn for variablene. 1422 01:06:55,400 --> 01:06:57,530 Du trenger ikke å nevne at noe er en int. 1423 01:06:57,530 --> 01:07:00,580 Du bare erklære den med et dollartegn og navnet av variabelen. 1424 01:07:00,580 --> 01:07:01,430 Men en for-løkke er den samme. 1425 01:07:01,430 --> 01:07:02,760 En stund løkke er den samme. 1426 01:07:02,760 --> 01:07:04,870 En gjør mens loop er det samme. 1427 01:07:04,870 --> 01:07:06,170 >> Dette er litt annerledes. 1428 01:07:06,170 --> 01:07:12,410 Så med PHP, med en matrise, kan du statisk erklære en matrise, som i C, 1429 01:07:12,410 --> 01:07:14,420 men du bruker hakeparenteser. 1430 01:07:14,420 --> 01:07:17,060 I C, vil du bruke klammeparentes, hvis du selv visste det. 1431 01:07:17,060 --> 01:07:20,910 Men dette er faktisk veldig vanlig i PHP å erklære en matrise, i dette tilfellet, 1432 01:07:20,910 --> 01:07:23,640 av tall, og ring variable tall. 1433 01:07:23,640 --> 01:07:25,300 >> Variabler selv se slik ut. 1434 01:07:25,300 --> 01:07:28,710 Her er en streng, oppgi unquote "hallo verden. "Du kunne ha en omvendt skråstrek n. 1435 01:07:28,710 --> 01:07:30,950 Jeg rett og slett ikke i dette tilfellet. 1436 01:07:30,950 --> 01:07:32,640 >> Nå er dette en interessant konstruksjon. 1437 01:07:32,640 --> 01:07:33,700 C har ikke denne. 1438 01:07:33,700 --> 01:07:34,700 Men dette er super nyttig. 1439 01:07:34,700 --> 01:07:38,160 Og du vil se dette i P set 7 spec - en for hver konstruksjon. 1440 01:07:38,160 --> 01:07:41,800 Hvis du ønsker å gjenta over det som elementer en matrise, trenger du ikke 1441 01:07:41,800 --> 01:07:45,500 å håndtere $ i og $ n, og + +, og alt det der. 1442 01:07:45,500 --> 01:07:47,640 Du kan bokstavelig talt si, i PHP, dette - 1443 01:07:47,640 --> 01:07:51,890 for hvert tall som nummer, så Jeg antar at $ tall 1444 01:07:51,890 --> 01:07:53,380 er en rekke tall. 1445 01:07:53,380 --> 01:07:56,460 Og når jeg sier for hver tall som nummer, dette kommer til å 1446 01:07:56,460 --> 01:08:00,505 automatisk, som min sløyfe utfører, oppdatere, i hver iterasjon, verdien 1447 01:08:00,505 --> 01:08:03,260 innsiden av dollartegn nummer - 1448 01:08:03,260 --> 01:08:07,730 igjen, og igjen, og igjen gå for meg over denne matrisen. 1449 01:08:07,730 --> 01:08:08,735 Så det sparer bare oss koden. 1450 01:08:08,735 --> 01:08:12,250 Ingen semikolon, ingen + + 's, nei jeg er, ingen n sin, det er bare hyggelig. 1451 01:08:12,250 --> 01:08:13,700 >> Men PHP har også dette. 1452 01:08:13,700 --> 01:08:14,830 Og dette er super kraftig. 1453 01:08:14,830 --> 01:08:17,410 Og du vil bruke dette, hender på, i P satt syv. 1454 01:08:17,410 --> 01:08:21,990 Og assosiativ array er også erklært med klammer. 1455 01:08:21,990 --> 01:08:23,569 Men legg merke til syntaksen nå. 1456 01:08:23,569 --> 01:08:26,880 Det minner om hva vi så med print_r et øyeblikk siden. 1457 01:08:26,880 --> 01:08:31,810 Hvor mange nøkler, som en liten mental helse sjekk, synes denne matrisen å ha. 1458 01:08:31,810 --> 01:08:32,689 >> Så det har to. 1459 01:08:32,689 --> 01:08:33,830 Og jeg kaller dette en matrise. 1460 01:08:33,830 --> 01:08:36,760 Men hvis det hjelper, kan du tror av dette som hash, eller som 1461 01:08:36,760 --> 01:08:37,930 en assosiativ array. 1462 01:08:37,930 --> 01:08:39,580 Men det er bare en annen type array. 1463 01:08:39,580 --> 01:08:41,080 Og igjen, ulike språk har disse. 1464 01:08:41,080 --> 01:08:43,810 Vi får se noe lignende i JavaScript i tillegg. 1465 01:08:43,810 --> 01:08:44,609 Det er to nøkler. 1466 01:08:44,609 --> 01:08:48,390 En er sitat unquote, "symbol", en er sitere unquote "pris." Og disse tastene 1467 01:08:48,390 --> 01:08:49,250 hver har en verdi. 1468 01:08:49,250 --> 01:08:54,420 I dette tilfelle er symbolets verdi FB, for Facebook, og prisen verdi er 49, 26, 1469 01:08:54,420 --> 01:08:56,899 som var Facebook-aksjen pris som denne morgenen. 1470 01:08:56,899 --> 01:09:00,170 >> Så hva er nyttig om en assosiativ array. 1471 01:09:00,170 --> 01:09:02,620 Jeg kunne ha hatt en tallmessig indeksert array med bare 1472 01:09:02,620 --> 01:09:04,120 enkle klammer. 1473 01:09:04,120 --> 01:09:09,380 Og jeg kunne ha hatt dollartegn sitat tilsvarer nettopp dette. 1474 01:09:09,380 --> 01:09:10,529 La meg faktisk gjøre det. 1475 01:09:10,529 --> 01:09:14,796 Tenk om jeg i stedet bare erklærte denne matrisen sånn. 1476 01:09:14,796 --> 01:09:17,590 Det er helt gyldig, syntaktisk. 1477 01:09:17,590 --> 01:09:20,569 Det mister ikke noe informasjon, per se. 1478 01:09:20,569 --> 01:09:24,760 Jeg ser fortsatt at symbolet er fb, og at prisen er 49, 26. 1479 01:09:24,760 --> 01:09:28,939 Så hvorfor er assosiativ arrays overbevisende? 1480 01:09:28,939 --> 01:09:30,189 >> PUBLIKUM: Du trenger ikke å huske hvor du setter ting. 1481 01:09:30,189 --> 01:09:32,050 1482 01:09:32,050 --> 01:09:34,130 >> SPEAKER 1: Akkurat, trenger du ikke å huske hvor du la ting. 1483 01:09:34,130 --> 01:09:37,670 Du trenger ikke å vilkårlig huske som lager symbol er i brakett null, 1484 01:09:37,670 --> 01:09:41,479 og aksjekursene er i braketten en, noe som er spesielt farlig hvis du 1485 01:09:41,479 --> 01:09:43,220 forandre ting, til slutt. 1486 01:09:43,220 --> 01:09:46,399 Det er mye hyggeligere å knytte hva vi kaller metadata 1487 01:09:46,399 --> 01:09:48,340 med de faktiske data. 1488 01:09:48,340 --> 01:09:52,399 Jeg vil hevde at det vi virkelig bryr seg om her er fb og 49, 26. 1489 01:09:52,399 --> 01:09:57,020 Symbolet og prisen er metadata som beskriver dataene vi 1490 01:09:57,020 --> 01:09:58,180 faktisk bryr seg om. 1491 01:09:58,180 --> 01:10:01,910 Men dette er bare så mye lettere å få tilgang. 1492 01:10:01,910 --> 01:10:04,090 >> Nå, som en digresjon hva som er prisen vi betaler? 1493 01:10:04,090 --> 01:10:06,600 Vi har gjort dette i CS50 uker. 1494 01:10:06,600 --> 01:10:10,740 Denne funksjonen må komme på noen kostnad. 1495 01:10:10,740 --> 01:10:11,350 Minne. 1496 01:10:11,350 --> 01:10:13,830 Slik at du ikke bare lagre en 32-bit heltall, for eksempel. 1497 01:10:13,830 --> 01:10:17,980 Du lagrer symbol / 0, sannsynligvis. 1498 01:10:17,980 --> 01:10:19,160 Så du bruker mer minne. 1499 01:10:19,160 --> 01:10:22,540 >> Og hva er ytelsen ser noe opp i en 1500 01:10:22,540 --> 01:10:24,822 assosiativ array, sannsynligvis? 1501 01:10:24,822 --> 01:10:26,590 Det er nok tregere. 1502 01:10:26,590 --> 01:10:29,670 Random access er hyggelig, særlig når du kan gjøre binære søk. 1503 01:10:29,670 --> 01:10:33,380 Men hvis du faktisk nå ser ikke for tall, men for strykere, dette 1504 01:10:33,380 --> 01:10:37,630 virkelig er implementert under hette, trolig som en hash table, der 1505 01:10:37,630 --> 01:10:42,950 du enten bruke en hash table med separat kjeding. 1506 01:10:42,950 --> 01:10:46,040 Eller du bruker en prøve å faktisk lagre verdiene. 1507 01:10:46,040 --> 01:10:50,550 Så kanskje du kan gjøre konstant tid, men du har fortsatt å se på S-Y-M-B-O-L, 1508 01:10:50,550 --> 01:10:54,510 eventuelt, i stedet for 32 bare biter å se noe opp. 1509 01:10:54,510 --> 01:10:58,430 Så igjen, de samme ideene som kommer tilbake til gjenta seg i denne sammenheng. 1510 01:10:58,430 --> 01:11:02,120 >> Men igjen, har PHP nå noen super globals at det viser seg, er 1511 01:11:02,120 --> 01:11:02,900 assosiative arrays. 1512 01:11:02,900 --> 01:11:05,590 Vi så en et øyeblikk siden, $ _POST. 1513 01:11:05,590 --> 01:11:08,400 Og at super global har nøkler og verdier. 1514 01:11:08,400 --> 01:11:10,550 Spesifikt, nøklene stille opp med det? 1515 01:11:10,550 --> 01:11:14,520 Hvor kommer nøklene i $ _POST kommer fra? 1516 01:11:14,520 --> 01:11:15,380 Bare for å oppsummere? 1517 01:11:15,380 --> 01:11:16,480 >> PUBLIKUM: Navn. 1518 01:11:16,480 --> 01:11:17,900 >> SPEAKER 1: Navn, hvor? 1519 01:11:17,900 --> 01:11:19,860 >> PUBLIKUM: [uhørlig] 1520 01:11:19,860 --> 01:11:20,750 >> SPEAKER 1: Navn er den egenskap. 1521 01:11:20,750 --> 01:11:23,480 Vel der, hvor de gjorde opprinnelig kommer fra? 1522 01:11:23,480 --> 01:11:24,120 Skjemaet. 1523 01:11:24,120 --> 01:11:30,140 Så hvis en HTML-side har en form tag, på innsiden av disse er enkelte innganger, som 1524 01:11:30,140 --> 01:11:34,760 avmerkingsbokser, tekstbokser, slippe ned menyer, som hver har et navn, de 1525 01:11:34,760 --> 01:11:40,260 navnene ender opp som taster i $ _POST, og, ærlig, for den saks skyld, $ _GET. 1526 01:11:40,260 --> 01:11:42,130 Hvis metoden er å få, samme idé. 1527 01:11:42,130 --> 01:11:43,830 Det er bare i en annen super global. 1528 01:11:43,830 --> 01:11:47,620 Og verdiene selvsagt komme fra hva brukeren har skrevet inn på hans eller 1529 01:11:47,620 --> 01:11:48,890 hennes nettleser. 1530 01:11:48,890 --> 01:11:49,830 >> Men det er et par andre. 1531 01:11:49,830 --> 01:11:52,140 Det er cookie, som vi vil komme tilbake til etter hvert. 1532 01:11:52,140 --> 01:11:56,050 Men de er de tingene som du vet nettet bruker for noen gode eller onde. 1533 01:11:56,050 --> 01:11:57,420 Men vi skal komme tilbake til det. 1534 01:11:57,420 --> 01:12:01,720 Server og økt, og de to ha noen spesiell nytte. 1535 01:12:01,720 --> 01:12:03,940 >> Men la oss ta en titt på denne. 1536 01:12:03,940 --> 01:12:13,330 La meg gå videre og åpne opp et eksempel kalt mvc0.php Så MVC 1537 01:12:13,330 --> 01:12:14,900 står for følgende. 1538 01:12:14,900 --> 01:12:19,390 Og vi innføre dette tidligere enn det som er typisk, egentlig, for å få deg designe 1539 01:12:19,390 --> 01:12:22,180 Oppgavesettet 7, og også siste prosjekter, i form av en bransje 1540 01:12:22,180 --> 01:12:23,670 standard måte, og ren måte. 1541 01:12:23,670 --> 01:12:24,820 Det er god design. 1542 01:12:24,820 --> 01:12:29,090 >> Så du er i ferd med å se, og du vil erfaring, i P 7 sett, paradigme, sortere 1543 01:12:29,090 --> 01:12:32,260 av et programmeringsspråk tenkemåte, ser at litt noe sånt som dette. 1544 01:12:32,260 --> 01:12:35,570 M for Model, C for Controller, V for View. 1545 01:12:35,570 --> 01:12:39,690 Lang historie kort, er MVC bare slags av en metode, en måte å gjøre 1546 01:12:39,690 --> 01:12:43,360 nettsteder, i særdeleshet, der du sette alle dine, dum setning - 1547 01:12:43,360 --> 01:12:44,970 forretningslogikk - 1548 01:12:44,970 --> 01:12:49,710 alle dine immaterielle rettigheter i det som kalles en kontroller, en fil 1549 01:12:49,710 --> 01:12:54,840 som index.php, eller vi får se, quote.php, eller buy.php. 1550 01:12:54,840 --> 01:12:59,570 >> I sammenheng med Problem sett 7, din modeller vanligvis inneholde data, 1551 01:12:59,570 --> 01:13:03,860 noe relatert til en database, som vi vil til slutt se, og dine synspunkter 1552 01:13:03,860 --> 01:13:07,510 inneholder estetikk din området, HTML, CSS. 1553 01:13:07,510 --> 01:13:10,420 Så vi har allerede sett dette i C litt litt ved å bruke. h filer. 1554 01:13:10,420 --> 01:13:15,010 Vi så det et øyeblikk siden med CSS, etter factoring CSS stilisering 1555 01:13:15,010 --> 01:13:16,520 ting ut av HTML vår. 1556 01:13:16,520 --> 01:13:20,730 >> Så MVC er egentlig bare om å tegne linjer i sanden og si, det 1557 01:13:20,730 --> 01:13:25,400 interessant programmeringskode for din hjemmesiden i det vi vil kalle 1558 01:13:25,400 --> 01:13:26,400 kontrolleren. 1559 01:13:26,400 --> 01:13:29,280 Ting knyttet til databasen typisk ender i en modell. 1560 01:13:29,280 --> 01:13:33,070 Men du vil se, i oppgave sett 7, vi fusjonere C og M for å holde det enkelt. 1561 01:13:33,070 --> 01:13:37,630 Men utsikten er der alle HTML din og estetikk vanligvis gå. 1562 01:13:37,630 --> 01:13:39,160 >> Så hva betyr dette i reelle termer? 1563 01:13:39,160 --> 01:13:45,980 Vel, la meg gå inn i vår MVC katalogen som følger. 1564 01:13:45,980 --> 01:13:48,880 Og du vil se mer av disse turnert gjennom i spec. 1565 01:13:48,880 --> 01:13:53,200 Så i mvc0, hevder jeg at dette er, som, versjon 0 av CS50 nettsider. 1566 01:13:53,200 --> 01:13:56,670 >> Alt vi trenger er litt HTML, som en stor h1 tag, tilsynelatende. 1567 01:13:56,670 --> 01:13:57,800 Og deretter en punktliste. 1568 01:13:57,800 --> 01:13:59,860 Jeg har aldri sett en punktliste før, men ingen big deal. 1569 01:13:59,860 --> 01:14:01,590 La oss raskt se på kildekoden. 1570 01:14:01,590 --> 01:14:06,610 Det viser seg at en ikke-sorterte liste med kuler er åpen brakett ul med ett eller 1571 01:14:06,610 --> 01:14:09,065 flere listeelementer, li. 1572 01:14:09,065 --> 01:14:10,650 Så varsel her er et anker tag. 1573 01:14:10,650 --> 01:14:12,130 Vi så at et øyeblikk siden. 1574 01:14:12,130 --> 01:14:13,810 >> Så dette er hvordan jeg implementert denne siden. 1575 01:14:13,810 --> 01:14:18,460 Jeg har to lenker, to listeelementer, en ul for sorterte liste, og til slutt 1576 01:14:18,460 --> 01:14:22,700 resultat, estetisk, er dette svært pen nettside, versjon 0 her. 1577 01:14:22,700 --> 01:14:26,840 Men det som er interessant nå er hvordan dette gjennomføres under hetten. 1578 01:14:26,840 --> 01:14:33,590 >> La meg gå inn i gedit og åpne opp denne aller første eksempel å male et bilde. 1579 01:14:33,590 --> 01:14:37,070 Og vi skal se på hva som er feil, potensielt, her. 1580 01:14:37,070 --> 01:14:43,260 Nå hvis jeg går inn localhost, offentlig, MVC, merke noen filer. 1581 01:14:43,260 --> 01:14:45,780 Jeg kommer til å ringe disse, for øyeblikk, alle kontrollerne. 1582 01:14:45,780 --> 01:14:48,640 Men det er litt av et misbruk fordi vil du se alt som blandes 1583 01:14:48,640 --> 01:14:49,620 på innsiden av dem. 1584 01:14:49,620 --> 01:14:52,330 >> Og la meg gå på innsiden av index.php. 1585 01:14:52,330 --> 01:14:54,700 Og vi ser, bokstavelig talt, det samme HTML. 1586 01:14:54,700 --> 01:14:57,970 Så selv om denne filen ender i . Php, betyr det ikke at det må 1587 01:14:57,970 --> 01:14:59,500 har noen PHP-kode. 1588 01:14:59,500 --> 01:15:02,290 Det kan bare være rå HTML, selv det er litt dumt. 1589 01:15:02,290 --> 01:15:07,650 Men merker det er ingen åpen brakett PHP kategorisere, med unntak for dette, som oppriktig, 1590 01:15:07,650 --> 01:15:09,160 er bare der for å tjene som en kommentar. 1591 01:15:09,160 --> 01:15:12,080 Men det er funksjonelt ikke selv det interessant. 1592 01:15:12,080 --> 01:15:12,960 >> Men legg merke til dette. 1593 01:15:12,960 --> 01:15:15,400 Hva er interessant nå er det endringer på denne siden. 1594 01:15:15,400 --> 01:15:16,650 La meg Klikk Forelesninger. 1595 01:15:16,650 --> 01:15:18,560 Og legg merke til at nettadressen er i ferd med å endre seg. 1596 01:15:18,560 --> 01:15:20,930 Nå er jeg på lectures.php. 1597 01:15:20,930 --> 01:15:22,630 La meg Klikk null. 1598 01:15:22,630 --> 01:15:27,200 Nå er jeg på week0.php Og nå la meg åpne disse filene i gedit. 1599 01:15:27,200 --> 01:15:30,120 Ikke bare indeksen, men la meg åpne opp forelesninger. 1600 01:15:30,120 --> 01:15:33,900 Og la meg bli kvitt kommentarene å fokusere på denne delen bare. 1601 01:15:33,900 --> 01:15:37,680 >> Og nå la meg åpne opp bare én, week0.php, kaste bort kommentarene, 1602 01:15:37,680 --> 01:15:39,910 bare for å rydde opp i dette. 1603 01:15:39,910 --> 01:15:41,720 Og nå opplever følgende. 1604 01:15:41,720 --> 01:15:47,340 Tenker egentlig liksom nøye om design, og la oss gjøre det linjen 1605 01:15:47,340 --> 01:15:52,013 opp den samme, hva gjøres bedre her, tror du? 1606 01:15:52,013 --> 01:15:56,450 1607 01:15:56,450 --> 01:15:57,780 >> Hvordan jeg gjør en uke en? 1608 01:15:57,780 --> 01:15:58,480 Hva med dette. 1609 01:15:58,480 --> 01:16:00,450 Så dette er hvordan jeg gjorde uke en. 1610 01:16:00,450 --> 01:16:08,290 Jeg gikk opp til File, New, Lim, Spar, week1.php, og da jeg gikk inn her. 1611 01:16:08,290 --> 01:16:09,875 Og jeg forandret en - 1612 01:16:09,875 --> 01:16:11,646 hva var denne, en til fredag. 1613 01:16:11,646 --> 01:16:14,430 1614 01:16:14,430 --> 01:16:15,810 Jeg endret nuller til en. 1615 01:16:15,810 --> 01:16:17,150 Jeg endret dette til en. 1616 01:16:17,150 --> 01:16:20,350 >> OK, så nå se på filene mine. 1617 01:16:20,350 --> 01:16:22,100 Hva kan gjøres annerledes? 1618 01:16:22,100 --> 01:16:25,310 Hvor er muligheten til det, kanskje? 1619 01:16:25,310 --> 01:16:28,330 Så det er muligheten til å starte factoring dette ting ut. 1620 01:16:28,330 --> 01:16:32,950 La meg åpne opp, som en spoiler, for hva du vil se i P set 7. 1621 01:16:32,950 --> 01:16:38,750 Hvis jeg åpner opp, nå, index.php i versjon fem av dette, ser det slik 1622 01:16:38,750 --> 01:16:40,730 mer kryptisk, riktignok. 1623 01:16:40,730 --> 01:16:43,710 >> Men dette, nå er det jeg vil kalle en kontrolleren som er å kontrollere 1624 01:16:43,710 --> 01:16:44,770 logikk på siden min. 1625 01:16:44,770 --> 01:16:48,510 Og du kan slags rekonstruere, intuitivt, kanskje, hva skjer. 1626 01:16:48,510 --> 01:16:50,630 På den første linjen, er det litt kryptisk. 1627 01:16:50,630 --> 01:16:54,040 Men legg merke til jeg krever, i likhet med skarp omfatter, kalles en fil 1628 01:16:54,040 --> 01:16:55,930 helpers.php. 1629 01:16:55,930 --> 01:16:59,980 Og da jeg ringer, tilsynelatende, en funksjon, kalt render, passerer i 1630 01:16:59,980 --> 01:17:00,850 to argumenter. 1631 01:17:00,850 --> 01:17:02,440 >> En er sitat unquote, spissen. 1632 01:17:02,440 --> 01:17:04,800 Og den andre er, hva slags datatype er dette, baserte 1633 01:17:04,800 --> 01:17:07,180 på vår syntaks tidligere? 1634 01:17:07,180 --> 01:17:08,160 Det er en tilknyttet array. 1635 01:17:08,160 --> 01:17:11,730 Spesielt er det bestått i tittelen med noen metadata som minner 1636 01:17:11,730 --> 01:17:13,430 meg hva det er og dens verdi. 1637 01:17:13,430 --> 01:17:16,340 Så ser jeg en hard kodet ul, så noen rå HTML. 1638 01:17:16,340 --> 01:17:20,020 Men da er jeg tilbake i PHP-modus å kalle en funksjon render. 1639 01:17:20,020 --> 01:17:24,390 Så selv om du aldri har brukt HTML eller PHP før, og selv om dette ser 1640 01:17:24,390 --> 01:17:27,480 skumlere, hvorfor er dette trolig bedre design? 1641 01:17:27,480 --> 01:17:31,310 Hva er bedre om det, basert på slutning? 1642 01:17:31,310 --> 01:17:32,130 >> PUBLIKUM: [uhørlig] 1643 01:17:32,130 --> 01:17:35,750 >> SPEAKER 1: Mindre overflødige i at det er ikke mer HTML-koden, ikke mer 1644 01:17:35,750 --> 01:17:38,410 hoder tag, ikke mer body-koden i hver jævla fil. 1645 01:17:38,410 --> 01:17:41,860 I stedet har jeg priset ut fellestrekk og antagelig sette dem 1646 01:17:41,860 --> 01:17:45,150 i en fil eller annen måte relatert til en header. 1647 01:17:45,150 --> 01:17:48,500 Og samme for nær kroppen tag, den nære HTML-koden. 1648 01:17:48,500 --> 01:17:52,165 Det er nok her nede inne av bunntekst et sted. 1649 01:17:52,165 --> 01:17:57,050 Og du vil se, i oppgave set 7, en liten tur gjennom dette. 1650 01:17:57,050 --> 01:17:58,070 >> Så hva som ligger foran? 1651 01:17:58,070 --> 01:18:03,390 Det eneste vi har ikke muligheten ennå for er å faktisk lagre data. 1652 01:18:03,390 --> 01:18:06,110 Og så hva vi vil begynne å se Onsdag, for eksempel, er at 1653 01:18:06,110 --> 01:18:08,450 gammel venn Excel, eller tall, gjør det mulig å lagre mye 1654 01:18:08,450 --> 01:18:10,060 data i rader og kolonner. 1655 01:18:10,060 --> 01:18:12,570 Viser seg at du kan gjøre det i hva som er kalles en database, programmatisk. 1656 01:18:12,570 --> 01:18:16,620 manisk Og det viser seg, etter det, vi vil være i stand til å lagre ting som 1657 01:18:16,620 --> 01:18:20,550 dette, som du vil se igjen i P sett 7, en hel haug med brukernavn og 1658 01:18:20,550 --> 01:18:23,690 passord, sistnevnte som er faktisk kryptert, mye som de 1659 01:18:23,690 --> 01:18:25,550 var i P sett 2s hacker utgave. 1660 01:18:25,550 --> 01:18:29,600 Og til slutt, vil du gjennomføre dette, din egen eTrade-lignende nettsted som 1661 01:18:29,600 --> 01:18:32,220 implementerer kollektivt CS50 finans. 1662 01:18:32,220 --> 01:18:36,000 >> Til slutt, siden du bodd her så sent i dag, hvis du kommer tilbake til denne delen 1663 01:18:36,000 --> 01:18:41,120 av campus, på 04:00 i dag, vil vi gi deg ikke bare råd, på SCES 1664 01:18:41,120 --> 01:18:44,200 Rådgivning Fair, på 4:00 i Maxwell-Dworkin, vil vi gi deg noen 1665 01:18:44,200 --> 01:18:47,470 Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Sjokolade 1666 01:18:47,470 --> 01:18:50,840 Chip Cookie Dough, og når du Google Chunky Monkey, får du dette. 1667 01:18:50,840 --> 01:18:53,620 Så alle som venter på 04:00 PM i Maxwell-Dworkin. 1668 01:18:53,620 --> 01:18:56,736 Vi sees på onsdag også. 1669 01:18:56,736 --> 01:18:59,960 >> SPEAKER 2: Ved neste CS50, RJ sover i. 1670 01:18:59,960 --> 01:19:03,656 1671 01:19:03,656 --> 01:19:04,906 >> RJ: My seksjon! 1672 01:19:04,906 --> 01:19:07,727 1673 01:19:07,727 --> 01:19:08,977 Ha! 1674 01:19:08,977 --> 01:19:12,056 1675 01:19:12,056 --> 01:19:13,306 Oh, 1676 01:19:13,306 --> 01:19:16,374