[Muzik bermain] 

DAVID J. MALAN: Hello. Mari kita berjalan-jalan melalui Set Masalah 8 Mashup, yang akan mencabar anda untuk menimba dari unsur-unsur untuk Peta Google dengan unsur-unsur dari Google News dan mash mereka bersama-sama ke dalam applet web yang membolehkan pengguna untuk mencari peta untuk berita tempatan ke bandar-bandar tertentu, bandar-bandar, dan kod zip. Untuk melakukan ini, kita akan mengintegrasikan beberapa HTML, CSS, PHP, SQL, JavaScript, dan teknik yang umumnya dikenali sebagai AJAX dalam perintah untuk mewujudkan ini imersif pengalaman pengguna. 

Mari kita pertama untuk Google Maps sendiri. Ini, sudah tentu, adalah mungkin antara muka yang biasa. Tetapi ternyata bahawa Peta Google juga menyediakan permohonan API-- pengaturcaraan interface-- melalui yang anda boleh mengambil unsur-unsur Peta Google dan mengintegrasikan mereka ke dalam aplikasi anda sendiri. Sesungguhnya, seluruh ini proses, anda akan untuk mencari beberapa URL terutamanya yang membantu disebut dalam spesifikasi bagi Set Masalah 8, khusus ini Bermula Panduan atau Panduan Pemaju untuk Peta Google API Versi 3 serta sebagai API Peta Google JavaScript rujukan v3, yang merupakan sedikit lebih sukar difahami untuk membaca tetapi sebenarnya mempunyai semua tahap rendah butir-butir mengenai apa fungsi atau kaedah dan benda-benda dan harta dan peristiwa sebenarnya datang dengan API, hampir sama dalam semangat kepada [didengar] muka surat. 

Sekarang jika kita lihat di Google News, anda akan mungkin melihat antara muka yang biasa di sini. Tetapi ternyata anda juga boleh mencari Google News untuk geografi tertentu melalui parameter HTTP dipanggil geo. Malah, jika saya mengezum masuk di sini, anda akan melihat bahawa Saya di news.google.com/news/section?geo=02138. Dan sesungguhnya, jika saya zum keluar, anda akan melihat bahawa saya melihat halaman dengan sejumlah besar pandangan tentang Cambridge, Massachusetts. 

Sementara itu, jika saya benar-benar mengubah URL tidak menjadi kod zip seperti ini, tetapi sesuatu yang sedikit Messier seperti Cambridge, Massachusetts +, di mana campur adalah cara anda mengekod yang aksara ruang di URL dan tekan Enter, anda akan melihat bahawa saya sebenarnya lihat hampir berita yang sama. Mungkin ia sedikit berbeza kerana sebenarnya Cambridge mempunyai kod zip berbilang. Sekarang bagaimana saya akan tahu itu dan, sebenarnya, bagaimana boleh saya entah bagaimana mengikat bandar-bandar dan bandar-bandar untuk kod zip dalam kes saya mahu membenarkan pengguna untuk melihat sama ada? Nah, ternyata bahawa terdapat laman web di luar sana yang dipanggil geonames.org yang inisiatif untuk mempunyai pangkalan data boleh diperolehi secara percuma dari semua macam maklumat geografi, bukan sahaja untuk Amerika Syarikat, tetapi juga bagi negara-negara lain juga. Malah, jika saya pergi ke URL ini di sini, yang juga disebutkan dalam masalah yang ditetapkan spesifikasi, anda akan melihat ia tiga penyenaraian sejumlah besar fail zip mana-mana yang boleh dimuat turun oleh anda. Malah, bagi masalah ini ditetapkan anda akan turun us.zip. Kini dalam fail ini, adalah keseluruhan sekumpulan data dalam format teks. Fail-fail yang hampir sama dengan yang CSV-- Comma Nilai Berpisah file-- tetapi ia sebenarnya menggunakan tab untuk menanda bidang. Sekarang, sementara itu, jika anda melihat penggunaan di sini apa yang saya telah menekankan, bidang dalam fail ini akan menjadi perkara-perkara seperti kod negara, poskod, nama tempat, dan kemudian, dalam bentuk tertentu atau lain-lain, negeri dan daerah-daerah, komuniti, dan banyak lagi. Malah, saya telah pun turun fail ini terlebih dahulu. Biar saya pergi ke hadapan dan membukanya here-- us.text-- dan, sememangnya, anda akan melihat jika saya tatal ke bawah ke talian 16792 anda akan melihat beberapa rekod untuk Cambridge, Massachusetts dan pelbagai kod zip itu. Apa yang anda lihat juga terdapat daerah, beberapa nombor yang saya tidak benar-benar memahami, tetapi juga semua jalan di sebelah kanan, beberapa GPS coordinates-- latitud dan longitud. Ini bagus kerana salah satu ciri-ciri Google Maps API adalah keupayaan untuk mengesan di mana anda berada geografi dari segi koordinat GPS. 

