Sistem Informasi Penerimaan Mahasiswa Baru Berbasis Web Dengan Menggunakan PHP Dan MySQL Pada SMA Negeri 1 Talawi

(1)

KEMENTERIAN PENDIDIKAN KEBUDAYAAN

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA)

Jl. Bioteknologi No. 1 Kampus USU Telp. (061) 8211050 Fax (061) 8214290 MEDAN – 20155, Email : [email protected]

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : WAHYU RAMADHAN

Nomor Induk Mahasiswa : 102406085

Judul Tugas Akhir : Sistem Informasi Penerimaan Siswa Baru Berbasis Web dengan

Menggunakan PHP dan MySQL pada SMA Negeri 1 Talawi

Dosen Pembimbing : Dra. Mardiningsih, M.Si

Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No Tanggal

Bimbingan

Materi Paraf Dosen

Pembimbing

Keterangan

1 2 3 4 5 6

* Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui: Disetujui

Departemen Matematika FMIPA USU Pembimbing Utama/

Ketua, Penanggung Jawab

(2)

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program Diploma 3 Teknik Informatika/Statistika :

Nama : Wahyu Ramadhan

NIM : 102406085

Prog. Studi : Teknik Informatika

Judul TA : Sistem Informasi Penerimaan Siswa Baru Berbasis Web dengan Menggunakan PHP dan MySQL pada SMA Negeri 1 Talawi

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada

tanggal ……….

Dengan Hasil : Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Juli 2013 Dosen Pembimbing

Program Studi D3 Teknik Informatika

(3)

DINAS PENDIDIKAN

KABUPATEN BATU BARA

SMA NEGERI 1 TALAWI

Jln. Besar Desa Pahang Kec. Talawi Kab. Batu Bara Telp. 0623-51197

S U R A T K E T E R A N G A N

Nomor: 420 / 30 – SMA / 2013

Yang bertanda tangan di bawah ini. Kepala Sekolah SMA Negeri 1 Talawi menerangkan bahwa:

Nama : Wahyu Ramadhan

Nim : 102406085

Jurusan : Diploma 3 Teknik Informatika

Program Study : Teknik Informatika

Adalah benar telah mengadakan penelitian di SMA Negeri 1 Talawi pada tanggal 09 Maret 2013 s/d 17 Maret 2013 dengan judul:

“ SISTEM INFORMASI PENERIMAAN SISWA BARU BERBASIS WEB DENGAN MENGGUNAKAN PHP DAN MYSQL PADA SMA NEGERI 1 TALAWI “

Demikian Surat Keterangan ini diperbuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.

Labuhanruku, 17 Maret 2013 Kepala SMA Negeri 1 Talawi,

DRS. ZAINAL ARIFIN PEMBINA

(4)

LISTING PROGRAM

1. User Interface

a. home.php <html> <head>

<body>

<p class="judul-besar">PSB ONLINE</p>

<p class="judul-kecil">Penerimaan Siswa Baru</p> <p class="sub-judul-menu">

<?php

error_reporting('0'); echo"HOME"; ?>

</p> </div>

<a href="menu/profil/profil.php?menu=menu2">PROFIL</a> </li>

<?php

include('koneksi/koneksi.php'); $query="select *from galery"; $data=mysql_query($query); $data2=mysql_fetch_array($data); ?>

<li>

<a href="menu/galeri/galeri.php?gambar=<?php echo $data2['id_gambar']; ?>">GALERI</a> </li>

<li>

(5)

</a> </li> <li>

<a href="menu/cara-daftar/cara-daftar.php?menu=menu5"> CARA MENDAFTAR</a>

</li> <li>

<a href="menu/daftar/daftar.php?menu=menu6"> DAFTAR</a>

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

<?php

include('slider.htm'); ?>

</div> </div>

<?php

include('menu/home.php'); ?>

</div>

</div> </div>

@WahyuTurtlebay </div>

(6)

b. profil.php <html> <head>

<body>

<?php

error_reporting('0'); echo"PROFIL"; ?>

</p> </div>

<li><a href="../../home.php?menu=menu1">HOME</a></li> <li><a href="profil.php?menu=menu2">PROFIL</a></li> <?php

include('../../koneksi/koneksi.php'); $query="select *from galery"; $data=mysql_query($query); $data2=mysql_fetch_array($data); ?>

<li>

<a href="../galeri/galeri.php?gambar=<?php echo $data2['id_gambar']; ?>">GALERI</a>

</li> <li>

<a href="../staffpengajar/staffpengajar.php?menu=menu4"> STAFF PENGAJAR</a>

</li> <li>

<a href="../cara-daftar/cara-daftar.php?menu=menu5"> CARA MENDAFTAR</a>

</li> <li>

<a href="../daftar/daftar.php?menu=menu6"> DAFTAR</a>

(7)

</div> </div>

<?php

$menu=$_GET['menu']; if($menu=='menu2'){

include('halamanprofil.php'); }

elseif ($menu=='isi' && $id==$id) { include('isi.php');

} ?> </div>

</div> </div>

(8)

c. galeri.php <html> <head>

<body>

<?php

error_reporting(0); echo"GALERI"; ?>

</p> </div>

<li><a href="../../home.php?menu=menu1">HOME</a></li> <li><a href="../profil/profil.php?menu=menu2">PROFIL</a></li> <?php

<li><a href="../galeri/galeri.php?gambar=<?php echo $data2['id_gambar']; ?>">GALERI</a>

</li>

<li><a href="../staffpengajar/staffpengajar.php?menu=menu4"> STAFF PENGAJAR</a>

</li>

<li><a href="../cara-daftar/cara-daftar.php?menu=menu5"> CARA MENDAFTAR</a></li>

<li><a href="../daftar/daftar.php?menu=menu6"> DAFTAR</a>

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

(9)

<div class="wrapper-galeri"> <div class="isi-galeri"> <div class="galeri-kiri"> <?php

include('../../koneksi/koneksi.php'); $query="select *from galery"; $data=mysql_query($query);

while ( $data2=mysql_fetch_array($data)) { echo "

<a href=\"galeri.php?gambar=".$data2['id_gambar']."\"> <img id=\"g-k\" src=\"sekolah/

".$data2['nama_gambar']."\"> </a>

</div> ";

} ?> </div>

<div class="galeri-kanan"> <?php

include('../../koneksi/koneksi.php'); $gambar=$_GET['gambar'];

$query="select *from galery where id_gambar='$gambar'"; $data=mysql_query($query);

