Portal Akademik SMP Negeri 2 Sunggal Menggunakan PHP dan MYSQL

(1)

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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p> <p>&nbsp;</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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>


(15)

<p>&nbsp;</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>&copy 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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>

<p>&nbsp;</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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>

<p>&nbsp;</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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>

<p>&nbsp;</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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>

<p>&nbsp;</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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>

<p>&nbsp;</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>&copy Copyright 2016 SMP Negeri 2 Sunggal</p>

<p>&nbsp;</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