[সঙ্গীত বাজানো] 

ডেভিড জে MALAN: হ্যালো. এর মাধ্যমে হাঁটার করা যাক সমস্যা সেট 8 ম্যাশআপ, যা আপনি চ্যালেঞ্জ করতে যাচ্ছে Google Maps- এ জন্য উপাদানের উপর আঁকা Google সংবাদ এবং ম্যাশ থেকে উপাদানের সঙ্গে একসঙ্গে একটি ওয়েব অ্যাপলেট মধ্যে তাদের যে একটি ব্যবহারকারী অনুসন্ধান করতে পারবেন স্থানীয় সংবাদ জন্য একটি মানচিত্র নির্দিষ্ট শহর থেকে, শহর, এবং পিন কোড. এই কাজের জন্য, আমরা চলুন কিছু এইচটিএমএল সংহত, সিএসএস, পিএইচপি, এসকিউএল, জাভাস্ক্রিপ্ট, এবং একটি কৌশল সাধারণত, যাতে AJAX এর হিসাবে পরিচিত এই immersive তৈরি করতে ব্যবহারকারীর অভিজ্ঞতা. 

প্রথম Google Maps- এ নিজেই জন্য দিন. এই, অবশ্যই, সম্ভবত হয় একটি পরিচিত ইন্টারফেস. কিন্তু এটা দেখা যাচ্ছে যে Google Maps- এ একটি API-- অ্যাপ্লিকেশন উপলব্ধ করা হয় ইন্টারফেস প্রোগ্রামিং যার মাধ্যমে আপনি Google Maps- উপাদান গ্রহণ করতে পারেন এবং তাদের একীভূত আপনার নিজস্ব অ্যাপ্লিকেশন. প্রকৃতপক্ষে, জুড়ে এই প্রক্রিয়া, আপনি যাচ্ছেন URL গুলির একটি দম্পতি খুঁজতে যে বিশেষ সহায়ক উল্লেখ করা হয় সমস্যা সেট 8 এর জন্য স্পেসিফিকেশন, বিশেষভাবে এই শুরু বা গাইড ডেভেলপার এর গাইড গুগল ম্যাপস এপিআই সংস্করণ 3 হিসাবে ভাল জন্য Google Maps- এ জাভাস্ক্রিপ্ট API- হিসেবে একটি, যা V3 রেফারেন্স, পড়তে বিট আরো রহস্যময় কিন্তু আসলে নিম্ন স্তরের সব আছে কি ফাংশন বা পদ্ধতি সম্পর্কে বিস্তারিত এবং বস্তু এবং বৈশিষ্ট্য এবং ঘটনা আসলে API- এর সাথে আসা, আত্মা খুব অনুরূপ [শ্রবণাতীত] পৃষ্ঠাসমূহ. 

এখন আমরা দেখব যদি গুগল নিউজ, আপনি পাবেন সম্ভবত এখানে একটি পরিচিত ইন্টারফেস দেখুন. কিন্তু এটি আপনি অনুসন্ধান করতে পারেন সক্রিয় আউট নির্দিষ্ট ভৌগলিক জন্য Google সংবাদ পার্থিব নামক একটি HTTP পরামিতি মাধ্যমে. আসলে, আমি জুম যদি এখানে আপ, আপনি দেখতে পাবেন আমি এ আছি news.google.com/news/section?geo=02138. এবং, প্রকৃতপক্ষে, আমি জুম যদি আউট, আপনি আমি দেখতে পাবেন আভা সঙ্গে একটি পাতা এ খুঁজছেন কেমব্রিজ, ম্যাসাচুসেটস সম্পর্কে মতামত. 

এদিকে, আমি আসলে পরিবর্তন যদি URL টি, ভালো একটি পিন কোড করা হবে না কিন্তু একটু Messier কিছু কেমব্রিজ, ম্যাসাচুসেটস + + মত, প্লাস উপায় যেখানে আপনি একটি সঙ্কেতাক্ষরে লিখা একটি URL- এ স্থান অক্ষর এবং আঘাত লিখুন, আসলে আপনি যে আমি দেখতে পাবেন প্রায় একই খবর দেখতে. সম্ভবত এটি একটি সামান্য বিট আলাদা কেমব্রিজ আসলে কারণ একাধিক পিন কোড আছে. এখন কিভাবে আমি জানি যে হবে, আসলে, কিভাবে একরকম আমি করতে পারে শহর ও শহরগুলির গিঁট যদি আমি জিপ কোড ব্যবহারকারী অনুমতি দিতে চান হয় সন্ধান? ওয়েল, এটা আছে যে দেখা যাচ্ছে একটি ওয়েবসাইট আছে বলা geonames.org যা একটি উদ্যোগ আছে সমস্ত একটি সহজলভ্য ডাটাবেস ভৌগলিক তথ্য প্রকারের, না শুধুমাত্র মার্কিন জন্য, কিন্তু অন্যান্য দেশের জন্য হিসাবে ভাল. আসলে, আমি এখানে এই URL- এ যান, তাহলে যা এছাড়াও সমস্যা সেট উল্লেখ করা হয় স্পেসিফিকেশন, আপনি এটি তিন দেখতে পাবেন জিপ ফাইল আভা তালিকা যা কোনো দ্বারা ডাউনলোড করা যাবে. আসলে, এই সমস্যার জন্য সেট আপনি us.zip ডাউনলোড করতে যাচ্ছেন. এখন এই ফাইল মধ্যে একটি সম্পূর্ণ হয় টেক্সট বিন্যাসে তথ্য গুচ্ছ. ফাইল একটি অনুরূপ CSV-- কমা মান পৃথক ফাইল কিন্তু এটি আসলে ব্যবহার ট্যাব ক্ষেত্র নির্ধারণ করুন. এখন এদিকে, যদি আপনি চেহারা এখানে আমি হাইলাইট করেছি এ, এই ফাইলটি ক্ষেত্র যাচ্ছি দেশের কোড ভালো জিনিস হবে, পোস্টাল কোড, জায়গার নাম, এবং তারপর, কিছু ফর্ম বা অন্যান্য, রাজ্য এবং জেলা, সম্প্রদায়, এবং আরও অনেক কিছু. আসলে, আমি ইতিমধ্যে করেছি অগ্রিম এই ফাইল ডাউনলোড করা. আমাকে এগিয়ে যান এবং এখানে এটি খোলার প্রকৃতপক্ষে, আপনি পাবেন, us.text-- এবং আমি 16.792 লাইন নিচে স্ক্রল করে দেখতে আপনি, কেমব্রিজ জন্য কয়েক রেকর্ড দেখতে পাবেন ম্যাসাচুসেটস এবং এর বিভিন্ন কোড. কি আপনি সেখানে দেখতে, কাউন্টি আমি সত্যিই না যে কিছু সংখ্যা সব বুঝি, কিন্তু ডান উপায়, কিছু GPS স্থানাঙ্ক অক্ষাংশ ও দ্রাঘিমাংশ. এই মহান এক কারণ গুগল ম্যাপস এপিআই এর বৈশিষ্ট্য সনাক্ত করার ক্ষমতা আপনি ভৌগোলিক দিক থেকে যেখানে জিপিএস স্থানাঙ্ক পদ. 

