Selasa, 05 Juni 2012

Membuat Website Dinamis Profil IRMATA dengan menggunakan Software Adobe Dreamweaver CS4

1. Membuat Database dengan phpmyadmin Website profil IRMATA ini menggunakan database sebagai penyimpan data-data anggota. Database yang digunakan adalah MySQL yang terdapat pada XAMPP. Setelah menginstall XAMPP, maka langka-langkah untuk membuat database seperti berikut :

• Buka Browser (Mozilla Firefox).
• Pada Address bar ketik localhost/phpmyadmin/, klik Enter.

• Pilih tab Basisdata untuk membuat database.


• Isi nama Database dan klik Ciptakan. • Buat tabel pada database tadi beserta jumlah kolom.

 • Beri nama pada kolom-kolom tersebut, serta tentukan tipe data dan panjang karakter untuk recordnya, lalu simpan


• Berikut tampilan dari tabelnya.


• Untuk menambahkan record, pilih menu Sisipkan.

 • Berikut hasil menambahkan record ke dalam tabel. 

2. Membuat Site Dalam membuat web dengan menggunakan Adobe Dreamweaver CS4, terlebih dahulu membuat site atau website sebagai wadah dari halaman-halaman web yang akan kita buat. Lakukanlah langkah-langkah berikut :
• Jalankan Adobe Dreamweaver CS4.
• Klik menu Site -> New Site.


• Kemudian akan muncul dialog box Site Setup. Pada menu Site, kita isikan nama website kita dan folder tempat penyimpanan webpage kita.


Selanjtunya pada menu servers, kita isikan informasi tentang server yang digunakan dalam website kita seperti gambar dibawah ini. Lalu pada tab advanced, kita pilih PHP MySQL sebagai Server Model.



• Setelah membuat site, klik Save.

3. Membuat Halaman Web Setelah membuat situs web, kita akan membuat halaman-halaman web. Pada website yang saya buat menggunakan dua tipe halaman yaitu html dan php.
3.1. Membuat halaman HTML

• Klik menu File -> New Document.
• Pilih HTML pada Page Type.
• Pilih bentuk Layout yang akan digunakan pada web.
• Klik Create.



3.2. Memasukan gambar pada halaman HTML

• Klik menu Insert -> Image
• Pada dialog box Select Image Source, pilih gambar yang akan ditambahkan ke halaman web kita. *file gambar harus di folder yang sama dengan halaman web.
• Klik OK.




3.3. Membuat Hyperlink pada halaman HTML          
• Klik menu Insert -> Hyperlink.
• Pada textfield text, isi label untuk hyperlink tersebut.
• Pada textfield link, isi dengan nama file sebagai tujuan hyperlink.
• Klik OK.


 
 


3.4. Membuat tabel pada halaman HTML
• Klik menu Insert -> Table.
• Pada dialog box table, atur jumlah baris dan kolom.
• Klik OK.


 


3.5. Menambahkan teks pada halaman HTML
• Buka halaman yang akan ditambahkan teks.
• Tambahkan teks secara langsung pada halaman yang dikehendaki.

3.6. Membuat halaman formsearching.php
 3.6.1. Membuat form, textfield dan button
 • Klik Insert -> Form / Textfield / Button
 • Pilih Form / Textfield / Button
 • Kemudian kita beri action pada form ini dengan memanggil file search.php
 • Lalu pada name di Textfield, kita beri nilai “nama”.

 
Dengan menggunakan form pada halaman PHP digunakan untuk pencarian data ke database. Maka setelah klik “Submit”, maka program akan memanggil file search.php untuk menampilkan data dari database yang dicari.

3.7. Membuat halaman search.php Dalam website ini, halaman search.php adalah halaman dinamis karena memanggil data dari database. Sebelum menjalankan program search.php, terlebih dahulu untuk mengkoneksikan halaman web kita dengan database dan record.
 3.7.1. Mengkoneksikan dengan Database(MySQL)
 • Pilih tanda “+” pada tab Databases dan pilih MySQL Connection.
 • Masukan nama koneksi (boleh apa saja).
 • Masukan nama MySQL server
 • Masukan user name dan password database.
 • Pilih database yang akan digunakan.
 • Klik OK.


 3.7.2. Menambahkan Recordset
 • Pilih tanda “+” pada tab Bindings dan pilih Recordset (Query).
 • Masukan nama Recordset (boleh apa saja).
 • Pilih koneksi (yang digunakan untuk koneksi ke database).
 • Pilih table pada database.
 • Pilih filter atau pencarian berdasarkan record dengan Form variable.
 • Klik OK.


 3.7.3. Menampilkan hasil pencarian kedalam tabel

 • Buatlah tabel dengan jumlah baris dan kolom sesuai dengan database.
 • Klik & Drag Recordset ke dalam tabel yang dikehendaki.

 • Pada kode di line 42 dan 43, ganti statemen di dalam kurung siku sesuai dengan nilai yang diberikan pada textfield di halaman formsearching.php.

 3.7.4. Hasil Akhir






Tidak ada komentar:

Posting Komentar