"Java Objects (Retired)" was retired on January 31, 2017. You are now viewing the recommended replacement.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marty Hitchcock
Marty Hitchcock
13,108 Points

How to get php-like header and footers with javascript

I started out making a website which has a bunch of web apps (todo lists etc). I have used php for putting the header and footer on each page but the rest of the functionality is done with javascript. I initally thought I would use both but I didn't end up using php again.

What I want to know is if there is a way to include the header and footer using javascript instead of php so I don't have to worry about having php installed on the server.

1 Answer

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Marty,

You could use jQuery's .load() method...or an AJAX request, but I would advise against using JavaScript for these pieces of your site (or any other critical content, for that matter).

In order to make this work, you would probably still have to hard-code your <head> sections in order to link to your JavaScript before importing the rest of your header. Seems unnecessary and inefficient.

I don't have any numbers to back this up, but I would be willing to bet that php is faster and less expensive (computing-wise) than JavaScript. Asking a user's browser to import content through JavaScript may slow down your site's performance.

On top of that, some people will have JavaScript disabled in their browsers (annoying, I know, but I think some workplaces see it as a security risk). Anyone with JavaScript disabled wouldn't be able to see your header or footer...and the functionality/styling of the rest of your site would likely be wonky.

Are you running your own server or are you paying for hosting? Any hosting service should be php-enabled, so that shouldn't be a worry.

I'd say stick with php. :)

Hope this helps.

Marty Hitchcock
Marty Hitchcock
13,108 Points

Thanks for the indepth answer! To answer your question, I had hoped to use Firebase hosting since I am using Firebase as my back end and the hosting comes free with the package. However while I am familiar with regular hosting services with dashboards etc, I have no experience with using the command line to interact with the server. I don't even know if it is possible to install php on it so I thought I should find out if I could just cut php from my project all together. But it sounds like I should stick with php and try work out if/how to get it on the Firebase hosting.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Yeah...Firebase looks like a different animal, and I'm a little confused about their hosting. They talk about data storage and syncing, but a lot of the language in their Hosting section makes it sound like you can only host static content, so you may not be able to run php with them. If they do allow you to do anything dynamic, it looks like you'll probably have to use node.js (something I know next-to-nothing about).

It's worth sending a message to their Support team...see what they have to say. Let us know how this shakes out. I'm interested to hear more.

Good luck!

Marty Hitchcock
Marty Hitchcock
13,108 Points

Here is what they said:

In short, no - Firebase Hosting is specifically for hosting static files so anything you upload (including PHP files) will be served up to clients precisely as it was uploaded to the server - nothing gets executed on the server. This suits single page apps that are client-code heavy well, but if you need more server-side options you will have to evaluate other options for the time being

Thanks for the interest Chris Engineer @ Firebase

So I guess my options are:

  1. Pay for another hosting service
  2. Make my code less DRY and put the header code in each html file
  3. Recode my site to use something like Ember (started the Treehouse lessons on it today and it seems to do this well also). Probably wont do this though as single page apps launching from another single page app isn't ideal for load times.

So will have to do something thinking there, but thanks a lot for your help Shawn!

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Interesting. Thanks for the update!