Web Development: 4/6/14

Tuesday, April 8, 2014

Building a simple PHP shopping cart

One of the most common requirements any web designer/developer will come across is likely to be that of the small business taking its first steps online; a client with an established widget-selling company now wants to move into the national market and sell their widgets to the world.

What they need to do this (apart from a great-looking, functional, usable and accessible website!) is some sort of shopping-cart system to allow their customers to add, remove and update the products they wish to buy.

This article will walk through the simple steps to achieve this, using the server-side language PHP and a MySQL database.

Setting up the database

Let’s take as our example a bookseller. They are not the best-stocked bookseller in the world, having as they do only three titles in stock, but it is enough for our example. Let’s create the database and add some stock:

CREATE TABLE books (
id int(6) unsigned NOT NULL auto_increment,
title varchar(100) NOT NULL default '',
author varchar(100) NOT NULL default '',
price decimal(3,2) NOT NULL default '0.00',
PRIMARY KEY (id)
) TYPE=MyISAM;
INSERT INTO books VALUES (1, 'Where God Went Wrong', 'Oolon Colluphid', '24.99');
INSERT INTO books VALUES (2, 'Some More of God\'s Greatest Mistakes', 'Oolon Colluphid', '17.99');
INSERT INTO books VALUES (3, 'Who Is This God Person Anyway?', 'Oolon Colluphid', '14.99');
Download this code: /code/php-cart-1.txt

Now that step is out of the way, let’s create our shopping cart.

Identify our requirements

The cart we are going to build should be pretty familiar to most internet users. It will provide a means of displaying a message on every page of the site (along the lines of “You have 5 items in your shopping cart”), which when clicked will take the customer to a list of the items in the cart; each item may be removed or have its quantity updated.

As all of our stock details are stored in the database, the only piece of information that we need to store about each customer is the id of each product they have added to their cart. To do this, we are going to use PHP’s built-in session handling capabilities.

Using sessions in PHP

PHP’s session handling is very easy to understand.

To ‘switch it on’, simply add session_start(); at the top of your code; you can then store values (or arrays) in session variables:

$_SESSION['name'] = 'Matthew'; $_SESSION['age'] = 31;

These $_SESSION variables will now be available to any PHP scripts on other pages (as long as you’ve included the session_start(); call first).

A short note on cookies

The default behaviour of PHP sessions is to store the session ID (a long string of numbers and letters that identifies you to the server) as a cookie on your computer; however, even if you have cookies disabled this functionality will still work – PHP will instead append the session ID to each link on the site (in the form ‘mypage.php?PHPSESSID=’) so that it can continue to accurately track visitors from page to page.

Creating the cart

We will store the contents of the shopping cart as a comma-separated list of product ids in a session named (unsurprisingly) ‘cart’ – for example, a cart containing “1,1,3,1,2” has four items; three of product #1, and one each of products #2 and #3.

Firstly, let’s create the code to display the “You have X items…” message on every page:

function writeShoppingCart() {
$cart = $_SESSION['cart'];
if (!$cart) {
return '<p>You have no items in your shopping cart</p>';
} else {
// Parse the cart session variable
$items = explode(',',$cart);
$s = (count($items) > 1) ? 's':'';
return '<p>You have <a href="cart.php">'.count($items).' item'.$s.' in your shopping cart</a></p>';
}
}
Download this code: /code/php-cart-2.txt

This function first gets the value of the ‘cart’ session variable into a local variable, mainly to save on typing. If the cart is empty, we return an appropriate message; if not, we use the explode() function to create an array of all the products in the cart, and then count() them and display the result (the $s variable is there to make plurals display correctly).

Now we can display the correct message anywhere on the site:

echo writeShoppingCart();

I hope that made sense; let’s move on to displaying the contents of the cart itself.

Show me the money

The shopping cart page itself (cart.php) can be arrived at in a couple of ways. The user may have clicked on the link created by the writeShoppingCart() function above; or, they may have clicked an ‘Add to cart’ link on a product page.

