11/24/2010

Membuat aplikasi PHP tampil,edit,delete,insert dengan Dreamweaver bagian 2

Pada Bagian ini merupakan kelanjutan dari artikel sebelumnya yang membahas mengenai bagaimana membuat aplikasi berbasis PHP-MySQL dengan memanfaatkan Dreamweaver. Dalam artikel ini akan dibahas mengenai halaman untuk Edit dan Delete data mahasiswa. Semoga tutorial ini berguna untuk kita semua.

Langsung aja kita mulai!

Membuat Halaman untuk Mengedit Data Mahasiswa

Halaman edit data pada dasarnya sama seperti halaman input data, hanya saja pada halaman edit data, data yang akan diedit (diubah) sudah ditampilkan terlebih dahulu di form. Sebelum membuat form untuk edit data, pertama kali yang harus dilakukan adalah menentukan mahasiswa mana yang akan diedit. Dalam aplikasi berbasis web, untuk menentukan mahasiswa mana yang akan diedit beragam caranya. Dalam tutorial ini akan dicoba cara yang paling sederhana (dan banyak dilakukan juga), yaitu dengan menambahkan link edit di tabel data mahasiswa sedemikian hingga saat diklik akan mengirimkan parameter berupa nim mahasiswa ke halaman edit mahasiswa.

OK. Langsung aja kita coba.

Bagian 1

  1. Pertama kita buat dulu halaman “edit_mhs.php”.
  2. Lalu buka halaman tampil_mhs.php yang sudah dibuat pada tutorial sebelumnya. Lalu kita tambahkan kolom baru di tabel data mahasiswa dan buat link edit. Untuk membuat kolom baru di tabel, dapat dengan menge-blok kolom terakhir tabel dan pilih menu Modify > Table > Insert Rows or Columns… Lalu pada window yang ditampilkan pilih Column, jumlah kolom yang akan ditampilkan dan posisi kolom yang baru (Lihat gambar). Pilih (select) text edit” pada kolom yang baru saja dibuat dan buat hyperlink dengan menu Insert > Hyperlink. Selanjutnya akan muncul window Hyperlink. Pilih tombol Browse (4) (Lihat Gambar)
  3. Pada window Select File yang ditampilkan, pilih halaman edit_mhs.php (1) yang sebelumnya telah dibuat sebagai halaman edit data mahasiswa. Selanjutnya klik tombol Parameters.. (2) dan akan ditampilkan window Parameters… (Lihat gambar di bawah)
  4. Pada window Parameters.. isi nama parameter yang akan dikirimkan (yaitu nim) di bagian name dan selanjutnya di bagian value (2) klik tombol Dynamic Data (gambar petir). Lihat gambar di bawah
  5. Akan ditampilkan window Dynamic Data. Pilih field yang akan menjadi value parameter (dalam hal ini kita akan gunakan nim). Klik OK untuk melanjutkan.
  6. Klik OK, OK dan OK.
  7. Simpan Halaman
Setting Parameter URL

Setting Parameter URL

Bagian 2

Setelah link untuk ke halaman edit dibuat, sekarang kita buat halaman edit mahasiswa:

  1. Buka halaman edit_mhs.php yang sudah dibuat di langkah 1 bagian 1 di atas.
  2. Karena dalam form edit data, kita akan menampilkan terlebih dahulu data yang lama yang akan diedit, maka kita harus membuat Recordset. Pilih menu Insert > Application Objects > Recordset.
  3. Pada window Recordset, atur nama recordset, koneksi, tabel dan field yang akan diambil. Kita akan mengambil data mahasiswa berdasarkan nilai parameter nim yang dikirimkan dari halaman tampil_mhs.php (lihat langkah 2-5 Bagian 1 di atas). Atur Filter pada window Recordset (2) dimana kolom pertama adalah nama field yang akan difilter, kolom kedua adalah operator pembanding yang digunakan, kolom ketiga adalah jenis (metode) pengambilan value, kita pilih URL Parameter, dan pada kolom keempat dituliskan nama parameter atau form. Ketikkan nim pada bagian ini karena pada langkah sebelumnya (lihat langkah 5 bagian 1) kita mengatur nama parameternya adalah nim. Klik OK untuk menyimpan pengaturan dan Recordset akan terbentuk. Lihat gambar di bawah ini.
  4. Kemudian dari menu Application, pilih Record Update Form Wizard. Atau dengan cara mengakses menu Insert > Application Objects > Update Record > Record Update Form Wizard. Lihat gambar
  5. Akan ditampilkan Record Update Form. Atur koneksi, tabel yang digunakan, nama recordset untuk data yang akan diedit (langkah 10 bagian 2), pilih halaman yang akan ditampilkan setelah proses update berhasil (2), atur jenis inputan dan label (3). Jika sudah diatur dengan benar, klik OK untuk melanjutkan. Lihat gambar di bawah ini
  6. Akan ditampilkan form edit data di Dreamweaver. Untuk mencoba proses edit, buka halaman tampil_mhs.php di browser (F12) dan klik link edit. Lihat gambar
Membuat Recordset

Membuat Recordset

Record Update Form Wizard

Record Update Form Wizard

Membuat Halaman untuk Menghapus Data Mahasiswa

Seperti halnya halaman untuk edit data, halaman untuk menghapus data juga umumnya diawali dari halaman tampil. Di halaman tampil disediakan link delete dimana jika diklik maka akan menuju ke halaman delete mahasiswa dengan mengirimkan suatu parameter (nim).

Mari kita ikuti langkah-langkah untuk membuat halaman delete data.

  1. Buatlah halaman baru dengan nama hapus_mhs.php.
  2. Ikuti langkah 2 – 7 pada bagian-1 edit data diatas, hanya saja disesuaikan alamat link-nya ke halaman hapus_mhs.php.
  3. Jika link delete di halaman tampil_mhs.php sudah dibuat, maka selanjutnya kita buka halaman hapus_mhs.php.
  4. Selanjutnya dari menu Application, pilih Delete Record. Atau dengan cara mengakses menu Insert > Application Objects > Delete Record.
  5. Akan ditampilkan window Delete Record (lihat gambar). Pada window tersebut, aturlah (1) jenis variabel yang akan dijadikan penentu proses hapus dieksekusi atau tidak, (2) koneksi dan nama tabel yang digunakan, (3) kolom yang dijadikan primary key di database beserta nilainya, (4) halaman yang ditampilkan jika proses hapus mahasiswa berhasil.
  6. Klik tombol OK (5) untuk menutup window dan menyimpan pengaturan.
  7. Untuk mencoba proses hapus, buka halaman tampil_mhs.php di browser (F12) dan klik tombol delete.
  8. OK.
Delete Record

Delete Record

Kesimpulan

Macromedia Dreamweaver ternyata memiliki kemampuan lebih untuk membuat aplikasi berbasis database, terutama PHP-MySQL dengan mudah. Aplikasi seperti entri, edit, delete dan tampil dapat dibuat dengan cepat. Dalam tutorial ini hanya disampaikan langkah-langkah dasarnya, untuk tampilan yang lebih bagus, kita bisa mengembangkannya sendiri.


Dreamweaver, PHP, MySQL untuk Data Mahasiswa (1.2 MiB, 34,723 hits)

>> Readmore - Membuat aplikasi PHP tampil,edit,delete,insert dengan Dreamweaver bagian 2


Selamat Membaca , Kawan :)

11/22/2010

Cara membuat Menu Navigasi tree(bertingkat) di Dreamweaver

Buat Teman RPL SMKN1KOTABEKASI pasti dalam membuat web kalian membutuhkan yang namanya Menu atau navigasi merupakan komponen penting di dalam suatu website. Navigasi website sama halnya dengan navigasi sebuah kapal laut, dimana sistem navigasi yang baik tentu akan menuntun nahkoda kapal beserta seluruh penumpangnya menuju ke tujuan dengan cepat. Sebaliknya, navigasi yang buruk bukan tidak mungkin akan membuat kapal terlambat menuju ke tujuan atau bahkan tersesat di tengah laut. Navigasi di dalam website pun akan sama, yaitu jika dirancang dengan baik akan memudahkan pengunjung untuk menemukan apa yang ia cari. Namun jika navigasi tidak dirancang dengan baik atau bahkan tidak ada navigasi sama sekali, dapat mengakibatkan pengunjung tersesat dan akhirnya akan menutup website tersebut.

Dilihat dari bentuk dan susunannya, menu atau navigasi memiliki variasi yang beragam. Ada beberapa navigasi yang disusun mendatar (horizontal), ke bawah (vertical), berbentuk drop-down menu atau dapat juga berupa menu bertingkat (tree-menu). Berdasarkan teknik pembuatannya juga beragam, dari yang menggunakan HTML, CSS, Javascript, gambar sampai yang menggunakan teknologi flash. Masing-masing memiliki kelebihan dan kekurangan.

Di dalam tutorial ini akan disampaikan mengenai bagaimana membuat menu bertingkat (tree-menu) menggunakan fasilitas yang sudah tersedia di salah satu web development software, yaitu Dreamweaver. Langkah-langkah dalam tutorial dicoba menggunakan Macromedia Dreamweaver 8, namun demikian dapat juga dicoba dengan versi-versi terbaru dari Dreamweaver.