$data2=mysql_fetch_array($data); echo "

<img width=\"100%\" heigh=\"100%\" id=\"g-ka\" src=\"sekolah/".$data2['nama_gambar']."\" > ";

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

</div> </div>

ONLINE SMA Negeri 1 TALAWI by: Wahyu Ramadhan, @WahyuTurtlebay </div>

(10)

d. staff-pengajar.php <html>

<head>

<body>

<?php

error_reporting('0');

echo"STAFF PENGAJAR"; ?>

</p> </div>

<a href="../profil/profil.php?menu=menu2">PROFIL</a> </li>

<?php

<li>

</li> <li>

<a href="staffpengajar.php?menu=menu4"> STAFF PENGAJAR</a>

</li>

<li><a href="../cara-daftar/cara-daftar.php?menu=menu5"> CARA MENDAFTAR</a>

</li> <li>

(11)

</div> </div>

<?php

$menu=$_GET['menu']; if ($menu=='detail') {

$id=$_GET['id'];

include("detailprofilstaff.php"); }

else{

include('kumpulanstaff.php'); }

?> </div>

</div> </div>

(12)

e. cara daftar <html> <head>

<body>

<?php

error_reporting('0');

echo"CARA MENDAFTAR"; ?>

</p> </div>

<a href="../../menu/profil/profil.php?menu=menu2">PROFIL</a> </li>

<?php

<li>

</li> <li>

STAFF PENGAJAR</a> </li>

<li><a href="cara-daftar.php?menu=menu5"> CARA MENDAFTAR</a>

</li>

(13)

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

<p id="judul-cara-mendaftar">CARA MENDAFTAR</p> <ol class="no">

<li>Calon Siswa SMA NEGERI 1 TALAWI harus mengisi Form pengisian Formulir Pendaftaran di menu

<a class="link" href="../daftar/daftar.php">DAFTAR</a> sesuai dengan Data yang sebenar-benarnya tanpa ada data

yang dimanipulasi. </li>

<li>Setelah mengisi semua data-data yang diperlukan, tekan tombol "Daftar" yang ada di sebelah kanan bawah form pengisian data.

</li>

<li>Setelah menekan tombol Daftar, jika berhasil calon Siswa akan Mendapatkan konfirmasi bahwa telah berhasil mencalonkan diri sebagai siswa di SMA Negeri 1 Talawi, jika tidak maka akan mendapatkan konfirmasi sebaliknya yaitu gagal mencalonkan diri di SMA Negeri 1 Talawi. </li>

<li>Di halaman konfirmasi, setelah siswa menekan tombol "Daftar", siswa akan mendapatkan Informasi kapan melihat pengumuman LULUS/TIDAK nya masuk SMA Negeri 1 Talawi.

</li>

<li>Halaman Pengumuman Dapat Dilihat di

<a class="link" href="../pengumuman/pengumuman.php"> http://LamanPengumuman.com</a>.

</li>

<li>di halaman <a class="link"

href="../pengumuman/pengumuman.php">http://LamanPengumu man.com</a> Calon Siswa akan Mendapatkan Infomasi kapan harus Mendaftar Ulang ke SMA Negeri 1 Talawi

</li>

<li>Itu saja Cara Mendaftar Online SMA Negeri 1 Talawi</li> </ol>

</div> </div>

(14)

ONLINE SMA Negeri 1 TALAWI by: Wahyu Ramadhan, @WahyuTurtlebay </div>

</div> </body> </html>

f. daftar.php <html> <head>

<body>

<?php

error_reporting('0'); echo"DAFTAR"; ?>

</p> </div>

<li><a href="../../home.php?menu=menu1">HOME</a></li> <li><a href="../profil/profil.php?menu=menu2">PROFIL</a></li>

<?php

<li><a href="../galeri/galeri.php?gambar=<?php echo $data2['id_gambar']; ?>">GALERI</a></li> <li>

<a href="../staffpengajar/staffpengajar.php?menu=menu4"> STAFF PENGAJAR</a>

(15)

<li>

<a href="../cara-daftar/cara-daftar.php?menu=menu5"> CARA MENDAFTAR</a>

</li>

<li><a href="daftar.php?menu=menu6">DAFTAR</a></li> </ul>

</div> </div>

<?php

$menu=$_GET['menu']; if($menu=='halaman-2'){

include('berhasilDaftar.php'); }

elseif ($menu=='halaman-3') { include('databenar.php'); }

elseif ($menu=='detail') { include('cekdata.php'); }

elseif ($menu=='edit') {

include('editpendaftar.php'); }

elseif ($menu=='berhasiledit') { include('berhasileditdata.php'); }

else{

include('formdaftar.php'); }

?> </div>

</div> </div>

Ramadhan, @WahyuTurtlebay </div>

</div> </body>

(16)

g. Style.css body{

margin: 0px; padding: 0px; }

@font-face{

font-family: fontC;

src: url('../font/fontC/fontC.ttf') ; }

@font-face{

font-family: fontB;

src: url('../font/fontB/fontB.ttf') ; }

@font-face{

font-family: fontD;

src: url('../font/fontD/fontD-Light.ttf') ; }

.wrapper{

width: 100%; height: 100%; }

.wrapper .header{ width: 1100px; height: 200px; }

.wrapper .header .gambar-kiri{ width: 250px;

height: 200px; float: left; }

.wrapper .header .judul-header{ margin-left: 0px;

width: 850px; height: 100px; float: left; }

.wrapper .header .judul-header p.judul-besar{ margin: 0px;

padding: 0px;

font-family: GulimChe; font-size: 40pt;

}

.wrapper .header .judul-header p.judul-kecil{ margin: 0px;

margin-left:118px; padding: 0px;

(17)

font-size: 10pt; }

.wrapper .header .judul-header p.sub-judul-menu{ margin-top: 10px;

text-align: center; padding: 0px;

font-family: GulimChe; font-size: 25pt;

}

.wrapper .header .menu{ width: 850px; height: 100px; float: left; }

.wrapper .header .menu ul.menu-menu{ text-decoration: none;

margin-left: 10px;

padding: 40px 0px 0px 0px; width: 100%;

height: 60px; }

.wrapper .header .menu ul.menu-menu li{ text-decoration: none;

list-style-type: none; display: inline; margin: 0px 24px; font-family: GulimChe; font-size: 15pt;

}

.wrapper .header .menu ul.menu-menu li a{ list-style-type: none;

text-decoration: none; color: black;

}

