egafikom.files.wordpress.com · Web viewPada halaman awal berteman.com, hanya terdapat 2 link berupa gambar login dan sign up, agar pengguna tidak bingung dalam pengoperasiannya

Laporan Tugas Interaksi manusia dan Komputer

Sistem Informasi

“Berteman.com”

Disusun Oleh:

Ega Prayoga Nugraha(1157201001046)Kelas 3a FIKOM

YAYASAN PENDIDIKAN WIJAYA KESUMA

Fakultas Ilmu Komputer

UNIVERSITAS DARWAN ALI

Halaman AwalBerisi link menuju hal. Login dan hal. Pendaftaran.

Halaman PendaftaranBerisi form pendaftaran Pendaftaran.

Halaman Konfirm. PendaftaranBerisi data hasil pengisian form Pendaftaran.

Halaman LoginBerisi form Login

Halaman Utama Berteman.comAnda sudah dapat menggunakan Berteman.com

Bab I : Deskripsi

Berteman.com merupakan sebuah jejaring sosial / social network / social media (fiksi) yang memiliki fitur yang beragam, diantaranya mampu unuk berbagi pengalaman, foto, video, chatting, dan yang berbeda dari jejaring sosial lainnya, berteman.com mempunyai fitur Mengontaki (Contacting), Pengontak (Contacter), dan Teman (Friends).

Untuk dapat mengakses berteman.com, kita harus mempunyai username dan password. Apabila sudah mempunyai kedua hal tersebut, yang harus kita lakukan hanya login, apabila tidak, kita harus mendaftar terlebih dahulu. Merikut merupakan skema penggunaan berteman.com:

Mengontaki dan Pengontak tidak jauh seperti follower dan following yang dimiliki twitter, namun dengan adanya Teman, yang mana terjadi bila kita mengontak seseorang, dan sebaliknya orang yang kita kontak mengontak kembali.

Bab II : Desain LayoutDalam website berteman.com yang saya buat, saya baru membuat 7 halaman yang

saling berkaitan, yakni halaman awal, halaman login, halaman daftar, halaman konfirmasi pendaftaran, halaman utama, halaman profil, dan halaman mengontaki.

Layout Halaman awal berteman.com

Halaman login berteman.com

Logo berteman.com & gambar gif + Informasi

Gambar + link Login

Gambar + link pendaftaran

Tulisan Login

Form Login

Halaman pendaftaran berteman.com

Tulisan pendaftaran

Form Pendaftaran

Halaman konfirmasi pendaftaran berteman.com

Data konfirmasi pendaftaran berteman.com

Tombol konfirmasi

Halaman Utama (experiences) berteman.com

Header (gambar + link + search)menu menu menu menu menu menu

Halaman Profil berteman.com


Gbr profil

acara

Text area untuk update status

Pengumuman dan kontak yang

online

Status (experience) / foto




Gambar footer

Text area untuk update status

Pengumuman dan kontak yang online





Gambar footer

Foto profil Informasi

foto foto foto

foto foto foto

foto foto foto

Halaman Mengikuti berteman.com


Tulisan

Pengumuman dan kontak yang online

Thumb. user

Thumb. user

Thumb. user

Thumb. user

Thumb. User

Thumb. user

Thumb. user

Thumb. user

Thumb. User

Thumb. user

Thumb. user

Thumb. user

Thumb. user

Thumb. User

Thumb. User

Thumb. user

Thumb. user

Thumb. User

Thumb. User

Thumb. User

Thumb. user

Thumb. user

Thumb. user

Thumb. user

Thumb. user

Gambar footer

Bab III : Implementasi

Halaman Awal berteman.com

Halaman Login berteman.com

Halaman daftar akun berteman.com

Halaman Konfirmasi pendaftaran berteman.com

Halaman Utama (Experiences) Berteman.com

Halaman Profil

Halaman Profil (User Lain)

Halaman Daftar Mengontaki

Bab IV : Komponen AntarmukaDalam berteman.com, terdapat 2 halman yang memiliki form atau inputan, yakni

login dan daftar.

a. Halaman Daftar

Dalam halaman daftar terdapat beberapa inputan, yakni:

Nama Lengkap berupa textbox Username berupa textbox Email berupa textbox Password berupa textbox password Ketik ulang password berupa textbox password Tanggal Lahir berupa date Kota Asal berupa textbox Kota Sekarang berupa textbox Jenis Kelamin berupa radio Upload foto anda berupa inputfile Tentang Saya berupa textarea Daftar berupa input type="submit" dan Cancel berupa input type="reset"

Berikut adalah tampilan data yang telah diinput dari halaman pendaftaran yang mana merupakan halaman konfirmasi pendaftaran.

