here is a dynamic webpage problem that i would like some feedback on.
the goal is to automate this webpage and generate a letter grade based on user scores for each of a couple dozen questions. I would use html input elements to capture the question answers as numbers (either a 0, 1, or 2).
ideally, the page would be able to show the final grade on the same page as the original questions by just updating a form element output variable rather than re-directing the user to separate webpage to display the grade.
additionally, my goal is to keep a running total (counter) for how many users have filled out the form and displaying the average grade as time goes forward.
this is currently a static page, but my host offers server SQL database functionality, so i should be able to submit a series of PUT or POST operations and retrieve a GET of the calculated grade… if i’m understanding this right.
any direction or pointers toward study materials that address this sort of problem would be greatly appreciated.
I guess if I was wanting to alter a static page into a more dynamic one without a complete recode, I would still look at using AJAX and MySQLi if you are running a new enough PHP on your server - PDO is better overall to have in your toolbox, but has a tougher learning curve and isn’t as simple to use. There are a ton of tutorials roaming around out there for you to choose from depending on how you learn (I modified this statement below).
Your basic outline of the mechanics is correct. You will have some javascript that collects question answers and sends them to a PHP file on your server. The PHP file then negotiates with your SQL database and sends a payload back to the page. Your on-page JS then updates your page.
If you haven’t dealt with SQL databases before, looking at freecodecamp’s materials would be a great start. Be warned, this is an SQL deep dive, not a lot about hooking it up to the pages, and it is all video. https://www.freecodecamp.org/news/sql-and-databases-full-course/
If you would rather have a more direct hands-on tutorial I would suggest: https://makitweb.com/like-unlike-using-ajax-jquery-php/
In looking through a fair number of tutorials, I have to admit that most are just ad-serving, click-farmers. Normally I wouldn’t recommend it, but the W3schools pages for AJAX aren’t that bad. Sometimes they are WAY… out of date. https://www.w3schools.com/xml/ajax_intro.asp
And of course, if you already feel somewhat comfy with the nuts and bolts you can go directly to the developers docs.
AJAX through JS: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
AJAX through jQuery: https://api.jquery.com/jquery.ajax/
MySQLi: https://www.php.net/manual/en/book.mysqli.php
Best of luck - feel free to reach out with more questions if you have them.
RobM (Bob) (Bo)
thanks for the reply RobM, i’m going thru the codecamp vid now… it’s good to know i’m on the right track.
The SQL side looks pretty strait forward, i just need to build a table of integers to house the 26 response values, then another table to house the solution statistics.
using the <?php tag for scripting in html, it looks like i can execute a php script from my webpage to do the summation math, convert the numeric solution to a letter grade, then increment the counter and update the running average.
to get the user input to the SQL table i was going to try and just use the HTML5 forms abilities to “submit” via the action and method attributes when i press the associated button.
then all that’s needed is to query the SQL solutions table using php again to get the answer and running average. i might need to manually refresh the page to display it.
it doesn’t need to be fancy, i just need to store some info on the server-side, and using it to do the math via php seems easier than running it on the client-side with java.
I’m not sure of your situation. Since you are converting an existing site, I think it would be difficult to convert your pages over to all PHP. Remember, PHP is server-side, while HTML is browser side. You need an interpreter on the server side for the php. It would likely be easier to use some JavaScript (AJAX) to communicate with the server-side PHP. Other than that, you have the basics down.
my host has examples of how to do the SQL queries via php, but it assumes the script is in a .php file and i’m currently trying to find the magic .htacess line to stick in there so that it can recognize the <?php tag inside an ordinary .html file.
i’m told it can be done, but so far all the AddHandler and/or AddType things I’ve tried have not resulted in joy. Then i read php v7.3 has left that all behind, and my host want’s another $8/mo to provide backward compatibility…
grr…
is this why you were saying i should learn mySQLi or PDO if i’m gonna dive into server side scripts?
Using straight PHP will make your pages semi-dynamic, and also require that anything that you deliver be converted to a PHP page - yes, you can force the server to recognize HTML files as PHP. This will slow things a lot since any HTML will be parsed by the server. At any point, you should still be able to use AddType as long as your servers are running Apache - I think it is different for NGINX.
JavaScript/jQuery aren’t that bad to use to fetch data from the backend. Is there a reason that you would rather take another route?
in order to keep a running average, i need to store something on the server anyway… so if i’m going to try and figure that out, why wouldn’t i just use it’s computing power to do a few other tasks as well… it’s not much of a payload to post 26 integers.
if i’m going just java, i have to give up the idea of keeping a running value since it’s all on the client side. the reason i want to pick one or the other is that i don’t know squat about either one at the moment.
what i’m hearing from you tho, is that i would be better off keeping the .php as separate script files and only serve up the letter grade result from the server in a separate php file with html embedded inside to show the grade.
the problem there is i’m going to have to give up the idea of having the running value displayed on the same page as the quiz. i suppose i’ll also be limited to using inline style, if i want to make it pretty.
now i’m thinking is there maybe an iframe solution to display the server php (with html in it) in a window on the same page as the quiz?
Not exactly - JavaScript can use AJAX to fetch data from and push data to PHP scripts on the server. That means that when the user submits their answers you can use javascript to deliver the answers to a server-side PHP script. That same server script can reply to your page. Your on page JavaScript can then take that payload of returned data and use it to update your page with the running value, or anything else you care to compute.
Running everything with PHP isn’t always simple when dealing with a ton of straight HTML. Give me a little bit and I can write up a more customized tutorial for you. I just need to know how you are collecting your quiz answers.
thank you for you generous offer, but you’ve already been a terrific help… i appreciate the sounding board, it helps me formulate my thinking.
to answer your question, i’m having the user fill in a score (0, 1, 2) to an input element with a default value of NULL for each of the 26 questions before they hit the [SUBMIT] button and trigger the POST operation. the form will not submit unless all the questions answered by an acceptable INT value, no NULL values allowed (may have to employ a selector here to make it idiot proof)
where things stand now is:
found magic AddType to make my webserver parse .html as .php
currently able to take the output of a form and feed it to a database prepared on the server.
avoided having a separate page served up by simply omitting the form’s action="" statement
all necessary php script to open a database and update a table is on the same .html page as the form.
the script is only run when an IF statement detects the form’s “submit” status.
starting to think i’m on the cusp of a workable solution without using any client side scripts (other than what html5/CSS supports).
it seems i still need to figure out how to query the db for the running letter grade so it can be displayed when the page first loads, and then changed to “your grade” when you hit the submit button… feels like this is just a matter of CSS grid display and using overlapping divs mapped to the same grid area to contain, first the letter grade from the server, then the letter grade from the form when as the db is updated.
I’ve worked out the mechanics of how the page is going to work, you can visit a working model at ranttit.net
i just need to fold this architecture into the existing content of the page and rework the CSS a bit.
let me know what you think.
i wish PG made it a bit easier to work php content in real time so my PG app doesn’t look like complete gibberish when in include the php code. i have to upload to my host domain and view it in a browser to see any changes i make.
perhaps there’s a plugin i’m not aware of or, the WP version has features that support … i’m only using Pro.
Congrats! I wasn’t too sure how to test functionality.
As far as PHP, there isn’t really a way to deal with it in PG other than turning on the server-side code scripts. The best way is to set-up your own desktop server. Not sure what OS you are running. If you don’t want to roll your own there are several “ready-made” solutions. For Mac and Windows there are MAMP or XAMP. For Linux there is AMPPS, or LAMP, but it is usually best to roll your own.
thanks, the mechanics are to input number 0, 1, or 2 into the inputs and hit send.
the php sums the inputs, calculates a score to determine a letter grade that is then folded into the running letter grade stored on the server (seeded with the grade F as displayed in the “running” area).
i toyed with the idea of setting up my own server locally, but i figured at least this way i know i’m using a properly configured server so any breakage is just due to my code… didn’t want to gaslight myself.
so if i had a web server and sql running would that affect how it appears in PG on my desktop? Or, would it still be gibberish so that i have to use a browser to view it anyway?
now i’m tryin to do the math of how much effort that would take vs the inconvenience of having click on “upload” in my FTP window before i hit refresh in my browser…
meh. doesn’t seem worth it right now for just this one page… maybe if i get into doing this for other pages.
so, java. if i did this via your java-ajax thingymabobs, would that incorporate into PG and show dynamic behavior? or would i still have to go to my browser to see it work?
JavaScript, not Java - big difference. You would be able to display and style your page without seeing the jumble of server-side code displayed. However, you need the PHP on the server to have any dynamic updates, which PG won’t show. For the dynamic part to work you would still have to use your remote or local server - not the PG server.
The work flow that seems to be productive for me is to prototype the dynamic part under separate cover to work out all the mechanics of the server side (the model posted earlier).
Then style the target page to display the dynamic elements with realistic placeholders, so as not to clutter up the PG interface too much, but allow me to work out the CSS and classes needed.
That way, integrating the php code in block copy-n-paste should result in a working page that looks how i expect. The full page should go live shortly. I’ll post back here when it’s up if you want to take a look.