Виступаючий 1: Всі, прямо з поверненням. Це CS50. А це на початку тижня дев'ять. І це початок інших Ваш час у CS50, в якому ми Перехід ось, нарешті, на веб- аспект курсу, де ви будете виявите, що багато з основних принципів, які ми експортуємо протягом тижня ще повернутися, щоб відвідати, або переслідувати, ми. Але тепер, ви виявите, що це порядок легше виконання певних завдань і вирішити деякі проблеми - та так, що навіть якщо ви думали, певних наборів проблеми були цікаві в їх власний шлях, я думаю, що ви знайдете встановлено, що р 7, стор встановлено 8, а потім, У кінцевому рахунку, остаточний проект буде Тим більше приємно, тому що ви знайти, що ми починаємо приймати як належне Зараз такі речі, як управління пам'яттю і покажчики і що відбувається на під капотом. І знову ж, тематичні, протягом усього семестрі було це нашарування і прошарків. І тепер ми начебто до Тут, стоячи на плечі тижня минулого. 

Тепер згадаємо з минулого разу, що ми говорили про те, як інтернет працював. І це був, можливо, спрощення, але пам'ятайте, що кожен комп'ютер у світі має IP рішення, хоча це трохи спрощенням ще. І ці адреси використовуються для однозначної ідентифікації комп'ютера таким чином, щоб при відправленні інформації, або пакети, якщо можна так висловитися, вони можуть мати походження адреса і адреса призначення. І ті ж самі адреси IP може бути використаний як на благо, так і для зла, щоб відстежувати вас, наприклад. Насправді, кожен з вас з ноутбуком відкрити зараз, або в вашому телефоні кишеню, має IP-адресу на мережу Гарварду. І це ще не все, що важко корелюють, що, хто і де ви в ці дні. Але про це, можливо, в майбутньому. 

Тепер я думав, що я повернути частину спогади про [? підвищення?] і дати вам Ще один ролик з шоу, яке ви могли б знайти знайомих. Якби ми могли приглушити світло всього за кілька секунд. Показати Numb3rs. 

Доповідач 2: Це 32-розрядна IPP4 адресою. 

Виступаючий 3: IPP, як і в інтернеті? 

Доповідач 2: приватної мережі. Для приватних мереж Амита автора. Вона так дивно. 

Виступаючий 3: Давай, Чарлі. 

Доповідач 2: Це. IP адреса дзеркала. Вона дозволяючи нам дивитися те, що вона робить в реальному часі. 

Виступаючий 1: Отже, кілька речей, так з цією картиною. Таким чином, один і цей один є прийнятним, це насправді не правильний адресу IP. Дійсний адреса IP повинен бути числами форми w.x.y.z, де кожен з ці листи від 0 до 255. Але це нормально, тому що так само, як фільми, де вони підроблені номери телефонів, вони підроблені IP адрес. Ви насправді не вдарив реальних серверів. 

Але зауважте, це браузер. І браузери не почати виведення комп'ютерний код, як це. І якщо ми подивимося трохи глибше, зверніть увагу що мова, яку вони бачать на екрані мову, званий Objective C, яка є мовою в яких iPhone додатки написані, Особливо ті, за участю крейда, як ви можете бачити з тут вихідний код. 

Добре, я думав, що це було забавно. Так що цей фрагмент коду має абсолютно нічого спільного з тим, що ця конкретному епізоді був о. Так що жарти на кшталт на людей приймаючи для цього само собою зрозуміле. Але це не все, що важко отримати ці технічні подробиці прямо. І я хотів би закликати вас. А насправді, 50 цілком може зіпсувати Багато ТВ-шоу і фільми або ви тому що ви знайдете, що це просто неможливо, що вони робити на екрані. Але насправді, це код, який ви могли б бачити його в iPhone додатку або Mac OS додатки. Вона не має нічого на всіх спільного з безпекою. Тож слідкуйте за новими такі кумедні речі на зразок цього. 

Але сьогодні ми починаємо занурюватися в дійсно глибоко, щоб цілий ряд мов. Дійсно, однією з всеосяжних винос з цієї частини звичайно, не навчитися програмувати У PHP не вчитися SQL як такої, не дізнатися JavaScript як такого, а швидше навчити себе, як вчити себе нові мови, тому що, дійсно, ніж приступити до прийняття зараз підготовки коліс від так, що після кінця курсу, ви не очікуєте, 20 Сторінка специфікації розповісти вам, як реалізувати деякі програми. У вас досить інгредієнтів у вашій розуму, і достатньо інструментів у вашому інструмент комплект, з яким, щоб почати будівництво вирішення проблем, що представляють інтерес для Ви для деякої групи студентів, для деяких Дослідницький проект, або дійсно нічого представляти інтерес для Вас. 

Так що в цьому напрямку, згадаємо, що це було картина, яку ми звернули її востаннє. І це два комп'ютера, і клієнт Sever, говорити один з одним. І протокол, мову, так говорити, що ці два комп'ютери відбуватися , Говорив називається HTTP. І це тільки протокол, використовуваний комп'ютерів для передачі інформації через World Wide Web. Інтернет, звичайно, є одним із сервісів , Який працює на верхній частині так звані Інтернет. Що іншу службу доступні на верхній частині Інтернету в ці дні? Деякі інші протокол або - що це таке? 

АУДИТОРІЯ: FTP. 

Виступаючий 1: FTP. Так протокол передачі файлів це зовсім інше. Більшість з вас, ймовірно, не використовував його. Але більшість з вас, ймовірно, використовували речі, як Gchat або миттєвого повідомленнями в більш загальному звичайно, електронна пошта. І ті теж є послуги, які працюють на верхній частині інтернет, тому що, по крайней Зрештою, сам Інтернет насправді просто отримати дані з точки А в точки В. І він використовує ряд Частинки себе, один з них або два з них найбільш зазвичай називають TCP / IP який повинен сказати, що на одному комп'ютері Інтернет дійсно може робити різні речі, електронну пошту, та Інтернет, і так далі. Google робить багато чого з цього. Так як же ці послуги однозначно визначені, ми сказали, на комп'ютері , Що може насправді робить кілька речей? 

Номер порту. І це тільки довільні людини 80 конвенцій, як це веб, 443 зашифрованою мережі, 25 є електронна пошта. І є пучки інші. І ця цифра постійно просто включені в ці пакети інформації, ці віртуальна конверті, що насправді містив запиту або відповіді. 

Так що, коли ви повернетеся відповіді від Інтернет, звичайно, ви не бачите будь-які Номери б то не було з точки зору код стану відповіді. Ви фактично не бачите внутрішні роботи пакетів, які повертаються. Але 200 дійсно означає OK. А це значить, все добре. Можливо, ви бачили купу цих. Що, ймовірно, найбільш поширений Ви бачили в Інтернеті? 

404. Це просто означає, файл не знайдений. Це означає, що хтось облажався. Ви зробили, друкарських помилок URL, або хтось інший не робив, даючи вам Неправильний URL, або вони видалили файлів і URL і раніше використовуються людьми. Таким чином, будь-яку кількість причин може пояснити чому файл не знайдений. І ви побачите, в найближчі тижні, ці інші коди помилок, і Ви будете скористатися деякими з них. Найгірше 500. Якщо ви отримуєте помилку 500 в код, який ви написано, думаю про це як свого роду аналог сегментами несправностей у світі веб-програмування. Це не так страшно. Але це всього лише означає, що десь, Ти облажався. Так що з нетерпінням чекаємо тих. 

Але давайте подивимося, якщо ми можемо побачити їх у контексті. Пустіть мене до браузеру тут і виконайте такі дії. Так що це Chrome, який, виявляється, бути встановлений у пристрої. Але більше всіх браузерах днями деяку еквівалентну функціональність. Я піду меню в Chrome, і перейдіть в меню Сервіс, а я піду для розробника. І ви побачите, що ця маленька панель відкривається в нижній частині вікна. Ще одна клавіша, чесно кажучи, що я Зазвичай сам використовую це натиснути правою кнопкою миші або управління миші в будь-якому місці веб- сторінки і просто піти на перевірку елементів. І це не тільки відкриє це має для вас. Вона також буде відкритий, зокрема, Елементи частини на лівій стороні. 

Так що ми, звичайно, бачимо Google. Вони змінили свій логотип сьогодні. Але якщо я Прокрутіть вниз до зауважте, що під елементи, ви бачите те, що називається HTML, розмітки гіпертексту Мова і це мова що це і всі веб-сторінки, дійсно, написані дюйма Але це насправді відформатована для нас набагато більше читаемо ніж це зазвичай і буває. Справді, якщо я зменшити масштаб, і я замість Натисніть правою кнопкою миші або управління виберіть натисніть на сторінці, а потім виберіть View Вихідний код сторінки, це буквально те, що Google послано моєму браузері. 

Таким чином, деякі особи або осіб, писав Google.com за допомогою цього вихідного коду. Більшість це не HTML. Насправді це мова, званий JavaScript, який ми прийдемо до в середу. Але те, що Chrome, і те, що кожен браузер може зробити для нас, це свого роду см. повз всіх відволікань божевільні синтаксису і знову вставте пробіл для нас, і навіть підсвічування синтаксису, або розфарбувати речі для нас. Таким чином, ви побачите, що ці так звані розробник інструментів, вбудованих в браузери зробить ваше життя так, так набагато простіше тому що ви можете вивчити, за допомогою цього меню Інтерфейс, саме те, що основний вихідний код для будь-яку сторінку в Інтернеті. І справді, це одна з найбільш ефективні способи, щоб дізнатися, як це зробити щось нове, принаймні, якщо сторінка не такі складні, щоб придушувати, І.С. почати колупатися це HTML, подивіться на його так звані CSS, який ми приїдемо до біту, а також, щоб отримати розуміння того, як, що програміст реалізовані деякі приватні Особливістю цієї сторінці. 

Але технічно більш цікавим право Ну ось, тепер, щоб бути цим. Якщо я йду на вкладку Мережа, давайте тепер зніміть цей. Я збираюся натисніть на маленьку хрест символ тут, а потім перейти на інший сайт. І я просто хочу, щоб ввести в Facebook.com. Немає HTTP, HTTPS Ні, ні WWW. Давайте подивимося, що насправді тут відбувається. 

Enter. Тепер зверніть увагу цілу купу речі просто з'явилися в цьому нижня панель, в Додатково до веб-сторінці , З'являються у верхньому. Я збираюся прокрутити назад в Вкладка Мережа тут, і я збираюся натисніть на перший рядок. Те, що це інструмент збирається відкрити нам є кожен з HTTP-запитів які швидко просто повернувся і вперед між моїм браузером і Facebook, сервері. І так кожен з цих рядків являє собою одне таке клопотання або відповідь одна або більше ці віртуальні конверт. Або в більш невимушеній обстановці, це як людина як людина, клієнт у ресторан, просять щось знову, і знову, і знову. І офіціант тримає чого його назад по одному. 

