How to modify and save html/css in server-side?


Tags: html,css

Problem :

I'm new in this subject so this might be a silly question for most of you. I have a simple server which several users will access. If any of them change a CSS property of an element, the others should be able to see the change in real time.

Should I use something like node.js to perform this? How do I save the changes the users do?

The page would look something like this: http://stom89.dyndns.org/

Thanks!



Solution :

I guess what you want to change in your CSS / html , are states. Like if a lamp is on/off? Then you need to save each state in a mySQL DB and just grab the data for each user. If you want it to look like realtime for online users, then use js(ajax) to sync data regularly.

Alternative way without a DB would be with files.

If you don't wanna use mysql for this, you can use files. I suggest using ini files. For more on how to read/write ini files, you can visit this question. It's super simple and you'll be able to have each variable in a nifty array.

What you need: A bit of PHP, a little bit of jQuery (or js), understanding of GET variables

I suggest you create 3 files.

index.php :
Your main page which is the client. Pulls info using get variables. You can use jQuery.get() for this.

getstate.php :
This is the file which will read the ini file and give you back the states for each device. Read them with jQuery.get() from index.php .

savestate.php:
This is the file which you'll send the new states to from index.php Example request: http://address.goes.here/savestate.php?bedroomlight=1&garagelight=0

Whats even more interesting is that ini files can be written/read easily by many programming languages so you can manipulate the data using your Raspberry Pi easily. (say someone turns of a light, a script polling state could change the ini file)


    CSS Howto..

    How to get rid of hidden space HTML/CSS [closed]

    site only shows half screen on mobile? Rest of screen is just body background?

    Boostrap: How to “stick” a button over an image when re-sizing

    CSS: How to make input fill rest of line, with a button on the right?

    How to hide elements in navbar until hover in css?

    How to have 2+ boxes slide down

    CSS How to put an image between buttons?

    How to remove whitespace that appears after relative positioning an element with CSS

    How to add different CSS3 hover transitions on hover out with CSS

    How to create new div immediately next to image like on Facebook's news feed on right side of page?

    How to add a space between paragraphs when using css reset? [closed]

    Javascript slide showing the last image 5 times

    CSS Sprites - How to align and make responsive?

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    How do I conclude the right directory path when including in CSS/JS/HTML?

    How to align div first left then top in div parent?

    How to get rid of white space between css horizontal list items? [duplicate]

    How to make balloon textbook talking style using css

    How to make css search form responsive

    CSS Transitions using AngularJS ng-show

    how can assign left of div to left of screen when margin set to auto?

    How to get the complete css information if css class is given form the used style sheets files

    CSS - How to make if “Firefox, Safari, Opera and IE”?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    how can i position text to either side of an image in html5

    How to align social like buttons next to copyright text inside footer?

    How to center my text vertically in a circular div with css

    how to position two divs next to each other, one of them is centered in the container of both divs

    How to put a diagonal line over a textbox in CSS?

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected