Share It

Friday, December 11, 2009

Rounded Corners Compatible with All Browsers


Example text


To have the above effect, we will use some CSS and Nested Div. For this we will also require images of corners only, like the square image of top left corner etc..

We will start with our CSS.

First all we will need a class which will have a border. It will be bounding box of rounded block.
.rounded {
border: 1px solid #ffffff; /* border in white color */
background-color: #ffffff; /* background color */
zoom:1; /* for IE to work properly */
}
As our initial step, we will have the following stuff.
<div class="rounded" style="width: 200px;">  <div style="padding: 20px;">Example text</div> </div>
This will display a box with straight border in white with white background. Our surrounding is black. Now for corners, we will make a separate class which will have its respective image as background in CSS and positioned at its respective place.
.tl {background: url(tl.gif) no-repeat top left;
margin:-1px; } /* the margin -1 aligns borders with corner images*/
.tr {background: url(tr.gif) no-repeat top right;}
.br {background: url(br.gif) no-repeat bottom right;}
.bl {background: url(bl.gif) no-repeat bottom left;}
For each corner we have a class ready with respective corner image. Now we will just create divs for each corner and apply its class to it as follows:
<div class="tl"><div class="tr"><div class="br"><div class="bl">
     <div style="padding: 20px;"> Example text </div>
</div> </div> </div> </div> </div>
This way we will have a rounded cornered block. It will work in all browsers.

Complete code is as follow::::<style type="text/css"> 
.rounded {  
border: 1px solid #ffffff;  
background-color: #ffffff;  
color: #000000;  
zoom:1; /* causes IE to behave properly */  
}  

.tl {background: url(tl.gif) no-repeat top left;  
margin:-1px; } /* the margin -1 aligns borders with corner images*/  
.tr {background: url(tr.gif) no-repeat top right;}  
.br {background: url(br.gif) no-repeat bottom right;}  
.bl {background: url(bl.gif) no-repeat bottom left;}  

.tr, .tl, .bl, .br {zoom:1;position:relative;} /* for relative positioning of div */

</style>  

<div class="rounded" style="width: 200px;"> 
<div class="tl"><div class="tr"><div class="br"><div class="bl"> 
<div style="padding: 20px;"> Example text </div> 
</div> </div> </div> </div> 
</div>

Wednesday, December 9, 2009

POST data using cURL

This is about posting some data to a page via cURL. We already know the other and common method to post data, i.e. using a form and setting its method to POST. Sometimes we need to POST data using php without any form. So for this we can use cURL. 


Scenario: In our case we will send a user id along with a status and a message to our other page to process it and return it's result. We assume that we have a function called currentUserId() which will give us ID of current user and we will set status to 1. 


Explanation with code:

First we will get the ID of the user. We may use any method set the variable.

$id = currentUserId(); ////get user id
$status = 1; ///just a variable
$msg = 'Hello! I am here.';
 Now we will make an array of the fields which we are going to send
$fields = array(
    'id'=>$id,
    'status'=>$status, 
'msg'=>urlencode($msg)
);

Using urlencode will help to avoid problems because of html tags and stuff. Do include this when sending strings. It will convert spaces and other entities to url format like space is represented as %20 etc..

Now, to send data to external source we will need to convert our data to query string format. In query string, each different variable is separated by & sign and having 2 entities each, 1 for variable name and other for its value. In our case it should be like id=123&status=1&msg=Hello!%20I%20am%20here.
So for this we will use a foreach loop to convert our fields to query string.
foreach($fields as $key=>$value)  

    $fields_string .= $key.'='.$value.'&';  ///all elements to send with & sign in between as standard of query string
}  
rtrim($fields_string,'&'); ////remove extra & sign at the end ,,, we can use substr too


Now we will initiate the connection for curl and set options like url, number of vars and vars.

$con = curl_init(); //set options url, number of POST vars, POST vars  
curl_setopt($con ,CURLOPT_URL,$url);  
curl_setopt($con ,CURLOPT_POST,count($fields));  
curl_setopt($con ,CURLOPT_POSTFIELDS,$fields_string);

Now to send the vars, we need to execute curl using following function
$response= curl_exec($con);
The response from the page will in $response.

At the end we will close the connection.
curl_close($con);
COMPLETE CODE:::

$id = currentUserId(); ////get user id
$status = 1;
$msg = 'Hello! I am here.';  
$url = 'http://example.com/process-post.php'; ///URL where we are sending our data 
$fields = array(
    'id'=>$id,  
    'status'=>$status,  
    'msg'=>urlencode($msg)  
);  
//making query string for POST 
foreach($fields as $key=>$value) 
$fields_string .= $key.'='.$value.'&';  ///all elements to send with & sign in between as standard of query string
rtrim($fields_string,'&'); ////remove extra & sign at the end  
//initiate connection 
$con = curl_init();  
//set options url, number of POST vars, POST vars 
curl_setopt($con ,CURLOPT_URL,$url); 
curl_setopt($con ,CURLOPT_POST,count($fields)); 
curl_setopt($con ,CURLOPT_POSTFIELDS,$fields_string);  
//execute curl
$response= curl_exec($con);  
//close connection 
curl_close($con);

Share It

Developer Instincts