Mikmak View Category ReadingOne View

1. de gekozen rij te updaten
2. de gekozen rij te inserten
3. de gekozen rij te deleten
4. de details van een andere rij te bekijken
5. te annuleren en terug naar Editing view te gaan

Probleem

In Mikmak UnitBase ReadingOne wireframe omzetten naar HTML hebben we gezien hoe de wireframe omzet naar html. We voegen nu de nodige attributen en PHP code toe om de details van de gekozen rij te tonen. Verder voegen de use cases toe die de gebruiker vanaf die pagina kan uitvoeren.

Design

1. We gebruiken de $model instantie die in de view closure vanuit de actiemethode ReadingOne in de Category Controller klasse aan de view wordt meegegeven om de gegevens die getoond moeten worden op te halen.
2. De volgende use cases moeten we toevoegen. We kiezen ervoor om hiervoor een a html element te gebruiken en geen html button als we geen gegevens naar de server moeten sturen.
   1. creatingOne

      <button type="submit" value="Category-insertingOne" name="uc">
          <span class="icon-plus"></span><span
              class="screen-reader-text">Inserten</span></button>
      

   2. updatingOne - hier moeten we de Id van de te updaten rij naar de server sturen

      <button type="submit" value="Category-updatingOne" name="uc">
          <span class="icon-pencil"></span><span
              class="screen-reader-text">Updating</span></button>
      

   3. Delete - hier moeten we de Id van de te deleten rij naar de server sturen

      <button type="submit" value="Category-deleteOne" name="uc">
          <span class="icon-remove"></span><span
              class="screen-reader-text">Delete</span></button>
      

   4. Annuleren

      <a href="index.php?uc=Category-editing">
          <span class="icon-close"></span><span
              class="screen-reader-text">Sluiten</span></a>
      

3. Nu moeten we nog de input html elementen aanpassen. We voegen het attribuut readonly toe en vullen de waarden voor het value attribuut in met de waarden van de Category instantie.

   <fieldset>
       <div>
           <input id="Category-Id" name="Category-Id" style="width: 6em;"
                  type="hidden" value="<?php echo $model->getId(); ?>" />
       </div>
       <div>
           <label for="Category-Name">Naam</label>
           <input id="Category-Name" name="Category-Name"
                  class="text" style="width: 32.5%;" type="text" value="<?php echo $model->getName(); ?>"
                  readonly/>
       </div>
       <div>
           <label for="Category-Description">Beschrijving</label>
           <texterea id="Category-Description" name="Category-Description"
                     style="width: 40%;" readonly
           "><?php echo $model->getDescription(); ?></textarea>
       </div>
   </fieldset>

Oplossing

De volledige code voor ReadingOne.php:

<!--  ReadingOne Template for Category entity
 modernways.be
 created by an orm apart
 Entreprise de modes et de manières modernes
 created on Sunday 24th of January 2016 11:56:06 AM
 file name modernways/Webshop/src/AnOrmApart/View/Category/Editing.php
-->
<div class="floor" id="second-floor" xmlns="http://www.w3.org/1999/html">
    <div class="control-panel">
        <a href="<index.php?uc=Admin-index" class="tile _14x1">
            <span class="icon-menu2"></span>
            <span class="screen-reader-text">Home</span>
        </a>
        <h1>Categorie</h1>
    </div>
    <form class="room" action="index.php" method="post">
        <header>
            <h2>Categorie</h2>
            <div id="command-panel" class="command-panel">
                <button type="submit" value="Category-updatingOne" name="uc">
                    <span class="icon-pencil"></span><span
                        class="screen-reader-text">Updating</span></button>


                <button type="submit" value="Category-insertingOne" name="uc">
                    <span class="icon-plus"></span><span
                        class="screen-reader-text">Inserten</span></button>
                <button type="submit" value="Category-deleteOne" name="uc">
                    <span class="icon-remove"></span><span
                        class="screen-reader-text">Delete</span></button>


                <a href="index.php?uc=Category-editing">
                    <span class="icon-close"></span><span
                        class="screen-reader-text">Sluiten</span></a>
            </div>
        </header>
        <div class="detail">
            <fieldset>
                <div>
                    <input id="Category-Id" name="Category-Id" style="width: 6em;"
                           type="hidden" value="<?php echo $model->getId(); ?>" readonly/>
                </div>
                <div>
                    <label for="Category-Name">Naam</label>
                    <input id="Category-Name" name="Category-Name"
                           class="text" style="width: 32.5%;" type="text" value="<?php echo $model->getName(); ?>"
                           readonly/>
                </div>
                <div>
                    <label for="Category-Description">Beschrijving</label>
                    <texterea id="Category-Description" name="Category-Description"
                              style="width: 40%;" readonly
                    "><?php echo $model->getDescription(); ?></textarea>
                </div>
            </fieldset>
        </div>
        <div class="feedback">
        </div>
        <?php $partialView('Category', 'ReadingAll', $model); ?>
    </form>
</div>
<?php $appStateView(); ?>