Codez Blog

Dynamically Styling Modules and Blocks in Drupal 6

Sandipan Bhattacharjee — Thu, 22 Sep 2011 09:31:48 +0000

The default templates and themable functions contribute a good deal to the productivity on a Drupal site, and several are positioned on the page through the assignment of blocks to regions. Today we will focus mainly on how to control the formatting of a site’s various modules and blocks.

1. Dynamically Styling Blocks:

Block output is controlled by the block.tpl.php template. As in other areas, PHPTemplate will look to the names given to multiple template files to determine which template to display. The order of precedence used for the block template is consistent with that used elsewhere.
• you can provide a template to apply to the blocks of a specific module of a specific delta `(block-modulename-delta.tpl.php)`.
• You can also attach a template to blocks of a module by module name `(block-modulename.tpl.php)`, or to the blocks of a particular region `(block-regionname.tpl.php)`.
• If nothing is specified, the system applies the default `block.tpl.php` template.
If you are not certain of the attribution of your block, that is, the name of the module that produces the block or the block’s delta, try using the Theme Developer feature of the Devel module. If you have the Devel module installed on your site, you can yield information in the form of a list of suggestions quite effortlessly
• Install the Devel module.
• Activate the Theme Developer option.
• Open your browser and go to the page where your block appears.
• Click the **Themer Info** checkbox on the bottom left of the screen, then click on the block in question.
When you click on the element, a pop up will appear:

2. Dynamically Styling the Forum Module:
The base template of the forum module is `forums.tpl.php`. There are several suggestions for both forum containers and topics:

3. Dynamically Styling the Polls Module:
The Polls module is the subject to a number of default templates. There are default suggestions available for all the key templates:

4. Dynamically Styling Nodes:
PHPTemplate provides an explicit template for nodes—`node.tpl.php`. In the absence of a more specific template, the system will apply the default `node.tpl.php` file. The table below shows the suggestions for the default system:

How to Theme profile2 module form

rupak — Thu, 22 Sep 2011 09:05:56 +0000

In drupal the form is rendered using the form rendering system, which doesn’t include template files.
To theme the profile 2 form we use “hook_theme()”.
Go through the steps:
1. In this step copy the code in template.php of the theme or any php file and include the file in template, php used with proper theme name and form id. Here we are using ZUK theme and ‘user-profile2-form’ form id

function zuk_theme($existing, $type, $theme, $path){
return array(
‘user-profile2-form ‘ => array(
‘render element’ => ‘form’,
‘template’ => ‘user-profile-form’,// new form template name
‘path’ => drupal_get_path(‘theme’, ‘zuk’) . ‘/templates’,
//add ‘/templates’ only if you store template files in an additional folder
),
);
}

This tells the Drupal theming system that there’s a template file waiting for it in zuk/templates.

2. Next we define variables to pass into that template in a “hook_preprocess_HOOK” function. You can find the structured array of the form in “$variables['form']” and assign the form elements to the variables we’d like to throw around our tpl.php file.

function
zuk_preprocess_user-profile2-form (&$variables) {
$variables['rendered'][‘first_name’] = drupal_render($variables['form']['first_name']);
$variables['rendered'][‘last_name’] = drupal_render($variables['form']['last_name']);
}

