Sistem Informasi Sma Swasta Harapan 3 Berbasis Web

(1)

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa mahasiswa Tugas Akhir Program Diploma Teknik Informatika :

Nama : Renza Arfansa Nasution

NIM : 132406029

Program Studi : D-3 Teknik Informatika

Judul Tugas Akhir : Sistem Informasi SMA Swasta Harapan 3 Berbasis Web

Telah melaksanakan tes program Tugas Akhir Mahasiswa tersebut diatas pada tanggal :

Dengan Hasil : SUKSES/GAGAL

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Juni 2016

Dosen Pembimbing

Drs, Partano Siagian, M.Sc


(2)

KARTU BIMBINGAN TUGAS AKHIR Nama : Renza Arfansa Nasution

NIM : 132406029

Judul Tugas Akhir : Sistem Informasi Sma Swasta Harapan 3 Berbasis Web Dosen Pembimbing : Drs, Partano Siagian, M.Sc

Program Studi : D-3 Teknik Informatika

NO TANGGAL

ASISTEN BIMBINGAN

PEMBAHASAN PADA ASISTEN MENGENAI,

PADA BAB

PARAF DOSEN PEMBIMBING

KETERANGAN

1 2 3 4 5 6 7

*Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui :

Ketua Program Studi D-3 TI Pembimbing Utama/Penanggung Jawab FMIPA USU

Dr. Elly Rosmaini, M.Si Drs, Partano Siagian, M.Sc NIP. 196005201985032002 NIP.195112271980031001


(3)

Lampiran 1 : Program

1. Index.php :

<?php include 'koneksi.php'; ?> <?php ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>SMA HARAPAN 3</title>

<link rel="shortcut icon" href="image/logoharapan.png" /> <meta name="description" content="Source code generated using layoutit.com">

<meta name="author" content="LayoutIt!">

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

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

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

<!-- End of head section HTML codes -->

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

</head> <body> <div class="wrapper"> <div class="sharedonk"> <a href="http://twitter.com/home/?status=http://ww.smaharapan3.sch.id/" rel="nofollow"> <img src="image/twit.png"></img> </a> <a href="http://www.facebook.com/share.php?u=http://ww.smaharapan3.sch.id/ " rel="nofollow">


(4)

<img src="image/fbook.png"></img> </a> <a href="https://plus.google.com/share?url=http://ww.smaharapan3.sch.id/" rel="nofollow"> <img src="image/gplus.png"></img> </a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://ww.smaha rapan3.sch.id/" rel="nofollow"> <img src="image/linkedin.png"></img> </a> </div> <div class="container-fluid">

<div style="backgroundcolor: #3bf; margin: auto; paddingtop: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" class="row">

<div class="row">

<div class="col-md-2 col-md-offset-2">

<img style="width: 100px; marginleft: -120px;" alt="Bootstrap Image Preview" src="image/logoharapan.png">

</div>

<div style="margin-left: -145px;" class="col-md-5">

<h3>

SMA HARAPAN 3 </h3>

<p style="font-size: 8px"><address style="font-size: 10px">

<strong>Jl. Karya Wisata Ujung No. 31</strong><br> Medan Johor - Deliserdang 20355 <br> <abbr

title="Phone">P:</abbr> (061) 7876152

</address></p> </div> <div class="col-md-4"> </div> </div> </div> </div>

<div style="margin-top: 15px;" class="container-fluid"> <div class="row">

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

<nav class="navbar navbar-default" role="navigation">


(5)

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

</button> <a class="navbar-brand" href="index.php">Beranda</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav"> <li class="profil"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profil<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li class="divider"> </li> <li> <a href="index.php?page=sejarah">Sejarah</a> </li> <li class="divider"> </li> <li> <a href="index.php?page=visimisitujuan">Visi, Misi dan Tujuan</a>

</li> <li class="divider">

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

</li> <li> <a href="index.php?page=prestasi">Prestasi</a>


(6)

<li class="divider"> </li> <li> <a href="index.php?page=ekstrakurikuler">Ekstrakurikuler</a> </li> <li class="divider"> </li> </ul> </li> <li> <a href="index.php?page=berita">Berita</a> </li> <li> <a href="index.php?page=galeri">Galeri</a> </li> <li class="profil"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pendaftaran Siswa Baru<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li class="divider"> </li> <li> <a href="index.php?page=klskedokteran">Kelas Kedokteran</a>

</li> <li class="divider"> </li> <li> <a href="index.php?page=reguler">Reguler</a> </li> </ul> </li> </ul> <form method="get" class="navbar-form navbar-left" role="search">

<div class="form-group">


(7)

<input class="form-control" name="search" type="text">

</div> <button type="submit" name="cari" class="btn btn-default">

Submit </button> </form> </div> </nav> </div> </div> </div>

<!-- Insert to your webpage where you want to display the slider --> <div id="amazingslider-wrapper-1"

style="display:block;position:relative;max-width:780px;margin:30px auto;"> <div id="amazingslider-1"

style="display:block;position:relative;margin:0 auto;">

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

<li><a href="#"><img src="sliderimg/siswa1.JPG" alt="siswa1" title="siswa1" /></a>

</li>

<li><a href="#"><img src="sliderimg/siswa2.jpg" alt="siswa2" title="siswa2" /></a>

</li>

<li><a href="#"><img src="sliderimg/siswa3.JPG" alt="siswa3" title="siswa3" /></a>

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

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

<div style="margin-bottom: 30px" class="row">

<div id="isi" class="col-md-10 col-md-offset-1"> <?php

if (isset($_GET['search'])) { $search = $_GET['search'];

$query = mysqli_query($kon, "SELECT * FROM page WHERE judul LIKE '%$search%' OR isi LIKE '%$search%'");

while($row = mysqli_fetch_array($query)) { $isi = isset($row['isi']) ? $row['isi'] : ""; $judul = isset($row['judul']) ? $row['judul'] : "";

$page_info = isset($row['page_info']) ? $row['page_info'] : "";


(8)

<div style="border: 1px solid #ccc; padding: 15px;">

<a style="text-decoration: none; color: black; font: 1.2em 'Agency Fb'" href="index.php?page=<?php echo $page_info; ?>"><?php echo $isi; ?></a>

</div>

<div style="border: 1px solid #ccc; padding: 15px;">

<a style="text-decoration: none; color: black; font: 1.2em 'Agency Fb'" href="index.php?page=<?php echo $page_info; ?>"><?php echo $judul; ?></a>

</div> <?php }

}

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

$page = isset($_GET['page']) ? $_GET['page'] : ""; switch($page) { case 'sejarah': include 'pagesprofil/sejarah.php'; break; case 'ekstrakurikuler': include 'pagesprofil/ekstrakurikuler.php'; break; case 'prestasi': include 'pagesprofil/prestasi.php'; break; case 'saranadanprasarana': include 'pagesprofil/saranadanprasarana.php'; break; case 'visimisitujuan': include 'pagesprofil/visimisitujuan.php'; break; case 'home': include 'inc/home.php'; break; case 'klskedokteran': include 'pagesdaftar/klskedokteran.php'; break; case 'reguler': include 'pagesdaftar/reguler.php'; break;


(9)

case 'berita': include 'berita.php'; break; case 'galeri': include 'galeri.php'; break; case 'login': include 'login.php'; break; default: include 'inc/home.php'; }

} else {

include 'inc/home.php'; } ?> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <footer id="footer"> <div>

<b><a href="index.php" title="Kembali ke halaman utama">SMA HARAPAN 3</a></b> |

Jl. Karya Wisata Ujung No. 31 <br> Medan Johor - Deliserdang 20355 | Telp: (061) 7876152

<hr>

<div class="f_kiri">

© 2016 SMA HARAPAN 3. Powered by Renza Arfansa Nasution

</div>

<div class="f_kanan"><a

href="index.php">Home</a> | <a href="index.php?page=login">Login</a> </div>

</div> </footer>

</div> </div>


(10)

</div> </div>

</div> <style>

.ui-datepicker { width: 17em;

padding: .2em .2em 0; visibility: hidden; }

</style>

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

div#creditfooter {display:none;}#pagesKanan {position:fixed; bottom:0; right:5px; float:left; }

.fb_share_count_top {width:48px !important;} </style>

</footer> </div> </div>

<script src="js/bootstrap.min.js"></script> <script src="js/scripts.js"></script>

</body> </html>

2. Galeri.php :

<?php include 'koneksi.php'; ?> <div class="container-fluid">

<h3 style="margin-bottom: 30px;">Album Galeri SMA HARAPAN 3</h3>

<div class="container-fluid"> <div class="row">


(11)

<?php

$query = mysqli_query($kon, "SELECT * FROM galeri"); while($row = mysqli_fetch_array($query)) {

?>

<a href="galeri-lengkap.php?nama=<?php echo $row['nama']; ?>">

<div class="gal col-md-4"> <figure>

<img class="gambar img-thumbnail" src="image/galeri/<?php echo $row['gambar']; ?>">

<figcaption class="nama text-center"><?php echo $row['nama']; ?></figcaption>

<figcaption class="tanggal text-center"><?php echo $row['tanggal']; ?></figcaption>

</figure> </div>

</a> <?php }

?>

</div> </div>

</div>

3. Galeri-lengkap.php :

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

?>

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

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>SMA HARAPAN 3</title>


(12)

<meta name="description" content="Source code generated using layoutit.com">

<meta name="author" content="LayoutIt!">

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

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

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

<!-- End of head section HTML codes -->

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

</head> <body> <div class="wrapper"> <div class="sharedonk"> <a href="http://twitter.com/home/?status=http://ww.smaharapan3.sch.id/" rel="nofollow"> <img src="image/twit.png"></img> </a> <a href="http://www.facebook.com/share.php?u=http://ww.smaharapan3.sch.id/ " rel="nofollow"> <img src="image/fbook.png"></img> </a> <a href="https://plus.google.com/share?url=http://ww.smaharapan3.sch.id/" rel="nofollow"> <img src="image/gplus.png"></img> </a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://ww.smaha rapan3.sch.id/" rel="nofollow"> <img src="image/linkedin.png"></img> </a> </div> <div class="container-fluid">

<div style="backgroundcolor: #3bf; margin: auto; paddingtop: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" class="row">

<div class="row">


(13)

<img style="width: 100px; marginleft: -120px;" alt="Bootstrap Image Preview" src="image/logoharapan.png">

</div>

<div style="margin-left: -145px;" class="col-md-5">

<h3>

SMA HARAPAN 3 </h3>

<p style="font-size: 8px"><address style="font-size: 10px">

<strong>Jl. Karya Wisata Ujung No. 31</strong><br> Medan Johor - Deliserdang 20355 <br> <abbr

title="Phone">P:</abbr> (061) 7876152

</address></p> </div> <div class="col-md-4"> </div> </div> </div> </div>

<div style="margin-top: 15px;" class="container-fluid"> <div class="row">

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

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

</button> <a class="navbar-brand" href="index.php">Beranda</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav"> <li

class="profil">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Profil<strong


(14)

<ul class="dropdown-menu"> <li class="divider"> </li> <li> <a href="index.php?page=sejarah">Sejarah</a> </li> <li class="divider"> </li> <li> <a href="index.php?page=visimisitujuan">Visi, Misi dan Tujuan</a>

</li> <li class="divider">

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

</li> <li> <a href="index.php?page=prestasi">Prestasi</a> </li> <li class="divider"> </li> <li> <a href="index.php?page=ekstrakurikuler">Ekstrakurikuler</a> </li> <li class="divider"> </li> </ul> </li> <li> <a href="index.php?page=berita">Berita</a> </li> <li> <a href="index.php?page=galeri">Galeri</a> </li>


(15)

<li class="profil"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pendaftaran Siswa Baru<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li class="divider"> </li> <li> <a href="index.php?page=klskedokteran">Kelas Kedokteran</a>

</li> <li class="divider"> </li> <li> <a href="index.php?page=reguler">Reguler</a> </li> </ul> </li> </ul> <form method="get" class="navbar-form navbar-left" role="search">

<div class="form-group">

<input class="form-control" name="search" type="text">

</div> <button type="submit" name="cari" class="btn btn-default">

Submit </button> </form> </div> </nav> </div> </div> </div>

<!-- Insert to your webpage where you want to display the slider --> <div id="amazingslider-wrapper-1"

style="display:block;position:relative;max-width:780px;margin:30px auto;"> <div id="amazingslider-1"

style="display:block;position:relative;margin:0 auto;">


(16)

<li><a href="#"><img src="sliderimg/siswa1.JPG" alt="siswa1" title="siswa1" /></a>

</li>

<li><a href="#"><img src="sliderimg/siswa2.jpg" alt="siswa2" title="siswa2" /></a>

</li>

<li><a href="#"><img src="sliderimg/siswa3.JPG" alt="siswa3" title="siswa3" /></a>

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

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

<div style="margin-bottom: 30px" class="row"> <div class="col-md-6 col-md-offset-3">

<div class="wrapper-gambar"> <?php

if (isset($_GET['search'])) { $search = $_GET['search'];

$query = mysqli_query($kon, "SELECT * FROM page WHERE judul LIKE '%$search%' OR isi LIKE '%$search%'");

while($row = mysqli_fetch_array($query)) { $isi = isset($row['isi']) ? $row['isi'] : ""; $judul = isset($row['judul']) ? $row['judul'] : "";

$page_info = isset($row['page_info']) ? $row['page_info'] : "";

?>

<div style="border: 1px solid #ccc; padding: 15px;">

<a style="text-decoration: none; color: black; font: 1.2em 'Agency Fb'" href="index.php?page=<?php echo $page_info; ?>"><?php echo $isi; ?></a>

</div>

<div style="border: 1px solid #ccc; padding: 15px;">

<a style="text-decoration: none; color: black; font: 1.2em 'Agency Fb'" href="index.php?page=<?php echo $page_info; ?>"><?php echo $judul; ?></a>

</div> <?php }

}


(17)

$nama = isset($_GET['nama']) ? $_GET['nama'] : "";

$query = mysqli_query($kon, "SELECT * FROM kumpulan_galeri WHERE nama='$nama'");

while($row = mysqli_fetch_array($query)) { ?>

<div class="gambar">

<img class="responsive img-thumbnail" src="image/galeri/<?php echo $row['gambar']; ?>">

</div>

<div class="nama">

<?php echo $row['nama'] ?> </div>

<div style="border-bottom: 1px solid black; padding: 15px; margin-bottom: 15px" class="tanggal">

<?php echo $row['tanggal'] ?> </div> <?php } } ?> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <footer id="footer"> <div>

<b><a href="index.php" title="Kembali ke halaman utama">SMA HARAPAN 3</a></b> |

Jl. Karya Wisata Ujung No. 31 <br> Medan Johor - Deliserdang 20355 | Telp: (061) 7876152

<hr>

<div class="f_kiri">

© 2016 SMA HARAPAN 3. Powered by Renza Arfansa Nasution


(18)

<div class="f_kanan"><a

href="index.php">Home</a> | <a href="index.php?page=login">Login</a> </div> </div> </footer> </div> </div> </div> </div> </div> <script src="js/bootstrap.min.js"></script> <script src="js/scripts.js"></script> </body> </html> 4. Berita.php <?php

$query = mysqli_query($kon, "SELECT * FROM berita"); while($row = mysqli_fetch_array($query)) {

?>

<a href="berita-lengkap.php?judul=<?php echo $row['judul']; ?>"><div class="container-berita">

<div class="top">

<div class="pembuat">

<?php echo $row['pembuat'] ?> </div>

<div class="tanggal">

<?php echo $row['tanggal']; ?> </div>

<div class="clear"></div> </div>

<div class="judul">

<h3><?php echo $row['judul']; ?></h3> </div>

<div class="gambar">

<img class="img-thumbnail" src="image/berita/<?php echo $row['gambar']; ?>">


(19)

</div></a> <?php }

?>

5. Berita-lengkap.php

<?php include 'koneksi.php'; ?> <?php ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>SMA HARAPAN 3</title>

<meta name="description" content="Source code generated using layoutit.com">

<meta name="author" content="LayoutIt!">

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

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

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

<!-- End of head section HTML codes -->

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

</head> <body> <div class="wrapper"> <div class="sharedonk"> <a href="http://twitter.com/home/?status=http://ww.smaharapan3.sch.id/" rel="nofollow"> <img src="image/twit.png"></img> </a>


(20)

<a href="http://www.facebook.com/share.php?u=http://ww.smaharapan3.sch.id/ " rel="nofollow"> <img src="image/fbook.png"></img> </a> <a href="https://plus.google.com/share?url=http://ww.smaharapan3.sch.id/" rel="nofollow"> <img src="image/gplus.png"></img> </a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://ww.smaha rapan3.sch.id/" rel="nofollow"> <img src="image/linkedin.png"></img> </a> </div> <div class="container-fluid">

<div style="backgroundcolor: #3bf; margin: auto; paddingtop: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" class="row">

<div class="row">

<div class="col-md-2 col-md-offset-2">

<img style="width: 100px; marginleft: -120px;" alt="Bootstrap Image Preview" src="image/logoharapan.png">

</div>

<div style="margin-left: -145px;" class="col-md-5">

<h3>

SMA HARAPAN 3 </h3>

<p style="font-size: 8px"><address style="font-size: 10px">

