Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

(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

NIP.198301292009121004 Dr. Open Darnius, M.Sc

(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

2 3 4 5 6 7

Diketahui,

Ketua Program Studi D3 Teknik Disetujui,

Informatika Fakultas MIPA USU Pembimbing Utama

Dr. Elly Rosmaini, M.Si.

NIP. 19600520198503200 NIP.198301292009121004 Dr. Open Darnius, M.Sc

(3)

LISTING PROGRAM

1.Index.php <?php

session_start();

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

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

echo '

document.location.href="../portal.php"; </script>

'; } ?>

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

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

(4)

<link

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

media="screen"/>

<link rel="stylesheet"

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

<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">

(5)

<!--[if lt IE 9]>

src="../assets/portal/js/respond.min.js"></script> <script src="../assets/portal/js/lte-ie7.js"></script> <![endif]-->

</head>

<body>

</div>

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

(6)

<span class="username"> <?php

sapa_user(); ?>

</span>

<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>

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

<aside>

<a class="" href="index.php"> <i class="fa fa-home"></i> <span>Beranda</span>

(7)

</a> </li>

</a> </li>

<a href="siswa.php" class=""> <i class="fa fa-user"></i> <span>Siswa</span>

</a> </li> <li>

<span>Mata Pelajaran</span> </a>

</li> <li>

<a class="" href="kelas.php"> <i class="fa fa-bookmark"></i> <span>Kelas</span>

</a> </li> <li>

(8)

</a> </li> </ul> </div> </aside>

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

</div> </div>

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

</div>

<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

aktivitas-aktivitas akademik dan proses belajar mengajar. Selamat menggunakan fasilitas ini semoga bermanfaat untuk hari kedepannya.</b>

(9)

<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>

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

<li>Meningkatkan disiplin bagi semua warga sekolah</li> <li>Terlaksananya KBM yang scientific</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> </div> </div> </div> </div> </section> </section> </section>

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

<script

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

<script

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

(11)

<<script

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

<script

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

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

<script

src="../assets/portal/js/jquery.placeholder.min.js"></scr ipt>

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

</body> </html>

(12)

2.profil.php <?php

session_start();

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

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

echo '

document.location.href="../portal.php"; </script>

'; }

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

<head>

(13)

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

<link

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

<link

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

<link

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

<link

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

<link rel="stylesheet"

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

(14)

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

<link

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

<!--[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>

<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>

<li class="dropdown"> <a

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

class="username">

<?php

sapa_user(); ?>

</span> <b

class="caret"></b>

</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> </ul>

</div> </header>

<aside>

<span>Beranda</span>

</a> </li>

</li>

(17)

<span>Siswa</span>

</a> </li> <li>

<span>Mata Pelajaran</span>

</a> </li> <li>

<span>Kelas</span>

</a> </li> <li>

<span>Monitor Sistem</span>

</a> </li>

(18)

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

<div class="col-lg-12"> <h3 class="page-header"><i class="fa fa-user"></i> Profil</h3>

</div> </div>

<h2><strong>Profil</strong></h2>

</div> <div class="panel-body">

(19)

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

</div>

<i>Sunting</i>

</a>

</div>

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

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

</div>

(20)

<i>Sunting</i>

</a>

</div>

</div> </div>

</section>

</section> </section>

<div hidden="true"

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

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

type="button">×</button>

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

(21)

</div>

<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">

</form> <?php

if(isset($_POST['buttonUsername'])) {

$username = $_POST['username'];

$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)

document.location.href="profil.php"

</script>

} ?> </div> </div>

</div> </div>

<div hidden="true"

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

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

type="button">×</button>

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

</div>

(23)

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

<input

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

</div>

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

<input

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

</div>

<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 '

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 '

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

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

</script>

}

(27)

else

{

echo '

alert("Harap Verifikasi Password Baru Anda");

</script>

} }

else {

echo '

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

</script>

} }

(28)

else {

echo '

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

</script>

} }

?> </div>

</div> </div>

</div>

<script

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

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

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

(29)

