In this Part, i will demonstrate how to create a facebook main page. Let's get started..
Step 1:
Create a folder facebook in your www directory
and subfolders css, helpers, template, snaps respectively. the structure should look like ..
- css
- helpers
- template
- snaps
Step 2:
Now Create index.php with following code in root directory..
index.php
<?php session_start();
// Add config file from helpers folder
require("helpers/config.php");
if(isset($_COOKIE['facebookuser']) && isset($_COOKIE['facebookuserid'])){
// Add functions file from helpers folder
require("helpers/functions.php");
// Now Simply Add Template Files
include("template/header.php");
include("template/header.php");
include("template/header.php");
}else{ ?>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="<?php echo $title; ?>" class=" no_js">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<meta name="robots" content="noodp,noydir" />
<meta name="description" content="<?php echo $title; ?> is a place, where people connects with friends and others who work, study and live around them. People use Wajdani to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet.">
<link rel="alternate" media="handheld" href="<?php echo $root; ?>" />
<script type="text/javascript" src="<?php echo $root; ?>/helpers/jquery.js"></script>
<script type="text/javascript" src="<?php echo $root; ?>/helpers/png.js"></script>
<script type="text/javascript" src="<?php echo $root; ?>/helpers/general.js"></script>
<link rel="stylesheet" href="<?php echo $root; ?>/css/style.css">
<link rel="icon" type="image/png" href="<?php echo $root; ?>/images/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="<?php echo $root; ?>/images/favicon.ico" />
<![endif]-->
<title><?php echo $title; ?></title>
</head>
<body>
<div class="hdr_sprite_wrapper">
<div class="hdr_sprite">
<table width="100%">
<tr>
<td valign="bottom"><a href="<?php echo $roo; ?>"><img src="<?php echo $root; ?>/images/logo.png" style="margin-bottom:8px;"></a></td>
<td align="right" valign="top">
<table>
<tr><td>Email:<br /> <input type="text" class="iput" name="email"></td>
<td> </td><td>Password:<br /> <input type="text" class="iput" name="password"></td>
<td> </td><td><br /> <input type="submit" class="iput_button" value="Log In" name="signin"></td></tr>
<tr><td><input type="checkbox" value="on" name="remember"> <font color="#8E9FC3">Keep me logged in</font></td>
<td> </td><td><a href="<?php echo $root; ?>/recover" class="ahdr">Forgotten your password?</a></td>
<td> </td><td></td></tr>
</table>
</td>
</tr>
</table>
</div><!--hdrsprite--></div><!--hdr sprite wrapper-->
<div class="main_home_sp_wrapper">
<div class="main_home_sp">
<table width="100%"><tr><td valign="top">
<br /><br /><div class="heading"><?php echo $title; ?> helps you connect and share with<br /> the people in your life.</div>
<br /><br /><div class="WelcomePage_MainMap"><img src="<?php echo $root; ?>/images/map.png"></div></td>
<td><br /><br /><div class="heading">Sign Up</div><font color="#203360" size="4">It's free, and always will be.</font><br /><br />
<form method="post" id="reg" name="reg">
<table class="uiGrid editor" cellspacing="0" cellpadding="1"><tbody>
<tr><td class="label">First Name:</td><td><input type="text" class="inputtext" id="firstname" name="firstname" /></td></tr>
<tr><td class="label">Last Name:</td><td><input type="text" class="inputtext" id="lastname" name="lastname" /></td></tr>
<tr><td class="label">Your email address:</td><td><input type="text" class="inputtext" id="reg_email__" name="reg_email__" /></td>
</tr><tr><td class="label">Reenter email address:</td><td><input type="text" class="inputtext" id="reg_email_confirmation__" name="reg_email_confirmation__" /></td></tr>
<tr><td class="label">New Password:</td><td><input type="password" class="inputtext" id="reg_passwd__" name="reg_passwd__" value="" /></d</td></tr>
<tr><td class="label">I am:</td><td><select class="select" name="sex" id="sex"><option value="0">Select Gender:</option><option value="1">Female</option><option value="2">Male</option></select></td></tr>
<tr><td class="label">Birthday:</td><td><select name="birthday_day" id="birthday_day" onchange="bagofholding" autocomplete="off"><option value="-1">Day:</option><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> <select class="" id="birthday_month" name="birthday_month" onchange="return run_with(this, ["editor"], function() {editor_date_month_change(this, "birthday_day", "birthday_year");});"><option value="-1">Month:</option><option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select> <select name="birthday_year" id="birthday_year" onchange="return run_with(this, ["editor"], function() {editor_date_month_change("birthday_month","birthday_day",this);});" autocomplete="off"><option value="-1">Year:</option><option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
</select></td></tr>
<tr>
<td></td>
<td><input type="submit" value="Sign Up" class="sbtn"></td>
</tr>
</table>
</form><hr size="1" color="#A0A9C0">
<center><font size="2"><b><a href="<?php echo $root; ?>/Pages/Create"><font size="2" color="#3B5998">Create a Page</font></a> for a celebrity, band or business.</b></center></font>
</td>
</tr></table>
<br /><br /><hr size="1" color="#cccccc">
<table width="100%">
<tr><td><font size="2" color="#888888"><?php echo $title; ?> © <?php echo date("Y"); ?></font></td>
<td align="right">
<a href="<?php echo $root; ?>/Mobile" class="aftr">Mobile</a>
<a href="<?php echo $root; ?>/Friends/Find" class="aftr">Find friends</a>
<a href="<?php echo $root; ?>/Badges" class="aftr">Badges</a>
<a href="<?php echo $root; ?>/People" class="aftr">People</a>
<a href="<?php echo $root; ?>/Pages" class="aftr">Pages</a>
<a href="<?php echo $root; ?>/About" class="aftr">About</a>
<a href="<?php echo $root; ?>/Privacy" class="aftr">Privacy</a>
<a href="<?php echo $root; ?>/Terms" class="aftr">Terms</a>
<a href="<?php echo $root; ?>/Help" class="aftr">Help</a>
</td>
</table>
<br /> <br></div><!--main-home sp-->
</div><!--wrapper-->
<?php } ?>
Step 3:
Now Create style.css with following code in root/css directory..
style.css
body{ font-size:14px;font-family:Tahoma;margin:0; }
a{ font-size:14px; font-family:Tahoma; text-decoration:none;color:#000000; }
a:hover{ text-decoration:underline; }
ul, ol{ margin:0px;padding:0px;list-style:none; }
img{ border:0px; }
/**home page**/
.hdr_sprite_wrapper{
background:#3B5998;padding:5px;
}
.hdr_sprite , .main_home_sp{width:940px;max-width:940px;min-width:940px;margin:0 auto;}
.hdr_sprite{
font-size:12px;color:#fff;
}
.hdr_sprite table{font-size:11px;color:#fff;}
.iput{width:150px;font-size:11px;}
.iput_button{background:#5A74A8;padding:3px;color:#fff;border:1px #29447E solid;font-size:11px;font-weight:bold;width:50px;border-bottom:2px #29447e solid;}
a.ahdr{ color:#8E9FC3;font-size:11px;}
.main_home_sp_wrapper{background:url(../images/bg.jpg) repeat-x;}
.heading{font-size:20px;font-weight:bold;color:#203360;}
.uiGrid{font-size:13px;}
.inputtext{font-size:14px;padding:8px;width:250px;border:1px #96A6C5 solid;}
.uiGrid select{padding:5px;border:1px #96A6C5 solid;}
.sbtn{background:#71AB57;border:1px #3B6E22 solid;border-bottom:2px #3B6E22 solid;padding:5px 15px 5px 15px;font-size:14px;font-weight:bold;color:#fff;width:100px;margin-top:10px;}
a.aftr{color:#3B5998;font-size:12px;margin-left:10px;}
Step 4:
Now Create config.php with following code in root/helpers directory..
config.php
<?php
//Your Site Title
$title = "Fakebook";
//Your Site Root Address / Url
$root = "http://localhost/facebook";
?>
Step 5:
Copy Attached Images into root/images folder..
And here we are... Check the above code and feel free to comment in case of any problem..
or email me at web.dr34@gmail.com.
Next : Design Sign Up Page ( Comming Soon )
hi. are you willing letting go the facebook gone?
ReplyDeletesorry for my grammar i am not good in english.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete