• Tidak ada hasil yang ditemukan

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

N/A
N/A
Protected

Academic year: 2017

Membagikan "Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web"

Copied!
121
0
0

Teks penuh

(1)

Hasil Uji Program Tugas Akhir SURAT KETERANGAN

Yang bertanda tangan dibawah ini, menerangkan bahwa Tugas Akhir Mahasiswa

Program Diploma 3 Teknik Informatika :

Nama : DANIEL SIJABAT

NIM : 132406111

Program Studi : D3 Teknik Informatika

Judul TA : Perancangan Sistem Informasi Pada SMP Swasta HKBP

Sipahutar Berbasis Web

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut diatas

tanggal...Juni 2016

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 2016 Dosen Pembimbing

(2)

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : DANIEL SIJABAT

Nomor Stambuk : 132406111

Judul Tugas Akhir : PERANCANGAN SISTEM INFORMASI PADA

SMP SWASTA HKBP SIPAHUTAR BERBASIS WEB

Dosen Pembimbing : Dr. Open Darnius, M.Sc

Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No. Tanggal Asisten Bimbingan

Pembahasan pada Asistensi Mengenai,

pada Bab :

Paraf Dosen

Pembimbing Keterangan

1

Ketua Program Studi D3 Teknik Disetujui,

Informatika Fakultas MIPA USU Pembimbing Utama

Dr. Elly Rosmaini, M.Si.

(3)

LISTING PROGRAM

1.Index.php

<?php

session_start();

require "../library/fungsi.php";

if($_SESSION["username"] == "")

{

echo '

<script type="text/javascript">

document.location.href="../portal.php";

</script>

';

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Portal Akademik UTC">

<meta name="author" content="Sams">

<meta name="keyword" content="Portal, Akademik, UTC">

<link rel="shortcut icon"

href="../assets/portal/img/logobg.png">

(4)

<!-- Bootstrap CSS -->

<link href="../assets/portal/css/bootstrap.min.css" rel="stylesheet">

<!-- bootstrap theme -->

<link href="../assets/portal/css/bootstrap-theme.css" rel="stylesheet">

<!--external css-->

<!-- font icon -->

<link href="../assets/portal/css/elegant-icons-style.css" rel="stylesheet" />

<link href="../assets/portal/css/font-awesome.min.css" rel="stylesheet" />

<!-- full calendar css-->

<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />

<link

href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />

<!-- easy pie chart-->

<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css"

media="screen"/>

<!-- owl carousel -->

<link rel="stylesheet"

href="../assets/portal/css/owl.carousel.css" type="text/css">

<link href="../assets/portal/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">

<!-- Custom styles -->

<link rel="stylesheet"

href="../assets/portal/css/fullcalendar.css">

<link href="../assets/portal/css/widgets.css" rel="stylesheet">

(5)

<link href="../assets/portal/css/style-responsive.css" rel="stylesheet" />

<link href="../assets/portal/css/xcharts.min.css" rel=" stylesheet">

<link href="../assets/portal/css/jquery-ui-1.10.4.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->

<!--[if lt IE 9]>

<script src="../assets/portal/js/html5shiv.js"></script>

<script

src="../assets/portal/js/respond.min.js"></script>

<script src="../assets/portal/js/lte-ie7.js"></script>

<![endif]-->

</head>

<body>

<section id="container" class="">

<header class="header dark-bg">

<div class="toggle-nav">

<div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>

</div>

<a href="index.html" class="logo">Sistem Informasi <span class="lite">Akademik</span></a>

<div class="top-nav notification-row">

<ul class="nav pull-right top-menu">

<li class="dropdown">

(6)

<span class="username">

<?php

sapa_user();

?>

</span>

<b class="caret"></b>

</a>

<ul class="dropdown-menu extended logout">

<div class="log-arrow-up"></div>

<li class="eborder-top">

<a href="profil.php"><i class="fa fa-user"></i>Profil</a>

</li>

<li>

<a href="keluar.php"><i class="fa fa-sign-out"></i> Keluar</a>

<div id="sidebar" class="nav-collapse ">

<ul class="sidebar-menu">

<li class="active">

<a class="" href="index.php">

(7)

</a>

</li>

<li class="">

<a href="guru.php" class="">

<i class="fa fa-user"></i>

<span>Guru</span>

</a>

</li>

<li class="">

<a href="siswa.php" class="">

<i class="fa fa-user"></i>

<span>Siswa</span>

</a>

</li>

<li>

<a class="" href="matapelajaran.php">

<i class="fa fa-book"></i>

<span>Mata Pelajaran</span>

</a>

</li>

<li>

<a class="" href="kelas.php">

<i class="fa fa-bookmark"></i>

<span>Kelas</span>

</a>

</li>

<li>

<a class="" href="monitor-sistem.php">

<i class="fa fa-cog"></i>

(8)

</a>

</li>

</ul>

</div>

</aside>

<section id="main-content">

<section class="wrapper">

<div class="row">

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

<h3 class="page-header"><i class="fa fa-home"></i> Beranda</h3>

</div>

</div>

<div class="row">

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

<div class="panel panel-default">

<div class="panel-heading">

<h2><strong>Selamat Datang Di Portal Akademik</strong></h2>

</div>

<div class="panel-body">

<p style="text-align: justify">

<b>Selamat Datang di Sistem Informasi SMP Swasta HKBP Sipahutar. Sistem Informasi Akademik adalah sistem yang memungkinkan para civitas akademika SMP Swasta HKBP

Sipahutar untuk menerima informasi dengan lebih cepat melalui Internet. Sistem ini diharapkan dapat memberi kemudahan setiap civitas akademika untuk melakukan

(9)

<div class="row">

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

<div class="panel panel-default">

<div class="panel-heading">

<h2><strong> Visi </strong></h2>

</div>

<h2>SISWA TERDIDIK, TERAMPIL, DAN MANDIRI BERDASARKAN IMAN DAN KEPERCAYAAN DAN BERWAWASAN LINGKUNGAN</h2>

<li>Menciptakan semua warga sekolah punya karakter dan disiplin yang baik</li>

<li>Melaksanakan KBM yang efisien dan efektif</li>

<li>Meningkatkan prestasi Akademik dan Non Akademik</li>

<li>Mewujudkan lulusan yang mampu berkompetensi dan menjadi panutan dalam lingkungan masyarakat</li>

<li>Melengkapi perangkat pembelajaran/kurikulum</li>

<li>Mewujudkan tenaga pendidik dan kependidikan yang berkualitas</li>

<li>Melengkapi sarana dan prasarana pendidikan</li>

<li>Melibatkan patisipasi masyarakat dalam penyelenggaraan pendidikan</li>

<li>Membentuk kepercayaan/iman yan tangguh</li>

<li>Menciptakan lingkungan sekolah yang ASRI</li>

</ul>

<div class="row">

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

<div class="panel panel-default">

<div class="panel-heading">

<h2><strong> Tujuan </strong></h2>

</div>

<li>Meningkatkan disiplin bagi semua warga sekolah</li>

(10)

<li>Prestasi akademik dn non akademik meningkat</li>

<li>Perangkat-perangkat pembelajaran lengkap</li>

<li>Memiliki sarana dan prasarana pembelajaran yang sesuai dengan standart Nasional</li>

<li>Terlaksananya manajemen berbasis sekolah secara optimal</li>

<li>Semua warga sekolah mempunyai iman yang kuat dan karakter yang baik</li>

</div>

<script src="../assets/portal/js/jquery.js"></script>

<script src="../assets/portal/js/jquery-ui-1.10.4.min.js"></script>

<script src="../assets/portal/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="../assets/portal/js/jquery-ui-1.9.2.custom.min.js"></script>

<!-- bootstrap -->

(11)

<script src="../assets/portal/js/jquery.nicescroll.js" type="text/javascript"></script>

<!-- charts scripts -->

<!-- jQuery full calendar -->

<<script

src="../assets/portal/js/fullcalendar.min.js"></script>

<script src="../assets/portal/js/scripts.js"></script>

<!-- custom script for this page-->

<script

src="../assets/portal/js/sparkline-<script src="../assets/portal/js/gdp-data.js"></script>

<script src="../assets/portal/js/morris.min.js"></script>

<script src="../assets/portal/js/sparklines.js"></script>

<script src="../assets/portal/js/charts.js"></script>

<script

src="../assets/portal/js/jquery.slimscroll.min.js"></scri pt>

</body>

(12)

2.profil.php

<?php

session_start();

require "../library/fungsi.php";

if($_SESSION["username"] == "")

{

echo '

<script type="text/javascript">

document.location.href="../portal.php";

</script>

';

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Portal Akademik UTC">

<meta name="author" content="Sams">

<meta name="keyword" content="Portal, Akademik, UTC">

(13)

<title>Profil - Sistem Informasi Akademik</title>

<!-- Bootstrap CSS -->

<link

href="../assets/portal/css/bootstrap.min.css" rel="stylesheet">

<!-- bootstrap theme -->

<link href="../assets/portal/css/bootstrap-theme.css" rel="stylesheet">

<!--external css-->

<!-- font icon -->

<link href="../assets/portal/css/elegant-icons-style.css" rel="stylesheet" />

<link href="../assets/portal/css/font-awesome.min.css" rel="stylesheet" />

<!-- full calendar css-->

<link

href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />

<link

href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />

<!-- easy pie chart-->

<link

href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>

<!-- owl carousel -->

<link rel="stylesheet"

href="../assets/portal/css/owl.carousel.css" type="text/css">

<link href="../assets/portal/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">

(14)

<link rel="stylesheet"

href="../assets/portal/css/fullcalendar.css">

<link href="../assets/portal/css/widgets.css" rel="stylesheet">

<link href="../assets/portal/css/style.css" rel="stylesheet">

<link href="../assets/portal/css/style-responsive.css" rel="stylesheet" />

<link

href="../assets/portal/css/xcharts.min.css" rel=" stylesheet">

<link href="../assets/portal/css/jquery-ui-1.10.4.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->

<section id="container" class="">

<header class="header dark-bg">

<div class="toggle-nav">

<div class="icon-reorder

tooltips" original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>

(15)

<a href="index.html" class="logo">Sistem Informasi <span

class="lite">Akademik</span></a>

<div class="top-nav notification-row">

<ul class="nav pull-right top-menu">

<li class="dropdown">

<a

data-toggle="dropdown" class="dropdown-toggle" href="#">

<span menu extended logout">

<div class="log-arrow-up"></div>

<li class="eborder-top">

<a

href="profil.php"><i class="fa fa-user"></i>Profil</a>

</li>

<li>

<a href="keluar.php"><i class="fa fa-sign-out"></i> Keluar</a>

(16)

<li></li>

<div id="sidebar" class="nav-collapse ">

<ul class="sidebar-menu">

<li class="">

<a class="" href="index.php">

<i class="fa fa-home"></i>

<span>Beranda</span>

</a>

</li>

<li class="">

<a href="guru.php" class="">

<i class="fa fa-user"></i>

<span>Guru</span>

</a>

</li>

<li class="">

(17)

<i class="fa

fa-<a class="" href="matapelajaran.php">

<i class="fa fa-book"></i>

<a class="" href="kelas.php">

<i class="fa fa-bookmark"></i>

<span>Kelas</span>

</a>

</li>

<li>

<a class="" href="monitor-sistem.php">

<i class="fa fa-cog"></i>

<span>Monitor Sistem</span>

</a>

(18)

</ul>

</div>

</aside>

<section id="main-content">

<section class="wrapper">

<div class="row">

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

<h3 class="page-header"><i class="fa fa-user"></i> Profil</h3>

</div>

</div>

<div class="row">

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

<div class="panel panel-default">

<div class="col-lg-6">

(19)

<div class="row">

<div class="bio-row bio-row-80">

<p><span>Username </span>: <?php echo $_SESSION['username'] ?></p>

</div>

<div class="bio-row bio-row-20">

<a href="#akunUsername" data-toggle="modal" class="">

<i>Sunting</i>

</a>

</div>

</div>

<div class="row">

<div class="bio-row bio-row-80">

<p><span>Password </span>: <input style="border: none; width: 40%;" type="password"

value="<?php echo substr($_SESSION['password'], 0, 8); ?>"></p>

</div>

(20)

<a href="#akunPassword" data-toggle="modal" class="">

<i>Sunting</i>

<div hidden="true"

aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="akunUsername" class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button aria-hidden="true" data-dismiss="modal" class="close"

type="button">×</button>

(21)

class="modal-</div>

<div class="modal-body">

<form role="form" method="post" action="profil.php">

<div class="form-group">

<label for="username">Username</label>

<input type="text" class="form-control" name="username"

id="username" value="<?php echo $_SESSION['username'] ?>" />

</div>

<input type="submit" class="btn btn-primary" name="buttonUsername"

value="Simpan">

$query_update_login = "update tbl_login set username = '".$username."' where id_akun = '".$_SESSION['id']."'";

$conn_update_login = mysqli_query($koneksi, $query_update_login);

$_SESSION['username'] = $username;

(22)

<script>

<div hidden="true"

aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="akunPassword" class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button aria-hidden="true" data-dismiss="modal" class="close"

type="button">×</button>

<h4 class="modal-title">Sunting Password</h4>

</div>

<div class="modal-body">

<form role="form" method="post" action="profil.php">

(23)

<label for="password">Password</label>

<input

type="password" class="form-control" name="password" id="password" placeholder="Password Lama Anda">

</div>

<div class="form-group">

<label for="password_baru">Password Baru</label>

<input

type="password" class="form-control" name="password_baru" id="password_baru" placeholder="Password Baru">

</div>

<div class="form-group">

<label

for="verifikasi_password">Verifikasi Password</label>

<input type="password" class="form-control"

name="verifikasi_password" id="verifikasi_password" placeholder="Ulangi Password Baru">

</div>

<input type="submit" class="btn btn-primary" name="buttonPassword"

value="Simpan" />

</form>

<?php

if(isset($_POST['buttonPassword']))

{

if(isset($_POST['password']) && $_POST['password'] != '')

(24)

if(isset($_POST['password_baru']) && $_POST['password_baru'] != '')

{

if(isset($_POST['verifikasi_password']) && $_POST['verifikasi_password'] != '')

{

$password = $_POST['password'];

$password_baru = $_POST['password_baru'];

$verifikasi_password = $_POST['verifikasi_password'];

$query_cek_password = "select * from tbl_login where id_akun = '".$_SESSION['id']."' and password =

md5('".$password."')";

$conn_cek_password = mysqli_query($koneksi, $query_cek_password);

if(mysqli_num_rows($conn_cek_password) == 1)

{

if($password_baru == $verifikasi_password)

{

(25)

set password = md5('".$password_baru."') where id_akun = '".$_SESSION['id']."'";

$conn_update_login =

mysqli_query($koneksi, $query_update_login);

$_SESSION['password'] = md5($password_baru);

echo '

<script type="text/javascript">

document.location.href="profil.php";

</script>

';

}

else

{

echo '

(26)

alert("Password Baru Tidak Sama Dengan Verifikasi Password\nSilahkan Cek Kembali");

document.location.href="profil.php";

</script>

';

}

}

else

{

echo '

<script type="text/javascript">

alert("Password Yang Anda Input Tidak Sesuai Dengan Password Anda");

document.location.href="profil.php";

</script>

';

(27)

else

{

echo '

<script type="text/javascript">

alert("Harap Verifikasi Password Baru Anda");

</script>

';

}

}

else

{

echo '

<script type="text/javascript">

alert("Silahkan Isi Form Password Baru\nJika Anda Ingin Mengubah Password");

</script>

';

}

(28)

else

{

echo '

<script type="text/javascript">

alert("Password Anda Tidak Berubah\nDikarenakan Anda Tidak Mengisi Form Password");

</script>

<script type="text/javascript"

src="../assets/portal/js/jquery-ui-1.9.2.custom.min.js"></script>

<!-- bootstrap -->

<script

src="../assets/portal/js/bootstrap.min.js"></script>

(29)

<script

<!-- charts scripts -->

<script

src="assets/jquery-src="../assets/portal/js/owl.carousel.js" ></script>

<!-- jQuery full calendar -->

<<script

src="../assets/portal/js/fullcalendar.min.js"></script><! -- Full Google Calendar - Calendar -->

<script

src="assets/fullcalendar/fullcalendar/fullcalendar.js"></ script>

<!--script for this page only-->

<script src="../assets/portal/js/calendar-custom.js"></script>

<script

src="../assets/portal/js/jquery.rateit.min.js"></script>

<!-- custom select -->

<script

src="../assets/portal/js/jquery.customSelect.min.js" ></script>

<script src="assets/chart-master/Chart.js"></script>

(30)

<script

src="../assets/portal/js/scripts.js"></script>

<!-- custom script for this page-->

<script src="../assets/portal/js/sparkline-data.js"></script>

<script

src="../assets/portal/js/morris.min.js"></script>

<script

src="../assets/portal/js/sparklines.js"></script>

(31)

3.siswa.php

<?php

session_start();

require "../library/fungsi.php";

if($_SESSION["username"] == "")

{

echo '

<script type="text/javascript">

document.location.href="../portal.php";

</script>

';

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Portal Akademik UTC">

<meta name="author" content="Sams">

(32)

<link rel="shortcut icon" href="../assets/portal/img/logobg.png">

<title>Siswa - Sistem Informasi Akademik</title>

<!-- Bootstrap CSS -->

<link

href="../assets/portal/css/bootstrap.min.css" rel="stylesheet">

<!-- bootstrap theme -->

<link href="../assets/portal/css/bootstrap-theme.css" rel="stylesheet">

<!--external css-->

<!-- font icon -->

<link href="../assets/portal/css/elegant-icons-style.css" rel="stylesheet" />

<link href="../assets/portal/css/font-awesome.min.css" rel="stylesheet" />

<!-- full calendar css-->

<link

href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />

<link

href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />

<!-- easy pie chart-->

<link

href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>

<!-- owl carousel -->

<link rel="stylesheet"

(33)

<link href="../assets/portal/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">

<!-- Custom styles -->

<link rel="stylesheet"

href="../assets/portal/css/fullcalendar.css">

<link href="../assets/portal/css/widgets.css" rel="stylesheet">

<link href="../assets/portal/css/style.css" rel="stylesheet">

<link href="../assets/portal/css/style-responsive.css" rel="stylesheet" />

<link

href="../assets/portal/css/xcharts.min.css" rel=" stylesheet">

<link href="../assets/portal/css/jquery-ui-1.10.4.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->

<script type="text/javascript">

function resizeIframe(obj)

{

obj.style.height =

20+obj.contentWindow.document.body.scrollHeight + 'px';

}

</script>

(34)

<body>

<section id="container" class="">

<header class="header dark-bg">

<div class="toggle-nav">

<div class="icon-reorder

tooltips" original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>

</div>

<a href="index.html" class="logo">Sistem Informasi <span

class="lite">Akademik</span></a>

<div class="top-nav notification-row">

<ul class="nav pull-right top-menu">

<li class="dropdown">

<a

data-toggle="dropdown" class="dropdown-toggle" href="#">

(35)

<div class="log-arrow-up"></div>

<li class="eborder-top">

<a

href="profil.php"><i class="fa fa-user"></i>Profil</a>

</li>

<li>

<a href="keluar.php"><i class="fa fa-sign-out"></i> Keluar</a>

<div id="sidebar" class="nav-collapse ">

<ul class="sidebar-menu">

<li class="">

<a class="" href="index.php">

<i class="fa fa-home"></i>

<span>Beranda</span>

</a>

</li>

(36)

<a href="guru.php" class="">

<i class="fa fa-user"></i>

<span>Guru</span>

</a>

</li>

<li class="active">

<a href="siswa.php" class="">

<i class="fa fa-user"></i>

<span>Siswa</span>

</a>

</li>

<li>

<a class="" href="matapelajaran.php">

<i class="fa fa-book"></i>

<a class="" href="kelas.php">

<i class="fa fa-bookmark"></i>

<span>Kelas</span>

(37)

</li>

<li>

<a class="" href="monitor-sistem.php">

<i class="fa fa-cog"></i>

<section id="main-content">

<section class="wrapper">

<div class="row">

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

<h3 class="page-header"><i class="fa fa-user"></i> Siswa</h3>

</div>

</div>

<div class="row">

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

<div class="panel panel-default">

<div class="panel-heading">

<h2><strong>Daftar Siswa</strong></h2>

(38)

<div class="panel-body">

<a

class="btn btn-primary" href="tambah-siswa.php" >Tambah Siswa</a><br><br>

<iframe frameborder="0" width="100%" height="100%"

src="../assets/portal/assets/data-table/siswa/siswa.php" scrolling="no" onload="resizeIframe(this)"></iframe>

</div>

<script type="text/javascript"

src="../assets/portal/js/jquery-ui-1.9.2.custom.min.js"></script>

<!-- bootstrap -->

(39)

<script

src="../assets/portal/js/jquery.nicescroll.js" type="text/javascript"></script>

<!-- charts scripts -->

<script

src="assets/jquery-src="../assets/portal/js/owl.carousel.js" ></script>

<!-- jQuery full calendar -->

<<script

src="../assets/portal/js/fullcalendar.min.js"></script><! -- Full Google Calendar - Calendar -->

<script

src="assets/fullcalendar/fullcalendar/fullcalendar.js"></ script>

<!--script for this page only-->

<script src="../assets/portal/js/calendar-custom.js"></script>

<script

src="../assets/portal/js/jquery.rateit.min.js"></script>

<!-- custom select -->

<script

src="../assets/portal/js/jquery.customSelect.min.js" ></script>

<script src="assets/chart-master/Chart.js"></script>

<!--custome script for all page-->

<script

src="../assets/portal/js/scripts.js"></script>

(40)

<script

require "../library/fungsi.php";

if($_SESSION["username"] == "")

{

echo '

<script type="text/javascript">

document.location.href="../portal.php";

</script>

';

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(41)

<meta name="keyword" content="Portal, Akademik, UTC">

<link rel="shortcut icon" href="../assets/portal/img/logobg.png">

<title>Guru - Sistem Informasi Akademik</title>

<!-- Bootstrap CSS -->

<link

href="../assets/portal/css/bootstrap.min.css" rel="stylesheet">

<!-- bootstrap theme -->

<link href="../assets/portal/css/bootstrap-theme.css" rel="stylesheet">

<!--external css-->

<!-- font icon -->

<link href="../assets/portal/css/elegant-icons-style.css" rel="stylesheet" />

<link href="../assets/portal/css/font-awesome.min.css" rel="stylesheet" />

<!-- full calendar css-->

<link

href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />

<link

href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />

<!-- easy pie chart-->

<link href="../assets/portal/css/jquery-ui-1.10.4.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->

(42)

<script

<script type="text/javascript">

function resizeIframe(obj)

{

obj.style.height =

20+obj.contentWindow.document.body.scrollHeight + 'px';

}

</script>

</head>

<body>

<section id="container" class="">

<header class="header dark-bg">

<div class="toggle-nav">

<div class="icon-reorder

tooltips" original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>

(43)

<ul class="dropdown-menu extended logout">

<div class="log-arrow-up"></div>

<li class="eborder-top">

<a

href="profil.php"><i class="fa fa-user"></i>Profil</a>

</li>

<li>

<a href="keluar.php"><i class="fa fa-sign-out"></i> Keluar</a>

<div id="sidebar" class="nav-collapse ">

<ul class="sidebar-menu">

<li class="">

<a class="" href="index.php">

<i class="fa fa-home"></i>

<span>Beranda</span>

(44)

</li>

<li class="active">

<a href="guru.php" class="">

<i class="fa fa-user"></i>

<span>Guru</span>

</a>

</li>

<li class="">

<a href="siswa.php" class="">

<i class="fa fa-user"></i>

<span>Siswa</span>

</a>

</li>

<li>

<a class="" href="matapelajaran.php">

<i class="fa fa-book"></i>

<a class="" href="kelas.php">

(45)

<span>Kelas</span>

</a>

</li>

<li>

<a class="" href="monitor-sistem.php">

<i class="fa fa-cog"></i>

<section id="main-content">

<section class="wrapper">

<div class="row">

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

<h3 class="page-header"><i class="fa fa-user"></i> Guru</h3>

</div>

</div>

<div class="row">

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

<div class="panel panel-default">

(46)

<h2><strong>Daftar Guru</strong></h2>

</div>

<div class="panel-body">

<div class="col-lg-11 col-lg-offset-1">

<a class="btn btn-success" href="tambah-guru.php">Tambah Guru</a><br><br><br>

</div>

<iframe frameborder="0" width="100%" height="100%"

src="../assets/portal/assets/data-table/guru/guru.php" scrolling="no" onload="resizeIframe(this)"></iframe>

</div>

<script type="text/javascript"

src="../assets/portal/js/jquery-ui-1.9.2.custom.min.js"></script>

(47)

<script

src="../assets/portal/js/owl.carousel.js" ></script>

<!-- jQuery full calendar -->

<!--custome script for all page-->

<script

src="../assets/portal/js/scripts.js"></script>

<!-- custom script for this page-->

<script

src="../assets/portal/js/sparkline-require "../library/fungsi.php";

if($_SESSION["username"] == "")

{

echo '

(48)

document.location.href="../portal.php";

</script>

';

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Portal Akademik UTC">

<meta name="author" content="Sams">

<meta name="keyword" content="Portal, Akademik, UTC">

<link rel="shortcut icon" href="../assets/portal/img/logobg.png">

<title>Kelas - Sistem Informasi Akademik</title>

<!-- Bootstrap CSS -->

<link

href="../assets/portal/css/bootstrap.min.css" rel="stylesheet">

<!-- bootstrap theme -->

<link href="../assets/portal/css/bootstrap-theme.css" rel="stylesheet">

<!--external css-->

(49)

<link href="../assets/portal/css/elegant-icons-style.css" rel="stylesheet" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->

<script type="text/javascript">

function resizeIframe(obj)

{

obj.style.height =

20+obj.contentWindow.document.body.scrollHeight + 'px';

}

</script>

</head>

<body>

<section id="container" class="">

<header class="header dark-bg">

<div class="toggle-nav">

<div class="icon-reorder

tooltips" original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>

</div>

(50)

<span>Siswa</span>

</a>

</li>

<li>

<a class="" href="matapelajaran.php">

<i class="fa fa-book"></i>

<span>Mata Pelajaran</span>

</a>

</li>

<li class="active">

<a href="kelas.php">

<i class="fa fa-bookmark"></i>

<span>Kelas</span>

</a>

</li>

<li>

<a class="" href="monitor-sistem.php">

(51)

<section id="main-content">

<section class="wrapper">

<div class="row">

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

<h3 class="page-header"><i class="fa fa-bookmark"></i> Kelas</h3>

</div>

</div>

<div class="row">

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

<div class="panel panel-default">

<div class="panel-heading">

<h2><strong>Daftar Kelas</strong></h2>

</div>

<div class="panel-body">

<div class="col-lg-11 col-lg-offset-1">

<a class="btn btn-success" href="#tambahKelas" data-toggle="modal" >Tambah Kelas</a><br><br><br>

</div>

<iframe frameborder="0" width="100%" height="100%"

src="../assets/portal/assets/data-table/kelas/kelas.php" scrolling="no" onload="resizeIframe(this)"></iframe>

</div>

</div>

(52)

DAFTAR PUSTAKA

diakses pada tanggal 23 mei 2016

diakses

pada tanggal 23 mei 2016

05 juni 2016

2016

pada tanggal 12 juni 2015

diakses pada

(53)

Wilkisson (1992) Sistem informasi adalah kerja yang mengkoordinasikan

sumber daya manusia dan komputer.

BAB 3

PERANCANGAN SISTEM

3.1. Perancangan Sistem

Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan

efesiensi kerja dan waktu, maka masih banyak sistem yang ada saat ini yang masih

manual dan harus diganti dengan sistem yang lebih baik lagi. Hal ini dilakukan

dengan cara membangun sistem yang terkomputerisasi atau online. Untuk memulai

membangun suatu programmengenai perancangan system informasi akademik, maka

penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang

(54)

Perancangan merupakan proses yang dilakukan oleh perancang sistem untuk

mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana komponen

system diaktualisasikan. Proses ini menyangkut tujuan sistem tersebut, audience,

objek dan informasi domain. Perancangan yang baik harus mengetahui bagaimana

mendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling

fleksibel, efesien dan elegan.

3.2. Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan

pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan

diagram alir data adalah memudahkan pemakai yang kurang menguasai bidang

komputer untuk mengerti sistem yang akan dikerjakan. Pada tahap analisa,

penanganan notasi simbol lingkaran dan anak panah menggambarkan arus data dalam

perancangan sistem sangat membantu dalam komunikasi dengan pemakaian

sistem menggunakan notasi – notasi untuk menggambarkan arus dari data sistem.

Disamping itu DFD adalah salah satu alat pembuatan model yang sering

digunakan, khususnya bila fungsi – fungsi sistem merupakan bagian yang lebih

penting dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain,

DFD adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi

sistem. DFD juga merupakan alat perancangan sistem yang berorientasi pada alur data

(55)

rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada

pemakai maupun pembuat program.

Tabel 3.1. Simbol-simbol Data Flow Diagram

No. Simbol Fungsi

1. Eksternal Entity merupakan kesatuan di luar

lingkungan system yang dapat berupa seseorang,

organisasi yang dapat mengirimkan data atau

menerima data dari sistem.

2. Arus data merupakan tempat mengalirnya

informasi menunjukan arus data berupa sistem.

3. Proses merupakan pengolahan data atau aliran

data masuk menjadi data aliran keluar.

4. Penyimpanan data merupakan tempat

(56)

3.3. Perancangan Database

Database adalah kumpulan dari data yang berhubungan antara yang satu dengan yang

lainnya, tersimpan diperangkat keras komputer dan menggunakan perangkat lunak

untuk memanipulasinya. Database merupakan salah satu komponen yang penting

dalam sistem komputerisasi, karena database merupakan kumpulan dari beberapa file,

dalam hal ini filefile tersebut dikelompokan secara terstruktur dalam beberapa tabel

sesuai dengan informasi yang terkandung di dalamnya.

Berikut ini rancangan tabel yang penulis gunakan dalam membangun

sistem informasi nilai :

Tabel 3.2 Tabel Login

Tabel 3.3 Tabel penambahan data guru

Name Type size Information

Name Type size Information

Id_akun Varchar 10 Kode akun

username Varchar 30 Id untuk sebuah login

password Varchar 500 Kata kunci untuk bisa login

level Enum(‘admin’,’guru’,’siswa’) - Tipe orang masuk

(57)

nuptk varchar 20 Nomorunik pendidik dan tenaga kependidikan

nama varchar 100 Nama Guru

alamat varchar 100 Alamat Guru

jenis_kelamin Enum(‘pria’,‘wanita’) - Jenis kelamin Guru

tgl_lahir date - Tanggal lahir Guru

Table 3.4 Tabel Absen

Name Type size information

kode _kelas Varchar 20 kode kelas pada sekolah

nis Varchar 10 nomor induk siswa

Tabel 3.5 Tabel Daftar Nilai

Name Type size Information

id_nilai Int 11 kode nilai

kategori Varchar 100 Jenis nilai

Kode_kelas Varchar 10 Kode kelas pada sekolah

Tabel 3.6 Tabel Kelas

(58)

kode_kelas Varchar 10 Kode ruangan pada sekolah

kode_mapel Varchar 9 Kode mata pelajaran

nuptk_guru Varchar 20 Nomor identitas pendidik

Table 3.7 Tabel List Kelas

Name Type size Information

Id Int 11 Kode ruangan pada sekolah

Kelas Varchar 10 Nama kelas

Tabel 3.8 Tabel Mata Pelajaran

Name Type size Information

Kode_mapel Varchar 9 Kode mata pelajaran yang ada

Nama_mapel Varchar 100 Nama mata pelajaran

Jumlah_les Varchar 2 Banyak les yang dimasuki

Tabel 3.9 Tabel Nilai

Name Type size Information

Id_nilai Int 11 Jenis nilai

nis Varchar 9 Nomor induk siswa

(59)

Table 3.10 Pengumuman

Name Type size Information

Id_pesan Varchar 10 Kode pesan yang diberikan

penerima Varchar 50 Orang yang menerima pengumuman

status Enum(‘aktif’,’non-aktif’) - Utk mengubah status pesan

Table 3.11 Pesan

Name Type size Information

id Int 11 Auto increment

Id_pengirim Varchar 50 Id orang yang mengirim

tujuan Varchar 50 Tempat pesan yang dituju

isi Long text - Pesan yang ingin disampaikan

tanggal date - Waktu pengiriman dan pembuatan pesan

Table 3.12 Siswa

Name Type size Information

Nisn varchar 10 Nomor induk nasional siswa

Nis varchar 5 Nomor induk siswa di sekolah itu

Nama varchar 50 Nama siswa

alamat varchar 500 Alamat siswa

(60)

Tgl-lahir date Waktu lahir siswa

Kelas varchar 10 Kelas siswa belajar

3.4. Flowchart

Flowchart adalah sekumpulan simbol – symbol yang menunjukan atau bidang yang

menggambarkan rangkaian kegiatan – kegitan program dari awal hingga akhir. Jadi

flowchart juga dapat digunakan untuk menggambarkan urutan langkah – langkah

pekerjaan dalam suatu algoritma. Penjelasan arti dari lambang – lambang flowchart

dapat didefinisikan seperti tabel dibawah ini :

Tabel 3.13 Arti lambang – lambang Flowchart

No SIMBOL KETERANGAN

1

Terminal, untuk memulai atau mengakhiri

suatu program

2

Proses, simbol ini menunjukkan setiap

pengolahan yang dilakukan oleh komputer.

3

Input-Output, untuk memasukkan data atau

menunjukkan hasil keluaran dari suatu proses

4

Decision, suatu kondisi yang menghasilkan

(61)

5

Untuk menyatakan sekumpulan langkah

proses yang ditulis sebagai procedur

6

Connector, suatu prosedur akan masuk atau

keluar melalui simbol ini dalam lembaran

yang sama.

7

Off-Line Connector, simbol masuk atau

keluarnya suatu prosedur pada lembaran

kertas lainnya.

8

Arus/Flow dari prosedur yang dapat dilakukan

dari atas kebawah, kiri kekanan atau

sebaliknya.

9

Document, merupakan simbol dari data yang

berbentuk kertas maupun informasi

10

Database, menyediakan tempat pengolahan

data serta penyimpanan dalam storage.

11

Simbol untuk output, yang ditujukan kesuatu

(62)
(63)
(64)
(65)
(66)
(67)
(68)

BAB 4

IMPLEMENTASI SISTEM

Bab ini menjelaskan tentang hasil pembahasan dari penelitian. Hasill penelitian

yang diperoleh berupa implementasi dari rancangan aplikasi yang dibuat pada bab

sebelumnya. Proses-proses pada bab sebelumnya tersebut termasuk ke dalam tahap

proses model prototipe bagian analisis kebutuhan dan pemodelan cepat. Di bab

empat ini akan dibahas implementasi pengujian dari perancangan-perancangan

tersebut berdasarkan skenario pengguna. Implementasi tersebut merupakan tahap

dalam system informasi berbasis web bagian pengujian dan evaluasi aplikasi.

Aplikasi yang dibuat masih berupa system informasi yang baru dijalankan pada

localhost, belum diimplementasikan ke dalam internet. Pembuatan aplikasi ini

menggunakan PHP sebagai bahasa pemrograman utama dan MySQL sebagai

basis data.

4.1. Pengertian Implementasi Sistem

Setelah dianalisis dan dirancang secara rinci dan teknologi telah diseleksi dan dipilih.

(69)

disetujui, untuk menguji, meng-install, dan memulai sistem baru atau sistem

yang diperbaiki untuk menggantikan sistem yang lama, sedangkan tahap implementasi

sistem merupakan tahap meletakkan sistem agar sistem dapat siap untuk dioperasikan.

Tahap implementasi sistem terdiri dari langkah – langkah sebagai berikut ini, yaitu

menerapkan rencana implementasi, melakukan kegiatan implementasi, dan tindak

lanjut implementasi.

4.2. Tujuan Implementasi

Tujuan – tujuan dari implementasi sistem, yaitu :

1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai

sarana pengolah data dan penyaji informasi.

2. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru

atau yang telah disetujui.

3. Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadap

sistem yang baru dan mendapat informasi yang baik dan jelas.

4. Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu

dengan menguji sistem secara menyeluruh.

5. Memastikan bahwa sistem telah berjalan lancar dengann mengontrol dan

(70)

4.3.Komponen Dalam Implementasi Sistem

Agar perancangan sistemyang telah kita kerjakan dapat berjalan baik atau tidak, maka

perlu dilakukan pengujian terhadap sistemyang telah dikerjakan. Untuk itu

dibutuhkan beberapa komponen utama yang mencakup perangkat keras (hardware),

perangkat lunak (software, dan perangkat operator (brainware).

4.3.1. Kebutuhan Perangkat Keras (Hardware)

Perangkat keras (hardware) merupakan komponen – komponen peralatan yang

membentuk suatu sistem komputer dan peralatan – peralatan tambahan lainnya yang

mungkin komputer menjalankan tugasnya sesuai dengan yang diberikan. Komponen

ini bersifat nyata secara fisik, artinya dapat dilihat dan dipergunakan, misalnya

monitor, CPU (Central Processing Unit), printer, keyboard, dan mouse. Spesifikasi

perangkat keras komputer yang digunakan dalam pembuatan website ini adalah :

1. Personal Computer dengan Processor min Intel Pentium 3.

2. Memory min 512 MB.

3. Monitor W 14” resolution 1024x768.

4. Hardisk sebagai media penyimpan.

5. DVDR/W.

4.3.2. Kebutuhan Perangkat Lunak (Software)

(71)

mengontrol suatu sistem. Perangkat lunak yang diperlukan untuk menjalankan

perangkat kerasnya adalah Windows 8, XAMPP, MySQL, Browser, Dreamweaver.

4.3.3. Kebutuhan Brainware

Perangkat Operator (Brainware) yang dapat menjalankan website ini terbagi menjadi

5 yaitu administrator, guru, siswa, alumni, dan public.

4.4. Tampilan Halaman Website

Untuk menjalankan system guna web browser pada pengujian ini penulis

menggunakan web browser Mozilla Firefox dan Google Chrome setelah web browser

jalan, ketikkan pada addres bar http://localhost/daniel/admin/index.phpuntuk

pengetesan halaman utama. Halaman utama sistemtersebut seperti pada gambar

berikut :

(72)

Gambar 4.2. Halaman Visi dan Misi Sekolah

(73)

Gambar 4.4. Halaman tambah dan menampilkan Data Guru

(74)

Gambar 4.6. Halaman tambah dan menampilkan Data Mata Pelajaran

(75)

Gambar 4.8. Halaman Monitoring System

(76)

Gambar 4.10 Tampilan Nilai Siswa per Kelas

Gambar 4.11 Tampilan Input Nilai Siswa oleh Guru

Gambar 4.12. Halaman login Admin

(77)
(78)

BAB 5

KESIMPULAN DAN SARAN

5.1. Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya maka pada bab ini penulis dapat

mengambil kesimpulan sebagai berikut :

1. Dengan menggunakan sistem yang baru dengan pemakain perangkat komputer

yang memanfaatkan fasilitas internet sebagai alat bantu untuk mempermudah

penyajian informasi suatu informasi dan pengolahan data dapat dilakukan dengan

cepat dan tepat.

2. Sistem informasi berbasis web ini akan memberikan kemudahan – kemudahan,

baik bagi pihak intern (sekolah) maupun pihak extern (masyarakat luas) karena

sistem ini nantinya siap akses selama 24 jam.

3. Sistem informasi Berbasis Web ini penulis buat dengan bahasa pemrograman

PHP dan menggunakan MYSQL sebagai databasenya dan memanfaatkan jaringan

internet untuk publikasinya sehingga dapat dikonsumsi oleh public.

4. Sistem informasi berbasis web ini menyediakan menu administrator untuk

keperluan manajemen dari website. Pengguna dari sistem ini adalah Guru

(79)

Berdasarkan kesimpulan di atas maka dapat diberikan saran – saran yang penulis

usulkan yang berguna nantinya dan yang menjadi bahan pertimbangan bagi semua

Guru dan Siswa maupun masyarakat luas dalam menggunakan Sistem Informasi

Berbasis Web ini antara lain :

1. Dengan adanya sistem yang telah dirancang maka Guru dan Siswa diharapkan

dapat menggunakan atau memanfaatkan komputer dan fasilitas internet dalam hal

penginformasian data dan pengolahan data sehingga dapat meningkatkan

pelayanan dan efektifitas kerja yang lebih baik.

2. Sistem yang baru hendaknya dilakukan pengoprasian dan perawatan secara

optimal dalam penginformasian data dan pengolahan data.

3. Kiranya system informasi berbasis web ini dapat digunakan secara optimal agar

hasil yang diharapkan dapat terwujud.

4. Mengadakan pelatihan terhadap pihak terkait yang akan mengoperasikan

sistem yang baru. Setelah dirasakan sistem yang baru dapat dioperasikan

dengan baik dan bagian terkait telah mampu mengoperasikan sistem tersebut,

maka sistem lama dapat digantikan dengan sistem yang baru secara

(80)

Dalam bab ini penulis menjelaskan dan menguraikan tentang pencapaian

tujuan dari aplikasi yang dibuat. Saran berisi hal-hal yang dirasakan masih

belum sempurna.

BAB 2

LANDASAN TEORI

2.1 Pengertian Komputer

Komputer (computer) berasal dari bahasa Latin computare yang berarti menghitung.

Komputer mempunyai arti yang sangat luas dan berbeda untuk orang yang berbeda.

Komputer adalah sistem elektronik untuk memanipulasi data yang cepat dan tepat

serta dirancang dan diorganisasikan supaya secara otomatis menerima dan menyimpan

data input, memprosesnya dan menghasilkan output dibawah pengawasan suatu

langkah-langkah instruksi-instruksi program yang tersimpan di memori (stored

program).

Bila dijabarkan, defenisi dari komputer adalah seperangkat peralatan

elektronik yang bekerja bersama – sama secara otomatis, menerima input, memproses

(81)

perintah–perintah yang diberikan oleh user dan komputer itu sendiri merupakan

bagian dari sistem komputerisasi.

Sistem komputer adalah suatu sistem yang terdiri atas komputer dan seluruh

komponen–komponen yang menunjang terlaksananya proses pengolahan data dan

menjadikan komputer sebagai alat yang berguna. Sistem komputer memiliki beberapa

komponen yaitu :

a. Peragkat Keras (Hardware)

Peragkat keras merupakan perangkat yang secara fisik dapat dilihat dan diraba, yang

membentuk kesatuan, sehingga dapat difungsikan. Berdasarkan

kegunaannya, perangkat keras dapat digolongkan ke dalam tiga bagian:

1. Alat input

Alat input adalah alat yang memiliki fungsi untuk memasukkan data ataupun program

yang akan diproses komputer, seperti keyboard, mouse, printer, scanner dan lainnya.

2. Alat Proses

Alat proses atau CPU (Central Prosesing Unit), merupakan alat atau unit terpenting

didalam sistem komputer. Fungsi utamanya adalah pusat pemprosesan data dan

mengiontrol keseluruhan sistem komputer selama pengolahan data berlangsung,

contohnya adalah prosessor.

3. Alat Output

Alat output adalah alat untuk menampilkan hasil pengolahan data yang dilakukan oleh

CPU, misalnya monitor dan printer.

b. Perangkat Lunak (Software)

Perangkat lunak adalah komponen komputer yang merupakan kumpulan program dan

(82)

fungsinya sebagai alat pengolahan data.Komponen ini tidak nyata secara

fisik.Perangkat lunak berfungsi sebagai perantara antara komputer dan user sehingga

dapat digunakan.

c. Perangkat Komputer (Brainware)

Pengguna komputer adalah manusia yang menangani suatu sistem komputer atau

orang yang mampu menangani suatu sistem operasi komputer. Brainware dapat

dikelompokkan dalam beberapa bagian, yaitu :

1. Sistem Analisis

Orang bertugas untuk membentuk dan merancang fasilitas suatu sistem komputer

yang akan dibangun.

2. Programmer

Orang yang bertugas menerjemaahkan spesifikasi yang telah dirancang oleh sistem

analisis kedalam suatu bahasa program tertentu.

3. Komputer Operator

Orang yang bertugas menangani pengolahan data secara langsung.

4. Data Entry Operator

Orang yang bertugas melakukan pengurusan data yang akan diolah, mulai dari

pengumpulan data, perekaman data kedalam media penyimpanan hingga pemeriksaan

dan pengiriman informasi yang dihasilkan oleh komputer.

(83)

Internet berawal dari diciptakannya teknologi jaringan komputer.Jaringan komputer

merupakan beberapa komputer yang terhubung satu sama lain dengan memakai kabel

dalam satu lokasi, misalnya satu kantor atau gedung. Jaringan komputer ini berfungsi

agar pengguna komputer bisa bertukar informasi dan data dengan komputer lainnya.

ARPAnet (US Defense Advanced Reseach Project Agency) atau departemen

pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk

menghindarkan terjadinya informasi terpusat, yang apabila perang dapat dengan

mudah dihancurkan. Jadi suatu bagian dari sambungan itu secara otomatis

dipindahkan kesambungan lainnya.

Setelah angkatan Amerika, dunia pendidikan pun merasa sangat perlu

mempelajari dan mengembangkan jaringan komputer.Salah satunya adalah University

of California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet banyak

digunakan Universitas di Amerika dan berkembang pesat saat ini. Agar pengguna

komputer dengan merek dan tipe berbeda dapat saling berhubungan, maka para ahli

membuat sebuah protocol (semacam bahasa) yang sama untuk dipakai di Internet.

Namanya TCP (Transmission Control Protokol) protokol pengendali transmisi dan IP

(Internet Protokol).

2.3 World WideWeb (WWW)

World Wide Web (WWW), lebih dikenal dengan web merupakan salah satu layanan

yang didapat oleh pemakai komputer yang terhubung dengan internet. Web pada

(84)

hypertext.Pemakai dituntut untuk menemukan informasi dengan mengikuti link yang

disediakan dalam dokumen web yang ditampilkan dalam browser web.

Kini internet identik dengan web, karena kepopuleran web sebagai standart interface

pada layanan yang ada pada internet, dari awalnya sebagai penyedia informasi, kini

digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan

melakukan transaksi bisnis (commerce).

Kini, web seakan lebih popular dari pada email, walaupun secara statisktik email

masih merupakan aplikasi terbanyak yang digunakan oleh pengguna internet.Web

lebih popular bagi khalayak umum dan pemula, terutama untuk tujuan pencarian

informasi dan melakukan komunikasi email yang menggunakan web sebagai

interfacenya.

Interface identik dengan web, karena popularitas sebagai penyedia informasi

dan interface yang digunakan oleh pengguna internet dari masalah informasi sampai

dengan komunikasi. Informasi produk dari yang serius sampai dengan yang sampah,

dari yang cuma–cuma sampai dengan yang komersial, semuanya ada. Web

memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet lainya

dan menelusuri (informasi) di internet. Selain itu web telah diadopsi oleh perusahaan

sebagai bagian dari stategi teknologi informasi, karena beberapa alasan:

a. Akses informasi yang mudah.

b. Setup server yang lebih mudah.

c. Informasi mudah didistribusikan.

d. Bebas platform : informasi dapat disajikan oleh web browser pada sistem

(85)

2.3.1 Lahirnya Web

Tahun 1989, Trimothy Berners-Lee seorang ahli komputer dari Inggris dan peneliti

lain di European Particle Physics Lab (Consei European Pour la Recherche

Nucleaire, atau CERN) di Geneva Swiss, mengembangkan satu cara untuk membagi

data antar koleganya menggunakan sesuatu yang di sebut dengan hypertext. Pemakai

di CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan

software browser baru.

Kode-kode khusus disisipkan kedalam dokumen elektronik ini,

memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada

layar dengan hanya memilih sebuah hyperlink.Kemampuan internet dimasukkan

kedalam browser ini sehingga lompat dari satu dokumen ke dokumen lain, tidak lagi

dari satu komputer saja, tetapi dapat melompat kedokumen lain yang letaknya pada

komputer remote. Seorang peneliti dapat juga mengirimkan sebuah file dari komputer

remote kesistem lokalnya, atau login kedalam suatu sistem remote hanya dengan

mengklik hyperlink. Tidak perlu melalui mekanisme FTP atau Telnet.Jalan pintas

CERN digunakan sebagai dasar dari yang disebut World Wide Web atau berikut server

dan browser webnya (sekarang dimaintenence oleh World Wide Consortium).

2.3.2 Browser Web

Browser web adalah software yang digunakan untuk menampilkan informasi dari

server web.Software ini kini telah berkembang dengan menggunakan user interface

grafis, sehingga pemakai dapat dengan mudah memakai poin atau klik untuk pindah

antar dokumen. Lynx adalah browser web yang masih menggunakan mode teks, yang

Gambar

Tabel 3.1. Simbol-simbol Data Flow Diagram
Table 3.4 Tabel Absen
Tabel 3.8 Tabel Mata Pelajaran
Table 3.10 Pengumuman
+7

Referensi

Dokumen terkait

dari sebuah halaman web pada server yang berisi. program-program yang dapat

 Server web adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan

◦ Web page dihasilkan ‘on-the-fy’ oleh program di sisi server, umumnya berdasarkan parameter pada URL atau form HTML.  1)The browser sends an

Server web adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali

Web browser adalah suatu program dimana kita dapat mengambil dokumen- dokumen HTML dari web server dengan menggunakan protokol dan format HTTP yang satu ke yang

Dapat disimpulkan bahwa web adalah sebuah layanan yang berisi dokumen multimedia yang dapat diakses dengan browser lewat komputer yang terhubung ke

Menurut Sadeli (2013:2) “Web server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser

After receiving IP address, browser sends the request for web page to the web server using HTTP protocol which specifies the way the browser and web server communicates.. Then web