Anda di halaman 1dari 68

HTML, CSS, JavaScript, PHP___________________________________________________________

MODUL PEMROGRAMAN WEB


PPPG KESENIAN YOGYAKARTA

Rusfansyah

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah


HTML, CSS, JavaScript, PHP___________________________________________________________

DAFTAR ISI

HTML (HYPERTEXT MARKUP LANGUAGE)....................................................................1


1. ELEMEN DASAR HTML ............................................................................................1
2. <BR>..............................................................................................................................1
3. <P></P> .........................................................................................................................1
4. <HR> .............................................................................................................................2
5. <FONT></FONT> ........................................................................................................3
6. <H1></H1> …. <H6></H6>.........................................................................................5
7. <B></B> atau <STRONG></STRONG> .....................................................................6
8. <I></I> atau <EM></EM> ............................................................................................6
9. <U></U>........................................................................................................................7
10. <IMG> .......................................................................................................................7
11. <TABLE></TABLE>................................................................................................8
12. <A></A>....................................................................................................................9
13. <DIV></DIV> .........................................................................................................11
14. <SPAN></SPAN> ...................................................................................................12
15. <OL></OL>.............................................................................................................13
16. <UL></UL>.............................................................................................................13
17. <FRAMESET></FRAMESET>..............................................................................14
18. <FORM></FORM>.................................................................................................15
19. ELEMENT PADA FORM.......................................................................................16
CSS (CASCADING STYLE SHEET) ....................................................................................23
1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE.........................................23
2. PENULISAN PADA HEAD .......................................................................................23
3. PENULISAN DENGAN CLASS ................................................................................24
4. PENULISAN DENGAN ID ........................................................................................25
JAVASCRIPT..........................................................................................................................26
1. PENULISAN PADA TAG ..........................................................................................26
2. PENULISAN DENGAN TAG <SCRIPT> .................................................................27
3. TIPE DATA .................................................................................................................27
4. VARIABEL .................................................................................................................27
5. OPERATOR, IF DAN PERULANGAN .....................................................................28
PHP (Hypertext Preprocessor).................................................................................................31
1. DASAR PENULISAN PHP ........................................................................................31
2. VARIABEL .................................................................................................................31
3. TANDA SAMBUNG ..................................................................................................32
4. OPERATOR MATEMATIKA ....................................................................................32
5. OPERATOR PERSAMAAN.......................................................................................33
6. OPERASI PERBANDINGAN ....................................................................................34
7. OPERATOR LOGIKA ................................................................................................34
8. IF ..................................................................................................................................34
9. PERULANGAN ..........................................................................................................36
10. ARRAY....................................................................................................................37
11. PHP DENGAN FORM ............................................................................................38
12. MEMBUAT DATABASE DENGAN NAVICAT..................................................40
13. MEMBUAT TABEL ...............................................................................................41
14. MEMBUAT USER DATABASE BARU ...............................................................42
15. KONEKSI KE SERVER MYSQL ..........................................................................43
16. KONEKSI KE DATABASE MYSQL ....................................................................44

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah


HTML, CSS, JavaScript, PHP___________________________________________________________

17. MENUTUP KONEKSI............................................................................................44


18. MEMBERI PERINTAH KE DATABASE DENGAN QUERY.............................44
19. SKRIP MENAMPILKAN DATA ...........................................................................46
20. SKRIP MENAMBAHKAN DATA DENGAN FORM ..........................................49
21. SKRIP UPDATE DATA DENGAN FORM ...........................................................50
22. SKRIP HAPUS DATA ............................................................................................53
23. MENAMPILKAN DATA PER HALAMAN..........................................................55
LAMPIRAN.............................................................................................................................57
1. SETTING HOME SITE+ 5.5 ......................................................................................57
2. XAMPP........................................................................................................................61
3. NAVICAT 2004...........................................................................................................65

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah


HTML, CSS, JavaScript, PHP___________________________________________________________

