Sistem Informasi Sopo Helios Education Centre Berbasis Website

(1)

LAMPIRAN

1. Form index.php

<!DOCTYPE html> <html>

<head>

href="assets/images/logo.png">

<title>Sopo Helios | Rumah Pencerahan</title> <link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Roboto:700,400&subs et=cyrillic,latin,greek,vietnamese">

</head> <body>

<?php include "navigasi.php" ?>

<section class="box section section--relative

mbr-section--fixed-size mbr-section--full-height mbr-section--bg-adapted mbr-parallax-background" id="home" style="background-image:

url(assets/images/img-2871-1040x780-32.jpg);">

(2)

<h3 class="mbr-header__text" style=""><p>PARTNER & LIST  OF CLIENTS</p></h3>

</div> </div> </div> </section>

<?php include "partner.php" ?>

<span style="font-weight: normal;">"Kekayaan terbesar sebuah bangsa adalah manusianya,<br></span></h3>

<h3>

<span style="font-weight: normal;">   bukan sumber daya alamnya"</span></h3><h3>         

                           -ANIES BASWEDAN<span style="text-align: center; font-size: 17px; line-height: 27px;"> </span></h3> </blockquote></div>

</div> </div> </section>

<h4 class="mbr-header__text1" style="padding-left:5px;">TETAP TERHUBUNG DENGAN KAMI</h4>

</div>

(3)

<a class="mbr-social-icons__icon socicon-bg-facebook" title="Facebook" target="_blank"

href="https://www.facebook.com/sopohelios"> <i class="socicon socicon-facebook"></i></a>

<a class="mbr-social-icons__icon socicon-bg-instagram" title="Instagram" target="_blank"

href="https://instagram.com/sopo_helios"> <i class="socicon socicon-instagram"></i></a> </div>

</div> </div> </section>

<?php include "footer.php" ?>

<!--[if lte IE 9]>

<script

src="assets/jquery-placeholder/jquery.placeholder.min.js"></script> <![endif]-->

</body> </html>

2. Form navigasi.php

(4)

<span class="brand__logo"><img class="navbar__brand-img mbr-brand__img" src="assets/images/logobesar-558x128-40.png"

alt="sopohelios"></span>

</span> </div>

<a class="mbr-buttons__link btn text-warning" href="/sopohelios2">BERANDA</a>

</li>

<a class="mbr-buttons__link btn text-warning" href="#tentang">TENTANG</a>

</li>

<a class="mbr-buttons__link btn text-warning" href="./heliose-learning">E-LEARNING</a>

</li>

<a class="mbr-buttons__link btn text-warning" href="#contacts3-30">KONTAK KAMI</a>

</li> </ul> </div> </nav> </div> </div> </div> </div> </section>

3. Form elearning/index.php

<?php

@session_start();