Так що тепер, якщо я збільшити на цьому, зауважте, і це буде та річ, що ви завжди можете, і закликав грати з на свій розсуд, тому що ми Не буду перераховувати всі, в найдрібніших подробицях. Але зверніть увагу, що є кілька суб вкладки тут - Заголовки, попередній перегляд, відповідь, Печиво, і терміни. Я просто хочу подивитися на заголовки на даний момент, тому що це мало інгредієнтів всередині оболонки, що довідкові дані дістатися до і від місця. 

Отже, спочатку, дозвольте мені цього натисніть, Красивий вигляд Джерело поруч з заголовків запиту. Існує проханням мого браузера, Хром, в даному випадку, посланий всередині що віртуальні конверт. Ви пам'ятаєте, минулого тижня я вручну ввели його в той час як прикидаючись браузера. Потім він нагадав сервері, що це шукає господаря називається Facebook.com. А тут ще трохи більше таємницею Інформація, яку ми будемо махати наші руки на даний момент. 

Але якщо я починаю прокручувати вниз в даний час в це вікно, дозвольте мені дістатися до заголовки відповіді. Це було те, що у віртуальному конверт, який повернувся з Facebook.com. І якщо я натискаю View Source просто щоб побачити сирий текст з нього, помітити кілька речей. Один з них, Facebook також говорять на одному протокол, версія 1.1 його. Так що це добре. Але код стану 301, переїхав на постійне проживання. 

Ну, і де, чорт візьми, Facebook йти? Що це намагаються донести до нас? Ну, помітити тут є ще один заголовка з ім'ям Розташування. Так чому ж Facebook говорять мені, що вони переїхав до URL, що поруч з розташуванням? Я забув WWW. 

Так, щоб був мій вибір. Справді, більшість з нас рідко, можливо, введіть www.whatever.com в ці дні. Але виявляється, системний адміністратор, як Facebook, можуть налаштувати свої сервери таким чином що або Facebook.com робіт, або www.Facebook.com працює, або, насправді, будь-який такий префікс перед їх доменне ім'я. Так що вони зробили це для нас. І вони перенаправляють нас, ймовірно, для деяких технічних, деяких маркетингових міркувань. Вони просто хочуть канонізувати на www.Facebook.com. 

Але це не зовсім так. Якщо я перейдіть вниз тут, давайте подивимося, що станеться. Це говорить мені, що ми переїхав на постійне проживання в http://www.Facebook.com. Отже, давайте подивимося на другий запит що мій браузер посилає. На жаль, схоже, що Facebook переїхала знову, тому що другий запит, вибравши, що URL замість цього, говорить, що теж переїхав на постійній основі. І дозвольте мені тут прокрутити вниз для заголовків відповіді. Куди Facebook вже немає? 

Так HTTPS. Так що тепер Facebook почалася, особливо в світлі поточних подій в останні місяці, особливо і Також в останні пару років , Щоб змусити всіх своїх користувачів, в хорошому До речі, використовувати HTTPS, яка є більш забезпечити, хоча і не зовсім безпечно. І ось тепер моя сторінка, мій браузер збирається запросити цю третю URL. І ось, нарешті, ми отримуємо інших причин побачити 200 OK. 

Так що в світі або всі ці інші рядки тут. Я буквально набрали одне, а моя браузер, здається, просив, як 20 деякі дивні речі. Що це? 

АУДИТОРІЯ: сценарії? 

Виступаючий 1: Сценарії, тому інші файли написана мовою, званому JavaScript, які, знову ж таки, ми будемо подивитися трохи в середу. Що ще? Таблиць стилів. Так щось на мові, званому CSS, який ми побачимо в небагато. GIF-і JPEG, і PNG, і зображення, та відео файлів - все, що веб-сторінка має, швидше за все, в вигляді файлу. І так, що ми бачимо на лівій сторони є всі файли Chrome, що довелося завантажити, рекурсивно, якщо хочете, для того, щоб складають повноту сторінці. 

Отже, що ми бачили кілька хвилин тому з Google, Якщо я натискаю на елементи закладка, це, звичайно, є HTML, мова, яка вигадує цій сторінці. Але є пучки інших речей. Там в логотипі. Там в ці блакитні-іш Значки там. І є ще інші елементи на сторінки, які самі можуть бути окремі файли. 

Так що приємно про браузера є те, що він дивиться на мові, який ми збираємося , Щоб почати писати, або ви вже почав писати на безліч Р 7, малюнків , Де живуть ці файли, і йде і вистачає їх, а також. І я не можу не підкреслити, навіть хоча деякі з цього може виглядати трохи таємними або переважна на перший погляд, навчання програмуванню додатків для Інтернету, це неоціненну зрозуміти, як ці мало робочих інструментів. Це ніби як GDB як інструменти, але набагато простіше, зрештою, у використанні - і дійсно дає вам очі на те, що ми приймали як належне для досить довгого часу тепер. 

Так що ми можемо зараз зробити з цю інформацію? Ну, давайте насправді поглянути на концепції, що лежать HTML. І ми відкладемо, а у нас вже є, щоб розділах цього тижня, до проблеми встановлено 7 специфікації, в деяких з більш відомості про ці мовами. Але давайте подивимося, якщо ми не можемо намалювати картину того, що ви повинні розуміти, загальне тут. 

Так HTML, мова гіпертекстової розмітки, не є мовою програмування. Що це дійсно означає? Так HTML виглядає таким чином. І деякі з вас вже знають це. Деякі з вас робили це протягом деякого часу. Але давайте подивимося, якщо ми не можемо заповнити деякі прогалини, а також. Так помітити кілька речей тут. Один з них, це просто текст. Так що це просто, як у вихідному коді C, або який-небудь іншу мову. 

Зверніть увагу, що, здається, бути зразком тут. Там у відступи, але технічно відступ просто людська Конвенції. Браузери не піклується, якщо є нові ліній і вкладки, як ми бачимо, є. Але зверніть увагу, що є симетрії тут. Там те, що я буду називати, у верхній частині Цей файл, відкритий тег або початок тег, називається HTML. І потім, внизу, прекрасно вишикувалися вгору, так само, як ми робимо з фігурними дужками, ми бачимо, відкриває дужка, вперед слеш, HTML, закриває дужка. Так от відповідний близько тег або закриває тега для цієї речі. 

Разом все всередині так званих відкритих тегів і закриває тег складати, що ми назвемо елементом. І ми побачимо, тільки в даний момент, це дуже подобається вузла в деревах. Тому що, якщо ви думаєте про зараз поглиблення, яке мається на увазі, тут, ви почасти є, начебто, бабусі і дідусі вузол, який називається HTML. Скільки дітей ви могли б сказати, засноване На цій картині, HTML елемент має? 

Так, ймовірно, два. Одним з них є головний елемент, мабуть. І одне це тіло елемента. А чому б і двоє дітей? Ну, я тільки почасти виведення, що якщо У мене є відкритий тег голови, а потім закриває тег голову, це елемент. І потім, якщо є ще один відкритий кузов тега і закриває тега тіла, це все одно що іншого елемента. Таким чином, в тому сенсі, що якщо я ніби поворот зображення на його боці, це як з HTML тегів, а потім голова тег, а потім тіло тега, і Потім текст, привіт світ, базікаючи від тіла сам тег. 

Так що ми можемо намалювати картину, що може виглядати наступним чином. Форми можуть бути будь-якими. Але зверніть увагу, що я використав роду еліпс у верхній представляти Сам документ. Виявляється, можуть бути й інші речі всередині веб-сторінки, які я не зроблені тут. Таким чином, ми збираємося навіть повісити HTML вузла геть так званих вузла документа. А то у нас голова і тіла і назви, зауважте, який вкладений далі. Я не турбувати покласти додаткову лінію розривів всередині заголовка. Він просто відчував, що це ставало занадто громіздким. Тому я залишив його в одну лінію там, з Відкрите назва, привіт світ, закрила титул. І тоді у нас є деякий текст звисають геть тут. 

Так що це картина повернеться до нас, коли ми занурюємося в JavaScript. І розуміння того, що, коли ви написати HTML, як це, те, що це браузер робить? Ну, ми не повинні турбуватися про як він це робить, або з тим, що алгоритм, але врешті-решт, Коли браузер отримує HTML як що з Facebook або Google, він аналізує це, так би мовити, він читає, з чимось на зразок FREAD, зверху вниз, зліва направо, і, як розуміє, про, відкриваючого тега, а потім закрийте тега, він починає Malloc, так би мовити, вузла в дереві. І коли він стикається, як ми вже мається на увазі тут з відступом, дочірній вузол, він mallocs вузлом для цієї і прикріплений що до дерева. 

Так деревовидні структури, бінарні дерева, потрійних дерева, і більше дерев, що ми подивились на тиждень чи два тому, повідомлення , Що той же принцип повертаються до нас. І той, хто реалізований, що Chrome Команда зробила, що імовірно було здійснити якийсь структури дерева під капотом. І це саме по собі, ймовірно, в мову, як C або C + +, або нижчої рівні мови, що ми будемо тепер використовувати поверх Інтернету. 

Так що тепер, може бути, це буде більше сенсу. Фактичні татуювання від якийсь хлопець, який може шкодувати про це зрештою, почасти. Добре, все в порядку, так що багато веб-гумору. Це насправді не збирається за сьогодні так добре. Таким чином ми будемо рухатися далі. Добре. 

Отже, давайте подивимося тепер на кілька прикладів. Найпростіша річ може бути в цьому. Я збираюся йти вперед і відкривати в Gedit файл з ім'ям hello.php. І всередині тут, я йду швидко просто зроби це, Е, цитую кінець цитати, "привіт світ". 

Так повідомлення, і я зроблю все від мене зворотну косу риску N, Я не потрудився оголосити основні. Виявляється, в PHP, і багато мов, вам не потрібні основні функції як такої. Ви можете просто почати писати Вашій програмі. Тепер, коли я зберегти цей файл, я помічаю доведеться виконати наступні дії. Я не збираюся користуватися косметикою, і я не збираєтеся використовувати PHP брязкіт тому, на відміну від C, що не компільований мову. Це те, що називається інтерпретовані мови, що означає, що ви запустили його в якості вхідного через іншу програму називають перекладачем. І ця програма читає його, зверху вниз, зліва направо, і робить все, що ви скажете їй зробити. 

Так що в цьому випадку у мене є тут один рядок, яка говорить Є. Тому, коли я запускаю цей вихідний код, hello.php, хоча це програма, яка буває, зручно, яке називатиметься PHP, ця програма PHP буде читати Цей файл, зверху вниз, зліва направо, і він буде робити те, що я скажете їй зробити - виконання коду, а якщо він не визнає щось, просто плювки його. Так що я збираюся йти вперед і Запустити PHP з hello.php. Enter. 

І це ще не зовсім те, що я мав намір. Ну, чому ж? Ну, PHP є мовою, який насправді розроблені, щоб бути достатньо переплітається з Інтернету. При створенні веб-сторінок з цією мовою PHP, як ми скоро побачимо, ми хочемо зробити щось на зразок друку з ліній, як це. 

Так що я збираюся зробити це. Відкриває дужки, знак питання, PHP, і Зараз я просто хочу, відступ тільки, щоб тримати речі хороші. А тепер я збираюся зробити питання марка ЗАКРИТИ кронштейна. Таким чином, є трохи асиметрії тут. Ви не робите цього. І ви не зробите косою риси, так PHP це трохи інше. 

Але тепер, якщо я повторно цю програму, PHP hello.php, тепер я насправді отримати Hello World. І ми побачимо, чому це цінно. Один з них, це дозволяє мені вказати, супер явно, це коду, виконати це. І це дійсно те, що ці спеціальні теги увазі тут. 

Але це також означає, що, якщо я просто роблю щось на зразок я прагну сюди, що означає, що, буквально, що буде просто роздруковується без необхідності насправді назвати Е, або друк, або будь-які аналогічні функції. Тому ми повернемося до цього через хвилину. 

По-перше, давайте зробимо це. Усередині приладу, у нас є каталозі з ім'ям VHosts, для віртуальних Господарі, слеш локальний хост, підсічно-громадськості. Так що це трохи багатослівний, але довга історія Коротше кажучи, прилад призначений не тільки підтримувати C. Це також призначена для підтримки PHP. Але він також призначений для веб- сервер і сервер бази даних. І він призначений, і дійсно налаштований, бути нагадує будь комерційні веб-хостингу компанії, яка ви могли б заплатити $ 5 в місяць протягом, $ 100 на місяць для. Якою б не була послуга, він налаштований бути дуже схожий на реальний сервер світового виробництва. 

А що це означає, що працює на прилад ПЗ веб-сервера. Це, виявляється, називається Apache. Це просто вільним, і з відкритим вихідним кодом, і дуже популярні. І ми налаштували Apache знати що, якщо я відвідую певний URL, з Хром або будь-який браузер всередині Прилад, заглянути в цей каталог для файлів, які запитує користувач. 

Іншими словами, дозвольте мені йти вперед і робити це. Всередині мого загального каталогу, я збираюся йти вперед і створити файл ім'ям index.html. Це дає мені вкладку тут. І я збираюся піти дуже швидко і йти вперед і строчити цій програмі. Doctype HTML, яка на даний момент, просто Припустимо, у вас є, щоб надрукувати. Це просто таємні тега, це не дійсно теги HTML, який вказує, що ось іде деякий HTML. 

Я збираюся йти вперед і відтворити що ми бачили кілька хвилин тому. Ось глава сторінці. Усередині голови було - такою назвою. Тому ми привітатися, світу. І тоді тут було тіло тега. Дозвольте мені в тіло тега. А потім тут я також кажу, просто для ясності, привіт світ. 

Так що це, мабуть, найпростіша можливо веб-сторінкою може зробити це в силі. Це синтаксично правильні. Все, що відкритий закритий. Все це приємно в стилі і з відступом. Отже, давайте подивимося тепер, як я може отримати доступ до цього файлу. 

Ну, дозвольте мені перейти до Chrome тут. І дозвольте мені перейти до http://localhost/index.html. Так що локальний хост? Ну, більшість будь-якого комп'ютера в світі, Linux, Mac OS, Windows, має прізвисько називається локальним хостом. Так що, якщо ви хочете поговорити на свій комп'ютер - хоча, як ні рефлекторно - Ви називаєте себе локальний хост. Неважливо, що ваш фактичний комп'ютер називається, будь то MacBook Давида Повітря, або щось більш детальний подібне. 

Так що цей URL очевидно збирається використовувати HTTP поговорити з локальним хостом, одному комп'ютері, пристрій і він збирається попросити, просто взяти гадати, який файл? Index.html. Таким чином, прилад був налаштований в перейти до знаю, що якщо я прошу за те, як index.html, шукайте в папці під назвою віртуальних доменів, в Папка називається локальний, в папці в ньому називається громадськості. Ось де всі мої громадські Файли будуть. Так що я зараз вдарю Enter. 

І, чорт забирай, є те, що заборонена повідомлення, інакше відомий як 403, Числовий код для нього. Так що тут не так? Ну, це не достатньо, щоб просто покласти файлі всередині моєї папці. Мені потрібно, щоб насправді зробити наступне. 

Відпустіть мене в мій каталог віртуальних доменів, в локальний, в суспільну, і нехай мені зробити Ls тире л. І є кілька інших речей тут для цілей сьогодні. Але зверніть увагу на лівій стороні, в наступному до index.html, ми бачимо тільки одну RW. І в минулому, що була RW стояв? 

Просто читати, ні писати. Той факт, що він говорить RW ліворуч означає, що я, власник цього файлу, може читати чи писати. Але мені потрібно, щоб всі люди в світ читаєте це, хоча і не писати. Так що я збираюся змінити режим файлу, CHMOD, всі плюс R, щоб дати всі права на читання файл з ім'ям index.html. 

І якщо я зараз Повторіть Ls тире л, повідомлення , Що, тут, ще кілька R в вискочили. І на даний момент, йде спекуляція більш докладно. Для безлічі Р 7, що саме означає, що кожен тепер можуть читати цей файл. Якщо я повернуся в моєму браузері Тепер і перезавантажте, вуаля. Привіт світ. 

І я можу навіть відкрити Chrome інструменти і подивитися, як і з Google Facebook, що є мій HTML, відформатовані трохи по-різному і розмальований. Якщо я йду на вкладку Мережа та перезавантажте сторінки, зауважити, що є отримати просити Chrome посилає до приладу. Там в 200, що для конкретний файл. Коротше кажучи, це, як всі ці різні частини збираються разом. Просто так сталося, що веб-сервер ми використовуємо зараз не видалених, як Facebook. Це буквально на тому ж комп'ютері, яка абсолютно в порядку. 

Отже, що ще ми можемо зробити у веб-сторінку? Ну, просто, давайте вітер через пару таких речей. Але дозвольте мені йти вперед і знову Gedit з index.html. І дозвольте мені йти вперед і привітатися CS50, зберегти цей файл, поверніться до браузері, насправді зміни у захват. 

Але що, якщо ми хочемо насправді посилання на щось зараз? Ось і виходить, що ми можемо мати Посилання в HTML, які є тільки теги собою. Це, виявляється, називається тега прив'язки. HREF одно https://www.cs50.net, www.cs50.net Закрити цитати, закриває дужка. А тепер давайте подивимося, що ще буде далі. 

Я відкрив тега. Тепер потрібно, щоб дати йому фраза типу CS50. Дозвольте мені закрити тег. І зверніть увагу кілька речей. Хоча є це загадкові речі Тут, я не повторив це, коли ви закрити тег. Ви просто закрити тег з його імені. І це те, що називається атрибут із значенням. Атрибути просто змінити поведінку деяких тег всередині сторінки. 

Так що це уточнивши, що гіпер довідки, химерний спосіб сказати Посилання на цей якір, для цього посилання, повинні бути CS50.net. І текст, який ми хочемо показати користувач не URL, що сирий, а швидше Слово CS50. 

Так що якщо зараз я перезавантажити, дозвольте мені збільшити для ясності, дозвольте мені перезавантажте сторінку, помітити, що у нас є ця стара школа сині підкреслені посилання. І якщо я навести на неї, і це буде бути жорстким, щоб бачити, в лівому нижньому куті куті екрану, помітить що він говорить, адреса, на який Я збираюся піти. І якщо я натискаю, вуаля, Зараз я створення веб-сторінок. І ми привели себе на головну сторінку. 

Але зверніть увагу на те, що потенціал Тим самим нам. Безпека дуже багато в моді в наші дні. Що робити, якщо я замість цього сказати щось на кшталт: це, і я замість цього піти, скажімо, давайте см., fakeCS50.net. Перезавантажте сторінку. 

Отже, помітили це все ще виглядає, як я Не збираюся CS50, якщо проникливий очей помітите, що я збираюся підроблені CS50. Я припускаю, що ця область не приймається. ОК, так що це не доступно. Так що це добре. Насправді ніхто не має цього домену. 

Але давайте бути трохи зліше тому що це якось безглуздо. Що, якщо ми змінити це на Paypal. А що, якщо ми називаємо це, начебто, www.paypal.badguy.com, незалежно від домену. Це, ймовірно, існує. Так що тепер дозвольте мені перезавантажте сторінку. А от у нас як фішинг атаки, P-H-I-S-H-I-N-G, який є нерозумно слово, дане для атаки, Риба намагається інформації, або, краще сказати Тим не менш, гроші, з людей, обманюючи їх у наданні інформації, що вони не могли б зробити. Це виглядає абсолютно законно, правильно? Я повинен мати посилання тут, щоб Paypal.com. Справедливості заради, якщо я сексуально його з деякими графіки, ми можемо зробити це виглядати більше схоже PayPal. Вірно? Тому що я міг, як у бік, Я міг піти в Paypal.com. І ми тільки що бачили, як я можу см. всі свої HTML. Я міг би просто скопіювати його і відтворити Естетика Paypal, а не йти старої школи тут. Але зверніть увагу, звичайно, і це трохи ще слабкий, тільки в нижньому лівому куті, як в 10 пунктів шрифт, ви бачите те, що ви URL насправді буде привело. 

І тому, якщо ви коли-небудь отримували спам кажучи йти вперед, а ти рахунки був зламаний. Будь ласка, натисніть на це посилання і повідомте нам Ваш пароль, ми можемо гарантувати, що ви Ви, ніколи не робіть цього. Ці речі повинні піти, не кажучи. Але це напрочуд кумедним, і трагічна, як кожен рік це, здається, трапляється, деякі ненульові кількість людей. 

І в цьому вся принадність фішингових атак. Ви можете надіслати мільйонів листів. І навіть якщо 0,01% людей, насправді натисніть на Paypal і дати вам ваші пароль, це все ще ненульове число людей, які вже просто дати вам свої гроші. І відправки електронної пошти, звичайно, цілком легко і, по суті, безкоштовно в ці дні. 

Така довга коротка історія, прекрасно Красива ідея, чи не так? Багато років тому, це був самий ранній Інтернет, дозволяючи павутині гіперпосилання між ресурсами. Але так швидко, це може бути використовуватися для хворих цілей. І електронній пошті, досить сказати, ці днів, володіють вбудованим HTML всередині. 

Ну, дозвольте мені ще одну річ. І ми відкладемо в значній мірі до розділу Проблема задати сім, щоб дозволити вам вивчення частковостей. Але дозвольте мені йти вперед і зробити кілька речей. Я збираюся піти і оголосити те, що називається DIV або поділ, на цій сторінці. Дозвольте мені близько, що тег DIV. 

І я збираюся сказати, до Тут верхній частині сторінки. А потім нижче цього, я збираюся зробити щось на зразок інший DIV, закрийте це тег і зробити внизу сторінки. І давай його збереження. 

Отже, тепер давайте повернемося до мого файлу. Дуже захват. Але те, що поділ використовується для, під капотом, це насправді хороший структурний елемент. Це не має естетики так далеко, ми можемо бачити, крім, мабуть, покласти речі по-новому. 

Але зверніть увагу, як у бік, просто натискаючи Введіть не ріже його в HTML, як це робиться в С. Можна подумати, що це збираються поставити хороший великий розрив між верхній і нижній частині сторінки. Але воно ігнорується. Прогалини по суті ігнорується в веб-сторінок крім першої пробіл характеру, або повернення каретки, що ви потрапили на клавіатурі. Якщо ви хочете більше розривів рядків, ви повинні визначити це самостійно. 

Так що я збираюся зробити кілька речей тут, щоб показати, що відбувається. Я збираюся додати атрибут, який існує, і знову, як ви дізнаєтеся які атрибути існують, які теги існують, дійсно, зараз на посиланнях. HTML є свого роду мова - це не є мовою програмування. Це мова розмітки, - що після добрих півгодини, може бути, годину з його, ви, безумовно, розуміємо, більшість ймовірно, основна ідея. І тоді пошук Google від готелю знаходиться все можливих тегів, які ви могли б бути зацікавити І в специфікації, що є досить вітається і заохочується тут. 

Так що тепер дозвольте мені йти вперед і зробити щось на зразок цього. Колір фону. І тепер, я збираюся зробити щось як червоний, крапка з комою. І ви можете зробити це в кількома різними способами. Я просто вид внісши її як супер явно наскільки це можливо. 

Але виявляється, що це значення тут те, що називається CSS, каскадні таблиці Листи, що є ще одним мови в цілому. CSS не має нічого спільного з відкриті теги і закривають теги. Це пов'язано з властивостями. 

І властивості просто ключове значення пар, так як деякі слова, товстої кишки, а потім деякі інші слова. І якщо у вас є декілька з них, або просто один тут, ви можете закінчити його крапка з комою, просто для ясності. Але це теж буде працювати тут. 

Тепер те, що це буде робити? Ви, ймовірно, здогадуєтеся. Дозвольте мені йти вперед та перезавантажте сторінку. І тепер це дійсно йде. Так що перше, що прийшло сторінка червоним. Але те, що ключовим тут є те, що я згадав, раніше, що дає вам DIV Поділ сторінки. І це дійсно те, що він робить. Це істотно ділить сторінку в прямокутник, який потім можна маніпулювати. 

І це поняття прямокутників виду переконливими в тому, що якщо ви думаєте про Найбільш будь-якого веб-сайту, там, напевно, деякі структури до нього. Більшість з вас, напевно, рідко можна побачити Facebook домашню сторінку, якщо ви увійшли за весь час. 

Але на головній сторінці Facebook, є свого роду справ у верхній частині. І це може бути не так просто, як один DIV, але є прямокутну область там. Інша частина сторінки, як величезний DIV, як багато велику прямокутну область. Так коротше кажучи, тільки за наявності цих маленьких будівельних блоків, здатність моделювати речі, як прямокутники, Чи широка або вузька, ви також можете зробити колонки потенційно, дозволяє викласти сторінках, насправді, однак ви хотілося б. Ми дійсно просто дряпати Поверхня тут. 

Справді, якщо я зроблю один іншого, Дозвольте мені піти далі і зробити стиль, фонового кольору, ми будемо робити те, як синій, близький лапки. Давайте перезавантажити. Так що тепер це стає ще більш потворною. Але тепер я можу вид хвалитися мій P встановив п'ять навичок, правильно? Червоний. Це нагадує мені про RGB, червоний Зелений Синій трійок. Що ж, виявляється, у веб-програмуванні, або веб-дизайн, який цього, у нас не запрограмований нічого як такого, ви можете насправді є шістнадцятковий код. Так щось щось, щось щось, щось чимось. Таким чином, ви можете мати шість шістнадцяткових символів або три, в деяких випадках і кожна з цих знаків питання Повинно бути шістнадцятирічних цифр, від нуля до F. 

Якщо я хочу мати багато червоного, і Немає зелений, і не синій, що протилежне нулю при використанні HEX? Це ф. Так що я можу зробити, і далі, нуль-нуль, нуль-нуль, зберегти, і тепер приїхав сюди. І я насправді не бачать змін. Так лапках "червоний" є мабуть синонімом для всіх червоних, Немає зелений, що не синій. Тим часом, давайте свідомо змінити цього має бути щось випадковими, як ABCDF. 

Давайте подивимося, що це таке. Це дійсно хороший синій, Насправді, Baby Blue. Гаразд, так що це тільки зараз кілька випадкових комбінацій символів. Тому ми не будемо грузнути тут. Але знову ж, це говорить про точність що ви можете почати застосовувати - навіть якщо ви дуже перевантажені з естетики. Справді, якщо ви дійсно хочете бути вразило, дозвольте мені йти вперед і змінити розмір шрифту, наприклад. І зверніть увагу на крапку з комою, яка Необхідно там. 

Розмір шрифту, ми можемо бути просто смішно Тут, 96 точки. Залиште це. Нічого собі, це великий розмір шрифту. Гаразд, так що це дуже легко. А насправді, ви, по суті вигляді перших веб-сторінки я зробив років тому, коли я вперше дізнався цей матеріал. Це дуже легко зробити дуже жахливі речі швидко. 

І якщо ви знайомі з Wayback Машина на archive.org, ви можете знайти всі мої огидні сторінки веб-старшокурсники. Треба було Керміт Жаба на передній панелі. Я пройшов через етап, коли я думав, це було круто взяти тлі червоний завісу, коли я дізнався, як ви зображення можуть плитки знову, і знову, і знову, щоб заповнити сторінки з великий липким червоним завісою. І потім, на вершині цього, була ікона що потрібно було натиснути, щоб увійти в мій будинок сторінку, тому що це було дуже в моді. 

А потім моя перша програма, яку я написав не було в PHP, але на мові, називається Pearl, написала гостьовій книзі, яка це дійсно здорово, що Багато людей очікують, що ви мати на головній сторінці. Коли ви потрапляєте на сторінку, вони хочуть, щоб ви увійти в систему, і сказати, хто ви, і чому ви там. Це дуже 1990-х років стиль веб-дизайну. 

Але в ці дні, звичайно, у нас приходять набагато далі. І ви побачите, в розділі, і навіть в задачі задати сім, по Використовуючи бібліотеки в ці дні, це набагато легше зробити гарніше речі швидко. Тут насправді, ми просто подряпини поверхні того, що ви можете зробити стилістично. 

І справді, вже, дозвольте мені підкреслити, що це вже стає потворним, що не тільки естетично, але з точки стилю мого коду, або дизайн мого коду. Я в даний час comingled HTML, яка є зеленувато відкриті теги там, з CSS властивості, які є абсолютно законним. Це дійсно, де мова має свої витоки. 

Але в інтересах чистого дизайну, так само, як ми почали факторинг речі C з файлів у. Файли год, не кажучи мене насправді практикують таку Принцип і почати робити це замість. Дозвольте мені сказати стилю тега тут, яка існує і в HTML, і дозвольте мені вказати наступні. Дозвольте мені видалити цю. Колір фону буде червоним. Я збираюся видалити це повністю. Я збираюся позбутися від стилю атрибут, а я буду однозначно ідентифікувати цей DIV зі словом - довільно, але розумно, цитати кінець цитати "зверху". І ID є спеціальним атрибут, який однозначно визначає певний елемент HTML як мають, що ID. 

Якщо зараз я хочу це стилізована, тут, у глава моїй сторінці, всередині стиль тега, помітити, що Я можу зробити хеш вершині. І тоді я можу поставити пару фігурних дужки, що нагадує C, а потім нехай Мені вставте в цій стилізації. І дозвольте мені йти вперед і передбачати тут куди я йду з цим. Дозвольте мені також створити один для нижнього справ. Дозвольте мені захопити цей огидний код вниз Тут, поклав його тут, і я буду трохи більше анальний зараз і це стилізовані просто покласти на речі самі по собі лінії, закінчуючи крапкою з комою. Дозвольте мені позбавитися від стилю тега. 

Але я ще не закінчив. Мені потрібно зробити ще одну річ. Так, ідентифікатор дорівнює лапках, "дно" або що ID я хочу дати цьому елементу. Тепер, дозвольте мені повернутися сюди. І це жахливо. Я не можу мати справу з 96 крапкою. Давайте зробимо 24 точки. Або ви могли б бути більш точним. Ви можете використовувати пікселі, PX, тому що ви дійсно отримаєте тонке зерно контроль над вашій сторінці. 

Як осторонь, це не обов'язково Найкраще, якщо користувачі, для доступність причин, хочуть мати можливість збільшити розмірів. Так розумію, що є способи зробити речі, які не обов'язково всі жорсткі коду. 

Гаразд, так що це більше, 24 точка, ніж все, що за замовчуванням. Але тепер це трохи чистіше. І дозвольте мені зробити ще один крок вперед. Так само, як ідея файли заголовків, помітити, що ми на один крок ближче до цього. У мене є винесена, але ще залишилося, Всередині моїй сторінці, ті правила CSS. Чому може я хочу зробити ще один крок Крім того, видалити цю в цілому, і покладіть його в окремий файл? 

Так що я можу використовувати його, чи не так? Це просто якась інтуїція Прямо зараз. Раніше я стверджував, що це було просто отримувати потворні мають стиль атрибути всередині ПІВС себе. Але тільки частково думаю, що до кінця. Як вашої сторінки все довше і довше, якщо Ви придбали тут, і тут, і тут, і тут, всі ці різні кольорів і розмірів шрифту та інші подібні атрибути, ваша сторінка дуже швидко збирається стати некерованою для вас. 

