عمل زر إشعارات باستخدام php

تتألف خاصية الإشعارات من عدة مستلزمات يجب توفرها في الواجهتين الأمامية والخلفية. ففي الواجهة الخلفية backend تحتاج إنشاء ألية لتوليد الإشعارات وحفظها وتعديل حالتها في قاعدة البيانات بالإضافة الى إرسالها الى المستخدمين المعنيين بها في الواجهة الأمامية ويمكنك على سبيل المثال لا الحصر إستعمال مكتبة socket.io للقيام بهذه المهمة. وفي الواجهة الامامية frontend تحتاج تصميم زر الإشعارات بواسطة HTML+CSS وبرمجة JavaScript لعمل التواصل مع الخدمة في backend ونفس سياق حديثنا عن socket.io نقوم بإستعمال الجزء المخصص للواجهة الامامية من هذه المكتبة. 

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

يمكنك الإستعانة بالمثال التالي كطريقة عمل لبناء الميزة المطلوبة في frontend

...
/* CSS  */
.notification { /* تنسيق زر الإشعارات */
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: red;
}

.notification .badge { /* تنسيق عدد الإشعارات */
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}

#list{ display:none; position:absolute; background-color:#ccc} /* الإشعارات لا تعرض حتى يضغط المستخدم على الزر*/ 
#container{ /* تنسيق الحافظة التي تجمع الزر والقائمة */
  position:relative;
}
...
	
<!-- HTML -->
...
<a onclick="showList()" href="#" class="notification"> <!-- العنصر الذي يقوم بدور الزر-->
  <span>إشعارات</span>
  <span id="count" class="badge">3</span> <!-- هنا نقوم بتعديل عدد الإشعارات من خلال جافاسكربت -->
</a>
	<ul id="list"> <!-- قائمة الإشعارات -->
   <li>إشعار تم تحميله مسبقاً</li>
</ul>
...

<script>
function showList(){ // تعريف دالة التحكم بعرض وإخفاء القائمة
  let list= document.getElementById("list");
  list.style.display==="none" ? list.style.display="block" : list.style.display="none"
}

const socket = io(); // تعريف السوكت

socket.on('notification', ({message}) => { // في كل مرة يصل فيها إشعار جديد تعمل هذه الدالة تلقائياً لإضافة الإشعار الجديد الى القائمة 
   let list= document.getElementById("list");
   let count= document.getElementById("count");
   let item= document.createElement("li") // إنشاء عنصر جديد وإضافة الإشعار له
   item.textContent=message
   list.appendChild(item) // إضافة الإشعار الى القائمة
   count.textContent= parseInt(count.textContent) + 1 // زيادة عدد الإشعارات
});

</script>
...