SlideShare ist ein Scribd-Unternehmen logo
1 von 31
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
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
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
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.
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>
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 :
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.
Anda hanya perlu mempelajari sedikit saja apa maksud dari rows , columns
dan table width maka anda bisa mengubah
Menjadi
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"
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>
<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 : <!-- - - >
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”;
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>
<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(){
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>
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">
<!--
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
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>
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++;
}
// -->
</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>
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>
<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.
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);
});
});
</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>
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.
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.
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:
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;
?>
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
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.
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/

Weitere ähnliche Inhalte

Was ist angesagt?

Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman webDeka M Wildan
 
modul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & phpmodul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & phpIsmi Islamia
 
Bab 4 tools-pemrograman-web-dan-database
Bab 4 tools-pemrograman-web-dan-databaseBab 4 tools-pemrograman-web-dan-database
Bab 4 tools-pemrograman-web-dan-databasefebeniken
 
Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Ichsan Smith
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Doni Tobing
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman webexkun
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLeddie Ismantoe
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programingeghha
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webRifky Ardian
 
Asas cakephp-mvc
Asas cakephp-mvcAsas cakephp-mvc
Asas cakephp-mvckriptonium
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisrahmantaufik00
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhanaLyadi
 
Webprograming
WebprogramingWebprograming
Webprogramingandreboys
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 

Was ist angesagt? (20)

Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman web
 
modul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & phpmodul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & php
 
Bab 4 tools-pemrograman-web-dan-database
Bab 4 tools-pemrograman-web-dan-databaseBab 4 tools-pemrograman-web-dan-database
Bab 4 tools-pemrograman-web-dan-database
 
Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman web
 
Laporan Aplikasi Website
Laporan Aplikasi WebsiteLaporan Aplikasi Website
Laporan Aplikasi Website
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQL
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Asas cakephp-mvc
Asas cakephp-mvcAsas cakephp-mvc
Asas cakephp-mvc
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Adit
AditAdit
Adit
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 
Webprograming
WebprogramingWebprograming
Webprograming
 
Cover
CoverCover
Cover
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Belajar php
Belajar phpBelajar php
Belajar php
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 

Ähnlich wie Cara Membuat Web Dasar

pemrograman internet
pemrograman internetpemrograman internet
pemrograman internetmafailmi
 
Pengenalan web design dan programming
Pengenalan web design dan programmingPengenalan web design dan programming
Pengenalan web design dan programmingFrisianlllllllFlag
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1eghha
 
Laporan web
Laporan webLaporan web
Laporan webrhizky
 
Chapter 1 introduction html (shared)
Chapter 1   introduction html (shared)Chapter 1   introduction html (shared)
Chapter 1 introduction html (shared)YUSRA FERNANDO
 
Bahan ajar html 1
Bahan ajar html 1Bahan ajar html 1
Bahan ajar html 1Uji Wardoyo
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptRizkyRamdan2
 

Ähnlich wie Cara Membuat Web Dasar (20)

pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
 
Pengenalan web design dan programming
Pengenalan web design dan programmingPengenalan web design dan programming
Pengenalan web design dan programming
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Laporan web
Laporan webLaporan web
Laporan web
 
TUGAS SIM
TUGAS SIMTUGAS SIM
TUGAS SIM
 
Laporan tugas besar_web
Laporan tugas besar_webLaporan tugas besar_web
Laporan tugas besar_web
 
W E B P R O G R A M M I N G
W E B  P R O G R A M M I N GW E B  P R O G R A M M I N G
W E B P R O G R A M M I N G
 
Web programming
Web programmingWeb programming
Web programming
 
Chapter 1 introduction html (shared)
Chapter 1   introduction html (shared)Chapter 1   introduction html (shared)
Chapter 1 introduction html (shared)
 
Php coder
Php coderPhp coder
Php coder
 
Bahan ajar html 1
Bahan ajar html 1Bahan ajar html 1
Bahan ajar html 1
 
Module desain web
Module desain webModule desain web
Module desain web
 
Bab 1 Teknologi Web
Bab 1   Teknologi WebBab 1   Teknologi Web
Bab 1 Teknologi Web
 
Mpw
MpwMpw
Mpw
 
Bahan ajar web1
Bahan ajar web1Bahan ajar web1
Bahan ajar web1
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
 

Cara Membuat Web Dasar

  • 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.