HTML 5 form met PHP while loop

Marijn

Goedemiddag heren & Dames,

ik ben bezig om voor mijn werkgever een form te maken om dakdragers, voetensets en dak koffers voor de juiste auto te tonen. Nu ben ik een concurrent tegen gekomen die daar een gebruiksvriendelijk systeem heeft ontwikkelt om op auto merk, model, type & jaartal en soort dak de juiste producten te tonen. (concurrent: http://www.dakdragerstore.com)

Nu wil ik graag voor mijn werkgever dit systeem maken echter kom ik er niet uit hoe ik nu meerdere selectie velden kan voorzien van de juiste informatie. Zo wil ik bijvoorbeeld dat wanneer er bij merk:"BMW" er bij model:"" alleen de modellen van BMW worden getoond en dat wanneer er bij model"3-serie Touring"wordt geselecteerd erbij het selectie veld type en jaar alleen de mogelijkheden die daar bij horen worden getoond.

Nu heb ik een getracht een begin te maken maar alle eerlijkheid gebied dat ondanks mijn zoektocht naar tutorials ik er niet uit kom en vandaar dat ik dit forum benader voor iemand die mij hierbij wilt helpen.

Op dit moment bestaat mijn database uit meerdere tabellen:
- dakdragers
- dakkoffers
- autos (hier staan alle merken, mogelijke modellen, types jaartallen en soort daken in)
- Voetensets

Waar loop ik op vast?
- Database structuur voor deze producten
- Meerdere select velden vullen met 1 while loop: merk, model, type_jaar, soort dak,
- Hoe ik database data uit verschillende tabellen kan combineren in één html form

PHP

<?php include 'db-connect.php'; ?>
<html lang = "en">
  <head>
    <title>website.nl - Dakdragers & Koffers</title>
    <meta charset = "UTF-8" />
  </head>
  <body>
	<div class="container_dakdrager_select">
		<div class="row">
			<div class="dakdrager_titel col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<h3>Vind de juiste dakdragers voor uw auto</h3>
			</div>
		</div>
		<div class="row">
			<div class="snow-col-1 col-xs-6 col-sm-3 col-md-3 col-lg-3">
				<div class="informatie">
					<span class="filter_label">Automerk<br class="hidden-xs hidden-md"/></span>
				</div>
				<form id="form-dakdrager-select" name="form-dakdrager-select" method="post" action="">
					<select id="brand" class="">
						<?php
							$result = $conn->query("select * from cars where id = '$id'");
							echo "<select name='id'>";


							while ($row = $result->fetch_assoc()) {


							unset($id, $parent_id, $car_brand, $model, $type_year, $roof);
							$id = $row['id'];
							$parent_id = $row['parent_id']; 
							$car_brand = $row['car_brand'];
							$model = $row['model'];
							$type_year = $row['type_year'];
							$roof = $row['roof'];
							echo '<option value="'.$id.'">'.$car_brand.'</option>';
							}
							echo "</select>";
						}?>
					<select id="model" class="model">
						<?php echo '<option value="'.$id.'">'.$model.'</option>';?>
					</select>
					<select id="type_and_year" class="">
						<option value="">- Selecteer -</option>
						<option value=""></option>
					</select>
					<select id="roof" class="">
						<option value="">- Selecteer -</option>
						<option value=""></option>
					</select>
				</form>
			</div>
    </div>
  </body>
</html>

Meer tonen

Victor

Hoi Marijn,

Allereerst welkom op het forum!

Om te doen wat jij wil doen zul je er meer dan alleen php bij moeten trekken. PHP is serverside en kan dus op zichzelf niet live je selectformulieren aanpassen. Dit kun je doen door Ajax te gebruiken.

Een aantal relevante links hiervoor:

Intro: https://www.w3schools.com/php/php_ajax_intro.asp

Database: https://www.w3schools.com/php/php_ajax_database.asp

Wat betreft je database structuur zul je een manier moeten verzinnen waarbij je makkelijk aan kan geven welke dragers bij welke auto's passen. Er vanuit gaande dat een drager op meerder auto's past zul je dat dus op een manier moeten opslaan in je database. Wellicht een derde tabel producten die JOINS met de rest van je tabellen om maar wat te roepen.

Deze vraag snap ik even niet, maar dan kan aan mij liggen:

Citaat van Marijn

- Meerdere select velden vullen met 1 while loop: merk, model, type_jaar, soort dak

Je mag me ook altijd op Skype toevoegen. In dit soort specifieke gevallen is dat altijd makkelijker meekijken. Mijn skype is te vinden op mijn profiel.

Marijn

Beste Victor,

bedankt voor uw reactie, ik zal in eerste instantie de links die u heeft gepost bekijken, maar ik heb een vermoeden dat dit een stuk gecompliceerder is dan ik op voorhand had gedacht.

