eBook Aris Bluegriffon

1

Email : [email protected] || Blog : http://artkustik1990-aris.blogspot.com/

2


DAFTAR ISI

lisensi dokumen ……………………………………………………………………………….. 2

www ……………………………………………………………………………………………. 3

Pengenalan Bluegriffon ……………………………………………………………………….. 4

Pengenalan HTML …………………………………………………………………………….. 5

Pengenalan CSS ………………………………………………………………………………. 6

Bekerja Dengan Bluegriffon …………………………………………………………………… 8

Menu-menu Pada Bluegriffon ………………………………………………………………... 13

PHP & MYSQL ……………………………………………………………………………….. 37

3


LISENSI DOKUMEN

Seluruh isi dalam dokumen ini dapat digunakan dan dimanfaatkan dan disebarluaskan

secara bebas untuk tujuan pendidikan, pembelajaran dan bukan komersial (non profit ), dengan

syarat tidak menghilangkan, menghapus atau mengubah atribut penulis dokumen ini dan

pernyataan dalam lisensi dokumen yang di sertakan disetiap dokumen. Tidak diperbolehkan

melakukan penulisan ulang atau mengkomersialkan buku ini.

4


WWW

Menurut situs wikipedia World Wide Web, biasa lebih terkenal disingkat sebagai WWW

adalah suatu ruang informasi yang dipakai oleh pengenal global yang disebut Pengidentifikasi

Sumber Seragam untuk mengenal pasti sumber daya berguna. WWW sering dianggap sama

dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripada

Internet.

WWW merupakan kumpulan peladen web dari seluruh dunia yang mempunyai kegunaan

untuk menyediakan data dan informasi untuk dapat digunakan bersama. WWW adalah bagian

yang paling menarik dari Internet.Melalui web, para pengguna dapat mengakses informasi-

informasi yang tidak hanya berupa teks tetapi bisa juga berupa gambar, suara, video dan

animasi.

Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya WWW

merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang peladennya tersebar

di lima benua termasuk Indonesia yang terhubung menjadi satu melalui jaringan

Internet.Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML

(Hypertext Markup Language).

Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait dengan

teks lainnya atau bahkan dengan dokumen lain.Keterkaitan halaman lewat teks ini disebut

pranala. Dokumen infomasi ini tidak hanya terdiri dari teks tetapi dapat juga berupa gambar,

mengandung suara bahkan klip video.Kaitan antar-dokumen yang seperti itu biasa disebut

hipermedia.

Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia yang saling

bertautan dengan menggunakan tautan hiperteks. Dengan mengeklik pranala (hipertaut), maka

para pengguna bisa berpindah dari satu dokumen ke dokumen lainnya.

WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun

1991.Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip

risetnya.Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi.Sistem itu

adalah program peranti lunak yang diberi nama Enquire.Dengan program itu, Berners-Lee

berhasil menciptakan jaringan yang menautkan berbagai arsip sehingga memudahkan pencarian

informasi yang dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat

yang dikenal sebagai WWW.

WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN),

Jenewa, Swiss.Pada tahun 1989 Berners-lee membuat pengajuan untuk proyek pembuatan

5


hiperteks global, kemudian pada bulan Oktober 1990, 'World Wide Web' sudah dapat

dijalankan dalam lingkungan CERN.Pada musim panas tahun 1991, WWW secara resmi

digunakan secara luas pada jaringan Internet.

BLUEGRIFFON

Bluegriffon merupakan sebuah html editor yang gratis, BlueGriffon adalah editor

WYSIWYG (what you see is what you get ) konten baru untuk World Wide Web (www).

Didukung oleh Gecko, mesin rendering Firefox, Bluegriffon ini adalah solusi modern dan

sangat bagus untuk mengedit halaman Web yang sesuai dengan Standar Web terbaru.

BlueGriffon adalah sebuah aplikasi intuitif yang menyediakan penulis web (untuk

pemula atau profesional) dengan User Interface sederhana yang memungkinkan untuk membuat

situs web yang menarik tanpa memerlukan pengetahuan teknis yang luas tentang Standar Web.

Didalam BlueGriffon terdapat gecko yang membuat dokumen yang anda buat akan

terlihat persis sama di Firefox ( browser ). Bluegriffon dapat bekerja di semua OS. Saat

menulis buku ini BlueGriffon sudah mendukung HTML5 dan CSS3 terbaru standar, dan