Sekarang mari kita mula memikirkan bagaimana untuk mula mengikat perkara-perkara bersama-sama. Kami telah memberikan anda secara keseluruhan sekumpulan kod pengedaran, dan pangkalan data MySQL. Malah, jika saya tarik phpMyAdmin mempunyai telah diimport, seperti yang anda akan, pset8.SQL, anda akan melihat jadual MySQL yang kelihatan seperti ini, medan ID, negara kod, poskod, nama tempat dan banyak lagi. Jenis-jenis semua orang-orang ruangan saya hanya diperolehi dengan membaca readme.text yang memfailkan di sini yang dinyatakan sama ada bidang yang ialah integer, atau varchar atau seumpamanya. 

Oleh itu, kita telah mencipta bahawa jadual untuk anda dan anda diberi arahan SQL untuk laksana untuk mewujudkan yang jadual dalam pangkalan data anda sendiri, tetapi ada benar-benar tiada data dalam lagi. Sebaliknya, anda akan perlu turun us.zip atau zip mana-mana negara memfailkan dari URL yang ada. Dan kemudian anda akan mempunyai untuk menulis skrip baris arahan dalam PHP itulah akan membuka teks yang memfailkan, melelar melalui talian yang, dan kemudian untuk setiap orang-orang garis melakukan bersisipan ke yang meletakkan meja dalam pangkalan data MySQL anda. Jadi pada akhir proses ini, anda akan telah menjalankan skrip yang akhirnya hanya sekali dalam teori. Pada hakikatnya anda akan mungkin menjalankannya sekumpulan kali ketika cuba untuk menetapkan pelbagai bug. 

Akhirnya, anda akan mempunyai pangkalan data yang sangat besar dengan beribu-ribu dan beribu-ribu baris geografi. Kemudian anda akan meletakkan import yang skrip mengetepikan sekali ia bekerja dan pangkalan data anda adalah bagus dan betul, dan kemudian anda akan bergerak ke sebenarnya melaksanakan Mashup itu sendiri. Mashup ini akan kelihatan sesuatu yang kecil seperti ini. Pada mashup.cs50.net, kita mempunyai penyelesaian kakitangan yang kelihatan sesuatu yang kecil seperti ini. Sesungguhnya, jika saya klik pada akhbar ini icon untuk Cambridge, Massachusetts, anda akan melihat yang berputar icon secara ringkas dan kemudian senarai diperintahkan, yang senarai berbulet artikel berkaitan dengan Cambridge, Massachusetts. Jika saya klik di Charlestown, Massachusetts, Saya akan melihat yang sama untuk bandar itu. Dan Jika saya klik pada Watertown, Massachusetts, tidak mungkin menjadi apa-apa berita dari Watertown, jadi anda akan melihat sesuatu seperti hari berita perlahan. 

