27

MODUL 3
Membangun Sistem Informasi dalam Aplikasi Web

A. Kompetensi Dasar
3.3 Merancang sistem informasi web
4.3 Membangun aplikasi sistem informasi web

B. Tujuan Pembelajaran
1. Setelah mencermati materi di buku dan mengakses berbagai literatur, siswa
mampu menjelaskan prosedur perancangan sistem informasi dalam pemrograman
aplikasi web dengan baik.
2. Setelah mencermati materi di buku dan mengakses berbagai literatur, siswa
mampu menerapkan rancangan sistem informasi dalam pemrograman aplikasi
berbasis web dengan tepat.
3. Setelah berdiskusi dan meyimak penjelasan guru, siswa mampu merancang
program aplikasi sistem informasi berbasis web dengan benar
4. Setelah menyimak beberapa contoh dan berlatih, siswa mampu membuat kode
program aplikasi sistem informasi berbasis web dengan benar
5. Setelah berdiskusi dan menelaah berbagai informasi di buku dan literatur lainnya,
siswa mampu menguji program aplikasi sistem informasi berbasis web dengan
baik

C. Teori
1. Konsep Sistem Informasi dalam Aplikasi Web
Menurut O’Brien “Sistem informasi adalah suatu sistem terpadu yang
menyediakan informasi atau data untuk mendukung berbagai kegiatan
operasional,manajemen,dan fungsi pengambilan keputusan dari suatu
organisasi/perusahaan.”. Sistem informasi dalam aplikasi web berkembang sangat
pesat dibandingkan sistem informasi berbasis perangkat lunak konvensional.
Beberapa kelebihan aplikasi web adalah sebagai berikut:
a. Lintas platform karena berjalan pada browser
b. Sistem informasi berbasis web hanya perlu diinstal di server sehingga lebih
mudah dikelola.
c. Memungkinkan diakses oleh banyak user secara bersamaan

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 28

d. Menghemat biaya karena tidak memerlukan infrastruktur distribusi atau

pemasaran.
e. Kecilnya resiko kehilangan data karena adanya prosedur backup, baik sebagai
layanan standar maupun layanan berbayar.

2. Merancang Sistem Informasi dalam Pemrograman Aplikasi Web

Dalam membangun sistem informasi yang baik, perlu memperhatikan siapa saja
aktor yang terlibat dalam penggunaan sistem informasi. Tujuannya adalah untuk
mengumpulkan informasi yang dibutuhkan, identifikasi masalah dan menemukan
solusinya. Ada 2 tahap dalam membangun sistem informasi berbasis web, yaitu:
a. Analisis aliran data
Tujuannya mengetahui aliran proses informasi. Analisis ini dapat
menggunakan pengembangan berorientasi objek sebagai berikut:
- Use Case Diagram
Menekankan tentang “apa” yang diperbuat sistem dan bukan
“bagaimana”.

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 29

- Activity Diagram
Mendeskripsikan logika prosedural, proses bisnis dan jalur kerja serta
menunjukan tahapan, pengambilan keputusan dan percabangan.

- Secuence Diagram
Menggambarkan interaksi antar objek di dalam dan di sekitar sistem
(termasuk pengguna, tampilan dan sebagainya) berupa pesan (message)
yang digambarkan terhadap waktu.

- Class Diagram
Menggambarkan struktur dan deskripsi class, package dan objek beserta
hubungan satu sama lain.

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 30

b. Membuat tampilan website

Langkah-langkah yang perlu diperhatikan dalam membuat tampilan website:
- Gather and Learn
Tahap pertama yang dilakukan adalah mengumpulkan informasi dan
mempelajarinya. Informasi yang dikumpulkan meliputi hal-hal sebagai
berikut:
1) Tujuan pembuatan website
2) Layanan yang akan disediakan di dalam website
3) Target demografi pengunjung web
4) Konten website yang ditampilkan
- Planning
Langkah berikutnya adalah membuat rencana mengenai hal-hal berikut:
1) Menentukan site map
2) Menentukan teknologi atau platform yang akan digunakan
3) Membuat prototype
4) Menyiapkan konten
- Implementasi Desain
Setelah mengumpulkan informasi dan membuat rencan mengenai isi
website, langkah selanjutnya adalah membuat desain.

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 31

