Cara membuat web site Professional klas dasar,bagian 5

Image Shared From G+

Cara membuat web site klas dasar.

( Cara membuat form contak/buku tamu dengan Macromedia Dreamweaver)

Sallam pembaca.

Melanjutkan artikel sebelumnya bab cara membuat dasar2 website professional, kali ini kita lanjut ke bab bagaimana membuat form Kontak memakai Dreamweaver.

Seperti yang anda tahu. Form kontak ,form login untuk member, adalah element yang umum tersedia di web yang akan melibatkan pengunjung agar bisa berinteraksi dengan admin disebuah web.

Untuk membuat Form kontak atau buku tamu seperti itu,pertama kita harus menyediakan:

1.kita harus menyediakan tombol navigasi bagi pengunjung. Agar kalau ada pengunjung yang berminat untuk bertanya atau ber komentar tahu dimana ia dapat menuju halaman kontak yang berisi form yang akan diisi oleh pengunjung dan menyampaikan pesan atau pertanyaanya.

 2 selanjutnya kita harus menyediakan form kontaknya.

 3 kita juga akan membuat script PHP dimana berguna untuk memproses pengiriman pesan dari pengunjung ke email Admin.

Untuk membuat Form loginpun kita akan membuat element2 seperti diatas hanya ada perbedaan tentang banyaknya baris untuk isian data juga script php nya. Karena data pengguna member login akan lebih banyak dibanding  isian form kontak.

Baiklah kita mulai saja Dengan menyiapkan tombol untuk  navigasi ke form kontak.

 Cara membuat tombol disini tidak akan saya ulangi, sebab sebelumnya kita sudah banyak belajar membuat tombol. Hanya saja disini kira2 dimana tombol tsb kita letakan? Agar tombol tsb mudah dilihat oleh pembaca?. Coba kita letakan saja tombol tersebut di halaman HOME.html.

Buka Program Dreamweaver anda pilih “home.html”di folder”rancangan web” Setelah muncul halaman Home.html. Insert tombol dengan klik menu Insert dan pilih Rool Over image .masukan tombol2 biru dan hijau anda ,seperti cara yang sudah diterangkan sebelumnya .(buat dulu tombolnya dengan Baground.biru dan baground hijau atau tersearah pilihan anda. Text nya ketik klik disini.) letakan Di bagian bawah halaman
Lihat gambar Di bawah ini.

Gambar  1 tombol untuk form kontak.

Buat link tombol  ini dengan target menuju halaman "Formkontak html.” Dimana halamanya akan kita buat di bab selanjutnya. Untuk buat link caranya sbb. Karena tombol ini tidak di beri slice caranya adalah : pilih icon Image map di jendela property kiri bawah.kalau icon image map belum ada klik panah kecil dibagian kanan sebelah bawah dijendela properti..setelah itu klik tombolnya dan pilih image map. Pilihlah model kotak segi empat.dengan meklik nya  Lalu buat lah  segi empat di sekitar tombol dengan cara menyeret mose. Lalu isikan di link target dijendela property. “formkontak.html”

Simpan halaman ini dengan tekan SAVE

Saatnya kita membuat Form kontaknya  tetap di  dream weaver anda. Dan tetap di “home  html” yang barusan anda simpan  lalu klik File> dan >Save As  tulis dulu filenya namai “formkontak.html”

Setelah itu Blok dan delete conten halaman ini (aslinya tadi sudah kita simpan .yang kita delete adalah copynya.

Halaman ini akan kita ganti denga  halaman form kontak .seperti cara2 sebelumnya .

“Setelah anda delete isikan text seperti berikut ( atau anda karang sendiri kalimatnya):

Buku Tamu

Bila  ada pertanyaan dan ingin komentar jangan ragu untuk bertanya pada kami… silahkan isi data di bawah ini dan silahkan menulis pertanyaan anda  atau komentar anda di form di bawah ini.” Lalu kita membuat formnya

Selanjutnya letakan kursor anda persis dibawah tulisan tersebut.

Kliklah INSERT => Form

Gambar2 Lihat sub menu  Insert dibawah ini

Setelah anda klik Insert=> Form dilayar akan terbentuk kotak segi empat  merah .sbb

Gambar3 tanda titik2  merah di area form

Lihat di jendela properti dibawah ini.

 isi “formkontak.php” pada kotak isian action dan pilih… POST  pada kotak isian Method

Gambar 4 jandela Properti untk action

Selanjutnya…Klik didalam segi empat merah tersebut .Dan Klik Menu  Insert => Table

Pada Dialog Box untuk table (lihat gambar dibawah ) isi Rows =5 (baris)… Colums = 2(kolom)

Table width isi =500 pixel  , border =5 pixel ,  cel panding =3pixel , pilih header = none lalu klik OK

Gambar5 dialog Box untuk Tabel.

Akan terbentuk Form yang masih Kosong.

Gambar 6.Form kontak  masih koson g 

1.Ketikan text Nama di baris 1 kolom 1. Posisinya pilih Aligen center.(text ditengah).semua pengaturan hurup, size dan posisi ada di jendela properties.

Lalu klik di kolom sebelahnya (masih baris 1.colom 2).

Klik menu Insert di menu bar atas. Lalu klik=>Form Obyect lalu klik=>Text Field

Di jendela Properti : di Text Field isikan name (hurup kecil) .(value =nama)

Char width isi =30 , Max cahrs=50

Gambar 7 Jendela Property untuk pengisian text field

2.Ketikan text Email di kolom 1 baris ke2. .Posisi aligen center,atur hurupnya sesuai pilihan anda.

Semua pengaturan …di jendela properties.

Klik di colom 2 (sebelahnya).

Insert=> form obyect=>Text Field

Di jendela Properti : di Text Field isikan email   (hurup kecil) .

Char width isi =30 , Max cahrs=50

---------------------------------------------------------------------------------------------------------

3.Ketikan text Kota di kolom 1 baris ke3. .Poisi aligen center ,atur hurupnya sesuai pilihan anda.

Semua pengaturan …di jendela properties.

Klik di colom 2 (sebelahnya).

Insert=> form obyect=>Texe Field

Di jendela Properti : di Text Field isikan kota  (hurup kecil) .(value = kota…)

Char width isi =30 , Max cahrs=50

---------------------------------------------------------------------------------------------------------

4.Ketikan text Pesan di kolom 1 baris ke4. .Posisi aligen center,atur hurupnya sesuai pilihan anda.

Semua pengaturan …di jendela properties.

Klik di colom 2 (sebelahnya).

Insert=> form obyect=>Texe Area

Di jendela Properti : di Text Area  isikan  pesan (hurup kecil) .(value = pesan)

Char width isi =30 , Num line=6

------------------------------------------------------------------------------------------------------------------

5.Klik di Colom 2 baris 5

Semua pengaturan …di jendela properties.

Insert=> form obyect=>Buton

Di jendela Properti : di Buton name isikan Submit  (hurup kecil) .(value = kirim…)

Action= Submit Form

Selajutnya:

6.Kalau yang pakai Dream weaver sebelum  Versi 8 ikuti prosses ini!!!

Klik disamping tombol Submit. Kolom 2 baris5.

INSERT=special karakter=> other….. didialog Box pilih baris pertama (kotak sepasi)..>> OK

Cursor anda akan bergeser 1spasi

Kalau versi 8 keatas abaikan saja prosses tsb.

------------------------------------------------------------------------------------------------------------------

Selanjutnya:

7.Klik disamping tombol Submit. Kolom 2 baris5.

Semua pengaturan …di jendela properties.

Insert=> form obyect=>Buton

Di jendela Properti : di Buton name isikan reset (hurup kecil) .(value = ulangi…)

Action= Reset Form

Hasilnya lihat gambar di bawah ini.

Gambar.8a hasil Formkontak  yang Kita buat

Gambar .8b.form kontak/buku tamu tampak di halaman  “form kontak.html”

Selanjunya klik tag <form> yang ada di atas jendela Preperty.

Form anda  akan di hightlightt…(terblog). lalu lihat d Property Pada Action tulis: formkontak.php
di Bagian Method isikan: POST .Lalu simpan dengan klik Save.. namai filenya” formkontak.html”. Simpan di folder RancanganWeb Anda, Anda bisa coba di Browser anda dengan tekan F12. Atau pilih file dan open pakai Browsers anda(Chrome atau Intenet exploree atau Mozzila F).

------------------------------------------------------------------------------------------------------------

Copy data base Tabel  form kontak dibawah ini. .paste di program notepad anda ( Notepad adalah program bawaan Window). Simpan di folder “rancanganweb” anda.  Nantinya table ini akan kita masukan ke data base..rancangaweb ( yang akan kita bahas di artikel yang akan datang bersama data base keanggotaan untuk member/Form Login).

Tabel data basis. T.Form kontak…….>> field 5
Tabel data basis harus di cocokan dengan Input ini yang  yang telah diisikan ke Jendela property di Dream weaver seperti dbawah ini.

<form action=’formkontak.php’ Method=’post’> Nama : <input type=’text’ name=’nama’> Email : <input type=’text’ name=’email’> Kota :<input type=’text’ name=’kota’> Pesan : <textarea name=’pesan’ cols=40     rows=6></textarea> <input type=’submit’ value=’Kirim’> </form>  ditabel data basis nanti isikan sbb:nama Tabel daftartamu field (5) 1,no                   varchar (5 ) auto intcrement 2.nama               varchar 20 3.email               vrchara30 4.kota                varchar 30 5.judulpesan       varchar 150

Formkontak PHP

Copy dan pastekan di notepad anda , script PHP berikut.

Simpan di folder “rancanganweb” anda dengan nama file “formkontak.php”.  Script ini untuk memprosses pengiriman pesan dari form Kontak yang dikirim pengunjung.

<?php

 //terima data input dari user

 $nama=$_POST['nama'];

 $email=$_POST['email'];

 $kota=$_POST['kota'];

  $pesan=$_POST['pesan'];

//Prosses pengiriman

 $to=”gumilar_hidayat@ymail.com”;

 $subjek=”pesan dari Form”;

 $from=”From: $nama <$email>”;

//kirimkan ke email admin

 @ mail($to, $subjek, $pesan, $from);

 echo “Pesan berhasil terikirim.”; 

?>

Keterangan Tulisan warna merah ganti dengan email anda

Sekian Artikel kali ini silahkan di coba,…mudah2an bermanfaat

Sallam: Gumilar.H

Artikel selanjutnya.:

1.Mamasukan ke data basis (mysql)

2..Membuat form.Login.untuk member.

3.Test rancanganWeb. Dengan program “phptriad” atau XAMPP. Di Server local.

4.Tentang Upload Web Site ke Server Hosting.

--------------------------------------------------------------------------------------------------------------

                                     ***************  ***************