https://pinboard.in/u:anu/public/ recent bookmarks from anu (from google) 2011-10-31T13:00:20+00:00 http://www.wptavern.com/?p=5751 anu https://pinboard.in/u:anu/b:9e59a0a1a7f9/ 2011-10-29T03:02:03+00:00 http://wordpress.tv/?p=7191 anu https://pinboard.in/u:anu/b:4aae8f252b62/ 2011-10-26T15:19:06+00:00 http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/automated-web-testing-with-selenium anu https://pinboard.in/u:anu/b:f22fef9bc991/ 2011-10-23T03:15:17+00:00 http://wordpress.tv/?p=7039 anu https://pinboard.in/u:anu/b:ffaafc000e36/ 2011-10-21T20:15:07+00:00 http://worrydream.com/Tangle/ anu https://pinboard.in/u:anu/b:31b750bdebd3/ 2011-10-21T12:20:21+00:00 http://www.pbs.org/idealab/2011/10/no-internet-no-problem-use-sms-radio-software-and-creativity290.html anu Technology data engagement media mobile poll sms software visualisation https://pinboard.in/u:anu/b:775ed36f002f/ 2011-10-12T16:06:40+00:00 http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/ anu https://pinboard.in/u:anu/b:2b5af45fdbd6/ 2011-10-04T08:41:58+00:00 http://www.woothemes.com/2011/10/woothemes-at-wordcamp-cape-town/ anu https://pinboard.in/u:anu/b:1f901d368f23/ 2011-09-30T11:16:19+00:00 http://www.smashingmagazine.com/2011/09/30/wordpress-essentials-how-to-create-a-wordpress-plugin/ anu Of all this information, only the plugin’s name is required. But if you intend to distribute your plugin, you should add as much data as possible. With that out of the way, you can go into the back end to activate your plugin. That’s all there is to it! Of course, this plugin doesn’t do anything; but strictly speaking, it is an active, functioning plugin. Structuring PlugIns When creating complex functionality, splitting your plugin into multiple files and folders might be easier. The choice is yours, but following a few good tips will make your life easier. If your plugin focuses on one main class, put that class in the main plugin file, and add one or more separate files for other functionality. If your plugin enhances WordPress’ back end with custom controls, you can create the usual CSS and JavaScript folders to store the appropriate files. Generally, aim for a balance between layout structure, usability and minimalism. Split your plugin into multiple files as necessary, but don’t go overboard. I find it useful to look at the structure of popular plugins such as WP-PageNavi and Akismet. Naming Your PlugIn And Its Functions When creating a plugin, exercise caution in naming the functions, classes and plugin itself. If your plugin is for generating awesome excerpts, then calling it “excerpts” and calling its main function “the_excerpt” might seem logical. But these names are far too generic and might clash with other plugins that have similar functionality with similar names. The most common solution is to use unique prefixes. You could use “acme_excerpt,” for example, or anything else that has a low likelihood of matching someone else’s naming scheme. Plugin Safety If you plan to distribute your plugin, then security is of utmost importance, because now you are fiddling with other people’s websites, not just your own. All of the security measures you should take merit their own article, so keep an eye out for an upcoming piece on how to secure your plugin. For now, let’s just look at the theory in a nutshell; you can worry about implementation once you grasp that. The safety of your plugin usually depends on the stability of its two legs. One leg makes sure that the plugin does not help spread naughty data. Guarding against this entails filtering the user’s input, escaping queries to protect against SQL injection attacks and so on. The second leg makes sure that the user has the authority and intention to perform a given action. This basically means that only users with the authority to delete data (such as administrators) should be able to do it. Guarding intention ensures that visitors aren’t misled by a hacker who has managed to place a malicious link on your website. All of this is much easier to do than you might think, because WordPress gives you many functions to handle it. A number of other issues and best practices are involved, however, so we’ll cover those in a future article. There is plenty to learn and do until then; if you’re just starting out, don’t worry about all that for now. Cleaning Up After Yourself Many plugins are guilty of leaving a lot of unnecessary data lying around. Data that only your plugin uses (such as meta data for posts or comments, database tables, etc.) can wind up as dead weight if the plugin doesn’t clean up after itself. WordPress offers three great hooks to help you take care of this: register_activation_hook() This hook allows you to create a function that runs when your plugin is activated. It takes the path to your main plugin file as the first argument, and the function that you want to run as the second argument. You can use this to check the version of your plugin, do some upgrades between versions, check for the correct PHP version and so on. register_deactivation_hook() The name says it all. This function works like its counterpart above, but it runs whenever your plugin is deactivated. I suggest using the next function when deleting data; use this one just for general housekeeping. register_uninstall_hook() This function runs when the website administrator deletes your plugin in WordPress’ back end. This is a great way to remove data that has been lying around, such as database tables, settings and what not. A drawback to this method is that the plugin needs to be able to run for it to work; so, if your plugin cannot uninstall in this way, you can create an uninstall.php file. Check out this function’s documentation for more information. If your plugin tracks the popularity of content, then deleting the tracked data when the user deletes the plugin might not be wise. In this case, at least point the user to the location in the back end where they can find the plugin’s data, or give them the option to delete the data on the plugin’s settings page before deleting the plugin itself. The net result of all our effort is that a user should be able to install your plugin, use it for 10 years and then delete it without leaving a trace on the website, in the database or in the file structure. Documentation And Coding Standards If you are developing for a big community, then documenting your code is considered good manners (and good business). The conventions for this are fairly well established — phpDocumentor is one example. But as long as your code is clean and has some documentation, you should be fine. I document code for my own benefit as well, because I barely remember what I did yesterday, much less the purpose of functions that I wrote months back. By documenting code, you force good practices on yourself. And if you start working on a team or if your code becomes popular, then documentation will be an inevitable part of your life, so you might as well start now. While not quite as important as documentation, following coding standards is a good idea if you want your code to comply with WordPress’ guidelines. Putting It Into Practice All work and no play makes Jack a dull boy, so let’s do something with all of this knowledge that we’ve just acquired. To demonstrate, let’s build a quick plugin that tracks the popularity of our articles by storing how many times each post has been viewed. I will be using hooks, which we’ll cover in an upcoming installment in this series. Until then, as long as you grasp the logic behind them, all is well; you will understand hooks and plugins before long! Planning Ahead Before writing any code, let’s think ahead and try to determine the functions that our plugin will need. Here’s what I’ve come up with: A function that registers a view every time an individual post is shown, A function that enables us to retrieve the raw number of views, A function that enables us to show the number of views to the user, A function that retrieves a list of posts based on their view count. Preparing Our Function The first step is to create the folder and file structure. Putting all of this into one file will be fine, so let’s go to the plugins folder and create a new folder named awesomely_popular. In this folder, create a file named awesomely_popular.php. Open your new file, and paste some meta data at the top, something like this: Recording Post Views Without delving too deep, WordPress hooks enable you to (among other things) fire off one of your functions whenever another WordPress function runs. So, if we can find a function that runs whenever an individual post is viewed, we are all set; all we would need to do is write our own function that records the number of views and hook it in. Before we get to that, though, let’s write the new function itself. Here is the code: /** * Adds a view to the post being viewed * * Finds the current views of a post and adds one to it by updating * the postmeta. The meta key used is "awepop_views". * * @global object $post The post object * @return integer $new_views The number of views the post has * */ function awepop_add_view() { if(is_single()) { global $post; $current_views = get_post_meta($post->ID, "awepop_views", true); if(!isset($current_views) OR empty($current_views) OR !is_numeric($current_views) ) { $current_views = 0; } $new_views = $current_views + 1; update_post_meta($post->ID, "awepop_views", $new_views); return $new_views; } } As you can see, I have added phpDocumentor-style documentation to the top of the function, and this is a pretty good indication of what to expect from this convention. First of all, using a conditional tag, we determine whether the user is viewing a post on a dedicated page. If the user is on a dedicated page, we pull in the $post object, which contains data about the post being shown (ID, title, posting date, comment count, etc.). We then retrieve the number of views that the post has already gotten. We will add 1 to this and then overwrite the orignal value with the new one. In case something goes wrong, we first check whether the current view count is what it should be. The current view count must be set; it cannot be empty. And it must be numeric in order for us to be able to add 1 to it. If it does not meet these criteria, then we could safely bet that the current view count is 0. Next, we add 1 to it and save it to the database. Finally, we return the number of views that the post has gotten, together with this latest number. So far, so good. But this function is never called, so it won’t actually be used. This is where hooks come in. You could go into your theme’s files and call the function manually from there. But then you would lose that functionality if you ever changed the theme, thus defeating the entire purpose. A hook, named wp_head, that runs just before the tag is present in most themes, so we can just set our function to run whenever wp_head runs, like so: add_action("wp_head", "awepop_add_view"); That’s all there is to the “mysticism” of hooks. We are basically saying, whenever wp_head runs, also execute the awepop_add_view function. You can place the code before or after the function itself. Retrieving and Showing the Views In the function above, I already use the WordPress get_post_meta() function to retrieve the views, so writing a separate function for this might seem a bit redundant. In this case, it might well be redundant, but it promotes some object-oriented thinking, and it gives us greater flexibility when further developing the plugin. Let’s take a look: /** * Retrieve the number of views for a post * * Finds the current views for a post, returning 0 if there are none * * @global object $post The post object * @return integer $current_views The number of views the post has * */ function awepop_get_view_count() { global $post; $current_views = get_post_meta($post->ID, "awepop_views", true); if(!isset($current_views) OR empty($current_views) OR !is_numeric($current_views) ) { $current_views = 0; } return $current_views; } This is the same piece of code that we used in the awepop_add_view() function, so you could just use this to retrieve the view count there as well. This is handy, because if you decide to handle the 0 case differently, you only need to change it here. You will also be able to extend this easily and provide support for cases when we are not in the loop (i.e. when the $post object is not available). So far, we have just retrieved the view count. Now, let’s show it. You might be thinking this is daft — all we need is echo awepop_get_view_count() . "views", no? That would certainly work, but what if there is only 1 view. In this case, we would need to use the singular “view.” You might also want the freedom to add some leading text or some other tidbit, which would be difficult to do otherwise. So, to allow for these scenarios, let’s write another simple function: /** * Shows the number of views for a post * * Finds the current views of a post and displays it together with some optional text * * @global object $post The post object * @uses awepop_get_view_count() * * @param string $singular The singular term for the text * @param string $plural The plural term for the text * @param string $before Text to place before the counter * * @return string $views_text The views display * */ function awepop_show_views($singular = "view", $plural = "views", $before = "This post has: ") { global $post; $current_views = awepop_get_view_count(); $views_text = $before . $current_views . " "; if ($current_views == 1) { $views_text .= $singular; } else { $views_text .= $plural; } echo $views_text; } Show a List of Posts Based on Views To show a list of posts based on view count, we create a function that we can place anywhere in our theme. The function will use a custom query and loop through the results, displaying a simple list of titles. The code is below, and the explanation follows. /** * Displays a list of posts ordered by popularity * * Shows a simple list of post titles ordered by their view count * * @param integer $post_count The number of posts to show * */ function awepop_popularity_list($post_count = 10) { $args = array( "posts_per_page" => 10, "post_type" => "post", "post_status" => "publish", "meta_key" => "awepop_views", "orderby" => "meta_value_num", "order" => "DESC" ); $awepop_list = new WP_Query($args); if($awepop_list->have_posts()) { echo " "; } while ( $awepop_list->have_posts() ) : $awepop_list->the_post(); echo " ".the_title('', '', false)." "; endwhile; if($awepop_list->have_posts()) { echo " "; } } We start by passing a bunch of parameters to the WP_Query class, in order to create a new object that contains some posts. This class will do the heavy lifting for us: it finds 10 published posts that have awepop_views in the meta table, and orders them according to this property in descending order. If posts meet this criterion, we create an unordered list element. Then, we loop through all of the posts that we have retrieved, showing each title as a link to the relevant post. We cap things off by adding a closing tag to the list when there are posts to show. Placing the awepop_popularity_list() function anywhere in your theme should now generate a simple list of posts ordered by popularity. As an added precaution, place the call to this function in your theme, like so: if (function_exists("awepop_popularity_list")) { awepop_popularity_list(); } This ensures that if the plugin is disabled (and thus the function becomes undefined), PHP won’t throw a big ol’ error. It just won’t show the list of most popular posts. Overview By following the theory laid down in this article and using only a handful of functions, we have created a rudimentary plugin to track our most popular posts. It could be vastly improved, but it shows the basics of using plugins perfectly well. Moreover, by learning some patterns of WordPress development (plugins, hooks, etc.), you are gaining skills that will serve you in non-WordPress environments as well. You should now be able to confidently follow tutorials that start with “First, create a WordPress plugin…” You now understand things not just on a need-to-know basis, but at a deeper level, which gives you more flexibility and power when coding your own plugins. Stay tuned for the upcoming article on hooks, actions and filters for an even more in-depth resource on the innards of plugins. (al) © Daniel Pataki for Smashing Magazine, 2011. ]]> Developer's_Toolbox https://pinboard.in/u:anu/b:9544003bd95d/ 2011-09-26T12:34:58+00:00 https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4&pli=1 anu https://pinboard.in/u:anu/b:2cc485d282cf/ 2011-09-26T12:34:53+00:00 http://objology.blogspot.com/2011/09/one-of-best-bits-of-programming-advice.html?spref=tw anu https://pinboard.in/u:anu/b:d606f5b65c11/ 2011-09-26T12:34:51+00:00 http://www.wired.com/autopia/2011/09/787-flight-training/ anu https://pinboard.in/u:anu/b:fe663e62c7cb/ 2011-09-22T08:13:21+00:00 http://www.smashingmagazine.com/2011/09/22/wordpress-essentials-interacting-with-the-wordpress-database/ anuget_results("SELECT ID, post_title FROM wp_posts WHERE post_status = 'publish' AND post_type='post' ORDER BY comment_count DESC LIMIT 0,4") ?> As you can see, this is a basic SQL query, with some PHP wrapped around it. The $wpdb class contains a method (a method is a special name for functions that are inside classes), named get_results(), which will not only fetch your results but put them in a convenient object. You might have noticed that, instead of using wp_posts for the table’s name, I have used $wpdb->posts, which is a helper to access your core WordPress tables. More on why to use these later. The $results object now contains your data in the following format: Array ( [0] => stdClass Object ( [ID] => 6 [post_title] => The Male Angler Fish Gets Completely Screwed ) [1] => stdClass Object ( [ID] => 25 [post_title] => 10 Truly Amazing Icon Sets From Germany ) [2] => stdClass Object ( [ID] => 37 [post_title] => Elderberry Is Awesome ) [3] => stdClass Object ( [ID] => 60 [post_title] => Gathering Resources and Inspiration With Evernote ) ) Retrieving Results From The Database If you want to retrieve some information from the database, you can use one of four helper functions to structure the data. get_results() This is the function that we looked at earlier. It is best for when you need two-dimensional data (multiple rows and columns). It converts the data into an array that contains separate objects for each row. get_results("SELECT ID, post_title FROM wp_posts WHERE post_status = 'future' AND post_type='post' ORDER BY post_date ASC LIMIT 0,4") // Echo the title of the first scheduled post echo $posts[0]->post_title; ?> get_row When you need to find only one particular row in the database (for example, the post with the most comments), you can use get_row(). It pulls the data into a one-dimensional object. get_row("SELECT ID, post_title FROM wp_posts WHERE post_status = 'publish' AND post_type='post' ORDER BY comment_count DESC LIMIT 0,1") // Echo the title of the most commented post echo $posts->post_title; ?> get_col This method is much the same as get_row(), but instead of grabbing a single row of results, it gets a single column. This is helpful if you would like to retrieve the IDs of only the top 10 most commented posts. Like get_row(), it stores your results in a one-dimensional object. get_col("SELECT ID FROM wp_posts WHERE post_status = 'publish' AND post_type='post' ORDER BY comment_count DESC LIMIT 0,10") // Echo the ID of the 4th most commented post echo $posts[3]->ID; ?> get_var In many cases, you will need only one value from the database; for example, the email address of one of your users. In this case, you can use get_var to retrieve it as a simple value. The value’s data type will be the same as its type in the database (i.e. integers will be integers, strings will be strings). get_var("SELECT user_email FROM wp_users WHERE user_login = 'danielpataki' ") // Echo the user's email address echo $email; ?> Inserting Into The Database To perform an insert, we can use the insert method: $wpdb->insert( $table, $data, $format); This method takes three arguments. The first specifies the name of the table into which you are inserting the data. The second argument is an array that contains the columns and their respective values, as key-value pairs. The third parameter specifies the data type of your values, in the order you have given them. Here’s an example: insert($wpdb->usermeta, array("user_id" => 1, "meta_key" => "awesome_factor", "meta_value" => 10), array("%d", %s", "%d")); // Equivalent to: // INSERT INTO wp_usermeta (user_id, meta_key, meta_value) VALUES (1, "awesome_factor", 10); ?> If you’re used to writing out your inserts, this may seem unwieldy at first, but it actually gives you a lot of flexibility because it uses arrays as inputs. Specifying the format is optional; all values are treated as strings by default, but including this in the method is a good practice. The three values you can use are %s for strings, %d for decimal numbers and %f for floats. Updating Your Data By now, you won’t be surprised to hear that we also have a helper method to update our data — shockingly, called update(). Its use resembles what we saw above; but to handle the where clause of our update, it needs two extra parameters. $wpdb->update( $table, $data, $where, $format = null, $where_format = null ); The $table, $data and $format parameters should be familiar to you; they are the same as before. Using the $where parameter, we can specify the conditions of the update. It should be an array in the form of column-value pairs. If you specify multiple parameters, then they will be joined with AND logic. The $where_format is just like $format: it specifies the format of the values in the $where parameter. $wpdb->update( $wpdb->posts, array("post_title" => "Modified Post Title"), array("ID" => 5), array("%s"), array("%d") ); Other Queries While the helpers above are great, sometimes performing different or more complex queries than the helpers allow is necessary. If you need to perform an update with a complex where clause containing multiple AND/OR logic, then you won’t be able to use the update() method. If you wanted to do something like delete a row or set a connection character set, then you would need to use the “general” query() method, which let’s you perform any sort of query. $wpdb->query("DELETE FROM wp_usermeta WHERE meta_key = 'first_login' OR meta_key = 'security_key' "); Protection And Validation I hope I don’t have to tell you how important it is to make sure that your data is safe and that your database can’t be tampered with! Data validation is a bit beyond the scope of this article, but do take a look at what the WordPress Codex has to say about “Data Validation” at some point. In addition to validating, you will need to escape all queries. Even if you are not familiar with SQL injection attacks, still use this method and then read up on it later, because it is critical. The good news is that if you use any of the helper functions, then you don’t need to do anything: the query is escaped for you. If you use the query() method, however, you will need to escape manually, using the prepare() method. $sql = $wpdb->prepare( 'query' [, value_parameter, value_parameter ... ] ); To make this a bit more digestible, let’s rewrite this basic format a bit. $sql = $wpdb->prepare( "INSERT INTO $wpdb->postmeta (post_id, meta_key, meta_value ) VALUES ( %d, %s, %d )", 3342, 'post_views', 2290 ) $wpdb->query($sql); As you can see, this is not that scary. Instead of adding the actual values where you usually would, you enter the type of data, and then you add the actual data as subsequent parameters. Class Variables And Other Methods Apart from these excellent methods, there are quite a few other functions and variables to make your life easier. I’ll show you some of the most common ones, but please do look at the WordPress Codex page linked to above for a full list of everything that $wpdb has to offer. insert_id() Whenever you insert something into a table, you will very likely have an auto-incrementing ID in there. To find the value of the most recent insert performed by your script, you can use $wpdb->insert_id. $sql = $wpdb->prepare( "INSERT INTO $wpdb->postmeta (post_id, meta_key, meta_value ) VALUES ( %d, %s, %d )", 3342, 'post_views', 2290 ) $wpdb->query($sql); $meta_id = $wpdb->insert_id; num_rows() If you’ve performed a query in your script, then this variable will return the number of results of your last query. This is great for post counts, comment counts and so on. Table Names All the core table names are stored in variables whose names are exactly the same as their core table equivalent. The name of your posts table (probably wp_posts) would be stored in the $posts variable, so you could output it by using $wpdb->posts. We use this because we are allowed to choose a prefix for our WordPress tables. While most people use the default wp, some users want or need a custom one. For the sake of flexibility, this prefix is not hardcoded, so if you are writing a plug-in and use wp_postmeta in a query instead of $wpdb->postmeta, your code will not work on some websites. If you want to get data from a non-core WordPress table, no special variable will be available for it. In this case, you can just write the table’s name as usual. Error Handling By calling the show_errors() or hide_errors() methods, you can turn error-reporting on or off (it’s off by default) to get some more info about what’s going on. Either way, you can also use the print_error() method to print the errors for the latest query. $wpdb->show_errors(); $wpdb->query("DELETE FROM wp_posts WHERE post_id = 554 "); // When run, because show_errors() is set, the error message will tell you that the "post_id" field is an unknown // field in this table (since the correct field is ID) Building Some Basic Tracking With Our New $wpdb Knowledge If you’re new to all of this, you probably get what I’m going on about but may be finding it hard to implement. So, let’s take the example of a simple WordPress tracking plug-in that I made for a website. For simplicity’s sake, I won’t describe every detail of the plug-in. I’ll just show the database’s structure and some queries. Our Table’s Structure To keep track of ad clicks and impressions, I created a table; let’s call it “tracking.” This table records user actions in real time. Each impression and click is recorded in its own row in the following structure: ID The auto-incremented ID. time The date and time that the action occurred. deal_id The ID of the deal that is connected to the action (i.e. the ad that was clicked or viewed). action The type of action (i.e. click or impression). action_url The page on which the action was initiated. user_id If the user is logged in, their ID. user_ip The IP of the user, used to weed out any naughty business. This table will get pretty big pretty fast, so it is aggregated into daily statistics and flushed periodically. But let’s just work with this one table for now. Inserting Data Into Our Tables When a user clicks an ad, it is detected, and the information that we need is sent to our script in the form of a $_POST array, with the following data: Array ( [deal_id] => 643 [action] => click [action_url] => http://thisiswhereitwasclicked.com/about/ [user_id] => 223 [user_ip] = 123.234.223.12 ) We can then insert this data into the database using our helper method, like so: $wpdb->insert('tracking', array("deal_id" => 643, "action" => "click", "action_url" => "http://thisiswhereitwasclicked.com/about/", "user_id" => 223, "user_ip" => "123.234.223.12"), array("%d", %s", "%s", "%d", "%s")); At the risk of going on a tangent, I’ll address some questions you might have about this particular example. You may be thinking, what about data validation? The click could have come from a website administrator, or a user could have clicked twice by mistake, or a bunch of other things might have happened. We decided that because we don’t need real-time stats (daily stats is enough), there is no point to check the data at every insert. Data is aggregated into a new table every day around midnight, a low traffic time. Before aggregating the data, we take care to clean it up, taking out duplicates and so on. The data is, of course, escaped before being inserted into the table, because we are using a helper function; so, we are safe there. Just deleting in bulk all at once the ones that are made by administrators is easier than checking at every insert. This takes a considerable amount of processing off our server’s shoulders. Deleting Actions From a Blacklisted IP If we find that the IP address 168.211.23.43 is being naughty-naughty, we could blacklist it. In this case, when we aggregate the daily data, we would need to delete all of the entries by this IP. $sql = $wpdb->prepare("DELETE FROM tracking WHERE user_ip = %s ", '168.211.23.43'); $wpdb->query($sql); You have probably noticed that I am still escaping the data, even though the IP was received from a secure source. I would suggest escaping your data no matter what. First of all, proper hackers are good at what they do, because they are excellent programmers and can outsmart you in ways that you wouldn’t think of. Also, I personally have done more to hurt my own websites than hackers have, so I do these things as a safety precaution against myself as well. Updating Totals We store our ads as custom post types; and to make statistical reporting easier, we store the total amount of clicks that an ad receives separately as well. We could just add up all of the clicks in our tracking database for the given deal as well, so let’s look at that first. $total = $wpdb->get_var("SELECT COUNT(ID) WHERE deal_id = 125 "); Because getting a single variable is easier than always burdening ourselves with a more complex query, whenever we aggregate our data, we would store the current total separately. Our ads are stored as posts with a custom post type, so a logical place to store this total is in the postmeta table. Let’s use the total_clicks meta key to store this data. $wpdb->update( $wpdb->postmeta, array("meta_value" => $total), array("ID" => 125), array("%d"), array("%d") ); // note that this should be done with update_post_meta(), I just did it the way I did for example's sake Final Thoughts And Tips I hope you have gained a better understanding of the WordPress $wpdb class and that you will be able to use it to make your projects better. To wrap up, here are some final tips and tricks for using this class effectively. I urge you to be cautious: with great power comes great responsibility. Make sure to escape your data and to validate it, because improper use of this class is probably a leading cause of hacked websites! Ask only for the data that you need. If you will only be displaying an article’s title, there is no need to retrieve all of the data from each row. In this case, just ask for the title and the ID: SELECT title, ID FROM wp_posts ORDER BY post_date DESC LIMIT 0,5. While you can use the query() method for any query, using the helper methods (insert, update, get_row, etc.) is better if possible. They are more modular and safer, because they escape your data automatically. Take care when deleting records from a WordPress (or any other) database. When WordPress deletes a comment, a bunch of other actions also take place: the comment count in the wp_posts table needs to be reduced by one, all of the data in the comment_meta table needs to be deleted as well, and so on. Make sure to clean up properly after yourself, especially when deleting things. Look at all of the class variables and other bits of information in the official documentation. These will help you use the class to its full potential. I also recommend looking at the ezSQL class for general use in your non-WordPress projects; I use it almost exclusively for everything I do. Further Reading WordPress database basics and schema, WordPress Codex Documentation on $wpdb, WordPress Codex “Data validation,” WordPress Codex “SQL Injection,” Wikipedia “SQL Injection Attacks by Example,” Steve Friedl ezSQL class documentation, Justin Vincent (al) © Daniel Pataki for Smashing Magazine, 2011. ]]> WordPress https://pinboard.in/u:anu/b:e22bd1101a2a/ 2011-09-21T15:16:35+00:00 http://publisherblog.automattic.com/?p=1712 anu https://pinboard.in/u:anu/b:15f04e801724/ 2011-09-20T13:00:29+00:00 http://weblogtoolscollection.com/?p=10498 anu https://pinboard.in/u:anu/b:c872a2f4e285/ 2011-09-19T15:44:20+00:00 http://alexking.org/?p=7260 anu https://pinboard.in/u:anu/b:244511226ef6/ 2011-09-18T23:42:10+00:00 http://wpdevel.wordpress.com/2011/09/18/write-a-tutorial-for-setting-up-a-local-dev-environment/ anu https://pinboard.in/u:anu/b:33e7dc1f78c8/ 2011-09-18T00:51:10+00:00 http://itechtalks.blogspot.com/2011/09/quality-ruby-on-rails-resources-and.html anu https://pinboard.in/u:anu/b:84476d79150c/ 2011-09-15T21:28:53+00:00 http://www.roughtype.com/archives/2011/09/raise_high_the_1.php anu https://pinboard.in/u:anu/b:3c8e14dc66a0/ 2011-09-14T18:45:20+00:00 http://www.wptavern.com/?p=5419 anu https://pinboard.in/u:anu/b:b04a102bd3e5/ 2011-09-13T04:01:17+00:00 http://www.poynter.org/how-tos/career-development/ask-the-recruiter/144925/live-chat-today-kim-bui-on-how-to-stand-out-as-a-communitysocial-media-editor/ anu Social_media Media_Lab Latest_News https://pinboard.in/u:anu/b:201d9d2af44d/ 2011-09-12T10:35:28+00:00 http://www.poynter.org/latest-news/media-lab/mobile-media/145623/how-the-boston-globe-built-an-all-in-one-website-web-app-and-mobile-site/ anu Media_Lab Latest_News https://pinboard.in/u:anu/b:c66e37dcffe6/ 2011-09-12T10:33:29+00:00 http://www.poynter.org/latest-news/top-stories/145687/subscription-only-bostonglobe-com-launches-with-boston-com-free/ anu Latest_News https://pinboard.in/u:anu/b:031546484a59/ 2011-09-09T10:00:05+00:00 http://michael.peopleofhonoronly.com/vim/ anu https://pinboard.in/u:anu/b:07dffb84b926/ 2011-09-08T14:32:26+00:00 http://wordpress.tv/?p=7214 anu https://pinboard.in/u:anu/b:5e59d4db1653/ 2011-09-08T11:34:24+00:00 http://wordpress.tv/?p=7218 anu https://pinboard.in/u:anu/b:b14d2bcfef4c/ 2011-09-07T15:15:13+00:00 http://wordpress.tv/?p=7326 anu https://pinboard.in/u:anu/b:e3ed1e3e4d8c/ 2011-09-07T15:00:10+00:00 http://wordpress.tv/?p=7157 anu https://pinboard.in/u:anu/b:12dee054e5e6/ 2011-09-05T12:23:35+00:00 http://www.smashingmagazine.com/2011/09/05/getting-started-with-the-paypal-api/ anu 'seller_1297608781_biz_api1.lionite.com', 'PWD' => '1297608792', 'SIGNATURE' => 'A3g66.FS3NAf4mkHn3BDQdpo6JD.ACcPc4wMrInvUEqO3Uapovity47p', ); /** * API endpoint * Live - https://api-3t.paypal.com/nvp * Sandbox - https://api-3t.sandbox.paypal.com/nvp * @var string */ protected $_endPoint = 'https://api-3t.sandbox.paypal.com/nvp'; /** * API Version * @var string */ protected $_version = '74.0'; /** * Make API request * * @param string $method string API method to request * @param array $params Additional request parameters * @return array / boolean Response array / boolean false on failure */ public function request($method,$params = array()) { $this -> _errors = array(); if( empty($method) ) { //Check if API method is not empty $this -> _errors = array('API method is missing'); return false; } //Our request parameters $requestParams = array( 'METHOD' => $method, 'VERSION' => $this -> _version ) + $this -> _credentials; //Building our NVP string $request = http_build_query($requestParams + $params); //cURL settings $curlOptions = array ( CURLOPT_URL => $this -> _endPoint, CURLOPT_VERBOSE => 1, CURLOPT_SSL_VERIFYPEER => true, CURLOPT_SSL_VERIFYHOST => 2, CURLOPT_CAINFO => dirname(__FILE__) . '/cacert.pem', //CA cert file CURLOPT_RETURNTRANSFER => 1, CURLOPT_POST => 1, CURLOPT_POSTFIELDS => $request ); $ch = curl_init(); curl_setopt_array($ch,$curlOptions); //Sending our request - $response will hold the API response $response = curl_exec($ch); //Checking for cURL errors if (curl_errno($ch)) { $this -> _errors = curl_error($ch); curl_close($ch); return false; //Handle errors } else { curl_close($ch); $responseArray = array(); parse_str($response,$responseArray); // Break the NVP string to an array return $responseArray; } } } Note that I use a CA certificate file for SSL certificate validation. You can obtain the file from the cURL website or any trusted source. Update the path to the certificate file according to where you’ve placed it. The response returned will be in NVP format as well, and I reformat it into an array before returning it. A parameter named ACK signifies the status of the request: Success or SuccessWithWarning when the request succeeds, and Error or Warning when the request fails. A request could fail for many reasons, and there are different reasons for each API method, which are covered in detail in the manual. We’ll go over some further down in this article and look at ways to handle them. Keep in mind that the parameter values are case-sensitive, so code against them accordingly. Express Checkout One of the most popular APIs is the Express Checkout API, which enables you to receive payments without opening a Website Payments Pro account (which is available only to verified US accounts) or hosting the actual transaction yourself (which requires additional security). The Express Checkout process works as follows: We request a checkout token from PayPal using the transaction details; If successful, we redirect the user to the PayPal endpoint using the received token; The user completes or cancels the payment on the PayPal platform and is redirected back to our website; We complete the payment either when the user is redirected back or via an Instant Payment Notification (IPN). 1. Getting the Checkout Token: SetExpressCheckout We initiate the Express Checkout process by passing the order details to the PayPal API, and we receive a token string that identifies it. This token would be used in the next step to redirect to PayPal. Here are the required parameters: METHOD This is the API method that we’re using (i.e. SetExpressCheckout). RETURNURL The URL that the user will be redirected to after the payment process is completed. CANCELURL The URL that the user will be redirected to after having cancelled the payment process. PAYMENTREQUEST_0_AMT The transaction’s total amount. This must have two decimal places, with the decimal separator being a period (.). The optional thousands separator must be a comma (,). PAYMENTREQUEST_0_ITEMAMT The total cost of the items in the order, excluding shipping, taxes and other costs. If there are no extra costs, then it should be the same value as PAYMENTREQUEST_0_AMT. We can pass additional parameters to add more information about the order, some of which have default values: PAYMENTREQUEST_0_CURRENCYCODE The payment’s currency, as a three-letter code. The default is USD. PAYMENTREQUEST_0_SHIPPINGAMT The total shipping costs for this order. PAYMENTREQUEST_0_TAXAMT The total tax amount for this order. This is required if per-item tax is specified (see below). PAYMENTREQUEST_0_DESC The order’s description. We can also add details about individual items in the order: L_PAYMENTREQUEST_0_NAMEm The item’s name. L_PAYMENTREQUEST_0_DESCm The item’s description. L_PAYMENTREQUEST_0_AMTm The item’s cost. L_PAYMENTREQUEST_0_QTYm The quantity of an item. The variable index m identifies the item. (Use the same variable for all details of the same item.) There are many other optional parameters, which can be found in the API documentation. We’ll use the function that we wrote above to build the SetExpressCheckout request: //Our request parameters $requestParams = array( 'RETURNURL' => 'http://www.yourdomain.com/payment/success', 'CANCELURL' => 'http://www.yourdomain.com/payment/cancelled' ); $orderParams = array( 'PAYMENTREQUEST_0_AMT' => '500', 'PAYMENTREQUEST_0_SHIPPINGAMT' => '4', 'PAYMENTREQUEST_0_CURRENCYCODE' => 'GBP', 'PAYMENTREQUEST_0_ITEMAMT' => '496' ); $item = array( 'L_PAYMENTREQUEST_0_NAME0' => 'iPhone', 'L_PAYMENTREQUEST_0_DESC0' => 'White iPhone, 16GB', 'L_PAYMENTREQUEST_0_AMT0' => '496', 'L_PAYMENTREQUEST_0_QTY0' => '1' ); $paypal = new Paypal(); $response = $paypal -> request('SetExpressCheckout',$requestParams + $orderParams + $item); 2. Redirecting to PayPal Using the Checkout Express Token If the request is successful, we’ll receive a checkout token in the TOKEN parameter of the response. if(is_array($response) && $response['ACK'] == 'Success') { //Request successful $token = $response['TOKEN']; header( 'Location: https://www.paypal.com/webscr?cmd=_express-checkout&token=' . urlencode($token) ); } The user now goes through the purchase process on PayPal’s website. When they confirm or cancel it, they will return to one of the URLs that we’ve specified in the request. 3. Completing the Transaction Assuming the user confirms the transaction, they will be redirected to our website by PayPal. At this point, we should use two relevant API methods: DoExpressCheckoutPayment will complete the transaction, but before that we might want to get additional information on the buyer using GetExpressCheckoutDetails. PayPal will redirect the user back from the purchase with the checkout token, which we will use to call those methods. The token will be available in the URL query parameters via the token parameter. We will check for its existence in the confirmation URL and then send our API requests if we find it. The GetExpressCheckoutDetails method requires only the checkout token. DoExpressCheckoutPayment requires a couple of additional parameters: PAYMENTREQUEST_0_PAYMENTACTION This is the payment action. It should be set to Sale unless we’ve specified a different action in the SetExpressCheckout method (possible values include Authorization and Capture). PAYERID This is the unique identification for the PayPal account. This, too, is returned in the URL query parameters (in the PayerID parameter) and can also be retrieved from the details returned by GetExpressCheckoutDetails. if( isset($_GET['token']) && !empty($_GET['token']) ) { // Token parameter exists // Get checkout details, including buyer information. // We can save it for future reference or cross-check with the data we have $paypal = new Paypal(); $checkoutDetails = $paypal -> request('GetExpressCheckoutDetails', array('TOKEN' => $_GET['token'])); // Complete the checkout transaction $requestParams = array( 'PAYMENTREQUEST_0_PAYMENTACTION' => 'Sale', 'PAYERID' => $_GET['PayerID'] ); $response = $paypal -> request('DoExpressCheckoutPayment',$requestParams); if( is_array($response) && $response['ACK'] == 'Success') { // Payment successful // We'll fetch the transaction ID for internal bookkeeping $transactionId = $response['PAYMENTINFO_0_TRANSACTIONID']; } } Direct Payment The Direct Payment API allows you to receive payments directly on your website or application, giving you complete control over the checkout process. PayPal tends to push users to register and use a PayPal account, which is understandable, but this conflicts somewhat with our interest to make the payment process as simple and clear as possible for our customers. For this reason, full control over the checkout process is preferred and gives us more options to optimize sales and generate more sales. The process is a bit simpler than that of Express Checkout, because the entire interaction occurs on our website, and we need to perform just one API call to process a normal payment: DoDirectPayment. A couple of more API requests are required if you want to perform a transaction that is billed at a later date (for example, when you ship the product or confirm availability). These would be the Authorization & Capture API methods, which I will not cover in this post, but be aware that this option exists. DirectPayment Parameters DirectPayment requires different parameters than Express Checkout, as to be expected. While the transaction details parameters are similar (with different key names, to make it more interesting), the method also requires credit-card and address information. DirectPayment’s basic parameters: METHOD This is DoDirectPayment. IPADDRESS This is the IP address of the payer. In PHP, we can retrieve it using the superglobal $_SERVER['REMOTE_ADDR']. You’ll have to do a bit more work to get the IP when dealing with set-ups that have a proxy between the PHP process and the outside network (such as nginx). PAYMENTACTION This is the type of action that we want to perform. A value of Sale indicates an immediate transaction. A value of Authorization indicates that this transaction will not be performed immediately, but rather will be captured later using the Authorization & Capture API mentioned earlier. Credit-card details: CREDITCARDTYPE The credit-card type (Visa, MasterCard, etc.). See the API documentation for the full list. ACCT The credit-card number. (Don’t you love these abbreviated key names?) This must conform to the particular format of the card’s type. EXPDATE The expiration date, in MMYYYY format (i.e. a two-digit month and a four-digit year, as one string). CVV2 The “card verification value,” or security code, as it’s sometimes known. Payer information and address parameters: FIRSTNAME, LASTNAME The payer’s first name and last name, respectively (in separate fields). You can also provide an email address in an EMAIL parameter, but it’s not required. CITY, STATE, COUNTRYCODE, ZIP The city, state, country code (as a two-letter code) and zip code parts of the address, all required. STREET, STREET2 Two lines for the address (only the first is required). This address will be used in the address verification system (AVS). You’ll receive a specific error code if a transaction has failed due to an address verification failure. The payment details parameters are the same as the ones for Express Checkout, but with slightly different names (AMT, ITEMAMT, CURRENCYCODE, SHIPPINGAMT, TAXAMT and DESC) and without the PAYMENTREQUEST_0_ prefix. Refer to the previous section or the API documentation for specific details on those. Similarly, the item details parameters are similar to those of Express Checkout. These include L_NAMEm, L_DESCm, L_AMTm and L_QTYm, giving you granular control of item details in the order summary. The m integer variable is used to account for multiple items (replace with 0, 1 and so on for numbered items in the order). See the API documentation for a comprehensive list of item details. Performing the Transaction Sending the request using our function is very similar to GetExpressCheckoutToken. We pass all of the parameters into the request function as before, with the method set to DoDirectPayment. $requestParams = array( 'IPADDRESS' => $_SERVER['REMOTE_ADDR'], 'PAYMENTACTION' => 'Sale' ); $creditCardDetails = array( 'CREDITCARDTYPE' => 'Visa', 'ACCT' => '4929802607281663', 'EXPDATE' => '062012', 'CVV2' => '984' ); $payerDetails = array( 'FIRSTNAME' => 'John', 'LASTNAME' => 'Doe', 'COUNTRYCODE' => 'US', 'STATE' => 'NY', 'CITY' => 'New York', 'STREET' => '14 Argyle Rd.', 'ZIP' => '10010' ); $orderParams = array( 'AMT' => '500', 'ITEMAMT' => '496', 'SHIPPINGAMT' => '4', 'CURRENCYCODE' => 'GBP' ); $item = array( 'L_NAME0' => 'iPhone', 'L_DESC0' => 'White iPhone, 16GB', 'L_AMT0' => '496', 'L_QTY0' => '1' ); $paypal = new Paypal(); $response = $paypal -> request('DoDirectPayment', $requestParams + $creditCardDetails + $payerDetails + $orderParams + $item ); if( is_array($response) && $response['ACK'] == 'Success') { // Payment successful // We'll fetch the transaction ID for internal bookkeeping $transactionId = $response['TRANSACTIONID']; } There are plenty of parameters, but all relatively simple. Error Handling In a perfect world, this section would not exist. In reality, you will be referring to it quite a lot. PayPal can fail a transaction for a multitude of reasons, not all of which you can control. The $response variable we returned from our paypalApiRequest() function could contain a different value than Success for the ACK parameter. That value could be: Success Indicates a successful operation. SuccessWithWarning Indicates a successful operation, and that messages were returned in the response that you should examine. Failure Indicates a failed operation, and that the response contains one or more error messages explaining the failure. FailureWithWarning Indicates a failed operation, and that messages were returned in the response that you should examine. This gives us two success statuses and two failure statuses. The mock code above tests for the Success value only, but we could change it to check for SuccessWithWarning as well; and keep in mind that we need to find out what the warning is. A common scenario is that a Direct Payment charge will have been performed successfully, but the credit-card company responds that the transaction has failed, for whatever reason. Errors from PayPal are returned in four parameters in the response: L_ERRORCODE0 A numeric error code, which can referenced against PayPal’s error code list (there are quite a few). L_SHORTMESSAGE0 A short error message describing the problem. L_LONGMESSAGE0 A longer error message describing the problem. L_SEVERITYCODE0 The severity code. (I couldn’t find any useful documentation on this, and it doesn’t really matter, so let’s put it aside.) The 0 part of these parameters is an incrementing integer for multiple error message (1, 2, etc.). Here are some common errors you’ll run into: 10002 Authentication or authorization failed. This usually indicates invalid API credentials, or credentials that do not match the type of environment you are working in (such as a live or sandbox environment). 81*** Missing parameter. There are quite a few of these, all starting with 81. Each refers to a specific required parameter that is missing from the request. 104** Invalid argument. This indicates that one of the supplied parameters has an invalid value. Each argument has specific errors, all starting with 104. A common one is 10413, which means that the total cost of the cart items does not match the order’s amount (i.e. the total amount parameter, AMT, does not equal the items’ total plus shipping, handling, taxes and other charges). How Do We Handle These Errors in Practice? PayPal error messages vary and could contain private information that you do not want your users to see (such as an invalid merchant configuration). That being the case, showing PayPal error messages directly to users is not advisable, even though some of them might be useful. In most cases, I would do the following: Set up a white-list array of errors that can be shown safely (such as a missing credit-card number and expiration date); Check the response code against that array; If the error message is not white-listed, then display a generic message, such as “An error has occurred while processing your payment. Please try again in a few minutes, or contact us if this is a recurring issue.” If an error falls outside of the white-listed array, I will also log it to a file on the server and send an email to the administrator, with the full details so that someone is up to speed on payment failures. In fact, logging PayPal requests and responses is good practice regardless of errors, so that you can monitor and troubleshoot payment failures (I provide this option in the commercial component that I mentioned at the beginning of this article). Ready To Get Started With The PayPal API? In this post, I’ve covered two of the most widely used API methods, as well as error handling with the PayPal API. This should be enough for you to get started using the most popular payment platform online. The PayPal API has many more methods and processes, more than can be covered in any one post. Once you get up to speed on the basic methods, learning the others should be relatively straightforward (even if somewhat exhausting). I hope this guide has given you a good head start on using the API. If you have questions or comments, I would love to hear from you in the comments! Front cover: Image source (al) © Eran Galperin for Smashing Magazine, 2011. ]]> Coding API PayPal PHP https://pinboard.in/u:anu/b:b54bed69c794/ 2011-09-04T14:02:20+00:00 http://www.dreamincode.net/forums/topic/54760-professional-level-login-design-pt-1/ anu https://pinboard.in/u:anu/b:b9abb8a5eab8/ 2011-08-31T19:30:00+00:00 http://www.tuaw.com/2011/08/31/how-the-ipad-is-changing-baseball/ anu baseball iPad sports team https://pinboard.in/u:anu/b:e86f30055362/ 2011-08-25T14:57:14+00:00 http://www.antipope.org/charlie/blog-static/2011/08/because-i-have-too-much-spare-.html anu https://pinboard.in/u:anu/b:71b3a8da8d78/ 2011-08-24T16:30:42+00:00 http://uxmag.com/articles/introduction-to-design-studio-methodology anu Strategy Requirements_and_Specifications https://pinboard.in/u:anu/b:30e0ae52a25c/ 2011-08-23T12:59:35+00:00 http://highscalability.com/blog/2011/8/22/strategy-run-a-scalable-available-and-cheap-static-site-on-s.html anu https://pinboard.in/u:anu/b:3d953a0a02de/ 2011-08-23T10:44:58+00:00 http://www.schneier.com/blog/archives/2011/08/cheating_at_cas.html anu https://pinboard.in/u:anu/b:7072aa774394/ 2011-08-23T07:08:00+00:00 http://tobolds.blogspot.com/2011/08/crowd-control.html anu https://pinboard.in/u:anu/b:4f879fa7908d/ 2011-08-22T12:34:07+00:00 http://www.disambiguity.com/uxdo-workshop-facilitation/ anu user_experience https://pinboard.in/u:anu/b:e551ed76c7f2/ 2011-08-20T17:00:00+00:00 http://www.tuaw.com/2011/08/20/energizer-travel-charger-powers-your-mac-iphone-and-ipad-a/ anu accessories ios iPad iPhone mac travel https://pinboard.in/u:anu/b:0f863953793f/ 2011-08-17T14:00:31+00:00 http://freelanceswitch.com/switchtips/freelancer-reputation-apps/ anu profile https://pinboard.in/u:anu/b:a8f5417d7eef/ 2011-08-11T13:00:00+00:00 http://www.tuaw.com/2011/08/11/daily-iphone-app-baby-monkey-going-backwards-on-a-pig/ anu iOS iPhone https://pinboard.in/u:anu/b:3641fde2ba24/ 2011-08-11T09:20:00+00:00 http://tobolds.blogspot.com/2011/08/raid-documentary.html anu https://pinboard.in/u:anu/b:12ebf8bb2379/ 2011-08-08T12:35:31+00:00 http://www.lindapeng.com/2011/08/05/10-lessons-i-learned-from-designing-an-online-community-using-wordpress-and-buddypress/ anu https://pinboard.in/u:anu/b:154a3e360ab3/ 2011-08-06T15:00:41+00:00 http://infovore.org/archives/2011/08/06/links-for-august-6th-4/ anu delicious app mac osx screencast https://pinboard.in/u:anu/b:ff843c06c08c/ 2011-08-04T06:10:15+00:00 http://www.marco.org/2011/08/04/puerto-rico-hd-ipad-board-game-review anu https://pinboard.in/u:anu/b:4495ad08c279/ 2011-08-03T01:51:47+00:00 http://www.litkicks.com/AMemoirInProgress anu https://pinboard.in/u:anu/b:7909da43c665/ 2011-08-02T14:00:00+00:00 http://www.tuaw.com/2011/08/02/iomega-mac-companion-hard-drive-big-storage-high-powered-charg/ anu accessories HardDrive Mac https://pinboard.in/u:anu/b:5c87b69a9b9d/ 2011-08-02T11:57:31+00:00 https://github.com/alfie/MySQL--Replication anu https://pinboard.in/u:anu/b:5227c8848bed/ 2011-08-01T17:00:48+00:00 http://blog.programmableweb.com/2011/08/01/need-an-out-use-the-fake-call-api/ anu APIs fun https://pinboard.in/u:anu/b:c4fba717fe05/ 2011-08-01T08:38:09+00:00 http://blog.edouardswiac.net/2011/07/31/hacking-like-a-hacker-on-a-mac.html anu https://pinboard.in/u:anu/b:387145856b6b/ 2011-08-01T08:37:59+00:00 http://www.oreillynet.com/ruby/blog/2006/03/interviewing_ruby_programmers.html anu https://pinboard.in/u:anu/b:a601bec3cfbc/ 2011-07-27T15:16:14+00:00 http://www.pbs.org/idealab/2011/07/the-frightening-real-world-strength-of-channel-4s-sweatshop-game207.html anu Education game https://pinboard.in/u:anu/b:0ab3dc3b5a4f/ 2011-07-22T22:29:16+00:00 http://daringfireball.net/2011/07/succeeding_steve_jobs anu https://pinboard.in/u:anu/b:ffa2561e8cb9/ 2011-07-22T14:32:00+00:00 http://tobolds.blogspot.com/2011/07/forum-lies.html anu https://pinboard.in/u:anu/b:40f20dff3a07/ 2011-07-21T19:03:59+00:00 http://www.roughtype.com/archives/2011/07/news_in_the_net.php anu https://pinboard.in/u:anu/b:94ca9e6c74a5/ 2011-07-21T16:42:15+00:00 http://theme.it/an-alternative-to-the-shortcode-madness-part-1/ anu 'Button',         'inline' => 'span',  'classes' => 'button' ),       array( 'title' => 'Green Button',   'inline' => 'span',  'classes' => 'button button-green' ),       array( 'title' => 'Rounded Button', 'inline' => 'span',  'classes' => 'button button-rounded' ),              array( 'title' => 'Other Options' ),       array( 'title' => '½ Col.',      'block'    => 'div',  'classes' => 'one-half' ),       array( 'title' => '½ Col. Last', 'block'    => 'div',  'classes' => 'one-half last' ),       array( 'title' => 'Callout Box',        'block'    => 'div',  'classes' => 'callout-box' ),       array( 'title' => 'Highlight',          'inline'   => 'span', 'classes' => 'highlight' )   );   $settings['style_formats'] = json_encode( $style_formats );   return $settings; } add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' ); Now, to apply our green button style to a link, all the user has to do is highlight the links text and select the “Green Button” style from the new drop-down. This link will now take on the simple and universal CSS-based button style set in your themes stylesheet. There is various methods to doing this. Instead of a span tag for the button, you could use an “a” tag. Play around and see what you think. Take It Another Step Further with Editor Styles So now we have made things easier for our users to style elements without having to touch any code or add a single shortcode. Let’s take things one step further and add those styles to the visual editor so the users can see the results. To do this, we will simply add a few lines of code to the functions.php and create a new stylesheet for the editor to use. /** * Add Editor Style * * This provides the theme with the functionality to add a custom * TinyMCE editor stylesheet. By default, the add_editor_style() will * look for a stylesheet named editor-style.css in your theme. Here * we have chosen to define our own stylesheet name, style-editor.css. * This stylesheet can be named whatever you want, just be sure it is * defined in the function below and included in your theme files. * *{@link http://codex.wordpress.org/Function_Reference/add_editor_style } */ function themeit_add_editor_style() {   add_editor_style( 'style-editor.css' ); } add_action( 'after_setup_theme', 'themeit_add_editor_style' ); By providing the add_editor_style() function, we are telling WordPress the theme is including a custom TinyMCE editor stylesheet. Now we can include any custom styles the theme may use into a css file called style-editor.css, which we defined in the add_editor_style() function. By default, if a stylesheet name is not defined here, WordPress will look for a file called editor-style.css. I usually change the name to style-editor.css for organizational purposes so the file is listed next to my style.css file. For a great starting point, take look at the Twenty Eleven theme’s editor-style.css file. Down the Road… I have a few other, possibly more advanced methods, I would like to share down the road regarding this topic of shortcode alternatives. These methods are a little more robust and allow for more advanced styling to elements. For the sake of an already lengthy article, I’ve decided to split it up into multiple “Parts”. In short, these methods include the use of Quicktags, Advanced TinyMCE Buttons, and “Smart” Editor styles. If your like me and prefer to dig around in code to figure things out on your own, all these methods are currently used in the Debut Theme on Press75.com. ]]> https://pinboard.in/u:anu/b:1ab943867005/ 2011-07-20T02:06:24+00:00 http://www.marco.org/2011/07/19/siracusa-multipage anu https://pinboard.in/u:anu/b:e57e57581c75/ 2011-07-19T14:00:16+00:00 http://freelanceswitch.com/product-reviews/open-source-project-management-tools/ anu project_management https://pinboard.in/u:anu/b:52d8de468b8a/ 2011-07-19T10:34:48+00:00 http://www.smashingmagazine.com/2011/07/19/create-an-html-and-css-mobile-web-app-using-sencha-touch-2/ anu sudo gem install compass --pre (We use the --pre flag to ensure that the latest and greatest version of Compass is installed. Sencha Touch requires version 0.11 or later.) If you are on Windows or a system that doesn’t have Ruby already installed, then you’ll need to install Ruby and Gem first, using something like RubyInstaller for Windows. How Sencha Touch Uses Sass Each component of the Sencha Touch user interface library has its own Sass file, which you can easily take and edit. But sometimes, the easiest changes can be made by altering certain important Sass variables (as we did in the examples above) to make changes globally across the application’s theme. In the Roookies application, you’ll find a folder named theming. In it, create a new Sass file named mytheme.scss. The .scss extension is the convention for Sass files. In this file you can link to the parts of the Sencha Touch theming system that are used in the Roookies application: @import 'sencha-touch/default/all'; @include sencha-panel; @include sencha-buttons; @include sencha-sheet; @include sencha-tabs; @include sencha-toolbar; @include sencha-list; @include sencha-layout; @include sencha-loading-spinner; The first line links to all of Sencha Touch’s sub-theming files, and the subsequent lines call mixins for the UI elements used in our application. Mixins are really just functions: they basically insert blocks of CSS into your document. Most of these mixins use a set of global variables to alter the appearance of different parts of the user interface. For example, the $base-color variable modifies the overall color of the application. Set the following variable before the @includes so that they all use this new value, a tasteful green: $base-color: #709e3f; @import 'sencha-touch/default/all'; @include sencha-panel; @include sencha-buttons; … When you save that file, you will be good to compile the CSS. In the same directory, run Compass on the command line, like so: > compass compile mytheme.scss If all goes well, Compass should output the mytheme.css file in the same directory. As with all websites and apps, you’ll need to reference this new CSS file in the application itself. You can do this either by adding a magic query string to the Roookies application URL (something like http://myserver.com/roookies?style=theming/mytheme.css) or, more traditionally, by hardcoding the reference into index.html: (If you do hardcode the theme like this, you should remove the script block in index.html, which is responsible for supporting the query-string theme-switching technique.) If all goes well, the theme should now appear with the new color, both in the toolbar and in a lighter shade for selections of the list itself: (The fact that the color of the list selection is derived from, but not exactly the same as, the base is another clever Sass trick. Color functions such as darken and saturate allow you to formulaically link color values.) Sencha Touch has a full list of the variables that can be altered to change the look and theme of an app. Embedding Regular CSS If all this talk of Sass and Compass is confusing, the good news is that even an .scss file can contain regular old CSS, too. So, in addition to your variables, mixins and functions, you can just start doing static styling to finesse the theme. Let’s say we want to frame the images in the list. In the Roookies app, all of the images have the HTML class attribute shot-image, so we can easily style them as normal: img.shot-image { display:block; padding: 8px; margin: 0px auto; border: 1px solid #666; -webkit-box-shadow: 0 0 4px rgba(#333, .5); background:#eee; clear:both; width:304px; } Also, the container in which each image is placed is a div with the class shot, and we can easily adjust its padding so that our framed image still fits well within the list’s width: .shot { padding: 8px 0!important; } One useful way to find out the classes of elements in a mobile Web application is to use the inspector tool in a WebKit-based browser such as Chrome. Right-click on an element to inspect it and see how it looks in the browser’s DOM: Add these to the bottom of the .scss file and compile again. The app’s images should now have more subtle styling, making the gallery look slightly smarter: Embedding Images In CSS One consideration when building mobile Web apps is the number of requests that the browser needs to make to the server to display a page. And it’s often the case that CSS points to external files, such as images, in the theme. One thing that is very easy to do with Compass, though, is to embed images in the CSS itself, using base64 encoding inside a “Data URL.” These are URLs that start with data and that allow you to specify binary resources inline. This means that the entire theme is encapsulated in one file, and the device has to make only one request to the server to receive all of the parts. The inline image function is an easy way to do this. In our theming environment, it pulls in images from the images sub-directory. So, the wood.jpg image in that directory can be embedded in the CSS as the background of the gallery, like so: .shot { background:inline-image("wood.jpg", "image/jpg"); } In the resulting CSS, it appears like this: .shot{ background:url('data:"image/jpg";base64,/9j/4AAQSkZJR…'); } This gives the app a tasteful wooden background: Font Support Many current mobile browsers support Web fonts, and there’s nothing like a custom typeface to distinguish your mobile application. One of the easiest ways to put a Web font on a website or application is with Google’s WebFont service, which requires you to declare an extra CSS rule by linking to your chosen font in the index.html file: You can also use the CSS @import rule to pull this into the .scss file itself: @import "http://fonts.googleapis.com/css?family=Pacifico"; Both of these techniques create an @font-face rule that allows you to use font-family:'Pacifico' anywhere in your CSS. Below, we’ve applied a style to the user interface — in this case, the text in the toolbar, which uses the class x-toolbar-title: .x-toolbar-title { font-family: 'Pacifico'; } The result is as follows. A little quirkiness in the title bar and a distinctive look and feel to our application. Conclusion Of course, we’ve just scratched the surface here. There are many more powerful (and dramatic) ways to style and theme a mobile Web application. We’ve continued this process to create a fully featured theme for the Roookies app, and you can see the results for yourself, including the styled image meta data and the styled details page when you click on an icon under the images. You can also see the complete .scss file that was used to create this theme; it’s distributed as part of the GitHub project. Have you created a mobile Web app with an extraordinary design aesthetic? Let us know in the comments section below! Mobile Web App Resources “Will Mobile Web Apps Eventually Replace Native Apps?” “Mobile Web vs. Native App: Give It a Rest” “Mobile Web vs. Native App” “How Mobile Web Will Prevail Over Native App” “Web App Masters: Native or Web-Based Mobile Apps?” (kw) © Jen Gordon for Smashing Magazine, 2011. ]]> Developer's_Toolbox https://pinboard.in/u:anu/b:ef42e322ade6/ 2011-07-18T17:44:35+00:00 http://uxmag.com/articles/change-on-a-dime-agile-design anu Strategy Requirements_and_Specifications https://pinboard.in/u:anu/b:56f6673188d3/ 2011-07-15T11:08:06+00:00 http://lists.mysql.com/replication/2114 anu https://pinboard.in/u:anu/b:9b64b9a49eca/ 2011-07-12T00:45:01+00:00 http://laughingsquid.com/dean-martin-burgers/ anu https://pinboard.in/u:anu/b:f26b1c1f5db0/ 2011-07-08T09:05:12+00:00 http://www.youtube.com/watch?v=_V4q-zb2iI4 anu https://pinboard.in/u:anu/b:117af4fbe545/ 2011-07-07T03:59:27+00:00 http://oreilly.com/catalog/9781449397296 anu https://pinboard.in/u:anu/b:5ed750a10b1a/ 2011-07-05T12:46:06+00:00 http://www.smashingmagazine.com/2011/07/05/free-wordpress-themes-2011-edition/ anu Design themes WordPress https://pinboard.in/u:anu/b:9eac3dce8cb5/ 2011-06-30T16:00:00+00:00 http://radar.oreilly.com/2011/06/google-docs-wordpress-indesign-workflow.html anu Publishing cms newspapers workflow https://pinboard.in/u:anu/b:52bdadcab36f/ 2011-06-28T15:04:09+00:00 http://www.stickycomics.com/how-we-treat-our-computers/ anu https://pinboard.in/u:anu/b:32a584c9903e/ 2011-06-28T11:54:58+00:00 http://www.smashingmagazine.com/2011/06/28/setup-a-ubuntu-vps-for-hosting-ruby-on-rails-applications-2/ anu sign stands for the questions that will be prompted. $ sudo -u postgres createuser -P (VPS) > Enter name of role to add: test_app > Enter password for new role: banana > Enter it again: banana > Shall the new role be a superuser? (y/n) n > Shall the new role be allowed to create databases? (y/n) n > Shall the new role be allowed to create more new roles? (y/n) n > Password: your-postgres-user-password Then, create a database for the test application that is owned by the test application user. While you can use Rake to create a database, we will use PostgreSQL so that we can learn some basic PostgreSQL administration. You can create a new database by invoking the createdb command in conjunction with the O flag, the database user name and the new database name itself. The production that we append to the end of the database name is the default name. Here, you will be prompted for the PostgreSQL superuser password again. $ sudo -u postgres createdb -O test_app test_app_production (VPS) > Password: your-postgres-user-password Now that the database has been set up, it is time to create the actual Ruby on Rails application on your local development machine. Navigate to your home directory, and create a new Rails application, named test_app and using PostgreSQL as the database back end. The d flag enables you to specify your preferred database software. $ cd (LOCAL) $ rails new test_app -d postgresql (LOCAL) Go into the Rails application directory. Use Nano to edit the database configuration file by adding banana as a password in the production database configuration. Because we have followed the conventions described in Box 2.1, the database user name and the database name have already been taken care of. $ cd test_app (LOCAL) $ nano config/database.yml (LOCAL) Now, generate a basic scaffold. Programming in Rails is beyond the scope of this tutorial, but this command will create a “User” model and a “users” controller. The inputs will consist of a name and an email address, which are both strings in the PostgreSQL database. $ rails generate scaffold User name:string email:string (LOCAL) Remember when we set up Git in part 1 of this tutorial? Now we’re finally going to use it. We will initialize Git as version control for the test application, add all of the files from the test application to the Git version control list (recursively), and take a version snapshot of the current application using Git. The m flag lets us add a short description of the snapshot. $ git init (LOCAL) $ git add . (LOCAL) $ git commit -m “First commit” (LOCAL) By now, it is time to deploy the application to the VPS, which we will do using Capistrano. Initialize Capistrano as a deployment tool for the test application. This will create several files in your Ruby on Rails application directory. Remove the default Capistrano deployment configuration file, and create a new one. The contents of the new Capistrano configuration file can be found in Box 2.2 below. $ capify . (LOCAL) $ rm config/deploy.rb (LOCAL) $ nano config/deploy.rb (LOCAL) Box 2.2 # RVM $:.unshift(File.expand_path('./lib', ENV['rvm_path'])) require "rvm/capistrano" set :rvm_ruby_string, 'default' set :rvm_type, :user # Bundler require "bundler/capistrano" # General set :application, "test_app" set :user, "johndoe" set :deploy_to, "/home/#{user}/#{application}" set :deploy_via, :copy set :use_sudo, false # Git set :scm, :git set :repository, "~/#{application}/.git" set :branch, "master" # VPS role :web, "123.456.7.890" role :app, "123.456.7.890" role :db, "123.456.7.890", :primary => true role :db, "123.456.7.890" # Passenger namespace :deploy do task :start do ; end task :stop do ; end task :restart, :roles => :app, :except => { :no_release => true } do run "#{try_sudo} touch #{File.join(current_path,'tmp','restart.txt')}" end end Use the cap command to set up the VPS in order to deploy the test application using Capistrano. This will set up some directory structures on your VPS. When using the cap command, you will need to provide a password when prompted. This is the password of the VPS user that you created at the very beginning of this tutorial. Check the VPS set-up for deploying the test application using Capistrano, and finally, deploy the test application. Executing the last command might take a while because it installs the required Gems on the VPS and takes care of the database migrations (if there are any). Here you really see the benefit of Capistrano, because it automates tasks such as uploading the latest version of your application, installing the required Gems and performing the database migrations. $ cap deploy:setup (LOCAL) $ cap deploy:check (LOCAL) $ cap deploy:cold (LOCAL) The last thing to do is tell Nginx where the Ruby on Rails test application is located. So, we need to edit the Nginx configuration file. An example of the changes you have to make to that file are shown in Box 2.3 below. Only an excerpt of the relevant lines is printed here. Make sure to comment out the last four lines of the excerpt using #. Once you have made the changes, reload the new configuration into Nginx. $ sudo nano /opt/nginx/conf/nginx.conf (VPS) $ sudo /etc/init.d/nginx reload (VPS) Box 2.3 (…) server { listen 80; server_name www.yourdomain.com; root /home/johndoe/test_app/current/public; passenger_enabled on; #charset koi8-r; #access_log logs/host.access.log main; #location / { # root html; # index index.html index.htm; #} (…) When the deployment and Nginx configuration are done, check the application in a Web browser. Navigate to http://your-vps-ip-address/. The link to the application’s environment will not work in production mode. After that, look at http://your-vps-ip-address/users. Create, edit, view and delete some users: If everything has worked, then the test application database and the test application database user can be removed. The dropdb command removes a PostgreSQL database. $ sudo -u postgres dropdb test_app_production (VPS) > Password: your-postgres-user-password The dropuser command removes a PostgreSQL user. $ sudo -u postgres dropuser (VPS) > Enter name of role to drop: test_app > Password: your-postgres-user-password Restore the Nginx configuration by copying an example of the (default) Nginx configuration file, overwriting the modified one, and then reload Nginx. $ sudo cp /opt/nginx/conf/nginx.conf.default /opt/nginx/conf/nginx.conf (VPS) $ sudo /etc/init.d/nginx reload (VPS) When that is done, navigate to your home directory on the VPS, and recursively remove the test application. $ cd (VPS) $ rm -rf test_app (VPS) Finally, log out of the VPS. $ logout (VPS) For the local development machine, we also need to navigate to the home directory and recursively remove the test application. When all of the commands below are entered, you can close both terminal windows. This leaves you with a fresh VPS and local development machine ready for developing and deploying Ruby on Rails applications. $ cd (LOCAL) $ rm -rf test_app (LOCAL) Appendix Linux Command Line Glossary The Linux commands used in this tutorial are described here. The list is in alphabetical order and features only the relevant Linux commands. A Linux command usually takes the form of command -option(s) argument(s). For example, rm -r test_app. For a more detailed description, use the manual, which can be accessed using man [command]. sudo [command] Executes a command as an administrative user. adduser [username] Adds a user to the system. adduser [username] [groupname] Adds a user to a specific group. apt-get dist-upgrade In addition to performing upgrades, this is used to intelligently handle dependencies. apt-get install [package] Installs (or upgrades) packages. apt-get update Resynchronize the package index files from their sources. apt-get upgrade Installs the newest versions of all packages currently installed. bash < <( curl [location] ) A combination of commands used to both obtain and execute a script (from the Internet). cd [location] Changes the current working directory. Without an argument, it goes to the user’s home. cp [file] [location] Copies a file to the specified location (overwriting the existing file silently). chmod +x [file] Makes a file exexutable. logout Logs out of a shell or SSH session. mv [file] [location] Moves a file to another location. nano [file] Used to edit configuration files. reboot Reboots the system. rm [file] Removes a file. rm -rf [directory] Removes a directory (recursively and forced, so it will not prompt). source [script] Forces bash to read the specified script. ssh [username@ipaddress] Logs into a secure shell session. type [command] Displays the kind of command that the shell will execute. wget [location] Obtains a file from the Internet. Resources Ubuntu RVM Ruby RubyGems Rails Passenger Nginx PostgreSQL Capistrano Git Further Learning The Linux Command Line The Linux Command Line Book Ubuntu Server Guide Ruby on Rails Guides Ruby on Rails Tutorial Ruby on Rails Tutorial Book Git Community Book Pro Git Git Reference (al) (kw) © David Boot for Smashing Magazine, 2011. ]]> Coding Linux https://pinboard.in/u:anu/b:86c14323d0cf/ 2011-06-26T19:01:24+00:00 http://www.digital-photography-school.com/6-winning-ways-to-work-wide anu Featured https://pinboard.in/u:anu/b:3651ecd732ca/ 2011-06-23T16:00:00+00:00 http://radar.oreilly.com/2011/06/9-digital-book-tools.html anu Publishing apps https://pinboard.in/u:anu/b:b0052a5612df/ 2011-06-22T13:42:20+00:00 http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/ anu Design Web_Design workflow https://pinboard.in/u:anu/b:ac85f9777458/