Perancangan Forum Antar Pelajar Berbentuk

(1)

LAMPIRAN PROGRAM

1. index.html (Halaman Awal)

<!DOCTYPE html>

<html lang="en">

<head>

<!--[if IE]>

content="IE=edge,chrome=1"> <![endif]-->

<title>Unidu</title>

(2)

rel="stylesheet" />

rel="stylesheet" />

<link

href="assets/scripts/vegas/jquery.vegas.min.css" rel="stylesheet" />

<link

href='http://fonts.googleapis.com/css?family=Ruluko' rel='stylesheet' type='text/css' />

(3)

(4)

</li> </ul>

</div>

</div>

</nav>

<h1 class="head-main">Ünidu</h1>

<h2 class="head-sub-main">Be a part of new connecting way</h2>

<a class="btn btn-danger btn-lg " href="#about">Read More </a><a class="btn btn-default btn-lg" href="#contact-sec">Leave Here </a>

</div>

(5)

<section class="for-full-back color-white"

id="about">

<h1>Sebuah Forum</h1> <h4>

<strong>Ünidu adalah sebuah

forum di kalangan pelajar yang dapat membantu pelajar saling terhubung dalam

menjalani dunia pendidikan </strong>

</h4> </div>

</div>

(6)

<h3>Dynamic </h3> <p>

Upload dan share foto

tentang kegiatan sekolah ke teman - temanmu

</p>

</div>

Saling share tugas dan

berbagai refrensi dari sekolah tanpa biaya </p>

(7)

</div>

<h3>Responsive </h3> <p>

Ruang diskusi yang

responsivf untuk pertanyaan anda

</p>

</div>

(8)

<h3>Subscribe </h3> <p>

subscribe pengguna untuk mendapatkan info selanjutnya

</p>

</div>

</div> </div>

<div class="row text-center"> <div class="col-md-12"> <h2>About</h2>

<p>

Ünidu adalah sebuah forum

komunikasi antar pelajar yang dibentuk untuk

menghubungkan pelajar antar sekolah serta menjadikan forum ini menjadi media yang dapat digunakan menjadi tempat saling share informasi tentang pendidikan, serta pembaruan terbaru dalam dunia pendidikan. para pelajar yang ingin berinteraksi dengan pelajar lain dapat secara mudah dan online tanpa mementingkan jarak serta efisien dapat menjadikan forum ini sebagai media sosial yang konvensional berbentuk edukasi

</p> </div>

</div>

(9)

</section>

<div class="col-md-6 "> <h3>Ünidu</h3>

<h4>

<strong>Best way to connect for student to student

</strong>

</h4> </div>

<h3>Ünidu</h3> <h4>

<strong>Share your assigment to your friend

</strong> </h4>

(10)

</div> </section>

<section class="for-full-back color-white "

id="contact-sec">

<div class="col-md-5 contact-cls"> <h3>CONTACT ME </h3>

<div>

<span><i class="fa

fa-home"></i>  Address: Medan, Indonesia</span> <br />

<span><i class="fa

fa-phone"></i> Phone: 083199198388</span>

<br />

<span><i class="fa fa-envelope-o"></i> E-Mail: sukma_sutan@yahoo.com</span>

<br />

<span><i class="fa

fa-globe"></i> Web: www.yourdomain.com</span> <br />

(11)

</div> menunjang pembuat website agar lebih baik lagi

</p>

class="form-control" required="required"

placeholder="Name">

</div> </div>

(12)

<input type="text"

class="form-control" required="required"

placeholder="Email address">

</div>

name="message" id="message" required="required"

class="form-control" rows="3"

placeholder="Message"></textarea>

</div>

<div

class="form-group">

<button

type="submit" class="btn btn-default">Submit

(13)

</div> </section>

</div>

<script

src="assets/plugins/jquery-1.10.2.js"></script>

<script

src="assets/plugins/vegas/jquery.vegas.min.js"></script >

<script

src="assets/plugins/jquery.parallax-1.1.3.js"></script>

(14)

2. index.php (Login)

<!DOCTYPE html> <html lang="en"> <head>

content="IE=edge">

<title>Login</title>

generated using layoutit.com">

rel="stylesheet">

</head>

<body>

(15)

<button type="button"

class="navbar-toggle" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1">

<span

class="sr-only">Toggle navigation</span><span

class="icon-bar"></span><span class="icon-bar"></span><span

class="icon-bar"></span>

</button> <a class="navbar-brand" href="#">Ünidu</a>

