Tuesday, May 4, 2010

create Box with rounded corners and shadow using CSS










In this session I am going to explain you how to create rounded block (will extends based on the text inside the block) with shadow using CSS like below image.






Main elements in this case would be the heading, text, bottom, shadow.
Here is the outline how to create the box.
CSS styles:
.ViewBox{
width: 465px;
background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBDUgcnzCxGJGp40a2V-UPJuw8Bj-3ZKPGhtEl7gW3HaHnX_aUKFilB4-ekIXyWVAZvfUB1OmnsNJ7nJwQO1CpG66BZrixFkTLRlUAoeQATfekQX14QuRNLvsBt_2so2IZnnakqCijs7Y/s1600/ViewHead.png) top left no-repeat;
padding-top: 10px;
}

.ViewBox .ViewHead { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7Apgm4IOZkh0UhzM3_03DHF2RA8hxY-Vsy45fXPLHtkV4FrVUzABxS5SWwwtptuu6vrIVqrajdM7-oJ_SHSy9smdDTtbARrkx1wacKvCymb0RcCTOtNxhqty_Ul0NwBehyphenhyphengfoYoHSBc/s1600/ViewHeadRepeater.png) top left repeat-y;
font:normal 24px 'Trebuchet Ms', Trebuchet, sans-serif;
color:#0D3367;
margin-left :-10px;
margin-top :-10px;
margin-bottom :10px;
padding-left: 10px;
text-transform:uppercase;}


.ViewBox .BoxContent{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNPTCkW61V7S2K427qM-uqBAKCzKghI7yT4n929iadp6fPOaZRuZzv4tJNtIR6g8uRX3hPYaV1IcUoez67ErwUaSoU3nri5-O_SUVaDANSpA8cPNklSwZv9bhWh3mvtEsQnKjAXwvJ7I/s1600/ViewShadowRepeater.png) top right repeat-y;

padding:0 7px 0 0;
}
.ViewBox .BoxContentInside {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLH4bhpdDTcp3P98sNlll5y9_qpuethMInNUqhp6Gbzq-a1SDTFXk629ruaaaqRhYDsXY6_N-LR_qUDsCaYjIpiCnZgdRJEq8NIbojOEaKvJ-s4HGzzZKlVT1tezB_su0RVxTLOywq7Vo/s1600/ViewContentRepeater.png) repeat-x scroll;
overflow: hidden;
padding:10px 10px;
}
.ViewBox .BoxBottom{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDA-0l58xG1TAaC1YtiGFDtPKPehbtJ9ANHMguxwd-rpS1DIQR411GPpp8PKa3Xutw7RBsrw6nHi9xA-f1m3UHzdZcUKYuRivLSYQmyrOUQhMLkKZ-Z1R4GZ4J11tvBg8nRsAQdPm9r0/s1600/ViewBoxBottom.png) no-repeat;
height:31px;
}




<div class="ViewBox">
<div class="BoxContent">
<div class="BoxContentInside">
<div class="ViewHead">ESO - Mozart, Boy Genius</div>
<p>From May, 08 at 2 PM to May, 08 at 4 PM</p>
<p>
The inspiring story of young Mozart, his music, and his
life. Local performers and the musicians of the ESO bring Mozart to
life with his stories and many of his most famous classical works
including The Magic Flue, Eine kleine Nachtmusik, Don Giovanni,
Symphony No. 1 and Symphony No. 41.
</p>

</div>
</div>
<div class="BoxBottom"></div>
</div>

MySQL Stored Procedures - Part 1

It seems very hard to find sample examples of MySQL stored Procedures on the internet. So, I have decided to create a blog on creating procedures in MySQL.

In this part I am going to explain how to create a simple procedure and using it in your PHP code.

You can create it using a 3rd party tool like SQLYog or by connectin to your MySQL server in your command prompt.
mysql> delimiter //
mysql> DROP PROCEDURE IF EXISTS `MyProcedure` //
mysql> CREATE PROCEDURE MyProcedure (OUT Total INT)
-> BEGIN
-> SELECT COUNT(*) INTO Total FROM tab_name;
-> END //
Query OK, 0 rows affected (0.00 sec)

mysql> delimiter;

mysql> CALL MyProcedure(@BlogCount);
Query OK, 0 rows affected (0.00 sec)

mysql> SELECT @BlogCount;
+--------------+
@BlogCount
+--------------+
3
+--------------+
1 row in set (0.00 sec)




This is just about how to create a procedure in MySQL.

The below code will show you how to use this procedure in PHP code.

After connecting to the database you can use this procedure using below code:

mysql_query('CALL MyProcedure(@TotalBlogCount)');

This is not the end of it, you have to query the database again to fetch the @TotalBlogCount, here is the simple PHP code consuming the above procedure...


<?
   $link = mysql_connect('localhost','root','root') or die('Could not connect to the server');
   mysql_select_db('your_db_name',$link);

   $res = mysql_query('CALL MyProcedure(@Total)') or die(mysql_error());
   if($res)
   {
      $ActualRes = mysql_query('SELECT @Total') or die(mysql_error());
      if($ActualRes)
      {
         $Row = mysql_fetch_assoc($ActualRes);
         print_r($Row);
      }
   }

?>

The result will be

Array
(
[@Total] => 295
)

I hope this will give you a basic idea to create procedures in MySQL.