Uw aanname dat dak dragers op meerdere modellen en merken passen is correct. Ik dacht er in eerste instantie aan om met een parent_id te werken om zo dakdragers aan meerdere auto merken en modellen te kunnen koppelen.

U geeft aan dat u mijn vraag niet begreep omtrent de while loop. Ik maakte een denk fout dat het mogelijk was om met een while loop meerdere dropdowns van informatie te voorzien, maar nu ik uw reactie lees werkt dat niet op die manier.

Nogmaals bedankt voor uw reactie en ik ga er mee aan de slag.

Victor

Op een sidenote, het is wel te doen in PHP. Enkel een stuk minder gebruiksvriendelijk.
Met behulp van Ajax kan je de forms automatisch laten updaten, wat zorgt voor een betere ervaring.

Als je enkel in PHP wil blijven zul je een update knop moeten toepassen die elke keer de informatie die je al hebt pakt, dat vergelijkt met de database en vervolgens weer data teruggeeft die je kunt gebruiken om een nieuw formulier te maken. Deze stappen volg je net zo lang tot het einde van het formulier is bereikt, maar zoals je ziet moet je daarvoor een aantal keer de pagina herladen wat de userfriendliness negatief beïnvloed.

Ik hoor wel of je eruit komt, succes!

Je mag overigens gewoon je zeggen!

-Edit-

Zie T.Nijborg's opmerking. Het gaat hier om een veel op veel relatie door middel van een relatietabel. Je hebt meerdere auto's en meerdere dakdragers die op verschillende auto's passen. (Oftewel meerdere auto's passen op meerdere dakdragers en andersom.)

T.Nijborg

Martijn,

Mijn advies voor het koppelen van dakdragers bij auto's zou zijn een extra relatie tabel te maken. Waarin je aangeeft per row, welke dakdrager op welke auto past. Die tabel qua velden ziet er dan ongeveer zo uit.

Code

id
dakdrager_id
auto_id

Betreft Victor's antwoord zou het ook iets makkelijker door met javascript gewoon een http request te sturen naar een stukje php om de data op te halen. Ajax gaat meteen een stapje verder.

pekelterror

http://blog.chapagain.com.np/using-jquery-a…selection-list/

Nog een voorbeeld waarin een lijst met steden word weergeven op basis van het gekozen land.
In het voorbeeld gebruiken ze een array, maar dit kan natuurlijk ook iets uit de dabase zijn.

Verder kun je op in het idee van het voorbeeld te blijven, na het kiezen van een land de stad kiezen, die vervolgens weer een lijst kan tonen met wijken, gevolgd door straatnamen.

Land > Stad > Wijk > Straatnaam.
En dat kan natuurlijk ook zijn zoals je het nodig bent met:
Merk > Model > Type & Jaartal > Dak

Marijn

Bedankt voor jullie reacties, ik ben met een aantal voorbeelden die jullie hebben gegeven aan de slag gegaan.

Ik ben nog niet echt bekend met het programmeer werk, dus vandaar dat ik zoveel vragen stel. Uiteraard probeer ik wel zoveel mogelijk zelf te zoeken voordat ik vragen stel.

Nu gebruik ik voor de auto's op dit moment 1 tabel met volgende structuur:

id - parent_id - brand - model - type_year - roof_1 - roof_2 - roof_3

Er staan 1650 regels in waar van 39 verschillende auto merken.

Nu had ik ergens gelezen dat ik met DISTINCT er voor kan zorgen dat er bij de dropdown voor Merken alleen unieke waarde worden getoond, echter toont hij nu alle regels in de database en staat er dus voor iedere regel een merk.

Mijn doelstelling is dus dat er maar 39 merken getoond worden. Maar ik kom er niet helemaal uit met de DISTINCT functie.

PHP

Automerk: 
<select name="brand">
	<option value="">Selecteer uw merk</option>
	<?php 
	$conn = new mysqli('localhost', 'localhost', 'password', 'db') 
	or die ('Cannot connect to db');


    $result = $conn->query("select (DISTINCT brand), id, parent_id, model, type_year, roof from automerken");
    while ($row = $result->fetch_assoc()) {


                  unset($id, $brand);
                  $id = $row['id'];
				  $parent_id = $row['parent_id'];
                  $brand = $row['brand']; 
				  $model = $row['model'];
				  $type_year = $row['type_year'];
				  $roof = $row['roof'];
                  echo '<option value="'.$id.'">'.$brand.'</option>';  
	}
	?>
</select>

Meer tonen

Victor