include "+koneksi.php"; if(!@$_SESSION['siswa']) { if(@$_GET['hal'] == 'daftar') { include "register.php";

} else {

(5)

}

} else { ?> <!DOCTYPE html> <html>

<head>

</head> <body>

$sql_terlogin = mysqli_query($db, "SELECT * FROM tb_siswa JOIN tb_kelas ON tb_siswa.id_siswa = '$_SESSION[siswa]' AND

tb_kelas.id_kelas = tb_siswa.id_kelas") or die ($db->error); $data_terlogin = mysqli_fetch_array($sql_terlogin);

?>

Selamat datang, <u><?php echo

ucfirst($data_terlogin['username']); ?></u>. Jangan lupa <a href="inc/logout.php?sesi=siswa" class="btn xs btn-danger">Logout</a>

</div> </div> </div> </header>

(6)

</a>

<img src="img/foto_siswa/<?php echo $data_terlogin['foto']; ?>" class="img-rounded" />

</a>

<h5>Kelas :<?php echo $data_terlogin['nama_kelas']; ?></h5> </div>

</div> <hr />

<center><a href="?hal=detailprofil" class="btn info sm">Detail Profile</a><a href="?hal=editprofil" class="btn btn-primary btn-sm">Edit Profile</a></center>

</div> </li> </ul> </div> </div> </div> </div>

<li><a <?php if(@$_GET['page'] == '') { echo 'class="menu-top-active"'; } ?> href="./">Beranda</a></li>

<li><a <?php if(@$_GET['page'] == 'nilai') { echo 'class="menu-top-active"'; } ?> href="?page=nilai">Nilai</a></li>

<li><a <?php if(@$_GET['page'] == 'materi') { echo 'class="menu-top-active"'; } ?> href="?page=materi">Materi</a></li>

<li><a <?php if(@$_GET['page'] == 'berita') { echo 'class="menu-top-active"'; } ?> href="?page=berita">Berita</a></li>

(7)

</div> </div> </div> </section>

<div class="content-wrapper"> <div class="container" id="wadah"> <?php

if(@$_GET['page'] == '') { include "inc/beranda.php";

} else if(@$_GET['page'] == 'nilai') { include "inc/nilai.php";

} else if(@$_GET['page'] == 'materi') { include "inc/materi.php";

} else if(@$_GET['page'] == 'berita') { include "inc/berita.php";

} ?> </div>

</div> <footer>

</div> </footer> </body> </html> <?php } ?>

4. Form login.php

<?php

@session_start();

$db = mysqli_connect("localhost", "root", "", "db_elearning"); ?>

<head>

(8)

</head> <body> <header>

Anda belum punya akun ? Silahkan <a

href="./?hal=daftar" class="btn btn-xs btn-danger">Daftar</a> </div>

</div> </div> </header>

</div>

</a> </li> </ul> </div> </div> </div> </div>

(9)

<?php

if(@$_GET['page'] == ''){

echo 'class="menu-top-active"';

}

?> href="./">Login</a> </li>

<li><a <?php

if(@$_GET['page'] == 'berita') { echo 'class="menu-top-active"';

}

?> href="?page=berita">Berita</a> </li>

<li><a <?php if(@$_GET['page'] == 'beranda') { echo 'class="menu-top-active"'; } ?> href="/sopohelios2">Beranda</a></li>

<li><a <?php if(@$_GET['page'] == 'kontak') { echo 'class="menu-top-active"'; } ?> href="/sopohelios2/#contacts3-30">Kontak Kami</a></li> </ul>

</div> </div> </div> </div> </section>

<?php

if(@$_GET['page'] == '') { ?> <div class="row">

<h4 class="paghead-line">Silahkan login untuk masuk ke e-learning</h4>

</div> </div>

<div class="row"> <div class="col-md-6"> <?php

if(@$_POST['login']) {

$user = @mysqli_real_escape_string($db, $_POST['user']);

$pass = @mysqli_real_escape_string($db, $_POST['pass']);

$sql = mysqli_query($db, "SELECT * FROM tb_siswa WHERE username = '$user' AND password = md5('$pass')") or die ($db->error);

$data = mysqli_fetch_array($sql); if(mysqli_num_rows($sql) > 0) {

if($data['status'] == 'aktif') {

(10)

echo "<script>window.location='./';</script>"; } else {

echo '<div class="alert alert-warning">Login gagal, akun Anda sedang tidak aktif</div>';

} } else {

echo '<div class="alert alert-danger">Login gagal, username / password salah, coba lagi!</div>';

} } ?>

<h4><i>Masukkan username dan password Anda dengan benar :</i></h4> <form method="post">

<label>Username :</label>

<input type="text" name="user" class="form-control" required /> <label>Password : </label>

</div>

Untuk menggunakan layanan e-learning ini kalian harus login terlebih dahulu.

</div> </div> </div> <?php

} ?> </div>

</div> <footer>

</div> </div> </footer>

(11)

5. Form register.php

<?php

@session_start();

$db = mysqli_connect("localhost", "root", "", "db_elearning"); ?>

<head>

<title>Daftar E-Learning Sopo Helios</title>

</head> <body> <header>

Anda sudah punya akun ? Silahkan <a href="./" class="btn btn-xs btn-danger">Login</a>

</div> </div> </div> </header>

</div>

(12)

</li> </ul> </div> </div> </div> </div>

<li><a <?php if(@$_GET['page'] == '') { echo 'class="menu-top-active"'; } ?> href="?hal=daftar">Register</a></li>

<li><a <?php if(@$_GET['page'] == 'berita') { echo 'class="menu-top-active"'; } ?> href="?hal=daftar&page=berita">Berita</a></li>

</ul> </div> </div> </div> </div> </section>

<?php

if(@$_GET['page'] == '') { ?> <div class="row">

<h4 class="page-head-line">Pendaftaran akun e-learning</h4> </div>

</div>

<h4><i>Silahkan isi data Anda dengan benar !</i></h4> <form method="post" enctype="multipart/form-data">

NIS* :<input type="text" name="nis" class="form-control" required />

Nama Lengkap* : <input type="text" name="nama_lengkap" class="form-control" required />

Tempat Lahir* : <input type="text" name="tempat_lahir" class="form-control" required />

Tanggal Lahir* : <input type="date" name="tgl_lahir" class="form-control" required />

Jenis Kelamin* :

<select name="jenis_kelamin" class="form-control" required> <option value="">- Pilih -</option>

<option value="L">Laki-laki</option> <option value="P">Perempuan</option> </select>

(13)

<select name="agama" class="form-control" required> <option value="">- Pilih -</option>

<option value="Islam">Islam</option> <option value="Kristen">Kristen</option> <option value="Katholik">Katholik</option> <option value="Hindu">Hindu</option>

<option value="Budha">Budha</option>

<option value="Konghucu">Konghucu</option> </select>

Nama Ayah* : <input type="text" name="nama_ayah" class="form-control" required />

Nama Ibu* : <input type="text" name="nama_ibu" class="form-control" required />

Nomor Telepon : <input type="text" name="no_telp" class="form-control" />

Email : <input type="email" name="email" class="form-control" />

Alamat* : <textarea name="alamat" class="form-control" rows="3" required></textarea>

Kelas* :

<select name="kelas" class="form-control" required> <option value="">- Pilih -</option>

<?php

$sql_kelas = mysqli_query($db, "SELECT * from tb_kelas") or die ($db->error);

while($data_kelas = mysqli_fetch_array($sql_kelas)) { echo '<option

value="'.$data_kelas['id_kelas'].'">'.$data_kelas['nama_kelas'].'</op tion>';

} ?> </select>

Tahun Masuk* :

<select name="thn_masuk" class="form-control" required> <option value="">- Pilih -</option>

<?php

for ($i = 2020; $i >= 2000; $i--) {

echo '<option value="'.$i.'">'.$i.'</option>'; } ?>

</select>

Foto : <input type="file" name="gambar" class="form-control" />

Username* : <input type="text" name="user" class="form-control" required />

Password* : <input type="password" name="pass" class="form-control" required />

<br />

<i><b>Catatan</b> : Tanda * wajib disi</i> <hr />

(14)

<?php

if(@$_POST['daftar']) {

$nis = @mysqli_real_escape_string($db, $_POST['nis']);

$nama_lengkap =

@mysqli_real_escape_string($db, $_POST['nama_lengkap']); $tempat_lahir =

@mysqli_real_escape_string($db, $_POST['tempat_lahir']); $tgl_lahir =

@mysqli_real_escape_string($db, $_POST['tgl_lahir']); $jenis_kelamin =

@mysqli_real_escape_string($db, $_POST['jenis_kelamin']);

$agama = @mysqli_real_escape_string($db, $_POST['agama']);

$nama_ayah =

@mysqli_real_escape_string($db, $_POST['nama_ayah']); $nama_ibu =

@mysqli_real_escape_string($db, $_POST['nama_ibu']); $no_telp =

@mysqli_real_escape_string($db, $_POST['no_telp']);

$email = @mysqli_real_escape_string($db, $_POST['email']);

$alamat = @mysqli_real_escape_string($db, $_POST['alamat']);

$kelas = @mysqli_real_escape_string($db, $_POST['kelas']);

$thn_masuk =

@mysqli_real_escape_string($db, $_POST['thn_masuk']);

$user = @mysqli_real_escape_string($db, $_POST['user']);

$pass = @mysqli_real_escape_string($db, $_POST['pass']);

$sumber = @$_FILES['gambar']['tmp_name']; $target = 'img/foto_siswa/';

$nama_gambar = @$_FILES['gambar']['name'];

$sql_cek_user = mysqli_query($db, "SELECT * FROM tb_siswa WHERE username = '$user'") or die ($db->error);

if(mysqli_num_rows($sql_cek_user) > 0) {

echo "<script>alert('Username yang Anda pilih sudah ada, silahkan ganti yang lain');</script>";

} else { if($nama_gambar != '') {

if(move_uploaded_file($sumber, $target.$nama_gambar)) {

mysqli_query($db, "INSERT INTO tb_siswa VALUES('', '$nis', '$nama_lengkap', '$tempat_lahir', '$tgl_lahir', '$jenis_kelamin', '$agama', '$nama_ayah', '$nama_ibu', '$no_telp', '$email', '$alamat', '$kelas', '$thn_masuk',

(15)

echo '<script>alert("Pendaftaran berhasil, silahkan login"); window.location="./"</script>';

} else {

echo '<script>alert("Gagal mendaftar, foto gagal diupload, coba lagi!");</script>';

} } else {

mysqli_query($db, "INSERT INTO tb_siswa VALUES('', '$nis', '$nama_lengkap', '$tempat_lahir',

'$tgl_lahir', '$jenis_kelamin', '$agama', '$nama_ayah', '$nama_ibu', '$no_telp', '$email', '$alamat', '$kelas', '$thn_masuk',

'anonim.png', '$user', md5('$pass'), '$pass', 'tidak aktif')") or die ($db->error);

echo '<script>alert("Pendaftaran berhasil, tunggu akun aktif dan silahkan login"); window.location="./"</script>';

} } } ?> </div>

Untuk menggunakan layanan e-learning ini Anda harus memiliki akun terlebih dahulu.

</div> </div> </div> <?php

} ?> </div>

</div> <footer>

</div> </div> </footer>

</html>

6. Form +koneksi.php

<?php

(16)

//---fungsi2---//

function cek_session($isi_admin, $isi_pengajar) { if(@$_SESSION['admin']) {

echo $isi_admin;

} else if(@$_SESSION['pengajar']) { echo $isi_pengajar;

} }

function tgl_indo($tgl) {

$tanggal = substr($tgl,8,2);

$bulan = getBulan(substr($tgl,5,2)); $tahun = substr($tgl,0,4);

return $tanggal.' '.$bulan.' '.$tahun; }

function getBulan($bln){ switch ($bln){

case 1:

return "Januari"; break;

case 2:

return "Februari"; break;

case 3:

return "Maret"; break;

case 4:

return "April"; break;

case 5:

return "Mei"; break;

case 6:

return "Juni"; break;

case 7:

return "Juli"; break;

case 8:

return "Agustus"; break;

case 9:

return "September"; break;

case 10:

return "Oktober"; break;

case 11:

return "November"; break;

(17)

return "Desember"; break;

} }

function tampil_per_ID($table, $where = null) { global $db;

$command = "SELECT * FROM $table"; if($where != null) {

$command .= " WHERE $where"; }

$query = mysqli_query($db, $command) or die ($db->error); return $query;

mysqli_close($db); }

?>

7. Form berita.php

<div class="row">

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

<h4 class="page-head-line">Halaman Berita / Info</h4> </div>

</div>

<div class="row"> <div class="col-md-5"> <div class="notice-board">

<div class="panel panel-default"> <div class="panel-heading">

Daftar Berita (klik judul untuk membaca isi) <div class="pull-right" >

<div class="dropdown">

<button class="btn btn-success dropdown-toggle btn-xs" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> <span class="glyphicon glyphicon-cog"></span>

<span class="caret"></span> </button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

<li role="presentation"><a role="menuitem" tabindex="-1" href="">Refresh</a></li>

</ul> </div> </div> </div>

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

<?php

(18)

while($data_berita = mysqli_fetch_array($sql_berita)) { ?> <li>

<?php

if(@$_GET['hal'] == 'daftar') { ?>

<a href="?hal=daftar&page=berita&action=detail&id_berita=<?php echo $data_berita['id_berita']; ?>">

<?php

} else { ?>

<a href="?page=berita&action=detail&id_berita=<?php echo $data_berita['id_berita']; ?>">

<?php

} ?>

<span class="glyphicon glyphicon-align-left text-success" ></span> <?php echo $data_berita['judul']; ?> 

</a> </li> <?php

} ?> </ul>

</div> </div> </div> </div>

<?php

if(@$_GET['action'] == 'detail') { ?>

<div class="col-md-7"> <div class="notice-board">

<div class="panel panel-default">

<div class="panel-heading">Detail Berita</div> <div class="panel-body">

<?php

$sql_berita_detail = mysqli_query($db, "SELECT * FROM tb_berita WHERE id_berita = '$_GET[id_berita]'") or die($db->error); $data_berita_detail =

mysqli_fetch_array($sql_berita_detail); ?>

<h3 align="center"><?php echo $data_berita_detail['judul']; ?></h3> By : <span class="label label-warning">

<?php

if($data_berita_detail['penerbit'] == 'admin') { echo "Admin";

} else {

$sql_pengajar = mysqli_query($db, "SELECT * FROM tb_pengajar WHERE id_pengajar = '$data_berita_detail[penerbit]'") or die($db->error);

$data_pengajar = mysqli_fetch_array($sql_pengajar); echo $data_pengajar['nama_lengkap'];

(19)

<span class="label label-info"><?php echo

tgl_indo($data_berita_detail['tgl_posting']); ?></span> <hr />

<div>

<?php echo nl2br($data_berita_detail['isi']); ?> </div>

</div> </div> </div> </div> <?php } ?> </div>

8. Form logout.php

<?php

@session_start();

if(@$_GET['sesi'] == 'admin') { @$_SESSION['admin'] = null;

echo "<script>window.location='../admin';</script>"; } else if(@$_GET['sesi'] == 'pengajar') {

@$_SESSION['pengajar'] = null;

echo "<script>window.location='../admin';</script>"; } else if(@$_GET['sesi'] == 'siswa') {

@$_SESSION['siswa'] = null;

echo "<script>window.location='../';</script>"; }

?>

9. Form Index Admin (index.php)

<?php

@session_start();

include "../+koneksi.php";

if(@$_SESSION['admin'] || @$_SESSION['pengajar']) { ?>

<head>

<title><?php cek_session("Halaman Administrator", "Halaman Pengajar"); ?> e-Learning</title>

(20)

.link:hover { cursor:pointer; } </style>

</head> <body>

<script

src="style/assets/js/dataTables/jquery.dataTables.js"></script> <script

src="style/assets/js/dataTables/dataTables.bootstrap.js"></script> <script src="style/assets/js/custom-scripts.js"></script>

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

</button>

</div>

<i class="fa fa-comment fa-fw"></i> New User

</a> </li>

(21)

<li>

<i class="fa fa-envelope fa-fw"></i> Message Sent <span class="pull-right text-muted small">4 min</span> </div>

</a> </li>

<a class="text-center" href="#"> <strong>See All Alerts</strong> <i class="fa fa-angle-right"></i> </a>

</li> </ul> </li> -->

<?php

if(@$_SESSION['admin']) {

$sesi_id = @$_SESSION['admin']; $level = "admin";

} else if(@$_SESSION['pengajar']) { $sesi_id = @$_SESSION['pengajar']; $level = "pengajar";

} if($level == 'admin') {

$sql_terlogin = mysqli_query($db, "SELECT * FROM tb_admin WHERE id_admin = '$sesi_id'") or die ($db->error); } else if($level == 'pengajar') {

$sql_terlogin = mysqli_query($db, "SELECT * FROM tb_pengajar WHERE id_pengajar = '$sesi_id'") or die

($db->error);

}

$data_terlogin = mysqli_fetch_array($sql_terlogin);

echo ucfirst($data_terlogin['username']); ?>

<a href="?hal=editprofil"><i class="fa fa-user fa-fw"></i> Edit Profil</a>

</li>

(22)

<a href="<?php cek_session('../inc/logout.php?sesi=admin',

'../inc/logout.php?sesi=pengajar'); ?>"><i class="fa sign-out fa-fw"></i> Logout</a>

</li> </ul> </li> </ul> </nav>

<a class="<?php if(@$_GET['page'] == '') { echo 'active-menu'; } ?>" href="./"><i class="fa fa-dashboard"></i> Dashboard</a>

</li> <?php

if(@$_SESSION['admin']) { ?> <li>

<a href="#"><i class="fa fa-sitemap"></i> Manajemen<span class="fa arrow"></span></a>

<a href="?page=pengajar" class="<?php if(@$_GET['page'] ==

'pengajar') { echo 'active-menu'; } ?>">- Manajemen Pengajar</a> </li>

<li>

<a href="?page=siswa" class="<?php if(@$_GET['page'] == 'siswa') { echo 'active-menu'; } ?>">- Manajemen Siswa</a>

</li> <li>

<a href="?page=siswaregistrasi" class="<?php if(@$_GET['page'] == 'siswaregistrasi') { echo 'active-menu'; } ?>">- Registrasi Siswa</a> </li>

</ul> </li> <?php

} ?> <li>

<a class="<?php if(@$_GET['page'] == 'kelas') { echo 'active-menu'; } ?>" href="?page=kelas"><i class="fa fa-table"></i> Manajemen

Kelas</a> </li> <li>

<a class="<?php if(@$_GET['page'] == 'mapel') { echo 'active-menu'; } ?>" href="?page=mapel"><i class="fa fa-fw fa-file"></i> Mata

Pelajaran</a> </li>

(23)

<a class="<?php if(@$_GET['page'] == 'materi') { echo 'active-menu'; } ?>" href="?page=materi"><i class="fa fa-qrcode"></i> Materi</a> </li>

<li>

<a class="<?php if(@$_GET['page'] == 'berita') { echo 'active-menu'; } ?>" href="?page=berita"><i class="fa fa-desktop"></i> Berita</a> </li>

<li>

<a class="<?php if(@$_GET['page'] == 'berita') { echo 'active-menu'; } ?>" href="?page=berita"><i class="fa fa-desktop"></i> Berita</a> </li>

</ul> </div> </nav>

<div id="page-wrapper"> <div id="page-inner"> <?php

if(@$_GET['page'] == '') { include "inc/dashboard.php";

} else if(@$_GET['page'] == 'pengajar') { include "inc/pengajar.php";

} else if(@$_GET['page'] == 'siswaregistrasi') { include "inc/siswaregistrasi.php";

} else if(@$_GET['page'] == 'siswa') { include "inc/siswa.php";

} else if(@$_GET['page'] == 'kelas') { include "inc/kelas.php";

} else if(@$_GET['page'] == 'mapel') { include "inc/mapel.php";

} else if(@$_GET['page'] == 'materi') { include "inc/materi.php";

} else {

echo "<div class='col-xs-12'><div class='alert alert-danger'>[404] Halaman tidak ditemukan! Silahkan pilih menu yang ada!</div></div>"; } ?>

</div> </div> </div> </body> </html> <?php } else {

include "login.php"; }

(24)

10. Form Login Admin (login.php)

<?php

@session_start();

if(@$_SESSION['admin'] || @$_SESSION['pengajar']) { echo "<script>window.location='./';</script>"; } else {

?>

<head>

<title>Login Admin</title>

body{

background: #eee url('style/assets/img/backadmin.png'); }

html,body{

position: relative; height: 100%;

}

.login-container{ position: relative; width: 300px;

margin: 80px auto;

padding: 20px 40px 40px; text-align: center; background: #fff;

border: 1px solid #ccc; }

#output{

position: absolute; width: 300px;

top: -75px; left: 0; color: #fff; }

#output.alert-success{

background: rgb(25, 204, 25); }

#output.alert-danger{

background: rgb(228, 105, 105); }

(25)

content: "";

position: absolute;

width: 100%;height: 100%; top: 3.5px;left: 0;

(26)

-webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); border: 1px solid #ccc;

}

