Why should bloggers have all the fun????

And, when I use the word bloggers here, it refers to people who are using http://blogger.com

After the launch of Google indic translator, now bloggers can easily type in Hindi but what about WordPress users? <wink>I perosnally love wordpress platform</wink>

So, now Im trying to create a plugin by integrating my project OpenKey with TinyMCE{ the editor which WP is using}

Yes, we already have one such thing, thats from Indic Joomla group. But that doesnt fill the gap. So Im trying to that

For now, you take a look at how it would look when we are using it.

The picture you are looking at is TinyMCE editor being hacked for indic purpose.

What do u think about it? Would it be useful for u? Drop in ur comments

Cheerz

Shri

Tutorial: How to store UTF8 (indian language) data in mysql?

Well, let me put it straight this tutorial also applies to any other native languages like latin, spanish etc. But, since I have tried for Indian languages I am writing exclusive for it.

Okay, so before we say code I must tell you this tutorial intends, a thought provoking stuff

Lately, we have seen enough number of Indic-translators, and you must have got your hands on with typing in ur mail/blog. Now, just think for a while, when u sent a mail, and try to read it back from “Sent Mail”, u still see the indian language or even in that case blog articles. For that case, even in Orkut.

How are they stored inside database? Was what I was trying.

Again, I am not sure for any other DB, I have tried with MySQL. But, I guess should be same.

Quick Explanation:

We assume we have a DB with table articles, and a column named posts, which will save the article written in your blog. Best part, we know that all major DB’s support UTF8. And we shall explore that feature.

Now we write a article in hindi, हेल्लो वर्ल्ड

If the UTF8 is not specified, you should see something like ?????? in ur DB else u shud see the hindi data. Clear? Koool lets see the code

Quick Code:

First check for UTF8 compatibility with this query. If it supports you should see the output as “Character_set_system”| “UTF8″

SHOW VARIABLES LIKE ‘character_set_system’;

Now that being checked, alter the table and just modify the column, Posts in our above example and specify it as UTF8

ALTER TABLE articles MODIFY Posts VARCHAR(20) CHARACTER SET UTF8;

Now, try to insert the hindi value and save it. Query it and u shud see the hindi text

We have go ahead and use many other options as well, like Collate etc. But this tutorial intends to keep it simple.

I hope you find this useful and interesting. If you have tried any hacks similar to this, pls drop in comments and share with us.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Technology Threats???

Have you even imagined that the benefits we are taking of Technology even the terrorist can take?

Imagine how dangerous it can be?

Cyber police says, it can trace the emails sent, scan them and then identify the anti-social elements.

Anti-Social #1[Place 1]: Writes the message in the email/blog and saves it without sending.

Anti-Social #2[Place 2]: Opens with same userID and Password, reads the same saved message and logs Off. 

What can the police do in such a situation?

This sure may sound, simple but trust me it can prove very costly and deadly as well.

Any thoughts??? views??? suggestions???

Cheerz
Sridhar

Embedding of PDF inside HTML using frames

Some days back, I wrote a article regarding which PDF library to choose and work with, either PDFLib or FPDF. I decided to go with FPDF, since its free

So now, what is the problem that almost everyone of us have faced using PDF documents?

Think again. No, not that one. Take another shot. Okay, let me tell you.

When we open up PDF file, it opens in “Full-Mode”, that means, we cannnot see the html links, page etc and it just ocupies whole web page. Now, this is a serious issue. Since, the only way is to hit the “Back” button.

What can be done to make this experience better?

Embed the PDF document inside a html frame. Consider the pdf file as a widget and we can load it inside the frames of html.

If you are wondering, if I am speaking arabic or something. Have a look at this.

http://www.jewishpress.com/TESTPDF1.CFM

But, there are serious flaws in implementing this way. Coz you cannot navigate through the pages in the PDF. I am trying to hack and fix the issues.

If you have tried anything similar to this. Please drop a comment.

Cheerz
Sridhar

PS: Please spare the commercial/licenses one. Yes, I am aware of Macromedia Flash Paper. But something free is more tasty

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Tutorial: How-To make a Tag Cloud using PHP & MySQL

How to make Tag Cloud using PHP & MySQL

Tag Clouds are pretty common now-a-days in almost all the web 2.0 company sites. Be it Technorati, Zoom CLouds, WordPress, Blogger etc.

Why Tag Clouds are important?

Pretty much for the same reasoon: Appealing Users.

On seeing all these even I have decided to introduce the Tag Cloud feature in our project.

Now, the very important question: How do we code to create a Tag Cloud using PHP & MySql?

Here I will show you how to code it.

First the logic:

1. Collect all the tags & Count{how-many times it has been tagged} from DB{MySQL}

2. Put them into a array {PHP}

3. Calculate the maximum and minimum count of the tags used

4. Now, loop through each tag and just change the size of the font.

5. Define a simple class say “wrapper” which will contain the tag clouds

6. Call the function to generate the tag cloud.  {Javascript}

Now, since Im falling short of time, so I will cut the crap and you guys take the code directly.

Yes, a word from me, I will surely update it as time permits in full detail.

Cheerz

Srinix

PS: Download the Code here: Tag Cloud Code

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

PHP and Script.aculo.us Book

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Web tutorials *Yawn Yawn*: Webonic

Do u also Yawn thinking of tutorials available on web? Be it Php, Mysql, CSS etc, Its all same stuff, again and again in new fonts!!!!

Its time for some real new useful stuff and not same yawning.

I have started a new blog, which I call it as my technology playground.

Its important to write code, and Its even more important to build some useful code and share it with community.

Since, this blog is more personal. I will write and collect all the tutorials which I will be working/learning for buliding my own web product.

http://webonic.blogspot.com/

Webonic will contain tutorials, code, demos related to PHP, MySQL, AJAX & CSS. Its not user-generated/collected, all will be stuff I am working on. You are free to add if you want to.

Happy Hacking
Sridhar

How-To create Rounded Corners using RICO Library!!!

How-To create Rounded Corners using RICO Library!!!

In my previous two posts I have covered some tutorials using Script.aculo.us to enhance the User Experience. But, Script.aculo.us doesnt have the beauty of adding Rounded Corners, which RICO is rich in!!!!

1. Making a simple SlideShow using Script.aculo.us
2. How to Use Script.aculo.us Effects to add beauty

In this tutorial, we will explore yet another AJAX library. RICO Library

RICO is a powerful, creative ajax library which gives you control over UI designing as well as functionality.

In this tutorial, we will see how to create Rounded Edge Corners.
I assume these steps are already done before you see the naked code.

1. You have downloaded RICO library. If not, you can do it here
2. You have downloaded the Prototype Library. If not, you can do it here
3. Enable javascript in your system.

OKay, so lets see the code:

Include all the files{Rico & Prototype} inside the html code.

<head>
<script type=”text/javascript” src=”../src/rico.js” mce_src=”../src/rico.js”>  {SRC should be ur rico.js path}
<script type=”text/javascript” src=”../src/prototype.js” mce_src=”../src/prototype.js”>  {SRC should be ur prototype.js path}
</head>

so once, we are done with including the libraries to your html file.

Now, time to add some content to the Body of the html file.

<body>
<div id=”roundMe” style=”position:absolute;top:240px;left:35px;width:250px;background:’lightblue’;color:’red’;”>
<div id=”Content” style=”height:200px;width:250px;padding:8px;”>

Hello This is me, a Rounded Corner hell.

</div>
</div>
</body>

Understanding this particular code is very important, from the compatibility point of view. Coz if you skip some of the style parameters, this code wont work properly in IE.

U know IE sucks!!! {Keep an eye on Padding, it stinks in IE}

Okay, so no big deal here in code. Just two DIV tags and inside the child DIV the content is placed.

Simple, Isnt it? kooool. Lets go and add a simple line and see the magic.

Now, that we have decided the structure and included the libraries, what are we waiting for? Oh, yeah we still need to call the functions of RICO.

<script type=”text/javascript”>
Rico.Corner.round(’roundMe’);  // The parameter is the id of the outer DIV tag
</script>

What else? Not much. Just save it and see the magic.

If you still want to keep on hacking other options, you are always welcome!!!

Just add these parameters to the same line.

Rico.Corner.round(’roundMe’,{color:’transparent’,compact:true,blend:true;});

What all other options one can add to Corners?

1. Color
2. Blend
3. Compact
4. Color
5. BgColor
6. Specify which corners to be rounded
7. border.

For more information. Visit Demos @officially site of RICO.

Yes, some folks out there can argue that we can do it with CSS also. I agree with you. But can you do it in just one line of code?

Sorry dude!!!

Anyways I have attached a simple code for the same at the bottom if you can want. Take it, use it, try it and please let me know as well, if I missed any.

Cheerz
Sridhar

Download COde: ROunded Corner Using RICO Library

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

UI Designing with CSS: Example login form

After the dot com bubble, start-ups are growing like mushrooms everywhere. And, 80% of these being either in Consumer Internet or Mobile.

So what do these web-based start-ups focus on mostly?

User Experience. Users have become powerful and above all decision makers. If users like the service, UI, application they will support it else they will kill them.

Talking about user experience, Its very important to understand what would a user appreciate? I will explain this taking a simple example of login form.

A simple login form would consits of normal buttons and a table.

Enter Name: <input type=”text”>

Enter Email: <input type=”text”>

<input type=”button” value=”Submit”>

No big deal. A simple two text boxes and a submit button. Simple?

Okay, so why not make small yet sweet changes to this code?

Through adding CSS{Cascading Style Sheets}!!!

Lets add some style on mouseover and mouseout operations.

<input type=”button” class=”Button” onmouseover=”this.className=’ButtonHover’” onmouseout=’Button’”>

In the style section just add the following piece of information.

Button {
background:green;
}

ButtonHover{
Background:lightgreen;
}

This would add the following functionality to our code.

Whenever the mouse is moved over the button the background is set to lightgreen and whenever removed again back to green.

Though there is no big deal here, the thing that needs to be taken care is that small useful things matter and count.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

How to make a Modal Window using Prototype?

Okay, its been somedays I was working on how to create a simple, beautiful yet powerful modal window for a project I am working on.

Modal Window sometimes called as Modal Dialogue box, are widely used across to increase the user experience.

After doing a lot of {re}search, I came across, Lightbox by Lokesh. Then, I came across this LightBox Gone Wild, yes by the folks behind Wufoo.

I must admit, these guys have done a great job!!! Thanks for sharing this.

Now, coming back to our tutorial.

You must have prototype AJAX library to use this {sorry for Non-prototype lovers}. Once, you have both Prototype and Lightbox Gone Wild.

Just add them to your html page.

<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” mce_src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” mce_src=”scripts/lightbox.js” type=”text/javascript”></script>

Once, we have added the libraries to the html page. Now, we move on to create the lightboxes {a.k.a simple html files which will be shown in our Modal Window.}

Some HTML files, lets us say About.html

<p> About Us Page</p>
<h3>This is a simple About Me page, where you can add all HTML tags.</h3>

Now the important task: Activating the Lightbox

<a href=”About.html” mce_href=”About.html” class=”lbOn”>About Me</a>

Notice: the italics class=”lbOn”, onclick this will call the function to load the lightbox.

We can add all the HTML tags inside a lightbox, which means there are N number of options for you to surprise your friends.

De-Activating the Lightbox

<a href=”#” mce_href=”#” class=”lbAction” rel=”deactivate”>Close Lightbox.</a>
A simple link, clicking on which will take you back to the page.

Linking it to another Lighbox inside:

<a href=”confirm.html” mce_href=”confirm.html” class=”lbAction” rel=”insert”>Go to Another Lightbox</a>

Till here we saw how to Activate, Deactivate and Insert a lightbox inside a lightbox.

Now, AJAX stuff.

Lets say you want to give, a form to fill to user and collect the data using the modal window. We can do it, with the help of Prototype library. Use the following piece of code.

insert: function(e){
link = Event.element(e).parentNode;
Element.remove($(‘lbContent’));
var myAjax = new Ajax.Request(
link.href,
{method: ‘post’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)}
);
}

I am writing a code to add some more functionality like onload, on mouseover etc. Once done will share the code as well.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Tutorial: How to use Script.aculo.us effects?

Okay, so its been a long time since I have posted any How-To’s. So, I decided to write down one for How to use Script.aculo.us effects?

Script.aculo.us is an javascript library to enhance the UI and the user experience. We are also using the same in our OpenIndx projects as well. I have mentioned it here in my previous post also.

Before, you get to hack this library, grab it from here.

Now, presuming that you have the library with you, lets rock!!!

A simple HTML file : index.html

<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>

<body>
<h2>Hello AJAX Effects</h2>

<div id=”test_this”>  {Div which we will be adding effects to}