এখন এর কিভাবে চিন্তা করা শুরু করা যাক একসঙ্গে এই জিনিস tying শুরু. আমরা আপনাকে একটি সম্পূর্ণ দিয়েছি বন্টন কোড গুচ্ছ, পাশাপাশি মাইএসকিউএল ডাটাবেস হিসাবে. আমি টান বস্তুত, যদি একটি পিএইচপি মাই এডমিন হচ্ছে ইতিমধ্যে আমদানি, আপনি শীঘ্রই হবে হিসাবে, pset8.SQL, আপনি একটি মাইএসকিউএল টেবিল দেখতে পাবেন যে এই দেখে মনে হচ্ছে, একটি আইডি ক্ষেত্র, দেশ কোড, পোস্টাল কোড, স্থান নাম এবং আরো. ঐ সব ধরনের কলাম আমি কেবল উদ্ভূত readme.text পড়া দ্বারা নির্দিষ্ট যে এখানে ফাইল একটি ক্ষেত্রের একটি পূর্ণসংখ্যা কিনা, বা VARCHAR বা ভালো. 

তাই আমরা যে টেবিলের জন্য তৈরি করেছি আপনি এবং আপনার এসকিউএল কমান্ড দেওয়া যে তৈরি চালানো আপনার নিজস্ব ডাটাবেসের মধ্যে টেবিল, কিন্তু এখনো আসলে এটা কোন তথ্য আছে. বরং, আপনি আছে চলুন us.zip ডাউনলোড করুন অথবা কোনো দেশের জিপ সেখানে যে URL থেকে ফাইল. এবং তারপর আপনি লিখতে আছে চলুন যে পিএইচপি একটি কমান্ড লাইন স্ক্রিপ্ট যে টেক্সট খুলুন যাচ্ছে , যদি ফাইলটি তার লাইনের উপর বারবার, এবং তারপর প্রতিটি জন্য যারা লাইন একটি সন্নিবেশ করতে যে টেবিল স্থাপন করা মধ্যে আপনার মাইএসকিউএল ডাটাবেসের মধ্যে. এই প্রক্রিয়া শেষে, আপনি পাবেন তাই শেষ পর্যন্ত যে স্ক্রিপ্ট চালাতে হয়েছে শুধু একবার তত্ত্ব. প্রকৃতপক্ষে আপনি সম্ভবত করব এটা সময়ের একটি গুচ্ছ চালানো যখন বিভিন্ন বাগ ফিক্স করার চেষ্টা করছে. 

পরিশেষে, আপনি একটি আছে চলুন হাজার হাজার সঙ্গে সত্যিই বড় ডাটাবেস ভৌগলিক সারি এবং হাজার হাজার. তারপর আপনি যে আমদানি করা চলুন স্ক্রিপ্ট সরাইয়া এটা কাজ একবার এবং আপনার ডাটাবেস চমৎকার এবং সঠিক, এবং তারপর আপনি আসলে উপর সরানো চলুন ম্যাশআপ নিজেই বাস্তবায়ন. ম্যাশআপ তাকান যাচ্ছে এই মত সামান্য কিছু. Mashup.cs50.net, আমরা স্টাফ সমাধান আছে যে একটি ভালো সামান্য কিছু দেখায়. প্রকৃতপক্ষে, আমি এই পত্রিকার ক্লিক করুন কেমব্রিজ, ম্যাসাচুসেটস জন্য আইকন, আপনি একটি স্পিনিং দেখতে পাবেন সংক্ষিপ্তভাবে এবং তারপর আইকন একটি আদেশ তালিকা, একটি নিবন্ধ বুলেটযুক্ত তালিকা কেমব্রিজ, ম্যাসাচুসেটস এর সাথে সম্পর্কিত. আমি মিডিল ক্লিক করুন, ম্যাসাচুসেটস, আমি যে শহরে জন্য একই দেখতে পাবেন. এবং আমি উপর ক্লিক করা হলে Watertown, ম্যাসাচুসেটস, কোনো হতে পারে না WATERTOWN থেকে খবর, তাই আপনি কিছু দেখতে পাবেন ধীর খবর দিনের মত. 

