Sistem Informasi Pemerintahan Mahasiswa Fakultas Matematika Dan Ilmu Pengetahuan Alam Universitas Sumatera Utara

(1)

Listing Program Halaman index.php

<?php include 'koneksi.php'; ?>

<?php if(!isset($_SESSION['username'])){ header("Location: login/index.php"); } ?>

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

<title>PEMA FMIPA USU</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page1">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id ="isi" class="container">

<?php include 'inc/public/asside.php'; ?> <?php include 'inc/public/section.php'; ?> <?php include 'rightbar.php'; ?>

</div>


(2)

</div>

<script type="text/javascript"> Cufon.now(); </script> <!-- END PAGE SOURCE -->

</body> </html> <nav> <ul>

<li id="home"><a href="index.php">Home Page</a></li> <li id="about"><a href="himpunan.php">Himpunan</a> <ul>

<li id="home"><a href="informatika.php">D3 Teknik Informatika</a></li>

<li id="about"><a href="d3kimia.php">D3 Kimia</a></li>

<li id="articles"><a href="d3statistika.php">D3 Statistika</a></li>

<li id="articles"><a href="d3instrumentasi.php">D3 Fisika Instrumentasi</a></li>

<li id="articles"><a href="d3metrologi.php">D3 Metrologi</a></li> <li id="articles"><a href="matematika.php">S1 Matematika</a></li> <li id="articles"><a href="kimia.php">S1 Kimia</a></li>

<li id="articles"><a href="biologi.php">S1 Biologi</a></li> <li id="articles"><a href="fisika.php">S1 Fisika</a></li> </ul>

</li>

<li id="articles"><a href="informasi.php">Informasi</a> <ul>

<li id="articles"><a href="progja.php">Program Kerja</a></li> </ul>

</li>

<li id="contact"><a href="contact-us.php">Departemen </a> <ul>

<li id="pendidikan"><a href="pendidikan.php">Departemen Pendidikan</a></li>

<li id="hankam"><a href="hankam.php">Departemen Hankam</a></li> <li id="bakat"><a href="bakat.php">Deartemen Minat Bakat</a></li> <li id="fasilitas"><a href="fasilitas.php">Departemen Fasilitas Pembangunan</a></li>

<li id="sosial"><a href="sosial.php">Departemen Sosial Kewirausahaan</a></li>

<li id="rohani"><a href="rohani.php">Departemen Kerohanian</a></li> </ul>

</li>

<li id="sitemap"><a href="sitemap.php">Sitemap</a></li> <li id="contact"><a href="contact-us.php">Contact Us</a></li> <?php if(isset($_SESSION['username'])){


(3)

?>

<li id="sitemap"><a href="login/index.php"><?php echo $_SESSION['username']; ?></a>

<ul>

<li id="contact"><a href="logout.php">Log Out</a></li> </ul>

</li> <?php } else{ ?>

<li id="sitemap"><a href="login/index.php">login</a>

</li> <?php } ?> </ul> </nav>

<header id="header"> <div class="container">

<h1><a href="index.html">Student's site</a></h1>

<h5>Pemerintahan Mahasiswa Fakultas Matematika <br>dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.</h5>

</div> </header> <aside>

<h3>Categories</h3> <ul class="categories">

<li><span><a href="reg.php">Register</a></span></li>

<li><span><a href='http://portal.usu.ac.id'>Info Mahasiswa</a></span></li> <li><span><a href="anggota.php">Anggota Pemerintahan Mahasiswa</a></span></li>

<li><span><a href="progja.php">Program Kerja Pema FMIPA</a></span></li> <li><span><a href="struktur.php">Struktur organisasi</a></span></li>

<li><span><a href="#">Unit Kegiatan Mahasiswa</a></span></li> <li><span><a href="#">Galeri</a></span></li>

<li class="last"><span><a href="#">Calendar</a></span></li> </ul>

<br> <br>


(4)

<ul class="news">

<li><h4><a href="banktokyo.php">Bank of Tokyo – Mitsubishi UFJ Scholarship 2016</a></h4></li>

<li><h4><a href="beasiswaxl.php">BEASISWA XL FUTURE LEADERS</a></h4></li>

<li><h4><a href="beasiswappa.php">Beasiswa PPA 2016</a></h4></li> <li><h4><a href="beasiswatanoto.php">Tanoto Foundation</a></h4></li> <li><h4><a href="beasiswadjarum.php">Djarum Plus 2016/2017</a></h4></li> </ul>

<style> #fixed {

position:fixed; top:80%; left:5%;

background-color:green; padding:10px;

box-shadow: 0px -10px 5px rgba(0,0,0,0.2); }

#fixed a:hover {

opacity:0.5; }

</style> <body>

<div id="fixed">

<a href="#kabar"><h3 class="h3">Halo Pengunjung</h3></a> <hr></hr>

</div> </aside>

<section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">

<ul class="amazingslider-slides" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>


(5)

</li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />


(6)

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

<!-- End of body section HTML codes --> <div class="inside">

<h2>Recent <span>Articles</span></h2> <ul class="list">

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">PeMa FMIPA USU</span> Organisasi Mahasiswa tertinggi di Fakultas yang menaungi seluruh aspirasi dan kegiatan dari seluruh mahasiswa dikawasan FMIPA USU Pemerintahan Mahasiswa adalah acuan dari seluruh jurusan yang ada di dalam fakultas khususnya...

<br>

<span><a href="artikelgub.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>

<div class="img-box"><img src="images/seminar.png"><p><span class="txt1"> Departemen Pendidikan</span> Organisasi Mahasiswa tertinggi di Fakultas yang menaungi seluruh aspirasi dan kegiatan dari seluruh mahasiswa dikawasan FMIPA USU ....

<br> <br>

<span><a href="artikelgub.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">PeMa FMIPA USU</span> Andri M L Pandiangan dan M. Wendy Andika R dengan memperoleh total suara sebanyak 642 suara pada TPS1...

<br> <br>

<span><a href="artikelgub.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">PeMa FMIPA USU</span>Pmerintahan Mahasiswa FMIPA USU 2015/2016 menerapkan beberapa program kerja untuk menyatukan sembilan jurusan di FMIPA USU

<br> <br>

<span><a href="progja.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>


(7)

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">Beasiswa MUS</span>Bank of Tokyo – Mitsubishi UFJ Scholarship untuk periode tahun akademik 2016-2017. Beasiswa ini diberikan untuk periode 1 (satu) tahun. Besaran yang didapatkan dari beasiswa ini adalah sebesar Rp. 3.900.000,- per mahasiswa per tahun

<br>

<span><a href="banktokyo.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">Beasiswa PPA</span> BEASISWA PPA TAHUN 2016 TAHAP 1</span>Beasiswa ini diberikan kepada mahasiswa Universitas Sumatera Utara Program Sarjana dan Vokasi yang berprestasi secara akademik. Besaran beasiswa ini yaitu Rp. 2.100.000 (Dua Juta Seratus Ribu Rupiah) untuk satu semester (Semester Genap 2015/2016) ...

<br>

<span><a href="beasiswappa.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">PeMa FMIPA USU</span> Organisasi Mahasiswa tertinggi di Fakultas yang menaungi seluruh aspirasi dan kegiatan dari seluruh mahasiswa dikawasan FMIPA USU Pemerintahan Mahasiswa adalah acuan dari seluruh jurusan yang ada di dalam fakultas khususnya...

<br>

<span><a href="artikelgub.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> <br>

<div class="img-box"><img src="images/pema.png"><p><span class="txt1">PeMa FMIPA USU</span> Organisasi Mahasiswa tertinggi di Fakultas yang menaungi seluruh aspirasi dan kegiatan dari seluruh mahasiswa dikawasan FMIPA USU Pemerintahan Mahasiswa adalah acuan dari seluruh jurusan yang ada di dalam fakultas khususnya...

<br>

<span><a href="artikelgub.php"><div class="readmore"><img src="images/readmore.png"></div></a></span> <br>

<br> </ul>

<h2>Biografi <span>Pemerintahan Mahasiswa FMIPA Universitas Sumatera Utara</span></h2>

<p><span class="txt1">PeMa FMIPA USU</span> Organisasi Mahasiswa tertinggi di Fakultas yang menaungi seluruh aspirasi dan kegiatan dari seluruh mahasiswa dikawasan FMIPA USU </p>


(8)

<div class="img-box"><img src="images/pema.png">Pemerintahan Mahasiswa adalah acuan dari seluruh jurusan yang ada di dalam fakultas khususnya di fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Oleh karena itu <a href="index.php">PeMa FMIPA USU</a> yang menaungi sembulan jurusan yang memiliki banyak aspek dan kebutuhan di masing-masing jurusan tersebut memiliki tanggung jawab besar yang cukup membantu fakultas untuk membangun fakultas yang berorientasi pada kegiatan mahasiswa yang berada di kawasan Fakultas Matematika dan Ilmu pengetahuan Alam Universitas Sumatera Utara PeMa sebagai acuan dari setiap jurusan tersebut akan di ketahui secara jelas dalam website ini yang diolah oleh PeMa FMIPA USU periode 2015-2016 </div>

</div> </section> <footer>

<div class="footerlink"> <p class="rf">Alamat:

Pemerintahan Mahasiswa Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara

Jl.Bioteknologi No.1 Kampus USU,Medan </p>

<p class="lf">Copyright &copy; 2016 <a

href="andripandiangan08@gmail.com">andripandiangan</a> - All Rights Reserved</p>

<p class="rf">Design by <a href="http://www.fmipa.ac.id/">Teknik Informatika</a></p>

<div style="clear:both;"></div> </div>


(9)

Halaman Style.css

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {

display:block; }

mark, rp, rt, ruby, summary, time { display:inline;

} body {

background:#fff;

font-family:Arial, Helvetica, sans-serif; font-size:100%;

line-height:1em; color:#454545; }

html {

min-width:940px; }

html, body {

height:100%; }

.container {

margin:0 auto; width:1200px; overflow:hidden; font-size:.875em; padding-bottom:176px; padding-left: 15px; padding-right: 15px;

box-shadow: -3px -3px 3px #f5f5f5, 3px 3px 3px #f5f5f5; }

#isi{

background:white; margin-top:-30px; z-index: 1;

position: relative; }

#header{

background:#444; margin-top:50px; position: relative; }


(10)

#header .container {

box-shadow: 0 0 0 #ccc; }

#header .container h5 { position: relative; z-index: 3; color: white; margin-top: 100px; }

header {

background:green; min-width:940px; }

header .container { height:194px; position:relative; padding:0; }

section#content { float:left; width:691px; }

aside {

width:219px; float:left;

margin-right:30px; padding:5px 0 0 0; }

aside .right{

width:300px; float:right;f margin-left:30px; padding:5px 0 0 0; }

.instagram img { float:right; text-align;

margin:0 20px 0 0; width:60%;

height:60%;

padding:5px 50px 0 0; }


(11)

float:right; text-align;

margin:0 20px 0 0; width:30%;

height:30%;

padding:0 80px 0 0; }