BAB I.
HTML (HYPERTEXT MARKUP LANGUAGE)

1. ELEMEN DASAR HTML

2. <BR>
Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan
diabaikan.

Contoh:

3. <P></P>
Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti
menggunakan 2 kali <br>

Atribut:
ƒ align

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 1


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh:

4. <HR>
Horizontal Line (Garis horizontal)

Atribut:
ƒ Width
ƒ Align

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 2


HTML, CSS, JavaScript, PHP___________________________________________________________

5. <FONT></FONT>
Tag ini dapat digunakan untuk mengatur ukuran, warna dan jenis huruf

Atribut:
ƒ Size
ƒ Color
ƒ Face

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 3


HTML, CSS, JavaScript, PHP___________________________________________________________

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 4


HTML, CSS, JavaScript, PHP___________________________________________________________

6. <H1></H1> …. <H6></H6>
Untuk membuat heading yang memberikan baris baru

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 5


HTML, CSS, JavaScript, PHP___________________________________________________________

7. <B></B> atau <STRONG></STRONG>


Membuat huruf tebal.

Contoh:

8. <I></I> atau <EM></EM>


Membuat huruf miring

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 6


HTML, CSS, JavaScript, PHP___________________________________________________________

9. <U></U>
Membuat huruf dengan garis bawah

Contoh:

10. <IMG>
Menampilkan gambar

Atribut:
ƒ src (letak file gambar)
ƒ align (perataan gambar)
ƒ width (lebar gambar dlm persen atau pixel)
ƒ height (tinggi gambar dlm persen atau pixel)
ƒ alt (keterangan gambar)

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 7


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh:

11. <TABLE></TABLE>
Membuat table

Atribut pada <table></table>


ƒ border
ƒ align (perataan table)
ƒ width
ƒ height
ƒ bgcolor

Atribut pada <tr></tr>


ƒ align
ƒ bgcolor
ƒ width
ƒ height

Atribut pada <td></td>


ƒ align
ƒ bgcolor
ƒ width
ƒ height

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 8


HTML, CSS, JavaScript, PHP___________________________________________________________

12. <A></A>
Untuk membuat link

Atribut:
ƒ href
ƒ name

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 9


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh Anchor:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 10


HTML, CSS, JavaScript, PHP___________________________________________________________

1. Klik link Ke atas 2. Maka akan tampil bagian atas

13. <DIV></DIV>
Membuat blok paragraph dengan baris baru pada akhir paragraf (pengganti
<p>, digunakan pada css)

Atribut:
ƒ align (perataan paragraf) nilai left, right, center, justify

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 11


HTML, CSS, JavaScript, PHP___________________________________________________________

14. <SPAN></SPAN>
Digunakan pada css untuk memberikan format pada teks yang diblok, tanpa
membuat baris baru

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 12


HTML, CSS, JavaScript, PHP___________________________________________________________

15. <OL></OL>
Order list (biasa dikenal dengan numbering)

Atribut:
ƒ Type (jenis numbering), nilai: 1, A, a, I, i

Contoh

16. <UL></UL>
Unorder List, biasa kita kenal dengan Bullet

Atribut:
ƒ type (jenis bullet), nilai: disc, square, circle

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 13


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh:

17. <FRAMESET></FRAMESET>
Membagi satu halaman web menjadi beberapa halaman, halaman yang dibagi
masih bisa dibagi lagi.

Contoh:
- buat file dengan nama framset.html

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 14


HTML, CSS, JavaScript, PHP___________________________________________________________

- buat file dengan nama halaman1.html

- buat file dengan nama halaman2.html

jalankan framset.html

18. <FORM></FORM>
Digunakan sebagai blok dari elemen-elemen form seperti text,texarea.

Atribut:
- name (nama form)
- action (file tujuan dimana form dikirim, digunakan pada server side)
- method (metode pengiriman, digunakan pada server side) nilai post, get

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 15


HTML, CSS, JavaScript, PHP___________________________________________________________

