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>
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
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>
Tam doğru anlatabilir miyim bilmiyorum.
Php sunucu tarafında çalışıyor gelen istekleri alır ve çıktı verir.
Sayfa 1-20 arası yorum gösteriyor. Sayfa sonuna geldin 21-40 arasını otomatik eklemesini istersen Javascript ile sunucuya istek atıp gelen değerleri ekrana bastırman lazım.
Ama işlemi yine de php ile yüklemek istersen parametre aralığını 1-40 olarak değiştirmen lazım.
Bu seferde sayfa yeniden yüklenir. Pek doğru değil.
Zaten çok özel bir işlem olmadığı sürece html etiketleri ile Php çıktısı almak ve 10Kb veriyi atıyorum 100Kb veriye çıkartıyorsun.
Veri tabanından çektiğin her satır için etiket, sınıf yazmasını bekliyorsun. Tailwind içine girdi mi 100Kb olur 200Kb :)
Sunucudan bir veri çektiğin zaman hiç bir zaman html yapısı kullanma. Belki bilgilendirme sayfalarında olabilir (Anasayfa, İletişim, Hakkımızda).
O sırada hem html hem veri aynı anda yüklendiği için göz ardı edilebilir.
const rowsConfig = {
start: 1,
start: 20
}
async function movieComments(rowsConfig) {
const comments = await fetch("movie.php", {
body: new UrlSearchParams(rowsConfig),
method: "POST"
}).then(d=>d.json());
comments.forEach((line)=>{
$("ul#comment").append(`<li>${line.comment}</li>`)
})
rowsConfig.start += 20;
rowsConfig.end += 20;
}
// Şimdi tekerlekle ve aşağı ok tuşu ile sayfa sonunu yakalamak kısmını yapay zekaya sorarsın.
movieComments(rowsConfig)