1
00:00:00,000 --> 00:00:03,388
>> [เล่นเพลง]

2
00:00:03,388 --> 00:00:09,196

3
00:00:09,196 --> 00:00:10,180
>> เดวิดเจลัน: สวัสดี

4
00:00:10,180 --> 00:00:12,600
ลองมาเดินผ่าน
ปัญหาชุดที่ 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
ซึ่งจะท้าทายให้คุณ
วาดเมื่อองค์ประกอบของ Google Maps

6
00:00:15,880 --> 00:00:20,905
ที่มีองค์ประกอบจาก Google News และบด
พวกเขาเข้าด้วยกันเป็นแอปเพล็เว็บที่

7
00:00:20,905 --> 00:00:24,150
ช่วยให้ผู้ใช้ในการค้นหา
แผนที่สำหรับข่าวท้องถิ่น

8
00:00:24,150 --> 00:00:26,780
ไปยังเมืองที่เฉพาะเจาะจง
เมืองและรหัสไปรษณีย์

9
00:00:26,780 --> 00:00:31,040
การทำเช่นนี้เรากำลังจะ
รวมบาง HTM​​L, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript และเทคนิค
เป็นที่รู้จักกันโดยทั่วไปว่าเป็น AJAX ในการสั่งซื้อ

11
00:00:34,390 --> 00:00:36,850
เพื่อสร้างดื่มด่ำนี้
ประสบการณ์ของผู้ใช้

12
00:00:36,850 --> 00:00:38,920
>> Let 's แรกสำหรับ Google Maps ตัวเอง

13
00:00:38,920 --> 00:00:41,220
นี้แน่นอนอาจจะเป็น
อินเตอร์เฟซที่คุ้นเคย

14
00:00:41,220 --> 00:00:45,070
แต่ปรากฎว่า Google Maps
นอกจากนี้ยังมีแอปพลิเค API--

15
00:00:45,070 --> 00:00:48,360
การเขียนโปรแกรม interface-- ผ่านที่
คุณสามารถใช้องค์ประกอบของ Google Maps

16
00:00:48,360 --> 00:00:50,740
และรวมไว้ใน
การใช้งานของคุณเอง

17
00:00:50,740 --> 00:00:52,650
อันที่จริงตลอดนี้
กระบวนการที่คุณกำลังจะ

18
00:00:52,650 --> 00:00:55,140
เพื่อหาคู่ของ URL ที่
มีประโยชน์อย่างยิ่งว่า

19
00:00:55,140 --> 00:00:57,820
กล่าวถึงใน
ข้อกำหนดสำหรับปัญหาชุดที่ 8

20
00:00:57,820 --> 00:01:00,980
โดยเฉพาะการเริ่มต้นนี้
หรือคำแนะนำในคู่มือของนักพัฒนา

21
00:01:00,980 --> 00:01:07,640
สำหรับ Google Maps API รุ่น 3 เช่นกัน
เป็น Google Maps JavaScript API

22
00:01:07,640 --> 00:01:10,260
อ้างอิง v3 ซึ่งเป็น
บิตที่เป็นความลับมากขึ้นในการอ่าน

23
00:01:10,260 --> 00:01:14,600
แต่ที่จริงแล้วมีทั้งหมดของระดับที่ต่ำกว่า
รายละเอียดเกี่ยวกับสิ่งที่ฟังก์ชั่นหรือวิธีการ

24
00:01:14,600 --> 00:01:18,220
และวัตถุและคุณสมบัติและ
เหตุการณ์ที่เกิดขึ้นจริงมาพร้อมกับ API,

25
00:01:18,220 --> 00:01:20,720
คล้ายกันมากในจิตวิญญาณ
ไปที่ [ไม่ได้ยิน] หน้า

26
00:01:20,720 --> 00:01:23,480
>> ตอนนี้ถ้าเราจะดู
ที่ Google News คุณจะ

27
00:01:23,480 --> 00:01:25,370
บางทีอาจจะเห็นอินเตอร์เฟซที่คุ้นเคยที่นี่

28
00:01:25,370 --> 00:01:29,350
แต่มันกลับกลายเป็นคุณยังสามารถค้นหา
Google News สำหรับภูมิภาคท​​ี่เฉพาะเจาะจง

29
00:01:29,350 --> 00:01:32,000
ผ่านพารามิเตอร์ HTTP ที่เรียกว่าทางภูมิศาสตร์

30
00:01:32,000 --> 00:01:35,100
ในความเป็นจริงถ้าผมดูภาพขยาย
ขึ้นที่นี่คุณจะเห็นว่า

31
00:01:35,100 --> 00:01:41,672
ฉันที่
news.google.com/news/section?geo=02138

32
00:01:41,672 --> 00:01:43,630
และแน่นอนถ้าผมซูม
ออกคุณจะเห็นว่าฉัน

33
00:01:43,630 --> 00:01:47,090
กำลังมองหาที่หน้าเว็บที่มีทั้งกลุ่ม
มุมมองเกี่ยวกับเคมบริดจ์, แมสซาชูเซต

34
00:01:47,090 --> 00:01:50,620
>> ในขณะเดียวกันถ้าจริงผมเปลี่ยน
URL ไม่ได้ที่จะรหัสไปรษณีย์เช่นนี้

35
00:01:50,620 --> 00:01:55,580
แต่บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ Messier
เช่นเดียวกับเคมบริดจ์, แมสซาชูเซต +,

36
00:01:55,580 --> 00:02:00,740
ที่บวกเป็นวิธีที่คุณเข้ารหัส
อักขระช่องว่างใน URL และกด Enter,

37
00:02:00,740 --> 00:02:02,907
คุณจะเห็นว่าที่จริงผม
เห็นเกือบข่าวเดียวกัน

38
00:02:02,907 --> 00:02:05,489
บางทีมันอาจจะเป็นความแตกต่างกันเล็กน้อย
เพราะเคมบริดจ์จริง

39
00:02:05,489 --> 00:02:06,910
มีหลายรหัสไปรษณีย์

40
00:02:06,910 --> 00:02:09,410
ตอนนี้วิธีการที่ฉันจะรู้ว่าและ
ในความเป็นจริงว่าสามารถฉันอย่างใด

41
00:02:09,410 --> 00:02:12,940
ผูกเมืองและเมือง
เพื่อรหัสไปรษณีย์ในกรณีที่ฉัน

42
00:02:12,940 --> 00:02:15,064
ต้องการที่จะช่วยให้ผู้ใช้
ที่จะมองขึ้นอย่างใดอย่างหนึ่ง?

43
00:02:15,064 --> 00:02:17,480
ดีก็ปรากฎว่ามี
เว็บไซต์ออกมีที่เรียกว่า

44
00:02:17,480 --> 00:02:20,060
geonames.org ซึ่งเป็น
ความคิดริเริ่มที่จะมี

45
00:02:20,060 --> 00:02:23,760
ฐานข้อมูลที่มีอยู่ได้อย่างอิสระทั้งหมด
ประเภทของข้อมูลทางภูมิศาสตร์

46
00:02:23,760 --> 00:02:27,040
ไม่เพียง แต่สำหรับสหรัฐ แต่ยัง
สำหรับประเทศอื่น ๆ เช่นกัน

47
00:02:27,040 --> 00:02:30,430
ในความเป็นจริงถ้าผมไปที่ URL นี้ที่นี่ซึ่ง
ยังกล่าวถึงปัญหาที่กำหนด

48
00:02:30,430 --> 00:02:34,510
สเปคคุณจะเห็นมันสาม
รายชื่อของทั้งกลุ่มของไฟล์ซิป

49
00:02:34,510 --> 00:02:36,400
ใด ๆ ที่สามารถดาวน์โหลดได้โดยคุณ

50
00:02:36,400 --> 00:02:39,900
ในความเป็นจริงสำหรับปัญหานี้ตั้ง
คุณกำลังจะดาวน์โหลด us.zip

51
00:02:39,900 --> 00:02:43,790
ตอนนี้ที่อยู่ในแฟ้มนี้เป็นทั้ง
พวงของข้อมูลในรูปแบบข้อความ

52
00:02:43,790 --> 00:02:47,760
ไฟล์จะคล้ายกับ
CSV-- Comma Separated Values​​ file--

53
00:02:47,760 --> 00:02:51,294
แต่มันจริงใช้
แท็บไปปักปันเขตข้อมูล

54
00:02:51,294 --> 00:02:53,710
ตอนนี้ในขณะเดียวกันถ้าคุณดู
ที่นี่ที่สิ่งที่ฉันได้เน้น

55
00:02:53,710 --> 00:02:56,459
เขตข้อมูลในไฟล์นี้จะ
จะเป็นสิ่งที่ต้องการรหัสประเทศ

56
00:02:56,459 --> 00:02:58,980
รหัสไปรษณีย์ชื่อสถานที่
และจากนั้นในบางรูปแบบ

57
00:02:58,980 --> 00:03:04,230
หรืออื่น ๆ ที่รัฐและมณฑล
ชุมชนและอื่น ๆ

58
00:03:04,230 --> 00:03:06,630
ในความเป็นจริงฉันได้แล้ว
ดาวน์โหลดไฟล์นี้ล่วงหน้า

59
00:03:06,630 --> 00:03:09,750
ให้ฉันไปข้างหน้าและเปิดมันตรงนี้
us.text-- และแน่นอนคุณจะ

60
00:03:09,750 --> 00:03:16,660
ดูว่าฉันเลื่อนลงไปเข้าแถว 16792
คุณจะเห็นบันทึกไม่กี่สำหรับเคมบริดจ์

61
00:03:16,660 --> 00:03:19,120
แมสซาชูเซตและรหัสไปรษณีย์ต่างๆ

62
00:03:19,120 --> 00:03:22,150
สิ่งที่คุณยังเห็นมีเขต
ตัวเลขบางอย่างที่ฉันทำไม่ได้จริงๆ

63
00:03:22,150 --> 00:03:24,500
เข้าใจ แต่ยังทั้งหมด
ทางด้านขวา,

64
00:03:24,500 --> 00:03:27,170
จีพีเอสบาง coordinates--
ละติจูดและลองจิจูด

65
00:03:27,170 --> 00:03:30,440
นี้ดีมากเพราะหนึ่ง
คุณสมบัติของ Google Maps API

66
00:03:30,440 --> 00:03:33,670
คือความสามารถในการตรวจสอบ
คุณจะอยู่ที่ไหนในทางภูมิศาสตร์

67
00:03:33,670 --> 00:03:36,850
ในแง่ของพิกัดจีพีเอส

68
00:03:36,850 --> 00:03:40,210
>> ตอนนี้ขอเริ่มต้นที่จะคิดออกว่าจะ
เริ่มต้นการผูกสิ่งเหล่านี้ร่วมกัน

69
00:03:40,210 --> 00:03:42,900
เราได้ให้คุณทั้ง
พวงของรหัสการจัดจำหน่าย

70
00:03:42,900 --> 00:03:44,970
เช่นเดียวกับฐานข้อมูล MySQL

71
00:03:44,970 --> 00:03:49,100
ในความเป็นจริงถ้าผมดึง phpMyAdmin มี
ที่นำเข้ามาแล้วในขณะที่คุณเร็ว ๆ นี้จะ

72
00:03:49,100 --> 00:03:54,800
pset8.SQL คุณจะเห็นตาราง MySQL ที่
ลักษณะเช่นนี้, ข้อมูลรหัสประเทศ

73
00:03:54,800 --> 00:03:57,400
รหัสรหัสไปรษณีย์ชื่อสถานที่และอื่น ๆ

74
00:03:57,400 --> 00:04:00,490
ประเภทของทุกคน
คอลัมน์ที่ผมได้มาเพียงแค่

75
00:04:00,490 --> 00:04:03,870
โดยการอ่าน readme.text
ไฟล์ที่นี่ระบุว่า

76
00:04:03,870 --> 00:04:07,330
ไม่ว่าจะเป็นข้อมูลที่เป็นจำนวนเต็ม
หรือ varchar หรือชอบ

77
00:04:07,330 --> 00:04:10,510
>> ดังนั้นเราจึงได้สร้างตารางที่
ให้คุณและให้คุณคำสั่ง SQL

78
00:04:10,510 --> 00:04:12,770
ที่จะดำเนินการในการสร้างว่า
ตารางในฐานข้อมูลของคุณเอง

79
00:04:12,770 --> 00:04:15,290
แต่มีจริงไม่มีข้อมูลที่อยู่ในนั้นเลย

80
00:04:15,290 --> 00:04:19,600
แต่คุณจะต้อง
ดาวน์โหลด us.zip หรือรหัสไปรษณีย์ของประเทศใด ๆ

81
00:04:19,600 --> 00:04:21,500
ไฟล์จาก URL ที่มี

82
00:04:21,500 --> 00:04:24,940
และจากนั้นคุณจะต้องเขียน
สคริปต์บรรทัดคำสั่งใน PHP ที่

83
00:04:24,940 --> 00:04:28,420
จะเปิดขึ้นข้อความว่า
แฟ้มย้ำกว่าเส้น,

84
00:04:28,420 --> 00:04:31,180
แล้วสำหรับแต่ละ
เส้นที่ทำแทรก

85
00:04:31,180 --> 00:04:34,940
เป็นที่สถานที่โต๊ะ
ในฐานข้อมูลของ MySQL

86
00:04:34,940 --> 00:04:37,880
ดังนั้นในตอนท้ายของกระบวนการนี​​้คุณจะ
ได้เรียกใช้สคริปต์ว่าในท้ายที่สุด

87
00:04:37,880 --> 00:04:39,610
เพียงครั้งเดียวในทฤษฎี

88
00:04:39,610 --> 00:04:41,780
ในความเป็นจริงคุณอาจจะ
เรียกใช้พวงของครั้ง

89
00:04:41,780 --> 00:04:45,460
ในขณะที่พยายามที่จะแก้ไขข้อบกพร่องต่างๆ

90
00:04:45,460 --> 00:04:48,440
>> ในที่สุดคุณกำลังจะมี
ฐานข้อมูลที่ใหญ่มากที่มีมากมาย

91
00:04:48,440 --> 00:04:50,139
และหลายพันแถวทางภูมิศาสตร์

92
00:04:50,139 --> 00:04:52,930
แล้วคุณจะใส่นำเข้าที่
สคริปต์กันเมื่อมีการทำงาน

93
00:04:52,930 --> 00:04:55,140
และฐานข้อมูลของคุณเป็นสิ่งที่ดี
และถูกต้องแล้ว

94
00:04:55,140 --> 00:04:58,880
คุณกำลังจะย้ายไปจริง
การดำเนินการตอบโต้กับผู้ใช้ได้เอง

95
00:04:58,880 --> 00:05:01,670
Mashup จะไปดู
บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เช่นนี้

96
00:05:01,670 --> 00:05:05,165
ที่ mashup.cs50.net เรา
มีทางออกพนักงาน

97
00:05:05,165 --> 00:05:06,990
ที่มีลักษณะบางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เช่นนี้

98
00:05:06,990 --> 00:05:11,070
แน่นอนถ้าฉันคลิกที่หนังสือพิมพ์ฉบับนี้
icon สำหรับเคมบริดจ์, แมสซาชูเซต

99
00:05:11,070 --> 00:05:13,300
คุณจะเห็นการปั่น
icon สั้น ๆ แล้ว

100
00:05:13,300 --> 00:05:16,370
รายการสั่งซื้อ,
รายการสัญลักษณ์ของบทความ

101
00:05:16,370 --> 00:05:18,280
ที่เกี่ยวข้องกับเคมบริดจ์, แมสซาชูเซต

102
00:05:18,280 --> 00:05:20,352
ถ้าฉันคลิกที่ชาร์ลส
แมสซาชูเซต

103
00:05:20,352 --> 00:05:21,685
ฉันจะเห็นเหมือนกันสำหรับเมืองที่

104
00:05:21,685 --> 00:05:24,174
และถ้าฉันคลิกที่
ทาวน์แมสซาชูเซต

105
00:05:24,174 --> 00:05:26,090
มีอาจจะไม่ใด ๆ
ข่าวจากทาวน์

106
00:05:26,090 --> 00:05:28,630
ดังนั้นคุณจะเห็นอะไรบางอย่าง
เช่นวันข่าวช้า

107
00:05:28,630 --> 00:05:32,140
>> ตอนนี้ขณะที่ด้านซ้ายด้านบน
บางควบคุมคุ้นเคยของ Google Maps

108
00:05:32,140 --> 00:05:34,980
ที่จะให้คุณซูมออกกระทะ
ขึ้นลงซ้ายและขวา

109
00:05:34,980 --> 00:05:37,360
แต่ยังกล่องค้นหาที่เราใส่มี

110
00:05:37,360 --> 00:05:40,910
ดังนั้นถ้าฉันค้นหาตรงไปตรงมา
เพียงรหัสไปรษณีย์อื่น ๆ ที่ฉันรู้

