Materi Workshop PHP Jepara

(1)

(2)

BAB 1

PENGANTAR

Bidang Teknologi Informatika sedang digemari oleh banyak kalangan sekarang ini, terutama jurusan rekayasa perangkat lunak. Swasta maupun Pemerintah sedang berlombalomba meningkatkan sistem informasi manajemen di perusahaan mereka. Permintaan akan lulusan IT pun semakin meningkat, bukan hanya dari kuantitas sumber daya manusia tetapi juga kualitas ilmu pengetahuan sumber daya manusia di dunia IT.

PHP Indonesia berkolaborasi dengan MGMP Kudus Jepara Demak mengadakan pelatihan pembuatan website bagi guru SMK IT jurusan rekayasa perangkat lunak di kota Kudus Jepara Demak. Pada pelatihan ini PHP Indonesia akan berbagi tips tentang bagaimana cara membuat website. Tujuan akhir dari pelatihan ini adalah peserta mampu membuat sebuah relasi data, pembuatan sistem mengunggah foto, pembuatan halaman login atau autentikasi, pembuatan sistem yang di dalamnya terdapat create, update, delete, input, proses dan output. Peserta juga diharapkan mampu membedakan kegunaan dari masingmasing teknologi yang digunakan.

Modul ini disusun dengan tekad yang besar demi memajukan kualitas programmer di Indonesia. Modul dengan mengambil studi kasus Sistem Informasi Perpustakaan ini diharapkan bisa menjadi materi dasar untuk berkembang dari Junior Programmer hingga menjadi Expert Programmer.

Modul dibagi menjadi beberapa bagian yaitu yang pertama instalasi XAMPP dan Tools pendukung, pada bagian ini akan dibahas peralatan apa saja yang dibutuhkan dalam pembuatan sebuah website . Kedua adalah database atau basis data, bagian ini berisi penjelasan tentang apa itu basis data dan penerapan basis data dalam suatu Sistem Informasi Perpustakaan. Yang ketiga adalah HTML dan CSS, bagian ini berisi penjelasan singkat tentang apa itu HTML dan CSS, kegunaan HTML dan CSS serta penerapan HTML dan CSS dalam membuat tampilan sebuah website yang lebih interaktif bagi pengguna. Keempat adalah PHP, bagian ini berisi tentang apa itu PHP dan implementasi PHP di dalam sebuah Sistem Informasi Perpustakaan.

STUDI KASUS

Pada studi kasus kali ini akan dibuat sebuah sistem informasi perpustakaan. Sistem Informasi Perpustakaan dipilih karena sistem ini memiliki komponenkomponen yang cukup lengkap namun juga lebih sederhana, sehingga sesuai untuk dijadikan pembelajaran. Komponenkomponen yang dimaksud antara lain:

1. Terdapat pengaplikasian CRUD

2. Terdapat relasi data antar tabel di database

(3)

4. Terdapat pemrosesan data (peminjaman buku, pengembalian buku dan perhitungan denda).

Sistem informasi perpustakaan ini dibuat untuk memudahkan dalam pencarian koleksi buku yang ada, pengelolaan buku dan memudahkan proses transaksi pengembalian dan peminjaman buku.Sistem informasi perpustakaan ini melibatkan anggota dan petugas perpustakaan.

Aktifitas yang ada di sistem ini sebagai berikut : 1. Pendaftaran Anggota

Pengunjung yang belum terdaftar sebagai anggota dapat melakukan pendaftaran dengan mengisi formulir pendaftaran anggota yang terdapat pada sistem.

2. Pengelolaan buku

Petugas dapat melakukan pengelolaan data buku dengan input data buku, edit data buku dan hapus data buku.

3. Peminjaman

Buku yang sudah dikelola oleh petugas perpustakaan dapat dipinjamkan kepada anggota pepustakaan.Anggota perpustakaan adalah pengunjung yang sudah melakukan proses pendaftaran anggota.Input data peminjaman dilakukan oleh petugas perpustakaan.

4. Pengembalian

Buku yang sudah dipinjam oleh anggota input data pengembaliannya dilakukan oleh petugas perpustakaan.Sistem akan memberikan laporan apakah pengembalian tepat waktu atau tidak, jika tidak sistem akan menghitung denda yang harus dibayar oleh anggota yang meminjam buku tersebut.

BAB 2

INSTALASI XAMPP & TOOLS

