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
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
Kemudian simpan ke folder c:\xampp\test1\ Perintah
<title> informasi buah-buahan </title> Adalah tag judul dan
<head> ... </head> Adalah tag kepala
<head> ... </head> <!DOCTYPE html>
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
<html> Tag Scrip HTML
<head> Tag bagian kepala HTML <title> Tag untuk menempatkan judul <body> Script untuk isi HTML
<h1>..sampai-<h6> Tag untuk menentukan ukuran font pada judul atau subjudul pada halaman web
<p> Tag untuk pemberian paragraf
<br> Tag untuk pemberian pindah baris, seperti enter
<b> Tag menampilkan teks dengan font mencetak font tebal (bold)
<i> Tag menampilkan teks dengan font cetak miring (Italic)
<u> Tag menampilkan teks dengan font cetak bergaris bawah(underline)
<strong> Tag menampilkan teks dengan font cetak menjadi tebal (mirip bold)
<code> Tag menampilkan teks dengan font cetak huruf menjadi font courier
<tt> Tag menampilkan teks dengan font cetak huruf menjadi font Tele-Type writer
menjadi font Code
<pre>
Memformat tampilan teks semua spasi yang bukan script akan sama letaknya dengan yg ditulis
<ul>
Membuat nomor atau bullet, pada baris berikutnya harus ditulis <li> sebelum menulis teks
<ol> Mmebuat nomor urut angka, sama seperti yang diatas
<table border> Membuat tabel
<tr> Tag membuat baris dalam tabel <td> Tag membuat kolom dalam tabel <th> 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. Elemen-elemen seperti warna, huruf, dan ukuran disebut juga “styles”. Contoh skrip penggunaan CSS
File contoh1.html
Simpan ke folder c:\xampp\htdoct\test1\ <!DOCTYPE>
font-family:"times new roman"; font-size:20px;
color:blue; }
</style> </head>
<h1>ini contoh CSS</h1>
<p> ini bagian dari paragraf</p> <body>
Perintah <style> ... diakhiri dengan </style> 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
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 <head> yang dibuka dengan tag <script type=”teks/javascript”> Contoh :
<script type=”teks/javascript..”> Alert{“halo apa kabar”};
</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>, contoh kode seperti berikut :
<script type=”teks/javascript” src=”alamat.js”> </script>
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). <html>
3. Meletakkan script pada bagian body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>, ketika menempatkan script pada bagian <body> berarti antara isi dan javascript dijadikan satu bagian.
<html>
4. External java script
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 <script> pada halaman HTMLnya.
<html>
<p>Script di atas berada di berkas “xx.js”
(eksternal)
Simpan ke folder c:\xampp\htdoct\test\
Perhatikan melalui kode penambahan JavaScript yang dituliskan melalui perintah :
<script>
function menampilkantanggal () {
<!DOCTYPE html> <head>
<script>
function menampilkantanggal () {
<p id="demotanggal">Latihan Web Pakai Javascript.</p> <button type="button"
onclick"menampilkantanggal()">Tampilkan Tangal </button>
document.gentElementbyld(
"demo_tanggal").innerHTML=Date() }
</script>
Adapin pemanggilan kode bernama menampilkan tanggal () dilakukan pada kejadian on-click pada tag <button>. 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
<!DOCTYPE HTML> <HTML>
<BODY>
<p>Menampilkan Angka menggunakan loop.</p>
<button onclick="myFunction()">Tampilkan</button> <p id="demo_nomor"></p>
<script>
function myFunction() {
var x="",i;
for (i=0; i<5; i++) {
x=x + "Nomor urut " + i + "<br>"; }
document.getElementById("demo_nomor").innerHTML=x; }
</script> </BODY> </HTML>
<script>
Function myFunction() {
Var x=””, i; For (i=0;i<5;i++) {
X=x+ “Nomor urut” +i+”<br>”; }
Document.getElementById(“demo_nomor”).innerHTML=x; }
</script>
Gambar. menggunakan perintah loop for
Adalah merupakan proses untuk membuat loop otomatis dengan perintah for. <button onclick=”myFunction()”>Tampilkan </button>. Kejadian ketika tombol Tampilkan ditekan akan memanggil fungsi myFunction(). Hasil seperti terlihat pada gambar 2.5
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
1. Script PHP
PHP yang merupakan bahasa scripting yang terpasang pada HTML, dan skrip HTML (HyperText Markup Language) adalah bahasa standar yang membuat halaman web. Biasanya file dituliskan dengan ekstensi .htm atau .html. Contoh:
File latihan1.htm <!DOCTYPE HTML> <HTML>
<HEAD>
<TITLE> Latihan HTML </TITLE> </HEAD>
<BODY>
Mari Belajar Membuat Web </BODY>
</HTML>
Akhir file latihan1.htm
Gambar 2.6 Menggunakan Tag HTML
File latihan1.php
<?php: perintah tag mengawali menulis skrip php
Printf(“Mari Belajar Membuat Web”); :Perintah menampilkan di halaman web
//atau :hanya keterangan
Echo “<br>”; :pindah baris dibawahnya
Echo “<Mari Belajar Membuat Web”; : menampilkan juga bisa dengan
echo
?> :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 <!DOCTYPE HTML> <HTML>
<HEAD> Latihan 2, PHP </TITLE> </HEAD>
<BODY> <?php
$judul="<h2>MENGHITUNG LUAS PERSEGI PANJANG</h2>"; $panjang=10;
<!DOCTYPE HTML> <HTML>
<HEAD> Latihan HTML </TITLE> </HEAD>
<BODY> <?php
printf("Mari Belajar Membuat Web"); //atau
echo "<br>";
echo "Mari Belajar Membuat Web"; ?>
$lebar=20;
$luas=$panjang*$lebar; printf($judul);
printf("Panjang = %d <br>", $panjang); printf("Lebar = %d <br>", $lebar); echo "Luas = "; echo $luas;
?> </BODY> </HTML>
Akhir file latihan2.php Tag <?php
...
?> adalah awal dan akhir untuk menempatkan skrip program PHP
Pernyataan:
$judul=”<h2>Menghitung Luas Persegi Panjang</h2>”; $panjang=10;
$lebar=20;
Memberikan nilai variable:
$luas=$panjang *$lebar; operasi perkalian
Printf(“Panjang=&d<BR>”, $panjang); Printf(“Lebar=&d<BR>”, $lebar): Echo “Luas=”; echo $luas;
Hasil keluaran seperti pada gambar
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 fungsi-fungsi 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 SegiEmpat yang memiliki dua buah property dan dua buah metode.
//metode
function set_sisi($pj,$lb) {
$this->panjang=$pj; $this->lebar=$lb; }
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 <?php
include "segi_empat.inc"; $kotak = new SegiEmpat; $kotak->set_sisi(10,20);
printf("Panjang %d",$kotak->panjang);
Akhir file kotak.php Penjelasan :
Pernyataan include "segi_empat.inc" adalah menyatakan file segi_empat.inc ke dalam filekotak.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 {
Berikut contoh cara pembuatan kelas baru dengan nama Kubus merupakan kelas perluasan dari SegiEmpat.
File kubus.inc
<?php
include "segi_empat.inc"; class Kubus extends SegiEmpat {
var $tebal;
{
$this->tebal=$tb; }
function volume() {
return >tebal * >lebar * $this->panjang;
} } ?>
Akhir file kubus.inc
Setelah kelas baru dengan perluasan kelas sebelumnya didefinisikan dengan perintah extends, maka membuat objek baru missal $balok = new kubus;
<?php
include "kubus.inc"; $kotak = new SegiEmpat; $kotak->set_sisi(10,20);
echo "Belajar Kelas Kotak"; echo "<br>";
$balok = new Kubus; $balok->set_sisi(10,5); $balok->set_tebal(5);
echo "Belajar Hitung Volume Balok"; echo "<br>";
Akhir file balok.php
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; <?php
class pegawai{
private $nopeg=null; private $nama = null;
public function pegawai ($no="105410", $nm="Budiyanto"){//contruktor
$this->nopeg =$no; $this->nama=$nm; }
public function isikannopeg($no){ $this->nopeg=$no;
}
public function ambilnopeg(){ return $this->nopeg; }
public function isikannama($nm){ $this->nama=$nm;
}
public function ambilnama(){ return $this->nama; }
$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 : <?php
include "pegawai.inc"; $dataprib=new pegawai;
$dataprib->isikannopeg("941001"); $dataprib->isikannama("budiyanto");
echo"data pegawai"; echo "<br>";
printf("nomor pegawai: %s",$dataprib->ambilnopeg()); echo "<br>";
printf ("nama pegawai :%s",$dataprib->ambilnama()); echo "<br>";
echo "yes sukses"
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 :
<?php
include "pegawai.inc";
$dataprib=new pegawai ("950122","meyla yan sari"); echo "data pegawai";
echo "<br>";
printf ("nomor pegawai :%s",$dataprib->ambilnopeg()); echo "<br>";
printf ("nama pegawai :%s",$dataprib->ambilnama()); echo "<br>";
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 :
<?php
include "pegawai.inc";
class gajipegawai extends pegawai{ private $gajipokok=0;
private $tunjangan=0;
public function isikangajipokok($gapok){ $this->gajipokok=$gapok;
}
public function ambilgajipokok(){ return $this->gajipokok; }
public function isikantunjangan($tunj){ $this->tunjangan=$tunj;
}
public function ambiltunjangan(){ return $this->tunjangan; }
public function hitunggaji(){ //$gaji=0;
$jumlahgaji=$this->gajipokok+$this->tunjangan; return $jumlahgaji;
} }
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”, “meyla yan sari”) menjalankan konstruktor $gaji1->isikangajipokok(2500000); menjalankan metode isikangajipokok()
Printf (“nomor pegawai : %s”, $gaji1->ambinopeg()); Menampilkan hasil dengan menjalankan metode
<?php
include "gajipegawai.inc";
$gaji1=new gajipegawai ("950122","meyla yan sari"); $gaji1->isikangajipokok(2500000);
$gaji1->isikantunjangan(2600000); echo "data pegawai";
echo "<br>";
printf ("nommor pegawai :%s",$gaji1->ambilnopeg()); echo "<br>";
printf ("nama pegawai : %s",$gaji1->ambilnama()); echo "<br>";
printf ("gaji pokok : %s",$gaji1->ambilgajipokok()); echo "<br>";
printf ("tunjangan : %s",$gaji1->ambiltunjangan()); echo "<br>";
printf ("jumlah gaji : %s",$gaji1->hitunggaji()); echo "<br>";
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
