Diktat Pemrograman Web I

DIKTAT
PEMROGRAMAN WEB – I
Tonni Limbong, S.Kom.,M.Kom
Program Studi Sistem Informasi

FAKULTAS ILMU KOMPUTER
UNIVERSITAS KATOLIK SANTO THOMAS
MEDAN
2016
Kata Pengantar
Puji Syukur Penulis panjatkan kepada Tuhan Yang Maha Esa, atas berkat dan karunia-Nya, Modul
Pemrograman Web -I ini dapat diselesaikan dan sampai kepada para pengguna. Modul ini sangat
singkat dan sederhana, hanya membahas masalah dasar-dasar pembuatan web yang meliputi
HTML, PHP, Cascading Style Sheet (CSS), Javascript dan juga Database MySQL, yang sangat
berhubungan erat dengan mata kuliah di semester berikutnya.
Penulis juga sangat menyadari akan kelemahan dan kekurangan sebagai manusia yang tak pernah
luput dari kesilapan dan kekurangan pada penulisan dan pembuatan modul ini, untuk itu dengan
berlapang dada penulis dangat mengharapkan saran-saran dan kritik yang sifatnya membangun
dan demi kesempurnaan modul ini terlebih dahulu penulis ucapkan terimakasih.
Disamping itu modul ini juga tidak akan pernah sampai kepada tangan pembaca tanpa bantuan
dan dukungan dari berbagai pihak, oleh karena itu penulis mengucapkan dengan tulus terimakasih
yang sebanyak-banyaknya bagi semua pihak. Semoga bantuan dan kerja sama yang diberikan
kepada penulis selama ini semoga mendapatkan pahala dari Tuhan Yang Maha Pemurah dan
Penyayang, Amin.
Medan, September 2016

Penulis,
Tonni Limbong, S.Kom.,M.Kom
Sahabat paling baik dari kebenaran adalah waktu, musuhnya yang paing besar
adalah prasangka, dan pengiringnya yang paling setia adalah kerendahan hati.
(Caleb Charles Colton)
Kegagalan dapat dibagi menjadi dua sebab. Yakni, orang yang berpikir tapi tidak
pernah bertindak dan orang yang bertindak tapi tidak pernah berpikir. (W.A.
Nance)
Copy Right : Tonni Limbong, S.Kom,M.Kom i

DAFTAR ISI
Halaman
Kata Pengantar ................................................................................................................................ i
Daftar Isi ........................................................................................................................................... ii
Modul 1 : Pengenalan Web Server Dan Instalasi ........................................................................... 1
Modul 2 : HTML ( Hyper Text Markup Language ) ......................................................................... 6
Modul 3 : Table, Form Dan Frame ................................................................................................. 16
Modul 4 : Dasar Php, Operator Dan Looping.................................................................................. 25
Modul 5 : Decision If, Case, Include Dan Require .......................................................................... 34
Modul 6 : Cascading Style Sheet (CSS) Dasar ............................................................................. 41
Modul 7 : Javascript ........................................................................................................................ 50
Modul 8 : Session Dan Cookies ..................................................................................................... 60
Modul 9 : Database Mysql .............................................................................................................. 65
Modul 10 : Fungsi-Fungsi Umum Mysql ......................................................................................... 74
Modul 11 : Database Access Dengan Php ..................................................................................... 78
Modul 12 : Database Mysql Dengan Php ......................................................................................................... 85
Modul 13 : Merancang Layout Desain Website ............................................................................. 92
Modul 14 : Content Dan Industri Kreatif It ....................................................................................... 100
Daftar Pustaka ................................................................................................................................. L1
Modul Teori Pemrograman Web - I Unika ST. Thomas Medan
MODUL 1
PENGENALAN WEB SERVER DAN INSTALASI
a. Web Server
Web Server merupakan sebuah perangkat lunak dalam server yang berfungsi menerima permintaan
(request) berupa halaman web melalui HTTP atau HTTPS dari klien yang dikenal dengan browser
web dan mengirimkan kembali (response) hasilnya dalam bentuk halaman-halaman web yang
umumnya berbentuk dokumen HTML.
Gambar 1.1. Standar Web Architecture
Gambar 1.2. Dynamic Web Architecture
Beberapa Web Sever yang banyak digunakan di internet antara lain :