Berikut ini langkah-langkahnya

  1. Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan mengakses menu File > New.
  2. Aktifkan window Behaviors melalui menu Window > Behaviors atau dengan shortcut Shift + F4 (Lihat gambar 1)
  3. Buatlah sebuah link dengan text atau gambar, isi halaman tujuan link dengan # yang menandakan bahwa link tersebut jika diklik nantinya akan tetap di halaman yang sama. Sorot (select) link tersebut, kemudian dari window behaviors yang telah diaktifkan di langkah sebelumnya klik tombol Add behaviour yaitu icon dengan tanda [+]. Akan ditampilkan beberapa pilihan behaviour dan pilih Show Pop-Up Menu. Lihat gambar 2.
    Gambar 2

    Gambar 2

  4. Selanjutnya akan ditampilkan window Show Pop-Up Menu. Buatlah menu bertingkat sesuai rancangan menu yang diinginkan. Tersedia beberapa tombol yang akan membantu mengatur menu yang akan dibuat. Lihat contohnya di gambar 3. Jika ingin mengatur tampilan dari menu, dapat membuka tab ‘Appearance’ dan jika ingin mengatur posisi dari menu bisa mengaktifkan tab ‘Position’ seperti terlihat pada gambar 4. Klik tombol OK jika menu sudah diatur sesuai keinginan.
    Gambar 3

    Gambar 3

    Gambar 4

    Gambar 4

  5. Simpan halaman dan tampilkan hasilnya di browser dengan mengakses menu File > Preview in browser… atau shortcut F12. Contoh tampilan menu terlihat di gambar 5.
    Gambar 5

    Gambar 5

Kesimpulan

Membuat menu bertingkat (tree-menu) dengan menggunakan Macromedia Dreamweaver ternyata sangat mudah. Teknik yang digunakan oleh Dreamweaver dalam membuat menu tersebut adalah dengan javascript, sehingga menu akan ditampilkan dengan baik pada browser yang mendukung javascript.

Semoga tutorial singkat ini bermanfaat untuk kita semua.


Download Tutorial

  1. Direct download
  2. Download melalui link alternatif 1
  3. Download melalui link alternatif 2
  4. Download melalui link alternatif 3
  5. Download ebook dreamweaver dan banyak ebook lainnya kunjungi http://ebook.achmatim.net

best regards


imam77

>> Readmore - Cara membuat Menu Navigasi tree(bertingkat) di Dreamweaver


Selamat Membaca , Kawan :)

11/19/2010

Membuat aplikasi PHP dan MYSQL tampil,edit,delete,insert dengan Dreamweaver


Mungkin buat anak RPL , khususnya RPL smkn1kota bekasi, Macromedia Dreamweaver merupakan salah satu editor sekaligus web development tools yang cukup kesohor saat ini. Mengapa? Terutama karena kemudahan dan berbagai fasilitas yang mempermudah para pengembang aplikasi web dalam pekerjaannya. Konsep WYSIWYG (what you see is what you get) juga memberikan kenyamanan terutama bagi yang baru mencicipi dunia web (situs). Macromedia Dreamweaver sungguh memanjakan penggunakan dengan berbagai kemudahan, termasuk diantaranya dalam hubungannya dengan bahasa pemrograman PHP dan database MySQL.

Dalam tutorial ini akan disampaikan mengenai begitu mudahnya membuat aplikasi berbasis PHP dan MySQL dengan bantuan Macromedia Dreamweaver. Boleh dibilang tanpa menyentuh coding (program) sama sekali! Cukup ceklak sana ceklik sini, jadi deh. Kita akan membuat aplikasi yang menampilkan, mengentri, edit dan delete data mahasiswa. Sederhana memang, tapi bukankah sesuatu yang rumit juga berasal dari hal sederhana?

Daripada penasaran, yuk kita mulai saja.

Dalam Tutorial Ini Diasumsikan…

Bahwa:

  1. Di komputer yang Anda gunakan sudah terinstall dengan baik PHP, Apache, MySQL dan Macromedia Dreamweaver karena dalam tutorial ini kita akan menggunakan keempat software tersebut.
  2. Anda mengetahui bagaimana cara login ke MySQL berikut informasi user dan password yang dapat digunakan.
  3. Anda sudah membuat Site Definition pada Dreamweaver, berikut bagaimana mengkolaborasikan Dreamweaver dengan PHP-MySQL.
  4. Anda sudah cukup mengerti bagaimana membuat database, membuat dan memanipulasi tabel di MySQL baik melalui console maupun dengan front-end seperti PHPMyAdmin dan MySQLFront.
  5. Anda sudah cukup mengerti beberapa perintah SQL dasar (DDL, DML).

