[音樂播放] 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像 search.php中？地緣=劍橋或02138或無論用戶已鍵入的應證明是非常寶貴的，你，你自己，嘗試要弄清楚到底是否為什麼 search.php中工作正常與否。最後的話，你有一些待辦事項在你前面。你會第一工具即進口腳本讀取us.text到你的數據庫。你那麼將需要實施的search.php 因此，它的行為完全為指定。你那麼會想把重點放在scripts.js 最終實現這些夫婦待辦事項，包括配置而該模板，添加標記，刪除標記，並那麼最後，但並非最不重要的一個人風格。一旦你有你的工作混搭很喜歡我們的目標在眼前是為你增添個人觸摸到你的混搭，無論是美學或功能。採取混搭曾經如此稍微到一個新的水平。只要你推超越自己你熟悉規範本身拿起一種技術新的，哪怕它只是唯美的東西像改變您正在使用的地圖佈局，我們預期範圍將得到滿足。這則是習題集8混搭。敬請期待更多的規範和好運解決這個，你最後的 CS50問題集如初。 [音樂播放]