WordPress Logo

WordPress Transients, a Simple Example

The first time I heard of WordPress Transients, it sounded scary. But after figuring out what they were, how to create them and what they were used for, it is a no-brainer to not use them in certain situations. According to the WordPress codex:

WordPress Transients API offers a simple and standardized way of storing cached data in the database temporarily by giving it a custom name and a timeframe after which it will expire and be deleted.”

“The Transients API is very similar to the Options API but with the added feature of an expiration time, which simplifies the process of using the wp_options database table to temporarily store cached information. “

“Advantage: Transients expire and Transients are inherently sped up by caching plugins, where normal Options are not.”

I build a lot of custom WordPress websites which uses custom database tables and I have to create custom database queries. This is a good option to use Transients API especially with database queries with multiple JOINS. Using transients will speed up the page loading since most likely a Transient will already be present with the results compared to making a database call each time the page is loaded.  According to the WordPress codex, “Using transients in your plugins and themes is simple and only adds a few extra lines of code, but if used in the right situations (long/expensive database queries or complex processed data) it can save seconds off the load times on your site.

There are three basic functions to use Transients, create or set, get and delete.

How do we create a transient.

set_transient( 'special_query_results', $special_query_results, 12 * HOUR_IN_SECONDS );

How do we get a transient.

get_transient( 'special_query_results' );

How do we delete a transient.

delete_transient( $transient );

 

Let’s take a look at a real world example. When working with Transients we want to always to a check to see if the Transient you are looking for exist and if not then you would create it as it is possible for the transient to not be available before the expiration time. For example, say you have a brand new page that does not get a lot of traffic and the code to create the transient has not run yet and then your code is looking for a transient on another page that is not there. Also, what if your Transient expired, you always need to run a check to if it exists first and if not then create it. Then the next time the page loads, the Transient should be available.

$routes = get_transient( 'cached_shipping_routes' );
if ( empty( $routes ) ) {
    global $wpdb;
    $routes_query = $wpdb->get_results("SELECT * FROM `shipping_routes` WHERE route_id  NOT IN  ('COLLEGE', 'AIRPORT', 'HOSPITAL', 'CIVIC CENTER', 'MEDICAL CLINIC')");
    set_transient( 'cached_shipping_routes', $routes_query, 6 * MONTH_IN_SECONDS );
 }
if ( $routes ) {
    echo '<select id="shipping_route_ddl" name="shipping_route_ddl" class="shipping_select_ddl" aria-label="Select A Route"><option value="select">SELECT A ROUTE</option>';
    foreach ( $routes as $route_value ) {
         echo '<option value="' . esc_attr( $route_value->route_id ) . '">' . esc_attr( $route_value->route_short_name ) . ' / ' . esc_attr( $route_value->route_long_name ) . '</option>';
    }
    echo '</select>';
}

Let’s break down the above code:

Line 1: we attempt to get the transient titled ‘cached_shipping_routes’ and set it to a variable called routes.

Line 2-5 we do a check to see if the $routes variable is empty. if it is empty then this transient is not available thus we are going to run our database query and then set the results to a variable called $routes_query. We then create the Transient using set_transient.  We pass in the title of the Transient, then the $routes_query variable which holds the results from our database query and lastly we set the Expiration time.

If the $routes variable is NOT EMPTY, then the Transient we are looking for is there, and then we use the $routes variable which holds our Transient value from Line 1 and we create our dynamically generated select element.

Now this query is not large query with multiple JOINS but the database table is large with a lot of rows and we are excluding certain rows with specific route ids. This allows our page to load faster. Of course the first time the Transient is NOT available, the page will load slower this time but after that the page will load faster, especially if you use some type of caching.

Here is a reference from to the WordPress Codex on Transient.  https://codex.wordpress.org/Transients_API

There is also an excellent plugin from Pippen Williamson called Transients Manager which allows to view all of your websites Transient from the admin.

https://wordpress.org/plugins/transients-manager/

Blog, WordPress,
JavaScript Logo

Creating Event Handlers in JavaScript

Over the past 5 years, I had to redesign multiple websites and use some of the previous codebase as to not have to start from scratch. One thing I noticed a lot was previous developers using inline JavaScript click event.

