19 March 2013

create filter in controller symfony2

Sometimes you need to make changes to the Response object, after it is returned by your controller, but before it is rendered as output to the client (e.g. the browser). You may want to set some extra response headers, or "completely mess up the content" of the response. You can accomplish this by creating an event listener that listens to the kernel.response event. I give you a sample event listener which changes the Content-Type header in case the requested format is json and the browser’s accepted response format contains "text/html" in that case, at least in my experience, the browser doesn’t render the JSON string as plain text when the status code is 4xx or 5xx. So in these situations, the event listener changes the “Content-Type” to “text/plain”, to be sure you always get decent output in the browser.

Put the event listener in, for example /src/Acme/DemoBundle/EventListener/ResponseListener.php:

  
namespace Acme\DemoBundle\EventListener;
 
use Symfony\Component\HttpKernel\Event\FilterResponseEvent;
 
class ResponseListener
{
    public function onKernelResponse(FilterResponseEvent $event)
    {
        $request = $event->getRequest();
 
        // only do something when the requested format is "json"
        if ($request->getRequestFormat() != 'json') {
            return;
        }
         
        // only do something when the client accepts "text/html" as response format
        if (false === strpos($request->headers->get('Accept'), 'text/html')) {
            return;
        }
         
        // set the "Content-Type" header of the response
        $event->getResponse()->headers->set('Content-Type', 'text/plain');
    }
}

Now define the ResponseListener as a service in /src/Acme/DemoBundle/Resources/services.xml:

  
<?xml version="1.0" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
    <services>
        <service id="acme.filter_response_listener" class="Acme\DemoBundle\EventListener\ResponseListener">
            <tag name="kernel.event_listener" event="kernel.response" method="onKernelResponse" />
        </service>        
    </services>
</container>


Notice the “tag” tag, by which the kernel recognizes this service as an event listener. The event attribute tells the kernel which event this listener listens to. The “method” attribute tells which method should be called when the kernel.response event occurs.

In case you don’t want any other events to tamper with the Response, add a call to $event->stopPropagation().

15 March 2013

remove non ASCII characters from a String

Hi guys

I had a problem with removing non-utf8 characters from string, which are not displaying properly. Characters are like this 0x97 0x61 0x6C 0x6F (hex representation).

I am getting some encoded value from url. Let assume it's encoded email and value is ankitchauhan22@gmail.com
When I tried to find out the length of this string as
  
$email = somefunction($encodedStringFromUrl);
$length = strlen($email);
print $length;
    
 
I was shocked. It's printing 37 instead of 24. Than I printed each index of this string on the string but after 24 character, nothing printed.

I used trim() to remove whitespace but didn't work.

Then I tried something which worked for me.

This is a little snippet that will remove any non-ASCII characters from a string.
  
$string = "ankitchauhan22@gmail.com äó";
$string = preg_replace('/[^(\x20-\x7F)]*/','', $string);
    
 
Now It's printing 24.

13 March 2013

jQuery & JavaScript PDF Viewer plugin

Hi guys

In this Post I'm providing best jQuery PDF viewer plugin & tutorial with examples. Due to popularity of online document viewer like Google Docs some javascript developers develop a good and useful plugins to view pdf file on online pdf viewer.Here is some good list of online pdf viewers.

  1. JavaScript PDF Reader : pdf.js
    It's an HTML5 experiment that explores building a faithful and efficient PDF renderer without native code assistance.
    pdf.js
    Read More Demo
  2. jQuery Media Plugin
    The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page and is compatible with all web hosting services The plugin converts an element which holds the object, embed iframe tags neccessary to render the media content.
    jQuery Media Plugin
    Demo
  3. PDFObject : Embeds PDF files into HTML documents
    A JavaScript library for dynamically embedding PDFs in HTML documents. Modeled after SWFObject.
    Embeds PDF files into HTML documents
    Demo
  4. Google Docs Viewer plugin for jQuery
    The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.
    Google Docs Viewer plugin for jQuery
    Demo
  5. ZOHO Viewer plugin for jQuery
    The ZOHO Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This, just like Google Docs Viewer, bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser. Automatically embeds the ZOHO viewer for viewing the doc, docx, xls, xlsx, ppt, pptx, pps, odt, ods, odp, sxw, sxc, sxi, wpd, pdf, rtf, txt, html, csv, tsv files it supports linked to by anchor tags.
    ZOHO Viewer plugin for jQuery
    Demo
  6. jsPDF : Generate PDF files using pure client-side JavaScript
    It is an open-source library written by our lead developer, James, for generating PDF documents using nothing but JavaScript. You can use it in a Firefox extension, in Server Side JavaScript and with Data URIs in some browsers.
    jsPDF : Generate PDF files using pure client-side JavaScript
    Demo
  7. jQuery Document Viewer
    Document Viewer is a jQuery plugin that allows you to view several file formats directly in a web page.
    jQuery Document Viewer
    Read More Demo

