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

  • Scale
  • Adapt for good UX

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>
<!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>
  1. 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.
  2. Inside the script tag is where AJAX retrieves the data displayed by bg.php inside the h1 tag created earlier.
<!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>
  • 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
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();

Final thoughts

I know that it’s not safe to allow exec operations to be initiated through third party users without any precautions, but since that is a whole other topic, I didn’t include it in this article. You can use exec operations without any precautions on a personal project that won’t involve any external users, but it’s better not to do so on a project involving external users and their data.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store