JavaScript code and PHP

Javascript Course

• Alert window with the user name
• Clock with server time
• Displaying data from PHP with JavaScript, according to a URL

PHP code is executed on the server side and output data are transmitted to Web browser.
JavaScript script code is executed by the browser on user's computer.
Combining these two web programming languages, JavaScript scripts can achieve dynamic results based on data received and processed by the server. Thus, the same web page can contain a JavaScript code for a user and other JS code for another user.

- There are two ways to combine PHP with JavaScript to achieve a dynamic and personalized result:

      1) By writing the entire JS script within PHP code and adding it to the web page with PHP function 'echo' (or 'print').

<?php
echo '<script> var str ="JS code"; </script>';
?>

- The string returned by 'echo' must be a JS code with correct syntax.

      2) By adding in the JS script within the HTML document only the necessary data processed by PHP.

<script>
var var_js = '<?php echo $var_php; ?>';
</script>

• Both versions must be written into .php files that can be processed by the PHP module.

Alert window with the user name

For example, in a web page there is an authentication system that displays an alert window with the user name, after he logged in.
In this case we assume that the username is stored in a session variable ( $_SESSION['username'] ).
- Using the first method, we use the following PHP code:

<?php
session_start();
// ... php code ...
echo "<script>alert('Welcome ". $_SESSION['username'] ."');</script>";
?> 

- Or the second way:

<?php session_start(); ?>
<!-- HTML code -->
<script>
alert('Welcome <?php echo $_SESSION["username"]; ?>');
</script> 

Clock with server time

A clock made with JavaScript and added in a web page it displays the visitor's computer time. If you want to display the same time for all visitors, you can add and use the server time in the JS script, like in the following example:

<div id='tag_ora'></div>
<script>
// Clock script server-time, https://coursesweb.net

// use php to get the server time
var dt_serv = new Date(<?php echo date('y,n,j,G,i,s'); ?>);

var ore = dt_serv.getHours(); //hour
var minute = dt_serv.getMinutes(); //minutes
var secunde = dt_serv.getSeconds(); //seconds

// function that process and display data
function jsClock(){
 secunde++;
 if(secunde>59){
 secunde = 0;
 minute++;
 }
 if(minute>59){
 minute = 0;
 ore++;
 }
 if(ore>23) ore = 0;

 var output ='<h4>Server time - '+ore+':'+minute+':'+secunde+'</h4>';
 document.getElementById('tag_ora').innerHTML = output;
}

//calls the function every second
setInterval('jsClock()', 1000);
</script>

- Test it yourself, in a .php file, on the server.

Displaying data from PHP with JavaScript, according to a URL

Maybe you have seen in sites for traffic or banner that is necessary to add a little JavaScript code in the page with a specific 'src' attribute.
They use the same principle, to combine PHP with JavaScript.
The URL in the JS code added in the web page calls a PHP script. The PHP script uses $_GET to get the parameters from the received URL. According to those parameters, the PHP processes data on the server and return a HTML and JavaScript code that can display in your page what they want, the traffic site, a banner, ....
To understand better, try the following example:

      1. Create a php file on your server (named 'phpjs_test.php') and add the following code:

<?php
$ids =[1=>'php-mysql', 2=>'javascript', 3=>'html'];

// gets the id from URL
if(isset($_GET['id'])){
 if($str = $ids[$_GET['id']]){

 //return a string with a JS instruction that will display a link
 echo 'document.write("<a href=\'https://coursesweb.net/'. $str. '\'>Course '. $str. '</a>");';
 }
}
?>

      2. In the same folder on the server create a html file (ex. 'test_jsphp.html') where you add the fallowing code:

<script src='phpjs_test.php?id=2'></script>

- Call this html file on the server. The result will be a link (written by document.write()) defined in php script, based on the 'id' added in the URL in 'src' attribute.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net