| Web development blog, news and tutorials

Home > Monthly Archives: June 2012

Page 1

Create your own CRUD app with PHP & MySQL (Part 2)

PHP Jun 28, 2012 8 comments

Picking up from where we left off, we need to start by creating some HTML to display the data we’ve stored in the $results variable. You can always modify this to suite your project. I’ll be using a table structure.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link href="styles/theme.css" rel="stylesheet"/> <title>PHP & MySQL</title>\ </head> <body> <div id="wrapper"> <table> <thead> <th>Title</th> <th>Release Date</th> <th>Publisher</th> <th>System</th> <th>Rating</th> <th>Number Of Players</th> <th>Tools</th> </thead> <tbody> <?php foreach($results as $entry): ?> <tr> <td><?php echo $entry->title; ?></td> <td><?php echo $entry->release_date; ?></td> <td><?php echo $entry->publisher; ?></td> <td><?php...

Marty Lavender says: Your code had a lot of errors. All of which I have been able to fix on my own. I cannot however figure out how to resolve this...

New ‘Intent’ Tag to Facilitate Ease of Online Data Sharing

HTML HTML5 Jun 27, 2012 one comment

In the rapidly evolving arena of browser standards, among the newest additions is a tag that significantly facilitates the transfer and sharing of data between online applications and services.

The Google-originated ‘Web Intents’ API gives a user the ability to select an application to perform a specific action on a designated piece of data, such as an image, audio or video file, or text file.

Here’s how the feature works:

Say, for instance, a person wants to edit or share a photo that has been uploaded to a hosting service. The host may not possess an internal editing function, or be associated with an established third-party application.

However, by clicking on an Edit button, the user is able to choose a desired online editor to perform the job.

In its most basic form, the tag for an image edit looks like this:

An example of the accompanying client-side script is:

document.getElementById('edit-photo').onclick = function() { var intent = new Intent("http://webintents.org/edit", "text/uri-list;type=image/jpeg", getImageDataURI(...)); navigator.startActivity(intent, imageEdited); }; function imageEdited(data) { document.getElementById('image').src = data; }

After the photo has been edited, perhaps the user may want to share it via a desired social networking site, thusly:

document.getElementById('share-photo').onclick = function() { var intent = new Intent("http://webintents.org/share", "text/uri-list;type=image/jpeg", getPublicURIForImage(...)); navigator.startActivity(intent); };

In short, the developer of an image gallery can incorporate the options for users to both edit and share their pictures without having to separately design the features. Providing the user with the opportunity to choose a preferred service is the cherry on top of the ice cream.

The user-agent informs as to whether a given service is able to process Web Intents, and if so, the type of data that is permissible to be transferred.

On the page of the hypothetical image editing service, the coding would look like:

<html> <head> <title>Image Editor</title> </head> <body> <intent action="http://webintents.org/edit" type="text/uri-list;type=image/*,image/*"></intent>...

VirtualCableTV says: I consider Paul Kinlan et al. rank liars of ommission when he amongst others of his sleazy ilk claims in his blog he "anounced"...

5 WordPress Comments Section Hacks

PHP WordPress Jun 26, 2012 one comment

One thing that makes WordPress so dynamic is the ability for readers to easily post comments. This interaction between you and the readers is therefore an important element in your website and should be given the same attention as other sections of your website. So what can you do to improve the comments section on your WordPress website?

1. Removing HTML Links in User Comments

People, and especially bloggers, are always looking to promote themselves on other websites and no doubt will try to do that on yours as well. It can be a demanding and annoying task to have to go through each comment and remove links from them. By default, WordPress transforms URLs into clickable links, but you can add some piece of code to reverse this.

Navigate to the “function.php” file and add the code below:

function plc_comment_post( $incoming_comment ) { $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']); $incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] ); return( $incoming_comment ); } function plc_comment_display( $comment_to_display ) { $comment_to_display = str_replace( ''', "'", $comment_to_display ); return $comment_to_display; } add_filter('preprocess_comment', 'plc_comment_post', '', 1); add_filter('comment_text', 'plc_comment_display', '', 1); add_filter('comment_text_rss', 'plc_comment_display', '', 1); add_filter('comment_excerpt', 'plc_comment_display', '', 1);

The above code filters out links by replacing HTML characters with HTML entities.

2. Use Twitter Avatars in Comments Section

Twitter has revolutionized how website owners communicate with visitors. In addition, visitors find it much easier to add their comments when Twitter functionality has been added. The first thing you will need to do is download the plug-in from this link.

After installing the plug-in and activating it, open the “comments.php” file and locate the comments loops. Paste the entire code from the file inside the section below:

<?php twittar('45', 'default.png', '#e9e9e9', 'twitavatars', 1, 'G'); ?>

You can also adjust the values inside “twittar();” such as the avatar size, the URL to use when an avatar cannot be retrieved as well as the border color.

You can also leverage the Disqus plugin to add more functionality and features to the comments system.

3. Style Author Comments

If your blog posts attract a lot of user comments, it can be a little difficult for readers to find author comments and responses if you do not have the threaded comments feature. One of the best ways to highlight author comments is by styling them differently. To do this, locate the “comments.php” file and locate the loop below:

<?php...

David Gitonga says: You are welcome Daniel. The 'Comments' section can sometimes make or break a blog. Enhancing it will make it easier for people to...

Carrying Out Tasks in the Background with HTML5 Web Workers

HTML5 Jun 25, 2012 3 comments

HTML5 offers a range of improved options for executing JavaScript functions. With Web Workers, you can execute scripts in the background, so that intensive processing need not interfere with the main functionality of your page. Of course this is most useful for complex tasks, but in this tutorial we will demonstrate the basics of using Web Workers with your pages using a simple example.

At the moment the most recent versions of all major browsers, except Internet Explorer, support Web Workers – you can’t rely on them just yet.

Create a Page

Let’s get stuck in and create an HTML5 page using the following outline:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have our script section ready for the JavaScript code and will also create a separate script in which the Web Worker will run. Add the following elements to the body section of your page:

<input type="button" value="GO!" onclick="startWorking()"/> <input type="button" value="Stop" onclick="stopWorking()"/> <p>Here is your random word: <span id="random"></span></p>

Our Web Worker script is going to choose random words to display to the user at specified intervals. Notice that the two buttons for starting and stopping the Web Worker call different functions.

Start the Work

In the script section of your page head, add the outline of the function to start the Web Worker, as specified in your start button click listener:

//Web Worker variable var myWorker; //function to start the Web Worker function startWorking() { //function content here }

We declare the Worker variable outside the function so that we can refer to it in the stop function as well, which we will do later. Inside the “startWorking” function, first add the following checks to determine whether we have browser support:

//check for browser support if(typeof(Worker)!=="undefined") { //Web Worker is supported - call the script } else document.getElementById("random").innerHTML = "Oops! Your browser doesn't support this.";

We will add code inside the “if” statement to call the Web Worker script, with the “else” statement executing if support is not present, in which case we simply output an error message to the user. In the “if” statement block, add the following to instantiate the Web Worker:

//instantiate the Web Worker object if(typeof(myWorker)=="undefined") myWorker...

Dominik Werner says: Hum, I'm still searching for a way to prevent my js/html5-based experimental metronome from losing its beat when changing tabs....

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

Magnolia: 150+ Professional Infographic Elements - only $9!

Beautiful Solomon Font Family (12 fonts) - only $9!

3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!

5 Differences Between C# and Java: Objects and Classes

C# Java Jun 21, 2012 4 comments

One of the most important aspects of C-derived languages is object orientation. Objects and classes allow programs to specify methods and variables in one portion of code and use them again wherever necessary. While the basic structures of class construction remain consistent between C# and Java, some subtle differences my cause problems for developers unaccustomed to the idiosyncrasies between the two languages.

#1: Instance-level inner classes

C#: Work-around support Instance-level inner classes Java: Support for Instance-level inner classes An inner class (also called a “nested class”) is declared entirely inside another class or interface. Although both languages support inner classes at the Class level, only Java supports these inner classes at the instance level without the need to pass around the outer object instance. Java handles the instance-level inner class with an “outer this pointer”.

#2: Partial Classes

C#: Supports partial classes Java: No support for partial classes A “partial class” is a class whose methods and variables are parceled out into multiple files. When the files are compiled, the class reassembles itself into the full class definition. While the C# 2.0 compiler (and other OOP compilers) allows for class files to merge at compile time, the Java compiler does not. In Java, each class must be in its own specific source code file.

#3: Anonymous Classes

C#: Supports statement-level anonymous classes Java: Supports implicit anonymous classes An anonymous class is just that: a class without a name. Developers often define anonymous classes within a method to build simple delegate callback objects, such as those used in listener methods. Java treats anonymous classes as implicit, but C# code must defined the anonymous class at the statement level.

#4: Properties

C#: Supports properties Java: Does not support properties A property uses the tools of a method while holding a value like a variable:

// Declare a Name property of type string: public string Name { get { return myName; } set { myName = value; } }

Although other Java-related languages and toolsets (e.g. JavaBeans and JavaScript) support similar ways of defining a property, Java does not.

#5: Events

C#: Supports events Java: Work-around support for events An event is a way that a class can notify its clients that an action has occurred that affects some method or variable within the object. Although Java does not support the “event” keyword for this specific purpose, Java developers can create a class that has much of the same behavior as an event.

Honorable Mentions

Operator Overloading C#: Supports Java: Does not support According to the Java FAQ, Java does not support operator overloading “because C++ has proven by example that operator overloading makes code almost impossible to maintain”.

Indexers C#: Supports Java: Does not support Indexers allow class instances to be indexed and counted in ways similar to arrays for variables. Class instances in Java can still be indexed, but the “get” and “set” methods must be specified as variables.

Example: http://www.javacamp.org/javavscsharp/indexer.html

Conversions C#: Supports Java: Does not support C# allows both implicit and explicit conversions from one data type to another. Java requires that the user specifically state the conversion method.

...

Eric Lewis says: In my opinion, you should learn JavaScript (its actually UnityScript but thats not important) first because it is a simpler...

Designing Smartphone-Optimized Websites: Challenges Web Developers

CSS HTML Jun 20, 2012 7 comments

Web developers are increasingly being asked to build sites that cater to smartphone Internet users, or to recast existing sites into user-friendlier formats for mobile devices. By 2015, statistical research by eMarketer predicts that more than half of the persons who access the Web will do so through a smartphone or other small-screen device.

This paradigm shift represents a challenge to the established Web development community, which now has a mandate to configure Web content previously optimized for large personal computer and laptop screens into smaller mobile device space constraints.

Utilizing CSS and Javascript to create a more ‘mobile-friendly’ experience

Incorporating customized CSS coding is an effective way to adjust an existing site’s content to be more accessible for mobile users. To properly instruct a smartphone browser on how to display Web content, users should be directed to a mobile CSS stylesheet with the inclusion of the following code in the Head section:

The ‘handheld.css’ or ‘mobile.css’ file should contain all of the stylesheet parameters that will ensure an optimal viewing experience for a small screen device user.

Screen size adjustments Within a given mobile-tuned stylesheet, in order to maximize the content space for varying screen sizes, it is best to express widths by percentage:

#element { width: 100%; }

The above is known as a ‘fluid layout’ style in which CSS page element widths are expressed in a different way than by a set number of pixels.

Clutter reduction To reduce clutter, utilize the stylesheet to hide extraneous page elements for mobile viewers with coding such as:

#sidebar, #footer { display: none; }

Control image sizes To control the image sizes within a mobile device accessible area of a site, the following coding can be utilized:

#content img { max-width: 200px; }

Javascript solutions If a site owner chooses to build an entirely separate mobile site, or area of a site, a Javascript redirect code should be placed in the Head section:

The ‘handheld.html’ expression directs a mobile browser to the correct place, and could also be shown as “http://mobile.domain.com” if a ‘sub-domain’ approach is desired.

For a script tailored specifically for iPhones, utilize:

Other mobile device coding options to facilitate website accessibility

Because smartphone users frequently change the device viewing aspect from portrait to landscape, and vice versa, the <viewport> tag is an important page element.

This meta tag allows a mobile phone browser to seamlessly scale content between views. A typical coding arrangement would look something like:

Other tags specific to smartphone use include a measure that determines if all telephone numbers located on a Web page will appear as hypertext links, thus allowing for the initiation of a phone call by clicking on the number.

In HTML5, this is achieved through the <format-detection> tag:

Dave says: Thanks for your input, Phil. Designing for small-screen devices can be quite a challenge. In particular, graphics that render...

Creating A Web Page Calculator Using The HTML5 Output Element

HTML5 JavaScript Jun 19, 2012 3 comments

HTML5 includes a host of new input elements, such as the output tag. Using the output tag in conjunction with the “oninput” event listener, you can create simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results.

In this tutorial we will create a simple Web page calculator to demonstrate using the output element. Many of the new input elements are not well supported, but the output element is supported in all current major browsers except Internet Explorer. We will also be using the “oninput” event attribute, which is supported in all recent versions of the main browsers.

Create an HTML5 Page

Use the following outline to create your HTML5 page:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have sections for styling and scripting in the head, and our form elements will sit within the body.

Create a Form

Let’s create our form. Start with the outline:

Our opening form tag has an ID for identification in JavaScript and an “oninput” event listener attribute. The browser will call the specified function when the user alters the form input values.

Add two input elements for numbers inside your form element:

Leave a space between these as we are going to add a further element next. Notice that the two input elements have number types and names for identification in the script.

Let’s allow users to choose which operator they wish to use in their calculation. Add a select element between the two number input elements:

You can use the HTML entity references “×” and “÷” for your multiplication and division signs.

The select element offers addition, subtraction, multiplication and division. To make sure the output element is updated when the user chooses an option, as well as when they alter the number input values, we add the “onchange” event listener attribute, calling the same function we call from the form “oninput” attribute. We are using incrementing integers as the values for the select options, so that we can tailor what happens each time the calculation is performed, making sure the output reflects the operator chosen.

Add an equals sign in a dedicated element so that we can style it effectively, after the second number input:

Finally, let’s add our output element, after the equals sign element and still inside the form:

Notice that the element has a name for identification in the script and a default value to display. The “for” attribute indicates which input elements the output relates to, using their name attributes.

Perform the Calculation

Now we can implement the JavaScript function for calculating results. In the script section in your page head, add the following function outline:

function updateOutput() { //calculate...