পিএইচপি এবং গুগল স্প্রেডশীটগুলির সাথে একটি ব্যবহারকারীর অবদানযুক্ত মানচিত্র তৈরি করা

পামেলা ফক্স, Google Maps API টিম
নভেম্বর 2007

উদ্দেশ্য

ওয়েবটি ভৌগলিক এবং আগ্রহের চারপাশে কেন্দ্রীভূত সম্প্রদায়ে পরিপূর্ণ: যারা যাদুঘর, ইউরোপীয় ক্যাথেড্রাল, স্টেট পার্ক, ইত্যাদি পছন্দ করে। সুতরাং, এমন একটি সিস্টেম তৈরি করার জন্য সর্বদা একজন বিকাশকারীর (আপনার মতো!) প্রয়োজন রয়েছে যেখানে ব্যবহারকারীরা জিওট্যাগ করা জায়গাগুলিতে অবদান রাখতে পারে একটি মানচিত্র, এবং আমরা এখানে ঠিক কি করব। এই নিবন্ধের শেষে, আপনার কাছে একটি সিস্টেম থাকবে যেখানে ব্যবহারকারীরা নিবন্ধন করতে, লগইন করতে এবং জিওট্যাগযুক্ত স্থান যোগ করতে পারে। সিস্টেমটি ফ্রন্ট-এন্ডের জন্য AJAX, সার্ভার-সাইড স্ক্রিপ্টিংয়ের জন্য PHP এবং স্টোরেজের জন্য Google স্প্রেডশীট ব্যবহার করবে। আপনি যদি স্টোরেজের জন্য MySQL ডাটাবেস ব্যবহার করতে অভ্যস্ত হন, তাহলে আপনি সহজেই এর পরিবর্তে একটি MySQL ডাটাবেস ব্যাকএন্ড ব্যবহার করতে কোডটি পরিবর্তন করতে পারেন।

এই নিবন্ধটি নিম্নলিখিত ধাপে বিভক্ত:


স্প্রেডশীট সেট আপ করা হচ্ছে

আমরা এই সিস্টেমের জন্য সমস্ত ডেটা সঞ্চয় করতে Google স্প্রেডশীট ব্যবহার করব৷ আমাদের সঞ্চয় করার জন্য দুটি ধরণের ডেটা প্রয়োজন: ব্যবহারকারীর অ্যাকাউন্টের তথ্য এবং ব্যবহারকারী-যুক্ত স্থান, তাই আমরা প্রতিটি ডেটা টাইপের জন্য একটি ওয়ার্কশীট তৈরি করব। আমরা ওয়ার্কশীটগুলির সাথে তাদের লিস্ট ফিড ব্যবহার করে ইন্টারঅ্যাক্ট করব, যা কলাম লেবেল সম্বলিত ওয়ার্কশীটের প্রথম সারির উপর নির্ভর করে এবং প্রতিটি পরবর্তী সারিতে ডেটা রয়েছে।

docs.google.com এ যান এবং একটি নতুন স্প্রেডশীট তৈরি করুন৷ ডিফল্ট ওয়ার্কশীটকে "ব্যবহারকারী" এ পুনঃনামকরণ করুন এবং "ব্যবহারকারী," "পাসওয়ার্ড" এবং "সেশন" নামে কলাম তৈরি করুন। তারপরে অন্য একটি শীট যোগ করুন, এটিকে "অবস্থান" এ পুনঃনামকরণ করুন এবং "ব্যবহারকারী," "স্থিতি," "ল্যাট," "lng," এবং "তারিখ" নামে কলাম তৈরি করুন৷ অথবা, যদি আপনি এই সমস্ত কায়িক শ্রমের মত অনুভব না করেন, তাহলে এই টেমপ্লেটটি ডাউনলোড করুন এবং ফাইল->ইমপোর্ট কমান্ডের মাধ্যমে Google স্প্রেডশীটে আমদানি করুন।

