materi web ii

7/24/2019 Materi Web II

http://slidepdf.com/reader/full/materi-web-ii 1/18

Materi Web II

1

1

Membuat Database

1.

Buat Database dengan nama : toko

2.

Buat Tabel dengan nama : barang dengan struktur table sbb :



Materi Web II

2

2



Materi Web II

3

3



Materi Web II

4

4



Materi Web II

5

5

Cara membuat tampilan input dengan fasilitas

Wizard

1.

Buat site, Database, dan koneksi.

Dengan Asumsi Bahwa semua itu telah di buat, sekarang buka lembar Kerja

dreamweaver nya,,,

2.

Klik Insert pada menu bar, lalu pilih data object lalu pilih Insert Record dan pilih

Record Insertion Form Wizard:(lihat Gambar 1)

Gambar 1



Materi Web II

6

6

3. lalu Tampil Tampilan Record Insertion form: (lihat Gambar 2)

Gambar 2

*ket: lingkaran Hitam= nama koneksi yang sudah dibuat

Lingkaran Biru= nama tabel untuk membuat input

Lingkaran biru=itu untuk selesai pembuatan tampilan

4.Hapus tampilan input untuk Gambar ganti dengan object input tipe “filefield”: (lihatGambar 3)

Gambar 3

5.

lalu tampil pesan langsung Klik OK: (Lihat Gambar 4)

Gambar 4



Materi Web II

7

7

6.

Ganti name filefield Inputan Gambar dengan sesuai name yang dibutuhkan :

(Lihat Gambar 5)

Gambar 5

*Ket: Lingkaran Hitam

7.

lalu tambahkan button Batal dengan action Reset : (Lihat Gambar 6)

Gambar 6



Materi Web II

8

8

8.Lalu masuk kebagian Code lalu Tambahkan kodingan dibawah ini: (Lihat Gambar

7)

Gambar 7

9. Lalu Tambahkan scrip “ error_reporting(0); ” letakkan dibagian dibawah tag

pembuka PHP: (Lihat Gambar 8)

Gambar 8



Materi Web II

9

9

10.

lalu Simpan dengan nama inputbarang.php letakkan difolder tempat site: (lihat

Gambar 9)

Gambar 9

11.

lalu buat folder gambar difolder tempat simpan file: (lihat Gambar 10)



Materi Web II

10

10

12. kalau sudah selesai coba jalankan di browser dan cek didalam database dan foldergambar apakah sudah tersimpan semua datanya,,

Cara Membuat Tampilan Data dari Database dengan

fasilitas wizard

1.

Buat site, Database, dan koneksi.

Dengan Asumsi Bahwa semua itu telah di buat, sekarang buka lembar Kerja

dreamweaver nya,,,

2. Pilih Insert pada menu bar, lalu data object lalu dynamic data lalu dynamic table:(lihat Gambar 1)

Gambar 1

3.

muncul tampilan setup intruction lalu buatlah recordset dengan cara klik

recordset(lingkaran Hitam): (lihat Gambar 2)

Gambar 2



Materi Web II

11

11

4.

tampil lembar kerja Recordset lalu klik Test(lingkaran kuning) untuk cek data lalu klik

ok(lingkaran hitam): (lihat Gambar 3)

Gambar 3

5.

lalu kembali pada tampilan setup instruction Cek Recordsetnya sudah terceklis apa

belum(lingkaran Hitam) kalau sudah lalu klik ok: (Lihat Gambar 4)

Gambar 4



Materi Web II

12

12

6. lalu tampil tampilan dynamic table lalu klik OK: (lihat Gambar 5)

Gambar 5

7. lalu tambahkan coding untuk menampilkan gambar (kotak hitam): (lihat Gambar 6)

Gambar 6

8. lalu simpan pada tempat pembuatan site, jalankan di browser masing-masing



Materi Web II

13

13

Cara membuat tampilan EDIT dengan fasilitas Wizard

1. Buat site, Database, dan koneksi.Dengan Asumsi Bahwa semua itu telah di buat, sekarang buka lembar Kerjadreamweaver nya,,,

2.

Klik Insert pada menu bar, lalu pilih data object lalu pilih Update Record pilih RecordUpdate From Wizard:(Lingkaran Hitam;lihat Gambar 1)

Gambar 13. tampil tampilan Setup Intructions klik recordset yang dinomor 4: (lingkaran hitam;lihat gambar

2)

Gambar 2



Materi Web II

14

14

4. lalu Tampil Tampilan Update: (lihat Gambar 3)

Gambar 2*ket: lingkaran Merah= nama recordsetnya

Lingkaran Hitam= memfilter sesuai yang diinginkanLingkaran Biru= selesai pembuatan recordset 5.

tampil kembali setup intructions pilih OK.6. tampil tampilan record updater form wizard ,klik OK: (lihat gambar 3)

Gambar 3*Ket: lingkaran hitam: memilih tempat setelah selesai diEdit



Materi Web II

15

15

7. tampil tampilan form edit, hapus text box gambar gantif dengan object File field dan ubahname-nya menjadi gambar: (lihat gambar 4,5 dan 6)

gambar 4

gambar 5



Materi Web II

16

16

Gambar 6

8. masuk kedalam bagian koding/ script, tambahkan dan letakkan koding dibawah ini sepertiyang terlihat digambar: (lihat gambar 7)

$nmgambar=$_FILES['gambar']['name'];$fisikgambar=$_FILES['gambar']['tmp_name'];

copy($fisikgambar,"gambar/".$nmgambar);

dan ubah variabel $_POST[‘gambar’] menjadi $nmgambar

gambar 7



Materi Web II

17

17

9.simpan dengan nama edit_barang.php dan jalankan lewat browser nya,,

*Selamat Belajar*

Cara membuat tampilan HAPUS dengan fasilitas Wizard

1. Buat site, Database, dan koneksi.Dengan Asumsi Bahwa semua itu telah di buat, sekarang buka lembar Kerja dreamweavernya,,,2. Klik Insert pada menu bar, lalu pilih data object lalu pilih Delete Record: (lihat Gambar 1)

Gambar 1



Materi Web II

18

18

3. tampil tampilan delete record: (lihat gambar 2)

Gambar 2*ket: lingkaran biru : menentukan kunci utama

Lingkaran hitam: menentukan file setelah proses hapus.3. simpan dengan nama hapus_barang.php dan letakkan di penyimpana site.

*Selamat Belajar*

materi web ii

Documents