Dokumen ini adalah laporan praktikum dasar pemrograman web yang memberikan pemaparan tentang HTML, CSS, JavaScript, jQuery, Bootstrap, dan PHP. Penulis, Nanda Pujiono, menyusun laporan ini untuk memenuhi tugas kuliah dan berharap dapat memberikan wawasan bagi pembaca. Terdapat berbagai contoh kode dan penjelasan mengenai cara penggunaan masing-masing teknologi web tersebut.

1. LAPORAN PRAKTIKUM
DASAR PEMROGRAMAN WEB
PEMROGRAMAN WEB
DISUSUN OLEH :
NAMA : NANDA PUJIONO
KELAS : TI 14 B
NIM : 14.11.0099
JURUSAN TEKNIK INFORMATIKA
STMIK AMIKOM PURWOKERTO
JL.LET. JEND . POL SOEMARTO (DEPAN SPN) PURWOKERTO
2014

2. KATA PENGANTAR
Puji dan syukur kami panjatkan kehadapan Tuhan Yang Maha Esa, Karena berkat
dan rahmat-NYA kami dapat menyelesaikan laporan mata kuliah Pemrogaman
Web dengan judul “ Dasar Pemrogaman Web “.
Kami berharap makalah yang telah dibuat ini dapat menambah wawasan dan
pengetahuan tentang Pemrogaman Web dan cara bagaimana menggunakan
HTML, CSS, Javascript, Jquery, Boostrap dan PHP serta program program lain
yang mendukungnya.
Penulis menyadari bahwa didalam makalah ini masih banyak kekurangan-
kekurangan yang harus di benahi dan diperbaiki. Oleh karena itu kritik maupun
saran yang membangun dari pembaca senantiasa penulis terima demi
penyempurnaan pembuatan makalah selanjutnya.
Purwokerto ,17 November 2014
Nanda Pujiono
Penyusun

3. DAFTAR ISI
KATA PENGANTAR ....................................................................................... I
DAFTAR ISI .......................................................................................................II
BAB 1 PENDAHULUAN
I. Latar Belakang .................................................................................. III
II. Rumusan masalah ............................................................................. IV
III. Tujuan ............................................................................................... IV
BAB II PEMBAHASAN
1. HTML....................................................................................................1
2. CSS........................................................................................................5
3. JAVASCRIPT.......................................................................................8
4. JQUERY..............................................................................................18
5. BOOTSTRAP......................................................................................22
6. PHP......................................................................................................23
BAB III PENUTUP
I. Kesimpulan .........................................................................................24
DAFTAR PUSTAKA