ব্যবহারকারীর অ্যাকাউন্টের তথ্য ব্যক্তিগত রাখতে হবে (শুধুমাত্র স্প্রেডশীটের মালিক-আপনার কাছে দৃশ্যমান), যখন ব্যবহারকারী-যুক্ত স্থানগুলি একটি সর্বজনীনভাবে দৃশ্যমান মানচিত্রে প্রদর্শিত হবে৷ সৌভাগ্যবশত, Google স্প্রেডশীটগুলি আপনাকে স্প্রেডশীটে কোন ওয়ার্কশীটগুলি সর্বজনীন হতে পারে এবং কোনটি ব্যক্তিগত (ডিফল্ট) থাকতে পারে তা বেছে নেওয়ার অনুমতি দেয়। "অবস্থান" ওয়ার্কশীটটি প্রকাশ করতে, "প্রকাশ করুন" ট্যাবে ক্লিক করুন, "এখন প্রকাশ করুন" ক্লিক করুন, "স্বয়ংক্রিয়ভাবে পুনরায় প্রকাশ করুন" চেকবক্সে টিক চিহ্ন দিন এবং তারপরে "কি অংশ?" ড্রপ-ডাউন, "শুধুমাত্র পত্রক 'অবস্থান' নির্বাচন করুন৷" সঠিক বিকল্পগুলি নীচের স্ক্রিনশটে দেখানো হয়েছে:

Zend GData ফ্রেমওয়ার্কের সাথে কাজ করা

Google স্প্রেডশীট API CRUD ক্রিয়াকলাপের জন্য একটি HTTP ইন্টারফেস প্রদান করে যেমন সারি পুনরুদ্ধার করা, সারি সন্নিবেশ করানো, সারি আপডেট করা এবং সারি মুছে ফেলা। Zend ফ্রেমওয়ার্ক API (এবং অন্যান্য GData API) এর উপরে একটি PHP র‍্যাপার প্রদান করে যাতে আপনাকে কাঁচা HTTP ক্রিয়াকলাপগুলি বাস্তবায়নের বিষয়ে চিন্তা করতে হবে না। Zend ফ্রেমওয়ার্কের জন্য পিএইচপি 5 প্রয়োজন।

আপনার কাছে এটি ইতিমধ্যে না থাকলে, Zend ফ্রেমওয়ার্ক ডাউনলোড করুন এবং এটি আপনার সার্ভারে আপলোড করুন। ফ্রেমওয়ার্ক এখানে উপলব্ধ: http://framework.zend.com/download/gdata ।

Zend লাইব্রেরি অন্তর্ভুক্ত করার জন্য আপনাকে আপনার PHP include_path পরিবর্তন করতে হবে। আপনার সার্ভারে প্রশাসনিক অধিকারের স্তরের উপর নির্ভর করে এটি করার বিভিন্ন উপায় রয়েছে। একটি উপায় হল লাইব্রেরি ব্যবহার করে যেকোনো পিএইচপি ফাইলে প্রয়োজনীয় বিবৃতির উপরে এই লাইনটি যোগ করা:

ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");

এটি পরীক্ষা করতে, ডেমো/জেন্ড/জিডাটা ফোল্ডারে কমান্ড লাইনে এটি প্রবেশ করে স্প্রেডশীট ডেমো চালান:

php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword

যদি এটি কাজ করে, তাহলে আপনার প্রদর্শিত স্প্রেডশীটগুলির একটি তালিকা দেখতে হবে৷ যদি আপনি একটি ত্রুটি পান, আপনার অন্তর্ভুক্ত পথ সঠিকভাবে সেট করা আছে এবং আপনার PHP 5 ইনস্টল করা আছে তা পরীক্ষা করুন।

গ্লোবাল ফাংশন তৈরি করা

কমিউনিটি ম্যাপের জন্য আমরা যে সমস্ত PHP স্ক্রিপ্ট লিখব তাতে সাধারণ অন্তর্ভুক্ত, ভেরিয়েবল এবং ফাংশন ব্যবহার করা হবে, যা আমরা একটি ফাইলে রাখব।

ফাইলের শুরুতে, আমাদের কাছে Zend লাইব্রেরি অন্তর্ভুক্ত এবং লোড করার জন্য প্রয়োজনীয় বিবৃতি থাকবে, যা Spreadsheets-ClientLogin.php উদাহরণ থেকে নেওয়া হয়েছে।

তারপর আমরা ধ্রুবকগুলিকে সংজ্ঞায়িত করব যা ফাইল জুড়ে ব্যবহার করা হবে: স্প্রেডশীট কী এবং দুটি ওয়ার্কশীট আইডি। আপনার স্প্রেডশীটের তথ্য খুঁজতে, এটি খুলুন, "প্রকাশিত ট্যাবে" ক্লিক করুন এবং "আরো প্রকাশনার বিকল্প" এ ক্লিক করুন। ফাইল ফরম্যাট ড্রপ-ডাউন তালিকা থেকে "ATOM" নির্বাচন করুন এবং "URL তৈরি করুন" এ ক্লিক করুন। আপনি এরকম কিছু দেখতে পাবেন:

http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic

স্প্রেডশীট কী হল "/list/" এর পরে লম্বা আলফানিউমেরিক স্ট্রিং এবং ওয়ার্কশীট আইডি হল তার পরে 3-অক্ষরের লম্বা স্ট্রিং৷ অন্য ওয়ার্কশীট আইডি খুঁজতে, "কী পত্রক?" থেকে অন্য শীটটি নির্বাচন করুন। ড্রপ-ডাউন

তারপর আমরা 3টি ফাংশন তৈরি করব: setupClient, getWkshtListFeed এবং printFeed। সেটআপক্লায়েন্টে, আমরা আমাদের GMail ব্যবহারকারীর নাম এবং পাসওয়ার্ড সেট করব, ClientLogin এর মাধ্যমে প্রমাণীকরণ করব এবং একটি Zend_Gdata_Spreadsheets অবজেক্ট ফেরত দেব। getWkshtListFeed-এ, আমরা একটি প্রদত্ত স্প্রেডশীট কী এবং ওয়ার্কশীট আইডির জন্য একটি ঐচ্ছিক স্প্রেডশীট ক্যোয়ারী (লিঙ্ক) সহ একটি স্প্রেডশীট তালিকা ফিড ফেরত দেব। printFeed ফাংশনটি Spreadsheets-ClientLogin.php উদাহরণ থেকে নেওয়া হয়েছে, এবং ডিবাগিংয়ের জন্য আপনার জন্য উপযোগী হতে পারে। এটি একটি ফিড অবজেক্ট গ্রহণ করবে এবং এটি স্ক্রিনে মুদ্রণ করবে।

যে পিএইচপি এটি করে তা নীচে দেখানো হয়েছে ( communitymap_globals.php ):

<?php
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Spreadsheets');
Zend_Loader::loadClass('Zend_Http_Client');

define("SPREADSHEET_KEY", "o16162288751915453340.4016005092390554215");
define("USER_WORKSHEET_ID", "od6");
define("LOC_WORKSHEET_ID", "od7");
 
function setupClient() {
  $email = "your.name@gmail.com";
  $password = "yourPassword";
  $client = Zend_Gdata_ClientLogin::getHttpClient($email, $password,
          Zend_Gdata_Spreadsheets::AUTH_SERVICE_NAME);
  $gdClient = new Zend_Gdata_Spreadsheets($client);
  return $gdClient;
}
 
function getWkshtListFeed($gdClient, $ssKey, $wkshtId, $queryString=null) {
  $query = new Zend_Gdata_Spreadsheets_ListQuery();
  $query->setSpreadsheetKey($ssKey);
  $query->setWorksheetId($wkshtId);
  if ($queryString !== null) {
    $query->setSpreadsheetQuery($queryString);
  }
  $listFeed = $gdClient->getListFeed($query);
  return $listFeed;
}
 
function printFeed($feed)
{
  print "printing feed";
  $i = 0;
  foreach($feed->entries as $entry) {
      if ($entry instanceof Zend_Gdata_Spreadsheets_CellEntry) {
         print $entry->title->text .' '. $entry->content->text . "\n";
      } else if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
         print $i .' '. $entry->title->text .' '. $entry->content->text . "\n";
      } else {
         print $i .' '. $entry->title->text . "\n";
      }
      $i++;
  }
}
 
?>

একটি নতুন ব্যবহারকারী নিবন্ধন

একটি নতুন ব্যবহারকারী নিবন্ধন করতে, আমরা স্প্রেডশীটে ব্যবহারকারীকে যুক্ত করার জন্য পাঠ্য ক্ষেত্র এবং একটি জমা বোতাম সহ একটি ব্যবহারকারী-মুখী HTML পৃষ্ঠা এবং একটি PHP ব্যাকএন্ড স্ক্রিপ্ট চাই।

