modul pemrograman web dengan dreamweaver, sql & php

TUGAS
PEMROGRAMAN WEB & MYSQL
‘MODUL PEMROGRAMAN WEB & MYSQL’
Disusun Oleh:
Npm : 2012.21.0047
Nama : Ismi Islamia Fathurrahmi
Jurusan : Sistem Informasi
Dosen Pengampu : Ahmad Sanmorino, S.Kom., M.kom
UNIVERSITAS INDO GLOBAL MANDIRI PALEMBANG
TAHUN AJARAN 2014-2015

i
DAFTAR MATERI
NO MATERI HAL
1 MEMBUAT HTML SEDERHANA 1-3
2 MEMBUKA MYSQL DI CMD 4
3 MEMBUAT DATABASE & TABEL DI MYSQL 5
4 MEMASUKKAN ISI FIELD KE DALAM TABEL 6
5 PERINTAH-PERINTAH DI MYSQL 7-8
6 MEMBUAT DREAMWEAVER SEDERHANA 9-13
7 MENGHUBUNGKAN KONEKSI DREAMWEAVER & MYSQL 14-20
8 MEMBUAT NAVIGATION BAR DI DREAMWEAVER 21-23
9 MEMBUAT TABEL MENGGUNAKAN PRIMARY KEY 24
10 MEMBUAT OPTION EDIT DAN DELETE DI DREAMWEAVER 25-31
11 MEMBUAT BUTTON & FORM INPUT DATA DI DREAMWEAVER 32-34
12 MENGHITUNG TRANSAKSI PENJUALAN 35-37
13 MENENTUKAN NILAI TERTINGGI DAN TERENDAH 38-42
14 MENENTUKAN BILANGAN GANJIL DAN GENAP 43-45
15 MENENTUKAN GRADE NILAI 46-48
16 INPUT DATA DENGAN MENGGUNAKAN JQUERY 49-55
17 MENGGUNAKAN TAB SECTION 56-60
18 INPUT DATA DENGAN MENGGUNAKAN CHART (BAR) 61-67
19 INPUT DATA DENGAN MENGGUNAKAN CHART (PIE) 68-72
20 MEMBUAT DATABASE MENGGUNAKAN PHPMYADMIN 73-75
21 MEMBUAT FORM LOGIN 76-80

ii
22 MEMBUAT JAJAK PENDAPAT 81-87
23 MENAMPILKAN INFO & JUMLAH PENGUNJUNG 88-92
24 UPLOAD GAMBAR 93-96
25 MEMBUAT COOKIES 97-102
26 MEMBUAT SESSION 103-106
27 MEMBUAT KONVERSI SUHU (1) 107-109
28 MEMBUAT KONVERSI SUHU (2) 110-115
DAFTAR TABEL

iii
NO.
TABEL
NAMA TABEL NO.
MATERI
HAL
1 Nilai 10 25
2 Brg 12 35
3 Nilai 13 38
4 Bilangan 14 43
5 Grade 15 46
6 Inputdata 16 49
7 Chart 18 61
8 Mhs 19 68
9 Admin 21 76
10 Poll 22 81
11 Visitors 23 88
12 Simpan 24 93
DAFTAR GAMBAR

iv
NO.
MATERI
NO.
GAMBAR
KETERANGAN GAMBAR HAL
1 1.1. Source Code HTML Sederhana (index.html) 1
1.2. Source Code HTML Sederhana (kedua.html) 2
1.3. Tampilan HTML Sederhana (index.html) 3
1.4. Tampilan HTML Sederhana (kedua.html) 3
2 2.1. Perintah Membuka MySQL di Cmd 4
3 3.1. Perintah Membuat Database & Tabel MySQL 5
4 4.1. Perintah Memasukkan Isi Field ke Dalam Tabel 6
6 6.1. Membuat File PHP Baru di Macromedia DW 9
6.2. Menyimpan File index.php 10
6.3. Memasukkan tabel kedalam File index.php 10
6.4. Blok dan Merge Table 11
6.5. Tampilan Dasar 11
6.6. Pilihan Tampilan 11
6.7. Penambahan kode <marquee> 11
6.8. Memasukkan tabel kedalam tabel 12
6.9. Nama-nama field 12
6.10. Tampilan Membuat DW Sederhana 13
7 7.1. Properties PHP di DW 14
7.2. Memasukkan tabel kedalam file index.php 15
7.4. Tampilan Local Info 16
7.5. Tampilan Remote Info 16
7.6. Tampilan Testing Server 17
7.7. Memilih MySQL Connection 17

v
7.8. Membuat koneksi 18
7.9. Memilih Recordset (Query) 18
7.10. Membuat recordset mahasiswa 19
7.11. Pemindahan field recordset ke tabel 19
7.12. Tampilan Menghubungkan Koneksi DW & MySQL 20
8 8.1. Pengaturan Recordset Navigation Bar 21
8.2. Pengaturan Repeated Region 22
8.3. Tampilan Membuat Navigation Bar di DW (1) 23
8.4. Tampilan Membuat Navigation Bar di DW (2) 23
9 9.1. Perintah membuat tabel menggunakan primary key 24
10 10.1. Merge kolom option 26
10.2. Jendela make link (edit) 26
10.3. Parameters 27
10.4. Jendela make link (delete) 27
10.5. Recordset edit 28
10.6. Pengaturan Form Edit 29
10.7. Pengaturan Form Delete 30
10.8. Tampilan Membuat Option Edit dan Delete 31
11 11.1. Jendela Flash Button 32
11.2. Form Insert Record 33
11.3. Tampilan Button dan Form Input Data 34
12 12.1. Record tabel Brg 35
12.3. Query brg 36
12.4. Tampilan Menghitung Transaksi Penjualan 37
13 13.1. Form Insert Record 39
13.2. Pengaturan tata letak 39

vi
13.3. Query nilai 40
13.4. Source Code Nilai tertinggi dan terendah 41
13.5. Tampilan Menentukan Nilai Tertinggi dan Terendah 42
14 14.1. Query bilangan 44
14.2. Source Code Bilangan Ganjil & Genap 44
14.3. Tampilan Menetukan Bilangan Ganjil dan Genap 45
15 15.1. Query grade 47
15.2. Source Code Grade Nilai 47
15.3. Tampilan Menentukan Grade Nilai 48
16 16.1. Folder jquery-ui 50
16.2. Buka File date-formats.html 50
16.3. Pilih tab Code 51
16.4. Source Code input data menggunakan jquery (head) 51
16.5. Source Code input data menggunakan jquery (body) 52
16.6. Meletakkan Code kedalam <tr> 52
16.7. Pengaturan Form Insert Record 53
16.8. Tampilan Input Data dengan Menggunakan JQuery 55
17 17.1. Buka file default.html 56
17.2. Source Code tab section (head) 57
17.3. Source Code tab section (body) 58
17.4. Blok Isi File index.php 59
17.5. Form didalam tab section 59
17.6. Tampilan Menggunakan Tab Section 60
18 18.1. Pengaturan Form Insert Record 62
18.2. Query chart 63
18.3. Buka file index.html 63
18.4. Source Code Chart Bar (head) 64

vii
18.5. Source Code Chart Bar (body) 65
18.6. Pengaturan tabel sayuran 66
18.7. Tampilan Input Data Menggunakan Chart (Bar) 67
19 19.1. Query mhs 69
19.2. Buka file index.html 70
19.3. Source Code Chart Pie (head) 70
19.4. Source Code Chart Pie (body) 71
19.5. Tampilan Input Data Menggunakan Chart (Pie) 72
20 20.1. Membuat Database Mahasiswa 73
20.2. Membuat table data_mhs 74
20.3. Membuat field 74
20.4. Tampilan tabel berhasil dibuat 75
20.5. Fungsi-fungsi di PHPMyAdmin 75
21 21.1. Record tabel admin 76
21.2. Pengaturan Log In User 77
21.3. Properties type (Password) 77
21.4. Pengaturan Log Out User 78
21.5. Tampilan Membuat Form Login 80
22 22.1. Radio Button Jajak Pendapat 82
22.2. Source Code file sambung.php 83
22.3. Source Code file vote.php 84
22.4. Source Code file grafik.php 86
22.5. Tampilan Membuat Jajak Pendapat 87
23 23.1. Source Code file index.php 89
23.2. Source Code file koneksi.php 90
23.3. Source Code file jumlah.php 91
23.4. Tampilan Menampilkan Info dan Jumlah Pengunjung 92

viii
24.2. Source Code file koneksi.php 95
24.3. Tampilan Upload Gambar 96
25 25.1. Source Code file create.php 97
25.2. Source Code file check.php 98
25.3. Source Code file retrieve.php 99
25.4. Source Code file modify.php 100
25.5. Source Code file delete.php 101
25.6. Tampilan Membuat Cookies 102
26.2. Source Code file periksa.php 104
26.3. Source Code file hapus.php 105
26.4. Tampilan Membuat Session 106
27 27.1. Source Code file index.php (1) 107
27.2. Source Code file index.php (2) 108
27.3. Tampilan Membuat Konversi Suhu (1) 109
28 28.1. Source Code file index.php (1) 110
28.2. Source Code file index.php (2) 111
28.3. Source Code file convert_suhu.php (1) 112
28.6. Tampilan Membuat Konversi Suhu (2) 115