- Development
Setelah tahap desain disetujui, tampilan akan diterjemahkan ke dalam
bahasa pemrograman.
- Testing, Delivery and Launch
Pengujian dimulai dari fungsionalitas sampai ke kompatibilitas. Jika
semua pengujian berjalan dengan baik, maka website siap untuk
dipublikasikan.
- Maintenance
Website yang selesai dipublikasikan perlu dilakukan pemeliharaan dan
pengembangan sistem agar dapat terus berjalan dengan baik.

3. Membuat Program Sistem Informasi Berbasis Web

Dalam modul praktik kali ini, akan dibahas pembuatan sistem informasi
perpustakaan sederhana. Sebelum membuat program kita akan menentukan menu
dan desain tampilan yang akan dibuat. Berikut contoh menu yang akan disajikan:
No Level Nama Menu Deskripsi
1 Admin Home Menampilkan deskripsi sistem
Buku Mengolah data buku
Siswa Mengolah data siswa
Laporan Menampilkan laporan
Keluar Keluar dari penggunaan sistem
2 Petugas Home Menampilkan deskripsi sistem
Buku Menampilkan dan mencari data buku
Keluar Keluar dari penggunaan sistem
Berikut contoh tampilan mockup web yang akan digunakan:

LOGO SISTEM INFORMASI PERPUSTAKAAN

MENU ISI KONTEN

MENU

MENU

MENU

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 32

LOGO SISTEM INFORMASI PERPUSTAKAAN

MENU KONTEN

MENU + Pencarian cari

MENU
Kode Judul Data Data Data Aksi
MENU

Sebelum anda membuat kode program sistem informasi, silakan lakukan aktivitas
pendahuluan!
Berikut daftar file yang digunakan pembuatan contoh sistem informasi
perpustakaan:

logo.png
merupakan gambar logo sistem perpustakaan yang berformat file PNG (Portable
Network Graphics)

koneksi.php
merupakan file yang berisi kode program untuk koneksi ke database.
<?php
$konek=mysqli_connect("localhost","user","pass","dbase");
if(mysqli_connect_error()){
echo "koneksi gagal";
}
?>

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 33

