• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dynamiczne ładowanie danych z bazy podczas wpisywania w pole wyszukiwania

VPS Starter Arubacloud
0 głosów
2,231 wizyt
pytanie zadane 4 lutego 2019 w PHP przez razor6017 Użytkownik (780 p.)
Hej. To znów ja, wiecznie nierozgarnięty samouk informatyki! Proszę o przeczytanie moim "wypocin" do końca.

Zadane przeze mnie poniżej pytanie dotyczy dynamicznego ładowania wyników z bazy danych podczas wpisywania tekstu w pole wyszukiwania. Brzmi znajomo, w końcu coś takiego oferuje wyszukiwarka Google. Wpisujemy tekst i już mamy podpowiedzi wyszukiwania, np. wpisałem "o" i już Google podpowiada "onet".

Przekopałem się tutaj przez to forum, ale żaden z wymienionych tutaj tematów choć w połowie nie pozwala mi zrozumieć mechanizmu działania dynamicznego filtrowania, ani też w jaki sposób go zaimplementować.

Idea jest taka, że posiadam rozwijany pasek wyboru z, załóżmy (powtarzam, załóżmy) rodzajami hardware, np: CPU, GPU, RAM, HDD, SSD, zasilacze, płyty główne, itd. A obok pasek wyszukiwania, w którym mogę wpisać numer modelu lub nazwę producenta hardware'u, a poniżej wyświetli się lista pasujących do aktualnie wpisanej frazy komponentów.

Wybór rodzaju sprzętu pozwala wybrać z jakiej tabeli PHP ma pobierać dane z bazy SQL. Wybierając, np. SSD wskazuję na tabelę z dyskami Solid State Drive, a zaczynając wpisywać, np. Samsung pod paskiem wpisywanych danych pojawiają się wyciągnięte z bazy danych pasujące elementy. Oczywiście, żeby od razu nie wyświetliło mi z tysiąca pasujących produktów, musiałbym nałożyć ograniczenie na liczbę wyświetlanych pozycji, ale to później.

Chciałbym prosić o wskazówki, jak taką funkcję zaimplementować i jak ją później rozbudować.

Pragnę zwrócić uwagę, żeby nie wykonywać całej pracy za mnie. Owszem - fragment kodu potrzebnego do wytłumaczenia mi na czym stoję i jak to działa, jak najbardziej, ale nigdy nie będę prosił o tzw. "gotowca". Chcę się nauczyć jak to działa, jak zaimplementować coś takiego i jak w późniejszym etapie to "coś" rozbudować

Nadal uczę się PHP, nadal rozwijam się, poszerzam swoją wiedzę i proszę Was, o podzielenie się swoją wiedzą i doświadczeniami, abym też mógł Wam kiedyś dorównać. Jeżeli widzicie, że popełniam błędy, poprawcie mnie. Jeżeli powiem Wam, że czegoś nie rozumiem, proszę o cierpliwe wytłumaczenie mi, co, jak, dlaczego, po co, na co... Choćby nawet Wam już to wszystko wychodziło uszami, pamiętajcie, że też kiedyś zaczynaliście, że też coś Wam sprawiało trudności jak, być może, mi teraz.

Liczę na Was! Z góry dziękuję za wszystkie uwagi i tłumaczenia, które dostanę.

PS. Z PHP nie jestem laikiem, ale też nie jestem jakimś zawodowym programistą. Proszę jedynie o cierpliwość i odrobinę czasu.

3 odpowiedzi

+1 głos
odpowiedź 4 lutego 2019 przez Ehlert Ekspert (212,630 p.)