<script src="assets/jquery-knob/js/jquery.knob.js"></script> <script src="../assets/portal/js/jquery.sparkline.js" type="text/javascript"></script> <script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script> <script src="../assets/portal/js/owl.carousel.js" ></script>

<<script

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

<script

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

<script

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

<script

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

(30)

<script

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

<script

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

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

<script

src="../assets/portal/js/jquery.placeholder.min.js"></scr ipt>

<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> </html>

(31)

3.siswa.php <?php

session_start();

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

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

echo '

document.location.href="../portal.php"; </script>

'; }

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

<head>

(32)

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

<link

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

<link

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

<link

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

<link

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

<link rel="stylesheet"

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

(33)

<link

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

<script type="text/javascript"> function resizeIframe(obj) { obj.style.height =

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

</script> </head>

(34)

<body>

<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>

<li class="dropdown"> <a

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

class="username">

<?php

sapa_user(); ?>

</span> <b

class="caret"></b>

</a>

(35)

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>

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

</li> </ul>

</div> </header>

<aside>

<span>Beranda</span>

</a> </li>

(36)

</li>

<span>Siswa</span>

</a> </li> <li>

<span>Mata Pelajaran</span>

</a> </li> <li>

<span>Kelas</span>

(37)

</li> <li>

<span>Monitor Sistem</span>

</a> </li>

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

<div class="col-lg-12"> <h3 class="page-header"><i class="fa fa-user"></i> Siswa</h3>

</div> </div>

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

(38)

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

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

</div> </div>

</section> </section>

</section>

<script

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

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

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

<script

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

(39)

<script

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

<<script

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

<script

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

<script

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

<script

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

<script

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

(40)

<script

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

</body> </html>

4.guru.php <?php

session_start();

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

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

echo '

document.location.href="../portal.php"; </script>

'; }

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

<head>

(41)

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

<link

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

<link

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

<link

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

(42)

<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]-->

obj.style.height =

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

</script> </head>

<body>

<div class="icon-reorder

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

</div>

<?php

sapa_user(); ?>

</span> <b

class="caret"></b>

(43)

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>

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

</li> </ul>

</div> </header>

<aside>

<span>Beranda</span>

(44)

</li>

</li>

<span>Siswa</span>

</a> </li> <li>

<span>Mata Pelajaran</span>

</a> </li> <li>

(45)

<span>Kelas</span>

</a> </li> <li>

<span>Monitor Sistem</span>

</a> </li>

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

</div> </div>

(46)

<h2><strong>Daftar Guru</strong></h2> </div> <div class="panel-body">

<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> </div>

</section> </section>

</section>

<script

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

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

(47)

<script

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

<script

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

<script

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

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

</body> </html>

5.kelas.php <?php

session_start();

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

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

echo '

(48)

document.location.href="../portal.php"; </script>

'; }

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

<head>

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

<link

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

(49)

<!--[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]-->

obj.style.height =

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

</script> </head>

<body>

<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>

<span>Mata Pelajaran</span>

</a> </li>

<span>Kelas</span>

</a> </li> <li>

<span>Monitor Sistem</span>

</a> </li>

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

(51)

<div class="col-lg-12"> <h3 class="page-header"><i class="fa fa-bookmark"></i> Kelas</h3>

</div> </div>

<h2><strong>Daftar Kelas</strong></h2> </div> <div class="panel-body">

<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 akan menggunakan aplikasi basis data ini.

