23/24.4 Primenjene informacione tehnologije 4

Iz priručnika za maturu pokušati uraditi zadatak B01 - Foto galerija

... Materijali koji su vam potrebni mogu se preuzeti: Materijali_B01

• Slike postaviti u poseban folder koji je unutar foldera sa vašim zadatkom (iako nema slika, postaviti folder za slike radi bodova)
  
• Folder sa vašim zadatkom treba da je na web serveru (D:> XAMPP > htdocs) - da bi bilo "objavljeno na lokalnom web serveru"
  
• Trebate imati 3 fajla i navigaciju između njih (na vrhu svakog od fajlova)
  
• Tekst na stranicama pisati ĆIRILICOM
• Možete koristiti Bootstrap, ali i ne morate (to je CSS biblioteka)
  
• Možete koristiti jQuery ili običan JavaScript za funkcionalnosti
• CSS i JS treba da su u posebnim fajlovima !

....

Saveti za rad:

1. jQuery ili "običan" JavaScript - odlučite sami ....

   Ako se za to odlučimo, možemo i da se odlučimo da koristimo i jQuery sa navođenjem linka u head-u:

     <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

2. Da li koristiti PHP - i to odlučite sami ...

  Kao primer skraćivanja posla korišćenjem PHP-a, prikazan je jedan način prikaza više slika, jedna iza druge (male slike na dnu) :

    <div class="maleSlike">
          <?php
            for ($x = 1; $x <= 10; $x++) {
               echo "<img class=mala id='$x' src='slike/slika$x.jpg'>";
               }
          ?>
    </div>

Napomena: Ne zaboravite da u css-u postavite odgovarajuće dimenzije za male slike !

3. Klikom na malu sliku se treba prikazati velika ta odabrana slika

 ... predlog: pomoću JS ili jQuery na događaj click na malu sliku:  očitati atribut src male slike i postaviti je kao atribut src velike slike

4. Fajl se može učitati ili pomoću PHP-a (jednom) ili pomoću JavaScripta (po potrebi i na klik ako treba). 

     ( U novijim web browserima vam neće dati da u JS koristite .get : sigurnosni rizik! )

    Primer čitanja fajla pomoću PHP-a:

    <?php
      $ceoTekst = file_get_contents('fajlovi/opisiSlika.txt');
      $redovi = explode(PHP_EOL,$ceoTekst); // dobije se niz redova teksta iz fajla
    ?>

...  Ako je ovo u nekom php fajlu, uradi se include tog fajla na početku, a u delu gde vam je potreban tekst doda se na primer:

      echo $redovi[0];

... Ili samo deo reda, na primer sa početkom od slova sa indeksom 11:

      echo substr($redovi[0],11);>

    Primer čitanja fajla pomoću JavaScript-a:

.... Predlog je korišćenje XMLHttpRequest-a:

 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var ceoTekst =   this.responseText;
        var redovi = ceoTekst.split("\n");
        
        // razmislite kako da prikažete onaj red koji vam treba ili samo jedan njegov deo
        // zatim to što prikazujete smestite u neku promenljivu, npr prikaz
        // i time zamenite unutrašnji html dela gde ide tekst
        // pa tako, da ako je id = "nekiID"  dela gde ide taj prikaz:
   
        $("#nekiID").html(prikaz);
        }
      };
  xhttp.open("GET", "fajlovi/opisiSlika.txt", true);
  xhttp.send();

....

U slučaju čitanja fajla pomoću JavaScript-a (koliko god da taj alat za to nije namenjen) - razmisliti kada da se to radi. 

Ako je prilikom događaja klik na malu sliku potrebno prmeniti veliku sliku, i ako se u isto vreme treba izmeniti tekst na vrhu, može da se zaključi da se sve to radi prilikom klika na malu sliku.

---

---

---

Za one koji žele da znaju VIŠE:

---

---