Dalam membangun sebuah sistem berbasis web kita membutuhkan sebuah aplikasi webserver. Web server inilah yang akan memproses kode program dan mengirim hasilnya ke web browser. Contoh dari aplikasi web server yang sering digunakan antar lain : Apache, Nginx, dan Microsoft IIS . Selain web server, adapun yang kita butuhkan yaitu database. Database disini berperan sebagai tempat penyimpanan data yang telah diproses melalui inputan yang telah ditentukan. Untuk melakukan instalasi web server dan Database maupun tambahan paket yang lain membutuhkan waktu yang relatif lama, untuk saat ini telah ada bundle untuk semua kebutuhan dalam membangun sebuah sistem berbasis server side (web) antara lain : XAMPP, LAMPP, dan WAMPP.

Dalam modul ini kita menggunakan paket web server dari aplikasi Xampp, berikut cara instalasi dan pengunaan nya.

(4)

a. Download XAMPPdi https://www.apachefriends.org/index.html b. Double Klik file instalasi xampp yang sudah didownload

(5)

akan tampil window setup instalasi XAMPP, klik Next untuk proses instalasi c. Setelah itu akan muncul window Select Component. Silahkan pilh komponen apa

saja yang akan ditentukan, lalu Next

(6)

d. Setelah itu muncul windows Installation folder, tentukan pilihan folder untuk menyimpan paket web server. Untuk defaultnya pada windows “C:\Xampp”

e. Selanjutnya muncul window BitNami, langsung saja klik Next >

(7)

f. Setelah itu akan tampil window bahwa XAMPP telah siap diinstal, klik Next

(8)

g. Klik Next, maka akan tampil window proses instalasi

h. Instalasi selesai, klik finish untuk mengakhiri dan membuka XAMPP

i. Cara Start XAMPP

Buka aplikasi xampp.

(9)

2. Klik tombol start pada apache untuk mengaktifkan apache web server 3. Klik tombol start pada Mysql untuk menjalankan MySQL server.

4. Taruh filefile yang sudah dibuat kedalam satu folder dan masukan ke dalam folder htdocs pada folder xampp. Struktur folder xampp :

j. Htdocs

Semua aplikasi yang akan kita buat terletak disini. Untuk mengakses aplikasi, buka alamat http://localhost di browser. Jika ingin menjalankan file/aplikasi yang berada di folder lain, akses melalui http://localhost/nama_folder/nama_file.php Selain paket web server kita membutuhkan tools lain yang digunakan untuk melakukan penulisan codecode dari sistem yang akan kita bangun, antara lain Text Editor dan IDE, untuk Text Editor ada beberapa tools yang bisa kita gunakan antara lain : Notepad++, Sublime Text dan BlueFish. Pada modul ini kita menggunakan tools Text Editor “Sublime Text 3”.

2. Instalasi Text Editor

(10)

b. Double klik pada file instalasi sublime text

c. Klik next

(11)

e. Klik install

f. selesai

.

(12)

BAB 3

DATABASE / BASIS DATA

A. Pengantar

Database atau basis data adalah kumpulan data yang disimpan secara sistematis di dalam komputer yang dapat diolah atau dimanipulasi menggunakan perangkat lunak (program aplikasi) untuk menghasilkan informasi. Pendefinisian basis data meliputi tipe data, struktur data dan juga batasanbatasan data yang akan disimpan. Database merupakan aspek yang sangat penting dalam sebuah sistem informasi dimana basis data merupakan gudang penyimpanan data yang dapat mengorganisasi data, menghindari duplikasi data dan hubungan antar data yang juga dapat di update.

Dalam penggunaan database, kita memerlukan adanya sebuah sistem yang berfungsi untuk mengelola database tersebut. Sehingga muncullah sebuah sistem yang bernama DBMS (Database Management System). Mysql merupakan Database/DBMS yang sering kita dengar, mengingat mysql memiliki banyak kelebihan salah satu nya adalah free dan memiliki komunitas yang banyak.

Di dalam penggunaan database ini pun, kita memerlukan sebuah tools atau alat, yang berfungsi untuk membantu kita mengolah database tersebut. Salah satu tools yang sering digunakan adalah phpmyadmin. Tools ini berbasis web, sehingga memudahkan pengembang tanpa harus menginstall aplikasi. Apabila anda sudah menginstall XAMPP dan melakukan instalasi sesuai pada Bab 2, maka tools phpmyadmin akan secara otomatis terinstall. Untuk mengaksesnya pastikan apache dan mysql sudah menyala, lalu masukkan URL http://localhost/phpmyadmin di browser. Apabila anda baru pertama kali mengakses, maka secara otomatis akan masuk ke halaman dashboard. Untuk contoh penggunaannya, silahkan lanjutkan mengikuti modul ini.

