Laporan Tutorial Pembuatan WebGIS (simple)

LAPORAN TUGAS SISTEM INFORMASI GEOGRAFIS BERBASIS WEB PERSEBARAN HOTEL DI KOTA MALANG

Dosen Pengampu :

Dedy Kurnia Sunaryo, ST,.MT

Disusun Oleh : Verinda Septita N

14.25.908

Denny Santana Sinaga

14.25.915 14.25.915

M Aldin Yusfan

14.25.919 14.25.919

Sri Kartika Sakti

14.25.920 14.25.920

Husein Agustino K

14.25.92 14.25.925

TEKNIK GEODESI DAN GEOINFORMATIKA FAKULTAS TEKNIK SIPIL DAN PERENCANAAN INSITUT TEKNOLOGI NASIONAL MALANG 2014

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).................................... ....................................

13

B.

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......................................... Web............................................................... .............................. ........

23

i

Teknik Geodesi dan Geoinformatika Fakultas Teknik Sipil dan Perencanaan | Institut Teknologi Nasional

Jadwal Rencana Pembuatan Sistem Informasi Geograsis Berbasis WEB Nama Kegiatan

Minggu ke

Pembuatan Kelompok dan Perencanaan

Pembuatan

Pembuatan

Mencari data

Membuat

web dengan

Web dengan

dan

power point

prosentase 30

prosentase

melakukan

%

60%

survei

Mengolah data

Pembuatan peta

Pemrograman sistem Informasi

Publikasi

Berbasis WEB

1 2 3 4 5 6

: perencanaan : pelaksanaan

Persebaran Hotel di Kota Malang | SIG berbasis Web 2014

1


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


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 yang disediakan 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



2


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 ka mi. 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.



3


PERSEBARAN HOTEL DI KOTA MALANG

SISTEM INFORMASI GEOGRAFIS BERBASIS WEB TEKNIK GEODESI INSTITUT TEKNOLOGI NASIONAL MALANG

Anggota Kelompok : Verinda Septita N 14.25.908 14.25.915 Denny Santana Sinaga M Aldin Yusfan 14.25.919 Sri Kartika Sakti 14.25.92 0 Husein Agustino K 14.25.9 25


4


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. 

•

•




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. 

•

•




5


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 




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. 





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. 

Sistem

basisdata

Tujuan Perancangan basisdata mempermudah proses perekaman, perubahan dan pemanggilan data informasi yang berkaitan tentang hotel.





6


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. 

Sistem

basisdata

Tujuan Perancangan basisdata mempermudah proses perekaman, perubahan dan pemanggilan data informasi yang berkaitan tentang hotel. Menyediakan informasi yang optimal sesuai dengan Persebaran Hotel di Kota Malang | SIG berbasis Web 2014 kebutuhan pengguna. 






7




8




9



10


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

Datum

: WGS84

Geocolor 1m Orthorektifikasi

Sistem Koordinat

: UTM zona 49s

Tanggal Perekaman

: 5 Agustus 2003

Jumlah file

: 13 file

Titik Kontrol Tanah

: GPS

Format file

: CAD (.dwg)

Berikut contoh langkah-langkah pengolahan peta dalam arcGIS hingga proses


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

Datum

: WGS84

Geocolor 1m Orthorektifikasi

Sistem Koordinat

: UTM zona 49s

Tanggal Perekaman

: 5 Agustus 2003

Jumlah file

: 13 file

Titik Kontrol Tanah

: GPS

Format file

: CAD (.dwg)

Berikut contoh langkah-langkah pengolahan peta dalam arcGIS hingga proses kompres file ke format .zip :

A. Mengelola Peta .dwg di software arcGIS.

1. Membuka software arcMap. 2. Membuka data .dwg a. Pilih Add Data > pilih file 1.2.dwg > klik Add 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 > cari dan pilih WGS 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


11


b. Pilih jenis data yang akan di- export, misal polyline maka 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 layer di 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 records pada 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 layer di 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. Kompres file ke format . zip untuk upload di 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. File 1.2.polyline-bangunan.zip sudah terbuat, dan siap di- upload.


12


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 in ke 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.Klik Add > Add Layer from file > klik telusuri > pilih file yang akan di-upload, misal I_bataskota.zip > klik Open. b.Pilih Generalize feature for web display, untuk menyesuaikan hasil digitasi untuk tampilan web. > klik Import 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 > klik Done.


13


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

B. Menambahkan Layer dari file .CSV.

1. Menambahkan layer a.Klik Add > Add Layer from file > klik telusuri > pilih file yang akan di-upload, misal daftar fix.csv > klik Open. b.Klik Import 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 > klik Done. 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 Judul c.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.


14


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. Copy kode html, yang nantinya akan di paste ke website.


15


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, contoh Microsoft Office Publisher, SiteSpinner dan Web Page Maker. Sampai dengan design website

menggunakan template yang sudah disediakan dan sistem yang sudah dikembangkan di dalamnya, contoh Blogspot, 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- index di 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, readyto-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”.


16


Adapun langkah-langkah pembuatan design website sebagai berikut: A. Melakukan Pemotongan Gambar.

