[સંગીત વગાડવાનો] 

ડેવિડ જે MALAN: હેલો. માતાનો મારફતે વોક લેવા દો સમસ્યા સેટ 8 મેશઅપ, જે તમે પડકાર રહ્યું છે Google Maps માટે તત્વો પર ડ્રો ગૂગલ ન્યૂઝ અને મેશ ઘટકો સાથે એકસાથે વેબ એપ્લેટ માં તેમને કે વપરાશકર્તા શોધ કરવા માટે પરવાનગી આપે છે સ્થાનિક સમાચાર માટે એક નકશો ચોક્કસ નગરો માટે, શહેરો, અને પિન કોડ. આ કરવા માટે, અમે રહ્યા છીએ કેટલાક એચટીએમએલ સંકલિત, સીએસએસ, PHP, એસક્યુએલ, જાવાસ્ક્રિપ્ટ, અને એક ટેકનિક સામાન્ય ક્રમમાં એજેક્સ તરીકે ઓળખાય આ immersive બનાવવા માટે વપરાશકર્તા અનુભવ. 

પ્રથમ ગૂગલ મેપ્સ પોતાના માટે કરીએ. આ છે, અલબત્ત, કદાચ છે એક પરિચિત ઈન્ટરફેસ. પરંતુ તે તારણ છે કે ગૂગલ મેપ્સ પણ એક API-- એપ્લિકેશન પૂરુ પાડે છે ઈન્ટરફેસ પ્રોગ્રામિંગ જે મારફતે તમે Google Maps તત્વો લઈ શકે અને તેમને સંકલિત તમારા પોતાના કાર્યક્રમો. ખરેખર, સમગ્ર આ પ્રક્રિયા, તમે રહ્યા છીએ URL ને એક દંપતિ શોધવા માટે કે ખાસ કરીને મદદરૂપ આ ઉલ્લેખ છે સમસ્યા સેટ 8 માટે સ્પષ્ટીકરણ, ખાસ કરીને આ શરૂ કરી રહ્યા છીએ માર્ગદર્શન અથવા વિકાસકર્તા માર્ગદર્શન Google Maps API આવૃત્તિ 3 સાથે સાથે માટે ગૂગલ મેપ્સ જાવાસ્ક્રિપ્ટ API તરીકે એક છે, જે v3 સંદર્ભ, વાંચવા માટે થોડી વધુ arcane પરંતુ વાસ્તવમાં નીચલા સ્તર તમામ ધરાવે શું કાર્યો અથવા પદ્ધતિઓ અંગે વિગતો અને પદાર્થો અને ગુણધર્મો અને ઘટનાઓ વાસ્તવમાં API સાથે આવે છે, ભાવના ખૂબ સમાન [અશ્રાવ્ય] પાનાંઓનો. 

હવે અમે એક નજર તો ગૂગલ ન્યૂઝ પર, તમે પડશે કદાચ અહીં એક પરિચિત ઈન્ટરફેસની જુઓ. પરંતુ તે તમે પણ શોધ કરી શકો છો આઉટ કરે ચોક્કસ ભૌગોલિક માટે Google સમાચાર ભૂ કહેવાય એ HTTP પરિમાણ મારફતે. હકીકતમાં, હું ઝૂમ તો અહીં, તમે જોશો કે હું અંતે છું news.google.com/news/section?geo=02138. અને, ખરેખર, હું ઝૂમ તો બહાર, તમે મને છું કે જોશો સંપૂર્ણ જથ્થો સાથે પાનું જોઈ કેમ્બ્રિજ, મેસાચ્યુએટ્સમાં વિશે મંતવ્યો. 

દરમિયાન, હું ખરેખર બદલી હોય તો URL, આ જેમ એક ઝિપ કોડ હોવાનું નથી પરંતુ થોડી messier કંઈક કેમ્બ્રિજ, મેસાચ્યુએટ્સમાં + જેવી, આ ઉપરાંત માર્ગ છે, જ્યાં તમે એક બેવડી એક URL માં જગ્યા પાત્ર અને Enter દબાવો, તમે ખરેખર છે કે હું જોશો લગભગ એ જ સમાચાર જુઓ. કદાચ તે થોડો અલગ છે કેમ્બ્રિજ ખરેખર કારણ બહુવિધ ઝિપ કોડ ધરાવે છે. હવે હું કેવી રીતે ખબર છે કે, અને કરશે, હકીકતમાં, કેવી કોઈક હું કરી શકે શહેરો અને નગરો ગૂંચ કેસ હું માં ઝિપ કોડ માટે વપરાશકર્તાને પરવાનગી આપવા માંગો ક્યાં લુકઅપ? વેલ, તે છે તે બહાર કરે છે એક વેબસાઇટ બહાર ત્યાં કહેવાય geonames.org જે છે એક પહેલ છે માટે સૌ એક મુક્ત રીતે ઉપલબ્ધ ડેટાબેઝ ભૌગોલિક માહિતી પ્રકારના, માત્ર આ યુ માટે, પણ અન્ય દેશો માટે તેમજ. હકીકતમાં, હું, અહીં આ URL પર જાઓ તો જે પણ સમસ્યા સમૂહ ઉલ્લેખ કરવામાં આવ્યો છે સ્પષ્ટીકરણ, તો તમે તેને ત્રણ જોશો ઝિપ ફાઇલો સંપૂર્ણ જથ્થો ની યાદી જે કોઇ તમારા દ્વારા ડાઉનલોડ કરી શકાય છે. હકીકતમાં, આ સમસ્યા માટે સુયોજિત તમે us.zip ડાઉનલોડ રહ્યા છીએ. હવે આ ફાઈલ અંદર, સમગ્ર છે લખાણ ફોર્મેટમાં માહિતીનો ટોળું. ફાઈલો એક ખૂબ સમાન છે CSV-- અલ્પવિરામ મૂલ્યો છૂટા ફાઈલ પરંતુ વાસ્તવમાં તે વાપરે ટેબો ક્ષેત્રો સીમાંકન માટે. હવે, વચ્ચે, તમે જુઓ છો અહીં હું પ્રકાશિત કર્યું છે તે પર, આ ફાઈલમાં ક્ષેત્રોમાં જવું છે દેશમાં કોડ જેવી વસ્તુઓ હોય તેમ, પોસ્ટલ કોડ, સ્થળોના નામ, અને પછી, અમુક રૂપમાં અથવા અન્ય, રાજ્યો અને કાઉન્ટીઓ, સમુદાયો, અને વધુ. હકીકતમાં, મને પહેલેથી કર્યું અગાઉથી આ ફાઈલ ડાઉનલોડ. મને આગળ જવા દો અને અહીં તેને ખોલવા ખરેખર, તમે પડશે, us.text-- અને હું 16.792 વાક્ય સરકાવો તે જોવા તમે કેમ્બ્રિજ માટે થોડા રેકોર્ડ જોશો મેસેચ્યુસેટ્સ અને તેના વિવિધ ઝિપ કોડ. શું તમે પણ ત્યાં જોવા, કાઉન્ટી છે હું ખરેખર નથી કે કેટલાક નંબરો પણ બધા સમજે છે, પરંતુ જમણે પર માર્ગ, કેટલાક જીપીએસ કોઓર્ડિનેટ્સ અક્ષાંશ અને રેખાંશ. આ મહાન છે એક કારણ Google Maps API ના લક્ષણો શોધવા માટે ક્ષમતા છે તમે ભૌગોલિક જ્યાં છો જીપીએસ કોઓર્ડિનેટ્સ દ્રષ્ટિએ. 

હવે આપણે કેવી રીતે બહાર આકૃતિ શરૂ કરીએ એકસાથે આ વસ્તુઓ ભોગવીને શરૂ કરો. અમે તમને એક આખી આપી છે વિતરણ કોડ સમૂહ, સાથે સાથે MySQL ડેટાબેઝના તરીકે. હું ખેંચી હકીકતમાં, જો એક phpMyAdmin કર્યા પહેલેથી આયાતી, તમે તરત ચાલશે તરીકે, pset8.SQL, તમે એક માયએસક્યુએલ ટેબલ જોશો કે આ જેવી લાગે, એક ID ક્ષેત્રમાં, દેશ કોડ છે, પોસ્ટલ કોડ, સ્થળ નામ અને વધુ. તે બધા પ્રકારો કૉલમ હું ફક્ત તારવેલી આ readme.text વાંચીને સ્પષ્ટ છે કે અહીં નોંધાવી એક ક્ષેત્ર પૂર્ણાંક છે કે શું, અથવા varchar અથવા જેમ. 

તેથી અમે તે કોષ્ટક માટે બનાવી છે તમે અને તમે એસક્યુએલ આદેશો આપવામાં કે બનાવવા માટે ચલાવવા માટે તમારા પોતાના ડેટાબેઝમાં ટેબલ, પરંતુ હજુ સુધી ખરેખર તે કોઇ માહિતી નથી. તેના બદલે, તમારા માટે હોય રહ્યા છીએ us.zip ડાઉનલોડ અથવા કોઇ દેશની ઝિપ ત્યાં URL માંથી નોંધાવી. અને પછી તમે લખવા માટે હોય રહ્યા છીએ કે PHP, એક આદેશ વાક્ય સ્ક્રિપ્ટ કે લખાણ ખોલવા માટે જઇ , નોંધાવી તેની લીટીઓ પર ફરી વળવું, અને પછી દરેક માટે તે રેખાઓ એક insert કરી કે ટેબલ મૂકે માં તમારા MySQL ડેટાબેઝના. આ પ્રક્રિયા ઓવરને અંતે, તમે પડશે જેથી છેવટે તે સ્ક્રિપ્ટ ચલાવવામાં આવી છે માત્ર એક વાર સિદ્ધાંતમાં. વાસ્તવમાં તમે કદાચ પડશે તે વખત સમૂહ ચલાવો જ્યારે વિવિધ ભૂલોને સુધારવા માટે પ્રયાસ કરી. 