1. Apache Web Server (http://www.apache.org)
2. Internet Information Service, IIS (http://www.microsoft.com/iis)
3. Xitami Web Server (http://www.xitami.com)
4. Sun Java System Web Server
(http://www.sun.com/software/products/web_srvr/home_web_srvr.xml)
b. Server Side Scripting

Server Side Scripting merupakan sebuah teknologi scripting atau pemrograman web dimanascript
(program) dikompilasi atau diterjemahkan diserver. Dengan server side scripting, memungkinkan
untuk menghasilkan halaman web yang dinamis.
Beberapa contoh Server Side Scripting (Programming) :

1. ASP (Active Server Page) dan ASP.NET
2. ColdFusion (http://www.macromedia.com/software/coldfusion)
3. Java Server Pages (http://java.sun.com/products/jsp/)
4. Perl (http://www.perl.org)
5. Phyton (http://www.python.org)
6. PHP (http://www.php.net)
Oleh : Tonni Limbong, S.Kom,M.Kom 1

Keistimewaan PHPCepat
1. Free
2. Mudah dipelajari
3. Multi-platform
4. Dukungan technical-support
5. Banyaknya komunitas PHP
6. Aman
c. Instalasi Apache, PHP dan MySQL dengan XAMPP

Proses instalasi Apache, PHP dan MySQL seringkali menjadi kendala terutama bagi pemula yang
baru belajar pemrograman web dengan PHP. Hal tersebut disebabkan karena software tersebut
harus diinstall dan dikonfigurasikan satu per satu. Bagi belum mengerti benar, tentu sering
mengalami kesulitan, apalagi bagi kita yang belajar secara mandiri.
Namun jangan berkecil hati, saat ini banyak tersedia aplikasi paket yang menyatukan ketiga
software tersebut (Apache, PHP dan MySQL) ke dalam satu installer. Proses instalasinya pun dapat
dilakukan dengan mudah dan cepat, hanya perlu next, next, and finish.
Beberapa aplikasi paket tersebut antara lain:
1. XAMPP (versi Windows) dan LAMPP (versi Linux) yang dapat didownload di
http://apachefriends.org.
2. WAMP Server.
3. APPServ
4. PHPTriad.
Disarankan pemakaian XAMPP atau WAMP Server karena versi software di dalamnya
menggunakan versi terbaru.
d. Persiapan Instalasi
1. Pastikan komputer Anda belum terinstall web server lain seperti IIS atau PWS karena dapat
menyebabkan bentrok dengan web server Apache. Namun demikian, jika Anda masih tetap
mempertahankan program tersebut, setelah instalasi selesai Anda dapat mengkonfigurasikan
Apache secara manual dengan mengganti nomor port yang digunakan.
2. Download Source XAMPP versi stabil terbaru di http://apachefriends.org. Pilih versi sesuai
dengan sistem operasi yang Anda gunakan (tersedia versi untuk Windows, Linux dan Mac).
3. Pastikan komputer yang Anda gunakan berjalan dengan baik dengan kapasitas memori dan
hardisk yang masih mencukupi.
e. Proses Instalasi XAMPP

1. Jalankan file installer XAMPP xampp-win32-x.x.x-installer.exe.
Gambar 1.3. File installer XAMPP

2. Akan ditampilkan window instalasi XAMPP. Pilih Next > untuk memulai proses instalasi.
Gambar 1.4. Window Instalasi XAMPP
3. Akan ditampilkan window lokasi tujuan instalasi (destination folder), tentukan lokasi (folder)
dimana XAMPP akan diinstall dengan menekan tombol Browse … Pilih tombol Next untuk
melanjutkan prosess instalasi.
Gambar 1.5. Folder tujuan instalasi XAMPP
4. Selanjutnya akan ditampilkan window pilihan untuk kemudahan mengakses XAMPP nantinya.
Tekan tombol Install untuk melanjutkan proses instalasi.
Gambar 1.6. Window pilihan XAMPP
5. Proses instalasi dimulai.

Gambar 1.7. Proses instalasi dimulai
6. Proses instalasi selesai. Klik Finish untuk menutup proses instalasi.
Gambar 1.8. Proses instalasi selesai
7. Jika proses instalasi berjalan dengan lancar makan akan ditampilkan window konfirmasi.
Gambar 1.9. Konfirmasi Instalasi Berhasil
8. Kita dapat mengatur XAMPP dengan mengakses XAMPP Control Panel yang dapat diakses
melalui menu di Program Files atau icon di taskbar.

Gambar 1.10. XAMPP Control Panel
f. Test Instalasi XAMPP di Browser

Untuk memastikan bahwa XAMPP beserta PHP, Apache dan MySQL berjalan dengan baik, bukalah
browser dan ketikkan URL sebagai berikut:
http://localhost
Jika semua sudah berjalan dengan baik, maka akan ditampilkan gambar sebagai berikut:
Gambar 1.11. Tampilan XAMPP di Browser
Pilih bahasa yang ingin digunakan dan akan ditampilkan halaman utama XAMPP sebagai berikut:
Gambar 1.12. Tampilan XAMPP di Browser

MODUL 2
HTML ( HYPER TEXT MARKUP LANGUAGE )
1. Pengenalan HTML
Dalam membangun sebuah website tidak terlepas dari HTML yang merupakan bahasa yang umum
digunakan untuk membuat suatu web page (halaman web). Isi HTML dapat dilihat pada setiap
halaman web dengan cara melihat pada bagian sourcecodenya.
Bahasa HTML ini berbasis pada text mode sehingga dalam penulisannya menggunakan program-
program yang berbasis pada text, contohnya : Catatanpad, Textpad, wordpad, Microsoft word dan
lain-lain
Tannpa menggunakan penulisan HTML, halaman web juga dapat dibuat selain dengan program text
mode yaitu dengan program berbasis Graphics User Interface (GUI), contohnya : Macromedia
Dreamweaver, Macromedia Flash, Microsoft Frontpage, Microsoft Publisher dll.
Aplikasi yang dipersiapkan adalah internet explorer (browser) bisa juga mozilla,netscape,opera dan
yang lainnya, dan notepad.
#. Menjalankan notepad:
- Klik Start Program Acsesories Notepad, atau
- Klik Start Run, Ketik Notepad, enter/OK
#. Menjalankan Internet Explorer:
- Klik Start Program Internet Explorer
Tabel 21. Elemen Dasar Bahasa HTML

Html Menandakan jenis Bahasa html yang digunakan
Head Header
Title Judul pada header
Body Isi dari halaman web
Penulisan elemen dasar HTML adalah sebagai berikut :

<html>
<head><title> ………. </title> </head>
<body>
……………………
</body>
</html>
Catatan : setiap elemen dasar diawali dengan tanda pembuka < > dan diakhiri dengan tanda
penutup </ > sesuai jenis elemen.
Contoh coba.html :
<html>
<head>
<title> Percobaan Membuat Halaman Web </title>
</head>
<body> Belajar Membuat Website</body>
</html>
Setelah mengetik source code html, sebelum di jalankan di browser terlebih dahulu disimpan dengan
cara:

- Klik File Save, tentukan folder penyimpanan, atur type file menjadi All Files dan nama file
selalu diakhiri dengan “.html”.
Perhatikan dialog berikut:
Folder Penyimpanan
di C:/Tonni
Nama file, selalu diakhir

dengan “.html“
Pastikan Type nya= All

Files
Gambar 2.1 . Penyimpanan File html
Menjalankan programnya dilakukan dengan mengetik namafile dan foldernya di address pada
browser (internet explorer) :
Ketik Alamat
file
Gambar 2.2 . Memanggil file html dari browser
Hasilnya seperti Berikut :

Title
Body
Gambar 2.3 . Output dari file html setelah jalan di browser
2. Format Font & Paragraph

Dalam bahasa HTML, pengaturan font & paragraf tidak bisa dilakukan dengan cara mengubah
langsung. Pengaturan harus dilakukan dengan menuliskan tag-tag HTML. Berikut ini adalah
beberapa tag-tag HTML dalam pengaturan font.

Tabel 2.2. Property dari Font dan Paragraph

Tag Fungsi
<B> ………….. </B> Bold / Huruf Tebal
<I> …………… </I> Italic / Huruf Miring
<U> …………. </U> Underline / huruf dengan garis bawah
<center> …………. </center> Menempatkan pada tengah halaman
<sub> ………… </sub> Subscript / huruf dibawah
<sup> ………… </sup> Superscript / huruf diatas
&nbsp Spasi ( dilakukan untuk menambah spasi yang lebih dari satu
spasi )
<br> Pindah baris
<p> ……. </p> Membuat Paragraph
<HR> Membuat garis pemisah
<marquee> ……… </marquee> Membuat tulisan bergerak
<font> ….. </font> Pengaturan spesifik font / character
<Align> Pengaturan spesifik paragraph
<IMG> ………. </IMG> Pengaturan Gambar
Soucecode coba2.html :
Gambar 2.4. Source Code coba2.html
Hasil Outputnya:
Gambar 2.5. Output gambar 1.4( coba2.html)

Pada output diatas pembuatan spasi dan enter tidak dikenal, jadi untuk mengatasinya di pakai fungsi
&nbsp untuk Spasi dan <br> untuk Enter.
Bentuk Source codenya :
Gambar 2.6. Source code( coba2.html)
Hasil Outputnya:
Gambar 2.7. Output Gambar 1.6 ( coba2.html)
a. Pengaturan FONT dan Garis secara spesifik

Tabel 2.3. Pengaturan Font
Tag Fungsi Keterangan
Face Jenis Font / Huruf Ditulis setelah tag font
Contoh : <font face=”Arial”> …….. </font>
Size Menentukan Ukuran Untuk ukuran huruf, ditulis setelah tag font
( huruf,garis dll ) <font size=”14”> ………. </font>
Color Menentukan warna <font color=”RED”> …….. </font>
(huruf, garis dll)
Dari ketiga pengaturan font diatas, bisa disatukan dalam satu tag font dengan tambahan spasi tiap
tag.
Contoh coba3.html :

Hasil Outputnya:
Gambar 2.9. Output gambar 1.8 (coba3.html)
b. Pengaturan Letak Paragraf / Text / Gambar secara spesifik
Tabel 2.4 Line Position Paragaraph

Tag Fungsi Contoh pemakaian
CENTER Rata Tengah <Align=”center”>
LEFT Rata kiri <Align=”left”>
RIGHT Rata kanan <align=”right”>
c. Pengaturan Background
Untuk mengatur / mendesain background agar tidak terlihat halaman warna putih biasa, bisa
dilakukan dengan mengedit pada tag body.
Tabel 2.5 Line Pembuatan Warna Background

Bgcolor Memberi warna Ditulis setelah tag body. Contoh :
background <body bgcolor=”RED”> …….
</body>
Background Memberi background <body background=”gambar.jpg”>
berupa gambar <body background="Gambar/satu.jpg">
Catatan : Memberi gambar pada background berarti file gambar tersebut harus ada pada lokasi
tempat penyimpanan file html yang dibuat.

Kalau misalkan file tersebut ada pada sub folder pada tempat penyimpanan file html maka
sub folder tersebut ikut dituliskan.
Contoh :
# File gambar berada pada folder lain dengan nama folder image yang berada dalam tempat
penyimpanan file html, maka dituliskan : <body background=”image\gambar.jpg”>
# Kalau misalkan file gambar ada pada alamat web lain (mengambil dari internet) maka yang
dituliskan adalah alamat web tersebut dituliskan :<body
background=http://www.detik.com/gambar.gif>
Contoh coba4.html:

Hasil Outputnya:
Gambar 2.11. Output gambar 1.10 (coba4.html)

Contoh coba5.html:
Gambar 2.12. Sourcode coba5.html

Hasil Outputnya:
Gambar 2.13. Output Gambar 1.12 (coba5.html)
3. Gambar / Image
Disamping sebagai background, file gambar juga dapat diinpuntukan kedalam halaman web. Tag
yang diberikan untuk menginpuntukan dan menampilkan gambar adalah IMG
Contoh bentuk penulisannya:

<IMG SRC="alamat folder gambar" width="300" height="160">
Tabel 2.6. Pengaturan Image yang diinput dan ditampilkan

SRC Input gambar dari lokasi penyimpanan Menentukan lokasi file gambar yang
gambar diinputkan setelah tag IMG
( Image Source ) <img src=”gambar.jpg”>
WIDTH Lebar ukuran gambar yang ditampilkan <img src="coba11.jpg" width="50%"
HEIGHT Tinggi ukuran gambar yang ditampilkan height="70%">
Source code coba6.html
Gambar 2.14. Source code coba6.html
Hasil Outputnya:

Gambar 2.15. Output dari gambar 1.14 (coba6.html)
Catatan :
1. Jika ukuran width dan height tidak dituliskan maka ukuran gambar yang ditampilkan adalah
ukuran sebenarnya dari file gambar tersebut
2. Fungsi tag Align dapat ditambahkan pada tag image untuk menentukan lokasi di kiri, center
maupun dikanan halaman
d. JARAK SPASI antar Obyek.

Untuk memberikan jarak spasi antar obyek agar obyek memiliki jarak yang cukup tepat maka dapat
digunakan dengan atribut HSPACE dan VSPACE
Tabel 2.7 Pengaturan Property Spasi

HSPACE Memberikan spasi Horisontal Diberikan setelah tag obyek, misalkan
VSPACE Memberikan spasi vertikal gambar. Contoh :
<img src=”xtr.jpg” vspace=”200”>
e. Membuat Link ke halaman lain

Link adalah bentuk perintah untuk menuju sebuah halaman/file lain yang dibutuhkan. File dapat
berada satu folder atau beda folder bahkan sebuah website. Untuk membuat Link ke halaman lain
tag yang digunakan adalah <a href> ….. </a>
Contoh Penulisannya : <a href=”dua.html”> Link ke halaman 2 </a>
Contoh coba7.html:

Gambar 2.16. Sourcode coba7.html
Hasil Outputnya
Gambar 2.17. Output gambar 1. 6 (coba7.html)
Catatan : Teks dalam tanda “ ” merupakan lokasi tempat menyimpan file yang di link / dituju.
Jika lokasi link ada pada halaman web di internet maka yang dituliskan adalah alamat
internet tersebut diawali dengan http://
Contoh : <a href=”http://www.google.com> Link ke halaman Google </a>
f. Manipulasi Daftar Item dalam HTML

1. Ordered List ( memberikan penomoran otomatis secara berurutan )
Tag yang digunakan untuk membuat Ordered List adalah <OL> ….. </OL>
Diantara pembukadan penutup tag OL, diberikan tag <LI> untuk menyatakan list nomor
tersebut
Contoh :
<OL type=”1”>
<LI> Menulis angka berurutan dari 1
<LI> Ini adalah yang nomor 2
<LI> Dan yang ini adalah nomor 3
</OL>

Secara default (awal mula), Ordered List yang digunakan adalah urutan dari angka 1 sampai
seterusnya. Tetapi angka tersebut bisa dirubah sesuai dengan type-type pengurutan yang lain.
Cara pembuatannya adalah dengan menambahkan atribut Type setelah Tag OL
Tabel 2.8. Property LIST

TYPE=A Membuat daftar berurutan dengan huruf abjad kapital
TYPE=a Membuat daftar berurutan dengan huruf abjad kecil
TYPE=I Membuat daftar berurutan dengan huruf Romawi besar
TYPE=i Membuat daftar berurutan dengan huruf romawi kecil
TYPE=x Membuat daftar berurutan dengan huruf awal x
Source code coba8.html: Hasil Outputnya:
Gambar 2.18. Sourcode dan Output gambar coba8.html
2. Unordered List
Selain penomoran dengan angka / abjad yang berurutan, dalam html juga bisa digunakan untuk
menampilkan list tanpa penomoran berurutan alias dengan bullets. Tag yang digunakan adalah
UL. Sama halnya dengan Ordered List, maka tiap list item diberi atribut <LI>. Type-type bullet
yang bisa ditampilkan sebagai berikut :
Tabel 2.9. Property Bullet
TYPE=CIRCLE Bullets berupa lingkaran tiap item list

TYPE=SQUARE Bullets berupa tanda kotak tiap item list
TYPE=DISK Bullets berupa tanda piringan tiap item list
<OL
Contoh:
<UL type=”Disc”>
<LI> Menulis angka berurutan dari 1
<LI> Ini adalah yang nomor 2
<LI> Dan yang ini adalah nomor 3
</UL>

Modul Teori Pemrograman Web-I Unika ST. Thomas Medan
MODUL 3
TABLE, FORM DAN FRAME
a. Table
Table pada HTML sering di gabungkan pada PHP saat mendesain sebuah halaman website dan
membantu untuk mengatur tampilan (layout) website.
Tag pada Table pada umumnya ada dua bagian yaitu <TR> untuk Baris dan <TD> untuk Kolom.
Tabel 3.1. Property Tabel

BORDER Bingkai pada Table
CELLSPACING Jarak antara baris pada cell Tabel
CELLPADDING Jarak antara Kolom pada cell Tabel
COLSPAN Menggabungkan kolom
ROWSPAN Menggabungkan Baris
WIDTH Lebar Tabel
HEIGHT Tinggi Table
BGCOLOR Warna (table,baris,kolom/cell)
BACKGROUND Background Gambar
VALIGN Rata teks pada kolom secara Vertikal (atas,bawah,tengah)
ALIGN Rata teks pada kolom secara Horizontal (kiri,Kanan,tengah
Bentuk Umum dari Tag Table:

<table border=“?“ cellspacing=“?“ cellpadding=”?” bgcolor=”?”/background=”?” width=”?” height=”?”>
<tr bgcolor=”?” …. >
<td colspan=”?”/rowspan=”?” width=”?” height=”?” ……> Kolom 1</td>
<td colspan=”?”/rowspan=”?” width=”?” height=”?” ……> Kolom 2</td>
</tr>
</table>
Contoh sourcecode Table.html
Gambar 3.1. Coding Table.html

Hasil outputnya:
Gambar 3.2. Hasil Output Gambar 2.1.
Contoh Sourcecode Tabel1.html
Gambar 3.3. Source Code Tabel1.html
Hasil Outputnya :
Gambar 3.4. Output Gambar 3.3. Tabel1.html

b. Form
Tag FORM dipakai untuk rancangan website yang membutuhkan input dan tombol seperti formulir
untuk pendaftaran email pada website. Khususnya membuat program php yang sifatnya dinamis.
Bentuk Umum Form:

<form name=”?” action=”?” method=”?”>
--
Isi objek form yang dibutuhkan
</form>
Contoh sourcecode form.html:
Gambar 3.5. Source Code Form.html
Hasil Outputnya:
Gambar 3.6. Output Gambar 3.5.
seperti pada bentuk form diatas kelihatan tidak rapi, sebaiknya objek-objek tersebut
disusun/didesain dalam sebuah format table agar kelihatan rapi.
Objek-objek yang ada pada form adalah:

1. Textbox : <input type=”text” name=”xname” size=”?” maxlength=”?”>
2. ComboBox : <select Size=”?” name=”xname”><Option>isi 1</option><Option>isi 2</option>
................. <Option>isi_n</option></select>
3. Textarea : <textarea name=”xname” cols=”?” rows=”?”> isi isi isi </textarea>

4. Option : <input type=”radio” name=”xname’><option>isi</option>

5. CheckList : <input type=”checkbox” name=”xname”><option>isi </option>
6. Submit : <input type=”submit” value=”Proses” name=”xproses”>
7. Reset : <input type=”reset” value=”reset” name=”xreset”>
Catatan:
Fungsi dari property pada objek form seperti name=”xname” untuk membuat nama objek, size=”?”
untuk mengatur panjang objek jika pada textarea dikenal dengan Cols, maxlength=”?” dipakai untuk
mengatur panjang string yang bisa diterima khusus untuk input type=”text”, rows=”?” untuk
mengatur lebar dan jumlah baris pada textarea, value=”xxxx” untuk memberikan isi sebuah objek,
Option untuk memberikan isi dari select, input type=radio, dan checkbox.
Contoh soucecode form1.html
Gambar 3.7. Source Code Form1.html.
Hasil Outputnya:
Gambar 3.8. Output Gambar 3.7.

c. Frame
Dalam satu layar monitor sebenarnya dapat menampilkan tiga buah file yang berbeda, misalnya file
judul.html, menu.html dan isi.html. Agak mirip dengan waktu pembahasan tabel (membuat layout
halaman web), bedanya kalau tabel hanya menampilkan satu file sedangkan ini tiga file. Untuk
membuat frame, ikuti langkah-langkah berikut untuk membuat frame dibawah ini:
File: "judul.html"
File= "isi.html"
File=
"menu.html"
Gambar 3.9. Rancangan Frame (Index.html)
Ketik source code berikut kemudian simpan dengan nama "judul.html”.
Gambar 3.10. Source Code judul.html
Hasilnya outputnya:
Gambar 3.11. Output Gambar 3.10
Ketik Sourcode berikut dan simpan dengan nama "menu.html". Jangan lupa untuk menyimpan semua file di
folder yang sama.

Gambar 3.12. Source Code Menu.html
Hasilnya akan seperti ini:
Gambar 3.13. Output dari Gambar 3.12
File yang terakhir simpan dengan nama "isi.html" (jadi total file yang kita simpan dalam 1 folder ada 3 file :
judul,menu,isi) .
Gambar 3.14. Source Code isi.html

Hasil Outputnya:
Gambar 3.15. Output dari Gambar 3.14
Jika dilihat file yang ada dalam 1 folder sebelum di susun dalam sebuah frame adalah sebagai berikut:
Gambar 3.16. Folder Tempat Penyimpanan File di atas (dalam 1 folder)
Setelah file yang akan digabung sudah siap, untuk menggabungkannya dibuat 1 file untuk
menggabungkan file tersebut. Tag yang diperlukan untuk yaitu <FRAMESET> dan <FRAME>. Tapi
perlu juga property yang lain seperti:
Tabel 3.1. Atribut Frame
<FRAMESET> Cols Membagi dalam bentuk Kolom
Rows Membagi dalam bentuk Baris
<FRAME> src File yang dibutuhkan(isi)

name Nama frame
Noresize Agar tidak bisa dilebarkan
Frameborder Menghilangkan border frame
Bordercolor Membuat Warna Border Frame
Border Membuat Ukuran bingkai frame

Atribut COLS akan membagi bidang menjadi beberapa kolom. Dapat ditulis COLS="30%,70%" untuk
membagi bidang menjadi dua kolom berukuran (urut dari kiri) 30% dan 70%. Juga dapat ditulis
COLS="20%,20%,60%" untuk membagi bidang menjadi tiga kolom, dan seterusnya. Dapat juga
dibagi bukan dalam persen, seperti COLS="250,450" yang membagi bidang menjadi dua kolom
berukuran 250 pixel dan 450 pixel. Atau dibagi menjadi COLS="200,300,*" yang artinya dibagi
menjadi 3 kolom berukuran 200 pixel, 300 pixel dan sisanya.
Seperti halnya COLS, atribut ROWS juga berfungsi membagi bidang. Bedanya ROWS membagi
menjadi beberapa baris, bukan kolom. Aturannya persis sama, bisa dalam persen maupun dalam
pixel.
<FRAME BORDERCOLOR="..." FRAMEBORDER="YES" MARGINHEIGHT="..."

MARGINWIDTH="..." NAME="..." NORESIZE SCROLLING="YES" SRC="...">
Atribut SCROLLING yang berfungsi untuk menentukan ada tidaknya scrollbar. Atribut
SCROLLING="YES" akan menyebabkan selalu ada scrollbar pada frame, atribut SCROLLING="NO"
menyebabkan tidak ada scrollbar dalam kondisi apapun dan atribut SCROLLING="AUTO"
menyebabkan scrollbar akan muncul saat dibutuhkan, yaitu saat isi frame lebih besar daripada
ukuran frame.
Kemudian atribut SRC adalah atribut yang utama, yaitu memanggil file yang akan mengisi frame.
Pada file induk.html, dengan atribut SRC kita telah memanggil file judul.html, menu.html dan file
isi.html. SRC tidak selalu harus memanggil file html, kita juga dapat menuliskan SRC="tintin.gif"
untuk menampilkan gambar di dalam frame misalnya. Anda dapat bereksperimen, terserah.
Untuk selanjutnya ketik source code dibawah ini dan simpan dengan nama file:Index.html sebagai
file induknya.
Gambar 3.17. Source Code Frame (index.html)

Hasil Outputnya :
Gambar 3.18. Output gambar 3.17 (index.html)
Fungsi atribut TARGET pada tag <A HREF> yang ada pada file menu.html adalah mengisi target
dengan nama-nama frame sehingga saat di klik, file baru akan terbuka di frame yang dituju. Dapat
juga mengisi target dengan empat hal berikut:
• _blank, ini akan membuka window baru dan menampilkan alamat yang dipanggil di sana.
• _top, akan menampilkan alamat yang dipanggil di window yang sama - full satu window - tidak
peduli sebelumnya ada frame atau tidak.
• _self, menampilkan alamat yang dipanggil di tempat yang sama. Kalau yang memanggil adalah
sebuah frame, maka halaman yang dipanggil akan ditampilkan di frame itu.
• _parent, ini akan menampilkan alamat yang dipanggil di frameset satu tingkat lebih tinggi dari frame
yang memanggil.
Target yang paling aman adalah menggunakan target="_top" yang berarti alamat yang dipanggil
akan muncul lengkap mengisi satu window, full; atau sekalian memakai target="_blank" yang berarti
alamat yang dipanggil akan muncul di window baru.

MODUL 4
DASAR PHP, OPERATOR DAN LOOPING
a. Pengenalan PHP
PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP dapat
disisipkan diantara bahasa HTML dan karena bahasa Server side, maka bahasa PHP akan
dieksekusi di server, sehingga yang dikirimkan ke browser adalah “hasil jadi” dalam bentuk HTML,
dan kode PHP anda tidak akan terlihat.
PHP dibuat pertama kali oleh satu orang yaitu Rasmus Lerdorf, yang pada awalnya dibuat untuk
menghitung jumlah pengunjung pada homepagenya. Diawal Januari 2001, PHP telah dipakai lebih
dari 5 juta domain diseluruh dunia, dan akan terus bertambah karena kemudahan aplikasi PHP ini
dibandingkan dengan bahasa Server side yang lain. Anda dapat melihat angka sesungguhnya di
http://www.php.net/usage.php.
PHP termasuk dalam Open Source Product. Jadi anda dapat merubah source code dan
mendistribusikannya secara bebas. PHP juga diedarkan secara gratis. Anda bisa mendapatkannya
secara gratis. PHP juga dapat berjalan diberbagai web server semisal IIS, Apache. PWS, dll.
b. Penggabungan PHP dengan HTML

Seperti yang telah dituliskan sebelumnya bahwa PHP dapat digabung (embed) dengan HTML, Untuk
penulisannya dalam HTML, kode PHP diawali dengan tanda <? atau <?php dan diakhiri dengan
tanda ?>. Dan untuk menambahkan komentar diawali dengan tanda /* dan diakhiri dengan */ atau
menggunakan tanda //.
Catatan :
Tanda /* dan */ digunakan jika komentar yang kita tulis lebih sari 1 baris, sedangkan
tanda // digunakan jika komentar yang kita gunakan hanya 1 baris saja.
Contoh penggunaan PHP :

<HTML>
<?php
echo (“Teks ini dicetak menggunakan PHP”);
?>
</HTML>
c. Variabel dalam PHP

Setiap bahasa pemrograman pastilah mempunyai suatu variabel. Variabel berfungsi untuk
menyimpan beberapa bit data, sehingga untuk memanggil suatu data kita tinggal memanggil variabel
tersebut.
Dalam PHP, setiap variabel selalu dimulai dengan tanda ‘$’. Tidak peduli data tersebut apakah
integer, real maupun string, PHP akan secara otomatis mengkonversi data menurut tipenya.
Contoh :
<HTML>
<HEAD>

<TITLE> Variabel dalam PHP </TITLE>

</HEAD>
<BODY>
<?
$variabel=1;
echo ("Nilai variabel = $variabel<BR>"); //variabel bertipe integer
$variabel=1+3.5;
echo ("Nilai variabel = $variabel<BR>"); //variabel bertipe double
$variabel="Selamat datang di PHP";
echo ("Nilai variabel = $variabel<BR>"); //variabel bertipe string
?>
</BODY>
</HTML>
Gambar 4.1. Contoh Variabel dalam PHP
d. Konstanta
Ada kalanya dalam suatu program ada nilai yang tidak pernah berubah alias selalu konstan. Untuk
membuat sebuah konstanta dalam PHP, kita bisa menggunakan fungsi built-in PHP yaitu define().
Misal :
define(“PERUSAHAAN”, “PT. Kabur Kasat Mata”);

define(“ALAMAT”, “Jl. Tidak Jelas”);
dalam contoh diatas, kita membuat 2 buah konstanta yaitu PERUSAHAAN yang berisi identitas
perusahan dan konstanta ALAMAT yang berisikan alamat tempat perusahaan tersebut berada.
Untuk memanggil konstanta tersebut, kita bisa menuliskan sbb :
echo(“Saya kerja di “ . PERUSAHAAN . “<BR>”);

echo(“Yang beralamat di “ . ALAMAT . “<BR>”);
jika kita jalankan program tersebut, maka secara otomatis akan kita dapatkan hasil :
Saya kerja di PT. Kabur Kasat Mata

Yang beralamat di Jl. Tidak Jelas

e. Penanganan Form
Jenis-jenis property pada FORM
Form Input Type TEXT dan PASSWORD
Form Input Type RADIO
Form Input Type CHECKBOX
Form Input Type COMBO BOX
Form Input Type TEXTAREA
Form inputan dibuat dengan tag-tag HTML. Halaman yang mengandung form murni (tidak ada script
php) tidak harus disimpan dalam bentuk php, bisa dalam bentuk html. Untuk merancang sebuah
form inputan, setidaknya ada 3 (tiga) hal penting, yaitu :
1. METHOD
Method dari sebuah form menentukan bagaimana data inputan form dikirim. Method ini ada dua
macam, yaitu GET dan POST. Method ini menentukan bagaimana data inputan dikirim dan
diproses oleh PHP.
2. ACTION
Action dari sebuah form menentukan dimana data inputan dari form diproses. Jika action ini
dikosongkan, maka dianggap proses form terjadi di halaman yang sama. Jadi halaman form dan
halaman proses bisa saja dipisah atau dijadikan satu.
3. SUBMIT BUTTON
Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi sebagai trigger
pengiriman data dari form inputan. Jika tombol ini ditekan, maka data form akan dikirimkan
(diproses) di halaman yang sudah ditentukan pada atribut action.
Berbagai Cara Penanganan Form

Cara 1 : Menyatukan antara Form dan Proses
Proses pengolahan form dilakukan di halaman yang sama dengan form inputannya. Jika
proses penanganan form berada di satu halaman, maka value atribut action pada tag form
tidak perlu diisi (dikosongkan).
Contoh :
<html>
<head><title>Pengolahan Form</title></head>
<body>
<FORM ACTION="" METHOD="POST" NAME="input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>
<?php
if (isset($_POST['Input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b>$nama</b>";
}
?>
Cara 2 : Memisahkkan antara Form dan Proses

Proses pengolahan form dilakukan di halaman yang terpisah dengan form inputannya. Jika
proses penanganan form berada dilakukan di halaman yang berbeda, maka value atribut
action pada tag form harus diisi dengan alamat halaman tempat proses pengolahan form.
Contoh :
a. File 1 (proses01.php)
<html>
<head><title>Pengolahan Form</title></head>
<body>
<FORM ACTION="proses02.php" METHOD="POST" NAME="input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
b. File 2 (proses02.php)
<?php
if (isset($_POST['Input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b>$nama</b>";
}
?>
Dalam form selalu ada value yang nantinya akan dijadikan sebuah variabel oleh PHP. Variabel inilah
yang akan diproses oleh PHP tergantung pada penggunaan program PHP tersebut. Misalkan saja
kita mengubah form pada latihan berikut :
<HTML>
<HEAD>
<TITLE> Variabel dari Form </TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="php2.php">
Nama :
<INPUT TYPE="Text" NAME="nama"><BR>
Password :
<INPUT TYPE="Password" NAME="pass"><BR>
Jenis Kelamin <BR>
<INPUT TYPE="Radio"
NAME="kelamin" VALUE="pria">Pria
<INPUT TYPE="Radio"
NAME="kelamin" VALUE="wanita">Wanita<BR>
Hobi : <BR>
<INPUT TYPE="Checkbox"
NAME="hobi" VALUE="tidur">Tidur<BR>
NAME="hobi" VALUE="bersepeda">Bersepeda</BR>

NAME="hobi" VALUE="lain">Lainnya</BR>
<INPUT TYPE="submit" VALUE="Kirim">
<INPUT TYPE="Reset" VALUE="Ulangi">
</FORM>
<?
if(isset($nama)) {
echo("Nama Anda : $nama<BR>");
echo("Password : $pass<BR>");
echo("Jen Kelamin : $kelamin<BR>");
echo("Hobi : $hobi<BR>");
}
?>
</BODY>
</HTML>
Hasilnya sebagai berikut :
Gambar 4.2. Form Inputan
Setelah dikirim, hasilnya akan seperti dibawah ini :
Gambar 4.3. Hasil dari inputan pada form

Dari program diatas, dapat terlihat bahwa name yang terdapat pada form secara otomatis diubah
oleh PHP ke dalam variabel-variabel, sehingga memudahkan kita untuk mengidentifikasi data yang
dikirim oleh form.
Fungsi dari function isset() adalah untuk mengecek apakah variabel telah terkirim/mempunyai nilai,
jika variabel tersebut telah terkirim, maka PHP akan mengeksekusi program yang terdapat diantara {
dan }.
F. Operator
1. Operator Aritmatika
Operator aritmatika adalah operator yang digunakan untuk melakukan fungsi matematika. Operator
aritmatika dalam PHP :
Tabel 4.1. Operator
Operator Operasi Penggunaan
+ Penjumlahan $a+$b
- Pengurangan $a-$b
* Perkalian $a*$b
/ Pembagian $a/$b
% Modulus $a%$b
2. Operator String
Hanya ada satu operator string, yaitu operator concatenation ( . ).
<?php
$a=”Hallo”;
$b= $a . “Selamat Datang di PHP”;
//$b berisikan “Hallo Selamat datang di PHP”
?>
3. Operator Bitwise
Operator bitwise dapat digunakan untuk membuat bit tertentu darisuatu integer menjadi 1 atau 0.
Tabel 4.2. Operator Bitwise

Contoh Nama Hasil
$a & $b And Bit yang bernilai 1 pada $a dan $b akan diset 1
$a | $b Or Bit yang bernilai 1 pada $a atau $b akan diset 1
$a ^ $b Xor Bit yang bernilai 1 pada $a atau $b tetapi tidak pada keduanya akan
diset 1
~ $a Not Bit yang bernilai 1 pada $a akan diset 0, dan sebaliknya.
$a << Shift Left Geser bit $a sebanyak $b langkah ke kiri (setiap langkah berarti “kalikan
$b dengan dua”).
$a >> Shift right Geser bit $a sebanyak $b langkah ke kanan (setiap langkah berarti
$b “bagikan dengan dua”).
4. Operator Perbandingan

Tabel 4.3. Operator Bitwise

Contoh Nama Hasil
$a > $b Lebih dari True jika $a lebih besar dari $b
$a <= $b Kurang dari atau sama dengan True jika $a lebih kecil dari $b
atau $a sama dengan $b
< Kurang dari True jika $a lebih kecil dari $b
$a >= $b Lebih besar atau sama dengan True jika $a lebih besar dari $b
atau $a sama dengan $b
$a == $b Sama dengan True jika $a sama dengan $b
$a != $b Tidak sama dengan True jika $a tidak sama
dengan $b
Operator perbandingan lainnya adalah operator trinary “?:” yang memiliki bentuk : (ekspresi) ? (jika
benar) : (jika salah);
5. Operator Logika
Tabel 4.4. Operator Logika
Contoh Nama Hasil
$a and $b And True jika $a sama dengan $b
$a && $b
$a or $b Or True jika salah satu $a atau
$a || $b $b adalah benar
$a xor $b Exclusive Or True jika salah satu $a atau $b
adalah benar dan tidak
keduanya
!$a Not True jika $a tidak benar
G. Looping (Perulangan)
Setiap bahasa pemrograman pasti memiliki mekanisme untuk melakukan looping (perulangan)
dalam code-nya. Bagaimana dengan PHP? PHP Sebagai bahasa pemrograman tentu saja juga
memiliki mekanisme ini. Statemen-statemen looping pada PHP bertujuan untuk mengeksekusi suatu
blok kode yang sama selama beberapa kali dan bisa ditentukan perulangannya.
PHP memiliki beberapa statemen yang digunakan untuk operasi looping yaitu:
1. While, yaitu perulangan pada suatu blok kode selama kondisi tertentu masih terpenuhi.
2. Do...While, yaitu perulangan yang selalu dijalankan minimal sekali dan baru kemudian
mengulangi blok kode nya selama suatu kondisi terpenuhi.
3. For, yaitu perulangan yang sifatnya pasti pada suatu blok kode tertentu dan sudah ditentukan
sebanyak jumlah tertentu.
4. Foreach, yaitu perulangan khusus yang digunakan pada array.
1. WHILE
Statemen while akan mengeksekusi suatu blok kode "jika dan selama" suatu kondisi looping
terpenuhi.
Sintaks :
while (kondisi)
kode yang akan dieksekusi;
Contoh : Berikut akan menunjukkan suatu looping yang akan selalu berjalan selama nilai i adalah

kurang dari atau sama dengan 5. Nilai i akan di-increase dengan 1 selama looping berjalan.
<html>
<body>
<?php
$i=1;
while($i<=5)
{
echo "The number is " . $i . "<br />";
$i++;
}
?>
</body>
</html>
2. DO … WHILE
Statemen do..while akan mengeksekusi suatu blok kode "minimal sekali" dalam perjalanan looping
dan kemudian akan berulang "selama" suatu kondisi looping masih terpenuhi.
Sintaks :
do
{
kode yang di eksekusi;
}
while (kondisi);
Contoh : Berikut ini akan meng-increase nilai i minimal satu kali, dan kemudian akan lanjut increment
nilai i selama nilai i masih lebih kecil dari 5.
<html>
<body>
<?php
$i=0;
do
{
$i++;
echo "The number is " . $i . "<br />";
}
while ($i<5);
?>
</body>
</html>
3. FOR
Statemen for digunakan ketika Anda mengetahui dengan pasti jumlah perulangan yang harus
dilakukan pada blok kode Anda.
Sintaks :
for (inisialisasi; kondisi; increment)
{
code yang hendak dieksekusi;
}

Statemen for memiliki tiga parameter. Parameter pertama digunakan untuk inisialisasi variabel.
Parameter kedua digunakan sebagai tempat menulis kondisi loop dan parameter ketiga berisi
increment yang diperlukan dalam loop. Jika lebih dari satu variabel yang disertakanpada bagian
inisialisasi atau pada bagian increment maka hal tersebut harus dipisahkan dengan tanda koma.
Parameter kondisi harus mengevaluasi apakah kondisi terpenuhi atau tidak.
Contoh : Berikut adalah akan menampilkan string "Halo Surabaya !!" sebanyak 3 kali:
<html>
<body>
<?php
for ($i=1; $i<=3; $i++)
{
echo "Hello World!<br />";
}
?>
</body>
</html>
4. FOREACH
Statemen foreach digunakan untuk melakukan looping pada elemen-elemen pada suatu array.
Sintaks :
foreach (ekspresi_array as $value)
{
kode yang hendak dieksekusi;
}
Contoh :
<html>
<body>
<?php
$arr = array("one", "two", "three");
reset ($arr);
while (list(, $value) = each ($arr)) {
echo "Value: $value<br>\n";
}
foreach ($arr as $value) {
echo "Value: $value<br>\n";
}
?>
</body>
</html

MODUL 5
DECISION IF, CASE, INCLUDE DAN REQUIRE
a. Decision IF
Fungsi IF ini merupakan blok dari kode program yang dirancang untuk melaksanakan tugas khusus.
Fungsi banyak dilibatkan dalam pembuatan suatu program, dengan tujuan :
1. Program menjadi lebih terstruktur, sehingga mudah dipahami dan mudah dikembangkan
2. Dapat mengurangi pengulangan kode.
Bentuk umum dari fungsi IF adalah sebagai berikut :
If (<kondisi>)
{keputusan_1};
-
-
Else
{keputusan_2};
Bentuk IF ini juga ada beberapa macam, seperti banyak kondisi satu keputusan , satu kondisi banyak
keputusan dan banyak kondisi banyak keputusan.
Contoh:
1. Banyak kondisi satu keputusan;
Jika Golongan=1 dan Status=Tetap maka Gaji_Pokok = 600000
Atau:
If (($gol==1)&&($status==”Tetap”))
{$gapok=600000;}
2. Satu kondisi Banyak keputusan;

Jika Golongan=1, maka Gaji_Pokok = 600000,Bonus=10% x Gaji Pokok
Atau:
If ($gol==1)
{$gapok=600000;
$bonus=0.1*$gapok;}
3. Banyak kondisi Banyak keputusan;
Jika Golongan=3 atau Status=Tetap, maka Gaji_Pokok = 900000,Bonus=15% x Gaji
Pokok,tunjangan=10% x Gaji Pokok
Atau:
If (($gol==3)||($status==”Tetap”))
{$gapok=900000;
$bonus=0.15*$gapok;
$tunjangan=0.1*$gapok;}
Pemakaian tanda “{ }” menandakan blok perintah yang akan dikerjakan pada saat satu kondisi
tertentu dipenuhi, atau jika di Turbo Pascal dapat kita asumsikan sebagai “Begin ….. End; “ bukan
“End.” . dan yang penting satu lagi adalah if pada PHP ini tidak menggunakan End If karena setiap
blok IF tidak menggunakan Then , konsep ini dapat dengan jelas kita lihat di fungsi Excel.
Contoh Program Menggunakan IF (coba1.php):
<form name="cobaku" method="POST" action="" >

Kode Barang :
<input type ="text" name="kode" size="6"><br>
Jumlah Barang :
<input type ="text" name="jlh" size="4"><br>
<input type ="submit" name="hitung" Value="Proses"><br>
<?php
if (isset($_POST['hitung'])) {
$kode = $_POST['kode'];
$jumlah = $_POST['jlh'];
{if ($kode=="A001" )
{ $nama="Televisi";
$harga=1500000;
$a="img1.jpg";}
Else if ($kode=="A002" )
{ $nama="Kulkas";
$harga=2500000;
$a="img2.jpg"; }
$total=$harga*$jumlah;}
}
echo ("Nama Barang : <input type=text name=nm_brg value=$nama size=20><br>");

echo ("Harga Barang : $harga<br>");
echo ("Total Harga : $total<br>");
echo ("<img src= $a width=300 height=200><br>");
include("bawah.html");
?>
</form>

Hasilnya :
Gambar 5.1. Hasil Output Menggunakan IF
b. Switch … Case…. Break

Switch…case … break memiliki fungsi hampir sama dengan fungsi IF bedanya saat di IF kondisi bisa
diberikan lebih dari satu sedangkan pada case tidak bisa.
Bentuk Umum :
Switch ($variabel)
{case nilai_1:
{keputusan_1;
Keputusan_2;}
-
-
default :
{keputusan_1;
Keputusan_2;}
}
Contoh Program menggunakan Case (coba2.php):

Jumlah Barang :
<input type ="text" name="jlh" size="4"><br>
<input type ="submit" name="hitung" Value="Proses"><br>
<?php
if (isset($_POST['hitung'])) {
$kode = $_POST['kode'];
$jumlah = $_POST['jlh'];

{switch($kode)
{case "A001":
{ $nama="Televisi";
$harga=1500000;
$a="img1.jpg";
break;}
case "A002":
{ $nama="Kulkas";
$harga=2500000;
$a="img2.jpg";
break;}}
$total=$harga*$jumlah;}
}
if ($jumlah>5)
{$bonus="Kaos";}
else
{$bonus="Tidak Ada";}
echo ("Nama Barang : <input type=text name=nm_brg value=$nama size=20><br>");

echo ("Harga Barang : $harga<br>");
echo ("Total Harga : $total<br>");
echo ("Bonus : <input type=text name=nm_brg value=$bonus size=10><br>");
echo ("<img src= $a width=300 height=200><br>");
include("bawah.html");
?>
</form>
Tampilan Outputnya seperti Berikut :

Gambar 5.2. Hasil Output Menggunakan CASE
C. Include.
Include dipergunakan untuk memanggil sebuah file dari sebuah file yang lain guna untuk dijalankan
secara bersama-sama dalam satu page (halaman) lebih mirip dengan sebuah procedure dengan
tujuan untuk memecah program menjadi beberapa bagian program untuk lebih mudah melihat
kesalahan pada sebuah program yang dirancang.
Statement Include akan menyertakan isi suatu file tertentu. Include dapat diletakkan didalam suatu
looping misalkan dalam statement for atau while.
Bentuk Umum:
Include (“nama_file.php”);
File contoh1.php:
<?php
echo(“--------------------------------------<br>”);
echo(“PHP adalah bahasa scripting<br>”);
echo(“--------------------------------------<br>”);
echo(“<br>”);
?>
File contoh2.php:
<?php
for ($b=1; $b<5; $b++)
{
include(“contoh1.php”);
}
?>
Untuk fungsi include biasanya File yang dibutuhkan ada minimal 2 buah file dapat disimpan dalam 1
folder, khusus untuk contoh ini file disimpan dalam 1 folder.
1. bawah .php
2. coba.php
a. Source code Bawah.php
<hr size="20" color="gold">

<font color="red" size="7" face="arial narrow">
TONNI LIMBONG,S.KOM,M.KOM</FONT>
Outputnya :
Gambar 5.3. Hasil Output bawah.php
b. Source code coba2.php kita pergunakan untuk memanggil file bawah.php
<form name="uji" action="<?$php_self;?>" method="post" ><center>

<table border="0" width="50%" bgcolor="pink">
<tr bgcolor="cyan"><td colspan="3">
<p align="center"><b><font size="6">PROGRAM CASE</font></b></td></tr>
<tr><td width="25%" align="right">Kode Barang :</td>
<td width="25%"><input type="text" name="xkode" size="6" value="<?
echo("$xkode");?>"></td> </tr>
<tr><td width="25%" align="right">Jumlah :</td>
<td width="25%"><input type="text" name="xjlh" size="4" value="<? echo("$xjlh");?>"></td>
</tr>
<tr><td width="50%" colspan="2" align="center"><input type="submit"
value="proses" name="uji"></td> </tr>
<?
if ($uji)
{switch ($xkode)
{case "A001" :
{ $nama="Televisi";
$harga=1500000;
$a="bliss.jpg";
break; }
case "A002" :
{ $nama="Kulkas";
$harga=1500000;
$a="azul.jpg";
break; }}
$total=$harga*$xjlh;
}
?>
<tr><td width="25%" align="right">Nama Barang :</td>
<td width="25%"><input type="text" name="xnama" value="<?echo("$nama");?>" size="25"></td>
</tr>
<tr><td width="25%"align="right">Harga :</td>
<td width="25%"><input type="text" name="xharga" size="10" value="<?echo("$harga");?>" ></td>

</tr>
<tr><td width="25%" align="right">Total Harga :</td>
<td width="25%"><input type="text" name="xtotal" size="xtotal"value="<?echo("$total");?>" </td>

</tr>
<table border="1">
<tr><td> <img src="c:\windows\web\wallpaper\<?echo("$a");?>" width="300" height="200"> </td></tr>
</table></table>
<? include("bawah.php"); ?>
</center></form>
Tampilannya akan seperti berikut ini:
Coba2.php
bawah.php
Gambar 5.4. Hasil Output Menggunakan Include
d. Require
Statement Require digunakan untuk membaca nilai variable dan fungsi-fungsi dari sebuah file lain.
Cara penulisan statement Require adalah:
require(namafile);
Statement Require ini tidak dapat dimasukkan didalam suatu struktur looping misalnya while atau for.
Karena hanya memperbolehkan pemangggilan file yang sama tersebut hanya sekali saja.
File contoh9.php:
<?php
$a=”Saya sedang belajar PHP”;
function tulistebal($teks)
{
echo(“<b>$teks</b>”);
}
?>
File contoh10.php:
<?php
require(“contoh9.php”);
tulistebal(“Ini adalah tulisan tebal”);
echo(“<br>”);
echo($a);
?>

MODUL 6
CASCADING STYLE SHEET (CSS) DASAR
Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih dahulu . CSS
singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang
fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan
keinginan kita .
a. Syntax CSS
CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration
).
Gambar 6.1. Syntax CSS
• Selector adalah HTML element yang ingin dibuat style nya.

• Declaration merupakan isi dari property dan nilai dari CSS.
• Pemberian nilai dari property digunakan titik dua (:), akhir dari property digunakan titik koma
(;)
Yang perlu diperhatikan:

1. Tiap deklarasi properti selalu diakhiri tanda ‘;’ (semi kolon) dan pemberian nilai value
pada properti diberi tanda ‘:’ (titik dua) sebagai pengganti ‘=’ (sama dengan)
2. Jika nilai dari value terdiri 2 kata pergunakan tanda petik ganda “ value value”.
3. kumpulan properti ditandai dengan ’{‘ dan ‘}’
4. deklarasi CSS ini diletakkan diatas tag <body> jika digabungkan dengan html atau php
5. jika di file css nya dibuat dalam satu file (murni css semua) disimpan dengan nama file
yang ekstentionnya ‘.css’.
Fungsi Umum:
a. Membuat Warna Body
body {background : warna;}
b. Membuat Warna Huruf dan Backgroundnya
var {color : warna; background : warna;}
c. Membuat Jarak antar kata dan antar huruf
var {word-spacing : 20px ; letter-spacing : 15px;}
d. Membuat Indent (Alinea)
var {text-indent : 40px ;}
e. Membuat Text Decoration
var {text-decoration : blink ;}
var {text-decoration : overline ;}
var {text-decoration : underline ;}
var {text-decoration : line-through ;}
f. Membuat Format List (bullet dan numbering)
ul {list-style-type : disc ;}
nilai propety = Square,circle, upper-alpha, lower-alpha, upper-roman,lower-roman
g. Membuat Format List (gambar)
ul {line-style-image : url {img/gambar.gif ;}
h. Membuang Format List

ul {line-style-type : none ;}
i. Membuat DROPCAP
var.styleku.first-letter {float : left ; font-family : arial ; font-size : 80px ;}
j. Mengatur Perataan Kalimat
var {text-align : justify ;} isi nya Right, Left, Center
b. CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit
source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
c. CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih
menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan
diterapkan pada elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla
Firefox
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan
pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini
memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.” Pada contoh di
bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.
d. Cara CSS
Tiga Cara untuk Insert CSS :
1. Eksternal style sheet
Merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat
mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus
link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus
disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px”
(bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.
Contoh :
1. global.css
P {color: yellow}
body {
color:green;
background: cyan;
font-family : arial;
}
2. coba3.html
<HTML>
<HEAD>
<link rel="stylesheet" href="global.css" pet="text/css">
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>
2. Internal style sheet

Merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki
gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan
menggunakan tag style seperti ini :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

3. Inline style
Gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan
keuntungan, maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan.
Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan
margin kiri paragraf :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
4. Multiple Style Sheet

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang
berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.
contoh style sheet eksternal untuk pemilih h3 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :

h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan
menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh
internal style sheet.
e. Beberapa Styles Akan Cascade ke Satu :

Gaya dapat ditentukan :
• didalam sebuah elemen HTML
• didalam bagian kepala halaman HTML
• didalam sebuahj file CSS eksternal
Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi lembaran
baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
• Browser default
• Eksternal style sheet
• Internal style sheet (di bagian kepala)
• Inline style (di dalam elemen HTML)

Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa
ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet
eksternal , atau dalam browser (nilai default).
nb: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML,
style sheet eksternal akan menimpa style sheet internal!
f. Navigasi Bar.
Memiliki mudah menggunakan navigasi adalah penting untuk setiap situs web. Dengan CSS
Anda dapat mengubah menu HTML membosankan menjadi tampan bar navigasi.
Navigation Bar = Daftar Link.

Sebuah bar navigasi yang standar HTML sebagai dasar. Dalam contoh, kita akan membangun
panel navigasi dari daftar HTML standar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan elemen
<li> masuk akal:

<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>
Sekarang mari kita menghapus peluru dan margin dan padding dari daftar:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
Contoh menjelaskan:
• daftar-style-type : none – Menghapus peluru. Sebuah bar navigasi tidak perlu daftar
penanda.
• Mengatur margin dan padding ke 0 untuk menghapus pengaturan browser default.
Kode dalam contoh di atas adalah kode standar yang digunakan di kedua bar navigasi vertikal,
dan horisontal.
f.1. Navigation Bar Vertikal.

Untuk membangun sebuah bar navigasi vertikal kita hanya perlu gaya elemen <a>, selain kode
di atas:
a
{
display:block;

width:60px;
}
Contoh menjelaskan:
• display: block – Menampilkan link sebagai elemen blok membuat daerah seluruh link
diklik (tidak hanya teks), dan memungkinkan kita untuk menentukan lebar.
• Lebar: 60px – elemen Blok mengambil lebar penuh yang tersedia secara default. Kami
ingin menentukan lebar 60 px.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Hasilnya :

Gambar 6.2. Navigation Vertikal
Catatan : Selalu tentukan lebar untuk elemen <a> di sebuah bar navigasi vertikal. Jika Anda
menghilangkan lebar, IE6 dapat menghasilkan hasil yang tidak diharapkan.
f.2. Horizontal Navigasi Bar.

Ada dua cara untuk membuat sebuah bar navigasi horisontal. Menggunakan daftar item inline
atau mengambang.
Kedua metode bekerja dengan baik, tetapi jika Anda ingin link ke menjadi ukuran yang sama,
Anda harus menggunakan metode mengambang.
f.3. Inline Daftar Produk.

Salah satu cara untuk membangun sebuah bar navigasi horizontal untuk menentukan unsur-
unsur <li> sebagai inline, di samping kode “standar” di atas:
li
{
display:inline;
}
Contoh menjelaskan:
• display: inline; – Secara default, elemen <li> merupakan unsur blok. Di sini, kita
menghapus jeda baris sebelum dan setelah setiap item daftar, untuk menampilkan
mereka pada satu baris.
Contoh : Horizontal dan Inline

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited

{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
</ul>
<p><b>Note:</b> If you only set the padding for a elements (and not ul), the links will go outside
the ul element. Therefore, we have added a top and bottom padding for the ul element.</p>
</body>
</html>
Hasilnya :
Gambar 6.3. Navigation Horizontal dan Inline
f.4. Navigation Mengambang.

Pada contoh di atas link memiliki lebar yang berbeda. Untuk semua link untuk memiliki lebar
yang sama, mengambang elemen <li> dan menentukan lebar untuk elemen <a>:
li
{
float:left;
}
a
{
display:block;

width:60px;
}
Contoh menjelaskan:
• float: left – menggunakan pelampung untuk mendapatkan unsur-unsur blok ke slide
berikutnya satu sama lain.
• display: block – Menampilkan link sebagai elemen blok membuat daerah seluruh link
diklik (tidak hanya teks), dan memungkinkan kita untuk menentukan lebar.
• Lebar: 60px – Karena unsur-unsur blok mengambil lebar penuh yang tersedia, mereka
tidak dapat mengapung di samping satu sama lain. Kita tentukan lebar dari link untuk
60px.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #111;
}
.active {
background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>

</ul>
</body>
</html>
Hasilnya :
Gambar 6.4. Navigation Mengambang
Contoh Tombol 3 Dimensi:

1. Tombol.css
.leftlinks {
border:1px solid #22476C;
padding:5px;margin:5px;
text-align:middle;
background-color:#336699;width:150px;
}
.leftlinks a { display:block;margin:3px 0px;

border-top:1px solid #4C86C0;
border-left:1px solid #4C86C0;
border-right:1px solid #22476C;
border-bottom:1px solid #22476C;
padding: 4px 10px;text-align:center;
background-color:#336699;
color:#EDEDED;text-decoration:none;
}
.leftlinks a:link { color:#EDEDED;}

.leftlinks a:visited { color:#EDEDED;}
.leftlinks a:hover {
display:block;
margin:3px 0px;
border-top:1px solid #22476C;
border-left:1px solid #22476C;
border-bottom:1px solid #4C86C0;
border-right:1px solid #4C86C0;
padding: 5px 9px 3px 11px;
text-align:center;
background-color:#336699;
color:#EED929;
text-decoration:none;}

2. coba5.html
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Link Visualisasi
tombol</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="tombol.css">
</HEAD>
<BODY>
<div class="leftlinks">
<a href="index.htm">Teras Wamika</a>
<a href="profil.htm">Pssrofil Organisasi</a>
<a href="struktur.htm">Struktur</a>
<a href="pembimbing.htm">Pembimbing
Org</a>
<a href="dpo.htm">DPO Organisasi</a>
<a href="kegiatan.htm">Kegiatan Rutin</a>
<a href="berita.htm">Berita UKM</a>
</div>
</BODY>
</HTML>

MODUL 7
JAVASCRIPT
a. Apa Itu Javascript

Javascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side
programming. Client di sini adalah browser, seperti: Internet Explorer, Firefox, Safari dan
sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML.
Di mana kita bisa menulis kode javascript? Anda bisa menulis kode javascript di teks editor seperti
notepad dan sebagainya.
Untuk menjalankan javascript tidak perlu membutuhkan compiler, anda cukup menjalankan
javascript menggunakan browser. Semua browser mempunyai engine yang menginterpretasikan
kode javascript kita.
b. Memulai Javascript
Menulis kode javascript dapat dilakukan dengan mengetikkan sourcode di notepad atau juga di
aplikasi pembuat script web lainnya seperti Macromedia Dreamweaver. Untuk lebih simple dapat
menggunakan notepad sebagai teks editor, seperti berikut ini:
Gambar 7.1. Text Editor Notepad
Kode javascript ditulis diantara tag <script> dan </script>, bisa di sisipkan di kode-kode HTML.
Kemudian di simpan kode tersebut dengan File Name: tes.html, jangan lupa Save as type: All Files,
seperti gambar di bawah.

Gambar 7.2. Menyimpan File Javascript
Untuk menjalankannya, double klik file tes.html yang dibuat tadi, hasilnya akan seperti berikut:
Gambar 7.3. Menjalankan fil Javascript
Javascript bisa juga ditulis terpisah, filenya diberi ekstension .js Contoh: namafile.js, nanti cara
menyisipkannya di file html adalah seperti berikut:
<script type="text/javascript" src="namafile.js"></script>
c. Sintaks Javascript
Sintaks javascript mirip-mirip bahasa C atau java. Javascript bersifat case sensitive, artinya huruf
kecil dan huruf besar adalah berbeda. Setiap baris kode javascript dipisahkan baris baru atau bisa
juga titik koma (;) Komentar dalam javascript di awali dengan // atau ditulis diantara /* dan */
d. Variabel
Variabel di javascript bisa ditulis dengan diawalai huruf atau underscore ( _ ) atau tanda dollar ($).
Contoh : jumlah_hits , _nama
Deklarasi variable

• Anda bisa mendeklarasi dengan menggunakan var, contoh: var x = 5, ini bersifat local dan global
(bisa di akses oleh semua fungsi)
• Atau langsung deklarasikan tanpa var, x = 5
Contoh:
<script>
var x = 5;
var nama = “Desrizal”;
document.write(nama);
</script>
e. Operator
1. Operator Aritmatika
Operator Aritmatika yaitu operator untuk operasi matematika, berikut operator matematika pada
javascript.
Tabel 7.1. Operator Aritmatika
Operator Definisi Contoh
+ Penambahan 4 + 6 = 10
- Pengurangan 9–5=4
* Pengalian 4 * 5 = 20
/ Pembagian 8/2=4
% Modulus (sisa hasil Pembagian) 8 % 2 = 0
Contoh:
<script>
var x = 4;
var y = 2;
z = x + y;
alert(z);
</script>
2. Operator Assignment
Seperti kebanyakan bahasa pemograman lainnya, untuk memberikan nilai kepada suatu variable
menggunakan tanda sama dengan ‘=’
Berikut adalah penyingkatan simbol operator Assignment
Tabel 7.2. operator Assignment

Shorthand Operator Artinya
x += y x=x+y
x -= y x=x-y
x *= y x=x*y
x /= y x=x/y
Contoh:
<script>
var x = 4;
var y = 2;
x -= y
alert(x);

</script>
3. Operator Pembanding
Berguna untuk membanding nilai suatu variable dengan data atau variabel yang lainnya.
Tabel 7.3. Operator Pembanding

== Sama dengan var1 == “Desrizal”
!= Tidak sama dengan x != y
> Lebih besar dari x>y
< Lebih kecil dari x<6
>= Lebih besar sama dengan x>= y
<= Lebih kecil sama dengan x<5
Contoh:
<html>
<head>
<script>
var x = 4;
var y = 2;
if(x > y){
alert("x lebih besar dari y");
}
</script>
</head>
<body>
</body>
</html>
4. Operator Logika
Operator ini dipakai untuk menguji sebuah pernyataan, biasanya selalu digabungkan dengan
operator yang lain seperti decision.
Tabel 7.4. Operator Logika

&& DAN x>=5 && x<10
|| ATAU x == 6 || x == 12
! BUKAN/ TIDAK !expression
Contoh:
<script>
var x = 76;
if(x >= 80){
alert("Nilai = A");
}else if(x >= 70 && x < 80){
alert("Nilai = B");
}else if(x >= 60 && x < 70){
alert("Nilai = C");
}else{
alert("Nilai = D");

}
</script>
f. Statement Kondisional
Kondisional berguna untuk mengecek suatu kondisi dan melakukan suatu kode jika kondisi tersebut
benar atau salah.
1. If
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}
Contoh :
<script>
var x = 10;
if(x == 10){
alert("Hai Apa kabar");
}
</script>
2. If - Else
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}else{
kode yang dijalankan jika salah
}
Contoh :
<script>
var x = 5;
if(x == 10){
alert("Hai Apa kabar");
}else{
alert("X tidak sama dengan 10");
}
</script>
3. If - Else If - Else
Jika anda membutuhkan kondisi yang banyak
Sintaks :
if(kondisi 1){
kode yang dijalankan jika kondisi 1 benar
}else if(kondisi 2){
}else if(kondisi 3){
}else{
kode jika salah satu kondisi di atas tidak ada yang benar
}

Contoh :
<script>
var nilai = 80;
if(nilai >= 85){
alert("A");
}else if(nilai >= 70 && nilai < 85){
alert("B");
}else if(nilai >= 60 && nilai < 70){
alert("C");
}else{
alert("D");
}
</script>
4. Switch
Sama seperti if - else if - else, berguna jika membutuhkan kondisi yang banyak
Sintaks :
switch(ekspresi){
case kondisi1 :
kode yang dijalankan jika kondisi1 benar;
break;
case kondisi2 :
break;
case kondisi3 :
break;
}
Contoh :
<script>
var buah = "mangga";
switch (buah) {
case "apple":
alert("buahnya adalah apple");
break;
case "mangga":
alert("buahnya adalah mangga");
break;
case "jambu":
alert("buahnya adalah jambu");
break;
}
</script>
g. Pengulangan
Pengulangan dipakai untuk mengerjakan pekerjaan yang sama tetapi akan dilakukan berulang-
ulang sesuai dengan kebutuhan.

1. for
Berguna untuk pengulangan yang sudah ditentukan terlebih dahulu awalnya berapa, dijalankan
sampai kondisi bagaimana.
Sintaks :
for(awal; kondisi; penambahan){
kode untuk dijalankan
}
Contoh :
<script>
for (i = 1; i <= 10; i++) {
document.write(i);
}
</script>
2. while
Berguna untuk menjalankan suatu kode terus menerus selama kondisi bernilai TRUE
Sintaks :
while(kondisi){
kode untuk dijalankan;
}
Contoh :
<script>
var i=1;
while(i<=5)
{
document.write(“Nomor : "+i +"<br />");
i++;
}
</script>
g. Fungsi
Apa itu fungsi? Fungsi adalah kumpulan blok kode yang membentuk fungsi tersendiri. Kita bisa
membuat sendiri fungsi tersebut
Sintaks:
function nama_fungsi(parameter){
kode-kode javascript
}
Contoh 1:
<script>
function tes(){
document.write("Hello World!");
}
//untuk menjalankan fungsi, cukup tulis namafungsi
tes();
</script>
Contoh 2:
<script>
function kalikan(x,y){

z = x * y;
alert("Hasil kali "+x+" * "+y+" = "+z);
}
kalikan(5,3);
</script>
h. Penanganan Event
Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event atau
kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses
jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double klik,
menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan sebagainya.
Sintaknya:
nama_event=”kode javascript”
Contoh:
<html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘hello’)”>google</a>
</body>
</html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan dieksekusi kode
javascript alert(‘hello’). Ada macam-macam event yang bisa terjadi pada halaman web atau objek
HTML, yaitu sebagai berikut:
• onblur
• onchange
• onclick
• ondblclick
• onerror
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onreset
• onresize
• onselect
• onsubmit
• onunload
i. Contoh-contoh Penanganan Event

1. onclick
Event ini biasanya ada pada sebuah tombol yang kalau diklik akan muncul window alert

Contoh :
<script>
function inform(){
alert("Hai anda mengklik saya")
}
</script>
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
Pada contoh berikut jika kita mengklik radio button akan mengubah warna latar halaman web
<html>
<body>
<form name="go">
<input type="radio" name="C1" onclick="document.bgColor='lightblue'">
<input type="radio" name="C1" onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1" onclick="document.bgColor='lightgreen'">
</form>
</body>
</html>
2. onload
Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita menaruh event
onload di tag <body>, artinya jika halaman web sudah diload semua, maka dieksekusi kode
javascript.
Contoh :
<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('Halaman ini telah selesai di loading')">
Welcome to my page
</body>
</html>
3. onmouseover dan onmouseout

Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di atas suatu objek HTML,
onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML.
Contoh:
<html>
<body>
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Baris pertama</td>
</tr>
<tr>
<td>Baris kedua</td>
</tr>
</body>

</html>
4. onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman web
Contoh :
<html>
<body onunload="alert('Thank you. Please come back to this site and visit us soon, ok?')">
<h1>Welcome</h1>
</body>
</html>

MODUL 8
SESSION DAN COOKIES
a. Session
Session merupakan hal yang cukup penting dalam aplikasi berbasis web. Dengan session
memungkinkan programmer menyimpan informasi user secara semi-permanen, artinya selama
masa tertentu informasi akan tersimpan. Penyimpanan isi variabel session berada di server, jadi
tidak bisa diakses secara langsung oleh client.
Dalam aplikasi berbasis web, session banyak digunakan sebagai autentifikasi login. Dengan
session memungkinkan programmer mengatur siapa saja yang bisa mengakses suatu halaman.
Misalnya saja, untuk melihat halaman kotak surat pada email, kita harus login terlebih dahulu.
Dalam proses login antara lain akan terjadi pembuatan suatu session yang akan dibawa oleh user
di setiap halaman. Di halaman kotak surat, session tersebut akan diperiksa. Jika session benar
maka user dipersilahkan membuka halaman kotak surat, namun jika salah maka user tidak bisa
membuka halaman kotak surat dan biasanya akan diminta untuk login terlebih dahulu. Itulah
sebabnya, user tidak bisa mengakses halaman kotak surat secara langsung tanpa melakukan
login.
Dalam penanganan session terdapat beberapa proses yang perlu diperhatikan :

• Proses pembuatan session
• Proses pemeriksaan session
• Proses penghapusan session
Selanjutnya bagaimana session itu sendiri dijalankan? Agar proses penyimpanan dalam session
berjalan, PHP melakukan beberapa hal berikut ini :
1. PHP meng-generate (membentuk) sebuah ID session.
ID session ini merupakan sejumlah deret angka random yang unik untuk setiap user dan
hampir tidak mungkin bisa ditebak. ID session disimpan oleh PHP di dalam variabel sistem
PHP dengan nama PHPSESSID
2. PHP menyimpan nilai yang akan Anda simpan dalam session di dalam file yang berada di
server.
Nama file tempat penyimpanan session tersebut sesuai (sama) dengan ID session. File
disimpan dalam suatu direktori yang ditunjukkan olehsession.save_path dalam file php.ini.
3. PHP melempar ID session ke setiap halaman.
4. PHP mengambil nilai session dari file session untuk setiap halaman session.
Nama File : session01.php

Deskripsi : Program menciptakan session.
<?php
/****************************************************
Nama file : session01.php
Halaman ini merupakan halaman contoh penciptaan session.
Perintah session_start() harus ditaruh di perintah pertama
tanpa spasi di depannya. Perintah session_start() harus ada
pada setiap halaman yang berhubungan dengan session
*****************************************************/
session_start();
if (isset ($_POST['Login'])) {

$user = $_POST['user'];
$pass = $_POST['pass'];
//periksa login
if ($user == "tonni" && $pass = "123") {
//menciptakan session
$_SESSION['login'] = $user;
//menuju ke halaman pemeriksaan session
echo "<h1>Anda berhasil LOGIN</h1>";
echo "<h2>Klik <a href='session02.php'>di sini
(session02.php)</a>
untuk menuju ke halaman pemeriksaan session";
}
} else {
?>
<html>
<head>
<title>Login here...</title>
</head>
<body>
<form action="" method="post">
<h2>Login Here...</h2>
Username : <input type="text" name="user"><br>
Password : <input type="password" name="pass"><br>
<input type="submit" name="Login" value="Log In">
</form>
</body>
</html>
<? } ?>
Penjelasan Coding diatas :

Pada program di atas terdapat fungsi session_start() yang berada pada baris ke-9. Fungsi
session_start() berfungsi untuk memulai sebuah session.
Fungsi harus dipanggil pertama kali dalam suatu halaman PHP, artinya fungsi session_start()
harus dipanggil sebelum sesuatu tampil di layar, walaupun hal itu hanya berupa spasi. Jika
sebelum session_start() terdapat output yang ditampilkan maka akan terjadi error.
Error yang terjadi karena sebelum session_start() sudah ada output Selanjutnya, program akan
menampilkan sebuah form login sederhana di layar. Form terdiri dari form inputan username,
password dan sebuah tombol login. Jika tombol login ditekan maka pemeriksaan kondisi pada
baris 10 akan bernilai TRUE dan perintah yang ada di blok if akan dieksekusi. Baris 11 dan 12
merupakan perintah untuk mengambil nilai pada form inputan username dan password. Nilai
username dan password tersebut diperiksa pada baris 14.
Pemeriksaan username dan password ini, untuk aplikasi web yang sudah menggunakan database,
bisa diganti dengan pemeriksaan username dan password ke tabel database.
Pada baris 16, terdapat perintah sebagai berikut :
$_SESSION['login'] = $user;

Baris perintah tersebut merupakan perintah untuk membuat session baru (create session) dimana
nama session adalah “login” dan isi dari session adalah $user.
$_SESSION merupakan sebuah variabel array global yang didefinisikan oleh PHP, jadi variabel ini
harus ditulis dengan huruf kapital (upper-case).
Selanjutnya, pada baris 18-20 akan ditampilkan pesan bahwa login berhasil dan juga sebuah link
menuju ke halaman pemeriksaan session (session02.php).

Deskripsi : Program pemeriksaan session.
<?php
/*************************************************************
Halaman ini merupakan contoh halaman pemeriksaan session. Pemeriksaan
session biasanya dilakukan jika suatu halaman memiliki
akses terbatas. Misalnya harus login terlebih dahulu.
**************************************************************/
session_start();
//pemeriksaan session
if (isset($_SESSION['login'])) { //jika sudah login
//menampilkan isi session
echo "<h1>Selamat Datang ". $_SESSION['login'] ."</h1>";
echo "<h2>Halaman ini hanya bisa diakses jika Anda sudah
login</h2>";
echo "<h2>Klik <a href='session03.php'>di sini
(session03.php)</a> untuk LOGOUT</h2>";
} else {
//session belum ada artinya belum login
die ("Anda belum login! Anda tidak berhak masuk ke halaman
ini.Silahkan login <a href='session01.php'>di sini</a>");
}
?>
Penjelasan Coding di atas:

Program di atas diawali dengan pemanggilan fungsi session_start(). Hal ini berarti dalam halaman
program ini terdapat operasi session. Pada baris 10 program di atas, terdapat pemeriksaan
keberadaan variabel $_SESSION[‘login’] dengan menggunakan fungsi isset(). Pemeriksaan
kondisi ini akan bernilai TRUE jika $_SESSION[‘login’] sudah terbentuk. Jika bernilai TRUE maka
blok program baris 11-14 yang akan dieksekusi, dan sebaliknya, jika FALSE maka blok program
baris 16-17 yang akan dijalankan. Blok program baris 11-14 hanya bisa diakses saat user sudah
login dengan benar. Dengan kata lain, bagian tersebut merupakan bagian yang bersifat private
(terbatas).
Untuk menampilkan isi variabel session dapat dilakukan seperti pada baris 12 program di atas.
Cukup dengan meng-echo variabel $_SESSION[‘login’]. Jika user belum login (tidak melewati
halaman login) atau langsung mengakses halaman ini, maka akan ditampilkan pesan bahwa user
tidak berhak masuk ke halaman ini. Fungsi die() pada baris 17 digunakan untuk menampilkan
suatu pesan sekaligus men-terminate program, artinya perintah selain die() akan
diabaikan.


Deskripsi : Program menghapus session.
<?php
/********************************************************
Halaman ini merupakan halaman logout, dimana kita menghapus
session yang ada.
*********************************************************/
session_start();
if (isset($_SESSION['login'])) {
unset ($_SESSION);
session_destroy();
//
echo "<h1>Anda sudah berhasil LOGOUT</h1>";
echo "<h2>Klik <a href='session01.php'>di sini</a> untuk
LOGIN kembali</h2>";
echo "<h2>Anda sekarang tidak bisa masuk ke halaman
<a href='session02.php'>session02.php</a> lagi</h2>";
}
?>
Penjelasan Coding di atas

Program di atas merupakan contoh program penghapusan session.Penghapusan session
biasanya digunakan ketika user melalukan logout. Proses penghapusan session dilakukan dengan
memanggil fungsi unset() dan fungsi session_destroy(). Fungsi unset() digunakan untuk
menghapus atau menghilangkan suatu variabel. Sedangkan session_destroy() digunakan untuk
menghapus semua data yang berhubungan dengan session tersebut.
b. Cookies
Seperti halnya session, cookies juga merupakan sebuah konsep penyimpanan informasi user.
Hanya saja, jika session tempat penyimpanan berada di server, cookies berada di client. Oleh
karena itu, konsep cookies sebaiknya jangan digunakan untuk menyimpan informasi login user
seperti username, password dsb. Selain user bisa melihat informasi yang disimpan, user juga bisa
men-disable cookies itu sendiri. Jika cookies di-disable, maka program yang memanfaatkan
cookies tentunya tidak akan berjalan dengan baik.
Cookies sendiri biasanya dipakai dalam aplikasi shooping cart. Biasa digunakan untuk menyimpan
sementara, produk-produk yang dipilih oleh pengunjung pada saat berbelanja.
Dalam penanganan cookies juga terdapat beberapa proses yang perlu diperhatikan :
• Proses pembuatan cookies
• Proses pemeriksaan cookies
• Proses penghapusan cookies
Contoh :
Nama File : cookie01.php
Deskripsi : Program membuat cookie.
<?php
$value = 'achmatim';

$value2 = 'Achmad Solichin';

setcookie("username", $value);
setcookie("namalengkap", $value2, time()+3600); /* expire in 1
hour */
echo "<h1>Ini halaman pengesetan cookie</h1>";
echo "<h2>Klik <a href='cookie02.php'>di sini</a> untuk
pemeriksaan cookies</h2>";
?>

Deskripsi : Program pemeriksaan cookie.
<?php
if(isset($_COOKIE['username'])) {
echo "<h1>Cookie 'username' ada. Isinya : " .
$_COOKIE['username'];
} else {
echo "<h1>Cookie 'username' TIDAK ada.</h1>";
}
if(isset($_COOKIE['namalengkap'])) {
echo "<h1>Cookie 'namalengkap' ada. Isinya : " .
$_COOKIE['namalengkap'];
} else {
echo "<h1>Cookie 'namalengkap' TIDAK ada.</h1>";
}
penciptaan cookies</h2>";
penghapusan cookies</h2>";
?>

Deskripsi : Program penghapusan cookie.
<?php
// set the expiration date to one hour ago
setcookie ("username", "", time() - 3600);
setcookie ("namalengkap", "", time() - 3600);
echo "<h1>Cookie Berhasil dihapus.</h1>";
penciptaan cookies</h2>";
pemeriksaan cookies</h2>";
?>

MODUL 9
DATABASE MYSQL
MySQL (My Structure Query Language) adalah salah satu database dari sekian banyak
database lain seperti Oracle, MS SQL, PostgresSQL dan banyak lagi. Kesemuanya itu mempunyai
fungsi dan manfaat yang hampir sama namun dalam pengerjaanya sedikit berbeda tetapi MySQL
adalah penggunaan yang paling mudah.
Kenapa MySQL?
MySQL adalah database manajemen sistem (DBMS). DBMS (Database Manajemen System)
merupakan salah satu system dalam mengakses database yang menggunakan bahasa SQL,
MySQL menggunakan bahasa SQL dan dapat dikatakan sebagai DBMS.
MySQL software open source Open source artinya memungkinkan untuk semua orang untuk
menggunakan dan memodifikasi software. Setiap orang dapat men-download MySQL
dari internet dan menggunakannya tanpa membayar apapun. Jika mau, anda bisa mempelajari
kode sumber dan menukar apa yang anda inginkan.
Kenapa menggunakan MySQL?

Database MySQL sangat cepat, reliable, dan mudah untuk digunakan, selain itu
MySQL telah banyak menangani pembuatan software besar.
1. Aplikasi Server MySQL

Didalam MySQL terdapat sebuah database yang ada sejak awal setelah anda
menginstall MySQL, nama database tersebut adalah mysql dan pada database tersebut
tersimpan nama-nama pengguna yang dapat mengguakan MySQL lengkap dengan opsi
otoritas yang dapat dilakukan oleh pengguna tersebut. Secara default user dengan nama root
adalah pengguna yang menguasai secara utuh dan dapat membuat user lainnya
(termasuk membatasi user - user lain). Untuk dapat menggunakan MySQL anda harus
memasukan user dan password yang sama dengan apa yang dideklarasikan dalam
database (mysql).
Berikut cara mengakses MySQL (dilakakukan pada DOS (C:\\apache\mysql\bin\) atau mode
text).
1. Klik Start Run, Ketik CMD, Enter
Gambar 9.1 Dialog Run Windows
Muncul tampilan berikut:

Gambar 9.2 Prompt DOS dari Windows
Pada c prompt ketik cd\, enter
Gambar 9.3 Masuk ke Prompt C:
Setelah itu ketikkan perintah berikut:

Cd apache\mysql\bin, enter. Hasilnya akan seperti berikut:
Gambar 9.4 Masuk ke directory Apache\mysql\bin:
Pada saat seperti ini perhatikan lampu mysql pada sudut kanan bawah di status bar komputer, jika
lampu tidak aktif, maka ketikkan: winmysqladmin, enter.
Lampu Mysql jika

aktif
Gambar 9.5 Lampu Aktif MYSQL
Ketika winmysqladmin diketik, dan jika muncul permintaan user name dan password, isikan User

name , passwordnya terserah anda, kemudian klik OK.
Setelah lampu mysql aktif ketikkan mysql, enter, maka hasilnya akan seperti berikut ini:
Gambar 9.6 Masuk ke Aplikasi MYSQL tanpa Login
Pada prompt mysql ini perintah-perintah text SQL di ketikkan, tapi jika mempunyai login dan
password bisa mengetikkan perintah berikut ini pada c:\apache\mysql\bin
mysql -u root -h localhost -p

Enter password:************
Gambar 9.7 Masuk ke Aplikasi MYSQL menggunakan login
Keterangan :
-h : menunjukkan nama Host (dapat juga dengan alamat IP, ex: 184.36.25.1)
-u : menunjukkan nama User
-p : MySQL akan menanyakan password jika anda menggunakan opsi ini.
Jika user yang anda gunakan tidak menggunakan password anda tidak perlu menggunakan opsi
-p ini. -p dapat juga digunakan untuk mendeklarasikan nama database yang anda gunakan (ex:
mysql -u root - localhost -p latihan)
Keluar dari MySql

mysql> \q
Bye
Menjalankan MYSQL di XAMPP

Berikut ini langkah-langkah menjalankan MYSQL yang terdapat di XAMPP melalui DOS :
1. Klik start kemudian pilih run, kemudian ketikkan cmd (untuk menampilkan dos).
2. ketikkan perintah cd\ (tekan enter)
3. kemudian lanjutkan dengan perintah cd\xampp\mysql\bin (tekan enter).

4. ketikkan perintah mysql -h localhost -u root -p (tekan enter).

5. Kemudian meminta password, tekan saja enter untuk mengosongkan passwordnya.
SELANJUTNYA ANDA DAPAT MENGGUNAKAN PERINTAH-PERINTAH SQL UNTUK MEMANIPULASI

DATABASE ANDA. ikuti terus ya tutorial dari saya.
2. Database MySQL
Database adalah kumpulan dari tabel-tabel, dan tabel merupakan kumpulan dari beberapa
Field atau column. Untuk membuat suatu table maka seorang user harus membuat
database terlebih dahulu. Dengan mengaktifkan database yang dibuat tersebut.
Contoh abstraksi database.
Kampus Database
Mahasiswa Dosen Matakuliah Nilai Tabel
Struktur tabel Dosen

Field Name Type Length
Kode_Dosen varchar 8
Nama_Dosen varchar 20
Tempat_lhr varchar 15
Tgl_lhr date
Pendidikan varchar 15 Field /
kolom
Tampilan Fisik dari Tabel Dosen

Kode_Dosen Nama_Dosen Tempat_lahir Tgl_Lahir Pendidikan
K02TI TONNI LIMBONG PANANGGAHAN 18-12-1978 S2 record/
K20TI HARVEI DESMON P. SIANDOMANG 11-02-1984 S1 tupel/baris
Gambar 9.8 Struktur Database dan Tabel
Database : Kumpulan dari Tabel (entity) yang saling berhubungan dan terintegrasi
Tabel : Kumpulan dari record dan field yang saling berhubungan
Record : Baris pada tabel yang memiliki type data yang satu tipe atau berbeda tipe
Field : Kolom pada tabel yang terdiri dari type data yang sama.
2. Sub Bahasa Structure Query Language (SQL)

Secara umum bahasa SQL dibagi menjadi tiga bagian:
1. DDL (Data Definition Language) yang digunakan untuk membangun objek-objek dalam
database seperti tabel.
2. DML (Data Manipulation Language) yang digunakan dalam memanipulasi suatu
tabel didalam database (menambah, mengedit, mencari dan menghapus)
3. DCL (Data Control Language) yang digunakan untuk menangani masalah keamanan
dalam database server
Ketiga komponen ini bisa digunakan setelah suatu database di aktifkan.

A. DDL (Data Definition Language)
Terdiri atas : Create, Alter, Drop
a. Membuat Tabel
Setelah menciptakan suatu database dan mengaktifkan database tersebut maka dapat
dilakukan perintah pembuatan tabel
BU : CREATE TABLE Nm_Tabel (Nm_Kolom1 tipe data([ukuran]),nm_kolom2 tipe data

([ukuran])….. nm_kolom_n tipe data ([ukuran]));
Untuk bentuk tipe data yang digunakan anda dapat merujuk ke manual MySQL atau mengunjungi
manual di http://mysql.com.
Contoh :
create table berita (tanggal date, berita text);
BU : CREATE Database Nm_Database;

Contoh :
mysql> create database Praktikum;
Query OK, 1 row affected (0.11 sec)
b. Melihat seluruh daftar database dalam server MySql

BU: SHOW Databases;
mysql> show databases;
+-------------- +
| Database |
+-------------- +
| adminks |
| A1 |
| bahasa |
| catalog |
| praktikum |
| sample |
| survey |
| tracking |
|u |
+--------------+
9 rows in set (0.27 sec)
Gambar 9.9 Daftar Database di Server Apache
c. Mengaktifkan/Menggunakan Database
Sebelum pembuatan tabel dan operasi-operasi yang berhubungan dengan tabel maka
database harus di aktifkan/digunakan.
BU : USE Nm_Database
Contoh :

mysql> use praktikum;

Database changed
d. Menghapus Database dari Server

BU : Drop Database Nm_Database
Contoh :
mysql> drop database praktikum;
Query OK, 0 rows affected (0.11 sec)
Aturan penamaan dalam pembuatan database :

1. Jangan menggunakan spasi dan spesial karakter dalam pembuatan nama database
2. Jangan menggunkan angka pada awal pembuatan nama database
e. Melihat Struktur Tabel

BU: describe nama_tabel;
digunakan untuk melihat struktur tabel yang telah dibuat. Namun sebelumnya, sudah
berada pada database yang mempunyai tabel tersebut.
Contoh :
mysql>describe produk;
+----------+-------------------+--------+-------+----------+------+
| Field | Type | Null | Key | Default | |
+----------+-------------------+--------+-------+----------+------+
| nama | varchar(25) | YES | | NULL | |
| harga | bigint | YES | | NULL | |
+---------+-------------------+--------+--------+----------+------+
2 ROWS IN SET (0.10 SEC)
Gambar 9.10 Menampilkan Struktur Tabel
f. Mengubah Struktur Tabel

Ada empat macam perubahan dalam struktur tabel, yaitu :
a. Perubahan nama field/kolom
Perubahan yang terjadi hanya pada nama field/kolom saja. Nama field/kolom lama diganti
dengan nama field/kolom yang baru.
BU : alter table nama_tabel change nama_field_lama nama_field_baru tipe_data;
Contoh :
mysql>alter table toko change buku nama varchar(25);
b. Perubahan tipe data

Perubahan yang terjadi hanya pada tipe data yang digunakan oleh field/kolom tertentu. Tipe
data baru langsung disebutkan dibelakang nama field/kolom, tanpa harus
menyebutkan tipe data lama.
BU : Alter table nama_tabel modify nama_field tipe_data_baru;

Contoh :
mysql>alter table toko modify nama longtext;

c. Penambahan field
Struktur tabel akan berubah dengan bertambahnya field/kolom baru didalamnya.
BU : Alter table nama_tabel add nama_field tipe_data_baru;
Contoh :
mysql>alter table supermarket add stok int;
d. Penghapusan field
Struktur tabel mengalami perubahan akibat berkurangnya field/kolom tertentu.
BU : Alter table nama_tabel drop column nama_field;
Contoh :
mysql>alter table supermarket drop column stok;
g. Mengganti Nama Tabel

Penggantian nama tabel meliputi nama tabel itu sendiri.
BU : Alter table nama_tabel_lama rename nama_tabel_baru;
Contoh :
mysql>alter table toko rename supermarket;
h. Menghapus Tabel
Tabel dapat saja dihapus karena sudah tidak dibutuhkan lagi,atau terjadi kesalahan.
BU : Drop table nama_tabel;
Contoh :
mysql>drop table supermarket;
i. Kekangan Nilai Pada Data

1. Menentukan Kunci Primer (Primary Key)
Secara sederhana kunci primer digunakan untuk menyatakan bahwa suatu nilai tidak boleh
ada yang sama dan nilai tersebut harus diisi (NOT NULL).
Penetapan kunci primer dibuat pada saat pembuatan tabel:
mysql> create table siswa (NIM varchar(10) not null primary key,Nama
varchar(25),SEX char(1),Alamat varchar(35));
2. Memberikan nilai bawaan (Default)

Jika tidak memberikan suatu nilai dalam kolom tertentu maka oleh system secara otomatis
diisi dengan nilai NULL. Oleh karena itu pada saat perancangan table field
tersebut defaultnya diisi dengan tetapan yang dikehendaki.
mysql> create table MatKul (KD_MK varchar(10) not null primary key,nama_MK
varchar(20),SKS int default 0);
B. DML (Data Manipulation Language)

Perintah DML Terdiri dari SELECT, INSERT, UPDATE dan DELETE
a. Memasukkan Data (Insert)
Ada dua cara yang dapat digunakan untuk memasukkan data kedalam tabel, yaitu:

1. insert into nama_tabel values (isi_field_2,…,isi_field_n);

Contoh : insert into produk values (‘SG 100’,2500);
2. insert into nama_tabel (nama_field_1, nama_field_2,…,nama_ field_n) values

(isi_field_1, isi_field_2,…,isi_field_n);
Contoh : Insert into produk (kode,harga) values (‘SG 100’,25000);
b. Menampilkan Data (Select)

Berikut ini perintah untuk menampilkan data :
BU : Select [fields] from [nama_tabel] Where [kondisi] Order by [nama_field] Group
by [nama_field] asc / desc
Contoh :
a. Select kode from produk;
b. Select kode,harga from produk;
c. Select * from produk;
Note :
Setelah penulisan select, [fields] dapat diganti dengan menyebutkan satu
nama field saja atau beberapa field sekaligus yang dipisah dengan tanda
koma (,). Penulisan field-field tersebut digunakan untuk memunculkan data dari
kolom mana saja yang akan ditampilkan. Jika seluruh kolom akan ditampilkan dapat
menggunakan tanda asterik (*) untuk mewakilinya.
c. Mengurutkan Tampilan
Klausa ORDER BY digunakan untuk mengurutkan hasil. Jika menginginkan data
ditampilkan urut berdasarkan pada urutan terkecil ke besar, dapat
menggunakan ASC (ascending). Sedangkan untuk mengurutkan data berdasarkan
yang terbesar ke kecil, dapat menggunakan DESC (descending).
mysql> select * from siswa order by NIM desc;

+-----------------+--------------------+----------------+-------+
| NIM | Nama | alamat | Sex |
+----------------+--------------------+-----------------+-------+
| 09.11.100 | Leon Auman | Jl. Bebek | P |
| 09.11.101 | Annisa Akhwat | Jl. Mawar | W |
| 09.11.102 | Abu Bakar | Jl. Tunjung | P |
| 09.11.104 | Laksmi dewi | Jl. Balapan | W |
| 09.11.106 | Budi R | Jl. Mawar | P |
+---------------+---------------------+------------------+------+
5 rows in set (0.11 sec)
Gambar 9.11 Menampilkan isi tabel di urutkan berdasarkan NIM
d. Mengubah Data (Update)

Jika data sudah kadaluarsa, berikut perintah digunakan untuk merubah data.
BU : Update nama_tabel set nama_field_1=isi_baru_1, nama_field_2=
isi_baru_2,…, nama_field_n=isi_baru_n Where kriteria;
Contoh : Update produk set harga=3000 where nama=’Sikat Gigi’;

E. Membackup File
Dipergunakan untuk membackup file database kedalam sebuah directory/folder bisa type
txt atau sql dan sebagainya.
B.U : mysqldump -u root -p uu>d:\coba.txt
Contoh :
C:\apache\mysql\bin>mysqldump -u root -p uu>d:\coba.txt
Contoh Kasus (Latihan):

Nama database : MyToko
Nama Tabel : Barang
Tabel 9.1. Tabel barang
Kode_brg Nama_brg Harga Jumlah
AAA TELEVISI 234000 2
BBB VCD 350000 7
CCC TELEVISI 1800000 12
DDD MINI COMPO 900000 4
Perintah-Perintahnya:
1. Tampilkan nama_brg , harga pada tabel barang
2. Tampilkan semua data_barang dengan nama_brg diurutkan secara Ascending
3. Tampilkan semua data_barang dengan harga diurutkan secara Descending
4. Tambahkan field total int(10) setelah field jumlah
5. Tambahkan nomor int(1) pada awal field (sebelum kode_brg)
6. Ubah data nama_brg menjadi Kipas Angin untuk kode_brg = BBB
7. Tampilkan semua data pada tabel barang
8. Ganti Field Total menjadi Total_Harga pada tabel barang
9. Isikan total_harga= harga x jumlah untuk semua data barang
10. Hapus data barang yang berkode CCC
Catatan :
Pembuatan Variabel (field name) harus memenuhi syarat seperti pembuatan nama database dan
nama tabel seperti : tidak boleh ada spasi, jangan menggunakan angka murni, jangan
menggunakan bahasa inggris yang merupakan perintah komputer.

MODUL 10
FUNGSI-FUNGSI UMUM MYSQL
a. Fungsi String
Fungsi string digunakan memanipulasi string untuk berbagai macam kebutuhan. Disini akan
dibahas beberapa fungsi string yang sering digunakan dalam membuat program aplikasi web.
1. AddSlashes
Digunakan untuk menambahkan karakter backslash ( \ ) pada suatu string. Hal ini penting
digunakan pada query string untuk database, misalkan pada MySQL. Beberapa karakter yang akan
ditambahkan tanda backslahses adalah karakter tanda petik satu ( ‘ ), karakter petik dua ( “ ),
backslash ( \ ) dan karakter NULL.
Sintaks:
addslashes(string)
2. StripSlashes
Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string.
Sintaks:
string stripslashes(string)
3. Crypt
Digunakan untuk meng-encrypt dengan metode DES suatu string. Fungsi ini sering digunakan
untuk mengacak string password sebelum disimpan dalam database. Dalam penggunaan fungsi
crypt ini dapat ditambahkan parameter string ‘salt’. Parameter ‘salt’ ini ditambahkan untuk
menentukan basis pengacakan. ‘Salt’ string terdiri atas 2 karakter. Jika ‘salt’ string tidak
ditambahkan pada fungsi crypt maka PHP akan menentukan sendiri ‘salt’ string tersebut secara
acak.
Sintaks:
crypt(string [ , salt ] )
4. Echo
Digunakan untuk mencetak isi suatu string atau argumen.
Sintaks:
echo( string argumen1, string argumen2 , ….)
5. Explode
Digunakan untuk memecah-mecah suatu string berdasarkan tanda pemisah tertentu dan
memasukkan hasilnya kedalam suatu variable array.
Sintaks:
explode(string pemisah , string [, int limit] )
Contoh:
$namahari = “minggu senin selasa rabu kamis jumat sabtu”;
$hari = explode(“ ”, $namahari);
6. Implode
Kegunaan fungsi ini adalah kebalikan daripada fungsi explode. Fungsi implode digunakan untuk
menghasilkan suatu string dari masing-masing elemen suatu array. String yang dihasilkan tersebut
dipisahkan oleh suatu string telah yang ditentukan sebelumnya.
Sintaks:

implode(string pemisah , array)
7. Strip_Tags
Digunakan untuk menghilangkan kode-kode tag HTML pada suatu string.
Sintaks:
striptags(string [, string tags yang tidak dihilangkan] )
8. StrLen
Digunakan untuk menghitung jumlah karakter suatu string.
Sintaks:
strlen(string)
9. StrPos
Digunakan untuk mencari posisi pertama suatu sub string pada suatu string. Fungsi ini biasanya
digunakan untuk mencari suatu sub string didalam suatu string.
Sintaks:
strlen(string , sub string)
10. Str_Repeat
Digunakan untuk mengulang isi suatu string.
Sintaks:
str_repeat(string , int jumlah perulangan)
11. StrToLower
Digunakan untuk merubah suatu string menjadi huruf kecil (lowercase).
Sintaks:
strtolower(string)
12. StrToUpper
Digunakan untuk merubah suatu string menjadi huruf besar (uppercase)
Sintaks:
strtoupper(string)
13. SubStr
Digunakan untuk mengambil suatu sub string dengan panjang tertentu dari suatu string pada posisi
tertentu pula.
Sintaks:
substr(string, int posisi , int posisi)
Contoh:
substr(“abcdefg”,0,3); // mengasilkan string “abc”
substr(“abcdefg”,3,2); // menghasilkan string “de”
14. SubStr_Count
Digunakan untuk menghitung jumlah sub string dalam suatu string
Sintaks:
substr_count( string , string substring)
Contoh:
substr_count(“This is a test”,”is”); // menghasilkan nilai 2

15. UCFirst
Digunakan untuk mengganti karakter pertama pada suatu string menjadi huruf besar.
Sintaks:
ucfirst(string)
16. UCWords
Digunakan untuk mengganti karakter pertama pada setiap kata dalam suatu string menjadi huruf
besar.
Sintaks:
ucwords(string)
b. Fungsi Date
Digunakan untuk mengambil tanggal dan jam. Hasil dari fungsi ini adalah sebuah string yang berisi
tanggal/jam sesuai dengan format yang diinginkan. Format yang dikenal dalam fungsi date ini
adalah sebagai berikut:
• a - "am" or "pm"
• A - "AM" or "PM"
• B - Swatch Internet time
• d - day of the month, 2 digits with leading zeros; i.e. "01" to "31"
• D - day of the week, textual, 3 letters; i.e. "Fri"
• F - month, textual, long; i.e. "January"
• g - hour, 12-hour format without leading zeros; i.e. "1" to "12"
• G - hour, 24-hour format without leading zeros; i.e. "0" to "23"
• h - hour, 12-hour format; i.e. "01" to "12"
• H - hour, 24-hour format; i.e. "00" to "23"
• i - minutes; i.e. "00" to "59"
• I (capital i) - "1" if Daylight Savings Time, "0" otherwise.
• j - day of the month without leading zeros; i.e. "1" to "31"
• l (lowercase 'L') - day of the week, textual, long; i.e. "Friday"
• L - boolean for whether it is a leap year; i.e. "0" or "1"
• m - month; i.e. "01" to "12"
• M - month, textual, 3 letters; i.e. "Jan"
• n - month without leading zeros; i.e. "1" to "12"
• s - seconds; i.e. "00" to "59"
• S - English ordinal suffix, textual, 2 characters; i.e. "th", "nd"
• t - number of days in the given month; i.e. "28" to "31"
• T - Timezone setting of this machine; i.e. "MDT"
• U - seconds since the epoch
• w - day of the week, numeric, i.e. "0" (Sunday) to "6" (Saturday)
• Y - year, 4 digits; i.e. "1999"
• y - year, 2 digits; i.e. "99"
• z - day of the year; i.e. "0" to "365"
• Z - timezone offset in seconds (i.e. "-43200" to "43200")
Sintaks:
date(string format)
Contoh:

date(“Y-m-d”); // menghasilkan “2016-07-28”

date(“l, j F Y”); // menghasilkan “Saturday, 28 July 2016”
date(“H:i:s”); // menghasilkan “20:15:07”
c. Fungsi Mail
Digunakan untuk mengirimkan e-mail ke alamat e-mail tertentu.
Sintaks:
mail(string tujuan , string subject , string isi [, string header] );
Contoh:
$pengirim = “From: saya@email.com ”;

$tujuan = “ tonni.budidarma@gmail.com ”;
$subject = “Pemberitahuan”;
$isi = “Ini adalah percobaan pengiriman e-mail dengan menggunakan PHP”;
mail($to,$subject,$isi,$pengirim);
< Ulangi

MODUL11
DATABASE ACCESS DENGAN PHP
Pada modul ini akan dibahas tentang bagaimana cara mengakses database MS Acces melalui PHP
menggunakan ODBC. Pada dasarnya PHP mendukung berbagai macam database seperti MS
Acces, MySQL, Oracle, Paradox, dBase dan lain sebagainya.
a. ODBC (Open database Connectivity )

ODBC merupakan singkatan dari Open database Connectivity yaitu merupakan suatu standart yang
dikembangkan oleh Microsoft untuk mengakses database agar lebih mudah dengan fungsi yang
bersifat umum. Mengakses database pada PHP tidak lagi menggunakan cara-cara seperti pada MS
Acces, VBasic ataupun Delphi yang dengan menggunakan komponen tertentu. Untuk mengakses
database pada PHP diperlukan perintah SQL (Structured Query Language). Pada program berbasis
Windows sumber data ODBC dapat diakses pada program melalui DSN (Data Source Name).
1. DSN (Data Source Name).

Sebelum membuat DSN terlebih dulu harus dibuat database yang akan digunakan dalam aplikasi
jaringan ini di program MS Acces. Caranya seperti lihat pada halaman berikut. Dan simpanlah
database yang anda buat ke dalam directori : C:/apache/Acces/Inventaris.Mdb
Untuk membuat DSN caranya adalah sebagai berikut :

Pilih menu Start Control Panel
Maka akan muncul menu sebagai berikut :
Gambar 11.1. Membuka Control Panel
Kemudian klik Control Panel\System and Security\Administrative Tools, muncul tampilan berikut ini,
pilih Data Source (ODBC).

Gambar 11.2. Menu Dialog Data Source (ODBC)
Gambar 11.3. Menu Penambahan DSN
2. Membuat Database
Buatlah Database dengan nama Inventaris dalam MS Accces seperti pada gambar di bawah ini.
Gambar 11.4. Tabel pada Microsoft Office Access 2007

3. Membuat Koneksi DNS

Pada menu administrative tools, pilih Data Source / Pilih Menu Administrative Tools (Untuk Windows
7), seperti tampilan berikut:
Gambar 11.5. Menu Data Source (ODBC)
Lalu pilih ODBC Data Source, muncul dialognya

Pilih Tab System DSN
Gambar 11.6. Menu DSN
Pilih Add untuk membuat DSN baru
Gambar 11.7. Menu Penambahan DSN
Pilih nama data source

Gambar 11.7. Menu Pemilihan Data Source
Pilih Driver Do Microsoft Acces (*.mdb)

Pilih Database yang telah anda buat misalkan di sini namanya Inventaris.Mdb yang diletakkan pada
directori C:\Apache\Acces\Komputer.mdb
Pilih OK
Gambar 11.8. Menu Pemilihan Drivers
b. Mengakases Database Melalui PHP

PHP telah menyediakan sejumlah fungsi untuk mengakses database melalui ODBC. Dengan fungsi-
fungsi ODBC ini maka akses ke database akan menjadi mudah dan cepat. Untuk dapat mengakses
database maka harus dimengerti fungsi-fungsi berikut ini :
1. Fungsi odbc_connect
Fungsi ini berguna untuk menghubungkan nama sumber data ODBC dengan format
pemanggilan Sebagai berikut:
odbc_connect (nama_sumber_data, nama_pemakai, nama_password)
2. Fungsi odbc_close
Fungsi ini berguna untuk menutup hubungan dengan sumber data ODBC. Format penulisannya
Sebagai berikut:
odbc_close (pengenal_hubungan)
pengenal_hubungan adalah nilai yang dihasilkan oleh odbc_connect
3. Fungsi odbc_close_all
Fungsi ini berguna untuk menutup semua hubungan dengan sumber data ODBC. Format
penulisannya Sebagai berikut:
odbc_close_all ( )

4. Fungsi odbc_do
Fungsi ini berguna untuk menjalankan perintah sql dengan format penulisan s Sebagai berikut:
odbc_do (pengenal_hubungan, string_query)
5. Fungsi odbc_num_fields
Berguna untuk memperoleh jumlah field
odbc_num_fields (pengenal_hasil)
6. Fungsi odbc_num_rows
Berguna untuk memperoleh jumlah record atau baris
odbc_num_rows (pengenal_hasil)
7. Fungsi odbc_fields_name
Berfungsi untuk mengambil data dengan mengakses judul field.
odbc_fields_name (pengenal_hasil, no_kolom)
8. Fungsi odbc_ fields_len

Berguna untuk memperoleh panjang kolom
odbc_ fields_len (pengenal_hasil, no_kolom)
9. Fungsi odbc_ fields_type

Berguna untuk memperoleh tipe kolom
odbc_ fields_type (pengenal_hasil, no_kolom)
10. Fungsi odbc_ fetch_row

Berguna untuk memperoleh sebuah baris dari suatu himpunan hasil.
odbc_ fetch_row (pengenal_hasil, no_baris)
11. Fungsi odbc_ fetch_into

Berguna untuk memperoleh sebuah baris dari suatu himpunan hasil.
odbc_ fetch_into (pengenal_hasil, no_baris)
12. Fungsi odbc_ result

Berguna untuk memperoleh nilai dari sebuah kolom pada baris sekarang.
odbc_ result (pengenal_hasil, kolom)
13. Fungsi odbc_ result_all

Berguna untuk menampilkan semua baris dari suatu hasil ke browser.
odbc_ result_all (pengenal_hasil, format)
C.. PHP dan Koneksi ke Database

1. Membuat Koneksi ke Database ODBC
Untuk mengetahui apakah hubungan ke database sudah berjalan atau belum dapat dibuat dengan
script PHP dengan fungsi odbc_open dan odbc_close sebagai berikut :
<HTML>
<TITLE> Tes Koneksi Ke Database Dengan ODBC </TITLE>
<BODY>
<?php
$pemakai = "";
$password = "";
$dataku = odbc_connect("DBToko", $pemakai, $password);
if (! $dataku)
die("Database tak dapat dibuka");
odbc_close($dataku);
print("Berhasil…");
?>
</BODY>
</HTML>
2. Melihat Daftar Tabel Barang

<HTML>
<HEAD>
<TITLE>Membaca Tabel Mahasiswa </TITLE>
</HEAD>
<BODY>
<align = "center">
</p>
Daftar Barang PT. Angin Ribut
<?php
$pemakai = "";
$password = "";
$dataku = odbc_connect("DBToko",$pemakai,$password);
if (! $dataku)
$sql = "SELECT Barang.KdBrg, Barang.NamaBrg, Barang.Ukuran, Barang.satuan "."FROM Barang
" . "ORDER BY Barang.KdBrg";
$hasil = odbc_do($dataku, $sql);
odbc_result_all($hasil, "Border=2");
odbc_close($basis_data);
?>
</BODY>
</HTML>
3. Melihat Daftar 2 tabel (Tabel Mahasiswa Dan Tabel Nilai)

<?php
$pemakai = "";
$password = "";
$dataku = odbc_connect("Jur_Komputer", $pemakai, $password);
if (! $dataku)
$sql = "SELECT Mahasiswa.NPM, " .
"Mahasiswa.nama, Mahasiswa.Alamat, Nilai.kode_kuliah,
Nilai.Nilai " "FROM Mahasiswa, Nilai " .
"WHERE Mahasiswa.NPM = Nilai.NPM " "ORDER BY Mahasiswa.NPM";
?>

4. Melihat Daftar 4 Tabel (Mahasiswa, Tabel Nilai, Tabel Kuliah Dan Dosen)
<?php
$pemakai = "";
$password = "";
$dataku = odbc_connect("Jur_Komputer",$pemakai,$password);
if (! $dataku)
$sql = "SELECT Mahasiswa.NPM, Mahasiswa.nama, Nilai.kode_kuliah, T_Kuliah.Nama_Kuliah,
Nilai.Nilai, Dosen.Nama FROM Mahasiswa, Nilai, T_Kuliah, Dosen WHERE Mahasiswa.NPM =
Nilai.NPM and T_Kuliah.kode_kuliah = Nilai.kode_kuliah "and Dosen.NIP = T_kuliah.NIP ORDER
BY Mahasiswa.NPM";
?>
5. Penambahan Data
<?
$pemakai = "";
$password = "";
$dataku = odbc_connect("Jur_Komputer", $pemakai, $password);
if (! $dataku)
$sql="insert into Mahasiswa " .
" (NPM, Nama, Alamat, Tgl_Lahir, Nama_Orang_Tua) " .
" VALUES (115, 'Denmas', 'Jl. Sekeloa Utara 62', 11/27/1975, 'Ir. Ali Akbar')";
if (odbc_do ($basis_data, $sql))
printf(" Data Berhasil Diinputkan ");
else
printf(" Data Tidak Berhasil Diinputkan ");
?>

MODUL 12
KONEKSI DATABASE MYSQL DENGAN PHP
PHP adalah bahasa pemrograman umum yang paling banyak digunakan untuk pengembangan
web. PHP sangat cepat dan fleksibel dan banyak digunakan oleh situs-situs paling populer di dunia.
PHP adalah singkatan dari “PHP Hypertext Preprocessor”, PHP sendiri awalnya kependekan dari
“Personal Home Page Tools” dan sebagian besar pengembang web membuat konten dinamis yang
berinteraksi dengan databasemelalui PHP.
Database adalah sekumpulan data yang telah terorganisir sehingga memudahkan program
komputer untuk mengakses kebagian data yang dibutuhkan. Database yang akan kita akses pada
tutorial ini adalah database MySQL.
Pertama kali yang akan dilakukan adalah membuka koneksi dengan database dan setelah
membuka database, kita dapat melakukan beberapa fungsi yang berbeda seperti menambahkan,
menghapus, memperbarui dan mengubah data dalam tabel di database MySQL.
Gambar 12.1. Tampilan Koneksi dengan Database
a. Cara Membuka Koneksi dengan Database MySQL PHP

PHP memiliki banyak fungsi berbeda yang telah built-in untuk manipulasi database. Berikut ini
adalah fungsi-fungsi built-in, dan kita pasti akan menemukan ketika membuat aplikasi yang
berhubungan dengan PHP dan MySQL:
Skrip PHP
mysql_connect()
mysql_select_db()
mysql_close()
b. Membuka koneksi database MySQL PHP

Seperti yang telah disebutkan, sebelum merubah isi tabel dari database, pertama yang harus kita
mulai adalah membuat skrip agar terhubung ke database. Fungsi mysql_connect(), seperti
namanya, digunakan untuk menghubungkan ke database MySQL.
Contoh :
<?php
$user_name = "root";

$password = "";
$database = "barang";
$host_name = "localhost";
mysql_connect($host_name, $user_name, $password);
echo "Koneksi Terbuka";
?>
Perhatikan empat baris skrip pertama yang ditunjukkan di atas, skrip tersebut merupakan
pengaturan variabel. Variabel pertama adalah $user_name sedangkan variabel kedua
adalah $password, variabel pertama berisi nilairoot sedangkan variabel kedua bernilai "" alias
kosong, kita menentukan nilai ini karena nilai ini adalah nilai default untuk database MySQL.
Berikutnya adalah variabel $database yang berisi nama database yang ingin dituju dan
variabel $host_name yang berisi nama host tempat database berasal. Jika anda belum mempunyai
server lokal yang berisi PHP dan MySQL, anda bisa install web server lokal dengan mengikuti
tutorial Cara Install XAMPP Web Server di Windows.
INFO Jika anda menggunakan database MySQL yang berasal dari XAMPP, maka nama host adalah
“localhost“ –tanpa tanda petik-, dengan asumsi bahwa database anda berada pada lokal komputer.
Pada kasus lain nama host juga bisa berupa nama lainnya dan juga bisa berupa IP Komputer.
Sintaks :
Baris Skrip PHP di atas digunakan untuk terhubung dengan database dan umumnya berisi tiga
parameter termasuk nama host, username dan password database yang baru saja kita isi
sebelumnya pada variabel.
Jika tidak ingin menggunakan variabel, maka kita bisa langsung menggunakan nilai tersebut seperti
yang ditunjukkan di bawah ini:
Sintaks :
mysql_connect('localhost','root','');
c. Menentukan Database yang ingin dibuka

Pada kode yang telah ditunjukkan di atas, kita telah menyatakan variabel $database berisi
nama database yang kita tuju. Mari kita menggunakan variabel tersebut untuk cek
apakah database tersebut tersedia atau tidak.
Contoh :
<?php
$password = "";
mysql_select_db($database);
echo "Koneksi Terbuka";
?>

Pada skrip diatas terdapat fungsi mysql_select_db(), fungsi ini adalah fungsi built-in PHP yang
digunakan untuk memilih database MySQL yang ingin kita hubungkan. Selanjutnya
fungsi mysql_select_db() mengembalikan nilai true jika database yang kita masukkan ditemukan
dan mengembalikan nilai false jika database tidak ditemukan, jika nilai tersebut true maka akan
menampilkan pesan “Koneksi Terbuka”.
Skrip diatas memiliki kekurangan dalam hal penampilan pesan jika database yang dituju tidak
tersedia, maka dari itu membuat dan menggunakan variabel untuk menyimpan
nilai mysql_select_db() dan mysql_connect(). Dengan variabel tersebut kita dapat menguji dengan if
else untuk memeriksa apakah database ditemukan atau tidak.
Gambar 12.2. Tampilan Koneksi Database (Database ditemukan)
Contoh :
<?php
$password = "";
$connect_db=mysql_connect($host_name, $user_name, $password);
$find_db=mysql_select_db($database);
if ($find_db) {
echo "Database Ada";
}else {
echo "Database Tidak Ada";
}
?>
d. Cara Menutup Koneksi Database MySQL PHP

Dalam PHP, mysql_close() digunakan untuk menutup koneksi ke server database MySQL. Kita
dapat menggunakan skrip berikut untuk menutup koneksi:
Sintaks:
mysql_close($connect_db)
Mari kita tambahkan skrip diatas, sehingga skrip akhir menjadi seperti ini.
Contoh :

<?php
$password = "";
$connect_db=mysql_connect($host_name, $user_name, $password);
$find_db=mysql_select_db($database);
if ($find_db) {
echo "Database Ada";
mysql_close($connect_db);
}
else {
echo "Database Tidak Ada";
mysql_close($connect_db);
}
?>
e. Menampilkan isi Tabel dari Database MySQL PHP

Setelah diketahui bagaimana menghubungkan database dan kemudian menutupnya, selanjutnya
mari mencoba mengambil data atau membaca data tabel dari database MySQL menggunakan PHP.
Gambar 12.3. Isi Tabel yang ada pada database MySQL
Gambar 12.4. Isi Tabel yang ada pada database MySQL dipanggil dari browser
Sebelum ditampilkan, maka harus dipastikan bahwa terdapat tabel dalam database yang dibuka,
anggaplah nama tabel tersebut adalah “barang” dan telah memiliki 3 baris isi. Untuk mengambil dan

menampilkan isi dari tabel “barang” dalam database “barang”, maka digunakan
fungsi mysql_fetch_assoc(), selengkapnya perhatikan skrip berikut.
Contoh :
<body bgcolor="black">
<table border="0" align="Center">
<tr bgcolor="cyan">
<td>Kode Barang </td><td>Nama Barang</td><td>Harga</td>
<td>Jumlah</td><td>Proses</td></tr>
<?php
mysql_connect("127.0.0.1","root","");
mysql_select_db("indomaret");
$perintah="Select * from barang order by Kode_brg ASC";

$hasil=mysql_query($perintah);
if ($hasil)
{
while($baris=mysql_fetch_row($hasil))
{echo ("<tr bgcolor=yellow>
<td><p>$baris[0]</p></td>
<td> [<a href='Form_Input.php'>Tambah</a>]

[<a href='Form_edit.php?id=$baris[0]'>Edit</a>]
[<a href='hapus.php?id=$baris[0]'>Hapus</a>]
</td></tr>");
}
}
?>
</table>
</body>
Perhatikan skrip di atas, jika database tersedia maka query “select * from barang” akan berjalan
menggunakan fungsi mysql_query() dan hasilnya disimpan dalam variabel $hasil.
Fungsi mysql_fetch_row() digunakan untuk mengambil data dari $hasil dan disimpan
dalam $field_db. Setelah tersimpan dalam $field_db, maka kita tinggal menampilkan data sesuai
nama kolom.
f. Input Data (Simpan.php)

Untuk melakukan penambahan data harus menggunakan satu form input (file_input.php) dan satu
lagi untuk proses editnya (file_simpan.php)
1. Form Input Data

<form name="xtambah" action="Proses_simpan.php" method="post">
<table border="0" align="center" width="50%" bgcolor="lime">
<tr bgcolor="pink"><td colspan="2" align="center"><font size="5">Data Barang</font></td></tr>
<tr><td align="right">Kode Barang</td>

<td><input type="text" name="xkode" id="xkode" size="10" maxlength="10"></td></tr>
<tr><td align="right">Nama Barang</td>

<td><input type="text" name="xnama" size="30" maxlength="30"></td></tr>

<tr><td align="right">Harga</td>
<td><input type="text" name="xharga" size="10" maxlength="10"></td></tr>
<tr><td align="right">Jumlah</td>
<td><input type="text" name="xjumlah" size="4" maxlength="8"></td></tr>
<tr><td align="right"><input type="submit" name="xsimpan"value="Simpan"></td>

<td><input type="submit" name="xhapus"value="Reset"></td></tr>
</form></table><BR/>
<?
include ("tampil.php");
?>
2. Proses simpan.php
<?php
{ $id=$_REQUEST[id];
$kode=$_REQUEST[xkode];
$nama=$_REQUEST[xnama];
$harga=$_REQUEST[xharga];
$jumlah=$_REQUEST[xjumlah];
$perintah=("insert into barang

(Kode_brg,Nama_brg,harga,jumlah ) values
('$kode','$nama','$harga','$jumlah')");
$hasil=mysql_query($perintah); }
include ("Form_input.php");
?>
g. Menghapus Data (hapus.php)

Untuk melakukan perbaikan data harus menggunakan satu file untuk proses hapus datany
(file_hapus.php)
<?php
mysql_select_db("webku");
$kategori=$_REQUEST[xkategori];
$har_bel=$_REQUEST[xhb];
$har_ju=$_REQUEST[xhj];
$stok=$_REQUEST[xstok];

$perintah=("delete from barang where Id_barang='$id'");

include ("input.php");
?>
NB : Khusus perintah untuk hapus.php tidak ada yang ditampilkan karena isinya hanya sebatas
perintah, jadi hapus.php akan melaksanakan perintah hapus jika di klik tulisan Hapus yang
ada pada Tampil.php
h. Mengedit/mengubah Data (Proses_edit.php)

Untuk melakukan perbaikan data harus menggunakan satu form input (file_input.php) dan satu lagi
untuk proses editnya (file_proses.php)
1. proses_edit.php
<?php
$harga=$_REQUEST[xharga];
$jumlah=$_REQUEST[xjumlah];
$perintah="update barang set Kode_brg='$kode',Nama_brg='$nama',

harga='$harga',jumlah='$jumlah' where kode_brg='$id'";
include ("Form_input.php");
?>
2. Form Edit.php
<html>
<head><title> form</title></head>
<body bgcolor="black">
<?php
$id=$_REQUEST[id];
$perintah="Select * from barang where kode_brg='$id'";
$hasil=mysql_query($perintah);
$baris=mysql_fetch_row($hasil)
?>
<form name="xtampil" action="editbarang.php">

<table border="0" align="center" bgcolor="yellow">
<tr><td colspan="2" align="center" bgcolor="blue"><font size="5" color="White">Data

Barang</font></td></tr>
<tr><td>Kode</td>
<td><input type="text" name="xkode" value="<?=$baris[0]?>" size="20" maxlength="8">
<input type="hidden" name="id" value="<?=$baris[0]?>" size="20" maxlength="8"></td></tr>
<tr><td>Nama Barang</td>
<td><input type="text" name="xnama" value=<?=$baris[1]?> size="30"
maxlength="30"></td></tr>
<tr><td>Harga Barang</td>
<td><input type="text" name="xharga" value=<?=$baris[2]?> size="10"
maxlength="10"></td></tr>
<tr><td>Jumlah</td>
<td><input type="text" name="xjumlah" value=<?=$baris[3]?> size="6" maxlength="6"></td></tr>
<tr><td align="Right"><input type="submit" name="xedit"value="Edit"></td>

<td><input type="reset" name="xreset"value="Reset"></td></tr>
</form>
</table><br><br>
<?php
include("tampil.php");
?>
</body></html>
Penjelasan :
mysql_connect("127.0.0.1","root",""); // menghubungkan ke server

mysql_select_db("DBToko"); memilih database Sesuaikan dengan create database nya
if($xsimpan) // pastikan sama dengan name tombol Simpan (submit)
$id=$_REQUEST[id]; // untuk REQUEST id

$kode=$_REQUEST[xkode]; // xkode yang disini pastikan sama dengan name dari objek input
untuk Kode Barang
$nama=$_REQUEST[xnama]; // xnama yang disini pastikan sama dengan name dari objek input
untuk Nama Barang
$harga=$_REQUEST[xharga]; // xharga yang disini pastikan sama dengan name dari objek input
untuk Harga
$perintah="insert into barang (kd_brg,nama_brg,harga)values ('$kode','$nama','$harga')";
(kd_brg,nama_brg,harga,jumlah) // pastikan sama dengan waktu buat tabel Kd_brg char...,

nama_brg char...., harga int...., jumlah int....
values ('$kode','$nama','$harga','$jumlah')"; // pastikan sama dengan waktu buat REQUEST

xkode, xnama,xharga,xjumlah $kode =$_REQUEST[xkode]

REQUEST harus huruf besar,
Perhatikan tampilan berikut ini :
Gambar 12.5. Kerangka jumlah File php yang terhubung Untuk Mengolah Satu Tabel

MODUL 13
MERANCANG LAYOUT DESAIN WEBSITE
Desain utama adalah sebuah halaman untuk induk dari program bentuknya standarnya, terdiri dari
Header, Footer, Menu Kiri, Isi (utama) dan Link Kanan), seperti tampilan di bawah ini :
Biasanya tampilan sebuah website dibagi dalam 2 bagian yaitu : untuk Administrator dan untuk User
Umum
Misalnya seperti tampilan berikut:
Gambar 13.1. Menu Utama Website

Yang dibutuhkan:
a. Menu (Pilihan Program)
b. Tempat link aplikasi (ISI)
c. Judul / Header Web (berbentuk gambar dan Tulisan, bisa juga animasi)
d. Footer (Keterangan)
e. Atribut pelengkap yang lain (Form Login, kalender, link ke situs lain, jumlah
pengunjung/counter, dsb)
Dengan gambaran ilustrasi, apapun yang akan diklik pada menu disebelah kiri, maka progam akan
berjalan atau tampil di kolom / cell isi Tampilan Link.
Dari gambar output diatas dapat kita susun dengan menggunakan bantuan tabel
Seperti berikut:

gambar
Judul
dsfdsfdsfdsfdsfd
Menu Program
Objek lain seperti
jam
Dan link ke situs
lain
Isi web
Footer (Keterangan)
Gambar 13.2. Desain Kerangka MenuUtama Website
Untuk itu pada cell isi Tampilan Link, ketikkan source Code Berikut pada halaman utama bisanya
diberi nama file Index.php:
<td width="60%" valign="top">

<?
$slink=$_REQUEST['slink'];
if(isset($slink)) {
include "$slink" ;
} else {
include"profil.php";
}
?>
</td>
Setelah itu pada source code untuk menu.php, ketikkan source code berikut :
a. Tabel utama diatas disimpan dengan nama Index.php
<html>
<title>Percobaan</title>
<body bgcolor="Black">
<center>
<table border="1" width="90%" height="90%" bgcolor="cyan" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="20%" background="./gambar/header.jpg">sssss</td>
<td width="15%">ssss</td>
</tr>
<tr>
<td colspan="3" height="5%" bgcolor="yellow">
<?php include "tulisan.php"; ?></td>

</tr>
<tr>
<td width="15%" valign="top"><?php include "menu.php"; ?> <br>
<?php include "login.php"; ?></td>
<td valign="top"><?
$slink=$_REQUEST['slink'];
if(isset($slink)) {
include "$slink" ;
} else {
include"profile.php";
}
?>
</td>
<td valign="top"><object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,0,
0" width="100%" align="middle">
<param name="src" value="JAM.SWF">
<embed src="JAM.SWF" width="100%" align="middle"
pluginspage="http://www.macromedia.com/shockwave/download/"></embed>
</object></td>
</tr>
<tr>
<td colspan="3" height="5%" bgcolor="blue">sssss</td>
</tr>
</table>
</center>
</body>
</html>
b. Untuk Menu Program (menu.php)

<table border="1" width="100%" bgcolor="white">
<tr><td bgcolor="blue" align="center"><b>
<font size="5">MENU UTAMA</font></b></td></tr>
<tr><td align="center"><a href="index.php?slink=ganjil.php&act=info">Ganjil / Genap</a></td></tr>
<tr><td align="center"><a href="index.php?slink=segi.php&act=info">Segi Panjang</a></td></tr>
<tr><td align="center"><a href="index.php?slink=namafile3.php&act=info">Menu3</a></td></tr>
<tr><td align="center"><a href="index.php?slink=namafile4.php&act=info">Menu4</a></td></tr>
</table>
c. Profile (Profie.php)
<?php
echo "Selamat datang di Situs kami, semoga bermanfaat!!!";
?>
d. Tulisan berjalan (tulisan.php)

<marquee behovior="alternate">Selamat Datang di Situs Kami</Marquee>
e. Login dan Password (Login.php)

<html>
<body bgcolor="yellow">
<center>
<table border="0" cellpadding="0"cellspacing="0" width="100%">
<tr> <td colspan="2" align="center">
<b><u><font color="#FF0000" size="5">Login User</font></b></u></td>
</tr>
<tr><td>&nbsp</td></tr>
<form method="POST" action="ganjil.php">
<tr><td align="right"> Login : </td>
<td><input type=text name=xbil size=20 maxlength=20 > </td> </tr>
<tr><td align="right"> Pasword : </td>
<td><input type=text name=xbil size=20 maxlength=20 > </td> </tr>
<tr><td colspan="2" align="center"><input type="submit" value="Proses" name="xuji">

<input type="reset" value="Reset" name="xreset"></td> </tr>
</form>
</table></center>
</body>
</html>
f. Program Segi Panjang (segi.php)

<html>
<head><title>Persegi Panjang</title></head>
<center><form method="POST" action="proses2.php">
<table bgcolor="blue" width="100%">
<tr><td colspan="2" bgcolor="white"><b><font color="#FF0000" size="5">
Menghitung Luas Persegi Panjang</font></b></td</tr>
<tr><td align="right">Masukkan Panjang : </td>

<td><?php
echo ("<input type=text name=xpjg size=4 maxlength=4 value='$xpjg'>");
?> </td></tr>
<tr><td align="right">Masukkan Lebar :</td>

<td> <?php
echo ("<input type=text name=xlbr size=4 maxlength=4 value='$xlbr'>");
?></td></tr>
<tr><td colspan="2"><p align="center"><input type="submit" value="Hitung" name="xhitung">

<input type="reset" value="Reset" name="xreset"></p></td></tr>
<tr><td align="right">Maka Luas Persegi Panjang : </td>

<td> <?php
echo ("<input type=text name=xluas size=6 maxlength=6 value='$xluas'>");
?></td></tr>
</table><center>
</form>
</body>
</html>
g. Program Ganjil genap (ganjil.php)
<html>
<head><title>Bilangan Ganjil / Genap</title></head>
<center>
<table border="0" cellpadding="0"cellspacing="0" width="100%">
<tr> <td colspan="2" align="center">
<b><u><font color="#FF0000" size="5">Menentukan Bilangan Ganjil dan
Genap</font></b></u></td>
</tr>
<tr><td>&nbsp</td></tr>
<form method="POST" action="ganjil.php">
<?php
$xbil = $_POST['xbil'];
?>
<tr><td align="right"> Masukkan Bilangan : </td>
<td> <?php
echo ("<input type=text name=xbil size=4 maxlength=4 value='$xbil'>");
?> </td> </tr>
<?php
$hsl=$xbil%2;
if ($hsl==0)
$xket="Bilangan Genap";
else
$xket="Bilangan Ganjil";
?>
<tr><td colspan="2" align="center"><input type="submit" value="Proses" name="xuji">
<input type="reset" value="Reset" name="xreset"></td> </tr>
<tr> <td align="right">Keterangan :</td>

<td>
<?php
echo ("<input type=text name=xluas size=25 maxlength=25 value='$xket'>");

?>
</td> </tr>
</form>
</table></center>
</body>
</html>
Outputnya sebagai Berikut:
Gambar 13.3. Hasil running dari kumpulan file php di atas
Biasanya tampilan web dibagi dalam 2 bagian yaitu : Administrator dan User Umum
a. Yang dibutuhkan untuk Admin:
Seorang administrator sebaiknya dapat menambah, mengedit, melihat, mencetak dan menghapus
data. Maka untuk itu diperlukan halaman index sendiri (Index_Admin.php) dan biasanya
halaman ini identik dengan user (login dan Password)
A. Rancangan Database
Nama database : toko.sql
Nama tabel : USER
Tabel 13.1. Deskripsi Tabel User
Field Jenis
login varchar(15)
password varchar(15)
Telp varchar(13)

Tabel 13.2.Tampilan data tabel user

login password telp
admin najmi 12345
B. Rancangan Form
1. Form Login
Rancang Form login (frm_login.php) untuk dipakai dalam menu utama sistem seperti berikut ini :
Gambar 13.4. Form Login User
User name : admin

Password : najmi
Source codenya :
<H2>Login User </H2>

<?
echo "
<form method=post action=proseslogin.php>
<table border=0 cellpadding=0 cellspacing=0 align=center>
<tr>
<td >User Name </td><td> : </td>
<td><input type=text name=user size=20>
<tr>
<tr>
<td>Password </td><td> : </td>
<td><input type=password name=pass size=20>
<tr>
<tr> <td colspan=3> <input type=submit name=simpan value=\" Login \"> <tr>
</table>
</form>
";
?>
Jika diklik tombol login maka akan mengerjakan action = proseslogin.php, dengan sourcode dibawah
ini :
2. Proses Login
<?php
include("koneksi.php");

$user = $_REQUEST["user"];
$pass = $_REQUEST["pass"];
$query = "Select * from user where login='$user' and password = '$pass'";
$login=mysql_query($query);
$baris = mysql_fetch_array($login);
if($baris[login] ==$user)
{
setcookie("reg_admin","admin");
header("location: index_admin.php");
}
else
{
header("location: index.php");
}
?>
3. koneksi.inc.php atau koneksi.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("Toko");
?>
4. Logout
Perintah diperlukan agar begitu logout sistem menghapus riwayat koneksi dengan menggunakan
cookie, sourcode berikut :
<?
SetCookie("puser");
SetCookie("ppass");
include("frmlogin.php");
?>
========================
NB :
Pada index_admin hilangkan include frm_login.php, Gantikan dengan
<a href="index.php?slink=logout.php&act=info">Logout</a></td>

MODUL 14
CONTENT DAN INDUSTRI KREATIF IT
1. Pengertian Content dalam Web
Pengertian content dalam website bukan sekadar tampilan ketika membuka sebuah web.
Pengertian content dalam website, yaitu gambar, suara, tulisan, video, atau segala hal yang dapat
dilihat oleh user dari sebuah website ketika membuka website, hal pertama yang dilihat adalah
content.
a. Pengaturan Konten
Untuk melakukan pengaturan content, dilakukan pada saat pemrograman website atau disebut
dengan proses coding. Pengaturan content dapat berupa tata letak, komposisi warna, letak gambar,
latar belakang suara, posisi video, atau peletakkan tulisan. Content ini harus direncanakan terlebih
dahulu saat pembuatan website.
Pengertian content dalam website juga tidak dapat dilepaskan dari database. Database berperan
penting dalam hubungannya dengan content web, karena content-content didalam website bisa
disimpan di database yang kemudian digunakan sebagai pusat pengaturan atau manajemen
content. Dengan demikian, maka content dapat diatur dengan mudah.
b. Konsep Pengaturan
Konsep pengaturan content dengan database dapat dilakukan dengan mudah jika menggunakan
konsep Content Management System (CMS). CMS adalah sebuah aplikasi yang berguna untuk
mengatur isi web dengan template-template. Ini akan memudahkan untuk orang awam yang tidak
memahami tentang bahasa pemrograman. Semua dapat dilakukan hanya dengan menggunakan
tombol pada mouse maka kita dapat langsung memilih template yang sesuai. CMS yang biasa
digunakan ada beberapa macam, di antaranya:
1. Personal web (blog) seperti wordpress dan blogger. Blog-blog seperti ini menyediakan
template yang pengaturannya dapat disesuaikan dengan keinginan user.
2. E-commerce web seperti OsCommerce.
3. E-learning web seperti Moodle. Moodle memudahkan penggunanya untuk mengatur
tampilan dari komposisi letak sesuai keinginan penggunanya.
4. E-forum web seperti Vbuletin, MYBB.
Setiap CMS mempunyai fungsi dan tampilan yang berbeda-beda, tergantung kreativitas dan tujuan
kita membuat website. Tanpa perlu tahu tentang pemrograman, kita sudah dapat membuat website
sekelas seorang IT professional. Pasalnya, CMS juga dilengkapi dengan berbagai tampilan-tampilan
yang menarik. Ada beberapa CMS yang bahkan menyediakan template yang dapat kita atur sendiri.
Misalnya tentang pengaturan posisi tulisan, gambar, tabel, atau grafik dalam website. Ini tentu akan
semakin mempercantik website dan user tidak akan terpaku pada template yang sudah ada.
Oleh sebab itu, maka dapat disimpulkan bahwa pengertian content dalam website itu lebih luas dari
sekedar tampilan dalam website
Website perlu memiliki konten yang tepat, tetapi pertanyaannya adalah bagaimana mengetahui
konten yang tepat. Ini cukup mudah. Mesin pencari memiliki perangkat yang dapat membantu
menyediakan keyword yang dapat digunakan dalam konten ada. Gunakan sebisa mungkin konten
yang unik di setiap lokasi website anda.
2. Content Management System

CMS adalah software yang digunakan untuk membuat, mengubah dan mempublikasikan content ke
dalam sebuah website. Fasilitas yang umumnya terdapat dalam CMS sangat banyak, terutama yang
berkaitan dengan publikasi isi website, pengaturan halaman, pengubahan isi, pencarian dan lain-
lain. Sebuah CMS, dapat berbentuk program yang sederhana, atau dapat juga merupakan suatu
program kompleks yang terdiri dari berbagai modul-modul sesuai dengan fasilitas yang terdapat
didalamnya.
(CMS) – Content Management Penggunaan Content Management System tidak memerlukan

pengetahuan pemrograman web yang handal karena proses instalasi dan cara penggunaannya
sudah user friendly. CMS sendiri ada yang dibuat khusus menyesuaikan kasus yang ada dan
biasanya berbayar dan ada yang berupa template instan yang fungsionalitasnya dibuat dengan
menyeuaikan pada beberapa proses bisnis yang ada didunia nyata yang dapat digunakan secara
gratis. Aplikasi Content Management System instant yang banyak terdapat di internet saat ini
kebanyakan dibuat menggunakan scripting language PHP dan database-nya adalah MySQL. Saat
ini perkembangan Content Management System cukup pesat, banyak vendor yang membuat CMS
instant yang didistribusikan secara gratis. Perkembangan CMS instant ini juga dipicu oleh
perkembangan web 2.0 yang memungkinkan interaksi dalam arti yang cukup luas antara pengelola
web dan pengunjung web.
Selain perkembangan teknologi web dan infrastruktur internet, perkembangan pesat Content
Management System juga dipicu oleh kebutuhan masyarakat dan pelaku bisnis yang menginginkan
web dapat mendukung kegiatan bisnis mereka secara mudah dalam hal pengelolaan content, cepat
dalam pembuatan web, serta murah dalam pengadaannya.
a. Keuntungan Menggunakan CMS

Manajemen data
Ini merupakan fungsi utama dari CMS. Semua data/informasi baik yang telah ditampilkan
ataupun belum dapat diorganisasi dan disimpan secara baik. Suatu waktu data/informasi
tadi dapat dipergunakan kembali sesuai dengan kebutuhan. Selain itu, CMS juga
mendukung berbagai macam format data, seperti XML, HMTL, PDF, dll., indexing, fungsi
pencarian, dan kontrol terhadap revisi yang dilakukan terhadap data/informasi. Untuk
menggunakan CMS biasanya pengetahuan tentang bahasa pemrograman tidaklah terlalu
dibutuhkan, karena semua proses berjalan dengan otomatis (WYSIWYG). Begitupula
dengan proses ‘update’, dapat dilakukan dengan cepat sehingga menjamin kemutakhiran
informasi yang ditampilkan.
Mengatur siklus hidup website
Banyak CMS memberikan fasilitas kepada para penggunanya untuk mengelola bagian atau
isi mana saja yang akan ditampilkan, masa/waktu penampilan dan lokasi penampilan di
website. Tak jarang sebelum ditampilkan, bagian atau isi yang dimaksud terlebih dahulu di-
review oleh editor sehingga dijamin kevaliditasannya.
Mendukung web templating dan standarisasi
Setiap halaman website yang dihasilkan berasal dari template yang telah terlebih dahulu
disediakan oleh CMS. Selain dapat menjaga konsistensi dari tampilan secara keseluruhan,
para penulis dan editor dapat berkonsentrasi secara penuh dalam melaksanakan tugasnya
menyediakan isi website. Bila isi telah tersedia, maka proses publikasi dapat berjalan
dengan mudah karena sudah ada template sebelumnya. Beberapa bagian dari website
biasanya telah ditetapkan sedemikian rupa sehingga tidak dapat diubah begitu saja. Hal ini
dilakukan untuk memberikan standarisasi kepada seluruh bagian dari website.
Personalisasi website

Sekali sebuah isi ditempatkan ke dalam CMS, isi tersebut dapat ditampilkan sesuai dengan
keinginan dan kebutuhan dari penggunanya. Terlebih lagi dengan kelebihan CMS yang
dapat memisahkan antara desain dan isi, menyebabkan proses personalisasi dapat berjalan
dengan mudah.
Sindikasi
Sindikasi memberikan kemungkinan kepada sebuah website untuk membagi isinya kepada
website-website yang lain. Format data yang didukung juga cukup variatif mulai dari rss, rdf,
xml hingga ‘backend scripting’. Sama halnya dengan personalisasi, sindikasi juga dapat
dilakukan dengan mudah karena isi dan desain telah dibuat terpisah.
Akuntabilitas
Oleh karena CMS mendukung alur kerja dan hak akses yang jelas kepada para
penggunanya, data/informasi yang disampaikan dapat dipertanggungjawabkan dengan
baik. Setiap penulis ataupun editor memiliki tugas masing-masing dengan hak akses yang
berbeda-beda pula. Dengan demikian setiap perubahan yang terjadi di website dapat
ditelusuri dan diperbaiki seperlunya dengan segera.
CMS pada prinsipnya dapat dipergunakan untuk berbagai macam keperluan dan dalam berbagai
kondisi, seperti untuk:
a) Mengelola website pribadi.
b) Mengelola website perusahaan/bisnis.
c) Portal atau website komunitas.
d) Galeri foto, dan lain sebagainya.
e) Forum.
f) Aplikasi E-Commerce.
g) Dan lain-lain.
Kekurangan CMS
1. Mengharuskan menggunakan source kode yang kadang membingungkan.

2. Ada beberapa fitur-fitur yang kurang terpakai, sehingga membuat jadi kurang efisien.
3. Security lebih rawan terutama yg opensource, karna banyak orang yang tahu tentang code
dan kelemahannya.
4. Template telah tersedia, sehingga kurang bias berekspresi.
Jenis-jenis cms (Content Management System)

Jenis-jenis dari CMS (Content Management System) adalah sebagai berikut :
1. WordPress
2. Joomla
3. Oscommerce
4. Drupal
5. Php Nuke
6. Mambo
Salah satu CMS yang menurut saya memberi kesempatan pengembangan interface WEB secara
lebih fleksibel (mudah) dan lebih complete (professional ) adalah JOOMLA. Joomla sangat praktis
digunakan, karena kita dengan sangat mudah mengatur content, module dan lain2 yang telah
disediakan. Tapi kita tidak terlalu bisa mengembangkan content management sendiri.
Ada juga yang bilang joomla sangat berat karena terlalu banyak fitur dan modul.Intinya joomla dan
mamboo sangat mudah dan praktis, rada berat, support dan tutorialnya banyak. Joomla sangat
bagus untuk situs-situs perusahaan atau lembaga.

Joomla juga mempunyai kelebihan-kelebihan secara umum yaitu:

Fleksibel
Dengan joomla, Kami dapat membantu anda membangun website yang sederhana sebagai platform
web awal anda, kemudian mengembangkannya lagi pada saat anda membutuhkannya. Fleksibilitas
ini sangat berguna jika anda ingin mengembangkan website anda di masa yang akan datang.
User Friendly
Kami menawarkan solusi, oleh karena itu sangat penting bagi kami untuk memastikan bahwa segala
fungsi yang kami bangun di website dapat digunakan dengan mudah oleh klien. Joomla
menawarkan interface yang user friendly dan intuitif, bahkan untuk pengguna yang tidak mempunyai
pengetahuan web dan html dapat dengan mudah mengupdate konten dan menggunakan semua
feature joomla
Open source dan dapat didistribusikan secara bebas

Prinsip open source adalah setiap orang dapat menggunakan, mengkopi, merubah dan menambah,
serta mendistribusikan secara bebas. Bagi anda yang menganut prinsip open source seperti kami,
anda akan mengerti bahwa open source sangatlah penting bukan hanya karena gratis, tapi lebih
karena mendorong usernya dan masyarakat secara general untuk berkarya dan menambah nilai
pada hasil karya itu sendiri.
Powerful
Joomla dapat diaplikasikan untuk semua jenis website, mulai dari corporate website sampai dengan
web e-commerse, serta community builder. Dengan joomla, website anda dapat menjadi lebih
powerful dan kaya akan fungsi interaktif seperti forum, rating system, search yang lebih optimal,
blog, chat, poling, newsletter, wiki, dll. Jika itu belum cukup masih banyak modul tambahan lain yang
ditambahkan ke website dengan mudah.
Joomlapun terus berkembang

Saat ini bisa dikatakan bahwa joomla adalah web cms opensource yang paling banyak digunakan
dan didukung oleh komunitas webdeveloper yang terus menerus menciptakan karyanya di bawah
bendera opensource. Begitu banyak aplikasi, modul, dan inovasi baru yang terus berkembang yang
dapat anda manfaatkan untuk website
Berikut ini adalah 9 langkah untuk membuat konten web/blog Anda agar disukai oleh pembaca dan
Google, antara lain:
1. Menulis Untuk Pembaca dan Optimasi Untuk Robot Search Engine
Pembaca blog Anda pastinya tidak ingin membaca artikel yang dibuat untuk tujuan SEO, mereka
ingin membaca informasi menarik dari blog Anda. Bahkan mesin pencari lebih mengutamakan
konten yang alami dibandikan dengan konten-konten yang dibuat untuk tujuan SEO semata.
Walaupun Anda menulis dengan cara alami tentunya artikel tersebut tetap bisa dioptimasi untuk
robot mesin pencari. Tetap fokus membuat artikel yang menjadi ‘darah dan daging’ blog Anda,
dan berikan bantuan pada robot mesin pencari agar menemukan konten Anda tersebut.
2. Lupakan Tentang Kepadatan Kata Kunci (Keywords Density)
Salah satu mitos SEO yang seringkali kita perhatikan dalam membuat sebuah konten artikel
adalah kepadatan kata kunci (keywords density). Beberapa orang mengatakan keywords density
yang baik adalah 3% – 5% dari total kata dalam artikel, beberapa orang lainnya
mengatakan keywords density sebaiknya berkisar antara 1% – 3% saja dari total kata dalam
artikel. Faktanya, Google tidak pernah menyebutkan tentang keywords density.
Tentunya kita perlu memasukkan kata kunci di dalam konten, atau menambahkan kata kunci
yang relevan dengan artikel yang kita buat. Namun kita harus menggunakannya secara

sewajarnya, biarkan konten Anda mengalir secara alami. Memaksakan keywords di tempat yang
tidak semestinya lebih sering merusak kualitas konten Anda, tidak akan membuatnya lebih baik
di mesin pencari.
3. Gunakan Kata Kunci Yang Relevan dan Sinonimnya
Anda pasti pernah mendengar tentang Latent Semantic Indexing (LSI). Mesin pencari selalu
menghubungkan sebuah kata kunci dengan kata kunci lainnya yang masih terkait. Karena itu,
variasikan kata kunci di dalam konten Anda. Dengan menggunakan variasi kata kunci, konten
Anda akan semakin relevan dengan topik yang Anda bahas tanpa harus memasukkan kata kunci
yang sama berkali-kali.
4. Buatlah Artikel Berkualitas Dengan Pembahasan Topik Yang Mendalam
Semua orang suka bicara to-the-point, langsung pada inti sari. Namun, jika kita membuat sebuah
konten yang menjelaskan secara mendalam tentang sebuah topik, tentunya ini akan semakin
baik. Saya pribadi tidak terlalu memperhatikan jumlah kata dalam setiap artikel yang saya buat,
tapi biasanya artikel yang panjang dan mendalam biasanya lebih baik posisinya di SERP Google
dibandingkan dengan artikel yang singkat dan dangkal.
Bukan berarti setiap artikel dengan jumlah kata yang banyak akan selalu menang di SERP mesin
pencari. Ini hanya sebagai gambaran bahwa kualitas sebuah konten itu sangat penting jika ingin
mendapatkan ranking yang baik di Google. Jangan pula memaksakan diri membuat artikel
panjang dengan bertele-tele, buatlah artikel tersebut sesuai dengan fakta dan sesuai dengan
pengetahuan Anda.
5. Gunakan Long Tail Keywords Pada Judul Konten
Judul yang panjang biasanya lebih menguntungkan di mesin pencari dibandingkan dengan
konten dengan judul yang terlalu singkat. Memang, judul dengan kata kunci yang panjang
biasanya pencarinya lebih sedikit dibandingkan dengan judul dengan kata kunci yang singkat.
Namun pada kenyataannya, konten dengan judul yang panjang biasanya lebih baik posisinya di
mesin pencari dibandingkan dengan konten yang judulnya singkat. Selain itu, konten dengan
judul yang panjang dan deskriptif biasanya konversinya lebih bagus.
6. Respon Audiens Anda Dengan Baik
Jika blog Anda punya audiens/ pembaca setia, maka Anda harus siap memberikan respon dan
menjawab komentar atau pertanyaan-pertanyaan mereka. Berikan jawaban yang mereka
butuhkan, tentunya Anda hanya akan menjawab komentar atau pertanyaan yang sesuai dengan
topik Anda. Kalau kita melihat dari sisi SEO, keterlibatan pembaca di dalam sebuah blog adalah
sebuah keuntungan.
7. Berikan Kemudahan Bagi Pembaca Anda Untuk Menyebarkan Konten Anda
Menyebarkan link konten Anda di media sosial akan memberikan trafik langsung dan dampak
SEO yang baik bagi keseluruhan blog Anda. Semakin banyak orang yang menyebarkan konten
Anda, hasilnya akan semakin baik. Karena itu, sediakan tombol media sosial di blog Anda agar
memudahkan pembaca Anda untuk menyebarkan artikel yang mereka sukai di blog Anda.
8. Gunakan Google+
Google+ akan semakin besar peranannya di dalam SEO. Selain itu, dengan menggunakan
Google+ Anda akan mendapatkan Author Rank dan terhubung dengan pengguna Google+
lainnya. Author rank adalah salah satu faktor dalam SEO, dan menurut saya peranannya akan
semakin besar untuk SEO di masa-masa yang akan datang. Jadi, sebaiknya Anda gunakan
Google+ dari sekarang, dan hubungkan blog Anda dengan akun Google+ Anda.
9. Gunakan Judul dan Deskripsi
Title tags Anda adalah hal pertama yang akan diperhatikan oleh Google ketika robot mereka
‘membaca’ blog Anda. Tentunya akan lebih baik lagi bila judul konten dilengkapi dengan
deskripsi dari konten Anda, karena pengguna mesin pencari akan melihat judul dan deskripsi
konten Anda di SERP Google. Gunakan judul dan deskripsi yang deskriptif dan mengajak
audiens untuk membuka situs Anda.

3. Industri Kreatif Komputer Dan Industri Kreatif
Gambar 1. Siklus dan Jenis Industri Kreatif

Sumber : http://www.slideshare.net/togar/industri-kreatif-indonesia
1. Komputer Dan Industri Kreatif

Komputer Industri kreatif adalah industri yang berasal dari pemanfaatan kreatifitas, ketrampilan serta
bakat individu untuk menciptakan kesejahteraan serta lapangan pekerjaan dengan menghasilkan
dan mengeksploitasi daya kreasi dan daya cipta industri tersebut.
Sebelum adanya komputer, kondisi masyarakat saat itu belum begitu berkembang. Komputer
hanyalah sebagai media hiburan, penyimpanan data, atau menyelesaikan aktivitas khusus
semacam desain. Saat itu, kita sudah merasakan manfaat komputer, tapi dengan berkembangya IT,
Industri kreatif berbasis IT merupakan industri baru yang berkembang seiring dengan
perkembangan komputer. Kemampuan komputer semakin hari semakin baik, dari sisi kecepatan
maupun sisi kapasitas penyimpanan. Peningkatan ini memberikan kesempatan serta kemudahan
kepada pengguna untuk memanfaatkan komputer sebagai alat bantu . Hampir semua bidang
industri di fasilitasi dengan teknologi informasi sehingga muncul industri kreatif dengan
menggunakan komputer yang akan mempermudah industri tersebut. Kenyataan ini telah membuka
lapangan kerja baru di bidang industri dengan munculnya industri kreatif berbasis IT. Di bidang seni
muncul industri kreatif seperti animasi dan desain yang dibangun dengan menggunakan fasilitas
komputer (IT). Bidang seni yang difasilitasi komputer hanya membutuhkan pada kreasi intelektual
seperti seni, film, permainan, desain, iklan, dan sebagainya.
2. Revolusi Komputer Dan Industri Kreatif.

Industri Kreatif, perkembangan di setiap bidang kehidupan semakin dinamis. Mulai dari ilmu
pengetahuan, teknologi, sampai bidang industri pun terus mengalami perubahan yang cepat. Bila
jaman dahulu kita harus ke perpustakaan untuk menggali pengetahuan, sekarang ini pengetahuan
dapat didapat dengan mudah melalui sarana digital ataupun internet. Untuk teknologi sudah dapat
dilihat banyaknya kecanggihan yang dibuat manusia untuk memudahkan segala pekerjaan, seperti
komputer, kamera, sampai robot untuk pembersih. Dan untuk bidang industri Beberapa sektor
industri yang tergolong dalam industri kreatif antara lain: periklanan, film/video dan fotografi, musik,
arsitektur, pasar seni dan barang antik, kerajinan (aksesori, emas, kayu, kaca), desain (desain
grafis, desain produk. logo), desain fashion (kreasi desain pakaian, aksesori, produksi pakaian),

permainan interaktif (proses produksi maupun distribusi game online atau video yang bersifat
edukatif), seni pertunjukkan (pertunjukan tarian tradisional, kontemporer, drama, musik tradisional,
teater, opera), penerbitan dan percetakan (penulisan atau penerbitan buku, majalah, koran, tabloid,
portal, penjualan mesin percetakan, alat sablon manual / sablon digital), layanan komputer dan
piranti lunak (pengembangan software, desain arsitektur peranti lunak, web design), televisi dan
radio (produksi dan penyiaran serta transmisi televisi dan radio), serta riset dan pengembangan
(inovasi baru, metode baru, atau teknologi baru yang bisa menjadi solusi) dengan bidang mereka.
2.1. Revolusi Industri

Perkembangan komputer tidak terlepas dari Revolusi Industri. Dengan adanya Revolusi Industri.
Kehidupan manusia berubah dari masyarakat petani menjadi masyarakat industri. Masyarakat
seakan terbangun dari cara berpikir lama sulit berkembang karena terbentur keterbatasan teknologi
menjadi haus dan berlomba-lomba menguasai teknologi terbaru.
2.2. Revolusi Komputer.

Seiring dengan revolusi industri yang melahirkan teknologi baru yang tiada henti, komputerpun
mengalami revolusi, dari yang bentuknya sebesar rumah menjadi sebesar buku. Revolusi komputer
belum berhenti seiring dengan terus ditemukannya teknologi baru untuk membuat komputer
semakin kecil, ringan, cepat dan murah. Masyarakat industri mulai berubah menjadi masyarakat
informasi. Segala sesuatu yang analog berubah menjadi digital. Kemunculan Internet merubah pola
hidup dan kerja yang individu/lokal menjadi global/mendunia karena informasi bisa didapat dan
diberi ke seluruh dunia.
Gambar 1. Revolusi Komputer dalam Industri Kreatif

Sumber : http://hilfans.staff.telkomuniversity.ac.id/potensi-industri-kreatif/
3. Aplikasi Komputer Dalam Industri Kreatif Antara Lain :

Aplikasi Komputer Dalam Industri Kreatif merupakan penemuan yang sangat penting dan
mendasar. Komputer tidak hanya membantu melaksanakan pekerjaan akan tetapi mengubah cara
kerja dan sekaligus menimbulkan tantangan dan permasalahan baru dalam lingkungan. Adapun
bidang-bidang Indsutri Kreatif dalam IT adalah sebagai berikut:
a) Periklanan: kegiatan kreatif yang berkaitan dengan kreasi dan produksi iklan, antara lain:
riset pasar, perencanaan komunikasi iklan, iklan luar ruang, produksi material iklan,
promosi, kampanye relasi publik, tampilan iklan di media cetak dan elektronik.
b) Pasar seni dan barang antik: kegiatan kreatif yang berkaitan dengan kreasi dan
perdagangan, pekerjaan, produk antik dan hiasan melalui lelang, galeri, toko, pasar
swalayan, dan internet.

c) Kerajinan : Kegiatan kreatif yang berkaitan dengan kreasi, produksi dan distribusi produk
yang dibuat dihasilkan oleh tenaga pengrajin yang berawal dari desain awal sampai dengan
proses penyelesaian produknya, antara lain meliputi barang kerajinan yang terbuat dari:
batu berharga, serat alam maupun buatan, kulit, rotan, bambu, kayu, logam (emas, perak,
tembaga, perunggu, besi) kayu, kaca, porselin, kain, marmer, tanah liat, dan kapur. Produk
kerajinan pada umumnya hanya diproduksi dalam jumlah yang relatif kecil (bukan produksi
massal).
d) Desain: kegiatan kreatif yang terkait dengan kreasi desain grafis, produk, kreasi desain
pakaian, desain alas kaki, dan desain aksesoris mode lainnya, produksi pakaian mode dan
aksesorisnya, industri, pengemasan, dan konsultasi identitas perusahaan.
e) Video, Film dan Fotografi: kegiatan kreatif yang terkait dengan kreasi produksi Video, film,
dan jasa fotografi, serta distribusi rekaman video,film. Termasuk didalamnya penulisan
skrip, dubbing film, sinematografi, sinetron. Semua efek-efek di dunia akting , animasi, dan
penyotingan adegan film semua di rekam dengan perangkat elektronik yang dihubungkan
dengan komputer. Animasinya juga di kembangkan mempergunakan animasi yang dibuat
dengan aplikasi komputer. Sebagai contoh film-film Hollywood berjudul TITANIC itu
sebenarnya tambahan animasi untuk menggambarkan kapal raksasa yang pecah dan
tenggelam, sehingga tampak menjadi seolah-olah mirip dengan kejadian nyata.
f) Permainan: kegiatan kreatif yang berkaitan dengan kreasi, produksi, dan distribusi
permainan komputer dan video yang bersifat hiburan, ketangkasan, dan edukasi.
g) Musik: kegiatan kreatif yang berkaitan dengan kreasi, produksi, distribusi, dan ritel rekaman
suara, hak cipta rekaman, promosi musik, penulis lirik, pencipta lagu atau musik,
pertunjukan musik, penyanyi, dan komposisi musik.
h) Seni Pertunjukan: kegiatan kreatif yang berkaitan dengan usaha yang berkaitan dengan
pengembangan konten, produksi pertunjukan, pertunjukan balet, tarian tradisional, tarian
kontemporer, drama, musik tradisional, musik teater, termasuk tur musik etnik, desain dan
pembuatan busana pertunjukan, tata panggung, dan tata pencahayaan.
i) Penerbitan & Percetakan : kegiatan kreatif yang terkait dengan dengan penulisan konten
dan penerbitan buku, jurnal, koran, majalah, tabloid, dan konten digital serta kegiatan kantor
berita. Percetakan koran, majalah , buku-buku, semua dikerjakan dengan mesin yang di
operasikan oleh komputer sehingga dalam waktu singkat bisa mencetak buku atau majalah
atau koran dalam jumlah ratusan bahkan jutaan exemplar, bisa menghemat waktu dan
biaya, seandainya dikerjakan dengan manual oleh manusia, butuh berapa ribu orang untuk
mengetik di kertas koran dan perlu berapa lama untuk menyelesaikan
j) Televisi & radio: kegiatan kreatif yang berkaitan dengan usaha kreasi, produksi penyiaran.
k) Telekomunikasi Seluler : Kehadiran telepon genggam dulu hanya sebatas menggantikan
telepon tetap (fixed line) seperti telepon rumah atau kantor saja. Kini telepon seluler sudah
menjadi gadget multifungsi yang wajib dibawa kemanapun. Bukan hanya komunikasi
dengan suara atau teks saja, kini kita bisa dengan mudah saling mengirim gambar atau
data dalam waktu singkat menggunakan piranti ini.Perkembangan telekomunikasi seluler
memang sangat pesat. Teknologi yang digunakan pun berubah dengan cepat. Terutama
teknologi akses data yang kini sudah melesat dengan 3G atauthird generation. Sebentar
lagi teknologi ini akan digantikan dengan generasi keempat atau 4G. Kecanggihan teknologi
ini membuat para pengguna semakin dimanjakan dengan kecepatan akses yang
didapatkan. Selain teknologi, faktor penting yang mendongkrak perkembangan
telekomunikasi seluler adalah harga yang semakin murah. Harga handphone menjadi
semakin terjangkau setelah ada invasi produk buatan negeri tira Cina. Perang harga terjadi
juga antar operator telekomunikasi seluler. Persaingan ketat memperebutkan market
membuat para operator berani menurunkan harga dengan tetap menjaga kualitas
pelayanan. Harga tarif komunikasi yang semakin murah membuat masyarakat semakin

