e-portfolio: javni podatci u JSON i JSONP formatu

Kako bi Vam se omogućilo da na Vaše vlastite stranice dodate aktualni popis radova, Ferko nudi mogućnost dohvata tih informacija u obliku JSON, čime Vam na raspolaganju stoji mogućnost da popis oblikujete kako Vi to želite.

Popise je moguće dohvatiti na sljedeći način.

AdresaFormat vraćenih podatakaOpis
http://ferko.fer.hr/ferko/EPortfolio!mentorJSON.action?jmid=XXX JSON Dohvaća radove kojima ste bili mentor (i koji su označeni kao javno vidljivi). XXX je potrebno zamijeniti Vašim identifikatorom.
http://ferko.fer.hr/ferko/EPortfolio!mentorJSON.action?jmid=XXX&callback=CB JSONP Dohvaća radove kojima ste bili mentor (i koji su označeni kao javno vidljivi) u JSONP formatu. "CB" treba zamijeniti prefiksom koji je potrebno dodati za uspješan JSONP poziv i to uobičajeno rade JavaScript biblioteke (nije najprikladnije za "ručnu" uporabu). XXX je potrebno zamijeniti Vašim identifikatorom.
http://ferko.fer.hr/ferko/EPortfolio!studentJSON.action?jsid=XXX JSON Dohvaća Vaše radove (koje ste označeni kao javno vidljive). XXX je potrebno zamijeniti Vašim JMBAG-om.
http://ferko.fer.hr/ferko/EPortfolio!studentJSON.action?jsid=XXX&callback=CB JSONP Dohvaća Vaše radove (koje ste označeni kao javno vidljive). "CB" treba zamijeniti prefiksom koji je potrebno dodati za uspješan JSONP poziv i to uobičajeno rade JavaScript biblioteke (nije najprikladnije za "ručnu" uporabu). XXX je potrebno zamijeniti Vašim JMBAG-om.

Struktura vraćenih podataka

Uporabom prethodno navedenih adresa moguće je doći do popisa radova u JSON formatu. Pri tome je struktura sljedeća. Objekt koji se dobije ima tri varijable: error koji govori je li došlo do pogreške, message koji opisuje pogrešku te records koji ako nije došlo do pogreške sadrži podatke o radovima (inače ne postoji). Varijabla records je po tipu polje čiji su elementi objekti koji opisuju radove.

Svaki rad je objekt koji ima sljedeće varijable: authors (polje autora), workType (vrsta rada), title (naziv rada), keywords (ključne riječi), summary (sažetak), semester (akademska godina i semestar), mentors (polje mentora), dmentors (polje izravnih voditelja), relativeLink djelomična adresa na koju je potrebno dodati adresu poslužitelja i tada vodi na taj rad. U svim poljima koja sadrže osobe, osoba je pohranjena kao objekt koji ima varijable firstName (ime) i lastName (prezime).

Primjer jednog zapisa prikazan je u nastavku.

{
    "error": false,
    "message": "",
    "records": [
        {
            "authors": [
                {
                    "firstName": "Ivan",
                    "lastName": "Horvat"
                }
            ],
            "workType": "Seminarski rad (preddiplomski seminar)",
            "title": "O postanku svemira",
            "keywords": "veliki prasak; svemir",
            "summary": "Malo informacija o postanku svemira.",
            "semester": "2010/2011 - ljetni",
            "mentors": [
                {
                    "firstName": "Ivo",
                    "lastName": "Ivić"
                }
            ],
            "dmentors": [],
            "relativeLink": "EPortfolio!viewWork.action?id=1"
        },
        {
            "authors": [
                {
                    "firstName": "Ivana",
                    "lastName": "Horvat"
                }
            ],
            "workType": "Seminarski rad (preddiplomski seminar)",
            "title": "O postanku svijesti",
            "keywords": "svijest; psihologija",
            "summary": "Malo informacija o postanku svijesti.",
            "semester": "2010/2011 - ljetni",
            "mentors": [
                {
                    "firstName": "Ivo",
                    "lastName": "Ivić"
                }
            ],
            "dmentors": [
                {
                    "firstName": "Ana",
                    "lastName": "Anić"
                }
            ],
            "relativeLink": "EPortfolio!viewWork.action?id=2"
        }
    ]
}