for example,

<button id="reset_btn" class="primary" onClick="resetPage();">RESET</button>

Best practices suggest not to use this type of JavaScript inline event handlers if you can but create an Event Hander that will listen for the button click that will then run the JavaScript function.

Here we just create the normal HTML button.

<button id="reset_btn" class="primary">RESET</button>

Here is our JavaScript. We use the JavaScript window object to load the reset button Event Handler. Now, when the button is clicked, the resetPage function will execute. This is just a simple example that will reload the page.

 
window.onload = function()
{
    document.getElementById('reset_btn').onclick=function(){resetPage();};
}

function resetTP() 
{
    location.reload();
}  

 

Blog, JavaScript,
WordPress Logo

Dynamically populating ACF Checkbox Field from Custom DB Query

ACF (Advanced Custom Fields), the greatest WordPress plugin on Earth allows us do some many things. Every time I work on a new project, which I always use ACF, I find a new use or something new the plugin can do. This time there was no exception. I needed to query a custom database table and then display these options/values in an ACF checkbox field which were attached to a Custom Post Type. So I jumped over to the ACF documentation and found this snippet of information for the acf-load_value Filter which Elliot so kindly created for us to alter a fields data.

https://www.advancedcustomfields.com/resources/acf-load_value/

If you do not understand or know what WordPress Filters are continue reading or you can skip down to just view the sample code below. WordPress has Hooks where developers can hook into the code base without having to edit/hack the core code base. There are two types of WordPress hooks, Actions and Filters. From the WordPress Codex, Action Hooks are triggered by specific events that take place in WordPress, such as publishing a post, changing themes, or displaying an administration screen. An Action is a custom PHP function defined in your plugin (or theme) and hooked, i.e. set to respond, to some of these events. Filter hooks are functions that WordPress passes data through, at certain points in execution, just before taking some action with the data (such as adding it to the database or sending it to the browser screen). Filters sit between the database and the browser (when WordPress is generating pages), and between the browser and the database (when WordPress is adding new posts and comments to the database); most input and output in WordPress passes through at least one filter. WordPress does some filtering by default, and your plugin can add its own filtering. So WordPress has its own Hooks and usually good WordPress developers create custom Hooks in their plugins for other developers to use.

So using the acf-load_value filter, I can query the Database, get my result sets and inject these values into my ACF field.


function acf_load_routes_effected_field_choices( $field ) {
	global $wpdb;
	$routes = $wpdb->get_results( "SELECT * FROM shipping_routes" );
	$field['choices'] = array();
    if($routes){        
        foreach( $routes as $route_value ) {       
            $field['choices'][ $route_value->route_id ] = $route_value->route_short_name.' / ' .$route_value->route_long_name;
        }
    }
    return $field;
}
add_filter('acf/load_field/name=routes_effected', 'acf_load_routes_effected_field_choices');

 

Blog, PHP, WordPress,
WordPress Logo

WordPress Developer Helper Functions For Locating Files

WordPress comes with helper functions to located, files, images, documents within your plugin or theme.
Here is a list of some of the most used functions developer use:

1. get_theme_root() : returns the address of the theme installation directory.
2. plugins_url() : returns the address of the plugins directory.
3. get_template_directory_uri() : retrieves the URI to the current theme’s files.
4. admin_url() : provides the address of the WordPress administrative pages.
5. content_url() : indicates where the wp-content directory can be found.
6. site_url() : returns the address of the website.
7. home_url() : returns the address of the website.
8. includes_url() : provides the location of WordPress include files.
9. wp_upload_dir() : indicates the directory where user-uploaded files are stored.

Blog, WordPress,
Internet Explorer Logo

How to target IE / IE Specific CSS styles

OK. Let’s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS styles. We would then use conditional commenting as such:

<!--- code for using different IE stylesheets --->
 
 <!--[if IE 8]>
       <link rel="stylesheet" type="text/css" href="http://test.com/css/ie8.css" />
 < ![endif]-->
 <!--[if IE 9]>
    	<link rel="stylesheet" type="text/css" href="http://test.com/css/ie.css" />
 < ![endif]-->

Then if the browser was IE, it would load the specific IE css file with the IE specific styles.