4. BAB I
PENDAHULUAN
I. Latar Belakang
Website atau situs dapat diartikan sebagai kumpulan halaman yang
menampilkan informasi data teks, data gambar diam atau gerak, data animasi,
suara, video dan atau gabungan dari semuanya, baik yang bersifat statis
maupun dinamis yang membentuk satu rangkaian bangunan yang saling
terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman
(hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah,
dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis
apabila isi informasi website selalu berubah-ubah, dan isi informasinya
interaktif dua arah berasal dari pemilik serta pengguna website. Contoh
website statis adalah berisi profil perusahaan, sedangkan website dinamis
adalah seperti Friendster, Multiply, dll. Dalam sisi pengembangannya, website
statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis
bisa diupdate oleh pengguna maupun pemilik.
II. Rumusan Masalah
1. Apa itu Web ?
2. Bagaimana cara membuat web?
3. Cara membuat Html, Css, Java script, Jquery, Bostrap, dan Php
III. Tujuan
Tujuan di buatnya makalah ini adalah untuk memenuhi tugas mata kuliah
Pemrograman Web dan untuk berbagi ilmu kepada para pembaca.

5. BAB II
PEMBAHASAN
1. HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan
untuk menampilkandocument web, yang bisa anda lakukan dengan HTML
yaitu:
a. Mengontrol tampilan dari web page dan contentnya.
b. Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
c. Membuat online form yang bisa di gunakan untuk menangani
pendaftaran, transaksisecara online.
d. Menambahkan object-object seperti image, audi, video dan juga java
applet dalamdocument HTML.
I. Penerapan
Untuk menampilkan pada bagian isi halaman , kode HTML ditempatkan di
antara <body>............... </body> , misalnya
<body>
<h1> ini contoh header type 1</h1>
</body>
Hasilnya :
Begitupun dengan kode-kode lainnya , untuk penempatan sama saja dan
setiap kode html harus mempunya akhiran , seperti diatas <h1> dan </h1>

6. Perintah Dasar HTML
Disini akan dicontohkan beberapa kode-kode dasar HTML yang umum
digunakan , untuk kode lainnya anda bisa mencarinya di internet
<b> ....... </b> = teks tebal
<i> ........ </i> = teks miring
<u> .......</u> = teks garis bawah
<h1> ..... </h1> = kode <h1></h1> untuk tulisan header bisa diganti dengan
<h2></h2> dan seterusnya , hasilnya seperti
<a href=”link”>nama link</a> = facebook.com
<br> atau <br /> = untuk membuat paragraf / baris baru ,
Masih banyak kode html lain yang tidak mungkin dituliskan semua disini ,
silahkan gunakan internet untuk mengetahui lebh banyak kode html lain
Contoh penulisan kode html dan hasilnya :
Hasilnya :

7. Pembuatan Form dan tabel
Pembuatan form dan tabel adalah materi lanjutan dari pengenalan dasar
kode html diatas. Untuk membuat form seperti berikut :
Kode yang diperlukan adalah :
<form action="" method="post"><h1> FORM LOGIN </h1>
<br />username : <input type="text" name="username" />
<br /> password : <input type="password" name="password" /><br
/>ingat password : <input type="checkbox" checked="checked"
name="checkbox" /><br /><input name="login" type="button"
value="login" /></form>
Tampilan diatas masih belum tertata dengan baik , agar terlihat lebih baik
maka kita bisa memanfaatkan perintah table.

8. Anda hanya perlu mempelajari sedikit saja apa maksud dari rows , columns
dan table width maka anda bisa mengubah
Menjadi

9. 2. CSS
KONSEP CSS
Apa itu CSS :
a. Feature untuk membuat dynamic HTML.
b. Style sheet mendeskripsikan bagaimana tampilan document HTML
di layar (template)
c. Membuat special efek (mendefinisikan style untuk <H1> dengan
style bold dan italic dan berwarna biru)
d. Support ke semua browser.
Cara penggunaan CSS :
1. External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
<link, merupakan tag pembuka diakhiri dengan tanda “>”
rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style
sheet.
type=“text/css”, file yang dipanggil berupa css
href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh Penggunaan :
script efek.css
body {
color: green;
background: white;
font-family : arial;
}
<HTML>
<HEAD>
<TITLE>Sekolah</TITLE>
<LINK REL="STYLESHEET"

10. TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>Belajar</H1>
<P>Belajar untuk menggapai cita cita
</BODY>
Hasilnya :
2. Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>
Contoh Penggunaan :
<HTML>
<HEAD>
<TITLE>nanda</TITLE>
<STYLE type="text/css">
body {
color: orange;
background: red;
font-family : harrington;
}
</STYLE>
</HEAD>
<BODY>

11. <H1>PENGALAMAN</H1>
<P>Terkadang hidup harus belajar dari pengalaman
</BODY>
</HTML>
Hasilnya:
ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;
Cara penulisan yang salah :
FONT-FAMILY : “sans-serif”;
FONT-SIZE : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Cara menuliskan komentar :
1. Menggunakan tanda : /* ….. */
2. Menggunakan tanda : <!-- - - >

12. 3. Javascript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan
diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen
HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan
JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada
formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa
Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan
oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh
klien.
Struktur JavaScript
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya
browser tidak mengenali JavaScript maka browser akan memperlakukannya
sebagai komentar sehingga tidak ditampilkan pada jendela browser.
JavaScript sebagai bahasa berorientasi pada obyek
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti
warna mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar JavaScript”;

13. Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan
sesuatu tindakan
terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo”)
Letak JavaScript dalam HTML
Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).
DASAR-DASAR JAVASCRIPT
1. Pemakaian alert sebagai property window
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.alert("Ini merupakan pesan untuk Anda");
//-->
</SCRIPT>
</BODY>
</HTML>
2. Pemakaian metode dalam objek
<HTML>
<HEAD>
<TITLE>Skrip JavaScript</TITLE>
</HEAD>