If it was the latter, we need to intercept that click and update our cart contents before displaying the new list of products – simple enough, as all we need to do is append the id of the clicked product to the ‘cart’ session variable. Our product links are going to look like this:

<a href="cart.php?action=add&id=1">Add to cart</a>

Don’t worry about the ‘action=add’ bit, we’ll get to that later. The id can now be extracted from $_GET[‘id’] and added to our cart:

$cart = $_SESSION['cart'];
if ($cart) {
$cart .= ','.$_GET['id'];
} else {
$cart = $_GET['id'];
}
$_SESSION['cart'] = $cart;
Download this code: /code/php-cart-3.txt

Now, on to the contents of our cart!

Multiple items, one product

As in our example above, it is entirely possible that a customer might have more than one of a certain product in their cart. As we don’t want to list duplicate items when we display the contents, we need to figure out a way to combine any of the same product into one entry (with a corresponding quantity attached).

$cart = $_SESSION['cart'];
if ($cart) {
$items = explode(',',$cart);
$contents = array();
foreach ($items as $item) {
$contents[$item] = (isset($contents[$item])) ? $contents[$item] + 1 : 1;
}
Download this code: /code/php-cart-4.txt

This time, after exploding the list of product ids, we have iterated through them to create a new array named$contents, which consists of key=>value pairs where the key is the product id and the value is the quantity of that product in the shopping cart. So to take our example above, a cart containing “1,1,3,1,2” would become an array where ‘1’=>3, ‘2’=>1, ‘3’=>1.

Now that we have an accurate count of unique products, let’s query the product database for each one and output its details into a table:

$total = 0;
$output[] = '<table>';
foreach ($contents as $id=>$qty) {
$sql = 'SELECT * FROM books WHERE id = '.$id;
$result = $db->query($sql);
$row = $result->fetch();
extract($row);
$output[] = '<tr>';
$output[] = '<td><a href="cart.php?action=delete&id='.$id.'" class="r">Remove</a></td>';
$output[] = '<td>'.$title.' by '.$author.'</td>';
$output[] = '<td>£'.$price.'</td>';
$output[] = '<td><input type="text" name="qty'.$id.'" value="'.$qty.'" size="3" maxlength="3" /></td>';
$output[] = '<td>£'.($price * $qty).'</td>';
$total += $price * $qty;
$output[] = '</tr>';
}
$output[] = '</table>';
$output[] = '<p>Grand total: £'.$total.'</p>';
Download this code: /code/php-cart-5.txt

(*Note*: I’m using a PHP class to handle my database connections, so your code may need to be slightly different).

Pretty simple stuff – we iterate through the new $contents array and query the database for each product id. Then we output the relevant details for each product; title, author and price, and at the bottom we show the grand total for the order. For each item, we’ve also included a link to remove the item from the cart, a textbox containing the current quantity of that item, and a total price (obviously this will only differ from the base price if the quantity is not 1).

The reason I’m using $output[] = ... is that I am buffering the output into an array to print to the screen later.

So far so good – now how about removing products from the cart?

Deleting a product

As shown above, the link to delete a product from the cart follows the same format as the ‘add a product’ link:

<a href="cart.php?action=delete&id=1">Remove</a>

Let’s expand on the code from earlier by adding a switch() statement to handle the different things that might happen to our cart:

$cart = $_SESSION['cart'];
$action = $_GET['action'];
switch ($action) {
case 'add':
if ($cart) {
$cart .= ','.$_GET['id'];
} else {
$cart = $_GET['id'];
}
break;
case 'delete':
if ($cart) {
$items = explode(',',$cart);
$newcart = '';
foreach ($items as $item) {
if ($_GET['id'] != $item) {
if ($newcart != '') {
$newcart .= ','.$item;
} else {
$newcart = $item;
}
}
}
$cart = $newcart;
}
break;
}
$_SESSION['cart'] = $cart;
Download this code: /code/php-cart-6.txt

The new ‘delete’ case iterates through the ‘cart’ session, looking for any product ids that AREN’T the one we’re deleting, and adding them to a temporary variable called $newcart. When it’s finished, it puts the revised cart contents back into $cart.

Updating a product

Lastly, we are going to allow customers to update the contents of their shopping cart by manually changing the value in the quantity box for each product.

To make this work, we’ll wrap the shopping cart table in a <form> so that the ‘update cart’ button will submit the form:

$output[] = '<form action="cart.php?action=update" method="post" id="cart">';
$output[] = '<table>';
foreach ($contents as $id=>$qty) {
$sql = 'SELECT * FROM books WHERE id = '.$id;
$result = $db->query($sql);
$row = $result->fetch();
extract($row);
$output[] = '<tr>';
$output[] = '<td><a href="cart.php?action=delete&id='.$id.'" class="r">Remove</a></td>';
$output[] = '<td>'.$title.' by '.$author.'</td>';
$output[] = '<td>£'.$price.'</td>';
$output[] = '<td><input type="text" name="qty'.$id.'" value="'.$qty.'" size="3" maxlength="3" /></td>';
$output[] = '<td>£'.($price * $qty).'</td>';
$total += $price * $qty;
$output[] = '</tr>';
}
$output[] = '</table>';
$output[] = '<p>Grand total: £'.$total.'</p>';
$output[] = '<div><button type="submit">Update cart</button></div>';
$output[] = '</form>';
Download this code: /code/php-cart-7.txt

Note that, even though the form uses the POST method, its action includes a GET variable, “action=update”. Again, we can expand our previous code to process any quantity updates:

case 'update':
if ($cart) {
$newcart = '';
foreach ($_POST as $key=>$value) {
if (stristr($key,'qty')) {
$id = str_replace('qty','',$key);
$items = ($newcart != '') ? explode(',',$newcart) : explode(',',$cart);
$newcart = '';
foreach ($items as $item) {
if ($id != $item) {
if ($newcart != '') {
$newcart .= ','.$item;
} else {
$newcart = $item;
}
}
}
for ($i=1;$i<=$value;$i++) {
if ($newcart != '') {
$newcart .= ','.$id;
} else {
$newcart = $id;
}
}
}
}
}
$cart = $newcart;
break;
Download this code: /code/php-cart-8.txt

This looks quite complicated, but it’s fairly straightforward; we interrogate the contents of the $_POST array (which holds all our quantity values) and extract the relevant id and value pairs. For each product, we then delete all the existing instances of it, and re-insert the new quantity.

There are a number of ways this could have been done – for example, by counting the existing number of each product present in the cart and figuring out whether we needed to add or remove items – but this seemed the easiest way to process the quantity updates.

Summary

And that’s about it! A functional and easy shopping cart script – here’s the final function to display the contents of the cart:

function showCart() {
$cart = $_SESSION['cart'];
if ($cart) {
$items = explode(',',$cart);
$contents = array();
foreach ($items as $item) {
$contents[$item] = (isset($contents[$item])) ? $contents[$item] + 1 : 1;
}
$output[] = '<form action="cart.php?action=update" method="post" id="cart">';
$output[] = '<table>';
foreach ($contents as $id=>$qty) {
$sql = 'SELECT * FROM books WHERE id = '.$id;
$result = $db->query($sql);
$row = $result->fetch();
extract($row);
$output[] = '<tr>';
$output[] = '<td><a href="cart.php?action=delete&id='.$id.'" class="r">Remove</a></td>';
$output[] = '<td>'.$title.' by '.$author.'</td>';
$output[] = '<td>£'.$price.'</td>';
$output[] = '<td><input type="text" name="qty'.$id.'" value="'.$qty.'" size="3" maxlength="3" /></td>';
$output[] = '<td>£'.($price * $qty).'</td>';
$total += $price * $qty;
$output[] = '</tr>';
}
$output[] = '</table>';
$output[] = '<p>Grand total: £'.$total.'</p>';
$output[] = '<div><button type="submit">Update cart</button></div>';
$output[] = '</form>';
} else {
$output[] = '<p>You shopping cart is empty.</p>';
}
return join('',$output);
}
Download this code: /code/php-cart-9.txt

Note that if the cart is empty, a suitable message is displayed.

Please feel free to download a .zip of all the files

This Article is Taken From: http://v3.thewatchmakerproject.com/journal/276/building-a-simple-php-shopping-cart

Display Subcategories on Category Pages in WordPress

When using WordPress as a CMS, or even as a blog you might want to display subcategories on category pages. There is really no easy way to do this and some ways that are out there on the web has various bugs. In this article we will show you how you can display subcategories on category pages using this hack.

Now the hack shared on Yoast’s blog is outdated and has bugs. The bug is that even though it shows the subcategories on the category page, but when you go inside the subcategory, it does not show any category. With the hack we are sharing it will show subcategories on the parent category pages, and when you click on the subcategories, you will still see other sibling categories in the parent category.

Ok if the above terminology did not make sense to you let us explain in another way. Lets say you have a top level (parent) category called Sports. You have three subcategories under sports called NFL, NBA, and MLB. Now when someone arrive to your homepage, you will only see Sports category and other top level parent categories. When someone clicks on Sports, the categories will now show only the subcategories under Sports, so it will be NFL, NBA, and MLB. Now with Yoast’s hack if you click on NFL, everything will be gone. With our hack when you click on NFL, it will still show NFL, NBA, and MLB.

So basically this hack is allowing you to List subcategories if viewing a Category, and brothers / sibling categories if in subcategory.

<?php
if (is_category()) {
$this_category = get_category($cat);
}
?>
<?php
if($this_category->category_parent)
$this_category = wp_list_categories('orderby=id&show_count=0
&title_li=&use_desc_for_title=1&child_of='.$this_category->category_parent.
"&echo=0"); else
$this_category = wp_list_categories('orderby=id&depth=1&show_count=0
&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID.
"&echo=0");
if ($this_category) {
?>
<ul>
<?php echo $this_category; ?>
</ul>
<?php } ?>


Paste the above code wherever you like the categories to display and modify it however you please. The code listed above, when you visit the subcategory from the main category, hides the main category and only shows the subcategories.

If you want to show the main category also on subcategory pages, just remove the parameter depth=”1″ from the code above.

This is a very useful and handy category hack when it comes to designing templates for WordPress specially when using WordPress as a CMS.

For further details on parameters refer to WordPress Codex.

This Article is taken from: http://www.wpbeginner.com/wp-tutorials/display-subcategories-on-category-pages-in-wordpress/

Monday, April 7, 2014

The Components of a Wordpress Theme

As I'm sure you're probably aware, themes are made up of many different files, each of which play their respective part in the displaying or functionality of a theme. Let's have a look at some of the most common files WordPress recognizes by default that we'll be dealing with. Most files are self explanatory by their name alone:

header.php

Usually this file contains our theme up until </head>, it also plays home to the wp_head() function, which is one of the most essential hooks in WordPress.

sidebar.php

An optional file called by the use of get_sidebar(), you can use this file for a sidebar, navigation or anything similar. This is also where you will usually include the code to allow widgets to run, if your theme allows them.

footer.php

An easy part to guess, this is where the theme wraps up and also where you can register a second area for widgets to display. Of course you can display widgets anywhere you want, but sidebar and footer are the most common.

page.php

Used to display a single page - not to be confused with a post.

single.php

The post file, used to display a single blog post but very similar to page.php in code.

index.php

As you can probably guess, index does the chunk of the work for a blog; displaying posts, search results, serving up error messages and so on.

functions.php

The functions file may be new to you. This is where theme specific functions are stored - most commonly the functions to register widget ready areas.

comments.php

Displays a loop similar to index.php which iterates through comments. This is also where trackbacks, nested comments and other related functionality is performed.

A theme can use as many or as few theme files as desired, but these are the files most common to almost every theme. Theme file structure is essentially the decision of the theme developer - for example there could be vimeo.php, youtube.php and audio.php that display their respective post types rather than having all of the code bundled in to one page.php or single.php.

How to Properly Add JavaScripts and Styles in WordPress

Recently we did a code review for a plugin one of our users wrote. The plugin worked fine, but the developer wasn’t following the best practices on loading external JavaScript. WordPress has an enqueue system to add external scripts and styles which helps prevent plugin conflicts. Since most users run more than one plugin on their site, it is always good for developers to follow the best practice. In this article, we will show you how to properly add JavaScripts and styles in WordPress. This will be particularly useful for those who are just starting to learn WordPress theme and plugin development.

The Mistake

WordPress have a wp_head function that allows you to load anything in the head section of the site. For those who don’t know better, they simply add their scripts by using a code like this:

<?php

add_action('wp_head', 'wpb_bad_script');

function wpb_bad_script() {

echo 'jQuery goes here';

}

While the above code is an easy way, it is the wrong way of adding scripts in WordPress. For example, if you load jQuery manually and another plugin that also uses jQuery loads it through the proper way, then you have jQuery being loaded twice. It is also possible that the two are different versions which can also cause conflicts.

Let’s look at the right way of doing this.

Why Enqueue Scripts in WordPress?

WordPress has a strong developer community. Thousands of people around the world design themes and write plugins for WordPress. To make sure that everything works properly and no one is stepping on another’s toe, WordPress has an enqueue script function. This function provides a systematic way of loading JavaScripts and styles. By using wp_enqueue_script function, you tell WordPress when to load a script, where to load it, and what are it’s dependencies.

This allows everyone to utilize the built-in JavaScript libraries that comes bundled with WordPress rather than loading the same third-party script multiple times. It also helps reduce page load time and avoid conflicts with other themes and plugins.

How to Properly Enqueue Scripts in WordPress

Loading the scripts properly in WordPress is very easy. Below is an example code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress.

<?php

 function wpb_adding_scripts() {

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

?>

Explanation:

We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:

§ $handle – Handle is the unique name of your script. Ours is called “my_amazing_script”

§ $src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.

§ $deps – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.

§ $ver – This is the version number of our script. This parameter is not required.

§ $in_footer – We want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, then you would say false.

After providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen.

Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows others the site owner to deregister your script if they want to without modifying the core code of your plugin.

How to Properly Enqueue Styles

Just like scripts, you can also enqueue your stylesheets. Look at the example below:

<?php

function wpb_adding_styles() {

wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

wp_enqueue_script('my_stylesheet');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );

Notice that we have used wp_enqueue_scripts action hook for both styles and scripts. Despite the name, this function works for both.

In the examples above we have used plugins_url to point to the location of the script or style we wanted to enqueue. However, if you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. If you are working with a child theme, then useget_stylesheet_directory_uri(). Below is an example code:

<?php

function wpb_adding_scripts() {

wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

We hope this article helped you learn how to properly add JavaScripts and stylesheets in your WordPress themes and plugins.

Additional Resources:

Web Development

Tuesday, April 8, 2014

Building a simple PHP shopping cart

Setting up the database

Identify our requirements

Using sessions in PHP

A short note on cookies

Creating the cart

Show me the money

Multiple items, one product

Deleting a product

Updating a product

Summary

Display Subcategories on Category Pages in WordPress

Monday, April 7, 2014

The Components of a Wordpress Theme

header.php

sidebar.php

footer.php

page.php

single.php

index.php

functions.php

comments.php

How to Properly Add JavaScripts and Styles in WordPress

Why Enqueue Scripts in WordPress?

How to Properly Enqueue Scripts in WordPress

How to Properly Enqueue Styles

How to backup and download Database using PHP

Followers