MODUL 1 PENGANTAR BAHASA PEMPROGRAMAN WEB

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

  1. Pengertian dan sejarah website.
  2. Teknologi website.
  3. Bahasa pemrograman web
  4. Manfaat web
  5. Praktek menulis script HTML

Saat ini, terminologi website sudah menjadi ungkapan sehari-hari dan sudah tidak asing lagi bagi seluruh kalangan, terutama dikalangan dunia pendidikan. Sebuah survey menyimpulkan bahwa 80% informasi yang terdapat Internet disebarkan melalui layanan website ini. Oleh karena itu, kebutuhan terhadap orang-orang yang mampu membangun/membuat website akan sangat tingi dimasa mendatang.

Dahulu, website murni digunakan sebagai media untuk menyampaikan informasi, namun sekarang kehadiran website tidak saja sebagai media untuk menyebarkan informasi namun juga sebagai media untuk berkomunikasi, berbisnis, belajar dan lain sebagainya. Sehingganya, kebanyakan aktifitas manusia sudah mulai terpenuhi melalui layanan-layanan yang disediakan oleh website.

Aplikasi internet berbasis website yang dapat dinikmati, antara lain :

  • E-banking, melalui website, transaksi keuangan dapat dilakukan dimanasaja, kapan saja tanpa mesti datang ke kantor bank.
  • E-Goverment, melalui website, layanan dan fungsi pemerintah dapatdilaksanakan dengan mudah.
  • E-Commerce/e-business, melalui website sekarang bisa berbisnis online,sehingga sekarang banyak toko-toko online yang pangsa pasarnya mendunia.
  • E-social, melalui website, kebutuhan kita sebagai makluk sosial dapatterpenuhi, hal ini terbukti dengan munculnya aplikasi social network berbasis website.
  • E-Learning, melalui website e-learning, proses belajar mengajar dapatdilakukan tanpa harus hadir di ruang kelas, bahkan fasilitasnya lebih canggih.
  • E-News, penyebaran informasi di segala penjuru dunia, sekarang dapatdiperoleh melalui website berita/portal. Dan masih banyak lagi.

1.1 Mengenal Website

Website adalah keseluruhan halaman-halaman web yang terdapat dari sebuahdomain yang mengandung informasi. Sebuah website biasanya dibangun atas banyak halaman web yang saling berhubungan. Hubungan antara satu halaman web dengan halaman web yang lainnya, atau antar bagian dalam halaman web yang sama di sebut dengan Hyperlink sedangkan teks yang dijadikan media penghubung disebut Hypertext. Sebuah website dapat diakses melalui browser, yaitu perangkat lunak untuk mengakses halaman-halaman web, seperti Internet explorer, mozilla firefox, opera, safari, chrome dan lainnya.

Website dapat berjalan di internet seperti saat sekarang ini tidak lain adalah berkatpenemuan teknologi yang disebut HTML oleh Tim Barners Lee pada tahun 1989. Tim Barners Lee adalah salah seorang staff ahli dari CERN (Conseil Europeen pour la Recherche Nucleaire), sebuah organisasi penelitian yang berlokasi diJenewa, Swiss. HTML adalah singkatan dari HyperText Markup Language yang merupakan suatu bahasa semi pemrograman yang menjadi dasar terwujudnya website.

1.2  Istilah Penting Seputar Website

Berikut ini beberapa istilah yang berhubungan dengan website :

  • www adalah metode untuk menampilkan informasi di internet yanag dapat diakses melalui sebuah browser.
  • ser, informasi tersebut ditampilkan berdasarkan sebuah URL (Uniform Resource Locator)
  • URL adalah alamat lengkap dari sebuah informasi yang dapat diakses melalui browser, misalnya http://www.ephi.web.id/images/ephi.jpg
  • http adalah protocol untuk layanan hypermedia, komunikasi antara browser dengan web server.
  • www melambangkan layanan web,
  • ephi.web.id adalah nama domain,
  • images adalah nama folder dan
  • ephi.jpg adalah nama sebuah file.
  • Situs Web (Website) adalah kumpulan dari keseluruhan halaman web yang terdapat pada sebuah domain, yang terdiri dari dua atau lebih halaman web.
  • Homepage adalah halaman web pertama dari sebuah website yang diakses berdasarkan domainnya. Misalnya anda mengakses web dengan alamat www.ephi.web.id, maka halaman yang tampil pertama kali disebut homepage, namun jika anda telah mengklik link-link yang lain pada halaman tersebut, maka yang anda buka adalah halaman webnya.
  • Domain adalah nama unik yang dimiliki oleh setiap website untuk memudahkan manusia dalam mengingat nama sebuat website, misalnya ephi.web.id, lintau.info, polinpdg.ac.id, dan lain-lain.

1.3 Teknologi Website

Perkembangan teknologi dibidang website terus diexplore hingga saat ini telah mulai memasuki teknologi yang disebut dengan web 3.0. Pada tahun 1994 dibentuklah W3C (World Wide Web Consorsium) sebagai otoritas tunggal bagi pengembangan web serta berwenang menetapkan standar yang berlaku di dalamnya. Perkembangan teknologi website hingga saat ini :

  1. Web 1.0 (periode 1989 – 2000 )

Ciri utama dari website periode ini adalah masih bersifat statis dan dibutuhkan pemahaman terhadap bahasa pemrograman web untuk dapat

menambah ataupun memperbaharui konten. Namun, tujuan utamanya dalam menyampaikan informasi tercapai.

Masih murni menggunakan kode-kode HTML, sehingga pengunjung hanya bisa mendapatkan informasi (browsing and read) saja, melakukan pencarian dan belum ada interaksi antara pemilik website dengan pengunjung.

  • Web 2.0 (Periode 2001 – 2010)

Istilah teknologi web 2.0 pertama kali dicetuskan oleh O’Reilly pada tahun

2003 dan kemudian dipopulerkan dalam konferensi Web 2.0 pertama di tahun 2004. Pada teknologi Web 2.0 ini keberadaan pengunjung tidak saja sekedar membaca informasi dari website, namun dapat berkolaborasi dan berbagi konten dalam website tersebut sehingga tidak hanya programer saja yang dapat mengupdate website. Hal ini terlihat dari website jejaring sosial, blog, file sharing, photo sharing, video sharing dan lainnya.

Tidak itu saja, dengan dukungan teknologi seperti ajax atau plug in lainnya, maka website dapat menjalankan aplikasi layaknya aplikasi di desktop seperti drag & drop, voice chat, bahkan mirip sistem operasi dimana kita dapat mengolah data spreadsheet, presentasi dan aplikasi pengolah kata, seperti layanan google docs.

  • Web 3.0 (Periode 2011 – sekarang)

Konsep dari teknologi Web 3.0 ini sebenarnya telah diperkenalkan oleh Tim Barness Lee pada tahun 2001, ia menulis sebuah artikel ilmiah yang menggambarkan Web 3.0 sebagai sebuah sarana bagi mesin untuk membaca halaman-halaman Web. Hal ini berarti bahwa mesin akan memiliki kemampuan membaca Web sama seperti yang manusia dapat lakukan sekarang ini.

Web 3.0 berhubungan dengan konsep Web Semantik, yang memungkinkan isi web dinikmati tidak hanya dalam bahasa asli pengguna,

tapi juga dalam bentuk format yang bisa diakses oleh agen-agen software.

Oleh karena itu Web 3.0 juga disebut sebagai Web Semantik.

