Gambar 3.47. Sequence diagram pengaturan pengguna
sd Pengaturan user
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
admin login
LoginCtrl login
showWinLogin getCmp
construct simpan
isAvailableName getData
sukses simpan ubah
isAvailableName getData
sukses ubah hapus
return data sukses hapus
3.1.5.6. Class Diagram
Class diagram adalah dekripsi kelompok objek-objek dengan properti, perilaku operasi dan relasi yang sama. Sehingga dengan adanya class diagram
dapat memberikan pandangan global atas sebuah sistem. Hal tersebut tercermin dari class-class yang ada dan relasinya satu dengan yang lainnya. Sebuah sistem
biasanya mempunyai beberapa class diagram. Class diagram sangat membantu dalam visualisasi struktur kelas dari suatu sistem. Class diagram dari aplikasi
pelelangan umum digambarkan seperti gambar di bawah ini :
Gambar 3.48. Class Diagram Aplikasi Pelelangan Umum
cd Class Diagram
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
•
user
- administrator:
- panitia:
- penyedia:
formlogin
- login_username:
- login_password:
+ initComponent + getItem
loginctrl
+ __construct + getLogin
+ getStatusBl
formprov insi
- provinsi_id: string
- provinsi_nama: string
- negara_nama: string
+ resetSearch + prosesSearch
+ store_negara + showWinProvinsi
+ cm + Data
+ store + messageContextMenu
+ grid_provinsi
formkabupaten
- kabupaten_id: string
- kabupaten_nama: string
- provinsi_nama: string
+ resetSearch + prosesSearch
+ strore_provinsi + showwinKabupaten
+ cm + Data
+ store + messageContextMenu
+ kabupaten_grid
penyedia
- penyedia_id:
- penyedia_nama:
- jenis_usaha_id:
- kualifikasi_id:
- penyedia_alamat:
- penyedia_alamat_id:
- negara_id:
- id_penyedia_kodepos:
- penyedia_kodepos:
- id_penyedia_tlp:
- penyedia_tlp:
- penyedia_fax:
- id_penyedia_fax:
+ store_jenis_usaha + store_kualifikasi
+ store_negara + store_provinsi
+ store_kota + profil_panel
formpengadaan
- pengadaan_id: string
- pengadaan_tlp_panitia: string
- panitia_id: string
- panitia_nama: string
- pengadaan_date: string
- pengadaan_nama: string
- pengadaan_pagu: string
- pengadaan_hps: string
- sumber_dana_nama: string
- kualifikasi_nama: string
- pengadaan_ndate: string
- pengadaan_pemilik: string
- status_desc: string
+ resetSearch + prosesSearch
+ store_kualifikasi + store_status
+ store_sumber_dana + store_panitia_aktif
+ showwinpengadaan + cm
+ Data + store
+ messageContextMenu + detailPengadaan
+ pengadaan_grid
formpenaw aran
- penawaran_id: string
- pengadaan_nama: string
- pengadaan_pagu: string
- pengadaan_hps: string
- penyedia_nama: string
- penawaran_total: string
- doc_url: string
+ resetSearch + prosesSearch
+ store_pengadaan + cm
+ Data + store
+ messageContextMenu + penawaran_grid
formsanggahan
- pengadaan_nama: string
- sanggahan_id: string
- pengadaan_hps: string
- pengadaan_pagu: string
- penyedia_nama: string
- sanggahan_total: string
- doc_url: string
+ resetSearch + prosesSearch
+ store_pengadaan + cm
+ Data + store
+ messageContextMenu + sanggahan_grid
prov insictrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getProvinsi
kabupatenctrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getKabupaten
penyediactrl
+ __construct + simpan
+ getData
pengadaanctrl
+ __construct + getData
+ getDataTahapan + getDataSyarat
+ getDataSpek + getTotal
+ hapus + hapusSpek
+ hapusTahap + hapusSyarat
+ getDataById + getDataSpekById
+ getDataSyaratById + getDataTahapanById
+ save + saveTahap
+ saveSyarat + saveSpek
penaw aranctrl
+ __construct + getData
+ getTotal sanggahanctrl
+ __construct + getData
+ getTotal
formpengumuman
- br_id: string
- br_date: string
- br_name: string
- br_image: string
- br_news: string
- br_status: string
+ todayStr + insertImage
+ choose + showWinNews
+ renderImage + renderTittle
+ cm + Data
+ store + messageContextMenu
+ resetSearch + prosesSearch
+ beritaGrid
pengumumanctrl
+ __construct + getData
+ getTotal + hapus
+ getDataById + getImageBerita
+ save
JoinCtrl
+ __construct + simpan
+ kirimEmail
Join
- login_username:
- login_nama:
- login_email:
- login_pass1:
- login_pass2:
- security:
+ initComponent + getItemReg
+ getBbar
negara
- negara_id: string
- negara_nama: string
+ resetSearch + prosesSearch
+ showwinNegara + cm
+ Data + store
+ messageContextMenu + negara_grid
negaraCtrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getNegara
j enis_usaha
- jenis_usaha_id: string
- jenis_usaha_nama: string
+ resetSearch + prosesSearch
+ showwinJenisUsaha + cm
+ Data + store
+ messageContextMenu + jenis_usaha_grid
JenisUsahaCtrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getJenisUsaha
tahap
- tahap_id: string
- tahap_nama: string
+ resetSearch + prosesSearch
+ showwintahap + cm
+ Data + store
+ messageContextMenu + tahap_grid
TahapCtrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getTahap
sumber_dana
- sumber_dana_id: string
- sumber_dana_nama: string
+ resetSearch + prosesSearch
+ showwinsumber_dana + cm
+ Data + store
+ messageContextMenu + sumber_dana_grid
SumberDanaCtrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getSumberDana
panitia
- panitia_id: string
- panitia_nama: string
- panitia_lahir: string
- panitia_nip: string
- panitia_tlp: string
+ resetSearch + prosesSearch
+ showwinPanitia + cm
+ Data + store
+ messageContextMenu + panitia_grid
PanitiaCtrl
+ __construct + simpan
+ hapus + ubah
+ jmlData + getData
+ getpanitia
pemenang
- pemenang_id: string
- pengadaan_nama: string
- mulai: string
- penyedia_nama: string
- akhir: string
+ resetSearch + prosesSearch
+ store_penyedia_byPengadaan + store_penyedia
+ store_pengadaan + showwinpemenang
+ cm + Data
+ store + messageContextMenu
+ detailPemenang + pemenang_grid
keikutsertaan
- keikutsertaan_id: string
- keikutsertaan_ktp: string
- keikutsertaan_lahir: string
- keikutsertaan_nama1: string
- approve_desc: string
+ resetSearch + prosesSearch
+ store_kota + approve
+ showWinkeikutsertaan + cm
+ Data + store
+ messageContextMenu + grid_keikutsertaan
KeikutsertaanCtrl
+ __construct + simpan
+ getData + getNamaCP
daftar_hitam
- daftar_hitam_id: string
- daftar_hitam_nama: string
- akhir: string
- mulai: string
- daftar_hitam_desc: string
+ resetSearch + prosesSearch
+ store_penyedia + showwindaftar_hitam
+ cm + Data
+ store + messageContextMenu
+ daftar_hitam_grid
DaftarHitamCtrl
+ __construct + getData
+ getTotal + hapus
+ getDataById + save
3.1.5.7. Component Diagram
Component diagram menggambarkan struktur dan hubungan antar komponen piranti perangkat lunak, termasuk ketergantungan depedency
diantaranya. Component diagram dapat juga berupa interface yaitu kumpulan layanan yang disediakan sebuah komponen untuk komputer lain. Component
diagram tersebut dapat digambarkan sebagai berikut:
Gambar 3.49. Component Diagram Aplikasi Pelelangan Umum
3.1.5.8. Deployment Diagram
Deploymentphysical diagram menggambarkan detail bagaimana komponen dalam infrastruktur sistem, di mana komponen akan terletak pada
mesin, server atau piranti keras, bagaimana kemampuan jaringan pada lokasi tersebut, spesifikasi server dan hal-hal lain yang bersifat fisikal.
Sebuah node adalah server, workstation atau piranti keras lain yang digunakan untuk men-deploy komponen dalam lingkungan sebenarnya. Hubungan
antar node dan requirement dapat juga didefinisikan dalam diagram ini. Deployment diagram yang dibutuhkan dalam aplikasi umum ini sebagai berikut:
Gambar 3.50. Deployment Diagram Aplikasi Pelelangan Umum
3.2. Perancangan Data
Perancangan data merupakan tahapan untuk memetakan model konseptual ke model basis data yang akan dipakai. Perancangan data meliputi
perancangan entity relationship diagram, diagram relasi dan struktur tabel. Berikut penjelasan dari diagram relasi dan struktur tabel tersebut.
dd Deployment Diagram
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
• •
serv er database HTTP w eb serv er
ISP
w orkstation
client
koneksi PHP Internet Service Provider
Config
Mozzila Firefox