tabelatuur maken in html5 of php?

Ik hoop dat je weet waar je over praat en je het gewoon niet zo duidelijk op papier (scherm) kan zetten. De keuze is namelijk nooit HTML5 of PHP. Dat is een beetje gelijk aan zeggen: Ik twijfel of ik een hamer nodig heb of een pak rijst. Beide talen horen niet in dezelfde categorie en hebben niet dezelfde functie: HTML (de versie maakt niks uit, HTML is een living standard) is een mark-up taal, voor de opmaak, en PHP is een programmeertaal, voor de logica achter een programma.

Tevens is PHP een server side taal, dat betekend dat het alleen op de server werkt. Dat houdt weer in dat je dus altijd een pagina moet opvragen wil je PHP uitvoeren. PHP kan ook niks uitvoeren op de computer.

Dus, hoe pak je dit aan? Allereerst is het niet de vraag of je HTML wil gebruiken, dat is namelijk de enige mark-up language. Dus HTML sowieso, inclusief CSS.
Dan is nog de vraag hoe je de logica die in de database laat zien op het scherm. Zoals al gezegd heeft PHP een pagina request nodig om te werken, dat zal betekenen dat je continue de pagina moet herladen. Dat wil je niet. Een client side taal werkt alleen in de browser en werkt via een Input/Output stream. Deze heeft dus geen server request nodig en kan gewoon reageren op het veranderen van de noot. De keuze is hier ook heel simpel, er is maar 1 client side taal: JavaScript

Er is echter nog een groot probleem: JavaScript werkt weer alleen in de browser, dus die kan niet met de database op de server praten. Om dit op te lossen hebben we een server side taal nodig, zoals PHP. Maar die vereiste weer een pagina aanroep, hoe gaan we dat oplossen? Het antwoord is AJAX. AJAX is een JavaScript API waarmee je een pagina kunt opvragen. Hierdoor kun je zonder de huidige pagina te herhalen informatie ophalen. Zo kun je een PHP pagina aanroepen die informatie over de posities.

Als laatste moet je nog een soort van gridsysteem, bijvoorbeeld met de JavaScript Canvas API, maken waardoor je de posities kunt weergeven op het scherm.

Zoals je ziet is dit een hele kluif die heel veel talen vereist.

In aanvulling op het verhaal van Wouter:

> de snaren zijn in php dmv een array vlot gemaakt, maar hoe vertel ik in php de gewenste positie?

Dat kan bijvoorbeeld door een 2-dimensionale array te gebruiken. Voor elke snaar maak je dan een array aan waarin bijvoorbeeld elk element een maat voorstelt. Maar dan wordt het tricky.

Laten we uitgaan van een simpele vierkwartsmaat. Je zou dan kunnen aangeven:
$t[0][5] = '3,5,7,9';

wat betekent dat je van de eerste snaar ($t[0]) in de zesde maat achtereenvolgens de fretten 3,5,7 en 9 moet spelen.

Tot zover is het nog te doen. Maar stel nu dat je de tweede en vierde noot op een andere snaar moet spelen. Dan zou je zoiets krijgen als:
$t[0][5] = '3,,7,'
$t[3][5] = ',5,,9';

Is ook nog wel te doen. Maar stel nu dat er ook nog achtste noten worden gespeeld. Dan ga je iets krijgen als:
$t[0][5] = '3,3,,,7,7,,';
$t[3][5] = ',,5,6,,,9,10';

Je code moet dan detecteren dat er meer dan 4 noten in de maat zitten en de presentatie daarop aanpassen. Dat gaat helemaal leuk worden als je met maatsoorten als 17/12 gaat werken.

Vervolgens moet je nog dingen als hammer-ons, pull-offs, bends en mutes erin verwerken. Dat zou kunnen als:
$t[0][5] = 'H3,P3,,,^7,v7,,';
$t[3][5] = ',,x5,6,,,9,10';

Zoals je ziet is dit een hele kluif die niet alleen heel veel talen, maar ook heel veel ander denkwerk vereist.

Beste Wouter,

Bedankt voor je tyd mijn sullig vraagje te willen beantwoorden,
Het klopt inderdaad dat ik niet precies weet hoe mijn gewenste doel te omschrijven, dat heeft als oorzaak te maken met hoeveel tyd men aan deze materie besteed,anders gezegd, wat weet je op dit moment van html5 cq php, in mijn geval is dat nog niet zoveel, daarom kom ik hier om het van jou/jullie te horen wat eventueel wel/niet zou kunnen/haalbaar/de beste weg is, dat wil niet zeggen dat men een kant en klaar script verwacht wordt, wel wat zou handig zijn!

Je voorbeeld een hamer/pak rijst snap ik, anderzijds wat men in html5 kan kon nog niet in eerdere versies,
http://www.w3schools.com/html/html5_draganddrop.asp

Dat php serverside is was bekend maar is niet relevant aan mijn doelstelling, dus gebruiken we op op jouw advies html met css, dan kan kloppen zo doen we het al, we gebruiken foundation cms,

Het gedeelte database wat je voorsteld in je beantwoording hebben we niet mee genomen daar we dit niet perse noodzakelijk vinden, anderzijds laten we ons graag overtuigen van het tegendeel!

Het javascriptgedeelte zou een optie kunnen zijn,
---quote
Er is echter nog een groot probleem: JavaScript werkt weer alleen in de browser, dus die kan niet met de database op de server praten. Om dit op te lossen hebben we een server side taal nodig, zoals PHP. Maar die vereiste weer een pagina aanroep, hoe gaan we dat oplossen? Het antwoord is AJAX. AJAX is een JavaScript API waarmee je een pagina kunt opvragen. Hierdoor kun je zonder de huidige pagina te herhalen informatie ophalen. Zo kun je een PHP pagina aanroepen die informatie over de posities.
---

dit gedeelte is een beetje wazig,de pagina aanroep in php is/en was geen probleem!?

Het gridsysteem hebben we met foundation, daarnaast kunnen we in php/css de gewenste uitkomst neerzetten waar we willen?,
Mijn vraag was, zou html5 met drag&drop beter/makkelijker zijn dan php?

grtx,

Btw:als je het niet weet dan is dat jammer toch bedankt voor de moeite, geen probs,

[size=xsmall]Toevoeging op 09/11/2014 01:41:37:[/size]

Willem vp op 09/11/2014 00:44:00

In aanvulling op het verhaal van Wouter:

> de snaren zijn in php dmv een array vlot gemaakt, maar hoe vertel ik in php de gewenste positie?

Dat kan bijvoorbeeld door een 2-dimensionale array te gebruiken. Voor elke snaar maak je dan een array aan waarin bijvoorbeeld elk element een maat voorstelt. Maar dan wordt het tricky.

Laten we uitgaan van een simpele vierkwartsmaat. Je zou dan kunnen aangeven:
$t[0][5] = '3,5,7,9';

wat betekent dat je van de eerste snaar ($t[0]) in de zesde maat achtereenvolgens de fretten 3,5,7 en 9 moet spelen.

Tot zover is het nog te doen. Maar stel nu dat je de tweede en vierde noot op een andere snaar moet spelen. Dan zou je zoiets krijgen als:
$t[0][5] = '3,,7,'
$t[3][5] = ',5,,9';

Is ook nog wel te doen. Maar stel nu dat er ook nog achtste noten worden gespeeld. Dan ga je iets krijgen als:
$t[0][5] = '3,3,,,7,7,,';
$t[3][5] = ',,5,6,,,9,10';

Je code moet dan detecteren dat er meer dan 4 noten in de maat zitten en de presentatie daarop aanpassen. Dat gaat helemaal leuk worden als je met maatsoorten als 17/12 gaat werken.

Vervolgens moet je nog dingen als hammer-ons, pull-offs, bends en mutes erin verwerken. Dat zou kunnen als:
$t[0][5] = 'H3,P3,,,^7,v7,,';
$t[3][5] = ',,x5,6,,,9,10';

Zoals je ziet is dit een hele kluif die niet alleen heel veel talen, maar ook heel veel ander denkwerk vereist.

Beste Willem,
Je klapt me de oren hier een beetje dicht, het meeste kan ik prima volgen maar om dit te converteren naar php wordt dan iets lastiger alwel niet onmogelijk, we brabbelen wel al een beetje maar praten nog geen php!
Bedankt voor je reply, zijn we blij mee, we blijven het volgen hier,
grtx,

> Mijn vraag was, zou html5 met drag&drop beter/makkelijker zijn dan php?

Het een gaat niet zonder het ander.

Voor het samenstellen van de tabulatuur heb je HTML en JavaScript nodig. HTML om iets op het beeldscherm te tonen, en JavaScript om de drag/drop-events te verwerken. Maar je wilt natuurlijk de tabulatuur ook nog kunnen opslaan.

Dat opslaan doe je door JavaScript en PHP te combineren. In JavaScript maak je een AJAX-request waarin je de ingevoerde tabulatuur naar de server stuurt. Aan de serverkant wordt de AJAX-request verwerkt door PHP, die het in de database zet.

Je geeft aan dat je een database niet per se noodzakelijk vindt, maar hoe had je dan bedacht om de gegevens op te slaan? Je zou het in tekstbestanden kunnen doen, maar een database is echt veel beter voor de performance van je website.

Het ophalen van een eerder gemaakte tabulatuur gaat precies andersom: je maakt in JavaScript een AJAX-request waarin je aangeeft welke tabulatuur de gebruiker wilt zien. Aan de serverkant verwerkt PHP die request, haalt de gewenste tabulatuur op uit de database en stuurt de gegevens terug naar de browser. Vervolgens moet de JavaScript-code ervoor zorgen dat de opgehaalde tabulatuur wordt omgezet in HTML die aan de gebruiker kan worden getoond.

Al met al schat ik in dat dit een klusje is waar je best wat kennis van HTML, JavaScript, PHP en SQL nodig hebt. Zelfs met mijn 30 jaar programmeerervaring schud ik een oplossing niet meteen uit mijn mouw. ;-) Ik wil je niet ontmoedigen om eraan te beginnen, maar je moet je wel realiseren dat wat je hier beschrijft niet iets is wat je op een achternamiddag maakt.

Willem vp op 09/11/2014 09:48:46

> Mijn vraag was, zou html5 met drag&drop beter/makkelijker zijn dan php?

Het een gaat niet zonder het ander.

Voor het samenstellen van de tabulatuur heb je HTML en JavaScript nodig. HTML om iets op het beeldscherm te tonen, en JavaScript om de drag/drop-events te verwerken. Maar je wilt natuurlijk de tabulatuur ook nog kunnen opslaan.

Dat opslaan doe je door JavaScript en PHP te combineren. In JavaScript maak je een AJAX-request waarin je de ingevoerde tabulatuur naar de server stuurt. Aan de serverkant wordt de AJAX-request verwerkt door PHP, die het in de database zet.

Je geeft aan dat je een database niet per se noodzakelijk vindt, maar hoe had je dan bedacht om de gegevens op te slaan? Je zou het in tekstbestanden kunnen doen, maar een database is echt veel beter voor de performance van je website.

Het ophalen van een eerder gemaakte tabulatuur gaat precies andersom: je maakt in JavaScript een AJAX-request waarin je aangeeft welke tabulatuur de gebruiker wilt zien. Aan de serverkant verwerkt PHP die request, haalt de gewenste tabulatuur op uit de database en stuurt de gegevens terug naar de browser. Vervolgens moet de JavaScript-code ervoor zorgen dat de opgehaalde tabulatuur wordt omgezet in HTML die aan de gebruiker kan worden getoond.

Al met al schat ik in dat dit een klusje is waar je best wat kennis van HTML, JavaScript, PHP en SQL nodig hebt. Zelfs met mijn 30 jaar programmeerervaring schud ik een oplossing niet meteen uit mijn mouw. ;-) Ik wil je niet ontmoedigen om eraan te beginnen, maar je moet je wel realiseren dat wat je hier beschrijft niet iets is wat je op een achternamiddag maakt.

Beste Willem,
Ook bedankt voor je reactie, er komt dus veel bij kijken,
Je array tip heb ik iets van overgenomen we plotten echoen de trappen op het scherm,de posities voer ik handmatig in een arry in, is veel werk maar te doen,het heeft niet de schoonheids prijs maar het werkt,

Voorheen maakte we dit in een grafisch plaatje maar om voor elke trap/rif een plaatje te maken was ook niet handig,
We knutselen nog wel weer even verder,

<!DOCTYPE html>
<html>
<body>

<?php
$snaar="-";
$welketrap="Pentatonische trap";
$i="0";
echo $welketrap;


$pose=array("E","|-","5-","2-", "--", "--", "--", "--", "--", "--", "--" ,"--", "--", "--", "--" , "--", "--" , "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"-5-" , "-7-" , "-9-" , "-7-", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , );

$posb=array("B","|-","--","--", "-5-", "-2-", "--", "--", "--", "--", "--" ,"--", "--", "--", "--" , "--", "--" , "--" , "--" , "--" ,"--" , "--" , "--" , "--", "-5-" , "-7-" , "--" ,"--" , "--" , "--" , "--", "-10-" , "-7-" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--");

$posg=array("G","|-","--","--", "--", "--", "-4-", "-2-", "--", "--", "--" ,"--", "--", "--", "--" , "--", "--" , "--" , "--" , "--" ,"--" , "-4-" , "-6-" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"-9-" , "-6-" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--");

$posd=array("D","|-","--","--", "--", "--", "--", "--", "-4-", "-2-", "--" ,"--", "--", "--", "--" , "--", "--" , "--" , "--" , "-4-" ,"-7-" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "-9-" , "-7-", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--");

$posa=array("A","|-","--","--", "--", "--", "--", "--", "--", "--", "-4-" ,"-2-", "--", "--", "--" , "--", "--" , "-4-" , "-7-" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "-9-" , "-7-" , "--" ,"--" , "--" , "--" , "--", "-9-" , "-12-" , "--" ,"--" , "--" , "--");

$posed=array("E","|-","--","--", "--", "--", "--", "--", "--", "--", "--" ,"--", "-5-", "-2-", "-5-" , "-7-", "--" , "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "--" ,"--" , "--" , "--" , "--", "--" , "--" , "-9-" ,"-7-" , "-9-" , "-12-" , "--", "--" , "--" , "--" ,"--" , "--" , "--");
echo "<br>";


//de snaren

for ($i=0; $i<=50; $i++){ echo "-" .$pose[$i];}; echo "<br>";
for ($i=0; $i<=50; $i++){ echo "-" .$posb[$i];}; echo "<br>";
for ($i=0; $i<=50; $i++){ echo "-" .$posg[$i];}; echo "<br>";
for ($i=0; $i<=50; $i++){ echo "-" .$posd[$i];}; echo "<br>";
for ($i=0; $i<=50; $i++){ echo "-" .$posa[$i];}; echo "<br>";
for ($i=0; $i<=50; $i++){ echo "-" .$posed[$i];}; echo "<br>";

?>

</body>
</html>

is dit wat of not done?,

grtx,