Buku Mahir

Web Programming
Sanksi Pelanggaran Pasal 113
Undang-Undang Nomor 28 Tahun 2014
tentang Hak Cipta

1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi
sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan
Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun
dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah).

2. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau
pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta
sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f,
dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan
pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling
banyak Rp500.000.000,00 (lima ratus juta rupiah).

3. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau
pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta
sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e,
dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan
pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling
banyak Rp1.000.000.000,00 (satu miliar rupiah).

4. Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3)
yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara
paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak
Rp4.000.000.000,00 (empat miliar rupiah).
 Buku Mahir
Web Programming

Ir. Yuniar Supardi

dan
Defri Faizal Maulana S.

PENERBIT PT ELEX MEDIA KOMPUTINDO

Buku Mahir Web Programming

Ir. Yuniar Supardi dan Defri Faizal Maulana S.

2018 PT Elex Media Komputindo, Jakarta
Hak cipta dilindungi undang-undang
Diterbitkan pertama kali oleh
Penerbit PT Elex Media Komputindo
Kelompok Gramedia, Anggota IKAPI, Jakarta 2018
nadhia@elexmedia.id

719050164
ISBN 978-602-04-8982-7

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian

atau seluruh isi buku ini tanpa izin tertulis dari penerbit.

Dicetak oleh Percetakan PT Gramedia, Jakarta

Isi di luar tanggung jawab percetakan
 DAFTAR ISI

Prakata...................................................................................................... v
Daftar Isi ................................................................................................... vii
Cara Pemakaian Program ................................................................... xi
BAB 1 Login Database .......................................................................... 1

1.1 Membuat Database dbnilai ................................................................ 1

1.2 Membuat Program Login Database................................................ 5

1.3 Menjalankan Program Login Database......................................... 13

BAB 2 CRUD Database .......................................................................... 15

2.1 Membuat Database dbpemakai ....................................................... 15

2.2 Membuat Program CRUD Database ............................................... 24

2.3 Menjalankan Program CRUD Database ........................................ 29

BAB 3 Upload File .................................................................................. 33

3.1 Membuat Program Upload File ........................................................ 33

3.2 Menjalankan Program Upload File ................................................. 35

BAB 4 Upload dan Download ............................................................. 37

4.1 Membuat Database dbuploaddownload ...................................... 37

4.2 Membuat Program Upload dan Download ................................. 40

4.3 Menjalankan Program Upload dan Download .......................... 43

BAB 5 Menu ............................................................................................. 47

5.1 Membuat Database dbsalary............................................................. 47

vii
 5.2 Membuat Folder Program .................................................................. 48

5.3 Membuat Program Menu .................................................................... 49

5.4 Mengopi file fpdf.php............................................................................ 60

5.5 Menjalankan Program Menu ............................................................. 60

BAB 6 Studi Kasus 1: Penggajian ...................................................... 63

6.1 Membuat Database db_penggajian ................................................. 63

6.2 Membuat Folder Program Penggajian .......................................... 67

6.3 Membuat Program Penggajian ......................................................... 67

6.4 Menjalankan Program Penggajian .................................................. 86

BAB 7 Studi Kasus 2: Penjualan ........................................................ 89

7.1 Membuat Database penjualan .......................................................... 89

7.2 Membuat Folder Program Penjualan ............................................ 90

7.3 Membuat Program Penjualan ........................................................... 90

7.4 Menjalankan Program Penjualan .................................................... 108

BAB8 Studi Kasus 3: Sistem Informasi KTP.................................................. 111

8.1 Membuat Database dbktp .................................................................. 111

8.2 Membuat Folder Program KTP ........................................................ 112

8.3 Mengopi File fpdf.................................................................................... 112

8.4 Membuat Program KTP ....................................................................... 113

8.5 Menjalankan Program KTP ................................................................ 170

BAB 9 Studi Kasus 4: Apotek...........................................................................173

9.1 Membuat Database dbsisfosikcimanggu .................................... 173

9.2 Membuat Folder Program Apotek .................................................. 174

viii
 9.3 Membuat Program Apotek ................................................................. 174

9.4 Menjalankan Program Apotek.......................................................... 265

Lampiran .................................................................................................................267
Daftar Pustaka ......................................................................................................273
Tentang Penulis....................................................................................................275

ix
 BAB 1
LOGIN DATABASE

Login merupakan aplikasi yang mempunyai fungsi untuk

menentukan hak akses pemakai pada web. Dalam bab ini, penulis
membahas login yang memakai data dari database MySQL. Anda
dapat juga membuat aplikasi login tanpa memakai database, artinya
data valid login-nya disimpan dalam variabel tertentu yang telah
ditentukan di dalam kode program, untuk lebih jelasnya ikuti
pembuatan programnya di bawah ini.