পিএইচপি স্ক্রিপ্টে, আমরা প্রথমে গ্লোবাল স্ক্রিপ্ট অন্তর্ভুক্ত করি এবং তারপর GET ভেরিয়েবল থেকে ব্যবহারকারীর নাম এবং পাসওয়ার্ডের মানগুলি পাই। তারপরে আমরা একটি স্প্রেডশীট ক্লায়েন্ট সেট আপ করি এবং ব্যবহারকারীর ওয়ার্কশীটের জন্য একটি ক্যোয়ারী স্ট্রিং সহ তালিকা ফিডের অনুরোধ করি ফলাফলগুলিকে শুধুমাত্র সারিগুলিতে সীমাবদ্ধ করতে যেখানে ব্যবহারকারীর নাম কলামটি স্ক্রিপ্টে পাস করা ব্যবহারকারীর নামের সমান। যদি আমরা তালিকা ফিডের ফলাফলে কোনো সারি না পাই, তাহলে আমরা নিরাপদে এগোতে পারি যে পাস করা ব্যবহারকারীর নামটি অনন্য। তালিকা ফিডে একটি সারি সন্নিবেশ করার আগে, আমরা কলামের মানগুলির একটি সহযোগী অ্যারে তৈরি করি: ব্যবহারকারীর নাম, PHP এর sha1 ফাংশন ব্যবহার করে পাসওয়ার্ডের একটি এনক্রিপশন এবং সেশনের জন্য একটি ফিলার অক্ষর৷ তারপরে আমরা স্প্রেডশীট ক্লায়েন্টে insertRow কল করি, অ্যাসোসিয়েটিভ অ্যারে, স্প্রেডশীট কী, এবং ওয়ার্কশীট আইডি পাস করে। যদি প্রত্যাবর্তিত বস্তু একটি ListFeedEntry হয়, তাহলে আমরা একটি সফল আউটপুট! বার্তা

যে পিএইচপি এটি করে তা নীচে দেখানো হয়েছে ( communitymap_newuser.php ):

<?php
 
require_once 'communitymap_globals.php';
 
$username = $_GET['username'];
$password = $_GET['password'];
 
$gdClient = setupClient();
 
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('user='.$username));
$totalResults = $listFeed->totalResults;
if ( $totalResults != "0") {
  // Username already exists
  exit;
}
 
$rowArray["user"] = $username;
$rowArray["password"] = sha1($password);
$rowArray["session"] = "a";
 
$entry = $gdClient->insertRow($rowArray, SPREADSHEET_KEY, USER_WORKSHEET_ID);
if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
  echo "Success!";
}
?>

নিবন্ধন পৃষ্ঠায়, আমরা মানচিত্র API অন্তর্ভুক্ত করতে পারি যাতে আমরা এটির XMLHttpRequest র্যাপার ফাংশনটি ব্যবহার করতে পারি যাকে GDownloadUrl বলা হয়। যখন ব্যবহারকারী সাবমিট বোতামে ক্লিক করেন, আমরা পাঠ্য ক্ষেত্র থেকে ব্যবহারকারীর নাম এবং পাসওয়ার্ড পাব, তাদের মান থেকে একটি প্যারামিটার স্ট্রিং তৈরি করব এবং স্ক্রিপ্ট url এবং প্যারামিটারগুলিতে GDownloadUrl-কে কল করব। যেহেতু আমরা সংবেদনশীল তথ্য পাঠাচ্ছি, তাই আমরা GDownloadUrl-এর HTTP POST সংস্করণ ব্যবহার করছি (প্যারামিটারগুলিকে URL-এ যুক্ত করার পরিবর্তে তৃতীয় আর্গুমেন্ট হিসেবে পাঠিয়ে)। কলব্যাক ফাংশনে, আমরা একটি সফল প্রতিক্রিয়া পরীক্ষা করব এবং ব্যবহারকারীকে একটি উপযুক্ত বার্তা আউটপুট করব৷

একটি নমুনা নিবন্ধন পৃষ্ঠার জন্য একটি স্ক্রিনশট এবং কোড নীচে দেখানো হয়েছে ( communitymap_register.htm ): 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title> Community Map - Register/Login </title>

  <script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
      type="text/javascript"></script>
  <script type="text/javascript">

  function register() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var url = "communitymap_newuser.php?";
    var params = "username=" + username + "&password=" + password;
    GDownloadUrl(url, function(data, responseCode) {
      if (data.length > 1) {
        document.getElementById("message").innerHTML = "Successfully registered." + 
          "<a href='communitymap_login.htm'>Proceed to Login</a>.";
      } else {
        document.getElementById("message").innerHTML = "Username already exists. Try again.";
      }
    }, params);
  }

  </script>

  </head>
  <body>
  <h1>Register for Community Map</h1>
  <input type="text" id="username">
  <input type="password" id="password">

  <input type="button" onclick="register()" value="Register">
  <div id="message"></div>
  </body>
</html>

একটি ব্যবহারকারী লগ ইন