B. Pembuatan Struktur Database

Dalam pembuatan struktur database halhal yang perlu diperhatikan sebagai berikut :

1. Membuat Database

(13)

b. Menggunakan Command Prompt

Selain menggunakan tools seperti phpmyadmin, kita juga bisa menggunakan command prompt untuk mengakses MySQL. Caranya adalah menjalankan perintah berikut di command prompt :

1. cd C:\xampp\mysql\bin (untuk pindah ke direktori tempat mysql

berada)

2. mysql u root (untuk login/masuk ke MySQL sebagai user root)

3. create database db_perpus; (untuk membuat database baru

dengan nama db_perpus) 2. Membuat Tabel

Tabel adalah daftar kumpulan dari beberapa data yang diatur dengan field. Untuk membuat tabel, pilih dulu database yang akan kita gunakan dengan mengklik daftar database yang ada di sebelah kiri, kemudian isi nama tabel dan jumlah kolom/field yang ingin dibuat,kemudian klik tombol create.

Untuk isi dari tiap tabel, kolom apa saja yang dibutuhkan, ada pada pembahasan selanjutnya.

3. Membuat Field

a. Di dalam Tabel Buku terdapat field dan tipe data sebagai berikut :

Field Tipe Data Keterangan

buku_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif buku_judul varchar Varchar : Digunakan untuk menyimpan

data karakter/string dengan ukuran dinamis

buku_kategori int

buku_deskripsi text Text : Digunakan untuk menyimpan data text

buku_jumlah int

buku_cover varchar

(14)

b. Di dalam Tabel Kategori terdapat field dan tipe data sebagai berikut :

kategori_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif kategori_nama varchar Varchar : Digunakan untuk menyimpan

c. Di dalam Tabel Anggota terdapat field dan tipe data sebagai berikut :

anggota_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif anggota_nama varchar Varchar : Digunakan untuk menyimpan

anggota_alamat text Text : Digunakan untuk menyimpan data text

anggota_jk enum(L, P) Enum : Digunakan untuk menyimpan data enumerasi (kumpulan data)

anggota_telp varchar

d. Didalam Tabel Petugas terdapat field dan tipe data sebagai berikut :

petugas_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif petugas_nama varchar Varchar : Digunakan untuk menyimpan

(15)

e. Di dalam Tabel Pinjam terdapat field dan tipe data sebagai berikut :

Field Tipe

Data Keterangan

pinjam_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif

pinjam_buku_id int

pinjam_anggota_id int

pinjam_tgl_pinjam date Date : Digunakan untuk menyimpan data tanggal dengan format YY:MM:DD pinjam_tgl_jatuh_tempo date

f. Di dalam Tabel Kembali terdapat field dan tipe data sebagai berikut :

kembali_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif kembali_pinjam_id int

kembali_tgl_kembali date Date : Digunakan untuk menyimpan data tanggal dengan format YY:MM:DD kembali_denda double Double : Digunakan untuk menyimpan

data yang berupa bilangan pecahan positif dan negatif

(16)

C. Penjelasan CREATE, INSERT, UPDATE, DELETE dan SELECT 1. SELECT

Perintah untuk mengambil data yang terdapat di table.

SELECT field_yang_ingin_ditampilkan FROM nama_tabel WHERE kondisi; 2. INSERT

Perintah untuk memasukan data kedalam tabel di dalam database.

INSERT INTO nama_table VALUES (isi_field_1, isi_field_2, isi_field_3, dst ... );

atau

INSERT INTO nama_table (nama_field_1, nama_field_2, nama_field_3, dst ...)

VALUES (isi_field_1, isi_field_2, isi_field_3, dst ... ); 3. UPDATE

Perintah untuk memperbarui data di dalam table.

UPDATE nama_table SET nama_field=data_baru WHERE

nama_field_id=id_data; 4. DELETE

Perintah untuk menghapus data di dalam table.

DELETE FROM nama_table WHERE kondisi; D. Referensi

● http://dev.mysql.com/doc/refman/5.7/en/ ● http://www.w3schools.com/sql/default.asp ● http://www.heidisql.com/

● https://www.mysql.com/products/workbench/

(17)

BAB 4

HTML, CSS & JavaScript

