[संगीत खेल] 

डेविड जे Malan: नमस्कार। के माध्यम से एक चल ले चलो समस्या सेट 8 मैशप, जो करने के लिए आप को चुनौती देने के लिए जा रहा है गूगल मैप्स के लिए तत्वों पर आकर्षित गूगल समाचार और मुहब्बत से तत्वों के साथ एक साथ एक वेब एप्लेट में उन्हें लगता है कि एक उपयोगकर्ता की खोज करने की अनुमति देता है स्थानीय समाचार के लिए एक नक्शा विशिष्ट शहरों के लिए, शहरों, और ज़िप कोड। ऐसा करने के लिए, हम करने जा रहे हैं कुछ HTML एकीकृत, सीएसएस, पीएचपी, एसक्यूएल, जावास्क्रिप्ट, और एक तकनीक आम तौर पर आदेश में AJAX के रूप में जाना जाता है इस immersive बनाने के लिए उपयोगकर्ता अनुभव। 

की पहली गूगल मैप्स के लिए ही करते हैं। यह, ज़ाहिर है, शायद है एक परिचित इंटरफ़ेस। लेकिन यह पता चला है कि गूगल मैप्स यह भी एक API-- आवेदन प्रदान करता है interface-- प्रोग्रामिंग जो के माध्यम से आप गूगल मैप्स के तत्वों को ले जा सकते हैं और में उन्हें एकीकृत अपने खुद के अनुप्रयोगों। दरअसल, भर में इस प्रक्रिया है, आप जा रहे हैं यूआरएल के एक जोड़े को खोजने के लिए कि विशेष रूप से उपयोगी में उल्लेख कर रहे हैं समस्या सेट 8 के लिए विशिष्टता, विशेष रूप से इस प्रारंभ करना गाइड या डेवलपर की मार्गदर्शिका गूगल मैप्स एपीआई संस्करण 3 के रूप में अच्छी तरह से करने के लिए गूगल मैप्स जावास्क्रिप्ट एपीआई के रूप में एक है जो V3 संदर्भ, पढ़ने के लिए थोड़ा और अधिक रहस्यमय लेकिन वास्तव में निचले स्तर के सभी है क्या कार्य या विधियों के बारे में जानकारी और वस्तुओं और संपत्तियों और घटनाओं वास्तव में एपीआई के साथ आते हैं, भावना में बहुत समान [अश्राव्य] पृष्ठों के लिए। 

अब हम एक नज़र रखना अगर गूगल समाचार में, तुम हूँ शायद यहाँ एक परिचित इंटरफ़ेस देखते हैं। लेकिन यह आप भी खोज कर सकते हैं पता चला है विशिष्ट भौगोलिक लिए Google समाचार भू बुलाया एक HTTP पैरामीटर के माध्यम से। वास्तव में, मैं ज़ूम में अगर यहाँ, आप देखेंगे कि मैं पर हूँ news.google.com/news/section?geo=02138। और, वास्तव में, मैं ज़ूम बाहर, तुम मैं कर रहा हूँ कि देखेंगे की एक पूरी गुच्छा के साथ एक पृष्ठ पर देख रहे हैं कैम्ब्रिज, मैसाचुसेट्स के बारे में विचार। 

इस बीच, मैं वास्तव में बदलते हैं यूआरएल, इस तरह से एक ज़िप कोड होने के लिए नहीं लेकिन एक छोटी सी मेसियर कुछ कैम्ब्रिज + मैसाचुसेट्स की तरह, प्लस तरीका है, जहां आप एक सांकेतिक शब्दों में बदलना एक यूआरएल में अंतरिक्ष चरित्र और हिट दर्ज करें, आप वास्तव में लगता है कि मैं देख रहा हूँ लगभग एक ही खबर को देखते हैं। शायद यह एक छोटा सा अलग है कैम्ब्रिज वास्तव में, क्योंकि एकाधिक ज़िप कोड है। अब मैं कैसे पता है कि और होता, वास्तव में, कैसे किसी भी तरह मैं कर सकता शहरों और कस्बों टाई मामले में मैं ज़िप कोड को उपयोगकर्ता की अनुमति देना चाहते या तो ऊपर देखने के लिए? खैर, यह है कि वहाँ पता चला है एक वेबसाइट को वहाँ से बाहर बुलाया geonames.org जो है एक पहल है करने के लिए सभी की एक स्वतंत्र रूप से उपलब्ध डेटाबेस भौगोलिक जानकारी के प्रकार, न केवल अमेरिका के लिए, लेकिन यह भी अन्य देशों के लिए के रूप में अच्छी तरह से। वास्तव में, मैं यहाँ इस यूआरएल पर जाने के लिए अगर जो यह भी सेट समस्या में उल्लेख किया गया है विनिर्देश, आप इसे तीन देखेंगे ज़िप फ़ाइलों की एक पूरी गुच्छा की लिस्टिंग जिनमें से किसी भी आप से डाउनलोड किया जा सकता है। वास्तव में, इस समस्या के लिए निर्धारित आप us.zip डाउनलोड करने के लिए जा रहे हैं। अब इस फाइल के भीतर, एक पूरी है पाठ स्वरूप में डेटा का गुच्छा। फ़ाइलों को एक करने के लिए बहुत समान है CSV-- कॉमा मान अलग file-- लेकिन यह वास्तव में उपयोग करता है टैब क्षेत्रों हदबंदी करना। अब, इस बीच, अगर तुम देखो यहाँ मैं प्रकाश डाला है पर, इस फाइल में खेतों जा रहे हैं देश कोड की तरह बातें होने के लिए, डाक कोड, जगह नाम, और फिर, किसी न किसी रूप में या अन्य, राज्यों और देशों, समुदायों, और अधिक। वास्तव में, मैं पहले से ही है अग्रिम में इस फाइल को डाउनलोड किया। मुझे आगे चलते हैं और here-- इसे खोलने दरअसल, तुम हूँ, us.text-- और मैं 16,792 लाइन करने के लिए नीचे स्क्रॉल अगर देखना आप, कैम्ब्रिज के लिए कुछ रिकॉर्ड देखेंगे मैसाचुसेट्स और इसके विभिन्न ज़िप कोड। क्या आप भी वहाँ देखते हैं, काउंटी है मैं वास्तव में नहीं है कि कुछ संख्या यह भी सभी को समझते हैं, लेकिन सही रास्ते पर, कुछ जीपीएस coordinates-- अक्षांश और देशांतर। इस महान है में से एक है क्योंकि गूगल मैप्स एपीआई की विशेषताएं पता लगाने की क्षमता है आप भौगोलिक रूप से कर रहे हैं, जहां जीपीएस निर्देशांक के संदर्भ में। 

