>> [MÜZİK OYUN]
>> DAVID J. MALAN: Merhaba.
En doğru bir yürüyüşe atalım Sorun Seti 8 Mashup,
hangi size meydan okumaya devam ediyor Google Maps için elemanlar üzerine çizmek
Google News ve püre gelen elemanları ile Birlikte bir web uygulaması içine onları o
Bir kullanıcı arama sağlar Yerel haberler için bir harita
Belirli kasabalara, şehirler ve posta kodları.
Bunu yapmak için, biz gidiyoruz Bazı HTML entegre, CSS, PHP, SQL,
JavaScript, ve bir tekniktir genel olarak sırayla AJAX olarak bilinen
Bu sürükleyici oluşturmak için kullanıcı deneyimi.
>> Let ilk Google Maps kendisi için.
Bu, elbette, belki de tanıdık bir arayüz.
Ama çıkıyor Google Haritalar ayrıca API- uygulama sağlar
arabirimini programlama ve bunun üzerinden Google Maps unsurlarını alabilir
ve içine entegre Kendi uygulamalar.
Gerçekten de, içinde bu süreç, gidiyoruz
URL'lerin bir çift bulmak için özellikle yararlı
açıklanan Sorun Set 8 için şartname,
özellikle bu Başlarken Kılavuzu veya Geliştirici Kılavuzu
Google Maps API Sürüm 3 için de Google Maps API JavaScript gibi
Bir v3 referans, okumak için biraz daha gizemli
ama aslında alt düzeyde tüm vardır ne işlevler veya yöntemler hakkında ayrıntılar
ve nesneler ve özellikleri ve olaylar aslında API ile geliyor,
ruhu içinde çok benzer [duyulamaz] sayfalara.
>> Şimdi bir göz atın, eğer Google News, sen olacak
belki burada bir tanıdık arayüz göreceksiniz.
Ama aynı zamanda arama yapabilirsiniz çıkıyor Belirli coğrafyalarda için Google Haberler
Coğrafi olarak adlandırılan bir HTTP parametresi üzerinden.
Aslında, ben yakınlaştırmak eğer Burada, bunu görürsünüz
Ben de değilim news.google.com/news/section?geo=02138.
Ve, gerçekten, ben Büyütmek eğer dışarı, sen ben olduğumu görürsünüz
bir sürü ile bir sayfaya bakarak Cambridge, Massachusetts ilgili görüşleri.
>> Bu arada, ben aslında değiştirirseniz URL, böyle bir posta kodu olmamak
ama biraz daha karışık bir şey Cambridge, Massachusetts + gibi,
artı yoludur nerede bir kodlamak Bir URL boşluk karakteri ve Enter'a,
aslında ben görürsünüz hemen hemen aynı haberleri görüyorum.
Belki biraz farklı Cambridge aslında, çünkü
Birden fazla posta kodları vardır.
Şimdi nasıl olduğunu biliyoruz ve olur, Aslında, ne şekilde yapabilirdim
şehirleri ve kasabaları kravat Olgu I zip kodları
kullanıcının izin vermek istiyorum ya bakmak için?
Peki, orada çıkıyor Bir web sitesi var denir
geonames.org hangi bir girişim var
Her bir serbestçe erişilebilen veritabanı coğrafi bilgi türlü,
sadece ABD için değil, aynı zamanda diğer ülkeler için de.
Aslında, ben, burada bu URL'ye giderseniz hangi Ayrıca set problem açıklanan
şartname, bunu üç görürsünüz zip dosyaları bir bütün demet listesi
hangi birini sizin tarafınızdan indirebilirsiniz.
Aslında, bu sorun için ayarlanmış Eğer us.zip indirmek için gidiyoruz.
Şimdi bu dosya içinde, bir bütündür metin biçiminde veri demet.
dosyaları çok benzer CSV-- Virgülle Ayrılmış Değerler file--
ama aslında kullandığı sekmeleri alanları ayırmak için.
Şimdi, bu arada, eğer bakarsanız burada vurgulanan ettik ne,
Bu dosyada alanlar gidiyor ülke kodları gibi şeyler olmaya,
posta kodları, yer adları, ve daha sonra, bir formda
veya diğer devletler ve ilçeler, topluluklar, ve daha fazlası.
Aslında, ben zaten oldum önceden bu dosyayı karşıdan.
Bana devam edelim ve ötürü-- açın Gerçekten, sen olacak, us.text-- ve
Ben 16.792 satır aşağı kaydırın görmek Eğer, Cambridge birkaç kayıtlarını görürsünüz
Massachusetts ve çeşitli posta kodları.
Ne de orada görmek, ilçe Gerçekten bilmiyorum bazı numaralar
Ayrıca tüm anlıyorum, ama Sağdaki yol,
Bazı GPS coordinates-- Enlem ve boylam.
Bu harika biri, çünkü Google Maps API özellikleri
algılayabilmesidir Eğer coğrafi nerede
GPS koordinatları açısından.
>> Şimdi nasıl anlamaya başlayalım bunları birlikte ipe başlar.
Size bir bütün verdim Dağıtım kod demet,
yanı sıra MySQL veritabanı olarak.
Ben çekin Aslında, bir phpMyAdmin sahip Zaten ithal, yakında olacak gibi,
pset8.SQL, bir MySQL tablo göreceksiniz ki Bu gibi görünüyor, bir kimlik alanı, ülke
kodu, posta kodu, yer adı ve daha fazlası.
tüm bu türleri sütunları Ben sadece türetilmiş
readme.text okuyarak Belirtilen Burada dosyası
Bir alan bir tam sayı olup, veya varchar veya benzeri olabilir.
>> Yani biz bu tabloyu oluşturduk sen ve sana SQL komutları verilen
Bu oluşturmak için çalıştırmak için Kendi veritabanında tablo,
ancak henüz aslında hiçbir veri yok.
Aksine, sizin zorunda gidiyoruz us.zip indirmek veya herhangi bir ülkenin bir zip
Oradaki URL'den dosya.
Ve sonra yazmak zorunda gidiyoruz bu PHP komut satırı komut
Bu metni açacak , dosya kendi hatları üzerinden yineleme,
ve bundan sonra da her biri için bu satırları bir ekleme yapmak
Bu tabloyu yerleştirir içine MySQL veritabanı.
Bu sürecin sonunda, sen olacak Yani sonuçta bu komut dosyasını çalıştırın var
Sadece bir kez teoride.
Gerçekte muhtemelen olacak o zaman bir demet çalıştırın
ise çeşitli hataları düzeltmek için çalışıyorum.
>> Sonuçta, bir için gidiyoruz Binlerce gerçekten büyük veritabanı
coğrafi satır ve binlerce.
Sonra o içe koymak için gidiyoruz komut kenara işe yarıyor kez
ve veritabanı güzel ve doğru ve daha sonra
aslında geçmek için gidiyoruz mashup kendisi uygulanması.
mashup bakmak için gidiyor Bu gibi küçük bir şey.
Mashup.cs50.net olarak, bir personel çözüm var
bu gibi küçük bir şey görünüyor.
Nitekim, bu gazete tıklarsanız Cambridge, Massachusetts için ikonunu,
Bir iplik görürsünüz kısaca ve daha sonra simge
Bir sıralı liste, bir makalelerin madde işaretli liste
Cambridge, Massachusetts ile ilgili.
Ben Charlestown üzerine tıklarsanız, Massachusetts
Ben o şehir için aynı görürsünüz.
Ve ben üzerine tıklarsanız Watertown, Massachusetts,
Herhangi olmayabilir Watertown gelen haberler,
böylece bir şey görürsünüz Yavaş haber gün gibi.
>> Şimdi, bu arada, sol üst kısmında bulunmaktadır bazı tanıdık Google Haritalar kontrolleri
, pan uzaklaştırmak izin yukarı, aşağı, sola ve sağa,
ama aynı zamanda biz orada koymak arama kutusu.
Yani açıkçası, için arama yaparsanız, Ben biliyorum sadece diğer posta kodu,
90210, aslında görürsünüz Beverly Hills, California.
Tıklandığında zaman beni neden Kaliforniya ve bir sürü
Beverly Hills hakkında haber.
Şimdi ne oldu orada, çok fark.
Hatta 02.138 ya da için I Eğer bu sefer arama Cambridge virgül Massachusetts ya da bazı
varyantı, bir olsun Küçük otomatik tamamlama açılır.
Şimdi bu eklenti kullanıyor JQuery adlı bir kütüphane,
ve bu eklenti typeahead olarak adlandırılır.
Biz sadece okumak dokümantasyon,
js entegre dosya indirilen Dağıtım koduna yüzden size o
sonuçta kod yazabilirsiniz Otomatik o açılır menüsünü doldurur
seçimleri veya otomatik önerileri.
>> Şimdi dağıtım kod olsa da, bu Eğer neredeyse kadar yapmaz aldı.
Google Map gömülü olsun, ve Eğer sol üst denetimleri olsun
ve arama kutusu olsun.
Ama böyle bir şey yazarsanız 02138, hiçbir yerde yapılmamış bulunur.
Yani olacak Burada bizim hedeflerinden biri.
Ayrıca, bir adım atmak durumunda sırt ve harita kendisine bakmak,
hiçbir haber yok.
Ben tıklayın bile ve sürükleme, aslında hiçbir belirteçler
çünkü haber için görünür zorluk de sizin için bırakılır.
>> En sonra bir göz atalım Dağıtım kodu.
Eğer indirdikten sonra pset8.zip ve sıkıştırması
senin sankon dizine CS50 cihazda,
Bu göreceksiniz İçeride dizinleri.
Genel olarak açılımı Bin-- yürütülebilir programs-- için ikili
pset7 olarak içerir, bazı PHP Diğer dosyalar şunlardır dosyalar,
o zaman kamu, ihtiyaç dosyalar
kamuya erişilebilir olması için Bir tarayıcı ile bir kullanıcıya.
En bir göz atalım bin dizini ve yaparız
Bir dosya var olduğunu görmek Zaten İthalat orada denir.
Biz gedit ile bu açarsanız, biz göreceğiz Bu, ne yazık ki, pek bir şey yok
orada.
Olsa, orada olduğunu Tüm, üstünde bir mesele olduğunu
belirten hangi Bu durumda interpreter-- PHP--
Aslında için kullanılmalıdır Bu dosyayı yürütmek.
Ama sonra diyor nerede Sen nerede YAPILACAK olduğunu
bazı kod yazmak için ihtiyacımız olacak muhtemelen yapılandırma gerektirir
dizin içerir öyle dosyası PHP dosyaları ile daha önce yaptığım gibi.
Ve sonra gidiyoruz şekilde açmak zorunda
us.text hangi size muhtemelen Zaten fermuarını açıp var.
Sonra zorunda gidiyoruz bu dosyada hatları üzerinden yineleme,
belki bazı fonksiyonları kullanarak tarifnamede önerilen.
Sonra o her eklemek MySQL veritabanı içine hatları
Sorgu işlevini kullanarak hangi Yine Şarkı söylemeyi kes sağladık
ya da en azından bir varyantı bunların functions.php
hangi biz sadece bir an görürsünüz.
>> Şimdi ithalat kapatmak ve geri dönelim bizim dizin ve bu sefer gitmek
içerir.
Orada ls yaparsam Ve görürsünüz Oldukça Sorun Set 7 gibi üç dosya.
Ve en hızlı göz atalım, Örneğin, config.php de.
Orada, daha az hatları daha önce, ve bunu
Bu dosya içerir görünüyor constants.php ve functions.php.
Biz biraz farklı kullanıyorsanız tekniği aslında etrafında bu sefer
Bu dosyalar göreceli olduğunu belirtmek geçerli dizine __ DIR__
temsil olursa olsun dizin bu dosya Config.php, kendisi.
Yani bu bir daha belirterek açık yolu
İstediğiniz istediğiniz başka hangi dosyaları.
>> Şimdi bu dosyayı kapatın ve eğer yerine constants.php açmak,
çok anımsatan bir dosya görürsünüz Sorunu Seti 7 en yanı sıra, olsa
pset8 denilen farklı bir veritabanı ile.
Son olarak, functions.php Biz sadece bir fonksiyonu görürsünüz
Sorgu denen bu sefer.
Bu biz idare dışında hemen hemen aynıdır biraz etrafında hataları bu sefer
farklı, ama kullanım olup bu sorun aynı yedi set.
>> Şimdi bizim pset8 geri gidelim Dizin, halkın içine gidin ve orada
Ben ls bunu yaparsanız, bu-- görürsünüz articles.php, index.html, search.php,
ve tüm dosyaları update.php--.
Ve sonra css yazı tipleri, img, ve Oldukça pset7 gibi js dizin.
>> En az bir göz atalım olan index.html,
Gerçekten olacak smashup giriş noktası.
Şimdi index.html olarak, bir bütün görürsünüz baş bağlantı elemanlarının demet,
özel olarak ise, kendi için ön-yükleyici için Script bir sürü takip CSS
haritalar, API gibi şeyler için etiketleri kendisi, etiket ile özel bir işaretleyici
biz söz yarar şartname, sizin için kullanılabilir
jQuery kendisi önyükleme kendisi ve bir kütüphane
denilen çizgi hangi Biz spec hakkında konuşmak.
Jquery.js gibi Underscore.js bir JavaScript kütüphanesi
Bu işlevsellik bir sürü vardır dünya dilek bir sürü insan
JavaScript kendisi var.
Yani bütün bunlar vardır aslında oldukça popüler.
Biz de typeahead söz ettik Kütüphane olanı
yaptığı otomatik tamamlama açılır ve Sonunda kendi JavaScript bir bağlantı.
>> Bu arada, ve belki Neyse ki, bu mashup
göreceli olarak daha az tahrik edilir Buraya altındaki HTML.
Biz div belirtilen ettik Bildirimi sınıf konteyner sıvı vücudumuz.
Bu, önyükleme başına en dokümantasyon, sadece
Bu div doldurmak için gidiyor demektir viewport'un veya tamamen tarayıcı penceresi.
>> Bu arada, aşağıda bir div var açılmış ve hemen kapalıdır
Harita tuval benzersiz kimliği ile.
Bu artık Google'dan olduğunu Haritalar dokümantasyon
kendi API için burada ben sadece gerekir , enjekte içine boş bir div var
sonuçta, gerçek bir Google Haritalar.
Ama sadece biraz bu konuda daha fazla.
>> Son olarak, bir formu var Burada içinde hangi
Metin kutusu sol üst uygular arama için arayüz.
Kullandığımız Bildirimi bootstrap biraz
Burada gibi şeyler too-- Form-inline ve form grup.
Biz eski verdik Formun benzersiz kimlik.
Ve sonra, sonuçta, ben aslında var Oldukça tanıdık bir giriş tipi,
q olan bir kimliktir.
Sadece bir kongre.
Query-- olabilir Q bir şey çağrıldı.
Ve sonra tutucu, Bu arada, şehir, devlet,
ve posta kodu çağırmak olabilir Demo önce bizim mashup görmeye.
Şimdi bu dosyayı kapatalım.
>> Şimdi PHP dosyaları bakmak olduğunu bekliyor ve sonra JavaScript dosyaları.
Bizim PHP dosyaları, biz ettik zaten sizin için uygulanan,
Örneğin, güncellemeler.
Biz büyük bir harcama olmaz Update.php-- Özetle ötürü-- zaman miktarı
dosya olduğunu bizim, JavaScript kodu gidiyor
AJAX irtibata ki var asenkron tekniği
olduğunu bu gün JavaScript yerleşik Bizi update.php sormak için izin gidiyor
Daha fazla bilgi için.
>> Özellikle, zaman Kullanıcı haritasını sürükler
ya atlar bir arama gerçekleştirir başka bir yere veya kullanıcı,
JavaScript kodu, yakında göreceğimiz gibi, bir
update.php arayacaksın ve 10 ya da öylesine belirteçler sormak
görünüm içinde temelli GPS koordinatlarına
üst ve alt Bu haritanın köşelerinde.
Biz o zaman şimdi bu haritayı yeniden oluşturulacaktır olabilir Kullanıcı sırayla ekrana taşındı
10 olasılıkla yeni görmek için Farklı şehirler için belirteçleri.
Bu arada, bu dosya sonuçta bir Bir SQL sorgusu çalıştırmak için gidiyor
Bizim veritabanı karşı tablo olarak adlandırılan yerler olan
Bu geri gidiyor 10 veya daha az yer.
>> Arada articles.php olarak, başka bir şeydir Biz bütünüyle yazdık dosya.
Bu ruhu çok benzer Sorun Seti 7'nin ARA fonksiyonu,
hangi sizin için Yahoo Finance temasa geçti.
Bu dosya kişileri Google Haberler Sizin için, sonuçta kapma
Bir makine tarafından okunabilen version-- şey
haber RSS format-- denir Cambridge veya Beverly Hills için
ya da her türlü Kasaba aradık için bu geoparameter dayalı.
Biz sadece bir olduğunu RSS, ayrıştırmak XML denilen biçimlendirme dili tipi,
ve sonra biz aslında tarayıcınıza geri
ve JavaScript kodu, özel olarak ise, bir biçimde adı
JSON, JavaScript Object Notation.
Şimdi göreceğiniz specification-- sizi işaret
aslında görebilirsiniz nasıl JSON gelecek back-- bazı
bu işlevi sonuçta Bunu bu pop-up menüler doldurmak sağlar
Eğer tıkladığınızda Haritada bir işaretleyici üzerinde
aslında bir sürü bakın mermi, her biri
Bir yazıya bağlantılar.
>> Şimdi sonuncusu bir göz atalım , Neyse, değil PHP dosyası
çok şey var on-- gidiyor Sadece oldukça büyük bir YAPILACAKLAR.
Şu anda bu dosya beyan Bir dizi yerler denir.
Ve sonra sonuçta baskılar JSON format-- bu dizi
sadece bu yüzden oldukça yazdırma şeyler debug kolay.
Ne yazık ki, içinde Orta Bu YAPıLACAK olduğu,
Aramak için hangi aramalar eşleşen yerler için veritabanı jeo HTTP
parametre.
>> Ve, gerçekten de, bu gidiyor hakkında challenges-- biri
Burada bu işlevi uygulamak için böylece bu dosyayı irtibata geçtiğinizde
arama gibi bir URL. php? jeo = şey, kod sonuçta bir JSON dönecektir
tüm yerleri dizisi senin Bu girişi maç veritabanı tablosu.
Cambridge kullanıcı türleri Yani eğer Burada dosya search.php
sonuçta bir JSON dizi dönmesi gerekir Cambridge için tüm maçlarında için,
Massachusetts olabilir, bu ancak bu bile başka bir yerde olabilir.
>> Son olarak, en ikide bir göz atalım Statik ultimately-- olan dosyalar
CSS dosyası ve JavaScript dosyası.
Ben bizim CSS dizine giderseniz, Dosyaların bir sürü, orada var
ama onların çoğu kütüphaneler vardır.
Ben bir göz almaya gidiyorum, özel olarak ise, styles.css olarak,
hangi var kendi küresel CSS Bütün bu mashup stilize olacak.
Eğer okumaya için bunu bırakacağım Yorumlar Burada, ancak, kısaca,
Bu sağlar CSS bizim mashup, kutunun dışında varsayılan,
Biz Durdur-- tam olarak istediğiniz şekilde görünüyor görünümü noktasını dolum harita
ve arama ile sol üst kısmında yukarıya kutu.
Biz de özgürlüğünü aldım Bu typeahead açılan stilize
Menü biraz da.
>> En önemli dosya belki set Bu sorun için
Bu sonuncusu, scripts.js olduğunu.
JS dizinin içi daha dosyaları.
Hepsi kütüphane dosyaları Bu biri hariç, scripts.js.
Bu kadar açarsanız, en alalım bizim fonksiyonları ile son tur olduğunu
Bu dosyada yerleşik Sizin ve çağrı dikkat
ileride Todos için.
>> Bu dosyanın en üstünde, Üç global değişkenler vardır.
Gidiyor bir harita, One Bizim Google harita için bir referans olacak.
Bunu düşünebilirsiniz tür bir işaretçi olarak.
Bu arada, biz var Başka bir global değişken
gibi görünüyor denilen bilgileri, Bir çağrının dönüş değeri depolamak
Yeni google.maps.InfoWindow için.
JavaScript nesneleri destekler Struts ruhu çok benzer.
Ve bu hat için Bizim amaçları yapıyor
Yeni bilgi yaratıyor daha sonra bellek ve pencere
Bir referans etrafında tutmak Bilgi adında bir değişkene buna.
Ve bu arada, Bu arada, görünen ne
Boş JavaScript olmak dizi işaretçileri aradı.
Bu gazete tüm simgelerin veya tamamen başka bir simge seçebilirsiniz,
saklanabilir olacak sonuçta bu dizide
biz çok kolayca ekleyebilirsiniz böylece harita ve harita çıkarın.
>> Şimdi aşağı kaydırmak let biraz ve vızıltı
olacak kodu ile DOM veya belge en kısa sürede idam
nesne modeli veya Sayfanın kendisi hazır.
Bu sözdizimi olduğunu hatırlayın Burada sadece belirtir
Aşağıdaki kodu bu Sadece idam edilmelidir
Tarayıcı bittiğinde her şeyi yükleniyor.
>> Biz ilk ilan stilleri sürü,
stylizing sona hangi spec göre haritası.
Biz daha sonra ilan seçenekler sürü,
ayrıca Google özelleştirmek hangi Biz embed üzereyiz haritası.
Daha sonra, jQuery kodu biraz kullanabilirsiniz bu, biraz daha ayrıntılı olarak izah edilmektedir
spec, kapmak için Bu eleman, harita-tuval
böylece benzersiz tanımlamıştır.
Ve sonra bu çizgi burada ne görünüyor sihirli bize vermek
içinde bir Google haritası Bizim kendi uygulama,
başvuru buraya depolanması Bu değişken denir haritada.
>> Son olarak, buraya biz kayıt ne bir dinleyici denir.
Back-- yolu, yol düşünüyorum CS50 haftada sıfır back--
Biz Scratch baktı ne zaman ve Bir yürüyüş yoluyla destek
denilen şeyler için aracılığıyla olaylar ve yayın.
Sen kullanmış olabilir kendiniz, ama var
bir mekanizma sağlayan bir Bu durumda, bir tarayıcı
bu kadar zaman bizim dikkatini alabilirsiniz aslında bazı kod yürütmesine hazır.
Bu durumda, dinlemek için gidiyor boşta denilen bir olay için haritaya.
Bu tarayıcı sahip olduğu anlamına gelir Google harita yükleme tamamladı.
Bu noktada bir işlev olarak adlandırılan yapılandırma gerekir sonuçta
yürütülür.
Bu işlev, yapılandırmak, bize tarafından yazılmıştır, göreceksiniz.
>> Şimdi buraya bir fonksiyondur Bu, ne yazık ki,
Sadece bir YAPıLACAK eklenti belirtecidir.
Spec Başına. İhtiyacınız olacak aslında kod yazmak için
görünüyor olsun bir marker-- ekler Bir gazete veya bir başparmak yapışma gibi,
falan Google haritasına else--.
İşte şimdi bu işlevi yapılandırma denir.
Okumak için bunu bırakacağım daha ayrıntılı olarak bu sayesinde,
ama biz eklemek fark Bir demet fazla Dinleyiciler
biz kod yürütmesine böylece Kullanıcı tıkladığında ve harita sürükler.
Biz de burada bu kodu var Bu typeahead eklentisi başlatır
Böylece açılan Menü aslında çalışır.
>> Ama sadece bir odaklanmak edelim Burada yerlerde çift.
Özellikle, bu burada yapmak.
Ben çevrimiçi riayet edeceğiz dokümantasyon ve şartname
için nasıl bu TODO doldurmak için.
Ama Özetle, bu kütüphane typeahead Eğer geçmesine izin verir
Genellikle bir şablon olarak bilinen ne, Bazı değişken tutucuları olan
printf en% ruhu çok benzer. * s.
Ancak bu durumda, spec başına şablon
Belirttiğiniz olanak sağlar Ne değişkenler istediğiniz
geldi verilerden enjekte geri PHP gibi bir şey
Yazdığınız dosyalar Bu JSON çıktı yayan vardır.
>> Şimdi buraya biz biliyoruz typeahead seçimleri için dinleme
ne zaman kullanıcı aslında yapar Bir arama ve bir değer seçer.
Bu aslında konum nasıl Bunun için dinlemek için gidiyor
ve sonuç olarak bazı kod yürütmesine.
Sonra yapılandırmak devam mashup biraz.
Ve sonuçta, biz diyoruz Bu işlev güncelleme.
Bu ekranda işaretçileri günceller.
Sadece bir an içinde bu konuda daha fazla.
Bu arada, bir kaç var Burada küçük fonksiyonlar.
Bir hideInfo olan sadece InfoWindow kapatır.
Burada bir diğer işlevi, hangi sonuçta çok uzun olmayacak, işaretleri kaldırılır.
Yani geri gidiyor ne senin eklenti işaretleyici işlevi yapar.
Ve sonra buraya aramasıdır.
Ve bu ilginç çünkü biz bu JavaScript kodu yazdım
üzerinde search.php konuşacağım Sunucu ve bazı yanıt geri almak.
>> Siz, tabii, yine olacak search.php uygulamak gerekir,
ama biz uyguladık Var JavaScript kodu
performans aslında işlemek için gidiyor Bu metin kutusundan arar.
Özellikle, bildirimde Burada bu işlev,
arama, search.php çağrı yok adı verilen bir yöntemle,
Biz derste gördüğümüz JSON, olsun.
Ve burada sözdizimi biraz farklı
ki ders biz kullanıyoruz jQuery söz arayüzü olarak adlandırılan.
Spec bu konuda daha fazla.
Bu sadece kızımız için anlamı Şimdi orada amaçları
İki özel fonksiyonlar biz nokta gösterimi ile çağırmanız gerekir
Burada hemen JSON olsun çağırdıktan sonra.
Bir bitti denir.
Denir Bir başarısız.
Bu düşünebilirsiniz başarı işleyicisi olarak
ve başarısızlık işleyicisi sadece durumda bir şey yanlış giderse.
>> Şimdi son bakalım Bu dosyadaki fonksiyonlar çift.
Burada aşağı bir fonksiyonudur adı göster, ki
Bunlardan biri bilgi gösterir biraz bilgi pencereleri ki
Kullanıcı bir işaretleyici tıkladığında açılır.
Aşağı burada daha olduğunu Bu güncelleme fonksiyonu
biz sizin için hayata geçirdik.
Bu haritanın sınırları belirler.
GPS koordinatları nelerdir onun kuzeydoğu ve güneybatısında burada köşeleri.
Biz bazı HDP parametrelerini hazırladık Burada ve daha sonra sonuçta onları geçti
biz ettik ki, update.php için Ayrıca sizin için uyguladı.
Bu sonuçta bazı JSON geri alır Dosya update.php denilen
ve daha sonra herhangi bir kaldırır Ekranda belirteçler
ve daha sonra fazla dolaşır Geri geldi veri
update.php gelen hangi yine sadece bir JSON dizidir.
Ve o sonuçta bir işaretleyici için ekler bu yerlerin her biri, taşıma hatası
veya hangi olabilir hataları çok iyi olur.
>> Şimdi sadece size sizin nasıl bir tat vermek için Bu projeyi hata ayıklama hakkında gitmek olabilir,
Ben açtım fark Bu URL'ye burada bu sekmeyi ilerlemek,
pset8 / articles.php? jeo = 02138.
Hakkında Şimdi, yine, makaleler PHP sizin için uygulanan
bu nedenle bu kadar çok değil Kullandığınız olacak ne
hata ayıklama değil, tekniği.
Ben aradım Bildirimi Burada Cambridge posta kodu,
ve ben bir JSON, gerçekten, geri kazanılmış ettik JSON dizisi olan iç nesneleri
İki keys-- bağlantı ve başlık vardır.
>> Peki bu işlevselliği Sizin için zaten çalışıyor.
Ama elle bu tekniği gidiyor bir şey için böyle bir URL'ye gibi
search.php? jeo = cambridge veya 02138 veya Kullanıcı gerekir yazdığınız ne olursa olsun
Eğer, kendiniz deneyin gibi paha biçilmez anlamaya tam olsun ya da neden
search.php çalışma ya da değil.
>> Sonuçta o, sen var Önünüzde birkaç Todos.
İlk uygular gidiyoruz Bu ithalat komut o
veritabanına us.text okur.
Daha sonra ihtiyacınız olacak search.php uygulamak
belirtildiği gibi tam olarak davranır ve böylece.
Daha sonra istediğiniz gidiyoruz scripts.js odaklanmak
ve nihai olarak uygular Todos bu çift,
yapılandırmak için olmak üzere ve bu şablon,
, işaretçileri eklemek işaretleri kaldırılır ve Daha sonra son, fakat en az değil, bir
kişisel dokunuş.
>> Eğer mashup kez çalışıyorsa eldeki oldukça bizimki gibi, amaç
Eğer bir kişisel eklemek için sizin mashup için dokunun
estetik veya fonksiyonel olsun.
Hiç bu kadar mashup alın biraz sonraki seviyeye.
Madem ötesinde kendinizi itin gibi spec kendisi ile aşinalık
ve bir teknik pick up Yeni, bu olsa bile sadece
bir şey değiştirme gibi estetize Kullandığınız haritanın düzeni,
Beklediğimiz kapsamı memnun olacaktır.
O zaman Sorun Seti 8 Mashup olduğunu.
Daha için bizden ayrılmayın şartname ve iyi şanslar
Bu mücadele, son CS50 sorunu hiç ayarlayın.
>> [MÜZİK OYUN]