BAB III PEMBAHASAN Pada kali ini praktikan akan menjelaskan secara rinci mengenai langkah-langkah untuk membuat website sederhana yang berisi form. 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, kali ini praktikan sebagai pemula akan membuat website yang sederhana menggunakan aplikasi Notepad++, praktikan memilih menggunakan aplikasi Notepad++ ini karena lebih mudah dan simple, namun masih banyak lagi aplikasi pembuat website lainnya yang juga dapat digunakan. Sebelum memulai ke langkah-langkah pembuatannya, praktikan akan memberikan tambahan pengetahuan untuk fungsi dari macam-macam kode html yang sering digunakan dalam membangun sebuah website. Berikut macam-macam kode html beserta fungsinya, 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
22
Embed
devlore.files.wordpress.com · Web viewBAB III PEMBAHASAN Pada kali ini praktikan akan menjelaskan secara rinci mengenai langkah-langkah untuk membuat website sederhana yang berisi
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
BAB III
PEMBAHASAN
Pada kali ini praktikan akan menjelaskan secara rinci mengenai langkah-
langkah untuk membuat website sederhana yang berisi form. 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, kali ini praktikan sebagai pemula akan
membuat website yang sederhana menggunakan aplikasi Notepad++, praktikan
memilih menggunakan aplikasi Notepad++ ini karena lebih mudah dan simple,
namun masih banyak lagi aplikasi pembuat website lainnya yang juga dapat
digunakan. Sebelum memulai ke langkah-langkah pembuatannya, praktikan akan
memberikan tambahan pengetahuan untuk fungsi dari macam-macam kode html yang
sering digunakan dalam membangun sebuah website. Berikut macam-macam kode
html beserta fungsinya,
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 <embed> Digunakan untuk memasukkan file video atau file musik<fieldset> Untuk mengelompokkan elemen-elemen yang terkait dalam
form / membuat seperti frame-box di dalam form<font> Mendefinisikan jenis font, warna dan ukuran untuk teks<form> Mendefinisikan sebuah form HTML untuk input form<frame /> Mendefinisikan frame dalam fremeset<h1> to <h6> Digunakan untuk menunjukkan awal dari suatu header/judul
dari dokumen HTML tersebut.<head> Digunakan untuk memberikan informasi tentang dokumen
tersebut<hr /> Membuat garis horisontal<html> Mendefinisikan root dari suatu dokumen HTML<i> Membuat teks miring<img /> Berfungsi untuk menampilkan gambar pada dokumen HTML<input /> Mendefinisikan input field pada form<li> Digunakan untuk menampilkan informasi dalam bentuk item
daftar<label> Mendefinisikan label untuk sebuah elemen <input><link /> Mendefinisikan hubungan antara dokumen dan sumber
eksternalnya<marquee> Membuat teks berjalan secara vertikal atau horisontal<menu> Mendefinisikan sebuah daftar menu<option> Menampilkan beberapa pilihan yang berbentuk dalam sebuah
daftar drop-down<p> Membuat sebuah paragraf<span> Mendefinisikan sebuah section dalam dokumen<style> Mendefinisikan informasi style untuk dokumen HTML<table> Membuat tabel<tbody> Untuk mengelompokkan isi body di dalam sebuah tabel<td> Mendefinisikan sel di dalam sebuah tabel<textarea> Mendefinisikan sebuah kontrol input multiline<tfoot> Untuk mengelompokkan isi footer di dalam sebuah tabel<th> Mendefinisikan sel header di dalam sebuah tabel
<title> Membuat judul untuk dokumen HTML<tr> Membuat baris di dalam sebuah tabel<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
Berikut langkah-langkah pembuatan website sederhana menggunakan aplikasi
Notepad++ yang dikonsep semenarik mungkin dan dimodifikasi dengan
memasukkan form yang telah dikoneksikan dengan database localhost,
1. Membuka Notepad++ Untuk Membuat Script HTML
Praktikan pertama-tama membuka aplikasi Notepad++ yang terdapat pada PC
dengan cara klik Start Pencarian Notepad++ enter
Gambar 3.1.1 Buka Aplikasi Notepad++ Pada PC
Maka akan muncul tampilan awal lemba kerja Notepad++ seperti pada gambar
berikut,
Gambar 3.1.1 Halaman Awal Notepad++
2. Mulai Bekerja Dengan Notepad++ Untuk Membuat Script HTML
Langkah berikutnya, masukkan tag html yang digunakan untuk membangun
header pada website, praktikan akan membuat script awalnya dengan
mengetikkan tag <html> dan <head> dimana kode itu penting untuk awal
pembuatan script website yang akan memanggil dan membaca script html yang
akan dibuat, setelah tag tersebut baru memasukkan script isi web yang akan
diletakkan pada bagian kepala/atas website , seperti pada gambar 3.1.2 berikut,
Gambar 3.2.1 Script Untuk Membuat Tulisan Berjalan
Pada bagian awal ini, praktikan ingin memberi ucapan selamat datang pada
laman website menggunakan tulisan yang bergerak kesamping kiri dan kanan
terus menerus atau bolak-balik, tag <marquee> berfungsi agar tulisan berjalan,
tag <br> berfungsi untuk memulai baris baru atau biasa disebut dengan enter,
keterangan align=”center” merupakan pengaturan letak teks tengah,
direction=”right” merupakan pengaturan arah berjalannya teks menuju ke arah
kanan, dan scroolamount=”2” ialah untuk mengatur cepat lambatnya teks
berjalan, semakin besar angkanya akan bergerak semakin cepat. Hasil dari script
diatas akan seperti pada gambar 3.2.2 berikut,
Gambar 3.2.2 Tampilan Script Untuk Teks Berjalan
Gambar 3.2.3 Script Untuk Membuat Judul Dan Font Style
Pada gambar 3.2.3 praktikan membuat judul pada tab laman browser yang
akan muncul jika website ini dibuka. Hanya dengan menggunakan tag <title> dan
mengakhirinya dengan tag penutup </title> judul pun jadi. Pada gambar 3.2.3 ini
juga praktikan memulai tag <style> yang akan digunakan untuk mengatur font
style dan font face yang akan digunakan. Untuk pengaturan warna, dituliskan
sesuai dengan kode warna yang diinginkan, kali ini praktikan memilih warna
hitam yang berkode #000000, dan tidak lupa untuk menutup kode <style> dengan
</style>. Hasil dari script pada gambar 3.2.3 diatas akan seperti pada gambar
3.2.4 berikut,
Gambar 3.2.4 Tampilan Script Untuk Judul Dan Style Font
Pada gambar 3.2.4 hasilnya terlihat berbeda dari sebelumnya walaupun isinya
masih belum ada yang tambahkan. Namun pemberian gaya dan warna pada huruf
membuatnya terkesan lebih menarik, selain itu tab laman juga telah berganti judul
menjadi “Data Diri Mahasiswa”.
Gambar 3.2.5 Script Untuk Memasukkan Background
Pada script diatas praktikan akan memasukkan background gambar gedung
FMIPA pada body website, sebelumnya gambar yang akan di jadikan background
disimpan menjadi satu folder dengan script html ini. Hasilnya akan seperti pada
gambar berikut,
Gambar 3.2.6 Tampilan Script Setelah Ditambahkan Background
Setelah menambahkan background, langkah berikutnya adalah membuat form
data diri mahasiswa/i yang akan dikoneksikan ke database. Script pembuatan
form yang praktikan buat disajikakan pada gambar 3.2.7 dan 3.2.9 berikut,
Gambar 3.2.7 Script Untuk Form Nama dan NIM
Sebelum membuat formnya, praktikan memberi keterangan “Form Data Diri
Mahasiswa FMIPA UII” untuk nama form yang akan dibuat. Kemudian pada
script diatas tag <p> berfungsi untuk memulai paragraf baru, tag <u> berfungsi
untuk memberi garis bawah pada teks atau yang biasa disebut underlined. Script
selanjutnya praktikan menggunakan fungsi tag <table> untuk membuat form agar
terlihat lebih rapi dan terstruktur, pengaturan panjang lebar tabel diatur dengan
width dan border untuk mengatur lebar tepi tabel. Kemudian tag <tr> berfungsi
untuk membuat baris pada sebuah tabel, dan tag <td> berfungsi untuk membuat
kolom pada tabel, kolom pertama diisi dengan “NIM” dan kolom kedua diisi
dengan “Nama”. Pada kolom “NIM” tipe datanya berupa INT (integer) sebab data
yang akan di input pada “NIM” berupa angka-angka, sedangkan pada kolom
“Nama” tipe data yang digunakan hanya berupa text (tulisan). Lalu pada akhir
setiap kolom dan baris tabel ditutup dengan memberi / (slash) pada tag yang
difungsikan diawal seperti </tr> </td>. Hasil script diatas akan menjadi seperti
pada gambar 3.2.8 berikut,
Gambar 3.2.8 Tampilan Script Untuk Data Nama dan NIM
Yang selanjutnya ialah menambahkan kolom pada tabel untuk data diri yang
dibutuhkan seperti tanggal lahir, jenis kelamin, prodi, alamat dan nomer telepon.
Untuk Script yang digunakan pada formulir tanggal lahir adalah sebagai berikut,
<tr>
<td>Tanggal Lahir</td>
<td><select name="select" id="select">
<option>1</option>
<option>2</option> , dst
<label for="select"></label>
<select name="select" id="select">
<option>Januari</option>
<option>Februari</option>, dst
<label for="select"></label>
<select name="select" id="select">
<option>1993</option>
<option>1994</option>, dst.
Bentuk data yang digunakan pada tanggal lahir, bulan lahir dan tahunn lahir ini
menggunakan tipe select atau pilih, yang memiliki banyak option dan hanya bisa
memilih salah satunya, tampilan option akan menjadi seperti pada gambar 3.2.9
berikut,
Tanggal Lahir
Bulan Lahir
Tahun Lahir
Gambar 3.2.9 Tampilan Script Untuk Data Tanggal Lahir
Selanjutnya adalah formulir untuk jenis kelamin, script yang digunakan ialah