source: HomePage.php

main
Last change on this file was 75f74d9, checked in by Vlado 222039 <vlado.popovski@…>, 2 months ago

Initial commit: Adding Book Tracker code
  • Property mode set to 100644
File size: 16.1 KB
Line 
1<?php
2session_start();
3
4require 'connect.php';
5
6 /* New Releases */
7 $stmt = $conn->prepare("SELECT book.bookid, coverimage, title, genre, publishedyear, firstname, lastname
8 FROM book
9 INNER JOIN book_author ON book.bookid = book_author.bookid
10 INNER JOIN author ON book_author.authorid = author.authorid
11 WHERE book.publishedyear BETWEEN 2020 AND 2024 LIMIT 20;
12 ");
13 $stmt->execute();
14 $new_releases = [];
15
16 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
17 $new_releases[] = $row;
18 }
19
20 /* Most Read Books */
21 $stmt = $conn->prepare("SELECT book.bookid, book.CoverImage, book.Title, book.Genre, author.FirstName, author.LastName, COUNT(loan.LoanID) AS loan_count FROM book
22 INNER JOIN book_copies ON book.BookID = book_copies.BookID
23 LEFT JOIN loan ON book_copies.CopyID = loan.BookCopyID
24 INNER JOIN book_author ON book.BookID = book_author.BookID
25 INNER JOIN author ON book_author.AuthorID = author.AuthorID
26 GROUP BY book.BookID, book.Title, book.CoverImage, book.Genre, author.FirstName, author.LastName
27 ORDER BY loan_count DESC LIMIT 20;
28 ");
29 $stmt->execute();
30 $most_read_books = [];
31
32 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
33 $most_read_books[] = $row;
34 }
35
36 /* Least Read Books */
37 $stmt = $conn->prepare("SELECT book.bookid, book.CoverImage, book.Title, book.Genre, author.FirstName, author.LastName, COUNT(loan.LoanID) AS loan_count FROM book
38 INNER JOIN book_copies ON book.BookID = book_copies.BookID
39 LEFT JOIN loan ON book_copies.CopyID = loan.BookCopyID
40 INNER JOIN book_author ON book.BookID = book_author.BookID
41 INNER JOIN author ON book_author.AuthorID = author.AuthorID
42 GROUP BY book.BookID, book.Title, book.CoverImage, book.Genre, author.FirstName, author.LastName
43 ORDER BY loan_count ASC LIMIT 20;
44");
45 $stmt->execute();
46 $least_read_books = [];
47
48 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
49 $least_read_books[] = $row;
50 }
51
52 /* Classics */
53 $stmt = $conn->prepare("SELECT book.bookid, coverimage, title, genre, publishedyear, firstname, lastname
54 FROM book
55 INNER JOIN book_author ON book.bookid = book_author.bookid
56 INNER JOIN author ON book_author.authorid = author.authorid
57 WHERE book.publishedyear BETWEEN 1000 AND 1970 LIMIT 20;
58 ");
59 $stmt->execute();
60 $classics = [];
61
62 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
63 $classics[] = $row;
64 }
65
66 /* Comics */
67 $stmt = $conn->prepare("SELECT book.bookid, coverimage, title, genre, publishedyear, firstname, lastname
68 FROM book
69 INNER JOIN book_author ON book.bookid = book_author.bookid
70 INNER JOIN author ON book_author.authorid = author.authorid
71 WHERE book.genre IN ('Manga', 'Graphic Novel')
72 LIMIT 20;
73 ");
74 $stmt->execute();
75 $comics = [];
76
77 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
78 $comics[] = $row;
79 }
80
81?>
82
83
84<!DOCTYPE html>
85<html>
86<head>
87 <title>Home</title>
88 <link rel="stylesheet" href="CSS/Home.css">
89</head>
90<body>
91 <?php include 'Components/Header.html'; ?>
92
93 <div class="snowflakes" aria-hidden="true">
94 <div class="snowflake">
95 <div class="inner">❄</div>
96 </div>
97 <div class="snowflake">
98 <div class="inner">❄</div>
99 </div>
100 <div class="snowflake">
101 <div class="inner">❄</div>
102 </div>
103 <div class="snowflake">
104 <div class="inner">❄</div>
105 </div>
106 <div class="snowflake">
107 <div class="inner">❄</div>
108 </div>
109 <div class="snowflake">
110 <div class="inner">❄</div>
111 </div>
112 <div class="snowflake">
113 <div class="inner">❅</div>
114 </div>
115 <div class="snowflake">
116 <div class="inner">❅</div>
117 </div>
118 <div class="snowflake">
119 <div class="inner">❅</div>
120 </div>
121 <div class="snowflake">
122 <div class="inner">❆</div>
123 </div>
124 <div class="snowflake">
125 <div class="inner">❆</div>
126 </div>
127 <div class="snowflake">
128 <div class="inner">❆</div>
129 </div>
130 </div>
131
132 <main class="main-content">
133 <!-- Trending Books Slider -->
134 <section class="book-slider-section">
135 <h2>Most Read Books</h2>
136 <div class="slider-container">
137 <button class="slider-button prev">
138 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
139 <path d="M15 18l-6-6 6-6"/>
140 </svg>
141 </button>
142
143 <div class="book-slider">
144 <div class="book-track">
145 <!-- Books will be dynamically added here -->
146 </div>
147 </div>
148
149 <button class="slider-button next">
150 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
151 <path d="M9 18l6-6-6-6"/>
152 </svg>
153 </button>
154 </div>
155 </section>
156
157 <!-- Decorative Divider 1 -->
158 <div class="section-divider">
159 <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
160 </div>
161
162 <!-- New Releases Slider -->
163 <section class="book-slider-section">
164 <h2>Least Read Books</h2>
165 <div class="slider-container">
166 <button class="slider-button prev">
167 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
168 <path d="M15 18l-6-6 6-6"/>
169 </svg>
170 </button>
171
172 <div class="book-slider">
173 <div class="book-track">
174 <!-- Books will be dynamically added here -->
175 </div>
176 </div>
177
178 <button class="slider-button next">
179 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
180 <path d="M9 18l6-6-6-6"/>
181 </svg>
182 </button>
183 </div>
184 </section>
185
186 <!-- Decorative Divider 2 -->
187 <div class="section-divider">
188 <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
189 </div>
190
191 <!-- Bestsellers Slider -->
192 <section class="book-slider-section">
193 <h2>New Releases</h2>
194 <div class="slider-container">
195 <button class="slider-button prev">
196 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
197 <path d="M15 18l-6-6 6-6"/>
198 </svg>
199 </button>
200
201 <div class="book-slider">
202 <div class="book-track">
203 <!-- Books will be dynamically added here -->
204 </div>
205 </div>
206
207 <button class="slider-button next">
208 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
209 <path d="M9 18l6-6-6-6"/>
210 </svg>
211 </button>
212 </div>
213 </section>
214
215 <!-- Decorative Divider 3 -->
216 <div class="section-divider">
217 <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
218 </div>
219
220 <!-- Classics Slider -->
221 <section class="book-slider-section">
222 <h2>Classics</h2>
223 <div class="slider-container">
224 <button class="slider-button prev">
225 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
226 <path d="M15 18l-6-6 6-6"/>
227 </svg>
228 </button>
229
230 <div class="book-slider">
231 <div class="book-track">
232 <!-- Books will be dynamically added here -->
233 </div>
234 </div>
235
236 <button class="slider-button next">
237 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
238 <path d="M9 18l6-6-6-6"/>
239 </svg>
240 </button>
241 </div>
242 </section>
243
244 <!-- Decorative Divider 4 -->
245 <div class="section-divider">
246 <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
247 </div>
248
249 <!-- Graphics Novels & Manga Slider-->
250 <section class="book-slider-section">
251 <h2>Graphics Novels & Manga</h2>
252 <div class="slider-container">
253 <button class="slider-button prev">
254 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
255 <path d="M15 18l-6-6 6-6"/>
256 </svg>
257 </button>
258
259 <div class="book-slider">
260 <div class="book-track">
261 <!-- Books will be dynamically added here -->
262 </div>
263 </div>
264
265 <button class="slider-button next">
266 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
267 <path d="M9 18l6-6-6-6"/>
268 </svg>
269 </button>
270 </div>
271 </section>
272
273
274
275 </main>
276 <script>
277
278 const books = {
279 MostRead: [
280 <?php
281 foreach($most_read_books as $book) {
282 echo "{
283 title: '{$book['title']}',
284 author: '{$book['firstname']} {$book['lastname']}',
285 image: '{$book['coverimage']}',
286 genre: '{$book['genre']}',
287 bookid: '{$book['bookid']}',
288 },";
289 }
290 ?>
291 ],
292 LeastRead: [
293 <?php
294 foreach($least_read_books as $book) {
295 echo "{
296 title: '{$book['title']}',
297 author: '{$book['firstname']} {$book['lastname']}',
298 image: '{$book['coverimage']}',
299 genre: '{$book['genre']}',
300 bookid: '{$book['bookid']}',
301 },";
302 }
303 ?>
304 ],
305 newReleases: [
306 <?php
307 foreach($new_releases as $book) {
308 echo "{
309 title: '{$book['title']}',
310 author: '{$book['firstname']} {$book['lastname']}',
311 image: '{$book['coverimage']}',
312 genre: '{$book['genre']}',
313 bookid: '{$book['bookid']}',
314 },";
315 }
316 ?>
317 ],
318 Classics: [
319 <?php
320 foreach($classics as $book) {
321 echo "{
322 title: '{$book['title']}',
323 author: '{$book['firstname']} {$book['lastname']}',
324 image: '{$book['coverimage']}',
325 genre: '{$book['genre']}',
326 bookid: '{$book['bookid']}',
327 },";
328 }
329 ?>
330 ],
331 Comics: [
332 <?php
333 foreach($comics as $book) {
334 echo "{
335 title: '{$book['title']}',
336 author: '{$book['firstname']} {$book['lastname']}',
337 image: '{$book['coverimage']}',
338 genre: '{$book['genre']}',
339 bookid: '{$book['bookid']}',
340 },";
341 }
342 ?>
343 ],
344
345 };
346
347 document.addEventListener('DOMContentLoaded', () => {
348 initializeSliders();
349
350 });
351
352 function initializeSliders() {
353 const sections = ['MostRead', 'LeastRead', 'newReleases', 'Classics', 'Comics'];
354 const sliderSections = document.querySelectorAll('.book-slider-section');
355
356 sliderSections.forEach((section, index) => {
357 const track = section.querySelector('.book-track');
358 const category = sections[index];
359
360 books[category].forEach((book) => {
361 const bookCard = createBookCard(book);
362 track.appendChild(bookCard);
363 });
364
365 const prevButton = section.querySelector('.slider-button.prev');
366 const nextButton = section.querySelector('.slider-button.next');
367 let currentPosition = 0;
368 const step = 200;
369
370 prevButton.addEventListener('click', () => {
371 currentPosition = Math.min(currentPosition + step, 0);
372 updateSliderPosition(track, currentPosition);
373 });
374
375 nextButton.addEventListener('click', () => {
376 const maxScroll = -(track.scrollWidth - track.parentElement.clientWidth);
377 currentPosition = Math.max(currentPosition - step, maxScroll);
378 updateSliderPosition(track, currentPosition);
379 });
380 });
381 }
382
383 function createBookCard(book) {
384 // console.log(book);
385 const card = document.createElement('div');
386 card.className = 'book-card';
387 card.innerHTML = `
388 <img src="./BookImages/${book.image}" alt="${book.title}" class="book-cover">
389 <div class="book-info">
390 <a href='./BookView.php?bookid=${book.bookid}' style="text-decoration: none"><h3 class="book-title" style="color: green;">${book.title}</h3></a>
391 <p class="book-author">${book.author}</p>
392 <p class="book-genre">${book.genre}</p>
393
394
395 <form action="./Books.php" method="GET">
396 <input type="hidden" name="bookid" value="${book.bookid}">
397 <button class="btn btn-primary" type="submit" value="add-to-cart" name="submit">Add to Cart</button>
398 </form>
399 </div>
400 `;
401 return card;
402 }
403
404 function updateSliderPosition(track, position) {
405 track.style.transform = `translateX(${position}px)`;
406 }
407
408
409 document.addEventListener('DOMContentLoaded', () => {
410 const navItems = document.querySelectorAll('.nav-item.has-dropdown');
411
412 navItems.forEach(item => {
413 const navLink = item.querySelector('.nav-link');
414
415 navLink.addEventListener('click', (e) => {
416 if (window.innerWidth <= 768) {
417 e.preventDefault();
418
419 navItems.forEach(otherItem => {
420 if (otherItem !== item) {
421 otherItem.classList.remove('active');
422 }
423 });
424 item.classList.toggle('active');
425 }
426 });
427 });
428
429 document.addEventListener('click', (e) => {
430 if (!e.target.closest('.nav-item')) {
431 navItems.forEach(item => {
432 item.classList.remove('active');
433 });
434 }
435 });
436
437 let timeout;
438 window.addEventListener('resize', () => {
439 clearTimeout(timeout);
440 timeout = setTimeout(() => {
441 if (window.innerWidth > 768) {
442 navItems.forEach(item => {
443 item.classList.remove('active');
444 });
445 }
446 }, 100);
447 });
448 });
449 </script>
450 <?php include 'Components/Footer.html'; ?>
451</body>
452</html>
Note: See TracBrowser for help on using the repository browser.