⚡️ Pages system overhaul, improving performances a lot

ProjetProgWeb/api.php

@@ -2,7 +2,7 @@
 
 require_once("class/dump.php");
 
-if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option'])) {
+if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option']) || !isset($_GET['offset'])) {
     print_r(json_encode(array("status" => 400, "message" => "Missing query type or attributes.")));
     exit();
 }
@@ -10,6 +10,7 @@ if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option'])) {
 $q = $_GET['q'];
 $search = filter_var($_GET['search'], FILTER_SANITIZE_ADD_SLASHES);
 $option = $_GET['option'];
+$offset = $_GET['offset'];
 
 if (strlen($search) < 3) {
     print_r(json_encode(array(
@@ -20,8 +21,9 @@ if (strlen($search) < 3) {
 }
 
 $json_object = match ($q) {
-    "theses" => dump::getTheses($search, $option),
+    "theses" => dump::getTheses($search, $option, $offset),
     "suggestion" => dump::getSuggestions($search, $option),
+    "count" => dump::getThesesCount($search, $option),
     default => NULL,
 };
 

ProjetProgWeb/app.js

@@ -59,7 +59,7 @@ let searchString = "";
 let lastRequest = null
 let queryOption = null
 
-function apiRequestThese(search) {
+function apiRequestThese(search, offset) {
     hideSuggestions()
     if (lastRequest === null || (new Date().getTime() - lastRequest) > 1000) {
         lastRequest = new Date().getTime()
@@ -67,9 +67,13 @@ function apiRequestThese(search) {
         pagesNumbers.innerHTML = ""
         loader.style.display = "block"
         searchString = sanitize(search)
-        fetch(`api.php?q=theses&search=${search}&option=${queryOption}`)
+        fetch(`api.php?q=theses&search=${searchString}&option=${queryOption}&offset=${offset}`)
             .then(response => response.json())
-            .then(data => displayResults(data))
+            .then(data => {
+                fetch(`api.php?q=count&search=${searchString}&option=${queryOption}&offset=0`)
+                    .then(response => response.json())
+                    .then(aCount => displayResults(data, aCount.data[0]))
+            })
     } else {
         alert('Veuillez attendre une seconde entre chaque recherche.')
     }
@@ -89,15 +93,17 @@ function fadeIn() {
 
 window.addEventListener('scroll', fadeIn);
 
-function updateUnderline(number) {
+function updatePageNumber(number) {
     pagesNumbers.childNodes.forEach(elem => {
         if (elem.innerHTML == number) {
+            elem.style.fontWeight = "bold"
             elem.style.textDecoration = "underline"
             pagesNumbers.scrollLeft += elem.getBoundingClientRect().left -
                 pagesNumbers.getBoundingClientRect().left -
                 (pagesNumbers.offsetWidth / 2) + (elem.offsetWidth / 2)
         } else {
-            elem.style.textDecoration = 'none'
+            elem.style.textDecoration = "normal"
+            elem.style.textDecoration = "none"
         }
     })
 }
@@ -118,9 +124,9 @@ function focusResults(result) {
 let resultsArray = []
 let count = 0
 let nbPages = 0
+let currentPage = null
 
-function displayResults(results) {
+function displayResults(results, aCount) {
-
     if (results.status === 400) {
         loader.style.display = "none"
         error.classList.remove("fade-out");
@@ -129,7 +135,7 @@ function displayResults(results) {
         pagesNumbersContainer.style.display = 'none'
         return;
     } else if (results.status === 200) {
-        count = 0
+        count = aCount
         resultsArray = []
         pagesNumbersContainer.style.display = 'flex'
         results.data.forEach(elem => {
@@ -176,7 +182,6 @@ function displayResults(results) {
                     content.appendChild(child)
                 } i += 1
             })
-            count += 1
 
             header.addEventListener('click', () => {
                 focusResults(result)
@@ -201,8 +206,7 @@ function displayResults(results) {
             number.innerHTML = i + 1
             if (i === 0)
                 number.style.textDecoration = 'underline'
-            number.onclick = (e) => {
+            number.onclick = () => {
-                updateUnderline(e.target.innerHTML)
                 browseResults(i + 1)
             }
             pagesNumbers.appendChild(number)
@@ -212,24 +216,27 @@ function displayResults(results) {
             pagesNumbersContainer.style.display = 'none'
         }
 
-        browseResults(1)
+        resultsArray.forEach(result => {
+            resultsDiv.appendChild(result)
+        })
+
+        currentPage = (parseInt(urlOffset) + RESULTS_NUMBER) / RESULTS_NUMBER
+        updatePageNumber(currentPage)
         fadeIn()
     }
 }
 
-let currentPage = 1
+function submitForm(offset) {
+    navbarForm.querySelector('input[name="option"]').value = queryOption
+    navbarForm.querySelector('input[name="offset"]').value = offset
+    navbarForm.submit()
+}
 
-// TODO URGENCE ABSOLUE Charger les résultats de 10 à 10 pour de vrai depuis la requête SQL elle-même (bon courage)
 function browseResults(wantedPage) {
-    if ((wantedPage > 0 && wantedPage < nbPages + 1)) {
+    if (wantedPage > 0 && wantedPage < nbPages + 1) {
-        emptyResults()
+        let offset = (wantedPage * RESULTS_NUMBER) - RESULTS_NUMBER
-        updateUnderline(wantedPage)
+        submitForm(offset)
-        currentPage = wantedPage
+        // window.location.href = `index.php?search=${search}&option=${queryOption}&offset=${offset}`
-        wantedPage *= RESULTS_NUMBER
-        resultsArray.slice(wantedPage - RESULTS_NUMBER, wantedPage).forEach(result => {
-            resultsDiv.appendChild(result)
-        })
-        fadeIn()
     }
 }
 
@@ -243,7 +250,7 @@ function realTimeDisplay() {
     if (search.length > 3 && (search !== lastSearch && (new Date().getTime() - lastSuggestion) > 500)) {
         lastSearch = search
         lastSuggestion = new Date().getTime()
-        fetch(`api.php?q=suggestion&search=${search}&option=${queryOption}`)
+        fetch(`api.php?q=suggestion&search=${search}&option=${queryOption}&offset=0`)
             .then(response => response.json())
             .then(results => {
                 if (results.data) {
@@ -258,7 +265,7 @@ function realTimeDisplay() {
                         name.innerHTML = elem
                         name.addEventListener('click', () => {
                             searchBar.value = elem
-                            apiRequestThese(elem)
+                            apiRequestThese(elem, 0)
                         })
                         suggestions.appendChild(name)
                     })
@@ -348,16 +355,18 @@ searchBar.addEventListener('focus', () => {
     switchNavTitle(false)
 })
 
-navbarForm.addEventListener('submit', () => {
+navbarForm.addEventListener('submit', e => {
-    navbarForm.querySelector('input[name="option"]').value = queryOption
+    e.preventDefault()
+    submitForm(0)
 })
 
 let urlSearch = urlParams.get('search')
 let urlOption = urlParams.get('option')
+let urlOffset = urlParams.get('offset')
 
 updateFilter(urlOption ? urlOption : 'f-auto')
 
-if (urlSearch) {
+if (urlSearch && urlOption && urlOffset) {
     searchBar.value = urlSearch
-    apiRequestThese(urlSearch)
+    apiRequestThese(urlSearch, urlOffset)
 }

ProjetProgWeb/class/dump.php

@@ -16,7 +16,7 @@ class dump {
         return date("Y-m-d", strtotime($old_date));
     }
 
-    public static function getTheses(string $search, string $option) : array {
+    public static function getTheses(string $search, string $option, int $offset) : array {
         $theses_array = [];
 
         $pdo_obj = new conf();
@@ -31,16 +31,18 @@ class dump {
                 WHERE author LIKE :search
                   OR title LIKE :search
                   OR these_director LIKE :search
-                  OR soutenance_establishment LIKE :search;
+                  OR soutenance_establishment LIKE :search
+                LIMIT 10 OFFSET :offset;
             "),
-            'author' => $pdo->prepare("SELECT * FROM theses WHERE author LIKE :search ORDER BY author;"),
+            'author' => $pdo->prepare("SELECT * FROM theses WHERE author LIKE :search ORDER BY author LIMIT 10 OFFSET :offset;"),
-            'title' => $pdo->prepare("SELECT * FROM theses WHERE title LIKE :search;"),
+            'title' => $pdo->prepare("SELECT * FROM theses WHERE title LIKE :search LIMIT 10 OFFSET :offset;"),
-            'director' => $pdo->prepare("SELECT * FROM theses WHERE these_director LIKE :search;"),
+            'director' => $pdo->prepare("SELECT * FROM theses WHERE these_director LIKE :search LIMIT 10 OFFSET :offset;"),
-            'establishment' => $pdo->prepare("SELECT * FROM theses WHERE soutenance_establishment LIKE :search;"),
+            'establishment' => $pdo->prepare("SELECT * FROM theses WHERE soutenance_establishment LIKE :search LIMIT 10 OFFSET :offset;"),
             default => "",
         };
 
         $stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
+        $stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
         $stmt->execute();
 
         $i = 0;
@@ -86,6 +88,41 @@ class dump {
         return $array;
     }
 
+    public static function getThesesCount(string $search, string $option) : array {
+        $array = [];
+
+        $search = '%' . $search . '%';
+
+        $pdo_obj = new conf();
+        $pdo = $pdo_obj->getPDO();
+
+        $stmt = match ($option) {
+            'auto' => $pdo->prepare("
+                SELECT COUNT(*)
+                FROM theses
+                WHERE author LIKE :search
+                  OR title LIKE :search
+                  OR these_director LIKE :search
+                  OR soutenance_establishment LIKE :search;
+            "),
+            'author' => $pdo->prepare("SELECT COUNT(author) FROM theses WHERE author LIKE :search;"),
+            'title' => $pdo->prepare("SELECT COUNT(title) FROM theses WHERE title LIKE :search;"),
+            'director' => $pdo->prepare("SELECT COUNT(these_director) FROM theses WHERE these_director LIKE :search;"),
+            'establishment' => $pdo->prepare("SELECT COUNT(soutenance_establishment) FROM theses WHERE soutenance_establishment LIKE :search;"),
+            default => "",
+        };
+        $stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
+        $stmt->execute();
+
+        while ($obj = $stmt->fetchObject()) {
+            foreach ($obj as $elem) {
+                array_push($array, $elem);
+            }
+        }
+
+        return $array;
+    }
+
     public function sendThese($pdo) {
         $data = [
             'author' => $this->these->getAuthor(),

ProjetProgWeb/index.php

@@ -30,9 +30,9 @@
         <div id="results-count"></div>
 
         <div class="page-nav">
-            <p onclick="browseResults(currentPage-1)">&#60;-</p>
+            <p onclick="browseResults(currentPage - 1)">&#60;-</p>
             <div></div>
-            <p onclick="browseResults(currentPage+1)">-&#62;</p>
+            <p onclick="browseResults(currentPage + 1)">-&#62;</p>
         </div>
 
         <div id="results">

ProjetProgWeb/navbar.php

@@ -7,12 +7,13 @@
             <path id="crossSvg" class="spin-fade" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
         </svg>
 
-        <h1 id="title"><a href="/projet_programmation_web/ProjetProgWeb/">theses.fr</a></h1>
+        <h1 id="title"><a href="index.php">theses.fr</a></h1>
 
         <div class="research-section">
             <form class="navbar-form" method="GET" action="index.php">
-                <input type="text" name="search" placeholder="recherche" onkeyup="realTimeDisplay()" id="searchbar">
+                <input type="text" name="search" placeholder="recherche" onkeyup="realTimeDisplay()" id="searchbar" maxlength="100">
                 <input style="display:none" type="text" name="option">
+                <input style="display:none" type="text" name="offset">
                 <button id="form-button">
                     <img src="assets/search.svg" alt="search" id="search-button" class="animation-in">
                 </button>