LAMPIRAN A TAMPILAN HALAMAN WEBSITE

LAMPIRAN A TAMPILAN HALAMAN WEBSITE

Universitas Sumatera Utara

1.

Tampilan home.php

2.

Tampilan profil.php

3.

Tampilan staff.php

4.

Tampilan fasilitas.php

Universitas Sumatera Utara

5.

Tampilan kesiswaan.php

6.

Tampilan admin-login.php

7.

Tampilan admin.php

Universitas Sumatera Utara

8.

Tampilan edit-admin.php

9.

Tampilan tambah-admin.php

10. Tampilan hapus-admin.php

Universitas Sumatera Utara

11. Tampilan staff.php

12. Tampilan edit-staff.php

13. Tampilan tambah-staff.php

Universitas Sumatera Utara

14. Tampilan hapus-staff.php

15. Tampilan fasilitas.php

16. Tampilan edit-gambar-fasilitas.php

Universitas Sumatera Utara

17. Tampilan tambah-gambar-fasilitas.php

18. Tampilan hapus-gambar-fasilitas.php

19. Tampilan data-siswa-smp.php

Universitas Sumatera Utara

20. Tampilan data-siswa-sma.php

21. Tampilan data-siswa-smk.php

22. Tampilan edit-data-siswa.php

Universitas Sumatera Utara

23. Tampilan tambah-data-siswa.php

24. Tampilan hapus-data-siswa.php

Universitas Sumatera Utara

LAMPIRAN B LISTING PROGRAM

Universitas Sumatera Utara

1. style.css body{ margin: 0px; padding: 0px; } .clear{ clear: both; } .wrapper{ width: 100%; } .wrapper .head{ width: 100%; height: 80px; float: left; padding-bottom: 50px; } .wrapper .menu{ width: 150%; height: 80px; background: rgb(37, 153, 218); position: fixed; float: left; z-index: 2; } .menu #logo{ width:500px; float: left; margin: auto; height: 100px; } #logo a#linka{ text-decoration: none; background: green; position: relative; width: 100px; height: 100px; } img#gambar{ margin-left: -100px; margin-top: -90px; } #logo img{ margin-top: -15px; } #logo p{ font-family: calibri; font-size: 25pt; color: white;

Universitas Sumatera Utara

margin: auto; margin-left: 130px; position: relative; top: -130px; } #logo p#sub-judul{ font-family: cursive; font-size: 10pt; color: white; margin: auto; margin-left: 220px; } .isi-menu ul{ margin: 0px; padding-top: 10px; } .isi-menu ul li{ display: inline; color: white; font-family: calibri; font-size: 17pt; padding: 0px 30px 0px 10px; } .isi-menu ul li a{ text-decoration: none; color: white; } .isi-menu ul li a img#gambar-s{ position: relative; top: 10px; margin-right: -10px; width:50px; height:60px; margin-top: -20px; } .isi-menu ul li a img#gambar-k{ position: relative; top: 10px; margin-right: -5px; width:40px; height:50px; margin-top: -20px; } .isi-menu ul li a img#gambar-h{ position: relative; top: 0px; margin-right: 0px; width:28px; height:31px;

Universitas Sumatera Utara

margin-top: -20px; } .isi-menu ul li a img#gambar-f{ position: relative; top: 5px; margin-right: 0px; width:40px; height:40px; margin-top: -0px; } .isi-menu ul li a img#gambar-p{ position: relative; top: 10px; margin-right: 0px; width:40px; height:55px; margin-top: -10px; } .wrapper .wrapper-content{ margin: auto; width: 1250px; } .wrapper-content .content{ width: 100%; } .content .kiri-home{ width: 20%; height: 400px; float: left; margin-right: 10px; } .content .kanan-home{ padding-top: 40px; width: 79%; height: 400px; background: rgb(240, 242, 243); float: left; } .kanan-home img#gambar-rumah{ position: relative; top: -390px; z-index: 4; height: auto; } .content .kiri2{ width: 30%; float: left; margin-right: 70px; margin-left: 100px;

