Modul pemrograman web

MODUL
PEMROGRAMAN
WEB

Disusun untuk pelatihan workshop
pemrograman web
Oleh: Aritha Handrico, Fauzi Aziz, Khairi Lestari, Novreni
Anggraini, R. Sahroni.

Pekanbaru, 21 Mei 2011

Teknik Informatika UIN SUSKA RIAU

DAFTAR ISI
Bab I : Pengenalan 3

Bab II: Instalasi 9

Bab III: HTML 19

Bab IV: CSS 24

Bab V : Database 39

Bab VI: PHP 48

2|Page

BAB I

PENGENALAN

A.INTERNET

1.Pengertian Internet

Internet dapat diartikan sebagai jaringan komputer luas dan besar yang mendunia,
yaitu menghubungkan pemakai komputer dari suatu negara ke negara lain di seluruh
dunia, dimana di dalamnya terdapat berbagai sumber daya informasi dari mulai yang statis
hingga yang dinamis dan interaktif.

2. Sejarah internet

Berikut sejarah kemunculan dan perkembangan internet. Sejarah intenet dimulai
pada 1969 ketika Departemen Pertahanan Amerika, U.S. Defense Advanced Research
Projects gency(DARPA) memutuskan untuk mengadakan riset tentang bagaimana caranya
menghubungkan sejumlah computer sehingga membentuk jaringan organik. Program riset
ini dikenal dengan nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yang berhasil
dihubungkan satu sama lain sehingga mereka bisa saling berkomunikasi dan membentuk
sebuah jaringan.

Tahun 1972, Roy Tomlinson berhasil menyempurnakan program e-mail yang ia
ciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah sehingga
langsung menjadi populer. Pada tahun yang sama, icon @juga diperkenalkan sebagai
lambing penting yang menunjukkan "at" atau "pada". Tahun 1973, jaringan komputer
ARPANET mulai dikembangkan ke luar Amerika Serikat. Komputer University College di
London merupakan komputer pertama yang ada di luar Amerika yang menjadi anggota
jaringan Arpanet. Pada tahun yang sama, dua orang ahli komputer yakni Vinton Cerf dan
Bob Kahn mempresentasikan pebuah gagasan yang lebih besar, yang menjadi cikal bakal
pemikiran internet. Ide ini dipresentasikan untuk pertama kalinya di Universitas Sussex.
Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil

3|Page

mengirimkan e-mail dari Royal Signals and Radar Establishment di Malvern. Setahun
kemudian, sudah lebih dari 100 komputer yang bergabung di ARPANET membentuk
sebuah jaringan atau network. Pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin,
menciptakan newsgroups pertama yang diberi nama USENET. Tahun 1981 France Telecom
menciptakan gebrakan dengan meluncurkan telpon televisi pertama, dimana orang bisa
saling menelpon sambil berhubungan dengan video link. Karena komputer yang
membentuk jaringan semakin hari semakin banyak, maka dibutuhkan sebuah protokol
resmi yang diakui oleh semua jaringan. Pada tahun 1982 dibentuk Transmission Control
Protocol atau TCP dan Internet Protokol atau IP yang kita kenal semua. Sementara itu di
Eropa muncul jaringan komputer tandingan yang dikenal dengan Eunet, yang menyediakan
jasa jaringan komputer di negara-negara Belanda, Inggris, Denmark dan Swedia. Jaringan
Eunet menyediakan jasa e-mail dan newsgroup USENET.Untuk enyeragamkan alamat di
jaringan komputer yang ada, maka pada tahun 1984 diperkenalkan sistem nama domain,
yang kini kita kenal dengan DNS atau Domain Name System. Komputer yang tersambung
dengan jaringan yang ada sudah melebihi 1000 komputer lebih. Pada 1987 jumlah
komputer yang tersambung ke jaringan melonjak 10 kali lipat manjadi 10.000 lebih.

Tahun 1988, Jarko Oikarinen dari Finland menemukan dan sekaligus
memperkenalkan IRC atau Internet Relay Chat. Setahun kemudian, jumlah komputer yang
saling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari
100.000 komputer kini membentuk sebuah jaringan. Tahun 1990 adalah tahun yang paling
bersejarah, ketika Tim Berners Lee menemukan program editor dan browser yang bias
menjelajah antara satu komputer dengan komputer yang lainnya, yang membentuk
jaringan itu. Program inilah yang disebut www, atau Worl Wide Web. Tahun 1992,
komputer yang saling tersambung membentuk jaringan sudah melampaui sejuta komputer,
dan di tahun yang sama muncul stilah surfing the internet. Tahun 1994, situs internet telah
tumbuh menjadi 3000 alamat halaman, dan untuk pertama kalinya virtual-shopping atau e-
retail muncul di internet. Dunia langsung berubah. Di tahun yang sama Yahoo! didirikan,
yang juga sekaligus kelahiran Netscape Navigator 1.0.

3. Manfaat internet
4|Page

Secara umum ada banyak manfaat yang dapat diperoleh apabila seseorang
mempunyai
akses ke internet .Berikut ini sebagian dari apa yang tersedia di internet:

1. Informasi untuk kehidupan pribadi :kesehatan, rekreasi, hobby, pengembangan pribadi,
rohani, sosial.

2. Informasi untuk kehidupan profesional/pekerja :sains, teknologi, perdagangan, saham,
komoditas, berita bisnis, asosiasi profesi, asosiasi bisnis, berbagai forum komunikasi.
Satu hal yang paling menarik ialah keanggotaan internet tidak mengenal batas negara,
ras, kelas ekonomi, ideologi atau faktor faktor lain yang biasanya dapat menghambat
pertukaran pikiran. Internet adalah suatu komunitas dunia yang sifatnya sangat
demokratis serta memiliki kode etik yang dihormati segenap anggotanya. Manfaat
internet terutama diperoleh melalui kerjasama antar pribadi atau kelompok
tanpamengenal batas jarak dan waktu. Untuk lebih meningkatkan kualitas sumber daya
manusia di Indonesia, sudah waktunya para profesional Indonesia memanfaatkan
jaringan internet dan menjadi bagian darimasyarakat informasi dunia.

B.WEB BROWSER

Web browser atau internet browser adalah sebuah aplikasi perangkat lunak untuk
melintasi, mengabil dan menyediakan sumber informasi diidentifikasi dengan inform
resource identify (URI) termasuk sebuah halamn web, gambar atau bagian lain dari kontak
web

1. Rincian web browser
a. Menu Bar adalah bagian menu-menu yang dimiliki oleh web browser seperti home,
edit, view dll
b. Status bar. Ini adalah kontak dibagian bawah jendela browser, status bar
menampilkan segala informasi tergantung dengan apa yang kita lakukan pada saat
menggunakan web browser contohnya seperti kecepatan beban URL dari alamat
yang sedang kita buka

5|Page

c. Addres Bar. Ini adalah kontak dibagian atas jendela browser anda yang menampilkan
seluruh URL atau alamat situs.
d. Tittle bar. Bar judul yang berada dibagian paling atas jendela browser dan akan
terlihat judul halaman web dibagian ini, misalnya akan terlihak “google” ketika
sedang mebuka www.google.com
e. Toolbar Ikon. Toolbar dan Ikon perusahaan browser yang ada dibagian atas kanan
jendela browser dan dibawah title bar, pada bagian inilah kita akan melihat tombol
back, home, refresh dll
f. Display Windows. Jendela display hanyalah istilah mewah untuk ruang kerja browser
karna ini merupakan frame dimana kita akan melihat halaman website.
g. Scroll Bar. Jika ketika kita membuka situs web dan harus melakukan naik turun
dengan scoll kebawah atau keatas, maka kita telah menggunakan scroll bar
2. Macam-macam web browser
a. Microsoft Internet Explorer
b. Opera
c. Mozila Firefox
d. Google chrome
e. Mac safari
f. Dll

