Desain Web by Den Andri

Desain Web Buku Pegangan untuk Mahasiswa (Student Handbook)

SEAMEO Regional Open Learning Centre (SEAMOLEC) Kompleks Universitas Terbuka Jl. Cabe Raya, Pondok Cabe, Pamulang - 15418, INDONESIA Phone: (62-21) 7422184, Fax: (62-21) 7422276

Pengembang Muhammad Andriansyah Abbas Supardi Chandra Bagus SP Dimas Fakhrudin Puspa Hariani Penelaah Abbas Supardi Penyunting Bahasa Muhammad Andriansyah Layout Muhammad Andriansyah ISBN

Kata Pengantar

Dewasa ini, dunia internet dan website merupakan salah satu kunci penyebaran informasi bagi kebutuhan personal, instansi, maupun bisnis. Sebuah website merupakan identitas online yang dapat menampilkan informasi Anda ke dunia internet. Desain website yang user-friendly dan menarik tentunya dapat meningkatkan efektifitas informasi produk atau jasa yang ingin Anda sharing. Salah satu komponen pembelajaran sistem Pendidikan Jarak Jauh (PJJ) adalah tersedianya bahan belajar mandiri. Dalam memberikan informasi mengenai pengembangan desain web untuk kebutuhan personal, bisnis, maupun instansi, maka SEAMOLEC menerbitkan buku â&#x20AC;&#x153;Desain Webâ&#x20AC;?. Diharapkan melalui buku ini dapat digunakan untuk mendukung belajar mandiri metoda PJJ, khususnya dalam pemahaman pengembangan desain web sesuai kaidah-kaidah yang tepat dan prosedural. Kami sampaikan terima kasih atas upaya dan kerja keras tim penyusun sehingga dapat terselesaikan dan diterbitkannya buku ini. Semoga buku ini dapat bermanfaat dan memberikan informasi yang dibutuhkan oleh kita semua. Januari 2013 Direktur SEAMOLEC, Dr. Gatot Hari Priowirjanto

Daftar Isi Kata Pengantar ........................................................................................................................ i Daftar Isi ................................................................................................................................... ii Daftar Tabel ............................................................................................................................. v Daftar Gambar ......................................................................................................................... v 1. Pengenalan Internet ...................................................................................................... 1 Pengertian ........................................................................................................................................... 1 Sejarah Internet ................................................................................................................................ 2 Tersambung ke Internet ................................................................................................................ 3

2. Pengenalan World Wide Web (WWW) .................................................................... 4 Pemanfaatan Internet ..................................................................................................................... 6

3. Pengenalan Dasar HTML ............................................................................................ 10 Apa itu HTML? .................................................................................................................................. 10 Bagaimana Membuat File HTML? .............................................................................................. 10 Struktur Dasar HTML .................................................................................................................... 11

4. Pengenalan Dasar XHTML ......................................................................................... 14 Perbedaan HTML dan XHTML .................................................................................................... 14

5. Pengenalan HTML5 ...................................................................................................... 16 Bagaimana HTML5 dimulai? ....................................................................................................... 16 Fitur Baru dalam HTML5 .............................................................................................................. 16

6. Pengenalan Web Development Tools ...................................................................... 18 7. Jenis Web Development Tools .................................................................................. 19 Design Grafis ..................................................................................................................................... 19 Prinsip dan Unsur Desain ...................................................................................................................... 20 Software Desain Grafis yang Digunakan dalam Desain Web ................................................. 20 Animasi ............................................................................................................................................... 21 Flash dan Animasi Web .......................................................................................................................... 21 Editor HTML ...................................................................................................................................... 21 Pengenalan Microsoft FrontPage ....................................................................................................... 22 Pengenalan Dreamweaver .................................................................................................................... 22 Pengenalan NotePad ................................................................................................................................ 25

8. Pengenalan CSS .............................................................................................................. 30 Cara Penulisan CSS ......................................................................................................................... 30 Inline style sheet ........................................................................................................................................ 30 Embedded Style Sheet ............................................................................................................................. 31 Linked Style Sheet ..................................................................................................................................... 31

Aturan Penulisan CSS .................................................................................................................... 32 Komentar Dalam CSS ..................................................................................................................... 35 Pemakaian Elemen Style .............................................................................................................. 35

9. Pengertian XML ............................................................................................................. 43 Kenapa Harus Menggunakan XML? .......................................................................................... 44 Bagian-‐Bagian dari Dokumen XML ........................................................................................... 45 Sintaks XML ....................................................................................................................................... 47

10. Pengenalan Java Script ............................................................................................... 54 Pengertian Java Script ................................................................................................................... 54

11. Fungsi JQuery di Javascript ....................................................................................... 56 12. AJAX .................................................................................................................................. 58 13. Pengenalan Web Server ............................................................................................. 61 Pengertian Web Server ................................................................................................................. 61 Cara Kerja Web Server ............................................................................................................................ 62 Langkah–langkah Konfigurasi Web Server .................................................................................... 63

14. Pengenalan Xampp ...................................................................................................... 64 15. Pengenalan Database .................................................................................................. 71 Pengertian Database ...................................................................................................................... 71 Definisi Dasar Struktur Database .............................................................................................. 71

16. Fungsi Database Dalam SQL ..................................................................................... 72 Fungsi-‐fungsi MySQL ...................................................................................................................... 73

17. Pengenalan PHP ........................................................................................................... 77 Pengertian PHP ................................................................................................................................ 77 Sejarah ................................................................................................................................................ 77 Kelebihan Dari Bahasa Pemrograman Lain ........................................................................... 78 Penggunaan Dasar PHP ................................................................................................................ 79 Array ................................................................................................................................................... 80 Variable .......................................................................................................................................................... 82 Struktur Kontrol ........................................................................................................................................ 82

18. Pengenalan Web Service ............................................................................................. 87 19. Arsitektur Web Service ............................................................................................... 88 Operasi-‐Operasi Web Service ..................................................................................................... 88 Komponen-‐Komponen Web Service ......................................................................................... 89

20. Pengenalan Web 2.0 .................................................................................................... 91 Prinsip Web 2.0 ............................................................................................................................... 92 Karakteristik Web 2.0 ................................................................................................................... 92 Perbedaan Antara Web 1.0 dan Web 2.0 ................................................................................ 94

21. Pengenalan Web 3.0 .................................................................................................... 96 Teknologi Web 2.0 dan Bayangan Web 3.0 ............................................................................ 97

iii

Konsep Web 3.0 ............................................................................................................................... 98

Daftar Pustaka ................................................................................................................... 101

Daftar Tabel Tabel 1. Tabel menjelaskan nilai yang akan dikembalikan oleh berbagai perintah get. Memisahkan informasi dalam obyek Date. ........................................... 56 Tabel 2. Komponen Web Service ......................................................................... 89 Tabel 3. Transformasi web 1.0 menjadi Web 2.0 ................................................ 96

Daftar Gambar Gambar 1. Tampilan Save As pada Notepad ........................................................ 12 Gambar 2. Save As file sebagai index.html .......................................................... 13 Gambar 3. Tampilan Browser hasil pembuatan kode dasar HTML melalui Notepad .......................................................................................................... 13 Gambar 4. Motion dalam Animasi ....................................................................... 21 Gambar 5. Pengenalan Ms FrontPage ..................................................................22 Gambar 6. Layout kerja Dreamweaver ................................................................23 Gambar 7. Document Toolbar. Digunakan untuk mengatur tampilan kerja (tampilan script saja, tampilan script dan desain, atau hanya tampilan desain) ............................................................................................................24 Gambar 8. Halaman Dreamweaver terpisah ke dalam tab-tab tertentu. Masingmasing tab dapat ditutup, dikecilkan, atau disembunyikan tampilannya. .. 25 Gambar 9. Notepad sebagai simple text editor untuk membuat kode HTML ....26 Gambar 10. Tampilan Jendela Notepad++ ......................................................... 28 Gambar 11. Contoh tag-tag yang dibuat sendiri sesuai keinginan dalam XML.. 44 Gambar 12. Contoh Dokumen XML .................................................................... 46 Gambar 13. Root Tag XML .................................................................................. 48 Gambar 14. Pesan Error pada XML karena kesalahan penulisan tag ................ 49 Gambar 15. Cara kerja web server ........................................................................62 Gambar 16. Instalasi XAMPP ............................................................................... 67 Gambar 17. Mengaktifkan Apache dan MySQL melalui XAMPP Control Panel 68 Gambar 18. Halaman XAMPP pada web browser............................................... 68 Gambar 19. Halaman Phpmyadmin pada web browser...................................... 69 Gambar 20. Arsitektur Web Service .................................................................... 88 Gambar 21. Perbedaan Web 1.0 vs Web 2.0. Sumber: http://www.sizlopedia.com/2007/08/18/web-10-vs-web-20-the-visualdifference/ ..................................................................................................... 95

Topik

Pengenalan Internet dan World Wide Web (WWW) 1. Pengenalan Internet Pengertian Internet (Inter-Network) merupakan sekumpulan jaringan komputer yang menghubungkan situs akademik, pemerintahan, komersial, organisasi, maupun perorangan. Internet menyediakan akses untuk layanan telekomunikasi dan sumber daya informasi untuk jutaan pemakainya yang tersebar di seluruh dunia. Layanan internet meliputi komunikasi langsung (email, chat), diskusi (Usenet News, email, milis), sumber daya informasi yang terdistribusi (World Wide Web, Gopher), remote login dan lalu lintas file (Telnet, FTP), dan aneka layanan lainnya. Jaringan yang membentuk internet bekerja berdasarkan suatu set protokol standar yang digunakan untuk menghubungkan jaringan komputer dan mengalamati lalu lintas dalam jaringan. Protokol ini mengatur format data yang diizinkan, penanganan kesalahan (error handling), lalu lintas pesan, dan standar komunikasi lainnya. Protokol standar pada internet dikenal sebagai Transmission Control Protocol/Internet Protocol (TCP/IP). Protokol ini memiliki kemampuan untuk bekerja diatas segala jenis komputer, tanpa terpengaruh oleh perbedaan perangkat keras maupun sistem operasi yang digunakan. Sebuah sistem komputer yang terhubung secara langsung ke jaringan memiliki nama domain dan alamat Internet Protocol (IP) dalam bentuk numerik dengan format tertentu sebagai pengenal. Internet juga memiliki gateway ke jaringan dan layanan yang berbasis protokol lainnya. 1

Sejarah Internet Cikal bakal jaringan Internet yang kita kenal saat ini pertama kali dikembangkan tahun 1969 oleh Departemen Pertahanan Amerika Serikat dengan nama US Defense Advanced Research Projects Agency (ARPAnet). ARPAnet dibangun dengan sasaran untuk membuat suatu jaringan komputer yang tersebar untuk menghindari pemusatan informasi di satu titik yang dipandang rawan untuk dihancurkan apabila terjadi peperangan. Dengan cara ini diharapkan apabila satu bagian dari jaringan terputus, maka jalur yang melalui jaringan tersebut dapat secara otomatis dipindahkan ke saluran lainnya. Di awal 1980-an, ARPANET terpecah menjadi dua jaringan, yaitu ARPANET dan Milnet (sebuah jaringan militer), akan tetapi keduanya mempunyai hubungan sehingga komunikasi antar jaringan tetap dapat dilakukan. Pada mulanya jaringan interkoneksi ini disebut DARPA Internet, tapi lama-kelamaan disebut sebagai Internet saja. Sesudahnya, internet mulai digunakan untuk kepentingan akademis dengan menghubungkan beberapa perguruan tinggi, masing-masing UCLA, University of California at Santa Barbara, University of Utah, dan Stanford Research Institute. Ini disusul dengan dibukanya layanan Usenet dan Bitnet yang memungkinkan internet diakses melalui sarana komputer pribadi (PC). Berkutnya, protokol standar TCP/IP mulai diperkenalkan pada tahun 1982, disusul dengan penggunaan sistem Domain Name Service (DNS) pada 1984. Di tahun 1986 lahir National Science Foundation Network (NSFNET), yang menghubungkan para periset di seluruh negeri dengan 5 buah pusat super komputer. Jaringan ini kemudian berkembang untuk menghubungkan berbagai jaringan akademis lainnya yang terdiri atas universitas dan konsorsiumkonsorsium riset. NSFNET kemudian mulai menggantikan ARPANET sebagai jaringan riset utama di Amerika hingga pada bulan Maret 1990 ARPANET secara resmi dibubarkan. Pada saat NSFNET dibangun, berbagai jaringan internasional didirikan dan dihubungkan ke NSFNET. Australia, negara-negara Skandinavia, Inggris, Perancis, jerman, Kanada dan Jepang segera bergabung kedalam jaringan ini. Pada awalnya, internet hanya menawarkan layanan berbasis teks, meliputi remote access, email/messaging, maupun diskusi melalui newsgroup (Usenet). Layanan berbasis grafis seperti World Wide Web (WWW) saat itu masih belum 2

ada. Yang ada hanyalah layanan yang disebut Gopher yang dalam beberapa hal mirip seperti web yang kita kenal saat ini, kecuali sistem kerjanya yang masih berbasis teks. Kemajuan berarti dicapai pada tahun 1990 ketika WWW mulai dikembangkan oleh CERN (Laboratorium Fisika Partikel di Swiss) berdasarkan proposal yang dibuat oleh Tim Berners-Lee. Namun demikian, WWW browser yang pertama baru lahir dua tahun kemudian, tepatnya pada tahun 1992 dengan nama Viola. Viola diluncurkan oleh Pei Wei dan didistribusikan bersama CERN WWW. Tentu saja web browser yang pertama ini masih sangat sederhana, tidak secanggih browser modern yang kita gunakan saat ini. Terobosan berarti lainnya terjadi pada 1993 ketika InterNIC didirikan untuk menjalankan layanan pendaftaran domain. Bersamaan dengan itu, Gedung Putih (White House) mulai online di Internet dan pemerintah Amerika Serikat meloloskan National Information Infrastructure Act. Penggunaan internet secara komersial dimulai pada 1994 dipelopori oleh perusahaan Pizza Hut, dan Internet Banking pertama kali diaplikasikan oleh First Virtual. Setahun kemudian, Compuserve, America Online, dan Prodigy mulai memberikan layanan akses ke Internet bagi masyarakat umum. Sementara itu, kita di Indonesia baru bisa menikmati layanan Internet komersial pada sekitar tahun 1994. Sebelumnya, beberapa perguruan tinggi seperti Universitas Indonesia telah terlebih dahulu tersambung dengan jaringan internet melalui gateway yang menghubungkan universitas dengan network di luar negeri.

Tersambung ke Internet Untuk tersambung ke jaringan internet, pengguna harus menggunakan layanan khsus yang disebut Internet Service Provider (ISP). Media yang umum digunakan adalah melalui saluran telepon (dikenal sebagai PPP, Point to Point Protocol). Pengguna memanfaatkan komputer yang dilengkapi dengan modem (modultor and demodulator) untuk melakukan dialup ke server milik ISP. Begitu tersambung ke server ISP, komputer si pengguna sudah siap digunakan untuk mengakses jaringan internet. Pelanggan akan dibebani biaya pulsa telepon plus layanan ISP yang jumlahnya bervariasi tergantung lamanya koneksi. 3

