برمجة مواقع الويب باستخدام واجهات Cgi ولغة سي ++, الدرس الثالث

والصلاة والسلام على اشرف الخلق سيدنا محمد وعلى اله وصحبه اجمعين .

نواصل حديثنا الذي بدئناه حول برمجة مواقع الويب باستخدام واجهات Cgi و لغة سي ++ من خلال الدرس الاول و الدرس الثاني

*****************************************************************

اولا : التعامل مع النماذج باستخدام Post

سنقوم الان بتطبيق البرنامج السابق لكن هذه المرة باستخدام Post مع النماذج .

اولا: انشاء النماذج

نقوم بإنشاء النماذج ولكن هذه المرة نغير الخاصية method إلى post .

   cout << "<p>Enter your name:</p>"
		<< "<form method = \"post\" action = \"3.cgi\">"
		<< "<input type = \"text\" name = \"n\" />"
		<< "<input type = \"submit\" value = \"Print\" />"
		<< "</form>";

نستخدم cin.read لقراءة المدخلات بالعدد الذي يحمله المتغير CONTENT_LENGTH

   char post[ 50 ] = "";
   int Length = 0;

   if ( getenv( "CONTENT_LENGTH" ) )
	  Length = atoi( getenv( "CONTENT_LENGTH" ) );
	  cin.read( post, Length );
string str = post;

ثانيا : نختبر الحالات :

الحالة الاولى اذا كانت هناك مدخلات , وعندها :

نحدد بداية الاسم وهو الطلب المرسل بعد حرفين "=n" في المتغير x

وبما ان المدخلات يتم صياغتها على شكل ازواج تفصل بينها العلامة "&" ستكون نهاية الاسم من بين الطلب إلى ماقبل العلامة & بحرف .

	  int x = str.find_first_of( "n=" ) + 2;

	  int y = str.find_first_of( "&" ) - 1;

لتصبح النتيجة التي تمثل لنا الاسم بالشكل التالي :

	  name = str.substr( x,y - x);

بعدها يمكن طباعة الاسم كما قمنا بالمثال السابق

cout << "
Your name is: " << name << "";

لتصبح النتيجة النهائية بالشكل التالي :

//first
   char post[ 50 ] = "";
   int Length = 0;

   if ( getenv( "CONTENT_LENGTH" ) )
	  Length = atoi( getenv( "CONTENT_LENGTH" ) );
	  cin.read( post, Length );
	string str = post;
//Second
	string name = "";

   if ( Length > 0 ) {
	  int x = str.find_first_of( "n=" ) + 2;

	  int y = str.find_first_of( "&" ) - 1;

	  name = str.substr( x,y - x);

	  if ( name == "" )
		 cout << "<p>Please enter your name.</p>";


	  else
		 cout << "<p>Your name is: " << name << "</p>";

   } 

   else
	  cout << "<p>Please enter your name.</p>";

   cout << "</body></html>";

************************************************************

Cookies

الكثير منا إن لم يكن جميعنا يتعامل يوميا مع الكوكيز في المواقع الديناميكية لذا اصبح هذا المفهوم جزءا اساسيا في المواقع التي نتفاعل بها مع المستخدم ونراقب تحركاته بالموقع , لذا سنقوم الان بالتحدث عن هذا المفهوم في سياق مانتحدث عنه في موضوعنا .

سنقوم اولا وقبل التحدث عن الكوكيز , في تصميم صفحة بلغة html تحتوي على نموذج يتفاعل مع المستخدم , ولقد قمت بتجهيز صفحة بالاستعانة بـبرنامج FrontPage تحتوي على نموذج بحيث يطلب ادخال اسم المستخدم وبريده الالكتروني لتطبيق مثالنا عليها , هذا وقد قمت بإرفاقها بين المرفقات .

html.zip

لاحظ عزيزي القارئ بأنني قمت بتعديل الخاصية action في النموذج إلى

<form method = "post"
		 action = "http://localhost/cgi-bin/write.cgi">

و write.cgi هو الـ Cgi الذي سنقوم بكتابته بعد قليل ليتعامل مع البيانات التي يدخلها المستخدم .

اولا : كتابة الكوكيز .

اول مانقوم به هو تحديد تاريخ معين لنهاية الكوكيز في كمبيوتر المستخدم expires , على سبيل المثال :

   string expires = "Sunday, 12-APRIL-09 20:00:00 GMT";

