Membuat Jejaring Sosial Dengan PHP Dan jQuery - PART 1

5 Comments


BackShare.us - Jejaring sosial merupakan hal yang sudah tidak asing lagi telinga kita. Dalam kehidupan sehari - hari kita sangat bergantung terhadap jejaring sosial seperti Facebook.com dan Twitter.
Kali ini kita akan membahas tentang bagaimana cara membuat jejaring sosial sendiri menggunakan bahasa pemerograman PHP dan jQuery serta menggunakan Database MySQL.
1. Langkah pertama buat database jejaring lalu import tabel ke database jejaring tersebut. untuk file SQLnya bisa di download disini
2. Selanjutnya Buatlah file dengan nama db.php dan ketik Source Code dibawah.


<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'jejaring');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD);
$database = mysql_select_db(DB_DATABASE);
?>








3. Selanjutnya kita butuh Style alias penggaya untuk merapihkan tampilan Jejaring Sosial kita. buat file dengan nama style.css. lalu ketik Source Code dibawah.




 /* Style Status */
#update {
width:400px;
font-size:12px;
}

/* form components */
input,textarea {
border:1px solid silver;
background-color:#fff;
color:#404040;
font-size:12px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
margin:3px 0;
padding:3px;
}

/* style update status */
#wall_container {
margin:0 auto;
font-size:11px;
background-color:#FFFFFF;
width:420px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}

#flashmessage {
border-bottom:dashed 1px #dedede;
padding:5px;
}

.stbody {
margin-bottom:5px;
border-bottom:dashed 1px #dedede;
overflow:auto;
background-color:#FFFF33;
}

#updateboxarea {
background-color:#FFFF00;
padding-left:5px;
}

.sttext {
min-height:30px;
word-wrap:break-word;
overflow:hidden;
padding:5px;
display:block;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
font-size:12px;
width:400px;
}

.stdelete {
font-weight:bold;
float:right;
cursor:pointer;
}

a:link {
text-decoration:none;
}


/* Style Komentar */
.stcommentbody {
border-bottom:solid 2px #ffff33;
background-color:#fdfdc0;
padding:5px;
width:460px;
overflow:auto;
}

.stcommenttext {
margin-left: 45px;
min-height: 20px;
word-wrap: break-word;
overflow: hidden;
padding: 3px;
display: block;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
width: 300px;
} 

.stcommenttext b {
color:#006699;
}

.stcommentdelete {
font-weight:bold;
float:right;
cursor:pointer;
}

.commentupdate {
background-color:#FFFF33;
width:400px;
padding:5px;
}

.komentar {
width:300px;
height:65px;
font-size:12px;
}






4. Masih Semangat ? kalo masih kita lanjutkan. Selanjutnya kita buat tampilan awal yang sering kita namakan index. Sekarang kita buat file dengan nama index.php lalu ketik Source Code  dibawah.






<html>
<title>Membuat Status Jejaring Sosial</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="update.js"></script>
</head>
<body>
<div id="wall_container">
<div id="updateboxarea">
<h2>Tulis Statusmu ..! </h2>
<textarea cols="30" rows="4" name="update" id="update"></textarea>
<input type="submit" value="Update" id="update_button" />
</form>
</div>
<div id="flashmessage">
<div id="flash" align="left"></div>
</div>
<div id="status">
<?php include('buka_status.php'); ?>
</div>
</div>
</body>
</html>





5. Di file index.php kita menyisipkan file buka_status.php. file ini berfungsi untuk menampilkan.

di file index.php juga kita menyertakan file jquery.1.4.2.min.js yang bsa di download disini dan file update.js

langsung saja kita bikin file buka_status.php dan ketik lagi Source Code berikut.




<?php
include_once 'db.php';

$query = mysql_query("SELECT * FROM status ORDER BY id_status DESC");

while($row=mysql_fetch_array($query)){
  $id_status=$row['id_status'];
  $status=$row['status'];
?>

<div class="stbody" id="stbody<?php echo $id_status;?>">
<div class="sttext">
<!--Link X untuk menghapus status-->
<a class="stdelete" href="#" id="<?php echo $id_status;?>" title="Hapus Status"> X </a>
<?php echo $status;?> 

<!--Link Komentari yang diberi efek toggle jquery dengan nama class commentopen --> 
<div><b><a href='#' class='commentopen' id='<?php echo $id_status; ?>' title='Comment'>Komentari</a></b></div>

<!--Area untuk menampilkan komentar yang tersimpan di tabel-->
<div class="commentcontainer" id="commentload<?php echo $id_status;?>">
<?php include ('buka_komentar.php'); ?>
</div>
<!--Link Komentari diatas akan menampilkan dan menghilangkan class commentupdate -->
<div class="commentupdate" style='display:none' id='commentbox<?php echo $id_status; ?>'>
<div class="stcommenttext" >
<form method="post" action="">
<textarea name="komentar" class="komentar" maxlength="200" id="ctextarea<?php echo $id_status; ?>"></textarea>
<br />
<input type="submit" value="Comment" id="<?php echo $id_status;?>" class="comment_button"/>
</form>
</div>
</div>

</div>
</div>

<?php } ?>




Demikian Tutorial Membuat Jejaring Sosial Dengan PHP Dan jQuery - PART 1.

jika ada waktu dan kesempatan yang lain. saya akan melanjutkannya ke PART 2

























Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. 














5 komentar:








  1. Anonim26 Desember 2013 pukul 14.16
    Ajiib mantep omz, kenapa gak dishare di BC :d
    BalasHapus
    Balasan
    1. Unknown26 Desember 2013 pukul 15.53
      nanti kalo udah selesai, ane share di BC ko. ini mah lagi males ngetik  8-)
      Hapus
    2. c0nn3x7 Januari 2014 pukul 16.10
      oke.. ane tunggu omz..
      sip, keep share yaa  8-)
      Hapus
  2. infomugi10 Januari 2014 pukul 00.26
    banyak belajar disini :D kebetulan lagi seneng sama php :D
    BalasHapus











Silahkan tinggalkan komentar dengan bahasa yang sopan.




















Langganan:
Posting Komentar (Atom)