<strong>Jl. Karya Wisata Ujung No. 31</strong><br> Medan Johor - Deliserdang 20355 <br> <abbr

title="Phone">P:</abbr> (061) 7876152

</address></p> </div> <div class="col-md-4"> </div> </div> </div> </div>

<div style="margin-top: 15px;" class="container-fluid"> <div class="col-md-12">


(21)

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

</button> <a class="navbar-brand" href="index.php">Beranda</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav"> <li class="profil"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profil<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li class="divider"> </li> <li> <a href="index.php?page=sejarah">Sejarah</a> </li> <li class="divider"> </li> <li> <a href="index.php?page=visimisitujuan">Visi, Misi dan Tujuan</a>

</li> <li class="divider">

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

</li> <li>


(22)

<a href="index.php?page=prestasi">Prestasi</a> </li> <li class="divider"> </li> <li> <a href="index.php?page=ekstrakurikuler">Ekstrakurikuler</a> </li> <li class="divider"> </li> </ul> </li> <li> <a href="index.php?page=berita">Berita</a> </li> <li> <a href="index.php?page=galeri">Galeri</a> </li> <li class="profil"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pendaftaran Siswa Baru<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li class="divider"> </li> <li> <a href="index.php?page=klskedokteran">Kelas Kedokteran</a>

</li> <li class="divider"> </li> <li> <a href="index.php?page=reguler">Reguler</a> </li> </ul> </li> </ul> <form method="get" class="navbar-form navbar-left" role="search">


(23)

<div class="form-group">

<input class="form-control" name="search" type="text">

</div> <button type="submit" name="cari" class="btn btn-default">

Submit </button> </form> </div> </nav> </div> </div>

<!-- Insert to your webpage where you want to display the slider --> <div id="amazingslider-wrapper-1"

style="display:block;position:relative;max-width:780px;margin:30px auto;"> <div id="amazingslider-1"

style="display:block;position:relative;margin:0 auto;">

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

<li><a href="#"><img src="sliderimg/siswa1.JPG" alt="siswa1" title="siswa1" /></a>

</li>

<li><a href="#"><img src="sliderimg/siswa2.jpg" alt="siswa2" title="siswa2" /></a>

</li>

<li><a href="#"><img src="sliderimg/siswa3.JPG" alt="siswa3" title="siswa3" /></a>

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

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

<div style="margin-bottom: 30px" class="row"> <div id="isi" class="col-md-12">

<?php

if (isset($_GET['search'])) { $search = $_GET['search'];

$query = mysqli_query($kon, "SELECT * FROM page WHERE judul LIKE '%$search%' OR isi LIKE '%$search%'");

while($row = mysqli_fetch_array($query)) { $isi = isset($row['isi']) ? $row['isi'] : ""; $judul = isset($row['judul']) ? $row['judul'] : "";

$page_info = isset($row['page_info']) ? $row['page_info'] : "";


(24)

?>

<div style="border: 1px solid #ccc; padding: 15px;">

<a style="text-decoration: none; color: black; font: 1.2em 'Agency Fb'" href="index.php?page=<?php echo $page_info; ?>"><?php echo $isi; ?></a>

</div>

<div style="border: 1px solid #ccc; padding: 15px;">

<a style="text-decoration: none; color: black; font: 1.2em 'Agency Fb'" href="index.php?page=<?php echo $page_info; ?>"><?php echo $judul; ?></a>

</div> <?php }

}

if (isset($_GET['judul'])) { $judul = $_GET['judul'];

$query = mysqli_query($kon, "SELECT * FROM berita WHERE judul='$judul'");

$row = mysqli_fetch_array($query); ?>

<div class="container-fluid">

<div class="panel panel-info"> <div class="panel-heading">

<?php echo $row['judul']; ?> <div class="close">X</div> </div>

<div class="panel-body">

<img class="gbr" width="100%;" src="image/berita/<?php echo $row['gambar']; ?>">

</div>

<div class="panel-footer">

<?php echo $row['keterangan']; ?> </div>

</div> </div> <script>

$(function() {

$(".gbr").on("click", function() { $(this).css("width", "100%"); });


(25)

$(".gbr").css("width", "30%"); }); }); </script> <?php } ?> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <footer id="footer"> <div>

<b><a href="index.php" title="Kembali ke halaman utama">SMA HARAPAN 3</a></b> |

Jl. Karya Wisata Ujung No. 31 <br> Medan Johor - Deliserdang 20355 | Telp: (061) 7876152

<hr>

<div class="f_kiri">

© 2016 SMA HARAPAN 3. Powered by Renza Arfansa Nasution

</div>

<div class="f_kanan"><a

href="index.php">Home</a> | <a href="index.php?page=login">Login</a> </div> </div> </footer> </div> </div> </div> </div> <script src="js/bootstrap.min.js"></script> <script src="js/scripts.js"></script> </body> </html> 6. Login.php


(26)

<?php

include 'koneksi.php'; if (isset($_POST['login'])) {

$username = $_POST['username']; $password = $_POST['password'];

$query = mysqli_query($kon, "SELECT * FROM admin WHERE username='$username' AND password='$password'");

if (mysqli_num_rows($query) > 0) {

$_SESSION['username'] = $username; ?>

<script>

alert("Anda berhasil login!");

window.location.href = "admin/index.php"; </script>

<?php exit(); } else {

echo "Error..." . mysqli_error($kon); }

} ?>

<form action="" role="form" method="post"> <div class="container">

<div class="col-md-4">

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

<label for="username">Username</label> <input type="text" name="username" id="username" class="form-control">

</div> <br>

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

<label for="password">Password</label> <input type="password" name="password" id="password" class="form-control">

</div> <br>

<div class="col-md-12"> <label for=""></label>

<input type="submit" name="login" class="form-control" value="Login">

</div> </div>


(27)

</form>

7. Koneksi.php <?php

@session_start();

$kon = mysqli_connect("localhost", "root", "", "tugas_akhir"); if (!$kon) {

echo "Errror..." . mysqli_error($kon); }

?>

8. Klskedokteran.php <?php

if (isset($_POST)) {

if (!empty($_POST['nama_siswa']) and !empty($_POST['nisn']) and !empty($_POST['alamat']) and !empty($_POST['telf']) and !empty($_POST['nama_ortu']) and !empty($_POST['telfortu']) and !empty($_POST['raport']) and !empty($_POST['skhun']) and !empty($_POST['ns'])) { $nama_siswa = $_POST['nama_siswa']; $nisn = $_POST['nisn'];

$alamat = $_POST['alamat']; $telf = $_POST['telf'];

$nama_ortu = $_POST['nama_ortu']; $telfortu = $_POST['telfortu']; $raport = $_POST['raport']; $skhun = $_POST['skhun']; $ns = $_POST['ns'];

$kelas = "kedokteran";

$total_nilai = $raport + $skhun + $ns; $rata = $total_nilai / 3;

if ($rata < 70) {

echo '<script>alert("Maaf Nilai Anda Tidak Mencukupi, Silahkan Daftar di Kelas Reguler");

window.location.href = "index.php?page=reguler"; </script>';


(28)

} else {

$query = mysqli_query($kon, "INSERT INTO register VALUES( '$nama_siswa', '$nisn', '$alamat', '$telf', '$nama_ortu', '$telfortu', '$raport', '$skhun', '$ns', '$kelas')"); if ($query) {

echo '<script>alert("Anda berhasil terdaftar di kelas kedokteran.");

window.location.href = "index.php"; </script>';

} else {

echo "Error " . mysqli_error($kon); } } } } ?> <div id="form">

<form action="" method="post"> <table>

<caption>Daftar Siswa Kedokteran</caption> <tr><td>Nama Siswa</td><td><input type="text" name="nama_siswa" id="nama_siswa"></td></tr>

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

<tr><td>Alamat Siswa</td><td><input type="text" name="alamat" id="alamat"></td></tr>

<tr><td>No. Telf</td><td><input type="text" name="telf" id="telf"></td></tr>

<tr><td>Nama Orang Tua</td><td><input type="text" name="nama_ortu" id="nama_1ortu"></td></tr>


(29)

<tr><td>No. Telf Orang Tua</td><td><input type="text" name="telfortu" id="telfortu"></td></tr>

<tr><td>Rata - Rata Nilai Raport</td><td><input type="text" name="raport" id="raport"></td></tr>

<tr><td>Nilai SKHUN</td><td><input type="text" name="skhun" id="skhun"></td></tr>

<tr><td>Nilai Ujian Sekolah</td><td><input type="text" name="ns" id="ns"></td></tr>

<tr><td><input type="submit" value="Save"> </table>

</form> </div>

9. Regular.php <?php