अब देखते हैं कि कैसे करने के लिए बाहर निकालने के लिए शुरू करते हैं एक साथ इन बातों को बांधने शुरू करते हैं। हम आपको एक पूरे दिया है वितरण कोड का गुच्छा, के रूप में अच्छी तरह से MySQL डाटाबेस के रूप में। मैं खींच वास्तव में, यदि एक phpMyAdmin होने पहले से ही आयातित, आप जल्द ही के रूप में होगा, pset8.SQL, आप एक MySQL तालिका देखेंगे कि इस तरह दिखता है, एक आईडी क्षेत्र, देश कोड, पोस्टल कोड, जगह का नाम और अधिक। उन सभी के प्रकार कॉलम मैं बस व्युत्पन्न readme.text पढ़ने के द्वारा निर्दिष्ट है कि यहाँ फ़ाइल एक क्षेत्र एक पूर्णांक है, चाहे या varchar या पसंद है। 

तो हम उस मेज के लिए बनाया गया है आप और आप SQL आदेश दिया कि बनाने के लिए निष्पादित करने के लिए अपने खुद के डेटाबेस में मेज, लेकिन अभी तक वास्तव में इसमें कोई डेटा नहीं है। बल्कि, आप करने के लिए जा रहे हैं us.zip डाउनलोड या किसी भी देश की ज़िप वहाँ उस URL से फ़ाइल। और फिर तुम लिखने के लिए जा रहे हैं है कि PHP में एक कमांड लाइन स्क्रिप्ट उस पाठ को खोलने के लिए जा रहा फ़ाइल अपने लाइनों पर पुनरावृति, और उसके बाद से प्रत्येक के लिए उन पंक्तियों के एक डालने करना उस तालिका स्थानों में अपने MySQL डेटाबेस में। इस प्रक्रिया के अंत में, आप होगी अंततः है कि स्क्रिप्ट चलाने के लिए है सिर्फ एक बार सिद्धांत में। हकीकत में तो आप शायद हूँ यह समय का एक गुच्छा चलाने जबकि विभिन्न कीड़ों को ठीक करने के लिए कोशिश कर रहा। 

अंत में, आप एक के लिए जा रहे हैं हजारों के साथ वास्तव में बड़ा डेटाबेस भौगोलिक पंक्तियों की और हजारों। तो फिर आपको लगता है कि आयात डाल करने के लिए जा रहे हैं स्क्रिप्ट एक तरफ यह काम कर रहा है एक बार और अपने डेटाबेस अच्छा है और सही, और फिर आप वास्तव में करने के लिए पर स्थानांतरित करने के लिए जा रहे हैं मैशप खुद को लागू करने। मैशप देखने के लिए जा रहा है इस तरह एक छोटे से कुछ। Mashup.cs50.net में, हम एक कर्मचारी के समाधान है कि इस तरह एक छोटे से कुछ लग रहा है। दरअसल, मैं इस अखबार पर क्लिक करते हैं कैम्ब्रिज, मैसाचुसेट्स के लिए चिह्न, आप एक कताई देखेंगे संक्षेप में और फिर आइकन एक का आदेश दिया सूची, एक लेख के बुलेटेड सूची कैम्ब्रिज, मैसाचुसेट्स से संबंधित है। मैं Charlestown पर क्लिक करते हैं, मैसाचुसेट्स, मुझे लगता है कि शहर के लिए एक ही देखेंगे। और मैं पर क्लिक करते हैं Watertown, मैसाचुसेट्स, वहाँ कोई नहीं हो सकता है वाटरटाउन से की खबर है, इसलिए यदि आप कुछ देखेंगे धीमी समाचार दिन की तरह। 

