Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver Saiful Isnandar, MTI.

Presentasi serupa


Presentasi berjudul: "Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver Saiful Isnandar, MTI."— Transcript presentasi:

1 Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver Saiful Isnandar, MTI

2 Tampil Data Input Data Edit Data Hapus Data Keluar

3 Pastikan bahwa xampp (apache dan Mysql sudah Running), Koneksi sudah benar serta database telah konek Tampil Data Input Data Edit Data Hapus Data Keluar

4 Tambahkan folder baru pada Site berturut-turut Server dan didalam Server buat News Tampil Data Input Data Edit Data Hapus Data Keluar Klik kanan disini Pilih New Folder Buat seperti ini

5 Pada Folder News buat New File dengan tampilan sebagai berikut Tampil Data Input Data Edit Data Hapus Data Keluar Klik kanan disini Pilih New File Buat 4 file seperti ini

6 Buka file Tampil.php Tampil Data Input Data Edit Data Hapus Data Keluar Klik 2x file Tampil.php

7 Pada Panel Application, pilih Binding Tampil Data Input Data Edit Data Hapus Data Keluar Klik pada tanda + kemudian pilih Recordser(Query) Klik pilihan ini Klik tanda ini

8 Buat settingan seperti ini Tampil Data Input Data Edit Data Hapus Data Keluar Klik OK

9 Hasilnya pada Panel Application dan Tab Binding akan tampil seperti dibawah ini Tampil Data Input Data Edit Data Hapus Data Keluar

10 Lihat kembali tampilan Tampil.php, ketikkan seperti dibawah ini Tampil Data Input Data Edit Data Hapus Data Keluar Blok pada teks “Tambah Baru” kemudian pada Properti Link ketikkan Tambah.php kemudian Enter

11 Letakkan kursor pada bagian bawah Tambah Baru Tampil Data Input Data Edit Data Hapus Data Keluar Pilih Tool Dynamic Table pada Application

12 Atur propertinya seperti dibawah ini Tampil Data Input Data Edit Data Hapus Data Keluar Recordset yang ditampilkan Jumlah data yang akan tampil Border atau Bingkai pada Table Jarak antara garis tabel dengan Teks Jarak antar Cell Klik OK

13 Hasilnya : Tampil Data Input Data Edit Data Hapus Data Keluar

14 Hapus pada kolom isi, agar data yang ditampilkan tidak terlalu lebar kebawah dikarenakan isi dari Field Isi memang beisi banyak teks Tampil Data Input Data Edit Data Hapus Data Keluar Blok Kolom Isi Klik kanan pilih [Table] >[Delete Coloumn] Hasilnya Kolom Isi sudah terhapus

15 Simpan kemudian Tekan F12 maka hasilnya akan seperti dibawah ini Tampil Data Input Data Edit Data Hapus Data Keluar

16 Ubah Warna background pada setiap Cell dengan mengganti Properti BgColor Tampil Data Input Data Edit Data Hapus Data Keluar 1 Blok Baris Judul (baris pertama) 2 Setting propertinya sebagai berikut 3 Hasilnya 4 Dengan langkah yang hampir sama buat untuk isi (baris kedua)

17 Simpan kemudian Tekan F12 di keyboard maka hasilnya Tampil Data Input Data Edit Data Hapus Data Keluar

18 Membuat Link Edit dan Hapus Tampil Data Input Data Edit Data Hapus Data Keluar 1 Ubah Kolom No menjadi Aksi Ubah pula Isinya menjadi Edit - Hapus 2

19 Tampil Data Input Data Edit Data Hapus Data Keluar Blok Teks Edit Ketikkan link seperti berikut Teks Edit.php ini karena halaman yang kita buat adalah Edit.php jadi sesuaikan dengan nama file Ubah tampilan menjadi Code

20 Tampil Data Input Data Edit Data Hapus Data Keluar Perhatikan Code berikut Tarik Field No ini letakkan ke dalam rumus atau kode diatas setelah = Hasilnya

21 Lakukan hal yang sama dengan Link Hapus Tampil Data Input Data Edit Data Hapus Data Keluar

22 Simpan kemudian Tekan F12 dikeyboard Tampil Data Input Data Edit Data Hapus Data Keluar

23 Input Data Tampil Data Input Data Edit Data Hapus Data Keluar

24 Tampil Data Input Data Edit Data Hapus Data Keluar Buka file Tambah.php

25 Tampil Data Input Data Edit Data Hapus Data Keluar Ubah tampilannya menjadi Design Pada Toolbar Application Pilih Record Insertion Form Wizard Sesuaikan dengan koneksi Database yang dibuat Sesuaikan dengan Table yang akan dibuat Inputan Halaman yang berfungsi menampilkan data

26 Tampil Data Input Data Edit Data Hapus Data Keluar Setting pada Field No dengan Display as = Hidden Filed

27 Tampil Data Input Data Edit Data Hapus Data Keluar FieldDisplay AsValue Id_katTextField JudulTextField PengirimTextField IsiTextArea TglHiddenField GbTextField WktuHiddenField BacaHiddenField BulanHiddenField Ubah semua Field dengan Setting seperti dibawah ini

28 Tampil Data Input Data Edit Data Hapus Data Keluar Klik OK

29 Tampil Data Input Data Edit Data Hapus Data Keluar Hasilnya :

30 Tampil Data Input Data Edit Data Hapus Data Keluar

31 Tampil Data Input Data Edit Data Hapus Data Keluar

32 Tampil Data Input Data Edit Data Hapus Data Keluar

33 Edit Data Tampil Data Input Data Edit Data Hapus Data Keluar

34 Hapus Data Tampil Data Input Data Edit Data Hapus Data Keluar


Download ppt "Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver Saiful Isnandar, MTI."

Presentasi serupa


Iklan oleh Google