এখন এদিকে, উপরের বাম দিকে রয়েছে কিছু পরিচিত Google Maps- এ নিয়ন্ত্রণ , প্যান আপনি জুম আউট করা যাক আপ, ডাউন, বাম, ডান এবং, কিন্তু আমরা সেখানে রাখা একটি সার্চ বক্স. তাই আমি অকপটে, অনুসন্ধান যদি, আমি জানি শুধুমাত্র অন্যান্য জিপ কোড, 90210, আমরা আসলে দেখতে পাবেন বেভারলি হিলস, ক্যালিফোর্নিয়া. ক্লিক করা হলে এটি সম্পর্কে বাড়ে ক্যালিফোর্নিয়া এবং আভা Beverly পাহাড় সম্পর্কে খবর. এখন সেখানে কি ঘটেছে, খুব, বিজ্ঞপ্তি. এমনকি 02138 বা আমি যদি এই সময় অনুসন্ধান কেমব্রিজ কমা ম্যাসাচুসেটস বা কিছু বৈকল্পিক উহার, আপনি একটি পেতে একটু স্বয়ংসম্পূর্ণ ড্রপডাউন. এখন এই একটি প্লাগইন ব্যবহার করা হয় jQuery নামক একটি লাইব্রেরি জন্য, এবং যে প্লাগইন Typeahead বলা হয়. আমরা কেবল মাধ্যমে পড়া ডকুমেন্টেশন, .js সমন্বিত ফাইল ডাউনলোড ডিস্ট্রিবিউশনের মধ্যে কোড, তাই আপনি যে শেষ পর্যন্ত কোড লিখতে পারেন যে স্বয়ংক্রিয় সঙ্গে যে ড্রপডাউন মেনু fills পছন্দসই মান নির্বাচন করে বা স্বয়ংক্রিয় পরামর্শ. 

এখন ডিস্ট্রিবিউশন কোড, যদিও, যে আপনি প্রায় হিসাবে অনেক না পেয়েছি. আপনি গুগল ম্যাপ এমবেডেড পেতে, এবং আপনি, উপরের বাম নিয়ন্ত্রণ পেতে এবং আপনি সার্চ বক্স পাবেন. কিন্তু আমি ভালো কিছু টাইপ করে 02138, কোন জায়গা এখনো পাওয়া যায়. সুতরাং যে হতে যাচ্ছে এখানে আমাদের লক্ষ্য এক. তাছাড়া, আপনি একটি পদক্ষেপ নিতে হলে ফিরে এবং মানচিত্র নিজেই এ চেহারা, কোন খবর আছে. আমি ক্লিক করুন এবং এমনকি যদি ড্র্যাগ, আসলে কোন চিহ্নিতকারী যে কারণ খবর প্রদর্শিত হবে চ্যালেঞ্জ হিসাবে আপনি ভাল জন্য ছেড়ে দেওয়া হয়. 

এর পরে কটাক্ষপাত করা যাক বিতরণ কোড. আপনি ডাউনলোড করেছি pset8.zip এবং এটি আনজিপ আপনার vhost ডিরেক্টরি মধ্যে CS50 অ্যাপ্লায়েন্স, যদি আপনি এই দেখতে পাবেন এখানে ভিতরে ডিরেক্টরি. সাধারণত জন্য যা দাঁড়িয়েছে Bin-- এক্সিকিউটেবল প্রোগ্রামের জন্য বাইনারি pset7, যেমন, কিছু পিএইচপি অন্যান্য ফাইল অন্তর্ভুক্ত ফাইল, যা তারপর পাবলিক, প্রয়োজন যে ফাইল প্রকাশ্যে সুগম হতে একটি ব্রাউজার দিয়ে একটি ব্যবহারকারী. এর মধ্যে একটি কটাক্ষপাত করা যাক বিন ডিরেক্টরি, এবং আমরা করব একটি ফাইল আছে দেখতে ইতিমধ্যে আমদানি সেখানে বলা হয়. আমরা gedit ব্যবহার করে এই খুলুন, আমরা দেখতে পাবেন যে, দুর্ভাগ্যবশত, অনেক আছে না সেখানে. যদিও আছে, যে সব, উপরের একটি কুঁড়েঘর হয় যা যা নির্দিষ্ট এই ক্ষেত্রে interpreter-- PHP-- আসলে ব্যবহার করা উচিত এই ফাইলটি চালানো হয়. কিন্তু তারপর এটা বলছেন যেখানে আপনি যেখানে করণীয় কিছু কোড লেখার প্রয়োজন যাচ্ছে যে সম্ভবত কনফিগ প্রয়োজন ডিরেক্টরি অন্তর্ভুক্ত মধ্যে যে ফাইল আমরা পিএইচপি ফাইল সঙ্গে আগে কাজ করেছি. এবং তারপর আপনি চলুন একরকম খুলুন আছে us.text যা আপনি সম্ভবতঃ ইতিমধ্যে আনজিপ আছে. তারপর আপনি আছে চলুন যে ফাইল লাইনের উপর বারবার, সম্ভবত ফাংশন কিছু ব্যবহার করে নির্দেশের মধ্যে প্রস্তাব. তারপর যারা প্রতিটি সন্নিবেশ মাইএসকিউএল ডাটাবেসের মধ্যে লাইন প্রশ্নের সাথে ফাংশন ব্যবহার করে, যা আমরা আবার with-- আপনি প্রদান করেছেন অথবা অন্তত একটি বৈকল্পিক উহার functions.php মধ্যে, যা আমরা শুধু একটি মুহূর্ত দেখতে পাবেন. 