Mempersiapkan Database dan Tabel MySQL

Langkah pertama dalam membuat aplikasi web berbasis PHP dan MySQL dengan menggunakan Dreamweaver adalah mempersiapkan database dan tabel yang akan digunakan. Dalam tutorial ini akan digunakan DBMS MySQL. Tutorial ini hanyalah sebagai contoh sederhana bagaimana membuat proses entri, edit, delete dan tampil ke database MySQL dengan bantuan Macromedia Dreamweaver. Namun demikian, jika Anda sudah memahami tutorial ini dengan baik, untuk aplikasi yang lebih kompleks tidaklah berbeda jauh.

Pertama kali buatlah database di MySQL dengan nama dbmahasiswa. Selanjutnya buatlah tabel di MySQL dengan nama mhs dan dengan spesifikasinya sebagai berikut:

+----------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+----------+-------------+------+-----+---------+-------+
| nim | varchar(10) | NO | PRI | | |
| nama | varchar(30) | NO | | | |
| alamat | text | NO | | | |
| tgllahir | date | NO | | | |
+----------+-------------+------+-----+---------+-------+

Membuat Koneksi ke MySQL di Dreamweaver

Selanjutnya kita akan mengkoneksikan PHP dengan MySQL memanfaatkan tools yang sudah tersedia di Macromedia Dreamweaver. Jangan lupa pastikan bahwa Site Definition di Dreamweaver sudah dibuat dengan benar, karena keberhasilan dari koneksi ke MySQL juga bergantung dari site definition tersebut.

Berikut ini langkah-langkahnya:
  1. Buatlah file dengan nama input_mhs.php sebagai halaman untuk menginput data mahasiswa baru.
  2. Aktifkan (buka) panel Application yang berada di sebelah sisi window utama Dreamweaver (lihat gambar)
  3. Buka tab Databases pada panel Application tersebut.
  4. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menu MySQL Connection.
  5. Akan ditampilkan window isian MySQL Connection (lihat gambar). Isi nama koneksi, host mysql, username, dan password MySQL dengan benar (1), lalu klik tombol Select… untuk memilih database yang akan digunakan (2) dan klik tombol OK (3) untuk menyimpan konfigurasi koneksi MySQL.
  6. Jika koneksi berhasil maka pada panel Application tab Databases akan ditampilkan informasi database berikut tabel-tabel yang terdapat dalam database tersebut. (lihat gambar)
MySQL Connection

MySQL Connection

Membuat Halaman untuk Input Data Mahasiswa

Setelah koneksi ke database MySQL berhasil dilakukan, maka selanjutnya kita akan membuat halaman untuk melakukan input data mahasiswa ke database MySQL. Pada dasarnya untuk membuat aplikasi input data, kita harus membuat form inputan terlebih dahulu. Namun dengan bantuan Macromedia Dreamweaver, kita akan memanfaatkan fasilitas yang sudah tersedia, sehingga tidak perlu membuat form terlebih dahulu.

Berikut ini langkah-langkahnya:

  1. Buatlah file dengan nama input_mhs.php sebagai halaman untuk menginput data mahasiswa baru (jika sudah dibuat, tidak perlu dibuat lagi).
  2. Aktifkan bagian Application di menu atas, lalu pilih menu Record Insertion Form Wizard (lihat gambar). Atau bisa akses menu Insert > Application Objects > Insert Record > Record Insertion Form Wizard.
  3. Akan ditampilkan window Record Insertion Form. Tentukan koneksi yang digunakan, tabel yang digunakan dan atur tampilan form (jenis inputan). Tekan tombol OK. Lihat gambar
  4. Di halaman akan ditampilkan form inputan untuk data mahasiswa (lihat gambar). Tekan F12 (Preview in Browser) untuk mencoba halaman input data mahasiswa.
Record Insertion Wizard

Record Insertion Wizard

Membuat Halaman untuk Menampilkan Data Mahasiswa

Untuk membuat halaman yang menampilkan data dari database, dalam hal ini data mahasiswa, caranya cukup mudah. Yang pasti sebelum melanjutkan, kita harus memastikan kembali bahwa koneksi ke MySQL sudah dibuat dengan benar (lihat caranya di atas). Untuk menampilkan data dari database, pertama kali yang harus kita lakukan adalah membuat Recordset, lalu setelah recordset dibuat kita tinggal menentukan datanya mau ditampilkan dalam bentuk tabel atau yang lainnya. Dalam tutorial ini, kita akan menampilkan data ke dalam bentuk tabel.

