Diagram Alir (Flowchart) - ANALISA DAN PENERAPAN

BAB IV ANALISA DAN PENERAPAN

2.6 Diagram Alir (Flowchart)

Diagram alir memberikan bentuk gambar dalam merepresentasikan suatu aliran kontrol logika dengan menggunakan notasi-notasi simbol grafis (Pressman, 2002).

Pedoman yang digunakan pada saat akan menggambar atau membuat diagram alir :

a. Diagram alir sebaiknya digambar dari atas ke bawah dan mulai dari bagian kiri dari suatu halaman.

b. Kegiatan di dalam diagram alir harus ditunjukkan dengan jelas.

c. Harus ditunjukkan dari mana kegiatan akan dimulai dan dimana akan berakhirnya.

d. Masing-masing kegiatan di dalam diagram alir sebaiknya digunakan suatu kata yang mewakili suatu pekerjaan.

e. Masing-masing kegiatan di dalam diagram alir harus di dalam urutan yang semestinya.

f. Gunakan simbol-simbol bagan alir yang standar.

Beberapa diagram alir digambar dengan menggunakan simbol-simbol yang di tampilkan pada gambar 2.6 berikut.

SIMBOL KEGUNAAN

Simbol garis alir Untuk menghubungkan antara simbol yang satu dengan simbol yang lainnya.

Simbol Proses Simbol yang menunjukkan pengolahan yang dilakukan oleh computer.

Simbol Keputusan Simbol untuk kondisi yang akan

menghasilkan beberapa kemungkinan jawaban atau aksi.

Simbol Alternate Process Simbol untuk permulaan atau akhir dari suatu program.

Simbol Data Simbol yang menyatakan proses input dan output tanpa tergantung dengan jenis peralatannya.

Simbol Harddisk Menunjukkan input/output menggunakan harddisk.

Simbol Persiapan Simbol untuk persiapan penyimpanan yang akan digunakan sebagai tempat pengolahan di dalam storage.

Gambar 2.6 Simbol Flowchart

Pada penulisan skripsi ini, simbol flowchart yang di terapkan adalah simbol garis alir, simbol proses, simbol keputusan dan simbol alternate process.

2.7 HTML

HTML singkatan dari HyperText Mark-up Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web (Kristianto, 2002).

22 HTML merupakan turunan dari SGML (Standart Generalized Mark-up Language). Standar HTML diatur oleh W3C (World Wide Web Consortium), sebuah organisasi yang bergerak di bidang internet dan jaringan. HTML seperti singkatannya merupakan bahasa Mark-up yaitu bahasa yang mengatur tampilan dari suatu dokumen. Pada intinya sebuah halaman HTML hanyalah sebuah dokumen (file) text yang didalamnya berisi sekumpulan teks dan tag-tag HTML.

sebuah halaman web yang kita lihat menggunakan browser sebenarnya berisi tag-tag HTML yang digabungkan dengan berbagai media lain seperti gambar, suara dan skrip-skrip dinamis sehingga memungkinkan kita untuk berinteraksi didalamnya

Sejak pertama kali dikeluarkan HTML telah mengalami banyak sekali perubahan dan penyempurnaan. Untuk menjaga kompabilitas dengan versi – versi HTML yang ada sebelumnya maka ada sebuah policy untuk memberikan tag berisi informasi versi HTML yang digunakan pada halaman web atau dengan kata lain halaman web dibuat dengan mengikuti standar HTML versi berapa. Dengan adanya tag “DOCTYPE” yang menyatakan standar HTML yang digunakan maka diharapkan “kesalahpahaman” versi oleh browser dapat dihindari.

HTML terdiri dari serangkaian tag – tag. Tag dapat diartikan sebagai sebuah penanda yang diawali dengan tanda lebih kecil “<” dan diakhiri dengan tanda lebih besar “>”. Ada 3 macam tag HTML yaitu :