Sekarang, sementara itu, di sebelah kiri atas adalah beberapa akrab Peta Google kawalan untuk membolehkan anda zum keluar, pan atas, ke bawah, ke kiri dan kanan, tetapi juga kotak carian kami meletakkan di sana. Jadi, jika saya mencari, terus-terang, satu-satunya kod zip lain yang saya tahu, 90210, kita sebenarnya akan melihat Beverly Hills, California. Apabila diklik ia membawa saya untuk California dan sejumlah besar berita mengenai Beverly Hills. Sekarang perhatikan, terlalu, apa yang berlaku di sana. Jika saya ini carian masa untuk 02138 atau Cambridge koma Massachusetts atau beberapa varian itu, anda akan mendapat jatuh turun autoselesai sedikit. Sekarang ini menggunakan plugin untuk perpustakaan dipanggil jQuery, dan plugin yang dipanggil typeahead. Kita membaca dokumentasi, turun yang js memfailkan bersepadu ke dalam kod pengedaran supaya anda akhirnya boleh menulis kod yang mengisi bahawa menu jatuh turun dengan auto Pilihan-pilihan atau cadangan auto. 

Sekarang kod pengedaran, walaupun, bahawa anda menerima tidak melakukan hampir sebanyak. Anda mendapatkan Google Map terbenam, dan anda mendapat kawalan atas sebelah kiri, dan anda mendapatkan kotak carian. Tetapi jika saya menaip sesuatu seperti 02138, tiada tempat didapati lagi. Jadi yang akan menjadi salah satu matlamat kami di sini. Selain itu, jika anda mengambil langkah yang belakang dan melihat peta itu sendiri, tidak ada berita sekalipun. Walaupun saya klik dan seret, tiada penanda sebenarnya muncul untuk berita kerana yang cabaran yang tinggal untuk anda juga. 

Mari kita lihat, maka pada kod pengagihan. Sebaik sahaja anda telah dimuat turun pset8.zip dan unzipped ia ke dalam direktori vhost anda dalam Appliance CS50, anda akan melihat ini direktori di sini di dalam. Bin-- yang umumnya bermaksud binari untuk programs-- laku termasuk, seperti dalam pset7, beberapa PHP fail yang fail lain termasuk, kemudian awam, iaitu fail-fail yang perlu menjadi diakses oleh orang awam kepada pengguna dengan pelayar. Mari kita lihat di Direktori bin, dan kami akan melihat bahawa terdapat fail ada sudah dipanggil Import. Jika kita membuka ini dengan gedit, kita akan melihat bahawa, malangnya, tidak banyak ada. Segala yang ada di sana, walaupun, adalah shebang di bahagian atas yang menyatakan yang interpreter-- dalam kes ini PHP-- harus digunakan untuk benar-benar melaksanakan fail ini. Tetapi di mana ia mengatakan TODO adalah di mana anda akan perlu menulis beberapa kod yang mungkin memerlukan config fail itu dalam termasuk direktori seperti yang telah kami lakukan sebelum dengan fail PHP. Dan kemudian anda akan perlu entah bagaimana membuka us.text yang anda mungkin telah unzipped sudah. Kemudian anda akan perlu melelar lebih garisan dalam fail itu, mungkin menggunakan beberapa fungsi disyorkan dalam penentuan itu. Kemudian masukkan setiap orang garis ke dalam pangkalan data MySQL dengan menggunakan fungsi pertanyaan tersebut, yang kami sekali lagi kepada kamu with-- atau varian sekurang-kurangnya satu mengenainya dalam functions.php, yang kita akan melihat dalam seketika. 

