Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver

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

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

2 Tampil Data 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 Pilih New Folder Hapus Data Klik kanan disini Buat seperti ini Keluar

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

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

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

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

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 2 Hapus Data 1 Blok pada teks “Tambah Baru” kemudian pada Properti Link ketikkan Tambah.php kemudian Enter 5 4 3 Keluar

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

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

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 Blok Kolom Isi Input Data 1 Edit Data Hapus Data 2 Klik kanan pilih [Table] >[Delete Coloumn] Hasilnya Kolom Isi sudah terhapus 3 Keluar

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 Blok Baris Judul (baris pertama) Input Data 1 Setting propertinya sebagai berikut Edit Data 2 Hasilnya Hapus Data 3 Dengan langkah yang hampir sama buat untuk isi (baris kedua) 4 Keluar

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 Ubah Kolom No menjadi Aksi Input Data 1 Edit Data 2 Hapus Data Ubah pula Isinya menjadi Edit - Hapus Keluar

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

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

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 Buka file Tambah.php Tampil Data Input Data Edit Data Hapus Data
Keluar

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

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

27 Ubah semua Field dengan Setting seperti dibawah ini
Tampil Data Field Display As Value Id_kat TextField Judul Pengirim Isi TextArea Tgl HiddenField <?php echo date('d-m-Y'); ?> Gb Wktu <?php echo date(‘h:i:s'); ?> Baca <?php echo ‘1’; ?> Bulan <?php echo date(‘M'); ?> Input Data Edit Data Hapus Data Keluar

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

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

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