(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 dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun

(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 file – file 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

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

Terminal, untuk memulai atau mengakhiri suatu program

Proses, simbol ini menunjukkan setiap pengolahan yang dilakukan oleh komputer.

Input-Output, untuk memasukkan data atau menunjukkan hasil keluaran dari suatu proses

Decision, suatu kondisi yang menghasilkan beberapa kemungkinan jawaban atau pilihan.

(61)

Untuk menyatakan sekumpulan langkah proses yang ditulis sebagai procedur

Connector, suatu prosedur akan masuk atau keluar melalui simbol ini dalam lembaran yang sama.

Off-Line Connector, simbol masuk atau keluarnya suatu prosedur pada lembaran kertas lainnya.

Arus/Flow dari prosedur yang dapat dilakukan dari atas kebawah, kiri kekanan atau

sebaliknya.

Document, merupakan simbol dari data yang berbentuk kertas maupun informasi

Database, menyediakan tempat pengolahan data serta penyimpanan dalam storage.

Simbol untuk output, yang ditujukan kesuatu device ,seperti primer,plotters,dll

(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. Tiba saatnya, sistem untuk di implementasikan. Implementasi sistem adalah langkah – langkah atau prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah

(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 melalukan instalasi secara benar.

(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)

Hardware tidak dapat menyelesaikan masalah tanpa adanya software. 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 dan Siswa.

(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 keseluruhan.

(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 data dan menghasilkan data secara logis (output), cepat dan tepat berdasarkan

(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 prosedur yang memungkinkan perangkat keras komputer dapat menjalankan

(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 awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi

(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 mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan.

(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 akibatnya adalah tidak ada gambar yang dapat ditampilkan.Lynx ini ada pada

(86)

lingkungan DOS (Disk Operation System).Akan tetapi pengembangan dari browser mode teks ini adalah tidak secepat browser web dengan GUI (Grafic User Interface). Disaat perkembangan WWW ada dua browser web yang paling populer yaitu Internet

Explorer (IE) dan Netscape Navigator. Namun saat ini bermunculan browserweb lain

yang turut meramaikan persaingan untuk merebut para pengguna internet. Diantara

browser web yang telah banyak digunakan pada saat peluncurannya adalah MSN,

Opera, dan Mozilla Firefox. Diantara web browser ini terdapat kelebihan dan

kekurangan sehingga pengguna dapat memilih sesuai dengan keinginan dan kemudahan yang ditawarkan.

1. Cara Kerja Browser Mengambil Halaman

Suatu browser mengambil sebuah web page dari server dengan sebuah request. Sebuah request adalah HTTP standar yang berisi sebuah page address. Sebuah page

address terlihat seperti beriku

2. Cara Kerja Browser Menampilkan Halaman

Seluruh webpage berisi instruksi-instruksi bagaimana untuk ditampilkan.Browser menampilkan page dengan membaca instruksi-instruksi ini. Instruksi yang paling umum untuk menampilkan disebut tag HTML. TagHTML contohnya, yaitu <p> ini merupakan suatu paragraph </p>.

2.3.3 Server Web

Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen

web, komputer ini akan melayani permintaann dokumen web dari kliennya.

(87)

internet) dengan server web, menggunkan HTTP.Browserakan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan

olehserver. Server memberikan dokumen atau layanan jika tersedia juga dengan

menggunakan protokol HTTP.

2.3.4 Istilah-istilah Umum Yang Harus Diketahui

Berikut beberapa istilah umum yang harus diketahui antara lain :

a. Protokol : secara defenisi adalah standart pemprosesan informasi yang diterima secara umum. Protokol TCP / IP merupakan protokol komunikasi yang digunakan dalam internet.

b. HTTP (Hyper Transfer Protokol) :HTTP pada umumnya digunakan untuk

melayani dokumen hypertext, karena HTTP adalah protokol dengan overhead yang sangat rendah, sehingga pada kenyataan navigasi informasi dapat ditambah langsung ke dalam dokumen. Dengan demikian protokolnya sendiri tidak harus mendukung navigasi secara penuh.

c. Browsing / Surfing : kegiatan menelusuri dan mencari informasi dalam internet

melalui layanan informasi web.

d. URL (Universal resource Locator) : adalah konsep nama file standar yang

diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori dan nama filenya, tetapi juga nama mesinnya dalam jaringan. URL dapat disediakan dengan berbagai metode, dan bisa jadi bukan sekedar file, kerena URL dapat menunjukkan query-query, dokumen yang disimpan dalam database.

(88)

2.4 HTML (Hypertext Markup Language)

2.4.1 Dokumen HTML

Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai webpage.Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen umumnya berisi informasi atau interface aplikasi didalam internet.

Ada dua cara untuk membuat web page : dengan web editor (misalnya

macromedia Dreamweaver atau Microsoft Frontpage) atau teks editor biasa misalnya

notepad atau editplus.

2.4.2 Penamaan Dokumen HTML

Penamaan dokumen HTML yang menggunakan tiga karakter awalnya adalah untuk mengakomodasikan sistem penamaan yang ada pada sistem operasi DOS.Nama dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar dan kecil). Nama dokumen yang sama tapi dituliskan dalam case yang berbeda akan dianggap sebagai document yang berbeda, misalnya „dokumen.html’ berbeda dengan „DOKUMEN.html’.Kasus case sensitiveakan dijumpai pada dokumen web yang dihosting didalam server yang berbasis *.nix (keluarga sistem operasi UNIX).

2.4.3 Elemen dan Tag HTML

Dokumen HTML disusun oleh elemen-elemen.Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan Tag. Tag HTML terdiri dari sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya, <H1> dengan

(1)

ABSTRAK

Website adalah salah satu sistem informasi yang dapat dengan mudah diakses melalui jaringan internet. Dalam perancangan suatu sistem informasi diperlukan data dan informasi yang akurat agar sistem informasi yang dirancang dapat memenuhi kebutuhan yang sesuai dengan keinginan pengguna. Pembuatan website ini bertujuan untuk memudahkan guru, maupun siswa untuk mendapatkan informasi tentang SMP Swasta HKBP Sipahutar tersebut. Website ini dikembangkan menggunakan bahasa pemrograman PHP dan MYSQL sebagai databasenya. Untuk itu penulis akan

membahas “Perancangan Sistem Informasi Smp Swasta HKBP Sipahutar Berbasis

(2)

ABSTRACT

Website information system is one that can be easily accessed through the Internet. In designing an information system necessary data and accurate information so that the information system designed to meet the needs of the users liking. Making this website aims to facilitate teachers, and students to get information about these Sipahutarswasta HKBP junior high school. This website was developed using PHP programming language and MySQL as the database. To the authors will discuss “Perancangan Sistem Informasi Smp Swasta HKBP Sipahutar Berbasis Web Menggunakan PHP dan MYSQL”.

(3)

DAFTAR ISI

... Halaman

Persetujuan ... i

Pernyataan ... ii

Penghargaan ... iii

Abstrak ... iiv

Abstract ... v

Daftar Isi ... vi

Daftar Tabel ... vii

Daftar Gambar ... viii

Bab 1. Pendahuluan ... 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 3

1.4 Tujuan Penelitian ... 3

1.5 Manfaat Penelitian ... 4

1.6 Metodologi Penelitian ... 4

1.7 Sistematika Penulisan ... 6

Bab 2. Landasan Teori ... 2.1 Pengertian Komputer ... 8

2.2 Sejarah Internet ... 10

2.3World WideWeb (WWW) ... 11

2.3.1 Lahirnya Web ... 12

2.3.2 Browser Web ... 13

2.3.3 Server Web ... 14

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

2.4 HTML(Hypertext Markup Language) ... 16

2.4.1 Dokumen HTML 2.4.2 Penamaan Dokumen HTML ... 16

2.4.3 Elemen dan Tag HTML ... 16

2.5 PHP(Hypertext Preprocessor) ... 20

2.5.1 SejarahPHP ... 20

2.5.2 PHP/F1 (Personal Home Page) ... 20

2.5.3 Kelebihan PHP dariBahasaPemograman Lain ... 21

2.5.4 Script PHP ... 22

2.5.5 Integrasi dengan Database ... 23

2.6 MySQL ... 25

2.7 Macromedia Dreamweaver ... 26

2.8 Pengertian Sistem Informasi ... 27 Bab 3.Perancangan Sistem ...

(4)

3.1 PerancanganSistem ... 29

3.2 Data Flowchart Diagram (DFD) ... 30

3.3 Perancangan Database ... 31

3.4 Flowchart ... 35

3.4.1 Flowchart Menu login ... 38

3.4.2 Flowchart guru ... 39

3.4.3 Flowchart isi nilai 39

3.4.4 Flowchart kelas 40

3.4.5 Flowchart laporan 40

3.4.6 Flowchart mata pelajaran 41

3.4.7 Flowchart siswa 41

Bab 4. Implementasi Sistem ... 4.1 Pengertian ... 42

4.2 Kebutuhan Sistem ... 43

4.3Kebutuhan Sistem ... 44

4.3.1 Perangkat Keras (Hardware) ... 44

4.3.2 Perangkat Lunak (Software) ... 44

4.3.3 Pengguna (Brainware) ... 45

4.4Tampilan Halaman Website ... 45

Bab 5. Kesimpulan dan Saran ... 5.1 Kesimpulan ... 53

5.2 Saran ... 54 Daftar Pustaka

(5)

DAFTAR TABEL

Nomor Judul ... Halaman Tabel

2.1 Daftar Database yang didukung PHP . ... 23

2.2 Defenisi sistem informasi ... 28

3.1 Simbol-simbol data flow diagram ... 31

3.2 Tabel Login ... 32

3.3 Tabel Penambahan data guru ... 32

3.4 Tabel Absen ... 33

3.5 Tabel Daftar Nilai ... 33

3.6 Tabel Kelas ... 33

3.7 Tabel List kelas ... 33

3.8 Tabel Mata Pelajaran ... 34

3.9 Tabel Nilai ... 34

3.10 Tabel Pengumuman ... 34

3.11 Tabel Pesan ... 35

3.12 Siswa 35

(6)

DAFTAR GAMBAR

Nomor Judul ... Halaman Gambar

2.1 Dokumen HTML ditampilkan dibrowser Internet Explorer ... 19

2.2 Tampilan Macromedia Dreamweaver 8 ... 27

3.4.1 Tampilan flowchart Menu Login ... 38

3.4.2 Tampilan flowchart Guru ... 39

3.4.3 Tampilan flowchart isi nilai ... 39

3.4.4 Tampilan flowchart kelas ... 40

3.4.5 Tampilan flowchart laporan ... 40

3.4.6 Tampilan flowchart mata pelajaran ... 41

3.4.7 Tampilan flowchart siswa ... 41

4.1 Tampilan halamanhome sekolah 45 4.2 Tampilan visi dan misi sekolah ... 46

4.3 Tampilan tujuan sekolah ... 46

4.4 Tampilan tambah dan menampilkan data guru ... 47

4.5 Tampilan tambah dan menampilkan data siswa ... 47

4.6 Tampilan tambah dan menampilkan data mata pelajaran ... 48

4.7 Tampilan tambah dan menampilkan data kelas ... 48

4.8 Tampilan monitoring system 49

4.9 Halaman tampilan nilai siswa 49

4.10 Tampilan nilai siswa per kelas 50

4.11 Tampilan input nilai siswa oleh guru 50

4.12 Tampilan halaman login guru 51

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Parts

Dokumen yang terkait

Perancangan Sistem Informasi Berbasis Web Yayasan Perguruan Sma Swasta Kesatria Medan

Perancangan Sistem Informasi Berbasis Web Pada SMP Negeri 22 Medan

Perancangan Sistem Informasi Berbasis Web SMP Swasta Katolik Budi Murni 2 Medan

Sistem Informasi Akademik Terpadu Berbasis Web pada SMP Swasta "X".

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Dukungan

Links

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Parts

Dokumen yang terkait

Perancangan Sistem Informasi Berbasis Web Yayasan Perguruan Sma Swasta Kesatria Medan

Perancangan Sistem Informasi Berbasis Web Pada SMP Negeri 22 Medan

Perancangan Sistem Informasi Berbasis Web SMP Swasta Katolik Budi Murni 2 Medan

Sistem Informasi Akademik Terpadu Berbasis Web pada SMP Swasta "X".

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Perancangan Sistem Informasi Pada SMP Swasta HKBP Sipahutar Berbasis Web

Dokumen yang Anda mencari sudah siap untuk unduhkan