14. <BODY>
Percobaan memakai JavaScript:<BR>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Selamat Mencoba JavaScript<BR>");
document.write("Semoga sukses!");
//-->
</SCRIPT>
</BODY>
</HTML>
3. Pemakaian prompt
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama Anda?","Masukkan nama anda");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
4. Pembuatan fungsi dan cara pemanggilannya
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function pesan(){

15. alert ("memanggil javascript lewat body onload")
}
</SCRIPT>
<BODY onload=pesan()>
</BODY>
</HTML>
DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT
1. Operasi dasar aritmatika
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function test (val1,val2)
{
document.write("<br>"+"Perkalian : val1*val2 "+"<br>")
document.write(val1*val2)
document.write("<br>"+"Pembagian : val1/val2 "+"<br>")
document.write(val1/val2)
document.write("<br>"+"Penjumlahan : val1+val2 "+"<br>")
document.write(val1+val2)
document.write("<br>"+"Pengurangan : val1-val2 "+"<br>")
document.write(val1-val2)
document.write("<br>"+"Modulus : val1%val2 "+"<br>")
document.write(val1%val2)}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="arithmetic"
onclick=test(9,4)>
</BODY>
</HTML>

16. 2. Operasi relational
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function test () {
val1=window.prompt("Nilai I :")
val2=window.prompt("Nilai II :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"+"<br>")
document.write(val1<val2) }
</SCRIPT>
<BODY>
<input type="button"name="button1"value="relational"
onclick=test()>
</BODY>
</HTML>
3. Seleksi kondisi (if..else)
<HTML>
<HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--

17. var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "";
if (nilai >= 60)
hasil = "Lulus";
else
hasil = "Tidak Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
4. Penggunaan operator switch untuk seleksi kondisi
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function test ()
{
val1=window.prompt("Input Nilai (1-5):")
switch (val1)
{
case "1" :
document.write("bilangan satu")
break
case "2" :
document.write("bilangan dua")
break
case "3" :
document.write("bilangan tiga")
break

18. case "4" :
document.write("bilangan empat")
break
case "5" :
document.write("bilangan lima")
break
default :
document.write("bilangan lainnya")
}
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="switch"
onclick=test()>
</BODY>
</HTML>
5. Pemakaian looping < for >
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
for (x=0;x<=10;x++)
document.write(x+"<br>")
// -->
</SCRIPT>
</BODY>
</HTML>

19. 6. Pemakaian looping < do..while >
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
var x=0
do{
document.write(x+"<br>")
x++;
}
while (x<=10)
// -->
</SCRIPT>
</BODY>
</HTML>
7. Pemakaian looping < while >
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
var x=0
while (x<=10){
document.write(x+"<br>")
x++;
}

20. // -->
</SCRIPT>
</BODY>
</HTML>
PEMBUATAN FORM
1. Form input :
<html>
<head></head>
<SCRIPT language="Javascript">
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1"
onclick=test()>
</p>
</form>
</body>
</html>

21. 2. Form button :
<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function ubahWarnaLB(warna) {
document.bgColor = warna;
}
function ubahWarnaLD(warna) {
document.fgColor = warna;
}
//-->
</SCRIPT>
<H1>TES</H1>
<FORM>
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Hijau"
onClick = "ubahWarnaLB('GREEN')">
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Putih"
onClick = "ubahWarnaLB('WHITE')">
<INPUT TYPE = "BUTTON"
VALUE = "Teks Kuning"
onClick = "ubahWarnaLD('YELLOW')">
<INPUT TYPE = "BUTTON"
VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
</FORM>

22. <SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Dimodifikasi terakhir pada " +
document.lastModified);
//-->
</SCRIPT>
</BODY>
4. jQuery
jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana
untuk memanipulasi komponen di dokumen HTML, menangani event,
animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian
rupa supaya membuat program menggunakan Javascript menjadi relatif
sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih
sedikit, tetapi melakukan pekerjaan lebih banyak. jQuery juga mempunyai
ukuran nya cukup kecil, sehingga tidak terlalu mempengaruhi atau
memperlambat proses loading halaman web yang kita buat. jQuery juga
kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa
berjalan di semua browser – cross browser. jQuery pertama kali diluncurkan
pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang
paling populer saat ini. Karena kecanggihan nya pula, jQuery dipakai oleh
perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America,
Mozilla, Drupal, dsb. jQuery adalah library Javascript yang gratis dan open
source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas untuk
keperluan pengembangan website kita. Tanpa library seperti jQuery,
menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang
baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface)
semakin memudahkan kita mengembangkan website yang cantik dan
interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya
kemampuan jQuery.

23. Library jQuery mempunyai kemampuan :
a. Kemudahan mengakses elemen-elemen HTML
b. Memanipulasi elemen HTML
c. Memanipulasi CSS
d. Penanganan event HTML
e. Efek-efek javascript dan animasi
f. Modifikasi HTML DOM
g. AJAX
h. Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda harus mendownload
jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode
javascript dengan menggunakan jquery, jangan lupa untuk memasukan file
jquery.js kedalam kode javascript anda.
<script type="text/javascript" src="jquery.js"></script>
sekarang mari kita lihat contoh sederhana pemograman dengan
menggunakan jquery. Kode 12. hello world jquery
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});

24. });
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
Kemudian jika kita ingin memulai mempelajari jQuery, kita harus
mendownload jquery.js dari situs http://www.jquery.com . Setiap anda
menulis kode javascript dengan menggunakan jquery,
jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
i.
Oke, sekarang mari kita lihat contoh sederhana pemograman dengan
menggunakan jquery
Kode 12. hello world jquery.
j.
k.
l.
m.
n.
o.
p.
<script type="text/javascript" src="jquery.js"></script>
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>

25. Cara mengimplementasikan jQuery
Implementasi dari jQuery
Kemudahan atau kenapa orang banyak menggunakan framework javascript
ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap
digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang
digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan
dalam pembangunan sebuah website.
Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh
beberapa web developer dalam membuat atau membangun sebuah website,
diantaranya:
1. Drop-Down-Menu
Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu
tersebut ada sub menu lagi, maka cocok menggunakan drop down
menu. Drop down menu ini juga mendukung multi level menu (menjadi
sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga
dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan
ketika lama waktu mouse over atau mouse out.
2. Tool-Tips
Tool tips adalah bubble/gelembung atau semacam kotak informasi
digunakan untuk menginformasikan sesuatu ketika mouse didekatkan
pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web
yang muncul diatas elemen tersebut. Biasanya informasi yang
disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika
mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari
bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close,
background shadow, dll.

26. 3. Autocomplete-Search
Plugin ini digunakan untuk melakukan pencarian secara real time,
dimana ketika kita memasukan kata atau huruf dalam sebuah teks input
dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai
dengan yang kita masukan secara real time. Plugin ini mirip seperti
pencarian pada website facebook, sehingga sangat menarik untuk
dicoba.
4. Validasi-Form
Plugin ini digunakan untuk melakukan validasi data dalams sebuah
form, seperti pengecekan e-mail, pengecekan password, username dan
input lainnya secara real time (tidak menekan tombol submit). Jadi
ketika user memasukan teks atau huruf, maka plugin ini akan
melakukan validasi terhadap inputan user.
5. jQuery-Cycle-Plugin
Plugin ini digunakan untuk animasi image dalam sebuah website,
plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan
plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah
animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek
yang lainnya.
6. Teks-Berjalan
Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang
kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan
atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam
tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan
lebih banyak variasi.

27. 5. BOOSTRAP
Pengertian Boostrap
Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman
website yang dapat mempercepat pekerjaan seorang pengembang website
ataupun pendesain halaman website. Sesuai namanya, website yang dibuat
dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan
tampilan halaman Twitter atau desainer juga dapat mengubah tampilan
halaman website sesuai dengan kebutuhan.
Penerapan Nesting Columns
<div class="row">
<div class="span9">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Hasilnya:

28. 6. PHP
Pengertian PHP
PHP adalahbahasa pemrograman script server-side yang didesain untuk
pengembangan web, tetapi juga bisa digunakan sebagai bahasa
pemrograman umum (wikipedia). PHP pertama kali di kembangkan pada
tahun 1995 oleh Rasmus Lerdorf, namun sekarang dikelola oleh The PHP
Group.
Latihan menampilkan variabel menggunakan html dan php, contoh program
sederhana bagi pemula. Latihan ini menggunakan umur sebagai variabel
pemasukan data, dengan dua file program php. Dimana kedua file tersebut
disimpan dengan nama input variabel dan umur, kedua file tersebut jangan
lupa ditaruh dalam satu folder. File input variabel digunakan untuk
pemasukan data, sedangkan file umur untuk menampilkan variabel. Adapun
listing programnya sebagai berikut:
Cara penulisan PHP
PHP bersifat case sensitif yang artinya semua penulisannya harus sesuai
dengan kamus data yang tersedia. Secara mendasar php memiliki struktur
sebagai berikut
<?php
//Ini contoh komentar dalam php
echo "<h2>Contoh sederhana penulisan PHP</h2>";
$nama="Satria Multimedia";
echo "<p>$nama</p>";
$nilai=10;
$hasil=$nilai+10;
echo $hasil;
?>

29. Kode diatas adalah contoh sederhana struktur PHP, berikut penjelasanya :
1. Awal kode harus diawali dengan "<?php" dan diakhiri dengan "?>", 2
perintah tersebut harus ada pada tiap bagian yang memanggil fungsi php.
2. Dalam barisan perintah php, kita bebas menyisipkan komentar dengan
diawali tanda "//". Komentar digunakan untuk mempermudah mengingat
kumpulan baris dengan proses yang sama
3. echo digunakan untuk mengirimkan hasil ke browser, sehingga yang
dikirimkan adalah bagian yang berada setelah perintah echo
setiap variabel harus diawali dengan tanda dolar "$" dan dapat dipanggil
kapanpun dalam halaman yang sama

30. BAB III
PENUTUP
Kesimpulan
Tujuan dan manfaat dari pembuatan makalah ini yaitu agar pembaca dapat
mengetahui lebih dalam mengenai internet khusunya dalam ”Pemrogaman Web”
Dengan mengetahui dasar dasar perintah dan pembuatannya diharapkan pembaca
akan lebih mengerti dan menggali minat para pembaca untuk terjun lebih dalam
pemrogaman web dengan beragam bahasanya.

31. DAFTAR PUSTAKA
http://lecturer.eepis-its.edu/~zenhadi/kuliah/internet/modul%20HTML.pdf
http://lecturer.eepis-its.edu/~zenhadi/kuliah/internet/modul%20css.pdf
http://lecturer.eepis-its.edu/~huda/Dokumen/WEB/moduljavascript.pdf
https://drive.google.com/file/d/0Bx7YJyk0mDx8TU80aTBsbzBaRkU/edit?pli=1
http://septia-lutfi-1102412069-03.blogspot.com/2013/12/makalah-jquery.html
http://contohprogramphp.blogspot.com/