Membuat Web Input Data dengan DreamWeaver CS4

MEMBUAT WEBSITE INPUT DATA MAHASISWA

Pada kesempatan kali ini,kami akan membuat halaman website sederhana input data mahasiswa menggunakan Adobe DreamWeaver Cs4.

Sebelum kita membuat halaman web,ada beberapa hal yang harus dipersiapkan terlebih dahulu.

Siapkan Software xampp yang digunakan sebagai server local host untuk dapat mengakses web secara local dan membuat database yang akan disambungkan dengan halaman web yang kita buat.

Setelah itu,kita buka program DreamWeaver cs 4.dan akan muncul tampilan awal seperti ini :

Pada jendela ini,kita pilih file baru dengan jenis php,maka kita akan menuju halaman awal dreamweaver yang digunakan untuk membuat halaman web.

Pada halaman awal ini,kita awali dengan membuat site definition yang dijadikan sebagai identitas dari halaman web yang kita buat.Jika ada pembaca yang belum mengerti bagaimana membuat site definition,bisa melihat tutorial yang telah kami paparkan dalam blog ini sebelumnya.

Jika pengaturan site definition sudah selesai,selanjutnya kita akan membuat database mahasiswa yang akan dijadikan sebagai database yang menyimpan data mahasiswa ketika kita input nanti.

Pertama kita buka browser,disini saya menggunakan Mozilla firefox.

Setelah masuk pada mozila,kita ketikkan localhost pada addressbar dan enter.Maka kita akan memasuki halaman awal dari xampp.

Setelah itu,kita klik PHP My Admin,dan kita akan menuju halaman baru PhpMyAdmin.

Selanjutnya kita akan membuat database baru untuk dijadikan database web.

Caranya klik Database,Masukkan nama Database pada kolom yang disediakan.

Disini,saya berikan nama database InputMahasiswa,maka akan muncul jendela baru yang memberikan informasi bahwa database berhasil dibuat 

Selanjtnya kita buat table baru untuk menampung data mahasiswa,caranya masukkan nama table dan jumlah kolom pada form create table

Kita berikan nama table “DataMhs”,dengan jumlah kolom 4,dengan ketentuan :

       1)      Kolom Nama

       2)      Kolom NPM

       3)      Kolom Kelas

       4)      Kolom Alamat

Lalu klik Button Go.Setelah itu kita akan mengatur attribute pada masing – masing kolom.

Pada atribut diatas,kita berikan tipe data Varchar 99,karena kolom ini akan menampung data nama,sehingga kita memerlukan jumlah karakter yang besar.

Pada kolom NPM,kita berikan tipe data INT,dengan panjang karakter 6,karena data npm diisi dengan angka dan jumlah karakternya ditentukan 6 karakter.

Pada kolom Kelas,kita berikan tipe data Varchar 5,karena panjang karakter kelas hanya ada 5 karakter.

Terakhir pada kolom Alamat,kita berikan tipe data Varchar 99,untuk menampung data alamat.Setelah pengaturan data sudah benar,maka kita klik save untuk menyimpan table.

Maka akan muncul tampilan struktur table yang sudah kita atur sebelumnya.

Nah,setelah kita selesai membuat table DataMhs,langkah selanjutnya kita kembali pada Adobe Dreamweaver untuk menyambungkan database tadi ke website yang akan kita buat.

Pertama klik icon database pada sisi kanan Dreamweaver,klik tanda ( +  ) lalu pilih My sql Connection untuk membuat sambungan database baru.

Setelah itu akan muncul jendela baru ;

Pada jendela ini,kita akan membuat sambungan database dengan web kita,kita isi form yang ada dengan ketentuan :

      1)      Connection Name : Nama koneksi database,kita isikan ilmugratis sebagai koneksi                               database,pemberian nama tidak terikat,jadi kita bisa memberikan nama sesuai keinginan kita.

      2)      Mysql Connection : Koneksi Mysql,kita isikan dengan localhost,karena kita menggunakan                 localhsot sebagai server database.

      3)      Username : Disarankan untuk diisi dengan “root”,sebagai username global,karena kita belum             mengatur user pada database.

      4)      Password : Disarankan kita kosongkan saja terlebih dahulu,sama seeperti sebelumnya bahwa kita       belum mengatur user pada database.

      5)      Database : Kita pilih Database yang kita buat tadi.