Kilka rad na dobry start. 

  1. Wspominałeś o tabeli Solid State Drive. To bardzo kiepski pomysł. Co jak dojdzie w przyszłości 30 innych typów dysków. 30 nowych tabel? Warto trzymać typ urządzenia jako pole albo relacje do innej tabeli.
  2. Jeśli nie masz kodu php w pliku, tylko sam html to nie dawaj rozszerzenia php, bo to strata czasu i pieniędzy na serwer. 
  3. Wszystkie działania w JS zamknij w scopie 
    (function() {
    //kod
    });

    Dzięki temu żaden cwaniaczek nie skorzysta z kodu którego nie wystawisz publicznie. 

  4. Podepnij się na event input w formularzu.

  5. Zrób jeden plik suggestion.php i szukaj po frazie np phrase. Czyli suggestion.php?phrase=Samsung

  6. Skorzystaj z filter_input

  7. Wykorzystaj PDO oraz PreparedStatements. Wszystko jest w dokumentacji.

  8. Kiedy wyciągniesz dane zapisz je do tablicy na które wywołaj 

    echo json_encode($arrayWithYourData);
  9. Pamiętaj że wysyłasz strukturę danych json więc wypada dodać 

    header('Content-Type: application/json');
  10. Zamknij połączenie z bazą i daj na końcu exit. 

  11. Do Ajaxa użyj jquery. $.ajax(...)

  12. Z otrzymanej tablicy danych zbuduj elementy.

 Dopiero zaczynasz więc powoli. Nie polecam Ci żadnego frameworka bo to bez sensu. Ale poziom podstawowy i brak frameworka nie usprawiedliwia pisania złego kodu winkpowodzenia! 

komentarz 7 lutego 2019 przez razor6017 Użytkownik (780 p.)
To jest tylko przykład. Tak naprawdę chciałem przy jego pomocy zarysować problem.

Cała reszta to zupełnie inaczej wyglądający projekt. Chciałbym dowiedzieć się jak coś takiego zrobić, uzyskać stosowne rady i krok po kroku się tego uczyć.

Dziękuję za wskazówki, które podałeś. JS, niestety, kuleje u mnie. Skupiłem się na HTMLu, PHP i CSS. Nie mam kompletnie żadnego pojęcia jak kodować w "Dżawie", chociaż czytając skrypty mniej więcej rozumiem jaka część do czego służy, bo struktura języków programowania ma bardzo podobne elementy, ściśle ze sobą powiązane.
–1 głos
odpowiedź 4 lutego 2019 przez niezalogowany

Technologia AJAX jest rozwiązaniem twojego problemu. Na przykład zerknij tutaj

1
komentarz 4 lutego 2019 przez kenjiro244 Dyskutant (8,600 p.)

Może lepiej tutaj:

kursJs

komentarz 4 lutego 2019 przez niezalogowany
Podałam mu po prostu najbardziej pasujący do pytania przykład: wpisuje tekst i ma podpowiedzi. Już nie hejtuj tak w3schools :)
komentarz 4 lutego 2019 przez razor6017 Użytkownik (780 p.)
edycja 4 lutego 2019 przez razor6017
Można prosić o wprowadzenie do AJAX? Kto jak kto, ale akurat w temacie JS jestem zielony.
komentarz 4 lutego 2019 przez niezalogowany
Masz pod podanymi linkami na przykład.
komentarz 4 lutego 2019 przez razor6017 Użytkownik (780 p.)
No dobra, myślę, że rozumiem ideę działania AJAX. Tylko teraz jak to zastosować, żeby podczas wpisywania w pole tekstowe automatycznie porównywane było to co zostało wpisane z rekordami w bazie i pod polem tekstowym wyświetlane były pasujące elementy?
komentarz 4 lutego 2019 przez niezalogowany
Po kolei.

1. Robisz stronę internetową z formularzem zawierającym pole tekstowe,

2. Robisz stronę w PHP, na której odbierzesz dane z formularza, połączysz się z bazą danych, wyślesz zapytanie, odbierzesz wyniki i je wypiszesz.

3. I teraz najważniejsze: piszesz w JS procedurę obsługi zdarzenia change dla pola tekstowego i za pomocą AJAX-a wysyłasz je do 2. Funkcja ta odbiera także wyniki z PHP i wypisuje je na stronie.
komentarz 4 lutego 2019 przez razor6017 Użytkownik (780 p.)
Teraz rozumiem, że bez nauczenia się podstaw JS, ani w tył, ani w przód. Dziękuję.

