كيفية عمل عداد زوار خاص بك بواسطة PHP

visitor-counter-icon

تخيل لو انك تريد عمل عداد للزوار في موقعك او مدونتك !

الامر سهل فهناك المئات من المواقع التي تقدم عداد زوار مجاني يحتوي على روباط اعلانية و غيرها من الامور التي تجهلها…

بالنسبة لي ، لن اكون مقتنعا ان اضع عداد للزوار يرتبط بمواقع اخرى لا اعلم عنها شيئا و اثق بها في موقعي ، وبجانب هذا ، سأكون اكثر سعادة ان اصنع عداد الزوار الخاص بي و اعرف كيف يعمل و لا اكون في حاجة الى مواقع اخرى…


هنا سيكون العمل النهائي لعداد الزوار بعد ان ننتهي منه :

Hit counter

ملاحظة : هذا العداد في الاعلى يعمل بشكل جيد و تستطيع تجربته عن طريق تغيير المتصفح او فتح الموضوع من جهاز اخر.


 حساب جميع الزوار !

لعمل هذا ، سنحتاج طريقة لحساب ( الرقم ) الذي يمثل جميع الزيارات التي تاتي للموقع ، ربما سنحتاج الى قاعدة بيانات ليتم خزن هذا الرقم ، لكن هذه الطريقة ستكون معقدة قليلا و مطوله ، لهذا سوف اقوم في هذا الشرح باستخدام ملف نصي اعتيادي Text File

سنحتاج ايضا الى طريقة لتعريف الزيارة المفردة لكل زائر للموقع ، لاننا نريد ان نحسب كل زائر يقوم بالزيارة وليس كل عملية تصفح للموقع ، اي ان العداد يجب ان يقوم بزيادة 1 كل مرة يقوم فيها زائر جديد بفتح الموقع فقط ، وليس كل مره يعمل فيها ريفريش او يفتح صفحة جديدة …
لهذا الغرض سوف نستخدم ال Session variable

<?php
session_start();
$counter_name = "counter.txt";
 
// هنا نرى اذا كان الملف موجودا ام لا ، واذا لم يكن موجودا نخلق ملفا جديدا و نضع العدد مساويا لصفر
if (!file_exists($counter_name)) {
  $f = fopen($counter_name, "w");
  fwrite($f,"0");
  fclose($f);
}
 
// هنا نقرا قيمة العداد
$f = fopen($counter_name,"r");
$counterVal = fread($f, filesize($counter_name));
fclose($f);
 
// هل تم حساب الزائر في هذا ال Session ?
// اذا لا ، نقوم بزيادة العداد 1
if(!isset($_SESSION['hasVisited'])){
  $_SESSION['hasVisited']="yes";
  $counterVal++;
  $f = fopen($counter_name, "w");
  fwrite($f, $counterVal);
  fclose($f); 
}
 
echo "You are visitor number $counterVal to this site";

