[PHP/HTML] Profielwerkstuk: roosterwijzigingen

[laurenssie]

Dag heren,

Ik maak samen met een andere jongen uit m'n klas voor school als profielwerkstuk een iPhone-app voor de roosterwijzigingen. Simpel gesteld zit het als volgt in elkaar:

1. De roostermaker voert een wijziging in op een website;
2. De wijziging wordt opgeslagen in een SQL-database;
3. Door een iPhone-app wordt een query uitgevoerd in de database voor een aantal geselecteerde vakken;
4. De wijzigingen zijn op de iPhone zichtbaar.

Omdat we net van start zijn gegaan, zijn we nog niet toegekomen aan de iPhone app zelf, en dat zal ook geen probleem worden. Wat meer het probleem is, is een factor gebruiksgemak die de roostermaker eist om mee te willen werken. Op de website, die op dit moment in aanbouw is, zullen enkele forms aanwezig zijn, verdeeld in groepjes. Het eerste 'groepje' bevat de dag (bv. dinsdag) en het uur (bv. het tweede uur), het tweede 'groepje' de klas (bv. 5) en de groep (bio1) en het derde groepje is de bewerking (uitval, lokaalwijziging, etc.). Hier een voorbeeld:



Dankzij ons geniale roosterprogramma bestaat de onderbouw echter uit groepen als 1A, 2B en 3C en de bovenbouw uit groepen als 5bio1, 4wisB2, enzovoorts. De roostermaker heeft aangegeven dat hij wil hebben dat bij groepen uit de onderbouw in het form voor de 'groep' er keuze is uit A, B, C etc. en dat bij de bovenbouw een clusterkeuze bij verschijnt (in plaats van alleen A, B en C verschijnen eronder zaken als ak1, bio1, etc.).

De huidige code is als volgt:

PHP:

<form action="insert.php" method="post" name="klas">
<strong>Klas</strong>
<select name="klasdropdown" size="1" value="options">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>

<form action="insert.php" method="post" name="groep">
<strong>Groep</strong>
<select name="groepdropdown" size="1" value="options">
<option value="A">_A</option>
<option value="B">_B</option>
<option value="C">_C</option>
<option value="D">_D</option>
<option value="E">_E</option>
<option value="F">_F</option>
<option value="ak1">ak1</option>
<option value="ak2">ak2</option>
</select>
</form>

We hebben wirklich geen flauw idee hoe we dit aan moeten pakken. We hebben Google uitgeput met opdrachten als 'change php option value based on input' en kunnen daar geen bruikbare info vinden.

Kan iemand hier ons in een duw in de juiste richting geven? Het is immers een profielwerkstuk en we moeten hiervan leren, dus om kant en klare brokken code vragen we niet, stukjes met hints erin zijn zeer zeker welkom. Ook tips over hoe we die forms beter kunnen maken (dit ziet er nogal inefficiënt uit) zijn handig.
Mocht 'bewijs' van initiatief gevraagd worden, ik post graag alle codeknipsels in een edit, maar om deze post nog een beetje fatsoenlijk te houden zet ik die maar niet neer

Bij voorbaat dank!

[Wiethoofd]

Javascript kijken of de klasdropdown een waarde >= dan 4 heeft en dan de groepdropdown aan de hand daarvan aan laten passen.

Volgens mij is om elke dropdown een form neerzetten geen strak plan

[RobIII]

Wat is er mis met een simpele if statement

code:

if ($someoption==$foo)
  echo GetBovenbouwOptions();
else 
  echo GetOnderbouwOptions();

Je zult daarvoor wel de pagina moeten herladen; dat kun je bij een onchange doen van een control en dan de huidige values submitten.

Een andere optie is JS gebruiken om optieblok X/Y (in)visible te togglen m.b.v. bijv. een CSS display:none of gewoon de dropdown (her)vullen met beschikbare/toegestane opties. En als je helemaal hip en "web 2.0" wil gaan gebruik je AJAX.

[ Voor 7% gewijzigd door RobIII op 21-07-2011 22:29 ]

[CoolGamer]

Je zou m.b.v. javascript de opties in de groepdropdown aan kunnen passen. Dit doe je dan in de onclick van de klasdropdown.

Als je zoekt op javascript en select zal je waarschijnlijk genoeg vinden.
AJAX heb je niet nodig voor dit.

[C0rnelis]

laurenssie schreef op donderdag 21 juli 2011 @ 22:21:
...

1. De roostermaker voert een wijziging in op een website;
2. De wijziging wordt opgeslagen in een SQL-database;
3. Door een iPhone-app wordt een query uitgevoerd in de database voor een aantal geselecteerde vakken;
4. De wijzigingen zijn op de iPhone zichtbaar.

PHP:

<form action="insert.php" method="post" name="klas">

</form>

<form action="insert.php" method="post" name="groep">
<strong>Groep</strong> 
<select name="groepdropdown" size="1" value="options">
</form>

...

Is er een reden dat je 2 losse formulieren gebruikt?
Daarnaast weet ik niet wat de functie is van je options attribuut? Zie ook http://www.w3schools.com/tags/tag_select.asp voor een lijst van geldige attributen op een select tag. Daar staat options niet tussen.

OT: Zoals gezegd kan je het met herladen + simpel if-statement in PHP doen of met javascript. (Is er een reden dat deze HTML code tussen PHP tags staat?)
Ik zie in de 4 punten geen web-based variant staan? Is de bedoeling dat dat gemaakt wordt voor de roostermaker of is dat nu een test-case voor jullie queries en/of basis voor de iphone applicatie?

[ Voor 3% gewijzigd door C0rnelis op 21-07-2011 22:51 ]

[laurenssie]

Jemig, wat een antwoorden. Allereerst bedankt voor de supersnelle reacties! Even doornemen:

---

RobIII schreef op donderdag 21 juli 2011 @ 22:28:
Een andere optie is JS gebruiken om optieblok X/Y (in)visible te togglen m.b.v. bijv. een CSS display:none of gewoon de dropdown (her)vullen met beschikbare/toegestane opties.

Moet ik me daarbij dit voorstellen:

Ik heb een optieblok X (met alleen A t/m F) en dan erbij nog een optieblok Y heb met daarin alle groepen zoals ak1, ak2, bio1, bio2 enzovoorts. Optieblok Y heeft als CSS-opmaak 'display:none' en dat zodra de waarde van de klas >= 4 (zoals in Wiethoofd's post) dat 'display:none' weggehaald wordt.

?

Als dit zo is, kan ik dan de CSS-opmaak weghalen met een javascript-truukje, of moet ik dit anders oplossen?

---

C0rnelis schreef op donderdag 21 juli 2011 @ 22:50:
Is er een reden dat je 2 losse formulieren gebruikt?
Daarnaast weet ik niet wat de functie is van je options attribuut? Zie ook http://www.w3schools.com/tags/tag_select.asp voor een lijst van geldige attributen op een select tag. Daar staat options niet tussen.

OT: Zoals gezegd kan je het met herladen + simpel if-statement in PHP doen of met javascript. (Is er een reden dat deze HTML code tussen PHP tags staat?)
Ik zie in de 4 punten geen web-based variant staan? Is de bedoeling dat dat gemaakt wordt voor de roostermaker of is dat nu een test-case voor jullie queries en/of basis voor de iphone applicatie?

De reden voor de twee losse formulieren is dat het prettiger is om eerst klas 5 en daarna een groep te selecteren dan om een gigantische lijst van mogelijke clusters te moeten doorbladeren. We hebben namelijk stapels clusters, pak 'm beet een stuk of 50 per leerjaar in de bovenbouw, dus dan krijg je een lijst van ongeveer 150 dingen die je moet doorbladeren en dat werkt niet zo goed. We knopen de '5' en de 'ak1' aan elkaar tot cluster 5.ak1 uit gebruiksgemak.

De webbased variant is om de roosterwijzigingen in te kunnen voeren en door te voeren in een db, er komt geen aparte website om je roosterwijzigingen op te vragen want die is er namelijk al, alleen is die op mobiele apparaten een ramp dus vandaar deze 'oplossing' die wij maken.

Voorlopig is er alleen maar een leeg projectbestand voor de iPhone-app, we moeten eerst even de input-kant maken en de output-kant alles van de db moet halen. Het leek ons makkelijker een iPhone-app gebaseerd op een website te ontwikkelen dan een website te ontwikkelen op basis van een iPhone-app.

Verder, over die attributen, ik kan het dus ook zo doen als daar beschreven staat en het nogsteeds doorvoeren in de database d.m.v. insert.php?

PHP:

<form action="insert.php" method="post" name="merkofzo"> 
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</form>

Of moet dat toch anders aangepakt worden?

---

[ Voor 8% gewijzigd door laurenssie op 21-07-2011 23:12 . Reden: Toevoeging ]

[C0rnelis]

laurenssie schreef op donderdag 21 juli 2011 @ 23:08:
Jemig, wat een antwoorden. Allereerst bedankt voor de supersnelle reacties! Even doornemen:

[...]

De twee formulieren zijn dus twee 'losse' schermen die na elkaar getoond worden? In dat geval heb ik niets gezegd maar dat haalde ik even niet zo snel uit je blok code (En zeker niet omdat er op het screenshot maar 1 submit knop staat?) - Of ik snap je nog steeds niet . Bedenk wel dat je submit knop binnen de <form> en </form> hoort te staan en zodoende dus maar 1 formulier kan versturen.

JavaScript:

function toggle_options(groep) {
    var options_bovenbouw = document.getElementById('options_bovenbouw');
    var options_onderbouw = document.getElementById('options_onderbouw');

    if(groep < 4) {        
        options_onderbouw.style.display = ''; // maak deze zichtbaar
        options_bovenbouw.style.display = 'none'; // maak deze onzichtbaar
    } else {        
        options_onderbouw.style.display = 'none'; // maak deze onzichtbaar
        options_bovenbouw.style.display = ''; // maak deze zichtbaar
    }
}

Je bent nu wel verplicht om met inline-css aan te geven style="display: none" voor je standaard verborgen optie(s).

Je hebt dus twee select elementen voor de opties

HTML:

<select id="klas" name="klas" onchange="toggle_options(this.options[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

<select id="options_onderbouw" name="groep_onderbouw">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select id="options_bovenbouw" style="display: none"  name="groep_bovenbouw">
<option value="ak1">ak1</option>
<option value="bio1">bio1</option>
</select>

Dit zou moeten werken (maar heb ik niet getest). Veiliger is om een scherm te tonen met een formulier voor de klas, deze via method="post" versturen en afhandelen en op basis van een ingevulde klas een nieuw formulier tonen met de beschikbare groepen. Je kan dan in dit nieuw formulier ook de klas opslaan in een hidden veld.

PHP:

<form method="post" action="">
<input type="hidden" name="klas" value="<?php print $_POST['klas']; ?>" />
</form>

Dit kan je ook doen met andere gegevens die je direct wilt laten invoeren bij het formulier waar je de klas selecteert.

[ Voor 34% gewijzigd door C0rnelis op 21-07-2011 23:40 ]

[laurenssie]

Gereserveerd, even wat dingen uitproberen!

[ Voor 82% gewijzigd door laurenssie op 22-07-2011 15:40 ]

[Fusioxan]

Hmm, even een vraagje; de roosterwijzigingen, worden die gemaakt op een website of juist op de iPhone?

Je kan wel alles client-side gaan maken, maar je hoeft maar 1 ding uit te zetten en het werkt niet meer. Waarom maak je niet gewoon een pagina van 2 delen? Zoals roosterwijzigingen.php?mode=onderbouw en roosterwijzigingen.php?mode=bovenbouw. Lijkt mij verstandelijker.

En anders, voeg een dropdown toe die optgroup gebruikt. Is ook overzichtelijk. Maar client-side moet je mee oppassen dat JS aanstaat, anders is het geen leuk cijfer wat je krijgt.

[laurenssie]

De roosterwijzigingen worden ingevoerd op de website (dit is het invoerdeel). Het idee is om via de iPhone een query te doen om alle roosterwijzigingen die bij bepaalde groepen horen, worden opgehaald. De gebruiker selecteert op de iPhone in welke groepen hij/zij zit (eenmalig aanvinken), en als de app wordt geopend wordt een query gedaan waarmee alle wijzigingen die bij de geselecteerde klusters horen, worden opgehaald. Snap je?
Hoe we die query uitvoeren zien we wel

[TheWickedD]

laurenssie schreef op donderdag 21 juli 2011 @ 23:08:De reden voor de twee losse formulieren is dat het prettiger is om eerst klas 5 en daarna een groep te selecteren dan om een gigantische lijst van mogelijke clusters te moeten doorbladeren.

Besef je wel dat een formulier zoals door de andere posters besproken niet een enkel element op de website is.

Een formulier is een collectie van invoervelden. Binnen een form kun je dus meerdere selects hebben, en dat is precies wat je zou moeten doen. Alle selects enzo en de submit button in een form.

[ Voor 5% gewijzigd door TheWickedD op 23-07-2011 05:25 . Reden: quote fucked ]