>> [音乐播放]
>> 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上 服务器，并取回了一些回应。
>> 你，当然，还是会 需要实现s​​earch.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问题集如初。
>> [音乐播放]