111
00:05:40,910 --> 00:05:45,020
90210 เราจะเห็น
Beverly Hills, California

112
00:05:45,020 --> 00:05:48,550
เมื่อคลิกมันทำให้ฉัน
รัฐแคลิฟอร์เนียและทั้งกลุ่ม

113
00:05:48,550 --> 00:05:50,369
ข่าวเกี่ยวกับการที่ Beverly Hills

114
00:05:50,369 --> 00:05:51,910
ตอนนี้แจ้งให้ทราบล่วงหน้าเกินไปสิ่งที่เกิดขึ้นที่นั่น

115
00:05:51,910 --> 00:05:57,040
ถ้าผมค้นหาในเวลานี้สำหรับ 02138 หรือแม้กระทั่ง
เคมบริดจ์แมสซาชูเซตจุลภาคหรือบางส่วน

116
00:05:57,040 --> 00:06:00,300
ตัวแปรนั้นคุณจะได้รับ
ป้อนข้อมูลอัตโนมัติแบบเลื่อนลงเล็กน้อย

117
00:06:00,300 --> 00:06:03,840
ตอนนี้ใช้ปลั๊กอิน
ห้องสมุดที่เรียกว่า jQuery,

118
00:06:03,840 --> 00:06:05,732
และปลั๊กอินที่เรียกว่า typeahead

119
00:06:05,732 --> 00:06:07,440
เราก็อ่านผ่าน
เอกสาร

120
00:06:07,440 --> 00:06:13,150
ที่ดาวน์โหลด .js ยื่นแบบบูรณาการ
เป็นรหัสการกระจายเพื่อให้คุณ

121
00:06:13,150 --> 00:06:16,900
ในที่สุดสามารถเขียนโค้ดที่
เติมเมนูแบบเลื่อนลงว่าด้วยรถยนต์

122
00:06:16,900 --> 00:06:19,350
เลือกหรือข้อเสนอแนะอัตโนมัติ

123
00:06:19,350 --> 00:06:23,820
>> ตอนนี้รหัสกระจายได้ว่า
คุณได้รับไม่ได้ทำเกือบเท่า

124
00:06:23,820 --> 00:06:26,860
คุณจะได้รับ Google Map ฝังตัวและ
คุณจะได้รับการควบคุมด้านบนซ้าย

125
00:06:26,860 --> 00:06:28,240
และคุณจะได้รับกล่องค้นหา

126
00:06:28,240 --> 00:06:32,760
แต่ถ้าฉันพิมพ์สิ่งที่ต้องการ
02138, สถานที่ไม่พบเ​​ลย

127
00:06:32,760 --> 00:06:34,730
เพื่อให้เป็นไปได้
หนึ่งในเป้าหมายของเราที่นี่

128
00:06:34,730 --> 00:06:37,430
นอกจากนี้ถ้าคุณจะใช้ขั้นตอน
ย้อนกลับไปและมองไปที่แผนที่ของตัวเอง

129
00:06:37,430 --> 00:06:38,950
มีข่าว แต่ประการใด

130
00:06:38,950 --> 00:06:41,780
แม้ว่าผมจะคลิกและ
ลากเครื่องหมายไม่มีจริง

131
00:06:41,780 --> 00:06:45,560
ปรากฏข่าวเนื่องจากว่า
ความท้าทายที่เหลือสำหรับคุณเช่นกัน

132
00:06:45,560 --> 00:06:48,490
>> ลองมาดูแล้ว
ที่รหัสกระจาย

133
00:06:48,490 --> 00:06:51,460
เมื่อคุณได้ดาวน์โหลด
pset8.zip และซิปมัน

134
00:06:51,460 --> 00:06:54,430
ลงในไดเรกทอรี vhost ของคุณ
ใน CS50 ซ่อมแซมเครื่องใช้ไฟฟ้า

135
00:06:54,430 --> 00:06:56,550
คุณจะเห็นเหล่านี้
ไดเรกทอรีที่นี่ภายใน

136
00:06:56,550 --> 00:07:00,200
Bin-- ซึ่งโดยทั่วไปหมายถึง
ไบนารีสำหรับ programs-- ปฏิบัติการ

137
00:07:00,200 --> 00:07:04,870
รวมถึงในขณะที่ pset7 บาง PHP
ไฟล์ที่ไฟล์อื่น ๆ รวมถึง

138
00:07:04,870 --> 00:07:06,710
ประชาชนแล้วซึ่งเป็น
ไฟล์ที่ต้องการ

139
00:07:06,710 --> 00:07:09,369
เพื่อให้สามารถเข้าถึงสาธารณชน
ให้กับผู้ใช้เบราว์เซอร์

140
00:07:09,369 --> 00:07:11,410
ลองมาดูใน
ไดเรกทอรีถังและเราจะ

141
00:07:11,410 --> 00:07:13,890
เห็นว่ามีไฟล์
เรียกว่ามีอยู่แล้วนำเข้า

142
00:07:13,890 --> 00:07:17,591
ถ้าเราเปิดนี้กับ Gedit เราจะเห็น
ว่าโชคไม่ดีมีไม่มาก

143
00:07:17,591 --> 00:07:18,090
ที่นั่น

144
00:07:18,090 --> 00:07:20,250
ทั้งหมดที่จะมี แต่
เป็น shebang ที่ด้านบน

145
00:07:20,250 --> 00:07:23,410
ซึ่งระบุว่า
interpreter-- ในกรณีนี้ PHP--

146
00:07:23,410 --> 00:07:25,759
ควรจะใช้จริง
รันไฟล์นี้

147
00:07:25,759 --> 00:07:27,550
แต่แล้วที่จะกล่าวว่า
สิ่งที่ต้องทำคือที่ที่คุณอยู่

148
00:07:27,550 --> 00:07:31,130
จะต้องเขียนโค้ดบาง
ที่อาจจะต้องมีการตั้งค่า

149
00:07:31,130 --> 00:07:35,820
ไฟล์ที่อยู่ในไดเรคทอรวมถึง
ในขณะที่เราเคยทำมาก่อนกับไฟล์ PHP

150
00:07:35,820 --> 00:07:38,180
แล้วคุณกำลังจะไป
ต้องอย่างใดเปิด

151
00:07:38,180 --> 00:07:41,920
us.text ที่คุณน่าจะ
มีซิปแล้ว

152
00:07:41,920 --> 00:07:44,690
จากนั้นคุณจะต้อง
ย้ำกว่าบรรทัดในไฟล์นั้น

153
00:07:44,690 --> 00:07:47,800
บางทีอาจจะใช้บางส่วนของฟังก์ชั่น
ข้อเสนอแนะในสเปค

154
00:07:47,800 --> 00:07:51,390
แล้วใส่แต่ละคน
เส้นลงในฐานข้อมูล MySQL

155
00:07:51,390 --> 00:07:54,940
โดยใช้ฟังก์ชั่นการสอบถามซึ่ง
เราได้ให้คุณอีกครั้ง with--

156
00:07:54,940 --> 00:07:58,010
หรืออย่างน้อยก็แตกต่าง
ดังกล่าวใน functions.php,

157
00:07:58,010 --> 00:07:59,560
ซึ่งเราจะเห็นในเวลาเพียงสักครู่

158
00:07:59,560 --> 00:08:04,430
>> ตอนนี้ขอปิดการนำเข้าและกลับไปที่
ไดเรกทอรีและเวลานี้ของเราไปลง

159
00:08:04,430 --> 00:08:05,300
รวมถึง

160
00:08:05,300 --> 00:08:09,210
และถ้าฉัน do ls มีคุณจะเห็น
สามไฟล์มากเช่นปัญหาชุดที่ 7

161
00:08:09,210 --> 00:08:13,760
และขอใช้เวลาดูอย่างรวดเร็ว
ตัวอย่างเช่นที่ config.php

162
00:08:13,760 --> 00:08:16,730
ในนั้นเป็นเส้นที่น้อยลง
กว่าก่อนและมัน

163
00:08:16,730 --> 00:08:20,712
ดูเหมือนว่าไฟล์นี้รวมถึง
constants.php และ functions.php

164
00:08:20,712 --> 00:08:23,670
เรากำลังใช้แตกต่างกันเล็กน้อย
เทคนิคในเวลานี้จริง

165
00:08:23,670 --> 00:08:30,910
ระบุว่าไฟล์เหล่านี้เป็นญาติ
ไปยังไดเรกทอรีปัจจุบัน __ DIR__

