BAB I

PENDAHULUAN

A. Pengertian Website

Website atau situs juga dapat diartikan sebagai kumpulan halaman

yang menampilkan informasi data teks, data gambar diam atau gerak,

data animasi, suara, video dan atau gabungan dari semuanya, baik yang

bersifat statis maupun dinamis yang membentuk satu rangkaian

bangunan yang saling terkait dimana masing-masing dihubungkan

dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi

informasi website tetap, jarang berubah, dan isi informasinya searah

hanya dari pemilik website. Bersifat dinamis apabila isi informasi

website selalu berubah-ubah, dan isi informasinya interaktif dua arah

berasal dari pemilik serta pengguna website. .

( http://www.sediaweb.com/?page_id=170 )

1

BAB II

DESKRIPSI KERJA

Dalam deskripsi kerja ini, praktikan akan menjelaskan langkah-langkah dalam

membuat desain website dengan menggunakan salah satu fasilitas desain website

secara online, yaitu weebly. Berikut langkah-langkah dalam membuat desain

website :

A. Membuat Akun Weebly

1. Buka salah satu browser seperti firefox. Setelah program browser terbuka,

masukkan alamat www.weebly.com pada address bar seperti berikut :

2

Gambar 2.1 Tampilan awal weebly

2. Masukkan nama lengkap, email, dan password untuk membuat akun baru

weebly seperti berikut :

Gambar 2.2 Membuat akun weebly

3. Tuliskan kalimat yang sama seperti kalimat pada box:

3

Gambar 2.3 Memasukkan password

4. Kemudian klik tombol “OK, let’s go!”, sehingga muncul tampilan dibawah

ini. Dan kemudian klik kembali tombol “OK, let’s go!”.

Gambar 2.4 Verifikasi sing up akun weebly

B. Mendesain Website

4

Gambar 2.5 Tampilan awal setelah masuk akun weebly

1. Klik edit sehingga akan terlihat tampilan seperti Gambar 2.6 . Kemudian

masukkan judul website, klik tombol save tittle.

Gambar 2.6 Memasukkan Judul Website

2. Masukkan nama subdomain seperti berikut :

5

Gambar 2.7 Menuliskan Nama Domain Website

3. Klik continue sehingga tampil seperti gambar berikut :

Gambar 2.8 Mengedit alamat domain dan judul website

4. Kemudian klik save pada tampilan seperti gambar berikut :

Gambar 2.9 Menyimpan alamat domain dan judul website

6

Gambar 2.10 Tampilan awal desain weebly

5. Klik design, kemudian pilih dan preview template yang diinginkan.

Gambar 2.11 Memilih desain template

6. Klik Use Theme untuk menjadikan sebagai template website quick count.

7

Gambar 2.12 Tampilan template

7. Setelah memilih website, tampilannya akan menjadi seperti berikut :

Gambar 2.12 Tampilan desain website awal

8. Klik Design Options untuk mengganti desain elemen, judul, paragraf,

dan lain-lain yang berkaitan dengan desain website.

8

Gambar 2.13 Design Options

C. Mengubah Gambar

1. Klik tombol Edit Image pada bagian kanan atas gambar seperti berikut :

Gambar 2.14 Mengubah gambar

2. Klik tombol Add Image untuk menambahkan atau mengganti gambar

seperti berikut :

9

Gambar 2.15 Menambah gambar

3. Kemudian masukkan gambar dari dokumen yang ada di komputer seperti

berikut :

Gambar 2.16 Memilih gambar

4. Klik Open sehingga terlihat seperti gambar berikut :

Gambar 2.17 Tampilan gambar

10

5. Kemudian klik save pada bagian kanan atas halaman.

Gambar 2.18 Menyimpan Hasil Tampilan Gambar

D. Membuat Halaman atau Variabel Baru

1. Klik Add Blog , kemudian ganti nama halaman atau variabel dengan

ketik Home pada kolom yang tersedia seperti gambar berikut :

Gambar 2.19 Membuat halaman atau variabel baru

2. Buatlah halaman atau variabel baru dengan klik tombol Add Page .

kemudian ganti nama halaman atau variabel dengan ketik About pada

kolom yang tersedia seperti gambar berikut :

11

Gambar 2.20 Membuat Variabel dan Halaman About

E. Membuat Form Komentar pada Halaman Comment

1. Klik Element Content Form. Drag Content Form pada halaman

Comment seperti gambar berikut :

Gambar 2.21 Menambah elemen form

2. Edit form dengan cara klik pada bagian form yang diinginkan, dan

ubah field tittle pada bagian atas form seperti gambar berikut :

12

Gambar 2.22 Mengedit Form

3. Tambahkan field form dengan drag Short Text Box pada bagian form

yang diinginkan seperti berikut :

Gambar 2.23 Menambah field form

4. Edit tittle masing-masing field form sehingga terlihat seperti gambar

dibawah ini :

13

Gambar 2.24 Tampilan Form Sebelum Disimpan

5. Simpan form dengan klik save pada bagian kanan atas form.

Gambar 2.25 Menyimpan Form

Gambar 2.26 Tampilan form setelah disimpan

14

F. Membuat Read More pada Artikel

1. Buka halaman home new post seperti gambar berikut :

Gambar 2.27 Membuat “read more”

2. Tulislah judul artikel “Jelang Pilpres 2014 Prabowo cari Figur

Cawapres yang Clean dan Patriolik”, drag elemen paragraf pada

bagian bawah judul artikel seperti berikut :

Gambar 2.28 Men- drag elemen paragraf

3. Tuliskan artikel pada elemen paragraf tersebut.

4. Drag elemen Read More Break ke bagian bawah artikel seperti

gambar berikut :

15

Gambar 2.29 Men-drag Read More Break

5. Kemudian drag Elemen Paragraf pada bagian bawah Elemen

Read More Break seperti berikut :

Gambar 2.30 Membuat Read More

6. Blok bagian artikel yang ingin ditampilkan ketika tombol read

more di klik cut bagian artikel tersebut paste pada elemen

paragraf, dibawah elemen read more seperti berikut :

16

Gambar 2.31 Membuat read more pada artikel

G. Membuat Form Polling pada Variabel Result

1. Klik Element More Forms Survey , kemudian drag

elemen survey ke bagian halaman yang diinginkan, seperti gambar

berikut :

Gambar 2.32 Men drag elemen survey

2. Tuliskan pertanyaan-pertanyaan polling besert opsinya masing-

masing, seperti gambar berikut :

17

Gambar 2.33 Tampilan Form Polling

3. Klik save pada bagian kanan atas form polling.

H. Mem-Publish Website

1. Klik publish pada kanan atas halaman seperti gambar berikut :

Gambar 2.34 Mem Publish Website

18

Gambar 2.35 Website Telah ter-Publish

19

BAB III

PEMBAHASAN

A. Studi Kasus

Membuat sebuah desain website dengan menggunakan aplikasi pembuatan

desain website secara online. Untuk kasus ini, aplikasi yang digunakan adalah

weebly.com. Desain website harus berisi form dn database yang diharapkan

mengacu pada tugas Ujian Akhir Semester, yaitu seputar polling dan quick

count.

B. Pembahasan Kasus

Di dalam website quick count yang berhasil dibuat, terdapat empat variabel.

Variabel-variabel tersebut antara lain variabel home, about, result, dan

comment. Berikut penjelasan dari masing-masing variabel :

A. Halaman Utama ( Home )

Halaman utama website berisi tentang artikel-artikel seputar pemilu, quick

count, mapupun polling. Artikel-artikel pada halaman utama ini akan terus

di perbaharui disesuaikan dengan perkembangan-perkembangan seputar

pemilu, quick count, serta polling.

20

Gambar 3.1 Halaman Utama website

B. Variabel About

Variabel about ini akan berisi tentang apa itu quick count, latarbelakang,

tujuan dibuatnya website quick count, serta apa saja isi atau content dari

website quick count itu sendiri.

Gambar 3.2 Tampilan variabel about

21

C. Variabel Result

Pada variabel atau halaman Result, nantinya akan terdapat beberapa hasil

perhitungan quick count yang datanya didapatkan dari perwakilan tiap TPS

yang memberikan info melalui pesan singkat SMS. Pesan singkat tersebut

nantinya akan langsung terkoneksi pada website yang kemudian akan

ditampilkan dalam bentuk grafik pada variabel Result.

Namun, untuk saat ini variabel result berisi sebuah polling tentang “Kriteria

Ideal Presiden RI 2014”. Pada polling di halaman ini, pengunjung dapat

melihat akumulasi hasil polling dengan cara klik tombol Lihat Hasil

Polling yang ada pada bagian bagian halaman result.

Gambar 3.3 Tampilan Variabel Result

Gambar 3.4 Tombol Untuk Melihat akumulasi hasil polling

22

Gambar 3.5 Tampilan database polling

D. Variabel Comment

Variabel comment akan memuat komentar, pertanyaan, kritik, serta saran

dari para pengunjung website quick count. Adapun tampilan halaman

variabel comment adalah seperti berikut :

Gambar 3.6 Variabel comment

23

BAB IV

PENUTUP

Dari pembahasan diatas, dapat ditarik beberapa kesimpulan seperti berikut :

1. Sebelum mulai membuat desain website melalui weebly, pengguna

harus membuat sebuah akun terlebih dahulu.

2. Dengan menggunakan weebly, pengguna dapat menambah halaman,

merubah jenis tulisan, tampilan gambar ataupun artikel, tanpa harus

merubah sintaks-sintaks HTML nya.

3. Dengan menggunakan weebly, form dapat dibuat hanya dengan men-

drag element Contact Form.

4. Untuk membuat sebuah form polling, dapat dilakukan dengan klik

element more forms survey , kemudian drag elemen survey

pada bagian halaman yang diinginkan.

5. Untuk dapat membuat Read More pada artikel, halaman yang memuat

artikel harus merupakan halaman dengan jenis blog.

6. Dengan weebly, desain website dapat dilakukan dengan mudah tanpa

harus memperhatikan sintaks-sintaks HTML nya.

24

DAFTAR PUSTAKA

http://www.sediaweb.com/?page_id=170 , 18 Desember 2012 , 19.50

http://id.wikipedia.org/wiki/Weebly , 16 Desember 2012 , 14.32

25

LAMPIRAN :

Alamat website : http://myquickcount.weebly.com

Anggota kelompok tugas akhir SIM :

Arkhamsiagustinah

Cut Rifatmi

Dewi Masithoh

Reni Oktavia

Ahmad Suhaemi

Konsep Tugas Akhir :

Pada tugas akhir nanti, kami akan membuat sebuah website yang di dalamnya

terdapat sebuah variabel (Result) untuk menampilkan hasil perhitungan quick

count. Sistematikanya adalah :

Dan untuk perwakilan dari tiap TPS, hanya berlaku untuk nomer handphone

tertentu yang sebelumnya telah terdaftar atau terkonfirmasi. Sehingga tidak ada

pen double an pelaporan hasil perhitungan tiap TPS. Dan kemudian data yang

diterima dari SMS perwakilan TPS tersebut akan secara langsung mengubah

grafik yang ada.

26

TPS Hasil perhitungan tiap TPS Petugas masing-masing TPS melaporkan hasil

perhitungan ke nomer modem tertentu ( menggunakan aplikasi SMS Gateway ) SMS

Terkoneksi dengan Web melalui nomer modem Server Terhosting / tampil pada

website.