if (isset($_POST)) {

if (!empty($_POST['nama_siswa']) and !empty($_POST['nisn']) and !empty($_POST['alamat']) and !empty($_POST['telf']) and !empty($_POST['nama_ortu']) and !empty($_POST['telfortu']) and !empty($_POST['raport']) and !empty($_POST['skhun']) and !empty($_POST['ns'])) { $nama_siswa = $_POST['nama_siswa']; $nisn = $_POST['nisn'];

$alamat = $_POST['alamat']; $telf = $_POST['telf'];

$nama_ortu = $_POST['nama_ortu']; $telfortu = $_POST['telfortu']; $raport = $_POST['raport']; $skhun = $_POST['skhun']; $ns = $_POST['ns'];

$kelas = "reguler";


(30)

'$nama_siswa', '$nisn', '$alamat', '$telf', '$nama_ortu', '$telfortu', '$raport', '$skhun', '$ns', '$kelas')"); if ($query) {

echo '<script>alert("Selamat Anda berhasil terdaftar."); window.location.href = "index.php";

</script>'; } else {

echo "Error " . mysqli_error($kon); }

} } ?>

<div id="form">

<form role="form" class="form" action="" method="post"> <table>

<caption>Daftar Siswa Reguler</caption>

<tr><td>Nama Siswa</td><td><input class="form-control" type="text" name="nama_siswa" id="nama_siswa"></td></tr>

<tr><td>NISN</td><td><input class="form-control" type="text" name="nisn" id="nisn"></td></tr>

<tr><td>Alamat Siswa</td><td><input class="form-control" type="text" name="alamat" id="alamat"></td></tr>

<tr><td>No. Telf</td><td><input class="form-control" type="text" name="telf" id="telf"></td></tr>

<tr><td>Nama Orang Tua</td><td><input class="form-control" type="text" name="nama_ortu" id="nama_1ortu"></td></tr>

<tr><td>No. Telf Orang Tua</td><td><input class="form-control" type="text" name="telfortu" id="telfortu"></td></tr>

<tr><td>Rata - Rata Nilai Raport</td><td><input class="form-control" type="text" name="raport" id="raport"></td></tr>


(31)

<tr><td>Nilai SKHUN</td><td><input class="form-control" type="text" name="skhun" id="skhun"></td></tr>

<tr><td>Nilai Ujian Sekolah</td><td><input class="form-control" type="text" name="ns" id="ns"></td></tr>

<tr><td><input type="submit" value="Save"> </table>

</form> </div>

10.Style.css

body {

position: relative;

font: normal 13px arial, sans-serif; background: #ebeff2 top repeat-x; color: #444;

}

.wrapper { width: 875px;

background-color: white; margin: auto;

} #isi {

padding-bottom: 15px; }

img {

vertical-align: middle; width: 150px;


(32)

margin-right: 20px; margin-bottom: 10px; margin-top: 10px; }

.h3, h3 {

font-size: 28px; }

.h3, h3 {

font-size: 28px; color: #337ab7;

border-bottom: dashed 1px; }

.h1, h1 {

font-size: 24px;

border-bottom: dashed 1px; }

h2 {

font-size: 20px;

background-color: black; color: white;

padding: 10px; }

.sharedonk { position: fixed; left:15px; top: 20%;


(33)

}

.sharedonk img { width: 50px;

transition: all ease 1s; }

.sharedonk a { display: block;

transition: all ease 1s; }

.sharedonk img:hover { transform: rotate(360deg); }

footer {

font: 13px 'Open Sans', arial, sans-serif; height: 150px;

padding: 20px; margin: -15px 0 0; text-align: left; color: #fff;

background: #3bf; z-index: 1000; margin-top: 20px; }


(34)

border: 1px solid black; }

#sejarah table { margin-top: 30px; margin-bottom: 20px; border-collapse: collapse; width: 100%;

}

#sejarah th { height: 50px;

background-color: black; color: white;

}

#sejarah td { text-align: center; }

h2 {

font-size: 20px;

background-color: black; color: white;

padding: 20px; }


(35)

padding-top: 2px; padding-bottom: 2px; }

.container-berita {

border-bottom: 1px dashed #ccc; padding: 15px;

margin-bottom: 15px; }

.clear { clear: both; }

.container-berita .top {

border-bottom: 1px dashed #ccc; padding: 5px 0;

}

.container-berita .pembuat { float: left;

}

.container-berita .tanggal { float: right;

}

.container-berita .gambar img { width: 50%;

margin: auto; }


(36)

height: 200px;

margin-bottom: 15px; box-sizing: border-box; }

.gal img { width: 100%; }

.gal img:hover {

transform: scale(1.2, 1.2); }

.gal .nama {

font: .8em 'Segoe UI'; }

.gal .tanggal {

font: .8em 'Segoe UI'; }

.wrapper-gambar { width: 100%; }

.wrapper-gambar img { width: 100%;

}

.wrapper-gambar .nama { text-align: center; }


(37)

text-align: center; }

11.Admin (delete.php)

<?php

include '../koneksi.php';

if (isset($_GET['nisn'])) { $nisn = $_GET['nisn'];

$query_kelas = mysqli_query($kon, "SELECT * FROM register WHERE nisn='$nisn'");

$row_kelas = mysqli_fetch_array($query_kelas); $kelas = $row_kelas['kelas'];

$query = mysqli_query($kon, "DELETE FROM register WHERE nisn='$nisn'");

if($query AND $query_kelas) { ?>

<script>

alert("Data berhasil dihapus");

window.location.href = "index.php?page=<?php echo $kelas; ?>";

</script>'; <?php


(38)

} else {

echo "Error..." . mysqli_error($kon); }

}

12.Admin (edit.php)

<?php

include '../koneksi.php'; if (isset($_GET['nisn'])) {

$nisn_q = $_GET['nisn']; }

$query = mysqli_query($kon, "SELECT * FROM register WHERE nisn='$nisn_q'"); $row = mysqli_fetch_array($query);

?>

<div id="form">

<form action="prosesedit.php" method="POST"> <table>

<caption>Daftar Siswa Kedokteran</caption> <tr><td>Nama Siswa</td><td><input type="text" name="nama_siswa" value="<?php echo $row['nama']; ?>"

id="nama_siswa"></td></tr>

<tr><td>NISN</td><td><input type="text" name="nisn" value="<?php echo $row['nisn']; ?>" id="nisn"></td></tr>


(39)

<tr><td>Alamat Siswa</td><td><input type="text"

value="<?php echo $row['alamat']; ?>" name="alamat" id="alamat"></td></tr>

<tr><td>No. Telf</td><td><input type="text" value="<?php echo $row['telepon']; ?>" name="telf" id="telf"></td></tr>

<tr><td>Nama Orang Tua</td><td><input type="text" value="<?php echo $row['nama_ortu']; ?>" name="nama_ortu"

id="nama_1ortu"></td></tr>

<tr><td>No. Telf Orang Tua</td><td><input type="text"

value="<?php echo $row['telp_ortu']; ?>" name="telfortu" id="telfortu"></td></tr>

<tr><td>Rata - Rata Nilai Raport</td><td><input type="text" value="<?php echo $row['nilai_rapor']; ?>" name="raport" id="raport"></td></tr>

<tr><td>Nilai SKHUN</td><td><input type="text" value="<?php echo $row['nilai_skhun']; ?>" name="skhun" id="skhun"></td></tr>

<tr><td>Nilai Ujian Sekolah</td><td><input type="text" value="<?php echo $row['nilai_sekolah']; ?>" name="ns" id="ns"></td></tr>

<tr><td><input type="submit" name="submit" value="Save"> </table>

</form> </div>


(40)

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

if(!isset($_SESSION['username'])) { ?>

<script>alert("Anda harus login terbelih dahulu!."); window.location.href = "../index.php";</script>

<?php } ?> <html> <head>

<title>Admin</title>

<link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery.min.js"></script>

<script src="../js/bootstrap.min.js"></script> </head>

<body>

<div class="container-fluid">

<div class="container-fluid"> <div class="jumbotron">

<h3>Welcome, <?php echo ucfirst($_SESSION['username']); ?></h3>

</div> </div>

<div class="container-fluid">

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header">


(41)

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span><span bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

</button> <a class="navbar-brand" href="index.php">Beranda</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav"> <li>

<a href="index.php?page=reguler">Reguler</a>

</li> <li>

<a href="index.php?page=kedokteran">Kedokteran</a>

</li> <li>

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

</li>

</ul> </div>


(42)

</nav> </div>

<div class="container-fluid"> <?php

if (isset($_GET['page'])) { $page = $_GET['page'];

switch($page) { case 'reguler':

include 'reguler.php';

break;

case 'kedokteran':

include 'kedokteran.php';

break;

default:

include 'kedokteran.php';

} } else {

include 'home.php'; }

?> </div> </div>

