Use PHP, Javascript (or jQuery), and HTML Together

Sometimes for beginners, or even those of us that have been doing this for a while, it may be difficult to see how to use PHP and Javascript together to make the page work correctly. I often have to stop and remind myself of the basics.

HTML and Javascript (which includes Javascript libraries, such as jQuery or Scriptaculous) are client-side languages. This means that the browser is responsible for executing the HTML and Javascript code. This is why we must test our web pages in as many different browsers as we can, because, since the browser must execute the HTML, Javascript and CSS, each browser could execute it in a different way giving different results.

PHP, on the other hand, is executed on the host computer, or server, before the page is delivered to the browser. PHP is responsible for pulling things from the server, whether it be in a database or a file, and creating and/or delivering the proper HTML, Javascript and/or CSS code. Much of the time this HTML, Javascript and CSS code is hard-coded, meaning that it doesn’t change. The developer creates the HTML, Javascript and CSS just like they want it to be, saves it to a file and then uploads it to the server. The server, when requested for that web page, just sends the page as it was coded by the developer to the browser.

But, when we need to make the page dynamic, meaning that information needs to change based on input from the user or the time of day that the file is requested, or for many other reasons or conditions, we must use a scripting language, such as PHP, at the server level. PHP is used to create HTML, Javascript and in some cases, CSS code. PHP gathers and processes the information that it needs to create the web page in HTML and Javascript before it sends the finished web page to the browser.

So, when we develop web pages, we can have a combination of HTML, Javascript, CSS and PHP in our pages. This can sometimes get confusing. Remember, the PHP code is executed first at the server level. The PHP code creates HTML, Javascript and CSS to be used by the browser. If you need to use a scripting language, such as PHP, once the page has been loaded into the browser, then you must either refresh the page or use Ajax to request more processing at the server side.

For instance, once my page has been sent to the browser, if I need something new from the database, I must either refresh the page or use Ajax to go out and request the information from the database via the server.

When I first started using PHP and Javascript together, I often forgot that I could make the PHP code create the Javascript. So, if, for example, I had a group of items in the database and I needed a jquery listener for the click event on each item, I could query the database to get my list and then create each listener in a for loop. There are many ways to combine the two to make my web applications more dynamic.

When deciding if I need PHP or Javascript for the job, I ask myself whether I really need anything from the server or if things can just be updated using javascript. Usually, the only reason I need to go back to the server is for accessing the database or another type of file. Even then, I can sometimes anticipate what might be needed and put it in a hidden div and then use Javascript (or jQuery) to display the hidden div when needed. Most everything else can be done by Javascript at the browser side of things which will make things much nicer for the end user.