Jendela diatas akan muncul ketika kita memilih database,kita pilih database “inputmahasiswa”

Lalu pilih ok.

Setelah itu kita test dahulu apakah koneksi dengan database sudah berjalan dengan mengklik button test.

Jika muncul pesan ini,maka koneksi database sudah berjalan,jika terdapat pesan kesalahan,maka kita perlu memeriksa kembali site definition yang kita buat,hal yang biasanya terjadi adalah kita salah menaruh file pada folder htdocs yang ada pada folder xampp/localhost.

Langkah selanjutnya adalah kita membuat halaman awal yang digunakan sebagai halaman input data mahasiswa.

Buat file baru dengan nama homesite.php,lalu kita atur halaman awal ini untuk memasukkan data mahasiswa.

Selanjutnya kita buat recordset terlebih dahulu,caranya klik panel Binding pada pojok kanan,klik  tanda (+),pilih recordset.

Maka akan muncul jendela recordset,kita atur recordset sesuai ketentuan.

Beberapa kolom yang perlu kita atur :

Name : nama record yang kita buat.

Connection : koneksi site yang telah dibuat pada site definition.

Table : Nama table yang akan kita gunakan.

Column : Memilih kolom pada table.

Jika sudah kita klik Tes untuk menguji apakah sudah tersambung dengan database atau belum,jika kolom table sudah tampil,maka sudah tersambung,lalu kita klik ok.

Langkah selanjutnya adalah membuat form input data dengan masuk pada menu insert – data object – insert record – record insertion from wizard.Maka akan muncul jendela baru input data.Pada jendela ini, kita atur beberapa komponen yang digunakan untuk memasukkan data ke dalam database.

Connection : koneksi site yang telah dibuat pada site definition.

Table : Nama table yang akan kita gunakan.

After inserting Go to : pilihan yang digunkan untuk merujuk pada halaman web setelah kita memasukkan data.

Form Fields : Keterangan nama table beserta atributnya.

Label : menampilkan nama label pada table.

Display as : Mengatur tampilan field sesuai nama form yang ditampilkan(text field,text area,radio button etc)

Default value: nilai awal dari suatu label pada record.

Jika sudah kita klik ok.

Langkah ini adalah langkah terakhir pada halaman awal input data,selanjutnya kita akan membuat 3 halaman untuk menampilkan form daftar mahasiswa,update data,dan hapus data.

Untuk mempermudah,kita lakukan save as pada halaman awal ini menjadi 3 halaman yang berbeda,sehingga kita tidak lagi membuat recordset baru,kita hanya mengganti beberapa parameter pada recordset sesuai ketentuan.

Jika langkah diatas sudah kita lakukan,maka selanjutnya kita beralih pada halaman list data,halaman ini akan digunakan untuk menampilkan data yang telah kita inputkan sebelumnya.

Namun,kita harus merubah parameter pada recordset untuk menambah data npm sebagai parameter untuk menampilkan data.

Caranya masuk pada menu binding double klik recordset yang tadi kita buat,maka akan muncul jendela recordset ;

Ubah filter menjadi NPM,agar kita jadikan npm sebagai parameter untuk menampilkan data yang diinputkan ke database.

Jika sudah maka kita klik Ok.

Selanjutnya kita buat form update data,dengan masuk ke dalam menu insert – pilih data object - dynamic data – dynamic table;

Kita pilih nama recordser sesuai dengan nama recordset yang dibuat,kita pilih pilihan all,untuk menmapilkan keseluruhan data pada satu halaman.Lalu klik ok.

Langkah selanjutnya kita tambahkan link aksi untuk pemrosesan data,kita tambahkan kolom pada table input data,kita tambahkan link edit dan hapus sebagai operasi data.

Caranya kita klik insert – hyperlink – pilih nama link – dan tujuan link yang dibuat.

Text : memuat nama link.

Link : link tujuan.

Lalu kita klik folder pada link, maka akan muncul jendela baru link target,kita pilih target update.php,dan kita masukkan parameter untuk menyaring data yang akan diedit sesuai nilai parameternya.Kita isikan parameter dengan NPM,jadi setiap kita akan mengubah data,maka database akan menggunakan nilai parameter NPM sebagai filter data.

