Member Avatar for tokick4

Can anyone help me with constructing navigation tab notification, something that shows the total notifications like new event that was just inserted into the database and when clicking on the tab for the event the notification numbers goes away. I have tried Google for hours but I dont know if I am even searching the right topic.

  • 2 Contributors
  • 2 Replies
  • 123 Views
  • 56 Minutes Discussion Span
  • Latest Post Latest Post by tokick4

Dani AI

Generated

A simple, reliable pattern works well here: keep notifications in a table with a per-user "read" flag, expose a small JSON endpoint that returns the unread count (and optionally the items), and expose a second endpoint to mark items read. Front-end code requests the count periodically (or listens for push events) and updates a small badge in the nav; when the user opens the event tab, call the mark-read endpoint and clear the badge locally.

The database model: an id, recipient_user_id, type, payload, created_at, is_read boolean (or read_at timestamp). Queries are just "COUNT(*) WHERE recipient_user_id = ? AND is_read = 0" and an UPDATE to set is_read = 1 for that user. Keep all queries scoped to the authenticated user.

Example server endpoint (PHP, return JSON):

<?php
header('Content-Type: application/json');
session_start();
// assume $_SESSION['user_id'] exists and $pdo is a PDO instance
$stmt = $pdo->prepare('SELECT COUNT(*) FROM notifications WHERE recipient_user_id = ? AND is_read = 0');
$stmt->execute([$_SESSION['user_id']]);
$count = (int)$stmt->fetchColumn();
echo json_encode(['count' => $count]);

Example front-end (jQuery style): poll every 20–30s, update badge, and on tab click mark read and hide badge.

function refreshCount(){
  $.getJSON('/notifications/count.php', function(data){
    $('#events-tab .badge').text(data.count).toggle(!!data.count);
  });
}
setInterval(refreshCount, 30000);
refreshCount();

$('#events-tab').on('click', function(){
  $.post('/notifications/mark-read.php', function(){ $('#events-tab .badge').hide(); });
});

Notes and troubleshooting: avoid aggressive polling (use WebSockets or SSE for real-time), include authentication and CSRF protection on write endpoints, set JSON headers to avoid caching, ensure SQL WHERE uses the session user id, and check the browser Network tab for failing requests. this gives a minimal, extensible starting point; ’s question about backend/client choices is covered by the server/client endpoints above.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Do you have any code to start with, at least the navigation portion. Some information about what you are using for hte back-end would be helpful... asp.net, php, jsp?

also, client side stuff you are considering... javascript, jquery, ajax?

Member Avatar for tokick4

I have not started it is php on the back end, and js, jq or ajax on the front. I have no code that I have started with yet I have been looking for a place to start. I have an existing application that I want to adapt.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.