Post on 19-Jan-2015
description
Teknik Informatika UIN SUSKA RIAU
Disusun untuk pelatihan workshop pemrograman web
Oleh: Aritha Handrico, Fauzi Aziz, Khairi Lestari, Novreni Anggraini, R. Sahroni.
Pekanbaru, 21 Mei 2011
MODULPEMROGRAMANWEB
2 | P a g e
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
3 | P a g e
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
4 | P a g e
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
5 | P a g e
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
6 | P a g e
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 ++
7 | P a g e
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
8 | P a g e
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.
9 | P a g e
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
10 | P a g e
Disini akan ada pemilihan tempat penginstalan, biasanya c:\program files\Notepad ++, 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.
11 | 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.
12 | 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,
13 | 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
14 | 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.
15 | 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.
16 | 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.
17 | 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.
18 | 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.
19 | P a g e
BAB IIIHTML
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>
20 | P a g e
Catatan :
Tag <!....> menyatakan komentar, isi teks di dalamnya tidak akan diproses dan
dapat diletakkan di mana saja.
Atribut pada tagSetiap 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 teksTeks 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> <!-- baris pertama -->
<td> Kolom 1 </td> <!-- kolom pertama pada baris pertama --><td> Kolom 2 </td> <!-- kolom kedua pada baris pertama -->
</td> <!--akhir dari baris pertama -->
<tr> <!-- baris kedua --><td> nama </td> <!-- kolom pertama pada baris kedua --><td> alamat </td> <!-- kolom kedua pada baris kedua -->
</td> <!--akhir dari baris kedua --></table> <!--akhir dari tabel -->Setiap tag pembuka baik itu <tr> <td> harus ditutup dengan tag penutup </tr> </td>
Membuat formUntuk 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
21 | 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.
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"/>.
<form action="kirim.php" method=POST>Nama <input type="text" size="24" name="nm"/> <br> <!--input berupa teks-->Jenis kelamin <input type="radio" name="jkel" value="pria"/> Pria <input type="radio" name="jkel" value="wanita"/> Wanita <br> <!--input berupa radio-->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>
22 | P a g e
Daftar Tag Pada HTML
Tag Deskripsi fungsiBasic<!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 KomentarFormatting<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 bawahForms<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
23 | P a g e
Images<img /> Mendefinisikan sebuah gambar<map> Mendefinisikan gambar map<area /> Mendefinisikan area didalam gambar mapLinks<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 listTables<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 tabelStyles<style> Mendefinisikan informasi style pada dokumen<div> Mendefinisikan bagian-bagian dokumen<span> Mendefinisikan bagian-bagian dukumenMeta 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 pageProgramming<script> Mendefinisikan script sisi klien
<noscript> Defines an alternate content for users that do not support client-side scripts
<applet> Deprecated. Defines an embedded applet<object> Defines an embedded object
<param /> Defines a parameter for an object
24 | P a g e
BAB IVCSS (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 sheetterdiri 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 diketahuiSebelum 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{
25 | P a g e
font-family:"Times New Roman";font-size:20px;}
Styles Dapat Menyelesaikan Permasalahan Yang BesarHTML 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.
26 | 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 CSSDeklarasi 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:
Contohp{color:red;text-align:center;}
Komentar pada CSSKomentar 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 (.) SelectorsUntuk mengatur style pada elemen HTML, CSS mengijinkan kita untuk membuat sendiri selektor yang sering disebut "id" and "class".
id SelectorId selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik.
27 | 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 SelectorClass 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:
Examplep.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
28 | 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
29 | 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 :
Contoh Margin :
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.
Elemen2 yang berisi isi teksteks teks teks tekks tk tek kase tksteks teks
Padding-left:10px; Padding-top:10px;
Padding-right:10px;Padding-bottom:10px;
Elemen2 yang berisi isi teksteks teks teks tekks tekks tekks tekks tksteks teks
margin-top:10px;
margin-right:10px;margin-bottom:10px;
margin-left:10px;
30 | 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
element>element div>pSelects all <p> elements where the parent is a <div> element
2
element+element div+pSelects all <p> elements that are placed immediately after <div> elements
2
attribute] [target] Selects all elements with a target attribute 2
attribute=value] [target=_blank] Selects all elements with target="_blank" 2
attribute~=value] [title~=flower]Selects all elements with a title attribute containing the word "flower"
2
attribute|=language] [lang|=en]Selects all elements with a lang attribute value starting with "en"
2
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
child p:first-childSelects every <p> elements that is the first child of its parent
2
:before p:before Insert content before every <p> element 2
p:after Insert content after every <p> element 2
language) p:lang(it)Selects every <p> element with a lang attribute value starting with "it"
2
CSS PropertiesCSS Property Groups
Background
Border and outline
Generated content
List
Positioning
31 | P a g e
Dimension
Font
Margin
Padding
Table
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
background-attachmentMengatur apakah background akan tetap (tidak bergerak) ketika di scrool. Atau bergerak. Contoh:background-attachment: fixed;
1
background-colorSets the background color of an element. Contoh :Background-color : #efefef;
1
background-imageSets the background image for an element. Contoh :background-image: url(images/distroonline.com_02a.gif);
1
background-positionSets the starting position of a background image.background-position:center;
1
background-repeatSets how a background image will be repeated. Contoh :Background-repeat: repeat-x;
1
Border and Outline Properties
Property Description CSS
borderSets all the border properties in one declaration. Contoh:Border: 1px #000000 solid;
1
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
32 | 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
Property Description CSS
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
Property Description CSS
font Sets all the font properties in one declaration 1
font-familySpecifies the font family for text
1
font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
font-variantSpecifies whether or not a text should be displayed in a small-caps font
1
font-weight Specifies the weight of a font 1
List Properties
Property Description CSS
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
list-style-positionSpecifies if the list-item markers should appear inside or outside the content flow
1
33 | P a g e
list-style-type Specifies the type of list-item marker 1
Margin Properties
Property Description CSS
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
Property Description CSS
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
Property Description CSS
bottom Sets the bottom margin edge for a positioned box 2
clearSpecifies which sides of an element where other floating elements are not allowed
1
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
Property Description CSS
34 | P a g e
orphansSets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
2
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
widowsSets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
2
Table Properties
Property Description CSS
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
empty-cellsSpecifies whether or not to display borders and background on empty cells in a table
2
table-layout Sets the layout algorithm to be used for a table 2
Text Properties
Property Description CSS
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
35 | 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.
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>
HEADER
CONTETNT
FOOTER
36 | 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.
37 | P a g e
Gambar: template web personal dengan css4. 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>
38 | 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
39 | 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.
40 | 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)
41 | 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:\xampp\mysql\bin dengan cara mengetikan cd “C:\xampp\mysql\bin”
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;
42 | 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/
43 | 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.
44 | 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 (
nama_field tipe(panjang),
nama_field2 tipe(panjang)
);
Membuat table
2. Drop table nama_table; Menghapus table
3. Desc nama_table; Melihat struktur table
4. Alter table nama_table add
nama_field tipe(panjang);
Menambah field baru
5. Alter table nama_table modify
nama_field tipedata_baru;
Mengganti tipe field
45 | P a g e
6. Alter table nama_tabel change
nama_field_lama nama_field_baru
tipe_databaru;
Mengganti nama filed
7. Alter table nama_table drop
nama_field;
Mengahapus 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
(isi_data);
atau
insert into nama_table
(nama_field) values (isi_data);
Input data ke dalam table
2. delete from nama_table where
kondisi;
Menghapus isi dari teable dengan
kondisi tertentu.
3. Delete from nama_table; Menghapus semua isi pada table
4. update nama_table set
nama_field = isi data baru
Mengupdate isi dari salah satu data
tertentu.
46 | 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).
47 | 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.
48 | 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
49 | 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.
50 | 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
Simbol Operator Fungsi Operator Contoh Penggunaan
51 | P a g e
= Mengisi nilai yang ada disebelah kanan operatorkevariabel yang terletak disebelah kiri operator
$data = 10 + 2;
+= Menambahkan nilai yangada di sebelah kananoperator ke variabel yangterletak di sebelah kirioperator dan hasilnyaakan disimpanke variabel itu juga
$data = 10; $data += 2;
‐= 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 itubernilai false atau 0
<> Bernilai true atau 1 jika dua kondisiyang dibandingkan tidak sama, selainitu bernilai false atau 0
> Bernilai true atau 1 jika nilai yang disebelah kiri lebih besar dari yang disebelah kanan, selain itu bernilai false atau 0
< Bernilai true atau 1 jika nilai yang disebelah kanan lebih kecil dari yang disebelah kiri, selain itu bernilai false atau 0
>= Bernilai true atau 1 jika nilai yang disebelah kiri lebih besar dari atau samadengan yang di sebelah kanan,selain itu bernilai false atau 0
<= Bernilai true atau 1 jika nilai yang di
52 | P a g e
sebelah kanan lebih kecil dari atausama dengan yang di sebelah kiri, selainitu bernilai false atau 0
6.1.6 Operator Logika
Simbol Operator Fungsi Operator Contoh Penggunaan&& Bernilai 1 jika kedua
kondisi memiliki nilai 1, selainitu bernilai 0
$data1 && $data2
|| Bernilai 0 jika keduakondisi memiliki nilai 0, selainitu bernilai 1
$data1 || $data2
Xor Bernilai 1 jika kedua kondisi samadan 0 jika keduanya tidak sama
$data1 Xor $data2
! Menghasilkan nilai yang berlawanan.Jika 1 akan menjadi 0, sedangkan0 akan menjadi 1
!$data2
6.1.7 Array
Contoh :
6.1.8 Percabangan
53 | 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
54 | 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
55 | 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()
56 | 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 :
57 | 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 :
58 | 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';
59 | P a g e