How to 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.

Let me know if you have any questions or comments! I value your feedback!

Comments

  1. Dave says

    Thank you very much! You made it clear what each language can do. I was missing something, but it just clicked!

  2. Jihed says

    I’m starting a webapp project i had no idea where to start or which language i should use, you made it clear, thank you so much!

  3. Aarushi says

    This has really helped! Just one very basic doubt, as I am a beginner, what extension should i use to save my code?

    • Cindy says

      Always use .php because the server has to parse your file and replace all the php code before it sends the file to the user/client computer.

  4. Nirmal says

    Great article. Thank you for remembering that us beginners can find the whole web development architecture pretty daunting

  5. Gouri says

    my browser is not working for html css and java script combined in one notepad file. what extension should i use to make it work and what should i include in the code to make this happen.

  6. Timmy says

    Very helpful. I have written a html code, CSS and php codes separetely and saved in www folder for my Apache. Well, so when I load the html file, its well decorated by the css file and it looks beautiful. I have forms where i collect user details . I am wondering if its possible to “decorate the server side. I have tried linking the php code that displays captured info from html with a css file to decorate output but it doent happen.

    Also i have tried to use a javascript function to show a pop up but it doesnt work. Any help?

Trackbacks

  1. […] the PHP code. The PHP code should create valid HTML, CSS or Javascript code. See my other post, How to Use PHP, Javascript (or jQuery), and HTML Together for more information about how all the languages work […]

Leave a Reply

Your email address will not be published. Required fields are marked *