1
1. MEMBUAT HTML SEDERHANA
Langkah-Langkah:
 Buka Notepad [Start → All Program → Accessories → Notepad]
 Masukkan kode berikut di dalam notepad:
1.1. Source Code HTML Sederhana (index.html)

2
 Simpan dengan nama index.html [File → Save → Letakkan di
directory mana saja, kemudian beri nama index.html dengan tipe All
Files → Save]
 Buka notepad baru [File → New]
 Kemudian masukkan kode berikut:
1.2. Source Code HTML Sederhana (kedua.html)
 Simpan dengan nama Kedua.html dan letakkan di folder yang sama
dengan index.html

3
Tampilan di Browser:
 Buka index.html dengan menggunakan browser apa saja (disini saya
menggunakan firefox)
1.3. Tampilan HTML Sederhana (index.html)
 Ketika Next Sheet diklik, maka akan menuju ke kedua.html
1.4. Tampilan HTML Sederhana (kedua.html)
 Dan ketika Back To Home diklik, maka akan kembali ke index.html

4
2. MEMBUKA MYSQL DI CMD
 Pastikkan appserv/mysql sudah terinstall di komputer
 Buka cmd [Ketik ‘cmd’ di pencarian Start]
 Kemudian masukkan perintah berikut secara berurutan. (tekan
Enter untuk pindah baris)
2.1. Barisan Perintah untuk Membuka MySQL di Cmd

5
3. MEMBUAT DATABASE DAN TABEL
DI MYSQL
 Buka SQL di cmd
 Jika sudah masuk ke dalam directory mysql, masukkan perintah
berikut (selalu akhiri dengan tanda ; disetiap baris perintah)
3.1. Barisan perintah Membuat Database dan Tabel di MySQL

6
4. MEMASUKKAN ISI FIELD KE
DALAM TABEL
 Buka SQL di cmd
 Jika sudah masuk ke dalam directory mysql, buatlah database dan
tabel didalamya
 Kemudian masukkan perintah berikut:
4.1. Barisan Peritah Memasukkan Isi Field ke Dalam Tabel

7
5. PERINTAH-PERINTAH DI MYSQL
 SELECT : Digunakan untuk memilih data dari tabel database
 Menampilkan data dalam kolom tertentu
Ex: select umur from web;
 WHERE : Digunakan untuk memfilter data pada perintah select
 Menampilkan data dalam kolom tertentu dengan kondisi
tertentu
Ex: select nama from web where umur=19;
 LIKE: Digunakan bersama dengan perintah where, untuk
memproses pencarian data dengan spesifikasi tertentu
 Menampilkan data dengan kondisi huruf tertentu
Ex: select * from web where nama like '%a%';
Ket: %a% = menampilkan kata yang terdapat huruf a
%a = menampilkan kata yang huruf terakhirnya a
a% = menampilkan kata yang huruf awalnya a
 ORDER BY: Digunakan untuk mengurutkan data berdasarkan kolom
(field) tertentu. Secara default, urutan tersusun secara ascending.
Tetapi dapat diubah menjadi descending dengan menambahkan
perintah DESC.
 Menampilkan data dalam urutan kolom tertentu
Ex: select * from web order by jurusan desc;

8
 UPDATE: Digunakan untuk mengubah/memperbarui data di tabel
database
Ex: update web set jurusan='si' where nama='mia';
 DELETE: Digunakan untuk menghapus data di table database
Ex: delete from web where umur=18;
 ALTER: Digunakan untuk menambah, menghapus, atau mengubah
kolom (field) pada tabel
Ex 1: (menambah field) alter table web add dob date;
Ex 2: (Menghapus field) alter table web drop column dob;
Ex 3: (Mengubah field) alter table web alter column dob ttl;
 DROP: Digunakan untuk menghapus tabel/database
Ex 1: drop table web;
Ex 2: drop database mhs;

9
6. MEMBUAT DREAMWEAVER
SEDERHANA
Langkah-Langkah:
 Pastikan software dreamweaver sudah terinstall di komputer
 Buka dreamweaver
 Pilih PHP
6.1. Membuat File PHP Baru di Macromedia DW
 Simpan terlebih dahulu [File → Save] [Simpan di directory C →
appserv → www → mhs(buat folder baru) → beri nama index.php
dengan type All Files → Save]

10
6.2. Menyimpan File index.php
 Masukkan tabel [Insert → Table → ketika window muncul, isikan
sesuai dengan tampilan berikut → klik OK]
6.3. Memasukkan tabel kedalam File index.php
 Blok baris pertama → klik kanan → table → merge table

11
6.4. Blok dan Merge Table
 Lakukan cara yang sama pada baris terakhir
 Buatlah tabel tersebut sama persis seperti tabel dibawah ini
