You are on page 1of 127

1

OCEHAN PROGRAMMER
WEB PEMULA

Fiqy Ainuzzaqy

2

3

Ocehan Programmer Web
Pemula

Penulis : Fiqy Ainuzzaqy

Copyright © 2016

Diterbitkan Oleh:
Jl. Hikmat 50A, Betro–Sedati,
Sidoarjo
Telp/fax: 031 – 8672552
E-mail:
rm.rabbitmedia@gmail.com

Diterbitkan pertama kali oleh Rabbit Media,
Cetakan Pertama, MM 2016
Ukuran buku: 15.5 cm x 23 cm, 100 hal
Layout & Desain Cover: Fq

Semua source code dalam buku ini beserta
software dan tools pendukung pembuatan
website dikemas dalam DVD yang ada di sampul
belakang buku

merekam. 4 ISBN: 123-456-789-1011-12-0 Hak Cipta dilindungi undang-undang. Pasal 72. Undang-Undang Nomor 19 Tahun 2000 tentang Hak Cipta. dan (6) . termasuk fotokopi. atau dengan teknik perekaman lainnya. tanpa izin dari Penerbit. secara elektronis maupun mekanis. Bab XII Ketentuan Pidana. (2). Ayat (1). Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku kedalam bentuk apapun.

Akhirnya penulis mengharapkan semoga dari buku Ocehan Programmer Web Pemula ini dapat diambil hikmah dan manfaatnya sehingga dapat memberikan inpirasi terhadap pembaca. dan inayah-Nya. Untuk itu penulis tidak lupa menyampaikan banyak terimakasih kepada semua pihak yang telah berperan aktif dalam pembuatan buku ini. hidayah. penulis mampu menyelesaikan buku Ocehan Programmer Web Pemula. Adapun buku ini telah penulis usahakan semaksimal mungkin dan tentunya dengan bantuan berbagai pihak. DD MM 2016 1 . sehingga dapat memperlancar pembuatan buku ini. karena atas rahmat. KATA PENGANTAR Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha Panyayang. Surabaya.

....3 Tag Table.....14 2.......3 Template Dasar HTML5...............................................ii 1st Ocehan.......2 Kelebihan dan Kekurangan HTML5..........................3 Meta Tag.....................i DAFTAR ISI.............16 2.16 2........................... 1...........11 2.......................................2 Meta Tag Descriptsi.......4 Tag Penyisipan.........................................................................3........................6 Tag a......1 Software Desain Web....................2.............................3 Meta Tag Keywords........................................3....1 Meta Tag Title.............................3................................................1 Penjelasan Umum Tentang CSS....12 2.............15 2.................3.................5 2.......2.............................................. Penulis DAFTAR ISI KATA PENGANTAR............13 2.....................16 2........................17 3rd Ocehan....................................................2.............. 2.......................2 Tag Lists........... 2 ........................................ 2nd Ocehan................1 Tag Text Format......................................4 Meta Tag Verifikasi..... 2......2............................... 1................................................19 3.......................8 2..................2....1 Pengenalan Umum HTML..........1 1...................................................................5 Tag Form......2 Tag...........2. 2..............

..... 3..2.....6 Sudut Melipat...........1 Cursor Property.............................................................2 Link hover animasi GIF......1 Universal Selector......27 3.........................26 3.......28 th 4 Ocehan.......3 Button Image..2 Pembahasan Tentang Tips dan Penerapan CSS................4 CSS Text.29 4...............22 3..................36 3 .............2....... 3................................................................2...................4....4 Button dan Anchor....27 3.5 Attribute Selector.........3 Class Selector..........................................4........................1 Download Contoh Website Yang Mengandung CSS 30 4...................6 CSS Lists................2 CSS Units & Colors.............................28 3.............................2 Embedded/Internal Style Sheets..........5 CSS Background............34 4.........2 Element/Tag Selector......26 3.................32 4................. 3...............2 Cara Penulisan CSS..........4.... 3.....4 Macam – Macam Code CSS...........2.........35 4....... 4...............27 3.........2......2..2..........................2.........................3 CSS Layout....21 3................................................4...3.....27 3....3......2...30 4.....25 3...................3......4......4....................................................3 Jenis-Jenis Selector Dasar CSS......22 3....5 Pop Up Gambar................3.................1 CSS Fonts..25 3.....3 External Style Sheets.......................31 4...............3.....4 ID Selector....25 3.....1 Inline Style Sheets...

..........8 Click Events: onclick......47 5................... 5..2 Tipe Data : number............. 4........3..........................................2............................1 Inline JavaScript......... th 7 Ocehan.. 5.........52 th 6 Ocehan................4 Menggunakan URL............4 Kegunaan Script yang Ada di JavaScript.42 5.........................2 Penggunaan jQuery.....50 5....1 Pengertian jQuery..............................1 Tipe Data : string........................6 Operator..........................................2.... 5........................................................3..............................37 4.......2 Internal JavaScript.......9 Mouse Events: onclick......9 Tabs................4................................4..........4...................47 5..............4...4 Tipe Data : null.50 5.......................53 6...............44 5...................3.47 5..........3 External JavaScript...5 Tipe Data : undefined................7 Tool Tips..................................36 4...............................4........3 Cara Penulisan JavaScript......................4.2................60 4 ......10 Table dan Form.47 5...51 5............7 Function............3....................................................... 5..........4.........4..37 4..43 5.....39 5..... 6........3 Tipe Data : boolean...2 Sejarah Singkat Penamaan JavaScript.................46 5........8 Z-Index..........43 5.....................47 5..........2...........10 Input Keyboard Events...................................................................................................................................................1 Pengertian dan Fungsi JavaScript.........4.4................38 th 5 Ocehan........

....................71 8.............2.........................................................72 8...... 10.......62 7..............................2 Field............................................2 Kegunaan Dari PHP......1 Characters...........................................1 Pengertian Database..... 8...................5 Cara Penggunaan Database di Website............................................................2 Bootstrap Untuk Membuat Responsive Web..........................................................................................................................................2 Bagian-Bagian Dari Database.............................2 Penggunaan AJaX..........2..................4 Table / File..2.......... 10th Ocehan......................... 9.......68 8..................................................................2...................................................3 Tahapan perancangan basis data.......2 Application.........2.............82 10...........91 5 ..............1 Database..4 Tujuan Pembuatan Database............... 8............................................................ DAFTAR PUSTAKA..................1 Pengenalan Web Responsive............1 Pengertian AJaX... 7...............................1 Pengertian PHP....62 th 8 Ocehan....... 7......77 9.... 7.................. 9th Ocehan.......2. 8.89 TENTANG PENULIS..............................3 Record............ 8.....71 8.................................72 8..............

nah semakin bagus bangunan itu maka akan semakin rumit struktur bangunannya. yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. baik itu membuat tampilan website beruba gambar ataupun tulisan. Bermula dari apa sih HTML itu? HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk menulis halaman web. HTML sebenarnya adalah dokumen ASCII atau teks biasa.1 Pengenalan Umum HTML Sebelum membuat sebuah website. Saat ini HTML yang biasa 1 . Jika dianalogikan hosting adalah sebuah tanah yang siap memuat isi bangunan. kita wajib mempunyai sebuah domain dan hosting. dan isi website yang kita desain itu sebagai bangunan tersebut.1st Ocehan Pengenalan Awal Tentang Web dan HTML Mengenai apa itu HTML dan apa saja yang dibutuhkan ketika akan membuat sebuah website 1. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu SGML (Standard Generalized Markup Language). Sedangkan domain dapat dianalogikan sebagai alamat dari rumah tersebut. Jadi intinya HTML adalah source code atau script yang diketik untuk membangun sebuah website.

 Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya. search. dengan berbagai elemen kode di dalam HTML5 yang telah distandarisasi maka nilai semantic dari sebuah web dapat lebih ditingkatkan. section. Nah pasti akan timbul pertanyaan mengapa sih dibuat HMTL 5 ? Dibuat HTML5 karena di HTML versi terbaru ini terdapat fitur-fitur baru pada HTML. footer.  Konten yang ada di situs lebih mudah terindeks oleh search engine. mengurangi kebutuhan untuk plugin eksternal (seperti Flash). seperti artikel.  Cleaner code. e-mail. lebih banyak markup untuk menggantikan scripting. tanggal. DOM (Document Object Model) dan JavaScript. waktu.  Integrasi (‘inline’) dengan doctype yang lebih sederhana. video dan elemen audio untuk media pemutaran. header. CSS. 1. karena sebagian besar kode telah termasuk dalam sintaks HTML5 dengan kata lain penulisan kode menjadi lebih efisien. penanganan kesalahan yang lebih baik. Kelebihan HTML5 adalah sebagai berikut :  Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) dan XML.2Kelebihan dan Kekurangan HTML5 Sekarang mari kita bahas kelebihan dan kekurangan HTML5.  Improve semantics. 2 . Nah selain itu juga pasti ada yang tanya tentang apa sih perbedaan HTML5 dengan versi sebelumnya? Di dalam HTML5 terdapat fitur baru seperti unsur kanvas untuk menggambar. elemen konten yang lebih spesifik. URL. HTML5 merupakan perangkat mandiri. navigation. bentuk kontrol form seperti kalender.digunakan adalah HTML versi 5 dengan berbagai perbaikan dan penambahan fitur dari HTML versi sebelumnya. dukungan yang lebih baik untuk penyimpanan secara offline.

 Offline application cache. berbeda dengan HTML versi-versi sebelumnya yang menyimpan data di client menggunakan cookies (terbatas datanya).  Smarter forms. 3 . validasi. HTML5 mempunyai API (Application Programming Interface) yang terintegrasi terhadap geolocation. user dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.simpan data tanpa batas waktu sessionStorage – simpan data dalam 1 sesi. video player. aplikasi chat.  HTML5 menyimpan di client menggunakan localStorage . terdapat semacam regex (regular expression) yang membuat form mampu mengenali secara lebih baik tentang input.  HTML5 membuat sebuah mekanisme yang lebih mudah dalam pembuatan front end. tools drag and drop.

3Template Dasar HTML5 Nah dari penjelasan sebelumnya kita sudah mengetahui tentang HTML sekaligus tentang HTML versi terbaru untuk saat ini. berikut hasil skor testing browser yang penulis gunakan: (max. 555 poin)  Mozilla Firefox = 449  Opera = 514  MS Internet Explorer = 343  Google Chrome = 511 1.  Fitur keamanan yang ditawarkan HTML5 juga masih terbatas. sangat memungkinkan browser yang ada sekarang sebagian belum mendukung elemen HTML5. di ocehan selanjutnya akan dibahas mengenai HTML secara khusus dan lebih detail. <!doctype html> <html> <head> <title>Judul Website</title> </head> <body> </body> </html> Demikian penjelasan tentang HTML secara umum.com. 4 . Berikut adalah template dasar dari HTML5.  HTML5 ini masih dalam perkembangan jadi beberapa elemen yang ada bisa saja berubah. sehingga tidak compatible pada layout web yang dibuat. Yang perlu kita ketahui selanjutnya adalah template dasar HTML.html5test. HMTL 5.  Menggunakan http://www.Sedangkan kekurangan HTML5 adalah sebagai berikut :  Karena tergolong baru.

