Jan Kowal

Jan Kowal Student, UW

Temat: selekcja danych z xml w oknie html

Witam,

robię stronę www na zaliczenie i jednym z podpunktów jest zgromadzenie danych w xml i jednoczesne wyszukiwanie danych w nim zgromadzonych, a więc dążę do tego, aby w oknie html mieć np. listę wyboru liter, po której wybraniu jednej z nich wyświetli mi się np. lista studentów, których nazwiska zaczynają się na daną literę.

Teoretycznie jestem o krok od osiągnięcia tego celu, gdyż mam opcję w której przewijam dane zgromadzone w xml poprzez strzałki lewa-prawa, oraz mam plik, w którym mogę wyświetlić listę studentów zaczynających się na daną literę, jednakże tu dane studentów są umieszczone w javascript w tablicy, tak więc problem polega na połączeniu tych plików.

Niestety zawsze stroniłem o języka programowego, nie jest to temat moich studiów, a mimo wszystko już kilka razy w bardzo ograniczonej formie się pojawił. Opieram się głównie na gotowych rozwiązaniach (np. z http://w3cschools.com).

Prośba moja do Was jest taka, byście podsunęli mi gotowe rozwiązanie, jakiś link, plik cokolwiek.

tu są dane (przykładowe) zgromadzone w xml

<?xml version="1.0" encoding="utf-8" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>



tu jest kod w html umożliwiający przesuwanie danych z xml lewo-prawo
<!DOCTYPE html>
<html>
<head>

<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "wc3.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

x = xmlDoc.getElementsByTagName("CD");
i = 0;

function displayCD() {
artist = (x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title = (x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year = (x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt = "Artist: " + artist + "<br>Title: " + title + "<br>Year: " + year;
document.getElementById("showCD").innerHTML = txt;
}

function next() {
if (i < x.length - 1) {
i++;
displayCD();
}
}

function previous() {
if (i > 0) {
i--;
displayCD();
}
}
</script>
</head>
<body onload="displayCD()">

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />

</body>
</html>



Obrazek

Natomiast poniżej zamieszczam kody, który chciałbym zaadaptować do xml:

tablica zmiennych w javascript


document.zm = 0;
document.filtr = 'a';

function pokazStudenta(im, na, gr, nrAl, em)
{
this.imie = im;
this.nazwisko = na;
this.grupa = gr;
this.nrAlbumu =nrAl;
this.email = em;
}

document.tabS = new Array();

document.tabS[0] = new pokazStudenta('123123', '23123123', '3123123', '123123', '3123123');
document.tabS[1] = new pokazStudenta('13453453', '231543423123', '31sdfsd23123', '123123', '3123123');
document.tabS[2] = new pokazStudenta('123123', '2312345f3123', '3123123', '123dfsdf123', '3123123');
document.tabS[3] = new pokazStudenta('123sdf123', '23123453123', '3123453123', '123123453', '312543123');
document.tabS[4] = new pokazStudenta('12sdf3123', '231sdf23123', '3123sdf123', '123123', '3dfsdf123123');
document.tabS[5] = new pokazStudenta('12sdf3123', '23123fsdfdsf123', '3123sdf123', '12sdf3123', '31d23123');


tu jakiś mózg całej operacji


function pokaz()

{
var txt = '';
switch (top.document.zm)
{
case 0:
txt = 'hej'
break;
case 1:
txt = 'Dowidzenia'
break;
case 2:
txt += '<table>';
txt += '<tr><td>LP</td><td>Nazwisko</td.<td>Imię</td><td>e-mail</td></tr>';
for (var x = 0; x < top.document.tabS.length; x++)
{
txt += '<tr>';
txt += '<td>'+ x + '</td>' ;
txt+='<td>' +top.document.tabS[x].nazwisko + '</td>';
txt+='<td>' +top.document.tabS[x].imie + '</td>';
txt+='<td>' +top.document.tabS[x].email + '</td>';
txt+='</tr>';
}
txt += '/table>';
break;
case 3:
txt = 'Filtrowanie wyrazów zaczynających sie od:' + top.document.filtr;
txt +='<table>';
txt +='<tr>'
txt += '<tr><td>LP</td><td>Nazwisko</td.<td>Imię</td><td>e-mail</td></tr>';
for(var x=0;x<top.document.tabS.length;x++)

{
if(top.document.tabS[x].nazwisko.substring(0,1)==top.document.filtr)

{
txt +='<tr>';
txt +='<td>'+x+ '</td>';
txt+='<td>' +top.document.tabS[x].imie + '</td>';
txt+='<td>' +top.document.tabS[x].email + '</td>';
txt += '</tr>';

}
}
txt += '</table>';
break;
default:
txt = 'nie rozumiem';



}
document.write(txt);
}


tutaj html z kodem umożliwiającym wybór danych


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="formularz">
<input type="button" value="cześć" onclick="top.document.zm = 0; top.frames.R2.location.reload();" /> <br />
<input type="button" value="do widzenia" onclick="top.document.zm = 1; top.frames.R2.location.reload();" /> <br />
<input type="button" value="Student" onclick="top.document.zm = 2; top.frames.R2.location.reload();" /> <br />

Filtruj tabele:<br />
<select name="lista" onchange="top.document.zm=3;
top.document.filtr=this.options[selectedIndex].value;
top.frames.R2.location.reload();">
<option value="A"> Na literę A</option>
<option value="B"> Na literę B</option>
<option value="C"> Na literę C</option>
</select>

</form>
</body>
</html>


Tu ramka w której zmienne są wyświetlane

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="funkcja.js"></script>
</head>
<body>
<script>
pokaz();

</script>
</body>
</html>



a tu ostateczny html, który skleja w całość powyższe pliki


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="zmienne.js"></script>
</head>
<frameset cols="22%,*">
<frame name="R1" src="menu.html"></frame>
<frame name="R2" src="ramka.html"></frame>
</frameset>
</html>




Obrazek


Widziałem, gdzieś zastosowanie w xslt funkcji if, którą właściwie można wykorzystać do mojego zapotrzebowania, jednakże nie wiem jak to połączyć z możliwością wyboru.

Z góry przepraszam, jeżeli złamałem jakąś waszą manierę (nie wiem, za dużo kodu, zbyt roszczeniowa postawa itp.), jednakże zajęcia z robienia stron mam na prawdę w ograniczonym zakresie, to co zamierzam zrobić (co opisałem w tym poście) jest wymagane, a w żaden sposób nie zostało na zajęciach przedstawione. Z drugiej strony poświęcenie kilkunastu, a nawet więcej godzin, na zrozumienie tego, co prawdopodobnie mi się nie przyda w życiu, a jak będę potrzebował, to na pewno nie będę tego pamiętał - mówiąc krótko MIJA SIĘ TO Z CELEM.

dziękuję za pomoc i każde pomocne słowo.

PozdrawiamTen post został edytowany przez Autora dnia 13.05.14 o godzinie 21:55