Fancy Grid Portfolio just Published to WordPress.org

Just wanted to share my new WordPress plugin that’s now published at WordPress.org. The plugin is super easy to use and is great for creating a portfolio page on the fly. I’ve set up a demo page with full details.

Fancy Grid Portfolio Demo: https://www.sinawiwebdesign.com/wordpress-plugins/fancy-grid-portfolio/

Fancy Grid Portfolio @ WordPress.org: https://wordpress.org/plugins/fancy-grid-portfolio/

Dynamic Pricing Shopping Cart for Bullion and Coin Seller

Integrate Dynamic Pricing Shopping Cart into Existing Product Catalog Application

This dynamic pricing shopping cart was a special project that required adding a shopping cart to an existing website/application with a product catalog.  In order to minimize work of adding shopping cart capability and not disturbing existing code, I carefully injected code into the product page to add quantity input fields and checkout button. Product prices are based on spot price data feed, so prices are dynamic and are updated everything minute. Once the user enters quantities for products and clicks Checkout button, user gets redirected to another page (separate domain) where transaction is completed.

  • Manipulate page by injecting code to add column to products table. Column includes quantity input field.
  • Dynamic pricing shopping cart – latest spot prices are parsed from page (top left of page) and price basis added for each product (see image for diagram).
  • Add Buy Now button. When button is clicked, script parses page to get product list with quantities and prices, serialize data and send to processing script.
  • The processing script creates an Advanced Product String with all the product details and redirects user to a secure payment gateway, where he can enter his payment information to complete the transaction.

Technologies used: PHP, jQuery, Ajax, HTML, CSS, Shopping Cart API

phpDesigner 8 Not Mature for Windows 8

phpdesigner IDEI bought a new PHP IDE/editor debugger recently as an update to the famous open source Notepad++.   However, after using it for over a month, I realized I paid $100 for phpDesigner 8 (commercial license) only to discover it has a number of bugs running on Windows 8.  After sending a couple emails to the developers of phpDesigner 8 and not getting any replies, I decided to write a bad review.  I posted a review on CNET, but it’s still in the approval process.   Here’s my review:

phpDesigner 8 – several bugs and no support

Pros

  • Small footprint makes it a very fast editor and debugger
  • Many nice features like: syntax highlighting for multiple languages (JS, PHP, CSS, HTML5,etc.), Code completion, also supports OOP for PHP, integrated version control (subversion with client TortoiseSVN works great), and many of the same features that most full featured IDEs have, so don’t need to list them all here.

