Ajax and PHP Web Developer Blog

Ajax Drag and Drop List Ordering

Blaine — Wed, 18 Aug 2010 04:10:04 +0000

This tutorial is going to provide information on an easy way to create drag and drop ordering of data. This can be categories, lists, projects, whatever data you have. In this example we are working with re-arranging files. For this we are going to need to add a field to MySQL, add Dojo to your script, and of course some PHP to manipulate it all.

The Database

First, modify your database table to have an order column. Make the type an int and with a default of null. You must also have an ID or some other unique field that will let you update the fields individually. I will assume you already have one.

ALTER  TABLE  `file`  ADD  `order` INT(11) NULL ;

The Javascript

Then we need to add our JavaScript to the of the page. What this is going to do is load Dojo from a CDN and then attach an onDndDrop event to the HTML code that we are going to write. The event will detect an item being dropped and then submit the form without refreshing the page.


<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.Source");
dojo.addOnLoad(function(){
 dojo.connect(dragAndDropList,"onDndDrop",function(e){updateList()
});
function updateList() {
 var xhrArgs = {
 form:dojo.byId('dragAndDropForm'),
 handleAs: "text",
 preventCache: true
 }
 var deferred = dojo.xhrPost(xhrArgs);
}
script>

Displaying The Data in Order

You will want to use a query similar to this if you have new data entering your table after your organize the data. This works because the default value of order is NULL and the query creates a temporary alias column called isnull. The temporary isnull column will detect if order is set to null which allows us to order by isnull to separate unorganized items from organized items. We then order by order to arrange all the ordered items.


$sql = "SELECT `name`, `id`, `order`, IF(`order` IS NULL or `order`='', 1, 0) AS `isnull` FROM `file` ORDER BY `isnull` ASC, `order` ASC";
$result = mysql_query($sql);
?>

HTML Code for Drag and Drop and From

There are a few very key elements in this form. The dojoType and class=”dojoDndItem” are required to have Dojo add drag and drop to the page. The jsId is required to create a global JavaScript variable of the Drag and Drop source. You are not required to use UL and LI but you must have a wrapper and inner elements. You will also notice a hidden input which sends the order of the items discretely to update-order.php.




while($row = mysql_fetch_assoc($result)){
 echo '';
 echo '.$row['id'].'" />';
 echo '.$row['id'].'">'.$row['name'].'';
 echo '
';
}
?>

Submitting the form to update-order.php

This script gets run every time the user drops an item. The form submits POST values called order[] which PHP interprets as an array. The script then just runs a loop on the array and updates the list. Obviously you are going to want to insure the data incoming is secure and you have connected to the database.

$i = 1;
foreach ($_POST['order'] as $id) {
 mysql_query('UPDATE `file` SET `order`="'.$i.'" WHERE `id`="'.$id.'"');
 $i++;
}

Styling the Drag and Drop “hover thingy” Avatar:

Lastly- you may want to style the drag and drop actions and avatar without including the Dojo CSS files.

.dojoDndItemSelected, .dojoDndItemAnchor { background:#252525; }
.dojoDndItemOver { background:#333; }
table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black; }
.dojoDndAvatar td { border: none; }
.dojoDndAvatar tr { border: none; }
.dojoDndAvatarHeader td { height: 20px; padding: 0 0 0 21px; }
.dojoDndAvatarItem td { padding: 2px; }
.dojoDndMove .dojoDndAvatarHeader, .dojoDndCopy .dojoDndAvatarHeader { background-color: #f58383; }
.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader, .dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { background-color: #97e68d; }

Windows Web Development Tools

Blaine — Tue, 13 Jul 2010 18:24:46 +0000

A while back I posted a blog on Firefox Web Development Tools, this time it is about “Windows Web Development Tools”. Some of these applications may be on more than one operating system.

Dreamweaver

Not free, very expensive.
*Favorite. This program allows me to very quickly make edits to websites and upload them. Most of the time the FTP tool functions alright. I stick mostly to the code view, however when importing text I will paste into design view and then optimize so it validates. I use the entire Web Suite and I love Photoshop but wish Dreamweaver would fix a few things.

Xenu

Free
I use this to very quickly crawl all my new websites to see if any files or links are broken. It also supplies a variety of other website information.

WinHTTrack

Free
Sometimes you need to rip a site from the web, this program does exactly that.

WAMP

Free
*Favorite. Just like the famous LAMP stack you are always hearing about, WAMP is Apache, MySQL, and PHP for Windows… It is very easy to install to get a web server running on your computer.

Faststone Photo Resizer

Free for personal use, $19.95 for business use.
If you do not have Photoshop this program is amazing for bulk editing and/or renaming images. It can resize, rotate, crop, and watermark images.

Notepad2

Free
Notepad2 gets the job done, it has syntax highlighting and it is amazing for on the go editing. I also use it for opening random files like my host file and such.

Rocket Dock

Free
The Mac dock for Windows. I love it. It is out of the way when I don’t need it, and when I do need it, I hover my mouse in the right place and it pops down. Most of the programs on this list are in my dock.

FileZilla

Free
Tired of Dreamweaver’s terribly slow and out of date FTP? Filezilla allows me to upload or download up to 10 files at a time if a server supports it. It is great when you have over a few hundred files. Not only that but it saves definitions for websites which is very useful.

Putty

Free
SSH client that rocks! I use this to move files and folders around, make backups etc. But my favorite thing about SSH is installing Magento in less than 10 minutes. Try doing that with FTP.

Asterisk Key

Free
You know that password you forgot that is behind the asterisks? ****, now you can get them back with this application. It does not work with every application (because certain software does not actually hide the password behind the asterisks) but it works with Dreamweaver.

Remote Desktop

Comes with Windows (Pro and Ultimate editions)
This application is awesome for a quick update on the road. This application compares to LogMeIn, which is also nifty if you want to do something quickly from the browser. I like Remote Desktop because it is free for business use.

Trillian

Free
Instant Messaging for every major Instant Messenger: MSN, Yahoo, IRC, GMail, AIM, Facebook, Myspace, and more. I pay for this application however because the pro version lets me do things that I really like.

WinRar

Not Free, $29.00 – WORTH IT!
This application stomps everything else (7zip, Windows zip, WinZip) for what I use it for. it can quickly unzip whatever I throw at it and it lets me drag and drop straight into Dreamweaver. I have tried several others and either Dreamweaver or the zip program do not like each other.

Gyazo

Free
This is the fastest screenshot taker I know. It instantly uploads the screen shot and opens your default browser to the image.

Skype

Free for basic, plans and phone number cost money.
This application saves me hundreds of dollars a year in phone bills. I pay for an unlimited minute subscription and a phone number and dial out and accept calls from land lines. This + Google voice = rocking my world.

Did I miss something? I know I must have but if you use a totally nifty application I would like to hear about it.

Magento 1.3 Sales Tactics Cookbook

Blaine — Thu, 17 Jun 2010 05:19:06 +0000

“Magento 1.3 Sales Tactics Cookbook” is obviously aimed at salesmen or even an SEO professional who has not yet dipped their feet into Magento. The book for the most part steers clear of programming and shows you how to use the tools in Magento that will help increase sales. The methods to increase sales are simple but they detail features some people may not know about. This book not only gives you step-by-step instructions for setting up coupon codes, discounts, cross sales, etc, but it also explains when and why to use it so you can determine if it is useful to your store.

Here is a list of the books chapters:

Attracting Visitors
Placing Products on Shopping Sites
Driving Visitors to Your Product Pages
Making the Sale by Optimizing Product Pages
Increasing the Sale
Offering and Advertising Promotions
Engage Your Customers
Let Your Customers Speak
Internationalization
Create a Wholesale Store

The content inside each vaguely named chapter explains some of the deeper parts of Magento that some people are afraid to play with because they were never taught how to use them. Some portions of this book would likely have to be implemented by a programmer instead of the client or salesmen but the majority of the book was directed towards non technical people. They do explain what files you need to edit if you are brave enough.

I did learn a few neat tricks with Magento while reading this book, however, the book leaves some food for thought by saying things like “this is beyond the scope of this book”. It said it often enough to frustrate me but for someone who was just getting into Magento this book would explain enough for them to at least know what the feature does and how to search for more information on it.

Overall the book was good and full of information. If you need a step-by-step tutorial so you understand what each field does this book explains it all in great detail.

Strangers Diary

Blaine — Thu, 27 May 2010 18:45:36 +0000

Strangers Diary is not one persons diary, anyone can write in their own entries. It is not just about “the funniest” life stories, it can be about anything. You become addicted to reading a perfect stranger’s diary in just moments. I am glad I gave people a platform for their thoughts so they can get them off their chest. Good or bad- I think people will feel better knowing that some one out there knows and they are not alone.

This idea came to me a few years back but I never got around to finishing it until now. I am not positive with FMyLife came about or even My life is average, however I did not know about either site when I thought of this one. So maybe if I would have created it when I thought of it it could have been as popular as they are today. Well I am going to try the idea out anyways. I think it is different enough to get visitors of it’s own.

Massage Table Outlet

Blaine — Fri, 07 May 2010 07:31:49 +0000

Massage Table Outlet is a Magento E-Commerce Cart. I did the template work meaning CSS and HTML. I also did something else that is very special. I made a custom module for this cart that interfaces with Shopatron. Michael Kramer aided in this process as this was my first module in Magento. Thank you Kramer. I really love how clean this site turned out, it was a perfect fit for Magento.

Shopatron Integration into Magento

I am actually really disappointed in the Shopatron API because it has huge shortcomings. One, they only allow the customer to use their entire checkout method, thus the Shopatron is much like a separate checkout page. It gets worse, they do not send any data back about the transaction except for a order number, which then they do not supply an API to pull order information. So there are no order records in Magento saved. One last thing, they do not let you send shipping data, so you have to match your shipping quote in Magento to precisely to what you have set in Shopatron. Other than that, the Shopatron staff was helpful and friendly.

Magento 1.3: PHP Developer’s Guide

Blaine — Mon, 03 May 2010 09:34:05 +0000

“Magento 1.3: PHP Developer’s Guide” explains many core aspects to ease the massive learning curve that Magento has. It is great book for new and intermediate Magento developers. For new developers, reading this book may overwhelm you if you do not already have some experience with the administration panel, theme customization, and knowledge of OOP (object oriented PHP). For intermediate developers (like me), if you are not at least somewhat familiar with each subject covered in this book, you should be, it may save from doing something the hard way.

Here is a list of what the book covers:

Installing/Upgrading Magento and Preparing for Development
Magento’s Architecture
Building a Shipping Module for Magento
Building a Payment Method for Magento
Basic Modules to Extend Magento’s Functionality
Fully Featured Module with Administration Panel
Integration of a Third-Party CMS
Magento’s Core API
Importing and Exporting Data

I used this book as a reference manual several times in the few months that I have owned it. I had never used the Core API before and did not know the benefits of using it, but it was super simple and the book does a great job explaining it. Learning the Core API saved me from having to preform 5 hours of manual product updates! Also, I also like how it quickly details how to put together shipping and payment modules with explanations of what everything in the code does. Overall each chapter does an excellent job of explaining a core Magento feature that Magento developers should be familiar with.

In just a few places I think the book is teaching you improperly or lacking something important. For instance: it missed setting up the cron job for Magento. Then at another point it tells you to edit the default themes files, which I hate doing because when you upgrade Magento these files can get overwritten and you lose your work. In some places I felt the book was repetitive, however, in the first chapter it did warn of that it would repeat itself to help some people learn the important concepts. There were not many more things that bothered me about the book.

I read the entire book even though I could already do things like install and upgrade Magento with SSH and FTP. And I am glad I did because it occasionally surprised me with something I did not know. I was hopeful for a deeper explanation of modules and the framework but I realized that subjects like these were better left being explained in a more advanced book. I am not aware of a book yet that goes this far into Magento. If James Huskisson would write that book it would be awesome stepping stone from intermediate to advanced Magento development.

Finally, this book was written for Magento 1.3 not 1.4. Theming has changed slightly in 1.4, and they have added widgets. I would not hesitate in buying this Magento book just because a new version of Magento is out because there are very few references to anything with themes in this book. Plus- 1.3 at the time of this writing is still more stable than 1.4.

Editing Magento’s Price Scope

Blaine — Thu, 22 Apr 2010 20:13:13 +0000

If you have multiple websites in Magento you may want to have different prices for different websites in Magento. The problem is that the Magento price attribute is set to global but says website in the attribute manager. It is also not editable in the attribute manager. To fix this go to your admin section. System > Configuration > Catalog > Price and change the Catalog Price Scope from Global to Website.

Currently it appears it can only be done per website with this method and not per store. I actually do not think it will ever be done per store since store is still the same website so why offer two different prices.

Adding file types to Dreamweaver CS4

Blaine — Wed, 17 Feb 2010 18:36:09 +0000

By default Dreamweaver CS4 does not open, search, or syntax highlight some useful files types. This article is going to go over how to support files such as .htaccess, .htpasswd, .phtml, .ctp and .trc files. These file types and I am sure many others can be syntax highlighted with html or php because they are template files for PHP engines. Besides right clicking on files and selecting open with Dreamweaver I needed a little more power from inside the application. Here are some tips on how to make Dreamweaver a little more developer friendly.

How to make files open in Dreamweaver by clicking on them

When trying to open a file type that is not added to Dreamweaver’s extension list it will error and say “Can’t find a valid editor for this file extension”. To make Dreamweaver open these files automatically just follow these menu instructions in Dreamweaver:

Edit > Preferences > File Types / Editors > Add extension to open in code view section

Make PHTML and other file types Syntax Highlighted

Windows 7/Vista: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\configuration\DocumentTypes\MMDocumentTypes.xml

Find the file mentioned above and open it. Then find the type of syntax highlighting you want and add the file extension to winfileextension and macfileextension. In this case we add PHTML files to be syntax highlighted with PHP. Edit the section referencing PHP and add PHTML to the list of file extensions. From there all you have to do is open Dreamweaver and PHTML files are now highlighted properly.

,phtml” macfileextension=”php,php3,php4,php5,phtml” file=”Default.php” writebyteordermark=”false”>

Searching PHTML files in dreamweaver cs4

Windows 7/Vista: C:\Users\YOUR USER\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\Extensions.txt

Finally, To make PHTML searchable in Dreamweaver you must edit another file. This file is much simpler to read and all you have to do is find the correlating file type (asp, php, xml, js, html, etc) and add the extension to that line. To have the extension PHTML searchable in Dreamweaver add it to the list with the PHP Files. Then open Dreamweaver and search.

PHP,PHP3,PHP4,PHP5,TPL,PHTML:PHP Files

The files will vary from OS to OS. If this article has helped you find the file but did not lead you directly to the file, comment below with your OS and the path to the file to help people. I am not responsible for any damage this may cause.

Internet Explorer 6 is Evil

Blaine — Sat, 09 Jan 2010 01:03:51 +0000

I know that many developers are very aware that IE6 is evil. But many of my clients do not know how much we bend over backwards to get an IE6 functional website. Sometimes it can take a few minutes. However, much of the time it will take an hour or two even on a simple website.

IE6 is a 10 year old piece of software that about 10% of people still use. Why? Basically people hate updating anything. The only reason they do upgrade is if things are not working anymore. We are forced to develop for this dilapidated browser because our clients want their website to work in IE6. Do not get me wrong, I am all for having the website be functional in IE6. But if it is missing some unnecessary features, a shadow, or has a design hickup, why waste time fixing it? The internet cannot continue to grow if we continue to drag this browser with us. We cannot make our websites with better functionality if IE6 has to have all the same features. Sometimes IE6 really cannot accomplish some tasks.

Besides the fact that I hate developing for IE6, there are also some other important reasons to consider upgrading…

Many security issues
The program is 10 years old, people have found plenty of security issues in that time.
Slow
Just because you have a 10 year old computer does not make IE6 better than IE8 or Firefox, pages load faster with newer browsers.
Extra cost to program features
I charge for developing extras for IE6 and so does everyone else.

I am only asking that you update your browser and that you do not ask that IE6 render perfectly. If you want I can put a notice on your website that tells your customer to update their browser so they can have the full experience of your website. The notice is hardly an intrusion for your customers and many websites are already doing it. Did you know that YouTube is phasing out support for IE6? I am sure this just means they will stop finding ways to make YouTube work for IE6.

Here are some websites that have more helpful information on why to upgrade. Some of them also provide the notice I mentioned above.

http://ie6update.com/
http://www.end6.org/
http://www.ie6nomore.com/
http://www.bringdownie6.com/

If you are browsing with IE6 please do yourself a favor and download a new browser. If you still love Internet Explorer just upgrade to IE8. All of these browsers will take your internet explorer bookmarks and other data and import it into the new browser. The benefits of upgrading to a new browser go on and on, but to name a few: faster page load times, better bookmarking, easier navigation, tabbed browsing, better search, and a pop up blocker.

http://www.mozilla.com/
http://www.google.com/chrome/
http://www.opera.com/
http://www.microsoft.com/nz/windows/internet-explorer/default.aspx

Also, if you have IE7 I would advise you to upgrade to IE8. IE7 was basically Microsoft’s thrown together attempt to not lose to FireFox and the other upcoming browsers. IE7 has many shortcomings but that is for another article 5 years down the road.

Limb Jewelers

Blaine — Fri, 13 Nov 2009 04:29:50 +0000

Limb Jewelers was the easiest website I have cutup in while. This website has taken around 10 hours to complete. It is a very clean website. Brig Atwood did the design. Brig is a great designer and is really great at making fantastic looking templates that are relatively simple to cut up.

I also made an super simple JavaScript slide show in only 10 lines of JavaScript. It includes a a loading image since the designer chose to use rounded corners and they take some time to load the giant PNG’s.

Checks DNS and mail servers health [del.icio.us]

bladesling — Thu, 12 Nov 2009 15:25:35 PST

IP Spam Blacklist Lookup [del.icio.us]

bladesling — Thu, 12 Nov 2009 15:22:20 PST

Check to see if an IP

Magento - File Permissions [del.icio.us]

bladesling — Thu, 01 Oct 2009 18:43:42 PDT

Open Web Tools Directory [del.icio.us]

bladesling — Thu, 09 Jul 2009 09:05:12 PDT

Great list of tools

Local Business Search Engine Submission [del.icio.us]

bladesling — Thu, 28 May 2009 14:12:24 PDT

Privacy Policy Generator [del.icio.us]

bladesling — Tue, 19 May 2009 14:06:23 PDT

Web Safe Fonts - CSS [del.icio.us]

bladesling — Mon, 18 May 2009 09:03:35 PDT

RSS Parser with Caching [del.icio.us]

bladesling — Wed, 01 Apr 2009 14:59:48 PDT

Hover Hack for IE6 [del.icio.us]

bladesling — Tue, 24 Mar 2009 14:48:17 PDT

Favicon Creator [del.icio.us]

bladesling — Mon, 23 Mar 2009 13:04:39 PDT

Free Webdesign Contract [del.icio.us]

bladesling — Mon, 02 Mar 2009 13:24:01 PST

Simple Javascript Slideshow/Image Fader [del.icio.us]

bladesling — Mon, 02 Mar 2009 13:19:13 PST

Learning CSS? This is for you! [del.icio.us]

bladesling — Wed, 25 Feb 2009 21:35:32 PST

PHP CAPTCHA Library [del.icio.us]

bladesling — Wed, 18 Feb 2009 09:08:01 PST

This is what I am using for my bender (easy contact form class) script

Google Hosted Ajax Libraries [del.icio.us]

bladesling — Fri, 23 Jan 2009 11:02:50 PST