Entries tagged "HTML"

Sorting HTML Data Tables Using the Header Row with PHP

When displaying a data tables, how do you usually sort the information? Do you sort by the field that you think is the most important to the visitor? For example, it's perfectly acceptable to show a list of order by date; showing the newest order first. But what if the user wants the data organized differently? We could let them choose the column to sort by. [Continue reading]

Making Sure that Updates Were Applied to a Web Page with HTML Comments

When modifying a website, the effects to the page are usually apparent. But when the changes only affect the backend, how do you know you're not viewing the old page? A successful update results in the same content being displayed as before the changes. Maybe the updated page was uploaded to the wrong location. Let's see how HTML comments can help. [Continue reading]

Three Simple Methods for Hiding Website Content Until It’s Ready

How do you handle content that needs to be temporarily removed from a website? Maybe there is some text that gets recycled on a regular basis or something that hasn't been approved for posting yet. HTML comments could be utilized to hide everything until it's ready to go live. Just keep in mind that the content is still accessible via the browser for those who know where to look. If that's an issue, the information could be moved to a separate file and saved offline…or you could use PHP comments. [Continue reading]

Why Doesn’t My Submit Button Display the Entire Label: The Importance of Using Quotes with HTML Attributes

Several years back, there was a big push from the Web community to use a glorious advancement called XHTML. Although some will argue that XHTML movement was pointless, it at least changed the habits of developers like me who were a little loosey-goosey with standards. One of which is the use of quotes around all attributes, or lack thereof. Although the page may display fine without quotes, there are cases where the code won't work as expected. [Continue reading]

Developing a Simple Website Template with PHP

When developing websites it's always a good idea to look for ways to make the final product easier to maintain. For websites which contain more than a couple of pages, it can be a real time saver if you build the website utilizing a template.

To build a template you need to identify the components which stay the same from page to page throughout your website. For example, there probably is a page header which contains your organization's logo and/or name. What about a main navigation area that links to the main sections of your website? How about a page footer?

Background

Before getting our hands dirty, let's talk a little about what our example website looks like behind the scenes. Not the code, but the directory structure. Websites typically consist of many files and folders. In Figure 1 below, you can see the example website is made up of four folders and at least one PHP file.

Figure 1. Directory Structure for the Example Website

Building the Template

So let's say the index.php file contains the following code and we want to create a template component for the main navigation:

First we need to highlight and cut the main navigation code out of index.php. Then we'll paste the code into a new file called main_navigation.html which will be saved in the "inc" folder. We can now import the code back into index.php using the require() function provided by PHP.

Now you just need to repeat the process for any other template components you may have. In the example code above, we'll also want to replace the page header code:

Once all the template files are in place, you can start creating new pages based on the template. You just need to duplicate one of the files already using the template and customize the page as necessary.

Conclusion

The benefit for using templates is when you need to change something; you only need to update one file. For example, to include a contact us link in the main navigation for all of your pages, you only need to update the "main_navigation.html" file and you're done.

In addition to reducing the maintenance time require for a website, templates make it easier to add things like the Google Analytics tracking code. Or maybe you want to add a search engine to all of your pages. Templates give you the hook needed to easily incorporate content throughout your website.

Related Resources

• PHP Manual: require() – describes the require() and include() functions in more detail.
• PHP Manual: $_SERVER – help documentation for $_SERVER['DOCUMENT_ROOT'].

Adding an Audio Player to Your Libsyn.com Hosted Show Notes

At work I was asked to solve an issue with the website associated with our podcast. The problem was that the default player provided by our host (Libsyn.com) wasn't meeting our needs. On several occasions the player wouldn't play the most recent podcast episode. We also didn't like that if you were viewing the show notes for an older episode the player would still play the most recent episode which confused our visitors.

Note that the following directions are for Libsyn's publishing system version 3.4.2 (rev. 1764)

Custom Player Code

There are many audio players to choose from; we decided to use one provided by Google:

Note that you'll need to replace the "http://traffic.libsyn.com/YourUsername/YourAudioFile.mp3" part with the website address for your podcast episode.

Adding the Custom Player

To add the custom player code to your show notes, you'll need to:

1. Log into the Libsyn publishing system
2. Click the show posts button near the top-left of the page (See Figure 1)
3. Click the "Edit" link for the post that needs the custom player (See Figure 2)
4. Click the "HTML" button (See Figure 3)
5. Insert the custom player code where you want it to appear in the show notes (See Figure 4)
6. Click the "Update" button
   • Note that you should see the player if it was added properly. You should also be able to hear the podcast episode by clicking the play button on the player. (See Figure 5)
7. Click the "Publish" button
8. Repeat steps 3 – 7 for the other posts which need the custom player

Figure 1. Show Posts Button

Figure 2. Edit Post Link

Figure 3. HTML Button

Figure 4. HTML Code Window

Figure 5. Player Added to Show Notes

Removing the Default Libsyn Player

Once all the custom audio players are in place we no longer need the default player provided by Libsyn. To remove the player, you'll need to:

1. Log into the Libsyn publishing system
2. Click the "Destinations" button (See Figure 6)
3. Click the "Libsyn Classic Blogpage" option (See Figure 7)
4. Locate the code used to display the Libsyn player in the Blogpage HTML/Code edit box (See Figure 8)
5. Comment out the Libsyn player code (See Figure 9)
   • Note that you could also delete the code, but you may want to save the code in a text file for later. You never know when you might want to add the Libsyn player again.

Figure 6. Destinations Button

Figure 7. Libsyn Classic Blogpage Option

Figure 8. Libsyn Player Code – Before Being Commented Out

Figure 9. Libsyn Player Code – After Being Commented Out

Related Resources

• Libsyn.com – If you publish a podcast, you're probably familiar with Liberated Syndication (Libsyn). According to their website, Libsyn is the world's largest podcast network that distributes more than 15,000 podcasts.
• Yahoo! Media Player – Another player option that automatically pulls all audio links on the page to create a playlist.