اذهب إلى المحتوى
  • 0

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

Karem Mohammed2

السؤال

Recommended Posts

  • 0

تتألف خاصية الإشعارات من عدة مستلزمات يجب توفرها في الواجهتين الأمامية والخلفية. ففي الواجهة الخلفية 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>
...
	
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...