>> [MUSIC PLAYING]
>> DAVID J. Malan: Hello.
Mari kita berjalan-jalan melalui Masalah Set 8 Mashup,
yang akan menantang Anda untuk memanfaatkan elemen untuk Google Maps
dengan unsur-unsur dari Google News dan mash mereka bersama-sama ke dalam applet web yang
memungkinkan pengguna untuk mencari peta untuk berita lokal
ke kota-kota tertentu, kota, dan kode pos.
Untuk melakukan hal ini, kita akan mengintegrasikan beberapa HTML, CSS, PHP, SQL,
JavaScript, dan teknik umumnya dikenal sebagai AJAX dalam rangka
untuk membuat ini immersive pengalaman pengguna.
>> Mari kita pertama untuk Google Maps itu sendiri.
Ini, tentu saja, mungkin antarmuka akrab.
Tapi ternyata bahwa Google Maps juga menyediakan aplikasi API--
pemrograman interface-- melalui mana Anda dapat mengambil unsur Google Maps
dan mengintegrasikan mereka ke dalam aplikasi Anda sendiri.
Memang, sepanjang ini Proses, Anda akan
untuk menemukan beberapa URL sangat membantu bahwa
disebutkan dalam spesifikasi untuk Masalah Set 8,
khusus ini Memulai Panduan atau Panduan Pengembang
untuk Google Maps API Versi 3 juga sebagai Google Maps API JavaScript
referensi v3, yang merupakan sedikit lebih misterius untuk membaca
namun sebenarnya memiliki semua tingkat yang lebih rendah rincian tentang fungsi apa atau metode
dan benda-benda dan sifat dan peristiwa benar-benar datang dengan API,
sangat mirip dalam roh untuk [tidak terdengar] halaman.
>> Sekarang jika kita melihat di Google News, Anda akan
mungkin melihat antarmuka akrab di sini.
Tapi ternyata Anda juga dapat mencari Google News untuk geografi tertentu
melalui parameter HTTP yang disebut geo.
Bahkan, jika saya memperbesar di sini, Anda akan melihat bahwa
Aku ada di news.google.com/news/section?geo=02138.
Dan, memang, jika aku tampilannya keluar, Anda akan melihat bahwa aku
melihat halaman dengan sejumlah besar pandangan tentang Cambridge, Massachusetts.
>> Sementara itu, jika saya benar-benar mengubah URL tidak menjadi kode pos seperti ini,
tapi sesuatu yang berantakan sedikit seperti Cambridge, Massachusetts +,
di mana plus adalah cara Anda mengkodekan karakter ruang dalam URL dan tekan Enter,
Anda akan melihat bahwa saya benar-benar melihat hampir berita yang sama.
Mungkin itu sedikit berbeda karena Cambridge sebenarnya
memiliki beberapa kode pos.
Sekarang bagaimana aku tahu itu dan, pada kenyataannya, bagaimana mungkin aku entah bagaimana
dasi kota-kota untuk kode pos dalam kasus saya
ingin memungkinkan pengguna untuk mencari baik?
Nah, ternyata ada website di luar sana disebut
geonames.org yang inisiatif untuk memiliki
database yang tersedia secara bebas dari semua macam informasi geografis,
tidak hanya bagi AS, tetapi juga bagi negara-negara lain juga.
Bahkan, jika saya pergi ke URL ini di sini, yang juga disebutkan dalam masalah set
spesifikasi, Anda akan melihat tiga daftar sejumlah besar file zip
saja yang dapat di-download oleh Anda.
Bahkan, untuk masalah ini ditetapkan Anda akan men-download us.zip.
Sekarang dalam file ini, adalah keseluruhan sekelompok data dalam format teks.
File-file ini sangat mirip dengan CSV-- Comma Separated Values ​​file--
tapi itu benar-benar menggunakan tab untuk membatasi bidang.
Sekarang, sementara itu, jika Anda melihat di sini apa yang saya disorot,
bidang dalam file ini akan untuk hal-hal seperti kode negara,
kode pos, nama tempat, dan kemudian, dalam beberapa bentuk
atau lainnya, negara bagian dan kabupaten, masyarakat, dan banyak lagi.
Bahkan, saya sudah sudah download file ini terlebih dahulu.
Biarkan aku pergi ke depan dan membukanya di sini- us.text-- dan, memang, Anda akan
melihat apakah saya gulir ke bawah ke baris 16.792 Anda akan melihat beberapa catatan untuk Cambridge,
Massachusetts dan berbagai kode pos-nya.
Apa yang Anda lihat juga ada daerah, beberapa nomor yang saya tidak benar-benar
mengerti, tetapi juga semua jalan di sebelah kanan,
beberapa GPS coordinates-- lintang dan bujur.
Ini bagus karena salah satu fitur Google Maps API
adalah kemampuan untuk mendeteksi di mana Anda secara geografis
dalam hal koordinat GPS.
>> Sekarang mari kita mulai mencari cara untuk mulai mengikat hal-hal ini bersama-sama.
Kami telah memberikan seluruh sekelompok kode distribusi,
serta database MySQL.
Bahkan, jika saya menarik phpMyAdmin memiliki sudah diimpor, karena Anda akan segera,
pset8.SQL, Anda akan melihat tabel MySQL yang terlihat seperti ini, medan ID, negara
kode, kode pos, nama tempat dan banyak lagi.
Jenis semua orang kolom saya diturunkan hanya
dengan membaca readme.text yang mengajukan sini bahwa ditentukan
apakah lapangan adalah bilangan bulat, atau varchar atau sejenisnya.
>> Jadi kami telah menciptakan bahwa meja untuk Anda dan memberi Anda perintah SQL
untuk mengeksekusi untuk menciptakan tabel dalam database Anda sendiri,
tapi sebenarnya ada ada data di dalamnya belum.
Sebaliknya, Anda akan harus mendownload us.zip atau zip setiap negara
file dari URL di sana.
Dan kemudian Anda akan harus menulis script baris perintah dalam PHP yang
akan membuka teks yang file, iterate atas lini,
dan kemudian untuk masing-masing garis melakukan insert
menjadi yang menempatkan tabel dalam database MySQL Anda.
Jadi pada akhir proses ini, Anda akan telah menjalankan script yang pada akhirnya
hanya sekali dalam teori.
Pada kenyataannya Anda mungkin akan menjalankannya beberapa kali
ketika mencoba untuk memperbaiki berbagai bug.
>> Pada akhirnya, Anda akan memiliki Database yang sangat besar dengan ribuan
dan ribuan baris geografis.
Kemudian Anda akan menempatkan impor yang Script samping setelah itu bekerja
dan database Anda bagus dan benar, dan kemudian
Anda akan melanjutkan untuk benar-benar melaksanakan mashup sendiri.
Mashup tersebut akan terlihat sedikit sesuatu seperti ini.
Pada mashup.cs50.net, kami memiliki solusi staf
yang terlihat sedikit sesuatu seperti ini.
Memang, jika saya klik pada koran ini ikon untuk Cambridge, Massachusetts,
Anda akan melihat sebuah berputar ikon sebentar dan kemudian
daftar ordered, a daftar bullet dari artikel
terkait dengan Cambridge, Massachusetts.
Jika saya klik Charlestown, Massachusetts,
Aku akan melihat hal yang sama pada kota itu.
Dan jika saya klik Watertown, Massachusetts,
ada mungkin tidak ada berita dari Watertown,
sehingga Anda akan melihat sesuatu seperti lambat hari berita.
>> Sekarang, sementara itu, di sebelah kiri atas adalah beberapa akrab Google Maps kontrol
untuk membiarkan Anda zoom out, pan atas, bawah, kiri, dan kanan,
tetapi juga kotak pencarian yang kita diletakkan di sana.
Jadi jika saya mencari, terus terang, satu-satunya kode pos lain yang saya tahu,
90210, kita akan benar-benar melihat Beverly Hills, California.
Ketika diklik itu membuat saya California dan seluruh banyak
berita tentang Beverly Hills.
Sekarang perhatikan juga, apa yang terjadi di sana.
Jika saya ini waktu pencarian untuk 02138 atau bahkan Cambridge Massachusetts koma atau
varian daripadanya, Anda mendapatkan sedikit dropdown autocomplete.
Sekarang ini menggunakan plugin untuk perpustakaan yang disebut jQuery,
dan plugin yang disebut typeahead.
Kami hanya membaca dokumentasi,
didownload dengan Js berkas terpadu ke dalam kode distribusi sehingga Anda
akhirnya dapat menulis kode yang mengisi bahwa menu dropdown dengan auto
Pilihan atau saran auto.
>> Sekarang kode distribusi, meskipun, bahwa Anda terima tidak melakukan hampir sama banyak.
Anda mendapatkan Google Map tertanam, dan Anda mendapatkan kontrol atas kiri,
dan Anda mendapatkan kotak pencarian.
Tapi kalau saya ketik sesuatu seperti 02138, tidak ada tempat yang belum ditemukan.
Sehingga akan menjadi salah satu tujuan kami di sini.
Selain itu, jika Anda mengambil langkah kembali dan melihat peta itu sendiri,
tidak ada berita apapun.
Bahkan jika saya klik dan drag, tidak ada penanda sebenarnya
muncul kabar karena Tantangan yang tersisa untuk Anda juga.
>> Mari kita lihat kemudian pada kode distribusi.
Setelah mengunduh pset8.zip dan unzip
ke dalam direktori vhost Anda di CS50 Appliance,
Anda akan melihat ini direktori di sini dalam.
Bin-- yang umumnya singkatan biner untuk programs-- executable
termasuk, seperti dalam pset7, beberapa PHP file yang file lain termasuk,
maka masyarakat, yang file yang perlu
untuk dapat diakses oleh publik untuk pengguna dengan browser.
Mari kita lihat di direktori bin, dan kita akan
melihat bahwa ada file ada yang sudah disebut Impor.
Jika kita membuka ini dengan gedit, kita akan melihat yang, sayangnya, tidak ada banyak
ada.
Semua yang ada di sana, meskipun, adalah peristiwa di atas
yang menentukan yang interpreter-- dalam kasus ini PHP--
harus digunakan untuk benar-benar mengeksekusi file ini.
Tapi kemudian di mana ia mengatakan TODO adalah di mana Anda
akan perlu menulis beberapa kode yang mungkin memerlukan konfigurasi
file yang ada di direktori termasuk seperti yang telah kami lakukan sebelumnya dengan file PHP.
Dan kemudian Anda akan harus entah bagaimana membuka
us.text yang Anda mungkin telah membuka ritsleting sudah.
Maka Anda akan harus iterate atas baris dalam file tersebut,
mungkin menggunakan beberapa fungsi disarankan dalam spesifikasi.
Kemudian masukkan masing-masing baris ke dalam database MySQL
dengan menggunakan fungsi query, yang kami lagi asalkan Anda with--
atau varian setidaknya daripadanya di functions.php,
yang kita lihat hanya dalam beberapa saat.
>> Sekarang mari kita menutup impor dan kembali ke direktori kami dan kali ini masuk ke
termasuk.
Dan jika saya lakukan ls di sana, Anda akan melihat tiga file cukup seperti Soal Set 7.
Dan mari kita lihat, misalnya, di config.php.
Di sana, adalah sedikit baris dari sebelumnya, dan
Sepertinya file ini termasuk constants.php dan functions.php.
Kami menggunakan sedikit berbeda Teknik kali ini untuk benar-benar
menentukan bahwa file ini relatif ke direktori saat __ DIR__
merupakan direktori apapun ini File, config.php, itu sendiri dalam.
Jadi ini adalah lebih Cara eksplisit menentukan
apa file lain yang ingin Anda butuhkan.
>> Sekarang jika saya menutup file ini dan membuka constants.php sebaliknya,
Anda akan melihat file sangat mengingatkan Soal Set 7 itu juga, meskipun
dengan database yang berbeda disebut pset8.
Akhirnya, di functions.php, kita akan melihat hanya satu fungsi
kali ini disebut query.
Ini hampir sama kecuali kita menangani kesalahan kali ini sedikit
berbeda, tapi penggunaan adalah sama seperti di permasalahan yang tujuh.
>> Sekarang mari kita kembali ke pset8 kami direktori, masuk ke masyarakat, dan di sana
jika saya melakukan ls, Anda akan melihat this-- articles.php, index.html, search.php,
dan update.php-- semua file.
Dan kemudian css font, img, dan direktori js cukup seperti pset7.
>> Mari kita lihat index.html, yang
akan benar-benar entry point untuk smashup tersebut.
Sekarang dalam index.html, Anda akan melihat seluruh sekelompok elemen link dalam kepala,
khusus, untuk bootstrap untuk kita sendiri CSS diikuti oleh sejumlah besar naskah
tag untuk hal-hal seperti peta, API sendiri, penanda khusus dengan label
utilitas yang telah disebutkan di spesifikasi tersedia untuk Anda,
jQuery itu sendiri, bootstrap sendiri, dan perpustakaan lain
disebut garis bawah yang kita berbicara tentang di spec.
Underscore.js seperti jquery.js adalah library JavaScript
yang memiliki sejumlah besar fungsi bahwa banyak orang di dunia keinginan
ada dalam JavaScript itu sendiri.
Jadi semua ini adalah sebenarnya cukup populer.
Kami juga telah menyebutkan typeahead yang merupakan perpustakaan yang
apakah itu autocomplete dropdown dan akhirnya link ke JavaScript kita sendiri.
>> Sementara itu, dan mungkin untungnya, Mashup ini
didorong oleh relatif sedikit HTML di sini di bagian bawah.
Perhatikan bahwa kita telah ditentukan div di tubuh kita cairan kelas kontainer.
Ini, bootstrap per dunia dokumentasi, hanya
Artinya div ini akan mengisi viewport atau jendela browser penuh.
>> Sementara itu, di bawah bahwa kita memiliki div yang dibuka dan segera ditutup
dengan unik ID peta kanvas.
Ini sekarang adalah dari Google Maps dokumentasi
untuk API, dimana saya hanya perlu memiliki div kosong di mana untuk menyuntikkan,
akhirnya, sebuah Google Maps yang sebenarnya.
Tapi lebih pada bahwa hanya sedikit.
>> Akhirnya, ada bentuk dalam sini yang
mengimplementasikan kotak teks up kiri atas dalam antarmuka kami untuk mencari.
Perhatikan bahwa kami telah digunakan sedikit bootstrap
di sini too-- hal-hal seperti Bentuk-inline dan bentuk-kelompok.
Kami telah memberikan bekas unik ID bentuk.
Dan kemudian, akhirnya, aku benar-benar memiliki jenis masukan, yang cukup akrab,
yang ID adalah q.
Hanya konvensi.
Q untuk query-- bisa disebut apa-apa.
Dan kemudian placeholder, Sementara itu, adalah kota, negara,
dan kode pos yang Anda mungkin ingat lihat di Mashup kami demo sebelumnya.
Mari kita menutup file ini.
>> Sekarang kita lihat file PHP yang menunggu dan kemudian file JavaScript.
Dalam file PHP kita, kita sudah sudah dilaksanakan untuk Anda,
misalnya, update.
Update.php-- kita tidak akan menghabiskan besar jumlah waktu di sini-singkatnya
adalah file yang kita Kode JavaScript akan
untuk menghubungi via AJAX yang Teknik asynchronous yang
dibangun ke JavaScript hari ini yang akan memungkinkan kita untuk meminta update.php
untuk informasi lebih lanjut.
>> Secara khusus, kapan saja pengguna menyeret peta
atau melakukan pencarian yang melompat pengguna ke lokasi lain,
kode JavaScript kami, karena kami akan segera melihat, adalah
akan menelepon update.php dan meminta 10 atau lebih spidol
dalam viewport berdasarkan pada koordinat GPS
dari bagian atas dan bawah sudut peta itu.
Kami kemudian dapat terisi kembali peta sekarang pengguna telah memindahkan layar agar
untuk melihat 10 mungkin baru penanda untuk kota-kota yang berbeda.
Sementara itu, berkas ini pada akhirnya akan mengeksekusi query SQL
terhadap database kami tabel yang disebut tempat yang
akan kembali mereka 10 atau lebih sedikit lokasi.
>> Sementara itu, dalam articles.php, adalah hal lain mengajukan kami telah menulis secara keseluruhan.
Hal ini sangat memiliki semangat yang sama Masalah Set 7 itu fungsi LOOKUP,
yang dihubungi Yahoo Finance untuk Anda.
File ini kontak Google News untuk Anda, akhirnya meraih
mesin-dibaca version-- dalam sesuatu
disebut RSS format-- berita untuk Cambridge atau Beverly Hills
atau kota apa pun yang Anda telah mencari untuk berdasarkan geoparameter itu.
Kami mengurai bahwa RSS, yang hanya jenis bahasa markup yang disebut XML,
dan kemudian kita benar-benar kembali ke browser anda
dan kode JavaScript Anda, khusus, dalam format yang disebut
JSON, JavaScript Object Notation.
Sekarang Anda akan melihat di specification-- kami mengarahkan Anda
bagaimana Anda benar-benar dapat melihat beberapa JSON back-- mendatang
bahwa fungsi ini pada akhirnya memungkinkan Anda mengisi orang-menu popup sehingga
bahwa ketika Anda klik pada penanda di peta
Anda benar-benar melihat seluruh banyak peluru, yang masing-masing
link ke sebuah artikel.
>> Sekarang mari kita lihat yang terakhir File PHP yang, untungnya, tidak
memiliki banyak terjadi on-- hanya TODO cukup besar.
Sekarang file ini menyatakan array disebut tempat.
Dan kemudian akhirnya cetak bahwa array di JSON format--
cukup-mencetaknya hanya agar hal-hal yang lebih mudah untuk debug.
Sayangnya, dalam tengah ada TODO ini,
yang menyerukan bagi Anda untuk mencari database untuk tempat yang cocok geo HTTP
parameter.
>> Dan, memang, ini akan menjadi salah satu challenges-- Anda
untuk melaksanakan fungsi ini di sini sehingga ketika Anda menghubungi file ini dengan
URL seperti pencarian. php? geo = sesuatu, kode Anda akhirnya akan kembali JSON
array dari semua tempat di Anda tabel database yang sesuai masukan itu.
Jadi jika jenis pengguna di Cambridge, file Anda di sini search.php
akhirnya harus kembali array JSON untuk semua pertandingan untuk Cambridge,
yang mungkin di Massachusetts tapi bisa lebih di tempat lain.
>> Terakhir, mari kita lihat dua file yang ultimately-- statis
file CSS dan JavaScript berkas Anda.
Jika saya masuk ke direktori CSS kami, ada sejumlah besar file yang ada,
tetapi kebanyakan dari mereka adalah perpustakaan.
Aku akan melihat, khusus, di styles.css,
yang merupakan CSS global kita sendiri yang akan menyesuaikan dgn mode seluruh mashup ini.
Saya akan menyerahkan kepada Anda untuk membaca komentar di sini, tapi, secara singkat,
ini adalah CSS yang memastikan bahwa kami Mashup, secara default di luar kotak,
tampak persis seperti yang kita inginkan itu-- dengan peta mengisi port tampilan
dan dengan pencarian kotak di bagian kiri atas.
Kami juga telah mengambil kebebasan stylizing yang typeahead dropdown
menu sedikit juga.
>> File yang paling penting mungkin untuk masalah ini ditetapkan
adalah yang terakhir ini, scripts.js.
Di dalam direktori JS Anda bahkan lebih file.
Semua dari mereka adalah file library kecuali untuk yang satu ini, scripts.js.
Jika kita membuka hal ini, mari kita kita tur terakhir melalui fungsi yang
dibangun ke dalam file ini untuk Anda dan perhatian panggilan
ke Todos yang terbentang di depan.
>> Di bagian atas file ini, tiga variabel global.
Satu untuk peta, yang akan menjadi acuan untuk peta Google kami.
Anda dapat menganggap itu semacam sebagai pointer.
Sementara itu, kita memiliki variabel global lain
disebut info, yang tampaknya menyimpan nilai kembali dari panggilan
untuk google.maps.InfoWindow baru.
JavaScript mendukung objek yang sangat memiliki semangat yang sama Struts.
Dan apa baris ini selama tujuan kita adalah melakukan
adalah menciptakan informasi baru window dalam memori dan kemudian
menjaga sekitar referensi hal tersebut dalam variabel yang disebut Info.
Dan di antara mereka, Sementara itu, adalah apa yang muncul
menjadi JavaScript kosong array disebut spidol.
Semua dari mereka ikon surat kabar, atau Anda mungkin memilih ikon lain sama sekali,
akan disimpan akhirnya dalam array ini
sehingga kita dapat dengan mudah menambah peta dan menghapusnya dari peta.
>> Sekarang mari kita scroll ke bawah sedikit dan jagoan
melalui kode yang akan menjadi dieksekusi segera setelah DOM atau dokumen
model objek atau Halaman itu sendiri sudah siap.
Ingat bahwa sintaks ini di sini hanya menentukan
bahwa kode berikut harus dijalankan hanya
ketika browser telah selesai memuat segala sesuatu yang lain.
>> Kami pertama kali menyatakan Seluruh sekelompok gaya,
yang berakhir stylizing peta sesuai spec.
Kami kemudian menyatakan Seluruh banyak pilihan,
yang selanjutnya menyesuaikan Google peta bahwa kita akan menanamkan.
Kami kemudian menggunakan sedikit kode jQuery, yang dijelaskan dalam sedikit lebih detail
di spec, untuk ambil elemen, peta-kanvas
bahwa kita begitu unik diidentifikasi.
Kemudian baris ini di sini adalah apa yang tampaknya ajaib memberi kita
peta Google dalam aplikasi kita sendiri,
menyimpan referensi tambahan dalam variabel yang disebut peta.
>> Akhirnya, di sini kita mendaftar apa yang disebut pendengar.
Pikirkan cara back--, cara back-- minggu nol di CS50
ketika kita melihat Scratch dan dukungan melalui jalan-jalan
melalui hal yang disebut acara dan siaran.
Anda mungkin tidak digunakan sendiri, tapi itu
mekanisme dimana Browser dalam hal ini
bisa mendapatkan perhatian kita ketika itu siap untuk benar-benar menjalankan beberapa kode.
Dalam kasus ini, itu akan mendengarkan untuk peta untuk sebuah acara yang disebut menganggur.
Ini berarti bahwa browser memiliki selesai memuat peta Google.
Pada titik ini fungsi disebut configure harus akhirnya
dieksekusi.
Fungsi tersebut, mengkonfigurasi, kita akan melihat, ditulis oleh kami.
>> Sekarang di sini adalah fungsi yang, sayangnya,
hanya TODO add penanda.
Per spec. Anda akan membutuhkan untuk menulis kode yang benar-benar
menambahkan marker-- apakah itu terlihat seperti surat kabar, atau ibu jari taktik,
atau sesuatu else-- ke peta Google.
Berikut sekarang adalah fungsi yang disebut configure.
Saya akan menyerahkan kepada Anda untuk membaca melalui ini secara lebih rinci,
tapi menyadari bahwa kita tambahkan sekelompok lebih Pendengar
sehingga kita dapat mengeksekusi kode ketika pengguna mengklik dan menyeret peta.
Kami juga memiliki kode sini bahwa menginisialisasi plugin typeahead
sehingga dropdown Menu benar-benar bekerja.
>> Tapi mari kita fokus pada hanya beberapa tempat di sini.
Secara khusus, hal ini harus dilakukan di sini.
Saya akan tunduk kepada online dokumentasi dan spesifikasi
bagaimana mengisi TODO ini.
Tapi secara singkat, perpustakaan ini typeahead memungkinkan Anda untuk lulus
dalam apa yang secara umum dikenal sebagai template, yang memiliki beberapa penampung variabel
sangat memiliki semangat yang sama printf itu%. * s.
Tapi dalam kasus ini, Template per spec
memungkinkan Anda untuk menentukan variabel apa yang Anda inginkan
untuk menyuntikkan dari data yang datang kembali dari sesuatu seperti PHP
file yang telah Anda tulis yang memancarkan JSON output.
>> Sekarang di sini menyadari bahwa kita mendengarkan pilihan typeahead
ketika pengguna benar-benar melakukan a mencari dan memilih nilai.
Ini adalah bagaimana kita benar-benar akan mendengarkan untuk itu
dan mengeksekusi beberapa kode sebagai hasilnya.
Kemudian kita lanjutkan untuk mengkonfigurasi Mashup hanya sedikit.
Dan, pada akhirnya, kita sebut pembaruan fungsi ini.
Ini update penanda pada layar.
Lebih dari itu hanya sesaat.
Sementara itu, ada beberapa fungsi kecil di sini.
Salah satunya adalah hideInfo yang hanya menutup InfoWindow.
Fungsi lain di sini, yang pada akhirnya tidak akan terlalu lama, menghapus spidol.
Itu akan membatalkan apa pun add fungsi penanda Anda tidak.
Dan kemudian di sini adalah pencarian.
Dan yang satu ini menarik karena kita telah menulis kode JavaScript yang
akan berbicara dengan search.php pada server dan mendapatkan kembali beberapa respon.
>> Anda, tentu saja, masih akan perlu untuk mengimplementasikan search.php,
tapi kami telah menerapkan Kode JavaScript yang
akan menangani benar-benar melakukan pencarian dari kotak teks.
Secara khusus, pemberitahuan bahwa fungsi ini di sini,
pencarian, apakah panggilan search.php dengan metode yang disebut
mendapatkan JSON, yang kita lihat di kuliah.
Dan sintaks sini adalah sedikit berbeda
dari ceramah dalam bahwa kita menggunakan disebut jQuery antarmuka janji.
Lagi di dalam spec.
Ini berarti untuk kami tujuan sekarang bahwa ada
dua fungsi khusus kami perlu menelepon dengan notasi titik
di sini segera setelah memanggil mendapatkan JSON.
Satu disebut dilakukan.
Satu disebut gagal.
Anda dapat menganggap ini karena pengatur sukses
dan penangan kegagalan hanya jika sesuatu berjalan salah.
>> Sekarang mari kita lihat yang terakhir beberapa fungsi dalam file ini.
Di sini adalah fungsi disebut showinfo, yang
menunjukkan informasi di salah satu Info sedikit jendela yang
muncul ketika pengguna mengklik penanda.
Di sini lebih lanjut adalah bahwa fungsi update
bahwa kita telah menerapkan untuk Anda.
Hal ini menentukan batas-batas peta.
Apa koordinat GPS nya timur laut dan sudut barat daya di sini.
Kami telah menyiapkan beberapa parameter HDP di sini dan kemudian melewati mereka akhirnya
untuk update.php, yang kami telah juga diterapkan untuk Anda.
Yang pada akhirnya akan kembali beberapa JSON dari file yang disebut update.php
dan kemudian menghapus semua penanda pada layar
dan kemudian iterates atas data yang kembali
dari update.php, yang lagi hanya array JSON.
Dan kemudian akhirnya menambah penanda masing-masing tempat, penanganan kegagalan
atau kesalahan yang mungkin sangat baik terjadi.
>> Sekarang hanya untuk memberikan rasa bagaimana Anda bisa pergi tentang debugging proyek ini,
menyadari bahwa saya telah dibuka di memajukan tab ini di sini untuk URL ini,
pset8 / articles.php? geo = 02138.
Sekarang, sekali lagi, artikel tentang PHP kami menerapkan untuk Anda
jadi ini tidak begitu banyak apa yang Anda akan menggunakan
untuk debug, melainkan teknik.
Perhatikan bahwa saya telah mencari Cambridge kode pos di sini,
dan aku sudah kembali, memang, JSON array JSON objek dalam yang
dua link yang keys-- dan judul.
>> Jadi fungsi ini bekerja sudah untuk Anda.
Namun teknik ini secara manual akan ke URL seperti ini untuk sesuatu seperti
search.php? geo = cambridge atau 02138 atau apa pun pengguna telah mengetik harus
terbukti sangat berharga seperti Anda, diri sendiri, cobalah untuk mencari tahu persis apakah mengapa
search.php bekerja atau tidak.
>> Pada akhirnya itu, Anda harus beberapa Todos depan Anda.
Anda akan menerapkan pertama bahwa script impor yang
berbunyi us.text ke dalam database Anda.
Anda kemudian akan membutuhkan untuk melaksanakan search.php
sehingga berperilaku persis seperti yang ditentukan.
Anda kemudian akan ingin untuk fokus pada scripts.js
dan akhirnya mengimplementasikan Beberapa orang dari Todos,
termasuk untuk mengkonfigurasi dan template yang,
menambahkan spidol, menghapus spidol, dan kemudian bertahan, namun tidak sedikit, satu
sentuhan pribadi.
>> Setelah Anda memiliki kerja mashup Anda cukup seperti kita, tujuan di tangan
adalah bagi Anda untuk menambahkan pribadi sentuh untuk Mashup Anda,
apakah itu estetika atau fungsional.
Ambil mashup yang pernah jadi sedikit ke tingkat berikutnya.
Selama Anda mendorong diri melampaui keakraban Anda dengan spesifikasi sendiri
dan mengambil salah satu teknik baru, bahkan jika itu hanya
sesuatu estetika seperti mengubah tata letak peta yang Anda gunakan,
ruang lingkup yang kita harapkan akan puas.
Yang kemudian adalah Masalah Set 8 Mashup.
Menantikan untuk lebih dalam spesifikasi dan terbaik dari keberuntungan
menanggulangi hal ini, lalu Anda Masalah CS50 ditetapkan sebelumnya.
>> [MUSIC PLAYING]