Then came the changes. IE 10 drops conditional commenting. Then IE 11 decides to change their User Agent. So now what?

In order to target IE and render the IE specific CSS styles we had to do a work around. So this is a quick example of how to accomplish this task in today’s modern IE browsers.

1. Create a small piece of JavaScript which I place in my header files which grabs the user agent of the browser.

<script type="text/javascript">
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);    
</script>

2. Then in my CSS style sheet, (you can create an IE only css file or just place the IE specific styles in your main css file) I create my specific styles for each of my IE Browsers. So as of today, I normally target back to IE 8. This is now my code looks like in my CSS style sheet. Unfortunately, these styles get loaded for every browser but the styles are only used for their specific IE versions. Normally, I usually do not have a lot of specific IE styles just a small amount so the little bit of extra payload is not that big of deal having to be loaded in every browser.

/* ==========================================================================
   IE STYLES
   ========================================================================== */
/************* IE 11 STYLES *****************/
html[data-useragent*='rv:11.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 10 STYLES *****************/
html[data-useragent*='MSIE 10.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 9 STYLES *****************/     
html[data-useragent*='MSIE 9.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 8 STYLES *****************/
html[data-useragent*='MSIE 8.0']  .socialmediaicons {
    width: 480px;
    margin-right: 35px;
    margin-top: -50px !important;
}

Now the next big question is, what will the NEW Microsoft Edge browser have in store for us. No worries about the later versions of IE as they will still be around for some time in support of legacy software. So using the above solution will still be in play for a while.

Please feel to leave comments and let me know what you think or if you run into any issues.

ASP.NET, Blog, Cross Browser Compatibility,
WordPress Logo

Simple WordPress HTTP API Tutorial

This article is to show beginners how to consume a Web Service and display results on your WordPress website. I say beginner, I mean a beginner in using Web Services or  a beginner in WordPress development. I also assume you have an idea of what web services are, what a Endpoint is, what is JSON, and what are RESTFUL services, You are someone just looking for advice on how to accomplish this in a WordPress website. Some knowledge of WordPress, some basic PHP and some basic knowledge of WordPress theme development and/or WordPress plugin development are suggested. If you are a brand new WordPress user that has never written any code this might not be the article for you. A person that has written some PHP code and has knowledge of the WordPress file structure should be able to understand this article.   To start, we need to take a look at the documentation for WordPress HTTP API.

WordPress HTTP API

The functions below are the ones you will use to retrieve an URL. Please be aware that these functions will return a WordPress WP_Error class on failure.

* wp_remote_get() – Retrieves a URL using the GET HTTP method.
* wp_remote_post() – Retrieves a URL using the POST HTTP method.
* wp_remote_head() – Retrieves a URL using the HEAD HTTP method.
* wp_remote_request() – Retrieves a URL using either the default GET or a custom HTTP method (should be caps) that you specify.

The other helper functions deal with retrieving different parts of the response and do the testing for WP_Error for you, these make usage of the API very simple and are the preferred method for processing response objects.

* wp_remote_retrieve_body() – Retrieves just the body from the response.
* wp_remote_retrieve_header() – Gives you a single HTTP header based on name from the response.
* wp_remote_retrieve_headers() – Returns all of the HTTP headers in an array for processing.
* wp_remote_retrieve_response_code() – Gives you the number for the HTTP response. This should be 200, but could be 4xx or even 3xx on failure.
* wp_remote_retrieve_response_message() – Returns the response message based on the response code.
So in this tutorial we will be using the wp_remote_get function to make the request to the web service API. After successfully connecting and getting back our JSON data, we will then use the wp_remote_retrieve_body function to grab just the body of the request and then parse the data. Normally, in basic PHP we would be using cURL but WordPress already has everything baked into the Core so we will be using those functions.

Lets get started. First what I am going to do is to create a new template in my present theme. So jump into your present theme’s folder and create a new file, I am calling mine rest.php. So now in my theme’s main folder I have a new file called rest.php. Now I am going to create the code so my new template will show up in my theme on the front end.  I am also going to name my new template Rest. So open up your new file called rest.php and place this in your new file.

<?php
/**
 * Template Name: Rest 
 *
 */
get_header(); 
?>
    <div id="content" class="full-width" style="padding-left: 100px;">
		<h3>WP_Http</h3>
		<?php

		/* our new code will go */

		?>        
	</div>
<?php 
get_footer(); 
?>

Now remember, my theme will be different than your theme. What I did was just copy one of my themes other template files and stripped everything out of the main content area, I left my get_header, get_footer and the main content div. OK, so now I have my new template file so I will be able to see the results on the front end.  Now, I will login into the admin side of my WP website, create a new page, and then choose the new ‘Rest’ template we just created.  Be sure and Save. Go to the front end, and you should see a new page that looks like your theme with just a heading of WP_Http (That is if you copied my code above. If you did not, then your page should be empty).

OK, now we are ready to get down to coding. So far we created a new template for our theme, created a new webpage and assigned this new template to the page. Displayed the new webpage in the front end that will be displaying our work.

We first need to code the Request part. I will be using the Github API.  For information on Github: Github

For more information on their APIs: Github API

We will be making a call using the Github API to get the names of my repositories I have on Github.

In order to do this example, you will need an account at Github. If you are one of those developers who keeps avoiding GIT and putting your code into repositories, maybe this tutorial will give you the push to start. OK, so after reading the Github API documentation, I will be using this Endpoint:

https://api.github.com/users/username/repos

Now time to start coding the request part:

$username = 'redsoxfan2499';
$url = 'https://api.github.com/users/'.$username.'/repos';
$request = wp_remote_get( $url );

if(is_wp_error($request)) {
	return false;
}

this code will be placed into my template page as such:

<main id="main" class="site-main" role="main">
	<?php if ( have_posts() ) : ?>
        
        	<?php /* Start the Loop */ ?>
        	<?php while ( have_posts() ) : the_post(); ?>
        
        	<?php
        		/** get page content **/
        		the_content();
        	?>
        
        	<?php endwhile; ?>
        
        	<?php endif; ?>
							
		<h3>WP_Http</h3>
		<p>This page is used for my WP HTTP API Tutorial.
			Check it out:   
		<a href="https://hyperdrivedesigns.com/simple-wp-http-api-tutorial/">WP HTTP API Tutorial</a>
		</p>
		<?php
			$username = 'redsoxfan2499';
			$url = 'https://api.github.com/users/'.$username.'/repos';
            $request = wp_remote_get( $url );
								
            if(is_wp_error($request)) 
            {
			    return false;
			}

			$body = wp_remote_retrieve_body($request);

			$data = json_decode($body);
								
			if(!empty($data)) {

				echo '<ul>';
				foreach( $data as $repo ) { 

					echo '<li>';
					echo $repo->name;
					echo '</li>';
				}
				echo '</ul>';
			}				
		?>
</main><!-- #main -->

$url is the Endpoint.
$username will be your username.

$request = wp_remote_get( $url );

$request: here we will use the WP HTTP API function wp_remote_get() and pass in our endpoint URL.

if(is_wp_error($request)) 
{
    return false;
}

Here we just do an error check, to make sure we have not hit an errors so far.

$body = wp_remote_retrieve_body($request);

$body: here we again use the WP HTTP API and use the wp_remote_retrieve_body function which produces only the body of the web services call response.

$data = json_decode($body);

$data: here we just use the php function json_decode so we can use the data in our php code. Time to check and see if we are successfully.

place the code below in your file after this line:

$data = json_decode($body);

This will basically dump out our json array, if we were successfully in connection to the API.

echo '<pre>';
print_r($data);
echo '</pre>';

I use the pre tags so it will print out the JSON array into a more readable formatted result.

you can just use this if you want:

print_r($data);

This section of code is just for testing. If you followed along you should see your array of information.

Now, either delete those lines of code or comment them out.

Now time to Parse our data.

if(!empty($data)) 
{
    echo '<ul>';
        foreach( $data as $repo ) 
        {
            echo '<li>';
              echo $repo->name;
            echo '</li>';
         }
    echo '</ul>';
}   

First we check and make sure that our $data array is not empty. If not then we start our list declaration.  Then using a foreach loop we loop through all instances of repositories that are in the array and print out the name of each repo, When complete, we close our list and exit.

Let’s break down our foreach loop. How did we come up with those names. Well $data is our array of data, and if you ran the print_r code you see how the data is arranged. The proper name is repositories. If we start to look down our array we can see that the proper name is name.

print-r-array

So we create the foreach loop as such:

foreach( $data as $repo ) 
{
     echo '<li>';
          echo $repo->name;
      echo '</li>';
}

So if we did everything correctly we now have a list of our Bitbucket repositories names. To see in real-time, check out the page here:

Demo Page

FINAL CODE:

<?php
/**
 * Template Name: Rest 
 *
 * This is the template that displays information from a web service.
 *
 * @package foundationwp
 */

get_header(); 
?>
	<div class="container">
        <div class="row">
        	<div id="primary" class="col-lg-12 col-md-12">
        		<main id="main" class="site-main" role="main">
							<?php if ( have_posts() ) : ?>
        
        			<?php /* Start the Loop */ ?>
        			<?php while ( have_posts() ) : the_post(); ?>
        
        				<?php
        				/** get page content **/
        				the_content();
        				?>
        
        			<?php endwhile; ?>
        
        		<?php endif; ?>
							
							<h3>WP_Http</h3>
							<p>
								This page is used for my WP HTTP API Tutorial.
								Check it out:   
								<a href="https://hyperdrivedesigns.com/simple-wp-http-api-tutorial/">
								WP HTTP API Tutorial
								</a>
							</p>
							<?php
								$username = 'redsoxfan2499';
								$url = 'https://api.github.com/users/'.$username.'/repos';
								$request = wp_remote_get( $url );
								if(is_wp_error($request)) {
									return false;
								}

								$body = wp_remote_retrieve_body($request);

								$data = json_decode($body);
								
								if(!empty($data)) {

									echo '<ul>';
									foreach( $data as $repo ) { 

										echo '<li>';
											echo $repo->name;
										echo '</li>';
									}
									echo '</ul>';
								}				
								?>
							<br/><br/>
							</main><!-- #main -->
        	</div><!-- #primary -->
				</div><!-- end row -->
    </div> <!-- .container -->
<?php get_footer(); ?>
Blog, PHP, Web Development, WordPress,
Angular Logo

Angular JS No BS Template for Beginners

Technology moves faster than we can keep up. Every week when I read some of my favorite web newsletters, it seems like there is a new JavaScript library. New JavaScript libraries are growing faster than my grass in the summertime. So I decide it was time to learn Angular JS. After spending many hours of reading and completing tutorials, it seems like almost every tutorial had multiple prerequisites before I could even get started. So before I could start learning Angular JS, I need to know some Node JS, Grunt, Bower, etc…  Man I just want to learn Angular. Well, after some more reading I figured out some things for beginners: You do not need to have all of these prerequisites. All you need is a web browser, editor and local development server. Since you will be coding html and javascript at first, there really is no need for a web server or local development server but I suggest a local development server anyway. Without using a server, just code your files in your editor and open up the file in a browser. This is just for beginners. The one key is in your code, you must be including the Angular JS library. After you start to learn more then you can jump into learning more advanced things and then these prerequisites will start to come into play. I even created a bare-bones Angular Template to get beginners started. This template gets rid of all the extra overhead needed for more advanced Angular development. This template is just for beginning to learn the bare basics of Angular. I call it ‘Angular JS No BS Template’. Feel free to grab it from the Github or BitBucket links below.

Github

Bitbucket

Blog, Web Development,
PHP Logo

Using PHP Tags In WordPress Screencast

Check out the new screen-cast titled Using PHP Tags in WordPress Screencast. Here I do a brief overview of the PHP WordPress Template Tags that are used in building WordPress themes. This screencast was created for Learnable. Learnable, is SitePoint’s sister website for learning web design/web development.

Watch Screencast

Blog, PHP, Web Design, Web Development, WordPress,
jQuery Ajax Logo

Super Simple Ajax jQuery PHP Tutorial

Here is another really super simple ajax jQuery php tutorial. This tutorial will attempt to help beginners understand the very basics of how to use Ajax to reload just a portion of your webpage instead of loading the complete page. So first what is Ajax? Ajax is an acronym which stands for Asynchronous JavaScript and XML. To put in very simple terms, it is a way for the user to request data from the server without having to reload the complete webpage. Ajax can be so smooth in displaying new changes in your webpage if done correctly. To begin, there is no one correct way to use Ajax. There are many different ways to use Ajax. Today, I will be using jQuery  ajax() function to request a PHP file.

OK. When I first started to learn Ajax and I would Google Ajax tutorial and from the results, I quickly realized that there are many different way to use Ajax. Can I say CONFUSION? Personally, i think that the jQuery ajax() function is one of the easiest to learn and use. There will be a link at the end of the tutorial for all of the source code. So you can follow along and copy the code or just download the source code.

Step 1. I am going to create a simple index.php file to markup our main webpage. Just a simple HTML 5 Document. Notice in the head of the document I am making a call to the jquery version which is hosted by jQuery. We need to make a call to the jQuery library in order to get access to the jQuery ajax function and to allow the jQuery code we write to run. You can write jQuery code but you need to either make a call to the jQuery library that is hosted on a CDN(Content Delivery Network) or download a copy of the jQuery library and place it in your website folder, usually in a folder called js or jscript. There are many different CDNs out there that host files for you to use.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Now I created a container in the body, then a H1 tag for a nice title. Next is the div which I gave an id of date-div. This is the div that will display the data from the php file that we will call in the jQuery ajax() function. So right now it is empty but will dynamically be changed upon a jQuery event. For the event, I created a button and attached an onclick function which will then call the getDateTime() function (we will create this function in the next step). Lastly, is the button which I attached the onclick event to call the getDateTime() function. So when the page loads the div will be empty so click the button and the jquery onclick event will call the getDateTime function which uses Ajax to request the PHP file that generates the current date and time in the American Central Timezone.
OK, here is the starting code for the index.php file:

<!doctype html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>Super Simple Ajax jQuery PHP Tutorial</title>
		<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        </head>
    <body>
		<div id="container">
			<h1>Ajax jQuery PHP Tutorial</h1>
			What is the current time and date in Central Time Zone:<br />
				<div id="date-div">
					<!-- this is where the ajax file call wiil be displayed in web browser -->
				</div>
				<br/>
			<input type="button" class="btn-primary" value="Get Date & Time" onclick="getDateTime();" />
		</div>
	</body>
</html>

Step 2. Being a web developer and designer, I always want to make the examples look pretty cool with some css styles and not just plain white background and black text. So lets get styling! For simplicity sake, the norm would be to create a css folder and then a css file and then call the css file from the index.php file. Since this is a very simple tutorial, I am going to place the css styles in the head of the index.php file. First lets get rid of that plain white background and black text and H1:

body {
    background: #ecf0f1;
	color: #2c3e50;
}
h1 {
	color: #2c3e50;
}

Next, lets give our container a width and center it on the page along with the date-div and its styles:

#container {
    margin: 0 auto;
	width: 400px;
}
#date-div {
	width: 400px;
	height: 250px;
	border: 3px solid #2c3e50;
	margin: 0 auto;
	margin-top: 20px;
}

Lastly, lets do not forget our button and our paragraph tags. Stop The Clock! Where did the paragraph tags come from. This tags will be in the PHP file which we have yet to get to. So don’t worry. You will see them in the PHP file when we code that file. I gave the paragraph tags a class called pdate.

.pdate {
    color: #2c3e50;
	font-size: 16px;
	font-weight: bold;
	margin-left: 10px;
}
.btn-primary {
	background-color: #428bca;
	border-color: #357ebd;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	padding: 6px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

OK. Enough styling. Lets get to this PHP file.

Step 3. Again keeping this as simple as possible, we will create a PHP file that will be using the PHP date function and with proper formatting we will display the date on one line and the time on the another line. I am calling this file: ajax.php. There is no AJAX code in this file, just PHP code so do not let the name confuse you. First I am using the PHP date_default_timezone_set function to set the timezone for the file. Next line, I am echoing out, or printing out the paragraph tags set with a class of pdate. HEY, there are those paragraph pdate tags we styled in the previous step. Then echo out a blank line for some spacing and then last line echo out the paragraph pdate tag again with the PHP date function using some different formatting to get the time. Here is a link to the PHP date function to research how to use the function and how to format it to the results you want.OK. Lets see the code now:

<?php
date_default_timezone_set('America/Chicago');
echo '<p class="pdate">The Date is ' . date("m/d/y") .' .</p>';
echo '<br/>';
echo '<p class="pdate">The Time is ' . date('g:i:s A') . ' .</p>';

That is it for the php file.

Step 4. Now it is time for the main event. Lets write our jQuery code using the ajax function to request the ajax.php file which will dynamically display the date and time in our date-div upon the user clicking the button. Again for simplicity sake, I will also placed this javascript code in the head of our index.php file. So I will show you the code and then try to explain it as beast as I can: And the survey says:

function getDateTime() {
    var request = $.ajax({
		url: "ajax.php",
		type: "GET",			
		dataType: "html"
	});

	request.done(function(msg) {
		$("#date-div").html(msg);			
	});
}

Lets break it down. We first name our function that will hold our ajax request. We call the function getDateTime(). This is the function that gets called when a user clicks the button on our index.php page. Inside the function, we create a variable called request which holds our ajax request. Then we start the jQuery ajax function, inside this function we have some parameters that we must give values to: url: this is the url for the file that we want to request, this could also be a file on another server, different folder, etc. Next is the type of request, we are using the GET request, and lastly is the dataType which will be returned as html. There are many more possible parameters. So here is a link to the jQuery Ajax function API documentation for more research. The last bit of code is when the request is done run the function msg which then displays the data from our ajax.php file and displays the date and time on the date-div. Click the button again and again and watch as just the time line will be changed inside our date-div and NOT the whole page reloading.

OK. Quick Summary. We have an index.php page which has our html 5 document code, including a date-div which will display our data, a button that will trigger our ajax function, our css styles and the jquery code that holds out ajax request. Our second file is a PHP file called ajax.php which uses the php date function to get the date and time in the American Central timezone. So when a user clicks the button, the button calls the getDateTime jQuery function we wrote which contains out ajax request, the ajax request, requests the our PHP file, gets the data from the PHP file and then displays the data in our date-div without reloading the whole page. I hope this tutorial helps someone just learning Ajax. Please feel free to leave any comments.

Here is the full code displayed:

index.php file

<!doctype html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>Super Simple Ajax jQuery PHP Tutorial</title>
		<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<style type="text/css">

			body {
				background: #ecf0f1;
				color: #2c3e50;
			}
			h1 {
				color: #2c3e50;
			}
			#container {
				margin: 0 auto;
				width: 400px;
			}
			#date-div {
				width: 400px;
				height: 250px;
				border: 3px solid #2c3e50;
				margin: 0 auto;
				margin-top: 20px;
			}
			.pdate {
				color: #2c3e50;
				font-size: 16px;
				font-weight: bold;
				margin-left: 10px;
			}
			.btn-primary {
				background-color: #428bca;
				border-color: #357ebd;
				color: #fff;
				cursor: pointer;
				border-radius: 4px;
				display: inline-block;
				font-size: 16px;
				font-weight: 400;
				padding: 6px 12px;
				text-align: center;
				vertical-align: middle;
				white-space: nowrap;
			}
		</style>
		<script>
	
	function getDateTime() {
		var request = $.ajax({
			url: "ajax.php",
			type: "GET",			
			dataType: "html"
		});

		request.done(function(msg) {
			$("#date-div").html(msg);			
		});

	}
</script>
	</head>
	<body>
		<div id="container">
			<h1>Ajax jQuery PHP Tutorial</h1>
			What is the current time and date in Central Time Zone:<br />
				<div id="date-div">
					<!-- this is where the ajax file call wiil be displayed in web browser -->
				</div>
				<br/>
			<input type="button" class="btn-primary" value="Get Date & Time" onclick="getDateTime();" />
		</div>
	</body>
</html>

ajax.php file

<?php
date_default_timezone_set('America/Chicago');
echo '<p class="pdate">The Date is ' . date("m/d/y") .' .</p>';
echo '<br/>';
echo '<p class="pdate">The Time is ' . date('g:i:s A') . ' .</p>';

Zipped Demo Source Files

Blog, PHP, Web Development,