Cons

  • Absolutely no support despite what is described on the phpDesigner website – e.g.: Commercial License get higher priority for email support. I bought the Commercial license version for $100, used it for just over a month, and then sent 2 emails about my issues. It’s been several days now, and I haven’t got any response.
  • Display issues in Windows 8 – toolbar titles are chopped off so you can’t read the titles. Many popup window tools like Search are also chopped off top and bottom of the window so you can’t access some features like regular expression input field (much needed feature I can’t use:(
  • FTP connection only works on Linux servers. Most of my projects are on Linux, but occasionally I have to edit sites on Windows. From the FTP logs, the built-in FTP client in phpDesigner is sending bad requests to the FTP server. The FTP integration feature is actually just a shortcut that opens Filezilla in a separate window, and is not actually integrated into phpDesigner.

Summary

Coming from Notepad++, phpDesigner 8 is a big improvement with many features. You don’t have to install and configure the multiple plugins needed to get a full featured editor. But if I’d known about the issues phpDesigner 8 has (at least with Windows 8, maybe stable in older versions of Windows), I think I would have considered some other IDE/editor first, like Eclipse or NuSphere PhpED. Good FTP support is important, and I need access to most features, especially regular expressions.


Revised Review

Okay, I have to revise my review (up to 4 stars. I’d change it above, but I don’t think CNET allows that). The developer did finally answer my emails after 6 days. He said he was traveling and didn’t have email access (one man software company).

He suggested I check the font size of the OS, and see if it’s set higher than 100%. Sure enough, he was correct. The font was set at 110%. Setting it to 100% fixed the display problem mostly. Now I can read the title bars, and I can access some missing features, like regular expression on the search feature.

FTP is still a problem though. The fact that it works fine in Filezilla and my other editor (Notepad++), and that the FTP error the server is returning is meaningless, than I would say that’s still a bug with phpDesigner 8. I’ll have to continue using Notepad++ for projects hosted on Windows.

The fact the develop did respond to my emails and provide some support, and that the display problem was resolved, I have to bring my rating up to 4 stars (I would change the star rating in my original review above, but I haven’t figured out how to do it). It’s a really nice editor, IDE and debugger worth checking out. You can download and install it with a free 3 week trial. I would test it for the full 3 weeks and try to use all features possible to give it a full test before considering purchasing it.

If you’re using it for business, it’ll cost $100.00 for a commercial license. It it’s for learning (ie: you’re not making money from it), then it’s $39.00.

Making a Simple Math Captcha using both jQuery and PHP

I wanted to write a simple Captcha that I could easily integrate into my own scripts that would work with or without Javascript. My first approach was to find open-source that I could pretty much just copy and paste into my code with little modification. All the cookie-cutter Captcha scripts I found were so bloated with extra code and were either only client-side (Javascript) or server-side (PHP), that I decided to create something from scratch. What I came up with is a script that uses Ajax for a smoother user experience (no browser reload on submit), but also works if the user has Javascript disabled for progressive enhancement (or graceful degradation).

Dependencies:  jQuery, jQuery Validation Plugin and jQuery Placeholder Plugin
Assumptions: Understands jQuery and PHP, and has used jQuery Validation Plugin. Note: this tutorial is written for developers and only explains the captcha portion. I don’t go into other workings of the form, ie: Ajax submit, error handling, etc.

Captcha Field

Simple addition captcha

The following code section goes into your HTML form to create the Captcha section. To set the values of the fields to be added, use PHP rand() function to get a different random value each time the page is loaded (1st number is random number 1-4, and 2nd number is random number from 5-9 for easy use).

[sourcecode language=”javascript”]
<input id="num1" class="sum" type="text" name="num1" value="<?php echo rand(1,4) ?>" readonly="readonly" /> +
<input id="num2" class="sum" type="text" name="num2" value="<?php echo rand(5,9) ?>" readonly="readonly" /> =
<input id="captcha" class="captcha" type="text" name="captcha" maxlength="2" />
<span id="spambot">(Are you human, or spambot?)</span>
[/sourcecode]

[divider_top]

Define custom method for Validation Plugin

Method basically gets the random values from the form, the total value entered by the user, adds them together and compares. If the two numbers don’t equal the total, then it returns an error. Otherwise it returns the result.

[sourcecode language=”javascript”]
$.validator.addMethod(‘captcha’,
function(value) {
$result = ( parseInt($(‘#num1’).val()) + parseInt($(‘#num2’).val()) == parseInt($(‘#captcha’).val()) ) ;
$(‘#spambot’).fadeOut(‘fast’);
return $result;
},
‘Incorrect value, please try again.’
);
[/sourcecode]

Call custom validation method defined above

The highlighted sections are the relevant parts to the Captacha. The rest is doing error handling for the other form fields.


[sourcecode language=”javascript” highlight=”9-12,26-28″]
$(‘#contact’).validate({
debug: false,
rules: {
message: {
required: true,
minlength: 10,
maxlength: 255
},
captcha: {
required: true,
captcha: true
}
},
messages: {
firstName: "First name field required.",
lastName: "Last name field required.",
email: {
required: "Email address required",
email: "Email address must be in the format name@domain.com."
},
message: {
required: "Message field required",
minlength: "Message must contain at least 10 characters.",
maxlength: "Message must not contain more than 255 characters."
},
chkCaptcha: {
required: "* Required"
}

}

});
[/sourcecode]

[divider_top]

Server side handler (PHP) in case Javascript is disabled

Now we have to handle captcha if Javascript is disabled. Since the captcha values are generated using PHP, we can retrieve those from the POST array.

[sourcecode language=”javascript”]
$num1 = isset($_POST[‘num1’]) ? $_POST[‘num1’] : "";
$num2 = isset($_POST[‘num2’]) ? $_POST[‘num2’] : "";
$total = isset($_POST[‘captcha’]) ? $_POST[‘captcha’] : "";
[/sourcecode]

[divider]

Define a Captcha function and call the function

[sourcecode language=”javascript”]
function captcha_validation($num1, $num2, $total) {
global $error;
//Captcha check – $num1 + $num = $total
if( intval($num1) + intval($num2) == intval($total) ) {
$error = null;
}
else {
$error = "Captcha value is wrong.
";
}
return $error;
}

$captcha_error = captcha_validation($num1, $num2, $total);
[/sourcecode]

Now Captcha can be validated with your other form variables. You can see a working demo here, or download it from the link below (contains all the code and dependent files).


Download from GitHub: https://github.com/laithsinawi/php-jquery-simple-math-captcha

>

Contact Us For a Free Consultation

Let's Get Started!
Top