SIPD Chrome Extension untuk Migrasi Data dari SIPD ke SIMDA PINK Th. Anggaran 2022


1. Siapkan Server untuk tempat backup DB lokal menggunakan WP-SIPD

Sangat disarankan menggunakan hardware PC server untuk menginstall web server yang akan digunakan untuk migrasi data. Penggunaan hardware akan berpengaruh pada kecepatan saat melakukan singkronisasi.

Sebaiknya juga menggunakan domain dan IP publik agar aplikasi bisa diakses dari internet. Hal ini akan mempermudah dikemudian hari untuk melakukan singkronisasi dari manapun. Pastikan web server aplikasi wp-sipd dapat terhubung dengan jaringan dari server database sql server simda.

Berikut langkah-langkah install WP-SIPD pada PC server windows:
  1. Download xampp dengan php versi 7.xx, jangan menggunakan versi 8.xx karena saat ini driver odbc belum support. File dapat didownload di https://www.apachefriends.org/download.html. Selain XAMPP dapat menggunakan web server lain sesuai kebutuhan. Yang terpenting adalah modul PHP dan database MYSQL
  2. Edit file php.ini yang bisa diakses melalui control panel XAMPP. Klik menu Config > PHP (php.ini). Aktifkan driver pdo_odbc dengan menghapus tanda ";" pada awal baris extension=pdo_odbc. Aktifkan dan setting max_input_vars = 1000000. Aktifkan dan setting max_execution_time = 300. Aktifkan dan setting max_input_time = 600. Aktifkan dan setting memory_limit = 3556M. Aktifkan dan setting post_max_size = 20M. Semakin besar settingan parameter tersebut semakin bagus. Disesuaikan saja dengan kapasitas server. Informasi lain bisa cek di file readme.md repository wp-sipd.
  3. Download text editor untuk nanti melakukan setting file config. Bisa menggunakan https://www.sublimetext.com/3 atau yang sejenisnya.
  4. Download Git for Windows di https://gitforwindows.org/ untuk mempermudah update aplikasi dari repository github
  5. Download CMS wordpress di https://wordpress.org/download/ dan extrak file zip di direktori root web server. Jika menggunakan XAMPP secara default direktori root ada di C:\xampp\htdocs
  6. Buat database baru untuk aplikasi wordpress. Buka halaman http://localhost/phpmyadmin di browser dan tambahkan database baru. Lakukan installasi wordpress dengan mengakses http://localhost/wordpress. Ikuti langkah installasinya, masukan nama database yang sudah dibuat tadi. User mysql secara default adalah root dan passwordnya kosong. Masukan user dan password admin wordpress. Harap dicatat user admin wordpressnya agar tidak lupa.
  7. Lakukan clone repository wp-sipd atau bisa juga download zip terbaru dari master zip (jangan dari relase karena sudah banyak update terbaru tapi belum direlease). Link repository ada di https://github.com/agusnurwanto/wp-sipd. Pasang folder wp-sipd di direktori plugins wordpress, lokasinya ada di C:\xampp\htdocs\wordpress\wp-content\plugins. Login ke wordpress dengan mengunjungi link http://localhost/wordpress/wp-admin. Aktifkan plugin Data SIPD.
  8. Buka database wordpress di phpmyadmin dan jalankan atau import file table.sql yang ada di https://raw.githubusercontent.com/agusnurwanto/wp-sipd/master/tabel.sql. Jika sudah berhasil maka akan ada tabel baru di database wordpress yang nantinya digunakan untuk menampung data dari SIPD.
  9. Pada halaman admin wordpress buka menu SIPD Options. Tahun Anggaran SIPD diubah menjadi 2022. Pada form input API KEY chrome extension pastikan sudah ada generate string yang nanti akan dipakai untuk mengisi parameter di config.js milik sipd-chrome-extension. Klik Save Changes atau Simpan.
  10. Buka menu SIPD Options > SIMDA Settings. Dan klik Save Changes atau Simpan untuk menyimpan data APIKEY SIMDA. API KEY ini nanti akan dipakai untuk config.php milik aplikasi SIMDA-API-PHP.
  11. Install theme Astra untuk wordpress agar tampilan laporan di wordpress bagus. Untuk menambahkan theme baru buka halaman tambah theme baru di http://localhost/wp-admin/theme-install.php?browse=popular. Pilih theme Astra, install dan aktifkan.
  12. Install dan aktifkan plugin captcha bank untuk menambahkan captcha dan proteksi brutoforce pada halaman login wordpress
  13. Install dan aktifkan plugin ultimate member yang nanti dipakai untuk keperluan login dan menampilkan menu MONEV RFK, RENJA dll pada user SKPD
  14. Rekomendasi untuk update settingan MYSQL xampp bisa mengikuti tutorial ini https://stackoverflow.com/questions/8077978/mysql-queries-extremely-slow-in-fresh-xampp-installation
    • innodb_buffer_pool_size = 1000M
    • innodb_log_file_size = 250M
    • innodb_log_buffer_size = 10M
    • innodb_flush_log_at_trx_commit = 1
    • innodb_lock_wait_timeout = 50
  15. Rekomendasi untuk mengupgrade settingan dinamis port yang digunakan di windows server bisa melihat ini  https://stackoverflow.com/questions/10317974/mysql-php-error2002-only-one-usage-of-each-socket-address-protocol-network-a. Buka aplikasi regedit dan masuk ke folder SYSTEM\CurrentControlSet\Services\Tcpip\Parameters. Tambahkan 4 param DWORD di bawah ini:
    • TcpTimedWaitDelay
    • REG_DWORD: 0000001e (hex)
    • MaxUserPort
    • REG_DWORD: 0000fffe (hex)
    • TcpNumConnections
    • REG_DWORD: 00fffffe (hex)
    • TcpMaxDataRetransmissions
    • REG_DWORD: 00000005 (hex)

