Sistem Informasi Sekolah Bebasis Web Pada SMA Negeri 1 Tanjungbalai

(1)

Hasil Uji Program Tugas Akhir SURAT KETERANGAN

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

Nama : DTM. ZIKRI AURA SYAHPUTRA

NIM : 122406053

Prog. Studi : Teknik Informatika

Judul TA : Sistem Informasi Sekolah Berbasis Web Pada SMA Negeri 1 Tanjungbalai

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, Juni 2015 Dosen Pembimbing

Program Studi D3 Teknik Informatika


(2)

(3)

LISTING PROGRAM

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="stylesheet" type="text/css" href="engine1/style.css" />

<script type="text/javascript" src="engine1/jquery.js"></script>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SMA NEGERI 1 TANJUNGBALAI</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>


(4)

<!--

.style1 {font-family: "Times New Roman", Times, serif} .style4 {

font-family: monospace; color: #849CCD;

font-size: xx-large; }

-->

</style> </head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">

<span class="preload1"></span> <span class="preload2"></span>

<?php include('menu.php')?>

</div>

<!-- End head -->

<!-- Side Bar -->


(5)

<div id="sidebar">

<p class="side_title style1">Menu</p> <ul class="side_item style1">

<li><a href="visi.php">Visi & Misi</a></li>

<li><a

href="strukturorganisasi.php">Struktur Organisasi</a></li>

<li><a

href="profil.php">Profil</a></li> <li><a

href="datasekolah.php">Data Identitas Sekolah</a></li> <li><a

href="saranadanprasarana.php">Sarana dan Prasarana</a></li>

<li><a

href="kegiatan.php">Kegiatan Kesiswaan</a></li> <li><a

href="prestasi.php">Prestasi Guru dan Siswa</a></li> <li><a href="bukutamu.php">Buku Tamu</a></li>

</br> </br>

<div> <?php include ('jam.php')?> </div>

<div> <?php include ('kalender.php')?> </div> </ul>

</div>

<!-- End Sidebar -->

<!-- Main Content -->


(6)

<div id="container">

<div id="content_wrapper">

<div id="content_wrapper"><font color="#339900"><h2 align="center"

class="style1"><marquee><span class="style4">SELAMAT DATANG DI WEBSITE SMA NEGERI 1 TANJUNGBALAI</span> </marquee>

</font></h2> </div>

<div id="main_content"> <div id="wowslider-container1">

<div class="ws_images"><ul>

<li><img src="data1/images/1.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_0"/></li>

<li><img src="data1/images/2.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_1"/></li>

<li><img src="data1/images/3.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_2"/></li>

<li><img src="data1/images/4.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_3"/></li>

<li><img src="data1/images/5.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_4"/></li>

<li><img src="data1/images/6.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_5"/></li>

<li><img src="data1/images/7.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"


(7)

<li><img src="data1/images/8.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_7"/></li>

<li><img src="data1/images/9.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_8"/></li>

<li><img src="data1/images/10.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_9"/></li>

<li><img src="data1/images/11.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_10"/></li>

<li><img src="data1/images/12.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_11"/></li>

<li><img src="data1/images/13.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_12"/></li>

<li><a href="http://wowslider.com"><img src="data1/images/14.jpg" alt="angular slider"

title="SMA N 1 TANJUNGBALAI" id="wows1_13"/></a></li> <li><img src="data1/images/15.jpg" alt="SMA N 1 TANJUNGBALAI" title="SMA N 1 TANJUNGBALAI"

id="wows1_14"/></li> </ul></div>

<div class="ws_bullets"><div> <a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/1.jpg" alt="SMA N 1 TANJUNGBALAI"/>1</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/2.jpg" alt="SMA N 1 TANJUNGBALAI"/>2</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/3.jpg" alt="SMA N 1 TANJUNGBALAI"/>3</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/4.jpg" alt="SMA N 1 TANJUNGBALAI"/>4</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/5.jpg" alt="SMA N 1 TANJUNGBALAI"/>5</span></a>


(8)

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/6.jpg" alt="SMA N 1 TANJUNGBALAI"/>6</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/7.jpg" alt="SMA N 1 TANJUNGBALAI"/>7</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/8.jpg" alt="SMA N 1 TANJUNGBALAI"/>8</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/9.jpg" alt="SMA N 1 TANJUNGBALAI"/>9</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/10.jpg" alt="SMA N 1 TANJUNGBALAI"/>10</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/11.jpg" alt="SMA N 1 TANJUNGBALAI"/>11</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/12.jpg" alt="SMA N 1 TANJUNGBALAI"/>12</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/13.jpg" alt="SMA N 1 TANJUNGBALAI"/>13</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/14.jpg" alt="SMA N 1 TANJUNGBALAI"/>14</span></a>

<a href="#" title="SMA N 1

TANJUNGBALAI"><span><img src="data1/tooltips/15.jpg" alt="SMA N 1 TANJUNGBALAI"/>15</span></a>

</div></div><div class="ws_script" style="position:absolute;left:-99%"><a

href="http://wowslider.com">video slider</a> by WOWSlider.com v8.2</div> <div class="ws_shadow"></div> </div> <script type="text/javascript" src="engine1/wowslider.js"></script> <script type="text/javascript" src="engine1/script.js"></script>


(9)

</div>

</div> </div>

<!-- End Main content -->

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 SMA NEGERI 1 TANJUNGBALAI </div>

</div> </center> </body>

</html>

<!-- End Footer -->

pengunjungsiswa.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


(10)

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

<style type="text/css"> <!--

.style1 {font-family: "Times New Roman", Times, serif} -->

</style> </head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">

<span class="preload1"></span> <span class="preload2"></span>

<?php include('menu.php')?>


(11)

</div>

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title style1 style1">Menu</p>

<ul class="side_item style1"> <li><a href="visi.php">Visi & Misi</a></li>

<li><a

href="strukturorganisasi.php">Struktur Organisasi</a></li>

<li><a

href="profil.php">Profil</a></li> <li><a

href="datasekolah.php">Data Identitas Sekolah</a></li> <li><a

href="saranadanprasarana.php">Sarana dan Prasarana</a></li>

<li><a

href="kegiatan.php">Kegiatan Kesiswaan</a></li> <li><a

href="prestasi.php">Prestasi Guru dan Siswa</a></li> <li><a href="bukutamu.php">Buku Tamu</a></li>

</ul> </div>

<!-- End Sidebar -->

<!-- Main Content -->


(12)

<div id="container">

<div id="content_wrapper"><div id="main_title"><center>Data Lengkap Siswa </center></div>

<div id="main_content">

<form name="form1" method="get" action="lihatsiswa.php">

<td><table width="225"><tr>

<td colspan="2" align="center" bgcolor="#669933"><span class=""><font color="#FFFFFF" size="+1">Search

</span></font></td></tr> </td></tr>

<tr><td width="85" bgcolor="#669933"

align="center"><span class="body"><img src="img/search-1.jpg"></span></td>

<td width="105" bgcolor="#669933"><input type="text" name="q" id="q" size="15"

placeholder="Search"/></td></tr>

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Search " />

<input style="font-weight: bold;" input type="reset" class="submit_btn" name="reset" id="reset"

value="Reset"></td> </tr></table></form>

<table><tr>

<td align="left"><font size="+1"><h6><ul><? include 'tabelsiswa.php'?></ul></h6></font></td></tr></table> <br><br><br><br>

</div>


(13)

</div>

<!-- End Main content -->

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>

</div> </center> </body>

</html>

<!-- End Footer -->

pengunjungguru.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">


(14)

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SMA NEGERI 1 TANJUNGBALAI</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

<style type="text/css"> <!--

.style1 {font-family: "Times New Roman", Times, serif} -->

</style> </head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">


(15)

<span class="preload2"></span>

<?php include('menu.php')?>

</div>

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title style1 style1">Menu</p>

<ul class="side_item style1"> <li><a href="visi.php">Visi & Misi</a></li>

<li><a

href="strukturorganisasi.php">Struktur Organisasi</a></li>

<li><a

href="profil.php">Profil</a></li> <li><a

href="datasekolah.php">Data Identitas Sekolah</a></li> <li><a

href="saranadanprasarana.php">Sarana dan Prasarana</a></li>

<li><a

href="kegiatan.php">Kegiatan Kesiswaan</a></li> <li><a

href="prestasi.php">Prestasi Guru dan Siswa</a></li> <li><a href="bukutamu.php">Buku Tamu</a></li>

</ul> </div>


(16)

<!-- End Sidebar -->

<!-- Main Content -->

<div id="container">

<div id="content_wrapper"><div id="main_title"><center>Data Lengkap Guru

</center></div>

<div id="main_content">

<form name="form1" method="get" action="lihatguru.php"> <td><table width="225"><tr>

<td colspan="2" align="center" bgcolor="#669933"><span class=""><font color="#FFFFFF" size="+1">Search

</span></font></td></tr> </td></tr>

<tr><td width="85" bgcolor="#669933"

align="center"><span class="body"><img src="img/search-1.jpg"></span></td>

<td width="105" bgcolor="#669933"><input type="text" name="q" id="q" size="15"

placeholder="Search"/></td></tr>

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Search " />

<input style="font-weight: bold;" input type="reset" class="submit_btn" name="reset" id="reset"

value="Reset"></td> </tr></table></form>

<table><tr>

<td align="left"><font size="+1"><h6><ul><? include 'tabelguru.php'?></ul></h6></font></td></tr></table>


(17)

<br><br><br><br>

</div>

</div> </div>

<!-- End Main content -->

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>

</div> </center> </body>

</html>

<!-- End Footer -->

pengunjungmapel.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">


(18)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SMA N 1 TANJUNGBALAI</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

<style type="text/css"> <!--

.style1 {font-family: "Times New Roman", Times, serif} -->

</style> </head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">

<span class="preload1"></span> <span class="preload2"></span>


(19)

<?php include('menu.php')?>

</div>

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title style1 style1">Menu</p>

<ul class="side_item style1"> <li><a href="visi.php">Visi & Misi</a></li>

<li><a

href="strukturorganisasi.php">Struktur Organisasi</a></li>

<li><a

href="profil.php">Profil</a></li> <li><a

href="datasekolah.php">Data Identitas Sekolah</a></li> <li><a

href="saranadanprasarana.php">Sarana dan Prasarana</a></li>

<li><a

href="kegiatan.php">Kegiatan Kesiswaan</a></li> <li><a

href="prestasi.php">Prestasi Guru dan Siswa</a></li> <li><a href="bukutamu.php">Buku Tamu</a></li>

</ul> </div>

<!-- End Sidebar -->


(20)

<!-- Main Content -->

<div id="container">

<div id="content_wrapper"><div id="main_title"><center>

Data Lengkap Mata Pelajaran </center></div>

<div id="main_content">

<form name="form1" method="get" action="lihatmapel.php">

<td><table width="225"><tr>

<td colspan="2" align="center" bgcolor="#669933"><span class=""><font color="#FFFFFF" size="+1">Search

</span></font></td></tr> </td></tr>

<tr><td width="85" bgcolor="#669933"

align="center"><span class="body"><img src="img/search-1.jpg"></span></td>

<td width="105" bgcolor="#669933"><input type="text" name="q" id="q" size="15"

placeholder="Search"/></td></tr>

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Search " />

<input style="font-weight: bold;" input type="reset" class="submit_btn" name="reset" id="reset"

value="Reset"></td> </tr></table></form>

<table><tr>

<td align="left"><font size="+1"><h6><ul><? include 'tabelmapel.php'?></ul></h6></font></td></tr></table> <br><br><br><br>


(21)

</div>

</div> </div>

<!-- End Main content -->

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>

</div> </center> </body>

</html>


(22)

index.php (admin)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Admin</title>

<link href="style/style.css" rel="stylesheet" type="text/css" />

</head>

<script src="inc/jquery.js" type="text/javascript" language="javascript"></script>

<script language="javascript">

$(document).ready(function() {

$("#login_form").submit(function() {

//remove all the class add the messagebox classes and start fading

$("#msgbox").removeClass().addClass('messagebox'). text('Memeriksa....').fadeIn(1000);

//check the username exists or not from ajax $.post("ajax_login.php",{

user_name:$('#user_name').val(),pass:$('#pass').val(),r and:Math.random() } ,function(data)


(23)

if(data=='yes') //if correct login detail {

$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox

{

//add message and change the class of the box and start fading

$(this).html('Masuk...').addClass('messageboxok').fad eTo(900,1,

function() {

//redirect to secure page document.location='home.php'; });

}); }

else {

$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox

{

//add message and change the class of the box and start fading

$(this).html('Data anda tidak

tepat!').addClass('messageboxerror').fadeTo(900,1); });

}

});

return false; //not to post the form

physically });


(24)

//now call the ajax also focus move from $("#password").blur(function()

{

$("#login_form").trigger('submit'); });

});

</script>

<style type="text/css"> .messagebox{

position:absolute; width:100px;

margin-left:30px;

border:1px solid #c93; background:#ffc;

padding:3px; }

.messageboxok{

position:absolute; width:auto;

margin-left:30px;

border:1px solid #349534; background:#C9FFCA;

padding:3px;

font-weight:bold; color:#008000;

}

