Script tutorials» Web Development Tutorials – Scripts Tutorials

Cropping images in runtime using Jcrop (jQuery)

admin — Wed, 01 Sep 2010 15:09:42 +0000

Image Crop Plugin – using Jcrop (jQuery)

Due browsing web I noticed one new good plugin which we can use to work with images. This is JCrop plugin, it can help us to perform different effect with images (as example highlight some objects using animation or zooming images. But main purpose is cropping.

Here are samples and downloadable package:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code with 3 samples.

templates/jcrop_main.html

Jcrop - Crop Behavior

Preview pane:

X1
Y1
X2
Y2
W
H

An example of crop script. I decided to show form with values (you can keep it invisible if you want).
Current sample ties several form values together with a event handler.
Form values are updated as the selection is changed.
Also current sample have preview area. So we will see our crop result.
Aspect ratio disabled.
If you press the Crop Image button, the form will be submitted and a 200x200 thumbnail will be dumped to the browser. Try it!

Jcrop - Animations

Animating Selections. We can use Jcrop API to set selections using animation (or immediately) to them. Here are several buttons are set to control the selection. User interactivity is still available. Try it!

Jcrop - Custom styling

So maybe you like the color blue.
This demo shows how we can styling our Jcrop sample. This is easy - we will use addClass param to override styles. Also possible to set opacity using bgOpacity param (at current sample bgOpacity = 0.5). Also I used minSize param to determinate min size of selector (value = 50).

Step 2. CSS

Here are used CSS styles.

templates/css/jcrop_main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.jcrop_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:3.5em 10% 2em;padding:1em 2em 2em}
.jcrop_example p{font-size:90%}
.accordion h3{margin:0}
.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}
.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}

.jcrop_custom .jcrop-vline,.jcrop_custom .jcrop-hline{background:#FF0}
.jcrop_custom .jcrop-handle{background-color:#FF4B4B;-moz-border-radius:5px;-webkit-border-radius:5px;border-color:#FFF}

templates/css/jquery.Jcrop.css, templates/css/jquery.ui.accordion.css and templates/css/jquery.ui.theme.css

This is common files – styles of jquery elements. No need to give full code of that file here. It always available as a download package

Step 3. JS

Here are necessary JS files to our project.

js/jcrop_main.js

$(function(){
    // for sample 1
    $('#cropbox1').Jcrop({ // we linking Jcrop to our image with id=cropbox1
        aspectRatio: 0,
        onChange: updateCoords,
        onSelect: updateCoords
    });

    // for sample 2
    var api = $.Jcrop('#cropbox2',{ // we linking Jcrop to our image with id=cropbox1
        setSelect: [ 100, 100, 200, 200 ]
    });
    var i, ac;

    // A handler to kill the action
    function nothing(e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
    };

    // Returns event handler for animation callback
    function anim_handler(ac) {
        return function(e) {
            api.animateTo(ac);
            return nothing(e);
        };
    };

    // Setup sample coordinates for animation
    var ac = {
        anim1: [0,0,40,600],
        anim2: [115,100,210,215],
        anim3: [80,10,760,585],
        anim4: [105,215,665,575],
        anim5: [495,150,570,235]
    };

    // Attach respective event handlers
    for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));

    // for sample 3
    $('#cropbox3').Jcrop({ // we linking Jcrop to our image with id=cropbox3
        setSelect: [ 20, 130, 480, 230 ],
        addClass: 'jcrop_custom',
        bgColor: 'blue',
        bgOpacity: .5,
        sideHandles: false,
        minSize: [ 50, 50 ]
    });
});

function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);

    $('#x2').val(c.x2);
    $('#y2').val(c.y2);

    var rx = 200 / c.w; // 200 - preview box size
    var ry = 200 / c.h;

    $('#preview').css({
        width: Math.round(rx * 800) + 'px',
        height: Math.round(ry * 600) + 'px',
        marginLeft: '-' + Math.round(rx * c.x) + 'px',
        marginTop: '-' + Math.round(ry * c.y) + 'px'
    });
};

jQuery(window).load(function(){
    $("#accordion").accordion({autoHeight: false,navigation: true});
});

function checkCoords() {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};

js/jquery.Jcrop.min.js, js/jquery.min.js, js/jquery.ui.accordion.js and js/jquery.ui.widget.js

This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

Step 4. PHP

Ok, here are all used PHP file:

index.php

Step 5. Images

Also we need source image for our project:

Live Demo

download in package

Conclusion

Today I told you about new interesting jquery plugin – Jcrop. Sure that you will happy play with it. You can use this material to create own scripts into your startups. Good luck!

Importing multiple RSS feeds – using newsWidget (jQuery)

admin — Wed, 04 Aug 2010 16:10:46 +0000

Importing multiple RSS feeds – using newsWidget (jQuery)

Some times ago I told how to display rss feed at our website. But some times ago my friend ask me how to display in single box feeds from multiple sources. I decided to investigate it and located NewsWidget library. Lets check its possibilities.

Here is a sample:

Live Demo 1

Live Demo 2

Live Demo 3

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we will start with the HTML.

Here are sources of all 3 samples:

templates/sample1.html




    
    Example 1 - NewsWidget jQuery Plugin
    


    
        Below you find some random rss feeds from few sources using extended format. Every 15 seconds the list is updated.

templates/sample2.html




    
    Example 2 - NewsWidget jQuery Plugin
    


    
        Below you find some the latest rss feeds from few sources using extended format.

templates/sample3.html




    
    Example 3 - NewsWidget jQuery Plugin
    


    
        Below you find some the latest rss feeds from few sources using easy format.

As you can see – these samples quite same, just list of params is different. Most of params described in JS library itself, but I used next: limitItems – how many elements we will display; refresh – refresh time (in ms, optional param); random – are elements will display randomly or not, format – array of elements which we going to display.

Step 2. CSS

Here are used CSS styles.

css/styles1.css

@charset "utf-8";
body{color:#333;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin-left:0;padding-left:0;list-style:none}
#newsWidget ul li{padding-left:20px;background-image:url(news.jpg);background-repeat:no-repeat;background-position:0 12px}
#newsWidget h4{font-size:12px;color:#424242;margin:0;padding:10px 0 5px}
#newsWidget .description{margin:0;padding:0 0 5px}
#newsWidget .date{font-size:10px;color:gray}
#newsWidget .date,#newsWidget .link{font-size:10px;color:gray;padding:0 5px 0 0;margin:0 5px 0 0;border-right:solid 1px gray}
#newsWidget .websiteTitle{font-size:10px;color:gray}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#036}
#newsWidget a:hover{color:#f60}

css/styles2.css

@charset "utf-8";
body{color:#333;font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px;color:#333}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border:3px solid #f2f2f2;display:block;margin:10px 0 0;padding:10px 24px 16px 28px;position:relative}
#newsWidget h4{font-size:17px;color:#424242;margin:0;padding:10px 0 5px;line-height:22px}
#newsWidget .description{color:gray;font-size:11px;line-height:15px;clear:both}
#newsWidget .date,#newsWidget .websiteTitle{font-size:10px;font-style:italic;line-height:13px;padding:0 4px 24px 0;display:block;float:left}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{border-bottom:1px solid #d8d8d8;color:#333;text-decoration:none}
#newsWidget a:hover{border-bottom-color:#333}
.spacer{clear:both;height:1px;display:block}

css/styles2.css

@charset "utf-8";
body{color:#bebebe;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:lighter;line-height:18px;text-align:center;background-image:url(background.jpg);background-repeat:repeat}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px dotted #414141;padding:10px;color:#333}
#newsWidget .intro{background-color:#67afcb;padding:10px;color:#fff;margin-bottom:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border-bottom:1px dotted #313131;margin:0 0 8px;padding:0 0 8px;display:block;position:relative}
#newsWidget h4{font-size:14px;color:#424242;margin:0;padding:2px 0 0;line-height:18px;display:block}
#newsWidget .date{color:#999;font-size:11px;clear:both}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#67afcb;text-decoration:none}
#newsWidget a:hover{color:#79c0dc}
.spacer{clear:both;height:1px;display:block}

Step 3. JS

Current samples contain jquery.min.js library and jquery.newsWidget.js. I don`t included source codes of these libraries in post. It always available in package

Step 4. PHP

Here are one small PHP file:

get_rss_feed.php

Live Demo 1

Live Demo 2

Live Demo 3

download in package

Conclusion

Today I told you how to import several RSS feeds using new jQuery library. You can use this material to create own scripts into your startups. Good luck!

Import RSS Feeds using jFeed (jQuery)

Creating photo gallery using jQuery and VisualLightBox

admin — Sun, 25 Jul 2010 17:13:23 +0000

Creating photo gallery using jQuery and VisualLightBox

Today I will tell you about one useful JQuery plugin – VisualLightBox.
This plugin can help you to create good-looking galleries. And this is very easy to implement.

Here is a sample:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

Here are source code (index.html) of our gallery.

Here are few notes when we filling array of objects:
a. All our images which we going to show in gallery I put in ‘images’ folder. And set names of image as ‘pic1.jpg’, ‘pic2.jpg’ .. ‘pic5.jpg’. You can call your own images as you wish.
b. ID of first A tag will ‘firstImage’.
c. If we going to hide all following images at page we can set additional class for A tag – ‘vlightbox_hidden’.
d. After array of objects I put some JS code. This is just initialization of VisualLightBox library. You can play with params as you wish. This is not so difficult.

Step 2. CSS

Here are used CSS styles.

visuallightbox.css – I decided to not include this file in post itself (this file not so small, and commonly – it contain styles just for gallery). It always available as a download package

vlightbox.css

#vlightbox { width:680px;height:355px; }
#vlightbox span{ display:block; }
#vlightbox a{ display:block; float:left;width:310px; height:155px; margin:3px 1px; padding:6px; border:solid 1px #b8b8b8;
background-color:#f4f5f5;opacity:0.87; }
#vlightbox a img{ display:block; border:none; margin:0px; }
#vlightbox a:hover{ opacity:1; }
#vlightbox a.vlightbox_hidden{ display:none; }
#vlightbox a img { border:medium none; margin:0 auto;width:310px; height:155px; }

Step 3. JQuery

Current sample contain jquery.js library and visuallightbox.js. I don`t included source codes of these libraries in post. It always available as a download package

Step 4. Images

Also we need several images for our project:

Live Demo

download in package

Conclusion

Today I told you how to display sets of images as gallery using jQuery and VisualLightBox plugin at your own website. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!

Jquery CSS Tutorial on Zooming Image

How to Easily display Digg posts via XSLT using Digg Api

admin — Thu, 08 Jul 2010 23:33:57 +0000

How to Easily display Digg posts via XSLT using Digg Api

As we know, Digg become very popular last time, so why not use it for our purposes? I decided to investigate Digg a little and learn how possible to draw Digg posts at my own website. And I make own unique method. Hope you will like it.
Reading http://digg.com/api/docs/1.0/groups/ I find necessary ways to get posts XML results. Just check story.getPopular method. Yes, this is usual to use different reparse methods in PHP, but lets learn something new like XSLT (Extensible Stylesheet Language Transformations).

Here is a sample:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Digg stories. As you can see – I already put several samples ($sMethod values) for different methods. So you can try any method. All code commented, so I hope it will easy to understand it.

loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/digg.xslt');

// Configure the transformer
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl); // attach the xsl rules

echo '';
echo $proc->transformToXML($xml);

// this function get digg information using caching (not more 1 times per minute)
function getDiggStoriesXml($sUrl = 'http://services.digg.com/1.0/endpoint?method=story.getPopular') {
    // used cache folder
    $sCacheFolder = 'cache/';

    // formatting cache name
    $sFilename = date("YmdHi").'.xml';

    if (! file_exists($sCacheFolder.$sFilename)) {
        //grab the XML and save it to a temp XML file
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, "w");
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array("User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15") ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}

?>

Step 2. CSS

Here are used CSS styles.

css/styles.css

.news-summary, .news-full, .news-full-confirm {
background:none repeat scroll 0 0 #F3F3F3;
border:1px solid #CCCCCC;
clear:left;
margin:10px;
min-height:55px;
padding:10px;
position:relative;
}
.news-body {
padding-left: 60px;
}
.news-body a.body {
text-decoration: none;
padding: 4px;
margin: -4px 0 -4px -4px;
color: #555;
position: relative;
z-index: 2;
}
.news-summary .news-body em {
color: #999;
white-space: nowrap;
}
.news-body em a {
color: #777;
text-decoration: none;
border-bottom: 1px solid #ddd;
}
.news-body em a:hover {
color: #000;
}
.news-digg {
position: absolute;
top: 0.8em;
left: 0;
text-align: center;
font-size: 85%;
margin: 0 0 0 3px;
padding: 0;
list-style: none;
background: url(../img/shade-news.gif) no-repeat;
}
.digg-count a, .digg-count span  {
display: block;
padding: 10px 0 4px 0;
text-decoration: none;
width: 50px;
min-height: 40px;
color: #93883F;
text-align: center;
}
.news-summary .digg-count strong {
font-size: 160%;
font-weight: normal;
letter-spacing: -1px;
line-height: 1;
display: block;
color: #736926;
}
.digg-count img {
position: absolute;
top: 0;
left: 0;
border: none;
}
.digg-count a:hover, .digg-count a:hover strong {
color: #998D43;
}
.news-body h3 {
margin: 2px 0 0 0;
font-size: 115%;
letter-spacing: -0.01em;
font-weight: bold;
line-height: 1.1;
}
.news-body p {
margin: 0.2em 0 0.1em 0;
line-height: 1.3;
}
.news-body em {
font-style: normal;
font-size: 85%;
color: #666;
}
span.news-img {
display: block;
width: 80px;
height: 80px;
background: #ddecee url(../img/v-default.gif);
border: 1px solid #a5c2e3;
position: absolute;
left: 60px;
top: 8px;
}
.img-summary span.news-img {
background: #ddecee url(../img/i-default.gif);
}
span.news-img em {
display: block;
width: 80px;
height: 80px;
text-indent: -2000em;
background: url(../img/v-frame-simple.png);
}
.img-summary span.news-img em {
background: url(../img/i-frame-simple.png);
}
.v .news-body {
margin-left:0;
min-height:70px;
padding-left:152px;
padding-right:0;
}
.comments {
background:transparent url(../img/i-cmts.gif) no-repeat scroll 0 4px;
word-spacing:-0.1em;
color:#578CCA;
padding:4px 6px 4px 18px;
font-size:85%;
}

Step 3. XSLT

I hope this is most interesting part of my story, used XSLT rules:

xslt/digg.xslt



    
    
        
            
                
                    
                        
                            
                                news-summary v img-summary
                                news-summary
                            
                        

                        
                            
                                
                                    
                                    
                                        
                                            
                                        
                                    
                                    

                                
                                    
                                    background: transparent url(
                                            
                                                
                                              
                                        ) repeat scroll 0% 0%;
                                    view!
                                
                                
                            
                            
                                
                                
                                
                                
                                
                                (Submitted by 
                                
                                    

http://digg.com/users/

                                            
                                                
                                              
                                        
                                    
                                    
                                
                                )
                                
                            

                    		
                    			
                                    
                                     Comments
                            

                        

                    	
                    		
                        		
                                
                                
                        		 diggs
                            
                    	

                    
                
                Copyright © AndrewP

Step 4. Images

Also we need several images for our project:

Step 5. Few important things

After reading http://digg.com/api/docs/concepts I found ‘Be Polite, Please!’, so I decode not request Digg api any time when user call it, and I made way using cache system. I started caching results. I created ‘cache’ folder with permission to write (you should create ‘cache’ folder too).
After I put .htaccess file in it with next text:
Options -Indexes

And now check index.php:
$sFilename = date(“YmdHi”).’.xml’;
So I using current year-month-day-hour-minute digits to generate cache filename. Hope you understand my idea

Live Demo

download in package

Conclusion

Today I told you how to display digg posts at your own website via XSLT transformations. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!

No related posts.

How to Easily Make Your own RSS Feed

admin — Thu, 03 Jun 2010 16:42:26 +0000

How to Easily Make your own RSS feed using PHP + SQL

RSS Feed is an important part of a website/blog to attract and bring back users and make them permanent readers. Blogs like wordpress have built in rss reader, but if your website doesn’t have a rss system this tutorial is just the thing you need. As we know, RSS feeds usually using to transfer some news to readers. Today I will tell you how to create such feeds and fill it with information from database.

Here is a sample:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate RSS feed

getAll($sSQL);
foreach ($aStories as $iID => $aStoryInfo) {
    $iStoryID = (int)$aStoryInfo['id'];

    $aStoriesRSS[$iID]['Guid'] = $iStoryID;
    $aStoriesRSS[$iID]['Title'] = $aStoryInfo['title'];
    $aStoriesRSS[$iID]['Link'] = $sSiteUrl . 'view.php?id=' . $iStoryID;
    $aStoriesRSS[$iID]['Desc'] = $aStoryInfo['description'];
    $aStoriesRSS[$iID]['DateTime'] = $aStoryInfo['when'];
}

$oRssFactory = new RssFactory();

header('Content-Type: text/xml; charset=utf-8');
echo $oRssFactory->GenRssByData($aStoriesRSS, 'Our stories', $sSiteUrl . 'index.php', $sRssIcon);

?>

view.php

We will draw post page using this page

 0) {
    $aStoryInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `stories` WHERE `id`='{$iStoryID}'");

    $sStoryTitle = $aStoryInfo['title'];
    $sStoryDesc = $aStoryInfo['description'];

    echo <<{$sStoryTitle}
{$sStoryDesc}

Back to RSS
EOF;
}

?>

inc/db.inc.php

This is our database class. No need to give full code of that file here (it big enough). It always available as a download package.

inc/rss_factory.inc.php

This is our RSS factory class. Universal class which transforming array with information (in necessary format) into RSS code.

 $aUnitInfo) {
			$sUnitUrl = $aUnitInfo['Link'];
			$sUnitGuid = $aUnitInfo['Guid'];
			$sUnitTitle = $aUnitInfo['Title'];
            $sUnitDate = $aUnitInfo['DateTime'];
			$sUnitDesc = $aUnitInfo['Desc'];

            $sUnitRSSFeed .= "<![CDATA[{$sUnitTitle}]]>{$sUnitDate}";
		}

		$sRSSTitle = "{$sTitle} RSS";
		$sRSSImage = ($sImage != '') ? "{$sImage}{$sRSSTitle}{$sMainLink}" : '';
        return "{$sRSSTitle}{$sMainLink}{$sRSSTitle}{$sRSSLast}{$sRSSImage}{$sUnitRSSFeed}";
	}
}

?>

Step 3. SQL

We will need to execute next SQL in our database. We will create table with demo stories which going to show in RSS

CREATE TABLE `stories` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) NOT NULL default '',
  `description` text NOT NULL,
  `when` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `stories` (`id`, `title`, `description`, `when`) VALUES
(1, 'First story', 'First story description here', '2010-06-01 00:00:00'),
(2, 'Second story', 'Second story description here', '2010-06-02 00:00:00'),
(3, 'Third story', 'Third story description here', '2010-06-03 00:00:00'),
(4, 'Fourth story', 'Fourth story description here', '2010-06-04 00:00:00'),
(5, 'Fifth story', 'Fifth story description here', '2010-06-05 00:00:00'),
(6, 'Sixth story', 'Sixth story description here', '2010-06-06 00:00:00'),
(7, 'Seventh story', 'Seventh story description here', '2010-06-07 00:00:00'),
(8, 'Eighth story', 'Eighth story description here', '2010-06-08 00:00:00'),
(9, 'Ninth story', 'Ninth story description here', '2010-06-09 00:00:00'),
(10, 'Tenth story', 'Tenth story description here', '2010-06-10 00:00:00');

Live Demo

download in package

Conclusion

Today I told you how to create own RSS feed. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!

Advance Level Php Tutorials and Scripts

Import RSS Feeds using jFeed (jQuery)

admin — Tue, 01 Jun 2010 04:49:14 +0000

Import RSS Feeds from any rss enabled site using jFeed (jQuery)

This simple tutorial will show u how to Import rss feeds of any site into your own custom area/block of site. It can be used as news import from yahoo, bbc etc. As we know, RSS feeds usually using to transfer some news to readers. Today I will tell you about RSS feeds and teach you how to make own RSS aggregator. So you will able to display different RSS feeds at your website with nice design.

Here is a sample:

Live Demo

Download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code (with 2 RSS blocks). Pay heed to RSSAggrCont elements. At its params. ‘rssnum’ mean how many rss elements will display at page. ‘rss_url’ – RSS url. Hope you will able to easy change these params.

templates/rss_page.html

Step 2. CSS

Here are used CSS styles.

templates/css/styles.css

.RSSAggrCont {
    border:1px solid #AAA;
    -moz-box-shadow:0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    width:500px;
    padding:10px;
    background:#f3f3f3;
    margin:15px;
    float:left;
}

/* RSS Feeds */
.rss_item_wrapper {
    padding-bottom: 8px;
}
.rss_item_wrapper:last-child {
    padding-bottom: 0px;
}
.rss_item_header {
    font-size:12px;
    font-weight:bold;
    padding-bottom:0px;
}
.rss_item_header a,
.rss_item_header a:link,
.rss_item_header a:visited,
.rss_item_header a:hover,
.rss_item_header a:active {
    font-size:12px;
    font-weight:bold;
    color:#33c;
}
.rss_item_info {
    color:#999;
    font-size:9px;
}
.rss_item_desc {
    text-align:justify;
    font-size: 11px;
}
.rss_read_more {
    background-color:#EDEDED;
    font-size:11px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    vertical-align: middle;
    margin-top:2px;
    padding:0 9px;
    text-align:left;
    text-decoration:none;
    text-transform:capitalize;
}
.loading_rss {
    text-align:center;
    width:89px;
    height:64px;
    background-image:url(../images/loading_bg.png);
    z-index: 10;
    margin: 10px auto;
}
.loading_rss img {
    margin-top: 16px;
}
.loading_rss div {
    width:89px;
    height:64px;
    background-image:url(../images/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

Step 3. JS

Here are few necessary JS files to our project.

js/jquery.aRSSFeed.js

// jQuery plugin - Simple RSS Aggregator
(function($){
    $.fn.aRSSFeed = function() {
        return this.each( function(){
            var $Cont = $(this);
            var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0);
            var sFeedURL = $Cont.attr('rss_url');

            if (sFeedURL == undefined)
                return false;

            $.getFeed ({
                url: 'get_rss_feed.php?url=' + escape(sFeedURL),
                success: function(feed) {
                    if (feed != undefined && feed.items) {
                        var sCode =
                            '';
                        var iCount = 0;
                        for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) {
                            var item = feed.items[iItemId];
                            var sDate;
                            var a;
                            var oDate

                            if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/)))
                                oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0);
                            else
                                oDate = new Date(item.updated);
                            sDate = oDate.toLocaleString();

                            sCode +=
                                '' +
                                    '' +
                                        '' + item.title + '' +
                                    '' +
                                    '' +
                                        ' ' + sDate + '' +
                                    '' +
                                    '' + item.description + '' +
                                '';

                            iCount ++;
                            if (iCount == iMaxNum) break;
                        }

                        sCode +=
                            '' +
                            '' +
                                '' +
                                '' + feed.title + '' +
                            '' +
                            '';

                        $Cont.html(sCode);
                    }
                }
            } );
        } );
    };
})(jQuery);

js/jquery-1.4.2.min.js and js/jquery.jfeed.js

This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

Step 4. PHP

I hope that most code will easy for your understanding – each function have normal name and commented.

Ok, here are all used PHP files:

index.php

get_rss_feed.php

Step 5. Images

Also we need several images for our project:

View Live Demo

download in package

Conclusion

Today I told you how to create own RSS aggregator using jQuery library – jFeed. You can use this material to create own scripts into your startups. Good luck!

How to Easily Make AJAX Style PHP Chat Application

admin — Tue, 18 May 2010 14:45:56 +0000

How to Easily Make “Ajaxy” Chat application with PHP + SQL + jQuery

Today I will tell you about another chat system. After making old-style chat described in previous post I decided to make modern, pretty version. I made several enhancements:

a) Login system. Now it using database to keep members. Also it have easy methods to take some necessary info about logged member.
b) Chat interface. Now it much more user friendly. And show last added messages via toggling (based on jQuery). Looks fine.
c) Inner code structure. Now here are good order. All libraries in ‘inc’ folder, all javascripts in ‘js’ folder, all template-related files in folder ‘templates’. More, class organization: now we have useful DB class, class of login system, chat class too.
d) of code safety. Added necessary methods to protect from hack attacks. As example function process_db_input in our DB class.

So, as result – we will able to chat with our logged members. We will use database to store messages as usual.

Here is a sample:

Live “Ajaxy” Chat Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is input text form of our chat.

templates/chat_input.html


    

You can type anything in chat

This is login form code.

templates/login_form.html


    Username: 
    Password: 
    

You can use username "User1" or "User2" and password "qwerty" to login in system

Step 2. CSS

Here are used CSS styles.

templates/css/styles.css

.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}

Step 3. SQL

We will need to execute next SQL in our database.

