I not sure it's a correct way or not, I build this CRUD alike thing with jquery, which jquery is mostly for front end effects.
for example I appended
something and want to save it, how?
If possible I want to save these manipulated elements by users into database, so that every single of user has their own 'profile' (I will make a register and login later)
just have no idea how to save these manipulated elements.. is it I must do it with PHP? even so how I run PHP between these js?
is it I must do it with PHP?
You must do it with something that has access to your MySQL server, yes. So since you mention PHP, if that's what you're using on your server, yes, you'd do it with that.
even so how I run PHP between these js?
Remember where things are happening: The JavaScript is running on the user's machine, and your database is on your server. So to get the information from the client into the database, you must send it from the client to the server.
There are several ways to do that. The two most common ones are submitting a form
(good old-fashioned stuff), and using AJAX, which allows you to send a request to your server without refreshing the page being shown to the user.
jQuery provides a lot of useful tools for doing ajax, which are discussed in the documentation and are the subject of about a million examples. :-) The bits to look at are the $.ajax
function (and its wrappers $.get
, $.post
, and such).
Here's a very simple example: Say we have a variable, addr
, which contains an email address (or whatever) we want to send to the server:
$.ajax({
// The path to the page that will save the data
url: "/path/to/a/server/page/to/handle/it.php",
// Since we're saving data, POST is the appropriate HTTP verb (n GET)
type: "POST",
// The data. PHP code in the page above will see the email address
// as $_POST['email']
data: {email: addr},
// jQuery will call this function if the ajax call succeeded
success: function() {
// ...
},
// jQuery will call this function if the ajax call fails
error: function() {
// ...
}
});
Note that the A in AJAX stands for asynchronous. The call to $.ajax
above will start the post to the server, but then your JavaScript code continues without waiting for the result. That's why we have the callback functions there.
This won't affect you if you're just doing this all within your own app, but just for completeness: Also note that you can only use AJAX within the same origin. So you can't use AJAX to post data from a page on http://example.com
to a page on http://someotherdomain.com
. (Unless you use CORS and the receiving server allows it.)
Javascript and therefor jQuery is executed on the user's machine and used commonly as a client side language and not a server one.
You will need to make use of a server side language such as php
to save those values in the database.
You could achieve it making use of the AJAX technique and more concretely making use of $.post
function ideally. (or $.ajax
if you prefer)