p1 = JAVASCRIPT p13= AJAX p26= PHP 1

Transcriptie

1 p1 = JAVASCRIPT p13= AJAX p26= PHP 1 JAVASCRIPT Leeftijd + 2 <script language="javascript" type="text/javascript"> var leeftijd = prompt('hoe oud ben je?', 'vul hier je leeftijd in'); var leeftijd2 = parseint (leeftijd)+2; prompt('wanneer denk je te sterven?', leeftijd2); Naam in Alert <script language="javascript" type="text/javascript"> var naam = prompt('wat is je naam?', 'vul hier je naam in'); alert('hallo, ' + naam + '. \nwelkom op deze website!'); Hoelang is de dag bezig <script language="javascript" type="text/javascript"> var uur = prompt('hoe laat is het (uur)?', 'vul hier het uur in'); var minuten = prompt('hoe laat is het (minuten)?', 'vul hier de minuten in'); var seconden = (parseint(uur)*3600) + (parseint(minuten)*60); alert('de dag is ' + seconden + ' seconden bezig..,'); Verander achtergrondkleur <script language="javascript" type="text/javascript"> var color = prompt('gelieve een kleur op te geven', 'vul hier de kleur in') document.writeln("<style> body{background: #" + color + "; </style>"); Toon info bij afbeelding <img src="01.jpg" alt="bmw" onmouseover="document.info.text.value='ochot, nen BWM!'" /> <img src="02.jpg" alt="mercedes" onmouseover="document.info.text.value='dikke Mercedes'" /> <img src="03.jpg" alt="riksja" onmouseover="document.info.text.value='wa is mich da?'" /> <br/> <form name="info"> <textarea name="text" cols="50" rows="3">roll over the images for more info</textarea> </form> Wich image doesn t fit Click the right image:<br/> <img src="01.jpg" alt="bmw" onclick="alert('wrong')" /> <img src="02.jpg" alt="mercedes" onclick="alert('wrong')" /> <img src="03.jpg" alt="riksja" onclick="alert('nice!!')" /> 1

