Expense Web App

Hello. I have a bunch of travel receipts that keep piling up, and I have reached a point of disgust forcing me to finally try and address this problem!!

I would like to build a simple program where I can enter in expenses off of the receipts, and maybe have it where I could also bring up a scanned image of the original receipt.

Problem is that I haven’t coded in PHP in nearly a decade!!

The part that seems scariest to me is that ideally I need a way to create a parent Order/Invoice/Receipt record, but then have a web control where I can add 1-to-many line items.

Many many years ago I had built a pretty cool database using MS Access that would do that, and Access made it easy to use their pre-made form controls to do what I described.

I’m curious how hard this would be to do in PHP/HTML?

Not sure where to begin, and if this take me months to learn how to do, then I might as well just let my travel receipts keep piling up… :weary:

It all depends on how quickly you pick things up. If you’ve got a background in coding PHP then you may well pick it up again quite quickly, and it’ll be just down to the various items that have changed since then, and while there are probably many, initially at least only a few of them will affect your project.

As for where to begin, just pick one aspect of it and have a go. You’ll probably figure out quite quickly whether you’re getting back into the swing of things. Set up a database where you can just record a basic expense record - date, description, supplier - and see how much trouble you get into. Then you can add a supplier table so you’re using an ID and not repeating supplier details. Then you probably want analysis codes on each expense. But before that you’ll want to add the line information, so you can have different codes on each line.

Possibly not a good idea to sit down and plan it all before you start. Normally that is a good idea, but why would you want to put yourself off before you’ve even started?

1 Like

@droopsnoot,

Thanks for the reply! I sure hope that I can solve this problem in short order, because this whole receipt issue has become unbearable! :weary:

I really want to get back into web development, but having been away from it so long, I fear it will take me until the end of 2019 to get back up to speed, and that is my dilemma…

If I can build a not-so-pretty, but working web app to allow me to key in receipt details - as they happen - then I can always go back and refine things later.

I understand how to design what I want - at least the database part - but what scares me the most is the part where i enter in the receipt details.

If I was doing this in MS Access, I would have an “Receipt” form where I would enter in the Receipt Date, Merchant Name, Location, Subtotal, Discounts, Shipping, Taxes, Receipt Total.

Then to capture what I actually bought, in MS Access, I would have a “Receipt Details” subform that was created using a control that looked like a spreadsheet. It would start off with one row, and that “row” would contain things like: Item No, Item Name, Item Description, Unit Price, Quantity, and so on. After you entered the first item, you would click a button or whatever, and MS Access would add a new row/record for the next item.

The beauty of this design, is it will handle one item or one million items! And all of the “Receipt Details” would tie back up to the “Receipt” in your database.

So where I am most confused is how to take that UI design i would have created in MS Access, and do it on the web. (In MS Access, you have a pallete of all of these dynamic controls, and you just drop them on your database form, tweak some control properties, and you have a working solution!

But for this new web app, I won’t have that luxury of MS Access doing most of the work for me.

When I used to play around with web development, I most used HTML and PHP and MySQL to build simple websites. If there was a form, it was simple like “Create an Account”, so I didn’t need anything “dynamic” or have to worry about sub forms.

Does that help better explain my knowledge and what I am trying to build?

I’m not sure whether there are forms-based front-ends that will do what you need with MySQL, I am sure there probably are but I have no knowledge of them. I’ve been writing a couple of applications for my own use and the forms are tedious, but as I don’t need to impress anyone they’re of the “basic but working” type. As I get fed up of doing particular things, that’s when I add a bell or a whistle to speed things up.

I think in order to do what I want I need Javascript. Maybe I asked my question in the wrong place and i should ask in the Javascript forum?

I think starting an app is a good thing to be doing. The main problem with any app is the math. If your math isn’t up-to-date, I would suggest doing the math on an online calculator to make sure everything is correct. The problem with most developers is that they know what they want to do, but when it comes to dealing with formulas and math, they don’t know a thing. A few years back, a student in my class didn’t know how to do the homework, I told him that it’s all about the math. If you figure out the math formula, you can easily write the program. He failed to understand the formula and later failed that assignment. So I would do the math up front with a few receipts. If the math adds up, then I’d start building the app.

You don’t need JavaScript to store the expense records, that’s one of the things I’d be adding later on once you’ve got the database design sorted out and figured out the flow of data. You can submit a form each time you add a line, and have it re-draw stuff, without JS. Then you can add JS to streamline things so that you don’t have to re-draw the screen every time.

To make it look slick, there’s no doubt you’ll probably want to add JS / Ajax support, but it’s not essential at the start.

@spaceshiptrooper,

Where did that come from? What does math have to do with anything I said?

I need help figuring out how to create a dynamic subform where I can add/delete rows of receipt details information on-the-fly. As I describe this, I guess you can’t do that with a server-side solution like PHP alone, and thus I mentioned Javascript.

What in the heck does a calculator have to do with any of this?

Let’s say I just went to Walmart and bought a load of groceries…

I have one receipt from one merchant with many details.

This is a one to many relation which requires a parent form and a nested child sub-form.

This is a fact. Period.

It would be stupid to have a PHP form where you had fields like “Order Date”, “Merchant”, “Clerk”, “Order total” and then for the details section, you hard-coded in 500 slots to make sure you had enough space for the details. WTF?!

The correct way to do things is to have a nested sub-form where you have an initial row with: “Item Description”, “Price”, “Quantity”, “Discount” and then if you have more items you’d click on a button and you web application would paint a new rows with the same fields. Have another item? Click on the “Add Item” button.

Follow me?

I need a way to dynamically add/remove Item Details rows/fields to my form. (I only know how to hard-codes these currently using HTML and PHP which won’t work for this problem as I have just described.)

So I am 99% certain that Javascript is how I solve the problem which means I posted this question in the wrong place but of course then i am not entirely sure how to solve things or else I wouldn’t be here! :wink:

Why do you want all those details? What will you do with them?

1 Like

Adding and subtracting receipts? Totaling up the amount? It’s fine if you don’t need a calculator to do your math. I’m simply saying that if you don’t know that much about math, you can use a calculator.

Pretty sure OP is wanting to do something like this…
https://css-tricks.com/examples/EditableInvoice/

1 Like

So I know where I am spending all of my money!!

YES!!! Now we are getting somewhere!

The look and feel of what I want is a little different, but conceptually, that is the functionality that I need.

A parent form with traditional fields, and a nested sub-form with the ability to dynamically add/remove the line-items as you please.

Based on thinking this over and looking online, it seems to me that I would need Javascript to do what you have shown me in that link, right?

All I know is some HTML and PHP, and the limitation of server-side scripting is that you get one chance to display a form, and there is no way to modify it on the fly. So if I hard-coded a form and a sub-form with 50 slots, I’d be okay until the UX police drove by or until I had 51 items on a receipt!

So where can I learn to do things like you have sjust shown me?

(BTW, did you create that website?)

Pretty cool looking invoice generator!! :+1:

So you are recommending that I practice adding up a series of numbers until I can get it to work out, is that what you are advising? :roll_eyes:

Fwiw, if you read this entire thread, then you’d see I would use SQL to do the math for me…

If you are just wanting to learn something that is OK, but if you really want to manage your finances I would suggest one of the many accounting programs available, both free and paid.

The main page and source code for what I showed you is here.
https://css-tricks.com/html-invoice/

2 Likes

Nah, that’s cheating!

First of all, I want to learn new and cool ways to program. Secondly, I have a vision of exactly what I want and don’t want some off-the-shelf script. :slight_smile:

So how did they create that dynamic invoice you showed me?

Was it javascript or something else?

And where can I learn how to do that?

I gave you the link to the source code. Download it and see how they did it.

You must have edited your link, because when I clicked on it earlier it just showed the invoice.

See post #18