Saluran telepon via modem bukan satu-satunya cara untuk tersambung ke layanan internet. Sambungan juga dapat dilakukan melalui saluran dedicated line, seperti Integrated System Digital Network (ISDN) dan Asymetric Digital Subscriber Line (ADSL), maupun via satelit melalui Very Small Aperture Terminal (VSAT). Sayangnya, alternatif-alterantif ini terhitung cukup mahal untuk ukuran pelanggan perorangan. Dewasa ini, saluran-saluran alternatif untuk akses internet yang lebih terjangkau masih terus dikembangkan. Diantara alternatif yang tersedia adalah melalui gelombang radio (radio modem), maupun lewat saluran TV kabel yang saat ini sedang marak. Alternatif lain yang saat ini sedang dikaji adalah dengan menumpangkan aliran data pada saluran kabel listrik PLN. Di Indonesia, teknologi ini sedang diuji cobakan oleh PLN di Jakarta, sementara di negaranegara maju konon sudah mulai dimasyarakatkan. Belakangan, internet juga dikembangkan untuk aplikasi wireless (tanpa kabel) dengan memanfaatkan telepon seluler. Untuk ini digunakan protokol Wireless Aplication Protocol (WAP) merupakan hasil kerjasama antar industri untuk membuat sebuah standar yang terbuka (open standard) yang berbasis pada standar Internet, dan beberapa protokol yang sudah dioptimasi untuk lingkungan wireless. WAP bekerja dalam modus teks dengan kecepatan sekitar 9,6 kbps. Selain WAP, juga dikembangkan General Packet Radio Service (GPRS) sebagai salah satu standar komunikasi wireless. Dibandingkan dengan protokol WAP, GPRS memiliki kelebihan dalam kecepatannya yang dapat mencapai 115 kbps dan adanya dukungan aplikasi yang lebih luas, termasuk aplikasi grafis dan multimedia.

2. Pengenalan World Wide Web (WWW) Dewasa ini, World Wide Web (WWW) atau yang sering disebut sebagai "web" adalah merupakan aplikasi internet yang paling populer. Demikian populernya hingga banyak orang yang keliru mengidentikkan web dengan internet.

Secara teknis, web adalah sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain yang tersimpan dalam sebuah internet webserver dipresentasikan dalam bentuk hypertext. Informasi di web dalam bentuk teks umumnya ditulis dalam format Hypertext Markup Language (HTML). Informasi lainnya disajikan dalam bentuk grafis (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti: MIDI, Shockwave, Quicktime Movie, 3D World). Web dapat diakses oleh perangkat lunak web client yang secara populer disebut sebagai browser. Browser membaca halaman-halaman web yang tersimpan dalam webserver melalui protokol yang disebut Hypertext Transfer Protocol (HTTP). Dewasa ini, tersedia beragam perangkat lunak browser. Beberapa diantaranya cukup populer dan digunakan secara meluas, contohnya seperti: Microsoft Internet Explorer, Netscape Navigator, maupun Opera, namun ada juga beberapa produk browser yang kurang dikenal dan hanya digunakan di lingkungan yang terbatas. Sebagai dokumen hypertext, dokumen-dokumen di web dapat memiliki tautan (link) dengan dokumen lain, baik yang tersimpan dalam webserver yang sama maupun di webserver lainnya. Link memudahkan para pengakses web berpindah dari satu halaman ke halaman lainnya, dan "berkelana" dari satu server ke server lain. Kegiatan penelusuran halaman web ini biasa diistilahkan sebagai browsing, ada juga yang menyebutnya sebagai berselancar (surfing). Seiring dengan semakin berkembangnya jaringan internet di seluruh dunia, maka jumlah situs web yang tersedia juga semakin meningkat. Hingga saat ini, jumlah halaman web yang bisa diakses melalui internet telah mencapai angka miliaran. Untuk memudahkan penelusuran halaman web, terutama untuk menemukan halaman yang memuat topik-topik yang spesifik, maka para pengakses web dapat menggunakan suatu mesin pencari (search engine). Penelusuran berdasarkan search engine dilakukan berdasarkan kata kunci (keyword) yang kemudian akan dicocokkan oleh search engine dengan database (basis data) miliknya. Dewasa ini, search engine yang sering digunakan antara lain adalah Google (www.google.com) dan Yahoo (www.yahoo.com).

Pemanfaatan Internet Dewasa ini, penggunaan internet telah merasuki hampir semua aspek kehidupan, baik sosial, ekonomi, pendidikan, hiburan, bahkan keagamaan. Pendeknya apa saja yang dapat terpikirkan! Para akademisi merupakan salah satu pihak yang paling diuntungkan dengan kemunculan internet. Aneka referensi, jurnal, maupun hasil penelitian yang dipublikasikan melalui internet tersedia dalam jumlah yang berlimpah. Para mahasiswa tidak lagi perlu mengaduk-aduk buku di perpustakaan sebagai bahan untuk mengerjakan tugas-tugas kuliah. Cukup dengan memanfaatkan search engine, materi-materi yang relevan dapat segera ditemukan. Selain menghemat tenaga dalam mencarinya, materi-materi yang dapat ditemui di internet cenderung lebih up-to-date. Buku-buku teks konvensional memiliki rentang waktu antara proses penulisan, penerbitan, sampai ke tahap pemasaran. Kalau ada perbaikan maupun tambahan, itu akan dimuat dalam edisi cetak ulangnya, dan itu jelas membutuhkan waktu. Kendala semacam ini nyaris tidak ditemui dalam publikasi materi ilmiah di internet mengingat mengupload sebuah halaman web tidaklah sesulit menerbitkan sebuah buku. Akibatnya, materi ilmiah yang diterbitkan melalui internet cenderung lebih aktual dibandingkan yang diterbitkan dalam bentuk buku konvensional. Kelebihan sarana internet yang tidak mengenal batas geografis juga menjadikan internet sebagai sarana yang ideal untuk melakukan kegiatan belajar jarak jauh, baik melalui kursus tertulis maupun perkuliahan. Tentu saja ini menambah panjang daftar keuntungan bagi mereka yang memang ingin maju dengan memanfaatkan sarana internet. Internet juga berperan penting dalam dunia ekonomi dan bisnis. Dengan hadirnya e-commerce, kegiatan bisnis dapat dilakukan secara lintas negara tanpa pelakunya perlu beranjak dari ruangan tempat mereka berada. 6

Internet juga merambah bidang keagamaan, bidang yang biasanya jarang mengadaptasi perkembangan teknologi. Disini internet dimanfaatkan untuk sarana dakwah maupun diskusi-diskusi keagamaan. Di Indonesia, jaringanjaringan seperti Isnet (Islam) maupun ParokiNet (Katolik) telah lama beroperasi dan memberikan manfaat yang besar bagi umat. Kegiatan sosial seperti pengumpulan zakat dan infaq dapat dilaksanakan secara cepat melalui sarana internet. Bagi mereka yang gemar bersosialisasi atau mencari sahabat, internet menawarkan berjuta kesempatan. Baik melalui email maupun chatroom, para pengguna internet dapat menjalin komunikasi dengan rekan-rekannya di segala penjuru dunia dalam waktu singkat dan biaya yang relatif murah. Apabila dalam surat menyurat konvensional yang menggunakan jasa pos, sebuah surat bisa menghabiskan waktu berminggu-minggu dalam perjalanan lintas benua, maka sebuah email hanya membutuhkan hitungan detik untuk dapat menjangkau segala sudut dunia. Biaya komunikasi lintas benua dapat lebih ditekan lagi. Dengan hadirnya teknologi Voice over Internet Protocol (VoIP), pengguna telepon tidak lagi perlu mengeluarkan biaya sambungan telepon internasional yang sangat mahal untuk menghubungi kolega atau keluarga di luar negeri. Teknologi ini memungkinkan kita melakukan percakapan telepon internasional dengan ongkos yang hanya sedikit lebih mahal dari biaya pulsa telepon lokal. Bagi yang berniat mencari hiburan, internet menawarkan pilihan yang berlimpah. Dengan memanfaatkan game server, seseorang dapat bermain game bersama lawan dari negara lain melalui jaringan internet. Pecinta musik juga semakin dimanja dengan hadirnya klip-klip MP3 dari lagu-lagu favorit. Bagi yang haus akan informasi dari dunia entertainment, internet adalah surga dengan berlimpahnya situs-situs web para artis, baik nasional maupun internasional. Internet selain menawarkan manfaat, juga menyimpan kekurangan. Berlimpahnya informasi yang tersedia dari bermacam-macam sumber membuat para penggunainternet harus jeli dalam menyaring informasi karena sifatnya yang bebas, sehingga tidak sulit bagi pihak-pihak yang tidak bertanggung jawab untuk memajang informasi yang menyesatkan. Tidak semua informasi yang didapat melalui sarana internet terjamin akurasinya. Dalam hal ini, para

pengguna internet sangat dituntut kejeliannya agar tidak terlampau mudah percaya terhadap informasi-informasi yang tidak jelas, baik sumber maupun kredibilitas penyedianya. Pembajakan karya intelektual juga merupakan salah satu ekses negatif dalam penggunaan internet. Tahukan Anda bahwa format musik MP3 yang populer itu hampir semuanya ilegal? Dan materi ilegal semacam ini dapat dengan mudah menyebar berkat "jasa" internet.

â&#x20AC;&#x153;Terlepas dari segala ekses negatif tersebut, internet tetaplah hanya sekedar sarana. Internet hanyalah alat, bukan tujuan. Di tangan para penggunanyalah internet dapat memberikan manfaat ataupun sebaliknya.â&#x20AC;?

Disamping contoh-contoh diatas, masih tak terhitung lagi sisi gelap dari penggunaan internet. Tidak heran, beberapa negara yang terhitung "konservatif", seperti Arab Saudi dan China, membatasi secara ketat akses internet bagi warganya. Kemudahan dan kenyamanan dalam berkomunikasi via internet juga ditengarai membuat banyak netters kehilangan kesempatan, bahkan kemampuan, untuk berkomunikasi secara personal. Mereka tenggelam dalam keasyikan ber-chatting atau ber-email dengan teman di dunia maya hingga melupakan sosialisasi di dunia nyata.

Aktivitas Ice Breaking - Sesi perkenalan diri 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1. 2. 3.

Apakah internet itu? Apakah yang dimaksud dengan WWW? Tuliskan beberapa Internet Service Provider (ISP) di lokasi Anda dan lakukan komparasi fitur antar satu provider dengan provider lainnya.

Topik

Pengenalan Dasar HTML, XHTML, dan HTML5 3. Pengenalan Dasar HTML Apa itu HTML? Hypertext Markup Language (HTML) adalah salah satu format yang banyak dipakai dalam pembuatan dokumen halaman web. Sederhananya merupakan kode-kode tertentu yang disebut sintaks yang dituliskan ke dalam suatu file yang memberikan aturan main pada browserbagaimana dan seperti apa halaman dokumen tersebut ditampilkan. File HTML berekstensi *.html atau *.htm.

Bagaimana Membuat File HTML? Untuk membuat file HTML bisa dengan editor teks biasa seperti Notepad dll. namun pada saat sekarang telah banyak editor HTML yang memiliki tampilan bersifat WYSIWYG, seperti: Adobe Dreamweaver, Adobe GoLive, MS FrontPage yang bisa menampilakan file tersebut dalam bentuk sintaks HTML biasa maupun seperti apa yang akan ditampilkan browser. Jika Anda pemula, dianjurkan untuk membuat secara manual menggunakan Notepad atau Notepad++ dengan langsung mengetikkan kode demi kode HTML ke dalam file yang Anda buat. Kenapa? Jika menggunakan software tertentu Anda tidak akan terbiasa dengan tag HTML. Anda akan dimanjakan oleh tools yang digunakan dalam software tersebut untuk membuat tampilan halaman HTML, ini akan menyulitkan jika Anda ingin mengedit kembali file tersebut secara manual.

Struktur Dasar HTML Kode HTML harus berada dalam sebuah tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag>. Struktur dasar HTML berisi elemen-elemen atau tag sebagai berikut: <html> <head> <title>Judul Halaman/Caption</title> </head> <body> Isi web/konten </body> </html> Keterangan:

• •

• •

• •

• •

Mendefinisikan bahwa teks yang berada antara kedua tag tersebut adalah file HTML. Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META, dll. Sebagai titel atau judul halaman. Kalimat yang ada dalam tag ini akan tampil pada title bar browser Anda. Didalam tag inilah yang menjadi inti halaman web yaitu bagian yang akan ditampilkan sebagai isi halaman pada browser. Di dalam tag ini bisa diletakkan berbagai page attribute, seperti: bgcolor, background, text, link, vlink, alink, leftmargin, topmargin, dll.

Cara Membuat File HTML

• • •

Buat sebuah folder tempat menyimpan file HTML yang akan kita buat. Buka Notepad atau editor teks lainnya untuk lebih memudahkan. Jika menggunakan Notepad maka buatlah sebuah file teks baru. 11

•

Ketik kode dasar HTML pada contoh berikut: <html> <head> <title>HTML pertamaku</title> </head> <body> Ayo belajar HTML </body> </html>

Simpan halaman tersebut kedalam folder yang kita buat sebelumnya dan beri nama, misalnya index.html .

Gambar 1. Tampilan Save As pada Notepad

jika menggunakan Notepad pada pilhan ‘Save as Type’ pilih ‘All Files’.

Gambar 2. Save As file sebagai index.html

Dalam pemograman web Anda harus membuat sebuah file dengan nama index.html yang berfungsi sebagai file pertama yang akan dibuka, bila browser anda arahkan ke folder tersebut. Untuk nama file selanjutnya terserah Anda. Buka file yang telah disimpan tersebut dengan browser Anda. caranya dengan index.html > klik kanan > Open With > pilih salah satu browser, misalnya Internet Explore/Mozilla Firefox.

Gambar 3. Tampilan Browser hasil pembuatan kode dasar HTML melalui Notepad

Sampai pada tahap ini anda telah berhasil membuat sebuah file HTML, untuk lebih dalam lagi silahkan baca tulisan saya selanjutnya. Jika ada kendala mari kita diskusikan disini.

4. Pengenalan Dasar XHTML HTML adalah “bahasa” web yang sering digunakan oleh banyak orang. Sejak tahun 1990-an HTML dipergunakan untuk menghantarkan informasi dari satu komputer ke komputer lain melalui Web browser. Zaman mengalami perubahan, kini, posisi HTML akan digantikan dengan XHTML. Apakah itu XHTML?

•

XHTML singkatan dari Extensible Hipertext Markup Language adalah “bahasa baru” yang dibuat oleh World Wide Web Consortium (W3C) untuk menggantikan kedudukan HTML. Namun sebenarnya, XHTML adalah gabungan dari HTML dan XML. Sejak kelahirannya XHTML 1.0 pada tahun 2000, kemudian XHTML dirilis pada tahun 2001. Tentu saja dengan adanya XHTML tidak semata-mata hanya menggantikan. Tentunya XHTML memiliki kelebihan dibandingkan dengan HTML.

•

XHTML dibuat dengan tujuan agar terdapat sebuah “bahasa” standar yang dapat digunakan oleh aplikasi lain secara luas dan oleh platform yang berbeda. Dengan menggunakan XHTML, sebuah situs masih dapat dinikmati dengan baik menggunakan browser teks, PDA, Phone Cell, dan lain-lain. Sedangkan HTML hanya dapat dinikmati dengan baik bila menggunakan Web browser seperti IE atau Netscape. Hal ini memungkinkan halaman Web yang menggunakan HTML akan lebih dapat diterima secara luas oleh berbagai aplikasi.

Perbedaan HTML dan XHTML XHTML adalah versi HTML yang lebih disiplin, ketat dan stabil. XHTML adalah kombinasi antara HTML dan Extensible Markup Language (XML). XML diciptakan untuk menjelaskan data, sedangkan HTML diciptakan untuk menampilkan data. 14

HTML (bahasa asli World Wide Web) secara pesat digantikan oleh XHTML. Keduanya sebenarnya hampir sama dikarenakan XHTML adalah warisan atau berasal dari HTML yang dirancang untuk menyesuaikan standar XML. Hanya ada beberapa perbedaan kecil antara kedua bahasa markup ini, bisa dikatakan bahwa XHTML adalah generasi baru HTML. Salah satu keunggulan yang dimiliki XHTML adalah dapat digunakan pada perangkat non “komputer” seperti ponsel dan semacamnya.