login.php
merupakan file yang berisi tentang autentifikasi terhadap pengguna yang
menggunakan sistem.
<?php
session_start();
if(isset($_SESSION['nama']) and isset($_SESSION['password'])){
header("location:index.php");
}
if(isset($_POST['login'])){
require_once "koneksi.php";
$nama=$_POST['nama'];
$password=md5($_POST['password']);
$qr=mysqli_query($konek,"select * from pengguna
Where nama='$nama' and sandi='$password'");
$cek=mysqli_num_rows($qr);
if($cek>0){
$dt=mysqli_fetch_array($qr);
$_SESSION['nama']=$nama;
$_SESSION['password']=$password;
$_SESSION['level']=$dt['level'];
header("location:index.php");
}
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gaya.css">
</head>
<body>
<div class="login">
<h2>Login</h2>
<form method="post">
Nama<br>
<input type="text" name="nama"><br>
Password<br>
<input type="password" name="password"><br><br>
<input type="submit" name="login" value="masuk"
class="bt bt-login">
</form>
</div>
</body>
</html>

logout.php
merupakan file yang berisi kode program untuk keluar dari penggunaan sistem
<?php
session_start();
session_destroy();
header("location:login.php");
?>

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 34

index.php
merupakan file yang berisi kode program untuk menampilkan halaman utama,
membagi isi konten berdasarkan level pengguna serta sebagai template dari
halaman-halaman yang lain.
<?php
error_reporting(0);
session_start();
require_once "koneksi.php";
if(!isset($_SESSION['nama']) and
!isset($_SESSION['password'])){
header("location:login.php");
}
$hal=$_GET['p'];
$level=$_SESSION['level'];
?>
<head>
<link rel='stylesheet' type='text/css' href='gaya.css'>
</head>
<body>
<div class="utama">
<div class="atas">
<img src="logo.png" class="logo">
<h2>Sistem Informasi Perpustakaan</h2>
</div>
<div class="kiri">
<!--menu tampilan-->
<ul>
<li><a href='index.php'>Home</a></li>
<li><a href='index.php?p=buku'>Buku</a></li>
<?=($level=='admin')?"<li><a
href='index.php?p=siswa'>Siswa</a></li>":""?>
<?=($level=='admin')?"<li><a
href='index.php?p=laporan'>Laporan</a></li>":""?>
<li><a href='index.php?p=logout'>Keluar</a></li>
</ul>
</div>
<div class="kanan">
<!--isi tampilan-->
<?php
if(isset($hal)){
//memanggil file yang dibutuhkan
require $hal.'.php';
}else{
echo "<h3>Dashboard Sistem</h3>Gunakan pilihan menu
sebelah kiri untuk mengolah data";
}
?>
</div>
</div>
</body>

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 35

buku.php
merupakan file yang berisi kode program untuk mengelola tabel buku yang terdiri
dari pencarian data, menampilkan data, form input data dan form edit data.
<?php
require_once "koneksi.php";
if(!isset($_SESSION['nama']) and
!isset($_SESSION['password'])){
header("location:login.php");
}
$cr=$_GET['cr'];
$aksi=$_GET['a'];
?>
<h3>Menu Buku</h3>
<div class="fhead">
<a href="index.php?p=buku&a=input"><button>Tambah</button></a>
<form>
<input type="hidden" name="p" value="buku">
<input type="text" name="cr" placeholder="cari data">
<input type="submit" name="cari" value="cari">
</form>
</div>
<?php if($aksi=="input"){?>
<!--untuk form input-->
<form action="buku_aksi.php?p=buku" method="post">
<fieldset>
<legend>Input Data</legend>
Kode Buku<br>
<input type="text" name="kode" placeholder="kode buku"
required><br>
Judul Buku<br>
<input type="text" name="judul" placeholder="judul buku"
required><br>
Pengarang<br>
<input type="text" name="pengarang"
placeholder="pengarang" required><br>
Penerbit<br>
<input type="text" name="penerbit" placeholder="penerbit"
required><br>
Tahun Terbit<br>
<input type="text" name="tahun" placeholder="tahun terbit"
required><br><br>
<input type="submit" name="insert" value="Simpan">
</fieldset>
</form>
<?php }else if($aksi=="edit"){
<!--untuk form edit-->
$qr=mysqli_query($konek,"select * from buku where
kode='$cr'");
$dt=mysqli_fetch_array($qr);
?>
<form action="buku_aksi.php?p=buku" method="post">
<fieldset>
<legend>Edit Data</legend>
Kode Buku<br>
<input type="text" name="kode" placeholder="kode buku"
value="<?=$dt['kode']?>" readonly required><br>
Judul Buku<br>
<input type="text" name="judul" placeholder="judul buku"
value="<?=$dt['judul']?>" required><br>
Pengarang<br>

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 36

<input type="text" name="pengarang"

placeholder="pengarang" value="<?=$dt['pengarang']?>"
required><br>
Penerbit<br>
<input type="text" name="penerbit" placeholder="penerbit"
value="<?=$dt['penerbit']?>" required><br>
Tahun Terbit<br>
<input type="text" name="tahun" placeholder="tahun terbit"
value="<?=$dt['tahun_terbit']?>" required><br><br>
<input type="submit" name="update" value="Perbaharui">
</fieldset>
</form>
<?php }else{
<!--untuk tampil data-->
//apabila ada pencarian
if(isset($cr)){
$qr=mysqli_query($konek,"select * from buku where judul like
'%$cr%'");
}else{
$qr=mysqli_query($konek,"select * from buku");
}
if(mysqli_num_rows($qr)>0){
?>
<table border="1">
<tr>
<th>No</th>
<th>Kode</th>
<th>Judul</th>
<th>Pengarang</th>
<th>Penerbit</th>
<th>Tahun</th>
<th>Aksi</th>
</tr>
<?php
while($dt=mysqli_fetch_array($qr)){
?>
<tr>
<td><?=++$no;?></td>
<td><?=$dt['kode'];?></td>
<td><?=$dt['judul'];?></td>
<td><?=$dt['pengarang'];?></td>
<td><?=$dt['penerbit'];?></td>
<td><?=$dt['tahun_terbit'];?></td>
<td>
<a
href="index.php?p=buku&a=edit&cr=<?=$dt['kode']?>"><button
class="bt bt-edit">edit</button></a>
<a
href="buku_aksi.php?p=buku&a=hapus&cr=<?=$dt['kode']?>"
onclick="return confirm('yakin akan dihapus?')"><button
class="bt bt-del">delete</button></a>
</td>
</tr>
<?php }?>
</table>
<?php }}?>

buku_aksi.php
merupakan file yang berisi kode program untuk aksi pengelolaan tabel buku ke
database melalui perintah SQL

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 37

<?php
require_once "koneksi.php";
if(!isset($_SESSION['nama']) and
!isset($_SESSION['password'])){
header("location:login.php");
}
$hal=$_GET['p'];
$aksi=$_GET['a'];
//untuk simpan data
if(isset($_POST['insert'])){
mysqli_query($konek,"insert into buku set
kode='$_POST[kode]',
judul='$_POST[judul]',
pengarang='$_POST[pengarang]',
penerbit='$_POST[penerbit]',
tahun_terbit='$_POST[tahun]'
");
}
//untuk update data
if(isset($_POST['update'])){
mysqli_query($konek,"update buku set
judul='$_POST[judul]',
pengarang='$_POST[pengarang]',
penerbit='$_POST[penerbit]',
tahun_terbit='$_POST[tahun]'
where kode='$_POST[kode]'
");
}
//untuk hapus data
if($aksi=='hapus'){
mysqli_query($konek,"delete from buku where
kode='$_GET[cr]'");
}
header("location:index.php?p=$hal");
?>

gaya.css
merupakan file untuk mengatur tampilan agar terlihat menarik dan responsive
body{
margin:0px;
background:#eee;
font-family:calibri;
}
.login{
padding:20px;
width:40%;
margin:auto auto;
background:#fff;
font-size:18px;
}
.login h2{
text-align:center;
}
.login form{
border:1px solid #ccc;
padding:30px;
line-height:200%;
}
.login input{
width:100%;

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 38

line-height:200%;
}
.utama{
padding:20px;
width:80%;
margin:auto auto;
background:#fff;
overflow:hidden;
}
.atas{
margin-bottom:15px;
background:#999;
overflow:hidden;
}
.atas h2{
padding:10px;
color:#fff;
}
.logo{
float:left;
width:85px;
}
.kiri{
float:left;
width:20%;
margin-bottom:10px;
}
.kiri ul{
margin:0px;
padding:0px;
list-style:none;
}
.kiri ul li{
margin-bottom:10px;
}
.kiri a,.kiri a:active{
text-decoration:none;
color:#fff;
display:block;
background:#66aa00;
padding:5px;
border-top-right-radius:10px 10px;
border-bottom-right-radius:10px 10px;
}
.kanan{
float:right;
width:75%;
margin-bottom:10px;
border:1px solid #ccc;
padding:10px;
min-height:400px;
}
.kanan h3{
display:block;
margin-top:0px;
padding-bottom:10px;
border-bottom:1px solid #696;
}
.kanan button{
margin-bottom:10px;
}
.fhead button,.fhead form{
display:inline-block;

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 39

}
.kanan a{
text-decoration:none;
}
.kanan form{
line-height:200%;
}
.kanan table{
width:100%;
border-collapse:collapse;
}
.kanan table tr td,.kanan table tr th{
padding:5px;
}
.kanan table tr th{
background:#eee;
}
legend{
background:#666;
color: #fff;
padding: 2px 10px;
}
.bt{
color:#fff;
padding:5px 10px;
border:none;
}
.bt-edit{
background:#fa0;
}
.bt-del{
background:#707;
}
.bt-login{
background:#707;
font-size:18px;
}

@media screen and (max-width:700px){

.utama{
width:90%;
}
.kiri,.kanan{
display:block;
width:100%;
float:left;
}
.kanan{
padding:-10px;
width:96.5%;
min-height:200px;
}
.logo{
display:none;
}
.atas h2{
font-size:16px;
}
}

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 40

4. Menguji Program Aplikasi Sistem Informasi Berbasis Web

Untuk melihat sukses atau tidaknya kode program yang telah dibuat silakan
lakukan proses menambahkan data, mengedit data, menghapus data dan mencari
data.

D. Aktivitas
1. Pendahuluan
a. Pastikan anda telah menyelesaikan modul-modul sebelumnya!
b. Siapkan gambar logo untuk tampilan sistem!
c. Buatlah tabel buku dengan field sebagai berikut:
kode varchar(255) Primary Key
judul varchar(255)
pengarang varchar(255)
penerbit varchar(255)
tahun_terbit varchar(255)
d. Buatlah tabel siswa dengan field sebagai berikut:
nis varchar(255) Primary Key
nama varchar(255)
jenis_kelamin varchar(255)
status boolean
2. Percobaan
a. Aturlah agar pencarian data buku dapat mencari data dengan kata kunci kode
atau judul buku atau pengarang atau tahun terbit!
b. Buatlah pengelolaan data untuk tabel siswa dalam sistem informasi di atas!
c. Buatlah keamanan agar dapat menampung data nama siswa yang
menggunakan tanda petik satu (single quote)!
3. Pengetahuan
a. Jelaskan fungsi dari fungsi error_reporting()!
b. Jelaskan perintah dari insert into di atas!
c. Sebutkan 5 contoh parameter dalam kode program di atas!
d. Bagaimana cara membuat tampilan website agar responsive? Berikan
contohnya!
e. Buatlah tutorial penggunaan sistem informasi perpustakaan yang telah dibuat!

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa
 41

4. Proyek
a. Buatlah tampilan laporan untuk menu laporan seperti berikut:

b. Buatlah tampilan laporan ketika dicetak seperti berikut:

E. Penilaian Proyek
Nama Peserta Didik :
Kelas :

No Komponen/Sub Komponen Skor

1 Persiapan (Skor maksimal 20)
1. Menyelesaikan pendahuluan (10)
2. Menyelesaiakan percobaan (10)
Jumlah skor komponen persiapan
2 Proses/Pelaksanaan (Skor maksimal 70)
1. CSS dibuat sesuai tampilan (25)
2. CSS dibuat sesuai media cetak (25)
3. Alur program berjalan dengan baik (10)
4. Aplikasi bebas error (10)
Jumlah skor komponen proses/pelaksanaan
3 Sikap Kerja (Skor maksimal 10)
1. Waktu penyelesaian proyek (5)
2. Sikap dalam menyelesaikan proyek (5)
Jumlah skor komponen sikap kerja
TOTAL NILAI (1+2+3)

Sintang, 20__
Peserta didik Guru Mapel

------------------------------ ------------------------------

Modul Pemrograman Web dan Perangkat Bergerak Kelas XII - SMK Karya Bangsa