24/25.3 WEB programiranje 3

Uvod - da ponovimo

HTML element <input> se koristi za unos ili izbor podataka od strane korisnika (text, check box, radio button, drop-down list). Nakon što korisnik unese informacije u <input> polja, HTML <form> element specificira na koju web stranicu treba to poslati, npr. nakon klika na dugme.

U ASP.NET-u ne moramo direktno da unosimo HTML elemente (ali, ako neko želi, može i to da koristi). 

• Umesto toga, koristimo odgovarajuće web kontrole, koje, nakon obrade, proizvode odgovarajući HTML kod.
  

• Na primer, umesto da se koristi HTML <form> element, u ASP.NET stranicama se koriste Web Forme.
  

  S obzirom da su u okviru predmeta Web dizajn i Web programiranje korišćeni različiti input tagovi i forme, ovde se nećemo zadržavati na tome, već odmah prelazimo na ASP.NET varijantu:

ASP.NET Web Forme

Da bi moglo da se vrši prikupljanje podataka koje unose korisnici na ASP.NET web stranici, na njoj mora da se nalazi web forma - to je web kontrola koja izgleda ovako:

 <form id=”ID” runat=”server”>
   ...
 </form>

Zadatak:

Kreirati web sajt sa jednom stranicom na kojoj se računa da li je korisnik debeo. To treba uraditi tako što korisnik treba da unese visinu i težinu, a kada se klikne na dugme treba da se izračuna BMI

• Kreirati novi web sajt (empty, C#) 
• u njega dodati novu web formu (C#, Default.aspx)
  
  • čak i ako je neko napravio sajt za VB, u njega se može dodati nova web forma pisana u C# (i obrnuto)
• unutar web forme prevlačenjem iz Toolbox-a ubaciti dva TextBox-a i dugme.
  
  • ispred prvog TextBox-a ubaciti tekst: "Visina u cm", a u samu web kontrolu postaviti da je ID="visina"
  • koristeći enter preći u novi red
  • ispred drugog TextBox-a ubaciti tekst: "Težina u kg", a u samu web kontrolu postaviti da je ID="tezina"
  • opet koristeći enter preći u novi red
  • na kraju postaviti dugme za slanje podataka (ID="odrediBMI",  a kroz Property postaviti Text: Izračunaj)
    • ako se ne navede ništa, renderovanjem se bilo koje dugme u web formi pretvara u Submit dugme, tako da o tome ne treba da se razmišlja
  • ispod dugmeta dodati Label kontrolu u koju će se ispisati poruka (ID="poruka", Text je na početku prazan)

Napomena:

ASP.NET web forme se renderuju kao postback forme: koristi se method=post, a podaci se šalju na istu stranicu.  (Mi smo do sada češće radili sa redirect formama - gde se podaci šalju na drugu stranicu)

Drugim rečima, kada se klikne na dugme tipa submit, svi podaci sa forme se šalju na istu stranicu (engl. "the <form> was submitted. "). Na stranici ne mora ništa da se promeni, ali ako se malo bolje pogleda na Source, može se primetiti da su svi elementi u koje je korisnik uneo neke podatke sada sa atributom Value - u kojima se nalazi ono što  je korisnik uneo.

• dvoklikom na dugme (ili ručnim dodavanjem Click događaja) preći u deo gde se piše C# kod
• tamo upotrebiti navedenu formulu, a rezultat upisati u unesenu Label web kontrolu
  • (ovde se ne postavlje rešenje - da ne bi bilo samo kopiranja na času)

*********************

Drugi deo zadatka:

Na novoj web formi pitati korisnika na koji način se hrani, a kao odgovor treba da se odabere jedna od ponuđenih opcija (dijeta, normalna ishrana, vegan varijanta, samo meso)

• postaviti DropDownList - padajuću listu za izbor jedne od više ponuđenih opcija - prevući je u web formu (ID="izbor")
  • dodati opcije kroz Property -> Items (Collection) -> ... -> Add  i uneti Text za svaku od opcija
  • drugi način je ako se koristi smart tag (strelica koja se pojavi kada se selektuje komponenta ili se miš nalazi iznad nje)
• prilikom klika na dugme treba ispod poruke za prethodni deo zadatka dodati i poruku o izabranom načinu ishrane
  •   ....npr.  text : "način ishrane  je : " + izbor.SelectedItem.Text 
    

********************

Treći deo zadatka:

Na novoj web formi postaviti  izbor pomoću web kontrola tipa Radio Button: za izbor omiljene vrste sladoleda. Treba da se može odabrati samo jedna od ponuđenih opcija

• postaviti pitanje : Koji vam je omiljeni sladoled?
• Unutar web forme iz ToolBox-a prevući bar tri web kontrole tipa RadioButton: 
  • svakoj postaviti ID i Text (npr, ID="vanila", Text="vanila" - za sladoled od vanile)
  • za svaku od RadioButton web kontrola postaviti da pripadaju istoj grupi dugmića: Property -> GroupName postaviti na ukus
    • možda bi bilo dobro da je na početku postavljen jedan od ukusa (checked), a da to korisnik može da promeni ako želi
• ispod postaviti Button na kojem treba da piše "Klikni ovde"
  • dvoklikom na dugme u C#-u odrediti šta će da se desi nakon klika na dugme
    
  • Možda bi bilo dobro postaviti Label web kontrolu za ispis
    
  • 
    

    • if (vanila.Checked) Label1.Text = "omiljeni sladoled je vanila"

    • ili neka druga varijanta
    • a ako nije ni jedan ukus izabran onda treba ili napisati adekvatnu poruku ili se potruditi da je bar jedan ukus izabran tako što će jedan od ukusa biti odabran prilikom otvaranja stranice

*******************************

Četvrti deo zadatka:

Na novoj web formi postaviti izbor pomoću web kontrola tipa CheckBox: koje dodatke biste postavili u palačinke, ako ih jedete naravno

Na sličan način kao ranije postaviti pitanje i opcije: prevlačenjem web kontrola tipa CheckBox, dugme za slenje i Label za ispis poruke.

Za svaku od CheckBox web kontrola u Property postaviti ID i Text