এখন এর আমদানি বন্ধ করে ফিরে যান আমাদের এবং এই সময় ঢোকা অন্তর্ভুক্ত করা হয়েছে. আমি সেখানে ম না হলে, আপনি দেখতে পাবেন বেশ সমস্যা 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 মধ্যে, আপনি একটি সম্পূর্ণ দেখতে পাবেন মাথা লিঙ্ক উপাদানের গুচ্ছ, বিশেষভাবে, আমাদের নিজস্ব জন্য বুটস্ট্র্যাপ জন্য স্ক্রিপ্ট আভা দ্বারা অনুসরণ সিএসএস মানচিত্র, এপিআই ভালো জিনিসের জন্য ট্যাগ নিজেই, লেবেল সঙ্গে একটি বিশেষ মার্কার আমরা উল্লেখ যে ইউটিলিটি স্পেসিফিকেশন, আপনার জন্য উপলব্ধ jQuery এর নিজেই, বুটস্ট্র্যাপ নিজেই, এবং অন্য লাইব্রেরি বলা আন্ডারস্কোর যা আমরা বৈশিষ্ট সম্পর্কে কথা বলুন. Jquery.js মত Underscore.js একটি জাভাস্ক্রিপ্ট লাইব্রেরী যে কার্যকারিতা আভা আছে বিশ্বের যে ইচ্ছা মানুষের অনেক জাভাস্ক্রিপ্ট নিজেই অস্তিত্ব ছিল. তাই এই সব হয় আসলে বেশ জনপ্রিয়. আমরা Typeahead উল্লেখ করেছি লাইব্রেরি, যা যে যে স্বয়ংসম্পূর্ণ ড্রপডাউন এবং অবশেষে আমাদের নিজস্ব জাভাস্ক্রিপ্ট একটি লিঙ্ক. 

এদিকে, এবং সম্ভবত সৌভাগ্যক্রমে, এই ম্যাশআপ তুলনামূলকভাবে সামান্য দ্বারা চালিত হয় নিচে এখানে নীচে এইচটিএমএল. আমরা একটি div উল্লেখ করেছি বিজ্ঞপ্তি বর্গ-ধারক তরল আমাদের শরীরের. এই প্রতি বুটস্ট্র্যাপ এর ডকুমেন্টেশন, ঠিক এই div পূরণ করা যাচ্ছে যে মানে ভিউপোর্ট বা সম্পূর্ণরূপে ব্রাউজার এর উইন্ডো. 

এদিকে, নীচের যে আমরা একটি div আছে যে খোলা এবং অবিলম্বে বন্ধ মানচিত্র ক্যানভাস অনন্য আইডি দিয়ে. এটি এখন গুগল থেকে মানচিত্র ডকুমেন্টেশন তার এপিআই, জন্য, যেখানে আমি কেবল প্রয়োজন , উদ্বুদ্ধ করা, যার মধ্যে একটি খালি div আছে শেষ পর্যন্ত, একটি প্রকৃত Google Maps- এ. কিন্তু শুধুমাত্র একটি বিট আরো যে. 

অবশেষে, একটি ফর্ম আছে এখানে ভিতরে যা টেক্সট বক্স উপরের বাম প্রয়োগ অনুসন্ধানের জন্য আমাদের ইন্টারফেস. আমরা ব্যবহার করেছি যে বিজ্ঞপ্তি বুটস্ট্র্যাপ একটি বিট এখানে ভালো জিনিস too-- ফর্ম-ইনলাইন এবং ফর্ম-গ্রুপ. আমরা সাবেক দিয়েছি ফর্ম অনন্য আইডি. এবং তারপর, শেষ পর্যন্ত, আমি আসলে আছে বেশ পরিচিত হয়, যা একটি ইনপুট টাইপ, প্রশ্ন যার আইডি. শুধু একটি কনভেনশন. Query-- হতে পারে জন্য প্রশ্ন কিছু বলা হয়েছে. এবং তারপর স্থানধারক, এদিকে, শহর, রাষ্ট্র, পোস্টাল কোড আপনি প্রত্যাহার করা হতে পারে যা ডেমো আগে আমাদের ম্যাশআপ এইজন্য. এই ফাইল বন্ধ করা. 

এখন পিএইচপি ফাইল কটাক্ষপাত করা যে অপেক্ষা করুন এবং তারপর জাভাস্ক্রিপ্ট ফাইল. আমাদের পিএইচপি ফাইল, আমরা করেছি ইতিমধ্যে আপনার জন্য প্রয়োগ করা, উদাহরণস্বরূপ, আপডেট. আমরা একটি বিশাল ব্যয় হবে না Update.php-- সংক্ষেপে এখানে সময় পরিমাণ ফাইল যে আমাদের জাভাস্ক্রিপ্ট কোড যাচ্ছে AJAX মাধ্যমে যোগাযোগ করুন যে যে অ্যাসিঙ্ক্রোনাস কৌশল যে এই দিন জাভাস্ক্রিপ্ট পাতাটা আমাদের update.php জিজ্ঞাসা করতে যাচ্ছে আরও তথ্যের জন্য. 

বিশেষ করে, যে কোন সময় ব্যবহারকারী মানচিত্র drags বা জাম্প একটি অনুসন্ধান সঞ্চালিত অন্য কোনো স্থানে ব্যবহারকারী, আমাদের জাভাস্ক্রিপ্ট কোড, আমরা শীঘ্রই দেখতে পাবেন, হয় update.php কল করতে যাচ্ছে এবং 10 বা তাই মার্কার জন্য জিজ্ঞাসা ভিউপোর্ট মধ্যে ভিত্তি করে জিপিএস স্থানাঙ্ক উপরে এবং নীচে মানচিত্রের যে কোণ. আমরা তাহলে এখন যে মানচিত্র repopulate পারেন ব্যবহারকারী যাতে পর্দা সরানো হয়েছে 10 সম্ভবত নতুন দেখতে বিভিন্ন শহরগুলির জন্য চিহ্নিতকারী. এদিকে, এই ফাইল শেষ পর্যন্ত একটি SQL কোয়েরি চালানো যাচ্ছে আমাদের ডাটাবেস বিরুদ্ধে টেবিল বলা জায়গা যা যারা ফিরে যাচ্ছে 10 বা তার চেয়ে কম অবস্থানে. 

এদিকে, articles.php মধ্যে, অন্য আমরা তার সম্পূর্ণতা লিখিত করেছি ফাইল. এটা আত্মা অনুরূপ সমস্যা সেট 7 এর লুকআপ ফাংশন, যা আপনার জন্য ইয়াহু হিসাববিদ্যা সাথে যোগাযোগ করেন. এই ফাইলটি যোগাযোগ Google সংবাদ আপনার জন্য শেষ পর্যন্ত দখল একটি মেশিনে পাঠযোগ্য version-- কিছু সংবাদ আরএসএস format-- বলা কেমব্রিজ বা Beverly পাহাড় জন্য বা যাই হোক না কেন আপনি শহরে সন্ধান করেছেন যে geoparameter উপর ভিত্তি করে. আমরা শুধু একটি যা যে আরএসএস, বিশ্লেষণ এক্সএমএল বলা মার্কআপ ভাষা ধরণ, এবং তারপর আমরা আসলে আপনার ব্রাউজার এটি ফেরত এবং আপনার জাভাস্ক্রিপ্ট কোড, বিশেষভাবে, একটি বিন্যাসে বলা JSON, জাভাস্ক্রিপ্ট অবজেক্ট স্বরলিপি. এখন আপনি দেখতে পাবেন specification-- আমরা আপনার নির্দেশ আপনি আসলে দেখতে পারেন কিভাবে এ JSON আসছে back-- কিছু যে এই কার্যকারিতা শেষ পর্যন্ত আপনি তাই যারা পপআপ মেনু পূরণ করতে দেয় আপনি ক্লিক করা হলে যে মানচিত্রে একটি চিহ্নিতকারী আপনি আসলে একটি আভা দেখতে বুলেট, প্রতিটি যা একটি নিবন্ধ লিঙ্ক. 

এখন এর গত এক কটাক্ষপাত করা যাক ভাগ্যক্রমে, না, যা পিএইচপি ফাইল অনেক আছে যা ঘটছে শুধু একটি চমত্কার বড় করণীয়. ঠিক এখন এই ফাইল ঘোষণা একটি অ্যারের জায়গা বলা হয়. এবং তারপর শেষ পর্যন্ত কপি করে প্রিন্ট JSON format-- মধ্যে যে অ্যারের ঠিক তাই যে এটি বেশ মুদ্রণ কিছু ডিবাগ করা সহজ. দুর্ভাগ্যবশত, এ মধ্যম এই করণীয় আছে, আপনি অনুসন্ধান করার জন্য যা কল মিলে জায়গা জন্য ডাটাবেস একটি ভূখণ্ড HTTP- র প্যারামিটার. 

এবং, প্রকৃতপক্ষে, এই যাচ্ছে আপনার চ্যালেঞ্জ এক হতে এখানে এই কার্যকারিতা বাস্তবায়ন যাতে আপনার সাথে এই ফাইল যোগাযোগ যখন অনুসন্ধান মত একটি URL. পিএইচপি? পার্থিব = কিছু, আপনার কোড পরিণামে একটি JSON ফিরে আসতে হবে এ জায়গা সব অ্যারে আপনার যে ইনপুট মেলে ডাটাবেস টেবিল. কেমব্রিজের ব্যবহারকারী ধরনের, তাই যদি এখানে আপনার ফাইল search.php শেষ পর্যন্ত একটি JSON অ্যারে ফিরে উচিত কেমব্রিজ জন্য ম্যাচ সব জন্য, ম্যাসাচুসেটস হতে পারে, যা কিন্তু কোথাও হতে পারে. 

