PEMROGRAMAN WEB BERBASIS FRAMEWORK PROGR

PEMROGRAMAN WEB BERBASIS FRAMEWORK
LAPORAN BAB 2
“MENGENAL HTML, CSS,JAVASCRIPT,OOP PHP”

Oleh :
Nama : Meyla Yan Sari
Kelas : IK-2B
NIM : 3. 34. 13. 1. 10

PROGRAM STUDI TEKNIK INFORMATIKA
JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI SEMARANG
2015

I.

Tujuan
Mahasiswa dapat mengetahui :
- penggunaan file html
- penggunaan file javascript
- penggunaan file css

II.

Dasar Teori
A. HTML
HTML (Hyper text markup language) adalah bahasa standar pemrograman
untuk membuat halaman web yang terdiri dari kode-kode tag tertentu, kemudian
kode-kode tersebut di terjemahkan oleh web browser untuk menpilkan halaman
web yang teridiri dari berbagai macam format tampian seperti teks, grafik,
animasi link, maupun audio-video.
Sedangkan web browser adalah sebuah program yanf mengakses dan
menerjemahkan kode perintah dari dokumen HTML. Contoh aplikasi web
browser adalah internet eplorer, nescape navigator, mozila firefox, dan lain-lain.
Contoh berikut adalah dokumen HTML sederhana :
File buah HTML



Informasi Buah-Buahan

daftar buah

mangga
nanas
jeruk siam
jambu mera




Kemudian simpan ke folder c:\xampp\test1\
Perintah
informasi buah-buahan

Adalah tag judul dan


...

Adalah tag kepala


...

Adalah ta header, biasanya dipakai judul atau subjudul pada halaman web :
Untuk menguji, anda bisa lakukan dengan cara memanggil url
http://localhost/test1/buah.html, hasilnya seperti terlihat pada gambar berikut :

Gambar. Pengujian HTML
Berikut contoh skrip yang ada pada HTML :
Tabel. Tag HTML




..sampai-

Tag Scrip HTML
Tag bagian kepala HTML
Tag untuk menempatkan judul
Script untuk isi HTML
Tag untuk menentukan ukuran font pada judul
atau subjudul pada halaman web
Tag untuk pemberian paragraf
Tag untuk pemberian pindah baris, seperti
enter
Tag menampilkan teks dengan font mencetak
font tebal (bold)
Tag menampilkan teks dengan font cetak
miring (Italic)

Tag menampilkan teks dengan font cetak
bergaris bawah(underline)
Tag menampilkan teks dengan font cetak
menjadi tebal (mirip bold)
Tag menampilkan teks dengan font cetak huruf
menjadi font courier
Tag menampilkan teks dengan font cetak huruf
menjadi font Tele-Type writer
Tag menampilkan teks dengan font cetak huruf

menjadi font Code
Memformat tampilan teks semua spasi yang


bukan script akan sama letaknya dengan yg
ditulis
Membuat nomor atau bullet, pada baris

berikutnya harus ditulis sebelum menulis
teks
Mmebuat nomor urut angka, sama seperti yang



diatas
Membuat tabel
Tag membuat baris dalam tabel
Tag membuat kolom dalam tabel
Tag table header, membuat kolom judul






B. CSS
CSS adalah kepanjangan dari Cascading Style Sheets. CSS skrip yang berisi
rangkaian instruksi yang menentukan suatu teks akan tertampil di halaman

web

browser.

Perancangan

tampilan

web

dapat

dilakukan

dengan

mendefinisikan huruf, warna, margin, background, dan lain-lain. Elemenelemen seperti warna, huruf, dan ukuran disebut juga “styles”. Contoh skrip
penggunaan CSS
File contoh1.html

body
{
}
h1{
}
P{

background-color:#d04fe;
color:orange;
text-align:center;
font-family:"times new roman";
font-size:20px;
color:blue;

}


ini contoh CSS

ini bagian dari paragraf




Simpan ke folder c:\xampp\htdoct\test1\

Perintah ... diakhiri dengan tag untuk CSS dalam
dokumen html.
Body{

Background-color:#d04fe;

}

Menmpilan warna latar belakang dengan nilai hexadesimal #d04fe (abu-abu)
h1{
color:orange;
text-align:center;
}

Menentukan tampilan header 1, warna teks orange dan teks tampil rata tengah
halaman.
P{
font-family:"times new roman";
font-size:20px;
color:blue;
}

Menentukan teks dengan nama tag p jenis font times new roman ukuran font
20px,

untuk

melihat

hasilnya

dengan

cara

menjalankan

url

http

://localhost/test1/contoh1.html.

Gambar. hasil keluaran contoh1 CSS
C. Java Script
Bahasa pemrograman java, perintah-perintahnya ditulis dengan kode yang
disebut skrip. Java adalah bahasa pemrograman berorientasi objek, sedangkan

script adalah serangkaian instruksi program. Ada beberapa hal yang harus
diperhatikan dalam pengelolaa pemrograman JavaScript, diantaranya adalah
mengenai kode case sensitive, yang artinya javascript membedakan hururf
besar dan huruf kecil. Jika anda pernah belajar bahasa turbo C, c++, PHP
1. Penulisan Java Script
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag
yang dibuka dengan tag
Contoh :



Alert{“halo apa kabar”};


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 , contoh kode seperti berikut :



2. Meletakkan script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk fuction) atau
dipanggil berdasarkan triger pada event tertentu. Peletakan script di head
akan menjamin skrip di-load terlebih dahulu sebelum digunakan (dipanggil).



...




3. Meletakkan script pada bagian body
Script ini dieksekusi ketika halaman di-load sampai di bagian , ketika
menempatkan script pada bagian berarti antara isi dan javascript
dijadikan satu bagian.




...




4. External java script
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 setiap halaman. Maka JavaScript
dapat ditulis di file secara eksternal. Jadi antara dokumen HTML dan

JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokumen
HTML. File 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
pada halaman HTMLnya.






Script di atas berada di berkas “xx.js”
(eksternal)




Contoh :
File JavaScript.htm



function menampilkantanggal ()
{
document.gentElementbyld(
"demo_tanggal").innerHTML=Date()
}



Latihan JavaScript
Latihan Web Pakai Javascript.
Tampilkan Tangal




Simpan ke folder c:\xampp\htdoct\test\
Perhatikan melalui kode penambahan JavaScript yang dituliskan melalui
perintah :


function menampilkantanggal ()
{

document.gentElementbyld(
"demo_tanggal").innerHTML=Date()


}

Adapin pemanggilan kode bernama menampilkan tanggal () dilakukan pada
kejadian on-click pada tag . Untuk melihat hasilnya, dengan cara
memanggil ke url http://localhost/test1/javaScript1.html seperti terlihat pada
gambar berikut.

Gambar. hasil tampilan Java
Contoh berikutnya adalah menggunakan loop for.
File JavaScript2.html



Menampilkan Angka menggunakan loop.
Tampilkan


function myFunction()
{
var x="",i;
for (i=0; i

:tag mengakhiri penulisan skrip PHP

2. Variable PHP
Sebuah bahasa pemrograman menyediakan variabel, variabel biasanya untuk
menyimpan suatu nilai, dan nilai tersebut bis diubah setiap saat. Nama
variabel dalam PHP di awali dengan karakter “$” contoh $nama, $jumlah.
Contoh skrip PHP:
File latihan2.php


Latihan 2, PHP






Akhir file latihan2.php
Tag adalah awal dan akhir untuk menempatkan skrip program PHP

Pernyataan:
$judul=”Menghitung Luas Persegi Panjang”;
$panjang=10;
$lebar=20;

Memberikan nilai variable:
$luas=$panjang *$lebar; operasi perkalian
Printf(“Panjang=&d”, $panjang);
Printf(“Lebar=&d”, $lebar):
Echo “Luas=”; echo $luas;

Hasil keluaran seperti pada gambar

Gambar 2.8 Hasil Skrip PHP Menggunakan Variable

E. OOP PHP
Object Oriented Programming (OOP) merupakan metode pemrograman yang
berorientasi pada objek. Semua data dan fungsi metode ini dibungkus dalam
kelas-kelas atau objek-objek. Kalau dibandingkan dengan logika pemrograman
tersruktur, setiap objek dapat menerima pesan, memproses data, dan mengirim
pesan ke objek lainnya. OOP diciptakan untuk mengatasi keterbatasan pada
bahasa pemrograman tradisional. Konsep dari OOP sendiri adalah semua
pemecahan masalah dibagi ke dalam objek. Dalam konsep OOP data dan fungsifungsi digabungkan menjadi satu kesatuan yang dapat disebut sebagai objek.
1. Object
Sederhananya, sebuah objek adalah kumpulan dari variable dan fungsi yang
dibungkus menjadi satu entitas. Entitas tersebut dapat berupa variable biasa.
Sebuah objek diciptakan melalui sebuah kelas atau dengan istilah instan dari
kelas. Objek memiliki lebih dari 2 elemen utama :
- Attributes atau Properties : yaitu nilai-nilai yang tersimpan dalam objek
tersebut dan secara langsung maupun tidak langsung menetukan
karakteristik dari objek tersebut.
- Method : yaitu suatu aksi yang akan dijalankan atau dikerjakan oleh objek
tersebut.
2. Kelas
Kelas atau class dapat didefinisikan sebagai struktur data dari suatu objek.
Lebih jelasnya adalah sebuah bentuk dasar yang didefinisikan variable,
method umum pada semua objek. Objek sendiri adalah kumpulan variable
dan fungsi yang dihasilkan dari template khusus atau disebut class.
Perhatikan contoh class berikut ini.
Class namaKelas
{
var deklarasiVariabel_1
var deklarasiVariabel_2
deklarasi fungsi_1
deklarasi fungsi_2
}

Contoh berikut memberikan gambaran pendefinisian kelas bernama
SegiEmpat yang memiliki dua buah property dan dua buah metode.
File segi_empat.inc


function luas()
{
return $this->panjang*$this->lebar;
}

Akhir file segi_empat.inc
Pada contoh di atas, $this adalah objek dari kelas itu sendiri (kelas
SegiEmpat). Tanda -> digunakan untuk mengakses metode atau property.
Misalnya this->panjang

Gambar. Contoh Hasil Kelas Sederhana
Contoh :

$this->panjang

Property tanggal milik objek itu sendiri sedangkan pernyataan :
$this->panjang=$pj;
Merupakan perintah yang menghasilkan argument $tg ke property
$tanggal;

3. Menciptakan object
Setelah kelas didefinisikan, objek atau desebut dengan istilah instan kelas
dapat dibentuk melalui pernyataan new. Contoh :
$kotak = new SegiEmpat;

File kotak.php


printf("Panjang %d",$kotak->panjang);
echo "";
printf("Lebar %d",$kotak->lebar);
echo "";
printf("Luas %d",$kotak->luas());

Akhir file kotak.php
Penjelasan :
Pernyataan include

"segi_empat.inc"

adalah menyatakan file

segi_empat.inc ke dalam file kotak.php.
$kotak = new SegiEmpat: menciptakan objek $kotak merupakan kelas
dari SegiEmpat
$kotak->set_sisi(10,20) : memanggil fungsi set_sisi(10,20), 10 nilai

isi parameter panjang dan 20 nilai isi parameter lebar.
4. Kelas extends
Sebuah kelas dapat merupakan perluasan dari kelas yang ada sebelumya. Hal
ini yang merupakan kelebihan pemrograman berorientasi objekadalah adanya
sifat pewarisan (inheritance). Misalnya pada contoh kelas SegiEmpat hanya
terdapat fungsi set_sisi(), luas() dan mungkin itu dirasakan kurang. Jika ingin
menciptakan kelas baru Kubus ang menggunakan fungsi yang ada di dalam
kelas SegiEmpat, serta ditambahkan fungsi volume(), maka dengan
melakukan perluasan terhadap sebuah kelas. Adapun caranya menggunakan
pernyataan extends yang sintaksnya sebagai berikut.
class Kubus extends SegiEmpat
{
//property
var $tebal
//metode

function volume()
{
………………..
}
}

Berikut contoh cara pembuatan kelas baru dengan nama Kubus merupakan
kelas perluasan dari SegiEmpat.
File kubus.inc


Akhir file kubus.inc
Setelah kelas baru dengan perluasan kelas sebelumnya didefinisikan dengan
perintah extends, maka membuat objek baru missal $balok = new
kubus;


Akhir file balok.php
Perintah $kotak = new SegiEmpat : objek $kotak merupakan turunan
dari kelas SegiEmpat dan $balok = new Kubus; objek $balok,
merupakan turunan dari kelas Kubus, dan Kubus perluasan dari kelas
SegiEmpat. Jadi, kelas Kubus juga mempunyai fungsi set_sisi(), dan
fungsi luas().

Gambar 2.10 Hasil dengan Kelas Extend
Contoh berikut adalah membuat kelas pegawai disimpan ke file pegawai.inc
File pegawai.inc


Perintah :
class pegawai{
}

Adalah deklarasi menciptakan kelas dengan nama pegawai

public function pegawai ($no="105410",$nm="Budiyanto")
{//contruktor
$this->nopeg =$no;

}

$this->nama=$nm;

Konstruktor pegawai dengan arameter $no dengan nilai “105410” dan $nm
dengan nilai “Budiyanto”.
public function isikannopeg($no){
$this->nopeg=$no;
}
Metode isikannopeg dengan parameter $no
public function ambilnopeg(){
return $this->nopeg;
}
Metode ambil nopeg dengan menghasilkan

mengembalikan nilai dari

properti $this->nopeg;
Cara menggunakan kelas pegawai adalah dengan perintah include
“egawai.inc” seperti pada ontoh berikut.
File pribpegawai.php


Perintah :
$dataprib->isikannopeg("941001");
$dataprib->isikannama("budiyanto");

Memanggil metode atau fungsi $dataprib->isikannopeg("...")dengan
memberikan nilai parameter “941001”.
Menampilkan hasilnya dengan perintah memanggil metode :
printf("nomor pegawai: %s",$dataprib->ambilnopeg());

Hasil pengujian seperti terlihat pada gambar berikut :

Gambar. hasil kelas pegawai
Berikut ini adalah cara menggunakan konstruktor. Kontruktor adalah
pemberian nilai bawaan yang diberkan dalam konstruktor pada suatu
kelas.
File pribpegawaikons.php


Perintah :

$dataprib=new pegawai;

Menciptakan instan kelas $dataprib dengan menggunakan kelas
keturunan pegawai.
$dataprib=new pegawai ("950122","meyla yan sari");

Dalam hal ini bawaan dalam konstruktor pegawai dengan nilai
parameter “950122” dan “meyla yan sari”. Hasl sepert terlihat pada
gambar berikut :

Gambar. penggunaan konstruktor
Contoh berikut menciptakan objek dengan erluasan kelas pegawai. Jika
akan membuat kelas baru, misal dengan nama gaji pegaai dengan
menyertakan anggota kelas yang terdapat pada kelas pegawai anda bisa
menggunakan perintah class

gajipegawai

extends

pegawai

{...},

untuk lebih lengkapnya perhatikan skrip berikut :
File gajipegawai.inc


Perintah :
include "pegawai.inc";

Adalah mendeklarasikan kelas gaji pegawai dengan turunan/perluasan
kelas pegawai. Sedangakan perintah :

private $gajipokok=0;
private $tunjangan=0;

Adalah properti $gajipokok=0; dan $tunjangan=0;
public function isikangajipokok($gapok){
$this->gajipokok=$gapok;
}

Metode isikangajipokok dengan parameter $gapok
Contoh berikut cara penggunaan kelas exends pegawai
File gaji.php


Perintah :
include "gajipegawai.inc";

menyertakan kelas file gajipegawai.inc berisi kelas gaji pegawai
$gaji1=new

gajipegawai

menciptakan kelas $gaji1

dengan

turunan kelas gajipegawai
$gaji1->konspegawai(“905122”,

menjalankan

konstruktor

“meyla

yan

sari”)

$gaji1->isikangajipokok(2500000);

menjalankan metode isikangajipokok()
Printf (“nomor pegawai : %s”, $gaji1->ambinopeg());

Menampilkan hasil dengan menjalankan metode

III.

Kesimpulan
HTML (Hyper text markup language) adalah bahasa standar pemrograman
untuk membuat halaman web yang terdiri dari kode-kode tag tertentu, kemudian
kode-kode tersebut di terjemahkan oleh web browser untuk menpilkan halaman
web yang teridiri dari berbagai macam format tampian seperti teks, grafik,
animasi link, maupun audio-video.
CSS adalah kepanjangan dari Cascading Style Sheets. CSS skrip yang
berisi rangkaian instruksi yang menentukan suatu teks akan tertampil di halaman
web browser. Perancangan tampilan web dapat dilakukan dengan mendefinisikan
huruf, warna, margin, background, dan lain-lain. Elemen-elemen seperti warna,
huruf, dan ukuran disebut juga “styles
Bahasa pemrograman java, perintah-perintahnya ditulis dengan kode yang disebut
skrip. Java adalah bahasa pemrograman berorientasi objek, sedangkan script
adalah serangkaian instruksi program. Ada beberapa hal yang harus diperhatikan
dalam pengelolaa pemrograman JavaScript, diantaranya adalah mengenai kode
case sensitive, yang artinya javascript membedakan hururf besar dan huruf kecil.
Jika anda pernah belajar bahasa turbo C, c++, PHP
PHP adalah bahasa skrip yang dapat ditanamkan atau disisipka ke dalam html
atau php banyak dipakai untuk situs web dinamis. PHP dapat juga digunaan untuk
membangun CMS. Sebagian besar sintaks mirip dengan bahasa C, java, dan Peri
ditambah beberapa fungsi PHP yang spesifik. Tujuan utama penggunaan bahasa
ini adalah untuk memungkinkan peranccang dan menulis halaman web dinamis
dengan cepat
Object Oriented Programming (OOP) merupakan metode pemrograman yang
berorientasi pada objek. Semua data dan fungsi metode ini dibungkus dalam
kelas-kelas atau objek-objek. Kalau dibandingkan dengan logika pemrograman

tersruktur, setiap objek dapat menerima pesan, memproses data, dan mengirim
pesan ke objek lainnya. OOP diciptakan untuk mengatasi keterbatasan pada
bahasa pemrograman tradisional. Konsep dari OOP sendiri adalah semua
pemecahan masalah dibagi ke dalam objek. Dalam konsep OOP data dan fungsifungsi digabungkan menjadi satu kesatuan yang dapat disebut sebagai objek.