Якщо хтось приходить до вас і говорить, ой, ви знаєте, що? Я б дуже хотів, щоб змінити розмір шрифту два додаткових очок, ви можливо, доведеться піти і знайти і замінити Величезна кількість рядків коду. Це набагато більш привабливим для централізації всі такі естетики тут. Але якщо ви хочете повторно використовувати ті естетику в кількох веб-сторінок, всі Чим більш привабливі для, для Наприклад, створіть файл називається з тих зміст. 

І дозвольте мені зробити це. Збережіть цей файл. Я кажу styles.css, довільним, але звичайні. Я поставлю його в храмі Джона Гарварда каталог зараз для простоти. А що я можу зробити в моїй веб-сторінці, це отримати позбавитися від стилю тега в цілому, і кілька unintuitively, використовуйте посилання тег, який не дає вам посилання у гіперпосилання, інтерактивні сенсі, але де я кажу посиланням, HREF одно styles.css. І відносини, що цей елемент була з веб-сторінки в якості його таблицю стилів. 

Отже, як же я дізнаюся це? Один з них, ви щойно прочитали керівництво, або ви Google навколо, і ви дивитися на різні ресурси. Я хочу сказати, що дійсно, як ви піднімаєте методів, як це, та відповідно з цією ідеєю викладання себе нові мовах, знову ж таки, ви виявите, що є тільки кінцеве число речей на будь-якій мові, який, як тільки ви отримаєте їх, ви побачите, що він отримує все швидше і швидше писати. Дійсно, вивчення нового програмування мова набагато швидше, ніж нові розмовна мова, тому що ці речі набагато менше, і багато іншого точно визначені. 

Але я виділив трохи аномалії тут. Чому я виділив цю коса риса тут? Тому що я повинен закрити тег. Я повинен закрити тег. І ви знайдете величезний обсяг ресурсів Інтернеті, що не обов'язково закривають теги. І реально, це не зовсім необхідних для технічного і є Причини реальності, браузери просто досить терпимі помилок у веб- Сторінки, на краще чи на гірше, але в основному гірше. 

Так що тут просто екологічно чистих способів сказати щось дурне, як це, де, якщо ви хочете відкрити посилання тега але закрити його, немає справді ніякого поняття утримання для зв'язку тега. Це просто означає, завантажити цей файл і покласти його тут. Це як різкі включити в C. Ви можете відкривати і закривати тег все відразу в межах одного тега. І є інші приклади. Це не спосіб зробити це, але бр тегів, для розриву рядка, якщо я дійсно хотіли домогтися того, що я був намагаються перед натиснувши Enter, якщо Я явно говорять рядки, рядки, рядка, рядки, і перезавантажити сторінку, в даний час ви помітите, що внизу сторінки є, Справді, набагато далі вниз у в нижній частині сторінки. Але навіть це може бути зроблено набагато більше чисто з CSS, і з полями, і з іншими такими естетичними методів. 

Так що на даний момент, є винос цього. У HTML, у нас є ці речей, які називаються тегами. У CSS, у нас є ці речі називаються властивостями. Ми можемо comingle цих двох мов, або за допомогою атрибуту стилю, або стиль тега, або ще краще, факторинг його в цілому, як ми це робимо У завдання, поставлене 7. Питань, те, про концептуальні основи тут? 

Зали: У мене питання. 

Виступаючий 1: Ой, вибачте. 

Зал: А чому він не був кольоровим - 

Виступаючий 1: О, В іншій вкладці? Це тут? 

АУДИТОРІЯ: Ні, це як - 

Виступаючий 1: О, це тому, що Я був недбалий. Я поклав файл в неправильному місці. Так що, якщо я насправді поклав його тут, і я CHMOD це все + R для styles.css і Тепер перезавантажити сторінку, тепер ми отримати стилізацію тому. І тому, що розміри шрифтів різні, ми не бачимо в тій же мірі прогалин. Замість цього ми подивимося, що Типово замість цього. Хороше питання. Так? 

Зал: А чому це зв'язок тег всередині заголовка? 

Виступаючий 1: Чому посилання тег всередині заголовка - Коротка відповідь, просто тому що. Це те, що було прийнято рішення. Ось де посилання теги йти, коли у вас є те, що називається Зовнішня таблиця стилів. Інші питання? 

Добре, ну давайте зробимо це. Ми так весело перед нами сьогодні. Ось тільки подряпини поверхню CSS. Давайте зробимо це. Давайте п'ятихвилинну перерву тут , Тому що, на мій e-mail, давайте висіти в там до 2:30-іш сьогодні. Але якщо у вас є, щоб залишити, це нормально. Але ми будемо рухатися вперед після п'ятихвилинним перервою. А ми будемо знати дещо про PHP, MySQL, і багато іншого. 

Гаразд, давай спробуємо, зараз, щоб зв'язати Деякі з цих ідей разом і зробити, зрозуміло, наш власний пошуковик. Я помітив, дуже цікаво, наступному. Коли ви перебуваєте на Google.com, ти як правило, на адресу, такий як цей тут з нічого після точка ком. Але якщо я шукаю щось дурне, як Кішки, та натисніть Enter, то ми отримаємо - не нерозумно, але ви знаєте. 

Отже, помітили, у верхній частині сторінки Тепер, адреса чи вона, звичайно, змінені. І це далеко не все, нове для кожного з нас. Ви натискайте на посилання та інше відбувається в Інтернеті. Але що тут цікаво полягає в наступному. Там ціла багато безладу, але нехай мені викинути речі, які я не цілком розуміє або дійсно виглядають актуальними. 

Дозвольте мені позбавитися від цього. Дозвольте мені позбавитися від цього. І дозвольте мені просто позбутися всього цього. А тепер зверніть увагу, що кішки в URL, слідують з Q, то рівних знак перед нею. Ось і виходить, це, як Як це працює, коли мова йде на вході і виході. 

Ми давно говорили про чорні ящики, чи не так? Так що, якщо це функція, виконувана Тут, як чорний ящик, він приймає вхідні і проводить видачу, ну, значить, за допомогою якого ви внести свій внесок у Веб-сайт є шляхом, часто, його URL. Ви просто поставив знак питання а потім ключ дорівнює значенню. І тоді, можливо, амперсанд, а потім Іншим ключовим дорівнює вартості, то, можливо, інший амперсанд, ключові дорівнює значенню. Ось як ви передаєте ключі і значень, пари входів. 

Так що, якщо я вдарив Введіть Тепер, що цікаве про Google в тому, що всі , Які захаращують я видалив не відображається строго необхідним. Все що мені потрібно відправити Google є питання знак Q дорівнює кішок, щоб отримати тому деякі кішок. Ну, сенс цього, то, якщо я підтягнути Gedit, я почав зробити мої власні пошукової тут у файлі з ім'ям seach0.html. 

І дозвольте мені йти вперед і видалити ще одна лінія, що ви не повинні були бачити. А тепер, відпусти мене в мій власний браузер, так, щоб не Google, і перейти до http://localhost. І що відбувається, щоб отримати в дорозі. Отже, ми збираємося мати, щоб сказати до побачення що на даний момент, перемістити цей тут, О, тепер ми збираємося повинні Попрощайтеся з файлом. 

Всякий раз, коли у вас є файл з ім'ям index.html або index.php у каталог, якщо веб-сервер налаштована таким чином, що ви будете бачите, за умовчанням, є зміст цього файлу, а не переліком каталог, як я хотів тут. Детальніше про це в специфікації. Ви не бачили цього. 

Так це те, що я насправді хотів. Але хвилину тому, був файл у цій папці index.html і index.php. І тому веб-сервер був показував мені ці файли. Замість цього я хочу цього каталогу перераховані тут. 

Так що я збираюся йти в CSS і перейти до search0. І я стверджую, що це він буде початку моєї власної конкурентоспроможної пошуковій системі. А для цього, я збираюся піти в Сюди, в CSS, і відкрити з Gedit, пошук 0. Але, на жаль, є не так багато тут відбувається. Все, що я робив, було використовувати тег заголовка, який , Трапляється, називають h1, яка по суті означає великий і сміливий, і цим все сказано. Але кошти, за допомогою яких ми можемо забезпечити входи через ці що називається формами. 

Отже, дозвольте мені йти вперед і відкривати і закривати, превентивно, а тег форми там. І дозвольте мені йти вперед і робити щось на зразок цього. Вхід, типу дорівнює тексту. А потім давайте закриємо тезі самі дужки. Мені не потрібно, щоб почати текстове поле і зупинити текстового поля. Це просто буде там чи ні. 

А потім, що нижче, давайте зробимо Тип входу дорівнює уявити. Зберегти. А тепер давайте просто зробимо швидка перевірка справності. Давайте перезавантажити. 

Добре, таким чином, це не погано. Це не в стилі Google, але це досить близько. Там в текстовому полі. Я можу надрукувати деякі речі в, натисніть Enter, але нічого не відбувається поки. І це тому, що я не вказав дію для цієї форми, так би мовити. Так що, якщо я повернуся в елемент форми, Виявляється, і я знаю, що це тільки від прочитали документацію, що Форма мітка має атрибут називають дію, яка URL веб-сайт, до якого необхідно відправити формі. 

Я дійсно не думаю, що у нас є час здійснювати весь кінця назад для пошукової сьогодні. Таким чином, ми просто будемо говорити, а, перейти на google.com / пошуку. А тепер дозвольте мені в моїх цитат. І дозвольте мені вказати, що подальше метод, який використовується збирається називати отримати. 

Коротше кажучи, є два шляхи, по крайней міру, що ви можете подати інформацію від браузера до сервера. Один з них отримати, і для цілей сьогоднішнього, це просто означає, в URL. Ви бачите точно знаками питання, знак рівності, і що амперсандом ми бачили раніше. Або є альтернатива називається пост. На даний момент відомо, що пост часто використовується коли ви хочете, щоб завантажити файли, наприклад, зображення і т. д., або коли ви хочете представити інформацію про кредитні картки, або паролі, все, що він не дійсно має сенс, концептуально, або Мудра безпека, зрештою на адресу ваш браузер, коли батьки стеження, або сусідів по кімнаті, або у кого є доступ на комп'ютер, може бачити. 

Так давайте збережемо це тут. І мені потрібно зробити ще одну річ. Це не досить просто сказав, дають мені текстове поле. Я повинен дати цього поля цінуєте ім'я. Так що дозвольте мені взяти вибір Google про імена, Q, і вказати, що другий приписуємо Я дійсно не піклуються про Назва кнопки Submit. Все, що я піклуються про представлення що користувач вводить дюйма 

А тепер це начебто потворною. Він просто говорить уявити. Виявляється, і я знаю це від документацію, я можу насправді сказати значення дорівнює лапках "CS50 Seach, "близькі цитати. Тоді давайте ще раз перезавантажити. Так що я б'ють Command-R або Control-R на клавіатурі, щоб перезавантажити. 