.login-container::after{ top: 5px;

z-index: -2;

-webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); }

.avatar{

width: 100px;height: 100px; margin: 10px auto 30px; border-radius: 100%; border: 2px solid #aaa; background-size: cover; }

.form-box input{ width: 100%; padding: 10px; text-align: center; height:40px;

border: 1px solid #ccc;; background: #ccddee;

transition:0.2s ease-in-out; }

.form-box input:focus{ outline: 0;

background: #eee; }

.form-box input[type="text"]{ border-radius: 5px 5px 0 0; }

.form-box input[type="password"]{ border-radius: 0 0 5px 5px;

border-top: 0; }

.form-box button.login, .form-box button.continue{ margin-top:15px;

padding: 10px 20px; }

(27)

-webkit-animation-duration: 3s; animation-duration: 1s;

-webkit-animation-fill-mode: both; animation-fill-mode: both;

}

@-webkit-keyframes fadeInUp { 0% {

opacity: 0;

-webkit-transform: translateY(20px); transform: translateY(20px);

} 100% { opacity: 1;

-webkit-transform: translateY(0); transform: translateY(0);

} }

@keyframes fadeInUp { 0% {

opacity: 0;

-webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px);

} 100% { opacity: 1;

-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);

} }

.fadeInUp {

-webkit-animation-name: fadeInUp; animation-name: fadeInUp;

}