19. ELEMENT PADA FORM

<INPUT>
Tag ini teletak didalam blok tag form

Atribut:
- Type (jenis input) nilai text, checkbox, radio, hidden, button,
submit, reset, file, image
- Name (nama elemen)
- Value (nilai isian)

Contoh:

Radio

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 16


HTML, CSS, JavaScript, PHP___________________________________________________________

Checkbox

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 17


HTML, CSS, JavaScript, PHP___________________________________________________________

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 18


HTML, CSS, JavaScript, PHP___________________________________________________________

Hidden

Button

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 19


HTML, CSS, JavaScript, PHP___________________________________________________________

Submit

Reset

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 20


HTML, CSS, JavaScript, PHP___________________________________________________________

Textarea

Select

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 21


HTML, CSS, JavaScript, PHP___________________________________________________________

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 22


HTML, CSS, JavaScript, PHP___________________________________________________________

BAB II
CSS (CASCADING STYLE SHEET)

1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE

Contoh:

2. PENULISAN PADA HEAD

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 23


HTML, CSS, JavaScript, PHP___________________________________________________________

3. PENULISAN DENGAN CLASS

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 24


HTML, CSS, JavaScript, PHP___________________________________________________________

4. PENULISAN DENGAN ID

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 25


HTML, CSS, JavaScript, PHP___________________________________________________________

BAB III
JAVASCRIPT

1. PENULISAN PADA TAG

Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 26


HTML, CSS, JavaScript, PHP___________________________________________________________

2. PENULISAN DENGAN TAG <SCRIPT>

Contoh:

3. TIPE DATA

Tipe-tipe data pada javascript yaitu: string, number, boolean, null, object dan
function

4. VARIABEL

Dengan variabel kita dapat menyimpan informasi pada memori dan dapat kita
pergunakan berkali-kali. Untuk membuat variabel ketik awalan var atau bisa
juga langsung dengan nama variabel tersebut.

Contoh:
var namaKu = “Fansyah”
atau
namaKu = “Fansyah”

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 27


HTML, CSS, JavaScript, PHP___________________________________________________________

5. OPERATOR, IF DAN PERULANGAN


Operator pada javascritp mirip dengan operator pada php, lihat
pada bagian PHP untuk mempelajari operator matematika,
perbandingan dan logika. Begitu juga dengan sintak if dan
perulangan.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 28


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh operator matematika:

Contoh if:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 29


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh perulangan dengan for:

Contoh penulisan function:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 30


HTML, CSS, JavaScript, PHP___________________________________________________________

BAB IV
PHP (Hypertext Preprocessor)

1. DASAR PENULISAN PHP


Penulisan php diawali oleh boleh diletakkan dimana saja pada halaman html.
Penulisan lazimnya ditulis diantara blok <?php… ?>

2. VARIABEL
Dengan variabel kita dapat menyimpan nilai atau informasi kedalam memori.
Variabel dapat kita gunakan berkali-kali sesuai kebutuhan dan nilainya dapat
kita ganti. Nama variable diawali tanda $. Misal $nama, $alamat. Nama
variable case sensitif (tidak mengenal perbedaan huruf besar dan kecil). $A
tidak sama dengan $a. Jenis variable bisa berupa bolean (true atau false)
string (huruf, angka dan karakter), integer (angka bulat), float atau double
(angka desimal/pecahan), array, object, NULL. Variabel string bisa diapit
tanda petik dua, atau petik satu.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 31


HTML, CSS, JavaScript, PHP___________________________________________________________

Variabel angka

3. TANDA SAMBUNG
Untuk menyambung antara variabel yang satu dengan yang lain, atau
menggabungkan teks gunkan tanda titik.

4. OPERATOR MATEMATIKA

Operator Keterangan Contoh Hasil


+ Penambahan x=2 4
x+2
- Pengurangan x=2 3
5-x
* Perkalian x=4 20
x*5

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 32


