8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

1/25

LAPORAN TUGAS

SISTEM INFORMASI GEOGRAFIS BERBASIS WEBPERSEBARAN HOTEL DI KOTA MALANG

Dosen Pengampu :

Dedy Kurnia Sunaryo, ST,.MT

14.25.908

14.25.915

14.25.919

14.25.920

Disusun Oleh :

Verinda Septita N

Denny Santana Sinaga

M Aldin Yusfan

Sri Kartika Sakti

Husein Agustino K 14.25.925

TEKNIK GEODESI DAN GEOINFORMATIKA

FAKULTAS TEKNIK SIPIL DAN PERENCANAAN

INSITUT TEKNOLOGI NASIONAL

MALANG

2014

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

2/25

Daftar Isi

Daftar Isi .......................................................................................................... i

Jadwal Rencana................................................................................................ 1

Kualitas Informasi............................................................................................ 2

Presentasi........................................................................................................... 4

Tujuan ............................................................................................ 5

Dasar Teori .................................................................................... 6

Skema Konseptual ......................................................................... 7

Diagram ......................................................................................... 8

Skema SIG ..................................................................................... 9

Tampilan Web ............................................................................... 10

Pembuatan Peta................................................................................................ 11

A. Mengelola Peta .dwg di software arcGIS ...................................... 11

B. Kompres file ke format .zip untuk upload di arcGis.com ............. 12

Upload Peta....................................................................................................... 13

A.

Menambahkan Layer dari Shapefile (.shp) .................................... 13B.

Menambahkan Layer dari file .CSV .............................................. 14

C. Menyimpan Peta ............................................................................ 15

D. Share / Embed Map ....................................................................... 15

Pembuatan Website.......................................................................................... 16

A. Melakukan Pemotongan Gambar .................................................. 17

B.

Membuat Chatbox untuk Website ................................................. 17

C. Design Web menggunakan Web Page Maker ............................... 17

D. Publikasi hasil design di Web Page Maker ................................... 20

Upload Website................................................................................................. 21

A. Pendaftaran Domain ...................................................................... 21

B.

Pendaftaran Hosting ...................................................................... 22

C. Upload Design Web....................................................................... 23

i

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

3/25

: perencanaan

: pelaksanaan

2

3

4

5

6

Publikasi

Jadwal Rencana Pembuatan Sistem Informasi Geograsis Berbasis WEB

Nama Kegiatan

Minggu ke

Mencari data

dan

melakukan

survei

Mengolah dataPembuatan

peta

Pemrograman

sistem InformasiBerbasis WEB

1

Pembuatan

Kelompok danPerencanaan

Membuat

power point

Pembuatan

web dengan

prosentase 30

%

Pembuatan

Web dengan

prosentase

60%

Teknik Geodesi dan GeoinformatikaFakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 1

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

4/25

KUALITAS INFORMASI

Seiring dengan perkembangan jaman dan teknologi, manusia semakin membutuhkan

informasi yang tidak terbatas. Tanpa dibatasinya manusia untuk mencari informasi, terdapat

banyak cara untuk mendapatkan informasi yang dibutuhkan. Untuk memenuhi informasi, salah

satunya adalah dengan membentuk Sistem Informasi Geografis.

Sistem adalah suatu kesatuan yang terdiri komponen atau elemen yang dihubungkan

bersama untuk memudahkan aliran informasi, materi atau energi untuk mencapai suatu tujuan.

Informasi adalah pesan (ucapan atau ekspresi) atau kumpulan pesan yang terdiri dari order

sekuens dari simbol, atau makna yang dapat ditafsirkan dari pesan atau kumpulan pesan.

Geografis adalah keterangan tentang suatu lokasi serta persamaan dan perbedaan (variasi)

keruangan atas fenomena fisik dan manusia di atas permukaan bumi.

Berdasarkan pengertian-pengertian di atas dapat disimpulkan bahwa pengertian dari

Sistem Informasi Geografis adalah sistem komputer yang memiliki kemampuan untuk

membangun, menyimpan, mengelola dan menampilkan informasi berefrensi geografis, misalnya

data yang diidentifikasi menurut lokasinya, dalam sebuah database.