Universitas Sumatera Utara

} /*Style Untuk Fasilitas Baru*/ .kiri2 #isi-kiri2-fasilitas{ width: 100%; margin-bottom: 20px; float: left; } #isi-kiri2-fasilitas a#link-fasilitas{ color: black; } #isi-kiri2-fasilitas a#link-fasilitas:hover{ color: red; } .kiri2 #judulnya{ width: 300px; position: relative; left: 10px; top: 15px; float: left; } #isi-kiri2-fasilitas #icon-fasilitas{ width: 35px; height: 35px; position: relative; top: 15px; margin-right: 10px; float: left; } #judulnya p#kategori-fasilitas{ font-family: calibri; text-align: right; font-weight: bold; } .kiri2 #sub-menu-kiri2{ text-align: right; width: 100%; height: 50px; margin-bottom: 30px; font-family: calibri; font-size: 15pt; font-weight: bold; } #sub-menu-kiri2 a{ text-decoration: none; color: black; width: 100%; float: left; height: 80%; padding-top: 10px;

Universitas Sumatera Utara

} #sub-menu-kiri2 a:hover{ font-weight: bold; } #sub-menu-kiri2 img#gambar1{ padding-right: 10px; } #sub-menu-kiri2 img#gambar2{ padding-right: 31px; } #sub-menu-kiri2 img#gambar3{ padding-right: 70px; width: 50px; height: 70px; position: relative; top: 20px; left: 15px; margin-top: -70px; } .content .kanan{ width: 55%; float: left; } .kanan #isi-kanan-profil{ width: 450px; background: rgb(240, 242, 243); text-align: justify; padding: 10px 40px 10px 40px; line-height: 2em; border-radius: 4px; } #isi-kanan-profil img#gambar-fasilitas{ width: 100%; height: 550px; border-radius: 4px; } .footer{ margin: auto; width: 1250px; border-radius: 0px 0px 4px 4px; height: 50px; background: -webkit-linear-gradient(white,rgb(37, 153, 218)); margin-top: 90px; } .footer p{ text-align: center; font-size: 12pt; color: black; padding-top: 15px;

Universitas Sumatera Utara

font-family: cursive; } /*Style Untuk Sejarah*/ .kanan #isi-kanan-profil p{ font-size: 12pt; font-family: cursive; } /*Style Untuk Profil*/ .kanan #isi-kanan-profil #profil{ width: 100%; } .kanan #isi-kanan-profil #profil table.tabelprofil{ width: 100%; font-family: cursive; } .kanan #isi-kanan-profil #profil table.tabelprofil th{ text-align: left; width: 120px; height: 50px; } /*Style Untuk Visi-Misi*/ .kanan #isi-kanan-profil #visi-misi ol li{ font-family: cursive; } /*Style Untuk Staff*/ .kiri2 img#gambar-staff{ margin-top: 40px; } #isi-kanan-staff{ width: 550px; background: rgb(240, 242, 243); text-align: justify; padding: 10px 40px 10px 40px; line-height: 2em; border-bottom: 1px solid #fff; float: left; } #isi-kanan-staff img#gambar-staff2{ width: 150px; height: 180px; border-radius: 4px; float: left; margin-right: 20px; } #isi-kanan-staff #detail-staff{ width: 320px; padding: 10px; float: left; }

Universitas Sumatera Utara

#detail-staff table{ width: 100%; font-family: calibri; } #detail-staff table th{ width: 80px; text-align: left; padding-right: 10px; } /*Style Untuk fasilitas*/ #sub-menu-kiri2 img#gambar-1{ position: relative; top: 10px; margin-right: 70px; width:35px; height:35px; margin-top: -20px; } #sub-menu-kiri2 img#gambar-2{ position: relative; top: 10px; margin-right: 65px; width:30px; height:30px; margin-top: -20px; } #sub-menu-kiri2 img#gambar-3{ position: relative; top: 10px; margin-right: 70px; width:30px; height:45px; margin-top: -20px; } #sub-menu-kiri2 img#gambar-4{ position: relative; top: 30px; margin-right: 170px; width:50px; height:65px; margin-top: -40px; } #sub-menu-kiri2 img#gambar-5{ position: relative; top: 30px; margin-right: 135px; width:60px; height:70px; margin-top: -50px;