अब, इस बीच, ऊपर छोड़ दिया पर हैं कुछ परिचित गूगल मैप्स नियंत्रण , पैन आप बाहर ज़ूम जाने के लिए ऊपर, नीचे, बाएँ, और सही, लेकिन हम भी वहाँ रखा है कि एक खोज बॉक्स। तो मैं स्पष्ट रूप से, के लिए खोज करते हैं, मैं जानता हूँ कि केवल अन्य ज़िप कोड, 90210, हम वास्तव में देखेंगे बेवर्ली हिल्स, कैलिफोर्निया। क्लिक किया जब यह करने के लिए मुझे सुराग कैलिफोर्निया और एक पूरी गुच्छा बेवर्ली हिल्स के बारे में खबर की। अब वहाँ क्या हुआ, भी, नोटिस। यहां तक ​​कि 02,138 या के लिए मैं तो इस समय खोज कैम्ब्रिज अल्पविराम मैसाचुसेट्स या कुछ संस्करण क्या है, यदि आप एक मिल छोटे से स्वत: पूर्ण लटकती। अब यह एक प्लगइन का उपयोग कर रहा है jQuery के नाम से एक पुस्तकालय के लिए, और कहा कि प्लगइन typeahead कहा जाता है। हम बस के माध्यम से पढ़ा प्रलेखन, .js एकीकृत फाइल डाउनलोड वितरण कोड में तो आपको लगता है कि अंततः कोड लिख सकते हैं ऑटो के साथ कि लटकती मेनू भरता है चयन या ऑटो सुझाव। 

अब वितरण कोड है, हालांकि, कि आप लगभग उतनी ही ऐसा नहीं करता प्राप्त किया। आप गूगल मानचित्र एम्बेडेड मिलता है, और यदि आप शीर्ष बाएँ नियंत्रण पाने के और आप खोज बॉक्स मिलता है। लेकिन मैं ऐसा कुछ टाइप 02,138, कोई स्थानों अभी तक पाए जाते हैं। तो यह है कि होने जा रहा है यहाँ हमारे लक्ष्यों में से एक। इसके अलावा, आप एक कदम उठाने अगर पीठ और नक्शा खुद को देखो, जो भी कोई खबर नहीं है। मैं क्लिक करें यहां तक ​​कि अगर और खींचें, वास्तव में कोई मार्करों कि क्योंकि खबर के लिए प्रदर्शित चुनौती के रूप में अच्छी तरह से आप के लिए छोड़ दिया है। 

तो एक नज़र रखना वितरण कोड पर। आप डाउनलोड करने के बाद pset8.zip और यह unzipped अपने vhost निर्देशिका में CS50 उपकरणों में, आप इन देखेंगे यहाँ के अंदर निर्देशिकाओं। आम तौर पर के लिए खड़ा है जो Bin-- निष्पादन योग्य programs-- के लिए द्विआधारी pset7, के रूप में शामिल है, कुछ पीएचपी अन्य फ़ाइलों को भी शामिल है कि फ़ाइलें, जो है तो जनता, जरूरत है कि फ़ाइलें सार्वजनिक रूप से सुलभ हो एक ब्राउज़र के साथ एक उपयोगकर्ता के लिए। में एक नज़र रखना बिन निर्देशिका, और हम करेंगे एक फ़ाइल है कि वहाँ देखना पहले से ही आयात वहां बुलाया। हम एडिट के साथ इस खोलते हैं, तो हम देखेंगे कि, दुर्भाग्य से, वहाँ ज्यादा नहीं है क्या आप वहां मौजूद हैं। हालांकि, वहाँ है कि सभी, शीर्ष पर एक कुटिया है जो जो निर्दिष्ट इस मामले में interpreter-- PHP-- वास्तव में करने के लिए इस्तेमाल किया जाना चाहिए इस फ़ाइल को निष्पादित। लेकिन फिर यह कहते हैं कि जहां आप कर रहे हैं, जहां TODO है कुछ कोड लिखने की जरूरत के लिए जा रहा कि शायद कॉन्फिग की आवश्यकता है निर्देशिका में शामिल में है कि फ़ाइल हम PHP फाइलों के साथ पहले किया है के रूप में। और फिर आप करने जा रहे हैं किसी भी तरह खोलने के लिए है us.text जो आप संभवतः पहले से ही unzipped है। तो फिर तुम करने के लिए जा रहे हैं उस फ़ाइल में लाइनों पर पुनरावृति, शायद कार्यों में से कुछ का उपयोग कर विनिर्देश में सुझाव दिया। तब उन लोगों में से प्रत्येक डालने MySQL डाटाबेस में लाइनों क्वेरी समारोह का उपयोग करके जो हम फिर से with-- आप प्रदान की है या कम से कम एक संस्करण उसके functions.php में, जो हम सिर्फ एक पल में देखेंगे। 

अब हम आयात बंद करें और वापस करने के लिए चलते हैं हमारी निर्देशिका और इस बार में जाने भी शामिल है। मैं वहाँ रास करते हैं, तो आप देखेंगे काफी समस्या सेट 7 की तरह तीन फ़ाइलें। और चलो एक त्वरित नज़र रखना, उदाहरण के लिए, config.php पर। वहाँ में, कम लाइनों है से पहले, और यह इस फाइल को शामिल लगता है constants.php और functions.php। हम एक अलग प्रयोग कर रहे हैं तकनीक वास्तव में करने के लिए इस बार के आसपास इन फ़ाइलों रिश्तेदार हैं कि निर्दिष्ट वर्तमान निर्देशिका के लिए __ DIR__ का प्रतिनिधित्व करता है जो कुछ निर्देशिका इस फ़ाइल, config.php, जो अपने आप में है। तो यह एक अधिक है निर्दिष्ट करने के स्पष्ट रास्ता आप की आवश्यकता करना चाहते हैं क्या अन्य फ़ाइलें। 

अब मैं इस फाइल को बंद करें और यदि बजाय constants.php ऊपर खुला, आप बहुत याद ताजा एक फाइल देखेंगे के लिए समस्या सेट 7 के रूप में अच्छी तरह से, यद्यपि pset8 नामक एक अलग डाटाबेस के साथ। अंत में, functions.php में, हम सिर्फ एक समारोह देखेंगे क्वेरी नामक इस समय। यह हम संभाल के अलावा लगभग एक ही है थोड़ा के आसपास त्रुटियों इस समय अलग ढंग से, लेकिन यह उपयोग के लिए है समस्या के रूप में ही सात निर्धारित किया है। 

अब हम हमारे pset8 में वापस जाने दिया निर्देशिका, जनता में जाना है, और वहाँ में मैं रास करते हैं, तो आप this-- देखेंगे articles.php, सूचकांक, search.php, और सभी फ़ाइलों update.php--। और फिर सीएसएस फोंट, IMG, और काफी pset7 तरह जेएस निर्देशिका। 

पर एक नज़र रखना जो सूचकांक, वास्तव में होने जा रहा smashup के लिए प्रवेश बिंदु। अब सूचकांक में, आप एक पूरे देखेंगे सिर में लिंक तत्व का गुच्छा, विशेष रूप से, अपने स्वयं के लिए बूटस्ट्रैप के लिए स्क्रिप्ट की एक पूरी गुच्छा द्वारा पीछा सीएसएस नक्शे, एपीआई जैसी चीजों के लिए टैग ही है, लेबल के साथ एक विशेष मार्कर हम में उल्लेख किया है कि उपयोगिता विनिर्देश, आप के लिए उपलब्ध है jQuery का ही है, बूटस्ट्रैप ही है, और एक और पुस्तकालय कहा जाता अंडरस्कोर जो हम कल्पना के बारे में बात करते हैं। Jquery.js तरह Underscore.js एक जावास्क्रिप्ट पुस्तकालय है कि कार्यक्षमता की एक पूरी गुच्छा है कि दुनिया इच्छा में बहुत से लोगों को जावास्क्रिप्ट अपने आप में ही अस्तित्व में। तो ये सब कर रहे हैं वास्तव में काफी लोकप्रिय है। हम यह भी typeahead उल्लेख किया है पुस्तकालय है जो कि करता है कि स्वत: पूर्ण लटकती और अंत में हमारे अपने जावास्क्रिप्ट के लिए एक कड़ी। 

इस बीच, और शायद शुक्र है, इस मैशप अपेक्षाकृत कम से प्रेरित है यहाँ नीचे तल पर एचटीएमएल। हम एक div में निर्दिष्ट किया है कि सूचना वर्ग-कंटेनर तरल पदार्थ का हमारे शरीर। यह प्रति बूटस्ट्रैप की प्रलेखन, बस इस div को भरने के लिए जा रहा है, इसका मतलब है कि व्यूपोर्ट या पूरी तरह से ब्राउज़र की खिड़की। 

इस बीच, है कि नीचे हम एक div है कि खोला और तुरंत बंद कर दिया गया है नक्शा कैनवास की अद्वितीय पहचान के साथ। यह अब गूगल से है मैप्स प्रलेखन अपने एपीआई, के लिए जिससे मैं बस करने की जरूरत है , इंजेक्षन करने के लिए जो में एक खाली div है अंत में, एक वास्तविक गूगल मैप्स। लेकिन सिर्फ एक बिट में उस पर और अधिक। 

अंत में, एक रूप है यहाँ के अंदर जो पाठ बॉक्स को शीर्ष छोड़ा लागू खोज के लिए हमारे इंटरफ़ेस में। हम का उपयोग किया है कि सूचना बूटस्ट्रैप का एक सा यहाँ की तरह बातें too-- फार्म-इनलाइन और फार्म-समूह। हम पूर्व दिया है फार्म की अद्वितीय पहचान। और फिर, अंत में, मैं वास्तव में है बहुत परिचित है जो एक इनपुट प्रकार, क्यू जिसका आईडी है। बस एक सम्मेलन। Query-- हो सकता है के लिए क्यू कुछ भी बुलाया गया। और फिर प्लेसहोल्डर, इस बीच, शहर, राज्य है, और डाक कोड यदि आपको याद हो सकता है डेमो पहले हमारे मैशप में देखकर। चलो इस फाइल को बंद कर दें। 

अब PHP फाइलों पर एक नज़र रखना है कि इंतजार और फिर जावास्क्रिप्ट फ़ाइलें। हमारे PHP फाइलों में, हम है पहले से ही आप के लिए लागू की, उदाहरण के लिए, अद्यतन। हम एक बहुत बड़ा खर्च नहीं होगा Update.php-- संक्षेप में here-- पर समय की राशि फ़ाइल है कि हमारे जावास्क्रिप्ट कोड जा रहा है AJAX के माध्यम से संपर्क करने के लिए कि है कि अतुल्यकालिक तकनीक है कि इन दिनों जावास्क्रिप्ट में निर्मित हमें update.php पूछने के लिए अनुमति देने के लिए जा रहा अधिक जानकारी के लिए। 

विशेष रूप से, किसी भी समय उपयोगकर्ता नक्शा drags या कूदता है कि एक खोज करता है किसी अन्य स्थान के लिए उपयोगकर्ता, हमारे JavaScript कोड, हम जल्द ही देखेंगे के रूप में है, update.php फोन करने वाला और 10 या तो मार्करों के लिए पूछना व्यूपोर्ट के भीतर आधारित जीपीएस निर्देशांक पर ऊपर और नीचे की नक्शा है कि के कोनों। हम तो अब नक्शा है कि फिर से आबाद कर सकते हैं उपयोगकर्ता क्रम में स्क्रीन ले जाया गया है 10 शायद नया देखने के लिए विभिन्न शहरों के लिए मार्करों। इस बीच, इस फाइल अंततः है एक एसक्यूएल क्वेरी को निष्पादित करने के लिए जा रहा हमारे डाटाबेस के खिलाफ तालिका बुलाया स्थानों जो उन पर लौटने के लिए जा रहा है 10 या कम स्थानों। 

इस बीच, articles.php में, एक और है हम अपनी संपूर्णता में लिखा है फ़ाइल। यह करने के लिए भावना में बहुत समान है समस्या सेट 7 LOOKUP समारोह, जो आप के लिए याहू वित्त से संपर्क किया। इस फ़ाइल में संपर्कों Google समाचार आप के लिए, अंततः हथियाने एक मशीन पठनीय version-- कुछ में खबर के आरएसएस format-- बुलाया कैम्ब्रिज या बेवर्ली हिल्स के लिए या जो कुछ भी शहर आप खोज की है के लिए कि geoparameter पर आधारित है। हम सिर्फ एक है जो कि आरएसएस, पार्स एक्सएमएल बुलाया मार्कअप भाषा का प्रकार, और फिर हम वास्तव में अपने ब्राउज़र के लिए यह वापसी और आपकी जावास्क्रिप्ट कोड को, विशेष रूप से, एक प्रारूप में बुलाया JSON, जावास्क्रिप्ट वस्तु संकेतन। अब तुम में देखेंगे specification-- हम आप बात आप वास्तव में देख सकते हैं कि कैसे में JSON के आने back-- के कुछ कि इस कार्यक्षमता अंततः आप तो उन पॉपअप मेनू आबाद देता है जब आप क्लिक करें कि नक्शे में एक मार्कर पर आप वास्तव में एक पूरी गुच्छा देखना गोलियों की, जिनमें से प्रत्येक का एक लेख के लिंक। 

अब हम पिछले एक पर एक नज़र रखना सौभाग्य से, नहीं करता है, जो PHP फ़ाइल ज्यादा है on-- जा रहा सिर्फ एक बहुत बड़ा TODO। ठीक है अब इस फाइल को वाणी एक सरणी स्थानों बुलाया। और फिर अंत में प्रिंट JSON के format-- में उस सरणी बस इतना है कि यह बहुत-मुद्रण बातें डिबग करने के लिए आसान कर रहे हैं। दुर्भाग्य से, में बीच इस TODO वहाँ है, आप खोज करने के लिए है, जो कहता है मिलान स्थानों के लिए डेटाबेस एक भू HTTP के पैरामीटर। 

और, वास्तव में, यह करने के लिए जा रहा है अपने challenges-- में से एक हो यहाँ इस कार्यक्षमता को लागू करने के लिए इतना है कि आप के साथ इस फाइल संपर्क जब खोज की तरह एक यूआरएल। PHP? जियो = कुछ है, अपने कोड अंततः एक JSON वापस आ जाएगी में स्थानों के सभी की सरणी अपने कि इनपुट से मेल खाने वाले डेटाबेस तालिका। कैम्ब्रिज में उपयोगकर्ता प्रकार तो अगर यहाँ अपनी फ़ाइल search.php अंततः एक JSON सरणी वापस आ जाना चाहिए कैम्ब्रिज के मैचों के लिए सभी के लिए, मैसाचुसेट्स में हो सकता है, जो लेकिन फिर भी कहीं और हो सकता है। 

