- Web projekti 2024./2025.
- 07/05/2025
Primjena AI u dodavanju funkcionalnosti forme - obrasca
Učenici 3.d razreda, predmet Web projekti, dobili su zadanu html/css Framework Bootstrap formu koja se koristi kao kontakt obrazac u dijelu web rješenja, koja nema postavljenu funkcionalnost. Kako rješenje traži poznavanje programskih jezika uz html i css koje učenici još nisu usvojili na potrebnoj razini (js i php), zadatak je bio osmišljen da provjeri način primjene AI aplikacije kao pomoć učenicima u rješenju.
Učenicima je zadatak podijeljen na dva dijela (Zad1. i Zad2.)
Kao pomoć učenici su za rješenje mogli koristiti bilo koji dostupan besplatan model koji koristi GPT, npr. ChatGPT 4.0, Microsoft Copilot: vaš AI pomoćnik (koji je korišten u primjeru) itd.
Učenicima je zadana osnovna forma kodirana i oblikovana uz html/css Bootstrap – poveznica: https://radovi-ucenici-web.suzana-sestan.from.hr/forma_osnova/
i dva dijela zadatka.
Za potrebe rješenja datoteka je prenesena na web poslužitelj, te su promjene rađene u tekstualnom editoru web poslužitelja.
Svaki zadatak je odrađen u okviru 2 školska sata.
Provjera ispravnosti polja - primjer1 - primjena scriptnoj jezika (javascript)
Zad1.:
Postaviti provjeru zadanih polja forme o pravilnom unosu podataka u polja (pravilni oblik email adrese, unos nedopuštenih znakova, prazno polje bez upisanih informacija).
Postavljanje upita - prompta
Primjer prompta. "Napiši kod za provjeru pravilnog oblika upisa traženih informacija u zadana polja, prema kodu."
Unesen je kod html/css za koji je potrebna nadogradnja za zadanu funkcionalnost.
Učenici su postavljali svoj koncept upita i prema potrebi dopunjavali ako kod nije zadovoljio tražene funkcionalnosti.
Prikaz funkcionalnosti koda za provjeru polja je na poveznici: https://radovi-ucenici-web.suzana-sestan.from.hr/forma_osnova/forma_provjerapolja/
Upit za slanje poruke na zadani email - primjer2 - (primjena php)
Zad2.:
Postaviti upit na način da se dobije funkcionalnost rješenja kako bi putem forme poruka bila poslana na zadani email.
Postavljanje upita - prompta i rješenje
Primjer prompta. "Za zadani kod dodaj funkcionalnost formi na način da poruka bude poslana na zadani email sss.skola@gmail.com"
Unesen je kod html/css za koji je potrebna nadogradnja za zadanu funkcionalnost. Učenici su postavljali različite kombinacije upita i testirali funkcionalnost koda, te dopunjavali upit ako rezultat nije bio ispravan, tj. poruka poslana na zadani email.
Html kod je nadopunjen atributima koji omogućuju slanje forme.
Prikaz funkcionalnosti koda forme za mogućnost slanja poruke na zadani email je na poveznici: https://radovi-ucenici-web.suzana-sestan.from.hr/forma_osnova/forma_rjesenjepost/
Zaključak: Primjena AI upita je doprinijela relativno brzom rješenju oba zadatka i bez izvrsnog poznavanja php i javascript jezika kao dopunu html i css_u. No za pravilne upite i usmjeravanje upita kako bi se dobilo pravo rješenje, kao i za sposobnost prepoznavanja elemenata koda, integracije koda je svakako potrebno predznanje i korištenje osnovne strukture i razumijevanja navedenih jezika.
Mogli bi reći da je kombinacija i korištenje AI upita kao metode pomoći u nekim dijelovima zadatka dobra kombinacija i pravi smjer bez da jedno isključuje drugo.
Fotogalerija
U istraživanju i pronalaženju rješenja zadatka uz pomoć AI su sudjelovali učenici 3.d Web dizajner.
Predmet: Web projekti
Mentor: Suzana Šestan, mag dizajna