Archive for October 2018

PWEB-2018-Mengenal Teknologi Ajax

5:40 PM 98 Comments
AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll. 

Pada website tradisional biasa jika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refresh dimana document HTML akan di baca dari awal dan layar browser akan menjadi blank sesaat karena pada saat itu browser sedang meminta/merequest data dari web server dan hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server. 




Tanpa Ajax

Pada mekanisme biasa atau tanpa ajax, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang sekali. 

Memakai Ajax

Pada saat pemakaian Ajax, proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web. 


Materi


Referensi :

  1. Belajar Ajax
  2. Contoh Ajax untuk filter alamat-daerah
  3. Pengenalan Ajax untuk Designer
  4. Contoh Penggunaan Ajax
  5. https://www.w3bai.com/id/ajax/ajax_intro.html
  6. Contoh ajax lagi

PBO - Desain Class - Kopling Kohesi

7:02 PM 82 Comments
Cohesion dan Coupling merupakan ukuran untuk  menilai rancangan class yang dibuat untuk perangkat lunak. Pada saat software dibuat, developer biasanya membagi software/perangkat lunak menjadi modul-modul yang kecil untuk  memastikan bahwa modul yang dirancang menganut prinsip
"Loose Coupling, High Cohesion"

Coupling  adalah derajat  ketergantungan suatu modul terhadap modul lainnya. Kita harus pastikan bahwa suatu modul seminimal mungkin tergantung atau berpengaruh terhadap modul lainnya. Tujuannya jika ada update secara internal di dalam suatu modul, modul-modul lainnya tidak akan terlalu kena pengaruh. 

Selain itu Coupling juga dapat diartikan sebagai sebuah ukuran untuk mengukur berapa kuatnya sebuah element terhubung dengan element lain.Ukuran ini dipakai juga untuk mengetahui seberapa kuat informasi yang dimilikinya,atau ketergantungan ke elemen lain. Sebagai contoh jika anda bayangkan jika anda mengubah 1 modul A, tapi karena modul lain memiliki ketergatungan terhadap modul A,maka efek perubahan ini mungkin saja punya impact terhadap modul lain
Karena itu low coupling sangat penting dalam perencanaan software.

Sedangkan kohesi adalah keterikatan fungsi-fungsi di dalam suatu modul. Maksudnya adalah modul yang dibuat memiliki fungsi-fungsi yang serupa untuk satu tanggung jawab. Karena itu high cohesion sangat penting dalam perancangan software.

Modul kohesi melakukan suatu tugas tunggal pada suatu prosedur perangkat lunak yang memerlukan sedikit interaksi dengan prosedur yang sedang dilakukan di bagian lain dari suatu program. Karena itu high cohesion sangat penting dalam perancangan software.

UTS-APSI-2018

10:06 PM 40 Comments
Perhatikan deskripsi sistem informasi berikut :




Soal 

  1. Buatlah system request dari gambaran aplikasi di atas
  2. Tuliskan Functional Requirement nya
  3. Tuliskan Non Functional Requirementnya
  4. Buatlah studi kelayakan/ feasibility study dari aplikasi pendataan sekolah di atas

Jawaban ditulis di blog dan koment di sini paling lambat pukul 17.00

UTS-PWEB-2018-Manajemen Prestasi Siswa

5:42 PM 37 Comments
Setiap akhir semester tugas guru adalah memasukkan nilai ke dalam aplikasi E-Rapor. Aplikasi E-Rapor adalah aplikasi yang digunakan untuk mengenerate laporan perkembangan siswa per semester.
Isian E-Rapor adalah nilai pelajaran, nilai ektra kurikuler, dan prestasi siswa yang di dapat selama semester berlangsung.

Contoh aplikasi E-Rapor bisa dilihat dalam video di bawah ini


Soal :




  1. Buatlah rancangan input prestasi untuk E-Rapor
  2. Buatlah rancangan database yang digunakan untuk menyimpan
  3. Implementasikan form input prestasi siswa dan hasil output penyimpanannya

UTS-PBO-B-2018 Manless Parking System