.gmail img { float:right; text-align;

margin:0 20px 0 0; width:40%;

height:45%;

padding:10px 69px 0 0; }

.facebook img { float:right; text-align;

margin:0 30px 0 0; width:10%;

height:10%;

padding:10px 69px 0 0; }

aside.beritabaru { width:180px; float:right;

margin-right:0px; padding:5px 0 0 0; }

.readmore img { text-align;

margin:0 20px 0 0; width:75px; height:35px;

padding:10px 69px 0 0; }

.fleft {

float:left; }

.fright {

float:right; }


(12)

.clear {

clear:both; }

.col-1, .col-2, .col-3 { float:left; }

.alignright {

text-align:right; }

.aligncenter {

text-align:center; }

.wrapper {

width:100%; overflow:hidden; }

.wrap {

height:auto !important; height:100%;

min-height:100%; background:green; min-width:940px; }

input, select, textarea {

font-family:Arial, Helvetica, sans-serif; font-size:1em;

vertical-align:middle; font-weight:normal; }

fieldset {

border:0; }

.categories {

padding-bottom:37px; }

.categories li {

font-weight:bold; font-size:.857em; padding-bottom:8px; margin-bottom:6px;

background:url(../images/divider1.gif) repeat-x left bottom; }

.categories li.last { background:none; padding:0;


(13)

}

.categories li span { display:block; padding-left:15px; height:1%;

background:url(../images/marker.gif) no-repeat left 5px; }

.categories li a {

text-decoration:none; color:#008cc4; }

.categories li a:hover { color:#ff7b01; }

.news {

margin-top:-25px; }

.news li {

padding-top:25px; line-height:1.429em; }

.news li strong {

font-size:.857em; color:#454545; display:block; padding-bottom:3px; }

.news li a {

color:#008cc4; text-decoration:none; font-weight:bold; }

.articles {

margin-top:-18px; }

.articles li {

width:100%; overflow:hidden; vertical-align:top; line-height:1.429em; padding-top:18px; }

.articles li img { float:left;

margin-right:22px; }


(14)

.sitemap {

padding-bottom:15px; }

.sitemap li {

padding:0 0 5px 16px;

background:url(../images/marker1.gif) no-repeat left 5px; }

.sitemap li ul {

padding-top:5px; margin-bottom:-5px; }

.list {

width:100%; overflow:hidden; padding-bottom:40px; }

.list li {

float:left; width:175px; margin-right:53px; }

.list li.last { margin:0; }

.list li span {

display:block; text-align:center; }

.list li h4 {

padding-top:20px; }

.list li p {

margin:0; }

.img-box {

width:100%; overflow:hidden; padding-bottom:20px; line-height:1.429em; text-align:justify; }

.img-box img { float:left;

margin:0 20px 0 0; }


(15)

.img-box-dalam img { float:left; text-align;

margin:0 20px 0 0; width:100%; height:70%; }

.bukber img { float:left;

margin:20px 20px 20px 20px; height:400px;

width:650px; }

.penjelasan{ text-align:justify; }

.artikel{

text-align:justify; }

}

.extra-wrap {

overflow:hidden; }

p {

margin-bottom:16px; line-height:1.429em; }

.p0 {

margin:15px; text-align:justify; font-size:1.332em; }

.address {

width:100%; overflow:hidden; padding-bottom:40px; }

.address address {

font-style:normal; line-height:1.429em; float:left;


(16)

}

.address address strong { color:#008cc4;

width:94px !important; width:91px;

float:left; }

.address .extra-wrap { float:left; width:385px; }

.address p { margin:0; }

#banner {

width:691px; height:299px;

background: url(../images/bann.jpg) no-repeat left top; }

#banner h2 { color:#fff; font-size:42px; text-transform:none; line-height:1.2em; padding:75px 0 0 55px; margin:0;

}

#banner h2 span { display:block; margin-top:-12px; color:#fff;

}

#banner h2 span span { font-size:30px; margin-top:-8px; }

a {

color: #ff7b01; outline: none; }

a:hover {

text-decoration:none; }

h1 {

text-indent:-9999px; }


(17)

h1 a {

width:124px; height:63px; position:absolute; left:50%;

margin-left:-62px; top:90px;

background:url(../images/pema.png) no-repeat left top; }

h2 {

font-size:24px; line-height:1.2em;

text-transform:uppercase; margin-bottom:20px; }

h2 span {

color:#8d8d8d; }

h3 {

font-size:20px; line-height:1.2em;

text-transform:uppercase; margin-bottom:15px; }

h4 {

font-size:1em; color:#008cc4; margin-bottom:5px; }

h4 a {

color:#008cc4; text-decoration:none; }

h4 a:hover {

color:#ff7b01; }

.txt1 {

color:#008cc4; font-weight:bold; text-align:justify; }

.link {

position:absolute; right:0;

top:159px; }


(18)

.nav-bg {

background:no-repeat center top; }

nav {

position:fixed; left:0;

top:0px; width:1350px;

background: #171717; height: 50px;

z-index: 10; }

nav > ul > li{

position:relative; transition: all ease 1s; }

nav >ul > li > ul{

position:absolute; top:50px;

display:none; z-index:3;

transition: all ease 1s; }

nav >ul > li:hover > ul{ display:block;

}

nav > ul > li > ul > li { float:none;

margin-bottom:5px; width: 100%; }

nav ul li { float:left;

line-height:50px;

text-transform:uppercase; }

nav ul li.last {

background:none; padding:0;

}

nav ul li a {

display: block; color: #ccc;


(19)

text-decoration:none; display:block;

float:left;

text-align:center; padding: 15px 5px; font: 1em 'Agency Fb'; background: #121212; transition: all ease-in .5s; width: 170px;

}

nav ul li a:hover {

background: #181818; color: #f5f5f5;

}

#content .inside { padding: 15px; }

#content .inner_copy, #content .inner_copy a { border:0;

float:right;

background:#000; color:#ff7b01; width:100%; line-height:10px; font-size:10px; margin:-50% 0 0 0; padding:0;

}

#search-form .rowElem { height:28px; position:absolute; right:0;

top:113px; }

#search-form input { width:205px; background:#fff;

padding:4px 5px 4px 5px; border:1px solid #d0d0d0; border-right:0;

color:#454545; line-height:1.2em; float:left;

height:18px; }


(20)

text-transform:uppercase; color:#fff;

text-decoration:none; float:left;

background-color:#0087c1; padding:6px 11px 0 11px; height:22px;

}

#search-form a:hover {

background-color:#47b6e5; }

#newsletter-form {

padding-bottom:45px; }

#newsletter-form fieldset {

background:url(../images/newsletter-bg.gif) no-repeat left top; width:219px;

height:200px; overflow:hidden; }