Web adalah halaman informasi yang disediakan melalui jalur internet sehingga dapat

diakses dimana pun da nkapan pun selama masih terhubung dengan internet. Kesimpulannya, arti

dari SIG berbasis web adalah sistem informasi bereferensi geografis dalamsebuah database yangdisediakan melalui jalur internet.

Pembuatan SIG berbasis web yang bertemakan persebaran hotel di kota Malang ini dapat

sangat berguna bagi pengguna informasi. Apabila pengguna ingin mengetahui tempat untuk

beristirahat dan menginap dengan berbagai fasilitas yang ditawarkan maka pengguna dapat

secara langsung mengakses web yang kami buat.

Untuk mendapatkan informasi yang akan kami tampilkan di WEB, kami melakukan

survey sehingga informasi yang kami tampilkan benar dan akurat. Sekarang ini web dapat

dengan mudah diakses dimanapun dan kapanpun sehingga dapat diakses tepat pada saat

dibutuhkan.

Informasi persebaran hotel yang kami berikan sangat efisien karena pengguna informasi

dapat mengetahui informasi letak, harga, dan fasilitas hotel tersebut secara langsung tanpa harus

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 2

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

5/25

berkeliling Kota Malang dan bertanya kepada banyak orang untuk mendapatkan lokasi hotel

secara tepat.

Untuk mendapatkan informasi pada Web tidak membutuhkan banyak biaya, hanya

memerlukan koneksi internet. Tidak membuang banyak biaya seperti transportasi dan tenaga.

Informasi yang kami berikan di dalam Web ini, kami dapatkan di internet dan kami

buktikan dengan melakukan survey kelokasi-lokasi hotel yang ada di dalam Web kami. Sehingga

informasi yang diberikan dapatdipercaya.

Kualitas informasi yang kami berikan selalu konsisten. Kami memberikan informasi

dengan kualitas yang baik dan tidak berubah-ubah. Agar kualitas informasi yang kami berikan

selalu baik maka kami selalu meng-update setiap ada perubahan pada fasilitas, tarif, lokasi

ataupun kelas pada hotel- hotel yang terdapat pada web kami.

Informasi yang ada di dalam Web selalu diperbaharui ketika ada perubahan tarif, fasilitas,

maupun lokasinya. sehingga pada saat pengguna informasi membutuhkan informasi yang kami

sediakan, informasinya sudah ter-update.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 3

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

6/25

PERSEBARAN HOTEL DI KOTA MALANG

SISTEM INFORMASI GEOGRAFIS BERBASIS WEB

TEKNIK GEODESI

INSTITUT TEKNOLOGI NASIONAL

MALANG

14.25.908

14.25.915

14.25.919

14.25.920

Anggota Kelompok :

Verinda Septita N

Denny Santana Sinaga

M Aldin Yusfan

Sri Kartika Sakti

Husein Agustino K 14.25.925

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 4

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

7/25

Memberikan informasi hotel di kota malang, meliputi :

Persebaran / Lokasi

Tarif dan Fasilitas berdasarkan kelas yang ditawarkan

oleh Hotel terkait.

Memberi kemudahan bagi pengguna untuk mencari tempat

penginapan di kota malang.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 5

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

8/25

Sistem informasi geografis adalah sistem informasi yang

mampu mengintegrasikan informasi tertentu yang dapat

bermanfaat bagi pengguna informasi.

Hotel adalah suatu jenis bangunan yang dirancang khusus

sebagai tempat yang menyediakan jasa pelayanan penginapan,

penyedia makanan dan juga minuman, serta tidak ketinggalan

fasilitas-fasilitas yang lainnya.

Sistem Informasi Geografis mengenai persebaran hotel di Kota

Malang

merupakan integrasi informasi geografis hotel beserta

informasi atribut (fasilitas, tarif, dan kelas) yang dapat

bermanfaat bagi pengguna informasi.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 6

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

9/25

Sistem basisdata merupakan

bagian penting pada sistem

informasi, berguna untuk mengelola

sumber informasi pada suatu

organisasi. Hal utama yang harus

dilakukan adalah merancang suatu

sistem basisdata agar informasi

yang ada pada organisasi tersebut

dapat digunakan secara maksimal.

