HOW TO CREATE A PAGE MARKUP WITH CSS3 AND JQUERY

<style type="text/css">
<!--
body{
}
.menubar{
 height: 25px;
 width: 450px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 background-color: #F9F9F9;
 padding: 5px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-left-style: solid;
 border-top-color: #CCCCCC;
 border-right-color: #CCCCCC;
 border-left-color: #CCCCCC;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #CCCCCC;
 overflow: visible;
}
.button{
 border: 1px solid #CCCCCC;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 display: inline-block;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
 margin-right: 5px;
 text-align: center;
 width: 65px;
 background-color: #E5E5E5;
 text-decoration: none;
 height: 17px;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 6px;
 padding-left: 5px;
}
.selbutton{
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 display: inline-block;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
 margin-right: 5px;
 text-align: center;
 width: 65px;
 background-color: #FFFFFF;
 text-decoration: none;
 height: 18px;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 6px;
 padding-left: 5px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-left-style: solid;
 border-top-color: #CCCCCC;
 border-right-color: #CCCCCC;
 border-left-color: #CCCCCC;
 overflow: visible;
 visibility: visible;
}

.content{
 height: 27px;
 width: 450px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 background-color: #FfFfFf;
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #CCCCCC;
 border-bottom-color: #CCCCCC;
 border-left-color: #CCCCCC;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#Tab2').css('display', 'none');//hide tab2 div
 $('#Tab3').css('display', 'none');//hide tab3 div
});

function tab1(){//once tab1 clicked on
 $('a').removeClass("selbutton");//remove .selbutton class from all linkes
 $('a').addClass("button");//add .button class to all linkes
 $('#b1').removeClass("button");//remove .button
 $('#b1').addClass("selbutton");//add .selbutton (this button will selected)
 $('#Tab2').css('display', 'none');//hide tab 2
 $('#Tab3').css('display', 'none');//hide tab 3
 $('#Tab1').css('display', 'inline-block');//show tab 1
 }
 function tab2(){//once tab2 clicked on
 $('a').removeClass("selbutton");//remove .selbutton class from all linkes
 $('a').addClass("button");//add .button class to all linkes
 $('#b2').removeClass("button");//remove .button
 $('#b2').addClass("selbutton");//add .selbutton (this button will selected)
 $('#Tab1').css('display', 'none');//hide tab 1
 $('#Tab3').css('display', 'none');//hide tab 3
 $('#Tab2').css('display', 'inline-block');//show tab 2
 }
 function tab3(){//once tab3 clicked on
 $('a').removeClass("selbutton");//remove .selbutton class from all linkes
 $('a').addClass("button");//add .button class to all linkes
 $('#b3').removeClass("button");//remove .button
 $('#b3').addClass("selbutton");//add .selbutton (this button will selected)
 $('#Tab1').css('display', 'none');//hide tab 1
 $('#Tab2').css('display', 'none');//hide tab 2
 $('#Tab3').css('display', 'inline-block');//show tab 2
 }
</script>

<div class="menubar"><a id="b1" href="#" class="selbutton" onclick="return false" onmousedown="javascript:tab1();">Tab1</a><a id="b2" href="#" class="button" onclick="return false" onmousedown="javascript:tab2();">Tab2</a><a id="b3" href="#" class="button" onclick="return false" onmousedown="javascript:tab3();">Tab3</a></div>
<div class="content"><div id="Tab1">tab1 is shown tabs 2 & 3 are hidden</div><div id="Tab2">tab2 is shown tabs 1 & 3 are hidden</div><div id="Tab3">tab3 is shown tabs 2 & 1 are hidden</div></div>

HOW TO GET FLASH MEDIA SERVER TO WORK WITH YOUR LOCAL SERVER

I would assume that you have already installed flash media server without apache. So what you would do is go to  this folder   Adobe\Flash Media Server 3\conf\_defaultRoot_ and look for the file called Adaptor.xml on line 42 you would set  ctl_channel="127.0.0.1:19350" and in lines   
        144      <Redirect enable="false" maxbuf="16384">
145 <Host port="80">:8080</Host>
146 <Host port="443">:8443</Host>
147    </Redirect>
same with lines 182 to 185.
and then save it. after that you would go to the text file called fms in the  Adobe\Flash Media Server 3\conf\ and set the  ADAPTOR.HOSTPORT = 127.0.0.1:1935 and then save the file.

now with everything done you can enjoy your flash media server

my video comment system

this is demo for my upcoming tutorials

LEARN HOW TO CREATE COMMENT SYSTEM WITH PHP AND JQUERY

first create table and call it "comment" with 3 fields id, name and comment

mysql.php 

<?php 
@mysql_connect("localhost","root","") or die ("could not connect to mysql");
@mysql_select_db("name of your database") or die ("no database");
?>
///////////page end here

index.php

<?php 
include_once "mysql.php";
//////render data that is already stored in the data base
 $sql_comments = mysql_query("SELECT * FROM comment ORDER BY id DESC");
while($row = mysql_fetch_array($sql_comments)){
 $name = $row["name"];
 $comment = $row["comment"];
 
 $commentlist .= 'name : '.$name.'<br />comment : '.$comment.'<hr>';
}
//////////////
?>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#loading').hide();
});

function wall(){
$('#loading').show();

  var name = $('#name').val();///#name is the input id from the form and will be equal the variable "name"
  var comment = $('#comment').val();/////#comment is textarea id from the form and will be equal the variable "comment"
  var URL = "post.php"; /////post.php will be equal the variable "comment"
  
  $.post(URL,{wall:"post",name1:name,comment1:comment},function(data){//parameter wall will be equal "post", name1 will be equal to the var "name" and comment1 will be equal to the var "comment"
  $("#result").prepend(data).show();// the result will be placed above the the #result div
  $('#loading').hide();
  });
 }
</script>

<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id='form'><form>
    name<br />
      <input type="text" id="name" />
      <br />
   comment<br />
      <textarea id="comment" cols="45" rows="5"></textarea>
      <br />
      <input type="submit" name="button" id="button" value="Submit" onclick="return false" onmousedown="javascript:wall();"/><img src="loading.gif" alt="" width="15" height="15" id="loading" />
      <br /></form>
    </div>
      <div id="result"><?php print"$commentlist";?></div></td>
  </tr>
</table>

post.php 
<?php
include_once "mysql.php";

  if ($_POST['wall'] == "post"){
  $name = $_POST['name1'];//name1 is parameter from the jquery function  
  $comment = $_POST['comment1'];//comment1 is parameter from the jquery function  
   if ($comment=="" || $name==""){exit();}// if no name or comment exit the script
   else{
   //insert the name and comment into database 
  $sql = mysql_query("INSERT INTO comment (name,comment) 
     VALUES('$name','$comment')")
     or die (mysql_error());  
  // the inserted comment will renderd by the "$("#result").prepend(data).show();" from jquery
 echo 'name : '.$name.'<br />comment : '.$comment.'<hr>';
     }
}
?>

PAGINATION TUTORIAL USING JQUERY AND PHP

first create table and call it pagination with 3 fields  id,

name and age and enter 

dummy data 

mysql.php 

<?php 
@mysql_connect("localhost","root","") or die ("could not connect to mysql");
@mysql_select_db("name of your database") or die ("no database");
?>
///////////page end here

index.php

<?php
include_once "mysql.php";//include the mysql connect script

$pagen=0;

$sql_rec = mysql_query("SELECT * FROM pagination ORDER BY id DESC LIMIT $pagen,4");//<---- this statement mean that you chose the first 4 results
while($row = mysql_fetch_array($sql_rec)){//<---- this statement fetch first 4 results
 $id = $row["id"];
 $name = $row["name"];
 $age = $row["age"];
 
$namelist .= 'name : '.$name.' age : '.$age.'<br />' ;
}

$sql_list = mysql_query("SELECT * FROM pagination");
$num_rows = mysql_num_rows($sql_list);//<---- this statement to determine number of row we will paginate
$pnumber = ceil($num_rows/4);//<---- we will divide the number of rows by 4 which is the number of post we will render  
?>

<style type="text/css">
<!--
body {
}
.link {
 background-color: #FFFFFF;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #003399;
 text-decoration: none;
 padding-right: 2px;
 padding-left: 2px;
}

-->
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('#loading').hide();//<----this will hide loading gif 
$('.link').first().css('background', 'grey');//<----this will highlight the number 1
});

function pages(page){//<----this function will run we clicked on the show more link      ( page = '.$e.')

//$('#loading').show();//<----this loading gif will appear
  $('.link').css('background', 'white');  //<----this will remove the highlight
  $("#pages" + page).css('background', 'grey');//<----this will highlight number that was clicked
  var URL = "userslist.php";
  $.post(URL,{pages:"paginate",pageNumber:page},function(data){//<----will run the userslist.php
  $("#OldComment").html(data).show();//<----replace the old page with the new one
  $('#loading').hide();
  });
 }
</script>

<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id='OldComment'><?php print"$namelist"; ?></div>
      <div class="pagination">
        <?php
    for($i=0; $i<=($pnumber-1); $i++)//<----we run a for loop that start from 0 to $pnumber 
  {
   $e= $i*4 ;//<----this will replace $pagen in the userlist.php
   $d=$i+1; //<----this will the number the pages
   echo '<a class="link" id="pages'.$e.'" href="#" onclick="return false" onmousedown="javascript:pages('.$e.');">'.$d.'</a> ';//<----when you click on this link the javascript:pages('.$e.'); will run 
  }
?>
     //   <img src="loading.gif" alt="" width="15" height="15" id="loading" /></div></td>//<----this loading gif will appear every time 
  </tr>
</table>

/////////////////////////////page end here
userslist.php
<?php
$pagen = $_POST['pageNumber'];//<----resulted from the jquery we ran in last script 
include_once "mysql.php";
 if ($_POST['pages'] == "paginate"){
$sql_selfnews = mysql_query("SELECT * FROM pagination ORDER BY id DESC LIMIT $pagen,4");//<---- this statement will select next 4 results
while($row = mysql_fetch_array($sql_selfnews)){
 $id = $row["id"];
 $name = $row["name"];
 $age = $row["age"];
 
$namelist .= 'name : '.$name.' age : '.$age.'<br />' ;
}
}
?>
<?php print"$namelist"; ?>//<---- this statement will render next 4 results

CHECK IF USER ONLINE OR AWAY SCRIPT

this script will tell if user is online doing something on your site or if he is away. if user remained inactive for 10 seconds he will labeled away

create table in your data base called members with 4 fields 1d, email, password and activity. and enter some dummy data

mysql.php

<?php
@mysql_connect("localhost","root","") or die ("could not connect to mysql");
@mysql_select_db("name of your database") or die ("no database");
?>

index.php (will contain the login script)

<?php
if ($_POST['email']) {
//Connect to the database through our include 
include_once "mysql.php";
$email = $_POST['email'];
$password = $_POST['password'];

$sql = mysql_query("SELECT * FROM members WHERE email='$email' AND password='$password'"); 
$login_check = mysql_num_rows($sql);
if($login_check > 0){ 
while($row = mysql_fetch_array($sql)){ 

$id = $row["id"]; 
session_register('id'); 
$_SESSION['id'] = $id;

header ("Location: profile.php?id=$id");
exit();
} // close while
}
}
?>

<style type="text/css">
<!--
body {
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
</script>

<form action="index.php" method="post" class="body">
      <input name="email" type="text" class="textfield" id="textfield" value=""/>
      <br />
      <input name="password" type="password" class="textfield" id="textfield2" value=""/>
      <br />
      <input type="submit" name="button" id="button" value="Sign In" />
</form>
////////////////////////

profile.php

<?php

session_start(); // Must start session first thing 

if (!isset($_SESSION['id'])) { 
print 'you are not logged in';
exit(); 
} 

include_once "mysql.php";
if (isset($_SESSION['id'])) { 
$id = $_SESSION['id'];
$mid = $_GET['id'];
$time=time();//to get the timestamp
 }

mysql_query("UPDATE members SET lastactivity='$time' WHERE id='$id'");//every time this page refresh lastactivity will be updated

$sql = mysql_query("SELECT * FROM members WHERE id='$mid'"); 
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$email = $row["email"];
}
?>
  <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
//load check.php in the <span id="online"></span> and refresh every 1 second
$(document).ready(function(){
   $("#online").load('check.php?id=<?php print"$id";?>');
   setInterval(function(){
  $("#online").load('check.php?id=<?php print"$id";?>');
   },1000);//
});
</script>

this is <b><?php print"$email";?></b> and he is <b><span id="online"></b></span>
////////////////////////////

check.php

<?php

session_start(); // Must start session first thing 

if (!isset($_SESSION['id'])) { 
print 'you are not logged in';
exit(); 
} 

include_once "mysql.php";
if (isset($_SESSION['id'])) { 
$id = $_SESSION['id'];
$mid = $_GET['id'];
$time=time();
 }

$sql = mysql_query("SELECT * FROM members WHERE id='$mid'"); 
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$email = $row["email"];
$lastactivity = $row["lastactivity"];

if(time() > $lastactivity+10/*10 is the number of seconds user stay online without doing activity on the page you can always change it */){$onlineStats = "away";}//if the last time you did something on your page + 10 seconds is less than the current time. your onlinestats will equal away or you can change to offline
else if(time() < $lastactivity+10){$onlineStats = "online";}//if the last time you did something on your page + 10 seconds is greater than the current time. your onlinestats will equal online
}
?>
<?php print"$onlineStats";?>