I’ve compiled a list of all code snippets in CakePHP which help me doing things faster in Cake. I hope this will be helpful for you too.
1. Tag Cloud: Web2.0 way of showing tags.. This customizable snippet will allow you to add tag cloud easily.
2. AJAX Auctocomplete: Another basic requirement of the latest web technologies. Also check out the Autocomplete article to implement the same.
3. AJAX Star Rating: This is a great one, lets you implement the rating system with your Cake application very fast and without any pain.
4. AJAX Chat Plugin: This is my favorite one, lets you implement AJAX chat easily - this can serve so many purposes in an application.
5. Flickr Gallery: This is a great article by Jonathan Snook. Lets you create a flexible attractive gallery with your own application.
6. GeoCoding: Good for mashup applications which uses Google Maps or Yahoo maps.
7. Ajax Validation Component: This component adds a few validation options to CakePHP validations. And yes, its more web2-ish.
8. Lightbox Effect Helper: Easily implement lightbox effect to your links and images.
9. Google Map Helper: Lets you add Google Map to any application in no-time, lacks flexibility, but speeds up the implementation process. This was developed by me.
10. jQuery Helper: jQuery is designed to change the way that you write JavaScript.
Please feel free to add up more to the list.
Additional Stuff:
1. Submit forms with AJAX in CakePHP
2. Enable SOAP Services in Cake
3. RESTful Web Services With CakePHP
Many times we need to show different icons for different files - mostly when files are being uploaded from various members.
Here's what we are trying to do:
Normally, it can be done with PHP, i.e. assign CSS classes dynamically, but that is way too inefficient after jQuery showed me the new method.
So, how to do it with jQuery ?
Given this snippet:
HTML:
-
<div class="attachment"><a href="http://www.gigapromoters.com/blog/file.doc">mydocument.doc
</a> <a href="http://www.gigapromoters.com/blog/file.pdf">mypdf.pdf
</a> <a href="http://www.gigapromoters.com/blog/file.png">myimage.png
</a> <a href="http://www.gigapromoters.com/blog/file.txt">mytext.txt
</a></div>
1. Lets define CSS, and put icons in required directory.
Here's the css which I'll be using:
CSS:
-
div.attachment a
-
{
-
color: black;
-
font-weight: bold;
-
padding-left: 32px;
-
display: block;
-
height: 25px;
-
padding-top: 6px;
-
-
}
-
.pdf
-
{
-
background: url('pdf.png') no-repeat;
-
background-position: 5px 50%;
-
}
-
.doc
-
{
-
background: url('doc.gif') no-repeat;
-
background-position: 5px 50%;
-
}
-
.txt
-
{
-
background: url('text.gif') no-repeat;
-
background-position: 5px 50%;
-
}
-
.img
-
{
-
background: url('img.png') no-repeat;
-
background-position: 5px 50%;
-
}
2. Now, we need to write Javascript using jQuery so our files get their respective class names in order to assign different icon for different file types.
$('div.attachment a[@href$=pdf]').attr('class','pdf');
using selector to find all the 'a' tags where attribute 'href' end with 'pdf'.. simple enough ? as soon as selector does it work and return the matched elements, we assign to 'class' attribute, the value 'pdf'.. and done..! So, we can complete this for the rest of file types.
JavaScript:
-
$(document).ready(function() { //as soon as jQuery is initialized after page load
-
-
$('div.attachment a[@href$=pdf]').attr('class','pdf');
-
$('div.attachment a[@href$=doc]').attr('class','doc');
-
$('div.attachment a[@href$=txt]').attr('class','txt');
-
$('div.attachment a[@href$=png]').attr('class','img');
-
}
Here's the demo
$('div.attachment a[@href$=png]').attr('class','img');
This can improved to support multiple file types like jpg, jpeg and others, but I didnt go into much depth... If anyone already knows, I would love to see that trick.
- Abhimanyu Grover