.wrapper .header .menu ul.menu-menu li a:hover{ text-decoration: underline;

color: #13e8d6; }

.wrapper .gambar{ width: 100%; height: 400px;

background: #34c2e0; }

(18)

.wrapper .garis{ width: 63%; position: absolute;

border: 1px solid #d5d5d5; margin-left: 240px;

}

.wrapper .content{ margin-top: 20px; width: 1110px; float: right; }

.wrapper .content .isi{ width: 850px; float: left; }

.clear{

clear: both; }

.wrapper .content .gambar-kanan{ width: 250px;

height: 400px; float: right; }

.wrapper .footer{ width: 100%; height: 35px;

background: #f2f2f2; float: left;

text-align: center; padding-top: 20px; font-family: fontC; font-size: 15pt; }

/* Style Cara Mendaftar */ .content .isi .cara-mendaftar{

margin: auto; margin-top: 25px; width: 800px; }

.content .isi .cara-mendaftar p#judul-cara-mendaftar{ text-align: center;

font-family: fontB; font-size: 20pt; }

.content .isi .cara-mendaftar ol.no{ font-size: 15pt;

(19)

.content .isi .cara-mendaftar ol.no li{ margin-bottom: 20px;

line-height: 1.5em; }

.content .isi .cara-mendaftar ol.no li a.link{ color: orange;

font-family: Gulimche; }

.content .isi .cara-mendaftar ol.no li a.link:hover{ color: #13e8d6;

}

/*Style Form Pendaftaran*/ .content .isi .wrapper-luar{

width: 800px; margin: auto; padding: 40px; }

.content .isi .wrapper-luar .table{ margin: auto;

margin-bottom: 40px; }

.content .isi .wrapper-luar .table th#judul{ font-family: fontB;

font-size: 17pt;

padding-bottom: 20px; }

.content .isi .wrapper-luar .table tr{ font-family: fontC;

font-size: 17pt; }

.content .isi .wrapper-luar .table tr td{ padding-bottom: 20px;

}

.content .isi .wrapper-luar .table tr td#kolom1{ text-align: left;

padding-right: 40px; color: #13e8d6; }

.content .isi .wrapper-luar .table tr td#kolom2 input{ font-family: fontC;

font-size: 15pt; border-radius: 4px; height: 30px; }

.content .isi .wrapper-luar .table tr td#kolom2 select{ font-family: fontC;

(20)

height: 30px; }

.content .isi .wrapper-luar .table tr td#kolom2-1 input{ background: #13e8d6;

border-radius: 8px; height: 40px; font-family: fontC; font-size: 15pt; padding-right: 30px; padding-left: 30px; float: right;

color: white; }

.content .isi .wrapper-luar .table tr td#kolom2-1 input:hover{

background: -webkit-linear-gradient(#13e8d6,white);

background: -moz-linear-gradient(#13e8d6, #64b4eb);

}

.content .isi .wrapper-luar .table tr td#kolom2 textarea{ border-radius: 4px;

} .content .isi .berhasil-daftar{

width: 700px; margin: auto; }

.content .isi .berhasil-daftar p{ font-family: fontC; font-size: 25pt; text-align: center; }

.content .isi .berhasil-daftar p#nama{ text-align: center;

font-size: 30pt; font-weight: bold; }

/*Style untuk Galeri*/ .content .isi .wrapper-galeri{

width: 100%; height: 75%;

(21)

.content .isi .wrapper-galeri .isi-galeri{ width: 98%;

border-radius: 4px; }

.content .isi .wrapper-galeri .galeri-kiri{ margin-left: 20px;

width: 25%; height: 100%; float: left; overflow: scroll; overflow-x:hidden; }

.content .isi .wrapper-galeri .galeri-kiri .gambar{ width: 100%;

height: 170px;

margin-bottom: 10px; .gambar img#g-k{

width: 200px; height: 170px; border-radius: 6px; }

.content .isi .wrapper-galeri .galeri-kanan{ width: 72%;

height: 100%; float: left;

background: #f2f2f2; }

.galeri-kanan img#g-ka{ width: 100%; height: 100%; border-radius: 5px; }

/*Style untuk Staff Pengajar*/ .content .isi .wrapper-staff{

width: 100%;

background: #dfe3e4; margin-bottom: 20px; border-radius: 4px; padding-top: 2px; float: left;

}

/*Style Staff untuk Kumpulan Staff*/ .content .isi .blok{

width: 200px; height: 200px; float: left;

(22)

border-radius: 4px; text-align: left;

text-transform: capitalize; }

.blok a#link-s{

text-decoration: none; color: rgb(192, 192, 192); }

.blok a#link-s:hover{

color: rgb(66, 233, 233); }

.content .isi .blok img#foto{ width: 200px;

height: 150px;

background: #e6e6e6; border-radius: 4px; }

/*Style Staff untuk halaman Profil*/ .content .isi .wrapper-staff .wrapper-kaca{

height: 500px; margin: 50px; width: 430px; background:#f2f2f2; border-radius: 4px; opacity: 0.6; position: relative; float: left;

}

.wrapper-staff .isi-kaca{ height: 400px;

margin: 50px 0px 10px 75px; width: 400px;

border-radius: 4px; position: absolute; float: left;

}

.wrapper-staff .isi-kaca p.judul-profil-staff{ font-family: Lucida Sans Unicode; font-size: 20pt;

}

.isi-kaca table#d-s{ margin-top: 60px; height: 200px;

font-family: Lucida Sans Unicode; font-size: 10pt;

}

(23)

text-align: left; padding-right: 40px; }

/*Style untuk PROFIL*/ .content .isi .wrapper-profil{

width: 100%; }

.wrapper-profil #kotak{ width: 100%;

background: rgb(243, 242, 242); margin-bottom: 20px;

float: left; }

#kotak p#judul{

text-transform: uppercase; text-align: center;

font-size: 15pt; }

#kotak p{

font-family: calibri; }

#kotak button#l-b{ width: 90px; height: 30px; float: right;

margin-right: 50px; margin-bottom: 10px; border: none;

background: rgb(49, 228, 243); border-radius: 4px;

color: white; cursor: pointer; }

#kotak button#l-b:hover{ background: red; border-radius: 4px; }

.isi-profil p#judul-isi-profil{ font-family: fontC; font-size: 15pt; }

/*Style Untuk isi Sma*/ .content .isi .isi-p{

(24)

.content .isi .isi-p p#judul-sejarah{ font-family: fontB;

font-size: 20pt; text-align: center; }

.content .isi .isi-p p{ font-family: fontB; font-size: 15pt; text-align: justify; line-height: 2em; }

.content .isi .isi-p ol#list{ font-family: fontC; font-size: 15pt; text-align: justify; line-height: 1em; }

.content .isi .isi-p ol#list li p#head{ color: #34c2e0;

margin:0px; }

/*Style Untuk isi Visi-Misi*/ .content .isi .isi-p{

width: 100%; }

.content .isi .isi-p p#judul-visi-misi{ font-family: fontB;

.content .isi .isi-p p#sub-judul-visi-misi{ font-family: fontB;

font-size: 17pt; text-align: left; color: #34c2e0; }

.content .isi .isi-p p#isi-visi-misi{ font-family: fontC; font-size: 15pt; text-align: justify; line-height: 1em; color: orange; }

(25)

.content .isi .isi-p ol#list{ font-family: fontC; font-size: 15pt; text-align: justify; line-height: 2em; color: orange; }

/*Style Untuk Tujuan*/ .content .isi .isi-p{

width: 100%; }

.content .isi .isi-p p#judul-tujuan{ font-family: fontB;

.content .isi .isi-p p#sub-judul-tujuan{ font-family: fontB;

font-size: 17pt; text-align: left; color: #34c2e0; }

.content .isi .isi-p p#isi-tujuan{ font-family: fontC; font-size: 15pt; text-align: justify; line-height: 1em; color: orange; }

.content .isi .isi-p p{ font-family: fontC; font-size: 15pt; text-align: justify; line-height: 1.5em; }

.content .isi .isi-p ol#list{ font-family: fontC; font-size: 15pt; text-align: justify; line-height: 2em; }

/*Style Untuk Cek Data Siswa*/ .content .isi .wrapper-data-siswa{

width: 99%;

(26)

.content .isi .wrapper-data-siswa p#judul-data-siswa{ text-align: center;

font-family: fontB; font-size: 17pt;

text-decoration: underline; }

.content .isi .wrapper-data-siswa p{ font-family: fontC;

.content .isi .wrapper-data-siswa img{ background: green;

width: 20%; height: 200px; float: left;

border-radius: 5px; margin-right: 5%; margin-left: 20px; }

.content .isi .wrapper-data-siswa table.tabel-cek-data{ /*border: 1px solid black;*/

width: 600px; font-family: fontC; font-size: 15pt; }

.content .isi .wrapper-data-siswa table.tabel-cek-data tr{ height: 35px;

}

.content .isi .wrapper-data-siswa table.tabel-cek-data tr td#kolom1{

width: 250px; }

.content .isi .wrapper-data-siswa table.tabel-cek-data tr td#kolom2{

width: 350px; }

/*home*/ .isi #w-h{

margin: auto; width: 600px;

(27)

#w-h p#judul{

font-family: fontC; font-size: 20pt; text-align: center; }

#w-h p{

(28)

2. Halaman admin

a. admin.php <?php

error_reporting(0); include('fungsi.php'); session_start();

$user=$_SESSION['nama']; $passw=$_SESSION['pass'];

if(!empty($user) and !empty($passw)){ ?>

<body>

<p>PSB ONLINE</p>

<p id="sub">Penerimaan Siswa Baru</p> </div>

<p>HALAMAN ADMIN</p> </div>

</div>

</div>

<a href="menu/profil/profil.php?awal=profil"><img id="gambar" src="icon/building.png?awal=profil">Profil</a>

<a id="galeri" href="menu/galery/galery.php?awal=galeri"><img id="gambar-galeri" src="icon/gallery-icon.png">Galeri</a> <a id="staff" href="menu/staff/staff.php?awal=staff"><img id="gambar-staff" src="icon/staff6.png">staff</a>

<a id="cara-daftar" href="menu/daftar-ulang/daftar-ulang.php?action=daftar"><img id="gambar-cara-daftar" src="icon/cara-daftar2.png">Daftar Ulang</a>

<a id="daftar" href="menu/daftar/daftar.php?awal=daftar"><img id="gambar-daftar" src="icon/icon-register.png">Daftar</a> <a id="admin"

(29)

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

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

echo "belum login"; }

?>

b. fungsi.php <?php

error_reporting(0); session_start();

$username=$_SESSION['nama']; $password=$_SESSION['pass']; $logout=$_GET['logout']; if(empty($username))

echo "login dahulu";

// header('location:gagal-login/warning.php'); if(isset($logout))

{

session_start(); session_destroy();

header('location: login-admin.php?logout'); }

require_once '../koneksi/koneksi.php'; ?>

c. login.php <?php

session_start();

(30)

$sql= "select * from admin where Nama='$username' and password='$password' "; $userquery = mysql_query($sql) or die(mysql_error());

if (mysql_num_rows($userquery) == 1) { header("location:admin.php"); $valid = true;

session_start();

$_SESSION['nama']=$username; $_SESSION['pass']=$password; }

if ($valid == false) {

echo "login dahulu";

// header("Location:gagal-login/warning.php"); }

?>

d. style admin.css body{

margin: 0px; padding: 0px; }

.wrapper-admin{ width: 100%; height: 100%; }

.wrapper-admin .head{ width: 100%; height: 150px; }

.head #logo{

width: 500px; height: 150px; position: relative; float: right; }

#logo p{

margin: auto; font-size: 38pt;

font-family: gulimche; text-align: right; padding-right: 100px; }

#logo p#sub{

(31)

left: -5px; }

#logo p#sekolah{ font-size: 20pt; position: relative; left: -120px; }

.head #judul{

width: 300px; margin: auto; height: 50px; padding-top: 80px; }

#judul p{

font-size: 20pt;

font-family: gulimche; text-align: center; }

.wrapper-admin .content{ width: 100%; }

.content #kiri{ margin: auto; width: 1330px; margin-top: 20px; }

#kiri #gambar-logout{ width: 50px; height: 50px;

border-radius: 100px;

background: rgb(70, 175, 245); float: right;

margin-right: 150px; }

#gambar-logout img#logout{ width: 50px;

height: 50px; position: relative; }

#kiri #lingkaran{ margin: auto; width: 500px; height: 500px;

(32)

}

#lingkaran a{

position: relative; margin-left: 160px; top: 75px;

color: white; }

#lingkaran img#gambar{ width: 70px; height: 70px; position: relative; top: -70px; left: 55px;

margin-bottom: -50px; }

#lingkaran a#galeri{

color: white; }

#lingkaran img#gambar-galeri{ width: 70px;

height: 70px; position: relative; top: -70px; left: 50px;

#lingkaran a#staff{

color: white; }

#lingkaran img#gambar-staff{ width: 70px;

(33)

#lingkaran a#cara-daftar{ text-decoration: none; color: black;

color: white; }

#lingkaran img#gambar-cara-daftar{ width: 70px;

#lingkaran a#daftar{

position: relative; margin-left: -330px; top: 308px;

color: white; }

#lingkaran img#gambar-daftar{ width: 70px;

#lingkaran a#admin{

color: white; }

#lingkaran img#gambar-admin{ width: 70px;

(34)

top: -70px; left: 60px;

#lingkaran #lingkaran-dalam{ margin: auto;

width: 300px; height: 300px;

border-radius: 1000px; position: relative; top: 10px;

border:1px solid #d5d5d5; background: white;

}

#lingkaran-dalam a#home{ text-decoration: none; color: black;

}

#lingkaran-dalam img#gambar-home{ width: 160px;

.wrapper-admin .footer{ width: 100%; margin-top: 50px; float: left;

}

.footer p{

text-align: center; font-family: gulimche; }

/*Style Untuk Login Admin*/ #kiri #login{

margin: auto; width: 500px; height: 220px;

background: rgb(70, 175, 245); margin-top: 120px;

(35)

#login img#gambar1{ width: 100px; height: 100px; position: relative; margin-top: -200px; top: 100px;

left: 200px; }

#login #gambar-luar-login{ width: 90px;

background: rgb(70, 175, 245); margin-bottom: -50px;

}

#gambar-luar-login img#gambar{ width: 50px;

height: 50px; position: relative; top: 20px;

left: 25px; }

#login img#gambar-login{ width: 90px; height: 100px;

margin-bottom: -100px; margin-left: 50px; }

#login table#isi-login{ margin: auto; padding-top: 20px; width: 400px; height: 150px; }

table#isi-login tr{

position: relative; top: -50px; }

table#isi-login td{ color: white; }

(36)

left: 90px; top: -20px; }

table#isi-login td#input{ font-family: gulimche; position: relative; left: 100px; top: -20px; }

td#input input{

border-radius: 4px; height: 30px; }

table#isi-login td#masuk{ position: relative; right: 30px; }

td#masuk input{

height: 30px; width: 80px; cursor: pointer; }

td#masuk input:hover{

background: rgb(181, 240, 29); }

/*Style Untuk Galery*/ #kiri #isi{

width: 100%; padding-top: 50px; }

#kiri #gambar-galery{ width: 70px; height: 70px;

border-radius: 100px;/*

background: rgb(70, 175, 245);*/ float: left;

margin-left: 150px; }

#gambar-galery img#galery{ width: 60px;

height: 60px; position: relative; }

#kiri a#link{

(37)

}

#kiri a#link:hover{

color: rgb(70, 175, 245); }

#kiri p#sub-judul{ position: relative; top: -35px; left: 220px;

font-family: gulimche; font-size: 14pt;

text-transform: uppercase; }

#isi #isi-dalam{ margin: auto; margin-top: 50px; width: 900px;

border-top: 1px solid rgb(70, 175, 245); border-left: 1px solid rgb(70, 175, 245); padding-top: 0px;

padding-bottom: 25px; float: left;

}

#isi #isi-dalam-lagi{ margin: auto; width: 850px; background: white; }

#isi-dalam-lagi #kiri-isi{ width: 50px; float: left;

margin-top: 180px; }

#kiri-isi p#tulisan1{ position: relative; left: -10px;

#kiri-isi p#tulisan2{ position: relative; left: -10px; }

#kiri-isi p#tulisan3{ position: relative; top: -5px;

}

#isi-dalam-lagi #logo-judul{ width: 60px;

(38)

margin: auto; }

#logo-judul a#link-galery{ text-decoration: none; color: black;

}

#logo-judul a#link-galery:hover{ color: rgb(70, 175, 245); }

#logo-judul img#icon-galery{ width: 50px;

left: 5px; }

#logo-judul p{

position: relative; font-size: 12pt;

font-family: gulimche; top: -40px;

left: 70px; }

#kiri-isi #tombol{ width: 50px; height: 50px;

position: relative; left: 0px;

top: 20px; }

/* GAMBAR Galery*/ #tombol img#gambar-kiri-edit{

width: 70px; height: 50px; position: relative; margin-bottom: 20px; left: -8px;

top: 2px; }

#tombol img#gambar-kiri-tambah{ width: 40px;

(39)

left: 5px; top: 5px; }

#tombol img#gambar-kiri-hapus{ width: 50px;

height: 40px; position: relative; margin-bottom: 20px; left: 0px;

top: 5px; }

/**/

/* GAMBAR Staff*/

#tombol img#gambar-kiri-lihat-staff{ width: 40px;

top: 5px; }

#tombol img#gambar-kiri-edit-staff{ width: 40px;

top: 5px; }

#tombol img#gambar-kiri-tambah-staff{ width: 40px;

top: 3px; }

#tombol img#gambar-kiri-hapus-staff{ width: 60px;

height: 50px; position: relative; margin-bottom: 20px; left: -2px;

top: 0px; }

/**/

/* GAMBAR Daftar*/

(40)

top: 5px; }

#tombol img#gambar-kiri-tambah-daftar{ width: 40px;

top: 3px; }

#tombol img#gambar-kiri-hapus-daftar{ width: 60px;

height: 50px; position: relative; margin-bottom: 20px; left: -2px;

top: 0px; }

**/

#kiri-isi a#link-kiri{ color: black;

text-decoration: none; }

#kiri-isi a#link-kiri:hover{ color: rgb(70, 175, 245); }

#kiri-isi p{

position: relative; font-family: gulimche; text-align: center; top: 10px;

}

#isi #kanan-isi{ width: 780px;

background: rgb(240, 242, 243); float: left;

margin-top: 60px; margin-left: 20px;

border-radius: 4px 4px 0px 0px;

/*background-image: url('../icon/gallery-icon.png'); background-repeat: no-repeat;*/

}

/*home*/

(41)

width: 700px; padding-left: 20px; padding-right: 20px; text-align: justify;

margin-top: 60px; margin-left: 20px;

border-radius: 4px 4px 0px 0px; font-family: Lucida Sans Unicode; font-size: 10pt;

/*background-image: url('../icon/gallery-icon.png'); background-repeat: no-repeat;*/

}

#kanan-isi-h strong{

text-transform: uppercase;