2. Copy Database SQL Server dari SIMDA 2021 ke SIMDA 2022 dan Buat Koneksi ODBC

Buat database SQL Server baru untuk tahun anggaran 2022 sesuai urutan berikut:
  1. Backup dulu database SQL Server SIMDA 2021 dan restore ke database baru SIMDA 2022.
  2. Masuk ke aplikasi SIMDA 2021 dengan koneksi ke database baru yang SIMDA 2022. Buka menu "Parameter > Data Umum Pemda > Copy" masukan tahun anggaran 2022, nanti data umum pemda akan tercopy dari 2021 ke 2022.
  3. Lakukan copy data sub unit pada menu  "Tool > Copy Data Antar Tahun" isikan dari tahun 2021 dan pilih satu per satu sub unit agar data di tabel ta_sub_unit tahun anggaran 2022 terisi.
  4. Buka aplikasi windows ODBC Data Source 64 bit. Buka tab System DSN dan buat koneksi baru dengan menekan tombol Add. Pilih SQL Server, masukan nama koneksi "sipd". Pilih server database, secara default namanya adalah (local). Selanjutnya pilih koneksi odbc menggunkan user SQL Server, masukan username dan password SQL server. Kemudian rubah default koneksi database ke database simda 2022 yang sudah kita buat di poin nomor 1. Pada bagian akhir lakukan tes koneksi dan pastikan tes koneksi berhasil.

3. Install Aplikasi SIMDA API PHP untuk mengakomodir request API