b. Halaman Login

Username berupa textbox Password berupa textbox password Masuk berupa input type="submit" dan Cancel berupa input type="reset"

Setelah menginput di halaman login dan berhasil, maka halaman akan dialihkan ke halaman utama berteman.com

Bab V : AlasanDi bagian ini, akan menjelaskan mengapa saya memilih penggunaan warna,

tata letak, image, icon, error handling yang saya pakai dalam projek “berteman.com”.

a. Penggunaan warnaKombinasi warna yang saya pakai yakni background kuning-putih dengan garis

dan tulisan berwarna biru tua. Background kuning-putih melambangkan semangat anak muda, dengan tulisan dan garis biru tua, sesuai dengan komposisi warna yang baik, sehingga kontras antara background dan tulisan, maka akan terlihat jelas.

b. Tata LetakPada halaman awal berteman.com, hanya terdapat 2 link berupa gambar login

dan sign up, agar pengguna tidak bingung dalam pengoperasiannya. Setelah berhasil masuk, di semua halaman terdapat header yang berisi gambar, pencarian dan setting, menu berada dibawah header agar pengguna dapat lebih mudah untuk mengoperasikannya karena menunya jelas terlihat. Lalu ada kolom pengumuman dan kontak online di sebelah kanan agar pengguna dapat terus memantau akunnya. Gambar footer berupa logo berteman untuk memperkuat ciri dari berteman.com.

c. ImageDi website ini, penggunaan gambar hanya gambar logo di header footer, dan

gambar foto profil di sebelah kiri, di pengumuman pun hanya berupa thumbnail, agar tidak terkesan terlalu ramai, apalagi ada fitur sharing gambar. Pada footer juga terdapat gambar tulisan bergerak agar tampilannya lebih menarik, dan juga sebagai informasi. Di halaman Mengontaki / Pengontak / Teman menampilkan thumbnail gambar yang sedikit lebih besar agar dapat lebih terlihat usernya.

d. IconPenggunaan icon avatar manusia dan gembok saat login memudahkan

pengguna, khususnya yang masih awam dalam mengoperasikannya. Juga ada icon love, like, dan dislike pada setiap posting yang mana berupa emotikon yang pastinya dimengerti oleh pengguna walau baru melihatnya.

e. Error handlingDalam website ini, terdapat 9 error handling, yang mana terdapat dalam halaman

