How to get user submission to post to page - html

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

Related

How to read from a database, add some of that information to html, and send that html to a user?

I'm designing a website where users can upload comments on pages, and other users should see those comments. I reached the stage where I have the comments stored in a database, and I know the place they're supposed to go in the html, and I need to connect those two things somehow.
I'm using express and Node.js on the server side, and postgres on the db side.
As of when I'm asking this, it seems to me it's very bad practice to have the user access the database. So I think the server needs to access the database based on the user's request, modify the generalized html's showing of comments to now have the information of the specific comments, save that to a file, and send it to the user. To do this I was thinking of creating an "html generator function" on the server-side that takes in specific comment information and puts it in the generalized html, but that seems like it doesn't scale well and I'm concerned that storing the intermediate file would be inefficient.
Is that the correct approach? Can you tell me known ways of doing this that aren't so hacky?
If you suggest using php, isn't there a problem where php connects to a server and disconnects every time we use it? I would prefer if the server connected once when it booted and did all the fetching when needed instead of connecting every time. It seems to me like that would involve far less overhead (correct me if I'm wrong...)
See the comment of Amadan for the full solution. It's called a "template engine"
Edit:
I highly recommend learning React. I learned EJS and it's difficult to scale. React is infinitely easier to program with for just a little more investment. The old web is much less declarative (& EJS is much less too).

Create a simple registration system using only HTML and MySql

Is it possible to create a simple registration system with HTML,CSS and MySql without using PHP?
HTML, and CSS would typically generate client content while MySql is in most cases quite server specific. php is most of the time used as a server-side language.
So what actually is happening when you for example post from a form in your html it will generate a request sent to the server where it is evaluated and a response is likely.
So in HTML you would typically set up your form and tell it an action to take (a script on the server to run), this server-script could typically be written in any language, but let's keep on topic and assume the server script is in php. (example of other popular server-side scripts would be ruby on rails, python, lua to name a few).
How it is typically used then is for php to do the query on the database and all of this is on the server and the client know nothing at all about it. A result is generated and returned to the client if it should do so.
So no, it is not possible to use client-side to access a database on the server, if I interpret the question correctly. Hope it helps to clarify the concepts somewhat.
No you cannot do with only html and sql. You will require php in order to connect to database.
Html will be used to display values coming from database. Css can be used for styling elements on page.

Modify a HTML5 page without a server side page

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.

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.

Editable Form and save changes

I'm hoping this isn't harder than it seems.
I want to create an HTML form with a few text boxes that will allow people to enter in some data and I want these changes to be saved to the form.
For example, if my html page says:
Name: [ ]
...I want someone to be able to click on the [] and enter their name, etc. and click SAVE
and then have the form say:
Name: "Name of Person"
If someone wants to update that, they can click on the person's name and change it and click SAVE and have the HTML form update itself.
How can I do this? I've looked everywhere and people are talking about HTML5 AND PHP. Is it really that complicated to make a simple page like this?
(In case I wasn't clear in my html I'm using the contenteditable="true" option. How can I save those changes?)
I think your question indicates that you don't already know that web pages (including forms) are "stateless", meaning that they do not "automatically" hold or store anything that you do with them. Sorry to disappoint, but as a beginner you will struggle to find "an easy" solution to this.
That is not to say it can't be done - you no doubt see it everywhere - but your level of knowledge misses the fact that you need to actually program the logic to determine how your form will "appear" to store the information and reproduce it on a later visit.
Here's a (really) brief summary:
When your form is used by your user, a couple of things have already taken place before they get to see the form:
the user has requested the page (typing a URL or clicking a link)
the web server has sent the requested page (that is; your website has sent the form)
The next thing that takes place is that your user enters some data on the form. This data is not stored anywhere - if you refresh the page the data is gone, because steps 1 and 2 happen again.
So to avoid this you can use a number of tools:
Javascript: this operates on the user's computer. You can use it to find out if something has been entred on a form, and store it in, for example, a cookie.
Then you will have to build some logic into your page that says, "if my user refreshes the page or comes back to this site at a later date, then look for the cookie. If it exists, then take it's values and pre-fill the form, before the user gets to see it."
Server Side Script: This logic can be built into your web server (using a server side script like PHP) so it actually runs in step 2.
Alternatively you can build it into a javascript function which fires when the page is actually received by your user. This would be a step 3.
A second alternative combines these two ideas (processing on the user side and processing on the webserver side) called AJAX, which basically means that the "discussion" between your javascript and PHP takes place "on the fly" when the data is entered or changed.
And lastly you might want to consider PHP Sessions to store data, and/or a mySQL database. Recently with the advent of modern browsers you now have the possibility to store the information in a local database available to your user's browser...
In all of these cases you will need to learn how these pieces talk to each other, how you retreive the information, and how you update your stateless and static form.
It isn't has straightforward as you might think...
You don't need HTML5. HTML4 is good enough :)
But you need some server side script that saves the changes (on the server side in e.g. a DB or XML file). To make it a better experience (if multiple users use the form at the same time) I suggest you use AJAX to save the changes and poll the server for updates.
This is not complicated (at least I don't think it is), but it seems to be a generation ahead of what you already know. And it could take quite a long time to get the structure in place before you can do this sort of thing without needing help.
There are some basic questions
Does the information need to stay saved when the user hits reload?
Does the information need to stay saved when the user clears cookies?
If the information can be blanked out next time they come back to your page, then it is simple.
Otherwise, we need a way to keep track of which user sees what information, so the guy in Texas does not see the information the guy in Chinatown typed in. Cookies are a common way to do this. You could save the information to the cookies if there is not too much information.
Otherwise, you need sever-side language. This is usually in PHP, but deciding what language has to do with why you want to learn in the first place? Are you wanting to work for a company later on? Do you have your own website?
Please comment to let me know more what is going on, and what the answers are to the two basic questions, and I will better be able to answer.
Usually, for most cases, there is a login name and password (or OpenID), and if cookies are cleared, the user logs in again, but this requires some work to set up a working login before you re-visit this question of how to store what they type.