1. tag tunggal, yaitu tag yang tidak membutuhkan tag penutup mis : tag <br> dan <hr>

23 2. tag ganda, yaitu tag yang membutuhkan tag penutup. jenis tag ini dapat juga diingat sebagai tag yang berpasangan. Sebagian besar tag HTML merupakan tag yang berpasangan

mis : tag <p> </p> , <b> </b>

3. tag komentar, yaitu tag yang digunakan untuk menuliskan komentar, karena untuk komentar maka tag ini tidak akan ditampilkan oleh browser

mis : <!—ini komentar ->

konvensi penulisan tag HTML dijelaskan sebagai berikut:

Contoh :

Kata “font” yang diawali dengan tanda “<” dan “>” adalah tag Kata “face“ disebut sebagai atribut

Kata “verdana” disebut sebagai value atribut atau disingkat menjadi value

Kemudian untuk beberapa tag seperti <p>, <form>, <body> juga ada yang disebut sebagai “event”.

Contoh :

Kata “onload” pada contoh adalah yang disebut sebagai event dan sama seperti sebelumnya kata “value” disebut juga sebagai value. Biasanya event digunakan untuk men-trigger sebuah atau beberapa function oleh client-side scripting.

24 Kemudian ada sebuah peraturan yang tidak tertulis yang menganjurkan agar penulisan value haruslah diapit dengan tanda petik “”. Tidak digunakannya petik tidak akan mempengaruhi bentuk tampilan bila value yang diberikan tidak mengandung spasi. Bila mengandung spasi maka akan terjadi masalah

Contoh:

Bila dijalankan akan mendeteksi nilai=tidak

Bila dijalankan akan mendeteksi nilai=tidak valid 2.7.1 Bagian halaman HTML

Halaman HTML secara umum terbagi atas 3 bagian yaitu : 1. Bagian Versi

2. Bagian Head 3. Bagian Body 2.7.2 Bagian Versi

Bagian versi adalah bagian dari halaman HTML yang memberikan informasi mengenai versi HTML yang digunakan. Contohnya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

25 2.7.3 Bagian Head

Bagian head adalah bagian dari halaman HTML yang berisi tag <title> dan

<meta>, secara umum bagian head dapat juga diartikan sebagai bagian yang berisi keterangan mengenai isi dokumen

Berikut adalah beberapa contoh tag yang berada pada bagian head

<title>Untitled Document</title>

Tag title memberi informasi mengenai judul dokumen

Tag base memberi informasi mengenai alamat awal dari dokumen Tag meta memberi informasi mengenai deskripsi dokumen 2.7.4 Bagian Body

Bagian body dari dokumen HTML merupakan isi dari dokumen pada bagian ini terdapat banyak tag – tag HTML yang digunakan untuk memformat / membentuk sebuah dokumen HTML.

Tag – tag HTML yang seringkali digunakan pada bagian body 1. Tag untuk keperluan format paragraf

a. Tag Paragraf

26 Tag <p>... </p> berfungsi untuk membuat paragraf baru. Teks yang ingin dibuat paragraf diletakkan diantara tag <p> dan tag

</p>

b. Tag Heading

Tag <h1>...</h1> hingga <h6>...</h6> digunakan untuk membuat heading

2. Tag untuk keperluan formating teks a. Tag Bold

Tag <b>...</b> digunakan untuk membuat tebal teks yang berada diantara tag <b> dan tag </b>

b. Tag Italic

Tag <i>...</i> digunakan untuk membuat miring teks yang berada diantara tag <i>...</i>

c. Tag Underline

Tag <u>...</u> digunakan untuk membuat garis bawah teks yang berada di antara tag <u>...</u>

3. Tag untuk keperluan formating font

Tag <font>...</font> digunakan untuk memformat tampilan teks Contoh :

hallo </font>

27 4. Tag untuk keperluan urutan

a. Urutan terurut (ordered)

