![Page 1: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/1.jpg)
Membuat Tampil, Input, Edit dan Hapus Data dengan
DreamweaverSaiful Isnandar, MTI
![Page 2: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/2.jpg)
Tampil Data Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 3: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/3.jpg)
Pastikan bahwa xampp (apache dan Mysql sudah Running), Koneksi sudah benar serta database telah konek
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 4: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/4.jpg)
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
![Page 5: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/5.jpg)
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
![Page 6: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/6.jpg)
Buka file Tampil.phpTampil Data
Input Data
Edit Data
Hapus Data
Keluar
Klik 2x file Tampil.php
![Page 7: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/7.jpg)
Pada Panel Application, pilih BindingTampil Data
Input Data
Edit Data
Hapus Data
Keluar
Klik pada tanda + kemudian pilih Recordser(Query)
Klik pilihan ini
Klik tanda ini
![Page 8: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/8.jpg)
Buat settingan seperti iniTampil Data
Input Data
Edit Data
Hapus Data
Keluar
Klik OK
![Page 9: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/9.jpg)
Hasilnya pada Panel Application dan Tab Binding akan tampil seperti dibawah ini Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 10: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/10.jpg)
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
1 2
3
45
![Page 11: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/11.jpg)
Letakkan kursor pada bagian bawah Tambah BaruTampil Data
Input Data
Edit Data
Hapus Data
Keluar
Pilih Tool Dynamic Table pada Application
![Page 12: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/12.jpg)
Atur propertinya seperti dibawah iniTampil 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
![Page 13: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/13.jpg)
Hasilnya :Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 14: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/14.jpg)
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
1
2
3
Blok Kolom Isi
Klik kanan pilih[Table] >[Delete
Coloumn]
Hasilnya Kolom Isi sudah terhapus
![Page 15: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/15.jpg)
Simpan kemudian Tekan F12 maka hasilnya akan seperti dibawah iniTampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 16: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/16.jpg)
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)
![Page 17: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/17.jpg)
Simpan kemudian Tekan F12 di keyboard maka hasilnyaTampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 18: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/18.jpg)
Membuat Link Edit dan HapusTampil Data
Input Data
Edit Data
Hapus Data
Keluar
1
Ubah Kolom No menjadi
Aksi
Ubah pula Isinya
menjadi Edit - Hapus
2
![Page 19: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/19.jpg)
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
![Page 20: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/20.jpg)
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
![Page 21: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/21.jpg)
Lakukan hal yang sama dengan Link Hapus
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 22: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/22.jpg)
Simpan kemudian Tekan F12 dikeyboardTampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 23: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/23.jpg)
Input Data Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 24: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/24.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
Buka file Tambah.php
![Page 25: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/25.jpg)
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
dibuatSesuaikan
dengan Table yang akan dibuat
Inputan
Halaman yang berfungsi
menampilkan data
![Page 26: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/26.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
Setting pada Field No dengan Display as = Hidden FiledSetting pada Field
No dengan Display as = Hidden Filed
![Page 27: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/27.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
Field Display As Value
Id_kat TextField
Judul TextField
Pengirim TextField
Isi TextArea
Tgl HiddenField <?php echo date('d-m-Y'); ?>
Gb TextField
Wktu HiddenField <?php echo date(‘h:i:s'); ?>
Baca HiddenField <?php echo ‘1’; ?>
Bulan HiddenField <?php echo date(‘M'); ?>
Ubah semua Field dengan Setting seperti dibawah ini
![Page 28: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/28.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
Klik OK
![Page 29: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/29.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
Hasilnya :
![Page 30: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/30.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 31: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/31.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 32: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/32.jpg)
Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 33: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/33.jpg)
Edit Data Tampil Data
Input Data
Edit Data
Hapus Data
Keluar
![Page 34: Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver](https://reader035.vdocuments.site/reader035/viewer/2022062222/568151fe550346895dc03b33/html5/thumbnails/34.jpg)
Hapus Data Tampil Data
Input Data
Edit Data
Hapus Data
Keluar