HTML, CSS, JavaScript, PHP___________________________________________________________

/ Pembagian 15/5 3
5/2 2.5
% Modulus (sisa pembagian) 5%2 1
10%8 2
10%2 0
++ Increment (penambahan dengan 1) x=5 x=6
x++
-- Decrement (pengurangan dengan 1) x=5 x=4
x--

5. OPERATOR PERSAMAAN

Operator Contoh Sama dengan


= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 33


HTML, CSS, JavaScript, PHP___________________________________________________________

/= x/=y x=x/y
%= x%=y x=x%y

6. OPERASI PERBANDINGAN

Operator Keterangan Contoh


== Sama dengan 5==8 hasil false
!= Tidak sama dengan 5!=8 hasil true
> Lebih besar 5>8 hasil false
< Legih kecil 5<8 hasil true
>= Lebih besar sama dengan 5>=8 hasil false
<= Lebih kecil sama dengan 5<=8 hasil true

7. OPERATOR LOGIKA

Operator Keterangan Contoh


&& And (dan) x=6
y=3

(x < 10 && y > 1) hasil true


|| Or (atau) x=6
y=3

(x==5 || y==5) hasil false


! Not (tidak) x=6
y=3

!(x==y) hasil true

8. IF
Dengan if kita dapat menjalankan kondisi sesuai dengan yang kita harapkan.
Misal kita dapat menentukan alur program untuk yang mengisi password
dengan benar dan alur program untuk mengisi password yang salah.

Penulisan if dengan 1 statemen:

if (kondisi/ekpresi)
kode ini/statemen ini akan dijalankan jika kondisi benar;
else
kode ini/statemen ini akan dijalankan jika kondisi salah;

Penulisan if dengan lebih dari 1 statemen:

if (kondisi/ekpresi)
{
kode ini/statemen ini akan dijalankan jika kondisi benar;
kode ini/statemen ini akan dijalankan jika kondisi benar;
}
else
{
kode ini/statemen ini akan dijalankan jika kondisi salah;
kode ini/statemen ini akan dijalankan jika kondisi salah;
}

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 34


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh:
IF dengan 2 kemungkinan

Contoh:
IF dengan lebih dari 2 kemungkinan

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 35


HTML, CSS, JavaScript, PHP___________________________________________________________

9. PERULANGAN
Perulangan berfungsi untuk mengulang alur program, misal kita bisa
membuat nomor dari 1 sampai 100 dengan perulangan tanpa mengetikan
satu persatu. Ada beberapa macam perulangan yaitu for, while,
do..while, foreach

Contoh perlulangan for:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 36


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh perlulangan while:

10. ARRAY
Dengan array, kita bisa membuat variabel dengan tipe yang dinamis, dimana
kita bisa menyimpan banyak data dalam satu variabel array.
Contoh:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 37


HTML, CSS, JavaScript, PHP___________________________________________________________

11. PHP DENGAN FORM

Contoh dengan kotak text:

Buatlah file dengan nama data01.php dengan skrip:

Buatlah file dengan nama data02.php dengan skrip:

Kemudian jalankan file data01.php, isikan pada kotak nama dengan nama
anda, kemudian klik tombol submit. Hasilnya akan tampil seperti gambar
dibawah ini.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 38


HTML, CSS, JavaScript, PHP___________________________________________________________

Contoh dengan checkbox:

Buatlah file dengan nama data03.php dengan skrip:

Buatlah file dengan nama data04.php dengan skrip:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 39


HTML, CSS, JavaScript, PHP___________________________________________________________

12. MEMBUAT DATABASE DENGAN NAVICAT

- Klik kanan localhost


- Pilih New Database
- Ketik nama database misal sekolah

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 40


HTML, CSS, JavaScript, PHP___________________________________________________________

13. MEMBUAT TABEL


o Pilih database sekolah, klik New Table

o Isikan field2
ƒ id, smalint,6, auto increament
ƒ nama, varchar, 50

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 41