contohnya kita ingin membuat link maka kita hanya perlu mengetik huruf h maka akan muncul sugesti href.1Software Desain Web 1. Dreamweaver adalah salah satu software paling eksis untuk membuat web karena kemudahan yang ditawarkannya. Disoftware ini pengguna dipermudah dengan munculnya sugesti perintah ketika pengguna mengetik kata pertama. 1. 5 2nd Ocehan Penjelasan KhususTentang HTML Mengenai contoh-contoh penggunaan elemen/tag dalam HTML dan penjelasan detail lainnya 2. software keluaran adobe ini kita sangat dibantu dalam menulis script pemrograman web baik itu script HTML atapun script PHP dan script lainnya yang berhubungan dengan web.5 5 .4 Software yang diperlukan untuk membuat web yang paling umum adalah dreamweaver. fungsi untuk membuat link.

dimana source code berada disisi kiri layar dan live preview berada disisi kanan layar.6 1. software ini berbayar meski demikian khusus untuk pelajar bisa mendapatkan license selama 1 tahun penuh dengan membuat akun jetbrains menggunakan email institusi.9 1.7 1. dan PhpStorm memang terlahir untuk developer PHP. 6 1. penulis lebih merekomendasikan software IDE PhpStorm dari JetBrains. ya masih ada tapi. Tapi. Nah pasti akan timbul pertanyaan kok bisa sih lebih menyarankan PhpStorm daripada Dreamweaver notabenanya adobe itu jauh lebih familiar dari pada JetBrains? Dari namanya aja udah lebih keren PhpStorm daripada Dreamweaver. contohnya 6 .8 Selain itu disoftware ini juga terdapat live preview dari web yang nantinya akan tampil dari source code yang diketik.10 Namun. Contoh seperti gambar dibawah ini: 1.

tidak hanya untuk PHP. 7 fiqyainuzzaqy@mhs. 7 . dan CSS tapi untuk jQuery juga. Didalam tag ini bisa diletakkan berbagai page attribute. Berikut adalah kelebihan dan kekurangan dari PhpStorm.  Ada tree view.gif” text=”#ffffff” link=“#ff0000“ vlink=“ffff00“ alink=“0000ff“>. ini adalah keuntungan besar karena anda tidak perlu akses GIT dengan command prompt atau terminal. <head>. misalnya: <body bgcolor=“#000000” background=”images/pcb.  Kekurangan  Tidak ada live preview seperti Dreamweaver. Suggest class yang ada di jQuery atau bootstrap juga pop- up tinggal tekan tombol ctrl+space dan pilih sesuai yang diinginkan lalu enter. tinggal download dan apply. dan <body> dinamakan elemen/tag.  Ada penanda untuk tag penutup atau pasangannya. untuk akses folder lebih cepat. HTML. 2.  Termasuk software berbayar.ac. bagi anda yang sudah mengenal GIT.2Tag <html>.unesa. jadi bisa langsung melalui PhpStorm. Bahkan anda tidak perlu membuat tag penutup seperti </html> secara manual.  Ada akses langsung ke GIT.  Bisa ganti warna editornya karena disediakan beberapa themes.  Kelebihan  Autosuggest/intelsense yang super responsive.id.

text. 8 . alink dan sebagainya itulah yang dinamakan attribute sedangkan semua yang dituliskan setelah attribute dan symbol sama dengan yang diberi tanda kutip dinamakan value. 2.2.1 Tag Text Format NB: tag <tt> atau teletype berfungsi untuk mengubah bentuk teks menjadi seperti teks yang dikirimkan melalui telegraf yang biasa disebut sebagai telegram. vlink. Berikut adalah contoh penggunaan tag dalam HTML. background. link. 8 Bgcolor.

Kom -> “Sarjana Komputer”). Ketika kursor diarahkan pada teks tersebut maka tooltip akan muncul seperti yang ditunjukkan pada gambar diatas (S. 9 NB: tag <abbr> dan <acronym> berfungsi untuk mendefinisikan teks yang disingkat maupun akronim dengan menampilkan sebuah tooltip yang didalamnya berisi definisi atau kepanjangan dari singkatan maupun akronim tersebut. 9 .

untuk menampilkan simbol euro  &pound. untuk menampilkan simbol degree  &yen.untuk menampilkan simbol poundsterling 10 . diantaranya sebagai berikut:  &copy. untuk menampilkan simbol yen  &euro. 10 Untuk menampilkan teks dengan simbol-simbol khusus diperlukan perintah tertentu. untuk menampilkan simbol register  &deg. untuk menampilkan simbol copyright  &reg.

2. 11 2.2 Tag Lists 11 .

4 Tag Penyisipan 12 .2. 12 2.3 Tag Table 2.2.

audio.jpg" width="45%"><!--jika file gambar dalam direktori yang sama dengan file html--> <br><audio src="Closer.mp4" controls="controls" width="45%"></video> 13 . Berikut adalah hierarki penulisannya dalam HTML.mp3" controls="controls"></audio> <br><video src="Closer. maupun video. 13 Tag penyisipan merupakan tag yang berfungsi untuk menyisipkan file baik berupa gambar. <img src="unesa-3.

Bedanya. 14 2. POST cenderung digunakan untuk mengirimkan data yang sifatnya rahasia seperti password. Kemudian. yaitu POST dan GET.2. POST tidak menampilkan nilai variabel pada URL sedangkan GET menampilkan nilai variabel yang dikirimkan sehingga POST lebih aman daripada GET.6 2.8 2.5 Tag Form 2.9 Pada tag form diatas terdapat attribute method dengan dua value.7 2.2. POST biasanya digunakan untuk input dari FORM.2. sedangkan GET digunakan untuk 14 . sedangkan GET menggunakan input dari LINK atau akses menggunakan link.2.2.

2.jpg” /></a> 2.dot.2.2.2.2.10 Tag a 2. Beberapa fungsi tersebut misalnya meta keywords dan description.14 <a href=”data. Elemen meta tag harus diletakkan dibawah awalan HEAD dan diatas TITLE dalam HTML tersebut.com/images/data.html” target=”_blank”><img src=”logo..html”>dataku</a> <a href=”. terdapat beberapa macam meta tag dengan fungsi yang berbeda./images/data.11 Dalam halaman web sealu ada tatuan atau link dimana link adalah sebuah tulisan atau gambar atau tombol atau lainnya yang berada pada suatu halaman A yang apabila diklik akan membawa pengguna untuk menuju ke suatu halaman lain atau halaman B. 15 mengirimkan/mengambil data publik seperti id_user atau id_halaman.3Meta Tag 2.html”>dataku</a> 2. Berikut lebih jelasnya tentang meta tag. Dan berikut adalah source code untuk membuat link: 2.2.2.php”>dataku</a> 2. Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang berfungsi sebagai penyampai informasi metadata dari sebuah halaman web. 2./.16 Dalam HTML terdapat banyak sekali source-source code untuk membangun sebuah website salah satu yang paling dasar adalah meta tag. 15 .13 <a href=”www.15 2.. Tag meta ini dapat dipakai juga untuk menyatakan descriptsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa HEAD Secara umum.12 <a href=”data.

17 16 . 16 2.2.

Berikut penulisan meta tag descriptsi: <meta content='My Experience Is My Inspiration' name='description'/> 2. Berikut penulisan meta tag title: <title><data:blog. dapat lebih mudah menjaring pembaca ke blog Anda berdasarkan kata kunci tertentu. Meta tag ini membantu web spider atau web robot search engine dalam mendescriptsikan blog Anda. Penulisan kata kunci harus dipisahkan dengan tanda koma.1 Meta Tag Title Meta tag yang menyatakan identitas atau judul dari suatu blog. Berikut penulisan meta tag keywords: <meta content=’keyword1.3. dan seterusnya‘ name=’keywords’/> 17 .3. Kata kunci harus sesuai dengan materi dari artikel Anda.pageName/> | <data:blog.2 Meta Tag Descriptsi Meta tag yang berfungsi untuk mendescriptsikan seluruh konten (isi) artikel suatu blog.pageTitle/></title> 2.keyword3. 17 2.3.pageTitle/></title > Kalian dapat memodifikasi kode meta tag title agar judul postingan lebih dulu terindeks oleh search engine dari pada judul blog (salah satu trik SEO). Penulisannya berubah menjadi: <title><data:blog.keyword2. Karena dengan kata kunci yang benar.3 Meta Tag Keywords Meta tag yang berisi keywords (kata kunci) dari konten blog Anda.

 Membuat posting lebih cepat terindeks search engine berdasarkan kata kunci.01'/> <meta content='wIOcDXyX7nhrfNmLaljhzeaDYlc 'name='alexaVerifyID'/> Kode . Yahoo.kode meta tag verifikasi tersebut jangan pernah dihapus. karena merupakan bukti bahwa Anda telah mem-verifiksi blog. 18 .4 Meta Tag Verifikasi Meta tag yang dipasang pada template blog setelah Anda mendaftarkan blog ke search engine Google.3. Bing. 18 2.  Membuat blog lebih cepat terindeks pada search engine. Alexa dan search engine yang lainnya. Berikut contoh penulisan meta tag verifikasi: <meta content='TtuX5x792RG5l1Vt52Lue2VbFGm545NIlQ Qw1CGI23c 'name='google-site- verification'/> <meta content='af350aa3e238f9c3' name='y_key'/> <meta content='EF3208999BFC2D6DD07C9896BF493B3B' name='msvalidate. biasanya Anda diharuskan memasang kode meta tag verifikasi tersebut pada template blog Anda. Setelah proses verifikasi blog selesai. Bagi kalian yang belum mengetahui apa itu fungsi meta tag langsung simak fungsi meta tag berikut:  Membantu robot google dalam mengindeks konten blog. Msn.

19 . 19  Spider bot search engine lebih mudah mengindeks konten blog.

20 . Dalam ocehan selanjutnya akan dibahas mengenai CSS yaitu source code yang berguna untuk menghias atau mempercantik suatu website. 20 Selain itu meta tag juga mempunyau beragam manfaat sebagai berikut:  Membuat blog Anda menjadi ramai visitor atau pengunjung.  Menaikkan trafik dan page rank blog Anda.  Judul artikel / postingan lebih mudah terindeks search engine.  Memungkinkan artikel berada pada halaman pertama Google. Dari ocehan sebelumnya yang sudah membahas tentang HTML maka dirasa cukup mengenai pembahasan tentang HTML mulai dari pengenalan hingga beberapa source code yang sangat penting dalam pembuatan suatu website.

21 3rd Ocehan Pengenalan Awal Tentang CSS Mengenai apa itu CSS dan bagaimana penggunaannya 21 .

warna. dan parameter lainnya.  CSS menghilangkan atribut presentasi dari struktur yang memungkinkan penggunaan kembali (reusabilitity). kanan. warna hyperlink. footer. dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). atau konten dari halaman web sedangkan CSS untuk tampilan dari halaman web tersebut. Pasti sebagian dari kita banyak yang berpikir kenapa harus menggunakan CSS ? padahal kan menghias halaman web seperti memberi warna tulisan membuat spasi bisa dilakukan dengan menggunakan bahasa HTML saja. Dengan CSS kita bisa mengubah desain dari text. 22 . Berikut alasan-alasan kenapa harus CSS. misalnya heading. CSS dapat mengendalikan ukuran gambar. warna bagian tubuh pada teks. gambar dan latar belakang dari (hampir) semua kode tag HTML. CSS bukan merupakan bahasa pemograman. images. margin kiri. kemudahan pemeliharaan dan lapisan presentasi dipertukarkan (interchangeable).1Penjelasan Umum Tentang CSS CSS (Cascading Style Sheets) merupakan kumpulan kode yang digunakan untuk mendefenisikan desain dari markup language dan digunakan untuk mendesain atau mempercantik tampilan halaman HTML. CSS selalu dikaitkan dengan HTML. spasi antar teks. bawah. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style. karena keduanya memang saling melengkapi. subbab. warna tabel. bodytext. warna border. ukuran border. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. HTML ditujukan untuk membuat struktur. spasi antar paragraf. 22 3. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. atas. warna mouse over.

 Cascade membuat prioritas pada individual styles pada style turunan (inheritance).  3.  Dalam CSS ada yang namanya cascade. embedded/internal style sheets. dan external style sheets. 23 . external style sheets.  CSS memungkinkan untuk membuat perubahan menyeluruh (global) dan seketika dengan mudah. 23  HTML tidak pernah dimaksudkan untuk menjadi bahasa presentasi.2Cara Penulisan CSS   Dalam penjelasan cascade diatas ada istilah inline.  3. inline style sheets. apa itu cascade ?  Kekuatan CSS ditemukan dalam "cascade" yang merupakan kombinasi gaya default browser. embeded/internal.2. Vendor proprietary telah menciptakan tag untuk menambahkan presentasi struktur.1 Inline Style Sheets   Merupakan cara menginput kode CSS secara langsung kedalam tag HTML dengan menggunakan attribute style. Lantas apa arti dari masing-masing istilah tersebut? Berikut adalah penjelasannya. Berikut adalah contoh penggunaannya. dan bahkan style yang ditetapkan pengguna.

Atribut style yang sebelumnya berada di dalam tag. 24   3. Tag style ini harus berada pada bagian <head> dari halaman HTML.2 Embedded/Internal Style Sheets   Digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML.2.  24 . dikumpulkan pada pada sebuah tag <style>.

25  3.css)</style>  <link rel=”stylesheet” href=”contoh. Setiap halaman yang membutuhkan kode CSS. Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. maka setiap halaman akan memiliki kode CSS yang sama. Ada dua cara pemanggilan:   <style>@import url(contoh.3 External Style Sheets   Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama.css”>    25 .2. tinggal ‘memanggil’ file CSS tersebut.

   Selector di tempatkan pada awal penulisan CSS. dan lain-lain.  Property CSS adalah jenis style. h1. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. atau elemen apa yang akan diubah dari sebuah tag HTML. li. p. body. Khusus untuk selector yang 26 . Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector. Selector paling dasar dari CSS adalah tag dari HTML itu sendiri. Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“.  Value CSS adalah nilai dari property. atau white. blue. jenis fontnya. seperti ukuran text. Dalam contoh diatas. black. maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“. dan lain-lain. h1 dan h2 adalah selector. 26   Dalam file css ini terdapat dua macam selector yang selanjutnya bisa dipakai untuk memanggil fungsi dari selector yang berisi dekorasi pada HTML nanti. misalnya: tag p. warna text. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. value atau nilainya dapat berupa red. i.

). berada di antara kurung kurawal “{“ dan “}”.  Diantara property satu dengan yang lainnya. spasi diantaranya digantikan dengan tanda hubung (-).h2) untuk memisahkan kedua selector tersebut. contohnya: background-color dan border- left.  Untuk property yang memiliki 2 kata .   27 .’ dapat di lihat pada contoh “text-decoration: underline”. kita boleh mengabaikan tanda ‘. karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti lainnya.’. Contoh property tanpa tanda ‘.)  Diantara property dengan value (nilai). 27 lebih dari 1 (seperti pada contoh selector terakhir: h1. digunakan tanda koma (.  Untuk properti yang berada pada baris terakhir. seluruh isi dari property dan valuenya (nilainya). tetapi disarankan agar tetap menggunakan tanda ‘.’ sebagai tanda tutup.  Setelah penulisan selector. dipisahkan dengan anda titik dua (:). dipisahkan dengan tanda titik koma (.

3.}  3.   h1  {text-decoration: underline. Berbeda dengan ID.3 Class Selector   Digunakan untuk menentukan style dari sebuah group elemen. dan seluruh tag tersebut akan ditangkap oleh selector ini.}  p  {font-size:14px. 28 3.}  }  3.2 Element/Tag Selector   Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri.3.3.  background-color:  white. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.   *{ color: blue. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen- elemen yang ada pada sebuah halaman web. selector class bisa dipakai berulangkali pada sebuah dokumen web.  3. Berikut penjelasannya. 28 . Setiap tag HTML bisa digunakan sebagai selector.3Jenis-Jenis Selector Dasar CSS   Terdapat 5 Selector dasar dalam CSS.1 Universal Selector   Universal Selector hanya ada 1 di dalam CSS. yaitu tanda bintang “*”.

misalnya pada sebuah paragraph. Selector ID pada syntax CSS ditandai dengan “#”. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman. Contoh selector ID:  #par1{  text-align:center. maka style hanya akan berlaku pada id yang pertama saja.3. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web.komentar{  </p> text-align:left. color:red. dapat dituliskan : <p class="komentar"> Ini adalah paragraph komentar . 29 .3. 29 Selector class dituliskan dengan ditandai dengan tanda titik “.4 ID Selector   Digunakan untuk menentukan style bagian unik dari html. }  Pada bagian dokumen HTML.} <div class="komentar">Ini bagian komentar</p>   3. color:red. misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama. bisa dituliskan:  <p id="par1">Ini adalah sebuah paragraph</p>  3.5 Attribute Selector   Selector dasar terakhir kita adalah attribute selector. untuk menggunakan style tersebut.”. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Contoh selector class :  Pada bagian dokumen web.

} 30 .}  [type="submit"] {width:30px. 30 Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.   [href]  {font-size:20px .

berikut adalah mereka : 3.x. • Letter-spacing purple.4. etc) • Text-transform • rgb (x.4. blue. 31 3.x) x=0-255 • Word-spacing (decimal) 31 .2 CSS Units & Colors • Z-index  Units • Positioning • % • Width • in • Height • cm • Float • mm • Text-align • em • Vertical-align • px 3.4Macam – Macam Code CSS   Setelah kita sudah mengetahui bagaimana cara menulis css maka yang perlu diketahui selanjutnya adalah macam-macam source code css.3 CSS • Font-weight Layout • Margin • Font-style • Padding • Font-size • Border 3.4.4.4 CSS Text • pt • Text-indent  Colors • Text-align • color • Text-decoration name (red.1 CSS • #rrggbb Fonts (hexadecimal) • Font-family 3.

• List-style-position image • List-style-type • Background- position 32 .4. 32 • White-space • Background- repeat  3.5 CSS • List-style Background • Background-color • List-style-image • Background.4.6 CSS Lists 3.

  Demikian tentang pengenalan mengenai CSS secara umum. di ocehan selanjutnya akan dibahas mengenai tips-tips tentang CSS dan penerapan CSS.  33 .

    4th Ocehan  Tips dan Penerapan CSS  Mengenai tips-tips untuk menerapkan dan menggunakan CSS dalam suatu website  34 .

Contohnya:  http://localhost/ocehanku/P3. biasanya cursor property diterapkan pada link.2Pembahasan Tentang Tips dan Penerapan CSS  Jika sudah membuka template atau contoh website yang sudah jadi diatas maka mari kita simak tips- tips CSS berikut ini.com style <a =”cursor:crosshair”>TEST</a>  35 . move.google.4.2.1 Cursor Property  Tips yang pertama dinamakan cursor property. Cursor property pada css digunakan untuk mengubah bentuk cursor yang semula type standart yaitu berbentuk tanda panah biasa menjadi type cursor lainnya (select. 4. Perhatikan source code dibawah ini:  href=www. dll) apabila cursor diarahkan ketempat yang elemennya sudah diberi css cursor property. loading. Sebelum dijelaskan lebih lanjut disarankan untuk mengambil template website yang ada dengan penerapan css.1Download Contoh Website Yang Mengandung CSS  Part ini adalah lanjutan dari ocehan sebelumnya yang membahas tentang pengertian secara umum dan penerapan CSS secara singkat. Dalam ocehan ke empat ini akan dijelaskan mengenai css tips dan penerapannya dalam membuat suatu website.zip 4.

2 Link hover animasi GIF  Tips yang kedua adalah css untuk membuat animasi gif dibawah link seperti contoh animasi tanda panas berjalan dibawah suatu link. Perhatikan gambar contoh-contoh tipe cursos berikut untuk lebih jelasnya : 4.  Dari source code css diatas dapat diartikan bahwa tulisan TEST mempunyai link ke www. Perhatikan script HTML link berikut: <a  href="http://www.2.tanggulangin.com">Website  Tanggulangin Dot Com</a> | <a href="#">Website lainnya</a> 36 .com tapi ketika cursor diarahkan ketulisan TEST yang mempunyai link ke situs raksasa dunia tersebut type cursor berubah menjadi type cursor crosshair atau type cursor yang berbentuk tanda plus.google.

jadi tentunya dengan button image link yang tadinya hanya 37 . color: #F00. background-position: 100% 100%.  background-repeat: repeat-x.2.gif).  background-image: url(animated_underline.    Terapkanlah source code CSS dibawah ini kedalam HTML diatas:  a:hover { text-decoration: none.  }   Jika CSS sudah diterapkan ke HTML diatas maka akan menghasilkan tampilan seperti ini :    4. Dari namanya saja sudah dapat diketahui bahwa button image adalah tombol berupa gambar plus tulisan yang menuju kesuatu link atau halaman web dengan.  padding-bottom: 3px.3 Button Image  Oke masuk ke tips ketiga. button image.

Ini adalah kode HTML nya : <a class="ovalbutton" href="#"><span>Website Link</span></a>  <a class="ovalbutton" href="#"  style="margin-left: 6px"><span>Produk link</span></a>   38 .sebuah tulisan saja dapat didesain lebih menarik dengan menambahkan tombol.

ovalbutton:hover{  background-position: bottom left.ovalbutton. display: block. padding: 4px 11px 4px 0. a:active.ovalbutton{  color: #494949. height: 24px.ovalbutton{ background: transparent url('ovalleft.ovalbutton span{  background: transparent url('ovalright.  padding-left: 11px. a:visited. text-decoration: none.  line-height: 16px. }  a.  Terapkanlah source code CSS dibawah ini kedalam HTML diatas:  a.ovalbutton.gif') no-repeat top right. }  a. font: normal 13px Tahoma.gif')  no-repeat top left. }   39 . color: black.ovalbutton:hover span{  background-position: bottom right.  float: left. }  a. }   a:link.  display: block.

     Jika CSS sudah diterapkan ke HTML diatas maka akan menghasilkan tampilan seperti ini :   Tentunya selain button diatas.php 4. Yang diperlukan adalah dua buah gambar dengan icon yang sama tapi dengan warna yang berbeda karena salah satu dari icon tersebut akan ditampilkan dan ketika mouse berada diatas icon tersebut maka gambar akan bergeser atau berganti ke gambar lainnya dengan warna yang berbeda.4 Button dan Anchor 40 . kita juga bisa membuat model button image sendiri.2. Cara mudah untuk membuat button image bisa dengan php berikut :  http://localhost/ocehanku/css_tips/icon/icon .

pop up gambar. Contohnya: 41 .5 Pop Up Gambar  Lanjut ketips kelima.  Tips keempat adalah button dan anchor. Css ini berfungsi untuk menampilkan gambar dengan size yang lebih besar yang muncul secara tiba-tiba ketika cursor diarahkan kegambar yang ukurannya lebih kecil pada suatu halaman web. Fungsi css berikut adalah untuk mempercantik tampilan tombol yang biasa digunakan pada pengisian formulis agar terlihat lebih menarik. Perhatikan perbandingannya:  Source code dari tampilan button yang cantik diatas dapat diambil di link dibawah ini :  http://localhost/ocehanku/css_tips/link_butt on/ 4.2.

  Source code dari tampilan diatas dapat diambil di link dibawah ini:  http://localhost/ocehanku/css_tips/gambar_popup/  42 .

Css ini digunakan untuk memberi pop up pada suatu teks yang berisi tentang keterangan teks tersebut. contohnya adalah teks css yang diberi tool tips seperti gambar dibawah : 43 .2. 4.7 Tool Tips  Tips selanjutnya adalah css mengenai tool tips.6 Sudut Melipat  Tips keenam adalah membuat sudut melipat pada sebuah box dengan menggunakan css.2. Hasilnya akan namak seperti dibawah:  Source code dari tampilan diatas dapat diambil di link dibawah ini:  http://localhost/ocehanku/kuliah/css_tips/box_lipat 4.

 Source code dari tampilan diatas dapat diambil di link dibawah ini:  http://localhost/ocehanku/kuliah/css_tips/tooltips  44 .

sama halnya sperti photoshop yang terdapat layer-layer atau lapisan=lapisan untuk menempatkan konten agar visibilitas antar konten dapat diatur.2. 4. Pada css cara mengatur layer menggunakan z-index yang dapat ditambahkan pada css dengan menuliskan z-index: 1.2. Untuk lebih jelasnya perhatikan gambar berikut:  Source code dari tampilan diatas dapat diambil di link dibawah ini:  http://localhost/ocehanku/z- index_stack_1_iframe. Langsung saja perhatikan gambar: 45 .8 Z-Index  Pada css juga terdapat semacam layer untuk menempatkan konten.html 4. standart adalah 0. angka 1 adalah layer tempat konten berada.9 Tabs  Berikutnya adalah membuat kolom yang berisikan tab-tab dengan memanfaatkan z-index pada css.

html  Table :  http://localhost/ocehanku/css_tips/table/table_0.html http://localhost/ocehanku/css_tips/form/form_2.html  http://localhost/ocehanku/css_tips/table/table_6.html http://localhost/ocehanku/css_tips/table/table_9.html http://localhost/ocehanku/css_tips/table/table_5.html  http://localhost/ocehanku/css_tips/form/form_1.10 Table dan Form  Dan berikut yang terakhir adalah tips-tips css untuk menghias table dan form.    Source code dari tampilan diatas dapat diambil di link dibawah ini:  http://localhost/ocehanku/css_tips/tab/tab.html  http://localhost/ocehanku/css_tips/table/table_8. bisa langsung mendownload dan pelajari CSS serta HTMLnya di link dibawah ini:  Form : http://localhost/ocehanku/css_tips/form/form_0.html http://localhost/ocehanku/css_tips/table/table_3.html 4.html http://localhost/ocehanku/css_tips/table/table_7.2.html http://localhost/ocehanku/css_tips/form/form_4.html  http://localhost/ocehanku/css_tips/form/form_3.html http://localhost/ocehanku/css_tips/table/table_1.html  46 .html  http://localhost/ocehanku/css_tips/table/table_2.html  http://localhost/ocehanku/css_tips/table/table_4.

Diocehan berikutnya akan dibahas JavaScript. penerapan CSS dapat langsung dipraktikan dengan mendownload File HTML di link yang telah tertuliskan di ocehan ke empat ini.   5th Ocehan Penjelasan Tentang JavaScript Mengenai apa itu JavaScript serta cara penerapan dalam sebuah website 47 .   CSS sudah dibahas di dua ocehan sehingga pembelajaran mengenai CSS sudah dirasa cukup.

JavaScript memiliki beberapa fitur. dan berorientasi objek. dimana untuk server side seluruh kode program dijalankan di sisi server. tetapi saat ini JavaScript hadir dalam hampir setiap halaman web modern. sehingga JavaScript adalah salah satu bahasa pemograman web yang wajib di kuasai. 48 . JavaScript termasuk dalam 3 komponen penting yang harus dikuasai programmer web. Namun. JavaScript adalah bahasa pemograman yang digunakan untuk membuat interaksi atau menambah fitur web dinamis kedalam sebuah web. loosely tiped. yakni HTML untuk konten (isi dari website).1Pengertian dan Fungsi JavaScript Meskipun dalam membuat halaman web anda tidak harus menggunakan JavaScript. yaitu high-level programming language. client-side. dan JavaScript untuk interaksi (behavior). Pengetahuan CSS dan Programming language seperti PHP juga akan membantu dalam mempercantik tampilan website. sebelum mempelajari JavaScript. sebaiknya anda menguasai dasar-dasar HTML dan dapat membuat halaman web sederhana terlebih dahulu. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client.5. Jenis bahasa pemrograman Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP. CSS untuk tampilan (presentation). JavaScript merupakan bahasa pemrograman web yang bersifat Client Side Programming Language.

karena harus membuat beberapa kode program untuk berbagai web browser atau dengan kata lain kode JavaScript yang kita buat. Sebelum JavaScript. JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. JavaScript kembali naik daun atas kemudahan yang ditawarkan oleh komunitas programmer yang membuat library JavaScript seperti jQuery. karena web browser tersebut tidak mendukungnya. JavaScript tidak hanya berguna untuk validasi form. yakni bergantung kepada implementasi web browser. 49 . efek-efek modern. sehingga programmer harus bekerja ekstra untuk memanipulasi kode program agar tetap bisa support/compatible dengan web browser tersebut. dan membuat fitur-fitur canggih yang sebelumnya membutuhkan ribuan baris kode program menjadi sederhana. bisa saja tidak bekerja di suatu browser seperti Internet Explorer. games. semuanya bisa dibuat menggunakan JavaScript. namun untuk berbagai keperluan yang lebih modern. fitur chatting. Berbagai animasi untuk mempercantik halaman web. Jadi. JavaScript mengalami permasalahan yang sama seperti kode pemograman web yang bersifat client side seperti CSS. JavaScript pada awalnya termasuk bahasa pemograman yang rumit. setiap interaksi dari user harus diproses oleh web server. Dalam perkembangan selanjutnya. Library ini memudahkan kita membuat program JavaScript untuk semua web browser.

setiap instruksi dari user harus dikirim terlebih dahulu kepada web server. Website pada saat itu umumnya dibuat menggunakan bahasa pemograman PERL yang pemrosesannya hanya bisa dilakukan di sisi web server. nama Mocha diubah menjadi LiveScript untuk versi client-side. ketika internet dan website sedang mengalami perkembangan yang pesat. Programmer web membutuhkan bahasa pemograman client-side yang bisa berjalan di web browser tanpa harus dikirim ke server. Netscape mengadakan kerjasama dengan Sun Microsystems untuk mengembangkan LiveScript. Netscape merubah nama LiveScript menjadi JavaScript dengan tujuan bahasa baru ini akan populer seperti bahasa Java 50 .5. dan tepat ketika Netscape Navigator 2 dirilis. Kelemahan pemrosesan di sisi web server adalah. Brendan Eich seorang programmer dari Netscape mulai mengembangkan sebuah bahasa pemograman script yang dinamakan Mocha. dan LiveWire untuk versi server- side. Pada tahun 1995. Bahasa script Mocha ini ditujukan untuk client- side dan juga server-side. Karena kecepatan rata-rata koneksi internet yang terbatas. baru kemudian ditampilkan lagi di dalam web browser. Netscape pada saat itu merupakan perusahaan software ternama yang memiliki web broser Netscape Navigator.2Sejarah Singkat Penamaan JavaScript Sejarah JavaScript dimulai sekitar tahun 1994. hal ini dipandang tidak efisien. Pada saat bahasa pemograman tersebut akan dirilis. Dalam perkembangan selanjutnya.

3.yang saat itu sedang booming di kalangan programmer. <head> <title>JS dalam Elemen</title> </head> <body> <div onclick="this. Caranya dengan menulis script JavaScript didalam tag html contohnya didalam tag <html> <div>. Penulisan JavaScript dengan metode ini adalah penulisan yang paling standar. perhatikan script berikut. Untuk menginput.innerHTML='<b>teks JavaScript</b>'. sehingga program yang dibutuhkan untuk menjalankan JavaScript hanyalah sebuah aplikasi text editor dan sebuah web browser seperti Google Chrome atau Mozilla Firefox. Versi JavaScript ini dinamakan dengan JavaScript 1.3Cara Penulisan JavaScript JavaScript merupakan bahasa script yang berjalan pada web browser."> 51 teks di elemen HTML. untuk merubah silakan di klik </div> </body> </html> .0. 5. JavaScript menyediakan 4 alternatif.1 Inline JavaScript Cara yang pertama untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan Event Handler atau Inline JavaScript dari dalam tag HTML. atau memasukkan kode JavaScript ke dalam HTML. yaitu: 5.

jika kode JavaScript tidak begitu panjang. atau di dalam satu file HTML. Internal disini berarti bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML.3. jadi JavaScript tersebut hanya berlaku di elemen div yang disisipi script JavaScript itu sendiri.Dalam script html tersebut dapat diketahui bahwa dimasukkan script JavaScript di dalam elemen div.2 Internal JavaScript Cara kedua yaitu dengan menggunakan tag <script> secara internal. 5. Script tersebut berguna untuk merubah tulisan “teks di elemen HTML. Penulisan model seperti ini tentunya embutuhkan waktu yang lama dan mempunyai tingat efisiensi yang rendah karena diharuskan memberi script JavaScript pada satu per satu elemen html. Dapat dipelajari bahwa penulisan dari javascrip diatas hanya dituliskan dalam salah satu elemen html yaitu div. dan hanya digunakan di 1 halaman 52 . Cara ini merupakan cara yang paling sering digunakan. untuk merubah silakan di klik” menjadi tulisan “teks JavaScript” ketika diklik.

js. lalu memanggilnya dari HTML.js. 5. Cara ini sangat disarankan karena akan memberikan banyak keuntungan dan fleksibilitas dalam membuat program JavaScript. kita memanggilnya menggunakan tag <script> dengan 53 . register. Sebuah file JavaScript disimpan dalam ekstensi . Kode JavaScript yang akan diinput diletakkan diantara tag pembuka <script> dan tag penutup </script> seperti berikut ini: <script> //kode JavaScript diletakkan disini </script> Tidak seperti metode Internal pada CSS yang harus diletakkan pada tag <head> melainkan bisa di bagian mana saja.js.js.3. seperti: kode.3 External JavaScript Cara yang ketiga adalah dengan memindahkan kode JavaScript ke dalam sebuah file terpisah. atau kodeku. Dari halaman HTML.saja.

. Atribut src berisi alamat dari file JavaScript tersebut. karena kita mengganti alamat link dari yang biasa menggunakan protocol “http//:” menjadi “JavaScript:” <!DOCTYPE html> <html> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</a> </body> 54 . seperti berikut ini: <script src="kode_JavaScript.4 Menggunakan URL Cara terakhir (dan juga paling jarang digunakan saat ini) adalah dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML.js"> </script> 5.atribut src. Cara ini disebut juga dengan protocol JavaScript..</p> <a href="JavaScript:alert('Hello World!!')">Hallo Dunia.3.

5.4Kegunaan Script yang Ada di JavaScript

Setelah keempat cara penulisan dari JavaScript
sudah dibahas sekarang waktunya untuk membahas
mengenai kegunaan script-script pada JavaScript itu
sendiri. Salah satu kegunaan dari JavaScript adalah
membuat massage alert, yaitu pesan dialog windows
yang biasa muncul pada browser yang biasanya terdapat
pilihan OK dan tutup. JavaScript tersebut menggunakan
fungsi window.alert , window.confirm, window.prompt.
lebih jelasnya bisa mempelajari contoh dibawah :
http://localhost/ocehan/JavaScript/js_output_box.html
Selanjutnya adalah JavaScript untuk menuliskan
teks dan memberi gaya pada teks. Fungsinya
menggunakan window.write dan window.writeln. Fungsi
window.write digunakan untuk menampilkan teks tanpa
ganti baris sedangkan fungsi window.writeln digunakan

55

untuk menulis teks dengan ganti baris. Bisa dipelajari
lengkapnya di :
http://localhost/ocehan/JavaScript/js_output_write.ht
ml
Selanjutnya adalah variabel, sama seperti
pemrograman c++, di JavaScript juga ada yang namanya
deklarasi dan inisialisasi untuk variabel. Caranya adalah
seperti :
var count;
var count, amount, level;
var count = 0, amount = 100;

Berikut adalah macam-macam dari nama variabel :

 case-sensitive
 Karakter pertama huruf atau underscore, nomor
tidak boleh sebagai karakter pertama
 Bukan reserved word:

56

Dalam JavaScript terdapat 3 jenis data, yaitu sebagai
berikut.
Tipe data primer

 String

 Number

 Boolean

Tipe data komposite (composite/reference)

 Object

 Array

Tipe data khusus

 Null

 Undefined

5.4.1 Tipe Data : string

 "Happy am I; from care I'm free!"

 ‘Anak itu “bodoh“ kok‘

57

 "45"  'c' Contoh scriptnya adalah sebagai berikut : <script> var mobil = "Toyota Yaris". var mobil = ’Toyota Yaris’. </script> 58 .

3 Tipe Data : boolean Seperti sebelum-sebelumnya untuk tipe data ini hanya berisi perbandingan atau comparison : true atau false 5.5 Tipe Data : undefined 59 .45e2 .4.4. 5. 09 // integer  3. 6 .2 Tipe Data : number JavaScript merepresentasikan angka dengan floating- point  -5 .4 Tipe Data : null  Keyword “null” tidak bisa digunakan untuk nama variable atau function.4.  Variable null berisi “no value” atau “no object”  Null tidak sama dengan 0 (nol) 5. 0x11 // hexadecimal  011 // octal 5. 0 .4. 2e-3 // floating point  0xF .

6 Operator Sama seperti bahasa pemrograman yang lain yang mempunyai operator.4. dalam JavaScript juga terdapat fungsi operasi seperti operator Computational yang berisi perintah-perintah operasi standart seperti: 60 . 5.Nilai “undefined” didapat jika:  Object property tidak ada  Variable sudah dideklarasikan tapi belum terisi data.

Dan ada juga operasi Bitwise yang berisi perintah seperti : 61 .

Serta ada juga operasi logical yang berisi perintah layaknya perbandingan seperti : Ada juga operasi Compound Assignment yang isinya : 62 .

Cara penulisannya hampir sama dengan di C++ yaitu : functionName(parameters) { … // isi blok program } Contoh penerapan dalam JavaScript adalah dalam coding berikut: <script> function kali(a. } var a=5. } function kali_ret(a. b=7 .write(a+’ X ‘+b+’ = ‘ + a*b). b)). 63 kali(a. document.write(‘<br>’). 5.7 Function Dalam JavaScript juga ada fungsi function layaknya di C++ guna mempersingkat coding dalam pembuatan JavaScript.b).write(a+’ X ‘+b+’ = ‘ + kali_ret(a. b){ Return(a*b). document. b){ document.4. </script> .

html 64 . Di JavaScript terdapat mouse event yang bermacam-macam contohnya adalah script dijalankan ketika mouse diklik. di JavaScript juga ada click events atau di css disebut hover yaitu script dijalankan ketika cursor berada diatas elemen hover.ht ml 5. Contohnya di : http://localhost/ocehan/JavaScript/event_onclick.8 Click Events: onclick Sama seperti di css juga.4.Lihat hadil dari coding JavaScript diatas di : http://localhost/ocehan/JavaScript/function_deklarasi.

untuk lebih jelasnya lihat gambar dibawah : Contoh dari mouse event ada di : http://localhost/ocehan/JavaScript/dom_document_ bg_event.4. 5.9 Mouse Events: onclick Ini adalah aksi atau tindakan yang terdapat dalam JavaScript yang bisa diatur dan berjalan dimana cursor dalam kondisi tertentu.html 65 .

4. 66 . untuk lebih jelasnya lihat gambar dibawah Contoh dari input keyboard event ada di : http://localhost/ocehan/JavaScript/dom_documen t_bg_inputevent.10 Input Keyboard Events Selain aksi yang disesuaikan dengan kondisi cursor juga terdapat aksi yang disesuaikan dengan kondisi keyboard. 5.html Cukup sekian ocehan mengenai penjelasan detail tentang JavaScript agar dapat memahami penjelasan secara maksimal hendaknya selalu mendownload file-file HTML yang sudah jadi di link yang telah diberikan dalam masing-masing poin penjelasan tentang JavaScript diatas. Input keyboard event adalah aksi atau tindakan yang terdapat dalam JavaScript yang bisa diatur dan berjalan dimana keyboard dalam kondisi tertentu.

bagaimana penulisannya.6th Ocehan Pengenalan Tentang jQuery Mengenai apa itu jQuery. serta secara singkat menjelaskan fungsi yang ada pada jQuery 67 .

6.1Pengertian jQuery

jQuery adalah salah satu dari sekian banyak
JavaScript library atau framework. Ocehan ini merupakan
pengembangan dari ocehan yang sebelumnya mengenai
JavaScript karena dengan adanya JavaScript library atau
framework ini kita jadi dipermudah dalam pembuatan
script pada suatu website. JavaScript saat ini sudah
jarang digunakan karena kerumitannya dalam penulisan
yang sering digunakan untuk saat ini ialah JavaScript
library atau framework karena sangat memberikan
keringkasan dan kemudahan dalam penulisan. Dalam
JavaScript library tersebut berisi kumpulan perintah yang
dapat dipanggil langsung menggunakan kode pada HTML
jadi kita sudah tidak perlu lagi membuat perintah
tertentu yang sudah ada pada JavaScript library tersebut.
Ada banyak macam penyedia layanan JavaScript library
daftarnya adalah sebagai berikut :

 jQuery - https://jquery.com

 Prototype - http://prototypejs.org

 Mootools - http://mootools.net

 Ext JS - http://www.sencha.com/products/extjs

 Yui - http://yuilibrary.com

 Angular - https://angularjs.org

 Midori - http://www.midorijs.com

68

 Google Web Toolkit -
http://code.google.com/webtoolkit

 DHTMLX - http://dhtmlx.com

 Dojo Toolkit - http://www.dojotoolkit.org

 Echo 3 - http://echo.nextapp.com/site/echo3

 MochiKit - http://mochi.github.com/mochikit

 Pyjamas - http://pyjs.org

69

Hanya saja pada ocehan tentang pemrograman web ini
menggunakan layanan dari jQuery yang mana bisa
diakses di www.jQuery.com. jQuery adalah JavaScript
library kecil open source yang menekankan pada
interaksi antara JavaScript dan HTML. Library ini dirilis
pada Januari 2006 di BarCamp NYC oleh John Resig dan
berlisensi ganda di bawah MIT dan GPL. jQuery juga
merupakan JavaScript library yang cepat, ringan, dan
mempunyai banyak fitur. jquery dapat membuat

dokumen html yang baik dan atraktiv, penuh animasi,
dan kaya akan fitur. jQuery adalah salah satu JavaScript
library terbaik yang dapat menggantikan fungsi
JavaScript itu sendiri. jQuery juga dapat mendukung
hampir semua browser internet explorer, chrome, firefox,
opera, safari dan bahkan ios dan android. Berikut adalah
3 hal mengapa harus memilih jQuery :

Dari penjelasan diatas dapat diketahui bahwa jQuery
adalah :

 JavaScript library / framework

 jQuery mempunyai semboyan: “write less, do
more”

70

 jQuery dirancang untuk memperingkas kode-kode JavaScript  jQuery dirancang untuk mengubah cara menulis JavaScript Fitur fitur yang ditawarkan oleh jquery itu sendiri antara lain :  HTML/DOM manipulation  CSS manipulation  HTML event methods  Effects and animations  AJAX  Utilities 71 .

Untuk langsung mendownload jquery silahkan buka dihalaman www. Nah. Tapi sebenarnya jika ingin menerapkan jQuery tidak perlu mendownload juga masih bisa dilakukan karena untuk mengaktifkan fungsi jquery pada website ada dua yaitu : Pertama menggunakan script seperti ini : <script src="js/jquery-1. Perbedaanya adalah jika yang mempunyai size besar terdapat enter dan spasi antar script satu dengan lainnya jadi lebih mudah untuk mempelajarinya taua bahkan 72 .5.js dari jquery itu sendiri pada hosting yang kita gunakan.6.js"></script> Script diatas adalah script untuk mengaktifkan fungsi jquery pada sebuah website dengan mengambil file .js yang berisi javascipt library dari jquery tersebut di website kita.min. untuk mencoba jQuery maka kita perlu mendownload library tersebut di website jQuery. jadi cara ini mengharuskan kita untuk mendownload terlebih dahulu jquery kemudian menguploadnya pada sebuah hosting lalu pada akhirnya dipanggil pada file html guna mengaktifkan file .1.com/download. Apabila terdapat update pada jquery maka kita diharuskan untuk mendownload dan mengupload ulang file jquery tadi. Pada versi download ini juga terdapat dua versi.jQuery.2Penggunaan jQuery Dari fitur-fitur yang ditawarkan oleh jQuery tersebut pasti banyak orang yang ingin mencoba dan menerapkan jQuery diwebsitenya. yaitu versi pertama dengan size yang besar sekitar 212 kb dan versi kedua adalah versi ringkas hanya 84 kb.

Kelebihannya tentu apabila terdapat update pada jquery maka kita akan otomatis mendapatkan update tersebut.mengeditnya namun jika yang bersize kecil tidak terdapat spasi dan enter sama sekali sehingga mustahil untuk mempelajarinya apalagi mencoba untuk mengeditnya.2/jquery.min.11. </script> </head> <body> 73 <div id="info></div> </body> </html> . }). Kedua menggunakan script seperti ini : <script src="http://ajax.googleapis.1..js"></script> Script diatas adalah cara memanggil fungsi jquery yang lebih simpel.5.ready(function(){ $("#indo"). Jika kita sudah mengaktifkan fungsi jquery pada website maka tidak ada salahnya untuk mencoba mengetes apakah sudah aktif atau belum dengan script sederhana untuk menampilkan text menggunakan jquery.com/ajax/libs/jqu ery/1. Kita tidak perlu untuk mendownload dan mengupload file jquery pada hosting melainkan menggunakan sebuah link dimana file jquery tersebut berada yang sudah disediakan oleh perusahaan javascript library jquery ini. !").text("Tulisan ini dari jQuery ..min. Berikut caranya : <html> <head> <title>Tes jQuery</title> <script type="text/javascript" src="js/jquery- 1.js"></script> <script type="text/javascript"> $(document).

74 . Salah satu sebab dari banyaknya pengguna dari jQuery ini adalah karena di java library tipe satu ini menyediakan banyak library yang bisa digunakan untuk membuat halaman web walaupun juga ada beberapa javascript library yang juga membunyai fungsi yang bisa digunakan untuk membuat halaman web tapi karena jQuery karena supportnya yang lebih ramai dan dokumentasinya jauh lebih lengkap daripada javascript library lain yang dapat membuat kemudahan dalam menghadapi suatu kasus dalam pembuatan suatu website.Apabila dibrowser sudah muncul tulisan dibawah maka bisa dipastikan bahwa pemanggilan fungsi jQuery telah berhasil : Penulisan pada jquery selalu diawali dengan kata jQuery lalu diikuti dengan fungsi selanjutnya jadi bisa terlihat seperti jQuery(“*”) namun karena penulisan tersebut sedikit panjang karena harus menuliskan tulisan jQuery berkali-kali maka dibuat singkata untuk tulisan jQuery menjadi simbol $ jadi penulisan jquery jadi terlihat seperti $(“*”).

}).ready(function(){ $('body'). di jQuery juga terdapat selector untuk memanggil fungsi-fungsi yang terdapat didalam jQuery itu sendiri. 'blue'). Sama seperti CSS.css('background'. Sebenarnya tidak ada perbedaan selector antara CSS dan jQuery namun ada sedikit tambahan jika di CSS apabila ingin menambahkan style pada salah satu class elemen HTML maka cukup mendifinisikan style dengan tanda titik ditambah dengan nama classnya begitu pula dengan jQuery. </script> 75 . misal ingin memasukkan selector untuk elemen body dan memberikan perintah agar background halaman website menjadi biru maka akan perlu kode seperti di bawah ini : <script type="text/javascript"> $(document).

com. 76 . disini hanya dijelaskan mengenai cara menuliskan jQuery dan fungsi secara songkatnya saja. kodenya seperti dibawah ini : <select name=“cities”> <option value=“1”>Tel-Aviv</option> <option value=“2” selected=“selected”>Yavne</option> <option value=“3”>Raanana</option> </select> Terdapat sangat banyak macam perintah atau fungsi pada jQuery itu sendiri.jQuery. Maka untuk mempelajari jQuery lebih lanjut dapat membuka situs resmi dari jQuery itu sendiri di www.Fungsi berikutnya adalah mmebuat menu dropdown. tidak memungkinkan untuk dibahas dalam sebuah ocehan kecil seperti ini.

7th Ocehan Pembahasan Tentang PHP Mengenai apa itu PHP (Personal Home Page) dan penjelasan tentang kegunaannya secara singkat 77 .

perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0. Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing. dirilis PHP/FI 2. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI.1Pengertian PHP PHP adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. PHP banyak dipakai untuk memrogram situs web dinamis. PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP. Pada tahun 1997. Pada November 1997. Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi 78 . interpreter PHP sudah diimplementasikan dalam program C. Kemudian pada Juni 1998. Dengan perilisan kode sumber ini menjadi sumber terbuka. Pada pertengahan tahun 1999.0. Pada rilis ini.7. dan lebih cepat. Pada waktu itu PHP masih bernama Form Interpreted (FI). PHP dapat digunakan untuk membangun sebuah CMS. PHP 4. lebih baik. yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Versi terbaru dari bahasa pemograman PHP adalah versi 5. Zend merilis PHP 5. Dalam versi ini. 7.0. Aplikasi merupakan program atau grup program yang didesain untuk digunakan oleh end user (pengguna).2Kegunaan Dari PHP Dalam pemanfaatannya dalam dunia web PHP banyak dimanfaatkan sebagai otak dari satu website tersebut yang biasa digunakan untuk mengirimkan data dari website ke database menggunakan aplikasi web. maka disebut sebagai web-based atau web-application tapi jika aplikasi web tersebut membutuhkan penyimpanan informasi database dengan jangka waktu lama. 7.1 Database Memori jangka panjang dari aplikasi tersebut dimana aplikasi tersebut tidak dapat berjalan tanpa adanya database.4 yang resmi dirilis pada tanggal 18 Desember 2014.6. inti dari interpreter PHP mengalami perubahan besar. Pada Juni 2004. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek. yaitu: 7.2.2. Jika interaksi pengguna menggunakan sebuah web browser.2 Application 79 . maka disebut web database application yang terdiri dari 2 bagian.

Halaman web yang dibuat dengan single-html disebut “STATIS”. Program membuat tampilan yang bisa dilihat melalui browser. Berbeda halnya dengan HTML yang dapat dengan mudah dilihat source code HTML suatu website menggunakan fungsi view source pada web browser. Aplikasi secara interaktif dapat menerima dan memproses informasi yang diaktifkan oleh pengguna melalui browser kemudian menyimpannya dalam database Terdapat dua macam tipe halaman website yang pertama adalah halaman web statis. Untuk membuat web dinamik digunakan bahasa pemograman lain yang ditambahkan dalam format html. apabila PHP terdapat dalam suatu website maka tidak akan bisa dilihat source codenya oleh web browser. Merupakan bagian dari program yang membentuk sebuah fungsi/tugas. 80 . pengguna tidak dapat berinteraksi dengan halaman web. pengguna tidak dapat berinteraksi dengan halaman web. Semua orang melihat halaman web yang sama. Yang kedua adalah halaman web dinamis. Halaman web yang dibuat dengan single-html disebut “STATIS”. Silahkan lihat gambar dibawah ini supaya lebih jelasnya mengenai gambaran proses dari PHP dari komputer server ke komputer client yang diterjemahkan oleh web browser. Setiap pengguna bisa melihat halaman yang berbeda-beda tampilannya. Semua orang melihat halaman web yang sama. Jadi PHP adalah semacam script yang sudah dijalankan oleh browser dari komputer server ke komputer client secara diam-diam. Dinamik merupakan halaman web dimana pengguna dapat berinteraksi dengan fungsi-fungsi yang ada.

81 .

Sama seperti pemrograman lain seperti C++. tidak perlu didefiniskan (inisiasi) sebelumnya. assign atau pemberian nilai pada variable menggunakan operator “=“ sebagai Contoh: $nama = “Torrento”. Penulisan variabel pada PHP diawali dengan tanda $ kemudian dilanjutkan dengan nama variabelnya. 0 . variabel di PHP termasuk Case-sensitive comtoh: $name and $Name berbeda. berikut contoh variabel yang berdasarkan letaknya :  $_COOKIE  $_SESSION  $_ENV 82 . Variables bisa berubah nilainya. Variables berupa nilai/data diklasifikasikan dalam tipe-tipe data. Yang dimana Variables adalah nilai yang disimpan dalam memory komputer. penulisan variabel tidak boleh diawali angka. operators. dalam php juga terdapat variables. 5.6 . Nama yang diberikan pada variable disebut identifier.75  String // “ini teks”  Array // $hari[4] . $matriks[5][7]  Object // $mobil->roda  Resource // Resource #4  NULL Dalam PHP juga terdapat variabel array dan juga variabel array yang sudah didefinisikan oleh fungsi PHP itu sendiri. constants. Integers dapat berubah menjadi floats dan menjadi strings Tipe variable di PHP :  Boolean // TRUE / FALSE  Integer // -3 . 4  Float // 5.

$b . 10. dalam PHP juga terdapat fungsi-fungsi operasi seperti contoh dibawah ini: Assignment (=) dan combined assignment $a = 3. Bitwise (&. // sets $b to "Hello There!". untuk floating-point number berisi 83 . Nama Constant menggunakan huruf kapital. negative dan 0 (-250. // sets $a to 8.000). Menggunakan define() untuk membuat constant contohnya : define("CONSTANT_NAME".  $_FILES  $_GET  $_POST  $_REQUEST  $_SERVER Selain variabel yang bisa berubah-ubah nilainya. value). Selain itu juga sama seperti pemrograman lainnya. Nilai yang bisa dimasukkan pada function define() adalah text string. dalam PHP juga terdapat variabel konstan yang dimana nilai dalam variabel tersebut tidak dapat berubah-ubah. ~. ^.= "There!". 2. atau Boolean value. Nama Constant tidak diawali dolar ($). 100. untuk variabel integer berisi nilai positive. <<. |. Tentunya terdapat aturan untuk menuliskan suatu nilai berupa angka dalam satu variabel. >>) Pada suatu pengoprasian dalam PHP tentu dibutuhkan suatu nilai berupa angka yang dimasukkan dalam variabel. $b = "Hello ". number. $a += 5.

Hasil compare data. } Dalam implementasinya dalam dunia web desain tidak sedikit yang memanfaatkan PHP untuk 84 .7541).3e11 sama dgn 2. } else { echo “$b is less than $a”. 3. 0 = FALSE.. Selanjutnya ada decision making yang dapat mengevaluasi fungsi tipe data boolean. AND dan OR untuk menyeleksi 2 kondidi atau lebih Contoh : if ($lapar AND $bokek) {/* puasa */} Fungsi yang cukup penting dalam suatu program adalah fungsi if else. Inisialisasi $valid = false. dan untuk Exponential notation / scientific notation. “TRUE” and “FALSE” are reserved words.3 x 10 Dalam PHP juga terdapat tipe data Boolean.decimal notasi exponential (-6. Decision making mengevaluasi Boolean expressions (true / false).17. Fungsi if pada PHP merupakan kumpulan blok program diapit tanda kurung kurawal (bracket) brace “ { “ dan closing brace “ } “ Contoh : if ($a < $b) { echo “$a is less than $b”. yaitu fungsi yang dapat digunakan untuk memberikan perinta suatu baris perintah jalan atau tidak. 2. Dalam PHP programming.16. langsung menggunakan TRUE atau FALSE kalau dalam pemrograman lain menggunakan 1 = TRUE. if($lapar) { /* makan*/ }. penulisan decimal yang terlalu panjang contoh : 2. yaitu tipe data yang menunjukkan benar atau salah agar dapat menjalankan suatu fungsi atau tidak. Boolean value = TRUE or FALSE. Compare with ==.

w3schools. echo "Today is " . "<br>". "<br>". echo "Today is " . 85 .com/php karena sangat tidak mungkin apabila harus dijabarkan pada ocehan ini semua.menampilkan jam di suatu halaman web. date("Y. date("Y-m-d") . Untuk contoh perhatikan source code berikut : <html> <body> <?php echo "Today is " .m. Di ocehan selanjutnya akan membahas tentang database. ?> </body> </html> Yang nantinya akan mempunyai tampilan seperti : Demikian ocehan tentang penjelasan secara singkat mengenai PHP. date("l").d") . untuk melihat tentang source code PHP yang lain bisa menuju ke www. echo "Today is " . "<br>". date("Y/m/d") .

86 .

8th Ocehan Pembahasan Tentang Database Mengenai kegunaan database dalam sebuah website dan cara pengimplementasiannya 87 .

memberi sinyal kepada manajemen dan yang lainnya terhadap kejadian-kejadian internal dan eksternal yang penting dan menyediakan suatu dasar informasi untuk pengambilan keputusan. terminal.  Software : Sistem Operasi. yang mendukung sistem. printer. Sedangkan Informasi merupakan hasil dari pengolahan data dalam suatu bentuk yang lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu kejadian-kejadian (event) yang nyata (fact) yang digunakan untuk pengambilan keputusan. teknologi. Program Pengontrol Komunikasi.8.1Pengertian Database Data adalah suatu nilai/value yang turut merepresentasikan deskripsi dari suatu objek atau kejadian (event). mengkonsumsi keluaran dan melakukan aktivitas manual. prosedur- prosedur dan pengendalian untuk mendapatkan jalur komunikasi penting.  Data : Data yang tersimpan dalam jangka waktu tertentu. Sistem Database. Jadi Sistem Informasi adalah suatu sistem dalam suatu organisasi yang merupakan kombinasi dari orang-orang. Program Aplikasi. Sistem informasi samadengan Sistem terotomasi. menyediakan masukan. memproses tipe transaksi rutin tertentu. antara lain :  Hardware : CPU.  Personil : yang mengoperasikan sistem. terdiri dari beberapa komponen. Disk. media. fasilitas.  Prosedur : Instruksi dan kebijakan untuk 88 .

memasukkan hal-hal di luar bidang elektronika. yang menurut istilah layman mewakili semua informasi dalam bentuk tabel-tabel yang saling berhubungan dimana setiap tabel terdiri dari baris dan kolom (definisi yang sebenarnya menggunakan terminologi matematika). atau potongan dari pengetahuan. atau sering pula dieja basisdata. Model yang umum digunakan sekarang adalah model relasional. artikel ini mengenai basis data komputer. Sebuah basis data memiliki penjelasan terstruktur dari jenis fakta yang tersimpan di dalamnya: penjelasan ini disebut skema. dan hubungan di antara obyek tersebut. Ada banyak cara untuk mengorganisasi skema. atau memodelkan struktur basis data: ini dikenal sebagai model basis data atau model data. DBMS). Meskipun kemudian artinya semakin luas. Sistem basis data dipelajari dalam ilmu informasi. mengoperasikan sistem. Pangkalan data atau basis data (bahasa Inggris: database). Catatan yang mirip dengan basis data sebenarnya sudah ada sebelum revolusi industri yaitu dalam bentuk buku besar. adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. Istilah "basis data" berawal dari ilmu komputer. Konsep dasar dari basis data adalah kumpulan dari catatan-catatan. kuitansi dan kumpulan data yang berhubungan dengan bisnis. 89 . Perangkat lunak yang digunakan untuk mengelola dan memanggil kueri (query) basis data disebut sistem manajemen basis data (database management system. Skema menggambarkan obyek yang diwakili suatu basis data.

Dalam model ini.2Bagian-Bagian Dari Database Berikut adalah gambaran skema dari database : 90 . Model yang lain seperti model hierarkis dan model jaringan menggunakan cara yang lebih eksplisit untuk mewakili hubungan antar tabel. 8. hubungan antar tabel diwakili denga menggunakan nilai yang sama antar tabel. Istilah basis data mengacu pada koleksi dari data- data yang saling berhubungan. banyak administrator dan programer menggunakan istilah basis data untuk kedua arti tersebut. dan perangkat lunaknya seharusnya mengacu sebagai sistem manajemen basis data (database management system/DBMS). Jika konteksnya sudah jelas.

2.2.2.2.2.2 Field Merepresentasikan suatu atribut dari record yang menunjukkan suatu item dari data.2.2.1 8.1 8.2.1 8.1 8.1 8. alamat dan lain sebagainya.2.1 8.2.2. huruf ataupun karakter- karakter khusus (special characters) yang membentuk suatu item data / field.2.1 8. 8.2.1 8.1 8. Kumpulan dari field 91 .2.1 8.2. dapat berupa karakter numerik.1 8.2.2.2.1 8.1 8.1 8.2. seperti misalnya nama.1 8.2.1 8.1 Characters Merupakan bagian data yang terkecil.1 8.2.1 8.1 8. 8.

Field value adalah isi dari field untuk masing-masing record. Number  Record : Titi Kamal. Misalnya table mahasiswa. Field name harus diberi nama untuk membedakan field yang satu dengan lainnya. Kumpulan dari record membentuk suatu table. 8.membentuk suatu record.4 Table / File Table terdiri dari record-record yang menggambarkan satu kesatuan data yang sejenis. field representation adalah tipe field (karakter. tanggal. angka. Record menggambarkan suatu unit data individu yang tertentu. NomorRumah. 8.3Tahapan perancangan basis data Perancangan basis data merupakan upaya untuk membangun sebuah basis data dalam suatu lingkungan 92 . Misalnya table mata pelajaran berisi data tentang semua mata pelajaran yang ada.3 Record Kumpulan dari field membentuk suatu record. 8531265.2. lebar field (ruang maksimum yang dapat diisi dengan karakter-karakter data). NomorHP  Type data : Text. dsb). tiap-tiap record dapat mewakili data tiap-tiap mahasiswa. Number. teks.2. Contohnya:  Database : Buku daftar nomor telpon  Tabel : Teman Kuliah  Field : Nama. 8564445646 8.

bisnis. Untuk membangun sebuah basis data terdapat
tahapan-tahapan yang perlu kita lalui yaitu:

 Perencanaan basis data
 Mendefinisikan sistem
 Analisa dan mengumpulkan kebutuhan
 Perancangan basis data
 Perancangan aplikasi
 Membuat prototipe
 Implementasi
 Konversi data
 Pengujian
 Pemeliharaan operasional

8.4Tujuan Pembuatan Database

Pembuatan database atau basis data memiliki
beberapa tujuan, diantaranya adalah sebagai berikut.

 Kecepatan dan Kemudahan (Speed)
Dapat menyimpan data atau melakukan
perubahan / manipulasi terhadap data atau
menampilkan kembali data tersebut dengan cepat
& mudah

 Effisiensi Ruang Penyimpanan (Space)
Karena adanya keterkaitan yang erat
antarkelompok data dalam database, maka
terjadinya perulangan data (redudancy) tidak
dapat dielakkan. Dengan menggunakan database,
optimalisasi penggunaan ruang penyimpanan

93

dapat ditingkatkan dengan penggunaan kode pada
data atau relasi-relasi tertentu.

 Keakuratan (Accuracy)
Pemanfaatan kode atau pembentukan relasi
disertai dengan penggunaan batasan (constraint)
pada tipe data yang digunakan, akan dapat
meningkatkan keakuratan data yang tersimpan.

 Ketersediaan (Availability)
Dengan semakin banyaknya data yang tersimpan,
ruang penyimpanan yang digunakan juga butuh
lebih besar, maka untuk mengatasi hal tersebut
data dapat di pisah-pisahkan menurut kebutuhan.
Data yang sudah lama tidak diakses dapat di - off
line – kan. Tapi data tersebut sewaktu-waktu dapat
dipergunakan kembali.

 Kelengakapan (Completeness)
Kelengkapan suatu data bersifat relatif. Bila
seoarng pemakai menyatakan data tersebut sudah
lengkap belum tentu menurut pengguna yang lain.
Untuk mengatasi hal tersebut, pengguna dapat
menambahkan record-record data juga dapat
merubah struktur dalam database tersebut.

 Keamanan (Security)
Untuk melakukan akses pada suatu data tertentu
dapat diterapkan tingkatan-tingakatan dalam
pengamanan data. User dapat dibatasi hak
aksesnya. User dengan tingkat paling rendah
hanya dapat melihat isi data saja, tapi user

94

dengan tingkatan lebih tinggi dapat melakukan hal
lain.

 Kebersamaan Pemakaian (Sharability)
Data pada suatu database dapat dipergunakan
secara bersama. Database yang dibangun dengan
software yang mendukung penggunaan bersama
dapat mendukung sistem ini, tetapi tetap menjaga
supaya database tidak menjadi deadlock.

Selain ketujuh tujuan diatas, yang terpenting dengan
adanya database adalah konsistensi data.

95

5Cara Penggunaan Database di Website Seperti yang dibahas di ocehan sebelumnya. // Check connection if ($conn->connect_error) { die("Connection failed: " . } echo "Connected successfully". $password = "password". caranya adalah sebagai berikut : <?php $servername = "localhost". $username = "username". $conn- >connect_error). ?> 96 . $username. Awal mula yang harus dilakukan untuk menerapkan database pada suatu website adalah dengan membuat koneksi antara web ke database.8. penerapan database pada suatu website diperlukan sebuah fungsi PHP yang dituliskan di web tersebut. // Create connection $conn = new mysqli($servername. $password).

// Create connection $conn = new mysqli($servername.com')". username. "<br>" . // Check connection if ($conn->connect_error) { die("Connection failed: " . $username. $sql . perhatikan skrip berikut : <?php $servername = "localhost". ?> Banyak fungsi dalam PHP yang digunakan untuk menerapkan database dalam sebuah website tapi 97 . } $sql = "INSERT INTO MyGuests (firstname. $dbname = "myDB". email) VALUES ('John'. $dbname). if ($conn->query($sql) === TRUE) { echo "New record created successfully". 'john@example. $conn->connect_error). lastname. } else { echo "Error: " . Setelah koneksi berhasil salah satu fungsi yang paling sering dipakai adalah membuat fungsi untuk menginputkan apa yang didapat di web kemudian dimasukkan ke database. $conn->error. yang perlu dilakukan pada skrip PHP diatas adalah mengganti servername. dan password menjadi sesuai dengan database yang ingin dikoneksikan. } $conn->close(). $password. $password = "password". 'Doe'. $username = "username".

diocehan ini hanya dibahas yang paling penting yaitu mengkoneksikan dan menginputkan data sehingga ocehan tentang database dirasa cukup dan akan dilanjutkan oleh ocehan berikutnya yang membahas tentang AJAX. 9th Ocehan Pengenalan Tentang AJaX Mengenai apa itu AJaX dan seluk-beluknya 98 .

Ajax merupakan kombinasi dari :  DOM yang diakses dengan client side scripting language. sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. plain text. Hal ini akan meningkatkan interaktivitas. kecepatan.9. dan usability. Pada beberapa framework AJAX. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer.  XML umumnya digunakan sebagai dokumen transfer. melakukan pertukaran data dengan server di belakang layar. adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. atau disingkat AJaX.1Pengertian AJaX Asynchronous JavaScript and XMLHTTP. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM 99 . walaupun format lain juga memungkinkan. element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server. seperti VBScript dan implementasi ECMAScript seperti JavaScript dan JScript. seperti HTML. untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan  Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser.

mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah Seperti halnya DHTML. melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. teknologi turunan/komposit yang berdasarkan Ajax.  JSON dapat menjadi pilihan alternatif sebagai dokumen transfer. Ajax bukanlah teknologi spesifik. Asinkron berarti client bisa meminta layanan dari server setiap saat dan tidak perlu menunggu server melayaninya seluruh halaman. LAMP. Berikut adalah skema perbedaan tanpa menggunakan ajax dan menggunakan ajax. Bahkan. Ajax merupakan suatu teknik / metode pengambilan data dari server menggunakan sebuah fungsi dalam javascript yaitu : XMLHttpRequest (XHR) XMLHttpRequest (XHR) merupakan object yang dirancang untuk memungkinkan permintaan layanan ke HTTP server secara asinkron. atau SPA. 100 . seperti AFLAX sudah mulai bermunculan.

101 .

ready(function(){ $("button").txt").googleapis.click(function(){ $("#div1"). </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Berikut terdapat tabelContent</button> tentang fungsi atau metode pada AJaX : </body> </html> 102 .min.11.com/ajax/libs/jquery/1. 9. }).2Penggunaan AJaX Berikut adalah source code contoh penggunaan AjaX : <!DOCTYPE html> <html> <head> <script src="http://ajax. }).3 /jquery.js"></script> <script> $(document).load("demo_test.

Ocehan selanjutnya akan membahas tentang pembuatan web yang dapat dibuka di layar kecil atau smartphone dan layar besar atau PC dengan memanfaatkan CSS yang biasa disebut dengan responsive web. 103 .Sekian mengenai ocehan tentang AJaX.

10th Ocehan Pembuatan Web Responsive Mengenai apa itu Responsive Web dan bagaimana cara membuat web yang tampilannya dapat menyesuaikan ukuran layar 104 .

video) serta query media CSS3. Mari kita bahas lebih lengkap tentang responsif web desain dibawah ini Istilah responsive berkaitan dengan bagaimana browser merespon lingkungan sekitarnya. Dalam kaitan ini respon browser terhadap perangkat apa atau layar ukuran berapa yang membuka halaman web tertentu. 105 .10. piranti atau ukuran layar). konten yang fleksibel (image.1 Pengenalan Web Responsive Saat membuat desain web dari materi materi yang sebelumnya telah dibahas yang perlu diperhatikan adalah siapa pengguna dari web yang nantinya telah jadi tersebut. teks. Tentu di jaman yang serba gadget ini tidak sedikit orang yang membuka halaman web lewat smartphone mereka bahkan ada beberapa orang yang justru malas untuk membuka lewat pc atau laptop. versi mobile dan versi desktop agar dapat memudahkan pengguna untuk melihat halaman web tersebut baik dari layar kecil seukuran smartphone ataupun layar standart seukuran laptop. Oleh karena itu desain web dibutuhkan dua versi. Pendekatan desain responsive akan membuat layout website mudah diadaptasi menggunakan grid yang fleksibel. Desain responsive berkaitan bagaimana website dikembangkan menyesuaikan dengan lingkunagn pengaksesnya (browser. Tapi apakah perlu untuk mendesain web dua kali untuk mendapatkan tampilan desktop dan tampilan mobile ? tentu tidak dengan css semua tersebut dapat dilakukan hanya dengan sekali kerja saja yaitu dengan cara membuat desain web kita menjadi responsif dengan memanfaatkan fitur dari css.

dimana website akan mengubah layout berdasarkan deklarasi media query. Misal saat full screen ukuran 1024 x 800 px dan ketika itu website ukuran fix 960 px hingga 980 px.com Viewport adalah tampilan dimana website terlihat sebelum HTML5 dan CSS3. Terdiri dari baris horisontal dan kolom vertikal untuk 106 . Viewport diset melalui meta tag Breakpoint di desain responsive adalah nilai lebar. Artinya lebar dari beberapa bagian dari website merupakan prosentase dari viewport. misal tablet (768 – 992 px)  Piranti medium. misal netbook (992 – 1200 px)  Piranti besar. misal komputer desktop (> 1200 px) Sistem grid adalah struktur layout website. Sehingga untuk ukuran piranti mobile terlalu lebar. umumnya website dilihat dalam ukuran browser. Umumnya web responsive memiliki dua atau lebih breakpoint tergantung kepada breakpoint yang ditujukan untuk piranti tertentu. namun dibangun dengan fleksibel. Jadi yang dimaksud desain responsive adalah : Bahwa semua display harus menerima konten yang sama.headlondon.  Piranti sangat kecil. Contoh web desain responsive adalah www. Desain responsive akan menghindari unit yang fix seperti pixel. Solusinya mengeset viewport lebih lebar dari piranti sehingga website akan di skala menjadi lebih kecil dan perlu zoom untuk melihat lebih detail. dan menggunakan unit yang relatif seperti prosentase. misal telepon (<768 px)  Piranti kecil. sehingga mengoptimalkan tampilan untuk tiap piranti.

107 .com/csswizardry- grids/)  Blueprint (http://blueprintcss.org/) Gambar dibawah ini merupakan salah satu contoh struktur grid.io/css-smart- grid/)  960 GS (http://960.menampung konten yang bisa menjangkau satu kolom atau lebih.com/)  CSS Smart Grid (http://dryan.github. Contoh Grid CSS open source:  Fulidable (http://fluidable.gs/)  CSS Wizardry (http://csswizardry.

Layout. Bootstrap juga sudah terdapat jQuery plugins untuk komponen UI (User Interface) seperti Transitions.10. Form. Template Dasar: <html> <head> <title>Template HTML</title> </head> <body> Halo Dunia </body> </html> 108 . Tab. Carousel dll. Dropdown. Scrollspy. Navigation. Alert. Typography. Tooltip. dan lain-lain. Button. Modal. Table. Popover.2 Bootstrap Untuk Membuat Responsive Web Bootstrap terdiri dari HTML dan CSS untuk menghasilkan Grid.

109 .

css" rel="stylesheet"> </head> <body> Halo Bootstrap <script src="https://ajax.11.js"></script> </body> </html> .js"></script> <script src="js/bootstrap.min.Template Dasar Bootstrap : <html> <head> <title>Template HTML</title> <meta name="viewport" content="width=device-width.js"></script> 110 <script src="js/bootstrap.Bootstrap CSS--> <link href="css/bootstrap.min.min.com/ajax/libs/jquery/ 1.Bootstrap CSS--> <link href="css/bootstrap.js"></script> </body> </html> Template Dasar Bootstrap dengan Responsive : <html> <head> <title>Template HTML</title> <meta name="viewport" content="width=device-width.css" rel="stylesheet"> <!-.min. 1/jquery. initial-scale=1"> <!-.com/ajax/libs/jquery/1. initial-scale=1"> <!-.min.min.1/jquery.googleapis.Bootstrap Responsive CSS--> <link href="css/bootstrap-responsive.googleapis.css" rel="stylesheet"> </head> <body> Halo Bootstrap <script src="https://ajax.11.min.

min.bootstrapcdn.3. Fungsi dari bootstrap sendiri yang paling dibutuhkan dalam membuat responsive web adalah pembuatan navigation bar yang responsive.</p> </div> </body> </html> .com/bootstrap/3.4/css/boot strap.js"></script> <script src="http://maxcdn.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Basic Navbar Example</h3> 111 <p>A navigation bar is a navigation header that is placed at the top of the page.googleapis.min.11. simak source code berikut untuk mengetahui : <html> <head> <link rel="stylesheet" href="http://maxcdn.min.com/bootstrap/3.4/js/bootst rap.com/ajax/libs/jquery/1.css"> <script src="https://ajax.3.3/jque ry.bootstrapcdn.

Hasil jadinya akan nampak seperti dibawah ini apabila dibuka di layar laptop standart : Dan akan terlihat seperti ini jika dilihat menggunakan layar yang jauh lebih kecil : 112 .

Demikian ocehan terakhir pemrograman web yang berakhir pada pembahasan tentang responsive web. 113 . berharap dapat bermanfaat dalam pembuatan suatu website bagi siapapun yang membacanya.

168. 2016. JavaScript Library / Framework [PowerPoint Slides].8/mi15/materikuliah/internet- 114 . Bisma. http://192. DAFTAR PUSTAKA Andre.html (diakses pada tanggal: 1 September 2016). JavaScript [PowerPoint Slides].html (diakses pada tanggal: 8 September 2016). 2016.8/mi15/materikuliah/internet- pemprograman/js.10. http://192. 2016. 2016. Index Tutorial Belajar PHP Duniailkom.168. Kurniawan.10.duniailkom. http://www.8/mi15/materikuliah/internet- pemprograman/css. Bisma. CSS [PowerPoint Slides].8/mi15/materikuliah/internet- pemprograman/html. Andre. http://192. Bisma. Ari.html (diakses pada tanggal: 8 September 2016).com/tutorial-belajar-php-dan- index-artikel-php/ (diakses pada tanggal: 22 Oktober 2016). Rahadian. 2015.168.com/tutorial-belajar-mysql- dan-index-artikel-mysql/ (diakses pada tanggal: 27 Oktober 2016). Index Tutorial Belajar MySql Duniailkom. http://192.duniailkom. http://www. HTML [PowerPoint Slides]. Rahadian.168.10. Rahadian.10. 2016.

JavaScript Tutorial. Tanpa Tahun. HTML Responsive Web Design.com/bootstrap (diakses pada tanggal: 31 Oktober 2016).com/css (diakses pada tanggal: 7 Oktober 2016). w3schools. http://www.w3schools. Tanpa Tahun. w3schools.com.com. PHP 5 Tutorial.w3schools. http://www.com/js (diakses pada tanggal: 14 Oktober 2016).com/jquery (diakses pada tanggal: 15 Oktober 2016). http://www.w3schools.asp (diakses pada tanggal: 2 November 2016).w3schools. HTML5 Tutorial.com/html (diakses pada tanggal: 3 Oktober 2016). Tanpa Tahun.w3schools. pemprograman/jquery.com.com/php (diakses pada tanggal: 22 Oktober 2016).com. w3schools. Bootstrap 3 Tutorial. CSS Tutorial.w3schools. 115 .com.com. http://www. w3schools.com. http://www.w3schools. w3schools. http://www. w3schools. Tanpa Tahun. w3schools.pptx (diakses pada tanggal: 3 Oktober 2016).com/html/html_responsive. Tanpa Tahun. Tanpa Tahun. http://www. jQuery Tutorial. Tanpa Tahun.

SQL Tutorial.com/sql (diakses pada tanggal: 24 Oktober 2016).com.w3schools. http://www. Tanpa Tahun. 116 .w3schools.

S. 117 ..Kom. Buku yang ditulis ini merupakan buku pertama kali yang ditulis oleh penulis sehingga ada tantangan dan pengalaman baru bagi penulis. SMA di SMAN 1 Gedangan. F Lahir di Surabaya 15 Oktober 1997. Buku ini terselesaikan untuk memenuhi Tugas Akhir mata kuliah Pemrograman Web dari Rahadian Bisma. dan sekarang berkuliah di UNIVERSITAS NEGERI SURABAYA Jurusan Teknik Informatika. TENTANG PENULIS iqy Ainuzzaqy. SMP di SMPN 1 Sedati. Menyelesaikan Sekolah Dasar di SD Hang Tuah 10 Juanda.Kom. Program Studi D3 Manajemen Informatika.M.

Semoga buku ini menajdi bahan referensi bagi anda yang membaca dan semoga bermanfaat.  118 . Selamat Membaca.