Modul Web Programming I

MODUL
Web Programming I

Oleh

Yustina Meisella Kristania

Program Studi Sistem Informasi

Sekolah Tinggi Manajemen Informatika dan Komputer Nusa Mandiri
Jakarta
2018

Yustina meisella kristania 1

Modul Web Programming I

Membuat Site Definition

Site Definition merupakan hal penting dalam mengkolaborasikan antara Dreamweaver dan PHP.
Site definition pada dasarnya mendefinisikan dimana letak penyimpanan file (situs),
menggunakan teknologi server apa, menggunakan database apa, bagaimana koneksi dengan
server dll. Dengan adanya site definition akan memudahkan developer untuk membangun situs
web. Begitu pula, kesalahan dalam penentuan site definition akan berpengaruh terhadap
pembuatan situs web.

1. Buka Macromedia Dreamweaver 8

2. Pilih menu Site > New Site.

3. Akan ditampilkan window Site Definition. Tentukan (1) nama situs, (2) alamat situs dan klik
tombol (3) Next. Perhatikan gambar.

Yustina meisella kristania 2

Modul Web Programming I

4. Selanjutnya kita harus menentukan apakah akan menggunakan teknologi server (1) dan teknologi
server apa yang akan digunakan (2). Karena kita akan menggunakan PHP dan MySQL maka pilih
teknologi server PHP MySQL (2). Klik tombo (3) Next > untuk melanjutkan.

5. Proses selanjutnya akan ditanyakan bagaimana kita bekerja dengan file kita selama proses development
(1). Jika kita membuat file di komputer kita sendiri atau di
komputer lokal, maka pilih Edit and test locally (my testing server is on this computer). Tentukan juga
letak penyimpanan file-file situs

(2). Letak file penyimpanan situs php tidak boleh sembarangan, harus di DOCUMENT ROOT. Misal :
C:\\xampp\htdocs\penjualan_nim

Yustina meisella kristania 3

Modul Web Programming I