A gdybym poprosił o wprowadzenie, zajęłoby to dużo czasu, czy koleżanka jest w stanie to w miarę szybko i treściwie wytłumaczyć?
komentarz 4 lutego 2019 przez niezalogowany
Bez JS tego nie zrobisz. Zrób formularz i stronę PHP obsługującą formularz (wrzuć kod) i podaj strukturę tabeli bazy danych. Wszytko to w wersji maksymalnie uproszczonej, bo to tylko przykład . Z resztą damy radę.
komentarz 4 lutego 2019 przez razor6017 Użytkownik (780 p.)

Myślę, że ogarnąłem.

kod index.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pasek wyszukiwania</title>
<style type="text/css">
    body{
        font-family: Arial, sans-serif;
    }
    /* Formatowanie paska wyszukiwania */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatowanie wyników wyszukiwania */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        //Pobierz wybraną wartość podczas wpisywania
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Wyświetl zwrócone odpowiedzi
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Ustaw wybraną wartość po kliknięciu na nią
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" placeholder="Wpisz szukaną frazę..." />
        <div class="result"></div>
    </div>
</body>
</html>

kod backend-search.php:

<?php
$connect = mysqli_connect("localhost", "root", "", "searchbox");
 
// sprawdź połączenie
if($connect === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
if(isset($_REQUEST["term"])){
    // przygotuj zapytanie
    $sql = "SELECT * FROM searchbox WHERE name LIKE ?";
    
    if($stmt = mysqli_prepare($connect, $sql)){
        // Dołącz wartości do przygotowanego zapytania jako parametry
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        // Ustaw parametry
        $param_term = $_REQUEST["term"] . '%';
        
        // Spróbuj wykonać przygotowane zapytanie
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            
            // Sprawdź ilość wierszy w odpowiedzi z bazy
            if(mysqli_num_rows($result) > 0){
                // Zastosuj tablicę asocjacyjną
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($connect);
        }
    }
     
    // Zakończ zapytanie
    mysqli_stmt_close($stmt);
}
 
// Zakończ połączenie
mysqli_close($connect);
?>

Działać działa, ale nie mam kompletnie pojęcia jak się teraz zabrać za edytowanie linii JS'a, żeby po kliknięciu na podany wynik, skrypt wyciągnął z bazy resztę danych i wyświetlił w odpowiednich miejscach na stronie WWW.

Liczę na Ciebie!

komentarz 4 lutego 2019 przez razor6017 Użytkownik (780 p.)
Oczywiście, pamiętajmy, że ja mam plik ze skryptem jQuery ściągnięty na dysk.
–1 głos
odpowiedź 4 lutego 2019 przez niezalogowany

Wrzucam całość projektu. Dopasuj sobie do swoich potrzeb.

1. Baza: nazwa "baza" w niej jedna tabela o nazwie "tabela" z polami:

- id

- nazwa (przechowuje nazwy)

2. Formularz

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div id="form">
	Wpisz nazwę
	<input type="text" name="tekst" id="tekst">
</div>
<div id="wynik">
<!-- Tu pojawi sie wynik poszukiwań -->
</div>
<script src="skrypt.js"></script>
</body>
</html>

3. Strona PHP do poszukiwania nazwy

<?php
$tekst = $_GET["tekst"];
$conn = mysqli_connect("localhost", "root", "", "baza");
$zapytanie = "SELECT nazwa FROM tabela WHERE nazwa LIKE '%".$tekst."%'";
$result = mysqli_query($conn, $zapytanie);
while($dane = mysqli_fetch_assoc($result)) {
	echo $dane["nazwa"]."<br>";
}
mysqli_free_result($result);
mysqli_close($conn);
?>

4. Skrypt "skrypt.js"

// Przypisanie procedury obsługi zdarzenia polegającego na zwolnieniu klawisza w polu tekstowym
document.getElementById("tekst").addEventListener("keyup", szukaj);

// Procedura obsługi
function szukaj() {
	// Pobierasz zawartość pola tekstowego
    var tekst = document.getElementById("tekst").value;
	
    // Jeśli pole nie jest puste to wykonuje się poniższy kod
	if(tekst!="") {
		var ajax = new XMLHttpRequest();  // Tworzenie obiektu AJAX
		
        // Funkcja obsługująca zmiany statysu przetwarzania żądania
        // gdy żądanie zostanie zakończone, zwrócony tekst zostanie
        // wpisany w di=v o id="wynik"
        ajax.onreadystatechange = function() {
			if(ajax.readyState == 4 && ajax.status == 200) {
				document.getElementById("wynik").innerHTML = ajax.responseText;
			}
		};
		
        // Przygotowanie żądania metodą GET
        ajax.open("GET", "szukaj.php?tekst="+tekst, true);

        // Wysłanie żądania
		ajax.send();
	}
}

 

1
komentarz 4 lutego 2019 przez Ehlert Ekspert (212,630 p.)

Bardzo źle tutaj radzisz koledze.

  1. Cały js wypada zamknąć w scopie. I to scopie nie globalnym.
  2. Event nie keyup a input.
  3. Nie != tylko !==
  4. W PHP brak walidacji wejścia. Nie ma ani sprawdzenia czy przyszło getem, ani filter Input. 
  5. SQL INJECTION
  6. Bardzo głupi pomysł żeby robić jakieś echo nie wiadomo z czym. 
  7. Tym bardziej kiepski pomysł żeby dodawać tam br. Wszystko powinno być w jsonie. 
  8. Już pomijam temat łączenia się z bazą.
komentarz 5 lutego 2019 przez niezalogowany
Ogarnij się z tymi minusami człowieku. Pytający powiedział, ze jest na początku drogi, zatem nie musisz się popisywać co to ty nie potrafisz. Dostał najprostszy działający kod i niech go rozwija, albo napisze sam. Mam wrażenie , ze niektórzy "eksperci" zapomnieli, jak sami zaczynali. I chyba ty do nich należysz.

Daruj, ale bez poważania.
komentarz 5 lutego 2019 przez Ehlert Ekspert (212,630 p.)
To co napisałem to podstawy. I sam zaczynałem od takich rzeczy.

Minusy dostałaś za polecanie w3schools oraz kod który napisałaś. Dla mnie on nie działa i nikt nie powinien się nim sugerować.
komentarz 5 lutego 2019 przez niezalogowany
Czy wszystko co złe to pochodzi od w3schools? Dla początkujących jest to - wbrew pozorom i opiniom samozwańczych ekspertów - dość dobre źródło. Kod działa w przeciwieństwo do tego co twierdzisz. Unikaj sformułowań "nikt nie powinien", bo wychodzi twe zadufanie i infantylizm. Od takich ekspertów niech nas co może zachowa.

Dla mnie EOT.
komentarz 5 lutego 2019 przez Ehlert Ekspert (212,630 p.)
Dla mnie nie eot.

Swoim podejściem prezentujesz taką samą postawę wobec informatyki jak płaskoziemcy wobec nauki.

W3schools nie jest dobrym źródłem. Przekazuje stare podejście i złe praktyki. Nie cierpię zasłaniania syfiastego kodu faktem, że ktoś jest początkujący. Nikt nikomu nie każe pisać clean codem, ale skoro już robimy dev, to może dwie podstawy: Xss, sqli.

Może podejdź do sprawy merytorycznie i napisz dlaczego to co ja wypunktowałem jest gorsze od Twojego kodu.

Podobne pytania

0 głosów
1 odpowiedź 187 wizyt
0 głosów
1 odpowiedź 237 wizyt
–2 głosów
0 odpowiedzi 133 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...