Uključivanje podataka u web stranicu

Kako sustav podatke nudi u formatu JSON, potrebno je na neki način te podatke pretvoriti u odgovarajući HTML koji će potom biti prikazan u pregledniku. Kako ćete ovo riješiti, ovisi samo o Vama. U nastavku je prikazana jednostavna web stranica koja koristi javascript biblioteku jQuery.

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script language="javascript"><!--
    function s(text) {
	    if(!text || text=="") return "&nbsp;";
	    return text;
    }
	
    function getData() {
	    var aplikacija = "http://ferko.fer.hr/ferko/";
	    $.getJSON(aplikacija+'EPortfolio!mentorJSON.action?jmid=XY123&callback=?', function(data) {
			if(data.error) {
			    $('#zamjena').html("Dogodila se je pogreška: "+data.message);
			} else {
			    var items = [];
			    items.push("<table border=\"1\">");
			    items.push("<thead><tr><th>Semestar</th><th>Rad</th><th>Autor(i)</th><th>Naziv rada</th><th>Mentor(i)</th><th>Izravni voditelj(i)</th><th>Link</th></tr></thead><tbody>");
			    for(var recordNo = 0; recordNo < data.records.length; recordNo++) {
				    var r = data.records[recordNo];
				    var item = "<tr><td>"+r.semester+"</td><td>"+r.workType+"</td><td>";
				    for(var authorNo = 0; authorNo < r.authors.length; authorNo++) {
					    if(authorNo!=0) item += "; ";
					    item += r.authors[authorNo].lastName + ", " + r.authors[authorNo].firstName;
				    }
				    item += "</td><td>"+s(r.title)+"</td><td>";
				    for(var mentorNo = 0; mentorNo < r.mentors.length; mentorNo++) {
					    if(mentorNo!=0) item += "; ";
					    item += r.mentors[mentorNo].lastName + ", " + r.mentors[mentorNo].firstName;
				    }
				    item += "</td><td>";
				    for(var dmentorNo = 0; dmentorNo < r.dmentors.length; dmentorNo++) {
					    if(dmentorNo!=0) item += "; ";
					    item += r.dmentors[dmentorNo].lastName + ", " + r.dmentors[dmentorNo].firstName;
				    }
				    if(r.dmentors.length==0) item += "&nbsp;";
				    item += "</td><td><a href=\""+aplikacija+r.relativeLink+"\" target=\"_blank\">rad</a></td></tr>";
				    items.push(item);
			    }
			    items.push("</tbody></table>");
			    $('#zamjena').html(items.join(''));
			}
		});
	}
	
	$(document).ready(getData);
  // --></script>
</head>
<body>

<div id="zamjena">Waiting for data...</div>

</body>
</html>

Napomena: prikazani kod je najjednostavnija moguća verzija koja ne koristi CSS, ima potencijalnih problema koji proizlaze iz dinamičkog slaganja html-a metodom ljepljenja čistih stringova i sl. Stoga ovo treba tretirati samo kao osnovni primjer koji je potrebno doraditi u skladu s željama.

Napomena 2: dinamički dohvat podataka AJAX-om podložan je sigurnosnim ograničenjima vezanim uz dohvat podataka s drugih poslužitelja. Prethodno prikazani kod stoga podatke dohvaća preko JSONP-a (jQuery to radi transparentno zahvaljujući parametru "callback=?"). Koristite li neku drugu biblioteku, vodite računa da poslužitelj za JSONP očekuje da se parametar zove "callback", te da se za sprječavanje vraćanja podataka iz priručne memorije (engl. cache) još dozvoljava slanje dinamički generiranog parametra "_".

Zatvori