font-family: Lucida Sans Unicode; font-size: 12pt;

color: rgb(70, 175, 245); }

#kanan-isi-h li{

#kanan-isi-h img#g-h{ width: 30px; height: 30px; position: relative; margin-bottom: -10px; margin-left: 20px; }

/*akhir home*/

#kanan-isi #gambar-tengah{ width: 300px;

height: 300px; background: white; border-radius: 1000px; margin: auto;

opacity: 0.6; }

#gambar-tengah img#tengah{ width: 200px;

(42)

#kanan-isi table#isi-tabel{ width: 400px;

border: 1px solid #fff; border-collapse: collapse; margin: auto;

position: relative; margin-top: 20px; margin-bottom: 20px; font-family: gulimche; }

table#isi-tabel tr#kursor{ cursor: pointer; }

table#isi-tabel tr:hover{ background: #d5d5d5 }

table#isi-tabel th{

border: 1px solid #fff; border-collapse: collapse; color: white;

padding: 5px 10px 5px 10px; font-size: 14pt;

font-family: calibri;

table#isi-tabel td{

border: 1px solid #fff; border-collapse: collapse; padding: 5px 10px 5px 10px; }

/*Edit Data Galery*/ #kanan-isi #edit-galery{

width: 600px; margin: auto; }

#edit-galery img#gambar-g{ width: 150px;

height: 200px; position: relative; left: 170px; margin-top: 10px; border-radius: 4px; }

#edit-galery input#input-gambar{ position: relative;

margin-left: 180px; top: -5px;

(43)

#edit-galery p{ color: white;

font-family: gulimche; margin-left: 100px; margin-top: 40px; }

#edit-galery input#input-id_gambar{ height: 30px;

border-radius: 5px; position: relative; margin-top: -40px; margin-left: 200px; top: -60px;

}

#edit-galery input#edit{ position: relative; margin-top: 20px; margin-left: -75px; width: 70px; height: 30px; border-radius: 5px; cursor: pointer; }

#edit-galery input#edit:hover{

background: rgb(100, 240, 100); color: white;

} /**/

/* Tambah Data Galery*/

#kanan-isi #tambah-data-galery{ width: 100%;

#tambah-data-galery img#gambar-g{ width: 150px;

height: 200px; position: relative; left: 250px; margin-top: 10px; border-radius: 4px; }

#tambah-data-galery input#tambah-file{ position: relative;

margin-left: 260px; top: -5px;

}

(44)

position: relative; margin-left: 200px; margin-top: 50px; }

#tambah-data-galery input#id_gambar{ position: relative;

margin-left: 300px; height: 30px; border-radius: 5px; top: -45px;

}

#tambah-data-galery input#tambah{ position: relative;

margin-top: 10px; margin-left: -75px; border-radius: 5px; cursor: pointer; }

#tambah-data-galery input#tambah:hover{ background: rgb(100, 240, 100); color: white;

} /**/

/* Hapus Galery*/

#kanan-isi #hapus-galery{ width: 100%; }

#hapus-galery p{

position: relative; text-align: center; font-family: gulimche; font-size: 12pt;

}

input#jawaban-ya{ width: 65px; height: 25px; position: relative; margin-left: 405px;

background: rgba(255, 0, 194, 0.98); border-radius: 5px;

color: white; cursor: pointer; }

input#jawaban-tidak{ width: 65px; height: 25px; position: relative; margin-left: 20px;

(45)

border-radius: 5px; color: white; cursor: pointer; }

/**/

/*Style Untuk Staff*/

#kanan-isi table#isi-tabel-staff{ width: 100%;

border: 1px solid #333; border-collapse: collapse; margin: auto;

background: white; }

table#isi-tabel-staff tr#kursor{ cursor: pointer;

}

table#isi-tabel-staff tr#kursor:hover{ background: rgb(221, 247, 255); }

table#isi-tabel-staff th{ color: white;

border: 1px solid #333; border-collapse: collapse; font-family: calibri;

table#isi-tabel-staff td{

border: 1px solid #333; border-collapse: collapse; padding: 5px 10px; font-family: calibri; font-size: 8pt;

color: rgb(60, 58, 58); }

/*Style detail*/ #kanan-isi #detail{

width: 100%; }

#detail img#gambar-d{ width: 150px; height: 200px; border-radius: 4px; margin-left: 300px; margin-top: 10px; margin-bottom: 10px; }

(46)

}

#kiri-detail p{

font-family: calibri; font-weight: bold; }

#detail #kanan-detail{ width: 50%; float: left; }

#kanan-detail p{

/**

/*Style UNtuk Tambah*/ #kanan-isi #tambah-staff{

width: 100%; }

#tambah-staff img#gambar-d{ width: 150px;

height: 200px; border-radius: 4px; margin-left: 300px; margin-top: 10px; margin-bottom: 50px; }

#tambah-staff input#tambah-foto-staff{ position: relative;

top: -55px; }

#tambah-staff #kiri-detail-staff{ width: 50%;

float: left; }

#kiri-detail-staff p{ position: relative; left: 220px;

font-family: calibri; font-weight: bold; margin-top: 25px; }

#tambah-staff #kanan-detail-staff{ margin-top: 10px;

(47)

float: left; }

#kanan-detail-staff input#input-staff{ width: 250px;

height: 30px; position: relative; border-radius: 4px; margin-bottom: 5px; margin-top: 9px; }

#kanan-detail-staff select{ height: 30px; border-radius: 4px; border: none; position: relative; cursor: pointer; }

#tambah-staff input#tambah{ position: relative; margin-left: 180px; margin-top: 20px; border-radius: 5px; height: 30px; cursor: pointer; background: black; color: white; }

#tambah-staff input#tambah:hover{ background: rgb(235, 0, 255); }

/**/

/*Style UNtuk edit*/ #kanan-isi #edit-staff{

width: 100%; }

#edit-staff img#gambar-d{ width: 150px; height: 200px; border-radius: 4px; margin-left: 300px; margin-top: 10px; margin-bottom: 50px; }

#edit-staff input#edit-foto-staff{ position: relative;

(48)

#edit-staff #kiri-edit-staff{ width: 50%;

float: left; }

#kiri-edit-staff p{ position: relative; left: 220px;

#edit-staff #kanan-edit-staff{ margin-top: 10px; width: 50%; float: left; }

#kanan-edit-staff input#input-staff{ width: 250px;

#edit-staff input#edit{ position: relative; margin-left: 180px; margin-top: 20px; border-radius: 5px; height: 30px; cursor: pointer; background: black; color: white; width: 70px; }

#edit-staff input#edit:hover{

/**/ /**/

/* Style untuk data-admin*/ #kanan-isi #data-admin2{

(49)

#data-admin2 img#gambar-a-kecil{ width: 50px;

height: 50px; border-radius: 4px; }

#kanan-isi #edit-admin{ width: 100%; margin-top: 20px; margin-bottom: 20px; }

/*Style detail-admin*/

#kanan-isi #detail-data-admin{ width: 100%;

}

#detail-data-admin img#gambar-d{ width: 150px;

#detail-data-admin #kiri-detail-data-admin{ width: 50%;

float: left; }

#kiri-detail-data-admin p{ position: relative; left: 280px;

font-family: calibri; font-weight: bold; }

#detail-data-admin #kanan-detail-data-admin{ width: 50%;

float: left; }

#kanan-detail-data-admin p{ position: relative; left: 30px;

/**/ /**/

#edit-admin img#gambar-a{ width: 150px;

(50)

margin-left: 300px; margin-top: 10px; margin-bottom: 10px; }

#edit-admin input#edit-foto-admin{ position: relative;

top: -15px; }

#edit-admin #kiri-edit-admin{ width: 50%;

float: left; }

#kiri-edit-admin p{ position: relative; left: 220px;

#edit-admin #kanan-edit-admin{ margin-top: 10px;

width: 50%; float: left; }

#kanan-edit-admin input#input-admin{ width: 250px;

#edit-admin input#edit{ position: relative; margin-left: 180px; margin-top: 20px; border-radius: 5px; height: 30px; cursor: pointer; background: black; color: white; width: 70px; }

(51)

/*Tambah admin*/

#kanan-isi #tambah-admin{ width: 100%;

}

#tambah-admin img#gambar-a{ width: 150px;

#tambah-admin input#tambah-foto-admin{ position: relative;

top: -15px; }

#tambah-admin #kiri-tambah-admin{ width: 50%;

float: left; }

#kiri-tambah-admin p{ position: relative; left: 220px;

#tambah-admin #kanan-tambah-admin{ margin-top: 10px;

width: 50%; float: left; }

#kanan-tambah-admin input#input-admin{ width: 250px;

#tambah-admin input#tambah{ position: relative;

(52)

color: white; width: 70px; }

#tambah-admin input#tambah:hover{ background: rgb(235, 0, 255); }

/**/ /**/

/*Daftar*/

/*Data-Pendaftar*/

#kanan-isi #data-pendaftar{ width: 100%;

background: rgb(240, 242, 243); }

#data-pendaftar #link-atas{ width: 100%; height: 100px;

border-bottom: 1px solid #fff; border-collapse: collapse; margin-bottom: 20px; }

#link-atas ul{ margin: 0px; padding: 0px; float: right; }

#link-atas li{

display: inline; }

#link-atas #bulat{ width: 50px; height: 50px;

border-radius: 100px; margin-left: 80px; margin-right: 30px; }

#bulat a{

text-decoration: none; color: #333;

}

#bulat a:hover{

color: rgb(9, 229, 248); }

(53)

#bulat p{

position: relative; width: 160px; left: -40px; top: -5px;

font-family: gulimche; }

#data-pendaftar #isinya{ width: 100%; }

#isinya #data{ margin: auto; width: 750;

#data #isi-data-selurunhnya{ width: 100%;

/*overflow: scroll; overflow-y:hidden;*/ }

#isi-data-selurunhnya table#isi-data{ width: 100%;

border: 1px solid #fff; border-collapse: collapse; background: white; }

table#isi-data img#gambar-p{ width: 50px;

table#isi-data tr#kursor{ cursor: pointer; }

table#isi-data tr#kursor:hover{

background: rgb(177, 245, 234); }

table#isi-data th{

text-align: center; border: 1px solid #fff; border-collapse: collapse; padding: 5px 10px; font-family: calibri;

}

table#isi-data td{

(54)

border: 1px solid #d5d5d5; border-collapse: collapse; font-family: calibri; }

table#isi-data td#no{

}

#isi-data-selurunhnya #bawah{ width: 100%;

}

#bawah p#jumlah{ text-align: right; font-family: calibri; font-size: 17pt; }

#bawah p#cetak{ text-align: right; font-family: calibri; font-size: 12pt; position: relative; left: -5px;

}

#bawah a{

float: right; }

#bawah a:hover{

color: rgb(205, 5, 255); }

#bawah button{ width: 50px; height: 50px;

background: rgb(70, 175, 245); outline: none;

border: none; float: right; cursor: pointer; }

#bawah button:hover{

(55)

/*detail-pendaftar*/

#kanan-isi-pendaftar #detail-pendaftar{ width: 100%;

}

#detail-pendaftar #atas-detail-pendaftar{ width: 100%;

}

#atas-detail-pendaftar img#gambar-detail-pendaftar{ margin-left: 315px;

width: 150px; height: 200px; margin-top: 10px; margin-bottom: 20px; border-radius: 4px; }

#atas-detail-pendaftar #judul-detail-pendaftar{ width: 100%;

height: 50px; }

#atas-detail-pendaftar #kiri-detail-pendaftar{ width: 50%;

float: left; }

#kiri-detail-pendaftar p{ position: relative; font-family: calibri; left: 200px;

}

#atas-detail-pendaftar #kanan-detail-pendaftar{ width: 50%;

float: left; }

#kanan-detail-pendaftar p{ position: relative; font-family: calibri; left: 60px;

}

#detail-pendaftar #bawah-detail-pendaftar{ width: 100%;

float: left;

margin-top: 40px; }

#bawah-detail-pendaftar #judul-detail-pendaftar{ width: 100%;

height: 50px; }

(56)

font-size: 15pt; font-weight: bold; }

#bawah-detail-pendaftar #kiri-detail-pendaftar{ width: 50%;

float: left; }

#bawah-detail-pendaftar #kanan-detail-pendaftar{ width: 50%;

float: left; }

/**/

/*Data-Pendaftar-lulus*/

#kanan-isi #data-pendaftar-lulus{ width: 100%;

background: rgb(240, 242, 243); }

#data-pendaftar-lulus #link-atas-lulus{ width: 100%;

height: 100px;

border-bottom: 1px solid #fff; border-collapse: collapse; margin-bottom: 20px; }

#link-atas-lulus ul{ margin: 0px; padding: 0px; float: right; }

#link-atas-lulus li{ display: inline; }

