1

PROSEDUR MENJALANKAN PROGRAM

Prosedur Instalasi Aplikasi

Berikut adalah langkah-langkah penginstalasian aplikasi sebelum digunakan,

yakni :

1. Jalankan sistem operasi Microsoft Windows 7 Home Premium 32 Bit

2. Install SQL Server 2008

3. Install Microsoft Visual Studio 2010 Ultimate

4. Masukkan data peta pada directory : D:/

5. Restore database ke DBMS

6. Install dan jalankan aplikasi SIG

2

Prosedur Menjalankan Aplikasi

Berikut ini adalah prosedur menjalankan aplikasi, yakni :

Tampilan Halaman Utama

Gambar Tampilan Halaman Utama

Ini adalah tampilan halaman utama aplikasi yang akan muncul pertama kali ketika program dijalankan. Jika user memilih tombol “Admin” maka akan muncul “Tampilan Halaman Login”. Jika user memilih tombol “User” maka akan muncul “Tampilan Halaman Outlet - User”. Jika user memilih tombol “Help” maka akan muncul “Tampilan Halaman Help”. Jika user memilih tombol “Exit” maka akan keluar dari aplikasi.

3

Tampilan Halaman Outlet - User

Gambar Tampilan Halaman Outlet - User

Tampilan ini akan muncul apabila user memilih tombol “User”. Pada tampilan halaman outlet ini menampilkan peta persebaran outlet CV Wijayatama Kosmedik di wilayah DKI Jakarta yang dibagi per-wilayah administrasi, dengan layer persebaran outlet, jalan, batas wilayah administrasi Jakarta Utara, batas wilayah administrasi Jakarta Barat, batas wilayah administrasi Jakarta Pusat, batas wilayah administrasi Jakarta Timur dan batas wilayah administrasi Jakarta Selatan serta data-data detail tentang masing-masing outlet yang dilengkapi fungsionalitas untuk pencarian data berdasarkan outlet id, nama outlet, owner, alamat, kota, kecamatan dan propinsi. Terdapat 2 tombol pada tampilan halaman ini, yakni tombol “Data Barang” dan tombol “Kembali”. Jika user memilih tombol “Data Barang” maka akan menuju “Tampilan Halaman Master Barang – User”. Jika user memilih tombol “Kembali” maka akan kembali ke “Tampilan Halaman Utama”.

4

Tampilan Halaman Master Barang - User

Gambar Tampilan Halaman Master Barang – User

Ini adalah “Tampilan Halaman Master Barang – User” yang mendata daftar barang yang tersedia. Pada halaman ini, tersedia fungsionalitas pencarian data berdasarkan barang id, nama barang, dan warna. Tombol “Kembali” untuk kembali ke “Tampilan Halaman Outlet – User”.

5

Tampilan Halaman Login

Gambar Tampilan Halaman Login

Ini adalah “Tampilan Halaman Login” yang akan muncul apabila user memilih tombol “Admin” pada “Tampilan Halaman Utama”. Pada tampilan halaman ini, hanya user yang memiliki hak akses sebagai admin yang dapat masuk ke dalam “Tampilan Halaman Menu Admin. Form yang harus diisi oleh user adalah username dan password. Jika user memilih tombol “Cancel” maka user akan kembali ke “Tampilan Halaman Utama”. Jika user memilih tombol “Login” maka form yang telah diisi oleh user akan di validasi terlebih dahulu sebelum dinyatakan memiliki hak akses atau tidak sebagai admin.

6

Tampilan Validasi Login

Gambar Tampilan Validasi Login

Jika username atau password yang di input oleh user salah, maka box peringatan akan muncul.

7

Tampilan Halaman Menu Utama Admin

Gambar Tampilan Halaman Menu Utama Admin

Ini adalah “Tampilan Halaman Menu Utama Admin” yang berisi menu-menu yang dimiliki oleh admin, antara lain “List Admin”, “Outlet”, “ Master Penjualan”, dan “Master Barang”. Pada bagian tengah merupakan letak keluarnya konten sesuai dengan menu yang dipilih.

8

Tampilan Halaman List Admin

Gambar Tampilan Halaman List Admin

Ini adalah “Tampilan Halaman List Admin” yang berisi daftar user yang memiliki hak akses sebagai admin. Terdapat data antara lain user id, nama karyawan, dan jabatan, serta fungsionalitas pencarian data. Jika admin memilih tombol “Tambah Admin” maka akan menuju “Tampilan Halaman Tambah Admin”.