HTML, CSS, JavaScript, PHP___________________________________________________________

ƒ alamat, varchar, 255


ƒ umur, tinyint, 4

o Simpan dan beri nama guru

14. MEMBUAT USER DATABASE BARU


Klik tombol Manage User

Klik tombol Add User

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 42


HTML, CSS, JavaScript, PHP___________________________________________________________

Isikan User name, Host (alamat server mysql, biasanya localhost), password

Selanjutnya tentukan Privileges (hak istimewa) user. Pilih user, lalu pilih
privilages yang sesuai, untuk memberikan semua frivilages, klik Grant All,
lalu klik tombol Set Priv dan Flush Priv

15. KONEKSI KE SERVER MYSQL

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 43


HTML, CSS, JavaScript, PHP___________________________________________________________

localhost: server dimana database mysql berada


fansyah: user name
fans2006: password

16. KONEKSI KE DATABASE MYSQL

sekolah: nama database yang dikoneksikan


$koneksi: nama koneksi

17. MENUTUP KONEKSI

18. MEMBERI PERINTAH KE DATABASE DENGAN QUERY

Ada beberapa perintah query


- Melakukan perubahan pada data seperti:
insert into, update, delete

o INSERT INTO
Contoh:
ƒ insert into guru values(‘Rina’,’Jakarta’,25)
ƒ insert into guru(nama,umur) values(‘Rina’,25)

o UPDATE
Contoh:
ƒ update guru set
nama=’Tuti’,alamat=’Yogyakarta’,umur=20 where
id=1

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 44


HTML, CSS, JavaScript, PHP___________________________________________________________

o DELETE
Contoh:
ƒ delete from guru where id=1
- Tidak melakukan perubahan pada data yaitu select.
o SELECT
Contoh:
ƒ select * from guru
ƒ select * from guru where kota=’jakarta’ and
umur>20
Contoh skrip dengan query insert into:

Lihat hasilnya dengan membuka tabel guru

Contoh skrip dengan query update:

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 45


HTML, CSS, JavaScript, PHP___________________________________________________________

Klik tombol refresh, untuk melihat hasil perubahan

Contoh skrip dengan query delete:

19. SKRIP MENAMPILKAN DATA

Sebelum membuat skrip ini, tambahkan beberapa data pada tabel guru

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 46


HTML, CSS, JavaScript, PHP___________________________________________________________

Buat file tampil_data1.php

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 47


HTML, CSS, JavaScript, PHP___________________________________________________________

Kemudian buatlah file tampil_data2.php, berbeda dengan tampil_data1.php,


tampilan data guru disini menggunakan tabel.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 48


HTML, CSS, JavaScript, PHP___________________________________________________________

20. SKRIP MENAMBAHKAN DATA DENGAN FORM

Buat file form_tambah1.php

Lalu buat pula file form_tambah2.php

Jalankan form_tambah1.php, isikan nama, alamat dan umur, lalu klik tombol
Submit

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 49


HTML, CSS, JavaScript, PHP___________________________________________________________

Jika berhasil akan tampil

21. SKRIP UPDATE DATA DENGAN FORM

Ubah tampil_data2.php dengan menambahkan link edit disebelahnya.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 50


HTML, CSS, JavaScript, PHP___________________________________________________________

Kemudian buat file form_update2.php

Terakhir buat file form_update3.php

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 51


HTML, CSS, JavaScript, PHP___________________________________________________________

Jalankan tampil_data2.php, klik salah satu yang akan diupdate

Lakukan perubahan, lalu klik tombol submit

Jika berhasil, akan tampil

Klik OK, lalu refresh tampilan awal (file tampil_data2.php) untuk melihat hasil
perubahan.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 52


HTML, CSS, JavaScript, PHP___________________________________________________________

22. SKRIP HAPUS DATA


Ubah tampil_data2.php dengan menambahkan link hapus disebelahnya.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 53


HTML, CSS, JavaScript, PHP___________________________________________________________