1.1 Membuat Database dbnilai

Database dbnilai merupakan database yang dibuat menggunakan
perangkat lunak PhpMyAdmin yang didapat dari menginstal
XAMPP (lihat Lampiran I Instalasi XAMPP 1.7.7), langkah-langkah
pembuatannya sebagai berikut:

1. Asumsikan bahwa Anda telah menjalankan aplikasi Apache

dan MySQL, seperti terlihat pada Gambar 1.1.

1
 Gambar 1.1 Menjalankan Aplikasi Apache dan MySQL

2. Kemudian, Anda jalankan browser kesayangan Anda. Sebagai

contoh, penulis menggunakan Mozilla Firefox.

3. Ketik localhost di kotak Address Bar dan tekan tombol

Enter, seperti Gambar 1.2 di bawah ini.

Gambar 1.2 Menjalankan XAMPP

4. Klik menu atau tulisan phpMyAdmin, seperti Gambar 1.3 di

bawah ini.

2
 Gambar 1.3 Menjalankan phpMyAdmin

5. Ubah English untuk Language, seperti Gambar 1.4 di bawah

ini.

Gambar 1.4 Ubah bahasa ke English

6. Ketik dbnilai di kotak Create new database dan klik tombol

create.

7. Klik database dbnilai di kolom phpMyAdmin di sebelah kiri.

3
 8. Ketik login di kolom Name dan ketik 2 di kolom Number of
column dan klik tombol Go.

9. Masukkan struktur field seperti gambar di bawah ini.

Gambar 1.5 Struktur field

10. Field username sebagai kunci utama (primary key).

11. Kemudian klik tombol Save dan klik tabel login di jendela
phpMyAdmin.

12. Checklist kotak di depan field username dan klik menu

Primary.

13. Klik tab Insert untuk memasukkan record atau data.

14. Kemudian, masukkan data dan klik tombol Go pada data

kedua seperti Gambar 1.6 di bawah ini:

Gambar 1.6 Memasukkan dua data

15. Klik tab Browse, seperti Gambar 1.7 di bawah ini.

4
 Gambar 1.7 Tab Browse

16. Akan terlihat record yang Anda masukkan.

1.2 Membuat Program Login Database

Setelah Anda membuat Database dbnilai, sekarang Anda membuat
program untuk web login database, Anda dapat menggunakan editor
apa saja, sebagai contoh penulis menggunakan Wordpad dengan
langkah-langkah sebagai berikut:

1. Buat dahulu folder Sistem_Informasi_Nilai di bawah folder

htdocs.

2. Kemudian, Anda buat folder dengan nama font, images,

librari di bawah folder Sistem_Informasi_Nilai.

3. Anda copy-kan file-file huruf (font) ke dalam folder font dan

copy-kan file-file gambar ke dalam folder images. Folder
librari berguna untuk menyimpan file koneksi ke database
dbnilai (untuk mendapatkan file-file tersebut Anda dapat
konfimasi ke email penulis yuniarsupardi@gmail.com).

4. Jalankan Wordpad dan ketik program seperti di bawah ini:

<?php
$my['host'] = "localhost";
$my['user'] = "root";

5
 $my['pass'] = "";
