Tips for Twits » frontend

Howto: Repackageable custom extension development in Magento – Part 9 – Frontend – List

gaweee — Mon, 22 Jun 2009 07:47:13 +0000

Download the source for this entire series here!

Frontend – List

Let us revisit our frontend controller. Surely by now you’ve gotten a better grasp of the controller and models. So we’ll be revisiting those concepts here. So lets say you want to allow users to view you current Twits as well as create a new Tip.

Some new file structure loving

app/
  design/
    frontend/
      base/
        default/
          template/
            twits/
              - tip_list.phtml
  etc/
    modules/
      - SavantDegrees_All.xml (Or what ever your company name might be)
  code/
    local/
      SavantDegrees/ (Or what ever your company name might be)
        Twits/ (Or whatever your module name might be)
          Block/
            Admin/
              - Main.php
              Main/
                - Grid.php
              - Edit.php
              Edit/
                - Form.php
              - New.php
              New/
                - Form.php
            - HelloWorld.php
            - Index.php
          controllers/
            - AdminController.php
            - IndexController.php
          etc/
            - config.xml
          Helper/
            - Data.php
          Model/
            - Tip.php
            Mysql4/
              - Tip.php
              Tip/
                - Collection.php
          sql/
            twits_setup/
              - mysql4-install-0.2.0.php
              - mysql4-upgrade-0.1.0-0.2.0.php

We’ve added a whole nasty branch of subdirectories under app/designs. Read on to understand what its all for…

Let us return to our IndexController.php


class SavantDegrees_Twits_IndexController extends Mage_Core_Controller_Front_Action
{
 
    public function indexAction()
    {
		$this->loadLayout();
		$this->getLayout()->getBlock('content')->append(
			$this->getLayout()->createBlock('twits/index')
    	);
        $this->renderLayout();
    }
}

Hold your horses, this code is EXACTLY the same as the Part 1. Its just a revision. However, that being said, we see that in Part 1, we made the system create a Block called index. That’s an opening…

So let us modify our Index.php block:
```
class SavantDegrees_Twits_Block_Index extends Mage_Core_Block_Template
{
    public function __construct()
    {
        parent::__construct();
        $this->setTemplate('twits/tip_list.phtml');
    }
 
    public function getTips()
    {
    	$model = Mage::getModel('twits/tip');
    	$collection = $model
    	    	->getCollection()
    	    	->load();
 
        return $collection->getItems();
    }
}
```
What the difference here? We made the block load the template from twits/tip_list.phtml. We can create/find this file in /app/design/frontend/default/default/template/twits/tip_list.phtml. Some explanation is due here:
- When you say setTemplate in the block, it means, use this file as the presentation/view
- This file exists in the some subdirectory of /app/design/frontend/default/default/template. That is the path to your default template. Even though you may have other templates, this is the default 1. So when Magento cant find your template file in the other template directories, it always reverts back to this folder. Its a directory form of inheritance/ancestory/precedence.
Lastly, the tip_list.phtml file:
```
getTips();
if ($_tips) {
	$count = 0;
	foreach ($_tips as $i=>$tip) {
?>
		
			getTitle() ?>
			getAuthor() ?>
			getContents() ?>
		
```
Since the whole purpose of tip_list.phtml is to prepare the view for the list of tips, it obviously needs to get the data from somewhere. It turns out, the Template is the extension of the Block. So by calling $this->getTips(), we’re calling the Block's getTips() method.
There you have it! check your tips list at http://127.0.0.1/magento/index.php/twits

If it works for you, leave a comment! =)

JQuery Progress Bar 2.0

gaweee — Mon, 22 Jun 2009 02:39:49 +0000

Hi all its us again, In the past few months we’ve been asked many a times to help improve the progressbar code. We’ve also been referenced by several websites as THE progressbar to use. In all, we felt we owed it to you guys to make it better.

So here we are, after all those emails and bug reports, we finally got down to it. Always good to take a couple of months to have a fresh prespective of things. We ripped out the old code and made it much better and more extensible than its predecessors. So much that we decided it was enough to qualify as a major revision.

Let see whats been done…

Cleaned up the code, yes its lighter, cleaner faster. (Still lacks documentation though)
Callbacks! Everyone’s favourite
Max values, you can now set it to be 150/2000 instead of just a percentage
Text formats. Show 75/100 or 75% by toggling the textFormat accordingly
Steps, how many steps to get to your target value
Step Duration, how long each step lasts
Webkit (Chrome/Safari) compatibility. More like, Webkit Hacks

Once again, many a thanks for all those who have so generously provided the feature requests as well as bug fixes every now and then. And thanks for all your patience in waiting for this new release.
If its working for you, drop us a comment and tell us where we can see your stuff!

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

HOWTO: Find icons for your new prototype system

gaweee — Sun, 14 Jun 2009 14:08:11 +0000

Having a good UI is 30% of your customer won. No i dont know, 30% was completely arbitrary but absolutely believable. As such, please dont try to make those icons yourself! As all developers know, we try our best not to reinvent the wheel. Unless the wheel sucks and we have the budget, then we knock ourselves out.
So its time to share those little icon secrets! Where do you find nice icons!?

famfamfam. If you dont know this site, you should be SHOT. Mark James spent good time making a fantastic set of icons so that everyone else could use them. Kudos to him!
crystal iconsAnother awesome job done by Everaldo. Download link’s not working. Use this instead. Made primarily for the KDE workspace. Which brings us to my next point
Any other Linux icons sources. These includes kde-look, tango, interfacelift, deviantart
Iconfinder. Its new, its awesome and apparently they’re license-friendly! If everything’s as promised, they’re gonna kick some serious internet butt! We’re fans already!
Ok we admit, sometimes we’re really tempted to use existing packages icons. Joomla has a really nice set.

All in all, plenty of icons. And if that doesnt work out. Go buy some from istockphoto and stock.xchng! They’re the pros for a good reason!
And a final word in licensing. Respect it. Not so much for the hard work, but more for the fact that designers can do what we cannot. Even if we tried, we probably wouldn’t have as much flair. Just like magicians.

Google Maps Helper

gaweee — Sun, 14 Jun 2009 13:51:15 +0000

In our work we like to create Google Maps links for our client’s (offices, stores, etc). However, the larger our clients presence, the more random links there are bound to be. When it comes to using Google Map’s javascript API to control the map, thats still perfectly fine. But how do I create a google maps link that only shows 1 entry? Turns out, there are several ways to do this:

Manipulate the request such that it only shows your entryHow? For example, searching for “Holland, Singapore” will lead us to about 1,356 results. See here. So lets tweak it a little:
- Append &mrt=yp to the url – That returns us all the business listings. (852 results)
- Append &start=16 to the url – That skips the first 16 results (Shows results 17-26 of 852)
- Append &num=2 to the url – That returns us only 2 results (Only shows 2 results)
For a more complete listing of Google Maps Parameters, consult mapki.com. Kudos to those guys for compiling that list. Really useful stuff
So there you have it, a simple way to link your business such that its the only entry there. However this method is relatively dangerous. Why? Cause you’ve got no idea of the exact ordering that Google maps may return. Today you could be entry 17, surely not in a year (hopefully for the better). As such, this is not the recommended solution.
Use the address with your long/lat coordinates to generate your entry.
- First get your GPS coordinates, there are a number of ways to do this. Check our this link
- Then create your link via the following structure: http://www.google.com/maps?&ie=UTF8&hl=en&q=[urlescaped address]&ll=[GPS lat,long]&z=[Zoom]&iwloc=A
- Still too troublesome? We’ve created a simple tool for our clients to use. Save yourself some time. Try it!

Once again, if you’d rather embed Google maps directly into your site via the JS, then your options are much more open.
Good luck! Let us know if it works for you, of if you find a better way of doing things!

A new look…

gaweee — Thu, 02 Apr 2009 18:12:19 +0000

