Dokonanie wyboru na podstawie miniaturek

Question

Witam,

Zaczynam programować i proszę o pomoc Was, czyli ekspertów.

Mam miniaturki zrobione w bootstrapie, np. po 4 w 3-ch rzędach.
Chciałabym, żeby na podstawie wyświetlenia miniaturek, można było dokonać wyboru przepisu kulinarnego (np. kliknięcie w obrazek sałatki powoduje pobranie zmiennej nr=8 i jest podstawą do tego, że z bazy danych wybrany zostanie rekord np. o id=8 i pod miniaturkami wyświetli się przepis na sałatkę). Baza danych ma strukturę: id, link do zdjęcia, opis). Pobranie przepisu z bazy danych zrobiłam w PHP. Problem: jaką metodę zastosować do konwersji miniaturki na numer, czyli jak to zrobić, że jak kliknę na miniaturkę, to pobiorę numer przypisany do tej miniaturki.

Próbowałam:

 <div class="miniaturki">
        <div class="container">

            <div class="col-xs-6 col-md-3">
                <a href="#przepis1" class="thumbnail">
                    <img src="img/rachael-gorjestani-154907.jpg">
                    <span>Pasta z groszku</span> 
                    <?php $numer=1 ?>
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="img/miniatura1.jpg">
                    <span>Marchewkowiec</span>
                    <?php $numer=2 ?>
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="img/miniatura2.jpg">
                    <span>Przepis na coś tam</span>
                    <?php $numer=3 ?>
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="img/miniatura3.jpg">
                    <span>Kołacz z serem</span>
                    <?php $numer=4 ?>
                </a>
            </div>
        </div>
    </div>

    <?php echo "Zmienna numer = " . $numer ?>
 

i tak:

<ul>
        <li><a href="temat4.php?nr=1">Pasta z groszku</a></li>
            <?php $numer=1 ?>
            <?php echo "Zmienna numer = " . $numer ?>
        <li><a href="temat4.php?nr=2">Marchewkowiec</a></li>
        <?php $numer=2 ?>
        <?php echo "Zmienna numer = " . $numer ?>
        <li><a href="temat4.php?nr=3">Sałatka</a></li>
        <?php $numer=1 ?>
        <?php echo "Zmienna numer = " . $numer ?>
    </ul>


    <?php echo "Zmienna numer = " . $numer ?>

Za każdym razem zmienna przyjmuje ostatnią wartość. 

Proszę o poradę, jaką metodę tu zastosować, żeby dokonać wyboru.

Answer 1

<a href="?cake=apple">click</a>
<a href="?cake=pear">click</a>

<?php 
if(!isset($_GET['cake'])){
	null;
}else{ 
	switch($_GET['cake']){
		case 'apple':
			echo 'tak';
			break;
		case 'pear':
			echo 'nie';
			break;
	}
}

?>

 

Comments

Dziękuję za pomoc. Właśnie o to mi chodziło.

---

@ShiroUmizake  

Na razie nie znam jeszcze AJAX-a. Chyba muszę zacząć od JS i JQuery. Na pewno wykorzystam Twoje pomysły dot. mojego pytania.

Dziękuję Wam wszystkim za pomoc. Bardzo się przydała.

Answer 2

To zależy, jak bardzo chcesz się ograniczyć od backendu.

Mozesz walnać foreach w php wyechować listę miniaturek , doklejając id do img. Następnie, możesz zdarzenie AJAX po przez kliknięcie do jakiegoś tam serwisu obsługującego twoją bazę danych. Wcześniej twoje API (frontowe) zbudować sensowny URL wykorzystując np: id obrazka.

Inne rozwiązanie to automatycznie podczas zdarzenia load wywołować AJAX-a pobrać wszystko odrazu z niego, a póżniej najwyżej filtrować otrzymane dane. Ale tu jest trochę więcej roboty.