Download - Membuat website dengan dreamweaver

Transcript

Membuat Website Dengan Dreamweaver CS3

untuk membuat website dengan Dreamweaver CS3 ada hal-hal yang perlu dipersiapkan yaitu :

1. Software XAMPP. Softwarenya dapat di download disini2. Adobe Dreamweaver CS3. Softwarenya dapat di download disini

Selanjutnya kita akan membuat web kita agar dalam satu folder dan dapat dicoba di komputer lokal. Dan yang perlu di ingat yaitu buat foldernya harus di instalasi XAMPP yaitu di Local Disk C xampp htdocs. Berikut ini langkah-langkahnya :

1. Pilih menu site New Site seperti pada gb1

gb 12. Kemudian akan tampil kotak dialog Site Definition For berikut

By M.Sofi Asrifin www.bebiy.com

Pada kotak What would you like to name your site? isikan nama websitemu dan kotak di bawahnya isikan alamat http://localhost/bebiy karena kita moncoba di server lokal. Kemudian klik tombol Next

3. Selanjutnya Pilih Yes, I want to use a server technology dan pada Which server technology pilih yang PHP MySQL karena tutorial ini akan menggunakan pemrograman PHP dan MySQL. Klik Next

Gb 34. Pilih Edit locally, then upload to remote testing server dan letakkan folder tempat untuk

menyimpan file website kita di drive C:\xampp\htdocs\bebiy\

By M.Sofi Asrifin www.bebiy.com

5. Pilih nama folder yang sudah kita buat klik Next

6. Pada kotak ketikkan alamat http://localhost/bebiy. nama bebiy disesuaikan dengan nama folder yang anda buat dari awal tadi. Klik Test URL

By M.Sofi Asrifin www.bebiy.com

7. Jika berhasil akan muncul pesan seperti ini :

By M.Sofi Asrifin www.bebiy.com

DESAIN TAMPILAN WEBSITE

Sebelum membuat website terlebih dahulu kita akan membuat tampilan layout websitenya. Secara default tampilan sebuah website terdiri dari Header, Menu, Isi, Footer. Berikut ini cara membuat layout website menggunakan tabel

1. Buatlah sebuah tabel caranya pilih menu Insert –> Tabel 2. Pada kotak dialog tabel pada bagian rows isikan 3, column isikan 2, tabel width 100%

seperti gambar dibawah ini

3. Jika sudah selesai pilih OK4. Blok pada baris 1 kolom 1 dan 2, Klik Kanan Merge Cells. Lakukan hal yang sama pada

baris 3 kolom 3 dan 25. Hasil layoutnya akan seperti ini

6. Pada bagian header dapat dimasukkan gambar dengan cara pilih menu Insert Image7. Pada bagian menu buat menu home, about, bukutamu

By M.Sofi Asrifin www.bebiy.com

MEMBUAT HALAMAN BUKU TAMU

1. Buat form caranya pilih menu Insert -> Form -> Form2. Membuat Tabel dengan 4 baris 3 kolom3. Kemudian isikan tiap baris pada tabelnya seperti ini

4. Untuk membuat kotak isian nama dan email buat Text Field pada menu insert, Untuk kotak isian komentar pilih Text Area, dan untuk membuat tombol submit pilih Insert -> Fom -> Button dan jangan lupa setiap kotak isian dari nama, email, komentar dan tombol submit masing-masing diberi nama.

By M.Sofi Asrifin www.bebiy.com

MEMBUAT DATABASE DI phpMyAdmin

Agar ketika kita mengisi form bukutamu hasil isiannya dapat disimpan didalam database maka kita harus membuat databasenya dulu di phpmyadmin.

Berikut ini caranya membuat database di phpmyadmin

1. Buka browser dan ketikkan alamat http://localhost/phpmyadmin2. Buat database baru dengan nama bukutamu seperti gambar berikut, lalu klik

Ciptakan

3. Buat tabel yang berada dalam database bukutamu, kemudian buat tabel bukutamu dengan nama tbbukutamu dengan 4 field, lalu klik Go

4. Isilah tabel yang sudah dibuat tadi seperti ini

Jangan lupa pada field id pada bagian AI/Auto Inrement kamu beri tanda centang agar setiap kali mengisi bukutamu no urutnya terbentuk secara otomatis.

By M.Sofi Asrifin www.bebiy.com

5. Jika langkah diatas berhasil maka tampilannya akan seperti ini

Jika ingin mengedit field dapat di pilih gambar pensil, kalau ingin mengapus pilih gambar sebelahnya gambar pensil

By M.Sofi Asrifin www.bebiy.com

MEMBUAT KONEKSI PHP KE DATABASE

1. Buka file bukutamu yang sudah dibuat2. Pilih Windows Database3. Pilih pada gambar yang bertanda + MySQL Connection. 4. Akan muncul kotak dialog MySQL Connection seperti gambar dibawah ini

Isikan kotak dialog seperti iniConnection name : kamu isi nama koneksinya pada conoh ini saya beri nama koneksiMySQL server : isikan localhostUsername : rootPassword : kamu kosongkoan sajaDatabase :pilih tombol select untuk memili database yang sudah kamu buat

sebelumnya di phpMyadmin5. Langkah selanjutnya pilih Windows Database Server Behavior6. Pilih pada gambar yang bertanda + Pilih Insert Record.7. Kemudian akan muncul kotak dialog Insert Record seperti ini

By M.Sofi Asrifin www.bebiy.com

Pada submit values from : pilih form1Connection : pilih koneksi (sesuaikan dengan nama yang sudah dibuat di MySQL

ConnectionInsert Table : pilih tbbukutamu (namanya sesuaikan dengan nama tabel yang

berada di database phpMyAdminColumns : samakan dengan dengan yang ada di gambar jika ada tulisan Not

Get Value Form berarti beberapa form kamu ada yang belum dikasih nama.

By M.Sofi Asrifin www.bebiy.com