I'm having trouble while creating FaceBook style Wall. I'm not getting how to create database and post status or images or link to database
Please help me to create FaceBook style Wall
Following is my wall page code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FaceBook style status update</title>
<style type="text/css" media="all" >
body{
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
font-size:12px;
margin-top:100px;
margin-left:100px;
}
.text{
padding:0;
margin:0;
clear:both;
overflow:hidden;
}
.clear{
clear:both;
}
.container{
width:495px;
border-top:solid #aaaaaa 1px;
}
.img_top{
padding:0;
margin:0;
position:relative;
left:52px;
width:11px;
height:7px;
background-image:url('top_arrow.png');
background-repeat:no-repeat;
display:block;
clear:both;
z-index:2;
overflow:hidden;
}
.input_box{
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
color:#808080;
width:495px;
height:25px;
padding:5px 0 0 5px;
margin:0;
border:solid #b4bbcd 1px;
outline:none;
resize:none;
}
.share{
color:#808080;
padding:0 12px 2px 0;
font-weight:bold;
float:left;
position:relative;
}
.status{
width:60px;
height:14px;
background-image:url('top_status.png');
background-repeat: no-repeat;
color:#000000;
text-align:right;
font-weight:bold;
float:left;
}
.pd{
padding:8px 0 4px 0;
}
.text_status{
padding:0;
margin:0;
position:relative;
top:-2px;
z-index:1;
}/* button */
.button_outside_border_blue{
width:50px;
margin-top:5px;
border:solid #29447e 1px;
border-bottom:solid #1a356e 1px;
cursor:pointer;
float:right;
}
.button_inside_border_blue{
padding:4px 0 4px 0;
background-color:#5c75a9;
border-top:solid #8a9cc2 1px;
text-align:center;
font-weight:bold;
color:#ffffff;
}
div.button_inside_border_blue:active{
background-color:#4f6aa3;
}
</style>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type='text/javascript' src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>
<script>
$(document).ready(function(){
var textarea = document.getElementById('contentbox'),
message = "So what's on your mind?";
textarea.value = message; // set default value
textarea.onfocus = textarea.onblur = function () {
if (this.value == '') {
this.value = message;
} else if (this.value == message) {
this.value = '';
}
};
});
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#contentbox').elastic();
});//]]>
</script>
</head>
<body>
<h1>FaceBook style status update</h1>
<div class="container">
<div class="pd">
<div class="share">Share:</div>
<div class="status">Status</div>
<div class="status">Photo</div>
<div class="status">Link</div>
<div class="loading"></div>
</div>
<div class="img_top"></div>
<div class="text_status">
<textarea class="input_box" name="status" id="contentbox" />So what's on your mind?</textarea>
<div id="linkbox"></div>
</div>
<div class="button_outside_border_blue" id="share">
<div class="button_inside_border_blue">Share</div>
</div>
</div>
</body>
</html>