And we’ve got ourselves a new theme! The team figured that his theme really reflects our style, its business, very cartoonish, very fun, very techy, very us….
I hope you readers will like it!

I think i should spend some time explaining to the readers what this site is really about. This blog is an outlet for our team to contribute back to the online community the tips and tricks and hair-losing answer’s we’ve spent so much of our time acquiring. We plan to have a team of writers eventually blogging about very different aspects of our work. It could be any topic that range from technology tutorials to consultancy statistics/findings to our favourite designer color palettes. So in a way, this site is meant to be touch-and-go. Come in, get your answers, get out. For those of you who will eventually be reading every single article, from business to programming to design….. AND you happen to be looking for a challenge … AND you’d like a (new) job … perhaps you should really be contacting us for a job!

JQuery Progress Bar 1.2

gaweee — Wed, 11 Feb 2009 09:58:01 +0000

Thanks for all the comments and feedback! By popular request i’ve added the multi-colored progress bar and fixed some bugs. The new multi-colored bar changes from red to orange and then to green at configurable intervals. Check out the demo!

Since the last update this endeavour has seen comments claiming that it works and sometimes that it doesnt. I’ve tested the demo across Safari, Opera, IE6/7, Firefox and Chrome. Havent found any problem. For those of you who have problems, please do email me the problem.

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

HOWTO: Readymade Form CSS and Highlighting

gaweee — Sun, 08 Feb 2009 19:48:59 +0000

We’ve been working on web development for awhile now, i’ve really only seen a handful of pretty forms. The interfaces seen at Uni-Form, mooflex and even to a certain extent linuxjournal are all intuitive and well thought out.

So in the good ol WITS culture, we’ve tried our hand at building our own version of a universal form interface. Alot of features were borrowed off work already done at Uni-Form. We just made it jQueried, lighter and more readable. Like all other jQuery plugins, insert jquery.js, insert the jquery.witsform.js script, insert the css, use the right html code, and you’re done! I’m pretty sure as time goes by i’ll keep improving it. So here’s version 1.0 meanwhile. We bothered so that you shouldnt have to.

download the jQuery WITSForm here: jQuery WITSForm
or view the demo here

EXTJS themed file input field

gaweee — Mon, 01 Sep 2008 16:38:14 +0000

Theming a file input field has always been notoriously hard. Thanks to the guys who wrote the Ext UploadDialog script, theres now a better and more aesthetically pleasing way to create a file upload. I tried using their script wholesale but ran into some problems with the layout. So i kinda hacked and extracted their Ext.ux.BrowseButton code.

So now you can use it simply with:

	new Ext.ux.BrowseButton({
		input_name: "uploadfile1",
		text: "Select a file"
		onInputFileChange: function() {
			alert("you chose " + this.getInputFile().dom.value);
		}
	})
 
	new Ext.ux.TBBrowseButton({
		input_name: "uploadfile2",
		text: "Select another file"
	})

The first chunk of code creates a Browse Button (File Input) control as with the name uploadfile1. and the second chunk of codes creates a ToolBar Browse Button with the name uploadfile2.

Hypothetically you should be able to add a ToolBar button but i havent quite gotten a ToolBar Browse Button to fit aesthetically well inside a form. Let me know if you all come up with any examples that do!

Meanwhile, 3 cheers for the guys who wrote the Ext UploadDialog script!!!

Download the jQuery progressbar here: EXT Browse Button
or view the demo here

HOWTO: PHP and jQuery upload progress bar

gaweee — Wed, 25 Jun 2008 09:09:18 +0000

With the controllable jQuery Progress Bar, writing a form upload progress bar seems like a piece of cake now. Hypothetically, all we need is to create the bar, poll for the progress of the file upload, derive the new progress bar value (in percentage) and set it.

To do that you need to prepare the php script to do it. By default PHP cant report the progress of upload progress. However people smarter than me have already solved that problem. In 5 mins i’ve found 2 solutions: the Alternative PHP Cache (APC) method as well as the UploadProgress method. Both of them are PECL packages. Because i couldnt get APC to work on my server properly, i’ll document the UploadProgress more in detail here…

