Modul Pembuatan Aplikasi Berbasis Web “Perpustakaan” ( SMK RPL ) 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)

Contoh gambar desain yang ditunjukkan cara pembuatannya di dalam Video Tutorial.

Gambar 1 Halaman Login

Gambar 2 Halaman Peminjaman

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 HalamanVideo 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.

https://www.youtube.com/watch?v=C5vt6XVevpE