Pembuatan Aplikasi Berbasis Web
Modul Pembuatan Aplikasi Berbasis Web “Perpustakaan”
A. Gambaran Aplikasi
Aplikasi Perpustakaan adalah aplikasi yang terinstall pada suatu
webserver di suatu lembaga (sekolah, kampus, kantor) yang berfungsi
melayani kebutuhan peminjaman buku bagi para anggotanya. Aplikasi ini
dioperasikan oleh petugas perpustakaan, dan menggunakan database seperti
pada diagram di bawah.
Software yang dibutuhkan antara lain :
- Web Server, Database Server, dan Database Manager (dapat menggunakan Xampp, Wamp, dll, atau install satu-persatu)
- Software desain web (Corel Draw, Photoshop, Gimp, dll)
- Software web development (Dreamweaver, Notepadd++, Sublime, dll)
B. Database
Rancangan database dari aplikasi ini telah disediakan oleh pemberi tugas, dengan perincian sebagai berikut :
Dapat dilihat dari diagram di atas, database tersebut sebenarnya
masih belum sempurna. Misalnya, untuk memasang fitur security dan login,
maka pada tabel “petugas” perlu ditambahkan field “password”. Field ini
akan kita tambahkan sendiri nanti (lihat video tutorialnya).
C. Tahapan Pembuatan
Tahapan pembuatan aplikasi dapat diuraikan sebagai berikut :
1. Pembuatan database (PHPMyAdmin)
2. Desain tampilan aplikasi (Photoshop)
3. Slicing terhadap desain (Dreamweaver)
4. Integrasi program PHP (Dreamweaver)
D.1. Pembuatan database
Untuk pembuatan database, dapat menggunakan :
- Software database manager, baik yang berupa aplikasi desktop (seperti Navicat) maupun aplikasi web (seperti PHPMyAdmin)
- Langsung ke database server melalui MySQL console (command prompt)
Cara yang akan kita gunakan dalam modul ini (dan juga merupakan cara
yang sering dipakai pada umumnya) adalah dengan menggunakan PHPMyAdmin.
D.2. Desain tampilan aplikasi
Sebelum mendesain, biasanya ada tahapan-tahapan analisa dan konsep
yang terlebih dahulu dilakukan. Tahapan-tahapan tersebut meliputi,
konsep flowchart, activity diagram, analisa kebutuhan user, dan lain
sebagainya. Tetapi karena media yang terbatas, tahapan-tahapan tersebut
tidak kita bahas. Jika ingin lebih memperdalamnya lagi, referensinya
dapat dicari di internet.
Untuk menyederhanakan pembahasan, kita rancang aplikasi web ini memiliki halaman-halaman berikut :
- Halaman Login
- Halaman Peminjaman Buku
- Halaman Pengembalian Buku
- Halaman Administrasi – Pengelolaan Daftar Penerbit
- Halaman Administrasi – Pengelolaan Daftar Kategori
- Halaman Administrasi – Pengelolaan Daftar Buku
- Halaman Administrasi – Pengelolaan Daftar Peminjam
- Halaman Administrasi – Pengelolaan Daftar Petugas
- Halaman Administrasi – Laporan (Report)
D.3. Slicing terhadap desain
Setelah desain di Photoshop selesai, selanjutnya pelu dilakukan
proses slicing untuk memetakan areal desain menjadi halaman web. Slicing
dapat dilakukan langsung di dalam Photoshop, tetapi lebih baik
dilakukan secara manual dengan menggunakan Dreamweaver untuk mendapatkan
hasil yang efektif, yaitu halaman web yang tidak bloated (menggunakan
gambar secara berlebihan). Dengan cara manual kita dapat mengambil
gambar secara partial (sebagian kecil saja) dari desain aslinya tetapi
diatur supaya tampil penuh di dalam halaman web yang dihasilkan.
D.4. Integrasi program PHP
Tahapan slicing menghasilkan halaman web statis, yaitu web yang belum
dapat menampilkan informasi berdasarkan input tertentu. Untuk itu perlu
diintegrasikan rutin PHP di dalam web tersebut agar dapat menampilkan
data yang dinamis, dan juga terhubung dengan database.
Sylllabus / Outline Tahapan Pembuatan (per Video)
1. Pembuatan database (PHPMyAdmin)
Video 1.1 Menjelaskan cara pembuatan database Perpustakaan, dan
beberapa tabel di dalamnya, beserta cara penentuan type field dan
fungsinya.
Video 1.2 Menjelaskan cara membuat sisa tabel yang belum dibuat, dan
cara menghubungkan Foreign Key, serta cara menampilkan relasinya dalam
bentuk diagram.
2. Desain tampilan aplikasi (Photoshop)
Video 2.1 Menjelaskan cara men-setting dokumen Photoshop untuk desain web, dan cara mendesain bagian headernya.
Video 2.2 Menjelaskan cara merancang logo (menggunakan Flash)
menggunakan tools-tools yang ada, dan cara mengexportnya untuk dijadikan
logo dalam desain Photoshop.
Video 2.3 Menjelaskan sifat dan cara membuat menu web di dalam
Photoshop, dan cara memencari dan menggunakan symbol-symbol untuk
dipergunakan dalam mendesain web.
Video 2.4 Menjelaskan cara mendesain bagian konten di dalam web, seperti misalnya bagian judul, tabel, dan form.
Video 2.5 Menjelaskan maksud, tujuan dan cara mendesain bagian footer di dalam web.
Video 2.6 Menunjukkan cara mendesain halaman yang berbeda, yaitu Halaman Peminjaman.
Isi video menunjukkan cara mendesain bagian tabel yang dari tampilan
desainnya dapat menunjukkan bahwa isi tabel tersebut berupa data dinamis
yang berasal dari database.
Video 2.7 Melanjutkan desain halaman Peminjaman, dan menunjukkan cara mendesain halaman yang berisi banyak form, dan tabel.
3. Slicing terhadap desain (Dreamweaver)
BAGIAN A : Membuat Template Halaman
Video 3.A.1 Menunjukkan cara mempersiapkan Dreamweaver sebelum memulai project pembuatan website, yaitu setting Site Manager.
Video 3.A.2 Menjelaskan cara membuat dua file utama yaitu file index dan file css, dan cara menghubungkan keduanya.
Video 3.A.3 Menjelaskan cara menterjemahkan desain Photoshop menjadi
sebuah halaman web, dimulai dari bagian headernya, dan diuji dengan
ditampilkan dalam browser.
Video 3.A.4 Menunjukkan cara mengisi bagian header, yang meliputi tulisan dan gambar.
Video 3.A.5 Menjelaskan cara membuat menu dan link.
Video 3.A.6 Menjelaskan cara membuat bagian konten, dimana hanya
kerangkanya saja yang dibuatkan. Karena isinya nanti akan berbeda-beda
antara satu halaman web dengan yang lainnya.
Video 3.A.7 Menjelaskan cara membuat bagian footer.
Video 3.A.8 Menjelaskan cara memperlakukan halaman web yang sudah
sempurna kerangkanya untuk dijadikan sebagai template desain. Gunanya
adalah untuk mempermudah langkah membuat halaman-halaman berikutnya
nanti.
BAGIAN B : Membuat Konten Template
Video 3.B.1 ? Menjelaskan cara membuat tabel untuk login berikut dengan
cara mempersiapkan css-nya, supaya tabel-tabel yang modelnya sama
nantinya dapat diciptakan ulang dengan otomatis.
Video 3.B.2 ? Menjelaskan cara membuat menu utama dan menjadikannya
sebagai snippets, supaya nantinya menu-menu seperti ini dapat dipasang
pada halaman-halaman lain dengan otomatis namun tetap sesuai antara isi
menu dan isi halaman.
Video 3.B.3 ? Menjelaskan cara membuat tabel untuk data peminjam dengan memanfaatkan css tabel yang telah dibuatkan sebelumnya.
Video 3.B.4 ? Menunjukkan cara membuat bentuk-bentuk tabel lain yang
berbeda dari sebelumnya, untuk keperluan menampilkan panel peminjaman
dan data buku.
Video 3.B.5 Memperbaiki css dengan cara menguji tampilan web pada
berbagai jenis browser, yaitu Firefox, Internet Explorer, dan Chrome.
Video 3.B.6 Menunjukkan cara membuat halaman khusus untuk menu
Administrasi dimana nantinya halaman ini sebagai pusat maintenance
database.
Video 3.B.7 Melanjutkan penyempurnaan halaman Administrasi supaya secure namun tetap nyaman diakses.
Video 3.B.8 Memasukkan menu-menu Administrasi sebagai snippets yang kedua.
4. Integrasi program PHP (Dreamweaver)
Video 4.1 Menjelaskan cara menggunakan fasilitas Dreamweaver untuk
membangun koneksi antara halaman web dengan database server, dan
mempraktekkannya langsung dengan membuat login user, juga dari fasilitas
Dreamwever. Lalu menunjukkan cara modifikasi agar dapat menentukan
sendiri cara pemeriksaan passwordnya.
Video 4.2 Menunjukkan cara memasang security halaman dengan menggunakan fasilitas dari Dreamweaver, yaitu Restict Access.
Video 4.3 Menjelaskan cara membuat halaman admin untuk menambah
penerbit baru melalui fasilitas Dreamweaver, yaitu Insert Record. Lalu
mengujinya di browser dan mengeceknya dalam database.
Video 4.4 Menjelaskan cara menampilkan Daftar Penerbit dengan
menggunakan fasilitas Dreamweaver, yaitu Recordset, Repeat Region dan
Dynamic Text.
Video 4.5 Menjelaskan cara membuat halaman Edit Penerbit dengan
menggunakan fasilitas dinamis dari Dreamweaver, dan menunjukkan cara
pemakaian URL Parameter String sebagai wadah komunikasi antara halaman
Daftar dan halaman Edit.
Video 4.6 Memanfaatkan menu Logout dari Dreamweaver dan memodifikasinya untuk memudahkan akses dari menu yang telah kita buat.
Video 4.7 Menunjukkan cara membuat halaman Delete Penerbit, juga dengan
memanfaatkan menu otomatis yang telah disediakan Dreamweaver.
Video 4.8 Menunjukkan cara menambahkan paging (navigasi data) ke
halaman Daftar Penerbit, dengan menggunakan fasilitas paging dari
Dreamweaver.
Video 4.9 Menjelaskan cara membuat halaman admin untuk menambah
kategori buku dengan memanfaatkan fasilitas Insert Record dari
Dreamweaver.
Video 4.10 Menjelaskan cara membuat daftar kategori dengan menggunakan
Recordset, Repeat Region, dan Dynamic Text dari Dreamweaver.
Video 4.11 Menjelaskan cara membuat halaman admin untuk mengedit
kategori buku dengan menggunakan fasilitas dinamis dari Dreamweaver.
Video 4.12 Menjelaskan catatan khusus mengenai kekhususan Primary Key dan cara penananganannya pada form Edit.
Video 4.13 Menjelaskan cara membuat halaman Delete Kategori disertai konfirmasi terlebih dahulu.
Video 4.14 Menjelaskan cara membuat form Tambah Buku dengan menyertakan
dua Recordset yang terhubung dengan database Penerbit dan database
Kategori, masing-masing dalam elemen Select/List yang dinamis.
Video 4.15 Menjelaskan cara membuat tabel dinamis Daftar Buku dengan
menggunakan Recordset, Repeat Region, dan Dynamic Text dari Dreamweaver.
Video 4.16 Menjelaskan cara membuat form Edit Buku dan cara mengatur
elemen Select/List supaya otomatis memilih row yang tepat dari Recordset
Penerbit dan Kategori.
Video 4.17 Menjelaskan cara membuat halaman Tambah Peminjam, dengan
form yang bisa melakukan upload picture, berikut penjelasan mengenai
pilihan field blob atau text pada database.
Video 4.18 Menjelaskan cara membuat form Edit Peminjam, dan cara penanganan form Upload jika melakukan Update field Foto.
Video 4.19 Menjelaskan cara membuat halaman Peminjaman yang menampilkan
gabungan data-data dari Recordset Peminjam, Buku, Penerbit, Kategori.
Dan juga cara memakai ajax/javascript untuk membuat form yang dinamis
jumlahnya, sesuai dengan jumlah buku yang dipinjam.
Video 4.20 Menjelaskan cara membuat halaman Pengembalian dan cara
penghitungan hari keterlambatan dan jumlah denda yang harus dibayar.
Video 4.21 Menjelaskan cara membuat halaman Laporan / Report.