•

Semua elemen dan attribute pada dokumen XHTML harus diketik dalam huruf kecil (ini tidak perlu pada HTML).

•

Semua tag pembuka harus ditutup dengan tag penutup, di HTML banyak tag- tag pembuka dibiarkan terbuka tanpa menutupnya namun tidak terjadi error bila dibuka pada browser, salah satu contohnya adalah line break dan image tag.

•

Dalam dunia XHTML, segala tag harus bersarang secara teratur (properly nested), artinya bahwa jika Anda membuka tag “a” setelah itu membuka tag baru di dalamnya, maka tag yang paling baru harus ditutup duluan dan tag yang terbuka pertama harus ditutup paling akhir. Walaupun nesting ini juga terdapat dalam dunia HTML namun tidak seketat peraturan di XHTML.

•

Tiap value pada attribute harus terbungkus dengan tanda kutip ganda atau tunggal dan atributnya sendiri tidak boleh disingkat.

•

Image tag harus terdapat alt attribute yang menyediakan deskripsi image, untuk memungkinkan mereka memiliki beberapa persyaratan untuk aksesibilitas bersama dengan standar web yang berbeda.

•

Persyaratan lain dari XHTML adalah adanya pernyataan dari DOCTYPE yang menentukan aturan mana yang diikuti oleh dokumen Anda (aturan yang diwarisi dari XML). Anda akan menemukan pernyataan ini pada barisan pertama dari atas ketika anda mengaktifkan halaman source kode XHTML yaitu tipe dokumen deklarasi (juga disebut dengan DTD atau DOCTYPE). Sebagian besar halaman web yang diciptakan hari ini akan menyertakan deklarasi DOCTYPE tersebut. Ada 3 DTD untuk XHTML: Strict (hanya akan validasi jika tanpa tag usang), Transisi (masih akan memvalidasi dengan tag usang), dan Frameset (untuk halaman yang "set up frame"). Semua dokumen XHTML harus sesuai dengan aturan sintaks XML.

5. Pengenalan HTML5 HTML5 merupakan standar baru untuk HTML, XHTML, dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan website dunia semakin berkembang. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browse sudah mendukung HTML5. HTML5 merupakan hasil proyek dari World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Bagaimana HTML5 dimulai? • • • • • •

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript Mengurangi kebutuhan untuk plugin eksternal (seperti Flash) Penanagan kesalahan yang lebih baik Lebih markup untuk menggantikan scripting HTML5 merupakan perangkat mandiri Proses pembangunan dapat terlihat untuk umum

Fitur Baru dalam HTML5 • • • •

Unsur kanvas untuk menggambar

•

Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Video dan elemen audio untuk media pemutaran Dukungan yang lebih baik untuk penyimpanan secara offline Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section

Beberapa browser sudah mendukung HTML5, seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

Aktivitas Ice Breaking 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1. 2.

Apakah yang dimaksud dengan HTML, XHTML, dan HTML5? Tuliskan dan jelaskan fungsi dari beberapa tag HTML5 yang tidak disupport pada versi HTML sebelumnya.

Topik

Web Development Tools (Design Grafis, Animasi, Editor HTML) 6. Pengenalan Web Development Tools Web Development adalah istilah luas untuk pekerjaan yang terlibat dalam mengembangkan sebuah situs web untuk internet (World Wide Web) atau intranet (jaringan pribadi). Hal ini dapat mencakup desain web, pengembangan konten web, penghubung klien, client-side/server-side scripting, web server dan konfigurasi jaringan keamanan, dan pengembangan e-commerce. Ada 3 kategori yang terkait dalam Web Development, yaitu: a. Web Developer Web developer adalah seseorang yang menciptakan aplikasi berbasis web dengan menggunakan bahasa pemrograman. Pada dasarnya, web developer membuat berbagai hal “terjadi” pada sebuah website. Peran web developer adalah sebagai penghubung dari semua sumber daya yang akan digunakan pada sebuah website, mulai dari pemanggilan database, membuat halaman website yang dinamis, hingga mengatur cara pengunjung untuk berinteraksi dengan elemen-elemen dari website tersebut. Aspek tampilan menjadi sisi yang agak “terpinggirkan” oleh web developer. Pada umumnya setelah scripting dari aplikasi web telah selesai dibuat, web developer akan menyerahkan pekerjaannya kepada web designer untuk menciptakan tampilan yang baik. b. Web Designer Web designer adalah seseorang yang bekerja dengan unsur-unsur visual pada suatu halaman web. Dia adalah orang yang membuat wajah halaman web tampak begitu “cantik”. Para web design mengintegrasikan komponen seperti

gambar, file flash, atau multimedia ke dalam halaman web untuk menambah pengalaman visual user atau untuk melengkapi content page. Pemahaman tentang Client-side scripting, HTML, CSS, cara memanipulasi image dan animasi merupakan beberapa hal yang dikuasai oleh web designer. Web designer biasanya bekerja dalam tim untuk memastikan sebuah tampilan website dapat membuat aplikasi web bekerja dengan baik. Keterampilan tambahan berupa komunikasi, tentu akan menjadi sangat berguna bagi para web designer. Sisi lain yang juga harus dipahami oleh web designer adalah kegunaaan (usability), standar W3C untuk HTML dan CSS dan kompabilitas tampilan pada browser yang berbeda. c. Webmaster Webmaster merupakan gabungan dari keduanya, bahkan webmaster juga bertugas untuk memelihara aplikasi web yang digunakan. Sebagai catatan tambahan, webmaster mungkin juga bertanggung jawab untuk optimisasi mesin pencari (SEO), mengisi content pada website, hingga â&#x20AC;&#x2DC;memasarkanâ&#x20AC;&#x2122; website tersebut. Dalam kelompok kerja yang lebih besar, webmaster akan lebih banyak menjadi manager dari sebuah web-based project, mengatur pekerjaan web developer dan web designer, hingga melakukan pengujian terhadap usability dari aplikasi web yang dibuat.

7. Jenis Web Development Tools Design Grafis Desain grafis adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin. Dalam desain grafis, teks juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan. Desain grafis diterapkan dalam desain komunikasi dan fine art. Seperti jenis desain lainnya, desain grafis dapat merujuk kepada proses pembuatan, metoda merancang, produk yang dihasilkan (rancangan), atau pun disiplin ilmu yang digunakan (desain). Seni desain grafis mencakup kemampuan kognitif dan keterampilan visual, termasuk di dalamnya tipografi, ilustrasi, fotografi, pengolahan gambar, dan tata letak.

Prinsip dan Unsur Desain Unsur dalam desain grafis sama seperti unsur dasar dalam disiplin desain lainnya. Unsur-unsur tersebut termasuk garis, bentuk, tekstur, ruang, ukuran dan warna membentuk prinsip-prinsip dasar desain visual. Prinsip-prinsip tersebut, seperti keseimbangan (balance), ritme (rhythm), tekanan (emphasis), proporsi (proportion) dan kesatuan (unity), kemudian membentuk aspek struktural komposisi yang lebih luas. Software Desain Grafis yang Digunakan dalam Desain Web Ada beberapa software yang digunakan dalam grafis desain web, yaitu:

• • • •

Notepad Microsoft Frontpage Adobe Dreamweaver Adobe Photoshop

Animasi Animasi (Animation) adalah “illusion of motion” yang dibuat dari image statis yang ditampilkan secara berurutan. Pada video atau film, animasi merancu pada teknik dimana setiap frame dalam film dibuat secara terpisah. Frame bisa dihasilkan dari komputer, dari fotografi atau dari gambar lukisan. Ketika frame-frame tersebut digabungkan, maka terdapat ilusi perubahan gambar, sesuai dengan teori yang disebut dengan “persistance of vision”.

Gambar 4. Motion dalam Animasi

Flash dan Animasi Web Animasi dapat ditambahkan ke dalam halaman web dalam bentuk animasi GIF atau video embedded. Format yang paling populer untuk animasi web adalah SHOCKWAVE FLASH (SWF), biasanya di-generate menggunakan Macromedia Flash, yang berupa animasi vektor. Animasi SWF memerlukan bandwidth yang lebih rendah dibandingkan video dan format bitmap. Harga yang harus dibayar dengan bandwidth yang lebih rendah ini adalah animasi vekor tidak sepenuhnya didukung atau dapat ditampilkan dibandingkan dengan bitmap (perlu plug-in khusus) Flash lebih dari sekedar program animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkan untuk membuat animasi yang interaktif dan membuat aplikasi web dengan user-interface berupa Flash.

Editor HTML Program yang di gunakan untuk membuat document HTML. Ada banyak HTML editor yang bisa digunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

Pengenalan Microsoft FrontPage Ms FrontPage bisa digunakan untuk merancang desain sebuah web. Dalam hal ini kita memakai Microsoft Front Page 2003, walaupun dalam implementasi di laboratorium, pada dasarnya hampir sama. Berikut User Interface-nya :

Gambar 5. Pengenalan Ms FrontPage

Gambar. Di bagian bawah Front Page 2003, terlihat ada design, split, code, dan preview, sedang dalam Front 2000 kita hanya akan melihat design, code/html, dan preview-nya saja. Pengenalan Dreamweaver Adobe Dreamweaver CS3 merupakan salah satu software pembuat website yang mempunyai banyak sekali kemudahan dalam pengoperasiannya namun juga sangat powerful dalam pembuatan website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan macromedia flash, sebuah tool animasi yang sangat populer di internet.

Pengenalan Interface Dreamweaver Gambar di bawah merupakan gambaran layout kerja Adobe Dreamweaver CS3. Jendela-jendela pembantu yang terdapat pada menu window dikelompokkan pada panel bagian kanan. Seluruh panel bisa disembunyikan dengan mengklik tombol yang ditunjukkan oleh tanda panah. Menu Bar

Insert Bar

Document Toolbar

Document Window

Dockable Panels Property Inspector

Gambar 6. Layout kerja Dreamweaver

Design view bekerja layaknya kanvas bagi pelukis. Bagian ini merupakan tempat kita bekerja dalam membentuk sebuah halaman situs. Disini, dengan

menggunakan document toolbar kita bisa menampilkan code saja, desain saja atau kedua-duanya. Menampilkan kode dan desain

Menampilkan desain saja Menampilkan kode saja Gambar 7. Document Toolbar. Digunakan untuk mengatur tampilan kerja (tampilan script saja, tampilan script dan desain, atau hanya tampilan desain)

â&#x20AC;˘

Insert bar membantu kita untuk memasukkan berbagai berbagai elemen-elemen pembentuk halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan lain-lain. Elemen-elemen tersebut direpresentasikan dalam bentuk icon.

â&#x20AC;˘

Document toolbar memberikan kita kemudahan untuk melakukan perintah-perintah yang memberikan efek pada seluruh dokumen, seperti halnya judul dokumen.

â&#x20AC;˘

Property inspector menampilkan berbagai property yang dipunyai elemen tertentu. Kita bisa langsung mengubah properti dari elemen tersebut dengan tool ini, misalnya merubah warna teks, memberikan background pada elemen tabel, menggabungkan kolom, dan lain-lain.

â&#x20AC;˘

Anda bisa membuka atau membuat lebih dari satu dokumen. Dokumen-dokumen yang sudah anda buka akan diurutkan pada bagian bawah design view. Anda tinggal mengklik tombol tersebut untuk berpindah antar halaman. Ditunjukkan oleh tanda panah warna biru pada gambar 8.

â&#x20AC;˘

Setiap dokumen yang anda buka masing-masing dapat anda minimize, maximize atau anda tutup. Dapat anda lihat pada keterangan gambar di bawah.

Me-minimize, me-restore, menutup salah satu dokumen

Me-minimize, me-restore, menutup Dreamweaver

Gambar 8. Halaman Dreamweaver terpisah ke dalam tab-tab tertentu. Masing-masing tab dapat ditutup, dikecilkan, atau disembunyikan tampilannya.

Sambil jalan, secara otomatis kita akan mengetahui fungsi dari toolbar-toolbar yang tidak dijelaskan dalam subbab ini. Setelah anda mulai terbiasa dengan layout kerja Dreamweaver, kita lanjutkan dengan bagaimana memulai kerja dengan Dreamweaver. Pengenalan NotePad Semua pengguna Windows pasti tahu tentang Notepad, yaitu sebuah text editor simple yang sudah ada sejak Windows 1.0 tahun 1985. Dimana fungsi Notepad dianggap masih sama saja dari dulu. Banyak sekali kegunaan dari Notepad, diantaranya sebagai berikut.

â&#x20AC;˘

Notepad sebagai HTML Stripper. Idealnya teks pada halaman sebuah web yang diformat khusus untuk jenis font, warna, ukuran, elemen desain dan gambar. Dengan notepad Anda dapat menggunakan untuk mengedit komponen teksnya saja. Anda tinggal meng-copy dari kode HTML dan Anda paste di notepad yang kemudian dapat Anda simpan untuk digunakan lagi di lain waktu.

â&#x20AC;˘

Notepad sebagai HTML Creator. Notepad dapat Anda gunakan untuk membuat sebuah file / halaman website. Dengan mengetikkan perintah dasar HTML kemudian menyimpannya dengan ekstension *.html Anda sudah mempunyai 1 file halaman website.

Gambar 9. Notepad sebagai simple text editor untuk membuat kode HTML

Sesuai perkembangan dalam pembuatan desain web, user lebih memilih menggunakan Notepad++ dibandingkan dengan notepad biasa. Apa itu Notepad++ ? Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang berjalan di sistem operasi Windows. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan berkas kode sumber berbagai bahasa pemrograman. Notepad++ didistribusikan sebagai perangkat lunak bebas. Proyek ini dilayani oleh Sourceforge.net dan telah diunduh lebih dari 27 juta kali dan dua kali memenangkan penghargaan SourceForge Community Choice Award for Best Developer Tool.

Berikut sejumlah bahasa pemrograman yang didukung oleh Notepad++ sejak versi 5.9.3:

• • • • • • • • • • • • • • • • • • • • •

ActionScript, Ada, ASP, Assembler, autoIt Batch C, C++, C#, Caml, Cmake, COBOL, CSS D, Diff Flash ActionScript, Fortran Gui4CLI Haskell, HTML Berkas INI, InnoSetup Java, Javascript, JSP KiXtart LISP, Lua Makefile, Matlab, MS-DOS NSIS Objective-C Pascal, Perl, PHP, Postscript, PowerShell, Properties file, Python R, Resource file, Ruby Shell, Scheme, Smalltalk, SQL TCL, TeX Visual Basic, VHDL, Verilog XML YAML

Gambar 10. Tampilan Jendela Notepad++

Perbedaan Notepad dan Notepad++ :

• •

Jika Notepad adalah text editor maka Notepad++ adalah code editor.

•

Pada Notepad tidak mendukung Compiler Integration sedangkan Notepad++ memiliki Compiler Integration.

•

Notepad tidak mendukung Code Folding sedangkan Notepad++ sudah mendukung Code Folding.

Notepad tidak support syntax highlighting, sedangkan Notepad++ support syntax highlighting untuk ASP, Ada, ASCII art, Assembly, Autolt (Limited support for AutoHotKey), BAT, C, C#, C++, Calm, CSS, doxygen, FORTRAN, HTML, Java, JavaScript, KiXtart, Lisp, Lua, makefile, Matlab, Objective-C, Pascal, Perl, PHP, PostScript, Python, Ruby, Scheme, Unix Shell Script, Smalltalk, SQL, Tcl, TeX, verilog, VHDL, VB/VBScript, dan XML.

