Tutorial Mengkoneksikan Database Mysql Ke Dreamweaver,Dan Menambahkan Data Pada Tampilan Web Yang Sederhana.

Tutorial Mengkoneksikan Database Mysql Ke Dreamweaver,Dan Menambahkan Data Pada Tampilan Web Yang Sederhana.

àSebelum Melanjutkan Kepembahasan Selanjutnya Terlebih Dahulu Kita Ulas Kembali Materi Yang Berkaitan Dengan Materi Ini Yaitu Membuat Database,Menyisipkan Data Didatabase,Mendesain Tampilan Web. Apakah Sista Dan Agan Sekalian Sudah Melihat Dan Mencoba Materi Yang Sebelumnya??? Kenapa??,Sista Dan Agan Harus Mencoba Karena Materi Sebelumnya Sangat Berkaitan Untuk Mengkoneksikan Database Ini.

àSetelah Membuat Database,Meyispkan Data Dan Mendesain Tampilan Web Selanjutnya Mengkoneksikan Database Ke Macromedia Dreamweaver Mx 2004 Dengan Cara Sebagai Berikut :

1. Aktifkan Xampp Control Panel Pada Laptop Sista Dan Agan Sekalian Dengan Cara Sebagai Berikut:

Ø  Start->All Programs->Xampp Control Panel. Lalu Aktifkan Apache Dan Mysql,Klik Tombol Start Maka Apache Dan Mysql Akan Running Seperti Pada Gambar Dibawah Ini:

2. Lalu Buka Program Macromedia Dreamweaver Mx 2004 Lalu Pilih File Yang Telah Kalian Buat Sebelumnya.

3.Setelah Itu Disebelah Kanan Pada Lembar Kerja Klik Application.

Ø  Klik ApplicationàDatabaseàKlik Tanda Ini  

 àMysql Connection.

Ø  Pada Tampilan Mysql Connection Atur Sebagai Berikut :

·         Connection Name : (Rani2) Atau Tulis Nama Kalian Masing-Masing.

·         Msql Server : Localhost

·         User Name : Root

·         Password  :---------

·         DatabaseàSelectàLalu Select  Database Yang Telah Kalian Buat Di Php MyadminàKampusà OkàOk

Ø  Penjelasan Lebih Mendetail Bisa Dilihat Pada Gambar Dibawah Ini.

4. Selanjutnya Pilih Server Beharviors

Ø  Server BeharviorsàKlik Tanda Ini à Lalu Pilih Recordset.

Ø  Pada Tampilan Recordset  Atur Sebagai Berikut:

·         Name : Mhs (Ingat Harus Huruf Kecil Iya)

·         Connection :Pilih (Rani2)

·         Table : Mahasiswaà Ok.

 

5. Selanjutnya Ulangi 1 Kali Lagi Seperti Tutorial Diatas Untuk Mengkoneksikan Jurusan (Jrs).

Ø  Server BeharviorsàKlik Tanda Ini à Lalu Pilih Recordset.

Ø  Pada Tampilan Recordset  Atur Sebagai Berikut:

·         Name : Jrs (Ingat Harus Huruf Kecil Iya)

·         Connection :Pilih (Rani2)

·         Table : Prodià Ok.

 

6. Selanjutnya Pada Menu Bar Pilih Insert

Ø  InsertàApplication ObjekàInsert RecordàRecord Insertion Form Wizard.

Ø  Pada Tampilan Record Insertion From Wizard Atur Sebagai Berikut :

·         Connection : Pilih Koneksi (Rani2)

·         Table : Mahasiswa

Ø  Pada From Fields Pilih/Klik Pada (Kd_Jurusan)

Ø  Lalu Display As : Pilih (Menu)

Ø  Lalu Pada Menu Properties

·         Populate Menu ItemsàPilih From Database

·         Recordset : Mhs

·         Get Labels FromsàPilih (Kd_Jurusan)

·         Get Values FromàPilih (Kd_Jurusan)

·         Klik Tanda Ini.

Ø  Pada Tampilan Dynamic Data.

·         FieldàPilih Recordset  JrsàKd_JurusanàOkàOkàOk

Ø  Penjelasan Lebih Mendetail Bisa Dilihat Pada Gambar Dibawah Ini.

7. Akan Muncul Seperti Gambar Dibawah Ini:

8. Selanjutnya Enter Kebawah Lalu Pada Menu Bar Pilih Insert :

Ø  InsertàApplication ObjekàDinamic DataàDinamic Table

Ø  Pada Tampilan Dynamic Table Atur Sebagai Berikut :

·         Recordset: Mhs

·         Show  :  All Records

·         Border :1

·         Cell Padding :1

·         Cell Spacing :1

·         Ok

Ø  Lihat Pada Gambar Dibawah Ini :

9.Akan Muncul Tampilan Sebagai Berikut :

10.Lalu Pada Menu Bar Pilih FileàSave All.

Ø  Lalu Running/Jalankan Dengan Menekan F12/Bisa Juga Klik Bola Dunia IniàLalu Klik Preview In Iexplore.

Ø  Setelah Dirunning Akan Tampil Gambar Seperti Dibawah Ini :

Ø  Cobalah Dengan Memasukkan Data Seperti Gambar Diatas :

·         Npm : 200010

·         Nama : Tara

·         Kd_Jurusan :   Ti

·         Lalu Klik Insert Record

