PEMROGRAMAN WEB
Ilham Rizky Almahdi UMSIDA
fst.umsida.ac.id
RANGKUMAN PRAKTIKUM PEMROGRAMAN WEB
Pemrograman web diambil dari 2 suku kata yaitu
pemrograman dan web.
Pemrograman yang
dalam bahasa English adalah programming dan diartikan proses, cara, perbuatan
program. Web : jaringan komputer yang terdiri dari kumpulan situs
internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi
melalui protokol transfer hypertext. Dalam pemrograman web ada banyak Bahasa
yang harus di kuasai seperti HTML, CSS, JavaScript, PHP.
HyperText
Markup Language (HTML)
Hypertext Markup Language (HTML) adalah bahasa markah
standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.
Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan
bahasa scripting seperti JavaScript dan VBScript.
·
HTML adalah
singkatan dari Hyper Text Markup Language
·
HTML adalah bahasa
markup standar untuk membuat halaman Web
·
HTML menggambarkan
struktur halaman Web
·
HTML terdiri dari
serangkaian elemen
·
Elemen HTML memberi
tahu browser cara menampilkan konten
·
Elemen HTML memberi
label bagian konten seperti "ini adalah judul", "ini adalah
paragraf", "ini adalah tautan", dll.
Contoh
<!DOCTYPE
html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<h1>My
First Heading</h1>
<p>My
first paragraph.</p>
</body>
</html>
o
<!DOCTYPE
html>deklarasi mendefinisikan bahwa dokumen ini adalah dokumen HTML5
o
<html>elemen
elemen akar halaman HTML
o
<head>elemen
berisi informasi meta tentang halaman HTML
o
<title>elemen
menentukan judul untuk halaman HTML (yang ditampilkan dalam bar judul browser
atau tab halaman ini)
o
<body>elemen
mendefinisikan tubuh dokumen, dan merupakan wadah untuk semua isi terlihat,
seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll
o
<h1>elemen mendefinisikan
judul besar
o
<p>elemen
mendefinisikan sebuah paragraph
Elemen HTML ditentukan oleh tag awal, beberapa konten,
dan tag akhir:
<
tagname > Konten ditempatkan di sini ... < / tagname >
Cascading Style Sheet
(CSS)
Cascading Style Sheet (CSS) merupakan aturan untuk
mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam. CSS adalah bahasa yang kami gunakan untuk mendesain dokumen HTML.
·
CSS adalah singkatan
dari C ascading S tyle S heets.
·
CSS menjelaskan
bagaimana elemen HTML ditampilkan di layar, kertas, atau di media lain
·
CSS menghemat banyak
pekerjaan . Itu dapat mengontrol tata letak beberapa halaman web sekaligus
·
Stylesheet eksternal
disimpan dalam file CSS
Ada tiga cara memasukkan style sheet:
1.
External CSS
Setiap halaman HTML harus menyertakan referensi ke file
lembar gaya eksternal di dalam elemen <link>, di dalam bagian head.
Contoh
External CSS ditentukan dalam elemen <link>, di
dalam bagian <head> dari halaman HTML:
<!DOCTYPE
html>
<html>
<head>
<link
rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
Style sheet eksternal dapat ditulis di editor teks apa
pun, dan harus disimpan dengan ekstensi .css. File .css eksternal tidak boleh
berisi tag HTML apa pun.
2.
Internal CSS
Internal CSS ditentukan di dalam elemen <style>, di
dalam bagian kepala.
Contoh
Internal CSS ditentukan dalam elemen <style>, di
dalam bagian <head> pada halaman HTML:
<!DOCTYPE
html>
<html>
<head>
<style>
body
{
background-color: linen;
}
h1
{
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
3.
Inline CSS
Untuk menggunakan Inline CSS, tambahkan atribut style ke
elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.
Contoh
Inline CSS ditentukan dalam atribut "style"
dari elemen yang relevan:
<!DOCTYPE
html>
<html>
<body>
<h1
style="color:blue;text-align:center;">This is a heading</h1>
<p
style="color:red;">This is a paragraph.</p>
</body>
</html>
JavaScript
JavaScript adalah bahasa pemrograman tingkat tinggi dan
dinamis. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag
SCRIPT. JavaScript merupakan salah satu teknologi inti World Wide Web selain
HTML dan CSS. JavaScript membantu membuat halaman web interaktif dan merupakan
bagian aplikasi web yang esensial.
Kode JavaScript biasanya dituliskan dalam bentuk fungsi
yang ditaruh di tag <head> yang dibuka dengan tag <script
type="text/javascript">.
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:
·
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 "xxx.js" (eksternal) </p>
</body>
</html>
Preprocesor Hypertext (PHP)
PHP (Preprocesor
Hypertext) adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada
server side. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan
pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja berupa
HTML. Untuk membedakan perintah HTML dan PHP digunakan tanda <? ... ?> atau <?php ... ?>.
o Sintaks Dasar
Pembatas
PHP hanya mengeksekusi
kode yang ditulis dalam pembatas sebagaimana ditentukan oleh dasar sintaks PHP.
Apapun di luar pembatas tidak diproses oleh PHP (meskipun teks PHP ini masih
mengendalikan struktur yang dijelaskan dalam kode PHP. Pembatas yang paling umum
adalah "<?php" untuk membuka dan "?>" Untuk menutup
kode PHP.Tujuan dari pembatas ini adalah untuk memisahkan kode PHP dari kode di
luar PHP, seperti HTML,JavaScript.
Variabel
Variabel diawali
dengan simbol dolar $. Pada versi php PHP 5 diperkenalkan jenis isyarat yang
memungkinkan fungsi untuk memaksa mereka menjadi parameter objek dari class
tertentu, array, atau fungsi. Namun, jenis petunjuk tidak dapat digunakan
dengan jenis skalar seperti angka atau string. Contoh variabel dapat ditulis
sebagai $nama_variabel.
Penulisan fungsi,
penamaan kelas, nama variabel adalah peka akan huruf besar (Kapital) dan huruf
kecil . Kedua kutip ganda "" dari string memberikan kemampuan untuk
interpolasi nilai variabel ke dalam string PHP. PHP menerjemahkan baris sebagai
spasi, dan pernyataan harus diakhiri dengan titik koma ;.
Komentar
PHP memiliki 3 jenis
sintaks sebagai komentar pada kode yaitu tanda blok / * * / , komentar 2 baris
// Serta tanda pagar # digunakan untuk komentar satu baris. Komentar bertujuan
untuk meninggalkan catatan pada kode PHP dan tidak akan diterjemahkan ke
program.
Fungsi
Ratusan fungsi yang
disediakan oleh PHP serta ribuan lainnya yang tersedia melalui berbagai
ekstensi tambahan. fungsi-fungsi ini didokumentasikan dalam dokumentasi PHP.
Namun, dalam berbagai tingkat pengembangan, kini memiliki berbagai konvensi
penamaan. Sintaks fungsi adalah seperti di bawah ini:
function tampilkan($data="")
// Mendefenisikan fungsi, "tampilkan" adalah nama sebuah fungsi
//Diapit oleh tanda kurung kurawal
if($data) return $data; else
return 'Tidak ada data'; //
Melakukan proses pengolahan data, contohnya melalui kondisi
echo tampilkan("isi halaman")
// Menjalankan fungsi
o Contoh program
Sebuah Halaman web
yang ditulis menggunakan Bahasa Pemograman PHP adalah sebagai berikut:
<?php
echo "Hallo World";
?>
o 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.
Peladen web yang mendukung PHP dapat ditemukan di mana
- 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.
jQuery Mobile
jQuery Mobile adalah
framework berbasis jQuery yang
memudahkan kita untuk membuat web app untuk mobile. Selain jQuery mobile sebenarnya banyak
framework lain yang dapat digunakan seperti Sencha, jTouch, DHTMLX Touch, Jo dan lainnya. Kelebihan
jQuery adalah:
1.
Support
banyak platform: Webkit (Android, iOS, Opera, Chrome), Firefox
mobile, Windows Phone, Blackberry, Bada, Meego.
2.
Berbasis JQuery yang populer.
3.
Penggunanya banyak dan forum aktif.
jQuery Mobile menyediakan
komponen UI widget seperti button, listview, header dan elemen form dan
navigasi.Kode ini dibangun oleh
jQuery
dan terus
dikembangkan
oleh pengembangnya secara aktif untuk
memperbaiki
bug-bug yang
ada diaplikasi ini. Banyak
fitur yang
ditawarkan dalam
framework
ini termasuk
dukungan HTML5,
Ajax-powered
navigasi
link, dan sentuhan/atau navigasi gesekan.
Komentar
Posting Komentar