WebGIS Atribut Desa Widodomartani by Kelompok 5

 

WebGIS Atribut Desa Widodomartani

Gambar 1. Tampilan WebGIS Atribut Desa Widodomartani

Pengenalan

WebGIS Atribut Desa Widodomartani merupakan situs yang dibuat agar pengguna khususnya

masyarakat Desa Widodomartani dapat mendata kepemilikan atribut Desa yang terdiri atas

bangunan, lahan, kebun, jalan, ladang, dan sawah serta dapat melaksanakan pembangunan

untuk atribut desa yang mengalami kerusakan.

Latar Belakang

             WebGIS Atribut Desa Widodomartani merupakan situs yang dibuat agar pengguna khususnya

masyarakat Desa Widodomartani dapat mendata kepemilikan atribut Desa yang terdiri atas bangunan,

lahan, kebun, jalan, ladang, dan sawah serta dapat melaksanakan pembangunan untuk atribut desa

yang mengalami WebGIS Atribut Desa Widodomartani dibangun untuk memenuhi kebutuhan masyarakatnya meliputi:

  1. Kepemilikan atas bangunan dan tanah yang wajib diketahui oleh semua orang.
  2. Respon dari pemerintah setempat yang kurang mengetahui kondisi Desa di wilayahnya.                  

                Pada gambar 1 yaitu tampilan dari WebGIS Atribut Desa Widodomartani yang bisa langsung diakses pertamakali bernama tampilan halaman front end. Selain itu, terdapat tampilan halaman back end berupa tampilan belakang sebagai akses kelola dan edit. Tampilan tersebut secara lebih rinci dipaparkan  sebagai berikut,

A. Tampilan Halaman FrontEnd 

Gambar 2. Tampilan Halaman Front End WebGIS Atribut Desa Widodomartani


Halaman Front End atau halaman Home merupakan halaman pertama saat user membuka Webgis,

halaman ini dapat diakses oleh umum. Halaman ini memiliki navbar yang terdiri dari menu home, wilayah, kondisi, dan login serta sidebar yang terdiri dari

menu home, wilayah, dan kondisi seperti yang ditunjukkan pada gambar x1.

Dilengkapi fitur layer yang dapat diatur oleh user, fitur zoom in/zoom out peta, dan apabila maps diklik, akan muncul pop up koordinat


B. Tampilan Halaman  BackEnd

Halaman Back End merupakan halaman belakang setelah login yang langsung mengarah ke halaman Dashboard

seperti pada gambar xx2. Halaman ini hanya dapat diakses oleh user tertentu yang mampu mengelola atribut desa widodomartani.

User  tersebut harus mendaftarkan dirinya kepada admin agar dapat diinputkan profilnya sehingga dapat login.


Gambar 3. Bagian BackEnd WebGIS Atribut Desa Widodomartani


1. Navbar Back End

Gambar 4. Navbar di Tampilan BackEnd

Navbar Back End terdiri dari Home, kontak, dan Logout. Navbar Back End akan selalu ada pada seluruh menu di back end sehingga,

apabila user maupun admin berada pada suatu halaman menu, maka akan selalu tampil Navbar.


2. Home

Gambar 5. Halaman Dashboard

Navbar Home pada gambar 4, akan mengarahkan user kembali ke halaman dashboard seperti pada gambar 3

ketika diklik, walaupun user berada pada halaman menu yang lain,

3. Kontak

Gambar6. Kontak di Navbar BackEnd


Navbar Kontak akan mengarahkan user dan admin untuk menghubungi pengembang

yaitu kelompok 5 sendiri, via instagram.


4. LogOut

Navbar Logout akan mengarahkan user kembali menuju halaman home front end (halaman awal)

Gambar 7. Halaman Front End



5. Sidebar Back End

Gambar 8. Halaman Front End

Sidebar backend terdiri dari fitur tulisan ‘WebGIS Desa’, ikon, searching, dan menu.

Menu Sidebar terdiri atas Menu Dashboard, Wilayah, User, Kondisi, Atribut, dan Setting

seperti pada gambar xx7. Apabila sidebar diperkecil akan nampak seperti gambar disamping. 

Tampilan Sidebar  menjadi kumpulan  marker.


6. Tulisan ‘WebGIS Desa’

