PEMROGRAMAN WEB

M. IBROHIM, M.KOM

PERTEMUAN 1
Pada pertemuan pertama ini saya ingin menggali dasar-dasar teori mengenai sistem
informasi dan pemrograman web yang mana pada mata kuliah ini kita akan
mengembangkan aplikasi berbasis web dengan bahasa pemrograman yang digunakan
diantaranya adalah HTML, CSS dan PHP, setelah pengetahuan dasar bahasa
pemrograman tersebut dikuasai selanjutnya akan membangun aplikasi berbasis web
dengan menggunakan framework.

DATA
Seperti kita ketahui Data adalah kejadian nyata dan Basis adalah tempat atau ruangan
untuk berkumpul.
Contoh 1:
saya pergi kepasar untuk membeli cabai, sesampainya dipasar ada tiga penjual cabai
yaitu Budi, Andi dan Tono kemudian saya menanyakan harga 1 kilo cabai tersebut
kepada Budi dan andi menjawab 15.000 / kg, dalam hal ini jawaban 15.000 dari Andi
adalah Data (diambil dari kejadian nyata/fakta), kemudian saya juga menanyakan harga
1 kilo cabai kepada Andi dan harga yang diperoleh 17.000 /kg, jawaban 17.000 dari
Andi adalah Data (diambil dari kejadian nyata/fakta) dan juga kepada Tono dengan
harga 20.000 /kg dan itu pun adalah Data. Sekarang kita sudah mempunya tiga data
harga cabai yaitu:
Budi : 15.000 /kg
Andi : 17.000 / kg
Tono : 20.000 /kg
Ketiga data tersebut saya catat pada sebuah kertas yang kemudian disampaikan kepada
orang membutuhkan harga cabai tersebut, dalam hal ini contoh orang tua kita yang akan
digunakan untuk memasak. Nah, kertas berisi kumpulan data harga cabai tersebut
disebut dengan Informasi.
Setelah informasi disampaikan kepada orang yang membutuhkan, kemudian orang yang
menerima informasi memutuskan untuk membeli cabai kepada Andi dengan harga
17.000 /kg, tentunya sudah melalui pertimbangan seandainya beli di Budi terlalu murah
dikhawatirkan kurang bagus, dan di Tono terlalu mahal karena melihat budget
pengeluaran.
Dari contoh diatas dapat disimpulkan bahwa data diambil dari kejadian nyata dan
dikumpulkan untuk menjadi sebuah informasi untuk menunjang suatu keputusan.
Sistem informasi adalah suatu kombinasi teratur dari orang, hardware (perangkat
keras), software (piranti lunak), computer networks and data communications (jaringan
komunikasi), dan database (basis data) yang mengumpulkan, mengubah dan
menyebarkan informasi di dalam suatu bentuk organisasi (O’Brien)

Sistem informasi adalah suatu sistem yang menerima masukan data dan instruksi,
mengolah data tersebut sesuai dengan instruksi dan mengeluarkan hasilnya (Gordon B.
Davis)

Pemrograman adalah proses menulis, menguji dan memperbaiki (debug), dan

memelihara kode yang membangun suatu program computer. Kode ini ditulis dalam
berbagai bahasa pemrograman. Tujuan dari pemrograman adalah untuk memuat suatu
program yang dapat melakukan suatu perhitungan atau 'pekerjaan' sesuai dengan
kebutuhan.

Web adalah sebuah sistem dengan informasi yang disajikan dalam bentuk teks, gambar,
suara, dan lain-lain yang tersimpan dalam sebuah server Web Internet yang disajikan
dalam bentuk hiperteks. Web dapat diakses oleh perangkat lunak client Web yang
disebut browser. Browser membaca halaman-halaman Web yang tersimpan dalam
server Web melalui protocol yang disebut HTTP (Hypertext Transfer Protocol) (Jenner
Simartama)

Jadi Secara singkat untuk Web programming adalah proses pembuatan

program yang outputnya disajikan oleh Web Browser.

Pengertian HTML & Sejarah Singkat HTML

Hypertext Markup Language (HTML) adalah bahasa markup yang umum digunakan
untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah bahasa
pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa markup atau
penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk
menentukan format atau style dari teks yang di tandai.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML
mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan
menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus
disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan
suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa
mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan
bisa menampilkan HTML tersebut.

HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list,
serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada
dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).

HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat
memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir
dari adanya homepage interaktif.

HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang
disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi
3.2.
HTML versi 4.0
dalam versi HTML 4.0 konsep style sheet eksternal muncul. file eksternal ini dapat
dimasukan dalam HTML untuk memanggilnya. versi ini juga menambahkan
kemampuan scripting untuk elemen multimedia

HTML versi 5.0

meningkatkan bahasa dan untuk mendukung multimedia terbaru. Untuk mencapai hal
ini, beberapa aturan dasar dibuat oleh WHATWG dan W3C. Diantaranya adalah
mengurangi kebutuhan plugin eksternal seperti plugin Flash dengan mengganti dengan
banyak script.

Fungsi HTML
 Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman Web) dan
isinya.
 Mempublikasikan document secara online sehingga bisa diakses, dilihat dari
keseluruh dunia.
 Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online.
 Menambahkan object – object seperti image, audio, video dan juga java applet
(aplikasi java seperti java game dll) dalam document HTML.

Pada dasarnya elemen HTML ada 2 kategori:

1. Elemen berfungsi untuk memberikan informasi atau mendeklarasikan dokumen
tersebut.
2. Elemen berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada
browser.

Sebelum kita mengakhiri semua teori ini, ada 2 tools (alat) yang dibutuhkan :
1. Browser
Browser merupakan software yang di install di mesin client (komputer kita sebagai
pengguna website) yang berfungsi untuk menterjemahkan tag-tag HTML menjadi
halaman web. Contoh browser Microsoft Edge, Chrome, Mozila Firefox, Opera, Safari
dan masih banyak yang lainya.
2. Editor
Editor adalah program yang bisa digunakan untuk membuat document HTML (Web
page/Halaman Web), ada banyak HTML editor yang bisa anda gunakan diantaranya:
Notepad++, Sublime, Ms FrontPage, Dreamweaver, Notepad, dll.

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 dokumenXML, termasuk
SVG dan XUL bahkan ANDROID

CSS dibuat untuk memisahkan konten utama dengan 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 tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style
dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-
print, by voice, dan lain-lain. Sementaraitu, 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.

Fungsi CSS
Merancang, merubah, mendisain, membentuk halaman wesite (blog juga website). dan
isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag
html (yang sederhana) sehingga menjadi lebih fungsional dan menarik.

PHP (Hypertext Preprocessor)

PHP adalah bahasa pemrograman script serverside yang didesain untuk pengembangan
web, tetapi juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia).
PHPpertama kali di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, namun
sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di
http://www.php.net. Pada awalnya PHP adalah singkatan dari Personal Home Page,
namun karena dalam perkembangannya PHP tidak hanya digunakan untuk membuat
halaman web pribadi, PHP saat ini merupakan singkatan dari PHP: Hypertext
Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana
kepanjangannya berisi juga singkatan itu sendiri. PHP dirilis dalam lisensi PHP License,
sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa
digunakan untuk proyek Open Source. Namun penggunaan PHP tetap tidak dikenakan
biaya (gratis). Kemudahan dan kepopuleran PHP sudah menjadi standar bagi
programmer web di seluruh dunia. Menurut wikipediapada februari 2014, sekitar 82%
dari web server di dunia menggunakan PHP, dan menjadi dasar dari program CMS
(Content Management System) populer seperti Joomla, Drupal,dan WordPress.

Fungsi PHP Dalam Pemograman Web

Dalam membuat halaman web, PHP sebenarnya bukanlah bahasa pemograman yang
wajib digunakan. Sebuah website sederhana dapat dibuat tanpa menggunakan PHPsama
sekali. Anda bisa membuat sebuah website, murni dengan menghubungkan beberapa
halaman HTML saja. Namun jika anda ingin membuat web yang dinamis, bisa
menyimpan data ke dalam database, atau ingin membuat halaman yang berubahubah
sesuai input dari user, maka pada saat itulah PHP dibutuhkan. Untuk pembuatan web,
kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitru inilah PHP
disebut juga sebagai Scripting Language atau bahasa pemograman script.

Web Server yang digunakan adalah Apache

Web server adalah perangkat lunak yang berfungsi sebagai penerima permintaan yang
dikirimkan melalui browser kemudian memberikan tanggapan permintaan dalam bentuk
halaman situs web atau lebih umumnya dalam dokumen HTML

Apache merupakan salah satu web server yang paling banyak digunakan di internet
pada saat ini. Popularitas program yang pertama kali di desain untuk sistem operasi
LINUX/UNIX tersebut cukup mumpuni berkat adanya beragam program pendukung
yang bisa dimanfaatkan oleh pengguna.
Keunggulan Apache Web Server:
 Pengeturan lebih mudah
 Jejaring komunitas besar
 Open Source

Database yang digunakan dalam pembelajaran ini yaitu MySql

Merupakan sebuah aplikasi Relational Database Management Server (RDBMS) bersifat
open source yang memungkinkan data diakses dengan cepat oleh banyak pemakai
secara bersamaan dan juga memungkinkan pembatasan akses pemakai berdasarkan
privilege (hak akses) yang diberikan. MySQL menggunakan bahasa SQL (structured
query language) yang merupakan bahasa standar pemograman database.
Praktikum
Sebelum memulai praktik mandiri, silahkan persiapkan dan install kebutuhan software
diantaranya web server boleh menggunakan Xampp, teks editor notepad++ atau
Sublime.
Aktifkan/start web server apache pada Xampp kemudian tes menggunakan browser,
ketikkan localhost jika muncul seperti tampilan dibawah ini maka web server sudah
berhasil diaktifkan.
Latihan 1
 Buat Folder dengan nama “belajar” pada directory C:\xampp\htdocs
 Anda tuliskan ulang perintah dibawah ini dengan teks editor, kemudian simpan
dengan nama index.html pada folder yang telah dibuat.

 Buka browser kemudian tuliskan url. localhost/belajar

Maka akan tampil seperti gambar dibawah ini:

Penjelasan Struktur HTML:

<! DOCTYPE html> : Deklarasi pada dokumen HTML5 yang berfungsi untuk
memberikan informasi kepada web browser tentang versi
dokumen HTML yang bersangkutan
<html> ... </html> : Merupakan tag pembuka dari dokumen html.
<head> ... </head> : Kepala dari dokumen
<title> ... </title> : Merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : Merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.
Latihan 2
Memasukkan gambar untuk digunakan sebagai latar belakang pada sebuah halaman.
Kita cukup menggunakan atribut berikut untuk memilih sebuah gambar untuk dijadikan
latar belakang. Cara penulisannya adalah sebagi berikut:
<img src="image\gambar1.jpg">
Contoh:
Agar file tersusun dengan rapi buat folder didalam folder belajar dengan nama “image”
kemudian masukkan gambar yang akan dijadikan latar belakang kemudian ketikan
perintah berikut pada teks editor.

Setelah selesai kemudian disimpan, buka halaman browser kemudian reload untuk
melihat perubahan halaman sesuai perintah yang dibuat yaitu membuat background
dengan gambar.

Latihan 3
Membuat warna latar belakang dari halaman web
Maka warna background halaman yang akan ditampilkan sebagai berikut:

Daftar kode warna

Kode Warna HTML merupakan susunan atau format yang diterima oleh browser dalam
menampilkan warna. Kode warna pada HTML adalah gabungan nilai dari warna RGB
(Red Green Blue, Merah Hijau Biru). Penulisan kode warna ini umumnya menggunakan
bilangan heksadesimal.

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00

#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000

#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00

#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000

#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00

#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #996633 #996600
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000

#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00

#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000

#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00

#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000

#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00

#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

#465584 #EEF2F7 #3A4F6C #00D #434951 #555

#777 #DFE6EF #345487 #F5F9FD #3860BB #BCD0ED
#C2CFDF #F0F5FA #D1DCEB #003 #900 #CCE9FD
#E4EAF2 #4C77B6 #DFE6EF #EEF2F7 #FFFFFF
Atribute HTML
Text
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada halaman
tersebut.
Link
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang ada pada
halaman tersebut sebelum di-klik.
Vlink
Berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman
tersebut ketika telah di-klik.
Alink
Berguna untuk menentukan warna standar dari tautan (link) pada halaman tersebut
ketika kursor berada diatasnya.
Margin
Topmargin dan Leftmargin digunakan untuk menentukan jarak atas dan tepian pada
halaman. Tag ini akan terbaca pada browser Internet Explorer/Edge, sedangkan untuk
browser Netscape tag yang digunakan adalah Marginheight dan Marginwidth.
OnLoad
Tag onLoad digunakan untuk menjalankan suatu perintah ketika suatu halaman html
dibuka.
<body onload="alert('Selamat')">
OnUnload
Tag onUnLoad digunakan untuk menjalankan suatu perintah ketika suatu halaman html
tutup.
<body onUnload="alert('Selamat Tinggal')">
Latihan 4
Membuat teks format judul bisa menggunakan tag heading. Tag heading terdiri dari
beberapa level, untuk lebih jelasnya lihat contoh di bawah ini

Berikut adalah hasil tampilan dari code di atas:

Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis huruf,
warna huruf, size/ukuran huruf dll. Untuk mengatur format font dalam dokumen html
caranya dengan menggunakan tag <font>...</font>. Dibawah ini adalah contoh
penggunaan tag font.

Dari code diatas terdapat tag <font size=”5pt” face=”arial” color=”red”>, itu artinya
kita mengatur font pada dokumen html dengan ukuran 5 pt, dengan jenis font arial
berwarna merah.

Latihan 5
Merubah ukuran gambar pada tampilan halaman depan cukup ketikkan perintah berikut

Setelah selesai disimpan dan kemudian lihat perubahan ukuran gambar pada halaman
web.
… SELESAI …
TERIMA KASIH