Portal Akademik SMP Negeri 2 Sunggal Menggunakan PHP dan MYSQL
L
A
M
P
I
R
A
N
(2)
(3)
SURAT KETERANGAN Hasil Uji Program Tugas Akhir
Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program Diploma 3 Teknik Informatika :
Nama : RIZKA NOVITAWANTY NST
NIM : 132406213
Prog.Studi : D3 Teknik Informatika
Judul TA : PORTAL AKADEMIK SMP NEGERI 2 SUNGGAL MENGGUNAKAN PHP DAN MYSQL
Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal...
Dengan Hasil : SUKSES / GAGAL
Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.
Medan, 2016 Dosen Pembimbing
(Dr. Mardiningsih,M.Si) NIP. 196304051988112001
(4)
LAMPIRAN : LISTING PROGRAM 1. index.php
<!DOCTYPE html> <html>
<head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css"href="style.css"> <link rel="stylesheet" type="text/css" href="slider.css"> <script type="text/javascript"
src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8"> var $ = jQuery.noConflict();
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img
src="images/tutwuri.png">
</div> <div class="judul">
<h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747 </h6> </div> </div> <div class="menu"> <div class="login">
<form method="POST" action="cek.php"> <table>
(5)
<tr>
<td>NIP/NIS </td>
<td><input type="text" name="username" ></td>
</tr> <tr>
<td>Password </td> <td><input
type="password" name="password" id="password"> </td>
</tr> <tr>
<td></td> <td><input
type="submit" value="Log In" name="Login"></td> </tr> </table> </form> </div> <div class="visi"> <p>VISI SEKOLAH<br>
BERAKHLAK MULIA, CERDAS, BERBUDAYA<br>
DAN<br>
BERWAWASAN LINGKUNGAN<br> </p><br>
<p>MISI SEKOLAH<br>
1. MENUMBUHKAN PRIBADI YANG TAQWA, TERHADAP TUHAN YANG MAHA ESA<br>
2. MENJADIKAN SISWA
BERFIKIR CERDAS DALAM TEKNOLOGI DAN BERWAWASAN LINGKUNGAN<br>
3. MENUMBUHKAN PRIBADI YANG JUJUR, BERDISIPLIN, BERETIKA DAN BERBUDI PEKERTI YANG LUHUR<br>
4. MENCIPTAKAN LINGKUNGAN YANG BERSIH, SEHAT DAN BERSERI<br>
5. MENGEMBANGKAN SIKAP
KREATIF, BERDEDIKASI DAN PEDULI LINGKUNGAN<br>
6. MEMBERDAYAKAN SAMPAH
MENJADI KOMODITAS LINGKUNGAN HIJAU, SUBUR, SEJUK DAN MENYENANGKAN<br> </p> </div> </div> <div class="content"> <div class="flexslider"> <ul class="slides">
(6)
<li> <img src="images/sekolah_1.jpg" alt="" title="" border="0"/>
</li>
<li><img
src="images/sekolah_2.jpg" alt="" title="" border="0"/>
</li>
<li><img
src="images/sekolah_3.jpg" alt="" title="" border="0"/> </li> </ul> </div> </div> <div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p> <p> </p>
<p>Designed by RizkaNst</p> </div> </body> </html> 2. Style.css *{ margin:0; padding:0; } body{font-size: 18px;} .wrapper { width: 1000px; margin: 0 auto; }
.header {
width: 100%; height: 100px;
background-color: rgb(41, 97, 142); } .judul { text-align: center; font-size: 28px; color: #000; padding-top: 10px; } #tabel1{margin-top: 25px;}
#tabel1 button{min-width: 70px; font-size: 18px; border: none; background-color: white;
padding: 5px;}
(7)
#tabel1 button:hover{background-color: lightblue;}
#tabel1 button:hover a{color: white;} #data-siswa table{ }
#form-siswa #input{width: 200px; } #tabel2{margin-top: 25px;}
#tabel2 button{min-width: 70px; font-size:
18px; border: none; background-color: white;
padding: 5px;}
#tabel2 button a{text-decoration: none; }
#tabel2 button:hover{background-color:
lightblue;}
#tabel2 button:hover a{color: white;} #data-guru table{ }
#form-guru #input{width: 200px; } #tabel3{margin-top: 25px;}
#tabel3 button{min-width: 70px; font-size:
18px; border: none; background-color: white;
padding: 5px;}
#tabel3 button a{text-decoration: none; }
#tabel3 button:hover{background-color:
lightblue;}
#tabel3 button:hover a{color: white;} #data-mapel table{ }
#form-mapel #input{width: 200px; } #tabel4{margin-top: 25px;}
#tabel4 button{min-width: 70px; font-size:
18px; border: none; background-color: white;
padding: 5px;}
#tabel4 button a{text-decoration: none; }
#tabel4 button:hover{background-color:
lightblue;}
#tabel4 button:hover a{color: white;} #data-gupel table{ }
#form-gupel #input{width: 200px; } #tabel5{margin-top: 25px;}
#tabel5 button{min-width: 70px; font-size:
18px; border: none; background-color: white;
padding: 5px;}
#tabel5 button a{text-decoration: none; }
#tabel5 button:hover{background-color:
lightblue;}
#tabel5 button:hover a{color: white;} #data-jadwal table{ }
#form-jadwal #input{width: 200px; } #tabel7{margin-top: 25px;}
#tabel7 button{min-width: 70px; font-size:
18px; border: none; background-color: white;
(8)
#tabel7 button a{text-decoration: none; }
#tabel7 button:hover{background-color:
lightblue;}
#tabel7 button:hover a {color: white;}
#data-nilai table{ }
#form-nilai #input{width: 200px; } .logo1 img {
position: absolute; top: 0px; left: 255px; width: 92px; height: 100px; }
.logo2 img {
position: absolute; top: 0px; right: 255px; width: 92px; height: 100px; } .menu { width: 350px; height: 500px; background-color: #fff; } .login { position: absolute; top: 108px; left: 222px; width: 26%; height: 201px; background-color: #fff; padding-top: 58px; padding-left: 22px; } .login td{ padding-left: 4px; padding-right: 4px; padding-top: 20px; } input[type=text] { width: 100%;
padding: 12px 20px; margin: 8px 0;
box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s;
(9)
}
input[type=text]:focus { border: 3px solid #555; }
input[type=password] { width: 100%;
padding: 12px 20px; margin: 8px 0;
box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s;
outline: none; }
input[type=password]:focus { border: 3px solid #555; }
input[type=submit] {
background-color: rgb(41, 97, 142); border: none;
color: white;
padding: 16px 32px; text-decoration: none; margin: 4px 2px;
cursor: pointer; } .visi { position: absolute; top: 435px; width: 308px; height: 250px; background-color:; } p { font-size: 15px; } .content{ position: absolute; top: 185px; left: 595px; width: 650px; height: 500px; float: left; } .footer{ width: 1000px; height: 50px;
background-color: rgb(41, 97, 142); clear: both;
(10)
padding-top: 20px; padding-bottom: 20px; } .navigasi { background-repeat: no-repeat; float: none; height: 35px; width: 960px; padding-right: 20px; padding-left: 20px; }
#navigasi a {
color: fffffff; } .navigasi td{ text-align: center; } .formsiswa { position: absolute; top: 215px; text-align: left; } .formguru { margin-top: 10%; margin-bottom: 5%; } #data-guru{ margin-bottom: 15%; } .formnilai { position: absolute; top: 215px; text-align: left; } .home { margin-top: 8%; margin-bottom: 8%; text-align: justify; } #sub_gupel[type=submit]{ } .formmapel { position: absolute; top: 215px; left: 255px; } .formgupel { margin-top: 5%; margin-bottom: 5%; }
(11)
#data-gupel{ margin-bottom: 14%; } .formjadwal{ margin-top: 10%; margin-bottom: 10%; } .formjadwal button{ position: fixed; margin-left: 50%; width: 100px; height: 50px;
background: rgb(41, 97, 142); }
.formjadwal button a{ color: white; text-decoration: none; } 3. Insert.php <!DOCTYPE html> <html> <head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript"
src="js/jquery.min.js"></script>
<script type="text/javascript"
src="js/jquery.flexslider-min.js"></script><script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
(12)
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747 </h6> </div> </div> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SMP NEGERI 2</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head> <body>
<div class="navigasi">
<table cellspacing="5" cellpadding="5"> <tr>
<td height="68"><a
href="#">Siswa</a></td>
<td><a href="#">Guru</a></td> <td><a
href="#">MataPelajaran</a></td>
<td><a href="#">Guru Mata Pelajaran</a></td> <td><a href="#">Jadwal</a></td> <td><a href="#">Kelas</a></td> <td><a href="#">Nilai</a></td> <td><a href="#">Logout</a></td> </tr> </table> </div> <div class="formsiswa">
<form method="post" action="proses/siswa-baru.php">
<table> <tr>
<th>NIS</th>
<td><input type="text" name="name" /></td>
</tr> <tr>
(13)
<th>Nama Siswa</th>
<td><input type="text" name="namasiswa" id="namasiswa" /></td>
</tr> <tr>
<th>Tempat Tanggal Lahir</th> <td><input type="date" name="ttl" /></td>
</tr> <tr>
<th>Jenis Kelamin</th> <td>
<input type="radio" name="gender" value="perempuan" />Perempuan
<input type="radio" name="gender" value="laki-laki" />Laki-laki
</td> </tr> <tr> <th>ALAMAT</th> <td><textarea name="alamat"></textarea></td> </tr> <tr> <th>Agama</th> <td> <select name="agama"> <option value="Islam">Islam</option> <option value="Kristen">Kristen</option> </select> </td> </tr> <tr> <th>Nama Ayah</th>
<td><input type="text" name="namasiswa" id="namasiswa" /></td>
</tr> <tr>
<th>Kelas</th> <td>
<select name="kelas">
<option value="vii-1">VII-1</option>
<option value="vii-2">VII-2</option>
<option value="vii-3">VII-3</option>
(14)
<option value="vii-4">VII-4</option>
<option value="vii-5">VII-5</option>
<option value="vii-2">VII-2</option>
<option value="vii-6">VII-7</option>
<option value="vii-7">VII-7</option>
<option value="vii-8">VII-8</option>
<option value="viii-1">VIII-1</option>
<option value="viii-2">VIII-2</option>
<option value="viii-3">VIII-3</option>
<option value="viii-4">VIII-4</option>
<option value="viii-5">VIII-5</option>
<option value="viii-6">VIII-6</option>
<option value="viii-7">VIII-7</option>
<option value="viii-8">VIII-8</option> <option value="ix-1">IX-1</option> <option value="ix-2">IX-2</option> <option value="ix-3">IX-3</option> <option value="ix-4">IX-4</option> <option value="ix-5">IX-5</option> <option value="ix-6">IX-6</option> <option value="ix-7">IX-7</option> <option value="ix-8">IX-8</option> </select> </td> </tr> <tr>
<td colspan="2" align="right">
<input type="submit" value="SIMPAN" /> </td> </tr> </form> </div> <div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
(15)
<p> </p>
<p>Designed by RizkaNst</p> </div>
</body>
</html>
4. form-guru.php <?php
session_start();
$nip=$_SESSION['nip/nis/username']; if (empty($nip))
{
header('location:index.php'); }
?>
<!DOCTYPE html> <html>
<head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide"
});
});
</script> </head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
(16)
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel2">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
<td> <button><a href="form-guru.php">Guru</a> </button></td>
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
<td> <button><a href="form-gupel.php">GuruMataPelajaran</a></button></td>
<td> <button><a href="form-jadwal.php">Jadwal</a></button></td>
<td> <button><a href="form-kelas.php">Kelas</a></button></td>
<td> <button><a href="form-nilai.php">Nilai</a></button></td>
<td> <button><a
href="logout.php">Logout</a></button></td> </tr> </table> </div> </div> <div class="formguru">
<form method="post" action="guru-baru.php">
<table cellspacing="10" id="form-guru"> <tr>
<th>NIP</th>
<td><input id="input" type="text" name="nip" /></td>
(17)
<tr>
<th>Nama Guru</th>
<td><input id="input" type="text" name="namaguru" id="namaguru" /></td>
</tr> <tr> <th>Pendidikan</th> <td> <select name="pendidikan"> <option value="S-1">S1</option> <option value="S-2">S2</option> </select> </td> </tr> <tr> <th>Jenis Kelamin</th> <td>
<input type="radio"
name="gender" value="perempuan" />Perempuan
<input type="radio" name="gender" value="laki-laki" />Laki-laki </td> </tr> <tr> <th>Jabatan</th> <td> <select name="jabatan">
<option value="Kepala Sekolah">Kepala Sekolah</option>
<option value="Wakil Kepala Sekolah Sapras">Wakil Kepala Sekolah Sapras</option>
<option value="Wakil Kepala Sekolah Kesiswaan">Wakil Kepala Sekolah Kesiswaan</option>
<option value="Wakil Kepala Sekolah Kurikulum">Wakil Kepala Sekolah Kurikulum</option>
<option value="Ketua
Perpustakaan">Ketua Perpustakaan</option>
<option value="PKS Humas">PKS Humas</option>
<option value="PKS Sarpras">PKS Sarpras</option> <option value="Guru">Guru</option> </select> </td> </tr> <tr>
<td colspan="2" align="right">
<input type="submit" value="SIMPAN" /> </td>
(18)
</table> </form>
</div>
<div id="data-guru">
<table border="1" cellspacing="10" style="border-collapse:collapse;">
<tr style="background: rgb(41, 97, 142);color:white">
<th> NO.</th> <th> NIP </th>
<th> Nama Guru </th> <th>Pendidikan</th>
<th> Jenis Kelamin </th> <th>Jabatan</th>
<th>Ket</th> </tr>
<?php
include 'koneksi2.php';
$select="SELECT * FROM `guru`"; $exe=mysql_query($select); $i=1; while ($out=mysql_fetch_array($exe)) { $nip=$out['nip']; $nama=$out['nama_guru']; $pendidikan=$out['pendidikan']; $jeniskelamin=$out['jeniskelamin']; $jabatan=$out['jabatan'];
echo"<tr> <td>".$i."</td> <td>".$nip."</td> <td>".$nama."</td> <td>".$pendidikan."</td>
<td>".$jeniskelamin."</td> <td>".$jabatan."</td>
<td> <a
href='update-guru.php?id=$nip'> Edit </a> <a
href='hapus_guru.php?id=$nip'> Hapus
</a></td></tr>"; $i++; } ?> </table> </div> <div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
(19)
<p>Designed by RizkaNst</p> </div> </div> </body> </html> 5. form-jadwal.php <?php session_start(); $nip=$_SESSION['nip/nis/username']; if (empty($nip)) { header('location:index.php'); } ?> <!DOCTYPE html> <html> <head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <?php include 'koneksi2.php'; ?> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png">
(20)
</div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel5">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
<td> <button><a href="form-guru.php">Guru</a> </button></td>
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
<td> <button><a href="form-gupel.php">GuruMataPelajaran</a></button></td>
<td> <button><a href="form-jadwal.php">Jadwal</a></button></td>
<td> <button><a href="form-kelas.php">Kelas</a></button></td>
<td> <button><a href="form-nilai.php">Nilai</a></button></td>
<td> <button><a
href="logout.php">Logout</a></button></td> </tr> </table> </div> </div> <div class="formjadwal">
<form method="post" action="jadwal-baru.php">
<table cellspacing="10" id="form-jadwal" style="text-align:left">
<tr>
<th>Jadwal</th> <td>
<select name="jadwal">
<option value="07.30 - 08.10"> 07.30 - 08.10 </option> <option value="08.00 - 08.40"> 08.00 - 08.40 </option>
(21)
<option value="08.10 - 08.50"> 08.10 - 08.50 </option> <option value="08.50 - 09.30"> 08.50 - 09.30 </option> <option value="08.40 - 09.20"> 08.40 - 09.20 </option> <option value="09.20 - 10.00"> 09.20 - 10.00 </option> <option value="09.30 - 10.10"> 09.30 - 10.10 </option> <option value="10.20 - 11.00"> 10.20 - 11.00 </option> <option value="10.30 - 11.10"> 10.30 - 11.10 </option> <option value="11.10 - 11.50"> 11.10 - 11.50 </option> <option value="11.40 - 12.20"> 11.40 - 12.20 </option> <option value="11.50 - 12.30"> 11.50 - 12.30 </option>
</select> </td>
</tr> <tr>
<th>Jam</th>
<td><input type="text" name="jam" id="jam" /></td> </tr> <tr> <th>Hari</th> <td> <select name="hari"> <option value="senin">Senin</option> <option value="selasa">Selasa</option> <option value="rabu">Rabu</option> <option value="kamis">Kamis</option> <option value="jumat">Jumat</option> <option value="sabtu">Sabtu</option> </select> </td> </tr> <tr> <th>Mata Pelajaran</th> <td> <select name="mapel"> <option value="MP_114">Matematika</option> <option value="MP_112">Bahasa Indonesia</option>
<option value="MP_113">Bahasa Inggris</option> <option value="MP_115">IPA</option> <option value="MP_116">IPS</option> <option value="MP_118">Penjaskes</option> </select> </td>
(22)
</tr> <tr>
<th>ID Guru Pelajaran</th>
<td><input type="text" name="gupel" id="gupel" /></td>
</tr> <tr>
<th>Kelas</th> <td>
<select name="kelas">
<option value="vii-1">VII-1</option>
<option value="vii-2">VII-2</option>
<option value="vii-3">VII-3</option>
<option value="vii-4">VII-4</option>
<option value="vii-5">VII-5</option>
<option value="vii-2">VII-2</option>
<option value="vii-6">VII-7</option>
<option value="vii-7">VII-7</option>
<option value="vii-8">VII-8</option>
<option value="viii-1">VIII-1</option>
<option value="viii-2">VIII-2</option>
<option value="viii-3">VIII-3</option>
<option value="viii-4">VIII-4</option>
<option value="viii-5">VIII-5</option>
<option value="viii-6">VIII-6</option>
<option value="viii-7">VIII-7</option>
<option value="viii-8">VIII-8</option> <option value="ix-1">IX-1</option> <option value="ix-2">IX-2</option> <option value="ix-3">IX-3</option> <option value="ix-4">IX-4</option> <option value="ix-5">IX-5</option> <option value="ix-6">IX-6</option>
(23)
<option value="ix-7">IX-7</option> <option value="ix-8">IX-8</option> </select> </td> </tr> <tr>
<td colspan="2" align="right">
<input type="submit" value="SIMPAN" />
</td> </tr> </table> </form>
<button> <a href="lihat-jadwal.php"> Lihat Jadwal </a> </button>
</div>
<div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
<p> </p>
<p>Designed by RizkaNst</p> </div> </div> </body> </html> 6.form-gupel.php <?php session_start(); $nip=$_SESSION['nip/nis/username']; if (empty($nip)) { header('location:index.php'); } ?> <!DOCTYPE html> <html> <head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"
src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8"> var $ = jQuery.noConflict();
(24)
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel4">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
<td> <button><a href="form-guru.php">Guru</a> </button></td>
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
<td> <button><a href="form-gupel.php">GuruMataPelajaran</a></button></td>
<td> <button><a href="form-jadwal.php">Jadwal</a></button></td>
<td> <button><a href="form-kelas.php">Kelas</a></button></td>
<td> <button><a href="form-nilai.php">Nilai</a></button></td>
<td> <button><a
(25)
</tr> </table> </div> <div>
<div class="formgupel">
<form method="post" action="guru-pelajaran.php">
<table cellspacing="10" id="form-gupel">
<tr>
<th>NIP</th>
<td><input type="text" name="nip" id="nip" /></td>
</tr> <tr>
<th>Id Mata Pelajaran</th>
<td><input type="text" name="mapel" id="mapel" /></td>
</tr> <tr>
<td colspan="2" align="right"> <input type="submit" value="SIMPAN" /> </td> </tr> </table> </form> </div> <div id="data-gupel">
<table border="1" cellspacing="10" style="border-collapse:collapse;">
<tr>
<th> NO.</th>
<th> Id Guru Pelajaran </th> <th> NIP </th>
<th> Id Mata Pelajaran</th> <th>Ket</th>
</tr> <?php
include 'koneksi2.php'; $i=1;
$q="SELECT * FROM
`guru_pelajaran`"; $exe=mysql_query($q); while ($out=mysql_fetch_array($exe)) { $id=$out['id_gupel']; $nip=$out['nip'];
(26)
$id_mapel=$out['id_mapel']; $select2="SELECT * FROM `mata_pelajaran` WHERE `id_mapel`='$id_mapel'";
$exe2=mysql_query($select2); while
($out2=mysql_fetch_array($exe2)) {
$mata_pel=$out2['nama_mapel']; }
echo "<tr> <td>".$i."</td> <td>".$id."</td> <td>".$nip."</td> <td>".$mata_pel."</td>
<td> <a href='update_form_gupel.php?id=$nip'> Edit </a> <a href='hapus_form_gupel.php?id=$nip'> Hapus </a> </td> </tr> ";
$i++; }
?> </table> </div>
<div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
<p> </p>
<p>Designed by RizkaNst</p> </div>
</div> </body> </html>
7.form-kelas.php <?php
session_start();
$nip=$_SESSION['nip/nis/username']; if (empty($nip))
{
header('location:index.php'); }
?>
<!DOCTYPE html> <html>
<head>
(27)
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel1">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
<td> <button><a href="form-guru.php">Guru</a> </button></td>
(28)
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
<td> <button><a
href="form-gupel.php">GuruMataPelajaran</a></button></td> <td> <button><a
href="form-jadwal.php">Jadwal</a></button></td> <td> <button><a
href="form-kelas.php">Kelas</a></button></td> <td> <button><a
href="form-nilai.php">Nilai</a></button></td> <td> <button><a href="logout.php">Logout</a></button></td> </tr> </table> </div> </div> <html> <head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /> <title>SMP NEGERI 2</title>
<link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="navigasi"> </div> <div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
<p> </p>
<p>Designed by RizkaNst</p> </div> </body> </html> 8. form-mapel.php <?php session_start(); $nip=$_SESSION['nip/nis/username']; if (empty($nip)) { header('location:index.php'); } ?> <!DOCTYPE html>
(29)
<html> <head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="guru/style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel3">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
(30)
<td> <button><a href="form-guru.php">Guru</a> </button></td>
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
<td> <button><a href="form-gupel.php">GuruMataPelajaran</a></button></td>
<td> <button><a href="form-jadwal.php">Jadwal</a></button></td>
<td> <button><a href="form-kelas.php">Kelas</a></button></td>
<td> <button><a href="form-nilai.php">Nilai</a></button></td>
<td> <button><a
href="logout.php">Logout</a></button></td> </tr> </table> </div> </div> <div class="formmapel">
<form method="post" action="mapel-baru.php">
<table cellspacing="10" id="form-mapel">
<tr>
<th>Id Mata Pelajaran</th>
<td><input type="text" name="id" /></td>
</tr> <tr>
<th>Nama Mata Pelajaran</th>
<td><input type="text" name="nama" id="namamapel" /></td>
</tr> <tr>
<td colspan="2" align="right"> <input type="submit" value="SIMPAN" /> </td> </tr> </table> </form> </div> <div id="data-mapel">
<table border="1" cellspacing="10" style="border-collapse:collapse;">
<tr>
<th> NO.</th>
<th> Id MataPelajaran </th> <th> NamaMataPelajaran </th> <th> Ket </th>
(31)
</tr> <?php
include 'koneksi2.php';
$select="SELECT * FROM
`mata_pelajaran`"; $exe=mysql_query($select); $i=1; while ($out=mysql_fetch_array($exe)) { $id=$out['id_mapel']; $nama=$out['nama_mapel'];
echo"<tr> <td>".$i."</td> <td>".$id."</td> <td>".$nama."</td> <td>
<a href='update-mapel.php?id=$id'> Edit </a> <a href='hapus-mapel.php?id=$id'> Hapus </a> </td> </tr> "; $i++; } ?> </table> </div>
<div class="footer" style="margin-top:-30%;">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
<p> </p>
<p>Designed by RizkaNst</p> </div> </div> </body> </html> 9. form-nilai.php <?php session_start(); $nip=$_SESSION['nip/nis/username']; if (empty($nip)) { header('location:index.php'); } ?> <!DOCTYPE html> <html> <head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="style.css">
(32)
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel7">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
<td> <button><a href="form-guru.php">Guru</a> </button></td>
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
(33)
<td> <button><a href="form-gupel.php">GuruMataPelajaran</a></button></td>
<td> <button><a href="form-jadwal.php">Jadwal</a></button></td>
<td> <button><a href="form-kelas.php">Kelas</a></button></td>
<td> <button><a href="form-nilai.php">Nilai</a></button></td>
<td> <button><a
href="logout.php">Logout</a></button></td> </tr> </table> </div> </div> <html> <head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /> <title>SMP NEGERI 2</title>
<link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="navigasi"></div> <div class="formnilai">
<form method="POST" action="input-nilai.php"> <table cellspacing="10" id="form-nilai"> <tr>
<th>Nama Siswa</th> <td> : </td>
<td><input type="text" name="nama" /></td>
</tr> <tr>
<th>NIS</th> <td> : </td>
<td><input type="text" name="nis" /></td>
</tr> <tr>
<th>Semester</th> <td> : </td> <td>
<select name="semester">
<option value="satu">1 (satu)</option>
<option value="dua">2 (dua)</option>
</select> </td> </tr>
(34)
<tr>
<th>Tahun Ajaran</th> <td> : </td> <td>
<select name="tahun">
<option value="2013-2014">2013-2014</option>
<option value="2014-2015">2014-2015</option>
<option value="2015-2016">2015-2016</option>
</select> </td> </tr>
<tr>
<th> Agama </th> <td> : </td> <td> <input type="text" name="agama"> </td
</tr> <tr>
<th> Bahasa Inggris </th> <td> : </td> <td> <input type="text" name="inggris"> </td>
</tr> <tr>
<th> Penjaskes </th> <td> : </td> <td> <input type="text" name="penjas"> </td>
</tr> <tr>
<th> Seni Budaya </th> <td> : </td> <td> <input type="text" name="ktk"> </td>
</tr> <tr>
<th> IPS </th> <td> : </td> <td> <input type="text" name="ips"> </td>
</tr> <tr>
<th> IPA </th> <td> : </td> <td> <input type="text" name="ipa"> </td>
</tr> <tr>
<th> Matematika </th> <td> : </td> <td> <input type="text" name="mm"> </td>
</tr> <tr>
<th> Bhs. Indonesia </th> <td> : </td> <td> <input type="text" name="indo"> </td>
</tr> <tr>
<th> PKN </th> <td> : </td> <td> <input type="text" name="pkn"> </td>
(35)
<tr>
<th> Keterampilan </th> <td> : </td> <td> <input type="text" name="keterampilan"> </td>
</tr> <tr>
<th> TIKOM </th> <td> : </td> <td> <input type="text" name="tikom"> </td>
</tr> <tr>
<th> MULOK </th> <td> : </td> <td> <input type="text" name="mulok"> </td>
</tr> <tr>
<td colspan="2" align="left">
<input type="submit" value="SIMPAN" />
<input type="submit" value="ULANGI" /> </td> </tr> </table> </form> <div id="data-nilai"> </div> <div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
<p> </p>
<p>Designed by RizkaNst</p> </div> </div> </body> </html> 10. form-siswa.php <?php session_start(); $nip=$_SESSION['nip/nis/username']; if (empty($nip)) { header('location:index.php'); } ?> <!DOCTYPE html> <html> <head>
<title>SMP NEGERI 2 </title>
<link rel="stylesheet" type="text/css" href="guru/style.css">
(36)
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict(); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body> <div class="wrapper"> <div class="header">
<div class="logo1" id="logo1"> <img src="images/osis.png"> </div>
<div class="logo2" id="logo2"> <img src="images/tutwuri.png"> </div>
<div class="judul"> <h4>
SMP NEGERI 2 SUNGGAL </h4>
<h5>
NSS: 201070103239 NPSN: 10213839 </h5>
<h6>
Jalan Medan-Binjai Km. 12,5 Telp. 061-8465747
</h6>
<table cellspacing="5" cellpadding="5" id="tabel1">
<tr>
<td> <button><a href="index-admin.php">Home</a> </button></td>
<td> <button><a href="profil-admin.php">Profil</a> </button></td>
<td> <button><a href="form-siswa.php">Siswa</a> </button></td>
<td> <button><a href="form-guru.php">Guru</a> </button></td>
<td> <button><a href="form-mapel.php">MataPelajaran</a> </button></td>
(37)
<td> <button><a href="form-gupel.php">GuruMataPelajaran</a></button></td>
<td> <button><a href="form-jadwal.php">Jadwal</a></button></td>
<td> <button><a href="form-kelas.php">Kelas</a></button></td>
<td> <button><a href="form-nilai.php">Nilai</a></button></td>
<td> <button><a
href="logout.php">Logout</a></button></td> </tr>
</table> </div>
<div class="formsiswa">
<form method="post" action="siswa-baru.php">
<table cellspacing="10" id="form-siswa" style="text-align:left">
<tr>
<th>NIS</th>
<td><input id="input" type="text" name="nis" /></td>
</tr> <tr>
<th>Nama Siswa</th>
<td><input id="input" type="text" name="namasiswa" id="namasiswa" /></td>
</tr> <tr>
<th>Tanggal Lahir</th>
<td><input id="input" type="date" name="ttl" /></td>
</tr> <tr>
<th>Jenis Kelamin</th> <td>
<input type="radio" name="gender" value="perempuan" />Perempuan
<input type="radio" name="gender" value="laki-laki" />Laki-laki
</td> </tr> <tr>
<th>Alamat</th>
<td><textarea name="alamat" rows="10" cols="23"></textarea></td>
</tr> <tr>
<th>Agama</th> <td>
(38)
<select name="agama"> <option value="Islam">Islam</option> <option value="Kristen">Kristen</option> </select> </td> </tr> <tr> <th>Nama Ayah/Wali</th>
<td><input id="input" type="text" name="namawali" id="namasiswa" /></td>
</tr> <tr>
<th>Kelas</th> <td>
<select name="kelas">
<option value="1001">VII-1</option>
<option value="1002">VII-2</option>
<option value="1003">VII-3</option>
<option value="1004">VII-4</option>
<option value="1005">VII-5</option>
<option value="1006">VII-6</option>
<option value="1007">VII-7</option>
<option value="1008">VII-8</option>
<option value="2001">VIII-1</option>
<option value="2002">VIII-2</option>
<option value="2003">VIII-3</option>
<option value="2004">VIII-4</option>
<option value="2005">VIII-5</option>
<option value="2006">VIII-6</option>
<option value="2007">VIII-7</option>
<option value="2008">VIII-8</option>
(39)
<option value="3001">IX-1</option>
<option value="3002">IX-2</option>
<option value="3003">IX-3</option>
<option value="3004">IX-4</option>
<option value="3005">IX-5</option>
<option value="3006">IX-6</option>
<option value="3007">IX-7</option>
<option value="3008">IX-8</option>
</select> </td>
</tr> <tr>
<td colspan="2" align="right">
<input type="submit" value="SIMPAN" /> </td> </tr> </table> </form> </div> <div id="data-siswa">
<form method="post" action="#">
<table border="1" style="border-collapse:collapse; width:100%">
<tr style="background: rgb(41, 97, 142);color:white">
<th> NO.</th> <th> NIS </th>
<th> Nama Siswa </th>
<th>Tempat Tanggal Lahir</th> <th> Jenis Kelamin </th>
<th> Agama </th>
<th> Nama Ayah/Wali </th> <th>Kelas</th>
<th> Ket </th> <?php
include 'koneksi2.php';
$select="SELECT * FROM `siswa`"; $exe=mysql_query($select);
(40)
while
($out=mysql_fetch_array($exe)) {
$nis=$out['nis'];
$kode=$out['kode_kelas'];
echo "<tr> <td>".$i."</td> <td>".$out['nis']."</td>
<td>".$out['nama_siswa']."</td> <td>".$out['tanggal_lahir']."</td>
<td>".$out['jenis_kelamin']."
</td> <td>".$out['agama']."</td> <td>".$out['nama_ayah']."</td> ";
$kelas="SELECT * FROM `kelas` WHERE `kode_kelas`='$kode'"; $exe2=mysql_query($kelas); while ($out2=mysql_fetch_array($exe2)) { $lokal=$out2['nama_kelas']; }
echo "<td>".$lokal."</td> <td> <a href='update-siswa.php?id=$nis'> Edit </a> <a href='hapus_siswa.php?id=$nis'> Hapus </a> </td> </tr>"; $i++; } ?> </tr> </table> </form> </div> <div class="footer">
<p>© Copyright 2016 SMP Negeri 2 Sunggal</p>
<p> </p>
<p>Designed by RizkaNst</p> </div> </div> </body> </html> 11.logout.php <?php session_start(); if(session_destroy()){ header('location:index.php'); } ?>
(41)
DAFTAR PUSTAKA
Jauhari Khairul Kawistara, Priyanto Hidayatullah. 2015. Pemrograman Web. Bandung: Penerbit Informatika
Cascading Style Sheet. https://id.wikipedia.org/wiki/ [ 11 April 2016 ]
Didik Ariyana. 2015. Pengertian HTML, fungsi HTML, dan contoh HTML. http://www.berbagi16.com. [ 11 April 2016 ]
Riyanto, 2010. Pengertian XAMPP. https://aminawm.wordpress.com [ 11 April 2016 ] Yoga Jiwanjaya, 2014. Pengertian dan kegunaan xampp.
http://www.pusatdesainweb.com [ 11 April 2016 ]
Dimasosd. 2015. Pengertian Sistem Informasi. http://www.kompasiana.com [12 Juni 2016 ]
Pengertian Perancangan. http://automotivehunter.blogspot.co.id [12 Juni 2016] Ranjani Ryan. 2014. https://ranjaniryan.wordpress.com [12 Juni 2016]
(42)
BAB 3
PERANCANGAN SISTEM
3.1 Tahap Perancangan Sistem
Tahapan perancangan dan perancangan merupakan tahapan awal yang dilakukan penulis dalam membangun sistemini. Pada tahapan ini penulis akan menjabarkan awal perancangan sistem, diagram alur, tujuan dan isi dari sistemyang akan dibangun. Sistem ini adalah sistem yang bebas digunakan untuk berbagai instansi yang ingin menerapkan sistem ini.
Tujuan dari perancangan sistem adalah untuk memberikan gambaran secara menyeluruh kepada pengguna tentang sistem yang baru.
3.2 Normalisasi
Normalisasi adalah teknik perancangan yang banyak digunakan sebagai pemandu dalam perancangan basis data relasional. Teorinormalisasididasarkan pada konsep bentuk normal. Sebuah tabel relasional dikatakan pada bentuk normal tertentu jika tabel memenuhi himpunan batasan tertentu.Pada proses normalisasi terhadap tabel pada database dapat dilakukan dengan tiga tahap normalisasi antara lain :
(43)
a) Bentuk Tidak Normal (Unnormalized Form)
Bentuk ini merupakan kumpulan data yang akan direkam, tidak ada keharusan mengikuti format tertentu, dapat saja data tidak lengkap atau terduplikasi. Data dikumpulkan apa adanya sesuai dengan saat menginput. Untuk mentransformasikan tabel yang belum ternormalisasi di atas menjadi tabel yang memenuhi kriteria 1NF adalah kita harus merubah seluruh atribut yang multivalue menjadi atribut single value, dengan cara menghilangkan repeating group pada tabel di atas.
b) Bentuk Normal ke Satu (First Normal Form/ 1NF)
Pada tahap ini dilakukan penghilangan beberapa grup elemen yang berulang agar menjadi satu harga tunggal yang berinteraksi di antara setiap baris pada suatu tabel, dan setiap atribut harus mempunyai nilai data yang bersifat atomic value. Atom adalah zat terkecil yang masih memiliki sifat induknya, bila terpecah lagi maka ia tidak memiliki sifat induknya.
Syarat normal ke satu (1-NF) antara lain :
a. Tidak ada set atribut yang berulang atau bernilai ganda b. Telah ditentukannya primary key untuk tabel atau relasi c. Tiap atribut hanya memiliki satu pengertian
d. Tiap atribut yang dapat memiiki banyak nilai sebenarnya menggambarkan entitas atau relasi yang terpisah.
c) Bentuk Normal ke Dua (Second Normal Form/ 2NF)
Bentuk normal kedua didasari atas konsep full functional dependency (ketergantungan fungsional sepenuhnya) yang dapat didefinisikan sebagai berikut.
(44)
Jika A adalah atribut-atribut dari suatu relasi , B dikatakan full functional dependency (memiliki ketergantungan fungsional terhadap A, tetapi tidak secara tepat memiliki ketergantungan fungsional dari subset (himpunan bagian) dari A).
Syarat normal kedua (2 NF) sebagai berikut :
a. Bentuk data telah memenuhi kriteria bentuk normal ke satu.
b. Atribut bukan kunci(non-key attribute) haruslah memiliki ketergantungan fungsional sepenuhnya pada primary key.
d) Bentuk Normal ke Tiga (Third Normal Form / 3 NF)
Walaupun relasi 2 NF memiliki redudansi yang lebih sedikit dari pada relasi 1 NF, namun relasi tersebut masih mungkin mengalami kendala bila terjadi anomali peremajaan (update) terhadap relasi tersebut. Jika kita hanya meng-update satu baris saja, sementara baris yang lainnya tidak, maka data didalam database tersebut akan inkonsisten / tidak teratur. Anomali update ini disebabkan oleh suatu ketergantungan transitif. Kita harus menghilangkan ketergantungan tersebut dengan melakukan normalisasi ketiga ( 3 NF).
Syarat normal ketiga (Third Normal Form / 3 NF) sebagai berikut:
a. Bentuk data telah memenuhi kriteria bentuk normal ke dua
b. Atribut bukan kunci(non-key attribute) tidak boleh memiliki ketergantungan fungsional terhadap atribut bukan kunci lainnya. Seluruh atribut bukan kunci pada suatu relasi hanya memiliki ketergantungan fungsional terhadap primary key di relasi itu saja.
(45)
3.3.1 Perancangan Tabel Normalisasi 1. Entitas Normalisasi Siwa
Bentuk Tabel Tidak Normal
Tabel 3.1 Entitas Normalisasi Siswa Siswa
Nis nama_siswa
Ttl Jenkel Alamat Agama nama_ayah kode_kelas nama_kelas
tabel_nilai id_mapel Semester
id_ta thn_ajaran nama_mapel
(46)
Bentuk Normal Pertama (1 NF)
Tabel 3.2 Entitas Normalisasi Siswa 1 NF Tabel_nilai Ket
Nama
Nis *
Agama Bhs.inggris
penjaskes Seni budaya
IPA IPS Matematika Bhs. Indonesia
PKN Ketrampilan
TIKOM Mulok
Siswa ket
Nis *
Nama_siswa Ttl Jenkel Alamat Agama Nama_ayah Kode_kelas Nama_kelas Nama_mapel
(47)
Bentuk Normal Kedua (2 NF)
Tabel 3.3 Entitas Normalisasi Siswa 2 NF Tabel_nilai ket
Nama
Nis *
Agama Bhs.inggris
penjaskes Seni budaya
IPA IPS Matematika Bhs. Indonesia
PKN Ketrampilan
TIKOM Mulok
Siswa ket
Nis *
Nama_siswa Ttl Jenkel Alamat Agama Nama_ayah
Kode_kelas ** Nama_kelas
Nama_mapel
Kelas ket
Kode_kelas * Nama_kelas
(48)
Bentuk Normal Ketiga (3NF)
Tabel 3.4 Entitas Normalisasi Siswa 3 NF
Siswa ket
Nis *
Nama_siswa Ttl Jenkel Alamat Agama Nama_ayah
Kode_kelas ** Nama_kelas
Nama_mapel *** Tabel_nilai Ket
nama
nis *
agama Bhs.inggris
penjaskes Seni budaya
IPA IPS Matematika Bhs. Indonesia
PKN Ketrampilan
TIKOM
Mulok
Kelas ket Kode_kelas * Nama_kelas
Mapel ket Id_mapel
(49)
2. Entitas Normalisasi Guru Bentuk Tabel Tidak Normal
Tabel 3.5 Entitas Normalisasi Guru Guru
Nip Nama_guru Pendidikan
Jenkel Agama Id_jadwal
Hari Jam Id_gupel Kode_kelas
Id_gupel Id_mapel
(50)
Bentuk Normal Pertama (1 NF)
Tabel 3.6 Entitas Normalisasi Guru 1 NF
Gupel Ket
Id_gupel *
Nip **
Kode_kelas Id_mapel
Guru Ket
nip *
Nama_guru Pendidikan
Jenkel Agama Id_jadwal
Hari jam
(51)
Bentuk Normal Kedua (2 NF)
Tabel 3.6 Entitas Normalisasi Guru 2 NF
Gupel Ket
Id_gupel *
Nip **
Kode_kelas Id_mapel
3.3 Struktur Database
Dalam merancang sebuah program diperlukan perancangan databse karena hal ini merupakan salah satu langkah dalam menentukan tabel data, field data, tipe data dan keterangan yang dibutuhkan. Dalam program yang penulis rancang ada 9 tabel yang dipergunakan, yaitu tabel user, tabel siswa, tabel guru, tabel nilai, tabel mapel, tabel kelas, tabel gupel, tabel tahun ajaran dan tabel jadwal.
Adapun database yang digunakan adalah database admin dengan tabel-tabel sebagai berikut:
Tabel 3.8 Tabel User
Field Type Keterangan
Id_user Varchar (20) Primary Key
Username Varchar (50)
Guru Ket
nip *
Nama_guru Pendidikan
Jenkel Agama Id_jadwal
Hari jam Jadwal Ket
Id_jadwal * Hari
Jam
(52)
Password Varchar (20)
Status Varchar (15)
Tabel 3.9 Tabel Guru
Field Type Keterangan
Nip Varchar (30) Primary Key
Nama_guru Varchar (50)
Pendidikan Text
Jenkel Varchar (6)
Jabatan Text
Tabel 3.10 Tabel Siswa
Field Type Keterangan
Nis Varchar (11) Primary Key
Nama_siswa Varchar (50)
Ttl Date
Jenkel Varchar (10)
Alamat text
Agama Varchar (10)
Nama_ayah Varchar (50)
Kode_kelas Int (11)
Tabel 3.11 Tabel Kelas
(53)
Kode_kelas Int (11) Primary Key
Nama_kelas Varchar (20)
Tabel 3.12 Tabel Mapel
Field Type Keterangan
Id_mapel Varchar (11) Primary Key
Nama_mapel Varchar (50)
Tabel 3.13 Tabel Tahun Ajaran
Field Type Keterangan
Id_ta Int (4) Primary Key
Thn_ajaran Varchar (100)
Tabel 3.14 Tabel Nilai
Field Type Keterangan
Nama Varchar(1000)
Nis Varchar (11)
Agama Int (20)
Bhs. Inggris Int (20)
Penjaskes Int (20)
Seni Budaya Int (20)
IPS Int (20)
(54)
Matematika Int (20)
Bhs. Indonesia Int (20)
PKN Int (20)
Ketrampilan Int (20)
TIKOM Int (20)
MULOK Int (20)
Tabel 3.15 Tabel Gupel
Field Type Keterangan
Id_gupel Primary Key
Nip Id_mapel
Tabel 3.16 Tabel Jadwal
Field Type Keterangan
Jam Text Primary Key
Hari Text
Id_gupel Int (11)
Id_mapel Varchar (10)
Kode_kelas Int (11)
nip Varchar (30)
3.4 Data Flow Diagram (DFD)
Data flow diagram (DFD) adalah alat bantu yang digunakan untuk menggambarkan aliran data informasi dan transformasi (proses) dari data dimulai dari pemasukan data
(55)
sampai menghasilkan keluaran (output) data. Adapun simbol-simbol dari flow diagram, yaitu :
Tabel 3.17 Simbol DFD
No. Gambar Nama Fungsi
1
Kesatuan Luar (External Entity)
Merupakan kesatuan luar diluar lingkungan sistem yang akan memberikan input dan menerima output
2 Proses
Kegiatan dari hasil suatu arus data yang masuk dalam proses untuk dihasilkan arus data yang akan keluar atau untuk mengubah input menjadi output
3 Aliran Data
Data mengalir melalui sistem, dimulai dengan sebagian input data dan diubah atau diproses untuk menjadi input
4
Data Storage (Penyimpanan data)
Data disimpan untuk keperluan berikutnya
Keterangan gambar:
1. Kotak persegi digunakan untuk menggambarkan suatu entitas eksternal yang dapat mengirim data atau menerima data dari sistem.
2. Kotak dengan sudut membulat digunakan untuk menunjukkan adanya proses transformasi.
(56)
3. Tanda panah menunjukkan perpindahan data dari suatu titik ke titik lain dengan kepala tanda panah mengarah ke tujuan data.
4. Penyimpanan data menandakan penyimpanan manual, seperti lemari file atau sebuah file atau basis data terkomputerisasi. Karena penyimpanan data mewakili sebuah atau sesuatu, maka diberi nama dengan sebuah kata benda.
(57)
Tampilan Data Flow Diagram untuk sistem ini adalah sebagai berikut :
Gambar 3.1 Data Flow Diagram (DFD) Diagram Konteks
GURU SISWA
Portal Akademik SMP Negeri 2
Sunggal Menggunakan PHP dan MYSQL
Data Siswa Data Guru Data Kelas
Data Mata Pelajaran Data Guru Pelajaran
NIS/Pass NIP/Pass
Profil Siswa Nilai
Jadwal Matpel Logout
Profil Guru Jadwal Mengajar ADMIN
(58)
3.5 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 ini adalah flowchart dari aplikasi berbasis web pada SMP Negeri 2 Sunggal.
Berikut ini adalah gambar simbol-simbol standar dalam flowchart beserta dengan arti masing – masing simbol :
Tabel 3.18 Flowchart
Simbol Keterangan
Terminal/Interupt (Mulai/Berhenti)
Simbol ini dipergunakan untuk menunjukkan awal kegiatan atau akhir kegiatan atau berhentinya suatu program.
Input/Output (data/hasil)
Untuk mewakili data input dan menuliskan output-nya.
Process (Pengolahan)
Suatu simbol yang melanmbangkan diprosesnya suatu data.
Decision (Keputusan)
Dipakai untuk menuliskan jika adanya percabangan, seperti if, case.
Untuk program-program yang sering dipergunakan sebuah program berulang kali, biasanya dibuat program terpisah dengan
(59)
Prefendifined
sebuah sub program (subroutine). Untuk menghubungkan program utama dengan subroutine dipergunakan simbol ini.
Connector (Penghubung)
Bila suatu flow-chart sangat panjang dan diputus di tengah sebelum selesai, jika disambung dalam halaman yang sama lagi, maka digunakan simbol ini.
Flow Lines (Garis Alir)
Bila suatu flow –chart dihubungkan dengan garis-garis ini. Garis-garis-garis ini menunjukkan akar selanjutnya yang akan dituju. Bila arahnya ke bawah atau ke kanan tidak perlu memakai tanda panah. Bila ke atas atau ke kiri, tanda panah harus dipakai, untuk membedakannya.
(60)
3.5.1 Flowchart Login Admin
Tidak
Ya
Gambar 3.2 Flowchart Login Admin Mulai
Input username dan pass admin
Username dan pass terdaftar ?
Tampil Halaman Admin
Selesai
(61)
3.5.2 Flowchart Halaman Admin Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya
Ya Tidak
Gambar 3.3 Flowchart Halaman Admin Mulai Home Siswa Guru Kelas Mapel Gupel Jadwal Nilai Logout Selesai? Tampilan Home Menu Siswa Menu Guru Menu Kelas Menu Mata Pelajaran Menu Guru Mata Pelajaran Menu Jadwal Menu Nilai Home User A B C D E F G
(62)
3.5.3 Flowchart Login Siswa
Tidak
Ya
Gambar 3.4 Flowchart Login Siswa Input username dan
pass siswa
Username dan pass terdaftar ?
Tampil Halaman Siswa
Selesai
Login Gagal Mulai
(63)
3.5.4 Flowchart Halaman Siswa
Ya
Tidak
Ya
Tidak
Ya
Tidak
Ya Tidak
Ya Ya
Tidak
Gambar 3.5 Flowchart Halaman Siswa Home
Profil
Jadwal
Nilai
Logout
Selesai
Tampilan Home
Menu Profil Siswa
Menu Jadwal Pelajaran Menu Nilai
A
B
C Mulai
(64)
3.5.5 Flowchart Login Guru
Tidak
Ya
Gambar 3.6 Flowchart Login Guru Input username dan
pass guru
Username dan pass terdaftar ?
Tampil Halaman Guru
Selesai
Login Gagal Mulai
(65)
3.5.6 Flowchart Halaman Guru
Ya
Tidak
Ya
Tidak
Ya Tidak
Ya
Ya
Tidak
Gambar 3.7 Flowchart Halaman Guru Home
Profil
Jadwal
Logout
Selesai?
Tampilan Home
Menu Profil Guru Menu Jadwal Mengajar
A
B Mulai
(66)
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah langkah-langkah atau prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah dirancang, disetujui untuk menguji, menginstal dan melalui sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang lama.
Adapun langkah-langkah yang dibutuhkan dalam implementasi sistem adalah : 1. Mendapatkan software dan hardware yang tepat serta sesuai untuk merancang
website.
2. Menyelesaikan rancangan sistem.
3. Menulis, menguji, mengontrol dan mendokumentasikan website. 4. Mendapatkan persetujuan.
4.2 Tujuan Implementasi Sistem
Tujuan Implementasi Sistem adalah sebagai berikut :
1. Menyelesaikan desain website yang baru, menyusun dokumen baru atau dokumen yang akan di perbaiki.
2. Menulis, menguji program-program serta prosedur yang diperlakukan pada sistem yang telah disetujui.
3. Memastikan bahwa sistem yang dibuka dengan sempurna oleh pengguna. 4. Menguji apakah sistem baru tersebut sesuai dengan apa yang diinginkan.
(67)
5. Memastikan bahwa user dapat mengoperasikan sistem baru dengan baik. Langkah-langkah yang dibuthkan dalam pengimplementasian sistem adalah sebagai berikut:
1. Menyelesaikan desain sistem.
2. Mendapatkan software dan hardware
3. Menulis, menguji, mengontrol dan mendokumentasikan program komputer. 4. Menguji sistem.
5. Mendapatkan persetujuan.
4.3 Komponen Dalam Implementasi Sistem
Untuk mengetahui perancangan sistem yang telah kita kerjakan dapat berjalan dengan baik atau tidak, maka perlu dilakukan pengujian terhadap sistem yang telah kita buat. Untuk itu dibutuhkan beberapa komponen utama mencakup perangkat keras (hardware), perangkat lunak (software), dan otak (brainware).
1. Perangkat keras (hardware)
Hardware adalah seluruh komponen peralatan yang membentuk suatu sistem komputer dan peralatan lainnya yang memungkinkan dapat melaksanakan tugasnya. Adapun hardware yang dibutuhkan agar sistem dapat berjalan antara lain :
a. Monitor b. Harddisk
c. Memory minimal 1GB d. Keybord dan mouse 2. Perangkat lunak (software)
(1)
PENGHARGAAN
Puji dan syukur penulisucapkan kepada Allah SWT. yang telah memberikan rahmat dan hidayah-Nya kepada kita semua sehingga penulis dapat menyelesaikantugas akhir ini dengan baik.
Laporan Penyusunan tugas akhir ini masih banyak memiliki kekurangan karena keterbatasan kemampuan dan pengetahuan penulis, sehingga diharapkan kritik dan saran yang membangun serta dapat memberikan inspirasi yang baik untuk kemajuan tugas akhir ini. Penulis berharap semoga Tugas Akhir ini bermanfaat bagi siapapun yang membacanya.
Selama mempersiapkan tugas akhir ini penulis banyak mendapat bantuan, dorongan, dan motivasi baik secara langsung maupun tidak langsung, maka pada kesempatan ini penulis juga menyampaikan terima kasih kepada :
1. Ibu Dr. Mardiningsih, M.Si.selakuDosen Pembimbing penulis yangtelah banyak memberikan bimbingan dan pengarahan kepada penulis dalam menyelesaikan Tugas Akhir ini.
2. Ibu Dr. Elly Rosmaini,M.Si.selakuKetua Program Studi D3 Teknik Informatika FMIPA USU.
3. Bapak Prof. Dr. Tulus, M.Si, selaku Ketua Departemen Matematika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.
4. Bapak Dr. Kerista Sebayang M.Si, selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.
5. Teristimewa untuk Ayah saya Ikhwan Nasution S.Pd dan Ibu saya Tetti Herawati Rambe S.Pd yang telah memberikan doa, nasehat dan dukungan baik secara moril maupun materil.
6. Putri Meilinda dan Hidayat sebagai adik penulis yang telah memberikan dukungan yang penuh terhadap saya.
7. Mhd. Ricky Fahreza yang telah memberikan semangat dan dukungan terhadap saya.
8. Dena Metary, Fara Diba, Medina Rhamadani dan Sabilla Yassarah selaku sahabat terbaik juga rekan pembimbing penulis.
Akhir kata, semoga laporan tugas akhir ini dapat memberi manfaat dan menambah wawasan maupun pengetahuan kita.
(2)
PORTAL AKADEMIK SMP NEGERI 2 SUNGGAL MENGGUNAKAN PHP DAN MYSQL
ABSTRAK
Pada penulisan tugas akhir ini, penulis membuat sistem portal akademik SMP Negeri 2 Sunggal menggunakan PHP dan MySQL. Portal Akademik adalah sistem informasi yang mengelola data-data akademik dengan penerapan teknologi komputer dan perangkat lunak, seluruh proses kegiatan akademik dapat terkelola dengan baik dan informasi yang diperlukan diperoleh dengan mudah dan cepat. Pembuatan sistem ini menggunakan bahasa pemograman PHP, HTML, CSS, MySQL, dan JavaScript. Sistem ini bertujuan sebagai media informasi yang memberikan pelayanan akademik berupa nilai dan jadwal siswa secara online, mempermudah guru dalam pengolahan data nilai siswaagar lebih efisien dengan pengolahan yang transparan sehingga semua bisa dipertanggungjawabkan.
(3)
DAFTAR ISI
Halaman
Persetujuan i
Pernyataan ii
Penghargaan iii
Abstrak iv
Daftar Isi v
DaftarTabel vii
DaftarGambar viii
Bab 1. Pendahuluan
1.1. Latar Belakang 1
1.2. Perumusan Masalah 2
1.3. Manfaat Penelitian 2
1.4. Metode Penelitian 3
1.5. Sistematika Penulisan 5
Bab 2. Landasan Teori
2.1. Pengertian Sistem Informasi 6
2.2. Sekilas Tentang Portal Akademik Sekolah 6
2.3. Sekilas Tentang Perancangan 7
2.4. Sekilas Tentang Sistem 7
2.5. Sekilas Tentang PHP dan MySQL 7
2.6. Sekilas Tentang HTML 10
2.7. Sekilas Tentang CSS 11
2.8. Sekilas Tentang JavaScript 12
Bab 3. Perancangan Sistem
3.1. Tahap Perancangan 13
3.2. Normalisasi 13
3.2.1. Perancangan Tabel Normalisasi 16
3.3. Struktur Database 22
3.4. Data Flow Diagram (DFD) 26
3.5. Diagram Alir (Flowchart) 29
3.5.1. Flowchart Login Admin 31
3.5.2. Flowchart Halaman Admin 32
3.5.3. Flowchart Login Siswa 33
3.5.4. Flowchart Halaman Siswa 34
3.5.5. Flowchart Login Guru 35
3.5.6. Flowchart Halaman Guru 36
Bab 4. Implementasi Sistem
4.1. Pengertian Implementasi Sistem 37
4.2. Tujuan Implementasi Sistem 37
4.3. Komponen Dalam Implementasi Sistem 38
(4)
4.4. Instalasi XAMPP 40
4.5. Hasil Program 44
4.5.1. Tampilan Halaman Utama 44
4.5.2. Tampilan Halaman Admin 45
4.5.2.1. Menu Home 45
4.5.2.2. Menu Profil 45
4.5.2.3. Menu Siswa 46
4.5.2.4. Menu Guru 47
4.5.2.5. Menu Nilai 47
Bab 5. Kesimpulan
5.1. Kesimpulan 48
5.2. Saran 49
Daftar Pustaka 50
Lampiran Listing Program
(5)
DAFTAR TABEL
Nomor Judul Halaman
Tabel
3.1. Tabel Entitas Normalisasi Siswa 16
3.2. Tabel Entitas Normalisasi Siswa 1 NF 17
3.3. Tabel Entitas Normalisasi Siswa 2 NF 18
3.4. Tabel Entitas Normalisasi Siswa 3 NF 19
3.5. Tabel Entitas Normalisasi Guru 20
3.6. Tabel Entitas Normalisasi Guru 1 NF 21
3.7. Tabel Entitas Normalisasi Guru 2 NF 21
3.8. Tabel User 23
3.9. Tabel Guru 23
3.10. Tabel Siswa 23
3.11. Tabel Kelas 24
3.12. Tabel Mapel 24
3.13. Tabel Tahun Ajaran 24
3.14. Tabel Nilai 24
3.15. Tabel Gupel 25
3.16. Tabel Jadwal 25
3.17. Simbol DFD 26
3.18. Flowchart 29
(6)
DAFTAR GAMBAR
Nomor Judul Halaman
Gambar
3.1. Data Flow Diagram (DFD) Diagram Konteks 28
3.2. Diagram Alir Login Admin 31
3.3. Diagram Alir Halaman Admin 32
3.4. Diagram Alir Login Siswa 33
3.5. Diagram Alir Halaman Siswa 34
3.6. Diagram Alir Login Guru 35
3.7. Diagram Alir Halaman Guru 36
4.1. Instalasi XAMPP 3.2.2 (1) 40
4.2. Instalasi XAMPP 3.2.2 (2) 41
4.3. Instalasi XAMPP 3.2.2 (3) 42
4.4. Instalasi XAMPP 3.2.2 (4) 42
4.5. Instalasi XAMPP 3.2.2 (5) 43
4.6. Control Panel XAMPP 43
4.7. Tampilan Halaman Utama 44
4.8. Tampilan Menu Home pada Halaman Admin 44
4.9. Tampilan Menu Profil pada Halaman Admin 46 4.10. Tampilan Menu Siswa pada Halaman Admin 46 4.11. Tampilan Menu Guru pada Halaman Admin 47 4.12. Tampilan Menu Menu Nilai pada Halaman Admin 47