mudah berkomunikasi tanpa khawatir akan menghabiskan banyak biaya. Kemudahan

karena harga tarif yang murah telah memicu tingginya grafik komunikasi seluler di
Indonesia. Hal ini membawa dampak positif bagi perkembangan ekonomi.
l) Bidang Pendidikan: Dengan adanya komputer mempermudah bagi pegawai administrasi
sekolah untuk membuat kurikulum pengajaran, jadwal pelajaran sekolah, membuat daftar
nama siswa , membuat daftar nilai siswa , membuat absen siswa , membuat perhitungan
gaji pegawai dan membuat perencanaan pengajaran bagi guru-guru sekolah. Mengakses
Informasi Pendidikan lewat Internet. Seiring perkembangan jaman Internet telah
berkembang ke sekolah-sekolah setingkat kecamatan,sehingga akses informasi pun
semakin mudah diperoleh untuk kemajuan pendidikan tiap-tiap sekolah.
m) Bidang Kesehatan : mempermudah dokter dan perawat dalam memonitor kesehatan
pasien monitor detak jantung pasien lewat monitor komputer, aliran darah , memeriksa
organ dalam pasien dengan sinar x. Dengan teknologi modern bisa memonitor, bahkan
menggantikan fungsi organ dalam seperti jantung, paru-paru dan ginjal. itu merupakan
teknologi kesehatan yang digabungkan dengan teknologi informasi dan komputer.
n) Perpustakaan Elektronik : Kemajuan-kemajuan dalam teknik pencarian infomasi, telah
memungkinkan dilakukannya pencarian kembali informasi dalam waktu yang singkat. pada
umumnya perpustakaan masih berisi buku-buku ataupun informasi di atas media cetak
lainnya
o) Robot Dalam Industri Kreatif : Pada era industrialisasi yang serba modern ini, semua
kegiatan yang berhubungan dengan manusia telah beralih secara bertahap kearah yang
modern. Transformasi tersebut bisa dilihal dari perkembangan teknologi yang semakin
cepat dan setiap pencapain suatu kegiatan ditentukan oleh teknologi terbaru. Adapun
contoh perkembangan teknologi yaitu perkembangan teknologi Robot. Penggunaan robot
saat ini sudah mencakup seluruh sendi kehidupan manusia, baik dalam industri maupun
dalam kegiatan sehari-hari. Mesin robot yang semakin pesat perkembangannya pada
dasarnya membantu manusia dalam beraktifitas sehari-hari. Penggunaan robot dapat
membantu kegiatan atau pekerjaan manusia agar efisien dalam waktu penyelesaian, serta
mengurangi tingkat resiko kecelakaan kerja. Beberapa pekerjaan manusia yang sering
menggunakan bantuan mesin robot masuk kategori pekerjaan yang sukar, berbahaya dan
membosankan karena membutuhkan tingkat ketelitian yang tingg. Saat ini, robot telah
digunakan sebagai mesin yang memiliki otomatisasi tinggi, mempunyai peranan yang
sangat penting bagi manusia untuk digunakan dalam pekerjaan yang dirasa sangat penting.
Maka dari itu, banyak perusahaan menciptakan serta menggunakan robot dalam segala hal.
Beberapa robot diciptakan dengan berbagai spesifikasi berdasarkan kebutuhan. Kebutuhan
tersebut bisa meliputi kebutuhan rumah tangga, industri, militer, pertanian, kelautan dll.
Walaupun begitu, robot itu sendiri tetap saja masih membutuhkan interaksi manusia dalam
operasinya. Dari hal tersebut, maka dapat dikatakan perkembangan robot semakin tahun
mulai berkembang pesat. Sebagai buktinya, beberapa contoh kasus manfaat dari
penggunaan robot seperti pada industri dan juga digunakan untuk keperluan rumah tangga.
p) Software : Software Disebut juga dengan perangkat lunak, merupakan kumpulan beberapa
perintah yang dieksekusi oleh mesin komputer dalam menjalankan pekerjaannya. perangkat
lunak ini merupakan catatan bagi mesin komputer untuk menyimpan perintah, maupun
dokumen serta arsip lainnya.
Merupakan data elektronik yang disimpan sedemikian rupa oleh komputer itu sendiri, data
yang disimpan ini dapat berupa program atau instruksi yang akan dijalankan oleh perintah,
maupun catatan-catatan yang diperlukan oleh komputer untuk menjalankan perintah yang
dijalankannya.
Untuk mencapai keinginannya tersebut dirancanglah suatu susunan logika, logika yang
disusun ini diolah melalui perangkat lunak, yang disebut juga dengan program beserta data-

data yang diolahnya. Pengeloahan pada software ini melibatkan beberapa hal, diantaranya
adalah sistem operasi, program, dan data. Software ini mengatur sedemikian rupa sehingga
logika yang ada dapat dimengerti oleh mesin computer.
Sekarang ini berkembang berbagai macam software yang digunakan untuk mempermudah
kegiatan hidup manusia.
q. Antivirus : adalah sebuah jenis perangkat lunak yang digunakan untuk mendeteksi dan
menghapus virus komputer dari sistem komputer. Disebut juga Virus Protection Software.
Aplikasi ini dapat menentukan apakah sebuah sistem komputer telah terinfeksi dengan
sebuah virus atau tidak. Umumnya, perangkat lunak ini berjalan di latar belakang
(background) dan melakukan pemindaian terhadap semua berkas yang diakses (dibuka,
dimodifikasi, atau ketika disimpan).
4. Dampak Positif Dan Negative Komputer Pada Industri Kreatif

a. Dampak Positif
a) komunikasi yang lebih baik
b) transportasi yang lebih cepat dan lebih aman
c) penyelesaian pekerjaan yang lebih cepat d
d) efisiensi dalam penggunaan tenaga kerja
b. Dampak Negatif
Munculnya ketakutan masyarakat bahwa manusia akan menjadi budak mesin dan terancamnya
penggantian tenaga manusia dengan mesin.

