help required for beginner

[jeremymwilson]

Hi all, I am creating a simple website to keep track of my daily workouts. It has 4 boxes for me to enter the number of different activities I perform. The amounts entered should automatically be added to the list of daily totals underneath the boxes. Next to each daily total is a yearly total which keeps a running total of all daily workouts.

 

Right now I've just created the html and I'm guessing I need to use javascript for the arithmetic but I really don't know where to start.

 

Any pointers?

 

[SmeldorTheEmperor]

Do you know a bit of python or other high level languages? Js is pretty easy for these implementations. You can use w3schools to get a quick know how how to write js. Lots of examples little explaining. So if you need more info look on tutorialspoint.

[Chris Pratt]

It's depends on how you want to handle it. HTML is just a structural language. Submitting the data needs to be handled by something else. That could be frontend JavaScript or a backend coded in something like PHP, Python, C#, etc. or even JavaScript via Node.js.

 

If you use a backend, the calculations can be done there and sent back, either through a page reload or via AJAX. If you just use JavaScript on the front end, then you'd do the calculations there.

 

If you have a backend and don't mind a page reload, you can just set the action on the form to the backend endpoint for that. Otherwise, you'd need to add an event listener for the submit button click (and cancel event propogation to keep the default behavior of the submit button from happening).

 

In any case, you're also going to need some form of persistence. You can use localStorage in the browser, but that will only be available in this particular browser on this particular device, and the data could go away if you clear the browser data accidentally or something. You'll likely want a database, but that's a whole other discussion. You have SQL and NoSQL options, schema or schemaless driven, local or remote, and various options for everything in between.

[SmeldorTheEmperor]

25 minutes ago, Chris Pratt said:

It's depends on how you want to handle it. HTML is just a structural language. Submitting the data needs to be handled by something else. That could be frontend JavaScript or a backend coded in something like PHP, Python, C#, etc. or even JavaScript via Node.js.

 

If you use a backend, the calculations can be done there and sent back, either through a page reload or via AJAX. If you just use JavaScript on the front end, then you'd do the calculations there.

 

If you have a backend and don't mind a page reload, you can just set the action on the form to the backend endpoint for that. Otherwise, you'd need to add an event listener for the submit button click (and cancel event propogation to keep the default behavior of the submit button from happening).

 

In any case, you're also going to need some form of persistence. You can use localStorage in the browser, but that will only be available in this particular browser on this particular device, and the data could go away if you clear the browser data accidentally or something. You'll likely want a database, but that's a whole other discussion. You have SQL and NoSQL options, schema or schemaless driven, local or remote, and various options for everything in between.

This ^,

 

If you are new to programming it's better to start with localstorage or a public files that saves all the data people submitted. Its not ideal but you can get confortable with frontend js without having to make a complex backend.

[jeremymwilson]

46 minutes ago, Chris Pratt said:

It's depends on how you want to handle it. HTML is just a structural language. Submitting the data needs to be handled by something else. That could be frontend JavaScript or a backend coded in something like PHP, Python, C#, etc. or even JavaScript via Node.js.

 

If you use a backend, the calculations can be done there and sent back, either through a page reload or via AJAX. If you just use JavaScript on the front end, then you'd do the calculations there.

 

If you have a backend and don't mind a page reload, you can just set the action on the form to the backend endpoint for that. Otherwise, you'd need to add an event listener for the submit button click (and cancel event propogation to keep the default behavior of the submit button from happening).

 

In any case, you're also going to need some form of persistence. You can use localStorage in the browser, but that will only be available in this particular browser on this particular device, and the data could go away if you clear the browser data accidentally or something. You'll likely want a database, but that's a whole other discussion. You have SQL and NoSQL options, schema or schemaless driven, local or remote, and various options for everything in between.

Thanks for the info. I have a NAS so could use that to deal with the persistence issue. I have phpmyadmin installed on it and have already used sql to import and update a database for another simple project. My problem, not being a programmer, is understanding the methodology and code for the communication between the front end and backend. I've been going through W3Schools, it's very helpful but I easily get lost.

 

