emp4tbelas

DAFTAR ISI
BAB 1 : 1.1 1.2 1.3 1.3.1 1.3.2 1.4 1.5 BAB 2 : 2.1 2.2 2.2.1 2.2.2 2.3 2.4 2.4.1 2.5 2.5.1 2.5.2 2.5.3 2.5.4 2.6 Pengenalan Internet......................................................................................6 Pengertian Internet..........................................................................................7 Sejarah Internet...............................................................................................7 Situs Web dan Halaman Web...........................................................................8 Halaman Web............................................................................................8 Situs Web...................................................................................................8 Cara Kerja Halaman Web.................................................................................8 Macam Macam Halaman Web..........................................................................9 Menggunakan HTML....................................................................................10 Pengertian dan Sejarah HTML........................................................................11 Bersiap-Siap...................................................................................................12 Alternatif Text Editor................................................................................13 Alternatif Web Browser............................................................................14 Halo, Dunia!................................................................................................15 Struktur Dokumen HTML................................................................................16 Mengunjungi Kembali Halo, Dunia!.......................................................18 Bekerja dengan Teks......................................................................................18 Membuat Paragraf...................................................................................19 Membuat Judul.........................................................................................19 Membuat Daftar.......................................................................................20 Memformat Teks......................................................................................22 Bekerja dengan Link.......................................................................................28 1

emp4tbelas

emp4tbelas

2.7 2.8 2.9 2.10 BAB 3 : 3.1 3.2 3.3 3.3.1 3.3.2 3.4 3.5 3.6 3.7 3.8 3.9 BAB 4 : 4.1 4.1.1 4.1.2 BAB 5 : 5.1 5.2 5.3

Bekerja dengan Gambar................................................................................30 Bekerja dengan Tabel....................................................................................31 Bekerja dengan Formulir................................................................................33 Bekerja dengan Peta...................................................................................36 Menggunakan CSS......................................................................................39 Pengertian CSS...............................................................................................40 Membuat dan Menghubungkan File CSS........................................................40 Aturan CSS.....................................................................................................42 Selector....................................................................................................42 Property dan Value..................................................................................44 Menggunakan Warna.....................................................................................44 Memformat Teks............................................................................................46 Memberikan Margin........................................................................................48 Memberikan Border dan Padding...................................................................49 Menggunakan Pseudo-Class...........................................................................50 Menggunakan Gambar Latar..........................................................................52 Mengatur Tata Letak Halaman Web............................................................54 Membuat Kolom.............................................................................................55 Kolom untuk Tata Letak...........................................................................55 Kolom untuk Teks....................................................................................59 Pengenalan Basis Data................................................................................62 Pengertian Basis Data....................................................................................63 Komponen dalam Basis Data.........................................................................63 Relasi antar Tabel..........................................................................................64 emp4tbelas 2

emp4tbelas

5.3.1 5.3.2 5.3.3 BAB 6 : 6.1 6.2 6.3 6.3.1 6.3.2 6.3.3 6.4 6.4.1 6.4.2 6.4.3 6.4.4 6.5 6.5.1 BAB 7 : 7.1 7.2 7.3 7.4 7.4.1 7.5

One-to-One Relationship..........................................................................65 One-to-Many Relationship........................................................................65 Many-to-Many Relationship......................................................................65 Menggunakan SQL......................................................................................67 Pengertian SQL...............................................................................................68 Bekerja dengan Skema..................................................................................68 Bekerja dengan Tabel....................................................................................68 Membuat Tabel........................................................................................69 Mengubah Tabel......................................................................................70 Menghapus Tabel.....................................................................................71 Bekerja dengan Data......................................................................................72 Memasukkan Data...................................................................................72 Mengambil Data.......................................................................................72 Mengubah Data........................................................................................75 Menghapus Data......................................................................................75 Menggunakan phpMyAdmin...........................................................................76 Bekerja dengan Pengguna.......................................................................76 Menggunakan PHP......................................................................................80 Pengertian PHP...............................................................................................81 Halo, Dunia!...................................................................................................81 Mendokumentasikan Dokumen PHP...............................................................83 Menggunakan Variabel...................................................................................84 Tipe Data dalam Variabel.........................................................................86 Berkerja dengan Angka..................................................................................87 emp4tbelas 3

emp4tbelas

7.6 7.7 7.8 7.9 7.10

Bekerja dengan String....................................................................................88 Bekerja dengan Tanggal dan Waktu..............................................................90 Memproses Formulir.......................................................................................92 Membuat Halaman Dinamis...........................................................................94 Menggunakan Array....................................................................................96 Map.......................................................................................................97 Array Multidimensi................................................................................98 Mengatur Alur program...............................................................................99 Menggunakan Kondisi.........................................................................100 Menggunakan Percabangan................................................................102 Menggunakan Pengulangan................................................................106 Menggunakan Fungsi................................................................................110 Menghubungkan PHP dengan Basis Data..................................................112 Membuat Koneksi.........................................................................................112 Mengambil Data...........................................................................................114 Memasukkan Data........................................................................................118 Mengubah Data............................................................................................120 Menghapus Data..........................................................................................123 Lebih Lanjut dengan PHP..........................................................................125 Menggunakan Session..................................................................................126 Menerima Upload Berkas.............................................................................130 Mengirim E-Mail............................................................................................131 Mendeploy Situs Web.............................................................................132 Membuat Akun..........................................................................................133 emp4tbelas 4

7.10.1 7.10.2 7.11 7.11.1 7.11.2 7.11.3 7.12 BAB 8 : 8.1 8.2 8.3 8.4 8.5 BAB 9 : 9.1 9.2 9.3 BAB 10 : 10.1

emp4tbelas

10.2 10.3

Mendeploy Basis Data...............................................................................137 Mendeploy Situs Web................................................................................141

Mendeploy Situs Web

emp4tbelas

emp4tbelas

BAB 1:PENGENALAN INTERNET

emp4tbelas

emp4tbelas

1.1 PENGERTIAN INTERNET

Internet adalah gabungan dari banyak jaringan-jaringan komputer yang terhubung secara global, mulai dari jaringan komputer pribadi perseorangan, perusahaan, pendidikan, hingga pemerintahan. Internet digunakan untuk saling bertukar informasi antara sebuah komputer dengan komputer lainnya di berbagai belahan dunia dengan sangat cepat.

1.2 SEJARAH INTERNET

Cikal bakal internet berasal dari sebuah proyek yang dilaksanakan oleh DARPA (Defense Advanced Research Project Agancy), sebuah agensi dari departemen pertahanan Amerika Serikat pada tahun 1958. Proyek ini bertujuan untuk menghubungkan komputer-komputer yang terdapat pada setiap markas militer tentara Amerika Serikat sehingga proses komunikasi dan manajemen informasi dapat terlaksana dengan lebih baik. Jaringan komputer antar markas tersebut dikenal dengan nama ARPANET. Melihat kesuksesan dari ARPANET dalam mempercepat proses komunikasi jarak jauh, dunia bisnis mulai tertarik dan berusaha untuk membuat jaringan yang serupa. Pada Maret 1976, ITU (International Telecommunication Union), sebuah organisasi internasional yang berfungsi untuk mengatur standar komunikasi, meresmikan sebuah protokol yang dinamakan X.25. Protokol ini berfungsi untuk menetapkan standar komunikasi antar komputer melalui kabel telepon. Protokol ini pertama kali digunakan oleh Kantor Pos Inggris, Western Union, dan Tymnet pada tahun 1978. Dalam waktu singkat, protokol X.25 berkembang dengan pesat dan mulai menjangkau konsumen pribadi pada tahun 1979. Walaupun begitu, layanan yang disediakan hanyalah berupa layanan surat elektronik (e-mail) dan papan pesan (BBS/Bulletin Board System). Sekitar tahun 1980, protokol TCP/IP telah berkembang menjadi sebuah protokol standar yang dapat digunakan oleh setiap komputer, dan secara efektif telah menggeser protokol-protokol komunikasi lainnya yang pada saat itu saling berbeda-beda tergantung dari masing-masing produsen komputer. Walaupun begitu, proses komunikasi yang terjadi antara satu komputer dengan komputer lainnya masih bersifat terbatas dan internal saja. Internet yang seperti dikenal sekarang ini dipelopori oleh seorang ahli fisika dari Inggris yang bernama Tim Berners-Lee dari CERN, sebuah lembaga penelitian tenaga nuklir Eropa. Pada awalnya ia ingin mempermudah proses pertukaran informasi penelitian antara satu lembaga dengan lembaga lainnya. Untuk mencapati tujuannya, ia memulai sebuah proyek yang dinamakan World Wide Web (WWW), yaitu sebuah sistem yang 2

emp4tbelas

emp4tbelas

dapat digunakan untuk bertukar informasi tidak hanya melalui surat eletronik dan papan pesan tetapi juga melalui halaman-halaman atau artikel-artikel yang dapat dengan mudah dibaca oleh setiap orang seperti halaman web yang dikenal sekarang ini. Pada saat ini, World Wide Web telah berkembang sangat pesat dan merevolusi proses komunikasi yang telah ada. Pada tahun 2010, diperkirakan ada 1.97 miliar orang pengguna internet aktif.

1.3 SITUS WEB DAN HALAMAN WEB

Jika berbicara mengenai internet, tentunya situs web (website) dan halaman web (webpage) adalah istilah-istilah yang tidak dapat dipisahkan. Namun tahukan Anda bahwa keduanya adalah hal yang sangat berbeda?

1.3.1 HALAMAN WEB

Halaman web adalah sebuah dokumen yang paling umum dan paling penting di dalam internet. Halaman web berisikan berbagai macam informasi dalam berbagai bentuk dan media. Mulai dari teks, gambar, audio, video dan bahkan media interaktif. Halaman web pada umumnya menggunakan format dokumen HTML (Hypertext Markup Language) yang akan Anda pelajari pada bab selanjutnya. Untuk menampilkan sebuah halaman web, Anda akan memerlukan sebuah aplikasi khusus yang dikenal dengan istilah peramban web (web browser). Aplikasi peramban akan mengambil halaman yang Anda inginkan dari internet dan menampilkannya pada layar monitor dari komputer Anda. Halaman web pada umumnya juga saling terhubung dengan halaman web lainnya melalui sebuah tautan (link) yang dikenal dengan istilah hyperlink.

1.3.2 SITUS WEB

Jika halaman web diibaratkan sebagai sebuah halaman, maka situs web dapat diibaratkan sebagai sebuah buku. Sebuah situs web memiliki banyak halaman web yang memiliki informasi yang serupa dan saling berhubungan. Sebagai contoh, situs web dari Universitas Indonesia memiliki halaman-halaman web yang berisikan informasi tentang berbagai progam studi yang terdapat pada Universitas Indonesia. Situs web Universitas Indonesia tentunya tidak memiliki informasi tentang harga mobil dari produsen Toyota.

1.4 CARA KERJA HALAMAN WEB

emp4tbelas

emp4tbelas

Apabila Anda membuka sebuah halaman web dengan menggunakan peramban web Anda, maka secara garis besar akan terjadi proses sebagai berikut : 1. Anda memasukkan URL dari halaman web yang inginkan Anda buka pada peramban web Anda. 2. Peramban web akan mencari alamat server dari situs web yang memiliki halaman web tersebut 3. Peramban web akan meminta halaman web yang Anda inginkan dari server tersebut. 4. Server akan memproses permintaan tersebut dan mengirimkan hasilnya kepada peramban web. 5. Peramban web akan memproses data yang didapatkan dari server tersebut dan menampilkannya pada layar monitor.

1.5 MACAM MACAM HALAMAN WEB

Pada dasarnya, ada dua macam halaman web, yaitu halaman web statis dan halaman web dinamis. Sesuai dengan namanya, isi atau konten yang terdapat pada halaman web statis bersifat tetap dan tidak berganti-ganti, sedangkan isi atau konten yang terdapat pada halaman web dinamis akan berganti-ganti sesuai dengan kondisi dan/atau keadaan tertentu. Sebagai contoh, apabila Anda membuka halaman web dari situs surat elektronik seperti Gmail, maka halaman tersebut akan menampilkan surat-surat yang Anda memiliki. Sedangkan apabila teman Anda membuka halaman web yang sama, maka surat-surat yang akan ditampilkan adalah surat-surat yang dimiliki oleh teman Anda. Inilah yang dimaksud dengan halaman web dinamis, satu halaman yang sama tetapi dapat menampilkan isi atau konten yang berbeda. Sebuah halaman web dinamis memerlukan sebuah skrip atau program yang akan dijalankan pada server web untuk menentukan konten yang akan dimasukkan ke dalam halaman web. Ada banyak bahasa pemrograman yang dapat digunakan untuk melakukan hal ini, salah satu di antaranya yang paling populer adalah PHP (PHP: Hypertext Preprocessor). Selain PHP, ada pula bahasa-bahasa lainnya seperti ASP.NET, Perl, Python, Ruby, Java, ColdFusion, dan sebagainya.

emp4tbelas

emp4tbelas

BAB 2:MENGGUNAKAN HTML

emp4tbelas

emp4tbelas

2.1 PENGERTIAN DAN SEJARAH HTML

Jika Anda ingin membuat sebuah halaman web, maka bahasa HTML adalah sebuah bahasa yang harus Anda pelajari. Semua halaman web yang Anda temui di dalam jaringan Internet sebenarnya adalah sebuah dokumen teks yang dibuat dengan menggunakan bahasa HTML. Dokumen teks HTML tersebut selanjutnya akan diterjemahkan oleh aplikasi web browser menjadi sebuah rangkaian teks, gambar, audio, dan bahkan video yang Anda kenali sebagai sebuah halaman web. HTML sendiri adalah kepanjangan dari HyperText Markup Language, yang memiliki arti sebagai beikut : Hyper Dalam bahasa Inggris berarti sesuatu yang sangat aktif. Hal ini memiliki maksud bahwa HTML adalah sebuah bahasa yang dapat membawa Anda kemana saja dan kapan saja dalam dunia maya. Text Menandakan bahwa HTML adalah suatu kumpulan dari teks. Markup Bahasa HTML adalah sebuah bahasa markup, yaitu sebuah bahasa yang dapat digunakan untuk memberikan markup atau keterangan tambahan pada sesuatu. Misalkan, huruf yang bercetak tebal, keterangan warna, paragraf, gambar, dan sebagainya. Language Seperti namanya, HTML adalah sebuah ...bahasa.

HTML pertama kali ditemukan pada tahun 1990 oleh sebuah ahli fisika dari Inggris yang bernama Tim Berners Lee. Pada awalnya, bahasa HTML tidaklah dimaksudkan untuk membuat sebuah halaman web yang seperti Anda kenal seperti sekarang ini. Melainkan, HTML dirancang untuk mempermudah proses pertukaran dokumen dan informasi penelitian antara suatu lembaga penelitian dengan lembaga penelitian lainnya melalui jaringan Internet. Tidak lama setelah bahasa ini ditemukan, para pelaku bisnis mulai tertarik dengan kemampuan yang dimiliki oleh HTML, dan bermaksud untuk menggunakan bahasa tersebut untuk urusan bisnis, seperti untuk beriklan dan memberikan informasiinformasi seputar perusahaannya. Setelah itu, HTML mulai berkembang secara pesat dan menjadi tulang punggung dari Internet pada jaman sekarang. Bahkan, sampai sekarang pun HTML masih terus berkembang dengan pesat.

emp4tbelas

emp4tbelas

Proses perkembangan dari HTML diatur oleh sebuah lembaga internasional yang bernama W3C (World Wide Web Consortium). Lembaga ini berfungsi untuk menjaga agar HTML tetap menjadi sebuah standar internasional sebagai sebuah bahasa untuk membuat halaman web. Dengan adanya standar ini, setiap pembuat web dapat memastikan bahwa halaman web yang telah dibuat olehnya dapat ditampilkan pada setiap pengunjung sesuai dengan keinginannya, tidak peduli perangkat keras atau perangkat lunak apapun yang digunakan oleh pengunjung tersebut. Bahasa HTML yang akan dipelajari dalam buku ini adalah hasil perkembangan yang terbaru dari HTML, yaitu HTML5. Berbeda dengan versi-versi HTML yang sebelumnya seperti HTML 4.01 atau XHTML (eXtended HyperText Markup Language, bahasa HTML yang telah ditambahkan kegunaannya) 1.0 dan 1.1, HTML5 memiliki banyak fitur multimedia terbaru yang dapat membuat sebuah halaman web menjadi lebih menarik dan interaktif. Sekilas, HTML terlihat sebagai sebuah bahasa yang memiliki kemampuan yang hebat. Namun, sebenarnya bahasa HTML memiliki banyak kekurangan dan keterbatasan didalamnya. Oleh karena itu, untuk membuat sebuah halaman web yang menarik, Anda akan memerlukan bahasa-bahasa lain yang dapat digunakan untuk menutupi kekurangan dan keterbatasan yang ada pada HTML. Sebagai contoh, halaman web yang hanya dibuat dengan hanya menggunakan bahasa HTML tidak dapat memiliki tampilan yang menarik. Oleh karena itu, seringkali HTML digabungkan dengan dokumen CSS (Cascading Style Sheet) yang dapat digunakan untuk mempercantik tampilan dari sebuah halaman web. HTML tidak dapat membuat animasi pada halaman web. Untuk ini, dapat digunakan teknologi JavaScript, Flash, atau Silverlight. HTML sendiri juga tidak dapat berinteraksi dengan pengunjung atau menampilkan data-data yang terdapat pada sebuah database. Jika Anda ingin membuat halaman web Anda dapat melakukan hal tersebut, maka Anda perlu menggabungkan HTML dengan sebuah bahasa pemrograman server seperti PHP, ASP, Java, Python, Ruby, dan sebagainya.

1.1 BERSIAP-SIAP
Untuk membuat sebuah halaman web dengan menggunakan bahasa HTML, Anda akan memerlukan dua buah aplikasi yang sangat penting, yaitu aplikasi text editor dan aplikasi web browser. Aplikasi text editor akan digunakan untuk membuat dokumen HTML dimana nantinya Anda akan mengetik kode-kode yang terdapat pada bahasa HTML. Sedangkan aplikasi web browser akan digunakan untuk menampilkan dokumen HTML yang telah Anda buat sebagai halaman web. Untungnya, jika Anda menggunakan sebuah sistem komputer yang menggunakan sistem operasi berbasis Microsoft Windows (versi apa saja, mulai dari Windows 95 sampai Windows 7), Apple Mac OS X, atau bahkan berbagai macam distro dari Linux, Anda sudah memiliki kedua aplikasi tersebut pada komputer Anda.

emp4tbelas

emp4tbelas

Pada sistem operasi Microsoft Windows, Anda sudah memiliki aplikasi Notepad sebagai text editor dan Internet Explorer sebagai web browser. Pada sistem operasi Apple Mac OSX, ada TextEdit sebagai (seperti yang Anda duga) text editor dan Safari sebagai web browser. Jika Anda menggunakan sistem operasi berbasis Linux, pilihannya lebih beragam lagi. Anda mungkin akan memiliki Gedit, Kate, Mousepad, atau Leafpad sebagai text editor Anda tergantung dari distro yang Anda gunakan. Untuk web browser pada Linux, umumnya menggunakan Firefox. Walaupun begitu, apabila Anda merasa aplikasi-aplikasi tersebut masih memiliki kekurangan, tentunya Anda dapat menggunakan aplikasi text editor dan web browser lain yang sesuai dengan keinginan Anda.

1.1.1 ALTERNATIF TEXT EDITOR

Pada dasarnya, Anda dapat menggunakan aplikasi text editor apapun untuk membuat sebuah halaman web dengan menggunakan bahasa HTML. Namun, ada baiknya Anda menggunakan aplikasi text editor yang dikhususkan untuk pemrograman, yaitu aplikasi text editor yang memiliki fitur syntax highlighting dan line numbering. Fitur syntax highlighting atau pewarnaan sintaks/teks adalah suatu fitur utama yang perlu diperhatikan dalam memilih sebuah aplikasi text editor. Dengan adanya fitur ini, kode-kode HTML yang Anda ketikkan akan diberikan warna yang berbeda-beda sesuai dengan fungsinya. Pemberian warna ini dapat digunakan untuk membantu Anda melihat struktur dan mencari kesalahan dari sebuah dokumen HTML. Selain syntax highlighting, fitur lain yang perlu diperhatikan adalah fitur line numbering. Melalui fitur ini, aplikasi text editor akan memberikan nomor baris pada setiap baris kode yang Anda buat. Pada awalnya, fitur ini mungkin terlihat sepele, namun fitur ini akan menjadi sangat berguna setelah Anda mempelajari pemrograman halaman web dengan PHP, karena jika ada suatu kesalahan pada halaman web Anda, PHP akan memberitahukan letak kesalahan tersebut melalui nomor baris. Jika text editor Anda tidak memiliki fitur ini, tentu akan sulit untuk mengetahui letak dari kesalahan tersebut. Mungkin Anda pernah mendengar sebuah aplikasi yang bernama Adobe Dreamweaver atau Microsoft Frontpage (yang notabene sudah berganti nama menjadi Microsoft Expression Web). Pada aplikasi-aplikasi tersebut, Anda dapat membuat sebuah halaman web secara visual dan tanpa perlu mengetahui bahasa HTML, cukup melakukan drag-and-drop komponen tampilan yang Anda inginkan pada halaman web Anda dan program tersebut akan menerjemahkannya menjadi kode-kode HTML secara otomatis. Aplikasi-aplikasi seperti ini dikenal dengan istilah WYSIWYG (What You See Is What You Get). Walaupun terdengar menarik, perlu diperhatikan bahwa penggunaan aplikasi-aplikasi ini tidaklah dianjurkan jika Anda ingin belajar membuat sebuah halaman web dengan emp4tbelas 2

emp4tbelas

menggunakan HTML. Kode HTML yang dibuat secara otomatis oleh WYSIWYG pada umumnya sangatlah berantakan dan tidak memenuhi standar HTML yang ditetapkan oleh W3C, menjadikan halaman web Anda akan memiliki tampilan yang tidak konsisten pada aplikasi web browser yang berbeda-beda. Selain itu, jika Anda tidak memahami struktur dari dokumen HTML yang dibuat secara otomatis tersebut, Anda akan sangat sulit menggabungkan pemrograman PHP pada halaman tersebut. Dalam buku ini, penulis akan menggunakan aplikasi text editor yang bernama Notepad++. Penulis menggunakan aplikasi ini karena aplikasi ini telah memiliki fiturfitur pemrograman yang lengkap, tentu saja, diantaranya adalah fitur syntax highlighting dan line numbering. Selain itu, aplikasi ini juga dapat Anda peroleh dengan gratis, karena aplikasi ini adalah aplikasi yang bersifat open-source. Anda dapat mendapatkan aplikasi ini melalui situs web http://notepad-plus-plus.org/. Selain Notepad++, ada banyak aplikasi text editor sejenis yang dapat Anda peroleh secara gratis, seperti Gedit (http://projects.gnome.org/gedit/), jEdit (http://www.jedit.org/), Komodo Edit (http://www.activestate.com/komodo-edit), Notepad2 (http://www.flos-freeware.ch/notepad2.html), Programmers Notepad (http://www.pnotepad.org/), SciTE (http://www.scintilla.org/SciTE.html), dan banyak lainnya. Pilihlah aplikasi text editor yang paling cocok dengan Anda.

1.1.2 ALTERNATIF WEB BROWSER

Sebagai seorang pembuat web, tentunya Anda ingin situs web Anda diakses oleh banyak orang. Setiap orang yang mengunjungi halaman web Anda tentunya akan menggunakan aplikasi web browser yang berbeda-beda. Ada orang yang menggunakan Firefox, ada yang menggunakan Opera, Safari, Chrome, Internet Explorer, dan sebagainya. Anda haruslah memastikan bahwa halaman web Anda akan tampil dengan baik dan benar sesuai dengan yang Anda inginkan pada setiap aplikasi web browser tersebut. Oleh karena itu, idealnya Anda juga harus memiliki banyak aplikasi web browser untuk mencoba apakah halaman web Anda memiliki tampilan yang konsisten atau tidak. Untungnya, hampir semua aplikasi web browser dapat Anda peroleh dengan gratis. Namun, pastikanlah Anda selalu menggunakan versi terbaru dari aplikasi web browser tersebut. Anda dapat mendapatkan Firefox pada situs http://www.mozilla.com/id/firefox/, Opera pada http://www.opera.com/, Chrome pada http://www.google.com/chrome/, dan Safari pada http://www.apple.com/safari/.

emp4tbelas

emp4tbelas

1.2 HALO, DUNIA!

Sebuah program Halo, Dunia! dapat dikatakan menjadi sebuah tradisi yang tidak dapat dipisahkan dalam mempelajari sebuah bahasa komputer. Program halo dunia pada dasarnya adalah sebuah program yang sangat sederhana, program ini berfungsi untuk menampilkan teks Halo, Dunia! pada layar monitor. Dalam HTML, yang bukan merupakan sebuah bahasa pemrograman, tentunya Anda tidak akan membuat sebuah program halo dunia. Melainkan, karena HTML adalah sebuah bahasa yang digunakan untuk membuat halaman web, maka Anda akan membuat sebuah halaman web yang menampilkan teks Halo, Dunia!. Untuk membuat halaman tersebut, pertama-tama bukalah aplikasi text editor favorit Anda dan buatlah sebuah dokumen HTML yang berisikan kode-kode seperti yang terdapat di bawah ini. Jangan khawatir jika Anda tidak memahami makna dari kodekode HTML tersebut, Anda akan segera mempelajarinya dalam bagian selanjutnya.
<!doctype html> <html> <head> <title>Halo, Dunia!</title> </head> <body> Belajar HTML sangat mudah dan menyenangkan! </body> </html>

Setalah itu. simpanlah dokumen yang telah Anda buat tersebut tersebut dengan nama halo_dunia.html. Anda dapat menyimpan dokumen tersebut dimana saja sesuai dengan keinginan Anda. Perlu diperhatikan disini bahwa Anda harus menyimpan dokumen tersebut dengan ekstensi.html, hal ini ditujukan untuk memberitahukan kepada komputer bahwa dokumen tersebut adalah sebuah dokumen HTML. Jika sudah, bukalah dokumen tersebut dengan menggunakan peramban web Anda dengan melakukan drag-n-drop dari jendela file manager (Windows Explorer jika Anda menggunakan Windows) ke jendela web browser Anda. Jika semua berjalan dengan baik, Anda akan melihat tulisan Belajar HTML sangat mudah dan menyenangkan! pada web browser Anda. Selamat, Anda telah berhasil membuat halaman web pertama Anda!

emp4tbelas

emp4tbelas

1.3 STRUKTUR DOKUMEN HTML

Sebuah halaman web yang dibuat dengan menggunakan HTML pada dasarnya terdiri dari banyak komponen-komponen yang dikenal dengan istilah elemen. Elemen dapat dikatakan sebagai sebuah bagian dari suatu halaman web. Elemen dapat berupa sebuah teks, gambar, link, atau bahkan komponen multimedia seperti audio atau video. Dalam sebuah dokumen HTML, kumpulan dari elemen-elemen ini akan disusun dengan sedemikian rupa sehingga dapat dimengerti dan ditampilkan oleh web browser. Elemen sendiri terdiri dari beberapa bagian, yaitu tag dan konten. Agar dapat lebih memahami bentuk dari sebuah elemen pada sebuah dokumen HTML, perhatikanlah diagram berikut ini : Elemen Start Tag Konten End Tag

<strong >

Googl e

</strong >

Tag adalah sebuah label yang diberikan pada sebuah konten. Tag adalah komponen yang terdapat didalam tanda < dan >. Tag berfungsi untuk memberikan keterangan tambahan terhadap sebuah konten atau isi dari sebuah halaman tambahan. Sebagai contoh, tag <strong></strong> berfungsi untuk memberi keterangan pada web browser bahwa segala sesuatu yang ada di dalamnya akan ditampilkan dengan menggunakan huruf yang bercetak tebal (bold). Pada contoh diatas, teks Google akan ditampilkan dengan cetak tebal. Sebuah tag pada umumnya terdiri dari dua macam, yaitu start tag dan end tag. Start tag dan end tag akan mengawali dan mengakhiri konten yang akan diberikan keterangan tambahan oleh tag tersebut. Pada penulisannya, end tag selalu akan menggunakan simbol garis miring. Sekarang perhatikanlah contoh berikut ini :
<strong>Facebook</strong> Twitter

Pada contoh diatas, teks Facebook akan ditampilkan dengan bercetak tebal, karena terdapat diantara tag <strong></strong>. Sedangkan, teks Twitter tidak akan ditampilkan dengan cetak tebal karena tidak berada di dalam tag <strong></strong>. Walaupun begitu, ada pula beberapa elemen HTML yang tagnya hanya terdiri dari satu buah tag saja, tanpa adanya pasangan start tag dan end tag, sebagai contoh, <br> yang berfungsi untuk membuat baris baru diantara teks. Tag seperti ini dikenal dengan

emp4tbelas

emp4tbelas

istilah self-closing tag karena tag tersebut menutup atau mengakhiri dirinya sendiri dengan sebuah tanda garis miring yang dituliskan sebelum tanda kurung siku penutup. Selain itu, sebuah tag juga dapat memiliki satu atau lebih atribut. Atribut berfungsi untuk memberikan informasi tambahan kepada sebuah elemen. Perhatikanlah diagram berikut ini :

Elemen Start Tag Atribut

Konten

End Tag

< a

href="http://google.co m">

Googl e

</a >

Pada diagram di atas, tag <a></a> berfungsi untuk membuat sebuah link pada halaman web. Penggunaan tag di atas pada sebuah halaman web, akan menghasilkan sebuah link dengan teks Google yang apabila diklik, akan memindahkan Anda ke alamat web http://google.com. Perlu diperhatikan bahwa alamat tujuan http://google.com dituliskan pada sebuah atribut yang bernama href (hypertext reference). Atribut sendiri pada dasarnya terdiri dari dua buah bagian, yaitu name dan value. Pada contoh diatas, href adalah sebuah attribute name sedangkan http://google.com adalah sebuah attribute value. Dalam penulisannya, attribute value diletakkan di dalam sepasang tanda kutip dua. Jika dituangkan dalam sebuah diagram, maka akan menjadi seperti berikut ini : Elemen Start Tag Atribut Value

Konten

Name

End Tag

< a

href

"http://google.com ">

Googl e

</a >

Selain itu, konten atau isi yang terdapat pada sebuah elemen tidaklah terbatas pada teks saja. Melainkan, sebuah elemen bisa saja berisikan elemen lainnya. Perhatikanlah contoh berikut ini :
<strong> <em> Belajar HTML </em> </strong>

Pada contoh di atas, konten yang terdapat pada elemen strong adalah elemen lain, yaitu elemen em yang berfungsi untuk membuat teks menjadi bercetak miring.

emp4tbelas

emp4tbelas

Penggabungan kedua buah elemen ini akan menjadikan teks Belajar HTML yang terletak di dalamnya ditampilkan dengan cetak tebal dan miring. Dalam penggunaan elemen yang memiliki elemen lain di dalamnya, perlu diperhatikan urutan penutupan masing-masing tag dari elemen-elemen tersebut. Penutupan tag ini mengikuti aturan yang dikenal dengan istilah FILO (First In, Last Out), dimana tag yang dibuka pertama kali akan ditutup terakhir kali. Untuk lebih jelasnya, perhatikanlah contoh berikut ini :
Benar : <strong> <em> Satu </em> </strong> Salah : <strong> <em> Satu </strong> </em>

