Tutorial tugas akhir

2013
Nama : Wahyu Aji S
Kelas : X RPL 2
TUTORIAL TUGAS AKHIR
SMK Negeri 1 Depok
Jl. Raya Tapos Gg. Bhakti Suci No. 100 Kel. Cimpaeun
Kec. Tapos - Kota Depok, Jawa Barat Telp. (021) 87907233
Website: www.smkn1depok.sch E-mail: info@smkn1depok.sch.id

2
Kata Pengantar
Puji dan syukur kami panjatkan atas kehadirat Allah SWT yang telah
melimpahkan rahmat dan karunianya,sehingga makalah ini dapat tersusun walaupun
masih dalam bentuk yang sangat sederhana.
Makalah ini disusun untuk memenuhi tugas mata pelajaran PRODUKTIF RPL
yang berjudul “TUTORIAL TUGAS AKHIR”.Dengan makalah ini diharapkan siswa
dapat lebih kreatif dalam mengembangkan wawasan dan pengetahuan.Penulis juga
mengucapkan banyak terima kasih kepada semua pihak yang telah
membantu,sehingga makalah ini dapat terselesaikan.
Penulis menyadari makalah ini masih sangat sederhana, baik bentuk maupun
isinya, sehingga penulis mengharapkan masukan dan saran demi kesempurnaan
makalah ini.
Akhir kata penulis berharap semoga makalah ini bermanfaat bagi penulis dan
pembaca pada umumnya.
Penyusun

3
Daftar Isi
Kata Pengantar .............................................................................................................2
Daftar Isi........................................................................................................................3
Bab 1 Instalasi Software Pendukung ............................................................................4
Error! Reference source not found. Instalasi XAMPP ...........................................................Error! Bookm
Error! Reference source not found. Instalasi Adobe Dreamweaver ......................................8
Bab 2 Pembuatan Web.................................................................................................15
Error! Reference source not found. Pembuatan Site yang Benar .........................................15
Error! Reference source not found. Membuat Project HTML ................................................18
Error! Reference source not found. Contoh Tab Photos .......................................................20
Error! Reference source not found. Contoh Tab About.........................................................23
Error! Reference source not found. Membuat Tab Daftar Pengunjung .................................25
Bab 3 Membuat Database ............................................................................................30
Error! Reference source not found. Pembuatan Database ...................................................30
Error! Reference source not found. Pembuatan koneksi.php................................................32
Error! Reference source not found. Pembuatan add.php......................................................33

4
Bab 1
Instalasi Software Pendukung
1.1 Instalasi XAMPP
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi,
merupakan kompilasi dari beberapa program.
Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas
program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang
ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan
singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.
Program ini tersedia dalam GNU General Public License dan bebas, merupakan
web server yang mudah digunakan yang dapat melayani tampilan halaman web
yang dinamis.
a. Download XAMPP di http://www.google.co.id/
b. Jika sudah, buka aplikasi XAMPP

5
c. Pilih bahsa, lalu klik “OK”
d. Klik “Next”

6
e. Kemudian klik “Next”
f. Lalu klik “Install”

7
g. Tunggu hingga proses selesai
h. Setelah selesai klik “Finish”

8
1.2 Instalasi Adobe Dreamweaver
Adobe Dreamweaver merupakan program penyunting halaman web keluaran
Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran
Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-
fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia
Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi
terakhir Dreamweaver keluaran Adobe Systems adalah versi 12 yang ada dalam
Adobe Creative Suite 6 (sering disingkat Adobe CS6).
a. Buka Aplikasi Adobe Dreamweaver “Set-up.exe”

9
b. Pastikan koneksi Internet anda mati, lalu pilih “Try”

10
c. Kemudian klik “Accept”

12
e. Tunggu hingga proses selesai

14
g. Copy semua file di dalam folder Crack
h. Lalu paste di default directory Adobe Dreamweaver

15
Bab 2
Pembuatan Web
2.1 Pembuatan Site yang Benar
a. Buka aplikasi Adobe Dreamweaver
b. Lalu klik “Site”, dan pilih “New Site”

16
c. Namakan Site, dan samakan dengan lokasi folder
d. Lalu klik “Servers”, dan pilih “Add new Server”

17
e. Sesuaikan dengan nama site, lalu “Save”
f. Pilih “Advanced Setting”, sesuaikan dengan folder
gambarmu, lalu “Save”

18
2.2 Membuat Project HTML
a. Pilih “HTML”
b. Masukan kode sebagai berikut :

19
<!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>..::Wahyu Aji S Web Seadanya::..</title>
<style type="text/css">
body {
background-image: url(gambar/473431EA4.jpg);
}
</style></head>
<body>
<table width="898" height="593" border="8" align="left">
<tr>
<td height="265" colspan="2"><a href="home.html"><img
src="gambar/asd.jpg" width="979" height="261" /></a></td>
</tr>
<tr>
<td width="120" rowspan="2" align="center" valign="top"><a
href="index.php"><img src="gambar/asd1.jpg" width="200" height="303"
/></a></td>
<td height="45"><table width="761" height="43" border="0"
align="center">
<tr align="center" valign="middle">
<td width="163" height="37"><a href="home.html"><img
src="gambar/home.jpg" width="251" height="64" /></a></td>
<td width="163"><a href="photos.html"><img
src="gambar/photos.jpg" width="248" height="64" /></a></td>
<td width="163"><a href="about.html"><img
src="gambar/about.jpg" width="249" height="64" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<font size=7>
<td height="230" align="left" valign="top"><table width="763"
height="154" border="0">
<tr>
<td height="88" align="center"><font size="7">
<p><strong>One Piece</strong></p></font>
<p></p>
</td>

20
</tr>
<tr>
<td height="60" valign="top"><font size="4">
<pre> One Piece adalah serial anime TV Jepang keluaran
Shonen Jump.
Pembuat manga One Piece sendiri adalah Pak Eichiro
Oda.</pre></font></td>
</tr>
</table> <p> </p></td>
</font>
</tr>
</table>
</body>
</html>
*Nb : Untuk gambar yang tidak muncul, jangan lupa sesuaikan dengan
nama file gambar anda.
c. Hasil tampilan web
d. Lakukan berulang untuk Photos dan About, sisanya tinggal
mengganti isi dari tab Photos, dan About

21
2.3 Contoh Tab Photos
a. Kode :
<head>
body {
background-image: url(gambar/321.jpg);
}
</style></head>
<body>
<tr>
</tr>
<tr>
/></a></td>
align="center">
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><p><strong>Click Image to Zoom
</strong></p>

22
<tr>
<td width="100" height="102" align="left" valign="top"><a
href="zoom/asd1.html"><img src="gambar/asd1_2.jpg" width="100"
height="100" /></a></td>
<td width="100" align="left" valign="top"><a
href="zoom/asd2.html"><img src="gambar/asd8.jpg" width="100"
height="100" /></a></td>
<td width="100"><a href="zoom/asd3.html"><img
src="gambar/asd_2.jpg" width="100" height="100" /></a></td>
src="gambar/asd2.jpg" width="100" height="100" /></a></td>
src="gambar/asd9.jpg" width="100" height="100" /></a></td>
</tr>
<tr>
<td><a href="zoom/asd6.html"><img src="gambar/asd10.jpg"
width="100" height="100" /></a></td>
width="100" height="100" /></a></td>
width="100" height="100" /></a></td>
width="100" height="100" /></a></td>
width="100" height="100" /></a></td>
</tr>
</table>
<p><strong></strong> </p> <p> </p></td>
</tr>
</table>
</body>
</html>
b. Hasil :

23
2.4 Contoh Tab About
a. Kode :
<head>
body {
background-image: url(gambar/123.jpg);
}
</style></head>
<body>