166
00:08:30,910 --> 00:08:35,280
แสดงให้เห็นถึงสิ่งที่ไดเรกทอรีนี้
ไฟล์ config.php เป็นตัวเองใน

167
00:08:35,280 --> 00:08:37,600
ดังนั้นนี้เป็นมากขึ้น
วิธีการที่ชัดเจนในการระบุ

168
00:08:37,600 --> 00:08:40,100
สิ่งที่ไฟล์อื่น ๆ ที่คุณต้องการที่จะต้องใช้

169
00:08:40,100 --> 00:08:44,020
>> ตอนนี้ถ้าผมปิดแฟ้มนี้และ
เปิด constants.php แทน

170
00:08:44,020 --> 00:08:47,430
คุณจะเห็นไฟล์ที่ชวนให้นึกถึงมาก
เพื่อปัญหาชุดที่ 7 เป็นอย่างดีแม้ว่า

171
00:08:47,430 --> 00:08:50,050
กับฐานข้อมูลที่แตกต่างกันเรียกว่า pset8

172
00:08:50,050 --> 00:08:54,020
สุดท้ายใน functions.php,
เราจะเห็นเพียงหนึ่งฟังก์ชั่น

173
00:08:54,020 --> 00:08:55,942
เวลานี้เรียกว่าแบบสอบถาม

174
00:08:55,942 --> 00:08:59,150
นี้เกือบจะเหมือนกันยกเว้นเราจัดการ
ข้อผิดพลาดในครั้งนี้ประมาณนิด ๆ หน่อย ๆ

175
00:08:59,150 --> 00:09:02,860
ที่แตกต่างกัน แต่ก็ใช้งานคือ
เช่นเดียวกับในปัญหาตั้งเจ็ด

176
00:09:02,860 --> 00:09:08,090
>> ตอนนี้ขอกลับไป pset8 ของเรา
ไดเรกทอรีไปในที่สาธารณะและในที่นั่น

177
00:09:08,090 --> 00:09:14,420
ถ้าฉันทำ LS คุณจะเห็นเจ้านี่
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
และ update.php-- ไฟล์ทั้งหมด

179
00:09:16,940 --> 00:09:22,010
และแล้วแบบอักษร CSS, img และ
ไดเรกทอรี JS ค่อนข้างชอบ pset7

180
00:09:22,010 --> 00:09:24,660
>> ลองมาดูที่
index.html ซึ่งเป็น

181
00:09:24,660 --> 00:09:27,290
จะเป็นจริงๆ
จุดเริ่มต้นที่จะ Smashup

182
00:09:27,290 --> 00:09:31,820
ขณะนี้ใน index.html คุณจะเห็นทั้ง
พวงขององค์ประกอบการเชื่อมโยงในหัว

183
00:09:31,820 --> 00:09:36,540
โดยเฉพาะสำหรับบูตสำหรับของเราเอง
CSS ตามมาด้วยทั้งกลุ่มของสคริปต์

184
00:09:36,540 --> 00:09:41,520
แท็กสำหรับสิ่งที่ต้องการแผนที่, API
ตัวเองเครื่องหมายพิเศษที่มีป้าย

185
00:09:41,520 --> 00:09:44,950
ยูทิลิตี้ที่เรากล่าวถึงใน
สเปคสามารถใช้ได้กับคุณ

186
00:09:44,950 --> 00:09:48,420
jQuery ตัวเองบูต
ตัวเองและห้องสมุดอื่น

187
00:09:48,420 --> 00:09:50,990
เรียกว่าขีดที่
เราพูดคุยเกี่ยวกับในสเปค

188
00:09:50,990 --> 00:09:57,031
Underscore.js เช่น jquery.js
เป็นห้องสมุด JavaScript

189
00:09:57,031 --> 00:10:00,280
ที่มีทั้งกลุ่มของการทำงาน
ว่าคนจำนวนมากในโลกปรารถนา

190
00:10:00,280 --> 00:10:02,020
มีอยู่ใน JavaScript ตัวเอง

191
00:10:02,020 --> 00:10:04,560
ดังนั้นสิ่งเหล่านี้เป็น
จริงที่นิยมมาก

192
00:10:04,560 --> 00:10:07,140
เราได้กล่าวถึง typeahead
ซึ่งเป็นห้องสมุดที่

193
00:10:07,140 --> 00:10:11,180
ไม่ว่าการเติมข้อความอัตโนมัติและแบบเลื่อนลง
ในที่สุดการเชื่อมโยงไปของเราเอง JavaScript

194
00:10:11,180 --> 00:10:13,880
>> ในขณะเดียวกันและอาจ
โชคดี Mashup นี้

195
00:10:13,880 --> 00:10:17,550
คือการขับเคลื่อนด้วยค่อนข้างน้อย
HTML ลงที่นี่ที่ด้านล่าง

196
00:10:17,550 --> 00:10:22,330
แจ้งให้ทราบว่าเราได้ระบุไว้ใน div
ร่างกายของเราของของเหลวชั้นภาชนะ

197
00:10:22,330 --> 00:10:24,610
นี้บูตต่อของ
เอกสารเพียง

198
00:10:24,610 --> 00:10:29,840
หมายความว่า div นี้เป็นไปเพื่อเติมเต็ม
viewport หรือหน้าต่างเบราว์เซอร์ได้อย่างเต็มที่

199
00:10:29,840 --> 00:10:33,020
>> ในขณะที่ด้านล่างที่เรามี div
ที่เปิดและปิดได้ทันที

200
00:10:33,020 --> 00:10:34,790
กับ ID ที่ไม่ซ้ำของผ้าใบแผนที่

201
00:10:34,790 --> 00:10:37,400
ซึ่งในขณะนี้คือจาก Google
แผนที่เอกสาร

202
00:10:37,400 --> 00:10:42,490
สำหรับ API ของมันโดยผมก็ต้องทำ
มี div ที่ว่างเปล่าลงไปในการที่จะฉีด

203
00:10:42,490 --> 00:10:44,470
ในที่สุดแผนที่ของ Google ที่เกิดขึ้นจริง

204
00:10:44,470 --> 00:10:46,310
แต่เพิ่มเติมว่าในเพียงเล็กน้อย

205
00:10:46,310 --> 00:10:48,850
>> สุดท้ายมีรูปแบบ
ด้านในของที่นี่ซึ่ง

206
00:10:48,850 --> 00:10:52,930
นำไปปฏิบัติกล่องข้อความขึ้นด้านบนซ้าย
ในอินเตอร์เฟซของเราสำหรับการค้นหา

207
00:10:52,930 --> 00:10:54,730
แจ้งให้ทราบว่าเราได้ใช้
บิตของบูต

208
00:10:54,730 --> 00:10:57,670
ที่นี่ too-- สิ่งที่ต้องการ
รูปแบบอินไลน์และแบบกลุ่ม

209
00:10:57,670 --> 00:11:00,080
เราได้รับในอดีต
ID ที่ไม่ซ้ำแบบฟอร์ม

210
00:11:00,080 --> 00:11:04,510
และแล้วในที่สุดที่จริงผมมี
ประเภทขาเข้าซึ่งเป็นที่คุ้นเคยสวย

211
00:11:04,510 --> 00:11:06,440
ที่มี ID เป็นคิว

212
00:11:06,440 --> 00:11:07,230
เพียงแค่การประชุม

213
00:11:07,230 --> 00:11:09,234
Q สำหรับ query-- อาจมี
ถูกเรียกว่าอะไร

214
00:11:09,234 --> 00:11:11,400
และจากนั้นก็ยึด,
ขณะที่เป็นเมืองรัฐ

215
00:11:11,400 --> 00:11:16,200
และรหัสไปรษณีย์ที่คุณอาจจำ
เห็นใน Mashup สาธิตของเราก่อนหน้านี้

216
00:11:16,200 --> 00:11:17,980
ขอปิดแฟ้มนี้

217
00:11:17,980 --> 00:11:24,460
>> ตอนนี้มาดูไฟล์ PHP ที่
รอแล้วไฟล์ JavaScript

218
00:11:24,460 --> 00:11:27,700
ในไฟล์ PHP ของเราเราได้
ดำเนินการแล้วสำหรับคุณ

219
00:11:27,700 --> 00:11:29,960
เช่นการปรับปรุง

220
00:11:29,960 --> 00:11:35,060
เรา Update.php-- จะไม่ใช้จ่ายมาก
ระยะเวลาในตรงนี้สั้น

221
00:11:35,060 --> 00:11:38,400
คือแฟ้มที่ของเรา
รหัส JavaScript เป็นไป

222
00:11:38,400 --> 00:11:41,610
จะติดต่อผ่านทาง AJAX ว่า
เทคนิคที่ไม่ตรงกัน

223
00:11:41,610 --> 00:11:45,980
ที่สร้างขึ้นใน JavaScript วันนี้ที่
จะช่วยให้เราสามารถถาม update.php

224
00:11:45,980 --> 00:11:47,410
สำหรับข้อมูลเพิ่มเติม

225
00:11:47,410 --> 00:11:50,045
>> โดยเฉพาะที่ทุกเวลา
ผู้ใช้ลากแผนที่

226
00:11:50,045 --> 00:11:53,310
หรือทำการค้นหาที่กระโดด
ผู้ใช้ไปยังตำแหน่งอื่น

227
00:11:53,310 --> 00:11:55,250
รหัส JavaScript ของเรา
ในขณะที่เราจะเห็นทันทีคือ

228
00:11:55,250 --> 00:11:59,610
จะเรียก update.php
และขอ 10 หรือดังนั้นเครื่องหมาย

229
00:11:59,610 --> 00:12:02,630
ภายใน viewport ตาม
ในพิกัดจีพีเอส

230
00:12:02,630 --> 00:12:06,510
ด้านบนและด้านล่าง
มุมของแผนที่ที่

231
00:12:06,510 --> 00:12:10,520
จากนั้นเราจะสามารถ repopulate แผนที่ในขณะนี้ว่า
ผู้ใช้ที่มีการย้ายหน้าจอในการสั่งซื้อ

232
00:12:10,520 --> 00:12:14,210
เพื่อดู 10 อาจจะใหม่
เครื่องหมายสำหรับเมืองที่แตกต่างกัน

233
00:12:14,210 --> 00:12:18,340
ในขณะที่ไฟล์นี้เป็นที่สุด
จะดำเนินการแบบสอบถาม SQL

234
00:12:18,340 --> 00:12:21,680
กับฐานข้อมูลของเรา
ตารางที่เรียกว่าสถานที่ซึ่ง

235
00:12:21,680 --> 00:12:26,380
กำลังจะกลับมาเหล่านั้น
10 หรือน้อยกว่าสถานที่

236
00:12:26,380 --> 00:12:32,620
>> ในขณะเดียวกันใน articles.php เป็นอีกหนึ่ง
ไฟล์ที่เราได้เขียนในสิ่งทั้งปวง

237
00:12:32,620 --> 00:12:35,820
มันเป็นมากในทำนองเดียวกันกับ
ปัญหาชุดที่ 7 ของฟังก์ชั่นการค้นหา,

238
00:12:35,820 --> 00:12:39,450
ซึ่งติดต่อกับกองทุนการเงินระหว่างประเทศสำหรับคุณ

239
00:12:39,450 --> 00:12:43,710
รายชื่อแฟ้มนี้ Google News
สำหรับคุณในที่สุดโลภ

240
00:12:43,710 --> 00:12:46,050
เครื่องอ่าน
version-- ในบางสิ่งบางอย่าง

241
00:12:46,050 --> 00:12:49,720
เรียกว่า RSS format-- ของข่าว
เคมบริดจ์หรือ Beverly Hills

242
00:12:49,720 --> 00:12:52,880
หรืออะไรก็ตามที่เมืองที่คุณเคยค้นหา
สำหรับขึ้นอยู่กับ geoparameter ว่า

243
00:12:52,880 --> 00:12:57,250
เราแยกว่า RSS ซึ่งเป็นเพียง
ประเภทของภาษามาร์กอัปที่เรียกว่า XML,

244
00:12:57,250 --> 00:13:00,740
และจากนั้นเราจริง
กลับไปที่เบราว์เซอร์ของคุณ

245
00:13:00,740 --> 00:13:03,570
และรหัส JavaScript ของคุณ
โดยเฉพาะในรูปแบบที่เรียกว่า

246
00:13:03,570 --> 00:13:06,097
JSON, JavaScript Object สัญลักษณ์

247
00:13:06,097 --> 00:13:08,180
ตอนนี้คุณจะเห็นใน
specification-- เราชี้ให้คุณ

248
00:13:08,180 --> 00:13:10,720
ที่วิธีการที่คุณสามารถมองเห็น
บางส่วนของ JSON back-- มา

249
00:13:10,720 --> 00:13:15,210
ว่าการทำงานนี้ในท้ายที่สุด
ช่วยให้คุณสามารถเติมเมนูป๊อปอัพเหล่านั้นเพื่อให้

250
00:13:15,210 --> 00:13:16,960
ที่ว่าเมื่อคุณคลิก
เครื่องหมายบนแผนที่

251
00:13:16,960 --> 00:13:19,430
คุณเห็นจริงทั้งกลุ่ม
กระสุนแต่ละที่

252
00:13:19,430 --> 00:13:21,020
เชื่อมโยงไปยังบทความ

253
00:13:21,020 --> 00:13:25,000
>> ตอนนี้เรามาดูที่สุดท้าย
ไฟล์ PHP ซึ่งโชคดีที่ไม่ได้

254
00:13:25,000 --> 00:13:27,970
มีมากที่เกิด on--
เพียงแค่สิ่งที่ต้องทำใหญ่สวย

255
00:13:27,970 --> 00:13:32,170
ตอนนี้ไฟล์นี้ประกาศ
อาร์เรย์เรียกว่าสถานที่

256
00:13:32,170 --> 00:13:35,980
และจากนั้นพิมพ์ในท้ายที่สุด
อาร์เรย์ว่าใน JSON format--

257
00:13:35,980 --> 00:13:38,720
สวยพิมพ์เพียงเพื่อให้
สิ่งที่ง่ายต่อการแก้ปัญหา

258
00:13:38,720 --> 00:13:41,480
แต่น่าเสียดายที่ใน
ตรงกลางมีสิ่งที่ต้องทำเช่นนี้

259
00:13:41,480 --> 00:13:46,890
ซึ่งเรียกร้องให้คุณสามารถค้นหา
ฐานข้อมูลสำหรับสถานที่การจับคู่ทางภูมิศาสตร์ HTTP

260
00:13:46,890 --> 00:13:47,490
พารามิเตอร์

261
00:13:47,490 --> 00:13:49,865
>> และแน่นอนนี้เป็นไป
เป็นหนึ่งใน challenges-- ของคุณ

262
00:13:49,865 --> 00:13:54,240
ที่จะใช้ฟังก์ชั่นนี้ได้ที่นี่
เพื่อที่ว่าเมื่อคุณติดต่อกับไฟล์นี้

263
00:13:54,240 --> 00:14:00,610
URL เช่นการค้นหา PHP? ภูมิศาสตร์ = บางสิ่งบางอย่าง
รหัสของคุณในที่สุดจะกลับ JSON

264
00:14:00,610 --> 00:14:05,020
อาร์เรย์ของทั้งหมดของสถ​​านที่ในของคุณ
ตารางฐานข้อมูลที่ตรงกับการป้อนข้อมูลที่

265
00:14:05,020 --> 00:14:08,960
ดังนั้นหากผู้ใช้ในเคมบริดจ์
ไฟล์ของคุณที่นี่ search.php

266
00:14:08,960 --> 00:14:12,680
ในท้ายที่สุดควรจะกลับอาร์เรย์ JSON
ทั้งหมดของการแข่งขันสำหรับเคมบริดจ์

267
00:14:12,680 --> 00:14:16,990
ซึ่งอาจจะอยู่ในแมสซาชูเซต
แต่อาจจะที่ใด

268
00:14:16,990 --> 00:14:21,040
>> สุดท้ายลองมาดูที่สอง
ไฟล์ที่คง ultimately--

269
00:14:21,040 --> 00:14:23,680
ไฟล์ CSS และ JavaScript แฟ้มของคุณ

270
00:14:23,680 --> 00:14:26,779
ถ้าฉันไปลงในไดเรกทอรี CSS ของเรา
มีทั้งกลุ่มของไฟล์ที่มี

271
00:14:26,779 --> 00:14:28,070
แต่ส่วนใหญ่ของพวกเขาเป็นห้องสมุด

272
00:14:28,070 --> 00:14:31,530
ฉันจะไปดู,
โดยเฉพาะที่ styles.css,

273
00:14:31,530 --> 00:14:35,440
ซึ่งเป็น CSS ทั่วโลกของเราเองว่าเป็น
ไปเพื่อ Stylize ทั้งหมดนี้ตอบโต้กับผู้ใช้ได้