ব্যবহারকারীদের আমাদের সিস্টেমে সাইন ইন করার অনুমতি দেওয়ার জন্য, আমরা তাদের ব্যবহারকারীর নাম এবং পাসওয়ার্ডের জন্য একটি ব্যবহারকারী-মুখী এইচটিএমএল পৃষ্ঠা চাই - এবং লগইন তথ্য যাচাই করার জন্য একটি PHP স্ক্রিপ্ট, একটি সেশন আইডি তৈরি করুন এবং এটিকে লগইনে ফেরত পাঠাতে চাই। একটি কুকি সেট করতে পৃষ্ঠা। ব্যবহারকারী পরবর্তী পৃষ্ঠাগুলিতে সেশন কুকির মাধ্যমে লগ ইন থাকবে।

পিএইচপি স্ক্রিপ্টে, আমরা প্রথমে গ্লোবাল স্ক্রিপ্ট অন্তর্ভুক্ত করি এবং তারপর GET ভেরিয়েবল থেকে ব্যবহারকারীর নাম এবং পাসওয়ার্ডের মানগুলি পাই। তারপরে আমরা একটি স্প্রেডশীট ক্লায়েন্ট সেট আপ করি এবং ব্যবহারকারীর ওয়ার্কশীটের জন্য একটি ক্যোয়ারী স্ট্রিং সহ তালিকা ফিডের অনুরোধ করি ফলাফলগুলিকে শুধুমাত্র সারিগুলিতে সীমাবদ্ধ করতে যেখানে ব্যবহারকারীর নাম কলামটি স্ক্রিপ্টে পাস করা ব্যবহারকারীর নামের সমান।

ফিরে আসা সারিতে, আমরা পরীক্ষা করব যে পাসওয়ার্ডের হ্যাশ স্প্রেডশীটে সংরক্ষিত হ্যাশের সাথে মেলে। যদি তা হয়, আমরা md5, uniqid, এবং rand ফাংশন ব্যবহার করে একটি সেশন আইডি তৈরি করব। তারপর আমরা সেশনের সাথে স্প্রেডশীটে সারি আপডেট করব এবং সারি আপডেট সফল হলে এটি স্ক্রিনে আউটপুট করব।

যে পিএইচপি এটি করে তা নীচে দেখানো হয়েছে ( communitymap_loginuser.php ):

<?php
 
require_once 'communitymap_globals.php';
 
$username = $_POST['username'];
$password = $_POST['password'];
 
$gdClient = setupClient();
 
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('user='.$username));
 
$password_hash = sha1($password);
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
  if ($customEntry->getColumnName()=="password" && $customEntry->getText()==$password_hash) {
    $updatedRowArray["user"] = $username;
    $updatedRowArray["password"] = sha1($password);
    $updatedRowArray["session"] = md5(uniqid(rand(), true));
    $updatedRow = $gdClient->updateRow($row, $updatedRowArray); 
    if ($updatedRow instanceof Zend_Gdata_Spreadsheets_ListEntry) {
      echo $updatedRowArray["session"];
    }
  }
}
?>

লগইন পৃষ্ঠায়, আমরা আবার মানচিত্র API অন্তর্ভুক্ত করতে পারি যাতে আমরা GDownloadUrl নামক XMLHttpRequest র্যাপার ফাংশন ব্যবহার করতে পারি। যখন ব্যবহারকারী সাবমিট বোতামে ক্লিক করেন, আমরা পাঠ্য ক্ষেত্র থেকে ব্যবহারকারীর নাম এবং পাসওয়ার্ড পাব, ক্যোয়ারী প্যারামিটার সহ স্ক্রিপ্ট URL তৈরি করব এবং স্ক্রিপ্ট url-এ GDownloadUrl কল করব। কলব্যাক ফাংশনে, আমরা সেশন আইডি সহ একটি কুকি সেট করব যা স্ক্রিপ্ট দ্বারা প্রত্যাবর্তন করা হয়, অথবা কোনোটি ফেরত না দিলে একটি ত্রুটি বার্তা আউটপুট করব৷ setCookie ফাংশনটি একটি cookies.js থেকে আসে যা w3c JavaScript টিউটোরিয়ালের উপর ভিত্তি করে: http://www.w3schools.com/js/js_cookies.asp।

