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!

34 thoughts on “How to Use PHP, JavaScript (or jQuery), and HTML Together”

  1. Pingback: How to Use PHP on Your Web Page | webtips.cindycullen.com

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

    1. Reema Srivastava

      what is work of ajax?
      i know that ajax works nothing to load whole web page its work on particular element to which execute. but i have some confusion in ajax. please tell me about ajax.

      1. Ajax goes out to the server behind the scenes and doesn’t refresh the page. You can use javascript to fill values in elements without refreshing the page.

        <div id=”mydiv”></div>

        <script>$.ajax(‘http://mydomain.com/myscript.php’).done(function(data) { $(‘#mydiv’).html(data); });</script>

  3. 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!

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

    1. 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.

  5. Pingback: Displaying Notifications from your Website on your Mac Desktop - Hooks - Cullen Web Services

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

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

  8. 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?

  9. I need to make a web page that shows a form, in which a text-input shows the current year information first while user can enter a different year. A SUBMIT button is clicked to check if the year in the text-input is a leap year or not.

    How can i do this using both php and javascript simultaneously?

    1. I would do this with just javascript. There’s no real need to go back to the server to check if it’s leap year. The only reason to go back to the server is if there is information you need on the server. You could use javascript to fill the current year and then to check the date.

      See this: https://stackoverflow.com/questions/6002254/get-the-current-year-in-javascript

      <input id=”input-id” … />

      Something like this in jQuery: $(‘#input-id’).val( // code here for current year );

      <input id=”submit-id” type=”submit”… />

      and this: https://stackoverflow.com/questions/16353211/check-if-year-is-leap-year-in-javascript

      Hook something like that to the submit button with the onclick event or use jquery $(‘#submit-id’).click(function() { //code here });

  10. Pingback: Why You Should Choose JQuery for Your Next Project? | Designbeep

  11. Pingback: Why You Should Choose JQuery for Your Next Project? - iDevie

  12. Thank you Cindy.
    Can you explain about how can we test our application once we build one?
    For example, html, css and javascript can be tested on the browser, but for php we need to set up a server and database.

  13. Thank you for this. What is node.js in relation to this? In my mind it is like an alternative to PHP for server-side. Your explanation could help me grasp this.

    1. Hi Shanjei, Yes, node can be used as an alternative to php serverside. Keep in mind that php is a server side language, but is not the server. PHP should run in a server such as Apache or Nginx. Node can be the server and the server side code.

  14. Nice thread. I too am a beginner at web development and was asking myself the very same question. I have a javascript array which php extracts from the database. I get it in my page for javascript use with let x = ; I wondered if you thought this a bad idea? I’m trying to keep the pages less cluttered with php all over the place.

    1. It would completely depend on your code and how you are optimizing your code. Database reads can get expensive and inefficient quickly if not handled correctly. If you have too much code in your database, it could slow your site down, but again it will depend on your code and how you have it optimized. It may also depend on the platform you are using.

Leave a Comment

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

Scroll to Top