24/25.3 WEB programiranje 3

Osvrt na gradivo obrađeno u okviru predmeta objektno-orijentisano programiranje

1. Šta je problem? ( prikaži / sakrij detaljnije objašnjenje ↑↓ )

Kada se suočavamo sa bilo kojim problemom, naš cilj je da pronađemo rešenje. U stvarnom životu, često razmišljamo o stvarima i ljudima koje poznajemo kako bismo razumeli problem i pronašli rešenje. Na primer, ako trebamo da popravimo bicikl, razmišljaćemo o biciklu kao celini, ali i o njegovim delovima kao što su točkovi, pedale, lanac.

Pitanje za razmišljanje: Kako biste rešili problem pokvarenog bicikla? Koje biste delove prvo proverili?

Ovakav način razmišljanja o stvarima i delovima može nam pomoći u kreiranju efikasnih rešenja, a OOP nam omogućava da ovako pristupimo problemima u programiranju.

2. Šta je objektno orijentisano programiranje (OOP) ?

Objektno orijentisano programiranje je način pisanja programa koji oponaša kako mi ljudi gledamo na svet oko nas. U OOP-u probleme rešavamo razmišljajući o objektima i akcijama koje ti objekti mogu izvoditi.

3. Rešavanje problema paradigmom objektno orijentisanog programiranja (OOP)

Rešavanje problema paradigmom objektno orijentisanog programiranja (OOP) može zvučati komplikovano, ali je zapravo jednostavna ideja koja pomaže da se složeni zadaci razdele na manje delove i da se organizuju tako da se lakše razumeju i reše. Evo kako to funkcioniše:

3.1. Prvo treba da razmišljamo o stvarima kao o objektima

3.2. Zatim treba pokušati da se prepozna šta svaki objekat ima i šta može da radi

3.3. Napraviti šablone za objekte – to su klase

3.4. Ako je problem složen, trabe ga razbiti na manje delove

• Objekat Učenik: ima ocene, ime i godine, i može da polaže testove.
• Objekat Nastavnik: ima ime, predmet koji predaje i može da ocenjuje učenike.
• Objekat Predmet: ima naziv i broj časova.

3.5. Objekti međusobno sarađuju

3.6. Kako ovo pomaže u rešavanju problema?

• Organizacija: Kada se problem podeli na objekte, sve je urednije i lakše za razumevanje.
• Ponovna upotreba: Jednom kada se objekat napravi, može da se koristi više puta. Ako već postoji klasa “automobil”, mogu se praviti različiti automobili bez ponovnog pisanja koda za svaki od njih.
• Jednostavnije menjanje: Ako nešto treba da se promeni, to se radi na jednom mestu (u klasi) i automatski će se ta promena odraziti na sve objekte.

4. Primeri primene na stvarni svet:

Primer 1. Može biti bicikl:

• Bicikl je objekat.
• Točkovi, pedale i lanac su delovi tog objekta.
• Bicikl može da vrti točkove i kreće se (akcije).

Primer 2. Osoba kao objekat: Zamislite da je osoba objekat. Kako biste opisali osobu koristeći OOP?

• Osoba (objekat):
  • Svojstva: ime, godine, visina, boja kose.
  • Akcije (metode): hodanje, govor, jelo.

OOP koristi ovaj način razmišljanja za stvaranje programa. Svaki program je poput malog sveta u kojem različiti objekti komuniciraju jedni s drugima.

5. Kako to izgleda u programiranju?

U programiranju, koristimo klase da definišemo objekte. Klasa je kao šablon koji opisuje kako objekat izgleda i šta može da radi. 

Objekat može biti bilo šta – osoba, automobil, računar, pa čak i bicikl. 

Svaki objekat ima:

• Svojstva (kao što su boja, veličina) koja ga opisuju.
• Metode ili akcije koje može obaviti (kao što su kretanje ili zaustavljanje).

Primer klase "Osoba" u programskom jeziku C#

class Osoba {
    // Svojstva
    public string ime;
    public int godine;

    // Metode
    public void Hodaj() {
        Console.WriteLine(ime +" hoda.");
    }

    public void Govori() {
        Console.WriteLine(ime + " kaže 'Zdravo!'");
    }
}

Kako to može da se primeni u web aplikacijama:

Na primer:

• Korisnik je objekat sa podacima o korisniku.
• Proizvod je objekat sa informacijama o proizvodu.
• Korpa za kupovinu je objekat koji čuva proizvode koje korisnik želi da kupi.

Sve ove komponente međusobno komuniciraju, što nam olakšava rad na aplikaciji.

Primer klase za korisnika (JavaScript)

class Korisnik {
    constructor(ime, email) {
        this.ime = ime;
        this.email = email;
    }

    prijava() {
        console.log(`${this.ime} je prijavljen.`);
    }

    odjava() {
        console.log(`${this.ime} je odjavljen.`);
    }
}

Vežba:

Povezati prethodni JavaScript kôd sa HTML stranicom i omogućiti interakciju korisnika putem web forme i dugmadi. Korisnik treba da može uneti svoje ime i email u HTML formu, a zatim klikom na dugme da se prikaže poruka o prijavi ili odjavi. (Ujedno to može da se prikaže i u konzoli.)

Koraci:

1. Kreirati jednostavnu HTML stranicu sa formom za unos korisničkog imena i email adrese.
2. Napraviti JavaScript klasu Korisnik za prijavu i odjavu putem dugmadi.

Naš HTML i JavaScript kod je sakriven iza sledećeg dugmića: Kompletan programski kod za html+JS

<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Korisnik Prijava/Odjava</title>
    <script>
        // Definisanje klase Korisnik
        class Korisnik {
            constructor(ime, email) {
                this.ime = ime;
                this.email = email;
            }

            prijava() {
                console.log(`${this.ime} je prijavljen.`);
                // Prikazivanje u HTML-u
                document.getElementById('status').innerText = `${this.ime} je prijavljen.`;
            }

            odjava() {
                console.log(`${this.ime} je odjavljen.`);
                // Prikazivanje u HTML-u
                document.getElementById('status').innerText = `${this.ime} je odjavljen.`;
            }
        }

        // Funkcija koja se poziva kada se korisnik prijavi
        function prijaviKorisnika() {
            const ime = document.getElementById('ime').value;
            const email = document.getElementById('email').value;

            if (ime && email) {
                // Kreiranje nove instance klase Korisnik
                const korisnik = new Korisnik(ime, email);
                korisnik.prijava(); // Pozivanje metode prijava
            } else {
                alert("Molimo unesite i ime i email.");
            }
        }

        // Funkcija za odjavu korisnika
        function odjaviKorisnika() {
            const ime = document.getElementById('ime').value;
            const email = document.getElementById('email').value;

            if (ime && email) {
                // Kreiranje instance klase Korisnik za odjavu
                const korisnik = new Korisnik(ime, email);
                korisnik.odjava(); // Pozivanje metode odjava
            } else {
                alert("Molimo unesite i ime i email.");
            }
        }
    </script>
</head>
<body>
    <h1>Prijava i odjava korisnika</h1>

    <!-- Forma za unos podataka korisnika -->
    <label for="ime">Ime:</label>
    <input type="text" id="ime" placeholder="Unesite ime"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="Unesite email"><br><br>

    <!-- Dugmad za prijavu i odjavu -->
    <button onclick="prijaviKorisnika()">Prijava</button>
    <button onclick="odjaviKorisnika()">Odjava</button>

    <!-- Prikaz statusa korisnika -->
    <p id="status"></p>
</body>
</html>

Šta se koristi u ovom primeru:

1. HTML deo:

   • Forma sa dva polja: jedno za unos imena (input sa id-em "ime") i drugo za unos email adrese (input sa id-em "email").
   • Dva dugmeta: jedno za prijavu i drugo za odjavu. Dugmad pozivaju JavaScript funkcije prijaviKorisnika() i odjaviKorisnika().

2. JavaScript deo:

   • Prvo se definiše klasa Korisnik sa metodama prijava i odjava.
   • Kada korisnik unese ime i email i pritisne dugme "Prijava", kreira se nova instanca klase Korisnik i poziva se metoda prijava(). Isto važi i za odjavu.
   • Prikaz rezultata: Korisnikova prijava ili odjava se prikazuje u elementu sa id-em status.

3. Konzola i status:

   • Poruke o prijavi ili odjavi korisnika se prikazuju u konzoli (console.log) i na web stranici, u okviru <p> elementa sa id-em status.

Ovaj primer je kreiran da bi se učenicima omogućilo da vežbaju kako se klasa koristi u realnim web aplikacijama, kao i osnovnu interakciju između HTML-a i JavaScript-a.

Predlog vežbi za naprednije učenike:

1. Provera unosa: Mogu se dodati provere za ispravnost email adrese.
2. Dodavanje dodatnih metoda: Možda neko uspe da doda funkciju za promenu email adrese ili dodavanje lozinke.
3. Interaktivnost: Možda da se dugmad deaktiviraju ako su polja prazna.