1. Membuka f ile gambar yang akan dijadikan background frame dasar menggunakan microsoft office picture manager. 2. Klik Edit 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 f ile gambar dapat terpotong menjadi beberapa bagian.

B. Membuat Chatbox untuk Website.

1. Membuka website www.smartchatbox.com. 2. Pilih menu Create. 3. Memasuki halamam create free chatbox a. Specify Settings, mengatur ukuran dan di website apa chatbox akan dipasang. b.Select Background, memilih tampilan dasar yang digunakan untuk chatbox.

c. Preview, menampilkan contoh design chatbox yang akan terpasang. d.Creat Admin, membuat 1 user admin, untuk mengelola isi percakapan bila dibutuhkan. e.Setelah selesai, klik Generate code of my smart chatbox. 4. Memasuki ke bagian pengaturan lanjutan a.Menyesuikan pengaturan. b.Melihat preview chatbox. c.Setelah semuanya cocok, klik finish. 5. Copy kode Html dan paste ke 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.


17


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 design utama 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 pilih Rectangle. b.Mengatur ukuran, bisa memanfaatkan Arrow Key untuk menggeser, Shift + Arrow Key untuk megatur ukuran. Bisa juga menggunakan pointer mouse untuk 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 menu page 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 “align” berfungsi untuk mengatur letak design web


18


ketika ditampilkan dalam browser, pilih Left bila ingin design rata kiri, pilih center bila ingin design rata tengah. e. Page Transition,untuk menentukan efek perpindahan website dari halaman ke halaman, namun hal ini hanya berlaku untuk peramban Internet Explorer saja.

f. Header, untuk mengatur tulisan pada header , serta pengaktifan password bila diperlukan. g.Selesai, klik OK 8. Membuat Slideshow a.Pilih menu Insert > Flash > Flash Slideshow b.Stelah muncul kotak dialog, klik Add > pilih beberapa gambar yang akan ditampilkan > klik Open. c.Pilih setting > sesuaikan > klik OK d.Maka gambar slideshow akan muncul pada halaman. 9. Menambahkan Html code atau Script code a. Html code atau Script code, berfungsi untuk memanggil dan menampilkan peta yang telah dibuat pada website arcgis.com serta chatbox pada smartchatbox.com.

b.Pilih menu Insert > 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 design web dasar yang akan digunakan untuk seluruh halaman, sehingga kami tidak perlu mendesign dari 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.


19


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

12. Menambahkan galeri foto a.Pilih menu Insert > Image Objects > Photo Gallery. b.Muncul kotak dialog, pilih Add. c.Pilih foto yang akan ditampilkan > klik Open d.Sesuaikan ukuran pada tabs general. e.Pindah ke tabs Setting > menyesuaikan > klik OK. 13. Menambahkan Navigation Bar a.Pilih menu Insert > Navigation Bar > pilih design yang akan dipakai > Klik OK. b.Pada tab option, mengatur menu apa saja yang akan ditampilkan pada Navigation Bar tersebut. c.Pindah ke tab text , mengatur font dan format tulisan yang digunakan. d.Pindah ke tab Layout, memilih bagaimana Navigation Bar akan ditampilkan. e.Pindah ke tab Customize, untuk mengatur design tampilan pada button Navigation 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, pilih Local Directory > Browse, pilih lokasi folder 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 dan publish all files, untuk pertama kali design dipublikasikan. 5. Klik Publish. 6. Buka folder tempat penyimpanan hasil publikasi. Files inilah yang nantinya akan di-upload .


20


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 dan password > klik Sign in. 3. Pilih menu Domain > 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 menu Domain >My Domain 10. Memasuki halaman My Domain > klik Manage Domain. 11. Pilih Managemen Tools > Nameserver . 12. Pindahkan nameserver, klik use custom nameserver > isikan nameserver sesuai

dengan

arah

hosting,


misal

idhostinger.com,

maka

isikan

21


ns1.idhostinger.com,



ns3.idhostinger.com, dengan catatan tiap hosting mempunyai nameserver yang berbeda cek selengkapnya di penyedia hosting berkaitan. > Klik Change Nameservers.

13. Patikan perubahan nameserver berhasil.

B. Pendaftaran Hosting

1. Buka website idhostinger.com, untuk mendaftarkan hosting tertentu secara gratis. 2. Masukkan alamat email dan password > klik Login. 3. Pilih Hosting Baru > free Hosting. 4. Ubah tipe domain menjadi Domain, karena kami sudah mendaftarkan domain hotelkotamalang.ga.

5. Isikan alamat domain dan password > 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 Akun Detail. 12. Menampilkan informasi lengkap tentang hosting yang digunakan.

C. Upload Design Web

1. Masuk ke akun idhostinger.com. 2. Pada beranda hosting, pilih File Manager 1. 3. Instal File Manager jika belum diinstal. 4. Muncullah kotak dialog yang menampilkan file direktori. 5. Klik icon Unggah Berkas > pilih semua file berkaitan dengan design web yang sudah dibuat > Klik Open.


22


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.


23

Laporan Tutorial Pembuatan WebGIS (simple)

Recommend Documents