Sekarang mari kita menutup import dan kembali ke direktori kami dan kali ini pergi ke termasuk. Dan jika saya lakukan ls di sana, anda akan melihat tiga fail yang seperti Set Masalah 7. Dan mari kita lihat yang cepat, misalnya, di config.php. Di sana, adalah lebih sedikit garis daripada sebelumnya, dan ia seolah-olah fail ini termasuk constants.php dan functions.php. Kami menggunakan yang sedikit berbeza teknik kali ini untuk benar-benar menentukan fail ini berada relatif untuk direktori semasa __ DIR__ mewakili apa direktori ini fail, config.php, adalah dirinya dalam. Jadi ini adalah lebih cara jelas menyatakan apa fail lain yang anda ingin memerlukan. 

Sekarang jika saya menutup fail ini dan membuka constants.php sebaliknya, anda akan melihat fail yang sangat mengingatkan Masalah untuk Set 7 dan juga, walaupun dengan pangkalan data yang berbeza dipanggil pset8. Akhir sekali, dalam functions.php, kita akan melihat hanya satu fungsi masa ini dipanggil pertanyaan. Ini adalah hampir sama kecuali kita mengendalikan kesilapan kali ini sedikit berbeza, tetapi ia adalah penggunaan yang sama seperti dalam masalah menetapkan tujuh. 

Sekarang mari kita kembali ke dalam pset8 kami direktori, pergi ke awam, dan di sana jika saya lakukan ls, anda akan melihat this-- articles.php, index.html, search.php, dan update.php-- semua fail. Dan kemudian fon css, img, dan Direktori js agak seperti pset7. 

Mari kita lihat pada index.html, yang akan menjadi benar-benar yang pintu masuk ke smashup itu. Sekarang dalam index.html, anda akan melihat keseluruhan sekumpulan elemen pautan di kepala, secara khusus, untuk bootstrap untuk kita sendiri CSS diikuti oleh sejumlah besar skrip tag untuk perkara-perkara seperti peta, API sendiri, penanda khas dengan label utiliti yang telah dinyatakan dalam spesifikasi boleh didapati untuk anda, jQuery sendiri, bootstrap sendiri, dan perpustakaan lain dipanggil garis yang kita bercakap tentang dalam spec. Underscore.js seperti jquery.js sebuah perpustakaan JavaScript yang mempunyai sejumlah besar fungsi bahawa ramai orang dalam hasrat dunia wujud dalam dirinya JavaScript. Jadi semua ini adalah sebenarnya cukup popular. Kami juga telah disebut typeahead yang merupakan perpustakaan yang adakah itu autoselesai jatuh turun dan akhirnya pautan ke JavaScript kami sendiri. 

Sementara itu, dan mungkin bersyukur, Mashup ini didorong oleh yang sikit HTML turun di sini di bahagian bawah. Notis bahawa kami telah dinyatakan dalam sebuah div badan kita cecair-bekas kelas. Ini, setiap bootstrap ini dokumentasi, hanya bermakna div ini akan mengisi port pandang atau tetingkap pelayar sepenuhnya. 

Sementara itu, di bawah yang kita ada div yang yang yang dibuka dan ditutup serta-merta dengan ID yang unik peta kanvas. Ini sekarang adalah dari Google Peta dokumentasi untuk API, di mana saya hanya perlu mempunyai div kosong ke dalam yang menyuntik, akhirnya, seorang Peta Google sebenar. Tetapi lebih kepada yang dalam hanya sedikit. 

Akhir sekali, terdapat bentuk yang bahagian dalam sini yang Laksana kotak teks di bahagian atas kiri di muka kita untuk mencari. Perhatikan bahawa kita telah menggunakan sedikit bootstrap di sini too-- perkara seperti bentuk-bentuk dalam baris dan kumpulan. Kami telah diberikan bekas ID unik bentuk. Dan kemudian, akhirnya, saya benar-benar mempunyai jenis input, yang cukup akrab, yang ID adalah q. Hanya konvensyen. Q untuk query-- boleh mempunyai telah dipanggil apa-apa. Kemudian pemegang tempat itu, Sementara itu, adalah bandar atau negeri, dan poskod yang anda mungkin ingat melihat dalam Mashup kami demo awal. Mari kita menutup fail ini. 

Sekarang kita lihat pada fail PHP yang menanti dan kemudian fail JavaScript. Dalam fail PHP kita, sudah tentu kita telah dilaksanakan untuk anda, misalnya, kemas kini. Update.php-- kita tidak akan menghabiskan besar jumlah masa pada here-- secara ringkas adalah fail yang kami Kod JavaScript akan untuk menghubungi melalui AJAX yang teknik tak segerak itulah dibina ke dalam JavaScript hari ini itulah akan membolehkan kita untuk meminta update.php untuk maklumat lanjut. 

Secara khusus, bila-bila masa pengguna drags peta atau memberi carian yang melompat pengguna ke lokasi yang lain, kod JavaScript kami, seperti yang kita tidak lama lagi akan melihat, adalah akan memanggil update.php dan meminta 10 atau jadi penanda dalam viewport berasaskan pada koordinat GPS daripada bahagian atas dan bawah penjuru peta itu. Kemudian kita boleh repopulate peta sekarang pengguna telah bergerak skrin dalam perintah untuk melihat 10 mungkin baru penanda bagi bandar-bandar yang berbeza. Sementara itu, fail ini akhirnya akan melaksanakan pertanyaan SQL terhadap pangkalan data kami tempat meja yang dipanggil akan kembali mereka 10 atau kurang lokasi. 

Sementara itu, dalam articles.php, merupakan satu lagi memfailkan kami telah ditulis keseluruhannya. Ia adalah hampir sama dalam semangat untuk Fungsi lookup Set Masalah 7 ini, yang dihubungi Yahoo Kewangan untuk anda. Fail ini kenalan Google News untuk anda, akhirnya menarik yang boleh dibaca oleh mesin version-- dalam sesuatu dipanggil RSS format-- berita untuk Cambridge atau Beverly Hills atau apa sahaja bandar yang telah anda cari untuk berdasarkan geoparameter itu. Kami menghuraikan bahawa RSS, yang hanya jenis bahasa markup dipanggil XML, dan kemudian kita sebenarnya kembalikan kepada penyemak imbas anda dan kod JavaScript anda, secara khusus, dalam format yang dipanggil JSON, JavaScript Objek notasi. Sekarang anda akan melihat dalam specification-- kami tunjukkan anda bagaimana anda sebenarnya boleh melihat beberapa back-- kedatangan JSON bahawa fungsi ini akhirnya membolehkan anda menempatkan penduduk yang menu pop jadi bahawa apabila anda klik pada penanda di peta anda sebenarnya melihat sejumlah besar peluru, setiap yang pautan kepada artikel. 

Sekarang mari kita lihat pada terkini File PHP yang, mujurlah, tidak mempunyai banyak berlaku on-- hanya TODO cukup besar. Sekarang fail ini mengisytiharkan array dipanggil tempat. Dan kemudian akhirnya cetakan yang pelbagai dalam JSON format-- cantik-mencetaknya hanya supaya perkara yang lebih mudah untuk debug. Malangnya, dalam pertengahan terdapat TODO ini, yang memerlukan anda untuk mencari pangkalan data bagi tempat-tempat yang sepadan geo HTTP parameter. 

Dan sesungguhnya, ini akan menjadi salah satu challenges-- anda untuk melaksanakan fungsi ini di sini supaya apabila anda menghubungi fail ini dengan URL seperti carian. php? geo = sesuatu, kod anda akhirnya akan mengembalikan JSON pelbagai semua tempat di anda jadual pangkalan data yang sesuai dengan input itu. Jadi jika jenis pengguna di Cambridge, fail anda di sini search.php akhirnya kembali pelbagai JSON untuk semua perlawanan untuk Cambridge, yang mungkin berada di Massachusetts tetapi boleh menjadi lebih mana-mana sahaja. 