Login (Username, password) dan halaman Pendaftaran (Nama Lengkap Username, Password, ketik ulang password, email, Tanggal lahir, dan jenis kelamin. Ini dibuat agar User tidak bingung saat login agar password ataupun usernamenya tidak salah. Berikut ini beberapa contoh dari error handling dalam berteman.com

Bab VI : Coding HTMLHalaman Awal

<html><title>Berteman</title><body background="ba.jpg"><style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>

</br></br><table bgcolor="white" width="400" align="center" class="curvedEdges"><tr>

<td bgcolor="#271470"><center><img src="logober.png"><br><br><img src="anigif.gif"><tr>

<td><center><a href="login.html"><img src="in.jpg"></center></br><b><font face="calibri" size="4" color="#271470">Belum Punya Akun??? Klik dibawah ini!!!</br><center><a href="signup.html"><img src="up.jpg"></a></table></body></html>

Halaman Login<html><title>Berteman</title><body background="ba.jpg"><style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>

</br></br></br></br></br></br><table class="curvedEdges" bgcolor="#fee504" width="661" height="350" border="none" align="center"><tr> <td bgcolor="#271470" height="110" ALIGN="CENTER"><FONT SIZE="8" face="Heartbreaker" color="#fee504"> L o g i n </FONT> </td>

<tr> <td valign="top"><table width="200" height="50" align="center" border="none"></td>

<form action="log.php" method="POST">

<tr><td width="50 height="50"><center><img src="jj.png"></td><td><b><FONT SIZE="3" face="arial" color="#271470">Username</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="50"><input type="text" name="NAMA"></td></tr>

<tr><td width="50 height="50"><center><img src="pass.png"></td><td><b><FONT SIZE="3" face="arial" color="#271470">Password</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="50" ><input type="password" name="pass"></td></tr><br>

<tr><td><td width="50" height="50" colspan="2" align="right"> <input type="submit"

value="Masuk"></td> </td><td align="left" width="150"><input type="reset" value="Cancel"></td><td></tr>

</table></body></html>

Halaman Pendaftaran

<html><title>Berteman</title><body background="ba.jpg"><style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>

<table class="curvedEdges" bgcolor="#fee504" width="700" height="350" border="none" align="center"><tr> <td bgcolor="#271470" height="110" ALIGN="CENTER" colspan="2"><FONT SIZE="6" face="arial" color="#fee504">Halaman Pendaftaran BERTEMAN </FONT> </td>

<tr><td width="50">&nbsp &nbsp &nbsp

<td valign="top"><table width="600" height="50" align="center" border="none"></td> <form action="signup.php" method="POST">

<tr><td width="400"><b><FONT SIZE="3" face="arial" color="#271470">Nama

Lengkap</td>

<td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100"><input width="100" type="text" name="nama"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Username</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100"><input type="text" name="name"></td>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Email</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100"><input type="text" name="email"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Password</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100" ><input type="password" name="pass"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Ketik Ulang

Password</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100" ><input type="password" name="pass"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Tanggal Lahir</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100" ><input type="date" name="tl"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Kota Asal</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100"><input type="text" name="kotaa"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Kota Sekarang</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100"><input type="text" name="kotas"></td></tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Jenis Kelamin</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100" colspan="2" ><input type="radio" name="jk" value="Laki-

laki"><FONT SIZE="3" face="arial" color="#271470">Laki-laki <input type="radio" name="jk" value="Perempuan"><FONT SIZE="3" face="arial" color="#271470">Perempuan</td>

</tr>

<tr><td><b><FONT SIZE="3" face="arial" color="#271470">Upload Foto Anda</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td width="100"><input type="file" name="file"></td></tr>

<tr><td><b><FONT SIZE="3" face="Arial" color="#271470">Tentang saya</td><td><b><FONT SIZE="3" face="arial" color="#271470">:</td><td colspan="2" ><textarea name="ttg" colspan="2" cols="30"

rows="5"></textarea></td><tr>

<td><td width="100" height="50" colspan="2" align="right"> <input type="submit"

value="DAFTAR"> <input type="reset" value="Cancel"></td> </td><td align="left" width="150"></td>

</tr></table></body></html>

Halaman Konfirmasi Pendaftaran (PHP)<html><title>Berteman</title><body background="ba.jpg"><style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style><table bgcolor="white" width="400" align="center" class="curvedEdges"><tr>

<td><center><b><FONT SIZE="5" face="arial" color="#271470">Apakah ini benar anda????<tr>

<td><?php$nama = $_POST ['nama'];$name = $_POST ['name'];$email = $_POST ['email'];$pass = $_POST ['pass'];$tl = $_POST ['tl'];$kotaa = $_POST ['kotaa'];$kotas = $_POST ['kotas'];$jk = $_POST ['jk'];$file = $_POST ['file'];$ttg = $_POST ['ttg'];

if($nama ==""){print"<script>alert('Maaf, Anda belum menginput nama');javascript:history.go(-1);</script>";}else if($name ==""){print"<script>alert('Maaf, anda belum memasukan Username!');javascript:history.go(-1);</script>";}

else if($email ==""){print"<script>alert('Maaf, anda belum memasukan Email!');javascript:history.go(-1);</script>";}else if($pass ==""){print"<script>alert('Maaf, anda belum memasukan Password!');javascript:history.go(-1);</script>";}

echo"<FONT SIZE=3 face=arial color=#271470>Nama : $nama </br>";

echo"<FONT SIZE=3 face=arial color=#271470>Username : $name </br>";echo"<FONT SIZE=3 face=arial color=#271470>Email : $email </br>";echo"<FONT SIZE=3 face=arial color=#271470>Password : $pass </br>";echo"<FONT SIZE=3 face=arial color=#271470>Tanggal Lahir : $tl </br>";echo"<FONT SIZE=3 face=arial color=#271470>Kota Asal : $kotaa </br>";echo"<FONT SIZE=3 face=arial color=#271470>Kota Sekarang : $kotas </br>";echo"<FONT SIZE=3 face=arial color=#271470>Jenis Kelamin : $jk </br>";echo"<FONT SIZE=3 face=arial color=#271470>Tentang Saya : $ttg </br>";?></table></br><table bgcolor="white" align="center" class="curvedEdges"><tr>

<td><center><b><FONT SIZE="5" face="arial" color="#271470">Ya, ini saya.<br>Dan saya ingin melanjutkan....</body></html>

Halaman Utama (PHP)<html><title>Berteman</title><?php$NAMA = $_POST ['NAMA'];$like = $_POST ['like'];$pass = $_POST ['pass'];$COMMENT = $_POST ['COMMENT'];

if($pass =="bebek" and $NAMA =="Ega"){print"<script>alert('SELAMAT DATANG DI BERTEMAN.COM');javascript:history.go(+1);</script>";}else if($NAMA ==""){print"<script>alert('Maaf, Anda belum memasukan Username');javascript:history.go(-1);</script>";}else if($pass ==""){print"<script>alert('Maaf, Anda belum memasukan Password');javascript:history.go(-1);</script>";}else{print"<script>alert('Maaf, Username atau Password yang anda masukkan salah, mohon periksa kembali');javascript:history.go(-1);</script>";}?><style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style>

<body background="oi.jpg"><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }

table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>

<table width= "904" height="90" border="none" align="center" valign="center"><tr>

<td rowspan="3" height="90" width=302"><img src="logober.png"><td rowspan="3" height="90" width="342"><img src="gif.gif"><td>

<tr><td align="center"><form name="login" action="search.php"><input type="text"

name="nama"><right><input type="submit" name="Search" value="Search"><tr>

<td align="center"><bottom><img valign="bottom" src="eg.jpg"> &nbsp | &nbsp<img valign="bottom" src="setting.png">&nbsp | &nbsp<img valign="bottom" src="logout.png"></table><table background="menu.png" width= "900" height="43" border="none" align="center" valign="center"><tr>

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="Experiences.html" target="_blank">Experiences

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Teman

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="Mengontaki.html" target="_blank">Mengontaki

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Pengontak

<td width="150" ><center><b><font face="Calibri" Size="4" color="#271470"><a href="Profil.html" target="_blank">Profil</a>

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Pesan</table>&nbsp<table class="curvedEdges" width="904" border="none" align="center" valign="center" bgcolor="white">

<tr><td width="120" rowspan="11" valign="top">

<table><tr>

<td><center><img src="ega.jpg"><tr>

<td><center><b><a href="Profil.html" target="_blank">Ega Prayoga Nugraha</a></td>

<tr><td height="50">

<tr><td><font face="Calibri" color="#271470"><b><center>Komunitas

<tr><td><font face="Calibri" color="#271470" size="2">Mahasiswa

UNDA Sampit<tr>

<td><font face="Calibri" color="#271470" size="2">Alumni SMA Negeri 1 Sampit

<tr><td><font face="Calibri" color="#271470" size="2">Gila-gilaan


<tr><td><font face="Calibri" color="#271470"><b><center>Acara

<tr>

<td><font face="Calibri" color="#271470" size="2">Back To Campuss !!!! - 7 Januari

<tr><td><font face="Calibri" color="#271470" size="2">Ulang Tahun

Fiona - 18 Januari<tr>

<td><font face="Calibri" color="#271470" size="2">Reuni Alumni SMANSA - 23 Januari

</table></td><td height="100"><table>

<tr><td bgcolor="#fdfb79"><font face="Calibri"

color="#271470"><b><center>Perbaharui Pengalaman Mu!!</br><textarea name="Update" colspan="2" cols="61" rows="5"></textarea></center><right><input type="submit" name=" U p d a t e " value=" U p d a t e "><img valign="Middle" src="plus.png"><img valign="Middle" src="ata.png"></td>

</table><td valign="top" bgcolor="white" rowspan="11" width="200">

<table><tr>

<td colspan="2"><font face="Calibri" color="#271470"><b>Pengumuman

<tr><td><img src="eka.jpg"><td width="160" ><font face="Calibri" color="#271470">Anda dan

Eka prasetyaningrum kini BERTEMAN<tr>

<td colspan="2"><font face="Calibri" color="#271470" size="1"><center>..................................

<tr><td><img src="rahmat.jpg"><td width="160"><font face="Calibri" color="#271470">Rahmatullah

Mengontak anda<tr>


<tr><td><img src="tania.jpg"><td width="160"><font face="Calibri" color="#271470">Siti Hartania

Mengontak Anda<tr>


<tr><td><img src="mimi.jpg"><td width="160"><font face="Calibri" color="#271470">Ermiaty

menyatakan anda ada dalam sebuah foto<tr>


<tr><td><img src="putri.jpg"><td width="160"><font face="Calibri" color="#271470">Putri

Agustina menulis di Profil Anda<tr>


<tr><td colspan="2" bgcolor="#f9fb62"><font face="Calibri"

color="#271470"><b><center>Lebih Lama...<tr>

<td colspan="2"><font face="Calibri" color="#271470"><b>Online's Contact

<tr><td colspan="2"><font face="Calibri" color="#271470"><img

src="on.png">Aan Kristafia<tr>

<td colspan="2"><font face="Calibri" color="#271470"><img src="on.png">Dwi Prayoga


src="on.png">Eka Prasetyaningrum<tr>

<td colspan="2"><font face="Calibri" color="#271470"><img src="on.png">Putri Agustina


src="on.png">Rivia<tr>

