1

Email : artkustik90@yahoo.co.id || 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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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.

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 informasiinformasi 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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 SVGedit, 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.

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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>

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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; textalign: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"; fontsize:20px; ) .

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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.

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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.

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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.

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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>

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

23 - Pilih warna, maka hasilnya akan seperti berikut

Gambar 21. Hasil menu foreground

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

30

Jika sudah maka hasilnya adalah sebagai berikut;

Gambar 32. Hasil button

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

33 - Klik foreground pada menu

Gambar 37. Menu Foreground - Pilih warna, maka hasilnya akan seperti berikut

Gambar 38. Hasil menu foreground

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 Dan hasilnya adalah sebagai berikut;

Gamnar 44. Hasil Cetak Miring

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 Dan hasilnya adalah sebagai berikut;

Gambar 47. Hasil Underline

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 !!!!

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

39 Latihan 2. Break <html xmlns="http://www.w3.org/1999/xhtml"> <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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 <html xmlns="http://www.w3.org/1999/xhtml"> <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>&nbsp;</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;

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 : Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

42 Pernyataan_1 ; Break Case ekspresi_case_1 : Pernyataan_1 ; break default : pernyataan_n ; } Latihan 4. Continue <html xmlns="http://www.w3.org/1999/xhtml"> <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 Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

43 Keterangan Pernyataan continue di gunakan untuk menuju ke putaran berikutnya pada pernyataan yang terkait dengan pengulangan Latihan 5. Do while <html xmlns="http://www.w3.org/1999/xhtml"> <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"]; $name2 = $_GET["name2"]; do { print("$name1 <br>"); $name1++; } while ($name1 <= $name2); ?> </body> </html>

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

44

Gambar 54. Do while Keterangan Bentuk pernyataan do while adalah sebagai berikut Do { Pernyataan_pernyataan } while (ekspresi); Coba perhatikan script berikut $name1 = $_GET["name1"]; $name2 = $_GET["name2"]; do { print("$name1 <br>"); $name1++; } while ($name1 <= $name2); Maksudnya adalah untuk menjalankan perintah cetak nilai dari $name1 s/d $name2

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

45 Latihan 6. Exit <html xmlns="http://www.w3.org/1999/xhtml"> <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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

46 Latihan 7. For <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aris web for</title> </head> <body> <?php for ($bilangan = 1; $bilangan <= 10; $bilangan++) print ("$bilangan <br>"); ?> </body> </html> Hasilnya adalah sebagai berikut;

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) { Pernyataan_pernyataan } Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

47 Latihan 8. IF <html xmlns="http://www.w3.org/1999/xhtml"> <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

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aris Tutorial operator</title> </head> <body> <?php $a=100; $b=50; printf ("nilai terbesar : %d <br>", $a > $b ? $a : $b); ?> </body> </html> Hasilnya adalah sebagai berikut;

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 Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

49 Latihan 10. While <html xmlns="http://www.w3.org/1999/xhtml"> <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) { Pernyataan_pernyataan ) Dari program di atas menunjukan program untuk pengulangan 1 s/d 15 Coba lihat script berikut $nilai = 1; while ( $nilai <= 15 ) Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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));

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

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;

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/

52 Latihan 10. Menampilkan record dengan select Bentuk dasar select adalah sebagai berikut Select [field]* from nama_tabel [where kondisi]; Contoh : select * from konsumen ;

Email : artkustik90@yahoo.co.id || Blog : http://artkustik1990-aris.blogspot.com/