Tutorial web Rinto Wibowo

29
TUTORIAL WEB RPL Disusun oleh: Rinto Wibowo

description

 

Transcript of Tutorial web Rinto Wibowo

Page 1: Tutorial web Rinto Wibowo

TUTORIAL WEB

RPL

Disusun oleh:

Rinto Wibowo

Page 2: Tutorial web Rinto Wibowo

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

Page 3: Tutorial web Rinto Wibowo

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.

Page 4: Tutorial web Rinto Wibowo

BAB 1Cara membuat site pada dream weaver

Langakah pertama untuk membuat web menggunakan Dream Weaver:

Klik site lalu klik new site seperti gambar di bawah ini

Page 5: Tutorial web Rinto Wibowo

Setelah klik new site keluar tampilan seperti berikut, lalu klik next

Page 6: Tutorial web Rinto Wibowo

Setelah itu klik advanced

Page 7: Tutorial web Rinto Wibowo

Klik gambar folder untuk menyimpan

Setelah menentukan folder klik select

Page 8: Tutorial web Rinto Wibowo

Setelah itu klik Ok

Page 9: Tutorial web Rinto Wibowo

BAB 2Membuat index

Petama Klik HTML

Untuk memasukan table klik insert

Page 10: Tutorial web Rinto Wibowo

Lalu atur rows dan columns

Atur lebar dan tinggi sesuai keinginan

Page 11: Tutorial web Rinto Wibowo

Jika ingin masukan gambar blok table bagian atas lalu klik seperti gambar yang sudah di bulatkan di bawah

Setelah itu klik insert dan klik image

Page 12: Tutorial web Rinto Wibowo

Setelah itu pilih gambar yang anda inginkan

Setelah itu masukan table seperti gambar di bawah ini

Untuk tulisan table di tengah klik horz dan center

Page 13: Tutorial web Rinto Wibowo

Masukan kata bergerak dengan klik code dan tambahkan <marquee>….</marquee>

Dan akan muncul tulisan seperti gambar di bawah ini :

Page 14: Tutorial web Rinto Wibowo

BAB 3Membuat photos dan profile

Untuk memasukan foto di dalam link photos klik insert lalu image

Masukan beberapa foto sesuai dengan tema web kalian seperti gambar di baawah ini!

Page 15: Tutorial web Rinto Wibowo

Untuk membuat profile sama halnya dengan membuat photos hanya saja code dari photos

<div align="center"> <p><div align="left"> <p> <img src="gambar/520664-fairy_tail_01__eyecatch_1.jpg" width="220" height="150" /> <img src="gambar/12.jpg" width="220" height="150" /><img src="gambar/10.jpg" width="220" height="150" /><img src="gambar/all-akatsuki.jpg" width="220" height="150" /><img src="gambar/Hitsugaya Keren.jpg" width="220" height="150" /><img src="gambar/hunterxhunter1.jpg" width="220" height="150" /></p> <p><img src="gambar/One Piece 8.jpg" width="220" height="150" /> <img src="gambar/toshiro-hitsugaya.jpg" width="220" height="150" /></p> </div></p> </div>

Page 16: Tutorial web Rinto Wibowo

Kode dari photos diganti dengan profil sesuai dengan tema web kalian,

Page 17: Tutorial web Rinto Wibowo

Untuk membuat contact dengan menggunakan kode sebagai berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"><!--body {