Тепер у нас є цікавіші пошуковій системі. Однак це не зовсім схожі Google же, все ж. Так що давайте йти вперед сюди і зробити невелику перерву лінії. 

Отже, тепер у нас є Google. Ми насправді майже мене є Google. Так що тепер станеться? Я збираюся ввести в чомусь як кішки. І браузер буде розібрати ця форма, що я визначений. І він збирається відправити користувачеві, що URL. Тому цього разу, для деяких цікавих причин, Я отримав більше інформації про запаси , Ніж про реальні кішок. Але це нормально, тому що ми все ще помічають закінчив тут, Q дорівнює кішок. 

Така довга коротка історія, здається, досить тривіальним, щоб отримати вхідні дані від користувача. І бути справедливими, тобто пучки інших типів полів форми. Там в прапорців, і мало взаємно ексклюзивні кнопки радіо і випадають меню і багато іншого. Але всі ці є відносно легко реалізована у вигляді це текстове поле було. І в кінцевому рахунку, ми просто повинні зробити упевнений, що хтось слухає на інший Кінець лінії для того, щоб отримати, що оброблюваної інформації, так чи інакше, і поверніть нам наші кішки. 

Давайте подивимося на кілька Більш складний приклад. Відпустіть мене в мій каталог Vhost автора, в локальний хост, громадських, і де я покласти вихідний код сьогодні. Все це буде на курси Веб-сайт для вас, щоб возитися с. І якщо я йду в froshims, дозвольте мені відкрити цей файл зараз, froshim0.php. Це одна трохи більш багатослівним, так ми не будемо писати це з нуля. Але тільки помітити тепер кілька кілька знайомі характеристики. 

Один з них, тег форми, різні дії. Це не повний URL. Тепер, це мабуть, файл з ім'ям register0.php тому, що в момент, Я збираюся навчити себе трохи щось про PHP, програмуванні мови, так як PHP може бути використаний для здійснити те, що Google реалізований у вигляді задній частині їх пошуковими системами. 

Google, насправді, ймовірно, використовує деякі Python, деякі C + +, і пучками інших мовах. Але ми, безумовно, може реалізувати пошук результатів за допомогою PHP, якщо ми хотіли. Але поки, ми будемо тримати його проста. І це насправді нагадує одну інших перших сайтів я зроблений років тому. 

Ще у свій час, ти зареєстрований у очної спорту, як на першому курсі з заповнивши папірець, ходьба через двір, і, поклавши його в поштову скриньку в Proctor Wigglesworth, і це було, як ви зареєстрований. І так мій проект незабаром після того, CS50, було поставити, що, що робить ідеальним сенсі на полотно, яке не було як і в моді, то, як зараз. Але все, що нам потрібно було створити, По суті, HTML форми. 

І ця форма виглядала приблизно так. У мене був внесок у Ім'я новачка. У мене був інший прапорець або вони або не хотів бути капітаном, те, що їх стать був і те, що їхній гуртожиток було. І тоді я жорстко в речах як Apley суду і Canaday, Сірі, і так далі. 

Отже, ще раз, нові теги. Давно не бачив їх перш, нове атрибутів, але досить доступним. Як тільки ви бачите, наприклад, ви можете виду з запозичувати цю ідею і зробити падіння меню для більшості нічого. Але те, що ключовим є те, що кожен з ці речі мають імена. А внизу цієї форми, є кнопку відправки, мітку, або цінність, реєстр. 

Так що давайте йти на цю сторінку. Дозвольте мені повернутися в каталогів. Відпустіть мене в froshims, і перейти до froshim0.php. Так що це огидне, щоб бути справедливим. Так що я міг виразно стилізувати цю з деякими CSS, я міг би зробити деякі графіка, може бути, додати деякі кольори, і зробити це гарніше. Але функціонально я б стверджувати, що це насправді досить повно. 

На жаль, коли я заповнюю це, Девід, капітан, Чоловічий, ми виберемо, скажімо Matthews, реєстрації, все, що відбувається це. Але зауважимо пару винос. Один з них, який файл повернулися ті, Результати, мабуть? Так що це, дійсно, register0.php. Той факт, що ми побачили, що дії Значення хвилину тому для register0, це підтверджує, що ми дійсно закінчилася до в той конкретний файл. 

Тепер це просто потворно тексту. Але зверніть увагу, що цей текст є Виходячи з локального хоста, який з пристрою. Подумайте про прилад зараз, як тільки веб-сервер, який може бути в Науковий центр. Це може бути на фактичних веб. Так що це публічно доступні. 

Отже, ясно, є певний спосіб передачі полів форми входу на сервер так що він може щось з ними робити. На жаль, register0 досить безглуздо. Все це робить роздрукувати масив який виглядає наступним чином. І це не масив в сенсі, що ми її знаємо. Виявляється, PHP, і багато мов, не лише чисельно індексовані масиви, Перший індекс нулю, то один, то два, то точка, точка, точка, N мінус 1. 

Це те, що називається асоціативний масив. Асоціативний масив, при якій Ви можете зберігати пар ключ-значення, де ключа не обов'язково є числом. Це насправді може бути рядком, словом. І так що це може бути реалізовано, під капотом, виявляється, використанням структури даних, відомих як? Думка щось драматичне мало статися - хеш-таблицю. 

Так хеш-таблицю, нагадаємо, ті з вас, хто це зробив для P набір 6, або навіть згадати це, принаймні, навіть якщо ви зробили спробу, хеш-таблиці, на наш використанні, були використані для просто зберігати слів. Але насправді, ви зберігали ключів і значень. Якщо ви реалізували хеш-таблицю для P набір 6 словник, ключі були самі слова, а значення були фактично істинними або помилковими. Так, тут, або неявно, Ні, не тут. 

Ну, ми можемо узагальнити цю ідею. І ми могли б використовувати дуже схожі дані Структура зберігати не рядок Сам самотні у вашій хеш-таблиці, але Припустимо, що в кожному з ваших хеш таблиці вузлів. А ви могли б зробити це навіть у спробі , А не просто логічне. Ви могли б щось інше. Що робити, якщо ключ ні Максвелл, для наприклад, але в лапках "ім'я", або лапках "капітан". І всередині З вашої структурі даних, ви ставите значення, а не тільки логічне, але і вартість як в лапках "Давида", або "M" або "Matthews", і так далі. 

Так що ті ж структури даних ми використовували мабуть існують і в інших мовах. І я б стверджувати, що вони насправді багато, набагато простіше отримати доступ тут. Давайте насправді поглянути Зараз у якийсь такий синтаксис. 

Я збираюся піти в каталог PHP. І я збираюся відкрити краще версія привіт-0, ніж раніше. Зверніть увагу, що все, що я робив, було додати деякі коментарі. Отже, ми можемо позбутися цього безумства. 

І ця програма дійсно друкує привіт, бо я вказав між тегів, які я хочу виконати цей код. Тепер ми побачимо в момент чому це корисно. Але давайте відкриємо один приклад тут. Дозвольте мені йти вперед і відкривати сказати, Gedit умов один. 

Це шлях назад в час. Але тиждень тому, я думаю, на тиждень один або два тижні, у нас був приклад називається conditions1.c. І я вирішив реалізувати його в PHP, просто вид підкреслити, що PHP, синтаксично, майже ідентична і C. Це не величезний стрибок з минулого тижня на це. 

Зверніть увагу, у верхній частині цієї програми, яка починається, як і раніше, з деякими коментарі, які Я позбудуся як відволікання. Зауважте, що я перебуваю в PHP Режим в цьому файлі. Так що цей код, ми побачимо, будуть виконані. Зверніть увагу, що є Readline, який, ймовірно, аналог в PHP з GetString. Зверніть увагу, що це трохи різні. Реально задається запит на Функція називається читати лінії, і це що бачить користувач. Таким чином, ви не повинні Е вручну. Але це не має великого значення. Я збираюся зберігати, всередині $ N, повернути значення цього, так що все користувач вводить є їх Int. А ось ще цікавість. Виявляється, в PHP, будь-яка змінна просто повинен мати префікс зі знаком долара. Це трохи дратує. Але зверніть увагу, що я не зробив у PHP. Чого не вистачає в лівій руці боку від знаку рівності? 

Жодної згадки про типу. Так що це відрізняється від C. Для кращого або до гіршого, PHP є вільно типізованих мовах. У нього є цифри. У нього є рядки. У нього є логічні. І у нього є кілька інші типи даних. Але ви, програміст, як правило, не повинні піклуватися про них. Верх цього є те, що він робить це трохи легше програмувати. Ви можете думати трохи менше. Недоліком є ​​те, воно також відкриває вам до потенційних помилок, якщо ви випадково лікування ряду у вигляді рядка, рядок як число, потенційно, але навіть Потім, PHP, і багато мов, досить терпимо. Вони будуть використовувати те, що називається неявній. І якщо ви намагаєтеся використовувати N в контексті числового ситуації, він буде перетворює те, що тут буде рядком, тому що, якщо користувач вводить щось, і ви отримаєте результат, Як і Readline, або отримати рядок, що збирається повертати рядок. 

Але зверніть увагу, пару рядків по тому, я перевірити, якщо N більше нуля. Отже, PHP буде неявно наведено мій "Рядок" 123, або будь-який інший користувач типи, в Int. Коротше кажучи, речі просто працює набагато більше інтуїтивно. Таким чином, тепер починають розслаблятися кілька речі, які ми зробили в минулому. 

Багато цей матеріал те ж, все ж. Все ще рівних рівних. Як у бік PHP також дорівнює дорівнює рівних, але про це, мабуть, в майбутньому. Це було. Опечатка, а два знаки рівності означає те ж саме , Що й раніше, для порівняння. Е означає те ж саме, як раніше. Зворотна коса риса 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. 

І я стверджую, дивлячись на це вихідний код, він збирається так чи інакше пов'язані з електронною поштою. Дозвольте мені йти вперед і відкрити цей у великі вікна, тому ми може побачити його чисто. Ми знаходимося у віртуальних доменів, локальний хост, громадськості, froshims. Я збираюся відкрити іншу Програма, саме так ми Докладніше можна побачити відразу. 

Так що тепер тут, помітити кілька речей. У верхній частині файл відкритий Кронштейн, знак питання, PHP. Тоді є купа коментарів, які ми можемо ігнорувати, є нецікаві на даний момент. 

Тепер є це. Виявляється, PHP має багато коду, який називається вимагають. Це дуже схожі по духу на Сі включають, хеш включають, яка по суті захоплює зміст деяких інший файл і просто шльопає їх тут, так що ви можете їх використовувати. У цьому випадку пристрій має, попередньо встановлено, бібліотека, вільних і бібліотека з відкритим вихідним кодом під назвою PHP поштового, що будь-хто може скачати з інтернету. Ми просто зробили це за вас. А це значить, у мене тепер є електронна пошта функціональність в моєму розпорядженні. 