Berikut ini langkah-langkahnya:

  1. Buatlah file dengan nama tampil_mhs.php untuk menampilkan data mahasiswa.
  2. Buka bagian Application, lalu pilih menu Recordset (atau dapat mengaksesnya melalui menu Insert > Aplication Objects > Recordset). Lihat gambar!
  3. Akan ditampilkan window Recordset (lihat gambar dibawah). Tentukan nama Recordsetnya (1), koneksi yang digunakan (2), tabel yang akan ditampilkan (3), field yang akan ditampilkan (4) serta filter dan pengurutan yang diinginkan (5). Tekan tombol OK untuk melanjutkan. Kita juga bisa menekan tombol Test untuk memastikan semua sudah benar.
  4. Selanjutnya akan ditampilkan window informasi jika Recordset berhasil ditambahkan. Klik OK untuk melanjutkan
  5. Dari menubar Application, Pilih icon Dynamic Data dan pilih Dynamic Table (lihat gambar). Atau juga bisa dilakukan dari menu Insert > Application Objects > Dynamic Data > Dynamic Table.
  6. Akan muncul window Dynamic Table. Pilih nama Recordset yang akan ditampilkan, jumlah record yang akan ditampilkan dan beberapa setting tabel. Klik OK untuk melanjutkan. Lihat gambar
  7. Di halaman akan ditampilkan sebuah tabel, baris pertama adalah header, baris kedua adalah data (record) dari database (gambar). Tekan F12 (Preview in Browser) untuk mencoba halaman tampil data mahasiswa.
Recordset

Recordset

Bersambung....

>> Readmore - Membuat aplikasi PHP dan MYSQL tampil,edit,delete,insert dengan Dreamweaver


Selamat Membaca , Kawan :)

11/17/2010

Pelangi dan Langit Sore

Coba lihat keluar dan diatas sana ada pelangi.
Pelangi itu begitu indah seperti parasmu.
dan langit sorepun mulai muncul begitu syahdu bagaikan suara emasmu.
Merekan pun menyatu begitu tenang .
dan suatu saat nanti aku bermimpi .
Aku dan kamu akan seperti Pelangi dan langit sore.
Yang hidup berdampingan Selamanya.

AKU CINTA KAMU

AKU SAYANG KAU

(boyo : xii rplb)
>> Readmore - Pelangi dan Langit Sore


Selamat Membaca , Kawan :)

Sakit Hati

Jika Matamu mendarat Memandang ku,
Ringankanlah kakimu pergi dariku.
Jika bibirmu terpaksa terseyum padaku,
Ringankanlah wajahmu berpaling dariku.

Jika susah untukmu melupakan kesalahanku,
Singgahkanlah lidahmu untuk menghianatiku.
Tapi Sewaktu saat hari nanti,
Telingamu mendengar berita kemantianku,

IkhlaskanLah Tanganmu
Mendoakanku dan bisikanlah padaku Lailaha illalloh ....

Alfatihah !!
>> Readmore - Sakit Hati


Selamat Membaca , Kawan :)

11/13/2010

Cara Merubah domain Localhost XAMPP


Hallo para penggemar Techno . Mungkin tidak perlu kami jelaskan lagi apa itu localhost karena saya tidak ingin para pembaca blog saya terkesan manja, jadi silahkan cari sendiri pengertian localhost di GOOGLE. .Buat para anak RPL smkn1 bekasi pasti sudah tahu semuanya kan ?

Singkatnya localhost (http://localhost atau http:127.0.0.1) adalah loopback address local komputer. Tentu ini tidak berlaku di semua komputer karena ini ada jika melakukan instalasi software semacam XAMP, WAMP, san semacamnya.

Bagaimana jika URL http://localhost diubah menjadi http://websitekamu.com atau http://domainkamu.com ? Mantaps neh keliatannya. hehehe…

Berikut cara merubahnya :

1. Buka Windows Explorer lalu buka direktori C:\WINDOWS\system32\drivers\etc
2. Buka file bernama “host” menggunakan text editor seperti notepad atau wordpad. Maka akan terlihat isinya seperti berikut :

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

127.0.0.1 localhost

3. terlihat ada syntax 127.00.1 localhost, sekarang kamu tambahkan nama domain yang kamu pilih seperti :

127.0.0.1 localhost rpl.com smkn1.org

Simpan file “host” dan pada contoh di atas localhost siap di akses dengan nama domain rpl.com dan smkn1l.org.

Mantap kan gan ??


best regard


imam77

>> Readmore - Cara Merubah domain Localhost XAMPP


Selamat Membaca , Kawan :)