.messageboxerror{


(25)

width:auto;

margin-left:30px;

border:1px solid #CC0000; background:#F7CBCA;

padding:3px;

font-weight:bold; color:#CC0000; }

</style>

<body bgcolor="#FFF"> <div id="unverse"> <center>

<div id="wrapper">

<div id="leftBg"></div> <div id="mainBg">

<div id="headLogin"> <center>

<div id="key"></div>

Login Sebagai <br /> Admin </center>

</div>

<div id="contentLogin">

<form id="login_form" name="login_form" action="" method="post">

<table width="341" border="0"> <tr>

<td align="center" width="100">Username</td>

<td align="" width="225"><input name="user_name" type="text" id="user_name"


(26)

</tr> <tr> <td align="center">Password</td>

<td><input name="pass" type="password" value="" id="pass" maxlength="50" size="30" /></td>

</tr> <tr>

<td>&nbsp;</td> <td id="notif"

valign="top">silahkan login untuk pengelolaan</td> </tr>

<tr>

<td colspan="2"><span id="msgbox" style="display:none"></span><input

id="submit" name="submit" type="submit" value="Login" /></td>

</tr> </table> </form> </div> </div>

<div id="rightBg"></div> </div>

</center> </div>

</body> </html>


(27)

home.php (admin)

<?php session_start();

// Developed by Roshan Bhattarai

// Visit http://roshanbh.com.np for this script and more.

// This notice MUST stay intact for legal use

// if session is not set redirect the user $u_name=$_SESSION['u_name'];

if(empty($u_name))

header("Location:redir.php");

//if logout then destroy the session and redirect the user

if(isset($_GET['logout'])) {

session_destroy();

header("Location:index.php"); }

//echo "<a href='secure.php?logout'><b>Logout<b></a>"; //echo "<div align='center'>You Are inside secured Page</a>";


(28)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to admin Page</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

</head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">


(29)

<span class="preload1"></span> <span class="preload2"></span>

<ul id="nav">

<li class="top"><a href="home.php" class="top_link"><span>Home</span></a></li>

<li class="top"><a href="siswa.php" id="products" class="top_link"><span>Siswa</span></a></li>

<li class="top"><a href="guru.php" id="contacts" class="top_link"><span>Guru</span></a></li>

<li class="top"><a href="mapel.php" id="contacts" class="top_link"><span>Mata Pelajaran</span></a></li> <li class="top">

<div align="right">

</div>

<ul class="sub_admin" id="hello_admin">

<li><a href="logout.php">Logout</a></li> </li>

</ul>

</div>

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title">Menu</p> <ul class="side_item">


(30)

<li>Hello,<?php echo "&nbsp; ".$_SESSION['u_name']?> [Logout]</li>

</a>

</div>

<!-- End Sidebar -->

<!-- Main Content -->

<div id="container">

<div id="content_wrapper"> <div

id="main_title"><center>Selamat Datang di Halaman Admin </center></div>

<div id="main_content">

Anda sekarang berada pada halaman Admin<img style="float:right; left:5px; margin-bottom:5px;" src="img/admin.jpg" />, dimana dengan halaman ini anda bisa menambah, mengupdate ,menghapus data siswa, data guru dan data mata pelajaran. Di halaman ini Anda dapat sepenuhnya memegang database pada website ini.</div>

</div> </div>

<!-- End Main content -->

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>


(31)

</div> </center> </body>

</html>

<!-- End Footer -->

siswa.php (admin)

<?php session_start();

// Developed by Roshan Bhattarai

// Visit http://roshanbh.com.np for this script and more.

// This notice MUST stay intact for legal use

// if session is not set redirect the user $u_name=$_SESSION['u_name'];

if(empty($u_name))

header("Location:redir.php");

//if logout then destroy the session and redirect the user

if(isset($_GET['logout'])) {


(32)

session_destroy();

header("Location:index.php"); }

//echo "<a href='secure.php?logout'><b>Logout<b></a>"; //echo "<div align='center'>You Are inside secured Page</a>";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to admin Page</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>


(33)

</head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">

<span class="preload1"></span> <span class="preload2"></span>

<ul id="nav">

<li class="top"><a href="home.php" class="top_link"><span>Home</span></a></li>

<li class="top"><a href="siswa.php" id="products" class="top_link"><span>Siswa</span></a>

<li class="top"><a href="guru.php" id="contacts" class="top_link"><span>Guru</span></a>

<li class="top"><a href="mapel.php" id="contacts" class="top_link"><span>Mata Pelajaran</span></a>

<li class="top"></li>

<li class="top">

<ul class="sub_admin" id="hello_admin">

<li><a href="logout.php">Logout</a></li> </ul>

</li> </ul>


(34)

</div>

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title">Menu</p> <ul class="side_item">

<a href="home.php?logout"> <li>Hello,<?php echo "&nbsp; ".$_SESSION['u_name']?> [Logout]</li>

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

<!-- End Sidebar -->

<!-- Main Content -->

<div id="container">

<div id="content_wrapper"><div id="main_title"><center>Data Siswa </center></div> <div id="main_content">

<form name="data" method="post" action="tambahsiswa.php">

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Tambah Data Siswa " /></td></tr></form>


(35)

<form name="form1" method="get" action="lihatsiswa.php">

<td><table width="225"><tr>

<td colspan="2" align="center" bgcolor="#669933"><span class=""><font color="#FFFFFF" size="+1">Search

</span></font></td></tr> </td></tr>

<tr><td width="85" bgcolor="#669933"

align="center"><span class="body"><img src="img/search-1.jpg"></span></td>

<td width="105" bgcolor="#669933"><input type="text" name="q" id="q" size="15"

placeholder="Search"/></td></tr>

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Search " />

<input style="font-weight: bold;" input type="reset" class="submit_btn" name="reset" id="reset"

value="Reset"></td> </tr></table></form>

<table><tr>

<td align="left"><font size="+1"><h6><ul><? include 'tabelsiswa.php'?></ul></h6></font></td></tr></table> <br><br><br><br>

</div>

</div> </div>

<!-- End Main content -->


(36)

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>

</center> </body>

</html>

<!-- End Footer -->

guru.php (admin)

<?php session_start();

// Developed by Roshan Bhattarai

// Visit http://roshanbh.com.np for this script and more.

// This notice MUST stay intact for legal use


(37)

$u_name=$_SESSION['u_name']; if(empty($u_name))

header("Location:redir.php");

//if logout then destroy the session and redirect the user

if(isset($_GET['logout'])) {

session_destroy();

header("Location:index.php"); }

//echo "<a href='secure.php?logout'><b>Logout<b></a>"; //echo "<div align='center'>You Are inside secured Page</a>";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to admin Page</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>


(38)

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

</head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">

<span class="preload1"></span> <span class="preload2"></span>

<ul id="nav">

<li class="top"><a href="home.php" class="top_link"><span>Home</span></a></li>

<li class="top"><a href="siswa.php" id="products" class="top_link"><span>Siswa</span></a>

<li class="top"><a href="guru.php" id="contacts" class="top_link"><span>Guru</span></a>

<li class="top"><a href="mapel.php" id="contacts" class="top_link"><span>Mata Pelajaran</span></a>

<li class="top"></li>


(39)

<ul class="sub_admin" id="hello_admin">

<li><a href="logout.php">Logout</a></li> </ul>

</li> </ul>

</div>

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title">Menu</p> <ul class="side_item">

<a href="home.php?logout"> <li>Hello,<?php echo "&nbsp; ".$_SESSION['u_name']?> [Logout]</li>

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

<!-- End Sidebar -->

<!-- Main Content -->

<div id="container">

<div id="content_wrapper"><div id="main_title"><center>Data Guru </center></div> <div id="main_content">


(40)

<form name="data" method="post" action="tambahguru.php">

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Tambah Data Guru " /></td></tr></form>

<br>

<form name="form1" method="get" action="lihatguru.php"> <td><table width="225"><tr>

<td colspan="2" align="center" bgcolor="#669933"><span class=""><font color="#FFFFFF" size="+1">Search

</span></font></td></tr> </td></tr>

<tr><td width="85" bgcolor="#669933"

align="center"><span class="body"><img src="img/search-1.jpg"></span></td>

<td width="105" bgcolor="#669933"><input type="text" name="q" id="q" size="15"

placeholder="Search"/></td></tr>

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Search " />

<input style="font-weight: bold;" input type="reset" class="submit_btn" name="reset" id="reset"

value="Reset"></td> </tr></table></form>

<table><tr>

<td align="left"><font size="+1"><h6><ul><? include 'tabelguru.php'?></ul></h6></font></td></tr></table> <br><br><br><br>


(41)

</div> </div>

<!-- End Main content -->

<!-- Footer -->

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>

</center> </body>

</html>

<!-- End Footer -->

mapel.php (admin)

<?php session_start();

// Developed by Roshan Bhattarai

// Visit http://roshanbh.com.np for this script and more.

// This notice MUST stay intact for legal use

// if session is not set redirect the user $u_name=$_SESSION['u_name'];

if(empty($u_name))

header("Location:redir.php");

//if logout then destroy the session and redirect the user

if(isset($_GET['logout'])) {


(42)

session_destroy();

header("Location:index.php"); }

//echo "<a href='secure.php?logout'><b>Logout<b></a>"; //echo "<div align='center'>You Are inside secured Page</a>";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to admin Page</title>

<link rel="shortcut icon" href="img/smile.png" title="Smile Bimbel Online"/>

<link href="css/homestyle.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"

href="pro_dropdown_2/pro_dropdown_2.css" />

<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>


(43)

</head>

<body> <br />

<center>

<div id="main_wrapper"> <div id="header"></div>

<div id="dropdown_menu">

<span class="preload1"></span> <span class="preload2"></span>

<ul id="nav">

<li class="top"><a href="home.php" class="top_link"><span>Home</span></a></li>

<li class="top"><a href="siswa.php" id="products" class="top_link"><span>Siswa</span></a>

<li class="top"><a href="guru.php" id="contacts" class="top_link"><span>Guru</span></a>

<li class="top"><a href="mapel.php" id="contacts" class="top_link"><span>Mata Pelajaran</span></a>

<li class="top"></li> <li class="top">

<ul class="sub_admin" id="hello_admin">

<li><a href="logout.php">Logout</a></li> </ul>

</li> </ul>

</div>


(44)

<!-- End head -->

<!-- Side Bar -->

<div id="sidebar">

<p class="side_title">Menu</p> <ul class="side_item">

<a href="home.php?logout"> <li>Hello,<?php echo "&nbsp; ".$_SESSION['u_name']?> [Logout]</li>

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

<!-- End Sidebar -->

<!-- Main Content -->

<div id="container">

<div id="content_wrapper"><div id="main_title"><center>Data Mata Pelajaran </center></div>

<div id="main_content">

<form name="data" method="post" action="tambahmapel.php">

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Tambah Mata Pelajaran " /></td></tr></form>


(45)

<form name="form1" method="get" action="lihatmapel.php">

<td><table width="225"><tr>

<td colspan="2" align="center" bgcolor="#669933"><span class=""><font color="#FFFFFF" size="+1">Search

</span></font></td></tr> </td></tr>

<tr><td width="85" bgcolor="#669933"

align="center"><span class="body"><img src="img/search-1.jpg"></span></td>

<td width="105" bgcolor="#669933"><input type="text" name="q" id="q" size="15"

placeholder="Search"/></td></tr>

<tr><td colspan="2" align="center" bgcolor="#669933"> <input style="font-weight: bold;" input type="submit" class="submit_btn" name="submit" id="submit" value=" Search " />

<input style="font-weight: bold;" input type="reset" class="submit_btn" name="reset" id="reset"

value="Reset"></td> </tr></table></form>

<table><tr>

<td align="left"><font size="+1"><h6><ul><? include 'tabelmapel.php'?></ul></h6></font></td></tr></table> <br><br><br><br>

</div>

</div> </div>

<!-- End Main content -->


(46)

<div id="footer">Copyright &copy; 2015 &nbsp; SMA NEGERI 1 TANJUNGBALAI </div>

</center> </body>

</html>


(47)

DAFTAR PUSTAKA

Abdul Kadir.2003. Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta: Andi Yogyakarta

Arbie. 2004. Manajemen Database dengan MySQL. Jilit 1. Yogyakarta: Andi Yogyakarta

Devlin, Ian, 2012, HTML5 multimedia: develop and design, peachpit press.

Master Web Indonesia. Artkel : Profesi Web di Indonesia. http://www.master.web.id

Raharjo,Budi. 2011. Belajar Pemrograman Web. Modula

Schultz, David & Craig Cook. 2007. Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress

Sutarman.2007.MembangunAplikasi Web Dengan PHP dan MySQL. Jakarta: GRAHA ILMU

Wikipedia. 2014. Personal Home Page. Diakses 24 Februari 2015. https://id.wikipedia.org/wiki/PHP.[Online]

Wikipedia. 2014. MySQL. Diakses 24 Februari 2015.


(48)

BAB 3

PERANCANGAN SISTIM

3. 1 Perencanaan dan Perancangan

Tahap perencanaan dan perancangan merupakan tahap awal yang dilakukan penulis dalam membangun website ini. Pada tahap ini penulis akan menjabarkan awal perancangan sistim, diagram alur, tujuan dan isi dari situs yang akan dibangun. Situs ini dirancang dengan menggunakan PHP sebagai bahas pemogramannya, MySQL sebagai databasenya, Apache sebagai servernya, dan Dreameamweaver 8 sebagai media untuk membuat layout dari situs yang akan dirancang.

Sebelum membangun sebuah website, ada beberapa pertanyaan sebagai identifikasi awal yang perlu dilakukan, antara lain:

a. Website apa yang akan dibangun ?

b. Siapa saja pengunjung yang akan diharapkan ke website tersebut ? c. Apa saja aktivitas yang dapat dilakukan pengunjung dalam website? d. Apa saja yang ingin dicapai dari pembuatan website tersebut ?

Dengan menjawab beberapa pertanyaan di atas, maka akan semakin membantu dan mempermudah dalam membangun website ini karena dengan pertanyaan-pertanyaan tersebut akan terbentuk kata kunci untuk membangun dan mengembangkan website ke arah yang lebih lanjut. Berkaitan dengan website yang akan dibangun, maka jawaban dari penulis untuk beberapa pertanyaan di atas sebagai berikut:

a. Website yang akan dibuat adalah sistim informasi berbasis web, yang menyediakan informasi yang menyangkut pendidikan dan kegiatan yang dilakukan sekolah.

b. Pengunjung situs tersebut adalah para siswa SMA N 1 Tanjungbalai, namun tidak menutup kemungkinan bagi masyarakat umum yang ingin mengetahui tentang SMA N 1 Tanjungbalai.


(49)

c. Aktivitas yang dapat dilakukan dalam situs tersebut adalah pengunjung dapat mengetahui informasi mengenai berita pendidikan terbaru, , mengetahui nama-nama siswa dan guru serta mata pelajaran, mengetahui kegiatan yang dilakukan sekolah seta informasi penting lainnya.

d. Target yang ingin dicapai dalam pembuatan situs ini adalah dapat memberikan kemudahan bagi siswa dalam memperoleh informasi yang dibutuhkan serta dapat membantu sekolah dalam mempromosikan sekolahnya.

Adapun struktur dari situs yang penulis buat ditunjukkan pada Gambar 3.1

Gambar 3.1 Struktur Website

3.2 Perancangan Halaman Website 3.2.1 Halaman Home

Halaman ini merupakan halaman utama dari website. Halaman ini berisikan beberapa informasi umum tentang sekolah dan link-link utama yang menuju ke halaman lainnya.

3.2.2 Halaman Menu

Halaman ini berisikan informasi sekilas tentang sekolah, alamat sekolah dan link-link yang menghubungkan ke halaman menu tentang sekolah lainnya, seperti Profil, Sarana dan Prasarana, Prestasi guru dan siswa, Identitas, Visi dan Misi, Struktur Organisasi, serta Komponen dari sekolah dan fungsinya.


(50)

Halaman ini berisikan data siswa seluruh stambuk, dan data guru serta data mata pelajaran.

3.2.4 Halaman Admin

Halaman admin berisikan login yang akan menghubungkan ke halaman administrator. Halaman ini khusus hanya dapat diakses oleh administrator website untuk melakukan pengaturan website seperti menambah, menghapus dan mengubah data.

3.3 Perancangan Data Flow Diagram (DFD)

Data flow diagram menggambarkan arus data dalam sistim dengan struktur, jelas dan menggunakan sejumlah bentuk-bentuk simbol untuk menggambarkan bagaimana data mengalir melalui suatu proses yang saling berkaitan secara grafis. Berikut ini adalah bentuk Data Flow Diagram dari website SMA NEGERI 1 TANJUNGBALAI.

-Info Menu -Login Administrator

-Info Data Siswa -Data Siswa -Info Data Guru -Data Guru


(51)

Laporan -Pengunjung -Info Data Siswa -Administrator -Info Data Guru

-Data Guru -Info Mata Pelajaran -Data Siswa

Gambar 3.2 Diagram Konteks Website

3.4 Perancangan Diagram Alir (flowchart) Website

Diagram alir (flowchart) ini menjelaskan secara rinci langkah-langkah dari proses program. Flowchart dibuat dengan menggunakan simbol-simbol tertentu yang


(52)

menyatakan setiap langkah program. Berikut ini adalah bentuk-bentuk flowchart dari website SMA NEGERI 1 TANJUNGBALAI.

3.4.1 Flowchart Menu Utama

Seorang pengunjung website dapat mengakses website SMA NEGERI 1 TANJUNGBALAI dan dapat berpindah dari halaman yang satu ke halaman yang lainnya. Masing-masing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung. Flowchart menu utama dapat dilihat pada Gambar 3.3

Gambar 3.3 Flowchart Menu Utama

3.4.2 Flowchart Admin

Halaman admin hanya bisa diakses oleh administrator. Username dan password dari administrator harus sesuai dengan tabel admin. Jika username dan password


(53)

sesuai maka admin akan masuk ke halaman administrator dan jika username atau password salah maka akan timbul pesan data tidak tepat dan diminta untuk login kembali. Flowchart admin dapat dilihat pada Gambar 3.4


(54)

3.5 Merancang Database Server

Database merupakan tempat penyimpanan data yang terstruktur sehingga dapat diakses dengan cepat dan mudah. Tahap mempersiapkan database ini merupakan tahap dimana penulis mempersiapkan tempat untuk menampung data di server. Data tersebut akan diproses oleh program yang kita buat pada tahap pemograman baik menambah, mengubah, penghapusan, dan menampilkan database itu sendiri. Database terdiri dari tabel-tabel yang dibuat menggunakan program MySQL. Database yang dirancang penulis adalah database sekolah yang terdiri dari 7 tabel sebagai berikut:

1. Tabel Admin

Field Name Type Width Description

Username varchar 20 Nama user

Password varchar 50 Password

Tabel 3.1 Tabel Admin

2. Tabel Siswa

Field Name Type Width Description

NIS int 10 Nomor induk siswa

Nama varchar 50 Nama siswa

Jenis_kelamin varchar 15 Jenis kelamin siswa

Agama varchar 10 Agama siswa

Kelas varchar 10 Kelas siswa

Tabel 3.2 Tabel Siswa

3. Tabel Guru

Field Name Type Width Description

No Int 30 Nomor

Nama varchar 45 Nama guru

mata_pelajaran varchar 50 Mata pelajaran yang di ajarkan pendidikan varchar 50 Lulusan terakhir guru


(55)

4. Tabel Buku Tamu

Field Name Type Width Description

Nama varchar 20 Nama pengunjung

Email varchar 50 Email pengunjung

Tanggal date - Tanggal komentar pengujung

Pesan text - Komentar pengunjung

Tabel 3.4 Tabel Buku Tamu

5. Tabel Mata Pelajaran

Field Name Type Width Description

Kode int 10 Kode mata pelajaran

mata_pelajaran varchar 20 Nama mata pelajaran

Kkm int 10 Nilai minimal kelulusan

Tabel 3.5 Tabel Mata Pelajaran

6. Tabel Prestasi Guru dan Siswa

Field Name Type Width Description

No int 10 Nomor urut prestasi

Prestasi varchar 50 Nama prestasi yang diraih Tahun varchar 50 Tahun prestasi tersebut

Tabel 3.6 Tabel Prestasi Guru dan Siswa

7. Tabel Sarana dan Prasarana

Field Name Type Width Description

No int 10 Nomor urut

nama_ruang varchar 30 Nama jenis ruangan jumlah_ruang varchar 30 Jumlah ruangan


(56)

BAB 4

IMPELENTASI SISTIM

4.1 Pengertian Implementasi Sistim

Implementasi sistim adalah langkah-langkah atau proses yang dilakukan dalam menyelesaikan desain sistim yang telah disetujui, selanjutnya diinstal, diuji dan mulai digunakan untuk menggantikan sistim yang diperbaiki. Implementasi merupakan tahap penerapan rancangan yang sudah dibuat ke dalam. Bahasa pemrograman yang digunakan. Dalam tahap ini dilakukan beberapa hal yaitu penulisan program, kompilasi dan membuat program aplikasi yang siap pakai atau executable.

4.2 Kebutuhan Sistim

Sarana-sarana sangat dibutuhkan untuk memperoleh hasil dalam perancangan sistim yang baik yaitu berupa komponen-komponen penting dalam menunjang penerapan sistim yang telah dirancang.

Komponen-komponen tersebut adalah sebagai berikut: 1. Perangkat Keras (hardware)

Hardware adalah komponen-komponen yang membentuk suatu sistim komputer yang berhubungan dengan peralatan (komponen) lainnya, sehingga memungkinkan komputer dapat melakukan tugasnya. Umumnya peralatan tersebut terdiri dari tiga jenis perangkat yaitu masukan (input device), perangkat pengolahan (processor) dan perangkat keluaran (output device), adapun hardware yang digunakan penulis dalam merancang sistim ini adalah:

a. Peralatan input, seperti: mouse, keyboard.

b. Peralatan proses, seperti: processor, RAM 4GB, motherboard, hardisk 500GB.

c. Peralatan output, seperti: monitor.


(57)

2. Perangkat Lunak (software)

Software adalah seluruh fasilitas suatu sistim pengolahan data yang bukan peralatan komputernya atau merupakan suatu susunan yang harus diberikan kepada unit pengolahan agar komputer dapat menjalankan pekerjaannya sesuai yang dibutuhkan. Fasilitas software terdiri dari sistim desain, program-program dan prosedur-prosedur. Software yang digunakan antara lain:

a. Sistim operasi minimum microsoft windows XP dan maksimun microsoft windows 8.

b. Macromedia Dreamweaver sebagai bahasa pemrograman dan perancangan desain.

3. Unsur Manusia (Brainware)

Brainware merupakan aspek manusia yang menangani pengolahan komputer maupun pengembangan, yang termasuk dalam brainware adalah:

a. Analisis sistim, yaitu orang membentuk dan membangun fasilitas rancangan sistim atau program.

b. Programmer, yaitu orang yang mengerti bahasa pemrograman yang digunakan dalam membuat dan membangun suatu program.

c. Operator (administrator), yaitu orang yang mengoperasikan sistim seperti memasukkan data untuk dioperasikan oleh komputer dalam menghasilkan informasi dan lainnya.

d. Public (pengguna), yaitu orang yang memakai sistim yang telah dirancang.

4.3 Tampilan Program 4.3.1 Tampilan Home

Tampilan home merupakan halaman yang paling pertama tampil saat user mengakses web sekolah ini, dalaman halaman in berisi menu-menu yang ada dalam web sekolah SMA N 1 Tanjungbalai.


(58)

Gambar 4.1 Tampilan Home

4.3.2 Tampilan Profil Sekolah

Tampilan profil ini menampilkan nama-nama kepala sekolah yang dimulai dari pertam sekolah ini didirikan sampai sekarang, dan juga disini terdapat sejarah singkat sekolah


(59)

4.3.3 Tampilan Buku Tamu

Pada Tamapilan ini pengunjung di berikan sarana atau media untuk memberikan komentar kepada pihak sekolah agar bisa memberikan saran atau masukan untuk web sekolah ini.

Gambar 4.3 Tampilan Buku Tamu

4.3.4 Tampilan Login Admin

Tampilan ini menampilkan suatu form untuk masuk ke halaman admin


(60)

4.3.5 Tampilan Admin

Tampilan ini bertujuan untuk mengubah data siswa, guru, ataupun mata pelajaran baik itu menambahkan data, menghapus data yang ada di dalam website sekolah ini.


(61)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari keterangan dan bab-bab sebelumnya penulis dapat mengambil beberapa kesimpulan sebagai berikut:

1. Dalam pembuatan website ini ada beberapa tahapan yang dilakukan penulis yaitu tahap perencanaan, tahap perancangan diagram alir (flowchart), merancang dan mempersiapkan database server, dan tahap implementasi sistim.

2. Website ini dibuat dengan menggunakan bahasa pemograman PHP sebagai bahasa pemogramannya, MySQLsebagai database servernya dan apache sebagai server. 3. Pembuatan website ini dilakukan pada intranet atau komputer lokal tanpa

terkoneksi ke internet. Koneksi internet dibutuhkan pada saat menghosting website dan pengaksesan situs setelah di hosting.

5.2 Saran

Adapun beberapa saran penulis pada pembuatan website ini adalah:

1. Perlu dilakukan pembaharuan atau update berkala oleh administrator pada website ini guna memberikan informasi yang terbaru.

2. Untuk menarik minat pengunjung, perlu dibuat rancangan layout atau template dengan gambar dan animasi yang menarik.

3. Perlu dilakukan penggandaan (backup) database secara teratur ke dalam media penyimpanan lainnya untuk mencegah hal-hal yang tidak diinginkan seperti data hilang atau rusak.

4. Dalam pembuatan situs, perlu dirancang dengan teliti agar dalam melakukan pembaharuan data tidak terjadi kesalahan.

5. Dengan adanya website ini dapat memotivasi siswa SMA Negeri 1 Tanjungbalai dalam berprestasi dan terus meningkatkan ilmu pengetahuannya khususnya dalam bidang Teknologi Informasi.


(62)

BAB 2

LANDASAN TEORI

2.1 Pengertian Komputer

Secara ringkas komputer dapat diartikan sebagai mesin yang melakukan tugas-tugas tertentu yang dikontrol oleh instruksi-instruksi digital. Komputer berasal dari bahasa latin yaitu computare yang mengandung arti menghitung. Komputer adalah mesinpenghitung elektronik yang cepat dan dapat menerima informasi input digital,kemudian memprosesnya sesuai dengan program yang tersimpan dalam memoridan menghasilkan output berupa informasi.

Komputer juga berasal dari bahasa inggris, to compute yang artinya menghitung. Jadi, komputer dapat diartikan sebagai alat untuk menghitung. Perkembangan teknologi dan ilmu komputer memberikan penigkatan pada kegunaan komputer, sehingga defenisi komputer juga mengalami perubahan. Sekarang ini, proses menghitung hanyalah merupakan sebagian kecil dari kegunaan komputer. Banyak fungsi lain yang dapat dilakukan dengan menggunakan komputer, seperti pengolahan data, permainan, pengontrol mesin, membuat grafik, mengedit data dan lain sebagainya.

2.1.1 Sistim Komputer

Sistim komputer adalah kumpulan beberapa perangkat komputer yang saling mendukung dan mengerjakan masing-masing fungsinya untuk melakukan suatu pekerjaan. Tujuan dari sistim komputer adalah mengolah data untuk menghasilkan informasi. Agar tujuan tersebut dapat tercapai maka elemen-elemen dari komputer harus lengkap.

Elemen-elemen dari sistim komputer adalah sebagai berikut:

1. Perangkat Keras (Hardware), yaitu perangkat pada komputer yang secara fisik dapat dilihat dan dapat disentuh, seperti keyboard, monitor dan casing.


(63)

2. Perangkat Lunak (Software), yaitu program yang berisi perintah-perintah pengolahan data, seperti Microsoft Office dan sebagainya.

3. Brainware adalah manusia yang terlibat dalam mengoperasikan serta mengatur sistim komputer.

Ketiga elemen komputer di atas harus saling berhubungan dan membentuk suatu kesatuan. Hardware tanpa adanya software, maka komputer tidak akan berfungsi seperti yang diharapkan, hanya berupa benda mati saja. Hardware yang telah didukung oleh software juga tidak akan berfungsi jika tidak ada manusia yang mengoperasikannya. Akan tetapi jika ketiga elemen sistim komputer tersebut sudah berhubungan dan berinteraksi dengan baik, maka komputer akan berfungsi sesuai dengan yang kita harapkan.

2.2 Pengertian Data, Data flow diagram (DFD), Diagram Alir (Flowchart), Informasi dan Sistim.

2.2.1 Pengertian Data.

Beberapa pengertian tentang data sebagai berikut:

a. Menurut berbagai kamus bahas Inggris-Indonesia, data diterjemahkan sebagai istilah yang berasal dari kata datum yang berarti fakta atau bahan keterangan. a. Pengertian yang lain mengatakan bahwa data merupakan deskripsi dari sesuatu kejadian yang kita hadapi.

b. Menurut Gordon B. Davis dalam bukunya Management Information System: Conceptual Foundation, Structures, and Development menyebutkan data sebagai bahan mentah dari informasi, yang dirumuskan sebagi sekelompok lambang acak yang menunjukkan jumlah atau tindakan atau hal-hal

lain.

Dari beberapa pengertian di atas, dapat disimpulkan bahwa data adalah bahan baku informasi, didefenisikan sebagai sekelompok simbol yang mewakili kuantitas, tindakan, dan sebagainya. Data terbentuk dari karakter, dapat berupa


(64)

alphabet, angka, maupun simbol khusus. Data disusun untuk diolah dalam betuk struktur data, struktur file, dan basis data.

2.2.2 Data Flow Diagram (DFD)

Data flow diagram adalah suatu gambaran grafis dari suatu sistim yang dapat menggambarkan arus data di dalam sistim dengan struktur, jelas dan menggunakan sejumlah bentuk-bentuk simbol untuk menggambarkan bagaimana data mengalir melalui suatu proses yang saling berkaitan.

Gambar 2.1 Simbol Data Flow Diagram

2.2.3 Diagram Alir (flowchart)

Diagram alir program (program flowchart) adalah suatu diagram yang menggambarkan arus logika dari data yang akan diproses dalam suatu program dariawal sampai akhir. Diagram alir terdiri dari simbol-simbol yang mewakili fungsi langkah program dan garis alir (flowline) menunjukkan urutan dari simbol-simbol yang akan di kerjakan.


(65)

Gambar 2.2 Simbol-simbol flowchart

2.2.4 Pengertian Informasi

Beberapa pengertian tentang informasi sebagai berikut:

a. Menurut Gordon B.Davis dalam bukunya Management Information System, conceptual Foundation, Structures, and Development menyebut informasi sebagai data yang telah diolah menjadi bentuk yang berguna bagi penerimanya


(66)

dan nyata, berupa nilai yang dapat dipahami di dalam keputusan sekarang maupun masa mendatang.

b. Menurut Barry E.Cushing dalam buku Accounting Information System and business Organization, dikatakan bahwa informasi merupakan suatu yang menunjukkan hasil pengolahan data yang diorganisasi dan berguna bagi orang yang menerimanya.

c. Menurut Robert N.Anthony dan Jhon Dearden dalam buku Management Control System, menyebutkan informasi sebagai suatu kenyataan, data, item, yang menambah pengetahuan bagi penggunanya.

d. Menurut Stephen A.Moscope dan Mark G. Simkin dalam bukunya Accounting information System, Concepts and Practise mengatakan informasi sebagai kenyataan atau bentuk-bentuk yang berguna yang dapat digunakan untuk pengambilan keputusan.

Dari beberapa pengertian di atas, dapat disimpulkan bahwa informasi merupakan hasil dari pengolahan data menjadi bentuk yang lebih berguna bagi yang menerimanya yang menggambarkan suatu kejadian nyata dan dapat digunakan sebagai alat bantu untuk pengambilan keputusan.

2.2.5 Pengertian Sistim

Beberapa pengertian tentang sistim sebagai berikut:

a. Dalam kamus Inggris-Indonesia nya Jhon M.Echols dan Hassan Shadily, system diartikan sebagai susunan.

b. Menurut M.Alexander dalam buku Information System Analisyst, Theory and Application, sistim merupakan suatu grup dari elemen-elemen baik yang berbentuk fisik maupun non-fisik yang menunjukkan suatu kumpulan saling berhubungan dan berinteraksi bersama menuju suatu tujuan, sasaran atau akhir dari sebuah sistim.

Dari pengertian sistim di atas dapat disimpulkan bahwa sistim adalah suatu kesatuan utuh terdiri dari beberapa bagian yang saling berhubungan dan berinteraksi untuk mencapai tujuan tertentu.


(67)

2.3 Sistim Informasi

Pada dasarnya sistim informasi merupakan suatu sistim yang dibuat oleh manusiayang terdiri dari komponen-komponen dalam organisasi untuk mencapai suatu tujuan yaitu menyajikan data informasi. Sistim informasi menerima masukan data dan instruksi, mengolah data tersebut sesuai dengan instruksi, dan mengeluarkan hasilnya.

2.3.1 Komponen Sistim Informasi

Sistim informasi memiliki komponen-komponen yang saling berinteraksi membentuk satu kesatuan dalam mencapai sasaran sistim. Adapun komponen dari sistim informasi adalah sebagai berikut:

a. Blok Masukan (Input Block)

Blok masukan dalam sebuah sistim informasi meliputi metode-metode dan media untuk menangkap data yang akan dimasukkan, dapat berupa dokumen-dokumen dasar.

b. Blok Model (Model Block)

Blok model ini terdiri dari kombinasi prosedur, logika dan model matematik yang berfungsi memanipulasi data untuk keluaran tertentu.

c. Blok Keluaran (Output Block)

Blok keluaran berupa data-data keluaran seperti dokumen output dan informasi yang berkualitas.

d. Blok Teknologi (Thechnology Block)

Blok teknologi digunakan untuk menerima input, menjalankan model, menyimpan data dan mengakses data, menghasilkan dan mengirimkan keluaran serta membantu pengendalian dari sistim secara keseluruhan. Blok teknologi ini merupakan komponen bantu yang memperlancar proses pengolahan yang terjadi dalam sistim.

e. Blok Basis Data (Database Block)

Merupakan kumpulan data yang berhubungan satu dengan lainnya, tersimpan di perangkat keras komputer dan perangkat lunak untuk memanipulasinya.


(68)

f. Blok Kendali (Control Block)

Meliputi masalah pengendalian terhadap operasional sistim berfungsi mencegah dan menangani kesalahan/kegagalan sistim.

2.3.2 Perangkat Sistim Informasi

Sebuah sistim informasi yang lengkap memiliki kelangkapan sebagai berikut: a. Hardware

Bagian ini merupakan bagian perangkat keras sistim informasi. Sistim informasi modren memiliki perangkat keras seperti komputer, printer dan teknologi jaringan komputer.

b. Software

Bagian ini merupakan bagian perangkat lunak sistim informasi. Sistim informasi modren memiliki perangkat lunak untuk memerintahkan komputer dalam melaksanakan tugas yang harus dikerjakannya.

c. Data

Merupakan komponen dasar dari sistim informasi yang akan diproses lebih lanjut untuk menghasilkan informasi.

d. Prosedur

Merupakan bagian yang berisikan dokumentasi prosedur atau proses-proses yang terjadi dalam sistim.

e. Manusia

Manusia merupakan bagian utama dalam suatu sistim informasi. Yang terlibat dalam komponen manusia adalah sebagai berikut:

1. Cleciral personal : untuk menangani transaksi dan pemrosesan data dan melakukan incuiry (operator).

2. First level manager : untuk mengolah pemrosesan data didukung dengan perencanaan, penjadwalan, identifikasi situasi out-of control dan pengambilan keputusan level menengah kebawah.


(69)

4. Management : untuk pembuatan laporan berkal, permintaan khusus, analisis khusus, laporan khusus, pendukung analisis pengambilan keputusan level atas. 2.4 Internet

Internet (International Networking) adalah sutu kumpulan jaringan komputer dari berbabagai tipe, yang saling berkomunikasi dengan menggunakan suatu standar komunikasi. Saat ini ada jutaan sistim komputer dengan puluhan juta pengguna di seluruh dunia telah bergabung dengan internet.

Secara teknis internet merupakan dua komputer atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer didunia, yang saling berinteraksi dan bertukar informasi, dari segi ilmu pengetahuan, internet merupakan sebuah perpustakaan yang di dalamnya terdapat jutaan bahkan miliaran informasi atau data yang dapat berupa teks, grafik, suara maupun animasi untuk melakukan pertukaran informasi jarak jauh.

2.4.1 Manfaat Internet

Sejalan dengan meningkatnya peranan informasi dalam bisnis maupun teknologi, akses terhadap sumber dan jaringan informasi semakin penting bagi pengguna. Internet adalah jaringan informasi komputer mancanegara yang berkembang sangat pesat dan pada saat ini dapat dikatakan sebagai jaringan informasi terbesar di dunia, manfaat internet sangat terasa bagi pengguna.

Adapun manfaat yang bisadiperoleh dari internet adalah sebagai berikut:

a. Informasi yang didapat lebih cepat dan murah dengan menggunakan aplikasi fasilitas internet seperti e-mail, www, newsgroupdan lain sebagainya.

b. Mengurangi biaya kertas dan biaya distribusi, dengan adanya koran, majalah dan brosur di dalam internet.

c. Sebagai media promosi, misalnya pengenalan dan pemesanan produk perusahan.

d. Komunikasi interaktif melalaui e-mail, video conferencing, dan sebagainya. e. Sebagai alat penelitian dan pengembangan.

f. Sebagai alat pertukaran data.


(70)

Website atau world wide web sering disingkat sebagai www atau web, yaitu sebuah sistim dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain direpresentasikan dalam bentuk hypertext dan dapat diakses oleh perangkat lunak yang disebut browser.

Kemampuan di atas telah menjadikan web sebagai service yang paling cepat pertumbuhannya. Web mengijinkan pemberian highlight (penyorotan) pada kata-kata atau gambar dalam sebuah dokumen untuk menghubungkan atau menunjuk dari sembarang tempat pada dokumen lain. Dengan sebuah browser yang memiliki graphical user interface (GUI), link-link dapat dihubungkan ke tujuannya dengan menunjuk link tersebut dengan mouse dan meng-klik link tersebut. Menurut kemampuannya, web dapat dibedakan menjadi 2 (dua), yaitu web statis dan web dinamis.

2.5.1 Web Statis

Web statis adalah web yang berisi informasi yang sifatnya statis (tetap). Disebut statis karena pengguna tidak dapat berinteraksi dengan web tersebut. Untuk mengetahui web tersebut statis atau dinamis dapat dilihat dari tampilannya. Jika suatu web hanya berhubungan dengan halaman weblain berisisuatu informasi yang tetap maka web tersebut statis.

Pada web statis, pengguna hanya dapat melihat isi dokumen pada halaman web yang berisi informasi yang tetap atau tidak berubah. Interaksi pengguna hanya terbatas dapat melihat informasi yang ditampilkan. Web statis biasanya merupakan HTML yang ditulis pada editor teks dan disimpan dalam bentuk .html atau .htm.

2.5.2 Web Dinamis

Web dinamis adalah web yang menampilkan informasi serta berinteraksi dengan pengguna. Web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan forms ehingga dapat mengolah informasi yang ditampilkan. Web dinamis bersifat interaktif, tidak kaku, dan terlihat lebih indah. Informasi di web pada umumnya ditulis dalam format HTML dan PHP.


(1)

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan Maha Penyayang, dengan limpah karunia-Nya Penulis dapat menyelesaikan penyusunan tugas akhir dengan judul Sistim Informasi Sekolah Berbasis Web Pada SMA Negeri 1 Tanjungbalai.

Terimakasih penulis sampaikan kepada Bapak Dr. Faigiziduhu Bu’ulolo, M.Si, selaku pembimbing yang telah meluangkan waktunya selama penyusunan Tugas Akhir ini. Terimakasih kepada Ibu Dr.Elly Rosmaini, M.Si, dan Bapak Dr. Syahriol Sitorus, M.IT, selaku Ketua dan Sekretaris Progam Studi D3 Teknik Informatika FMIPA USU. Terimakasih kepada Bapak Prof. Dr. Tulus, M.Si, Ph.D dan Ibu Dr. Mardiningsih, M.Si, selaku Ketua Departemen dan Sekretaris Departemen Matematika FMIPA USU Medan. Terimakasih Kepada Bapak Dr. Sutarman, M.Sc, selaku Dekan FMIPA USU. Terimakasih Kepada seluruh Staff dan Dosen D3 Teknik Informatika FMIPA USU, pegawai FMIPA USU dan rekan-rekan kuliah dan tidak terlupakan kepada BapakDTM. Dahrumsyah, IbuRabi’ah dan keluarga yang selama ini memberikan bantuan dan dorongan yang diperlukan. Semoga Tuhan Yang Maha Esa akan membalasnya.


(2)

ABSTRAK

Tugas akhir ini bertujuan membangun sebuah sistim informasi yang berbasis web. Sistim perancangan dalam pembuatan website Sistim Informasi Berbasis Web Pada SMA Negeri 1 Tanjungbalai ini dikembangkan dengan menggunakan beberapa software yaitu, XAMPP yang merupakan gabungan dari Apache Web

Server, PHP dan MySQL dan Macromedia Dreamwaver 8. Dengan menggunakan Macromedia Dreamwaver 8 maka pendesainan web akan lebih cepat dan mudah.

Sistim informasi ini berguna untuk mempermudah masyarakat Tanjungbalai khususnya untuk mengetahui tentang Sekolah SMA Negeri 1 yang ada di Tanjungbalai.

Kata Kunci :Sistim Informasi, Masyarakat Tanjungbalai, SMA Negeri 1 Tanjungbalai


(3)

DAFTAR ISI

Halaman

PERSETUJUAN ii

PERNYATAAN iii

PENGHARGAAN iv

ABSTRAK v

DAFTAR ISI vi

DAFTAR GAMBAR viii

DAFTAR TABEL ix

BAB 1 PENDAHULUAN 1

1.1 Latar Belakang 1

1.2 Perumusan Masalah 2

1.3 Batasan Masalah 2

1.4 Tujuan 2

1.5 Manfaat 3

1.6 Metodologi Penelitian 3

1.7 Tinjauan Pustaka 4

BAB 2 LANDASAN TEORI 8

2.1 Pengertian Komputer 8

2.1.1 Sistim computer 8

2.2 Pengertian Data, DFD, Flowchart, informasi dan sistim 9

2.2.1 Pengertian data 9

2.2.2 Data flow diagram (DFD) 10

2.2.3 Diagram alir (flowchart) 11

2.2.4 Pengertian informasi 12

2.2.5 Pengertian sistim 12

2.3 Sistim Informasi 13

2.3.1 Komponen sistim informasi 13

2.3.2 Perangkat sistim informasi 14

2.4 Internet 15

2.4.1 Manfaat Internet 15

2.5 Website 16

2.5.1 Web statis 16

2.5.2 Web dinamis 17

2.6 Hypertext Markup Language (HTML) 17

2.7 PHP 18

2.7.1 Sejarah singkat PHP 18

2.7.2 Kelebhihan PHP 19

2.7.3 Sintaks PHP 20

2.8 MySQL 20

2.9 Apache 22

2.10 Cassading Style Sheet 22

2.11 JavaScript 23


(4)

BAB 3 PERANCANGAN SISTIM 25

3.1 Perencanaan Perancangan 25

3.2 Perancangan Halaman Website 26

3.2.1 Halaman home 26

3.2.2 Halaman menu 26

3.2.3 Halaman guru,siswa,mata pelajaran 27

3.2.4 Halaman admin 27

3.3 Perancangan Data Flow Diagram 27

3.4 Perancangan Diagram Alir (Flowchart) 28

3.4.1 Flowchart menu utama 28

3.4.2 Flowhart menu admin 29

3.5 Merancang Database Server 30

BAB 4 IMPLEMENTASI SISTIM 33

4.1 Pengertian Implementasi Sistim 33

4.2 Kebutuhan Sistim 33

4.3 Tampilan Program 34

4.3.1 Tampilan home 34

4.3.2 Tampilan profil sekolah 35

4.3.3 Tampilan buku tamu 36

4.3.4 Tampilan login admin 36

4.3.5 Tampilan admin 37

BAB 5 KESIMPULAN DAN SARAN 38

5.1 Kesimpulan 38

5.2 Saran 38

DAFTAR PUSTAKA 39


(5)

DAFTAR GAMBAR

Nomor gambar Judul Halaman

2.1 Simbol Data Flow Diagram 10

2.2 Simbol-simbol flowchart 11

3.1 Struktur Website 26

3.2 Diagram Konteks Website 28

3.3 Flowchart Menu Utama 29

3.4 Flowchart Menu Admin 30

4.1 Tampilan Home 35

4.2 Tampilan Profil Sekolah 35

4.3 Tampilan Buku Tamu 36

4.4 Tampilan Login Admin 36


(6)

DAFTAR TABEL

Nomor table Judul Halaman

3.1 Tabel Admin 31

3.2 Tabel Siswa 31

3.1 Tabel Guru 31

3.4 Tabel Buku Tamu 31

3.5 Tabel Mata Pelajaran 32

3.6 Tabel Prestasi Guru dan Siswa 32