2 p1 = JAVASCRIPT p13= AJAX p26= PHP 2 Resize image <script language="javascript"> function resizeimage(){ var hoogte = document.imagesize.hoogte.value; var breedte= document.imagesize.breedte.value; document.riksja.height = hoogte; document.riksja.width = breedte; <h2>enlarge / Shrink</h2> <img name="riksja" src="03.jpg" width="340" height="231" alt="riksja" /> <br/> <form name="imagesize"> Height : <input type="text" name="hoogte" value="231"/><br/> Width : <input type="text" name="breedte" value="340"/><br/> <input type="button" onclick="resizeimage()" value="change the size of the image" /> </form> Swap images <script language="javascript"> function swap(){ var tijdelijk = document.one.src; document.one.src = document.two.src; document.two.src = tijdelijk; <h2>swap</h2> <img name="one" src="03_negative.jpg" onmouseover="swap()" /> <img name="two" src="03.jpg" onmouseover="swap()" /> Belangrijkste evenements bij een formulier <form onsubmit="alert('formulier wordt verzonden')"> </form> <input type="text" onchange="alert('er is iets veranderd');" /> <input type="text" onclick="alert('er wordt geklikt');"/> <input type="submit" value="verzend"/> 2

3 p1 = JAVASCRIPT p13= AJAX p26= PHP 3 De inhoud van een veld opvragen/veranderen <form name="formulier"> <input type="text" name="invoer" /><br/> <input type="button" value="alert!" onclick="alert(document.formulier.invoer.value)" /><br/> <input type="button" value="verander!" onclick="document.formulier.invoer.value='iets anders!'" /> </form> De inhoud van een veld opvragen en veranderen <script language="javascript"> function nieuw(){ <form name="formulier"> alert (document.formulier.invoer.value); document.formulier.invoer.value='opnieuw!'; vul om het even wat in <input type="text" size="60" name="invoer" onchange="nieuw();"/><br/> </form> Swap text <script language="javascript"> function swap(){ var tijdelijk = document.formulier.one.value; document.formulier.one.value = document.formulier.two.value; document.formulier.two.value = tijdelijk; <form name="formulier"> <input type="text" size="5" name="one" onchange="swap();"/> <-> <input type="text" size="5" name="two" onchange="swap();" /> </form> 3

4 p1 = JAVASCRIPT p13= AJAX p26= PHP 4 Wisselkoers <script language="javascript"> var wisselkoers = ; function bf2euro(){ document.munten.euro.value = document.munten.bef.value/wisselkoers; function euro2bf(){ document.munten.bef.value = document.munten.euro.value*wisselkoers; <form name="munten"> <input type="text" size="15" name="bef" onchange="bf2euro()"/> BEF = <input type="text" size="15" name="euro" onchange="euro2bf()"/> </form> Info samenplakken in een alert <script language="javascript"> function gegevens(){ var naam= document.geg.voornaam.value + " " + document.geg.achternaam.value; var adres= document.geg.adres.value; var leeftijd= document.geg.leeftijd.value; var vraag= "Naam : " + naam + "\nadres: " + adres + "\nleeftijd: " + leeftijd + "\n\nklopt dit?"; confirm(vraag); <form name="geg" onsubmit="gegevens()"> Voornaam en naam: <input type="text" name="voornaam" size="15" /><input type="text" name="achternaam" size="15" /><br/> Adres: <input type="text" name="adres" /><br/> Leeftijd: <input type="text" name="leeftijd" /><br /> <input type="submit" value="verzend" /> </form> 4

5 p1 = JAVASCRIPT p13= AJAX p26= PHP 5 Formulier Validatie (met Alert) <script type="text/javascript"> function testalles(){ var foutmelding = testnaam() + testleeftijd() + test (); if (foutmelding == "") return true; else{ alert("het formulier is niet correct ingevuld: \n\n" + foutmelding); return false; function toonfout(fout){ if(fout!= '') alert(fout); function testnaam(){ if(document.invoer.naam.value=='') { return 'Naam is niet correct ingevuld!\n'; else { return ''; function testleeftijd(){ var age= parseint(document.invoer.leeftijd.value); if(isnan(age) age <= 0 age > 130) { return 'Leeftijd is niet correct ingevuld!\n'; else { return ''; function test (){ var = document.invoer. .value var at = .indexof("@"); var dot = .indexof(".", at); if ( == "") { return ' is niet ingevuld!\n'; else if(at == -1 dot == -1) { return ' adres is niet geldig!\n'; else { return ''; Info voor HTML Form -> onsubmit= return testalles() -> onblur="toonfout(test ())" Naam -> onblur="toonfout(testnaam())" Leeftijd -> onblur="toonfout(testleeftijd())" 5

6 p1 = JAVASCRIPT p13= AJAX p26= PHP 6 Vergroot/verklein Html-text <script type="text/javascript"> function verandergrootte(verandering){ var paragraaf = document.getelementbyid("par"); var huidigegrootte = parseint(paragraaf.style.fontsize); if(isnan(huidigegrootte)){ huidigegrootte = 15; paragraaf.style.fontsize = huidigegrootte + verandering + "px"; <div id="buttons"> <input type="button" value="vergroot" onclick="verandergrootte(3)" /> <input type="button" value="verklein" onclick="verandergrootte(-3)" /> </div> <p id="par">dit is een beetje tekst</p> Verwijder kleur <style type="text/css"> #een{ background-color: green; width: 100px; height: 100px; float: left; #twee{ background-color: red; width: 100px; height: 100px; float: left; #drie{ background-color: blue; width: 100px; height: 100px; float: left; #knoppen{ clear: both; </style> <script type="text/javascript"> function verwijderblok(blok){ var verwijderen = document.getelementbyid(blok); verwijderen.style.display = "none"; 6

7 p1 = JAVASCRIPT p13= AJAX p26= PHP 7 <div id="een"> </div> <div id="twee"> </div> <div id="drie"> </div> <div id="knoppen"> <input type="button" value="verwijder groen" onclick="verwijderblok('een')" /> <input type="button" value="verwijder rood" onclick="verwijderblok('twee')" /> <input type="button" value="verwijder blauw" onclick="verwijderblok('drie')" /> </div> Verander de inhoud van een div <style>.red{ background-color: #ff0000; color: #000; font-size: 14px; font-family: Verdana;.black{ background-color: #000; color: #ffffff; font-size:16px; font-family: Georgia; </style> <script type="text/javascript" language="javascript"> function veranderinhoud(){ var inhoud = document.getelementbyid("content"); inhoud.classname = "black"; inhoud.innerhtml = "Dit is iets anders"; <div id="content" class="red"> Dit is de inhoud van een div... </div> <input type ="button" id="changebutton" value="layout veranderen" onclick="veranderinhoud()"/> <br/> <a href="#" title="veranderen" onmouseover="veranderinhoud()">veranderen</a> Toon rechter of linker muisklik <script type="text/javascript" language="javascript"> function toonknop(event){ if(event.button == 2) alert("rechter muisknop"); else if(event.button == 0) alert("linker muisknop"); <body onmousedown="toonknop(event)"> 7

8 p1 = JAVASCRIPT p13= AJAX p26= PHP 8 Toon coordinaten waar geklikt <script type="text/javascript" language="javascript"> function tooncoordinaten(event){ if (event.pagex event.pagey){ posx = event.pagex; posy = event.pagey; else if (event.clientx event.clienty){ posx = event.clientx + document.body.scrollleft; posy = event.clienty + document.body.scrolltop; alert("huidig X coordinaat: " + posx + "\nhuidig Y coordinaat: " + posy); <body onmousedown="tooncoordinaten(event)"> FAQ <style type="text/css"> ol ol{ display: none; </style> <script type="text/javascript"> function klapopen(lijstid){ var lijst = document.getelementbyid(lijstid); var status = document.getelementbyid(lijstid + "Status"); if(lijst.style.display == "block"){ lijst.style.display = "none"; status.innerhtml = "+"; else { lijst.style.display = "block"; status.innerhtml = "-"; <ol> <li><a id="domeinnaamstatus" href="javascript: klapopen('domeinnaam')" title="open">+</a> een domeinnaam <ol id="domeinnaam"> <li>verzin domeinnaam</li> <li>check beschikbaarheid</li> <li>registreer domeinnaam</li> </ol> </li> <li><a id="grafischstatus" href="javascript: klapopen('grafisch')" title="open">+</a> grafisch ontwerp, er-schema <ol id="grafisch"> <li>voer gesprek met opdrachtgever</li> <li>giet grafisch ontwerp in template</li> 8

9 p1 = JAVASCRIPT p13= AJAX p26= PHP 9 <li>maak er-schema</li> </ol> </li> <li><a id="ontwikkelingstatus" href="javascript: klapopen('ontwikkeling')" title="open">+</a> ontwikkeling <ol id="ontwikkeling"> <li>zet er-schema om in database</li> <li>schrijf php-scriptjes</li> <li>schrijf javascriptjes</li> </ol> </li> <li><a id="onlinestatus" href="javascript: klapopen('online')" title="open">+</a> online plaatsen <ol id="online"> <li>zoek webhosting</li> <li>gebruik FTP</li> <li>zet site online</li> </ol> </li> </ol> Div die muis volgt <style type="text/css"> #message{ font: 12px Arial; padding: 3px; position: absolute; background: #ff0000; color: #ffffff; /* zorgen dat het niet tegen de muis plakt */ margin: 5px px; </style> <script type="text/javascript"> function volg(event){ if(event.pagex event.pagey){ var posx = event.pagex; var posy = event.pagey; else if(event.clientx event.clienty){ var posx = event.clientx + document.body.scrollleft; var posy = event.clienty + document.body.scrolltop; var blokje = document.getelementbyid("message"); blokje.style.left = posx + "px"; blokje.style.top = posy + "px"; <body onmousemove="volg(event)"> <div id="message"> Deze div moet de muis volgen. Toepasbaar als bvb. error. </div> 9

10 p1 = JAVASCRIPT p13= AJAX p26= PHP 10 Zoek het geheime getal + aantal pogingen weergeven <script type="text/javascript"> var geheim = 4; var teller = 0; function probeer(keuze){ teller++; if(keuze.innerhtml == geheim){ keuze.style.backgroundcolor = "#00FF00"; alert("u had " + teller + " pogingen nodig."); else { keuze.style.backgroundcolor = "#FF0000"; <table> <tr> <td id="een" onclick="probeer(this)">1</td> <td id="twee" onclick="probeer(this)">2</td> <td id="drie" onclick="probeer(this)">3</td> <td id="vier" onclick="probeer(this)">4</td> <td id="vijf" onclick="probeer(this)">5</td> <td id="zes" onclick="probeer(this)">6</td> <td id="zeven" onclick="probeer(this)">7</td> <td id="acht" onclick="probeer(this)">8</td> <td id="negen" onclick="probeer(this)">9</td> <td id="tien" onclick="probeer(this)">10</td> </tr> </table> Veranderspreak na tijdsinterval <script type="text/javascript"> var spreuken = new Array( "spreuk1", "spreuk2", "spreuk3"); function veranderspreuk(){ var getal = Math.floor(Math.random()*spreuken.length); document.getelementbyid("statusbalk").innerhtml = spreuken[getal]; setinterval("veranderspreuk()", 2000); <body onload="veranderspreuk()"> <h1>spreuken Generator</h1> <div id="statusbalk">spreuk</div> 10

11 p1 = JAVASCRIPT p13= AJAX p26= PHP 11 Verplaatsen: zet de woorden terug in de juiste volg orde <script type="text/javascript"> var vorige = -1; function verplaats(id) { if (vorige == -1) { // we hebben nog niks geselecteerd vorige = id; document.getelementbyid(id).bgcolor = "yellow"; else { // wissel om var een = document.getelementbyid(vorige); een.bgcolor = "white"; var twee = document.getelementbyid(id); var temp = een.innerhtml; een.innerhtml = twee.innerhtml; twee.innerhtml = temp; vorige = -1; <table id="tabel"> <tr> <td id='een' onclick="verplaats('een')">kan</td> <td id='twee' onclick="verplaats('twee')">goed</td> <td id='drie' onclick="verplaats('drie')">javascript</td> <td id='vier' onclick="verplaats('vier')">ik</td> <td id='vijf' onclick="verplaats('vijf')">in</td> <td id='zes' onclick="verplaats('zes')">programmeren</td> </tr> </table> Hide/show textbox with a checkbox <script type="text/javascript"> function addgsm(){ var gsm = document.getelementbyid("checkgsm"); var gsminvoer = document.getelementbyid("gsmtd"); if(gsm.checked){ gsminvoer.innerhtml = '<input type="text" name="gsm" />'; else { gsminvoer.innerhtml = ''; 11

12 p1 = JAVASCRIPT p13= AJAX p26= PHP 12 function addmsn(){ var msn = document.getelementbyid("checkmsn"); var msninvoer = document.getelementbyid("msntd"); if(msn.checked){ msninvoer.innerhtml = '<input type="text" name="msn" />'; else { msninvoer.innerhtml = ''; <form action="notnow.php" method="post"> <table id="tabel"> <tr><td>naam: </td><td><input type="text" name="naam" /></td></tr> <tr><td>gsm <input type="checkbox" id="checkgsm" name="gsmbox" onclick="addgsm()" /></td><td id="gsmtd"></td></tr> <tr><td>msn <input type="checkbox" id="checkmsn" name="msnbox" onclick="addmsn()" /></td><td id="msntd"></td></tr> </table> </form> Verander achtergrondkleur met dropdown menu <script type="text/javascript"> var kleurcode = new Array(); kleurcode["wit"] = "#FFFFFF"; kleurcode["groen"] = "#00FF00"; kleurcode["lichtgroen"] = "#80FF80"; kleurcode["rood"] = "#FF0000"; function toonkleur(){ var gekozen = document.getelementbyid('code').value; document.getelementbyid("alles").style.backgroundcolor = kleurcode[gekozen]; <body id="alles"> <div> <select name="code" id="code" onchange="toonkleur()"> <option value="wit">wit</option> <option value="groen">groen</option> <option value="lichtgroen">lichtgroen</option> <option value="rood">rood</option> </select> </div> 12

13 p1 = JAVASCRIPT p13= AJAX p26= PHP 13 AJAX Ondertitel voor een afbeelding Html <script src="functions.js" type="text/javascript"> <body onload="ophalen()"> <div id="container"> <img src="gebouw.gif" alt="gebouw" /> <div id="onderschrift"></div> <div id="verander"> <br /><strong>verander het onderschrift:</strong><br /> <textarea id="tekst" cols="50" rows="5" onchange="changeonderschrift();"></textarea> </div> <div id="status" style="font-size: 11px; color: #666666;"></div> </div> updateonderschrift.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $bericht = $_POST['bericht']; $data = "UPDATE ajax_onderschrift SET onderschrift = '$bericht'"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($link->query($data)) { print("ok"); else { print("ko!"); print("<b><pre>$data</pre></b> veroorzaakt volgende fout: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>"); $link->close() or die("kan link met ". $dbserver. " niet sluiten.");?> 13

14 p1 = JAVASCRIPT p13= AJAX p26= PHP 14 GetOnderschrift.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $query = "SELECT onderschrift from ajax_onderschrift"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($resulttekst=$link->query($query)) { print("ok;"); $record = $resulttekst->fetch_assoc(); print($record['onderschrift']); else { print("ko!"); print("de query <pre>$query</pre> voor de db $dbnaam is mislukt. "); print("de foutmelding is: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>."); $link->close() or die("kan link met $dbserver niet sluiten.");?> Javascript function createreq() { var req = false; try { req = new XMLHttpRequest(); // firefox, safari, É catch (err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); // sommige IE catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); // meeste IE catch (err3) { req = false; alert("deze browser ondersteunt geen Ajax. Dikke pech!"); return req; 14

15 p1 = JAVASCRIPT p13= AJAX p26= PHP 15 function changeonderschrift(){ var http = createreq(); http.onreadystatechange = function(){ if(http.readystate == 4){ var div = document.getelementbyid('status'); if(http.responsetext.substr(0,2) == "OK") { div.innerhtml = "Ondertitel opgeslagen"; document.getelementbyid('tekst').value = ""; ophalen(); else div.innerhtml = "Probleem: " + http.responsetext; http.open("post", "updateonderschrift.php"); http.setrequestheader('content-type','application/x-www-form-urlencoded'); http.send('bericht=' + document.getelementbyid('tekst').value); function ophalen(){ var http = createreq(); var urlgewoon = "getonderschrift.php"; var rand = parseint(math.random()*999999); var url = urlgewoon + "?rand=" + rand; var divbox = document.getelementbyid('onderschrift'); http.onreadystatechange = function() { var status = http.responsetext.substr(0,2); var tekst = http.responsetext.substr(3); if(http.readystate == 4 && status == "OK"){ divbox.innerhtml = tekst; else { divbox.innerhtml = "<em>onderschrift wordt opgehaald...</em>"; http.open("get", url); http.send(null); Quiz Html <script src="functions.js" type="text/javascript"> <h1>welk festival gaat jaarlijks door in Kiewit?</h1> <div id="antwoord1_1" onclick="antwoord(1,1)">rock Werchter</div> <div id="antwoord1_2" onclick="antwoord(1,2)">genk on Stage</div> <div id="antwoord1_3" onclick="antwoord(1,3)">pukkelpop</div> <h1>hoe goed werkt het internet op school?</h1> <div id="antwoord2_1" onclick="antwoord(2,1)">slecht</div> <div id="antwoord2_2" onclick="antwoord(2,2)">goed</div> <div id="antwoord2_3" onclick="antwoord(2,3)">zeer goed</div> 15

16 p1 = JAVASCRIPT p13= AJAX p26= PHP 16 Antwoord.php <? if($_get['vraag'] == 1) print(3); else if($_get['vraag'] == 2) print(1);?> Javascript function createreq() { var req = false; try { req = new XMLHttpRequest(); // firefox, safari,... catch (err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); // sommige IE catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); // meeste IE catch (err3) { req = false; alert("deze browser ondersteunt geen Ajax. Dikke pech!"); return req; function antwoord(vraag,poging){ var http = createreq(); var urlgewoon = "antwoord.php?vraag=" + vraag; var rand = parseint(math.random()*999999); var url = urlgewoon + "&rand=" + rand; var divid = "antwoord" + vraag + "_" + poging; http.onreadystatechange = function(){ if(http.readystate < 4){ document.getelementbyid(divid).style.border = "1px grey dotted"; else{ document.getelementbyid(divid).style.border = "0px"; var juist = http.responsetext; if(poging == juist) document.getelementbyid(divid).style.backgroundcolor = "green"; else document.getelementbyid(divid).style.backgroundcolor = "red"; http.open("get", url); http.send(null); 16

17 p1 = JAVASCRIPT p13= AJAX p26= PHP 17 Ratingsysteem Html <style type="text/css">.rate{ border: 1px solid #ffffff; padding: 3px; margin-right: 5px; cursor: pointer; font: 11px Arial, Helvetica, sans-serif;.rate:hover{ border: 1px solid #000000; </style> <script src="functions.js" type="text/javascript"> <body onload="ophalen()"> <p><img src=" alt="dark Side Of The Moon" /><br/> Hoeveel sterren verdient deze CD?<br/></p> <div id="ratings"> <span class="rate" onclick="rate(1)">1</span> <span class="rate" onclick="rate(2)">2</span> <span class="rate" onclick="rate(3)">3</span> <span class="rate" onclick="rate(4)">4</span> <span class="rate" onclick="rate(5)">5</span> </div> <div id="status"></div> <p><strong>gemiddelde score:</strong> <span id="gemiddelde"></span></p> insertvote.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $data = "INSERT INTO ajax_rating (rating) VALUES (\"{$_GET['score']\");"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($link->query($data)) { 17

18 p1 = JAVASCRIPT p13= AJAX p26= PHP 18 print("ok"); else { print("ko!"); print("<b><pre>$data</pre></b> veroorzaakt volgende fout: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>"); $link->close() or die("kan link met $dbserver niet sluiten.");?> Getgemiddelde.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $query = "SELECT AVG(rating) as gemiddelde FROM ajax_rating"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($result=$link->query($query)) { for ($i=0; $i < $result->num_rows; $i++) { $rij= $result->fetch_assoc(); //PAS VOLGENDE REGEL AAN print("ok;"); $gemiddelde = round($rij['gemiddelde']); print($gemiddelde); //EINDE AANPASSING // geef geheugen vrij voor record-set $result->close(); else { print("ko"); print("de foutmelding is: <br />\n"); $fout = $link->error; print(" <b>$fout</b>."); $link->close() or die("kan link met $dbserver niet sluiten.");?> 18

19 p1 = JAVASCRIPT p13= AJAX p26= PHP 19 Javascript function createreq() { var req = false; try { req = new XMLHttpRequest(); // firefox, safari, É catch (err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); // sommige IE catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); // meeste IE catch (err3) { req = false; alert("deze browser ondersteunt geen Ajax. Dikke pech!"); return req; function rate(score){ var http = createreq(); var urlgewoon = "insertvote.php?score="+score; var rand = parseint(math.random()*999999); var url = urlgewoon + "&rand=" + rand; var divbox = document.getelementbyid('status'); http.onreadystatechange = function(){ if(http.readystate == 4){ if(http.responsetext.substr(0,2) == "OK") { divbox.innerhtml = "Score opgeslagen!"; ophalen(); else divbox.innerhtml = "Probleem: " + http.responsetext; http.open("get", url); http.send(null); function ophalen(){ var http = createreq(); var urlgewoon = "getgemiddelde.php"; var rand = parseint(math.random()*999999); var url = urlgewoon + "?rand=" + rand; var divbox = document.getelementbyid('gemiddelde'); http.onreadystatechange = function() { var status = http.responsetext.substr(0,2); 19

20 p1 = JAVASCRIPT p13= AJAX p26= PHP 20 var tekst = http.responsetext.substr(3); if(http.readystate == 4 && status == "OK"){ divbox.innerhtml = tekst; else { divbox.innerhtml = "<em>score wordt opgehaald...</em>"; http.open("get", url); http.send(null); Woordenketting Html <script src="functions.js" type="text/javascript"> <body onload="ophalen()"> <h1>woordenketting</h1> <div id="ketting"></div> <p><strong>voeg woord toe aan woordenketting:</strong></p> <div id="verander"> <input type="text" id="tekst" onchange="changeketting();" /> </div> <div id="status" style="font-size: 11px; color: #666666;"></div> Updateketting.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $data = "UPDATE ajax_woordenketting SET ketting = CONCAT(ketting,\" {$_POST['bericht']\")"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($link->query($data)) { print("ok"); else { print("ko!"); print("<b><pre>$data</pre></b> veroorzaakt volgende fout: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>"); $link->close() or die("kan link met $dbserver niet sluiten.");?> 20

21 p1 = JAVASCRIPT p13= AJAX p26= PHP 21 Getketting.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $query = "SELECT ketting from ajax_woordenketting"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($resulttekst=$link->query($query)) { print("ok;"); $record = $resulttekst->fetch_assoc(); print($record['ketting']); else { print("ko!"); print("de query <pre>$query</pre> voor de db $dbnaam is mislukt. "); print("de foutmelding is: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>."); $link->close() or die("kan link met $dbserver niet sluiten.");?> Javascript function createreq() { var req = false; try { req = new XMLHttpRequest(); // firefox, safari, É catch (err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); // sommige IE catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); // meeste IE catch (err3) { req = false; alert("deze browser ondersteunt geen Ajax. Dikke pech!"); return req; function changeketting(){ var http = createreq(); http.onreadystatechange = function(){ 21

22 p1 = JAVASCRIPT p13= AJAX p26= PHP 22 if(http.readystate == 4){ var div = document.getelementbyid('status'); if(http.responsetext.substr(0,2) == "OK") { div.innerhtml = "Woord toegevoegd"; document.getelementbyid('tekst').value = ""; ophalen(); else div.innerhtml = "Probleem: " + http.responsetext; http.open("post", "updateketting.php"); http.setrequestheader('content-type','application/x-www-form-urlencoded'); http.send('bericht=' + document.getelementbyid('tekst').value); function ophalen(){ var http = createreq(); var urlgewoon = "getketting.php"; var rand = parseint(math.random()*999999); var url = urlgewoon + "?rand=" + rand; var divbox = document.getelementbyid('ketting'); http.onreadystatechange = function() { var status = http.responsetext.substr(0,2); var tekst = http.responsetext.substr(3); if(http.readystate == 4 && status == "OK"){ divbox.innerhtml = tekst; else { divbox.innerhtml = "<em>ketting wordt opgehaald...</em>"; http.open("get", url); http.send(null); Shoutbox Html <script type="text/javascript" src="functions.js"> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <body onload="laden()"> <div id="shout"> Naam:<br/><input type="text" id="naam" /><br/> Bericht:<br/><textarea id="tekst" cols="55" rows="5"></textarea><br/> <input id="verzenden" type="button" value="verzenden" onclick="posten();" /> </div> <div id="status"></div> <div id="berichten"></div> 22

23 p1 = JAVASCRIPT p13= AJAX p26= PHP 23 postbericht.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $naam = $_POST['naam']; $bericht = $_POST['bericht']; $data = "INSERT INTO ajax_shoutbox (naam,shout) VALUES (\"$naam\",\"$bericht\");"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($link->query($data)) { print("ok"); else { print("ko!"); print("<b><pre>$data</pre></b> veroorzaakt volgende fout: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>"); $link->close() or die("kan link met ". $dbserver. " niet sluiten.");?> getbericht.php <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "root"; // gebruikersnaam $passwd = "password"; // het paswoord $dbnaam = "school_1cmd"; // de naam van de gegevensbank waaruit we gegevens ophalen $query = "SELECT naam,shout from ajax_shoutbox ORDER BY id DESC"; $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($result=$link->query($query)) { print("ok;"); for ($i=0; $i < $result->num_rows; $i++) { $rij= $result->fetch_assoc(); 23

24 p1 = JAVASCRIPT p13= AJAX p26= PHP 24 //PAS VOLGENDE REGEL AAN $naam = $rij['naam']; $bericht = $rij['shout']; print("<div class=\"message\"><strong>$naam zegt:</strong><br />$bericht</div>"); // geef geheugen vrij voor record-set $result->close(); else { print("ko!"); print("de query <pre>$query</pre> voor de db $dbnaam is mislukt. "); print("de foutmelding is: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>."); $link->close() or die("kan link met $dbserver niet sluiten.");?> javascript function createreq() {.. function laden(){ var http = createreq(); var url = "getberichten.php"; var rand = parseint(math.random()* ); var urlvolledig = url + "?rand=" + rand; http.onreadystatechange = function(){ var status = http.responsetext.substr(0,2); var tekst = http.responsetext.substr(3); if(http.readystate == 4 && status == "OK"){ document.getelementbyid("berichten").innerhtml = tekst; document.getelementbyid("status").style.display = "none"; else if(http.readystate == 4 && status!= "OK"){ document.getelementbyid("status").innerhtml = "Er ging iets mis..."; document.getelementbyid("status").style.display = "block"; http.open("get", urlvolledig); http.send(null); function posten(){ var http = createreq(); http.onreadystatechange = function(){ if(http.readystate == 4){ var status = http.responsetext.substr(0,2); if(status == "OK"){ laden(); 24

25 p1 = JAVASCRIPT p13= AJAX p26= PHP 25 document.getelementbyid("tekst").value = ""; document.getelementbyid("status").style.display = "none"; else { document.getelementbyid("status").innerhtml = "Er ging iets mis..."; document.getelementbyid("status").style.display = "block"; http.open("post", "postbericht.php"); http.setrequestheader('content-type','application/x-www-form-urlencoded'); http.send('bericht=' + document.getelementbyid("tekst").value + '&naam=' + document.getelementbyid("naam").value); CSS body{ font: 12px Arial, Verdana, sans-serif; #berichten{ width:220px; margin: 10px 0 0 0;.message{ border-bottom: 1px solid #e6e6e6; margin: 0 0 5px 0; padding: 0 0 5px 0; #shout{ width:200px; padding: 10px; background: #eeeeee; border: 1px solid #e6e6e6; #naam, #tekst{ width: 190px; border: 1px solid #e6e6e6; color: #666666; font: 12px Arial, Verdana, sans-serif; padding: 5px; #verzenden{ clear: both; background: #666666; color: white; border: 0px; #status{ width:212px; padding: 5px; background: red; color: white; display: none; 25

26 p1 = JAVASCRIPT p13= AJAX p26= PHP 26 PHP Insertdata <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "test"; // gebruikersnaam $passwd = "test"; // het paswoord $dbnaam = "test"; // de naam van de gegevensbank waaruit we gegevens ophalen // Definieer hieronder de data // Als je veel data hebt die over meer dan 1 regel komt, // kan je vanaf de tweede regel hieronder na <$data = $data.> // de data vervolledigen tussen de aanhalingstekens. (zie vb.) // Pas wel op als je een string gebruikt. Zet dan tussen ' ' ipv " " (zie vb) $data = "INSERT INTO logboek (ipadres, tekst) VALUES (\"{$_SERVER['REMOTE_ADDR']\",\"{$_POST['invoer']\");"; // einde variabelen // Het volgende stuk mag je gewoon overnemen. // Begin connectie en invoegen data $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($link->query($data)) { print("toevoegen van de data in de tabel is gelukt!"); else { print("kan geen data toevoegen!<br />"); print("<b><pre>$data</pre></b> veroorzaakt volgende fout: <br \>\n"); $fout = $link->error; print(" <b>$fout</b>"); $link->close() or die("kan link met ". $dbserver. " niet sluiten."); // Einde connectie en invoegen data?> 26

27 p1 = JAVASCRIPT p13= AJAX p26= PHP 27 Bekijkquerie <?php // vul hier de nodige variabelen in $dbserver = "localhost"; // de machine waarop de database-server staat $user = "test"; // gebruikersnaam $passwd = "test"; // het paswoord $dbnaam = "test"; // de naam van de gegevensbank waaruit we gegevens ophalen $aantalrecords = 50; $beginrecord = 0; // Definieer hieronder de query. // Als je een lange query hebt die over meer dan 1 regel komt, // kan je vanaf de tweede regel hieronder na <$query = $query.> // de query vervolledigen tussen de aanhalingstekens. (zie vb.) // Pas wel op als je een string gebruikt. Zet dan tussen ' ' ipv " " (zie vb) $query = "SELECT * FROM Hotels WHERE Plaats = \"genk\""; $query = $query. " LIMIT $beginrecord, $aantalrecords;"; // In deze string mag/moet je gebruik van dingen die je uit het formulier haalt // dat de gebruiker heeft ingevuld om dingen uit de db te bekijken. // einde variabelen // Het volgende stuk mag je gewoon overnemen, behalve voor de regel // waarin een rij van het resultaat getoond wordt. // Wanneer je de layout van het resultaat wil veranderen, bv. alles in // een tabel plaatsen, moet je nog code toevoegen. DOE DIT! // Begin connectie en bekijken Query $link = new mysqli($dbserver, $user, $passwd, $dbnaam); if (mysqli_connect_errno()) { die("geen connectie met $dbnaam op mysql mogelijk omwille van ". mysqli_connect_error()); if ($result=$link->query($query)) { for ($i=0; $i < $result->num_rows; $i++) { $rij= $result->fetch_assoc(); //PAS VOLGENDE REGEL AAN print("hotel: {$rij['hotel'], PPN : {$rij['ppn'] <br />\n"); //EINDE AANPASSING // geef geheugen vrij voor record-set $result->close(); else { print("de query <pre>$query</pre> voor de db $dbnaam is mislukt. "); print("de foutmelding is: <br />\n"); $fout = $link->error; print(" <b>$fout</b>."); $link->close() or die("kan link met $dbserver niet sluiten."); // Einde connectie en bekijken query?> 27