Zet eerst even de hele structuur zoals je die nu hebt hier neer. (Dus de tabellen auto's, dakdragers en de relatietabel) Ik weet niet wat je onder roof_1/2/3 gaat neerzetten, maar dat ziet er op het eerste oog al niet erg handig uit. Je zou eventueel ook tutorials op kunnen zoeken over "Database normalisatie".

Daarnaast mis ik goede foutafhandeling. Wat gebeurt er als je niet kunt connecten met de database? Dan werkt opeens je hele script niet meer en dat is niet altijd wenselijk. Je wilt in dit geval dat de gebruiker gewoon de rest van de site kan gebruiken, ook al werkt dit systeem niet. "or die()" is daarom zelden een goede oplossing.

De reden dat je DISTINCT op deze manier niet werkt is omdat je in eerste instantie alleen de unieke velden wilt ophalen, maar vervolgens er ook nog eens allemaal andere velden bij pakt.
Ik weet niet zo goed wat je probeert op te halen, maar dit zou in principe alle unieke automerken moeten ophalen met de gegevens in die rows:

SQL

SELECT brand, id, parent_id, model, type_year, roof FROM automerken GROUP BY brand

Je ziet dat ik voor alle SQL related woorden hoofdletters gebruik. Dat is voor mij makkelijker onderscheiden welke onderdelen wat zijn. Mocht je nou een langere query, dan mag je hem ook opdelen door enters te gebruiken.
Dit is alleen niet echt een handige aanpak, wat probeer je te doen?

Marijn

Goedemiddag,

ik heb inmiddels mijn structuur in de database aangepast, en heb er een fout afhandeling ingebouwd. Bedankt voor alle hulp, en advies.

Marijn

Gezien ik veel hulp heb gehad, lijkt het me wel zo fair om dit script hier te posten zodat wellicht andere er nog iets aan hebben. Nogmaals bedankt voor alle hulp.

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $('#brand').on('change',function(){
        var brandID = $(this).val();
        if(brandID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'brand_id='+brandID,
                success:function(html){
                    $('#model').html(html);
                    $('#type').html('<option value="">Selecteer uw model</option>');
					$('#roof').html('<option value="">Selecteer uw type</option>');
                }
            }); 
        }else{
            $('#model').html('<option value="">Selecteer uw brand</option>');
            $('#type').html('<option value="">Selecteer uw model</option>');
			$('#roof').html('<option value="">Selecteer uw type</option>');
        }
    });
    $('#model').on('change',function(){
        var modelID = $(this).val();
        if(modelID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'model_id='+modelID,
                success:function(html){
                    $('#type').html(html);
                }
            }); 
        }else{
            $('#type').html('<option value="">Selecteer uw model</option>');
			$('#roof').html('<option value="">Selecteer uw type</option>'); 
        }
    });
});
</script>

Meer tonen

PHP

<body>
    <div class="select-boxes">
    <?php
    //Include database configuration file
    include('dbConfig.php');
    //Get all brand data
    $query = $db->query("SELECT * FROM automerken ORDER BY brand ASC");
    //Count total number of rows
    $rowCount = $query->num_rows;
    ?>
    <select name="brand" id="brand">
        <option value="">Selecteer uw merk</option>
        <?php
        if($rowCount > 0){
            while($row = $query->fetch_assoc()){ 
                echo '<option value="'.$row['brand_id'].'">'.$row['brand'].'</option>';
            }
        }else{
            echo '<option value="">Dit automerk is niet beschikbaar.</option>';
        }
        ?>
    </select>
    <select name="model" id="model">
        <option value="">Selecteer uw model</option>
    </select>
    <select name="type" id="type">
        <option value="">Selecteer uw type</option>
    </select>
	 <select name="roof" id="roof">
        <option value="">Selecteer uw type dak</option>
    </select>
    </div>
</body>

Meer tonen

PHP

<?php
//Include database configuration file
include('dbConfig.php');


if(isset($_POST["brand_id"]) && !empty($_POST["brand_id"])){
    //Get all model data
    $query = $db->query("SELECT * FROM automodel WHERE brand_id = ".$_POST['brand_id']." AND status = 1 ORDER BY model ASC");
    //Count total number of rows
    $rowCount = $query->num_rows;
    //Display models list
    if($rowCount > 0){
        echo '<option value="">Select model</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['model_id'].'">'.$row['model'].'</option>';
        }
    }else{
        echo '<option value="">Geen model beschikbaar</option>';
    }
}