#newsletter-form .rowElem { padding:13px 19px 0 17px; }

#newsletter-form input {

border:1px solid #0086b5; background:#fff;

color:#8e8e8e; font-size:.857em;

padding:2px 5px 2px 5px; width:171px;

margin-bottom:20px; }

#newsletter-form h2 { color:#fff;

margin-bottom:20px; }

#newsletter-form a.fleft { color:#fff;

position:relative; top:3px;

}

#newsletter-form a.fright { display:block; color:#fff;

border:1px solid #26b6e8; text-decoration:none;


(21)

background-color:#006caa; padding:2px 11px 3px 11px; }

#newsletter-form a.fright:hover { border-color:#fff;

}

#contacts-form { clear:right; width:100%; overflow:hidden; }

#contacts-form fieldset { border:none; float:left; }

#contacts-form .field { clear:both; height:30px; }

#contacts-form .field.extra { height:268px;

}

#contacts-form label { float:left; width:123px; font-weight:bold; color:#008cc4; }

#contacts-form input { width:277px;

padding:2px 0 2px 3px; border:1px solid #d1d1d1; color:#70635b;

}

#contacts-form textarea { width:503px; height:252px;

padding:2px 0 2px 3px; border:1px solid #d1d1d1; color:#70635b;

overflow:auto; }

footer {

background:url(../images/footer-bg.png) no-repeat center top; margin-top:-10px;


(22)

}