HTML

Banyak orang yang bergelut dalam bidang web development awalnya tidak melewati pembelajaran HTML terlebih dahulu, sebagian besar menggunakan CMS ( Content Management System), ataupun karena kemudahan penggunaan software seperti Adobe Dreamweaver. Sehingga dari sinilah orang menyangka untuk bisa membuat website, atau mahir dalam web development itu harus menggunakan Adobe Dreamweaver, jadi untuk apa harus repotrepot belajar HTML? Sebetulnya pernyataan ini tidak 100% benar, dan juga tidak 100% salah.

Perlu diketahui Hypertext Markup Language (HTML) adalah bahasa markup yang umum digunakan untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah bahasa pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa markup atau penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk menentukan format atau style dari teks yang di tandai. HTML dibuat oleh Tim BernersLee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.

CSS

Cascading Style Sheet (CSS) merupakan salah satu bahasa markup yang digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur. CSS dapat digunakan untuk mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

Dalam modul ini, kami memberi contoh kasus secara langsung yang mana harapannya dapat mempermudah pemahaman para pembaca.

(18)

Gambar di atas menunjukkan : kiri sudah dilakukan styling dengan menggunakan CSS, sedangankan yang kanan belum dilakukan styling. Untuk membuat dokumen HTML, kita dapat membuatnya dengan teks editor yang sudah terpasang pada BAB Instalasi XAMPP dan Tools. Cukup membuat dokumen baru dan simpan dengan ekstensi HTML. Sedangkan untuk membuat stlyle atau file CSS, cukup simpan dengan ekstensi CSS.

Berikut merupakan kode HTML untuk tampilan di atas, ketik dan simpan dengan nama buku_form.html dan letakkan pada folder project kita di htdocs

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

<body>

<div class="container clearfix"> <h1>SI Perpustakaan</h1>

<li><a href="pinjam_data.html">Peminjaman</a></li> <li><a

(19)

<li><a href="kategori_data.html">Data

<option value="1">Fiksi</option>

<option value="2">Novel</option>

<option value="3">Komputer</option>

<option value="4">Musik</option>

</select>

(20)

a. Pembuatan Header website :

Untuk membuat teks format judul bisa menggunakan tag heading. Tag heading terdiri dari beberapa level, yaitu h1 sampai dengan h6 yang mana perbedaan terletak pada ukuran hurufnya yang semakin kecil. Di dalam tag div di atas terdapat atribut id,idini digunakan untuk melakukan styling pada css dan bersifat unik atau satu saja dan dapat digunakan juga untuk memodifikasi DOM (Document Object Model) dengan JavaScript. b. Pembuatan menu pada sidebar sebelah kiri :

<li><a href= "kategori_data.html">Data Kategori</a></li>

<li><a href= "anggota_data.html">Data Anggota</a></li>

<li><a href= "pinjam_data.html">Peminjaman</a></li>

<li><a href= "kembali_data.html">Pengembalian</a></li>

<li><a href="#" onclick="return confirm('anda yakin akan

keluar?')">Logout</a></li> </ul>

(21)

class, hampir sama dengan id, hanya saja di sini dapat menggunakannya beberapa kali. Seperti contoh class="btn btnsubmit active".

● <ul><li> </li></ul>, ini digunakan untuk membuat list tanpa urutan atau dengan kata lain bullet seperti pada Ms. Word . Sedangkan untuk membuat membuat list dengan urutan dapat menggunakan kode <ol><li> </li></ol> .

● <a href="#"></a>, tag tersebut digunakan untuk membuat hyperlink sebuah website, dengan atribut href untuk url yang dituju. Seperti contoh di atas <a href="pinjam_data.html">Pinjam Data</a> artinya, Teks Pinjam Data ketika diklik akan menuju halaman pinjam_data.html.

b. Pembuatan layout bagian content , di bagian ini kita membuat form input untuk data buku, yang mana dalam form tersebut akan memasukkan data ke tabel buku pada database yang sebelumnya sudah dibuat.

● <p></p> digunakan untuk membuat paragraf, sehingga ketika ada kode

(22)

terjadi adalah, teks “Judul” berada di atas “Membuat Website” dengan kata lain setelah teks “Judul” dilakukan enter.

● <form></form> pendefinisian form menggunakan tag tersebut.

● <input type=”text” name=”value”> sudah jelas ini adalah