</div>

<div class="collapse

navbar-collapse" id="bs-example-navbar-collapse-1">

</li>

</li> </ul>

<ul class="nav navbar-nav

navbar-right">

(16)

</li> </ul>

</div>

</nav> </div>

</div>

<div class="row" style="margin-top: 60px;"> <div class="col-md-6 col-md-offset-3"> <h4 class="text-center">LOGIN</h4>

</div>

Connect to Facebook </button>

Connect to Twitter </button>

</div> </div>

(17)

<label for="inputEmail3"

class="col-sm-2 control-label">

Username </label>

<input

class="form-control" id="inputEmail3" name="username" type="text"> </div>

</div>

<label for="inputPassword3"

Password </label>

<input

class="form-control" id="inputPassword3" name="password"

type="password">

</div> </div>

<div class="col-sm-offset-2

col-sm-10">

(18)

<label>

<input type="checkbox"> Remember me

</label> </div>

</div> </div>

col-sm-10">

<button type="submit"

class="btn btn-default">

Sign in </button> </div>

<a

href="../../register/src">Belum Punya akun? Daftar</a>

</div> </div>

</form> </div>

</div>

(19)

</div> </div>

</div>

</html>

3. index.php (Register)

<!DOCTYPE html> <html lang="en">

<head>

content="IE=edge">

<title>Register</title>

(20)

rel="stylesheet">

</head> <body>

<nav class="navbar navbar-default

navbar-inverse navbar-fixed-top" role="navigation">

<span

</div>

(21)

</li>

</ul>

navbar-right">

</li>

</ul>

</div>

</nav>

</div> </div>

<div class="col-md-6 col-md-offset-3"> <h4 class="text-center">REGISTER</h4>

</div>

(22)

</button>

Connect to Twitter

</button> </div>

</div>

<form class="form-horizontal"

role="form" action="proses/register.php" method="POST" enctype="multipart/form-data">

<label for="inputuser"

Username

</label>

<input

class="form-control" id="inputusername" name="username"

type="text">

</div>

<label for="inputEmail3"

(23)

</label>

<input

class="form-control" id="inputEmail3" name="email" type="email">

</div> </div>

Password </label>

<input

class="form-control" id="inputPassword3" name="password"

type="password">

</div>

Status </label>

<select name="status"> <option

(24)

<option value="1">Alumni</option>

</select> </div>

</div>

<label for="inputdate3"

Tanggal Lahir

</label>

<input

class="form-control" id="inputdate" name="tanggal_lahir"

type="date">

</div> </div>

<label for="inputgambar3"

Upload Foto Profil </label>

<input

class="form-control" id="inputgambar" name="upload_foto"

type="file">

</div>

(25)

col-sm-10">

<label>

<input

type="checkbox"> Saya Setuju Dengan Syarat dan

Ketentuan Yang Berlaku

</label>

</div> </div>

</div>

col-sm-10">

Sign Up </button>

</div> </div>

<a

href="../../login/src">Sudah punya akun? Masuk</a> </div>

(26)

</div> </div>

</div> </div>

</div>

</body>

</html>

4. index.php (Beranda)

<?php

session_start();

?>

<!DOCTYPE html>

(27)

<title>Beranda</title>

rel="stylesheet">

</head> <body>

<img class="img-responsive logo"

alt="Bootstrap Image Preview"

src="../../register/src/img/<?php echo

$_SESSION['gambar'] ?>"> </div>

<ul class="nav nav-tabs">-

(28)

<li>

<a href="#"><?php echo

$_SESSION['username']; ?></a> </li>

<li> <a

href="../../artikel/src/">Artikel</a> </li>

<a href="#"

data-toggle="dropdown"

class="dropdown-toggle">Settings<strong class="caret"></strong></a>

<a href="#">About</a>

</li>

<li>

</li>

<li> <a

href="../../logout/logout.php"> Sign Out</a>

</li> </ul>

(29)

</ul> </div>

</div>

<div class="carousel slide"

id="carousel-757431">

</li>

</li>

</li>

</ol>

<img style=""

alt="Carousel Bootstrap First" src="img/1.jpg"

class="img-responsive full-img">

<div

class="carousel-caption">

<h4>

(30)

Dukung

Pendidikan, Intel dan Columbia Tawarkan Software Gratis

</a>

</div> </div>

<img style=""

alt="Carousel Bootstrap Second" src="img/2.jpg">

<div

<h4>

Adat dan Budaya </h4>

<a class="link"

href="#">

