>> [音樂播放]
>> DAVID J.馬蘭：你好。
讓我們通過散步 習題集8混搭，
這是要你來挑戰 借鑒了谷歌地圖的元素
從谷歌新聞和混搭元素 它們連成一個網絡小程序
允許用戶搜索 地圖的本地新聞
具體的城市， 城市和郵政編碼。
要做到這一點，我們要 集成一些HTML，CSS，PHP，SQL，
JavaScript和技術 一般被稱為AJAX為了
創造這種身臨其境 的用戶體驗。
>> 讓我們先為谷歌地圖本身。
當然，這是可能 熟悉的界面。
但事實證明，谷歌地圖 還提供了一個API--應用
通過該編程interface-- 你可以把谷歌地圖的元素
並整合成 你自己的應用程序。
事實上，在本 過程中，你會
找到一對夫婦的URL 特別有幫助的
中提到的 規範習題集8，
特別是本入門指南 引導或開發人員指南
谷歌地圖API版本3，以及 作為谷歌地圖的JavaScript API
v3的參考，這是一個 多一點神秘閱讀
但實際上所有的較低水平 什麼函數或方法的細節
和對象和屬性，並 事件實際上都與API，
在精神上非常相似 為[聽不清]頁。
>> 現在，如果我們一起來看看 在谷歌新聞，你會
也許是看到了一個熟悉的界面在這裡。
但事實證明，你也可以搜索 谷歌新聞的具體地域
通過所謂地緣的HTTP參數。
事實上，如果我放大 在這裡，你會看到，
我在 news.google.com/news/section?geo=02138。
而且，事實上，如果我放大 出來，你會看到我
看一個頁面一大堆 意見劍橋，馬薩諸塞州。
>> 同時，如果我真的改變 URL不會是這樣一個郵政編碼，
但東西有點混亂 像劍橋，馬薩諸塞州+，
其中，加為你的方式編碼 在URL空格字符並按下回車鍵，
你會看到我居然 看到幾乎相同的消息。
也許這是一個有點不同 因為實際上劍橋
有多個郵政編碼。
現在我怎麼會知道，和， 其實，我怎麼會莫名其妙地
配合城鎮 在情況下，我郵政編碼
希望允許用戶 查找要么？
那麼，事實證明，有 一個網站在那裡被稱為
geonames.org這是 倡議有
一個可以自由使用所有的數據庫 各種地理信息，
不僅對美國，而且還 對於其他國家也是如此。
事實上，如果我去這個網址在這裡，這 在問題設置也提到
規範中，你會看到它3 一大堆的zip文件的清單
其中任何一個都可以被你下載。
事實上，對於這個問題集 你要下載us.zip。
現在這個文件中，是一個整體 一堆文本格式的數據。
這些文件是非常相似的一個 CSV--逗號分隔值file--
但它實際上使用 標籤來界定領域。
現在，同時，如果你看 在這裡我所強調的，
在這個文件中的字段會 要的東西像國家代碼，
郵遞區號，地名， 然後，以某種形式
或其他，州，縣， 社區，和更多。
事實上，我已經 預先下載該文件。
讓我繼續前進，這裡 - 打開 us.text--，而事實上，你會
看看我向下滾動到行16792 你會看到幾條記錄劍橋，
馬薩諸塞州和它的各種郵政編碼。
你也看到了有縣， 我真的不一些數字
明白，但也都 右側的方式，
一些GPS coordinates-- 緯度和經度。
這是偉大的，因為一個 谷歌地圖API的功能
是能夠檢測 你在哪裡地理
在GPS坐標的條款。
>> 現在，讓我們開始弄清楚如何 啟動捆綁這些東西放在一起。
我們已經給你一個整體 一堆分佈代碼，
以及MySQL數據庫。
事實上，如果我拉一個phpMyAdmin的有 已經進口的，因為你很快就會，
pset8.SQL，你會看到一個MySQL表 看起來是這樣的，一個ID字段，國家
代碼，郵政編碼，地名等。
所有這些類型 列我只是推導
通過閱讀中的readme.txt 在此文件中指定的
一個字段是否是整數， 或varchar等。
>> 因此，我們已經創建了一個表 你給你的SQL命令
執行創建 表中您自己的數據庫，
但實際上它暫無數據。
相反，你將不得不 下載us.zip或任何國家的拉鍊
從URL有文件。
然後你將不得不寫 在PHP命令行腳本的
要打開該文本 文件，遍歷其行，
然後對每個 這些行執行插入
到那個地方的表 在你的MySQL數據庫。
所以在這個過程結束時，你會 已運行該腳本最終
只有一次在理論上。
在現實中，你可能會 運行一堆倍
同時試圖修復各種錯誤。
>> 最終，你將有一個 成千上萬的真正的大數據庫
和數以千計的地域行。
然後，你要放的進口 腳本放在一邊，一旦它的工作
和你的數據庫是好的 和正確，然後
你要進入到實際 實現混搭本身。
混搭是要去看看 有點像這樣。
在mashup.cs50.net，我們 有一個工作人員的解決方案
這看起來有點像這樣。
事實上，如果我點擊這個報紙 劍橋，馬薩諸塞州圖標，
你會看到一個旋轉 簡要然後圖標
有序列表，一個 文章項目符號列表
與劍橋，馬薩諸塞州。
如果我點擊查爾斯頓， 馬薩諸塞州，
我會看到相同的那個小鎮。
而且如果我點擊 水城，馬薩諸塞州，
可能沒有任何 從水城的消息，
所以你會看到什麼 像慢消息的一天。
>> 現在，同時，在左上角是 一些熟悉的谷歌地圖控件
讓你縮小，平移 上，下，左，右，
也說明我們把有一個搜索框。
所以，如果我搜索，坦率地說， 唯一的其他郵政編碼，我知道，
90210，我們將真正看到 加利福尼亞州貝弗利山莊。
當點擊它使我 加利福尼亞州和一大堆
約比佛利山莊的消息。
現在注意，也那裡發生了什麼。
如果我這個時候搜索02138甚至 劍橋馬薩諸塞州逗號或某些
變體，你會得到一個 小自動完成下拉。
現在，這是使用插件 一個名為jQuery庫，
而該插件被稱為預輸入。
我們簡單地通讀 該文件，
下載的js文件整合 入分配代碼，這樣你
最終可以編寫代碼， 填補了下拉菜單，自動
選擇或自動建議。
>> 現在分配碼，雖然， 您收到沒有做幾乎一樣多。
你得到了谷歌地圖嵌入和 你左上角的控制，
你得到的搜索框。
但是，如果我鍵入類似 02138，沒有地方都沒有發現。
所以這將是 一個在這裡我們的目標。
此外，如果你走一步 回頭看看地圖本身，
沒有任何消息。
即使我點擊 拖動，沒有標記實際上
出現了因為新聞 挑戰是留給你。
>> 讓我們一起來看看，然後 在分配代碼。
一旦你下載了 pset8.zip並解壓縮它
到您的虛擬主機目錄 在CS50電器，
你會看到這些 目錄裡面這裡。
Bin--一般代表 二進制可執行programs--
包括，如在pset7，一些PHP 文件，其他文件包括，
那麼大眾，這是 該所需要的文件
要公開訪問 以使用瀏覽器的用戶。
讓我們在看看 bin目錄，我們將
看到有一個文件 已經有所謂的進口。
如果我們打開這個用gedit，我們拭目以待 ，不幸的是，沒有太多
那裡。
所有這一切是存在的，但是， 是一個家當頂部
指定哪個 interpreter--在這種情況下PHP--
應該用於實際 執行此文件。
但它說： TODO就是你
將需要編寫一些代碼 這可能需要配置
文件，該文件中包含的目錄 因為我們之前與PHP文件來完成。
然後你要 必須以某種方式打開
us.text你大概 已經拉開。
那麼你將不得不 遍歷該文件中的行，
也許使用的一些功能 在本說明書中建議的。
然後將每個那些 行到MySQL數據庫
通過使用查詢功能，其中 我們再假設您with--
或者至少一個變體 其在functions.php中，
我們將在短短的一瞬間看到的。
>> 現在，讓我們關閉進口和回 我們的目錄，這個時候進入
包括。
如果我做的LS那裡，你會看到 三個文件很喜歡習題集7。
讓我們快速瀏覽一下， 例如，在config.php中。
在那裡，是較少的線路 比以前，它
看來這個文件包括 constants.php和的functions.php。
我們使用略有不同 技術這陣子實際
指定這些文件是相對的 到當前目錄__ DIR__
代表任何目錄本 文件的config.php，本身英寸
因此，這是一個比較 規定明確的方式
你想要的其他文件要求。
>> 現在，如果我關閉這個文件， 開拓constants.php相反，
你會看到一個文件，很容易讓人想起 以習題集7的為好，儘管
使用不同的數據庫名為pset8。
最後，在functions.php中， 我們看到的只是一個功能
這段時間稱為查詢。
這幾乎是相同的，除非我們處理 周圍的一點點錯誤，這個時候
不同的，但它的用法是 同樣在問題設置7。
>> 現在，讓我們回到我們的pset8 目錄下，進入公眾，並在那裡
如果我做的LS，你會看到this-- articles.php，index.html的，search.php中，
和update.php--所有文件。
然後的CSS字體，IMG和 JS目錄很喜歡pset7。
>> 讓我們來看看 index.html的，這是
要真正的 入口點smashup。
現在的index.html，你會看到一個整體 一堆頭部鏈接的元素，
具體地說，引導我們自己 CSS後面一大堆劇本
標籤之類的地圖，API 本身，一個特殊的標誌與標籤
我們在提到公用事業 規範提供給您，
jQuery的本身，引導 本身，而另一個庫
所謂的下劃線其中 我們談論的規範。
喜歡的jquery.js Underscore.js 是一個JavaScript庫
有一大堆的功能 有很多人在世界上的心願
存在於JavaScript的本身。
因此，所有的這些都 其實也挺受歡迎。
我們也提到預輸入 這是庫
這是否自動完成下拉和 最後一個鏈接到我們自己的JavaScript。
>> 同時，也許 值得慶幸的是，這種混搭
由相對較少的驅動 HTML這兒底部。
我們已經指定一個div公告 我們的身體類容器的液體。
這一點，每個引導的 文檔，只需
意味著該格將要填充 視口或瀏覽器窗口充分。
>> 與此同時，下面我們有一個div 這是打開和立即關閉
地圖畫布的唯一ID。
現在，這是谷歌 地圖文檔
它的API，因此我只需要 有一個空的div到其中注入，
最終，一個實際的谷歌地圖。
但更多的是在短短位。
>> 最後，還有一個表 這裡裡面它
實現文本框起來左上 在我們的界面進行搜索。
請注意，我們使用 有點自舉
這裡too--之類的東西 表單內聯和形式的組。
我們已經給前 形式獨特的ID。
然後，最終，我居然有 輸入類型，這是非常熟悉的，
其ID為q。
只是一個約定。
Q為query--可以有 被稱為什麼。
然後佔位符， 同時，在城市，州，
和郵政編碼，你可能還記得 看到我們的混搭演示更早。
讓我們關閉這個文件。
>> 現在就來看看PHP文件 等待，然後JavaScript文件。
在我們的PHP文件，我們已經 已經實施了您，
例如，更新。
Update.php--我們不會花大 時間簡而言之上這裡 - 量
是文件，我們的 JavaScript代碼是要
通過AJAX聯繫該 異步技術，是
內置的JavaScript，這些天來的 將允許我們問update.php
了解更多信息。
>> 具體來說，隨時隨地 用戶拖動地圖
或執行搜索，搜索跳轉 用戶到另一個位置，
我們的JavaScript代碼， 因為我們很快就會看到，是
要調用update.php 並要求10個左右的標記
視基於內 上的全球定位系統坐標
頂部和底部的 該地圖的角落。
那麼我們就可以重新填充地圖現在 在用戶已經移動，以便在屏幕
看到大概10新 標記不同的城市。
同時，該文件是最終 要執行一個SQL查詢
對我們的數據庫 表稱為地方，
即將返回的 10個或更少的位置。
>> 同時，在articles.php，是另一種 文件中，我們已經寫的全部內容。
它是在精神非常相似 習題集7的查找，
其中接觸雅虎財經為您服務。
此文件聯繫人谷歌新聞 對你來說，最終抓
機器可讀 version--的東西
所謂的新聞RSS format-- 劍橋或比佛利山莊
或任何城鎮您搜索 基於該geoparameter。
我們分析了RSS，這僅僅是一個 的標記語言類型稱為XML，
然後我們實際上 它返回到瀏覽器
和你的JavaScript代碼， 具體而言，在一種格式稱為
JSON，JavaScript對象符號。
現在你可以在看 specification--我們點你
你怎麼能真正看到 一些JSON到來back--的
這個功能最終 讓你填充這些彈出式菜單，以便
當你點擊 在地圖上的標記
你真正看到一大堆 子彈，其每一個
鏈接的文章。
>> 現在，讓我們來看看最後一個 PHP文件，其中，幸運的是，不
有很多事情要做on-- 只是一個相當大的TODO。
現在這個文件聲明 數組稱為地方。
然後最終打印 在JSON format--數組
漂亮的印刷，它只是使 事情更容易調試。
不幸的是，在 中間還有這個TODO，
這就要求你搜索 數據庫匹配名額地理HTTP
參數。
>> 而且，事實上，這將 是你challenges--之一
在這裡實現這個功能 所以，當你聯繫這個文件
如搜索的URL。 PHP的？地緣=東西， 你的代碼最終會返回一個JSON
在所有的地方陣列您 匹配輸入該數據庫表。
因此，如果在劍橋的用戶類型， 在這裡你的文件的search.php
最終應返回一個JSON數組 所有劍橋的比賽，
這可能是在馬薩諸塞州 但也可以是甚至其他地方。
>> 最後，讓我們來看看兩款 這是靜態的ultimately--文件
你的CSS文件，你的JavaScript文件。
如果我進入我們的CSS目錄， 還有一大堆的文件存在，
但他們大多是圖書館。
我要去看看， 具體地說，在styles.css的，
這是我們自己的全球CSS那 將風格化這整個混搭。
我將它留給你通讀 在本文的評論，但是，概括地說，
這是確保的CSS我們 混搭，默認情況下開箱，
看起來正是我們想要它 - 的方式 與地圖填充視圖端口
和與搜索 框在頂部左邊。
我們還採取了自由 風格化的預輸入下拉
菜單一點點為好。
>> 最重要的文件 也許是這個問題集
這是最後一個，scripts.js。
在你的JS目錄 甚至更多的文件。
所有這些都是庫文件 除了這一個，scripts.js。
如果我們打開這個了，讓我們把我們的 通過功能決賽之旅，
內置到該文件 為您和您注意
為今後的待辦事項。
>> 在該文件的頂部， 三個全局變量。
一個用於在地圖中，這是會 做個參考我們的谷歌地圖。
你可以把它想像 排序為指針。
同時，我們有 另一個全局變量
叫信息，這似乎是 存儲調用的返回值
新google.maps.InfoWindow。
JavaScript的支持對象，其中 在精神上非常類似Struts的。
什麼這行 我們的目的是做
創造了一種新的信息 在存儲器中，然後窗口
圍繞保持一個參考 其在一個叫做信息的變量。
在那些之間， 同時，就是出現
是一個空的JavaScript 陣列稱為標記。
所有這些報紙的圖標，或者你 完全可以選擇其他圖標，
將要被存儲 最終在這個陣列
這樣我們就可以很方便地添加到 地圖，從地圖中刪除。
>> 現在，讓我們向下滾動 一點點，高手
通過代碼將是 一旦執行，因為DOM或文檔
對象模型或 本身頁面已準備就緒。
回想一下，這個語法 這裡只是簡單規定
下面的代碼 應該只被執行
當瀏覽器已完成 加載一切。
>> 我們首先聲明 一大堆的風格，
這結束了風格化 地圖按規範。
然後，我們聲明 一大堆的選項，
這進一步定制谷歌 圖，我們即將嵌入。
然後，我們用一點jQuery代碼， 這是在一個更詳細一點解釋
在規範，搶 該元素，地圖帆布
我們因此唯一標識。
然後這條線在這裡 什麼似乎奇蹟般地給我們
一個谷歌地圖裡面 我們自己的應用程序，
存儲於其上的參考 在該變量稱為地圖。
>> 最後，到這裡我們註冊 什麼叫做監聽器。
想back--方式，方法 back--零一周CS50
當我們看著划痕和 通過散步支持
通過對東西叫做 事件和廣播。
你可能沒有使用 它自己，但它的
一種機制，使一個 瀏覽器在這種情況下
能夠吸引我們的注意力時，它的 準備去實際執行一些代碼。
在這種情況下，它會聽 在地圖名為空閒的事件。
這意味著該瀏覽器具有 裝完了谷歌地圖。
在這一點上稱為函數 配置最終應
被執行。
該功能，配置， 我們會看到，寫的是我們。
>> 現在，到這裡是一個函數 ，不幸的是，
僅僅是一個TODO添加標記。
每規範。你將需要 實際上是寫代碼
增加了一個marker--是否看起來 像報紙或圖釘，
什麼else--到谷歌地圖。
現在這裡是功能 所謂的配置。
我將它留給你閱讀 通過對此進行了更詳細地說，
但要意識到我們增加 一堆更多的聽眾
這樣我們就可以在執行代碼 用戶點擊和拖動地圖。
我們也有代碼，在這裡 初始化的預輸入插件
使下拉 菜單實際工作。
>> 但是，讓我們只關注一個 這裡幾個地方。
具體來說，這在這裡做。
我會推遲到網上 文件和本說明書
對於如何填補這個TODO。
但是，簡單地說，這個庫 預輸入允許你傳遞
在什麼通常已知為模板， 其中有一些變量佔位符
非常類似於在精神上的printf的％。* S。
但在這種情況下，該 按照規範的模板
允許您指定 你想要什麼變數
從該公司的數據來注入 從類似的PHP回
你寫的文件 被發射JSON輸出。
>> 現在，到這裡認識到我們是 監聽預輸入選擇
當用戶實際進行 搜索並選擇一個值。
這就是我們實際上是 要偵聽
並執行一些代碼作為一個結果。
然後我們繼續配置 混搭只是一點點。
而且，最終，我們稱之為 此功能更新。
它更新在屏幕上的標記。
更多關於在短短的時刻。
同時，有幾個 小功能在這裡。
其中之一是hideInfo其中 簡單地關閉信息窗口。
另一項功能在這裡，最終 不會太久，刪除標記。
這是怎麼回事撤消什麼 您添加標記功能一樣。
再往下這裡是搜索。
而這一次很有趣，因為我們 寫的JavaScript代碼是
要談的search.php上 服務器，並取回了一些回應。
>> 你，當然，還是會 需要實現search.php中，
但是，我們已經實現了 JavaScript代碼那
將要處理實際執行 搜索從文本框。
具體地，通知 這個函數在這裡，
搜索，並調用的search.php 由稱為方法
獲得JSON，我們在看到講座。
這裡的語法 有一點不同
從講座中，我們正在使用 jQuery的所謂承諾的接口。
更多關於在規格。
這只是意味著我們的 目的現在有
有兩個特殊功能我們 需要用點符號調用
在此之後，立即調用得到JSON。
一個被稱為完成。
一個被稱為失敗。
你可以認為這些 作為成功的處理程序
和故障處理程序只 在出錯的時候。
>> 現在，讓我們來看看最後的 情侶在此文件中的函數。
到這裡是一個函數 所謂showInfo，這
示出了其中的一個信息 小信息窗口的
彈出當用戶點擊一個標記。
這兒是進一步 該更新功能
我們已經實現了你。
它確定地圖的邊界。
什麼是GPS坐標的 東北和西南地區在這裡角落。
我們已經準備了一些HDP參數 這裡，然後通過他們的最終
到update.php，我們已經 還實施了你。
最終回來一些JSON 從文件名為update.php
然後刪除任何 在屏幕上標記
然後遍歷 這是回來的數據
來自update.php，這 又僅僅是一個JSON陣列。
然後將其最終增加了一個標記 每個那些地方，處理故障
或錯誤，這很可能會發生。
>> 現在只給你如何的味道 可能去調試這個項目，
意識到我已經打開 在此推動這一標籤這個URL，
pset8 / articles.php？GEO = 02138。
現在，再次，有關文章 PHP，我們實施了您
所以這是沒有這麼多 你會用什麼
調試，而是技術。
請注意，我搜索了 在這裡劍橋的郵政編碼，
我已經得到了回來，事實上，一個JSON 這裡面的JSON對象數組
兩個keys--鏈接和標題。
>> 所以這個功能 工作已經給你。
但是手動的這種技術會 像這樣的東西一個URL像
sea​​rch.php中？地緣=劍橋或02138或 無論用戶已鍵入的應
證明是非常寶貴的，你，你自己，嘗試 要弄清楚到底是否為什麼
sea​​rch.php中工作正常與否。
>> 最後的話，你有 一些待辦事項在你前面。
你會第一工具 即進口腳本
讀取us.text到你的數據庫。
你那麼將需要 實施的search.php
因此，它的行為完全為指定。
你那麼會想 把重點放在scripts.js
最終實現 這些夫婦待辦事項，
包括配置 而該模板，
添加標記，刪除標記，並 那麼最後，但並非最不重要的一
個人風格。
>> 一旦你有你的工作混搭 很喜歡我們的目標在眼前
是為你增添個人 觸摸到你的混搭，
無論是美學或功能。
採取混搭曾經如此 稍微到一個新的水平。
只要你推超越自己 你熟悉規範本身
拿起一種技術 新的，哪怕它只是
唯美的東西像改變 您正在使用的地圖佈局，
我們預期範圍 將得到滿足。
這則是習題集8混搭。
敬請期待更多的 規範和好運
解決這個，你最後的 CS50問題集如初。
>> [音樂播放]