Materi Workshop PHP Jepara
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. Terdapat fitur login (authentication), upload file/gambar
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.
1. Instalasi XAMPP a. Download XAMPPdi
b. Double Klik file instalasi xampp yang sudah didownload 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
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 >
f. Setelah itu akan tampil window bahwa XAMPP telah siap diinstal, klik
Next
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.
1. Jalankan shortcut xampp yang terdapat pada desktop
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 alamatdi browser. Jika ingin menjalankan file/aplikasi yang
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
a. Download Sublime Text 3 di https://www.sublimetext.com/3 sesuai dengan versi
windows masingmasing, windows 64bit atau windowns 32bit
b. Double klik pada file instalasi sublime text
c. Klik next
d. Pilih lokasi untuk instalan sublime
e. Klik install
f. selesai
.
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 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
Dalam pembuatan database kita dapat melalukannya dengan 2 cara, yaitu :
a. Membuat langsung di phpMyAdmin, seperti pada gambar berikut :
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
b. Di dalam Tabel Kategori terdapat field dan tipe data sebagai berikut :
Field Tipe Data Keterangan kategori_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif kategori_nama varchar Varchar :
Digunakan untuk menyimpan data karakter/string dengan ukuran dinamis
c. Di dalam Tabel Anggota terdapat field dan tipe data sebagai berikut :
Field Tipe Data Keterangan anggota_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif anggota_nama varchar Varchar : Digunakan untuk menyimpan data karakter/string dengan ukuran dinamis 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 :
Field Tipe Data Keterangan petugas_id int Integer : Digunakan untuk menyimpan bilangan bulat positif dan negatif petugas_nama varchar Varchar :
Digunakan untuk menyimpan data karakter/string dengan ukuran dinamis petugas_username varchar petugas_password varchar
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 :
Field Tipe Data Keterangan 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
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
● ● ● ●
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. Berikut merupakan contoh tampilan website yang akan kita buat,
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> <meta charset="UTF8"> <title>Form Buku</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container clearfix"> <h1>SI Perpustakaan</h1> <div class="sidebar"> <ul> <li><a href="pinjam_data.html">Peminjaman</a></li> <li><a href="kembail_data.html">Pengembalian</a></li>
<li><a href="kategori_data.html">Data Kategori</a></li> <li><a class="active" href="buku_data.html">Data Buku</a></li> <li><a href="anggota_data.html">Data Anggota</a></li> <li><a href="#" onclick="return confirm('anda yakin akan keluar?')">Logout</a></li> </ul> </div> <div class="content"> <h3>Tambah Data Buku</h3> <form method="post"> <p>Judul</p> <p><input type="text" name="judul"></p> <p>Kategori</p> <p> <select name="kategori"> <option value="1">Fiksi</option> <option value="2">Novel</option> <option value="3">Komputer</option> <option value="4">Musik</option> </select> </p> <p>Deskripsi</p> <p><textarea name="deskripsi"></textarea></p> <p>Jumlah</p> <p><input type="text" name="jumlah"></p> <p>Cover</p> <p><input type="file" name="cover"></p> <p><input type="submit" class="btn btnsubmit" value="Simpan"></p> </form> </div> </div> </body> </html>
Untuk penjelasan dari kode HTML di atas adalah sebagai berikut :
1. HTML
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, id ini 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 :
<div class = "sidebar">
<ul>
<li><a href = "kategori_data.html" > Data Kategori </a></li>
<li><a href = "buku_data.html" > Data Buku </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>
</div>
<div> </div> ,
● ini biasa digunakan dalam pembuatan tata letak atau layout sebuah website, di dalam tag tersebut terdapat atribut class, fungsi dari
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
<ol><li>
membuat membuat list dengan urutan dapat menggunakan kode </li></ol> .
<a href = "#" ></a> ,
● tag tersebut digunakan untuk membuat hyperlink sebuah website, dengan atribut href untuk yang dituju. Seperti contoh
url
<a href = "pinjam_data.html" >Pinjam Data</a>
di atas artinya, Teks Pinjam
Data ketika diklik akan menuju halaman pinjam_data.html.
b. Pembuatan bagian content, di bagian ini kita membuat form input untuk
layout 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 seperti ini
<p>Judul</p><p>Membuat Website</p> maka yang 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 :
● ● ● ●
- {
sizing
100 %;
padding
:
15px;
box
:
:
border
box; } .
sidebar li a
:
hover { background
:
left
:
0;
margin
block; width
0;
} .
sidebar li a { display
:
inline
color
:
:
#FFF;
} Tag a pada HTML, diberi
style dengan menghilangkan garis bawah dan warnanya putih. .
content { width
:
none; color
80 %;
min
height
:
500px;
:
:
#3B5949;
} .
sidebar li a .
active{ background
decoration
color
:
#3B5949;
} Sidebar, ini mengatur format dalam menampilkan sisi sebuah daftar menu atau submenu. Dengan ketentuan lebar 20%, dan rata kiri. Kemudian dalam aturan
“ul”, definisinya tag <li> adalah untuk numberikan list sedangkan tag <ul> untuk bullets list, kedua tag ini harus berdampingan agar bisa menampilkan output list. Pseudo :hover digunakan ketika menyorot elemen, sehingga memberikan interaksi. Sedangkan :active ketika menekan atau klik. a { text
none; padding
style
● ● ●
100 %;
960px;
max
width
:
margin
:
auto;
background
:
:
container { width
border
sans
Untuk membuat tampilan website kita menjadi menarik dan tidak kaku untuk dipandang, maka perlu melakukan styling menggunakan CSS. Berikut merupakan kode CSS yang
digunakan pada tampilan website yang kita buat dengan nama file style.css. Buat folder css