Tutorial web Rinto Wibowo

TUTORIAL WEB
RPL
Disusunoleh:
RintoWibowo

KATA PENGANTAR
PujidansyukurpenulispanjatkankehadiratTuhan Yang MahaEsa,
karenaberkatlimpahanRahmatdanKarunia-
Nyasehinggapenulisdapatmenyusunmakalahinitepatpadawaktunya.Makala
hinimembahastentangcarapembuatan web menggunakan Dreamweaver
ataupun Notepad.
Penulismengucapkanterimakasih yang sebesar-
besarnyakepadasemuapihak yang
telahmembantudalampenyusunanmakalahini,
semogabantuannyamendapatbalasan yang setimpaldariTuhan Yang
MahaEsa.
Penulismenyadaribahwamakalahinimasihjauhdarikesempurnaanbaik
daribentukpenyusunanmaupunmaterinya.Kritikkonstruktifdaripembacasang
atpenulisharapkanuntukpenyempurnaanmakalahselanjutnya.
Depok, 24 Mei 2013
Penulis

PERISTILAHAN/GLOSSARY
.Web design :Pembuatan/desainhalaman-halaman web.
<strong> :MenebalkanHuruf (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.

BAB 1
Cara membuat site pada dream weaver
Langakah pertama untuk membuat web menggunakan Dream Weaver:
 Klik site lalu klik new site seperti gambar di bawah ini

 Setelahklik new site keluartampilansepertiberikut, laluklik next

 Klikgambar folder untukmenyimpan
 Setelahmenentukan folder klik select

BAB 2
Membuat index
 PetamaKlik HTML
 Untuk memasukan table klik insert

 Laluatur rows dan columns
 Aturlebardantinggisesuaikeinginan

 Jikainginmasukangambarblok table bagianataslalukliksepertigambar yang sudah di bulatkan di
bawah
 Setelahituklik insert danklik image

 Setelahitupilihgambar yang andainginkan
 Setelahitumasukan table sepertigambar di bawahini
 Untuktulisan table di tengahklikhorzdan center

 Masukan kata bergerakdenganklik code dantambahkan<marquee>….</marquee>
 Dan akanmuncultulisansepertigambar di bawahini :

BAB 3
Membuat photos dan profile
 Untukmemasukanfoto di dalam link photos klik insert lalu image
Masukanbeberapafotosesuaidengantema web kaliansepertigambar di baawahini!

Untukmembuat profile samahalnyadenganmembuat photos hanyasaja code dari photos
<div align="center">
<p><div align="left">
<p><imgsrc="gambar/520664-fairy_tail_01__eyecatch_1.jpg" width="220" height="150" />
<imgsrc="gambar/12.jpg" width="220" height="150" /><imgsrc="gambar/10.jpg" width="220"
height="150" /><imgsrc="gambar/all-akatsuki.jpg" width="220" height="150"
/><imgsrc="gambar/Hitsugaya Keren.jpg" width="220" height="150"
/><imgsrc="gambar/hunterxhunter1.jpg" width="220" height="150" /></p>
<p><imgsrc="gambar/One Piece 8.jpg" width="220" height="150" /><imgsrc="gambar/toshiro-
hitsugaya.jpg" width="220" height="150" /></p>
</div>
</p>
</div>

Kodedari photos digantidenganprofilsesuaidengantema web kalian,

 Untukmembuat contact denganmenggunakankodesebagaiberikut :
<!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">

</style></head>
<body>
<table width="829" height="613" border="0" align="center">
<tr>
<td height="309" colspan="3"><imgsrc="gambar/08.jpg" width="830" height="300" /></td>
</tr>
<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>
<tr>
<td width="179" rowspan="2"><table width="843" border="0" align="left">
<tr>
<td width="180"><imgsrc="gambar/Naruto_Rasengan_Gif.gif" width="176" height="113"
/></td>
<td width="465"> 
<?
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>
</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>
<?
}else {

echo "Data Belum Ada";
}
?></td>
<td width="184" align="left"><imgsrc="gambar/Sasuke_gif.gif" width="172" height="113"
align="left" /> 
</tr>
</table></td>
<td width="449" height="30" align="center"><p>
<h3> </h3>
</body>
</html>
</p>
</div></td>
</tr>
<tr>
<td><div align="left"></div></td>
</tr>
</table>
</body>
</html>
 Untukmembuat link padahome,profile,photosdan guest book, dengancaraklik code
sepertigambar di baahini :

<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>
Bab 4

Bikindatabasenya.
Buat table dantentukanjumlah 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
Setelahkitamemilikikerangka database, langkahselanjutnyaadalahmembuatkoneksidariphpke
database.
 Pertamaklikbasisdata
 Laluisikolomdanklikciptakan, contoh:

 Setelahituklik yang tadiandaciptakan
 Isi namadankolomsepertigambar di bawahinilaluklik go yang ada di
sebelahkananbawah..

 Setelahituklikkolomsesuaidenagn table di atas,lalukliksimpandan go
 Untukmengoneksikan web ke data base kitaharusmembuatKoneksi.php
<?
// nama_host,user_db,pass_db
mysql_connect ("localhost", "root", "");
mysql_select_db("rinto");
?>
 Setelahmemasukankode di ataslau save

Sekian tutorial darisayawasallam..

Tutorial web Rinto Wibowo

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Tutorial web Rinto Wibowo

Similar to Tutorial web Rinto Wibowo (20)

Tutorial web Rinto Wibowo