<td colspan="2"><font face="Calibri" color="#271470"><img src="on.png">Said Wahyudi


src="on.png">Cemungudth Phutu-Putu<tr>

<td colspan="2"><font face="Calibri" color="#271470"><img src="on.png">Lina Imoettzz


src="on.png">Aku berdiri Sendiri<tr>

<td colspan="2"><font face="Calibri" color="#271470"><img src="on.png">Siapa Namaku??


src="on.png">Ryan si Voldemort<tr>

<td colspan="2"><font face="Calibri" color="#271470"><img src="on.png">Si Chubby Sampit

</table></td><tr height="100" bgcolor="#fee504">

<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Putri Agustina</td>

<tr><td><font face="Calibri"

color="#271470">kangen Pak Pos :( kapan ya bisa ketemu lagi.. love u pak pos :)</td><tr>

<td><font face="Calibri" color="#271470" size="1">5 menit yang lalu</td>

<tr><td valign="bottom">1 <img valign="bottom"

src="8.gif"> | 3 <img valign="bottom" src="4.gif"> | <img valign="bottom" src="2.gif"> | 30 <img valign="bottom" src="com.png">

</table></td><tr height="100" bgcolor="#fdfb79">

<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Eka Prasetyaningrum</td>

<tr>

<td><font face="Calibri" color="#271470">Keputusan yang diambil tanpa pemikiran mendalam terlebih dahulu tidak akan mendapat manfaat... Jadi mohon difikir dulu ya mbak :)</td>

<tr><td><font face="Calibri" color="#271470"

size="1">20 menit yang lalu</td><tr>

<td valign="bottom">1 <img valign="bottom" src="8.gif"> | 2 <img valign="bottom" src="4.gif"> | <img valign="bottom" src="2.gif"> | 3 <img valign="bottom" src="com.png">


<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Gue Siii Gila Futufutu narsiss sedunia</td>

<tr><td><font face="Calibri" color="#271470">#np

Kangan Band-14 hari</td><tr>

<td><font face="Calibri" color="#271470" size="1">1 jam yang lalu</td>

<tr><td valign="bottom"><img valign="bottom"

src="8.gif"> | 1 <img valign="bottom" src="4.gif"> | 5 <img valign="bottom" src="2.gif"> | 1 <img valign="bottom" src="com.png">


<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Aan Kristafia</td>

<tr><td><font face="Calibri" color="#271470">Otw

Kandangan</td><tr>




</table></td><tr bgcolor="#fee504">

<td height="100"><table><tr>

<td><font face="Calibri" color="#271470"><b>Siti Hartania</td>


color="#271470">ngebakso with my love :)</td><tr>





<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Patdli</td>

<tr><td><font face="Calibri" color="#271470">Aku

terjatuh dan tak bisa bangkit lagiiii.....</br>Aku terhempas dalam lautan luka dalaaaammm...</br>Aku terjatuh dan tak tahu arah jalan pulang...</br>Aku tanpamu BUTIRAN DEBUUUU....</td>


size="1">2 jam yang lalu</td><tr>



<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Ega Prayoga Nugraha</td>


color="#271470">Karaokean</td><tr>





<td><table><tr>



color="#271470">BETE SANGADTH</td><tr>





<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Putri Agustina > Eka Prasetyaningrum</td>

<tr><td><font face="Calibri" color="#271470">Ka,

nope mu yang baru piro??</td><tr>



src="8.gif"> | <img valign="bottom" src="4.gif"> | <img valign="bottom" src="2.gif"> | 2 <img valign="bottom" src="com.png">

</table></td>

<tr bgcolor="#fdfb79"><td height="50"><center>Lebih Lama</td>

<tr><td colspan="3"><table><tr align="center">

<td><td align="center" background="ii.png"height="50" width="835"></td><td>

</table></table></html>

Halaman Utama (HTML)<html><title>Berteman</title>

<style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style>

<body background="oi.jpg"><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>











<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Pesan</table>&nbsp

<table class="curvedEdges" width="904" border="none" align="center" valign="center" bgcolor="white">

<tr><td width="120" rowspan="11" valign="top">

<table><tr>

<td><center><img src="ega.jpg"><tr>

<td><center><b><a href="Profil.html" target="_blank">Ega Prayoga Nugraha</a></td>


<tr><td><font face="Calibri" color="#271470"><b><center>Komunitas

<tr><td><font face="Calibri" color="#271470" size="2">Mahasiswa

UNDA Sampit<tr>

<td><font face="Calibri" color="#271470" size="2">Alumni SMA Negeri 1 Sampit

<tr><td><font face="Calibri" color="#271470" size="2">Gila-gilaan


