Karem Mohammed2 نشر 19 أكتوبر 2022 أرسل تقرير مشاركة نشر 19 أكتوبر 2022 اريد عمل زر إشعارات يظهر بخارجه رقم الرسائل التي لم أراها وعندما افتحه تظهر جميع رسائل الموجودة بقاعدة البيانات اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmed Sadek Elamine Touahria نشر 19 أكتوبر 2022 أرسل تقرير مشاركة نشر 19 أكتوبر 2022 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي عبد محسن نشر 19 أكتوبر 2022 أرسل تقرير مشاركة نشر 19 أكتوبر 2022 تتألف خاصية الإشعارات من عدة مستلزمات يجب توفرها في الواجهتين الأمامية والخلفية. ففي الواجهة الخلفية 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> ... اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Karem Mohammed2
اريد عمل زر إشعارات يظهر بخارجه رقم الرسائل التي لم أراها وعندما افتحه تظهر جميع رسائل الموجودة بقاعدة البيانات
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.