একটি নমুনা লগইন পৃষ্ঠার জন্য একটি স্ক্রিনশট এবং কোড নীচে দেখানো হয়েছে ( communitymap_login.htm ): 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

  <title>Community Map - Login</title>
      <script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
      type="text/javascript"></script>
  <script src="cookies.js" type="text/javascript"></script>
  <script type="text/javascript">

  function login() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var url = "communitymap_loginuser.php?username=" + username + "&password=" + password;
    GDownloadUrl(url, function(data, responseCode) {
      if (data.length > 1) {
        setCookie("session", data, 5);
      } else {
        document.getElementById("nessage").innerHTML = "Error. Try again.";
      }
    });
  }

  </script>
  </head>
  <body>

  <h1>Login for Community Map</h1>

  <input type="text" id="username">
  <input type="password" id="password">
  <input type="button" onclick="login()" value="Login">
  <div id="message"></div>
  </body>
</html>

ব্যবহারকারীদের মানচিত্র স্থান যোগ করতে দেওয়া

একজন ব্যবহারকারীকে আমাদের মানচিত্রে স্থান যোগ করতে দেওয়ার জন্য, আমরা একটি ব্যবহারকারী-মুখী HTML পৃষ্ঠা চাই যাতে তারা অবস্থান সম্পর্কে তথ্য দেয়, এবং দুটি পিএইচপি স্ক্রিপ্ট - একটি তারা আমাদের সেট করা কুকির মাধ্যমে লগ ইন করেছে কিনা তা পরীক্ষা করার জন্য, এবং অন্যটি অবস্থানের ওয়ার্কশীটে অবস্থান যোগ করতে।

প্রথম পিএইচপি স্ক্রিপ্টে যা চেক করে যে একজন ব্যবহারকারী লগ ইন করেছেন কিনা, আমরা প্রথমে গ্লোবাল স্ক্রিপ্ট অন্তর্ভুক্ত করি এবং তারপর GET ভেরিয়েবল থেকে সেশন মান পাই। তারপরে আমরা একটি স্প্রেডশীট ক্লায়েন্ট সেট আপ করি, এবং ব্যবহারকারীদের ওয়ার্কশীটের জন্য তালিকা ফিডের অনুরোধ করি একটি ক্যোয়ারী স্ট্রিং সহ ফলাফলগুলিকে শুধুমাত্র সেই সারিগুলিতে সীমাবদ্ধ করতে যেখানে সেশন কলামটি স্ক্রিপ্টে পাস করা সেশন মানের সমান। তারপরে আমরা সেই ফিডের কাস্টম এন্ট্রিগুলির মাধ্যমে পুনরাবৃত্তি করি (যেগুলি আমাদের কলামের শিরোনামগুলির সাথে সম্পর্কিত), এবং যদি একটি বিদ্যমান থাকে তবে সেই সেশনের জন্য সংশ্লিষ্ট ব্যবহারকারীর নাম প্রিন্ট আউট করি৷

যে পিএইচপি এটি করে তা নীচে দেখানো হয়েছে ( communitymap_checksession.php ):

<?php

require_once 'communitymap_globals.php';

$session = $_GET['session'];

$gdClient = setupClient();

$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('session='.$session));

if ( count($listFeed->entries) > 0) {
  $row = $listFeed->entries[0];
  $rowData = $row->getCustom();
  foreach($rowData as $customEntry) {
    if ($customEntry->getColumnName()=="user") {
      echo $customEntry->getText();
    }
  }
}
?>

দ্বিতীয় PHP স্ক্রিপ্টে যা একজন ব্যবহারকারীকে একটি অবস্থান যোগ করতে দেয়, আমরা প্রথমে communitymap_checksession.php থেকে কোডটি প্রতিলিপি করি, নিশ্চিত করতে যে ব্যবহারকারী এখনও লগ ইন এবং বৈধ। তারপরে একবার আমরা ব্যবহারকারীর শীট থেকে একটি বৈধ ব্যবহারকারীর নাম ফিরে পেলে, আমরা GET ভেরিয়েবল থেকে স্থান, ল্যাট এবং lng মানগুলি পাই। আমরা সেই সমস্ত মানগুলিকে একটি সহযোগী অ্যারেতে রাখি, এবং আমরা PHP-এর date() ফাংশন ব্যবহার করে একটি "তারিখ" মানও যোগ করি, যাতে আমরা জানতে পারি যে ব্যবহারকারী কখন জায়গাটি যুক্ত করেছে। আমরা সেই সহযোগী অ্যারে, স্প্রেডশীট কী ধ্রুবক, এবং অবস্থানের ওয়ার্কশীট আইডি ধ্রুবক insertRow ফাংশনে পাস করি। স্প্রেডশীটে নতুন অবস্থানের জন্য একটি সারি যুক্ত হলে আমরা "সফল" আউটপুট করি। আপনি যদি এই ধাপে একটি ত্রুটি পেয়ে থাকেন, তাহলে এটি সম্ভবত কলাম হেডারের নামের সাথে মিল না থাকার কারণে। অ্যাসোসিয়েটিভ অ্যারের কীগুলি অবশ্যই স্প্রেডশীট কী এবং ওয়ার্কশীট আইডি দ্বারা নির্দিষ্ট করা ওয়ার্কশীটের কলাম হেডারগুলির সাথে মেলে।

