Hi all

I am new to this forum and have a multi-part question I would like to pose to the community.

Much the easiest way to start is to give you the spec for the website;

 

My family are all on a health kick and trying to lose weight.

I want to create a simple website that will exist only on our home network (on a media server I have built) that will catalogue their weightloss.

The website will have an entry form where you can enter your name and and current weight.

These values will then be written to a database and displayed as a graph on the website +/- the raw values on a table.

I may include other measurements (waistline etc)

 

 

I have a basic understanding of HTML and CSS but not js, php or anything else.

I will be building the site on my desktop which is running Linux Mint 17 and I only use free/open source software

The site will be hosted on my Ubuntu 14.04 media server and will be LAN only.

The interaction will occur on a number of devices (android phones, iphones, tablets, windows machines, linux machines --> varied ecosystem!)

The commonest browsers used in my house are Chrome on mobile devices and Firefox on Linux machines.

Security issues should be put into the context that this website will be hosted on a private LAN.

 

So my first question is; What is the best overall design? What components do I need to accomplish this?

(I don't need code right away just an overall idea of the layout. I will go and research any suggestions before asking for code!)

 

Many thanks for reading

If it's just for personal use with your family, would it not just be easier to log this using Google Docs and use the graph function on the spreadsheet? Or is this also some kind of learning exercise for yourself?

 

For a web based version you can roll with php and a mysql db for the backend. you'll need some javascript to generate the graph, the vlaues can be output from the database into the html document using data-attributes. Using Json would be nicer but more challenging if you are new to all this.

Yes it is a learning exercise for myself. I do a lot of theming for Gnome shell/GTK etc but that is largely manipulating pre-existing config files and I wanted to build a website to teach myself from the ground up. I also have to contend with varied abilities of family members who might get lost in googles ecosystem!

 

I will look into what you have suggested. The only thing you didn't mention is how to write data to the database? I would like my family to be able to input the data to a form and have the form write it to the db. Would this be done using javascript?

 

Thanks for the input!

@@NOCK - Great thanks. I will begin with building the database and interaction with it, any suggestions on tutorials for php?

 

I have a few more questions on javascript displaying the data but think I have enough to be getting on with!

you can use a combination of php and MySql to query the db, just build a form for them to fill in the progress, the action attribute of the form should point to a php script to post the values input to the database. You would also use php & MySql to pull the data from the db.

 

As for javascript you want to store the data pulled from the db into some data-attributes. You can then access them with JavaScript If you use jQuery this will be made easier. You can pull all these attributes and store them in an object or an array.

This data can then be used to create a graph, a bar graph being the most basic, you can just manipulate the height of the bars using the values in the object as a coefficient.

 

 

A much more modern method of doing this whole process would be to use Node with MongoDB as everything is javascript and the db uses a data structure that closely resembles JSON

Edited October 16, 201411 yr by rbrtsmith

@@rbrtsmith - Thanks for the up to date info!

 

I will probably build it with php/mysql as I imagine getting help with those will be easier than a MongoDB.

Any suggestions for web resources for php would be greatly received!

It's been a long time since I built a mySql DB as I live predominantly in the frontend so I'll leave it to the others to find a good tutorial, but you could try looking around the MDN https://developer.mozilla.org/en-US/. Stay away from w3Schools.

Edited October 16, 201411 yr by rbrtsmith

Ha ha I have been using W3 Schools quite a bit. Out of interest why do you advise against using it?

I will give Mozilla Developer a look!

Just google and read w3fools it will explain all.

Here is a good basic guide to prepared statements with SQL / PHP ... and actually I find php.net good instead of 'tutorials'. For actual SQL DB control I prefer phpMyAdmin as it makes dbs a bit like excel / access.

Edited October 16, 201411 yr by BrowserBugs

I suppose if you are going to retrieve the weights from DB you could simply build a bar chart using some divs and CSS. Write the CSS values by echoing out the DB values.

 

If you're not worried about sticking the CSS inline then that would be easiest. Otherwise go the whole hog and use a dynamic PHP stylesheet.

I suppose if you are going to retrieve the weights from DB you could simply build a bar chart using some divs and CSS. Write the CSS values by echoing out the DB values.

 

If you're not worried about sticking the CSS inline then that would be easiest. Otherwise go the whole hog and use a dynamic PHP stylesheet.

 

Doing the inline css thing would actually be easier than my suggested JavaScript, it's not best practice but then again this is a private website and I don't think it will be a big issue. The jhavascript would just allow you to do more dynamic things with the data and be a good option if you're looking to learn more in this area.