274
00:14:35,440 --> 00:14:38,840
ผมจะปล่อยให้คุณอ่านผ่าน
แสดงความคิดเห็นในที่นี้ แต่สั้น,

275
00:14:38,840 --> 00:14:43,490
นี่คือ CSS ที่ทำให้มั่นใจว่าของเรา
ตอบโต้กับผู้ใช้ได้โดยค่าเริ่มต้นออกมาจากกล่อง

276
00:14:43,490 --> 00:14:46,950
ดูว่าวิธีที่เราต้องการพูดไป
แผนที่กรอกพอร์ตมุมมอง

277
00:14:46,950 --> 00:14:49,720
และที่มีการค้นหา
กล่องขึ้นที่ด้านบนซ้าย

278
00:14:49,720 --> 00:14:52,870
เราได้นอกจากนี้ยังมีเสรีภาพในการ
stylizing ที่ typeahead แบบเลื่อนลง

279
00:14:52,870 --> 00:14:55,170
เมนูนิด ๆ หน่อย ๆ ได้เป็นอย่างดี

280
00:14:55,170 --> 00:14:58,030
>> ไฟล์ที่สำคัญที่สุด
อาจจะเป็นเพราะปัญหานี้ตั้ง

281
00:14:58,030 --> 00:15:01,070
เป็นหนึ่งในล่าสุดนี้ scripts.js

282
00:15:01,070 --> 00:15:03,800
ภายในของไดเรกทอรี JS ของคุณ
เป็นไฟล์มากยิ่งขึ้น

283
00:15:03,800 --> 00:15:08,090
ทั้งหมดของพวกเขาเป็นไฟล์ห้องสมุด
ยกเว้นหนึ่งนี้ scripts.js

284
00:15:08,090 --> 00:15:11,460
ถ้าเราเปิดนี้ขึ้นขอใช้เวลาของเรา
ทัวร์สุดท้ายผ่านฟังก์ชั่นที่

285
00:15:11,460 --> 00:15:13,820
ถูกสร้างขึ้นในไฟล์นี้
สำหรับคุณและให้ความสนใจโทร

286
00:15:13,820 --> 00:15:16,200
เพื่อ Todos ที่อยู่ข้างหน้า

287
00:15:16,200 --> 00:15:19,110
>> ที่ด้านบนของไฟล์นี้,
สามตัวแปรทั่วโลก

288
00:15:19,110 --> 00:15:22,910
หนึ่งสำหรับแผนที่ซึ่งเป็นไปได้
จะมีการอ้างอิงไปยังแผนที่ของ Google

289
00:15:22,910 --> 00:15:25,510
คุณสามารถคิดว่ามัน
การเรียงลำดับของเป็นตัวชี้

290
00:15:25,510 --> 00:15:27,710
ขณะเดียวกันเรามี
อีกตัวแปรทั่วโลก

291
00:15:27,710 --> 00:15:31,500
ข้อมูลที่เรียกว่าซึ่งดูเหมือนจะเป็น
การจัดเก็บค่าตอบแทนของการโทร

292
00:15:31,500 --> 00:15:34,170
เพื่อ google.maps.InfoWindow ใหม่

293
00:15:34,170 --> 00:15:37,835
JavaScript สนับสนุนวัตถุที่
มีความคล้ายกันในจิตวิญญาณที่จะ Struts

294
00:15:37,835 --> 00:15:40,250
และสิ่งที่สายนี้
วัตถุประสงค์ของเราคือการทำ

295
00:15:40,250 --> 00:15:42,820
คือการสร้างข้อมูลใหม่
หน้าต่างในหน่วยความจำแล้ว

296
00:15:42,820 --> 00:15:46,330
การรักษารอบการอ้างอิง
การขออนุญาตในตัวแปรที่เรียกว่าข้อมูล

297
00:15:46,330 --> 00:15:48,330
และในระหว่างนั้น
ขณะที่เป็นสิ่งที่ปรากฏ

298
00:15:48,330 --> 00:15:51,060
จะเป็น JavaScript ว่างเปล่า
อาร์เรย์เรียกว่าเครื่องหมาย

299
00:15:51,060 --> 00:15:55,392
ทั้งหมดของไอคอนหนังสือพิมพ์เหล่านั้นหรือคุณ
อาจเลือกไอคอนอื่นทั้งหมด

300
00:15:55,392 --> 00:15:57,350
จะถูกเก็บไว้
ในท้ายที่สุดในอาร์เรย์นี้

301
00:15:57,350 --> 00:16:01,570
เพื่อให้เราได้อย่างง่ายดายมากสามารถเพิ่ม
แผนที่และลบออกจากแผนที่

302
00:16:01,570 --> 00:16:03,990
>> ตอนนี้ขอเลื่อนลง
นิด ๆ หน่อย ๆ และหวือ

303
00:16:03,990 --> 00:16:07,690
รหัสผ่านที่เป็นไปได้
ดำเนินการโดยเร็วที่สุดเท่า DOM หรือเอกสาร

304
00:16:07,690 --> 00:16:10,480
รูปแบบวัตถุหรือ
หน้าตัวเองมีความพร้อม

305
00:16:10,480 --> 00:16:12,942
จำได้ว่ารูปแบบนี้
ที่นี่เพียงแค่ระบุ

306
00:16:12,942 --> 00:16:14,900
ว่ารหัสดังต่อไปนี้
ควรจะดำเนินการเท่านั้น

307
00:16:14,900 --> 00:16:17,840
เมื่อเบราว์เซอร์ได้เสร็จสิ้น
โหลดทุกอย่างอื่น

308
00:16:17,840 --> 00:16:19,750
>> ครั้งแรกที่เราประกาศ
ทั้งกลุ่มของรูปแบบ

309
00:16:19,750 --> 00:16:22,410
ซึ่งจบลง stylizing
แผนที่ตามสเปค

310
00:16:22,410 --> 00:16:24,790
จากนั้นเราจะประกาศ
ทั้งกลุ่มของตัวเลือก

311
00:16:24,790 --> 00:16:28,630
ซึ่งต่อไปจะปรับแต่งของ Google
แผนที่ที่เรากำลังจะฝัง

312
00:16:28,630 --> 00:16:32,090
จากนั้นเราจะใช้บิตของรหัส jQuery,
ซึ่งจะอธิบายในรายละเอียดอีกเล็กน้อย

313
00:16:32,090 --> 00:16:35,000
ในสเปคที่จะคว้า
องค์ประกอบที่แผนที่ผ้าใบ

314
00:16:35,000 --> 00:16:36,980
ที่เราเพื่อระบุเอกลักษณ์

315
00:16:36,980 --> 00:16:40,640
และแล้วบรรทัดนี้ที่นี่
สิ่งที่ดูเหมือนจะให้เราอย่างน่าอัศจรรย์

316
00:16:40,640 --> 00:16:43,560
Google แผนที่ภายในของ
แอพลิเคชันของเราเอง

317
00:16:43,560 --> 00:16:47,020
การจัดเก็บการอ้างอิงดังกล่าวข้างต้น
ในตัวแปรที่เรียกว่าแผนที่ที่

318
00:16:47,020 --> 00:16:50,550
>> สุดท้ายลงที่นี่เราลงทะเบียน
สิ่งที่เรียกว่าฟัง

319
00:16:50,550 --> 00:16:54,690
คิดว่าวิธี back-- วิธี
back-- สัปดาห์ศูนย์ใน CS50

320
00:16:54,690 --> 00:16:57,430
เมื่อเรามองไปที่รอยขีดข่วนและ
การสนับสนุนผ่านทางเดิน

321
00:16:57,430 --> 00:16:59,935
ผ่านสิ่งที่เรียกว่า
กิจกรรมและการออกอากาศ

322
00:16:59,935 --> 00:17:01,810
คุณอาจไม่ได้ใช้
ด้วยตัวคุณเอง แต่ก็

323
00:17:01,810 --> 00:17:03,900
กลไกการโดย
เบราว์เซอร์ในกรณีนี้

324
00:17:03,900 --> 00:17:07,940
จะได้รับความสนใจของเราเมื่อมัน
พร้อมที่จะจริงรันโค้ดบาง

325
00:17:07,940 --> 00:17:12,170
ในกรณีนี้ก็จะฟัง
แผนที่สำหรับเหตุการณ์ที่เรียกว่าไม่ได้ใช้งาน

326
00:17:12,170 --> 00:17:14,930
ซึ่งหมายความว่าเบราว์เซอร์ได้
เสร็จสิ้นการโหลดแผนที่ Google

327
00:17:14,930 --> 00:17:18,380
ณ จุดนี้ฟังก์ชั่นที่เรียกว่า
กำหนดค่าที่สุดควร

328
00:17:18,380 --> 00:17:19,339
จะดำเนินการ

329
00:17:19,339 --> 00:17:22,510
ฟังก์ชั่นที่กำหนดค่า
เราจะเห็นเป็นลายลักษณ์อักษรจากเรา

330
00:17:22,510 --> 00:17:24,550
>> ตอนนี้ลงมาที่นี่เป็นฟังก์ชั่น
ว่าโชคไม่ดี

331
00:17:24,550 --> 00:17:25,871
เป็นเพียงสิ่งที่ต้องทำเพิ่มเครื่องหมาย

332
00:17:25,871 --> 00:17:28,620
ต่อข้อมูลจำเพาะ คุณกำลังจะต้อง
การเขียนโค้ดที่จริง

333
00:17:28,620 --> 00:17:32,840
เพิ่ม marker-- ไม่ว่าจะมีลักษณะ
เช่นหนังสือพิมพ์หรือตะปูหัวแม่มือ

334
00:17:32,840 --> 00:17:35,360
หรือบางสิ่งบางอย่างที่จะ else-- Google แผนที่

335
00:17:35,360 --> 00:17:37,720
ที่นี่ตอนนี้เป็นฟังก์ชันที่
ที่เรียกว่าการกำหนดค่า

336
00:17:37,720 --> 00:17:40,390
ผมจะปล่อยให้คุณอ่าน
ผ่านทางนี้ในรายละเอียดมากขึ้น

337
00:17:40,390 --> 00:17:42,600
แต่รู้ว่าเราเพิ่ม
ฟังพวงมากขึ้น

338
00:17:42,600 --> 00:17:46,620
เพื่อให้เราสามารถรันโค้ดเมื่อ
ผู้ใช้คลิกที่และลากแผนที่

339
00:17:46,620 --> 00:17:50,730
นอกจากนี้เรายังมีรหัสในที่นี่ว่า
เริ่มต้นที่ปลั๊กอิน typeahead

340
00:17:50,730 --> 00:17:53,120
เพื่อให้เลื่อนลง
เมนูใช้งานได้จริง

341
00:17:53,120 --> 00:17:55,690
>> แต่ขอมุ่งเน้นเพียง
คู่ของสถ​​านที่นี้

342
00:17:55,690 --> 00:17:57,590
โดยเฉพาะนี้จะทำที่นี่

343
00:17:57,590 --> 00:18:00,410
ฉันจะเลื่อนไปออนไลน์
เอกสารและข้อกำหนด

344
00:18:00,410 --> 00:18:02,530
สำหรับวิธีการกรอกข้อมูลในสิ่งที่ต้องทำเช่นนี้

345
00:18:02,530 --> 00:18:05,890
แต่ในสั้น, ห้องสมุดนี้
typeahead ช่วยให้คุณสามารถที่จะผ่าน

346
00:18:05,890 --> 00:18:09,790
ในสิ่งที่เป็นที่รู้จักกันโดยทั่วไปว่าเป็นแม่แบบ
ซึ่งมีตัวยึดตัวแปรบาง

347
00:18:09,790 --> 00:18:13,690
คล้ายกันมากในจิตวิญญาณไปยัง% ของ printf. s *

348
00:18:13,690 --> 00:18:16,030
แต่ในกรณีนี้
แม่แบบต่อข้อมูลจำเพาะ

349
00:18:16,030 --> 00:18:18,760
ช่วยให้คุณสามารถระบุ
สิ่งที่ตัวแปรที่คุณต้องการ

350
00:18:18,760 --> 00:18:24,880
การฉีดจากข้อมูลที่ได้มา
กลับมาจากบางสิ่งบางอย่างเช่น PHP

351
00:18:24,880 --> 00:18:29,810
ไฟล์ที่คุณเขียน
ที่มีการส่งออกเปล่ง JSON

352
00:18:29,810 --> 00:18:35,170
>> ตอนนี้ลงมาที่นี่รู้ว่าเราเป็น
ฟังเพื่อเลือก typeahead

353
00:18:35,170 --> 00:18:38,050
เมื่อผู้ใช้จริงดำเนินการ
ค้นหาและเลือกค่า

354
00:18:38,050 --> 00:18:40,270
นี่คือวิธีการที่เรากำลังจริง
จะไปฟังว่า

355
00:18:40,270 --> 00:18:42,250
และรันโค้ดบางส่วนเป็นผล

356
00:18:42,250 --> 00:18:45,300
จากนั้นเราก็ยังคงกำหนดค่า
ตอบโต้กับผู้ใช้ได้เพียงเล็กน้อย

357
00:18:45,300 --> 00:18:48,000
และท้ายที่สุดที่เราเรียกว่า
การปรับปรุงฟังก์ชั่นนี้

358
00:18:48,000 --> 00:18:49,640
มันปรับปรุงเครื่องหมายบนหน้าจอ

359
00:18:49,640 --> 00:18:51,529
เพิ่มเติมเกี่ยวกับที่ในเพียงสักครู่

360
00:18:51,529 --> 00:18:53,570
ในขณะที่มีเพียงไม่กี่
ฟังก์ชั่นขนาดเล็กในที่นี่

361
00:18:53,570 --> 00:18:56,820
หนึ่งซึ่งเป็นที่ hideInfo
เพียงแค่ปิด InfoWindow

362
00:18:56,820 --> 00:19:00,020
ฟังก์ชั่นอื่น ๆ อีกที่นี่ซึ่งในท้ายที่สุด
จะไม่นานเกินไปลบเครื่องหมาย

363
00:19:00,020 --> 00:19:03,580
ที่จะยกเลิกสิ่งที่
เพิ่มฟังก์ชั่นเครื่องหมายของคุณไม่

364
00:19:03,580 --> 00:19:04,960
และจากนั้นก็ลงที่นี่คือการค้นหา

365
00:19:04,960 --> 00:19:08,610
และหนึ่งในนี้เป็นที่น่าสนใจเพราะเรา
ได้เขียนรหัส JavaScript ที่

366
00:19:08,610 --> 00:19:13,490
จะไปพูดคุยกับ search.php บน
เซิร์ฟเวอร์และได้รับการตอบสนองกลับมาบางส่วน

367
00:19:13,490 --> 00:19:16,110
>> คุณแน่นอนจะยังคง
จำเป็นต้องใช้ search.php,

368
00:19:16,110 --> 00:19:18,310
แต่เราได้ดำเนินการ
รหัส JavaScript ที่

369
00:19:18,310 --> 00:19:22,480
จะจัดการกับการปฏิบัติจริง
ค้นหาจากกล่องข้อความที่

370
00:19:22,480 --> 00:19:25,340
โดยเฉพาะอย่างยิ่งแจ้งให้ทราบล่วงหน้า
ที่ฟังก์ชั่นนี้ที่นี่

371
00:19:25,340 --> 00:19:29,160
การค้นหาไม่เรียก search.php
โดยวิธีการที่เรียกว่า

372
00:19:29,160 --> 00:19:31,072
ได้รับ JSON ซึ่งเราเห็นในการบรรยาย

373
00:19:31,072 --> 00:19:32,780
และไวยากรณ์ที่นี่
เป็นเพียงเล็กน้อยที่แตกต่างกัน

374
00:19:32,780 --> 00:19:37,110
จากการบรรยายในการที่เรากำลังใช้
jQuery สัญญาอินเตอร์เฟซที่เรียกว่า

375
00:19:37,110 --> 00:19:38,479
เพิ่มเติมเกี่ยวกับที่อยู่ในสเปค

376
00:19:38,479 --> 00:19:40,520
นี้ก็หมายความว่าสำหรับเรา
วัตถุประสงค์ในขณะนี้ว่ามี

377
00:19:40,520 --> 00:19:43,870
มีสองฟังก์ชั่นพิเศษที่เรา
ต้องเรียกด้วยเครื่องหมายจุด

378
00:19:43,870 --> 00:19:46,230
ที่นี่ทันทีหลังจากที่ได้รับการเรียก JSON

379
00:19:46,230 --> 00:19:47,510
หนึ่งเรียกว่าทำ

380
00:19:47,510 --> 00:19:49,870
หนึ่งเรียกว่าล้มเหลว

381
00:19:49,870 --> 00:19:51,790
คุณสามารถคิดเหล่านี้
เป็นตัวจัดการที่ประสบความสำเร็จ

382
00:19:51,790 --> 00:19:54,960
และจัดการความล้มเหลวเพียง
ในกรณีที่มีอะไรผิดพลาด

383
00:19:54,960 --> 00:19:57,760
>> ตอนนี้ให้ดูที่ผ่านมา
คู่ของฟังก์ชั่นในแฟ้มนี้

384
00:19:57,760 --> 00:20:00,180
ลงที่นี่เป็นฟังก์ชั่น
เรียกว่า showInfo ซึ่ง

385
00:20:00,180 --> 00:20:03,090
แสดงข้อมูลในหนึ่งในบรรดา
หน้าต่างข้อมูลเล็ก ๆ น้อย ๆ ที่

386
00:20:03,090 --> 00:20:05,380
ปรากฏขึ้นเมื่อผู้ใช้คลิกที่เครื่องหมาย

387
00:20:05,380 --> 00:20:08,470
ลงที่นี่ต่อไปคือ
ที่ฟังก์ชั่นการปรับปรุง

388
00:20:08,470 --> 00:20:10,510
ที่เราได้ดำเนินการสำหรับคุณ

389
00:20:10,510 --> 00:20:15,250
จะเป็นตัวกำหนดขอบเขตของแผนที่

390
00:20:15,250 --> 00:20:19,360
อะไรคือพิกัดจีพีเอสในตัวของมัน
ภาคตะวันออกเฉียงเหนือและมุมตะวันตกเฉียงใต้ที่นี่

391
00:20:19,360 --> 00:20:22,780
เราได้เตรียมบางพารามิเตอร์ HDP
ที่นี่จากนั้นผ่านไปพวกเขาในที่สุด

392
00:20:22,780 --> 00:20:26,160
เพื่อ update.php ซึ่งเราได้
ดำเนินการนอกจากนี้ยังมีสำหรับคุณ

393
00:20:26,160 --> 00:20:31,390
ว่าในท้ายที่สุดจะกลับมาบาง JSON
จากไฟล์ที่เรียกว่า update.php

394
00:20:31,390 --> 00:20:34,050
แล้วเอาใด ๆ
เครื่องหมายบนหน้าจอ

395
00:20:34,050 --> 00:20:36,650
แล้ว iterates กว่า
ข้อมูลที่ได้กลับมา

396
00:20:36,650 --> 00:20:40,350
จาก update.php ซึ่ง
อีกครั้งเป็นเพียงอาร์เรย์ JSON

397
00:20:40,350 --> 00:20:45,130
และแล้วในท้ายที่สุดมันจะเพิ่มเครื่องหมาย
แต่ละสถานที่เหล่านั้น, การจัดการความล้มเหลว

398
00:20:45,130 --> 00:20:47,750
หรือข้อผิดพลาดที่ดีมากอาจจะเกิดขึ้น

399
00:20:47,750 --> 00:20:51,550
>> ตอนนี้เพียงแค่เพื่อให้คุณได้ลิ้มรสของวิธีการที่คุณ
อาจจะไปเกี่ยวกับการแก้จุดบกพร่องโครงการนี​​้

400
00:20:51,550 --> 00:20:55,420
ตระหนักดีว่าผมเคยเปิดใน
ความก้าวหน้าของแท็บนี้ที่นี่ยัง URL นี้

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php? ภูมิศาสตร์ = 02138

402
00:21:01,320 --> 00:21:04,050
ตอนนี้อีกครั้งบทความเกี่ยวกับ
PHP เราดำเนินการสำหรับคุณ

403
00:21:04,050 --> 00:21:06,320
ดังนั้นนี้เป็นไม่มาก
สิ่งที่คุณจะใช้

404
00:21:06,320 --> 00:21:08,190
เพื่อแก้ปัญหา แต่เทคนิค

405
00:21:08,190 --> 00:21:10,590
แจ้งให้ทราบว่าผมได้ค้นหา
รหัสไปรษณีย์ของเคมบริดจ์ที่นี่

406
00:21:10,590 --> 00:21:15,260
และผมเคยกลับมาแน่นอน JSON
อาร์เรย์ของ JSON วัตถุที่อยู่ภายในซึ่ง

407
00:21:15,260 --> 00:21:17,640
มีสองลิงค์ keys-- และชื่อ

408
00:21:17,640 --> 00:21:19,860
>> ดังนั้นการทำงานนี้
ทำงานแล้วสำหรับคุณ

409
00:21:19,860 --> 00:21:24,330
แต่เทคนิคของตนเองนี้จะ
ไปยัง URL เช่นนี้สำหรับบางสิ่งบางอย่างเช่น

410
00:21:24,330 --> 00:21:31,710
sea​​rch.php? ภูมิศาสตร์ = cambridge หรือ 02138 หรือ
สิ่งที่ผู้ใช้มีการพิมพ์ในควร

411
00:21:31,710 --> 00:21:35,770
พิสูจน์คุณค่าที่คุณเองลอง
ที่จะคิดออกว่าทำไมหรือ

412
00:21:35,770 --> 00:21:38,510
sea​​rch.php คือการทำงานหรือไม่

413
00:21:38,510 --> 00:21:41,720
>> ในท้ายที่สุดแล้วคุณจะมี
Todos ไม่กี่ข้างหน้าของคุณ

414
00:21:41,720 --> 00:21:44,250
คุณกำลังจะดำเนินการครั้งแรก
ว่าสคริปต์ที่นำเข้า

415
00:21:44,250 --> 00:21:46,520
อ่านใน us.text ลงในฐานข้อมูลของคุณ

416
00:21:46,520 --> 00:21:48,760
แล้วคุณจะต้อง
ในการดำเนินการ search.php

417
00:21:48,760 --> 00:21:51,320
เพื่อที่ว่ามันจะทำงานตรงตามที่ระบุไว้

418
00:21:51,320 --> 00:21:54,170
แล้วคุณจะต้องการ
มุ่งเน้นไปที่ scripts.js

419
00:21:54,170 --> 00:21:57,520
และในที่สุดนำไปปฏิบัติ
คู่ของผู้ Todos,

420
00:21:57,520 --> 00:21:59,950
รวมทั้งการกำหนดค่า
และแม่แบบนั้น

421
00:21:59,950 --> 00:22:03,220
เพิ่มเครื่องหมายลบเครื่องหมายและ
แล้วสุดท้าย แต่ไม่น้อยหนึ่ง

422
00:22:03,220 --> 00:22:04,330
สัมผัสส่วนบุคคล

423
00:22:04,330 --> 00:22:07,477
>> เมื่อคุณมี Mashup ของคุณทำงาน
ค่อนข้างชอบเราเป้าหมายที่อยู่ในมือ

424
00:22:07,477 --> 00:22:09,560
สำหรับคุณที่จะเพิ่มส่วนบุคคล
เพื่อตอบโต้กับผู้ใช้ได้สัมผัสของคุณ

425
00:22:09,560 --> 00:22:11,290
ไม่ว่าจะเป็นความงามหรือการทำงาน

426
00:22:11,290 --> 00:22:13,950
ใช้ตอบโต้กับผู้ใช้ได้เคยให้
เล็กน้อยมาอยู่ที่ระดับถัดไป

427
00:22:13,950 --> 00:22:18,330
ตราบใดที่คุณผลักดันตัวเองเกิน
ความคุ้นเคยของคุณด้วยสเปคของตัวเอง

428
00:22:18,330 --> 00:22:20,840
และรับเทคนิคหนึ่ง
ใหม่ถึงแม้ว่ามันจะเป็นเพียง

429
00:22:20,840 --> 00:22:25,610
คีตกวีสิ่งที่ต้องการเปลี่ยนแปลง
รูปแบบของแผนที่ที่คุณกำลังใช้อยู่

430
00:22:25,610 --> 00:22:28,070
ขอบเขตที่เราคาดว่า
จะมีความพึงพอใจ

431
00:22:28,070 --> 00:22:30,260
นั้นเป็นปัญหาชุดที่ 8 Mashup

432
00:22:30,260 --> 00:22:33,070
คอยติดตามการมากขึ้นใน
สเปคและดีที่สุดของโชค

433
00:22:33,070 --> 00:22:36,400
การแก้ปัญหานี้ครั้งสุดท้ายของคุณ
ปัญหา CS50 เคยตั้ง

434
00:22:36,400 --> 00:22:39,750
>> [เล่นเพลง]

435
00:22:39,750 --> 00:22:43,542