যে পিএইচপি এটি করে তা নীচে দেখানো হয়েছে ( communitymap_addlocation.php ):

<?php

require_once 'communitymap_globals.php';

$session = $_GET['session'];

$gdClient = setupClient();

$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('session='.$session));

if ( count($listFeed->entries) > 0) {
  $row = $listFeed->entries[0];
  $rowData = $row->getCustom();
  foreach($rowData as $customEntry) {
    if ($customEntry->getColumnName()=="user") {
      $user = $customEntry->getText();
    }
  }

  $place = $_GET['place'];
  $lat = $_GET['lat'];
  $lng = $_GET['lng'];
  $rowArray["user"] = $user;
  $rowArray["place"] = $place;
  $rowArray["lat"] = $lat;
  $rowArray["lng"] = $lng;
  $rowArray["date"] = date("F j, Y, g:i a");
  $entry = $gdClient->insertRow($rowArray, SPREADSHEET_KEY, LOC_WORKSHEET_ID);
  if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
    echo "Success!\n";
  }
}

?>

অবস্থান যোগ করুন পৃষ্ঠায়, আমরা আবার Maps API অন্তর্ভুক্ত করতে পারি যাতে আমরা GDownloadUrl ব্যবহার করতে পারি এবং একটি মানচিত্র তৈরি করতে পারি। পৃষ্ঠা লোড হওয়ার পরে, আমরা সেশন মান পুনরুদ্ধার করতে cookies.js থেকে getCookie ফাংশন ব্যবহার করি। সেশন স্ট্রিং নাল বা খালি হলে, আমরা একটি ত্রুটি বার্তা আউটপুট. যদি তা না হয়, তাহলে আমরা GDownloadUrl কে map.checksession.php-এ কল করি, সেশনে পাঠাচ্ছি। যদি এটি সফলভাবে একটি ব্যবহারকারীর নাম ফেরত দেয়, আমরা ব্যবহারকারীকে একটি স্বাগত বার্তা প্রদর্শন করি, অ্যাড-এ-অবস্থান ফর্মটি প্রকাশ করি এবং মানচিত্রটি লোড করি৷ ফর্মটিতে স্থানের নাম, অক্ষাংশের জন্য একটি ঠিকানা পাঠ্য ক্ষেত্র, মানচিত্র এবং পাঠ্য ক্ষেত্র থাকে , এবং দ্রাঘিমাংশ। যদি ব্যবহারকারী ইতিমধ্যেই অবস্থানের অক্ষাংশ/দ্রাঘিমাংশ না জানে, তাহলে তারা ফর্মে তাদের ঠিকানা লিখে এবং "জমা দিন" টিপে এটি জিওকোড করতে পারে। এটি Map API-এর GClientGeocoder-এ একটি কল পাঠাবে, যা ঠিকানা খুঁজে পেলে মানচিত্রে একটি মার্কার স্থাপন করবে এবং ল্যাট/lng পাঠ্য ক্ষেত্রগুলিকে স্বয়ংক্রিয়ভাবে পপুলেট করবে।

ব্যবহারকারী সন্তুষ্ট হলে, তারা "অবস্থান যোগ করুন" বোতাম টিপুন। তারপর, জাভাস্ক্রিপ্টে, আমরা ব্যবহারকারী, স্থান, ল্যাট এবং lng-এর মানগুলি পাব এবং সেগুলি GDownloadUrl এর সাথে communitymap_addlocation.php স্ক্রিপ্টে পাঠাব।

যদি সেই স্ক্রিপ্টটি সাফল্য দেয়, আমরা স্ক্রিনে একটি সফল বার্তা আউটপুট করব।

