3

Backend Operations in PHP from 0 to Hero(Pt. 3 Heavy operations and AJAX)

 2 years ago
source link: https://dev.to/code_jedi/backend-operations-in-php-from-0-to-hero-pt-3-heavy-operations-and-ajax-58mk
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for Backend Operations in PHP from 0 to Hero(Pt. 3 Heavy operations and AJAX)

Backend Operations in PHP from 0 to Hero(Pt. 3 Heavy operations and AJAX)

Sep 21

・4 min read

In the last tutorial, we made a PHP script that performs customizable backend operations that take in user input.

In part 3, we'll be making a php script that refers another php script, which then executes a memory and time intensive background script through AJAX.

In order to understand some of the things covered in this tutorial, I strongly advice you to read Part 1 and Part 2

Just thinking about running and handling these sorts of memory and time intensive background processes in PHP brings back memories of younger me really struggling with them.

The reason is, I've spent a lot of time trying to handle and work with these types of PHP background operations. Heavy background operations in PHP are hard to:

  • Handle
  • Scale
  • Adapt for good UX

But in this tutorial, I'll be condensing my experience with such backend operations and teaching you the easiest and most efficient way to perform and handle long running backend operations in PHP!

Let's get started!

First of all, let's create an index.php file:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple operations</title>
  </head>
  <body>
  <form method="post" action="results.php">
  Ticker: <input type="text" name="ticker"><br>
  <button type="submit" >Submit</button>
  </form>
  </body>
</html>
Enter fullscreen modeExit fullscreen mode

As you can see, all it does is display a form asking the user for a 'url' and 'tag' parameter.

These parameters will then be passed on to our results.php file, and this is where the magic happens...

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Complex operations</title>
  </head>
  <body>
    <h1 id="txt"></h1>
    <?php
    session_start(); 
    $ticker = $_POST["ticker"];
    $_SESSION["ticker"] = $ticker;
    ?>
    <script>
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txt").innerHTML = this.responseText;
            }
        }
        xmlhttp.open("GET", "bg.php", true);
        xmlhttp.send();
    </script>
  </body>
</html>
Enter fullscreen modeExit fullscreen mode

Now I know the stuff between inside the script tag might look scary, but let me explain what's happening here:

  1. The h1 tag containing the "txt" id is defined, this will be used later by the code between the script tag.

  2. PHP then starts the user session using session_start(); function, defines the $ticker variable as the parameters received from the index.php file and finally defines the $_SESSION["ticker"] as the previously defined $ticker variable. These variables are then going to be used in bg.php to execute the background operation, but we'll get into that later.

  3. Inside the script tag is where AJAX retrieves the data displayed by bg.php inside the h1 tag created earlier.

Inside bg.php:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Complex operations</title>
  </head>
  <body>
    <?php
    session_start(); 
    $ticker = $_SESSION["ticker"];
    $output = exec("ticker=$ticker node op1.js");
    echo("<h1>$output</h1>");
    ?>
  </body>
</html>
Enter fullscreen modeExit fullscreen mode

  • Starts the user session using session_start();

  • Retrieves the $_SESSION["ticker"]; session variables created by the results.php file.

  • Displays the output of the op1.js file once executed with the $ticker parameter passed on as a system variable( refer to Part 2 ).
    The displayed text contents are then retrieved by AJAX and displayed on results.php

op1.js simply scrapes the stock ticker passed-on by bg.php inside the $ticker parameter ( refer to Part 2 ).
For the purpose of this tutorial, there's no need to know how this works, but if you want to find out, check out this tutorial

const puppeteer = require('puppeteer');
async function start() {
    const url = 'https://finance.yahoo.com/quote/' + process.env.ticker + '?p=' + process.env.ticker + '&.tsrc=fin-srch';
    const browser = await puppeteer.launch({
      args: ['--no-sandbox']
    });  
    const page = await browser.newPage();
    await page.waitFor(1000)
    await page.goto(url);
    var accept = ("#consent-page > div > div > div > form > div.wizard-body > div.actions.couple > button");
    await page.click(accept)
    await page.waitFor(1000)
    var element = await page.waitForXPath("/html/body/div[1]/div/div/div[1]/div/div[2]/div/div/div[5]/div/div/div/div[3]/div[1]/div[1]/span[1]")
    var price = await page.evaluate(element => element.textContent, element);
    console.log(price)
    browser.close()
}
start();
Enter fullscreen modeExit fullscreen mode

Here's how the whole process looks like:

Let's see how it works!

As you can see, the stock price of the specified ticker is returned once it's scraped by the Node.js script, displayed by bg.php and retrieved by results.php, which takes about 5 seconds.

The main advantage of this is that the results.php webpage doesn't need to wait for the stock price element to be retrieved in order to load the page, this way, long running background operations that include: web scraping, data queries or machine learning don't need to take up loading time on the front-end.

Final thoughts

AJAX is a full-stack, back-end, and front-end developer's dream because it eliminates the problems of:

  • Loading time
  • Timeout errors on the front-end
  • Bad UX that requires the user to constantly be redirected, reloaded, or getting stuck on loading screens

Since AJAX is such a big topic and has so many useful implementations, comment down below if you would like another tutorial on AJAX explaining how to build more complex fullstack applications with it?

Byeeee👋


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK