devlore.files.wordpress.com · Web viewbukanlah hal yang mudah dan cepat, karena terkadang membuat...

BAB III

PEMBAHASAN

Pada kali ini praktikan akan menjelaskan secara rinci mengenai langkah-

langkah untuk meng-edit template website sehingga menjadi website yang diinginkan

sesuai dengan kebutuhannya. Membuat website bukanlah hal yang mudah dan cepat,

karena terkadang membuat website membutuhkan ketelitian dan kesabaran dan tak

lupa juga selalu dituntut untuk memiliki ide-ide yang kreatif, namun, praktikan akan

memberikan cara mudah dalam menciptakan website dengan mudah yakni dengan

meng-edit template yang tersedia di internet. Sebelum memulai langkah-langkah

untuk meng-edit, praktikan akan memberikan tambahan pengetahuan untuk fungsi

dari macam-macam kode html yang sering digunakan. Berikut macam-macam fungsi

tag html,

Tag Keterangan atau Fungsi<a> Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan

sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain

<b> Membuat teks tebal<big> Memperbesar ukuran teks sebesar satu point dari defaultnya<blink> Membuat teks berkedip<blockquote> Mendefinisikan sebuah kutipan panjang. Pada saat di browser

teks akan tampil menjorok kedalam<body> Mendefinisikan body/isi dokumen HTML, berfungsi untuk

menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya

<br /> Memberi baris baru/pindah baris<button> Mendefinisikan sebuah tombol diklik<center> Untuk perataan tengah terhadap teks atau gambar<dir> Mendefinisikan sebuah daftar direktori<div> Mendefinisikan sebuah section dalam dokumen

<u> Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag <u> tidak dianjurkan untuk kategori HTML text formatting melainkan termasuk kategori HTML Style

<ul> Mendefinisikan daftar dalam format bullet

Kemudian langkah yang akan dilakukan yakni membuka folder template yang

telah disalin di folder localdisc C . Berikut langkah-langkahnya:

1. Membuka Script HTML Template

Praktikan pertama-tama akan meng-edit template dengan membuka file script

pada aplikasi Notepad++ , dengan cara klik kanan pada file script.html edit

with Notepad++

Gambar 3.1.1 Meng-edit Script Template Dengan Notepad++

Adapun cara membuka file script untuk dilihat tampilannya pada laman web

browser yakni dengan klik kanan pada file open with pilih browser yang

akan digunakan, seperti gambar berikut,

Gambar 3.1.2 Membuka Script Pada Laman Web Browser

2. Mengubah Script Template Untuk Menciptakan Konsep Situs Yang

Diinginkan

Perubahan yang akan dilakukan oleh praktikan pertama pada script index.html

yang merupakan laman awal situs. Tetapi sebelum itu, praktikan akan mengenali

fungsi kode-kode HTML pada script template. Praktikan akan memberi

penjelasan detail tentang fungsi script yang dilengkapi dengan tampilannya pada

laman web browser berikut.

Gambar 3.2.1 Script dan Tampilan Untuk Title Dan Logo

Aspek pertama yang akan praktikan ubah ialah judul dan logo yang

digunakan, namun sebelumnya, siapkan gambar logo lalu salin ke dalam folder

image, lalu ubah url gambar logo yang akan diubah, seperti pada gambar berikut,

Gambar 3.2.2 Logo Dan Judul Yang Sudah Diubah

Penggunaan kode <head> diatas judul digunakan untuk memberikan

informasi tentang dokumen pada suatu bagian website, kemudian penggunaan

kode itu harus diakhiri dimana penulisan judul berakhir dengan menutup judul

</title> dan menutup fungsi bagian head dengan </head> . Setela itu dilanjutkan

dengan memulai kode <body> yang mendefinisikan isi dokumen HTML,

berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web

browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animasi, link dan

lain-lain. Adapun <div> berfungsi untuk mendefinisikan sebuah section dalam

dokumen, <div id="header"> maksudnya adalah bagian ini merupakan section

awal dari isi sebuah website yaitu berupa logo. Ubah url gambar dengan gambar

yg akan menjadi logo website kemudian atur lebar dan panjangnya agar lebih

menarik, dan tidak lupa untuk menutup section header pada bagian bawah

pengaturan logo dengan </div>.

Selanjutnya adalah mengubah bagian teks navigasi yang terletak di atas, untuk

lebih detail lihat gambar 3.2.3

epair Data

Gambar 3.2.3 Script dan Tampilan Untuk Text Navigation

Kode <ul class="navigation"> berfungsi untuk menunjukkan bahwa bagian ini

merupakan menu navigasi, yaitu adalah sebuah fasilitas yang diberikan oleh

pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu

navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih

mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah

mencarinya. Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun

(vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak,

tergantung kebutuhan dari situs tersebut.

Lalu kode <a href="index.html">Home</a> diawali dan diakhiri oleh kode

<a> dan </a> yang berfungsi untuk mendefinisikan sebuah anchor, tetapi lebih

tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling

menautkan antara satu dokumen HTML ke dokumen HTML yang lain . Karena

template ini harus diubah sesuai dengan situs yang telah dikonsepkan, maka

praktikan mengubahnya dengan mengganti nama menunya. Untuk perubahannya

lihat pada gambar 3.2.4 berikut,

Gambar 3.2.4 Menu Navigasi Yang Sudah Diubah

Kemudian untuk selanjutnya adalah bagian isi, berikut penjelasan script dan

tampilannya, lihat pada gambar 3.2.5,

Gambar 3.2.5 Script dan Tampilan Untuk Contents

Pada awal script terdapat kode <div id="contents"> yang maksudnya adalah

bagian ini merupakan section dari sebuah bagian isi/ contents website. Adapun

penggunaan kode html <h1> sebelum tulisan keterangan disebelah gambar

digunakan untuk menunjukkan awal dari suatu judul dari dokumen HTML

tersebut, lalu fungsi <br> ialah Memberi baris baru/pindah baris, dan fungsi dari

<p> ialah untuk membuat sebuah paragraph. Untuk perubahan pada bagian ini

tidak ada yang begitu berbeda, hanya mengubah gambar dan kalimat keterangan

disamping gambar tersebut dengan kalimat invitation seperti pada gambar berikut,

Gambar 3.2.6 Kalimat Invitation Dan Gambar Yang Sudah Diubah

Setelah itu sedikit perubahan juga praktikan berikan pada bagian selanjutnya

yakni isi yang menjadi sorotan, untuk lebih jelas lihat pada gambar 3.2.7

Gambar 3.2.7 Script dan Tampilan Untuk Highlight

Fungsi-fungsi kode kode htmlnya masih sama seperti yang praktikan jelaskan

sebelumnya, pada bagian ini praktikan hanya mengubah kalimat testimoni dari

pelanggan jasa konsultasi dan layanan-layanan yang diberikan oleh konsep situs

praktikan. Perubahannya lihat pada gambar berikut,

Gambar 3.2.8 Highlight Yang Sudah Diubah

Bagian yang akan diubah selanjutnya adalah bagian fitur yang terletak

dibagian bawah laman situs.

Gambar 3.2.9 Script dan Tampilan Untuk Featured Website

Pada bagian ini praktikan hanya mengubah gambar pada bingkai-bingkai yang

berbaris horizontal dan mengubah judul gambar yang merupakan pilihan layanan-

layanan situs seperti yang telah dikonsepkan, yang dimana akan memudahkan

pelanggan untuk mengakses layanan-layanan tersebut. Berikut perubahannya,

Gambar 3.2.10 Featured Yang Telah Diubah

Pada bagian ini praktikan juga mengubah link button read more karena fungsi

button read more masih belum berfungsi sebagaimana mestinya, seharusnya

setelah klik read more akan muncul ke laman layanan yang dipilih, jadi link yang

dituju pada setiap button read more haruslah link yang berisi informasi layanan

tersebut, disini praktikan mengubah link index menjadi lawyers <a

href="lawyers.html" class="more">Read More</a> sehingga saat mengklik

button read more pada layanan our task pelanggan akan ditujukan pada laman

lawyers.html seperti pada gambar berikut,

Gambar 3.2.10 Tujuan Link Read More Pada Layanan Our Task

Dan bagian akhir dari laman file index yang harus diubah ialah bagian footer

dimana berisikan kontak pemilik website, pengiriman pesan kepada pemilik dan

berita terakhir yang diunggah oleh situs tersebut, seperti pada gambar berikut,

Gambar 3.2.11 Script dan Tampilan Untuk Footer Website

Yang akan praktikan ubah pada bagian ini tentunya kontak pemilik, Karena

sudah menjadi tampilan situs yang berisi konsep praktikan, maka kontak pemilik

situs akan diubah oleh kontak pemilik jasa konsultasi ini. Perubahannya akan

seperti pada gambar berikut,

Gambar 3.2.12 Footer Website Yang Telah Diubah

Namun ada bagian yang belum diubah yakni pada bagian berita terkini yang

diunggah terakhir pada situs, perubahan pada bagian tersebut akan berjalan

seiring dengan kesiapan bahan yang akan diisi pada website ini.

3. Mengubah Tampilan Web Pada Menu Navigasi

Pembahasan selanjutnya ialah perubahan pada script about.html,

practices.html, lawyers.html, news.html, dan contact.html, script-script tersebut

merupakan lanjutan dari script index sebelumnya dan masih saling berhubungan,

bagian ini lebih tepatnya adalah link menu navigasi.

Gambar 3.3.1 Script dan Tampilan Untuk Menu About

Saat menu about di klik, tulisan about akan otomatis berwarna putih yang

menandakan menu tersebut sedang available, untuk hal seperti itu digunakan

kode html “active” seperti yang praktikan gunakan yaitu,

<li class="active">

<a href="about.html">All About Statistics</a>

</li>

Kemudian praktikan mengubah nama menu navigasinya, gambar dan isi dari

menu about. Seperti pada gambar berikut,

Gambar 3.3.2 Tampilan Isi Menu About Yang Telah Diubah

Bagian isi dari menu ini praktikan isikan dengan artikel-artikel terkait dengan

statistika yang masih hangat, karena artikel berupa bacaan yang lumayan panjang,

maka disini praktikan ingin memberi button read more agar mengefesienkan

penempatan dan tampilan pada laman website, namun kali ini praktikan belum

mengubahnya, tampilan isi dan script yang digunakan masih sama, seperti

berikut,

Gambar 3.3.3 Script Dan Tampilan Untuk Isi Menu Practices Yang Telah

Diubah

Jadi pada bagian ini hanya isi dan tampilan gambar saja yang praktikan ubah,

selebihnya bagian header dan footer masih sama seperti pada laman index.

Lalu pada menu selanjutnya ialah menu practices yang kemudian diubah

menjadi menu consulting service seperti yang telah dikonsepkan, maka tampilan

awal dan perubahannya akan seperti pada gambar dibawah,

Gambar 3.3.4 Tampilan Menu Practices Sebelum Perubahan

Praktikan akan memberikan script untuk tampilan situs diatas kemudian script

yang diubah menjadi tampilan seperti gambar 3.3.5 dibawah akan diberi garis

bawah sebagai pembeda, berikut scriptnya,

<div> <h2>Pelayanan Konsultasi</h2> <ul>

<li> <a href="post.html">Perusahaan</a> </li>

<li> <a href="post.html">Tugas Akhir Kuliah</a> </li>

<li> <a href="post.html">Bisnis Rumah Tangga</a> </li>

</ul> </div>

<div class="main"> <h1>Pelayanan Konsultasi</h1>

<ul class="practices"> <li class="frame5"> <a href="post.html" class="box">

<img src="images/perusahaan.jpg" height="198" width="265"> <span>

Perusahaan </span> </a> </li>

<li class="frame5"> <a href="post.html" class="box"> <img

src="images/tugasakhir.jpg" height="198" width="265"> <span> Tugas Akhir

Kuliah </span> </a> </li>

1 2

3

1

23

Gambar 3.3.5 Tampilan Isi Menu Practices Setelah Perubahan

Menu selanjutnya yang akan dibahas ialah menu lawyers yang diubah menjadi

menu our task yang dimana berisikan kumpulan tuga-tugas praktikan yang dapat

diunggah untuk dijadikan referensi tugas bagi yang membutuhkannya.

Gambar 3.3.6 Tampilan Isi Menu Lawyers Sebelum Perubahan

1 2

3

Gambar 3.3.7 Tampilan Menu Lawyers Setelah Diubah

Terdapat perbedaan pada bagian gambar yang disertai keterangan

disampingnya, pada konsep website praktikan sendiri, praktikan akan

menjadikannya sebagai situs yang dapat berbagi ilmu dan pengalaman secara luas

termasuk juga seperti tugas yang dapat diunduh tersebut, praktikan menambahkan

button unduh dan memberi link download pada setiap tugas, namun untuk saat ini

masih akan diproses, sehingga praktikan tidak dapat menunjukkan cara

pengunduhannya.

Untuk yang berikutnya ialah menu news yang diubah menjadi menu book

store yang dimana menu ini berisi tentang penjualan buku-buku seputar statistika.

Lihat perubahan sebelum dan sesudah mengubah script dari menu news berikut,

Gambar 3.3.8 Menu News Sebelum Diubah

Gambar 3.3.9 Menu News Setelah Diubah

Praktikan tidak melakukan perubahan yang signifikan pada bagian-bagian di

menu ini, hanya merubah gambar dan keterangan-keterangannya. Script untuk

frame yang berisi gambar menggunakan kode “box” seperti berikut,

<li> <div class="box">

<img src="images/PengantarStatistik.jpg" alt="Img" height="245"width="213">

</div> </li>

Sebelum beranjak pada menu selanjutnya, praktikan juga akan membahas link

yang terdapat pada button read more, saat mengkliknya laman otomatis akan

berganti dan berisikan keterangan detail tentang spesifikasi buku yang akan

dibeli. Lihat pada gambar 3.3.10 berikut,

Gambar 3.3.10 Tampilan Link Read More Pada Pilihan Buku Yang Dijual

Kemudian pembahasan menu terakhir pada website yakni menu contact, berisikan

kontak pemilik website dan kotak pesan untuk mengirim pesan langsung pada

admin melalui email pada web. Berikut tampilan sebelum dan sesudah di edit,

Gambar 3.3.11 Tampilan Menu Contact Sebelum Diubah

Gambar 3.3.12 Tampilan Menu Contact Setelah Diubah

Pada bagian akhir ini praktikan juga tidak melakukan penambahan fitur-fitur

lainnya, hanya mengubah nama pemilik dan kontak pemilik website. Pada bagian

pemesanan/order semua script disamakan, tag html yang digunakan ialah :

<label>Pesanan</label> <input type="text" value="">

<label> berfungsi untuk mendefinisikan label pada sebuah elemen <input>, yang

berarti memberikan tempat untuk bagian keterangan yang akan diisi oleh

pengunjung website.

Kemudian bagian pemesanan inilah yang akan praktikan sambungkan dengan

database yang sebelumnya sudah dibuat pada aplikasi apache. Praktikan

membuat database baru yang diberi nama “projek” dan nama tabel “order”,

didalam tabel order berisi opsi-opsi formulir untuk pemesanan yang telah

disesuaikan dengan formulir pemesanan pada website. Berikut tabel “order” yang

telah dibuat,

Gambar 3.3.13 Tabel Order Pada phpMyAdmin

Lalu untuk mengoneksikannya dengan formulir pada website, praktikan

membuat script input dan koneksi untuk menghubungkannya. Script input

digunakan untuk membaca data yang diisikan pada formulir kemudian

dihubungkan dengan script koneksi yang akan membawa data terhubung dengan

database. Berikut script input dan koneksinya,

Gambar 3.3.14 Script input.html

Gambar 3.3.15 Script koneksi.html

Untuk mengaplikasikannya, praktikan akan mencoba mengisi formulir pemesanan

tersebut seperti pada gambar dibawah,

Gambar 3.3.16 Mengisi Formulir Pemesanan

Setelah dikoneksi, data yang dimasukkan oleh pengunjung pada website akan

masuk otomatis dalam database dan dapat dibuka secara offline oleh praktikan

yaitu melalu localhost phpMyAdmin. Untuk membuktikan keberhasilan koneksi

data periksa tabel yang telah dibuat sebelumnya,

Gambar 3.3.17 Tabel Yang Telah Terisi Data Dari Website

Pada gambar 3.3.17 diatas data yang diisi pada formulir website telah masuk

dalam tabel dengan benar.

4. Mengubah Template Style Dengan CSS

Pembahasan terakhir ini akan membahas sedikit mengenai gaya tampilan yang

praktikan ubah. Praktikan mengubah font style, font color dan background color.

Untuk mulai mengubah script style , buka script dengan mengklik kanan edit

with Notepad++ setelah itu mulai menganalisa script yang tersedia untuk

kemudian diubah sesuai keinginan dan pertimbangan estetikanya, praktikan

mengusahakan untuk tidak memberi warna-warna terang pada design website,

karena akan berdampak untuk minat pengunjung membaca website ini.

Gambar 3.4.1 Script Style Untuk Header Website

1

2

3

Keterangan script 1, praktikan mengubah gambar berwarna yang menjadi

background menu navigasi dan logo, gambar berwarna hijau praktikan edit

dengan photoshop menjadi warna biru, tentu saja warna yang diubah tidak terlalu

mencolok agar tidak menyebabkan mata lelah. Kemudian adalah keterangan

script 2, merupakan setting untuk peletakan logo, dimana dapat dilihat pada script

terdapat kode float:left; yang berarti letak logo berada dibagian kiri website. Sama

halnya dengan keterangan script 3, merupakan pengaturan letak navigasi, yakni

menu-menu pilihan yang tersedia di bagian atas website, menu-menu tersebut

terletak disebelah kanan sebab disetting dengan float:right; .

Gambar 3.4.2 Script Style Untuk Contents Website

Untuk selanjutnya adalah keterangan script 4, yakni praktikan mengubah

warna tulisan yang ada pada bagian contents , selain warna tulisan style hurufnya

juga diganti agar lebih berkesan unik, keterangan ini juga sama halnya dengan

script 5, lalu pada script 6 merupakan pegaturan tulisan “uppercase” yang berarti

huruf besar. Huruf besar ini untuk tulisan pada setiap judul dibagian contents.

4

5

6

Gambar 3.4.3 Script Style Untuk Footer Website

Dan untuk keterangan script 7, praktikan mengubah warna gambar pada

footer selaras dengan warna gambar pada header. Kemudian yang terakhir pada

script 8, praktikan mengubah warna border yang berkodekan #C2C2C2 untuk

warna abu-abu terang.

7

8

devlore.files.wordpress.com · Web viewbukanlah hal yang mudah dan cepat, karena terkadang membuat...

Documents

Transcript of devlore.files.wordpress.com · Web viewbukanlah hal yang mudah dan cepat, karena terkadang membuat...