Modify a HTML5 page without a server side page - html

I have a editable html5 page and I store new elements in localStorage.
I want to synchronize my page with the server.
I want to know if I can do it without a server side script or if there is some tips to do something like this in a good way.
Thank you :)

You can pull information from the server quite easily using jQuery and then just put it on Local Storage but, if you want to upload local information to the server there is no way around, you have to use some kind of script, tough it's not that difficult, there are many languages (PHP, C#, Python...) and tools you can use.
Keep in mind that when you upload information to the server you have to sanitize it very important security measure.
Basically, the way to go is:
Post the information to the server (using AJAX or a HTML form, either way will do)
Use some server-side script to capture the variables posted.
Sanitize your data (check format, discard non-valid characters, etc)
Store it on database (Do not, ever, concatenate your data with a SQL query ok? that can make you vulnerable to a SQL injection attack), compute something or do stuff.
Return some status to the client (some confirmation maybe?)
You may want to take that confirmation and show a message to the user ("Your info was saved properly" or something like that)

is a javascript timer not sufficient for this manner? or jQuery?
The question really should be more of a problem than a question. If you're updating based on a server's variables then you could use AJAX i believe but if its like increment said variable every X seconds I would focus on using a javascript timer.

Related

Protect client side database like TaffyDB

I have to develop an application for smartphones using HTML/CSS/JS (for PhoneGap) and I have to store data somewhere.
After some research, I found TaffyDB (http://www.taffydb.com/) that exactly does the job except on one point : security.
I don't want someone to take all my data just by saving the JS file so is there a solution to protect it ?
Or if I want to keep my data private, do I have to use an usual database (like MySQL) coupled with a PHP script that I call via Ajax ?
Thanks for the help.
TaffyDB can be used on Server-Side with a number of server-side solutions, but you will have to control the output on your application to include just the data.
In general, unless you plan to use a javascript server-side solution, I would say you cannot make it "secure", and even if you use non sensitive data on your front-end, I would highly recommend you go through the OSWAP guide before writing any code to determine if it is secure or not.

Preemptively getting pages with HTML5 offline manifest or just their data

Background
I have a (glorified) CRUD application that I'd like to enable HTML5 offline support with. The cache-manifest system looks simple yet powerful, but I'm curious about how I can allow users to access data while offline.
For example, suppose I have these pages for the entity "Case" (i.e. this is CRM case-management software):
http://myapplication.com/Case
http://myapplication.com/Case/{id}
http://myapplication.com/Case/Create
The first URI contains a paged listing of all cases, using the querystring parameters pageIndex and pageSize, e.g. /Case?pageIndex=2&pageSize=20.
The second URI is the template for editing individual cases, e.g. /Case/1 or /Case/56.
Finally, /Case/Create is the form used to create cases.
The Problem
I would like all three to be available offline.
/Case
The simple way would be to add /Case to the cache-manifest, however that would break paging (as the links wouldn't work).
I think I could instead add something like /Case/AllData which is an XML resource, which is cached and if offline then a script on /Case would use this XML data to populate the list and provide for pagination.
If I go for the latter, how can I have this XML data stored in the in-browser SQL database instead of as a cached resource? I think using the SQL database would be more resilient.
/Case/{id}
This is more complicated. There is the simple solution of manually adding /Case/1, /Case/2, /Case/3 etc... to /Case/1234, but there can be hundreds or even thousands of cases so this isn't very practical.
I think the system should provide access to the 30 most recent cases, for example. As above, how can I store this data in the database?
Also, how would this work? If I don't explicitly add /Case/34 to the manifest and the user clicks on to /Case/34 how can I get the browser to load a page that my JavaScript will populate based on the browser's SQL database data and not display the offline message?
/Case/Create
This one is more simple - as it's just an empty page and on the <form>'s submit action my script would detect if it's offline, and if it is offline then it would add it to the browser's SQL database. Does this sound okay?
Thanks!
I think you need to be looking at a LocalStorage database (though it does have some downsides), but there are other alternatives such as WebSQL and IndexedDB.
Also I don't think you should be using numeric Id's if you are allowing people to create as you will get Primary Key conflicts, it is probably best to use something like a GUID.
Another thing you need is the ability to push those new cases onto the server. there could be multiple...
Can they be edited? If they can I think you really need to be thinking about synchronization and conflict resolution hard very hard if that is the case.
Shameless self promotion, I have a project that is designed to handle these very issues, though it's not done, it's close. You can see it (with an ugly but very functional) demo at https://github.com/forbesmyester/SyncIt

On html how to you increase var by one and save it

I have taken Web Design, but I never learned how to take a variable on a website and each time someone clicks on it to increase by one and save it so the next user will see var+1.
For example how facebook liking works
This is not a simple task done by HTML only.
You'll need a database to store the number of likes. Other technologies like PHP and Ajax should also be used. This post gives you a little explanation on how to implement such a system.
You need a database in the server, and use JavaScript to  POST an Ajax query to server, and on page request you'd need a server side scripting language (e.g. PHP) to query the database for the value of the variable and generate a HTML page with that value. It's not possible to do it with pure HTML.

How to get user submission to post to page

Hey guys... I'm working on creating one of my first websites and currently have it only in HTML/CSS which is great for displaying some basic material on my site. However, I'd like to add in the option to submit something basic like a quote to the page. I'd like to start with just a simple form to submit a name and a quote and have it appear in the quotes section. I've looked up basic HTML forms and such but I'm not sure how to go between a basic HTML form and having that material appear on the page. Could anyone help me step through this or perhaps point me to a guide to accomplish this?
Thanks.
You need a script which receives the posted information and some place to store the quotes. The script can be written in ASP.NET, PHP, python or whatever else your webserver supports and you want to learn. The database can be as simple as a directory with textfiles or a full-blown SQL database like postgresql or mssql.
When processing user-input you have to take care about security issues. The most common ones are:
Cross-site scripting: When you present user-input to the user, it must not be interpreted as HTML and/or Javascript, to prevent malicious users from sending information from your trust-domain to them.
SQL Injection: Always use the underlying database's parameter support to properly quote incoming data, to prevent malicious users from sending arbitrary commands to your database. See also this example.
as a java developer the way I would do this is:
get the information from the html
using JQuery
than I would just a post to send to
the servlet
process what i need in servlet
send back to JQuery the answer
change my html with JQuery
Although I am sure there are much easier ways to do it with just PHP
if you want to do this way, first thing i would master is making sure you can send things to the servlet and get an answer back.
look at this and see if you can get something to get sent back
http://www.roseindia.net/servlets/HelloWorld.shtml
It might be a good idea to also look at JSPs
http://java.sun.com/products/jsp/html/jspbasics.fm1.html

easy way to create a username / password login

I have built a website using html and css (in Dreamveaver CS4) on which I would like to create a section that is only accessible to registered users - users would have to submit their email address and create a password to access the area. I am prepared to take the time to learn with tutorials etc, but I'm a beginner with limited ability of html etc, so I would really appreciate some advice on what would be the easiest way of doing something like this - Drupal? JQuery? I have tried searching online for tutorials but I am getting hundreds of different answers using different solutions and would really appreciate your opinions on how to do this in the easiest possible way.
Many thanks in advance :)
Just pick a tutorial for a scripting language that your web hosting supports. PHP is pretty common: http://phpeasystep.com/phptu/6.html
I would suggest using server side scripting for your login.
For this you would need
A place to store user data
A script that can validate the user
data.
Use whatever scripting language your host supports for this.
You can either use a flat file (text file) to store user data by encrypting it in it or you can use a database (best)
You can write a small script that is called when the user logs in and sets the cookie in the browser
In the pages that only logged in users can view, you can add a small piece of code to verify from the cookie, if it validates, display the data or display something like Authorized users only.
This is a very basic functionality but if that is all you want, this should do it.
Well, you'd need a database on the server to store the username/password combinations. That means you'd need some server side language to interact with the database to check for valid username/password combinations, as well as using the server side language to know -when- to check for username/pw (e.g. which page(s) are password protected).
If you're on a Windows server, MS Access is generally considered to be a good starting point for database, but I'd recommend mySQL or SQL Server for the long run.
For language, there's a ton to choose from. ASP, PHP, ColdFusion, etc. I'm a ColdFusion person, so take this with the bias that implies , but I think CF is the easiest for a beginner to learn.