Ramani

Wednesday, November 30, 2011

How to design a simple Web template structure using CSS DIV

This post explains how to design an HTML/CSS basic structure to design a simple three column fixed page layout

I included some standard elements such as logo, top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads so you can reuse quickly this code on your webdesign projects.

HTML structure

The following picture illustrates HTML/CSS elements I added on the page:

Step 1: HTML file structure
Create a new page and copy and past this code within <body> tag:

<div id="container">
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">
<a href="index.html?home">Home</a>

<a href="index.html?about">About</a>

<a href="mailto:myemailaddres@email.com">Contact me</a>

</div>
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>

Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>

Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>

Step 2: CSS file
Now, create a new css file and link it into index.html

/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;margin:20px;padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0;padding:0;}
h1{font-size:18px;}
h2{font-size:14px;color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0;margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container{width:780px; margin:0 auto;}
#topbar{width:auto;display:block;height:60px;}
#navbar{width:auto; display:block;height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px;display:inline;}

#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}

#column_right{width:160px; margin-right:20px; float:left;}

#column_right_adsense{width:120px; float:left;}

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto;display:block;padding:10px 0;font-size:11px;color:#666666;}

/* ------------------------------
CUSTOM CLASSES
------------------------------ */

/* Add here your custom classes ... */

Save all and try it!

Wednesday, November 23, 2011

Implementing Google Maps with PHP

The first thing you need to do is go to http://www.phpinsider.com/php/code/GoogleMapAPI/ and download the class. Then copy it into the directory where you keep your classes stored on your server.

When you have downloaded the class, it then needs to be included in the file that we want to show the map in. At the top of your file insert the code below.

 require('GoogleMapAPI.class.php'); $map = new GoogleMapAPI('map');   
// enter YOUR Google Map Key 
$map->setAPIKey('YOURGOOGLEMAPKEY');   
$map->addMarkerByAddress
('621 N 48th St # 6 Lincoln NE 68502','Our Address','Our Address');   
<body onload="onLoad()">$map->printMap(); ?>   


What we are doing here is including the class with the require function in PHP. If the class fails to be included then the rest of the page will stop executing.
We then create a new instance of the class and then we insert.

If you have a Google Maps API key then insert it where it says 'YOURGOOGLEMAPKEY'. If you do not have one you can get one from here.

The function below adds a marker to the address you would like and centers it. This function takes 3 parameters; the address, a title and html.


$map->addMarkerByAddress();



We then need to include the onLoad function so that it knows to load the map on this page.

The last function that we add is


 $map->printMap(); ?>


Wherever you insert this function is where the map will be displayed on the page.

Google Calendar Integration with PHP

Understanding the Calendar Data API
Before you dive into the PHP code, a few words about the Google Calendar Data API are in order. As with all REST-based services, the API works by accepting HTTP requests containing one or more XML-encoded input arguments and returning XML-encoded responses that can be parsed in any XML-aware client. With the Google Calendar Data API, the response always consists of an Atom or RSS feed containing the requested information.
A typical Google Calendar feed includes more than enough information to build a useful and relevant application. To see an example, log into your Google Calendar account, navigate to your calendar settings, and find the link for your calendar's private address URL. This URL, which you should hold secret at all times, provides read-only access to your calendar's feed without first requiring authorization, and will look something like http://www.google.com/calendar/feeds/userid/private-magicCookie/basic. Pop this URL into your Web browser (or send a GET request for the feed through an HTTP client), and you should see something like Listing 1 :

Listing 1: An example Google Calendar feed

<?xml version='1.0' encoding='UTF-8'?>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/'
xmlns:batch='http://schemas.google.com/gdata/batch'
xmlns:gCal='http://schemas.google.com/gCal/2005'
xmlns:gd='http://schemas.google.com/g/2005'>
<id>http://www.google.com/calendar/feeds/user@gmail.com/
private-cookie/basic</id>
<updated>2008-06-13T19:15:18.000Z</updated>
<category scheme='http://schemas.google.com/g/2005#kind'
term='http://schemas.google.com/g/2005#event'/>
<title type='text'>Joe User</title>
<subtitle type='text'>Joe User</subtitle>
<link rel='alternate' type='text/html'
href='http://www.google.com/calendar/embed?src=user@gmail.com'/>
<link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml'
href='http://www.google.com/calendar/feeds/user@gmail.com/private-cookie/basic'/>
<link rel='http://schemas.google.com/g/2005#batch' type='application/atom+xml'
href='http://www.google.com/calendar/feeds/user@gmail.com/private-cookie/basic/batch' />
<link rel='self' type='application/atom+xml'
href='http://www.google.com/calendar/feeds/user@gmail.com/private-cookie/basic?
max-results=25'/>
<author>
<name>Joe User</name>
<email>user@gmail.com</email>
</author>
<generator version='1.0' uri='http://www.google.com/calendar'
>Google Calendar</generator>
<openSearch:totalResults>4</openSearch:totalResults>
<openSearch:startIndex>1</openSearch:startIndex>
<openSearch:itemsPerPage>25</openSearch:itemsPerPage>
<gCal:timezone value='Asia/Calcutta'/>
<entry>
<id>http://www.google.com/calendar/feeds/user@gmail.com/
private-cookie/basic/xxxxxxxx</id>
<published>2008-06-12T08:49:38.000Z</published>
<updated>2008-06-13T19:06:21.000Z</updated>
<category scheme='http://schemas.google.com/g/2005#kind'
term='http://schemas.google.com/g/2005#event'/>
<title type='html'>Swim party</title>
<summary type='html'>When: Sat Jun 21, 2008 12pm to 3:30pm 
IST 
 Event Status: confirmed</summary>
<content type='html'>When: Sat Jun 21, 2008 12pm to 3:30pm
IST 
 Event Status: confirmed</content>
<link rel='alternate' type='text/html'
href='http://www.google.com/calendar/event?eid=cGxwbHExOYHHDlOHQ4ZjA
yMGMgdmlrcmFtLm1lbG9uZmlyZUBnb29nxmNvbQ' title='alternate'/>
<link rel='self' type='application/atom+xml'
href='http://www.google.com/calendar/feeds/user@gmail.com/
private-cookie/basic/ddddddddddddddd/>
<author>
<name>Joe User</name>
<email>user@gmail.com</email>
</author>
</entry>
<entry>
<id>http://www.google.com/calendar/feeds/user@gmail.com/
private-cookie/basic/yyyyyyyyyyyyyyyy</id>
<published>2008-06-12T08:48:30.000Z</published>
<updated>2008-06-12T08:48:46.000Z</updated>
<category scheme='http://schemas.google.com/g/2005#kind'
term='http://schemas.google.com/g/2005#event'/>
<title type='html'>Dinner with the gang</title>
<summary type='html'>When: Wed Jun 11, 2008 7pm to 9:30pm 
IST 
 Event Status: confirmed</summary>
<content type='html'>When: Wed Jun 11, 2008 7pm to 9:30pm
IST 
 Event Status: confirmed</content>
<link rel='alternate' type='text/html'
href='http://www.google.com/calendar/event?eid=
MmhpYmV2cmowMM2kam9lZDQgdcmFtLm1lbG9uZmlyZU4858Bnb29nbGVtYWlsLmNvbQ'
title='alternate'/>
<link rel='self' type='application/atom+xml'
href='http://www.google.com/calendar/feeds/user@gmail.com/private-cookie/
basic/hhhhhhhhhhhhhhhhh'/>
<author>
<name>Joe User</name>
<email>user@gmail.com</email>
</author>
</entry>
<entry>
...
</entry>
</feed>

PHP Google Spreadsheets

Saving Form Data to Google Spreadsheets Using PHP and the Google Docs API

The general idea is to read a Google Spreadsheet through PHP and save user submitted form data via the Google Documents List Data API. By doing this, you can quickly view all the submissions at a glance and you are also able to export CSV files of the data. Using Google Docs gives you and your clients a quick and easy interface to interact with form data.

I've written a small PHP helper class to assist with the whole process (PHP5). You are going to need the following:

A working copy of the Zend GData Client Library (1.0.3+)

A copy of the PHP Google Spreadsheet Helper Class

A Google account, in order to be able to create a spreadsheet document using Google Docs.

First you should login to Google Docs using your existing Google account. Once logged in you will want to create a new spreadsheet document, you will be immediately taken to a spreadsheet interface. Lets start off by creating some column field names on row #1:

name

comments

Make sure to save your spreadsheet and give it a name, you will need to use the spreadsheet name in the code below.

The following is a basic example of using the Google_Spreadsheet PHP helper class. // Zend library include path

set_include_path(get_include_path() . PATH_SEPARATOR . "$_SERVER[DOCUMENT_ROOT]/ZendGdata-1.8.1/library");

include_once("Google_Spreadsheet.php");

$u = "username@gmail.com"; $p = "password";

$ss = new Google_Spreadsheet($u,$p);

$ss->useSpreadsheet("My Spreadsheet");

// if not setting worksheet, "Sheet1" is assumed // $ss->useWorksheet("worksheetName");

$row = array  (  "name" => "John Doe"  , "email" => "john@example.com"  , "comments" => "Hello world" );

if ($ss->addRow($row))

 echo "Form data successfully stored using Google Spreadsheet";

else

 echo "Error, unable to store spreadsheet data";

?>

Download
Google Spreadsheet PHP Helper Class, this project is on github.