अन्त में, दो पर एक नज़र रखना स्थिर ultimately-- हैं कि फ़ाइलों अपने सीएसएस फ़ाइल और आपकी जावास्क्रिप्ट फ़ाइल। मैं हमारे सीएसएस निर्देशिका में जाओ, फ़ाइलों की एक पूरी गुच्छा, वहाँ वहाँ लेकिन उनमें से ज्यादातर पुस्तकालयों रहे हैं। मैं एक बार देख लेने के लिए जा रहा हूँ, विशेष रूप से, styles.css पर, जो कि हमारे अपने वैश्विक सीएसएस इस पूरे मैशप stylize जा रहा है। आप के माध्यम से पढ़ने के लिए करने के लिए मैं इसे छोड़ देंगे टिप्पणियों के साथ साथ, लेकिन, संक्षेप में, इस सुनिश्चित करता है कि सीएसएस है हमारी मैशप, बॉक्स से बाहर डिफ़ॉल्ट रूप से, हम it-- चाहते ठीक तरह से लग रहा है देखें बंदरगाह भरने नक्शे के साथ और खोज के साथ ऊपर छोड़ दिया पर अप बॉक्स। हम यह भी करने की स्वतंत्रता ले लिया है कि typeahead लटकती stylizing मेनू एक छोटा सा के रूप में अच्छी तरह से। 

सबसे महत्वपूर्ण फाइल शायद सेट इस समस्या के लिए यह पिछले एक, scripts.js है। अपने जेएस निर्देशिका के अंदर यहां तक ​​कि अधिक फ़ाइलें है। वे सब के सब पुस्तकालय फाइल कर रहे हैं इस एक को छोड़कर, scripts.js। हम इस को खोलते हैं, के लिए ले जाने के लिए हमारे कार्यों के माध्यम से अंतिम दौरे कि इस फाइल में बनाया जाता है आप और कॉल ध्यान के लिए कि आगे झूठ सब करने के लिए। 

इस फाइल के शीर्ष पर, तीन वैश्विक चर रहे हैं। जा रहा है जो एक नक्शा, के लिए एक हमारे गूगल मानचित्र के लिए एक संदर्भ हो। आप इसके बारे में सोच सकते हैं तरह का एक संकेत के रूप में। इस बीच, हम हैं एक और वैश्विक चर प्रतीत होता है, जो कहा जाता है, जानकारी, एक कॉल की वापसी मान के भंडारण नई google.maps.InfoWindow करने के लिए। जावास्क्रिप्ट वस्तुओं का समर्थन करता है जो Struts के लिए भावना में बहुत समान हैं। और क्या इस लाइन के लिए हमारे उद्देश्यों के लिए कर रही है एक नई जानकारी पैदा कर रही है तो स्मृति और खिड़की एक संदर्भ के आसपास रखने के जानकारी नामक एक चर में बहां। और उन के बीच में, इस बीच, क्या प्रकट होता है एक खाली जावास्क्रिप्ट होने के लिए सरणी मार्करों बुलाया। उन समाचार पत्र माउस के सभी, या आप कुल मिलाकर एक और आइकन चुन सकते हैं, संग्रहीत किया जा करने के लिए जा रहे हैं अंततः इस सरणी में हम बहुत आसानी से करने के लिए जोड़ सकते हैं ताकि नक्शा और नक्शे से उन्हें हटा दें। 

अब चलो नीचे स्क्रॉल करते हैं एक छोटा सा और विशेषज्ञ होने जा रहा है कि कोड के माध्यम से डोम या दस्तावेज जैसे ही मार डाला ऑब्जेक्ट मॉडल या पृष्ठ ही तैयार है। इस वाक्य याद है कि यहाँ बस को निर्दिष्ट निम्नलिखित कोड है कि केवल निष्पादित किया जाना चाहिए ब्राउज़र समाप्त हो गया है जब बाकी सब लोड हो रहा है। 

हम पहले एक घोषित शैलियों की पूरी गुच्छा, stylizing जो अंत कल्पना के अनुसार नक्शा। हम तो एक घोषित विकल्पों की पूरी गुच्छा, आगे गूगल अनुकूलित जो हम एम्बेड करने के बारे में कर रहे हैं कि नक्शा। हम तो jQuery कोड का एक बिट का उपयोग जो थोड़ा और अधिक विस्तार से समझाया गया है कल्पना में, हड़पने के लिए उस तत्व, नक्शे-कैनवास हम इतने विशिष्ट पहचान है। और फिर इस लाइन यहाँ है क्या लगता है जादुई हमें देने के लिए के अंदर एक गूगल मानचित्र हमारे अपने आवेदन, एक संदर्भ बहां के भंडारण कि चर बुलाया नक्शे में। 