આખરે, તમે એક હોય રહ્યા છીએ હજારો ખરેખર મોટી ડેટાબેઝ ભૌગોલિક પંક્તિઓ અને હજારો. પછી તમે તે આયાત મૂકી રહ્યા છીએ સ્ક્રિપ્ટ કોરે તે કામ કરી રહ્યા છે એકવાર અને તમારા ડેટાબેઝ સરસ છે અને યોગ્ય છે, અને પછી તમે ખરેખર પર ખસેડો રહ્યા છીએ આ મૅશઅપ પોતે અમલીકરણ. આ મૅશઅપ જોવા જવાનું છે આ જેવી થોડી કંઈક. Mashup.cs50.net પર, અમે એક સ્ટાફ ઉકેલ છે કે આ જેવી થોડી કંઈક જુએ છે. ખરેખર, હું આ અખબાર પર ક્લિક કરો કેમ્બ્રિજ, મેસાચ્યુએટ્સમાં માટે ચિહ્ન, જો તમે ફરતું જોશો થોડા સમય માટે અને પછી ચિહ્ન એક આદેશ આપ્યો યાદી, એક લેખો બુલેટ સૂચિ કેમ્બ્રિજ, મેસાચ્યુએટ્સમાં સાથે સંબંધિત. હું Charlestown પર ક્લિક કરો, તો મેસેચ્યુસેટ્સ, હું કે નગર માટે જ જોશો. અને હું પર ક્લિક કરો, તો વોટરટાઉન, મેસેચ્યુસેટ્સ, કોઈ પણ હોઇ ન શકે વોટરટાઉન થી ના સમાચાર, તેથી તમે કંઈક જોવા મળશે ધીમી સમાચાર દિવસે જેમ. 

હવે, વચ્ચે, શીર્ષ પર ડાબે છે કેટલાક પરિચિત ગૂગલ મેપ્સ નિયંત્રણો , પણ તમે બહાર ઝૂમ કરો અપ ડાઉન, ડાબી, અને જમણી, પણ આપણે ત્યાં મૂકી કે એક શોધ બોક્સ. તેથી હું પ્રમાણિકપણે, શોધવા જો, મને ખબર માત્ર અન્ય પિન કોડ, 90210, અમે ખરેખર જોશો બેવર્લી હિલ્સ, કેલિફોર્નિયામાં. જ્યારે ક્લિક તે મને દોરી જાય કેલિફોર્નિયા અને સંપૂર્ણ જથ્થો બેવર્લી હિલ્સ વિશે સમાચાર. હવે ત્યાં શું થયું, પણ, નોટિસ. પણ 02138 અથવા માટે હું તો આ સમય શોધ કેમ્બ્રિજ અલ્પવિરામ મેસેચ્યુસેટ્સ અથવા અમુક ચલ તેના માટે, તમે એક વિચાર થોડી સ્વત: પૂર્ણ નીચે આવતા. હવે આ એક પ્લગઇન ઉપયોગ કરી રહ્યા છે jQuery કહેવાય પુસ્તકાલય માટે, અને તે પ્લગઇન typeahead કહેવાય છે. અમે ફક્ત દ્વારા વાંચી દસ્તા, આ જેએસ સંકલિત ફાઈલ ડાઉનલોડ વિતરણ કોડમાં જેથી તમે તે છેવટે કોડ લખી શકો છો કે ઓટો સાથે કે નીચે આવતા મેનુ ભરે પસંદગીઓ અથવા ઓટો સૂચનો. 

હવે વિતરણ કોડ છે, જોકે, કે તમે લગભગ તરીકે ખૂબ નથી કરતું નથી મળ્યો. તમે ગૂગલ મેપ એમ્બેડ વિચાર, અને જો તમે ઉપરની ડાબે નિયંત્રણો મળી અને તમે શોધ બોક્સમાં મેળવો. પણ હું કંઈક લખો તો 02138, કોઈ સ્થાનો હજી જોવા મળે છે. જેથી જ હશે અહીં અમારા ગોલ એક છે. આ ઉપરાંત, તમે એક પગલું લેવા માટે જો અને પાછળ નકશા પોતે જોવા, કોઈ પ્રકારની સમાચાર છે. હું ક્લિક તો પણ અને ખેંચો, ખરેખર કોઈ માર્કર્સ કે કારણ સમાચાર માટે દેખાય પડકાર સાથે સાથે તમારા માટે છોડી મૂકવામાં આવે છે. 

માતાનો પછી એક નજર વિતરણ કોડ અંતે. તમે ડાઉનલોડ કરો તે પછી pset8.zip અને તે unzipped તમારા vhost ડિરેક્ટરીમાં CS50 ઉપકરણ માં, તમે આ જોશો અહીં અંદર ડિરેક્ટરીઓ. સામાન્ય માટે વપરાય જે Bin-- એક્ઝેક્યુટેબલ કાર્યક્રમો માટે બાઈનરી pset7 તરીકે, સમાવેશ થાય છે, કેટલાક PHP અન્ય ફાઇલો સમાવેશ થાય છે કે ફાઈલો, છે, જે પછી જાહેર, જરૂર છે કે જે ફાઈલો સાર્વજનિક સુલભ હોય તેમ એક બ્રાઉઝર સાથે વપરાશકર્તા માટે. ચાલો આ એક નજર કરીએ બિન ડિરેક્ટરી, અને અમે પડશે ફાઈલ છે તે જોવા પહેલેથી આયાત ત્યાં કહેવાય. અમે gedit સાથે આ ખોલવા તો અમે જોશો કે, કમનસીબે, ઘણી ત્યાં નથી ત્યાં. છતાં જો ચકાસણી કે બધા, ટોચ પર એક shebang છે જે સ્પષ્ટ કરે છે કે જેમાં આ કિસ્સામાં interpreter-- PHP છે વાસ્તવમાં ઉપયોગ કરવો જોઇએ આ ફાઇલ ચલાવો. પરંતુ પછી તે કહે છે તમે છો જ્યાં TODO છે અમુક કોડ લખી જરૂર જઈ કે કદાચ રૂપરેખા જરૂરી ડિરેક્ટરી સમાવેશ માં છે તે ફાઈલ અમે PHP ફાઈલો સાથે પહેલાં કંઇ કર્યું છે. અને પછી તમે રહ્યા છીએ કોઈક ખોલવા માટે હોય us.text જે તમને અનુમાન પહેલેથી unzipped છે. પછી તમે કરવા હોય રહ્યા છીએ તે ફાઈલ માં રેખાઓ પર ફરી વળવું, કદાચ કેટલાક કાર્યોને વાપરીને આ સ્પષ્ટીકરણમાં સૂચન કર્યું. પછી તે દરેક દાખલ MySQL ડેટાબેઝના માં રેખાઓ ક્વેરી કાર્ય, ઉપયોગ કરીને જે અમે ફરી with-- તમને પ્રદાન કર્યો અથવા ઓછામાં ઓછા એક પ્રકાર તેના functions.php માં, જે અમે માત્ર એક ક્ષણ જોઈ શકશો. 

હવે આપણે આયાત બંધ કરો અને પાછા જવા દો અમારા ડિરેક્ટરીમાં અને આ સમય જાય સમાવેશ થાય છે. હું ત્યાં 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--. અને પછી સીએસએસ ફોન્ટ્સ, આઇએમજી, અને ખૂબ pset7 જેવા જેએસ ડિરેક્ટરી. 

માતાનો પર એક નજર કરીએ જે છે index.html, ખરેખર હોઈ ચાલે આ smashup માટે પ્રવેશ બિંદુ. હવે index.html માં, તમે સમગ્ર જોશો વડા લિંક તત્વો ટોળું, ચોક્કસ રીતે, આપણા પોતાના માટે બુટસ્ટ્રેપ માટે સ્ક્રિપ્ટ સંપૂર્ણ જથ્થો ત્યારબાદ સીએસએસ આ નકશા, API જેવી વસ્તુઓ માટે ટૅગ્સ પોતે, લેબલ સાથે ખાસ માર્કર આપણે ઉલ્લેખ કર્યો છે કે ઉપયોગીતા સ્પષ્ટીકરણ, તમારા માટે ઉપલબ્ધ છે jQuery પોતે, બુટસ્ટ્રેપ પોતે, અને અન્ય લાઇબ્રેરી કહેવાય નીચા જે અમે સ્પેક વિશે વાત કરો. Jquery.js જેવા Underscore.js એક JavaScript લાઇબ્રેરી છે કે વિધેય સંપૂર્ણ જથ્થો છે કે વિશ્વના ઈચ્છા માં ઘણા લોકોને જાવાસ્ક્રિપ્ટ પોતે હાજર છે. તેથી આ બધી છે ખરેખર ખૂબ જ લોકપ્રિય. અમે પણ typeahead ઉલ્લેખ કર્યો કર્યું ગ્રંથાલયનો છે જે કે કરે છે સ્વત: પૂર્ણ નીચે આવતા અને છેલ્લે અમારી પોતાની જાવાસ્ક્રિપ્ટ પર એક લિંક. 