Tujuan Perancangan basisdatamempermudah proses

perekaman, perubahan dan

pemanggilan data informasi

yang berkaitan tentang hotel.

Menyediakan informasi yang

optimal sesuai dengan

kebutuhan pengguna.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 7

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

10/25

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 8

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

11/25

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 9

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

12/25

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 10

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

13/25

Pembuatan Peta

Pembuatan peta ini ditujukan untuk menampilkan letak geografis persebaran hotel

yang berlokasi di kota Malang yang nantinya dapat diakses secara global melalui jaringan

internet.

Pada tahap pembuatan peta ini, kami menggunakan software arcGIS. Adapun peta

yang kami gunakan bersumber dari peta garis digital yang memiliki keterangan sebagai

berikut :

Sumber data : IKONOS

Geocolor 1m Orthorektifikasi

Tanggal Perekaman : 5 Agustus 2003

Titik Kontrol Tanah : GPS

Datum : WGS84

Sistem Koordinat : UTM zona 49s

Jumlahfile : 13file

Formatfile : CAD (.dwg)

Berikut contoh langkah-langkah pengolahan peta dalam arcGIS hingga proses

kompresfile ke format .zip :

A.

Mengelola Peta .dwg disoftware arcGIS.

1. Membuka software arcMap.

2. Membuka data .dwg

a. PilihAdd Data >pilih file 1.2.dwg > klikAdd

b. Muncul kotak dialog unknown spatial reference > klik OK

c. Perhatikan tulisan koordinat di kanan bawah, masih tertulis unknown

units.

3. Mengatur sistem koordinat

a. Klik kanan layer> Properties> Coordinat System

b. Pilih Predifined > Projected Coordinate System >UTM > WGS

1984 > Shoutern Hemisphere > caridan pilihWGS 1984 UTM Zone

49s > OK

c. Perhatikan tulisan koordinat di kanan bawah, sudah menunjukkan

unit yang sesuai.

4. Export data ke format shapefile (.shp)a. Expand layer 1.2.dwg Group Layer

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 11

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

14/25

b. Pilih jenis data yang akan di-export,misalpolylinemaka klik kanan

1.2.dwg Polyline > Data > Export Data

c. Menentukan lokasi dan nama file, klik icon folder> mencari lokasi

penyimpanan > memberikan nama file, misal 1.2-polyline.shp >

Save > OK

d. Muncul kotak dialog tambah data yang di-export sebagai layerdi

peta?, Ya

5. Mematikan layer 1.2.dwg Group Layer untuk melihat perubahan pada layar.

6. Menyimpan data sesuai dengan kategorinya

a.

Klik kanan layer 1.2-polyline > Open Attribute Table

b.

Muncul tabel yang memuat informasi yang terdapat pada layer

tersebut.

c. Pilih Table Option > Select by Attribute > isikan kode sesuai dengan

data yang akan di panggil, misal memanggil data bangunan dengan

kode Layer = Bangunan >Apply

d.

Maka data yang terpanggil akan muncul (ter-select), untuk

memastikannya klik icon Show selected recordspada tabel

e.

Klik kanan layer 1.2-polyline >Data > Export Data >pilih the data

frame > memberi nama, misal 1.2-polyline-bangunan.shp

f. Muncul kotak dialog tambah data yang di-export sebagai layerdi

peta?, Ya

7.

Mematikan layer 1.2-polyline untuk melihat perubahan pada layar.

8. Mengulangi langkah 1-7 untuk mengambil data lainnya yang dibutuhkan.

B.

Kompresfileke format .zipuntuk uploaddi arcGis.com.1. Buka folder lokasi penyimpanan file shapefile (.shp)

2.

Memilih semua file yang mempunyai nama sama, misal 1.2.polyline-

bangunan.

3. Memastikan files tersebut mempunyai 6 format berbeda.

(.dbf,.prj,.sbn,.sbx,.shp,.shx)

4. Klik kanan > tambah ke arsip > Mengisikan nama arsip, memastikan format

arsip adalah ZIP > klik OK.

5.

File1.2.polyline-bangunan.zip sudah terbuat, dan siap di-upload.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 12

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

15/25

Upload Peta