C. EDITOR

1. Notepad

Notepad adalah Program bawaan dari Windows yang biasa digunakan untuk
menulis keterangan-keterangan yang penting dari program aplikasi seperti halnya lisensi
program atau yang lainnya pada umumnya orang mengatakan notepad adalah sebuat text
editor standar.

2. Notepad ++

6|Page

Notepad + + adalah editor kode sumber pengganti dan Notepad gratis yang
mendukung beberapa bahasa. Berjalan di lingkungan MS Windows, penggunaannya diatur
oleh GPL License. Berdasarkan komponen mengedit kuat Scintilla, Notepad + + ditulis
dalam C + + dan menggunakan murni Win32 API dan STL yang menjamin kecepatan
eksekusi lebih tinggi dan ukuran program yang lebih kecil. Dengan mengoptimalkan
rutinitas sebanyak mungkin tanpa kehilangan keramahan pengguna, Notepad + + adalah
berusaha untuk mengurangi emisi karbon dioksida dunia. Bila menggunakan power CPU
kurang, PC dapat throttle ke bawah dan mengurangi konsumsi daya, sehingga dalam
lingkungan yang lebih hijau.

3. Macromedia Dreamweaver

Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk
mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita
menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai
bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver
mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna
dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX
mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-
fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan
editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode
Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi
Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu
memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk
membersihkan dan memformat ulang HTML bila kita menginginkannya.

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang
memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat

7|Page

melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas
browser, maupun perkiraan waktu download halaman web.>

D. APLIKASI TAMBAHAN

Pemograman internet kali ini kita akan menggunakan aplikasi tambahan yaitu
XAMPP. Xampp merupakan seingkatan dari X (empat system operasi apapun), Apache,
MySQL, PHP, Perl. Xampp merupakan tool yang menyediakan paket peranngkat lunak
kedalam sebuah paket. Dalam paketnya sudah terdapat Apache (web server), MySQL
(Database), PHP (Server Side Scription), Perl, FTP server, Php MyAdmin dan berbagai
pustaka bantuan lainya. Dengan menginstal aplikasi ini maka tidak perlu lagi melakukan
instalasi dan konfigurasi web server Apach, PHP dan MySQL secara manual. XAMPP akan
menginstal dan mengonfigurasi secara Otomatis Untuk Andadilakukan penulis.

8|Page

BAB II
INSTALASI
A. NOTEPAD
Untuk Notepad kita tidak perlu melakukan instalasi lagi, karna pada windows telah
tersedia ketika kita telah menginstas OS, dan cara membukanya ialah:
pilih Start > All Programs > accessories > Notepad maka secara otomatis Notepad akan
muncul dilayar anda.
B. Notepad ++
Klik dabel pada file .exe Notepad ++ maka proses instalasi akan dimulai.

Pilih bahasa Inggris dan tekan Ok

Pilih Next> Pilih I Agree

9|Page

Disini akan ada pemilihan tempat penginstalan, biasanya c:program filesNotepad ++, jika
anda ingin memilih menginstal ditemat lain silahkan pili browse, ketika telah selesai tekan
Next> dan kemudian tekan Install.

Maka proses install akan berlangsung, ketika install telah selesai maka tekan finish dan
otomatis layar Notepad++ akan terbuka.

10 | P a g e

C. DREAMWEAVER
Klik dabel pada file Dreamweaver8-en.exe dan tunggu beberapa saaat maka proses
instalasi akan dimulai.

Tekan Next> untukmelanjutkan instalasi. Setelah itu beri ceklis pada pilihan “I Accept the
term—“ dan tekan Next untuk melanjutkan istalasi.

11 | P a g e

Pada layar selanjutnya kita akan diberikan pilihan tempat penginstalan c:program files
dereamweaver, kemudian pilih next> untuk melanjutkan , pada layar selanjutnya juga pilih
Next> untuk melanjukan.

Pada Layar ini Tekan Install, maka proses Instalasi akan berjalan hingga selesai,

12 | P a g e

Ketika telah selesai, tekan Finish. Ketika memulai Menggunakan Dreamweaver maka akan
ada pilihan untuk menggunakan Full dengan sarat memasukan serial nuber, jika telah
selesai pilih continue untuk melanjutkan menggunakan aplikasi ini.

D. XAMPP
Cari file Xampp-win32-x.x.x.exe dengan cara mendownload di situs resmi mereka.
Sesuai anjuran penyedia XAMPP, untuk pengguna baru disarankan memakai XAMPP basis
package. Disini kita pilih yang .EXE karena ini paket yang paling mudah untuk dinstall,
Anda tinggal menjalankan file .EXE tersebut.
Setelah menjalankan file xampp-win32-1.7.2.exe, Anda akan dihadapkan dengan
pilihan bahasa yang Anda pakai. Pilih saja English

Langkah kedua akan muncul tampilan meminta menutup semua aplikasi lain
sebelum menginstall XAMPP. Anda bisa menurutinya atau tidak juga tidak masalah, asalkan
tidak terlalu banyak aplikasi komputer yang Anda jalankan, sehingga tidak membuat Anda

13 | P a g e

bingung ataupun komputer Anda lambat karena banyaknya memori komputer yang
terpakai.

Jendela berikutnya yang muncul adalah pemilihan tempat/lokasi file XAMPP. Saya
sarankan sesuai default saja di c:xampp. Jangan dimasukkan ke folder "Program Files"
("C:Program Files"), dikarenakan akan adanya masalah permission folder.

Jendela selanjutnya akan memunculkan setting instalasi. Untuk memudahkan saja, Anda
centang semua pilihan sehingga paket yang terinstall nantinya cukup lengkap.
14 | P a g e

 Create a XAMPP dekstop icon --> akan menampilkan icon XAMPP di halaman dekstop
komputer Anda
 Create an Apache Friends XAMPP folder in the start menu --> akan membuat folder XAMPP
bisa diakses dari menu start windows Anda
 Service section akan menginstall untuk ketiga layanan / service yang dibutuhkan, silakan
centang semua.

15 | P a g e

Proses intalasi sedang berjalan, tunggu sampai selesai. Sebagai catatan, gambar yang saya
pakai adalah XAMPP versi 1.7.0, tetapi pada kenyataannya proses instalasi tidaklah jauh
berbeda dikarenakan masih versi yang cukup dekat.

16 | P a g e

Instalasi awal selesai, tekan tombol Finish. Tunggu langkah selanjutnya.

Setelah selesai maka aka nada keluar jendela pilih untuk membuka Xampp Control
Panel dan tekan Yes. Maka akan terbuka layar Control Panel dari Aplikasi Xampp dan
aktifkan Apache dan MySql dengan menekan tombol start. Maka aplikasi Xampp telah
siap digunakan.

17 | P a g e

