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 )

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 :

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:

Gambar 2.3 Memasukkan password

4. Kemudian klik tombol OK, lets go!, sehingga muncul tampilan dibawah
ini. Dan kemudian klik kembali tombol OK, lets go!.

Gambar 2.4 Verifikasi sing up akun weebly

B. Mendesain Website

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 :

Gambar 2.7 Menuliskan Nama Domain Website

3. Klik continue sehingga tampil seperti gambar berikut :

Gam
bar 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

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.

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.

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 :

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 :

10

Gambar 2.17 Tampilan gambar

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

11

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 :

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

12

2. Edit form dengan cara klik pada bagian form yang diinginkan, dan
ubah field tittle pada bagian atas form seperti gambar berikut :

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

13

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

dibawah ini :

Gambar 2.24 Tampilan Form Sebelum Disimpan

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

Gambar 2.25 Menyimpan Form

14

Gambar 2.26 Tampilan form setelah disimpan

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 :

15

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 :

Gambar 2.29 Men-drag Read More Break

5. Kemudian drag Elemen Paragraf pada bagian bawah Elemen
Read More Break seperti berikut :

16

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 :

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 :
17

Gambar 2.32 Men drag elemen survey

2. Tuliskan pertanyaan-pertanyaan polling besert opsinya masingmasing, seperti gambar berikut :

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 :

18

Gambar 2.34 Mem Publish Website

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

20

di perbaharui disesuaikan dengan perkembangan-perkembangan seputar

pemilu, quick count, serta polling.

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.

21

Gambar 3.2 Tampilan variabel about

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

22

Gambar 3.4 Tombol Untuk Melihat akumulasi hasil polling

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 mendrag 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 :
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.

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