7:57 PM 39 Comments
Manless Parking System adalah sistem Parkir yang di pintu masuknya tidak dijaga oleh operator. Namun digantikan oleh kotak dispenser yang ada tombolnya untuk membuka palang parkir dan mencetak tanda mulai parkir. Sistem Parkir seperti ini banyak digunakan di bandara, Rumah Sakit,  Gedung Perkantoran,  Aparartment, Mall-Plaza  dan lain sebagainya.



Perangkat Manless Parking system terdiri dari perangkat pintu masuk, dan perangkat pada pos pintu keluar.



Perankat Pintu Masuk Parkir
  1. Dispenser Box: adalah box dimana Termal Printer atau bisa juga berupa Card Dispenser dan perangkat lain dipasang. Box Dispenser ini berada paling depan karena pengunjung harus tekan tombol dan mendapatkan karcis parkir atau Kartu Parkir yang keluar dari Dispenser Box ini.
  2. Loop Detector: adalah perangkat sensor kendaraan yang mana terdiri dari antena loop yang di pasang dibawah lantai atau aspal atau paving (tergantung area) dan controller loop detector itu sendiri. Biasanya pada Sistim Parkir Manless paling tidak dipasang 2 unit loop detektor yaitu di depan Box Dispenser dan di depan Barrier Gate.
  3. Controller Manless: adalah modul yang didesain khusus dari microcontroller untuk bisa menterjemahkan input dan output yang diperlukan pada sistem parkir manless ini. Beda supplier beda pula controller manless ini. Controller Manless ini dipasang di dalam Box Dispenser. Dibeberapa suppler system parkir menggunakan mini-pc  atau juga ada yang menggunakan motherboard Pc. Kami menggunakan pure controller yang berkomunikasi dengan PC di gate exit melalui LAN (local Area Network) yang terbukti lebih stabil.
  4. Thermal Printer: adalah printer thermal auto cutter yang dugunakan untuk print karcis setiap pengunjung yang masuk area parkir. Dan pasti Printer auto cutter ini berada didalam box dispenser yang dipasang sedemikian rupa sehingga karcir parkir bisa keluar dengan sempurna dan yang tidak kalah penting adalah gampang dalam mengganti kertas thermal.
  5. Camera: adalah perangkat yang digunakan untuk capture foto kendaraan yang masuk. Bisa capture pelat nomor, capture kendaraan utuh atau capture pengendara atau driver tergantung kebutuhan. Dan hasil foto yang dicapture ini adalah sebagai foto perbandingan yang akan muncul di komputer pos keluar untuk dibandingkan dengan hasil camera dipos keluar itu sendiri oleh operator parkir. Dalam hal ini kami menggunakan IP Camera dengan resolusi gambar yang cukup bagus dibandingkan dengan yang menggunakan webcam.
  6. Display: adalah perangkat tambahan yang jika diperlukan adalah untuk menampilkan text pada box dipenser yang seyogyanya bersifat interaktif dan memberikan petunjuk tambahan bagi pengendara tentang apa yang harus dilakukan dengan sistem parkir manless ini. Tidak semua supplier parkir menyedikan fitur tambahan ini.
  7. Speaker: adalah perangkat yang mengelaurkan suara tentang bagaimana pengendara bertindak dalam menggunakan Sistim Manless ini. Suara yang dimunculkan bisa berupa "Selamat datang di.................., Silakan tekan Tombol Hijau"
  8. Tombol: adalah perangkat yang ditekan berdasarkan instruksi yang muncul dari speaker agar Box Dispenser mengeluarkan Karcis, Camera akan capture gambar dan Barrier Gate akan terbuka.
  9. Barrier Gate: adalag Palang parkir yanga akan buka tutup sesuai instruksi yang diberikan oleh sistem menless ini.

Perangkat Pintu Keluar Parkir

  1. Pos Keluar: adalah tempat duduk operator di jaluar keluar dari system parkir ini. Pos Keluar ini bisa berupa Pos Permanen atau juga Pos Portable
  2. Komputer: adalah perangkat dimana software parking system di install
  3. Thermal Printer: untuk print tiket keluar jika pengunjung menghendaji bukti parkir
  4. Barcode Scanner: adalag alat pembaca barcode yang di cetak pada karcis parkir
  5. Mini Controller: adalah controller sederhana yang berfungsi sebagai interface antara barrier gate keluar dengan PC
  6. Camera: untuk capture gambar kendaraan pasa saat diam dan melakukan pembayaran parkir yang mana hasil capture gambar ini akan dibandingkan dengan capture pada saat kendaraan masuk tadi untuk selanjutnya pihak operator menilai kecocokannya
  7. Software Parking System
  8. Barrier Gate Keluar
  9. Loop Detector atau VLD

Soal


Manless Parking System
  1. Tuliskan deskripsi sistem parkir elektronik
  2. Sebutkan fitur/ menu yang ada di parkir elektronik
  3. Gambarkan alur cara pemakaiannya
  4. Gambarkan skema kelas untuk mengimplementasikannya beserta field dan methodnya
  5. Implementasikan program simulasinya (Buat komentar di blog untuk link solusinya)

UTS-PBO A-2018

5:28 PM 38 Comments
Pemerintah Kota (Pemkot) Surabaya bekerjasama dengan Bank Indonesia (BI) kembali meresmikan sistem pembayaran kartu elekronik (electronic payment) sebagai alat parkir meter. Sistem pengelolaan pembayaran parkir secara elektronik sebelumnya telah diterapkan di kawasan Balai Kota Surabaya. Saat ini, Parkir meter telah terpasang di kawasan Taman Bungkul Surabaya.

Wali Kota Surabaya Tri Rismaharini dalam sambutannya mengatakan Pemkot Surabaya mencoba untuk memberikan layanan yang terbaik dengan memperluas zona layanan parkir secara elektronik. Langkah perluasan parkir zona dengan menggunakan sistem parkir meter bertujuan untuk menekan kebocoran pendapatan sekaligus menata sistem perparkiran.

“Dengan penggunaan uang elektronik ini maka pelaksanaan untuk akuntabilitas Pemkot Surabaya akan semakin baik,” kata Wali Kota Risma, saat memberikan sambutan dalam peresmian parkir elektronik, bertempat di Taman Bungkul Surabaya, Minggu, (18/02/18), pagi.

Wali Kota yang akrab di sapa Bu Risma itu juga menghimbau kepada warga Surabaya, bahwa diperlukan sebuah kerjasama dan dukungan masyarakat untuk mensukseskan gerakan non tunai dengan memiliki uang elektronik. “Selama ini potensi (perparkiran) di kawasan Taman Bungkul ini besar sekali, tapi selama ini hilang, karena belum dikelolah secara elektronik dan akibatnya banyak sekali kebocoran-kebocoran,” terangnya.

Dengan penggunaan sistem pembayaran secara elektronik, lanjut Wali Kota Risma, diharapkan kedepan sudah tidak ada lagi kebocoran-kebocoran, sehingga pelaksaaan pertanggung jawaban pemerintah kota akan semakin baik, potensi pendapatan parkir yang tinggi membuat pemkot terus berupaya dalam memberikan layanan sistem perparkiran yang terbaik.




Soal

  1. Tuliskan deskripsi sistem parkir elektronik
  2. Sebutkan fitur/ menu yang ada di parkir elektronik
  3. Gambarkan alur cara pemakaiannya
  4. Gambarkan skema kelas untuk mengimplementasikannya beserta field dan methodnya
  5. Implementasikan program simulasinya (Buat komentar di blog untuk link solusinya)

APSI-Analisa Use Case

2:26 AM 125 Comments
Analisa Use Case adalah teknik yang digunakan untuk mengidentifikasi kebutuhan sistem perangkat lunak dengan menggambarkan aktor atau user yang akan menggunakan perangkat lunak dan ruang lingkup fitur kegunaan perangkat lunak.


Materi



Useanalysis from Fajar Baskoro

Contoh Use Case



Absensi



Video

APSI-Penentuan Kebutuhan PL

2:13 AM 14 Comments
Penentuan kebutuhan merupakan langkah awal untuk menentukan gambaran perangkat yang akan dihasilkan ketika pengembang melaksanakan sebuah proyek pembuatan perangkat lunak. Perangkat lunak yang baik dan sesuai dengan kebutuhan pengguna sangat tergantung pada keberhasilan dalam melakukan analisis kebutuhan. Untuk proyek-proyek perangkat lunak yang besar, analisis kebutuhan dilaksanakan setelah aktivitas sistem information engineering dan software project planning.

Penentuan kebutuhan adalah suatu proses untuk mendapatkan informasi, mode, spesifikasi tentang perangkat lunak yang diinginkan klien/pengguna. Kedua belah pihak, yaitu klien dan pembuat perangkat lunak terlibat aktif dalam tahap ini. Informasi dari klien yang akan menjadi acuan untuk melakukan desain perangkat lunak.

Tujuan Penentuan kebutuhan adalah :
  1. Mengelola hasil elistasi kebutuhan untuk menghasilkan dokumen spesifikasi kebutuhan yang isi keseluruhannya sesuai dengan apa yang diinginkan pengguna   (Liu and Yen, 1996).
  2. Mengembangkan persyaratan kualitas yang memadai dan rinci, dimana para manajer dapat membuat pekerjaan proyek yang realistis dan staf teknis dapat melanjutkan dengan perancangan, implementasi dan pengujian (Wiegers, 2003).
  3. Membangun pemahaman tentang karakteristik ranah permasalahan dan sekumpulan kebutuhan untuk menemukan solusi.

Studi Kasus





Deskripsi Kasus

System Proposal




Absensi



APSI-Seleksi dan Manajemen Proyek

APSI-Seleksi dan Manajemen Proyek

2:00 AM 48 Comments
Seleksi dan manajemen proyek adalah pengelolaan  semua kegiatan/ pekerjaan yang akan dilakukan selama proyek perangkat lunak berlangsung, supaya proyek  berjalan tepat waktu dan mendapatkan hasil sesuai dengan yang diinginkan.

Tujuan utama dari manajemen proyek adalah mendapatkan dokumen terinci yang dapat membimbing/memandu pelaksanaan eksekusi suatu proyek. Untuk memandu eksekusi, rencana harus realistis dan berguna. Untuk membuat rencana yang realistis dan berguna, memerlukan usaha dan waktu yang cukup dalam proses perencanaan dengan melibatkan orang atau pihak yang kompeten.

Materi

APSI-Feasibility Study

1:43 AM 68 Comments
Feasibility Study atau disebut juga studi kelayakan merupakan suatu survey tentang ketersediaan dan persediaan akan keunggulan dan kelemahan suatu sistem. Studi kelayakan dilakukan dengan survey yang menghasilkan dokumen-dokumen kebutuhan. 

Berdasarkan dokumen kebutuhan dan studi kelayakan, dapat disusun persyaratan perangkat lunak Studi kelayakan berguna untuk memastikan bahwa solusi yang diusulkan tersebut benar-benar dapat dicapai dengan sumber daya dan dengan memperhatikan kendala yang terdapat pada perusahaan serta dampak terhadap lingkungan sekeliling terhadap masalah dan peluang bisnis yang disajikan dalam usulan proyek pengembangan sistem.



Video




Absensi




Latihan

Aplikasi kepegawaian adalah sebuah sistem untuk pengelolaan data dan kegiatan kepegawaian pada sebuah instansi, misalnya saja pada instansi Sekolah, instansi Pemerintahan dan lain sebagainya. Program aplikasi Aplikasi kepegawaian bisa dibuat dengan berbasis Desktop juga bisa dibuat berbasis web (web base).

Sistem Informasi Manajemen Kepegawaian (Simpeg) merupakan suatu aplikasi kepegawaian yang berfungsi untuk mengelola data, manajemen dan administrasi kepegawaian sebuah instansi, perguruan tinggi ataupun perusahaaan. Aplikasi kepegawaian menjadi solusi tepat bagi sebuah instansi, perusahaaan ataupun perguruan tinggi dalam mengatasi masalah manajemen kepegawaian.

Simpeg atau aplikasi kepegawaian didefinisikan sebagai Sistem Informasi terpadu, yang meliputi pendataan pegawai, pengolahan data, prosedur, tata kerja, sumber daya manusia dan teknologi informasi untuk menghasilkan informasi yang cepat, lengkap dan akurat dalam rangka mendukung administrasi kepegawaian. (Priyanto, 2008).

Secara spesifik tujuan dari pengembangan Simpeg/aplikasi kepegawaian adalah untuk mendukung integritas data, kemudahan pengaksesan, dan kemudahan pengelolaan sehingga dapat mendukung kelancaran pelaksanaan dan fungsi dalam bidang administrasi kepegawaian yang efektif dan efisien.

Dari aplikasi Simpeg ini kita akan banyak mendapat manfaat seperti pencarian data pegawai dengan mudah dan cepat, untuk membuat laporan sangat mudah dibandingkan dengan secara manual, memudahkan pekerjaan yang berhubungan dengan kepegawaian, dapat melihat informasi pegawai secara cepat dan akurat, dapat denga cepat merencenakan kebutuhan pegawai dan masih banyak yang lain.

PWEB-2018-5-AJAX-JQuery

1:03 AM 32 Comments
AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Lebih lanjut tentang Ajak klik link Ajax berikut.

Untuk deklarasi AJAX dengan menggunakan jQuery adalah dengan memanggil function .ajax(). Bentuk scriptnya adalah:

$.ajax();

Tetapi script di atas tidak akan berfungsi karena kita tidak meletakkanya setelah DOM ready dan tidak mempunyai option yang dibutuhkan untuk request. Adapun option dan method yang dibutuhkan dalam AJAX memakai jQuery antara lain:

  1. URL, menentukan alamat URL mana yang akan direquest oleh HTTP Request (AJAX)type, tipe request yang akan dijalankan, apakah POST atau GET
  2. BeforeSend, event yang dilakukan ketika HTTP Request akan diproses
  3. Complete, event yang dilakukan ketika HTTP Request selesai dijalankan, namun tidak melihat apakah request sukses atau gagal
  4. Success, event yang dilakukan ketika HTTP Request selesai dan berhasil dijalankan dan mempunyai nilai balik yaitu data hasil request
  5. Data, data yang dikirim ke server ketika request dan diolah di server. Data ini akan diperlakukan berdasarkan 2 type yang ditentukan, yaitu GET atau POST.

Untuk pemanggilan options tersebut, caranya dengan memasukkan ke dalam function ajax tadi berbentuk struktur objek javascript. Contoh:


Di atas adalah contoh penggunaan AJAX sederhana yang melakukan request ke file lakukan_proses.php, data yang dikirim adalah inputan dari sebuah form yang mempunyai id form (ingat selection id dengan CSS, sama aja). Sebelum proses dijalankan, tampilkan gambar loading, kemudian setelah request selesai dijalankan dan membawa timbal balik html, maka sembunyikan loading, dan tampilkan alert yang berisi html timbal balik (response) dari server.

Materi


Tutorial







Latihan

Submit Form Without Page Refresh

Link Tutorial
Link Demo









Referensi


  1. https://fajarbaskoro.blogspot.com/2018/10/pweb-2018-mengenal-teknologi-ajax.html
  2. http://jagocoding.com/tag/serial-ajax-dengan-jquery
  3. http://jagocoding.com/tutorial/99/AJAX_dengan_jQuery_Part_1
  4. https://www.malasngoding.com/pengertian-dan-cara-menggunakan-bootstrap/
  5. https://www.duniailkom.com/tutorial-belajar-jquery-bagi-pemula/
  6. https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/

PWEB-2018-4-JQuery

12:38 AM 214 Comments
jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi proyek opensource dan menjadi libary JavaScript paling populer di dunia. Situs resmi jQuery beralamat di jquery.com.



JQuery diperlukan sebagai solusi karena terdapat beberapa perbedaan implementasi JavaScript dari 1 web browser dengan web browser lain. Kode JavaScript yang berjalan mulus di Mozilla Firefox, belum tentu bisa berjalan di Internet Explorer, begitu juga sebaliknya. Hal ini diperparah dengan perbedaan versi dari masing-masing web browser.

Untuk mengatasi hal ini, jQuery memiliki fungsi bawaan yang mendeteksi web browser dan menyediakan fungsi pengganti. Dengan demikian, kita tidak perlu pusing memikirkan perbedaan implementasi JavaScript dari setiap web browser.




Materi

Subscribe to: Posts (Atom)