footer .footerlink { margin:0 auto; width:900px; height:-80px; padding-top:60px; color:#454545; font-size:.785em; line-height:1.575em; }

.footerlink p { margin:0; padding:0;

line-height:normal; white-space:nowrap; text-indent:inherit; color:#454545; }

.footerlink a {

color:#454545; font-weight:normal; margin:0;

padding:0; border:none;

text-decoration:underline; background-color:transparent; }

.footerlink a:hover { color:#454545;

background-color:transparent; text-decoration:none;

}

.footerlink .lf { float:left; }

.footerlink .rf { float:right; }

a {

outline:none; }

/* =================== */ #isi-berita {


(23)

margin-left: 250px; }

.judul-berita h3 {

text-align: center; padding: 15px; }

.gambar-berita { width: 500px; margin: auto;

border: 1px solid #ccc; }

.gambar-berita img { width: 500px; }

.keterangan-berita { padding: 15px; }

.keterangan-berita p { }

Halaman rightbar.php <aside class="right"> <h3> Social Media </h3> <span>

<a href="http://www.instagram.com"> <div class="instagram">

<img src="images/instagram.png"> </div>

</a> </span> <span>

<a href="http://www.youtube.com"> <div class="youtube">

<img src="images/youtube.png"> </div>

</a> </span> <span>

<a href="http://www.gmail.com"> <div class="gmail">

<img src="images/gmail.png"> </div>

</a> </span>


(24)

<span>

<a href="http://www.facebook.com"> <div class="faecbook">

<img src="images/facebook.jpg"> </div>

</a> </span>

<div class="video" style="margin-top: 15px;">

<iframe width="240" height="240"

src="https://www.youtube.com/embed/VVZuN2LwdQc" frameborder="0" allowfullscreen>

</iframe> </div>

<br><h2>Fresh <span>News</span></h2> <ul class="news">

<li><strong>April 27, 2016</strong>

<h4><a href="artikelkpu.php">KPU mundurkan PEMIRA</a></h4>

KPU mudurkan waktu untuk Pemira USU untuk Presiden Mahasiswa periode baru. </li>

<li><strong>April 20, 2016</strong>

<h4><a href="artikeltemukan.php">Temuan baru Mahasiswa FMIPA USU </a></h4>

Mahasiswa FMIPA Temukan Alat Pedeteksi Diabetes Melalui Hembusan Napas </li>

<li><strong>Maret 23, 2016</strong>

<h4><a href="#">MIPA EXPO 2016</a></h4>

Pemerintahan Mahasiswa FMIPA segera menyelenggarakan MIPA EXPO di bulan Mei </li>

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

Halaman reg.php

<div style="background: blue; width: 100%; height: 100%; padding: 15px;" id='content'>

<h1>Register Member</h1>

<h3>Isikan formulir pendaftaran di bawah ini</h3>

<form action='proses-reg.php' method='post' enctype="multipart/form-data" name='form_register' id='form_register' >


(25)

<table width="80%" border="2" cellspacing="0" cellpadding="5" class='tabel_warna'>

<tr class='ganjil'> <th>Username</th>

<td><input name="username" type="text" id="username" size="30" /></td> </tr>

<tr class='genap'> <th>Password</th>

<td><input type="password" name="password" id="password" /></td> </tr>

<tr class='ganjil'> <th>Email</th>

<td><input type="text" name="email" id="email" /></td> </tr>

</table> <br/>

<b>Data Profil </b></br>

<table width="80%" border="2" cellspacing="0" cellpadding="5" class='tabel_warna'>

<tr class='ganjil'>

<th>Nama Lengkap</th>

<td><input name="nama_lengkap" type="text" id="nama_lengkap" size="30" /></td>

</tr>

<tr class='genap'> <th>Gender</th>

<td><select name="gender" id="gender"> <option value="-1">--</option>

<option value="1">Pria</option> <option value="2">Wanita</option> </select></td>

</tr>

<tr class='ganjil'> <th>Pekerjaan</th>

<td><input name="pekerjaan" type="text" id="pekerjaan" size="35" /></td> </tr>

<tr class='genap'> <th>Status</th>

<td><select name="status" id="status"> <option value="-1">--</option>

<option value="1">Mahasiswa Aktif</option> <option value="2">Alumni</option>

</select></td> </tr>

<tr class='ganjil'> <th>Foto</th>


(26)

<td><input type="file" name="gambar" id="foto" /></td> </tr>

</table> <br/>

<input name="tombol_submit" type="button" value="Daftar" onclick='cek_isian()' /> </form>

</br> </br> </br>

</div><!-- /content -->

<script language="javascript">

// deklarasikan funtion bernama cek_isian() function cek_isian() {

//sediakan dulu variabel pesan error var pesan = '';

//sediakan status error = belum ada error var ada_error = false;

// 1. cek username

// jika isian username kosong

if (document.getElementById('username').value =='') {

// tambahkan ke pesan error

pesan += "Username harus diisi \n"; // ubah status ada_error

ada_error = true; }

// 2. cek password

// jika isian password kosong

if (document.getElementById('password').value =='') {

// tambahkan ke pesan error

pesan += "Password harus diisi \n"; // ubah status ada_error

ada_error = true; }

// 3. cek panjang password


(27)

{

// tambahkan ke pesan error

pesan += "Passwor minimal 6 karakter \n"; // ubah status ada_error

ada_error = true; }

// 4. cek gender

if (document.getElementById('gender').value =='-1') {

// tambahkan ke pesan error

pesan += "Gender harus dipilih \n"; // ubah status ada_error

ada_error = true; }

//penutup

// jika ada error, maka tampilkan pesan if (ada_error == true) {

alert (pesan); }

// jika tidak ada error, maka kirimkan // form ini tujuannya

else {

document.getElementById('form_register').submit(); }

}

</script>

Halaman proses-reg.php <?php

// 1. membangun koneksi ke database server // dimana database nya?

// akses sebagai siapa? root // apa password root? kosong

mysql_connect ('localhost', 'root', ''); // 2. pilih databasenya

mysql_select_db ('pemamipa');


(28)

// dan tampung hasilnya

// menangkap isian form $username = $_POST['username'];

// tangkap password langsung dalam bentuk md5 $password = md5 ($_POST['password']);

$email = $_POST ['email'];

$nama_lengkap = $_POST ['nama_lengkap']; $gender = $_POST ['gender'];

$pekerjaan = $_POST ['pekerjaan']; $status = $_POST ['status'];

$imgFile = $_FILES['gambar']['name']; $tmp_dir = $_FILES['gambar']['tmp_name']; $imgSize = $_FILES['gambar']['size']; $upload_dir = 'uploads/'; // upload directory

$imgExt = strtolower(pathinfo($imgFile, PATHINFO_EXTENSION)); // get image extension

// valid image extensions

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions // rename uploading image

$userpic = rand(1000, 1000000) . "." . $imgExt; // allow valid image file formats

if (in_array($imgExt, $valid_extensions)) { // Check file size '500MB'

if ($imgSize < 50000000000) {

move_uploaded_file($tmp_dir, $upload_dir . $userpic); } else {

$errMSG = "Maaf, file terlalu besar."; }

} else {

$errMSG = "Hanya tipe JPG, JPEG, PNG & GIF yang diizinkan."; }