6.5. Tampilan Dasar
 Blok teks UNIVERSITAS INDO GLOBAL MANDIRI
 Pilih tab Code (terdapat di kiri atas)
6.6. Pilihan Tampilan
 Sisipkan kode <marquee> sebelum teks yang diblok dan kode
</marquee> sesudah teks yang diblok
6.7. Penambahan kode <marquee>

12
 Kembali ke pengaturan design. Arahkan cursor ke bagian tengah
tabel
 Masukkan tabel baru [Insert → Table → ketika window muncul,
isikan sesuai dengan tampilan berikut → klik OK]
6.8. Memasukkan tabel ke dalam tabel
 Isikan nama field seperti dibawah ini
6.9. Nama-nama field
 Kemudian Save

13
Tampilan Di Browser:
 Buka index.php dengan menggunakan browser apa saja (disini saya
menggunakan firefox). [firefox → ketik ‘localhost/mhs’ → Enter]
6.10. Tampilan Membuat DW Sederhana

14
7. MENGHUBUNGKAN KONEKSI
DREAMWEAVER & MYSQL
Langkah-Langkah:
 Buka dreamweaver → PHP
 Simpan didalam folder mhs, beri nama index.php
 Buat teks judul/header
7.1. Properties PHP di DW
 Masukkan tabel [Insert → Table → ketika window muncul,
isikan sesuai dengan tampilan berikut → klik OK]

15
7.2. Memasukkan tabel kedalam file index.php
 Masukkan nama field di setiap kolom
 Membuat site baru [Site → New Site → Advanced]
o Local Info

16
7.4. Tampilan Local Info
o Remote Info
7.5. Tampilan Remote Info
o Testing Server

17
7.6. Tampilan Testing Server
 Kemudian Klik OK
 Buka tab Application (terdapat pada kanan atas) → Databases > klik
tanda + → mySQL Connection
7.7. Memilih MySQL Connection

18
 Ketika window mySQL Connection muncul, masukkan nilai
parameternya → klik OK
7.8. Membuat koneksi
 Buka application → Bindings → klik tanda + → Recordset (Query)
7.9. Memilih Recordset (Query)
 Tentukan nama recordset, koneksi dan tabel yang akan digunakan →
klik OK

19
7.10. Membuat recordset mahasiswa
 Klik tanda + pada recordset(mahasiswa). Kemudian tarik satu
persatu field di recordset ke dalam kolom tabel yang telah
ditentukan
7.11. Pemindahan field recordset ke tabel
 Selanjutnya, arahkan kursor pada baris kedua sampai garis
berwarna merah.
 Kemudian klik Insert → Application Objects → Repeated Region.
 Ketika window muncul, tentukan batasan record yang akan
ditampilkan → Klik OK
 Save

20
7.12. Tampilan Menghubungkan Koneksi DW & MySQL

21
8. MEMBUAT NAVIGATION BAR DI
DREAMWEAVER
Langkah-Langkah:
 Buka dreamweaver → PHP
 Kemudian simpan di dalam suatu folder dengan nama index.php
 Buat tabel dengan jumlah rows = 2, dan column = 3
 Buat Site Baru
 Koneksikan Database
 Buat Recordset
 Masukkan field ke dalam kolom tabel
 Untuk menambahkan navigation bar, klik Insert → Application
Objects → Recordset Paging→ Recordset Navigation Bar
 Pilih jenis display → klik OK
8.1. Pengaturan Recordset Navigation Bar
 Arahkan kursor pada baris kedua, kemudian masukkan Repeated
Region

22
8.2. Pengaturan Repeated Region
 Save

23
8.3. Tampilan Membuat Navigation Bar di DW (1)
 Ketika button Next di klik:
8.4. Tampilan Membuat Navigation Bar di DW (2)

24
9. MEMBUAT TABEL MENGGUNAKAN
PRIMARY KEY
 Buka cmd
 Masuk ke directory mysql
 Buat database baru, kemudian buat tabel yang berisi 4 field dimana
field npm sebagai primary key
9.1. Perintah membuat tabel menggunakan primary key

25
10. MEMBUAT OPTION EDIT DAN
DELETE DI DREAMWEAVER
Langkah-Langkah:
 Buat tabel dengan isi field seperti dibawah ini
Table 1. Nilai
 Buka dreamweaver → php
 Simpan didalam suatu folder dengan nama file index.php
 Buat teks judul
 Masukkan tabel dengan jumlah rows = 2 dan column = 7
 Kemudian isikan nama field disetiap kolom
 Merge cells untuk kolom ke 6&7 baris ke 1
 Ketik EDIT pada kolom ke 6 baris ke 2, dan ketik DELETE pada
kolom ke 7 baris ke 2

