how to commuincate between php and JS?

Question

I am new to web development and I am trying to build my first website.

I am having some troubles because web development is dependant on several programming languages like PHP and JS, and the most difficult part for me is to communicate between these languages.

For example, I am trying to create a function that compresses a folder and generate a download link to that new archive, this can be easily done by PHP. However, when the user clicks the zip button, I also wish to display a pop-up window that tells the user to wait while the folder is being compressed, and when the compression is done I want to change the text on that pop-up and display the download link, and this, of course, requires JS.

I've tried many solutions but none of them seemed perfect for me, and I feel like that these solutions are quick and dirty, which I don't want.

If there is a secret I do not know, please tell me about so I can finally work with these languages as if they are a single language.

Also, if you can help me with my current problem, I would be extra grateful. I just want to know how to construct a form that can call the JS function that displays the pop-up, then calls the PHP Zip_Folder function, and once the PHP function is done, I want to display the download link on the pop-up window.

This is my form code: (It only calls the javascript function that displays the pop-up)

<input type = 'button' onclick = 'Show_PopUP(\"Folder_to_zip\")' value = 'Download Folder'>

And this is the Show_PopUP function code:

            function Show_PopUP(folder) {
           var e = document.getElementById('Folder_Download_PopUp');
           if(e.style.display == 'block')
              e.style.display = 'none';
           else {
              e.style.display = 'block';}}
        

I already have the PHP function that compresses and generate a download link for the archive, so what I need now is a way to call it after the pop-up is displayed, and a way to print the download link on the pop-up once the function is done.

This might not be the best approach since I am a beginner, so if you have suggestions on how to get my task done without this complexity, I would be very happy.

Sorry if my question is too long, and thanks in advance for your help.

Answer 1

What you need to do is use these things called XHRs, or XMLHttpRequest (Google it), from within JavaScript to php, which basically is kind of like an invisible browser going to the php page behind the scenes and "loading" whatever the php page gives back, only this is all happening within JavaScript itself, so you can read that this "invisible page" loaded, which is from php, and do stuff with that, without actually refreshing the page. This process is known as AJAX (look it up)

What you can do is, when you set up this "invisible page", you can also send certain kinds of information along with it that the php page can read, and when it's done the php page can echo something back to the invisible page, which can then be read with JavaScript. This easy you can communicate between php and JavaScript, by sending certain values, in JavaScript, along with this invisible page, and waiting for php to echo something back to it, then reading that with JavaScript

So how do we actually do this?

First on the JavaScript side, we need to make this "invisible page", which is really not technically a page, it just does the sane thing as what is done to display any other web page, which is technically called a "request" since it's like asking the server for some data, it's basically "requesting" it, then when the server echoes something back, that's called he "response" to what was requested

So to make this new request in JavaScript we can do the following

var asking= new XMLHttpRequest ()

now that it as if an invisible page was created, but not yet navigated to anything, but we have to now metaphorically "enter in the URL" to this invisible page (without actually "navigating" to it yet) to do that we do

asking.open("GET", "pathToPHPpage.php?hi=there")

So the first part is called "GET" because we want to simply get a response back, without actually sending anything (if we were sending a file though, we would instead use "POST" then put the file date in the next step), then we enter in the URL to the php page that you want to get. If it's the same as the JavaScript page just put location.href instead, but it's important to add at least something to the end of the URL, notice the "?hi=there", you can call it anything, but it's important to have a question mark immediately following the .php page, then the name of something (in this case"hi") followed by it's value (in this case "there"), because the php page is able to read that, and give a different response back depending on what it says

Ok so now we have to actually "send" that request to the server, which is like metaphorically "navigating" to the URL on the invisible page, to do that

asking.send()

(And if you put "POST" before, you can add the date you want to send in between the parenthesis, usually in the form of a string but it can be different depending on the data, look it up for more reference)

Now, before we continue in the JS side, let's quickly switch over to PHP (doesn't have to be in this order though) to see what happened We need to listen for any "requests" on the php page, that contain the name "hi" (since that's what we at the end of the URL before), to do that, around the top of PHP (technically anywhere in php though) we do

$isHi = $_GET["hi"];
if(isset ($isHi)) {
//Do some php code
    echo "hi back!".$isHi;
}

Basically we just looked for the *hi" name in our "GET" request that was sent to PHP, we checked if it is "set", meaning not nulll, then we echoed some message back to JS, now let's listen for that message on the JavaScript side

Back to JS, after the .send line (or before), we need to listen for when the page echoes back.

To do that we check if it successfully loaded, because sometimes there can be errors, so let's do

asking.onreadstatechange= function () {
    if(asking.readyState == 4 && asking.status==200) {
        alert(asking.responseText)
    } else alert("ooh something happened")
}

Now we have access to the response the php code gave us

You can extend this to other forms of communication, let me know if you have any questions