Web 2

5/17/2018 Web 2 - slidepdf.com

http://slidepdf.com/reader/full/web-2-55b07df7c0b58 1/23

1

Simple & Practices

Disusun oleh :

Chandra Kesuma

Akademi Manajemen Informatika dan KomputerBINA SARANA INFORMATIKA

PURWOKERTO

2012



2

Web Programming II merupakan materi lanjutan dari Web Programming I. Di dalam web

programming II ini terdapat beberapa materi baru / lanjutan. Diantaranya kita menggunakan

Macromedia Dreamweaver 8 dan Flash 8. Namun, di dalam materi ini, kita akan belajar design &

koneksi database yang simple & practices. Maka dari itu, disini tidak akan dijelaskan ulang tentang

dasar-dasar web programming I seperti pengenalan HTML, PHP, MySQL dsb.

Ok langsung saja ya....

a. Macromedia Dreamweaver 8

1. Pengenalan Dreamweaver 8

Dreamweaver 8 adalah suatu bentuk program editor web yang dibuat oleh Macromedia

dengan alamat Website www.macromedia.com . Dengan menggunakan program ini,

seorang programmer web dapat dengan mudah membuat dan mendesain webnya, karena

bersifat WYSIWYG ( What you See Is What You Get).

2. Memulai Dreamweaver 8

Setelah dreamweaver 8 terinstal maka dapat kita jalankan melalui StartProgram

MacromediaDreamweaver 8. Maka akan muncul tampilan sbb:

Gambar Tampilan awal jendela Dreamwever 8

Gambar Area Kerja Dreamweaver 8

http://www.macromedia.com/





3

3. Pembuatan Tabel sederhana

a. buka lembar kerja baru. Pilih menu file new maka akan muncul tampilan sbb:

Pilih general basic page HTMLcreate

b. Setelah muncul lembar kerja baru, pilih tampilan mode design. Kemudian pilih tool

common dan table.

Atur Row = 4, Coloumns = 2 ,

Table width = 500

Border = 1

Cell padding = 2, Cell spacing = 1

c. Setelah itu maka akan muncul tabel yang baru kita buat sbb :

per

common table



4

d. Jadikan satu untuk kolom 1 row 1 dengan kolom 2 row 1 sbb :

Blok cell yang akan dijadikan satu, kemudian klik kanantablemerge cells

e. Isi tabelnya dan buat tampilan sbb:

f. Kemudian lihat halaman code nya, maka secara tidak sadar dengan membuat tabel

seperti di atas tadi, kita telah menghasilkan koding sbb:



5

4. Database & Koneksinya

a. Buat tabel

i. Langkah pertama adalah masuk ke halaman phpmyadmin. Gunakan browser anda

(mozila firefox, opera, googlechrome dsb). Ketikan localhost di address sbb : (jika

menggunakan apache2triad)

ii. Kemudian buat database dengan nama (perpus_kita)

Ketikan perpus_kita kemudian create

iii. Kemudian buat tabel anggota (misalkan kita buat 4 field di dalam tabel anggota)

iv. Isi fieldnya sbb :



6

Kemudian save

v. Kemudian pilih insert untuk menambahkan isi tabelnya sbb :

Isi tabelnya sbb :



7

vi. Maka datanya pun telah masuk sbb :

vii. fgfgfgf

b. Buat form tampil di dreamweaver 8

1. Buka halaman baru file new basic page html

2. Sebelum membuat tampilannya, kita buat koneksinya terlebih dahulu sbb:

- Lihat panel sebelah kanan lembar kerja dreamweaver 8.

- Pilih application database (+) MySQL

Connection

Kemudian setting sbb:

- Connection name = nama

koneksinya misal

(con_perpus_kita)- MySQL server = localhost- Username & password =

sesuai dengan settingan

computer masing-masing

(misalkan dlm hal ini

username=root; password=

password)

- Database=pilih select

untuk memilih database

yang sudah kita buat



8

3. Maka koneksi telah terbentuk dengan tampilan sbb:

Pilih Application Bindings document type pilih php, kemudian OK

4. Kemudian buat form tampil menggunakan dynamic table

Insert Application Objects Dynamic Data Dynamic Table

- name = rsanggota

- connection = con_perpus_kita

- table = anggota



9

kemudian ok ok lagi maka akan muncul tampilan sbb :

- pilih all records untuk menampilkan

seluruh record dalam tabel anggota

- ok

5. maka form tampil pun telah terbuat

6. simpan filenya dengan nama tampil.php , kemudian buka lewat browser anda.

7. buka halaman code pada dreamweaver 8 , maka kita pun tidak sadar sudah terketik

coding untuk koneksi, tabel, hingga menampilkan datanya.

8. ^_^



10

c. Buat form input data di Dreamweaver 8

1. Buka halaman kerja baru file new basic page html create

2. Pilih tool form, kemudian insertkan form pada halaman

3. Setelah form terbentuk, letakkan kursor berada di form, kemudian pilih common

table

Buat tabelnya di dalam form seperti gambar di atas

Row = 6

Kolom = 2

Align = center



11

4. Kemudian buat tampilan sbb :

5. Lakukan hal yang sama untuk nama, sedangkan untuk alamat menggunakan text

area.

6. untuk jenis kelamin menggunakan radio button

1. pilih form

2. letakkan

kursosr di id

anggota,

kemudian pilih

text field

3. pilih text field yang baru dibuat

4. beri nama text fieldnya (usahakan sesuai dengan nama pada field tabel yang sudah kita buat)

1. pilih radio

button

2. klik radiobutton

3. berikan value “L” untuk Laki-laki

4. beri nama sesuai dengan field yang ada di table anggota (dalam hal ini “jkel”)



