[音乐播放] 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问题集如初。 [音乐播放]