Aplikasi SIMDA API PHP dapat didownload atau diclone dari https://github.com/agusnurwanto/SIMDA-API-PHP. Setting aplikasi sesuai urutan berikut:
  1. Folder aplikasi disetting pada folder C:\xampp\htdocs\simda-api
  2. Buka database wordpress atau juga bisa buat database baru dan jalankan atau import queri di https://raw.githubusercontent.com/agusnurwanto/SIMDA-API-PHP/master/table.sql. Jika sudah berhasil akan terbuat tabel baru bernama database_simda. Ubah atau tambah baris baru di tabel tersebut. Kolom hostname berisi nama settingan ODBC yang sudah kita buat sebelumnya. Masukan juga nama database, username dan password SQL Server pada masing-masing kolom tabel.
  3. Copy file config.php.example ke config.php
  4. Buka file config.php di sublime text editor atau semacamnya. Isi value dari APIKEY sesuai dengan nilai API KEY yang sudah disetting di wordpress menu SIPD Options > SIMDA Settings.
  5. Untuk DRIVER diisi dengan "odbc". Pastikan tulisan odbc di dalam petik karena dibaca sebagai string.
  6. HOST_SQL diisi localhost. DB_SQL diisi dengan nama database MYSQL yang ada tabel database_simda nya. USER_SQL diisi dengan username MYSQL, secara default usernya adalah root. PASS_SQL diisi dengan password MYSQL, secara default passwordnya kosong atau tidak perlu diisi.
  7. Edit php.ini dan aktifkan driver pdo odbc. Hapus tanda komentar ";" yang ada di depan extension=pdo_odbc
  8. Lakukan testing koneksi SQL Server dengan membuka link http://localhost/simda-api/?db=nama_database. Rubah parameter nama_database sesuai dengan nama database SIMDA 2022 yang sudah didaftarkan di tabel database_simda. Jika tidak ada error dan responnya adalah list tahun serta versi database SIMDA berarti setting koneksi dari simda-api-php ke SQL Server sudah berhasil.
  9. Buka halaman admin wordpress dan masuk ke menu SIPD Options > SIMDA Settings. Pada form URL API SIMDA masukan url http://localhost/simda-api/api.php. Pada form Database SIMDA masukan nama database SIMDA 2022 yang sudah didaftarkan di tabel database_simda. Klik Save Change atau Simpan.
  10. Pada halaman yang sama setelah data berhasil tersimpan, di bagian bawah halaman form Status koneksi SQL server SIMDA harusnya berisi Terkoneksi database SIMDA versi 2.9.0.9. Ini berarti koneksi antara wordpress dengan database SQL SERVER SIMDA 2022 sudah berhasil terkoneksi.

4. Install SIPD Chrome Extension di Browser Chrome

Chrome extension ini bisa diclone atau download dari https://github.com/agusnurwanto/sipd-chrome-extension. Fungsi dari aplikasi ini adalah untuk menarik data dari aplikasi SIPD ke server wordpress yang sudah kita install sebelumnya. Berikut langkah-langkah installasinya:
  1. Pasang sipd-chrome-extension pada direktori kerja. Sebaiknya di setting di folder C:\xampp\htdocs\extension agar mudah manajemennya dan mudah diingat.
  2. Copy file config.js.example ke config.js
  3. Buka file config.js di sublime text editor atau semacamnya.
  4. tahun_anggaran diisi 2022
  5. id_daerah diisi id daerah masing-masing yang terdaftar di SIPD. Untuk melihat id daerah, buka dan login ke aplikasi SIPD pemda masing-masing. Buka developer tools atau inspect element dan buka tab console log. Ketik drakor dan enter, akan muncul id daerah dari pemda yang bersangkutan.
  6. sipd_url diisi https://[nama daerah].sipd.kemendagri.go.id/
  7. url_server_lokal diisi url server wordpress seperti berikut http://localhost/wordpress/wp-admin/admin-ajax.php
  8. api_key diisi value dari form API KEY chrome extension di halaman SIPD Options admin wordpress
  9. Parmeter diatas adalah yang wajib diisi untuk keperluan penarikan data dari SIPD ke Wordpress. Untuk parameter lainnya diabaikan dulu saja.
  10. Buka halaman extension di chrome://extensions/. Aktifkan Developer Mode di pojok kanan atas. Klik tombol Load unpacked dan pilih folder sipd-chrome-extension.
  11. Jika melakukan edit config.js pada sipd-chrome-extension maka extension perlu direload (dimatikan dan diaktifkan lagi) agar file yang sudah diedit dapat berefek ke chrome extension.
  12. Setelah berhasil menginstall sipd-chrome-extension kita dapat menggunakan klik kanan pada mouse laptop dan fitur-fitur yang lainnya.

5. Setting dan Testing  Koneksi antar Aplikasi