#link-atas-lulus #bulat-lulus{ width: 50px;

height: 50px;

border-radius: 100px; margin-left: 80px; margin-right: 30px; }

#bulat-lulus a{

text-decoration: none; color: #333;

}

#bulat-lulus a:hover{

color: rgb(9, 229, 248); }

(57)

width: 50px; height: 50px; }

#bulat-lulus p{

position: relative; width: 160px; left: -40px; top: -5px;

font-family: gulimche; }

#data-pendaftar-lulus #isinya-lulus{ width: 100%;

}

#isinya-lulus #data-lulus{ margin: auto; width: 750;

#data-lulus #isi-data-selurunhnya-lulus{ width: 100%;

/*overflow: scroll; overflow-y:hidden;*/ }

#isi-data-selurunhnya-lulus table#isi-data-lulus{ margin: auto;

width: 600px;

border: 1px solid #fff; border-collapse: collapse; background: white; }

table#isi-data-lulus img#gambar-p-lulus{ width: 50px;

table#isi-data-lulus tr#kursor-lulus{ cursor: pointer;

}

table#isi-data-lulus tr#kursor-lulus:hover{ background: rgb(177, 245, 234); }

table#isi-data-lulus th{ text-align: center; border: 1px solid #fff; border-collapse: collapse; padding: 5px 10px; font-family: calibri;

(58)

color: white; }

table#isi-data-lulus td{ padding: 5px 10px;

border: 1px solid #d5d5d5; border-collapse: collapse; font-family: calibri; }

table#isi-data-lulus td#no-lulus{ background: rgb(70, 175, 245); color: white;

}

#isi-data-selurunhnya-lulus #bawah-lulus{ width: 100%;

}

#bawah-lulus p#jumlah-lulus{ text-align: right; font-family: calibri; font-size: 17pt; }

#bawah-lulus p#cetak-lulus{ text-align: right; font-family: calibri; font-size: 12pt; position: relative; left: -5px;

}

#bawah-lulus a{

float: right; }

#bawah-lulus a:hover{

color: rgb(205, 5, 255); }

#bawah-lulus button{ width: 50px; height: 50px;

background: rgb(70, 175, 245); outline: none;

border: none; float: right; cursor: pointer; }

#bawah-lulus button:hover{

(59)

#bawah-lulus img#cetak-lulus{ width: 40px;

height: 40px; }

/**/

/*awal*/

#kanan-isi #wrapper-awal{ width: 100%; background: white; }

#wrapper-awal #awal{ position: relative; left: 100px; width: 500px; height: 500px;

}

#awal #awal-dalam{ margin:auto; position: relative; top: 95px;

width: 300px; height: 300px; background: white; border-radius: 500px; }

#awal-dalam img#g-a{ width: 200px; height: 200px; position: relative; top: 50px;

left: 50px; }

/**/ /**/

/*Daftar Ulang*/ #kanan-isi #d-u{

margin: auto; width: 300px; height: 300px;

}

(60)

margin-top: 100px; margin-left: 50px; }

#d-u button#m{ width: 50px; height: 50px;

border-radius: 50px; border: none;

position: relative; margin-left: 200px; margin-top: 20px; cursor: pointer; }

#d-u button#m:hover{

/*Pendaftar Ulang*/

#kanan-isi #detail-pendaftar-ulang{ width: 100%;

}

#detail-pendaftar-ulang img#g-u{ width: 150px;

height: 200px; position: relative; margin-left: 320px; border-radius: 4px; margin-top: 20px; margin-bottom: 20px; }

#detail-pendaftar-ulang #j-d{ width: 100%;

height: 50px; float: left; }

#j-d p#j{

text-align: center; font-family: gulimche; font-size: 15pt;

font-weight: bold; }

#j-d button#b-s2{ width: 100px; height: 30px; float: right;

margin-right: 100px; cursor: pointer;

(61)

}

#j-d button#b-s2:hover{

}

#detail-pendaftar-ulang #ki-d{ width: 60%;

float: left; }

#ki-d p{

margin-left: 240px; font-family: calibri; }

#detail-pendaftar-ulang #ka-d{ width: 40%;

float: left; }

#ka-d p{

margin-left: 10px; font-family: calibri; text-transform: capitalize; }

/*Profil*/

#kanan-isi table#isi-tabel-profil{ margin: auto;

margin-top: 20px; margin-bottom: 20px; width: 600px;

border: 1px solid #fff; border-collapse: collapse; text-align: justify;

}

table#isi-tabel-profil th{ border: 1px solid #fff; border-collapse: collapse; padding: 5px 10px;

text-align: center; }

table#isi-tabel-profil td{ border: 1px solid #fff; border-collapse: collapse; padding: 5px 10px; }

table#isi-tabel-profil tr#kursor:hover{ background: rgb(227, 230, 231); cursor: pointer;

(62)

#kanan-isi #edit-data-profil{ width: 100%;

}

#edit-data-profil table#tabel-profil{ margin: auto;

width: 600px;

border: 1px solid #fff; border-collapse: collapse; margin-top: 20px;

table#tabel-profil tr{ height: 100px; }

table#tabel-profil th{ text-align: left; font-family: calibri; padding-left: 20px; padding-right: 20px; }

table#tabel-profil input#id{ width: 200px; height: 30px; border-radius: 4px; }

table#tabel-profil input#title{ width: 400px;

table#tabel-profil input#edit{ width: 70px;

height: 30px; border-radius: 4px; float: right;

margin-right: 28px;

}

table#tabel-profil input#edit:hover{ cursor: pointer;

background: red; }

#kanan-isi #tambah-data-profil{ width: 100%; }

#tambah-data-profil table#tabel-profil{ margin: auto;

(63)

border: 1px solid #fff; border-collapse: collapse; margin-top: 20px;

table#tabel-profil tr{ height: 100px; }

table#tabel-profil th{ text-align: left; font-family: calibri; padding-left: 20px; padding-right: 20px; }

table#tabel-profil input#id{ width: 200px; height: 30px; border-radius: 4px; }

table#tabel-profil input#title{ width: 400px;

table#tabel-profil input#tambah{ width: 70px;

height: 30px; border-radius: 4px; float: right;

margin-right: 28px;

}

table#tabel-profil input#tambah:hover{ cursor: pointer;

background: red; }

g. koneksi.php <?php

$server="Localhost"; $name="root"; $pass=""; $db="ta";

$kon= mysql_connect($server,$name,$pass); $query=mysql_select_db($db,$kon);