Buat file form_hapus2.php

Jalankan tampil_data2.php, Klik hapus pada salah satu data

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 54


HTML, CSS, JavaScript, PHP___________________________________________________________

Jalankan berhasil dihapus akan tampil

Klik OK, lalu refresh tampilan awal (file tampil_data2.php) untuk melihat
hasil perubahan.

23. MENAMPILKAN DATA PER HALAMAN

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 55


HTML, CSS, JavaScript, PHP___________________________________________________________

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 56


HTML, CSS, JavaScript, PHP___________________________________________________________

LAMPIRAN

1. SETTING HOME SITE+ 5.5

ƒ MEMBUKA DAN MENUTUP TAMPILAN FOLDER DAN FILE


(RESOURCE TAB)
Tampilan Resource Tab:

Tekan tombol F9 atau klik tombol Resouce Tab untuk menampilkan


atau menyembunyikan.

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 57


HTML, CSS, JavaScript, PHP___________________________________________________________

ƒ MEMBUAT FOLDER BARU


1. Pilih Drive atau Folder dimana folder baru akan dibuat
2. Klik kanan pada Resource Tab bagian bawah, pilih Create Folder

3. Ketikan nama folder baru

ƒ MENAMPILKAN NOMOR BARIS

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 58


HTML, CSS, JavaScript, PHP___________________________________________________________

ƒ MENGAKTIFKAN WORD WRAP (PENURUNAN BARIS SECARA


OTOMATIS)

ƒ MENENTUKAN EKTENSI FILE YANG SERING DIGUNAKAN


1. Buka menu Options, Settings lalu pilih Extention Manager pada
Default Extention, isikan file ekstensi yang diinginkan misal .html

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 59


HTML, CSS, JavaScript, PHP___________________________________________________________

ƒ MEMBUAT CODE TEMPLATE (KODE/SKRIP YANG SERING


DITULISKAN)
1. Buka menu Options, Settings lalu pilih Code Templates, klik tombol
Add, kemudian isikan Keyword, Description dan Value
Misal anda ingin membuat pembuka dan penutup dari skrip php:

2. Untuk menggunakan Code Template yang sudah kita buat, tekan


ctrl + j

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 60


HTML, CSS, JavaScript, PHP___________________________________________________________

2. XAMPP
XAMPP merupakan php instaler kit yaitu program yang mampu mengiistall
php, mysql dan komponen-komponen lain menjadi satu kesatuan. XAMPP bisa
didapatkan di http://www.apachefriends.org
• INSTALL XAMPP

1. Jalankan file installer xampp

2. Pilih bahasa Indonesia pada Installer Language

3. Klik Next, pada jendela Selamat datang…

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 61


HTML, CSS, JavaScript, PHP___________________________________________________________

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 62


HTML, CSS, JavaScript, PHP___________________________________________________________

• MENJALANKAN APACHE DAN MYSQL DARI XAMPP


CONTROL PANEL

1. Double Click XAMPP Control Panel pada desktop

2. Klik tombol start pada Apache dan MySql

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 63


HTML, CSS, JavaScript, PHP___________________________________________________________

• MENGECEK APACHE

1. Pada browser buka http://localhost


Jika tampil halaman xampp, berarti apache sudah jalan.
Klik English untuk masuk ke pengaturan xampp

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 64


HTML, CSS, JavaScript, PHP___________________________________________________________

3. NAVICAT 2004
NAVICAT 2004 adalah program MySql Database Client. Anda bisa
mendapatkan NAVICAT di http://www.navicat.com/

o MEMBUAT KONEKSI KE SERVER DATABASE MYSQL

1. Buka Menu file, New Connection

2. Pada Tab General Setting, isikan Connection Name, Host


name/IP Address, User name dan Password
Untuk koneksi awal, secara default, mysql server mempunyai
koneksi dengan username: root dan tanpa password, untuk
Host name isikan localhost

PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 65