Thursday, January 9, 2014

Creating Simple and Beautiful buttons with CSS

The following is the CSS code to style links as buttons with rounded corners and shadow effect:

.button{
display: inline-block;
font-family:  Verdana, Geneva, sans-serif;
        font-size: 11px;
padding: 5px 10px 6px;


        width: 60px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
cursor: pointer;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align:center;
}

The above CSS snippet will make the link look like a button with rounded corners and now we will add CSS to make buttons of different sizes.

.small_button {
     font-size: 11px;
     width:60px;
     line-height:15px;
}
.medium_button {
    font-size: 13px;
    width:80px;
    line-height:18px;
}
.large.awesome {
   font-size: 14px; 
   width:130px;
   line-height:24px;
}

The following is the CSS to create different color buttons
.blue {
      background-color: #2daebf;
}
.red {
     background-color: #e33100;
}
.magenta {
     background-color: #a9014b;
}
.orange {
    background-color: #ff5c00;
}
.yellow {
    background-color: #ffb515;
}

The following is the HTML code to create buttons using the above styles:

<a href="#" class="button red">Button</a>
<a href="#" class="button blue medium_button">Button</a>
<a href="#" class="button orange large_button">Button</a>
<a href="#" class="button yellow">Button</a>
<a href="#" class="button magenta">Button</a>


Saturday, January 4, 2014

Creating RSS Feed in PHP

RSS (Rich Site Summary), also known as Really Simple Syndication is used to publish frequently updated information in standard format. It an easy way to make the content available to various platforms. It is therefore useful to have RSS feeds for our website. In this tutorial, we will learn how to generate RSS feeds of our website’s content through PHP.

The following is the is the RSS feed structure:

<?xml version="1.0" encoding="ISO-8859-1" ?>
    <rss version="2.0">
        <channel>
            <title></title>
            <link></link>
            <description></description>
            <language></language>
            <item>
                <title></title>
                <link></link>
                <description></description>
            </item>
        </channel>
    </rss>

Now we will write a PHP program to extract data from the MySQL database and generate RSS feed.

<?php

//Function to remove unwanted characters from the string.
function clean_input($input) {
    $search = array(
        '@<script[^>]*?>.*?</script>@si',   /* Remove javascript */
        '@<[\/\!]*?[^<>]*?>@si',            /* Remove HTML tags */
        '@<style[^>]*?>.*?</style>@siU',    /* Remove style tags */
        '@<![\s\S]*?--[ \t\n\r]*>@'         /* Remove multi-line comments */
    );

    $output = preg_replace($search, '', $input);
    return $output;
?>

<?xml version="1.0" encoding="ISO-8859-1" ?>
    <rss version="2.0">
        <channel>
            <title>WEBSITE_TITLE</title>
            <link>WEBSITE_LINK</link>
            <description>DESCRIPTION_TEXT</description>
            <language>LANGUAGE_USED</language>
<?php

            $query = 'SELECT * FROM `content` ORDER BY `id` DESC';
            $rs = mysql_query($query);
               
          while($row = mysql_fetch_assoc($rs)) {
                    $post_title = clean_input($row['title']);
                   $url = clean_input($row['url']); 
    $description = clean_input($row['short_description']);

                    # Putting in the blog posts information for the user.
                    echo '<item>';
                    echo '<title>'.$post_title.'</title>';
                    echo '<link>'.$url.'</link>';
                    echo '<description><![CDATA['.$description.']]></description>';
                    echo '</item>';
                }
            }

?>
        </channel>
    </rss>


The above code gets the content from the MySQL database and displays it in RSS format.