tutorial web rinto wibowo
Post on 03-Nov-2014
276 Views
Preview:
DESCRIPTION
TRANSCRIPT
TUTORIAL WEB
RPL
Disusun oleh:
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
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.
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
Setelah klik new site keluar tampilan seperti berikut, lalu klik next
Setelah itu klik advanced
Klik gambar folder untuk menyimpan
Setelah menentukan folder klik select
Setelah itu klik Ok
BAB 2Membuat index
Petama Klik HTML
Untuk memasukan table klik insert
Lalu atur rows dan columns
Atur lebar dan tinggi sesuai keinginan
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
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
Masukan kata bergerak dengan klik code dan tambahkan <marquee>….</marquee>
Dan akan muncul tulisan seperti gambar di bawah ini :
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!
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>
Kode dari photos diganti dengan profil sesuai dengan tema web kalian,
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">
<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"> <? 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"><img src="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>
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>
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
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..
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
Sekian tutorial dari saya wasallam..
top related