<tr><td><font face="Calibri" color="#271470"><b><center>Acara

<tr><td><font face="Calibri" color="#271470" size="2">Back To

Campuss !!!! - 7 Januari<tr>

<td><font face="Calibri" color="#271470" size="2">Ulang Tahun Fiona - 18 Januari

<tr><td><font face="Calibri" color="#271470" size="2">Reuni Alumni

SMANSA - 23 Januari</table>

</td><td height="100"><table>

<tr><td bgcolor="#fdfb79"><font face="Calibri"

color="#271470"><b><center>Perbaharui Pengalaman Mu!!</br><textarea name="Update" colspan="2" cols="61" rows="5"></textarea></center><right><input type="submit" name=" U p d a t e " value=" U p d a t e "><img valign="Middle" src="plus.png"><img valign="Middle" src="ata.png"></td>

</table><td valign="top" bgcolor="white" rowspan="11" width="200">

<table><tr>






Mengontak anda

<tr><td colspan="2"><font face="Calibri" color="#271470"

size="1"><center>..................................<tr>

<td><img src="tania.jpg"><td width="160"><font face="Calibri" color="#271470">Siti Hartania

Mengontak Anda<tr>



























src="on.png">Ryan si Voldemort


src="on.png">Si Chubby Sampit</table></td>

<tr height="100" bgcolor="#fee504"><td><table>


color="#271470"><b>Putri Agustina</td><tr>

<td><font face="Calibri" color="#271470">kangen Pak Pos :( kapan ya bisa ketemu lagi.. love u pak pos :)</td>





<td><table><tr>



color="#271470">Keputusan yang diambil tanpa pemikiran mendalam terlebih dahulu tidak akan mendapat manfaat... Jadi mohon difikir dulu ya mbak :)</td>





<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Gue Siii Gila Futufutu narsiss sedunia</td>

<tr><td><font face="Calibri" color="#271470">#np

Kangan Band-14 hari</td><tr>





<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Aan Kristafia</td>

<tr><td><font face="Calibri" color="#271470">Otw

Kandangan</td><tr>






<td><font face="Calibri" color="#271470"><b>Siti Hartania</td>


color="#271470">ngebakso with my love :)</td><tr>





<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Patdli</td>

<tr><td><font face="Calibri" color="#271470">Aku

terjatuh dan tak bisa bangkit lagiiii.....</br>Aku terhempas dalam lautan luka dalaaaammm...</br>Aku terjatuh dan tak tahu arah jalan pulang...</br>Aku tanpamu BUTIRAN DEBUUUU....</td>





<td><table><tr>








<td><table><tr>


<tr>

<td><font face="Calibri" color="#271470">BETE SANGADTH</td>



<td valign="bottom"><img valign="bottom" src="8.gif"> | 2 <img valign="bottom" src="4.gif"> | <img valign="bottom" src="2.gif"> | 6 <img valign="bottom" src="com.png">


<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Putri Agustina > Eka Prasetyaningrum</td>

<tr><td><font face="Calibri" color="#271470">Ka,

nope mu yang baru piro??</td><tr>




</table></td><tr bgcolor="#fdfb79">

<td height="50"><center>Lebih Lama</td><tr><td colspan="3"><table><tr align="center">



Halaman Profil<html><title>Ega Prayoga Nugraha</title>

