{"id":4462,"date":"2013-11-21T12:51:18","date_gmt":"2013-11-21T05:51:18","guid":{"rendered":"http:\/\/webmediacenter.com\/?p=4462"},"modified":"2021-03-05T16:22:35","modified_gmt":"2021-03-05T09:22:35","slug":"modul-pembuatan-aplikasi","status":"publish","type":"post","link":"https:\/\/sample.webmediacenter.com\/index.php\/2013\/11\/21\/modul-pembuatan-aplikasi\/","title":{"rendered":"Modul Pembuatan Aplikasi Berbasis Web Perpustakaan SMK RPL"},"content":{"rendered":"

https:\/\/webmediacenter.com\/modul-pembuatan-aplikasi\/<\/a>Modul Pembuatan Aplikasi Berbasis Web \u201cPerpustakaan\u201d<\/strong><\/p>\n

A. Gambaran Aplikasi<\/strong><\/p>\n

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.
\nSoftware yang dibutuhkan antara lain :
\n– Web Server, Database Server, dan Database Manager (dapat menggunakan Xampp, Wamp, dll, atau install satu-persatu)
\n– Software desain web (Corel Draw, Photoshop, Gimp, dll)
\n– Software web development (Dreamweaver, Notepadd++, Sublime, dll)<\/p>\n

B. Database<\/strong><\/p>\n

Rancangan database dari aplikasi ini telah disediakan oleh pemberi tugas, dengan perincian sebagai berikut :<\/p>\n

\"Modul<\/a>
Modul Pembuatan Aplikasi Berbasis Web Perpustakaan SMK RPL<\/figcaption><\/figure>\n

Dapat dilihat dari diagram di atas, database tersebut sebenarnya masih belum sempurna. Misalnya, untuk memasang fitur security dan login, maka pada tabel \u201cpetugas\u201d perlu ditambahkan field \u201cpassword\u201d. Field ini akan kita tambahkan sendiri nanti (lihat video tutorialnya).<\/p>\n

C. Tahapan Pembuatan<\/strong><\/p>\n

Tahapan pembuatan aplikasi dapat diuraikan sebagai berikut :
\n1. Pembuatan database (PHPMyAdmin)
\n2. Desain tampilan aplikasi (Photoshop)
\n3. Slicing terhadap desain (Dreamweaver)
\n4. Integrasi program PHP (Dreamweaver)<\/p>\n

D.1. Pembuatan database<\/strong><\/p>\n

Untuk pembuatan database, dapat menggunakan :
\n– Software database manager, baik yang berupa aplikasi desktop (seperti Navicat) maupun aplikasi web (seperti PHPMyAdmin)
\n– Langsung ke database server melalui MySQL console (command prompt)
\nCara yang akan kita gunakan dalam modul ini (dan juga merupakan cara yang sering dipakai pada umumnya) adalah dengan menggunakan PHPMyAdmin.<\/p>\n

D.2. Desain tampilan aplikasi<\/strong><\/p>\n

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.
\nUntuk menyederhanakan pembahasan, kita rancang aplikasi web ini memiliki halaman-halaman berikut :
\n– Halaman Login
\n– Halaman Peminjaman Buku
\n– Halaman Pengembalian Buku
\n– Halaman Administrasi \u2013 Pengelolaan Daftar Penerbit
\n– Halaman Administrasi \u2013 Pengelolaan Daftar Kategori
\n– Halaman Administrasi \u2013 Pengelolaan Daftar Buku
\n– Halaman Administrasi \u2013 Pengelolaan Daftar Peminjam
\n– Halaman Administrasi \u2013 Pengelolaan Daftar Petugas
\n– Halaman Administrasi \u2013 Laporan (Report)<\/p>\n

Contoh gambar desain yang ditunjukkan cara pembuatannya di dalam Video Tutorial.<\/p>\n

\"Modul<\/a>
Modul Pembuatan Aplikasi Berbasis Web Perpustakaan SMK RPL<\/figcaption><\/figure>\n

Gambar 1 Halaman Login<\/p>\n

Gambar 2 Halaman Peminjaman<\/p>\n

D.3. Slicing terhadap desain<\/strong><\/p>\n

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.<\/p>\n

D.4. Integrasi program PHP<\/strong><\/p>\n

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.<\/p>\n

Sylllabus \/ Outline Tahapan Pembuatan (per Video)<\/p>\n

1. Pembuatan database (PHPMyAdmin)<\/p>\n

Video 1.1 \u00a0Menjelaskan cara pembuatan database Perpustakaan, dan beberapa tabel di dalamnya, beserta cara penentuan type field dan fungsinya.<\/p>\n

Video 1.2 \u00a0Menjelaskan cara membuat sisa tabel yang belum dibuat, dan cara menghubungkan Foreign Key, serta cara menampilkan relasinya dalam bentuk diagram.<\/p>\n

2. Desain tampilan aplikasi (Photoshop)<\/p>\n

Video 2.1 \u00a0Menjelaskan cara men-setting dokumen Photoshop untuk desain web, dan cara mendesain bagian headernya.<\/p>\n

Video 2.2 \u00a0Menjelaskan cara merancang logo (menggunakan Flash) menggunakan tools-tools yang ada, dan cara mengexportnya untuk dijadikan logo dalam desain Photoshop.<\/p>\n

Video 2.3 \u00a0Menjelaskan sifat dan cara membuat menu web di dalam Photoshop, dan cara memencari dan menggunakan symbol-symbol untuk dipergunakan dalam mendesain web.<\/p>\n

Video 2.4 \u00a0Menjelaskan cara mendesain bagian konten di dalam web, seperti misalnya bagian judul, tabel, dan form.<\/p>\n

Video 2.5 \u00a0Menjelaskan maksud, tujuan dan cara mendesain bagian footer di dalam web.<\/p>\n

Video 2.6 \u00a0Menunjukkan cara mendesain halaman yang berbeda, yaitu Halaman Peminjaman.
\nIsi video menunjukkan cara mendesain bagian tabel yang dari tampilan desainnya dapat menunjukkan bahwa isi tabel tersebut berupa data dinamis yang berasal dari database.<\/p>\n

Video 2.7 \u00a0Melanjutkan desain halaman Peminjaman, dan menunjukkan cara mendesain halaman yang berisi banyak form, dan tabel.<\/p>\n

3. Slicing terhadap desain (Dreamweaver)<\/p>\n

BAGIAN A : Membuat Template Halaman
\nVideo 3.A.1 \u00a0Menunjukkan cara mempersiapkan Dreamweaver sebelum memulai project pembuatan website, yaitu setting Site Manager.
\nVideo 3.A.2 \u00a0Menjelaskan cara membuat dua file utama yaitu file index dan file css, dan cara menghubungkan keduanya.
\nVideo 3.A.3 \u00a0Menjelaskan cara menterjemahkan desain Photoshop menjadi sebuah halaman web, dimulai dari bagian headernya, dan diuji dengan ditampilkan dalam browser.
\nVideo 3.A.4 \u00a0Menunjukkan cara mengisi bagian header, yang meliputi tulisan dan gambar.
\nVideo 3.A.5 \u00a0Menjelaskan cara membuat menu dan link.
\nVideo 3.A.6 \u00a0Menjelaskan cara membuat bagian konten, dimana hanya kerangkanya saja yang dibuatkan. Karena isinya nanti akan berbeda-beda antara satu halaman web dengan yang lainnya.
\nVideo 3.A.7 \u00a0Menjelaskan cara membuat bagian footer.
\nVideo 3.A.8 \u00a0Menjelaskan cara memperlakukan halaman web yang sudah sempurna kerangkanya untuk dijadikan sebagai template desain. Gunanya adalah untuk mempermudah langkah membuat halaman-halaman berikutnya nanti.<\/p>\n

BAGIAN B : Membuat Konten Template
\n<\/strong>
\nVideo 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.
\nVideo 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.
\nVideo 3.B.3 ? Menjelaskan cara membuat tabel untuk data peminjam dengan memanfaatkan css tabel yang telah dibuatkan sebelumnya.
\nVideo 3.B.4 ? Menunjukkan cara membuat bentuk-bentuk tabel lain yang berbeda dari sebelumnya, untuk keperluan menampilkan panel peminjaman dan data buku.
\nVideo 3.B.5 \u00a0Memperbaiki css dengan cara menguji tampilan web pada berbagai jenis browser, yaitu Firefox, Internet Explorer, dan Chrome.
\nVideo 3.B.6 \u00a0Menunjukkan cara membuat halaman khusus untuk menu Administrasi dimana nantinya halaman ini sebagai pusat maintenance database.
\nVideo 3.B.7 \u00a0Melanjutkan penyempurnaan halaman Administrasi supaya secure namun tetap nyaman diakses.
\nVideo 3.B.8 \u00a0Memasukkan menu-menu Administrasi sebagai snippets yang kedua.<\/p>\n

4. Integrasi program PHP (Dreamweaver)
\n<\/strong>
\nVideo 4.1 \u00a0Menjelaskan 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.
\nVideo 4.2 \u00a0Menunjukkan cara memasang security halaman dengan menggunakan fasilitas dari Dreamweaver, yaitu Restict Access.
\nVideo 4.3 \u00a0Menjelaskan cara membuat halaman admin untuk menambah penerbit baru melalui fasilitas Dreamweaver, yaitu Insert Record. Lalu mengujinya di browser dan mengeceknya dalam database.
\nVideo 4.4 \u00a0Menjelaskan cara menampilkan Daftar Penerbit dengan menggunakan fasilitas Dreamweaver, yaitu Recordset, Repeat Region dan Dynamic Text.
\nVideo 4.5 \u00a0Menjelaskan 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.
\nVideo 4.6 \u00a0Memanfaatkan menu Logout dari Dreamweaver dan memodifikasinya untuk memudahkan akses dari menu yang telah kita buat.
\nVideo 4.7 \u00a0Menunjukkan cara membuat halaman Delete Penerbit, juga dengan memanfaatkan menu otomatis yang telah disediakan Dreamweaver.
\nVideo 4.8 \u00a0Menunjukkan cara menambahkan paging (navigasi data) ke halaman Daftar Penerbit, dengan menggunakan fasilitas paging dari Dreamweaver.
\nVideo 4.9 \u00a0Menjelaskan cara membuat halaman admin untuk menambah kategori buku dengan memanfaatkan fasilitas Insert Record dari Dreamweaver.
\nVideo 4.10 \u00a0Menjelaskan cara membuat daftar kategori dengan menggunakan Recordset, Repeat Region, dan Dynamic Text dari Dreamweaver.
\nVideo 4.11 \u00a0Menjelaskan cara membuat halaman admin untuk mengedit kategori buku dengan menggunakan fasilitas dinamis dari Dreamweaver.
\nVideo 4.12 \u00a0Menjelaskan catatan khusus mengenai kekhususan Primary Key dan cara penananganannya pada form Edit.
\nVideo 4.13 \u00a0Menjelaskan cara membuat halaman Delete Kategori disertai konfirmasi terlebih dahulu.
\nVideo 4.14 \u00a0Menjelaskan 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.
\nVideo 4.15 \u00a0Menjelaskan cara membuat tabel dinamis Daftar Buku dengan menggunakan Recordset, Repeat Region, dan Dynamic Text dari Dreamweaver.
\nVideo 4.16 \u00a0Menjelaskan cara membuat form Edit Buku dan cara mengatur elemen Select\/List supaya otomatis memilih row yang tepat dari Recordset Penerbit dan Kategori.
\nVideo 4.17 \u00a0Menjelaskan cara membuat halaman Tambah Peminjam, dengan form yang bisa melakukan upload picture, berikut penjelasan mengenai pilihan field blob atau text pada database.
\nVideo 4.18 \u00a0Menjelaskan cara membuat form Edit Peminjam, dan cara penanganan form Upload jika melakukan Update field Foto.
\nVideo 4.19 \u00a0Menjelaskan 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.
\nVideo 4.20 \u00a0Menjelaskan cara membuat halaman Pengembalian dan cara penghitungan hari keterlambatan dan jumlah denda yang harus dibayar.
\nVideo 4.21 \u00a0Menjelaskan cara membuat halaman Laporan \/ Report.<\/p>\n

WEBMEDIA Training Center<\/strong>
\nJl. Setiabudi, Komp. Setiabudi Bisnis Point No.12-13 CC, Medan \u2013 20122
\nHP\/WA : 0852 6114 0004, 0852 1266 5455
\nTwitter : @webmediatc<\/a>
\nInstagram : @webmediatc<\/a>
\nMap : LKP Webmedia Training Center<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

https:\/\/webmediacenter.com\/modul-pembuatan-aplikasi\/Modul Pembuatan Aplikasi Berbasis Web \u201cPerpustakaan\u201d 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 […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-4462","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/posts\/4462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/comments?post=4462"}],"version-history":[{"count":0,"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/posts\/4462\/revisions"}],"wp:attachment":[{"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/media?parent=4462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/categories?post=4462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sample.webmediacenter.com\/index.php\/wp-json\/wp\/v2\/tags?post=4462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}