Tulisan "WebGIS Desa" ketika diklik berfungsi mengarahkan user kembali ke halaman dashboard

walaupun user telah mengakses menu-menu  lain.


7. Tulisan ‘WebGIS Desa’ dan ikon

Foto User dan namanya akan muncul apabila user telah login ke webgis yang sebelumnya

telah didaftarkan oleh admin.  User yang login adalah user dengan nama anne dengan email, password, dan foto

yang telah tercantum pada halaman user diatas.




   Gambar 9. Halaman Login


Halaman User


Apabila user telah login seperti pada gambar xx8 ke webgis yang sebelumnya telah didaftarkan oleh admin, maka foto user dan namanya akan muncul seperti pada gambar xx9,

User yang login adalah user dengan nama anne dengan email, password, dan foto yang telah tercantum pada halaman user gambar xx10.


9. Searching

                            Gambar 10. Searching wilayah Gambar 11. Halaman wilayah              

        

    Fitur searching dapat digunakan oleh user untuk mencari menu yang ada pada sidebar.

Misalnya, pada gambar 10, user hendak mencari menu wilayah, sehingga akan diarahkan langsung

pada halaman wilayah seperti pada gambar 11.


10. Menu Back End

Menu Back End terdiri dari menu dashboard,  wilayah, user, kondisi, atribut, dan settingSetiap menu memiliki halaman yang dapat di ditambah, dilihat, disimpan atau diupdate, dan dihapus.

  1. Menu Dashboard

Gambar 12. Halaman Dashboard    

            Setelah Login akan mengarah langsung pada Halaman Dashboard pada gambar 12 yang memiliki

navbar terdiri dari menu home, kontak, dan logout serta sidebar yang terdiri dari menu dashboard,

wilayah, user, kondisi, atribut, dan setting.  Terdapat pula marker foto user yang telah login

dan tulisan "WebGIS Desa" yang mengarah langsung ke dashboard. Halaman Dashboard,

memberikan informasi jumlah atribut, jumlah wilayah, dan jumlah kondisi yang telah diinputkan oleh

user. Terdapat pula foto anggota kelompok yang dapat berputar.


  1. Menu Wilayah

Gambar 13. Halaman Wilayah    

                Menu Wilayah berisi tentang halaman wilayah pada gambar xx13 yang dapat ditambah oleh usersehingga akan tampil pada peta.  User juga dapat mengedit wilayah yang sudah ditambahkan sebelumnya,
dan dapat menghapusnya.Pada gambar xx13, terdapat fitur dari halaman Wilayah yang sudah tersedia
Desa Widodomartani yang AOI-nya berwarna oranye.


    Gambar xx14. edit wilayah                                 Gambar xx15. wilayah berhasil edit

Pada halaman edit wilayah pada gambar xx14, user dapat mengedit nama wilayah

memlih warna, dan atau memasukan geojson wilayah sehingga wilayah dapat muncul pada peta, seperti gambar xx15,

warna wilayah Desa Widodomartani yang awalnya oranye diedit menjadi biru.


                Gambar xx16. input wilayah                             Gambar xx17. edit wilayah    


Pada gambar xx16 halaman input wilayah, user dapat menambahkan wilayah dengan

menginput nama wilayah, memilih warna, dan memasukan file geojson yang dapat diperoleh

dari konversi shp ke geojson. Contohnya, user berhasil menambahkan AOI 12  berwarna pink

seperti pada gambar xx17.


Gambar xx18. hapus wilayah


Data Wilayah yang sudah ditambahkan, misalnya AOI 12 berwarna pink pada gambar xx17,

dapat dihapus sehingga hanya menyisakan wilayah desa widodomartani seperti pada gambar xx18.


Gambar xx19. hapus wilayah


Wilayah yang telah ditambahkan dan dikelola  oleh user akan terintegrasi ke halaman Front End

seperti gambar diatas yang terdapat wilayah desa widodomartani yang telah diedit menjadi warna biru

dan AOI 12 berwarna pink yang telah ditambahkan sebelumnya.


  1. Menu User

Gambar xx20. hapus wilayah


Menu user pada gambar xx20 berisi halaman user yang terdiri dari database list user yang  diinputkan oleh Admin.