Nomor Dokumnen :
Revisi : 00
SATUAN ACARA PERKULIAHAN Tanggal Efektif : 15 Nopember 2016
(SAP) Halaman : 1 dari 5
MATA KULIAH / SKS : Pemrograman Web I / 2

PROGRAM STUDI : Sistem Informasi
JENJANG PROGRAM : STRATA 1 (S-1)
PRASYARAT : -
TUJUAN INSTRUKSIONAL UMUM : Setelah mengikuti mata kuliah ini mahasiswa diharapkan mampu membangun aplikasi pengolah data dengan menggunakan PHP dan Database
MySQL dengan menggunakan Tools yang ada, Kreativitas, Keterampilan coding untuk aplikasi website
Mgg Tujuan Tujuan Instruksional Kegiatan Instruksional

No. Pokok Bahasan Materi Media Evaluasi Sumber
Ke- Instruksional Umum Khusus Dosen Mahasiswa
1 2 3 4 5 6 7 8 9 10 1
1 1 Pendahuluan Memahami - Mampu memahami Ruang Lingkup Mata Kuliah: • Menjelaskan, • Mendengarkan, Laptop, Tanya Jawab 1,3
Pengenalan interface dari HTML secara umum. • Pengenalan HTML • Diskusi, • Memperhatikan Infocus
Website editor, Tools, - Mampu mengetahui • Pengenalan Server • Memberikan • Mencatat,
istilah-istilah dan tools dan windows XAMPP contoh, • Berdiskusi,
webserver, yang terdapat pada • PHP, • Mengadakan
localhost tentang HTML Editor - Program Sederhana evaluasi
pemrograman Web - Mampu memahami
dan menggunakan
server XAMPP
2 2 Dasar-dasar Web - Konsep dasar - Mahasiswa dapat • HTML • Menjelaskan, Memperhatikan, Laptop, Tanya Jawab, 1,3
dan HTML Web menerangkan konsep • Localhost • Diskusi, Mencatat Infocus Latihan
- Arsitektur Web dasar web dan • Browser • Memberikan
TIU: Mahasiswa - HTTP arsitektur web. • Server contoh,
dapat mengetahui - Client Side - Mahasiswa dapat - Tugas men-
dan memahami Programming menyebut dan download dan
dasar-dasar Web - Server Side menerangkan menginstalasi salah
dan HTML Programming pengertian HTTP dan satu web server
- Web Server penggunaannya. software dan
Software - Mahasiswa dapat contoh program
(PHPTriad, menerangkan client
XAMPP) side dan server side
- Konsep HTML programming dan
fungsinya.
- Mahasiswa dapat
menyebutkan contoh
Nomor Dokumnen :
Revisi : 00

