Primjena AI u dodavanju funkcionalnosti forme - GRADITELJSKA ŠKOLA ČAKOVEC

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).

Odgovor - dio postojećeg html koda

Prikaz odgovora dijela povratnog koda.

Odgovor - rješenje - dodatak javascript

Prikaz odgovora dijela povratnog koda. AI je dodao i bez upita dodatak - Javascript kako bi omogućio traženu funkcionalnost u kombinaciji sa zadanim kodom.

Provjera forme - ispravnosti unosa

Ovaj kod čeka da se DOM potpuno učita, a zatim postavlja submit event listener na formu. Prilikom pokušaja slanja forme provjerava se: Je li polje "Ime" prazno. Je li email adresa u ispravnom formatu pomoću regularnog izraza. Je li polje "Poruka" prazno. Ako bilo koja od provjera ne prođe, korisniku se prikazuje odgovarajuća poruka upozorenja, a slanje forme se sprječava.

Provjera forme - prazna polja

Prikaz poruke u slučaju da je neko polje ostalo prazno prije klika na gumb "Pošalji poruku".

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.

Rješenje - php skripta

Kreirana je php datoteka imena sendMail.php koja daje funkcionalnost html formi prema zadanim postavkama metodom post. Učenici su zadali sami naziv php datoteke ili su koristili naziv koji je predložen uz AI.

Rješenje - provjera funkcionalnosti

Nakon kreiranja php datoteke s kodom koji je generiran pomoću AI na temelju pravilnog upita, napravljena je provjera funkconalnosti forme, te je poruka poslana na zadani email sss.skola@gmail.com, a za pošiljatelja je naveden email u prikazu.

Slanje poruke - povratna informacija

Ako je poruka uspješno poslana i kod ispravan, pokazuje se poruka "Poruka je uspješno poslana. Hvala na kontaktu!"

Pristigla poruka - zadani mail

Pristigla poruka na zadani mail potvrđuje da je kod ispravan i forma u potpunosti funkcionalna prema traženim postavkama.

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

Primjena AI u dodavanju funkcionalnosti forme - obrasca

Provjera ispravnosti polja - primjer1 - primjena scriptnoj jezika (javascript)