I am trying to create a webpage to call from a MYSQL database, present the information retrieved and then handle in a couple of ways.
Upon entering a unique number, I bring up the relevant details, example here being;
Order Number | Item
----------
1234 B111
1234 C333
1234 D999
After this, I want to input (more specifically, scan Barcodes) each of the "Items" manually, confirming they have been manually checked.
Once complete, and all 3 items have been matched correctly, I want to submit the page and append 2 fields into the database (this part is no problem). But I don't want this to be possible until each of the items has been checked off, so no committal to the DB will be made until it is confirmed correct. Also, if something is scanned is not in this range, an alert will be shown.
Is anyone able to point me in the right direction on the best way to do this? I am not after a complete solution, just a general direction to the best approach to do this.
If I understand correctly, you are trying to do the following, in different steps:
And what you are asking is a good way to handle the whole of step 2
I can come up with 2 ways:
Server sided
Make some extra tables to hold a 'session'. Your session here is those 3 steps in all.
ScanSessionHeader ScanSessionLine
for example
When you scan the order, you make a header record with a change DateTime and make it hold an open state.
As long as the record is in this 'open' state. You show this on your webpage and you can keep showing the next scan field.
When you submit a product line to the backend you, save the product barcode in the ScanSessionLine and it's validation state.
And you can show this information on the webpage.
When the whole thing needs to be submitted, you 'close' the header so it can not longer be used to add more lines too.
And if all lines are validated properly you process them all in one go.
You can do the same by storing everything in SESSION variables, but the whole scan session will get lost when the server gets restarted.
This can be prevented by showing any open scan sessions when none are actively bound to this session. (by holding a ScanSessionHeader.ID in the session) so you can continue after a server restart (or Apache restart).
Client side with asynchronous server calls
After the order gets retrieved, you open a form with the field for the product barcode.
You can do this from the server side, but I would start this with JavaScript from the start.
As soon as something is entered in the field, you do an AJAX call: https://www.w3schools.com/xml/ajax_intro.asp
This loads a webpages in the background, with parameters and after you use this call to validate the barcode, you can set the state of the product line.
With every product scanned you can show a new product line, so you can add more.
And as long as all lines get validated as correct, you keep showing the submit button for the whole form.
However, all data gets lost as soon as the pages gets reloaded. For example Javascript error prevents you from completing the form further so the user reloads.
What path you choose depend on your use case:
If you want a safe solution with ways to save the state of the scanning, go with the first one and save in the database. Just make sure to implement a way to throw away old/stall scan sessions.
If you need more speed and don't want to wait for full page reloads and want it all to look more fancy and snappy. Go with asynchronous server calls and do all your magic with JavaScript.
You can still save the whole session in a database, but it will take a bit more code to be able to restore a session to the webpage the user is viewing.
Or if you want a really quick and dirty solution. Pass all data needed for the validations into the webpage and let Javascript handle everything.
Write down some requirements and I could advise what path could work for you.