Javascript, saving user details to a database - javascript

I'm teaching myself some web development on the side, and just for fun I'm trying to build a small e-commerce website for my gf (She might actually use it for a business idea if I don't get side tracked and not finish in time)
So I've managed to build a basic front end with html, css and javascript... The 1st hurdle I've run into is saving basic user details to a database, could someone please guide me in the right direction on what would be the quickest and easiest way to accomplish this.
The only other programming language I have a decent grasp of (certification level) is Java
Thanks in advance

Nowadays, the best way to store user details is probably to NOT store them at all lol. If you can use any third party authentication like Facebook or google, i really think you should give it a try. If you really feel like doing your own login/sign up. It's gonna be in the back-end. Using PHP is easy if you don't have any experience in that kind of stuff.
This is an example of something not too bad
hope it answers your question. If not, let me know and i can give you some more details !

This question can not be answered in a few sentences. But have a look:
Javascript is executed on the client side while PHP for example is executed on the server. You need to send a so called HTTP Request to your PHP server using javascript. This can be done with jQuery via ajax() function or using native JS like:
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
console.log(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
http://www.w3schools.com/json/json_http.asp
but i strongly recommend u to use jQuery:
http://api.jquery.com/jquery.ajax/
What happens during such a http request? The Client (your PC) sends data via an URL to the webserver and u receive it in the response. (have a look at the response in your development tool)
greetings

Related

Pass string securely to JS

How do I receive a string in JS (maybe through an alert) without the user being able to see it beforehand (e.g. in the source code)?
You probably know this from Geocaching Checkers, how do they secure the real Coordinates from being seen in the source code or wherever?
I have a web server and some basic JS and HTML understanding, I read about PHP and AJAX but I didn't found the solution to my problem yet.
My objective is to reveal a information only if the user completed a condition on my website, and its vital that it's not seen before.
I tried using a separate PHP file:
<?php
$koords = "N 53° 13.869 E 10° 22.716";
?>
but how do i reciev this variable in JS and can the php file be seen by the user?
In your browser (JS) it will always be available to be seen by someone with JS knowledge.
The only thing you can do is set up a server which evaluates if your user has fulfilled the condition for completing the challenge. Once the server recognizes the challenge as completed it would send back your secret to the client, so that it can be displayed to the user there. How you set up that server and with what language or framework /tools (for example PHP) depends on your background and the environment you will host your website in.
Adding a bit of detail: You will want to make a Http request in your JS somehow sending user input to the server (for example PHP). If it is simple content you could add it in the url itself with &parameter=foo, otherwise you would likely send a post request and send your data as JSON body. You would then need to evaluate the parameter in your PHP and if it meets the challenge's requirement you would answer to the client in your response with your secret or if not with a message like try again.
Ok, here is what I did, to help anyone who sees this.
The method is easy to "hack" so don't use this to hide actual sensible data, its more an obstruction to easily see in the sourcecode whats going on.
I created a PHP looking like this
<?php
$secret = "data";
$givesecret = $_GET['givesecret'];
if ($givesecret>0) {
echo $secret;
}
?>
Then, when I want the secret Information I let my JS call the PHP via XHR
var rndvar = 0;
//something is done in a loop
rndvar++;
//now something is completed and i want to reveal the secret
var xhr = new XMLHttpRequest();
xhr.open("GET", "containssecret.php?givesecret="+rndvar);
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
xhr.send();
Pretty basic, and the obvious flaw is, of course, I could call https://www.mywebsite.org/containssecret.php?givesecret=5 and it will give the secret right away, so the goal would be to name everything less obvious and don't make it clear what the criteria in the PHP is (here it is int greater then zero).
But it will always be possible to find that out if you know some coding, this is just an easy way to obfuscate and it's only relatively secure from the ordinary users. For my purpose this is well enough :-D

what's needed in asp file for xmlhttp request to save data to a database

I need to use JavaScript to send data to be stored in a database. Having looked around on-line I think the best way was to use a xmlhttp request to send data to an asp file.
Below is the script I've got to send to 'Receiver.asp'.
Searching the web hasn't helped me uncover the code I need in Receiver.asp.
function postToASP(name, time) {
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var UrlToSend = "Receiver.asp?" +"n=" + name + "t=" + time ;
xmlhttp.open("GET", UrlToSend, false);
xmlhttp.send();
}
Thanks for any help.
Some additional info if needed:
the majority of my code is written in processing
the above js script and the .asp file will be stored in same folder as sketch
eventually i intend to run on a xampp server
First of all, I'm assuming that that's supposed to be client side JavaScript and that it works.
You say you want to use XAMPP. Forget it. Classic ASP is proprietary Microsoft technology which will only run on IIS.
What Receiver.asp has to do is quite simple. First it has to use the request object to retrieve the data it has been sent. (I'm using VBScript as my scripting language because it's what I'm used to, you can use Javascript if you prefer
dim time, name
time = Request.Querystring("t")
name = Request.Querystring("n")
If you were using the post method then you would use Request.Form() Alternatively Request() works for both get and post methods.
Then it's a standard database insert. It doesn't matter if the data is sent in a querystring, in an html form or by an ajax call, the server side code is pretty much the same. Here's a simple tutorial, you should find plenty more if you google
http://www.codefixer.com/tutorials/form_to_database.asp
You haven't said what sort of database you want to write to. You'll need the relevant connection string. Here's a very useful resource with an easy to remember url.
http://www.connectionstrings.com/

AJAX call from HTML to ASPX?

if(window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'foo.php?bar=' + baz, true);
request.send()
I know that this can be done with PHP, but I'd like to know if/how it can be done with aspx (i.e. request.open('GET', 'foo.aspx?bar=' + baz, true);). In the example above, the AJAX call is being made in javascript from a plain old HTML page (not PHP), but it can interact with PHP.
Can the same thing be done with aspx? If so, do I need to target the code behind file or not? Say that the aspx is only there to respond to requests like this, is there something to put in the aspx file that automatically passes the GET to the vb/cs file?
Any help would be appreciated. I'm just more accustomed to working with PHP, but my current job is primarily a VB shop, so PHP comparisons are welcomed. Thanks.
Aspx was not meant to work this way.
You will need to catch the ajax call on the Load event of the page, and then Response.Write whatever you want to return as a string. Then you have to set the Response.ContentType and then you need to end it with Response.End.
It is complicated and a bit of a hack.
Your best option is to start learning asp net mvc which will most likely work similarly to any php mvc framework.
Ajax just means "Making an HTTP request from JavaScript without leaving the page".
There is nothing special about the HTTP request.
The server can generate the response in any way you like. Static files, Perl, JavaScript (via Node), PHP, ASP.NET, any way you like.

Implement HTTP post in Javascript

Hello
I am doing an analytical project for delay tolerance for various applications. So I need to build a portable application to take user feedback. I am trying to do this using Javascript. Whenever, the user clicks a button on the JS page I have to send a request to the HTTP server setup on the router to change the delay. I want to implement this as a HTTP request (POST). I know Javascript. I found ways like Jquery, Protocol but I intend to send only one parameter(need not be hidden) Can some one help me with this?
Your asking how to send a ajax post w/ a url param?
xhr=new XMLHttpRequest();
xhr.open("POST", "http://helloasdf.cloudfoundry.com/post.token?key=asdf", true);
xhr.send(null);

POST without redirecting page

Hi
I am writing an application where I want to post data after clicking send button, it will post data to some web-action and gets processed, after processing it will be redirected to some other jsp page but I want to be in the same page from where I click send button. I am not sure of XMLHttpRequest method.
Any ideas to get this done highly appreciated.
If you wanna do using Java script and Ajax (As you have in your question tags) then Try following:
function fun() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "Serv?req_id=1";
xmlhttp.open("POST", url, false);
xmlhttp.send(null);
var respo= xmlhttp.responseText;
document.getElementById("some_id").innerHTML = xmlhttp.responseText;
}
Call fun() on onclick event of send button.
Hope this helps.
You can use jQuery.ajax() - it's a convenient wrapper for XMLHttpRequest.
You can use jQuery. It will save some time. It is cross browser compatible (i.e. hides the cross browser compatibility techniques from you).
http://api.jquery.com/jQuery.post/
http://jquery.com/
You can issue a 302 request back to the page you came from as the response from the POST request. If you don't want to POST at all I can show you how to do this through AJAX.
The reason you want to use the GET->POST->GET is so that if the user hits the back button it doesn't re-post on you.
Here's a great beginner's tutorial on what you're looking to do (with jQuery):
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
A 302 request back approach seems to be good for this, If you were using ajax or XMLHttpRequest object, it wouldn't be that problem, but here you can set redirection header to redirect back on the same script that process your query-string.
However you cannot do post without a redirection.
Passing values from one jsp page to another jsp page
I know this is a bit late but for the sake of sharing knowledge, I found a good article here: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
On it, is a very thorough example of how to do what you are asking for.
This is done, as mentioned above, with AJAX/jQuery, this tutorial makes use of that.

Categories