Pembuatan peta ini ditujukan untuk menampilkan letak geografis persebaran hotel

yang berlokasi di kota Malang yang dapat diakses secara global melalui jaringan internet.

Pada tahap kali ini kami membuat peta dari arcgis.com, situs tersebut menawarkan link

peta yang dibuat untuk ditampilkan pada website kami.

Adapun langkah-langkah pembuatan dan pengelolaan sebagai berikut:

A. Menambahkan Layer dari Shapefile(.shp).

1.

Membuka arcgis.com.

2.

Memilih sign inke akun arcgis.com.

a.Mengisikan username dan password > klik sign in.

3. Membuka menu My Content.

4. Membuat peta baru

a.Klik Create Map.

5. Menambahkan layer

a.

KlikAdd > Add Layer from file >klik telusuri > pilihfile yang akan

di-upload, misal I_bataskota.zip > klik Open.

b.Pilih Generalize feature for web display, untuk menyesuaikan hasil

digitasi untuk tampilan web. > klikImport Layer.

6. Merubah nama layer

a.Klik panah bawah kecil disamping layer I_bataskota >Rename.

b.Menyesuaikan nama, misal I_bataskota menjadi Batas Kota >

klik OK.

c.

Maka nama dalam konten sudah berganti

7.

Mengganti simbol

a.Klik panah bawah kecil disamping layer Batas Kota > Change

Symbols.

b.Klik change symbol > Menyesuaikan simbol yang digunakan, misal

batas kota menggunakan simbol garis putus-putus

c.

Klik color untuk merubah warna, misal hitam.d.Mengatur transparansi dan lebar > klikDone.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 13

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

16/25

e.Klik Done Changing Symbols >Maka simbol yang terpakai sudah

berganti.

B.

Menambahkan Layer dari file .CSV.

1.

Menambahkan layer

a.KlikAdd > Add Layer from file >klik telusuri > pilihfile yang akan

di-upload, misal daftar fix.csv > klik Open.

b.KlikImport Layer.

2. Merubah nama layer

a.

Klik panah bawah kecil disamping layer daftar fix >Rename.

b.Menyesuaikan nama, misal daftar fix menjadi Hotel > klik OK.

c.Maka nama dalam konten sudah berganti

3. Mengganti simbol

a.Klik panah bawah kecil disamping layer Hotel > Change Symbols.

b.Klik change symbol > Menyesuaikan simbol yang digunakan, misal

Hotel menggunakan simbol rumah / hotel.

c.Klik kolom preview > pilih People places > pilih simbol yang

menyerupai hotel.

d.Mengatur ukuran > klikDone.

e.Klik Done Changing Symbols > Maka simbol yang terpakai sudah

berganti.

4.

Mengatur tampilan Pop-up

a.Klik panah bawah kecil disamping layer Hotel > Configure Pop-up.

b.Klik tanda + disamping kotak Pop-up title > pilih Nama Hotel

sebagai Judulc.Klik Configure Attributes > mengatur informasi yang akan

ditampilkan pada pop-up, misal menggilangkan nama hotel karena

sudah terpakai untuk Judul dengan cara menghilangkan tanda check

(v)

d.Klik OK > Save Pop-Up.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 14

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

17/25

C.

Menyimpan Peta

1. Klik icon Save > pilih Save As. (karena belum pernah melakukan

penyimpanan sebelumnya)

2.

Mengisikan informasi > pilih Save Map.

D. Share / Embed Map

1. Klik Share.

2. Beri tanda check pada Everyone (public).

3. Pilih embed in website,

4.

Mengatur ukuran dan atribut apa saja yang akan ditampilkan pada peta.

5.

Copykode html, yang nantinya akan dipasteke website.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 15

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

18/25

Pembuatan Website

Pada tahap kali ini kami akan menjelasakan tentang bagaimana langkah-langkah

pembuatan website yang akan kami gunakan untuk memuat informasi persebaran hotel di

kota Malang berserta sistem informasi geografisnya. Berbagai aplikasi/software dapat

digunakan untuk pembuatan design website, seperti Microsoft Office Publisher, Joomla,

Drupal, Jeruk, Wordpress, dsb.

CMS atau aplikasi yang ditawarkan untuk membuat design website sangatlah

beragam, mulai dari yang design manual melakukan koding dari 0 (nol), contoh

Notepad++ dan Adobe Dreamweaver. Ada pula yang semi manual tidak perlu koding

manual dari 0, melainkan design bisa menggunakan cara drag and drop, contohMicrosoft

Office Publisher, SiteSpinner dan Web Page Maker. Sampai dengan design website

menggunakan template yang sudah disediakan dan sistem yang sudah dikembangkan di

dalamnya, contohBlogspot, Wix, website builder, Joomla, Drupal, Jeruk, Wordpress, dsb.

Kelompok kami memutuskan untuk menggunakan software Web Page Maker,

karena software ini menawarkan sistem design drag and drop, sehingga kami dapat

membuat design website sesuai dengan keinginan tanpa disulitkan untuk melakukan

koding dari 0 (nol). Software ini sudah dilengkapi dengan berbagai fitur lainnya, termasuk

meta tag yang berisi title, author, keyword, dan description sebagai syarat SEO sehingga

website dengan mudah ter-indexdi Google.

Web Page Maker is an easy to use web creator that helps you make your own web

pages with no experience or HTML knowledge. Just drag and drop images, text, music and

video.. into a layout. During the edit process, you can easily move the objects with your

mouse to anywhere on the page. Web Page Maker comes with some high quality templates

that help you to get started. Other features include thumbnail, mouse-over effects, ready-

to-use Java Script effects, text link style sheet, tables, forms, iframes etc... The program

also includes a built-in FTP publisher to allow you upload your site to the Internet by

pressing a publish button.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 16

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

19/25

Adapun langkah-langkah pembuatan design website sebagai berikut:

A. Melakukan Pemotongan Gambar.

1. Membukafilegambar yang akan dijadikan background framedasar

menggunakan microsoft office picture manager.

2.

KlikEdit Pictures > Crop > mengatur ukuran potongan gambar, misal

mengambil bagian atas > klik OK.

3. Save As> Memberikan nama, misal frame-atas > klik save.

4. Melakukan langkah 1-3 hingga filegambar dapat terpotong menjadi

beberapa bagian.

B.

Membuat Chatbox untuk Website.

1. Membuka websitewww.smartchatbox.com.

2. Pilih menu Create.

3. Memasuki halamam create free chatbox

a.Specify Settings, mengatur ukuran dan di website apa chatboxakan

dipasang.

b.Select Background, memilih tampilan dasar yang digunakan untuk

chatbox.

c.Preview, menampilkan contoh design chatboxyang akan terpasang.

d.Creat Admin, membuat 1 user admin, untuk mengelola isi

percakapan bila dibutuhkan.

e.

Setelah selesai, klikGenerate code of my smart chatbox.

4. Memasuki ke bagian pengaturan lanjutan

a.Menyesuikan pengaturan.

b.Melihatpreview chatbox.c.Setelah semuanya cocok, klikfinish.

5.

Copykode Html danpasteke design web yang dibuat.

C. Design Web menggunakan Web Page Maker.

1. Jalankan software Web Page Maker.

2. Menambahkan gambar dalam web

a.

Pilih gambar >Drag and Drop ke Web Page Maker

b.Mengatur letak gambar, bisa di-Drag and Drop.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 17

http://www.smartchatbox.com/http://www.smartchatbox.com/http://www.smartchatbox.com/http://www.smartchatbox.com/

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

20/25

3. Mengatur Ukuran suatu Gambar

a.Klik kanan Gambar > pilih Properties >pilih General.

b.Atur ukuran pada menu Size > klik OK.

c.

Tambahkan semua item dasar sehingga tampilan utama website

terbentuk.

4. Mengunci designutama

a.Klik kanan gambar > pilih Lock.

b.Lakukan pada semua item dasar sehingga tampilan utama website

terkunci.

5.

Menambahkan teks pada halaman

a.

Klik > klik 2x pada kotak teks yang muncul > tulis teks dan

sesuaikan ukuran, font warna dan format > klik OK.

b.Mengatur letak teks,Drag and Drop.

6.

Menggambar pada halaman

a.Klik icon Shape > pilih model yang akan digambar, misal kotak

maka pilihRectangle.

b.Mengatur ukuran, bisa memanfaatkanArrow Key untuk menggeser,

Shift+Arrow Keyuntuk megatur ukuran. Bisa juga menggunakan

pointer mouseuntuk resize.

c.

Mengatur posisi letak, misal akan dipindahkan ke layer paling

bawah maka klik kanan gambar >Layer> Send to All Back.

7.

Page Properties

a.Untuk melakukan lebih lanjut tentang halaman yang dibuat maka

gunakan menupage properties. Klik kanan pada halaman > pilih

Properties.

b.Meta Tags, untuk menambahkan informasi pada halaman yang

terkait, seperti Title, Author, Keyword, Description. Hal ini sangat

membantu nilai SEO website.

c.Background, untuk mengatur background/ gambar dasar yang akan

ditampilkan oleh website.

d.Apperance, untuk mengatur format tampilan dasar pada pembuatan

website, misal alignberfungsi untuk mengatur letak design web

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 18

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

21/25

ketika ditampilkan dalam browser, pilihLeftbila ingin design rata

kiri, pilih centerbila ingin design rata tengah.

e.Page Transition,untuk menentukan efek perpindahan website dari

halaman ke halaman, namun hal ini hanya berlaku untuk peramban

Internet Explorersaja.

f.Header, untuk mengatur tulisan pada header, serta pengaktifan

password bila diperlukan.

g.Selesai, klik OK

8. Membuat Slideshow

a.

Pilih menuInsert > Flash > Flash Slideshow

b.Stelah muncul kotak dialog, klikAdd > pilih beberapa gambar yang

akan ditampilkan > klik Open.

c.Pilih setting> sesuaikan > klik OK

d.Maka gambar slideshow akan muncul pada halaman.

9. MenambahkanHtml code atauScript code

a.

Html code atauScript code,berfungsi untuk memanggil dan

menampilkan peta yang telah dibuat pada website arcgis.com serta

chatboxpada smartchatbox.com.

b.Pilih menuInsert > Html code or Script code

c.Paste kode html > klik OK.

d.Maka keluar kotak dialog sebagai peringatan bahwa harus

dipastikan ukuran sesuai dengan yang telah dibuat pada web

berkaitan > Klik OK.

10.Membuat halaman duplikat

a.

Langkah ini digunakan untuk membuat duplikat designweb dasaryang akan digunakan untuk seluruh halaman, sehingga kami tidak

perlu mendesigndari awal pada tiap halaman.

b.Pada site sontents, klik kanan halaman yang akan diduplikat > pilih

Clone Page.

11.Mengganti nama halaman

a.Langkah ini digunakan untuk mempermudah pengelolaan seluruh

halaman.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 19

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

22/25

b.Pada site sontents, klik kanan halaman yang akan diduplikat > pilih

Rename Page.

12.Menambahkan galeri foto

a.

Pilih menuInsert > Image Objects > Photo Gallery.

b.Muncul kotak dialog, pilihAdd.

c.Pilih foto yang akan ditampilkan > klik Open

d.Sesuaikan ukuran pada tabs general.

e.Pindah ke tabs Setting> menyesuaikan > klik OK.

13.MenambahkanNavigation Bar

a.

Pilih menuInsert > Navigation Bar >pilihdesignyang akan

dipakai> Klik OK.

b.Pada tab option, mengatur menu apa saja yang akan ditampilkan

padaNavigation Bar tersebut.

c.Pindah ke tab text, mengatur font dan format tulisan yang

digunakan.

d.Pindah ke tab Layout, memilih bagaimanaNavigation Barakan

ditampilkan.

e.

Pindah ke tab Customize, untuk mengatur design tampilan pada

buttonNavigation Bar.

f.Selesai Klik OK.

D. Publikasi hasil design di Web Page Maker

1. Buka hasil design yang dibuat.

2. Pilih menu File> Publish

3.

Pada tab Publish Destination,pilihLocal Directory > Browse,pilih lokasifolder untuk penyimpanan hasil publikasi.

4.

Pada tab Page Option, sesuaikan dengan yang diinginkan namun pastikan

nama halaman untuk home adalah index. Pilih Publish all pages in my site

danpublish all files, untuk pertama kali design dipublikasikan.

5. Klik Publish.

6. Buka folder tempat penyimpanan hasil publikasi. Files inilah yang nantinya

akan di-upload.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 20

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

23/25

Upload Website

Langkah terakhir adalah publishing ke publik secara global menggunakan jaringan

internet, maka website yang telah kami buat harus diupload supaya dapat diakses melalui

jaringan internet.

Pada tahap ini dibagi menjadi tiga yaitu, pendaftaran domain, pendaftaran hosting,

dan upload design web, dengan tiga langkah inilah web yang telah dibuat dapat diakses

oleh semua orang.

Adapun langkah-langkah pembuatan design website sebagai berikut:

A. Pendaftaran Domain

1.

Buka website freenom.com, untuk mendaftarkan domain tertentu secara

gratis.

2. Klik sign in to My Account > masukkan alamat email danpassword >klik

Sign in.

3. Pilih menuDomain > Register a New Domain.

4.

Isikan alamat domain yang diinginkan, misal hotelkotamalang.ga > Check

Availability.

5. Bila alamat tersebut tersedia makan alamat website dapat dipesan, bila tidak

tersedia maka coba alamat yang lain, pilih berapa lama akan menyewa

alamat tersebut > klik Order Now.

6. Memasuki halaman Order Overview, pastikan alamat yang akan dipesan

sudah benar > Klik Continue.

7.

Memasuki halaman Review & Checkout, halaman ini berisikan jumlah

biaya/tagihan dan informasi pemesan. > Klik Complete Order.

8.

Memasuki halaman Order Confirmation, berisikan konfimasi pemesanan. >

kembali ke Client Area.

9. Pilih menuDomain >My Domain

10.Memasuki halamanMy Domain> klikManage Domain.

11.PilihManagemen Tools > Nameserver.

12.

Pindahkan nameserver, klik use custom nameserver > isikan nameserversesuai dengan arah hosting, misal idhostinger.com, maka isikan

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 21

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

24/25

ns1.idhostinger.com, ns2.idhostinger.com, ns3.idhostinger.com,

ns3.idhostinger.com, dengan catatan tiap hosting mempunyai nameserver

yang berbeda cek selengkapnya di penyedia hosting berkaitan. > Klik

Change Nameservers.

13.

Patikan perubahannameserverberhasil.

B. Pendaftaran Hosting

1. Buka website idhostinger.com, untuk mendaftarkan hosting tertentu secara

gratis.

2.

Masukkan alamat email danpassword >klik Login.

3.

PilihHosting Baru > free Hosting.

4. Ubah tipe domain menjadi Domain, karena kami sudah mendaftarkan

domainhotelkotamalang.ga.

5. Isikan alamat domain danpassword > Klik Lanjutkan

6. Memasuki halaman konfirmasi pemesanan, isikan captcha > klik Order.

7.

Bila berhasil akan muncul pesan Akun hotelkotamalang.ga telah berhasil

dengan baik.

8.

Klik tanda + disebelah kiri hotelkotamalang.ga > klik Kelola.

9. Memasuki ke halaman beranda hosting hotelkotamalang.ga, cek apakah

domain dan hosting sudah aktif > klik icon expand disamping

hotelkotamalang.ga.

10.

Akan membuka halaman baru dan Website telah aktif bila menunjukkan

halaman berisikan default.php.

11.Kembali ke beranda > klik menu AkunDetail.

12.

Menampilkan informasi lengkap tentang hosting yang digunakan.

C. Upload Design Web

1. Masuk keakun idhostinger.com.

2. Pada beranda hosting, pilih File Manager 1.

3. Instal File Managerjika belum diinstal.

4. Muncullah kotak dialog yang menampilkanfiledirektori.

5.

Klik iconUnggah Berkas > pilih semua file berkaitan dengan design web

yang sudah dibuat > Klik Open.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 22

8/10/2019 Laporan Tutorial Pembuatan WebGIS (simple)

25/25

6. Tunggu sampai file berhasil di upload.

7. Setelah selesai di upload maka web yang telah kami buat sudah dapat

diakses oleh semua orang melalui jaringan internet.

Teknik Geodesi dan Geoinformatika

Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional