v2.5.2
Giriş yap

PHP Beğen Butonu Yapma

emrylmz
245 defa görüntülendi ve 1 kişi tarafından değerlendirildi

PHP ile gelen ziyaretçilerin çerez bilgilerini kullanarak Prototürk sitesindeki gibi beğen özelliğini nasıl yapabilirim?

ebykdrms
104 gün önce

Bir post'u beğenmek için kullanıcının oturum açması gerekir.
Oturum açmış kullanıcının verileri elinde olduğu için çerez kullanmaya gerek kalmaz.
Eğer session yoluyla oturum açıyorsan kullanıcının verilerine backend'den ulaşabilirsin.
Yani frontend tarafında sana tek gereken, hangi id'li post'un beğenildiği.
Bunu da beğen butonuna bir attribute ekleyerek tutabilirsin. Örneğin:

<button class="comment-like" data-comment-id="<?=$commentId?>">
    Beğen (<?=$commentLikeCount?>)
</button>

Bu butona basıldığında veritabanına kayıt için bir istek atman gerekecek.

const buttons = document.querySelectorAll('.comment-like');

// Her bir beğen butonuna click olay dineliycisi
buttons.forEach(button => {
    button.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        fetch('https://sitem.com/api/likecomment', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ commentId: commentId })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
});

Tabi bu "https://sitem.com/api/likecomment&quot; isteğini yakalayacak bir sayfa da lazım.
Bunun için de sitenin kök klasörüne api klasörü altına likecomment klasörü altına index.php dosyası oluşturmak lazım.

<?php // api/likecomment

// Bu sayfamız yalnızca POST metoduyla gelen isteklere yanıt verecek. 
// GET, PUT, DELETE gibi metodlarla gelen istekleri engelliyorum.
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    header("HTTP/1.0 404 Not Found");
    exit("Page not found.");
}

function jsonResponse($code, $result, $statusCode = 200) {
    header("Content-Type: application/json");
    http_response_code($statusCode);
    exit(json_encode(['code' => $code, 'statusCode' => $statusCode, 'result' => $result]));
}

$userId = $_SESSION['user_id'] ?? null;
if(!$userId) jsonResponse('UNAUTHORIZED', null, 401);

$data = json_decode(file_get_contents("php://input"), true);
$commentId = $data['commentId'] ?? null;
if(!$commentId) jsonResponse('MISSING_PARAMETER', null, 400);

// Veritabanı bağlantısı ile ilgili yorumun beğeni sayısının 1 artırılması işlemleri...

jsonResponse('OK', $newCommentLikeCount, 200);

Veritabanı işlemleriyle ilgili kısım için de ChatGPT'den bir örnek istedim:

try {
    // Veritabanı bağlantısı
    $pdo = new PDO("mysql:host=localhost;dbname=your_database_name", "username", "password");
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Kullanıcının bu yorumu daha önce beğenip beğenmediğini kontrol et
    $stmt = $pdo->prepare("SELECT * FROM comment_likes WHERE user_id = :userId AND comment_id = :commentId");
    $stmt->execute([':userId' => $userId, ':commentId' => $commentId]);

    if ($stmt->rowCount() > 0) {
        // Kullanıcı daha önce beğenmiş, beğeniyi geri al (LIKE_COUNT azalt)
        $pdo->beginTransaction();
        $stmt = $pdo->prepare("UPDATE COMMENTS SET LIKE_COUNT = LIKE_COUNT - 1 WHERE id = :commentId");
        $stmt->execute([':commentId' => $commentId]);

        // comment_likes tablosundan beğeni kaydını sil
        $stmt = $pdo->prepare("DELETE FROM comment_likes WHERE user_id = :userId AND comment_id = :commentId");
        $stmt->execute([':userId' => $userId, ':commentId' => $commentId]);
        $pdo->commit();

        // Yeni beğeni sayısını alın
        $stmt = $pdo->prepare("SELECT LIKE_COUNT FROM COMMENTS WHERE id = :commentId");
        $stmt->execute([':commentId' => $commentId]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        $newCommentLikeCount = $row['LIKE_COUNT'];

        jsonResponse('OK', $newCommentLikeCount, 200); // Yanıtı döndür

    } else {
        // Kullanıcı daha önce beğenmemiş, beğeniyi ekle (LIKE_COUNT artır)
        $pdo->beginTransaction();
        $stmt = $pdo->prepare("UPDATE COMMENTS SET LIKE_COUNT = LIKE_COUNT + 1 WHERE id = :commentId");
        $stmt->execute([':commentId' => $commentId]);

        // comment_likes tablosuna yeni beğeni kaydı ekle
        $stmt = $pdo->prepare("INSERT INTO comment_likes (user_id, comment_id) VALUES (:userId, :commentId)");
        $stmt->execute([':userId' => $userId, ':commentId' => $commentId]);
        $pdo->commit();

        // Yeni beğeni sayısını alın
        $stmt = $pdo->prepare("SELECT LIKE_COUNT FROM COMMENTS WHERE id = :commentId");
        $stmt->execute([':commentId' => $commentId]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        $newCommentLikeCount = $row['LIKE_COUNT'];

        jsonResponse('OK', $newCommentLikeCount, 200); // Yanıtı döndür
    }
} catch (PDOException $e) {
    $pdo->rollBack(); // Hata durumunda işlemleri geri al
    jsonResponse('DATABASE_ERROR', $e->getMessage(), 500);
}

Yine ChatGPT'den aldım: Bu php sayfasının dönüşlerine göre yanıt verebilecek şekilde frontend'de oluşturduğum js kodunu da güncellemek gerek:

const buttons = document.querySelectorAll('.comment-like');

// Her bir beğen butonuna click olay dinleyicisi
buttons.forEach(button => {
    button.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        
        // Fetch ile POST isteği gönder
        fetch('https://sitem.com/api/likecomment', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ commentId: commentId })
        })
        .then(response => {
            if (!response.ok) {
                // Hata durumunda status code'u kontrol et ve cevabı JSON olarak dön
                return response.json().then(errorData => {
                    throw new Error('Request failed with status ' + response.status);
                });
            }
            return response.json(); // Başarılı istek, JSON cevabı dön
        })
        .then(data => {
            console.log('Success:', data);
            
            // Beğeni sayısını başarılı istek sonrası butonun text'ine güncelle
            if (data.code === 'OK') {
                const newLikeCount = data.result;
                this.textContent = `Beğen (${newLikeCount})`;
            } else {
                console.error('Error: Unexpected response code');
            }
        })
        .catch(error => {
            // Hata yönetimi
            console.error('Error:', error);
            alert('Bir hata oluştu: ' + error.message);
        });
    });
});

Umarım örnek olarak yardımcı olur :)