Universitas Sumatera Utara

} #sub-menu-kiri2 img#gambar-6{ position: relative; top: 20px; margin-right: 90px; width:50px; height:50px; margin-top: -50px; } #sub-menu-kiri2 img#gambar-7{ position: relative; top: 5px; margin-right: 132px; width:25px; height:30px; margin-top: 0px; } #sub-menu-kiri2 img#gambar-8{ position: relative; top: 10px; margin-right: 108px; width:35px; height:40px; margin-top: -10px; } #sub-menu-kiri2 img#gambar-9{ position: relative; top: 10px; margin-right: 142px; width:40px; height:45px; margin-top: 0px; } #sub-menu-kiri2 img#gambar-10{ position: relative; top: 10px; margin-right: 188px; width:40px; height:45px; margin-top: 0px; } #sub-menu-kiri2 img#gambar-11{ position: relative; top: 10px; margin-right: 138px; width:35px; height:40px; margin-top: 0px; }

Universitas Sumatera Utara

/*Style Untuk Kesiswaan*/ #sub-menu-kiri3 img#gambar-smp{ width: 60px; height: 50px; padding-right: 30px; } #sub-menu-kiri3 img#gambar-sma{ width: 70px; height: 50px; padding-right: 20px; } #sub-menu-kiri3 img#gambar-smk{ width: 50px; height: 50px; padding-right: 30px; } .content .kiri3{ width: 20%; float: left; margin-right: 70px; margin-left: 100px; } .kiri3 #sub-menu-kiri3{ text-align: right; width: 100%; height: 50px; margin-bottom: 30px; font-family: calibri; font-size: 15pt; font-weight: bold; } #sub-menu-kiri3 a{ text-decoration: none; color: black; width: 100%; float: left; height: 80%; padding-top: 10px; } #sub-menu-kiri3 a:hover{ font-weight: bold; } .content .kanan-kesiswaan{ width: 65%; float: left; } .kanan-kesiswaan #isi-kanan-kesiswaan{ width: 700px; background: rgb(240, 242, 243);

Universitas Sumatera Utara

text-align: justify; padding: 10px 40px 10px 40px; line-height: 2em; border-radius: 4px; } #isi-kanan-kesiswaan #detail-siswa{ width: 100%; /*background: rgb(50, 239, 247);*/ margin-bottom: 20px; margin-top: 30px; border-radius: 4px; } #detail-siswa img#gambar-siswa{ width: 100%; height: 400px; } /*Style untuk menu/kesiswaan/siswa/detail-smp.php*/ #detail-siswa .wrapper-detail-siswa-smp{ width: 100%; } .wrapper-detail-siswa-smp #isi-detail-smp{ width: 100%; } #isi-detail-smp img#gambar-detail-smp{ width: 120px; height: 150px; border-radius: 5px; position: relative; left: 280px; margin-bottom: 20px; } #isi-detail-smp #kiri-biodata{ width: 50%; } #kiri-biodata p{ font-family: calibri; position: relative; left: 200px; font-weight: bold; } #isi-detail-smp #kanan-biodata{ width: 50%; position: relative; margin-top: -290px; left: 352px; } #kanan-biodata p{ font-family: calibri; position: relative;

Universitas Sumatera Utara

