CSS form design without tables

. Monday, June 30, 2008
5 comments

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family
: Arial, Verdana, sans-serif;
}

form p
{
clear
: both;
}

fieldset
{
width
: 350px;
border
: 1px solid #ccc;
}

legend
{
font-weight
: bold;
font-size
:1.2em;
}

label
{
font-weight
: bold;
width
: 120px;
float
: left;
}

input[type=text]
{
width
: 200px;
}

textarea
{
width
: 200px;
height
: 100px;
}

input[type=submit], input[type=reset]
{
font-size
: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.
<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>

Google - the future of monopolized internet?

. Thursday, June 26, 2008
2 comments

The GIANT of the internet! Whats left that they dont have yet? Its obvious that search engine is their most powerful tool. But they are constantly introducing us with new products and innovative ideas, and also acquiring anything that has the potential to be large.

Assume you are a normal internet user
What do you normally do at home or office?
- You search the internet (search engine),
- Read latest news (News),
- Send emails (Gmail),
- Manage Documents and Spreadsheets (Docs),
- Schedule your appointments (Calendar),
- Chat online (Talk),
- Make new friends (Orkut),
- Share videos (YouTube),
- Upload photos (Picasa),
- Create blogs (Blogger),
- Publish blog feeds (FeedBurner),
- Get location info (Maps and Earth),
- Read feeds from your favourite sites (Reader),
- Advertise your product (Adwords ),
- Earn money from ads (Adsense),
- Get stock info (Finance),
the list will never end!

They are also coming with a much awaited product (still a rumour) - your online hard disk (often called gDrive or Google Drive). There are already a few free storage services online including xDrive (by AOL ), and Box.net. Google has always introduced us with rich web applications with a very easy to use interface - and this too is going to be one of their top products undoubtedly.

Acquisitions
Whenever it comes to acquisitions, they are the first you could possibly think of. They bought YouTube (video sharing site), Blogger (the one I am using for my blog), Feedburner (publishing feeds), DoubleClick (online advertisement), GrandCentral (one phone number for all your phones), and hundreds more that we dont even know yet. They are also spending millions of dollars on Mozilla (Firefox) Foundation for the default homepage spot.

Opponents
There was a time when we thought Yahoo! or MSN will probably go ahead of Google - but no more. May be it was possible if Yahoo accpeted Microsoft's offer - but instead Yahoo teamed up with Google for an advertisement deal! If there is anyone existing in the market that can fight Google - its Facebook (Microsoft is one of the shareholders of this popular social network). I dont see any other website that has the potential to be as large as Google.

Facebook's main weapon is its platform for web developers. They allowed third-party developers to create applications that let the users experience thousands of applications right from facebook. And Google then came up with the idea of OpenSocial (Myspace, Hi5, and other popular social networks are already using this platform) - a common api for developing applications for multiple social networks - to let third-parties develop applications for them. This is a good news for developers since they now dont have to code in different mark-up languages for different social networks.

Monopoly?
I am not saying that having a larger share of the market is bad, especially when you are providing such quality services for free. But the question is how much secure is it to have all our information hosted by Google? Is the future of internet going to be monopolized by Google?

Switch CSS stylesheets using jQuery

. Sunday, June 15, 2008
13 comments

CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.

This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.

Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage

<link rel="stylesheet" href="default.css" type="text/css">

The list of options available to your visitors
List your available stylesheets here (follow the format)
<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>

Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
// red
$("#css-red").click(function() {
$(
"link[rel=stylesheet]").attr({href : "red.css"});
});

// blue
$("#css-blue").click(function() {
$(
"link[rel=stylesheet]").attr({href : "blue.css"});
});

// green
$("#css-green").click(function() {
$(
"link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>

Change or set HTML tag attribute using jQuery

.
3 comments

It is sometimes necessary to change the attributes of a particular HTML tag of your webpage using javascript, especially when you are coding rich web applications. Let it be the class of an element, or the href attribute of an anchor tag.

In this tutorial, I am going to show you how to do it utilising jQuery javascript library quickly.

HTML code (inside BODY tag)
First, we will place a sample image and a link in our webpage.

<a id="clickMe" href="#">Change the image below</a>
<br />
<img id="myimage" src="current_image_file.jpg" />

Now we want the src attribute to change from current_image_file.jpg to new_image_file.jpg (a click event will be required).

jQuery code (place this JavaScript inside HEAD tag)
<script type="text/javascript" src=".jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(
"#clickMe").click(function() {
$(
"#myimage").attr({src : "new_image.gif"});
});
});
</script>

Rounded corner navigation bar without images using CSS and jQuery

. Friday, June 13, 2008
6 comments

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.
<script type="text/javascript">
$(document).ready(
function() {
$(
"#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)
#nav {
width
: auto;
}
#nav ul, #nav ul li
{
list-style
: none;
margin
: 0;
padding
: 0;
float
: left;
}
#nav li
{
background-color
: #e9e9e9;
}
#nav li a
{
display
: block;
text-decoration
: none;
font-weight
: bold;
color
: #919191;
padding
: 10px;
}
#nav li a:hover
{
text-decoration
: underline;
}
#nav .active
{
text-decoration
: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu
<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>

Generate favicon online and implement it in your webpage

. Thursday, June 12, 2008
0 comments

What is a favicon?
A favicon is an icon associated to a website (or a particular section of a website) - also called as the website icon. There are a few options available to implement a favicon in your webpage, but the most traditional one is by placing a favicon.ico file.

- favicon establishes your brand
- it helps users identify your site from browser tabs
- also, helps visually identifying your site from bookmarks

Generate favicon.ico files online
favicon.cc is a great tool (favicon generator) for creating customized favicons quickly.



Some cool features by favicon.cc:
draw your favicon in MS Paint like interface (colour picker available)
upload images directly (for converting image files into .ico file)
animations (animate your favicon)
share your icon with others
How to implement it in your webpage?
Just add this code in the HEAD tag of your webpage:
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico">

Placing text over image using CSS position property

.
20 comments

There are a few techniques available to perform this task using css. But I am going to show you the most effective one in this tutorial - this involves css position property.

I will be using this image (a cow) in this tutorial.

In our html code, there needs to be three div elements
1. container (for both image and text)
2. image (the cow)
3. text (Moooooo...)

Here is the code
<html>
<head>
<title>frinity.blogspot.com</title>
</head>
<body>
<div id="container">
<div><img src="cow.jpg" /></div>
<div style="position: absolute; left: 20px; top: 160px;">
<span style="font-weight: bold; color: #fff;">Moooooo...</span>
</div>
</div>
</body>
</html>


Its the CSS positioning that makes it happen.

Output (screenshot):

Load remote content into div element using jQuery

. Wednesday, June 11, 2008
47 comments

If you are building rich web applications, then you will obviously require some ajax to give your users a smooth browsing experience. And jQuery makes it easier for you to do that without any trouble.

In my previous articles, I have shown you how to toggle a div element and also changing its content. Now I will show you how to load content from an external file into a div element.

loadContent() function
Though most of the jQuery code is placed inside head tag, I prefer that you create an additional javascript function for managing inline anchor links quickly.

function loadContent(elementSelector, sourceUrl) {
$(
""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}

This is the main jQuery code for loading remote content inside an element
$("#content").load("http://yoursite.com/source.php");

Usage
<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>

Final code
<html>
<head>
<title>jQuery test page</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function loadContent(elementSelector, sourceUrl) {
$(
""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}
</script>
</head>
<body>
<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>
</body>
</html>

Toggle div element using jQuery

. Tuesday, June 10, 2008
12 comments

What is Toggling?
Basically a show/hide feature for your webpage elements. For example, you may have a login box in your webpage, and you want your visitors to click on a button for showing or hiding the element.

This tutorial will show you how to implement a simple toggle effect in your webpage using jQuery.

As always, we will require some HTML content first

<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>

jQuery code
This is the code that makes the 'textBox' element toggle
$("#textBox").toggle();

But we want to toggle the element only when you click on 'Toggle my text' link. And this code will make it happen:
$(document).ready(function() {
$(
"#clickMe").click(function() {
$(
"#textBox").toggle();
});
});

Final Code:
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(
"#clickMe").click(function() {
$(
"#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
</html>

Change div content with jQuery

. Monday, June 9, 2008
10 comments

This is a quick tutorial for understanding the basics of jQuery.

Create a new HTML file with this code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// javascript here (jQuery)
</script>
</head>
<body>
<--- HTML content here -->
</body>
</html>
Right now, the page will just load the jQuery library.

Lets get some HTML content first
<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>

jQuery code
Now we will add some javascript so that the content of 'textBox' element changes to something else once you click on 'Change my text' link.
$(document).ready(function() {
$(
"#changeText").click(function() {
$(
"#textBox").html("My text is changed!");
});
});

As soon as your page is loaded in your browser, a function is declared so that whenever you click on the link (with 'changeText' id), the content of the 'textBox' element will be changed to 'My text is changed!'.

Final output:
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(
"#changeText").click(function() {
$(
"#textBox").html("My text is changed!");
});
});
</script>
</head>
<body>
<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>
</body>
</html>

Simple task management with Google Spreadsheets

.
1 comments

I personally find Google Docs very useful for managing all my projects. It really makes it easy to exchange the project updates among other project members. You can also use it for managing your tasks (usually a To Do list).



Take a look at the spreadsheet here
Its better if you save a copy of this spreadsheet for future use.

Columns
Task ID: the ID if your task
Description: describe your task
Percentage: percentage of the task completed
Start Date: the date you started (mm/dd/yyyy)
End Date: the date you finished your task (mm/dd/yyy)

Scaffolding in CakePHP

.
9 comments

What is scaffolding?
Its something that you will find very useful in production apps. When you begin, you may want to throw up stuff real quick in order to get started. Ultimately, its a built in system for adding, editing, viewing and deleting your database records quickly.

Database table
Suppose we want to work with a table named users, and here is its SQL structure

CREATE TABLE `users` (
`id` bigint(20) NOT NULL auto_increment,
`username` varchar(50) NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(96) NOT NULL,
`password` varchar(50) NOT NULL,
`updated` int(11) NOT NULL,
`created` int(11) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`)
)

Model
Now lets create a model file first. It should be placed here: /app/models/user.php
<?
class User extends AppModel
{
var $name = "User";
var $uses = "users" // table name
}
?>


Controller
Create a controller file here: /app/controllers/users_controller.php
<?
class UsersController extends AppController
{
var $name = 'Users';
var $scaffold;
}
?>

View
Not required since the views for scaffolding are generated by CakePHP automatically.

Visit http://yoursite.com/users/ and start scaffolding.
Note: Always visit yoursite.com/controllerName/ to see the visual output of your controller.

I will show you a user registration and logging system in CakePHP soon.

Installing CakePHP

.
0 comments

Download
Get the latest version of CakePHP (current version is 1.2)

Requirements
A HTTP server (better if Apache) with session and mod_rewrite enabled.
PHP 4.3.2 or higher
A MySQL database (PostgreSQL is supported too)

If you want to install it in your PC (Windows), then read this article: http://frinity.blogspot.com/2008/05/installing-apache-php-mysql-in-windows.html

Upload the files
Unpack the downloaded file, and upload its content to your server. Make sure that it looks like this from your root.

/wwwroot
/cake
/app
/cake
/vendors
.htaccess
index.php

Configure your database
Rename app/config/database.php.default to database.php. Open it and edit the details.

var $default = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'user',
'password' => 'password',
'database' => 'database_name',
'prefix' => '');


CakePHP installed!
Now we can move to another article for creating your first controller!

Understanding the MVC framework (PHP)

.
0 comments

I have already mentioned about MVC framework and CakePHP in one of my articles, therefore I am going to discuss more about it today. Please note, CakePHP is one of the MVC frameworks written in PHP. Don't get confused that MVC framework means CakePHP.

MVC
MVC stands for Model View Controller. It is ultimately a software design pattern where you can separate your code and make it reusable, thus making you write less code.

Model
For each and every database table, we have a separate model - this is what represents a particular database table. And according to the naming convention of CakePHP, its name is always the singular of its table's name. For example, if the name of the database table is 'users', the model name will be 'User' (first character of the name is always in uppercase).

Controller
A controller is used for managing the logic of a certain section of your application. Generally, it is used for managing a single model. For example, you have a model named 'User', and you will require a controller for managing the logic of user registrations, logins, log outs, account settings, etc. According to the naming convention of CakePHP, controller names are always plural. In this case, the controller name would be 'Users'.

View
A view is a page template, usually named after its controller's action (a controller is a php class with many functions known as its actions). As you can guess, this is responsible for the visual output of your application.

I will show you how to install CakePHP (including the php files) in my next article.

Online htaccess editor

. Saturday, June 7, 2008
0 comments

Ever wanted to have your own custom page for 404 (Bad Request) errors or redirect old web pages using htaccess? But dont have any experience with htaccess yet? This online tool is for you then - http://www.htaccesseditor.com/en.shtml. It takes your information in seven steps and outputs a nicely formatted htaccess file.



Features
Deny all access to files
Basic authentication (.htpasswd required)
Error page
Default page
Setup WWW
Redirect directives
Access restriction

Three column CSS layout with blueprint framework

. Friday, June 6, 2008
4 comments

In one of my previous articles, I mentioned about Blueprint CSS framework. Now I am going to show you how to use it for designing your web layouts. I am using Blueprint 0.6 for this tutorial.

Before we begin, I need to tell you about its grid. Blueprint's default width for all layout is set to 950px consisting of 24 columns (width units). These columns can be controlled directly by your HTML code (divs with class attributes). You will not be required to touch your CSS files for that.

Layout (three column)
In this tutorial, we will follow a three-column layout with a header and a footer.


Directory structure for your files


Create a new HTML document with this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>

<html lang="en">
<head>

<meta
http-equiv="Content-Type"
content
="text/html; charset=utf-8">

<title>frinity.blogspot.com</title>

<link
rel="stylesheet"
href
="blueprint/screen.css"
type
="text/css"
media
="screen, projection">

</head>
<body>

<div class="container">

<h1>Header</h1>
<hr />

<div>
First column here
</div>

<div>
Second column (main content)
</div>

<div>
Third column
</div>

<hr />
<div>Footer</div>

</div>

</body>
</html>


Now its time for adding some 'class' attributes to your HTML for creating the columns. Notice that I said the whole layout consists of 24 columns (or 24 width units). For example, you may want the first column to be 6 units wide, the middle column 12 units, and the third and last column to be 6 units. Therefore, the three columns equal to (6 + 12 + 6) = 24 units.

Notice the code highlighted in bold
<div class="column span-6">
First column here
</div>

<div class="column span-12">
Second column (main content)
</div>

<div class="column span-6 last">
Third column
</div>

Dont forget to add 'last' in the class attribute of your last column. This is important.

Final HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>

<html lang="en">
<head>

<meta
http-equiv="Content-Type"
content
="text/html; charset=utf-8">

<title>frinity.blogspot.com</title>

<link
rel="stylesheet"
href
="blueprint/screen.css"
type
="text/css"
media
="screen, projection">

</head>
<body>

<div class="container">

<h1>Header</h1>
<hr />

<div class="column span-6">
First column here
</div>

<div class="column span-12">
Second column (main content)
</div>

<div class="column span-6 last">
Third column
</div>

<hr />
<div>Footer</div>

</div>

</body>
</html>

Save your HTML file, and open it in a browser. Your layout is ready!