Hi I want to do that it get the data from the sqlite database to only show the latest one but it show all and make an animation so when scroll on that it shows more one by one
pls help me and pls don't devote this question I can't ask more questions then I really need help I'm trying to fund from one whole day but didn't find any so I asked as this is a good community
Code
<?php
$conn = new PDO("sqlite: Review.db");
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$result = $conn->query("SELECT * FROM Review ORDER BY id DESC LIMIT 1");
while ($row = $result->fetch()) {
print_r($row['Review']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<title>Social Cabin</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
<section id="landing">
<img src="cabbin.jpeg" id="landing-image">
<h1>Social Cabin</h1>
</section>
<section>
<div class="join" >
<h3>Why Should You Join Us?</h3>
<p>School is the place where we learn to read and write. It is the most crucial place for a student, and it helps us to learn new things. The teachers are always helpful and teach us important things in life. We must always be regular to school as missing classes can lead to problems during exams. Schools teach us how to be consistent, punctual, and obedient. It also makes us better human beings so that we can treat our elders with respect. Most of what we learn is a result of the learning imparted by our teachers.
</p>
<section>
<hr class="fir" >
<h3 class="about" >About Us</h3>
<p id="consider" >Considering that the chain’s main draw is high quality food at low prices, it makes sense that customers might question how Trader Joe’s can afford to charge less than other brands. This short explanation answers that question, and it’s easy to see how it could be very effective at drawing new customers to their local store.</p>
<img src="team.jpg" class="team " >
</section>
<section class="all" >
<div class="slidercontainer">
<div class="showSlide fade">
<img src="1.png" />
</div>
<div class="showSlide fade">
<img src="3.png"/>
</div>
<div class="showSlide fade">
<img src="2.png"/>
</div>
<div class="showSlide fade">
<img src="3.png"/>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">❮</a>
<a class="right" onclick="nextSlide(1)">❯</a>
</div>
</section>
</section>
</div>
</section>
<script src="index.js"></script>
</body>
</html>
My Answer:
To achieve the desired functionality of showing only the latest data from the SQLite database and implementing an animation to see more data one by one, you can modify your PHP code and HTML/JS code as follows:
1. PHP code:
php
<?php
$conn = new PDO("sqlite: Review.db");
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$result = $conn->query("SELECT * FROM Review ORDER BY id DESC LIMIT 1");
$data = array();
while ($row = $result->fetch()) {
$data[] = $row['Review'];
}
echo json_encode($data);
$conn = null;
?>
2. HTML/JS code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<title>Social Cabin</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
<section id="landing">
<img src="cabbin.jpeg" id="landing-image">
<h1>Social Cabin</h1>
</section>
<section>
<div class="join" >
<h3>Why Should You Join Us?</h3>
<p>School is the place where we learn to read and write. It is the most crucial place for a student, and it helps us to learn new things. The teachers are always helpful and teach us important things in life. We must always be regular to school as missing classes can lead to problems during exams. Schools teach us how to be consistent, punctual, and obedient. It also makes us better human beings so that we can treat our elders with respect. Most of what we learn is a result of the learning imparted by our teachers.
</p>
<section>
<hr class="fir" >
<h3 class="about" >About Us</h3>
<p id="consider" >Considering that the chain’s main draw is high quality food at low prices, it makes sense that customers might question how Trader Joe’s can afford to charge less than other brands. This short explanation answers that question, and it’s easy to see how it could be very effective at drawing new customers to their local store.</p>
<img src="team.jpg" class="team " >
</section>
<section class="all" >
<div class="slidercontainer">
<div id="data-container"></div>
<div class="showSlide fade">
<img src="1.png" />
</div>
<div class="showSlide fade">
<img src="3.png"/>
</div>
<div class="showSlide fade">
<img src="2.png"/>
</div>
<div class="showSlide fade">
<img src="3.png"/>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">❮</a>
<a class="right" onclick="nextSlide(1)">❯</a>
</div>
</section>
</section>
</div>
</section>
<script src="index.js"></script>
<script>
fetch('get_latest_data.php')
.then(response => response.json())
.then(data => {
const dataContainer = document.getElementById('data-container');
dataContainer.innerHTML = data[0];
});
</script>
</body>
</html>
In this code, we have added a new PHP file `get_latest_data.php` to fetch the latest data from the SQLite database and return it as JSON. Then, in the HTML/JS code, we use `fetch` to call this PHP file and update the data container with the latest data. This way, only the latest data will be displayed, and you can implement the animation to see more data one by one.
Rate this post
3 of 5 based on 8307 votesComments