अंत में, यहाँ नीचे हम रजिस्टर क्या एक श्रोता कहा जाता है। Back-- तरह, जिस तरह सोचो CS50 में सप्ताह शून्य करने के लिए back-- हम खरोंच पर देखा और जब टहलने के माध्यम से अपना समर्थन कहा जाता बातों के लिए के माध्यम से घटनाओं और प्रसारण। आप का इस्तेमाल किया है नहीं हो सकता है यह अपने आप को, लेकिन यह बात है एक तंत्र जिससे एक इस मामले में ब्राउज़र जब यह हमारे ध्यान में प्राप्त कर सकते हैं वास्तव में कुछ कोड को निष्पादित करने के लिए तैयार है। इस मामले में, यह सुनने के लिए जा रहा है निष्क्रिय नामक एक घटना के लिए नक्शा करने के लिए। यह ब्राउज़र की है कि इसका मतलब है गूगल मानचित्र लोड हो रहा समाप्त हो गया। इस बिंदु पर एक समारोह में कहा जाता है कॉन्फ़िगर करना चाहिए अंततः निष्पादित किया। उस समारोह, विन्यस्त करता है, हम हमारे द्वारा लिखा गया है, देखेंगे। 

अब यहाँ नीचे एक समारोह है कि, दुर्भाग्य से, सिर्फ एक TODO ऐड मार्कर है। कल्पना के अनुसार। आप की जरूरत करने जा रहे हैं कि वास्तव में कोड लिखने के लिए यह लग रहा है कि क्या एक marker-- कहते हैं एक समाचार पत्र, या एक अंगूठे कील की तरह, या कुछ और गूगल मानचित्र के लिए else--। यहाँ अब उस समारोह है कॉन्फ़िगर बुलाया। आप पढ़ने के लिए करने के लिए मैं इसे छोड़ देंगे और अधिक विस्तार में इस माध्यम से, लेकिन हम जोड़ने का एहसास है कि एक गुच्छा अधिक श्रोताओं जब हम कोड को निष्पादित कर सकते हैं ताकि उपयोगकर्ता पर क्लिक करता है और नक्शा drags। हम यह भी है कि यहाँ में कोड है कि typeahead प्लगइन initializes इतना है कि लटकती मेनू वास्तव में काम करता है। 

लेकिन सिर्फ एक पर ध्यान केंद्रित करते हैं इस के साथ साथ स्थानों में से जोड़े। विशेष रूप से, इस यहाँ करने के लिए। मैं ऑनलाइन के लिए स्थगित कर देंगे प्रलेखन और विनिर्देश के लिए कैसे इस TODO में भरने के लिए। लेकिन संक्षेप में, इस लाइब्रेरी typeahead आप पारित करने के लिए अनुमति देता है आम तौर पर एक टेम्पलेट के रूप में जाना जाता है में, कुछ चर प्लेसहोल्डर है जो printf के% की भावना में बहुत समान। * एस। लेकिन इस मामले में, कल्पना प्रति टेम्पलेट आप निर्दिष्ट करने के लिए अनुमति देता है क्या चर आप चाहते हैं आ गया है कि डेटा से इंजेक्षन वापस पीएचपी तरह से कुछ से आप लिखा है कि फ़ाइलें कि JSON के उत्पादन उत्सर्जन कर रहे हैं। 

अब यहाँ नीचे हम महसूस करते हैं कि typeahead चयन के लिए सुन जब उपयोगकर्ता वास्तव में आयोजित करता है एक खोज और एक मूल्य का चयन करता है। यह है कि हम वास्तव में कर रहे हैं कि कैसे है उस के लिए सुनने के लिए जा रहा और एक परिणाम के रूप में कुछ कोड को निष्पादित। तो फिर हम विन्यस्त करने के लिए जारी रखने के लिए मैशप बस थोड़ा सा। और, अंततः, हम कॉल इस समारोह में अद्यतन। यह स्क्रीन पर मार्कर अद्यतन करता है। बस एक पल में उस पर और अधिक। इस बीच, कुछ नहीं है यहां के छोटे कार्य करता है। जिनमें से एक hideInfo है जो बस InfoWindow बंद कर देता है। यहां एक अन्य समारोह, जो अंततः बहुत लंबा नहीं होगा, मार्कर को हटा दें। यही पूर्ववत करने के लिए जा रहा है जो कुछ भी अपने ऐड मार्कर कार्य करता है। और फिर नीचे यहाँ खोज है। और यह एक रोचक है क्योंकि हम है कि जावास्क्रिप्ट कोड लिखा है पर search.php से बात करने के लिए जा रहा सर्वर और कुछ प्रतिक्रिया वापस मिलता है। 

तुम्हें पता है, जाहिर है, अभी भी होगा search.php को लागू करने की जरूरत है, लेकिन हम क्रियान्वित किया है है कि जावास्क्रिप्ट कोड प्रदर्शन कर वास्तव में संभाल करने के लिए जा रहा कि टेक्स्ट बॉक्स से खोज करता है। विशेष रूप से, नोटिस में यहाँ है कि इस समारोह में, खोज, search.php कॉल करता है कहा जाता है एक विधि द्वारा हम व्याख्यान में देखा था जो JSON, मिलता है। और यहाँ वाक्य रचना एक छोटे से अलग है उस में व्याख्यान से हम प्रयोग कर रहे हैं jQuery का वादा इंटरफ़ेस तथाकथित। कल्पना में उस पर और अधिक। यह सिर्फ हमारे लिए इसका मतलब अब लगता है कि वहाँ प्रयोजनों दो विशेष कार्य कर रहे हैं हम डॉट अंकन के साथ फोन करने की जरूरत यहाँ तुरंत JSON पाने के फोन करने के बाद। एक किया जाता है। कहा जाता है एक असफल। आप इन के बारे में सोच सकते हैं सफलता हैंडलर के रूप में और विफलता हैंडलर बस मामले में कुछ गलत हो जाता है। 

