inserting multiple checkboxes into MySQL (PDO)

Question

I'm currently working on a school project and i'm trying to upload a "post" of a recipe. this includes image, title, instructions,ingredients and also 1 or multiple categories. all of them insert fine and well. the only issue is with the categories. It only inserts 1 category even if I select multiple checkboxes. It's supossed to insert every checkbox into a new row in the database.

My DAO

public function insertCategory($data, $title) {
    
  if (empty($errors)) {
    $sql = "INSERT INTO `recipes_categories` (`category_id`, `recipe_id`) VALUES(:category_id,:recipe_id);";
    $stmt = $this->pdo->prepare($sql);
    $stmt->bindValue(':category_id', $data['category_id']);
    $stmt->bindValue(':recipe_id', $title['id']);
    if ($stmt->execute()) {
      return $this->selectcategoryById($this->pdo->lastInsertId());
    }
  }
  return false;
}

My Controller (relevant parts)

public function upload() {
    
    
  // variabele om foutmelding bij te houden
  $error = '';

  // controleer of er iets in de $_POST zit
  if(!empty($_POST['action'])){
    // controleer of het wel om het juiste formulier gaat
    if($_POST['action'] == 'add-image') {
      // controleren of er een bestand werd geselecteerd
      if (empty($_FILES['image']) || !empty($_FILES['image']['error'])) {
        $error = 'Gelieve een bestand te selecteren';
      }

      if(empty($error)){
          // controleer of het een afbeelding is van het type jpg, png of gif
          $whitelist_type = array('image/jpeg', 'image/png','image/gif');
          if(!in_array($_FILES['image']['type'], $whitelist_type)){
              $error = 'Gelieve een jpeg, png of gif te selecteren';
          }
        }

        if(empty($error)){
        // controleer de afmetingen van het bestand: pas deze gerust aan voor je eigen project
        // width: 270
        // height: 480
        $size = getimagesize($_FILES['image']['tmp_name']);
        if ($size[0] < 100 || $size[1] < 100) {
            $error = 'De afbeelding moet minimum 100x100 pixels groot zijn';
        }
      }

      if(empty($error)){
        // map met een random naam aanmaken voor de upload: redelijk zeker dat er geen conflict is met andere uploads
        $projectFolder = realpath(__DIR__);
        $targetFolder = $projectFolder . '/../assets/ads';
        $targetFolder = tempnam($targetFolder, '');
        unlink($targetFolder);
        mkdir($targetFolder, 0777, true);
        $targetFileName = $targetFolder . '/' . $_FILES['image']['name'];

        // via de functie _resizeAndCrop() de afbeelding croppen en resizen tot de gevraagde afmeting
        // pas gerust aan in je eigen project
        $this->_resizeAndCrop($_FILES['image']['tmp_name'], $targetFileName, 100, 100);
        $relativeFileName = substr($targetFileName, 1 + strlen($projectFolder));
        $data = array(
            'image' => $relativeFileName,
            'title' => $_POST['title'],
            'instructions' => $_POST['stappenplan'],
            'description' => $_POST['ingredienten'],
            'category_id' => $_POST['category'],
        );

        // TODO: schrijf de afbeelding weg naar de database op basis van de array $data

        if (!empty($_POST['action'])) {
          if ($_POST['action'] == 'add-image') {
            // array met data invullen
            $data = array(
              'path' => '/' . $relativeFileName,
              'title' => $_POST['title'],
              'instructions' => $_POST['stappenplan'],
              'description' => $_POST['ingredienten'],
              'category_id' => $_POST['category'],
            );
              
             // aanspreken van de DAO
             $insertImage = $this->uploadDAO->insertImage($data);

             $title = $this->uploadDAO->ImageInsterId($data);
             $this->set('title', $title);

             $ingredientsArray = explode( ',', $data['description'] );
             foreach($ingredientsArray as $ingredient){
               $insertIngredient = $this->uploadDAO->insertIngredients($ingredient , $title);
             }
             
             $insertCategory = $this->uploadDAO->insertCategory($data, $title);
   
        // TODO 2: zorg dat de variabele $error getoond wordt indien er iets fout gegaan is
          if (!$insertImage) {
            $errors = $this->uploadDAO->validate($data);
            $this->set('errors', $errors);
          } else {
            $_SESSION['info'] = 'Thank you for adding a Post!';
            header('Location: index.php?page=detail&id='. $title['id']);
            exit();
          }
        }
      }
    }
  }
}

There is some code here for the image upload too, but it isn't relevant since that is working.

My HTML

    <span class="error"><?php if(!empty($error)){ echo $error;} ?></span>
    <section class="upload_box">
        <h1 class="hidden">upload-form</h1>
        <form method="post" action="index.php?page=upload" enctype="multipart/form-data" class="form__box">
            <input type="hidden" name="action" value="add-image" />
            <div class="form-field">
              <label class="upload__title form_container">Kies een afbeelding
              <span class="error"><?php if(!empty($errors['title'])){ echo $errors['title'];}?></span>
                  <input type="file" name="image" accept="image/png, image/jpeg, image/gif" required  class="upload__button filter__submit input">
              </label>
              </div>
            <div class="form-field">
            <label class="upload__title form_container">Titel
              <span class="error"><?php
               if(!empty($errors['title'])){ 
                 echo $errors['title'];} ?></span>
              <input type="text" name="title" required  class="upload__title form_field input">
            </label>
            </div> 
            <div class="form-field"> 
                <label class="upload__title form_container">Stappenplan
                  <span class="error"><?php if(!empty($errors['instructions'])){ echo $errors['instructions'];} ?></span>
                  <textarea name="stappenplan" id="stappenplan" cols="50" rows="5" required  class="form_field upload__title input"></textarea>
                </label>
            </div>
            <div class="form-field"> 
              
              <label class="upload__title form_container">Ingredienten
              <span class="error"><?php if(!empty($errors['description'])){ echo $errors['description '];} ?></span>
              <input type="text" TextMode="MultiLine" name="ingredienten" maxlength="255" required  class="form_field upload__title input"  id="ingredienten">
            </label>
            </div>
          
            <div class="category_container">
              <label class="category_label filter__button">
              <input class="category_input" type="checkbox" id="pasta" name="category" value="1">
              Pasta</label>

              <label class="category_label filter__button">
              <input class="category_input" type="checkbox" id="veggie" name="category" value="2">
              Veggie</label>

              <label class="category_label filter__button">
              <input class="category_input" type="checkbox" id="vlees" name="category" value="3">
              Vlees</label>
            </div> 
            <div class="form-field">
              <input type="submit" value="uploaden"  class="filter__button filter__submit">
              <input type="reset" value="wissen"  class="filter__button filter__submit">
            </div> 
          </form>
    </section>

<script src="js/validate.js"></script>

What I do know: I know the recipe_id isn't an issue. I use the same for other SQL inserts. I don't want an explode() or implode() as they don't work in this case. Tried several foreaches but haven't gotten it to work, just yet. it's also nothing to do with brackets or comma's or whatever.

It's just the insert only doing it once while I have 2 checkbox values. and I don't know how to make it loop over both or all 3 when all 3 are selected

Answer 1

             <div class="category_container">
              <label class="category_label filter__button">
              <input class="category_input" type="checkbox" id="pasta" name="category[]" value="1">
              Pasta</label>

              <label class="category_label filter__button">
              <input class="category_input" type="checkbox" id="veggie" name="category[]" value="2">
              Veggie</label>

              <label class="category_label filter__button">
              <input class="category_input" type="checkbox" id="vlees" name="category[]" value="3">
              Vlees</label>
            </div>

You need to use category[] , rather than just category to send multiple values in form submit.

Now, you can fetch the values of categories

$categories = (is_array($_POST['category'])) ? $_POST['category'] : [];

I have assigned categories a default value if there is no checkbox selected.

Then use implode function of php:

$categories_string = implode(',', $categories);

or use a foreach loop based on how you want to save in your database table:

foreach ($category as $category)
{
  //use each category
}