CODEWITHSUNDEEP
javascriptphp
tclarkMEOW
tclarkMEOW

Reputation: 141

Using HTML, PHP, and Javascript together

I am new to this trying to understand how to make these 3 spinning plates work together. Until this point I've been using only html and javascript beautifully, but now I believe I will have to use php.

My .html page has a form with text inputs and an image upload. The goal is, when submitted for the image to be uploaded to my server and my firebase realtime database to be uploaded with the information. All my other pages don't have an image upload, only text fields, so I've just been calling a javascript function addDeal() for the onclick event to my submit button. And it's worked updating my firebase db fine.

Now, if I'm understanding what google is telling me, to integrate the image upload I have an upload.php page for my form action instead that gets called on the submit button. I made the upload.php page and it works great uploading my image to the server. But now I don't know how to ALSO call my javascript function to then add the data to my firebase database.

Should I use the upload.php page to do the firebase update in php also? Or keep the update in javascript on my html page and do both somehow? Here is my code.

addDigital.html

<!DOCTYPE html>
<html>
<body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
      <div class="wholeOption">
          <label for="descText">Text to display:
              <textarea id="descText" name="descText" cols="80" rows="2"></textarea>
          </label>
      </div>
      <div class="wholeOption">
        <label for="fileToUpload">Select image to upload:
          <input type="file" name="fileToUpload" id="fileToUpload">
        </label>
      </div>
      <div class="processdeals">
        <input type="submit" class="submit" value="ADD DIGITAL MATCHUP" name="submit">
      </div>
    </form>    
    <div class="results">
        <h2>Results: </h2>
        <p id="message" class="message"></p>
        <p class="errors" id="errors"></p>
    </div>

    <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
    
    <script>
    var firebaseConfig = {
        apiKey: "xxx",
        authDomain: "xxx",
        databaseURL: "xxx",
        projectId: "xxx",
        storageBucket: "xxx",
        messagingSenderId: "xxx",
        appId: "xxx",
        measurementId: "xxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
    </script>
    <script>
        firebase.auth().onAuthStateChanged((user) => {
        if (user) {
            var uid = user.uid;
        } else {
            // User is signed out
            window.location = '../login.html';
        }
        });
        
        // this is the function I want to ALSO happen when the form is submitted in addition to the upload.php action     
        function addDeal(){
            let good = 1;
            document.getElementById("errors").innerHTML = '';
            let descText = document.getElementById("descText").value;
            let imageUpload = document.getElementById("imageUpload").value;
            let postDate=new Date().getTime();

            if (descText == ''){
                good = 0;
                document.getElementById("errors").innerHTML += "Text to display cannot be blank!";  
            }

            if (good){
//                firebase.database().ref('digital/' + postDate).set({
//                    "desc" : descText,
//                    "imageUpload" : imageUpload,
//                    "postedDate" : postDate,
//                })
//                .then(()=>{
//                    document.getElementById("message").innerHTML = "added successfully!";
//                    clearDeal();
//                })
//                .catch((error)=>{
//                    document.getElementById("message").innerHTML = "Database error " + error;
//                })
            } else {
                document.getElementById("message").innerHTML = "Digital Deal NOT added. See errors below.";
            }
        }
    </script>
</body>
</html>

upload.php

<?php
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
  $uploadOk = 1;
  $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
  
  // Check if image file is a actual image or fake image
  if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
      echo "File is an image - " . $check["mime"] . ".";
      $uploadOk = 1;
    } else {
      echo "File is not an image.";
      $uploadOk = 0;
    }
  }
  
  // Check if file already exists
  if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
  }
  
  // Check file size
  if ($_FILES["fileToUpload"]["size"] > 5000000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
  }
  
  // Allow certain file formats
  if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
  && $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
  }
  
  // Check if $uploadOk is set to 0 by an error
  if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
  // if everything is ok, try to upload file
  } else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
      echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
    } else {
      echo "Sorry, there was an error uploading your file.";
    }
  }
?>

Upvotes: 0

Views: 111

Answers (2)

Janos Vinceller
Janos Vinceller

Reputation: 1266

To understand which is which, you could read about the server/client architecture, the HTTP communicational layer (not the whole protocol, but what it is for), and read how PHP can help you in this.

In a nutshell:

Your browser "understands" or "displays" HTML and CSS. You can manipulate the document and the browser via Javascript. This all is going on the "client" side, so in your browser.

If you have to ask the "server" the browser has to communicate with a "server". This server would take your data the client sent to it via HTTP and execute the PHP interpreter, which in turn executes your PHP script.

This PHP script would take the so called HTTP request, which the browser sent to the server (to the PHP script) and answer it, again via HTTP. The answer would be most commonly an HTML page. You would write a PHP script with writing HTML with it.

As the browser gets the answer (response) from the server, it displays a new page.

So as i said, the PHP script would work on the server side, the HTML and Javascript on the client side.

This is the most common use of those technologies you mentioned.

Upvotes: 1

Janos Vinceller
Janos Vinceller

Reputation: 1266

If I understand your problem here, you're javascript already sends data to firebase.

You'd like to upload a file to the PHP script.

If you send the upload like this via a <form> tag, your browser will display a new page afterwards, that is built upon the HTTP response sent back from that PHP script.

The new page wouldn't send anything to firebase, because with the new page your HTTP request is gone.

You have some choices:

  1. you send that firebase data from a form-submit method and send the upload via form submit, google "form onsubmit".
  2. you rewrite your PHP script to send data to firebase (if that's not your own PHP script, it's not possible).
  3. you rewrite the upload to an XHR call (Upload File With Ajax XmlHttpRequest)

Upvotes: 1

Related Questions