ЗВУЧНИК 1: Сите, нели добредојде назад. Ова е CS50. И ова е почеток на неделата девет. И ова е почеток на крајот на вашето време во CS50, во која ние транзиција сега, конечно, на веб аспект на курсот, каде што ќе најдете дека многу од основите кои ние сме биле извоз за неколку недели сепак се врати да ги посети, или прогонуваат, нас. Но сега, ќе најдете дека тоа е редот на големина полесно да се остварат одредени задачи и реши одредени проблеми - толку многу што дури и ако си мислел одреден проблем поставува се забавуваат во нивните свој начин, мислам дека ќе најдете дека p постави 7, стр одреди 8, а потоа, во крајна линија, финалниот проект ќе биде сè повеќе и повеќе пријатна, бидејќи ќе видите дека ние почнат да се земе здраво за готово сега работите се допаѓа управување со меморијата, и покажувачи, и она што се случува на под хауба. И повторно, тематски, во текот на целата семестар е ова дели и дели. А сега ние сме вид на до тука, стоејќи на рамениците на недели минатото. Сега, да се потсетиме од последниот пат кога ние зборуваше за тоа како интернет работел. И тоа беше можеби симплификација, но запомнете дека секој компјутер во светот има IP решавање, иако тоа е малку на симплификација уште. И оние кои адреси се користи за да се уникатно идентификуваат машини, така што кога ќе се испрати информации, или пакети, така да се каже, тие можат да имаат потекло адреса и одредишна адреса. И истите тие IP адреси може да се користи и за добро и, исто така, за зло, да ги пратите, на пример. Всушност, секој од вас со лаптоп отвори сега, или на телефон во вашата џеб, има IP адреса на мрежата на Харвард. И тоа не е толку тешко да се корелат дека за тоа кој и каде што се овие дена. Но повеќе за тоа можеби во иднина. Сега мислев дека сум се врати некои спомени од [? подобрување?] и да ви даде уште еден клип од шоуто ќе може да се најдат познати. Ако можеме да ја придуши го светла за само неколку секунди. Шоуто Numb3rs. ЗВУЧНИК 2: Тоа е 32-битен IPP4 адреса. ЗВУЧНИК 3: IPP, како и во интернет? ЗВУЧНИК 2: Приватна мрежа. Да приватна мрежа Amita е. Таа е толку неверојатен. ЗВУЧНИК 3: Ајде, Чарли. ЗВУЧНИК 2: Тоа е. А огледало IP адреса. Таа ни овозможите да се види она што таа го прави во реално време. ЗВУЧНИК 1: Добро, па неколку работи ред со оваа слика. Значи еден, и овој е прифатливо, ова е всушност не е валидна IP адреса. А валидна IP адреса мора да биде броеви од формата w.x.y.z, каде што секој од тие писма е 0 до 255. Но тоа е во ред затоа што исто како и филмови каде што тие лажни телефонски броеви, тие лажни IP адреси. Вие не всушност го погоди реалниот сервери. Но Иначе, ова е интернет пребарувач. И прелистувачи не почнувајте Ставање компјутерски код вака. И ако ние се погледне малку подлабоко, информации дека јазикот што тие го гледате на екранот е јазик наречен Цел C, што е јазикот на кој iPhone апликации се напишани, особено оние кои вклучуваат креони, како што можете да видите од изворниот код овде. Добро, јас мислев дека ова е смешно. Значи ова програмка на кодот има апсолутно нема никаква врска со она што оваа особено епизода беше околу. Па шега е вид на на луѓе презема за ова готово. Но, ова не е толку тешко да се добие овие технички детали право. И јас би ве охрабруваме. И всушност, 50 многу добро може да расипат многу ТВ емисии и филмови или бидејќи ќе најдете дека тоа е само не е можно она што тие се прави на екранот. Но навистина, ова е на кодот кој го би можеле да ја видите во iPhone апликација или Mac OS апликација. Тоа нема ништо на сите да го стори со сигурност. Па да се внимава од за повеќе таква забава работи како што. Но, денес ние почнат да се нурне во навистина длабоко на целиот спектар на јазици. Еден навистина, еден од сеопфатната takeaways на овој дел од Се разбира не е да се научат како да програма во PHP, да не научат SQL по себе, не да научат да го вклучите Javascript по себе, туку да се научи како да се учат себе нови јазици, бидејќи, навистина, ние почнат да се земе сега обука тркала надвор, така што по крајот се разбира, вие не очекуваат 20 страница спецификација да ви кажам како да се имплементираат некои програма. Имате доволно состојки во вашиот ум, и доволно алатки во вашиот алатка комплет, со која треба да започне изградба на решенија за проблемите од интерес за вас за некои ученици група, за некои истражувачки проект, или навистина ништо од интерес за вас. Па кон таа цел, да се потсетиме дека ова е сликата што ја привлече последен пат. И ова е два компјутери, клиентот и прекине, да разговараат со еден на друг. И протоколот, јазикот, така да се зборува, дека овие два или повеќе компјутери да се случи да се зборува се нарекува HTTP. И тоа е само протокол се користи од страна на компјутери за пренос на информации преку на World Wide Web. На интернет, се разбира, е само еден сервис која работи на врвот на т.н. интернет. Што е уште една услуга достапна на врвот на интернет овие денови? Некои други протокол или - што е тоа? ПУБЛИКАТА: FTP. ЗВУЧНИК 1: FTP. Па датотеката Протокол за пренос е друга. Повеќето од вас веројатно не го користат. Но, повеќето од вас веројатно ги користеле работи како Gchat, или инстант пораки поопшто, секако е-мејл. И оние кои се, исто така, се услуги кои работат на врвот на интернет, бидејќи, во крајот на денот, на интернет себе навистина само се добијат податоци од точката А до точката B. И тоа го користи голем број на честички себе, еден од нив или две од нив повеќето обично се нарекува TCP / IP, што да се каже дека еден компјутер на на интернет, всушност, може да се прави различни нешта, електронска пошта, и интернет, и така натаму. Google го прави многу за тоа. Па, како се оние услуги уникатно идентификувани, не можеме да речеме, на компјутер кои, всушност, може да се прави повеќе нешта? Бројот на портот. И овие се само произволни човечки конвенции како 80 е интернет, 443 е шифрирана веб, 25 е-мејл. И таму е гроздовете на другите. И тие бројки едноставно се вклучени во оние пакети на информации, оние виртуелен коверт, кои, всушност, содржани барање или одговор. Па кога ќе се вратам одговор од веб, обично, не гледам никаква броеви за она што во однос на код за статус на одговорот. Вие не всушност гледаат на внатрешниот работата на пакети кои доаѓаат назад. Но 200 навистина значи во ред. А тоа значи дека се е во ред. Можеби сте виделе еден куп од нив. Што е најверојатно најчестиот сте виделе на интернет? 404. Тоа само значи датотека не е пронајдена. Тоа значи дека некој ја зезнав. Што направи од страна Грешење на URL-то, или некој друг не знаеше од кои ви даваат валиден URL-то, или тие избришани датотека и URL-то е уште се користи од страна на луѓе. Значи било кој број на причини може да се објасни зошто датотека не е пронајдена. И ќе видите, во неделите што доаѓаат, овие други грешка кодови, и ќе ги искористат предностите на некои од нив. Најлошото е 500. Ако добиете 500 грешка во кодот што сум напишано, мислам на тоа како вид на аналогни на секунда грешки во светот на веб програмирање. Тоа не е толку поразителна. Но, тоа само значи дека, некаде, сте ја зезнав. Па со нетрпение очекуваме да оние. Но, ајде да видиме дали можеме да види овие во контекст. Дозволете ми да оди на пребарувачот овде и направете го следново. Па ова е Хром, кој се случува да да се инсталира во апаратот. Но повеќето секој интернет пребарувач овие денови има некои еквивалентна функционалност. Одам да одат нагоре мени на Хром, и одете на Tools, и јас ќе одам да си да Алатки за програмери. И ќе видите дека оваа мала панел се отвора во дното на прозорецот. Друга кратенка, да бидам искрен, дека јас обично користат себеси е да Десен клик или контрола кликнете било каде на интернет страница и само оди да ги провери Елемент. И дека не само што ќе се отвори ова има за вас. Таа, исто така ќе се отвори, посебно, Елементите дел на на левата страна. Па ние сме се разбира гледањето на Google. Ќе го сменат логото денес. Но од тоа ако се движите надолу до тука, информации дека под Елементи, ќе видите она што се нарекува HTML, HyperText Markup Јазик, и ова е јазикот дека овој и на сите веб страници, навистина, се напишани внатре Но тоа е всушност форматирана за ни толку многу повеќе читливо отколку што вообичаено е. Всушност, ако јас одзумирате, а јас наместо Само десен клик или контрола клик кликнете на страница, и потоа оди да ја видите Страница Извор, ова е буквално она што Google испрати до мојот интернет пребарувач. Па некои лице или лица напиша Google.com со користење на овој изворниот код. Повеќето од ова не е HTML. Тоа е всушност јазик наречен JavaScript, кои ние ќе дојде до средата. Но, она што Хром, и она што секој интернет пребарувач може да направи за нас, е вид на видите минатото на сите одвлекување на вниманието на луди синтакса, и вратете бел простор за нас, па дури и синтаксичко означување, или colorize работи за нас. Така ќе најдете дека овие таканаречени инвеститорот алатки е вградена во прелистувачи ќе го направат вашиот живот, па, па многу полесно затоа што можете да истражуваат, преку ова мени интерфејс, токму она што основните изворниот код е за секоја страница на интернет. И навистина, ова е една од најпознатите ефикасни начини за да научат како да прават нешто ново, барем ако страната не е толку сложен како да ги победат, е да се започне ѕиркаа наоколу тоа е HTML, погледнете во својата т.н. CSS, која ние ќе дојдеме да се малку, како и, да се добие разбирање на тоа како програмер имплементирани одредени карактеристика на оваа страница. Но повеќе технички интересни право сега тоа се случува да биде ова. Ако одам во мрежата јазичето, ајде сега го расчисти ова. Одам да кликнете на малку крстот симбол тука, а потоа да одат во друг веб-сајт. И јас сум само ќе да напишеш во Facebook.com. Нема HTTP, нема HTTPS, без мрежа. Ајде да всушност гледаат што се случува овде. Enter. Сега забележите во целина куп работи само се појави во оваа дното панел, во Покрај веб-страница појавувајќи се во врвот. Одам да дојдете назад во Мрежата јазичето тука, а јас ќе одам да кликнете на првиот ред. Што оваа алатка е ќе се открие за нас е секој еден од HTTP барања која брзо само вратив и назад помеѓу мојот интернет пребарувач и на Фејсбук сервер. И така секој еден од тие редови претставува едно такво барање или одговор, една или повеќе од оние виртуелни плик. Или повеќе случајно, тоа е како едно лице како лице, клиентот во ресторан, бара нешто повторно, и повторно, и повторно. И келнерот го држи доведување назад едно по едно време. Па сега, ако јас зумирате на оваа, информации и тоа ќе биде вид на нешто дека сте добредојдени да и ги охрабри да си игра со на свој, бидејќи ние не ќе помине низ сето во големи детали. Но забележително е неколку под јазичиња тука - Хедери, Преглед одговор, Колачиња, и тајмингот. Јас сум само ќе се погледне на заглавија сега за сега, бидејќи тие се малку состојки во внатрешноста на плик кој помогне податоци стасаат до и од места. Значи прво, дозволете ми да кликнете на ова, ги Извор до Барање заглавија. Постои барање дека мојот интернет пребарувач, Хром, во овој случај, испратени во внатрешноста на дека виртуелната плик. Ќе потсетиме минатата недела ја рачно напишани него, додека претендира да биде прелистувачот. Тогаш тоа потсети на серверот дека тоа е во потрага за домаќин наречен Facebook.com. А потоа, тука е малку повеќе arcane информации кои ќе се бранува нашите раце за сега. Но ако почнам да дојдете долу сега во овој прозорец, дозволете ми да се дојде до одговор заглавија. Тоа е она што е во виртуелниот плик кој се врати од Facebook.com. И ако јас кликнете View Извор само за да го видиш сурова текст на него, забележите неколку работи. Еден, Фејсбук, исто така, зборува на ист протокол, верзија 1.1 од него. Па тоа е убаво. Но статусот кодот 301, Преместена Трајно. Па, каде е грижам се Фејсбук оди? Што е ова обидуваат да го пренесат на нас? Па, забележите овде има уште еден насловот наречен Локација. Значи, зошто е Фејсбук ми кажуваше дека тие Преместена Трајно кон оваа адреса до Локација? Го заборавив www. Така што беше мојот избор. Всушност, повеќето од нас ретко, веројатно, напишеш www.whatever.com овие денови. Но излегува систем администратор, како што се Фејсбук, може да конфигурирате нивните сервери на таков начин дека или Facebook.com работи, или www.Facebook.com работи, или, навистина, секој таков префикс пред своите име на домен. Па тие го направиле тоа за нас. И тие се ни пренасочува, веројатно за некои технички, некои маркетинг причини. Тие само сакаат да canonicalize на www.Facebook.com. Но тоа не е сосема неа. Ако јас дојдете долу тука, ајде да види што се случува. Ова е ми кажуваше ние Преместена Трајно да http://www.Facebook.com. Па ајде да погледнеме на второ барање дека мојот интернет пребарувач испраќа. За жал, тоа изгледа како што се Фејсбук се пресели повторно бидејќи втората барање, со избирање дека рачно наместо тоа, вели дека, исто така, се пресели трајно. И дозволете ми да дојдете долу тука на одговор заглавија. Каде Фејсбук нема сега? Па https. Па сега Фејсбук започна, особено во светлината на моменталните настани во последниве неколку месеци, особено и исто така, во изминатите неколку години за да се принудат сите на нивните корисници, во добра начин, да користите HTTPS, што е повеќе обезбеди, иако не е целосно безбеден. Па сега мојата страница, мојот интернет пребарувач е ќе побара овој трет URL-то. И сега, конечно, ќе го добиеме инаку невидена 200 OK. Значи она што во светот или сите овие други редови овде долу. Јас буквално ја внеле една работа, а мојата интернет пребарувач се чини дека се бара како 20 некои чудни работи. Што е тоа? ПУБЛИКАТА: Скрипти? ЗВУЧНИК 1: скрипти, па други датотеки напишани на јазик наречен Го вклучите Javascript-, која, пак, ние ќе види малку во средата. Што друго? Стилски листови. Па нешто на јазик наречен CSS, која ќе видиме во малку. Gifs, и JPEG слики, и PNGs, и слики, и филм датотеки - без оглед на веб-страница го е најверојатно во форма на датотека. И така она што го гледате на левата страна страна постои на сите датотеки дека Хром мораше да преземете, рекурзивно, ако сакате, со цел да се сочинуваат целината на страната. Значи она што го видовме еден миг пред со Google, ако јас кликнете на елементи табот, ова, секако, е HTML, јазик кој ја сочинува оваа страница. Но, има гроздовете на други работи. Има логото. Има оние сино-носталгичната икони таму. И има други елементи сеуште на на страница, која самите би можеле да бидат посебни датотеки. Значи она што е убаво за интернет пребарувач е во тоа што тоа изгледа на јазик ние ќе да започнете со пишување, или веќе сте почнав да пишувам во P сет 7, бројки од каде овие датотеки во живо, и оди и ја зграпчува нив, како и. И не можам да истакнам доволно, дури и иако некои од ова може да изгледа малку arcane или големо во прв поглед, Учењето како да програма апликации за веб, тоа е непроценливо да се разбере како овие малку алатки работа. Овие се вид на како GDB како алатки, но многу поедноставно, во крајна линија, да се користи - и навистина ви дава очи во она што ние сме биле преземање здраво за готово за сосема извесно време сега. Значи она што може ние сега се прави со оваа информација? Добро, ајде да всушност ги разгледаме во на концепти на основните HTML. И ние ќе го одложат, како што веќе го имаме, да се делови на оваа недела, на проблемот постави 7 спецификација, на некои од повеќе Деталите од овие јазици. Но, да видиме ако не можеме да наслика слика на она што треба да се разбере целокупната тука. Па HTML, HyperText Markup Language, не е програмски јазик. Што не значи дека навистина? Па HTML изгледа вака. И некои од вас веќе знаете ова. Некои од вас се прави ова за некое време. Но, да видиме ако не можеме да го пополни во некои празни места, како и. Па забележите неколку работи овде. Еден, тоа е само текст. Па тоа е исто како изворен код во Ц, или некој друг јазик. Забележите дека се чини да се биде модел тука. Има вовлекување, но технички вовлекувањето е само човечките конвенција. А прелистувачи не се грижи ако има нови линии и јазичиња се допаѓа гледаме таму. Но забележите дека има симетрии тука. Таму е она што јас ќе се јави, на врвот на оваа датотека, отворен таг, или на почетокот таг, наречен HTML. А потоа, долу, совршено наредени нагоре, многу како што го правиме со големи загради, можеме да видиме отворен заградата, напред коса црта, HTML, блиску заграда. Па тоа е соодветната блиску ознака, или на крајот таг, за таа работа. Заедно, сè внатрешноста на т.н. отворен таг и блиски таг компонира она што ќе го наречеме елемент. И ние ќе видиме, во само еден миг, тоа е навистина како јазол во дрвја. Затоа што ако мислите дека за сега вовлекување што е имплицирана тука, вид на мора, како, баба или дедо јазол наречен HTML. Колку деца би рекол ти, врз основа на оваа слика, на HTML елемент има? Па веројатно две. Една од нив е на чело елемент, очигледно. И еден е телото елемент. И зошто две деца? Па, јас сум само вид на inferring дека ако Имам отворена глава таг и тогаш во близина главата таг, тоа е елемент. А потоа, ако има уште отворени тело таг и близок телото таг, тоа е како уште еден елемент. Значи, во смисла дека ако јас вид на ротирање сликата на негова страна, тоа е како да имате HTML таг, а потоа главата таг, а потоа телото таг и потоа некој текст, Здраво светот, висат надвор од телото таг себе. Па ние може да нацрта слика која може да изгледа вака. На форми се произволни. Но забележите дека јас сум користел вид на елипса на врвот да ги претставуваат самиот документ. Излегува не може да има други работи внатрешноста на веб страница, која јас не сум подготвени тука. Па ние се случува да се дури и висат на HTML јазол исклучување на т.н. документ јазол. И тогаш имаме главата и тело и насловот, известување, која е вгнездена понатаму. Јас не се мачат ставање дополнителна линија паузи во внатрешноста на титулата таг. Тоа само се чувствува како да е добивање на малку премногу опширниот. Па јас го остави во една линија таму, со опен, здраво светот, во близина на титулата. И тогаш имаме некој текст висат надвор од овде. Значи оваа слика ќе се врати за ни кога ќе се нурне во вклучите Javascript-. И разбирање дека кога ќе пишуваат HTML вака, она е интернет пребарувач правиш? Па, ние не мора да се грижите за како таа го прави тоа, или со она што алгоритам, но на крајот на денот, Кога пребарувачот добива HTML како дека од Фејсбук или Google, тоа parses тоа, така да се каже, тоа го чита, со нешто како fread, од врвот до дното, лево кон десно, и како што сфаќа, ох, отворен ознака, и потоа да го затворите ознака, таа почнува да се Примерок, така да се каже, еден јазол на дрво. И кога го средби, како што ние си имплицирана тука со вовлекување, а јазол, тоа mallocs еден јазол за тоа и спроведен дека во дрвото. Па дрво структури, бинарни дрва, троичен дрвја, и поголеми дрвја, кои ние погледна една недела или две години, известувањето дека истиот принцип е кои доаѓаат назад кон нас. И кој спроведува, Хром што тим сторија тоа, веројатно имаше да се имплементираат некои вид на структура на стебло под хауба. И дека сам по себе е веројатно во јазик како C или C + +, или помала ниво јазик дека ние ќе сега ги користат на врвот на веб. Па сега, можеби, ова ќе направи повеќе смисла. Крај на тетоважа од некојси кој може жалам тоа на крајот, каков вид на. Добро, во ред, па многу веб хумор. Тоа не е навистина се случува повеќе толку добро денес. Па ние ќе продолжат понатаму. Сите во право. Па ајде да ги разгледаме сега на неколку примери. Наједноставен можен работа може да биде ова. Одам да се оди напред и да се отвори во gedit фајл наречен hello.php. И во внатрешноста на тука, јас ќе одам да брзо само го направите ова, printf, цитирам unquote, "Здраво светот." Па известување, а јас ќе дадам се од обратна коса црта n, Јас не сум пречи да се прогласи главната. Што се испоставува, во PHP, и многу јазици, вие не треба главен функција сама по себе. Вие само може да започне пишување вашата програма. Сега, кога јас ја зачувате оваа датотека, забележиш јас сум ќе мора да го направите следново. Јас не одам да се користи се направи, и јас не сум случува да се користи ѕвекот затоа што PHP, за разлика од Ц, не е компајлирана јазик. Тоа е она што се нарекува препознаена јазик, што значи дека ќе го стартувате како влез преку друга програма наречен преведувач. И таа програма го чита, врвот до дното, лево кон десно, и не она што ќе го каже да го стори. Значи во овој случај тука имам една линија во која се вели printf. Па кога ќе ја извршите оваа изворниот код, hello.php, иако програма со која се случува, практично, да се нарекува PHP, таа програма PHP се случува да се прочита оваа датотека, врвот до дното, лево кон десно, и тоа се случува да го направи она што кажам тоа да се направи - извршување на кодот, и ако тоа не го признава нешто, само плукање тоа надвор. Па јас ќе одам да се оди напред и да се кандидира PHP на hello.php. Enter. И тоа не е сосема она што се наменети. Па, зошто е тоа така? Па, PHP е јазик кој е всушност дизајнирана да биде прилично испреплетени со интернет. Кога изработка на веб страни со овој јазик PHP, како што наскоро ќе видиме, ние ќе сакате да направите нешто како печати надвор линии како оваа. Па јас ќе одам да го направите тоа. Отворен заградата, прашалник, PHP, и сега јас сум само ќе алинеја само за да одржите работи убаво. И сега јас ќе одам да направите е прашање одбележи блиску заграда. Па таму е малку на асиметрија тука. Вие не го направите тоа. И не го сторат коса црта, па PHP е малку различен. Но, сега, ако јас повторување на оваа програма, PHP hello.php, сега всушност Здраво Светот. А ние ќе се види зошто ова е вредно. Еден, тоа ми дозволува да се одреди, супер експлицитно, ова е код, изврши тоа. И тоа е навистина она што овие специјални тагови имплицираат тука. Но, тоа исто така значи дека ако јас само го прават нешто како Јас цел овде, дека значи дека, буквално, дека само ќе да се испечати, без потреба да всушност повик printf, или да ги печатите, или било која слична функција. Па ние ќе се вратам на тоа во само еден миг. Прво, да го направите тоа. Внатрешноста на апаратот, имаме директориумот наречен Vhosts, за виртуелни Силите, коса црта локалниот компјутер, коса црта јавноста. Па тоа е малку опширниот, но долга приказна Накусо, апаратот не е со цел само за поддршка C. Тоа е, исто така, дизајниран за поддршка на PHP. Но тоа е исто така дизајниран да биде веб серверот, и базата на податоци на серверот. И тој е наменет, и навистина конфигуриран, да биде потсетува на било комерцијални веб хостинг компанија која можете да плаќаат $ 5 месечно за, $ 100 за еден месец за. Без оглед на услуга е, тоа е конфигуриран да се биде многу сличен на реалниот свет производство на серверот. И што значи тоа е тоа што работи на апаратот е веб сервер софтвер. Тоа се случува да се нарече Апачи. Тоа е само слободен, софтвер со отворен код, и многу популарни. И ние имаме конфигуриран Apache-то да знаете дека ако јас ја посетите одреден рачно, со Хром или било кој прелистувач внатрешноста на апаратот, да се погледне во овој директориум за датотеките што корисникот е барател. Со други зборови, дозволете ми да оди напред и да го направите тоа. Внатрешноста на мојата јавна директориум, јас ќе одам да се оди напред и да се создаде датотека наречен index.html. Што ми дава табот тука. И јас одам да се оди многу брзо и оди напред и да се тресне од оваа програма тука. DOCTYPE HTML, која за сега, само Претпоставувам дека имаш да напишеш. Тоа е само таинствениот таг, тоа не е навистина таг HTML, дека се нагласува дека тука доаѓа некои HTML. Одам да се оди напред и да се рекреираат она што го видовме пред еден миг. Тука е шеф на страната. Во внатрешноста на главата беше - па насловот. Па ние ќе се каже здраво, светот. А потоа долу тука е телото таг. Дозволете ми да го затвори телото таг. А потоа тука Јас исто така ќе се каже, само за јасност, Здраво светот. Па ова е, веројатно, наједноставниот можен веб страница можете може да се направи тоа е валидно. Тоа е синтаксички валидни. Сето она што се отвори е затворен. Се е убаво во стилизирана и вовлечен. Да видиме сега како јас може да пристапите на оваа датотека. Па, дозволете ми да одат во Хром тука. И дозволете ми да одат на http://localhost/index.html. Значи она што е локалниот компјутер? Добро, повеќето било кој компјутер во светот, Linux, Mac OS, Windows, има прекар наречена локалниот компјутер. Па ако некогаш сакате да разговарате да на свој компјутер - иако, чудно е рефлексивно - ти себе се нарекуваш локалниот компјутер. Без разлика што вашиот вистински компјутер е вика, без разлика дали тоа е на David MacBook Воздух, или нешто повеќе опширниот како тоа. Значи ова URL е очигледно случува да се користи на HTTP да разговара со локалните домаќин, на ист компјутер, со уредот и тоа се случува да побара, само да потрае погоди, она што датотека? Index.html. Значи уредот е конфигуриран во однапред да знаат дека ако Прашувам за нешто како index.html, барате во една папка наречена Vhosts, во папка наречена локалниот компјутер, во фолдерот во него се нарекува јавност. Тоа е каде што сите од моите јавноста додадени фајлови: се случува да биде. Па јас сум сега ќе удри Enter. И проклето, не е дека забранетото порака, инаку позната како 403, на нумерички код за неа. Значи она што е во ред овде? Па, тоа не е доволно само да се стави на датотеката во внатрешноста на мојата папка. Јас треба да всушност го направите следново. Дозволете ми да одам во мојата Vhosts директориум, во localhost, во јавноста, и нека ми направи ls цртичка л. И има неколку други работи тука за целите на денешниот ден. Но информации на левата страна, веднаш да index.html, ние само се види еден RW за преснимување. И во минатото, она што нема RW застана за? Само читаат или да пишуваат. Фактот дека тоа вели RW на левата страна значи јас, сопственикот на оваа датотека, може да се прочита или запише неа. Но јас треба да ги споделите со сите луѓе во свет ја прочитате оваа, иако не го пишувам. Па ќе одам да го промените режимот на датотека, chmod, сите плус r за да даде сите читаат дозвола на фајл наречен index.html. И ако јас сега Повторете ls цртичка л, најава тоа, овде, некои повеќе На R се појави. И сега за сега, на спец оди во повеќе детали. За P сет 7, тоа само значи секој Сега можете да ја прочитате оваа датотека. Ако јас се вратиме на мојот интернет пребарувач сега и повторно, Voila. Здраво светот. И јас дури и може да се отвори мојот Хром алатки и види, исто како со Google и Фејсбук дека има мојот HTML, форматирана малку поинаку и обоени. Ако одам до мрежата јазичето и ја превчитате на страница, забележите дека постои добие побара Хром е испраќање на апаратот. Тука е и 200 за кои особено датотека. Значи во кратки, ова е како сите овие различни парчиња доаѓаат заедно. Тоа само така се случува, дека на веб-серверот ние сме користење на правото сега не е далечинскиот управувач, како што се Фејсбук. Тоа е буквално на ист компјутер, кој е совршено добро. Па што повеќе можеме да направиме во некоја веб страница? Па, само, ајде да бриз преку неколку од овие работи. Но дозволете ми да оди напред и да отвори Gedit со index.html. И дозволете ми да оди напред и да каже здраво CS50, спаси оваа датотека, вратете се на пребарувачот, навистина underwhelming промени. Но што ако ние сакаме да всушност водат до нешто што сега? Значи излегува дека можеме да имаме врски во HTML дека се само тагови себе. Тоа се случува да се нарече сидро таг. a href еднаква на https://www.cs50.net, www.cs50.net Затвори цитат, блиску заграда. И сега ајде да видиме што друго следува потоа. Сум го отвори таг. Јас сега треба да го даде една фраза од типот CS50. Дозволете ми да го затвори таг. И ќе забележите неколку работи. Иако има оваа криптичната работа тука, не сум го повтори кога ќе затвори таг. Вие само затвори таг со своето име сам. И тоа е она што е познат како атрибут со вредност. Атрибути само ја менувате на однесување на некои таг внатрешноста на една страница. Па ова е прецизирајќи дека хипер референца, фенси начин да се каже URL за ова сидро, за овој линк, треба да биде CS50.net. И текстот што сакаме да го покаже корисникот не е дека суровини рачно, туку зборот CS50. Значи, ако сега јас ја превчитате, дозволете ми да зумирате за јасност, дозволете ми да ја превчитате страница, забележите дека имаме оваа старата школа сини истакна линк. И ако јас лебдат над неа, и тоа се случува да биде тешко да се види, во долниот лев агол агол на екранот, информации за кои вели дека го URL-то на кое Одам да одите. И ако јас кликнете таму, Voila, сега сум изработка на веб страници. И ние се доведе до почетната страница. Но забележите она што потенцијалните ова ни нуди. Безбедноста е многу во мода овие денови. Што ако јас наместо да каже нешто како ова, и јас наместо да одат во, да речеме, ајде да Гледаш, fakeCS50.net. Вчитајте ја оваа страница. Добро, така забележите тоа се уште изгледа како да сум ќе CS50, освен ако остроумен око ќе забележиш јас ќе одам да се лажни CS50. Јас сум Сомневајќи овој домен не е донесена. Добро, па тоа не е на располагање. Па тоа е добро. Никој всушност има овој домен. Но, да бидеме малку повеќе малициозен затоа што тоа е вид на глупави. Што ако ние го промените ова во PayPal. И што ако ние го нарекуваме овој, како, www.paypal.badguy.com, без оглед на домен е. Што веројатно постои. Па сега дозволете ми да ја превчитате страната. И тука имаме еден вид на фишинг напад, P-H-I-С-Н-И-Н-Г, кој е глупо зборот даден за напад што се обидува да риби информации, или подобро сепак, пари, од луѓето со трикови нив во обезбедување на информации кои што инаку не би можеле да се направи. Ова изгледа сосема legit, нели? Јас мора да имаат линк тука за да Paypal.com. Во фер, ако јас го полово со некои графика, можеме да го направите да изгледа повеќе како PayPal. Нели? Затоа што можев, како настрана, Јас би можеле да одат на Paypal.com. И ние сме само гледа како можам ги видиш сите од нивните HTML. Јас само би можеле да го копирате и го пресоздаде естетика на Paypal наместо да одат старата школа тука. Но забележи, се разбира, и тоа е малку мали, сепак, само во долниот лев агол, во како 10 точка фонт, дали да видиме што рачно сте всушност, се случува да се доведе до. И така, ако некогаш сте добиле спам велејќи оди напред, а ти си сметка е компромитиран. Ве молиме кликнете на овој линк и ги споделите со нас вашата лозинка за да можеме да се обезбеди сте вас, никогаш не го направи тоа. Овие работи треба да оди без велејќи. Но тоа е прекрасно забавна, и трагична, како секоја година се чини дека ова се случи да некои не-нулта број на луѓе. И тоа е убавината на phishing напади. Можете да испрати еден милион пораки. Па дури и ако 0.01% од луѓето, всушност, кликнете на Paypal и да ви даде вашиот лозинка, што е уште една не-нулта број на луѓе кои си само даваат ти своите пари. И испраќање на пораки, се разбира, е сосема лесна и, во суштина, бесплатни овие денови. Па скратам приказната, прекрасно прекрасна идеја, нели? Години, ова беше најрано веб, овозможувајќи им на мрежата на хиперлинкови меѓу ресурси. Но толку брзо што може да биде користи за болните цели. И-мејл, доволно е да се каже, овие дена, го HTML вградени внатре. Па, дозволете ми да само една друга работа. И ние ќе го одложат во голема мера да делот во Проблемот постави седум да ви овозможи да истражуваат деталите. Но дозволете ми да оди напред и да направи неколку работи овде. Одам да одат во и прогласи она што се нарекува div, или поделба, на страната. Дозволете ми да ја затвори таа div таг. И јас одам да се каже до тука на врвот на страната. А потоа под оваа, јас ќе одам да направите нешто како уште една div, затворите овој ознака, и направете го дното на страницата. И нека си го спаси. Па сега да се вратиме на мојот датотека. Многу underwhelming. Но она поделба се користи за, под капакот на моторот, е тоа е всушност убав структурен елемент. Тоа нема никаква естетика толку далеку што можеме да видиме, освен, очигледно, оставате работите на нови линии. Но известување, како настрана, само удирајќи Внесете не ја сече во HTML допаѓа се во C. Можеби мислите дека тоа е случува да се стави убав голем јаз помеѓу врвот и на дното од страницата. Но тоа е игнорирана. Бел простор е во суштина игнорира во веб страници освен на првата простор бар карактер, или пајтон се врати, што го погоди на тастатурата. Ако сакате повеќе линија паузи, можете мора да го наведете себе. Па јас ќе одам да направите неколку работи тука за да покаже што се случува. Одам да додадете атрибут кој постои и повторно, на начин што го учат она што атрибути постојат, она тагови постојат, навистина, е онлајн референци. HTML е вид на јазикот - тоа е не е програмски јазик. Тоа е маркап јазик - што по добра половина час, можеби, еден час со тоа, сигурно ќе сфати, повеќето најверојатно, основната идеја. И потоа пребарување на Google далеку е за сите можните тагови кои што може да биде поинтересувате И за на спецификации, што е сосема добредојде и ги охрабри тука. Па сега дозволете ми да оди напред и да направи вакво нешто. Background-color. И сега, јас ќе одам да направите нешто како црвена, точка-запирка. И можете да го направите ова во неколку различни начини. Јас сум само вид на пишување како супер експлицитно како е можно. Но излегува дека оваа вредност е тука она што се нарекува CSS, Cascading Style Листови, што е уште еден јазик заедно. CSS има никаква врска со отвори тагови и блиски тагови. Тоа има врска со својства. И својства се едноставно клучните вредност пара, која само значи некој збор, дебелото црево, а потоа некои други зборови. И ако имате повеќе деца, или само еден тука, може да се стави крај на тоа со точка и запирка, само за јасност. Но, тоа, исто така, ќе работат тука. Сега што е ова се случува да направам? Што веројатно може да се погоди. Дозволете ми да оди напред и повторно пробајте. И сега тоа е навистина доаѓаат заедно. Па врвот на мојата страница е црвена. Но она што е Клучот тука е дека, јас спомнав порано, дека div ви дава поделба на страната. И тоа е навистина она што го прави тоа. Тоа во суштина го дели страница во правоаголник што можете да потоа манипулира. И ова сфаќање на правоаголници е вид на релевантни во тоа, ако мислите на повеќето секој веб-сајт, има веројатно некаква структура на него. Повеќето од вас веројатно ретко се гледа Фејсбук почетната страница од пребарувачот ако сте логирани во секое време. Но на почетната страница на Фејсбук, има некој вид на div по должината на врвот. И тоа не може да биде едноставно како еден div, но има еден правоаголни регионот таму. Остатокот на страницата е како огромен div, како многу поголеми правоаголни регионот. Па скратам приказната, само со овие мали градежни блокови, на способност за модел нешта како правоаголници, дали широк или тесен, можете исто така да направи колони потенцијално, ви овозможува да нокаутирам страници, навистина, меѓутоа вие можете би сакал. Ние сме навистина само гребење на површината овде. Навистина, ако го направам еден другиот, дозволете ми да оди напред и да прават стил, позадина во боја, ние ќе направиме нешто како сина, во близина цитати. Ајде да ја превчитате ова. Па сега тоа е добивање уште погрда. Но сега јас вид на може да се покажат мојата P постави пет вештини, нели? Црвено. Тоа ме потсетува на RGB, црвена Зелена Сина тројки. Па, излегува во веб програмирање, или веб дизајн, што е ова, ние сме уште не се програмирани ништо по себе, можете да всушност имаат хексадецимален код. Така нешто, нешто нешто, нешто нешто. Така може да имаат шест хексадецимален знаци, или три, во некои случаи, и секоја од овие прашалници мора да биде хексадецимални цифри, ѓ нула преку. Ако сакам да имаат многу на црвено, и без зелена, и нема сини, она што е спротивно на нула кога се користи хексадецимален? Тоа е ѓ. Така што можам да направам FF, нула нула, нула нула, спаси ова, и сега доаѓаат овде долу. И јас не се всушност видите промена. Па цитат unquote "црвените" е очигледно синоним за сите црвени, без зелена, нема сино. Во меѓувреме, ајде да се намерно промени ова да биде нешто случаен, како ABCDF. Ајде да видиме што е тоа. Тоа е навистина убаво сино, всушност, бебе сина. Сите во право, па овие се само сега малку случаен комбинации на карактери. Па ние не ќе се заглави во тука. Но, повторно, ова зборува за прецизност што може да почнат да применуваат - дури и ако сте многу совладан од страна на естетиката. Всушност, ако навистина сакаат да бидат импресиониран, дозволете ми да оди напред и да се промени големината на фонтот, на пример. И ќе забележите дека запирка, која Потребно е таму. Големината на фонтот, можеме да бидеме само смешно тука, 96 поен. Спаси. Леле, тоа е голема големина на фонтот. Сите во право, па тоа е многу лесно. И всушност, ти си суштина гледање на првиот веб страница не сум направил години, кога јас прв пат научиле овие работи. Тоа е многу лесно да се направи многу грозен работи брзо. И ако сте запознаени со Wayback Машина на archive.org, можете може да се најдат сите мои грозен undergrad веб страници. Имаше Kermit жабата на предната страна. Отидов низ фаза каде Мислев тоа беше кул да се земе позадината на црвена завеса, кога научив како можете може плочка слики, повторно, и повторно, и повторно, да се пополни страница со голема натруфен црвена завеса. И тогаш, на врвот на ова, беше икона што ќе мораше да кликнете за да влезат во мојот дом страница, бидејќи тоа беше многу многу во мода. И тогаш мојата прва програма што некогаш сум го напишала не беше во PHP, но во јазик вика бисер, напиша книга за гости, кои е навистина кул работа што многу луѓе што се очекува да се има на почетната страница. Кога ќе стигнете до страницата, тие сакаат да да влезете во, и да каже кој сте, и зошто сте таму. Ова е многу 1990 стил веб дизајн. Но, овие денови, сигурно, ние сме доаѓаат многу подалеку. И ќе видите, во делот, па дури и во проблемот постави седум, од страна на проширува библиотеки овие денови, тоа е многу полесно да се направи поубава работи брзо. Навистина тука, ние сме само гребење по површината на она што можете да направите стилски. И всушност, веќе, дозволете ми да истакнам дека ова е веќе добивање грда, не само естетски, туку во смисла на стил на мојот код, или дизајн на мојот код. Јас во моментов comingled HTML, кои е зеленикаво отворен тагови таму, со CSS особини, кои е целосно legit. Ова е навистина каде што јазикот имаше своето потекло. Но во интерес на чист дизајн, многу како почнавме факторинг работи надвор од C датотеки во. ж датотеки, нека мене всушност практикува таков вид на принцип и почнете да правите овој наместо тоа. Дозволете ми да се стави стил таг до тука, што исто така постои во HTML, и дозволете ми да наведете следново. Дозволете ми да ја избришете оваа. Боја на позадината ќе биде црвено. Одам да го избришете овој целосно. Одам да се ослободи од стил припишуваат, а јас ќе одам да уникатно идентификуваат оваа div со еден збор - арбитрарно, туку разумно, цитат unquote "врвот". И проект е посебен атрибут, кои еднозначно ги дефинира одреден ХТМЛ елементот како што имаат тој проект. Ако јас сега сакаат да стилизирани тоа, овде горе во шефот на мојата страница, во внатрешноста на стил таг, забележи дека Што можам да направам хаш врвот. А потоа можам да се стави неколку кадрава загради, потсетува на C, а потоа нека мене ставете во таа стилизација. И дозволете ми да оди напред тука и да се предвиди каде ќе одам со ова. Дозволете ми исто така, создаде една за дното DIV. Дозволете ми да го имате овој грозен кодот од долу тука, го стави во тука, а јас ќе бидам малку повеќе анален сега и стилизиран тоа од само ставање работите на свој линија, завршувајќи со запирки. Дозволете ми да се ослободи од стил таг. Но, јас не сум се направи уште. Јас треба да направите една друга работа. Да, ид еднаква цитат unquote, "дното" или што ид Сакам да даде тој елемент. Сега, да се навратам овде. И ова е крволочен. Јас не може да се справи со 96 поен. Ајде да направиме 24 точка. Или можете да бидам попрецизен. Можете да го користите пиксели, PX, па дека навистина се пофини жито контрола над вашата страница. Како настрана, тоа не е нужно најдоброто нешто што ако корисниците, за пристапност причини, сакате да да биде во можност да се зголеми големини. Па сфатат дека постојат начини на вршење на работи кои не мора да значи тешко код сè. Сите во право, па тоа е поголем, 24 точка, од она што стандардно е. Но, сега тоа е малку почист. И дозволете ми да ја искористам оваа еден чекор понатаму. Исто како и на идејата за насловот датотеки, забележите ние сме еден чекор поблиску до тоа. Имам констатирано и надвор, но сепак остави, внатрешноста на мојата страница, оние CSS правила. Зошто јас можеби ќе сакате да ја искористам оваа еден чекор понатаму, го отстраните овој целосно, и го стави во посебна датотека? За да можам да го повторна употреба, нели? Ова е само вид на интуиција токму сега. Пред, јас тврдеше дека тоа е само добивање грди има стил атрибути внатрешноста на Divs себе. Но само вид на мисли дека преку. Како вашата страница добива подолго и подолго, ако сте ставање тука, и тука, и тука и тука, на сите овие различни бои, и фонтови, и други такви атрибути, вашата страница е многу брзо ќе стане неподнослив за вас. Ако некој доаѓа до вас и вели, ох, знаеш што? Јас навистина би сакал да се промени големината на фонтот со два дополнителни поени, можете можеби ќе мора да оди и да најде и да го замени огромен број на линии на код. Тоа е многу повеќе привлечна да се централизира сите такви естетика тука. Но, ако сакате да повторна употреба оние естетика во повеќе веб страници, сите поатрактивна за, на пример, се создаде датотека нарекува со оние содржини. И дозволете ми да го направите тоа. Спаси оваа датотека. Велам styles.css, арбитрарен, но конвенционалните. Јас ќе ја ставам во домот на Џон Харвард Directory Сега за едноставност. И она што можам да направам во мојата web-страница е да се добие се ослободи од стил таг целосно, и донекаде unintuitively, користете врска ознака, која не ви даде линк во хиперлинк, кликање смисла, но каде што велам врска, href е еднаква на styles.css. И на односот што овој елемент го со веб-страница е да служи како нејзините стил на состојба. Па како не знам тоа? Еден, ти само го прочитате упатството, или на Google околу, а вие погледне во различни ресурси. Мислам, дека навистина е начинот на кој можете да ги собереш техники, како таков, и, во согласност со оваа идеја на наставата себе нови јазици, повторно, ќе најдете дека има само ограничен број на работи на било кој јазик, кој, откако ќе се добие нив, ќе најдете дека тоа добива побрзо и побрзо да се напише. Навистина, учење на нови програмски јазик е толку многу побрзо отколку нова говорниот јазик, бидејќи овие нешта се многу помали и многу повеќе прецизно дефинирани. Но јас сум истакна малку на аномалија тука. Зошто сум го нагласува ова напред коса црта тука? Бидејќи морам да го затвори таг. Јас треба да се затвори на тагот. И ќе најдете безброј ресурси онлајн кои не се нужно блиску тагови. И реално, тоа не е строго неопходни за технички и постојат причини на реалноста, прелистувачи се само прилично толерантна на грешки во веб- страници, за подобро или за полошо, но најмногу полошо. Значи ова тука е само почиста начин на велејќи нешто глупаво како овој, каде што ако сакате да го отворите линкот таг но затворите, има навистина нема поим на содржина за линк таг. Тоа само значи вчита оваа поднесе и го ставив тука. Тоа е како остар вклучуваат во C. Можете отвораат и затвораат таг сите одеднаш во рамките на истиот таг. И има други примери за тоа. Ова не е начин да го направите ова, но на br таг, за линија паузи, ако јас навистина сакаше да го постигне она што бев обидувајќи се да пред со притискање Enter, ако Јас експлицитно се каже ред, линија пауза, прелом на ред, линија пауза, а повторно вчитајте ја оваа страница, сега ќе забележите дека дното на страницата е, навистина, многу подалеку надолу во на дното од страницата. Но дури и тоа може да се направи многу повеќе демонтирани со CSS, и со маргини, и со други како естетски техники. Значи за сега, takeaways се ова. Во HTML, имаме овие нешта наречени тагови. Во CSS, имаме овие работи наречен својства. Можеме да comingle овие два јазика, или со користење на стил атрибут, или стил таг, или најдобро сепак, факторинг тоа надвор целосно, како што го правиме во проблем во собата 7. Прашања, тогаш, за концептуални основите тука? ПУБЛИКАТА: Имам едно прашање. ЗВУЧНИК 1: Ох, извинете. ПУБЛИКАТА: Зошто не беше тоа обоени - ЗВУЧНИК 1: О, во други јазиче? Ова овде? ПУБЛИКАТА: Не, тоа е како - ЗВУЧНИК 1: О, тоа е затоа што Бев се невешт. Ја ставив на датотеката во погрешно место. Значи, ако јас всушност го стави тука, и јас chmod тоа, сите + R за styles.css, и сега вчитување на страница, сега ние добие стилизација назад. И бидејќи фонтови се различни, ние не ги гледаме толку многу бел простор. Ние наместо да се види она што е Стандардно е наместо. Добро прашање. Да? ПУБЛИКАТА: Зошто е линк ознака во внатрешноста на заглавието? ЗВУЧНИК 1: Зошто е линкови ознака во внатрешноста на насловот - Краткиот одговор, само затоа. Тоа е она што беше одлучено. Тоа е каде што врската тагови одат кога имате она што се вика надворешен стил лист. Други прашања? Добро, добро, ајде да го направите тоа. Имаме толку многу забавно пред нас денес. Тоа е само гребење на површината на CSS. Ајде да го направите тоа. Да го земеме пет минути пауза тука затоа што, на мојот е-мејл, ајде да висат во таму до 02:30-носталгичната денес. Но, ако имате да заминам, тоа е во ред. Но ние ќе се движам по пет минути пауза. И ние ќе научат малку нешто за PHP, MySQL, и многу повеќе. Сите во право, па ајде да се обидеме, сега, да си врзеш неколку од овие идеи заедно и да се направи, велат, нашата сопствена пребарувач. Јас забележав, а љубопитно, следниве. Кога сте во Google.com, ти си обично на URL-то како овој овде со ништо по dot com. Но, ако јас пребарување нешто глупаво како мачки, и притиснете Enter, ние ќе дојдеме - не глупаво, но знаеш. Добро, така забележите, на врвот на страницата, сега, URL-то е, се разбира, променета. И ова не е ништо нови на секој од нас. Ќе кликнете на линкот и работи се случува на интернет. Но она што е интересно овде е следниот. Има едночудо средена, но ајде ме фрлаат работи кои јас не се разбирам или не навистина изгледа релевантни. Дозволете ми да се ослободи од овој. Дозволете ми да се ослободи од овој. И дозволете ми само да се ослободи на сето ова. И сега се забележи дека мачките е во URL-то, проследено со Q, тогаш еднаков знак пред него. Така што се испоставува ова е начинот на Начинот на кој таа работи кога станува збор да влез и излез. Ние долго разговаравме за црни кутии, нели? Така да ако ова е функција имплементирана тука како црна кутија, тоа трае влез и произведува излез, добро, значи од кои ви овозможи влез на веб-сајт е од страна на начин, често, на своите адреси. Вие едноставно стави знак прашалник а потоа од клучниот еднаква вредност. А потоа можеби еден симболот, а потоа уште еден клучен еднаква вредност, тогаш можеби друг го симболот, клучните еднаква вредност. Тоа е како ќе помине во клучеви и вредности, пара на влезови. Значи, ако јас хит Внесете сега, она што е Интересно за Google е дека сите дека средена сум избришан не се појави да биде неопходно. Сè што ми треба да се испрати до Google е прашањето марка н еднаква на мачки да се добие се врати некои мачки. Па, импликација на тоа, тогаш, е ако јас се повлече до gedit, почнав правење на мојот сопствен пребарувач овде во датотека наречена seach0.html. И дозволете ми да оди напред и да го избришете уште една линија што може не беа треба да се види. И сега, дозволете ми да одам во мојот интернет пребарувач, па не на Google, и да одат во http://localhost. И дека се случува да се добие на начин. Па ние ќе мора да се каже збогум на дека сега за сега, се помести ова овде, ох, сега ние ќе треба да се се каже збогум на таа датотека. Секогаш кога имате фајл наречен index.html или index.php во директориумот, ако на веб серверот е конфигуриран на овој начин, она што ќе види, по дифолт, е содржината на таа датотека наместо листата на именик, како што сакав тука. Повеќе за ова во спецификации. Ти не се види тоа. Значи тоа е она што јас всушност сакаше. Но пред еден миг, имаше датотека во оваа папка наречена index.html и index.php. И така на веб сервер беше мене покажува оние датотеки. Наместо тоа, јас сакам овој директориум листата тука. Па ќе одам да одат во CSS и одат на search0. И тврдам дека ова е тоа ќе биде На почетокот на моето конкурентни пребарување моторот. И да го направите ова, ќе одам да одат во тука, во CSS, и се отвори со gedit, барај 0. Но, за жал, има не многу се случува тука. Сите што го направив беше користете наслов таг, кој се случува да се нарече H1, кои суштина значи голема и храбар, и тоа е тоа. Но средство со кое можеме да обезбеди влезови се преку овие нешта наречени форми. Па дозволете ми да оди напред и да се отвораат и затвораат, превентивно, форма таг таму. И дозволете ми да оди напред и да прават нешто како ова. Влез, тип еднаква на текст. И тогаш ајде да го затвори таг во рамките на голема заграда себе. Јас не треба да започне во полето за текст и да престане полето за текст. Тоа е само ќе да биде таму или не. А потоа под тоа, ајде да направиме вид на влез еднаква поднесе. Зачувај ова. И сега ајде да се направи брзо разумност провери. Ајде да ја превчитате. Добро, така што тоа не е лошо. Тоа не е стил на Google, но тоа е прилично блиску. Има полето за текст. Јас да напишете некои работи во, притиснете ентер, но ништо не се случува сеуште. И тоа е затоа што јас не имаш специфицирано акција за оваа форма, така да се каже. Значи, ако јас се врати во форма елемент, што се испоставува, и знам дека ова само од тоа да имаат прочитајте ја документацијата, дека форма таг зема атрибут наречен акција што е URL-то на веб страната на која што сакате да го испратите форма. Јас навистина не мислам дека имаме време да спроведување на целата задниот крај за пребарувач денес. Па ние сме само ќе кажам, еј, Одете на google.com / пребарувањето. И сега дозволете ми да затворам цитати. И дозволете ми да понатаму се каже дека метод на користење се случува да се нарече добие. Скратам приказната, има два начина, во и најмалку важно, дека можете да поднесете информации од прелистувачот на серверот. Една од нив е да се добие, и, за целите денес, тоа само значи во URL-то. Да го гледате токму на прашалници, на еднакво знаци, и ampersands дека видовме порано. Или има алтернатива нарекува пост. За сега, знам дека пост често се користи кога сакате да испраќате датотеки, како слики и така натаму, или кога сакате да достават информации за кредитна картичка, или лозинки, ништо дека тоа не навистина има смисла, концепциски, или безбедност мудар, да се заокружи во URL-то на Вашиот прелистувач, каде душкање родители, или цимерите, или некој со пристап на вашиот компјутер може да се види. Па ајде освен што тука. И јас треба да се направи една друга работа. Тоа не е доволно само да се велат ми даде текст полето. Морам да им даде на тоа поле е цениме име. Па да ми позајми избор на Google на имиња, q, и наведете дека вториот припишуваат јас навистина не се грижат за името на копчето Submit. Сите Јас се грижат за е поднесување на она што корисникот видови внатре И сега ова е вид на грдото. Тоа само вели поднесе. Излезе, и знам дека ова од документација, јас всушност може да се каже вредност е еднаква цитат unquote "cs50 seach, "блиски понуда. Тогаш ајде да ја превчитате повторно. Па јас удираш командната R, или Контрола-R на мојата тастатура за да ја превчитате. Сега имаме повеќе интересни пребарување моторот. Тоа сосема не изгледа како Google сепак, иако. Па ајде да одиме напред во овде и се направи малку ред. Добро, па сега имаме Google. Ние, всушност, речиси немаат Google. Па сега што ќе се случи? Одам да напишеш во нешто како мачки. И на прелистувачот се случува да го анализирам таа форма што сум дефинирани. И тоа се случува да се испрати на корисникот на тоа рачно. Значи ова време, за некои љубопитни причина, Добив повеќе информации за акциите отколку за вистински мачки. Но тоа е во ред затоа што ќе забележиме уште заврши тука, q е еднакво на мачките. Па скратам приказната, се чини прилично тривијални да се добие влез од корисникот. И да бидат фер, има гроздовете на други видови на полиња. Има провериш кутии, и малку меѓусебно ексклузивни радио копчиња, и паѓачкото мени, и многу повеќе. Но сите од нив се како релативно лесно имплементиран како овој полето за текст беше. И во крајна линија, ние само треба да бидете дека некој е слушање на другата крајот на линијата со цел да се добие дека информации обработени, некако, и да ни даде назад нашите мачки. Ајде да погледнеме малку повеќе вклучени пример. Дозволете ми да одат во директориумот мојот Vhost е, во локалниот хост, јавни и каде што стави изворниот код на денешниот ден. Сето ова ќе биде на курсот веб-сајт за вас да нескопосник со. А кога ќе отидам во froshims, дозволете ми да го отворите сочинуваат оваа датотека сега, froshim0.php. Ова ми е малку повеќе опширниот, па ние нема да ја напишам оваа од нула. Но само забележите сега неколку донекаде запознаени карактеристики. Еден, форма таг, различни акција. Тоа не е комплетната URL. Сега, тоа е очигледно за да фајл наречен register0.php затоа што, во еден миг, Одам да си ги учат малку нешто во врска со PHP, програмирање јазик, затоа што PHP може да се користи за да се спроведе она што Google спроведува како задниот крај на своите пребарувачи. Гугл, во реалноста, веројатно го користи некои Пајтон, некои C + +, и гроздовете на други јазици. Но ние секако би можеле да спроведат пребарување резултати користење на PHP ако сакаме. Но, за сега, ние ќе продолжиме да биде едноставно. И ова е всушност потсетува на еден на други првиот веб-сајтови јас направени пред неколку години. Назад во мојот ден, ти се регистрирани за интрамурален спортови како бруцош од пополнување на парче хартија, одење низ дворот, а тоа пуштање во на поштенско сандаче на Проктор во Wigglesworth, а тоа беше како можете регистриран. И така мојот проект кратко време по CS50, беше да се стави тоа, што го прави совршен смисла, со излез на интернет, што не беше како во мода тогаш како што е сега. Но, сите ние требаше да направи беше да се создаде, во суштина, форма HTML. И таа форма погледна приближно вака. Јас имав влез за Новак име. Имав уште еден наога за тоа дали или или не сакаа да биде капитен, што полот беше, и она што нивните dorm беше. А потоа јас хард кодирани во нештата како Apley суд, и Canaday, Бели влакна, и така натаму. Значи, повторно, нови ознаки. Не сте виделе овие пред, нови атрибути, но прилично достапни. Откако ќе видите пример, можете да вид на позајмуваат таа идеја и да се направи капка опаѓачкото мени, за повеќето ништо. Но она што е клучот е во тоа што секој од овие работи имаат имиња. И на дното на оваа форма, има копче Поднесениот чија етикета, или вредност, е да се регистрирате. Па ајде да одиме на оваа страница. Дозволете ми да се врати во директориумот. Дозволете ми да одат во froshims, и да одат во froshim0.php. Па тоа е страшна, да се биде фер. Па јас дефинитивно би можеле да стилизирам овој со некои CSS, би можел да направи некои графика, можеби додадете некои бои, и го прават овој поубава. Но функционално, би рекле дека ова е всушност прилично заврши. За жал, кога јас се пополни оваа надвор, Давид, Капетане, Машко, ние ќе изберат, да речеме Метјуз, регистар, сите што се случува е тоа. Но забележите неколку takeaways. Еден, она датотека врати оние резултати, очигледно? Па тоа е, всушност, register0.php. Значи фактот дека видовме дека акција вредност пред еден миг за register0, овој поткрепува дека ние навистина заврши во тој конкретен фајл. Сега ова е само грди текст. Но забележите дека овој текст е доаѓаат од локалниот хост, која е од апаратот. Мислам на апаратот сега како само веб сервер кој може да биде во Научниот центар. Тоа би можело да биде на вистински веб. Па тоа е јавно достапен. Толку јасно, има некој начин на полагање форма поле влезови на сервер така што тоа може да се направи нешто со нив. За жал, register0 е прилично глупаво. Сите тоа го прави е печатење на низа што личи ова. И тоа не е низа во смисла дека ние го знаеме. Излегува дека PHP, и многу јазици, имаат не само бројно индексирани низи чиј прв индекс е нула, а потоа еден, потоа две, а потоа точка, точка, точка, n минус 1. Ова е она што се нарекува асоцијативна низа. Асоцијативна низа е оној во кој можете да ги чувате клучните вредност парови каде клучот не е нужно број. Тоа всушност би можело да биде стринг, на збор. И така ова може да се спроведе, под капакот на моторот, што се испоставува, користење на податоци структура позната како? Мислев нешто драматично беше за да се случи - хаш табелата. Па хаш табелата, се потсетиме, оние од вас кој го сторил тоа за P сет 6, или дури и се потсетиме тоа, барем, дури и ако сте направиле обид, на хаш табелата, во нашата употреба, беше искористена за да само чување зборови. Но, навистина, сте биле чување клучеви и вредности. Ако спроведува хаш табелата за P постави 6 речник, клучевите беа самите зборови, како и вредностите биле ефективно точно или неточно. Да, тука, или имплицитно, Не, не е тука. Па, можеме да се генерализира дека идејата. И ние би можеле да користат многу слични податоци структура за да ја запази не стрингот себе сам во вашиот хаш табелата, но да претпоставиме дека во секоја една од вашите хаш табелата јазли. Па може дури да го направите ова во обид наместо само да има bool. Вие би можеле да имаат нешто друго. Што ако клучот не беше Максвел, за пример, но цитат unquote "името", или цитирам unquote "капетан". И во внатрешноста на вашиот C податочна структура, ќе се стави на вредност, а не само Булова, но од вредност како цитат unquote "Давид", или "М", или "Метјус", и така натаму. Па истите тие структури на податоци се користи очигледно постојат во други јазици. И јас би рекле тие се, всушност, многу, многу поедноставно да пристапите тука. Ајде да всушност ги разгледаме сега во некои такви синтакса. Одам да одат во директориумот PHP. И јас одам да се отвори подобро верзија на здраво-0 од порано. Забележете дека сите што го направив беше додадете некои коментари. За да можеме да се ослободи од таа забава. И оваа програма го прави навистина отпечатоци Здраво, бидејќи јас сум наведени помеѓу тагови кои сакам да се изврши овој код. Сега, ние ќе се види во еден момент зошто ова е корисно. Но, ајде да се отвори уште еден пример тука. Дозволете ми да оди напред и да се отвори каже, gedit на условите еден. Ова е начин назад во времето сега. Но пред неколку недели, мислам, во една недела или недела две, имавме пример се нарекува conditions1.c. И решив да го reimplement во PHP, само да се вид на се нагласи дека PHP, синтаксички, е речиси идентична да C. Ова не е огромен скок од минатата недела за ова. Забележите на врвот на оваа програма, која почнува, како и досега, со некои коментари, кои јас ќе се ослободи на како одвраќање. Забележете дека јас сум во PHP на владата во оваа датотека. Па овој код, ќе видиме, ќе се извршуваат. Забележите дека има readline, што е веројатно аналогни во PHP од getstring. Забележите тоа е малку поинаква. Ти всушност наведете брза со функција наречена читање линија, и тоа е она што корисникот го гледа. Значи, вие не треба да printf рачно. Но тоа не е голема работа. Одам да се сместат, во внатрешноста на $ n, се врати вредноста на ова, па без оглед на корисник видови во е нивната Инт. И тука е уште љубопитност. Што се испоставува, во PHP, секоја променлива само треба да се префикс со знак за долар. Тоа е малку досадни. Но се забележи она што јас не го направив во PHP. Она што недостасува од левата страна страна на еднаквите знаци? Не се споменуваат на тип. Значи ова е различно од C. За подобра или за полошо, PHP е лабаво отчукува јазик. Тоа не се бројки. Тоа не се стрингови. Тоа го прави да Booleans. И тоа не имаат неколку други типови на податоци. Но вие, програмер, обично не мора да се грижат за нив. Главата на ова е тоа што го прави тоа малку полесно да програма. Можете да замислите малку помалку. Недостатоци е тоа, исто така, ви се отвора потенцијалните грешки ако случајно сте ја лекување на голем број како стринг, на низа како број, потенцијално, но дури и тогаш, PHP, и многу јазици, се прилично толерантни. Тие ќе ги користат она што се нарекува имплицитна кастинг. И ако се обидете да го користите n во контекст на нумерички ситуација, тоа ќе конвертирате она што тука се случува да биде стринг, бидејќи ако корисникот видови нешто во, и ќе го добиете резултат на тоа, како и со readline, или да добијат низа, што се случува да се врати стринг. Но известување, неколку линии подоцна, јас провери ако n е поголема од нула. Така PHP се случува да имплицитно дадов својот "Стринг" 123, или што на корисникот видови во, во Инт. Значи во кратки, нешто едноставно работи многу повеќе интуитивно. Па ние сега почнуваат да се опуштите неколку од нешта што ние го направив во минатото. А многу на овој материјал е истото, иако. Уште имаат еднаква еднакви. Како настрана PHP, исто така е еднакво на еднаква еднакви, но повеќе за тоа, можеби, во иднина. Тоа беше. Печатна грешка, туку две еднаква знаци значи исто нешто како пред, за споредба. printf значи истото како порано. Обратна коса црта n значи исто нешто како порано. Па како можам да ја извршите оваа програма? Па, како и порано, ако го направам PHP, conditions1.php, и типот на голем број како 123. Тоа е позитивен број. Ако јас напишете 0, јас ги собереш 0. И ако сум тип во негативна 123, да се добие се врати негативен број, што е само да се каже, синтаксички, PHP е супер, супер слично. Значи, зошто е ова сега корисни во веб контекст? Добро, ајде да се вратиме на овој froshims пример, која изгледаше, повторно, како овој овде. И ајде да всушност се повлече до веб страница повторно, која изгледаше вака. Што да правиме со податоци кои е спонзор? Па, дозволете ми да се отвори понови верзија на ова. И ќе видите дека проблемот поставува спецификација ќе шета преку неколку од овие. Наместо да почнуваат со нула, ајде да погледнеме froshims3, која се занимава малку повеќе. Забележите прво, всушност, ајде да се отвори надомести она што 0 е, па ќе видите она што Регистрирај 0 е. Информации што Регистрирај 0 направив. Еден, имам коментари на врвот. Бришење на оние и да се фокусира само на ова. Поголемиот дел од содржината на register0.php се, очигледно, на кој јазик? Само сурови PHP. Па известување, оваа датотека не започнува со, во овој момент, отворен заградата, прашалник, PHP. PHP не ви овозможи да се мешаат PHP код со HTML тагови. Но јас го направив тоа тука во внатрешноста на страница овде. Сега, пак, можете само би го знаел тоа од ја погледна во упатството. print_r, што се испоставува, е print_recursive. _recursive И ова е само корисна утилитарна функција, кои едноставно отпечатоци од, рекурзивно, што и да го рака. Ако го предаде низа, тоа ќе печати низа. Ако го предаде број, тоа ќе се печати број. Го рака стринг, тоа ќе печати низа. Ако го предаде хаш табелата, тоа ќе печати од хаш табелата. Вие не треба да се напише сите на тој кодот себе. Сега се забележи дека јас сум влегуваат PHP на владата овде. Јас сум излегување PHP на владата овде. Значи, кога веб серверот го чита оваа датотека врвот до дното, лево кон десно, бидејќи тој завршува во име на датотека се нарекува. PHP, она што не е во внатрешноста на PHP тагови е само ќе биде плукаат надвор, како суровини HTML. Нема ништо страшно. Но штом на веб серверот известувања ова, тоа се случува да се каже, јас не треба плукаат, буквално, print_r на пост. Јас треба да се изврши следнава линија код. Па на последното прашање, тогаш, од оваа датотека, е, добро, она што е грижам е тоа? Земе се погоди. Што е $ _POST, веројатно? ПУБЛИКАТА: [нечујни] ЗВУЧНИК 1: Да, испратени податоци. Потсетиме, ајде да дојдете назад во време за само еден миг. froshim0, повторно, изгледаше вака. А супер мнозинство од ова е само HTML. Повторно, некои тагови не сте видел досега, или со кои веќе сте запознаени. Но, интересно нешто беше тоа. Оваа линија е она што навистина го поврзува на нашиот register0.php датотека. Јас сум поднесување преку методот пост. А тоа значи дека параметрите корисникот видови во не се случува да се заокружи каде. Тие нема да се појави во URL-то. Тие се уште се случува да бидат испратени од клиент, од прелистувачот, до сервер, но само преку некои други механизам кој ќе се откаже од нашите раце на за денес, но тоа не е во URL-то. Но информации односот сега со пост, кои, по конвенција, е мали букви тука. Но, ако јас отвори register0.php, Јас сум очигледно печатење ова. Па ова е вид на чуден именување на конвенцијата. Но она што е убаво во PHP е тоа што кога користење на PHP во веб контекст, а не на командната линија како што го направив пред еден миг, кога сте всушност го користат во веб- страница, во Vhost директориум како и ние, автоматски PHP ќе се пополни оваа работа, која е асоцијативна низа, така да се каже, хаш табелата, со сè на корисникот внесе внатре На кратко, $ _POST во сите настапи е глобалната променлива дека PHP само магично создава за вас кога користење на PHP во веб контекст. И го става во внатрешноста на сето тоа на Имињата на параметри во форма која беше доставен на оваа датотека и сите вредностите што корисникот внесе внатре Па тоа рацете да ви што на корисникот ја внеле во таа форма. Па пред, добивме навистина глупаво излез на само гледањето тоа затоа што сите што го направив беше рекурзивно печати ја оваа низа. Клучот е името, вредноста е Дејвид. Клучот е капетан. Вредноста е. И двојно стрелка и аголот заградата таму, ова е само произволни. Ова не е код. Ова е само начин на PHP на кои Ви прикажуваат што вредноста на некои клучни е. Но, сега дозволете ми предложи дека во froshIMs3, тоа е речиси идентична освен што го доставува до оваа податотека. И повторно, ние ќе се вид на само загледувам во ова, само за да видам некои синтаксата, но забележи она што оваа датотека прави тоа. Земете погоди само врз основа на линиите на код, што веројатно не изгледаат како Грчки, до одреден степен, очигледно прави. Оваа датотека е некако поврзана до пошта, е-маил. Значи она што е оваа програма прави? Во оваа верзија, ако јас да се всушност пополнете овој образец - и дозволете ми да одат на froshIMs3 не, froshIMs0 - форма изгледа исто. Давид, капетан, машки, студентски дом, Метјуз. Но, ако јас го достави овој, оваа датотека е ќе одат register3.php. И тврдам, од страна гледајќи во тоа е изворниот код, тоа се случува да некако вклучуваат е-мејл. Дозволете ми да оди напред и да ја отворите оваа во поголем прозорец, па ние може да се види повеќе демонтирани. Ние сме во Vhosts, локалната домаќин, јавноста, froshims. Одам да се отвори различни Програмата, исто така ние да видите повеќе одеднаш. Па сега тука, забележите неколку работи. На врвот на датотеката е отворен заградата, прашалник, PHP. Потоа, тука е еден куп на коментари, кој можеме да го игнорираме, е неинтересен за сега. Сега има ова. Излегува PHP има многу на код наречен бараат. Тоа е многу слични во духот со-C вклучуваат, хаш вклучуваат, кои во суштина ја зграпчува содржината на некои други датотека и само да ги plops тука, за да можете да ги користите. Во овој случај, апаратот има, пре-инсталиран, библиотека, слободен и софтвер со отворен код библиотека наречена PHP мејлер дека секој може да се преземете од интернет. Ние само го направив тоа за вас. А тоа значи јас сега имаат e-mail функционалноста на располагање. Сега, забележите неколку работи. Одам да се провери на форма на поднесување. Излегува PHP, една, има фантастичен поени за не оператор, исто како и C. Но PHP, исто така има функција наречен празна. Празни само враќа true ако вредноста на нешто што го рака во загради е празна, како корисникот не напишеш ништо внатре Значи ова е велејќи дека, и ќе забележите дека синтакса, многу потсетува на Ц, ако Името клуч, па името поле во формата, кој беше поднесен преку пошта, со на корисникот, не е да го испразните, и нивните полот не е празно во форма како добро, а нивните dorm не е празен - но забележиш јас не се грижат за Капетане, тогаш што ќе правиме? Одам да се изврши оваа линија код. И можете да мислам на овој вид на како Примерок, но тоа е малку познавач од тоа. Но сега за сега ова ми дава посебен struct од типот PHP писмото. Но ги игнорираат клучни зборови нови настани за денес. Сега ќе одам да се јавите на функција наречена IsSMTP, кој вели, користете SMTP. Ова е пристаништето 25, исто како и видео минатата недела, кога нешто беше фрлање пораки во заштитниот ѕид. Порта 25 е SMTP. SMTP значи употреба на сервер за пошта. Кој, можеме да го користиме на Харвард SMTP.fas.harvard.edu. Ние може да поставите од адреса да се биде Џон Харвард. Ако јас движете надолу понатаму, јас може да се постави на примателот адреса, само произволно, за да биде Џон Харвард, како и. Па тој се случува да се себеси испраќање. Сега можам да го поставите тема да се биде регистрација. И јас може да се постави на телото на е-мејл како што следи. Оваа линија изгледа малку повеќе криптичната, но тоа е само затоа што има многу на информациите во него. Еден, таму е точка оператор. Некој мора да знаете веќе што операторот точка го прави тоа. Тоа е конкатенација. Значи, ако сакате да ги преземат низа во PHP, и тоа додаваат, или ставете пред него, да друга низа во PHP, Фала му на Бога што не мора да се користат strcopy и Примерок, и сето тоа веќе. Ако сакате да concatenate две жици, кој се грижи за меморија. Нека PHP бројка што за вас. Што PHP ќе го направите со операторот точка тука е само направи голема реченица од на оваа линија, оваа линија, оваа линија, оваа линија. И сега известувањето, тоа се случува да се вклучите во вредности. Така го внесувачот на Е дека Џон Харвард се случува да добиваат е буквално случува да се каже име, дебелото црево, нешто, а, тогаш ние затвори стринг и concatenate на без оглед на корисникот внеле во, а потоа нова линија. Потоа, на следната линија на Џон Харвард е-маил, тоа се случува да се каже Капетан, На или Ништо. Тоа се случува да се каже пол, машки или женски. Dorm ќе биде Метјуз во мојот случај. А потоа забележите запознаени запирка на самиот крај. А потоа, тука долу, информации, донекаде криптичната уште, но повторно, по шема, која ќе стане повеќе запознаени по П постави 7, ако испраќање на пошта се враќа false, тогаш оди напред и да умре. Па PHP има функција наречена умре, кои, буквално, само убива веб-страница и само отпечатоци од она што ќе го кажам - неговите умира зборови, така да се каже. И дека, во овој случај, тоа ќе печати од она што на грешка инфо е за што се случи да тргне наопаку. Па скратам приказната тука, она што го имаме е пример каде што кога корисникот доставува форма, froshim0, froshims3.php, таа оди на register3.php. Но register3.php потоа продолжува да се изврши сите овие линии. Значи има неколку преземе Aways тука. Едно, тоа е очигледно прилично лесно, програмски, да испраќаат електронски пораки, што е добро. Кога корисниците се регистрирате за вашиот сајт, во овој случај, кога тие се регистрирате за вашиот спорт, можете да е-пошта на Новак Проктор, или Џон Харвард, во овој случај. Но, тоа, исто така, значи дека може да го направи она што? Испрати e-mail од никого за никого. И ова е многу точно. Ова не е толку лесно да се направи, ако сте навикнати да користите Gmail. Но, ако некогаш сте се користат Eudora или Изглед, прилично многу може да раскаже mail сервер дека сте некој што го сакате. И ова е местото каде што треба да се стави на дека капа и да каже, не го сторат тоа. Но, ова е доказ за тоа колку лесно е да се изврши фишинг напади, и испрати анонимни пораки, и спам, поопшто. И тоа навистина се сведува на фактот дека сите што ви треба е некои програмски пристап. Како настрана, моите најблиски средба со реклама одбор, моето Новак година, беше кога дознав овој кул трик што, Леле, можете да испрати пораки од никого. И така имавме некои глупи аргумент, буквално, во Метјуз, меѓу моите Проктор група. Јас дури и не се сеќавам тоа што ова прашање беше. Но јас сакав да се обиде да се стави крај на овој глупав дебата. Па решив јас само ќе испрати е-маил на мојот Проктор група, преправајќи се дека на другиот, со чие мислење јас не се согласи, и имаат него се помирува со без оглед на моето мислење беше во ова особено дебата. И така јас фалсификувани оваа е-мејл со користење на техника слични во духот со ова. Но тоа е всушност полесно во тоа време. Притиснете испрати. Тој не беше задоволен, ниту пак биле реклама одбор. И јас бев многу брзо фатени во рамките на секунди, бидејќи, како што знаете, јас се регистрирате моите пораки на одреден начин. И иако јас го направи тоа рачно, во голем дел, 15 години подоцна, бидејќи јас бев трауматизирани од тоа. Јас немам еден и ист потпис на мојот е-мејл сега. Но, во 1995 година, јас само имаше SIG, потпис во мојот мејл. Значи имаше оваа белешка велејќи, Почитувани Проктор група, јас покорност мое мислење и се согласувам со Дејвид, потпишан така и така, нова линија, нова линија, DJM. Па не го правам тоа или, воопшто, се Предноста на оваа техника. Но кога правење на веб, како за Вашиот финалниот проект, кога прави веб-страница за нешто претприемачки, ова е како, прагматично, можете да потпора други услуги на интернет како пошта, а потоа всушност испрати нешта користење на кодот. Па како можеме да ја подобриме на ова? Па, прво нека земе брз турнеја на некои од работите што ќе видите, а потоа да погледнам во неколку примери. Значи еден, да ги разубеди, бидејќи ние сме летање преку PHP. И знам, во некој момент, ќе треба всушност да почнете да пишувате ова ако веќе не сте. Сфатат дека, еден, главниот е вид на надвор од прозорецот со PHP. Ако сакате да се напише код кој добива извршена, само на проектот пишување на тоа во датотека се нарекува. PHP толку долго колку што имате отворено заградата прашалник PHP таг. Но забележуваме овие се услови во PHP. Забележите, ова е иста слајд имавме во една недела кога имавме услови во C. Условите во PHP се структурно и синтаксички исти. Единствената вистинска разлика е ако имаш променливи кои се вклучени, ќе имаат оние долар знаци. Во меѓувреме, Булова изрази изгледа само како оваа за или-ИНГ или и-ИНГ заедно. Прекинувачи изгледа иста. Што е убаво во PHP, додека во Ц, прекинувачи треба да бидат случаи на примитивците како ints или карактери, во PHP вашиот случај изјавите всушност може да биде на цела стрингови, која е всушност вид на убаво. Ви заштедува некое време. Не можеше да го стори тоа во C. Тука е за телефонска линија во PHP. Тоа е идентична. Може да има некои долар знаци за променливи. Вие не треба да се спомене дека нешто е int. Можете само да го прогласи со знакот за долар и името на променливата. Но за телефонска линија е иста. А додека јамка е иста. А направите додека јамка е иста. Ова е малку различен. Па со PHP, со низа, може да статички прогласи низа, како во C, но вие го користите квадратни загради. Во C, ќе се користи големите загради, ако дури и знаеше тоа. Но ова е всушност многу честа појава во PHP да се изјаснат за низа, во овој случај, на броеви, и повик на променлива броеви. Променливи самите да изгледа вака. Тука е стринг, цитирам unquote "здраво свет. "Можеби ќе имате коса црта n. Јас едноставно не го направи во овој случај. Сега ова е интересна конструкција. Ц не ја имаат оваа. Но, ова е супер корисни. И ќе видите ова во P сет 7 спецификации - задолжително за секој конструкција. Ако сакате да ја повторам над сите на елементи низа, вие не мора да се справи со $ i и $ n, и + +, и сето тоа. Вие буквално може да се каже, во PHP, ова - за секој број како број, па Јас сум претпоставувајќи дека $ броеви е низа од броеви. И кога велам за секој броеви како број, ова ќе автоматски, како што мојот јамка извршува, надградба, на секоја итерација, вредноста внатрешноста на знакот за долар број - повторно, и повторно, и повторно одење за мене во текот на овој низа. Па тоа само ни заштедува код. Без запирки, без + + е, не ми е тоа, нема на n, тоа е само убаво. Но, PHP, исто така, ја има оваа. И ова е супер моќен. И ќе ја користите оваа, рацете на, во P постави 7. И асоцијативна низа е исто така прогласи со квадратни загради. Но коментар на синтакса сега. Тоа е потсетува на она што го видовме со print_r пред еден миг. Колку клучеви, како малку здрав разум чек, не оваа низа се чини дека имаат. Така што има две. И јас ова го нарекуваат низа. Но, ако тоа им помага, може да се мисли на тоа како хаш табелата, или како асоцијативна низа. Но, тоа е само поинаков тип на низа. И повторно, различни јазици имаат овие. Ќе видиме нешто слично во JavaScript, како и. Има две копчиња. Една од нив е цитат unquote "симбол", еден е цитирам unquote "цена". И тие клучеви секој од нив има вредност. Во овој случај вредност симбол е полн пансион, за Вредност Фејсбук, и цената е 49, 26, кој беше акциите на Фејсбук цена како на ова утро. Значи она што е корисно за асоцијативна низа. Јас би можеле да имаат бројно индексирани низа со само едноставна квадратни загради. И јас би можеле да имаат знакот за долар Цитат еднаква токму тоа. Дозволете ми да всушност го прават тоа. Претпоставувам дека наместо само прогласи оваа низа како тоа. Тоа е совршено валидни, синтаксички. Тоа не губи секоја информација, сама за себе. Јас се уште се види дека симболот е fb, и дека цената е 49, 26. Па зошто се асоцијативни низи привлечни? Публика: Вие не треба да се запамети каде што ќе се стави нешта. ЗВУЧНИК 1: Точно, вие не мора да се сети каде ќе се стави нешта. Вие не треба да се произволно се сеќавам дека симболот на акцијата е во заградата нула, и цените на акциите е во заградата еден, што е особено опасно ако се променат работите, на крајот. Тоа е многу поубаво да се дружат она што ќе го наречеме метаподатоци со вашиот вистински податоци. Јас би рекол дека она што ние навистина се грижат за тука е fb и 49, 26. Симболот и цената е метаподатоци кој го опишува податоците што всушност се грижи за. Но, ова е само толку полесно да пристапите. Сега, како настрана она што е цената што ја плати? Ние сме биле прави овој во CS50 за неколку недели. Оваа функција мора да дојде во некоја цена. Меморија. Па вие не сте само чување на 32-битна цел број, на пример. Сте чување симбол / 0, веројатно. Па ти си со користење на повеќе меморија. И она што е на перформансите на бараат нешто во асоцијативна низа, веројатно? Тоа е веројатно побавно. Случаен пристап е убаво, особено кога можете да направите бинарна пребарување. Но ако сте всушност сега не гледа за броеви, туку и за стрингови, овој навистина се спроведува под качулка, веројатно како хаш табелата, каде што го користите или хаш табелата со посебен врзувањето. Или го користите, се обиде да всушност чување на вредности. Па можеби и можете да направите постојана време, но се уште треба да се погледне во S-Y-М-Б-О-Л, потенцијално, наместо на само 32 битови да се погледне нешто. Значи, повторно, истите тие идеи доаѓаат се врати да се повтори во овој контекст. Но, повторно, PHP, сега има некои супер глобални тоа, што се испоставува, се асоцијативни низи. Видовме еден момент пред, $ _POST. И дека супер глобалната има клучеви и вредности. Поточно, клучеви редат со што? Каде се клучевите во $ _POST доаѓаат од? Само да повториме? ПУБЛИКАТА: Име. ЗВУЧНИК 1: Име, каде? ПУБЛИКАТА: [нечујни] ЗВУЧНИК 1: Име е атрибут. Па каде, каде пак тие оригинално доаѓаат од? Форма. Значи, ако една HTML страница има форма таг, внатре, од кои некои влезови, како проверете кутии, текст кутии, паѓачкото менија, од кои секоја има име, оние имиња завршуваат како клучеви во $ _POST, и, искрено, за таа материја, $ _GET. Ако метод е да се добие, истата идеја. Тоа е само во различен супер глобален. И вредностите, се разбира, доаѓаат од без оглед на корисникот внесе во во неговата или нејзиниот пребарувач. Но, има уште неколку други. Има куки, кои ќе се врати на крајот. Но тие се работи кои знаете веб користи за некои добро или зло. Но ние ќе се вратам на тоа. Сервер и траење на сесијата, и оние две имаат некои посебни алатка. Но, ајде да ги разгледаме во тоа. Дозволете ми да оди напред и да се отворат пример наречен mvc0.php Значи MVC се залага за следново. И ние се воведе ова порано отколку што е типичен, навистина, да ви дизајнирање Проблемот сет 7, а исто така конечниот проекти, во вид на индустрија стандарден начин, и чист начин. Тоа е добар дизајн. Па ти си за да се види, и ќе искуство, во P сет 7, парадигма, сортирање на програмскиот начин на размислување, што изгледа малку нешто како ова. М за модел, Ц за контролор, V за преглед. Скратам приказната, MVC е само вид на методологија, начин на правење веб-сајтови, особено, при што ќе ги стави сите на вашиот, глупава фраза - бизнис логика - сите вашата интелектуална сопственост во она што се нарекува контролер, датотека како index.php, или ние ќе видиме, quote.php, или buy.php. Во контекст на проблемот сет 7, Вашиот модели обично ги содржат Вашите податоци, ништо во врска со базата на податоци, како што ќе на крајот да се види, и вашите ставови содржи естетиката на вашиот сајт, HTML, CSS. Па ние веќе го виде тоа во C малку малку со користење на. ж датотеки. Ние навистина го видов пред еден миг со CSS, од страна на факторинг стилизација CSS работи надвор од нашата HTML. Па MVC е навистина само за цртање линии во песок и велејќи, на интересни програмски код за вашиот веб-страница припаѓа во она што ние ќе викнам контролорот. Работи поврзани со база на податоци обично завршува во модел. Но ќе се види, во проблем сет 7, се спојат Ц и К, за да ја задржиш едноставен. Но гледање е местото каде што сите ваши HTML и естетика обично одат. Па што значи ова во реални услови? Па, дозволете ми да одат во нашите MVC директориум како што следува. И ќе видите повеќе од овие турнеи низ во спецификации. Па во mvc0, тврдам дека ова е, како, верзија 0 на веб-сајтови CS50 е. Сите ние треба е некои HTML, како и голема H1 таг, очигледно. А потоа и нумерирани листа. Јас никогаш не сум видел нумерирани листа пред тоа, но нема ништо страшно. Ајде брзо да се погледне на изворниот код. Излегува неподреден список со куршуми е отворена заграда ул со еден или повеќе листата на предмети, Ли. Па известување тука е сидро таг. Видовме дека пред еден миг. Значи ова е како јас спроведува оваа страница. Јас имам врски две, две листата на предмети, еден UL за неподреден список, и на крајот резултат на тоа, естетски, дали е ова многу прилично веб-сајт, верзија 0 овде. Но она што е интересно сега е како оваа се спроведува под хауба. Дозволете ми да одат во gedit и се отвори оваа Уште првиот пример да наслика слика. А ние ќе се погледне во она што е недостатоци, потенцијално, во тука. Сега, ако одам во локалниот компјутер, јавни, MVC, забележите неколку датотеки. Одам да се јавите на овие, за момент, сите контролори. Но тоа е малку на злоупотреба, бидејќи ќе видите се што е измешани внатрешноста на нив. И дозволете ми да оди во внатрешноста на index.php. И можеме да видиме, буквално, истата HTML. Па дури иако оваа датотека завршува во . PHP, тоа не значи дека треба да имате било какви PHP код. Тоа само може да биде суров HTML, иако тоа е вид на глупо. Но информации нема отворени заградата PHP таг, освен ова, што, искрено, е само таму за да служат како коментар. Но тоа не е функционално дури и тоа интересно. Но забележуваат тоа. Она што е интересно сега е што промени на оваа страница. Дозволете ми да кликнете на предавања. И ќе забележите дека URL е за да се промени. Сега јас сум на lectures.php. Дозволете ми да кликнете на нула. Сега јас сум на week0.php И сега ајде мене се отвори овие датотеки во избраната. Не само индекс, но ајде мене се отвори предавања. И дозволете ми да се ослободи од коментарите да се фокусираат на овој дел само. И сега дозволете ми да отвори само еден повеќе, week0.php, фрлаат на коментарите, само за да се исчисти ова. И сега забележиме следниве. Размислување навистина вид на внимателно за дизајн, и ајде да се направи тоа линија до истиот, што би можело да се направи подобро тука, мислиш? Како ми направи една недела? Како за овој. Значи ова е како јас направив една недела. Отидов до датотеката, Нова, paste, Зачувај, week1.php, а потоа отидов од тука. И јас се промени еден - Што беше ова, еден до петок. Ја променив нули за еден. Ја променив тоа да еден. Добро, па сега гледам на мојата датотеки. Она што би можело да се направи и поинаку? Каде е можност, можеби? Значи има можност да се започне факторинг овој материјал надвор. Дозволете ми да се отвори, како спојлер, за она што ќе видите во P сет 7. Ако јас се отвори, сега, index.php во верзија пет од тоа, изгледа начин повеќе криптичната, очигледно. Но, ова, сега, е она што јас ќе се јавам на контролер кој е контролирање на Логиката на мојата страница. И можете вид на може да се реконструираат, интуитивно, можеби, тоа што се случува. На првата линија, тоа е малку криптичната. Но забележиш јас сум се бара, како и со остри вклучуваат, фајл наречен helpers.php. И тогаш јас го повикувам, очигледно, на функција, наречен малтерот, минувајќи во два аргументи. Една од нив е цитат unquote, заглавието. А другиот е, каков вид на тип на податок е тоа, врз основа на на нашата синтакса порано? Тоа е регистрирано низа. Поточно, тоа е поминува во насловот со некои метаподатоци што потсетува мене она што е и неговата вредност. Тогаш гледам хард кодирани ул, па некои суровини и HTML. Но тогаш јас сум назад во PHP на владата повикувајќи функција малтерот. Па дури и ако никогаш не сум се користи HTML или PHP пред, и иако ова изгледа scarier, зошто е ова веројатно подобар дизајн? Што е подобро за тоа, врз основа на заклучок? ПУБЛИКАТА: [нечујни] ЗВУЧНИК 1: Помалку излишни во таа нема повеќе HTML таг, не повеќе глави таг, не повеќе телото таг во секој проклет датотека. Наместо тоа, јас сум констатирано и надвор од заедништво и се претпоставува дека ги стави во датотека некако поврзани на заглавието. И истото за тесна тело таг, во близина HTML таг. Тоа е веројатно, тука долу во внатрешноста на подножјето некаде. И ќе видите, во проблем сет 7, малку турнеја низ ова. Значи она што лежи напред? Една работа што не ја имаат способноста уште за е всушност да се сместат податоци. И уште па што ќе почнете да ја видите Среда, на пример, е дека вашата стар пријател Excel, или броеви, Ви овозможува да ги чувате многу податоци во редови и колони. Излегува можете да го направите во она што е нарекува база на податоци, програмски. манична И што излезе, после тоа, ние ќе бидеме во можност да ги чувате работите како ова, кој ќе ја видите повторно во P сет 7, целиот куп на кориснички имиња и лозинки, на последната на која се всушност шифрирана, многу како што го беа во хакер издание П сет 2 е. И на крајот, ќе се спроведе ова, свој Etrade-како веб-сајт кој спроведува колективно CS50 финансии. И на крај, бидејќи вие останаа тука толку доцна денес, ако се врати во овој дел на кампусот, во 04:00 денес, ние ќе ви даде не е само совет, на SCES Советување саем, во 16:00 во Максвел-до Дворкин, ние ќе ви даде некои Americone сон, цреша Гарсија, Чоколадо празни епови пусти, Чоколадо Чип куки тесто, и, кога ќе Google Буци мајмун, ќе го добиете ова. Па сите што чека во 4:00 Премиерот во Максвел-Дворкин. Те гледам во средата, како и. ЗВУЧНИК 2: На следното CS50, RJ спие внатре RJ: Мојот дел! Ха! Ох,