</body> </html>


(43)

14.Admin (kedokteran.php)

<table class="table table-responsive table-bordered table-hover table-condensed"> <tr>

<th>Nama</th> <th>NISN</th> <th>Alamat</th> <th>Telepon</th> <th>Nama Ortu</th> <th>Telepon Ortu</th> <th>Nilai Rapor</th> <th>Nilai SKHUN</th> <th>Nilai Sekolah</th> <th>Kelas</th>

<th colspan="2">Aksi</th> </tr>

<?php

$query = mysqli_query($kon, "SELECT * FROM register WHERE kelas='kedokteran'");

while($row = mysqli_fetch_array($query)) { ?>

<tr>

<td><?php echo $row['nama']; ?></td> <td><?php echo $row['nisn']; ?></td>


(44)

<td><?php echo $row['alamat']; ?></td> <td><?php echo $row['telepon']; ?></td> <td><?php echo $row['nama_ortu']; ?></td> <td><?php echo $row['telp_ortu']; ?></td> <td><?php echo $row['nilai_rapor']; ?></td> <td><?php echo $row['nilai_skhun']; ?></td> <td><?php echo $row['nilai_sekolah']; ?></td> <td><?php echo $row['kelas']; ?></td>

<td><a href="edit.php?nisn=<?php echo $row['nisn']; ?>">Edit</td>

<td><a href="delete.php?nisn=<?php echo $row['nisn']; ?>">Delete</td>

</tr> <?php }

?> </table>

15.Admin ( regular.php)

<table class="table table-bordered table-hover table-condensed"> <tr>

<th>Nama</th> <th>NISN</th> <th>Alamat</th> <th>Telepon</th>


(45)

<th>Nama Ortu</th> <th>Telepon Ortu</th> <th>Nilai Rapor</th> <th>Nilai SKHUN</th> <th>Nilai Sekolah</th> <th>Kelas</th>

<th colspan="2">Aksi</th> </tr>

<?php

$query = mysqli_query($kon, "SELECT * FROM register WHERE kelas='reguler'");

while($row = mysqli_fetch_array($query)) { ?>

<tr>

<td><?php echo $row['nama']; ?></td> <td><?php echo $row['nisn']; ?></td> <td><?php echo $row['alamat']; ?></td> <td><?php echo $row['telepon']; ?></td> <td><?php echo $row['nama_ortu']; ?></td> <td><?php echo $row['telp_ortu']; ?></td> <td><?php echo $row['nilai_rapor']; ?></td> <td><?php echo $row['nilai_skhun']; ?></td> <td><?php echo $row['nilai_sekolah']; ?></td> <td><?php echo $row['kelas']; ?></td>


(46)

<td><a href="edit.php?nisn=<?php echo $row['nisn']; ?>">Edit</td>

<td><a href="delete.php?nisn=<?php echo $row['nisn']; ?>">Delete</td>

</tr> <?php }

?> </table>

16.Admin ( prosesedit.php) <?php

include '../koneksi.php'; if (isset($_POST['submit'])) {

if (!empty($_POST['nama_siswa']) and !empty($_POST['nisn']) and !empty($_POST['alamat']) and !empty($_POST['telf'])

and !empty($_POST['nama_ortu']) and !empty($_POST['telfortu']) and !empty($_POST['raport']) and !empty($_POST['skhun']) and !empty($_POST['ns'])) {

$nama_siswa = $_POST['nama_siswa']; $nisn = $_POST['nisn'];


(47)

$alamat = $_POST['alamat']; $telf = $_POST['telf'];

$nama_ortu = $_POST['nama_ortu']; $telfortu = $_POST['telfortu']; $raport = $_POST['raport']; $skhun = $_POST['skhun']; $ns = $_POST['ns'];

$query_kelas = mysqli_query($kon, "SELECT * FROM register WHERE nisn='$nisn'");

$row_kelas = mysqli_fetch_array($query_kelas); $kelas = $row_kelas['kelas'];

$query = mysqli_query($kon, "UPDATE register SET nama='$nama_siswa',

nisn='$nisn', alamat='$alamat', telepon='$telf',

nama_ortu='$nama_ortu', telp_ortu='$telfortu', nilai_rapor='$raport', nilai_skhun='$skhun',

nilai_sekolah='$ns' WHERE nisn='$nisn'");

if ($query) { ?> <script>


(48)

alert("Data berhasil diedit.");

window.location.href = "index.php?page=<?php echo $kelas; ?>";

</script>'; <?php

} else {

echo "Error " . mysqli_error($kon); }

} } ?>

17.Admin ( logout.php) <?php

include '../koneksi.php';

session_destroy();

header("Location: ../index.php"); ?>


(49)

(50)

DAFTAR PUSTAKA

dengan-php-dan-mysql-studi-kasus-membuat-sistem-informasi-pengola.html. Fahruddin, Kemal. 2009. Kamus Cepat Sublime Text Editor. Yogyakarta : Graha

Media.

H, Rafiza. 2006. Panduan dan Referensi Kamus Fungsi PHP 5. Jakarta : Elex Media Komputindo.

Kadir, Abdul. 2005. Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta : Informatika Bandung

Syahputra, Reza. 2010. Teknik Cepat Menguasai PHP. Yogyakarta : Buku Pintar Yusril, M. 2004. Belajar Cepar Website Dinamis. Semarang : Pustaka Ilmu

http://www.gavamedia.net/produk-98-aplikasi-pemrograman-web-dinamis- http://www.artikelsiana.com/2015/09/pengertian-sistem-informasi-ciri-fungsi.html.

https://id.wikipedia.org/wiki/Sistem_informasi. Diakses tanggal 25 Maret 2016. https://id.wikipedia.org/wiki/MySQL. Diakses tanggal 12 April 2016.

https://id.wikipedia.org/wiki/PhpMyAdmin. Diakses tanggal 15 April 2016. https://en.wikipedia.org/wiki/Sublime_Text. Diakses tanggal 28 Mei 2016.


(51)

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Tahap perancangan sistem ini merupakan tahapan awal yang dibuat untuk membangun website ini. Pada tahap ini, penulis akan menguraikan awal perancangan sistem, proses diagram alur, algoritma serta tujuan pembuatan dari sistem informasi ini sendiri. Website ini dibangun dengan menggunakan PHP sebagai bahasa pemrogramannya dan MySQL sebagai databasenya. Perancangan website ini dibuat atas kebutuhan siswa baru akan informasi terbaru mengenai registrasi ulang di sekolah SMA Harapan 3.

3.2 Data Flow Diagram (DFD)

Data Flow Diagram merupakan suatu diagram yang menggunakan notasi – notasi untuk menggambarkan arus dari data pada suatu sistem, yang penggunanya sangat membantu untuk memahami secara logika, terstruktur, dan jelas. DFD sangat mirip dengan Flowchart. DFD juga dapat menjadi sebuah alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi yang juga dapat digunakan untuk penggambaran analisa maupun rancangan sistem yang mudah dikomunikasikan oleh professional sistem kepada pemakai maupun pembuat


(52)

program. 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 sistem. Dengan kata lain, DFD adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem. Adapun DFD yang penulis ajukan yaitu :

Gambar 3.1 Data Flow Diagram (DFD)

3.3 Diagram Alir (Flowchart)

Diagram alir (flowchart) ini menjelaskan secara rinci langkah-langkah dari proses program. Flowchart dibuat dengan menggunakan simbol-simbol tertentu yang menyatakan setiap langkah program. Berikut adalah Flowchhart dari fungsi utama dalam sistem ujian online.


(53)

3.3.1 Flowchart Pendaftaran Siswa Baru Kelas Kedokteran

Pada sistem ini siswa akan mengisi form pendaftan pada halaman yang tersedia di website. Kemudian sistem mulai bekerja untuk menghitung nilai. Jika nilai siswa tersebut >70 maka dia berhak untuk mendaftar di kelas kedokteran. Jika nilai siswa tersebut <70 maka akan muncul pemberitahuan bahwasannya dia tidak memiliki cukup nilai untuk masuk di kelas kedokteran. Dan selanjutnya dia akan diarahkan untuk masuk kelas regular.


(54)

3.3.2 Flowchart Pendaftaran Siswa Baru Kelas Reguler

Pada sistem ini siswa diarahkan untuk mengisi form pendaftaran pada halaman yang tersedia di website. Kemudian sistem menyimpan data siswa tersebut ke dalam database.

Gambar 3.3 Flowchart Pendaftaran Siswa Baru Kelas Reguler

3.4 Perancangan Database

Database merupakan kumpulan data yang berhubungan antara satu dengan yang lainnya, tersimpan di dalam perangkat keras komputer dan untuk memanipulasinya kita harus menggunakan perangkat lunak. Database merupakan suatu komponen utama di dalam suatu sistem informasi karena segala file untuk sebuah website berada di dalamnya. File – file tersebut dikelompokkan secara teratur dan terstruktur ke dalam beberapa table sesuai dengan informasi yang


(55)

terkandung di dalamnya. Berikut adalah rancangan table yang penulis gunakan dalam membangun website sistem informasi ini :

1. Table admin yang terdiri dari :

Tabel 3.1 Tabel Admin

Nama Field Tipe Data Lebar Data Penjelasan

id Int 11 Sebagai nomor

kepala identitas

username Varchar 255 Sebagai

username

password Varchar 255 Sebagai

password

2. Table berita yang terdiri dari :

Table 3.2 Table Berita

Nama Field Tipe Data Lebar Data Penjelasan

judul Varchar 255 Sebagai Judul

gambar Varchar 255 Sebagai Gambar

keterangan Text Sebagai

Keterangan

tanggal Datetime Sebagai Tanggal

pembuat Varchar 255 Sebagai Pembuat

3. Table galeri yang terdiri dari :

Table 3.3 Table Galeri


(56)

gambar Varchar 255 Sebagai Gambar

tanggal Datetime Sebagai Tanggal

nama Varchar 255 Sebagai Nama

4. Table page yang terdiri dari :

Tabel 3.4 Tabel Page

Nama Field Tipe Data Lebar Data Penjelasan

id Int 11 Sebagai no ID

page_info Varchar 100 Sebagai Info

isi Text Sebagai Isi

judul Varchar 100 Sebagai Judul

5. Table register yang terdiri dari :

Tabel 3.5 Tabel Register

Nama Field Tipe Data Lebar

Data

Penjelasan

nama Varchar 32 Sebagai Nama

nisn Varchar 20 Sebagai No

NISN

alamat Varchar 255 Sebagai

Alamat

telepon Varchar 13 Sebagai No

Telp

nama_ortu Varchar 32 Sebagai Nama

Orang Tua

telp_ortu Varchar 13 Sebagai No

Telp Orang Tua

nilai_rapor Varchar 5 Sebagai Nilai


(57)

nilai_skhun Varchar 5 Sebagai Nilai SKHUN

nilai_sekolah Varchar 5 Sebagai Nilai

Sekolah

kelas Enum(kedokteran/regular) Sebagai

Pilihan Kelas

3.5 Perancangan Interface

Perancangan antar muka menjadi bagian yang penting untuk sebuah website sistem informasi karena halam awal sebuah website akan menjadi faktor utama bagi pengunjung website. Website akan menjadi baik apabila tampilan awalnya juga bagus. Berikut adalah perancangan antar muka tampilan awal dari sistem informasi registrasi ulang ini :


(58)

Gambar 3.4 Perancangan tampilan awal


(59)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan desain yang ada di dalam dokumen, desain sistem yang disetujui dan menguji, menginstall, memulai, serta menggunakan sistem baru atau sistem yang diperbaiki. Implementasi sistem bermuara pada aktivitas, adanya aksi, tindakan, serta mekanisme dari sistem itu sendiri.

4.2 Tujuan Implementasi Sistem

Adapun tujuan dari Implementasi Sistem antara lain :

1. Mengkaji ulang rangkaian sistem baik dari segi hardware maupun software sebagai sarana penyedia informasi.

2. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru ataupun yang sudah disetejui.

3. Memastikan mahwa pengunjung dapat menggunakan dan mengoperasikan

dengan mudah terhadap sistem yang baru dan mendapat informasi yang jelas dan akurat.

4. Memperhitungkan bahwa sistem telah memenuhi permintaan user/pemakai yaitu dengan menguji sistem secara menyeluruh.


(60)

5. Memastikan bahwa sistem telah berjalan dengan lancer dengan mengontrol dan melakukan instalasi secara benar.

4.3 Komponen – Komponen Implementasi Sistem

Didalam menjalankan sistem yang telah dirancang, dibutuhakan 3 komponen utama yaitu, perangkat keras (hardware), perangkat lunak (software), dan perangkat operator (brainware).

4.3.1 Perangkat Keras (Hardware)

Hardware merupakan komponen komputer yang nyata secara fisik (dapat dilihat), dan tidak dapat berjalan jika tidak ada software (begitu juga sebaliknya).

Spesifikasi hardware yang dibutuhkan untuk pembuatan website ini antara lain : 1. PC (Personal Computer)/Laptop

2. Memory Min. 1GB

3. Harddisk Min. 200 GB

4. Keyboard

5. Mouse


(61)

4.3.2 Perangkat Lunak (Software)

Software perangkat yang memberi perintah kepada hardware agar mampu beroperasi. Software yang diperlukan untuk membangun website ini antara lain :

1. Sistem Operasi Windows

2. XAMPP (PHP, MySQL)

3. Sublime Text Editor

4. Web Browser Google Chrome

5. Adobe Photoshop CS 5

4.3.3 Perangkat Operator (Brainware)

Brainware adalah sumber daya manusia yang nantinya akan bertanggungjawab dan berperan sebagai user maupun administrator sistem. Brainware di dalam sistem ini harus mengerti bahasa pemrograman PHP dan MySQL serta paham alur jalannya sistem.

4.4 Tampilan Web

Dari uji program yang dilakukan, maka dapat dilihat tampilah hasil desain web dinamis Sistem Informasi Siswa Baru SMA Swasta Harapan 3 Melakukan Registrasi Ulang, sebagai berikut :


(62)

4.4.1 Halaman Utama index.php

Halaman ini merupakan halaman utama (awal) ketika seseorang mengunjungi website Sistem Informasi Siswa Baru SMA Swasta Harapan 3 Melakukan Registrasi Ulang.


(63)

Gambar 4.2 Halaman Utama (2)

4.4.2 Halaman Profile

Ini adalah halaman-halaman yang terdapat pada menu profile di website Sistem Informasi Siswa Baru SMA Swasta Harapan 3 Melakukan Registrasi Ulang.


(64)

Gambar 4.3 Halaman Sejarah


(65)

Gambar 4.5 Halaman Sarana dan Prasarana


(66)

Gambar 4.7 Halaman Ekstrakurikuler

4.4.3 Halaman Berita


(67)

4.9 Halaman Berita (2)


(68)

4.11 Halaman Berita (4)

4.4.4 Halaman Galeri


(69)

4.13 Halaman Galeri (2)

4.4.5 Halaman Pendaftaran Siswa Baru


(70)

Gambar 4.15 Notice Berhasil Mendaftar


(71)

4.17 Halaman Daftar Siswa Reguler

4.4.6 Halaman Admin


(72)

4.19 Notice Berhasil Login


(73)

4.21 Halaman Edit Admin


(74)

(75)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari keterangan keseluruhan isi bab sebelumnya yang menjelaskan tentang uraian proses pembuatan Sistem Informasi SMA Swasta Harapan 3 Berbasis Web ini maka penulis dapat mengambil kesimpulan sebagai berikut :

1. Website Sistem Informasi SMA Swasta Harapan 3 dapat memudahkan para siswa baru untuk melakukan registrasi ulang secara online

2. Dengan adanya website Sistem Informasi SMA Swasta Harapan 3, maka para siswa baru yang sedang berada di luar kota medan dapat langsung melakukan registrasi ulang melalui website ini

3. Website S Sistem Informasi SMA Swasta Harapan 3 bersifat dinamis, yang melakukan update secara berkala untuk menyediakan informasi – informasi terbaru yang dibutuhkan oleh masyarakat.


(76)

5.2 Saran

Adapun saran penulis dalam merancang dan membuat website sistem informasi ini, yaitu :

1. Lebih mengembangkan informasi tentang sekolah tersebut, agar masyarakat tau bahwasannya sekolah SMA HARAPAN 3 tidak kalah bagusnya dengan sekolah lainnya

2. Lebih mengefektifkan dan mengefisiensikan penggunaan database. 3. Perlunya dilakukan update secara berkala agar masyarakat tidak

ketinggalan berita – berita terbaru mengenai SMA HARAPAN 3. 4. Perlu dilakukan penggandaan (backup) database secara teratur ke

tempat penyimpanan lain agar mencegah hal – hal yang tidak diinginkan seperti data yang hilang atau rusak.


(77)

BAB 2

LANDASAN TEORI

2.1 Pengertian Sistem Informasi

Sistem Informasi merupakan suatu sistem yang meneyediakan informasi untuk manajemen pengambilan keputusan/kebijakan dan menjalankan operasional dari kombinasi orang – orang, teknologi informasi serta prosedur – prosedur yang terorganisir. Sistem informasi sendiri diartikan sebagai kombinasi dari teknologi informasi dan aktivitas orang yang menggunakan teknologi untuk mendukung suatu operasi dan manajemen serta sebagai algoritmik data dan teknologi. Sistem informasi adalah suatu sistem didalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial, dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan – laporan yang diperlukan (Robert A. Leitch, 1998).

Sistem Informasi berfungsi untuk meningkatkan akesibilitas data yang ada secara efektif dan efisien kepada pengguna tanpa perantara sistem informasi. Sistem Informasi memiliki beberapa komponen, antara lain :

1. Komponen Input, yaitu komponen data yang masuk kedalam sistem informasi.


(78)

2. Komponen Model, merupakan kombinasi prosedur, logika dan model matematika yang memproses data yang tersimpan di basis data dengan cara yang sudah ditentukan untuk menghasilkan output yang diinginkan. 3. Komponen Output, adalah hasil informasi yang berkualitas dan

dokumentasi yang berguna untuk semua tingkatan manajemen serta pemakai sistem.

4. Komponen Teknologi, adalah alat dalam sistem informasi. Teknologi digunakan dalam menerima input, menjalankan model, menyimpan dan mengakses data serta menghasilkan output dan memantau pengendalian sistem.

5. Komponen Basis Data, yaitu kumpulan data yang saling berhubungan dan tersimpan di dalam komputer dengan menggunakan software database.

6. Komponen Kontrol, merupakan komponen yang mengendalikan gangguan

terhadap sistem informasi.

2.2 Data

Data adalah catatan atas kumpulan fakta. Data merupakan bentuk jamak dari datum, yang berasal dari bahasa Latin yang berarti “sesuatu yang diberikan”. Dalam penggunaannya sehari – hari, data berarti suatu pernyataan yang diterima langsung secara apa adanya. Pernyataan ini adalah hasil pengukuran/ pengamatan suatu variable yang bentuknya dapat berupa angka, huruf, kalimat maupun citra.


(79)

Dalam kajian ilmiah, fakta dikumpulkan untuk menjadi data. Data kemudian diolah kembali sehingga dapat diutaraka secara jelas dan tepat sehingga dapat dimengerti oleh orang lain.

2.3 Internet

Internet (interconnection-networking) merupakan seluruh jaringan komputer yang saling terhubung menggunakan standar sistem global Transmission Control Protocol/ Internet Protocol sebagai protocol pertukaran paket atau informasi untuk melayani milyaran pengguna diseluruh dunia. Internet merupakan jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika Serikat pada tahun 1969, melalui proyek yang disebut “ARPANET” (Advanced Research Project Agency Network), dimana mereka mendemonstrasikan bagaimana dengan hardware dan software komputer yang berbasis UNIX bisa melakukan komonukasi dalam jarak yang tak terhingga melalui saluran telepon.

2.4 WWW (World Wide Web)

World Wide Web merupakan sebuah sistem yang terdapat di dalam internet dan bertugas melakukan pencarian sekaligus pemberian informasi yang cepat dengan menggunakan teknologi hypertext. Web awalnya adalah ruang informasi di dalam internet, dengan menggunakan teknologi hypertext pemakai dapat menemukan


(80)

informasi dengan mengikuti link yang telah disediakan di dokumen web yang ditampilan dalam browser web.

Internet sangat identik dengan web, karena popularitasnya sebagai penyedia informasi dan interface yang dibutuhkan oleh penggguna internet dari masalah informasi sampai dengan komunikasi. Web memudahkan komputer untuk berinteraksi dengan user internet satu dengan yang launnya dalam pertukaran data/informasi di dalamnya.

2.5 Pengenalan PHP

PHP merupakan suatu bahasa yang dirancang secara khusus untuk penggunaan web. PHP (Personal Home Page) yang merupakan bahasa standar yang digunakan di dalam dunia website. PHP sangat membantu dalam proses pengembangan sebuah website. PHP sendiri merupakan software open source yang dapat digunakan di beberapa sistem operasi seperti Linux, Mac, Windows dll.

PHP memproses seluruh perintah yang berada di dalam script PHP didalam web server dan menampilkan outputnya kedalam web browser klien. PHP sendiri merupakan bahasa pemrograman yang dapat menghasilan output HTML maupun output lain sesuai keinginan misalnya JPEG, PDF, NEF dll yang dijalankan sepenuhnya pada server, sedangkan yang dikirimkan ke browser hanya hasilnya saja. (Hakim L, dan Musalini U, 2004).


(81)

2.5.1 Sejarah PHP

PHP pertama kali diciptakan pada tahun 1995 oleh Rasmus Lerdorf yang pada waktu itu hanya mampu mengolah formulir data sari web saja. Kemudia Rasmus mengembangkannya lagi dan merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi open source, sehingga banyak orang menggunakannya.

PHP/FI merupakan akronim dari Personal Home Page/Forms Interpreter. Pada awalnya, PHP/FI hanya mempunyai fungsi dasar dari PHP yang ada sekarang ini. Jadi, dengan kata lain tumpuan PHP sekarang ini adalah PHP/FI karena ketika pertama dibuat menggunakan Perl maka PHP/FI juga mempunyai susunan karakter pemrograman yang sama dengannya.

Pada tahun 1997, Rasmus resmi mengeuarkan PHP/FI versi 2.0 dimana fungsi – fungsi pada versi tersebut ditulis dengan menggunakan bahasa C. Karena telah memiliki fungsi khusus untuk mengakses database, maka pada tahun yang sama terdapat sekitar 50.000 lebih domain yang menggunakan PHP/FI sebagai platform mereka untuk website.


(82)

2.5.2 Perkembangan PHP

Setelah meluncurkan versi 2.0, PHP versi 3.0 pun diluncurkan kembali walau sedang dalam tahap alpha. PHP 3 merupakan generasi baru hasil pengembangan PHP/FI. Banyak developer yang terlibat didalamnnya. PHP versi 3.0 yang juga luncur pada tahun yang sama yaitu 1997 dikeluarkan karena melihat adanya kelemahan PHP/FI yang digunakan dalam pengaplikasian e-commerce. Alasan untuk memulai mengembangkan PHP semakin kuat ketika versi 3.0 dirilis dikarenakan versi ini sangat mendukung pengembangan berbagai jenis database, protocol dan API.

Tidak berselang lama, PHP 4 diluncurkan untuk menangani kelemahan PHP 3 yang kurangnya efisiensi waktu dan kinerja yang tidak stabil. Dengan penambahan fitur baru, seperti session, output buffering dan kecepatan proses input data yang tinggi membuat PHP 4 menjadi pilihan yang aman untuk berbagai jenis pekerjaan. Selain itu, inti perbedaan PHP dengan bahasa pemrograman lain terletak pada intinya yaitu Zend Engine yang merupakan inti dari PHP itu sendiri. Sebagai ini, Zend Engine berfungsi menangani input, menerjemahkan dan mengeksekusinya serta menjadi perantara.

Dan pada PHP 5 resmi rilis pada Juni 2004, untuk menangani kelemahan dan kekurangan pada versi sebelumnya. PHP 5 sendiri dapat membuat format file swf, dan applet java dimana PHP 5 ini diklaim merupakan versi sempurna dari versi – versi sebelumnya.


(83)

2.6 MySQL

MySQL merupakan sebuah perangkat lunak sistem pengelola basis data (Data Base Management System) atau dapat juga disebut DBMS yang multithread, multi-user dengan sekitar 7 juta instalasi penggunaan di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GPL (General Public License), tetapi mereka juga menjualnya dibawah komersial untuk kasus – kasus dimana penggunaannya tidak cocok dengan penggunaan GPL. MySQL adalah suatu database yang sangat popular dengan pengembangan web (web developers). Kecepatan dan ukuran yang kecil serta akses yang cepat

membuatnya menjadi pilihan bagi programmer – programmer untuk

mengembangkat website mereka, ditambah lagi MySQL sejatinya adalah open source yaitu gratis (bebas di unduh).

MySQL sekarang banyak digunakan oleh masyawakat luas untuk membangun website/situs yang memerlukan basis data sebagai pengolahan data. (Mobile Commerce Application, Penerbit Andi).

2.6.1 Tipe – Tipe Data MySQL

MySQL memiliki banyak varian tipe data untuk nantinya diisikan ke dalam fieldTipe data ini nantinya akan menentukan besar kecilnya ukuran suatu table.


(84)

Kelompoknya terbagi atas numerik, string, date-and-time serta kelompok himpunan (enum). Berikut beberapa tipe data dalam MySQL :

1. Int (m), merupakan tipe angka (-2147483648 s/d 2147483648). 2. Float (m), yaitu angka pecahan.

3. Date, yaitu format tanggal yang mengacu kepada hari, bulan dan tahun. 4. Char (m), kelompok string dengan panjang tetap sesuai dengan yang

ditentukan.

5. Varchar (m), merupakan string dengan panjang yang berubah – ubah sesuai dengan yang tersimpan pada saat itu,

6. Text, yaitu string yang tidak mempunyai batas maksimal karakter.

2.7 HTML

HTML merupakan singkatan dari HyperText Markup Languange yaitu bahasa pemrograman standar yang biasa digunakan untuk membuat suatu web. HTML dapat dibaca di berbagai platform seperti Windows, Linux, Mac dll. HTML sendiri ialah suatu dokumen teks biasa yang mudah dimengerti untuk membuat informasi yang nantinya dapat diakses oleh orang lain. Penamaan dokumen HTML dapat dilakukan dengan memilih suatu nama dan menambahkan ekstensi “.htm” atau “.html” setelah nama tersebut dan tidak menggunakan tanda kutip.


(85)

Ekstensi HTML yang menggunakan 3 karakter awalnya adalah untuk mengakomodasikan sistem penamaannya yang ada dalam sistem informasi DOS. Nama Dokumen pada beberapa sistem operasi bersifat case sensitive. HTML terdiri dari beberapa bagian dan fungsinya sebagai penanda suatu kelompok atau perintah tertentu, misalnya kelompok perintah form yang ditandai dengan kode <from>, judul dengan <tittle> dan sebagainya. Berikut adalah contoh skema gambaran bagian – bagian dari HTML :

<html>

<head>

<title> nama atau juduk web <tittle>

<head> <body> Isi dari web <body>

</html> Keterangan :

1. Dokumen HTML selalu ditandai dengan tag pembuku <html> dan diakhiri dengan tag penutup </html>.

2. Pada keterangan <title> <title> kita dapat menyisipkan kalimat ataupun kode - kode untuk menjadi tampilan atas pada website.


(1)

7. Teman –te a Ko A’13, teruta a a ggota e u A o g, I a , Todo, Hardi, Pandri, Daniel, Cuuy, Marguna, Leman, Miko, Eljan, Jek, Lambok yang telah memberi dukungan kepada penulis untuk menyelesaikan Tugas Akhir ini.

8. Teman – teman 7 bersaudara, yaitu Agung, Pane, Reza, Syakira, Nadhila, Ade yang telah memberi saya semangat untuk lulus kuliah ini.

Penulis menyadari bahwa tugas akhir ini masih banyak kekurangan dan masih jauh dari sempurna, untuk itu penulis berharap adanya kritik dan saran yang bersifat membangun dari semua pihak untuk perbaikan dari tugas akhir ini.

Penulis berharap semoga tugas akhir ini dapat memberi manfaat pagi para pembaca.

Medan, Juli 2016

Renza Arfansa Nasution


(2)

ABSTRAK

Berdasarkan analisa dan data dokumentasi yang ada di SMA Harapan 3, dalam proses

registrasi ulang siswa baru masih menggunakan cara manual untuk hal pendaftaran, Hal

ini menyebabkan data penerimaan siswa baru tidak dapat dikelola dengan baik, optimal

dan memerlukan waktu yang lama dalam menyusun laporan maupun membuat hasil

seleksi siswa baru yang akan diterima. Adanya permasalahan tersebut, registrasi peserta

didik baru dirubah dari cara manual ke sistem terkomputerisasi agar lebih efektif. Oleh

karena itu perlu dibangun sebuah sistem yang terkomputerisasi. Sistem informasi SMA

Swasta Harapan 3 Berbasis Web dibangun menggunakan MySQL sebagai database dan

PHP sebagai web server.Adapun aplikasi ini menggunakan PHP karena source kode PHP

tidak dapat dibuka dikomputer client dan MySQL sebagai databaseyang mampu

menyimpan data banyak dandapat digunakan sebagai server ataupun client. Untuk

mengetahui masalah dan menyelesaikan permasalahan, penulis mendapatkan data – data penerimaan peserta didik baru melalui penelitian dengan cara :observasi,

wawancara, pustaka , analisis sistem, perancangan sistem, pembuatan program,

pengujian program dan implementasi program. Karya tulis ini menghasilkan sebuah

sistem baru yang dapat menggantikan sistem lama dan juga mampu menjawab semua

permasalahan dalam registrasi ulang peserta didik di SMA Swasta Harapan 3. Untuk erealisasika hal terse ut, aka e uat se uah siste ya g erjudul Siste I for asi SMA Swasta Harapa 3 Ber asis We , u tuk e per udah petugas pendaftaran dalam mengelola data-data peserta didik baru.


(3)

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak vi

Daftar Isi vii

Daftar Tabel ix

Daftar Gambar x

Bab 1 Pendahuluan

1.1 Latar Belakang 1

1.2 Rumusan Masalah 2

1.3 Batasan Masalah 2

1.4 Tujuan dan Manfaat 3

1.5 Metodologi 3

1.6 Sistematika Penulisan 4

Bab 2 Landasan Teori

2.1 Pengertian Sistem Informasi 6

2.2 Data 7

2.3 Internet 8

2.4 WWW (World Wide Web) 8

2.5 Pengenalan PHP 9

2.5.1 Sejarah PHP 10

2.52 Perkembangan PHP 11

2.6 MySQL 12

2.6.1 Tipe – Tipe Data MySQL 12

2.7 HTML 13

2.8 Sublime 15

2.9 CSS (Cascading Style Sheet) 17

2.10 Pengenalan UMKM 18

Bab 3 Perancangan Sistem

3.1 Perancangan Sistem 21

3.2 DFD (Data Flow Diagram) 21


(4)

3.3.2 Flowchart Pendaftaran Siswa Baru Kelas Reguler 24

3.4 Perancangan Database 25

3.5 Perancangan Interface 28

Bab 4 Implementasi Sistem

4.1 Pengertian Implementasi Sistem 29

4.2 Tujuan Implementasi Sistem 29

4.3 Komponen – Komponen Implementasi Sistem 30

4.3.1 Perangkat Keras (Hardware) 30

4.3.2 Perangkat Lunak (Software) 31

4.3.3 Perangkat Operator (Brainware) 31

4.4 Tampilan Web 32

4.4.1 Halaman Utama index.php 32

4.4.2 Halaman Profile 33

4.4.3 Halaman Berita 36

4.4.4 Halaman Galeri 38

4.4.5 Halaman Pendaftaran Siswa Baru 39

4.4.6 Halaman Admin 41

Bab 5 Kesimpulan dan Saran

5.1 Kesimpulan 45

5.2 Saran 46

Daftar Pustaka


(5)

DAFTAR TABEL

Halaman

Tabel 3.1 - Tabel Admin 27

Tabel 3.2 – Tabel Berita 27

Tabel 3.3 – Tabel Galeri 27

Tabel 3.4 – Tabel Page 28

Tabel 3.5 – Tabel Register 28


(6)

DAFTAR GAMBAR

Halaman Gambar 2.1 - Menampilkan Selector Lebih Cepat 17

Gambar 2.2 – Menampilkan Pencarian File 17

Gambar 2.3 –Tampilan Tag “P” Pada CSS 18

Gambar 3.1 – Data Flow Diagram (DFD) 23

Gambar 3.2 –Flowchart Pendaftaran Siswa Baru Kelas Kedokteran 25 Gambar 3.3 –Flowchart Pendaftaran Siswa Baru Kelas Reguler 26

Gambar 3.4 – Perancangan Tampilan Awal 29

Gambar 4.1 – Halaman Utama (1) 33

Gambar 4.2 – Halaman Utama (2) 34

Gambar 4.3 – Halaman Sejarah 33

Gambar 4.4 – Halaman Visi, Misi, dan Tujuan 34

Gambar 4.5 - Halaman Sarana dan Prasarana 34

Gambar 4.6 – Halaman Prestasi 35

Gambar 4.7 – Halaman Ekstrakurikuler 36

Gambar 4.8 – Halaman Berita (1) 37

Gambar 4.9 – Halaman Berita (2) 38

Gambar 4.10 – Halaman Berita (3) 38

Gambar 4.11– Halaman Berita (4) 39

Gambar 4.12 – Halaman Galeri (1) 39

Gambar 4.13 – Halaman Galeri (2) 40

Gambar 4.14 – Halaman Daftar Siswa Kedokteran 40

Gambar 4.15 – Notice Berhasil Mendaftar 41

Gambar 4.16 – Notice Tidak Berhasil Mendaftar 41 Gambar 4.17 – Halaman Daftar Siswa Reguler 42

Gambar 4.18 – Halaman Login Admin 42

Gambar 4.19 – Notice Berhasil Login 43

Gambar 4.20 – Halaman Admin 43

Gambar 4.21 – Halaman Edit Admin 44

Gambar 4.22 – Notice Berhasil Menghapus Data 44 Gambar 4.23 – Notice Berhasil Mengedit Data 45