<style type="text/css">a {font-family:arial, "arial", Times, serif;font-size:medium;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style>

<body background="oi.jpg"><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style><style type="text/css">table.curved { border:1px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curved td, table.curved th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }

</style>











<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Pesan</table>&nbsp<table class="curved" width= "904"border="none" align="center" valign="center" bgcolor="white"><tr>

<td width="140" rowspan="3"><center><img src="egede.jpg"><td>&nbsp <td width="310" rowspan="3">

<table align="right"><tr>

<td><img src="1.jpg"><td><img src="2.jpg"><td><img src="3.jpg">

<tr><td><img src="4.jpg"><td><img src="5.jpg"><td><img src="u1.jpg">

<tr><td><img src="u2.jpg"><td><img src="u3.jpg"><td width="100" height="75" bgcolor="#fee504"><font face="Calibri"

Size="4" color="#271470">Lebih Banyak</br>foto...</table>

<tr><td height="200" bgcolor="#fdfb79"><b><a href="profile.html"

target="_blank">Ega Prayoga Nugraha</a></br></br><font face="Calibri" Size="4" color="#271470">Born in Bandung, 20

February 1993.</br>Pisces boy.</br>Study in Darwan Ali University (2011)</br>Work In Pengangguran

</table>

&nbsp<table class="curvedEdges" width="904" border="none" align="center" valign="center" bgcolor="white">

<tr>

<td bgcolor="#fdfb79"><font face="Calibri" color="#271470"><b><center>Perbaharui pengalaman mu</br><textarea name="Update" colspan="2" cols="61" rows="5"></textarea></br><input type="submit" name=" U p d a t e " value=" U p d a t e "><img valign="Middle" src="plus.png"><img valign="Middle" src="ata.png"></td>

<td valign="top" bgcolor="white" rowspan="11" width="200"><table><tr>






Mengontak anda<tr>



Mengontak Anda<tr>






























<td><table><tr>



color="#271470">Ngalih Bonor</td><tr>





<td><table><tr>



color="#271470">Kucing ku melahirkan :')</td><tr>




</table></td>



color="#271470"><b>Putri Agustina > Ega Prayoga Nugraha</td><tr>

<td><font face="Calibri" color="#271470">Kamo0 dmana???</td>



<td valign="bottom"><img valign="bottom" src="8.gif"> | 1 <img valign="bottom" src="4.gif"> | 5 <img valign="bottom" src="2.gif"> | 1 <img valign="bottom" src="com.png">


<td><table><tr>



color="#271470">Berantakan</td><tr>








color="#271470">Makan-makan</td><tr>





<td><table><tr>



color="#271470">Handak hujan Pinanya</td><tr>





<td><table><tr>








<td><table><tr>



color="#271470">Biaram</td><tr>





<td><table><tr>



color="#271470">maleeesssss</td><tr>





<td height="50" colspan="7"><center>Lebih Lama</td><tr><td colspan="3"><table><tr align="center">



Halaman Profil (User Lain)<html><title>Utit Sii Unyu</title>

<style type="text/css">a {font-family:arial, "arial", Times, serif;font-size:medium;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style>

<body background="oi.jpg"><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style><style type="text/css">table.curved { border:1px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curved td, table.curved th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>











<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Pesan</table>&nbsp<table class="curved" width= "904"border="none" align="center" valign="center" bgcolor="white"><tr>

<td width="140" rowspan="3"><center><img src="ucing.jpg"><td>&nbsp <td width="310" rowspan="3">

<table align="right"><tr>

<td><img src="u1.jpg"><td><img src="u2.jpg"><td><img src="u3.jpg">

<tr><td><img src="u4.jpg"><td><img src="u5.jpg"><td><img src="u6.jpg">

<tr><td><img src="u7.jpg"><td><img src="u8.jpg"><td bgcolor="#fee504"><font face="Calibri" Size="4"

color="#271470">Lebih banyak</br>Foto...</table>

<tr><td height="200" bgcolor="#fdfb79"><b><a href="profile.html"

target="_blank">Utit Sii Unyu</a></br></br><font face="Calibri" Size="4" color="#271470">Born in Sampit, 25

September 2011.</br>Siamese Cat :P.</br>I love Fish And Chicken :d</br>Kucing Rumahan</br></br><input type="submit" name="Add" value="T a m b a h k a n k e K o

n t a k k u"><input type="submit" name="msg" value="Kirim Pesan">

</table> &nbsp<table class="curvedEdges" width="904" border="none" align="center" valign="center" bgcolor="white">

<tr>

<td bgcolor="#fdfb79"><font face="Calibri" color="#271470"><b><center>Bagilah pengalaman mu pada Utit Sii Unyu</br><textarea name="Update" colspan="2" cols="61" rows="5"></textarea></br><input type="submit" name=" S h a r e " value=" S h a r e "><img valign="Middle" src="plus.png"><img valign="Middle" src="ata.png"></td>







Mengontak anda<tr>



Mengontak Anda<tr>









color="#271470"><b><center>Lebih lama...<tr>





















<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Utit Sii Unyu </td>


color="#271470">Meong meong meong meong meong meong meong meong meong meong meong meong meong meong </td>





<td><table><tr>



color="#271470">Meoooooooooooooooooooooooonnnnnnnnnngggggg</td><tr>





<td><table><tr>

<td><font face="Calibri" color="#271470"><b>Kitty Manja > Utit Sii Unyu</td>


color="#271470">Kamo0 dmana???</td><tr>





<td><table><tr>



color="#271470">:3</td><tr>








color="#271470">miaww</td><tr>





<td><table><tr>



color="#271470">Meong meong meong???</td><tr>





<td><table><tr>



color="#271470">Meong :')</td><tr>





<td><table><tr>



color="#271470">meong Meoooong :(</td><tr>




</table></td>



color="#271470"><b>Utit Sii Unyu </td><tr>

<td><font face="Calibri" color="#271470">)(*&$%&^&$%^#</td>



<td valign="bottom"><img valign="bottom" src="8.gif"> | <img valign="bottom" src="4.gif"> | <img valign="bottom" src="2.gif"> | 2 <img valign="bottom" src="com.png">


<td height="50"><center>Lebih Lama</td><tr><td colspan="3"><table><tr align="center">



Halaman Mengontaki<html><title>Mengontaki</title>

<style type="text/css">a {font-family:calibri, "calibri", Times, serif;font-size:large;cursor: auto}a:link {color:#271470; text-decoration: none}a:visited {color: #660066;}a:hover {text-decoration: none; color: red; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style>

<body background="oi.jpg"><style type="text/css">table.curvedEdges { border:8px solid #271470;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px; }table.curvedEdges td, table.curvedEdges th { border: white;padding:5px; -webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px; }</style>





<td align="center"><bottom><img valign="bottom" src="eg.jpg"> &nbsp | &nbsp<img valign="bottom" src="setting.png">&nbsp | &nbsp<img valign="bottom" src="logout.png"></table>

<table background="menu.png" width= "900" height="43" border="none" align="center" valign="center"><tr>





<td width="150" ><center><b><font face="Calibri" Size="4" color="#271470"><a href="Profil.html"

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Profil</a>

<td width="150"><center><b><font face="Calibri" Size="4" color="#271470"><a href="#" target="_blank">Pesan</table>&nbsp<table class="curvedEdges" width="904" border="none" align="center" valign="center" bgcolor="white">

<tr><td rowspan="9" valign="top">

</td><td colspan="7" bgcolor="#fdfb79"><font

face="Calibri" color="#271470" size="6"><center><b>Orang yang Anda Kontak - 36 Kontak</td>







Mengontak anda<tr>



Mengontak Anda<tr>





























</table></td><tr>

<td width="150" height="120" bgcolor="#fee504" align="center"><img src="orang/mimi.jpg"></br>Ermiaty

<td width="150" height="120" bgcolor="#fdfb79" align="center"><img src="orang/eka w.jpg"></br>Eka Wulandari

<td width="150" height="120" bgcolor="#fee504" align="center"><img src="orang/nging.jpg"></br>Rivia

<td width="150" height="120" bgcolor="#fdfb79" align="center"><img src="orang/rahmat.jpg"></br>Rahmatullah<tr>

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/aan.jpg"></br>Aan Kristafia

<td height="120" bgcolor="#fee504" align="center"><img src="orang/diah.jpg"></br>Halimatus Sa'diyah

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/doni.jpg"></br>Donny Alfiansyah

<td height="120" bgcolor="#fee504" align="center"><img src="orang/eka.jpg"></br>Eka Prasetyaningrum<tr>

<td height="120" bgcolor="#fee504" align="center"><img src="orang/epen.jpg"></br>Arifinur

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/hendra.jpg"></br>Hendra Heriadi

<td height="120" bgcolor="#fee504" align="center"><img src="orang/melya.jpg"></br>Melya Ulfah

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/ogo.jpg"></br>Dwi Prayoga<tr>

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/oji.jpg"></br>Rujianur

<td height="120" bgcolor="#fee504" align="center"><img src="orang/patdli.jpg"></br>Patdli

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/putri.jpg"></br>Putri Agustina

<td height="120" bgcolor="#fee504" align="center"><img src="orang/putri y.jpg"></br>Putri yunita<tr>

<td height="120" bgcolor="#fee504" align="center"><img src="orang/ripa.jpg"></br>Ripatul Mahmudah

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/roni.jpg"></br>Syahroni

<td height="120" bgcolor="#fee504" align="center"><img src="orang/rudy.jpg"></br>Rudy Ahmad Maulana

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/rusdi.jpg"></br>Rusdianoor<tr>

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/said.jpg"></br>Said Wahyudi

<td height="120" bgcolor="#fee504" align="center"><img src="orang/tania.jpg"></br>Siti Hartania

<td height="120" bgcolor="#fdfb79" align="center"><img src="orang/saidah.jpg"></br>Saidah

<td height="120" bgcolor="#fee504" align="center"><img src="orang/teguh.jpg"></br>Teguh Haris Munandar<tr>

<td height="120" bgcolor="#fee504" align="center"><img src="orang/winda.jpg"></br>Winda Rasmita

<td><td><td>

<tr><td colspan="10"><table>

<tr align="center"><td><td align="center" background="ii.png"height="50" width="835"></td><td>


Documents

egafikom.files.wordpress.com · Web viewPada halaman awal berteman.com, hanya terdapat 2 link berupa gambar login dan sign up, agar pengguna tidak bingung dalam pengoperasiannya