·         Lihat Pada Tampilan Dibawah Apakah Data Yang Telah Kalian Insert Tadi Muncul/Tidak?

Sekian Dulu Iya Tutorial  ,Dan Jangan Lupa Memberikan Saran Pada Setiap Postingan Saya Ya Agar Saya Bisa Memperbaikinya J dan tunggu postingan selanjutnya ya guys J

Tutorial Mendesain Tampilan Web Berbasis Macromedia Dreamweaver Mx 2004

Tutorial Mendesain Tampilan Web Berbasis Macromedia Dreamweaver Mx 2004

1. Langkah Pertama Aktifkan Xampp Pada Komputer Anda Dengan Cara :

Ø  Start->All Programs->Xampp Control Panel. Lalu Aktifkan Apache Dan Mysql,Klik Tombol Start Maka Apache Dan Mysql Akan Running Seperti Pada Gambar Dibawah Ini:

 

2.Bukalah Program Macromedia Dreamweaver Mx2004 Dengan Cara Sebagai Berikut:

Ø  StartàAll Programsà Macromedia Dreamweaver Mx2004. Lalu Klik Php Seperti Pada Gambar Dibawah Ini:

3.Lalu Akan Muncul Tampilan Lembar Kerja Pada Macromedia Dibawah Ini.

4.Langkah Selanjutnya Pada Menu  Bar  Pilih

Ø  SiteàManage SiteàNewàSiteà Pada Kotak Itu Tulis Dengan Nama (Web)àNext

 

Ø  Pilih YesàPilih Php MysqlàNext

Ø  Lalu BrushàLetakkan Ke Local Disk CàXamppà>HtdocsàNew Folder Beri Nama (Desain)àOpenàSelectà

Ø  NextàOkàBrush LagiàSelectàLalu Ceklis Pada Kotak RefreshàTest UrlàOkà NextàNextàDoneàOkàDone.

   

 

5. Lalu Pada Menu Bar Pilih Insert à Table Atau Bisa Juga Tekan (Ctrl+Alt+T)

Ø  Pada Table Size àRows  (4) àColumns (3)

Ø  Header àTopàOk.

 6.Lalu Pada Baris 1,2,4 Dimarge Cellkan Petunjuknya Lihat Pada Gambar Dibawah Ini:

7.Selanjutnya Pada Baris Ke-3 Tambahkan Colums 9 Dengan Cara  :

Ø  Klik Kanan Lalu Pilih TableàPilih Insert Rows Dan Columns.

Ø  Setelah Itu Pada InsertàPilih ColumnsàNumber Of Colums 9àOk. 

8.Setelah Itu Langkah Selanjutnya Adalah Tulis Pada Baris Ke-2 (Welcome)àBlock Pada Tulis WelcomeàArahkan Kursor Pada Code Tersebut Lalu Tulis Coding àLalu Kembali Ke DesainàDengan Cara Sebagai Berikut :

9.Selanjutnya Beri Tulis (Home,Profil,Galeri,Creat,Read,Sampai Cari) Pada Kolom Yg Telah Dibuat TadiàSetelah Diberi Tulis Langkah Selanjutnya Block Pada Baris Ke-3 àLalu Letakkan Tulisan Tersebut Ke Tengah Lalu Beri Warna Background Tersebut. Lihat Pada Gambar Dibawah Ini.

10.Buka Program Photoshop Pada Komputer/Laptop Sista Dan Agan Sekalian.

Ø  File àNewàLalu

Ø  Atur Ukurannya Lihat Langkah-Langkahnya Pada Gambar Dbawah Ini :

• ·         Lalu Buatlah Desain Seperti Dibawah Ini :
• ·         Setelah Desain Dibuat Save Gambar Dengan Format JpegàLalu Ok.

Ø  File àNewà

Ø  Lalu Atur Ukurannya Utuk Membuat Biodata Lihat Langkah-Langkahnya Pada Gambar Dbawah Ini :

• ·         Lalu Buatlah Desain Seperti Dibawah Ini :
• ·         Setelah Desain Dibuat Save Gambar Dengan Format JpegàLalu Ok

11.Setelah Membuat Desain Diphotoshop Arahkan Kursor Pada Program Macromedia Yang Telah Kita Buat Lalu Letakkan Header Pada Baris Ke-1 Dan Pada Biodata Baris Ke-2 Kolom Ke-2 Dengan Cara Lihat Pada Gambar Dbawah Ini.

• ·         Pada Menu Bar Pilih InsertàImageàLalu Pilih Gambar Yang Telah Dibuat Tadi Letakkan Ke Local Disk CàXamppàHtdocsàDesainàLalu Ok.
• ·         Dan Untuk Biodataà Block Tulisan Profil Pada Baris Ke-2 Kolom Ke-2 Lalu  Pada Menu Propertià Link Lalu Brushà Pilih Desain Yang Telah Kalian Buat Diphotoshop Tadi Dengan Nama (Biodata)àOk.

12. Lalu Jalankan Dengan Menekan F12/Bisa Juga Klik Bola Dunia IniàLalu Klik Preview In Iexplore

Akan Tampil Gambar Seperti Dibawah Ini

Sekian Dulu Iya Tutorial  Mendesain Tampilan Web Dengan Berbasis Macromedia,Selanjutnya Saya Akan Membuat Tutorial Mengkoneksikan Database Diphp Mysql Ke Macromedia Dreamweaver Mx2004 :)