1 00:00:00,000 --> 00:00:03,388 >> [MUSIC PLAYING] 2 00:00:03,388 --> 00:00:09,196 3 00:00:09,196 --> 00:00:10,180 >> DAVID J. Malan: Salve. 4 00:00:10,180 --> 00:00:12,600 Lets ambulare per Forsit Pone Mashup VIII, 5 00:00:12,600 --> 00:00:15,880 Ite ad quam transgredimini trahunt enim elementa Google Maps 6 00:00:15,880 --> 00:00:20,905 et ex elementis, et farraginem News qui illos in telam applet 7 00:00:20,905 --> 00:00:24,150 sino user ut quaero a a nuntius pro locorum map 8 00:00:24,150 --> 00:00:26,780 urbes ad speciem, urbes, et zip codes. 9 00:00:26,780 --> 00:00:31,040 Ad hoc perimus integrant aliqua HTML CSS, PHP, SQL, 10 00:00:31,040 --> 00:00:34,390 JavaScript, et ars, notum est quod in ordine AJAX 11 00:00:34,390 --> 00:00:36,850 ad hoc iam immersive user experientia. 12 00:00:36,850 --> 00:00:38,920 >> Sit enim primum Google Maps ipsum. 13 00:00:38,920 --> 00:00:41,220 Hoc utique, fortasse familiare interface. 14 00:00:41,220 --> 00:00:45,070 Sed evenit quod Google Maps quoque suggero an application API-- 15 00:00:45,070 --> 00:00:48,360 Aliquam libero via quae interface-- Potes elementa Google Maps 16 00:00:48,360 --> 00:00:50,740 et integrare in eis vestri own applications. 17 00:00:50,740 --> 00:00:52,650 Imo, qui hoc processus, utrum ipsa esset, 18 00:00:52,650 --> 00:00:55,140 ut reperio a iugo of URLs id maxime exploratae utilitatis est 19 00:00:55,140 --> 00:00:57,820 de quibus in Set quia ad determinationem Problem VIII, 20 00:00:57,820 --> 00:01:00,980 hoc in specie Questus Coepi Dux vel elit scriptor Guide 21 00:01:00,980 --> 00:01:07,640 quia API Google Maps Version tam III quasi JavaScript API Google Maps 22 00:01:07,640 --> 00:01:10,260 v3 referunt, qui est a aliquantulus magis artium arcanorum legere 23 00:01:10,260 --> 00:01:14,600 sed etiam habet in inferioribus quae details circa functiones aut methodis 24 00:01:14,600 --> 00:01:18,220 et proprietatibus et conditionibus et eventus veniens cum API, 25 00:01:18,220 --> 00:01:20,720 similis in spiritus ad [tacita] pages. 26 00:01:20,720 --> 00:01:23,480 >> Sed si nos a inviso at News, youll ' 27 00:01:23,480 --> 00:01:25,370 fortasse vide hic a familiar interface. 28 00:01:25,370 --> 00:01:29,350 Sed evenit potueris quaerere News for specifica geographies 29 00:01:29,350 --> 00:01:32,000 HTTP parameter vocavit geo via. 30 00:01:32,000 --> 00:01:35,100 Nam si zoom in Hie, ut tu 31 00:01:35,100 --> 00:01:41,672 At ego sum news.google.com/news/section?geo=02138. 32 00:01:41,672 --> 00:01:43,630 Et quidem si zoom egressus sum, ut tu 33 00:01:43,630 --> 00:01:47,090 paginam spectat totum fasciculum views de Cambridge, MA. 34 00:01:47,090 --> 00:01:50,620 >> Interim si actu mutare URL Die hoc non esse, 35 00:01:50,620 --> 00:01:55,580 sed aliquid paulo messier sicut Cambridge, + Massachusetts, 36 00:01:55,580 --> 00:02:00,740 Et sic encode a quo plus URL quod ledo Penetro in a loci natura, 37 00:02:00,740 --> 00:02:02,907 youll 'animadverto ut EGO vere videre fama eadem fere. 38 00:02:02,907 --> 00:02:05,489 Fortasse parum differt quia actu Cambridge 39 00:02:05,489 --> 00:02:06,910 multiplex habet zip codes. 40 00:02:06,910 --> 00:02:09,410 Sed quid ego scio, et quod, immo nescio quomodo possum 41 00:02:09,410 --> 00:02:12,940 ligare civitates, et castella in casu quo ad zip codes 42 00:02:12,940 --> 00:02:15,064 user volunt admittere, aut suspicere? 43 00:02:15,064 --> 00:02:17,480 Bene, evenit ut illic ' a website sicco illic dicitur 44 00:02:17,480 --> 00:02:20,060 quod est geonames.org an habere inceptum ad 45 00:02:20,060 --> 00:02:23,760 libere available a database of all generum, orbis terrarum notitia, 46 00:02:23,760 --> 00:02:27,040 quia non solum nos, sed etiam necnon pro aliis regionibus. 47 00:02:27,040 --> 00:02:30,430 Nam si ad hoc domicilio hie set etiam in quaestione 48 00:02:30,430 --> 00:02:34,510 specificationem, tibi iam tertia enumerationem totum fasciculum lima rar 49 00:02:34,510 --> 00:02:36,400 tibi eventus ab aliquo potest. 50 00:02:36,400 --> 00:02:39,900 Nam hoc problemate vos erant 'iens ut download us.zip. 51 00:02:39,900 --> 00:02:43,790 Sed in hoc lima est totale data in fasciculum textus forma. 52 00:02:43,790 --> 00:02:47,760 Simillima est quod imagini Comma CSV-- separatae Values ​​file-- 53 00:02:47,760 --> 00:02:51,294 sed ea utitur actualiter tabs ad demarcate agris. 54 00:02:51,294 --> 00:02:53,710 Sed interim, si quaeritis quae mihi hic fert, 55 00:02:53,710 --> 00:02:56,459 lima in agris sunt talia esse terram codes 56 00:02:56,459 --> 00:02:58,980 Praesent codes, loco nominum, et deinde, in specie aliqua 57 00:02:58,980 --> 00:03:04,230 quo, civitates et comitatus, societates, et plura. 58 00:03:04,230 --> 00:03:06,630 In facto, ego iam dudum downloaded hoc file in praevenitque. 59 00:03:06,630 --> 00:03:09,750 Dimitte me et praemittat patefacio is here-- us.text-- et Imo 60 00:03:09,750 --> 00:03:16,660 Si ego volumine descendit ad lineam 16.792 Videas paucis litteris Lugduni 61 00:03:16,660 --> 00:03:19,120 Massachusetts et ejus zip codes. 62 00:03:19,120 --> 00:03:22,150 Quid est, eodem comitatu, Ego vero, ut aliqui numeri 63 00:03:22,150 --> 00:03:24,500 intellegere, sed etiam omnes, in viam rectam, 64 00:03:24,500 --> 00:03:27,170 quidam GPS coordinates-- latitudine et longitudine. 65 00:03:27,170 --> 00:03:30,440 Hoc est magnum, quia unus ex lineamentis API Google Maps 66 00:03:30,440 --> 00:03:33,670 est facultatem ad deprehendere in quo nunc es geographicam 67 00:03:33,670 --> 00:03:36,850 in terms of GPS coordinatas. 68 00:03:36,850 --> 00:03:40,210 >> Sed ut instar sicco quam de primo committitur cohibentem haec omnia simul. 69 00:03:40,210 --> 00:03:42,900 Et constitui super vos omnem fasciculumque distributionis scripta, 70 00:03:42,900 --> 00:03:44,970 necnon MySQL database. 71 00:03:44,970 --> 00:03:49,100 In facto, si trahere a phpMyAdmin habentes iam copia, mox ut volo, 72 00:03:49,100 --> 00:03:54,800 pset8.SQL, quod youll 'animadverto a mensa MySQL Videntur haec ID agro terra 73 00:03:54,800 --> 00:03:57,400 code, Praesent code, locum et nomen melius. 74 00:03:57,400 --> 00:04:00,490 Ad rationes omnium eorum columnas I derivat, 75 00:04:00,490 --> 00:04:03,870 ex lectione readme.text lima hic, quod specificatur 76 00:04:03,870 --> 00:04:07,330 sive ager est integrum, aut varchar vel aliquid huiusmodi. 77 00:04:07,330 --> 00:04:10,510 >> Et quia nos creavit illam et data est vobis in SQL mandata 78 00:04:10,510 --> 00:04:12,770 quod est creare, ut faciant in mensa tua, database, 79 00:04:12,770 --> 00:04:15,290 sed est tamen in ea re non data. 80 00:04:15,290 --> 00:04:19,600 Sed ut vestri 'iens habere us.zip download aut patriae zip 81 00:04:19,600 --> 00:04:21,500 a lima, quod URL ibi. 82 00:04:21,500 --> 00:04:24,940 Et tunc erant 'iens ut scribam in PHP script a to order versus ut ' 83 00:04:24,940 --> 00:04:28,420 iens ut patefacio sursum quod text lima, iterare acies, super eius, 84 00:04:28,420 --> 00:04:31,180 et quia tunc quilibet rectas facite illis interserunt 85 00:04:31,180 --> 00:04:34,940 quae, in mensa in MySQL database. 86 00:04:34,940 --> 00:04:37,880 Et post hoc, youll cucurrerunt qui tandem script 87 00:04:37,880 --> 00:04:39,610 cum semel in elit. 88 00:04:39,610 --> 00:04:41,780 In re, youll 'forsit run is fasciculum temporibus 89 00:04:41,780 --> 00:04:45,460 dum trying ut fix variis cimices. 90 00:04:45,460 --> 00:04:48,440 >> Denique iens habere vere magna database milibus 91 00:04:48,440 --> 00:04:50,139 orbis terrarum, et in millibus ordines. 92 00:04:50,139 --> 00:04:52,930 Tunc vos erant 'iens ut, quae important script seorsum semel suus 'faciens 93 00:04:52,930 --> 00:04:55,140 et database delicatus et justa apparet, et tunc 94 00:04:55,140 --> 00:04:58,880 iens actu transigendum mashup ipsa foveant. 95 00:04:58,880 --> 00:05:01,670 Quod est iens ut vultus mashup paulum aliquid sicut est hodie. 96 00:05:01,670 --> 00:05:05,165 At mashup.cs50.net nos habere baculum solutio 97 00:05:05,165 --> 00:05:06,990 qui paulum aliquid sicut est hodie. 98 00:05:06,990 --> 00:05:11,070 Sane si click in hoc diurna icon ad Cambridge, MA, 99 00:05:11,070 --> 00:05:13,300 youll 'animadverto a telarum et breviter icon 100 00:05:13,300 --> 00:05:16,370 an ordinata list, a bulleted album articulis 101 00:05:16,370 --> 00:05:18,280 ad Cambridge, MA. 102 00:05:18,280 --> 00:05:20,352 Si ego click in Charlestown, Massachusetts, 103 00:05:20,352 --> 00:05:21,685 Videbo idem illi civitati. 104 00:05:21,685 --> 00:05:24,174 Et si ego click in Watertown, Massachusetts, 105 00:05:24,174 --> 00:05:26,090 ut non ibi sit aliquis Watertown ex fama, 106 00:05:26,090 --> 00:05:28,630 sic youll 'animadverto aliquid sicut tardus nuntium diebus. 107 00:05:28,630 --> 00:05:32,140 >> Sed interea sunt in summo sinistram aliqua familiar Google Maps controllata 108 00:05:32,140 --> 00:05:34,980 zoom out ad te, pan sursum, deorsum, sinistrorsum et dextrorsum, 109 00:05:34,980 --> 00:05:37,360 sed quaero, quod positum est arca. 110 00:05:37,360 --> 00:05:40,910 Si quaeram, ingenue, Die autem altero tantum scio, 111 00:05:40,910 --> 00:05:45,020 (XC)CCX, Puteus 'quoque videre Beverly Hills, California. 112 00:05:45,020 --> 00:05:48,550 Cum clicked ducit ad me California ac totum fasciculum 113 00:05:48,550 --> 00:05:50,369 of nuntius de Beverly Hills. 114 00:05:50,369 --> 00:05:51,910 Sed notandum est etiam, quod ibi factum est. 115 00:05:51,910 --> 00:05:57,040 Si ego hoc tempore aut even search for MMCXXXVIII Cambridge comma aliquod aut Massachusetts 116 00:05:57,040 --> 00:06:00,300 variant ejus, vos adepto a parum dropdown autocomplete. 117 00:06:00,300 --> 00:06:03,840 Hoc autem est usura a plugin quia a library dicitur jQuery, 118 00:06:03,840 --> 00:06:05,732 et quod dicitur typeahead plugin. 119 00:06:05,732 --> 00:06:07,440 Nos simpliciter perlegi documentis, 120 00:06:07,440 --> 00:06:13,150 downloaded lima integrated in .js ut in codice distributio 121 00:06:13,150 --> 00:06:16,900 denique codicem scribere possit, quod quod implet menu cum auto 122 00:06:16,900 --> 00:06:19,350 auto excerpta aut ad proponendi. 123 00:06:19,350 --> 00:06:23,820 >> Nunc distributio codice, licet, quod accepistis non fere diximus. 124 00:06:23,820 --> 00:06:26,860 Vos adepto Map immersa, et summum imperium tibi quidquam, 125 00:06:26,860 --> 00:06:28,240 et tibi quaero arca archa. 126 00:06:28,240 --> 00:06:32,760 Si ego typus aliquid simile MMCXXXVIII, nec tamen inveniuntur in locis. 127 00:06:32,760 --> 00:06:34,730 Ita ut suus 'iens esse huc una ex nostris finibus. 128 00:06:34,730 --> 00:06:37,430 Item si gradi retro aspicere ornare ipsum 129 00:06:37,430 --> 00:06:38,950 illic 'non omne quod nuntius. 130 00:06:38,950 --> 00:06:41,780 Et si ego click drag, non actu venalicium 131 00:06:41,780 --> 00:06:45,560 apparet enim quod quia nuntius impugnatio relicta tibi est. 132 00:06:45,560 --> 00:06:48,490 >> Lets accipere a inviso tunc at distributio code. 133 00:06:48,490 --> 00:06:51,460 Quondam youve downloaded pset8.zip et unzipped eius 134 00:06:51,460 --> 00:06:54,430 in repertorio vhost Appliance in CS50, 135 00:06:54,430 --> 00:06:56,550 videbis hic intra presul. 136 00:06:56,550 --> 00:07:00,200 Quae plerumque etiam pro Bin-- quia binarius executable programs-- 137 00:07:00,200 --> 00:07:04,870 includit, ut in pset7, aliqua PHP includunt files quod alius lima, 138 00:07:04,870 --> 00:07:06,710 deinde publice, quod est lima ut postulo 139 00:07:06,710 --> 00:07:09,369 publice edita cum a user pasco. 140 00:07:09,369 --> 00:07:11,410 Eamus in vultu bin presul, quod laudandum te, 141 00:07:11,410 --> 00:07:13,890 videte, ut illic 'a lima Import iam ibi dicitur. 142 00:07:13,890 --> 00:07:17,591 Si hanc fenestram aperueritis, cum gedit, quod puteus 'videre qui, quod valde dolendum est, non ita multum 143 00:07:17,591 --> 00:07:18,090 illic. 144 00:07:18,090 --> 00:07:20,250 Omne quod est, quamvis, est a summo ad shebang 145 00:07:20,250 --> 00:07:23,410 quod dat speciem, quam in hoc casu interpreter-- PHP-- 146 00:07:23,410 --> 00:07:25,759 oportet ut actu hoc facere lima. 147 00:07:25,759 --> 00:07:27,550 Tunc vero, ubi legitur: TODO est ubi vestri ' 148 00:07:27,550 --> 00:07:31,130 Aliquo scribere ad opus ut verisimile est, quod config 149 00:07:31,130 --> 00:07:35,820 file ut 'in includit presul sicut ante fecimus per PHP lima. 150 00:07:35,820 --> 00:07:38,180 Et tunc erant 'iens ut have ut patefacio sursum aliqua 151 00:07:38,180 --> 00:07:41,920 quas nimirum us.text iam enim unzipped. 152 00:07:41,920 --> 00:07:44,690 Tunc tu habiturus repetere lineis in lima, 153 00:07:44,690 --> 00:07:47,800 forte quidam functiones usura Suggessimus in nominatione. 154 00:07:47,800 --> 00:07:51,390 Ergo uterque illorum insert linearum in MySQL database 155 00:07:51,390 --> 00:07:54,940 utendo quaero muneris, quod nos, dummodo rursus with-- 156 00:07:54,940 --> 00:07:58,010 aut saltem a variant in functions.php eius, 157 00:07:58,010 --> 00:07:59,560 dabimus quod justum est in momento. 158 00:07:59,560 --> 00:08:04,430 >> Venite et revertamur ad claudendas important et introibunt in illud tempus DVD 159 00:08:04,430 --> 00:08:05,300 includit. 160 00:08:05,300 --> 00:08:09,210 Et si iudico ego illic ls Videas Forsit Pone VII files tres simillimus. 161 00:08:09,210 --> 00:08:13,760 Et cito lets 'vultus, puta ad config.php. 162 00:08:13,760 --> 00:08:16,730 In illuc, lineae minus sit quam prius, et illud 163 00:08:16,730 --> 00:08:20,712 videtur hoc file includit et constants.php functions.php. 164 00:08:20,712 --> 00:08:23,670 Sumamus uti paulo aliter ars ad hoc tempus circa actualiter 165 00:08:23,670 --> 00:08:30,910 hi sunt qui determinare relative files ut current directorium __ DIR__ 166 00:08:30,910 --> 00:08:35,280 quicquid repraesentat hoc album file, config.php, est in se ipso. 167 00:08:35,280 --> 00:08:37,600 Ita hoc est a magis explicato requirentis 168 00:08:37,600 --> 00:08:40,100 files quod alius vis exigere. 169 00:08:40,100 --> 00:08:44,020 >> Si autem ego in hunc fasciculum claudere atque constants.php instead patefacio sursum, 170 00:08:44,020 --> 00:08:47,430 Videas valde simile lima ad Forsit Pone VII scriptor tam, licet 171 00:08:47,430 --> 00:08:50,050 cum aliter dicitur pset8 database. 172 00:08:50,050 --> 00:08:54,020 Denique in functions.php, Visam unum officium 173 00:08:54,020 --> 00:08:55,942 hoc vocatur query time. 174 00:08:55,942 --> 00:08:59,150 Hoc idem fere tracto nisi errores circa hoc parum 175 00:08:59,150 --> 00:09:02,860 aliter tamen suus usus est idem in problemate septem. 176 00:09:02,860 --> 00:09:08,090 >> Nunc eamus infunditur pset8 presul, ire in publicum, et ibi 177 00:09:08,090 --> 00:09:14,420 ls Si autem facio, tu videre Teraho articles.php, index.html, search.php, 178 00:09:14,420 --> 00:09:16,940 et omnes update.php-- lima. 179 00:09:16,940 --> 00:09:22,010 Et tunc css baptisteria img, et js presul pset7 simillimus. 180 00:09:22,010 --> 00:09:24,660 >> Lets accipere a inviso index.html, quod est 181 00:09:24,660 --> 00:09:27,290 iens ut realiter Vestibulum ut in contritione filiae. 182 00:09:27,290 --> 00:09:31,820 In http Videas totum fasciculum to in capite, 183 00:09:31,820 --> 00:09:36,540 specie, quia propter nos bootstrap CSS secuti per totum fasciculum script 184 00:09:36,540 --> 00:09:41,520 tags, talia enim in maps API se, cum specialis titulus label 185 00:09:41,520 --> 00:09:44,950 utilitati quam quibus in additum est available ad vos, 186 00:09:44,950 --> 00:09:48,420 jQuery se, bootstrap se, et alius library 187 00:09:48,420 --> 00:09:50,990 quae vocantur underscore dicemus in t. 188 00:09:50,990 --> 00:09:57,031 Sicut Underscore.js jquery.js est a JavaScript library 189 00:09:57,031 --> 00:10:00,280 qui habet totum fasciculum funcionalidad qui multum in mundo velit 190 00:10:00,280 --> 00:10:02,020 ipsa existente in JavaScript. 191 00:10:02,020 --> 00:10:04,560 Et sunt haec omnia etiam admodum popularis. 192 00:10:04,560 --> 00:10:07,140 Diximus etiam de quibus typeahead quae est quod superius 193 00:10:07,140 --> 00:10:11,180 et facit ut tellus autocomplete tandem a link ad nostram JavaScript. 194 00:10:11,180 --> 00:10:13,880 >> Interea, et forte gratanter, ita mashup 195 00:10:13,880 --> 00:10:17,550 rapitur parum respective HTML hic in fundo. 196 00:10:17,550 --> 00:10:22,330 Notice quod weve in speciem a div corpus fluidum, continens illam classium. 197 00:10:22,330 --> 00:10:24,610 Hoc est per bootstrap documenta, iustus 198 00:10:24,610 --> 00:10:29,840 implete div est quod hoc est ad aut viewport pasco fenestra plene. 199 00:10:29,840 --> 00:10:33,020 >> Interim, quod infra nos habere a div quae se aperuit, et continuo clausa 200 00:10:33,020 --> 00:10:34,790 cum pariete map of unique ID. 201 00:10:34,790 --> 00:10:37,400 Ex hoc nunc est Google Maps documenta 202 00:10:37,400 --> 00:10:42,490 ad API, quibus tantum opus habere quam inanem div injicere, 203 00:10:42,490 --> 00:10:44,470 Demum Google actu tabulis. 204 00:10:44,470 --> 00:10:46,310 Sed de hoc in aliquam justo. 205 00:10:46,310 --> 00:10:48,850 >> Denique, illic 'a forma, inside of hic, qui 206 00:10:48,850 --> 00:10:52,930 text arca archa in pugnis reliquit usque summitatem in nostro pro exquirendis interface. 207 00:10:52,930 --> 00:10:54,730 Notice quod weve 'adsuesco assuesco aliquantulus of bootstrap 208 00:10:54,730 --> 00:10:57,670 hic similia too-- inline et forma-group-forma. 209 00:10:57,670 --> 00:11:00,080 Weve dedit illi form of unique ID. 210 00:11:00,080 --> 00:11:04,510 Et tunc demum ego cum ipsis type input quibus satis nota, 211 00:11:04,510 --> 00:11:06,440 cuius ID est q. 212 00:11:06,440 --> 00:11:07,230 Just a conuentu. 213 00:11:07,230 --> 00:11:09,234 Q habere potuit pro query-- vocati sint aliquid. 214 00:11:09,234 --> 00:11:11,400 Et tunc ille qui vicit saeculum, interea, civitatis statum, 215 00:11:11,400 --> 00:11:16,200 Praesent et iuris quod vos revocaret, cum in nostris demo mashup superius. 216 00:11:16,200 --> 00:11:17,980 Sit scriptor terminamus file. 217 00:11:17,980 --> 00:11:24,460 >> Sed in PHP lima ut inspice deinde expectare JavaScript lima. 218 00:11:24,460 --> 00:11:27,700 In PHP files nostra, weve iam ad effectum deduci et te, 219 00:11:27,700 --> 00:11:29,960 puta updates. 220 00:11:29,960 --> 00:11:35,060 Nos autem non in immensum Update.php-- consumere amount of vicis in here-- in breviter intimatum, 221 00:11:35,060 --> 00:11:38,400 nostrum est, quod lima JavaScript codice est iens 222 00:11:38,400 --> 00:11:41,610 est via email quod AJAX asynchronous ars ut ' 223 00:11:41,610 --> 00:11:45,980 constructum in JavaScript nunc dierum et quid passurus update.php 224 00:11:45,980 --> 00:11:47,410 pro magis notitia. 225 00:11:47,410 --> 00:11:50,045 >> Specie, quisquam user trahit map 226 00:11:50,045 --> 00:11:53,310 aut qui praestat search salit user ad alium situm, 227 00:11:53,310 --> 00:11:55,250 nostra JavaScript code, mox ut est 228 00:11:55,250 --> 00:11:59,610 iens ut vocant update.php et interrogate X aut sic venalicium 229 00:11:59,610 --> 00:12:02,630 infra dicentur viewport GPS coordinatas 230 00:12:02,630 --> 00:12:06,510 de summis, qui angulis map. 231 00:12:06,510 --> 00:12:10,520 Possumus ergo, bonisque donabo majoribus quam nunc in map qui dedit hoc in corde user screen in ordine 232 00:12:10,520 --> 00:12:14,210 videre X novum forsit et cippos diversis civitatibus. 233 00:12:14,210 --> 00:12:18,340 Interim, hoc est, denique file ad exsequendam SQL query 234 00:12:18,340 --> 00:12:21,680 nos contra voluntatem nostram database mensa locis dicitur, quod 235 00:12:21,680 --> 00:12:26,380 est iens ad illos X vel pauciores elit. 236 00:12:26,380 --> 00:12:32,620 >> Interim articles.php, alia lima weve scriptum tantum. 237 00:12:32,620 --> 00:12:35,820 Consimile est in spiritu Forsit Pone LOOKUP VII scriptor officium, 238 00:12:35,820 --> 00:12:39,450 quae contingi Yahoo Oeconomi, pro te. 239 00:12:39,450 --> 00:12:43,710 Quod file contactus News quia vobis ultimate grabbing 240 00:12:43,710 --> 00:12:46,050 a machina-readable in aliquo version-- 241 00:12:46,050 --> 00:12:49,720 vocavit format-- of the news RSS aut ad Cambridge Beverly Hills 242 00:12:49,720 --> 00:12:52,880 in quamcumque civitatem aut perscrutatus quia quod fundatur super geoparameter. 243 00:12:52,880 --> 00:12:57,250 Nos qui RSS parse, quae est iustus a type of XML markup lingua dicitur, 244 00:12:57,250 --> 00:13:00,740 et tunc dicitur esse in actu, redde vestri pasco 245 00:13:00,740 --> 00:13:03,570 et ad tui JavaScript code, in particulari, ut dicitur in format 246 00:13:03,570 --> 00:13:06,097 JSON, Object Notatio JavaScript. 247 00:13:06,097 --> 00:13:08,180 Nunc videbis in specification-- ostendemus vobis 248 00:13:08,180 --> 00:13:10,720 ad quam vos can vere videre quidam JSON adventus back-- 249 00:13:10,720 --> 00:13:15,210 qui denique huius functionality sic lets vos frequentare menus eos populus 250 00:13:15,210 --> 00:13:16,960 ut scribitur in map in titulum 251 00:13:16,960 --> 00:13:19,430 te quoque videre totum fasciculum glandibus, quorum quisque, 252 00:13:19,430 --> 00:13:21,020 links ad articulus. 253 00:13:21,020 --> 00:13:25,000 >> Vide nunc tandem ultimo PHP file quod, fortunate, non 254 00:13:25,000 --> 00:13:27,970 iens habere multo on-- iustus a pulchellus magnus TODO. 255 00:13:27,970 --> 00:13:32,170 Nunc hoc file declaret an array vocavit locis. 256 00:13:32,170 --> 00:13:35,980 Et tunc demum prints JSON in quod array format-- 257 00:13:35,980 --> 00:13:38,720 satis est, ut ii excudendi quae faciliora sunt ut debug. 258 00:13:38,720 --> 00:13:41,480 Donec aliquam hoc medium est TODO, 259 00:13:41,480 --> 00:13:46,890 quae vocat ad perscrutandam database nam ponit matching a geo HTTP 260 00:13:46,890 --> 00:13:47,490 modularis. 261 00:13:47,490 --> 00:13:49,865 >> Et sane hoc est ad unum tui challenges-- 262 00:13:49,865 --> 00:13:54,240 hic ad effectum deducendi functionality hoc ut, cum in hunc fasciculum contact 263 00:13:54,240 --> 00:14:00,610 sicut a URL quaerere. php? geo = aliquid, vestra code ultimo revertatur a JSON 264 00:14:00,610 --> 00:14:05,020 exercitum in loca database traba ut inserere quod input. 265 00:14:05,020 --> 00:14:08,960 Ita, si user species in Cambridge, vestri lima hic search.php 266 00:14:08,960 --> 00:14:12,680 ultimo revertatur a JSON array quia omnibus par Cantabrigiae 267 00:14:12,680 --> 00:14:16,990 qui sint in Massachusetts sed poterat etiam alibi. 268 00:14:16,990 --> 00:14:21,040 >> Denique ad duo inspice files qui sunt stabilis ultimately-- 269 00:14:21,040 --> 00:14:23,680 CSS file tuum et JavaScript lima. 270 00:14:23,680 --> 00:14:26,779 Et si introiero in nostra CSS presul, ibi est totum fasciculum lima est, 271 00:14:26,779 --> 00:14:28,070 sed plerique bibliothecas. 272 00:14:28,070 --> 00:14:31,530 Ego inspice, in specie, ad styles.css, 273 00:14:31,530 --> 00:14:35,440 qui est hominis proprium, quod suus 'global CSS ut totum hoc, stylize mashup. 274 00:14:35,440 --> 00:14:38,840 Faciam quod per leges commentaria in ea, sed in summa, 275 00:14:38,840 --> 00:14:43,490 hoc est, quod facit ut nostra CSS mashup per defaltam de arca, 276 00:14:43,490 --> 00:14:46,950 alius prorsus modo concupiscimus subiecit cum map implens visum portu 277 00:14:46,950 --> 00:14:49,720 et cum quaerere buxum est superne sinistram. 278 00:14:49,720 --> 00:14:52,870 Diximus etiam capta libertas qui stylizing typeahead dropdown 279 00:14:52,870 --> 00:14:55,170 tam parum menu. 280 00:14:55,170 --> 00:14:58,030 >> Plurrimi maximus lima quia forte hoc problemate 281 00:14:58,030 --> 00:15:01,070 hoc est, ultimum, scripts.js. 282 00:15:01,070 --> 00:15:03,800 Inside tui JS presul est etiam magis files. 283 00:15:03,800 --> 00:15:08,090 Omnes sunt library files nisi hoc unum, scripts.js. 284 00:15:08,090 --> 00:15:11,460 Si aperimus hoc, lets accipies nostrum Peregrinatione ultimum vitae est quod 285 00:15:11,460 --> 00:15:13,820 aedificamur hoc file quia et tibi et operam call 286 00:15:13,820 --> 00:15:16,200 ad quæ iacent antecedet todos. 287 00:15:16,200 --> 00:15:19,110 >> In summo hunc fasciculum, sunt tres global variabilium. 288 00:15:19,110 --> 00:15:22,910 Unum pro tabula, quae est ad in nobis respectu Google map. 289 00:15:22,910 --> 00:15:25,510 Non potestis cogitare de illo sort of a monstratorem. 290 00:15:25,510 --> 00:15:27,710 Interim habemus alius variabilis global 291 00:15:27,710 --> 00:15:31,500 Antiqua dicitur, quod videtur reditum valorem requisita thesaurizantes 292 00:15:31,500 --> 00:15:34,170 ad novum google.maps.InfoWindow. 293 00:15:34,170 --> 00:15:37,835 JavaScript, quod non sustinet simillima spiritu auream. 294 00:15:37,835 --> 00:15:40,250 Et hoc quod linea est ad propositum facit 295 00:15:40,250 --> 00:15:42,820 est quodammodo novum info fenestram in memoria, et dein 296 00:15:42,820 --> 00:15:46,330 custodiens circa respicitur illud in variabilis vocavit pellentesque. 297 00:15:46,330 --> 00:15:48,330 Et inter illos, interim, hoc quod exstat 298 00:15:48,330 --> 00:15:51,060 esse inanem JavaScript array vocavit venalicium. 299 00:15:51,060 --> 00:15:55,392 Omnia acta diurna eorum icons, aut tibi ut aliam omnino icon, 300 00:15:55,392 --> 00:15:57,350 Proficiscimur ad condi tandem in hoc aciem: 301 00:15:57,350 --> 00:16:01,570 facile ut adderetis et abstulit eos a turpis ornare. 302 00:16:01,570 --> 00:16:03,990 >> Nunc lets volumine descendit modicum et whiz 303 00:16:03,990 --> 00:16:07,690 codicem, per futurum aut supplicium, ut in DOM document 304 00:16:07,690 --> 00:16:10,480 obiectum exemplar, aut page paratum est. 305 00:16:10,480 --> 00:16:12,942 Memini hoc syntax hic simpliciter specificat 306 00:16:12,942 --> 00:16:14,900 quod sequentia codice ut non solum faciat 307 00:16:14,900 --> 00:16:17,840 dum pasco complevit oneratisque alia omnia. 308 00:16:17,840 --> 00:16:19,750 >> Primo enim indicare totum fasciculum styles, 309 00:16:19,750 --> 00:16:22,410 quod terminus sursum stylizing ut per amet turpis. 310 00:16:22,410 --> 00:16:24,790 Nos itaque a totum fasciculum options, 311 00:16:24,790 --> 00:16:28,630 qui mos etiam Google TABULA sumus de embed. 312 00:16:28,630 --> 00:16:32,090 Nos tunc uti jQuery aliquantulus of code, qui paulo fusius explicatur 313 00:16:32,090 --> 00:16:35,000 in amet, iaculis elementum ut, canvas map- 314 00:16:35,000 --> 00:16:36,980 qui tam singulariter nos attingere. 315 00:16:36,980 --> 00:16:40,640 Et tunc linea hoc est, quod videtur ad pulsantes dare nobis 316 00:16:40,640 --> 00:16:43,560 a inside of Google map nostro studio, 317 00:16:43,560 --> 00:16:47,020 thesaurizantes respicitur illud in quod variabilis vocavit map. 318 00:16:47,020 --> 00:16:50,550 >> Denique hic nobis register quid vocavit a audientium. 319 00:16:50,550 --> 00:16:54,690 Cogita back-- modo, via back-- ad week zero in CS50 320 00:16:54,690 --> 00:16:57,430 at cum respiceremus et Scratch conuenerunt in a ambulant 321 00:16:57,430 --> 00:16:59,935 quia per illa quae vocantur et certe in diffusionibus custodiatur. 322 00:16:59,935 --> 00:17:01,810 Vos vires non haberent, non te ipsum, sed suus ' 323 00:17:01,810 --> 00:17:03,900 a mechanism, per quam a in hoc casu pasco 324 00:17:03,900 --> 00:17:07,940 suus possit pertractem ad faciendam quidam actu code. 325 00:17:07,940 --> 00:17:12,170 In hoc casu, suus 'iens ut audiat ad eventum otiosum dici ornare. 326 00:17:12,170 --> 00:17:14,930 Hoc est, quia pasco habet complevit oneratisque Google map. 327 00:17:14,930 --> 00:17:18,380 Hic functio vocavit denique ut configure 328 00:17:18,380 --> 00:17:19,339 administrabuntur. 329 00:17:19,339 --> 00:17:22,510 Quod officium, conforment, Videamus ergo, quod dicitur a nobis. 330 00:17:22,510 --> 00:17:24,550 >> Hic autem est quod est in officium qui, quod valde dolendum est, 331 00:17:24,550 --> 00:17:25,871 iustus adaugeo a TODO venalicium. 332 00:17:25,871 --> 00:17:28,620 Per quod spec. vos erant 'iens ut postulo scribere codice, ut etiam 333 00:17:28,620 --> 00:17:32,840 Addit etiam illud spectat, num marker-- sicut acta diurna populi aut unius pollicis vertentes, 334 00:17:32,840 --> 00:17:35,360 aut aliquid else-- ad Google map. 335 00:17:35,360 --> 00:17:37,720 Hic nunc est quod muneris vocavit configure. 336 00:17:37,720 --> 00:17:40,390 Dabo tibi legere per hoc dici, 337 00:17:40,390 --> 00:17:42,600 sed animadverto ut addamus plus a fasciculumque auditores 338 00:17:42,600 --> 00:17:46,620 ita quod possumus cum feceritis codice user clicks trahit ornare. 339 00:17:46,620 --> 00:17:50,730 Nos hic in codice initializes qui typeahead plugin 340 00:17:50,730 --> 00:17:53,120 ut dropdown menu actu operatur. 341 00:17:53,120 --> 00:17:55,690 >> Sed dolor sit amet In hoc iugo of locis. 342 00:17:55,690 --> 00:17:57,590 Scilicet hoc faciunt hic. 343 00:17:57,590 --> 00:18:00,410 Ego differam usque ad online documenta et specificationem 344 00:18:00,410 --> 00:18:02,530 ad explendum hoc todo. 345 00:18:02,530 --> 00:18:05,890 In summa, hoc bibliotheca typeahead sino vos ut transiret 346 00:18:05,890 --> 00:18:09,790 quid in communi voluntate salvis, quod habet aliquam variabilis placeholders 347 00:18:09,790 --> 00:18:13,690 similis in spiritus ad printf% s. s. 348 00:18:13,690 --> 00:18:16,030 Sed in hoc casu, the template per spec 349 00:18:16,030 --> 00:18:18,760 sino vos ut specificare quid vis variabiles 350 00:18:18,760 --> 00:18:24,880 arque a notitia ut ' ab tergo aliquid quasi PHP 351 00:18:24,880 --> 00:18:29,810 haec scripsi vobis ut lima quae sunt totidem soles, JSON output. 352 00:18:29,810 --> 00:18:35,170 >> Sed hic advertimus auscultant typeahead excerpta, 353 00:18:35,170 --> 00:18:38,050 cum user actu deducit deligit conquisitum et pretium. 354 00:18:38,050 --> 00:18:40,270 Hic est, quomodo nos actu, nam qui auscultaturi 355 00:18:40,270 --> 00:18:42,250 Aliquo inde facientes. 356 00:18:42,250 --> 00:18:45,300 Et pergimus ad configurare mashup est iustus aliquantulus frenum. 357 00:18:45,300 --> 00:18:48,000 Et, denique dicimus, munus hoc update. 358 00:18:48,000 --> 00:18:49,640 It updates in venalicium in screen. 359 00:18:49,640 --> 00:18:51,529 Rursus, in tantum paulisper. 360 00:18:51,529 --> 00:18:53,570 Ac interea pauca parva functiones in hic. 361 00:18:53,570 --> 00:18:56,820 Quorum unum est, quod hideInfo simpliciter InfoWindow claudit. 362 00:18:56,820 --> 00:19:00,020 Alius hic functio, quae tandem non nimis longe removere venalicium. 363 00:19:00,020 --> 00:19:03,580 Quod suus 'iens ut solvere omnia addendi titulum pertinet. 364 00:19:03,580 --> 00:19:04,960 Et hic est quaerere. 365 00:19:04,960 --> 00:19:08,610 Et hoc est, quia interest hoc scripsisse JavaScript code 366 00:19:08,610 --> 00:19:13,490 iens loqui de in search.php et impetro tergum server aliquod responsum. 367 00:19:13,490 --> 00:19:16,110 >> Tu quidem adhuc search.php postulo ad operandam, 368 00:19:16,110 --> 00:19:18,310 sed diximus implemented JavaScript code ut ' 369 00:19:18,310 --> 00:19:22,480 iens ad tractandum actu faciendo qui autem scrutatur a text arca archa. 370 00:19:22,480 --> 00:19:25,340 In particulari, renuntiatum quod hoc munus, hic, 371 00:19:25,340 --> 00:19:29,160 search appellavit search.php per modum dicitur 372 00:19:29,160 --> 00:19:31,072 intra JSON, quo vidimus in auditoria. 373 00:19:31,072 --> 00:19:32,780 Et syntax hic est paulo aliter 374 00:19:32,780 --> 00:19:37,110 inde in scholam, nos erant 'usura jQuery sic dicta promissio interface. 375 00:19:37,110 --> 00:19:38,479 Rursus in f. 376 00:19:38,479 --> 00:19:40,520 Hoc simpliciter opes nostrae nunc quia cogitationes ibi 377 00:19:40,520 --> 00:19:43,870 sunt enim duo aliqua specialia officia: postulo ut vocant, cum dot notatio 378 00:19:43,870 --> 00:19:46,230 statim adepto JSON hic vocans. 379 00:19:46,230 --> 00:19:47,510 Unus est factum. 380 00:19:47,510 --> 00:19:49,870 Unum vocatur deficient. 381 00:19:49,870 --> 00:19:51,790 Non potestis cogitare de illa ut successu tracto 382 00:19:51,790 --> 00:19:54,960 et defectum tracto iustus si aliquid it iniuriam. 383 00:19:54,960 --> 00:19:57,760 >> Intueamur nunc tandem officia in hoc par est. 384 00:19:57,760 --> 00:20:00,180 Hic ponitur esse functionem showInfo dicitur, quod 385 00:20:00,180 --> 00:20:03,090 ex his in unum ostendit info qui paulo fenestras info 386 00:20:03,090 --> 00:20:05,380 pops sursum ubi a user clicks venalicium. 387 00:20:05,380 --> 00:20:08,470 Hic ponitur aliud est ut update officium 388 00:20:08,470 --> 00:20:10,510 nos tibi amet. 389 00:20:10,510 --> 00:20:15,250 Illum determinat modum ornare. 390 00:20:15,250 --> 00:20:19,360 Quae sunt suae GPS coordinatas septentriones angulo meridiem et occidentem, et hic. 391 00:20:19,360 --> 00:20:22,780 Weve paravit HDP parametri hic et tum demum ab eis 392 00:20:22,780 --> 00:20:26,160 ad update.php, quod weve implemented etiam tibi. 393 00:20:26,160 --> 00:20:31,390 Quod tandem redit quidam JSON a lima vocavit update.php 394 00:20:31,390 --> 00:20:34,050 et tunc removet ullus venalicium in screen 395 00:20:34,050 --> 00:20:36,650 et super iterates quæ data est Revixit 396 00:20:36,650 --> 00:20:40,350 ex update.php, qui iterum array est iustus a JSON. 397 00:20:40,350 --> 00:20:45,130 Et tunc tandem addit, quia in titulum singulos illorum locorum, defectum tractantem 398 00:20:45,130 --> 00:20:47,750 aut errores, ut optime fieri. 399 00:20:47,750 --> 00:20:51,550 >> Sed, ut tibi, quam gustu about this project debugging ire posset, 400 00:20:51,550 --> 00:20:55,420 et scietis quia ego aperiens, in induxit hoc tab hic ad hoc URL, 401 00:20:55,420 --> 00:21:01,320 pset8 / articles.php? geo MMCXXXVIII =. 402 00:21:01,320 --> 00:21:04,050 Nunc, rursus, de articulis Implemented PHP habemus pro vobis 403 00:21:04,050 --> 00:21:06,320 Quo fit ut hoc non ita multum quod youll 'exsisto usura 404 00:21:06,320 --> 00:21:08,190 ad CIMICO sed ars. 405 00:21:08,190 --> 00:21:10,590 Notanter autem quia perscrutatus Cambridge zip code est hic, 406 00:21:10,590 --> 00:21:15,260 Nactus sum revertere et quidem JSON JSON aciem inside of quod obiicit 407 00:21:15,260 --> 00:21:17,640 nexus et sunt duo keys-- title. 408 00:21:17,640 --> 00:21:19,860 >> Et hoc functionality iam operatur pro vobis. 409 00:21:19,860 --> 00:21:24,330 Sed tincidunt ars iens ad hoc enim quasi domicilium 410 00:21:24,330 --> 00:21:31,710 search.php? aut MMCXXXVIII aut cambridge geo = quidquid user typed in, ut 411 00:21:31,710 --> 00:21:35,770 probare quos pretioso tamquam te ipsum conantur ut instar sicco exacte aut si quid 412 00:21:35,770 --> 00:21:38,510 search.php aut non operatur. 413 00:21:38,510 --> 00:21:41,720 >> Denique habes, Singulos paucis ante te. 414 00:21:41,720 --> 00:21:44,250 Vestri 'iens ut primum instrumenta ut et scriptum ut import 415 00:21:44,250 --> 00:21:46,520 in us.text legit in database. 416 00:21:46,520 --> 00:21:48,760 Tunc erant 'iens ut postulo vos ad effectum deducendi search.php 417 00:21:48,760 --> 00:21:51,320 ut se prorsus ut exprimatur. 418 00:21:51,320 --> 00:21:54,170 Tunc erant 'iens ut volo te ut focus in scripts.js 419 00:21:54,170 --> 00:21:57,520 et tandem ad effectum adducit illa iugo of todos, 420 00:21:57,520 --> 00:21:59,950 quia etiam configure et qui template, 421 00:21:59,950 --> 00:22:03,220 add venalicium, remove venalicium, et Novissime autem non minimum, 422 00:22:03,220 --> 00:22:04,330 personalis tactus. 423 00:22:04,330 --> 00:22:07,477 >> Quondam vos have vestri operationem mashup prorsus sicut sunt nostra, quae finis adpropinquavit 424 00:22:07,477 --> 00:22:09,560 uobis adicere personalis tangere tuum mashup, 425 00:22:09,560 --> 00:22:11,290 suus 'an aesthetic aut muneris. 426 00:22:11,290 --> 00:22:13,950 Tolle mashup sic semper paulum ad gradum proximum. 427 00:22:13,950 --> 00:22:18,330 Quamdiu tu ventilabis te ultra cum familiaritatem vestram amet ipsum 428 00:22:18,330 --> 00:22:20,840 et unum genus colligunt novae et ultricies nisi 429 00:22:20,840 --> 00:22:25,610 sicut mutando aliquid aesthetic Lorem usura ornare ut, 430 00:22:25,610 --> 00:22:28,070 scopum expectamus saturabitur anima eius. 431 00:22:28,070 --> 00:22:30,260 Inde nunc est, Forsit Pone Mashup VIII. 432 00:22:30,260 --> 00:22:33,070 Subsisto tuned pro magis in speciem et fortuna optima 433 00:22:33,070 --> 00:22:36,400 armamentum hoc, ultimus sit CS50 problemate semper. 434 00:22:36,400 --> 00:22:39,750 >> [MUSIC PLAYING] 435 00:22:39,750 --> 00:22:43,542