Akhir sekali, mari kita lihat pada dua fail yang ultimately-- statik fail CSS anda dan fail JavaScript anda. Jika saya pergi ke direktori CSS kami, ada sejumlah besar fail ada, tetapi kebanyakan mereka adalah perpustakaan. Saya akan melihat, secara khusus, di styles.css, yang CSS global kami sendiri itulah akan menyesuaikan dgn mode Mashup ini keseluruhannya. Saya akan serahkan kepada anda untuk membaca keseluruhan komen-komen di sini, tetapi, secara ringkas, ini adalah CSS yang memastikan kami Mashup, secara lalai di luar kotak, kelihatan betul-betul cara kita mahu it-- dengan peta mengisi pelabuhan pandangan dan dengan carian sehingga kotak di sebelah kiri atas. Kami juga telah mengambil kebebasan stylizing yang typeahead jatuh turun Menu sedikit juga. 

Fail yang paling penting mungkin kerana masalah ini ditetapkan adalah salah satu ini lepas, scripts.js. Di dalam direktori JS anda adalah lebih fail. Kesemua mereka adalah fail perpustakaan kecuali yang satu ini, scripts.js. Jika kita membuka sehingga ini, mari kita mengambil kami pelancongan akhir melalui fungsi-fungsi yang dibina ke dalam fail ini untuk anda dan perhatian panggilan kepada todos yang mendatang. 

Di bahagian atas gambar ini, tiga pembolehubah global. Satu untuk peta, yang akan menjadi rujukan kepada peta Google kami. Anda boleh memikirkan ia semacam sebagai penunjuk. Sementara itu, kami mempunyai lain pembolehubah global dipanggil info, yang muncul untuk menjadi menyimpan nilai pulangan panggilan untuk google.maps.InfoWindow baru. JavaScript menyokong objek yang yang hampir sama dalam semangat untuk tupang. Dan apa baris ini untuk tujuan kami lakukan mewujudkan satu maklumat baru tetingkap dalam memori dan kemudian menjaga sekitar rujukan kepadanya dalam pembolehubah yang dipanggil Maklumat. Dan di antara mereka, Sementara itu, adalah apa yang kelihatan menjadi JavaScript kosong pelbagai dipanggil penanda. Semua orang-orang ikon akhbar, atau anda mungkin memilih ikon lain sama sekali, akan disimpan akhirnya dalam pelbagai ini supaya kita boleh dengan mudah menambah peta dan mengeluarkannya dari peta. 

Sekarang mari kita tatal ke bawah sedikit dan jagoan melalui kod yang akan menjadi dilaksanakan sebaik sahaja DOM atau dokumen model objek atau Laman dirinya bersedia. Ingat bahawa sintaks ini di sini hanya menetapkan bahawa kod berikut hendaklah dilaksanakan hanya apabila pelayar telah selesai memuatkan segala sesuatu yang lain. 

Kami pertama mengisytiharkan sejumlah besar gaya, yang berakhir stylizing peta seperti spec. Kami kemudian mengisytiharkan sejumlah besar pilihan, yang selanjutnya menyesuaikan Google peta yang kami akan membenamkan. Kami kemudian gunakan sedikit kod jQuery, yang dijelaskan dalam detail sedikit lebih dalam spec, untuk merebut bahawa unsur, peta-kanvas bahawa kita begitu dikenal pasti secara unik. Dan kemudian baris ini di sini adalah apa yang seolah-olah ajaib memberikan kami peta Google di dalam permohonan kita sendiri, menyimpan rujukan dengannya dalam pembolehubah yang dipanggil peta. 