$my['dbs'] = "dbnilai";
$koneksi = mysql_connect($my['host'],
$my['user'], $my['pass']);
if (! $koneksi) {
echo "Gagal koneksi !!!";
mysql_error();
}
mysql_select_db($my['dbs']) or die ("Database
Tidak Ada!!!".mysql_error());
?>

5. Kemudian, Anda klik tombol Save dan arahkan ke folder

xampp/htdocs/Sistem_Informasi_Nilai/librari, serta
ketik “inc.koneksidb.php”.

6. Ketik kembali program seperti di bawah ini:

<html>
<head>
<title>Login here</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-- table {
font-family: Verdana, Arial, Helvetica, sans-
serif;
font-size: 11px;
}
input {
font-family: Verdana, Arial, Helvetica, sans-
serif;
font-size: 11px;
height: 20px;
}
body {
background-color: #66FFFF;
}
-->
</style>
</head>
<body>
<div align="center">
<form action="periksa.php" method="post"
name="login">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

6
 <table width="286" border="0" cellpadding="0"
cellspacing="0">
<!--DWLayoutTable-->
<tr bgcolor="#FF6633">
<td height="19" colspan="2" align="center"
valign="middle" bgcolor="#000066"><font
color="#FFFFFF">LOGIN DI SINI</font></td>
</tr>
<tr>
<td width="106" height="27"><img
src="images/login.jpg" width="90" height="90"
longdesc="images/lg.png"></td>
<td width="180">&nbsp;</td>
</tr>
<tr>
<td height="18" align="right"
valign="middle">Username :&nbsp;</td>
<td valign="middle"><input name="username"
type="text" id="username" size="30"></td>
</tr>
<tr>
<td height="18" align="right"
valign="middle">Password :&nbsp;</td>
<td valign="middle"><input name="password"
type="password" id="password" size="30"></td>
</tr>
<tr>
<td height="19">&nbsp;</td>
<td></td>
</tr>
<tr>
<td height="18" valign="top"><!--
DWLayoutEmptyCell-->&nbsp;</td>
<td valign="middle"><input name="login"
type="submit" id="login" value=" Login "></td>
</tr>
<tr>
<td height="28">&nbsp;</td>
<td></td>
</tr>
<tr bgcolor="#FF6633">
<td height="18" colspan="2" valign="top"
bgcolor="#000066"><!--DWLayoutEmptyCell--
>&nbsp;</td>
</tr>
</table>
</form>
</div>
</body>
</html>

7
 7. Silakan Anda klik tombol Save dan arahkan ke folder
xampp/htdocs/Sistem_Informasi_Nilai, serta ketik
“login.php”.

8. Ketik kembali program seperti di bawah ini:

<style type="text/css">
<!--
body {
background-color: #6666FF;
}
-->
</style><?php session_start();
#**************** koneksi ke mysql
*****************#
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "dbnilai";
$conn = mysql_connect($host,$user,$pass);
if($conn) {
//select database
$sele = mysql_select_db($dbname);
if(!$sele) {
echo mysql_error();
}
}
#***************** akhir koneksi
******************#
#jika ditekan tombol login
if(isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql = mysql_query("SELECT * FROM login WHERE
username='$username' &&
password='$password'");
$num = mysql_num_rows($sql);
if($num==1) {
// login benar //
$_SESSION['user'] = $username;
$_SESSION['passwd'] = $password;
?>
<script language="JavaScript">alert('Anda berhasil
login');
document.location='index.html'</script>
<?
} else {
// jika login salah //
?>
<script language="JavaScript">alert('Username atau
password Anda salah' ); document.location=

8
 'login.php'</script>
<?
}
}
?>

9. Kemudian, Anda klik tombol Save dan arahkan ke folder

xampp/htdocs/Sistem_Informasi_Nilai, serta ketik
“periksa.php”.

10. Ketik kembali program seperti di bawah ini:

<?php
// buat koneksi dengan database mysql
$host = "localhost";
$user = "root";
$pass = "";
$name = "dbnilai";
$link = mysqli_connect($host,$user,$pass,$name);
//periksa koneksi, tampilkan pesan kesalahan
jika gagal
if(!$link){
die ("Koneksi dengan database gagal:
".mysql_connect_errno().
" - ".mysql_connect_error());
}
?>

11. Selanjutnya, Anda klik tombol Save dan arahkan ke folder

xampp/htdocs/Sistem_Informasi_Nilai, serta ketik
“koneksi.php” lalu ketik kembali program di bawah ini:
<?
session_start();
//periksa apakah user telah login atau memiliki
session
if(!isset($_SESSION['user']) ||
!isset($_SESSION['passwd'])) {
?> <script language='javascript'>
document.location='login.php'</script><?
} else {
unset($_SESSION);
session_destroy();
?>
<script language='javascript'>
document.location='login.php'</script>
<?
}
?>

9
 Tentang
Penulis

Ir. Yuniar Supardi adalah sarjana Teknik Informatika, lulusan tahun

1991 kelahiran kota minyak, Balikpapan, Kalimantan Timur.
Kegiatan utama sebagai penulis buku komputer nasional, dosen
jurusan Tenik Informatika, dan sistem analis komputer.

Sudah lebih dari 60 judul buku komputer yang ditulis di PT. Elex
Media Komputindo (Gramedia Group) dan best seller. Judul bukunya,
antara lain: Semua Bisa Menjadi Programmer Java Basic, Semua Bisa
Menjadi Programmer Java Case Study, Koleksi Program Tugas Akhir
Dan Skripsi dengan Android, Semua Bisa Menjadi Programmer
Python Basic, dan masih menulis buku lainnya.

Untuk Konsultasi ke:

Email: yuniarsupardi@yahoo.com

Catatan:

Untuk melakukan pemesanan buku, hubungi

Layanan Langsung PT Elex Media Komputindo:
Gramedia Direct
Jl. Palmerah Barat No. 29-37, Jakarta 10270
• Telemarketing/CS: 021-53650110/111
ext: 3901/3902/3292

275