દરમિયાન, અને કદાચ thankfully, આ મૅશઅપ પ્રમાણમાં ઓછી દ્વારા ચલાવાય છે નીચે અહીં નીચે એચટીએમએલ. અમે એક div માં સ્પષ્ટ કરેલો નોટિસ વર્ગ-કન્ટેનર પ્રવાહી આપણા શરીરમાં. આ, પ્રતિ બુટસ્ટ્રેપ માતાનો દસ્તાવેજીકરણ, ફક્ત આ div આ ભરો રહ્યું છે કે જે થાય છે વ્યૂપોર્ટ અથવા સંપૂર્ણપણે બ્રાઉઝરની વિંડો. 

દરમિયાન, કે નીચે અમે એક div હોય કે ખોલી અને તરત જ બંધ છે નકશા કેનવાસ ના અનન્ય ID સાથે. આ હવે Google માંથી છે નકશાઓ દસ્તાવેજીકરણ તેના API, માટે જેમાં હું ખાલી કરવાની જરૂર , પિચકારીની જેમાં એક ખાલી div હોય છેવટે, એક વાસ્તવિક ગૂગલ મેપ્સ. પરંતુ માત્ર એક બીટ કે પર વધુ. 

છેલ્લે, એક ફોર્મ છે અહીં ની અંદર જે લખાણ બોક્સમાં અપ ટોચ છોડી અમલ કરે શોધ માટે અમારા ઈન્ટરફેસમાં. અમે ઉપયોગ કર્યો છે કે નોટિસ બુટસ્ટ્રેપ એક બીટ અહીં જેવી વસ્તુઓ પણ છે ફોર્મ-ઇનલાઇન અને ફોર્મ-જૂથ. અમે ભૂતપૂર્વ આપી છે ફોર્મની અનન્ય ID. અને પછી, છેવટે, હું ખરેખર હોય ખૂબ પરિચિત છે, જે એક ઇનપુટ પ્રકાર, q જેની આઈડી નથી. માત્ર એક સંમેલન. ક્વેરી કરી શકે છે માટે સ કંઇ કહેવાય. અને પછી પ્લેસહોલ્ડર, દરમિયાન, શહેર, રાજ્ય છે, અને પોસ્ટલ કોડ તમને યાદ શકે જે ડેમો અગાઉ અમારા મૅશઅપ માં જોયા. ચાલો આ ફાઈલ બંધ કરીએ. 

હવે PHP, ફાઇલો પર એક નજર કે રાહ જોવી અને પછી જાવાસ્ક્રિપ્ટ ફાઈલો. અમારા PHP ફાઈલો, અમે કર્યું પહેલેથી જ તમારા માટે અમલમાં, ઉદાહરણ માટે, સુધારાઓ. અમે એક વિશાળ ખર્ચ કરશે Update.php-- ટૂંકમાં અહીં પર સમય જથ્થો આ ફાઇલ છે કે આપણા JavaScript કોડ રહ્યું છે AJAX મારફતે સંપર્ક કરવા કે કે અસુમેળ ટેકનિક કે આ દિવસ જાવાસ્ક્રિપ્ટ માં સમાયેલ અમને update.php પૂછો પરવાનગી આપવા જવાનું વધુ માહિતી માટે. 

ખાસ કરીને, ગમે ત્યારે વપરાશકર્તાને નકશા drags અથવા કૂદકા કે એક શોધ કરે અન્ય સ્થાન પર વપરાશકર્તાને, અમારા JavaScript કોડ, અમે ટૂંક સમયમાં જોશો, છે update.php કહી રહ્યા અને 10 કે તેથી માર્કર્સ માગી વ્યૂપોર્ટ અંદર આધારિત જીપીએસ કોઓર્ડિનેટ્સ પર ઉપર અને નીચે ના કે નકશાનો ખૂણા. અમે પછી હવે તે નકશા repopulate શકો વપરાશકર્તાને ક્રમમાં સ્ક્રીન ખસેડવામાં આવી છે 10 કદાચ નવા જોવા માટે વિવિધ શહેરો માટે માર્કર્સ. દરમિયાન, આ ફાઈલ છેવટે છે એક એસક્યુએલ ક્વેરી ચલાવો માટે જતા અમારા ડેટાબેઝમાં સામે કોષ્ટક કહેવાય સ્થાનો જેના તે પાછી રહ્યું છે 10 કે તેથી ઓછા સ્થળોએ. 

