Eksempler
>
Vinkjeller
>Vinutvalg
Vinutvalg
Løsningen er prinsippielt slik:
Vin fra database
Javascript
Javascriptkoden som kjører på klienten bestiller et vinutvalg, tar i mot ferdig formatert tekst og plasserer denne teksten som "innerHTML". Skriptet er slik:
// relies on jquery.js
function getIt(address,targetNodeId)
{
box = document.forms[0].vintype;
winetype = box.options[box.selectedIndex].value;
box = document.forms[0].land;
prodland = box.options[box.selectedIndex].value;
box = document.forms[0].volum;
volum = box.options[box.selectedIndex].value;
box = document.forms[0].terning;
terning = box.options[box.selectedIndex].value;
params='winetype='+winetype+'&prodland='+
prodland+'&volum='+volum+'&terning='+terning;
$.ajax({
url:address,
data:params,
success:function(data)
{
$('#'+targetNodeId).html(data);
},
error:function(data)
{
$('#'+targetNodeId).html("Could not access content");
}
});
}
Serverskriptet
Serverskriptet tolker forespørselen fra Javascriptkoden, slår opp i databasen, formaterer dataene i HTML-fragmenter og returnerer bestillingen. Skriptet er skrevet i Python og ser slik ut:
#! /usr/bin/python
import MySQLdb,cgi
""" Retrieve data from MySql-base vin
The return is selected wines wapped for HTML
The HTML(fragments) uses some classes for styles, see fragments below
"""
SQL_SELECTED_WINES="""SELECT * FROM wines WHERE
type='%s' AND
country='%s' AND
volume='%s' AND
dice='%s';
"""
HTML_WINE_DESCRIPTION="""
<div class="wine">
<div style="float:left"><img src="%s" alt="dice"></div>
<div class="wine-name">%s</div>
<div class="wine-country">%s
<span class="wine-price">: kr %s / %scl
</span>
</div>
<div style="clear:left">
</div><div class="wine-desc">%s</div>
</div>
"""
HTML_WINE_SELECTION="""<div>
%s
</div>
"""
HTML_NO_WINE="""
<p style="margin:50px;font-weight:bold">
%s
</p>
"""
#------------------------------------
# connect and execute a sql-request
#------------------------------------
def connectAndExecute(sql):
try:
myBase=MySQLdb.connect(host='frigg.hiof.no',
user='student',
passwd='student',
db='vin')
myTab=myBase.cursor()
myTab.execute(sql)
myBase.close()
return myTab.fetchall()
except MySQLdb.Error, e:
print "Error %d: %s" % (e.args[0], e.args[1])
return None
#------------------------------------
# make selected list
#------------------------------------
def makeSelection(vintype,land,volum,terning):
resultTxt=''
result=connectAndExecute(SQL_SELECTED_WINES%(vintype,land,volum,terning))
if result==None:
return HTML_NO_WINE%'Ingen viner funnet'
if len(result)==0:
return HTML_NO_WINE%'Ingen viner funnet'
for w in result:
navn=str(w[1])
vintype=str(w[3])
land=str(w[4])
terning=str(w[5])
terningimage=vintype+terning+'.gif'
volum=str(w[6])
pris=str(w[7])
beskrivelse=str(w[8])
resultTxt+=HTML_WINE_DESCRIPTION%\
(terningimage,navn,land,pris,volum,beskrivelse)+'\n'
resultTxt=HTML_WINE_SELECTION%resultTxt
return resultTxt
#-------------------------------------------------
# what is the job ?
#-------------------------------------------------
form=cgi.FieldStorage()
print 'Content-type: text/html; charset=iso-8859-1\n'
RESULT_TXT=''
winetype='red'
prodland='Frankrike'
volum='75'
terning='6'
if form.has_key('winetype'):
winetype=form['winetype'].value
if form.has_key('prodland'):
prodland=form['prodland'].value
if form.has_key('volum'):
volum=form['volum'].value
if form.has_key('terning'):
terning=form['terning'].value
RESULT_TXT=makeSelection(winetype,prodland,volum,terning)
print RESULT_TXT
Stilsett
Det er benyttet et enkelt stilsett (css):
body{
color: black;
font-family:"Verdana","Geneva","Arial","Times",sans-serif;
font-size:13px;
text-align:left;
margin:0px;
padding:20px;
}
h1{font-size:24px}
.ingress{font-size:12px}
.wine{margin-top:15px}
.wine-name{font-size:18px;padding-left:50px}
.wine-desc{}
.wine-country{padding-left:50px; font-weight:bold}
.wine-price{font-weight:normal}
.wine-author{font-weight:normal;font-size:10px;color:gray}