12 March 2013

css3 tips and tricks collection

You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks. Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices.

CSS level 3 has been under development since December 15, 2005. CSS3 is modularized and consists of several separate recommendations. CSS3 is one of the more exciting and versatile developments for the web in some time. In this article I am going to create a huge list of CSS3 Tips, Tricks and Tutorials for Web Developers.

Useful Link : Be updated with these
  1. Featured Table Design With CSS3
  2. Basic CSS3 Techniques That You Should Know
  3. CSS3 Animated Bubble Buttons
  4. How To Create CSS3 Christmas Tree Ornaments
  5. Quick Tip : New HTML5 Form Features
  6. The State Of CSS3 In Email Templates
  7. CSS3 Transition Tutorial – Menü mit Slide-Effekt im Apple-Style
  8. Semantic CSS3 Lightboxes
  9. Creating A Realistic Looking Button With CSS3
  10. CSS3 Gradient Buttons
  11. Pure CSS3 Speech Bubbles
  12. Shadows And CSS3
  13. Dynamic PNG Shadow Position And Opacity
  14. Take Your Design To The Next Level With CSS3
  15. CSS3 Font-Face Or How To Use A Custom Font For Your Website
  16. CSS3 Fundaments – CSS3 Transitions
  17. Design A Prettier Web Form With CSS3
  18. Create A Sticky Note In 5 Easy Steps With CSS3 And HTML5
  19. Quick Tip : The Multi Column CSS3 Module
  20. Exciting Functions And Features
  21. Quick Tip : Understanding CSS3 Gradients
  22. How To Create Inset Typography With CSS3
  23. Build Awesome Practical CSS3 Buttons
  24. The State Of CSS3
  25. CSS3 Gradients : Quick Tutorial
  26. Easy And Fast CSS3 Techniques For Faux Image Cropping
  27. Understanding The Basics Of CSS3
  28. CSS3 Solutions for Internet Explorer
  29. How To Use CSS3 Orientation Media Queries
  30. CSS3 Transitions – Are We There Yet?
  31. Create A Color Changing Website Using CSS3
  32. Photoshop Effect vs CSS3 Properties
  33. 10 Awesome CSS3 Techniques To Improve Your Design
  34. Cross- Browser Rounded Buttons With CSS3 And jQuery
  35. Stylize Input Element Using CSS3
  36. Contextual Slideout Tips With CSS3 And jQuery
  37. Push Your Web Design Into The Future With CSS3
  38. A Look At Some Of The New Selectors Introduced In CSS3
  39. CSS3 Cheat Sheet (Pdf)
  40. Super Awesome Buttons With CSS3 And RGBA
  41. CSS3 Border Radius Property
  42. Overview Of CSS3 Structural Pseudo- Classes
  43. Sweet Ajax Tabs With jQuery And CSS3
  44. 3D Ribbons Only Using CSS3
  45. Text Rotations With CSS3
  46. Old School Clock With CSS3 And jQuery
  47. Editable CSS3 Image Gallery
  48. Drop Down Menu Tutorial
  49. Multiple Columns
  50. Multiple Backgrounds
  51. Create The Accordion Effect With CSS3
  52. CSS3 Opacity
  53. Create A Polaroid Photo Viewer With CSS3 And jQuery
  54. Sweet Tabbed Navigation Bar Using CSS3
  55. Rounded Corner Boxes
  56. A Crash Course In Advanced CSS3 Effects
  57. Halftone Navigation Menu With CSS3 And jQuery
  58. Awesome Overlays In CSS3
  59. Fancy Web Form With Field Hints Using Only CSS3
  60. CSS3 Gradients : No Image Aqua Button
  61. Box Shadows
  62. How To Use CSS3 Orientation Media Queries
  63. A Handful Of CSS3 Trends And How To Use Them
  64. The CSS3 Flexible Box Model
  65. Selectors Introduced In CSS3
  66. Create A Beautiful Looking Custom Dialog Box With jQuery And CSS3
  67. Get The Best Out Of CSS3
  68. Fundamental Problems With CSS3
  69. Pretty CSS3 Buttons
  70. Going Nuts With CSS3 Transitions