Akhir sekali, turun di sini kita mendaftar apa yang dikenali sebagai pendengar yang. Fikirkan cara back--, cara back-- untuk minggu sifar dalam CS50 apabila kita memandang Gores dan sokongan melalui berjalan-jalan melalui untuk perkara-perkara yang dipanggil acara dan siaran. Anda mungkin tidak digunakan sendiri, tetapi ia mekanisme di mana satu pelayar dalam kes ini boleh mendapatkan perhatian kita ketika itu bersedia untuk benar-benar melaksanakan beberapa kod. Dalam kes ini, ia akan mendengar untuk peta untuk sebuah acara yang dipanggil terbiar. Ini bermakna bahawa pelayar yang mempunyai selesai memuatkan Peta Google. Pada ketika ini fungsi yang dipanggil konfigur harus akhirnya dilaksanakan. Fungsi itu, mengkonfigurasi, kita akan melihat, ditulis oleh kami. 

Sekarang turun di sini adalah fungsi yang bahawa, malangnya, hanya penanda TODO add. Per spec. anda akan memerlukan untuk menulis kod yang sebenarnya menambah marker-- sama ada ia kelihatan seperti surat khabar, atau jelujur ibu jari, atau sesuatu else-- untuk peta Google. Di sini kini adalah fungsi yang dipanggil konfigur. Saya akan serahkan kepada anda untuk membaca melalui ini dengan lebih terperinci, tetapi sedar bahawa kita menambah sekumpulan lebih Pendengar supaya kita boleh melaksanakan kod apabila pengguna klik pada dan drags peta. Kami juga mempunyai kod di sini bahawa kepada asal yang typeahead plugin supaya jatuh turun Menu sebenarnya berfungsi. 

Tetapi mari kita memberi tumpuan kepada hanya satu beberapa tempat di sini. Khususnya, ini lakukan di sini. Saya akan menangguhkan kepada talian yang dokumentasi dan spesifikasi yang untuk mengisi dalam TODO ini. Tetapi secara ringkas, perpustakaan ini typeahead membolehkan anda untuk lulus dalam apa yang umumnya dikenali sebagai templat, yang mempunyai beberapa pemegang tempat pembolehubah hampir sama dalam semangat untuk printf ini%. * s. Tetapi dalam kes ini, template setiap spec yang membolehkan anda untuk menentukan apa pembolehubah anda mahu untuk menyuntik daripada data yang yang datang kembali dari sesuatu seperti PHP fail yang telah anda tulis yang mengeluarkan output JSON. 

Sekarang turun di sini sedar bahawa kita adalah mendengar untuk pilihan typeahead apabila pengguna sebenarnya menjalankan yang mencari dan memilih nilai. Ini adalah bagaimana kita sebenarnya akan mendengar bahawa dan melaksanakan beberapa kod hasilnya. Kemudian kami terus mengkonfigurasi Mashup yang hanya sedikit. Dan, akhirnya, kita panggil fungsi update. Ia mengemas kini penanda pada skrin. Lanjut mengenai bahawa dalam seketika. Sementara itu, terdapat beberapa fungsi kecil di sini. Satu di antaranya adalah hideInfo yang hanya menutup InfoWindow. Fungsi yang lain di sini, yang akhirnya tidak akan menjadi terlalu panjang, keluarkan penanda. Itu akan membatalkan apa sahaja fungsi penanda add anda tidak. Dan kemudian turun di sini adalah carian. Dan yang satu ini adalah menarik kerana kita telah menulis kod JavaScript yang itu akan bercakap kepada search.php pada pelayan dan kembali beberapa tindak balas. 

Anda, sudah tentu, akan masih perlu melaksanakan search.php, tetapi kami telah melaksanakan Kod JavaScript itulah akan mengendalikan sebenarnya berbayar mencari dari kotak teks. Khususnya, notis bahawa fungsi ini di sini, carian, tidak memanggil search.php melalui kaedah yang dipanggil mendapatkan JSON, yang kita lihat dalam kuliah. Dan sintaks di sini adalah sedikit berbeza dari kuliah kerana kami menggunakan jQuery dipanggil muka janji. Lebih banyak yang di dalam spec. Ini bermakna untuk kami tujuan sekarang bahawa terdapat dua fungsi khas kami perlu memanggil dengan tatatanda dot di sini serta-merta selepas memanggil mendapatkan JSON. Satu dipanggil dilakukan. Satu dipanggil gagal. Anda boleh memikirkan ini sebagai pengendali kejayaan dan pengendali kegagalan hanya dalam kes sesuatu yang tidak kena. 