अब के अंतिम को देखो इस फाइल में कार्यों की जोड़ी। यहाँ नीचे एक समारोह है कहा जाता है showInfo, जो उन में से एक में जानकारी से पता चलता है थोड़ी जानकारी Windows कि उपयोगकर्ता एक मार्कर क्लिक करने पर चबूतरे। यहाँ नीचे आगे है कि अद्यतन समारोह कि हम आप के लिए लागू किया है। यह मानचित्र की सीमा निर्धारित करता है। के जीपीएस निर्देशांक क्या हैं इसकी पूर्वोत्तर और यहां दक्षिण पश्चिम कोनों। हम कुछ HDP मापदंडों तैयार किया है यहाँ और फिर अंततः उन्हें पारित हम है, जो update.php को आप के लिए भी लागू किया है। कि अंततः कुछ JSON के वापस हो जाता है फ़ाइल update.php बुलाया से और फिर किसी भी निकालता है स्क्रीन पर मार्कर और फिर खत्म हो iterates वापस आ गया है कि डेटा update.php, से जो फिर सिर्फ एक JSON सरणी है। और फिर यह अंततः एक मार्कर के लिए कहते हैं उन स्थानों में से प्रत्येक से निपटने विफलता या जो हो सकता है त्रुटियों को बहुत अच्छी तरह से हो। 

अब बस आप आप कैसे की एक स्वाद देने के लिए इस परियोजना के डिबगिंग के बारे में जाना हो सकता है, मैं में खोला है कि एहसास इस यूआरएल के लिए यहाँ इस टैब अग्रिम, pset8 / articles.php? जियो = 02,138। के बारे में अब, फिर से, लेख पीएचपी हम आप के लिए लागू किया तो यह इतना नहीं है आप उपयोग कर सकता हूँ क्या डिबग, बल्कि तकनीक के लिए। मैं के लिए खोज की है कि सूचना यहाँ कैम्ब्रिज की ज़िप कोड, और मैं एक JSON, वास्तव में, वापस मिल गया है JSON की सरणी जिसमें से अंदर की वस्तुओं दो keys-- लिंक और शीर्षक हैं। 

तो इस कार्यक्षमता आप के लिए पहले से ही काम करता है। लेकिन मैन्युअल रूप से इस तकनीक के लिए जा रहा कुछ के लिए इस तरह एक यूआरएल की तरह search.php? जियो = कैम्ब्रिज या 02,138 या उपयोगकर्ता चाहिए में टाइप किया है, जो कुछ भी यदि आप अपने आप को, की कोशिश के रूप में अमूल्य साबित यह पता लगाने के लिए वास्तव में क्या है या क्यों search.php काम कर रहा है या नहीं। 

अंत में तो, आपके पास आप के आगे कुछ TODOS। आप पहले से लागू कर जा रहे हैं कि आयात स्क्रिप्ट है कि अपने डेटाबेस में us.text में पढ़ता है। फिर आप की जरूरत करने जा रहे हैं search.php लागू करने के लिए निर्दिष्ट के रूप में यह वास्तव में बर्ताव करता है कि इतनी। फिर आप चाहते करने के लिए जा रहे हैं scripts.js पर ध्यान केंद्रित करने के लिए और अंत में लागू करता है सब के उन कुछ, कॉन्फ़िगर के लिए सहित और उस टेम्पलेट, , मार्करों जोड़ मार्करों हटाने, और तो, पिछले नहीं बल्कि कम से कम, एक निजी स्पर्श। 

आप अपने मैशप काम किया है एक बार हाथ में काफी हमारे जैसे, लक्ष्य आप एक व्यक्तिगत जोड़ने के लिए है अपने मैशप को छूना, यह सौंदर्य या कार्यात्मक है या नहीं। कभी तो मैशप लो थोड़ा अगले स्तर के लिए। तो जब तक आप से परे अपने आप को धक्का के रूप में कल्पना के साथ ही आपके अपनेपन और एक तकनीक उठाओ नई, यह भले ही बस कुछ बदलने की तरह सौंदर्य आप उपयोग कर रहे हैं कि नक्शा लेआउट, हम उम्मीद करते हैं कि गुंजाइश संतुष्ट हो जाएगा। यही तो समस्या सेट 8 मैशप है। में अधिक जानकारी के लिए देखते रहो विनिर्देश और शुभकामनाएँ इस से निपटने, अपनी पिछली CS50 समस्या कभी निर्धारित किया है। 

[संगीत खेल]