Sådan kan du sende data fra din egen hjemmeside til JitBesked via en HTML-JDF.

Transkript

1 Sådan kan du sende data fra din egen hjemmeside til JitBesked via en HTML-JDF. Vejledningen her beskriver hvordan man opbygger en form i HTML og sender indholdet af felterne til JitBesked. Det kræver du har lidt erfaring med hjemmesider og HTML, og at du selvfølgelig har adgang til at oprette og ændre sider på jeres site. Vi starter helt bagvendt med at vise et eksempel på en komplet kald. rl&returnerror=url&receiver=mobilnummer&name=navn&address=adresse&zipcity=postnr_og_by&sf1=felt1& sf2=felt2& sf3=felt3& sf4=felt4& sf5=felt5 Vi kan vist godt bruge en nærmere forklaring af de enkelte parametre. Bemærk at listen herunder viser flere muligheder end eksempelkaldet. Feltnavn Påkrævet Beskrivelse Eksempel action Ja Bestemmer om der er tale action=enrol om en tilmelding (enrol) eller en afmelding (cancel). cid Ja Aftalenummeret du har cid= fået tildelt. jdfid Ja Et logisk navn som du jdfid=medlemmer beder Jitklienten abonnere på. returnok Ja En url på en side du vil vise returnok= hvis registreringen gik godt. returnerror Ja En url på en side du vil vise returnerror= hvis registreringen ikke gik så godt. receiver Ja Modtagerens reveicer= mobilnummer, fastnetnummer eller . name Ja Navnet på modtageren. name=peter+thomsen jit_number Nej Modtagerens Jit-nummer jitnumber= cell_phone Nej Modtagerens cell_phone= mobilnummer fixed_line Nej Modtagerens fixed_line= fastnetnummer Nej Modtagerens adresse =aaaa@bbbb.dk address Nej Adressen på modtageren address=hovedgaden+1 address2 Nej Adresse2 på modtageren address2=ved+åen zipcity Nej Postnummer og by på zipcity=4600+køge modtageren. birthday Nej Modtagerens fødselsdag i Birthday= formatet dd-mm-yyyy sf1 Nej Det data der skal lande i sf1=hold+1 søgefelt 1 i klienten. sf2 Nej Det data der skal lande i sf2=23 søgefelt 2 i klienten. sf3 Nej Det data der skal lande i Sf3= søgefelt 3 i klienten. sf4 Nej Det data der skal lande i sf4=info@jitbesked.dk søgefelt 4 i klienten. sf5 Nej Det data der skal lande i søgefelt 5 i klienten. sf5=hurtigst+muligt

2 Nu ved vi hvad det er vi skal ende op med, og det er faktisk ikke så slemt som det kunne se ud til. Vi benytter en HTML-form til at indsamle vores data, og får på den måde opbygget den lidt kryptiske linie vi så før. Bemærk:Hvis du ikke benytter en form til at samle data, skal du huske at url-encode din streng før du sender den! Her er et eksempel på en form. <form name="htmljdf" method="get" action=" <font face="tahoma" size="1">mobilnummer : <br/> <input type="text" name="receiver" size="10" maxlength="8"><br/> Navn :<br/> <input type="text" name="name" size="40" maxlength="50"><br/> Adresse :<br/> <input type="text" name="address" size="40" maxlength="50"><br/> Postnummer og by :<br/> <input type="text" name="zipcity" size="40" maxlength="50"><br/> <br/> <input type="text" name="sf1" size="30" maxlength="50"><br/> Fødselsdag :<br/> <input type="text" name="sf2" size="20" maxlength="50"><br/> Ønsket kørekort :<br/> <select size="1" name="sf3"> <option>almindelig bil - B</option> <option>motorcykel - A</option> <option>trailer - B/E</option> <option>erhvervskort (TAXI) - EP-B</option> <option>kontrollerende køreprøve</option> <option>generhverv</option> <option>rutinelektioner</option> </select><br/> Ønsket startdato :<br/> <input type="text" name="sf4" size="30" maxlength="50"><br/> Eventuelle kommentarer (maks. 50 tegn):<br/> <textarea rows="2" name="sf5" cols="40"></textarea> </font></p><br/> <input type="hidden" name="action" value="enrol" /> <input type="hidden" name="cid" value=" " /> <input type="hidden" name="jdfid" value="test" /> <input type="hidden" name="returnok" value=" " /> <input type="hidden" name="returnerror" value=" " /> <input type="submit" value="tilmeld" name="tilmeld"> <input type="reset" value="reset" name="ryd"></p> </form> Teksten markeret med rødt er det du skal ændre til dine egne parametre før eksemplet vil virke, men ellers bør du kunne placere ovenstående på en HTML-side og sådan set være igang. Du kan slette felterne address, zipcity, sf1, sf2, sf3, sf4 og sf5 da de ikke er påkrævet, men mindst et søgefelt skal du jo nok bruge. Så let var det! :o)

