cara membuat web dasar

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

Upload: stmik-amikom-purwokerto

Post on 19-Jul-2015

239 views

Category:

Software


5 download

TRANSCRIPT

Page 1: Cara Membuat Web Dasar

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

Page 2: Cara Membuat Web Dasar

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

Page 3: Cara Membuat Web Dasar

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

Page 4: Cara Membuat Web Dasar

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.

Page 5: Cara Membuat Web Dasar

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>

Page 6: Cara Membuat Web Dasar

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 :

Page 7: Cara Membuat Web Dasar

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.

Page 8: Cara Membuat Web Dasar

Anda hanya perlu mempelajari sedikit saja apa maksud dari rows , columns

dan table width maka anda bisa mengubah

Menjadi

Page 9: Cara Membuat Web Dasar

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"

Page 10: Cara Membuat Web Dasar

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>

Page 11: Cara Membuat Web Dasar

<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 : <!-- - - >

Page 12: Cara Membuat Web Dasar

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”;

Page 13: Cara Membuat Web Dasar

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>

Page 14: Cara Membuat Web Dasar

<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(){

Page 15: Cara Membuat Web Dasar

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>

Page 16: Cara Membuat Web Dasar

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">

<!--

Page 17: Cara Membuat Web Dasar

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

Page 18: Cara Membuat Web Dasar

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>

Page 19: Cara Membuat Web Dasar

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++;

}

Page 20: Cara Membuat Web Dasar

// -->

</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>

Page 21: Cara Membuat Web Dasar

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>

Page 22: Cara Membuat Web Dasar

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

Page 23: Cara Membuat Web Dasar

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);

});

Page 24: Cara Membuat Web Dasar

});

</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>

Page 25: Cara Membuat Web Dasar

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.

Page 26: Cara Membuat Web Dasar

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.

Page 27: Cara Membuat Web Dasar

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:

Page 28: Cara Membuat Web Dasar

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;

?>

Page 29: Cara Membuat Web Dasar

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

Page 30: Cara Membuat Web Dasar

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.

Page 31: Cara Membuat Web Dasar

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/