Setelah Instalasi selesai, maka kita akan dihadapkan pilihan untuk memulai Xampp control
panel, pada layar ini kita akan mengaktifkan Apache dan MySQL dengan menekan satart
pada tombol pilihan, ketika langkah ini telah selesai, maka proses instalasi telah selesai.

18 | P a g e

BAB III
HTML

HTML (Hyper Text Markup Language) adalah standar bahasa yang digunakan untuk
menampilkan dokumen web. Dokumen HTML disebut sebagai markup language karena
mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks
tersebut dalam suatu dokumen dan tanda-tanda atau kode tersebut di kenal dengan TAG
tertentu. Dokumen HTML disebut sebagai hypertext, ini berarti suatu dokumen tidak harus
dibaca secara berurutan dari atas ke bawah. Dokumen dapat dibaca langsung menuju ke
topik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung.
Struktur dokumen HTML
Dokumen HTML diawal dengan tag <HTML> dan diakhiri dengan tag </HTML>. Setiap
dokumen HTML terdiri dari dua bagian utama yakni:
 Bagian kepala, yang diawali dengan tag <HEAD> dan diakhiri dengan tag </HEAD>.
Merupakan tempat untuk menuliskan judul halaman web dan script (program kecil).
 Bagian badan/isi, yang diawali dengan tag <BODY> dan diakhiri dengan tag
</BODY>. Merupakan tempat untuk menuliskan informasi yang akan di tampilkan pada
browser.

Berikut ini adalah struktur dari setiap dokumen HTML:

<HTML>
<HEAD>
<! Bagian kepala HTML>
<TITLE>tempat untuk menempatkan judul halaman web
</TITLE></HEAD><BODY>tempat untuk menuliskan informasi
</BODY>

</HTML>

19 | P a g e

Catatan :
Tag <!....> menyatakan komentar, isi teks di dalamnya tidak akan diproses dan
dapat diletakkan di mana saja.

Atribut pada tag
Setiap tag memiliki atribut yang berguna untuk memberi aturan pada tag yang kita
gunakan. Misalnya pada tag <table> dapat kita tambah atribut align untuk mementukan
apakah tabel berada di tengah (center) di kiri atau dikanan. Contoh : <table align="center">

Format teks
Teks pada dokumen html dapat di ubah formatnya misalnya menebalkan, memberi garis
bawah dan tulisan miring, menggati font, font size, font color dll. Berikut contoh
penggunaan tag HTMLnya.
contoh <b>teks tebal</b> hasil : teks tebal
<i>teks miring</i> hasil : teks miring
<u>garis bawah</u> hasil : garis bawah
<font face="verdana" color ="red" size="12">merah</font> hasil : merah

Membuat tabel

Untuk membuat tabel yang perlu diketahui adalah tag <table> <tr> dan <td>
<table>
<tr> 
<td> Kolom 1 </td> 
<td> Kolom 2 </td> 
</td> 

<tr> 
<td> nama </td> 
<td> alamat </td> 
</td> 
</table> 
Setiap tag pembuka baik itu <tr> <td> harus ditutup dengan tag penutup </tr> </td>

Membuat form
Untuk input user biasanya web browser menyediakan sebuah form input yang terdiri dari
1. Input tipe teks, contoh

2. Input tipe radio, contoh

3. Combo box/select list contoh
20 | P a g e

4. Checkbox
5. Submit, tombol yang digunakan untuk mengirimkan data yang di inputkan
Pembuatan form dimulai dengan menggunakan tag <form action="" method=""> dan
ditutup dengan tag </form>
Diantara tag <form> dan </form> disisipkan inputan yang diinginkan lihat contoh berikut.

<form action="kirim.php" method=POST>
Nama <input type="text" size="24" name="nm"/> <br> 
Jenis kelamin <input type="radio" name="jkel" value="pria"/> Pria <input type="radio"
name="jkel" value="wanita"/> Wanita <br> 
Jurusan <select name="jur"> <option> TIF</option>
<option> TI</option>
<option> TIF</option>
</select><br>
Aktif <input type="checkbox" value="T"/> Tidak <input type="checkbox" value="Y"/> YA
<br><input type="submit" value="simpan"/>
</form>

Link dan image
Untuk membuat link, kita menggunakan tag anchor <a> dan memberi atribut href untuk
memberikan link yang ingin ditulis. Misalnya ingin memberi link ke google.com
<a href="google.com">Situs Google </a>
Sedangkan untuk membuat gambar kita menggunakan tag <img> dengan memberi atribut src
untuk source file dari gambar.
<img src="buku.png"/>
Untuk memberikan link pada gambar. <a href="google.com"> <img src="logo.png"/></a>.
Secara default gambar yang diberi link akan memiliki border disekeliling gambar. Untuk
menghapuskan border tersebut dapat dengan cara memberikan atribut border dengan nilai 0.
<img src="logo.png" border="0"/>.

21 | P a g e

Daftar Tag Pada HTML

Tag Deskripsi fungsi
Basic
<!DOCTYPE> Mendefinisikan tipe dokumen
<html> Mendefinisikan dokumen HTML
<body> Mendefinisikan dokumen body HTML
<h1> to <h6> Mendefinisikan heading HTML
<p> Mendefinisikan paragraf
<br /> Memberikan enter/baris baru
<hr /> Mendefinisikan sebuah garis lurus
 Mendefinisikan Komentar
Formatting
<b> Mendefinisikan teks tebal
<big> Mendefinisikan teks besar
<blockquote> Mendefinisikan sebuah kutipan panjang
<center> Membuat teks menjadi rata tengah
<code> Mendefinisikan sebuah teks kode
<font> Mendefinisikan font, color, and size for text
<i> Mendefinisikan teks garis miring
<q> Mendefinisikan sebuah kutipan pendek
<s> Mendefinisikan sebuah teks yang dicoret
<samp> Mendefinisikan contoh kode komputer
<small> Mendefinisikan sebuah teks kecil
<strike> Mendefinisikan sebuah teks yang dicoret
<strong> Defines strong text
<sub> Mendefinisikan teks dibawah contoh : H2
<sup> Mendefinisikan teks diatas contoh : H2
<u> Garis bawah
Forms
<form> Mendefinisikan sebuah form HTML untuk inputan user
<input /> Mendefinisikan sebuah input
<textarea> Mendefinisikan sebuah teks area
<button> Mendefinisikan sebuah tombol
<select> Mendefinisikan combobox/select list (drop-down list)
<optgroup> Mendefinisikan grup option
<option> Mendefinisikan pilihan yang tedapat pada combobox (select)
<label> Mendefinisikan label pada elemen input

22 | P a g e

Images
<img /> Mendefinisikan sebuah gambar
<map> Mendefinisikan gambar map
<area /> Mendefinisikan area didalam gambar map
Links
<a> Mendefinisikan sebuah anchor /link. contoh <a href="fb.com">klik</a>
<link /> Mendefinisikan hubungan antara dokumen dan sumber eksternal
Lists
<ul> Mendefinisikan unordered list. contoh : ● satu ● dua
<ol> Mendefinisikan ordered list. contoh : 1. Satu 2. Dua
<li> Mendefinisikan item dari list
<dir> Mendefinisikan direktori list
Tables
<table> Mendefinisikan sebuah tabel
<th> Mendefinisikan cell header pada tabel
<tr> Mendefinisikan baris pada tabel
<td> Mendefinisikan cell/kolom pada tabel
<thead> Grup konten header pada tabel
<tbody> Grup konten body pada tabel
<tfoot> Grup konten footer pada tabel
Styles
<style> Mendefinisikan informasi style pada dokumen
<div> Mendefinisikan bagian-bagian dokumen
<span> Mendefinisikan bagian-bagian dukumen
Meta Info
<head> Mendefinisikan informasi pada dokumen
<title> Mendefinisikan judul dokumen
<meta> Mendefinisikan metadata dukumen HTML
<base /> Defines a default address or a default target for all links on a page
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page
Programming
<script> Mendefinisikan script sisi klien
Defines an alternate content for users that do not support client-side
<noscript>
scripts
<applet> Deprecated. Defines an embedded applet
<object> Defines an embedded object
<param /> Defines a parameter for an object