كما تلاحظون ، هنا استخدمنا دوال الملفات في لغة ال بي اج بي PHP`s File system functions من اجل خلق ، قراءة ، تعديل ، و من ثم غلق الملف النصي ، كذلك فحصنا ال  Session Variable  الذي تكلمنا عنه قبل قليل اذا كان قد تم اعتماده قبيل زيادة العداد بمقدار 1 ، لحد الان الامور سهلة وجيدة جدا…

اظهار الرقم كصورة في عداد الزوار !

هنا سنحتاج الى قراءة الرقم في الملف الذي قمنا بتخزين عدد الزوار فيه ، ومن ثم اظهاره في المتصفح على هيئة صورة وليس كرقم فقط.

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

  1. تزحيف الرقم بواسطة الاصفار الى خمسة مراتب ، اي انه اذا اردنا اظهار الرقم 1 سنقوم بجعله 00001
  2. نفصل رقم العداد الى مصفوفة من العناصر المتفرقة ، وهذا يعني ان الرقم “000001” سيكون [“1”, “0”, “0”, “0”, “0”]
  3. نستخدم الدالة imagecreatfrompng الموجودة في لغة ال PHP من اجل عمل مرجع الى ستة صور PNG ( واحدة تمثل خلفية الصورة ، و خمسة صور صغيرة تمثل 5 ارقام تابعة للعداد )
  4. استخدام الدالة imagecopymerge الموجودة في لغة PHP من اجل دمج الصور الستة في صورة واحدة.
  5. اظهار الصورة النهائية في المتصفح ، ومن ثم تحرير و مسح الصورة من الذاكرة.

الكود الذي سيقوم بعمل النقاط الخمسة اعلاه سيكون معقدا لعض الشئ ، لذلك ساقوم بتفصيله وشرحه خطوة خطوة …

الكود ادناه سيقوم بعمل النقطتين 1 و 2 من اعلاه …

$counterVal = str_pad($counterVal, 5, "0", STR_PAD_LEFT);
$chars = preg_split('//', $counterVal);

قبل ان اشرع عملية التلاعب بالصور ، نحتاج الى صور جاهزة للارقام من اجل استعمالها ، تستطيع ان تبحث في الجوجل وستظهر لك نتائج كثيرة جدا اذا بحثت عن كلمة Number icons ، في حالتي استخدمت احدى هذه النتائج و اليكم مثال من احدى الارقام :

dy-otto-5

في عملية التحضير قبل اخراج الصورة النهائية لصورة العداد ، قمت بعمل الخطوات التالية :

  1. عملت صورة شفافة التي ستكون كخلفية للارقام وسميتها canvas.png وجعلت ابعادها 296*75 PX
  2. قمت بتصغير جميع الصور التي تمثل الارقام والتي قمت بتحميلها من النت مسبقا الى الحجم التالي  56*75 PX وقمت بتسمية كل صورة بأسم الرقم الذي تمثله ، هذه الصور سيتم وضعها على صورة الخلفية canvas.png كما في الصورة التالية :

convas-example

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

استطيع الان استخدام الدالة imagecreatefrompng من اجل عمل مرجع للصورة الخلفية وكذلك لبقية الصور التي تمثل الارقام ، وخزنها في عناصر المصفوفة  char$

$im = imagecreatefrompng("canvas.png");
$src1 = imagecreatefrompng("$chars[1].png");
$src2 = imagecreatefrompng("$chars[2].png");
$src3 = imagecreatefrompng("$chars[3].png");
$src4 = imagecreatefrompng("$chars[4].png");
$src5 = imagecreatefrompng("$chars[5].png");

بعدها سنحتاج الى وضع صور الارقام المنفردة على صورة الخلفية canvas.png  ولهذا سنستخدم الدالة imagecopymerge ، المعطيات التي تستخدمها هذا الدالة اي ال Parameters هي كالتالي :

  • رابط الصورة النهائية.
  • رابط صورة المصدر.
  • الاحداثي x لموقع الصورة النهائية.
  • الاحداثي y لموقع الصورة النهائية.
  • الاحداثي x لموقع الصورة المصدر.
  • الاحداثي y لموقع الصورة المصدر.
  • عرض صورة المصدر.
  • ارتفاع صورة المصدر.
  • PCT والذي يمكن ان يتم تركه للقيمة 100.

وكالتالي :

imagecopymerge($im, $src1, 0, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src2, 60, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src3, 120, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src4, 180, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src5, 240, 0, 0, 0, 56, 75, 100);

و ايضا سنحتاج الى هذا الكود من اجل ارسال الصورة النهائية للمتصفح و حذف الصورة من الذاكرة.

header('Content-Type: image/png');
echo imagepng($im);
imagedestroy($im);

 

اخيرا ساقوم بادراج الكود الكامل الذي سنضعه في ملف واحد ونسميه كمثال counter.php

<?php
session_start();
$counter_name = "counter.txt";
 
if (!file_exists($counter_name)) {
  $f = fopen($counter_name, "w");
  fwrite($f,"0");
  fclose($f);
}
 
$f = fopen($counter_name,"r");
$counterVal = fread($f, filesize($counter_name));
fclose($f);
 
// Has visitor been counted in this session?
// If not, increase counter value by one
if(!isset($_SESSION['hasVisited'])){
  $_SESSION['hasVisited']="yes";
  $counterVal++;
  $f = fopen($counter_name, "w");
  fwrite($f, $counterVal);
  fclose($f); 
}
 
$counterVal = str_pad($counterVal, 5, "0", STR_PAD_LEFT);
$chars = preg_split('//', $counterVal);
 
$im = imagecreatefrompng("canvas.png");
$src1 = imagecreatefrompng("$chars[1].png");
$src2 = imagecreatefrompng("$chars[2].png");
$src3 = imagecreatefrompng("$chars[3].png");
$src4 = imagecreatefrompng("$chars[4].png");
$src5 = imagecreatefrompng("$chars[5].png");
 
imagecopymerge($im, $src1, 0, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src2, 60, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src3, 120, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src4, 180, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src5, 240, 0, 0, 0, 56, 75, 100);
 
header('Content-Type: image/png');
echo imagepng($im);
imagedestroy($im);
?>

بعد اكمال جميع الخطوات اعلاه ، نكون قد اتممنا جميع الخطوات ولم يتبق سوى اظهار الصورة النهائية في المتصفح لكي يتم عرضها.

سنستخدم الكود التالي ونضعه في اي مكان في الموقع او المدونة لكي يتم عرض عداد الزوار بصورته النهائية …

<div class="visitor-count">Number of visitors to this page so far:</div>
<img alt="Hit counter" src="counter.php" />

وبهذا نكون قد انتهينا من شرح موضوع عمل عداد للزوار خاص بك عن طريق لغة PHP

تستطيعون تنزيل الملفات الكاملة لهذا المشروع من صور و اكواد ، بشكل جاهز للتحميل من هنا 

كلمة السر للملف المضغوط klawat.com


بواسطة : مصطفى الفارس

عن مصطفى الفارس

مهندس علماني من الطبقة الوسطى أؤمن بأن لي مطلق الحرية في التفكير والنقد وعدم السماح لما هو مقدس عند البعض بالتحكم في مصيري. في اوقات فراغي أكتب بعض المواضيع و اترجم بعضها و أنشرها في هذه المدونة وغيرها من الاماكن. للتواصل يمكن استعمال البريد الالكتروني وشبكة التويتر.

رأيك مهم - اترك تعليق

%d مدونون معجبون بهذه: