TEKNOLOGI DALAM WEB

08.27 Unknown 1 Comments

Internet

Dunia internet seakan-akan telah menjadi bagian hidup dari masyarakat modern saat ini. Betapa tidak, karena internet secara lengkap menyediakan kebutuhan akan informasi, berita, serta ilmu pengetahuan. Dengan internet seolah-olah tidak ada lagi batasan antar ruang dan waktu dalam berkomunikasi dengan berbagai orang di berbagai belahan dunia. Sebagai konsumen dari teknologi web tentunya mengharapkan tampilan layar yang mengasyikan serta mudah dipakai dan dimanfaatkan. Pada dasarnya web merupakan suatu kumpulan hyperlink yang menuju dari alamat satu ke alamat lainnya dengan bahasa HTML (HyperText Markup Languange).


Teknologi dalam WEB

Dalam membuat website  tentunya akan menggunakan tools yang bisa digunakan untuk mendesain web. Tool yang digunakan sebernarnya tergantung dari jenis website yang akan dibuat. Misalnya website yang kaya fitur animasi, maka aplikasi Adobe Flash akan dilibatkan dalam pembuatan website tersebut. Jika anda ingin membuat website yang selalu di-update secara berkala, maka diperlukan bahasa pemrograman seperti PHP dan ASP yang dikolaborasikan dengan database. 


 

Masing-masing teknologi pembuatan website tersebut memiliki kelebihan dan kekurangan. Tentu saja, jika semuanya digabungkan akan menghasilkan hasil akhir yang memuaskan.Saya akan membahas beberapa teknologi tersebut :

HTML

 Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.



Kegunaan

  • Mengintegerasikan gambar dengan tulisan.
  • Membuat Pranala.
  • Mengintegerasikan berkas suara dan rekaman gambar hidup.
  • Membuat form interaktif.
HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: < b> TAMPIL TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.
Menyunting format tulisan
HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:
  • Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
  • Menampilkan tulisan dalam bentuk cetakan tebal
  • Menampilkan sekelompok kata dalam bentuk miring
  • Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
  • Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

  • Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
  • Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
  • Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
  • Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

  • Pranala menuju bagian lain dari page.
  • Pranala menuju page lain dalam satu web site.
  • Pranala menuju resource atau web site yang berbeda.

Contoh dokumen HTML sederhana :


 
 <!DOCTYPE html>
<html>
 <head bgcolor=black text=white>
 <title>'''Selamat Datang''' HTML</title>
 </head>
 <body>
 <p>Halo dunia!</p>
 </body>
</html>

Head

Dokumen HTML diapit oleh tag < HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh:

<meta name="author" content="ubuntu-online">
 

Elemen Body

Bagian BODY, yang dinyatakan dengan tag < BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
  • Tag awal, dinyatakan dalam bentuk <nama tag>
  • Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML < i>Teks ini terlihat miring di browser Anda</i>

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P ALIGN=”left”> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

Referensi Online untuk mempelajari HTML:

• http://html.net

• http://www.w3schools.com/html/default.asp

• http://davesite.com/webstation/html


JavaScript

 
     JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.







Penulisan JavaScript

 

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag <script type="text/javascript">.

<script type="text/javascript">
 alert("Halo Dunia!");
</script> 
 
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type="text/javascript" src="alamat.js">
</script> 
 

Skrip di head

Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu.Peletakkan skrip di head akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.

<html>
<head>
<script type="text/javascript">
...
</script>
</head>
</html>

Skrip di body

Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body>. Ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html> 
 
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.

