devlore.files.wordpress.com · web viewbab iii pembahasan pada kali ini praktikan akan menjelaskan...
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
sebagai berikut,
<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" name="radio" id="radio" value="Laki - Laki" />
<label for="radio">Laki - Laki
<input type="radio" name="radio" id="radio" value="Perempuan" />
Perempuan</label></td>
</tr>
Script diatas menggunakan tipe data radio, tipe radio ini hampir sama seperti
opsi (hanya bisa memilih satu diantara pilihan yang ada), namun tipe ini memiliki
pilihan yang tidak sebanyak option, jenis kelamin ini diberikan dua pilihan, yakni
perempuan atau laki-laki. Untuk mengakhiri jangan lupa gunakan tag dengan
menambahkan slash. Berikut tampilan hasil script untuk tipe data radio diatas,
Gambar 3.2.10 Tampilan Script Untuk Data Jenis Kelamin
Tambahan data formulir selanjutnya adalah formulir data prodi, berikut scriptnya,
Gambar 3.2.11 Script Untuk Data Prodi
Bagian ini praktikan menggunakan tipe data checkbox atau kotak yang diberi
centang pada pilihan yang sesuai, sama halnya dengan tipe data opsi dan radio.
selebihnya belum ada script yang berbeda dari sebelumnya yang dapat praktikan
uraikan lebih jelas, untuk melihat hasil dari script pada gambar 3.2.11 lihat pada
gambar 3.2.12 berikut,
Gambar 3.2.12 Tampilan Script Untuk Formulir Data Prodi
Dan bagian akhir dari pembuatan form ini adalah menambahkan formulir data
alamat, nomer telepon, dan foto serta tombol reset untuk memperbarui dan
tombol ok untuk menyimpan, berikut scriptnya,
Gambar 3.2.13 Script Untuk Formulir Data Alamat, No HP, Foto, Reset dan OK
Untuk data alamat dan nomer telepon scriptnya masih sama seperti script
untuk data “NIM” dan “Nama”, pada foto diri mahasiswa scriptnya sama, hanya
mengubah tipe datanya menjadi file. Kemudian perbedaan terdapat pada script
tombol reset dan OK, yang dimana menggunakan bentuk teks didalam button.
Bagian pembuatan form telah selesai, maka tampilan form secara keseluruhan
akan seperti pada gambar berikut,
Gambar 3.2.14 Hasil Script Untuk Formulir Data Alamat, No HP, Reset dan OK
Setelah pembuatan form, selanjutnya adalah memodifikasi isi website dengan
menambahkan foto-foto kegiatan mahasiswa dan akademik FMIPA yang
sekaligus digunakan sebagai informasi dan sarana perkenalan fakultas kepada
mahasiswa yang diberi judul “galeri FMIPA”.
Gambar 3.2.15 Script Untuk Membuat Galeri
Letak galeri diberi jarak dengan letak form agar terlihat rapi itulah fungsi dari
kode <br> dan <p>, membuat baris baru dan paragraf baru. Judul “Galeri FMIPA
UII” diberi warna putih dengan memasukkan kode html <font color="#ffffff">.
Lalu pada baris berikutnya, praktikan membuat foto-foto galeri berjalan dari arah
kanan menuju ke kiri, untuk melakukannya praktikan memasukkan tag html
<marquee align= "left" direction="left" …> , dengan keterangan lebar 100% yang
artinya lebarnya mencakup keseluruhan dari tampilan web dan height="132"
untuk mengatur tinggi foto, onmouseout="this.start()" dan
onmouseover="this.stop()" digunakan untuk mengatur pemberhentian foto, foto
akan berhenti berjalan jika mouse direction diletakkan pada foto dan dapat mulai
jalan kembali jika mouse direction dijauhkan, kemudian ada scrollamount="5"
untuk mengatur cepat lambatnya foto berjalan, kemudian masukkan foto
menggunakan kode html <a href="Link URL-1"><img src="gbr/11.jpg" /></a>,
agar foto berhasil dimasukkan dalam web, penyimpanan sebaiknya di satu tempat
yang sama dengan script. Berikut adalah hasil dari script pada gambar 3.2.15,
Gambar 3.2.16 Hasil Script Untuk Untuk Membuat Galeri
Foto berhasil ditambahkan, dan memperindah tampilan website, untuk
keseluruhan tampilan website sederhana yang berisi form adalah seperti berikut,
Gambar 3.2.17 Tampilan Website Keseluruhan
3. Koneksi Database
Langkah selanjutnya setelah website form sederhana jadi yakni praktikan akan
membahas cara mengkoneksi basis data dari data form yang telah diisikan oleh
mahasiswa. Fungsi koneksi ini bertujuan agar data dapat tersimpan otomatis
dalam basis data admin…. Mulai dengan membuka lembara kerja phpMyAdmin,
Gambar 3.3.1 Tabel Formulir Data Diri Pada phpMyAdmin
Pada gambar diatas praktikan membuat database formulir data diri ini melalui
phpMyAdmin dengan nama “fakultas_mipa” dan nama tabel “data mahasiswa”
yang kemudian diisi dengan komponen-komponen dari formulir data diri, isi dari
tabel formulir data diri juga telah tertera pada gambar 3.3.1.
Selanjutnya, membuat script pada notepad++ untuk mengoneksikannya
dengan phpMyAdmin lalu disimpan dengan cara klik berkas simpan sebagai
beri nama “koneksi.php” dengan ekstensi php. Berikut script koneksi.php
yang telah dibuat sesuai dengan format basis datanya,
Gambar 3.3.2 Script Koneksi.php
Pada script diatas praktikan menggunakan localhost/ phpMyAdmin, dengan
username dan password diisikan sesuai dengan yang praktikan buat pada saat
menginstall aplikasi apache. Lalu database name sesuai dengan nama database
yang sudah dibuat pada langkah sebelumnya. Kemudian ada mysql_connect yang
digunakan untuk mengoneksikan script php dengan database mysql.
mysql_select_db digunakan untuk memilih nama database yang akan diakses
dengan script php yang penulisannya berupa nama database diikuti dengan link
connection.
Setelah script koneksi selesai, langkah selanjutnya adalah membuat script
input.php di notepad++ untuk menyambungkannya ke phpMyAdmin, lalu
simpan file input.php dengan cara, klik berkas simpan sebagai beri nama
“input.php” dengan ekstensi php. Berikut script input.php ,
Gambar 3.3.3 Script Input.php
Pada gambar 3.3.3 script require_once berfungsi untuk menyambungkan
script input.php dengan script koneksi.php. Fungsi ini pada dasarnya mirip
seperti fungsi include. Perbedaannya hanya terletak pada saat data di submit
maka data yang sudah dimasukkan tidak tampak lagi untuk keamanan pengguna.
Sedangkan once digunakan untuk memastikan bahwa file yang disertakan hanya
dieksekusi sekali saja, walaupun file disertakan beberapa kali, lalu fungsi dollar
($) pada script yaitu untuk mengambil sebuah nilai atau mengisi nilai pada
sebuah variabel dan disamadengankan dengan $_POST untuk mengirimkan ke
database dan mengambil nilai variabel dari halaman lain.
Pada kasus kali ini, data yang ditelah dimasukkan dari web akan tersimpan
dan kemudian disambungkan/ dikoneksikan ke dalam database phpMyAdmin.
Kuerinya berupa input yang akan dimasukkan dalam tabel “data_mahasiswa”
pada kolom yang sudah ditentukan di atas, untuk nilai (value) diambil dari web
yang sudah diberi fungsi ($). Lalu yang terakhir adalah fungsi if yang digunakan
untuk menampilkan kesuksesan input data dari web dengan kesesuaian basis
datanya. Jika data yang dimasukkan sesuai format, maka akan otomatis masuk ke
laman konfirmasi “success” setelah mengklik tombol OK yang dimana laman
tersebut memiliki keterangan “DATA TELAH TERSIMPAN”, seperti gambar
berikut,
Gambar 3.3.4 Link Success
Langkah-langkah pembuatan web hingga mengkoneksikannya telah selesai,
selanjutnya adalah menjalankan formulir yang terkoneksi dengan database
tersebut. Buka laman website sederhana yang sudah dibuat pada browser terlebih
dahulu dengan cara masukkan alamat localhost/ masukkan username dan
password file website form sederhana.html , maka akan masuk pada laman
web yang telah dibuat sebelumnya, kemudian isikan formulir sesuai data diri
anda, setelah usai barulai klik “OK”, tampilan proses input data akan tampak
seperti pada gambar berikut,
Gambar 3.3.5 Tampilan Input Data
Data yang dimasukkan pada formulir data diri di website akan masuk dalam
basis data yang telah dikoneksikan dengan website tersebut. Data yang masuk
dalam basis data akan seperti pada gambar berikut,
Gambar 3.3.6 Data Formulir Yang Masuk Dalam Database