100% aJaX powered website
Ik ben nu bijna 5 maanden bezig om mijn project te perfectioneren en heb 3 dagen geleden een werkend prototype:
http://www.levensweg.net/livphp4.3/
Het gaat hier alleen even om de werking van de website en niet over de inhoud of layout.
Op dit prototype werken alle lokale links via aJaX, net als de formulieren.
Aangezien dit project een opensource project wordt, is hier de sourcecode te downloaden:
http://www.levensweg.net/livphp4.3_prototype.rar
De indeling werkt als volgt:
Je hebt minimaal 3 mappen:
-/livphp4
--Hierin zit de complete engine van de website.
-/pages
Hierin zitten alle pagina-json bestanden. In deze bestanden staat de indeling van een pagina beschrevenen verwijzingen naar content-blokken. In deze map dienen tenminste 2 bestanden aanwezig te zijn:
__error.json en __settings.json
-/content
In deze map zitten de content-blokken. In deze map dient tenminste 1 bestand aanwezig te zijn: __error.php of __error.html
Een json-pagina script ziet er ongeveer als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<? //<< voor syntax highlighting
{
"language":"dutch",
"width":960,
"cellspacing":20,
"align":"center",
"css":"css/skireizen.css",
"content":[
[
{
"width":"100%",
"content":"header",
"static":false,
"cache":true
},{
"width":360,
"height":188,
"content":"quicksearch",
"params":"search",
"padding":20,
"static":true,
"cache":true
}
],[
{
"width":"50%",
"content":"highlights",
"cache":false,
"static":false,
"params":{
"items":4
}
},{
"width":"50%",
"content":"highlights",
"cache":false,
"static":false,
"params":{
"items":4,
"offset":4
}
}
],{
"width":"100%",
"content":"footer",
"static":false,
"cache":true
}
]
}
/*voor syntax highlighting >>>*/ ?>
{
"language":"dutch",
"width":960,
"cellspacing":20,
"align":"center",
"css":"css/skireizen.css",
"content":[
[
{
"width":"100%",
"content":"header",
"static":false,
"cache":true
},{
"width":360,
"height":188,
"content":"quicksearch",
"params":"search",
"padding":20,
"static":true,
"cache":true
}
],[
{
"width":"50%",
"content":"highlights",
"cache":false,
"static":false,
"params":{
"items":4
}
},{
"width":"50%",
"content":"highlights",
"cache":false,
"static":false,
"params":{
"items":4,
"offset":4
}
}
],{
"width":"100%",
"content":"footer",
"static":false,
"cache":true
}
]
}
/*voor syntax highlighting >>>*/ ?>
Het bovenstaande script is de index pagina van het voorbeeld. (index.html)
"width"
staat voor de breedte (in pixels) van de gehele pagina.
"language"
staat voor de taal die staat in de <html> tag (onder "lang" en "xml:lang" attributen)
De taal kan omschreven worden in een engelse notatie (dutch, german, english) of de officiele afkorting (nl, de, en)
Een error verschijnt wanneer de taal niet voorkomt in de talen-array die opgeslagen staat in een php script.
"cellspacing"
Dit is de ruimte tussen de pagina-blokken in pixels.
"align"
Dit bepaald de positie van de gehele pagina.
kan zijn: "left", "center" en "right".
Indien er niets ingevult wordt, wordt er uitgegaan van "left".
"css"
Hieronder kan je een enkele CSS file invoegen of een array met meerdere CSS bestanden.
Deze CSS bestanden worden via aJaX ingeladen indien deze nog niet geladen zijn.
"js"
Hetzelfde als voor CSS, alleen dan voor javascript bestanden. (staat niet in het bovenstaande voorbeeld)
Wanneer de pagina voor het eerst geladen wordt, worden de javascript bestanden DIRECT ingevoegd.
Later pas ik de scripts aan zodat de javascript bestanden ingeladen worden met de javascript on-demand loader.
"content"
Het belangerijkste deel van het json bestandje: een array met content-rijen.
Iedere array-waarde staat voor een rij. In deze array kan je zowel objecten als array's plaatsen.
Indien er een object is opgegeven wordt er vanuit gegaan dat een gehele rij 1 pagina-blok is.
Indien er een array met objecten is opgegeven wordt er vanuit gegaan dat deze objecten ook pagina-blokken zijn.
Deze pagina-blokken worden in 1 rij naast elkaar geplaatst, van links naar rechts.
Je ziet in de 1e array binnen content dat er 2 objecten zijn:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?
{
"width":"100%",
"content":"header",
"static":false,
"cache":true
},{
"width":360,
"height":188,
"content":"quicksearch",
"padding":20,
"static":true,
"cache":true
}
?>
{
"width":"100%",
"content":"header",
"static":false,
"cache":true
},{
"width":360,
"height":188,
"content":"quicksearch",
"padding":20,
"static":true,
"cache":true
}
?>
Je ziet hier dat het 1e (linker) blok een breedte heeft van "100%" en het 2e blok een breedte van 360(pixels).
Ook weet je dat de totale breedte 960 pixels is.
Indien je een blok een breedte geeft met een percentage, wordt deze percentage omgezet naar een pixel-breedte. Dit wordt gedaan door het percentage te nemen van het aantal pixels van de totale breedte (960px) te nemen waarbij de "vaste" breedtes er vanaf getrokken zijn (360px). Ook wordt de cell-spacing tussen deze 2 blokken (20px) eraf getrokken. Je krijgt dus 100% van 960-360-20, wat neerkomt op 580px.
Als je dan de broncode van de index pagina van mijn voorbeeld bekijkt, zie je ook staan "margin: 0px; padding: 0px; width: 580px;".
Het voordeel hiervan is dat als je opeens wilt dat je pagina smaller/breder wordt, dat je maar 1 getal hoeft aan te passen.
In de objecten zie je ook de volgende 2 eigenschappen:
"content"
Hier geef je de naam van het content-blok op dat in het huidige blok geplaatst moet worden. Vervolgens wordt het .php of .html script uit de content/ map gehaald en eventueel uitgevoerd.
Ook worden de blok-eigenschappen meegegeven aan het script; als je bijv. 100% als breedte gebruikt, wordt er meegegeven hoeveel pixels het blok écht geworden is. (zoals net, 580px breed).
Een overzicht met alle eigenschappen worden in de variablen "$__BLOCK" en "$__GLOBAL" gezet.
"params"
Hier kan je nog eens parameters meegeven aan het blok. Kan van alles zijn.
Als je ff naar boven scrollt zie je dat ik in de index.json bij de middelste 2 blokken de parameters "items":4 heb meegegeven. Je zou een script kunnen hebben die vervolgens 4 items weergeeft. Als je dat in 5 zou veranderen geeft ie er 5 weer.
Ook zie je 2 andere eigenschappen:
"static"
Deze eigenschap is eigenlijk een beetje een flauwe eigenschap. Als dit "true" is wordt [content].html opgehaald, anders wordt [content].php opgehaald.
Dit ga ik denk weghalen en vervangen door iets anders.
"cache"
Deze is boeiender: deze vertelt de javascript-engine of ie het bestaande blok moet cachen of niet. Als er een nieuwe pagina wordt geladen worden alleen de blokken binnengehaald die niet gecacht mogen worden. Als "cache"'s waarde "true" is, dan zal de javascript-engine het blok niet nog een keer ophalen wanneer deze er al staat. Hierbij moet het blok op de nieuwe pagina en op de oude pagina wel exact gelijk zijn met allemaal dezelfde eigenschappen. Ook moet cache bij de nieuwe EN de oude op true staan.
Verver heb je nog
"height"
deze lijkt me wel logisch.
"padding"
het opgeven van de padding zorgt ervoor dat de breedte van het blok wordt aangepast. Als je zegt dat een blok 360px breed is en je hebt een padding van 20px, dan wordt de breedte veranderd in 320px. Dit geldt ook voor height.
Als je widt/height opgeeft, geef je dus de grootte op van de BUITENKANT van het blok (inclusief padding), niet van de binnenkant, zoals in HTML.
Ook een voordeel van deze aJaX powered website is dat de vorige/volgende knop nog werkt EN dat je de url kan kopieren/plakken voor anderen. Ook kan je de url als favoriet instellen.
Waarom zou je een aJaX powered website willen?
-mogelijkheden om javascript applicaties te draaien zonder dat deze telkens bij iedere pageview opnieuw gestart moeten worden. (de chat van hyves bijv.) (dit was mijn hoofdrede)
-snelheid
-geen geflits
Ook worden alle javascript bestanden, inclusief een compleet mootools framework, geladen met een javascript on-demand loader. Dat houdt dus in dat de pagina eerst weergegeven wordt waarna DAN PAS de grote javascript bestanden worden geladen. Zo zijn de laadtijden van de website uitzonderlijk laag, ook zonder aJaX.
Ook worden de javascript bestanden met je eigen applicaties geladen met die on-demand loader.
Dit scheelt hele lange laadtijden.
Verder, ondanks dat er zo'n enorme engine draait is het er niet afhankelijk van. Met een simpele session variable zet je de gehele javascript-on-demand-loader uit of alleen de javascript-page-loader. De website werkt dan nog steeds prima.
Ook kan de website prima gelezen worden zonder javascript, ook door zoekmachines. (zet javascript maar eens uit in het voorbeeld)
Nou heb ik een heel verhaal getypt, de source code aangeboden en een voorbeeld gegeven.
Nou is het jullie beurt commentaar te geven voordat ik de uiteindelijke versie ga maken. Dit is namelijk nog maar een half werkend prototype.
En bedankt dat je de tijd heb genomen mijn enorme lap tekst te lezen. :P
En nog meer bedankt als je de tijd neemt om een opmerking/suggestie/fout te posten. :)
(voor diegene die het SJP: Shared Javascript and PHP project nog onthouden hebben: dit is dus het resultaat. Heb echter de taal links laten liggen en dit als alternatief gebruikt. Ik ben er echter nog niet klaar mee; ik heb nog vele plannen om het maken van aJaX powered websites en javascript-websites makkelijker te maken.)
Gewijzigd op 01/01/1970 01:00:00 door Toby hinloopen
Heb je ergens vragen?
Of zou dit beter bij scripts staan?
Emmanuel Delay schreef op 17.05.2009 16:41:
Wat wil je precies met deze post?
Heb je ergens vragen?
Of zou dit beter bij scripts staan?
Heb je ergens vragen?
Of zou dit beter bij scripts staan?
Dit wordt een opensource project met documentatie en onderdeel van een opensource forum/CMS. Ik hoopte vragen te krijgen om te weten waar onduidelijkheden zijn. Ook hoopte ik "dit is kut, dat is kut" te horen om te weten waar ik het eventueel kan verbeteren.
Normaal als je iets maakt komt er altijd wel enige commentaar. Dus ik wil commentaar.
Gewijzigd op 01/01/1970 01:00:00 door toby hinloopen
Ik heb even in de bron gekeken hoe je de html dan opmaakt en dit lijkt mij nog netjes gedaan ook. (alhoewel hier een daar een extra enter zou niet mis staan :p ) Hierbij vraag ik me wel 1 iets af mbt die gecachete onderdelen.
Stel ik cache de footer op pagina 1 waar er 3 rijen zijn, dus zit de footer in row2. Ik kom op een pagina 2 waar eer een andere structuur moet zijn en daar zijn er 4 rijen, hier zou de footer dan in row3 moeten bevinden.
Vraag 1: als row2 op pagina 2 ook gecached moet worden, welke inhoud wordt er dan getoond?
Vraag 2: (indien vraag 1 normale reactie vertoond) Komt de footer dan (al dan niet gecached) in row3 terecht?
Met andere woorden: Is uw systeem erop voorzien dat niet alle pagina's evenveel rows en cols hebben?
Ik heb nog 1 nadeel gevonden welke beter uitgewerkt kon worden.
Stel ik krijg van iemand een link naar de pagina http://www.levensweg.net/livphp4.3/#contact.html
Dan zie ik eerst helemaal de index pagina inladen en daarna pas de contactpagina. Dit is makkelijk in php op te vangen en zou er toch moeten uit gefilterd worden. Bijkomend probleem is natuurlijk bij mensen zonder js, dat die die contact pagina nooit te zien krijgen, maar als je in php dit opvangt en meteen de juiste pagina doorstuurd, dan komt het wel in orde.
Vraag 2: zie vraag 1.
Vraag daarna: ja. Elementen mogen verplaatst worden. Zelfs als er een formulier in staat en deze is ingevult zal deze ingevulde data bewaard blijven. Ook andere dingen die aangepast zijn met javascript binnen dat blok zullen bewaard blijven.
Je nadeel daarna:
Als dat achter het # te lezen is, is het inderdaad prima te doen. Zal het fixen. Nog niet eens getest; ging er vanuit dat het niet te lezen was door de server.
Over je 1e opmerking: die ENTER's lijken me niet echt een probleem. Men heeft niks te zoeken in de broncode en het heeft verder niet echt nadelen.
Kan eventueel een optie maken in de page-class om toch gebruik te maken van inspringen en returns. Zal het idee meenemen in de uiteindelijke versie.
Overigens is dit geen beta. Dit is een prototype. Ik ga alles herzien en verbeteren om de aanpasbaarheid/uitbreidbaarheid te verbeteren.
Hij is op het laatste moment echt gescript met een "het moet zo snel mogelijk af" houding.
Gewijzigd op 01/01/1970 01:00:00 door toby hinloopen
Of een mapje hebben waar je een aantal voorbeelden van gebruik ziet. Maak dan dat je duidelijk ziet wat jouw voorgemaakte code is en welke dingen je nodig hebt om het te gebruiken.
Emmanuel Delay schreef op 17.05.2009 17:41:
Het zou wel goed zijn de uitleg, die je hier geeft, te verwerken in het commentaar (Ik doe dat meestal ook niet systematisch, maar het zou wel beter zijn.).
Of een mapje hebben waar je een aantal voorbeelden van gebruik ziet. Maak dan dat je duidelijk ziet wat jouw voorgemaakte code is en welke dingen je nodig hebt om het te gebruiken.
Of een mapje hebben waar je een aantal voorbeelden van gebruik ziet. Maak dan dat je duidelijk ziet wat jouw voorgemaakte code is en welke dingen je nodig hebt om het te gebruiken.
Er komt een website + documentatie + voorbeelden + online editor en validator + bestaande werkende CMS-achtige websites, zoals een forum en een simpele... CMS.
Doe zo voort, want wat ik van de code gezien heb, lijkt me goed geschreven.
Daar is cache voor. Alleen onderdelen waarbij cache uit staat worden opnieuw opgehaald.
@Ypma:
ik zal em eens onderzoeken ;)
edit: ik vind het helemaal niet zo handig :P
vind het maar een vage notatie :P
JSON is idd foutgevoelig; ik wil een JSON-decoder maken die wat flexibeler is.
Gewijzigd op 01/01/1970 01:00:00 door toby hinloopen
Dat doe ik pas als het echt goed werkt en af is.
LivPHP 4.1.1.6 is hier te downloaden:
http://levensweg.net/host/D4BB2AF8/?livphp
Zit helaas nog geen documentatie bij. Komt later. Is meer als preview. Ook is het javascript gedeelte nog niet geschreven.