if (!isset($errMsg)) {

$user = mysql_query ("INSERT INTO user (username, email, nama_lengkap, gender, pekerjaan, status, password,gambar)

VALUES ('$username', '$email', '$nama_lengkap', '$gender', '$pekerjaan', '$status', '$password','$userpic')");

if ($user) { ?>


(29)

<script>

alert("Data berhasil di ditambah"); window.location.href = "index.php"; </script>

<?php } else {

echo "Error.." . mysql_error(); }

} ?>

Halaman Sitemap.php <!DOCTYPE html> <html lang="en"> <head>

<title>Student's Site | Sitemap</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page6">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id="isi" class="container">


(30)

<?php include 'inc/public/asside.php'; ?> <section id="content">

<section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">

<ul class="amazingslider-slides" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>


(31)

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

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

<!-- End of body section HTML codes --> <br>

<br>

<div class="img-box"><img src="images/pema.png">Pemerintahan Mahasiswa adalah acuan dari seluruh jurusan yang ada di dalam fakultas khususnya di fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Oleh karena itu <a href="index.php">PeMa FMIPA USU</a> yang menaungi sembulan jurusan yang memiliki banyak aspek dan kebutuhan di masing-masing jurusan tersebut memiliki tanggung jawab besar yang cukup membantu fakultas untuk membangun fakultas yang berorientasi pada kegiatan mahasiswa yang berada di kawasan Fakultas Matematika dan Ilmu pengetahuan Alam Universitas Sumatera Utara PeMa sebagai acuan dari setiap jurusan tersebut akan di ketahui secara jelas dalam website ini yang diolah oleh PeMa FMIPA USU periode 2015-2016 </div>

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

<?php include 'inc/public/foot.php'; ?>

<script type="text/javascript"> Cufon.now(); </script> <!-- END PAGE SOURCE -->

</body> </html>


(32)

Halaman Himpunan.php <!DOCTYPE html> <html lang="en"> <head>

<title>Student's Site | About Us</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page2">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id='isi' class="container">

<?php include 'inc/public/asside.php'; ?> <section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">

<ul class="amazingslider-slides" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />


(33)

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />


(34)

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

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

<!-- End of body section HTML codes --> <div class="inside">

<h2>About <span>team</span></h2> <ul class="list">

<br> <li><img src="images/gubernur.jpg">

<p>Gubernur/Wakil Gubernur FMIPA USU</p> </li>

<br> <li><img src="images/gubernur.jpg">

<p>Gubernur/Wakil Gubernur FMIPA USU</p> </li>

<li><img src="images/2page-img2.jpg"> <p>Renza Arfansa Nasution</p> </li>

</ul> </div>

<h2>Biografi <span>Pemerintahan Mahasiswa FMIPA Universitas Sumatera Utara</span></h2>

<p><span class="txt1">PeMa FMIPA USU</span> Organisasi Mahasiswa tertinggi di Fakultas yang menaungi seluruh aspirasi dan kegiatan dari seluruh mahasiswa dikawasan FMIPA USU </p>

<div class="img-box"><img src="images/pema.png">Pemerintahan Mahasiswa adalah acuan dari seluruh jurusan yang ada di dalam fakultas khususnya di fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Oleh karena itu <a href="index.php">PeMa FMIPA USU</a> yang menaungi sembulan jurusan yang memiliki banyak aspek dan kebutuhan di masing-masing jurusan tersebut memiliki tanggung jawab besar yang cukup membantu fakultas untuk membangun fakultas yang berorientasi pada kegiatan mahasiswa yang berada di kawasan Fakultas Matematika dan Ilmu pengetahuan Alam Universitas Sumatera Utara PeMa sebagai acuan dari setiap jurusan tersebut akan di ketahui secara jelas dalam website ini yang diolah oleh PeMa FMIPA USU periode 2015-2016 </div>

</div> </div>

<?php include 'inc/public/foot.php'; ?>

<script type="text/javascript"> Cufon.now(); </script> <!-- END PAGE SOURCE -->

</body> </html>


(35)

Halaman Informasi.php <!DOCTYPE html> <html lang="en"> <head>

<title>Student's Site | Articles</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page3">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id='isi' class="container">

<?php include 'inc/public/asside.php'; ?>

<section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">

<ul class="amazingslider-slides" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />


(36)

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />


(37)

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

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

<!-- End of body section HTML codes --> <div class="inside">

<li><span><img src="images/icon1.png"></span>

<h4><a href="#">Gubernur dan Wakil Gubernur FMIPA USU </a> </h4> <p>Andri M L Pandiangan dan M. Wendy Andika R dengan memperoleh total suara sebanyak 642 suara pada TPS1.</p>

</li>

<li><span><img src="images/icon2.png"></span> <h4>Branch Office</h4>

<p>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi.</p> </li>

<li class="last"><span><img src="images/icon3.png"></span> <h4>Student’s Time</h4>

<p>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi.</p> </li>

<li><img src="images/icon4.png"> <h4><a href="#">Article 4</a></h4>

Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi.</li>

<li><img src="images/icon5.png"> <h4><a href="#">Article 5</a></h4>

Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi.</li>

<li><img src="images/icon6.png"> <h4><a href="#">Article 6</a></h4>

Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi.</li>

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

<? include 'rightbar.php'; ?> </div>

</div>

<?php include 'inc/public/foot.php'; ?>

<script type="text/javascript"> Cufon.now(); </script> <!-- END PAGE SOURCE -->


(38)

</body> </html>

Halaman pendidikan.php <!DOCTYPE html>

<html lang="en"> <head>

<title>Student's Site | Contact Us</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page5">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id="isi" class="container"> <?php include 'inc/public/asside.php'; ?> <section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">


(39)

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />


(40)

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

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

<!-- End of body section HTML codes --> <div class="inside">

<h2>DEPARTEMEN <span>PENDIDIKAN</span></h2>

<div class="img-box"><img src="images/pendidikan.png" class="png"><span class="txt1">Departemen Pendidikan PeMa FMIPA USU</span>

<div class="artikel">Departemen Pendidikan adalah departemen yang ditetapkan oleh Keputusan Gubernur dan Wakil Gubernur saat membentuk Pemerintahan Mahasiswa Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara dengan beberapa program kerja yang cukup membangun elektabilitas dari Fakultas Matematika dan Ilmu Pengetahuan Alam itu sendiri.Departemen Pendidikan sendiri memiliki beberapa anggota yang harusnya memiliki pemikiran kreatif terhadap pengembangan kualitas dari Mahasiswa/Mahasiswi FMIPA USU.Sehingga memiliki daya guna dan daya jual yang cukup dalm menapak dunia pekerjaan kelak dan memiliki suatu pedoman dalam menentukan arah hidup secara lebih mandiri. </p> <p>Berikut ini adalah beberapa Program Kerja Departemen Pendidikan yang telah berjalan </p>

<span class="txt1">1.Seminar Teknologi FMIPA USU</span>

<div class="img-box-dalam"><img src="images/seminar1.png"></div>

<span class="txt1">2.Tryout SBMPTN FMIPA USU</span> <div class="img-box-dalam"><img src="images/tryout.jpg"><br> </div>

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

<?php include 'inc/public/foot.php'; ?>

<script type="text/javascript"> Cufon.now(); </script> <!-- END PAGE SOURCE -->

</body> </html>

Halaman humas.php <!DOCTYPE html>


(41)

<html lang="en"> <head>

<title>Student's Site | Contact Us</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page5">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id="isi" class="container"> <?php include 'inc/public/asside.php'; ?> <section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">

<ul class="amazingslider-slides" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />


(42)

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />


(43)

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

<!-- End of body section HTML codes --> <div class="inside">

<h2>Article <span>Name</span></h2>

<div class="img-box"><img src="images/himti.png" class="png"><span class="txt1">Himpunan Mahasiswa Teknik Informatika</span>

<div class="artikel">Dengan memiliki mahasiswa/mahasiswi terbanyak di Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara,jurusan ini memiliki kualitas yang cukup mumpuni di bidang komputer yang saat ini memiliki akreditasi yang cukup baik di BAN-PT yaitu dengan Akreditasi B dan didukung dengan kegiatan dari para mahasiswa jurusan ini , maka Teknik Informatika membentuk sebuah himpunan mahasiswa sebagai forum mereka yang disebut Himpunan Mahaasiswa Teknik Informatika (HIMTI). </p>

<p>Organisasi Yang menduduki jurusan D3 Teknik Informatika ini bernama Himpunan Mahasiswa D3 Teknik Informatika (HIMTI) yang dulu bernama Forum Komunikasi Mahasiswa Komputer(FKMK).Organisasi yang didirikan dan memiliki legalitas pada tahun 2009 ini berada di bawah naungan prodi Matematika yang juga bertugas wajib terhadap Pemerintahan Mahasiswa FMIPA USU.Memiliki pedoman-pedoman untuk menciptakan kesatuan di jurusan D3 Teknik Informatika, maka para perintis melangsungkan sebuah Musyawarah Umum Anggota(MUA) yang bertindak untuk merintis kader yang membawa organisasi ini kepada target dan sasaran yng sudah disepakati. </p>

<p>Dengan statute yang sudah dipersiapkan oleh para perintis dan kaderisasi yang cukup a lot di dalamnya dan diisi oleh para mahasiswa/mahasiswi dari D3 Teknik Informatika FMIPA USU maka terdapatlah serangkaian program kerja wajib yang mendukung sebuah performa organisasi terlebih mendukung sebuah kegiatan mahasiswa terbanyak di FMIPA USU ini untuk memiliki daya kualitas yang cukup tinggi dan adidaya dalam penggunanaanya dikawasan kampus maupun luar kampus </p>

<p>Patokan dasar dilandaskan dengan Pancasila dan Tridharma Mahasiswa maka organisasi HIMTI ini telah bersinergi dengan Himpunan Mahasiswa Jurusan lain untuk seterusnya meningkatkan Kegiatan Mahasiswa yang lebih signifikan dalam proses serta peran yang terarah dalam pengajaran dan kelancaran dari para mahasiswa/mahasiswi D3 Teknik Informatika.Dengan begitu, peran dan kualitas dari para mahasiswa dikembangkan secara lebih baik di dalam organisasi ini.Dengan pengaruh itu maka HIMTI adalah pemegang terbanyak mahasiswa di lingkungan FMIPA USU sehingga di dalam roda organisasi yang berlangsung lebih terarah dan lebih memiliki pedoman yang lebih berarti dalam peerjalanan ke arah yang lebih mengacu pada target-target yang telah ditentukan.

Oleh karena itu, HIMTI memegang peranan penting dalam berorientasi dan proses dari FMIPA USU yang saat ini juga bersinergi dengan PeMa FMIPA USU yang mendukung kegiatan tersebut.<br>

Statuta:<br>


(44)

2)Memilih dan menetapkan pengurus dalam setahun sekali<br><br>

