Pemrograman Web Oleh Junianto
-
Upload
erwin-coemasatoe -
Category
Documents
-
view
31 -
download
2
Transcript of Pemrograman Web Oleh Junianto
![Page 1: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/1.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
MODUL PEMROGRAMAN WEB PPPG KESENIAN YOGYAKARTA
Rusfansyah
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah
![Page 2: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/2.jpg)
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
![Page 3: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/3.jpg)
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
![Page 4: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/4.jpg)
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
![Page 5: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/5.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh:
4. <HR> Horizontal Line (Garis horizontal) Atribut:
Width Align
Contoh:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 2
![Page 6: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/6.jpg)
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
![Page 7: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/7.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 4
![Page 8: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/8.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
6. <H1></H1> …. <H6></H6> Untuk membuat heading yang memberikan baris baru Contoh:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 5
![Page 9: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/9.jpg)
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
![Page 10: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/10.jpg)
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
![Page 11: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/11.jpg)
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
![Page 12: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/12.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
12. <A></A> Untuk membuat link Atribut:
href name
Contoh:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 9
![Page 13: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/13.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh Anchor:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 10
![Page 14: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/14.jpg)
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
![Page 15: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/15.jpg)
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
![Page 16: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/16.jpg)
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
![Page 17: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/17.jpg)
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
![Page 18: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/18.jpg)
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
![Page 19: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/19.jpg)
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
![Page 20: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/20.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Checkbox
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 17
![Page 21: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/21.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 18
![Page 22: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/22.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Hidden
Button
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 19
![Page 23: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/23.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Submit
Reset
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 20
![Page 24: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/24.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Textarea
Select
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 21
![Page 25: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/25.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 22
![Page 26: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/26.jpg)
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
![Page 27: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/27.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
3. PENULISAN DENGAN CLASS
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 24
![Page 28: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/28.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
4. PENULISAN DENGAN ID
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 25
![Page 29: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/29.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
BAB III JAVASCRIPT
1. PENULISAN PADA TAG
Contoh:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 26
![Page 30: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/30.jpg)
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
![Page 31: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/31.jpg)
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
![Page 32: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/32.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh operator matematika:
Contoh if:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 29
![Page 33: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/33.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh perulangan dengan for:
Contoh penulisan function:
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 30
![Page 34: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/34.jpg)
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
![Page 35: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/35.jpg)
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
x+2 4
- Pengurangan x=2 5-x
3
* Perkalian x=4 x*5
20
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 32
![Page 36: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/36.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
/ Pembagian 15/5 5/2
3 2.5
% Modulus (sisa pembagian) 5%2 10%8 10%2
1 2 0
++ Increment (penambahan dengan 1) x=5 x++
x=6
-- Decrement (pengurangan dengan 1) x=5 x--
x=4
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
![Page 37: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/37.jpg)
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
![Page 38: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/38.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Contoh: IF dengan 2 kemungkinan
Contoh: IF dengan lebih dari 2 kemungkinan
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 35
![Page 39: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/39.jpg)
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
![Page 40: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/40.jpg)
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
![Page 41: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/41.jpg)
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
![Page 42: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/42.jpg)
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
![Page 43: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/43.jpg)
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
![Page 44: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/44.jpg)
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
![Page 45: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/45.jpg)
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
![Page 46: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/46.jpg)
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
![Page 47: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/47.jpg)
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
![Page 48: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/48.jpg)
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
![Page 49: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/49.jpg)
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
![Page 50: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/50.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Buat file tampil_data1.php
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 47
![Page 51: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/51.jpg)
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
![Page 52: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/52.jpg)
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
![Page 53: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/53.jpg)
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
![Page 54: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/54.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Kemudian buat file form_update2.php
Terakhir buat file form_update3.php
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 51
![Page 55: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/55.jpg)
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
![Page 56: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/56.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
22. SKRIP HAPUS DATA Ubah tampil_data2.php dengan menambahkan link hapus disebelahnya.
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 53
![Page 57: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/57.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
Buat file form_hapus2.php
Jalankan tampil_data2.php, Klik hapus pada salah satu data
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 54
![Page 58: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/58.jpg)
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
![Page 59: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/59.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 56
![Page 60: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/60.jpg)
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
![Page 61: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/61.jpg)
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
![Page 62: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/62.jpg)
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
![Page 63: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/63.jpg)
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
![Page 64: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/64.jpg)
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
![Page 65: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/65.jpg)
HTML, CSS, JavaScript, PHP___________________________________________________________
PPPG Kesenian Yogyakarta________________________________________________Rusfansyah 62
![Page 66: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/66.jpg)
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
![Page 67: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/67.jpg)
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
![Page 68: Pemrograman Web Oleh Junianto](https://reader034.fdokumen.com/reader034/viewer/2022052600/55721414497959fc0b93b693/html5/thumbnails/68.jpg)
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