Modul pemrograman web

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> 

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

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

Print

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


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


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

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


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


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

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


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


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


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

Modul pemrograman web

Education

Transcript of Modul pemrograman web