Skrip eksternal

      Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal.Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML.Berkas JavaScript tersebut disimpan dengan ekstensi .js.

      JavaScript : js/xxx.js document.write("pesan ini tampil ketika halaman diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada halaman HTML-nya.

<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p>
</body>
</html>
 
Referensi Online untuk mempelajari JavaScript:

• http://learn-javascript-tutorial.com

• http://javascript.about.com
• http://www.w3schools.com/js/default.asp

PHP 

      PHP adalah bahasa pemrograman server side yang sudah banyak digunakan pada saat ini, terutama untuk pembuatan website dinamis. Untuk hal-hal tertentu dalam pembuatan web, bahasa pemrograman PHP memang diperlukan, misalnya saja untuk memproses data yang dikirimkan oleh pengunjung web. Contoh nyata adalah penggunaannya untuk buku tamu, halaman login, dan sebagainya. Agar bisa berjalan dengan baik, maka PHP harus dikolaborasikan dengan database engine, seperti MySQL, PostgreSQL, dan lainnya. Selain kita bisa menggunakan PHP untuk website yang dibuat, ada juga beberapa aplikasi open source yang menggunakan pemrograman PHP secara penuh. Contohnya adalah aplikasi CMS (Content Management System), seperti PostNuke, Joomla, Mambo, dan masih banyak lagi. Sedangkan untuk aplikasi forum, contohnya adalah phpBB, SMF (Simple Machine Forum), dan lainnya.


CONTOH PROGRAM

 

Membuat Sebuah Halaman Web PHP

Sebuah Halaman web yang ditulis menggunakan Bahasa Pemograman PHP adalah sebagai berikut:

<?php
    echo "Halo dunia";
?>

Kelebihan PHP Dari Bahasa Pemrograman Lain

Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:

  1. 'Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya.'
  2. 'Web Server yang mendukung PHP dapat ditemukan dimana - mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.'
  3. 'Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan.'
  4. 'Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.'
  5. 'PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.'
Referensi Online untuk mempelajari PHP:

• http://www.learnphp.org

• http://phpbuddy.com

• http://php-scripts.com

• http://www.w3schools.com/php/default.asp

CSS


Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

     Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

     


CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Penulisan

Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

h1 {
    color: #0789de;
   } 
 
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.

Selain itu ada tiga metode penulisan CSS atribut, yaitu :

Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan metode Inline Style Sheet :

<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
 
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
 
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>

Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet :

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
 
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html> 
 

Sifat CSS

Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain.Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.

Referensi Online untuk mempelajari CSS:

• http://learn-css-tutorial.com

• http://csseasy.com

• http://www.w3schools.com/css/default.asp

ASP 

 Active Server Pages atau disingkat ASP adalah salah satu bahasa pemrograman web untuk menciptakan halaman web yang dinamis.


ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft. ASP diproses melalui web server dan hasil proses ini menghasilkan HTML yang akan dikirimkan melalui penjelajah web (browser).ASP bekerja pada web server dan merupakan server side scripting.

Pengenalan

     Active Server Pages (ASP) ialah pengaturan web yang digunakan untuk membina halaman web yang dinamik dan bersifat interaktif. Active server page adalah fasilitas yang diberikan oleh Microsoft untuk memudahkan pembuatan aplikasi-aplikasi Web Server.Hal ini di mungkinkan dengan menggabungkan komponen-komponen Hyper Text Markup Language (HTML) dengan Visual Basic Script (VBScript). Sehingga di dalam sebuah halaman Web dengan Active Server Page terdapat bagian HTML dan kode VBScript. ASP diciptakan oleh Microsoft untuk menjawab tantangan pemrograman web dinamis, di mana isi dari sebuah website dapat diprogram untuk mendapatkan hasil yang berbeda. 

     Tidak seperti HTML yang hanya menampilkan isi yang statis, ASP mampu menampilkan isi halaman yang berbeda sesuai dengan tujuan pemrogramannya.ASP telah mencapai versi 3.0 yang berjalan pada platform Windows 2000 Professional atau Server. Versi sebelumnya, yaitu versi 2.0, dapat berjalan pada platform lain seperti Linux, Solaris, OS/2, dan Novell.

     Bahasa ASP murni Object Oriented Programming (OOP) memiliki struktur bahasa yang sama dengan bahasa Visual Basic yang mudah dimengerti karena sintaksnya menggunakan Bahasa Inggris.Seperti diketahui, bahwa Visual Basic adalah bahasa pemrograman yang paling mudah dimengerti dan dipelajari dibandingkan bahasa pemrograman lainnya. Oleh karena itu ASP sangat mudah dipelajari oleh para pemula sekalipun untuk membuat aplikasi web, disamping kehandalan dan kelengkapan fasilitas yang diberikan.

Penjelajah web

Penjelajah web yang digunakan untuk mengetes script ASP yang dibuat diantaranya Internet Explorer, Netscape Navigator, ataupun Opera.

Kelebihan ASP

Ada beberapa keuntungan yang diberikan oleh ASP yaitu:

  • Mudah dalam mempelajarinya.
  • Mudah dikembangkan dari sistem yang telah dimiliki
  • Tidak perlu kompilasi.
  • Mudah menggabungkan dengan teknologi lain seperti CGI, DCOM, ActiveX dan lain-lain.
  • Dengan ActiveX Data Object dan SQL pembuatan Web Data Base menjadi lebih mudah.
  • Memberikan fasilitas keamanan seperti session Object, cookie, dan fasilitas transaksi online yang aman dengan protokol SSL, semua dapat dilakukan dengan sedikit kode tambahan.
  • Kode ASP tidak dapat di lihat pada client, hal ini di sebabkan oleh karena jika server menerima request file asp, maka file tersebut diproses dahulu pada server dan yang di kirimkan adalah kode-kode HTML

Contoh

<html>
<body>
<%
response.write("My first ASP script!")
%>
</body>
</html> 
 
Referensi Online untuk mempelajari ASP:

• http://www.w3schools.com/asp/default.asp

• http://www.asp.net/get-started
 

AJAX


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

Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.
Referensi online untuk mempelajari Ajax:
• http://www.ajaxwith.com
• http://www.quickonlinetips.com/archives/2006/07/learn-ajax-programming-free-online-courses
• http://learn-ajax-tutorial.com
• http://www.w3schools.com/ajax/default.asp

1 komentar:

Langganan: Postingan (Atom)