<table>  {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>

</tr>
</table>
</div> {DIV ends}
</body> {Close body}
</html> {Close HTML}

Now, this was just a simple html code to insert a table which will be having fields username, password and submit button.

Lets add some Script.aculo.us effects to this code.

<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>

<body>
<h2>Hello AJAX Effects</h2>

<div id=”test_this”>  {Div which we will be adding effects to}
<table>  {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div>

<a href=”#” mce_href=”#” onclick=”Effect.Fade(‘test_this’);”> {here ‘test_this’ mention the “div” you need to add effect to} Fade Me</a>

</body>
</html>

Similarly, you can also add other effects, in this flow.

<a href=”#” mce_href=”#” onclick=”Effect.Shake(‘test_this’);”> Shake Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Appear(‘test_this’);”>Appear Back</a>
<a href=”#” mce_href=”#” onclick=”visualeffects(‘test_this’,’slide’);”>Slide Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Grow(‘test_this’);”>See Me Grow</a>

For further reference on effects, please refer here

Do let me know if this helps you, in giving a overview of how-to use Script.aculo.us Effects. Drop in the comments, if you have any suggestions too.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

How to use JPGraph with PHP and MySQL?

Getting frustated with very less content{Docs,Blogs, tutorials etc} available on web on how to use JPGraph with PHP and MySQL. I then decided to work and post an article which will give a clear picture on how to utilize the same.

Lets start with the basics, tool required and softwares a must to have:

1. PHP
2. MySQL
3. Web Server {WAMP, LAMP}
4. JPGraph {Most Imp since we are trying to hack it}

Now, assuming that everything required is in place. Lets start hacking JPGraph!!!

First thing that we should do is to place JPGraph in the web folder. i.e WWW. Once we are done with the same, we can just run a trial on our localhost.

While hacking JPGraph, I learned that whosoever have Object Oriented background, they can hack in less than 10 mins. Yes, less than 10 mins. U ready? OKay…Go ahead.

include “/some folder/jpgraph/src/jpgraph.php”

Now, depending on the need, of what chart,graph or diagram you are trying. Include the respective header file also. I will teach u how to hack for Bar Graphs.

include “/some folder/JPGraph/jpgraph_bar.php”

Now, since we have included the required libraries. Lets get straight to create objects of the same. and then call the functions to add more features.

$graph = new Graph(250,150,”auto”);  // Declaring the graph and its properties
$graph->SetScale(“textint”);
$graph->img->SetMargin(50,30,50,50);  // set the margin to the graph
$graph->SetShadow();  // Show a shadow behind

Now, we will declare a object of BarPlot class.

$bplot = new BarPlot(“Here parameter will the data u want to represent can be sent through DB or direct array”);
$bplot->SetFillColor(“yellow”); // Fill the graph with yellow color
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FS_BOLD); // use these fonts
$bplot->value->SetAngle(45); // at what angel you want the values to be shown
$bplot->value->SetColor(“black”,”navy”);
$graph->Add($bplot);  // add the bar graph to actual graph
$graph->Stroke();

Simillarly, we can do for rest also for Pie Charts etc.
Before I conclude I will give some tips on how to use the JPGraph reference materials.

1. Open the folder:   /JPGraph\docs\ref
2. In these you can find reference to all the classes and their respective functions, which makes very ease to access and use directly.

I hope this article will be of use to you. If you still have any doubts or issues. Drop a comment or mail. I will glad to help you out.

Happy Hacking!!!!
Cheers
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

#1 How-To connect PHP and MySql?

This is my first How-To post in the category in an attempt to collect and solve all the small minor queries.

PHP is a scripting language and MySQL is an Open Source DBMS. Together they play a very vital role in developing the web based applications on GNU Linux platform/Windows.

Let me take you through a cakewalk of how to use PHP and MySQL and then the final verdict.

In order to run PHP and MySQL on your system you “must” have:

1. Apache { Web Server/LocalHost}

2. MySql { Database Management System}

3. PHP
4. GNU Linux / Windows

OR if you are running Windows on your system then you can even go for complete pack like:

Wamp

UNI

CODE:

<?php

// localhost will be the server ur trying to connect. username is understood and password for authentication.

$link = mysql_connect(‘localhost’, ‘username’, ‘password’);
if (!$link) {
die(‘Could not connect: ‘ . mysql_error());
}
echo ‘Connected successfully’;// mysql_close will close the connection
mysql_close($link);

?>

This will help you in connecting with the MySQL database using PHP. This is an overview of general connection. In my next post I will teach u how to actually connect, retrive and then publish the data to the page.

Till then Happy Hacking!!!

Cheers

Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book