1 2 3 4 5 6 7 8 9 10 1
web server dan
melakukan instalasi.
- Mahasiswa dapat
menerangkan definisi
HTML.
3 3 HTML Lanjutan FORM dan FRAME • Mahasiswa dapat • Basic text formatting Menjelaskan Memperhatikan, Laptop, Tanya Jawab, 1,3,4
membuat contoh • Identifying resources Mencatat Infocus Latihan
sederhana • Using graphic images -
menggunakan format basics
teks dasar, URL, link, • Background images
image. • HTML Intermediate
• Mahasiswa dapat • Formatting with Tables,
membuat tabel, Frames
frame dan form. • Collecting information
from the user using
Forms
4 4 PHP Sturktur coding PHP Mahasiswa mampu Dasar PHP Menjelaskan Memperhatikan, Laptop, Tanya Jawab, 1,3,4
memahami struktur - Variabel PHP Mencatat Infocus Latihan
program dasar PHP dan - Operator
menghubungkannya
dengan HTML
5 5 PHP Lanjutan Mahasiswa - Mahasiswa memahami - IF then.. Menjelaskan - Memperhatikan, Laptop, Tanya Jawab, 1
mengetahui konsep Struktur - Switch Case Mencatat Infocus Latihan
Struktur Kontrol Repetisi dan decision - Do/Loop While/Until - Mengerjakan
dan Pengulangan - Exit Keyword di dalam Evaluasi
PHP Repetition - Latihan
- - Tugas membuat
web sederhana
6 6 Cascading Style Mahasiswa dapat • Mahasiswa dapat • Konsep dasar CSS Menjelaskan Memperhatikan, Laptop, Tanya Jawab. 2,3,4
Sheet (CSS) mengetahui dan menerangkan definisi • CSS property Mencatat Infocus Latihan
memahami CSS dan kegunaan CSS Mengerjakan Tugas
- Mahasiswa dapat membuat desain layout
Nomor Dokumnen :
Revisi : 00