</style> </head>

<body>

<input name="user" type="text" placeholder="username"> <input name="pass" type="password" placeholder="password"> <button class="btn btn-info btn-block login"

(28)

<button class="btn btn-info btn-block continue" style="display:none;">Continue</button>

</div> </div> </div>

var user = $("input[name=user]"); var pass = $("input[name=pass]"); function proses_login() {

if(user.val() == "") {

$("#output").removeClass('alert alert-success'); $("#output").addClass("alert alert-danger animated fadeInUp").html("Username tidak boleh kosong");

user.focus();

} else if(pass.val() == "") {

$("#output").removeClass('alert alert-success'); $("#output").addClass("alert alert-danger animated fadeInUp").html("Password tidak boleh kosong");

pass.focus(); } else {

$.ajax({

url : 'inc/proses_login.php', type : 'post',

data : 'user='+user.val()+'&pass='+pass.val(), success : function(msg) {

if(msg == 'sukses') {

$("#output").addClass("alert alert-success animated fadeInUp").html("Selamat datang " + "<span><b><i>" + user.val() + "</i></u></span>");

$("#output").removeClass('alert-danger'); $("input").hide();

$('button[type="submit"]').hide(); $(".continue").fadeIn(1000);

$(".avatar").css({ "background-image": "url('style/assets/img/avatar.png')"

});

} else if(msg == 'akun tidak aktif') {

$("#output").removeClass('alert alert-warning'); $("#output").addClass("alert alert-danger animated fadeInUp").html("Login gagal, akun Anda tidak aktif");

} else if(msg == 'gagal') {

$("#output").removeClass('alert alert-success'); $("#output").addClass("alert alert-danger animated fadeInUp").html("Login gagal, coba lagi");

} }

(29)

$('button[type="submit"]').click(function(e) { e.preventDefault();

proses_login(); });

$(pass).keyup(function(e){ if(e.keyCode == 13) {

proses_login(); }

});

$(function(){

$(".continue").click(function() { window.location='./';

}); });

</script>