6. Window selanjutnya akan ditampilkan halaman untuk testing server. Tentukan alamat situs web
(biasanya berupa http://localhost/nama-folder-penyimpanan/). Jika diperlukan kita dapat mencoba
alamat URL tersebut sudah benar atau belum dengan menekan tombol Test URL (2) dan jika sudah benar
akan ditampilkan pesan konfirmasi (3). Klik tombol Next (4) untuk melanjutkan.

7. Pada window selanjutnya akan ditanyakan apakah akan menggunakan komputer remote. Pilih No (1)
Yustina meisella kristania 4
Modul Web Programming I
jika tidak menggunakan komputer remote. Pilih Next (2) untuk melanjutkan.

Yustina meisella kristania 5

Modul Web Programming I

8. Selanjutnya akan ditampilkan Site Summary (1) yang menampilkan setting yang telah dilakukan. Klik
Done (2) untuk mengakhiri proses pendefinisian situs.

Yustina meisella kristania 6

Modul Web Programming I

Membuat Halaman PHP

Dalam praktikum ini akan dijelaskan bagaimana membuat halaman baru di situs yang telah didefinisikan
di praktikum sebelumnya. Setelah selesai membuat situs maka akan tampil situs site pada menu files

Yustina meisella kristania 7

Modul Web Programming I

Membuat folder dan file pada site penjualan_nim

Langkah-langkahnya adalah sebagai berikut:

1. Klik kanan site penjualan_nim, pilih new folder, kemudian buatlah folder admin, image dan
member, kemudian akan tampil folder-folder yang kita buat tadi.

Yustina meisella kristania 8

Modul Web Programming I

2. Klik kanan site folder admin, pilih new file, kemudian buatlah file outputbarang.php,
inputbarang.php, editbarang.php dan search barang.php. kemudian akan tampil file-file yang kita
buat tadi

Yustina meisella kristania 9

Modul Web Programming I

Membuat connection

Sebelum membuat connection aktifkan terlebih dahulu salah satu files pada table admin misalnya
outputbarang.php dengan cara double klik file tersebut.
Untuk membuat connection langkah-langkahnya adalah sebagai berikut:

1. Buka menu Application, pilih menu Databases, pilih tanda plus [+], kemudian pilih MySQL
Connection

2. Maka muncul kotak dialog MySQL Connection

- Isikan nama koneksinya(1),
- isikan nama server yang digunakan (2),
- isikan user name (3),
- pilih database yang akan digunakan (4),
- klik ok jika semuanya sudah fix (5)

Yustina meisella kristania 10

Modul Web Programming I

3. Setelah berhasil maka akan muncul connection yang kita buat tadi pada menu files databases
dengan table yang ada pada databasesnya. Dan secara otomatis pada site penjualan_nim
akan menambah folder dan file connection.

Yustina meisella kristania 11

Modul Web Programming I

Mengolah table barang

Halaman outputbarang.php

1. Desain halaman outputbarang.php sesuai kebutuhan

Yustina meisella kristania 12

Modul Web Programming I

2. Buatlah recordset untuk outputbarang.php.

- masuk ke menu Application,
- pilih menu Binding,
- pilih tanda plust[+],
- pilih dan klik Recordset (Query)

Yustina meisella kristania 13

Modul Web Programming I

3. Maka akan muncul jendela Recordset

- ketikan nama recordset(1),
- pilih koneksi yang digunakan(2),
- pilih table yang digunakan(3),
- pilih columns yang akan dipakai all untuk semua column sedangkan selected untuk
column terpilih (4),
- pilih filter None karena dalam halaman outputbarang.php kita tidak menggunakan filter(5),
- klik OK(6)

4. Setelah selesai maka dalam Binding akan muncul recordset yang kita buat tadi. Selanjutnya
mengisikan field dari recordset dalam table dengan cara drag field-field tersebut ke kolom
aktif dan sesuaikan.

Yustina meisella kristania 14

Modul Web Programming I

5. Untuk gambar jangan diisi recordset tetapi pilih menu insert, image

- Muncul jendela untuk memilih folder penyimpanan gambar, maka pilih folder image, lalu
ketikan file name terserah anda misalnya nama anda, lalu klik OK

Yustina meisella kristania 15

Modul Web Programming I

- Kemudian tampil icon image pada halaman outputbarang.php

- Kemudian ke tampilan coding, file name yang kita buat silahkan dihapus kemudian diganti
dengan recordset column gambar

Yustina meisella kristania 16

Modul Web Programming I
- Atur ukuran gambar sesuai dengan kebutuhan. Width untuk lebar gambar, sedangkan
height untuk tinggi gambar (dalam satuan pixel)

6. Repeat region
- Blok kolom yang mana isi kolom tersebut merupakan record yang akan ditampilkan secara
berulang
- Pada menu Application -> Server Behaviour -> [+], pilih Repeat Region

- Muncul jendela repeat Region

- Pilih recordset yang digunakan
- Show – record at a time maksudnya yaitu banyaknya record yang akan ditampilkan dalam
browser, all record untuk menampilkan seluruh record

Yustina meisella kristania 17

Modul Web Programming I

Yustina meisella kristania 18

Modul Web Programming I

7. Menyeting hyperlink first

- Blok “first”
- Pada server behavior pilih recordset paging
- Pilih move to first page (menuju halaman pertama)
- Klik OK pada jendela Move To First Page

8. Menyeting hyperlink Previous

- Blok “Prev”
- Pada server behavior pilih recordset paging
- Pilih move to Previous page (menuju halaman sebelumnya)
- Klik OK pada jendela Move To Previous Page

Yustina meisella kristania 19

Modul Web Programming I

9. Menyeting hyperlink Next

- Blok “Next”
- Pada server behavior pilih recordset paging
- Pilih move to Next page (menuju halaman selanjutnya)
- Klik OK pada jendela Move To Next Page

10. Menyeting hyperlink Last

- Blok “Last”
- Pada server behavior pilih recordset paging
- Pilih move to Last page (menuju halaman terakhir)
- Klik OK pada jendela Move To Last Page

Yustina meisella kristania 20

Modul Web Programming I

11. Membuat Hyperlink input lagi

- Blok “input lagi”
-

- Pilih menu insert hyperlink

Yustina meisella kristania 21

Modul Web Programming I

- Muncul jendela hyperlink

- Pilih link ke halaman inputbarang.php

Yustina meisella kristania 22

Modul Web Programming I

- Pilih dan klik ok

- Pada bagian ini tidak perlu dibuat parameter karena kita hanya akan memanggil halaman
input, tanpa perlu memanggil parameter pada halaman lainnya.

12. Hyperlink edit

- Blok “edit”(1), Pilih menu insert (2), Pilih hyperlink (3)

- Muncul jendela hyperlink,

- select file ke editbarang.php,
- kemudian klik parameter,
- lalu ketikan nama parameter (edit) dan value (kd_barang) sebagai primarykey
- Klik ok

Yustina meisella kristania 23

Modul Web Programming I

13. Hyperlink delete

- Blok “edit”(1), Pilih menu insert (2), Pilih hyperlink (3)
- Muncul jendela hyperlink
- lalu browse
- kemudian select file ke outputbarang.php,
- kemudian klik parameter,
- lalu ketikan nama parameter (delete) dan value (kd_barang) sebagai primarykey
- klik OK

Yustina meisella kristania 24

Modul Web Programming I

Yustina meisella kristania 25

Modul Web Programming I

Yustina meisella kristania 26

Modul Web Programming I

14. Mengatur delete record

- Blok “delete”
- Pilih menu Application -> Server Behaviour -> [+]
- Pilih delete record
- Muncul jendela delete record
- Akan ditampilkan window Delete Record (lihat gambar). Pada window tersebut, aturlah
- (1) jenis variabel yang akan dijadikan penentu proses hapus dieksekusi atau tidak,
- (2) koneksi,
- (3) nama tabel yang digunakan,
- (4) kolom yang dijadikan primary key di database beserta nilainya,
- (5)url primary key yang kita buat sebelumnya(delete)
- (6) halaman yang ditampilkan jika proses hapus mahasiswa berhasil.
- (7) Klik tombol OK untuk menutup window dan menyimpan pengaturan.

Yustina meisella kristania 27

Modul Web Programming I

Halaman editbarang.php

1. Desain halaman editbarang.php sesuai dengan kebutuhan

Yustina meisella kristania 28

Modul Web Programming I
2. Pilih menu Application -> Binding -> [+] -> Recordset (Query)

Yustina meisella kristania 29

Modul Web Programming I
3. Muncul jendela recordset

- ketikan nama recordset(1),

- pilih koneksi yang digunakan(2),
- pilih table yang digunakan(3),
- pilih columns yang akan dipakai all untuk semua column sedangkan selected untuk
column terpilih (4),
- pilih filter kd_barang (primary key) (5)
- Ketikan URL Parameter yang kita buat pada link “edit” pada halaman outputbarang.php
(6)
- Klik OK

4. Maka akan terlihat recordset editbarang yang kita buat tadi

Yustina meisella kristania 30

Modul Web Programming I
5. Isikan field(column) pada rseditbarang sesuaikan dengan table

Atur juga nilai/value dari hidden field kode

Klik menu bind to dynamic source untuk menuju ke recordsetupdate (kodebarang)

6. Pilih menu Application -> Server Behaviour -> [+] -> Update Record

Yustina meisella kristania 31

Modul Web Programming I

7. Muncul jendela Update Record

- Pilih koneksi yang digunakan
- Pilih table yang digunakan
- Pilih column dan sesuaikan dengan values nya

8. After Updating kita pilih outputbarang.php

Yustina meisella kristania 32

Modul Web Programming I

9. Untuk Gambar, ketikan koding

copy($_FILES['file_gambar']['tmp_name'],"../image/".$_FILES['file_gambar']['name']);

10. Ketikan juga untuk SQLValueString

GetSQLValueString($_FILES['file_gambar']['name'], "text"),

Yustina meisella kristania 33

Modul Web Programming I
11. Atur enctype pada form, menjadi multipart-form/data dengan cara blok form terlebih dahulu dan
atur dibagian properties

Yustina meisella kristania 34

Modul Web Programming I

Halaman Inputbarang.php
1. Desain halaman inputbarang.php sesuai kebutuhan

Yustina meisella kristania 35

Modul Web Programming I
2. Pada menu Application -> Server Behaviour -> [+], pilih Insert Record

Yustina meisella kristania 36

Modul Web Programming I

3. Muncul jendela Insert Record

- Pilih koneksi yang digunakan
- Pilih table yang digunakan
- Pilih column dan sesuaikan dengan values nya

Yustina meisella kristania 37

Modul Web Programming I
4. After Inserting kita pilih outputbarang.php

Yustina meisella kristania 38

Modul Web Programming I

5. Untuk Gambar sama seperti pada halaman edit. kketikan koding

copy($_FILES['file_gambar']['tmp_name'],"../image/".$_FILES['file_gambar']['name']);

6. Ketikan juga untuk SQLValueString

GetSQLValueString($_FILES['file_gambar']['name'], "text"),

Yustina meisella kristania 39

Modul Web Programming I
7. Atur enctype pada form, menjadi multipart-form/data dengan cara blok form terlebih dahulu
dan atur dibagian properties

8.

Halaman Searchbarang.php
1. Desain halaman searchbarang.php sesuai kebutuhan

2. Pilih menu Application -> Server Behaviour -> [+] -> Recordset

Yustina meisella kristania 40

Modul Web Programming I

3. Muncul jendela Recordset

- ketikan nama recordset(1),

- pilih koneksi yang digunakan(2),
- pilih table yang digunakan(3),
- pilih columns yang akan dipakai. all untuk semua column, sedangkan selected untuk
column terpilih (4),
- pilih filter kd_barang (primary key) dengan operator (=) (5)
- Ketikan URL Parameter yang disesuaikan dengan nama object(text field) untuk peletakan
pencarian(6)
- Klik OK

Yustina meisella kristania 41

Modul Web Programming I

4. Untuk gambar sama seperti di halaman outputbarang.php

- Kosongkan terlebiih dahulu kolom gambar

5. Pilih mwnu insert -> image atau menggunakan icon image yang ada di menu common ->
image

Yustina meisella kristania 42

Modul Web Programming I

6. Muncul jendela untuk memilih folder penyimpanan gambar, maka pilih folder image, lalu
ketikan file name terserah anda misalnya nama anda, lalu klik OK

7. Kemudian ke tampilan coding, file name yang kita buat silahkan dihapus kemudian diganti
dengan recordset column gambar

Yustina meisella kristania 43

Modul Web Programming I

8. Ganti method form menjadi GET , dengan cara atur pada bagian properties method

Yustina meisella kristania 44

Modul Web Programming I

Yustina meisella kristania 45