Paper

(http://usmanbahtiar.com/perbedaan-client-dan-server-side-programming/)
1. Client Side Scripting
Client Side Scripting adalah bahasa pemrograman yang proses pengolahannya dilakukan
di komputer pengunjung (Client). Ketika seseorang ingin melihat suatu website, maka website
yang bertipeini akan sepenuhnya di download dan diproses di komputer masing-masing
sehingga siapapun yang melihat website kita bisamengambil seluruh Script yang ditulis oleh
pembuatnya, Hal tersebut merupakan suatu kelemahan tersendiri, yaitu orang yang berniat
jahat bisa dengan mudah mengotak-atik website kita dengan lebih mudah. Web yang
menggunakan program ini biasanya website statis, yaitu yang tampilannya hampir tidak
berubah, kecuali website tersebut dirombak pada halamannya (Misal : web bertipe *.html).
(http://brotherdika.blogspot.in/2012/06/penjelasan-html.html?m=1)
Contoh Client Side Scripting adalah :
A. HTML (Hypertext Markup Language)
HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah
halaman web, menampilkan berbagai informasi didalam sebuah Penjelajah web Internet
dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat
menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat
dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal
sehingga menjadi home page dengan perintah-perintah HTML.
Berdasarkan penyusunnya, Pengertian HTML dapat diartikan lebih dalam lagi menjadi :
a. HypertextLink
hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya.Jika kita klik pada kata atau frase
untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian
lain dari naskah atau dokumen yang kita tuju.
b. Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi
suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan
ditampilkan pada World Wide Web.
c. Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML
merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk
mengubah-ubah format suatu naskah atau dokumen.
i. Kegunaan HTML




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 formating di dalam halaman web daripada
menentukan penampilannya.
ii. Menyunting Format Tulisan
HTML memungkinkan kita untuk menyunting tampilan atau format berkas yang
akan kita kirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam
menentukan format berkas adalah :

Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat
digunakan untuk judul, heading dan sebagainya.



Kita dapat menampilkan tulisan dalam bentuk cetakan tebal
Kita dapat menampilkan sekelompok kata dalam bentuk miring
Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan
mesin ketik

Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
iii. HTML Markup Tag
HTML Markup Tag biasa disebut tag HTML adalah kata kunci yang diapit oleh
sudut kurung seperti, tag HTML biasanya berpasangan seperti dan , tag disebut tag
awal/pembuka dan adalah tag akhir/penutup cirinya ditambahkan tanda garis miring.
Secara garis besar, terdapat 4 jenis elemen dari HTML :

structural.
tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh,
<h1>Golf</h1> akan memerintahkan browser untuk menampilkan “Golf” sebagai
tulisan tebal besar yang menunjukkan sebagai Heading 1

presentational.
tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level
dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda
presentational saat ini sudah mulai digantikan oleh CSS dan tidak
direkomendasikan untuk mengatur tampilan tulisan,

hypertext
tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau
pranala ke dokumen lain (contoh, <a href=”http://infoini.com/”>infokita</a> akan
menampilkan infokita 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 kita
untuk membuat link pada suatu kelompok kata atau frasa untuk menuju ke bagian
manapun dalam World Wide Web.
http://dedebrahma.blogspot.in/2013/05/pengertian-html-xhtml-dan-xml.html?m=1
Contoh dokumen HTML sederhana adalah seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>'''Hello World''</title>
</head>
<body>
<p>Welcome to my site!</p>
</body>
</html>
iv. Elemen html :
a) HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di
dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman
pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk
memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan
juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai
keyword. Header juga memuat tag META yang biasanya di gunakan untuk
menentukan informasi tertentu mengenai document HTML, anda bisa menentukan
author name, keywords, dan lainnya pada tag META. Contoh :<meta name="author"
content="kriwil">
b) BODY
Bagian BODY, yang dinyatakan dengan tag <BODY>isi content</BODY>,
merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi
yang akan ditampilkan pada browser.
c) 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 (>).
http://jambispirit.com/berita-15.html
B. CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan
menggunakan penanda (markup laguage. Biasanya CSS digunakan untuk mendesain
sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk
segala dokumen XML, termasuk SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang
meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten
pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi
darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman
untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur
dari konten, contohnya teknik table less pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style
dengan menggunakan metode pembawaan yang berbeda pula, sepertion-screen, in-print,
by voice, dan lain-lain. Sementara itu, pemilik konten web bisa menentukan link yang
menghubungkan konten dengan file CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari
tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih
mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura
dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi
memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam
suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang
pada akhirnya dapat memangkas waktu pembuatan web.
http://newbie-programer.blogspot.in/2012/04/penjelasan-dan-pengenalan-tentang-css.html?m=1
<html>
<head>
<style type="text/css">
Body {background-color:#d0e4fe;}
h1 {color:orange;text-align:center;}
P {font-family:"Arial";font-size:20px;}
</style>
</head>
<body>
<h1>Contoh CSS di Echo Indo</h1>
<p>http://newbie-programer.blogspot.com</p>
</body>
</html>
Berikut penjelasan dari script tersebut
<style type="text/css"></style>
itu kita akan memakai bahasa cssbody
{background-color:#d0e4fe;}
akan membuat background berwarna biru #d0e4fe adalah scipt untuk berwarna biru bisa
juga di ganti dengan blue
h1
{color:orange;text-align:center;}
Membuat heading dengan warna orange dan berada di tengah
p
{font-family:"Arial";font-size:20px;}
Membuat Paragraf dengan type font arial dan dengan ukuran 20 pixel
C. XHTML (eXtensible Hyper Text Markup Language)
XHTML adalah singkatan dari Extensible Hyper Text Markup Language yang merupakan
gabungan dari html (Hyper Text Markup Language) dan xml (Extensible Markup
Language). Xhtml merupakan versidiatas html, penulisan kode menggunakan bahasa
xhtml haruslah disusun secara rapi dan tertib. Semua elemen pembuka pada xhtml
harusah ditutup, ini berbeda dengan html. Keunggulan menggunakan xhtml adalah dapat
digunakan pada perangkat selain komputer, musalnya HP dan lainnya. Itu sebabnya
Mywapblog penggunaan xhtml karena memang di khususkan untuk pengguna HP atau
ponsel. XHTML adalah sebuah aplikasi dari XML (Extensible Mark-up Languange).
XHTML direkomendasikan oleh W2C pada january 2000.
i. Perbedaan HTML dan XHTML :
 Semua elemen dan attribute pada dokumen XHTML harus diketik dalam huruf kecil
(ini tidak perlu pada HTML)
 Semua tag pembuka harus ditutup dengan tag penutup, di HTML banyak tag - tag
pembuka dibiarkan terbuka tanpa menutupnya namun tidak terjadi error bila dibuka
pada browser, salah satu contohnya adalah line break dan image tag
 Dalam dunia XHTML, segala tag harus bersarang secara teratur (properly nested),
artinya bahwa jika anda membuka tag “a” setelah itu membuka tag baru di
dalamnya, maka tag yang paling baru harus ditutup duluan dan tag yang terbuka
pertama harus ditutup paling akhir. Walaupun nesting ini juga terdapat dalam dunia
HTML namun tidak seketat peraturan di XHTML
 Tiap value pada attribute harus terbungkus dengan tanda kutip ganda atau tunggal
dan atributnya sendiri tidak boleh disingkat
 Image tag harus terdapat alt attribute yang menyediakan deskripsi image, untuk
memungkinkan mereka memiliki beberapa persyaratan untuk aksesibilitas bersama
dengan standar web yang berbeda
 Persyaratan lain dari XHTML adalah adanya pernyataan dari DOCTYPE yang
menentukan aturan mana yang diikuti oleh dokumen anda (aturan yang diwarisi dari
XML). Anda akan menemukan pernyataan ini pada barisan pertama dari atas ketika
anda mengaktifkan halaman source kode XHTML yaitu tipe dokumen deklarasi
(juga disebut dengan DTD atau DOCTYPE). Sebagian besar halaman web yang
diciptakan hari ini akan menyertakan deklarasi DOCTYPE tersebut.
Ada 3 DTD untuk XHTML : Strict (hanya akan validasi jika tanpa tag usang), Transisi
(masih akan memvalidasi dengan tag usang), dan Frameset (untuk halaman yang "set up
frame"). Semua dokumen XHTML harus sesuai dengan aturan sintaks XML.
Deklarasi Doctype pada XHTML hampir sama dengan Doctype pada HTML. W3C
mengharuskan agar selalu menggunakan Doctype pada XHTML. Terdapat 3 Jenis
Doctype pada XHTML :
a. XHTML - Strict.
Digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuholeh
CSS. Pada deklarasi ini menggunakan tagfont dan table.
<!DOCTYPE
html
PUBLIC
"-//W3c//DTD
XHTML
1.0Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
b. XHTML - Transitional.
Digunakan untuk membuat halaman yang sebagian besar menggunakan tag-tag
HTML.
<!DOCTYPE
html
PUBLIC
"-//W3c//DTD
XHTML
1.0Transitional//EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-traditional.dtd">
c. XHTML - Frame.
Digunakan jika kita memakai frame pada halaman web.
<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0Frameset//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
* XML (Extensible Markup Language)
Contoh program XML:
*.Sebuah contoh dokumen XML seperti pada contoh dibawah ini dan simpan kedalam
filecontoh1.xml:
<?xml version="1.0"?>
<product barcode="2394287410">
<manufacturer>Verbatim</manufacturer>
<name>DataLife MF 2HD</name>
<quantity>10</quantity>
<size>3.5"</size>
<color>black</color>
<description>floppy disks</description>
</product>
*.jika dokumen tersebut kita buka menggunakan web browser, maka tampak seperti gambar
dibawah ini :
*.Dokumen diatas menjelaskan sebuah data produk yang ada pada suatu supermarket. Produk
tersebut memiliki
kode barcode = 2394287410,
manufacturer = Verbatim,
name = DataLife MF 2HD,
quantity = 10,
size = 3.5",
color = black,
description = floppy disk
Cara kerja
Client Side Scripting itu sangat sederhana, yaitu berawal dari client yang memanggil berdasarkan
URL (Uniform Resource Locator) melalui browser, kemudian browser mendapat alamat dari web
server, yang nantinya akan memberikan segala informasi yang dibutuhkan web browser. Web
browser yang sudah mendapat informasi segera melakukan proses penterjemahan kode HTML
(Client Side Scripting) dan menampilkannya ke layar pemakai. Cara Kerja Client Side Scripting
2. Server Side Scripting
Server Side Scripting adalah kebalikan dari Client Side Scripting yaitu bahasa pemrograman web
yang pengolahannya dilakukan di komputer server dan hasil pengolahannya kirimkan ke komputer
client/pengunjung dalam bentuk bahasa html, sehingga pengunjung tidak mengetahui Script yang
telah ditulis oleh pembuatnya, sehingga website tipe ini lebih aman dari serangan hacker,
walaupun masih beresiko juga terkena hack. Web tipe ini bersifat Dinamis yaitu bisa dirubah
kontennya dengan mudah tanpa mengotak-ngatik scriptnya. Bisa digunakan untuk berbagai
kebutuhan web seperti, Toko Online, forum, web sekolah, blogging dan berbagai kebutuhan
lainnya.
contoh Server Side Scripting adalah :
*.PHP
*.ASP
*.ASP dot Net
*.Java Server Page
*.dan lain-lain.
Untuk mempelajari bahasa pemrograman berbasis Client Side Scripting, kita hanya membutuhkan
Web editor (contoh: Notepad, Adobe Dreamweaver, Ms. FrontPage, dsb) dan Browser (contoh :
Mozilla Firefox, Google Chrome, Internet Explorer, dsb). Untuk mempelajari bahasa
pemrograman berbasis Server Side Scripting selain Web editor dan Browser, kita juga
memerlukan sebuah komputer server. Jangan Pusing dulu, kita bisa menggunakan komputer kita
sebagai server juga sebagai client yaitu dengan cara menginstallkan aplikasi yang dibundel untuk
server yang bisa didapatkan dengan GRATIS. Aplikasi tersebut salahsatunya adalah :
XAMPP
LAMPP
WAMPP
AppServ
Server Side Scripting hanya perlu penterjemahan khusus untuk kode-kode, seperti PHP yang
nantinya akan diterjemahkan oleh mesin PHP ke kode HTML terlebih dahulu sebelum
diterjemahkan browser untuk ditampilkan di layar klien. Untuk lebih jelasnya lihat skema yang
ada untuk membandingkan konsep kerja HTML dengan PHP.
PHP dan DATABASE Salah satu kelebihan yang ada pada PHP yaitu mampu berkomunikasi
dengan database yang beraneka ragam. Maka, PHP bisa menampilkan isi database dengan dinamis
dan mudah diimplementasikan, sehingga membuat PHP disebut sangat cocok untuk membuat web
yang paling dinamis. Sampai saat ini, PHP sudah dapat berkomunikasi dengan berbagai macam
database dengan kelengkapan yang berbeda - beda, diantaranya :
*.MSQL
*.Oracle
*.Inges
*.Ms Access
*.InterBase
*.DBM
*.Informix
*.FilePro (Personix, Inc)
*.Sybase, danv
*.PostgreSQL.