Setelah semua aplikasi yang dibutuhkan sudah berhasil terinstall kita bisa memulai melakukan penarikan data dari SIPD ke SIMDA 2022 menggunakan sipd chrome extension. Berikut tahapanya:
  1. Sebaiknya melakukan integrasi data menggunakan user admin pemda karena user ini bisa membuka hampir semua halaman yang dibutuhkan untuk proses integrasi data.
  2. Login ke SIPD masing-masing pemda.
  3. Buka background page chrome extension yang ada di chrome://extensions/ pada SIPD Merah tools. Klik link background page dan akan membuka window browser baru. Buka tab Network untuk memonitor request yang nantinya akan dikirim ke server wordpress. Kita bisa melihat response server wordpress dengan mengklik link admin-ajax.php > Tab Preview atau Respone. Ini untuk melihat jika nanti ada notif error yang dikirim dari server wordpress.
  4. Buka Inspect Element dengan klik kanan pada halaman SIPD. Pilih menu Inspect, akan membuka halaman inspect element. Pilih tab Network untuk memonitor request yang dikirim ke server SIPD untuk mengambil data JSON. Data JSON ini nantinya akan dikirimkan ke background page dan selanjutnya dikirim ke server wordpress.
  5. Buka halaman Pengaturan > Profile > Perangkat Daerah. Akan ada tombol merah Singkron SKPD ke DB lokal. Klik tombol tersebut untuk mengintegrasikan data SKPD ke database Wordpress. Tunggu beberapa saat, monitor request di tab Network inspect element dan di background page. Pastikan tidak ada yang error. Jika berhasil nanti akan muncul popup status berhasil export SkPD.
  6. Buka admin wordpress dan masuk ke menu SIPD Options > SIMDA Settings
  7. Pada form Auto Singkron ke DB SIMDA pilih Ya, agar singkronisasi berikutnya dapat diteruskan ke database SQL Server.
  8. Dibagian bawah harusnya sudah muncul daftar SKPD yang sudah bershasil tersingkronisasi. Lakukan mapping kode SKPD sesuai dengan kode SKPD yang ada di tabel ta_sub_unit SQL Server. Setelah selesai disesuaikan mapping kode SKPD nya klik tombol Save Changed atau Simpan.
  9. Kembali ke SIPD, buka halaman Sub Kegiatan Belanja. Di bagian atas kanan tabel daftar SKPD akan muncul tombol merah Singkron RKA ke DB Lokal. Klik tombol tersebut dan lakukan singkronisasi data. Monitor tab Network di inspect element dan background page untuk memastikan tidak ada error request.
  10. Selama proses berlangsung kita bisa melihat hasil singkronisasi dengan membuka SIMDA PINK tahun anggaran 2022.
  11. Setelah RKA belanja selesai tersingkronisasi, kita bisa lanjut singkronisasi data pendapatan dan pembiayaan.
  12. Untuk anggaran kas bisa juga disingkronkan dengan menggunakan https://github.com/agusnurwanto/sipd-penatahusahaan-chrome-extension. Cara installnya mirip seperti yang sipd-chrome-extension. Silahkan login ke SIPD penatausahaan sesuai domain sipd_url yang sudah disetting di config.js . Pada halaman admin, buka menu Penatausahaan Pengeluaran > Rencana Anggaran Kas > Belanja. Pilih SKPD yang bersangkutan, di atas kanan tabel program kegiatan akan muncul tombol Singkron RAK ke DB lokal.
  13. Untuk melakukan singkronisasi data master SSH SIPD merah, masuk ke aplikasi SIPD merah menggunakan akun admin SSH atau penyelia SSH. Buka halaman daftar SSH, dibagian atas tabel daftar SSH akan ada tombol Singkron SSH ke DB lokal.
  14. Untuk pemda yang kesulitan dalam penerapan wp-sipd atau belum memiliki tenaga IT, kami menawarkan jasa setting dan penerapan wp-sipd. Informasi lebih detail di https://smkasiyahhomeschooling.blogspot.com/p/produk-dan-layanan-kami.html
Untuk koordinasi lebih lanjut bisa bergabung di group Telegram https://t.me/sipd_chrome_extension. Terimakasih, tetap jaga kesehatan dan semoga berkah untuk kita semua. Amin

Komentar

Posting Komentar

Postingan populer dari blog ini

FMIS Chrome Extension untuk Integrasi Data SIPD ke FMIS

Materi Pemrogramman Web Dasar