Modul Praktikum Internet 20122013 PDF

Daftar Isi
Modul 1 - Pendahuluan .............................................................................................................3 1.1. 1.2. 1.3. 1.4. 1.5. Internet ......................................................................................................................3 Perkembangan Teknologi Internet di Indonesia ........................................................5 Informasi dan Transaksi Elektronik dan Undang-Undang terkait .............................9 Setting Koneksi Internet.......................................................................................... 10 Web Browser........................................................................................................... 11
Modul 2 - Aplikasi Internet Browser ...................................................................................... 16 2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 2.7. 2.8. 2.9. 2.10. Web Browser........................................................................................................... 16 Web 2.0 ................................................................................................................... 18 Adobe Air dan Flash ................................................................................................ 19 Microsoft Silverlight ................................................................................................ 20 Email........................................................................................................................ 20 Scribd dan Slideshare .............................................................................................. 21 Google Scholar ........................................................................................................ 22 Forum ...................................................................................................................... 22 Evernote .................................................................................................................. 27 Literature Searching di Google............................................................................ 28
Modul 3 - Aplikasi Internet Non-Browser .............................................................................. 31 3.1. 3.2. 3.3. 3.4. 3.5. Internet Messenger (IM) ......................................................................................... 31 Email Client ............................................................................................................. 31 Seesmic ................................................................................................................... 36 Flickroom................................................................................................................. 36 Digsby ...................................................................................................................... 37
Terdapat beberapa fitur dalam digsby, yaitu :.................................................................... 37 Modul 4 - Aplikasi Jejaring Sosial ........................................................................................... 39 4.1. Social Networking / Jejaring Sosial .............................................................................. 39 Modul 5 - Aplikasi Berbasis Layanan Cloud............................................................................ 45 5.1. Cloud Computing .................................................................................................... 45
Modul 6 - HTML Scripting Tingkat Dasar............................................................................. 50 6.1. 6.2. Definisi HTML .......................................................................................................... 50 HTML 5 .................................................................................................................... 51 1
Modul Praktikum lnternet 2012/2013
6.3. 6.4.
Format Content dalam HTML ................................................................................. 53 Format Text ............................................................................................................. 54
Modul 7 - HTML Scripting Tata Letak dan Interaktivitas ..................................................... 60 7.1. 7.2. 7.3. 7.4. 7.5. 7.6. 7.7. Frame ...................................................................................................................... 60 Table ........................................................................................................................ 61 Special Tag............................................................................................................... 63 CascadingStyle Sheets (CSS) .................................................................................... 64 Form ........................................................................................................................ 68 Form dan Javascript ................................................................................................ 70 Form dan PHP.......................................................................................................... 72
Modul 8 - HTML Scripting Desain Visual dan Tata Letak dengan CSS 3 .............................. 75 8.1. CSS 3 ............................................................................................................................. 75 Modul 9 - Aplikasi Blog........................................................................................................... 84 9.1. 9.2. 9.3. 9.4. 9.5. 9.6. 9.7. 9.8. 9.9. 9.10. 9.11. Blog Offline.............................................................................................................. 84 Wordpress Offline ................................................................................................... 85 Installasi .................................................................................................................. 86 Pengaturan User ..................................................................................................... 90 Membuat Postingan baru ....................................................................................... 91 Membuat Page Baru ............................................................................................... 94 Menambahkan Link................................................................................................. 95 Wordpress Themes ................................................................................................. 96 Wordpress Widgets................................................................................................. 97 Setting & Konfigurasi .......................................................................................... 98 Import dan Backup data.................................................................................... 101
Modul 10 - Website online Hosting dan Domain .............................................................. 103 10.1. 10.2. 10.3. 10.4. 10.5. Domain .............................................................................................................. 103 Hosting .............................................................................................................. 104 CMS ................................................................................................................... 105 Contoh-contoh CMS .......................................................................................... 105 Cara Mendaftar domain dan hosting ................................................................ 107
2
Modul 1
- Pendahuluan
---------------------------------------------------------
Modul 1 - Pendahuluan
Tujuan : Memahami sejarah perkembangan Internet Memahami perbedaan Internet dan Intranet, serta beberapa layanan pada Internet Mengetahui Perkembangan Internet di Indonesia Memahami Informasi dan Transaksi Elektronik (ITE) Memahami Pasal yang terkait dengan masalah ITE Dapat melakukan konfigurasi untuk melakukan koneksi Internet Dapat melakukan konfigurasi pada browser
1.1. Internet Internet dapat diartikan sebagai jaringan dalam skala luas dan besar yang meliputi seluruh dunia di mana masing-masing perangkat yang berhubungan dapat berkomunikasi antara satu dengan yang lainnya dengan menggunakan suatu bahasa / protokol. Secara bahasa, Internet (kependekan daripada perkataan 'inter-network') ialah rangkaian komputer terhubung menerusi beberapa rangkaian. Di mana Internet (huruf 'I' besar) ialah sistem komputer umum, yang berhubung secara global dan menggunakan TCP/IP sebagai protokol pertukaran paket (packet switching communication protocol). Rangkaian Internet yang terbesar dinamakan Internet [id.Wikipedia.org]. Sedangkan intranet merupakan sebuah organisasi (biasanya perusahaan) yang dilengkapi dengan sebuah atau beberapa web server untuk keperluan organisasi tersebut. Akses ke web server ini hanya dapat dilakukan dari dalam karena dilindungi oleh sebuah firewall. Pada jaringan Internet terdapat banyak layanan baik itu layanan public ataupun private. Salah satunya adalah website seperti web pendidikan, organisasi, bisnis , pemerintah, hiburan, sosial ata komunitas bahkan web pribadi serta layanan seperti elektronik mail, online chat, file transfer dan masih banyak layanan yang terhubung dengan jaringan Internet. 1.1.1 Sejarah Internet Rangkaian pusat yang membentuk Internet diawali pada tahun 1969 sebagai ARPANET, yang dibangun oleh ARPA (United States Department of Defense Advanced Research Projects Agency). Beberapa penyelidikan awal yang disumbang oleh ARPANET termasuk tentang rangkaian tanpa-pusat (decentralised network), teori queueing, dan pertukaran paket (packet switching). Pada 1 Januari 1983, ARPANET menukar protokol rangkaian pusatnya, dari NCP ke TCP/IP. TCP/IP inilah jaringan Internet yang kita gunakan sampai saat ini [id.Wikipedia.org]. 1.1.2 Layanan pada Internet Beberapa layanan popular di Internet seperti elektronik mail (email), newsgroup, file sharing, WWW (world wide web), web radio, musik online, IM (Internet messanger). Diantara layanan tersebut WWW, email, IM merupakan layanan yang sering digunakan karena secara umum bisa diakses dengan menggunakan browser tanpa perlu menginstall aplikasi khusus. WWW lebih sering digunakan dan lebih banyak service yang dibangun yang berjalan pada layanan WWW, seperti milis (Mailing List) dan Weblog, sedangkan email dan IM digunakan untuk berkomunikasi baik secara realtime (IM) atau dengan mengirimkan surat elektronik 3
Modul 1
- Pendahuluan
--------------------------------------------------------(email). Bahkan saat ini layanan seperti social web, sharing media sangat popular, seperti facebook, friendster, flickr, youtube dll. 1.1.3 Internet, internet dan intranet Istilah internet merupakan singkatan dari international network (internetwork) yang berarti jaringan sebuah perusahaan multinasional, lembaga atau badan yang terbatas untuk penggunaan internal. Contohnya jaringan untuk kantor Telkom seluruh Indonesia atau sejumlah client yang terhubung dalam sebuah ISP (internet service provider). Denagn ruanglingkup lebih luas dibandingkan misalny intranet yang hanya terbatas misalnya pada lingkungan kampus (dalam satu tempat).
Sedangkan Internet dengan berawalan I merupakan Public International Network of Networks, dpt digunakan oleh siapa saja dan tidak ada batasan untuk suatu kelompok [RAI YFA]. Contohnya layanan web site seperti google, yahoo, Friendster (tidak ada batasan orang untuk mengaksesnya). Lalu yang disebut dengan intranet adalah jaringan untuk kalangan terbatas baik pembatasan secara fisik (LAN). Contohnya jaringan local ITTelkom seperti website local (ittelkom.ac.id), iefile.stttelkom.ac.id ataupun jaringan local pada 2 buah komputer.
4
Modul 1
INTRANET
- Pendahuluan
---------------------------------------------------------
Server Web internal
Server web internal
server
Server directori internal
Firewall / router
Internet
www.google.com
www.detik.com
1.2. Perkembangan Teknologi Internet di Indonesia Internet di indonesia mulai berkembang pada awal tahun 90-an. Saat itu jaringan internet di Indonesia lebih dikenal sebagai paguyuban network, dimana semangat kerjasama, kekeluargaan & gotong royong sangat hangat dan terasa diantara para pelakunya. Agak berbeda dengan suasana Internet Indonesia pada perkembangannya kemudian yang terasa lebih komersial dan individual di sebagian aktivitasnya, terutama yang melibatkan perdagangan Internet. Sejak 1988, ada pengguna awal Internet di Indonesia yang memanfaatkan CIX (Inggris) dan Compuserve (AS) untuk mengakses internet. Berdasarkan catatan whois ARIN dan APNIC, protokol Internet (IP) pertama dari Indonesia, UI-NETLAB (192.41.206/24) didaftarkan oleh Universitas Indonesia pada 24 Juni 1988. RMS Ibrahim, Suryono Adisoemarta, Muhammad Ihsan, Robby Soebiakto, Putu, Firman Siregar, Adi Indrayanto, dan Onno W. Purbo merupakan beberapa nama-nama legendaris di awal pembangunan Internet Indonesia di tahun 1992 hingga 1994. Masing-masing personal telah mengontribusikan keahlian dan dedikasinya dalam membangun cuplikan-cuplikan sejarah jaringan komputer di Indonesia. Di sekitar tahun 1994 mulai beroperasi IndoNet yang dipimpin oleh Sanjaya. IndoNet merupakan ISP komersial pertama Indonesia. Pada waktu itu pihak POSTEL belum mengetahui tentang celah-celah bisnis Internet & masih sedikit sekali pengguna Internet di Indonesia. Sambungan awal ke Internet dilakukan menggunakan dial-up oleh IndoNet, sebuah langkah yang cukup nekat barangkali. Lokasi IndoNet masih di daerah Rawamangun di kompleks dosen UI, kebetulan ayah Sanjaya adalah dosen UI. Akses awal di IndoNet mula-mula memakai mode teks dengan shell account, browser lynx dan email client pine pada server AIX. Mulai 1995 beberapa BBS di Indonesia seperti Clarissa menyediakan jasa akses Telnet ke luar negeri. Dengan memakai remote browser Lynx di AS, maka pemakai Internet di Indonesia bisa akses Internet. Data Asosiasi Penyelenggara Jasa Internet Indonesia (APJII), ratarata 5
Modul 1
- Pendahuluan
--------------------------------------------------------pertumbuhan internet di Indonesia mencapai 25 persen40 persen per tahun. Di tahun 2008 ini pengguna internet Indonesia diperkirakan 27 juta. Penggunaan internet dari tahun ke tahun akan semakin membludak seiring dengan semakin banyaknya akses poin internet seperti warnet, Wi-Fi di pusat-pusat keramaian, 3G, HSDPA dan lain-lain. Bahkan, bukannya tak mungkin jika proyek Palapa Ring sukses, bakal tersedia bahdwidth Internet bagi 40.000 desa. Terdapat berbagai macam layanan yang menyediakan fasilitas internet di Indonesia, yaitu 1.2.1. TelkomNet Instant TelkomNet Instan merupakan sebuah layanan yang disediakan oleh PT Telekomunikasi Indonesia, Tbk (TELKOM) bagi pengguna internet di Indonesia. Berbagai fitur menarik disediakan oleh layanan ini, antara lain: Mudah/Praktis : tidak perlu mendaftar. Setiap daerah yang telah terjangkau layanan TELKOMNet Instan dapat mengakses Internet langsung tanpa mendaftar. Ekonomis : Tidak perlu mengeluarkan biaya pendaftaran dan biaya bulanan, hanya dikenakan tagihan Internet jika menggunakannya. Cepat : Didukung oleh akses 56Kbps protokol V.90, backbone TELKOMNet dan gateway asimetrik yang sangat sesuai dengan sifat Internet di Indonesia. Lengkap : disediakan Email Nasional gratis, berbasis web 10 MBytes serta berbasis POP3 3 MBytes. Menarik : Didukung oleh situs-situs menarik dan dapat mendengar siaran radio (langsung) maupun acara tunda acara TV melalui TELKOMNet Instan. Terbuka : tersedia ruang ngobrol dalam WEBFORUM di sini. Komunitas Terbanyak : memiliki jumlah pelanggan terbesar di Indonesia dan kaya akan muatan internet. Ada di mana-mana : Saat ini Telkomnet Instan hadir di Berbagai Kabupaten dan Kotamadya di seluruh Indonesia. Cara mengakses TelkomNet Instan cukup mudah. Hanya tinggal angkat telepon, lalu tekan 0809 8 9999 dan tunggu beberapa saat. Untuk mengakses layanan TelkomNet Instan, diperlukan juga sebuah modem, yang umum digunakan ialah modem V.90. Pengaturan konfigurasi yang diperlukan dalam berinternet menggunakan layanan ini ialah Nomor dial : 0809 8 9999 User id : telkomnet@instan Password : Telkom DNS : Sebaiknya dikosongkan , boleh diisi : 202.134.0.155 dan 202.134.2.5 Proxy : Sebaiknya dikosongkan, boleh menggunakan proxies.telkom.net.id 1.2.2. Telkom Speedy Speedy adalah layanan akses Internet end-to-end yang didirikan oleh PT. Telekomunikasi Indonesia, Tbk. (PT. TELKOM),Telkom Speedy 6
Modul 1
- Pendahuluan
--------------------------------------------------------menggunakan teknologi dengan akses Asymmetric Digital Subscriber Line (ADSL). Berbeda dengan layanan internet dengan koneksi dial-up (seperti TelkomNet Instan), Telkom Speedy menggunakan saluran telepon yang dapat dipergunakan untuk menelepon bersamaan dengan akses internet. Namun, untuk dapat menikmati fasilitas saluran telepon dan internet secara simultan, pelanggan Speedy harus mempergunakan splitter yang dapat memisahkan saluran telepon dan saluran modem. Untuk dapat mengakses Speedy, Telkom Speedy tidak dapat mempergunakan modem analog biasa, melainkan harus menggunakan ADSL. Dan pada umumnya modem ASDL ini dijual terpisah. Kecepatan Unduh dan Unggah bergantung dari Paket yang digunakan. Telkom Speedy memiliki kecepatan unduh dan unggah yang berkisar antara 128 kbps dan maksimum hingga 512 kbps (Untuk unggah) dan 384 kbps dan maksimum hingga 768 kbps. Pada saat - saat tertentu, Kecepatan unduh Telkom Speedy dapat mencapai 1 Mbps. Tetapi terkadang, Telkom Speedy hanya memiliki kecepatan di bawah 128 Kbps atau hanya mendapat kecepatan 56 kbps. Dan bahkan tidak memiliki kecepatan sama sekali (0 Kbps / tidak terkoneksi). Disamping kelebihan Telkom Speedy, Telkom Speedy juga memiliki kelemahan. Diantaranya adalah sebagai berikut : Koneksi Telkom Speedy disaat hari - hari tertentu (Pada saat awal bulan ataupun pada saat hari - hari libur) tidak dapat menyambungkan koneksi ke Internet. Di samping koneksi yang terkadang lamban, namun tarifnya tetap sama dan tidak ada penggantian kerugian Layanan Telkom Speedy terkesan kurang atau bahkan sangat buruk sehingga tak jarang pelanggan dibuat pusing dan kecewa hingga akhirnya banyak pelanggan yang beralih ke layanan internet lain maupun berhenti berlangganan
1.2.3. Wajan Bolic
Antenna Wajan, atau Wajanbolic e-goen merupakan terobosan dalam Teknologi RT/RW-net. Antenna Wajanbolic e-goen dapat menjadi client yang murah dalam sebuah RT/RW-net sehingga kita dapat ber Internet dengan murah. Internet murah bukan berarti mencuri bandwidth dan ber Internet gratis, seperti kebanyakan orang menyangka. Internet menjadi murah karena beban biaya di tanggung ramai-ramai oleh banyak mengguna di sebuah RT/RW dalam RT/RW-net Antenna Wajanbolic e-goen di kembangkan oleh Pak Gunadi (Pak Gun) atau lebih di kenal e-goen. Pak Gun berasal dari Jogyakarta alumni STEMBAYO. Sejak 2005awal 2006, sosok e-goen dominan memberikan inspirasi bagi bangsa Indonesia untuk mengembangkan antenna wajan & antenna panci di Indonesia. Antenna wajan yang kemudian dikenal sebagai wajanbolic e-goen menjadi Pak Gunadi dan Wajanbolic e-goen andalan utama bagi mereka yang ingin membangun 7
Modul 1
- Pendahuluan
--------------------------------------------------------RT/RW-net atau Wireless Internet murah di rumahnya dengan modal sekitar Rp. 300-350.000 saja. Pak Gun aktif di mailing list indowli@yahoogroups.com dan mengajarkan subscriber indowli@yahoogroups.com teknik-teknik membuat antenna murah menggunakan wajan, kaleng, pipa pralon. Dengan peralatan yang sangat sederhana kita dapat membangun sambungan Wireless Internet yang cukup jauh untuk menjangkau wilayah lebih dari 2-4 km. Semua frekuensi yang digunakan di Indonesia harus menggunakan ijin dari pemerintah, dalam hal ini di atur oleh Direktorat Jendral Pos & Telekomunikasi (DITJEN POSTEL) di bawah Departemen Komunikasi & Informasi (DEPKOMINFO). Khusus untuk frekuensi operasi wajanbolic e-goen yang berada di band 2.4GHz, sejak tanggal 5 Januari 2005, setelah di tanda tangani Keputusan Menteri No. 2 / 2005 tentang Wireless Internet di 2.4GHz oleh Hatta Rajasa. KEPMEN 2/2005 maka pada prinsipnya frekuensi 2.4GHz bebas digunakan dengan syarat, antara lain, 1. maksimum daya pancar 100mW 2. EIRP maksimum 36dBm 3. semua peralatan yang digunakan di sertifikasi
1.2.4. Warnet Warung Internet (disingkat: warnet) adalah salah satu jenis wirausaha yang menyewakan jasa internet kepada khalayak umum. Warnet banyak dimanfaatkan oleh mahasiswa, pelajar, profesional dan wisatawan asing. Warnet digunakan untuk bermacam-macam tujuan, bagi pelajar, dan mahasiswa warnet banyak digunakan untuk: Mengerjakan tugas atau pekerjaan rumah Melakukan riset Menulis skripsi Bermain permainan daring Bagi masyarakat umum warnet digunakan untuk: Memeriksa kiriman surat elektronik terbaru Melamar pekerjaan Bersosialisasi dan berkomunikasi (chatting) Sarana menikmati hiburan dan lain sebagainya. Umumnya warnet paling banyak terdapat/tersebar terutama di kota-kota besar (ibukota propinsi, kabupaten, dan di kota-kota kecil sebagai penyedia jasa untuk melayani kebutuhan masyarakat di daerah tersebut dalam mengakses informasi. Kebanyakan warnet tersebar di dekat tempat pendidikan seperti Universitas atau SMA. Warnet juga banyak terdapat di tempat-tempat umum dimana orang bersosialisasi seperti Mal, town square, dan sejenisnya. Namun beberapa dari tempat ini atau kafe-kafe tertentu ditempat ini memberikan jasa internet berupa koneksi Wifi (hotspot) yang biasanya gratis karena sudah satu paket dengan biaya yang kita keluarkan saat minum atau makan. Biasanya pengunjung akan mendapat akun untuk memakai internet. 8
Modul 1
- Pendahuluan
--------------------------------------------------------Ada beberapa aplikasi warnet yang bertujuan mencatat siapa yang masuk dan berapa lama dia memakai komputer. Manual adalah cara aplikasi yang paling sederhana dan tradisional dimana penjaga warnet mencatat penggunaan internet menggunakan kertas. Salah satu kekurangannya adalah penjaga warnet yang memutuskan apakah konsumen harus membayar lebih atau tidak. Karena beberapa masalah seperti konsumen gagal memakai komputer tapi tagihan bayaran tetap jalan. Aplikasi Berbasis Jaringan adalah aplikasi otomatis dalam jaringan dimana perhitungan dilakukan saat pengguna memasukkan identitas. Aplikasi ini lebih memudahkan penjaga karena terdapat fungsi-fungsi lainnya selain mencatat waktu seperti memberi diskon atau mengendalikan komputer dari jarak jauh.
1.3.
Informasi dan Transaksi Elektronik dan Undang-Undang terkait Undang-undang Informasi dan Transaksi Elektronik (UU-ITE) adalah ketentuan yang berlaku untuk setiap orang yang melakukan perbuatan hukum sebagaimana diatur dalam Undang-Undang ini, baik yang berada di wilayah hukum Indonesia maupun di luar wilayah hukum Indonesia, yang memiliki akibat hukum di wilayah hukum Indonesia dan/atau di luar wilayah hukum Indonesia dan merugikan kepentingan Indonesia. Beberapa pengertian yang digunakan dalam Undang-Undang ini yaitu: Informasi Elektronik adalah satu atau sekumpulan data elektronik, termasuk tetapi tidak terbatas pada tulisan, suara, gambar, peta, rancangan, foto, electronic data interchange (EDI), surat elektronik (electronic mail), telegram, teleks, telecopy atau sejenisnya, huruf, tanda, angka, Kode Akses, simbol, atau perforasi yang telah diolah yang memiliki arti atau dapat dipahami oleh orang yang mampu memahaminya. Transaksi Elektronik adalah perbuatan hukum yang dilakukan dengan menggunakan Komputer, jaringan Komputer, dan/atau media elektronik lainnya. Dan lain-lain Latar belakang adanya UU ITE ini dikarenakan banyaknya kasus pencemaran nama baik di dunia maya dan kasus kejahatan terhadap transaksi-transaksi elektronik seperti jual beli yang terdapat di internet. Atas transaksi-transaksi tersebut, sudah sewajarnya konsumen, terutama konsumen akhir (end-user) diberikan perlindungan hukum yang kuat agar tidak dirugikan, mengingat transaksi perdagangan yang dilakukan di dunia maya sangat rawan penipuan. Terdapat beberapa pasal yang minimal harus diketahui agar terhindar dari UU ITE ini, diantaranya yaitu:
Pasal 27 ayat (1) Setiap Orang dengan sengaja dan tanpa hak mendistribusikan dan/atau mentransmisikan dan/atau membuat dapat diaksesnya Informasi Elektronik dan/atau Dokumen Elektronik yang memiliki muatan yang melanggar kesusilaan. Pasal 27 ayat (3) Setiap Orang dengan sengaja dan tanpa hak mendistribusikan dan/atau mentransmisikan dan/atau membuat dapat diaksesnya Informasi Elektronik
9
Modul 1
- Pendahuluan
---------------------------------------------------------
dan/atau Dokumen Elektronik yang memiliki muatan penghinaan dan/atau pencemaran nama baik. Pasal 28 ayat (2) Setiap Orang dengan sengaja dan tanpa hak menyebarkan informasi yang ditujukan untuk menimbulkan rasa kebencian atau permusuhan individu dan/atau kelompok masyarakat tertentu berdasarkan atas suku, agama, ras, dan antargolongan (SARA).
1.4.
Setting Koneksi Internet
Banyak cara untuk mendapatkan koneksi terhadap jaringan Internet, secara sederhana dapat digambarkan seperti berikut : 1. User menggunakan Komputer, laptop, handphone, atau pocketpc. 2. Melakukan koneksi internet, misalnya bagi pengguna computer & laptop dapat mengguakan berbagai macam koneksi seperti menggunakan dial-up, koneksi ADSL (contohnya speedy), koneksi dengan menggunakan modem GSM dan menggunakan jaringan umum seperti hotspot atau jaringan Internet kampus (contohnya di ITTelkom dengan vpn virtual private network). 3. Sedangkan untuk pengguna handphone ataupun pocketPC dapat menggunakan layanan GPRS, EDGE, 3G dan HSDPA. 4. Baik koneksi untuk computer, laptop, handphone ataupun pocketPC. Koneksi internet disediakan oleh sebuah ISP (Internet Service Provider). Contoh perusahaan ISP seperti TelkomSpeedy, Astinet, CBN, FASTNET, XL, Indosat, Telkomsel dll. 5. Akhirnya melalui ISP inilah kita terhubung dengan jaringan Internet Nasional (XXI) -> jaringan Internet Internasional. Setting Internet dengan VPN pada windows XP dan 7 1. Pastikan bahwa komputer sudah terhubung dengan jaringan kampus dengan menggunakan ping kepada salah satu IP ataupun mengakses web pada jaringan intranet. 2. Klik start > Control Panel > Network Connections 3. Klik Create a new connection pada panel Network Tasks.
4. Klik Next pada Network Connection Wizard 5. Pilih Connect to the network at my workplace, kemudian > Next.
10
Modul 1
- Pendahuluan
---------------------------------------------------------
6. Pilih Virtual Private Network connection, kemudian > Next.
7. Plih Do not dial the initial connection karena koneksi vpn langsung menggunakan jaringan LAN. 8. Lalu masukkan IP address server VPN (contoh : 10.14.211.120), kemudian klik Next
9. Kemudian pilih Do not use my smart card, kemudian klik next 10. Kemudian klik Finish. Dan untuk melakukan dial VPN-nya Start menu > Connect 1.5. Web Browser
Web Browser adalah perangkat yang berfungsi menampilkan dan melakukan interaksi dengan document-dokumen yang disediakan oleh server web. Browser yang populer seperti Microsoft Internet Explorer yang merupakan paket dari windows, Mozilla Firefox, Opera dan Safari (paket dari Apple dengan OS nya MacOs). Web browser saat ini bukan hanya milik 11
Modul 1
- Pendahuluan
--------------------------------------------------------komputer tetapi bisa juga didapatkan di handphone, pocketpc / pda bahkan pada console game seperti PSP, XBOX. 1.5.1. Konfigurasi Browser Hal pertama yang dilakukan supaya dapat menggunakan web browser untuk browsing Internet adalah konfigurasi. Masing-masing web browser memiliki konfigurasi yang berbedabeda meskipun standarnya adalah sama. Berikut ini adalah settingan konfigurasi pada masingmasing browser yaitu IE, Mozilla dan Opera. Konfigurasi pada IE 7 :
Untuk membuka menu konfigurasi pada Internet Explorer 7, tools > Internet options. Terdiri atas enam buah tab, yaitu general, security, privacy, content, connections, programs, dan advanced. Keenam tab berfungsi secara umum sebagai berikut : 1. General untuk pengaturan umum seperti history, default page, pencarian, tab dan interface. 2. Security untuk pengaturan keamanan pada browser. 3. Privacy untuk pengaturan privasi seperti memblok content atau pop-up serta tingkat privasi. 4. Content untuk mengatur content yang bisa ditampilkan di browser, RSS feed, sertifikat web. 5. Connections untuk pengaturan koneksi web browser. 6. Programs untuk pengaturan add-ons, Internet program untuk IE. 7. Advanced untuk konfigurasi secara keseluruhan browser.
12
Modul 1
- Pendahuluan
---------------------------------------------------------
Untuk melakukan konfigurasi VPN pada browser, dapat memilih connections kemudian pilih koneksi yang akan dilakukan konfigurasi. Misalnya VPN, supaya browser mengenali koneksi VPN maka harus memasukkan proxy server untuk koneksi Internet (misalnya 172.16.1.1 dengan port 8080). Masukkan pada panel proxy server dengan menuliskan alamat IP dan port. Untuk exception jika web membuka jaringan local atau jaringan tanpa konektivitas Internet, dapat memasukkan pada panel Exception dengan terlebih dahulu mengklik Advanced pada panel proxy server.
Konfigurasi pada Mozilla 5 : Untuk membuka menu options pada firefox dengan cara Tools > Options Pada menu Options terdapat tujuh menu, yaitu main, tabs, content, applications, privacy, security, advanced.
13
Modul 1
- Pendahuluan
---------------------------------------------------------
Masing-masing menu pada menu options berfungsi sebagai berikut : 1. Main, berfungsi untuk konfigurasi page default, fungsi download browser dan Add-ons. 2. Tabs, berfungsi untuk pengaturan tab pada browser. 3. Content, berfungsi untuk konfigurasi content seperti memblok pop-up, images, content java, content javascript, dan pengaturan font beserta bahasa. 4. Applications, berfungsi untuk mengatur aplikasi yang terintegrasi dengan browser. 5. Privacy, berfungsi untuk mengatur history, cookies dan private data. 6. Security, berfungsi untuk pengaturan keamanan browser seperti mendefinisikan addons apa saja yang boleh di install, penyimpanan password pada setiap form input password di browser. 7. Advanced, berfungsi untuk pengaturan lengkap pada browser firefox, terdiri atas 4 tab yaitu general, network, update, encryption.
Pada menu advanced yang terdiri atas 4 buah tab yang memiliki fungsi masing-masing sebagai berikut : 1. General, untuk mengatur accessibility browser, pengaturan efek pada browser dan system default. 14
Modul 1
- Pendahuluan
--------------------------------------------------------2. Network, untuk mengatur koneksi browser dan penyimpanan offline pada browser. 3. Update, untuk mengatur proses update untuk browser. 4. Encryption, untuk mengatur protocol dan certificates pada broser. Pada tab network terdapat panel connection klik settings untuk menginputkan proxy pada browser. Setelah itu akan muncul window Connection Settings serta beberapa opsi seperti No Proxy dipilih jika koneksi Internet tidak membutuhkan proxy, Auto-detect proxy settings for this network untuk mengambil settingan automatis pada computer, Manual proxy configuration untuk memasukkan IP proxy beserta exception IP untuk pengaksesan IP tanpa menggunakan proxy.
JURNAL 1. Apakah yan g dimaksuda dengan Virus Komputer, Worm, dan juga Trojan? Apakah perbedaannya? 2. Bagaimanakah menyetting VPN dalam Windows 7? 3. Jika konfigurasi VPN dilakukan pada Opera, adakah bagian yang membedakan dengan Mozilla Firefox dalm hal penyettingan VPN?
15
Modul 2 Aplikasi Internet Browser
---------------------------------------------------------
Modul 2 - Aplikasi Internet Browser

Tujuan : Memahami dan dapat menggunakan Web Browser Memahami dan mengetahui perkembangan Web 2.0 Memahami dan mengetahui perkembangan Apilkasi Pendukung Internet Mengenal lebih jauh mengenai Forum Internet Mengetahui teknik pencarian di search engine Google
2.1. Web Browser Web Browser adalah perangkat yang berfungsi menampilkan dan melakukan interaksi dengan document-dokumen yang disediakan oleh server web. Browser yang populer seperti Microsoft Internet Explorer yang merupakan paket dari windows, Mozilla Firefox, Opera dan Safari (paket dari Apple dengan OS nya MacOs). Web browser saat ini bukan hanya milik komputer tetapi bisa juga didapatkan di handphone, pocketpc / pda bahkan pada console game seperti PSP, XBOX. 2.1.1 Addons dan Widgets pada Browser Fungsionalitas pada browser-browser modern adalah adanya fungsionalitas Add-ons ataupun widgets. Yang dimaksud Add-ons adalah tambahan dalam bentuk fungsionalitas ataupun aplikasi berukuran kecil yang ditambahkan ke dalam suatu aplikasi dalam hal ini yaitu browser. Sedangkan widgets merupakan merupakan program kecil yang portable yang dibangun dengan html, javascript ataupun flash, dalam hal ini opera memiliki widgets yang terintegrasi dengan browser dan dapat dijalankan pada computer, mobile phone ataupun television yang terdapat aplikasi browser opera. Untuk mengakses widgets pada opera, pilih menu Widgets > Add Widgets (untuk menambahkan widgets) yang secara otomatis memanggil halaman opera widgets (harus terkoneksi dengan Internet). Sedangkan untuk mengatur widget yang sudah terinstall, dapat memilih menu Widgets > Manage widgets. Di Manage Widgets bisa melakukan proses delete widget yang sudah terinstall ataupun membuka widgets tersebut.
16
--------------------------------------------------------Widget pada Opera
Pada browser Mozilla Firefox, terdapat Add-ons. Untuk mengakses add-ons pada mozila dapat memilih menu Tools > Add-ons. Pada window Add-ons terdapat Get Add-ons, Extension, Themes dan Plug-ins. Menu Get Add-ons berisi recommended add-ons yang di tawarkan oleh firefox, klik Browse All Add-ons untuk membuka site https://addons.mozilla.org/enUS/firefox. Sedangkan menu extension berisi daftar add-ons yang telah diinstall, ada 3 buah pilihan menu ketika mengklik sebuah add-ons pada tab extension yaitu option, enable/disable dan uninstall. Menu themes berisi daftar themes yang terinstall pada firefox, ada dua pilihan yaitu untuk mengaktifkan themes > Use Themes dan melakukan uninstall themes. Plugins menu merupakan daftar plugins yang terinstall langsung dari sebuah aplikasi yang diinstall pada system operasi kita, seperti realtime, office dll.
Add-ons pada firefox
Microsoft Internet explorer 7 memiliki add-ons juga, meskipun banyak add-ons yang tidak free atau bernilai trial. Untuk mengakses add-ons pada Internet explorer 7, pilih menu Tools > Manage Add-ons kemudian pilih Find More Add-ons untuk mencari add-ons pada web add-ons milik Internet explorer. Dan menu enable / disable Add-ons untuk mengaktifkan/mematikan add-ons yang telah terinstall.
Add-ons pada IE7
17
--------------------------------------------------------2.2. 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 jalinan sosial antara penggunanya seperti yang telah kita lihat selama ini dalam dunia Blog (Konek edisi 5 Februari 2006). Dengan adanya RSS di dalam Blog, informasi-informasi di dalam sebuah Blog dimungkinkan dapat diadaptasi, dikoleksi, dan di-share untuk menjadi bagian dari Blog lainnya. Namun OReilly 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 software software 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. Web 2.0 memungkinkan untuk menjalankan program pengolah kata seperti Microsoft Word, serta mengubah dokumen dengan hanya mengunjungi situs yang menyediakan program tersebut. Karena program tersebut dapat dijalankan melalui web browser, Anda tidak perlu melakukan instalasi program apapun di dalam komputer. Beberapa praktisi internet telah mengenal kemampuan tersebut dalam AJAX (Asynchorous Javascript and XML), yang menggabungkan teknologi HTML, CSS, Javascript, dan XML dalam menciptakan aplikasi website yang dinamis. Contoh aplikasi tersebut dapat Anda lihat pada Google yang menyediakan program sejenis Microsoft Excel melalui situsnya di http://spreadsheets.google.com. Melalui aplikasi di dalam situs tersebut, Anda dapat membuka dan mengolah dokumen spreadsheet yang dimiliki. Bahkan dokumen tersebut dapat di-sharing ke beberapa rekan di internet. Dengan adanya fasilitas penyimpanan, pengguna tidak lagi membutuhkan media penyimpanan konvensional seperti disket atau flash disk. Pengolahan data dan penyimpanan dokumen, bahkan sharing dokumen, dapat dilakukan hanya dalam satu jendela web browser.Terdapat tujuh karakteristik sebuah Web 2.0, antara lain: 1. 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. 2. 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. 3. Data menjadi trademark-nya aplikasi, mengingatkan kita pada slogan Intel Inside yang telah melambungkan nama prosesor Intel di kalangan 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 18
4.
5.
6.
7.
--------------------------------------------------------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. 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. 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. 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. Adanya kemajuan inovasi pada antar-muka (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.
Menurut Wikipedia, yang menjadi kunci perbedaan dalam Web 2.0 dan Web 1.0 adalah keterbatasan pada Web 1.0 yang mengharuskan pengguna internet untuk datang 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.
2.3.
Adobe Air dan Flash
Adobe AIR adalah cross-platform runtime system yang memungkinkan web developer untuk mengembangkan dan menjalankan RIA (Rich Internet Application) layaknya aplikasi desktop. Istilah AIR sendiri merupakan singkatan dari Adobe Integrated Runtime. Dengan Adobe AIR web developer bisa membangun aplikasi desktop dengan HTML, JavaScript, Flex dan Flash. Berbeda dengan aplikasi web pada umumnya, aplikasi AIR ini di-install pada desktop dan bisa beroperasi secara offline. Karakteristiknya hampir sama dengan aplikasi desktop biasa. Aplikasi AIR memiliki kemampuan untuk mengakses data yang tersimpan pada komputer lokal. Jadi dengan kata lain AIR bisa menyimpan, membuka, dan mengedit data atau informasi 19
--------------------------------------------------------pada komputer client. Ini yang membedakannya dengan aplikasi web biasa yang berjalan di browser. Contoh aplikasi yang dikembangkan dengan Adobe AIR yaitu eBay Desktop yang memungkinkan user untuk melakukan transaksi di situs eBay melalui aplikasi desktop tanpa harus selalu terhubung dengan Internet. Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe dan program aplikasi standar authoring tool professional yang digunakan untuk membuat animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasiaplikasi web lainnya. Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam ukuran file outputnya. 2.4. Microsoft Silverlight
Microsoft Silverlight adalah sebuah plug-in lintas browser dan lintas-platform untuk menyajikan pengalaman media berbasis .NET generasi selanjutnya serta aplikasi-aplikasi web yang interaktif. Silverlight dapat menghantarkan RIA (Rich Internet Application) seperti video, audio, dan animasi yang menarik dan interaktif. Dalam referensi lain menyebutkan bahwa Microsoft Silverlight merupakan sebuah Kerangka kerja aplikasi web dengan tujuan agar multimedia, grafik komputer, animasi dan interaktifitas dapat dijalankan dalam waktu yang bersamaan. Pertama kali dirilis sebagai plugin untuk video streaming, kemudian pada versi berikutnya Silverlight ditambahkan fitur interaktifitas dan mendukung komponen bahasa CLI juga development tools. Versi 4 telah dirilis pada bulan April 2010. Fitur-fitur di Silverlight sama dengan apa yang dimiliki oleh Adobe Flash. 2.5. Email
Email tentu sudah tidak asing lagi bagi para pengguna Internet, penggunaan email pertama kali pada tahun 1965 sebagai sebuah jalan untuk berkomunikasi multiple user dengan time sharing dan mainframe computer. Email secara cepat meluas menjadi jaringan email, yang mengizinkan user untuk mengirimkan pesan antara computer yang berbeda sesudah tahun 1966. Jaringan computer ARPANET memberikan kontribusi yang besar bagi perkembangan email, salah satunya dengan percobaan transfer email antar system. Kemudian seorang programmer dari ARPANET Ray Tomlinson menggunakan @ sign untuk memisahkan antara nama user dan mesin untuk email. 20
--------------------------------------------------------Email atau electronic mail yaitu metode penyimpanan dan pengiriman untuk menulis, mengirimkan dan menyimpan pesan melalui sistem komunikasi secara elektronik. E-mail untuk system email internet berbasis SMTP (Simple Mail Transfer Protokol). Email bisa di dapatkan pada jaringan Internet maupun Internet, dalam email dikenal juga sebuah istilah spam ataupun bulk untuk menyimpan secara otomatis pesan-pesan yang tidak dikenal yang masuk pada email. Seiring dengan perkembangan teknologi Internet dan software, saat ini banyak layanan email yang bisa didapatkan secara gratis, seperti yahoo mail, google mail (gmail), plasa mail, msn mail, dll. Untuk mendapatkan sebuah account email diharuskan mengisi form registrasi yang berisi identitas user seperti id email, password, nama , dan identitas lainnya. Berikut akan dibahas bagaimana cara registrasi email beserta konfigurasi pada google mail (gmail). Sedangkan untuk layanan email lainnya tidak jauh berbeda dengan ini. 2.6. Scribd dan Slideshare
Scribd adalah situs web berbagi dokumen dimana pengguna terdaftar dapat mengirimkan dokumennya dengan berbagai format, dan menyimpan dokumen mereka ke situs tersebut dalam format iPaper. Scribd sekarang telah mempunyai lebih dari 50 juta pengguna dan lebih dari 50.000 dokumen dimuat setiap hari. Akan tetapi akhir akhir ini scribd merubah kebijakannya tanpa memberi tahu sebelumnya, yaitu tentang The Scribd Archive kebijakan baru ini adalah sebuah ketidaknyamanan bagi para Documents Downloader yang hobinya download dokumen dari situs tersebut. setiap kali kita akan mendownload documents yang oleh pihak scribd dimasukkan dalam katagori The Scribd Archive akan muncul pesan This document was uploaded by someone just like you and is now part of The Scribd Archive*. Give back to the community and gain 24 hours of download access by uploading something of your own dan di haruskan membayar dengan nominal tertentu. Ada cara tertentu untuk dapat mendownload file-file tersebut, caranya: Buka http://scribd.com/mobile Ketik judul file yang kamu pengen download Bila Filenya sudah muncul tekan download SlideShare.Net adalah situs terbesar di dunia untuk berbagi presentasi. Pengunjung slideshare mencapai 45 juta setiap bulan adalah sebagai tujuan utama para pencari slide presentasi. Selain presentasi, SlideShare juga mendukung dokumen (format *.doc), PDF, video dan webinar. Sangat bermanfaat bagi semua orang baik siswa, mahasiswa, karyawan, pengusaha, simak dibawah ini. Konten di SlideShare akan otomatis tersebar melalui blog dan jaringan sosial seperti LinkedIn, Facebook dan Twitter. Individu & organisasi meng-upload yang telah dokumen untuk SlideShare untuk berbagi ide, melakukan penelitian, terhubung dengan orang lain, dan menghasilkan calon pembeli bagi bisnis mereka. Siapapun dapat melihat presentasi & dokumen pada topik yang menarik perhatian mereka, men-download dan digunakan kembali atau remix untuk pekerjaan mereka sendiri. Manfaat / Fungsi / Kegunaan Slideshare: * Mencari presentasi penelitian, tugas kuliah, presentasi produk/ pekerjaan, gratis download *Embed (mencantumkan) pada blog, situs web, intranet perusahaan *Share on Twitter, Facebook, LinkedIn * Zipcast: gratis, tidak ada download, pertemuan klik web 1 * Leadshare: menghasilkan lead bisnis dengan, Anda dokumen presentasi, PDF, video 21
--------------------------------------------------------* Slidecast: sync mp3 audio dengan slide untuk membuat webinar * Embed YouTube video dalam presentasi SlideShare SlideShare adalah cara terbaik untuk mengedarkan slide Anda di seluruh dunia, sehingga ideide anda dapat ditemukan dan dibagi oleh khalayak luas. Dunia akan memperhatikan. Termasuk untuk mempromosikan bisnis Anda. Caranya ialah dengan menulis dan mengupload via slideshare semua topik yang anda kuasai, disertai pencantuman bisnis/ usaha anda. Untuk hasil yang lebih baik, surveylah topik-topik populer yang banyak dibutuhkan orang. Agar presentasi/ tulisan dapat ditemukan orang, gunakan kata-kata yang sering dicari orang dan kata-kata populer di search engine. 2.7. Google Scholar Google menyediakan banyak layanan web selain search engine. Salah satunya adalah Google Scholar, dimana lewa tlayanan ini para pengguna internet dapat mencari artikel ilmiah.
Dengan Google Scholar ini kita dapat mencari artikel atau jurnal ilmiah yang sudah dipublikasi secara online. Biasanya dalam publikasi jurnal ilmiah memerlukan waktu bulanan untuk dipublikasi secara cetak oleh jurnal tertentu dan banyak hasil penelitian yang berbentuk artikel. Untuk mengatasi hal ini, artikel-artikel tersebut disetujui dan diterima untuk publikasi dalam format online. Tipe artikel ini juga sah untuk dirujuk dengan system referensi yang menggunakan DOI (Digital Object Identifier). 2.8. Forum
Forum internet merupakan fasilitas yang tersedia di internet, dan penggunanya dapat berdiskusi. Forum berbasis internet ini sudah dikenal sejak tahun 1995, dan fungsinya mirip bahkan lebih baik dari papan buletin dan milis internet yang sudah ada sejak tahun 1980-an. Teknologi, permainan komputer, dan politik merupakan tema paling populer yang menjadi pokok bahasan forum internet, tetapi masih banyak lagi topik-topik lainnya. 2.8.1. Students IT Telkom Students adalah sebuah portal mahasiswa yang kemudian berkembang menjadi komunitas mahasiswa yang ada di Indonesia yang di dalamnya merangkul semua kegiatankegiatan kampus dan semua komunitas yang hidup berdampingan di kampus ini tanpa terkecuali. Karena itulah students selalu berdenyut selama kreatifitas dan kebutuhan akan informasi dan bersosialisasi masih hidup di kalangan mahasiswal IT Telkom. 22
--------------------------------------------------------Pada awalnya students dibuat untuk keperluan iseng. Fitur yang ditawarkan pada saat itu, pertengahan 2000, hanyalah sekedar interactive discussion board yang berjalan pada platform linux. Pengguna berinteraksi dengan menggunakkan software telnet ke server students yang pada saat itu dikelola oleh mahasiswal penghuni laboratorium mahasiswa stt telkom. Fungsi students di kampus ini tidak lepas dari one stop solution bagi mahasiswa di IT Telkom dengan berbagai macam fitur yang ditawarkan. Mulai dari forum diskusi students, chat room, blog, streaming radio, email, dan lain-lain. Berkat inovasi-inovasi dari crew dan administrator students, students dapar memberi layanan lewat fitur-fitur lebih lengkap dan rasa kekeluargaan di dalam komunitasnya, menjadikan students bukan hanya sebagai portal mahasiswa biasa, tapi lebih dari sekedar komunitas mahasiswa terbesar di Indonesia. 2.8.2. Kaskus Kaskus (Kasak Kusuk) adalah situs forum komunitas maya terbesar Indonesia dan penggunanya disebut dengan Kaskuser. Kaskus lahir pada tanggal 6 November 1999 oleh tiga pemuda asal Indonesia yaitu Andrew Darwis, Ronald, dan Budi, yang sedang melanjutkan studi di Seattle, Amerika Serikat. Situs ini dikelola oleh PT Darta Media Indonesia. Anggotanya, yang berjumlah lebih dari 1.620.000 member, tidak hanya berdomisili dari Indonesia namun tersebar juga hingga negara lainnya. Pengguna Kaskus umumnya berasal dari kalangan remaja hingga orang dewasa. Kaskus, yang merupakan singkatan dari Kasak Kusuk, bermula dari sekedar hobi dari komunitas kecil yang kemudian berkembang hingga saat ini. Kaskus dikunjungi sedikitnya oleh 600 ribu orang, dengan jumlah page view melebihi 15.000.000 setiap harinya. Hingga saat ini Kaskus sudah mempunyai lebih dari 100 juta posting. Menurut Alexa.com, pada bulan April 2010 Kaskus berada di peringkat 313 dunia dan menduduki peringkat 6 situs yang paling banyak dikunjungi di Indonesia. Kaskus memang memiliki kelebihan tersendiri disbanding forum-forum lainnya, salah satunya dari istilah-istilah yang ada pada kaskus. Beberapa istilah yang terdapat di kaskus: Cendol / GRP = Good Reputation Point Bata / BRP = Bad Reputation Point momod/mods=moderator admin/mimin=administrator TS = Thread Starter PERTAMAX = Pertama Xekali (Orang yang pertama kali mereply suatu thread) WTF = Want to find WTS = Want to sell WTB = Want to bu 2.8.3. TokoBagus Tokobagus adalah sebuah situs dimana perusahaan dan perorangan dapat menjual dan membeli produk maupun jasa. Tokobagus sangat mudah untuk digunakan dan lebih murah 23
--------------------------------------------------------dibandingkan surat kabar atau media iklan lain. Sesungguhnya, memasang iklan di Tokobagus adalah benar-benar gratis untuk suatu periode yang tak tentu. Tokobagus juga merupakan search engine friendly, yang berarti tidak hanya pengunjung dari Tokobagus yang akan menemukan iklan anda tetapi juga orang-orang yang mencari produk atau jasa dengan menggunakan search engine seperti Google juga akan menemukan iklan-iklan anda. Jika anda menginginkan publikasi yang maksimum dan gratis serta ingin sukses di dalam bisnis atau hanya sekedar menjual barang bekas, maka Tokobagus.com adalah solusinya. Tokobagus merupakan situs jual beli & iklan gratis terbesar di Indonesia. Dengan lebih dari 700 ribu member dan terus bertambah, Tokobagus telah dipercaya oleh ribuan individu & perusahaan yang ingin produknya dikenal secara luas di internet, dan tentu saja untuk meningkatkan hasil penjualan mereka. Misi Tokobagus adalah memberikan layanan kepada masyarakat Indonesia khususnya komunitas perdagangan dimana semua orang di Indonesia dapat melakukan promosi serta transaksi jual beli segala jenis barang & jasa yang tentunya sesuai dengan batasan moral, etika, agama dan hukum di Indonesia. Beraneka produk & jasa ada di Tokobagus. Mulai dari kebutuhan rumah tangga & kantor, gadget & komputer, motor & mobil, rumah & tanah sampai bermacam-macam jasa ditawarkan di sini. Jual / Beli barang baru & bekas. 2.8.4. StackOverflow Stack Overflow, sebuah situs untuk tanya jawab pertanyaan pemrograman dengan sistem rangking ala Digg telah dibuka untuk publik. Layanan yang banyak diantisipasi ini dirilis dalam tahap beta tertutup minggu lalu akan tetapi telah dibuka untuk publik hari ini (thanks Louycpher). Stack Overflow bertujuan untuk memberikan wadah di mana para pengembang dapat menemukan jawaban yang tidak dapat mereka temukan di tempat lain dan akan merupakan sumber daya yang berguna bagi kita semua yang bergelut di dunia pemrograman. Komunitas ini diperuntukkan pada para pengembang segala bahasa dan boleh digunakan secara gratis. Mirip dengan banyak situs jejaring sosial yang ada hari ini, konten Stack Overflow diciptakan dan dipelihara oleh komunitas pengguna. Apabila ingin berpartisipasi, Anda dapat mendaftar apabila ingin mengumpulkan karma (semacam poin) yang berharga dan akan ditampilkan di samping nama Anda. Berdasarkan reputasi yang Anda miliki, Stack Overflow akan memberikan Anda kuasa yang semakin besar: 15: Vote up 15: Flag offensive 50: Leave comments 100: Vote down 250: Close your questions (no longer accept answers) 500: Retag other peoples questions 750: Edit community wiki posts 2000: Edit other peoples posts 24
--------------------------------------------------------2000: Delete comments 3000: Close other peoples questions Selain itu, Stack Overflow bebas dipakai dan berkinerja sangat cepat. Setelah memiliki reputasi tinggi, Anda akan diperbolehkan mengubah apapun, mirip dengan Wikipedia. Seperti yang dikatakan Stack Overflow: dengan bantuan Anda kami ingin memberikan jawaban baik untuk semua pertanyaan pemrograman yang ada tidak peduli bahasa atau sistem operasi yang Anda pakai pemrograman yang lebih baik adalah tujuan kami. 2.8.5. DeviantArt Para seniman dan pecinta seni sungguh akan sangat beruntung dengan kehadiran Deviantart. Kalau Anda adalah salah satunya, maka selayaknya Anda mengunjungi website ini di alamat www.deviantart.com. Di tempat ini, Anda bisa menemukan begitu banyaknya seniman dengan karyanya. Mereka berasal dari seluruh dunia, berkumpul saling belajar dan berbagi di sini. Deviantart didirikan oleh sekitar bulan Agustus 2000 oleh seseorang yang dikenal dengan nama Jark. Bersama temannya yang bernama Matteo, mereka mengembangkan website ini yang ditujukan untuk para seniman. Di tempat ini, para seniman berkumpul dan menampilkan hasil karya mereka. Setiap orang yang tertarik dengan bidang seni, dapat bergabung dalam komunitas ini secara gratis. Bahkan, para seniman bisa menjual hasil karya mereka di sini. Deviantart layaknya toko seni, tempat memajang karya seni dan menjadi sumber penghasilan bagi para seniman. Di Deviantart, ada lebih dari seratus juta karya seni. Selain desain grafis, terdapat juga karya seni seperti fotografi, film dan animasi, kartun, komik, manga, dan masih banyak lagi bidang seni lainnya. Jumlah anggota yang telah bergabung di sini sudah lebih dari 12 juta orang. Semua anggota berasal dari ratusan negara yang berbeda. Banyak pula yang berasal dari Indonesia. Sungguh merupakan surganya para seniman. Selain menjadi tempat pameran seni, dengan bergabung di Deviantart banyak hal positif yang bisa Anda petik. Di sini terdapat banyak para ahli yang akan membimbing kita menjadi seorang seniman profesional. Deviantart juga menyediakan fasilitas berbagai tutorial mulai dari pengenalan Photoshop sampai pada tutorial tentang permodelan 3 Dimensi. Sistem pencarian karya yang ada di sini juga cukup lengkap. Anda bisa mencari seni dari berbagai kategori, berdasarkan seniman, atau kata kunci tertenu. Sebagai anggota, Anda mempunyai kesempatan untuk mengunggah sebanyak mungkin karya yang Anda miliki. Semuanya bisa Anda lakukan secara gratis. Anda bisa memamerkan berbagai hasil karya Anda. Bahkan Anda juga bisa menggunakan fasilitas slide show untuk menampilkan hasil karya Anda secara interaktif. Demi kemajuan bersama, Anda bisa memberikan kritik dan saran untuk karya sesama anggota. Tentu Anda juga bisa menerima kritik dan saran yang membangun demi kemajuan bersama. Di Deviantart, Anda bisa membuat profil semenarik mungkin dan memperkenalkan diri pada khalayak ramai. Layaknya Twitter, di Deviantart Anda juga bisa membuat komunitas sendiri. Anda bisa mengajak teman-teman sebagai follower Anda. Anda bisa melihat seberapa populernya Anda di sini.
25
--------------------------------------------------------Tentunya sebagai satu komunitas, komunikasi adalah yang utama. Deviantart menyediakan berbagai fasilitas untuk mendukung komunikasi sesama seniman. Anda bisa memberi komentar atas karya-karya sesama seniman. Anda juga bisa mengirimkan pesan pribadi kepada mereka. Terdapat juga fasilitas chatting yang bisa Anda gunakan untuk memperluas persahabatan. Dan yang paling menarik adalah kontes seni yang sering diadakan dengan hadiah yang beragam. Bagian terakhir dan yang paling menarik dari Deviantart adalah adalah toko untuk menjual karya seni. Di toko Deviantart, Anda bisa menjual karya ke seluruh dunia tanpa batas. Sungguh merupakan suatu kesempatan besar yang bisa Anda ambil di sini. Jadi segeralah bergabung sebagai anggota dan berkumpul bersama jutaan seniman di Deviantart. 2.8.6. Kompasiana Kompasiana adalah sebuah Media Warga (Citizen Media). Di sini, setiap orang dapat mewartakan peristiwa, menyampaikan pendapat dan gagasan serta menyalurkan aspirasi dalam bentuk tulisan, gambar ataupun rekaman audio dan video. Kompasiana menampung beragam konten yang menarik, bermanfaat dan dapat dipertanggungjawabkan dari semua lapisan masyarakat dengan beragam latar belakang budaya, hobi, profesi dan kompetensi. Keterlibatan warga secara masif ini diharapkan dapat mempercepat arus informasi dan memperkuat pondasi demokratisasi dalam kehidupan berbangsa dan bernegara. Kompasiana juga melibatkan kalangan jurnalis Kompas Gramedia dan para tokoh masyarakat, pengamat serta pakar dari berbagai bidang, keahlian dan disiplin ilmu untuk ikut berbagi informasi, pendapat dan gagasan. Di Kompasiana, setiap orang didorong menjadi seorang pewarta warga yang, atas nama dirinya sendiri, melaporkan peristiwa yang dialami atau terjadi di sekitarnya. Tren Jurnalisme Warga (Citizen Journalism) seperti ini sudah mewabah di banyak negara maju sebagai konsekuensi dari lahirnya web 2.0 yang memungkinkan masyarakat pengguna internet (netizen) menempatkan dan menayangkan konten dalam bentuk teks, foto dan video. Kompasianer (sebutan orang-orang yang beraktifitas di Kompasiana) juga diberi kebebasan menyampaikan gagasan, pendapat, ulasan maupun tanggapan sepanjang tidak melanggar ketentuan yang berlaku. Setiap konten yang tayang di Kompasiana menjadi tanggungjawab Kompasianer yang menempatkannya. Selain itu, Kompasiana menyediakan ruang interaksi dan komunikasi antar-anggota. Setiap Kompasianer bisa menjalin pertemanan dengan Kompasianer lain. Mereka juga dapat berkomunikasi lewat email, komentar dan fitur interaktif lainnya. Fasilitas dan fitur Kompasiana hanya bisa digunakan oleh pengguna internet yang telah melakukan registrasi di www.kompasiana.com/registrasi. Begitu proses registrasi selesai, pengguna akan mendapatkan blog pribadi dengan alamat http://kompasiana.com/namapengguna. Tanpa registrasi, pengguna hanya bisa membaca konten Kompasiana. Dengan beragam fitur dan fasilitas interaktif tersebut, Kompasiana yang mengusung semangat berbagi dan saling terhubung (sharing. connecting.) telah berwujud menjadi sebuah Social Media yang informatif, interaktif, komunikatif dan mencerahkan bagi setiap orang. Nama Kompasiana diusulkan oleh Budiarto Shambazy, wartawan senior Kompas yang biasa 26
--------------------------------------------------------menulis kolom "Politika". Nama ini pernah digunakan untuk kolom khusus yang dibuat pendiri Harian Kompas, PK Ojong, berisi tulisan tajam mengenai situasi mutahir pada masanya. Kumpulan rubrik Kompasiana yang ditulis PK Ojong itu sendiri sudah dibukukan. Ide pendirian Kompasiana berangkat dari dari fakta tidak semua jurnalis akrab dengan blog. Jangankan punya, membaca blog orang barangkali belum pernah. Jadi, merupakan langkah maju dan terobosan tak terduga manakala sejumlah jurnalis Kompas menyatakan diri ingin menjadi bagian dari Kompasiana dan bahkan sudah langsung mencurahkan pandangan dan gagasannya. Pada tanggal 1 September 2008, Kompasiana mulai online sebagai blog jurnalis. Pada perjalanannya, Kompasiana berkembang menjadi Social Blog atau blog terbuka bersama para jurnalis harian Kompas dan Kompas Gramedia (KG) serta beberapa orang penulis tamu dan artis. Antusiasme para blogger dan netizen untuk ikut ngeblog di Kompasiana sangat besar sehingga dibuatkan satu menu khusus bernama Public. Pada 22 Oktober 2008, Kompasiana sebagai Social Blog resmi diluncurkan. Dan baru satu tahun berjalan, Kompasiana telah mengalami perubahan besar-baik dari segi tampilan maupun format dan konsep keseluruhan. Dari sebatas jaringan blog jurnalis menjadi sebuah bentuk Social Media baru yang bisa diakses dan dikelola oleh semua orang. Termasuk Anda. 2.9. Evernote Evernote adalah sebuah layanan note storage online yang bertujuan untuk memberikan kesempatan kepada anda untuk mencatat semua momen, ide, inspirasi, pengalaman atau apapun yang anda inginkan dengan mudah. Kapanpun dan dimanapun anda berada, anda bisa membuat, mengedit, dan mengakses note anda di Evernote dengan mudah. Kelebihan evernote antara lain: 1. Anda bisa mencatat semua momen, ide, inspirasi, pengalaman atau apapun yang anda inginkan kapanpun dan dimanapun anda berada melalui berbagai macam mobile device yang didukung seperti iPhone, iPod, Blackberry, Android, iPad, Palm Pre, Windows Mobile. Anda juga bisa membuat catatan melalui komputer windows maupun Mac. Bahkan anda bisa mengakses Evernote secara langsung melalui web browser. 2. Anda bisa menyimpan gambar, foto, file PDF, file audio dan file-file lainnya. 3. Anda bisa mencari note anda dengan mudah. Bahkan evernote bisa menemukan teks yang ada di gambar anda! 4. Note anda akan tersinkronisasi ke semua jenis platform dan device yang didukung oleh evernote. 5. Note anda dilingungi dengan enkripsi SSL yang akan menjamin keamanan data note anda. 6. Dengan evernote, anda tidak akan melupakan momen penting yang anda temukan dimanapun dan kapanpun anda berada. Anda bisa mencatat semuanya dan note anda akan tersimpan di server evernote dengan aman. Note tersebut bisa anda akses kapanpun serta dimanapun anda berada, selama ada akses internet dan adanya device serta platform yang didukung oleh Evernote.
27
--------------------------------------------------------2.10. Literature Searching di Google Dalam melakukan pencarian di google, terdapat 2 tipe pencarian yang bisa digunakan : basic search dan advanced search. Basic Search merupakan fitur pencarian di google yang sering kita gunakan (halaman depan situs google).
Sedangkan advanced search merupakan fitur pencarian yang lebih metode pencariannya menggunakan filter tertentu.
Berikut adalah query dan operator yang bias kita tambahkan agar hasil pencarian kita lebih efektif. 1. FRASE Akan menampilkan informasi yang didalamnya terdapat string kalimat sesuai inputan kita. Bandung Techno Park 2. AND Mencari informasi yang mengandung kedua kata yang dicari. Bisa menggunakan salah satu dari tiga alternative berikut: Bandung Techno Park Bandung +Techno +Park Bandung and Techno and Park 3. OR Menampilkan hasil pencarian yang mengandung salah satu dari kedua kata. Ittelkom OR itt ittelkom | itt 4. NOT/ MINUS (-) 28
--------------------------------------------------------Menampilkan hasil pencarian tanpa kata yang ada setelah tanda minus (-) Kampus keren ittelkom *melakukan pencarian kampus keren selain ittelkom 5. SINONIM (~) Mencari kata beserta sinonim-sinonimnya. ~pelajar *mencari kata pelajar dan sinonim-sinonimnya. 6. ASTERIK (*) Karakter pengganti kata. Misal kita ingin mencari kuliner pedas bandung, kuliner unik bandung, kuliner murah bandung, dsb. Kuliner * bandung 7. TITIK (.) Karakter pengganti huruf, angka dan karakter tunggal. Dari operator dan query berikut, hasil yang didapat bisa: kopi, koki, kodi,dsb ko.i Operator diatas merupakan operator bantu untuk query yang kita masukkan. Berbeda lagi kasusnya jika kita ingin mencari ebook pdf di situs dan judul pdf tertentu, berikut adalah cara melakukan pencarian lebih lanjut. 1. DEFINE Mencari definisi dari sebuah terminologi. define: semantic technology 2. CACHE Menampilkan situs web yang telah diindeks oleh Google meskipun sudah tidak aktif lagi. Contoh di bawah akan menghasilkan pencarian kata php pada situs ittelkom.ac.id yang ada di indeks Google. cache:ittelkom.ac.idbeasiswa 3. LINK Menampilkan daftar link yang mengarah ke sebuah situs. link:ittelkom.ac.id 4. RELATED Menampilkan situs yang memiliki hubungan dengan suatu situs lainnya related:ittelkom.ac.id 5. INFO Menampilkan informasi dari suatusitus info:ittelkom.ac.id *Namun untuk informasi lebih lengkap tentang suatu situs bias menggunakan whois 6. SITE Menampilkan hasil pencarian suatu kata di suatu situs beasiswa site:ittelkom.ac.id 7. FILETYPE Menampilkan hasil pencarian berupa jenis format file tertentu. Jenis file yang bias dicari adalah: doc, xls, rtf, swf, ps, lwp, wri, ppt, pdf, mdb, txt, dsb. ebook for dummies filetype:pdf 8. ALLINTITLE Menampilkan seluruh kata yang dicari dalam TITLE halaman. Contoh di bawah akan menghasilkan halaman yang memiliki title java programming. allintitle:java programming 9. INTITLE Menampilkan satu kata yang dicari dalam TITLE halaman. Contoh di bawah akan menghasilkan halaman yang memiliki title java dan isi halaman yang mengandung kata 29
--------------------------------------------------------enterprise intitle:java enterprise 10. ALLINURL Menampilkan seluruh kata yang dicari di dalam URL. Contoh di bawah akan menghasilkan daftar URL yang mengandung kata java dan programming. allinurl:java programming 11. INURL: Menampilkan satu kata yang dicari di dalam URL. Contoh di bawah akan menghasilkan daftar URL yang mengandung kata java dan isi halaman yang mengandung kata enterprise inurl:java enterprise Untuk hasil yang lebih akurat bisa menggunakan perpaduan dari operator-operator diatas. Misal ingin mencari ebook pdf dengan terdapat kata semantic di judul ebooknya, maka query yang harus kita masukkan adalah ebook semantic filetype:pdf
30
Modul 3 Aplikasi Internet Non-Browser
---------------------------------------------------------
Modul
Tujuan :
3 - Aplikasi Internet Non-Browser
Memahami dan dapat menggunakan Internet Messenger Memahami dan dapat menggunakan Email Client Memahami dan mengetahui lebih lanjut mengenai Aplikasi Internet non Browser
3.1.
Internet Messenger (IM) Internet messenger merupakan aplikasi yang digunakan untuk melakukan percakapan baik itu percakapan dengan text base, dengan voice ataupun dengan video. Selain itu banyak IM yang menerapkan aplikasi tambahan seperti games, share tools untuk membantu interaksi antar pengguna IM. Contoh Internet Messenger antara lain Yahoo Messenger, Google Talk, Digsby, dan lain-lain
3.2.
Email Client Aplikasi email client merupakan aplikasi untuk mendownload email dari sebuah account, sehingga ketika sedang dalam kondisi offline (tidak ada koneksi internet) user masih dapat membaca email yang telah terlebih dahulu didownload. Beberapa aplikasi email client seperti Outlook, Mozilla thunderbird. a. Microsoft Outlook 2007 Merupakan aplikasi email client milik Microsoft bisa didapatkan pada paket Microsoft office. Meskipun tidak berlisensi free tetapi outlook cukup populer dipengguna email pada windows. Cara untuk konfigurasi email cukup mudah dan email langsung dapat diakses tentunya yang memiliki fungsi POP ataupun IMAP. Ada 2 buah cara untuk melakukan settings untuk mendaftarkan account email, yaitu dengan wizard dan manual. Untuk mendaftarkan account baru (untuk contoh kasus mendaftarkan accout gmail) klik menu Tools > Account Settings
31
--------------------------------------------------------
Pada tab E-mail, klik New.. Maka akan muncul window, lalu pilih Microsoft Exchange, POP3, IMAP, or HTTP jika menggunakan e-mail service dan klik Next. Isi semua form inputan untuk identitas / informasi : Your Name : diisi untuk diletakkan pada fromuntuk mengirim pesan, misalnya nama : robbi hendriyanto Email Address : diisi untuk alamat email misalnya alamat : obiesan@gmail.com Password : diisikan dengan password pada email yang akan didaftarkan. Pilihan Manually configure server settings or additional server types digunakan untuk memasukkan konfigurasi server jika outlook tidak mengenali server email yang didaftarkan. Untuk gmail secara otomatis dapat langsung terhubung.
Klik Next.. Jika tidak mengklik pilihan manual configure server, maka tinggal mengklik Finish untuk mengakhiri penambahan account. Jika mengklik konfigurasi manual maka akan muncul halaman untuk memilih jenis email service, pilih Internet E-mail klik Next. Lalu verifikasi USER Information dan masukkan beberapa informasi seperti : Server Information Account Type: POP3 Incoming mail server: pop.gmail.com Outgoing mail server (SMTP): smtp.gmail.com Logon Information User Name: Enter your Gmail username (including @gmail.com). Password: Enter your Gmail password. Require logon using Secure Password Authentication (SPA): jangan di cek jika tidak menggunakan SPA. Kemudian klik tombol More Settings, dan pilih tab Outgoing Server Lalu cek box next My going server(SMTP) requires authentication dan pilih Use same settings as my incoming mail server. Klik tab Advanced, dan cek This server requires an encrypted connection (SSL) dengan Incoming Server(POP3). Pada input text Outgoing server (SMTP) masukkan 587 dan pilih TLS dari dropdown menu dan klik OK Lalu Test Account Settings, jika mendapatkan pesan Congratulations! All test completed successfully, klik Close Klik Next dan Finish
Untuk mengirimkan email ataupun menerima email, klik tombol Send /Receive untuk mendownload email kedalam outlook. Ada beberapa pilihan Send / Receive All untuk mengirimkan dan menerima semua pesan untuk semua account, Send All untuk mengirimkan semua pesan, dan ada beberapa pilihan untuk mendownload untuk sebuah account.
32
---------------------------------------------------------
Untuk mengirimkan pesan, klik tombol new, lalu masukkan alamat, subject dan isi dari pesan. Sama dengan penggunaan pengiriman pesan pada web email.
Dan beberapa managemen untuk pengaturan pesan disediakan secara lengkap oleh outlook, seperti pembuatan folder, Calender, contacts, tasks, Speeling check dll. Juga terdapat menu Reply untuk membalas pesan, Reply all untuk membalas semua pesan yang masuk dan Forward untuk memforward pesan yang masuk. b. Mozilla Thunderbird
Thunderbird merupakan aplikasi email client yang free produk dari Mozzila, menu-menu yang terdapat pada thunderbird lebih simple dan mudah untuk digunakan disbanding dengan outlook yang lebih lengkap fungsinya.
33
--------------------------------------------------------Untuk mendaftarkan account baru (untuk contoh kasus mendaftarkan accout gmail) Klik menu Tools dan pilih Account Settings.. Kemudian klik Add Account untuk membuka Account Wizard Pilih Gmail, klik Next Lalu isi semua informasi yang di minta seperti: Your Name : diisi untuk diletakkan pada fromuntuk mengirim pesan, misalnya nama : robbi hendriyanto Email Address : diisi untuk alamat email misalnya alamat : obiesan@gmail.com Password : diisikan dengan password pada email yang akan didaftarkan.
Klik Next, lalu klik Finish
Lalu pada Tab Settings masih pada window Account Settings, hilangkan cek pada Leave Messages on server. Untuk mendownload email, klik Get Mail pada toolbars atau icon inbox pada menu sebelah kiri. Sedangkan untuk mengirim pesan klik tombol Write pada toolbar.
34
---------------------------------------------------------
c. Zimbra ZIMBRA ini adalah software email client yang bisa mendownload email secara online ke dalam komputer kita, lalu kita bisa membacanya kemudian secara offline (tanpa terhubung ke internet). Lalu apa bedanya dengan software email client lain, seperti : Ms Outlook, Outlook Express, Thunderbird, dll ? Di sinilah letak powerfullnya. Berikut adalah beberapa hal yang menjadikan ZIMBRA DESKTOP lebih powerfull dibanding software email client lain : 1. Cara settingnya yang relatif sangat mudah Hanya dengan mengisi username (alamat email) dan password email, maka pengguna bisa langsung mendownload email dan membacanya, tanpa harus mengisi number of port dari layanan POP dan SMTP yang seringkali membuat bingung pengguna software email client. Sebab number of port dari POP3 dan SMTP, bisa berbeda-beda antara satu email dengan email lain. 2. Bisa digunakan untuk mendownload email yang tidak menggunakan layanan POP3 Misalnya pada layanan email di yahoo.com. Jika kita menggunakan email client, Outlook Express misalnya, maka kita tidak akan bisa menggunakan Outlook tersebut untuk membuka email di yahoo.com, tapi dengan menggunakan ZIMBRA DESKTOP maka mendonwload, mengirim dan membaca email secara offline menjadi sangat mudah dilakukan. 3. Mendukung 3 Platform Besar Operating System ZIMBRA DESKTOP bisa di instal pada komputer yang berbasis operating sistem : Ms Windows, Linux dan Mac. Sehingga tidak hanya pengguna Ms Windows yang dapat menikmati powerfullnya ZIMBRA DESKTOP ini. 4. ZIMBRA DESKTOP bersifat FREE/GRATIS !! Ke-powerfull-an ZIMBRA DESKTOP tidak harus dibayar dengan sejumlah dolar. Kita bisa mendownload secara GRATIS. 35
--------------------------------------------------------3.3. Seesmic Seesmic adalah sebuah perusahaan rintisan yang berbasis di San Francisco yang mengembangkan klien jejaring sosial untuk situs seperti Twitter dan Facebook yang beroperasi di web, telepon genggam, dan desktop. Seesmic merupakan salah satu aplikasi streamreader/social networking apps yang paling menonjol diantara para pesaingnya seperti Brizzly, termasuk dulu, ketika aplikasi Twitter list pertama kali muncul, Seesmic termasuk salah satu desktop Twitter yang mengintegrasikan fungsi ini. Kini Seesmic memang sudah tidak pantas di sebut sebagai desktop Twitter lagi, karena mereka tidak hanya menyediakan stream line dari Twitter saja tapi social networking lain, dan kini dengan akuisi atas Ping.fm, akan membawa Seesmic pada babak baru mereka. Tahun 2010 sepertinya akan menjadi tahun yang ambisius bagi Seesmic, dengan target one million status updates a day, sepertinya akuisi ini hanya salah satu langkah dari langkah lainnya yang akan ditempuh Seesmic. Gigaom menyebutkan, Seesmic mendapatkan dana $12 miliion dari para investor, dengan dana ini, sepertinya proses belanja mereka tidak akan berhenti di sini. Ping.fm dengan fasilitasnya mengupdate status di banyak aplikasi, setidaknya ada 50 social network, lalu email dan chat, dikombinasikan dengan Twitter apps dari Seesmic untuk Android, Balckberry, Windows, Web, OSX via Air, lalu ratusan tibu orang yang menikmati fasilitas Seesmic setiap harinya, tentu target yang ditetapkan Seesmic adalah target yang ambisius tapi sangat mungkin di capai. 3.4. Flickroom Bagi para pengguna atau bahkan pecinta Flickr, aplikasi berikut mungkin akan sangat membantu Kita untuk tidak sekedar menggunakan Flickr pada browser, namun menggunakan aplikasi desktop untuk Flickr di komputer kita, Flickroom. Setelah melakukan install Flickroom, Kita harus mengijinkan Flickroom untuk mengakses account Flickr Kita. Aplikasi bersandar pada photostream Kita, group, setting, dan kontak untuk mendapatkan foto Kita. Flickroom memiliki nilai lebih untuk menampilkan foto dalam cara yang menyenangkan pada background berwarna abu-abu yang menarik. Seluruh tampilan aplikasi lebih gelap dan ini mungkin memiliki resensi yang bias meskipun itu membuatnya cukup menyenangkan untuk digunakan dan benar-benar menunjukkan warna dari setiap foto Kita. Dari dalam Flickroom Kita dapat menelusuri melalui Group, melihat tambahan baru yang dibuat oleh kontak Kita, dan banyak lagi. Kita dapat mengontrol berapa banyak detail tentang foto yang ditampilkan mulai dari penampilan slide sederhana untuk sidebar dengan semua uraian, komentar, tag, dan data EXIF. Kita juga dapat mengomentari foto-foto, memberi rating, membuat catatan, simpan ke komputer, dan melakukan Tweet pada foto-foto yang sedang Kita lihat.
36
--------------------------------------------------------Flickroom merupakan aplikasi gratis dan berbasi Adobe AIR. Aplikasi ini dapat Kita install pada Windows, Mac, dan Linux. 3.5. Digsby
Digsby adalah sebuah program pengiriman pesan instan berbasis IM Instant Messaging atau Pesan Instan multi protokol melalui web browser yang dikembangkan oleh dotSyntax, LLC. Digsby mendukung sebagian besar jenis pengiriman pesan, yaitu AOL Instant Messenger, Microsoft.NET Messenger Service, Yahoo! Messenger, ICQ, Facebook Chat, dan servis berbasis XMPP seperti Google Talk. Digsby juga dapat menunjukkan notifikasi e-mail dan notifikasi lainnya dari MySpace, Facebook, Twitter dan LinkedIn. Diperlukan registrasi untuk mengunduh aplikasi ini di komputer, dan dapat dilakukan secara gratis. Installer Digsby menggunakan memori komputer sebanyak 3.8 MB. Sejak 20 maret 2008, aplikasi Digsby sudah dikembangkan dalam bentuk beta. Terdapat beberapa fitur dalam digsby, yaitu : Digsby mendukung sebagian besar IM multi protokol seperti AIM, MSN, Yahoo!, Google Talk, ICQ, Jabber. Sejauh ini belum ada dukungan untuk IRC Status pengguna : available, away, atau custom yang membuat pengguna dapat menuliskan statusnya sendiri. Digsby juga menyediakan pilihan mode invisible Conversation log viewer yang dapat membuat pengguna memilih untuk mengategorikan percakapan yang sedang dilakukan menurut nama teman ataupun tanggal Dapat melakukan chat instan dengan meng-klik jendela IM yang muncul berupa popup Menu untuk mendapatkan info, mengirim/ menerima IMs, transfer file, mengirim email ke alamat yang telah terkonfigurasi sebelumnya, mengirim SMS, melakukan percakapan suara dan video (dengan dukungan dari flash application), melihat percakapan terdahulu, menambah/ block pengguna lain, dan link cepat ke alert menu. Merge Contacts yang berguna untuk mengumpulkan pengguna IM dari aplikasi lain (misalnya AIM atau Yahoo!) bersama-sama ke dalam daftar kontak yang sama dalam buddy list. Pilihan untuk menyortir buddy atau teman menurut grup, status, servis, atau servis yang diikuti dengan status. Dapat mendeteksi musik yang sedang diputar di komputer ketika sedang mengaktifkan status Listening To Digsby juga dapat diintegrasikan dengan servis e-mail dari Gmail, Yahoo! Mail, Hotmail, POP, IMAP, dan AIM mail. Pengguna dapat menandakan sebuah pesan sebagai sudah dibaca atau sebagai spam melalui notifikasi yang muncul lewat jendela popup. Pengguna juga dapat membuat e-mail baru dari jendela percakapan IM. Selain itu juga, ada beberapajejaring sosial yang telah didukung oleh Digsby yaitu Facebook, Myspace, dan Twitter. Pengguna dapat update status atau berbagi informasi dari link yang tersedia untuk Facebook atau Myspace. Pengguna juga dapat update dan mereply status di Twitter, dan Digsby juga menyediakan shortcut untuk menandai suatu status sebagai favorit, atau mengirim pesan langsung (Direct Message).
37
--------------------------------------------------------JURNAL 1. Apakah ada kelebihan antara Yahoo Messenger dan Google Talk? 2. Bagaimanakah konfigurasi Yahoo Messenger dan Google Talk jika ingin chatting melalui jaringan kampus (VPN)? 3. Bagaimanakah cara menyetting digsby dibandingkan dengan IM lainnya?
38
Modul 4 Aplikasi Jejaring Sosial
---------------------------------------------------------
Modul 4 - Aplikasi Jejaring Sosial

Tujuan : Memahami dan dapat menggunakan Social Networking Memahami dan dapat memahami fungsi dari masing-masing Social Network Memahami dan dapat memahami kelebihan dari tiap Social Network
4.1. Social Networking / Jejaring Sosial Social Networking atau jejaring sosial merupakan situs web yang menyediakan layanan yang mengizinkan penggunanya untuk saling berkomunikasi dengan siapa saja, dengan keluarga, sahabat, bahkan artis yang digemarinya. Melalui situs ini, kita mengetahui cara lain untuk berkomunikasi, sehingga kita dapat saling berhubungan dan berbagi dengan setiap orang. Setiap situs jejaring sosial mempunyai cara masing-masing untuk berkomunikasi yang menjadi keunggulan dari situs tersebut.
4.1.1 Facebook
Beberapa tahun terakhir ini facebook merupakan situs web nomor 1 yang paling banyak dikunjungi oleh para pengguna internet di Indonesia. Situs yang dibuat oleh Mark Zuckerberg pada 4 Februari 2004 ini awalnya hanya diperuntukkan untuk kampusnya saja, Harvard. Namun dalam kurun waktu satu tahun, orang-orang yang memiliki alamat email dari kampus-kampus di seluruh dunia dapat bergabung, dan sejak September 2006 siapa saja dari alamat email manapun dapat bergabung di situs ini. Facebook memiliki banyak fitur, kita dapat berkomunikasi dengan teman kita dengan cara saling berkomentar status, mengirim wall, message, chat, dsb. Selain itu kita juga dapat saling berbagi foto, ataupun berkompetisi melalui aplikasi facebook. 4.1.2
Google +
Situs Jejaring Sosial Google Plus. Berita terbaru datang dari google sebagai situs pencari terbesar saat ini. seperti anda ketahui, berita yang sedang hangat dibicarakan di dunia internet adalah tentang google yang rencananya akan membuat sebuah situs jejaring social yang akan menandingi ketenaran facebook.com Tapi benarkah situs jejaring sosial google plus milik google ini akan menandingi ketenaran situs jejaring sosial facebook yang merupakan situs jejaring nomer 1 saat ini. hal inilah yang menjadi penasaran para pecinta situs jejaring sosial saat ini. Sebagai gambaran saja mungkin benar google plus akan menandingi ketenaran facebook dan menggantikan posisi facebook saat ini, jika kita lihat dari beberapa hal berikut : 39
--------------------------------------------------------4. Integrasi dengan layanan Google Porsi terbesar yang dimiliki Google untuk menarik orang menggunakan Google+ ialah integrasi. Artinya Google akan membangun fitur dan peralatan Google+ ke hampir semua layanan online-nya mulai dari pencarian dokumen hingga Video. Google+ sudah diintegrasikan ke hampir keseluruhan produk Google. Ini memperkenankan Anda memonitor semua peristiwa Google+ (pesan, update, dan lainlain) sewaktu membagi konten dengan teman tanpa meninggalkan layanan Google yang sedang Anda gunakan. Jutaan orang menggunakan layanan gratis Google (Gmail, Dokumen, Pencarian, dll.), dan dengan keterikatan layanan tersebut dengan Google+ mungkin akan mudah bagi seseorang meninggalkan Facebook. 5. Manajemen pertemanan yang lebih baik Google benar bahwa konsep lingkaran atau Circle lebih sesuai dengan cara kita berteman di kehidupan nyata. Kita memiliki banyak jenis teman, dan kita berinteraksi dan berkomunikasi dengan mereka dalam berbagai cara yang berbeda. Fitur Grup Facebook memperkenankan anda membentuk grup khusus teman, tapi dibandingkan dengan yang dilakukan di Google+, itu nampaknya tidak praktis. Lagi pula, Fitur Grup Facebook masih baru (tambahan), sedangkan Circle merupakan landasan dari platform Google+. 6. Aplikasi mobile yang lebih baik Jika Anda adalah pengguna Android, anda bisa tahu bahwa memperoleh konten dari telepon Anda ke platform sosial lebih gampang, lebih bersih, lebih banyak fungsi dengan aplikasi mobile Google+. Aplikasi tersebut memang sudah mantap, tapi Google akan tetap mencari dan mencari cara untuk membuat Android anda menjadi anggota tubuh dari platform sosial Google+ anda. Google berharap untuk menggunakan basis pengguna Android-nya yang besar sebagai suatu bagian melawan Facebook, yang aplikasi mobile-nya walau kelihatan cantik tapi sedikit kikuk untuk digunakan. 7. Lebih gampang menemukan hal untuk dibagi Fitur Spark Google+ merupakan satu lagi hal penting yang membedakannya dari Facebook. Spark ialah di mana Google mengungkit mesin pencarinya untuk melakukan sesuatu yang tidak dapat dilakukan Facebook yaitu memberikan pengguna aliran informasi instan yang relevan untuk dibagi bersama teman. Lantaran Facebook tidak memiliki mesin pencari, penggunanya harus meninggalkan situs itu untuk mencari data yang dapat dibagi atau menunggu teman mereka membaginya dengan mereka. Pertanyaan bagaimana saya mencari sesuatu untuk dibagi secara langsung dijawab dengan Spark. 8. Anda dapat mengambil kembali data Anda Facebook dikenal kurang handal menangani data pribadi. Misalnya Anda dipaksa untuk membuat bagian tertentu data pribadi anda tampil ke publik, dan sangat sulit untuk secara permanen menghapus profil Facebook Anda. Di lain pihak, Google membuatnya mungkin bagi Anda untuk mengambil semua data yang Anda tempatkan di Google+ lalu pergi. Hal ini dilakukan melalui perangkat Google+ yang disebut Data Liberation. Dengan hanya beberapa klik anda dapat mengunduh data dari Picasa Web Albums anda, Profil Google, Google+ stream, Buzz dan kontak. 9. Melabel foto lebih baik Ketika melihat foto di Google+ anda dapat melabel nama orang-orang di dalamnya mirip dengan di Facebook. Anda membuat persegi empat kecil di sekitar wajah mereka, 40
--------------------------------------------------------kemudian mengetikkan nama mereka pada kotak di bawahnya atau memilih salah satu nama yang diterka Google+. Namun ada perbedaan besar di mana Google menangani aspek privasi dalam melabel foto. Ketika Anda melabel seseorang, akan ada catatan seperti ini Menambahkan label ini akan memberitahukan orang yang anda labelkan. Mereka dapat foto dan album terkait. Di lain pihak, Facebook tidak melakukan usaha untuk memperingatkan orang bahwa mereka telah dilabel (mungkin saja dalam foto yang tidak baik) dan memberikan mereka kesempatan langsung untuk mengeluarkan (remove) label itu. Google juga telah memutuskan untuk sedikit malu menggunakan perangkat lunak pengenalan wajah, yang sekarang digunakan Facebook untuk secara otomatis mengidentifikasi orang dalam foto yang diunggah ke album pengguna. 10. Fitur obrolan grup yang mantap Google+ memiliki fitur yang mengalahkan Facebook dalam urusan obrolan. Gampang untuk membuat grup khusus obrolan vidio dengan menggunakan fitur Hangouts pada Google+, dan membuat grup khusus untuk mengobrol nampaknya merupakan sesuatu yang alami dan menyenangkan untuk dilakukan dalam jejaring sosial. Hal yang mirip juga dilakukan oleh aplikasi mobile Huddle yang membuat pengguna Android memulai obrolan teks grup. Facebook tidak menawarkan perangkat ini. 11. Membagi konten lebih aman Anjuran privasi sudah lama meminta situs jejaring sosial untuk memperkenankan pengguna menentukan tingkat privasi setiap konten yang dibagi, daripada menggunakan daftar penyetelan awal yang menentukan semua konten yang dibagi. Google nampaknya mendengar permintaan itu, dan membangun kapabilitas tersebut ke dalam Google+. Sebagai contoh, jika saya membagikan artikel atau mengunggah gambar dari kamera, Google+ memberikan saya pilihan lingkaran teman mana yang ingin saya bagikan konten tersebut. itu merupakan keuntungan Google+. 12. Google lebih baik mengurusi data pribadi Anda Menjalankan sebuah jejaring sosial, semuanya tentang tanggung jawab untuk mengurusi informasi pribadi pengguna. Facebook merupakan perusahaan muda yang bergerak cepat yang telah terbukti angkuh dalam pergerakannya, kurang begitu peduli kepada privasi data pengguna, dan mudah diakses orang lain. Di lain pihak, Google merupakan perusahaan yang jauh lebih matang yang terlihat jauh lebih terpercaya ketimbang Facebook. Sebagian besarnya, Google telah beroperasi berdasarkan slogannya Jangan Menjadi Jahat.
4.1.3 Twitter
Twitter selain sebagai situs jejaring sosial, dapat disebut juga mikroblog, dimana setiap postnya / pembaruannya hanya dibatasi maksimal 140 karakter. Twitter dikenal dengan situs yang simple namun powerful. Banyak artis yang menggunakan twitter untuk berhubungan dengan penggemarnya tanpa terganggu oleh aktifitas para penggemarnya, karena dalam twitter ada follower dan ada juga following. Berikut istilah-istilah yang sering ditemukan di twitter: Tweet : Apa yang kita tulis (post) di Twitter, itu yang dinamakan Tweet. 41
--------------------------------------------------------Following : Artinya Anda akan menerima update status dari orang yang anda follow tersebut. Follower : Orang yang menerima update dari Anda. Anda bisa mengikuti (following) siapa saja, tapi jangan bingung jika ada simbol seperti Gembok disamping nama orang yang akan Anda follow (lihat gambar TheFuzzball dibawah) artinya orang tersebut tidak sembarang menerima Follower karena alasan-alasan tertentu (misal: takut di follow spammer atau menghindari follower yang memakai gambar profil kurang sopan) @ : Fungsinya bisa untuk me-reply tweet teman, membuat link kepada nama yang dimaksud ReTweet : disingkat RT, artinya mengulang, menulis kembali apa yang ditulis seseorang, bisa jadi karena kata-kata tersebut Indah. RT ditambahkan pada tweet diikuti dengan @(username) ditambah dengan kata-kata yang ingin anda ulang. Hash Tags : dilambangkan dengan #, gunanya agar pengguna lain yang melihat bisa mencari topik sejenis yang ditulis orang lain dengan mudah. Misal #FollowFriday , #Blogging dll #FollowFriday : adalah tradisi setiap hari Jumat dimana Anda dapat merekomendasikan orang lain untuk menjadi follower dari teman Anda yang menyenangkan. Silahkan tulis @(namatemanAnda) yang Anda rekomendasikan pada tweet Anda. TrendingTopics : Apa topik yang sedang dibicarakan banyak orang? Misal saat kematian Michael Jackson, Michael Jackson menjadi TT (sing. Trending Topics), saat bom mengguncang Indonesia #IndonesiaUnite menjadi topik yang paling sering dibicarakan. Bagaimana suatu tweet bisa menjadi Trending Topics? biasanya karena banyaknya orang yang menggunakan #(topikyangdibicarakan) pada tweetnya. Semakin banyak orang yang membicarakan topik yang sama dengan Anda, semakin lama topik tersebut bertahan pada Halaman depan Twitter dan dilihat oleh seluruh dunia. 4.1.4
LinkedIn
Linkedin adalah professional network terbesar di dunia dengan 40 juta anggota dan sedang berkembang dengan sangat pesat. Linkedin mampu mempertemukan anda dengan orang-orang yang ada percaya dan membantu anda untuk saling bertukar ide, Pertanyaan anda mungkin adalah, apa saja manfaat yang dapat anda dapat dari Linkedin Professional Networking, berikut ini beberapa hal yang kita dapat :
42
--------------------------------------------------------Bangun Profil Profesional Anda Sendiri Linkedin memberikan anda fasilitas untuk membuat dan mengontrol online profil anda sendiri. Memberikan informasi yang menurut anda penting untuk diketahui oleh professional lainnya, dan anda mampu mengontrol informasi itu sendiri. Kalau anda pusing dengan penjelasan ini, bayangkan saja anda menggunakan fasilitas komunitas dunia maya seperti facebook, friendster, atau social networking lainnya. di sini anda bisa juga masuk ke professional group di seluruh dunia loh Tetap Terhubung dengan Teman dan Kolega Anda Dunia informasi sangat bergerak cepat, begitu pula dunia profesional dimana orang-orang akan mengganti pekerjaan dan lokasi mereka secara konstan ataupun cepat. Melalui LinkedIn ini, informasi tersebut akan senantiasa terbaharui. Anda dapat meng-update informasi lokasi, pekerjaan, bahkan apa yang sedang anda lakukan di profile online anda. Anda juga tidak akan ketinggalan informasi ter-update dari teman atau kolega anda, mengenai pekerjaan mereka, lokasi mereka, apa yang sedang mereka kerjakan bahkan update dari blog mereka. Temukan Seorang Ahli atau Ide di LinkedIn Anda mungkin terkadang tidak dapat menyelesaikan sebuah tantangan bisnis yang unik di perusahaan anda. Bagaimana anda menyelesaikannya jika teman kantor anda pun tidak dapat membantu. Nah solusinya bisa anda dapatkan di LinkedIn ini. silahkan ada mencari para ahlinya berdasarkan nama, pekerjaan, title, perusahaan dan keyword lainnya untuk mencari solusi buat anda. Atau bahkan bertukaran ide atau diskusi secara online. Jelajahi Kesempatan di Depan Mata Anda Anda mungkin percaya bahwa terkadang kesempatan itu tidak datang dengan sendirinya, tetapi harus diciptakan. LinkedIn professional Network ini mampu memberikan keduanya. Anda bisa mencari informasi pekerjaan baru, membangun reputasi profesional anda, dan menghubungkan anda dengan rekanan bisnis lainnya. Dengan bantuan search enginenya, anda mampu mencari informasi kesempatan tersebut.
4.1.5 Plurk
Plurk adalah layanan jejaring sosial dan mikroblog gratis yang mengizinkan pengguna mengirim pembaruan (dikenal sebagai suatu plurk) melalui antarmuka web, pesan singkat, atau cara lain, dengan panjang maksimum 140 karakter. Pembaruan ini akan ditampilkan pada halaman web pengguna menggunakan garis waktu yang menampilkan semua pembaruan yang diterima dengan 43
--------------------------------------------------------urutan kronologis, dan selanjutnya disampaikan ke pengguna lain yang masuk. Pengguna dapat menanggapi pembaruan pengguna lain dari garis waktu mereka melalui situs web Plurk.com, pengirim pesan instan, atau pesan singkat. ` Salah satu kelebihan dari Plurk ini adalah kemampuannya untuk menyajikan aktivitas penggunanya berdasarkan jam dan waktu (timeline), sehingga setiap penggunanya dapat menceritakan kegiatan yang sedang ia lakukan saat itu. Pengguna juga dapat melihat aktivitas orang lain berdasarkan timeline tersebut. Setiap pengguna dapat memberikan tanggapan atas postingan dari Plurker lainnya. Dalam komunitas Plurk dikenal sebuah status yang disebut "karma", yaitu suatu penilaian tertentu terhadap aktivitas anggotanya. Semakin tinggi poin karma seorang pengguna, maka semakin banyak pula fasilitas yang akan ia diperoleh. Sistem inilah yang mendorong para Pluker untuk terus aktif di Plurk. Dalam Plurk, karma seorang pengguna akan naik berdasarkan pada: Jumlah postingan ke Plurk. Jumlah tanggapan diberikan terhadap pengguna Plurk lainnya. Jumlah teman di ajak bergabung dengan Plurk Jumlah pengguna yang mengajak pengguna menjadi teman. JURNAL: 1. Carilah kelebihan maupun kekurangan dari tiap social network? 2. Buatlah masing-masing satu account dari social network di atas, minimal 3 social network dan ceritakan bagaimana penggunaan social network tersebut
44
Modul 5 - Aplikasi Berbasis Layanan Cloud
---------------------------------------------------------

Tujuan : Memahami dan dapat menggunakan konsep Cloud Computing Memahami dan dapat menggunakan Google Docs Memahami dan dapat menggunakan Google Calendar
5.1.
Cloud Computing
Menurut sebuah makalah tahun 2008 yang dipublikasi IEEE Internet Computing "Cloud Computing adalah suatu paradigma di mana informasi secara permanen tersimpan di server di Internet dan tersimpan secara sementara di komputer pengguna (client) termasuk di dalamnya adalah desktop, komputer tablet, notebook, komputer tembok, handheld, sensor-sensor, monitor dan lain-lain." Komputasi awan adalah suatu konsep umum yang mencakup SaaS, Web 2.0, dan tren teknologi terbaru lain yang dikenal luas, dengan tema umum berupa ketergantungan terhadap Internet untuk memberikan kebutuhan komputasi pengguna. Dengan cloud computing, semua aplikasi desktop bisa diakses di dunia maya, sehingga ke depannya kita tidak perlu menginstal banyak aplikasi di computer kita, cukup dengan browser Internet, kita dapat mengakses ribuan aplikasi yang menerapkan konsep cloud computing. 5.1.1 Office Web App Office Web App merupakan layanan baru yang disediakan oleh raksasa software, Microsoft Corp. Office Web App menerapkan konsep cloud computing untuk urusan office. Jadi aplikasi office seperti word, excel, power point, dan one note dapat diakses pula secara online. Office Web App termasuk layanan yang baru, Karena baru diluncurkan pada tahun 2010. Selain itu saat modul ini ditulis, layanan ini pun belum bisa diakses oleh semua Negara, untuk itu diperlukan sedikit trik untuk mencoba layanan ini. 3. Buka browser anda lalu login dengan Windows Live ID atau MSN Passport Anda ke situs SkyDrive di http://skydrive.live.com. Setelah login, Anda harus merubah seting regional di account Anda ke regional USA karena untuk sementara Office Web App ini baru tersedia untuk regional USA saja. 4. Masuk ke alamat http://profile.live.com/details/EditContact.aspx lalu dibagian Country/Region pilih United States.
45
--------------------------------------------------------5. Masuk ke alamat http://home.live.com/options/language Lalu klik pada pilihan English (English).
6. Masuk ke alamat https://account.live.com/EditProf.aspx?mkt=en-us&rp=SummaryPage Lalu di bagian Country/region pilih United States.
7. Kemudian kembali ke halaman home anda dan klik Office, pilih document yang akan anda buat
a. Word
b. Excel
c. Power Point 46
---------------------------------------------------------
d. One Note
5.1.2
Google Doc Google Docs adalah sebuah fasilitas online yang disediakan Google untuk membuat dokumen secara online. Dengan Google Docs kita dapat membuat berbagai dokumen di layar browser kita.
Mengapa kita perlu mempertimbangkan penggunaan Google Docs untuk menggantikan Microsoft Office yang sudah lebih kita kenal? Untuk membeli satu lisensi dari software Microsoft Office 2007 kita memerlukan biaya dari $80 (Home and Student Edition) hingga $440 (Profesional Edition). Google Docs bisa anda kunjungi di alamat http://docs.google.com. Google Docs dapat digunakan apabila kita sudah memiliki account email yang terdaftar di google. Dengan menggunakan Google Docs, kita dapat membuat dokumen surat, dokumen Spreadsheet, dan dokumen presentasi secara online. Selain mudah digunakan, aneka fitur yang tersedian relatif lengkap, file yang dihasilkan juga otomatis akan tersimpan secara online. Jadi ini merupakan metode yang sangat praktis untuk backup online. 5.1.3 Google Calendar
Google Calendar adalah aplikasi berbasis web yang menawarkan fitur sejenis yang ada pada aplikasi desktop seperti Microsoft Outlook. Ini adalah aplikasi manajemen waktu dimana kamu dapat mengatur jadwal rapat dikantor atau sebagai pengingat hari spesial dengan orang yang kamu sayangi. Kamu dapat memberikan keterangan pada jadwal seperti judul, keterangan, pengingat dalam bentuk alarm, dll. Akan tetapi karena berbasis teknologi web (AJAX), maka 47
--------------------------------------------------------Google Calendar dapat diakses oleh semua sistem operasi termasuk sistem operasi untuk perangkat mobile seperti ponsel dan PDA asalkan sistem operasi tersebut mempunyai browser yang mendukung teknologi web yang sesuai. Tidak seperti perangkat lunak desktop Microsoft Outlook yang hanya tersedia untuk PC dan MAC. Tidak jauh berbeda dengan cara pengaksesan Google Docs, pada Google calendar Anda bisa mengaksesnya di halaman http://calendar.google.com dengan menggunakan account email google juga. Ada tujuh alasan mengapa google calendar sangat powerful sebagai aplikasi manajemen waktu untuk Anda, antara lain: 1. Share jadwal Anda Anda bisa menyebarkan jadwal yang telah anda buat kepada orang lain, sehingga bagi orang yang sibuk, cara ini cukup praktis dan efisien 2. Kalender dapat dibawa kemana-mana Kalender dapat disinkronisasikan dengan kalender dalam mobile phone atau melalui google calendar dalam versi mobile, jadwal pun selalu dalam genggaman Anda 3. Tidak lupa terhadap acara tertentu Google calendar memiliki fitur untuk memberikan notifikasi peringatan terhadap jadwla tertentu, sehingga tiap saat kita akan diberikan notifikasi terhadap jadwal yang dibuat 4. Dapat mengajak teman dan mengetahui respon dari teman tersebut dalam suatu acara Apabila Anda ingin mengajak seseorang dalam suatu acara tertentu, pilihannya bisa melalui google calendar, Anda bisa mengirimkan invitation untuk mengajak seseorang bergabung dalam acara orang lain, serta Anda bisa melihat bagaimana respon dari orang tersebut 5. Dapat disinkronisasikan dengan aplikasi desktop Kita dapat mengakses google calendar melalui sinkronasi terhadap aplikasi desktop, seperti Microsoft Outlook, Apple iCal dan Mozilla Sunbird. 6. Akses offline Dapat melihat kalender dalam bentuk read-only 7. Gratis Google calendar gratis tidak berbayar, cukup dengan memiliki account gmail. Berikut tampilan google calendar:
48
--------------------------------------------------------JURNAL: 1. Buatlah satu account di google lalu gunakanlah google docs untuk men-share file buatan anda? (Share 2 file biasa dan juga file presentasi)? 2. Buatlah jadwal kuliah kalian dan buat semacam reminder dalam Google Calendar, gunakan tampilan bulan ! 3. Undang salah satu teman anda untuk bergabung dengan cara anda melalui Google Calendar !
49
Modul 6 - HTML Scripting (Tingkat Dasar)
Modul 6 - HTML Scripting Tingkat Dasar

Tujuan : Memahami dan dapat menggunakan konsep HTML Memahami dan mengenal lebih jauh mengenai HTML 5 Memahami dan dapat menggunakan tag dasar dalam HTML
6.1.
Definisi HTML
HTML adalah sekumpulan kode logika (markup) yang diapit oleh tag (tanda kurung siku) untuk mengatur bagaimana penampilan sebuah dokumen web dan kandungan informasinya. Pemrograman HTML berbeda dengan pemrograman Pascal yang kalian sedang pelajari. HTML tidak butuh variabel layaknya Pascal dan pemrograman lainnya. HTML lebih dititk beratkan untuk bagaimana mengatur format dan tata letak sebuah web page. - HTML disajikan dalam web browser oleh web server - HTML pada umumnya berisi informasi ataupun interface, dan umumnya HTML yang ditampilkan di client bukan merupakan murni source code asli. - HTML bisa hasil dari representasi bahasa pemrograman server side seperti PHP, JSP, NET, ruby dll Seperti contohnya, jika kita membuka sebuah halaman index sebuah web, misalnya "index.php", tetapi jika dilihat di source code nya hanya merupakan sekumpulan kode HTML. Aturan penulisan baku HTML sekarang diatur oleh sebuah organisasi Internasional bernama W3C. Misalnya sebuah web harus dilengkapi minimal elemen head dan body. Untuk menandai elemen, kita menggunakan tag (diawali <, diakhiri >), sedangkan untuk menandai komen digunakan tanda slash bintang (diawali /*, diakhiri */). Secara umum, digambarkan sebagai berikut
<html> <head> /* informasi tentang dokumen, judul webpage, script selain HTML (seperti javascript, CSS) */ </head> <body> /*konten web/ segala sesuatu yang akan ditampilkan di browser diletakkan disini */ </body> </html>
Tag dapat mempunyai atribut, yang digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Misalnya :
<body bgcolor=red><b>tes</body>
50
Ket
: body = elemen tag HTML bgcolor = atribut red = nilai Sedangkan yang tanpa atribut seperti bold <b>, italic <i>, dll. Dengan source kode diatas, maka di halaman web akan berwarna merah, dengan tulisan tes bercetak tebal. 6.2. HTML 5
HTML5 adalah next generation dari HTML 4.01 / XHTML 1.x. HTML5 akan menjadi standar baru HTML, XHTML dan HTML DOM. HTML5 merupakan hasil kerjasama dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group. Browser modern kebanyakan sudah mendukung HTML5, seperti Safari, Opera 10.6, Mozilla Firefox 3.5, Google Chrome 6.0, dll. Selain itu banyak website yang telah menggunakan HTML 5, seperti Youtube dan Vimeo yang tidak lagi menggunakan flash dalam menampilkan video melainkan menggunakan syntag. Beberapa fitur baru yang ada di HTML5 : Elemen Canvas Untuk menggambar objek di halaman web tanpa menggunakan flash maupun aplet java. Berikut adalah tag untuk membuat canvas <canvas id="myCanvas" width="200" height="100"></canvas> dan canvas tidak memiliki kemampuan untuk menggambar sendiri. Menggambar semua harus dilakukan didalam JavaScript. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
Elemen audio dan video Dengan elemen ini, plugin pemutar audio dan video tidak dibutuhkan lagi karena sudah ada tag khusus dan codec OGG sudah langsung mengenalinya, sehingga akan menjadi ancaman tersendiri untuk Adobe Flash dan Ms Silverlight.
51
Video Format Format IE Firefox Opera Chrome Ogg No 3.5+ 10.5+ 5.0+ MPEG 4 9.0+ No No 5.0+ WebM No 4.0+ 10.6 6.0+ Ogg = Ogg files with Theora video codec and Vorbis audio codec MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec Contoh <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> </body> </html> Audio Format Format Ogg Vorbis MP3 Wav <html> <body> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html>
Safari No 3.0+ No
IE 9 No Yes No
Firefox 3.5 Yes No Yes
Opera 10.5 Yes No Yes
Chrome 3.0 Yes Yes Yes
Safari 3.0 No Yes Yes
Local offline storage Local storage ini bukan sekedar cookies biasa. Fitur ini mampu menyimpan data dalam ukuran besar sekaligus. Misalnya jika kamu sedang membuka Feed situs-situs favorit di Google Reader, kamu bisa membaca seluruh isi Feed langganan kamu dalam offline mode. Konten elemen baru 52
Seperti article, footer, header, nav, section, calendar, date, time, email, url, search 6.3. Format Content dalam HTML
Dalam menulis HTML diperlukan pemformatan yang sesuai sehingga ada pemisahan antara satu kata, kalimat , paragraf dengan yang lainnya. Berikut beberapa format untuk konten teks webpage. a. Heading Adalah format teks tertentu yang digunakan sebagai judul dari suatu paragraph. Heading lebih tepat digunakan untuk tulisan berkedudukan sebagai judul atau sub bab. Ada 6 tingkatan heading. <h1> merupakan tingkatan dengan ukuran font paling besar, sedangkan <h6> sebaliknya.  <h1>contoh heading <h2>contoh heading <h3>contoh heading <h4>contoh heading <h5>contoh heading <h6>contoh heading Outputnya 1l</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
b. Paragraph Jika kita ingin menampilkan dokumen yang cukup panjang, misalnya pada suatu postingan blog, maka kita perlu pemisah antar kalimat yang biasa kita sebut paragraph, supaya hasil tulisan menjadi lebih rapih maka diberikan sebuah style dengan CSS.  <html> <head> </head> <body> <h2>paragraph</h2> <p>ini adalah sebuah paragraf. kita menggunakan tag paragraf jika kita ingin menuliskan sebuah dokumen yang cukup panjang</p> </body> </html> Outputnya : 53
c. Break Adalah tag yang digunakan untuk memenggal atau memotong kalimat atau konten HTML. Hasil yang diperoleh seperti kita menekan enter ketika mengetik pada dokumen. Penulisan brak yaitu <br>. d. Horizontal Rule Digunakan untuk membuat garis batas horizontal. Atribut yang dapat digunakan antara lain seperti align, width, size, noshade, color. Penulisan horizontal rule yaitu <hr>.
6.4. Format Text Format text dalam HTML berfungsi menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dengan bentuk huruf tebal, miring, garisbawah dan semacamnya. 6.4.1. Font Untuk mengatur huruf pda HTML. Namun pada HTML5 sudah tidak support lagi. Tetapi bisa menggunakan CSS. 6.4.1.1. Size Untuk mengatur besarnya huruf, paling kecil 1 dan paling besar 7. Tetapi bisa juga menggunakan ukuran pixel dengan max tidak terbatas 6.4.1.2. Face Untuk mengatur jenis huruf, bisa juga dituliskan lebih dari satu yang artinya mempunyai prioritas yang berbeda-beda. Misalnya diisi string jenis font (jenis font didalam tanda petik dua), seperti Arial, Times New Roman dan sebagainya. Atribut tersebut memiliki arti huruf yang ditampilkan berjenis Arial, jika tidak terdapat huruf Arial maka akan menjadi jenis Times New Roman. 6.4.1.3. Color Untuk memberi warna pada font. Ada 2 cara yaitu, pertama menuliskan nama warnanya seperti red, green atau blue. Dan cara kedua dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna yang dinyatakan dalam angka hexadecimal.  <font size="5">teks ini sizenya 5</font> <br> <font size="7">teks ini sizenya 7</font> <br> <font face="Rockwell, Times New Roman">Jika browser tidak mendukung font Rockwell, maka akan tampil <br> tulisan dengan font Times New Roman</font> <br><br> <font color="FF0000">tulisannya jadi warna merah</font><br> <font color="00FF00">tulisannya jadi warna hijau</font><br> <font color="0000FF">tulisannya jadi warna biru</font>
54
6.4.2. Blockquote dan Address Blockquote digunakan untuk menulis kutipan teks, sehingga tulisan akan menjorok kekanan layar browser. Sedangkan Address merupakan salah satu elemen yang umum di dalam suatu dokumen, untuk penulisan alamat perusahaan, personal atau instansi.  <p>Ini contoh petikan/ quotation <blockquote cite="http://www.w3.org"> untuk kutipan yang berasal dari luar website </blockquote> Sedangkan untuk petikan tanpa tag paragraph break cukup dengan <q>gausah pake petik </q> </p> <address> contoh penulisan tag address <br> <a href="mailto:boisme@rocketmail.com">Email me</a><br> ITTELKOM BANDUNG, Jl. Telekomunikasi Terusan Buah Batu<br> Phone: +022xxxxxx </address>
6.4.3. List Berfungsi untuk menjabarkan point-point informasi. Pada HTML ada 2 buah jenis list yaitu ordered list <ol>, dan unordered list <ul>. Selain itu, list juga bisa digunakan sebagai dasar dalam pembuatan menu dengan menggabungkan CSS atau javascript. 55
Ordered list (list terurut), penomeran menggunakan angka 1,2,3,4,dst ataupun menggunakan sejumlah item dalam list tersebut. Unordered list, bisa diartikan seperti bulleted list dalam aplikasi Office, defaultnya berupa noktah. Neste list. Merupakan unordered list yang digunakan secara bersarang, maksudnya di dalam list ada list lagi.
 <ol>ordered list <li>Kopi</li> <li>Teh</li> <li>Susu</li> </ol> <ul>unordered list <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul> <ul>nested list <li>bahasa pemrograman web <ul> <li>HTML</li> <li>AJAX</li> </ul> </li> <li>bahasa pemrograman aplikasi <ul> <li>Pascal</li> <li>C</li> </ul> </li> </ul>
56
6.4.4. Link Link berfungsi untuk memberikan sebuah hubungan kepada sebuah konten ataupun dokumen lain baik dalam satu web page ataupun berbeda bahkan ke seluruh konten yang berada pada satu jaringan yang sama. Atribut href sering dipakai. Href merupakan kepanjangan dari hypertext reference. Ketika link ditekan, maka halaman baru akan muncul sesuai value yang dipilih. Dengan menggunakan attribute target, kita bisa menentukan value nya yang berfungsi Valuenya yaitu : _blank : target URL akan dibuka di tab/ jendela baru _self : target URL akan dibuka di tab yang sama _parent : target URL akan dibuka di tab/ dokumen sebelumnya. _top : target URL akan dibuka di tab/ jendela secara full Ada beberapa jenis link, yaitu sbb: 6.4.4.1. Link Absolute Digunakan untuk membuat link ke web page lain yang berada di situs lain. 6.4.4.2. Link Relative Digunakan untuk membuat link ke web page lain yang berada di dalam web tersebut, atau masih berada dalam public_html / htdocs yang sama. 6.4.4.3. Bookmark Digunakan untuk menghubungkan dengan bagian-bagian tertentu yang ada pada dokumen yang sama. Ada 2 tag yang diperlukan dalam mebuat bookmark, yaitu tag untuk link <a href=#nama_bookmark>ke bookmark</a>, dan tag untuk bookmarknya sendiri <a name=#nama_bookmark>test</a> <!LINK> <!absolute link> <a href="http://ittelkom.ac.id" title="ITTELKOM BANDUNG" target="_top">kampus saya</a> <br> <!relative link><br><br> <a href="admin/index.html">akan tampil index.html di folder admin</a> <br> <!bookmark> <a href="nilai">akan memanggil page bookmark nilai</a>
57
6.4.5. Media pada HTML Memasukkan konten media selain image sangat memungkinkan pada HTML, dengan menggunakan tag <embed> maka beberapa media yang didukung oleh browser memungkinkan untuk dimunculkan mulai dari sebuah file music sampai sebuah file office. Konten yang dimainkan atau dijalankan dalam tag embed sebenarnya merupakan sebuah perantara, konten atau file tersebut tidak langsung dijalankan dengan browser tetapi dijalankan dengan sebuah plugins yang terinstall pada browser. Misalnya plugin media player, flashplayer, pdf , dll. Beberapa atribut pada tag embed: src : alamat resource untuk di masukkan ke tag embed. width : lebar area untuk resource yang akan dimunculkan. height : tinggi area untuk resource yang akan ditampilkan. align : posisi pada embed misalnya left, right, center. name : nama untuk identitas objek. pluginspage : identitas untuk menandakan dimana software untuk plugins yang di embedkan. pluginurl: url untuk instalasi plugin. hidden : untuk menyembunyikan atau tidak objek. href : membuat link pada objek. target: target pada objek yang akan di tampilkan. autostart: jika konten atau objek yang ditampilkan berjenis music atau film maka akan otomatis dijalankan (start). loop dan playcount : jumlah untuk perulangan pada musik atau film. volume : untuk menset besar suara. control : untuk menampilkan posisi peletakan control controller : untuk menampilkan control pada objek. mastersound : untuk mengidentifikasikan music yang akan digunakan dalam beberapa grup objek. starttime : seberapa lama musik atau video dimainkan. endtime : untuk menset waktu untuk memberhentikan. Contoh penggunaan embed untuk file music atau video :
<EMBED SRC="MyMovie.mov" HEIGHT=400 WIDTH=600 TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/"/>
Contoh penggunaan embed untuk file pdf:

<EMBED height="166" src="document.pdf" type="application/pdf" width="216">
Contohpenggunaan embeduntuk file flash:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/s wflash.cab#version=6,0,40,0 WIDTH="550" HEIGHT="400" id="myMovieName"> <PARAMNAME=movie VALUE="myFlashMovie.swf"> <PARAMNAME=quality VALUE=high><PARAMNAME=bgcolorVALUE=#FFFFFF>
58
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwaveflash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>
Sebagai keterangan pemakaian tag <object> berfungsi sebagai Flash ActiveX control pada beberapa browser yang support. JURNAL: 1. Adakah perbedaan yang paling mencolok antara HTML dan HTML 5? 2. Carilah lebih banyak lagi referensi mengenai HTML 5 dan gunakan HTML 5 dalam membuat suatu situs !
59
Modul 7 HTML Scripting (Tingkat lanjut)
Modul 7 - HTML Scripting Tata Letak dan Interaktivitas

Tujuan : 7.1. Memahami dan dapat menggunakan konsep Frame Memahami dan dapat menggunakan konsep Table Memahami dan dapat menggunakan konsep CSS Dapat membuat Form baik dengan Javascript maupun PHP Frame
Frame merupakan Tag HTML untuk membangun sebuah web page yang memungkinkan menampilkan beberapa web page dalam satu window browser (page utama). Halaman pada window browser yang terbagi-bagi disebut dengan istrilah frame. Meskipun frame sudah lama ditinggalkan dan digantikan oleh konsep layer terlebih dengan adanya sebuah teknik yang dikenal dengan nama AJAX (Ansyncronous javascript with XML). Keuntungan dari pemakaian frame adalah untuk meminimalisir pemanggilan keseluruhan page dan sebagai membantu dalam pembagian layout web. Contoh sintak penggunaan frame :
<FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,..]]}> <FRAME SRC=url NAME=namaFrame> </FRAMESET>
7.1.1
Target Frame Target frame predefined : _self, _top, _parent, _blank, sering digunakan untuk menunjukkan target penampilan dari suatu link. Atribut name merupakan atribut wajib sebagai identitas, jika frame yang bersangkutan akan dijadikan sebagai tempat untuk menampilkan URL suatu link. Target Frame _self _top Kegunaan Digunakan apabila target frame adalah frame tempat link berada. Digunakan apabila target frame adalah windows tempat frame berada. Dengan menggunakan _top sebagai target maka definisi frame yang ada pada windows browser akan hilang, diganti dengan definisi frame yang baru jika ada. Digunakan apabila target frame adalah setingkat dengan frame link berada. Akibat dari target frame _parent akan sama jika tempat frame link berada hanya satu level di bawah definisi frame windows. Target _blank digunakan untuk membuka windows baru.
_parent
_blank
60
7.1.2
IFrame IFrame memungkinkan pemrogram web untuk membuat frame windows yang mengambang, frame ini berlaku mirip seperti suatu text box, jika browser melakukan scroll maka frame ini juga turut terscroll. Iframe sering digunakan untuk menghemat pemakaian bandwith pada content web sebelum ditemukan teknik AJAX. Dengan adanya IFrame browser cukup mereload content yang berada pada IFrame. Misalnya ada sebuah tombol untuk menampilkan tulisan daftar mahasiswa. Dan data mahasiswa tersebut di masukkan pada suatu halaman tertentu dan delink-an dengan sebuah IFrame. Maka ketika tombol tersebut di tekan, maka halaman pada Iframe saja yang akan di-reload oleh browser. Tanpa harus mereload keseluruhan halaman misalny mereload header web, menu web bahkan tombol yang digunakan untuk mengeluarkan data pada iframe.
<IFRAME name=nama_frame SRC=url rows=# cols=#></IFRAME>
Atribut name dalam IFRAME wajib diisikan jika dalam webpage yang akan menampilkan lebih dari satu frame mengambang; jika tidak maka akan hanya ada satu frame yang ditampilkan dalam browser. Contoh penggunaan IFRAME sebagai berikut :
7.2.
Table Table digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Selain itu tabel juga dapat digunakan untuk membuat layout dan interface dalam web dengan menggabungkan beberapa gambar dan tag html.Elemen-elemen Tabel Elemen <table></table> <caption> </caption> <tr> </tr> <td> </td> <th></th> Penjelasan Mendefinisikan sebuah tabel, bisa juga diatur bordernya Biasanya untuk member judul pada tabel Atau table row, yaitu membuat sebuah baris tabel dalam tabel. Setiap tabel pasti mengandung tag <tr> dan <td> Atau table devide, yaitu membuat sebuah column dalam tabel. Setiap penulisan <td></td>, harus diantara<tr> dan</tr> Mendefinisikan header pada tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah 61
<tbody></tbody> <thead></thead> <tfoot></tfoot> Atribut-atribut tabel Atribut align
Tag untuk mendefinisikan bagian body table, boleh digunakan ataupun tidak Tag untuk mendefinisikan bagian header table, boleh digunakan ataupun tidak Tag untuk mendefinisikan bagian footer table, boleh digunakan ataupun tidak
Value Right Center Left Top Middle Bottom n= bilangan integer n=bilangan integer n px atau % True False Auto
Penjelasan Menentukan rata/ alignment kiri kanan dari teks dalam tabel Menentukan rata/ alignment atas bawah dari teks dalam tabel Menggabungkan beberapa kolom menjadi 1 kolom Menggabunkan beberapa baris menjadi 1 baris Width = menentukan lebar Height = menentukan tinggi mengatur pemblokan teks dalam tabel.
Valign
Colspan Rowspan Width, height draggable
<table border="1" > <tr> <td colspan="12">contoh tabel dg rowspan dan colspan</td> <td colspan=2 rowspan=4>cobain deh</td> <td rowspan="4" align="center"> ^_^</td> </tr> <tr> <td width=10px>pertamax</td> <td rowspan="3">keduax</td> <td colspan="10">ketigax</td> </tr> <tr> <td rowspan="2" align="center">cekcek</td> <td colspan=3>coba</td> <td rowspan="2" cellspacing="4" height="60" width=100> <table border=1 cellspacing=2 align=center> <tr align="center"> <td bgcolor="yellow">kiri</td> <td bgcolor="grey">kanan</td> </tr> <tr> <td colspan=2>tabel lagi</td> </tr> </table> </td> <td colspan=6>hm</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> <td colspan=3>7</td> </tr> Modul Praktikum lnternet 2012/2013 </table>
62
Outputnya :
7.3.
Special Tag Special Tag terdiri atas tag <body> dan tag <div>, tag body yang berfungsi sebagai pembentuk halaman HTML karena di dalamnya terdiri atas seluruh content yang akan ditampilkan pada website. Pada tag <body> terdapat atribut margin yang terdiri atas leftmargin sebagai batas kiri body dengan tepi kiri layar browser dan topmargin sebagai batas atas body dengan tepi atas layar browser. Leftmargin dikenal untuk koordinatX dan topmargin dikenal untuk koordinatY.
<body topmargin="50"> <body leftmargin="50">
Selain itu terdapat beberapa atribut seperti bgcolor untuk warna dasar body dan background untuk memasukkan image sebagai background pada web page. Tag <div> berfungsi untuk sebagai wadah yang fungsinya sama dengan body. Bisa diumpamakan sebagai body di dalam body. Div berfungsi untuk mengelompokkan komponen- komponen pada body sehingga memudahkan untuk dilakukan. Tag div bias disamakan dengan konsep layering untuk pemisahan beberapa komponen. Untuk pengaturannya dapat menggunakan CSS. Div lebih fleksibel sebagai pembangun layout dibanding dengan table, sehingga banyak designer website menggunakan <div>sebagai pembentuk layout web. Beberapa atribut dari tag <div> antara lain id, width, height, title, dan style. Contoh penggunaan tag <div>:
<div style=background:gray> <h3>testdivnih</h3> <p>cumin ngetest aj penggunaan tag div</p> </div>
Output:
Untuk penggunaan layout, tag <div> sangat unggul berbeda dengan penggunaan table. Misalnya untuk membuat layout bertumpuk dengan menambahkan position di atribut style dengan value absolute misalnya <div style=position : absolute>. Berikut ini contoh penggunaan <div> sebagai alternatif pembuat layout selain tag table dan frame.
<div id="menu" align="right"> <a href="">HOME</a>|
63
<a href="">CONTACT</a>| <a href="">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Home</h5> <p>Konten pada halaman utama, contoh penggunaan div</p> </div>
Output:
7.4.
CascadingStyle Sheets (CSS) CSS adalah kumpulan format yang mengatur tampilan isi dari sebuah halaman web. Dengan adanya CSS maka pengaturan halaman web akan lebih mudah, fleksibel baik posisi layout, jenis maupun tipe huruf yang ada di dalamnya. Keuntungan dari CSS adalah kemudahaannya dalam pengupdatean halaman dalam jumlah banyak dan konten web yang banyak. CSS selector merupakan inti dari CSS, berfungsi untuk mendefinisikan elemen HTML yang akan disisipkan atau dimanipulasi dengan menggunakan CSS. Format penulisan sebagai berikut:
Selector berisikan nama tag html yang akan dimanipulasi atau nama code CSS yang akan di panggil pada atribut class pada sebuah tag HTML. Properti merupakan elemen CSS yang akan dimanipulasi misalnya color untuk memanipulasi warna background sedangkan value berisikan nilai yang akan diberikan pada property. Selain itu dikenal pula dengan jenis selector yang bernama idselector. Idselector berfungsi untuk memanipulasi sebuah id pada tag HTML. Contoh penggunaannya sebagai berikut:
<style> p#contohID1{background-color:gray;} p#contohID1{text-transform:uppercase;} </style> <pid="contohID1">Paragrafnya diberikan warna background abu- abu</p> <pid="contohID2">Sedangkan yang ini tulisannya dijadikan huruf besar semua</p>
Output:
64
7.4.1. Inline CSS Inline CSS adalah memasukkan kode CSS pada line HTML tepatnya pada atribut style pada sebuah tag. Inline CSS dapat digunakan jika penggunaan CSS tidak terlalu banyak dan cukup dibutuhkan oleh tag pemanggilnya saja. Karena jika pemakaiannya terlalu banyak misalnya pada setiap tag yang memerlukannya. Maka penggunaan Inline CSS tidak efesien dan malah akan membuat jorok kode HTML anda dan ukuran filepun akan semakin besar. Contoh penggunaan Inline CSS:
<pstyle="background:black;color:white;">black and white he3x \(^o^)/</p> <p>yang ini ngga pake CSS</p>
Output:
7.4.2. Internal CSS Yang dimaksud dengan internal CSS adalah code CSS yang diletakkan pada file pemanggilnya misalnya pada file HTML. Internal CSS diletakkan pada tag <Style> dalam header tag <HEAD>. Penggunaan internal CSS yang efesien diterapkan jika hanya sebuah file HTML saja yang membutuhkan sebuah CSS dan CSS tersebut diterapkan pada banyak elemen HTML. Berikut ini merupakan contoh dari internal CSS:
<html> <head> <styletype="text/css"> p{color:white;font-style:oblique;} body{background-color:black;} </style> </head> <body> <p><b>White text on a black background!</p> </body> </html>
Output:
7.4.3. Eksternal CSS Eksternal CSS adalah peletakkan code CSS pada sebuah file yang dilink-kan terhadap file yang memanggilnya. Pada file CSS tersebut tidak diawali oleh sebuah tag seperti <STYLE> tetapi langsung dengan menuliskan code-code CSS. File CSS berekstensi (.css) dapat dilink-kan dengan sebuah dokumen HTML dengan menggunakan tag<LINK>. Eksternal CSS digunakan jika banyak file membutuhkan CSS yang sama, maka penerapan eksternal CSS lebih efesien. Contoh eksternal CSS sebagai berikut: Contohcss.css
body{background-color:blue} p{color:yellow;} h4{ color:white; font-size:x-large; }
65
File.html
<html> <head> <linkrel="stylesheet"type="text/css"href="contohcss.css"/> </head> <body> <h4>HeaderBerubah</h4> <p><b>Paragraf berwarna kuning.. penggunaan CSS sangat mudah sekali,nggaadaygsusah.pastibisalah</p> </body> </html>
Output:
7.4.4. Class& ID Selector Penggunaan ID & Class digunakan untuk membuat CSS dimana atribut yang diinginkan diluar atribut HTML. Penggunaan ID selector dalam pemanggilan CSS ialah dengan tanda #, sedangkan penggunaan Class selector dengan tanda . M isalnya pada sebuah paragraf diinginkan berwarna putih pada tulisan dengan background berwarna hitam sedangkan pada paragraf berikutnya berwarna biru. Hal ini dapat dilakukan dengan penerapan multiple CSS. Contoh penerapan class & ID selector sebagai berikut:
<style> P#kesatu{color:white;background:black;} p.kedua{color:blue;} </style> <body> <p>Ngga make CSS</p> <p id="kesatu">Dengan tulisan berwarna putih dan background paragraf berwarna hitam</p> <p class="kedua">dengan tulisan berwarna biru implementasi style paragraf kedua bukan pertamax</p>
Output:
7.4.5. Penerapan CSS Berikut ini penerapan-penerapan CSS sebagai manipulasi pada komponen HTML a. CSSuntuk Background CSS dapat diterapkan untuk mengatur efek background dari suatu elemen. Jenisjenis property yang dapat digunakan untuk mengatur sebuah background ialah: background-color digunakan untuk menspesifikkan warna apa yang digunakan terhadap suatu elemen. Contoh penggunaannya : 66
body {background-color:#b0c4de;}
Penulisan color pada background-color bisa dengan tiga macam penulisan. Pertama dengan menggunakan bilangan hexadecimal (#b0c4de), kedua dengan menggunakan nama warnanya langsung, misalnya red, green, blue. Ketiga dengan menggunakan nilai RGB dari suatu warna, misalnya rgb(255,0,0).
background-image digunakan untuk menampilkan background dengan suatu gambar. Contoh penggunaannya:
body {background-image:url('img_tree.png');}
background-repeat digunakan untuk mengatur tampilan image yang akan ditampilkan ke dalam web yang ingin kita buat. Contoh penggunaannya:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
Berbeda apabila kita ingin menampilkan gambar dengan repeat, repeat-x, repeat-y. Jika menggunakan value ini, maka gambar akan diulang menurut value yang diingikan. Perbedaannya sebagai berikut: Value repeat Fungsi gambar akan diulang hingga memenuhi halaman web baik secara horizontal dan vertikal Gambar akan diulang hingga memenuhi halaman web namun secara horizontal saja (sesuai dengan sumbu X) Gambar akan diulang hingga memenuhi halaman web namun secara vertical saja (sesuai dengan sumbu Y) Gambar akan ditampilkan secara utuh, tidak ada pengulangan
repeat-x
repeat-y
no-repeat
background-position digunakan untuk mengatur peletakan gambar dalam halaman web. Contoh penggunaannya :
body{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }
Selain itu juga, peletakan gambar bisa dilakukan dalam posisi : left top right center left center right bottom left bottom center top right top center center
center bottom x% y% xpos ypos inherit 67
Dari semua property background di atas, penggunaannya dapat disingkat menjadi :

body {background: #b0c4de url('img_tree.png') no-repeat right top;}
b. CSS untuk link CSS dapat diterapkan pada sebuah link dengan menyimpannya pada sebuah tag <a>. Terdapat empat buah subclass dari CSS link yaitu link digunakan untuk link sebelum atau tidak pernah digunakan / diklik, visited digunakan ketika link sudah digunakan, hover digunakan ketika cursor berada di atas link, dan active digunakan untuk link yang sedang dikunjungi. Contoh penggunaan:
<style> a:link{ color: red; text-decoration: none; } a:visited { color: red; text-decoration: none; } a:hover { color: blue; } </style> <ahref="">Link dengan menggunakan manipulasi CSS</a>!
c. CSS untuk Font CSS yang diterapkan untuk font dapat membantu untuk merapikan dan memberikan sebuah style pada kumpulan teks.
<head> <style> body{ font-family: serif; } p{ font-size: 23px; } h2{ font-size: 14px; font-style: italic; } ul{ font-weight: bolder; } </style> </head> <body> <h2>CSS Fonts (heading kecil pdhl H2)</h2> <p>Wah besar sekali hurufnya padahal berada di tag paragraf bukan heading</p> <ul> <li>contoh css </li> <li>css font</li> <li>mudah sekali</li> </ul> </body>
Outputnya:
d. CSS untuk Margin dan Padding
68
Ilustrasi di atas merupakan CSS Box Model, dimana content merupakan bagian inti dari suatu box. Penggunaan CSS untuk margin digunakan untuk mengatur jarak di sekeliling luar dari border suatu objek, sedangkan padding digunakan untuk mengatur jarak dari borderke dalam untuk membatasi antara content dengan border itu sendiri.Dalam penulisannya margin dan padding tidak banyak perbedaan. Dapat ditulis sebagai berikut :
margin-top:25px; margin-bottom:75px; margin-right:50px; margin-left:100px; padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
69
penulisan margin maupun padding diatas dapat disingkat menjadi :
margin:25px 50px 75px 100px; o top margin is 25px o right margin is 50px o bottom margin is 75px o left margin is 100px margin:25px 50px 75px; o top margin is 25px o right and left margins are 50px o bottom margin is 75px margin:25px 50px; o top and bottom margins are 25px o right and left margins are 50px margin:25px; o all four margins are 25px
Pengisian value untuk margin bisa dengan : auto (margin secara otomatis terdefinisi) length (menuliskan langsung nilainya) % (mengisi langsung pembagian marginnya) Kecuali untuk padding tidak mendukung secara auto 7.5. Form Berfungsi untuk menerima suatu inputan dari browser, agar nantinya diproses di sisi server. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Tag ini digunakan untuk membatasi input. Dalam satu form dapat terdiri atas beberapa komponen form dan tidaj dapat berbentuk nested form yaitu form dengan jumlah banyak dalam arti terdapat form lebih dari satu untuk dikirimkan. <form action=url method=get|post enctype= autocomplete=on|off> <!-komponen tag form --> </form> Atribut action untuk memasukkan URL yang akan digunakan sebagai pemrosesan form. Method merupakan atribut untuk mengatur bagaimana inputan-inputan dari user dikirim ke program CGI. Atribut autocomplete adalah salah satu atribut baru HTML5 untuk form. Dengan memilih value on, maka browser bisa memberikan opsi kepada user untuk inputan yang ada pada diinput sebelumnya yang tersimpan di local offline storage browser. Beberapa tipe inputan untuk tag form. Input type Penjelasan Text Radio Check Box List Untuk inputan berupa angka, karakter. Semua inputan dianggap string Untuk banyak pilihan, hanya 1 pilihan yang bisa dipilih user Untuk banyak pilihan, user bisa memilih beberapa pilihan Untuk menyediakan pilihan dalam bentuk list box, pilihan dapat lebih dari 68
satu Button Submit Reset Image textarea Select Untuk mendefinisikan tombol pemrosesan form. Button dapat bekerja dengan aksi/ event seperti onclick, onblur dengan bantuan javascript Untuk melakukan aksi submit pada form Untuk mereset/ form dalam keadaan belum terisi kembali Digunakan sebagai pengganti button tetapi berupa file gambar Untuk memasukkan data dalam bentuk teks berupa memo. Untuk inputan berbagai pilihan dengan menyajikan drop down menu
berikut contoh tipe-tipe inputan form

<form> <table align=center width=400 border=0> <tr><th colspan=2>FORM MAHASISWA</th> </tr> <tr> <td>Nama</td> <td ><input type="text" maxlength=50 size=40></td> </tr> <tr> <td>Password</td> <td><input type="Password" maxlength=20 size=40></td> </tr> <tr> <td valign=top>Tipe</td> <td><input type=radio name=tipe>Kupu-kupu<br> <input type=radio name=tipe>Kura-Kura<br> <input type=radio name=tipe>Kunang-kunang<br> <input type=radio name=tipe>Laba-laba<br></td> </tr> <tr> <td valign=top>Hobi</td> <td><input type=checkbox>Belajar<br> <input type=checkbox>Internetan<br> <input type=checkbox>Gaming<br> </td> </tr> <tr> <td valign=top>Alamat</td> <td><textarea rows=5 cols=40></textarea></td> </tr> <tr> <td>Avatar</td> <td><input type="file" name="avatar"></td> </tr> <tr> <td colspan=2 align=right><input type="button" value="simpan"></td> </tr> </table> </form> Modul Praktikum lnternet 2012/2013
69
7.6.
Form dan Javascript Memadukan antara form dan javascript sebenarnya bisa dalam hal apapun, namun yang dibahas pada bahasan kali ini ialah tentang alert (peringatan) ketika memasukkan data yang ada dalam form. Kita akan menggunakan sintaks yang ada pada bahasan sebelumnya. Untuk memasukkan sintaks javascript, dapat dimasukkan dalam tag <head> pada HTML/ Pendefinisan fungsi untuk javascript dapat dilihat pada contoh :
<html> <head> <script type="text/javascript"> function show_alert() Pendefinisan fungsi untuk { alert pada tag <head> alert("Data anda sudah dimasukkan!"); } </script> </head> <body> <form> <table align=center width=400 border=0> <tr><th colspan=2>FORM MAHASISWA</th> </tr> <tr> <td>Nama</td> <td ><input type="text" maxlength=50 size=40></td> </tr> <tr> <td>Password</td> <td><input type="Password" maxlength=20 size=40></td> </tr> <tr> <td valign=top>Tipe</td> <td><input type=radio name=tipe>Kupu-kupu<br> <input type=radio name=tipe>Kura-Kura<br> 70 Modul Praktikum lnternet 2012/2013
<input type=radio name=tipe>Kunang-kunang<br> <input type=radio name=tipe>Laba-laba<br></td> </tr> <tr> <td valign=top>Hobi</td> <td><input type=checkbox>Belajar<br> <input type=checkbox>Internetan<br> <input type=checkbox>Gaming<br> </td> </tr> <tr> <td valign=top>Alamat</td> <td><textarea rows=5 cols=40></textarea></td> </tr> <tr> <td>Avatar</td> <td><input type="file" name="avatar"></td> </tr> <tr> <td colspan=2 align=right> <input type="button" onclick="show_alert()" value="simpan" /> </td> Pemanggilan fungsi </tr> javascript pada button </table> dengan aksi ketika </form> mengklik (onclick) </body> </html>
71
7.7.
Form dan PHP PHP yang merupakan singkatan dari Hypertext Processor ialah sebuah bahasa pemrograman yang berjalan pada server side. Berbeda dengan HTML maupun CSS, PHP lebih sebagai pengolah data dari system. Dalam sebuah form, akan ada interaksi antara interface dan juga server sebagai pengolah data dari interface. Bahasan yang menjadi fokus kali ini yaitu bagaimana sebuah form dapat berinteraksi dengan PHP.
<form method="post" action="data.php"> 1 <table align=center width=400 border=0> <tr><th colspan=2>FORM MAHASISWA</th> </tr> <tr> <td>Nama</td> <td ><input name="nama" type="text" maxlength=50 size=40></td> </tr> 2 <tr> <td>Password</td> <td><input name="pwd" type="Password" maxlength=20 size=40></td> </tr> <tr> <td valign=top>Tipe</td> <td><input type=radio name=tipe>Kupu-kupu<br> <input type=radio name=tipe>Kura-Kura<br> <input type=radio name=tipe>Kunang-kunang<br> <input type=radio name=tipe>Laba-laba<br></td> </tr> <tr> <td valign=top>Hobi</td> <td><input type=checkbox>Belajar<br> <input type=checkbox>Internetan<br> <input type=checkbox>Gaming<br> </td> </tr> <tr> <td valign=top>Alamat</td> <td><textarea rows=5 cols=40></textarea></td> </tr> <tr> <td>Avatar</td> <td><input type="file" name="avatar"></td> </tr> <tr> <td colspan=2 align=right> <input type="submit" value="simpan" /> </td> 3 </tr> </table> </form>
72
data.php <?php echo "$_POST[nama]"; echo "<br>"; echo "$_POST[pwd]"; echo "<br><br>Data anda sudah dimasukkan!"; ?> Keterangan:
4 5 6 7
Ada tambahan atribut method dan juga action. Method dibutuhkan untuk mendefinisikan apakah data dari form ingin menggunakan method POST atau GET. Sedangkan action digunakan untuk menjelaskan data dari form akan dikirim ke file apa. File tersebut dapat diibaratkan seperti link antar file. Data dari form harus didefinisikan untuk tiap tag inputnya karena dalam PHP, data akan dikenali dari nama inputnya. Type inputan untuk mengirimkan data dari form ke PHP ialah dengan tipe submit. Sintaks untuk menampilkan input nama dari form (sesuai nama pada input) Sintaks HTML tag <br> Sintaks untuk menampilkan input password dari form Tampilkan tulisan
Outputnya:
73
JURNAL: 1. Bagaimanakah cara membagi suatu page ke dalam bentuk seperti ini: (gunakan frameset)
2. Bagaimanakah cara membuat suatu div menumpuk dengan div lainnya ? 3. Buatlah sebuah form dengan PHP/Javascript dengan yang berbeda dengan form biasanya? Bisa dimodifikasi dengan menggunakan CSS !
74
Modul 8 - HTML dan CSS Scripting
Modul 8 - HTML Scripting Desain Visual dan Tata Letak dengan

CSS 3
Tujuan : Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya
8.1. CSS 3 CSS3 adalah standar untuk CSS yang paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama, sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus mengubah desain yang sudah ada. CSS3 sebetulnya masih dalam pengembangan dan revisi W3C, walaupun begitu banyak property-property CSS3 yang sudah di implementasikan di berbagai Browser modern, seperti firefox, safari, dan sebagainya kecuali Internet Explorer CSS3 dibagi kedalam beberapa modul, beberapa modul CSS3 yang sangat penting untuk menghilangkan batasan desain diantaranya: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface 8.1.1 CSS3 Borders Dengan menggunakan CSS3, kita dapat membuat garis tepi dengan ujung yang bulat, menambahkan bayangan pada kotak dan menggunakan gambar sebagai garis tepi tanpa menggunakan program desain seperti Photoshop. Dalam bab ini kita akan belajar tentang properti dari garis tepi : Border-radius Box-shadow Border-image
75
Maksud gambar di atas adalah semua browser sudah mendukung border-radius begitu juga box shadow kecuali Safari harus menggunakan prefix webkit- pada codenya. IE tidak mendukung border-image. Tag tambahan untuk tiap browser yaitu: Internet Explorer: tidak ada tambahan Mozilla Firefox : -mozGoogle Chrome: -webkitSafari: -webkitOpera: -o8.1.2 CSS3 Rounded Corners CSS rounded corner merupakan suatu kelebihan dalam CSS 3 untuk memudahkan user dalam hal pengaturan tampilan. Terkadang untuk membuat garis tepi yang melengkung, dibutuhkan tools grafis tambahan untuk membuatnya. Namun dalam CSS 3, hal tersebut tidak diperlukan. Berikut contoh penerapan rounded corners:
<html> <head> <style type="text/css"> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:100px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ } </style> </head> <body> <div>IF LAB 2011</div> </body> </html>
Outputannya:
76
8.1.3
CSS3 Box Shadow Box Shadow digunakan untuk memunculkan efek bayangan pada kotak div yang dibuat. Penerapannya ialah
<html> <head> <style type="text/css"> div { width:100px; height:50px; background-color:yellow; -moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */ -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div>IF LAB 2011</div> </body> </html>
Outputannya:
8.1.4
CSS3 Border Image Untuk membuat garis tepi dengan image, tanpa CSS 3 membutuhkan beberapa image untuk menampilkannya, sedangkan dengan adanya CSS 3, akan lebih dimudahkan karena detail border hanya perlu di definisikan apa adanya dan dapat diedit sesuai selera. Sintaks border image ialah
<html> <head> <style type="text/css"> div { border-width:15px; width:250px; padding:10px 20px; }
77
#round { -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; } #stretch { -moz-border-image:url(border.png) 30 30 stretch; /* Firefox */ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; } </style> </head> <body> <div id="round">Here, the image is tiled (repeated) to fill the area.</div> <br /> <div id="stretch">Here, the image is stretched to fill the area.</div> <p>Here is the image used:</p> <img src="border.png" /> </body> </html>
Outputannya:
78
8.1.5
CSS3 Backgrounds Penerapan CSS 3 pada background memudahkan kita untuk melakukan pengeditan terhadap background untuk suatu tampilan. Konfigurasi background dalam CSS 3 antara lain: background-size background-origin
8.1.5.1 CSS3 The background-size Untuk menentukan ukuran yang pas dari suatu gambar untuk dijadikan sebagai background, tidak selalu membutuhkan gambar sesuai ukuran aslinya, namun dapat sesuaikan ukuran gambar tersebut. CSS 3 dapat melakukan hal tersebut dengan cukup mudah, yaitu :
<html> <head> <style type="text/css"> body { background:url(img_flwr.gif); background-size:80px 60px; -moz-background-size:80px 60px; /* Firefox 3.6 */ background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224" height="162" /></p> </body> </html>
Outputnya :
79
8.1.5.2 CSS3 The background-origin Background origin merupakan layanan dalam CSS 3 dalam memberikan background sesuai dengan penempatannya. Dapat dilihat pada modul sebelumnya, pada bagian CSS untuk margin dan padding, terdapat keterangan mengenai box model, digambarkan suatu kotak memiliki atribut tersendiri. Background origin menyesuaikan dengan bentuk tersebut. Dapat dilihat dalam contoh
<html> <head> <style type="text/css"> div{ border:1px solid black; padding:35px; background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; } #div1{ background-origin:border-box; } #div2{ background-origin:content-box; } </style> </head> <body> <p>background-origin:border-box:</p> <div id="div1"> tes1 </div> <p>background-origin:content-box:</p> <div id="div2"> tes 2 </div> </body> </html>
Outputnya:
80
CSS3 dapat menggunakan beberapa background untuk satu elemen. Dapat dilihat dalam contoh, terdapat dua background dalam satu tampilan. FItur ini terbilang baru dikarenakan CSS versi sebelumnya belum mendukung fitur seperti ini.
<html> <head> <style type="text/css"> body{ background-image:url(img_flwr.gif),url(img_tree.gif); } </style> </head> <body> </body> </html>
Outputnya
81
8.1.6
CSS3 Text Effects Dalam membuat efek terhadap suatu teks, tanpa CSS 3, hal itu tidak mungkin terjadi tanpa bantuan image. Namun CSS 3 bisa melakukan hal tersebut, cukup dengan sintaks yang singkat, tulisan akan berubah semuai kemauan kita. Dalam text effect, terdapat dua konfigurasi, yaitu : text-shadow word-wrap
8.1.6.1 CSS3 Text Shadow Text shadow digunakan untuk memberikan efek bayangan terhadap teks yang ingin dibuat. Contohnya ialah:
<html> <head> <style type="text/css"> h1 { text-shadow: 5px 5px 5px #ffff00; } </style> </head> <body> <h1>Text-shadow effect!</h1> </body> </html>
Outputannya:
8.1.6.2 CSS3 Word Wrapping Word Wrap merupakan fitur dalam CSS 3 untuk melakukan penyesuaian terhadap lebar yang ditentukan. Berikut contoh penerapan word wrap :
<html> <head> <style type="text/css"> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; } </style> </head> <body>
82
<p class="test"> paragraf ini sangaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaat panjang banget lho sebenarnya</p> </body> </html>
Outputnya :
Selain itu di CSS3 juga kita dapat menambahkan effect transisi, membuat multiple kolom untuk layout teks seperti di koran dan beberapa fitur UI baru lainnya seperti resize, serta dapat membuat aplikasi. JURNAL: 1. Buatlah sebuah animasi dengan CSS 3, misalkan ada sebuah kotak ukuran bebas, kotak tersebut bisa bergerak dari kanan ke kiri dalam delay waktu tertentu? (clue: explore tentang CSS 3 animasi) 2. Modifikasilah tampilan web yang pernah dibuat dengan menggunakan CSS 3 agar lebih interaktif !
83
Modul 9 - Aplikasi Blog

Tujuan : Mengetahui tentang blog offline dan wordpress offline Dapat membuat web dengan menggunakan engine WordPress Dapat melakukan installasi engine WordPress dengan pada localhost Mampu melakukan konfigurasi pada WordPress Dapat membuat artikel di WordPress Dapat melakukan installasi dan mengganti tema pada WordPress Dapat melakukan installasi dan mengaktifkan fitur tambahan pada WordPress Mampu melakukan manajemen User 9.1. 9.1.1 Blog Offline Pengertian Blog Offline Blog merupakan singkatan dari "web log" adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut. Tetapi, pada kenyataannya, banyak blog yang mulai ditinggalkan dan ditelantarkan oleh sang blogger (penulis blog). Mengapa bisa demikian? Ini terjadi karena banyak faktor, salah satunya adalah, terkadang, keinginan untuk memposting muncul disaat tidak adanya akses internet di sekitar kita. Dan ketika akses internet itu ada, si blogger justru sedang tidak ingin memposting atau lupa dengan apa yang ingin ia posting di blognya. Faktor lain adalah, banyaknya waktu yang tersita untuk memposting suatu postingan blog yang bagus dan menarik (yang biasanya disertai gambar ataupun video), sehingga menyulitkan blogger untuk bisa terus mengupdate blognya. Blog Offline sendiri adalah rancangan suatu blog, yang dengan bantuan localhost server, seperti XAMPP, LAMPP, blog offline ini akan bisa menjalankan di web browser. dan tidak hanya untuk mempersiapkan postingan sebelum di publish secara online, Blog Offline juga biasa digunakan seorang web designer atau web programeer sebagai wadah atau tempat untuk mencoba tampilan/ design blog yang sudah dibuat, mencoba widget yang sudah dibuat oleh web programmer, dan sebagainya. 9.1.2 Blog online vs. Blog Offline Lalu apa yang membedakan antara Blog Online dengan Blog Offline ? Yang membedakan antara Blog Online dengan Blog Offline adalah secara garis besar adalah : Blog Offline harus diinstallasi terlebih dahulu, sementara blog online tidak perlu. Blog Offline membutuhkan Localhost Server untuk bisa menjalankan blog tersebut, sementara blog online tidak membutuhkan localhost server. Blog online bisa diakses tanpa localhost server di sisi client (pengguna/ end-user). 84
Blog Online diperuntukkan bagi pengguna (blogger) yang ingin membuat blog sendiri secara cepat dan punya alamat website misalnya, http://namadomain.wordpress.com, http://namadomain.blogspot.com, sedangkan blog offline diperuntukkan bagi pengguna (blogger) yang ingin memodifikasi WordPress menurut kebutuhan sendiri atau ingin membuat blog menggunakan alamat dan server sendiri seperti http://namadomain.com. Sementara itu, Blog Offline sendiri nantinya dapat dijadikan online oleh user, dengan melakukan web hosting. Untuk web hosting ini, akan dijelaskan di modul berikutnya.
9.2.
Wordpress Offline Ada beberapa contoh software/produk yang dapat digunakan untuk membangun blog offline, diantaranya adalah Joomla dan Wordpress Offline. Kali ini, kita akan mempelajari Wordpress Offline. Wordpress offline (wordpress.org) merupakan wilayah pengembang (developer). Di alamat ini, seseorang dapat mengunduh (download) aplikasi beserta seluruh berkas CMS WordPress. Selanjutnya, CMS ini dapat diubah ulang selama seseorang menguasai PHP, CSS dan skrip lain yang menyertainya. WordPress dengan Bahasa Indonesia (http://id.wordpress.org) ada berkat kerja para kontributor di Indonesia yang dipimpin oleh Huda Toriq, seorang Mahasiswa Kedokteran dari Universitas Diponegoro / UNDIP Semarang. Dengan memanfaatkan situs http://id.wordpress.org, seseorang yang tidak mengerti Bahasa Inggris masih dapat menggunakan WordPress dengan mudah. WordPress memiliki banyak keunggulan dan fitur untuk dunia blog, antara lain : a. Gratis. Untuk mendapatkan perangkat lunak WordPress hanya perlu mengunduh dari situsnya (www.wordpress.org) tanpa dipungut biaya, bahkan untuk blog komersial sekalipun. b. Berbasis kode sumber terbuka (Open Source). Pengguna dapat melihat dan memperoleh barisan kode-kode penyusun perangkat lunak WordPress tersebut secara bebas, sehingga pengguna tingkat lanjut yang memiliki kemampuan pemrograman dapat bebas melakukan modifikasi, bahkan dapat mengembangkan sendiri program WordPress tersebut lebih lanjut sesuai keinginan. c. Template atau desain tampilannya mudah dimodifikasi sesuai keinginan pengguna. Sehingga apabila pengguna memiliki pengetahuan HTML yang memadai, maka pengguna tersebut dapat berkreasi membuat template sendiri. Pengguna yang tidak mengerti HTML, tentu saja masih dapat memilih ribuan template yang tersedia di internet secara bebas, yang tentu saja gratis (http://wordpress.org/extend/themes). d. Pengoperasiannya mudah. Bagi pemula, tentu hal ini amat membantu. e. Satu blog WordPress, dapat digunakan untuk banyak pengguna (multi user). Sehingga WordPress juga sering digunakan untuk blog komunitas. Anggota komunitas tersebut dapat berperan sebagai kontributor. f. Isi content dari blog sebelumnya (selain blog wordpress) dapat di-import ke alamat hosting pribadi yang menggunakan perangkat lunak wordpress. Jadi, jika pengguna sebelumnya telah mempunyai blog tidak berbayar, misalnya di alamat Blogger/Blogspot, LiveJournal, TypePad, dan beberapa mesin blog lain, pengguna dapat mengimpor isi blog-blog tersebut ke alamat hosting blog pribadi yang 85
g.
h.
i. j. k. l.
m. n.
o. p.
menggunakan perangkat lunak WordPress. Dengan demikian pengguna tidak perlu khawatir isi blog yang lama akan menjadi sia-sia setelah menggunakan perangkat lunak WordPress. Banyaknya dukungan komunitas (community support) untuk WordPress. Banyak forum yang mendukung pengembangan WordPress ini. Contohnya : http://wordpress.org/support, http://id.forums.wordpress.com, dan juga http://id.forums.wordpress.com. Tersedia banyak plugin yang selalu berkembang. contohnya : (http://wordpress.org/extend/plugins), karena para pengembang web di Indonesia juga memberikan kontribusinya kepada WordPress. Plugin WordPress sendiri yaitu sebuah program tambahan yang bisa diintegrasikan dengan WordPress untuk memberikan fungsi-fungsi lain yang belum tersedia pada instalasi standar. Misalnya plugin anti-spam, plugin web counter, dan sebagainya. Kemampuan untuk dapat memunculkan XML, XHTML, dan CSS standar. Tersedianya struktur permalink, yang memungkinkan mesin pencari mengenali struktur blog dengan baik. Kemungkinan untuk meningkatkan performa blog dengan ekstensi (http://wordpress.org/extend). Mampu mendukung banyak kategori untuk satu artikel. Satu artikel dalam WordPress dapat dikatogorisasikan ke dalam beberapa kategori. Misalnya jika kita mempunyai artikel tentang DKI Jakarta kita dapat memasukkan artikel tersebut dalam kategori Tentang Indonesia, Propinsi di Indonesia, atau Wilayah di Pulau Jawa. Dengan multi kategorisasi ini pencarian dan pengaksesan informasi menjadi lebih mudah. Fasilitas Trackback dan Pingback. Fasilitas format teks dan gaya teks. WordPress menyediakan fitur pengelolaan teks yang cukup lengkap. Fitur fitur format dan gaya teks pada kebanyakan perangkat lunak pengolah kata seperti cetak tebal, cetak miring, rata kanan, rata kiri, tautan tersedia di WordPress. Halaman statis (Halaman khusus yang terpisah dari kumpulan tulisan pada blog). Mendukung LaTeX.
9.3.
Installasi Untuk membangun blog offline dengan wordpress, ada 2 hal yang perlu dipersiapkan. Yang pertama, adalah localhost server-nya, dimana disini akan digunakan XAMPP, dan wordpress offline, dimana pada kali ini akan digunakan wordpress versi 2.9.2. Pada praktikum ini tidak akan dijelaskan bagaimana menginstall XAMPP, tetapi langsung pada konfigurasi yang diperlukan dalam membangun sebuah blog offline.
86
XAMPP i. Jalankan XAMPP Control Panel
ii. Jalankan (running) Apache dan MySQL
iii. Buka web browser, ketik http://localhost/phpmyadmin iv. Buat database baru pada kolom create new database. Fungsi dari database ini adalah untuk menampung data-data yang akan dibutuhkan oleh wordpress offline yang akan kita buat nantinya. Dibawah tulisan Create new database, Isi dengan nama database yang diinginkan. Misal : db_blogku. Lalu klik Create
87
v. Proses installasi di localhost server sudah selesai WordPress i. download wordpress offline versi terbaru (pada contoh, yang digunakan adalah wordPress versi 2.9.2) di http://wordpress.org ii. setelah file wordpress offline tersebut selesai di download, klik kanan pada file .zip, kemudian Extract file tersebut.
iii. copy folder wordpress hasil extract, ke C:\xampp\htdocs. Beri nama (Rename) folder wordpress tersebut dengan nama blog kita. Contoh nama folder : blogku iv. setelah di copy, cari file wp-config-sample.php, kemudian cari tulisan :
v. 1) Ganti tulisan putyourdbnamehere menjadi nama database yang sudah dibuat. Contoh : db_blogku 2) Ganti tulisan usernamehere menjadi root 3) Ganti yourpasswordhere menjadi (dikosongkan). Lakukan seperti contoh gambar di bawah ini :
88
vi. Setelah selesai mengisi nama database, username dan password, Save As file tersebut dengan nama wp-config.php. Harus Save As, bukan Save saja. vii. Buka web browser, ketik http://localhost/nama_folder_blog_wordpress. Contoh : http://localhost/blogku viii. Kemudian akan muncul tampilan awal dari wordpress offline. Isikan kolom yang ada, seperti judul blog dan email.
ix. Setelah selesai, Klik Install Wordpress x. Berikutnya, akan muncul tampilan yang berisi username dan password. Username dan password ini adalah username dan password untuk bisa masuk ke blog anda. Untuk username, biasanya setiap kali installasi akan diberi username yang sama, yaitu admin. Sedangkan password yang diberikan, selalu berbeda-beda. Save atau copy password yang ditampilkan, kemudian klik button Log In
89
xi. Di tampilan Log In, akan muncul form untuk Log In. Masukkan atau paste password yang tadi sudah di copy untuk bisa masuk ke layanan konfigurasi blog kita.
xii. Jika password yang di masukkan benar, maka kita akan langsung masuk ke dalam halaman untuk melakukan konfigurasi-konfigurasi pada blog yang telah dibuat. Dan itu artinya, proses installasi wordpress offline telah selesai. xiii. Selamat mencoba !
9.4. Pengaturan User 9.4.1. Mengupdate data-data user dan mengganti password admin Pada wordpress offline, dikarenakan password awal yang diberikan oleh wordpress sangatlah susah untuk dihafalkan, admin diperbolehkan untuk merubah password, meskipun tidak bisa mengganti username. Berikut ini adalah langkah-langkah untu mengganti password admin. i. Pada menu Users, pilih Your Profile
ii. Jika ingin, user bisa melengkapi data-data user dengan mengisi informasi yang dibutuhkan pada kolom yang tersedia. iii. Untuk mengganti password, masukkan password yang baru sebanyak dua kali pada kolom yang tersedia. Usahakan masukkan password dengan karakter beragam (campuran antara huruf dan angka atau simbol) sampai strength indicator password menjadi strong. Ini dimaksudkan agar password admin tidak mudah di ketahui/ditebak oleh orang lain.
iv. Jika dirasa sudah selesai, klik button Update Profile 90

9.4.2. Membuat user baru Wordpress memiliki fitur yang memungkinkan satu blog dikelola oleh banyak user. Fungsionalias ini biasanya diperuntukkan bagi blog-blog perusahaan, atau blog komersil dimana biasanya, ada lebih dari satu user yang memposting dan mengelola blog tersebut. Cara untuk menambah user tidaklah sulit. Cukup Pilih menu User -> Add New. Lalu kemudian Isikan informasi yang dibutuhkan pada kolom yang tersedia, kemudian klik button Add User. Yang perlu diperhatikan, ada kolom Role, ini dimaksudkan untuk mengkategorikan jenis suatu user. Role yang dipilih, akan berhubungan dengan hak akses dan hak kelola oleh user tersebut terhadap blog yang dibuat. Berikut ini adalah jenis-jenis user yang ada : Subscriber : hak akses untuk membaca seluruh content pada blog. Administrator : hak akses paling tinggi yang bisa mengatur seluruh blog Editor : hak akses untuk mempublish, dan mengatur postingan miliknya, dan postingan milik user lain Author : hak akses untuk mempublish dan mengatur posting miliknya saja. Contributor : hak akses untuk menulis dan mengatur postingan, tetapi tidak dapat mempublish postingan.
9.5. Membuat Postingan baru Dalam blog, biasa dikenal istilah Post. Post adalah artikel yang ditulis oleh blogger. Pada post ini, biasanya diisi dengan tulisan-tulisan (text), gambar (image), suara (audio) maupun video. Berikut ini langkah-langkah untuk membuat postingan baru : i. Pertama, pada Menu Post, pilih Add New
ii.
Kemudian, Isi judul post, dan tuliskan isi dari post
91
iii.
Menambahkan image, video, audio, atau media lain Dalam wordpress, ada dua cara untuk menambahkan media selain text ke dalam postingan di wordpress offline ini, yaitu media diupload ke dalam wordpress dan kedua yaitu menggunakan media diluar wordpress (dengan menggunakan link URL media yang akan dimasukkan ke dalam postingan). a. Disamping tulisan Upload/Insert, Klik icon media yang ingin diupload atau di insert ke postingan.
b. Jika media belum diupload, klik tab From Computer. Klik button Select Files. Dan kemudian pilih media yang ingin dimasukkan ke dalam post.
92
Setelah itu, kita bisa mengedit info-info seputar file yang akan ditampilkan, seperti judul, deskripsi, ukuran, letak media dan lain-lain. Kemudian klik button Save all changes.
c. Jika media sudah dimasukkan/ diupload ke dalam web, klik tab Media Library. Kemudian pilih media yang diinginkan, lalu klik Insert into post.
iv.
Pada setiap postingan, terdapat beberapa menu tambahan, yaitu : Excerpt, Send Trackbacks, Custom Fields, Discussion, Comments, dan Post Revisions.
Excerpt berfungsi untuk memasukkan ringkasan (summary) dari postingan yang dimasukkan. Biasanya berfungsi untuk beberapa tema dari wordpress yang awalnya hanya menampilkan sebagaian dari postingan yang ada. Send Trackbacks berfungsi untuk memberitahukan kepada URL tertentu bahwa terdapat postingan baru Custom Fields berfungsi untuk menambahkan tambahan metadata pada sebuah posting, yang bisa digunakan pada tema-tema tertentu dari wordpress. Discussion adalah opsi untuk memperbolehkan pembaca lain untuk memberikan komentar dan melakukan ping untuk postingan tersebut.
93
Comments, adalah fungsionalitas untuk menampilkan komentar-komentar yang sudah diinputkan oleh pembaca Post Revisions berfungsi untuk mencatat tanggal dan waktu revisi sebuah postingan, dan user siapa yang melakukan revisi tersebut.
v.
Setelah yakin dengan postingan yang telah dibuat, klik button Publish (atau button Update, jika postingan telah diubah)
9.6.
Membuat Page Baru Page adalah sebuah halaman yang berisi text. Hampir sama seperti Post, pada Page juga bisa ditambahkan media lain seperti image, video, audio, dan lainnya. Tetapi yang membedakan adalah, Page tidak bisa diberi Tag maupun Category. Untuk membuat Page, dapat dilakukan dengan langkah-langkah berikut : i. Pada menu Pages, pilih Add New
ii. Sama seperti membuat postingan baru, beri judul page, dan isi page tersebut dengan artikel atau informasi yang ingin dipublish. Jika ingin menambahkan media lain, dapat dilakukan dengan cara yang sama dengan saat menambahkan media pada postingan.
94
iii. Jika anda merasa sudah puas dengan isi page yang dibuat, klik button Publish
9.7.
Menambahkan Link Link adalah suatu fungsionalitas dari sebuah blog ataupun website untuk memberikan tautan kepada suatu website/blog lain di dunia maya. Pada wordpress, link ini nantinya akan ditampilkan pada link list (blogroll) di sidebar dari blog kita. Untuk membuat link dapat dilakukan dengan cara-cara berikut : i. Pada menu Link, pilih Add New
ii. Beri nama untuk link yang ingin dimasukkan iii. Masukkan web link. Jangan lupa untuk memasukkan http:// sebelum alamat web. Contoh : http://ittelkom.ac.id iv. Checklist pada checkbox Blogroll. Ini dimaksudkan, agar link tersebut akan otomatis tampil di blogroll.
v. Pada panel Target, pilih salah satu dari 3 pilihan yang ada : _blank : website yang di link akan ditampilkan di jendela atau di tab yang berbeda _top : website yang di link akan ditampilkan di jendela atau tab yang sama, tanpa frame _none : website yang di link akan ditampilkan di jendela atau tab yang sama. vi. Lakukan konfigurasi-konfigurasi lainnya jika dirasakan perlu. Link Relationship (XFN) : yang dimaksud dengan XFN adalah XHTML Friends Network. Berfungsi untuk menambahkan relasi pada link. Advanced : menambahkan suatu gambar, alamat RSS, note dan rating pada sebuah link vii. Jika semua konfigurasi sudah dilakukan, klik button Add Link 95
9.8.
Wordpress Themes Saat ini, tema untuk blog wordpress sudah bisa dengan mudah didapatkan di internet. Karena tidak hanya wordpress, banyak juga web designer yang menyediakan beragam design template atau tema yang dapat dengan mudah didownload dan digunakan pada blog wordpress yang kita miliki. 9.8.1. Installasi Tema Wordpress i. Download tema yang diinginkan ii. Buka blog atau ketik http://localhost/nama_folder_blog/wp-admin/ iii. Pada menu Appearance, pilih Add New Themes
iv. Klik Upload, lalu klik button Browse..., dan kemudian browse file .zip yang tadi di download, kemudian klik button Install Now
v. Jika sudah muncul tampilan seperti di bawah ini, berarti Tema yang baru sudah selesai di install
9.8.2. Mengganti tema di wordpress i. Masih pada menu Appearance, pilih Themes 96
ii. Wordpress akan menampilkan tema-tema yang sudah berhasil diinstall. Pilih tema yang akan dipakai dengan memilih Activate pada tema yang diinginkan iii. Buka halaman blog anda, dan Voila ! Tema blog wordpress berhasil diganti.. !
9.9.
Wordpress Widgets Widgets adalah salah satu fitur dari wordpress yang paling digemari atau paling sering digunakan oleh para blogger untuk mempercantik dan menghias blognya, ataupun untuk menambahkan atribut-atribut tambahan. Pemasangan widget pun tidak terlalu sulit. Karena wordpress mampu mengeksekusi widget berupa tag html, text maupun script. Dengan widget, blogger dapat melakukan beberapa aktifitas, antara lain: Menampilkan headline dari postingan-postingan terbaru Menampilkan komentar-komentar terbaru yang diberikan pembaca kepada blog kita Menampilkan seluruh category, page dan archive dari blog kita Menampilkan kalender Menampilkan blogroll (daftar link) Menampilkan tulisan, gambar, ataupun animasi sederhana Memasukkan script HTML dan JavaScript Menambahkan fasilitas lain dari luar wordpress.com Beberapa widgets yang sering digunakan oleh para blogger : Archives : menampilkan link arsip bulanan Author : menampilkan daftar penulis artikel/post Blog Stats : menampilkan statik jumlah user yang mengunjungi blognya Calendar : menampilkan kalender postingan Categories : menampilkan link kategori-kategori yang ada Flickr : menampilkan album foto dari account flickr Blogroll : menampilkan daftar link YM : menampilkan status chat dari account ym (online/offline) Pages : menampilkan link ke kumpulan page Recent Comments : menampilkan komentar-komentar terbaru Recent Posts : menampilkan postingan terbaru RSS : menampilkan feed postingan dari blog/web lain Search : menampilkan fitur pencarian pada blog Tags : menampilkan kumpulan kata kunci dari seluruh postingan Text : menampilkan hasil script HTML dan Javascript Top Clicks : menampilkan postingan yang paling sering dikunjungi Top Posts : menampilkan postingan yang paling banyak dikomentari 97
Twitter
: menampilkan tweets dari account twitter si blogger
9.10.
Setting & Konfigurasi
Berikut ini adalah penjelasan untuk beberapa jenis settingan yang biasanya digunakan oleh blogger : General Settings digunakan untuk melakukan pengaturaan umum pada blog anda. Pengaturan umum yang tersedia di general setting adalah : Blog Title, berisi judul dari blog anda. Tagline, berisi deskripsi singkat tentang blog anda. WordPress Address (URL), berisi alamat URL system wordpress (admin) dimana wordpress disimpan. Misalnya untuk penggunaan server localhost dengan nama folder blogku, wordpress addressnya adalah http://localhost/blogku. Blog Address (URL), hampir sama dengan alamat wordpress, alamat blog dapat dirubah menjadi alamat yang diinginkan, jika anda ingin mengakses blog anda dengan alamat yang berbeda dengan alamat directory folder wordpress. E-mail address, berisi alamat email pemilik blog. Email disini berfungsi sebagai alamat kontak dari sistem blog (seperti pesan jika ada komentar baru, user yang melakukan registrasi, penggantian password, dll). Semua pesan tersebut akan akan dikirimkan permberitahuan pada alamat email tersebut. Membership, berisi dua opsi untuk registrasi user, yaitu opsi setiap user dapat melakukan registrasi dan user harus registrasi terlebih dahulu dan login untuk memasukkan komentar. New User Default Role, mendefinisikan hak akses user yang baru mendaftar pada blog. Timezone, berisi definisi zona waktu. Misalnya waktu untuk kota bandung (UTC+7). Tetapi untuk settingan blog pada localhost tergantung settingan zona pada operating system. Date format, untuk mendefinisikan format tanggal pada system blog Time format, untuk mendefinisikan format waktu pada system blog.
98
Format untuk Date dan Time

Kode L F J S Y G I M D G S A D Fungsi (lowercase) menampilkan nama untuk hari, contoh : Friday Menampilkan nama bulan secara penuh, contoh : January Menampilkan tanggal (hari) Menampilkan English suffix pada tanggal Menampilkan tahun dalam 4 digit Menampilkan jam dalam format 1-12 Menampilkan menit (00-59) Menampilkan bulan dalam angka (01-12) Menampilkan tanggal (01-31) Menampilkan jam dalam format 24H (00-23) Menampilkan detik (00-59) Menampilkan Ante Maridem (AM) dan Post Meridem (PM) Menampilkan hari (Mon-Sun)
Week Starts On, mendefinisikan hari pertama untuk setiap minggu Klik tombol Save Changes untuk menyimpan perubahan pada General Settings Reading Settings digunakan untuk melakukan settingan yang berhubungan dengan tampilan saat pembaca membuka blog anda. Lebih berkaitan dengan isi dari postingan. Pengaturan yang dapat dilakukan adalah : Front page display, menentukan halaman depan pada blog. Terdapat dua pilihan, yaitu : a. Menampilkan postingan terakhir/terbaru
99
b. Menampilkan static page, terdiri dari dua buah opsi. Yang pertama mendefinisikan untuk halaman utama (front page), dan yang kedua mendefinisikan halaman untuk menyimpan semua artikel. Blog pages show at most, mendefinisikan jumlah artikel yang ditampilkan pada satu halaman. Syndication feeds show the most recent, mendefinisikan jumlah artikel untuk ditampilkan dalam sebuah feed. Secara sederhana, feed dapat diartikan sebagai sebuah layanan untuk mensharing sebuah konten dari web. For each article in a feed show, terdapat dua buah opsi. yang pertama untuk menampilkan keseluruhan text pada artikel dan yang kedua, hanya sebagian atau inti dari artikel (summary) pada feed. Encoding for pages and feeds, jenis encoding untuk artikel pada page dan feeds
Discussion Settings menyediakan beberapa jenis pengaturan pada comment, email pemberitahuan, artikel dan avatar. Beberapa pengaturan yang dapat dilakukan : Default article settings, untuk mendefinisikan settingan artikel seperti pemberitahuan kepada blog lain yang berhubungan dengan blog yang memiliki artikel. Opsi untuk mengijinkan link pemberitahuan ke blog lainnya seperti pingbacks dan trackbacks. E-mail me whenever, pengaturan untuk mengirimkan email jika terdapat posting dari user lain dan jika ada komentar masuk. Before a comment appears, pengaturan untuk aturan tentang komentar, seperti moderasi oleh admin, pengaturan penulisan komentar, dll. Comment Moderation, untuk mendefinisikan komentar yang harus melalui moderator. Caranya dengan menginputkan sebuah kata kunci atau alamat IP sebagai identitas untuk sebuah komentar yang harus dimoderasi. Masukkan kata kunci atau alamat IP per-baris. 100
Comment blacklist, untuk mendefinisikan kata-kata yang dilarang untuk diinputkan dalam komentar pada blog anda. Avatar, merupakan identitas bagi setiap user yang memposting komentar pada blog. Konfigurasi avatar berfungsi untuk mengijinkan pemakaian avatar dan jenis avatar yang diperbolehkan masuk ke dalam blog. Layanan avatar yang digunakan wordpress adalah Gravatars. Media Settings digunakan untuk melakukkan pengaturan terhadap media yang bisa diupload ke blog, seperti pengaturan pada media gambar, dan audio-video. Privacy Settings biasanya digunakan untuk menentukan, blog ini bisa dilihat oleh siapa. Hanya ada 2 pilihan di pengaturan ini. o Blog dapat dilihat oleh siapa saja, termasuk search engine (seperti Google, Bing, Technorati) dan arsip. o Blog dapat dilihat oleh pengunjung biasa, tetapi memblok search engine.
9.11.
Import dan Backup data Jika sebelumnya memiliki sebuah blog pada tempat lain ataupun pada sistem lain, misalnya blog dari blogger, blogware, livejournal, dll, user dapat mengimport data-data dari blog tersebut ke wordpress offline. Langkah-langkah untuk mengimport data adalah : 1. Pilih menu Tools -> Import 2. Pilih service asal data untuk melakukan import data (perhatikan poin-poin apa saja yang dapat diimport). 3. Browse data (file ber-extensi .xml) 4. Klik Upload file and import untuk melakukan import dat 5. Setelah klik upload, maka ada opsi untuk mendownload seluruh file yang pernah di upload ke dalam sistem blog (berfungsi untuk meng-copy data dari web lama ke dalam web yang baru dengan syarat kedua sistem terhubung dalam sebuah jaringan).
Export data merupakan fungsionalitas yang disediakan oleh wordpress untuk membuat sebuah file backup data. File tersebut mengandung seluruh hasil posting, page, komentar, custom field, kategori, dan tags. 1. Pilih menu Tools -> Export. 2. Pilih Restrict Author untuk memilih data milik siapa yang akan diexport 3. Klik Download Export file untuk membuat file export 4. Save data pada komputer. 101
9.12.
Etika Blogger Dalam kondisi tertentu, seringkali aktivitas copy-paste menjadi jalan pintas yang paling ampuh dalam proses pengisian sebuah blog. Hal ini berawal dari : 1. Tidak selamanya ide atau inspirasi ada dikepala, sehingga terkadang, blogger mengalami kondisi blank (tidak bisa menemukan materi yang menarik untuk diposting ke dalam blognya), yang menimbulkan kreatifitas untuk mencari artikel dari blogger lain. 2. Sedemikian menariknya suatu artikel dari blogger lain, sehingga perlu untuk dicopy dan disebarluaskan karena beberapa alasan. 3. Memang terlahir sebagai seorang plagiat Memang, semua artikel yang ada pada sebuah blog adalah untuk dikonsumsi oleh publik, namun karena apapun isinya, apapun judulnya, blog adalah juga hasil karya cipta seseorang, sehingga harus dihargai. Ada beberapa solusi apabila memang copy-paste tidak bisa dihindari. Antara lain dengan : 1. Meminta izin ke narasumber 2. Menyebutkan asal/sumber artikel. Jika perlu, cantumkan link alamat website yang menjadi sumber artikel yang anda copy. 3. Melakukan beberapa editing dan sesuaikan dengan situasi dan kondisi 4. Ikut menyebarkan pesan se-ide dengan kampanye moral. Ingat! blog anda akan lebih lengkap lagi jika disertakan aturan legal (disclaimer) Selain aturan yang berhubungan dengan kebiasaan copy-paste, ada juga satu hal yang sangat perlu untuk diperhatikan, yaitu Tidak memposting sesuatu yang berhubungan dengan SARA (Sex, Agama, Ras, Antar-golongan) JURNAL: 1. Bagaimana cara mengkategorikan setiap postingan dalam wordpress ke dalam kategori tertentu? 2. Bagaimana cara melakukan instalasi widget baru dalam wordpress? 3. Jika ingin melakukan konfigurasi dalam hal penulisan (menulis post), bagaimana caranya?
102
Modul 10 Hosting dan Domain
Modul 10 - Website online Hosting dan Domain

Tujuan : Memahami pengertian serta penggunaan domain dan hosting Mengenal jenis-jenis domain Memahami pengertian dan jenis-jenis CMS Dapat mengaplikasikan pembuatan domain dan hosting
10.1.
Domain Nama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet. Nama domain berfungsi untuk mempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai IP address. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya "wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat website.
Top level domain adalah domain yang berada di tingkat atas. Misalnya www.yahoo.com yang memiliki TLD *.com. Selanjutnya terdapat 2 macam top level domain, yaitu Generic Domain (gTLD) dan Country code Domain (ccTLDs). Generic (gTLD)
Generic top level domain adalah salah satu kategori TLD yang tidak berafilisasi berdasarkan Negara sehingga siapapun dapat mendaftar pada domain ini. Berikut daftar contoh dari gTLD beserta penggunaannya.
Tabel 2.1. Contoh Domain gTLD

gTLD Com Coop Edu Gov Info Jobs Mil Org
DIGUNAKAN UNTUK organisasi komersial yang tidak terbatas Koperasi pendidikan pemerintahan U.S situs informasi yang tidak terbatas situs yang berkaitan dengan pekerjaan militer U.S khusus untuk organisasi dan dapat digunakan secara tidak terbatas 103
Net
khusus untuk infrakstruktur jaringan yang tak terbatas
Country-Specific Domain (ccTLDs)

ccTLD adalah TLD yang disediakan untuk satu Negara. Nama-nama domain yang termasuk dalam Country-Specific Domain tidak ada yang sama di tiap Negara sehingga tidak akan dijumpai situs yang tertukar. Contoh dari ccTLDS adalah sebagai berikut: Tabel 2.2. contoh domain ccTLD ccTLD af ar at bn ca ch co hk id ph NEGARA Afghanistan Argentina Austria Brunei Darussalam Canada Switzerland Columbia Hongkong Indonesia Philippine
Second level domain (SLD) adalah sebuah domain yang berada dibawah top level domain. Misalnya pada contoh sebelumnya www.yahoo.com, yahoo adalah second level domain dari TLD *.com. Beberapa organisasi dapat mendaftarkan nama domain beserta hirarki level kedua untuk sebuah TLD yang mendefinisikan tipe organisasi tersebut. Sebagai contoh pada TLD *.id, sebuah universitas berada dibawah ccTLD *.ac.id, sedangkan untuk keperluan pemerintah digunakan ccTDL *.go.id. Third level domain digunakan apabila si pendaftar domain ingin lebih membedakan SLD nya, misalnya www.mail.yahoo.com, mail adalah third level domain dari ccTLD *.yahoo.com.
10.2.
Hosting Hosting adalah jasa layanan internet yang menyediakan sumber daya server-server untuk disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, EMAIL atau DNS. Server hosting terdiri dari gabungan server-server atau sebuah server yang terhubung dengan jaringan internet berkecepatan tinggi.Dengan kata 104
lain hosting bisa diibaratkan sebagai tempat/space yang disediakan suatu perusahaan jasa hosting untuk menaruh file-file website kita sehingga website kitadapat diakses oleh semua orang. Layanan hosting ada yang berbayar ada pula yang gratis,tergantung dengan junlah space dan bandwidth yang disediakan serta fitur-fitur tambhan yang ditawarkan seperti spam filter,virus protection dll.Beberapa penyedia layanan hosting biasanya juga menyediakan domain untuk pelangganya. Contoh penyedia layanan hosting : Freehostia.com 000webhost.com Justfreehost.com Doteasy.com Hostingjitu.com Xtreemhost.com 000space.com Idwebhost.com dll
10.3.
CMS Content Management System atau CMS merupakan sebuah software berbasis web , yang digunakan untuk mengelola konten/isi yang terdapat dalam sebuah web. Contoh sebuah CMS yang sangat Populer saat ini adalah Wordpress, Joomla.Selain itu ada pula CMS yang dibangun untuk kebutuhna tertentu seperti vbulletin untuk forum atau oscommerce untuk toko online online.CMS sendiri dibuat dengan menggunakan berbagai macam bahasa pemrograman, seperti: PHP,bahasa pemrograman script yang paling banyak digunakan saat ini, ataupun HTML (Hypertext Markup Language) bahasa yang digunakan untuk membuat sebuah halaman web. Untuk membuat sebuah website dengan CMS relatif cukup mudah dan cepat karena kalau kita analogikan CMS itu seperti sebuah Operating System Dalam sebuah komputer (windows,linux, Mac OS) yang dibuat untuk memudahkan penggunanya sehingga kita bisa mengelola komputer kita dengan relatif cukup mudah, begitupun dengan CMS dibuat sedemikian hingga agar penggunanya mudah untuk menambah dan mengelola isi yang ada dalam sebuah website. Dengan CMS, semua itu bisa dilakukan tanpa pengguna harus belajar HTML atau bahasa pemrograman web sekalipun.Karena CMS adalah suatu software (perangkat lunak) maka CMS bisa berbasis web ataupun aplikasi desktop biasa. Berikut dibawah ini pemanfaatan CMS: Website perusahaan, bisnis, organisasi atau komunitas. Galeri foto Aplikasi E-Commerce. Mengelola website pribadi / blog. Dan lain-lain.
10.4.
Contoh-contoh CMS 10.4.1. Vbulletin 105

Vbulletin adalah salah satu CMS yang sering digunakan untuk membangun website komunitas selain phpBB. vBulletin dikembangkan dengan menggunakan PHP dan MySQL (yang sangat efisien database open source). Meskipun tidak menutup kemungkinan untuk membangun website forum dengan CMS lain yang lebih general seperti joomla,namun vbulletin memiliki keunggulan tersendiri seperti fitur fitur reputation user yg biasanya sering dijumpai d situs forum.Selain itu karena CMS vbulletin berbayar maka akan lebih terjamin jika terjadi bug atau gangguan pada database.Sealin karena fungsi utama untuk vbulletin memang untuk membangun website forum berbeda dengan joomla yang lebih bersifat general.
10.4.2. JOOMLA
Joomla adalah sebuah Content Managemen System yang bersifat Open Source sehingga dapat digunakan oleh siapa saja untuk keperluan pembuatan website, mulai dari yang sangat sederhana sampai dengan website yang sangat kompleks. Berikut beberapa jenis website yang dapat dibangun dengan Joomla. Website corporate atau portal Website e-commerce Website untuk perusahaan kecil 106
Website untuk organisasi Non-profit Website untuk Pemerintah Website untuk keperluan internet Website untuk sekolah dan Perguruan Tinggi Website Pribadi atau blog Website untuk komunitas dan portal Website untuk majalah, koran, dan tabloid dll Begitu banyak aplikasi yang dapat ditangani oleh Joomla, tak heran kalau Joomla menjadi pilihan banyak orang dalam pembuatan website-nya. Di samping itu, Joomla juga mudah di installasi, mudah dalam pengelolaannya dan dapat dimodifikasi sesuai kebutuhan kita.
.
10.4.3. OSCOMMERCE Oscommerce merupakan salah satu CMS yang sering digunakan untuk membangun took online atau e-commerce.Salah satu kelebiah oscommerce selain bersifat Open source adalh karena kemduahan instalasi,jumlah barang yang tak terbatas serta multi language.Selain itu sebagai CMS yang dikhususkan untuk mebangun website e-commerce maka oscommerce juga dapat digunakan untuk melayani pembayaran melalui berbagai macam transfer termasuk melaui rekening bank lokal..Saat ini cukup banyak toko online yang juga dibangun menggunakan CMS yang satu ini.
10.5.
Cara Mendaftar domain dan hosting Domain dan hosting merupakan dua hal yang sangat penting dalam membangun sebuah website.Karena tanpa domain dan hosting maka wesite kita tidak akan bisa diakses orang lain melalui internet.Saat ini terdapat banyak sekali penyedia layanan hosting dan domain di internet.Ada yang berbayar adapula yang gratis.Baik itu yang berbayar maupun yang gratis memiliki kelebian dan kekurangan masing-masing.Mengigat banyaknya penyedia layanan hosting dan domain,pada praktikum kali ini kita akan menbahas tentang penyewaan hosting menggunakan freehostia.com dan domain menggunakan .co.cc Pertama kali bukalah http.co.cc maka akan muncul halaman seperti ini :
107
setelah muncul seperti gambar diatas,isikan nama domain anda tanpa spasi, sebagai contoh disini saya tulis praktikuminternet. lalu klik pada check availability. jika nama domain yang kita tuliskan itu disetujui oleh pihak co.cc, maka akan muncul halaman seperti berikut :
kemudian klik pada continue to registration. disini yang perlu diperhatikan jika anda ingin yang benar-benar gratis, bacalah pada satu tahun pendaftaran domain sebesar jika seperti diatas berarti gratis total sebab nol dollar. Setelah anda klik pada lanjutkan ke proses pendaftaran tersebut akan muncul halaman sebagai berikut :
108
Pada halaman ini jika anda sudah pernah mendaftar di co.cc atau sudah punya akun di co.cc tinggal memasukkan saja email dan passwordnya serta kode verifikasi, Jika belum punya klik pada buat akun baru sekarang. selanjutnya ikuti perintah yang ada. Setelah semua proses diatas anda tempuh maka akan muncul halaman sebagai berikut :
menerangkan bahwa domain praktikuminternet.co.cc diterima oleh co.cc. Sehingga domain anada telah siap. Tahap Selanjutnya adalah melakukan setting pada domain anda,karena jika tidak maka domain anda akan dihapus.Namun sebelum melakuakn setting anda harus menyewa hosting terlebih dulu agar dapat melakukan setting pada .co.cc. Seperti yang sudah disebutkan di awal bahwa kali ini kita akan menyewa hosting di freehostia.com,berikut caranya: Pertama bukalah http://freehostia.com/ kemudain akan muncul :
Disini namapak beberapa pket hosting yang ditawarkan,baik itu yang gratis maupun yang berbayar.Pada praktikum kali ini kita akan memilih paket yang gratis saja. Setalah memilih,maka akan muncul :
109
Pilih use my exisistting domain,kemudian masukan nama domain yang telah kita buat tadi yakni praktikuminternet.co.cc.Setelah itu akan keluar nama servernya yaitu 1.dns1.freehostia.com 2. dns1.freehostia.com Nama server inilah yang harus anda masukan pada setting domain tadi. Langkah berikutnya adalah mengisi form identitas untuk account anda
First Name :diisi dengan nama depan Last Name : diisi denagn nama belakang E-mail: diisi dengan email yan nantinya akan digunakan sebagai sarana komunikasi dengan user Phone : diisi dengan nomor telepon Adress : diisi dengan alamat user 110
City : diisi dengan kota Stae : diisi dengab negar user Zip: diisi dengan kode pos Setelah terisi dan menyalin kode captcha yang tertera semua maka pilih Continue dan akan muncul :
Ini tandanya hosting anda telah siap.Kemudian anda akan mendapatkan username,password serta panduan konfigurasi melalui email anda. Kemudian kembali ke setting domain.Pada halaman
Klik setup,kemudian akan muncul
111
Pilih Name server dan masukan: 1.dns1.freehostia.com 2. dns1.freehostia.com Dan klik setup,maka domain anda akan siap 48 jam kemudian. JURNAL: 1. Carilah contoh lain dari CMS berdasarkan kategorinya masing-masing? 2. Mengapa terkadang sebuah domain salah dalam pembuatannya, sehingga dalam waktu 48 jam domain tersebut tidak aktif?
112
Daftar Pustaka
http://zamzuri.blog.ugm.ac.id/2010/10/12/perkembangan-internet-di-indonesia-dan-manfaatnya-bagimasyarakat-indonesia/ http://fajardwiputranto-402.tripod.com/telkomnet_instan.htm http://id.wikipedia.org/wiki/Speedy http://www.teknologinet.com/2008/09/perkembangan-teknologi-internet-di-indonesia.html http://opensource.telkomspeedy.com/wiki/index.php/Wajanbolic_e-goen http://id.wikipedia.org/wiki/Warung_Internet http://id.wikipedia.org/wiki/Undang-undang_Informasi_dan_Transaksi_Elektronik http://dblogger.blogdetik.com/2009/07/06/pasal-pasal-berbahaya-bagi-dunia-maya/ http://ridwansanjaya.blogspot.com/2006/07/web-20-gelombang-baru-di-dunia.html) http://www.sorsawo.com/2009/07/adobe-air-aplikasi-web-atau-desktop/ http://id.wikipedia.org/wiki/Adobe_Flash http://maba08tulisannovreal.blogspot.com/2010/11/microsoft-silverlight.html http://belog.praba.web.id/download/scribd-com-gratis-download-ebook-sepuasnya.html http://mamo.comoj.com/?p=530#more-530 http://tanahabanginfo.com/bagaimana-memanfaatkan-social-publising-slideshare-untuk-promosionline-secara-gratis-bagi-entreprenuer/ http://www.anneahira.com/deviantart.htm http://tokobagus.com http://beritanet.wordpress.com/2008/09/17/stackoverflow-mengatasi-masalah-pemrograman/ http://www.kompasiana.com/about 113
http://isparmo.web.id/2008/07/26/zimbra-desktop-software-email-client-yang-powerfull/ http://www.thefachia.com/2009/10/flickroom-aplikasi-desktop-gratis-untuk.html http://isparmo.web.id/2008/07/26/zimbra-desktop-software-email-client-yang-powerfull/ http://id.wikipedia.org/wiki/Digsby http://dailysocial.net/2010/01/05/seesmic-akuisi-ping-fm/ http://www.cosarosta.com/situs-jejaring-sosial-google-plus/ http://kuttumbaba.wordpress.com/artickels/apa-itu-linkedin/ http://desainkrispi.com/blog/fitur-fitur-baru-html-5 http://w3schools.com/html5/
114

Modul Praktikum Internet 20122013 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Praktikum Internet 20122013 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Daftar Isi

Format Content dalam HTML ................................................................................. 53 Format Text ............................................................................................................. 54

Server Web internal

Server web internal

Server directori internal

Setting Koneksi Internet

6. Pilih Virtual Private Network connection, kemudian > Next.

Modul 2 Aplikasi Internet Browser

Modul 2 - Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

--------------------------------------------------------Widget pada Opera

Add-ons pada firefox

Add-ons pada IE7

Modul 2 Aplikasi Internet Browser

--------------------------------------------------------2.2. Web 2.0

Modul 2 Aplikasi Internet Browser

Adobe Air dan Flash

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 2 Aplikasi Internet Browser

Modul 3 Aplikasi Internet Non-Browser

3 - Aplikasi Internet Non-Browser

Modul 3 Aplikasi Internet Non-Browser

Modul 3 Aplikasi Internet Non-Browser

Modul 3 Aplikasi Internet Non-Browser

Klik Next, lalu klik Finish

Modul 3 Aplikasi Internet Non-Browser

Modul 3 Aplikasi Internet Non-Browser

Modul 3 Aplikasi Internet Non-Browser

Modul 3 Aplikasi Internet Non-Browser

Modul 4 Aplikasi Jejaring Sosial

Modul 4 - Aplikasi Jejaring Sosial

Modul 4 Aplikasi Jejaring Sosial

Modul 4 Aplikasi Jejaring Sosial

Modul 4 Aplikasi Jejaring Sosial

Modul 4 Aplikasi Jejaring Sosial

Modul 4 Aplikasi Jejaring Sosial

Modul 5 - Aplikasi Berbasis Layanan Cloud

Modul 5 - Aplikasi Berbasis Layanan Cloud

Modul 5 - Aplikasi Berbasis Layanan Cloud

6. Masuk ke alamat https://account.live.com/EditProf.aspx?mkt=en-us&rp=SummaryPage Lalu di bagian Country/region pilih United States.

Modul 5 - Aplikasi Berbasis Layanan Cloud

Modul 5 - Aplikasi Berbasis Layanan Cloud

Modul 5 - Aplikasi Berbasis Layanan Cloud

Modul 6 - HTML Scripting (Tingkat Dasar)

Modul 6 - HTML Scripting Tingkat Dasar

Modul 6 - HTML Scripting (Tingkat Dasar)

Modul 6 - HTML Scripting (Tingkat Dasar)

Firefox 3.5 Yes No Yes

Opera 10.5 Yes No Yes

Chrome 3.0 Yes Yes Yes

Safari 3.0 No Yes Yes

Modul Praktikum lnternet 2012/2013

Modul 6 - HTML Scripting (Tingkat Dasar)

Modul 6 - HTML Scripting (Tingkat Dasar)