PHP'de sayfa içinde sayfa çağırdımda Tippy.js çalışmıyor
Merhaba, movie.php sayfamda sayfa ilk başladığında 20 yorum ve sayfa kaydırıldıkça yeni yorumlar eklenecek şekilde düzenledim. Php bilmediğim için ChatGPT ile yapıyorum ama bazen takılıyor ve yapamıyor.
Tüm kodlar çok fazla uzun olduğu için sadece belli yerleri atacağım.
Aşağıdaki kodda movie.php dosyasındaki yorumlar kısmım var.
<!-- Yorumlar -->
<div class="mb-8 comments-container">
<h2 class="text-2xl font-semibold mb-4">Yorumlar</h2>
<?php if ($userLoggedIn) : ?>
<form action="add_comment.php" method="POST" class="mb-4">
<input type="hidden" name="movie_id" value="<?= htmlspecialchars($movieId); ?>">
<textarea name="content" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Yorumunuzu buraya yazın..." required></textarea>
<button type="submit" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300 focus:outline-none">Yorum
Ekle</button>
</form>
<?php else : ?>
<p class="mb-4"><a href="login.php" class="text-blue-500 hover:underline">Giriş yapın</a> veya <a href="register.php" class="text-blue-500 hover:underline">kaydolun</a> yorum yapmak için.</p>
<?php endif; ?>
<?php foreach ($comments as $comment) : ?>
<div class="bg-white shadow-md rounded-lg p-4 mb-4">
<div class="flex items-center mb-2">
<img src="<?= htmlspecialchars($comment['profile_picture']); ?>" alt="<?= htmlspecialchars($comment['username']); ?>" class="w-10 h-10 rounded-full mr-2">
<div>
<div class="flex items-center">
<a href="profile.php?user_id=<?= $comment['user_id']; ?>" class="font-bold"><?= htmlspecialchars($comment['username']); ?></a>
<p class="text-blue-500/50 bg-blue-100 rounded px-2 border border-blue-500/10 text-sm ml-1">
<?= $comment['comment_count']; ?> yorum</p>
<?php
// Check if the user has badges and display them
$userBadges = getUserBadges($comment['user_id']);
foreach ($userBadges as $badge) : ?>
<img src="<?= htmlspecialchars($badge['badge_icon']); ?>" alt="<?= htmlspecialchars($badge['badge_name']); ?>" data-tippy-content="<?= htmlspecialchars($badge['badge_description']); ?>" class="w-5 h-5 ml-2 cursor-pointer">
<?php endforeach; ?>
</div>
<p class="text-gray-500 text-sm">
<?= date('d F Y - H:i', strtotime($comment['timestamp'])); ?></p>
</div>
</div>
<p><?= nl2br(htmlspecialchars($comment['content'])); ?></p>
<?php if ($userLoggedIn && $_SESSION['user_id'] === $comment['user_id']) : ?>
<div class="mt-2">
<a href="edit_comment.php?comment_id=<?= $comment['id']; ?>" class="text-blue-500 hover:underline">Düzenle</a> |
<a href="movie.php?id=<?= $movieId; ?>&action=delete&comment_id=<?= $comment['id']; ?>" class="text-red-500 hover:underline" onclick="return confirm('Yorumu silmek istediğinizden emin misiniz?')">Sil</a>
</div>
<?php endif; ?>
<?php if ($comment['edited'] == 1) : ?>
<p class="text-xs text-gray-400 mt-2">Bu yorum düzenlendi.</p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<div id="comments-container">
<!-- Buraya yüklenen yorumlar eklenecek -->
</div>
Bu da load_comments.php dosyam. Yeni eklenen yorumları AJAX ile alıyor sanırım fazla bilgim yok.
<?php
session_start();
// Veritabanı bağlantısı ve diğer gerekli dosyaları dahil etme
require 'db.php'; // Veritabanı bağlantısı
require 'tmdb.php'; // TMDb API işlevleri
// Fonksiyon: Kullanıcı rozetleri
function getUserBadges($userId)
{
global $pdo;
$stmt = $pdo->prepare("SELECT * FROM badges WHERE user_id = :user_id");
$stmt->execute(['user_id' => $userId]);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
// Sayfa numarası ve yüklenecek yorum sayısını al
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? (int)$_GET['page'] : 1;
$commentsPerPage = 20; // Her sayfada gösterilecek yorum sayısı
// Başlangıç noktasını hesapla
$start = ($page - 1) * $commentsPerPage;
// Yorumları ve kullanıcı başına toplam yorum sayısını getirme
$stmt = $pdo->prepare("
SELECT
comments.id,
users.id AS user_id,
users.username,
users.profile_picture,
users.verified,
comments.content,
comments.timestamp,
comments.edited,
(SELECT COUNT(*) FROM comments WHERE user_id = users.id) AS comment_count
FROM comments
JOIN users ON comments.user_id = users.id
WHERE comments.movie_id = :movie_id
ORDER BY comments.timestamp DESC
LIMIT :start, :commentsPerPage
");
$stmt->bindValue(':movie_id', $_GET['id'], PDO::PARAM_INT);
$stmt->bindValue(':start', $start, PDO::PARAM_INT);
$stmt->bindValue(':commentsPerPage', $commentsPerPage, PDO::PARAM_INT);
$stmt->execute();
$comments = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yorumlar</title>
<!-- tippy.js ve CSS dosyalarını CDN'den ekleyin -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">
</head>
<body>
<div id="comments-container">
<?php foreach ($comments as $comment) : ?>
<?php
// Kullanıcı rozetlerini al
$userBadges = getUserBadges($comment['user_id']);
?>
<div class="bg-white shadow-md rounded-lg p-4 mb-4">
<div class="flex items-center mb-2">
<img src="<?= htmlspecialchars($comment['profile_picture']); ?>"
alt="<?= htmlspecialchars($comment['username']); ?>"
class="w-10 h-10 rounded-full mr-2">
<div>
<div class="flex items-center">
<a href="profile.php?user_id=<?= $comment['user_id']; ?>"
class="font-bold"><?= htmlspecialchars($comment['username']); ?></a>
<p class="text-blue-500/50 bg-blue-100 rounded px-2 border border-blue-500/10 text-sm ml-1">
<?= $comment['comment_count']; ?> yorum</p>
<?php foreach ($userBadges as $badge) : ?>
<img src="<?= htmlspecialchars($badge['badge_icon']); ?>"
alt="<?= htmlspecialchars($badge['badge_name']); ?>"
data-tippy-content="<?= htmlspecialchars($badge['badge_description']); ?>"
class="w-5 h-5 ml-2 cursor-pointer" data-tippy-placement="top">
<?php endforeach; ?>
</div>
<p class="text-gray-500 text-sm">
<?= date('d F Y - H:i', strtotime($comment['timestamp'])); ?></p>
</div>
</div>
<p><?= nl2br(htmlspecialchars($comment['content'])); ?></p>
<?php if ($_SESSION['user_id'] === $comment['user_id']) : ?>
<div class="mt-2">
<a href="edit_comment.php?comment_id=<?= $comment['id']; ?>"
class="text-blue-500 hover:underline">Düzenle</a> |
<a href="movie.php?id=<?= $_GET['id']; ?>&action=delete&comment_id=<?= $comment['id']; ?>"
class="text-red-500 hover:underline"
onclick="return confirm('Yorumu silmek istediğinizden emin misiniz?')">Sil</a>
</div>
<?php endif; ?>
<?php if ($comment['edited'] == 1) : ?>
<p class="text-xs text-gray-400 mt-2">Bu yorum düzenlendi.</p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<!-- tooltip.js dosyasını modül olarak yükleyin -->
<script src="tooltip.js" type="module"></script>
</body>
</html>
Bir de react örneği hazırladım. Herhangi bir html dosyasına yapıştırıp çalıştırabilirsin.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root" class="container"></div>
<script type="text/babel">
const { useState, useEffect } = React;
function App() {
const [users, setUsers] = useState([]);
const [userId, setUserId] = useState(1);
const [comments, setComments] = useState([]);
const handleUsers = async ()=>{
const result = await fetch("https://jsonplaceholder.typicode.com/users").then(d=>d.json())
setUsers(result);
};
const handleComments = async ()=>{
const result = await fetch(`https://jsonplaceholder.typicode.com/posts/${userId}/comments`).then(d=>d.json())
if(userId != users.length){
setComments([...comments, ...result]);
setUserId(prev=>prev+1);
}
}
useEffect(()=>{
handleUsers();
}, [])
return (
<div>
<ul>
{
comments.map((line,k)=>(
<li key={k}>{line.body}</li>
))
}
</ul>
<button onClick={handleComments}>Yükle</button>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />)
</script>
</body>
</html>