Kolom name kita isikan sesuai nama table pada record,dan value adalah record yang dipilih yaitu NPM.Selanjutnya klik ok.

Lakukan hal yang sama pada link hapus,hanya saja link tujuan kita ganti menjadi hapus.php.Untuk parameter tetap sama kita gunakan NPM.

Kita tambahkan message box kepada button hapus,gunanya agar pesan akan tampil setelah kita menekan tombol hapus.Caranya tambahkan keywoard pada link hapus :

?>" onClick="return confirm('Apakah anda yakin akan menghapus data ini ?')"

>Hapus.Jadi pada saat tombol hapus ditekan,maka akan muncul pesan 'Apakah anda yakin akan menghapus data ini’.

Langkah ini adalah langkah akhir pada halaman listdata.Selanjutnya kita beralih pada halaman update data,Pada halaman ini kita akan membuat form update data,caranya masih sama,

Pilih insert– data object – update record – update record from wizard.

Pengaturannya masih sama seperti kita menambahkan form insert,jadi tidak lagi kami paparkan keterangannya.

Kita ubah filter pada recordset menjadi NPM,untuk dijadikan filter saat merubah data.

Lalu kita klik ok.

Langkah ini,adalah langkah terakhir pada halaman update data,selanjutnya kita beralih pada halaman hapus,kita ubah kembali filter dari recordset menjadi NPM,dan kita tambahkan form hapus dengan masuk menu insert – data object – delete record ;

Kita atur beberapa kolom seperti ini :

First check is variable defined : Primary key value,kita gunakan data yang memiliki atribut sebagai primary key.

Primary key Column : Pilih NPM,karena sebelumnya kita memberikan primary key pada data NPM.

Jika sudah kita klik Ok.

Selanjutnya kita tambahkan link Insert dan list, yang digunakan untuk mengakses halaman input data dan list data,caranya klik insert – hyperlink – beri nama link – pilih halaman target – klik ok.

Setelah itu kita coba membuka website yang kita buat.Jangan lupa,tambahkan 2 link diatas pada semua halaman web yang ada,agar link yang dibuat menjadi optimal saat digunakan.

Saya gunakan Mozilla untuk membuka web yang dibuat,caranya klik Icon

Pada halaman ini,kita dapat memasukkan data mahasiswa,kita isikan data sesuai ketentuan yang ada.Jika kita klik insert data,maka akan secara otomatis kita beralih ke halaman listdata,karena kita telah mengatur pilihan ketika button di klik,maka akan menuju link target.

Kita dapat melihat daftar data mahasiswa yang kita inputkan tadi,disini kita dapat melakukan operasi terhadap file data mahasiswa dengan mengedit data,atau menghapus data.

Untuk melakukan perubahan data,kita hanya menekan tombol edit pada halaman listdata.

Jika kita akan menghapus data,maka akan muncul pesan peringatan “apakah kita yakin akan menghapus data”.

Nah,itulah sedikit gambaran bagaimana membangun suatu website entry data sederhana,kita dapat mengembanngkannya lagi agar tampilan web lebih menarik dan dapat kita tambahkan konten yang mendukung website yang kita buat.

Terimakasih atas ketersediaannya membaca artikel yang kami paparkan dalam blog ini,jika terdapat kesamaan cara dan data,kami mohon maaf.

Daftar Pustaka :

http://achmatim.net

Insert, update, delete in dreamweaver(www.youtube.com)

source : http://informatics.pusatcyber.net/2014/11/membuat-web-input-data-dengan.html