Kota Ini Jadi Pusat Pendidikan Dalang-dalang Cilik

</a>

</div> </div>

<img style=""

alt="Carousel Bootstrap Third" src="img/3.jpg">

<div

(31)

Info Terkini </h4>

<a class="link"

href="#">

kakek Bercucu

Lima Ikuti Ujian Paket C

</a> </div>

</div>

</div> <a class="left

carousel-control" href="#carousel-757431"

data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control"

href="#carousel-757431" data-slide="next"><span

class="glyphicon glyphicon-chevron-right"></span></a> </div>

</div>

<div class="panel-group"

id="panel-155574">

<a class="panel-title

collapsed" data-toggle="collapse" data-parent="#panel-155574" href="#panel-element-949288">Forum</a>

</div>

(32)

<div class="panel-body"> <a

href="../../pelajar/src">Pelajar</a> </div>

<div class="panel-body"> <a

<?php

mysql_connect('localhost','root','');

mysql_select_db('db_forum');

$sql = "SELECT * FROM

tbl_artikel";

$exe = mysql_query($sql);

while ($row =

mysql_fetch_array($exe)) {

echo "<li> <h6>

<a

(33)

</h6>

Temukan di Ünidu ! </h3>

</div>

<p>

unidu

</p> </div>

(34)

</div> <p>

unidu </p>

</div>

</div>

<strong>Ünidu, Inc</strong><br>

Jl. Denai No.125 A Medan<br> Medan, 20216<br> <abbr title="Phone">P:</abbr> 083199198388

</address>

(35)

</div> </div>

</div>

</html>

5. index.php (Artikel)

<!DOCTYPE html>

content="IE=edge">

(36)

rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-default

navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar-header">

<span

(37)

</li>

</ul>

navbar-right">

<a href="#">SIGN

IN</a>

</li>

</ul> </div>

</nav>

</div> </div>

<h4 class="text-center">Give your

(38)

</div>

<form class="form-horizontal"

role="form" action="proses/artikel.php" method="POST" enctype="multipart/form-data">

<label for="inputdgambar3"

Upload Gambar Artikel </label>

<input

class="form-control" id="inputgambar" name="upload_foto"

type="file">

</div>

<label for="inputJudul3"

Judul Artikel

</label>

<input

class="form-control" id="inputjudulartikel" name="judul_artikel" type="text">

(39)

</div> </div>

<input

class="form-control" id="inputartikel" name="artikel" type="text">

</div>

Tambahkan Artikel </button>

</div>

</form> </div>

</div>

</div>

</div> </div>

(40)

</html>

6. index.php (Tread)

<?php include("../proses/koneksi.php");

session_start();?> <!DOCTYPE html>

content="IE=edge">

rel="stylesheet">

(41)

</head> <body>

<nav class="navbar navbar-default"

role="navigation">

<span

</div>

<li>

</li> <li>

<a href="#"><?php

(42)

</li>

navbar-right">

<a href="#"

class="dropdown-toggle"

data-toggle="dropdown">Settings<strong href="../../logout/logout.php">Sign Out</a>

(43)

</ul>

<h3 class="text-center text-primary"> Beasiswa Keren yang Gak Boleh Dilewatin Para Beasiswa Hunter!

</h3>

id="panel-393929">

<div

class="panel-heading">

<a

class="panel-title" data-toggle="collapse"

data-parent="#panel-393929"

href="#panel-element-691385">Forum</a>

</div>

<div

(44)

<div

<div class="col-md-9"> <?php

mysql_connect('localhost','root','');

mysql_select_db('db_forum');

$sql = "SELECT * FROM

tbl_artikel WHERE id_artikel='".$_GET['id']."'";

$row =

mysql_fetch_array($exe);

echo "

<img alt=\"Bootstrap

Image Preview\"

src=\"../../Artikel/src/img/".$row['gambar_artikel']."\ ">

(45)

".$row['isi_artikel']."

</p> ";

?>

</div> </div>

Komentar :

</h3>

<div class="row komentar"> <?php

// $artikel =

$_GET['artikel'];

$sql = "SELECT foto_profil, username, id_artikel, isi_komentar FROM tbl_komentar,

tbl_register WHERE `tbl_komentar`.`id_user` =

`tbl_register`.`id_user` and id_artikel =

'".$_GET['id']."'";

while ($row =

mysql_fetch_array($exe)) {

(46)

<img alt="Bootstrap Image

Preview" src="../../register/src/img/<?php echo

$row['foto_profil'] ?>"> </div>

<h5><?php echo

$row['username']; ?></h5> <p>

<?php echo

$row['isi_komentar'] ?>

</p>

</div>

<?php

}

?>

</div>

<div class="col-md-12 col-sm-12"> <form

action="../proses/input_komentar.php?id=<?php echo

$_GET['id'] ?>" method="POST">

(47)

</div>

class="btn btn-default">Tambahkan Komentar</button> </div>

</form> </div>

</div>

<li>

<li>

<li>

</li> <li>

<li>

(48)

</li> <li>

<li>

</li> </ul>

</div> </div>

</div>

</html>

7. index.php (Pelajar)

<?php include("../proses/koneksi.php"); session_start();?>

(49)

content="IE=edge">

rel="stylesheet">

</head>

<body>

role="navigation">

(50)

<span

</div>

</li>

<li>

<a href="#"><?php

echo $_SESSION['username']; ?></a>

</li>

navbar-right">

<a href="#"

(51)

</li>

<li> <a href="#">About</a>

</li>

<li>

</li>

</ul> </li>

</ul> </div>

</nav>

</div> </div>

(52)

Pelajar </h3>

id="panel-393929">

<div

<a

</div>

<div

id="panel-element-691385" class="panel-collapse collapse in">

(53)

</div>

<?php

tbl_register WHERE status='0'";

$c = mysql_query($sql);

while ($b =

mysql_fetch_array($c)) {

echo "<table> <tr>

<td><img

alt=\"Bootstrap Image Preview\"

src=\"../../Register/src/img/".$b['foto_profil']."\"></ td>

<td>";

$sql1=

"SELECT tbl_artikel.judul_artikel,

tbl_artikel.id_artikel FROM tbl_artikel , tbl_register WHERE tbl_artikel.id_user = tbl_register.id_user AND tbl_register.id_user='".$b['id_user']."'";

$a =

mysql_query($sql1);

while ($row = mysql_fetch_array($a)) {

(54)

} echo "

</td></tr>"; echo "</table>";

} ?>

</div>

</div> </div>

</div>

<li>

<li>

</li> <li>

(55)

<li>

</li> <li>

</ul> </div>

</div>

</html>

8. index.php (Alumni)

<?php include("../proses/koneksi.php"); session_start();?>

(56)

content="IE=edge">

rel="stylesheet">

</head>

<body>

role="navigation">

(57)

<span

</div>

</li>

<li>

<a href="#"><?php

echo $_SESSION['username']; ?></a>

</li>

navbar-right">

<a href="#"

(58)

</li>

<li> <a href="#">About</a>

</li>

<li>

</li>

</ul> </li>

</ul> </div>

</nav>

</div> </div>

(59)

Alumni </h3>

id="panel-393929">

<div

<a

</div>

<div

id="panel-element-691385" class="panel-collapse collapse in">

(60)

</div>

<?php

tbl_register WHERE status='1'";

$c = mysql_query($sql);

while ($b =

mysql_fetch_array($c)) {

echo "<table> <tr>

<td><img

alt=\"Bootstrap Image Preview\"

src=\"../../Register/src/img/".$b['foto_profil']."\"></ td>

<td>";

$sql1=

"SELECT tbl_artikel.judul_artikel,

tbl_artikel.id_artikel FROM tbl_artikel , tbl_register WHERE tbl_artikel.id_user = tbl_register.id_user AND tbl_register.id_user='".$b['id_user']."'";

$a =

mysql_query($sql1);

while ($row = mysql_fetch_array($a)) {

(61)

} echo "

</td></tr>"; echo "</table>";

} ?>

</div>

</div> </div>

</div>

<li>

<li>

</li> <li>

(62)

<li>

</li> <li>

</ul> </div>

</div>

(63)

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

Yang bertanda tangan di bawah ini, menerangkan bahwa Tugas Akhir Mahasiswa

Program Diploma 3 Teknik Informatika :

Nama : Sutan Sukma Harahap

NIM : 132406197

Program Studi : TEKNK INFORMATIKA

Judul TA : Perancangan Forum Antar Pelajar Berbentuk Media Sosial

Berbasis Web

Telah melakukan test Program Tugas Akhir Mahasiswa tersebut di atas tanggal

...Juni 2016.

Dengan Hasil : Sukses/Gagal

Demikian diterangkan untuk digunakan sebagai syarat pendaftaran Ujian Meja

Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA

USU Medan.

Medan, Juni 2016 Dosen Pembimbing