Penekanan lainnya dari Web 3.0 adalah dalam bidang pencarian data, akan digunakan konsep, dimana manusia dapat berkomunikasi dengan mesin pencari. Pengguna dapat meminta Web untuk mencari suatu data spesifik tanpa harus bersusah-susah mencari satu per satu dalam situs-situs Web. Web 3.0 juga dapat menyediakan keterangan-keterangan yang relevan tentang informasi yang ingin kita cari, bahkan tanpa kita minta.

Hingga saat ini, penelitian untuk mengembangkan teknologi Web 3.0 ini terus dilakukan, kita tunggu saja. Yang pasti, teknologi Web 3.0 ini akan membutuhkan koneksi internet yang super cepat tentunya.

1.4  Jenis-Jenis Website

Seiring dengan perkembangan teknologi informasi yang begitu cepat, website juga

mengalami perkembangan yang sangat berarti. Dalam pengelompokkan jenis web,

lebih diarahkan berdasarkan kepada fungsi, sifat dan bahasa pemrograman yang

digunakan.

Jenis-jenis web berdasarkan sifatnya :

  • Website Dinamis, merupakan sebuah website yang menyediakan kontenatau isi yang selalu berubah-ubah setiap saat. Misalnya website berita, seperti, www.kompas.com, www.detik.com, www.polinpdg.ac.id, dan lain-lain.
  • Website statis, merupakan website yang kontennya sangat jarang diubahdan untuk mengubahnya memerlukan pengetahuan teknis.

Berdasarkan pada tujuannya, website terbagi atas :

  • Personal web, website yang berisi informasi pribadi seseorang,
  • Corporate web, website yang dimiliki oleh sebuah perusahaan,
  • Portal web, website yang mempunyai banyak layanan, mulai dari layanan berita, email dan jasa-jasa lainnya.
  • Forum web, sebuah web yang bertujuan sebagai media untuk diskusi.

Disamping itu juga ada website e-Government, e-Banking,                                        e-

Payment, e-Procurement, dan lain sebagainya.

Ditinjau dari segi bahasa pemrograman yang digunakan, website terbagi atas

  • Server Side, merupakan website yang menggunakan bahasa pemrogramyang tergantung kepada kepada sebuah server untuk menterjemahkan kode-kode pemrograman web, seperti : PHP, ASP dan lain sebagainya. Jika tidak ada server, maka website yang dibangun menggunakan bahasa pemrograman diatas tidak akan dapat berfungsi sebagaimana mestinya.
  • Client Side, adalah website yang langsung dapat dieksekusi dari sisi client

saja (tidak tergantung kepada server). Misalnya : html, javascript. Disamping jenis-jenis diatas, sekarang pengelolaan website dinamis yang bersifat server side dapat berupa webiste Konten Management System (CMS), yaitusebuah website yang mempunyai pengelolaan kontennya lebih terstruktur sehingga memudahkan dalam pengelolaannya.

1.5  Mengenal Website CMS

Website Konten Management System atau disingkat WCMS adalah suatu metodadalam mengelola sebuah kontent/isi dari website. Konten dapat berupa teks, suara, gambar video, animasi dan aplikasi lainnya yang disimpan dalam sebuah database sehingga mudah dalam pengelolaannya, baik bagi orang yang mengerti tentang teknologi web maupun yang tidak.

Berdasarkan pada fungsinya, WCMS dapat di bagi atas :

  • WCMS Portal, adalah sebuahwebsiteCMS yang mempunyai banyaklayanan, seperti layanan berita, forum, mailing list, e-mail dan lain sebagainya. Misalnya : CMS Joomla, CMS Drupal, CMS WordPress, dan lainnya.
  • WCMS E-Commerce, adalah sebuahwebsiteCMS yang bertujuan agardapat melakukan proses transaksi online. Misalnya : CMS OsCommerce, CMS PrestaShop, CMS Magento dan lain-lain
  • WCMS E-Learning, adalahwebsiteCMS yang bertujuan untuk keperluanproses belajar mengajar jarak jauh. Misalnya : CMS aTutor, CMS Moodle dan lain sebagainya.
  • WCMS Forum, adalahwebsiteCMS yang menyediakan media untukproses diskusi secara online, misalnya : CMS phpBB, CMS MyBB dan lain sebagainya.
  • WCMS Gallery, adalahwebsiteCMS yang menyediakan wadah untukmenampilkan gallery foto. Misalnya : CMS Galery, CSM Copermine dan lain sebagainya.