CREATE TABLE `s_ajax_chat_messages` (
  `id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
  `member_id` INT( 11 ) NOT NULL ,
  `member_name` VARCHAR( 255 ) NOT NULL ,
  `message` VARCHAR( 255 ) NOT NULL ,
  `when` INT( 11 ) NOT NULL ,
  PRIMARY KEY ( `id` )
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

CREATE TABLE `s_members` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `pass` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

INSERT INTO `s_members` (`id`, `name`, `pass`) VALUES
(NULL, 'User1', 'd8578edf8458ce06fbc5bb76a58c5ca4'),
(NULL, 'User2', 'd8578edf8458ce06fbc5bb76a58c5ca4');

Step 4. JS

Here are few necessary JS files to our project.

js/main.js

$(function() {
    getMessages = function() {
        var self = this;
        var _sRandom = Math.random();  

        $.getJSON('index.php?action=get_last_messages' + '&_r=' + _sRandom, function(data){
            if(data.messages) {
                $('.chat_main').html(data.messages);
            }

            // start it again;
            setTimeout(function(){
               getMessages();
            }, 5000);
        });
    }
    getMessages();
});

js/jquery-1.4.2.min.js

This classe are general – jQuery library. No need to give full code of that file here. It always available as a download package

Step 5. PHP

I hope that most code will easy for your understanding – each function have normal name and commented.

Ok, here are all used PHP files:

index.php

=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('inc/db.inc.php');
require_once('inc/login.inc.php');
require_once('inc/ajx_chat.inc.php');

if ($_REQUEST['action'] == 'get_last_messages') {
    $sChatMessages = $GLOBALS['AjaxChat']->getMessages(true);

    require_once('inc/Services_JSON.php');
    $oJson = new Services_JSON();
    echo $oJson->encode(array('messages' => $sChatMessages));
    exit;
}

// draw login box
echo $GLOBALS['oSimpleLoginSystem']->getLoginBox();

// draw exta necessary files
echo '';
echo '';
echo '';

// draw chat messages
$sChatMessages = $GLOBALS['AjaxChat']->getMessages();

// draw input form + accept inserted texts
$sChatInputForm = 'Need login before using';
if ($GLOBALS['bLoggedIn']) {
    $sChatInputForm = $GLOBALS['AjaxChat']->getInputForm();
    $GLOBALS['AjaxChat']->acceptMessages();
}

echo $sChatMessages . $sChatInputForm;

?>

inc/ajx_chat.inc.php

This is our Chat class

process_db_input($_POST['s_message'], A_TAGS_STRIP);
            if ($sMessage != '') {
                $GLOBALS['MySQL']->res("INSERT INTO `s_ajax_chat_messages` SET `member_id`='{$iUserID}', `member_name`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
            }
        }
    }

    /**
    * Return input text form
    */
    function getInputForm() {
        ob_start();
        require_once('templates/chat_input.html');
        return ob_get_clean();
    }

    /**
    * Return last 15 messages
    */
    function getMessages($bOnlyMessages = false) {
        $aMessages = $GLOBALS['MySQL']->getAll("SELECT `s_ajax_chat_messages`.*, `s_members`.`name`, UNIX_TIMESTAMP()-`s_ajax_chat_messages`.`when` AS 'diff' FROM `s_ajax_chat_messages` INNER JOIN `s_members` ON `s_members`.`id` = `s_ajax_chat_messages`.`member_id` ORDER BY `id` DESC LIMIT 15");

        $sMessages = '';
        // collecting list of messages
        foreach ($aMessages as $iID => $aMessage) {
            $sExStyles = $sExJS = '';
            $iDiff = (int)$aMessage['diff'];
            if ($iDiff < 7) {
                $sExStyles = 'style="display:none;"';
                $sExJS = "";
            }

            $sWhen = date("H:i:s", $aMessage['when']);
            $sMessages .= '' . $aMessage['name'] . ': ' . $aMessage['message'] . '(' . $sWhen . ')' . $sExJS;
        }

        if ($bOnlyMessages) return $sMessages;
        return 'Ajaxy Chat
' . $sMessages . '';
    }
}

$GLOBALS['AjaxChat'] = new SimpleAjaxyChat();

?>

inc/db.inc.php, inc/login.inc.php, inc/Services_JSON.php

All these classes are general in nature and is large enough that we will not describe them here, but they are always available as a download package

View Live Demo of our sample

download in package

Conclusion

Today I told you how to create own simple and good ajaxy chat application based on PHP, MySQL, jQuery and JSON a little. You can use this material to create own scripts into your startups. Good luck!

How to Easily Make a PHP Chat Application

How to Easily Make a PHP Chat Application

admin — Fri, 07 May 2010 16:55:31 +0000

How to Easily Make Chat application with PHP + SQL

Today I will tell you about creating simple Chat application using our existing login system. This will useful and most simple solution. We will able to chat with our logged members. We will use database to store messages.

Here is a sample:

Live Chat Demo
download in package

So download the example files and lets start coding!

Step 1. HTML

As usual, we start with the HTML.

This main chat window.

index.html

This is login form code.

login_form.html




 Username: 
 Password: 
 

You can use username "User1" or "User2" or "User3" and password "qwerty" to login in system

Here are new 3 template files to chat (2 to messages box and 1 to send message form):

chat_begin.html




 Chat

chat_end.html

chat_input.html




 

You can type anything in chat

Step 2. CSS

Here are used CSS styles.

styles.css

.login_form {
 border: 1px solid #AAA;
 padding:10px;
}

h3 {margin-top:3px;}

.chat_main {
 border:1px solid #AAA;
 -moz-box-shadow:0 0 10px #ccc;
 -webkit-box-shadow: 0 0 10px #ccc;
 width:350px;
 padding:10px;
 background:#f3f3f3;
}

.message {
 border:1px solid #AAA;
 margin:4px;
 padding:5px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 background:#ffffff;
}

.textf {
-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;
}

.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
 font-size:10px;
 color:#888;
 margin-left:10px;
}

.submit_form {
 margin:10px 0px;
}

Step 3. SQL

We will need to execute next SQL in our database.

CREATE TABLE `s_chat_messages` (
`id` INT(11) NOT NULL AUTO_INCREMENT ,
`user` VARCHAR(255) NOT NULL ,
`message` VARCHAR(255) NOT NULL ,
`when` INT(11) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 4. PHP

As you remember – we had ready easy authentication system. I moved it to external library file (inc/login.inc.php). This will useful for us – now code more structured and it comfortable to use in different places of code.

After I created new library to work with chat (inc/chat.inc.php). This class have next functions:

acceptMessages – function accept sent messages and store it in DB table

getMessages – return list of last 15 messages

After I created 2 last files: messages.php and main.php. First file used to draw list of messages. It have autoupdate each 5 second (I thing this is enough to our chat). Second draw login form and input field of chat. Where we due logged able to post text in chat.

Ok, here are all used PHP files:

main.php

=") == 1)
 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
 error_reporting(E_ALL & ~E_NOTICE);

require_once('inc/login.inc.php');
require_once('inc/chat.inc.php');

// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();

$oSimpleChat = new SimpleChat();

// draw login box
echo $oSimpleLoginSystem->getLoginBox();

// draw chat application
$sChatResult = 'Need login before using';
if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
 if ($oSimpleLoginSystem->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
 $sChatResult = $oSimpleChat->acceptMessages();
 }
}
echo $sChatResult;

?>

messages.php


getMessages();

?>

inc/chat.inc.php

sDbName = 'database_name';
        $this->sDbUser = 'username';
        $this->sDbPass = 'password';
    }

    // adding to DB table posted message
    function acceptMessages() {
        if ($_COOKIE['member_name']) {
            if(isset($_POST['s_say']) && $_POST['s_message']) {
                $sUsername = $_COOKIE['member_name'];

                //the host, name, and password for your mysql
                $vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);

                //select the database
                mysql_select_db($this->sDbName);

                $sMessage = mysql_real_escape_string($_POST['s_message']);
                if ($sMessage != '') {
                    mysql_query("INSERT INTO `s_chat_messages` SET `user`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
                }

                mysql_close($vLink);
            }
        }

        ob_start();
        require_once('chat_input.html');
        $sShoutboxForm = ob_get_clean();

        return $sShoutboxForm;
    }

    function getMessages() {
        $vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);

        //select the database
        mysql_select_db($this->sDbName);

        //returning the last 15 messages
        $vRes = mysql_query("SELECT * FROM `s_chat_messages` ORDER BY `id` ASC LIMIT 15");

        $sMessages = '';

        // collecting list of messages
        if ($vRes) {
            while($aMessages = mysql_fetch_array($vRes)) {
                $sWhen = date("H:i:s", $aMessages['when']);
                $sMessages .= '' . $aMessages['user'] . ': ' . $aMessages['message'] . '(' . $sWhen . ')';
            }
        } else {
            $sMessages = 'DB error, create SQL table before';
        }

        mysql_close($vLink);

        ob_start();
        require_once('chat_begin.html');
        echo $sMessages;
        require_once('chat_end.html');
        return ob_get_clean();
    }
}

?>

inc/login.inc.php

aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
            'User3' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
        );
    }

    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();

        $sLogoutForm = 'logout';

        if ((int)$_REQUEST['logout'] == 1) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }

        if ($_REQUEST['username'] && $_REQUEST['password']) {
            if ($this->check_login($_REQUEST['username'], MD5($_REQUEST['password']))) {
                $this->simple_login($_REQUEST['username'], $_REQUEST['password']);
                return 'Hello ' . $_REQUEST['username'] . '! ' . $sLogoutForm;
            } else {
                return 'Username or Password is incorrect' . $sLoginForm;
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return 'Hello ' . $_COOKIE['member_name'] . '! ' . $sLogoutForm;
                }
            }
            return $sLoginForm;
        }
    }

    function simple_login($sName, $sPass) {
        $this->simple_logout();

        $sMd5Password = MD5($sPass);

        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }

    function simple_logout() {
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');

        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }

    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }
}

?>

View Live Demo of our sample

download in package

Conclusion

I described how to make easy chat application based on PHP and MySQL. You can use this material to create own scripts into your startups. Good luck!

How to Easily Make a PHP Shoutbox Application

admin — Fri, 09 Apr 2010 12:57:52 +0000

How to Easily Make Shoutbox application with PHP
Today I will tell you about creating easy Shoutbox application using our existed login system. This will useful and simple solution. We will able to shout something with our logged members. We will use database to store messages.

Here is a sample:

Live Demo
download in package

So download the example files and lets start coding!

Step 1. HTML

As usual, we start with the HTML. This is login form code.

login_form.html


    Username: 
    Password: 
    

You can use username "User1" of "User2" and password "qwerty" to login in system

Here are new 2 template files to shoutbox:

shoutbox_begin.html




    Shoutbox

shoutbox_end.html

    
        
    
    You can shout anything in this chat

Step 2. CSS

Here are used CSS styles.

styles.css

.login_form {
    border: 1px solid #AAA;
    padding:10px;
}

shoutbox.css

.shoutbox_main {
    border:1px solid #AAA;
    width:350px;
    padding:10px;
}

.message {
    border-bottom:1px solid #AAA;
    padding:2px;
}

.message span {
    font-size:10px;
    color:#888;
    margin-left:10px;
}

.s_form {
    margin:0px;
    padding:10px 0;
}

Step 3. SQL

We will need to execute next SQL in our database.

CREATE TABLE `s_messages` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`user` VARCHAR( 255 ) NOT NULL ,
`message` VARCHAR( 255 ) NOT NULL ,
`when` INT( 11 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 4. PHP

Now that we followed all the code on the front-end, it is now time for the last part of this tutorial – the PHP back-end.

As we can see – this is just pure class with functions for login system.

I used next functions:

getLoginBox – function return login form. In case if member logged – it will return Hello member record and possibility for logout

simple_login – perform login to system (storing necessary information in cookies)

simple_logout – perform logout (clearing used cookies)

check_login – return true in case if username and password exists in system

getShoutbox – function return shoutbox form.

index.php

// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();

// draw login box
echo $oSimpleLoginSystem->getLoginBox();

// draw shoutbox application
echo $oSimpleLoginSystem->getShoutbox();

// class SimpleLoginSystem
class SimpleLoginSystem {

    // variables
    var $aExistedMembers; // Existed members array

    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',  //Sample: MD5('qwerty')
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
        );
    }

    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();

        $sLogoutForm = 'logout';

        if ((int)$_REQUEST['logout'] == 1) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }

        if ($_REQUEST['username'] && $_REQUEST['password']) {
            if ($this->check_login($_REQUEST['username'], MD5($_REQUEST['password']))) {
                $this->simple_login($_REQUEST['username'], $_REQUEST['password']);
                return 'Hello ' . $_REQUEST['username'] . '! ' . $sLogoutForm;
            } else {
                return 'Username or Password is incorrect' . $sLoginForm;
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return 'Hello ' . $_COOKIE['member_name'] . '! ' . $sLogoutForm;
                }
            }
            return $sLoginForm;
        }
    }

    function simple_login($sName, $sPass) {
        $this->simple_logout();

        $sMd5Password = MD5($sPass);

        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }

    function simple_logout() {
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');

        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }

    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }

    // shoutbox functions addon
    function getShoutbox() {
        //the host, name, and password for your mysql
        $vLink = mysql_connect("localhost","username","password");

        //select the database
        mysql_select_db("database_name");

        // adding to DB table posted message
        if ($_COOKIE['member_name']) {
            if(isset($_POST['s_say']) && $_POST['s_message']) {
                $sUsername = $_COOKIE['member_name'];
                $sMessage = mysql_real_escape_string($_POST['s_message']);
                mysql_query("INSERT INTO `s_messages` SET `user`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
            }
        }

        //returning the last 5 messages
        $vRes = mysql_query("SELECT * FROM `s_messages` ORDER BY `id` DESC LIMIT 5");

        $sMessages = '';

        // collecting list of messages
        while($aMessages = mysql_fetch_array($vRes)) {
            $sWhen = date("H:i:s", $aMessages['when']);
            $sMessages .= '' . $aMessages['user'] . ': ' . $aMessages['message'] . '(' . $sWhen . ')';
        }

        mysql_close($vLink);

        ob_start();
        require_once('shoutbox_begin.html');
        echo $sMessages;
        require_once('shoutbox_end.html');
        $sShoutboxForm = ob_get_clean();

        return $sShoutboxForm;
    }
}

View Demo of our sample

download in package

Conclusion

I described one of easy and useful shoutbox application based on PHP and MySQL. You can use this material to create own scripts into your startups. Good luck !

Advance Level Php Tutorials and Scripts

ayazmalik — Fri, 26 Mar 2010 03:36:22 +0000

Advance Level Php Tutorials and Scripts

Some pretty cool and amazing working php scripts with sources and tutorials for you to use on your sites. Some are Tutorials for security, some are images manipulation techniques while some are really high level plugins like sponsor flips, jquery sorting and vote poll etc. Hope you find it Useful !

All Tutorials are properly linked back to their original sources.

Sponsor Flip Wall With jQuery & CSS

An Awesome CSS3 Lightbox Gallery With jQuery and PHP

Sort & Vote – A jQuery Poll

Create a Custom RSS Feed Button With Your Readers Number for Wordpress

How to Dynamically Create Thumbnails

Simple Techniques to Lock Down your Website

How to make custom avatars with PHP

Building the Back-End of a Photo Site

Securing data in PHP

And in the End the best of all !

An AJAX Based Shopping Cart with PHP, CSS & jQuery