Embed Size (px)
Citation preview
HTML 5 dan PHP
HTML 5 dan PHP
Jubilee Enterprise
PENERBIT PT ELEX MEDIA KOMPUTINDO
HTML 5 dan PHP
Jubilee Enterprise © 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2016
716051209 ISBN: 978-602-02-8931-1
[eEp]
Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit. Dicetak oleh Percetakan PT Gramedia, Jakarta Isi di luar tanggung jawab percetakan
vii
DAFTAR ISI
KATA PENGANTAR................................................................................ V
DAFTAR ISI ........................................................................................VII
BAB 1 PENGENALAN HTML5.............................................................. 1 1.1 Pengujian HTML5......................................................................1 1.2 Membuat Kutipan atau Testimonial di dalam HTML5 ................2 1.3 Membuat Definisi Halaman Website ..........................................3 1.4 Penulisan Special Character ......................................................4 1.5 Memberi Warna Latar Belakang pada Halaman Web.................5 1.6 Mengubah Seluruh Warna Teks.................................................5 1.7 Membuat Agar Gambar Latar Belakang Tidak Tergulung ..........6 1.8 Meletakkan Gambar Latar Belakang Secara Berulang ...............7 1.9 Pengulangan Gambar Latar Belakang pada Sumbu
Tertentu Saja.............................................................................8 1.10 Link Email Lengkap dengan Subject .......................................10 1.11 Berbagi File Menggunakan Link ..............................................10 1.12 Memakai CSS untuk Mewarnai Tabel.......................................10 1.13 Memperbesar Teks di Baris Terakhir Tabel ..............................13 1.14 Memperbesar Huruf Pertama...................................................14 1.15 Membuat Bayangan pada Teks ...............................................15 1.16 Pengaturan Heading Berbentuk Cursive ..................................16 1.17 Memberi Keterangan Gambar .................................................17 1.18 Mengatur Jarak Huruf .............................................................18 1.19 Mengatur Jarak Antar Kata......................................................19 1.20 Membuat Tulisan di dalam Box Berbayang..............................20 1.21 Pemberian Garis Tepi pada Sebuah Paragraf...........................21
BAB 2 STRUKTUR HTML5 ............................................................... 23 2.1 Menentukan Document Type ..................................................23
viii
2.2 Membuat HTML, Head, dan Body ...........................................24 2.3 Membuat Paragraf Baru ..........................................................25
2.3.1 Penggunaan Tag<br>.......................................................26 2.4 Membuat Judul Page dan Metatags.........................................28
BAB 3 BEKERJA DENGAN LIST .......................................................... 31 3.1 List di dalam List .....................................................................31 3.2 Memilih Style untuk List ..........................................................32 3.3 Ordered List untuk Angka Tertentu .........................................33 3.4 Membuat List yang Dapat Diedit..............................................33 3.5 List Georgian dan Armenian....................................................35 3.6 List Gambar ............................................................................37 3.7 Memberi Warna Latar Belakang pada List ...............................38
BAB 4 TEKS DAN HYPERLINK DALAM HTML5 ..................................... 39 4.1 Membuat Headings .................................................................39 4.2 Tebal dan Miring pada Teks ....................................................41 4.3 Superscript dan Subscript .......................................................43 4.4 Monospace dan Preformatted Font .........................................44 4.5 Pengaruh Browser Terhadap Teks...........................................48 4.6 Hyperlink.................................................................................51
4.6.1 Link Menuju Situs Lain .......................................................52 4.7 Mengenal Relative dan Absolute Path ......................................53 4.8 Menentukan Target .................................................................54 4.9 Hyperlink Menuju Alamat Email...............................................55 4.10 Hyperlink untuk Sebuah File....................................................59
BAB 5 FORM DALAM HTML5............................................................ 63 5.1 Membatasi Karakter dalam Text Box .......................................63 5.2 Membuat Text Box Khusus Alamat Email ................................64 5.3 Membuat Text Box yang Langsung Terisi Teks........................64 5.4 Membedakan Value dan Placeholder .......................................65 5.5 Membuat Komponen Form Slider ...........................................65 5.6 Memilih Tanggal......................................................................66 5.7 Memilih Bulan dan Minggu Saja ..............................................67 5.8 Membuat Komponen Form Waktu ..........................................68 5.9 Memilih Warna ........................................................................69 5.10 Autofocus pada Komponen Form ...........................................69 5.11 Pengaturan Huruf Kecil pada Form .........................................70 5.12 Mewarnai Text Box ..................................................................71 5.13 Membatasi Waktu....................................................................72 5.14 Mengatur Kenaikan Waktu ......................................................73 5.15 Progress Bar............................................................................73
ix
5.16 Memanfaatkan Atribut Required ..............................................74 5.17 Filter Email dari Situs-Situs Tertentu .......................................75 5.18 Menguji Validitas Alamat Email ................................................77 5.19 Atribut Min dan Max.................................................................78 5.20 Menggunakan Komponen Form Search..................................79 5.21 Membuat Kotak Text Box Bergaris-Garis Putus .......................79 5.22 Menampilkan Garis Text Box Berwarna Merah Saat
Ditemukan Kesalahan .............................................................80 5.23 Mengisi Text Box Lewat Suara .................................................81 5.24 Menggunakan Komponen Form URL......................................82 5.25 Menggunakan Atribut Pattern ..................................................83
BAB 6 GRAFIK DALAM HTML5 ......................................................... 85 6.1 Memilih Format Grafik.............................................................85 6.2 Menyiapkan File Grafik ............................................................86 6.3 Memasukkan Grafik ke dalam Web Page.................................87 6.4 Mengatur Ukuran Grafik ..........................................................90 6.5 Hyperlink Menggunakan Grafik................................................91 6.6 Memanfaatkan Alternate Text ..................................................93 6.7 Menggunakan Figure ..............................................................94
BAB 7 MENGENAL PEMROGRAMAN PHP............................................. 97 7.1 Install Server untuk PHP ..........................................................97 7.2 Menggabungkan PHP dan HTML ............................................98 7.3 Menulis Komentar ...................................................................98 7.4 Sintaks Dasar PHP ..................................................................99
7.4.1 Titik Koma .........................................................................99 7.4.2 Simbol $ ............................................................................99
7.5 Variabel ...................................................................................99 7.5.1 Variabel String....................................................................99 7.5.2 Variabel Numerik..............................................................100 7.5.3 Variabel Array ...................................................................100 7.5.4 Aturan Penamaan Variabel ...............................................101 7.5.5 Memberi Nilai pada Variabel .............................................101 7.5.6 Penambahan dan Pengurangan Nilai Variabel ..................102 7.5.7 Penulisan Variabel ............................................................102
7.6 Mengenal Fungsi...................................................................103 7.7 Expressions ...........................................................................103
7.7.1 True atau False ................................................................104 7.7.2 Literal dan Variabel...........................................................104
BAB 8 PHP DAN DATABASE MYSQL ...............................................107 8.1 Menjalankan dan Menghentikan Server MySQL .....................107
x
8.2 Menyiapkan Akun Pengguna MySQL .....................................108 8.3 Perintah Administratif MySQL................................................109 8.4 Menulis Script PHP dan MySQL.............................................109 8.5 Koneksi MySQL Menggunakan Script PHP............................110 8.6 Membuat Database Menggunakan Script PHP.......................112
BAB 9 PERINTAH DASAR PHP DAN MYSQL......................................115 9.1 Menghapus Database............................................................115 9.2 Memilih Database..................................................................116 9.3 Membuat Tabel .....................................................................118 9.4 Menghapus Tabel..................................................................119
BAB 10 BEKERJA DENGAN DATA (PHP DAN MYSQL)..........................121 10.1 Memasukkan Data.................................................................121 10.2 Mengambil dan Menampilkan Data .......................................124
10.2.1 Melepaskan Memory.........................................................127 10.3 Meng-update Data.................................................................128 10.4 Menghapus Data ...................................................................129
TENTANG PENULIS ........................................................................... 131
1
PENGENALAN HTML5
Ingin belajar mendesain website? Kunci dari desain website di jendela browser terletak pada HTML. Pada tahun 2011, HTML versi terbaru yang diberi nama HTML5 mulai diperkenalkan.
Di dalam bab ini, kita akan mempelajari tip dan trik seputar dasar-dasar penggunaan HTML5. Pada prinsipnya, di dalam bab ini Anda akan menemukan mindset penggunaan HTML5 untuk desain sehari-hari. Dengan demikian, Anda sudah memiliki gambaran bagaimana HTML5 ini bekerja dan mempengaruhi desain website yang kita buat.
Sebelum masuk ke dalam pembahasan inti, Anda akan mengenal HTML5 secara komprehensif lewat pengenalan-pengenalan yang sifatnya ringkas namun mencakup bagian-bagian yang penting.
1.1 Pengujian HTML5
HTML5 masih berkembang terus menerus. Oleh karena itu, tidak mengherankan jika browser yang beredar saat ini masih beradaptasi dengan tag-tag HTML5. Jadi, akan lebih baik jika Anda menguji script-script yang ada di dalam buku ini menggunakan multi browser.
Untuk mengetahui apakah browser yang Anda miliki sudah mendukung tag-tag HTML5 atau belum, silakan pergi ke situs http://html5test.com/.
2
Tergantung browser yang Anda gunakan, situs tersebut mampu mendeteksi tag-tag mana saja yang sudah di-support oleh browser tersebut. Jadi, jika browser yang Anda gunakan tidak mampu menghasilkan output yang diharapkan, segera gunakan browser lain. Di dalam buku ini, baik Internet Explorer, Firefox, Opera, maupun Safari (semuanya versi terbaru) digunakan semuanya untuk pengujian:
Gambar 1.1 Situs HTML5Test mampu mendeteksi kesiapan browser Anda terhadap tag-tag HTML5
1.2 Membuat Kutipan atau Testimonial di dalam HTML5
Seringkali, kita harus menulis kutipan atau testimonial konsumen di dalam situs. Untuk membedakan kutipan serta testimonial itu dengan teks-teks lain yang ada di website, kita bisa menggunakan tag <blockquote>. Teks yang diapit oleh two-sided tag <blockquote> ini akan ditulis lebih menjorok ke dalam.
Berikut contoh script-nya:
3
<h2>Testimonial</h2>
<blockquote>Buku Step by Step HTML 5 adalah buku paling simpel dan sederhana dalam menjelaskan
fitur-fitur terbaru HTML 5 dan dasar-dasar HTML pada umumnya--Agung Herutomo
</blockquote>
Gambar 1.2 Teks Blockquote lebih menjorok ke arah dalam
1.3 Membuat Definisi Halaman Website
Anda ingin menulis sebuah definisi sesuatu hal karena Anda sedang membuat web berisi istilah-istilah ilmiah? Untuk membuat teks definisi, paling tidak ada tiga buah tag yang harus Anda libatkan, yaitu:
Tag <dl> yang merupakan singkatan dari definition list. Berfungsi sebagai pembuka untuk membuat definisi.
Tag <dt> yang merupakan singkatan dari definition term. Berfungsi sebagai tag untuk menulis kata yang akan didefinisikan.
Tag <dd> yang merupakan singkatan dari definition description. Berfungsi sebagai tag untuk menulis kata definisinya.
4
Cara penulisan script-nya sebagai berikut:
<h2>Definisi:</h2>
<dl>
<dt>PT Elex Media Komputindo</dt>
<dd>Perusahaan multimedia terbesar di Indonesia yang telah memproduksi ribuan buku teknologi informasi dan keping cakram animasi interaktif untuk edukasi. Alamat kantor terletak di Jakarta.
</dd>
<dt>Jubilee Enterprise</dt>
<dd>Media Content Provide terbesar di Indonesia yang menciptakan ratusan buku-buku komputer untuk segala tingkatan dan dengan segala macam tema. Alamat kantor terletak di Yogyakarta.</dd>
</dl>
1.4 Penulisan Special Character
Anda ingin menulis special character di dalam website? Contoh special character antara lain tanda: ©, ™, ®, dan lain sebagainya. Untuk menulis special character, amati tabel di bawah ini:
Simbol Nama Entitas
(Entity Name)
Nomor Entitas
(Entity Number)
& & &
< < <
> > >
Spasi  
£ £ £
¥ ¥ ¥
© © ©
® ® ®
° ° °
± ± ±
™ ™ ™
5
Contoh penulisannya sebagai berikut:
<p>Copyright © PT Elex Media Komputindo ™</p>
1.5 Memberi Warna Latar Belakang pada Halaman Web
Bosan dengan halaman web page yang putih-putih saja? Sekarang, buatlah halaman web page dengan warna lain yang Anda suka. Caranya, cukup gunakan atribut style=”background color: color”. Atribut ini cukup diletakkan di dalam tag <body>. Untuk nilai color, Anda bisa pilih dari tabel di bawah ini:
Aqua Gray Navy Silver
Black Green Olive Teal
Blue Lime Purple White
Fuchsia Maroon Red Yellow
Menuliskan script cukup dengan seperti ini:
<body style="background-color: yellow">
1.6 Mengubah Seluruh Warna Teks
Anda ingin membuat agar setiap teks yang Anda tulis berwarna hijau, kuning, atau merah secara serentak? Kalau begitu, Anda bisa gunakan atribut style=”color: color”.
Contohnya sebagai berikut:
<body style="background-color: blue; color: yellow">
Pada contoh di atas, warna background pada halaman webpage adalah biru sedangkan untuk warna teks yang digunakan adalah warna kuning.
131
TENTANG PENULIS
Jubilee Enterprise, telah dipercaya oleh penerbit dan pembaca buku tanah air dalam satu dasawarsa ini. Hingga sekarang, tulisan-tulisannya yang diterbitkan dalam bentuk buku telah mencapai hampir 400 judul, sebagian besar bertema teknologi informasi dan kemudian disusul dengan tema psikologi & parenting, manajemen, fotografi, anak-anak, dan tema umum lainnya. Salah satu imprint Jubilee Enterprise adalah Jubilee Authors Companion yang merupakan sahabat bagi para penulis-penulis profesional yang ingin tetap berkarya.
Anda dapat memperoleh informasi lebih lanjut tentang Jubilee Enterprise lewat situs: www.thinkjubilee.com.
Catatan:
Untuk melakukan pemesanan buku, hubungi Layanan Langsung PT Elex Media Komputindo:
Gramedia Direct
Jl. Palmerah Barat No. 29-37, Jakarta 10270
Telemarketing/CS: 021-53650110/1 ext: 3901/3902/3292/3427