Step 1: Install the uploadprogress package. Really simple just run the following command

pecl install uploadprogress

Once that is done, register the extension to your PHP with the following line in your php.ini

extension=uploadprogress.so

then restart your apache/httpd

Step 2: Create the form and your progress bar

<form id="uploadform" enctype="multipart/form-data" method="post">
<input id="progress_key" name="UPLOAD_IDENTIFIER" type="hidden" value="<?= $uuid ?>" />
<input id="ulfile" name="ulfile" type="file" />
<input type="submit" value="Upload" />
	<span id="uploadprogressbar" class="progressbar">0%span>
form>

this creates the form with a file field as well as a unique UPLOAD_IDENTIFIER hidden field that allows our script to check the progress of the form submission.

Step 3: Next the script itself to check the respond with the progress of the form submission. Lets call this file uploadprogress.php

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 
if (@$_GET['id']) {
	echo json_encode(uploadprogress_get_info($_GET['id']));
	exit();
}

The header no-cache declarations circumvents IE’s cache of the response. Basically this form does nothing but respond with a json encoded string of the uploadprogress_get_info function. The id argument is the same one we used in the form. Think of it as a form-upload-process-id. A typical response looks like this:

{"time_start":"1214384364","time_last":"1214384366","speed_average":"25889","speed_last":"40952","bytes_uploaded" :"51778","bytes_total":"8125518","files_uploaded":"0","est_sec":"311"}

the response encodes a good deal of data about the form submission. most importantly for us: bytes_uploaded and bytes_total

Step 3: use jQuery and a timer to keep polling the page and update the progress bar value

var progress_key = '';
 
// this sets up the progress bar
$(document).ready(function() {
	$("#uploadprogressbar").progressBar();
});
 
// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
	$("#uploadprogressbar").fadeIn();
	setTimeout("showUpload()", 1500);
}
 
// uses ajax to poll the uploadprogress.php page with the id
// deserializes the json string, and computes the percentage (integer)
// update the jQuery progress bar
// sets a timer for the next poll in 750ms
function showUpload() {
	$.get("uploadprogress.php?id=" + progress_key, function(data) {
		if (!data)
			return;
 
		var response;
		eval ("response = " + data);
 
		if (!response)
			return;
 
		var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
		$("#uploadprogressbar").progressBar(percentage);
 
	});
	setTimeout("showUpload()", 750);
}

viola! read the comments if you dont understand the code. it is _THAT_ straightforward. Of course there can be many improvements such as stopping the script when the upload reaches 100% but thats probably not really needed since the whole page is refreshed. But this approach allows the flexibility of ajax submissions and what nots.

Again, download the jQuery progressbar here: jQuery progressbar
or view the demo here

Note: for the APC solution seekers out there, assuming you can get APC to work, the solution is not so different. A few changes will get your there:

Change the HTML hidden form field name from UPLOAD_IDENTIFIER to APC_UPLOAD_PROGRESS
Change the PHP uploadprogress_get_info($_GET['id']) to apc_fetch(‘upload_’.$_GET['id']));
Change the Javascript percentage calculation from:
Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
to:
Math.floor(100 * parseInt(response['current']) / parseInt(response['total']));

JQuery Progress Bar 1.1

gaweee — Fri, 20 Jun 2008 11:42:04 +0000

This code has been downloaded quite abit so i thought i’d put in some effort to improve it. I found some free time this evening to clean up the code. The original code is a couple of months old and its my first jquery plugin. I didnt quite understand what i was doing then.I made the code less resource intensive and more configurable.

The progress bar can now be controlled externally. click on the demo link below to see what i’m talking about. I’ll know of at least 1 bug in the script if its fully tested, will try to fix this within the week. Meanwhile if you have any ideas for improvements, please leave a comment!

Download the jQuery progressbar here: jQuery progressbar
or view the demo here