inputan teks dengan nama value, sama seperti tag HTML yang lain, kita juga dapat menambahkan atribut pada tag input tersebut. Untuk contoh lain pada potongan kode di atas, ada <input type=”file”> untuk membuat inputan berupa file atau upload file dan <input

type=”submit”> untuk membuat tombol submit.

● <select><option></option></select> tag tersebut digunakan

untuk membuat drowdownlist..

● <textarea></textarea> akan membuat inputan berupa teks dengan

multibaris.

c. Untuk referensi HTML yang bisa anda gunakan sebagai berikut : ● http://www.w3schools.com/html/default.asp

(23)

● http://www.tutorialspoint.com/html/index.htm ● http://www.tutorialspoint.com/html5/index.htm

● https://developer.mozilla.org/enUS/docs/Web/HTML

Untuk membuat tampilan website kita menjadi menarik dan tidak kaku untuk dipandang, adalah sansserif, dengan lebar bidang font 100pixel digunakan secara kesluruhan dalam dokumen..

.container {

width: 960px; dengan sedikit bayangan 5px. Warna 42775A

:

.sidebar ul {

liststyle: none;

paddingleft: 0;

margin: 0;

}

.sidebar li a {

display: inlineblock;

Kemudian dalam aturan “ul”, definisinya tag <li> adalah untuk numberikan list sedangkan

(24)

float: right; belakang #FFF (white)

Warna #2c3e50 :

Class .btn akan mengatur format tombol atau biasa disebut “button”.

(25)

}

Untuk cara pemanggilannya pada buku_form.html, cukup menggunakan kode <link

rel="stylesheet" href="css/style.css">. Kode tersebut sudah ada dalam

buku_form.html yang dibuat sebelumnya, yang mana nilai dari atribut href merupakan path untuk file css yg dibuat. Cara melakukan styling dengan CSS ada 3 cara yaitu,

1. Dengan cara external, artinya memanggil file dengan ekstensi CSS yang terpisah dengan dokumen HTML yang dibuat, seperti contoh yang anda buat.

2. Dengan cara internal, dokumen HTML yang dibuat terdapat kode CSS menggunakan tag

3. Dengan cara inline, cara ini menuliskan kode css secara langsung pada elemen atau tag, sehingga akan terlihat seperti ini misalnya <input type”submit” name=”login” class=”btn” style=”backgroundcolor:red”>.

Referensi Belajar untuk CSS :

● http://www.w3schools.com/css/default.asp ● http://www.w3schools.com/cssref/

● https://developer.mozilla.org/enUS/docs/Web/CSS/Reference ● http://tympanus.net/codrops/css_reference/

● http://reference.sitepoint.com/css

● http://www.blooberry.com/indexdot/css/propindex/all.htm ● http://www.htmldog.com/references/css/properties/ ● http://www.htmlhelp.com/reference/css/

● http://www.htmlhelp.com/reference/css/properties.html ● http://www.colorhexa.com/

JAVASCRIPT

JavaScript adalah bahasa pemrograman yang biasanya digunakan untuk mengubah

halaman web statis menjadi halaman dinamis dan interaktif. Javascript diperkenalkan pertama

kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang

berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu

bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru

dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat

menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara

Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape

memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan

(26)

untuk web. Bahasa ini merupakan bahasa pemrograman untuk memberikan kemampuan

tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi

user, yang artinya di sisi browser bukan di sisi server web.

Javascript berbeda dengan Java.

Perbedaan dari Javascript selain di atas, antara lain:

●

_{JavaScript sendiri merupakan bahasa yang mudah dipahami, karena memiliki}

kemiripan dengan konsep bahasa pemrograman visual, maupun Java ataupun C.

●

JavaScript salah satu bahasa yang "case sensitive" artinya membedakan penamaan

variabel dan fungsi yang menggunakan huruf besar dan huruf kecil. Seperti bahasa

Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma

(;).

Dalam penggunaan untuk web yang dibuat di sini, hanya menggunakan confirm dialog untuk

menayakan apakah ingin logout atau tidak dengan cara menggunakan atribut onclick pada

menu logout berikut potongan kode tersebut

<li><a href="#" onclick="return confirm('anda yakin akan keluar?')">Logout</a></li>

Jika diklik, maka akan keluar kota

(27)

Sehingga menjadi lebih interaktif dengan pengguna, anda dapat belajar JavaScript sendiri

dengan mudah, berikut merupakan website yang bisa anda gunakan untuk belajar JavaScript.

● http://www.w3schools.com/js/default.asp ● http://www.w3schools.com/jsref/

● https://developer.mozilla.org/enUS/Learn/Getting_started_with_the_web/JavaScript_bas ics

● https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference ● http://www.javascriptkit.com/javatutors/

● http://www.tutorialspoint.com/javascript/ ● http://www.echoecho.com/javascript.htm ● http://htmldog.com/guides/javascript/

KODE LENGKAP

anggota_data.html

<title>Daftar Anggota</title>

<body>

<h1>SI Perpustakaan</h1>

<ul>

<li><a href= "kembail_data.html">Pengembalian</a></li>

<li><a class="active" href="anggota_data.html">Data Anggota</a></li>

<h1>Daftar Anggota</h1>

<a href="anggota_form.html"><button class="btn btntambah">Tambah

Data</button></a>

(28)

<tr>

<td>Jarjit Singh</td>

<td>Jl. Timoho 67</td>

<td>Lakilaki</td>

<td>

<td>Lakilaki</td>

<td>

<td>Lakilaki</td>

<td>

<td>Lakilaki</td>

<td>

</table>

</div>

</div> </body> </html>

anggota_form.html

(29)

<body>

<ul>

<li><a chref= "pinjam_data.html">Peminjaman</a></li>

<li><a class="active" href="anggota_data.html">Data Anggota</a></li>

<h3>Tambah Data Anggota</h3>

<p>Alamat</p>

<p>Jenis Kelamin</p>

<p>

<option value= "L">Lakilaki</option>

<option value= "P">Perempuan</option>

</select>

</p> </html>

buku_data.html

<body>

<ul>

(30)

<h1>Daftar Buku</h1>

<a href="buku_form.html"><button class="btn btntambah">Tambah

Data</button></a>

</div>

<tr>

<th>Judul</th>

<th>Kategori</th>

<th>Deskripsi</th>

<th>Jumlah</th>

<td>Komputer</td>

<td>Belajar HTML...</td>

<td>Komputer</td>

<td>Komputer</td>

(31)

<td>Komputer</td>

<td>Komputer</td>

<td>Komputer</td>

</table>

</div>

buku_form.html

<body>

<ul>

(32)

<h3>Tambah Data Buku</h3>

</select>

</p>

<p>Deskripsi</p>

</html>

kategori_data.html

<title>Daftar Kategori</title>

<body>

<ul>

<li><a class="active" href="kategori_data.html">Data Kategori</a></li>

<li><a href= "petugas_data.html">Data Petugas</a></li>

(33)

keluar?')">Logout</a></li>

</ul>

</div>

<h1>Daftar Kategori</h1>

<a href="kategori_form.html"><button class="btn btntambah">Tambah

Data</button></a>

</div>

</table>

</div>

kategori_form.html

(34)

<title>Form Kategori</title>

<body>

<ul>

<li><a class="active" href="kategori_data.html">Data Kategori</a></li>

<h3>Tambah Data Kategori</h3>

pinjam_data.html

<title>Daftar Peminjaman</title>

<body>

<ul>

<li><a class="active" href="pinjam_data.html">Peminjaman</a></li>

</ul>

</div>

<h1>Daftar Peminjaman</h1>

(35)

Data</button></a>

<th>Tgl Pinjam</th>

<th>Tgl Jatuh Tempo</th>

<th>Tgl Kembali</th>

<th>Status</th>

<th width= "20%">Pilihan</th>

</tr>

<tr>

<td>jarjit</td>

<td><a href="kembali_form.html" class="link" title="klik untuk proses

pengembalian">pinjam</a></td>

<td>

<td>jarjit</td>

<td><a href="kembali_form.html" class="link" title="klik untuk proses

pengembalian">pinjam</a></td>

<td>

<td>jarjit</td>

<td>jarjit</td>

(36)

</table>

</div>

pinjam_form.html

<title>Form Peminjaman</title>

<body>

<ul>

<li><a class="active" href="pinjam_data.html">Peminjaman</a></li>

<li><a href= "petugas_data.html">Data Petugas</a></li>

<h3>Tambah Data Peminjaman</h3>

</select>

</p>

</select>

(37)

<p>Tanggal Pinjam</p>

<p>Tanggal Jatuh Tempo</p>

kembali_data.html

<title>Daftar Pengembalian</title>

<body>

<ul>

<li><a class="active" href="kembail_data.html">Pengembalian</a></li>

</ul>

</div>

<h1>Daftar Pengembalian</h1>

<a href="kembali_form.html"><button class="btn btntambah">Tambah

Data</button></a>

</div>

<tr>

<th>Tgl Pinjam</th>

<th>Tgl Jatuh Tempo</th>

<th>Tgl Kembali</th>

<th width= "20%">Pilihan</th>

</tr>

<tr>

<td>jarjit</td>

(38)

<td>

<td>jarjit</td>

<td>jarjit</td>

<td>jarjit</td>

</table>

</div>

kembali_form.html

<title>Form Pengembalian</title>

(39)

</head> <body>

<ul>

<li><a class="active" href="kembail_data.html">Pengembalian</a></li>

<h3>Tambah Data Pengembalian</h3>

<p>Tanggal Pinjam</p>

<p>Tanggal Jatuh Tempo</p>

<p><input type="date" name ="tgl_jatuh_tempo" value="20160312"

disabled></p>

<p>Tanggal Kembali</p>

login.html

<title>Login SI Perpus</title>

(40)

<body>

<td>Username</td> <td>

<input type="text" name="username" id="username"

required/>

</td> </tr>

<tr>

<td>Password</td> <td>

<input type="password" name="password" id="password"

required/>

</td> </html>

.container {

width: 960px;

.sidebar ul {

liststyle: none;

paddingleft: 0;

(41)

}

.sidebar li a {

(42)

(43)

backgroundcolor: #27ae60; }

.btntambahdiv{

textalign: right;

marginright: 20px;

}

.btntambah:hover {

backgroundcolor: #2ecc71;

}

.btnedit {

backgroundcolor: #2980b9;

}

.btnedit:hover{

backgroundcolor: #5DA7D8;

}

.btnhapus {

backgroundcolor: #c0392b;

}

.btnhapus:hover {

backgroundcolor: #CE5A4E;

}

(44)

BAB 5

PHP

A. Pengantar

PHP (PHP: Hypertext Preprocessor) adalah bahasa scripting yang dijalankan pada Server Side . Artinya semua kode yang kita tulis akan sepenuhnya dijalankan pada Server , sedangkan yang dikirim ke browser hanya hasilnya saja.

Dalam PHP setiap nama variable diawali tanda dolar ($). Misanya nama variable a dalam PHP ditulis dengan $a. Sedangkan perintah untuk menampilkan data menggunakan perintah echo, Misalnya echo “Hello World”;.

B. Percabangan / Kondisional

Dalam aktifitas kita biasa menggunakan pernyataan kondisional yang digunakan untuk menjalankan perintah yang berbeda berdasarkan kondisi yang ditentukan.

Salah satu contoh percabangan/kondisional dalam PHP yaitu IF. Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Cara penulisannya adalah sebagai berikut:

If (syarat)

{ statement }

Atau:

If (syarat)

{ statement } Else

{ statement lain }

C. Koneksi Database

Pada umumnya, aplikasi yang kita bangun menggunakan database sebagai media penyimpanan dan managemen data. Ada beberapa DBMS (Database Managemen System) yang sering digunakan, diantaranya: MySQL, postgreSQL, SQLite, dan masih banyak lagi yang lainya. DBMS inilah yang akan melakukan operasi managemen database kita. Untuk mengelola database dari php kita perlu menghubungkan antara php dengan DBMS yg kita gunakan.

Sebagai contoh, untuk membuat koneksi dengan MySQL kita menggunakan file

connection.php

<?php

(45)

$database = "db_perpus";

$db = mysqli_connect($host, $user, $pass, $database) or die("gagal

koneksi ke database");

Kita sudah membuat koneksi ke database mysql dengan memanggil function

mysqli_connect() dengan beberapa parameter yang dibutuhkan, dan jika gagal, maka kita

munculkan pesan “gagal koneksi ke database” dan keluar dari program dengan memanggil function die(). Kemudian koneksi tersebut kita simpan ke variabel $db. Dengan koneksi yang kita buat diatas, kita bisa mengelola data (create, read, update, delete) yang ada di database dengan script php.

1) Read (SELECT)

Berikut adalah file modul_buku/proseslistbuku.php

<?php

session_start();

// ... jika belum login, alihkan ke halaman login if (! isset($_SESSION['user'])) {

header('Location: ../login.php'); exit();

}

include '../connection.php';

$query = "SELECT buku.*, kategori.kategori_nama FROM buku

JOIN kategori

ON buku.kategori_id = kategori.kategori_id";

$hasil = mysqli_query($db, $query); mysqli_connect_error();

// ... menampung semua data kategori $data_buku = array();

// ... tiap baris dari hasil query dikumpulkan ke $data_buku while ($row = mysqli_fetch_assoc($hasil)) {

$data_buku[] = $row; }

Berikut penjelasannya:

Pertama pastikan kita sudah memanggil koneksi database, yang ada di file

(46)

Kemudian siapkan query yang akan digunakan untuk mengambil semua data buku, dan eksekusi query tersebut. Perhatikan disini bahwa variable $db berasal dari file

connection.php yang kita panggil di awal. Lalu hasil eksekusi query tersebut kita

simpan ke variabel $hasil.

$query = "SELECT buku.*, kategori.kategori_nama FROM buku

JOIN kategori

ON buku.kategori_id = kategori.kategori_id";

Hasil pemanggilan function mysqli_query() untuk query select adalah kumpulan data sesuai dengan query yang kita masukan, misalnya query diatas akan menghasilkan tiap baris data yang ada di tabel buku beserta kategori masingmasing buku dalam bentuk mysql_result. Tapi, untuk menggunakanya sebagai array di php, kita masih perlu mengambil tiap baris data tersebut, dengan cara melakukan perulangan ke variabel $hasil dan memanggil function mysqli_fetch_assoc().

// ... menampung semua data kategori $data_buku = array();

// ... tiap baris dari hasil query dikumpulkan ke $data_buku while ($row = mysqli_fetch_assoc($hasil)) {

$data_buku[] = $row; }

Kemudian $data_buku[] = $row; maksudnya kita menyisipkan value $row ke array $data_buku. Jadi $data_buku sekarang menampung semua data dari hasil query diatas.

Catatan: Untuk menampilkan data tersebut di html, nanti akan kita bahas di bagian selanjutnya.

2) Create (INSERT)

adalah file modul_buku/prosestambahbuku.php

$judul = $_POST['judul'];

(47)

$jumlah = $_POST['jumlah'];

$query = "INSERT INTO buku (buku_judul, kategori_id,

buku_deskripsi, buku_jumlah, buku_cover)

VALUES ('$judul', $kategori, '$deskripsi', $jumlah,

null)";

$hasil = mysqli_query($db, $query); if ($hasil == true) {

header('Location: listbuku.php'); } else {

header('Location: tambahbuku.php'); }

Penjelasan gambar di atas:

Pertama pastikan kita sudah memanggil koneksi database, yang ada di file

connection.php

Lalu siapkan value untuk masingmasing field atau kolom di tabel buku

$judul = $_POST['judul'];

$kategori = $_POST['kategori']; $deskripsi = $_POST['deskripsi'];

$jumlah = $_POST['jumlah'];

Kemudian siapkan query yang akan digunakan untuk proses insert ke tabel, dan eksekusi query tersebut. Variable $db disini juga berasal dari file connection.php yang kita panggil di awal.