একটি নমুনা যুক্ত অবস্থান পৃষ্ঠার জন্য একটি স্ক্রিনশট এবং কোড নীচে দেখানো হয়েছে ( communitymap_addlocation.htm ): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Community Map - Add a Place!</title>

    <script src="http://maps.google.com/maps?file=api&v=2.x&key=abcdef" type="text/javascript"></script>
    <script src="cookies.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var map = null;
    var geocoder = null; 
    var session = null;

    function load() {
      session = getCookie('session');
      if (session != null && session != "") {
        url = "communitymap_checksession.php?session=" + session;
        GDownloadUrl(url, function(data, responseCode) {
          if (data.length > 0) {
            document.getElementById("message").innerHTML = "Welcome " + data;
            document.getElementById("content").style.display = "block";
            map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
            geocoder = new GClientGeocoder();
          }
        });
      } else {
        document.getElementById("message").innerHTML = "Error: Not logged in.";
      }
    }

    function addLocation() {
      var place = document.getElementById("place").value;
      var lat = document.getElementById("lat").value;
      var lng = document.getElementById("lng").value;

      var url = "communitymap_addlocation.php?session=" + session + "&place=" + place +
                "&lat=" + lat + "&lng=" + lng;
      GDownloadUrl(url, function(data, responseCode) {
        GLog.write(data);
        if (data.length > 0) {
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point, {draggable:true});
              document.getElementById("lat").value = marker.getPoint().lat().toFixed(6);
              document.getElementById("lng").value = marker.getPoint().lng().toFixed(6);

              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                document.getElementById("lat").value = marker.getPoint().lat().toFixed(6);
                document.getElementById("lng").value = marker.getPoint().lng().toFixed(6);
	      });
            }
          }
        );
      }
    }
    //]]>

    </script>

  </head>

  <body onload="load()" onunload="GUnload()">
   <div id="message"></div>
   <div id="content" style="display:none">

   <form action="#" onsubmit="showAddress(this.address.value); return false">
        <p>
        <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
        <input type="submit" value="Geocode!" />

    </form>
      </p>

      <div id="map" style="width: 500px; height: 300px"></div>
 
 	Place name: <input type="text" size="20" id="place" value="" />
	<br/>
 	Lat: <input type="text" size="20" id="lat" value="" />
	<br/>

 	Lng: <input type="text" size="20" id="lng" value="" />

        <br/>
	<input type="button" onclick="addLocation()" value="Add a location" />
    </form>
    </div>

  </body>
</html>

মানচিত্র তৈরি করা হচ্ছে

যেহেতু আপনি প্রথম ধাপে অবস্থানের ওয়ার্কশীট সর্বজনীন করেছেন, সেগুলির একটি মানচিত্র তৈরি করার জন্য কোনও সার্ভার-সাইড প্রোগ্রামিংয়ের প্রয়োজন নেই৷ আসলে, কোন প্রোগ্রামিং এর প্রয়োজন নেই। আপনি এই স্প্রেডশীট -> ম্যাপ উইজার্ড ব্যবহার করতে পারেন এবং এটি মানচিত্রের জন্য প্রয়োজনীয় সমস্ত কোড তৈরি করবে। উইজার্ড একটি স্ক্রিপ্ট ট্যাগ যুক্ত করার মাধ্যমে পৃষ্ঠায় ওয়ার্কশীট এন্ট্রিগুলি ডাউনলোড করে যা ফিডের জন্য JSON আউটপুটকে নির্দেশ করে এবং একটি কলব্যাক ফাংশন নির্দিষ্ট করে যা JSON ডাউনলোড করার পরে কল করা হয়। আরও তথ্য এখানে পাওয়া যায়।

এটি করার জন্য নমুনা HTML কোড এখানে উপলব্ধ: mainmap.htm । একটি স্ক্রিনশট নীচে দেখানো হয়েছে:

উপসংহার

আশা করি, এখন আপনার সার্ভারে আপনার নিজস্ব ব্যবহারকারী-অবদানকৃত মানচিত্র সিস্টেম চলছে। এই নিবন্ধটি এই সিস্টেমের প্রয়োজনীয় দিকগুলির জন্য প্রয়োজনীয় খুব মৌলিক কোড প্রদান করে, কিন্তু এখন আপনি Zend স্প্রেডশীট লাইব্রেরির সাথে পরিচিত, আপনার নির্দিষ্ট প্রয়োজন মেটাতে সিস্টেমটি প্রসারিত করতে সক্ষম হওয়া উচিত। আপনি যদি পথের মধ্যে ত্রুটির সম্মুখীন হয়ে থাকেন, মনে রাখবেন আপনি ডিবাগিংয়ের জন্য PHP-এ echo কমান্ড বা JavaScript-এ Map API-এর GLog.write() ব্যবহার করতে পারেন এবং আপনি সর্বদা মানচিত্র API বা স্প্রেডশীট API বিকাশকারী ফোরামে পোস্ট করতে পারেন অতিরিক্ত সাহায্য।