Disamping penggolongan diatas, WCMS juga dapat dikelompokkan berdasarkan kepada sifatnya, yaitu :

  • WCMS Komersial, adalah WCMS yang berbayar, artinya harusmembayar sejumlah harga tertentu untuk dapat menggunakannya serta untuk mendapatkan source codenya.
  • WCMS Open Source, ini merupakan jenis WCMS yang paling banyakberedar di internet, karena bersifat open source (bebas untuk di unduh, digunakan dan disebarluaskan) dan berlisensi GPL.

1.6 Manfaat Website

Website mempunyai banyak manfaat, karena kemampuannya dalammenyampaikan informasi dalam berbagai cara, kemampuannya dalam berinteraksi dan kemampuannya dalam menjalankan layanan-layanan tertentu, seperti aplikasi bisnis, aplikasi perbankan, aplikasi pembelajaran online dan seterusnya,

Secara umum, manfaat dari website adalah :

·     Media untuk memperkenalkan diri atau mempromosikan institusi/lembaga, tentunya dengan menyediakan informasi yang akurat dan jelas pada website.

  • WCMS E-Learning, adalahwebsiteCMS yang bertujuan untuk keperluanproses belajar mengajar jarak jauh. Misalnya : CMS aTutor, CMS Moodle dan lain sebagainya.
  • WCMS Forum, adalahwebsiteCMS yang menyediakan media untukproses diskusi secara online, misalnya : CMS phpBB, CMS MyBB dan lain sebagainya.
  • WCMS Gallery, adalahwebsiteCMS yang menyediakan wadah untukmenampilkan gallery foto. Misalnya : CMS Galery, CSM Copermine dan lain sebagainya.

Disamping penggolongan diatas, WCMS juga dapat dikelompokkan berdasarkan kepada sifatnya, yaitu :

  • WCMS Komersial, adalah WCMS yang berbayar, artinya harusmembayar sejumlah harga tertentu untuk dapat menggunakannya serta untuk mendapatkan source codenya.
  • WCMS Open Source, ini merupakan jenis WCMS yang paling banyakberedar di internet, karena bersifat open source (bebas untuk di unduh, digunakan dan disebarluaskan) dan berlisensi GPL.

1.6 Manfaat Website

Website mempunyai banyak manfaat, karena kemampuannya dalammenyampaikan informasi dalam berbagai cara, kemampuannya dalam berinteraksi dan kemampuannya dalam menjalankan layanan-layanan tertentu, seperti aplikasi bisnis, aplikasi perbankan, aplikasi pembelajaran online dan seterusnya,

Secara umum, manfaat dari website adalah :

·     Media untuk memperkenalkan diri atau mempromosikan institusi/lembaga, tentunya dengan menyediakan informasi yang akurat dan jelas pada website.

  • Media untuk berkomunikasi, antara perusahaan dengan clientnya, antara pengelola sekolah dengan siswanya, antara pemerintah dengan warganya,

atau media komunikasi untuk stake holder yang terkait dengan website tersebut dan masyarakat umum.

  • Media untuk berbagi informasi.
  • Media untuk belajar dan mengajar.
  • Media untuk berbisnis
  • Dan seterusnya.

PRAKTIKUM

Pada praktikum awal ini, praktikan akan diajarkan cara memulai pembuatan script-script website menggunakan editor notepad++. Pastikan dikomputer Anda sudah terinstall software tersebut, kalau belum, harap unduh terlebih dahulu di http://notepad-plus-plus.org.

  1. Cara membuka Editor
  • Klik tombol Start->All Program->Notepad++->Notepad++, seperti gambar berikut :
  • Sehingga tampil editor notepad++ seperti berikut :

Bagian paling atas dari editor adalah sekumpulan menu-menu yang mempunyai fungsi sesuai dengan namanya, serta dibawahnya terdapat icon-icon yang berfungsi sebagai shortcut. Pada area yang ditandai pada gambar diatas merupakan lokasi tempat Anda mengetikkan script-script pemrograman web nantinya.

2. Mengetik Script Pada Editor

  • Setelah editor terbuka, sekarang silahkan Anda ketik script seperti gambar berikut apa adanya.

Terlihat notepad++ memberikan nomor pada setiap baris script yang Anda ketikkan. Untuk saat ini kita belum membahas tentang arti dari script diatas, Anda cukup memahami bahwa semudah itulah mengetik script pemrograman di notepad++ ini.

Terlihat notepad++ memberikan nomor pada setiap baris script yang Anda ketikkan. Untuk saat ini kita belum membahas tentang arti dari script diatas, Anda cukup memahami bahwa semudah itulah mengetik script pemrograman di notepad++ ini.

3. Cara Menyimpan Script

  • Setelah selesai menulis script, maka Anda harus menyimpannya terlebih dahulu, agar nanti jika ada perbaikan, Anda dapatmengeditnya kembali. Untuk menyimpan script ini, silahkan Anda klik menu File->Save, sehingga tampil seperti gambar berikut :

Langkah pertama, tentukan lokasi folder tempat penyimpanan file web Anda ini. Pada gambar diatas, disimpan pada folder dengan nama WEB 1. Kemudian pada bagian file name isi dengan dengan nama file web ini. Misalnya: lat1.html. Lalu pada bagian Save as type pastikan Anda pilih Hiper Text Markup Language file

4. Cara Menjalankan Script

Ada dua cara menjalankan script HTML ini, yaitu :

  1. Langsung dari editor notepad++, dengan cara, klik menu Run->lalu pilih jenis browser yang ada di computer Anda. Perhatikan gambar berikut :

Terlihat bahwa notepad++ telah menyediakan 4 pilihan browser, yaitu Firefox, IE, Chrome dan Safari. Pastikan Anda memilih browser yang telah terinstall di computer Anda.

2. Melalui jendela windows explorer, dengan cara meng-klik langsung pada file HTML tersebut

Terlihat pada gambar diatas, file script HTML ini disimpan pada Drive D, dalam folder WEB 1. Silahkan lakukan klik ganda pada file HTML (lat1), sehingga akan terbuka sebuah web browser dan menampilkan hasil dari script tersebut.

Inilah hasil dari script yang Anda buat tersebut. Selamat, Anda telah berhasil membuat halaman web yang pertama menggunakan script HTML.

5. Cara Menutup Editor notepad++.

Jika telah selesai bekerja dengan editor notepad++, maka tutuplah dengan cara :

  • Klik menu File->Exit atau tekan langsung tombol CTRL+F4, maka editor notepad++ akan hilang dari monitor.

6. Cara Membuka kembali/mengedit

File script HTML yang telah disimpan sebelumnya, dapat diedit kembali dengan cara :

  • Aktifkan terlebih dahulu notepad++ Anda.
  • Dari menu yang ada, klik menu File->Open, dari jendela yang muncul pilih folder lokasi dari file tersebut, kemudian pilih file yang akan dibuka/diedit, lalu klik tombol Open. Maka script tersebut akan kembali tampil dan dapat Anda edit kembali.

Selamat mencoba….

REFERENSI LANJUTAN :

  1. http://www.evolutionoftheweb.com/?hl=id
  • http://home.web.cern.ch/topics/birth-web
  • http://en.wikipedia.org/wiki/Tim_Berners-Lee
  • http://www.w3.org
  • http://notepad-plus-plus.org