[2012210047] Tugas Pem Web & SQL
-
Upload
ismi-islamia -
Category
Documents
-
view
238 -
download
1
description
Transcript of [2012210047] Tugas Pem Web & SQL
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
iii
DAFTAR TABEL
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
iv
DAFTAR GAMBAR
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.3. Nama-nama field 15
7.4. Tampilan Local Info 16
7.5. Tampilan Remote Info 16
v
7.6. Tampilan Testing Server 17
7.7. Memilih MySQL Connection 17
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.2. Nama-nama field 36
12.3. Query brg 36
12.4. Tampilan Menghitung Transaksi Penjualan 37
vi
13 13.1. Form Insert Record 39
13.2. Pengaturan tata letak 39
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
vii
18.3. Buka file index.html 63
18.4. Source Code Chart Bar (head) 64
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
viii
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
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
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
7.3. Nama-nama field
Membuat site baru [Site → New Site → Advanced]
o Local Info
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
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
23
Tampilan Di Browser:
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]
Ketika window muncul, isikan sesuai dengan window dibawah ini →
klik OK
32
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
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]
Ketika window muncul, isikan sesuai dengan window dibawah ini →
klik OK
11.2. Form Insert Record
Save file input.php
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
Buka dreamweaver → php
Simpan dalam folder penjualan dengan nama file index.php
Buat teks judul
36
Masukkan tabel dengan jumlah rows = 2 dan column = 8
Kemudian isikan nama field disetiap kolom seperti dibawah ini
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
38
13. MENENTUKAN NILAI TERTINGGI
DAN TERENDAH
Langkah-Langkah:
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
39
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
40
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>
43
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
44
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 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
46
15. MENENTUKAN GRADE NILAI
Langkah-Langkah:
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]
47
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
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
49
16. INPUT DATA DENGAN
MENGGUNAKAN JQUERY
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
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
54
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
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
Copy kode seperti dibawah ini (bagian head), kemudian letakkan
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
Save file index.php
61
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
62
Atur dan sesuaikan field-field didalam form seperti dibawah ini
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
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
Copy kode seperti dibawah ini (bagian head), kemudian letakkan
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
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 perintah Repeated Region
Masukkan Button [Insert → Media → Flash Button] dengan nama =
BACK dan linkkan ke index.php
Save file proses.php
68
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
69
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 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
70
19.2. Buka file index.html
Pilih tab Code
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
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
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]
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)
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
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
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
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
81
22. MEMBUAT JAJAK PENDAPAT
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
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
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
83
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
85
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
88
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
89
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
90
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
93
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
94
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
97
25. MEMBUAT COOKIES
Langkah-Langkah:
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]
98
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
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)
99
Hapus semua kode yang terdapat di file retrieve.php. Kemudian
masukkan script dibawah ini
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
100
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
103
26. MEMBUAT SESSION
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
104
Save file index.php
Buat file baru [File → New → Dynamic Page → PHP → Create]
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
107
27. MEMBUAT KONVERSI SUHU (1)
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)
110
28. MEMBUAT KONVERSI SUHU (2)
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)
111
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