Отже, зверніть увагу кілька речей. Я збираюся перевірити форми подання. Виявляється, PHP, одна, має оклику балів за межі не оператора, так само, як С. Але PHP також має функцію називається порожнім. 

Порожні просто повертає істину, якщо значення про речі ви передати його в дужках порожній, як користувач не вводьте нічого дюйма Так що це говорить, і зверніть увагу на синтаксис, дуже нагадує C, якщо Назва ключ, так що ім'я поля у формі який був представлений поштою, по користувача, не спорожнити та їх Стать не порожній в тому вигляді, Ну, і їх гуртожитків не порожній - але помітити, що я не дбаю про капітана, те що ми будемо робити? 

Я збираюся виконати цей рядок коду. І ви можете думати про такий як Malloc, але це трохи більш незвичайним, ніж це. Але зараз це дає мені спеціальні Побудуємо типу PHP поштової програми. Але ігнорувати нові ключові слова на сьогоднішній день. 

Тепер я збираюся викликати функцію названу IsSMTP, в якому йдеться, використовуйте SMTP. Це порт 25, як і відео минулого тижня, коли річ кидав повідомлень електронної пошти в брандмауер. Порт 25 SMTP. SMTP означає використання поштового сервера. Який з них, ми можемо використовувати Гарварду SMTP.fas.harvard.edu. 

Ми можемо встановити з адреси бути Джоном Гарварду. Якщо я перейдіть вниз далі, я можу встановити адресу одержувача, просто довільно, щоб бути Джон Гарварду, а також. Так він збирається надсилати електронною поштою самому собі. 

Тепер я можу встановити тему бути реєстрацію. І я можу встановити тілом електронної пошти наступним чином. Ця лінія виглядає трохи більш загадковим, але це тільки тому, що є багато в ній інформації. Один з них, є точка оператора. Хтось повинен знати, що вже Оператор точка робить. Це об'єднання. Так що, якщо ви хочете взяти рядок в PHP, і додати його, або в початок його, інший рядок в PHP, слава Богу, не повинні використовувати StrCopy і Malloc, і все, що більше. 

Якщо ви хочете з'єднати два рядки, хто піклується про пам'ять. Нехай PHP зрозуміти це для вас. PHP Що робитимуть з оператором точка тут просто зробити велику пропозицію з цієї лінії, ця лінія, цю лінію, цю лінію. А тепер повідомлення, це буде для підключення значення. Таким чином, електронної пошти, який Джон Гарвард відбувається отримувати буквально збирався сказати ім'я, товстої кишки, то, швидше, то ми закрити рядок і об'єднати на все, що користувач ввів В, то нова рядок. 

Потім, на наступному рядку Джона Гарварда E-mail, він збирається сказати Капітан, С або нічого. Він скаже статі, чоловік або жінка. Гуртожиток буде Matthews в моєму випадку. І зверніть увагу на те знайоме коми в самому кінці. І потім, тут, зауважте, кілька загадковими до цих пір, але знову ж, після шаблон, який буде більш детально ознайомитися Після безлічі Р 7, при відправці пошти повертає брехня, а потім піти далі і вмирають. 

Отже, PHP є функція, звана вмирають, які, в буквальному сенсі, просто вбиває сайт і просто виводить всі ви сказати, що це - її вмирає словами, так би мовити. І це, у разі, він буде друкувати , Що інформація про помилку для що б не трапилося піти не так. Така довга коротка історія тут, що у нас є приклад, в якому, коли користувач відправляє форму, froshim0, froshims3.php, він йде до register3.php. Але потім переходить register3.php виконати всі з цих ліній. 

Таким чином, є кілька сувенірної брати тут. Один з них, мабуть, це досить легко, програмно, відправляти електронну пошту, і це добре. Коли користувачі зареєструватися на вашому сайті, в цьому випадку, коли вони реєструються для вашого спорту, ви можете по електронній пошті новачка Проктор, або Джон Гарвард, в цьому випадку. 

Але це також означає, що ви можете робити те, що? Надіслати електронну пошту від кого нікому. І це дуже вірно. Це не так легко зробити, якщо Ви звикли використовувати Gmail. Але якщо ви коли-небудь використовували або Eudora Світогляду, ви можете дуже багато чого сказати поштовий сервер, який ви ким ви хочете. І ось тут мені потрібно поставити на цей капелюх і сказати: не роби цього. Але це є свідченням того, наскільки легко це виконати фішингу та відправляти анонімні листи, і спаму, в цілому. І це дійсно зводиться до того, факт, що все, що потрібно деякий програмний доступ. 

Як осторонь, мої найближчі зустрічі з Дошка оголошень, свій рік новачка, було, коли я виявив цей прохолодний трюк, який, нічого собі, ви можете відправляти електронну пошту від кого. І так у нас були деякі дурні Аргумент, буквально, в Matthews, Серед моїх Проктор групи. Я навіть не пам'ятаю, чому була проблема. Але я хотів, щоб спробувати покласти кінець цієї дурної дискусії. 

Так що я вирішив, що мені буде просто відправити електронною поштою до моєї групи Проктор, прикидаючись Інший хлопець, з думкою яких я не згоден, і мати його погодитися на все, що моя думка була в даного обговорення. І тому я кованих це повідомлення, вказавши Техніка схожі по духу на це. Але це було насправді простіше в той час. Натисніть відправити. Він не був задоволений, і при цьому були Дошка оголошень. 

І я був дуже швидко спіймали в секунд, тому що, як ви знаєте, я підписую мої електронні листи, в певному сенсі. І хоча я робити це вручну, у великих частини, через 15 років, тому що я був травмовано цим. У мене немає підпису на мою електронну пошту зараз. Але в 1995 році у мене просто було SIG, підпис в мою електронну пошту. Так з'явилася ця записку: Дорогий Проктор групі, я погодитися моя думка і погодитися з Давидом, так і підписані Отже, нова лінія, нова лінія, DJM. 

Так що не робіть цього чи, загалом, прийняти Перевага цього методу. Але при створенні веб-сайту, як, ваш остаточний проект, при прийнятті сайт щось підприємницької, Ось як, прагматично, ви можете залучати інші послуги в Інтернеті , Такі як пошта, а потім фактично відправити речі за допомогою коду. 

Так як ми можемо покращити це? Ну, по-перше, давайте короткий огляд деякі з речей, які ви побачите, , А потім погляньте на Кілька прикладів. Так що, щоб заспокоїти, тому що ми летимо через PHP. І я знаю, в якийсь момент, ви будете мати насправді почати писати це, якщо ви ще не зробили. Зрозумійте, що, один, основний добрий з з вікна з PHP. Якщо ви хочете написати код, який отримує виконаний, Ви просто почати писати його в файл з ім'ям. PHP тих пір, поки у вас є відкриває дужка Знак питання PHP тега. 

Але зверніть увагу, це умови в PHP. Зверніть увагу, це точно такий же слайд ми мали на один тиждень, коли у нас були В умовах C. Умови в PHP структурно і синтаксично те ж саме. Єдина відмінність в тому, якщо у вас є змінних факторів, у вас є такі знаки долара. 

Тим часом, логічні вирази виглядають так само, як це протягом або-або і Ing-Ing разом. Перемикачі виглядати точно так само. Що приємно в PHP, тоді як в C, перемикачі повинні бути справи за примітиви, як цілі або символи в PHP Ваші висловлювання випадку дійсно може бути на цілі рядки, яка насправді почасти добре. Заощаджує ваш час. Не міг зробити цього C. 

Ось цикл в PHP. Він ідентичний. Можливо, деякі знаки долара змінних. Ви не повинні відзначити, що щось Int. Ви просто оголосити його зі знаком долара і ім'я змінної. Але для циклу те ж саме. Час циклу те ж саме. Робити під час циклу залишався незмінним. 

Це трохи інше. Так що з PHP, з масивом, можна статично оголосити масив, як і в C, але ви використовуєте квадратні дужки. У C, ви повинні використовувати фігурні дужки, Якщо ви навіть не знали, що. Але це насправді дуже поширена в PHP оголосити масив, в даному випадку, номерів і викличте номери змінних. 

Самі змінні виглядати наступним чином. Ось рядок, в лапках "привіт світі ". Ви могли б зворотну косу риску N. Я просто не в цьому випадку. 

Тепер це цікава конструкція. C не має цього. Але це супер корисно. І ви побачите це в наборі 7 P специфікації - для кожної конструкції. Якщо ви хочете повторити над усіма елементи масиву, вам не доведеться мати справу з $ I $ і N, і + +, і все таке. Ви можете буквально скажімо, в PHP, це - Для кожного числа як числа, так що Я припускаю, що $ номерами є масив чисел. І коли я кажу для кожного номера як номер, це буде автоматично, як мій цикл виконується, оновлення, на кожній ітерації значення Усередині долара знак номера - знову, і знову, і знову ходьба для мене за цей масив. Так що він просто рятує нас коду. Немає коми, немає + + 'с, не I, N ні, це не просто приємно. 

Але PHP також має цю. І це супер потужний. І ви будете використовувати це, руки на, в P встановлено 7. І асоціативний масив також оголошений в квадратні дужки. Але зверніть увагу на синтаксис зараз. Це нагадує те, що ми бачили print_r з хвилину тому. Скільки клавіш, а трохи перевіркою на осудність, ця масиву, здається, є. 

Так воно має два. І я називаю це масив. Але якщо це допоможе, ви можете думати про це, як хеш-таблиці або у вигляді асоціативний масив. Але це просто інший тип масиву. І знову ж, різні мови Тобто ці. Ми побачимо щось подібне У JavaScript, а також. Там дві клавіші. Одним з них є в лапках, "символ", один лапках «ціна». І ці ключі кожен має значення. У цьому випадку значення символу є FB, для Значення facebook, і ціна становить 49, 26, який був зі Facebook, ціна на сьогоднішній ранок. 

Так що ж таке корисне про асоціативний масив. Я, можливо, була чисельно індексований масив за допомогою всього прості квадратні дужки. І я, можливо, був знайомий долара цитата одно саме це. Дозвольте мені це зробити. Припустимо, що я замість цього просто оголосили цей масив подібного. Це цілком припустимо, синтаксично. Це не призводить до втрати інформації, такої. Я все ще бачу, що символ є FB, і що ціна 49, 26. Так чому ж асоціативним масивів переконливим? 

Зали: Ви не повинні пам'ятати, де ви поклали речі. 