11 March 2013

speed up symfony2 application with varnish

Hi everyone,

Just a quick note about Varnish integration for symfony. I’m sure you have heard of Varnish reverse proxy server.
Varnish is a web accelerator written with performance and flexibility in mind. It’s modern architecture gives it a significantly better performance than many of it’s competing products. Varnish store web pages in memory so the web servers don’t have to create the same web page over and over again. The web server only recreate a page when it is changed. Additionally Varnish can serve web pages much faster then any application server is capable of – giving the website a significant speed up.
So in first order you may be interested to integrate Varnish to handle pages which don’t require authentication (for myself I’m still not sure if there is any advantage for integrating pages for logged in users):
  
sub vcl_recv {
    set req.http.Surrogate-Capability = "abc=ESI/1.0";
}
sub vcl_fetch {
    if (beresp.http.Surrogate-Control ~ "ESI/1.0") {
        unset beresp.http.Surrogate-Control;
        set beresp.do_esi = true;
    }
}
  
Symfony2's cache uses the standard HTTP cache headers, the Symfony2 Reverse Proxy can easily be replaced with any other reverse proxy. Varnish is a powerful, open-source, HTTP accelerator capable of serving cached content quickly and including support for Edge Side Includes.

08 March 2013

Creating a PrestaShop module

A PrestaShop module consists of:
  • A root folder, named after the module, which will hold all of the module's files, and will reside in PrestaShop's /modules folder.
  • A main PHP file, named after the module, located in that root folder. This PHP file should have the same name as its root folder.
  • An icon file, named logo.gif, representing this module.
  • Optional: some .tpl files, containing the module's theme.
  • Optional: language files, if the module or its theme have text to display (and therefore, that should be translatable).
  • Optional: in a /themes/modules folder, a folder with the same name as the module, containing .tpl and language files if necessary. This last folder is essential during modifications of existing module, so that you can adapt it without having to touch its original files. Notably, it enables you to handle the module's display in various ways, according to the current theme.
Now I am going to create a module named Testmodule.

Your module can be called anything you like. My module will be called Testmoduleas that is what is will be doing - taking off line payments. So create a directory under your PrestaShop.

C:\wamp\www\prestashop\modules\Testmodule see below for an example:-
prestashop folder

Create your module's "class" .php file

PrestaShop modules must have one php file which contains the Class definition. This class definition contains the core functions of your module. The file needs to be given the same name as your module so in my case it must called testmodule.php and it needs to live in the root of the modules directory.

Every PrestaShop module has to consist of three necessary functions:
  1. __construct() – here you provide all the information about your module – module name, version and description which are visible in the backend. In addition, you can choose in which tab to show your module, for example, Products.
  2. install() – this function also does not have parameters, but is very important. Here you have to register all the hooks you will be using, create necessary database table changes (create, add columns, prepare it and so on) and initiate default module options.
  3. uninstall() – the same as above, except here you have to delete all your tables if necessary. Do not forget to delete configuration options too.
  
class TestModule extends SomeModule  {

 //this declares the class and specifies it will extend the some module

    private $_html = '';
    private $_postErrors = array();
 
    function __construct()
    {
        $this->name = 'testmodule';
        $this->tab = others;
        $this->version = 1;
        $this->author = 'Ankit Chauhan';

        parent::__construct(); // The parent construct is required for translations
 
        $this->page = basename(__FILE__, '.php');
        $this->displayName = $this->l('Test Module');
        $this->description = $this->l('Testing module check');
 
    }
    function install()
    {
      // your code here
    }
    function unstall()
    {
      // your code here
    }
}



Now you can upload everything to your server and install module from the backend.

01 March 2013

Styling Progress Bar With HTML5

0%

HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress

progress bar

Basic Usage

The progress bar can be added with <progress>; the progress value is determined with the value, min and max attributes, as follows.
  