9

Tampilan Halaman Tambah Admin

Gambar Tampilan Halaman Tambah Admin

Ini adalah “Tampilan Halaman Tambah Admin” yang digunakan untuk menambah user yang ingin diberikan hak akses sebagai admin.

10

Tampilan Halaman Outlet - Admin

Gambar Tampilan Halaman Outlet – Admin

Ini adalah “Tampilan Halaman Outlet – Admin” yang digunakan untuk melihat peta persebaran outlet CV Wijayatama Kosmedik di wilayah DKI Jakarta yang dibagi per-wilayah administrasi, dengan layer persebaran outlet, jalan, batas wilayah administrasi Jakarta Utara, batas wilayah administrasi Jakarta Barat, batas wilayah administrasi Jakarta Pusat, batas wilayah administrasi Jakarta Timur dan batas wilayah administrasi Jakarta Selatan serta data-data detail tentang masing-masing outlet yang dilengkapi fungsionalitas untuk pencarian data berdasarkan outlet id, nama outlet, owner, alamat, kota, kecamatan dan propinsi. Terdapat 3 tombol pada tampilan halaman ini, antara tombol “ Tambah” yang digunakan untuk menambah data outlet, tombol “Update” digunakan untuk melakukan update terhadap data outlet dan tombol “Hapus” untuk menghapus data outlet.

11

Tampilan Halaman Tambah Data Outlet - Admin

Gambar Tampilan Halaman Tambah Data Outlet – Admin

Ini adalah “Tampilan Halaman Tambah Data Outlet – Admin” yang digunakan untuk menambah data outlet.

12

Tampilan Halaman Update Data Outlet - Admin

Gambar Tampilan Halaman Update Data Outlet – Admin

Ini adalah “Tampilan Halaman Update Data Outlet – Admin” yang digunakan untuk melakukan update terhadap data outlet.

13

Tampilan Validasi Hapus Data Outlet - Admin

Gambar Tampilan Validasi Hapus Data Outlet – Admin

Ini adalah “Tampilan Validasi Hapus Data Outlet – Admin” yang akan muncul apabila admin memilih tombol “Hapus” pada “Tampilan Halaman Outlet – Admin”. Jika admin pilih “Yes” maka data outlet akan terhapus dan jika admin pilih “No” maka operasi hapus dibatalkan.

14

Tampilan Halaman Master Penjualan - Admin

Gambar Tampilan Halaman Master Penjualan – Admin

Ini adalah “Tampilan Halaman Master Penjualan – Admin” yang memperlihatkan data penjualan antara perusahaan dengan outlet-nya. “Tampilan Halaman Master Penjualan – Admin” antara lain berisi data transaksi id, tanggal, outlet id, nama outlet, barang id, nama barang, warna, stock, dan qty, serta dilengkapi fungsionalitas pencarian data. Terdapat 2 tombol pada halaman ini yakni tombol “Tambah Data” untuk menambah data penjualan dan tombol “Hapus Data” untuk menghapus data penjualan.

15

Tampilan Halaman Tambah Data Penjualan - Admin

Gambar Tampilan Halaman Tambah Data Penjualan – Admin

Ini adalah “Tampilan Halaman Tambah Data Penjualan – Admin” yang digunakan untuk menambah data penjualan. Terdapat tombol (+) untuk menambah data barang yang ingin dijual dan tombol (-) untuk mengurangi data barang yang ingin dijual. Tombol “Simpan” digunakan untuk menyimpan data penjualan.

16

Tampilan Validasi Hapus Data Penjualan - Admin

Gambar Tampilan Validasi Hapus Data Penjualan – Admin

Ini adalah “Tampilan Validasi Hapus Data Penjualan – Admin” yang akan muncul apabila admin memilih tombol “Hapus Data” pada “Tampilan Halaman Master Penjualan – Admin”. Jika admin memilih tombol “Yes” maka data penjualan akan terhapus, dan jika admin memilih tombol “No” maka akan membatalkan operasi hapus data penjualan.

17

Tampilan Master Barang - Admin

Gambar Tampilan Master Barang – Admin