દરમિયાન, articles.php માં, અન્ય છે અમે તેની સમગ્રતામાં તેવા પરચૂરણ ખર્ચ કર્યો નોંધાવી. તે ભાવના ખૂબ સમાન છે સમસ્યા સેટ 7 માતાનો લુકઅપ કાર્ય, જે તમારા માટે યાહૂ ફાઇનાન્સ સંપર્ક. આ ફાઇલ સંપર્કો ગૂગલ સમાચાર તમારા માટે, છેવટે પડતો એક મશીન-વાંચનીય આવૃત્તિ કંઈક માં સમાચાર આરએસએસ ફોર્મેટ કહેવાય કેમ્બ્રિજ અથવા બેવર્લી હિલ્સ માટે અથવા જે નગર કે તમે શોધ કરી છે માટે કે geoparameter પર આધારિત છે. અમે માત્ર એક છે, જે કે આરએસએસ, પાર્સ XML કહેવાય માર્કઅપ ભાષા પ્રકારના, અને પછી અમે ખરેખર તમારા બ્રાઉઝર પર પાછા અને તમારા JavaScript કોડ માટે, ચોક્કસ રીતે, એક ફોર્મેટમાં કહેવાય JSON, જાવાસ્ક્રીપ્ટ ઑબ્જેક્ટ નોટેશન. હવે તમે જોશો specification-- અમે તમને નિર્દેશ તમે ખરેખર જોઈ શકે છે કેવી રીતે પર આ JSON આવતા પાછા કેટલાક કે આ વિધેય છેવટે તમે આમ તે પોપઅપ મેનુ રચના દે તમે ક્લિક ત્યારે તે નકશામાં એક માર્કર પર તમે ખરેખર સંપૂર્ણ જથ્થો જોવા બુલેટ્સ, જેમાં દરેક એક લેખ લિંક્સ. 

હવે આપણે છેલ્લા એક પર એક નજર કરીએ , સદભાગ્યે, નહી હોય, જે PHP, ફાઇલ ખૂબ હોય થઈ રહ્યું ફક્ત એક સુંદર મોટી TODO. હમણાં આ ફાઇલ ઘોષણા ઝાકઝમાળ સ્થાનો કહેવાય છે. અને પછી છેવટે છાપે JSON ફોર્મેટ માં કે એરે માત્ર કે જેથી તે સારુ-પ્રિન્ટીંગ વસ્તુઓ ડિબગ સરળ છે. કમનસીબે, માં મધ્યમ આ TODO છે, તમે શોધવા માટે માટે જે કહે બંધબેસતા સ્થાનો માટે ડેટાબેઝ એક ભૂ HTTP પરિમાણ. 

અને, ખરેખર, આ રહ્યું છે તમારા challenges-- એક હોઈ અહીં આ વિધેય અમલમાં કે જેથી તમારી સાથે આ ફાઇલ સંપર્ક ત્યારે શોધ જેવી એક URL. php? ભૂ = કંઈક, તમારો કોડ છેવટે એક JSON આપશે માં સ્થળો સૌ એરે તમારા કે ઇનપુટ મેળ ડેટાબેઝ કોષ્ટક. કેમ્બ્રિજ માં વપરાશકર્તા પ્રકારો તેથી જો અહીં તમારી ફાઈલ search.php છેવટે એક JSON અરે પાછા જોઈએ કેમ્બ્રિજ માટે મેચો બધા માટે, મેસેચ્યુસેટ્સમાં હોઈ શકે છે, જે પણ ક્યાંય હોઈ શકે છે. 

છેલ્લે, બે પર એક નજર કરીએ સ્ટેટિક ultimately-- છે કે ફાઇલો તમારા સીએસએસ ફાઇલ અને તમારા જાવાસ્ક્રિપ્ટ ફાઇલ. હું અમારા સીએસએસ ડિરેક્ટરીમાં જાઓ છો, ફાઇલો સંપૂર્ણ જથ્થો, ત્યાં છે પરંતુ તેમાંના મોટા ભાગના પુસ્તકાલયો છે. હું એક નજર જાઉં છું, ચોક્કસ રીતે, styles.css ખાતે, જે છે તે આપણા પોતાના વૈશ્વિક સીએસએસ છે આ સમગ્ર મૅશઅપ stylize માટે જતા. તમે મારફતે વાંચવા માટે કરવા હું તેને છોડી જાય ટિપ્પણીઓ અહીં, પરંતુ, ટૂંકમાં, આ ખાતરી કરે છે કે જે આ સીએસએસ છે અમારા મૅશઅપ, આ બોક્સની બહાર મૂળભૂત રીતે, અમે તેને માંગતા તે રીતે જુએ દૃશ્ય પોર્ટ ભરવા નકશા સાથે અને શોધ સાથે ટોચના ભાગે ડાબી બાજુ અપ બોક્સ. અમે પણ ના સ્વાતંત્ર્ય ભર્યું કે typeahead નીચે આવતા stylizing મેનુ થોડુંક સાથે સાથે. 

સૌથી મહત્વની ફાઇલ કદાચ સુયોજિત આ સમસ્યા માટે આ છેલ્લા એક, scripts.js છે. તમારા જેએસ ડિરેક્ટરીમાં ની અંદર પણ વધુ ફાઇલો છે. તે બધા લાઇબ્રેરી ફાઇલો છે આ એક સિવાય scripts.js. અમે આ ખોલવા, ચાલો લેવા દો અમારા આ વિધેયો મારફતે અંતિમ પ્રવાસ કે આ ફાઇલ માં સમાયેલ છે તમે અને કોલ ધ્યાન માટે આગળ આવેલા કે TODOs માટે. 