<progress value="40" max="100"></progress>  
  

Since this is a native progress bar, the presentation is vary dependent on the platform. Below is how a native progress bar looks in Windows and OSX.



Now, let's try styling this progress bar, so it has a consistent or similar look across all platform.

Styling Progress Bar

In the stylesheet, we actually can use the element selector to target and add style rules to <progress> element. In this example, we change the background color, remove the border line, and make it rounded by adding a border radius at half of its height.
  
progress {  
    background-color: #f3f3f3;  
    border: 0;  
    height: 18px;  
    border-radius: 9px;  
} 
  
However, each browser handles this a bit differently.

In Firefox, the styles affect the progress bar, while the progress meter / value is not affected.

In Chrome and Safari, it will remove the native styles and presentation from the platform and replace it with the Webkit stylesheet, the styles above will not be applied (at least, at the moment).

So, we need some more workaround in these cases.
progress style

In Chrome and Safari, the progress element is translated this way.
  
<progress> 
    ┗ <div>  ::-webkit-progress-bar  
         ┗ <div> ::-webkit-progress-value 
  
Thus, to change the progress bar and the progress value styles in these browsers, we need to add those Webkit pseudo-classes.
  
progress::-webkit-progress-bar {  
    /* style rules */  
}  
progress::-webkit-progress-value {  
    /* style rules */  
}  
  
Firefox also has its special pseudo-class that is ::-moz-progress-bar. Unlike Chrome and Safari, this pseudo-class in Firefox refers to the progress meter/value.
  
progress::-moz-progress-bar {  
    /* style rules */  
}   
  
To conclude, these are currently the entire selectors for styling HTML5 progress bar.
  
progress {  
    /* style rules */  
}  
progress::-webkit-progress-bar {  
    /* style rules */  
}  
progress::-webkit-progress-value {  
    /* style rules */  
}  
progress::-moz-progress-bar {  
    /* style rules */  
} 
  

Animate The Progress

Next, we will see how to animate the progress bar. Typically, the progress bar expands from left to right as the task progresses.

The idea is, the progress bar will expand from 0 and stop once it reaches the maximum value. We will also display the value number as it is progressing. Below is the HTML structure.

HTML
  
<progress id="progressbar" value="0" max="100"></progress>    
  

CSS

In this example, we will use jQuery to animate the progress bar. So, we should also not forget to insert the jQuery, like so.
  
<script src="path_to_folder/jquery.js" type="text/javascript"></script>  
  
Then, we add the scripts to make the progress bar expand. First, we store the progress bar element, the progressbar value as well the maximum value, and the timeframe, in Variables.
  
var progressbar = $('#progressbar'),  
    max = progressbar.attr('max'),  
    value = progressbar.val(),  
    time = (1000/max)*5;   
  
Next, we create a variable that store the animation function. In this example, we call the variable loading.
  
var loading = function() {  
  
}   
  
Inside the above function, we set the progress interval. We will increase the value by 1 per timeframe — you can increase the value to make the progress run faster.
  
value += 1; 
  
And then, we add the result to the progress bar.
  
addValue = progressbar.val(value);  
  
We also show the value inside, next to the progress bar.
  
$('.progress-value').html(value + '%');  
  
Next, we create a new function to run the animation function.
  
setInterval(function() {  
    loading();  
}, time);  
  
At this point, the animation is already functioning. However, the value will keep increasing infinitely. So, we need to create a conditional statement for the animation to stop when it reaches its maximum value.
First, let's store the above function in a variable like so.
  
var animate = setInterval(function() {  
    loading();  
}, 
  
And, inside the loading variable, we add the conditional statement, as follow.
  
if (value == max) {  
    clearInterval(animate);  
} 
  
The above script states that once the value is equal to the maximum value, clear the interval, which will stop the animation function.
That's it and here are all the codes to animate the progress bar.
  
$(document).ready(function() {  
    var progressbar = $('#progressbar'),  
        max = progressbar.attr('max'),  
        time = (1000/max)*5,      
        value = progressbar.val();  
  
    var loading = function() {  
        value += 1;  
        addValue = progressbar.val(value);  
          
        $('.progress-value').html(value + '%');  
  
        if (value == max) {  
            clearInterval(animate);                      
        }  
    };  
  
    var animate = setInterval(function() {  
        loading();  
    }, time);  
};