3 Validering. Der er dog en ting vi indtil nu har sprunget let hen over og det er validering. Altså det at teste på om det der bliver indtastet nu også er det vi forventer. Det kan være ret kompliceret alt efter hvilket sprog ens web-løsning er skrevet i, og der er mange måder at gøre det på. En løsning vi har brugt til vores eksempler er følgende : På kan du hente et java-script modul som kan foretage client-side validering. Altså validering der foregår ude på den enkelte klient-pc. På denne side finder du også en udmærket beskrivelse af hvordan det skal bruges. Du henter altså filen gen_validatorv31.js og lægger den et sted på din server. I header-sektionen på din side, skal du referere denne med : <script type="text/javascript" src="gen_validatorv31.js"/> Husk at rette stien til hvis du har lagt filen i et under-bibliotek. I body-sektionen (fx under <form> elementet) lægger du så de linier der fortæller validatoren hvad den skal kontrollere i de enkelte felter. <script language="javascript" type="text/javascript"> var formvalidator = new Validator("htmlJDF"); formvalidator.addvalidation("receiver","req","mobilnummeret skal være udfyldt. Hvis du ikke har en mobiltelefon, kan du tilmelde dig via eller telefon."); formvalidator.addvalidation("receiver","num","mobilnummeret indeholder et ugyldigt tegn"); formvalidator.addvalidation("name","req","navn skal være udfyldt"); formvalidator.addvalidation("address","req","adresse skal være udfyldt"); formvalidator.addvalidation("zipcity","alnumspc","postnummer og by skal være udfyldt"); formvalidator.addvalidation("sf1"," "," adressen er ikke gyldig"); formvalidator.addvalidation("sf2","req","fødselsdag skal være udfyldt"); formvalidator.addvalidation("sf4","alnumspc","startdatoen indeholder et ugyldigt tegn"); formvalidator.addvalidation("sf5","alnumspc","kommentaren indeholder et ugyldigt tegn"); </script> Ovenstående er et eksempel der passer til formen vi så tidligere. Læg mærke til feltnavnene receiver, name osv som SKAL hedde sådan og SKAL være de samme som du bruger i HTML-formen. Kun når det hele hænger sammen, vil det virke som planlagt.

4 Et par bemærkninger omkring sikkerhed. Vejledning til opsætning af HTML-JDF version 2.0. Eksemplet vi har gennemgået er en dataopsamling i sin mest simple form, og har du en aktiv serverplatform med et sprog som fx. ASP eller PHP, er der der en ændring til setup et vi kraftigt vil anbefale! Problemet med eksemplet er, at formen afslører interne variable som aftalenummer og data ID m.m. Selvom uvedkomne ikke rigtigt kan bruge dette til noget, kan man ret let ændre eksemplet sådan at disse variable skjules helt. Sådan gør ud : Fjern alle Hidden variabler fra din form. Ret formens action til at pege på en side på dit eget site (herefter kaldet JDF data hub ). På denne nye side, trækker du formens data ud, og generer så det fulde kald som fx : JDF data hub eksempel i PHP : //konstanter define ("CID", " "); define ("JDFID", "MEDLEMMER"); define ("returnok", " define ("returnerror", " //faste oplysninger $dynamicurl = " &returnerror=".returnerror.""; //variable oplysninger if (isset($_get["receiver"])) { $dynamicurl.= "&receiver=".urlencode($_get["receiver"]); if (isset($_get["name"])) { $dynamicurl.= "&name=". urlencode($_get["name"]); if (isset($_get["address"])) { $dynamicurl.= "&address=". urlencode($_get["address"]); if (isset($_get["zipcity"])) { $dynamicurl.= "&zipcity=". urlencode($_get["zipcity"]); if (isset($_get["sf1"])) { $dynamicurl.= "&sf1=". urlencode($_get["sf1"]); //udfør kaldet header("location:".$dynamicurl); En kort gennemgang af scriptet: Script-eksemplet herover, definerer først en række konstanter. Herefter sættes en variabel med det grundlæggende kald. Så undersøges hvilke data der sendes fra formen, og det dynamiske kald bygges op. Der testes med isset for at undgå at der sendes tomme parametre som fx &sf1=&sf2=&sf3=.

5 $_GET( receiver ) trækker data fra formens receiver felt ud, og hvis det indeholder data, tilføjes det til det endelige kald. Du tilføjer altså lige så mange af disse $_GET( xxx ) som du har data på din form. Du kan godt vælge nye navne til datafelterne på din form, hvis du blot husker at sætte de oprindelige navne op i kaldet mod htmljdfcollector20. Til sidst udføres det dynamiske kald. Andre muligheder med et JDF data hub. Designet ovenfor, giver også muligheder for at sende data forskellige steder hen alt efter type. Man kunne forstille sig en sportsportal, med en form der samler informationer om mange forskellige sportsgrene. Data sendes først til JDF data hub et der undersøger hvilken sportsgren personen der netop registrerede sig dyrker. Hvis der er tale om fx fodbold, sættes JDFID variablen til IF-FODBOLD, og er der tale om tennis, sættes JDFID til IF-TENNIS. Tennistræneres abonnerer så på IF-TENNIS, mens forboldtræneren abonnerer på IF-FODBOLD. De deler altså data mellem sig. Der kan selvfølgelig også deles på fx personens alder, køn, hold m.v. Endelig kan generel validering også placeres her, som et ekstra suplement til java-scriptet (brugeren kan også have slået javascript fra). Hvis du har spørgsmål eller kommentarer, så send dem endelig til support@jitbesked.dk Jit-Danmark ApS