â&#x20AC;˘

Notepad tidak memiliki fitur Spell Checking sedangkan Notepad++ sudah dilengkapi Spell Checking.

â&#x20AC;˘

Notepad tidak mendukung Auto Completion dan Auto Indentation sedangkan Notepad++ mendukung Auto Completion dan Auto Indentation.

â&#x20AC;˘

Notepad tidak mendukung Bracket Matching sedangkan Notepad++ mendukung Bracket Matching.

Dan fitur-fitur tersebut dapat diketahui bahwa Notepad++ memang dioptimasi untuk mempermudah para programmer atau coder dalam mengedit baris-baris kode.

Aktivitas Ice Breaking 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1.

Diantara beberapa tools tersebut di atas, jelaskan salah satu pilihan yang Anda telah/akan sering gunakan dalam mengembangkan website? Buatlah master desain (layout) website (berbentuk gambar) dan convert layout tersebut ke format HTML.

Topik

Cascading Style Sheet (CSS) 8. Pengenalan CSS CSS merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan me-manage style-style yang ada. CSS mendeskripsikan bagaiman tampilan dokument HTML di layar. Anda juga bisa menyebutnya sebagai template dari dokuments HTML yang menggunakanya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandarkan oleh W3C untuk di gunakan di web browser.

Cara Penulisan CSS Inline style sheet Penulisan di dalam elemen HTML:

Embedded Style Sheet Penulisan CSS <style></style>:

dalam

dokumen

HTML

dan

menggunakan

tag

Linked Style Sheet Penulisan skrip CSS di halaman berbeda atau terpisah dari html.

File html :

File css :

Hasil :

Aturan Penulisan CSS Selector Terdiri dari tag, class, ID Declaration Mendeskripsikan property dan value Contoh:

H1 { Color : #0000FF } Keterangan : Selector : H1 Properti : Color Value : #0000FF Macam-macam Selector â&#x20AC;˘

Tag/Elemen

Setiap tag yang ada pada HTML bisa dijadikan selector. â&#x20AC;˘

Class

Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class. stlye1.css

File.html

â&#x20AC;˘

Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda. Style.css

Script.html

Komentar Dalam CSS Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah ditulisnya. Comments di CSS hampir sama dengan comments di C atau C++, yaitu dengan menggunakan: /* isi Comments */ Contoh: H1 { color:blue;} /* H1 elements akan menjadi biru */ Tags.H1.color = â&#x20AC;&#x153;blueâ&#x20AC;?; /* H1 elements akan menjadi biru */

Pemakaian Elemen Style Mari kita mulai dengan mengatur warna huruf dan latar belakang. Anda dapat mengerjakan ini dengan menggunakan elemen style untuk mengatur karakter kode tag dokumen anda. <style type="text/css"> body { color: black; background: white; } 35

</style> Pernyataan yang ditulis antara kode tag <style> dan </style> menunjukkan perintah pengaturan style. Link ke Sheet Lainnya Apabila anda menginginkan style yang sama untuk halaman HTML anda yang lain, disarankan mempergunakan sheet-sheet terpisah namun satu dan lainnya terhubung dengan cara link. Anda dapat mengikuti cara berikut ini : <link rel="stylesheet" href="style.css"> Kode tag untuk link ini ditempatkan di bagian "head" dokumen anda. Perintah rel perlu diatur dengan pernyataan "stylesheet" agar supaya browser dapat menemukan perintah â&#x20AC;&#x153;hrefâ&#x20AC;? sebagai penunjukan ke alamat Web (URL) sheet anda. Mengatur Tepi Halaman (Page Margin) Halaman Web akan tampil cantik bila dituliskan dalam margin yang lebih lebar. Anda dapat mengatur sisi kiri dan kanan memakai karakter "margin-left" dan "margin-right". Contoh : <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } </style> Perintah di atas dituiskan dengan tujuan agar tampilan halaman Web di layar monitor memiliki batas halaman kiri 10% dari lebar layar monitor. Mengatur Inden Kiri dan Kanan Agar halaman Web Anda tampil lebih cantik bisa juga diberikan inden (spasi) dari margin kiri beberapa huruf sebelum menuliskan awal kalimat. Contoh :

h2.subsection { margin-top: 8em; margin-bottom: 3em; } Pengaturan ini dimulai dengan nama tag, sebuah titik dan kemudian nilai dari atribut class. Hati-hati dalam menempatkan ruang sebelum atau sesudah titik tersebut. Bila pengaturan tersebut tidak memberikan hasil. Ada cara lain untuk mengatur style elemen tertentu. Tapi atribut class tetap bersifat fleksibel. Pada saat sebuah "heading" diikuti dengan sebuah paragraf, nilai untuk batas bawah (margin-bottom) untuk heading tersebut tidak ditambahkan dengan nilai batas atas (margin-top) paragraf. Inden pada baris pertama Kadang-kadang Anda ingin membuat inden pada baris pertama tiap paragraf. Cara berikut dapat Anda lakukan. p { text-indent: 2em; margin-top: 0; marginbottom:0; } Cara tersebut akan membuat inden pada baris pertama paragraf sejauh 2 em dan memberikan jarak antar paragraf. Menambahkan border dan background Anda dapat dengan mudah menambahkan border disekitar heading, daftar (list), atau paragraf atau sekelompok heading, list dan paragraph secara tertutup dengan mempergunakan elemen div. Contoh: div.box{ border: solid; border-width: thin; width: 100% } Catatan: tanpa property "width" beberapa browser akan menempatkan tepi kanan terlalu jauh ke arah kanan. Untuk mencegah hal ini Anda dapat menuliskan perintah HTML-nya sebagai berikut: <div class="box"> The content within this DIV element will be enclosed in a box with a thin line around it. </div>

Ada sedikit jenis border, yaitu: dotted, dashed, solid, double, groove, ridge, inset dan outset. Lebar border diatur dengan mempergunakan property "border-width". Nilai dari property ini, yaitu: thin, medium dan thick yang tampak setipis ukuran 0.1em. Property "border-color" memungkinkan Anda mengatur warna. Sebuah efek yang cantik dapat dilakukan dengan memberikan warna latar belakang kotak dengan warna tebal (solid color) atau dengan hamburan gambar ("tile image"). Untuk melakukan ini Anda perlu mempergunakan property "background". Anda dapat mengikuti perintah berikut ini. div.color { background: rgb(204,204,255); padding: 0.5em; border: none; } Tanpa pengaturan property border, biasanya program browser hanya akan menampilkan warna standar saja. Property padding memberikan beberapa ruangan diantara tepi-tepi daerah berwarna dan teks yang ada didalamnya. Anda dapat mengatur nilai property pading dengan menambahkan paddingleft, padding-top, padding-right dan padding-bottom. Pengaturan ini dituliskan misalnya sebagai: padding-left: 1em. Anggaplah Anda menginginkan border pada satu sisi halaman web saja. Anda dapat melakukan pengontrolan tiap sisi border dengan memberikan keterangan border-left, border-top, border-right dan border-bottom. Contoh: p.changed { padding-left: 0.2em; border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: thin; border-color: red; }

Susunan perintah diatas memberikan efek pada tampilan web Anda dengan border berwarna merah di sisi sebelah kiri. Mengatur warna Contoh berikut adalah perintah pengaturan warna. body { color: black; background: white; } strong { color: red } Model pengaturan diatas memberikan warna hitam teks (default) dan latar belakang putih, tetapi memiliki elemen strong pada warna merah. Ada 16 buah nama warna standar yang dijelaskan dalam uraian berikut. Selain itu Anda dapat juga mempergunakan nilai desimal untuk warna merah, hijau dan biru, dan masing-masing memiliki interval antara 0 sampai 255. Misalnya RGB (255, 0, 0) akan memberikan warna merah di layar monitor. Anda juga dapat mempergunakan angka hexadecimal yang dimulai karakter # yang diikuti enam angka hexadesimal sebagai pengaturan warna. Sebuah pengubah juga diberikan di bawah ini agar Anda dapat melakukan pengubahan nilai dari RGB ke nilai hexadesimal. Mengatur warna link Anda dapat mempergunakan CSS untuk mengatur warna hypertex link, dengan warna yang berbeda untuk link yang belum pernah anda akses, link yang pernah Anda akses dan link yang akan kemudian Anda akses serta link yang aktif. Anda bahkan dapat mengatur warnanya pada saat kursor mouse berada diatas daerah yang akan dilink.Hal ini dapat anda tuliskan dalam bentuk perintah berikut :

â&#x20AC;˘ â&#x20AC;˘

:link { color: rgb(0, 0, 153) } /* untuk warna link yang belum diakses */

â&#x20AC;˘

:active { color: rgb(255, 0, 102) } /* untuk warna link ketika link diklik */

:visited { color: rgb(153, 0, 153) } /* untuk warna link yang telah diakses */

â&#x20AC;˘

:hover { color: rgb(0, 96, 255) } /* untuk warna link ketika mouse diatasnya*/

Kadang-kadang anda ingin memperlihatkan link hyperteks tanpa garis bawah. Anda dapat melakukan ini dengan memberikan property text decoration atau none, contoh : a.plain { text-decoration: none } Contoh berikut juga menampilkan link yang tidak bergaris bawah. This is <a class="plain" href="what.html">not underlined</a> Kebanyakan orang ketika mereka melihat garis bawah di bawah sebuah link selalu mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan warna biru pada teks yang diberi link ke halaman atau alamat internet lain. Anda disarankan untuk meninggalkan warna link ini apabila warna latar belakang menyebabkan teks Anda yang diberi link jadi sulit terbaca.

Aktivitas Ice Breaking 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1. 2.

Tambahkan CSS pada hasil dari tugas topik 3 point 2. Buatlah navigasi menu sederhana menggunakan CSS dan HTML.

Topik

Pengantar XML 9. Pengertian XML XML kependekan dari eXtensible Markup Language, dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998. Teknologi yang digunakan pada XML sebenarnya bukan teknologi baru, tapi merupakan turunan dari Standard Generalized Markup Language (SGML) yang telah dikembangkan pada awal 80-an dan telah banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar. Ketika HTML dikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian paling penting pada SGML dan dengan berpedoman pada pengembangan HTML menghasilkan markup language yang tidak kalah hebatnya dengan SGML. Seperti halnya HTML, XML juga menggunakan elemen yang ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup (diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen(parameter yang dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai didalamnya, sedangkan pada XML bisa menggunakan tag dan atribut sesuai kehendak kita. Untuk lebih jelasnya lihat contoh di bawah: <pesan> <dari>MIS Manager</dari> <buat>HRD Manager</buat> <buat>Bagian rekrut</buat> <buat>Computer Suport team</buat> <subyek>Permohonan Tenaga kerja baru</subyek> <isi>Mohon diberikan tenaga kerja baru untuk mengisi lowongan di Departemen MIS</isi> </pesan> pada contoh diatas <pesan>, <dari> <buat>,dan <isi> bukanlah tag standard yang telah di tetapkan dalam XML. Tag-tag itu kita buat sendiri sesuai 43

keinginan kita. Sampai di sini XML tidak melakukan apapun. Yang ada hanyalah informasi yang di kemas dengan tag-tag XML. Kita harus membuat software lagi untuk untuk mengirim, menerima atau menampilkan informasi di dalamnya.

Gambar 11. Contoh tag-tag yang dibuat sendiri sesuai keinginan dalam XML

Kenapa Harus Menggunakan XML? XML untuk saat ini bukan merupakan pengganti HTML. Masing-masing dikembangkan untuk tujuan yang berbeda. Kalau HTML digunakan untuk menampilkan informasi dan berfokus pada bagaimana informasi terlihat, XML mendeskripsikan susunan informasi dan berfokus pada informasi itu sendiri. XML terutama dibutuhkan untuk menyusun dan menyajikan informasi dengan format yang tidak mengandung format standard layaknya heading, paragraph, table dan lain sebagainya. Sebagai contoh apa bila kita ingin menyimpan dan menyajikan informasi notasi musik pada lagu â&#x20AC;&#x153;Indonesia rayaâ&#x20AC;?, kita bisa menyimpannya dengan XML seperti contoh di bawah ini. 44

<lagu judul=”Indonesia raya” nadadasar=”G” Birama=”4/4”> <bar nomor=”1”> <nada not=”B” ketukan=”1/2”/> <nada not=”C” ketukan=”1/2”/> <nada not=”D” ketukan=”1”/> <nada not=”B” ketukan=”2”/> ... </bar> <bar nomor=”2”> ... </bar> </lagu> Kemudian dengan bantuan software lain, misalnya MIDI generator, kita bisa mendengarkan musiknya atau juga bisa membuat software sendiri yang menampilkan informasi dalam bentuk not balok. Sama dengan HTML, File XML berbentuk teks sehingga bila diperlukan kita bisa membacanya tanpa memerlukan bantuan software khusus. Hal ini memudahkan pengembang aplikasi yang menggunakan XML untuk mendebug programnya. XML lebih fleksible dibanding HTML dalam hal kemampuannya menyimpan informasi dan data. Pada XML kita bisa menyimpan data baik dalam atribut maupun sebagai isi elemen yang diletakkan diantara tag pembuka dan tag penutup. Kelebihan lain yang dimiliki XML adalah bahwa informasi bisa di pertukarkan dari satu system ke system lain yang berbeda platform. Misalnya dari Windows ke Unix, atau dari PC ke Machintosh bahkan dari internet ke handphone dengan teknologi WAP.

Bagian-Bagian dari Dokumen XML Sebuah dokumen XML terdiri dari bagian bagian yang disebut dengan node. Node-node itu adalah:

•

Root node, yaitu node yang melingkupi keseluruhan dokumen. Dalam satu dokumen XML hanya ada satu root node. Node-node yang lainnya berada di dalam root node.

•

Element node, yaitu bagian dari dokumen XML yang ditandai dengan tag pembuka dan tag penutup, atau bisa juga sebuah tag

tunggal elemen kosong seperti <anggota nama=”budi”/>. Root node biasa juga disebut root element.

•

Attribute note, termasuk nama dan nilai atribut ditulis pada tag awal sebuah elemen atau pada tag tunggal.

•

Text node, adalah text yang merupakan isi dari sebuah elemen, ditulis diantara tag pembuka dan tag penutup ,

• •

Comment node, adalah baris yang tidak dieksekusi oleh parser .

•

NameSpace Node, node ini mewakili deklarasi namespace.

Processing Instruction node, adalah perintah pengolahan dalam dokumen XML. Node ini ditandai awali dengan karakter <? Dan diakhiri dengan ?>. Tapi perlu diingat bahwa header standard XML <?xml version=”1.0” encoding=”iso-8859-1”?> bukanlah processing instruction node. Header standard bukanlah bagian dari hirarki pohon dokumen XML.

Gambar 12. Contoh Dokumen XML

Sintaks XML Dibandingkan dengan HTML, XML lebih cerewet. Kalau kita menulis sebuah dokumen HTML, beberapa kesalahan penulisan masih ditolerir. Misalnya kita menempatkan tag bersilangan seperti <p><b>Huruf Tebal</p></b> meskipun tidak dianjurkan, HTML masih bisa bekerja dan menampilkan hasil seperti yang kita inginkan. Tidak demikian dengan XML. Heading standard untuk Document XML Biasakanlah setiap membuat dokumen XML diawali dengan heading standard XML. Formatnya adalah sebagai berikut: <?xml version=”1.0” encoding=”iso-8859-1”?> Dokumen XML harus memiliki Root Tag Sebuah dokumen XML yang baik harus memiliki root tag. Yaitu tag yang melingkupi keseluruhan dari dokumen. Tag-tag yang lain, disebut child tag, berada di dalam root membentuk hirarki seperti gambar di bawah ini. Contoh: <root> <child> <subchild></subchild> </child> </root>

Gambar 13. Root Tag XML

Tag pada XML harus lengkap berpasangan Pada HTML beberapa elemen tidak harus berpasangan. Contoh berikut ini diperbolehkan dalam penulisan HTML. <p>paragraf pertama <p>paragaraf kedua yang demikian tidak berlaku pada XML. Kita harus menulis pula tag penutup untuk setiap tag yang kita buat. Penulisannya harus seperti ini: <p>paragraf pertama</p> Tag tunggal hanya diperbolehkan untuk elemen kosong. Contoh penulisannya sebagai berikut: <anggota nama=â&#x20AC;?budiâ&#x20AC;?/> Pada XML, <tanggal> berbeda dengan <Tanggal>. Tag pembuka dan tag penutup harus sama susunan huruf besar dan kecilnya. <contoh>ini penulisan yang salah</Contoh> <contoh>ini baru betul</contoh>

Penyarangan tag harus benar Penulisan tag pada XML harus mengikuti aturan Last In First Out (LIFO). seperti yang kita bahas terdahulu, pada XML kita tidak bisa membuat tag yang saling bersilang seperti di bawah ini: <p><b>Huruf Tebal</p></b> , tapi harus disusun seperti ini : <p><b>Huruf Tebal</b></p> bila dipaksakan juga, browser akan menampilkan pesan error seperti gambar di bawah:

Gambar 14. Pesan Error pada XML karena kesalahan penulisan tag

XML mempertahankan spasi seperti apa adanya Berbeda dengan HTML, XML menampilkan spasi persis bagaimana data ditulis. Lebih jelasnya perhatikan contoh berikut ini:

Pada HTML kalimat, Kami pergi

bersama

akan ditampilkan sebagai: Kami pergi bersama Sedangkan pada XML akan ditampilkan sama persis dengan kalimat asalnya. Nilai atribut harus diletakkan diantara tanda petik Seperti HTML, XML memiliki atribut. Nilai atribut harus diletakkan diantara dua tanda petik. Tidak masalah apakah tanda petik tunggal atau tanda petik ganda. Contoh di bawah ini dua-duanya benar: <pesan dari=”lusy”> atau <pesan dari=’lusy’> Penamaan tag dan atribut Nama tag bisa terdiri dari huruf, angka dan underscore (“_”). Karakter awal nama tag harus berupa huruf atau underscore (“_”), tidak diawali dengan kata xml atau XML, (misal:<xmlstring>), dan tidak mengandung spasi. Aturan penamaan atribut sama dengan aturan penamaan tag. Menyisipkan komentar Pada bahasa pemrograman atau scripting kita mengenal adanya komentar (comments). Komentar adalah kalimat/baris yang tidak dieksekusi oleh compiler, browser atau parser. Untuk menyisipkan komentar pada dokumen XML caranya adalah sebagai berikut: <!—Baris ini tidak di eksekusi oleh parser -->

Menggunakan Karakter Illegal pada XML Sama seperti pada HTML, Anda tidak bisa menggunakan karakter seperti kurung siku (< atau >), petik tunggal (â&#x20AC;&#x2DC;), dan petik ganda (â&#x20AC;&#x153;) . Contoh di bawah ini akan menghasilkan error kalau di eksekusi oleh browser. <syarat>jika jumlah < 1000 maka</syarat> Untuk menghindarinya, kita harus menggantikannya dengan entity reference seperti di bawah ini: <syarat>jika jumlah &lt; 1000 maka</syarat> Namespace XML Dari pembahasan terdahulu kita mengetahui bahwa tag-tag pada XML tidak didefinisikan secara baku tetapi kita buat sendiri sesuai keinginan kita. Karena itu akan sering terjadi konflik pada dua dokumen yang menggunakan nama tag yang sama tetapi mewakili dua hal yang berbeda. Contoh: bila ada dokumen yang mendiskripsikan tentang kebutuhan material pembuatan gardu jaga dari bambu <bambu> <jenis>Jawa</jenis> <panjang>2</panjang> </bambu> dengan dokumen yang mendiskripsikan â&#x20AC;&#x153;bambuâ&#x20AC;? sebagai merek produk. <bambu> <jumlah>246</jumlah> <hargasatuan>200</hargasatuan> </bambu>

untuk mengatasi hal ini, Namespace menggunakan awalan yang berbeda,

menyediakan

metode

dengan

<a:bambu> <a:jenis>Jawa</a:jenis> <a:panjang>2</a:panjang> </a:bambu> dokumen kedua menjadi seperti berikut: <b:bambu> <b:jumlah>246</b:jumlah> <b:hargasatuan>200</b:hargasatuan> <b:/bambu> Dengan cara demikian konflik penamaan tag tidak terjadi lagi. Aturan penggunaan namespace adalah sebagai berikut: <a:bambu xmlns:a=â&#x20AC;?http:/www.somewhere.com/garduâ&#x20AC;?> a adalah prefix yang dipakai, sedangkan atribut namespace di tambahkan pada tag. Syntax untuk atribut namespace adalah sebagai berikut: xmlns:a=â&#x20AC;?namespaceâ&#x20AC;? Pada contoh diatas namespace-nya menggunakan alamat internet. W3C namespace spesification menyatakan bahwa namespace haruslah merupakan Uniform Resource Identifier (URI). Perlu di perhatikan bahwa alamat internet tersebut tidak digunakan untuk mendapatkan informasi, tapi hanya untuk memberikan nama yang unik bagi namespace. Tetapi seringkali perusahaan menggunakan namespace yang menunjuk pada webpage yang berisi informasi tentang namespace yang digunakan.

Aktivitas Ice Breaking 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1.

Buatlah basis data berbasis XML untuk address book. Minimal terdiri dari Basic Info (Nama, Alamat, Telp, Email) - Pendidikan (Sekolah, Universitas) - Biodata (Jenis Kelamin, Tanggal Lahir, Quote).

Topik

Pengenalan JAVASCRIPT, JQuery dan AJAX 10. Pengenalan Java Script Pengertian Java Script Javascript adalah bahasa script yang ditempelkan pada kode HTML dan diproses pada sisi clien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi lebih luas. Sebagai contoh, dengan menggunakan javascript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Perlu diketahui bahwa javascript dan bahasa java adalah dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien, sedangkan kode java dikompilasi oleh pemrogram dan hasilnyalah yang dijalankan oleh klien.

•

Tag <SCRIPT> untuk mengawali skript javascript dan diakhiri dengan tag </SCRIPT>. Di dalam tag <SCRIPT> terdapat atribut LANGUAGE yang diisi dengan “javascript”.

•

Tanda <!—dan //-->merupakan tanda untuk menuliskan komentar

Contoh: <HTML> <HEAD> <SCRIPT language="javascript"> //<!—Menyembunyikan script terhadap browser non_javascript document.write("Hai...selamat mencoba"); //akhir dari penyembunyian --> </SCRIPT> </HEAD> </HTML>

Dengan Menggunakan Event Menangani Event akan mengubah halaman yang static menjadi lebih dinamis. Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik pada mouse, klik pada tombol submit di suatu form, dan keluar dari halaman. Netscape mengenali sejumlah event, tetapi kita tidak akan mendiskusikannyanya sekarang. Contoh: <FORM> <INPUT TYPE=BUTTON VALUE=”Coba Klik” onClick=”alert(‘Hello world’)”> </FORM> Obyek Date Walaupun JavaScript tidak menyediakan suatu type data Date, tetapi menyediakan suatu obyek date yang mana menangani informasi date dan time. Semua tanggal adalah jumlah milidetik sejak January 1, 1970, 00:00:00. Akibatnya semua tanggal sebelum 1970 adalah tidak sah. Obyek date membutuhkan suatu instance dari obyek Date yang berkaitan dengan pemakaian metode-metodenya. Instance dapat berupa suatu obyek baru atau properti dari obyek yang ada. Ada empat cara untuk membentuk instance baru: dateObyekName = new date() dateObyekName=new date (“Month day, year hours:minutes:seconds”) dateObyekName=new date (year, month, day) dateObyekName=new date (year, month, date, hours, minutes, seconds) Membentuk suatu himpunan dari tanggal dan waktu ke tanggal dan waktu sekarang. Mengosongkan time berarti memberinya nilai nol. Karena obyek Date tidak mengandung properti apa-apa, hanya ada satu format untuk metode Date: dateObyekName.metodeName(parameters) 55

Pengecualiannya adalah UTC dan metode parse, yang mana adalah metode status dan pemakaiannya. Date.UTC(parameters) Date.parse(Parameters) Tabel 1. Tabel menjelaskan nilai yang akan dikembalikan oleh berbagai perintah get. Memisahkan informasi dalam obyek Date.

Metode Date getDate() getDay() GetHours GetMinutes GetMonth GetSeconds GetTime GetTimezoneOffset GetYear

Nilai yang dikembalikan Day of the month Day of the week Hour of the day Minutes in the hour The month Seconds in the minute Milliseconds since 1/1/1970 Offset between local time and GMT The year

11. Fungsi JQuery di Javascript JQuery adalah javascript library atau kumpulan kode/fungsi javascript siap pakai, sehingga mempermudah kita untuk membuat kode javascript. Atau dalam kesimpulannya jquery menyederhanakan kode javascript. Hal ini sesuai dengan slogannya “write less, do more”. Ada beberapa alasan mengapa lebih baik menggunakan jquery daripada library lainnya, antara lain:

• • • •

Kompatibel dengan hampir seluruh browser

•

Didukung oleh banyak komunitas

Jquery telah digunakan oleh website-website raksasa Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3) Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com

• • • •

Disupport oleh plugin yang lengkap Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb Open source atau free Jquery lebih diminati oleh para developer web saat ini

Berikut beberapa kemampuan yang dimiliki jquery :

• • • • •

Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

•

Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Mempermudah modifikasi/perubahan tampilan halaman web. Mempersingkat Ajax (Asynchronous Javacsript and XML). Memiliki Application Programming Interface (API). Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.

Cara kerja jquery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas sebagai penjelasannya.

•

Jquery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah: $(document).ready(function(){ // baris kode jQuery akan dijalankan // apabila semua elemen sudah ditampilkan semua });

•

Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jquery menggunakan fungsi Selector. $("#foto") $(".sembunyi") $(".tampil")

•

Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan menampilkan kembali gambar. $(".sembunyi").click(function(){ $("#foto").hide("slow"); )};

12. AJAX AJAX adalah singkatan dari Asynchronous JavaScript and XML. AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif. AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif. Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan. Berikut adalah teknologi yang termasuk dalam aplikasi AJAX:

•

HTML yang digunakan untuk membuat Web forms dan mengindentifikasikan filed-field yang akan Anda gunakan dalam aplikasi.

•

JavaScript adalah kode inti untuk menjalankanaplikasi Ajax dan untuk membantu memfasilitasi komunikasi dengan aplikasi .

•

DHTML, atau Dynamic HTML, membantu Anda untuk membuat form atau web Anda dinamis. Anda akan menggunakan <div>, <span> dan elemen HTML dinamis lainya.

•

DOM, Document Object Model, akan digunakan (melalui kode JavaScript) untuk bekerja dengan kedua struktur.

XMLHttpRequest Objek pertama yang harus Anda mengerti adalah XMLHttpRequest, mungkin bagi Anda terdengar sesuatu yang baru. Ini adalah objek javascript dan membuatnya sederhana seperti ditunjukkan di Kode 1 di bawah ini : Kode 1. Membuat objek XMLHttpRequest. <script language="javascript" type="text/javascript"> var xmlHttp = new XMLHttpRequest(); </script> Untuk mendapatkan dan mengirim data dari/ke suatu database atau file di server menggunakan javascript tradisional, maka anda harus membuat HTML Form. Dan user harus mengklik tombol â&#x20AC;&#x153;submitâ&#x20AC;? untuk mengirim/mendapatkan informasi, menunggu respon dari server, kemudian halaman yang baru berupa hasilnya akan di-load. Karena server selalu memberikan halaman baru setiap user tekan tombol submit, aplikasi web sederhana akan berjalan lambat dan akan kurang Dengan Ajax, javascript akan berkomunikasi secara langsung dengan server melalui objek javascript yaitu XMLHttpRequest tersebut. Dengan objek XMLHttpRequest, suatu halaman web dapat membuat request ke, dan mendapatkan respon dari server web tanpa me-reload halaman secara keseluruhan. User akan selalu tetap dengan halaman yang sama. Bahkan user tidak akan tahu kalau ada data yang dikirim dan diterima dari server, karena javascript melakukan transaksi data di balik layar. Bagusnya lagi permintaan dikirim asynchronous, yang berarti bahwa kode JavaScript (dan pengguna) tidak menunggu pada server untuk merespon. Sehingga pengguna dapat terus memasukkan data, bergulir sekitar, dan menggunakan aplikasi. Kode JavaScript bahkan bisa mendapatkan data, melakukan perhitungan, dan mengirim permintaan lain, semua tanpa campur tangan pengguna! Ini adalah kekuatan dari XMLHttpRequest. Hal ini dapat bicara bolak-balik dengan server semua yang diinginkan, tanpa pernah tahu pengguna tentang apa yang sebenarnya terjadi. Hasilnya adalah, dinamis responsif, pengalaman yang 59

sangat interaktif seperti aplikasi desktop, tapi dengan semua kekuatan Internet di belakangnya. Objek XMLHttpRequest disupport hampir semua browser (Internet Explorer, Firefox, Chrome, Opera, dan Safari). Untuk membuat objek XMLHttpRequest supaya bisa didukung oleh beberapa browser adalah sebagai berikut: Kode 2. Membuat objek XMLHttpRequest untuk beberapa browser. if (window.XMLHttpRequest) { // kode untuk IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // kode untuk IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); }

Aktivitas 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1. 2. 3.

Apakah javascript itu? Apakah Ajax itu ? Apakah JQuery itu ?

Topik

Pengenalan Web Server dan MySQL 13. Pengenalan Web Server Pengertian Web Server Webserver adalah server internet yang digunakan sebagai koneksi dan transfer data (HTML, asp, aspx, php, js, dan lain sebagainya). Komputer Anda dapat juga bertindak sebagai suatu web server jika Anda menginstal dan menjalankan aplikasi web server, seperti Personal Web Server (PWS), Internet Information Services (IIS), atau Apache. Pada Windows, web server defaultnya adalah IIS. Namun, web server yg paling banyak digunakan adalah Apache. Web server apache ini lebih banyak digunakan oleh programmer pada saat ini karena web server apache merupakan web server yang paling kompatibel dan andal dengan PHP dan MySQL. Saat ini banyak software berbasis apache yang dapat kita gunakan sebagai web server. Di antaranya yang paling banyak digunakan adalah wampserver dan xampp. Kelebihan dua software tersebut adalah kita hanya cukup menginstal salah satunya, maka Apache dan MySQL akan terinstal juga, sehingga kita tidak usah menginstal berulang kali. Karena web server hanyalah suatu perangkat lunak, saat ini banyak pilihan yang dapat kita pilih. Mulai dari yang gratis (free) sampai yang berbayar, mulai dari yang kompleks sampai yang bisa berjalan di CD. Beberapa diantaranya yang cukup banyak digunakan adalah Apache Web Server, IIS, Xitami, PWS, dsb.

Cara Kerja Web Server

Gambar 15. Cara kerja web server

Lalu bagaimana prinsip atau cara kerja web server itu sendiri? Cukup sederhana untuk dipahami, karena pada dasarnya tugas web server hanya ada 2 (dua), yaitu: 1) Menerima permintaan (request) dari client, dan 2) Mengirimkan apa yang diminta oleh client (response). Prinsip kerja program web server adalah memberikan informasi yang diminta oleh komputer client dan melayani setiap permintaan yang datang dari manapun. Informasi akan dikirimkan oleh komputer server lalu akan diterima dan dibaca oleh komputer client melalui program browser. Urutan kerja web server adalah sebagai berikut:

â&#x20AC;˘

Komputer client mengetikan alamat www.seamolec.org dari program browser,

komputer

server

misal,

â&#x20AC;˘

Komputer server www.seamolec.org akan memberikan informasi berupa halaman utama atau index.html yang akan dibaca dari komputer client. 62

•

Komputer client memilih informasi yang diinginkan dengan menekan tombol link, misalnya pilihan harga, sehingga server akan memberikan tampilan informasi yang diminta client.

•

Komputer Server kemudian mengirimkan informasi yang di inginkan oleh client sehingga tampil dan dibaca di komputer client. Informasinya berupa daftar harga untuk tiap jenis voucher dan nominalnya.

Langkah–langkah Konfigurasi Web Server A. Mendefinisikan Web Site

•

Jalankan program Internet Service Manager yang telah terinstal di komputer server dengan cara klik tombol Start > Program > Administrative Tools > Internet Service Manager.

•

Dari tampilan program IIS, kemudian buat sebuah web site dengan langkah klik tombol action hingga tampil menu, lalu pilih New >>Web Site,

•

Kemudian tampil ucapan selamat datang pada program panduan (wizard) untuk membuat website, lalu pilih tombol Next hingga muncul tampilan.Untuk bagian description, isi nama web site yang akan kita buat, misalnya : seamolec.org lalu pilih next.

•

Selanjutnya pilih tombol next, hingga muncul tampilan menu untuk pemilihan IP Address dan nomor port untuk web site,

•

Pada langkah berikutnya pilih tombol Next, hingga tampil menu untuk memilih lokasi direktori tempat menyimpan data data web site. dengan Lokasi direktori data web site di C:\Inetpub\wwwroot.

•

Berikutnya pilih tombol next, hingga muncul tampilan pengaturan hak akses web seperti: Pilih dengan memberi tanda centang. Saat ini kita pilih read, run script, execute dan browse.

•

Selanjutnya pilih tombol next, hingga muncul konfirmasi bahwa proses pembuatan web site secara terpandu sudah selesai, lalu tekan tombol Finish untuk mengakhirinya

•

Setelah menekan tombol finish, maka akan pada program IIS akan tampil nama web site yang dibuat dengan sejumlah file dan direktori yang ada.

B. Mengkonfigurasi Server Extensions Setelah pendefinisian web site selesai, maka dilanjutkan dengan pengaturan konfigurasi server extension. Dengan langkah sebagai berikut :

•

Dari menu IIS, kemudian pilih dan klik tombol Action > All Tasks > Configure Server Extension, hingga muncul tampilan Pengaturan server extension di IIS

•

Kemudian muncul tampilan selamat datang pada program server extension configurations,

•

Kemudian pilih next, hingga muncul tampilan pembuatan kelompok windows,

•

Pilih next, hingga tampil menu pemilihan administrator sebagai pengelola website,

•

Pilih next, sehingga akan muncul tampilan untuk pengisian email server . Pada dialog ini kita pilih No, I’ll do it latter. Hal ini karena pada Windows 2000 server belum dilengkapi dengan program mail server. Sehingga untuk penggunaan email, perlu bantuan program yang lain.

•

Selanjutnya pilih next, hingga muncul tampilan Finish yang menginformasikan bahwa kegiatan konfigurasi server extension sudah selesai.

14. Pengenalan Xampp XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam General Public License (GNU) dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.

XAMPP adalah kepanjangan yang masing-masing hurufnya adalah : X : Program ini dapat dijalankan dibanyak sistem operasi,seperti Windows, Linux, Mac OS, dan juga Solaris. A : Apache, merupakan aplikasi web server. Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat web. jika diperlukan juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan M : MySQL, merupakan aplikasi database server. Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database. P : PHP, bahasa pemrograman web. Bahasa pemrograman PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. Sistem manajemen basis data yang sering digunakan bersama PHP adalah MySQl. namun PHP juga mendukung sistem manajement database Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan sebagainya. P : Perl adalah bahasa pemrograman untuk segala keperluan, dikembangkan pertama kali oleh Larry Wall di mesin Unix. Perl dirilis pertama kali pada tanggal 18 Desember 1987 ditandai dengan keluarnya Perl 1. Pada versi-versi selanjutnya, Perl tersedia pula untuk berbagai sistem operasi varian Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC. Dukungan terhadap pemrograman berbasis obyek (object oriented programming/OOP) ditambahkan pada Perl 5, yang pertama kali dirilis pada tanggal 31 Juli 1993. Proyek pengembangan Perl 6 dimulai pada tahun 2000, dan masih berlangsung hingga kini tanpa tanggal yang jelas kapan mau dirilis. Ini dikatakan sendiri oleh Larry Wall dalam satu pidatonya yang dikenal dengan seri The State of the Onion. Dua di antara karakteristik utama Perl adalah penanganan teks dan berbagai jalan pintas untuk menyelesaiakn persoalan-persoalan umum. Perl 65

sangat populer digunakan dalam program-program Common Gateway Interface (CGI) dan berbagai protokol Internet lainnya. Seperti diketahui, TCP/IP sebagai basis bagi semua protokol Internet yang dikenal sekarang ini menggunakan format teks dalam komunikasi data. Seperti juga bahasa populer lainnya, Perl menerima banyak kritikan. Meski banyak di antaranya hanya berupa mitos, atau berlebih-lebihan, tapi terdapat juga sejumlah kritikan yang valid. Salah satunya adalah, sintaksnya susah dibaca, karena banyak menggunakan simbol-simbol yang bukan huruf dan angka. Selain itu XAMMP adalah 100% open source, tersedia bebas dan legal. di bawah ini link download XAMPP versi terbaru:

• • • •

XAMPP for Linux XAMPP for Windows XAMPP for Mac OS X XAMPP for Solaris

Cara penggunaan xampp XAMPP versi 1.7.2 sudah mencakup software-software untuk menjalankan PHP seperti :

• • • • • •

Apache 2.2.12 (IPv6 enabled) + OpenSSL 0.9.8k MySQL 5.1.37 + PBXT engine PHP 5.3.0 phpMyAdmin 3.2.0.1 Webalizer 2.21-02 + GeoIP lite FileZilla FTP Server 0.9.32

jadi Anda tidak perlu lagi menginstall satu demi satu seluruh software tersebut.

Berikut ini tutorial untuk menggunakan Software XAMPP mulai dari proses instalasi sampai dengan penggunaannya.

Pertama-tama, bukalah (klik 2 kali) software tersebut dan akan ada tampilan sebagai berikut:

Gambar 16. Instalasi XAMPP

Secara default, program akan diinstall di c:\xampp\ 2.

Setelah selesai, buka XAmpp Control Panel kemudian start Apache dan MySQL.

Gambar 17. Mengaktifkan Apache dan MySQL melalui XAMPP Control Panel

Kemudian buka web browser, kemudian ketikkan: http://localhost pada kolom web address, maka akan tampil halaman seperti berikut:

Gambar 18. Halaman XAMPP pada web browser

Defaultnya, http://localhost mengambil folder c:\xampp\htdocs\ untuk ditampilkan. Buka alamat http://localhost/phpmyadmin dari web browser untuk masuk ke halaman mysql. Isi username dan password yang sesuai ketika Anda menginstall tadi. Tampilannya akan seperti berikut.

Gambar 19. Halaman Phpmyadmin pada web browser

Aktivitas Ice Breaking 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1. Buatlah pedoman instalasi web server berdasarkan pengalaman Anda dan sertakan dengan gambar. 2. Jelaskan jika terjadi beberapa error pada saat instalasi. 3. Tuliskan bagaimana cara mengganti konfigurasi untuk menonaktifkan register global serta menambahkan maximun upload size menjadi 50 MB. 4. Jelaskan bagaimana cara untuk membuat virtual host di komputer lokal Anda.

Topik

Pengenalan Database dan MySQL 15. Pengenalan Database Pengertian Database Database merupakan sekumpulan informasi yang saling berkaitan pada suatu subjek tertentu pada tujuan tertentu pula. Database adalah susunan record data operasional lengkap dari suatu organisasi atau perusahaan, yang diorganisir dan disimpan secara terintegrasi dengan menggunakan metode tertentu dalam komputer sehingga mampu memenuhi informasi yang optimal yang dibutuhkan oleh para pengguna Banyak sekali kegiatan manusia yang menggunakan komputer sebagai sarana pengolahan data, sehingga diperlukan suatu perangkat lunak database. Jika dikaji lebih mendasar tentang batasan suatu database, maka dapat disebutkan bahwa segala bentuk koleksi data adalah suatu database. Mulai dari kelompok data pegawai, sampai dengan kelompok file, merupakan database.

Definisi Dasar Struktur Database â&#x20AC;˘

Data : sekumpulan fakta mengenai objek tertentu, orang dan lain-lain yang dinyatakan dengan angka, huruf, gambar, film, suara dan sebagainya yang relevan dan belum mempunyai arti.

â&#x20AC;˘

Informasi : hasil pengolahan data yang konkrit dan sudah mempunyai arti untuk mencapai suatu tujuan tertentu.

â&#x20AC;˘

Tabel : merupakan hal yang paling mendasar dalam hal penyimpanan data yang terdiri dari field dan record.

â&#x20AC;˘

Field (kolom) : merupakan elemen dari tabel yang berisikan informasi tertentu yang spesifik tentang subjudul tabel pada sebuah item data.

â&#x20AC;˘

Record (baris) : merupakan sekumpulan data yang saling berkaitan tentang sebuah subjek tertentu, misalnya data seorang siswa akan disimpan dalam record yang terdiri dari beberapa kolom/field.

Syarat-syarat pembentukan Field Name pada tabel :

â&#x20AC;˘ â&#x20AC;˘ â&#x20AC;˘

Harus Unik atau Spesifik Boleh disingkat Pemisah sebagai pengganti spasi dalam pembentuk field adalah tanda lambang "_"

Contoh : Kode Barang menjadi KdBarang, KodeBrg, Kd_Brg, Kd_Barang, Kode_Brg Tanggal Lahir menjadi TglLahir, Tgl_Lahir, Tgl_Lhr

16. Fungsi Database Dalam SQL Suatu database adalah sebuah struktur yang umumnya dikategorikan dalam 2 hal yaitu sebuah database flat dan sebuah database relasional. Database relasional lebih disukai karena lebih masuk akal dibandingkan database flat. MySQL adalah sebuah database relasional. Pada database yang memiliki struktur relasional, ada tabel-tabel yang menyimpan data. Setiap tabel terdiri dari kolom dan baris. Sebuah kolom mendefinisikan jenis informasi apa yang akan disimpan. Kita memerlukan kolom khusus untuk setiap jenis informasi yang ingin kita simpan. Baris adalah data aktual yang disimpan. Setiap baris dari tabel adalah masukan dari tabel tersebut dan berisi nilai-nilai untuk setiap kolom tabel tersebut. MySQL merupakan database yang mendukung Relational Database Management System (RDBMS). Sebagai database yang mendukung RDBMS, database ini terbukti telah banyak digunakan dalam berbagai kebutuhan pendokumentasian data. MySQL merupakan database server yang juga dapat berjalan sebagai Client. Dengan kemampuan tersebut, database ini mampu berjalan padasistem jaringan, baik lokal mauopun WAN (internet). Saat ini

database MySQL banyak digunakan untuk membuat aplikasi-aplikasi berbasis online seperti web.

Fungsi-fungsi MySQL Text Function Dengan text function kita dapat menambah data berupa teks ke dalam database. Text function memakai tipe data CHAR, VARCHAR atau TEXT. Perlu diperhatikan bahwa text function hanya dapat dipergunakan untuk table MyISAM. Concatenation Aliases Concatenation atau penggabungan karakter dapat dilakukan dengan fungsi CONCAT dan CONCAT_WS yang merupakan bagian dari string function. Pada fungsi CONCAT, karakter-karakter yang ingin digabungkan tidak boleh mengandung tanda jeda. Numeric Function Numeric function (fungsi numerik) terdiri dari operator aritmatika dan fungsi matematis. Operator aritmatik terdiri dari : + (penambahan), - (pengurangan), * (perkalian), / (pembagian) dan div (sisa pembagian). Date dan Time Function Date dan time function berguna untuk menulis data berupa tanggal dan hari/waktu. Date dan function ditulis menggunakan DATETIME, DATE, TIMESTAMP, TIME dan YEAR.

•

DATETIME digunakan apabila kita memerlukan nilai yang berisi informasi tentang tanggal dan waktu.

• •

DATE digunakan untuk menampilkan tanggal, tanpa adanya waktu. Kolom TIMESTAMP berisi property yang berbeda-beda, tergantung versi MySQL dan mode server MySQL yang dijalankan. TIME tidak

hanya dapat digunakan untuk menampilkan waktu tetapi juga dapat digunakan untuk menampilkan waktu diantara dua kejadian.

•

YEAR digunakan untuk menunjukkan tahun.

Encryption Function Encryption function merupakan fungsi yang digunakan untuk melakukan enkripsi dan dekripsi data. Permasalahan enkripsi data biasanya berhubungan dengan password. Enkripsi merupakan proses pengaburan data ke bentuk lain yang tidak mudah ditebak, namun dapat di ubah ke bentuk semula (dekripsi) apabila diperlukan. Kita dapat menyimpan hasil dari encryption function yang biasanya terdiri dari bilangan yang berubah-ubah bengan menggunakan kolom BLOB sebagai ganti kolom CHAR atau VARCHAR untuk menghindari masalah yang dapat timbul karena perubahan ruang sehingga mengubah nilai. Perintahperintah dalam encryption function, antara lain :

• •

CRYPT, melakukan proses enkripsi data.

•

PASSWORD, mengenkripsi password MySQL dan disimpan dalam kolom password di grant table pengguna.

•

SHA (string), digunakan untuk menyimpan password.

MD5, menghasilkan enkripsi berupa sederetan karakter dengan jumlah digit 32.

Grouping Function Grouping function digunakan untuk menampilkan data tabel berdasarkan suatu group tertentu. Apabila kita menggunakan grouping function pada statemen yang tidak mengandung klausa GROUP BY maka hal tersebut sama dengan membuat grouping untuk semua baris dalam tabel. Grouping function dapat dibagi menjadi tiga kategori, yaitu : 1.

Fungsi Jumlah (Aggregate) GROUP BY

•

AVG ( [DISTINCT] expr), menghasilkan nilai rata-rata (avarage) dari expr.

•

COUNT (expr), menghasilkan jumlah nilai non-NULL pada baris-baris tabel yang ditampilkan dengan pilihan SELECT. 74

•

GROUP_CONCAT, menghasilkan nilai string dengan menggabungkan/ concatenated nilai non-NULL yang berasal dari sebuah grup.

•

MAX ( [DISTINCT] expr), menghasilkan nilai maksimal dan minimal dari expr.

•

Modifier GROUP BY Klausa GROUP BY yang diikuti oleh modifier WITH ROLLUP menyebabkan tambahan baris tabel pada hasil keluaran.

•

GROUP BY menggunakan field tersembunyi MySQL menambah penggunaan GROUP BY sehingga kita dapat menggunakan kolom atau perhitungan dari daftar SELECT yang tidak tampak pada klausa GROUP BY. Hal ini berlaku untuk nilai yang mungkin untuk group ini. Kita dapat menggunakan perintah ini untuk meningkatkan performance dengan menghindari sorting dan grouping dari data-data yangb tidak diperlukan.

Function yang lainnya, antara lain :

•

BIT Function MySQL menggunakan arithmetic BIGINT (64-bit) untuk opoerasional bit sehingga operator yang digunakan mempunyai range maksimum 64 bit

•

Information Function CHARSET (str), menentukan jenis karakter dari argumen string. COERCIBILITY (str), menghasilkan nilai hubungan coercibility (dapat dihubungkan) dari argumen string. CONNECTION_ID, menghasilkan ID oneksi untuk koneksi yang sedang berlangsung. CURRENT_USER ( ), menghasilkan kombinasi nama user dan nama host pada sesi saat ini yang terautentifikasi. Hasil output dapat berbeda dari nilai USER (). DATABASE ( ), menampilkan nama database yang sedang digunakan.

VERSION ( ), menampilkan versi MySQL yang sedang aktif. FORMAT (X , D), memformat jumlah X sebanyak D decimal.

Aktivitas 1. 2. 3.

Lecturing Reflection Discussion

Ulasan 1. 2. 3.

Apakah Database itu? Apakah MySQL itu ? Buatlah query minimal 3 table dan saling berelasi dari kasus yang Anda gemari dan sertakan query penambahan data pada masing-masing table tersebut.

Topik

Pengenalan PHP 17. Pengenalan PHP Pengertian PHP Hypertext Preprocessor (PHP) adalah bahasa pemrograman script yang paling banyak dipakai saat ini atau dalam kata lain bisa diartikan sebuah bahasa pemrograman web yang bekerja di sisi server (server side scripting) yang dapat melakukan konektifitas pada database yang di mana hal itu tidak dapat dilakukan hanya dengan menggunakan sintaks-sintaks HTML biasa. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain. PHP juga dapat dilihat sebagai pilihan lain dari ASP.NET/C#/VB.NET Microsoft, ColdFusion Macromedia, JSP/Java Sun Microsystems, dan CGI/Perl. Contoh aplikasi lain yang lebih kompleks berupa CMS yang dibangun menggunakan PHP adalah Mambo,Joomla!, Postnuke, Xaraya, dan lain-lain.

Sejarah Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs Personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modulmodul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP dirubah menjadi akronim berulang PHP: Hypertext Preprocessing. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi webkompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.

Kelebihan Dari Bahasa Pemrograman Lain •

Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.

•

Web Server yang mendukung PHP dapat ditemukan dimana-mana mulai dari apache, IIS , Lighttpd, nginx, hingga Xitami dengan konfigurasi yang relatif mudah.

•

Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis dan developer yang siap membantu dalam pengembangan.

•

Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.

•

PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix , Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintahperintah sistem.

Penggunaan Dasar PHP PHP memiliki tipe variable Variant artinya Anda dapat menuliskan isian nilai dari sebuah variable sesuka hati Anda, tanpa perlu memperhatikan tipe data dari variable tersebut.

Contoh Penulisan Variable PHP <?php // http://localhost/pemrogramanweb/pertemuan-2/latihan1.php // ini contoh $var = "nilai variable"; $gabung = "selamat " . "pagi"; $nilai = 2; $boolean = true; echo $var; echo $gabung; echo $nilai; echo $boolean; Keterangan – Keterangan

• • •

<?php adalah syarat wajib untuk membuka baris printah PHP.

•

.Concate, sebuah pernyataan yang berfungsi untuk menggabung dua buah nilai (bukan menambahkan dua buah nilai).

• • •

“ adalah penanda bahwa itu adalah string, contoh “string”, “nilai”

// komentar/ mematikan baris printah, contoh lain /* komentar */ $ adalah inisialisasi yang menyatakan bahwa ini adalah sebuah variable di ikuti nama variable, contoh: $nilai, $angka, $isian.

; adalah akhiran penggunaan sebuah pernyataan/ variable. echo adalah mengeluarkan hasil dari sebuah variable.

Contoh Keterangan :

• •

$a + $b Penambahan. $a – $b Pengurangan.

• • • • •

$a * $b Perkalian. $a / $b Pembagian. $a % $b Sisa hasil bagi. $a, $b adalah Operan +, -, *, /, % adalah Operator

Contoh Penggunaan <?php // http://localhost/pemrogramanweb/pertemuan-2/latihan2.php $a = 10; $b = 5; $tambah = $a + $b; $kurang = $a - $b; $kali = $a * $b; $bagi = $a / $b; $sisa = $a % $b; $gabung = ($a + $b - ($b * $a)); echo $a; echo $b; echo $tambah; echo $kurang; echo $kali; echo $bagi; echo $sisa; echo $gabung; ?> Selain echo, php juga memiliki output lainnya yaitu print, print_r. print penggunaanya sama persis dengan echo, sedangkan print_r di gunakan untuk mengeluarkan nilai dari sebuah array.

Array Array merupakan tipe data terstruktur yang berguna untuk menyimpan sejumlah data yang bertipe sama. Bagian yang menyusun array disebut elemen

array, yang masing-masing elemen dapat diakses tersendiri melalui indeks array. Array berdimensi satu <?php $kota[0] = "Yogyakarta"; $kota[1] = "Jakarta"; $kota[2] = "Malang"; $kota[3] = "Purwokerto"; print ("Kota favorit saya adalah $kota[2]"); ?> Kode di atas bila dijalankan pada browser, akan tampil tulisan : Kota favorit saya adalah Malang. Indeks array dimulai dari 0. Jadi indeks array 0 menyatakan elemen pertama dari array, indeks array 1 menyatakan elemen array kedua, dan seterusnya. Array multidimensi Yang termasuk dalam tipe data ini adalah bilangan bulat (tidak pakai koma), contoh : <?php $buaht = array ( "apel" => array( "warna" => "merah", "rasa" => "manis" ), "pisang" => array( "warna" => "kuning", "rasa" => "manis")); print ("Warna buah apel adalah "); print ($buah["apel"]["warna"]).""; print ("Rasa buah pisang adalah "); print ($buah["pisang"]["rasa"]); ?> Kode di atas akan menghasilkan tulisan Warna buah apel adalah merah Rasa buah pisang adalah manis.

Variable Dalam PHP setiap nama variable diawali tanda dollar ($). Misalnya nama variable a dalam PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya program dan tergantung pada konteks yang digunakan. File contoh2.php: <?php $a=”5”; $b=”2”; $hasil=$a+$b; echo($hasil); ?> hasilnya adalah: 7 Struktur Kontrol If Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Cara penulisannya adalah sebagai berikut: if (syarat) { statement } atau: if (syarat) { statement } else { statement lain}

atau: if (syarat pertama) statement pertama } elseif (syarat kedua) { statement kedua }else { statement lain } While Bentuk dasar dari statement While adalah sebagai berikut: while (syarat) { statement } Arti dari statement While adalah memberikan perintah untuk menjalankan statement di bawahnya secara berulang-ulang, selama syaratnya terpenuhi. For Cara penulisan statement FOR adalah sebagai berikut: for (ekspresi1; ekspresi2 ; ekspresi3) statement ekspresi1 menunjukkan nilai awal untuk suatu variable ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statement ekspresi3 menunjukkan pertambahan nilai untuk suatu variable File contoh7.php: <?php for ($a=0;$a<10;$a++) {

echo(“Nilai A = ”); echo(“$a”); echo(“ ”); } ?> Switch Statement SWITCH digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan. Struktur Switch adalah sebagai berikut: switch (variable) case nilai: statement case nilai: statement case nilai: statement File contoh8.php: <?php p>$a=2; switch($a) { case 1: echo(“Nilai variable a adalah satu”); break; case 2: echo(“Nilai variable a adalah dua”); break; case 3: echo(“Nilai variable a adalah tiga”); break; } ?>

Require Statement Require digunakan untuk membaca nilai variable dan fungsi-fungsi dari sebuah file lain. Cara penulisan statement Require adalah: require(namafile); Statement Require ini tidak dapat dimasukkan diadalam suatu struktur looping misalnya while atau for. Karena hanya memperbolehkan pemangggilan file yang sama tersebut hanya sekali saja. File contoh9.php: <?php $a=”Saya sedang belajar PHP”; function tulistebal($teks) { echo(“$teks”); } ?> File contoh10.php: <?php require(“contoh9.php”); tulistebal(“Ini adalah tulisan tebal”); echo(“”); echo($a); ?> Include Statement Include akan menyertakan isi suatu file tertentu. Include dapat diletakkan di dalam suatu looping misalkan dalam statement for atau while. File contoh11.php: <?php echo(“--------------------------------------”); echo(“PHP adalah bahasa scripting”);

echo(“--------------------------------------”); echo(“ ?>

”);

File contoh12.php: <?php for ($b=1; $b<5; $b++) { include(“contoh11.php”); } ?>

Aktivitas Ice Breaking 1. Lecturing 2. Reflection 3. Discussion

Ulasan 1. Buatlah script sederhana PHP untuk membuat buku tamu. Script ini termasuk menghubungkan dengan database buku tamu di MySQL. Fungsi dalam script PHP minimal terdapat insert, edit, delete, dan view.

Topik

Pengenalan Web Services 18. Pengenalan Web Service Web service adalah suatu sistem perangkat lunak yang dirancang untuk mendukung interoperabilitas dan interaksi antar sistem pada suatu jaringan. Web service digunakan sebagai suatu fasilitas yang disediakan oleh suatu web site untuk menyediakan layanan (dalam bentuk informasi) kepada sistem lain, sehingga sistem lain dapat berinteraksi dengan sistem tersebut melalui layananlayanan (service) yang disediakan oleh suatu sistem yang menyediakan web service. Web service menyimpan data informasi dalam format XML, sehingga data ini dapat diakses oleh sistem lain walaupun berbeda platform, sistem operasi, maupun bahasa compiler. Web service bertujuan untuk meningkatkan kolaborasi antar pemrogram dan perusahaan, yang memungkinkan sebuah fungsi di dalam web service dapat dipinjam oleh aplikasi lain tanpa perlu mengetahui detil pemrograman yang terdapat di dalamnya. Beberapa alasan mengapa digunakannya web service adalah sebagai berikut:

â&#x20AC;˘

Web service dapat digunakan untuk mentransformasikan satu atau beberapa bisnis logic atau class dan objek yang terpisah dalam satu ruang lingkup yang menjadi satu, sehingga tingkat keamanan dapat ditangani dengan baik.

â&#x20AC;˘

Web service memiliki kemudahan dalam proses deployment-nya, karena tidak memerlukan registrasi khusus ke dalam suatu sistem operasi. Web service cukup di-upload ke web server dan siap diakses oleh pihak-pihak yang telah diberikan otorisasi.

â&#x20AC;˘

Web service berjalan di port 80 yang merupakan protokol standar HTTP, dengan demikian web service tidak memerlukan konfigurasi khusus di sisi firewall.

19. Arsitektur Web Service Web service memiliki tiga entitas dalam arsitekturnya, yaitu:

â&#x20AC;˘

Service Requester (peminta layanan): Peminta layanan yang mencari dan menemukan layanan yang dibutuhkan serta menggunakan layanan tersebut.

â&#x20AC;˘

Service Provider (penyedia layanan): Berfungsi untuk menyediakan layanan/service dan mengolah sebuah registry agar layanan-layanan tersebut dapat tersedia.

â&#x20AC;˘

Service Registry (daftar layanan): Berfungsi sebagai lokasi sentral yang mendeskripsikan semua layanan/service yang telah di-register. Service Registry

2. Find Service

1. Publish Service

3. Bind to Service

Service Requester

Service Provider

Gambar 20. Arsitektur Web Service

Operasi-Operasi Web Service Secara umum, web service memiliki tiga operasi yang terlibat di dalamnya, yaitu: 1. 2.

Publish/Unpublish: Menerbitkan/menghapus layanan ke dalam atau dari registry. Find: Service requestor mencari dan menemukan layanan yang dibutuhkan.

Bind: Service requestor setelah menemukan layanan yang dicarinya, kemudian melakukan binding ke service provider untuk melakukan interaksi dan mengakses layanan/service yang disediakan oleh service provider.

Komponen-Komponen Web Service Tabel 2. Komponen Web Service

Service Publication and Discovery (UDDI) Service Description (WSDL) XML Based Messaging (SOAP) Common Internet Protocols (HTTP, TCP/IP) Web service secara keseluruhan memiliki empat layer komponen seperti pada gambar di atas, yaitu: 1. 2.

Layer 1: Protokol internet standar seperti HTTP, TCP/IP. Layer 2: Simple Object Access Protocol (SOAP), merupakan protokol akses objek berbasis XML yang digunakan untuk proses pertukaran data/informasi antar layanan. Layer 3: Web Service Definition Language (WSDL), merupakan suatu standar bahasa dalam format XML yang berfungsi untuk mendeskripsikan seluruh layanan yang tersedia.

Aktivitas Ice Breaking 1. Lecturing 2. Reflection 3. Discussion

Ulasan 1. Buatlah makalah lengkap tentang web service di setiap layer nya.

Topik

Web 2.0 dan Web 3.0 20. Pengenalan Web 2.0 Meskipun sudah menjadi pembicaraan sejak tahun 2004, Web 2.0 bukanlah kata yang familiar bagi pengguna internet. Masih banyak pengguna yang mempertanyakan maksud dan manfaat dari penggunaan Web 2.0, terutama jika dibandingkan dengan web yang telah mereka kenal selama ini. Ketika Web 2.0 disebut sebagai tahap kedua dari perkembangan web yang telah ada saat ini, muncul kekhawatiran akan tidak kompatibelnya versi web tersebut dengan program web browser yang dimiliki pengguna. Padahal tidak ada satupun teknologi di sisi pengguna (client) yang perlu di-upgrade untuk dapat mengakses web tersebut. Perkembangan web 2.0 lebih menekankan pada perubahan cara berpikir dalam menyajikan konten dan tampilan di dalam sebuah website. Sebagian besar cara berpikir tersebut mengadaptasi gabungan dari teknologi web yang telah ada saat ini. Walaupun definisi mengenai Web 2.0 masih belum secara utuh diformulasikan sampai hari ini, ada pihak yang mengatakan bahwa Web 2.0 lebih menekankan pada social network atau jaringan sosial antara penggunanya seperti yang telah kita lihat selama ini dalam dunia Blog

Menurut definisi oleh Tim Oâ&#x20AC;&#x2122;Reilly (pendiri dari Oâ&#x20AC;&#x2122;Reilly Media), Web 2.0 adalah â&#x20AC;&#x153;sebuah revolusi bisnis pada industri komputer yang dikarenakan oleh perpindahan 91 Internet menjadi sebuah platformâ&#x20AC;?.

(Konek edisi 5 Februari 2006). Dengan adanya RSS di dalam Blog, informasiinformasi di dalam sebuah Blog dimungkinkan dapat diadaptasi, dikoleksi, dan di-share untuk menjadi bagian dari Blog lainnya. Namun Oâ&#x20AC;&#x2122;Reilly dan MediaLive International menekankan bahwa Web 2.0 merupakan sebuah platform bagi aplikasi. Mereka mendeskripsikan hal ini sebagai sebuah software yang berjalan melalui media internet dengan bantuan web browser dan tidak perlu diinstalasi terlebih dahulu seperti softwaresoftware yang umumnya kita gunakan sehari-hari. Bahkan konsep mengenai sistem operasi di dalam web juga masuk dalam definisi tersebut di dalam konferensi Web 2.0 pada tahun 2005. Sebelum muncul istilah web 2.0 yang sering digunakan adalah istilah semantic web.

Prinsip Web 2.0 1. 2. 3. 4.

5. 6. 7.

Web sebagai platform. Data sebagai pengendali utama. Efek jaringan diciptakan oleh arsitektur partisipasi. Inovasi dalam perakitan sistem serta situs disusun dengan menyatukan fitur dari pengembang yang terdistribusi dan independen (semacam model pengembangan "open source"). Model bisnis yang ringan, yang dikembangkan dengan gabungan isi dan layanan. Akhir dari siklus peluncuran (release cycle) perangkat lunak (perpetual beta). Mudah untuk digunakan dan diadopsi oleh user.

Karakteristik Web 2.0 Ada beberapa karakteristik yang menggambarkan suatu situs merupakan situs tipe web 2.0. Terdapat tujuh prinsip yang mendasari karakter Web 2.0, yaitu: â&#x20AC;˘

Karakteristik pertama antara lain web sebagai platform dimana menjadikan web sebagai tempat bekerja di manapun Anda berada. Cukup dengan membuka web browser, Anda dapat mengerjakan tugas mengetik dokumen, perhitungan keuangan, atau merancang presentasi melalui aplikasi-aplikasi yang telah disediakan dan dapat dijalankan secara langsung melalui internet.

•

Karakteristik kedua,adanya partisipasi dari pengguna dalam berkolaborasi pengetahuan. Hal ini mengingatkan akan pemberian kepercayaan kepada pengguna internet untuk dapat berpartisipasi dalam berbagi pengetahuan di Wikipedia, sebuah ensiklopedia berbasis web yang disusun berdasarkan masukan-masukan pengguna internet di seluruh dunia. Karakteristik ketiga, data menjadi trademark-nya aplikasi, mengingatkan kita pada slogan “Intel Inside” yang telah melambungkan nama prosesor Intel dikalangan pengguna komputer. Trademark tersebut telah menjadi suatu garansi kepercayaan dari pengguna akan kemampuan komputer yang akan ataupun sudah dibelinya. Maksud yang sama juga diusung oleh karakteristik ketiga ini, dimana penyuplai data akan memberikan trademark yang akan digunakan oleh pemilik website untuk memberikan garansi kepercayaan kepada pengunjungnya. Sebagai contoh adalah “Nevteq Onboard” untuk data peta pada sistem navigasi GPS dan “Powered by Google” untuk dukungan Google Maps pada peta dunia berbasis web. Karakteristik keempat, web 2.0 sebagai akhir dari siklus peluncuran produk software, mengilustrasikan setiap produsen software tidak lagi meluncurkan produknya dalam bentuk fisik. Karena web menjadi platform, pengguna cukup datang ke website untuk menjalankan aplikasi yang ingin mereka gunakan. Hasil dari pengembangan fitur di dalam software dapat langsung dirasakan oleh pengguna. Software tidak lagi dijual sebagai produk namun berupa layanan (service). Produsen yang memberikan pelayanan yang cepat dan bagus, akan menjadi pilihan pengguna. Karakteristik kelima, dukungan pada pemrograman yang sederhana dan ide akan web service atau RSS. Ketersediaan RSS akan menciptakan kemudahan untuk di-remix oleh website lain dengan menggunakan tampilannya masing-masing dan dukungan pemrograman yang sederhana. Karakteristik keenam, software tidak lagi terbatas pada perangkat tertentu. Hal ini mempertegas posisi web sebagai platform dimana setiap perangkat dapat mengaksesnya. Komputer tidak lagi menjadi satu-satunya perangkat yang dapat menjalankan berbagai aplikasi di internet. Setiap aplikasi harus didesain untuk dapat digunakan pada komputer pribadi, perangkat genggam seperti ponsel dan PDA, ataupun server internet.

â&#x20AC;˘

Sedangkan karakteristik terakhir, adanya kemajuan inovasi pada antarmuka (interface) di sisi pengguna. Dukungan AJAX yang menggabungkan HTML, CSS, Javascript, dan XML pada Yahoo!Mail Beta dan Gmail membuat pengguna merasakan nilai lebih dari sekedar situs penyedia e-mail. Kombinasi media komunikasi seperti Instant Messenger (IM) dan Voice over IP (VoIP) akan semakin memperkuat karakter Web 2.0 di dalam situs tersebut.

Perbedaan Antara Web 1.0 dan Web 2.0 Menurut Wikipedia, yang menjadi kunci perbedaan dalam Web 1.0 dan Web 2.0 adalah: â&#x20AC;˘

â&#x20AC;˘

Keterbatasan pada Web 1.0 yang mengharuskan pengguna internet untukdatang ke dalam website tersebut dan melihat satu persatu konten di dalamnya. Sedangkan Web 2.0 memungkinkan pengguna internet dapat melihat konten suatu website tanpa harus berkunjung ke alamat situs yang bersangkutan. Selain itu, kemampuan Web 2.0 dalam melakukan aktivitas drag and drop, auto complete, chat, dan voice seperti layaknya aplikasi desktop, bahkan berlaku seperti sistem operasi, dengan menggunakan dukungan AJAX atau berbagai plug-in (API) yang ada di internet. Hal tersebut akan merubah paradigma pengembang sofware dari distribusi produk menjadi distribusi layanan. Sedangkan karakter lainnya, kolaborasi dan partisipasi pengguna, ikut membantu memperkuat perbedaan pada Web 2.0. Suatu website dapat saja memasukkan beberapa bahkan tujuh karakter Web 2.0 di dalam situs yang dibangunnya. Semakin banyak karakter yang masuk ke dalam website tersebut, suatu situs akan mendekati Web 2.0.

Gambar 21. Perbedaan Web 1.0 vs Web 2.0. Sumber: http://www.sizlopedia.com/2007/08/18/web-10-vs-web-20-the-visual-difference/

Contoh untuk mempermudah pemahaman konsep Web 2.0 adalah dengan melihat contoh perbandingan antara website konvensional (Web 1 .0) dengan website yang telah termasuk kedalam Web 2.0. Pada era booming dot com, sedemikian banyak orang yang membuat website pribadi sehingga halaman pertamanya rata - rata menuliskan â&#x20AC;&#x153;Welcome to My Personal Homepageâ&#x20AC;?, tidak lupa menambahkan fasilitas buku tamu dan web counter. Dengan perubahan kearah konsep Web 2.0, website-website pribadi itu menjelma menjadi blog. Blog adalah Web 2.0, sehingga kita akan terlihat ketinggalan zaman ketika menanyakan kepada rekan kita apakah telah memiliki website pribadi, tetapi akan terlihat lebih modern dan gaul ketika menanyakan apakah ia memiliki blog. Hal tersebut adalah sebuah revolusi yang jelas terlihat pada industri komuter saat ini. Secara teknis mungkin tidak ada hal yang benar benar merupakan teknologi baru untuk membuat blog, tetapi lihatlah bahwa sebuah web yang menyediakan host service blog, seperti wordpress.com, blogspot.com, 95

dan lain sebagainya secara strategis telah menjadi sebuah platform untuk komunitas blogger berkolaborasi. Contoh-contoh lain transformasi Web 1 .0 menjadi Web 2.0 terdapat pada tabel berikut. Tabel 3. Transformasi web 1.0 menjadi Web 2.0

Web 1.0 Double Clik Ofoto Akamai Mp3.com Britannica Online Personal websites Evite Domain name speculation Page Views Screen scraping Publishing Content management system Directories (Stickiness) Stickiness

Web 2.0 Google AdSense Flickr BitTorrent Napster Wikipedia Blogging Upcomming.org and EVDB Search engine optimization Cost per click Web services Participation Wikis Tagging (â&#x20AC;&#x153;focksonomyâ&#x20AC;?) Syndication

Yang terpenting bukanlah klaim sebagai Web 2.0, namun mampukah dampak perkembangan tersebut menjembatani pengguna internet dengan kepentingan perusahaan, komunitas, atau Anda dengan menggunakan Web 2.0?

21. Pengenalan Web 3.0 Kembali kita ulas perbedaan utama dari setiap generasi Web, pada Web 1.0 masih bersifat read-only, pada Web 2.0 bergerak ke arah read-write, sedangkan pada Web 3.0 mengembangkan hubungan manusia ke manusia, manusia ke mesin, dan mesin ke mesin. Pada Web 2.0 kegiatan jejaring sosial sudah dimulai, dengan semakin popularnya berbagai fasilitas seperti wikipedia, blog, 96

friendster dan sebagainya. Tetapi kendala utama pada Web 2.0 adalah penangan untuk pertukaran data atau interoperabilitas masih sulit. Web 3.0 mencoba menyempurnakan Web 2.0 dengan memberikan penekanan penelitian pada Semantic Web, Ontology, Web Service, Social Software, Folksonomies dan Peer-to-Peer. Penelitian ini sangat memperhatikan ‘budaya’ sebuah komunitas terhadap kebutuhan akan sebuah data atau informasi.

Teknologi Web 2.0 dan Bayangan Web 3.0 Konsep Web 2.0 membawa perubahan besar dalam cara pandang terhadap Web. Fitur teknologi yang ditawarkan antara lain : •

Rich Internet Application RIA merupakan aplikasi website yang memiliki fitur dan fungsi layaknya aplikasi desktop. Alhasil tempilan web semakin kaya. RIA dapat diimplementasikan dengan Ajax, Silverlight, Flash, Google Web Toolkit, dan sebagainya.

•

Folksonomy Folksonomy merupakan metode untuk menciptakan dan mengatur tag dalam mengategorikan konten. Pada Web 2.0 pemberian tag tidak hanya menggunakan sebatas teks hyperlink, namun dapat berupa image.

•

Mashup Merupakan aplikasi web yang melakukan kombinasi data banyak sumber dalam satu konten. Contohnya terlihat pada Google Map yang mengambil data dari Google dan data real estate Craiglist. Metode pengambilan data dapat melalui web feed (RSS atau Atom), web servicer, ataupun screen scraping.

â&#x20AC;˘

Software Wiki/Forum Disini terlihat kebebasan akses pengunjung dalam mengubah konten web. Contohnya dapat dilihat di Wikipedia dan beberapa situs-situs forum.

â&#x20AC;˘

Syndication Syndication menyediakan web feed sehingga memungkinkan pengguna dapat mengetahui konten web tanpa harus mengunjungi web tersebut. Format yang umum digunakan adalah RSS dan Atom. Syndication digunakan untuk berkolaborasi atau bahkan memonitori.

Konsep Web 3.0 Beberapa pengamat web mulai membayangkan konsep web dimasa depan. Beberapa bayangan konsep Web 3.0 antara lain: â&#x20AC;˘

Realisasi Semantic Web Semantic web cukup dipercaya sebagai wujud dari Web mendatang, dengan kecerdasan buatan, Web mendatang diharapkan akan merealisasikan konsep semantic web dan menjadi generasi selanjutnya dari WWW.

â&#x20AC;˘

Evolusi 3D Tidak mengherankan bahwa kemampuan 3D selalu merupakan cerminan masa depan, evolusi 3D telah terjadi pada game animasi, dan lain-lain, walaupun saat ini masih belum mengubah mayoritas wajah web. Tampilan 3D bisa jadi memang dihindari oleh sebagian pengakses Internet karena tampilan dan proses 3D berarti pula pertukaran data yang lebih besar dan tentu berpengaruh pada kecepatan maupun biaya yang dikeluarkan. Tentunya, evolusi 3D ini hanya akan berhasil jika infrastruktur di masa mendatang telah mendukung pengguna Internet pada umumnya.

â&#x20AC;˘

Web sebagai Database Masih sering kita dengar istilah web statik dan web dinamis, Skema Web Ontology Language (OWL) web statik menunjukkan bahwa website tersebut selalu memberikan informasi yang sama sebagai respon pada setiap pengunjung yang mengaksesnya. Sementara web dinamis merupakan kebalikannya, di mana informasi yang diberikan website tersebut dapat berubah secara interaktif tergantung pada kondisi dan konteks yang distimulasikan oleh pengguna. Pada Web mendatang, diharapkan website merupakan database dan tentunya semakin interaktif dan dinamis kepada pengunjung, atau dinamakan dengan Data Web. Salah satu teknologi yang dikembangkan adalah Simple Protocol and RDF Query Language (SPARQL) yang menyediakan bahasa query standard dan Application Programming Interface (API) untuk menelusuri database RDF yang terdistribusi pada website.

â&#x20AC;˘

Executable Pengunjung akan ditambah lagi hak menjadi executable, mengizinkan Anda memodifikasi website itu sendiri. Dapat disimpulkan untuk mewujudkan Web mendatang, maka harus didukung oleh kemampuan dan teknologi yang merealisasikan transformasi dari web yang terpisah secara aplikasi dan penyimpanan data, menjadi saling berinteraksi sesama mesin. Interaksi tidak hanya terjadi antara pengunjung dan website, tetapi juga di antara website itu sendiri dalam formatnya sendiri. Istilah World Wide Web bisa jadi berubah menjadi World Wide Database untuk menunjukkan database yang terdistribusi dan dimungkinkan dengan adanya teknologi yang mendukung semantic web.

Aktivitas Ice Breaking 1. Lecturing 2. Reflection 3. Discussion

Ulasan 1. Tuliskan contoh-contoh situs yang menggunakan konsep web 2.0. 2. Diskusikan dengan teman kelompok Anda tema dan topik website yang dapat Anda ciptakan menggunakan konsep web 2.0 atau web 3.0. Buatlah beberapa daftar yang menarik untuk dikembangkan. THINK OUT OF THE BOX!

100

Daftar Pustaka [1] Anhar, ST. Panduan Menguasai PHP & MYSQL Secara Otodidak. Jakarta Selatan: Mediakita, 2010. [2] Anonymous. Web 1.0 vs Web 2.0, the Difference. http://www.sizlopedia.com/2007/08/18/web-10-vs-web-20-thevisual-difference/ [3] Anonymous. What Is the Internet? http://www.internetsociety.org/internet/what-internet [4] Arbie. Manajemen Database dengan MySQL. Yogyakarta: ANDI. 2003 [5] Hakim, Lukmanul dan Musalini, Uus. Cara Mudah Memadukan Web Design dan Web Programming. Jakarta: Elex Media Komputindo, 2004. [6] Imansyah, Muhammad. PHP dan MySQL Untuk Orang Awam. Palembang: Maxikom, 2003. [7] Kadir, Abdul. Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta: ANDI, 2002. [8] Saputra, Ramadani. Simple Step Programming with CSS. Jakarta: PT. Elex Media Komputindo, 2010. [9] Pilgrim, Mark. Dive Into HTML5, http://diveintohtml5.info/ [10] Web Services Architecture, http://www.w3.org/TR/ws-arch/ [11] Xampp, www.apachefriends.org/en/xampp.html

101

Desain Web Buku Desain Web ini dikembangkan dengan tujuan utama memberikan pemahaman dalam membuat situs web atau dokumen elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Isi buku ini merupakan kompilasi dari materi bahan ajar Desain Web yang dikembangkan oleh para pakar dibidangnya. Bahan ajar ini dikompilasi untuk menyesuaikan kebutuhan materi pendidikan dan pelatihan di SEAMOLEC. Kami menyampaikan terima kasih kepada Direktur SEAMOLEC yang telah memberikan kesempatan dan motivasi sehingga buku ini dapat terwujud. Tidak lupa kami sampaikan kepada rekan-rekan mahasiswa D4 Institut Teknologi Bandung (ITB) angkatan VI tahun 2012, khususnya Chandra Bagus SP, Dimas Fakhrudin, dan Puspa Hariani yang telah memberikan kontribusinya dalam penyusunan buku ini. Akhir kata, saran untuk perbaikan dan pengembangan kualitas bahan ajar ini sangat kami harapkan dan semoga bahan ajar ini dapat bermanfaat bagi siapapun yang membacanya. Terima kasih. Tim Penyusun E-mail Facebook Twitter Edmodo LMS/Moodle Youtube

: wdseamolec@gmail.com : http://www.facebook.com/wdseamolec : @wdseamolec : Desain Web : http://odl.seamolec.org/lms/ : http://www.youtube.com/wdseamolec