Font dan Table

Kembali ke Pemrograman HTML, Masih ingatkan dengan Pengenalan HTML dan Paragraf, Heading dan Perataannya. Zuli akan coba membahas Pemrograman HTML lebih dalam lagi. Kali kita mencoba bermain dengan Font/Huruf dan Table biar lebih asik dan menyenangkan kita belajar sambil dengerin lagu Mbah Surip - Tak Gendong Kemana-mana, ya!

1. Font

Dalam sebuah web, menentukan jenis huruf, ukuran dan warna huruf yang dipakai sangatlah penting. Jangan sampai antara warna latar dan huruf pada posting dibuat sama yang ada pembaca tidak akan melihat tulisan apapun. Nah untuk uji coba silahkan copypaste code dibawah ini:

<font color="red" size="10">Warnanya Merah Gak???</font>

Hasilnya: Warnanya Merah Gak???

Nah, properti yang ada pada tag Font ini antara lain color, size, style. Walaupun sebenarnya untuk warna nantinya bisa dicontrol menggunakan CSS (Casceding Styles Sheet) tapi pemahanan tentang warna dalam HTML tetaplah perlu karena tidak mungkin kita menuliskan script yang pendek ;semisal Error Mesege; dengan menggunakan control CSS yang biasanya lebih panjang dan rumit.

2. Table

Pada awalnya halaman Web merupakan kumpulan table-table yang tersusun menjadi halaman yang mantap dan kokoh tapi setelah munculnya CSS dan Programmer beralih ke Design Web yang tableless maka pengunaan table sebagai layout sebuah web pun tidak lagi digunakan.

Namun bukan berarti table tidak lagi dibutuhkan dalam web programming, table dalam web programming kini justru dipakai untuk keperluan yang lebih baik dari sekedar layout web. Table digunakan untuk draft pembuatan laporan, neraca dll yang berbaisi web.

Nah untuk uji coba silahkan copy code berikut:

<table width="90%" border="0"><tbody> <tr> <td>No</td><td>Nama</td><td>Alamat</td><td>Kompetensi</td> </tr> <tr> <td>1</td><td>Surya</td><td>Jakarta</td><td>Nothing</td> </tr> <tr> <td>2</td><td>Tommy</td><td>Jakarta</td><td>CMS Creator, Java, PHP, MySQL, Javascript</td> </tr> </tbody> </table>

No	Nama	Alamat	Kompetensi
1	Zuli	Surabaya	Nothing
2	Nico	Surabaya	CMS Creator, Java, PHP, MySQL, Javascript

Nah, silahkan hilangkan code <br/> Lalu seperti biasa simpan kesemuanya itu dengan ekstensi .html.

Nb:

- Width: mengatur lebar table,
- Border: memberikan border pada table, diatas dicontohkan tanpa border (0)
- tr : Untuk mengatur row/line table
- td : Untuk mengatur coloum/drop table

Membuat Form Komentar Sederhana

Zuli akan mencoba membahas Form atau Formulir.

Form/Formulir adalah merupakan bagian penting dalam sebuah halaman website dan salah satu contoh dari Form yang paling mudah adalah form komentar. Kali ini kita akan mencoba untuk Membuat Form Komentar sederhana yang berisi: Nama, Email, URL dan Isi Komentar.  Membuat Form Komentar Sederhana yang bisa dieksekusi.



Dalam sebuah Membuat Form Komentar sederhana yang terpenting sebenarnya adalah action="(lokasi)" selain daripada form itu sendiri. Ini karena action="(lokasi)" menunjukkan file mana yang akan dieksekusi setelah tombol Submit di klik. Tapi seperti sudah dijelaskan diatas, kita akan mengabaikan dulu File Eksekusi tersebut dan lebih kepada bentuk formnya dulu.



Nah kira-kira kita akan membuat Form seperti ini:

Tuliskan Komentar Anda

Nama	:
Email	:
Website	:
Komentar	:

*Tampilan bisa lebih rapi jika tidak ditaruh diposting*



Code dari Form Komentar diatas adalah sebagai berikut:

<form action="form.html" method="post"><table width="100%" border="0"><tr><td colspan="3" align="center">Tuliskan Komentar Anda</td></tr> <tr><td>Nama</td><td>:</td><td><input type="text" size="41"></td></tr> <tr><td>Email</td><td>:</td><td><input type="text" size="41"></td></tr> <tr><td>Website</td><td>:</td><td><input type="text" size="41"></td></tr> <tr><td>Komentar</td><td>:</td><td><textarea cols="31" rows="10"><input value="Kirim" type="submit"><input value="Hapus" type="reset">


Ket:

Sebenarnya pada code diatas ada sebuah code yang saya hapus yaitu </textarea> letaknya tepat setelah <textarea cols="31" rows="10"> karena waktu saya letakkan justru malah merusak textarea diatas.


Untuk Form diatas  menggunakan method="post" bisa juga diganti dengan method="get" dan bisa dilihat perbedaannya di addressbar browser.  input type="(jenis)" yang berbeda-beda mulai dari text (agar bisa ditulis), submit(untuk menambah) dan reset (menghapus).

Bagaiaman Cara Menyisipkan Gambar Secara Manual

sekarang aku mau nyoba ngasih sedikit refreshing nih buat temen-temen Blogger yang biasanya suka menyisipkan gambar diposting namun tidak tau cara sebanarnya script controlnya itu seperti apa, ini dia rahasia menyisipkan gambar.

Menyisipkan gambar dengan script HTML sebenarnya sangat sederhana, yaitu hanya dengan satu baris script saja. Dalam menyisipkan gambar dengan HTML kita mengenal sebuah tag "IMG" dengan variable "SRC", "WIDTH", "HEIGHT" dan "ALT" bila disatukan dalam sebuah tag lengkap bergini jadinya:

<img src="(URL Image)" width="100%" height="100%" alt="Image Gue" />

Nah sebenarnya cukup dengan script ini saja kita sudah bisa menampilkan gambar dipostingan, namun biasanya kita ingin memberikan sebagaimana membuat banner kita harus memberikan gambar banner yang kita buat dengan sebuah link menuju ke Blog kita sehingga penulisannya tinggal ditambahkan achor link sebagai berikut:

<a href="(URL Blog)" title="Judul Blog" target="_blank"><img src="(URL Image)" width="100%" height="100%" alt="Image Gue" /></a>

Nah dengan menambahkan link dengan target "New Tab" maka ketika gambar tersebut diklik maka akan menuju ke link yang dimaksud dengan tidak meninggalkan halaman gambar. Ini memberikan kesempatan kepada pembaca untuk tetap nyaman membaca sementara dia menunggu halaman yang diklik

Cara Buat Form Pengisian dengan PHP dan HTML

Dalam aplikasi ini kita memiliki dua buah file yaitu file "Form Isian Mahasiswa dan Cetak Form Isian Mahasiswa". Dalam form ini kita tidak membahas masalah database tempat menyimpan data isian dari form tersebut karena masih terlalu awal untuk membahas penggunaan database dalam aplikasi PHP nanti kalo sudah saatnya juga dikeluarin ok


Ok, sekarang kita mulai saja!

1. Download aplikasi form isian mahasiswa

2. Unzip file form isian mahasiswa

3. Paste Folder Form Isian ke XAMPP --> htdocs --> paste didalam folder htdocs

4. Buka Browser dengan address "localhost/(nama folder form isian)/form.html" <-- tanpa tanda petik 5. Isikan Data Sesuka hati dan Klik Cetak untuk mencetak 6. Buka form.html dan form_print.php dengan Text Editor

Ok, sekarang sudah dibuka semua kan form.html-nya? kita lihat sama-sma isinya!



Pada Form tersebut menggunakan method="post" dan action=''form_print.php" seperti ini:

<form action="form_print.php" method="post">

Method ini berhubungan langsung dengan Syntax di form_print.php yaitu pada syntax berikut:

$nim = $_POST['nim'];

$nama = $_POST['nama'];

$fakultas = $_POST['fakultas'];

$jurusan = $_POST['jurusan'];

$pesan = $_POST['pesan'];

?>


Bila Anda ingin mengganti dengan method GET jangan lupa untuk mengganti variable $_POST dengan $_GET. Masih di form.html coba perhatikan script "name"(tanpa tanda petik) yang ada disetiap baris tabel seperti pada variable input berikut:

<td><input type="text" size="30" name="nim"></td>

Script "name"(tanpa tanda petik) tersebut adalah variable yang menghubungkan antara form.html dan form_print.php seperti pada script PHP diatas (yang $_POST['nim'], dst).

Cara Buat Design Layout Dengan Internal CSS

Zuli kali ini akan coba membahas tentang CSS atau Casceding Style Sheet dan penggunaannya.

CSS atau Casceding Style Sheet adalah sebuah side programming language yang berintegrasi dan mampu mengontrol secara penuh tampilan dan tata letak dari setiap bagian dari tag HTML tersebut. CSS dapat diletakkan pada file tersendiri atau biasa disebut External CSS dan juga bisa diletakkan secara bersamaan dengan file HTML yang biasanya disebut Internal CSS.

Internal CSS inilah yang kali ini coba aku bahas walau sebenarnya juga aku belum terlalu paham betul tentang pemrograman CSS ini Internal CS.S yang biasanya dipakai itu ada dua yaitu internal CSS yang letaknya diluar tag HTML (biasanya menggunakan tag < style > ) dan ada internal CSS yang letaknya berada didalam tag HTML (biasanya menggunakan tag style="code CSS"). Baik yang berada diluar ataupun didalam tag HTML secara global sama namun secara penulisan, Internal CSS yang berada diluar tag HTML lebih mirip External CSS.

Lebih mudah mana, Internal CSS yang diluar ata didalam tag?

Baik CSS yang diluar atau didalam tag, keduanya sama-sama menyenangkan untuk dipelajari hanya saja penggunaannya kembali pada azaz efisiensi. Maksudnya, saat kita mendesign layout kadang kita mengatur beberapa tag HTML dengan styling yang sama. Pengaturan seperti ini akan lebih efektif dan efisien jika dicontrol dengan internal CSS yang berada diluar tag karena kita cukup menambahkan class ataupun id pada tag HTML yang memiliki syling yang sama kemudian dicontrol dengan 1 blok CSS saja *bingung ya? sama berarti :D*. Aku yakin para Webmaster lebih paham tentang hal yang seperti ini, mengingat pentingnya mempertahankan dan menyingkat loading page.

Contoh Casceding Style Sheetnya mana?

Kebetulan lagi malas membuat code buat default layout, jadi coba buka blog masing masing2 (Blogspot pada Edit HTML dan Wordpress pada Edit Themes --> style.css) terus coba lihat code-code yang memakai tanda # (pagar) dan . (titik), itulah tag CSS yang mengatur tampilan Blog Anda. Nilai atau value yang ada diantara tanda { code CSS } adalah script controlernya.

Website Dinamis dengan HTML dan PHP

Hypertext Preprossesor atau yang lebih dikenal dengan PHP adalah sebuah bahasa pemrograman berbasis web yang saat ini paling digemari. PHP dapat berjalan pada webserver yang mempunyai compiler PHP sesuai dengan versi regulasinya. Untuk saat ini PHP sudah mengeluarkan versi terbaru yaitu PHP 5 yang semakin canggih.

Secara bahasa dan syntax, PHP tidaklah terlalu rumit dan cenderung mudah bagi pemula, namun terkadang terkesan sangat susah karena begitu kompleknya pemrograman ini terutama untuk mereka yang ingin memasuki jenjang advance. Aku sendiri sampai sekarang baru mengenal syntax-syntax dasar saja, tapi insyaAllah ada saatnya ingin mengusai bahasa tersebut.

Beberapa contoh aplikasi web yang berbasis PHP sangat mudah ditemui, terutama yang berbasis CMS (Content Management System) seperti Joomla, Wordpress, Drupal, Aura,dll. Inti dari membuat website dinamis dengan HTML dan PHP adalah bagaimana menyatukan antara tag HTML dan Syntax PHP. Syntax PHP inilah yang berisi variable yang dinamis yang dapat berubah-ubah isinya sesuai dengan muatan variablenya.

Zuli beri contoh begini:

Sebuah halaman artikel yang menampilkan berita akan menampilkan 5 berita terakhir yang diposting oleh administrator. Berita tersebut tersimpan dalam database pada table "news" dengan primery key "id" dengan index "judul" untuk menghindari duplikat judul. Kemudian dibuatlah beberapa script PHP yang akan digunakan untuk: menulis artikel, menambahkan ke database, mengedit artikel, menghapus artikel dan mempublikasikannya pada halaman artikel.


Download script artikel management

Cara Instalasi:

1. Buat database "mutyalova"
2. Unzip artikel.zip
3. Import database yang ada didalam folder artikel
4. Jalankan script

Nah dengan sebuah script sederhana ini kita bisa belajar membuat kontent dinamis untuk memanage artikel lengkap dengan categorynya.

Mempercepat Loading Blog dengan Iframe Banner

Mempercepat Loading Blog?

Frame biasanya digunakan saat kita ingin mengeload halaman Website seseorang tanpa meninggalkan halaman Blog kita. Contoh penggunaan Frame yang jelas terlihat adalah Widget Facebook Conector

Prinsip kerjanya sebenarnya mudah, Karena komputer/browser membaca script secara berurutan dari kiri atas sampai ke kanan bawah, maka ketika menemui sebuah Frame, Browser akan membuka URL dari frame tersebut sementara tetap melanjutkan membaca script selanjutnya sehingga Blog bisa tampil sempurna (tanpa Frame terlebih dahulu) walo URL frame belum diload sempurna. Maksudnya gini, Anda membaca buku ketika ada note dibuku itu untuk melihat halaman tertentu Anda mengabaikannya terlebih dahulu kemudian setelah semua kelar baru melihat note tersebut, begitu kira-kira.

Berbeda dengan CSS yang harus dibaca terlebih dahulu dari Locator (karena berhubungan langsung dengan layouting) Frame dibaca terakhir karena tidak berhubungan sama sekali dengan Layout, hanya saja perlu diperhatikan bahwa Frame hanya mengurangi berat loading tidak mempercepat secara signifkan karena tentunya banyak faktor lain yang mempengaruhinya.

Untuk syntax dan lain-lain maaf nih untuk kali ini tidak aku kasih karena bisa dilihat langsung pada Souce Code Website yang memakai Iframe seperti: Pulsa.Cihuii.Com (Web Reporting), M-Pulsa.Co.Id (Web Reporting), Indonesia-Bisa.Or.Id (Facebook Conector), dll.

Khusus untuk Facebook Conector ga perlu takut itu Phising karena itu URL resmi kok, jadi kalo Anda masih login secara otomatis di Facebook Conector Anda pun tak perlu login karena langsung membaca Cookies di komputer Anda.