Ini adalah “Tampilan Master Barang – Admin” yang digunakan untuk menampilkan data barang yang tersedia dan dilengkapi dengan fungsionalitas pencarian data. Data barang yang ditampilkan antara lain meliputi barang id, nama barang, warna, stock, dan harga. Terdapat 3 tombol pada “Tampilan Master Barang – Admin” yakni tombol “Tambah Data” digunakan untuk menambah data barang, tombol “Update Data” digunakan untuk melakukan update data barang dan tombol “Hapus Data” digunakan untuk menghapus data barang.

18

Tampilan Halaman Tambah Data Barang - Admin

Gambar Tampilan Halaman Tambah Data Barang – Admin

Ini adalah “Tampilan Halaman Tambah Data Barang – Admin” yang digunakan untuk menambah data barang.

19

Tampilan Halaman Update Data Barang - Admin

Gambar Tampilan Halaman Update Data Barang – Admin

Ini adalah “Tampilan Halaman Update Data Barang – Admin” yang digunakan untuk melakukan update terhadap data barang.

20

Tampilan Validasi Hapus Data Barang - Admin

Gambar Tampilan Validasi Hapus Data Barang – Admin

Ini adalah “Tampilan Validasi Hapus Data Barang – Admin” yang akan muncul apabila admin memilih tombol “Hapus Data” pada “Tampilan Halaman Master Barang – Admin”. Jika admin memilih tombol “Yes” maka data barang akan terhapus dan jika admin memilih tombol “No” maka operasi hapus data barang akan dibatalkan.

21

Tampilan TOC (Table of Contents) Control - User

Gambar Tampilan TOC (Table of Contents) Control – User

Komponen yang ditandai dengan lingkaran hitam dinamakan komponen TOC (Table of Contents) Control. Komponen ini berguna untuk memilih layer yang ingin ditampilkan pada komponen peta utama. Yang ditampilkan pada peta utama adalah layer yang diberi tanda centang yang antara lain : layer persebaran outlet, jalan, batas wilayah administrasi Jakarta Utara, batas wilayah administrasi Jakarta Barat, batas wilayah administrasi Jakarta Pusat, batas wilayah administrasi Jakarta Timur, dan batas wilayah administrasi Jakarta Selatan.

22

Tampilan Tools - User

Gambar Tampilan Tools – User

Komponen yang ditandai lingkaran hitam dinamakan Tools untuk “Tampilan Halaman Outlet - User”. Tools tersebut terdiri dari “Save New Shapefile”, “Add Shapefile”, “ Clear”, “ Pan Tool”, “ Zoom in“, “Zoom out”, “ Previous Zoom”, “ Next Zoom”, “ Zoom to Full”. Tiap tools tersebut akan dijelaskan pada tahap berikutnya.

23

Tampilan Save New Shapefile - User

Gambar Tampilan Save New Shapefile - User

Ini adalah “Tampilan Save New Shapefile – User” yang digunakan untuk menyimpan data layer baru hasil overlay.

24

Tampilan Add Shapefile - User

Gambar Tampilan Add Shapefile – User

Ini adalah “Tampilan Add Shapefile – User” yang digunakan untuk menambah layer baru pada peta utama yang memungkinkan untuk melakukan overlay.

25

Tampilan Clear - User

Gambar Tampilan Clear – User (A)

26

Gambar Tampilan Clear – User (B)

Ini adalah “Tampilan Clear – User” yang digunakan untuk menghapus peta dari aplikasi. Pada “Tampilan Clear – User (A)” adalah kondisi sebelum user memilih tombol “Clear” dan “Tampilan Clear – User (B)” adalah kondisi saat user telah memilih tombol “Clear”.

27

Tampilan Zoom In - User

Gambar Tampilan Zoom In – User (A)

28

Gambar Tampilan Zoom In – User (B)

Ini adalah “Tampilan Zoom In – User” yang digunakan untuk memperbesar peta pada “Tampilan Halaman Outlet – User”. Pada tampilan “Tampilan Zoom In – User (A)” adalah kondisi pada saat peta belum di zoom in dan “Tampilan Zoom In – User (B)” adalah kondisi saat peta telah di zoom in.

29

Tampilan Zoom Out – User

Gambar Tampilan Zoom Out – User (A)

30

Gambar Tampilan Zoom Out – User (B)

Ini adalah “Tampilan Zoom Out – User“ digunakan untuk memperkecil peta pada “Tampilan Halaman Outlet – User”. “Tampilan Zoom Out – User (A)“ adalah kondisi sebelum peta di zoom out dan “Tampilan Zoom Out – User (B)“ adalah kondisi setelah peta di zoom out.

31

Tampilan Pan Tool - User

Gambar Tampilan Pan Tool – User (A)

32

Gambar Tampilan Pan Tool – User (B)

Ini adalah “Tampilan Pan Tool – User” yang digunakan untuk mengeser-geser peta. “Tampilan Pan Tool – User (A)” adalah kondisi sebelum peta digeser dan “Tampilan Pan Tool – User (B)” adalah kondisi setelah peta digeser.

33

Tampilan Previous Zoom – User

Gambar Tampilan Previous Zoom – User (A)

34

Gambar Tampilan Previous Zoom – User (B)

Ini adalah “Tampilan Previous Zoom – User” yang digunakan untuk kembali ke posisi sebelum melakukan zoom in pada peta (undo). “Tampilan Previous Zoom – User (A)” adalah kondisi sebelum dilakukannya previous zoom dan “Tampilan Previous Zoom – User (B)” adalah kondisi setelah dilakukan previous zoom.

35

Tampilan Next Zoom - User

Gambar Tampilan Next Zoom – User (A)

36

Gambar Tampilan Next Zoom – User (B)

Ini adalah “Tampilan Next Zoom – User” yang digunakan untuk mengembalikan posisi awal sebelum melakukan zoom out pada peta (redo). “Tampilan Next Zoom – User (A)” adalah kondisi sebelum melakukan next zoom dan “Tampilan Next Zoom – User (B)” adalah kondisi setelah melakukan next zoom.

37

Tampilan Zoom to Full - User

Gambar Tampilan Zoom to Full - User (A)

38

Gambar Tampilan Zoom to Full - User (B)

Ini adalah “Tampilan Zoom to Full – User” yang digunakan untuk membuat peta kembali pada kondisi tampilan awal. “Tampilan Zoom to Full – User (A)” adalah kondisi sebelum dilakukannya zoom to full dan “Tampilan Zoom to Full – User (B)” adalah kondisi setelah dilakukannya zoom to full.

39

Tampilan Koordinat - User

Gambar Tampilan Koordinat – User

Ini adalah “Tampilan Koordinat – User” yang memperlihatkan latitude dan longitudinal sesuai posisi pointer pada peta.

40

Tampilan Hasil Pencarian Data Outlet - User

Gambar Tampilan Hasil Pencarian Data Outlet – User

Ini adalah “Tampilan Hasil Pencarian Data Outlet – User” yang digunakan untuk mencari data outlet secara spesifik. Pencarian data antara lain dapat dilakukan berdasarkan outlet id, nama outlet, owner, alamat, kecamatan, kota, dan propinsi.

41

Tampilan TOC (Table of Contents) Control - Admin

Gambar Tampilan TOC (Table of Contents) Control – Admin

Komponen yang ditandai dengan lingkaran hitam dinamakan komponen TOC (Table of Contents) Control. Komponen ini berguna untuk memilih layer yang ingin ditampilkan pada komponen peta utama. Yang ditampilkan pada peta utama adalah layer yang diberi tanda centang yang antara lain : layer persebaran outlet, jalan, batas wilayah administrasi Jakarta Utara, batas wilayah administrasi Jakarta Barat, batas wilayah administrasi Jakarta Pusat, batas wilayah administrasi Jakarta Timur, dan batas wilayah administrasi Jakarta Selatan.

42

Tampilan Tools - Admin

Gambar Tampilan Tools – Admin

Komponen yang ditandai lingkaran hitam dinamakan Tools untuk “Tampilan Halaman Outlet – Admin”. Tools tersebut terdiri dari “Save New Shapefile”, “ Add Shapefile”, “ Clear”, “ Pan Tool”, “ Zoom in“, “ Zoom out”, “ Previous Zoom”, “ Next Zoom”, “ Zoom to Full”. Tiap tools tersebut akan dijelaskan pada tahap berikutnya.

43

Tampilan Save New Shapefile - Admin

Gambar Tampilan Save New Shapefile – Admin

Ini adalah “Tampilan Save New Shapefile – Admin” yang digunakan untuk menyimpan data layer baru.

44

Tampilan Add Shapefile - Admin

Gambar Tampilan Add Shapefile – Admin

Ini adalah “Tampilan Add Shapefile – Admin” yang digunakan untuk menambah layer baru pada peta utama.

45

Tampilan Clear - Admin

Gambar Tampilan Clear – Admin (A)

46

Gambar Tampilan Clear – Admin (B)

Ini adalah “Tampilan Clear – Admin” yang digunakan untuk menghapus peta dari aplikasi. Pada “Tampilan Clear – Admin (A)” adalah kondisi sebelum admin memilih tombol “Clear” dan “Tampilan Clear – Admin (B)” adalah kondisi saat admin telah memilih tombol “Clear”.

47

Tampilan Zoom In - Admin

Gambar Tampilan Zoom In – Admin (A)

48

Gambar Tampilan Zoom In – Admin (B)

Ini adalah “Tampilan Zoom In – Admin” yang digunakan untuk memperbesar peta pada “Tampilan Halaman Outlet – Admin”. Pada “Tampilan Zoom In – Admin (A)” adalah kondisi pada saat peta belum di zoom in dan “Tampilan Zoom In – Admin (B)” adalah kondisi saat peta telah di zoom in.

49

Tampilan Zoom Out - Admin

Gambar Tampilan Zoom Out – Admin (A)

50

Gambar Tampilan Zoom Out – Admin (B)

Ini adalah “Tampilan Zoom Out – Admin” digunakan untuk memperkecil peta pada “Tampilan Halaman Outlet – Admin”. “Tampilan Zoom Out – Admin (A)” adalah kondisi sebelum peta di zoom out dan “Tampilan Zoom Out – Admin (B)” adalah kondisi setelah peta di zoom out.

51

Tampilan Pan Tool - Admin

Gambar Tampilan Pan Tool – Admin (A)

52

Gambar Tampilan Pan Tool – Admin (B)

Ini adalah “Tampilan Pan Tool – Admin” yang digunakan untuk mengeser-geser peta. “Tampilan Pan Tool – Admin (A)” adalah kondisi sebelum peta digeser dan “Tampilan Pan Tool – Admin (B)” adalah kondisi setelah peta digeser.

53

Tampilan Previous Zoom - Admin

Gambar Tampilan Previous Zoom – Admin (A)

54

Gambar Tampilan Previous Zoom – Admin (B)

Ini adalah “Tampilan Previous Zoom – Admin” yang digunakan untuk kembali ke posisi sebelum melakukan zoom in pada peta (undo). “Tampilan Previous Zoom – Admin (A)” adalah kondisi sebelum dilakukannya previous zoom dan “Tampilan Previous Zoom – Admin (B)” adalah kondisi setelah dilakukan previous zoom.

55

Tampilan Next Zoom - Admin

Gambar Tampilan Next Zoom – Admin (A)

56

Gambar Tampilan Next Zoom – Admin (B)

Ini adalah “Tampilan Next Zoom – Admin” yang digunakan untuk mengembalikan posisi awal sebelum melakukan zoom out pada peta (redo). “Tampilan Next Zoom – Admin (A)” adalah kondisi sebelum melakukan next zoom dan “Tampilan Next Zoom – Admin (B)” adalah kondisi setelah melakukan next zoom.

57

Tampilan Zoom to Full - Admin

Gambar Tampilan Zoom to Full – Admin (A)

58

Gambar Tampilan Zoom to Full – Admin (B)

Ini adalah “Tampilan Zoom to Full – Admin” yang digunakan untuk membuat peta kembali pada kondisi tampilan awal. “Tampilan Zoom to Full – Admin (A)” adalah kondisi sebelum dilakukannya zoom to full dan “Tampilan Zoom to Full – Admin (B)” adalah kondisi setelah dilakukannya zoom to full.

59

Tampilan Koordinat - Admin

Gambar Tampilan Koordinat - Admin

Ini adalah “Tampilan Koordinat – Admin” yang memperlihatkan latitude dan longitudinal sesuai posisi pointer pada peta.

60

Tampilan Hasil Pencarian Data Outlet - Admin

Gambar Tampilan Hasil Pencarian Data Outlet – Admin

Ini adalah “Tampilan Hasil Pencarian Data Outlet – Admin” yang digunakan untuk mencari data outlet secara spesifik. Pencarian data antara lain dapat dilakukan berdasarkan outlet id, nama outlet, owner, alamat, kecamatan, kota, dan propinsi. Peta menampilkan lokasi outlet yang dicari berdasarkan keyword yang diinput.