So if using php on the NAS and html/js on the front end is the best solution for me, I'll work on that. I've heard of node.js but I don't know whether that would be relevant in my scenario.

[SupaKomputa]

If you have some knowledge of php - mysql, you dont need javascript to do this at all.

I would suggest you search in youtube on "simple php CRUD tutorial".

CRUD is an acronym for: CREATE. READ. UPDATE. DELETE

 

[jeremymwilson]

6 minutes ago, SupaKomputa said:

If you have some knowledge of php - mysql, you dont need javascript to do this at all.

I would suggest you search in youtube on "simple php CRUD tutorial".

CRUD is an acronym for: CREATE. READ. UPDATE. DELETE

 

thanks, will do

[Eigenvektor]

5 hours ago, jeremymwilson said:

So if using php on the NAS and html/js on the front end is the best solution for me, I'll work on that. I've heard of node.js but I don't know whether that would be relevant in my scenario.

NAS is somewhat meaningless in this context. What you need is a web server like Apache (which can be installed on a NAS server, but it doesn't have to be one).

 

The web server can be used to serve your webpage over HTTP(S) and e.g. run the PHP code. The PHP code running on the server is the one to communicate with the database (which can either also run on the NAS or a different machine).

 

If you also want code in the web page (or "web app") itself, you'd normally do this with JavaScript (or TypeScript). Web apps typically use a REST API (over HTTP) to communicate with their backend (e.g. exchanging JSON). The web app should not have direct access to the database, for security reasons. It talks to the server code (e.g. PHP), which then talks to the database.

 

Instead of using PHP you could also write a stand-alone server app (using Python, Java, C#, JS+node, …). In this scenario the web server only serves as a reverse proxy, accepting the HTTP(S) connection, then forwarding requests to the server app, and returning responses to the front end. The server would again be the one to talk to the database and the web app again talks to the server over e.g. REST.

 

This approach has the advantage of not limiting you to PHP, so you can use whichever language you like best. You are also less dependent on which web server to use (e.g. no longer must support PHP), so you could go with Apache, nginx, IIS, …

[jeremymwilson]

21 hours ago, Eigenvektor said:

NAS is somewhat meaningless in this context. What you need is a web server like Apache (which can be installed on a NAS server, but it doesn't have to be one).

 

The web server can be used to serve your webpage over HTTP(S) and e.g. run the PHP code. The PHP code running on the server is the one to communicate with the database (which can either also run on the NAS or a different machine).

 

If you also want code in the web page (or "web app") itself, you'd normally do this with JavaScript (or TypeScript). Web apps typically use a REST API (over HTTP) to communicate with their backend (e.g. exchanging JSON). The web app should not have direct access to the database, for security reasons. It talks to the server code (e.g. PHP), which then talks to the database.

 

Instead of using PHP you could also write a stand-alone server app (using Python, Java, C#, JS+node, …). In this scenario the web server only serves as a reverse proxy, accepting the HTTP(S) connection, then forwarding requests to the server app, and returning responses to the front end. The server would again be the one to talk to the database and the web app again talks to the server over e.g. REST.

 

This approach has the advantage of not limiting you to PHP, so you can use whichever language you like best. You are also less dependent on which web server to use (e.g. no longer must support PHP), so you could go with Apache, nginx, IIS, …

thanks for the info, appreciate it

[mariushm]

You could just make an excel spreadsheet  with several columns,  date , pushups, chinups etc  and you can put a filter on a date range and add up the amounts with a SUM function (in the toolbar).

 

Or you could just download a SQLite Database editor and make a database with a single table that has the columns you want. For example SQL Studio : https://sqlitestudio.pl/

Then use php or whatever to query the database and retrieve the information  and show it on screen, you can have a basic form to add/edit/delete a particular record, it's basic stuff.