23 | P a g e

BAB IV
CSS (Cascading Style Sheets)
Pengertian
Cascading Style Sheets (CSS) merupakan suatu teknologi yang digunakan untuk
memperindah tampilan halaman situs web dan aplikasi yang berbasis web. Cascading Style
Sheets (CSS) digunakan oleh designer web pages untuk medefinisikan warna, huruf dan layout
dan aspek-aspek lain dari halaman yang dipresentasikan. Dengan Cascading Style Sheets (CSS),
para pengembang web dengan mudah mengubah secara keseluruhan warna dan tampilan yang
ada di aplikasi yang dibuatnya, sekaligus memformat ulang web tanpa usaha yang sulit.
Sintaks Cascading Style Sheets (CSS) sederhana dan menggunakan keywords dalam
bahasa Inggris untuk menspesifikasikan nama dari setiap style property. Sebuah style sheet
terdiri dari sebuah list dari rule yang ada. Setiap rule terdiri dari sebuah selector dan declaration
block. Setiap deklarasi yang terdapat pada declaration block, dipisahkan oleh titk koma (;),
sedangkan deklarasi itu sendiri terdiri dari property, tanda titik dua ( : ) dan nilai.
Apa yang seharusnya sudah diketahui
Sebelum mempelajari CSS, seharusnya kamu sudah memahami tentang :
 HTML / XHTML.

Apa itu CSS?
 CSS singkatan dari Cascading Style Sheets
 Styles berarti bagaimana menampilkan elemen HTML
 Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah
 External Style Sheets dapat menghemat banyak pekerjaan
 External Style Sheets diletakkan di dalam file CSS

Contoh CSS
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
24 | P a g e

font-family:"Times New Roman";
font-size:20px;
}
Styles Dapat Menyelesaikan Permasalahan Yang Besar
HTML tidak dibuat untuk mengatur format dari dokumen. Kalaupun ada itupun hanya yang
penting-penting saja seprti mempertebal, align, mengganti warna dari teks, dan kita harus
mengatur format teks tersebut secara manual (satu persatu).
HTML lebih mengarah untuk mendefinisikan content dari dokumen,seprti:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Pada html, apabila kita ingin memberi warna merah pada setiap tag <a>. maka caranya yaitu
dengan memberikan tag <font>,dan menspesifikasikan atribut warna nya apa, <font
color="red">merah</font>, hal ini menjadi mimpi buruk bagi developer, karena mereka harus
menambahkan tag font dan atribut colornya setiap ingin mengubah warna dari sebuah teks.
Untuk menyelesaikan masalah tersebut, the World Wide Web Consortium (W3C) membuat CSS.
Pada HTML 4.0, semua format dokumen (CSS) bisa dihilangkan dari dokumen HTML, dan
dipisahkan menjadi 1 dokumen CSS yang terpisah.
Pada saat ini semua browser sudah support CSS.
CSS Menghemat Banyak Pekerjaan!
CSS mendefinisikan BAGAIMANA elemen HTML akan ditampilkan.
Biasanya file css disimpan di luar dari dokumen HTML/ external .css files. External style sheets
memungkinkan kita untuk mengganti tampilan layout dari semua halaman website. Dengan
hanya mengedit 1 file CSS saja, menakjubkan bukan!
Syntax CSS
Aturan dari CSS sangat lah simpel, aturan ini memiliki 2 bagian utama : selector (yang
digunakan untuk menyeleksi bagian mana yang mau di format), dan 1 atau lebih declarations
(isi dari format css, bisa menggati warna, ukuran font dll):

Selector diatas akan menyekesi semua tag h1 dan menggati ukuran font menjadi 12px dan
warnanya menjadi biru. Hanya dengan 1 baris kode tersebut secara ajaib semua teks yang
berada pada tag <h1> akan berubah secara otomatis.

25 | P a g e

Setiap deklarasi akan berisi property and a value. property adalah atribut dari style yang ingin
kamu ubah. Dan setiap atribut akan memiliki nilai, misalnya property font-size: memiliki nilai 12
pixel.
Contoh CSS
Deklarasi CSS selalu diakhiri dengan semicolon/titik koma (;), dan deklarasi dari grup property
(apabila ada banyak property) berada didalam tanda kurung siku {},:
p {color:red;text-align:center;}
Untuk membuat CSS lebih mudah dibaca,kita dapat memisahkan property pada setiap bari,
seperti berikut:
Contoh
p
{
color:red;
text-align:center;
}

Komentar pada CSS
Komentar digunakan untuk menjelaskan kode yang dibuat, dan sangat berguna ketika kamu
ingin mengedit source codenya. Komentar tidak akan dibaca oleh browser.
Komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti ini:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

