Welcome Guest, Not a member yet? Register   Sign In
How to insert a invoice data to db in codeigniter
#1

Any one can help me how to insert a invoice data to db in codeigniter. I am beginner to development. I have no idea how to insert and how is handle database .

This is my view file. 


PHP Code:
<html>
<
head>
 
   <meta charset="utf-8">
 
   <title>Invoice</title>
 
   <link rel="stylesheet" href="style.css">
 
   <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
 
   <style type="text/css">
 
       /* reset */

 
       *
 
       {
 
           border0;
 
           box-sizingcontent-box;
 
           colorinherit;
 
           font-familyinherit;
 
           font-sizeinherit;
 
           font-styleinherit;
 
           font-weightinherit;
 
           line-heightinherit;
 
           list-stylenone;
 
           margin0;
 
           padding0;
 
           text-decorationnone;
 
           vertical-aligntop;
 
       }

 
       /* content editable */

 
       *[contenteditable] { border-radius0.25emmin-width1emoutline0; }

 
       *[contenteditable] { cursorpointer; }

 
       *[contenteditable]:hover, *[contenteditable]:focustd:hover *[contenteditable], td:focus *[contenteditable], img.hover background#DEF; box-shadow: 0 0 1em 0.5em #DEF; }

 
       span[contenteditable] { displayinline-block; }

 
       /* heading */

 
       h1 fontbold 100sans-serifletter-spacing0.5emtext-aligncentertext-transformuppercase; }

 
       /* table */

 
       table font-size75%; table-layoutfixedwidth100%; }
 
       table border-collapseseparateborder-spacing2px; }
 
       thtd border-width1pxpadding0.5empositionrelativetext-alignleft; }
 
       thtd border-radius0.25emborder-stylesolid; }
 
       th background#EEE; border-color: #BBB; }
 
       td border-color#DDD; }

 
       /* page */

 
       html font16px/'Open Sans'sans-serifoverflowautopadding0.5in; }
 
       html background#999; cursor: default; }

 
       body box-sizingborder-boxheight11inmargin0 autooverflowhiddenpadding0.5inwidth8.5in; }
 
       body background#FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }

 
       /* header */

 
       header margin0 0 3em; }
 
       header:after clearbothcontent""displaytable; }

 
       header h1 background#000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
 
       header address floatleftfont-size75%; font-stylenormalline-height1.25margin0 1em 1em 0; }
 
       header address p margin0 0 0.25em; }
 
       header spanheader img displayblockfloatright; }
 
       header span margin0 0 1em 1emmax-height25%; max-width60%; positionrelative; }
 
       header img max-height100%; max-width100%; }
 
       header input cursorpointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"height100%; left0opacity0positionabsolutetop0width100%; }

 
       /* article */

 
       articlearticle addresstable.metatable.inventory margin0 0 3em; }
 
       article:after clearbothcontent""displaytable; }
 
       article h1 cliprect(0 0 0 0); positionabsolute; }

 
       article address floatleftfont-size125%; font-weightbold; }

 
       /* table meta & balance */

 
       table.metatable.balance floatrightwidth36%; }
 
       table.meta:aftertable.balance:after clearbothcontent""displaytable; }

 
       /* table meta */

 
       table.meta th width40%; }
 
       table.meta td width60%; }

 
       /* table items */

 
       table.inventory clearbothwidth100%; }
 
       table.inventory th font-weightboldtext-aligncenter; }

 
       table.inventory td:nth-child(1) { width26%; }
 
       table.inventory td:nth-child(2) { width38%; }
 
       table.inventory td:nth-child(3) { text-alignrightwidth12%; }
 
       table.inventory td:nth-child(4) { text-alignrightwidth12%; }
 
       table.inventory td:nth-child(5) { text-alignrightwidth12%; }

 
       /* table balance */

 
       table.balance thtable.balance td width50%; }
 
       table.balance td text-alignright; }

 
       /* aside */

 
       aside h1 bordernoneborder-width0 0 1pxmargin0 0 1em; }
 
       aside h1 border-color#999; border-bottom-style: solid; }

 
       /* javascript */

 
       .add, .cut
        
{
 
           border-width1px;
 
           displayblock;
 
           font-size.8rem;
 
           padding0.25em 0.5em;
 
           floatleft;
 
           text-aligncenter;
 
           width0.6em;
 
       }

 
       .add, .cut
        
{
 
           background#9AF;
 
           box-shadow0 1px 2px rgba(0,0,0,0.2);
 
           background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
 
           background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
 
           border-radius0.5em;
 
           border-color#0076A3;
 
           color#FFF;
 
           cursorpointer;
 
           font-weightbold;
 
           text-shadow-1px 2px rgba(0,0,0,0.333);
 
       }

 
       .add margin: -2.5em 0 0; }

 
       .add:hover background#00ADEE; }

 
       .cut opacity0positionabsolutetop0left: -1.5em; }
 
       .cut { -webkit-transitionopacity 100ms ease-in; }

 
       tr:hover .cut opacity1; }

 
       @media print {
 
           * { -webkit-print-color-adjustexact; }
 
           html backgroundnonepadding0; }
 
           body box-shadownonemargin0; }
 
           span:empty { displaynone; }
 
           .add, .cut displaynone; }
 
       }

 
       @page margin0; }
 
   </style>
 
   <script src="script.js"></script>
</
head>
<
body>
<
header>
 
   <h1>Invoice</h1>
 
   <address contenteditable>
 
       <p>Jonathan Neal</p>
 
       <p>101 EChapman Ave<br>OrangeCA 92866</p>
 
       <p>(800555-1234</p>
 
   </address>
 
   <span><img alt="" src="><input type="file" accept="image/*"></span>
</header>
<article>
    <h1>Recipient</h1>
    <address contenteditable>
        <p>Some Company<br>c/o Some Guy</p>
    </address>
    <table class="meta">
        <tr>
            <th><span contenteditable>Invoice #</span></th>
            <td><span contenteditable>101138</span></td>
        </tr>
        <tr>
            <th><span contenteditable>Date</span></th>
            <td><span contenteditable>January 1, 2012</span></td>
        </tr>
        <tr>
            <th><span contenteditable>Amount Due</span></th>
            <td><span id="prefix" contenteditable>$</span><span>600.00</span></td>
        </tr>
    </table>
    <table class="inventory">
        <thead>
        <tr>
            <th><span contenteditable>Item</span></th>
            <th><span contenteditable>Description</span></th>
            <th><span contenteditable>Rate</span></th>
            <th><span contenteditable>Quantity</span></th>
            <th><span contenteditable>Price</span></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><a class="cut">-</a><span contenteditable>Front End Consultation</span></td>
            <td><span contenteditable>Experience Review</span></td>
            <td><span data-prefix>$</span><span contenteditable>150.00</span></td>
            <td><span contenteditable>4</span></td>
            <td><span data-prefix>$</span><span>600.00</span></td>
        </tr>
        </tbody>
    </table>
    <a class="add">+</a>
    <table class="balance">
        <tr>
            <th><span contenteditable>Total</span></th>
            <td><span data-prefix>$</span><span>600.00</span></td>
        </tr>
        <tr>
            <th><span contenteditable>Amount Paid</span></th>
            <td><span data-prefix>$</span><span contenteditable>0.00</span></td>
        </tr>
        <tr>
            <th><span contenteditable>Balance Due</span></th>
            <td><span data-prefix>$</span><span>600.00</span></td>
        </tr>
    </table>
</article>
<aside>
    <h1><span contenteditable>Additional Notes</span></h1>
    <div contenteditable>
        <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
    </div>
</aside>
<script type="text/javascript">
    /* Shivving (IE8 is not supported, but at least it won't look as awful)
/* ========================================================================== */

 
   (function (document) {
 
       var
            head 
document.head document.getElementsByTagName('head')[0] || document.documentElement,
 
           elements 'article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output picture progress section summary time video x'.split(' '),
 
           elementsLength elements.length,
 
           elementsIndex 0,
 
           element;

 
       while (elementsIndex elementsLength) {
 
           element document.createElement(elements[++elementsIndex]);
 
       }

 
       element.innerHTML 'x<style>' +
 
           'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
 
           'audio[controls],canvas,video{display:inline-block}' +
 
           '[hidden],audio{display:none}' +
 
           'mark{background:#FF0;color:#000}' +
 
           '</style>';

 
       return head.insertBefore(element.lastChildhead.firstChild);
 
   })(document);

 
   /* Prototyping
    /* ========================================================================== */

 
   (function (windowElementPrototypeArrayPrototypepolyfill) {
 
       function NodeList() { [polyfill] }
 
       NodeList.prototype.length ArrayPrototype.length;

 
       ElementPrototype.matchesSelector ElementPrototype.matchesSelector ||
 
           ElementPrototype.mozMatchesSelector ||
 
           ElementPrototype.msMatchesSelector ||
 
           ElementPrototype.oMatchesSelector ||
 
           ElementPrototype.webkitMatchesSelector ||
 
           function matchesSelector(selector) {
 
               return ArrayPrototype.indexOf.call(this.parentNode.querySelectorAll(selector), this) > -1;
 
           };

 
       ElementPrototype.ancestorQuerySelectorAll ElementPrototype.ancestorQuerySelectorAll ||
 
           ElementPrototype.mozAncestorQuerySelectorAll ||
 
           ElementPrototype.msAncestorQuerySelectorAll ||
 
           ElementPrototype.oAncestorQuerySelectorAll ||
 
           ElementPrototype.webkitAncestorQuerySelectorAll ||
 
           function ancestorQuerySelectorAll(selector) {
 
               for (var cite thisnewNodeList = new NodeListcite cite.parentElement;) {
 
                   if (cite.matchesSelector(selector)) ArrayPrototype.push.call(newNodeListcite);
 
               }

 
               return newNodeList;
 
           };

 
       ElementPrototype.ancestorQuerySelector ElementPrototype.ancestorQuerySelector ||
 
           ElementPrototype.mozAncestorQuerySelector ||
 
           ElementPrototype.msAncestorQuerySelector ||
 
           ElementPrototype.oAncestorQuerySelector ||
 
           ElementPrototype.webkitAncestorQuerySelector ||
 
           function ancestorQuerySelector(selector) {
 
               return this.ancestorQuerySelectorAll(selector)[0] || null;
 
           };
 
   })(thisElement.prototype, Array.prototype);

 
   /* Helper Functions
    /* ========================================================================== */

 
   function generateTableRow() {
 
       var emptyColumn document.createElement('tr');

 
       emptyColumn.innerHTML '<td><a class="cut">-</a><span contenteditable></span></td>' +
 
           '<td><span contenteditable></span></td>' +
 
           '<td><span data-prefix>$</span><span contenteditable>0.00</span></td>' +
 
           '<td><span contenteditable>0</span></td>' +
 
           '<td><span data-prefix>$</span><span>0.00</span></td>';

 
       return emptyColumn;
 
   }

 
   function parseFloatHTML(element) {
 
       return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g'')) || 0;
 
   }

 
   function parsePrice(number) {
 
       return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g'$1,');
 
   }

 
   /* Update Number
    /* ========================================================================== */

 
   function updateNumber(e) {
 
       var
            activeElement 
document.activeElement,
 
           value parseFloat(activeElement.innerHTML),
 
           wasPrice activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));

 
       if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
 
           e.preventDefault();

 
           value += e.keyCode == 38 e.keyCode == 40 ? -Math.round(e.wheelDelta 0.025);
 
           value Math.max(value0);

 
           activeElement.innerHTML wasPrice parsePrice(value) : value;
 
       }

 
       updateInvoice();
 
   }

 
   /* Update Invoice
    /* ========================================================================== */

 
   function updateInvoice() {
 
       var total 0;
 
       var cellspricetotalai;

 
       // update inventory cells
 
       // ======================

 
       for (var document.querySelectorAll('table.inventory tbody tr'), 0a[i]; ++i) {
 
           // get inventory row cells
 
           cells a[i].querySelectorAll('span:last-child');

 
           // set price as cell[2] * cell[3]
 
           price parseFloatHTML(cells[2]) * parseFloatHTML(cells[3]);

 
           // add price to total
 
           total += price;

 
           // set row total
 
           cells[4].innerHTML price;
 
       }

 
       // update balance cells
 
       // ====================

 
       // get balance cells
 
       cells document.querySelectorAll('table.balance td:last-child span:last-child');

 
       // set total
 
       cells[0].innerHTML total;

 
       // set balance and meta balance
 
       cells[2].innerHTML document.querySelector('table.meta tr:last-child td:last-child span:last-child').innerHTML parsePrice(total parseFloatHTML(cells[1]));

 
       // update prefix formatting
 
       // ========================

 
       var prefix document.querySelector('#prefix').innerHTML;
 
       for (document.querySelectorAll('[data-prefix]'), 0a[i]; ++ia[i].innerHTML prefix;

 
       // update price formatting
 
       // =======================

 
       for (document.querySelectorAll('span[data-prefix] + span'), 0a[i]; ++i) if (document.activeElement != a[i]) a[i].innerHTML parsePrice(parseFloatHTML(a[i]));
 
   }

 
   /* On Content Load
    /* ========================================================================== */

 
   function onContentLoad() {
 
       updateInvoice();

 
       var
            input 
document.querySelector('input'),
 
           image document.querySelector('img');

 
       function onClick(e) {
 
           var element e.target.querySelector('[contenteditable]'), row;

 
           element && e.target != document.documentElement && e.target != document.body && element.focus();

 
           if (e.target.matchesSelector('.add')) {
 
               document.querySelector('table.inventory tbody').appendChild(generateTableRow());
 
           }
 
           else if (e.target.className == 'cut') {
 
               row e.target.ancestorQuerySelector('tr');

 
               row.parentNode.removeChild(row);
 
           }

 
           updateInvoice();
 
       }

 
       function onEnterCancel(e) {
 
           e.preventDefault();

 
           image.classList.add('hover');
 
       }

 
       function onLeaveCancel(e) {
 
           e.preventDefault();

 
           image.classList.remove('hover');
 
       }

 
       function onFileInput(e) {
 
           image.classList.remove('hover');

 
           var
                reader 
= new FileReader(),
 
               files e.dataTransfer e.dataTransfer.files e.target.files,
 
               i 0;

 
           reader.onload onFileLoad;

 
           while (files[i]) reader.readAsDataURL(files[i++]);
 
       }

 
       function onFileLoad(e) {
 
           var data e.target.result;

 
           image.src data;
 
       }

 
       if (window.addEventListener) {
 
           document.addEventListener('click'onClick);

 
           document.addEventListener('mousewheel'updateNumber);
 
           document.addEventListener('keydown'updateNumber);

 
           document.addEventListener('keydown'updateInvoice);
 
           document.addEventListener('keyup'updateInvoice);

 
           input.addEventListener('focus'onEnterCancel);
 
           input.addEventListener('mouseover'onEnterCancel);
 
           input.addEventListener('dragover'onEnterCancel);
 
           input.addEventListener('dragenter'onEnterCancel);

 
           input.addEventListener('blur'onLeaveCancel);
 
           input.addEventListener('dragleave'onLeaveCancel);
 
           input.addEventListener('mouseout'onLeaveCancel);

 
           input.addEventListener('drop'onFileInput);
 
           input.addEventListener('change'onFileInput);
 
       }
 
   }

 
   window.addEventListener && document.addEventListener('DOMContentLoaded'onContentLoad);

</
script>
</
body>
</
html


I have no idea about controller and model. Any one can help me to develop this component. 
Reply




Theme © iAndrew 2016 - Forum software by © MyBB