সর্বশেষে, দুই কটাক্ষপাত করা যাক স্ট্যাটিক ultimately-- যে ফাইল আপনার সিএসএস ফাইল এবং আপনার জাভাস্ক্রিপ্ট ফাইল. আমি আমাদের সিএসএস ডিরেক্টরির মধ্যে যান, ফাইল আভা আছে সেখানে, কিন্তু তাদের অধিকাংশই লাইব্রেরি আছে. আমি দেখব করা যাচ্ছে না, বিশেষভাবে, styles.css এ, যা যে আমাদের নিজস্ব বিশ্বব্যাপী সিএসএস এই পুরো ম্যাশআপ stylize যাচ্ছে. আপনি মাধ্যমে পড়া আমি এটা ছেড়ে দেব মন্তব্য এখানে, কিন্তু, সংক্ষেপে, এই নিশ্চিত করে যে, যে CSS আমাদের ম্যাশআপ, বাক্সের বাইরে ডিফল্টরূপে, আমরা এটিকে চান ঠিক ভাবে মনে হচ্ছে দেখুন পোর্ট ভর্তি মানচিত্র সঙ্গে এবং অনুসন্ধান সঙ্গে উপরের বাম বক্স. আমরা স্বাধীনতা গ্রহণ করেছেন যে Typeahead ড্রপডাউন stylizing মেনু একটি সামান্য বিট হিসাবে ভাল. 

সবচেয়ে গুরুত্বপূর্ণ ফাইল সম্ভবত সেট এই সমস্যার জন্য এই গত এক, scripts.js হয়. আপনার জাতীয় তালিকা ভিতরে এমনকি একাধিক ফাইল হয়. তাদের সমস্ত লাইব্রেরি ফাইল এই এক ছাড়া, scripts.js. আমরা এই খুলুন, এর করা যাক আমাদের ফাংশন মাধ্যমে চূড়ান্ত সফর যে এই ফাইলের মধ্যে নির্মিত হয় আপনি এবং কল মনোযোগ জন্য এগিয়ে থাকা যে todos যাও. 

এই ফাইলটি শীর্ষে, তিন গ্লোবাল ভেরিয়েবল. যাচ্ছে যা একটি মানচিত্র, জন্য এক আমাদের গুগল ম্যাপে একটি রেফারেন্স হতে. আপনি এটা মনে করতে পারেন বাছাই করা একটি পয়েন্টার হিসাবে. এদিকে, আমরা আছে অন্য বিশ্বব্যাপী পরিবর্তনশীল উপস্থিত হতে পারে যা বলা হয় তথ্য, একটি কল ফেরত মান সংরক্ষণ নতুন google.maps.InfoWindow করতে. জাভাস্ক্রিপ্ট বস্তু সমর্থন করে ভাররক্ষা আত্মা অনুরূপ. এবং কি এই লাইন জন্য আমাদের উদ্দেশ্যে করছে একটি নতুন তথ্য তৈরি করা হয় তারপর মেমরি এবং উইন্ডো একটি রেফারেন্স কাছাকাছি পালন তথ্য একটি পরিবর্তনশীল নামক তত্প্রতি. এবং যারা তাদের মধ্যে, এদিকে, প্রদর্শিত হবে কি একটি খালি জাভাস্ক্রিপ্ট হতে অ্যারে চিহ্নিতকারী বলা হয়. যারা সংবাদপত্র আইকন সব, অথবা আপনি পুরাপুরি অন্য আইকন বেছে নিতে পারে, সঞ্চিত করা যাচ্ছে শেষ পর্যন্ত এই অ্যারের মধ্যে আমরা খুব সহজেই যোগ করতে পারেন, যাতে মানচিত্র এবং মানচিত্র থেকে মুছে ফেলুন. 

এখন এর নিচে স্ক্রল একটি সামান্য বিট এবং শোঁ শব্দ হতে যাচ্ছে যে কোড মাধ্যমে DOM বা ফাইলটি হিসাবে যত তাড়াতাড়ি মৃত্যুদন্ড কার্যকর অবজেক্ট মডেল বা পাতা নিজেই প্রস্তুত. এই বাক্য গঠন যে প্রত্যাহার এখানে কেবল নির্দিষ্ট নিম্নলিখিত কোড যে শুধুমাত্র মৃত্যুদন্ড কার্যকর করা উচিত ব্রাউজার সমাপ্ত হলে অন্য সব কিছুর লোড. 

আমরা প্রথমে একটি ঘোষণা শৈলী আভা, stylizing, শেষ পর্যন্ত যা প্রতি বৈশিষ্ট হিসাবে মানচিত্রে. আমরা তখন একটি ঘোষণা বিকল্প আভা, আরও গুগল কাস্টমাইজ যা আমরা এম্বেড সম্পর্কে যে মানচিত্র. আমরা তখন, jQuery কোড এর একটি বিট ব্যবহার যা একটি বিট আরো বিস্তারিতভাবে আলোচনা করা হয়েছে বৈশিষ্ট, দখল যে উপাদান, মানচিত্র ক্যানভাস আমরা তাই এককভাবে চিহ্নিত. এবং তারপর এই লাইন এখানে কি মনে হয় আপনি magically আমাদের দিতে এর ভিতরে একটি গুগল ম্যাপ আমাদের নিজস্ব অ্যাপ্লিকেশন, একটি রেফারেন্স তত্প্রতি সংরক্ষণ যে পরিবর্তনশীল নামক মানচিত্রে. 

অবশেষে, এখানে নিচে আমরা রেজিস্টার কি একটি শ্রোতা বলা হচ্ছে. Back-- পথ, পথ, চিন্তা CS50 মধ্যে সপ্তাহে শূন্য back-- আমরা ভূত দিকে তাকিয়ে এবং হাঁটার মাধ্যমে তার সমর্থন বলা জিনিস মাধ্যমে ঘটনা এবং সম্প্রচার. আপনি যদি ব্যবহৃত হতে পারে না এটা নিজেকে, কিন্তু এটা একটি প্রক্রিয়া যেখানে একটি এই ক্ষেত্রে ব্রাউজার এটা যখন আমাদের মনোযোগ পেতে পারেন আসলে কিছু কোড চালানো করার জন্য প্রস্তুত. এই ক্ষেত্রে, এটা শুনতে যাচ্ছে অলস নামক একটি ইভেন্টের জন্য মানচিত্র. এই ব্রাউজার আছে এর মানে হল যে গুগল ম্যাপ লোড সমাপ্ত. এই সময়ে একটি ফাংশন বলা কনফিগার করা উচিত পরিণামে মৃত্যুদন্ড কার্যকর করা. যে ফাংশন, কনফিগার, আমরা আমাদের দ্বারা লিখিত হয়, দেখতে পাবেন. 