Виступаючий 1: Точно, у вас немає щоб згадати, де ви поклали речі. Ви не повинні довільно запам'ятати що символ акції знаходиться в кронштейні нулю, і ціни на акції знаходиться в одному кронштейні, що особливо небезпечно, якщо ви змінити стан речей, в кінці кінців. Це набагато приємніше асоціювати що ми будемо називати метаданими з фактичними даними. Я б стверджувати, що те, що ми дійсно дбаємо про ось і FB 49, 26. Символ і ціна метаданих яка описує дані, які ми насправді хвилює. Але це тільки так легше отримати доступ. 

Тепер, як осторонь те, що ціну ми платимо? Ми робили це в CS50 протягом багатьох тижнів. Ця функція повинна прийти в деяких витрат. Пам'яті. Значить, ви не просто зберігати 32-бітові ціле, наприклад. Ви зберігаєте символ / 0, напевно. Так ви використовуєте більше пам'яті. 

І те, що продуктивність шукає щось у асоціативний масив, напевно? Це, ймовірно, повільніше. Довільний доступ гарний, особливо коли ви можете зробити бінарний пошук. Але якщо ви насправді зараз не шукає для чисел, але для рядків, це дійсно реалізується під капот, ймовірно, в хеш-таблиці, де Ви використовували або хеш-таблиці з окремою ланцюжка. Або ви використовуєте намагаються насправді зберігання значень. Тому, можливо, ви можете зробити постійним часом, але Ви все ще повинні дивитися на S-Y-М-В-О-L, потенційно, а не тільки 32 Біти шукати щось. Отже, ще раз, ті ж ідеї найближчі Резервне повторюватися в цьому контексті. 

Але, знову ж, PHP тепер має деякі супер глобальні, що, виявляється, є асоціативні масиви. Ми бачили одну хвилину назад, $ _POST. І це супер глобального має ключів і значень. Зокрема, клавіші вибудовуватися з чим? Де ключі в $ _POST взялося? Просто, щоб резюмувати? 

АУДИТОРІЯ: Ім'я. 

Виступаючий 1: Ім'я, де? 

АУДИТОРІЯ: [нерозбірливо] 

Виступаючий 1: Ім'я є атрибутом. Ну де, де вони спочатку взялося? Формі. Так що, якщо HTML сторінці тега форми, всередині якого знаходяться кілька входів, як прапорці, текстові поля, що випадають меню, кожне з яких має назву, ці імена в кінцевому підсумку в якості ключів в $ _POST, і, чесно кажучи, в цьому відношенні, $ _GET. Якщо метод GET, тієї ж ідеї. Це просто в іншому супер глобальним. І значення, звичайно, виходити від все, що користувач вводить в його або її браузером. 

Але є декілька інших. Там у печива, які ми повернутися в кінці кінців. Але ті речі, які ви знаєте, Веб використовує для деяких добро чи зло. Але ми ще повернемося до цього. Сервер та сесії, і ці два є спеціальна утиліта. 

Але давайте поглянемо на це. Дозвольте мені йти вперед і відкривати приклад Так звані mvc0.php MVC означає наступне. І введемо це раніше, ніж типові, насправді, щоб ви проектуванні Архів завдань 7, а також остаточні проекти, У роду промисловості стандартним способом, і чистим способом. Це хороший дизайн. 

Таким чином, ви зараз побачите, і ви будете досвіду, в наборі 7 P, парадигма, отсортируйте програмування мислення, який виглядає трохи щось на зразок цього. Для моделі M, C для контролера, V для перегляду. Коротше кажучи, MVC є тільки частково методології, спосіб зробити веб-сайтів, зокрема, в якому ви поставити всі свої, дурні фрази - бізнес-логіка - всі ваші інтелектуальної власності в те, що називається контролером, файл як index.php, або ми побачимо, quote.php або buy.php. 

У контексті проблеми набору 7, ваш моделі зазвичай містять дані, все, що пов'язано з базою даних, як буде в кінцевому рахунку бачити, і ваші погляди несуть в собі естетику вашого сайту, HTML, CSS. Таким чином, ми вже бачили це в C трохи біт за допомогою. год файлів. Ми дійсно бачили його кілька хвилин тому з CSS, з факторингу стилізації CSS речі з наших HTML. 

Так MVC дійсно тільки про малювання лінії на піску і сказати, цікавий програмний код для Вашого сайт належить в тому, що ми будемо називати контролера. Речі, пов'язані з базою даних зазвичай закінчується в моделі. Але ви побачите, в Архів завдань 7, злиття C і M, щоб зберегти його простим. Але вигляд, де всі ваші HTML та естетики зазвичай проходять. 

Так що ж це означає в реальному вираженні? Ну, дозвольте мені піти в наш MVC каталог наступним чином. І ви будете бачити більше цих об'їздив в специфікації. Таким чином, в mvc0, я стверджую, що це, начебто, версія 0 сайтів CS50 автора. 

Все у нас є деякі HTML, як і велика теги h1, мабуть. А потім маркованого списку. Я ніколи не бачив маркований список раніше, але не склало великої праці. Давайте швидко подивимося на вихідний код. Виявляється невпорядкований список з кулями відкритий вул кронштейн з одним або більш елементів списку, Лі. Так Вказівка ​​Тут тега прив'язки. Ми бачили, що кілька хвилин тому. 

Так що це, як я реалізував цій сторінці. У мене є два посилання, два елементи списку, один уль для невпорядкований список, а кінець Результат, естетично, це дуже досить сайту, версія 0 тут. Але що цікаво, в тому, як це реалізується під капотом. 

Відпустіть мене в Gedit і відкрити цю найпершому прикладі, щоб намалювати картину. І ми будемо дивитися на те, що недоліки, потенційно, тут. Тепер, якщо я йду в локальний, громадських, MVC, помітити кілька файлів. Я буду називати ці, для момент всі контролери. Але це небагато, бо про порушення Ви побачите все в змішаному всередині них. 

І відпустив мене всередині index.php. І ми бачимо, в буквальному сенсі, те ж HTML. Тому, навіть якщо цей файл закінчується . PHP, це не означає, що він повинен є PHP коду. Це може бути просто сирої HTML, хоча це нерозумно. Але зверніть увагу, немає відкриває дужки PHP тегів, за винятком цієї, яка, чесно кажучи, тільки там, щоб служити в якості коментаря. Але це не функціонально навіть те, що цікаво. 

Але помітити це. Що цікаво, про те, який зміни на цій сторінці. Дозвольте мені натисніть лекцій. І зверніть увагу на URL ось-ось зміниться. Тепер я в lectures.php. Дозвольте мені натисніть нуля. Тепер я в week0.php А тепер мені відкрити ці файли в Gedit. Не тільки індекс, але нехай мені відкрити лекцій. І дозвольте мені позбавитися від коментарів зосередити увагу на цій частині тільки. 

А тепер дозвольте мені відкрити ще один, week0.php, викинути коментарі, просто очистити це. А тепер зверніть увагу на наступне. Мислення дійсно роду ретельно про дизайн, і давайте зробимо це лінія на те ж саме, що може бути зроблено краще тут, як ви думаєте? 

Як я зробив один тиждень? Як щодо цього. Так от як я зробив один тиждень. Я підійшов до File, New, Вставити, Зберегти, week1.php, а потім я пішов сюди. І я змінив один - що це був за, один по п'ятницю. Я змінив нулі до одного. Я змінив це одному. 

Отже, тепер подивіться на мої файли. Що можна було б зробити по-іншому? Де можливість, чи що? Таким чином, є можливість почати факторинг цей матеріал. Дозвольте мені відкрити, як спойлер, для те, що ви побачите в безліч Р 7. Якщо я відкриваю, в даний час, у версії index.php п'ять з цього, це виглядає шлях більш загадкового, за загальним визнанням. 

Але це, в даний час, є те, що я подзвоню контролер, який з контролю за Логіка моя сторінка. І ви можете реконструювати вигляд, Інтуїтивно, мабуть, те, що відбувається. На першій лінії, це трохи загадковим. Але зауважте, я вимагають, як з різке включають, файл з ім'ям helpers.php. І тоді я дзвоню, мабуть, функції, званої візуалізації, передаючи два аргументи. 

Одним з них є лапках, заголовка. А інший, який Тип даних цього, на основі на нашому синтаксисі раніше? Це асоціативний масив. Зокрема, це проходить у назві з деякими метаданими, який нагадує мені, що це і його значення. Потім я бачу жорстко UL, тому деякі сирі HTML. Але тоді я повернувся в режим PHP виклику функції візуалізації. Так що навіть якщо ви ніколи не використовували HTML або PHP раніше, і навіть якщо це виглядає страшніше, чому це, ймовірно, кращий дизайн? Що може бути краще про це, на основі висновків? 

АУДИТОРІЯ: [нерозбірливо] 

Виступаючий 1: менш виражені, що в немає більше HTML тегів, не більше керівники тегів, не більше тіла тега У кожен проклятий файл. Замість цього, у мене винесена спільнот і, імовірно, покласти їх у файл або інакше пов'язані до заголовка. І те ж саме для близьких тіла Тег, тісний HTML тегів. Це, напевно, тут всередині нижнього колонтитула десь. І ви побачите, в Архів завдань 7, невеликий тур через це. 

Отже, що чекає попереду? Єдине, у нас немає можливості все ж для є зберігання даних. І так, що ми починаємо бачити Середовищі, наприклад, в тому, що ваш Старий друг Excel, або цифри, дозволяє зберігати велику кількість дані в рядки і стовпці. Виявляється, що ви можете зробити це в те, що називається базою даних, програмними засобами. маніакально І виявляється, після цього, ми будемо мати можливість зберігати речі, як це, що ви будете бачити знову в комплекті P 7, цілу купу імен користувачів і паролі, останній з яких насправді зашифрований, так само, як вони були в хакером видання P набір 2 в. І врешті-решт, ви будете здійснити це, власний ETRADE-сайт, який, як реалізує колективно CS50 фінансів. 

І нарешті, оскільки Ви тут зупинялися так пізно Сьогодні, якщо ви повернетеся до цієї частини кампуса, в 4:00 вечора сьогодні, ми будемо дати вам не тільки радою, в SCES Консультування ярмарок, в 4:00 вечора в Максвелла-Дворкін, ми дамо вам деякі Americone Мрія, Cherry Garcia, Шоколад Fudge Brownie, Шоколад Chip Cookie тісто, і, коли ви Google Кремезний Мавпа, ви отримаєте це. Так що все, що чекає в 4:00 PM У Максвелла-Дворкін. Побачимося в середу, а також. 

Доповідач 2: Наступного CS50, RJ спить дюйма 

RJ: Мій профіль! Ха! О,