[เล่นเพลง] เดวิดเจลัน: สวัสดี ลองมาเดินผ่าน ปัญหาชุดที่ 8 Mashup, ซึ่งจะท้าทายให้คุณ วาดเมื่อองค์ประกอบของ Google Maps ที่มีองค์ประกอบจาก Google News และบด พวกเขาเข้าด้วยกันเป็นแอปเพล็เว็บที่ ช่วยให้ผู้ใช้ในการค้นหา แผนที่สำหรับข่าวท้องถิ่น ไปยังเมืองที่เฉพาะเจาะจง เมืองและรหัสไปรษณีย์ การทำเช่นนี้เรากำลังจะ รวมบาง HTML, CSS, PHP, SQL, JavaScript และเทคนิค เป็นที่รู้จักกันโดยทั่วไปว่าเป็น AJAX ในการสั่งซื้อ เพื่อสร้างดื่มด่ำนี้ ประสบการณ์ของผู้ใช้ Let 's แรกสำหรับ Google Maps ตัวเอง นี้แน่นอนอาจจะเป็น อินเตอร์เฟซที่คุ้นเคย แต่ปรากฎว่า Google Maps นอกจากนี้ยังมีแอปพลิเค API-- การเขียนโปรแกรม interface-- ผ่านที่ คุณสามารถใช้องค์ประกอบของ Google Maps และรวมไว้ใน การใช้งานของคุณเอง อันที่จริงตลอดนี้ กระบวนการที่คุณกำลังจะ เพื่อหาคู่ของ URL ที่ มีประโยชน์อย่างยิ่งว่า กล่าวถึงใน ข้อกำหนดสำหรับปัญหาชุดที่ 8 โดยเฉพาะการเริ่มต้นนี้ หรือคำแนะนำในคู่มือของนักพัฒนา สำหรับ Google Maps API รุ่น 3 เช่นกัน เป็น Google Maps JavaScript API อ้างอิง v3 ซึ่งเป็น บิตที่เป็นความลับมากขึ้นในการอ่าน แต่ที่จริงแล้วมีทั้งหมดของระดับที่ต่ำกว่า รายละเอียดเกี่ยวกับสิ่งที่ฟังก์ชั่นหรือวิธีการ และวัตถุและคุณสมบัติและ เหตุการณ์ที่เกิดขึ้นจริงมาพร้อมกับ API, คล้ายกันมากในจิตวิญญาณ ไปที่ [ไม่ได้ยิน] หน้า ตอนนี้ถ้าเราจะดู ที่ Google News คุณจะ บางทีอาจจะเห็นอินเตอร์เฟซที่คุ้นเคยที่นี่ แต่มันกลับกลายเป็นคุณยังสามารถค้นหา Google News สำหรับภูมิภาคที่เฉพาะเจาะจง ผ่านพารามิเตอร์ HTTP ที่เรียกว่าทางภูมิศาสตร์ ในความเป็นจริงถ้าผมดูภาพขยาย ขึ้นที่นี่คุณจะเห็นว่า ฉันที่ news.google.com/news/section?geo=02138 และแน่นอนถ้าผมซูม ออกคุณจะเห็นว่าฉัน กำลังมองหาที่หน้าเว็บที่มีทั้งกลุ่ม มุมมองเกี่ยวกับเคมบริดจ์, แมสซาชูเซต ในขณะเดียวกันถ้าจริงผมเปลี่ยน URL ไม่ได้ที่จะรหัสไปรษณีย์เช่นนี้ แต่บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ Messier เช่นเดียวกับเคมบริดจ์, แมสซาชูเซต +, ที่บวกเป็นวิธีที่คุณเข้ารหัส อักขระช่องว่างใน URL และกด Enter, คุณจะเห็นว่าที่จริงผม เห็นเกือบข่าวเดียวกัน บางทีมันอาจจะเป็นความแตกต่างกันเล็กน้อย เพราะเคมบริดจ์จริง มีหลายรหัสไปรษณีย์ ตอนนี้วิธีการที่ฉันจะรู้ว่าและ ในความเป็นจริงว่าสามารถฉันอย่างใด ผูกเมืองและเมือง เพื่อรหัสไปรษณีย์ในกรณีที่ฉัน ต้องการที่จะช่วยให้ผู้ใช้ ที่จะมองขึ้นอย่างใดอย่างหนึ่ง? ดีก็ปรากฎว่ามี เว็บไซต์ออกมีที่เรียกว่า geonames.org ซึ่งเป็น ความคิดริเริ่มที่จะมี ฐานข้อมูลที่มีอยู่ได้อย่างอิสระทั้งหมด ประเภทของข้อมูลทางภูมิศาสตร์ ไม่เพียง แต่สำหรับสหรัฐ แต่ยัง สำหรับประเทศอื่น ๆ เช่นกัน ในความเป็นจริงถ้าผมไปที่ URL นี้ที่นี่ซึ่ง ยังกล่าวถึงปัญหาที่กำหนด สเปคคุณจะเห็นมันสาม รายชื่อของทั้งกลุ่มของไฟล์ซิป ใด ๆ ที่สามารถดาวน์โหลดได้โดยคุณ ในความเป็นจริงสำหรับปัญหานี้ตั้ง คุณกำลังจะดาวน์โหลด us.zip ตอนนี้ที่อยู่ในแฟ้มนี้เป็นทั้ง พวงของข้อมูลในรูปแบบข้อความ ไฟล์จะคล้ายกับ CSV-- Comma Separated Values file-- แต่มันจริงใช้ แท็บไปปักปันเขตข้อมูล ตอนนี้ในขณะเดียวกันถ้าคุณดู ที่นี่ที่สิ่งที่ฉันได้เน้น เขตข้อมูลในไฟล์นี้จะ จะเป็นสิ่งที่ต้องการรหัสประเทศ รหัสไปรษณีย์ชื่อสถานที่ และจากนั้นในบางรูปแบบ หรืออื่น ๆ ที่รัฐและมณฑล ชุมชนและอื่น ๆ ในความเป็นจริงฉันได้แล้ว ดาวน์โหลดไฟล์นี้ล่วงหน้า ให้ฉันไปข้างหน้าและเปิดมันตรงนี้ us.text-- และแน่นอนคุณจะ ดูว่าฉันเลื่อนลงไปเข้าแถว 16792 คุณจะเห็นบันทึกไม่กี่สำหรับเคมบริดจ์ แมสซาชูเซตและรหัสไปรษณีย์ต่างๆ สิ่งที่คุณยังเห็นมีเขต ตัวเลขบางอย่างที่ฉันทำไม่ได้จริงๆ เข้าใจ แต่ยังทั้งหมด ทางด้านขวา, จีพีเอสบาง coordinates-- ละติจูดและลองจิจูด นี้ดีมากเพราะหนึ่ง คุณสมบัติของ Google Maps API คือความสามารถในการตรวจสอบ คุณจะอยู่ที่ไหนในทางภูมิศาสตร์ ในแง่ของพิกัดจีพีเอส ตอนนี้ขอเริ่มต้นที่จะคิดออกว่าจะ เริ่มต้นการผูกสิ่งเหล่านี้ร่วมกัน เราได้ให้คุณทั้ง พวงของรหัสการจัดจำหน่าย เช่นเดียวกับฐานข้อมูล MySQL ในความเป็นจริงถ้าผมดึง phpMyAdmin มี ที่นำเข้ามาแล้วในขณะที่คุณเร็ว ๆ นี้จะ pset8.SQL คุณจะเห็นตาราง MySQL ที่ ลักษณะเช่นนี้, ข้อมูลรหัสประเทศ รหัสรหัสไปรษณีย์ชื่อสถานที่และอื่น ๆ ประเภทของทุกคน คอลัมน์ที่ผมได้มาเพียงแค่ โดยการอ่าน readme.text ไฟล์ที่นี่ระบุว่า ไม่ว่าจะเป็นข้อมูลที่เป็นจำนวนเต็ม หรือ varchar หรือชอบ ดังนั้นเราจึงได้สร้างตารางที่ ให้คุณและให้คุณคำสั่ง SQL ที่จะดำเนินการในการสร้างว่า ตารางในฐานข้อมูลของคุณเอง แต่มีจริงไม่มีข้อมูลที่อยู่ในนั้นเลย แต่คุณจะต้อง ดาวน์โหลด us.zip หรือรหัสไปรษณีย์ของประเทศใด ๆ ไฟล์จาก URL ที่มี และจากนั้นคุณจะต้องเขียน สคริปต์บรรทัดคำสั่งใน PHP ที่ จะเปิดขึ้นข้อความว่า แฟ้มย้ำกว่าเส้น, แล้วสำหรับแต่ละ เส้นที่ทำแทรก เป็นที่สถานที่โต๊ะ ในฐานข้อมูลของ MySQL ดังนั้นในตอนท้ายของกระบวนการนี้คุณจะ ได้เรียกใช้สคริปต์ว่าในท้ายที่สุด เพียงครั้งเดียวในทฤษฎี ในความเป็นจริงคุณอาจจะ เรียกใช้พวงของครั้ง ในขณะที่พยายามที่จะแก้ไขข้อบกพร่องต่างๆ ในที่สุดคุณกำลังจะมี ฐานข้อมูลที่ใหญ่มากที่มีมากมาย และหลายพันแถวทางภูมิศาสตร์ แล้วคุณจะใส่นำเข้าที่ สคริปต์กันเมื่อมีการทำงาน และฐานข้อมูลของคุณเป็นสิ่งที่ดี และถูกต้องแล้ว คุณกำลังจะย้ายไปจริง การดำเนินการตอบโต้กับผู้ใช้ได้เอง Mashup จะไปดู บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เช่นนี้ ที่ mashup.cs50.net เรา มีทางออกพนักงาน ที่มีลักษณะบางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เช่นนี้ แน่นอนถ้าฉันคลิกที่หนังสือพิมพ์ฉบับนี้ icon สำหรับเคมบริดจ์, แมสซาชูเซต คุณจะเห็นการปั่น icon สั้น ๆ แล้ว รายการสั่งซื้อ, รายการสัญลักษณ์ของบทความ ที่เกี่ยวข้องกับเคมบริดจ์, แมสซาชูเซต ถ้าฉันคลิกที่ชาร์ลส แมสซาชูเซต ฉันจะเห็นเหมือนกันสำหรับเมืองที่ และถ้าฉันคลิกที่ ทาวน์แมสซาชูเซต มีอาจจะไม่ใด ๆ ข่าวจากทาวน์ ดังนั้นคุณจะเห็นอะไรบางอย่าง เช่นวันข่าวช้า ตอนนี้ขณะที่ด้านซ้ายด้านบน บางควบคุมคุ้นเคยของ Google Maps ที่จะให้คุณซูมออกกระทะ ขึ้นลงซ้ายและขวา แต่ยังกล่องค้นหาที่เราใส่มี ดังนั้นถ้าฉันค้นหาตรงไปตรงมา เพียงรหัสไปรษณีย์อื่น ๆ ที่ฉันรู้ 90210 เราจะเห็น Beverly Hills, California เมื่อคลิกมันทำให้ฉัน รัฐแคลิฟอร์เนียและทั้งกลุ่ม ข่าวเกี่ยวกับการที่ Beverly Hills ตอนนี้แจ้งให้ทราบล่วงหน้าเกินไปสิ่งที่เกิดขึ้นที่นั่น ถ้าผมค้นหาในเวลานี้สำหรับ 02138 หรือแม้กระทั่ง เคมบริดจ์แมสซาชูเซตจุลภาคหรือบางส่วน ตัวแปรนั้นคุณจะได้รับ ป้อนข้อมูลอัตโนมัติแบบเลื่อนลงเล็กน้อย ตอนนี้ใช้ปลั๊กอิน ห้องสมุดที่เรียกว่า jQuery, และปลั๊กอินที่เรียกว่า typeahead เราก็อ่านผ่าน เอกสาร ที่ดาวน์โหลด .js ยื่นแบบบูรณาการ เป็นรหัสการกระจายเพื่อให้คุณ ในที่สุดสามารถเขียนโค้ดที่ เติมเมนูแบบเลื่อนลงว่าด้วยรถยนต์ เลือกหรือข้อเสนอแนะอัตโนมัติ ตอนนี้รหัสกระจายได้ว่า คุณได้รับไม่ได้ทำเกือบเท่า คุณจะได้รับ Google Map ฝังตัวและ คุณจะได้รับการควบคุมด้านบนซ้าย และคุณจะได้รับกล่องค้นหา แต่ถ้าฉันพิมพ์สิ่งที่ต้องการ 02138, สถานที่ไม่พบเลย เพื่อให้เป็นไปได้ หนึ่งในเป้าหมายของเราที่นี่ นอกจากนี้ถ้าคุณจะใช้ขั้นตอน ย้อนกลับไปและมองไปที่แผนที่ของตัวเอง มีข่าว แต่ประการใด แม้ว่าผมจะคลิกและ ลากเครื่องหมายไม่มีจริง ปรากฏข่าวเนื่องจากว่า ความท้าทายที่เหลือสำหรับคุณเช่นกัน ลองมาดูแล้ว ที่รหัสกระจาย เมื่อคุณได้ดาวน์โหลด pset8.zip และซิปมัน ลงในไดเรกทอรี vhost ของคุณ ใน CS50 ซ่อมแซมเครื่องใช้ไฟฟ้า คุณจะเห็นเหล่านี้ ไดเรกทอรีที่นี่ภายใน Bin-- ซึ่งโดยทั่วไปหมายถึง ไบนารีสำหรับ programs-- ปฏิบัติการ รวมถึงในขณะที่ pset7 บาง PHP ไฟล์ที่ไฟล์อื่น ๆ รวมถึง ประชาชนแล้วซึ่งเป็น ไฟล์ที่ต้องการ เพื่อให้สามารถเข้าถึงสาธารณชน ให้กับผู้ใช้เบราว์เซอร์ ลองมาดูใน ไดเรกทอรีถังและเราจะ เห็นว่ามีไฟล์ เรียกว่ามีอยู่แล้วนำเข้า ถ้าเราเปิดนี้กับ Gedit เราจะเห็น ว่าโชคไม่ดีมีไม่มาก ที่นั่น ทั้งหมดที่จะมี แต่ เป็น shebang ที่ด้านบน ซึ่งระบุว่า interpreter-- ในกรณีนี้ PHP-- ควรจะใช้จริง รันไฟล์นี้ แต่แล้วที่จะกล่าวว่า สิ่งที่ต้องทำคือที่ที่คุณอยู่ จะต้องเขียนโค้ดบาง ที่อาจจะต้องมีการตั้งค่า ไฟล์ที่อยู่ในไดเรคทอรวมถึง ในขณะที่เราเคยทำมาก่อนกับไฟล์ PHP แล้วคุณกำลังจะไป ต้องอย่างใดเปิด us.text ที่คุณน่าจะ มีซิปแล้ว จากนั้นคุณจะต้อง ย้ำกว่าบรรทัดในไฟล์นั้น บางทีอาจจะใช้บางส่วนของฟังก์ชั่น ข้อเสนอแนะในสเปค แล้วใส่แต่ละคน เส้นลงในฐานข้อมูล MySQL โดยใช้ฟังก์ชั่นการสอบถามซึ่ง เราได้ให้คุณอีกครั้ง with-- หรืออย่างน้อยก็แตกต่าง ดังกล่าวใน functions.php, ซึ่งเราจะเห็นในเวลาเพียงสักครู่ ตอนนี้ขอปิดการนำเข้าและกลับไปที่ ไดเรกทอรีและเวลานี้ของเราไปลง รวมถึง และถ้าฉัน do ls มีคุณจะเห็น สามไฟล์มากเช่นปัญหาชุดที่ 7 และขอใช้เวลาดูอย่างรวดเร็ว ตัวอย่างเช่นที่ config.php ในนั้นเป็นเส้นที่น้อยลง กว่าก่อนและมัน ดูเหมือนว่าไฟล์นี้รวมถึง constants.php และ functions.php เรากำลังใช้แตกต่างกันเล็กน้อย เทคนิคในเวลานี้จริง ระบุว่าไฟล์เหล่านี้เป็นญาติ ไปยังไดเรกทอรีปัจจุบัน __ DIR__ แสดงให้เห็นถึงสิ่งที่ไดเรกทอรีนี้ ไฟล์ config.php เป็นตัวเองใน ดังนั้นนี้เป็นมากขึ้น วิธีการที่ชัดเจนในการระบุ สิ่งที่ไฟล์อื่น ๆ ที่คุณต้องการที่จะต้องใช้ ตอนนี้ถ้าผมปิดแฟ้มนี้และ เปิด constants.php แทน คุณจะเห็นไฟล์ที่ชวนให้นึกถึงมาก เพื่อปัญหาชุดที่ 7 เป็นอย่างดีแม้ว่า กับฐานข้อมูลที่แตกต่างกันเรียกว่า pset8 สุดท้ายใน functions.php, เราจะเห็นเพียงหนึ่งฟังก์ชั่น เวลานี้เรียกว่าแบบสอบถาม นี้เกือบจะเหมือนกันยกเว้นเราจัดการ ข้อผิดพลาดในครั้งนี้ประมาณนิด ๆ หน่อย ๆ ที่แตกต่างกัน แต่ก็ใช้งานคือ เช่นเดียวกับในปัญหาตั้งเจ็ด ตอนนี้ขอกลับไป pset8 ของเรา ไดเรกทอรีไปในที่สาธารณะและในที่นั่น ถ้าฉันทำ LS คุณจะเห็นเจ้านี่ articles.php, index.html, search.php, และ update.php-- ไฟล์ทั้งหมด และแล้วแบบอักษร CSS, img และ ไดเรกทอรี JS ค่อนข้างชอบ pset7 ลองมาดูที่ index.html ซึ่งเป็น จะเป็นจริงๆ จุดเริ่มต้นที่จะ Smashup ขณะนี้ใน index.html คุณจะเห็นทั้ง พวงขององค์ประกอบการเชื่อมโยงในหัว โดยเฉพาะสำหรับบูตสำหรับของเราเอง CSS ตามมาด้วยทั้งกลุ่มของสคริปต์ แท็กสำหรับสิ่งที่ต้องการแผนที่, API ตัวเองเครื่องหมายพิเศษที่มีป้าย ยูทิลิตี้ที่เรากล่าวถึงใน สเปคสามารถใช้ได้กับคุณ jQuery ตัวเองบูต ตัวเองและห้องสมุดอื่น เรียกว่าขีดที่ เราพูดคุยเกี่ยวกับในสเปค Underscore.js เช่น jquery.js เป็นห้องสมุด JavaScript ที่มีทั้งกลุ่มของการทำงาน ว่าคนจำนวนมากในโลกปรารถนา มีอยู่ใน JavaScript ตัวเอง ดังนั้นสิ่งเหล่านี้เป็น จริงที่นิยมมาก เราได้กล่าวถึง typeahead ซึ่งเป็นห้องสมุดที่ ไม่ว่าการเติมข้อความอัตโนมัติและแบบเลื่อนลง ในที่สุดการเชื่อมโยงไปของเราเอง JavaScript ในขณะเดียวกันและอาจ โชคดี Mashup นี้ คือการขับเคลื่อนด้วยค่อนข้างน้อย HTML ลงที่นี่ที่ด้านล่าง แจ้งให้ทราบว่าเราได้ระบุไว้ใน div ร่างกายของเราของของเหลวชั้นภาชนะ นี้บูตต่อของ เอกสารเพียง หมายความว่า div นี้เป็นไปเพื่อเติมเต็ม viewport หรือหน้าต่างเบราว์เซอร์ได้อย่างเต็มที่ ในขณะที่ด้านล่างที่เรามี div ที่เปิดและปิดได้ทันที กับ ID ที่ไม่ซ้ำของผ้าใบแผนที่ ซึ่งในขณะนี้คือจาก Google แผนที่เอกสาร สำหรับ API ของมันโดยผมก็ต้องทำ มี div ที่ว่างเปล่าลงไปในการที่จะฉีด ในที่สุดแผนที่ของ Google ที่เกิดขึ้นจริง แต่เพิ่มเติมว่าในเพียงเล็กน้อย สุดท้ายมีรูปแบบ ด้านในของที่นี่ซึ่ง นำไปปฏิบัติกล่องข้อความขึ้นด้านบนซ้าย ในอินเตอร์เฟซของเราสำหรับการค้นหา แจ้งให้ทราบว่าเราได้ใช้ บิตของบูต ที่นี่ too-- สิ่งที่ต้องการ รูปแบบอินไลน์และแบบกลุ่ม เราได้รับในอดีต ID ที่ไม่ซ้ำแบบฟอร์ม และแล้วในที่สุดที่จริงผมมี ประเภทขาเข้าซึ่งเป็นที่คุ้นเคยสวย ที่มี ID เป็นคิว เพียงแค่การประชุม Q สำหรับ query-- อาจมี ถูกเรียกว่าอะไร และจากนั้นก็ยึด, ขณะที่เป็นเมืองรัฐ และรหัสไปรษณีย์ที่คุณอาจจำ เห็นใน Mashup สาธิตของเราก่อนหน้านี้ ขอปิดแฟ้มนี้ ตอนนี้มาดูไฟล์ PHP ที่ รอแล้วไฟล์ JavaScript ในไฟล์ PHP ของเราเราได้ ดำเนินการแล้วสำหรับคุณ เช่นการปรับปรุง เรา Update.php-- จะไม่ใช้จ่ายมาก ระยะเวลาในตรงนี้สั้น คือแฟ้มที่ของเรา รหัส JavaScript เป็นไป จะติดต่อผ่านทาง AJAX ว่า เทคนิคที่ไม่ตรงกัน ที่สร้างขึ้นใน JavaScript วันนี้ที่ จะช่วยให้เราสามารถถาม update.php สำหรับข้อมูลเพิ่มเติม โดยเฉพาะที่ทุกเวลา ผู้ใช้ลากแผนที่ หรือทำการค้นหาที่กระโดด ผู้ใช้ไปยังตำแหน่งอื่น รหัส JavaScript ของเรา ในขณะที่เราจะเห็นทันทีคือ จะเรียก update.php และขอ 10 หรือดังนั้นเครื่องหมาย ภายใน viewport ตาม ในพิกัดจีพีเอส ด้านบนและด้านล่าง มุมของแผนที่ที่ จากนั้นเราจะสามารถ repopulate แผนที่ในขณะนี้ว่า ผู้ใช้ที่มีการย้ายหน้าจอในการสั่งซื้อ เพื่อดู 10 อาจจะใหม่ เครื่องหมายสำหรับเมืองที่แตกต่างกัน ในขณะที่ไฟล์นี้เป็นที่สุด จะดำเนินการแบบสอบถาม SQL กับฐานข้อมูลของเรา ตารางที่เรียกว่าสถานที่ซึ่ง กำลังจะกลับมาเหล่านั้น 10 หรือน้อยกว่าสถานที่ ในขณะเดียวกันใน articles.php เป็นอีกหนึ่ง ไฟล์ที่เราได้เขียนในสิ่งทั้งปวง มันเป็นมากในทำนองเดียวกันกับ ปัญหาชุดที่ 7 ของฟังก์ชั่นการค้นหา, ซึ่งติดต่อกับกองทุนการเงินระหว่างประเทศสำหรับคุณ รายชื่อแฟ้มนี้ Google News สำหรับคุณในที่สุดโลภ เครื่องอ่าน version-- ในบางสิ่งบางอย่าง เรียกว่า RSS format-- ของข่าว เคมบริดจ์หรือ Beverly Hills หรืออะไรก็ตามที่เมืองที่คุณเคยค้นหา สำหรับขึ้นอยู่กับ geoparameter ว่า เราแยกว่า RSS ซึ่งเป็นเพียง ประเภทของภาษามาร์กอัปที่เรียกว่า XML, และจากนั้นเราจริง กลับไปที่เบราว์เซอร์ของคุณ และรหัส JavaScript ของคุณ โดยเฉพาะในรูปแบบที่เรียกว่า JSON, JavaScript Object สัญลักษณ์ ตอนนี้คุณจะเห็นใน specification-- เราชี้ให้คุณ ที่วิธีการที่คุณสามารถมองเห็น บางส่วนของ JSON back-- มา ว่าการทำงานนี้ในท้ายที่สุด ช่วยให้คุณสามารถเติมเมนูป๊อปอัพเหล่านั้นเพื่อให้ ที่ว่าเมื่อคุณคลิก เครื่องหมายบนแผนที่ คุณเห็นจริงทั้งกลุ่ม กระสุนแต่ละที่ เชื่อมโยงไปยังบทความ ตอนนี้เรามาดูที่สุดท้าย ไฟล์ PHP ซึ่งโชคดีที่ไม่ได้ มีมากที่เกิด on-- เพียงแค่สิ่งที่ต้องทำใหญ่สวย ตอนนี้ไฟล์นี้ประกาศ อาร์เรย์เรียกว่าสถานที่ และจากนั้นพิมพ์ในท้ายที่สุด อาร์เรย์ว่าใน JSON format-- สวยพิมพ์เพียงเพื่อให้ สิ่งที่ง่ายต่อการแก้ปัญหา แต่น่าเสียดายที่ใน ตรงกลางมีสิ่งที่ต้องทำเช่นนี้ ซึ่งเรียกร้องให้คุณสามารถค้นหา ฐานข้อมูลสำหรับสถานที่การจับคู่ทางภูมิศาสตร์ HTTP พารามิเตอร์ และแน่นอนนี้เป็นไป เป็นหนึ่งใน challenges-- ของคุณ ที่จะใช้ฟังก์ชั่นนี้ได้ที่นี่ เพื่อที่ว่าเมื่อคุณติดต่อกับไฟล์นี้ URL เช่นการค้นหา PHP? ภูมิศาสตร์ = บางสิ่งบางอย่าง รหัสของคุณในที่สุดจะกลับ JSON อาร์เรย์ของทั้งหมดของสถานที่ในของคุณ ตารางฐานข้อมูลที่ตรงกับการป้อนข้อมูลที่ ดังนั้นหากผู้ใช้ในเคมบริดจ์ ไฟล์ของคุณที่นี่ search.php ในท้ายที่สุดควรจะกลับอาร์เรย์ JSON ทั้งหมดของการแข่งขันสำหรับเคมบริดจ์ ซึ่งอาจจะอยู่ในแมสซาชูเซต แต่อาจจะที่ใด สุดท้ายลองมาดูที่สอง ไฟล์ที่คง ultimately-- ไฟล์ CSS และ JavaScript แฟ้มของคุณ ถ้าฉันไปลงในไดเรกทอรี CSS ของเรา มีทั้งกลุ่มของไฟล์ที่มี แต่ส่วนใหญ่ของพวกเขาเป็นห้องสมุด ฉันจะไปดู, โดยเฉพาะที่ styles.css, ซึ่งเป็น CSS ทั่วโลกของเราเองว่าเป็น ไปเพื่อ Stylize ทั้งหมดนี้ตอบโต้กับผู้ใช้ได้ ผมจะปล่อยให้คุณอ่านผ่าน แสดงความคิดเห็นในที่นี้ แต่สั้น, นี่คือ CSS ที่ทำให้มั่นใจว่าของเรา ตอบโต้กับผู้ใช้ได้โดยค่าเริ่มต้นออกมาจากกล่อง ดูว่าวิธีที่เราต้องการพูดไป แผนที่กรอกพอร์ตมุมมอง และที่มีการค้นหา กล่องขึ้นที่ด้านบนซ้าย เราได้นอกจากนี้ยังมีเสรีภาพในการ stylizing ที่ typeahead แบบเลื่อนลง เมนูนิด ๆ หน่อย ๆ ได้เป็นอย่างดี ไฟล์ที่สำคัญที่สุด อาจจะเป็นเพราะปัญหานี้ตั้ง เป็นหนึ่งในล่าสุดนี้ scripts.js ภายในของไดเรกทอรี JS ของคุณ เป็นไฟล์มากยิ่งขึ้น ทั้งหมดของพวกเขาเป็นไฟล์ห้องสมุด ยกเว้นหนึ่งนี้ scripts.js ถ้าเราเปิดนี้ขึ้นขอใช้เวลาของเรา ทัวร์สุดท้ายผ่านฟังก์ชั่นที่ ถูกสร้างขึ้นในไฟล์นี้ สำหรับคุณและให้ความสนใจโทร เพื่อ Todos ที่อยู่ข้างหน้า ที่ด้านบนของไฟล์นี้, สามตัวแปรทั่วโลก หนึ่งสำหรับแผนที่ซึ่งเป็นไปได้ จะมีการอ้างอิงไปยังแผนที่ของ Google คุณสามารถคิดว่ามัน การเรียงลำดับของเป็นตัวชี้ ขณะเดียวกันเรามี อีกตัวแปรทั่วโลก ข้อมูลที่เรียกว่าซึ่งดูเหมือนจะเป็น การจัดเก็บค่าตอบแทนของการโทร เพื่อ google.maps.InfoWindow ใหม่ JavaScript สนับสนุนวัตถุที่ มีความคล้ายกันในจิตวิญญาณที่จะ Struts และสิ่งที่สายนี้ วัตถุประสงค์ของเราคือการทำ คือการสร้างข้อมูลใหม่ หน้าต่างในหน่วยความจำแล้ว การรักษารอบการอ้างอิง การขออนุญาตในตัวแปรที่เรียกว่าข้อมูล และในระหว่างนั้น ขณะที่เป็นสิ่งที่ปรากฏ จะเป็น JavaScript ว่างเปล่า อาร์เรย์เรียกว่าเครื่องหมาย ทั้งหมดของไอคอนหนังสือพิมพ์เหล่านั้นหรือคุณ อาจเลือกไอคอนอื่นทั้งหมด จะถูกเก็บไว้ ในท้ายที่สุดในอาร์เรย์นี้ เพื่อให้เราได้อย่างง่ายดายมากสามารถเพิ่ม แผนที่และลบออกจากแผนที่ ตอนนี้ขอเลื่อนลง นิด ๆ หน่อย ๆ และหวือ รหัสผ่านที่เป็นไปได้ ดำเนินการโดยเร็วที่สุดเท่า DOM หรือเอกสาร รูปแบบวัตถุหรือ หน้าตัวเองมีความพร้อม จำได้ว่ารูปแบบนี้ ที่นี่เพียงแค่ระบุ ว่ารหัสดังต่อไปนี้ ควรจะดำเนินการเท่านั้น เมื่อเบราว์เซอร์ได้เสร็จสิ้น โหลดทุกอย่างอื่น ครั้งแรกที่เราประกาศ ทั้งกลุ่มของรูปแบบ ซึ่งจบลง stylizing แผนที่ตามสเปค จากนั้นเราจะประกาศ ทั้งกลุ่มของตัวเลือก ซึ่งต่อไปจะปรับแต่งของ Google แผนที่ที่เรากำลังจะฝัง จากนั้นเราจะใช้บิตของรหัส jQuery, ซึ่งจะอธิบายในรายละเอียดอีกเล็กน้อย ในสเปคที่จะคว้า องค์ประกอบที่แผนที่ผ้าใบ ที่เราเพื่อระบุเอกลักษณ์ และแล้วบรรทัดนี้ที่นี่ สิ่งที่ดูเหมือนจะให้เราอย่างน่าอัศจรรย์ Google แผนที่ภายในของ แอพลิเคชันของเราเอง การจัดเก็บการอ้างอิงดังกล่าวข้างต้น ในตัวแปรที่เรียกว่าแผนที่ที่ สุดท้ายลงที่นี่เราลงทะเบียน สิ่งที่เรียกว่าฟัง คิดว่าวิธี back-- วิธี back-- สัปดาห์ศูนย์ใน CS50 เมื่อเรามองไปที่รอยขีดข่วนและ การสนับสนุนผ่านทางเดิน ผ่านสิ่งที่เรียกว่า กิจกรรมและการออกอากาศ คุณอาจไม่ได้ใช้ ด้วยตัวคุณเอง แต่ก็ กลไกการโดย เบราว์เซอร์ในกรณีนี้ จะได้รับความสนใจของเราเมื่อมัน พร้อมที่จะจริงรันโค้ดบาง ในกรณีนี้ก็จะฟัง แผนที่สำหรับเหตุการณ์ที่เรียกว่าไม่ได้ใช้งาน ซึ่งหมายความว่าเบราว์เซอร์ได้ เสร็จสิ้นการโหลดแผนที่ Google ณ จุดนี้ฟังก์ชั่นที่เรียกว่า กำหนดค่าที่สุดควร จะดำเนินการ ฟังก์ชั่นที่กำหนดค่า เราจะเห็นเป็นลายลักษณ์อักษรจากเรา ตอนนี้ลงมาที่นี่เป็นฟังก์ชั่น ว่าโชคไม่ดี เป็นเพียงสิ่งที่ต้องทำเพิ่มเครื่องหมาย ต่อข้อมูลจำเพาะ คุณกำลังจะต้อง การเขียนโค้ดที่จริง เพิ่ม marker-- ไม่ว่าจะมีลักษณะ เช่นหนังสือพิมพ์หรือตะปูหัวแม่มือ หรือบางสิ่งบางอย่างที่จะ else-- Google แผนที่ ที่นี่ตอนนี้เป็นฟังก์ชันที่ ที่เรียกว่าการกำหนดค่า ผมจะปล่อยให้คุณอ่าน ผ่านทางนี้ในรายละเอียดมากขึ้น แต่รู้ว่าเราเพิ่ม ฟังพวงมากขึ้น เพื่อให้เราสามารถรันโค้ดเมื่อ ผู้ใช้คลิกที่และลากแผนที่ นอกจากนี้เรายังมีรหัสในที่นี่ว่า เริ่มต้นที่ปลั๊กอิน typeahead เพื่อให้เลื่อนลง เมนูใช้งานได้จริง แต่ขอมุ่งเน้นเพียง คู่ของสถานที่นี้ โดยเฉพาะนี้จะทำที่นี่ ฉันจะเลื่อนไปออนไลน์ เอกสารและข้อกำหนด สำหรับวิธีการกรอกข้อมูลในสิ่งที่ต้องทำเช่นนี้ แต่ในสั้น, ห้องสมุดนี้ typeahead ช่วยให้คุณสามารถที่จะผ่าน ในสิ่งที่เป็นที่รู้จักกันโดยทั่วไปว่าเป็นแม่แบบ ซึ่งมีตัวยึดตัวแปรบาง คล้ายกันมากในจิตวิญญาณไปยัง% ของ printf. s * แต่ในกรณีนี้ แม่แบบต่อข้อมูลจำเพาะ ช่วยให้คุณสามารถระบุ สิ่งที่ตัวแปรที่คุณต้องการ การฉีดจากข้อมูลที่ได้มา กลับมาจากบางสิ่งบางอย่างเช่น PHP ไฟล์ที่คุณเขียน ที่มีการส่งออกเปล่ง JSON ตอนนี้ลงมาที่นี่รู้ว่าเราเป็น ฟังเพื่อเลือก typeahead เมื่อผู้ใช้จริงดำเนินการ ค้นหาและเลือกค่า นี่คือวิธีการที่เรากำลังจริง จะไปฟังว่า และรันโค้ดบางส่วนเป็นผล จากนั้นเราก็ยังคงกำหนดค่า ตอบโต้กับผู้ใช้ได้เพียงเล็กน้อย และท้ายที่สุดที่เราเรียกว่า การปรับปรุงฟังก์ชั่นนี้ มันปรับปรุงเครื่องหมายบนหน้าจอ เพิ่มเติมเกี่ยวกับที่ในเพียงสักครู่ ในขณะที่มีเพียงไม่กี่ ฟังก์ชั่นขนาดเล็กในที่นี่ หนึ่งซึ่งเป็นที่ hideInfo เพียงแค่ปิด InfoWindow ฟังก์ชั่นอื่น ๆ อีกที่นี่ซึ่งในท้ายที่สุด จะไม่นานเกินไปลบเครื่องหมาย ที่จะยกเลิกสิ่งที่ เพิ่มฟังก์ชั่นเครื่องหมายของคุณไม่ และจากนั้นก็ลงที่นี่คือการค้นหา และหนึ่งในนี้เป็นที่น่าสนใจเพราะเรา ได้เขียนรหัส JavaScript ที่ จะไปพูดคุยกับ search.php บน เซิร์ฟเวอร์และได้รับการตอบสนองกลับมาบางส่วน คุณแน่นอนจะยังคง จำเป็นต้องใช้ search.php, แต่เราได้ดำเนินการ รหัส JavaScript ที่ จะจัดการกับการปฏิบัติจริง ค้นหาจากกล่องข้อความที่ โดยเฉพาะอย่างยิ่งแจ้งให้ทราบล่วงหน้า ที่ฟังก์ชั่นนี้ที่นี่ การค้นหาไม่เรียก search.php โดยวิธีการที่เรียกว่า ได้รับ JSON ซึ่งเราเห็นในการบรรยาย และไวยากรณ์ที่นี่ เป็นเพียงเล็กน้อยที่แตกต่างกัน จากการบรรยายในการที่เรากำลังใช้ jQuery สัญญาอินเตอร์เฟซที่เรียกว่า เพิ่มเติมเกี่ยวกับที่อยู่ในสเปค นี้ก็หมายความว่าสำหรับเรา วัตถุประสงค์ในขณะนี้ว่ามี มีสองฟังก์ชั่นพิเศษที่เรา ต้องเรียกด้วยเครื่องหมายจุด ที่นี่ทันทีหลังจากที่ได้รับการเรียก JSON หนึ่งเรียกว่าทำ หนึ่งเรียกว่าล้มเหลว คุณสามารถคิดเหล่านี้ เป็นตัวจัดการที่ประสบความสำเร็จ และจัดการความล้มเหลวเพียง ในกรณีที่มีอะไรผิดพลาด ตอนนี้ให้ดูที่ผ่านมา คู่ของฟังก์ชั่นในแฟ้มนี้ ลงที่นี่เป็นฟังก์ชั่น เรียกว่า showInfo ซึ่ง แสดงข้อมูลในหนึ่งในบรรดา หน้าต่างข้อมูลเล็ก ๆ น้อย ๆ ที่ ปรากฏขึ้นเมื่อผู้ใช้คลิกที่เครื่องหมาย ลงที่นี่ต่อไปคือ ที่ฟังก์ชั่นการปรับปรุง ที่เราได้ดำเนินการสำหรับคุณ จะเป็นตัวกำหนดขอบเขตของแผนที่ อะไรคือพิกัดจีพีเอสในตัวของมัน ภาคตะวันออกเฉียงเหนือและมุมตะวันตกเฉียงใต้ที่นี่ เราได้เตรียมบางพารามิเตอร์ HDP ที่นี่จากนั้นผ่านไปพวกเขาในที่สุด เพื่อ update.php ซึ่งเราได้ ดำเนินการนอกจากนี้ยังมีสำหรับคุณ ว่าในท้ายที่สุดจะกลับมาบาง JSON จากไฟล์ที่เรียกว่า update.php แล้วเอาใด ๆ เครื่องหมายบนหน้าจอ แล้ว iterates กว่า ข้อมูลที่ได้กลับมา จาก update.php ซึ่ง อีกครั้งเป็นเพียงอาร์เรย์ JSON และแล้วในท้ายที่สุดมันจะเพิ่มเครื่องหมาย แต่ละสถานที่เหล่านั้น, การจัดการความล้มเหลว หรือข้อผิดพลาดที่ดีมากอาจจะเกิดขึ้น ตอนนี้เพียงแค่เพื่อให้คุณได้ลิ้มรสของวิธีการที่คุณ อาจจะไปเกี่ยวกับการแก้จุดบกพร่องโครงการนี้ ตระหนักดีว่าผมเคยเปิดใน ความก้าวหน้าของแท็บนี้ที่นี่ยัง URL นี้ pset8 / articles.php? ภูมิศาสตร์ = 02138 ตอนนี้อีกครั้งบทความเกี่ยวกับ PHP เราดำเนินการสำหรับคุณ ดังนั้นนี้เป็นไม่มาก สิ่งที่คุณจะใช้ เพื่อแก้ปัญหา แต่เทคนิค แจ้งให้ทราบว่าผมได้ค้นหา รหัสไปรษณีย์ของเคมบริดจ์ที่นี่ และผมเคยกลับมาแน่นอน JSON อาร์เรย์ของ JSON วัตถุที่อยู่ภายในซึ่ง มีสองลิงค์ keys-- และชื่อ ดังนั้นการทำงานนี้ ทำงานแล้วสำหรับคุณ แต่เทคนิคของตนเองนี้จะ ไปยัง URL เช่นนี้สำหรับบางสิ่งบางอย่างเช่น search.php? ภูมิศาสตร์ = cambridge หรือ 02138 หรือ สิ่งที่ผู้ใช้มีการพิมพ์ในควร พิสูจน์คุณค่าที่คุณเองลอง ที่จะคิดออกว่าทำไมหรือ search.php คือการทำงานหรือไม่ ในท้ายที่สุดแล้วคุณจะมี Todos ไม่กี่ข้างหน้าของคุณ คุณกำลังจะดำเนินการครั้งแรก ว่าสคริปต์ที่นำเข้า อ่านใน us.text ลงในฐานข้อมูลของคุณ แล้วคุณจะต้อง ในการดำเนินการ search.php เพื่อที่ว่ามันจะทำงานตรงตามที่ระบุไว้ แล้วคุณจะต้องการ มุ่งเน้นไปที่ scripts.js และในที่สุดนำไปปฏิบัติ คู่ของผู้ Todos, รวมทั้งการกำหนดค่า และแม่แบบนั้น เพิ่มเครื่องหมายลบเครื่องหมายและ แล้วสุดท้าย แต่ไม่น้อยหนึ่ง สัมผัสส่วนบุคคล เมื่อคุณมี Mashup ของคุณทำงาน ค่อนข้างชอบเราเป้าหมายที่อยู่ในมือ สำหรับคุณที่จะเพิ่มส่วนบุคคล เพื่อตอบโต้กับผู้ใช้ได้สัมผัสของคุณ ไม่ว่าจะเป็นความงามหรือการทำงาน ใช้ตอบโต้กับผู้ใช้ได้เคยให้ เล็กน้อยมาอยู่ที่ระดับถัดไป ตราบใดที่คุณผลักดันตัวเองเกิน ความคุ้นเคยของคุณด้วยสเปคของตัวเอง และรับเทคนิคหนึ่ง ใหม่ถึงแม้ว่ามันจะเป็นเพียง คีตกวีสิ่งที่ต้องการเปลี่ยนแปลง รูปแบบของแผนที่ที่คุณกำลังใช้อยู่ ขอบเขตที่เราคาดว่า จะมีความพึงพอใจ นั้นเป็นปัญหาชุดที่ 8 Mashup คอยติดตามการมากขึ้นใน สเปคและดีที่สุดของโชค การแก้ปัญหานี้ครั้งสุดท้ายของคุณ ปัญหา CS50 เคยตั้ง [เล่นเพลง]