Sekarang mari kita lihat yang lalu beberapa fungsi dalam fail ini. Down di sini adalah fungsi yang dipanggil showInfo, yang menunjukkan maklumat dalam salah satu info sedikit tingkap yang boleh timbul apabila pengguna klik penanda. Down di sini lagi adalah bahawa fungsi kemas kini yang kami telah melaksanakan untuk anda. Ia menentukan batas-batas peta. Apakah koordinat GPS yang timur laut dan barat daya sudut di sini. Kami telah menyediakan beberapa parameter HDP di sini dan kemudian berlalu mereka akhirnya untuk update.php, yang kita telah juga dilaksanakan untuk anda. Yang akhirnya mendapat kembali beberapa JSON dari fail yang dipanggil update.php dan kemudian memindahkan apa-apa penanda pada skrin dan kemudian lelaran lebih data yang yang kembali dari update.php, yang lagi hanya pelbagai JSON. Dan kemudian ia akhirnya menambah penanda untuk setiap tempat-tempat, kegagalan pengendalian atau kesilapan yang mungkin berlaku dengan baik. 

Sekarang hanya untuk memberi anda rasa bagaimana anda mungkin pergi tentang debugging projek ini, menyedari bahawa saya telah dibuka pada memajukan tab ini di sini untuk URL ini, pset8 / articles.php? geo = 02138. Kini, sekali lagi, artikel tentang PHP kita dilaksanakan untuk anda jadi ini tidak begitu banyak apa yang anda boleh menggunakan untuk debug, tetapi teknik. Notis bahawa saya telah cari Kod zip Cambridge di sini, dan saya telah mendapat kembali, sesungguhnya, yang JSON pelbagai objek JSON bahagian dalam yang dua pautan keys-- dan tajuk. 

Jadi fungsi ini kerja-kerja sudah untuk anda. Tetapi teknik ini secara manual akan kepada URL seperti ini untuk sesuatu seperti search.php? geo = cambridge atau 02138 atau apa sahaja yang pengguna telah ditaip perlu membuktikan yang tidak ternilai kerana anda, diri anda, cuba untuk memikirkan sama ada tepat atau mengapa search.php bekerja atau tidak. 

Akhirnya kemudian, anda mempunyai a todos beberapa di hadapan anda. Anda akan alat pertama bahawa skrip import yang membaca dalam us.text ke dalam pangkalan data anda. Anda kemudian akan memerlukan untuk melaksanakan search.php supaya ia berkelakuan betul-betul seperti yang dinyatakan. Anda kemudian akan mahu memberi tumpuan kepada scripts.js dan akhirnya melaksanakan mereka beberapa todos, termasuk untuk mengkonfigurasi dan template yang, menambah penanda, keluarkan penanda, dan kemudian bertahan, tetapi tidak kurangnya, satu sentuhan peribadi. 

Setelah anda mempunyai kerja Mashup anda agak seperti kami, matlamat di tangan adalah untuk anda untuk menambah peribadi sentuh untuk Mashup anda, apakah itu estetik atau fungsi. Ambil Mashup yang pernah jadi sedikit ke tahap yang seterusnya. Selagi anda menolak diri anda di luar kebiasaan anda dengan spec itu sendiri dan mengambil satu teknik baru, walaupun ia hanya sesuatu yang estetik seperti mengubah susun atur peta yang anda gunakan, skop yang kami jangka akan berpuas hati. Yang kemudian adalah Set Masalah 8 Mashup. Nantikan lebih dalam spesifikasi dan selamat mencuba menangani ini, lalu anda Masalah CS50 set lamanya. 

[Muzik bermain]