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.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.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


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.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

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


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


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


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]


ini → klik OK

27

10.7. Pengaturan Form Delete

Save file delete.php


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]


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]


ini → klik OK

11.2. Form Insert Record

Save file input.php


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


Simpan dalam folder penjualan dengan nama file index.php

Buat teks judul


Kemudian isikan nama field disetiap kolom seperti dibawah ini

33


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


Save file index.php


34

12.4. Tampilan Menghitung Transaksi Penjualan

13.MENENTUKAN NILAI TERTINGGI

DAN TERENDAH

Langkah-Langkah:

35

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

Koneksikan database




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


37

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>

38

13.4. Source Code Nilai tertinggi dan terendah

Save file proses.php

39


13.5. Tampilan Menentukan Nilai Tertinggi dan Terendah

40

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

Koneksikan database



Ketika window muncul, hilangkan kolom no pada kotak form

fields

Klik OK


Save file index.php


41



Buat recordset dengan nama bilangan → pilih Advanced →

pilih nama koneksi


14.1. Query bilangan

Klik OK



dibawah kode <body>

14.2. Source Code Bilangan Ganjil & Genap



42

14.3. Tampilan Menentukan Bilangan Ganjil dan Genap

15.MENENTUKAN GRADE NILAI

Langkah-Langkah:

43

Buat database mhs dan tabel grade


Table 5. Grade


Simpan dalam folder grade dengan nama file index.php

Buat teks judul

Buat site baru

Koneksikan database



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


Save file index.php




Buat recordset dengan nama grade → pilih Advanced → pilih

nama koneksi


44

15.1. Query grade

Klik OK



dibawah kode <body>

15.2. Source Code Grade Nilai



45

15.3. Tampilan Menentukan Grade Nilai

16.INPUT DATA DENGAN

MENGGUNAKAN JQUERY

46

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

Koneksikan database




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

16.7. Pengaturan Form Insert Record

Save file index.php




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



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


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


17.6. Tampilan Menggunakan Tab Section

58


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

Koneksikan database





Klik OK

Atur dan sesuaikan field-field didalam form seperti dibawah

ini

59

18.1. Pengaturan Form Insert Record

Save file index.php




Buat recordset dengan nama sayur → pilih Advanced → pilih

nama koneksi


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


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 Button [Insert → Media → Flash Button] dengan

nama = BACK dan linkkan ke index.php



63

18.7. Tampilan Input Data Menggunakan Chart (Bar)

64


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

Koneksikan database





Klik OK


Save file index.php

65




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

19.2. Buka file index.html

Pilih tab Code

66


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)


68


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


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]

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


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


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 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


76

21.5. Tampilan Membuat Form Login

22.MEMBUAT JAJAK PENDAPAT

77

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

Koneksikan database


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


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

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



Hapus semua kode yang terdapat di file vote.php.


80

22.3. Source Code file vote.php

81

Save file vote.php


Simpan dengan nama grafik.php dan letakkan didalam folder


Buat teks judul


Kemudian masukkan script dibawah ini

82

22.4. Source Code file grafik.php

Save file grafik.php

83


22.5. Tampilan Membuat Jajak Pendapat

84

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

85

23.1. Source Code file index.php

Save file index.php


Simpan dengan nama koneksi.php dan letakkan didalam



Hapus semua kode yang terdapat di file koneksi.php.


86

23.2. Source Code file koneksi.php

Save file koneksi.php


Simpan dengan nama jumlah.php dan letakkan didalam



Hapus semua kode yang terdapat di file jumlah.php.


87

23.3. Source Code file jumlah.php

Save file jumlah.php

88


23.4. Tampilan Menampilkan Info dan Jumlah Pengunjung

89

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




90


Save file index.php


Simpan dengan nama koneksi.php dan letakkan didalam



Hapus semua kode yang terdapat di file koneksi.php.


91

24.2. Source Code file koneksi.php

Save file koneksi.php


92

24.3. Tampilan Upload Gambar

25.MEMBUAT COOKIES

Langkah-Langkah:

93


Simpan dalam folder cookies dengan nama file create.php


Hapus semua kode yang terdapat di file create.php.


25.1. Source Code file create.php

Save file create.php


Simpan dengan nama check.php dan letakkan didalam folder

yang sama dengan create.php


Hapus semua kode yang terdapat di file check.php. Kemudian


94

25.2. Source Code file check.php

Save file check.php


Simpan dengan nama retrieve.php dan letakkan didalam

folder yang sama dengan create.php


Hapus semua kode yang terdapat di file retrieve.php.


95

25.3. Source Code file retrieve.php

Save file retrieve.php


Simpan dengan nama modify.php dan letakkan didalam



Hapus semua kode yang terdapat di file modify.php.


96

25.4. Source Code file modify.php

Save file modify.php


Simpan dengan nama delete.php dan letakkan didalam



Hapus semua kode yang terdapat di file delete.php. Kemudian


97

25.5. Source Code file delete.php

Save file delete.php


98

25.6. Tampilan Membuat Cookies

26.MEMBUAT SESSION

99

Langkah-Langkah:


Simpan dalam folder session dengan nama file index.php




Save file index.php


100

Simpan dengan nama periksa.php dan letakkan didalam



Hapus semua kode yang terdapat di file periksa.php.


26.2. Source Code file periksa.php

Save file periksa.php


Simpan dengan nama hapus.php dan letakkan didalam folder



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


102

26.4. Tampilan Membuat Session

27.MEMBUAT KONVERSI SUHU (1)

103

Langkah-Langkah:


Simpan dalam folder suhu1 dengan nama file index.php



27.1. Source Code file index.php (1)

104


Save file index.php

105


27.3. Tampilan Membuat Konversi Suhu (1)

28.MEMBUAT KONVERSI SUHU (2)

106

Langkah-Langkah:


Simpan dalam folder suhu2 dengan nama file index.php





107


Save file index.php


Simpan dengan nama convert_suhu.php dan letakkan

didalam folder yang sama dengan index.php


Hapus semua kode yang terdapat di file convert_suhu.php.


108

28.3. Source Code file convert_suhu.php (1)

109


110


Save file convert_suhu.php


111

28.6. Tampilan Membuat Konversi Suhu (2)

112

modul pemrograman web dengan dreamweaver, sql & php

Software