ASP ja DHTML 27.8.2004 Seppo Räsänen
Liite 3 Sisällys 1 Tietokantojen käyttö sivuilla ASP-tekniikka...3 1.1. ASP ja VBScript...3 1.2. ASP ja J(AVA)Script...9 1.3. ASP ja Access...9 Lähteet...9 Himapizza-esimerkki...10
Liite 3 1 Tietokantojen käyttö sivuilla ASP-tekniikka 1.1. ASP ja VBScript ASP tulee sanoista Active Server Page. Tämä tekniikka toimii vain Microsoftin palvelimilla: IIS versio 3 tai tuoreempi, Peer Web (Windows NT) tai Personal Web Server (Windows 98/95). ASPtekniikka on esimerkki CGI-ohjelmoinnista eli ASP-sovellus toimii palvelimella ja se tuottaa HTML-kielisen sivun lähetettäväksi selaimelle. ASP-tekniikan avulla ollaan yhteydessä tietokantaan (luku, kirjoitus, päivitys ja poisto). ASP-tekniikka on hyvin yleinen kaupallisissa www-sivuissa. Vastaavia tekniikoita on olemassa muitakin. Esimerkiksi Linux palvelinympäristössä käytetään tietokantojen käsittelyssä PHP3 tekniikkaa. Se on vastaavanlainen, mutta kieli on hiukan erilainen. ASP-koodiminen voidaan tehdä useilla eri kielillä. Tähän soveltuvia kieliä ovat mm. vbscript (oletuskieli), j(ava)csript tai perl tai jollain muulla kielellä, mihin web-palvelimelle on käytetyn scriptikielen tulkki olemassa. Tietokantoina voi olla mikä tahansa kanta, johon on olemassa ODBCajurit (Open DataBase Connectivity). HTML-sivu Asiakas käyttäjän syöttämät tiedot Palvelin ASP-sivu vastaanotetut tiedot Submit HTML-sivu Generoitu HTML-vastaus palautus käyttäjälle Kuva 1. Periaatekuva ASP-tekniikan toiminnasta asiakkaan ja palvelimen välillä.
Liite 3 Nykyisessä ohjelmistotuotannossa tehdään sovelluksia, joissa web-liittymä toimii osalle käyttäjistä käyttöliittymänä ja normaali Windows-sovellus toiselle osalle käyttöliittymänä. Tällainen sovellus voi olla esimerkiksi web-kirjakaupassa. Asiakkaat ostavat kirjakaupasta web-pohjaisella liittymällä kirjoja ja kirjakaupanhenkilökunta tekisi vaikkapa raportteja Windows-sovelluksella. Molemmat sovellukset käyttävät samaa tietokantaa. Sovelluksen tekemisessä käyttään useita ohjelmistojen kehitysvälineitä, toisaalta projektin osan voi toteuttaa usealla eri välineellä. Windows-sovellus www-palvelin, jossa ASP-sovellus ja ODBC-yhteys tietokantaan ASP on esimerkki CGI-ohjelmasta Web-sovellus HTML-koodi Win32 sovellus, joka käyttää tietokantaa Voitu toteuttaa monella sovelluskehitysympäristöllä, esim. VB, Delphi, Visual C ja C++Builder client/server -sovellus ODBC-yhteys tietokantapalvelin Selain, jolla käytetään web-sovellusta site/server -sovellus Kuva 2. Kaaviokuva c/s ja s/s ohjelmista palvelimineen. Kuva 3. Esimerkki ASP-koodista, joka on toteutettu vbscript:n avulla. ASP-ohjelma tulostaa kymmnen kertaa viestin Hei, tulostun ASP:sta eri riveille.
Liite 3 Kuva 4. Kuvan 3 ASP-koodin tuottama www-sivun lähdekoodi selaimella. Palvelin, joka tukee ASP:tä, tarjoaa muutaman objektin, joita voi käyttää scripteissä. Näiden objektien ja objektien ominaisuuksien sekä metodien avulla rakennetaan toimiva webtietokantasovellus. Objektit ovat application objektin avulla voi jakaa tietoja ASP-sovelluksesta muiden käyttäjien kanssa. Application on tarkoitettu vain suhteellisen vähäiselle tietomäärälle. Syntaksi on Application( muuttuja ) = arvo, esim. Application( nimi ) = Ville. Tämän tiedon voi sijoittaa script:ssä muuttujalle, esim. nimeni = Application( nimi ). Application-objekti tulisi lukita käytönajaksi, mutta vain käytönajaksi. Lukinta taphtuu Application.Lock ja vapautus Application.Unlock lauseilla. session objekti tarkoittaa yhden käyttäjän istuntoa. Toimii vastaavalla tavalla kuin application-objekti, mutta session-objekti perustetaan jokaiselle käyttäjälle erikseen. request objektin avulla voi käsitellä tietoja, jotka on tuotu asiakkaalta palvelimelle httppyynnössä. Objektilla on muutama tärkeä kokoelma: Form hakee asiakkaan HTML:n POST-pyynnöllä lähetetyt tiedot ja QueryString hakee asiakkaan HTML:n GET-pyynnöllä lähetetyt tiedot. response objektia käytetään, kun halutaan tulostaa palvelimelta asiakkaan selaimelle. server objekti esittää web-palvelinta, jossa ASP-sovellus ajetaan. Lähinnä käyttö on aikavalvonnassa eli kuinka kauan sovellusta ajetaan, ennen kuin se päätetään. Tietokantaohjelmoinnissa käytetään käyttöliittymä/välikerros-mallia (kaksitasomalli). Tässä mallissa on käyttäjän ja varsinaisen tietokannan välissä käyttöliittymä ja välikerros. Käyttöliittymä
Liite 3 on ohjelma, jonka kanssa käyttäjä toimii. Välikerros toimii käyttöliittymän ja itse tietokannan välissä. Mallin kehittämisen syynä on se, että on olemassa useita tietokantamuotoja. Ohjelmoijan tarvitsee vain ohjelmoida välikerrostasolla. Tästä välikerrostasosta on esimerkkinä Microsoftin Jet Database Engine. Tietokantana voi olla mm. niin Accessin, dbasen, SQL-serverin kuin Oraclenkin kanta. käyttäjä verkkoyhteydet käyttäjä käyttäjä välikerros tietokantatiedosto Kuva 5. Yhteydet käyttäjän, käyttöliitttymän, välikerroksen ja tietokantatiedoston välillä. Tietokantasovelluksen ohjelmoinnissa pitää luoda palvelimella objekti. Vastaavalla tavalla voisi luoda muissakin tilanteissa luokasta instansseja, ASP-sovelluksissa käyttö lähinnä koskee tietokantojen käsitelyä. Kun luodaan tietokantayhteys, se luodaan lauseella Set yhteys = Server.CreateObject("ADODB.Connection"). Tämä yhteys pitää määrittää, mihin web-palvelimella olevaan ODBC-rajapintaan liittyy. Yhteyden avaaminen tehdään lauseella yhteys.open "ODBC;DSN=A538;UID=;PWD=;" Lauseessa DSN tarkoittaa web-palvelimella olevaan DataSourceName arvoa ODBC-ajurilla, UID tarkoitaa UserID:tä ja PWD PassWord:iä. Kun sovellus käsittelee tietokannan tietoja, niin operointi tehdään SQL-lauseiden avulla. Luetut tieodot viedään recordset-oliolle. SQL-lause tulee suorittaa. Tähän on olemassa kaksi erilaista syntaksia. Set rs = Server.CreateObject( ADODB.Recordset ) rs.open sql-lause, DSN=tunnus;UID=tunnus;PWD=salasana sql = sql-lauseet Set rs = yhteys.execute(sql) Tietokantayhteys siis muodostetaan ADO-objektin (ActiveX Data Objects) avulla. Todellisuudessa ADO on yhteydessä OLE DB:hen (Object Linking and Embedding DataBase). OLE DB on
Liite 3 fyysisessä yhteydessä tietokantaan. Käytännössä ohjelmoija ei tarvitse miettiä OLE DB:tä, sillä hän hoitaa tietokantayhteyden ADO:n avulla. ADA-objektimalli sisältää seuraavat objektit: Connection yhteys ohjelman ja tietokannan välillä Command kysely tai käsky, joka lähetetään tietolähteeseen suoritettavaksi Recordset joukkotietuteita, jotka palautuvat tietolähteestä vastauksena kyselyyn. Jos Recordset on tyhjä, niin EOF (End Of File) ja BOF (Beginning Of File) ovat True. Field yksi sarake tietoa Recordset-objektin sisällä Error tieto tietolähteen virhetilanteista Parameter yksi tietoyksikkö, joka on liitetty Command-objektiin Property ADO-objektin ominaisuus Kuva 6. Esimerkki tietokantayhteyden muodostamisesta vbscript:n avulla. Tietojen vastaanottaminen asiakkaalta tapahtuu HTML-määrityksen <FORM>-tagin avulla. <FORM>-tagilla luodaan lomake. Lomakkeella on kaksi metodia POST ja GET. Ne eroavat tavasta lähettää tiedot palvelimelle. GET liittää tiedot ACTION-ominaisuuteen URL:n peraan erotettuna kysymysmerkillä, kun taas POST lähettä tiedot erikseen, ei URL:n perään erotettuna. GET rajoittaa palvelimelle lähetettävän tiedon määrän 255 merkkiin, mutta POST:lla ei ole rajoitusta. GET-menetelmän avulla oleva tieto luetaan muuttujalle muuttuja = Request.QueryString( inputmuuttuja ) lauseella, POST menetelmällä tieto luetaan muuttuja = Request.Form( inputmuuttuja ) lauseella.
Liite 3 Kuva 7. Esimerkki Ilmoittautumis-sivusta, jossa on vastaus.asp kutsunta, menetelmänä on GET. Kuva 8. Kuvan 7 Ilmoittautumissivun vastaus.asp-koodi. Koodin avulla tarkistetaan, että onko etunimi ja sukunimi kentissä tietoa. Jos tiedot ovat, niin siirrytään www.aedu.kuopio.fi sivulle, muutoin ilmoitetaan käyttäjälle, että molemmissa kentissä on oltava tietoa. ASP-sovelluksessa voidaan välittää parametri-tietoja. Parametrit näkyvät URL-osoitteessa ASPtiedoston jälkeen olevan kysymysmerkin perässä. Tällainen esimerkki löytyy liitteestä 4. Liitteen 3 koodissa on määritelty parametrinvälitys. <a href="tilaus.asp?tuotenro== rs.fields("tuotenro")"> -lauseessa linkki avaa tilaus.asp tiedoston, jossa välitetään parametrinä tuotenro. Tuotenro tulee tietokannasta Tuotenro-kentästä.
1.2. ASP ja J(AVA)Script Liite 3 ASP-tekniikan toteuttamiseen voidaan käyttää myös J(ava)script-kieltä. Toteutuksen ajatusmalli on vastaavanlainen kuin vbscriptilläkin. Ohjelmointikielen syntäksi muuttuu J(ava)script-kielen mukaiseksi. Liitteessä 5 on esimerkki Jscript-kielisestä ASP-sivusta. Kyseisessä ohjelmassa luetaan Access-tietokannasta Opinnet-kokoukseen ilmoittautuneet henkilöt. Liitteessä 6 on ohjelmakoodi, jonka avulla henkilöt voivat ilmoittautua ko. kokoukseen. 1.3. ASP ja Access Microsoftin Access tietokantasovelluksen avulla voi tallentaa tietokannan taulun DHTMLsivuiksi. Tietokannan taulusta saa tehtyä staattisen HTML-tiedoston. Staattinen sivu ei muutu vaikka tietokannassa tapahtuisikin muutoksia. Dynaamisempi tapa tuottaa sivusto on dynaaminen HTX/IDC tiedostorakenne. Tämä tapa on ASP-tekniikan edeltäjä. Sivu on dynaaminen. Kolmas tapa on tehdä dynaaminen ASP. Tällä tavalla on helppo generoida valmista koodia, jota voi muokata sekä parantaa sivuston ulkoasua. ASP-sivun toiminta vaatii web-palvelimen. Lähteet http://www.saunalahti.fi/~vlaitila/css.html Simpson Alan; Microsoft Internet Explorer Web-ohjelmointi Aitken Peter; Internet-ohjelmointi Visual Basic Moncur Michael; JavaScript Niemi Juha, Kiuttu Petri; Java script ohjelmointi lisää interaktiivisuutta www-sivuillesi Peltomäki, Inkinen, Rantala; CGI- ja ASP-ohjelmointi Reynolds Matthew; e-kauppa http://www.microsoft.com (vbscript ja jscript) Microsoft Access2000 ohjeisto
Liite 3 Himapizza-esimerkki Kuva. Himapizzan Menu-sivu. Alla koodi, jolla ko. sivu toteutetaan.
' -------------------------------- ' Tässä otetaan yhteys a538 ODBC-tiedostoon Set conn = Server.CreateObject("ADODB.Connection") conn.open "DSN=a538;UID=;PWD=;" ' Otetaan käyttöön recordset 'Set rs = Server.CreateObject("ADODB.Recordset") 'rs.open "Select * from pizzat Order By tuotenro Asc;", "DSN=a538;UID=;PWD=;" ' vastaava asia tehtynä toisin sql = "Select * from pizzat Order By tuotenro Asc;" Set rs = conn.execute(sql) <HTML> <HEAD> <TITLE> MENU - HimaPizza </TITLE> </HEAD> <BODY> <center> <IMG SRC="himapit.gif" BORDER=0 ALT="Hima-Pizza"> <p> <table border=0> rs.movefirst Do Until rs.eof <td align=right><b>=rs.fields("tuotenro").</b></td> <td><b> <a href="tilaus.asp?tuotenro==rs.fields("tuotenro")"> =rs.fields("nimike") </a></b></td> <td><b>=rs.fields("hinta") mk</b></td> If rs.fields("tarjous") Then <td><font color=red><b>tarjous</font></b></td> End if <td></td> <td>=rs.fields("selite")</td> rs.movenext Loop </table> </center> </BODY> </HTML> ' suljetaan connection ja recordset rs.close() conn.close() Liite 3
Liite 4 Kuva. Himapizzan Tilauslomake. Tilauksessa on tilattu tuotenro=1 oleva pizza (näkyy osoitteesta). Pizzan tiedot ovat tilauslomakkeella. ' Tässä tehdään lomakkeen avulla tilaus ' Lomakkeella on pizzan nimi ' Ensimmäisen asiana pitää luoda yhtyes tietokantaan valinta = Request.Form("toiminto") If valinta = "Peru" Then Response.Redirect("default.htm") Elseif valinta = "Tilaa" Then Set conn = Server.CreateObject("ADODB.Connection") conn.open "DSN=a538;UID=;PWD=;" sql = "INSERT INTO Tilaukset (Sukunimi, Etunimi, Lahiosoite, Postinro, Postitp, Puhelin, Tuotenro, Lisukkeet, Juoma, Toimitustapa) VALUES ('" & Request("snimi") & "','" & Request("enimi") & "','" & Request("lahios") & "','" & Request("postinro") & "','" & Request("postitmp") & "','" & Request("puh") & "'," & Request("tuotenro") & ",'" & Request("lisuke") & "','" & Request("juoma") & "','" & Request("toimitus") & "')" 'Response.write sql 'Set rs = conn.execute(sql) conn.execute(sql) conn.close() Response.Redirect("default.htm") Else Set conn = Server.CreateObject("ADODB.Connection") conn.open "DSN=a538;UID=;PWD=;" sql = "Select Tuotenro, Nimike, Hinta FROM pizzat WHERE Tuotenro =" & Request("tuotenro") Set rs = conn.execute(sql) End If
<HTML> <HEAD> <TITLE> TILAUS - HimaPizza </TITLE> </HEAD> <BODY> <center> <IMG SRC="himapit.gif" BORDER=0 ALT="Hima-Pizza"> <p> <H1>TILAUSLOMAKE</H1> <p> <form method="post" action="tilaus.asp"> <input type="hidden" name="tuotenro" value="=rs.fields("tuotenro")"> <table> <td>sukunimi:</td> <td><input type="text" name="snimi"></td> <td>etuninimi:</td> <td><input type="text" name="enimi"></td> <td>lähiosoite:</td> <td><input type="text" name="lahios"></td> <td>postiosoite:</td> <td><input type="text" name="postinro" size=5><input type="text" name="postitmp"></td> <td>puhelin:</td> <td><input type="text" name="puh"></td> <td>pizza:</td> <td>=rs.fields("nimike")</td> <td>hinta: =rs.fields("hinta") mk</td> <td valign="top">lisukkeet:</td> <td> <input type="checkbox" name="lisuke" value="sipuli">sipuli<br> <input type="checkbox" name="lisuke" value="ananas">ananas </td> <td> <input type="checkbox" name="lisuke" value="valkosipuli">valkosipuli<br> <input type="checkbox" name="lisuke" value="juusto">juusto </td> <td>juoma:</td> <td> <input type="radio" value="cola" checked name="juoma">cola <input type="radio" value="vichy" name="juoma">vichy <input type="radio" value="olut" checked name="juoma">olut </td> <td>toimitustapa:</td> Liite 4
<td> <input type="radio" value="haetaan" checked name="toimitus">haetaan <input type="radio" value="tuodaan" name="toimitus">tuodaan </td> </table> <input type="submit" value="tilaa" name="toiminto"> <input type="submit" value="peru" name="toiminto"> </form> </center> </BODY> </HTML> ' suljetaan connection ja recordset rs.close() conn.close() Liite 4
Liite 6 @ Language=JSCRIPT // ------------------------------------------------------ // luodaan olio, joka viittaa ado-kantayhteyteen conn = Server.CreateObject("ADODB.Connection"); conn.open("opinnet"); // ------------------------------------------------------ // kehitellään sql-lause sql = "Select * from Ilmoittautuneet order by Sukunimi asc"; // ------------------------------------------------------ // tuodaan rs-muuttujaan kyselyn mukaiset tiedot eli suoritetaan // sql-kysely rs = conn.execute(sql); var lkm = 1; <html> <head> <meta name="generator" content="microsoft FrontPage 3.0"> <title>opinnet kokous Kuopion Rauhalahdessa 2.-3.12.1999</title> </head> <body background="tausta.jpg" vlink="#0000ff" alink="#0000ff"> <table border="0" width="100%" height="292"> <td width="21%" height="286" valign="top"><h5 align="center"><br> <a href="http://www.edu.fi/projektit/opinnet/"><img src="opinnet.gif" width="140" height="93" alt="opinnet.gif (3453 bytes)" border="no"></a><br> <br> <a href="index.htm"><big>opinnet kokous/pikkujoulu Kuopion Rauhalahdessa</big><br> 2.-3.12.1999</a></h5> <p><big> </big> <a href="paikka.htm">paikka</a><br> <a href="ohjelma.htm">ohjelma</a> <img src="uusi.gif" width="23" height="12"><br> <a href="ohjeita.htm">ohjeita</a><br> <a href="ilmo.asp">ilmoittautuminen</a> <img src="lippu.gif" width="16" height="13" alt="lippu.gif (893 bytes)"><br> <a href="ilmoittautuneet.asp">ilmoittautuneet</a> <br> <a href="majoitus.htm">majoitus</a></p> <p><a href="http://www.aedu.kuopio.fi"><small>kuopion ammatillinen aikuiskoulutuskeskus</small></a></td> <td width="79%" height="286" valign="top"><blockquote> <p><strong><br> <big>opinnet-evaluointiseminaari / pikkujoulu - ilmoittautuneet aakkosjärjestyksessä</big></strong></p> </blockquote> <table border="0"> while (!rs.eof) { <td align="left"><font size="+1" color="blue"><font size="-1"> Response.write(lkm).</font> = rs("sukunimi"), = rs("etunimi") <font size="-1"><a href="mailto:= rs("e_mail")">(= rs("e_mail"))</a></font>; = rs("oppilaitos")</font></td> rs.movenext(); lkm +=1; } rs.close(); conn.close();
Liite 6 </table> </td> </table> </body> </html> @ Language=JScript toim ="" + Request("toiminto"); if (toim == "Paluu") Response.Redirect("index.htm"); if (toim == "Ilmoittaudu") { conn = Server.CreateObject("ADODB.Connection"); conn.open("opinnet"); osoite = "" + Request("email") if (osoite == "") osoite = " ei emailia"; sql = "insert into Ilmoittautuneet (Sukunimi,Etunimi,Oppilaitos,Lahiosoite,PostiNro,Postitmp, " + "E_mail, Puhelin) " + "VALUES ('" + Request("snimi") + "','" + Request("enimi") + "','" + Request("oppilaitos") + "','" + Request("lahios") + "','" + Request("postinro") + "','" + Request("postitmp") + "','" + osoite + "','" + Request("puhelin") + "')"; conn.execute(sql); conn.close(); Response.Redirect("ilmoittautuneet.asp"); } else { <html> <head> <title>opinnet kokous Kuopion Rauhalahdessa 2.-3.12.1999</title> </head> <body background="tausta.jpg" vlink="#0000ff" alink="#0000ff"> <table border="0" width="100%" height="292"> <td width="21%" height="286" valign="top"><h5 align="center"><br> <a href="http://www.edu.fi/projektit/opinnet/"><img src="opinnet.gif" width="140" height="93" alt="opinnet.gif (3453 bytes)" border="no"></a><br> <br> <a href="index.htm"><big>opinnet kokous/pikkujoulu Kuopion Rauhalahdessa</big><br> 2.-3.12.1999</a></h5> <p><big> </big> <a href="paikka.htm">paikka</a><br> <a href="ohjelma.htm">ohjelma</a> <img src="uusi.gif" width="23" height="12"><br> <a href="ohjeita.htm">ohjeita</a><br> <a href="ilmo.asp">ilmoittautuminen</a> <img src="lippu.gif" width="16" height="13"><br> <a href="ilmoittautuneet.asp">ilmoittautuneet</a> <br> <a href="majoitus.htm">majoitus</a></p> <p><a href="http://www.aedu.kuopio.fi"><small>kuopion ammatillinen aikuiskoulutuskeskus</small></a></td> <td width="79%" height="286" valign="top"><blockquote> <p><strong><br> <big>opinnet-evaluointiseminaari / pikkujoulu - ilmoittautuminen</big></strong></p> <p>kokouskustannuket ovat 950,- + majoittuminen. <strong>ilmoittaudu 30.10.1999 mennessä!
<br> Peruessasi ilmo ittautumisesi, ota yhteyttä <a href="mailto:sisko.seppa@aedu.kuopio.fi">sisko Seppään</a> (puh. 017-188 666, 050-591 0531).</strong></p> <p><small><img src="lipput.gif" " width="16" height="13"> = tarpeellinen tieto</small></p> <form METHOD="post" action="ilmo.asp"> <table border="0" width="652"> <td width="83"><strong>sukunimi</strong></td> <td width="561"><input type="text" name="snimi" size="36"> <img src="lipput.gif" " width="16" height="13"></td> <td width="83"><strong>etunimi:</strong></td> <td width="561"><input type="text" name="enimi" size="36"> <img src="lipput.gif" " width="16" height="13"></td> <td width="83"><strong>oppilaitos:</strong></td> <td width="561"><input type="text" name="oppilaitos" size="36"> <img src="lipput.gif" " width="16" height="13"></td> <td width="83"><strong>lähiosoite:</strong></td> <td width="561"><input type="text" name="lahios" size="36"> <img src="lipput.gif" " width="16" height="13"></td> <td width="83"><strong>postiosoite:</strong></td> <td width="553"><input type="text" name="postinro" size="11"> <input type="text" name="postitmp" size="22"> <img src="lipput.gif" " width="16" height="13"></td> <td width="83"><strong>sähköposti:</strong></td> <td width="561"><input type="text" name="email" size="36"></td> <td width="83"><strong>puhelin:</strong></td> <td width="561"><input type="text" name="puhelin" size="36"> <img src="lipput.gif" " width="16" height="13"></td> </table> <p><input type="submit" value="ilmoittaudu" name="toiminto"> <input type="submit" value="paluu" name="toiminto"></p> </form> </blockquote> </td> </table> </body> </html> } Liite 6