3)Menerjemahkan setiap MUA terhadap kegiatan-kegiatan yang berlangsung<br><br>

4)Memberikan rekomendasi terhadap kegiatan dan kebijakan yang akan dijalankan nantinya<br><br>

5)Menjadi organisasi sebagai wadah umum kadersisasi anggota<br><br> </p>

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

<?php include 'rightbar.php'; ?> </div>

</div>

<?php include 'inc/public/foot.php'; ?>

<script type="text/javascript"> Cufon.now(); </script> <!-- END PAGE SOURCE -->

</body> </html>

Halaman hankam.php <!DOCTYPE html> <html lang="en"> <head>

<title>Student's Site | Contact Us</title> <meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/cufon-replace.js"></script>

<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script>

<!-- Insert to your webpage before the </head> --> <script src="sliderjs/jquery.js"></script>

<script src="sliderjs/amazingslider.js"></script>

<link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css"> <script src="sliderjs/initslider-1.js"></script>

<!-- End of head section HTML codes --> <!--[if lt IE 7]>

<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"> <script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>


(45)

<![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> </head>

<body id="page5">

<!-- START PAGE SOURCE --> <div class="wrap">

<?php include 'inc/public/head.php'; ?> <div id="isi" class="container"> <?php include 'inc/public/asside.php'; ?> <section id="content">

<!-- Insert to your webpage where you want to display the slider -->

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:680px;margin:0px auto 6px;">

<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">

<ul class="amazingslider-slides" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />

</li>

<li><img src="sliderimg/pelantikanrektor.jpg" alt="pelantikanrektor" title="pelantikan Rektor USU" />

</li>

<li><img src="sliderimg/pema.png" alt="pema" title="pema" /> </li>

<li><img src="sliderimg/PKKMB.jpg" alt="PKKMB" title="PKKMB" /> </li>

<li><img src="sliderimg/sumpahpemuda.jpg" alt="sumpahpemuda" title="Sumpah Pemuda oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/seminar.png" alt="seminar" title="Seminar Technology oleh Pema FMIPA USU" />

</li>

<li><img src="sliderimg/pilgub.jpg" alt="Pilgub" title="Gubernur Terpilih periode 2015-2016" />

</li>

<li><img src="sliderimg/pelantikan.jpg" alt="pelantikan" title="Pelantikan Gubernur dan Wakil Gubernur FMIPA USU 2015/2016" />

</li>

<li><img src="sliderimg/briefing.jpg" alt="briefing" title="Briefing panitia MIPA EXPO 2016" />

</li> </ul>

<ul class="amazingslider-thumbnails" style="display:none;">

<li><img src="sliderimg/Natalfmipa.jpg" alt="natal" title="NATAL FMIPA USU" />


(1)

4.

Gubernur PeMa FMIPA USU yang telah bersedia memberikan segala keperluan data maupun konsep dalam pengerjaan tugas akhir ini.

5.

Yang teristimewa, Ayahanda tercinta Rait Pandiangan dan Ibunda tersayang Natalina Girsang yang selalu mendoakan penulis agar lancar dalam segala urusan.

6.

Seluruh Keluarga besarku yang telah banyak memberikan dorongan dan doa

kepada penulis selama ini.

7.

Buat sahabat-sahabat KOM A’13 yang banyak memberi masukan dan hiburan selama penulisan tugas akhir ini.

8.

Seluruh Staf Pengajar Program Studi D3 Teknik Informatika Fakultas MIPA Universitas Sumatera Utara yang telah memberikan ilmu dan pengetahuannya kepada penulis selama masa perkuliahan.

Medan,

Juni 2016


(2)

SISTEM INFORMASI PEMERINTAHAN MAHASISWA FAKULTAS

MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERISTAS

SUMATERA UTARA

ABSTRAK

Tulisan ini dimaksudkan untuk merancang sebuah sistem publikasi dan pemasaran

PeMa secara online melalui website. Ditambah dengan aplikasi website yang dapat

memudahkan pemantauan perkembangan akademik setiap siswa dan peningkatan

sistem pembelajaran secara online. Sistem tersebut dibangun dengan bahasa

pemrograman PHP dan sebagai basis datanya menggunakan MySQLi serta

optimalisasi framework Boostrap 3 dan Mobirise.


(3)

DAFTAR GAMBAR

Nomor Gambar

Judul

Halaman

2.1

Dokumen HTML di browser

19

2.2

Tampilan Editor Sublime Text

26

4.1

Tampilan Menu Utama

42

4.2

Tampilan Halaman Himpunan

43

4.3

Tampilan Halaman Informasi

43

4.4

Tampilan Halaman Departemen

44

4.5

Tampilan Halaman Register

45

4.6

Tampilan Halaman D3 TI

45

4.7

Tampilan Halaman Program Kerja

45

4.8

Tampilan Halaman Beasiswa


(4)

DAFTAR TABEL

Nomor Tabel

Judul

Halaman

2.1

Daftar Database yang didukung PHP

23

2.2

Definisi Sistem Informasi

27

3.1

Simbol-simbol Data Flow

31

3.2

Tabel Admin

32

3.3

Tabel Dosen

32

3.4

Tabel Berita

33

3.5

Tabel Kelas

33

3.6

Arti Lambang-lambang

34


(5)

DAFTAR ISI

2.1 Pengertian Komputer ... 7

2.2 Sejarah Internet ... 9

2.3.1 Lahirnya Web ... 12

Cara Kerja Browser Mengambil Halaman ... 13

Cara Kerja Browser Menampilkan Halaman... 14

2.3.4 Istilah-istilah Umum Yang Harus Diketahui ... 14

2.4 HTML (Hypertext Markup Language) ... 15

2.4.1 Dokumen HTML ... 15

2.4.2 Penamaan Dokumen HTML ... 16

2.4.3 Elemen dan Tag HTML ... 16

<html> ... 17

…informasi tentang dokumen HTML ... 18

…informasi yang ditampilkan oleh browser web ... 18

<!-contoh.html-> ... 18

<title> Halaman contoh </title> ... 19

File ini merupakan file contoh.<br> ... 19

<b>ini untuk membuat huruf cetak tebal</b> ... 19

2.5.1 SejarahPHP ... 20

2.5.2 PHP / FI (Personal Home Page / Form Interpreter) ... 20

2.5.3 Kelebihan PHP Dari Bahasa Pemrograman Lain ... 21

2.5.4 Script PHP ... 22

2.5.5 Integrasi dengan Database... 23

2.7 Sublime Text 3 ... 26

2.8 Pengertian Sistem Informasi ... 27

BAB 3 ... 29

PERANCANGAN SISTEM ... 29


(6)

IMPLEMENTASI SISTEM ... 39 BAB 5 ... i KESIMPULAN DAN SARAN ... i