⚡️ Pages system overhaul, improving performances a lot

2026-08-19 11:43:16 +02:00 · 2022-01-06 16:46:23 +01:00
parent a89a4f2315
commit 62be572702
5 changed files with 90 additions and 41 deletions
@@ -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,
 };

@@ -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) => {
-                updateUnderline(e.target.innerHTML)
+            number.onclick = () => {
                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)) {
-        emptyResults()
-        updateUnderline(wantedPage)
-        currentPage = wantedPage
-        wantedPage *= RESULTS_NUMBER
-        resultsArray.slice(wantedPage - RESULTS_NUMBER, wantedPage).forEach(result => {
-            resultsDiv.appendChild(result)
-        })
-        fadeIn()
+    if (wantedPage > 0 && wantedPage < nbPages + 1) {
+        let offset = (wantedPage * RESULTS_NUMBER) - RESULTS_NUMBER
+        submitForm(offset)
+        // window.location.href = `index.php?search=${search}&option=${queryOption}&offset=${offset}`
    }
 }

@@ -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.querySelector('input[name="option"]').value = queryOption
+navbarForm.addEventListener('submit', e => {
+    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)
 }
@@ -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;"),
-            'title' => $pdo->prepare("SELECT * FROM theses WHERE title LIKE :search;"),
-            'director' => $pdo->prepare("SELECT * FROM theses WHERE these_director LIKE :search;"),
-            'establishment' => $pdo->prepare("SELECT * FROM theses WHERE soutenance_establishment LIKE :search;"),
+            '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 LIMIT 10 OFFSET :offset;"),
+            '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 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(),
@@ -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">
@@ -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>