Id (#) and class (.) Selectors
Untuk mengatur style pada elemen HTML, CSS mengijinkan kita untuk membuat sendiri
selektor yang sering disebut "id" and "class".
id Selector
Id selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik.

26 | P a g e

Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" pada
CSS.
Contoh
HTML : <div id="header">
Pada file CSS nya #header { properti yang ingin diberikan}
Jangan memmulai nama ID dengan angka/nomor! Karena tidak akan berkerja pada
Mozilla/Firefox.
class Selector
Class selektor digunakan untuk menspesifikasikan style dari kumpulan element-element HTML
(group elements). Tidak seperti selektor id, selektor class lebih sering digunakan pada
beberapa elemen.
Selektor class menggunakan atribut "class" pada HTML, dan didefinisikan dengan tanda "."
pada CSS.
Pada contoh berikut, semua elemen HTML dengan class="center" akan menjadi rata tengah:
Example
.center {text-align:center;}
Kamu juga dapat menspesifikasikan elemen mana yang ingin dirubah. Misalnya kita hanya ingin
melakukan perubahan pada teks yang berada pada tag <p> dengan class center.
Pada contoh berikut, semua elemen p dengan class="center"akan menjadi rata tengah:
Example
p.center {text-align:center;}
Jangan memulai nama class dengan angka/nomor! Karena ini hanya suport pada internet
explorer.
Ketika browser membaca style sheet, maka browser akan memformat document berdasarkan
style sheet tersebut.

Tiga cara memasukkan CSS
Ada 3 cara untuk memasukkan style sheet kedalam dokumen HTML:
 External style sheet
 Internal style sheet
 Inline style

External Style Sheet
External style sheet idealnya digunakan untuk mengatur format bebarapa dokumen HTML
.dengan external style sheet, kita dapat mengubah format seluruh halaman web dengan
27 | P a g e

mengedit 1 file css saja.setiap halaman harus memberi link ke file css dengan menggunakan tag
<link>. Didalam tag <link> masukkan koding berikut:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
External style sheet dapat ditulis dengan menggunakan teks editor apa saja.didalam file css
tidak tedapat tag HTML. Style sheet seharusnya disimpan dengan ekstensi .css.contoh dari file
style sheet seperti berikut:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Jangan gunakan spasi antara property value dan unitsnya! contoh "margin-left:20 px" antar
20 dan px ada spasi (seharusnya "margin-left:20px") ini bekerja di IE, tetapi tidak di Firefox atau
Opera.

Internal Style Sheet
Internal style sheetdigunakan ketika sebuah dokumen memiliki style yang unik. Kamu
mendefinisikan style sheetdibagian <head> pada halaman HTML, dengan menggunakan tag
<style>,seprti ini:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
Untuk menggunakan inline styes sheet, kita menggunakan attibut style pada elemen tag HTM L
yang ingin diubah style nya. Atribut style dapat berisi : CSS property. contoh berikut
menunjukkan bagaimana cara meriubah warna left margin dari paragraf:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Margin dan Padding pada CSS

28 | P a g e

Margin dan padding merupakan hal yang mirip tetapi berbeda. Fugsi nya sama-sama untuk
memberi jarak darisatu elemen ke elemen lainnya untuk merapikan dokumen. Agar lebih jelas
lihat gambar.
Contoh padding :
Padding-left:10px; Padding-top:10px;
Elemen2 yang berisi isi teksteks
teks teks tekks tk tek kase
tksteks teks Padding-right:10px;
Padding-bottom:10px;

Contoh Margin :

margin-left:10px; margin-top:10px;

Elemen2 yang berisi isi teksteks
teks teks tekks tekks tekks tekks
tksteks teks
margin-bottom:10px; margin-right:10px;

Jelaslah bahwa padding memberikan jarak antara border dan content ( isi dari elemen
tersebut). Sedangkan margin memberikan jarak antara border elemen dengan bagian luar dari
elemen
Kita juga dapat melakukan seperti ini
- padding:25px 50px 75px 100px; artinya :
 top padding 25px
 right padding 50px
 bottom padding 75px
 left padding 100px
- padding :25px; berarti semua padding baik top bottom left right bernilai 25px;

Selektor pada CSS
Di dalam CSS, selectors merupakan pola yang digunakan untuk menseleksi elemen yang ingin
dirubah style nya.
29 | P a g e

Berikut tabel lengkap tentang selektor pada CSS.
Selector Example Example description CSS
.intro Selects all elements with class="intro" 1
#firstname Selects the element with id="firstname" 1
* Selects all elements 2
element p Selects all <p> elements 1
element,element div,p Selects all <div> elements and all <p> elements 1
element element div p Selects all <p> elements inside <div> elements 1
Selects all <p> elements where the parent is a <div>
element>element div>p 2
element
Selects all <p> elements that are placed immediately after
element+element div+p 2
<div> elements
attribute] [target] Selects all elements with a target attribute 2
attribute=value] [target=_blank] Selects all elements with target="_blank" 2
Selects all elements with a title attribute containing the
attribute~=value] [title~=flower] 2
word "flower"
Selects all elements with a lang attribute value starting
attribute|=language] [lang|=en] 2
with "en"
a:link Selects all unvisited links 1
:visited a:visited Selects all visited links 1
:active a:active Selects the active link 1
:hover a:hover Selects links on mouse over 1
input:focus Selects the input element which has focus 2
letter p:first-letter Selects the first letter of every <p> element 1
line p:first-line Selects the first line of every <p> element 1
Selects every <p> elements that is the first child of its
child p:first-child 2
parent
:before p:before Insert content before every <p> element 2
p:after Insert content after every <p> element 2
Selects every <p> element with a lang attribute value
language) p:lang(it) 2
starting with "it"

CSS Properties
CSS Property Groups
 Background  Generated content  Positioning
 Border and outline  List  Print

30 | P a g e

 Dimension  Margin  Table
 Font  Padding  Text
CSS propertis digunakan untuk mengatur propertis dari halaman seperti background , font,
margin halaman, padding dll. (lebih lengkap di : http://w3schools.com

Background Properties
Property Description CSS
background Sets all the background properties in one declaration 1
Mengatur apakah background akan tetap (tidak bergerak) ketika di
background-attachment scrool. Atau bergerak. Contoh: 1
background-attachment: fixed;
Sets the background color of an element. Contoh :
background-color 1
Background-color : #efefef;
Sets the background image for an element. Contoh :
background-image 1
background-image: url(images/distroonline.com_02a.gif);
Sets the starting position of a background image.
background-position 1
background-position:center;
Sets how a background image will be repeated. Contoh :
background-repeat 1
Background-repeat: repeat-x;

Border and Outline Properties
Sets all the border properties in one declaration. Contoh:
border 1
Border: 1px #000000 solid;
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 1
border-bottom-style Sets the style of the bottom border 1
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 1
border-left-style Sets the style of the left border 1
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 1
border-right-style Sets the style of the right border 1
border-right-width Sets the width of the right border 1

31 | P a g e

border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 1
border-top-style Sets the style of the top border 1
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2

Dimension Properties
height Sets the height of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
width Sets the width of an element 1

Font Properties
font Sets all the font properties in one declaration 1
Specifies the font family for text
font-family 1

font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
Specifies whether or not a text should be displayed in a small-caps
font-variant 1
font
font-weight Specifies the weight of a font 1

List Properties
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
Specifies if the list-item markers should appear inside or outside the
list-style-position 1
content flow

32 | P a g e

list-style-type Specifies the type of list-item marker 1

Margin Properties
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1

Padding Properties
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1

Positioning Properties
bottom Sets the bottom margin edge for a positioned box 2
Specifies which sides of an element where other floating elements
clear 1
are not allowed
clip Clips an absolutely positioned element 2
cursor Specifies the type of cursor to be displayed 2
display Specifies the type of box an element should generate 1
float Specifies whether or not a box should float 1
left Sets the left margin edge for a positioned box 2
overflow Specifies what happens if content overflows an element's box 2
position Specifies the type of positioning for an element 2
right Sets the right margin edge for a positioned box 2
top Sets the top margin edge for a positioned box 2
visibility Specifies whether or not an element is visible 2
z-index Sets the stack order of an element 2

Print Properties

33 | P a g e

Sets the minimum number of lines that must be left at the bottom of
orphans 2
a page when a page break occurs inside an element
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
Sets the minimum number of lines that must be left at the top of a
widows 2
page when a page break occurs inside an element

Table Properties
border-collapse Specifies whether or not table borders should be collapsed 2
border-spacing Specifies the distance between the borders of adjacent cells 2
caption-side Specifies the placement of a table caption 2
Specifies whether or not to display borders and background on empty
empty-cells 2
cells in a table
table-layout Sets the layout algorithm to be used for a table 2

Text Properties
color Sets the color of text 1
direction Specifies the text direction/writing direction 2
letter-spacing Increases or decreases the space between characters in a text 1
line-height Sets the line height 1
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
unicode-bidi 2
vertical-align Sets the vertical alignment of an element 1
white-space Specifies how white-space inside an element is handled 1
word-spacing Increases or decreases the space between words in a text 1

34 | P a g e

Make Your Personal Website!
Untuk membuat sebuah website personal yang sederhana pertama kamu mesti paham dulu
konsep dari website tersebut. Umumnya website dibagi menjadi3 bagian, Header, Content, dan
Footer.

HEADER

CONTETNT

FOOTER

Untuk membagi halaman web menjadi 3 bagian (header, content, footer). Bisa
menggunakan tag <table>, namun hal ini tidak disarankan, karena akan sulit untuk kedepannya
apabila ingin membuat website 3 colom atau membuat bagian baru lagi di halaman web.
Cara lain yaitu dengan menggunakan CSS. Pada tahap ini akan dijelaskan step by step
membuat web personal dengan css.
1. Pertama sediakan sebuah file html yang memuat link file css. Save dengan nama
personal.html
<html>
<head>
<title>Personal WEB</title>
</head>
<link href="webstyle.css" rel="stylesheet" type="text/css"/>
<body leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
</body>

35 | P a g e

</html>
Penjelasan : href="webstyle.css" adalah nama file css yang kita gunakan.

2. Selanjutnya pada bagian body, bagi halaman menjadi 3 bagian dengan cara memberi tag
<div>
<body leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
Fungsi tag <div> adalah untuk membagi halaman menjadi beberapa bagian. Pada masing-
masing <div> diberi id agar bisa di seleksi pada file css.

3. Buat file css simpan dengan nama "webstyle.css", (letakkan difolder yang sama dengan file
personal.html). buka file css tersebut dan masukkan koding berikut.
#header {
Width:90%; height:50px;
Padding: 10px 5% 10px 5%;
Background-color : #efeffe;
}
Coba save file css kemudian buka personal.html. Lanjutkan dengan mengetik koding
berikut
#footer {
Width:100%; height:50px;
Padding: 10px 0 5px 0;
Text-align:center; Font-size:12px; Color:#ffffff;
Background-color : #3f3f3f;
}
Kemudian berikan property untuk id content di file css.
#content{
Width:1000px; height:450px;
margin:auto;
border-left: 3px #efefff solid;
border-right: 3px #efefff solid;
}
Oke silahkan buka file html kamu dan lihat hasilnya akan seperti ini.
36 | P a g e