આ ફાઇલ ટોચ પર, ત્રણ વૈશ્વિક ચલો છે. રહ્યું છે, જે નકશો, માટે એક અમારા Google નકશો સંદર્ભ હોઈ. તમે તેને વિચાર કરી શકો છો પ્રકારની એક નિર્દેશક તરીકે. દરમિયાન, અમે હોય બીજી વૈશ્વિક ચલ હોય તેવું લાગે છે, જે કહેવાય માહિતી, કોલ પરત કિંમત સ્ટોર નવા google.maps.InfoWindow માટે. જાવાસ્ક્રિપ્ટ પદાર્થો આધાર આપે જે struts ભાવના ખૂબ સમાન છે. અને શું આ વાક્ય માટે અમારા હેતુઓ કરવાનું છે નવી માહિતી રહ્યા છે પછી મેમરી અને માં વિન્ડો સંદર્ભ આસપાસ રાખવા માહિતી કહેવાય ચલ માં ઠેકાણે. અને તે વચ્ચે, દરમિયાન, દેખાય છે તે છે ખાલી જાવાસ્ક્રિપ્ટ હોવાનું અરે માર્કર્સ કહેવાય. તે અખબાર ચિહ્નો તમામ, અથવા તમે અન્ય એકસાથે ચિહ્ન પસંદ કરી શકે, સંગ્રહ કરી જવું છે છેવટે આ એરે અમે ખૂબ સરળતાથી ઉમેરી શકો છો કે જેથી નકશા અને નકશા માંથી તેઓને દૂર. 

હવે આપણે સરકાવો દો થોડુંક અને બુદ્ધિમાન જ હશે કે કોડ દ્વારા ડોમ અથવા દસ્તાવેજ જલદી ચલાવવામાં ઓબ્જેક્ટ મોડલ અથવા પાનું પોતે તૈયાર છે. આ વાક્યરચના કે યાદ અહીં ખાલી સ્પષ્ટ કરે નીચેના કોડ કે માત્ર ચલાવી જોઈએ બ્રાઉઝર સમાપ્ત થઈ ગઈ છે ત્યારે બાકીનું બધું લોડ. 

અમે પ્રથમ એક જાહેર શૈલીના સંપૂર્ણ જથ્થો, stylizing અંત જે સ્પેક દીઠ તરીકે નકશા. અમે પછી એક જાહેર વિકલ્પોની સંપૂર્ણ જથ્થો, વધુ ગૂગલ કસ્ટમાઇઝ જે અમે એમ્બેડ કરવા વિશે છો કે નકશો. અમે પછી, jQuery કોડ એક બીટ વાપરો જે થોડી વધુ વિગતવાર સમજાવાયેલ છે સ્પેક, ગ્રેબ તે તત્વ, નકશો કેનવાસ અમે આમ અનન્ય ઓળખી કે. અને પછી આ વાક્ય અહીં છે શું લાગે છે જાદુઇ અમને આપી ની અંદર એક Google નકશા આપણા પોતાના એપ્લિકેશન, સંદર્ભ ઠેકાણે સ્ટોર કે ચલ કહેવાય નકશામાં. 

છેલ્લે, નીચે અહીં આપણે રજીસ્ટર શું સાંભળનારને કહેવાય છે. પાછા માર્ગ, રસ્તો લાગે CS50 માં સપ્તાહ શૂન્ય પાછા અમે સ્ક્રેચ પર હતા ત્યારે અને ચાલવા મારફતે તેના આધાર કહેવાય વસ્તુઓ માટે મારફતે ઘટનાઓ અને પ્રસારણ. તમે ઉપયોગ ન શકે તે જાતે, પરંતુ તે છે એક પદ્ધતિ છે જેમાં એક આ કિસ્સામાં બ્રાઉઝર તે છે ત્યારે અમારા ધ્યાન મળી શકે વાસ્તવમાં કેટલાક કોડ ચલાવવા માટે તૈયાર છે. આ કિસ્સામાં, તે સાંભળવા બનશે નિષ્ક્રિય નામની એક ઇવેન્ટ માટે નકશા પર. આ બ્રાઉઝર છે કે જે થાય છે ગૂગલ મેપ લોડ પૂરી કરી. આ બિંદુએ એક કાર્ય કહેવાય રૂપરેખાંકિત જોઇએ છેવટે ચલાવવામાં કરી. તે કાર્ય, રૂપરેખાંકિત, અમે અમને દ્વારા લખાયેલ છે, તે જોવા મળશે. 

હવે નીચે અહીં એક કાર્ય છે કે, કમનસીબે, માત્ર એક TODO ઉમેરો માર્કર છે. સ્પેક દીઠ. તમને જરૂર રહ્યા છીએ કે વાસ્તવમાં કોડ લખવા માટે તે જુએ છે કે શું એક marker-- ઉમેરે એક અખબાર, અથવા એક અંગૂઠો ખીલી જેવી, અથવા કંઈક ગૂગલ મેપ માટે બીજું. અહીં હવે તે કાર્ય છે રૂપરેખાંકિત કહેવાય. તમે વાંચી કરવા હું તેને છોડી જાય વધુ વિગતવાર આ મારફતે, પરંતુ અમે ઉમેરવા કે ખ્યાલ સમૂહ વધુ શ્રોતાઓ જ્યારે અમે કોડ ચલાવવા શકે છે કે જેથી વપરાશકર્તા પર ક્લિક કરે છે અને નકશા drags. અમે પણ અહીં કે માં કોડ છે કે typeahead પ્લગઇન પ્રારંભ કે જેથી નીચે આવતા મેનુ ખરેખર કામ કરે છે. 

પરંતુ માત્ર એક પર ધ્યાન કેન્દ્રિત માતાનો દો અહીં સ્થળો દંપતિ. ખાસ કરીને, આ અહીં કરવા. હું ઑનલાઇન માટે અલગ પાડવા પડશે દસ્તાવેજીકરણ અને સ્પષ્ટીકરણ માટે આ કેવી રીતે TODO ભરવા માટે. પરંતુ ટૂંકમાં, આ લાઈબ્રેરી typeahead તમે પસાર કરવા માટે પરવાનગી આપે છે સામાન્ય રીતે એક નમૂના તરીકે ઓળખાય છે તે માં, કેટલાક ચલ જગ્યામાં ધરાવે છે, જે printf માતાનો% ભાવના ખૂબ સમાન. * ઓ. પરંતુ આ કિસ્સામાં, આ સ્પેક દીઠ નમૂનો તમે સ્પષ્ટ કરવા માટે પરવાનગી આપે છે શું ચલો તમે ઇચ્છો આવી રહ્યું છે કે માહિતીમાંથી પિચકારીની પાછા 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? ભૂ = કેમ્બ્રિજ અથવા 02138 અથવા વપરાશકર્તાને જોઈએ માં લખ્યો છે ગમે તમે તમારી જાતને, આનો પ્રયાસ તરીકે અમૂલ્ય સાબિત બહાર આકૃતિ ચોકકસ કે શા search.php કામ અથવા નથી. 

છેવટે, પછી તમારી પાસે તમે આગળ થોડા TODOs. તમે પ્રથમ ઓજાર રહ્યા છીએ કે આયાત સ્ક્રિપ્ટ કે તમારા ડેટાબેઝ માં us.text માં વાંચે છે. તમે પછી જરૂર જઈ રહ્યાં છો search.php અમલમાં ઉલ્લેખિત તરીકે તે બરાબર વર્તે છે જેથી. તમે પછી માંગો છો જઈ રહ્યાં છો scripts.js પર ધ્યાન કેન્દ્રિત કરવા માટે અને છેવટે અમલમાં મૂકે TODOs તે દંપતિ, રૂપરેખાંકિત માટે સહિત અને તે નમૂના, , માર્કર્સ ઉમેરો માર્કર્સ દૂર કરવા, અને પછી રહે, પરંતુ ઓછામાં ઓછા, એક વ્યક્તિગત સંપર્ક. 

તમે તમારા મૅશઅપ કામ હોય એકવાર હાથ પર ખૂબ અવર્સ જેવા, ધ્યેય તમે એક વ્યક્તિગત ઉમેરવા માટે છે તમારા મૅશઅપ માટે સ્પર્શ, તે સૌંદર્યલક્ષી અથવા વિધેયાત્મક છે કે શું. અત્યાર સુધીમાં આ મૅશઅપ લો સહેજ આગલા સ્તર પર. કે તમે બહાર જાતે દબાણ તરીકે સ્પેક પોતે સાથે તમારા પારિવારિકતા અને એક ટેકનિક પસંદ નવું, તે પણ જો માત્ર કંઈક બદલાતી જેવા સૌંદર્યલક્ષી તમે ઉપયોગ કરી રહ્યાં છો કે નકશાનો લેઆઉટ, અમે અપેક્ષા કે અવકાશ સંતોષ થશે. કે પછી સમસ્યા સેટ 8 મેશઅપ છે. આ વધુ માટે સંગીતમય રહો સ્પષ્ટીકરણ અને નસીબ શ્રેષ્ઠ આ હાથ ધરવા, તમારા છેલ્લાં CS50 સમસ્યા ક્યારેય સુયોજિત કરો. 

[સંગીત વગાડવાનો]