24
<tr>
</tr>
<tr>
/></a></td>
align="center">
</tr>
</table></td>
</tr>
<tr>
<font size=7>
<td height="382" align="left" valign="top"><table width="763"
height="348" border="0">
<tr>
<td height="88" align="center">
<p><font size="7"><strong>About Me</strong></font></p>
<p></p>
</td>
</tr>
<tr>
<td height="254" align="center" valign="top"><font size="4"><pre>
I am creating this site is for
One Piece Lover.
I am very happy when you
enjoying this site.
I am sorry for this site is not

25
100% complete and my bad
English.
</pre></font></td>
</tr>
</table> <p> </p></td>
</font>
</tr>
</table>
</body>
</html>
b. Hasil :

26
2.5 Membuat Tab Daftar Pengunjung
a. Masukan kode sebagai berikut :
<head>
<style type="text/css"></style></head>
<body>
<tr>
<td width="277" height="739"><img src="gambar/asd13.jpg"
width="280" height="672" /></td>
</tr>
</table>
<table width="898" height="745" border="8" align="center">
<tr>
</tr>
<tr>

27
/></a></td>
align="center">
</tr>
</table></td>
</tr>
<tr>
<td height="382" align="left" valign="top"><p><?
include "koneksi.php";
?>
</p>
<form action="add.php" method="post">
<table width="50%" align="center" border="0">
<tr>
<td colspan="2" style="padding-bottom:20px">Daftar
Pengunjung</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value=""></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="e-mail" value=""></td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td><textarea name="isi" cols="40" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Simpan"><input
type="reset" value="Reset"></td>
</tr>

28
</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="76%" align="center" border="1">
<tr align="center">
<td width="19%">Tgl</td>
<td width="29%">Nama</td>
<td width="25%">E-mail</td>
<td width="27%">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 "Daftar Pengunjung Masih Kosong";
}
?></p></td>
</tr>
</table>

29
</body>
</html>
b. Hasil :
Bab 3

30
Membuat Database
3.1 Membuat Database
a. Masuk ke http://localhost/phpmyadmin/
b. Pilih”Basisdata”, sesuaikan nama, lalu klik “Ciptakan”
c. Buat table “table_bt”, jumlah kolom 5, lalu klik “Go”

31
d. Lalu buat isi table sebagai berikut :
Nama Field Type Length Others Extra
id INT 11 Primary_Key Auto_increment
nama VARCHAR 50
email VARCHAR 50
alamat TEXT
Tgl TIMESTAMP
e. Lalu “Save”

32
3.2 Membuat koneksi.php
a. Pada 1 folder yang sama dengan web anda, buat file
koneksi.php
b. Kode :

33
3.3 Membuat add.php
a. Pada 1 folder yang sama dengan web anda, buat file
add.php
b. Kode :
<?
include "koneksi.php";
$nama = $_POST['nama'];
$email = $_POST['e-mail'];
$alamat = $_POST['isi'];
//cek
if (!empty($nama) || !empty($email) || !empty($alamat)) {
// true; insert db
$sql = "INSERT INTO table_bt (nama,email,alamat) VALUES
('".$nama."','".$email."','".$alamat."')";
$hasil=mysql_query($sql);
if ($hasil==1)

34
{
echo "<script> alert ('Daftar Pengunjung Berhasil Disimpan');
location='index.php';
</script>";
}else{
echo "<script> alert ('Daftar Pengunjung Berhasil Simpan');
location='index.php';
</script>";
}
}else { // apabila form masih ada yg kosong do..
$msg = "Form ada yang kosong, Mohon dilengkapi";
echo $msg;
echo "<br><a href='index.php'>Back</a>";
}
?>
Sekarang pengunjung Web anda sudah bisa
meninggalkan jejak
Pengetesan :
 Sebelum :
 Sesudah :

Tutorial tugas akhir

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (16)

Similaire à Tutorial tugas akhir

Similaire à Tutorial tugas akhir (20)

Dernier

Dernier (20)

Tutorial tugas akhir