tutorial ilham

TUTORIAL WEB

RPL

Disusun oleh:

M. Ilham. Akbar

KATA PENGANTAR

Puji dan syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa, karena berkat limpahan Rahmat dan Karunia-Nya sehingga penulis dapat menyusun makalah ini tepat pada waktunya. Makalah ini membahas tentang cara pembuatan web menggunakan Dreamweaver ataupun Notepad.

Penulis mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah membantu dalam penyusunan makalah ini, semoga bantuannya mendapat balasan yang setimpal dari Tuhan Yang Maha Esa.

Penulis menyadari bahwa makalah ini masih jauh dari kesempurnaan baik dari bentuk penyusunan maupun materinya. Kritik konstruktif dari pembaca sangat penulis harapkan untuk penyempurnaan makalah selanjutnya.

Depok, 24 Mei 2013

Penulis

PERISTILAHAN/GLOSSARY

.Web design : Pembuatan/desain halaman-halaman web.

<strong> : Menebalkan Huruf (bold).

<p> : Membuat paragraf baru.

<center> : Agar tulisan berada di tengah.

Link : Untuk mengatur warna link dokumen dengan warna tertentu.

Vlink : Untuk mengatur warna visited link dokumen dengan warna tertentu.

Alink : Digunakan untuk mengatur warna active link dokumen dengan warna tertentu.

Menginstall Adobe Dream Weaver Cs6

Pertama: Klik setup untuk memulai menginstall:

Lalu klik install:

Lalu Klik Accept:

Klik language untuk menentukan bahasa dan Klik gambar folder untuk menempatkan lokasi dream Weaver, lalu klik install:

Mulai menginstall:

Menginstall selesai:

BAB. I PENDAHULUAN dan Membuat Tampilan HOME

A. Struktur Dasar HtmlDalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

<html><head>

<title>Judul Form/Caption</title></head><body>

ISI WEB</body>

</html>

Keterangan:<html> .. </html> Mendefinisikan bahwa

teks yang berada diantara kedua tag tersebut adalah file HTML.

<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada

bagian paling atas browser Anda (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. Ikuti langkah-langkah berikut ini:1.Buka software Dreamweaver. Lalu akan muncul

tampilan sebagai berikut :Pilih lah yang berelips merah. Pilih HTML :

2.Buka Browser, misalnya Mozilla firefox atau Google Chrome.

3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah Dreamweaver.

4.Buatlah terlebih dahulu site : Pilih Site – New site.

Kemudian akan muncul tampilan seperti berikut : Masukan Nama- lalu klik Next

Kemudian pilih Yes-PHP MySQL-Next :

Lalu pilih Edit-Next :

Kemudian masukan nama yang tadi anda inginkan : kemudian Next

Kemudian pilih Yes-NEXT :

Kemudian browse file. Pilih Folder habib.

Kemudian pilih habib-klik open-dan select.

Lalu pilih Yes-Next

Pilih Yes-Dreamweaver-masukan nama-next:

Klik NEXT:

Pilih Design:

INGAT !

Cara membuat Table : INSERT-TABLE

Kemudian Masukan ROW dan COLUMNS-OK:

Tampilan akan seperti berikut:

Dapat anda atur hingga table menjadi seperti berikut :

INGAT ! CARA MEMASUKAN GAMBAR : INSERT-IMAGE

DAN PASTIKAN ANDA SUDAH MEMPUNYAI FOLDER YANG BERISI GAMBAR-GAMBAR !

Kemudian jadikan sebagai Banner ! seperti gambar dibawah ini,

INGAT ! CARA MEMBUAT KOLOM DI DALAM KOLOM ! INSERT-TABLE

Masukan Rows dan Columns !

Akan muncul sebagai berikut :

Tulis didalam kolom tersebut HOME,NEWS,GALERY,Data Tamu dan tambahkan BG COLOR (dapat anda lihat caranya di gambar berikutnya).

Tulis juga seperti berikut !

Masukan kembali gambar pada kolom paling kanan !

Seperti cara yang diatas saat memasukan gambar ! kemudian tulis pada kolom Space Iklan .

Lakukan seperti diatas ! pada Space Iklan.

Lakukan kembali pada gambar diatas, tapi pada kolom Tahukah kamu (paling kiri).

Agar anda dapat melihat hasil anda sementara, Save terlebih dahulu :

Save dengan nama Home.html:

Akan tampil sebagai berikut :

Pilih :

Inilah hasil sementara anda pada tampilan di Mozilla !

Kembali pada Tampilan Dreamweaver, Masukan Gambar dan Kalimat pada tengah-tengah kolom yang masih kosong ! Hingga seperti berikut:

Akhirnya pun Tampilan Home anda selesai !

Untuk mengeceknya, Masuk pada tampilan Mozilla. Klik F5 atau KLIK KANAN RELOAD.

BAB. 2Membuat Tampilan NEWS

Langkah pertama, agar selanjutnya menjadi lebih mudah (lebih sederhana)

Lihatlah proses sebagai berikut :

Pilih File-New .

Kemudian Pilih HTML-Create.

Karena kita ingin lebih sederhana, Blok semua Code yang ada di Home.html. Lalu Copy dan Paste pada halaman yang kosong (Untitled-1). Kemudian, klik design. Lalu hapus saja gambar yang berada di tengah dan yang di pinggir kanan.

Kemudian, Masukan gambar pada bagian tengah. Cara: INSERT-IMAGE.

Kemudian akan muncul tampilan seperti berikut : Klik gambar- lalu OK

Tampilan pada Dreamweaver akan tampak seperti berikut:

Dan Masukan sebuah kata-kata. Misalnya seperti yang tampak digambar.

Masukan kembali gambar pada kolom yang paling kanan. Dengan INSERT-IMAGE.

Lalu, akan muncul tampilan ini. Pilih gambar dan klik OK

Dan muncul seperti berikut :

Lakukan lagi seperti yang diatas, masukan gambar dan tulis kata-kata.

Kemudian masukan gambar kembali. Dan tambah kata-kata.

Akan tampil seperti berikut!

Masukan gambar kembali pada bagian tengah bawah. INSERT-IMAGE

Pilih gambar dan Klik gambar yang dipilih.

Maka. Tampilan akan menjadi seperti berikut:

Lalu simpan tampilan ini dengan cara: FILE-SAVE-dengan nama(NEWS.html).

Lihat hasil kita di Mozilla/Google Chrome: Caranya atau Klik kanan Reload.

Namun kita ubah background terlebih dahulu:

Dan

Dan Jadilah tampilan NEWS seperti ini :

Jadilah Tampilan NEWS.html

BAB. 3Membuat Tampilan GALERY



Pilih File-New .


Karena kita ingin lebih sederhana, Blok semua Code yang ada di News.html. Lalu Copy dan Paste pada halaman yang kosong (Untitled-1). Kemudian, klik design. Lalu hapus saja gambar yang berada di tengah dan yang di pinggir kanan.

Lalu hapus gambar pada bagian tengah dan bagian pinggir kanan:

Lalu Masukan gambar pada bagian tengah. INSERT-IMAGE

Kemudian: Pilih gambar dan Klik OK

Hasilnya menjadi seperti ini.

Lakukan sperti itu (memasukan gambar) sehingga dapat memuat banyak gambar seperti berikut: INSERT-IMAGE

Dan masukan gambar juga di bagian ini

Dan pilih gambar yang anda inginkan :

Lalu akan muncul seperti berikut:

Masukan juga pada kolom dibawahnya. Hingga seperti ini.

Agar kita bisa melihat hasil kita, Save terlebih dahulu: dengan nama Galery.html

Kemudian nama Galery.html

Dan Hasilnya akan tampak seperti berikut pada tampilan Mozilla. Jangan lupa Klik F5 ATAU KLIK KANAN

RELOAD.

Dan jadilah tampilan Galery.html.

BAB. 4Membuat Tampilan Data Tamu



Pilih File-New .


Karena kita ingin lebih sederhana, Blok semua Code yang ada di galery.html. Lalu Copy dan Paste pada halaman yang kosong (Untitled-1). Kemudian, klik design. Lalu hapus saja gambar yang berada di tengah.

Lalu masukan Kode seperti berikut :

<p><strong>Data Tamu</strong></p>

<table width="351" height="147" border="0">

<tr>

<td width="89">Nama</td>

<td width="11">:</td>

<td width="229"><label>

<input type="text" name="nama" id="nama" />

</label></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type="text" name="alamat" id="alamat" /></td>

</tr>

<tr>

<td>Komentar</td>

<td>:</td>

<td><input type="text" name="komentar" id="komentar" /></td>

Hasilnya :

Dan selanjutnya save terlebih dahulu:

<p><strong>Data Tamu</strong></p>

<table width="351" height="147" border="0">

<tr>

<td width="89">Nama</td>

<td width="11">:</td>

<td width="229"><label>

<input type="text" name="nama" id="nama" />

</label></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type="text" name="alamat" id="alamat" /></td>

</tr>

<tr>

<td>Komentar</td>

<td>:</td>

<td><input type="text" name="komentar" id="komentar" /></td>

Kemudian jadi seperti berikut:

Dan MEMBUAT DATABASE !!!! PILIH BASISDATA

Dan masukan nama lalu ciptakan :

Setelah itu masukan nama kedua, dan kolom yang ingin kita buat :

Dan lalu mesinj penyimpanan : my isam

Dan jadilah seperti berikut !!!

Masukan juga koneksi.

<?

mysql_connect ("localhost", "root", "");

mysql_select_db("ilham");

?>

Masukan juga add.php

Jadilah seperti berikut web saya

<?

mysql_connect ("localhost", "root", "");

mysql_select_db("ilham");

?>

<?

include "koneksi.php";

$nama =$_POST['nama'];

$alamat =$_POST['alamat'];

$komentar =$_POST['komentar'];

//cek

if (!empty($nama) || !empty($alamat) || !empty($komentar)) {

// true; insert db

$sql = "INSERT INTO nyoba (nama,alamat,komentar) VALUES ('".$nama."','".$alamat."','".$komentar."')";

$hasil=mysql_query($sql);

if ($hasil==1)

{

echo "<script> alert ('Data Sukses Disimpan');

location='home.html';

</script>";

}else{

echo "<script> alert ('Data Gagal Disimpan');

location='home.html';

</script>";

tutorial ilham

Documents