1 2 3 4 5 6 7 8 9 10 1
menerangkan CSS
property dan
menggunakannya.
7 7 JavaScript Mahasiswa dapat Mahasiswa dapat Object Oriented Programming • Menjelaskan • Latihan
mengetahui dan menerangkan konsep Language (OOPL),Data types: dan ceramah • Tugas membuat
memahami OOPL, Object, fungsi, Literals, Operators, program
JavaScript parameter,event handling Statements, Object di sederhana
pada JavaScript JavaScript dan HTML, Classes (menggunakan
dan Objects, Properties form)
Methods Events, Fungsi,
parameter, Event Handling
8 8 UJIAN TENGAH SEMESTER

9 9 Session dan Mahasiswa dapat Mahasiswa dapat • Konsep Session dan Menjelaskan Memperhatikan, Laptop, Melakukan 2,3,4
Cookis mengetahui dan menerangkan definisi dan Cookis beserta contoh Mencatat Infocus analisa
memahami Session session dan cookies dapat • Manfaat dari session dan program terhadap
dan Cookis mengaplikasikan dalam cookis sederhana aplikasi yang
pemrograman web diberikan
dosen
10 10, Database MySQL Mahasiswa Mahasiswa dapat - Konsep Basis Data Menjelaskan - Memperhatikan, Laptop, Tanya Jawab, 1,3
11 mengetahui dan menerangkan pembuatan - Server Basis Data dan Mencatat Infocus Latihan
memahami basis data dengan MySQL Installasi - Tugas membangun
Perintah Dasar - MySQL database dari
MySql - Perintah DDL, DML dan MySQL
DCL
-
11 12 Koneksi Microsoft Mahasiswa Mahasiswa dapat - ODBC Menjelaskan Memperhatikan, Laptop, Menganalisa 1,3
Access dengan mengetahui dan menerangkan pembuatan - Database Micrososft Mencatat Infocus manipulasi file
PHP memahami konsep basis data dengan Access Tugas membuat web yang
pengaksesan Microsoft Access serta - Membuat Database dan sederhana yang sudah digunakan
Nomor Dokumnen :
Revisi : 00

1 2 3 4 5 6 7 8 9 10 1
database Microsoft pengaksesannya dengan Tabel dari Microsoft menggunakan database pada project
Access dalam PHP serta membuat Access Access
pemrograman web contoh aplikasi sederhana - Koneksi ke Basis Data
dengan PHP yang menggunakan dengan PHP
database.
12 13 Koneksi MySQL Mahasiswa Mahasiswa dapat - Internal koneksi dan Menjelaskan - Memperhatikan, Laptop, Tanya Jawab, 1,3,4
dengan PHP mengetahui dan menerangkan pembuatan external koneksi dengan Mencatat Infocus Latihan
memahami konsep basis data dengan MySQL php Koneksi Database - Tugas membuat
pengaksesan serta pengaksesannya MYSQL dengan PHP web sederhana yang
database MySQL dengan PHP serta - Koneksi ke Basis Data sudah
dalam membuat contoh aplikasi dengan PHP menggunakan
pemrograman web sederhana yang database
dengan PHP menggunakan database.
13 14 Desain Layout Mahasiswa Mahasiswa dapat - Menu utama (header, Menjelaskan Memperhatikan, Laptop, Tanya Jawab, 1,3,4
Website mengetahui dan menerangkan pembuatan footer dan body web) Mencatat Infocus Latihan
memahami konsep tampilan umum standard - User (Admin dan User
desain sebuah sebuah website yang Umum
website yang dilengkapi dengan link dan - Link dan Target
dinamis juga target serta membuat -
menu untuk admin dan
user umum
14 15 Content Mahasiswa dapat - Mahasiswa dapat - Pengertian CMS Menjelaskan - Memperhatikan, Laptop, Tanya Jawab, 1,3,4
Management mengetahui dan menerangkan - CMS Software (MAMBO, Mencatat Infocus Latihan
System (CMS) memahami pengertian CMS OpenSource CMS, - Tugas membuat
penggunaan CMS - Mahasiswa dapat Worldcircle CMS, web program
menyebutkan dan LIMBO, JOOMLA, lengkap yang
menerangkan CMS PHPNuke) termasuk program
software - untuk admin
15 16 UJIAN AKHIR SEMESTER
Nomor Dokumnen :
Revisi : 00
Reference :
1. Adhi Rachdian & AndySikumbang , Mastering CMS dengan Mambo / Joomla, PT. Elex Media Komputindo, Jakarta, 2005
2. Bradley, N., The XML Companion 2/e, Addison-Wesley, 2000
3. Bradley, N., The XML Companion, Addison-Wesley, 2000
4. Deitel, H.M. et.al., XML How To Program 2/e, Prentice Hall, 2002
5. Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002
6. Hall, M.,Core Web Programming, Prentice Hall, 1998
7. Staab, Steffen, Semantic Web and Peer to Peer, Springer-Verlag, Berlin, 2006
Medan, Nopember 2016
Tim Pembuat : Disetujui Oleh : Diketahui Oleh

Ketua Program Studi Teknik Informatika, Dekan,
1. Tonni Limbong, S.Kom,M.Kom
Andy Paul Harianja, ST, M.Kom Drs. Lamhot Sitorus, M.Kom

Diktat Pemrograman Web I

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Diktat Pemrograman Web I

Diunggah oleh

Hak Cipta:

Format Tersedia

DIKTAT

Tonni Limbong, S.Kom.,M.Kom

Program Studi Sistem Informasi

Medan, September 2016

Tonni Limbong, S.Kom.,M.Kom

Copy Right : Tonni Limbong, S.Kom,M.Kom i

Gambar 1.1. Standar Web Architecture

Gambar 1.2. Dynamic Web Architecture

Beberapa Web Sever yang banyak digunakan di internet antara lain :

b. Server Side Scripting

Beberapa contoh Server Side Scripting (Programming) :

Oleh : Tonni Limbong, S.Kom,M.Kom 1

c. Instalasi Apache, PHP dan MySQL dengan XAMPP

e. Proses Instalasi XAMPP

Gambar 1.3. File installer XAMPP

Oleh : Tonni Limbong, S.Kom,M.Kom 2

Gambar 1.4. Window Instalasi XAMPP

Gambar 1.5. Folder tujuan instalasi XAMPP

Gambar 1.6. Window pilihan XAMPP

5. Proses instalasi dimulai.

Oleh : Tonni Limbong, S.Kom,M.Kom 3

Gambar 1.7. Proses instalasi dimulai

6. Proses instalasi selesai. Klik Finish untuk menutup proses instalasi.

Gambar 1.8. Proses instalasi selesai

Gambar 1.9. Konfirmasi Instalasi Berhasil

Oleh : Tonni Limbong, S.Kom,M.Kom 4

Gambar 1.10. XAMPP Control Panel

f. Test Instalasi XAMPP di Browser

Gambar 1.11. Tampilan XAMPP di Browser

Gambar 1.12. Tampilan XAMPP di Browser

Oleh : Tonni Limbong, S.Kom,M.Kom 5

Tabel 21. Elemen Dasar Bahasa HTML

Penulisan elemen dasar HTML adalah sebagai berikut :

Oleh : Tonni Limbong, S.Kom,M.Kom 6

Perhatikan dialog berikut:

Nama file, selalu diakhir

Pastikan Type nya= All

Gambar 2.1 . Penyimpanan File html

Gambar 2.2 . Memanggil file html dari browser

Hasilnya seperti Berikut :

Gambar 2.3 . Output dari file html setelah jalan di browser

2. Format Font & Paragraph

Oleh : Tonni Limbong, S.Kom,M.Kom 7

Tabel 2.2. Property dari Font dan Paragraph

Gambar 2.4. Source Code coba2.html

Gambar 2.5. Output gambar 1.4( coba2.html)

Oleh : Tonni Limbong, S.Kom,M.Kom 8

Bentuk Source codenya :

Gambar 2.6. Source code( coba2.html)

Gambar 2.7. Output Gambar 1.6 ( coba2.html)

a. Pengaturan FONT dan Garis secara spesifik

Oleh : Tonni Limbong, S.Kom,M.Kom 9

Gambar 2.8. Source Code coba3.html

Gambar 2.9. Output gambar 1.8 (coba3.html)

b. Pengaturan Letak Paragraf / Text / Gambar secara spesifik

Tabel 2.4 Line Position Paragaraph

Tabel 2.5 Line Pembuatan Warna Background

Oleh : Tonni Limbong, S.Kom,M.Kom 10

Gambar 2.10. Source Code coba4.html

Gambar 2.11. Output gambar 1.10 (coba4.html)

Gambar 2.12. Sourcode coba5.html

Oleh : Tonni Limbong, S.Kom,M.Kom 11

Gambar 2.13. Output Gambar 1.12 (coba5.html)