didasarkan pada Gecko 2.0, mesin rendering yang kekuatan Firefox 4.0.

BlueGriffon sesuai dengan standar web W3C, dan dapat membuat dan mengedit

halaman sesuai dengan HTML 4, XHTML 1.0, HTML 5 dan XHTML 5. Mendukung CSS 2.1

dan semua bagian CSS 3 sudah dilaksanakan oleh Gecko. BlueGriffon juga termasuk SVG-

edit, editor berbasis XUL untuk SVG yang awalnya didistribusikan sebagai add-on untuk

Firefox dan disesuaikan dengan BlueGriffon.

Dengan dukungannya oleh CSS3 memungkinkan Anda untuk dengan mudah

menerapkan transformasi, transisi, bayangan, gradien linier dan radial, gambar perbatasan, dan

banyak lagi. BlueGriffon mengotomatiskan penyisipan gaya ke dalam dokumen, yang berarti

bahwa Anda dapat menerapkan gaya ini untuk style sheet Anda tanpa harus mengetahui yang

sebenarnya kode CSS. Demikian pula, BlueGriffon memungkinkan Anda untuk langsung

menanamkan berbeda HTML 5 elemen dari menu termasuk audio dan video.

Bluegriffon juga mendukung CSS Media Query, fitur utama dari CSS 3, memungkinkan

Anda untuk menerapkan stylesheet tidak hanya didasarkan pada media (gaya untuk layar,

ponsel, cetak), tetapi juga tergantung pada fitur perangkat render.

Selain itu, BlueGriffon dilengkapi dengan font web dipanggang ke dalam program. Ini

memiliki antarmuka yang memungkinkan Anda untuk menambahkan web font dari direktori font

Google dan repositori FontSquirrel ke dokumen langsung dari dalam editor.

6


Built in editor SVG memungkinkan Anda untuk menggambar grafik vectorial dari dalam

BlueGriffon untuk menanamkan mereka ke dalam dokumen Anda. Untuk HTML 4 dokumen

yang tidak native menerima SVG markup, BlueGriffon otomatis menambahkan potongan kode

JavaScript diperlukan memungkinkan render SVG dalam dokumen HTML 4. BlueGriffon bebas

untuk download dan tersedia pada Windows, Mac OS X dan Linux Berikut adalah website

resmi dari Bluegriffon http://bluegriffon.org/

HTML

Menurut Wikipedia HyperText Markup Language (HTML) adalah sebuah bahasa

markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi

di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis

dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan

disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah

HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan

dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML

adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.

HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan

penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi

Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989

(CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Dibawah ini adalah contoh tag minimum pada html

<!DOCTYPE html>

<html>

<head bgcolor=red text=white>

<title>'''Bluegriffon''' HTML</title>

</head>

<body>

<p>Hello word nama saya nur wijaya!</p>

</body>

</html>

Penjelasan

Dalam penulisan html harus diawali dengan tag <html> dan di akhiri oleh tag</html>,

tag tersebut menunjukan bahwa dokumen yang di buat merupakan dokumen html, kemudian

terdapat tag head, tag head berada di antara tag html yang di awali oleh <head> dan di akhiri

http://bluegriffon.org/

7


oleh </head>, kemudian tag title, tag title berfungsi untuk memberi judul pada dokumen web

yang akan di buat, pada contoh diatas dokumen itu di beri judul '''Bluegriffon''', dalam

penulisan tag title berada di antara tag head yang di awali dengan tag <title> dan di akhiri

dengan </title>.

Kemudian tag body, tag body berfungsi sebagai isi dari halaman html yang akan dibuat,

penulisan tag body di awali dengan <body> dan diakhiri dengan </body>

CSS

Menurut Wikipedia Cascading Style Sheet (CSS) merupakan aturan untuk

mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan

seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat

mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style

lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS

dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan

XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,

ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi

antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style

sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan

kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Contoh CSS

<html>

<head>

<style type="text/css">

body{ background-color:#d0e4fe; }

h1 {color:orange; text-align:center;}

p { font-family:"Times New Roman"; font-size:20px;}

</style>

</head>

<body>

<h1>CSS example!</h1>

8


<p>This is a paragraph.</p>

</body>

</html>

Penjelasan CSS

Pada tulisan yang diwarnai di atas merupakan contoh dari css, css di awali dengan

<style type=”text/css”> dan di akhiri dengan </style>, di sana memerintahkan background

pada dokumen html berwarna #d0e4fe dan judul di sana <h1>CSS example!</h1>

menggunakan warna orange dengan posisi center atau di tengah( h1 {color:orange; text-

align:center ) , kemudian pada paragraf <p> This is a paragraph </p> menggunakan jenis

tulisan times news roman dengan ukuran 20px ( p { font-family:"Times New Roman"; font-

size:20px; ) .

9


BEKERJA DENGAN BLUEGRIFFON

Semua tutorial yang di buat dalam buku ini menggunakan sistem oprasi lunux ubuntu.

Untuk mendownload Bluegriffon dengan format.deb dapat mengunjungi halaman berikut

http://bluegriffon.org/ dan untuk menginstallnya dapat menggunakan ubuntu software center.

Caranya klik kanan file bluegriffon.deb lalu pilih ubuntu software center, jika sudah selesai

maka tampilannya akan seperti berikut ini

Gambar 1 . Tampilan awal Bluegriffon

Jangan lupa untuk mengaktifkan server apache, pada tulisan ini penulis menggunakan

xampp atau biasa di sebut Lampp pada Linux yang di ekstrak pada folder root / opt / . Untuk

mengaktifkan xampp caranya sebagai berikut, buka terminal dengan cara ctrl + alt + T, lalu

ketik “sudo /opt/lampp/lampp start” kemudian masukan password maka hasilnya akan seperti

gambar di bawah ini

Gambar 2. Mengaktifkan lampp

http://bluegriffon.org/

10


Jika ingin bekerja dengan windows, silahkan install xampp seperti berikut;

Jalankan file xampp-win32-1.4.12-installer.exe , Kemudian akan tampil pilihan untuk

memilih bahasa ketika proses instalasi berjalan. Silakan pilih bahasa Indonesian atau English,

kecuali anda menguasai bahasa lainnya. Pada contoh ini saya memilih bahasa Indonesian

karena saya cinta bahasa Indonesia.

Gambar 3. Step 1

Proses instalasi akan dimulai. Klik Maju untuk memulainya.

Gambar 4. Step2

Akan muncul lisensi software. Silahkan membacanya jika anda mau, tetapi saya lebih

suka untuk tidak membacanya karena terlalu banyak.

11


Klik Saya Setuju untuk melanjutkan.

Gambar 5. Step 3

Selanjutnya silakan anda pilih lokasi install untuk XAMPP. Kemudian klik install

Gambar 6 . step 4

Tunggu beberapa saat sampai proses instalasi selesai.

Gambar 7 . Step 5

http://www.apachefriends.org/en/index.html

12


Instalasi selesai

Gambar 8 . Step 6

Sampai tahap ini, berarti kita sudah menginstal XAMPP. Itu berarti kita sudah selesai

menginstall APACHE dan MYSQL. Langkah selanjutnya adalah menjalankan servicenya.

Jalankan XAMPP Control Panel yang ada di desktop. Atau anda juga dapat

menjalankan XAMPP Control Panel dari menu Start -> All Programs -> apachefriends ->

xampp -> xampp control panel.

Gambar 9 . Step 7

13


Nyalakan Apache dan Mysql dengan mengklik tombol Start. Buka web browser anda,

lalu ketikkan http://localhost. Jika tampilannya seperti di bawah ini, maka apache sudah

terinstall dengan benar.

Gambar 10 . Step 8

Document root milik XAMPP terletak pada folder C:/Program

Files/apachefriends/xampp/htdocs.

http://localhost/

14


MENU – MENU PADA BLUEGRIFFON

Menu File

Di dalam menu file terdapat sub menu new, new wizard, open, open file, save, save as,

print, dan Quit.

Menu Edit

Di dalam menu edit terdapat undo, redo, copy, paste, select, select all, dan replace.

Menu View

Di dalam menu view terdapat all tags mode, toggle view, dan Full screen.

Menu Insert

Di dalamnya terdapat submenu image, table, form, HTML 5 element, web font dll.

Menu Panel

Di dalamnya terdapat stylesheet, style properties dll

Menu Tools

Di dalam menu tools terdapat add ons, javascript console, preferences, dll

Help

Di dalam menu help terdapat users comunity, web site dll

15


Fungsi – fungsi menu yang di miliki Bluegriffon

Gambar 11. Fungsi-fungsi Bluegrifon

1. Untuk membuat dokumen baru

2. Untuk membuat heading atau judul kalimat

3. Untuk menyimpan dokumen

4. Untuk membuat tabel

5. Mengubah huruf menjadi cetak tebal

6. Untuk membuat CSS

7. Untuk menunjukan lokasi dokumen berada

8. Mengubah jenis huruf

9. Menambahkan audio dan video

10. Menggunakan rumus matematika

11. Web browser

12. Menambahkan fungsi form

13. Mendesain web secara grafis

14. Mendesai web dengan code

15. Mengubah warna / menu foreground

16


MEMBUAT DOKUMEN BARU

Ada dua cara untuk membuat dokumen baru pada Bluegrifon

Cara Pertama

1. Klik menu file

2. New

Cara Kedua

1. Arahkan kursor pada gambar menu “create a new page”

2. Klik tanda panah kebawah, atau dropdown

3. Klik more option

Maka akan muncul pilihan sebagai berikut

Gambar 12. New Document

Di sana terdapat pilihan, tipe dokumen apa saja yang ingin digunakan,

meliputi;

* HTML 4

* XHTML 1

* XHTML 1.1

* HTML 5

* XHTML 5

* Kemudian ada pilihan bahasa yang ingin digunakan

* Karakterset

* Text direction, bisa dipilih unspected, life to right ataupun, right to left

17


Sekilas perbedaan HTML 4 dan HTML 5 dan XHTML

HTML 4

1. Penulisan DocType sedikit lebih panjang dibandingkan dengan HTML 5, contohnya sebagai

berikut;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd">

2. Masih membutuhkan FLASH untuk mencantumkan audio ataupun video

3. Masih menggunakan browser yang out of date

HTML 5

1. Penulisan DocType lebih singkat , seperti; <!DOCTYPE HTML>

2. Sudah tersedia tag multimedia seperti audio, video, dan canvas

3. Support update browser

XHTML

XHTML merupakan singkatan dari eXtensible HyperText Markup Language. XHTML

merupakan bentuk reformulasi dari HTML menggunakan paradigma XML.

XHTML adalah bahasa markup penerus dan pengembangan dari HTML yang memiliki

kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat.

HTML merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat

fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas.

Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang tepat),

dokumen XHTML dapat diproses otomatis dengan menggunakan standar pemroses XML -

tidak seperti HTML yang membutuhkan pemroses yang cukup sulit dan kompleks. XHTML

dapat dianggap sebagai perpaduan antara HTML dan XML karena merupakan formulasi ulang

HTML dalam bentuk XML.

http://www.w3.org/TR/xhtml1/

18


IMAGE

Image yang akan di sertakan dalam situs web haruslah menarik, menonjol dan relevan

dengan subjek, serta ukuran file image jangan terlalu besar, sebab akan mempengaruhi waktu

loading web page, apabila terlalu lama maka pengunjung akan segera berkunjung ke situs web

tersebut

Menyisipkan file image

1. Pilih insert

2. Kemudian plih image

3. Setelah itu akan muncul form insert an image, di sana terdapat menu browse untuk memilih

gambar yang akan di gunakan

4. Klik Ok

Perlu di perhatikan bahwa file image disimpan dalam folder HTML yang sama,

kemudian pastikan posisi kursor dimana image akan disisipkan, jika berhasil image akan tampil

dalam web page.

Mengatur peletakan gambar

Dalam Bluegrifon telah menyediakan tiga jenis peletakan gambar yaitu kanan, tengah, dan kiri

Meletakan gambar di kiri

1. klik gambar

2. Pilih align left pada toolbar

3. atau dapat dilihat pada mode source akan bertuliskan seperti ini <img align=”left”

src=........>

Contohnya sebagai berikut ;

Gambar 13. Letak kiri

19


Meletakan gambar di tengah

1. klik gambar

2. Pilih align center pada toolbar

3. atau dapat dilihat pada mode source akan bertuliskan seperti ini <img align=”center”

src=........>

Contohnya Sebagai Berikut ;

Gambar 14. Letak tengah

Meletakan gambar di kanan

1. klik gambar

2. Pilih align right pada toolbar

3. atau dapat dilihat pada mode source akan bertuliskan seperti ini <img align=”right”

src=........>

Contohnya sebagai berikut;

Gambar 15. Gambar kanan

20


TABEL

Tabel adalah fungsi yang paling berguna dalam mengatur layout data dan gambar pada

sebuah halaman HTML, tabel memudahkan webdesigner dalam menambah struktur vertikal

dan horizontal halaman.

Tabel berisi tiga komponen dasar

1. Rows / baris = Ruang secara horizontal

2. Coloumns / kolom = Ruang secara vertikal

3. Cells / sel = Ruang dimana sebuah baris dan kolom bertemu

Gunakan tabel untuk mengatur data pada tabel, mendesain kolom pada halaman, atau

mengatur teks dan grafik pada halaman web.

Cara membuat tabel

1. Insert

2. Pilih tabel, kemudian sesuaikan

berikut adalah contoh tabel 3x3;

Gambar 16, Tabel 3x3

Gambar di atas dilihat dari model wyswyg, jika di lihat dari model source adalah sebagai

berikut;

<!DOCTYPE html>

<html>

<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<title></title>

</head>

<body>

<p></p>

21


<br>

<table style="width: 100%" border="1">

<tbody>

<tr>

<td></td> <td></td> <td></td>

</tr>

<tr>

<td></td> <td></td><td></td>

</tr>

<tr>

<td></td> <td></td> <td></td>

</tr>

</tbody>

</table>

</body>

</html>

Menghapus Cell / sel

1. blok cell yang ingin di hapus

2. kemudian klik kanan lalu pilih table delete

3. cell(s)

Cotoh cell tabel 3x3 yang telah didelete menjadi 2x2 ;

Gambar 17. Tabel 2x2

Menghapus Table

1. Blok table yang ingin di hapus

2. lalu klik kanan pilih table delete

3. table

22


MEWARNAI TEKS

Langkah pertama yang harus dilakukan untuk mewarnai teks adalah;

- memblok teks yang ingin di warnai.

Gambar 18. Teks belum di blok

Gambar 19. Teks di blok

- Klik foreground pada menu

Gambar 20. Menu Foreground

23


- Pilih warna, maka hasilnya akan seperti berikut

Gambar 21. Hasil menu foreground

24


MEMBUAT FORM

Untuk membuat form pada Bluegrifon, langkah pertama yang harus dilakukan adalah mengklik

menu insert, kemudian pilih form -> form,

Kemudian akan muncul tampilan “insert or edit form” seperti berikut;

Gambar 22. Insert or edit form

kemudian terdapat kolom name of the form untuk memberi nama pada form yang di

buat.

Url ( boleh kosong )

Isi Method get atau post

Setting Autocomplete dan Validation

Isi target

Isi Character encodings ( boleh kosong )

Setelah selesai melakukan konfigurasi pada form, hasilnya akan seperti berikut;

Gambar 23. Form

25


INPUT

Untuk membuat form input pada Bluegrifon, langkah pertama yang harus dilakukan

adalah mengklik menu insert, kemudian pilih form -> form -> inputs

Gambar 24. Form Input

Di sana terdapat macam-macam input seperti , text input field , search field, Url field,

Password field dll. Kemudian Pilih “a text input field”, maka akan muncul tampilan “ insert or

edit a form input “ seperti di bawah ini .

Gambar 25. Insert or edit a form input

26


* Beri nama form input dengan mengisi kolom nama pada halaman tersebut

* Isi Value ( boleh kosong )

* Isi form dengan nama form yang sebelumnya sudah di buat

* Isi kolom size untuk menentukan ukuran paka textbox yang akan di buat

* Isi max length untuk menentukan jumlah maksimal dari karakter yang akan diinput

* isi list

* Isi regexp pattern

* Setting textfield tersebut, ingin menggunakan model autocompletion atau tidak

Maka setelah di OK, hasilnya seperti berikut;

Gambar 26. Hasil textfield

27


FIELDSET

Langkah pertama untuk membuat fieldset adalah, klik menu insert → form → fieldshet,

kemudian akan muncul form “insert or edit a fieldset“ seperti berikut;

Gambar 27. konfigurasi fieldset

* Isi nama fieldset pada kolom name

* Isi kolom form dengan nama form yang sebelumnya telah dibuat

Setelah selesai, maka hasilnya adalah sebagai berikut ;

Gambar 28. Hasil fieldset

28


LABEL

Untuk membuat label, caranya adalah dengan memilih menu insert → form → label, kemudian

akan muncul halaman seperti berikut;

Gambar 29. konfigurasi label

* Isi form dengan nama form yang sebelumnya sudah dibuat

* Tentukan control ID dari ID yang ingin di beri label

Dan hasilnya adalah sebagai berikut ;

Gambar 30. Contoh label

29


BUTTON

Untuk membuat button, caranya adalah dengan memilih menu insert → form → button,

kemudian akan muncul halaman seperti berikut;

Gambar 31. konfigurasi button

* Beri nama button dengan cara mengisi form name

* Isi Value

* Pilih state disabled atau enabled

* Setting autofocus

* Isi form

* Pilih type

* Pilih submission method get atau post

* Pilih form validation

* Isi target

30


Jika sudah maka hasilnya adalah sebagai berikut;

Gambar 32. Hasil button

31


TEXTAREA

Untuk membuat textarea, caranya adalah dengan memilih menu insert → form → textarea,

kemudian akan muncul halaman seperti berikut;

Gambar 33. Setting textarea

* Isi nama textarea pada name

* Isi number of coloumns sebagai panjang karakter

* Isi number of rows sebagai jumlah banyak baris

* Pilih wrapping soft atau hard

* Isi Form

Dan hasilnya sebagai berikut

Gambar 34. Hasil Textarea

32


BERMAIN DENGAN TEXT

Di dalam bluegriffon terdapat menu-menu yang bisa digunakan untuk memenipulasi

text, misalnya mewarnai text, cetak tebal, miring, dan garis bawah. Di dalam bluegriffon juga

terdapat menu heading yang berfungsi sebagai judul dalam suatu paragraf, tidak ketinggalan

kalau bluegriffon juga memiliki banyak jenis font untuk di pilih.

MEWARNAI GAMBAR

Langkah pertama yang harus dilakukan untuk mewarnai teks adalah;

- memblok teks yang ingin di warnai.

Gambar 35. Teks belum di blok

Gambar 36. Teks di blok

33


- Klik foreground pada menu

Gambar 37. Menu Foreground

- Pilih warna, maka hasilnya akan seperti berikut

Gambar 38. Hasil menu foreground

34


CETAK TEBAL

Cara mengubah cetak tebal huruf di bluegriffon adalah dengan cara mengklik tombol bold pada

menunya, contohnya sebagai berikut ;

Gambar 39 . Sebelum cetak tebal

Blok kalimat “ Contoh Cetak Tebal “ kemudian klik menu bold, seperti di bawah ini;

Gambar 40. Menu Bold

Dan hasilnya adalah sebagai berikut;

Gambar 41. Hasil cetak tebal

35


CETAK MIRING

Cara mengubah cetak miring huruf di bluegriffon adalah dengan cara mengklik tombol italic

pada menunya, contohnya sebagai berikut ;

Gambar 42. Sebelum cetak miring

Blok kalimat “ Contoh Cetak Miring “ kemudian klik menu italic, seperti di bawah ini;

Gambar 43. Menu italic


Gamnar 44. Hasil Cetak Miring

36


GARIS BAWAH

Cara mengubah garisbawah huruf di bluegriffon adalah dengan cara mengklik tombol underline

pada menunya, contohnya sebagai berikut ;

Gambar 45. Sebelum diberi garis bawah

Blok kalimat “ Contoh Garis Bawah “ kemudian klik menu underline, seperti di bawah ini;

Gambar 46. Menu underline


Gambar 47. Hasil Underline

37


HEADING

Heading berfungsi untuk memberikan fungsi judul pada suatu kalimat. Cara membuat heading

pada bluegriffon adalah sebagai berikut ;

- Pilih choose a paragraph format

Gambar 48. Choose a paragraph format

- kemudian akan muncul beberapa pilihan heading, pilih salah satu maka hasilnya

adalah sebagai berikut

Gambar 49. Hasil heading

38


PHP & MYSQL

Untuk membangun sebuah website idealnya tidak hanya menggunakan html saja,

kadang diperlukan juga bahasa pemograman PHP untuk mengkoneksikan website dengan

database, dibawah ini akan dibahas sekilas tentang PHP dan database Mysql

Latihan 1 . Hello World

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Aris Tutorial Hello_Word</title>

</head>

<body>

<?php

echo ("Hello Word !!!!");

?>

</body>

</html>

Hasil dari kode PHP diatas adalah sebagai berikut;

Gambar 50. Hello world

Keterangan

<?php echo=”Hello world” ?>

Dalam penulisan script PHP selalu diawali dengan tanda “<?php” dan di akhiri dengan “ ?>”.

Perintah di atas di gunakan untuk mencetak kalimat hello word !!!!

39


Latihan 2. Break


<head>

<title>Aris web for</title>

</head>

<body>

<?php

for ($i=1; $i <= 10; $i++)

{

switch ($i)

{

case 5:

print("5 - break 1 <br>");

break 1;

case 7 :

print("7 - break 2 <br>");

break 2;

default:

print ("$i <br>");

break;

}

}

?>

</body>

</html>

Hasilnya adalah sebagai berikut;

Gambar 51. Break

40


Keterangan

Pada kode di atas, break (tanpa angka ) ataupun break 1 mempunyai makna yang sama,

yaitu keluar dari switch. Namun, break 2 berarti keluar dari switch dan sekaligus keluar dari

for.

Latihan 3. Case


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Aris Tutorial case</title>

</head>

<body>

<form method="GET">

<p>Hari :<br />

<input type="text" name="nama_hari" />

<input type="submit" value="Tentukan Hari" />

</p>

<p> </p>

</form>

Hari Ini

<?php

$nama_hari = $_GET["nama_hari"];

switch ($nama_hari)

{

case "minggu" :

print("Minggu");

break;

case "senin" :

print("Senin");

break;

case "selasa" :

print("Selasa");

break;

41


case "rabu" :

print("Rabu");

break;

case "kamis" :

print("Kamis");

break;

case "jumat" :

print("Jumat");

break;

case "sabtu" :

print("Sabtu");

break;

default:

print ("Masukan Hari Dengan Benar");

}

?>

</body>

</html>

Gambar 52. Case

Keterangan

Maksud dari program di atas adalah membuat pilihan hari sesuai apa yang telah di input

Bentuk pernyataan switch adalah

Switch (ekspresi)

{

Case ekspresi_case_1 :

42


Pernyataan_1 ;

Break

Case ekspresi_case_1 :

Pernyataan_1 ;

break

default :

pernyataan_n ;

}

Latihan 4. Continue


<head>

<title>Aris Tutorial Continue</title>

</head>

<body>

<?php

for ($i = 1; $i <= 25; $i++)

{

if ($i >= 10 and $i <= 15)

continue;

print ("$i <br>");

$i++;

}

?>

</body>

</html>

Gambar 53. Continue

43


Keterangan

Pernyataan continue di gunakan untuk menuju ke putaran berikutnya pada pernyataan

yang terkait dengan pengulangan

Latihan 5. Do while


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Aris Tutorial dowhile</title>

</head>

<body>

<form method="GET">

<p>Angka Pertama<br />

<input type="text" name="name1" /><br />

Angka Kedua<br />

<input type="text" name="name2" />

<input type="submit" value="Enter" />

</p>

</form>

<?php

$name1 = $_GET["name1"];


do

{

print("$name1 <br>");

$name1++;

}

while ($name1 <= $name2);

?>

</body>

</html>

44


Gambar 54. Do while

Keterangan

Bentuk pernyataan do while adalah sebagai berikut

Do

{

Pernyataan_pernyataan

} while (ekspresi);

Coba perhatikan script berikut



do

{

print("$name1 <br>");

$name1++;

}

while ($name1 <= $name2);

Maksudnya adalah untuk menjalankan perintah cetak nilai dari $name1 s/d $name2

45


Latihan 6. Exit


<head>

<title>Aris Tutorial Exit</title>

</head>

<body>

<?php

for($i = 1; $i <= 5; $i++)

{

print("$i <br> ");

if ($i == 100)

exit;

}

print ("Selesai <br>");

?>

</body>

</html>

Dan Hasilnya adalah ;

Gambar 55. Exit

Keterangan

Pernyataan exit di gunakan untuk mengakhiri pengeksekusian

46


Latihan 7. For


<head>

<title>Aris web for</title>

</head>

<body>

<?php

for ($bilangan = 1; $bilangan <= 10; $bilangan++)

print ("$bilangan <br>");

?>

</body>

</html>


Gambar 56. For

Keterangan

Pernyataan for juga merupakan pernyataan yang biasa di gunakan untuk menangani

pengulangan proses. Pernyataan ini mempunyai bentuk sebagai.

Berikut:

For (ekspr1; ekspr2; ekspr3)

{


}

47


Latihan 8. IF


<head>

<title>Aris Tutorial IF</title>

</head>

<body>

<form method="GET">

Besar Pembelian :<br />

<input type="text" name="total_beli" />

<input type="submit" value="Tentukan diskon" />

</form>

<?php

$total_beli = $_GET["total_beli"];

if (isset($total_beli))

{

$total_beli =intval($total_beli);

$diskon = 0;

if ($total_beli >= 100000)

$diskon= intval(0.1 * $total_beli);

printf("Diskon = %d <br>\n", $diskon);

printf("Pembayaran = %d <br>\n", $total_beli - $diskon);

}

?>

</body>

</html>

Gambar 57. IF

48


Keterangan

Skrip di atas melibatkan kode HTML berupa tag FORM, yang di gunakan untuk

menempatkan kotak text dan sebuah tombol untuk memproses pemasukan data oleh pemakai.

Script if disana berfungsi jika total beli yang di masukan adalah lebih dari 200000

-Variable text adalah $total_beli

-$total_beli = $_GET[“total_beli”]; di gunakan untuk memperoleh nilai GET yang hasilnya di

simpan ke variable $total_beli

-if (isset ($total_beli)) di gunakan agar perhitungan di lakukan kalau variable $total_beli sudah

ada

Latihan 9.Operator


<head>

<title>Aris Tutorial operator</title>

</head>

<body>

<?php

$a=100;

$b=50;

printf ("nilai terbesar : %d <br>", $a > $b ? $a : $b);

?>

</body>

</html>


Gambar 58. Operator

Keterangan

Pada contoh di atas memberikan hasil berupa nilai, aturannya adalah jika $a bernilai

lebih besar dari $b maka akan berlaku script “ $a > $b, namun jika tidak maka akan berlaku

script $a : $b

49


Latihan 10. While


<head>

<title>Aris Tutorial while</title>

</head>

<body>

<?php

$nilai = 1;

while ( $nilai <= 15 )

{

print ( "$nilai" );

$nilai++;

}

?>

</body>

</html>

Gambar 59. While

Keterangan

Bentuk pernyataan while

While (ekspresi)

{


)

Dari program di atas menunjukan program untuk pengulangan 1 s/d 15

Coba lihat script berikut

$nilai = 1;

while ( $nilai <= 15 )

50


di sana menunjukan nilai yang di pakai oleh “$nilai” adalah 1, jadi angka pertama yang di baca

adalah 1

kemudian “$nilai <=15” script itu menunjukan nilai akhir adalah 15

kemudian “$nilai++” maksudnya adalah membaca nilai dari 1 s/d 15

MYSQL DATABASE

Latihan 1. Membuat Database

Create database [if not exists] nama_database ;

Contoh : create database market;

Latihan 2. Melihat database

Show database;

Latihan 3. Membuka database

USE database;

Contoh : USE market;

Latihan 4. Menghapus database

Drop database [if exists] nama_database];

Drop database market2;

Latihan 5. Membuat table

Create table nama_tabel (

Field1 tipe(panjang),

Field1 tipe(panjang),

………

PRIMARY KEY (field_key));

51


Contoh membuat table

Create table konsumen (

Id_konsumen varchar(5) not null,

nama varchar(11) not null,

alamat varchar(11) not null,

PRIMARY KEY (id_konsumen));

Latihan 6. Melihat tabel

Show tables ; (untuk melihat semua table )

Desc konsumen ; (untuk melihat table tertentu )

Latihan 7. Menambah record dengan INSERT

Insert into nama_tabel values (‘nilai 1’,’nilai 2’,…) ;

Contoh : insert into konsumen values (‘01’,’upinipin’,’jakarta raya’);

Untuk melihat isi tabel konsumen tulis kode berikut;

Select * from konsumen ;

Latihan 8. Mengedit record dengan update

Update nama_tabel set field1=’nilai baru’[where kondisi] ;

Update merupakan perintah untuk mengubah record pada tabel

Nama_tabel adalah nama tabel yang ingin di ubah isinya

Set dan field-fieldnya merupakan isi yang akan diubah

Contoh : update konsumen set alamat=’bandung’ where id_konsumen=’01’;

Latihan 9. Menghapus record dengan delete

Proses delete dilakukan jika terdapat data atau record suatu tabel yang perlu dihapus atau di

hilangkan

Delete from nama_tabel [where kondisi] ;

Contoh : delete from konsumen where id_konsumen =’01’;

52


Latihan 10. Menampilkan record dengan select

Bentuk dasar select adalah sebagai berikut

Select [field]* from nama_tabel [where kondisi];

Contoh : select * from konsumen ;

Documents

eBook Aris Bluegriffon