بعدها نحدد الطول من المتغير CONTENT_LENGTH كما تعلمنا سابقا :

  
	char query[ 200 ] = "";
	string data = "";
 if ( getenv( "CONTENT_LENGTH" ) ) {
	  Length = atoi( getenv( "CONTENT_LENGTH" ) );

بعد ذلك نستقبل الاستعلام بواسطة الدخل وبالطول الذي اوجدناه مسبقا :

  

   cin.read( query, Length );
   data = query;

كان لدينا من خلال النموذج الذي قمنا بتصميمه سابقا اسم المستخدم وبريده الالكتروني , والان نقوم باختطاف هذه البيانات من خلال الاستعلام الموجود لدينا واول مانبدأ به هو تحديد موقع البيانات :

	  string name = "";
	  string email = "";

	  int NameStart = data.find( "name=" ) + 5;
	  int NameEnd = data.find( "&" );

	  int EmailStart = data.find( "email=" ) + 6;
	  int EmailEnd = data.find( "&button" );

ولتتضح لك المفاهيم اكثر أنظر إلى هذا الاستعلام :

name=UserName&email=UserEmail&button=%CF%CE%DC%DC%DC%DC%DC%DC%DC%E6%E1

اعتقد بأن الامور اصبحت واضحة الان .

بعد ان حصلنا على مواقع البيانات نقوم الان بوضع البيانات في متغيرات :

	  name = data.substr( NameStart, NameEnd - 
		 NameStart );

	  email = data.substr( EmailStart, EmailEnd - 
			EmailStart );

الان وبعد ان اعدينا كل مانحتاجه نقوم بضبط الكوكيز .

	  cout << "Set-cookie: Name=" << name << "Email:"
		   << email << "; expires=" << expires << "; path=\n";

الان لم يتبقى لنا إلا اكمال الجمل الاساسية والتي نكتبها في كل مثال :

   cout << "Content-type: text/html\n\n";

   cout << "<?xml version = \"1.0\"?>"
		<< "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 "
		<< "Transitional//EN\" \"http://www.w3.org/TR/xhtml1"
		<< "/DTD/xhtml1-transitional.dtd\">";

   cout << "<html xmlns = \"http://www.w3.org/1999/xhtml\">"
		<< "<head><title>Cookie</title></head>"
		<< "<body>";

الان وقبل ان نكتب كود اغلاق الوسوم المفتوحة , استأذنك اخي القارئ في كتابة بعض الاسطر التي تتفاعل مع المستخدم بشكل جيد بالاضافة إلى التطرق لموضوعنا القادم .

   cout << "<p>شكرا لك, تم تسجيل دخولك"<< "<p>لاستعراض بياناتك المسجلة لدينا <a href=\"/cgi-bin/read.cgi\">"
		<< "انقر هنا</a> </p>"
		<< "</body></html>";

ثانيا : قراءة الكوكيز المسجلة .

هل لاحظت عزيزي القارئ السطر التالي :

 <a href=\"/cgi-bin/read.cgi\">

كنا نخبر المستخدم بأنه بالامكان الاطلاع على بياناته المسجلة لدينا في الكوكيز من خلال النقر على هذا الارتباط التشعبي

والذي يقوم باستدعاء الـread.cgi وهو ماسنقوم بكتابته الان :

بداية نقوم بالتقاط البيانات الموجودة بالمتغير HTTP_COOKIE

   char *data = getenv( "HTTP_COOKIE" );

   string str = data;

بعدها نقوم كما قمنا بالمرة السابقة بتحديد البيانات المراد عرضها من خلال تحديد مواقع البيانات كلا على حده :

   int nameStart = str.find( "Name=" ) + 5;
   int nameEnd = str.find( "Email:" );

   int emailStart = str.find( "Email:" ) + 6;

وهي كما يتضح في هذا المثال :

Name=UserNameEmail:UserEmail

الان وبعد ان حددنا مواقع البيانات نقوم بفصلها بمتغيرات خاصة :

   string name =name = str.substr( nameStart, nameEnd - 
	  nameStart );

   string email = str.substr( emailStart );

بعد ذلك نكرر الاسطر التي تعلمناها في الدروس السابقة :

   cout << "Content-type: text/html\n\n";

   cout << "<?xml version = \"1.0\"?>"
		<< "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 "
		<< "Transitional//EN\" \"http://www.w3.org/TR/xhtml1"
		<< "/DTD/xhtml1-transitional.dtd\">";

   cout << "<html xmlns = \"http://www.w3.org/1999/xhtml\">"
		<< "<head><title>Cookies</title></head>"
		<< "<body>";

اخيرا تأتي مرحلة عرض البيانات المسجلة بالكوكيز للمستخدم .

	  cout << "<p>بياناتك المسجلة لدينا"<< " </p>"
		   << "<p>Name: "  << name  << "<br/></p>"
		   << "<p>Email: "   << email   << "<br/></p>";

اغلاق الوسوم المفتوحة :

   cout << "</body></html>";

هكذا نكون قد انتهينا من درسنا الثالث , اسأل المولى القدير ان اكون قد وفقت في طرحي وتقديمي لهذا الدرس على امل ان نكمل مستقبلا ان شاء الله بقية الامثلة والدروس.

تقبلوا تحياتي . . .