if(isset($_POST["model_id"]) && !empty($_POST["model_id"])){
    //Get all type data
    $query = $db->query("SELECT * FROM automerken WHERE model_id = ".$_POST['model_id']." AND status = 1 ORDER BY type_name ASC");
    //Count total number of rows
    $rowCount = $query->num_rows;
    //Display cities list
    if($rowCount > 0){
        echo '<option value="">Select type</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['type_id'].'">'.$row['type_name'].'</option>';
        }
    }else{
        echo '<option value="">Geen type beschikbaar</option>';
    }
}
if(isset($_POST["type_id"]) && !empty($_POST["type_id"])){
    //Get all model data
    $query = $db->query("SELECT * FROM autodak WHERE type_id = ".$_POST['type_id']." AND status = 1 ORDER BY roof_type ASC");
    //Count total number of rows
    $rowCount = $query->num_rows;
    //Display models list
    if($rowCount > 0){
        echo '<option value="">Selecteer uw type dak</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['roof_id'].'">'.$row['roof_type'].'</option>';
        }
    }else{
        echo '<option value="">Geen model beschikbaar</option>';
    }
}
?>

Meer tonen

Thisguyisgone

SELECT * FROM, select is wat je echt nodig hebt. Just a tip.

Victor

Ik mis ook nog steeds goede foutafhandeling. Als deze query om de een of andere reden niet goed wordt uitgevoerd zul je een lelijke error kijgen.

PHP

$query = $db->query("SELECT * FROM automodel WHERE brand_id = ".$_POST['brand_id']." AND status = 1 ORDER BY model ASC");

-Edit-

SELECT * is vaak juist geen goede oplossing. Het is beter om te definiëren welke waarde je wilt hebben, tenzij je zeker weet dat je alles gaat gebruiken. Scheelt op grote schaal in tijd.

FangorN

Citaat van T.Nijborg

Mijn advies voor het koppelen van dakdragers bij auto's zou zijn een extra relatie tabel te maken. Waarin je aangeeft per row, welke dakdrager op welke auto past. Die tabel qua velden ziet er dan ongeveer zo uit.

id
dakdrager_id
auto_id

Een koppeltabel heeft geen apart id nodig tenzij deze relatie aanvullende informatie heeft die je apart wilt aanspreken, dan is zo'n id handig / gerechtvaardigd. Anders is deze gewoon niet nodig.

Citaat van Victor

$query = $db->query("SELECT * FROM automodel WHERE brand_id = ".$_POST['brand_id']." AND status = 1 ORDER BY model ASC"); -Edit-

Los hiervan is dit knetter onveilig. Deze query is vatbaar voor SQL-injectie. Ook zou je voor de goede orde moeten controleren of $_POST['brand_id'] een positief geheel getal is (input filtering), dan zijn verdere controles eigenlijk overbodig maar dan zou het voor de goede orde nog steeds verstandig zijn om deze informatie te escapen in je query (output escaping).

On a side note: Als je na controle (en voor uitvoering van de query) constateert dat $_POST['brand_id'] géén positief geheel getal is dan heeft het simpelweg geen zin om ook maar te proberen deze query uit te voeren omdat dat nooit (zinnige) resultaten zal opleveren. Het is misschien verleidelijk om een typecast te doen op brand id - (int) $_POST['brand_id'] - maar dat is toch min of meer een hack... Het lijkt mij beter om je input te controleren, zoals altijd eigenlijk.

T.Nijborg

Citaat van FangorN

Een koppeltabel heeft geen apart id nodig tenzij deze relatie aanvullende informatie heeft die je apart wilt aanspreken, dan is zo'n id handig / gerechtvaardigd. Anders is deze gewoon niet nodig.

En waarom dan niet? Op het moment dat je de relaties gaat oproepen doe je dat door middel van de auto_id of dakdrager_id, om zo alle koppelingen te krijgen. Maar op het moment dat je deze relatie wilt updaten in de database, dus aanpassen of verwijderen, ga je dit dan doen door middel van 'WHERE auto_id = x AND dakdrager_id = x'. Waarom niet gewoon 'WHERE rel_id = x'.

Ik vind persoonlijk dat elke relatie z'n eigen unieke key moet hebben, bijvoorbeeld om dus te verwijderen of te wijzigen.

FangorN

Citaat van T.Nijborg

Maar op het moment dat je deze relatie wilt updaten in de database, dus aanpassen of verwijderen, ga je dit dan doen door middel van 'WHERE auto_id = x AND dakdrager_id = x'. Waarom niet gewoon 'WHERE rel_id = x'.

En dat doe je alleen als je extra attributen hebt, zoals ik hier al aangaf:

Citaat van FangorN

tenzij deze relatie aanvullende informatie heeft die je apart wilt aanspreken

Anders, als relaties tussen twee of meer tabellen veranderen, is het veel makkelijker om de relaties op grond van de tabel die je als uitgangspunt neemt te verwijderen en opnieuw te inserten. In dat geval is een auto increment id nogal loos.

ICTscripters

Dé plek voor IT

Dé plek voor IT

[Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

Herkent deze Notion-structuurscan echte problemen?

🚀 WE ZOEKEN TESTERS! 🚀

Luchtvaartsoftware: Hoe technologie de moderne luchtvaart verandert

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

TK: Kraai.eu

HTML 5 form met PHP while loop

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2