>> [เล่นเพลง]
>> เดวิดเจลัน: สวัสดี
ลองมาเดินผ่าน ปัญหาชุดที่ 8 Mashup,
ซึ่งจะท้าทายให้คุณ วาดเมื่อองค์ประกอบของ Google Maps
ที่มีองค์ประกอบจาก Google News และบด พวกเขาเข้าด้วยกันเป็นแอปเพล็เว็บที่
ช่วยให้ผู้ใช้ในการค้นหา แผนที่สำหรับข่าวท้องถิ่น
ไปยังเมืองที่เฉพาะเจาะจง เมืองและรหัสไปรษณีย์
การทำเช่นนี้เรากำลังจะ รวมบาง HTM​​L, 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 เช่นนี้สำหรับบางสิ่งบางอย่างเช่น
sea​​rch.php? ภูมิศาสตร์ = cambridge หรือ 02138 หรือ สิ่งที่ผู้ใช้มีการพิมพ์ในควร
พิสูจน์คุณค่าที่คุณเองลอง ที่จะคิดออกว่าทำไมหรือ
sea​​rch.php คือการทำงานหรือไม่
>> ในท้ายที่สุดแล้วคุณจะมี Todos ไม่กี่ข้างหน้าของคุณ
คุณกำลังจะดำเนินการครั้งแรก ว่าสคริปต์ที่นำเข้า
อ่านใน us.text ลงในฐานข้อมูลของคุณ
แล้วคุณจะต้อง ในการดำเนินการ search.php
เพื่อที่ว่ามันจะทำงานตรงตามที่ระบุไว้
แล้วคุณจะต้องการ มุ่งเน้นไปที่ scripts.js
และในที่สุดนำไปปฏิบัติ คู่ของผู้ Todos,
รวมทั้งการกำหนดค่า และแม่แบบนั้น
เพิ่มเครื่องหมายลบเครื่องหมายและ แล้วสุดท้าย แต่ไม่น้อยหนึ่ง
สัมผัสส่วนบุคคล
>> เมื่อคุณมี Mashup ของคุณทำงาน ค่อนข้างชอบเราเป้าหมายที่อยู่ในมือ
สำหรับคุณที่จะเพิ่มส่วนบุคคล เพื่อตอบโต้กับผู้ใช้ได้สัมผัสของคุณ
ไม่ว่าจะเป็นความงามหรือการทำงาน
ใช้ตอบโต้กับผู้ใช้ได้เคยให้ เล็กน้อยมาอยู่ที่ระดับถัดไป
ตราบใดที่คุณผลักดันตัวเองเกิน ความคุ้นเคยของคุณด้วยสเปคของตัวเอง
และรับเทคนิคหนึ่ง ใหม่ถึงแม้ว่ามันจะเป็นเพียง
คีตกวีสิ่งที่ต้องการเปลี่ยนแปลง รูปแบบของแผนที่ที่คุณกำลังใช้อยู่
ขอบเขตที่เราคาดว่า จะมีความพึงพอใจ
นั้นเป็นปัญหาชุดที่ 8 Mashup
คอยติดตามการมากขึ้นใน สเปคและดีที่สุดของโชค
การแก้ปัญหานี้ครั้งสุดท้ายของคุณ ปัญหา CS50 เคยตั้ง
>> [เล่นเพลง]