1.3.1 MENGUNJUNGI KEMBALI HALO, DUNIA!

Setelah Anda memahami struktur dari sebuah dokumen HTML, marilah kita membahas kembali mengenai elemen-elemen yang terdapat pada halaman Halo, Dunia! yang telah Anda buat sebelumnya.
<!doctype html>

Elemen doctype berfungsi untuk memberitahukan versi HTML yang digunakan dalam sebuah halaman web. Penulisan doctype seperti diatas akan memberitahukan kepada web browser bahwa halaman web Anda menggunakan HTML 5. Apabila elemen ini tidak digunakan, maka web browser bekerja dalam quirks mode, dimana nantinya akan menghasilkan tampilan yang tidak sesuai dengan keinginan Anda.
<html> ... </html>

Elemen html berfungsi untuk menandakan awal dan akhir dari sebuah dokumen HTML.
<head> ... </head>

Elemen head berfungsi untuk menandakan bagian kepala (anggaplah seperti kepala/kop surat) dari sebuah halaman web. Semua yang terdapat di dalam bagian ini tidak akan tampil pada web browser dan hanya berfungsi untuk memberikan keterangan atau informasi tambahan mengenai halaman web tersebut, seperti identitas pembuat, hak cipta, judul halaman, dan sebagainya.
<title> ... </title>

Elemen title berfungsi untuk memberikan judul pada sebuah halaman web. Judul ini biasa akan tampil pada bagian tab dari web browser dan berfungsi untuk mempermudah pengunjung halaman web untuk mengenali halaman web Anda dari emp4tbelas 1

emp4tbelas

halaman-halaman yang terdapat pada tab lainnya. Elemen ini hanya dapat diletakkan di dalam elemen head karena elemen ini hanya berfungsi sebagai informasi tambahan.
<body> ... </body>

Jika elemen head dapat diibaratkan sebagai kepala surat, maka elemen body adalah badan atau isi dari surat tersebut. Semua yang terdapat di dalam elemen ini akan ditampilkan pada web browser. Di dalam elemen inilah nantinya Anda akan membuat isi dari halaman web Anda.

1.4 BEKERJA DENGAN TEKS

Fungsi utama dari sebuah halaman web adalah menyampaikan suatu informasi kepada orang lain melalui Internet. Untuk menyampaikan informasi tersebut, tentunya Anda akan memerlukan teks atau tulisan-tulisan yang berisikan informasi tersebut. Pada contoh halaman Halo, Dunia! yang telah Anda buat, Anda hanya meletakkan teks dengan begitu saja di dalam elemen body. Ini bukanlah cara yang terbaik untuk meletakkan teks di dalam sebuah halaman web, melainkan, Anda harus meletakkan teks di dalam elemen yang khusus yang berfungsi untuk memberikan makna semantis kepada teks tersebut. Maksudnya adalah bahwa Anda harus menjelaskan apakah fungsi dari teks tersebut, apakah teks itu berfungsi sebagai judul bab, judul subbab, paragraf isi, keterangan, daftar, atau tabel.

1.4.1 MEMBUAT PARAGRAF

Paragraf dalam sebuah halaman web didefinisikan dengan menggunakan elemen p(paragraph). Penggunaan elemen ini sangatlah mudah, Anda cukup memberikan tag <p> pada awal dari setiap paragraf yang ingin Anda buat.
SINTAKS : <p>teks paragraf CONTOH : <!doctype html> <html> <head> <title>Paragraf</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.

emp4tbelas

emp4tbelas <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. </body> </html>

1.4.2 MEMBUAT JUDUL

Dalam HTML, ada 6 elemen yang dapat Anda gunakan untuk memberikan judul pada paragraf Anda, yaitu elemen h1, h2, h3, h4, h5, dan h6. Dimana elemen h1 berfungsi sebagai judul utama dan h6 berfungsi sebagai judul subbab tingkatan keenam. Berbeda dengan elemen p, Anda perlu menggunakan start tag dan end tag pada elemen judul. Dalam pembuatan judul, perlu diperhatikan bahwa Anda juga harus menggunakan judul-judul subbab secara berurutan. Sebagai contoh, judul h4 haruslah menjadi subbab dari judul h3, dimana h3 sendiri adalah subbab dari judul h2.
SINTAKS : <h1>teks judul</h1> CONTOH : <!doctype html> <html> <head> <title>Judul</title> </head> <body> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h2>Dolor sit Amet</h2> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h2>Consectetur Adipiscing Elit</h2> <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum

emp4tbelas

emp4tbelas rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. </body> </html>

1.4.3 MEMBUAT DAFTAR

Selain paragraf dan judul, Anda juga dapat membuat daftar pada halaman web Anda. Ada tiga macam elemen yang dapat Anda gunakan untuk membuat daftar, yaitu elemen ul(unordered list)yang berfungsi untukuntuk membuat daftar yang tidak terurut, elemen ol(ordered list)yang berfungsi untuk untuk membuat daftar yang berurut, dan elemen li(list item) yang berfungsi untuk membuat isi pada sebuah daftar. Dalam penggunaannya, Anda akan terlebih dahulu mendefinisikan jenis daftar yang ingin Anda buat (terurut atau tidak terurut) dengan menggunakan elemen ul atau ol, lalu Anda menamabahkan isi ke dalam daftar tersebut dengan menggunakan elemen li.
SINTAKS : <ul> <li>isi pertama <li>isi kedua </ul> <ol> <li>isi pertama <li>isi kedua </ol> CONTOH : <!doctype html> <html> <head> <title>Daftar</title> </head> <body> <h1>Contoh daftar</h1> <h2>Tidak terurut</h2> <ul> <li>Lorem ipsum <li>Dolor sit amet <li>Consectetur adipiscing elit </ul> <h2>Terurut</h2> <ol> <li>Lorem ipsum <li>Dolor sit amet

emp4tbelas

emp4tbelas <li>Consectetur adipiscing elit </ol> <h2>Daftar di dalam daftar</h2> <ul> <li>Lorem <li>Ipsum : <ul> <li>Dolor <li>Sit </ul> <li>Amet : <ol> <li>Consectetur <li>Adipiscing : <ul> <li>Elit <li>Etiam </ul> <li>Aliquam </ol> <li>Vitae </ul> </body> </html>

1.4.4 MEMFORMAT TEKS

Sampai saat ini, halaman-halaman web yang telah Anda buat mungkin terasa hambar karena hanya berupa teks biasa saja tanpa adanya format khusus dan penggunaan warna dan jenis serta ukuran huruf yang menarik. Sekarang, marilah mencoba memformat teks yang terdapat pada halaman web Anda agar halaman web Anda menjadi lebih menarik. 1.4.4.1 CETAK TEBAL DAN MIRING Penggunaan huruf yang bercetak tebal dan miring dapat membantu Anda untuk memberikan penekanan pada suatu bagian dari sebuah teks. Untuk membuat efek seperti ini, Anda akan memerlukan elemen strong dan em. Elemen strong berfungsi untuk membuat cetak tebal dan elemen em berfungsi untuk membuat cetak miring.
SINTAKS : <strong>teks</strong> <em>teks</em> CONTOH : <!doctype html> <html>

emp4tbelas

emp4tbelas <head> <title>Cetak Tebal dan Miring</title> </head> <body> <p>Teks ini menggunakan cetak <strong>tebal</strong> <p>Teks ini menggunakan cetak <em>miring</em> <p>Teks ini menggunakan cetak <strong><em>tebal dan miring</em></strong> </body> </html>

1.4.4.2 JENIS, UKURAN, DAN BERAT HURUF Untuk mengatur jenis dan ukuran huruf dari sebuah teks, Anda dapat menambahkan atribut style pada elemen yang ingin Anda atur jenis dan ukuran hurufnya. Atribut style, sesuai namanya, adalah sebuah atribut yang berfungsi untuk memberikan format atau gaya pada elemen-elemen yang terletak di dalam sebuah halaman web. Atribut ini memiliki banyak nilai atribut yang dapat Anda gunakan, namun, marilah terlebih dahulu berkenalan dengan nilai atribut font-family yang berfungsi untuk mengatur jenis huruf, dan nilai atribut font-size yang berfungsi untuk mengatur ukuran huruf. Dalam penulisan nilai-nilai atribut dari atribut style, Anda perlu mengakhiri setiap nilai atribut dengan menggunakan sebuah tanda titik koma (;).
SINTAKS : <elemen style="font-family: jenis huruf; font-size: ukuran huruf;">teks</elemen> CONTOH : <!doctype html> <html> <head> <title>Jenis dan Ukuran Huruf</title> </head> <body> <p style="font-family: Georgia; font-size: 14pt;"> Georgia adalah contoh jenis huruf serif <p style="font-family: Trebuchet MS; font-size: 10pt;"> Trebuchet MS adalah contoh jenis huruf sans-serif <p style="font-family: Consolas; font-size: 16pt;"> Consolas adalah contoh jenis huruf <strong>monospace</strong> </body> </html>

Selain dengan menggunakan elemen strong, Anda juga dapat membuat teks bercetak tebal dengan mengatur berat huruf dengan menggunakan nilai atribut font-weight. Walaupun begitu, perlu diperhatikan bahwa penggunaan utama dari nilai atribut ini

emp4tbelas

emp4tbelas

bukanlah untuk membuat huruf bercetak tebal melainkan untuk membuat huruf yang sudah bercetak tebal dari awal (seperti pada elemen h1) menjadi tidak bercetak tebal.
SINTAKS : <elemen style="font-weight: bobot huruf;">teks</elemen> OPSI BOBOT HURUF : bold -> Bercetak tebal normal ->Tidak bercetak tebal CONTOH : <!doctype html> <html> <head> <title>Bobot huruf</title> </head> <body style="font-family: Trebuchet MS; font-size: 12pt;"> <h1>Judul ini bercetak tebal</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h1 style="font-weight: normal">Judul ini tidak bercetak tebal</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. </body> </html>

Bila Anda perhatikan contoh di atas, dapat diketahui bahwa atribut style yang diberikan pada suatu elemen akan diterapkan pula kepada elemen-elemen lain yang berada di dalam elemen tersebut. Dalam contoh ini, atribut style="font-family: Trebuchet MS; font-size: 12pt;" pada elemen body juga akan diterapkan pada elemen h1 dan p yang terdapat di dalamnya. 1.4.4.3 VARIASI DAN DEKORASI TEKS Selain menentukan jenis dan ukuran huruf, Anda juga bisa menentukan variasi dan dekorasi dari sebuah teks dengan menggunakan nilai atribut font-variant dan textdecoration pada atribut style. Perlu diketahui bahwa Anda dapat menggabungkan berbagai macam nilai atribut pada atribut style sesuai dengan kebutuhan Anda.
SINTAKS : <elemen style="font-variant: variasi; text-decoration: dekorasi;">teks</elemen> OPSI VARIASI : small-caps -> Huruf kecil kapital

emp4tbelas

emp4tbelas

OPSI DEKORASI : underline -> Bergaris bawah overline -> Bergaris atas line-through -> Dicoret blink -> Berkedap-kedip CONTOH : <!doctype html> <html> <head> <title>Variasi dan Dekorasi Teks</title> </head> <body style="font-family: Trebuchet MS; font-size: 14pt;"> <ul> <li style="font-variant: small-caps;">Kapital kecil <li style="text-decoration: underline;">Bergaris bawah <li style="text-decoration: line-through;">Dicoret <li style="font-size: 24pt; text-decoration: blink">Halo, Dunia! </ul> </body> </html>

1.4.4.4 PERATAAN TEKS Anda juga dapat mengatur perataan dari teks yang terdapat di dalam halaman web Anda. Selayaknya pengaturan perataan teks yang terdapat di dalam sebuah aplikasi word prosesor, Anda dapat membuat teks Anda menjadi rata kiri, rata tengah, rata kanan, maupun justify (rata kanan dan kiri). Nilai atribut style yang digunakan kali ini adalah text-align.
SINTAKS : <elemen style="text-align: perataan;">teks</elemen> OPSI PERATAAN : left -> Rata kiri center -> Rata tengah right -> Rata kanan justify -> Rata kiri dan kanan CONTOH : <!doctype html> <html> <head> <title>Perataan Teks</title> </head>

emp4tbelas

emp4tbelas

<body style="font-family: Trebuchet MS; font-size: 12pt;"> <h1>Rata kiri</h1> <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h1>Rata tengah</h1> <p style="text-align: center;">Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h1>Rata kanan</h1> <p style="text-align: right;">Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. <h1>Rata kiri dan kanan <em>(justify)</em></h1> <p style="text-align: justify;">Curabitur at tortor dui. Nunc turpis justo, luctus quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu adipiscing lacinia nec a arcu. </body> </html>

Jika Anda perhatikan, apabila nilai atribut text-align tidak digunakan, secara otomatis web browser akan menganggap teks tersebut menggunakan perataan rata kiri. 1.4.4.5 INDENTASI PARAGRAF Aturan penulisan paragraf di dalam Bahasa Indonesia mengharuskan baris pertama dari setiap paragraf diberikan indentasi (dibuat menjorok ke dalam) seperti halnya paragraf yang terdapat di dalam modul ini. Untuk melakukan hal ini, Anda dapat menggunakan nilai atribut text-indent.
SINTAKS : <elemen style="text-indent: jarak;">teks</elemen> CONTOH : <!doctype html> <html> <head> <title>Indentasi Paragraf</title> </head> <body style="font-family: Trebuchet MS; font-size: 12pt;">

emp4tbelas

emp4tbelas

<h1>Paragraf tanpa indentasi</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h1>Paragraf dengan indentasi 1em</h1> <p style="text-indent: 1em;">Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h2>Paragraf dengan indentasi 2em</h2> <p style="text-indent: 2em;">Curabitur at tortor dui. Nunc turpis justo, luctus quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu adipiscing lacinia nec a arcu. </body> </html>

1.4.4.6 JARAK ANTAR BARIS Selain perataan teks dan indentasi paragraf, Anda juga dapat mengatur jarak antara suatu baris dengan baris lainnya di dalam sebuah paragraf (line spacing). Nilai atribut yang dapat Anda gunakan untuk mengatur hal ini adalah line-height.
SINTAKS : <elemen style="line-height: jarak;">teks</elemen> CONTOH : <!doctype html> <html> <head> <title>Jarak Antar Baris</title> </head> <body style="font-family: Trebuchet MS; font-size: 12pt;"> <h1>Paragraf tanpa pengaturan jarak antar baris</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h1>Paragraf dengan jarak antar baris 1 spasi</h1> <p style="line-height: 1em;">Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h1>Paragraf dengan jarak antar baris 1.5 spasi</h1>

emp4tbelas

emp4tbelas <p style="line-height: 1.5em;">Curabitur at tortor dui. Nunc turpis justo, luctus quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu adipiscing lacinia nec a arcu. </body> </html>

1.4.4.7 PENGGUNAAN WARNA Ada dua macam warna yang dapat Anda berikan kepada teks di dalam halaman web Anda, yaitu warna latar belakan dan warna teks. Untuk memberikan warna latar belakang, Anda akan menggunakan nilai atribut background, sedangkan untuk warna teks Anda akan menggunakan nilai atribut color.
SINTAKS : <elemen style="background: warna; color: warna;">teks</elemen> OPSI WARNA : white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple CONTOH : <!doctype html> <html> <head> <title>Penggunaan Warna</title> </head> <body style="background: black; color: white; font-family: Trebuchet MS; fontsize: 12pt;"> <h1 style="color: red;">Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h1 style="background: green;">Dolor sit Amet</h1> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h1 style="background: blue; color: black;">Consectetur Adipiscing Elit</h1> <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. </body>

emp4tbelas

emp4tbelas </html>

1.5 BEKERJA DENGAN LINK

Sebuah situs web pada umumnya terdiri dari beberapa halaman web yang saling berkaitan, untuk mempermudah pengunjung situs web Anda berpindah dari satu halaman ke halaman lainnya, Anda dapat membuat link atau tautan dengan menggunakan elemen a(anchor). Elemen a akan memerlukan sebuah atribut yang bernama href(hypertext reference). Atribut ini berfungsi untuk menetukan alamat tujuan dari suatu link yang juga dikenal dengan istilah URL (Uniform Resource Locator). Ada dua macam alamat tujuan yang dapat digunakan, yaitu absolute URL, dan relative URL. Sebelum mengenal lebih lanjut tentang berbagai macam alamat tujuan, marilah terlebih dahulu mengetahui dasar pembuatan sebuah link.
SINTAKS : <a href="alamat_tujuan">teks</a> CONTOH : <!doctype html> <html> <head> <title>Link</title> </head> <body> <h1>Selamat datang!</h1> <p>Silahkan pilih halaman yang ingin Anda kunjungi : <ul> <li><a href="profil.html">Profil</a> <li><a href="galeri.html">Galeri Foto</a> <li><a href="http://saya.blogspot.com">Blog</a> <li><a href="http://www.facebook.com/saya">Facebook</a> </ul> </body> </html>

Penggunaan relative URL akan menjadikan alamat halaman tempat asal link menjadi referensi. Untuk lebih memahami penggunaan alamat relatif, perhatikan bagan berikut ini :

Anggaplah bagan di atas adalah struktur dari sebuah situs web www.contoh.com, dimana berita dan galeri adalah sebuah folder/direktori. Berdasarkan pada bagan di atas, perhatikanlah contoh berikut ini : 2

emp4tbelas

emp4tbelas

Apabila dari halaman menu.html Anda ingin membuat tautan menuju halaman galeri.html, maka Anda dapat menggunakan <a href=galeri.html>. Untuk tujuan yang berada dalam folder yang sama, maka cukup dituliskan seperti ini. Apabila dari halaman menu.html Anda ingin membuat link menuju halaman 2010.html, maka Anda dapat menggunakan <a href=berita/2010.html>. Untuk tujuan yang berada dalam folder yang berbeda, namun folder tersebut masih satu tingkatan dengan lokasi dokumen awal, maka perlu dituliskan nama folder dokumen tujuan. Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman berita.html, maka Anda dapat menggunakan <a href=../berita.html>. Untuk tujuan yang berada pada folder lain yang memiliki tingkatan yang lebih tinggi, maka perlu dituliskan .. yang berarti satu folder diatas. Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman laut.html, maka Anda dapat menggunakan <a href=../galeri/laut.html>. Ini adalah kombinasi dari perintah naik ke satu folder diatas dan masuk ke dalam folder galeri.

Sedangkan penggunaan absolute URL akan menggunakan referensi lengkap dan tidak memperdulikan lokasi dari dokumen awal. Sebagai contoh, halaman hutan.html pada contoh diatas dapat diakses dengan menggunakan <a href=http://www.contoh.com/galeri/hutan.html>. Sebuah link tidak hanya dapat mengubungkan sebuah halaman web dengan halaman web lainnya. Tautan juga dapat digunakan untuk menguhubungkan sebuah halaman web dengan berkas audio, video, gambar, dan sebagainya.

1.1 BEKERJA DENGAN GAMBAR

Sebuah halaman web yang hanya berisikan teks saja tentunya terasa hambar dan membosankan. Penambahan gambar yang relevan terhadap informasi yang ingin Anda sampaikan kepada pengunjung situs web Anda tentunya dapat memberikan nilai lebih, sesuai dengan pepatah sebuah gambar lebih bermakna dari pada seribu kata. Untuk menambahkan gambar pada halaman web Anda, Anda dapat menggunakan elemen img(image). Pada elemen ini, Anda harus memberikan sebuah atribut src(source) yang berfungsi untuk menentukan lokasi gambar yang dituju. Penggunaan atribut ini pada dasarnya sama dengan penggunaan atribut href pada elemen a, hanya saja, Anda hanya dapat mengarahkan alamat tujuannya terhadap sebuah file gambar saja. Anda dapat menggunakan format gambar apa saja, baik itu jpg / jpeg, png, maupun gif. Walaupun begitu, ada baiknya Anda memastikan terlebih dahulu bahwa ukuran file 1

emp4tbelas

emp4tbelas

gambar yang Anda gunakan tidak terlalu besar. Penggunaan gambar dengan ukuran file yang terlalu besar tentunya juga akan memerlukan waktu yang lama untuk ditampilkan pada pengunjung Anda yang tidak memiliki koneksi internet dengan kecepatan yang tinggi.
SINTAKS : <img src="alamat_gambar"> CONTOH : <!doctype html> <html> <head> <title>Gambar</title> </head> <body> <h1>Social Network</h1> <h2>Facebook</h2> <a href="http://facebook.com/"><img src="facebook.png"></a> <h2>Twitter</h2> <a href="http://twitter.com"><img src="twitter.png"></a> </body> </html>

1.2 BEKERJA DENGAN TABEL

Selain daftar dan gambar, Anda juga dapat menambahkan tabel pada halaman web Anda. Sistem pembuatan tabel dengan menggunakan HTML menyerupai sistem pembuatan tabel dalam aplikasi spreadsheet seperti Microsoft Excel, dimana sebuah tabel terdiri dari baris (row), kolom (column), dan sel (cell). Untuk sebuah tabel, Anda akan memerlukan beberapa elemen, yaitu elemen table, tr(table row), th(table header), dan td (table data). Elemen table berfungsi untuk mendefinisikan sebuah tabel. Elemen tr berfungsi untuk mendefinisikan sebuah baris dari suatu tabel. Elemen th berfungsi untuk mendefinisikan sebuah kolom judul. Elemen td berfungsi untuk mendefinisikan sebuah kolom data. Elemen table dapat menggunakan atribut tambahan border yang berfungsi untuk menentukan ketebalan garis pembatas pada tabel tersebut. Selain itu, Anda juga dapat menggunakan atribut tambahan width untuk menentukan lebar dari suatu tabel. Atribut tambahan width juga dapat digunakan pada elemen th untuk mengatur lebar dari suatu kolom. Untuk elemen th dan td, Anda juga dapat menggunakan atribut align yang berfungsi untuk mengatur perataan dari suatu kolom.

emp4tbelas

emp4tbelas SINTAKS : <table border="ukuran_garis" width="lebar"> <tr> <th width="lebar" align="perataan">judul</th> </tr> <tr> <td align="perataan">isi</td> </tr> </table> OPSI UKURAN GARIS : 0 ->tanpa garis 1 sampai 10 -> dengan garis, semakin besar semakin tebal OPSI LEBAR : %-> menggunakan persentase px -> menggunakan satuan piksel OPSI PERATAAN : left -> Rata kiri center -> Rata tengah right -> Rata kanan CONTOH : <!doctype html> <html> <head> <title>Daftar Barang</title> </head> <body> <h1>Daftar Barang PT. Untung Untungan</h1> <table border="1" width="50%"> <tr> <th width="10%">No.</th> <th width="50%">Nama Barang</th> <th width="10%">Jumlah</th> <th width="30%">Harga Satuan</th> </tr> <tr> <td>1</td> <td>Komputer</td> <td>50</td> <td>Rp 5.000.000,00</td> </tr> <tr> <td>2</td> <td>Printer Multifungsi</td> <td>5</td> <td>Rp 750.000,00</td> </tr> <tr> <td>3</td> <td>Pendingin Ruangan</td> <td>5</td>

emp4tbelas

emp4tbelas <td>Rp 2.000.000,00</td> </tr> </table> </body> </html>

Anda mungkin pernah menemukan sebuah tabel yang memiliki sel yang tergabung (merged). Untuk membuat tabel seperti itu pada halaman web Anda, Anda dapat menggunakan atribut tambahan rowspan atau colspan pada elemen th atau td pada sel yang ingin Anda gabungkan. Dimana atribut rowspan berfungsi untuk menggabungkan baris (satu sel menggunakan lebih dari satu baris) dan atribut colspan berfungsi untuk menggabungkan kolom (satu sel menggunakan lebih dari satu kolom).
SINTAKS : <td rowspan="jumlah_baris" colspan="jumlah_kolom">teks</td> CONTOH : <doctype html> <html> <head> <title>Daftar Nilai</title> </head> <body> <h1>Daftar Nilai Siswa Kelas XII iA 5</h1> <table border="1" width="50%"> <tr> <th width="10%" rowspan="2">No.</th> <th width="40%" rowspan="2">Nama Siswa</th> <th width="30%" colspan="3">Nilai</th> <th width="20%" rowspan="2">Rata-Rata</th> </tr> <tr> <th width="10%">MTK</th> <th width="10%">B.Ind</th> <th width="10%">B.Ing</th> </tr> <tr> <td>1</td> <td>Azani Z. Ramsan</td> <td>80</td> <td>85</td> <td>90</td> <td>85.00</td> </tr> <tr> <td>2</td> <td>Hardi Mulyana</td> <td>90</td> <td>90</td>

emp4tbelas

emp4tbelas <td>70</td> <td>83.33</td> </tr> <tr> <td>3</td> <td>Rangga Satria</td> <td>70</td> <td>95</td> <td>95</td> <td>86.67</td> </tr> </table> </body> </html>

1.3 BEKERJA DENGAN FORMULIR

Formulir dapat digunakan untuk meminta masukan berbagai macam data dan informasi dari pengunjung situs web Anda. Sebagai contoh adalah formulir pendaftaran, login, pencarian, kontak, dan sebagainya. Ada beberapa elemen yang dapat Anda gunakan untuk membuat formulir, yaitu elemen form, input, textarea, select, dan option.
<form action="..." method="..."> ... </form>

Elemen form berfungsi untuk membuat formulir. Elemen ini memerlukan dua buah atribut, yaitu atribut action dan method. Atribut action berfungsi untuk menentukan halaman yang akan digunakan untuk memproses data yang dikirimkan melalui formulir tersebut. Nilai dari atribut ini memiliki aturan yang sama dengan atribut href pada elemen a dan atribut src pada elemen img. Atribut method berfungsi untuk menentukan metode pengiriman data dari halaman formulir ke halaman pemroses. Nilai dari atribut ini ada dua, yaitu post dan get. Post lebih umum digunakan karena data yang dikirimkan lebih aman daripada menggunakan get.
<input name="..." type="text/password" size="..." maxlength="...">

Elemen input adalah elemen paling dasar untuk memasukkan data pada sebuah formulir. Pada contoh diatas, elemen input menggunakan empat buah atribut, yaitu atribut name, type, size, dan maxlength. Sebenarnya, atribut yang wajib digunakan pada elemen ini hanyalah name dan type saja. Atribut size dan maxlength bersifat sebagai tambahan saja. Atribut name berfungsi untuk menentukan nama dari variabel yang akan digunakan oleh halaman pemroses. Lebih lanjut mengenai atribut ini akan Anda pelajari pada Bab 4

emp4tbelas

emp4tbelas