Gambar: template web personal dengan css
4. Kemudian beri tulisan pada file HTML kamu
<div id="header"><h2>WEB Personal<h2></div>
<div id="content">Isi dari web ini dapat berupa artikel dan lain lain</div>
<div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div>
Simpan dan refresh file personal.html kamu.
5. Pada bagian content kita akan membuat sebuah form inputan yang akan digunakan ketika
mempelajari php. Lihat koding berikut.
<div id="content">
<form name="form1" action="">
<table>
<tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr>
<tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria
<input type="radio" name="jkel" value="Wanita"> Wanita</td></tr>
<tr> <td>Jurusan </td> <td>
<select name="jurusan">
<option>T Informatika</option>
<option> T Industri </option>
<option> Matematika </option>
<option> Sis Informasi </option>
<option> T Elektro </option>
</select>
</td></tr>

<tr><td> </td> <td><input type="submit" name="submit" value="submit"></td></tr>

37 | P a g e

</table>
</form>
</div>
6. Percantik header dengan menambahkan koding berikut yang bertujuan mengubah format h2 yang
ada didalam tag <div id="header"> pada file css
#header h2 {
font-family : tahoma, verdana, serif;
font-size: 18px;
color : #e33;
}

Hasil WEB Personal

38 | P a g e

BAB V

DATABASE

A. Pendahuluan
1.1Database
Database / basis data, adalah kumpulan informasi yang disimpan di dalam
komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program
komputer untuk memperoleh informasi dari basis data tersebut.
1.2Structured Query Language (SQL)
SQL ( Structured Query Language ) adalah bahasa standar yang digunakan untuk
mengakses server database . Semenjak tahun 70-an bahasa ini telah dikembangkan oleh
IBM, yang kemudian diikuti dengan adanya Oracle, Informix dan Sybase. Dengan
menggunakan SQL, proses akses database menjadi lebih user-friendly dibandingkan
dengan misalnya dBase ataupun Clipper yang masih menggunakan perintah – perintah
pemrograman murni. Beberapa Software yang menggunakan SQL adalah Oracle, MS SQL,
dan MySql. Dan pada modul ini akan membahas dan menggunakan software Mysql.
1.3MySql
Mysql adalah suatu perangkat lunak database relasi (Relational Database
Management System, atau RDBMS) yang juga merupakan server database multi user.
Sebagaimana database system yang lain, mysql juga dikenal hirarky server dengan
database-database. Tiap-tiap database memiliki tabel-tabel. Tiap tabel memiliki field-field.
Dalam Workshop ini kita menggunakan MySQL sebagai SQL server karena berbagai
kelebihannya, antara lain :
 Source MySQL dapat diperoleh dengan mudah dan gratis.
 Pengaksesan database dapat dilakukan dengan mudah.
 Bekerja pada berbagai platform. (tersedia berbagai versi untukberbagai sistem
operasi).
 Memiliki jenis kolom yang cukup banyak sehingga memudahkan konfigurasi.

39 | P a g e

 Memiliki sistem sekuriti yang cukup baik dengan verifikasi host, username ,
password.
1.4Instalasi
Terlampir di Modul Bab I intalasi Xampp dimana mysql langsung terintegrasi di aplikasi
xampp.
B. Penggunaan Aplikasi
2.1Menjalankan Program Mysql.
Sebelum menjalankan mysql terlebih dahulu harus menjalankan service Aphace dan
dan mysql, setelah itu mysql bisa digunakan. Untuk menjalakan service tersebut bisa
dilakukan dengan double-click pada icon xampp control panel yang tampil di desktop
secara default setelah proses installasi aplikasi xampp. Setelah itu klik star pada apache
dan mysql seperti di gambar :

Setelah kedua service running maka program mysql sudah bisa di jalankan. Untuk
menjalankan program Mysql pada xampp di Sistem Operasi Windows ada 2 cara :
 Menggunakan Command Prompt (Console)

40 | P a g e

 Menggunakan Browser (GUI)

a. Menggunakan Command Prompt (Console)
Salah satu cara menjalankan program mysql adalah dengan menggunakan Command
Prompt Pada OS berbasis Windows dengan cara berikut :
1. Buka jendela Command Prompt, Start > Program > Accessories > Command Prompt
2. Pindah ke folder dimana kita menginstall xammp, contoh folder berada di
C:xamppmysqlbin dengan cara mengetikan cd “C:xamppmysqlbin”

3. Setelah Berada di direktori bin ketikan mysql –uroot
-u : User
root : username adalah root
jika pada Command Prompt sudah keluar mysql> ,berarti sudah berhasil masuk ke
dalam mysql tersebut.

4. Melihat seluruh database dengan cara mengetikan show databases;

41 | P a g e

Terlihat beberapa database pada mysql.
5. Untuk keluar dari mysql bisa menggunakan Perintah exit atau q.
b. Menggunakan Browser (GUI)
Cara kedua untuk mengakses mysql pada OS Windows adalah dengan menggunakan
Browser seperti, Firefox, Chrome, Opera . dan IE. Adapun cara untuk mengakses mysql
adalah sebagai berikut :
1. Buka Browser (firefox/chrome/opera/IE)
2. Pada location ketikan http://localhost/phpmyadmin/

42 | P a g e

Pada browser lebih mudah untuk mengakses database dan lain-lainnya. Disan juga
terlihat database apa saja yang ada pada mysql.
3. Jika ingin melihat/menggunakan database cukup dengan menklik database yang
tersedia pada sisi kanan browser.

C. Structured Query Language (SQL)
3.1Data Definition Language (DDL)
DDL adalah perintah yang digunakan untuk mendefinisikan objek pada database seperti
table, field dan lain-lain. Perintah dari kelompok DDL antara lain :
 Membuat (Create) Database.
43 | P a g e

 Menggunakan Database.
 Menghapus Database.
 Membuat Tabel.
 Melihat Struktur Tabel.
 Menghapus Tabel.
 Modifikasi Struktur Tabel.

a. Database
No Perintah Fungsi
1. create database nama_database; Membuat Database
2. Show database; Melihat database yang tersedia
3. Use nama_database; Menggunakan database
4. Drop database nama_database; Menghapus database

b. Table
No Perintah Fungsi
1. create table nama_table ( Membuat table

nama_field tipe(panjang),

nama_field2 tipe(panjang)

);
2. Drop table nama_table; Menghapus table
3. Desc nama_table; Melihat struktur table
4. Alter table nama_table add Menambah field baru

nama_field tipe(panjang);
5. Alter table nama_table modify Mengganti tipe field

nama_field tipedata_baru;

44 | P a g e

6. Alter table nama_tabel change Mengganti nama filed
nama_field_lama nama_field_baru
tipe_databaru;
7. Alter table nama_table drop Mengahapus field
nama_field;

3.2Data Manipulation Language (DML)
DML digunakan untuk memanipulasi data yang terdapat pada database. Perintah-
perintah pada DML mencangkup :
Manipulasi:
 INSERT: mengisi (1 record) data ke tabel
 DELETE: menghapus isi table
 UPDATE: updating data
Query:
 SELECT: menampilkan data tertentu
a. Manipulasi
No Perintah Fungsi
1. insert into nama_table values Input data ke dalam table
(isi_data);

atau

insert into nama_table
(nama_field) values (isi_data);
2. delete from nama_table where Menghapus isi dari teable dengan
kondisi; kondisi tertentu.
3. Delete from nama_table; Menghapus semua isi pada table
4. update nama_table set Mengupdate isi dari salah satu data
tertentu.
nama_field = isi data baru

45 | P a g e

where=kondisi;

b. Query
Select digunakan untuk menampilkan data pada table dalam database kita. Penggunaan
perintah select adalah sebagai berikut:
select nama_field from nama_table;
atau
select * from nama_table;
penggunaan karakter * mereferensikan semua nama field pada table.

Kegunaan fungsi pada perintah select :
Select Berkorespondensi dengan operasi projeksi aljabar relasional.
From Menspesifikasikan daftar relasi (tabel) yang digunakan
Where Berkoresponsi dengan predikat seleksi aljabar relasi berisi predikat
atribut Relasi yang muncul pada klausa from.
Group by Membentuk kelompokkelompok baris dengan nilai kolom yang sama
Having Menyaring kelompok kelompok yang memenuhi suatu syarat (kondisi).
Order by Menspesifikasikan urutan keluaran

Operator perbandingan yang diperbolehkan :
= Samadengan
< Lebih kecil daripada
> Lebih besar daripada
<= Lebih kecil atau samadengan
>= Lebih besar atau samadengan
<> Tidak samadengan (!=)

SQL mempunyai dua simbol khusus untuk pencocokan, yaitu :
% : Menyatakan sembarang barisan nol karakter atau lebih (wildcard).

46 | P a g e

_ : Menyatakansuatu karakter tunggal.

Standart ISO mendefenisikan lima fungsi agregat, yaitu :
COUNT : mengirim jumlah yang kolom tertentunya bernilai
SUM : mengirim jumlah total dari nilainilaidi kolom tertentu
AVG : mengirim rataan dari nilainilaidi kolom tertentu.
MIN : mengirim nilai terkecil di kolom tertentu
MAX : mengirim nilai terbesar di kolom tertentu.

47 | P a g e

BAB VI

PHP

6.1 Dasar-Dasar Pemrograman PHP

6.1.1 Aturan Penulisan Skrip PHP

Dalam penulisan skrip PHP ada berbagai macam aturan yang diberlakukan
diantaranya adalah :

1. Skrip PHP harus diapit dengan tanda <?php … ?> atau <? … ?> atau
<script language=”PHP”>…</script>

2. Menulis Komentar

Penulisan Komentar dapat ditulis dengan awalan // atau awalan # atau /*….. */

Contoh :

3. Penulisan tag PHP dengan HTML

4. Penulisan skrip PHP tanpa HTML

48 | P a g e

5. Menulis tag HTML dengan PHP

6. Setiap statement php diakhiri dengan tanda ( ;) petik koma.

6.1.2 Variabel dan Tipe Data

Variabel adalah suatu tempat untuk menyimpan data dan sewaktu‐waktu data
tersebut dapat digunakan atau ganti dengan data lain. PHP bersifat case sensitive yang
membedakan dan huruf kecil untuk nama variabel. Skrip yang digunakan :
$nama_variabel = nilai_variabel;

Aturan penulisan nama variabel yang benar:

1. Variabel selalu diawali oleh tanda $, lalu diikuti dengan nama variabel yang diinginkan.

2. Hanya ada tiga jenis karakter yang dapat digunakan untuk nama variabel, yaitu huruf,
angka dan garis bawah.

3. Karakter pertama sebuah nama variabel setelah tanda $ harus berupa huruf atau garis
bawah.

4. Jika nama variabel lebih dari satu kata, jangan ada spasi antara keduanya.

49 | P a g e

Dalam php terdapat tipe data dasar yaitu:

1. Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk operasi

matematika.

2. String, untuk data yang berisi karakter, tipe data ini tidak digunakan untuk operasi

matematika.

3. Array, untuk data yang berkelompok. Array memiliki nama variabel yang sama.

Definisi lain dari array adalah kumpulan variabel yang memiliki tipe data yang
sama.

4. Float/ double, untuk data yang berupa pecahan desimal. Untuk menangani operasi

matematika dengan nilai pecahan.

5. Objek, digunakan dengan statement fuction.

6.1.3 Operator Aritmatika

Simbol Operator Fungsi Operator Contoh Penggunaan

+ Melakukan penjumlahan $jumlah = 2 + 4

‐ Melakukan pengurangan $kurang = 4 – 3

* Melakukan perkalian $kali = 4 * 2

/ Melakukan pembagian $hasilbagi = 10 / 2

% Menghasilkan sisa pembagian $sisabagi = 10 % 3

6.1.4 Operator Assignment

50 | P a g e

= Mengisi nilai yang ada di $data = 10 + 2;
sebelah kanan operator
ke
variabel yang terletak di
sebelah kiri operator
+= Menambahkan nilai yang $data = 10;
ada di sebelah kanan $data += 2;
operator ke variabel yang
terletak di sebelah kiri
operator dan hasilnya
akan disimpan
ke variabel itu juga
‐= s.d.a, untuk mengurangkan $data = 14;
$data -= 2;
*= s.d.a, untuk mengalikan $data = 4;
$data *= 3;
/= s.d.a, untuk membagi $data = 24;
$data /= 2;
%= s.d.a, untuk sisa bagi $data = 36;
$data %= 24;

6.1.5 Operator Perbandingan

Simbol Operator Fungsi Operator
== Bernilai true atau 1 jika dua kondisi
yang dibandingkan sama, selain itu
bernilai false atau 0
<> Bernilai true atau 1 jika dua kondisi
yang dibandingkan tidak sama, selain
itu bernilai false atau 0
> Bernilai true atau 1 jika nilai yang di
sebelah kiri lebih besar dari yang di
sebelah kanan, selain itu bernilai false
atau 0
< Bernilai true atau 1 jika nilai yang di
sebelah kanan lebih kecil dari yang di
sebelah kiri, selain itu bernilai false atau 0
>= Bernilai true atau 1 jika nilai yang di
sebelah kiri lebih besar dari atau sama
dengan yang di sebelah kanan,
selain itu bernilai false atau 0
<= Bernilai true atau 1 jika nilai yang di

51 | P a g e

sebelah kanan lebih kecil dari atau
sama dengan yang di sebelah kiri, selain
itu bernilai false atau 0

6.1.6 Operator Logika

&& Bernilai 1 jika kedua $data1 && $data2
kondisi memiliki nilai 1, selain
itu bernilai 0

|| Bernilai 0 jika kedua $data1 || $data2
kondisi memiliki nilai 0, selain
itu bernilai 1

Xor Bernilai 1 jika kedua kondisi sama $data1 Xor $data2
dan 0 jika keduanya tidak sama

! Menghasilkan nilai yang berlawanan. !$data2
Jika 1 akan menjadi 0, sedangkan
0 akan menjadi 1

6.1.7 Array

Contoh :

6.1.8 Percabangan
52 | P a g e

a. IF

IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Cara
penulisannya adalah sebagai berikut:

if (syarat)
{
statement
}

atau:

if (syarat)
{
statement
}
else
{
statement lain
}

atau:

if (syarat pertama)
{
statement pertama
}
elseif (syarat kedua)
{
statement kedua
}
else
{
statement lain
}

b. SWITCH

53 | P a g e

Statement SWITCH digunakan untuk membandingkan suatu variabel dengan
beberapa nilai serta menjalankan statement tertentu jika nilai variabel sama dengan nilai
yang dibandingkan. Struktur Switch adalah sebagai berikut:

switch (variabel)
case nilai:
statement
case nilai:
statemant
case nilai:
statement
.
.
.

6.1.9 Perulangan

a. WHILE

Bentuk dasar dari statement While adalah sebagai berikut:

while (syarat)
{
statement
}

Arti dari statemant While adalah memberikan perintah untuk menjalankan
statement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi.

b. FOR

Cara penulisan statement FOR adalah sebagai berikut:

for (ekspresi1; ekspresi2 ; ekspresi3)

statement

ekspresi1 menunjukkan nilai awal untuk suatu variabel

54 | P a g e

ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant

ekspresi3 menunjukkan pertambahan nilai untuk suatu variabel

6.2 Pemrograman Database dengan PHP

Dalam mengkoneksikan PHP ke database MySQL, dapat dilakukan beberapa fungsi
berikut ini :

a. mysql_connect()

mysql_connect () digunakan untuk melakukan koneksi ke server database MySQL.
Format penulisan :

mysql_connect(nama_host, nama_user, password);

Jika parameter nama host tidak dideklarasikan, otomatis akan berisi localhost. Koneksi ke
database akan secara otomatis terputus pada saat script program selesai dieksekusi
seluruhnya, kecuali diberikan perintah fungsi mysql_close(). Fungsi mysql_connect() akan
menghasilkan nilai true jika koneksi berhasil dilakukan dan nilai false jika gagal.

b. mysql_pconnect()

Fungsi mysql_pconnect() juga digunakan untuk membangun akses ke database, sama
dengan fungsi mysql_connect(). Sedikit perbedaannya adalah jika menggunakan fungsi
mysql_pconnect(), koneksi tidak akan terputus meskipun program telah selesai dieksekusi.

c. mysql_create_db()

Fungsi mysql_create_db() digunakan untuk membuat sebuah database. Biasanya
untuk sebuah aplikasi digunakan sebuah database. Sebuah database akan berisi beberapa
tabel. Format penulisan :

mysql_create_db(“nm_database”);

d. mysql_select_db()

55 | P a g e

Fungsi ini berguna untuk memilih atau mengaktifkan database, seperti dalam
program klien mysql pakai USE . format penulisannya:

mysql_select_db(database,pengenal_hub)

Dalam hal ini database adalah nama database yang digunakan, sedang pengenal_hub
adalah pengenal yang diperoleh dari pemanggilan fungsi mysql_connect().

e. mysql_query()

PHP tidak menyediakan fungsi khusus untuk membuat tabel dengan field-fieldnya,
sehingga untuk membuat tabel data tetap menggunakan sintaks dari program database
MySQL yang digunakan, kemudian sintaks dioperasikan menggunakan fungsi
mysql_query(). Sehingga fungsi mysql_query() adalah menjalankan perintah query yang
terdapat di MySQL.

f. mysql_db_query()

Fungsi ini berfungsi untuk menjalankan suatu permintaan terhadap suatu database

format penulisan :

mysql_db_query(database,permintaan,pengenal_hub)

Dalam hal ini pengenal_hub menyatakan pengenal yang didapat dari fungsi
mysql_connect(), sedangkan adalah nama database yang dipergunakan dan permintaan
adalah perintah SQL.

6.2.1 Koneksi PHP ke Database

Untuk mengakses database dan tabel MySQL, harus dilakukan koneksi terlebih
dahulu. Skrip yang digunakan adalah :

56 | P a g e

Keterangan :

 mysql_connect(hostname, username, password);

Untuk melakukan koneksi ke server database MySQL sesuai dengan nama
host, user dan password yang disediakan.

 mysql_select_db(databasename);

Untuk memilih sebuah database di dalam server database MySQL.

6.2.2 Input Data

Proses input data adalah suatu proses untuk memasukkan data ke dalam tabel. Peri
ntah SQL yang akan digunakan adalah:

INSERT INTO tablename (field1, field2, …) VALUES (data1, data2,
…)

Contoh Skrip:

6.2.3 Menampilkan Data

Untuk melihat hasil data yang telah dimasukkan ke database, maka akan ditampilka
n ke browser. Perintah SQL yang akan digunakan adalah:

SELECT * FROM tablename;

Contoh Script :

57 | P a g e

6.2.4 Redirect (Pengalihan Halaman)

Redirect (pengalihan halaman) adalah teknik untuk mengalihkan alamat atau halam
an web secara otomatis. Perintah untuk redirect adalah:

header("location:filename");

6.2.5 Edit Data

Proses edit data adalah suatu proses untuk mengubah data yang ada dalam tabel. Un
tuk dapat mengubah data, terlebih dahulu harus ditampilkan data yang akan diubah. Perint
ah SQL yang akan digunakan adalah:

SELECT * FROM tablename WHERE keyfield='$id';

Selanjutnya mengubah data ke dalam tabel dengan perintah SQL berikut:

UPDATE tablename SET field1='$data1', field2='$data2', … WHERE

keyfield='$id';

6.2.6 Delete Data

Proses delete data adalah suatu proses untuk menghapus data yang ada dalam tabel.
Untuk dapat menghapus data, digunakan perintah SQL berikut:

DELETE FROM tablename WHERE keyfield='$id';

58 | P a g e

Modul pemrograman web

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Modul pemrograman web (20)

Recently uploaded (20)

Modul pemrograman web