26
10.1. Merge kolom option
 Buat site baru
 Koneksikan database
 Buat recordset dengan nama nilai
 Kemudian tarik field ke dalam kolom tabel
 Masukkan perintah Repeated Region
 Blok teks EDIT → Klik Kanan > Make Link
 Ketika window muncul, isikan nama file dengan edit.php, lalu klik
Parameters
10.2. Jendela make link (edit)

27
 Ketika window parameters muncul, isikan seperti dibawah ini → Klik
OK
10.3. Parameters
 Blok teks DELETE → klik kanan → Make Link
 Ketika window muncul, isikan nama file dengan delete.php → klik
OK
10.4. Jendela make link (delete)
 Save file index.php
 Buat file baru [File → New → Dynamic Page → PHP → Create]

28
 Simpan dengan nama edit.php dan letakkan didalam folder yang
sama dengan index.php
 Buat recordset seperti dibawah ini
10.5. Recordset edit
 Buat Judul
 Masukkan form edit [Insert → Application Objects → Update
Record → Record Update From Wizard]
 Ketika window muncul, isikan sesuai dengan window dibawah ini →
klik OK

29
10.6. Pengaturan Form Edit
 Save file edit.php
 Buat File PHP baru
 Simpan dengan nama delete.php dan letakkan difolder yang sama
dengan index.php
 Masukkan form delete [Insert → Application Objects → Delete
Record]
klik OK

30
10.7. Pengaturan Form Delete
 Save file delete.php

31
10.8. Tampilan Membuat Option Edit dan Delete

32
11. MEMBUAT BUTTON & FORM
INPUT DATA DI DREAMWEAVER
 (Masih berada di file index.php No. 10)
 Masukkan flash button [Insert → Media → Flash Button]
klik OK
11.1. Jendela Flash Button

33
 Buat file PHP baru dengan nama input.php dan letakkan di folder
yang sama dengan index.php
 Buat judul
 Masukkan Form Insert Record [Insert → Application Objects →
Insert Record → Record Insertion From Wizard]
klik OK
11.2. Form Insert Record
 Save file input.php

34
11.3. Tampilan Membuat Button dan Form Input Data

35
12. MENGHITUNG TRANSAKSI
PENJUALAN
Langkah-Langkah:
 Buat database penjualan dan tabel brg
 Masukkan field-field dengan ketentuan dibawah ini
Table 2. Brg
 Kemudian masukkan isi field seperti dibawah ini
12.1. Record tabel Brg
 Simpan dalam folder penjualan dengan nama file index.php
 Buat teks judul

36
 Kemudian isikan nama field disetiap kolom seperti dibawah ini
 Buat site baru
 Buat recordset dengan nama transaksi → pilihAdvanced → pilih
nama koneksi
 Pada kotak SQL, isikan code berikut
12.3. Query brg
 Klik OK
 Kemudian tarik field ke dalam kolom tabel

37
12.4. Tampilan Menghitung Transaksi Penjualan

38
13. MENENTUKAN NILAI TERTINGGI
DAN TERENDAH
Langkah-Langkah:
 Buat database nilai_mhs dan tabel nilai
Table 3. Nilai
 Simpan dalam folder nilai dengan nama file index.php
 Buat teks judul
 Buat site baru
klik OK

39
13.1. Form Insert Record
 Klik OK
 Ubah nama field dan atur lebar textfield
13.2. Pengaturan tata letak
 Buat file baru [File → New → Dynamic Page → PHP →
Create]
 Simpan dengan nama proses.php dan letakkan didalam folder

40
 Buat recordset dengan nama nilai → pilih Advanced → pilih
nama koneksi
13.3. Query nilai
 Klik OK
 Cari kode <body>. Kemudian masukkan kode berikut dibawah
kode <body>

41
13.4. Source Code Nilai tertinggi dan terendah
 Save file proses.php

42
13.5. Tampilan Menentukan Nilai Tertinggi dan Terendah

43
14. MENENTUKAN BILANGAN GANJIL
DAN GENAP
Langkah-Langkah:
 Buat database angka dan tabel bilangan
Table 4. Bilangan
 Simpan dalam folder bilangan dengan nama file index.php
 Buat teks judul
 Buat site baru
 Ketika window muncul, hilangkan kolom no pada kotak form fields
 Klik OK

44
 Simpan dengan nama proses.php dan letakkan didalam folder yang
 Buat recordset dengan nama bilangan → pilih Advanced → pilih
nama koneksi
14.1. Query bilangan
 Klik OK
kode <body>
14.2. Source Code Bilangan Ganjil & Genap

45
14.3. Tampilan Menentukan Bilangan Ganjil dan Genap

46
15. MENENTUKAN GRADE NILAI
Langkah-Langkah:
 Buat database mhs dan tabel grade
Table 5. Grade
 Simpan dalam folder grade dengan nama file index.php
 Buat teks judul
 Buat site baru
 Ketika window muncul, pilih nama koneksi dan tabel. Pada kolom
After inserting, go to masukkan proses.php. Kemudian hilangkan
kolom no pada kotak form fields
 Klik OK

47
 Buat recordset dengan nama grade → pilih Advanced → pilih nama
koneksi
15.1. Query grade
 Klik OK
kode <body>
15.2. Source Code Grade Nilai

48
15.3. Tampilan Menentukan Grade Nilai

49
16. INPUT DATA DENGAN
MENGGUNAKAN JQUERY
Langkah-Langkah:
 Buat database mhs dan tabel inputdata
Table 6. Inputdata
 Simpan dalam folder inputdata dengan nama file index.php
 Buat teks judul
 Buat site baru
After inserting, go to masukkan proses.php

50
 Klik OK
 Masuk ke Windows Explorer. Kemudian browse jquery –ui
 Letakkan folder jquery –ui ke dalam folder inputdata
16.1. Folder jquery-ui
 Buka folder jquery –ui [jquery-ui → demos → datepicker].
Kemudian buka file date-formats.html menggunakan dreamweaver
16.2. Buka File date-formats.html
 Pilih tab Code

51
16.3. Pilih tab Code
 Copy kode seperti dibawah ini (bagian head), kemudian letakkan
pada file index.php
16.4. Source Code input data menggunakan jquery (head)
 Kembali ke file date-formats.html, copy kode seperti dibawah ini
(bagian body)

52
16.5. Source Code input data menggunakan jquery (body)
 Kembali ke file index.php
 Letakkan cursor pada textfield tgl_lahir → pilih tab Code
16.6. Meletakkan Code kedalam <tr>
 Atur dan sesuaikan field-field didalam form seperti dibawah ini

53
16.7. Pengaturan Form Insert Record

54
 Buat recordset dengan nama data
 Buat teks judul
 Kemudian isikan nama field disetiap kolom
 Kemudian tarik field dari recordset data ke dalam kolom tabel
 Masukkan Button [Insert → Media → Flash Button] dengan nama =
BACK dan linkkan ke index.php

55
16.8. Tampilan Input Data dengan Menggunakan JQuery

56
17. MENGGUNAKAN TAB SECTION
Langkah-Langkah:
 (Masih berada di file index.php No. 16)
 Masuk ke Windows Explorer
 Buka folder jquery –ui [jquery-ui → demos → accordion]. Kemudian
buka file default.html menggunakan dreamweaver
17.1. Buka file default.html
 Pilih tab Code
pada file index.php

57
17.2. Source Code tab section (head)
 Kembali ke file default.html, copy kode seperti dibawah ini (bagian
body), kemudian letakkan pada file index.php

58
17.3. Source Code tab section (body)
 Setelah kode tersebut diletakkan pada file index.php, pilih tab
Design
 Kemudian blok teks judul dan form input yang sudah dibuat

59
17.4. Blok Isi File index.php
 Kemudian Cut → Paste ke dalam section Input Data
17.5. Form didalam tab section

60
17.6. Tampilan Menggunakan Tab Section

61
MENGGUNAKAN CHART (BAR)
Langkah-Langkah:
 Buat database chartbar dan tabel chart
Table 7. Chart
 Simpan dalam folder chart dengan nama file index.php
 Buat teks judul
 Buat site baru
 Klik OK

62
 Atur dan sesuaikan field-field didalam form seperti dibawah ini
18.1. Pengaturan Form Insert Record
 Buat recordset dengan nama sayur → pilih Advanced → pilih nama
koneksi

63
18.2. Query chart
 Klik OK
 Masuk ke Windows Explorer. Kemudian browse folder chart
 Letakkan folder chart ke dalam folder chart
 Buka folder chart [chart → examples → bar-charts → example-1].
Kemudian buka file index.html menggunakan dreamweaver
18.3. Buka file index.html
 Pilih tab Code
pada file proses.php

64
18.4. Source Code Chart Bar (head)
 Kembali ke file index.html, copy kode seperti dibawah ini (bagian
body), kemudian letakkan pada file proses.php

65
18.5. Source Code Chart Bar (body)

66
 Setelah kode tersebut diletakkan pada file proses.php, pilih tab
Design
 Kemudian masukkan tabel dibawah teks Loading Graph.. dengan
jumlah rows = 2 dan column = 6
 Isikan nama field disetiap kolom
 Kemudian tarik field dari recordset sayur ke dalam kolom tabel
seperti dibawah ini
18.6. Pengaturan tabel sayuran
 Masukkan Button [Insert → Media → Flash Button] dengan nama =
BACK dan linkkan ke index.php

67
18.7. Tampilan Input Data Menggunakan Chart (Bar)

68
MENGGUNAKAN CHART (PIE)
Langkah-Langkah:
 Buat database chartpie dan tabel mhs
Table 8. Mhs
 Simpan dalam folder pie dengan nama file index.php
 Buat teks judul
 Buat site baru
 Klik OK

69
 Buat recordset dengan nama chart → pilih Advanced → pilih nama
koneksi
19.1. Query mhs
 Klik OK
 Masuk ke Windows Explorer. Kemudian browse folder chart
 Letakkan folder chart ke dalam folder pie
 Buka folder chart [chart → examples → pie-charts → example-1].
Kemudian buka file index.html menggunakan dreamweaver

70
19.2. Buka file index.html
 Pilih tab Code
pada file proses.php
19.3. Source Code Chart Pie (head)
 Kembali ke file index.html, copy kode seperti dibawah ini (bagian
body), kemudian letakkan pada file proses.php

71
19.4. Source Code Chart Pie (body)

72
19.5. Tampilan Input Data Menggunakan Chart (Pie)

73
20. MEMBUAT DATABASE & TABLE
DENGAN MENGGUNAKAN
PHPMYADMIN
 Buka Browser (Disini saya menggunakan firefox)
 Ketikkan ‘localhost/phpmyadmin’ pada address bar → Enter
 Kemudian akan muncul tampilan seperti dibawah ini. Masukkan nama
database pada kotak Create new database → Create
20.1. Membuat Database Mahasiswa
 Masukkan nama tabel dan jumlah field yang akan dibuat→ Go

74
20.2. Membuat tabel data_mhs
 Masukkan nama field, type, dst seperti dibawah ini → Save
20.3. Membuat field
 Jika tabel berhasil dibuat, maka akan muncul tampilan seperti
dibawah ini

75
20.4. Tampilan tabel berhasil dibuat
 Terdapat beberapa tab fungsi pada phpmyadmin yang dapat
memudahkan user untuk mengedit suatu database, berikut
penjelasannya
20.5. Fungsi-fungsi di PhpMyAdmin

76
21. MEMBUAT FORM LOGIN
Langkah-Langkah:
 Buat database login dan tabel admin
Table 9. Admin
 Kemudian masukkan isi field seperti dibawah ini
21.1. Record tabel admin
 Simpan dalam folder login dengan nama file index.php
 Buat teks judul
 Buat site baru
 Masukkan Form [Insert → Form → Form]
 Didalam form, masukkan Log In User [Insert → Application
Objects → User Authentication → Log In User]

77
 Ketika window muncul, isikan sesuai dengan tampilan berikut
21.2. Pengaturan Log In User
 Klik OK
 Pada textfield password, ubah properties type seperti dibawah ini
21.3. Properties type (Password)

78
 Simpan dengan nama berhasil.php dan letakkan didalam folder yang
sama dengan index.php (Jika username dan password yang diinput
oleh user tersedia di record tabel admin, maka file berhasil.php ini
akan terbuka ketika button login diklik)
 Buat teks yang menyatakan bahwa user berhasil login
 Buat recordset dengan nama login
 Isikan nama field disetiap kolom
 Kemudian tarik field dari recordset login ke dalam kolom tabel
 Dibawah tabel tersebut, masukkan Log Out User [Insert →
Application Objects → User Authentication → Log Out User]
 Ketika window muncul, isikan sesuai dengan tampilan berikut
21.4. Pengaturan Log Out User
 Klik OK
 Save file berhasil.php
 Simpan dengan nama gagal.php dan letakkan didalam folder yang
sama dengan index.php (Jika username dan password yang diinput

79
oleh user tidak tersedia di record tabel admin, maka file gagal.php
ini akan terbuka ketika button login diklik)
 Buat teks yang menyatakan bahwa user gagal login
 Kemudian tambahkan teks yang diberi link ke file index.php agar
user dapat kembali melakukan login
 Save file gagal.php

80
21.5. Tampilan Membuat Form Login

81
22. MEMBUAT JAJAK PENDAPAT
Langkah-Langkah:
 Buat database polling dan tabel poll
Table 10. Poll
 Simpan dalam folder mhs dengan nama file index.php
 Buat teks judul
 Buat site baru
 Masukkan radio button disetiap baris. Kemudian edit properties
tiap radio button sesuai dengan field yang sudah dibuat
 Masukkan teks disebelah kanan radio button sebagai keterangan /
penjelas radio button

82
22.1. Radio Button Jajak Pendapat
 Kemudian masukkan Button [Insert → Form → Button] dengan value
= VOTE
 Dibawah button, tambahkan teks ‘LIHAT HASIL’ dan make link ke
grafik.php
 Simpan dengan nama sambung.php dan letakkan didalam folder yang
sama dengan index.php (File sambung.php ini berfungsi sebagai
penyambung file ke database polling. Sebelumnya, kita menggunakan
fasilitas yang tersedia di dreamweaver, yaitu tab Application →
Databases → mySQL Connection.)
 Hapus semua kode yang terdapat di file sambung.php. Kemudian
masukkan script php dibawah ini

83
22.2. Source Code file sambung.php
 Save file grafik.php
 Simpan dengan nama vote.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file vote.php. Kemudian

84
22.3. Source Code file vote.php
 Save file vote.php

85
 Simpan dengan nama grafik.php dan letakkan didalam folder yang
 Buat teks judul
 Kemudian masukkan script dibawah ini

86
22.4. Source Code file grafik.php
 Save file grafik.php

87
22.5. Tampilan Membuat Jajak Pendapat

88
23. MENAMPILKAN INFO & JUMLAH
PENGUNJUNG
Langkah-Langkah:
 Buat database jumlah dan tabel visitors
Table 11. Visitors
 Simpan dalam folder pengunjung dengan nama file index.php
 Buat site baru
 Hapus semua kode yang terdapat di file index.php. Kemudian
masukkan script dibawah ini

89
23.1. Source Code file index.php
 Simpan dengan nama koneksi.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file koneksi.php. Kemudian

90
23.2. Source Code file koneksi.php
 Save file koneksi.php
 Simpan dengan nama jumlah.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file jumlah.php. Kemudian

91
23.3. Source Code file jumlah.php
 Save file jumlah.php

92
23.4. Tampilan Menampilkan Info dan Jumlah Pengunjung

93
24. UPLOAD GAMBAR
Langkah-Langkah:
 Buat database gambar dan tabel simpan
Table 12. Simpan
 Simpan dalam folder uploadgambar dengan nama file index.php
 Buat site baru

94
 Simpan dengan nama koneksi.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file koneksi.php. Kemudian

95
24.2. Source Code file koneksi.php
 Save file koneksi.php

96
24.3. Tampilan Upload Gambar

97
25. MEMBUAT COOKIES
Langkah-Langkah:
 Simpan dalam folder cookies dengan nama file create.php
 Hapus semua kode yang terdapat di file create.php. Kemudian
25.1. Source Code file create.php
 Save file create.php

98
 Simpan dengan nama check.php dan letakkan didalam folder yang
sama dengan create.php
 Hapus semua kode yang terdapat di file check.php. Kemudian
25.2. Source Code file check.php
 Save file check.php
 Simpan dengan nama retrieve.php dan letakkan didalam folder yang

99
 Hapus semua kode yang terdapat di file retrieve.php. Kemudian
25.3. Source Code file retrieve.php
 Save file retrieve.php
 Simpan dengan nama modify.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file modify.php. Kemudian

100
25.4. Source Code file modify.php
 Save file modify.php
 Simpan dengan nama delete.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file delete.php. Kemudian

101
25.5. Source Code file delete.php
 Save file delete.php

102
25.6. Tampilan Membuat Cookies

103
26. MEMBUAT SESSION
Langkah-Langkah:
 Simpan dalam folder session dengan nama file index.php

104
 Simpan dengan nama periksa.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file periksa.php. Kemudian
26.2. Source Code file periksa.php
 Save file periksa.php
 Simpan dengan nama hapus.php dan letakkan didalam folder yang
 Hapus semua kode yang terdapat di file hapus.php. Kemudian

105
26.3. Source Code file hapus.php
 Save file hapus.php

106
26.4. Tampilan Membuat Session

107
27. MEMBUAT KONVERSI SUHU (1)
Langkah-Langkah:
 Simpan dalam folder suhu1 dengan nama file index.php
 Kemudian masukkan script dibawah ini
27.1. Source Code file index.php (1)

108

109
27.3. Tampilan Membuat Konversi Suhu (1)

110
28. MEMBUAT KONVERSI SUHU (2)
Langkah-Langkah:
 Simpan dalam folder suhu2 dengan nama file index.php

111
 Simpan dengan nama convert_suhu.php dan letakkan didalam folder
 Hapus semua kode yang terdapat di file convert_suhu.php.
Kemudian masukkan script php dibawah ini

112
28.3. Source Code file convert_suhu.php (1)

113

114
 Save file convert_suhu.php

115
28.6. Tampilan Membuat Konversi Suhu (2)

modul pemrograman web dengan dreamweaver, sql & php

More Related Content

Viewers also liked

Similar to modul pemrograman web dengan dreamweaver, sql & php

More from Ismi Islamia

modul pemrograman web dengan dreamweaver, sql & php