When you build the HTML content of Web pages in PHP code, there are likely to be times when you need to call JavaScript functions. In dynamic websites, it is not unusual for pages and scripts to contain PHP, JavaScript, HTML and sometimes other types of code such as CSS, so the development process can become confusing. However, by building each of the elements in your website pages one at a time, then working out how to coordinate them, you can integrate the technologies with no trouble.
Before You Start
When creating a Web page containing JavaScript, PHP and optionally other languages, as well as implementing the interaction between them, it's good to first make sure you have a clear idea of the order in which the parts of your page are being constructed. If your PHP code is building HTML then writing this to the browser, your JavaScript function calls will need to be contained within these HTML structures.
JavaScript PHP function calls are dealt with at the same time when you write your scripts. However, when your pages are actually visited and interacted with by users, the two aspects of functionality are not executed at the same time. Don't worry if you still find these concepts confusing, as the best way to get to grips them is by putting them into practise. Learning to combine PHP with JavaScript is a good exercise to equip yourself with basic Web development skills.
Page and Script Outline
Within PHP files you can alternate between HTML and PHP code. Create your basic Web page outline as a PHP file containing HTML structures, as follows:
<html> <head> </head> <body> <?php //PHP code goes here ?> </body> </html>
Copy the code into a new file in a text editor and save it with ".php" extension, for example "yourpage.php" - reflecting whatever the page content is.
Insert Your JavaScript Function
Add your JavaScript function. You can include JavaScript in a separate file called from the head of your page as follows (between the opening and closing head tags):
Alternatively you can include the JavaScript code directly within the page head section as follows:
This function is for demonstration, but you can include whatever function you intend to call from your PHP code.
Call JavaScript From PHP
Insert your PHP code within the PHP section of your page, as in this example where a series of buttons are created:
<?php
$count;
for($count=0; $count<10; $count++)
echo "<input type='button' value='button ".$count."'
onclick='yourFunction(".$count.")' />";
?>
Each button is given a number, so you will be able to see whether the script is working at a glance. Notice that in the section of code where PHP is writing out HTML, both single and double quotation marks (inverted commas) are being used. This is to distinguish between the PHP and HTML content. Double quotes are used within the PHP to delineate parts of the code to send to the user's browser, and single quotes are used within the HTML that is actually sent.
Upload and Test
Upload your page to your Web server. Browse to the Web page in your Web browser and test to see whether it works. Click on each button in turn - you should see an alert dialog box pop up, demonstrating that the JavaScript function is being called, and that the number is also being passed accurately to it.
If your page does not function correctly, check your code, ideally by reading it in a text editor with the ability to highlight PHP code. Try viewing the page source in your browser to see what HTML has actually been sent from the server side script.
Alter to Suit
This is the basic pattern for most PHP JavaScript function calls, but you will need to amend the script to suit the purpose of your own pages. As well as the HTML content, you will need to alter the PHP and JavaScript to address your own requirements, but the principle of calling a JavaScript function from PHP remains the same. Make sure you test your pages thoroughly before your website is exposed to users, as technologies such as JavaScript often behave differently across browsers.
Alternatives
As with most Web technologies, there are many different possible ways to combine JavaScript and PHP. The use of single and double quotation marks is just one option for handling JavaScript function calls from PHP. An alternative is to use escape characters, which indicate that a character is not being used in the normal way. For example, instead of the single inverted commas you can use all double and insert an escape character before those you want to appear in HTML:
echo "<input type=\"button\" value=\"button ".$count."\"
onclick=\"yourFunction(".$count.")\" />";
This is the method preferred by many developers, but as you can see the code can quickly become difficult to read. Which option you go for is entirely up to you, but personally, when escape characters are used excessively I tend to lose track of where I am and be more inclined to make syntax errors. As with everything in programming, it's best to stick with whatever approach makes the most sense to you.
Being able to read your code is always important, particularly where different languages are being used, as in this case, where it's vital to be able to see JavaScript in PHP code at a glance.
Notes
- Create your Web pages incrementally, adding one element at a time and testing regularly. This makes mistakes easier to find and fix.
- When you develop Web pages with both server side and client side languages, it's essential that you understand what happens on the server and what happens in the browser. If you're unsure about these things, it's well worth taking the time to familiarise yourself with the basics of the technologies involved.
See also:
How To: AJAX PHP Functions
How To Send Mail in PHP
No comments:
Post a Comment