12

7. Tambahkan tombol Simpan dan Batal

Lakukan hal yang sama untuk tombol batal, hanya saja dirubah :

Name : Batal

Value : Batal

Action : reset form

8. Atur settingan sbb : Application bindings document typephp, ok

1. pilih button

2. buat tombol

disini,

3. beri value

“Simpan”

5. beri action “submit form” 4. beri nama tombolnya “Simpan”



13

9. Kemudian

Pilih tombol simpan, Application server Behaviorsinsert record

10. Setelah itu muncul tampilan, setting sbb :

Masukan connection yang sudah kita buat, beserta table nya. Pilih link yang akanditampilkan setelah klik tombol simpan menggunakan browse (dalam hal ini”tampil.php”)

11. Kemudian simpan dengan nama “input_data.php”

12. Kemudian test filenya, buka melalui browser anda, kemudian isikan datanya lalu lalu

tekan simpan.

13. ^_^



14

d. Buat form edit, update data di Dreamweaver 8

1. Buat halaman baru kemudian simpan dengan nama edit.php

2. Buka file tampil.php yang sudah dibuat. Tambahkan kolom baru di sebelah kanan.

letakkan kursor di kolom terakhir

klik kanantableinsert Rows or Columns

3. Ketikkan Action pada kolom yang baru kita buat dan berikan hyperlink untuk edit

4. Ketik edit dan browse untuk link nya

-Pilih coloumns

- after current column



15

Maka hasil dari linknya sebagai berikut :

Kemudian pilih ok, maka link edit sudah kita buat. Lalu simpan file tampil.php

Pilih fileedit.php yang

sudah kita

simpan tadi

Pilih parameters

Ketikkan

parameters

yang akankita buat

misalkan

”id_anggota”

Pilih value pada recordset yang

sudah kita buat sebelumnya.

Kemudian cocokan dengan

parameters yang kita buat tadi ok

ok 0k



16

5. Buka kembali file edit.php yang sudah kita simpan tadi. Kemudian kita setting

sebagai berikut :

a. Pastikan setting server behaviors telah tercentang

b. Kemudian pilih insert Application ObjectsUpdate record Record Update

from wizard



17

c. Kemudian setting recordset nya

d. Setting record update formnya

Maka form update telah jadi, kemudian save

Name : rsanggota

Connection : pilih koneksi yang

sudah kita buatTable : pilih table yanhg akan

dipilih

Filter berdasarkan parameters yang

sudah kita buat tadi yaitu =

id_anggota

Krmudian ok ok

Pilih koneksi dan table yang

akan kita gunakan

Pilih browse untuk

menampilkan file apa yang

akan dijalankan setelah

update form dilakukan.

Dalam hal ini ”tampil.php”

Kemudian ok



18

Test form ini dengan menjalankan file tampil.php, kemudian pilih edit, ganti datanya kemudian

update ̂ _^

e. Buat hapus data di Dreamweaver 8

1. Buat halaman baru kemudian simpan dengan nama hapus.php

2. Buka kembali file tampil.php, kmudian split kolomnya menjadi 2 sebagai berikut :

3. Tambahkan hyperlink di sebelah Edit, untuk hapus



19

Kemudian ok ok ok ok

Maka hasilnya sebagai berikut ;

Jangan lupa simpan tampil.php tersebut.

4. Buka kembali file hapus.php, kmudian pastikan bagian server behaviors telah

tercentang

5. kmudian pilih insert Application Objects delete record



20

6. kemudian setting delete record nya

ok

kemudian simpan ulang file hapus.php

7. Test hasilnya dengan menjalankan file tampil.php, kemudian coba hapus salah satu

datanya. ̂ _^

f. Buat upload file di Dreamweaver 8

1. untuk mencoba upload file, kita buat dulu tabelnya misalkan petugas di database

yang sudah kita buat sebelumnya.

2. Buka halaman baru dan buat koneksi databasenya, beserta recordset yang akan

digunakan dalam membuat file tampil_upload.php. Caranya sama dengan yang

sudah dijelaskan sebelumnya di atas untuk pembuatan tampil.php ̂ _^

3. Kemudian buat folder baru di dalam folder kalian dengan nama FILE.

4. Buka halaman baru kemudian simpan dengan nama upload.php.

5. Buat recordset dengan nama rsupload dan koneksi yang sudah dibuat melalui tab

bindings(+)Recordset (Querry)

Pilih padaURL_Parameter

Isikan id_anggota sesuai

dengan parameter yang

sudah kita buat tadi

Pilih koneksi & tabelnya Pilih halaman yang akan ditampilkan setelah dihapus



21

6. Kemudian pilih insert Application Objects insert record record insertion

from wizard

7. Kemudian setting sebagai berikut :

Pilih koneksinya &

tabelnya

Pilih halaman setelah

upload

Jadikan hidden field untuk

id karena sifatnya

autoincraement



22

8. setelah di ok maka hasilnya sebagai berikut :

9. Kemudian ubah textfield pada foto dengan file field

10. Kemudian kita coding dikit ^_^

buka halaman code untuk upload.php lalu cari kode yang berada di kotak hitam

dibawah ini :

Ubah text field

menjadi file field

Ubah namanya

menjadi foto sesuai

dengan field



23

Setelah ketemu maka nonaktifkan koding tersebut dengan manambahkan ” // ” di bagian depannya.

11. Lalu tambahkan sedikit koding ini (yang ada di kotak hitam)

12. Simpan file upload.php kemudian coba buka melalui browser dan test upload

filenya. ^_^ cttn: file yang di upload tadi akan tersimpan di folder FILE yang sudah

dibuat.

Web 2

Documents