Facturatie

Even wat opgezocht en dan heb je al vrij snel wat oplossingen. Ik weet natuurlijk niet in hoeverre jij thuis bent in PHP en Javascript, maar dit zijn wat manieren:

Vraag 1. http://stackoverflow.com/quest…ments-dynamically-to-form
Vraag 2. http://www.phptuts.nl/view/27/5/
Vraag 3. http://stackoverflow.com/quest…reate-a-pdf-file-with-php

Ik heb het als eens gedaan zoals je wilt bij vraag 1 en 2. Ik zal eens kijken waar de code ligt en je die eens geven.

Formulier-elementen (in HTML) ondersteunen array-constructies door rechte haken toe te voegen aan een veldnaam:

<input type="text" name="regel[]" />

Dit soort velden kun je knippen en plakken met JavaScript (waarschijnlijk bedoelde je dat of jQuery in plaats van JSON, ik zie niet helemaal hoe JSON hier bij past?).

Als je vervolgens een regel opslaat en daarna weer wilt bewerken in eenzelfde soort dynamisch formulier zou je kunnen overwegen om een referentie (het volgnummer / het auto-increment veld) mee te geven aan dit veld:

<input type="text" name="regel[41]" value="eerder ingevoerde waarde" />

Wel zul je iets moeten verzinnen om het onderscheid te maken tussen bestaande regels en nieuwe regels.

Wat je ook nog zou kunnen doen (en wellicht stukken makkelijker is) is het volgende: deze regels zijn gekoppeld aan een overkoepelend iets (een factuur, een order, whatever). Wanneer je al deze data update doe je het volgende bij verwerking van het formulier:

• je verwijdert alle bestaande items die gekoppeld zijn aan de factuur, en
• je voegt ze opnieuw toe

Dus je gebruikt deze als een koppeltabel tussen je orderregels en je orders, je hoeft dan geen moeilijke inspecties te doen maar kiepert gewoon alles weg en voegt alles (en mogelijk meer) opnieuw toe.

Dit alles zou wel in één ondeelbare actie moeten. Dit kun je doen met database-transacties. Je moet er dan wel voor zorgen dat de ENGINE die je tabellen gebruiken deze bewerkingen ondersteunen.

In zijn algemeenheid is het ook wel handig dat als je een grote administratief-achtige database hebt dat deze echt relationeel is opgezet. Tabellen hebben dan echt onderlinge verbanden en relaties middels foreign keys.

Indien deze database(tabellen) niet de InnoDB engine hebben, zou ik daar eerst eens mee aan de slag gaan.

De database vormt het fundament van je applicatie. Als deze niet goed is, hoef je ook niet veel van je applicatie te verwachten.

EDIT: over PDF: dit lijkt mij echt een aparte zijstraat en die zou ik gewoon apart behandelen. Je zou bij het ontwerp van dit ding wel in je achterhoofd kunnen houden dat dit op ening moment ook in PDF-vorm gebruikt moet worden. Daarbij is het volgens mij ook (bij facturatie dan) belangrijk dat op het moment dat je hier een PDF van maakt en deze naar een klant stuurt dat de bijbehorende data niet meer gewijzigd kan/mag worden.

Zo, na lang zoeken heb ik het gevonden!

Standaard staat er 1 lijn, omdat je dit minimum nodig hebt....

<form method="POST">
     <div id="dynamicInput">
     <p><input class="text medium"  type="text" value="" name="item1_name"/><input class="text prijs"  type="text" value="0,000" name="item1_price"/><input class="text aantal" type="text" value="" name="item1_qty"/></p>


     </div>
     <input type="button" class="button yellow" value="extra lijn" onClick="addInput('dynamicInput');">
</form>
<input type="submit" class="button" value="Toevoegen" /></form>

De javascript code is:

<script type="text/javascript">
var counter = 1;
var limit = 20;
function addInput(divName){
     if (counter == limit)  {
          alert("maximaal aantal lijnen bereikt.  (" + counter + ") lijnen");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<p><input class='text medium'  type='text' value='' name='item"+ (counter + 1) +"_name'/><input class='text prijs'  type='text' value='0,000' name='item"+ (counter + 1) +"_price'/><input class='text aantal' type='text' value='' name='item"+ (counter + 1) +"_qty'/></p>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>

zoals je in de in de code kunt aflezen, zie je dat ik er maximaal 20 kan invoeren.
die code kan je uiteraard nog aanpassen als je het zo niet wilt. ik doe maximaal 20 lijnen omdat mijn factuur dan vol staat. (omzetten naar pdf). veel succes met de code!

Citaat van Aaron

Zo, na lang zoeken heb ik het gevonden!

Standaard staat er 1 lijn, omdat je dit minimum nodig hebt....

Code

<form method="POST">
     <div id="dynamicInput">
     <p><input class="text medium"  type="text" value="" name="item1_name"/><input class="text prijs"  type="text" value="0,000" name="item1_price"/><input class="text aantal" type="text" value="" name="item1_qty"/></p>


     </div>
     <input type="button" class="button yellow" value="extra lijn" onClick="addInput('dynamicInput');">
</form>
<input type="submit" class="button" value="Toevoegen" /></form>

De javascript code is:

Code

<script type="text/javascript">
var counter = 1;
var limit = 20;
function addInput(divName){
     if (counter == limit)  {
          alert("maximaal aantal lijnen bereikt.  (" + counter + ") lijnen");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<p><input class='text medium'  type='text' value='' name='item"+ (counter + 1) +"_name'/><input class='text prijs'  type='text' value='0,000' name='item"+ (counter + 1) +"_price'/><input class='text aantal' type='text' value='' name='item"+ (counter + 1) +"_qty'/></p>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>

Toon Meer

zoals je in de in de code kunt aflezen, zie je dat ik er maximaal 20 kan invoeren.
die code kan je uiteraard nog aanpassen als je het zo niet wilt. ik doe maximaal 20 lijnen omdat mijn factuur dan vol staat. (omzetten naar pdf). veel succes met de code!

Toon Meer

Dit is niet efficiënt. Zoals @FangorN al vermeldde, ondersteunen forms array structuur.
Dit maakt het uitlezen van de data vele malen eenvoudiger.

Citaat van Frenzo.Brouwer

En er heeft zich een programmeur gemeld die dit voor een leuk tarief kan realiseren.

Als hierbij geen InnoDB en/of transacties worden gebruikt zou ik het over laten maken ;).

Citaat van ThomasBlom

Dit is niet efficiënt. Zoals @FangorN al vermeldde, ondersteunen forms array structuur.
Dit maakt het uitlezen van de data vele malen eenvoudiger.

kan je eventueel een voorbeeld geven voor de ts? Het mijne is uit de oude doos en is inderdaad verouderd. Maar werkt wel nog steeds.

<?php
header('Content-Type: text/html; charset=UTF-8');


error_reporting(E_ALL);
ini_set('display_errors', 'stdout');


function escape($in) {
    return htmlentities($in, ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html>
<head>
<title>uurtje factuurtje</title>
<!-- je kunt natuurlijk ook je eigen variant rollen in native JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<style type="text/css">
body            { font-family: sans-serif; font-size: 10pt; }
div.item        { margin: 5px; }
div.item input  { width: 250px; }
pre             { font-size: 10pt; }
</style>
</head>


<body>
<?php
/*
Normaal zou dit in aparte acties opgenomen moeten worden
maar omdat dit een voorbeeld betreft maar even zo...
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    ?><pre><?php echo escape(print_r($_POST, true)) ?></pre><?php
} else {
?>
<form action="<?php echo escape($_SERVER['PHP_SELF']) ?>" method="post" accept-charset="UTF-8">
<div id="items">
    <!-- hier komen je items #YOLO -->
</div>
<button type="button" id="addline">regel toevoegen</button>
<button type="submit">opslaan</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('button#addline').click(function(e) {
        e.preventDefault();
        $('div#items').append(
            '<div class="item">\
                <input type="text" name="item[]" autocomplete="off" \/>\
                <button type="button" class="remove"> - <\/button>\
                <button type="button" class="add"> + <\/button>\
            <\/div>'
        );
    });
    $('div#items').on('click', 'button.remove', function(e) {
        if (confirm('delete?')) {
            $(this).parent().remove();
        }
    });
    $('div#items').on('click', 'button.add', function(e) {
        $(this).parent().after(
            '<div class="item">\
                <input type="text" name="item[]" autocomplete="off" \/>\
                <button type="button" class="remove"> - <\/button>\
                <button type="button" class="add"> + <\/button>\
            <\/div>'
        );
    });
});
//]]>
</script>
<?php
} // end REQUEST_METHOD check
?>
</body>
</html>

Je kunt dit natuurlijk nog uitbreiden met meer toeters en bellen als je dat leuk vindt.