background-image: url(../persebaya%20comunity/gambar/473431EA4.jpg);background-color: #0FF;

}a:active {

color: #0000FF;}a:link {

color: #0000FF;}a:visited {

color: #0000FF;}a:hover {

color: #0000FF;}.style6 {color: #000000}body,td,th {

color: #0F0;}--></style></head>

<body><table width="829" height="613" border="0" align="center"> <tr> <td height="309" colspan="3"><img src="gambar/08.jpg" width="830" height="300" /></td> </tr> <tr> <td colspan="3" align="center"><table width="553" border="1" align="center" bordercolor="#FF0000">

Page 18: Tutorial web Rinto Wibowo

<tr align="center"> <td width="480" height="72" bgcolor="#00FFFF"><a href="index.html">Home</a></td> <td width="480" bgcolor="#00FFFF"><a href="profile.html">Profile</a></td> <td width="480" bgcolor="#00FFFF"><a href="Photos.html">Photos</a></td> <td width="480" bgcolor="#00FFFF"><a href="index.php">Contact</a></td> </tr> </table></td> </tr> <tr> <td width="179" rowspan="2"><table width="843" border="0" align="left"> <tr> <td width="180"><img src="gambar/Naruto_Rasengan_Gif.gif" width="176" height="113" /></td> <td width="465">&nbsp; <? include "koneksi.php"; ?> </p> <form action="add.php" method="post"> <table width="70%" align="center" border="0"> <tr></tr> <tr> <td colspan="2" style="padding-bottom:20px">Contact</td> </tr> <tr> <td>Nama</td> <td><input type="text" name="nama" value="" /></td> </tr> <tr> <td></font></td> </tr> <tr> <td>E-mail</td> <td><font color="white"> <input type="text" name="email" value="" size="50" /> </font></td> </tr> <tr> <td>Alamat</td> <td><font color="white"> <textarea name="alamat" cols="40" rows="5"></textarea> </font></td>

Page 19: Tutorial web Rinto Wibowo

</tr> <tr> <td></td> </tr> <tr> <td></td> <td><input type="submit" value="Simpan" /> <input type="reset" value="Reset" /></td> </tr> </table> </form> <? $sql_cek = "SELECT count(*) AS count FROM table_bt"; $hasil=mysql_query($sql_cek); $row=mysql_fetch_row($hasil);

$count = $row[0];

if ($count > 0){ ?> <table width="94%" align="center" border="1"> <tr align="left"> <td width="20%">Tgl</td> <td width="28%">Nama</td> <td width="32%">E-mail</td> <td width="20%">Alamat</td> </tr> <?

$sql = "SELECT * FROM table_bt" ;$hasil =mysql_query($sql);

while($row=mysql_fetch_array($hasil)) {echo "<tr>";echo "<td>$row[tgl]</td> ";echo "<td>$row[nama]</td> ";echo "<td>$row[email]</td> ";echo "<td>$row[alamat]</td> ";echo "</tr>";}

?> </table> <?

Page 20: Tutorial web Rinto Wibowo

}else {echo "Data Belum Ada";

} ?></td> <td width="184" align="left"><img src="gambar/Sasuke_gif.gif" width="172" height="113" align="left" /> &nbsp; </tr> </table></td> <td width="449" height="30" align="center"><p> <h3>&nbsp;</h3></body></html></p> </div> </td> </tr> <tr> <td><div align="left"></div></td> </tr></table></body></html>

Page 21: Tutorial web Rinto Wibowo

Untuk membuat link pada home,profile,photos dan guest book, dengan cara klik code seperti gambar di baah ini :

<tr> <td colspan="3" align="center"><table width="553" border="1" align="center" bordercolor="#FF0000"> <tr align="center"> <td width="480" height="72" bgcolor="#00FFFF"><a href="index.html">Home</a></td> <td width="480" bgcolor="#00FFFF"><a href="profile.html">Profile</a></td> <td width="480" bgcolor="#00FFFF"><a href="Photos.html">Photos</a></td> <td width="480" bgcolor="#00FFFF"><a href="index.php">Contact</a></td> </tr> </table></td> </tr>

Page 22: Tutorial web Rinto Wibowo

Bab 4 Bikin databasenya.

Buat table dan tentukan jumlah field-nya

Table Name : table_bt

Field : 5

Nama Field Type Length Others Extra

Id INT 11 Primary_Key Auto_increment

Nama VARCHAR 50

Email VARCHAR 150

Alamat TEXT

Tgl TIMESTAMP

Setelah kita memiliki kerangka database, langkah selanjutnya adalah membuat koneksi dari

php ke database.

Pertama klik basisdata

Page 23: Tutorial web Rinto Wibowo

Lalu isi kolom dan klik ciptakan, contoh:

Setelah itu klik yang tadi anda ciptakan

Isi nama dan kolom seperti gambar di bawah ini lalu klik go yang ada di sebelah kanan

bawah..

Page 24: Tutorial web Rinto Wibowo

Setelah itu klik kolom sesuai denagn table di atas,lalu klik simpan dan go

Untuk mengoneksikan web ke data base kita harus membuat Koneksi.php

<?

// nama_host,user_db,pass_db

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

mysql_select_db("rinto");

?>

Setelah memasukan kode di atas lau save

Page 25: Tutorial web Rinto Wibowo

Sekian tutorial dari saya wasallam..