এখন এখানে নিচে একটি ফাংশন যে, দুর্ভাগ্যবশত, শুধু একটি করণীয় যোগ মার্কার হয়. বৈশিষ্ট. আপনি প্রয়োজন চলুন যে আসলে কোড লিখুন এটা দেখে মনে হচ্ছে কি না তা একটি marker-- যোগ একটি সংবাদপত্র, অথবা একটি থাম্ব ট্যাক মত, বা কিছু গুগল ম্যাপে else--. এখানে এখন যে ফাংশন কনফিগার বলা হয়. আপনি পড়তে আমি এটা ছেড়ে দেব আরো বিস্তারিতভাবে এই মাধ্যমে, কিন্তু আমরা যোগ বুঝতে পারি যে একটি গুচ্ছ আরো শ্রোতাকে যখন আমরা কোড এক্সিকিউট করতে পারেন, যাতে ব্যবহারকারী ক্লিক এবং মানচিত্র drags. আমরা এখানে যে কোড আছে যে Typeahead প্লাগইন সূচনা যাতে ড্রপডাউন মেনু আসলে কাজ করে. 

কিন্তু শুধু একটি ফোকাস এর যাক এখানে জায়গা দম্পতি. বিশেষ করে, এই এখানে করতে. আমি অনলাইন থেকে মুলতবি রাখা হবে ডকুমেন্টেশন এবং স্পেসিফিকেশন জন্য কিভাবে এই করণীয় পূরণ করতে. কিন্তু সংক্ষেপে, এই লাইব্রেরি Typeahead আপনি পাস করতে পারবেন সাধারণত একটি টেমপ্লেট হিসাবে পরিচিত এর মধ্যে, কিছু পরিবর্তনশীল স্থানধারক আছে যা printf এর% আত্মা খুব অনুরূপ. * গুলি. কিন্তু এই ক্ষেত্রে, প্রতি বৈশিষ্ট টেমপ্লেট আপনি উল্লেখ করতে পারবেন কি ভেরিয়েবল আপনি চান আসা যে তথ্য থেকে উদ্বুদ্ধ করা ফিরে পিএইচপি মত কিছু থেকে আপনি লিখিত করেছি যে ফাইল যে JSON আউটপুট emitting হয়. 

এখন এখানে নিচে আমরা বুঝতে পারি যে Typeahead নির্বাচনগুলি জন্য শোনা যখন ব্যবহারকারী আসলে সঞ্চালন একটি অনুসন্ধান এবং একটি মান নির্বাচন করা হয়. এই আমরা আসলে করছি কিভাবে যে জন্য শুনতে যাচ্ছে এবং এর ফলে কিছু কোড চালানো হয়. তারপর আমরা কনফিগার করা অব্যাহত ম্যাশআপ শুধু একটি সামান্য বিট. এবং শেষ পর্যন্ত, আমরা কল এই ফাংশন আপডেট. এটা পর্দায় চিহ্নিতকারী আপডেট. মাত্র কয়েক মিনিটের মধ্যে যে আরও. এদিকে, কয়েক আছে এখানে ছোট ফাংশন. যা এক hideInfo যা কেবল InfoWindow বন্ধ হয়ে যায়. এখানে আরেকটি ফাংশন, যা শেষ পর্যন্ত খুব দীর্ঘ হবে না, মার্কার মুছে ফেলুন. যে পূর্বাবস্থা যাচ্ছে যাই হোক না কেন আপনার অ্যাড মার্কার ফাংশন আছে. এবং তারপর নিচে এখানে অনুসন্ধান. এবং এই এক আকর্ষণীয় আমরা কারণ যে জাভাস্ক্রিপ্ট কোড লেখা উপর search.php সাথে কথা বলতে যাচ্ছি সার্ভার এবং কিছু প্রতিক্রিয়া ফিরে পেতে. 

আপনি, অবশ্যই, এখনও করবে না search.php বাস্তবায়ন করতে হবে, কিন্তু আমরা প্রয়োগ করেছি যে জাভাস্ক্রিপ্ট কোড করণ আসলে হ্যান্ডেল করতে যাচ্ছে যে টেক্সট বক্স থেকে অনুসন্ধান করে. বিশেষ করে, নোটিশ এই ফাংশন এখানে, অনুসন্ধান, search.php কল না নামে একটি পদ্ধতি দ্বারা আমরা বক্তৃতায় দেখেছি যা JSON, পেতে. এবং এখানে সিনট্যাক্স একটু ভিন্ন যে বক্তৃতা থেকে আমরা ব্যবহার করছেন jQuery এর প্রতিশ্রুতি ইন্টারফেস তথাকথিত. বৈশিষ্ট যে আরও. এই কেবল আমাদের জন্য মানে এখন যে উদ্দেশ্যে দুটি বিশেষ ফাংশন আমরা বিন্দু স্বরলিপি সঙ্গে কল করতে হবে এখানে অবিলম্বে JSON পেতে কলিং পরে. এক কাজ বলা হয়. বলা হয় এক ব্যর্থ. আপনি এই মনে করতে পারেন সাফল্য হ্যান্ডলার হিসাবে এবং ব্যর্থতার হ্যান্ডলার শুধু যদি এমন কিছু কিছু ভুল হয়ে যায়. 