7. Pastikanlah Anda memberikan nama yang jelas dan mudah dimengerti. Peraturan lainnya yang perlu diperhatikan adalah jangan menggunakan spasi dalam atribut ini. Atribut type berfungsi untuk menentukan tipe dari data yang akan dimasukkan. Ada bebera[a nilai yang dapat digunakan pada atribut ini, diantaranya adalah text danpassword. Jika menggunakan nilai text maka data yang akan dimasukkan berupa teks biasa, sedangkan jika menggunakan nilai password maka data yang akan dimasukkan akan disembunyikan. Atribut size berfungsi untuk menentukan ukuran dari tempat masukan data. Ukuran ini dihitung dalam satuan karakter. Sedangkan atribut maxlength berfungsi untuk menentukan jumlah karakter maksimal yang dapat dimasukkan.
<input name="..." type="radio" value="...">

Jika menggunakan nilai radio pada atribut type, maka elemen input akan menampilkan radio button. Radio button memerlukan sebuah atribut lain, yaitu atribut value. Atribut ini berfungsi untuk menentukan nilai dari variabel pada atribut name. Dari beberapa radio button yang memiliki nilai atribut name yang sama, hanya dapat dipilih satu saja.
<textarea name="... " rows="..." cols="..."> ... </textarea>

Elemen textarea berfungsi untuk memasukkan data yang panjang. Sama seperti elemen input, elemen ini juga memiliki atribut name. Atribut lainnya pada elemen ini adalah atribut rows yang berfungsi untuk menentukan ukuran tinggi textarea dan atribut cols yang berfungsi untuk menentukan ukuran lebar textarea. Semua yang terdapat dalam elemen ini akan ditampilkan di dalamnya.
<select name="..."> ... </select>

Elemen select berfungsi untuk membuat drop-down menu. Elemen ini juga memiliki atribut name seperti elemen input dan textarea.
<option value="..."> ... </option>

Elemen option berfungsi untuk menentukan sebuah pilihan di dalam elemen select. Elemen ini memiliki atribut value seperti pada radio button. Elemen select dan option bekerja seperti elemen ul/ol dan li.
<input type="reset" value="...">

Jika menggunakan nilai reset pada atribut type, maka elemen input ini akan menampilkan sebuah tombol yang berfungsi untuk mengosongkan data pada formulir. Berbeda dengan atribut value pada radio button dan drop-down menu, atribut value pada elemen ini berfungsi untuk menentukan teks yang terdapat pada tombol tersebut.
<input type="submit" value="...">

emp4tbelas

emp4tbelas

Jika menggunakan nilai submit pada atribut type, maka elemen input ini akan menampilkan sebuah tombol yang berfungsi untuk mengirimkan data formulir pada halaman pemroses. Sama seperti reset, atribut value pada elemen ini berfungsi untuk menentukan teks yang terdapat pada tombol tersebut.
CONTOH : <!doctype html> <html> <head> <title>Formulir Pendaftaran</title> </head> <body> <h1>Formulir Pendaftaran</h1> <form action="proses_daftar.php" method="post"> <p> Nama : <br> <input name="nama" type="text" size="50" maxlength="100"> <p> Jenis Kelamin : <br> <input name="jenis_kelamin" type="radio" value="p"> Pria <input name="jenis_kelamin" type="radio" value="w"> Wanita <p> Alamat : <br> <textarea name="alamat" rows="5" cols="50"></textarea> <p> Agama : <br> <select name="agama"> <option value="islam">Islam</option> <option value="katolik">Kristen Katolik</option> <option value="protestan">Kristen Protestan</option> <option value="hindu">Hindu</option> <option value="buddha">Buddha</option> <option value="lainnya">Lainnya</option> </select> <p> Kata Sandi : <br> <input name="sandi" type="password" size="50" maxlength="100"> <p> Konfirmasi Kata Sandi : <br> <input name="konfirmasi_sandi" type="password" size="50" maxlength="100"> <p> <input type="reset" value="Hapus"> <input type="submit" value="Kirim"> </form> </body> </html>

1.4 BEKERJA DENGAN PETA

3

emp4tbelas

emp4tbelas

Peta dalam sebuah halaman web dapat dijadikan sebuah metode alternatif untuk mendapatkan masukkan data dari pengguna situs web Anda. Walaupun begitu, proses pembuatan peta dengan menggunakan bahasa HTML sangatlah rumit, terutama apabila Anda melakukannya secara manual. Oleh karena itu, untuk mempermudah proses pembuatan peta pada halaman web, akan digunakan sebuah aplikasi tambahan yang bernama ImageMap. Aplikasi ini dapat Anda dapatkan secara gratis dari http://code.google.com/p/imgmap/. Namun, Anda akan memerlukan Adobe AIR untuk menjalankannya. Adobe AIR juga dapat didapatkan secara gratis dari http://get.adobe.com/air/. Berikut adalah langkah-langkah untuk membuat sebuah peta HTML dengan menggunakan ImageMap : 1. Jalankan aplikasi ImageMap hingga tampil jendela utamanya. Pilih menu File > Get Image From File.. untuk memilih berkas gambar peta.

2. Pilih berkas gambar peta yang Anda inginkan lalu tekan tombol Open,

3. Pilih bentuk area yang Anda inginkan, peta HTML mendukung 3 macam bentuk area, yaitu kotak, lingkaran, dan poligon (tidak beraturan).

emp4tbelas

emp4tbelas

4. Tandai area yang Anda inginkan dengan menggunakan klik kiri. Pada titik yang terakhir, gunakan Shift + klik kiri untuk mengakhiri mode penandaan. 5. Di bagian atas, masukan tujuan tautan pada kolom Href. 6. Ulangi proses penandaan hingga semua area telah ditandai.

7. Jika proses penandaan sudah selesai salin perintah yang tertera pada bagian code, lalu gunakanlah perintah tersebut dalam dokumen HTML.

Setelah Anda menyiapkan gambar peta dengan menggunakan ImageMap, tentunya Anda harus membuat sebuah halaman web untuk menampilkan peta tersebut. Buatlah dokumen HTML baru sebagai berikut :
<!doctype html> <html> <head> <title>Peta Indonesia</title> </head> <body> <h1>Peta Indonesia</h1> <p> <img src="peta.gif" usemap="#indonesia"> <map name="indonesia"><area shape="poly" alt="" title="" coords="154,214,170,206,277,222,273,255,144,228" href="jawa.html" target="" /><area shape="poly" alt="" title="" coords="132,216,168,202,168,178,196,180,196,163,173,162,166,149,152,151,138,142, 145,133,127,121,61,67,42,65,24,58,29,103,92,178" href="sumatra.html" target="" /><area shape="poly" alt="" title="" coords="208,104,193,139,221,180,265,185,275,195,300,184,305,156,319,142,319,130, 331,130,331,117,319,108,311,94,315,79,286,78,281,97,272,115,252,114,229,122,218, 118" href="kalimantan.html" target="" /><area shape="poly" alt="" title="" coords="335,209,351,210,349,177,364,200,387,193,365,161,375,156,388,165,395,163, 387,136,351,149,349,136,398,133,414,113,407,105,392,121,353,113,337,122,331,144, 324,162,324,182,331,188" href="sulawesi.html" target="" /><area shape="poly" alt="" title="" coords="608,169,609,259,586,246,559,256,557,235,572,230,553,204,499,192,477,146,

emp4tbelas

emp4tbelas 499,135,574,154,594,161" href="papua.html" target="" /><area shape="rect" alt="" title="" coords="419,97,470,196" href="maluku.html" target="" /><area shape="rect" alt="" title="" coords="277,234,291,252" href="bali.html" target="" /><area shape="poly" alt="" title="" coords="295,245,311,231,349,236,380,234,421,229,438,227,435,238,400,246,406,262, 374,281,331,267,321,252,300,256" href="nusatenggara.html" target="" />map> </body> </html>

Pastikan Anda mengganti tag map yang dihasilkan dari ImageMap menjadi sesuai dengan contoh.
<img src="..." usemap="#..." />

Atribut tambahan usemap pada elemen image menandakan bahwa gambar tersebut adalah sebuah peta. Dimana nilai dari atribut ini adalah nama dari peta yang bersangkutan.
<map name="indonesia"> ... </map>

Elemen map berfungsi untuk mendefinisikan sebuah peta. Elemen ini memerlukan sebuah atribut, yaitu atribut name yang berfungsi untuk memberikan nama terhadap peta tersebut.
<area shape="..." alt="..." title="..." coords="..." href="..." target="..." />

Elemen area berfungsi untuk mendefinisikan sebuah area. Atribut dasar dari elemen ini adalah atribut shape yang berfungsi untuk menentukan bentuk area dan atribut coords yang berfungsi untuk menentukan koordinat X dan Y dari titik sudut area tersebut. Atribut alt, title, href, dan target memiliki fungsi yang sama dengan atribut pada elemen a.

emp4tbelas

emp4tbelas

BAB 1:MENGGUNAKAN CSS

emp4tbelas

emp4tbelas

1.1 PENGERTIAN CSS

Pada bab sebelumnya, Anda sudah mempelajari cara memberikan format dan warna pada elemen-elemen yang terdapat di dalam halaman web Anda dengan menggunakan atribut style. Sebenarnya, penggunaan atribut style ini bukanlah merupakan cara yang efisien untuk memformat sebuah halaman web. Bayangkan, jika Anda memiliki 20 halaman di dalam website Anda, dan Anda ingin merubah jenis huruf dari semua halaman tersebut, maka Anda harus mengedit semua halaman tersebut. Bagaimana jika Anda memiliki 100 halaman? Tentunya hal ini akan memakan waktu yang banyak. Untuk mengatasi masalah tersebut, Anda dapat menggunakan CSS (Cascading Style Sheet) sebagai sebuah suplemen terhadap halaman-halaman web Anda. Dengan menggunakan CSS, Anda dapat memisahkan isi dan format tampilan dari halaman web Anda, dimana nantinya HTML hanya digunakan untuk membuat isi dari halaman Anda dan format tampilannya diletakkan di dalam sebuah file CSS yang terpisah. Dengan adanya pemisahan antara isi dengan format seperti ini tentunya akan mempermudah Anda untuk mengubah-ubah isi maupun tampilan dari halaman web Anda. Hal ini dikarenakan sebuah file CSS dapat digunakan berkali-kali oleh banyak halaman web sekaligus, sehingga perubahan yang Anda berikan pada file CSS akan berpengaruh terhadap semua halaman web yang menggunakan file CSS tersebut. Menjadikan proses desain menjadi lebih efisien. Sama halnya dengan HTML, CSS juga distandarisasi oleh W3C. Standar CSS yang paling baru adalah CSS versi 2.1 yang diresmikan pada tanggal 19 Juli 2007.

1.2 MEMBUAT DAN MENGHUBUNGKAN FILE CSS

Seperti yang sudah dijelaskan sebelumnya, file CSS akan berada terpisah dengan filefile HTML yang Anda miliki. Oleh karena itu Anda harus menghubungkan file HTML yang ingin Anda format dengan sebuah file CSS. Namun, Sebelum Anda dapat menghubungkan file HTML dengan file CSS, tentunya Anda harus membuat file CSS yang ingin Anda hubungkan terlebih dahulu. Proses pembuatan file CSS sangatlah mudah, Anda cukup menggunakan text editor favorit Anda dan menyimpannya dengan menggunakan ekstensi .css. Sebagai awal, cobalah membuat sebuah file CSS yang berisikan sebagai berikut :
h1 { color: red; } h2 { color: green; }

emp4tbelas

emp4tbelas

p { color: blue; }

Lalu simpanlah dengan nama tampilan.css di dalam folder yang sama dengan file HTML yang ingin Anda hubungkan dengan file CSS tersebut. Jika Anda perhatikan baikbaik, Anda akan menggunakan nilai-nilai atribut yang terdapat pada atribut style di dalam sebuah file CSS. Dalam contoh ini, akan digunakan nilai atribut color yang berfungsi untuk memberikan warna pada suatu teks. Setelah itu, Anda dapat menghubungkan file-file HTML dengan file CSS tersebut. Proses menghubungkan file HTML dengan file CSS tersebut dapat Anda lakukan dengan menggunakan elemen link yang diletakkan pada elemen head dalam file HTML Anda. Elemen ini akan memerlukan beberapa atribut, yaitu href, rel, dan type. Atribut href memiliki fungsi yang sama seperti atribut href pada elemen a, yaitu untuk menentukan alaman dari file CSS yang akan ingin dihubungkan. Sedangkan elemen rel dan type berfungsi untuk memberikan keterangan bahwa ini adalah sebuah file tampilan (stylesheet) dengan tipe file CSS.
SINTAKS : <link href="alamat_file_css" rel="stylesheet" type="text/css"> CONTOH : <!doctype html> <html> <head> <title>Judul</title> <link href="tampilan.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h2>Dolor sit Amet</h2> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h2>Consectetur Adipiscing Elit</h2> <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. </body>

emp4tbelas

emp4tbelas </html>

emp4tbelas

emp4tbelas

1.3 ATURAN CSS

Sebuah file CSS memiliki struktur yang berbeda dengan file HTML. Jika pada sebuah file HTML Anda akan menggunakan tag, atribut, dan elemen, maka dalam sebuah file CSS Anda akan menggunakan suatu aturan khusus yang dikenal dengan istilah CSS Rule, atau aturan CSS, dimana aturan tersebut terdiri dari berbagai macam komponen, yaitu selector, property, dan value. Secara garis besar, sintaks untuk menuliskan sebuah aturan CSS sangatlah sederhana, yaitu :
selector { property: value; }

1.3.1 SELECTOR
Selector berfungsi untuk menentukan elemen atau komponen HTML manakah yang akan diberlakukan sebuah aturan CSS. Ada tiga macam selector yang dapat Anda gunakan, yaitu tag selector, class selector, dan ID selector. 1.3.1.1 TAG SELECTOR Tag selector adalah sebuah selector yang akan menerapkan aturan CSS kepada sebuah tag atau elemen yang terdapat pada file HTML. Perhatikanlah contoh berikut ini :
body { ... }

Selector ini akan menerapkan aturan CSS untuk elemen body dan semua elemen lain yang terdapat di dalamnya.
form p { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di dalamnya apabila elemen p tersebut terletak di dalam elemen form.
ul li p { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di dalamnya apabila elemen p terletak di dalam elemen li yang juga terletak di dalam elemen ul. Dalam penggunaanya, sebuah aturan yang diberikan dengan menggunakan tag selector akan berlaku untuk semua elemen sesuai yang terdapat di dalam file HTML Anda. Sebagai contoh, apabila di dalam sebuah file HTML terdapat sepuluh buah paragraf dengan menggunakan elemen p, dan di dalam file CSS yang dihubungkan memiliki aturan untuk elemen p, maka semua paragraf yang terdapat di dalam file HTML tersebut akan memiliki format yang sama sesuai dengan aturan yang diterapkan pada file CSS. emp4tbelas 4

emp4tbelas

Mungkin ada kalanya Anda ingin memberikan warna merah pada paragraf pertama dan warna biru pada paragraf kedua. Jika hanya menggunakan tag selector, maka tentunya hal ini tidak dapat dilakukan. Untuk melakukan hal seperti ini Anda dapat menggunakan class selector atau ID selector. 1.3.1.2 CLASS SELECTOR Class selector adalah sebuah selector yang akan menerapkan aturan CSS kepada semua tag atau elemen yang memiliki atribut class yang sesuai. Untuk menggunakan aturan seperti ini, Anda harus memberikan atribut tambahan class untuk setiap elemen HTML dimana Anda ingin memberlakukan aturan yang terdapat pada file CSS.
SINTAKS : <elemen class="nama_kelas"> CONTOH : <p class="merah">

Untuk membuat aturan CSS seperti ini sangatlah mudah, class selector selalu diawali dengan sebuah titik. Perhatikanlah contoh berikut ini :
.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk atribut classnya.
p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya
p .red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen p.
form p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen form.
form.login p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen form yang memiliki nilai login untuk atribut classnya. 1.3.1.3 ID SELECTOR 2

emp4tbelas

emp4tbelas

ID selector pada dasarnya selector memiliki fungsi yang sama dengan class selector, hanya saja atribut tambahan yang digunakan pada elemen-elemen yang tedapat di dalam file HTML adalah atribut id.
SINTAKS : <elemen id="nama_id"> CONTOH : <p id="merah">

Selectornya sendiri menggunakan tanda pagar (#). Perhatikanlah contoh berikut ini :
#home { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai home untuk atribut IDnya.
p#green { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai green untuk atribut IDnya.

1.3.2 PROPERTY DAN VALUE

Properti (property) berfungsi untuk menentukan faktor tampilan yang ingin dirubah, seperti warna dan jenis tulisan, warna latar belakang, posisi dan sebagainya. Nilai dari sebuah property disebut dengan istilah value. Dalam penulisannya, property dan value selalu berpasangan, dipisahkan oleh sebuah titik dua, dan diakhiri dengan sebuah titik koma. Sebuah aturan CSS juga dapat memiliki lebih dari satu properti. Perhatikanlah contoh berikut ini :
body { background: black; }

Aturan dengan ini memiliki sebuah properti, yaitu background dengan nilai (value) black.
h1 { border-bottom: 1px dotted; color: red; }

Aturan dengan ini memiliki dua buah properti, yaitu border-bottom dengan nilai (value) 1px dotted dan color dengan nilai red.

1.4 MENGGUNAKAN WARNA

Pemilihan warna yang tepat dapat membuat halaman web Anda menjadi lebih menarik untuk dilihat. Walaupun begitu, perlu diperhatikan bahwa pemilihan warna adalah sebuah hal yang subjektif. Warna yang menurut Anda bagus bisa jadi tidak disukai oleh pengunjung halaman web Anda. Seperti yang sudah Anda pelajari sebelumnya, ada emp4tbelas 2

emp4tbelas

dua properti yang dapat Anda gunakan untuk memberikan warna pada halaman web Anda, yaitu property background dan color.
SINTAKS : selector { background: value; } CONTOH : .merah { color: red; } .jingga { color: rgb(255, 127, 0); } .kuning { color: #ffff00; } .hijau { color: #0f0; } .biru { color: #0000ff; } .nila { color: rgb(127, 0, 255); } .ungu { color: purple; }

Properti background berfungsi untuk menentukan warna latar balakang. Nilai yang dapat digunakan pada properti ini ada empat macam, yaitu nama warna, kode RGB, kode heksadesimal, dan kode heksadesimal pendek. Ada 18 nama warna yang dapat digunakan, yaitu aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white,yellow, dan transparent. Penggunaan nama warna hanya menyediakan jumlah warna yang sangat terbatas, walaupun bagitu, penggunaan nama warna seperti ini sangat mudah dipahami. Dalam penggunaan kode RGB, maka warna akan didefinisikan dalam bentuk rgb(red, green, blue). Angka pertama menentukan intensitas warna merah, angka kedua untuk hijau, dan angka ketiga untuk biru, dimana angka-angka ini berkisar dari 0 (intensitas terendah) hingga 255 (intensitas tertinggi). Kode heksadesimal adalah cara yang paling umum digunakan, kode ini akan mendefinisikan sebuah warna dalam bentuk #RRGGBB. Dua karakter pertama menentukan intensitas warna merah, dua karakter kedua untung hijau, dan dua huruf karakter untuk biru. Karakter yang digunakan adalah 0 (intensitas terendah), 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E dan F (intensitas tertinggi). Kode heksadesimal singkat menyingkat 6 karakter pada kode heksadesimal menjadi 3 karakter dalam bentuk #RGB.
SINTAKS : selector { color: value; }

Sedangkan properti color berfungsi untuk menentukan warna huruf. Nilai yang digunakan pada properti ini sama dengan nilai yang digunakan pada properti background.

emp4tbelas

emp4tbelas

1.5 MEMFORMAT TEKS

Selain warna, Anda juga dapat memformat teks yang ada dalam halaman web Anda dengan menggunakan CSS. Anda dapat merubah jenis, ukuran, dan bahkan dekorasi huruf.Kesemua properti ini juga telah Anda pelajari pada bab sebelumnya.
SINTAKS : selector { font-family: value; } CONTOH : body { font-family: "trebuchet ms", "verdana", "sans-serif"; } .trebuchet { font-family: "verdana"; } .times { font-family: "times new roman"; } .courier { font-family: "courier new"; }

Properti font-family berfungsi untuk menentukan jenis huruf. Jenis huruf dituliskan di dalam tanda kutip dua. Anda dapat memberikan lebih dari satu jenis huruf dengan menggunakan spasi sebagai pemisah. Jenis huruf tambahan yang diberikan akan berfungsi sebagai alternatif apabila jenis huruf yang sebelumnya tidak ditemukan pada komputer yang digunakan oleh pengunjung halaman web Anda.
SINTAKS : selector { font-size: value; } CONTOH : h1 { font-size: xx-large; } h2 { font-size: 16pt; } p { font-size: 16px; }

Property font-size berfungsi untuk menentukan ukuran huruf. Ukuran huruf dapat dinyatakan dalam tiga macam satuan, yaitu nama ukuran, pt, dan px. Ada 7 nama ukuran yang dapat digunakan, mulai dari yang terbesar xx-large, x-large, large, medium, small, x-small, hingga yang terkecil xx-small. Sama seperti penggunaan nama warna, penggunaan nama ukuran huruf memberikan pilihan yang lebih sedikit tetapi mudah untuk dipahami. Satuan pt (point) adalah satuan ukuran huruf yang umum digunakan dalam tipografi (percetakan), sedangkan satuan px (pixel/piksel) adalah satuan ukuran huruf berdasarkan jumlah piksel dari sebuah karakter. Untuk kedua satuan ini, semakin besar nilainya maka akan semakin besar pula ukuran hurufnya.
SINTAKS : selector { font-weight: value; } CONTOH : .tebal { font-weight: bold; }

emp4tbelas

emp4tbelas

Property font-weight dengan nilai bold memiliki fungsi yang sama dengan tag strong, yaitu memberikan cetak tebal kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai normal.
SINTAKS : selector { font-style: value; } CONTOH : .miring { font-style: italic; }

Property font-style dengan nilai italic memiliki fungsi yang sama dengan tag em, yaitu memberikan cetak miring kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai normal.
SINTAKS : selector { font-variant: value; } CONTOH : .kapital-kecil { font-variant: small-caps; }

Property font-variant dengan nilai small-caps berfungsi untuk memberikan efek kapital kecil (small-caps) kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai normal.
SINTAKS : selector { text-deocation: value; } CONTOH : .garis-bawah { text-decoration: underline; } .garis-tengah { text-decoration: line-through; } .garis-atas { text-decoration: overline; } .kedip { text-decoration: blink; }

Property text-decoration berfungsi untuk memberikan dekorasi tambahan terhadap sebuah teks. Nilai yang dapat digunakan adalah underline (garis-bawah), overline (garis-atas), line-through (garis-tengah), blink (berkedap-kedip), dan none (tanpa dekorasi).
SINTAKS : selector { text-transform: value; } CONTOH : .kapital { text-transform: uppercase; }

Property text-transform berfungsi untuk merubah kapitalisasi huruf dari sebuah teks. Nilai yang dapat digunakan adalah capitalize (Huruf Besar Pada Awal Kata), uppercase (BESAR SEMUA), lowercase (kecil semua), dan none (tanpa perubahan).
SINTAKS : selector { text-align: value; } CONTOH : .rata-tengah { text-align: center; }

emp4tbelas

emp4tbelas .rata-kanan { text-align: left; }

Property text-align berfungsi untuk mengatur proses perataan dari sebuah teks. Nilai yang dapat digunakan adalah left (rata kiri), center (rata tengah), right (rata kanan), dan justify (rata kiri dan kanan).
SINTAKS : selector { text-indent: value; } CONTOH : .rata-kiri { text-indent: 100px; text-align: left; } .rata-kanan-kiri { text-indent: 50pt; text-align: justify; }

Property text-indent berfungsi untuk memberikan indentasi pada baris pertama dari sebuah paragraf menggunakan satuan pt atau px.

1.6 MEMBERIKAN MARGIN

Margin dapat digunakan untuk mengatur jarak antara sebuah elemen dengan elemen lainnya pada sebuah halaman web. Pemberian jarak yang tepat tentunya dapat digunakan untuk membuat isi dari halaman web Anda mudah dibaca. Properti margin digunakan untuk memberikan jarak. Satuan yang digunakan adalah px (piksel). Jika Anda ingin mengatur jarak dengan lebih mendetail, Anda dapat menggunakan properti margin-top (jarak dengan elemen yang berada di atas), margin-bottom (bawah), margin-left (kiri), dan margin-right (kanan).
SINTAKS : selector { margin: value; } selector{ margin-top: value; margin-bottom: value; margin-left: value; marginright: value; } CONTOH (HTML) : <!doctype html> <html> <head> <title>Galeri Foto</title> <link href="margin.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Galeri Foto</h1> <img src="foto1.jpg"> <img src="foto2.jpg">

emp4tbelas

emp4tbelas <br> <img src="foto3.jpg"> <img src="foto4.jpg"> <br> </body> </html> CONTOH (CSS) : h1 { margin-top: 0px; margin-bottom: 0px; margin-left: 10px; } img { margin: 10px; }

1.7 MEMBERIKAN BORDER DAN PADDING

Selain margin, Anda juga dapat memberikan border dan padding untuk memberikan batasan yang lebih jelas lagi antara sebuah elemen dengan elemen lain yang terdapat pada halaman web Anda. Margin, border, dan padding dalam kesatuannya disebut dengan istilah box-model. Untuk lebih jelas mengenai perbedaan diantaranya, perhatikanlah diagram berikut ini :

Padding adalah jarak yang membatasi antara isi dari sebuah elemen dengan border, sedangkan margin adalah jarak yang membatasi antara border dengan elemen lainnya.
SINTAKS : selector { border: ketebalan tipe warna; } selector{ border-top: ketebalan tipe warna; border-bottom: ketebalan tipe warna; border-left: ketebalan tipe warna; border-right: ketebalan tipe warna; }

emp4tbelas

emp4tbelas

Properti border berfungsi untuk memberikan garis batas atau bingkai terhadap sebuah elemen. Properti ini memerlukan tiga buah nilai yang harus ditulis secara berurutan, yaitu ketebalan dalam satuan px, diikuti tipe yang dapat berupa solid (garis lurus), dotted (titik-titik), dashed (garis putus-putus), dan none (tanpa border), dan diakhiri dengan warnagaris. Seperti halnya dengan properti margin, Anda juga dapan menggunakan properti boder secara mendetail.
SINTAKS : selector { padding: value; } selector{ padding-top: value; padding-bottom: value; padding-left: value; padding-right: value; }

Properti padding berfungsi untuk memberikan jarak antara garis batas atau bingkai dengan isi dari sebuah elemen. Satuan yang digunakan adalah px (piksel). Properti padding juga dapat digunakan secara mendetail.
CONTOH (HTML) : <!doctype html> <html> <head> <title>Galeri Foto</title> <link href="border.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Galeri Foto</h1> <img src="foto1.jpg"> <img src="foto2.jpg"> <br> <img src="foto3.jpg"> <img src="foto4.jpg"> <br> </body> </html> CONTOH (CSS) : h1 { margin-top: 0px; margin-bottom: 0px; margin-left: 10px; } img { margin: 5px; border: 5px solid #729fcf; padding: 5px; }

1.8 MENGGUNAKAN PSEUDO-CLASS

Ketika Anda membuat link dalam halaman web, umumnya link tersebut berwarna biru, tetapi setelah link tersebut diklik, maka warnanya akan berubah menjadi ungu. Hal ini emp4tbelas 2

emp4tbelas

sebenarnya dimaksudkan untuk mempermudah pengunjung halaman web Anda untuk membedakan link mana yang sudah dikunjungi dan mana yang belum dikunjungi. Apabila warna yang tersebut tidak serasi dengan warna-warna lain yang digunakan pada halaman web Anda, tentunya Anda ingin merubahnya. Untuk melakukan hal ini, Anda dapat menggunakan bantuan pseudo-class, yaitu sebuah kelas khusus yang berfungsi untuk memberikan aturan CSS pada sebuah elemen berdasarkan dari keadaan elemen tersebut. Misalkan keadaan jika kursor mouse berada di atas elemen tersebut, atau keadaan link yang telah dikunjungi.Penulisan psseudo-class selalu diawali dengan tanda titik dua.
SINTAKS : selector:hover {property:value; }

Pseudo-class :hover berfungsi untuk membedakan aturan CSS yang diberikan kepada sebuah elemen apabila kursor (penunjuk) mouse berada di atas elemen tersebut. Pseudo-class hover dapat digunakan untuk semua selector.
SINTAKS : a:visited {property:value; }

Pseudo-class :visited berfungsi untuk membedakan aturan CSS yang diberikan kepada elemen a apabila link tersebut sudah pernah dikunjungi. Berbeda dengan :hover, pseudo-class ini hanya dapat digunakan untuk tag selector a saja.
CONTOH (HTML) : <!doctype html> <html> <head> <title>Link</title> <link href="pseudo_class.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Selamat datang!</h1> <p>Silahkan pilih halaman yang ingin Anda kunjungi : <ul> <li><a href="profil.html">Profil</a> <li><a href="galeri.html">Galeri Foto</a> <li><a href="http://saya.blogspot.com">Blog</a> <li><a href="http://www.facebook.com/saya">Facebook</a> </ul> </body> </html> CONTOH (CSS) : a { color: #204a87; text-decoration: none; }

emp4tbelas

emp4tbelas a:hover { color: #729fcf; text-decoration: underline; } a:visited { color: #204a87; text-decoration: none; }

emp4tbelas

emp4tbelas

1.9 MENGGUNAKAN GAMBAR LATAR

Gambar latar yang tepat juga dapat menjadi sebuah sentuhan tersendiri yang dapat membuat halaman web Anda tampil lebih menarik. Walaupun begitu, penggunaan gambar latar sebaiknya tidak berlebihan, karena pengguaan gambar latar yang tidak baik akan membuat teks yang terdapat pada halaman web Anda menjadi sulit untuk dibaca.
SINTAKS : selector {background-image: url('alamat_gambar'); }

Properti background-image berfungsi untuk memberikan gambar latar belakang kepada sebuah elemen. Nilai dari url menggunakan konsep yang sama seperti nilai dari atribut src pada elemen img.
SINTAKS : selector { background_repeat: value; }

Properti background-repeat berfungsi untuk mengulang gambar latar berdasarkan nilai properti ini. Nilai yang dapat digunakan adalah repeat-x (mengulang secara horizontal), repeat-y (mengulang secara vertikal), repeat (mengulang secara horizontal dan vertikal), dan no-repeat (tidak mengulang).
CONTOH (HTML) : <!doctype html> <html> <head> <title>Judul</title> <link href="latar.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h2>Dolor sit Amet</h2> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h2>Consectetur Adipiscing Elit</h2> <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.

emp4tbelas

emp4tbelas

</body> </html> CONTOH (CSS) : body { background-image: url('gradasi.png'); background-repeat: repeat-x; font-family: "trebuchet ms"; font-size: 14px; } h1 { margin-top: 50px; margin-bottom: 10px; border-bottom: 1px solid; padding-bottom: 3px; font-weight: normal; } h2 { margin-bottom: -15px; font-weight: normal; }

emp4tbelas

emp4tbelas

BAB 2:MENGATUR TATA LETAK HALAMAN WEB

emp4tbelas

emp4tbelas

2.1 MEMBUAT KOLOM

Pada bab 3, Anda sudah belajar dasar-dasar dari CSS yang dapat digunakan untuk memberikan format tampilan kepada halaman web Anda. Namun, mungkin Anda merasa tata letak dari halaman web Anda masih bersifat sangat sederhana, yaitu terus menerus dari atas ke bawah tanpa ada variasi seperti kolom, menu navigasi, dan sebagainya. Dahulu, pengaturan tata letak dari sebuah halaman web dibuat dengan menggunakan banyak tabel yang saling berhubungan antara satu dengan lainnya. Pada saat itu metode ini memang dinilai cukup efektif, namun penggunaan tabel seperti ini ternyata adalah hal yang salah. Elemen tabel yang didefinisikan dalam sebuah dokumen HTML hanya berfungsi untuk menampilkan data yang bersifat tabular, bukanlah berfungsi untuk mengatur tata letak halaman web. Oleh karena itu, ditemukanlah sebuah teknik baru yang dapat digunakan untuk mengatur tata letak dari sebuah halaman web dengan menggunakan CSS. Teknik ini dikenal dengan istilah CSS layout atau tableless layout. Teknik ini menggunakan elemen HTML div dan properti tertentu dari CSS untuk menghasilkan efek tata letak yang tidak kalah dan bahkan jauh lebih baik apabila dibandingkan dengan menggunakan tabel.

2.1.1 KOLOM UNTUK TATA LETAK

Pengelompokkan elemen-elemen dari sebuah halaman HTML ke dalam beberapa bagian adalah dasar dari tata letak sebuah halaman web. Bagian-bagian tersebut antara lain adalah bagian judul, navigasi, isi atau konten, dan penutup (header). Berikut adalah contoh dari beberapa macam tata letak sebuah halaman web :

Judul Naviga si Penutup

Judul Navigasi Isi Isi Penutup

Judul Naviga si

Isi Penutup

Dasar dari pembuatan tata letak seperti ini adalah penggunaan kolom. Kolom dapat dibuat dengan membuat elemen div untuk setiap bagian dan memberikan properti CSS yang tepat untuk setiap elemen tersebut. Cobalah terlebih dahulu membuat sebuah halaman web sebagai berikut :

emp4tbelas

emp4tbelas CONTOH HTML : <!doctype html> <html> <head> <title>Layout 1</title> <link href="layout1.css" rel="stylesheet" type="text/css"> </head> <body> <div class="judul"> <h1>Lorem Ipsum</h1> <h2>Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit</h2> </div> <div class="navigasi"> <h1>Menu Utama</h1> <ul> <li><a href="#">Lorem Ipsum</a> <li><a href="#">Dolor sit Amet</a> <li><a href="#">Consectetur</a> <li><a href="#">Adispiscing Elit</a> </ul> </div> <div class="isi"> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. <h2>Dolor sit Amet</h2> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <h2>Consectetur Adipiscing Elit</h2> <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. </div> <div class="penutup"> <p class="tengah">Halaman ini dibuat oleh saya </div> </body> </html> CONTOH CSS : * { margin: 0px; padding: 0px; } body {

emp4tbelas

emp4tbelas width: 960px; margin: auto; background-image: url('gradasi.png'); background-repeat: repeat-x; padding: 20px; color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt;

a { color: #204a87; text-decoration: none; } a:hover { color: #729fcf; text-decoration: underline; } a:visited { color: #204a87; text-decoration: none; } .judul { margin-bottom: 20px; border-bottom: solid 1px; padding-bottom: 10px; } .judul h1 { font-size: 24pt; font-weight: normal; } .judul h2 { font-size: 12pt; font-weight: normal; } .navigasi { float: left; width: 180px; margin-right: 20px; } .navigasi h1 { margin-bottom: 5px; padding-left: 10px; background-color: #729fcf; color: #ffffff; font-size: 12pt; font-weight: normal; } .navigasi ul { margin-left: 20px; } .isi { float: left; width: 760px; margin-bottom: 10px; } .isi h1 { margin-bottom: 5px; padding-left: 20px; background-color: #729fcf; color: #ffffff; font-size: 12pt; font-weight: normal; } .isi p { margin-bottom: 10px; text-indent: 20px; } .penutup { clear: both; border-top: solid 1px; padding-top: 10px; } .penutup p { text-align: center; }

Pada contoh di atas, halaman web dibagi manjadi empat bagian, yaitu judul, navigasi, isi dan penutup dengan menggunakan tata letak sebagai berikut : Lebar Total : 960px Judul Naviga si

Lebar : 180px

Isi Lebar : 760px

Batas kanan : 20px

emp4tbelas

emp4tbelas

Penutup Berdasarkan kepada statistik pada bulan Juni tahun 2010, 24% pengguna Internet masih menggunakan layar monitor dengan resolusi 1024x768 piksel. Anda sebagai seorang pengembang web tentunya harus dapat memenuhi kebutuhan setiap pengunjung web Anda. Lebar halaman 960px adalah ukuran yang cocok untuk resolusi 1024x768 dan juga tidak terlihat buruk pada resolusi yang lebih tinggi. Sekarang marilah kita membahasa satu-persatu langkah-langkah yang diperlukan untuk membuat tata letak seperti halaman web di atas.
SINTAKS : <div class="nama_kelas">isi</div>

Elemen div (division) berfungsi untuk mengelompokkan beberapa elemen menjadi sebuah bagian dari halaman web. Elemen ini pada umumnya menggunakan atribut class untuk menentukan aturan CSS yang berlaku dalam elemen tersebut. Selain class, atribut id juga dapat digunakan dalam elemen ini. Pada contoh di atas, halaman web tersebut dikelompokkan ke dalam beberapa bagian, yaitu bagian judul, navigasi, isi, dan penutup dengan menggunakan elemen div pada setiap bagiannya.
SINTAKS : * { margin: 0px; padding: 0px; }

Selector * adalah sebuah selector khusus dimana aturan CSS dalam selector ini akan berlaku kepada semua elemen yang tedapat dalam halaman web. Pada contoh di atas, digunakan properti margin dan padding dengan nilai 0px. Hal ini dimaksudkan untuk mengatur ulang margin dan padding yang sudah ada secara otomatis pada setiap aplikasi web browser. Margin dan padding otomatis ini akan berbeda-beda ukurannya tergantung dari web browser yang digunakan. Oleh karena itu, ada baiknya Anda mengatur ulang margin dan padding ini agar tampilan halaman web Anda akan sama untuk setiap web browser.
SINTAKS : selector { width: lebar; }

Properti width berfungsi untuk menentukan ukuran lebar dari sebuah elemen. Satuan yang digunakan dapat berupa px, pt dan % (persentasi).
SINTAKS : selector { margin: auto; }

Properti margin dengan nilai auto berfungsi untuk meletakkan elemen pada bagian tengah secara otomatis. Hal ini sangat berguna apibila ukuran lebar dari halaman web Anda lebih kecil daripada resolusi monitor yang digunakan oleh pengunjung halaman emp4tbelas 4

emp4tbelas

web Anda. Jika Anda tidak menggunakan properti ini, maka halaman web Anda akan tertampil di bagian kiri.
SINTAKS : selector { float: left; }

Properti float berfungsi untuk membuat sebuah elemen mengambang, maksudnya adalah, elemen yang mengambang tersebut akan ditampilkan secara bertumpuk dengan elemen lainnya. Mudahnya, gunakanlah properti ini untuk setiap bagian yang ingin Anda buat sebagai sebuah kolom. Pada contoh di atas, properti ini digunakan pada bagian navigasi dan isi.
SINTAKS : selector { clear: both; }

Properti clear berfungsi untuk mengakhiri elemen yang mengambang. Pada contoh di atas, bagian penutup sudah tidak lagi menggunakan kolom sehingga diberikan aturan CSS dengan propeti clear: both. Jika setelah kolom selesai tidak ada elemen lagi, maka properti ini tidak perlu digunakan.

2.1.2 KOLOM UNTUK TEKS

Kolom tidak hanya dapat digunakan untuk mengatur tata letak utama dari sebuah halaman web, tetapi kolom juga dapat digunakan untuk membuat kolom teks seperti pada surat kabar dan majalah. Anda juga dapat membuat sebuah kolom di dalam kolom lainnya. Cobalah contoh berikut ini :
CONTOH HTML : <!doctype html> <html> <head> <title>Layout 2</title> <link href="layout2.css" rel="stylesheet" type="text/css"> </head> <body> <div class="judul"> <h1>Lorem Ipsum</h1> <h2>Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit</h2> </div> <div class="navigasi"> <h1>Menu Utama</h1> <ul> <li><a href="#">Lorem Ipsum</a> <li><a href="#">Dolor sit Amet</a> <li><a href="#">Consectetur</a> <li><a href="#">Adispiscing Elit</a>

emp4tbelas

emp4tbelas </ul> </div> <div class="isi"> <div class="kolom-1"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus. </div> <div class="kolom-2"> <h2>Dolor sit Amet</h2> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. </div> <div class="kolom-3"> <h2>Consectetur Adipiscing Elit</h2> <p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi. </div> <div class="tanpa-kolom"> <h2>Dolor sit Amet</h2> <p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. </div> </div> <div class="penutup"> <p class="tengah">Halaman ini dibuat oleh saya </div> </body> </html> CONTOH CSS : * { margin: 0px; padding: 0px; } body { width: 960px; margin: auto; background-image: url('gradasi.png'); background-repeat: repeat-x; padding: 20px; color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt; } a { color: #204a87; text-decoration: none; } a:hover { color: #729fcf; text-decoration: underline; } a:visited { color: #204a87; text-decoration: none; } .judul { margin-bottom: 20px; border-bottom: solid 1px; padding-bottom: 10px; } .judul h1 { font-size: 24pt; font-weight: normal; }

emp4tbelas

emp4tbelas .judul h2 { font-size: 12pt; font-weight: normal; } .navigasi { float: left; width: 180px; margin-right: 20px; } .navigasi h1 { margin-bottom: 5px; padding-left: 10px; background-color: #729fcf; color: #ffffff; font-size: 12pt; font-weight: normal; } .navigasi ul { margin-left: 20px; } .isi { float: left; width: 760px; margin-bottom: 10px; } .isi h1 { margin-bottom: 5px; padding-left: 20px; background-color: #729fcf; color: #ffffff; font-size: 12pt; font-weight: normal; } .isi p { margin-bottom: 10px; text-indent: 20px; } .kolom-1 { float:left; width: 245px; margin-right: 10px; } .kolom-2 { float:left; width: 245px; margin-right: 10px; } .kolom-3 { float:left; width: 245px; } .tanpa-kolom { clear: both; } .penutup { clear: both; border-top: solid 1px; padding-top: 10px; } .penutup p { text-align: center; }

emp4tbelas

emp4tbelas

BAB 3:PENGENALAN BASIS DATA

emp4tbelas

emp4tbelas

3.1 PENGERTIAN BASIS DATA

Basis data, atau yang juga dikenal dengan istilah database, adalah sebuah kumpulan dari banyak data-data yang terorganisir berdasarkan aturan-aturan tertentu. Sebuah halaman atau situs web yang bersifat dinamis akan menggunakan basis data sebagai tempat untuk menyimpan data. Basis data sendiri bukanlah merupakan sebuah aplikasi, melainkan hanyalah sebuah konsep tentang bagaimana menyimpan dan mengorganisir data. Aplikasi yang berfungsi untuk membuat dan mengatur data-data yang berada di dalam sebuah basis data disebut dengan Database Management System (DBMS / sistem manajemen basis data). Sebagian besar dari aplikasi DBMS menggunakan konsep penyimpanan data yang dikenal dengan istilah Relational Database Management System (RDBMS / sistem manajemen basis data relasional). Konsep RDBMS ditemukan oleh E. F. Codd, seorang ahli komputer Inggris pada tahun 1970 melalui karya tulisnya yang berjudul A Relational Model of Data for Large Shared Data Banks. Berdasarkan konsep ini, data disimpan dalam tabel-tabel yang saling berhubungan. Ada banyak aplikasi yang termasukan ke dalam kategori DBMS, diantaranya adalah Microsoft Access, Microsoft SQL Server, Oracle DB, IBM DB2, PostgreSQL, dan MySQL. Namun, MySQL adalah sebuah aplikasi DBMS yang paling populer untuk penggunaan situs web. Hampir semua penyedia layanan hosting yang ada mendukung penggunaan aplikasi DBMS ini.

3.2 KOMPONEN DALAM BASIS DATA

Setiap basis data yang ada memiliki berbagai macam komponen yang digunakan untuk menyimpan dan mengorganisir data. Dalam sistem manajemen basis data relasional, tabel adalah komponen yang paling penting di dalamnya. Tabel sendiri terdiri dari beberapa komponen lain yang lebih kecil, yaitu baris (row) dan kolom (column). Sedangkan tabel-tabel yang saling berhubungan satu sama lainnya akan tergabung dalam sebuah skema. Sebuah tabel berfungsi untuk menyimpan sekumpulan data dari entitas yang sama. Entitas, atau yang juga dikenal dengan istilah entity, dapat dikatakan sebagai sebuah benda yang dapat berdiri sendiri dan dibedakan antara satu dengan lainnya (dapat diidentifikasi). Mudahnya, Anda dapat menganggap entitas sebagai sebuah objek di dunia nyata, sebagai contoh, siswa adalah sebuah entitas, barang adalah sebuah entitas, lagu adalah sebuah entitas dan sebagainya. Setiap entitas akan memiliki sifat atau karakteristik unik di dalamnya. Sifat atau karakteristik dari sebuah entitas dikenal dengan istilah atribut. Sebagai contoh, entitas emp4tbelas 2

emp4tbelas

siswa dapat memiliki atribut berupa nomor induk, nama, jenis kelamin, dan tempat & tanggal lahir, sedangkan entitas sebuah barang dapat memiliki atribut berupa nomor kode, nama barang, harga satuan, dan berat. Dalam sistem manajemen basis data relasional, atribut dari sebuah entitas akan menjadi sebuah kolom dari suatu tabel. Jika kolom dari suatu tabel merepresentasikan atribut dari sebuah entitas, maka baris dari suatu tabel dalam sistem manajemen basis data relasional merepresentasikan sebuah data. Setiap data yang tersimpan dalam tabel tersebut harus memiliki minimal satu buah atribut yang memiliki nilai yang unik, dimana maksud dari unik disini adalah tidak ada data yang memiliki nilai sama untuk sebuah atribut. Sebagai contoh, tidak boleh ada siswa yang memiliki nomor induk yang sama. Atribut yang unik seperti ini berfungsi agar sistem manajemen basis data dapat membedakan (mengidentifikasi) antara satu data dengan lainnya. Atribut seperti ini dikenal dengan istilah primary key. Selanjutnya, tabel-tabel yang saling berhubungan satu sama lain akan membentuk sebuah skema. Skema digunakan untuk memisahkan tabel-tabel yang ada di dalam sebuah basis data secara fungsional. Sebagai contoh, tabel siswa, nilai, dan mata pelajaran dapat tergabung dalam sebuah skema basis data pendidikan, sedangkan tabel barang, pelanggan, dan transaksi dapat tergabung dalam sebuah skema basis data penjualan. Sebuah aplikasi yang menggunakan sebuah sistem manajemen basis data untuk menyimpan datanya pada umumnya akan berinteraksi dengan sebuah skema saja. Dalam beberapa sistem manajemen basis data, skema juga dikenal dengan istilah database.

3.3 RELASI ANTAR TABEL

Seperti yang sudah dijelaskan sebelumnya sistem manajemen basis data relasional adalah sebuah sistem manajemen basis data yang menyimpan tabel-tabel yang saling berhubungan. Maksud dari berhubungan disini adalah sebuah data yang tersimpan dalam sebuah tabel memiliki hubungan dengan data lain yang tersimpan dalam tabel yang berlainan pula. Sebagai contoh, setiap data siswa yang disimpan di dalam tabel siswa akan memiliki hubungan dengan data nilai yang tersimpan di dalam tabel nilai. Untuk dapat menghubungkan data dari sebuah tabel dengan data pada tabel lainnya, sistem manajemen basis data menggunakan sebuah atribut tambahan yang dikenal dengan istilah foreign key. Atribut foreign key pada sebuah data berisikan referensi terhadap sebuah nilai primary key dari data yang berhubungan pada tabel lainnya. Perhatikanlah ilustrasi berikut ini : Pegawai Kod e P1 P2 P3 P4 Nama Zahria h Yayuk Windi Vina Kepal a KB1 KB2 KB1 KB1 Kepala Bagian Kod Nam e a KB1 Andi KB2 Budi

emp4tbelas

emp4tbelas

P5

Uman g

KB2

Pada ilustrasi di atas nilai primary key dari tabel kepala bagian (KB1 dan KB2) digunakan sebagai referensi pada tabel pegawai. Nilai dari primary key yang dijadikan referensi seperti inilah yang dikenal dengan istilah foreign key. Ada tiga macam relasi atau hubungan yang dapat dimiliki oleh sebuah data dalam suatu tabel, yaitu hubungan satu-satu (one-to-one relationship), hubungan satu dengan banyak (one-to-many relationship), dan hubungan banyak dengan banyak (many-tomany relationship).

3.3.1 ONE-TO-ONE RELATIONSHIP

Sesuai dengan namanya, hubungan satu-satu, atau yang juga dikenal dengan istilah one-to-one relationship, adalah hubungan dari sebuah data dalam sebuah tabel dengan tepat satu data lain yang berada dalam tabel yang berbeda. Sebagai contoh, setiap departemen hanya dikepalai satu orang menteri, dan satu orang menteri hanya dapat mengepalai satu buah departemen. Agar dapat lebih memahami one-to-one relationship, perhatikanlah ilustrasi berikut ini : Departemen Kod Kepal Nama e a Keuanga A P2 n Pertahan B P3 an C Agama P1 Pejabat Kod Nam e a P1 Andi P2 Budi Cece P3 p

3.3.2 ONE-TO-MANY RELATIONSHIP

Dalam one-to-many relationship, sebuah data dapat berhubungan dengan satu atau lebih data lainnya, namun tidak sebaliknya. Sebagai contoh, sebuah kepala bagian dapat memiliki beberapa orang anak buah, namun seorang anak buah hanya dapat memiliki satu kepala bagian saja. Pegawai Kod e P1 P2 P3 P4 Nama Zahria h Yayuk Windi Vina Kepal a KB1 KB2 KB1 KB1 Kepala Bagian Kod Nam e a KB1 Andi KB2 Budi

emp4tbelas

emp4tbelas

P5

Uman g

KB2

3.3.3 MANY-TO-MANY RELATIONSHIP

Jika dalam one-to-many relationship hanya sebuah data saja yang dapat berhubungan dengan beberapa data lainnya dan tidak sebaliknya, maka dalam many-to-many relationship berlaku sebaliknya. Sebagai contoh, seorang pelanggan dapat membeli berbagai macam produk yang berbeda-beda, dan sebuah produk yang sama dapat dibeli oleh beberapa orang pelanggan yang berbeda-beda pula. Agar dapat lebih memahami many-to-many relationship, perhatikanlah ilustrasi berikut ini : Barang Nam Pemb a eli Lapto A1 p HP A1 Lapto A2 p TV A1 TV A2 Pembeli Kod Nam e a A1 Andi A2 Budi

Kod e BR1 BR2 BR1 BR3 BR3

Dalam many-to-many relationship, akan diperlukan sebuah tabel perantara yang berfungsi untuk menyimpan atribut tambahan apabila diperlukan. Kembali ke contoh di atas, dapat dilihat bahwa ada banyak data yang berulang yang terdapat pada kedua macam tabel. Data yang berulang-ulang seperti ini tentunya dapat menyebabkan berbagai macam masalah yang tidak diinginkan. Untuk many-to-many relationship seperti ini ada baiknya jika dibuat sebuah tabel sementara seperti pada ilustrasi berikut ini : Barang Kod Nam e a Lapto BR1 p BR2 HP BR3 TV Transaksi Pemb Jumla eli h A1 2 A1 1 A2 2 A2 1 A2 1 Pembeli Kod Nam e a A1 Andi A2 Budi

Bara ng BR1 BR2 BR1 BR2 BR3

emp4tbelas

emp4tbelas

BAB 4:MENGGUNAKAN SQL

emp4tbelas

emp4tbelas

4.1 PENGERTIAN SQL

SQL (Structured Query Language), adalah sebuah bahasa khusus yang dapat digunakan untuk berkomunikasi dan berinteraksi dengan sebuah sistem manajemen basis data. Perlu diperhatikan bahwa SQL bukanlah merupakan sebuah bahasa pemrograman, tetapi SQL hanyalah sebuah bahasa perantara yang dapat digunakan untuk mengambil dan memanipulasi data yang tersimpan di dalam sebuah basis data. Bahasa SQL adalah sebuah bahasa yang bersifat standar, maksudnya adalah setiap aplikasi sistem manajemen basis data dapat mengenali dan menjalankan perintahperintah yang diberikan dalam bahasa SQL. Walaupun begitu, pada umumnya setiap aplikasi sistem manajemen basis data memiliki perintah-perintah tambahan yang hanya dimiliki oleh aplikasi itu saja. Sebagai contoh, aplikasi MS SQL Server memiliki fitur SQL tambahan yang dinamakan Transact-SQL atau T-SQL. Perintah-perintah tambahan tersebut hanya dapat dimengerti oleh aplikasi yang bersangkutan saja, perintah-perintah tambahan tersebut tidak akan dapat dimengerti oleh aplikasi sistem manajemen basis data lainnya.

4.2 BEKERJA DENGAN SKEMA

Sebelum Anda dapat membuat tabel dan memasukkan data dengan menggunakan MySQL, Anda perlu terlebih dahulu membuat skema untuk menyimpan tabel-tabel yang ingin Anda buat terlebih dahulu. Hanya ada dua perintah yang umum digunakan dalam berkerja dengan skema, yaitu perintah CREATE SCHEMA dan DROP SCHEMA. Perintah CREATE SCHEMA berfungsi untuk membuat skema baru. Sedangkan perintah DROP SCHEMA berfungsi untuk menghapus sebuah skema yang telah ada lengkap beserta tabel-tabel dan seluruh data yang terdapat di dalamnya. Berhati-hatilah dalam menggunakan perintah DROP SCHEMA karena apabila sebuah skema sudah di hapus, maka tidak akan dapat dikembalikan lagi seperti semula.
SINTAKS : CREATE SCHEMA nama_skema CONTOH : CREATE SCHEMA data_toko SINTAKS : DROP SCHEMA nama_skema CONTOH : DROP SCHEMA data_toko

4.3 BEKERJA DENGAN TABEL

emp4tbelas

emp4tbelas

Dalam bekerja dengan tabel, ada tiga perintah penting yang perlu Anda ketahui, yaitu perintah CREATE TABLE, ALTER TABLE, dan DROP TABLE.

4.3.1 MEMBUAT TABEL

Perintah CREATE TABLE berfungsi untuk membuat tabel di dalam sebuah skema. Perintah ini diikuti dengan nama tabel yang ingin dibuat dan daftar kolom-kolom yang terdapat di dalamnya.
SINTAKS : CREATE TABLEnama_tabel ( nama_kolom_1 tipe_data_kolom_1 keterangan_kolom_1, nama_kolom_2 tipe_data_kolom_2 keterangan_kolom_2, nama_kolom_3 tipe_data_kolom_3 keterangan_kolom_3, ... ) CONTOH : CREATE TABLE barang ( kode_barang INT AUTO_INCREMENT PRIMARY KEY, kode_kategori_barang INT NOT NULL REFERENCES kategori(kode) ON UPDATE CASCADE ON DELETE CASCADE, nama_barang VARCHAR(100) NOT NULL, harga_satuan DECIMAL(10,2) UNSIGNED NOT NULL, keterangan TEXT )

Contoh diatas akan membuat sebuah tabel yang bernama barang yang memiliki 4 buah kolom, yaitu kolom kode_barang, nama_barang, harga_satuan, dan keterangan. Kolom kode barang memiliki tipe data INT (integer/bilangan bulat) dengan keterangan tambahan AUTO_INCREMENT yang berfungsi untuk memasukkan nilai kedalam kolom tersebut secara otomatis berurutan dan keterangan PRIMARY KEY yang berfungsi untuk menjadikan kolom tersebut sebagai primary key. Kolom kategori barang memiliki tipe data INT. Keterangan NOT NULL berfungsi untuk menjadikan kolom ini harus diisi dan tidak boleh dikosongkan. Keterangan REFERENCES berfungsi untuk menjadikan kolom ini sebagai foreign key dengan referensi ke kolom primary key kode yang terdapat pada tabel kategori. Keterangan ON UPDATE CASCADE berfungsi untuk merubah nilai dari kolom ini secara otomatis apabila nilai dari kolom yang direferensikan pada tabel lain berubah. Keterangan ON DELETE CASCADE berfungsi untuk menghapus secara otomatis data yang berhubungan dengan data yang direferensikan apabila data yang direferensikan tersebut ikut dihapus.

emp4tbelas

emp4tbelas

Kolom nama barang memiliki tipe data VARCHAR (teks) dengan panjang maksimum 100 huruf/karakter. Kolom ini harus diisi dan tidak boleh dikosongkan. Kolom harga satuan memiliki tipe data DECIMAL (bilangan desimal) sepanjang 10 angka dengan 2 angka di belakag koma. Keterangan UNSIGNED berfungsi untuk menjadikan sebuah tipe data angka hanya dapat menerima bilangan positif saja. Kolom ini juga harus diisi dan tidak boleh dikosongkan. Kolom keterangan memiliki tipe data TEXT (teks) dengan panjang tidak terbatas. Kolom ini boleh tidak diisi.

Berikut adalah daftar tipe data yang dapat Anda gunakan dalam membuat tabel :
Nama TINYINT SMALLINT MEDIUMINT INT BIGINT FLOAT DOUBLE DECIMAL CHAR VARCHAR TEXT MEDIUMTEXT LONGTEXT DATE DATETIME TIME YEAR TIMESTAMP BOOL UNIX timestamp Benar/salah Bilangan real Bilangan desimal Karakter dengan panjang tetap Karakter dengan panjang berbeda Teks Bilangan bulat Keterangan Rentang Nilai -127 to 127 [0 to 255 UNSIGNED] -32,768 to 32,767 [0 to 65,535] -8,388,608 to 8,388,607 [0 to 16,777,215] -/+2.147E+9 [0 to 4.294E+9] -/+9.223E+18 [0 to 18.45E+18] Min=+/-1.175E-38 Max=+/-3.403E+38 Min=+/-2.225E-308 Max=+/-1.798E+308 0 255 0 255 0 65,535 0 16,777,215 0 4,294,967,295 "1000-01-01" - "9999-12-31" "1000-01-01 00:00:00" "9999-12-31 23:59:59" "-838:59:59" - "838:59:59" 1900 - 2155 19700101000000 2037+ 0-1

Waktu dan tanggal

1.1.1 MENGUBAH TABEL

Perintah ALTER TABLE berfungsi untuk mengubah struktur dari suatu tabel. Ada tiga macam perubahan yang dapat dilakukan, yaitu menambah kolom, mengubah kolom dan menghapus kolom. Perlu diperhatikan bahwa menggunakan perintah ALTER TABLE terhadap sebuah tabel yang sudah memiliki data dapat menyebabkan kerusakan dan/atau kehilangan data yang terdapat di dalamnya. Oleh karena itu,

emp4tbelas

emp4tbelas

pastikanlah struktur semua tabel Anda sudah benar sebelum mulai memasukkan data ke dalamnya.
SINTAKS : ALTER TABLEnama_tabelADDnama_kolom tipe_data_kolom keterangan_kolom CONTOH : ALTER TABLE barang ADD berat INT UNSIGNED NOT NULL

Perintah di atas berfungsi untuk menambahkan kolom berat dengan tipe data INT berjenis UNSIGNED dan harus diisi.
SINTAKS : ALTER TABLEnama_tabelCHANGEnama_kolom tipe_data_kolom keterangan_kolom CONTOH : ALTER TABLE barang CHANGE harga_satuan INT UNSIGNED NOT NULL

Perintah di atas berfungsi untuk mengubah tipe data kolom harga_satuan menjadi INT berjenis UNSIGNED dan harus diisi.
SINTAKS : ALTER TABLEnama_tabelDROPnama_kolom CONTOH : ALTER TABLE barang DROP keterangan

Perintah di atas berfungsi untuk menghapus kolom keterangan dari tabel barang.

1.1.2 MENGHAPUS TABEL

Perintah DROP TABLE berfungsi untuk menghapus semua tabel beserta data-data yang terdapat di dalamnya.
SINTAKS : DROP TABLE nama_tabel CONTOH : DROP TABLEproduk

emp4tbelas

emp4tbelas

1.2 BEKERJA DENGAN DATA

Ada empat macam operasi utama yang dapat dilakukan terhadap data yang tersimpan di dalam sebuah tabel, yaitu create (memasukkan data), read (membaca data), update (mengubah data), dan delete (menghapus data). Keempat operasi ini kerap disebut dengan istilah CRUD. Perintah-perintah yang akan digunakan adalah perintah INSERTINTO, SELECT, UPDATE, dan DELETEFROM.

1.2.1 MEMASUKKAN DATA

Perintah INSERT INTO berfungsi untuk memasukkan data ke dalam tabel. Ada dua macam cara penggunaan perintah ini, yaitu dengan memasukkan data ke semua kolom atau hanya memasukkan data ke kolom-kolom tertentu saja.
SINTAKS : INSERT INTOnama_tabelVALUES (nilai_kolom_1, nilai_kolom_2, nilai_kolom_3, ...) CONTOH : INSERT INTO siswa VALUES (NULL, 'Ann Example', 'Jakarta', '04/08/1983', 'P')

Perintah di atas berfungsi untuk memasukkan nilai ke dalam tabel siswa. Penggunaan NULL berarti nilai di dalam kolom tersebut akan dikosongkan. Untuk kolom yang menggunakan keterangan AUTO_INCREMENT, harus digunakan nilai NULL sehingga sistem basis data akan memberikan nilai ke dalam kolom tersebut secara otomatis. Perlu diperhatikan bahwa untuk data dengan tipe teks seperti CHAR, VARCHAR, DATE, dan TEXT, Anda perlu menggunakan sebuah tanda kutip ('). Tanda kutip ini berfungsi untuk membedakan nilai teks dengan nilai angka.
SINTAKS : INSERT INTOnama_tabelVALUES (nilai_kolom_1, nilai_kolom_2, nilai_kolom_3, ...) CONTOH : INSERT INTO siswa VALUES (NULL, 'Ann Example', 'Jakarta', '04/08/1983', 'P')

1.2.2 MENGAMBIL DATA

Perintah SELECT berfungsi untuk mengambil data dari sebuah tabel. Ada banyak cara penggunaan perintah SELECT tergantung dari kriteria data yang ingin diambil.
SINTAKS : SELECT * FROMnama_tabel CONTOH : SELECT * FROM barang

emp4tbelas

emp4tbelas

Penggunaan perintah SELECT dengan bentuk ini akan mengambil semua data dan kolom yang terdapat di dalam sebuah tabel. Pada contoh di atas, akan ditampilkan semua data yang terdapat di dalam tabel barang.
SINTAKS : SELECTkolom_1, kolom_2, kolom_3, ...FROMnama_tabel CONTOH : SELECT kode_barang, nama_barang FROM barang

Perintah SELECT seperti ini berfungsi untuk mengambil data dari sebuah tabel, namun hanya dari kolom-kolom tertentu saja. Pada contoh di atas, akan ditampilkan kolom kode_barang, dan nama_barang dari semua data yang terdapay di dalam tabel barang.
SINTAKS : SELECT *|kolomFROMnama_tabelWHEREkondisi CONTOH SELECT SELECT SELECT 'Intel : * FROM barang WHERE kode_kategori_barang = 1 * FROM barang WHERE harga_satuan >= 500.000 kode_barang, nama_barang, harga_satuan FROM barang WHERE nama_barang = Core i7-2600K'

Perintah SELECT seperti ini berfungsi untuk mengambil data dari sebuah tabel yang memenuhi sebuah kondisi tertentu.
SINTAKS : SELECT*|kolomFROMnama_tabelWHEREnama_kolomLIKEnilai CONTOH : SELECT * FROM barang WHERE nama_barang LIKE 'A%' SELECT * FROM barang WHERE nama_barang LIKE '??7?'

Perintah SELECT seperti ini berfungsi untuk mencari data berdasarkan suatu nilai. Pada contoh pertama, akan dilakukan pencarian terhadap barang dengan nama barang yang berawal dengan huruf A. Tanda % berfungsi sebagai pengganti (wildcard) untuk satu atau lebih karakter. Sedangkan pada contoh kedua akan dilakukan pencarian terhadap barang dengan nama barang yang terdiri dari empat karakter dan karakter ketiga dari nama barang tersebut adalah 7. Tanda ? Berfungsi sebagai pengganti untuk satu karakter.
SINTAKS : SELECT*|kolomFROMnama_tabelWHEREkondisi_1AND|ORkondisi_2 CONTOH : SELECT * FROM barang WHERE harga_satuan >= 100000 AND harga_satuan < 500000 SELECT * FROM barang WHERE nama_barang LIKE '%Radeon%' OR kode_kategori_barang = 16 SELECT * FROM barang WGERE nama_barang LIKE '%Intel%' AND kode_kategori_barang = 3 AND harga_satuan <= 1500000

emp4tbelas

emp4tbelas

Perintah SELECT seperti ini berfungsi untuk mengambil data berdasarkan beberapa kondisi. Jika menggunakan AND maka kedua kondisi harus terpenuhi, sedangkan jika menggunakan OR maka cukup satu kondisi saja yang terpebuhi.
SINTAKS : SELECT*|kolomFROMnama_tabelWHEREnama_kolomBETWEENnilai_bawahANDnilai_atas CONTOH : SELECT * FROM barang WHERE harga_satuan BETWEEN 500000 AND 750000 SELECT * FROM barang WHERE nama_barang BETWEEN 'd' AND 'j'

Perintah SELECT seperti ini berfungsi untuk mengambil data berdasarkan rentang dari suatu nilai.
SINTAKS : SELECT*|kolom FROMnama_tabelWHEREnama_kolomIN(nilai_1, nilai_2, nilai_3, ...) CONTOH : SELECT * FROM barang WHERE kode_kategory_barang IN (1, 2, 3)

Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki suatu nilai tertentu.
SINTAKS : SELECT*|kolom FROMnama_tabelWHEREnama_kolomNOTIN(nilai_1, nilai_2, nilai_3, ...) CONTOH : SELECT * FROM barang WHERE kode_kategory_barang NOT IN (1, 2, 3, 5, 7, 9)

Perintah SELECT seperti ini berfungsi untuk mengambil data yang tidak memiliki suatu nilai tertentu. Perintah ini adalah kebalikan dari perintah SELECT yang menggunakan IN.
SINTAKS : SELECT *|kolomFROMnama_tabelWHEREnama_kolom IS NULL CONTOH : SELECT * FROM barang WHERE keterangan IS NULL

Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki nilai yang kosong pada suatu kolom.
SINTAKS : SELECT *|kolomFROMnama_tabelWHEREnama_kolom IS NOT NULL CONTOH : SELECT * FROM barang WHERE keterangan IS NOT NULL

Perintah SELECT seperti ini berfungsi untuk mengambil data yang memiliki nilai (tidak kosong) pada suatu kolom.Perintah ini adalah kebalikan dari perintah SELECT yang menggunakan IS NULL.

emp4tbelas

emp4tbelas SINTAKS : SELECT*|kolomFROMnama_tabel kondisiORDER BYnama_kolom[DESC] CONTOH : SELECT * FROM barang ORDER BY harga_satuan SELECT kode_barang, nama_barang, harga_satuan WHERE kode_kategori_barang = 13 ORDER BY harga_satuan DESC

Perintah SELECT seperti ini berfungsi untuk mengambil data dan menurutkannya berdasarkan suatu kolom secara menaik (A sampai Z). Jika keterangan tambahan DESC digunakan, maka pengurutan akan berjalan secara menurun (A sampai Z).
SINTAKS : SELECTAVG|SUM|MAX|MIN|COUNT(kolom) FROMnama_tabel kondisi CONTOH SELECT SELECT SELECT : AVG(harga_satuan) FROM barang MAX(harga_satuan) FROM barang WHERE kode_kategori_barang = 4 COUNT(kode_barang) FROM barang WHERE harga_satuan <= 250000

Perintah SELECT seperti ini berfungsi untuk menghitung rata-rata (AVG), jumlah (SUM), nilai tertinggi (MAX), nilai terendah (MIN), dan jumlah data (COUNT) pada suatu kolom.
SINTAKS : SELECTy.nama_kolom_1, y.nama_kolom_2, ..., x.nama_kolom_1, x.nama_kolom_2 FROMnama_tabel_1 x JOINnama_tabel_2 y ON x.foreign_key = y.primary_key CONTOH : SELECT k.kode_kategori, k.nama_kategori, b.kode_barang, b.nama_barang, b.harga_satuan FROM barang b JOIN kategori k ON b.kode_kategori_barang = k.kode_kategori

Perintah SELECT seperti ini berfungsi untuk mengambil dari dari beberapa tabel yang memiliki hubungan secara sekaligus.

1.2.3 MENGUBAH DATA

Perintah UPDATE berfungsi untuk mengubah data yang terdapat di dalam sebuah tabel. Perlu diperhatikan bahwa apabila tidak menggunakan kondisi dalam perintah ini, maka semua data yang terdapat di dalam tabel tersebut akan terubah.
SINTAKS : UPDATEnama_tabel SETnama_kolom_1 = nilai_kolom_1, nama_kolom_2 = nilai_kolom_2, ... WHERE kondisi CONTOH : UPDATE barang SET nama_barang = 'nVidia GeForce GTX460 1GB' WHERE kode_barang = 431

emp4tbelas

emp4tbelas UPDATE barang SET harga_satuan = 1500000, berat = 10 WHERE nama_barang LIKE 'Lian-Li%'

1.2.4 MENGHAPUS DATA

Perintah DELETE FROM berfungsi untuk menghapus data yang terdapat di dalam sebuah tabel. Sama halnya dengan perintah UPDATE, apabila tidak menggunakan kondisi dalam perintah ini, maka semua data yang terdapat di dalam tabel tersebut akan terhapus.
SINTAKS : DELETE FROMnama_tabel WHEREkondisi CONTOH : DELETE FROM barang WHERE kode_kategori_barang = 5 DELETE FROM barang WHERE kode_barang IN (1, 56, 75, 32)

1.3 MENGGUNAKAN PHPMYADMIN

Melakukan manajemen data yang terdapat di dalam sebuah basis data secara manual dengan menggunakan perintah SQL sebenarnya bukanlah metode yang paling efisien. Perintah SQL sebaiknya hanya digunakan oleh program aplikasi untuk mengakses data, bukan untuk melakukan manajemen terhadap data. Untuk melakukan manajemen terhadap data yang disimpan dengan menggunakan sistem manajemen basis data MySQL, Anda dapat menggunakan phpMyAdmin. PhpMyAdmin adalah sebuah aplikasi berbasis web yang dapat mempermudah proses manajemen data di dalam sebuah basis data MySQL. Anda cukup melakukan klik melalui tampilannya tanpa perlu menggunakan perintah SQL. PhpMyAdmin pada umumnya juga sudah diukung oleh banyak penyedia layanan hosting.

1.3.1 BEKERJA DENGAN PENGGUNA

Agar data yang terdapat di dalam basis data Anda dapat digunakan oleh sebuah program aplikasi, Anda harus terlebih dahulu membuat sebuah akun pengguna untuk aplikasi tersebut. Berikut adalah langkah-langkah untuk membuat pengguna dengan menggunakan phpMyAdmin :

emp4tbelas

emp4tbelas

1. Dari jendela awal phpMyAdmin, pilih tab Privileges.

2. Klik tautan Add a New User.

3. Masukkan username pengguna. 4. Pilih Localhost. 5. Masukkan kata sandi pengguna.

emp4tbelas

emp4tbelas

6. Tekan tombol Go pada bagian kanan bawah untuk melanjutkan.

1. Pilih nama skema yang akan digunakan.

1. Ceklis kolom SELECT, INSERT, UPDATE, dan DELETE. 2. Tekan Go untuk menyelesaikan proses pembuatan pengguna baru.

emp4tbelas

emp4tbelas

Berikut adalah langkah-langkah untuk menghapus pengguna dengan menggunakan phpMyAdmin : 3. Dari jendela awal phpMyAdmin, pilih tab Privileges. 4. Ceklis user yang ingin dihapus. 5. Tekan tombol Go yang berada di kanan bawah.

emp4tbelas

emp4tbelas

BAB 1:MENGGUNAKAN PHP

emp4tbelas

emp4tbelas

1.1 PENGERTIAN PHP

PHP, singkatan berulang dari PHP: Hypertext Preprocessor, adalah sebuah bahasa pemrograman yang didesain secara spesifik untuk membuat sebuah situs web yang bersifat dinamis dan interaktif. PHP adalah bahasa pemrograman web yang sangat populer, bahkan dapat dikatakan sebagai bahasa pemrograman web yang paling banyak digunakan. Menurut survei dari Netcraft, ada lebih dari 20 juta situs web yang dibuat dengan menggunakan PHP pada tahun 2007. PHP pertama kali dikembangkan oleh Rasmus Lerdorf pada tahun 1995, dimana pada saat itu kepanjangan dari PHP masih berupa Personal Home Page. PHP pada awalnya hanyalah ditujukan untuk membuat sebuah situs web pribadi yang sederhana, namun PHP ternyata menjadi sangat populer dan kemudian berkembang menjadi sebuah bahasa pemrograman web yang lengkap seperti sekarang ini. Salah satu faktor utama yang berada di belakang kesuksesan ini adalah PHP merupakan sebuah perangkat lunak free and open source. Semua orang dapat mendapatkan dan menggunakan PHP dengan gratis dan bebas. PHP sendiri saat ini masih terus dikembangkan dengan dukungan dari sebuah perusahaan yang bernama Zend Technologies. Dalam penggunaannya, PHP akan menyisipkan perintah-perintah khusus di dalam sebuah dokumen HTML. Perintah-perintah PHP pada umumnya dikenal dengan istilah PHP statement (pernyataan PHP). Sebuah dokumen HTML yang telah disisipkan pernyataan-pernyataan PHP akan menjadi sebuah dokumen PHP atau yang juga dikenal dengan istilah PHP script.

1.2 HALO, DUNIA!

Seperti halnya ketika Anda mempelajari bahasa HTML, marilah terlebih dahulu membuat sebuah program Halo, Dunia! dengan menggunakan bahasa PHP. Untuk membuat sebuah dokumen PHP, caranya tidak jauh berbeda dengan membuat sebuah dokumen HTML. Anda cukup membuka aplikasi penyunting berkas Anda dan mengetikkan skrip PHP dan HTML di dalamnya. Cobalah membuat sebuah dokumen baru sebagai berikut ini :
<!doctype html> <html> <head> <title>Halo, Dunia!</title> </head> <body> <?php echo 'Halo, Dunia!'; ?> </body>

emp4tbelas

emp4tbelas </html>

Jika Anda menyimpan sebuah dokumen HTML dengan ekstensi berkas .html, maka untuk sebuah dokumen PHP Anda perlu menggunakan ekstensi berkas .php. Oleh karena itu, simpanlah dokumen tersebut dengan nama halo.php. Sebuah halaman web yang menggunakan PHP tidak dapat langsung dibuka dengan menggunakan peramban web. Hal ini disebabkan karena pernyataan-pernyataan PHP yang terdapat di dalamnya tidak dapat dimengerti oleh sebuah peramban web. Melainkan, pernyataan-pernyataan tersebut harus terlebih dahulu diproses oleh sebuah server web. Setelah proses selesai, barulah hasilnya dikirmkan ke peramban web dalam bentuk dokumen HTML biasa. Pada aplikasi server web Apache, semua dokumen PHP yang akan diproses cukup diletakkan di dalam folder htdocs. Oleh karena itu, simpanlah dokumen PHP Anda pada folder ini. Jika Anda melakukan instalasi Apache dengan menggunakan XAMPP pada sistem operasi Windows, folder ini akan terletak di dalam C:\xampp. Selain menyimpan dokumen PHP pada lokasi yang benar, Anda juga perlu menjalankan Apache terlebih dahulu. Untuk melakukan ini, Anda dapat membuka aplikasi XAMPP Control Panel dari Start Menu Anda. Pada jendela XAMPP Control Panel, nyalakanah server web Apache (dan MySQL, jika Anda memerlukana) dengan menekan tombol Start yang ada pada masing-masing komponen. Jika dokumen PHP sudah disimpan pada lokasi dan benar dan Apache sudah berjalan, bukalah peramban web Anda lalu arahkan ke alamat http://localhost/halo.php untuk meminta Apache memproses dokumen tersebut dan mengirimkan hasilnya ke peramban web Anda. Perlu diketahui bahwa alamat localhost disini berarti server web tersebut berada pada komputer yang sama dengan peramban web yang digunakan. Jika semua berjalan dengan lancar dan Anda dapat melihat teks Halo, Dunia! pada peramban web Anda, maka Anda telah berhasil membuat halaman web dinamis pertama Anda dengan menggunakan PHP. Selamat!

<?php ... ?>

Tag ini adalah tag khusus yang digunakan untuk menyisipkan pernyataan-pernyataan PHP di antara kode-kode HTML. Anda dapat menyisipkan sebanyak apapun pernyataanpernyataan PHP yang Anda inginkan di dalam tag ini. Anda juga diperbolehkan untuk menggunakan tag ini sebanyak yang Anda inginkan di dalam sebuah dokumen PHP. Perlu diperhatikan bahwa semua yang berada di dalam tag ini tidak akan dimunculkan pada peramban web Anda. Jika Anda penasaran, cobalah melihat kode sumber dari halaman tersebut pada peramban web Anda dengan melakukan klik kanan dan memilih lihat kode sumber halaman atau view page source. Penyembunyian pernyataan-pernyataan PHP seperti ini akan menjadikan halaman web dinamis Anda

emp4tbelas

emp4tbelas

aman karena pengguna tidak akan dapat mengetahui proses yang dilakukan pada server web. Selain itu, perlu diketahui bahwa tag ini dapat diletakkan di mana saja, baik itu diluar elemen HTML, di dalam sebuah tag, atau bahkan di dalam sebuah atribut. Sebagai contoh :
<a href="<?php echo 'http://www.php.net'; ?>">Situs web resmi PHP</a>

echo ...

Pernyataan echo berfungsi untuk menampilkan sesuatu di dalam peramban web. Perintah ini dapat digunakan untuk menampilkan hasil dari proses yang telah dilakukan pada sebuah halaman web dinamis. Anda dapat menampilkan apa saja dengan menggunakan perintah echo, baik itu angka, teks, atau bahkan tag dan elemen HTML. Hanya saja, untuk menampilkan data berupa teks (termasuk di dalamnya tag dan elemen HTML), Anda perlu meletakkannya di dalam sepasang tanda kutip satu (). Perlu diperhatikan bahwa setiap pernyataan PHP harus diakhiri dengan tanda titik dua seperti halnya sebuah properti pada CSS. Tanda titik dua yang terlupakan adalah kesalahan kecil namun fatal yang sering terjadi, terutama apabila Anda baru mempelajari PHP. Perhatikanlah setiap pernyataan PHP yang Anda buat dengan teliti dan pastikan Anda sudah mengakhirinya dengan tanda titik dua.

1.3 MENDOKUMENTASIKAN DOKUMEN PHP

Di dalam sebuah bahasa pemrograman (termasuk PHP), dokumentasi digunakan untuk memperjelas tujuan dan cara kerja dari sebuah program (halaman web dinamis termasuk ke dalam sebuah program). Pada sebuah program yang rumit, proses pendokumentasian memegang peranan yang sangat penting. Dokumentasi dari sebuah program dapat digunakan sebagai referensi oleh programmer lain untuk memahamami program tersebut. Selain itu, dokumentasi juga dapat digunakan oleh sang programmer asli untuk memahami kembali program tersebut apabila ia sudah lama (dan lupa) tidak melihat program tersebut. Proses pendokumentasian dilakukan dengan menambahkan komentar-komentar pada bagian-bagian dari program yang dirasa perlu untuk diberikan penjelasan tambahan. Di dalam bahasa PHP, ada dua cara yang dapat digunakan untuk memberikan komentar, yaitu pemberian komentar perbaris dan pemberian komentar blok. Untuk memberikan sebaris komentar pada sebuah bagian dari dokumen PHP, Anda cukup mengawali baris tersebut dengan dua buah garis miring (//) atau sebuah tanda pagar (#). Perhatikanlah contoh berikut :
<?php // Tampilkan teks "Halo, Dunia!"

emp4tbelas

emp4tbelas echo 'Halo, Dunia!'; # Komentar juga dapat setelah sebuah pernyataan ?>

Baris ke-2 pada contoh diatas adalah sebuah baris komentar, sedangkan baris ke-3 adalah sebuah pernyataan PHP dengan sebuah komentar yang diletakkan di akhirnya. Perlu diperhatikan bahwa Anda tidak perlu mengakhiri sebuah komentar dengan tanda titik koma. Kadangkala, Anda mungkin ingin memberikan sebuah komentar yang cukup panjang, mungkin terdiri dari beberapa baris dan paragraf. Untuk komentar seperti ini, Anda dapat membuat sebuah blok komentar. Anda dapat membuat blok komentar dengan menuliskan komentar-komentar Anda diantara simbol /* dan */. Perhatikanlah contoh berikut :
<?php /* Halaman web "Halo, Dunia!" Versi 1.0 Dibuat oleh : Emp4tbelas Tanggal : 1 Januari 2010 */ ?>

Pada contoh di atas, semua yang berada di dalam tanda /* dan */ adalah sebuah komentar. Seperti halnya dengan komentar baris, Anda juga tidak perlu memberikan tanda titik koma pada komentar blok.

1.4 MENGGUNAKAN VARIABEL

Variabel adalah sebuah tempat yang dapat digunakan untuk menyimpan suatu data atau informasi. Variabel dapat dikatakan sebagai fondasi utama dari sebuah halaman web dinamis. Dengan menggunakan variabel, Anda dapat membuat halaman web Anda menampilkan konten yang berbeda tergantung dari berbagai macam situasi. Anggaplah Anda membuat sebuah formulir yang meminta nama dari pengguna dengan menggunakan sebuah HTML, kemudian Anda menyimpan nama tersebut di dalam variabel agar dapat digunakan untuk keperluan lain. Kemudian, halaman web Anda akan mengingat pengguna-pengguna yang sudah pernah berkunjung dan menampilkan pesan Selamat Datang Kembali! kepada pengguna-pengguna tersebut, sedangkan apabila pengguna tersebut baru pertama kali berkunjung maka halaman web akan menampilkan pesan Selamat Datang! saja. Menggunakan variabel dalam PHP sangatlah mudah, Anda cukup memberikan nama dan nilai atau data yang ingin disimpan saja. Sebagai contoh, jika Anda ingin membuat sebuah variabel bernama $harga dan menyimpan nilai 5000 di dalamnya, maka Anda cukup menuliskan sebuah pernyataan sederhana sebagai berikut :
$harga = 5000;

emp4tbelas

emp4tbelas

Seperti halnya dengan penggunaan pernyataan echo, apabila Anda ingin menyimpan data berupa teks Anda perlu menggunakan tanda kutip satu seperti contoh berikut ini :
$nama = 'Andi Pratama';

Perlu diperhatikan bahwa ada beberapa aturan-aturan yang perlu ditaati dalam pemberian nama kepada sebuah variabel di dalam PHP, yaitu : Nama variabel harus diawali dengan tanda dolar ($). Hal ini dimaksudkan untuk membedakan nama variabel dengan penyataan-pernyataan PHP. Nama variabel harus mencerminkan makna dari nilai yang akan disimpan di dalamnya. Sebagai contoh, jika Anda ingin menyimpan tanggal lahir seseorang, maka gunakanlah nama variabel $tanggal_lahir, jangan gunakan nama yang tidak relevan seperti $ayam_goreng atau nama yang sulit dipahami seperti $x. Nama variabel hanya dapat berisikan huruf (A-Z), angka (0-9) dan garis bawah (_) saja. Sebagai contoh, nama variabel $diskon50% bukanlah nama variabel yang benar. Huruf besar dan huruf kecil di dalam bahasa PHP memiliki makna yang berbeda. Variabel $nama dan $Nama adalah dua buah variabel yang berbeda. Oleh karena itu, sangat disarankan agar Anda selalu menggunakan huruf kecil dalam memberikan nama untuk sebuah variabel. Walaupun nama variabel dapat menggunakan angka, karakter pertama dari nama variabel harus berupa huruf atau garis bawah saja. Sebagai contoh, $jumlah_orang dan $_harga adalah nama variabel yang benar, sedangkan $1bulan adalah nama variabel yang salah. Jika nama variabel terdiri dari dua buah kata atau lebih, maka pisahkanlah antara satu kata dengan kata lainnya dengan menggunakan garis bawah. Sebagai contoh, $alamat_rumah_pertama tentu lebih mudah dibaca daripada $alamatrumahpertama.

Sesuai dengan namanya, variabel dapat memiliki nilai yang berubah-ubah. Misalkan Anda ingin membuat sebuah variabel bernama $x dengan nilai awal 7, namun, entah kenapa Anda ingin merubah nilainya menjadi 700, maka Anda cukup melakukan hal berikut ini :
$x = 7 $x = 700 // Nilai variabel $x saat ini adalah 7 // Sekarang variabel $x memiliki nilai 700

Selain itu, untuk menampilkan nilai dari suatu variabel, Anda cukup menggunakan penyataan echo sebagai berikut :
echo $harga;

emp4tbelas

emp4tbelas

Agar dapat lebih memahami penggunaan variabel dalam PHP, buatlah sebuah dokumen PHP baru sebagai berikut :
<?php $x = 1; $y = 'Halo, Dunia!'; ?> <!doctype html> <html> <head> <title>Pemberian Nilai</title> </head> <body> <p>Pada awalnya variabel $x memiliki nilai <?php echo $x; ?> <?php $x = 'PHP itu gampang gampang susah'; ?> <p>Sekarang variabel $x memiliki nilai <?php echo $x; ?> <?php $x = '<a href="http://www.google.com">Google</a>'; ?> <p>Sekarang variabel $x memiliki nilai <?php echo $x; ?> <?php $x = 123; $x = 456; ?> <p>Sekarang variabel $x memiliki nilai <?php echo $x; ?> <?php $x = $y; ?> <p>Sekarang variabel $x memiliki nilai <?php echo $x; ?> <p>Dan variabel $y memiliki nilai <?php echo $y; ?> </body> </html>

Simpanlah dengan nama variabel.php. Lalu bukalah dengan peramban web Anda.

1.1.1 TIPE DATA DALAM VARIABEL

Data yang disimpan di dalam suatu variabel dapat diklasifikasikan ke dalam beberapa macam tipe. Perbedaan tipe data ini digunakan untuk membedakan operasi-operasi yang dapat dilakukan terhadap data-data tersebut. Sebagai contoh, data dengan tipe angka dapat dikalikan dan memberikan hasil yang berarti misal, 5 x 3 = 15. Namun, bagaimana jika data tersebut adalah teks? Dapatkah sebuah teks dikalikan? Apakah hasil dari a x buku? Jika hal ini dilakukan, maka PHP akan memberikan pesan kesalahan yang memberitahu bahwa operasi perkalian tidak dapat dilakukan untuk data dengan tipe teks. 2

emp4tbelas

emp4tbelas

Berikut adalah tipe-tipe data yang dapat dikenali oleh PHP : Integer atau bilangan bulat, yaitu bilangan yang tidak memiliki nilai desimal. Contoh : -457, 0, 7, dan sebagainya. Float atau bilangan real, yaitu bilangan yang memiliki nilai desimal. Contoh : -1.79, 457.1, 3.14, dan sebagainya. String atau teks, yaitu suatu rangkaian dari satu karakter/huruf atau lebih. Dalam penulisannya, string harus diletakkan di antara sepasang tanda kutip satu (). Perlu diketahui bahwa angka yang diletakkan di dalam tanda kutip satu akan menjadi string. Sebagain contoh, 127 adalah sebuah integer sedangkan 127 adalah sebuah string. Boolean, yaitu nilai benar (TRUE) dan salah (FALSE).

Pada bahasa pemrograman lain, seperti C++ dan Java misalnya, Anda perlu menuliskan tipe data dari suatu variabel secara eksplisit. Dengan PHP, Anda tidak perlu melakukan ini. PHP dapat mengenali tipe data dari suatu variabel secara otomatis. Bahkan, PHP dapat beradaptasi terhadap perubahan tipe data dari suatu variabel secara otomatis. Sebagai contoh :
$x $y $z $x $z = = = = = 10; 15; $x - $y; // Nilai $z sekarang adalah -5 'Halo!' $x - $y; // Terjadi kesalahan

1.1 BERKERJA DENGAN ANGKA

Yang dimaksud dengan angka disini adalah data bertipe integer dan float. Anda dapat melakukan berbagai macam operasi matematika pada tipe data tersebut dengan menggunakan PHP. Operasi yang dapat dilakukan antara lain adalah penjumlahan (+), pengurangan (-), perkalian (*), pembagian (/), dan menghitung sisa pembagian (%). Penggunaan berbagai operasi matematika tersebut sangatlah sederhana. Perhatikanlah beberapa contoh berikut ini :
$hasil = 10 + 7; // Variabel $hasil akan memiliki nilai 17 $x = 7; $hasil = $hasil * $x; // Variabel $hasil akan memiliki nilai 119 echo 14 % 3; // Akan ditampilkan sisa pembagian 14 dengan 3;

PHP juga memiliki aturan prioritas operator yang sama dengan aturan prioritas operator yang ada di dalam matematika. Sebagai contoh, 5 + 3 * 2 akan menghasilkan nilai 11, bukan 16. Hal ini dikarenakan operator perkalian (*) memiliki tingkat prioritas yang lebih tinggi apabila dibandingkan dengan operator penjumlahan (+). Untuk menghindari kebingungan dalam hal ini, Anda dapat menggunakan tanda kurung sebagai alat bantu : 2

emp4tbelas

emp4tbelas $hasil = (5 + 3) * 2;

Selain operator-operator yang tentunya sudah Anda ketahui seperti di atas, ada pula beberapa operator unik yang terdapat di dalam PHP, yaitu : Operator pintasan (+= dan -=). Sesuai dengan namanya, operator pintasan (shorthand operator) dapat digunakan untuk menyingkat operasi tertentu. Operator += berfungsi untuk menambahkan suatu nilai ke dalam suatu variabel sedangkan operator -= berfungsi untuk mengurangi suatu nilai dari suatu variabel. Perhatikanlah contoh berikut ini :

$x = 7; $x = $x + 4; // Nilai $x saat ini adalah 11 $x += 4; // Sama dengan $x = $x + 4, nilai $x saat ini adalah 15 $y = 5 $y = $y - $x; // Nilai $y saat ini adalah -10 $y -= $x // Sama dengan $y = $y - $x, nilai $y saat ini adalah -25

Operator peningkatan dan penurunan (++ dan --). Sesuai dengan namanya, operator-operator tersebut berfungsi untuk meningkatkan atau menurunkan nilai dari suatu variabel sebanyak 1. Perhatikanlah contoh berikut ini :

$x = 12; $x += 1; // Nilai $x saat ini adalah 13 $x++; // Sama dengan $x += 1, nilai $x saat ini adalah 14 $x--; // Sama dengan $x -= 1, nilai $x saat ini adalah 13

Anda juga dapat melakukan berbagai macam operasi matematika tingkat tinggi dengan menggunakan fungsi-fungsi matematis yang sudah disediakan oleh PHP. Beberapa fungsi tersebut antara lain adalah fungsi trigonometri (sin, cos, tan, asin, acos, atan, sinh, cosh, dan tanh), fungsi logaritma (log), dan fungsi untuk mencari akar kuadrat (sqrt). Penggunaan dari fungsi-fungsi tersebut sangatlah sederhana, seperti pada contoh-contoh berikut ini :
$x = sin(90); $y = sqrt(128) + (7 * 2) - 250; $z = sin(log(70));

1.1 BEKERJA DENGAN STRING

Seperti yang sudah dijelaskan sebelumnya, string adalah rangkaian dari satu atau lebih huruf/karakter. Berbeda dengan data dengan tipe angka, operasi aritmatika tidak dapat digunakan untuk data dengan tipe string. Namun, ada sebuah operasi khusus yang dapat dilakukan oleh string, yaitu operasi penggabungan dengan menggunakan operator tanda titik (.). Berikut adalah contoh dari penggunaan operator penggabungan tersebut :
$nama_depan = 'Joni';

emp4tbelas

emp4tbelas $nama_belakang = 'Subejo'; $nama_lengkap = $nama_depan . $nama_belakang;

Nilai dari variabel $nama_lengkap pada contoh di atas adalah JoniSubejo. Hal ini dikarenakan operasi penggabungan string tidak akan menambahkan spasi atau karakter apapun kepada hasil penggabungan. Oleh karena itu, Anda perlu menyisipkan spasi secara manual di antara kedua string tersebut seperti pada contoh berikut ini :
$nama_lengkap = $nama_depan . ' ' . $nama_belakang;

Anda juga dapat menggunakan operator pintasan penggabungan (.=) untuk menggabungkan string :
$teks = 'Halo, '; $teks .= 'Dunia!'; // Nilai $teks sekarang adalah 'Halo, Dunia!'

Sejalan dengan fungsi-fungsi matematis yang dapat digunakan untuk mengolah angka, ada pula fungsi-fungsi string yang dapat digunakan untuk mengolah teks. Diantaranya adalah : strlen(), fungsi ini dapat digunakan untuk mengetahui panjang dari suatu string termasuk spasi. Contoh :

$teks = 'Lorem Ipsum'; $panjang_teks = strlen($teks); // Cara 1, menggunakan variabel $panjang_teks = strlen('Lorem Ipsum') // Cara 2, langsung memasukkan string

str_word_count(), berfungsi untuk menghitung jumlah kata yang terdapat dari suatu string. Sama dengan fungsi strlen(), Anda dapat menghitung string yang disimpan dalam sebuah variabel atau langsung memasukkan string ke dalam fungsi. Contoh :
// Jumlah kata adalah 2

$teks = 'Lorem Ipsum'; $jumlah_kata = str_word_count($teks);

strpos(), berfungsi untuk mencari posisi dari sebuah karakter. Berbeda dengan fungsi-fungsi yang telah Anda pelajari sebelumnya, fungsi ini memerlukan dua buah masukan, yaitu masukan teks asal dan karakter yang ingin dicari Perlu diperhatikan bahwa karakter pertama dari sebuah string menduduki posisi 0, bukan 1. Perhatikanlah contoh berikut ini :

$teks = 'Lorem Ipsum'; $posisi = strpos($teks, 'r'); // Posisi dari r adalah 2 /* Apabila ada dua karakter yang sama, maka yang berlaku adalah karakter yang pertama kali ditemukan */ $posisi = strpos($teks, 'm'); // Posisi dari m adalah 4 /* Apabila karakter tidak ditemukan, maka strpos() akan menghasilkan nilai boolean FALSE */ $posisi = strpos($teks, '7'); // Posisi dari 7 adalah FALSE

emp4tbelas

emp4tbelas

substr(), berfungsi untuk mengambil sebagian teks dari suatu string. Fungsi ini memerlukan tiga buah masukan, yaitu teks asal, posisi memulai pengambilan, dan jumlah huruf yang akan diambil termasuk spasi. Contoh :

$teks = 'Lorem Ipsum'; $sebagian = substr($teks, 2, 3); // Hasilnya adalah 'rem' $sebagian = substr($teks, 0, 7); // Hasilnya adalah 'Lorem i' /* fungsi substr juga dapat mengambil sebagian teks mulai dari kanan apabila digunakan seperti ini */ $sebagian = substr($teks, -5); // Hasilnya adalah 'Ipsum'

strreplace(), berfungsi untuk mengganti sebagian teks dengan teks lainnya. Masukan-masukan yang diperlukan oleh fungsi ini adalah teks yang akan diganti, teks pengganti, dan teks asal. Contoh :

$teks = 'Lorem Ipsum'; $baru = strreplace('m', 'n', $teks); // Hasilnya adalah 'Loren Ipsun' $baru = strreplace('ore', 'ustu', $teks); // Hasilnya adalah 'Lustum Ipsum'

strtolower() dan strtoupper(), adalah fungsi yang dapat digunakan untuk merubah jenis huruf dari suatu teks. strtolower berfungsi untuk mengubah jenis huruf dari suatu teks menjadi huruf kecil semua dan strtoupper berfungsi untuk mengubah menjadi huruf besar semua. Contoh :

$teks = 'Lorem Ipsum'; $besar = strtoupper($teks); // Hasilnya adalah 'LOREM IPSUM' $kecil = strtolower('Lorem Ipsum'); // Hasilnya adalah 'lorem ipsum'

strrev(), berfungsi untuk membalikkan suatu string. Contoh :

$teks = 'Lorem Ipsum'; $sket = strrev($teks); //Hasilnya adalah 'muspI meroL'

empty(), berfungsi untuk mengetahui apakah sebuah string kosong atau tidak. Fungsi ini akan menghasilkan nilai dengan tipe data boolean (TRUE/FALSE). Contoh :

$teks = 'Lorem Ipsum'; $kosong = ''; $cek = empty($teks) // FALSE $cek = empty($kosong) // TRUE $cek = empty($x) // TRUE karena variabel $x tidak pernah ada

1.1 BEKERJA DENGAN TANGGAL DAN WAKTU

Data dan informasi dalam bentuk tanggal dan waktu mungkin dapat menjadi salah satu komponen yang penting di dalam sebuah situs web. Hanya saja, pada umumnya sebuah server web dan sistem manajemen basis data akan menyimpan data tanggal dan waktu dalam bentuk timestamp yang tidak mudah dibaca oleh manusia. Timestamp, atau yang juga dikenal dengan istilah UNIX timestamp, adalah sebuah cara untuk menyimpan tanggal pada sebuah sistem komputer dengan menghitung jumlah detik yang telah berlalu dari tanggal 1 Januari 1970 jam 00:00 GMT. Dengan cara emp4tbelas 1

emp4tbelas

seperti ini, proses perhitungan tanggal yang akan menjadi lebih mudah dikerjakan oleh sebuah sistem komputer, namun penulisan tanggal seperti ini cukup sulit untuk dipahami oleh manusia. Untungnya, PHP memiliki fungsi-fungsi tanggal dan waktu yang dapat mempermudah Anda untuk menkonversi tanggal dan waktu dalam bentuk timestamp ke dalam bentuk yang dapat dimengerti oleh manusia dan sebaliknya. Berikut adalah beberapa dari fungsi-fungsi tersebut : date(), berfungsi untuk mengubah data tanggal dan waktu dalam bentuk timestamp (integer) menjadi bentuk yang dapat dimengerti oleh manusia (string). Fungsi ini memerlukan dua buah masukan, yaitu format dan nilai dari tanggal dan waktu yang akan ditampilkan. Namun, masukan kedua (nilai dari tanggal/waktu) tidak harus digunakan. Apabila masukan kedua ini tidak digunakan, maka fungsi date() akan menggunakan tanggal dan waktu sekarang. Contoh :

echo date('m/d/Y'); // Menampilkan teks '01/01/2010' $waktu = date('H:i:s'); // Nilai dari variabel $waktu adalah '08:00:00' echo date('m/d:s:H-Y'); // Menampilkan teks '01/01/00:08-2010'

Seperti yang diperagakan pada contoh ketiga di atas, Anda dapat dengan bebas menentukan format dari tanggal dan waktu yang akan ditampilkan. Berikut adalah simbol-simbol yang digunakan untuk mewakilkan masing-masing satuan waktu : Simbo l M F M N d j l D w Y y g G h H i s a A U Satuan Waktu Nama bulan disingkat Nama bulan penuh Bulan dengan nol di depan Bulan tanpa nol di depan Tanggal dengan nol di depan Tanggal tanpa nol di depan Nama hari penuh Nama hari disingkat Hari dalam minggu (0 = Minggu sampai 6 = Sabtu) Tahun empat angka Tahun dua angka Jam (AM/PM) tanpa nol di depan Jam (24H) tanpa nol di depan Jam (AM/PM) dengan nol di depan Jam (24H) dengan nol di depan Menit Detik AM/PM dalam huruf kecil AM/PM dalam huruf besar UNIX timestamp Contoh Jan January 02 atau 12 2 atau 11 07 atau 26 16 atau 31 Saturday Sat 3 (Rabu) 2010 10 3 atau 10 3 atau 15 03 atau 10 03 atau 23 05 atau 54 05 atau 54 am PM 10562449 41

emp4tbelas

emp4tbelas

strtotime(), berfungsi untuk mengubah data tanggal dan waktu dari bentuk string menjadi timestamp. Fungsi ini adalah fungsi yang canggih, Anda dapat memberikan berbagai macam masukan seperti teks tanggal, kata kunci, hingga perhitungan tanggal. Agar lebih jelas mengenai penggunaan fungsi ini, perhatikanlah contoh-contoh berikut ini :
= = = = = strtotime('3 Jan 2010'); strtotime('today'); strtotime('now + 10 hours'); strtotime('04:03:52 + 5 minutes + 10 seconds'); strtotime('3 Jan 2010 - 16 weeks');

$timestamp $timestamp $timestamp $timestamp $timestamp

Fungsi strtotime() akan sangat berguna jika digabungkan dengan fungsi date(). Dengan menggabungkan kedua fungsi ini, Anda dapat memformat tanggal dan waktu apa saja yang Anda inginkan. Berikut adalah contoh penggunaanya :
echo date('d/m/Y', strtotime('tomorrow')) // Menampilkan tanggal besok echo date('l', strtotime('4 Aug 1983')) // Menampilkan nama hari pada tanggal 4 Agustus 1983

Agar Anda dapat lebih memahami berbagai operasi dengan tanggal, buatlah sebuah dokumen PHP baru sebagai berikut ini :
<?php $hari_ini = date('m/d/Y'); $saat_ini = date('H:i:s'); ?> <!doctype html> <html> <head> <title>Tanggal dan Waktu</title> </head> <body> <p> Tanggal sekarang : <?php echo $hari_ini; ?><br /> Waktu sekarang : <?php echo $saat_ini; ?><br /> Tanggal lahir Anda : <?php echo date('d/m/Y', strtotime('4 Aug 1983')); ?><br /> Besok adalah hari : <?php echo date('l', strtotime('tomorrow')); ? ><br /> 50 jam dari sekarang adalah : <?php echo date('d/m/Y H:i:s', strtotime('now + 50 hours')); ?><br /> Usia Anda saat ini adalah : <?php echo (strtotime('now') - strtotime('4 Aug 1983')) / 31556926; ?> tahun<br /> </body> </html>

Simpanlah dengan nama tanggal.php lalu bukalah dengan peramban web Anda.

1.1 MEMPROSES FORMULIR

emp4tbelas

emp4tbelas

Agar sebuah halaman web menjadi interaktif, tentunya Anda akan memerlukan masukan data dari pengunjung halaman web Anda. Anda dapat melakukan hal ini dengan menggunakan formulir HTML yang diletakkan pada halaman web Anda. Namun, untuk dapat menerima dan memproses data yang telah dimasukkan tersebut, Anda akan memerlukan bantuan dari PHP. Agar sebuah formulir dapat mengirimkan data yang selanjutnya akan diproses, seorang pengunjung harus melakukan aksi submit terlebih dahulu. Aksi ini dapat dilakukan dengan menekan tombol <input type=submit /> pada formulir tersebut. Selanjutnya, data tersebut akan dikirim ke dokumen pemroses yang namanya terdapat pada atribut action di dalam elemen form. Sebagai contoh, pada sebuah formulir dengan elemen form <form action=proses.php method=post>, data dari formulir akan dikirimkan ke sebuah dokumen php proses.php, dimana pada dokumen inilah semua pemrosesan data yang dikirim akan dilakukan. Selain itu, Anda juga harus memperhatikan atribut name yang terdapat pada komponen-komponen formulir seperti textbox, textarea, radio button, dan sebagainya. Atribut inilah yang nantinya akan memberikan akses kepada PHP untuk mendapatkan data yang terkandung di dalamnya. Pastikanlah Anda memberikan nilai atribut name yang relevan dan mudah dipahami. PHP dapat mengakses data yang dikirimkan oleh sebuah formulir dengan menggunakan sebuah variabel khusus yang bernama $_POST. Sebagai contoh, perhatikanlah sebuah dokumen HTML seperti berikut ini :
<!doctype html> <html> <head> <title>Formulir Sederhana</title> </head> <body> <h1>Formulir Sederhana</h1> <form action="proses_formulir.php" method="post"> <p> Masukkan Nama Anda : <br /> <input name="nama" type="text" size="50" maxlength="100" /> <p><input type="submit" value="Kirim" /> </form> </body> </html>

Formulir yang tedapat pada halaman tersebut memiliki sebuah komponen masukan data dengan nama nama. Anda dapat mengakses data ini melalui dokumen PHP proses_formulir.php dengan cara sebagai berikut :
$nama = $_POST['nama']; // Simpan masukan data ke dalam variabel $name

emp4tbelas

emp4tbelas

Agar dapat lebih memahami proses tersebut secara lebih menyeluruh, cobalah Anda membuat sebuah dokumen HTML sebagai berikut :
<!doctype html> <html> <head> <title>Formulir Pendaftaran</title> </head> <body> <h1>Formulir Pendaftaran </h1> <form action="proses_formulir.php" method="post"> <p> Masukkan Nama Anda : <br /> <input name="nama" type="text" size="50" maxlength="100" /> <p> Masukkan Alamat Anda : <br /> <textarea name="alamat"></textarea> <p> Masukkan Jenis Kelamin Anda : <br /> <input type="radio" name="jenis_kelamin" value="Laki-Laki" /> <input type="radio" name="jenis_kelamin" value="Perempuan" /> <p> Masukkan Agama Anda : <br /> <select name="agama"> <option value="Islam">Islam</option> <option value="Kristen Katolik">Kristen Katolik</option> <option value="Kristen Protestan">Kristen Protestan</option> <option value="Hindu">Hindu</option> <option value="Buddha">Buddha</option> <option value="Lainnya">Lainnya</option> </select> <p><input type="submit" value="Kirim" /> </form> </body> </html>

Simpanlah dengan nama formulir.html. Lalu buatlah dokumen pemroses proses_formulir.php sebagai berikut :
<!doctype html> <html> <head> <title>Proses Pendaftaran</title> </head> <body> <h1>Selamat bergabung!</h1> <hr /> <h2>Harap periksa kembali data diri yang telah Anda masukkan berikut ini :</h2> <p> <ul> <li>Nama : <?php echo $_POST['nama']; ?></li> <li>Alamat : <?php echo $_POST['alamat']; ?></li>

emp4tbelas

emp4tbelas <li>Jenis Kelamin : <?php echo $_POST['jenis_kelamin']; ?></li> <li>Agama : <?php echo $_POST['agama']; ?></li> </ul> </body> </html>

Simpanlah lalu bukalah halaman formulir dengan peramban web Anda dan cobalah mengisi formulir tesebut.

1.2 MEMBUAT HALAMAN DINAMIS

Anggaplah Anda akan membuat sebuah situs web penjualan online. Anda tentunya akan memerlukan banyak halaman untuk menampilkan masing-masing produk yang ingin Anda jual. Jika halaman web yang berfungsi untuk menampilkan produk-produk tersebut bersifat statis, maka tentunya Anda perlu membuat sebuah halaman untuk masing-masing produk. Bayangkan jika Anda memiliki ratusan produk, tentu akan sangat melelahkan dan memakan waktu untuk membuat semua halaman tersebut. Namun, dengan menggunakan sebuah halaman yang bersifat dinamis, Anda cukup membuat sebuah halaman produk saja, dimana nantinya halaman tersebut dapat digunakan untuk menampilkan berbagai jenis produk yang ada. Hal ini dapat dilakukan dengan memberikan keterangan tambahan berupa produk mana yang akan ditampilkan oleh halaman tersebut, selanjutnya PHP akan memproses keterangan tambahan tersebut dan menyesuaikan isi dari halaman tersebut untuk menampilkan produk yang sesuai. Keterangan tambahan seperti ini dikenal dengan istilah querystring. Querystring dapat diletakkan pada alamat dari sebuah halaman web. Berikut adalah contoh dari penggunaan querystring pada sebuah alamat halaman web :
http://www.tokosaya.com/lihat_barang.php?kode_barang=10

Alamat halaman web di atas akan membuka dokumen lihat_barang.php sekaligus memberikan querystring berupa kode_barang dengan nilai 10 kepada halaman tersebut. Dapat Anda perhatikan bahwa di antara nama dokumen dengan querystring dipisahkan dengan sebuah tanda tanya. Sedangkan bentuk dari querystring sendiri mirip dengan bentuk dari sebuah variabel, hanya saja Anda tidak perlu memberikan tanda dolar ($) di depan nama sebuah querystring. Selain itu, Anda juga perlu memberikan tanda kutip untuk data dengan tipe string. Terkadang, Anda mungkin akan memerlukan lebih dari satu nilai untuk diberikan melalui querystring. Untungnya, Anda dapat memberikan lebih dari satu nilai kepada sebuah querystring seperti pada contoh berikut ini :
http://www.tokosaya.com/daftar_barang.php? urutkan=harga&cara=menurun&jumlah_perhalaman=10

emp4tbelas

emp4tbelas

Alamat halaman web diatas memiliki tiga buah querystring, yaitu urutkan dengan nilai harga, cara dengan nilai menurun, dan jumlah_perhalaman dengan nilai 10. Untuk memisahkan sebuah querystring dengan querystring lainnya, Anda dapat menggunakan tanda ampersand (&). Lalu bagaimanakan PHP dapat memproses querystring ini? Ternyata cara pemrosesan data yang terdapat pada querystring mirip dengan pemrosesan data pada formulir. Jika untuk formulir Anda akan menggunakan variabel $_POST, maka untuk querystring Anda cukup menggantinya dengan variabel $_GET, selebihnya, pemakaiannya akan sama :
$metode_pengurutan = $_GET['urutkan']; $cara_pengurutan = $_GET['menurun']; $jumlah_perhalaman = $_GET['jumlah_perhalaman'];

Sekarang marilah kita mencoba menerapkan konsep ini untuk membuat sebuah halaman yang dinamis. Pertama-tama buatlah sebuah halaman HTML sebagai berikut :
<!doctype html> <html> <head> <title>Undian tanpa Undian</title> </head> <body> <h1>Silahkan Pilih Hadiah Anda</h1> <ul> <li><a href="proses_hadiah.php?hadiah=mobil">Mobil sport</a></li> <li><a href="proses_hadiah.php?hadiah=rumah">Rumah mewah</a></li> <li><a href="proses_hadiah.php?hadiah=pesawat">Pesawat pribadi</a></li> </ul> </body> </html>

Simpanlah dengan nama hadiah.html. Jika Anda perhatikan, tatutan yang terdapat pada halaman ini mengarah kepada sebuah dokumen PHP yang bernama proses_query.php, maka buatlah dokumen tersebut sebagai berikut :
<!doctype html> <html> <head> <title>Undian tanpa Undian</title> </head> <body> <h1>Selamat!</h1> <p>Anda telah mendapatkan sebuah <?php echo $_GET['hadiah']; ?> <a href="hadiah.html">Kembali ke Pilihan Hadiah</a> </body> </html>

Simpanlah dan bukalah halaman hadiah.html dengan peramban web Anda, cobalah menggunakan tautan-tautan yang ada. Perhatikan dengan baik perubahan URL pada peramban web Anda. Cobalah mengubah nilai dari querystring langsung dari peramban web Anda. Apakah yang terjadi? 2

emp4tbelas

emp4tbelas

1.3 MENGGUNAKAN ARRAY

Larik atau yang juga dikenal dengan istilah Array adalah sebuah variabel yang memiliki lebih dari satu nilai. Sebuah nilai di dalam array dikenal dengan istilah elemen. Elemen tidak terbatas kepada sebuah nilai saja, sebuah array bahkan dapat memiliki banyak array-array sebagai sebuah elemen di dalamnya. Array seperti ini disebut dengan istilah array multidimensi. Sebuah elemen pada sebuah array dapat direferensikan dengan menggunakan sebuah indeks. Indeks dapat diibaratkan sebagai nomor urut dari sebuah elemen. Agar dapat lebih memahami makna dari array, elemen, dan indeks, perhatikanlah ilustrasi berikut ini : $anggota Nilai Andi Indek 0 s Eleme n

Budi 1 Eleme n

Cici 2 Eleme n

Dedi 3 Eleme n

Emil 4 Eleme n

$anggota adalah sebuah array yang memiliki 5 elemen, yaitu Andi, Budi, Cici, Dedi, dan Emil. Andi memiliki nomor indeks 0, Budi memiliki nomor indeks 1, Cici memiliki nomor indeks 2 dan seterusnya. Perlu diperhatikan bahwa nomor indeks pada sebuah array dimulai dari 0. Ada beberapa cara yang dapat Anda gunakan untuk membuat sebuah array dalam PHP. Cara yang pertama adalah membuat array dan langsung memasukkan elemenelemen dari array tersebut seperti pada contoh berikut ini :
$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil');

Cara kedua adalah dengan membuat sebuah array kosong, baru kemudian memasukkan elemen -elemen dari array tersebut sesuai dengan kebutuhan. Contoh :
$anggota = $anggota[] $anggota[] $anggota[] array(); = 'Andi' = 'Budi' = 'Cici' // // // // Membuat sebuah array kosong Menambahkan elemen 'Andi' pada array Menambahkan elemen 'Budi' pada array Menambahkan elemen 'Cici' pada array

Pada dasarnya, array memiliki sifat yang sama dengan variabel. Anda dapat memanipulasi elemen yang terdapat pada suatu array dengen mereferensikan kepada indeksnya seperti contoh berikut ini :
$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil'); $anggota[1] = 'Rudi' // Nilai dari elemen pada indeks 1 sekarang adalah 'Rudi' $anggota[] = 'Fahri' // Menambahkan elemen 'Fahri' pada array (index 5) $anggota[5] = 'Cecep' // Nilai dari elemen pada indeks 5 sekarang adalah 'Cecep'

emp4tbelas

emp4tbelas

Untuk menghapus sebuah elemen dari sebuah array dengan menggunakan fungsi unset() seperti pada contoh berikut ini :
$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil'); echo $anggota[2] // Menampilkan elemen 'Cici' unset($anggota[2]); // Menghapus elemen 'Cici' echo $anggota[2] // Tidak menampilkan apa-apa echo $anggota[3] // Menampilkan elemen 'Dedi'

Dalam menggunakan array, ada sebuah fungsi yang sangat berguna, yaitu fungsi sizeof(). Fungsi ini dapat digunakan untuk mengetahui jumlah elemen yang terdapat di dalam sebuah array. Berikut adalah contoh penggunaan fungsi ini :
$anggota = array('Andi', 'Budi', 'Cici', 'Dedi', 'Emil'); echo sizeof($anggota); // Hasilnya adalah 5

Agar Anda dapat lebih memahami prinsip penggunaan array, marilah mencoba menerapkannya dengan membuat sebuah dokumen PHP sebagai berikut :
<html> <head> <title>Daftar Anggota</title> </head> <body> <h1>Daftar Anggota Sebelum Regenerasi</h1> <ul> <li><?php echo $anggota[0]; ?></li> <li><?php echo $anggota[1]; ?></li> <li><?php echo $anggota[2]; ?></li> <li><?php echo $anggota[3]; ?></li> <li><?php echo $anggota[4]; ?></li> </ul> <h1>Daftar Anggota Setelah Regenerasi</h1> <?php $anggota[3] = 'Cecep'; $anggota[] = 'Farah'; unset($anggota[0]); ?> <ul> <li><?php echo $anggota[0]; ?></li> <li><?php echo $anggota[1]; ?></li> <li><?php echo $anggota[2]; ?></li> <li><?php echo $anggota[3]; ?></li> <li><?php echo $anggota[4]; ?></li> <li><?php echo $anggota[5]; ?></li> </ul> </body> </html>

1.3.1 MAP
Dalam menggunakan array, mungkin Anda merasa sulit untuk mengingat indeks dari sebuah elemen di dalam array yang cukup besar. Untuk mengatasi masalah ini, PHP menyediakan sebuah fasilitas yang dinamakan map. Dengan menggunakan map, Anda 2

emp4tbelas

emp4tbelas

dapat mendefinisikan sendiri indeks yang akan digunakan untuk setiap elemen dari sebuah array. Untuk lebih jelasnya, perhatikanlah ilustrasi berikut :

$anggota Nilai Andi Indek Direkt s ur

Budi Wadi r

Cici Sekretar is

Dedi Bendaha ra

Emil Satpa m

Jika pada array standar Anda dapat menggunakan $anggota[0], $anggota[1], dan seterusnya, maka pada sebuah map Anda dapat merefensikan sebuah elemen dengan indeks yang telah Anda tetapkan sendiri, seperi $anggota['Direktur'], $anggota['Wadir'], dan seterusnya. Sama seperti array, Anda dapat membuat map dengan langsung memasukkan elemenelemen yang terdapat di dalamnya atau dengan membuat map kosong terlebih dahulu baru kemudian memasukkan elemen-elemennya satu persatu. Perhatikanlah beberapa contoh berikut ini :
// Membuat map dengan cara pertama $anggota = array( 'Direktur' => 'Andi', // Perhatikan penggunaan tanda panah 'Wadir' => 'Budi', 'Sekretaris' => 'Cici', 'Bendahara' => 'Dedi', 'Satpam' => 'Emil' ); // Membuat map dengan cara kedua $anggota = array(); $anggota['Direktur'] = 'Andi'; // Perhatikan penggunaan sama dengan $anggota['Wadir'] = 'Budi'; $anggota['Sekretaris'] = 'Cici'; $anggota['Bendahara'] = 'Dedi'; $anggota['Satpam'] = 'Emil';

Anda juga dapat melakukan manipulasi dan menghapus elemen-elemen yang terdapat pada map dengan cara yang sama seperti pada penggunaan array, hanya saya, Anda sekarang dapat mereferensikan sebuah elemen dengan menggunakan indeks yang Anda buat sendiri.

1.3.2 ARRAY MULTIDIMENSI

Seperti yang sudah dijelaskan sebelumnya, array multidimensi adalah array yang memiliki elemen-elemen berupa array. Array multidimensi juga dikenal dengan istilah matriks. Untuk lebih jelas mengenai array multidimensi, perhatikanlah ilustrasi berikut ini : $karyawan 2

emp4tbelas

emp4tbelas

Anto 0 n 0 Dedi 1 0 Gogo 2 n 0

Bay u 1 Eki 1 Heri 1

Cinta 2 Firdau s 2 Intan 2

Array $karyawan memiliki tiga buah elemen, dimana masing-masing elemen ini juga merupakan sebuah array yang memiliki beberapa elemen. Array seperti ini dinamakan dengan array berdimensi dua. Tentu saja, jika diinginkan Anda dapat membuat array dengan jumlah dimensi yang tidak terbatas. Berikut adalah contoh penggunaan array dengan dua dimensi seperti di atas pada PHP :
// Membuat array dua dimensi $karyawan = array( array('Anton' , 'Bayu', 'Cinta'), array('Dedi' , 'Eki', 'Firdaus'), array('Gogon' , 'Heri', 'Intan') ); // Manipulasi data $karyawan[0][2] = 'Pandu'; // Menambah elemen tingkat pertama $karyawan[] = array('Joni', 'Kiki'); // Menambah elemen tingkat kedua $karyawan[3][] = 'Lulu'; // Menghapus elemen unset($karyawan[2][1]); unset($karyawan[0]);

Selain array multidimensi, Anda juga dapat membuat map multidimensi dengan seperti berikut ini :
// Membuat map dua dimensi $karyawan = array( 'Penjualan' => array( 'Bos' => 'Anton', 'Wakil' => 'Bayu', 'Pegawai' => 'Cinta' ), 'Produksi' => array( 'Tukang Kayu' => 'Dedi', 'Tukang Besi' => 'Eki', 'Tukang Bolos' =>'Firdaus' ), 'Keuangan' => array( 'Jual beli' => 'Gogon', 'Exim' => 'Heri',

emp4tbelas

emp4tbelas 'Bank' => 'Intan' ); )

1.4 MENGATUR ALUR PROGRAM

Hingga saat ini, Anda sudah mempelajari bagaimana membuat sebuah halaman web dinamis yang sederhana dengan menggunakan PHP. Namun, ada kalanya Anda memerlukan sebuah halaman yang lebih kompleks. Misalkan Anda ingin menampilkan halaman web yang berbeda untuk pengunjung biasa dengan anggota. Atau mungkin Anda ingin mengulang sebuah aksi berkali-kali tanpa perlu menulis ulang aksi tersebut. Sebagai contoh, anggaplah Anda ingin mempunyai sebuah halaman web yang akan menyapa setiap pengunjung yang datang. Anda ingin menyapa pengunjung dengan kata Selamat Pagi! jika pengunjung tersebut membuka halaman web Anda pagi hari, Selamat Siang! pada siang hari, Selamat Sore! pada sore hari dan Selamat Malam! pada malam hari. Untuk itu, Anda tentunya menginginkan sesuatu seperti ini :
jika sekarang pagi hari : echo 'Selamat Pagi!'; sedangkan jika sekarang siang hari : echo 'Selamat Siang!'; sedangkan jika sekarang sore hari : echo 'Selamat Sore!'; sedangkan sekarang malam hari : echo 'Selamat Malam!';

Atau mungkin Anda ingin menampilkan data-data yang terdapat di dalam sebuah basis data, namun, karena Anda tidak mengetahui secara pasti jumlah data yang terdapat di dalamnya dan kemungkinan jumlah data yang dapat terus berubah-ubah, Anda mungkin menginginkan sesuatu seperti ini :
untuk setiap data barang yang ada : echo $nama_barang; echo $harga_satuan;

Anda dapat melakukan hal-hal diatas dengan mengatur alur dari sebuah program PHP. Ada dua macam pengaturan alur program yang dapat Anda gunakan, yaitu percabangan dan pengulangan. Namun, sebelum masuk lebih jauh ke dalam percabangan dan pengulangan, marilah terlebih dahulu mengenal apa yang dimaksud dengan kondisi.

1.4.1 MENGGUNAKAN KONDISI

Kondisi adalah sebuah pernyataan khusus dalam PHP yang berfungsi untuk menguji atau mengevaluasi apakah pernyataan tersebut benar atau salah. Kondisi adalah komponen paling penting dari percabangan dan pengulangan, dimana kondisi akan menentukan apakah aksi apa saja yang harus dilakukan dan berapa kali suatu aksi harus diulang. 3

emp4tbelas

emp4tbelas

Dalam membuat sebuah kondisi, Anda akan menanyakan sebuah pertanyaan yang akan membandingkan beberapa nilai, misalkan : Apakah nilai dari variabel $x sama dengan nilai dari variabel $y? Apakah hari ini adalah hari Minggu? Apakah panjang dari sebuah string lebih besar daripada 10 karakter?

Untuk melakukan perbandingan-perbandingan seperti di atas, Anda akan memerlukan sebuah operasi yang dinamakan dengan operasi perbandingan (comparison). Operasi seperti akan menghasilkan sebuah nilai dengan tipe data boolean, yaitu benar/TRUE, dan salah/FALSE. Berikut adalah operator-operator yang dapat digunakan dalam operasi perbandingan : Operator ==, berfungsi untuk mengetahui apakah dua buah nilai adalah nilai yang sama. Operator != dan <>, berfungsi untuk mengetahui apakah dua buah nilai adalah nilai yang berbeda. Operator > dan <, berfungsi untuk mengetahui apakah sebuah nilai lebih besar atau lebih kecil dari nilai lainnya. Operator >= dan <=, berfungsi untuk mengetahui apakah sebuah nilai lebih besar atau kecil atau sama dengan nilai lainnya. Operator !, berfungsi untuk membalikkan nilai kebenaran dari suatu kondisi. TRUE akan menjadi FALSE dan FALSE akan menjadi TRUE. Mudahnya, dapat dibacah sebagai not atau tidak.

Perlu diperhatikan bahwa operasi perbandingan hanya dapat dilakukan jika kedua nilai yang dibandingkan memiliki tipe data yang sama. Apabila Anda mencoba untuk membandingkan dua nilai yang memiliki tipe data yang berbeda, seperti membandingkan angka dengan string, maka akan terjadi sebuah kesalahan. Berikut adalah beberapa contoh dari operasi perbandingan :
$a == $b; strlen($teks) >= 20; !empty($teks); 12 < 7; $nama !='Toto';

Terkadang, Anda akan memerlukan sebuah operasi perbandingan yang membandingkan banyak hal. Sebagai contoh, kriteria seorang siswa untuk mendapatkan beasiswa adalah memiliki nilai rata-rata diatas 70 dan tidak pernah bolos. Anda mungkin akan memerlukan sebuah operasi perbandingan sebagai berikut :

emp4tbelas

emp4tbelas $nilai_rata_rata > 70 dan $tidak_pernah_bolos;

Untuk melakukan hal seperti itu, Anda dapat menggunakan operator penggabungan kondisi berikut ini : Operator && (dan), operasi dengan operator ini akan memberikan nilai TRUE jika semua kondisi yang ada terpenuhi, selain itu, operator ini akan memberikan nilai FALSE. Contoh :

// Perhatikan penggunaan kurung berikut ini ($nilai_rata_rata > 70) && ($bolos == 0); // Dengan tiga kondisi ($a > 90) && ($b <= 60) && (strlen($c) == 10);

Operator || (atau), operasi dengan operator ini akan memberikan nilai TRUE jika ada salah satu saja dari kondisi yang terpenuhi. Jika tidak ada kondisi yang terpenuhi maka operator ini akan memberikan nilai FALSE. Contoh :

($nilai_rata_rata < 50) || ($bolos >= 10); // Gabungan ($a > 90) && ($b <= 60) && ((strlen($c) == 10) || ($x != 5));

1.1.1 MENGGUNAKAN PERCABANGAN

Sesuai dengan namanya, dengan menggunakan percabangan Anda dapat membuat sebuah halaman web yang dapat melakukan aksi yang berbeda-beda tergantung dari suatu kondisi tertentu. Hal seperti ini juga dikenal dengan istilah pengambilan keputusan atau decision making. Di dalam bahasa PHP, ada dua macam percabangan yang dapat dilakukan, yaitu percabangan dengan menggunakan pernyataan if dan percabangan dengan menggunakan pernyataan switch. 1.1.1.1 PERCABANGAN DENGAN IF Penyataan if akan mengevaluasi sebuah kondisi dan melakukan serangkaian aksi (blok) apabila kondisi tersebut terpenuhi. Berikut adalah bentuk penulisan dari pernyataan if :
if ( kondisi ) { aksi } elseif ( kondisi ) { aksi } else { aksi }

Sebuah pernyataan if terdiri dari tiga bagian, yaitu :

emp4tbelas

emp4tbelas

Bagian if, pada bagian ini akan dilakukan pengujian terhadap suatu kondisi dan apabila kondisi tersebut terpenuhi maka serangkaian aksi akan dilakukan. Bagian ini adalah bagian paling dasar dan harus digunakan dalam setiap pernyataan if. Berikut adalah contoh penggunaan bagian ini :

if ($a == $b) { echo 'Bilangan A dan B memiliki nilai yang sama!'; }

Pada contoh di atas, apabila variabel $a dan $b memiliki nilai yang sama, maka pernyataan echo yang terdapat di dalam blok di bawahnya akan dijalankan. Sedangkan apabila variabel $a dan $b tidak memiliki nilai yang sama, maka tidak akan ada aksi yang diambil dan program akan terus berjalan ke pernyataan selanjutnya (percabangan telah selesai). Perlu diperhatikan bahwa sebuah blok diawali dan diakhiri dengan sebuah kurung kurawal. Di dalam sebuah blok dapat diletakkan berbagai macam pernyataan dengan jumlah yang tidak terbatas, bahkan, Anda dapat meletakkan penyataan if kedua di dalam sebuah blok jika diperlukan. Bagian elseif, apabila kondisi yang berada pada bagian sebelumnya tidak terpenuhi, maka akan dilakukan pengujian terhadap kondisi yang terdapat di bagian ini. Penggunaan bagian ini dalam suatu pernyataan if tidaklah diharuskan, Anda cukup menggunakan bagian ini seperlunya saja. Namun, jika memang diperlukan, Anda dapat menggunakan bagian ini lebih dari satu kali. Bagian ini dapat digunakan jika Anda ingin membuat sebuah percabangan dengan banyak cabang. Contoh :

if ($a == $b) { echo 'Bilangan A dan B memiliki nilai yang sama!'; } elseif ($a < $b) { echo 'Bilangan A lebih kecil dari bilangan B!'; } elseif ($a > $b) { echo 'Bilangan A lebih besar dari bilangan B!'; }

Pada contoh di atas, pertama-tama akan dilakukan pengujian apakah variabel $a memiliki nilai yang sama dengan variabel $b. Jika ya, maka pernyataan echo yang pertama akan dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian apakah variabel $a lebih kecil dari variabel $b. Jika ya, maka pernyataan echo yang kedua akan dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian apakah variabel $a lebih besar dari variabel $b. Jika ya, maka pernyataan echo yang ketiga akan dijalankan dan kemudian percabangan berakhir. Jika tidak juga, maka tidak akan ada aksi yang dijalankan dan percabangan akan berakhir, melanjutkan ke pernyataan selanjutnya. Bagian else, apabila semua kondisi yang berada pada bagian-bagian sebelumnya tidak ada yang terpenuhi, maka akan dilakukan aksi yang terdapat pada blok bagian ini. Sama seperti penggunaan blok elseif, penggunaan blok ini emp4tbelas 1

emp4tbelas

juga tidak diharusnkan. Namun, dalam setiap pernyataan if hanya boleh ada satu blok else saja. Perhatikanlah contoh berikut ini :
if ($a == $b) { echo 'Bilangan A dan B memiliki nilai yang sama!'; } else { echo 'Bilangan A dan B memiliki nilai yang berbeda!'; }

Pada contoh di atas, apabila variabel $a dan $b memiliki nilai yang sama, maka pernyataan echo yang pertama akan dijalankan, sedangkan jika tidak, maka pernyataan echo yang kedua akan dijalankan.
if ($a == $b) { echo 'Bilangan A dan B } elseif ($a < $b) { echo 'Bilangan A lebih } elseif ($a > $b) { echo 'Bilangan A lebih } else { echo 'Bilangan A dan B }

memiliki nilai yang sama!'; kecil dari bilangan B!'; besar dari bilangan B!'; memiliki nilai yang tidak jelas!';

Pada contoh di atas, pertama-tama akan dilakukan pengujian apakah variabel $a memiliki nilai yang sama dengan variabel $b. Jika ya, maka pernyataan echo yang pertama akan dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian apakah variabel $a lebih kecil dari variabel $b. Jika ya, maka pernyataan echo yang kedua akan dijalankan dan kemudian percabangan berakhir. Jika tidak, maka akan dilakukan pengujian apakah variabel $a lebih besar dari variabel $b. Jika ya, maka pernyataan echo yang ketiga akan dijalankan dan kemudian percabangan berakhir. Jika tidak juga, pernyataan echo yang keempat akan dijalankan dan kemudian percabangan berakhir, melanjutkan ke pernyataan selanjutnya. Seperti yang sudah dijelaskan sebelumnya, Anda dapat meletakkan penyataan if lagi di dalam sebuah penyataan if. Penggunaan pernyataan yang berlapis-lapis seperti ini disebut dengan istilang penyataan bersarang (nested statement). Berikut adalah contoh penggunaan if bersarang :
if (!empty($_POST['username'])) { if ((strlen($_POST['username']) > 20) { echo 'Username maksimal 20 karakter!'; } if ((strlen($_POST['username']) < 6) { echo 'Username minimal 6 karakter!'; } ) else { echo 'Username harus diisi!'; }

Pada contoh yang terdapat di awal bagian 1.11, dikatakan bahwa dengan menggunakan percabangan Anda dapat menampilkan halaman dengan tampilan yang 2

emp4tbelas

emp4tbelas

berbeda-beda tergantung dari suatu kodisi. Untuk melakukan hal ini, Anda dapat membuat pernyataan if yang melewati batas. Maksud dari melewati batas disini adalah pernyataan if tersebut melewati batasan tag <?php dan ?> seperti yang dicontohkan pada dokumen PHP berikut ini :
<?php $sekarang = date('G'); ?> <!doctype html> <html> <head> <title>Halaman Awal</title> </head> <body> <?php if (($sekarang >= 2) && <h1>Selamat Pagi!</h1> <?php } elseif (($sekarang >= <h1>Selamat Siang!</h1> <?php } elseif (($sekarang >= <h1>Selamat Sore!</h1> <?php } elseif (($sekarang >= <h1>Selamat Malam!</h1> <?php } ?> </body> </html>

($sekarang < 10)) { ?> 10) && ($sekarang < 10)) 15) && ($sekarang < 15)) 18) && ($sekarang < 18)) { ?> { ?> { ?>

Pada contoh di atas, dapat dilihat bawah blok-blok yang terdapat pada pernyataan if melewati batasan tag <?php dan ?>. Jika jam sekarang lebih besar atau sama dengan jam 2 dan lebih kecil dari jam 10, maka blok HTML pertama (Selamat Pagi!) akan ditampilkan, sedangkan apabila jam sekarang lebih besar atau sama dengan jam 10 dan lebih kecil dari jam 15, maka blok HTML kedua (Selamat Siang!) akan ditampilkan, begitu seterusnya. Dengan menggunakan cara seperti ini, Anda dapat menyisipkan blok HTML yang besar di dalam sebuah percabangan, menjadikan proses perubahan konten dari sebuah halaman berdasarkan suatu kondisi lebih mudah dilakukan. 1.1.1.1 PERCABANGAN DENGAN SWITCH Berbeda dengan pernyataan if yang akan menguji sebuah kondisi untuk menentukan aksi yang akan diambil, penyataan switch akan mengevaluasi nilai dari sebuah variabel dan mengambil aksi tertentu berdasarkan nilai tersebut. Berikut adalah bentuk dari penulisan pernyataan switch :
switch ( variabel ) { case nilai : aksi break; case nilai : aksi break; ... default :

emp4tbelas

emp4tbelas aksi break;

Berikut adalah penjelasan dari bagian-bagian yang terdapat di dalam pernyataan ini : Bagian switch, bagian ini akan menerima variabel yang akan dievaluasikan nilainya. Bagian ini harus digunakan dalam setiap pernyataan switch. Bagian case, bagian ini akan mengevaluasikan nilai dari variabel yang diberikan pada bagian swicth terhadap suatu nilai. Jik variabel tersebut memiliki nilai yang sama dengan nilai yang dievaluasikan, maka aksi tertentu akan diambil. Berbeda dengan penyataan if dimana suatu blok aksi diawali dan diakhiri dengan kurung kurawal, blok aksi oada pernyataan switch diawali dengan tanda titik dua dan diakhiri dengan pernyataan break. Sebuah pernyataan switch setidaknya harus memiliki satu baru bagian case. Anda dapat menggunakan sebanyak mungkin bagian case sesuai dengan kebutuhan. Bagian default, bagian ini memiliki fungsi yang sama dengan bagian pada pernyataan if. Apabila tidak ada nilai yang dipenuhi oleh sebuah variabel, maka aksi pada bagian inilah yang akan dikerjakan. Bagian ini tidak harus digunakan pada setiap pernyataan switch.

Agar dapat lebih memahami penggunaan pernyataan switch, perhatikanlah contoh berikut ini :
switch ($kode_provinsi) { case 'DKI': $ongkos_kirim = 0; break; case 'JBR': $ongkos_kirim = 50000; break; case 'JTG': $ongkos_kirim = 100000; break; case 'JTM': $ongkos_kirim = 200000; break; default: echo 'Maaf, kami tidak melayani pengiriman ke daerah Anda.'; break; }

Pada contoh di atas, akan dilakukan evaluasi terhadap nilai dari variabel $kode_provinsi. Jika nilai dari variabel tersebut adalah DKI, maka akan dilakukan aksi $ongkos_kirim = 0;. Jika nilai dari variabel tersebut adalah JBR, maka akan dilakukan aksi $ongkos_kirim = 50000; dan seterusnya. Jika tidak ada nilai yang dipenuhi, maka akan dilakukan aksi echo 'Maaf, kami tidak melayani pengiriman ke daerah Anda.';

1.1.1 MENGGUNAKAN PENGULANGAN

2

emp4tbelas

emp4tbelas

Pengulangan dapat digunakan untuk mengulang sebagian dari suatu program sebanyak jumlah yang ditentukan. Dengan menggunakan pengulangan kode yang akan dituliskan akan menjadi semakin sedikit. Sebagai contoh, anggaplah Anda harus membuat sebuah halaman web yang akan menampilkan pilihan tahun dari 1900 hingga 2000, akankah Anda membuatnya seperti ini?
... <select name="tahun"> <option value="1900">1900</option> <option value="1901">1901</option> <option value="1902">1902</option> <option value="1903">1903</option> ... <option value="2000">2000</option> </select> ...

Tentu tidak bukan? Anda mungkin menginginkan sesuatu yang praktis seperti ini :
... <select name="tahun"> <?php lakukan untuk angka 1900 sampai 2000 { ?> <option value="<?php echo $angka_sekarang; ?>"><?php echo $angka_sekarang; ?>"></option> <?php } ?> </select> ...

Selain itu, pengulangan juga dapat dilakukan untuk hal yang belum diketahui akan diulang berapa kali seperti yang dicontohkan pada awal bagian ini. Ada tiga macam pengulangan yang dapat dilakukan dalam bahasa PHP. Yaitu pengulangan dengan menggunakan for, pengulangan dengan menggunakan while, dan pengulangan dengan menggunakan do ... while. 1.1.1.1 PENGULANGAN DENGAN FOR Pengulangan dengan pernyataan for adalah sebuah pengulangan yang menggunakan sebuah variabel bantuan sebagai penghitung. Dengan pengulangan ini Anda akan menentukan nilai awal dari penghitung, kondisi dimana pengulangan akan terus dilakukan, dan perubahan nilai dari penghitung untuk setiap pengulangan yang dilakukan. Berikut adalah bentuk penulisan penyataan for :
for ( nilai awal ; kondisi pengulangan ; perubahan nilai ) { aksi yang diulang }

Berikut adalah penjelasan dari tiga parameter yang harus Anda tentukan :

emp4tbelas

emp4tbelas

Nilai awal, dalam parameter ini Anda akan membuat sebuah variabel penghitung dan memberikan nilai awal untuk variabel tersebut. Sebagai contoh, Anda dapat menggunakan pernyataan seperti $i = 1. Kondisi pengulangan, yaitu kondisi dari variabel penghitung yang harus dipenuhi untuk melakukan pengulangan. Sebagai contoh, apabila Anda menggunakan pernyataan $i <= 10, maka pengulangan akan terus dilakukan selagi nilai dari variabel penghitung lebih kecil atau sama dengan sepuluh. Perubahan nilai, Anda harus menentukan perubahan nilai dari variabel pernghitung setiap kali aksi berulang. Sebagai contoh, apabila Anda menggunakan pernyataan $i++, maka nilai dari variabel penghitung akan bertambah satu setiap kali aksi berulang.

Contoh berikut akan menyelesaikan masalah penulisan tahun yang telah dibicarakan sebelumnya :
... <select name="tahun"> <?php for ($i = 1900; $i <= 2000; $i++) { ?> <option value="<?php echo $i; ?>"><?php echo $i; ?>"></option> <?php } ?> </select> ...

Pada contoh di atas, pengulangan akan dimulai dengan nilai awal 1900 untuk variabel penghitung, pengulangan akan terus berlanjut selama nilai variabel penghitung ini masih lebih kecil atau sama dengan 2000, dimana setiap kali aksi berulang maka nilai dari variabel tersebut akan bertambah satu. Jika Anda perhatikan, pernyataan for juga dapat melewati batas seperti pernyataan if. Selain itu, Anda juga dapat membuat pernyataan for yang bersarang, dimana di dalam blok aksi dari sebuah pernyataan for terdapat pernyataan for lainnya. Kedua aturan ini juga berlaku untuk metode pengulangan lainnya. Berikut adalah contoh dari pernyataan for yang bersarang:
$for ($i = 1; $i <= 10; $i++) { echo '<h1>Perkalian ' . $i . '</h1>'; for ($j = 1; $j <= 10; $j++) { echo $i . ' x ' . $j . ' = ' . $i * $j; } }

Pada contoh di atas, untuk setiap pengulangan dengan penghitung i, akan dilakukan pengulangan dengan penghitung j. Cobalah menggunakan contoh diatas pada sebuah halaman web agar Anda dapat memahaminya dengan lebih jelas. 1.1.1.1 PENGULANGAN DENGAN WHILE

emp4tbelas

emp4tbelas

Berbeda dengan pengulangan for yang menggunakan variabel penghitung, pengulangan while tidak menggunakan variabel penghitung, melainkan akan melakukan evaluasi terhadap suatu kondisi. Pengulangan akan terus dilakukan selama kondisi tersebut dievaluasikan sebagai TRUE. Berikut adalah bentuk penulisan perulangan dengan while :
while ( kondisi ) { aksi }

Pernyataan ini memiliki cara kerja yang sama dengan pernyataan if. Apabila kondisi terpenuhi maka aksi akan terus diulang salama kondisi tersebut terpenuhi. Sedangkan apabila kondisi tidak terpenuhi maka tidak akan ada aksi yang diambil dan program akan melanjutkan ke pernyataan berikutnya. Perhatikanlah contoh berikut ini :
$a = 0; $b = 10; while ($a < $b) { echo 'A masih lebih kecil daripada B'; $a++; $b--; }

Pada contoh di atas, aksi yang berada di dalam blok akan terus diulang selagi nilai dari variabel $a masih lebih kecil dari variabel $b. 1.1.1.2 PENGULANGAN DENGAN DO ... WHILE Pengulangan dengan pernyataan do ... while memiliki kemiripan dengan pengulangan dengan menggunakan pernyataan while, yaitu pengulangan akan terus dilakukan apabila kondisi yang dievaluasikan terpenuhi. Hanya saja, jika pada pernyataan while suatu kondisi tidak terpenuhi aksi yang berada di dalam blok pengulangan tidak akan dilakukan sama sekali, maka pada pernyataan do ... while aksi yang berada di dalam blok pengulangan akan dilakukan sebanyak minimal satu kali.Hal ini dikarenakan pada pernyataan while kondisi akan dievaluasikan terlebih dahulu sebelum aksi, sedangkan pada pernyataan do ... while kondisi akan dievaluasikan setelah aksi pertama dilakukan. Berikut adalah bentuk penulisan pernyataan do ... while :
do { aksi } while ( kondisi );

emp4tbelas

emp4tbelas

Pengulangan dengan metode ini pada umumnya lebih jarang ditemukan apabila dibandingkan dengan pengulangan lainnya. 1.1.1.3 PENGULANGAN DAN ARRAY Selain ketiga metode pengulangan di atas, ada satu metode pengulangan yang dapat digunakan untuk berjalan di dalam sebuah array. Metode pengulangan ini dapat digunakan untuk membaca atau memanipulasi semua elemen yang terdapat di dalam sebuah array dengan mudah. Pengulangan seperti ini dapat dilakukan dengan menggunakan pernyataan foreach. Berikut adalah bentuk penulisan pernyataan tersebut :
foreach ( array as variabel sementara ) { aksi }

Dalam pengulangan ini, setiap elemen yang terdapat di dalam sebuah array akan ditempatkan ke dalam sebuah variabel sementara. Dengan menggunakan variabel sementara, Anda akan dapat membaca atau memanipulasi elemen-elemen dari sebuah array dengan lebih mudah. Sebagai contoh, jika Anda ingin menampilkan semua elemen dari sebuah array Anda mungkin akan melakukan hal berikut ini :
$buah = array('pisang', 'apel', 'jeruk', 'mangga', 'stroberi'); echo $buah[0]; echo $buah[1]; echo $buah[2]; echo $buah[3]; echo $buah[4];

Namun, cara seperti itu bukanlah cara yang baik, karena memiliki ketergantungan terhadap jumlah elemen dari euatu array. Anda dapat memperbaikinya sebagai berikut :
$buah = array('pisang', 'apel', 'jeruk', 'mangga', 'stroberi'); for ($i = 0; $i <= len($buah); $i++) { echo $buah[i]; }

Cukup baik, namun mungkin agak membingungkan. Cobalah menggunakan pernyataan foreach seperti berikut ini :
$buah = array('pisang', 'apel', 'jeruk', 'mangga', 'stroberi'); foreach ($buah as $elemen_buah) { echo $elemen_buah; }

emp4tbelas

emp4tbelas

Dengan menggunakan pernyataan foreach seperti contoh di atas, Anda dapat membaca atau memanipulasi semua elemen yang terdapat di dalam sebuah array dengan lebih mudah.

1.2 MENGGUNAKAN FUNGSI

Di dalam sebuah halaman web dinamis, terkadang diperlukan beberapa proses yang sama pada beberapa halaman yang berbeda. Sebagai contoh, pada setiap halaman khusus anggota, selalu dilakukan pengecekan apakah pengunjung yang membuka halaman tersebut memang terdaftar sebagai anggota atau tidak. Jika ya, pengunjung tersebut akan memiliki akses terhadap halaman tersebut, selain itu, pengunjung akan diarahkan ke halaman login. Tentu saja, Anda dapat melakukan proses duplikasi (baca: copypaste) dari prosesproses tersebut untuk setiap halaman yang memerlukan proses tersebut. Hanya saja, proses duplikasi ini tentunya bukanlah metode yang paling efisien. Apabila Anda melakukan perubahan pada satu halaman, Anda juga harus melakukan perubahan yang sama untuk halaman yang lain. Hal ini tentunya dapat menyebabkan kesalahan yang terjadi karena adanya halaman yang belum ikut mencerminkan perubahan pada halaman lainnya. Untuk menanggulangi masalah ini, Anda dapat menggunakan sebuah fungsi. Fungsi adalah serangkaian pernyataan-pernyataan PHP yang dapat digunakan untuk melakukan suatu proses. Dengan menggunakan fungsi, Anda cukup menuliskan proses tersebut satu kali saja pada sebuah dokumen utama yang nantinya akan dibagibagikan kepada halaman-halaman yang memerlukan fungsi tersebut dengan menggunakan pernyataan include. Selain untuk melakukan sebuah proses, Anda juga dapat menggunakan fungsi untuk menampilkan komponen-komponen yang umum pada setiap halaman web, misalkan bagian kepala, navigasi dan kaki (footer). Anda dapat membuat sebuah fungsi dengan mengikuti bentuk penulisan berikut :
fuction namafungsi() { aksi; return; }

Sebagai contoh, Anda dapat membuat sebuah fungsi untuk menampilkan bagian navigasi pada halaman web seperti contoh berikut ini :
function tampilkan_navigasi() { echo echo echo echo '<ul class="navigasi">'; '<li><a href="index.php">Halaman Utama</a></li>'; '<li><a href="profil.php">Profil</a></li>'; '<li><a href="blog.php">Blog</a></li>';

emp4tbelas

emp4tbelas echo '<li><a href="foto.php">Koleksi Foto</a></li>'; echo '<li><a href="download.php">Download</a></li>'; echo '</ul>'; return; }

Pemberian nama fungsi memiliki aturan yang mirip dengan pemberian nama variabel. Hanya saja, nama dari fungsi tidak diawali dengan tanda dolar ($), melainkan diakhiri dengan sepasang tanda kurung. Pernyataan return pada akhir sebuah fungsi digunakan sebagai penanda bahwa proses yang telah dikerjakan oleh fungsi tersebut telah selesai. Fungsi dapat diletakkan di mana saja di dalam sebuah dokumen PHP. Namun, tempat terbaik untuk melatakkan fungsi umum yang digunakan pada beberapa halaman web sekaligus adalah pada sebuah dokumen khusus yang berekstensi .inc. Dokumen ini pada umumnya ditempatkan di dalam sebuah folder bernama include di dalam folder utama sebuah situs web. Setelah Anda membuat fungsi-fungsi umum pada sebuah dokumen utama, Anda perlu memberikan referensi terhadap dokumen tersebut pada setiap halaman web yang akan menggunakan fungsi-fungsi yang terdapat di dalamnya. Anda dapat melakukan hal ini dengan meletakkan pernyataan seperti contoh berikut pada bagian paling awal sebuah dokumen PHP :
include('include/fungsi_umum.inc');

Dengan ini, barulah Anda dapat memanggil fungsi tersebut melalui halaman web yang bersangkutan. Untuk memanggil sebuah fungsi, Anda cukup menuliskan nama dari fungsi yang ingin dipanggil. Sebagai contoh :
tampilkan_navigasi();

emp4tbelas

emp4tbelas

BAB 2:MENGHUBUNGKAN PHP DENGAN BASIS DATA

Jika hanya digunakan secara mandiri, PHP tidak dapat menangani penyimpanan data dalam jumlah besar dengan baik. Oleh karena itu, PHP hampir selalu digunakan bersamaan dengan sebuah sistem basis data. Dalam hal ini, sistem basis data akan menangani segala proses yang berhubungan dengan pengambilan dan penyimpanan data, sedangkan PHP akan berinteraksi dengan pengunjung situs web untuk menangani segala macam logika dan alur program untuk memberikan data dan informasi yang tepat kepada pengunjung. Kemampuan untuk berinteraksi dan berkomunikasi dengan berbagai macam sistem basis data adalah salah satu dari kelebihan PHP yang membuatnya sangat populer. PHP dapat berinteraksi dengan hampir seluruh sistem basis data yang ada di dunia, namun, penggunaan sistem basis data MySQL adalah sebuah kombinasi yang paling umum ditemukan. Hal ini dikarenakan keduanya adalah sebuah perangkat lunak free and open source yang dapat didapatkan dengan gratis. Dikarenakan kemampuan PHP untuk berinteraksi dengan basis data yang sangat baik, proses yang diperlukan untuk melakukan hal tersebut pun relatif mudah. Pada dasarnya Anda cukup memerlukan tiga buah langkah saja, yaitu : Membuat koneksi dengan sistem basis data, Melakukan proses pengambilan atau manipulasi data, dan Menutup koneksi dengan sistem basis data.

1.1 MEMBUAT KONEKSI

Dikarenakan proses membuat koneksi akan sangat sering digunakan oleh banyak halaman web yang terdapat di dalam sebuah situs web, Ada baiknya jika Anda membuat sebuah fungsi khusus untuk membuat koneksi database pada dokumen .inc Anda. Berikut adalah contoh dari sebuah fungsi untuk melakukan koneksi dengan sistem basis data :
function buka_koneksi() { $koneksi = mysqli_connect('localhost', 'pengguna', 'katasandi', 'namaskema'); if (!$koneksi) { die('Tidak dapat membuat koneksi dengan sistem basis data!'); } return $koneksi; }

emp4tbelas

emp4tbelas $koneksi = mysqli_connect(server, pengguna, sandi, skema);

Fungsi mysqli_connect() digunakan untuk membuat koneksi dengan sistem basis data MySQL. Fungsi ini memerlukan empat buah masukan data, yaitu nama server basis data (biasanya localhost jika berada pada komputer yang sama dengan aplikasi server web), nama pengguna basis data, kata sandi pengguna basis data, dan nama skema atau basis data yang akan digunakan. Fungsi ini akan menghasilkan sebuah referensi koneksi yang akan disimpan di dalam sebuah variabel. Variabel ini nantinya akan digunakan untuk mengambil dan memanipulasi data serta menutup koneksi.
if (!$koneksi) { die('Tidak dapat membuat koneksi dengan sistem basis data!'); }

Pernyataan if ini akan memeriksa apakah koneksi berhasil dibuat atau tidak. Jika koneksi tidak berhasil dibuat maka seluruh proses pada halaman web akan dihentikan dengan menggunakan fungsi die(). Hal ini dilakukan untuk menjaga keamanan data dari serangan pihak yang tidak bertanggung jawab.
return $koneksi;

Pernyataan ini berfungsi untuk mengembalikan referensi koneksi kepada halaman web yang memanggil fungsi ini untuk selanjutnya digunakan untuk oleh halaman web tersebut.

Layaknya sebuah pintu yang harus ditutup kembali setelah dibuka, koneksi dengan sistem basis data pun harus segera ditutup setelah selesai digunakan. Hal ini dimaksudkan untuk menjaga sumber daya dan keamanan dari data yang terdapat di dalamnya. Berikut adalah contoh dari sebuah fungsi yang dapat digunakan untuk menutup koneksi dengan sistem basis data :
function tutup_koneksi($koneksi) { mysqli_close($koneksi); return; } mysqli_close($koneksi);

Koneksi dengan sebuah sistem basis data dapat dilakukan dengan memanggil fungsi mysqli_close(). Fungsi ini memerlukan sebuah masukan berupa referensi koneksi dengan sistem basis data.

emp4tbelas

emp4tbelas

Setelah membuat kedua fungsi tersebut, marilah kita mencoba untuk melakukan koneksi ke sistem basis data pada sebuah halaman web. Buatlah sebuah dokumen PHP baru berdasarkan dengan contoh berikut ini :
<?php // Gunakan dokumen db.inc include('db.inc'); // Buka koneksi, simpan referensi dalam variabel $koneksi $koneksi = buka_koneksi(); // Jalankan perintah SQL, simpan hasil dalam variabel $hasil $hasil = mysqli_query($koneksi, 'SELECT * FROM product'); ?> <!doctype html> <html> <head> <title>Tes Koneksi Database</title> </head> <body> <h1>Tes Koneksi Database</h1> <p> <?php if ($hasil) { // Jika ada hasil echo 'SUKSES!'; } else { // Jika tidak ada hasil echo 'GAGAL!'; } ?> </body> </html> <?php // Hapus data dari hasil mysqli_free_result($hasil); // Jangan lupa menutup koneksi! tutup_koneksi($koneksi); ?>

Sesuaikanlah nama dokumen inc dan perintah SQL yang digunakan dengan keperluan Anda. Simpanlah dengan nama tes_koneksi.php lalu bukalah dengan peramban web Anda.

1.2 MENGAMBIL DATA

Proses pengambilan data dari sistem basis data ke dalam sebuah halaman web dinamis dengan PHP tidaklah sulit. Anda cukup menggunakan perintah SQL SELECT sesuai dengan kebutuhan Anda. Berikut adalah contoh pengambilan data dari suatu tabel dan menampilkannya ke dalam sebuah halaman web :
<?php include('db.inc');

emp4tbelas

emp4tbelas $koneksi = buka_koneksi(); $sql = 'SELECT * FROM product WHERE product_category_id = 6'; $hasil = mysqli_query($koneksi, $sql); ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <h1>Daftar Barang</h1> <table border="1"> <tr> <td>Kode</td> <td>Nama Barang</td> <td>Harga Satuan</td> <td>Aksi</td> </tr> <?php while ($data = mysqli_fetch_assoc($hasil)) { ?> <tr> <td><?php echo $data['product_id']; ?></td> <td><?php echo $data['product_name']; ?></td> <td><?php echo $data['product_price']; ?></td> <td> <a href="ubah.php?product_id=<?php echo $data['product_id']; ? >">Ubah</a> <a href="hapus.php?product_id=<?php echo $data['product_id']; ? >">Hapus</a> </td> </tr> <?php } ?> </table> </body> </html> <?php mysqli_free_result($hasil); tutup_koneksi($koneksi); ?> $koneksi = buka_koneksi();

Membuka koneksi dengan sistem basis data.

$sql = 'SELECT * FROM product WHERE product_category_id = 6';

Mempersiapkan perintah SQL yang akan digunakan.

$hasil = mysqli_query($koneksi, $sql);

Fungsi mysqli_query() digunakan untuk menjalankan perintah SQL terhadap sistem basis data yang sudah terkoneksi. Hasil dari perintah ini akan disimpan di dalam variabel $hasil.

emp4tbelas

emp4tbelas while ($data = mysqli_fetch_assoc($hasil)) { ... }

Fungsi mysqli_fetch_assoc() digunakan untuk mengambil satu baris data dari hasil perintah SQL menjadi sebuah map, dimana nama kolom akan menjadi indeks dan data pada kolom akan menjadi nilai elemen. Hasil dari perintah ini akan disimpan di dalam sebuah variabel bernama $data. Penggunaan pengulangan while disini dimaksudkan untuk mengulang proses penampilan data selagi masih ada data yang dapat ditampilkan. Jika data sudah habis maka pengulangan akan berhenti.
echo $data['product_id'];

Menampilkan data pada halaman web.

<a href="ubah.php?product_id=<?php echo $data['product_id']; ?>">Ubah</a> <a href="hapus.php?product_id=<?php echo $data['product_id']; ?>">Hapus</a>

Kedua tautan ini digunakan untuk menuju ke halaman dinamis yang dapat digunakan untuk mengubah atau menghapus data produk.
mysqli_free_result($hasil);

Fungsi mysqli_free_result() digunakan untuk menghapus penyimpanan hasil sementara di dalam memori. Hal ini diperlukan untuk menghemat penggunaan memori pada server.
tutup_koneksi($koneksi);

Menutup koneksi dengan sistem basis data. Sebagai sebuah halaman web dinamis, tentunya Anda juga dapat menggunakan masukan dari pengguna sebagai parameter tambahan untuk mengambil data. Berikut adalah contoh untuk mencari data berdasarkan kata kunci yang diberikan oleh pengguna melalui formulir :
<!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <h1>Pencarian Barang</h1> <form action="proses_cari.php" method="post"> <p> Masukkan Kata Kunci Pencarian : <br /> <input name="kata_kunci" type="text" size="50" maxlength="100" /> <p><input type="submit" value="Cari" /> </form> </body> </html>

emp4tbelas

emp4tbelas

Formulir tersebut akan diproses oleh dokumen PHP berikut ini :

<?php include('umum.inc'); $koneksi = buka_koneksi(); $kata_kunci = mysqli_real_escape_string($koneksi, $_POST['kata_kunci']); $sql = 'SELECT * FROM product WHERE product_name LIKE "%' . $kata_kunci . '%"'; $hasil = mysqli_query($koneksi, $sql); ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <h1>Hasil Pencarian</h1> <?php if (mysqli_num_rows($hasil) == 0) { ?> <h2>Maaf, tidak ada hasil yang ditemukan</h2> <?php } else { ?> <p>Ditemukan <?php echo mysqli_num_rows($hasil); ?> hasil : <table border="1"> <tr> <td>Kode</td> <td>Nama Barang</td> <td>Harga Satuan</td> <td>Aksi</td> </tr> <?php while ($data = mysqli_fetch_assoc($hasil)) { ?> <tr> <td><?php echo $data['product_id']; ?></td> <td><?php echo $data['product_name']; ?></td> <td><?php echo $data['product_price']; ?></td> <td> <a href="ubah.php?product_id=<?php echo $data['product_id']; ? >">Ubah</a> <a href="hapus.php?product_id=<?php echo $data['product_id']; ? >">Hapus</a> </td> </tr> <?php } ?> </table> <?php } ?> </body> </html> <?php mysqli_free_result($hasil); tutup_koneksi($koneksi); ?> $kata_kunci = mysqli_real_escape_string($koneksi, $_POST['kata_kunci']);

Perlu diperhatikan bahwa fungsi mysqli_real_escape_string() adalah sebuah fungsi yang sangat penting digunakan untuk membersihkan data yang dimasukkan oleh seorang pengunjung dari potensi serangan SQL Injection yang sangat berbahaya. Untuk 5

emp4tbelas

emp4tbelas

setiap perintah SQL yang akan menggunakan masukkan dari pengguna, pastikan Anda menggunakan cara seperti ini untuk mengambil datanya dari formulir. Tentu saja, Anda juga dapat menggunakan variabel $_GET untuk memasukkan data dari querystring ke dalam perintah SQL.
$sql = 'SELECT * FROM product WHERE product_name LIKE "%' . $kata_kunci . '%"';

Perintah SQL ini menambahkan masukkan dari pengguna sebagai keterangan tambahan untuk pencarian. Sekali lagi, pastikan bahwa masukkan tersebut sudah diamankan.
mysqli_num_rows($hasil);

Fungsi mysqli_num_rows() berfungsi untuk menghitung jumlah hasil yang didapatkan.

1.3 MEMASUKKAN DATA

Memasukkan data ke dalam sistem basis data dengan menggunakan PHP tidaklah jauh berbeda, Anda cukup mengirimkan data-data yang diperlukan kepada dokumen PHP yang akan memproses data tersebut dengan menggunakan formulir ataupun querystring. Hanya saja, pastikan data yang dimasukkan oleh pengunjung tersebut sudah baik dan benar. Perhatikanlah contoh formulir untuk memasukkan data berikut ini :
<?php include('umum.inc'); $koneksi = buka_koneksi(); $sql = 'SELECT * FROM category'; $hasil = mysqli_query($koneksi, $sql); ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <h1>Penambahan Data Barang</h1> <form action="proses_tambah.php" method="post"> <p> Nama Barang : <br /> <input name="product_name" type="text" size="50" maxlength="100" /> <p> Kategori : <br /> <select name="product_category_id"> <?php while ($data = mysqli_fetch_assoc($hasil)) { ?> <option value="<?php echo $data["category_id"]; ?>">

emp4tbelas

emp4tbelas <?php echo $data["category_name"]; ?> </option> <?php } ?> </select> <p> Harga Satuan: <br /> <input name="product_price" type="text" size="50" maxlength="100" /> <p> Keterangan : <br /> <textarea name="product_description"></textarea> <p><input type="submit" value="Simpan" /> </form> </body> </html> <?php mysqli_free_result($hasil); tutup_koneksi($koneksi); ?>

Formulir contoh di atas melakukan koneksi ke sistem basis data untuk mengambil datadata kategori produk yang ada untuk dijadikan pilihan di dalam formulir. Formulir tersebut kemudian akan diproses oleh dokumen PHP berikut ini :
<?php include('umum.inc'); $koneksi = buka_koneksi(); // Ambil data dari formulit $product_name= mysqli_real_escape_string($koneksi, $_POST['product_name']); $product_category_id = mysqli_real_escape_string($koneksi, $_POST['product_category_id']); $product_price = mysqli_real_escape_string($koneksi, $_POST['product_price']); $product_description = mysqli_real_escape_string($koneksi, $_POST['product_description']); // Array untuk menyimpan daftar kesalahan $error = array(); // Periksa kebenaran data nama produk if (empty($product_name)) { $error[] = 'Nama produk harus diisi!'; } // Periksa kebenaran data kategori produk $sql = 'SELECT * FROM category WHERE category_id = ' . $product_category_id; $hasil = mysqli_query($koneksi, $sql); if (mysqli_num_rows($hasil) == 0) { $error[] = 'Kategori produk salah!'; } // Periksa kebenaran data harga produk if ($product_price <= 0) { $error[] = 'Harga produk tidak boleh 0 atau negatif!'; }

emp4tbelas

emp4tbelas

// Jika tidak ada kesalahan, masukkan data if (sizeof($error) == 0) { $sql = 'INSERT INTO product VALUES (NULL, "' . $product_category_id . '", "' . $product_name . '", "' . $product_description . '", "' . $product_price . '")'; mysqli_query($koneksi, $sql); } ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <?php if (sizeof($error) == 0) { ?> <h1>Produk baru telah berhasil ditambahkan!</h1> <?php } else { ?> <h1>Tidak dapat menambah data produk!</h1> <ul> <?php foreach ($error as $e) { ?> <li><?php echo $e; ?></li> <?php } ?> </ul> <?php } ?> </body> </html> <?php mysqli_free_result($hasil); tutup_koneksi($koneksi); ?>

Hal yang paling penting dalam memasukkan data adalah memastikan semua data yang dimasukkan oleh pengguna sudah benar. Kesalahan pada pemasukan data yang tidak ditanggulangi dapat menyebabkan rusaknya data pada basis data Anda.

$sql = 'INSERT INTO product VALUES (NULL, "' . $product_category_id . '", "' . $product_name . '", "' . $product_description . '", "' . $product_price . '")';

Memasukkan data ke dalam basis data menggunakan PHP cukup dengan membuat sebuah perintah SQL INSERT.
mysqli_query($koneksi, $sql);

Untuk memasukkan data, tidak ada hasil yang dikembalikan sehingga tidak memerlukan sebuah variabel untuk menampung hasil.

1.4 MENGUBAH DATA

emp4tbelas

emp4tbelas

Pada prinsipnya, sebuah dokumen yang digunakan untuk melakukan pengubahan data sangatlah mirip dengan dokumen yang digunakan untuk memasukkan data. Perbedaannya hanya terletak pada perintah SQL yang digunakan dan halaman formulirnya dimana pada formulir tersebut akan ditampilkan data yang sebelumnya. Berikut adalah contoh dari halaman formulir tersebut :
<?php include('umum.inc'); // Hanya lakukan koneksi jika ada querystring if (!empty($_GET['product_id'])) { $koneksi = buka_koneksi(); // Ambil pilihan produk yang akan diubah dari querystring $product_id = mysqli_real_escape_string($koneksi, $_GET['product_id']); // Ambil data produk tersebut $sql_product = 'SELECT * FROM product WHERE product_id = ' . $product_id; $hasil_product = mysqli_query($koneksi, $sql_product); // Ambil data kategori $sql_category = 'SELECT * FROM category'; $hasil_category = mysqli_query($koneksi, $sql_category); } ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <h1>Pengubahan Data Barang</h1> <?php if ((empty($_GET['product_id'])) || mysqli_num_rows($hasil_product) == 0) { ?> <p>Tidak ada barang yang dipilih! <?php } else { $data_product = mysqli_fetch_assoc($hasil_product); ?> <form action="proses_ubah.php" method="post"> <input type="hidden" name="product_id" value="<?php echo $data_product['product_id']; ?>"; ?> <p> Nama Barang : <br /> <input name="product_name" type="text" size="50" maxlength="100" value="<?php echo $data_product['product_name']; ?>" /> <p> Kategori : <br /> <select name="product_category_id"> <?php while ($data_category = mysqli_fetch_assoc($hasil_category))

{ ?>

emp4tbelas

emp4tbelas <option value="<?php echo $data_category["category_id"]; ?>" <? php if ($data_category["category_id"] == $data_product["product_category_id"]) { echo 'selected="selected"'; } ?>> <?php echo $data_category["category_name"]; ?> </option> <?php } ?> </select> <p> Harga Satuan: <br /> <input name="product_price" type="text" size="50" maxlength="100" value="<?php echo $data_product['product_price']; ?>" /> <p> Keterangan : <br /> <textarea name="product_description"><?php echo $data_product['product_description']; ?></textarea> <p><input type="submit" value="Ubah" /> </form> <?php } ?> </body> </html> <?php mysqli_free_result($hasil_product); mysqli_free_result($hasil_category); tutup_koneksi($koneksi); ?> <input type="hidden" name="product_id" $data_product['product_id']; ?>"; ?> value="<?php echo

Elemen input dengan type hidden pada formulir tersebut akan digunakan sebagai referensi produk yang akan diubat untuk dokumen pemroses.

Formulir tersebut akan diproses oleh sebuah dokumen PHP seperti berikut :
<?php include('umum.inc'); $koneksi = buka_koneksi(); // Ambil data dari formulir $product_id= mysqli_real_escape_string($koneksi, $_POST['product_id']); $product_name= mysqli_real_escape_string($koneksi, $_POST['product_name']); $product_category_id = mysqli_real_escape_string($koneksi, $_POST['product_category_id']); $product_price = mysqli_real_escape_string($koneksi, $_POST['product_price']); $product_description = mysqli_real_escape_string($koneksi, $_POST['product_description']); // Array untuk menyimpan daftar kesalahan $error = array(); // Periksa kebenaran data kode produk

emp4tbelas

emp4tbelas if (empty($product_id)) { $error[] = 'Nama produk harus diisi!'; } // Periksa kebenaran data nama produk if (empty($product_name)) { $error[] = 'Nama produk harus diisi!'; } // Periksa kebenaran data kategori produk $sql = 'SELECT * FROM category WHERE category_id = ' . $product_category_id; $hasil = mysqli_query($koneksi, $sql); if (mysqli_num_rows($hasil) == 0) { $error[] = 'Kategori produk salah!'; } // Periksa kebenaran data harga produk if ($product_price <= 0) { $error[] = 'Harga produk tidak boleh 0 atau negatif!'; } // Jika tidak ada kesalahan, ubah data if (sizeof($error) == 0) { $sql = 'UPDATE product SET product_category_id = "' . $product_category_id . '", product_name = "' . $product_name . '", product_description = "' . $product_description . '", product_price = "' . $product_price . '" WHERE product_id = "' . $product_id . '"'; mysqli_query($koneksi, $sql); } ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <?php if (sizeof($error) == 0) { ?> <h1>Produk telah berhasil diubah!</h1> <?php } else { ?> <h1>Tidak dapat mengubah data produk!</h1> <ul> <?php foreach ($error as $e) { ?> <li><?php echo $e; ?></li> <?php } ?> </ul> <?php } ?> </body> </html> <?php tutup_koneksi($koneksi); ?> mysqli_query($koneksi, $sql);

Untuk mengubah data, tidak ada hasil yang akan didapatkan dari perintah SQL, oleh karena itu, Anda tidak memerlukan variabel untuk menyimpan hasil tersebut. emp4tbelas 5

emp4tbelas

1.5 MENGHAPUS DATA

Jika dibandingkan dengan proses-proses sebelumnya, proses penghapusan data pada sebuah sistem basis data dengan menggunakan PHP relatif lebih mudah. Hal ini dikarenakan Anda tidak memerlukan sebuah halaman formulir untuk melakukannya. Melainkan, Anda hanya memerlukan sebuah dokumen untuk memproses penghapusan tersebut. Berikut adalah contoh dari dokumen tersebut :
<?php include('umum.inc'); // Hanya lakukan koneksi jika ada querystring if (!empty($_GET['product_id'])) { $koneksi = buka_koneksi(); // Ambil pilihan produk yang akan diubah dari querystring $product_id = mysqli_real_escape_string($koneksi, $_GET['product_id']); // Hapus data $sql = 'DELETE FROM product WHERE product_id = ' . $product_id; mysqli_query($koneksi, $sql); } ?> <!doctype html> <html> <head> <title>Toko Saya</title> </head> <body> <?php if (empty($_GET['product_id']) { ?> <p>Tidak ada barang yang dipilih! <?php } else { ?> <h1>Data produk telah dihapus!</h1> <?php } ?> </body> </html> <?php tutup_koneksi($koneksi); ?>

emp4tbelas

emp4tbelas

BAB 2:LEBIH LANJUT DENGAN PHP

emp4tbelas

emp4tbelas

2.1 MENGGUNAKAN SESSION

Session dapat dikatakan sebagai waktu kunjungan dari seorang pengunjung situs web. Session dimulai sejak seorang pengunjung tiba di situs Anda hingga ia pergi. Di dalam sebuah session, ada kalanya Anda ingin menyimpan beberapa informasi tentang pengunjung tersebut, misalkan identitas dan tingkatan hak akses dari pengunjung tersebut. Dengan menggunakan session, Anda dapat menyimpan informasi-informasi tersebut di dalamsebuah variabel khusus yang bernama $_SESSION. Variabel ini bersifat unik bagi setiap pengunjung, seorang pengunjung akan memiliki nilai dari variabel session yang berbeda-beda dengan pengunjung lainnya. Untuk melakukan ini, PHP akan memberikan sebuah kode identifikasi unik kepada setiap pengunjung yang dikenal dengan istilah PHPSESSID. Tidak akan ada pengunjung yang memiliki nilai PHPSESSID yang sama. Sifat dari variabel session yang unik seperti ini menjadikannya sangat ideal untuk digunakan untuk menyimpan informasi login dan hak akses dari suatu pengunjung. Dengan menyimpan data tertentu yang menandakan seorang pengunjung telah melakukan login, Anda dapat menyesuaikan tampilan dari halaman web Anda dan membedakan dengan pengunjung lainnya yang belum melakukan login. Sebelum Anda dapat menggunakan session, Anda harus memberikan sebuah perintah kepada PHP yang berfungsi untuk mengaktifkan fitur session. Dikarenakan Anda harus mengaktifkan fitur session untuk semua halaman yang Ada, ada baiknya Anda meletakkan perintah ini di bagian awal dokumen inc Anda. Berikut adalah perintah yang digunakan :
session_start();

Setelah Anda mengaktifkan fitur session, barulah Anda dapat menggunakan session pada halaman web Anda. Menggunakan session sangatlah sederhana, Anda dapat menyimpan dan mengambil data dari variabel session selayaknya Anda menggunakan sebuah map. Variabel session sendiri dapat diakses dari seluruh halaman web yang Anda miliki dan akan menyimpan nilai yang sama untuk masing-masing pengguna. Berikut adalah contoh penggunaan session :
// Tambahkan elemen dengan indeks 'nama_pengguna' pada session $_SESSION['nama_pengguna'] = 'Joko'; // Menampilkan nilai yang sudah disimpan pada session echo $_SESSION['nama_pengguna'];

emp4tbelas

emp4tbelas

Setelah sebuah session selesai, Anda dapat menghapus semua data yang terdapat pada variabel session sekaligus membuat nilai dari PHPSESSID yang sudah diberikan kepada pengunjung tersebut tidak berlaku lagi. Berikut adalah perintah yang digunakan untuk melakukan hal tersebut :
session_destroy();

Agar lebih dapat memahami penggunaan session marilah mencoba menerapkannya pada sebuah halaman web. Pertama-tama buatlah sebuah formulir sederhana seperti berikut ini :
<?php session_start(); ?> <!doctype html> <html> <head> <title>Situs Saya</title> </head> <body> <h1>Selamat Datang!</h1> <form action="home.php" method="post"> <p> Masukkan Nama Anda : <br /> <input name="nama" type="text" size="50" maxlength="100" /> <p><input type="submit" value="Login" /> </form> </body> </html>

Simpanlah dengan nama login.php. Lalu buatlah halaman lain bernama home.php seperti berikut ini :
<?php session_start(); // Simpan nama dalam session if (empty($_SESSION['nama'])) { $_SESSION['nama'] = $_POST['nama']; } ?> <!doctype html> <html> <head> <title>Situs Saya</title> </head> <body> <h1>Halo, <?php echo $_SESSION['nama']; ?>!</h1> <a href="logout.php">Logout</a> </body> </html>

Buatlah satu halaman lain untuk melakukan logout dengan nama logout.php seperti berikut :

emp4tbelas

emp4tbelas <?php session_start(); // Hapus sesi session_destroy(); ?> <!doctype html> <html> <head> <title>Situs Saya</title> </head> <body> <h1>Selamat jalan!</h1> </body> </html>

Jika sudah, bukalah halaman login.php, masukkanlah nama Anda dan kirimkan data formulir. Cobalah menutup peramban web Anda lalu membuka kembali halaman home.php. Masih dapatkan Anda melihat nama Anda? Sekarang cobalah melakukan logout dan membuka kembali halaman home.php. Bagaimana hasilnya? Jika Anda sudah dapat memahami dasar dari penggunaan session, marilah mencoba untuk membuat halaman untuk login dan logout yang sebenarnya. Secara konsep, pembuatan halaman-halaman tersebut tidaklah jauh berbeda dengan contoh yang sudah Anda kerjakan. Hanya saja, diperlukan tambahan koneksi ke sistem basis data untuk mendapatkan kombinasi nama pengguna dan kata sandi yang tepat. Berikut adalah sebuah contoh dari halaman untuk melakukan login :
<?php include('umum.inc'); ?> <!doctype html> <html> <head> <title>Situs Saya</title> </head> <body> <h1>Selamat Datang!</h1> <form action="proses_login.php" method="post"> <p> Masukkan Nama Pengguna : <br /> <input name="nama_pengguna" type="text" size="50" maxlength="100" /> <p> Masukkan Kata Sandi : <br /> <input name="kata_sandi" type="password" size="50" maxlength="100" /> <p><input type="submit" value="Login" /> </form> </body> </html>

Data dari formulir login yang tedapat pada halaman tersebut akan diproses sebagai berikut :

emp4tbelas

emp4tbelas <?php include('umum.inc'); $koneksi = buka_koneksi(); // Ambil data dari formulir $nama_pengguna = mysqli_real_escape_string($koneksi, $_POST['nama_pengguna']); $kata_sandi = mysqli_real_escape_string($koneksi, $_POST['kata_sandi']); // Ambil data dari basis data $sql = 'SELECT * FROM pengguna WHERE nama_pengguna = "' . $nama_pengguna . '" AND kata_sandi = "' . $kata_sandi '"'; $hasil = mysqli_query($koneksi, $sql); // Periksa apakah ada pengguna dengan kombinasi nama dan sandi yang benar if (mysqli_num_rows($hasil) == 1) { // Simpan identitas pengguna dalam session $_SESSION['nama_pengguna'] = $nama_pengguna; } ?> <!doctype html> <html> <head> <title>Situs Saya</title> </head> <body> <?php if (!empty($_SESSION['nama_pengguna'])) { ?> <h1>Halo, <?php echo $_SESSION['nama']; ?>!</h1> <a href="home.php">Lanjutkan ke halaman utama</a> <?php } else { ?> <h1>Login gagal!</h1> <?php } ?> </body> </html> <?php mysqli_free_result($hasil); tutup_koneksi($koneksi); ?>

Berikut adalah sebuah contoh halaman yang memeriksa apakah seorang pengguna sudah melakukan login atau belum :
<?php include('umum.inc'); // Periksa pengguna if (empty($_SESSION['nama_pengguna'])) { // Jika belum login, arahkan ke halaman login header("Location: login.php"); }

?>

<!doctype html> <html> <head> <title>Situs Saya</title>

emp4tbelas

emp4tbelas </head> <body> <h1>Selamat Datang di Member Area!</h1> </body> </html>

Dapat dilihat bahawa proses untuk memeriksa apakah seorang pengguna sudah melakukan login atau belum sangatlah sederhana, yaitu cukup dengan memeriksa apakah sudah ada variabel sesi yang tepat atau tidak.

header("Location: login.php");

Fungsi header() dapat digunakan untuk mengarahkan peramban web secara otomatis ke halaman lain.

Sedangkan untuk melakukan logout prosesnya sama seperti contoh yang sudah diberikan sebelumnya, yaitu cukup dengan memanggil fungsi session_destroy().

2.2 MENERIMA UPLOAD BERKAS

Kadangkala, sebuah halaman web dinamis akan membutuhkan sebuah berkas dari pengguna. Sebagai contoh, pada halaman profil seorang pengguna, ia dapat mengupload berkas fotonya sendiri untuk dipasang pada halaman tersebut. Dengan menggunakan PHP, sebuah halaman web dapat menerima berkas yang diupload oleh seorang pengguna dan menyimpannya di dalam server web. Untuk menerima berkas dari pengguna, Anda akan memerlukan sebuah formulir khusus seperti pada contoh berikut ini :
<form enctype="multipart/form-data" action="proses_berkas.php" method="post"> <input type="file" name="berkas" /> <input type="submit" value="Upload" /> </form>

Dapat dilihat bahwa ada atribut tambahan enctype dengan nilai multipart/form-data pada elemen formulir diatas. Atribut ini berfungsi untuk menandakan bahwa formulir ini akan mengirimkan berkas untuk selanjutnya diproses oleh server web. Berkas tersebut sendiri dapat dimasukkan oleh pengguna dengan menggunakan elemen input dengan atribut type yang memiliki nilai file. Berbeda dengan data pada formulir biasa yang dapat Anda akses melalui variabel $_POST, untuk merngakses berkas yang telah diupload oleh pengguna Anda akan menggunakan variabel $_FILES. Dengan menggunakan variabel ini, Anda dapat mendapatkan informas-informasi mengenai berkas yang telah diupload tersebut, seperti nama berkas, jenis berkas, lokasi penyimpanan sementara berkas, dan ukuran berkas seperti berikut ini : 7

emp4tbelas

emp4tbelas $_FILES['berkas']['name']; // mendapatkan nama berkas $_FILES['berkas']['tipe']; // mendapatkan tipe berkas $_FILES['berkas']['tmp_name']; // mendapatkan sementara penyimpanan berkas $_FILES['berkas']['size']; // mendapatkan ukuran berkas

Perlu diketahui bahwa berkas yang diupload oleh pengguna akan segera dihapus apabila pengguna berpindah halaman. Hal ini disebabkan karena untuk setiap berkas yang diupload pengguna, PHP hanya menyimpannya secara sementara saja. Jika Anda ingin menyimpan berkas tersebut secara permanen, Anda harus memindahkan lokasi berkas tersebut dari lokasi penyimpanan sementara ke lokasi yang Anda inginkan. Untuk melakukan hal seperti ini, Anda dapat menggunakan fungsi seperti pada contoh berikut ini :
move_uploaded_file($_FILES['berkas']['tmp_name'], 'c:\xampp\htdocs\situssaya\berkas');

Dalam membuat sebuah halaman yang dapat menerima berkas yang diupload dari pengguna, Anda harus ekstra hati-hati. Tentunya Anda tidak ingin pengguna Anda mengupload berkas yang berbahaya seperti virus ke dalam server web Anda. Untuk itu, Anda dapat membatasi jenis berkas yang dapat diupload oleh pengguna dengan menggunakan fungsi ereg() seperti pada contoh berikut ini :
// Periksa apakah berkas tersebut adalah sebuah gambar if (ereg('image', $_FILES['berkas']['type'] { // Jika ya, simpan berkas $nama_berkas = 'foto_' . $_SESSION['nama_pengguna']; move_uploaded_file($_FILES['berkas']['tmp_name'], 'c:\xampp\htdocs\situssaya\foto\' . $nama_berkas); } else { echo 'Maaf, kami hanya menerima gambar saja!'; }

2.3 MENGIRIM E-MAIL

Dengan menggunakan PHP, Anda dapat mengirimkan e-mail dari halaman web Anda dengan mudah. Hanya saja, perlu diperhatikan bahwa tidak semua layanan hosting yang Anda mendukung penggunaan fungsi ini. Konsultasikanlah terlebih dahulu dengan layanan hosting Anda apakah Anda dapat mengirim e-mail dengan PHP atau tidak. Berikut adalah contoh perintah yang dapat digunakan untuk mengirim sebuah e-mail :
// Menyiapkan isi pesan $tujuan = 'agus.perwira@eng.ui.ac.id'; $judul = 'Hanya mencoba'; $pesan = 'Bagaimana, e-mail ini sampai atau tidak?'; // Mengirim e-mail mail($tujuan, $judul, $pesan);

emp4tbelas

emp4tbelas

BAB 3:MENDEPLOY SITUS WEB

emp4tbelas

emp4tbelas

Setelah Anda membuat sebuah situs web, tentunya Anda ingin meletakkan situs web Anda di Internet agar dapat dibuka oleh banyak orang. Untuk ini, Anda harus mendeploy atau memasang situs web Anda kepada sebuah server web yang terhubung dengan Internet. Tentu saja, Anda dapat membuat server web Anda sendiri, namun untuk sebuah situs web pribadi biasanya ini bukanlah pilihan yang tepat karena Anda harus menyediakan sebuah komputer untuk menjadi server dan tentunya sebuah koneksi internet selama 24 jam terus-menerus. Untuk itu, Anda dapat menggunakan jasa dari sebuah perusahaan yang menyediakan layanan hosting atau yang juga dikenal dengan istilah web hosting company. Ada sangat banyak perusahaan seperti ini baik yang bertaraf lokal maupun internasional. Tarif yang ditawarkan pun sangat beragam, mulai dari gratis hingga puluhan juta rupiah per bulannya. Hosting yang gratis tentunya akan sangat menggiurkan, namun pada umumnya fitur yang disediakan sangat minim dan perusahaan tersebut akan menyelipkan iklan mereka secara paksa pada halaman web Anda. Dalam modul ini, penulis memilih layanan hosting gratis dari Byethost. Walaupun gratis, fitur yang disediakannya sudah sangat lumayan, yaitu kapasitas penyimpanan data sebanyak 5500 MB, koneksi untuk transfer data sebanyak 200 GB per bulan, dukungan untuk PHP dan MySQL dengan maksimum 5 skema, dan yang paling menarik, bebas iklan. Layanan hosting ini dapat Anda akses melalui situs http://www.byethost.com/. Selain layanan web hosting, Anda juga akan memerlukan sebuah domain. Domain adalah sebuah alamat internet yang dapat Anda gunakan untuk situs web Anda. Untuk domain yang berakhiran .com, .net, .co.id, dan sebagainya, Anda harus membayar biaya sewa domain pertahunnya. Namun, Jika Anda menggunakan layanan web hosting gratis, Anda akan mendapatkan sebuah domain yang gratis pula. Hanya saja, nama domain ini agak lebih panjang dan tidak akan sebagus domain yang berbayar.

3.1 MEMBUAT AKUN

Langkah pertama untuk menjadikan situs Anda live di Internet adalah dengan membuat akun pada layanan hosting Anda, dalam hal ini http://www.byethost.com/. Prosesnya sendiri cukup sederhana dan cepat. Namun, Anda diharuskan untuk mempunyai sebuah alamat e-mail aktif terlebih dahulu. Berikut adalah proses pembuatan akun pada http://www.byethost.com/:

emp4tbelas

emp4tbelas

1. Melalui halaman utama situs byethost, tekan tombol Sign up here

2. Masukkan data-data pada formulir dengan benar, lalu tekan tombol Register

3. Tekan tombol Click Me to Continu

emp4tbelas

emp4tbelas

4. Masukkan kode keamanan yang ditampilkan lalu tekan tombol Register untuk melanjutkan.

5. Akan ada pesan yang memberitahukan bahwa email untuk mengkonfirmasi proses pendaftaran Anda telah dikirimkan kepada Anda.

6. Periksalah e-mail Anda untuk mendapatkan e-mail konfirmasi tersebut, lalu buka link konfirmasi yang terdapat di dalamnya.

emp4tbelas

emp4tbelas

7. Masukkan kode keamanan yang ditampilkan lalu tekan tombol Register untuk melanjutkan.

8. Akan muncul informasi penting mengenai akun Anda. Ingatlah informasi yang ada di dalam halaman ini dengan baik lalu tekan link Click here to log into your VistaPanel untuk melanjutkan.

9. Masukkan username dan password Anda berdasarkan informasi yang terdapat pada halaman sebelumnya lalu tekan Login untuk melanjutkan.

emp4tbelas

emp4tbelas

10.Selamat! Dengan ini Anda telah berhasil membuat akun pada layanan hosting Byethost. 11.Untuk sementara, lakukan proses Logout terlebih dahulu.

1.1 MENDEPLOY BASIS DATA

Setelah Anda telah berhasil membuat akun pada penyedia layanan hosting, Langkah selanjutnya adalah untuk mendeploy atau memasang basis data yang akan digunakan pada situs web Anda. Berikut adalah proses untuk melakukan hal tersebut : 1. Bukalah aplikasi phpMyAdmin Anda. 2. Pilih skema basis data yang ingin Anda deploy, lalu tekan tombol Ekspor.

emp4tbelas

emp4tbelas

3. Ceklik pilihan kirimkan ke lalu tekan tombol Go untuk melanjutkan.

4. Simpanlah berkas sql dari skema basis data Anda. Berkas ini nantinya akan digunakan untuk memindahkan skema Anda ke penyedia layanan hosting.

5. Bukalah control panel penyedia layanan hosting Anda (dalam hal ini byethost), lalu pilih MySQL Database.

emp4tbelas

emp4tbelas

6. Masukkan nama skema basis data yang ingin Anda buat lalu tekan tombol Create Database untuk melanjutkan.

7. Akan muncul pesan konfirmasi bahwa skema basis data Anda telah berhasil dibuat. Ingatlah baik-baik nama dari skema tersebut.

8. Kembalilah ke halaman awal control panel dan pada kali ini, pilihlah phpMyAdmin.

emp4tbelas

emp4tbelas

9. Tekan link Connect Now untuk melanjutkan

10.Anda akan dibawa menuju aplikasi phpMyAdmin yang terdapat pada penyedia layanan internet Anda, tekan tombol Import untuk melanjutkan.

11.Pilih berkas sql yang sudah Anda buat sebelumnya lalu tekan tombol Go untuk mentransfer data.

emp4tbelas

emp4tbelas

12.Akan ada pesan konfirmasi bahwa data Anda sudah berhasil ditransfer.

13.Untuk memastikannya, tekan tombol Stuktur dan periksalah apakah data yang telah ditransfer sudah benar atau belum.

Setelah Anda telah berhasil mentransfer basis data Anda, Anda perlu menyesuaikan pengaturan agar halaman-halaman web Anda dapat melakukan koneksi terhadap basis data Anda pada layanan hosting Anda. Untuk melakukan hal ini, suntinglah dokumen inc Anda dan ubahlah informasi pada fungsi koneksi basis data Anda sesuai dengan informasi yang disediakan oleh layanan hosting Anda, sebagai contoh :
function buka_koneksi() { $koneksi = mysqli_connect('sql108.byethost31.com', 'b31_189754', 'rahasiadong', 'b31_189754_tokosaya'); if (!$koneksi) { die('Tidak dapat membuat koneksi dengan sistem basis data!'); } return $koneksi; }

1.1 MENDEPLOY SITUS WEB

emp4tbelas

emp4tbelas

Langkah selanjutnya adalah mengupload dokumen-dokumen HTML, CSS dan PHP Anda ke penyedia layanan hosting Anda. Anda dapat melakukan hal ini dengan melakukan langkah-langkah berikut ini : 1. Pertama-tama persiapkan dokumen-dokumen Anda dengan mengkompresinya menjadi sebuah file ZIP dengan menggunakan aplikasi kompresei berkas seperti WINRAR.

2. Buka control panel Anda, pilih Online File Manager.

3. Anda akan dibawa ke aplikasi yang dapat digunakan untuk memanejemen berkas-berkas yang tedapat pada situs web Anda. Pilih folder htdocs untuk melanjutkan. Folder ini memiliko fungsi yang sama dengan folder htdocs pada XAMPP Anda.

emp4tbelas

emp4tbelas

4. Dapat Anda lihat bahwa ada beberapa berkas yang sudah tersedia. Tentunya Anda perlu untuk menghapus berkasberkas tersebut terlebih dahulu.

5. Untuk melakuan itu, Anda dapat menceklis berkas index.htm lalu tekan tombol Delete.

6. Tekan tombol ceklis untuk melakukan konfirmasi penghapusan berkas.

emp4tbelas

emp4tbelas

7. Akan muncul pesan bahwa proses penghapusan berkas telah berhasil, tekan tombol tanda panah kiri untuk kembali ke folder.

8. Tekan tombol upload.

9. Pilih berkas ZIP Anda lalu tekan tombol ceklis untuk memulai proses upload.

emp4tbelas

emp4tbelas

10.Akan muncul pesan konfirmasi bahwa berkas-berkas Anda telah berhasil diupload. Tekan tombol tanda panah kiri untuk kembali ke folder.

11.Pastikan bahwa semua berkas-berkas Anda telah terupload dengan baik.

12.Cobalah membuka situs web Anda dengan mengetikan alamat sesuai nama domain yang telah diberikan untuk Anda. Jika semua berjalan dengan baik, maka Anda telah memiliki sebuah situs web di Internet. Selamat!

emp4tbelas