$query = "INSERT INTO buku (buku_judul, kategori_id, buku_deskripsi, buku_jumlah, buku_cover)

VALUES ('$judul', $kategori, '$deskripsi', $jumlah, null)"; $hasil = mysqli_query($db, $query);

Hasil dari pemanggilan function mysqli_query() untuk query insert, update dan delete adalah berupa boolean , bisa true atau false. Jika query sukses (true) maka kita redirect ke halaman listbuku.php, jika gagal maka kita redirect ke tambahbuku.php

(48)

3) Update

Untuk proses update dan delete tidak terlalu berbeda dengan proses insert. Berikut ini adalah file modul_buku/proseseditbuku.php

include '../connection.php'; $id_buku = $_POST['id_buku']; $judul = $_POST['judul'];

$kategori = $_POST['kategori']; $deskripsi = $_POST['deskripsi']; $jumlah = $_POST['jumlah'];

// $cover = $_POST['cover'];

$query = "UPDATE buku

SET buku_judul = '$judul', kategori_id = $kategori,

buku_deskripsi = '$deskripsi', buku_jumlah = $jumlah,

buku_cover = null

WHERE buku_id = $id_buku";

$hasil = mysqli_query($db, $query); // var_dump(mysqli_error($db)); if ($hasil == true) {

4) Delete

Untuk proses delete, berikut file modul_buku/prosesdelete.php

$id_buku = $_GET['id_buku'];

$query = "DELETE FROM buku WHERE buku_id = $id_buku"; $hasil = mysqli_query($db, $query);

if ($hasil == true) {