এখন এর শেষ তাকান এই ফাইলের মধ্যে কর্ম দম্পতি. নিচে এখানে একটি ফাংশন বলা showInfo, যা যারা এক তথ্য দেখায় সামান্য তথ্য জানালা যে ব্যবহারকারী একটি চিহ্নিতকারী ক্লিক যখন পপ আপ. এখানে নিচে আরও যে আপডেট ফাংশন যে আমরা আপনার জন্য প্রয়োগ করা হয়েছে. এটা মানচিত্র সীমার নির্ধারণ করে. জিপিএস স্থানাঙ্ক কি তার উত্তর-পূর্ব এবং দক্ষিণ-পশ্চিম কোণে এখানে. আমরা কিছু HDP পরামিতি প্রস্তুত করেছি এখানে এবং তারপর শেষ পর্যন্ত তাদের পাস আমরা যা করতে update.php আপনার জন্য প্রয়োগ করা. যে শেষ পর্যন্ত কিছু JSON ফিরে পায় ফাইল update.php বলা থেকে এবং তারপর কোনো সরিয়ে ফেলা হয় পর্দায় চিহ্নিতকারী এবং তারপর উপর iterates ফিরে আসা যে তথ্য update.php, থেকে যা আবার শুধু একটি JSON অ্যারে. এবং তারপর এটি শেষ পর্যন্ত একটি মার্কার জন্য যোগ করা হয়েছে ঐ জায়গা প্রতিটি পরিচালনার ব্যর্থতা অথবা যা হতে পারে ত্রুটি খুব ভাল ঘটেছে. 

এখন শুধু আপনি আপনি কিভাবে একটি স্বাদ দিতে এই প্রকল্পের ডিবাগ সম্পর্কে যেতে পারে, আমি খোলা করেছি বুঝতে পারি যে এই URL- এখানে এই ট্যাব আগাম, pset8 / articles.php? পার্থিব = 02138. সম্পর্কে এখন, আবার, নিবন্ধ পিএইচপি আমরা আপনার জন্য প্রয়োগ করা তাই এই এত না আপনি ব্যবহার করা হবে কি ডিবাগ, বরং কৌশল. আমি অনুসন্ধান করেছি বিজ্ঞপ্তি এখানে কেমব্রিজ এর পিন কোড, এবং আমি একটি JSON, প্রকৃতপক্ষে, ফিরে অর্জিত করেছি JSON এর অ্যারে ভিতর যা বস্তু দুই keys-- লিঙ্ক এবং শিরোনাম হয়. 

তাই এই কার্যকারিতা আপনার জন্য ইতিমধ্যে কাজ করে. কিন্তু নিজে এই টেকনিক যাচ্ছে কিছু ভালো একটি URL মত search.php? পার্থিব = কেমব্রিজ বা 02138 বা ব্যবহারকারী উচিত টাইপ করা হয়েছে যাই হোক না কেন আপনি নিজেকে, চেষ্টা হিসাবে অমূল্য প্রমাণ চিন্তা করা ঠিক কিনা বা কেন search.php কাজ বা করা হয় না. 

পরিশেষে, তারপর আপনি এগিয়ে আপনি একটি কয়েক todos. আপনি যদি প্রথম কার্যকরী করতে যাচ্ছেন যে আমদানি স্ক্রিপ্ট যে আপনার ডাটাবেসের মধ্যে us.text এ সার্চ. তারপর আপনি প্রয়োজন চলুন search.php বাস্তবায়ন উল্লিখিত হিসাবে এটা ঠিক আচরণ করে. তারপর আপনি চান চলুন scripts.js উপর ফোকাস এবং শেষ পর্যন্ত কার্যকরী todos এর ঐ দম্পতি, কনফিগার সহ এবং যে টেমপ্লেট, , চিহ্নিতকারী যোগ চিহ্নিতকারী অপসারণ, এবং তারপর শেষ, কিন্তু না অন্তত, এক ব্যক্তিগত স্পর্শ. 

আপনি আপনার ম্যাশআপ কাজ আছে হাতে বেশ আমাদের মতো, লক্ষ্য আপনি একটি ব্যক্তিগত যুক্ত করতে হয় আপনার ম্যাশআপ স্পর্শ, এটা নান্দনিক বা কার্যকরী কিনা. অত্যন্ত ম্যাশআপ নিন সামান্য পরবর্তী স্তরে. তাই দীর্ঘ আপনি অতিক্রম নিজেকে ধাক্কা হিসেবে বৈশিষ্ট নিজেই সঙ্গে আপনার ঘনিষ্ঠতা এবং এক কৌশল নিতে নতুন, এটা এমনকি আপনি যদি শুধুমাত্র কিছু পরিবর্তন মত নান্দনিক আপনি ব্যবহার করছেন মানচিত্রের যে বিন্যাস, আমরা আশা যে সুযোগ সন্তুষ্ট হতে হবে. তারপর সমস্যা সেট 8 ম্যাশআপ. আরো জন্য থাকুন স্পেসিফিকেশন এবং ভাগ্য ভাল এই মোকাবেলা, আপনার শেষ CS50 সমস্যা কখনও সেট. 

[সঙ্গীত বাজানো]