ssssssasourForm login dengan dreamweaver dan database phpmyadmin dengan metode Layout design sangatlah mudah , disini anda membutuhkan >> 1. Salah satu software Macromedia Dreamweaver Mx,CS3,CS5,CS6 2. Database phpmyadmin atau Xampp. 3. Laptop / PC 4. Doa Kita mulai dengan membuat database dari phpmyadmin dengan rincian sebagai berikut : Nama database = Login Nama tabel = Admin Jumlah field = 3 Field name = ID ( Varchar ) ( 10 ) Field name = Nama ( Text ) ( 20 ) Field name = Password ( Text ) ( 20 ) Silahkan lihat gambar untuk lebih detailnya : lalu klik save. sekarang kita buka dreamweaver masing-masing, dan buat file baru dan simpan dengan format login.php setelah itu kita buat Site terlebih dahulu , jika belum tau caranya klik disini . Apabila site sudah di buat, maka tahap selanjutnya membuat koneksi . INGAT kita tidak melakukan coding atau listing di form login.php ini ikuti langkah - langkah seperti gambar di bawah ini, kita mulai .... 1. Buat file php baru dengan nama login.php dan berhasil.php 2. Buat recordset baru di login.php Insert-application object-recordset. 3. Buat koneksi baru klik define dan isi kotak connection name, sql server, user name, password sesuai gambar di bawah . Dan select database name yang sudah di buat sebelumnya. 4. koneksi telah selesai, silahkan lihat gambar di bawah. 5. masih di login.php sekarang buat form . insert-form-form. 6. lalu buat table Inser-table. 7. Isi kriteria table seperti gambar di bawah. 8. di baris ketiga kita akan merge cell , blok table di baris ketiga dan klik kanan lalu pilih table-merge cells 9. Lalu kita buat text field untuk nama dan password. pilih insert-form-text field. 10. maka penampakan sekarang seperti gambar di bawah . 11. lalu kita buat sinkronisasi dari database yang sudah di buat . insert-application objects-User authentication-Log in User. 12. Isi kriteria log in user seperti gambar di bawah . 13. Buat button login dengan cara insert-form-button . Dan ganti nama label button tersebut menjadi login 13. silahkan tekan f12 , maka penampakannya seperti gambar di bawah. 14. Taaaarrrrraaaaaaaaaaaaaa. Email ThisBlogThis!Share to TwitterShare to Facebook

Copy the BEST Traders and Make Money : http://bit.ly/fxzulu

aForm login dengan dreamweaver dan database phpmyadmin dengan metode Layout design sangatlah mudah , disini anda membutuhkan >> 1. Salah satu software Macromedia Dreamweaver Mx,CS3,CS5,CS6 2. Database phpmyadmin atau Xampp. 3. Laptop / PC 4. Doa Kita mulai dengan membuat database dari phpmyadmin dengan rincian sebagai berikut : Nama database = Login Nama tabel = Admin Jumlah field = 3 Field name = ID ( Varchar ) ( 10 ) Field name = Nama ( Text ) ( 20 ) Field name = Password ( Text ) ( 20 ) Silahkan lihat gambar untuk lebih detailnya : lalu klik save. sekarang kita buka dreamweaver masing-masing, dan buat file baru dan simpan dengan format login.php setelah itu kita buat Site terlebih dahulu , jika belum tau caranya klik disini . Apabila site sudah di buat, maka tahap selanjutnya membuat koneksi . INGAT kita tidak melakukan coding atau listing di form login.php ini ikuti langkah - langkah seperti gambar di bawah ini, kita mulai .... 1. Buat file php baru dengan nama login.php dan berhasil.php 2. Buat recordset baru di login.php Insert-application object-recordset. 3. Buat koneksi baru klik define dan isi kotak connection name, sql server, user name, password sesuai gambar di bawah . Dan select database name yang sudah di buat sebelumnya. 4. koneksi telah selesai, silahkan lihat gambar di bawah. 5. masih di login.php sekarang buat form . insert-form-form. 6. lalu buat table Inser-table. 7. Isi kriteria table seperti gambar di bawah. 8. di baris ketiga kita akan merge cell , blok table di baris ketiga dan klik kanan lalu pilih table-merge cells 9. Lalu kita buat text field untuk nama dan password. pilih insert-form-text field. 10. maka penampakan sekarang seperti gambar di bawah . 11. lalu kita buat sinkronisasi dari database yang sudah di buat . insert-application objects-User authentication-Log in User. 12. Isi kriteria log in user seperti gambar di bawah . 13. Buat button login dengan cara insert-form-button . Dan ganti nama label button tersebut menjadi login 13. silahkan tekan f12 , maka penampakannya seperti gambar di bawah. 14. Taaaarrrrraaaaaaaaaaaaaa.

Copy the BEST Traders and Make Money : http://bit.ly/fxzulu