left: 20px; } /*Style untuk menu/kesiswaan/siswa/detail-smp.php*/ #detail-siswa .wrapper-detail-siswa-smk{ width: 100%; } .wrapper-detail-siswa-smk #isi-detail-smk{ width: 100%; } #isi-detail-smk img#gambar-detail-smk{ width: 120px; height: 150px; border-radius: 5px; position: relative; left: 280px; margin-bottom: 20px; } #isi-detail-smk #kiri-biodata{ width: 50%; } #kiri-biodata p{ font-family: calibri; position: relative; left: 200px; font-weight: bold; } #isi-detail-smk #kanan-biodata{ width: 50%; position: relative; margin-top: -340px; left: 352px; } #kanan-biodata p{ font-family: calibri; position: relative; left: 20px; } /*Style Untuk siswa/sma*/ #isi-kanan-kesiswaan .tabel-sma{ width: 100%; } .tabel-sma table#t-sma{ width: 100%; border: 1px solid #fff; border-collapse: collapse; font-family: calibri; font-size: 12pt; } table#t-sma tr#kursor{

Universitas Sumatera Utara

cursor:pointer; } table#t-sma tr#kursor:hover{ background: rgb(192, 227, 255); } table#t-sma tr{ border: 1px solid #fff; } table#t-sma td{ border: 1px solid #fff; padding: 5px 10px 5px 10px; } table#t-sma td a{ color:rgb(37, 153, 218); } table#t-sma td a:hover{ font-weight: bold; color: rgb(50, 239, 247); } table#t-sma th{ border: 1px solid #fff; background: rgb(37, 153, 218); color: white; } /*Style Untuk siswa/smp*/ #isi-kanan-kesiswaan .tabel-smp{ width: 100%; } .tabel-smp table#t-smp{ width: 100%; border: 1px solid #fff; border-collapse: collapse; font-family: calibri; font-size: 12pt; } table#t-smp tr#kursor{ cursor:pointer; } table#t-smp tr#kursor:hover{ background: rgb(192, 227, 255); } table#t-smp td{ border: 1px solid #fff; padding: 5px 10px 5px 10px; } table#t-smp td a{ color:rgb(37, 153, 218); } table#t-smp td a:hover{

Universitas Sumatera Utara

font-weight: bold; color: rgb(50, 239, 247); } table#t-smp tr{ border: 1px solid #fff; } table#t-smp th{ border: 1px solid #fff; background: rgb(37, 153, 218); color: white; height: 30px; font-size: 13pt; } /*Style Untuk siswa/smk*/ #isi-kanan-kesiswaan .tabel-smk{ width: 100%; } .tabel-smk table#t-smk{ width: 100%; border: 1px solid #fff; border-collapse: collapse; font-family: calibri; font-size: 12pt; } table#t-smk tr#kursor{ cursor:pointer; } table#t-smk tr#kursor:hover{ background: rgb(192, 227, 255); } table#t-smk td{ border: 1px solid #fff; padding: 5px 10px 5px 10px; } table#t-smk td a{ color:rgb(37, 153, 218); } table#t-smk td a:hover{ font-weight: bold; color: rgb(50, 239, 247); } table#t-smk tr{ border: 1px solid #fff; } table#t-smk th{ border: 1px solid #fff; background: rgb(37, 153, 218); color: white; }

Universitas Sumatera Utara

2.

generic.css

/* For generic page styles. Not for sliders. */ body { background:#F6F6F6; font:normal 0.9em Arial; margin:0; padding:0; padding-bottom:60px; } h2 { display:inline; } .div2 { width:700px; margin:0 auto; } .div2 li { padding-top:6px; padding-bottom:6px; } .green { color:Green; } .cn { font-family: "Courier New", Georgia; } #status { display:inline-block; margin-left:26px; line-height:50px; height:50px; vertical-align:middle; } .code { border: dashed 1px #BCBCCB; padding:900px 12px; background-color:#F3F3F9; white-space:pre; font-family:"Courier New", Georgia; font-size:12px; margin:6px 0; overflow:auto; }

3.

home.php

Universitas Sumatera Utara



4. demo2.html <script src="themes/2/js-image-slider.js" type="text/javascript">

5. profil.php

6. sejarah.php