use var_dump(($variables['form']) to see all the element of the array (i.e form element)

3. Create a new template file named .tpl.php in ‘YOURTHEME/templates’. Same as name of template mentioned in zuk_theme() function.

{div id=”new-form_template”}
{?php echo $rendered[first_name]; ?}
{?php echo $rendered[last_name]; ?}
{/div}

In the above code “< >” are replaced by “{ }”
Now you can see the changes in edit tab of the profile pages.

Note: The hidden file like form_id and token must be there inside the form. Otherwise the form saves not working.

Display your Google Calendar in Windows Calendar

paramita — Thu, 22 Sep 2011 07:46:38 +0000

Google Calendar and similar other online calendaring applications provide simple centralized systems, where online communities can maintain event calendars and community members can extract information about upcoming events. But many organizations prefer to display event calendars on their community portals, forums, or blogs. They often copy event calendar information from online calendaring applications onto their Web sites, reducing the effectiveness of centrally managed events online. Google Calendar provides an integrated application program interface (API) that solves the problem.
To subscribe to your Google Calendar, you’ll first need to get the iCal link to your calendar.

In Google Calendar: Go to Settings \ Calendars and then click on your calendar in the list.
You should see a “Private Address” section:

Right click on the ICAL link, and choose Copy Shortcut to copy the link to the clipboard.
Now open Windows Calendar, and click the Subscribe buttton on the toolbar:

Paste the URL into the textbox, and hit the Next button:

After what seems like far too long, you’ll see the next screen:

The key thing that you’ll want to choose on this screen is the Update interval, which will keep the calendar automatically sync up.
That’s all there is to it. Notice the blue appointments are the ones that came from Google Calendar:

Excerpted from : http://www.howtogeek.com/howto/windows-vista/display-your-google-calendar-in-windows-calendar/

SQL Query Optimization

Sahel Aktar — Wed, 21 Sep 2011 11:25:30 +0000

Today we will learn a few interesting things about SQL Query Optimization.

How to get query execution time and executed query number?

Follow the code given below:

function timer()
{
$time = explode(‘ ‘, microtime());
return $time[0]+$time[1];
}
$beginning = timer();
$timer_queries += round(timer()-$beginning,6);

The sql query becomes faster if you use the actual columns names in SELECT statement instead of than ‘*’.
For Example: Write the query as
SELECT id, first_name, last_name, age, subject FROM student_details;
Instead of:
SELECT * FROM student_details;
HAVING clause is used to filter the rows after all the rows are selected. It is just like a filter. Do not use HAVING clause for any other purposes.
For Example: Write the query as
SELECT subject, count(subject)
FROM student_details
WHERE subject != ‘Science’
AND subject != ‘Maths’
GROUP BY subject;
Instead of:
SELECT subject, count(subject)
FROM student_details
GROUP BY subject
HAVING subject!= ‘Vancouver’ AND subject!= ‘Toronto’;
Sometimes you may have more than one subqueries in your main query. Try to minimize the number of subquery block in your query.
For Example: Write the query as
SELECT name
FROM employee
WHERE (salary, age ) = (SELECT MAX (salary), MAX (age)
FROM employee_details)
AND dept = ‘Electronics’;
Instead of:
SELECT name
FROM employee
WHERE salary = (SELECT MAX(salary) FROM employee_details)
AND age = (SELECT MAX(age) FROM employee_details)
AND emp_dept = ‘Electronics’;
Be careful while using conditions in WHERE clause.
For Example: Write the query as
SELECT id, first_name, age FROM student_details WHERE age > 10;
Instead of:
SELECT id, first_name, age FROM student_details WHERE age != 10;
Write the query as:
SELECT product_id, product_name
FROM product
WHERE unit_price BETWEEN MAX(unit_price) and MIN(unit_price)
Instead of:
SELECT product_id, product_name
FROM product
WHERE unit_price >= MAX(unit_price)
and unit_price <= MIN(unit_price)

In SQL, wildcard is provided for us with ‘%’ symbol.

Using wildcard will definitely slow down your query especially for table that are really huge. We can optimize our query with wildcard by doing a postfix wildcard instead of pre or full wildcard.

#Full wildcard
SELECT * FROM TABLE WHERE COLUMN LIKE ‘%hello%’;
#Postfix wildcard
SELECT * FROM TABLE WHERE COLUMN LIKE ‘hello%’;
#Prefix wildcard 6 SELECT * FROM TABLE WHERE COLUMN LIKE ‘%hello’;

count vs exist

Some of us might use COUNT operator to determine whether a particular data exist 1. SELECT COLUMN FROM TABLE WHERE COUNT(COLUMN) > 0
Similarly, this is very bad query since count will search for all record exist on the table to determine the numeric value of field ‘COLUMN’. The better alternative will be to use the EXIST operator where it will stop once it found the first record. Hence, it exist.
Limit The Result
Another common way of optimizing your query is to minimize the number of row return. If a table have a few billion records and a search query without limitation will just break the database with a simple SQL query such as this.
1 SELECT * FROM TABLE
Hence, don’t be lazy and try to limit the result turn which is both efficient and can help minimize the damage of an SQL injection attack.
1 SELECT * FROM TABLE WHERE 1 LIMIT 10

In Subquery
Use operator EXISTS, IN and table joins appropriately in your query.
a) Usually IN has the slowest performance.
b) IN is efficient when most of the filter criteria is in the sub-query.
c) EXISTS is efficient when most of the filter criteria is in the main query.
For Example: Write the query as
Select * from product p
where EXISTS (select * from order_items o
where o.product_id = p.product_id)
Instead of:
Select * from product p
where product_id IN
(select product_id from order_items
Some of us will use a subquery within the IN operator such as this.
1 SELECT * FROM TABLE WHERE COLUMN IN (SELECT COLUMN FROM TABLE)
Doing this is very expensive because SQL query will evaluate the outer query first before proceed with the inner query. Instead we can use this instead.
1 SELECT * FROM TABLE, (SELECT COLUMN FROM TABLE) as dummytable WHERE dummytable.COLUMN = TABLE.COLUMN;
Using dummy table is better than using an IN operator to do a subquery. Alternative, an exist operator is also better.
Utilize Union instead of OR
Indexes lose their speed advantage when using them in OR-situations in MySQL at least. Hence, this will not be useful although indexes is being applied
1 SELECT * FROM TABLE WHERE COLUMN_A = ‘value’ OR COLUMN_B = ‘value’
On the other hand, using Union such as this will utilize Indexes.
1 SELECT * FROM TABLE WHERE COLUMN_A = ‘value’
2 UNION
3 SELECT * FROM TABLE WHERE COLUMN_B = ‘value’
Hence, run faster.

To create a password meter using Javascript

rajat — Wed, 21 Sep 2011 07:23:45 +0000

We can see various type of password strength meter when we are registering on different types of websites. Here I will show you how to create a simple password strength meter using JavaScript and PHP.

There will be three steps:

1st create a html form:

{form method=”post”}
{h1}Password strength meter{/h1}
{label for=”pass”}Password{/label}
{input type=”password” name=”pass” id=”pass” onkeyup=”passwordStrength(this.value)” /}

{label for=”passwordStrength”}Password strength{/label}

{div id=”passwordDescription”}Password not entered{/div}

{div id=”passwordStrength” class=”strength0″}{/div}

{/form}

the “< >” are replaced with “{ }” for convenience.
2nd Create a style sheet which will help us to show the strength meter in different colour:

#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:250px;
background:#cccccc;
}
.strength1
{
width:50px;
background:#ff0000;
}
.strength2
{
width:100px;
background:#ff5f5f;
}

