modul pemrograman web dengan dreamweaver, sql & php
-
Upload
ismi-islamia -
Category
Software
-
view
83 -
download
2
Transcript of 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
DAFTAR MATERI
NO MATERI HAL1 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
22 MEMBUAT JAJAK PENDAPAT 81-87
i
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
ii
NO. TABEL
NAMA TABEL NO. MATER
I
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
iii
NO. MATER
I
NO. GAMBA
R
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.3. Nama-nama field 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
7.8. Membuat koneksi 18
7.9. Memilih Recordset (Query) 18
iv
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.2. Nama-nama field 36
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
13.3. Query nilai 40
v
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
vi
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
24 24.1. Source Code file index.php 94
vii
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 26.1. Source Code file index.php 103
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.4. Source Code file convert_suhu.php (2) 113
28.5. Source Code file convert_suhu.php (3) 114
28.6. Tampilan Membuat Konversi Suhu (2) 115
viii
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)
1
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
Tampilan di Browser:
2
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
2. MEMBUKA MYSQL DI CMD Pastikkan appserv/mysql sudah terinstall di komputer
3
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
3. MEMBUAT DATABASE DAN
TABEL DI MYSQL
4
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
4. MEMASUKKAN ISI FIELD KE
DALAM TABEL
5
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
5. PERINTAH-PERINTAH DI MYSQL SELECT : Digunakan untuk memilih data dari tabel database
Menampilkan data dalam kolom tertentu
Ex: select umur from web;
6
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;
UPDATE: Digunakan untuk mengubah/memperbarui data di
tabel database
Ex: update web set jurusan='si' where nama='mia';
7
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;
6. MEMBUAT DREAMWEAVER
SEDERHANA
Langkah-Langkah:
Pastikan software dreamweaver sudah terinstall di komputer
Buka dreamweaver
8
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]
6.2. Menyimpan File index.php
Masukkan tabel [Insert → Table → ketika window muncul,
isikan sesuai dengan tampilan berikut → klik OK]
9
6.3. Memasukkan tabel kedalam File index.php
Blok baris pertama → klik kanan → table → merge table
6.4. Blok dan Merge Table
Lakukan cara yang sama pada baris terakhir
Buatlah tabel tersebut sama persis seperti tabel dibawah ini
10
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>
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
11
6.9. Nama-nama field
Kemudian Save
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
12
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
13
Masukkan tabel [Insert → Table → ketika window muncul,
isikan sesuai dengan tampilan berikut → klik OK]
7.2. Memasukkan tabel kedalam file index.php
Masukkan nama field di setiap kolom
7.3. Nama-nama field
Membuat site baru [Site → New Site → Advanced]
o Local Info
14
7.4. Tampilan Local Info
o Remote Info
7.5. Tampilan Remote Info
o Testing Server
15
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
16
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
17
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
18
Tampilan Di Browser:
7.12. Tampilan Menghubungkan Koneksi DW & MySQL
19
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
20
8.2. Pengaturan Repeated Region
Save
Tampilan Di Browser:
21
8.3. Tampilan Membuat Navigation Bar di DW (1)
Ketika button Next di klik:
8.4. Tampilan Membuat Navigation Bar di DW (2)
9. MEMBUAT TABEL
MENGGUNAKAN PRIMARY KEY
22
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
10.MEMBUAT OPTION EDIT DAN
DELETE DI DREAMWEAVER
Langkah-Langkah:
23
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
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
24
Ketika window muncul, isikan nama file dengan edit.php, lalu
klik Parameters
10.2. Jendela make link (edit)
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
25
10.4. Jendela make link (delete)
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
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
26
Masukkan form edit [Insert → Application Objects → Update
Record → Record Update From Wizard]
Ketika window muncul, isikan sesuai dengan window dibawah
ini → klik OK
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]
Ketika window muncul, isikan sesuai dengan window dibawah
ini → klik OK
27
10.7. Pengaturan Form Delete
Save file delete.php
Tampilan Di Browser:
28
10.8. Tampilan Membuat Option Edit dan Delete
29
11.MEMBUAT BUTTON & FORM
INPUT DATA DI DREAMWEAVER (Masih berada di file index.php No. 10)
Masukkan flash button [Insert → Media → Flash Button]
Ketika window muncul, isikan sesuai dengan window dibawah
ini → klik OK
11.1. Jendela Flash Button
Save file index.php
Buat file PHP baru dengan nama input.php dan letakkan di
folder yang sama dengan index.php
30
Buat judul
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
Ketika window muncul, isikan sesuai dengan window dibawah
ini → klik OK
11.2. Form Insert Record
Save file input.php
Tampilan Di Browser:
31
11.3. Tampilan Membuat Button dan Form Input Data
32
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
Buka dreamweaver → php
Simpan dalam folder penjualan dengan nama file index.php
Buat teks judul
Masukkan tabel dengan jumlah rows = 2 dan column = 8
Kemudian isikan nama field disetiap kolom seperti dibawah ini
33
12.2. Nama-nama field
Buat site baru
Koneksikan database
Buat recordset dengan nama transaksi → pilih Advanced →
pilih nama koneksi
Pada kotak SQL, isikan code berikut
12.3. Query brg
Klik OK
Kemudian tarik field ke dalam kolom tabel
Masukkan perintah Repeated Region
Save file index.php
Tampilan Di Browser:
34
12.4. Tampilan Menghitung Transaksi Penjualan
13.MENENTUKAN NILAI TERTINGGI
DAN TERENDAH
Langkah-Langkah:
35
Buat database nilai_mhs dan tabel nilai
Masukkan field-field dengan ketentuan dibawah ini
Table 3. Nilai
Buka dreamweaver → php
Simpan dalam folder nilai dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
Ketika window muncul, isikan sesuai dengan window dibawah
ini → klik OK
36
13.1. Form Insert Record
Klik OK
Ubah nama field dan atur lebar textfield
13.2. Pengaturan tata letak
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP →
Create]
Simpan dengan nama proses.php dan letakkan didalam
folder yang sama dengan index.php
37
Buat recordset dengan nama nilai → pilih Advanced →
pilih nama koneksi
Pada kotak SQL, isikan code berikut
13.3. Query nilai
Klik OK
Pilih tab Code (terdapat di kiri atas)
Cari kode <body>. Kemudian masukkan kode berikut
dibawah kode <body>
38
13.4. Source Code Nilai tertinggi dan terendah
Save file proses.php
39
Tampilan Di Browser:
13.5. Tampilan Menentukan Nilai Tertinggi dan Terendah
40
14.MENENTUKAN BILANGAN
GANJIL DAN GENAP
Langkah-Langkah:
Buat database angka dan tabel bilangan
Masukkan field-field dengan ketentuan dibawah ini
Table 4. Bilangan
Buka dreamweaver → php
Simpan dalam folder bilangan dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
Ketika window muncul, hilangkan kolom no pada kotak form
fields
Klik OK
Ubah nama field dan atur lebar textfield
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
41
Simpan dengan nama proses.php dan letakkan didalam
folder yang sama dengan index.php
Buat recordset dengan nama bilangan → pilih Advanced →
pilih nama koneksi
Pada kotak SQL, isikan code berikut
14.1. Query bilangan
Klik OK
Pilih tab Code (terdapat di kiri atas)
Cari kode <body>. Kemudian masukkan kode berikut
dibawah kode <body>
14.2. Source Code Bilangan Ganjil & Genap
Save file proses.php
Tampilan Di Browser:
42
14.3. Tampilan Menentukan Bilangan Ganjil dan Genap
15.MENENTUKAN GRADE NILAI
Langkah-Langkah:
43
Buat database mhs dan tabel grade
Masukkan field-field dengan ketentuan dibawah ini
Table 5. Grade
Buka dreamweaver → php
Simpan dalam folder grade dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
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
Ubah nama field dan atur lebar textfield
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama proses.php dan letakkan didalam
folder yang sama dengan index.php
Buat recordset dengan nama grade → pilih Advanced → pilih
nama koneksi
Pada kotak SQL, isikan code berikut
44
15.1. Query grade
Klik OK
Pilih tab Code (terdapat di kiri atas)
Cari kode <body>. Kemudian masukkan kode berikut
dibawah kode <body>
15.2. Source Code Grade Nilai
Save file proses.php
Tampilan Di Browser:
45
15.3. Tampilan Menentukan Grade Nilai
16.INPUT DATA DENGAN
MENGGUNAKAN JQUERY
46
Langkah-Langkah:
Buat database mhs dan tabel inputdata
Masukkan field-field dengan ketentuan dibawah ini
Table 6. Inputdata
Buka dreamweaver → php
Simpan dalam folder inputdata dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
Ketika window muncul, pilih nama koneksi dan tabel. Pada
kolom After inserting, go to masukkan proses.php
Klik OK
Masuk ke Windows Explorer. Kemudian browse jquery –ui
Letakkan folder jquery –ui ke dalam folder inputdata
47
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
48
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)
49
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
50
51
16.7. Pengaturan Form Insert Record
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama proses.php dan letakkan didalam
folder yang sama dengan index.php
Buat recordset dengan nama data
Buat teks judul
Masukkan tabel dengan jumlah rows = 2 dan column = 8
Kemudian isikan nama field disetiap kolom
Kemudian tarik field dari recordset data ke dalam kolom
tabel
Masukkan perintah Repeated Region
Masukkan Button [Insert → Media → Flash Button] dengan
nama = BACK dan linkkan ke index.php
Save file proses.php
Tampilan Di Browser:
52
16.8. Tampilan Input Data dengan Menggunakan JQuery
17.MENGGUNAKAN TAB SECTION
53
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
Copy kode seperti dibawah ini (bagian head), kemudian
letakkan pada file index.php
54
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
55
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
56
17.4. Blok Isi File index.php
Kemudian Cut → Paste ke dalam section Input Data
17.5. Form didalam tab section
Save file index.php
57
Tampilan Di Browser:
17.6. Tampilan Menggunakan Tab Section
58
18.INPUT DATA DENGAN
MENGGUNAKAN CHART (BAR)
Langkah-Langkah:
Buat database chartbar dan tabel chart
Masukkan field-field dengan ketentuan dibawah ini
Table 7. Chart
Buka dreamweaver → php
Simpan dalam folder chart dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
Ketika window muncul, pilih nama koneksi dan tabel. Pada
kolom After inserting, go to masukkan proses.php
Klik OK
Atur dan sesuaikan field-field didalam form seperti dibawah
ini
59
18.1. Pengaturan Form Insert Record
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama proses.php dan letakkan didalam
folder yang sama dengan index.php
Buat recordset dengan nama sayur → pilih Advanced → pilih
nama koneksi
Pada kotak SQL, isikan code berikut
60
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
Copy kode seperti dibawah ini (bagian head), kemudian
letakkan pada file proses.php
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
61
18.5. Source Code Chart Bar (body)
62
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 perintah Repeated Region
Masukkan Button [Insert → Media → Flash Button] dengan
nama = BACK dan linkkan ke index.php
Save file proses.php
Tampilan Di Browser:
63
18.7. Tampilan Input Data Menggunakan Chart (Bar)
64
19.INPUT DATA DENGAN
MENGGUNAKAN CHART (PIE)
Langkah-Langkah:
Buat database chartpie dan tabel mhs
Masukkan field-field dengan ketentuan dibawah ini
Table 8. Mhs
Buka dreamweaver → php
Simpan dalam folder pie dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan Form Insert Record [Insert → Application Objects
→ Insert Record → Record Insertion From Wizard]
Ketika window muncul, pilih nama koneksi dan tabel. Pada
kolom After inserting, go to masukkan proses.php
Klik OK
Ubah nama field dan atur lebar textfield
Save file index.php
65
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama proses.php dan letakkan didalam
folder yang sama dengan index.php
Buat recordset dengan nama chart → pilih Advanced → pilih
nama koneksi
Pada kotak SQL, isikan code berikut
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
19.2. Buka file index.html
Pilih tab Code
66
Copy kode seperti dibawah ini (bagian head), kemudian
letakkan 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
67
19.4. Source Code Chart Pie (body)
Save file proses.php
68
Tampilan Di Browser:
19.5. Tampilan Input Data Menggunakan Chart (Pie)
69
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
70
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
71
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
21.MEMBUAT FORM LOGIN
72
Langkah-Langkah:
Buat database login dan tabel admin
Masukkan field-field dengan ketentuan dibawah ini
Table 9. Admin
Kemudian masukkan isi field seperti dibawah ini
21.1. Record tabel admin
Buka dreamweaver → php
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]
Ketika window muncul, isikan sesuai dengan tampilan berikut
73
21.2. Pengaturan Log In User
Klik OK
Pada textfield password, ubah properties type seperti
dibawah ini
21.3. Properties type (Password)
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
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
74
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
Masukkan tabel dengan jumlah rows = 2 dan column = 3
Isikan nama field disetiap kolom
Kemudian tarik field dari recordset login ke dalam kolom
tabel
Masukkan perintah Repeated Region
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
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama gagal.php dan letakkan didalam folder
yang sama dengan index.php (Jika username dan password
yang diinput 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
75
Kemudian tambahkan teks yang diberi link ke file index.php
agar user dapat kembali melakukan login
Save file gagal.php
Tampilan Di Browser:
76
21.5. Tampilan Membuat Form Login
22.MEMBUAT JAJAK PENDAPAT
77
Langkah-Langkah:
Buat database polling dan tabel poll
Masukkan field-field dengan ketentuan dibawah ini
Table 10. Poll
Buka dreamweaver → php
Simpan dalam folder mhs dengan nama file index.php
Buat teks judul
Buat site baru
Koneksikan database
Masukkan tabel dengan jumlah rows = 4 dan column = 1
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
22.1. Radio Button Jajak Pendapat
78
Kemudian masukkan Button [Insert → Form → Button]
dengan value = VOTE
Dibawah button, tambahkan teks ‘LIHAT HASIL’ dan make link
ke grafik.php
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
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.)
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file sambung.php.
Kemudian masukkan script php dibawah ini
79
22.2. Source Code file sambung.php
Save file grafik.php
Buat file baru [File → New → Dynamic Page → PHP →
Create]
Simpan dengan nama vote.php dan letakkan didalam
folder yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file vote.php.
Kemudian masukkan script php dibawah ini
80
22.3. Source Code file vote.php
81
Save file vote.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama grafik.php dan letakkan didalam folder
yang sama dengan index.php
Buat teks judul
Pilih tab Code (terdapat di kiri atas)
Kemudian masukkan script dibawah ini
82
22.4. Source Code file grafik.php
Save file grafik.php
83
Tampilan Di Browser:
22.5. Tampilan Membuat Jajak Pendapat
84
23.MENAMPILKAN INFO & JUMLAH
PENGUNJUNG
Langkah-Langkah:
Buat database jumlah dan tabel visitors
Masukkan field-field dengan ketentuan dibawah ini
Table 11. Visitors
Buka dreamweaver → php
Simpan dalam folder pengunjung dengan nama file index.php
Buat site baru
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file index.php. Kemudian
masukkan script dibawah ini
85
23.1. Source Code file index.php
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama koneksi.php dan letakkan didalam
folder yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file koneksi.php.
Kemudian masukkan script php dibawah ini
86
23.2. Source Code file koneksi.php
Save file koneksi.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama jumlah.php dan letakkan didalam
folder yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file jumlah.php.
Kemudian masukkan script php dibawah ini
87
23.3. Source Code file jumlah.php
Save file jumlah.php
88
Tampilan Di Browser:
23.4. Tampilan Menampilkan Info dan Jumlah Pengunjung
89
24.UPLOAD GAMBAR
Langkah-Langkah:
Buat database gambar dan tabel simpan
Masukkan field-field dengan ketentuan dibawah ini
Table 12. Simpan
Buka dreamweaver → php
Simpan dalam folder uploadgambar dengan nama file
index.php
Buat site baru
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file index.php. Kemudian
masukkan script dibawah ini
90
24.1. Source Code file index.php
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama koneksi.php dan letakkan didalam
folder yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file koneksi.php.
Kemudian masukkan script php dibawah ini
91
24.2. Source Code file koneksi.php
Save file koneksi.php
Tampilan Di Browser:
92
24.3. Tampilan Upload Gambar
25.MEMBUAT COOKIES
Langkah-Langkah:
93
Buka dreamweaver → php
Simpan dalam folder cookies dengan nama file create.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file create.php.
Kemudian masukkan script dibawah ini
25.1. Source Code file create.php
Save file create.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama check.php dan letakkan didalam folder
yang sama dengan create.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file check.php. Kemudian
masukkan script dibawah ini
94
25.2. Source Code file check.php
Save file check.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama retrieve.php dan letakkan didalam
folder yang sama dengan create.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file retrieve.php.
Kemudian masukkan script dibawah ini
95
25.3. Source Code file retrieve.php
Save file retrieve.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama modify.php dan letakkan didalam
folder yang sama dengan create.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file modify.php.
Kemudian masukkan script dibawah ini
96
25.4. Source Code file modify.php
Save file modify.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama delete.php dan letakkan didalam
folder yang sama dengan create.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file delete.php. Kemudian
masukkan script dibawah ini
97
25.5. Source Code file delete.php
Save file delete.php
Tampilan Di Browser:
98
25.6. Tampilan Membuat Cookies
26.MEMBUAT SESSION
99
Langkah-Langkah:
Buka dreamweaver → php
Simpan dalam folder session dengan nama file index.php
Hapus semua kode yang terdapat di file index.php. Kemudian
masukkan script dibawah ini
26.1. Source Code file index.php
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
100
Simpan dengan nama periksa.php dan letakkan didalam
folder yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file periksa.php.
Kemudian masukkan script php dibawah ini
26.2. Source Code file periksa.php
Save file periksa.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama hapus.php dan letakkan didalam folder
yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file hapus.php. Kemudian
masukkan script php dibawah ini
101
26.3. Source Code file hapus.php
Save file hapus.php
Tampilan Di Browser:
102
26.4. Tampilan Membuat Session
27.MEMBUAT KONVERSI SUHU (1)
103
Langkah-Langkah:
Buka dreamweaver → php
Simpan dalam folder suhu1 dengan nama file index.php
Pilih tab Code (terdapat di kiri atas)
Kemudian masukkan script dibawah ini
27.1. Source Code file index.php (1)
104
27.2. Source Code file index.php (2)
Save file index.php
105
Tampilan Di Browser:
27.3. Tampilan Membuat Konversi Suhu (1)
28.MEMBUAT KONVERSI SUHU (2)
106
Langkah-Langkah:
Buka dreamweaver → php
Simpan dalam folder suhu2 dengan nama file index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file index.php. Kemudian
masukkan script dibawah ini
28.1. Source Code file index.php (1)
107
28.2. Source Code file index.php (2)
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
Simpan dengan nama convert_suhu.php dan letakkan
didalam folder yang sama dengan index.php
Pilih tab Code (terdapat di kiri atas)
Hapus semua kode yang terdapat di file convert_suhu.php.
Kemudian masukkan script php dibawah ini
108
28.3. Source Code file convert_suhu.php (1)
109
28.4. Source Code file convert_suhu.php (2)
110
28.5. Source Code file convert_suhu.php (3)
Save file convert_suhu.php
Tampilan Di Browser:
111
28.6. Tampilan Membuat Konversi Suhu (2)
112