Tag <ol>...</ol> menandakan bahwa semua yang berada di dalam tag <ol>...</ol> dan juga diapit oleh tag <il>...</il>

adalah item yang akan diurutkan dengan diberikan penomoran. Tag

<il> ... </il> adalah tag yang menandakan bahwa teks yang diapit adalah item yang akan diurutkan

b. Urutan tidak terurut (unordered)

Tag <ul>...</ul> menandakan bahwa semua yang berada di dalam tag <ul>...</ul> dan juga diapit oleh tag <il>...</il>

adalah item yang akan diurutkan tanpa diberikan penomoran. Tag

<il> ... </il> adalah tag yang menandakan bahwa teks yang diapit adalah item yang akan diurutkan.

5. Tag untuk keperluan tabel

Untuk membuat tabel dalam HTML digunakan tag <table>....</table>.

Untuk membuat baris pada tabel di gunakan tag <tr>...</tr> atau dapat diingat dengan kata “table row” kemudian untuk membuat kolom di gunakan tag <td>...</td> atau dapat juga diingat dengan kata “table definition”. Ada atribut khusus pada tag <td> yaitu colspan dan tag

<tr> yaitu rowspan. Colspan mempunyai arti bahwa kolom akan digabungkan mulai dari tag <td> yang mempunyai atribut colspan.

28 Rowspan mempunyai arti bahwa baris akan digabungkan mulai dari tag <tr> yang mempunyai atribut rowspan.

6. Tag untuk keperluan form

Untuk membuat form digunakan tag <form>...</form> kemudian diantara tag <form>...</form> akan diisi oleh tag – tag yang akan membentuk sebuah form.

Beberapa tag yang digunakan untuk membuat sebuah form adalah : a. Tag input

Tag input mempunyai beberapa type yang masing – masing membentuk sebuah komponen

b. Textfield : tempat user menginputkan informasi dalam satu baris Sintaks : <input type="text" name="textfield">

c. Hiddenfield : digunakan untuk menyimpan nilai yang tidak akan ditampilkan pada form biasanya digunakan untuk keperluan pemberian status

Sintaks : <input type="hidden" name="hiddenField">

d. Textarea : tempat user menginputkan informasi dalam bentuk banyak baris

Sintaks : <textarea name="textarea"></textarea>

e. Checkbox : tempat user memasukkan informasi / pilihan

Sintaks : <input type="checkbox" name="checkbox" value=

"checkbox">

29 f. Radiobutton : tempat user memasukkan informasi / pilihan beda dari checkbox adalah pada radiobutton hanya satu piliha yang boleh dipilih dari beberapa pilihan

Sintaks : <input name="radiobutton" type="radio" value=

"radiobutton">

g. Listbox: tempat user memilih pilihan dari daftar yang disediakan Sintaks : <select name="select">

</select>

h. File : tempat user memilih file (browse file) Sintaks : <input type="file" name="file">

i. Submit : tempat user mengirimkan (submit) form

Sintaks : <input type="submit" name="Submit" value="Submit">

j. Reset : tempat user mengosongkan semua field pada form (reset) Sintaks : <input type="reset” name="Reset" value="Reset">

k. Button : menampilkan sebuah button

Sintaks : <input type="button" name="Button" value="button">

7. Tag untuk keperluan media

Untuk menampilkan media berupa gambar digunakan tag <img href=”path_to_image”>

30 8. Tag untuk keperluan link

Untuk menampilkan link ke dokumen HTML lain digunakan tag <a href=”http://www.google.com/ncr”> Google </a>

Pada penulisan skripsi ini, semua tag body HTML di terapkan, kecuali tag untuk keperluan urutan.

Dalam dokumen APLIKASI SEARCH ENGINE PAPER/KARYA ILMIAH BERBASIS WEB MENGGUNAKAN METODE FUZZY RELATION (Halaman 38-48)