• 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

0 głosów
261 wizyt
pytanie zadane 4 lutego w PHP, Symfony, Zend przez razor6017 Użytkownik (750 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 przez Ehlert Mędrzec (171,100 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 przez razor6017 Użytkownik (750 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 przez niezalogowany

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

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

Może lepiej tutaj:

kursJs

komentarz 4 lutego 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 przez razor6017 Użytkownik (750 p.)
edycja 4 lutego przez razor6017
Można prosić o wprowadzenie do AJAX? Kto jak kto, ale akurat w temacie JS jestem zielony.
komentarz 4 lutego przez niezalogowany
Masz pod podanymi linkami na przykład.
komentarz 4 lutego przez razor6017 Użytkownik (750 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 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 przez razor6017 Użytkownik (750 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 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 przez razor6017 Użytkownik (750 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 przez razor6017 Użytkownik (750 p.)
Oczywiście, pamiętajmy, że ja mam plik ze skryptem jQuery ściągnięty na dysk.
–1 głos
odpowiedź 4 lutego 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 przez Ehlert Mędrzec (171,100 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 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 przez Ehlert Mędrzec (171,100 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 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 przez Ehlert Mędrzec (171,100 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ź 69 wizyt
–2 głosów
0 odpowiedzi 61 wizyt
–1 głos
0 odpowiedzi 101 wizyt
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

67,210 zapytań

114,168 odpowiedzi

241,977 komentarzy

45,762 pasjonatów

Przeglądających: 308
Pasjonatów: 4 Gości: 304

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...