.strength3
{
width:150px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:200px;
}
.strength5
{
background:#399800;
width:250px;
}

3rd and most important step that is to create the javascript code:

function passwordStrength(password)
{ var desc = new Array();
desc[0] = “Very Weak”;
desc[1] = “Weak”;
desc[2] = “Better”;
desc[3] = “Medium”;
desc[4] = “Strong”;
desc[5] = “Strongest”;
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;

//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;

//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;

//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById(“passwordDescription”).innerHTML = desc[score]; document.getElementById(“passwordStrength”).className = “strength” + score;}

Value of META TAG

arindam — Wed, 21 Sep 2011 07:12:39 +0000

Meta tags are HTML codes that are inserted into the header on a web page Meta tag helps Google search simpler. The word Meta means information about. Meta tag gives information inserted into the “head” area of your web pages. Meta tags, for example, can tell a browser what “character set” to use or whether a web page has self-rated itself in terms of adult content. The reason why Meta tags used to be so important was because they were relied on by search engines to build a profile of a web page. It also helps to increase page ranking in internet in a minor way.

There are some rules or guidelines to put your Meta tag:

Keep your list of keywords or keyword phrases down to 10 – 15 unique words or phrases
Separate the words or phrases using a comma (you do not need to leave a space between words separated by commas
Do not repeat words or phrases
put your most important word or phrases at the beginning of your list

For example: if you have a page of Software Testing and you write “softwaretesting” as a single word in Meta tag. But some people may instead search for “software testing” with “software testing” in their searches being two separate words.

Therefore, if you write “software testing” as different word, then may be your page will be ranked better.

Several great SEO tips

Subhankar Das — Wed, 21 Sep 2011 05:38:21 +0000

Here are 9 of the top 52 tips on how to optimize your website for its turbo-charge rocket ride up the search engine rankings.

Be bold: Use the tags around some of your keywords on each page. Do NOT use them everywhere the keyword appears. Once or twice is plenty.
Deep linking: Make sure you have links coming in to as many pages as possible. What does it tell a search engine when other web sites are linking to different pages on your site? That you obviously have lots of worthwhile content. What does it tell a search engine that all your links are coming in to the home page? That you have a shallow site of little value, or that your links were generated by automation rather than by the value of your site.
Social bookmarking: Make it easy for your visitors to social bookmark your website, creating important links that the search engines value. There are plenty of free social bookmarking widgets available.
Newsletters: Offer articles to ezine publishers that archive their ezines. The links stay live often for many years in their archives.
First come, first served: If you must have image links in your navigation bar, include also text links. However, make sure the text links show up first in the source code, because search engine robots will follow the first link they find to any particular page. They won’t follow additional links to the same page.
Multiple domains: If you have several topics that could each support their own website, it might be worth having multiple domains. Why? First, search engines usually list only one page per domain for any given search, and you might warrant two. Second, directories usually accept only home pages, so you can get more directory listings this way. Why not a site dedicated to gumbo pudding pops?
Article exchanges: You’ve heard of link exchanges, useless as they generally are. Article exchanges are like link exchanges, only much more useful. You publish someone else’s article on the history of pudding pops with a link back to their site. They publish your article on the top ten pudding pop flavors in Viet Nam, with a link back to your site. You both have content. You both get high quality links. (More on high quality links in other tips.)
Titles for links: Links can get titles, too. Not only does this help visually impaired surfers know where you are sending them, but some search engines figure this into their relevancy for a page.
Not anchor text: Don’t overdo the anchor text. You don’t want all your inbound links looking the same, because that looks like automation – something Google frowns upon. Use your URL sometimes, your company name other times, “Gumbo Pudding Pop” occasionally, “Get gumbo pudding pops” as well, “Gumbo-flavored pudding pops” some other times, etc…..

I will provide the next set of tips in my next blog.

Cross-browser Compatibility

mukund — Tue, 20 Sep 2011 06:19:30 +0000

Cross browser compatibility is an option to test the compatibility of your web site among the oceans of other sites. There is a possibility of surfing out your web site from browser as for their wish or else lack of effectiveness in the web site. This is written for designer and developer to over come all the drawbacks of earlier testing options.
Being a web designer finding place in popular browsing option like firefox, safari,chrome, internet explorer is important. Browser testing is the part and partial of designing and development process. Many tools and resources are created to help you to test competition among other web sites. Protesting against the danger of surfing out is necessary for designers, so following are some such tools and resources to help you to check your compatibility.
Test Compatibility Online:

Browsershots

Browser shot is free open online web application to provide a convenient to way to web developer to test their browser’s compatibility. It makes screen shot of your web design in different operating systems and browsers.

Cross browser testing
This is a browser testing centre to check cross browser compatibility of your web site.You can also interactively test your ajax, javascipt from any where.

IE netrenderer
Netrenderer allows you to check how your web site rendered by internet explorer. This tool is suitable for web designer who works apple imac and linux. It allows you to verify web design in all popular internet explorers.

IEtester
IEtester is a browser compatibility test for web developer. And it is a free web browser tha allows you to get rendering and javascript engine like IE9 preview, IE8, IE7, IE 6 and IE5.5 on windows 7, vista and XP.

Website viewer
Web site viewer is tool where you can view your own site as other browser.It is a source for browser compatibility testing.
Fundisom
Lixlpixl web development screenshot generator is comparison tool that allows you to see your site on Macintosh G5 in safari, MacIE or in mozilla.
Lynx viewer
Lynxview allows web developer to see how their page looks. It is a text browser for World Wide Web. You can download this and run it in your own machine.
IEtab
IEtab is a tool for web developer that allows you to see how your website in IE.
IEcapt
Iecapt is a small command line utility service that captures internet explorer which rendering a web page into BMP, JPEG or PNG image files. It is also available in C++ and C# version.
Abode meermeer
Meermeer is a wonderful testing tool projected by Abode. It lets web developer to send a code and instantly receive back the screen shot of that page by different browser.

Plugins and Tools:

Litmus
Litmus is a secret weapon for web marketer to test and track their email campaigns. So you can always put your design forward.

Spoon on browsers
The Spoon Browser lets you run all popular web browsers, including internet explorer, firefox, chrome, and opera. In this tool you can directly run these web browsers, there is no need to install it.

Browsera
Browsera is a testing tool, it tests and reports cross-browser layout differences and scripting errors on your site. Here instead of checking each screenshot, you will get detailed report of problem of a particular page.

Expression web superpreview
Expression web superpreview is a browser comparison tool. It lets you to view your page in a multiple browsers page simultaneously. This allows you to test your page in designing process itself.

Multi-safari
Multisafari is a newly developed tool for web designer to test compatibility of their site. It has bundles of application inside like safari for leopard, safari tighter, safari for panther and safari for jaguar to provide various services to web developer.
MultipleIE
MultipleIE is gifted by softonic to web designer to test their web site in internet explorer.
Sortsite professional
Software professional allows web developer, owner to check standard compliance and quantity issues. It produces a report of problems after checking each page.
Lunascape
Lunascape is a triple engine browser to support web developer and web designer. It provides different services like, simple refined interface, greater extensibility and flexibility, it displays side by side with the help of split tab display and lightening fast in browsing process.

Cross browser testing with clouds
Cross browser testing offers many services for developer and tester and to website manager. Those are find issues earlier, multi browser comparison tool, no administration, reduced development times and so on…

Premium Services:
BrowserLab
Broserlab is the easier and faster way for web designer to check cross browsing compatibility of their web site.

Browsercam
Browsercam is a bank of cross browser testing tool. It allows you to check javascript and DHTML. It provides different testing machines like browser capture, device capture, email capture, remote access.

Multi-browserviewer
Multibrowserviewer is comparison tool where you can test iPhone and iPad browser along with web browser. It provides multibrowser tools like standalone mobile browsers or simulators, screenshot comparison function, screen capture image browsers and so on.

Netmechanic
Netmechanic is a testing tool which displays result of comparison along with browser photo. It helps to avoid display differences, catches error made by HTML editor and also provides many more other services.

Viewlike.Us!
Viewlike is a brand new site that allows you to check your website. It is powered by Ajax and PHP so need not install anything.

Url2image
Url2image web server farm offers new service to help web master avoid display differences. It shows web designers how their web site looks in popular browsers.
Sortsite
Sortsite browser compatibility tests helps web developer to check any website for the issues like broken links, spelling errors, browser compatibility, accessibility, web standards and SEO.

MY EXPERIENCE AT CODEZ

anushua — Tue, 20 Sep 2011 05:24:54 +0000

For a fresher joining an almost unfamiliar sector is kind of amusing and that’s why I felt giddy when I was first joined Codez on 25th of April 2011.I still remember my interview vividly and am still not sure how on earth Navin thought I could join the company…trust me it was disastrous.
Now let’s get back to my first day…I came to office almost exhausted, thanks to the scorching heat outside, that too at 12 noon. But all the exhaustion vanished when I met everyone; they were not only welcoming but very friendly and helpful indeed. And from then onwards my spectacular (was it too much to digest??) journey at Codez started.
Many people (read my colleagues) think that am so attached to Codez because of the privilege leaves I get (just because am still a student), but there is more to it.

Firstly, this is my first job and so you can understand why it means a lot to me.

Secondly, my employers, Navin & Kumud, have been REMARKABLE (not because of the leaves again). I have never known (or heard of) employers taking the pains of listening to the problems of employees but also taking inputs from employees to take business decisions. They are cool, friendly and always ready to lend a hand.

Thirdly, At Codez I have learnt a lot…now I can proudly say that I know WordPress (thanks to Smarajit, Soumyajit, and yup, Navin). I have never seen people willing to help others so happily. And obviously all the trainings (that I half-slept through) helped me to know a lot of stuff…am no longer an IT-illiterate (BTW, does that word exist??).

Fourthly, I got some awesome (I don’t mind if you read awful as well) friends who have been there always, either saving me or shoving me into trouble. And on this regard I should mention Kajal, she has been a sweetheart…always cracking the wackiest of jokes at the most serious points leaving me in splits and in mess, more than often.
OK, I will be tagged ungrateful if I don’t mention Rahul for making this yummy Maggi (you may think how can Maggi taste different?? But trust me it does), the innumerable times I forgot to get lunch.
So summing it up, I have had a fascinating journey at Codez. Though technically, this is my last week at Codez but I am looking forward to coming back ASAP (if Navin doesn’t “chuck” me out, that is) and resuming my position and obviously irritate my colleagues to death until they give me their blogs on schedule.
Now I should end my boring and “somewhat flowery” blog before you guys sleep off. And yup…Happy Pujas in advance!!

Wordpress Plug-in For Showing Custom Menu Within A Post Or Page

Soumyajit Dutta — Mon, 19 Sep 2011 13:13:59 +0000

While doing a new project on Wordpress, I come across a situation which required a custom menu bar to be showed inside page content. I can’t make it hard coded because the client needs the dashboard edit page option for that page to update the content. I thought there should be a plug-in to help me with this problem. I search the plug-in section of the Wordpress site and after testing lots of option I finally found the one I need. It’s called “Show Menu Shortcode” and it’s really good.

You can download the plug-in from here.

Just install and activate “Show Menu Shortcode” plug-in in your Wordpress blog and go the Menus option and create a new custom menu and copy the new menu name. Then go to one of your page content where you want this menu to be displayed and paste the following code:

[show-menu menu="your-custom-menu-name"]

Update or publish the page and then go to fronted to view the page. You will see the custom menu items that you have added in your new custom menu are being displayed on that page.
You can create side menu in your content with this plug-in or you can create tab menu bar with this plug-in, there are many possibilities.