Admin memiliki kuasa penuh terhadap WebGIS Atribut Desa Widodomartani sehingga hanya masyarakat Desa Widodomartaniterpilih saja yang dapat mengelola atribut Desa Widodomartani, sedangkan user umum hanya  dapat mengakses tampilan FrontE ndsaja. Data yang diinputkan admin terekam dalam sistem database yaitu Nama User yang digunakan saat login, email, pasword keamanan,

dan file foto unggahan. User juga dapat melakukan tindakan edit dan menghapus data jika terjadi ketidaksesuaian. 

  

 Pada gambar xx21 halaman user memiliki fitur edit dan hapus. Pada awalnya, terdapat dua user bernama Dignara

dan fotonya berkerudung pink serta anne berkerudung biru.


                    Gambar xx20. edit user             Gambar xx21. update data user 


Pada gambar xx20, admin dapat mengedit nama user atau email, password, dan atau foto user. 

Misalnya seperti pada gambar xx21, admin mengedit foto user yang semula berkerudung biru

diganti menjadi foto berkerudung hitam dan yang awalnya bernama anne menjadi annelys.


                Gambar xx20. edit user                 Gambar xx21. update data user


Pada halaman input user, admin dapat menambahkan profil user yang telah terdaftar & terpercaya

mengelola atribut desa widodomartani seperti pada gambar xx20. Pada gambar xx21, admin berhasil

menambahkan nama user yaitu iqbal, dengan email dan passwordnya beserta foto profilnya. 


Gambar xx22. Login Iqbal    


              Pada gambar xx22, user bernama 'Iqbal' yang telah ditambahkan sebelumnya oleh admin,

dapat logiin dan pada sidebar muncul nama dan fotonya.


Gambar xx23. Hapus data user


                Pada gambar xx23, admin dapat menghapus profil user sehingga user yang sebelumnya bisa login,

kini hanya dapat mengakses halaman depan saja.


  1. Menu Kondisi

Gambar xx23. Halaman Kondisi


        Menu kondisi berisi halaman kondisi seperti pada gambar xx23 yaitu terdapat 4 pengkelasan kondisi yang menandai keadaan atribut (bangunan, jalan, sawah, kebun, lahan, dan ladang) pada peta sehingga dapat diketahui status kondisi ada pada aman, rusak, diperbaiki, atau masih tahap pelaporan.  User dapat diganti markernya dengan fitur aksi 'ganti marker

  • Atribut Aman : ditandai dengan marker berwarna biru, menandakan bahwa status atribut dalam keadaan aman.
  • Atribut Rusak : ditandai dengan marker berwarna merah, menandakan status atribut dalam keadaan rusak dan belum ditangani oleh masyarakat/pemerintahan setempat.
  • Atribut Diperbaiki : ditandai dengan marker berwarna kuning, menandakan kondisi atribut yang awalnya rusak sedang dalam masa perbaikan (sedang ditangani  oleh masyarakat/pemerintahan setempat.
  • Atribut Pelaporan: ditandai dengan marker berwarna oranye, menandakan kondisi atribut yang telah rusak, tetapi masih dalam masa pelaporan atau belum ditangani  oleh masyarakat/pemerintahan setempat.


                        Gambar xx24. Halaman Kondisi berisi marker kondisi Gambar xx25. Tampilan yang disajikan 

                         dari data kondisi yang sudah ada


Pada gambar xx24, User dapat mengganti marker di halaman kondisi dengan

fitur aksi 'ganti marker'. Misalnya, pada gambar diatas user mengganti marker pelaporan, yang semula marker berwarna oranye menjadi marker berlogo  TGM UPNVYK sehingga, marker tersebut akan tampil pada halaman fronten d

webgis yang dapat dilihat pada gambar xx25.


  1. Menu Atribut

Gambar xx26. Halaman Kondisi berisi marker kondis


Pada menu atribut di gambar xx26, terdapat halaman atribut, halaman ini menjadi fungsi utama

dari WebGIS Atribut Desa Widodomartani karena user dapat mengelola informasi atribut desa

seperti nama pemilik, jenis atribut (lahan, ladang, sawah, kebun, bangunan, dan jalan) yang

berada di sekitar atau dimiliki oleh sang pemilik. Terdapat luas tanah dalam m2 dari jenis atribut

yang dimiliki lalu terdapat informasi jumlah keluarga pemilik.


Terdapat kondisi yang menunjukkan status atribut dalam keadaan rusak, aman, pelaporan, dan

diperbaiki. Apabila rusak atau sedang diperbaiki, biasanya membutuhkan anggaran yang dapat

dicantumkan. Selain itu terdapat alamat atribut dan foto yang didokumentasikan berdasar kondisi atribut.

Halaman atribut, dilengkapi dengan fitur tambah atribut, hapus atribut, edit atribut, dan

detil atribut seperti pada gambar dibawah ini.


Gambar xx27. Halaman Input Atribut 


Gambar xx28. User Berhasil Menambahkan Halaman Atribut  

 

            Pada halaman input atribut user dapat menambahkan informasi atribut, misalnya seperti gambar xx28,

user menambahkan  nama pemilik pak Kadus yang terdiri dari 4 jumlah keluarga memiliki kebun  seluas  500 m2 yang sedang mengalami perbaikan dengan anggarannya sebesar Rp 500.000. Alamat kebun Pak Kadus berada di jalan pandawa,pd 1 yang kondisi kawasan pada saat itu, nampak pada foto. 


Gambar xx28. User berhasil mengedit halaman atribut


            Pada menu atribut gambar xx28, terdapat halaman edit atribut, halaman ini memudahkan user

untuk mengelola atribut Desa Widodomartani yaitu apabila terdapat kesalahan nama, jenis atribut, luas,

jumlah keluarga, anggaran, kondisi, alamat, dan foto,  user dapat menggantinya dengan fitur aksi berbentuk ikon pena. 


Gambar xx29. User berhasil menghapus Halaman Atribut  


                Pada halaman atribut seperti gambar xx29, user dapat menghapus informasi atribut.

Misalnya, informasi  atribut dengan nama pemilik 'Pak Kiki' telah berhasil dihapus.


Gambar xx30.Halaman Detail Atribut


                Pada halaman detail atribut gambar xx30, user dapat melihat informasi secara lebih detail

dengan fitur aksi yang berbentuk ikon mata. Informasi tersebut terdiri dari foto dan peta lokasi atribut dimana dibawahnya berisi informasi atribut yang sama dengan halaman atribut. Informasinya, terdiri dari nama pemilik, jumlah keluarga, jenis atribut, kondisi atribut, luasnya, anggarannya, dan alamatnya.



  1. Menu Setting 

Gambar xx31.Halaman Detail Atribut


                             Pada menu setting gambar xx31, terdapat halaman setting yang berfungsi mengatur

koordinat wilayah  dan ketinggian peta secara permanen  melalui zoom view dengan nama website

WebGIS Atribut Desa Widodomartani.  


                    Pada gambar berikut, terlihat zoom view sebesar 16 dan koordinat yang menampilkan

kawasan Desa Widodomartani . Pengaturan ini terintegrasi dengan halaman frontEnd sehingga ketika

user umum mengakses halaman frontend muncul ketinggian dan lokasi sesuai yang telah diatur pada

halaman setting berikut, yaitu menampilkan kawasan Desa Widodomartani.


Gambar xx32.Halaman Setting berhasil menampilkan Indonesia  


                Pada menu setting, terdapat halaman setting yang berfungsi mengatur koordinat wilayah 

dan ketinggian peta secara permanen  melalui zoom view dengan nama website WebGIS Atribut Desa Widodomartani.  

Pada gambar berikut, user mengatur ketinggian peta yang ada di kawasan widodomartani sebesar 5 yang awalnya sebesar 16,

sehingga peta menjauh (makin tinggi) yang awalnya hanya meperlihatkan Desa Widodomartani kini hingga memperlihatkan seluruh Indonesia. 


Gambar xx32.HalamanFront End menampilkan Indonesia


                Pengaturan ini terintegrasi dengan halaman frontEnd sehingga halaman front end

akan mengikuti pengaturan pada halaman setting, yang awalnya hanya memperlihatkan Desa Widodomartani

kini telah terlihat seluruh Indonesia seperti pada gambar xx32.


C. Demo WebGIS

    Silakan saksikan Demo WebGIS ini pada video berikut,



Tidak ada komentar:

Posting Komentar

Hubungi Kami

Kami akan memberikan pelayanan terbaik pada Anda

Nama*


Pesan*


  • Telepon(0274)486733
  • AlamatDepok, Yogyakarta
  • EmailGISGeomatika20@gmail.com

Pages