Tutorial tugas akhir

338 views

Published on

Tugas Akhir

Published in: Education
  • Be the first to comment

  • Be the first to like this

Tutorial tugas akhir

  1. 1. 2013Nama : Wahyu Aji SKelas : X RPL 2TUTORIAL TUGAS AKHIRSMK Negeri 1 DepokJl. Raya Tapos Gg. Bhakti Suci No. 100 Kel. CimpaeunKec. Tapos - Kota Depok, Jawa Barat Telp. (021) 87907233Website: www.smkn1depok.sch E-mail: info@smkn1depok.sch.id
  2. 2. 2Kata PengantarPuji dan syukur kami panjatkan atas kehadirat Allah SWT yang telahmelimpahkan rahmat dan karunianya,sehingga makalah ini dapat tersusun walaupunmasih dalam bentuk yang sangat sederhana.Makalah ini disusun untuk memenuhi tugas mata pelajaran PRODUKTIF RPLyang berjudul “TUTORIAL TUGAS AKHIR”.Dengan makalah ini diharapkan siswadapat lebih kreatif dalam mengembangkan wawasan dan pengetahuan.Penulis jugamengucapkan banyak terima kasih kepada semua pihak yang telahmembantu,sehingga makalah ini dapat terselesaikan.Penulis menyadari makalah ini masih sangat sederhana, baik bentuk maupunisinya, sehingga penulis mengharapkan masukan dan saran demi kesempurnaanmakalah ini.Akhir kata penulis berharap semoga makalah ini bermanfaat bagi penulis danpembaca pada umumnya.Penyusun
  3. 3. 3Daftar IsiKata Pengantar .............................................................................................................2Daftar Isi........................................................................................................................3Bab 1 Instalasi Software Pendukung ............................................................................4Error! Reference source not found. Instalasi XAMPP ...........................................................Error! BookmError! Reference source not found. Instalasi Adobe Dreamweaver ......................................8Bab 2 Pembuatan Web.................................................................................................15Error! Reference source not found. Pembuatan Site yang Benar .........................................15Error! Reference source not found. Membuat Project HTML ................................................18Error! Reference source not found. Contoh Tab Photos .......................................................20Error! Reference source not found. Contoh Tab About.........................................................23Error! Reference source not found. Membuat Tab Daftar Pengunjung .................................25Bab 3 Membuat Database ............................................................................................30Error! Reference source not found. Pembuatan Database ...................................................30Error! Reference source not found. Pembuatan koneksi.php................................................32Error! Reference source not found. Pembuatan add.php......................................................33
  4. 4. 4Bab 1Instalasi Software Pendukung1.1 Instalasi XAMPPXAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi,merupakan kompilasi dari beberapa program.Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atasprogram Apache HTTP Server, MySQL database, dan penerjemah bahasa yangditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakansingkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.Program ini tersedia dalam GNU General Public License dan bebas, merupakanweb server yang mudah digunakan yang dapat melayani tampilan halaman webyang dinamis.a. Download XAMPP di http://www.google.co.id/b. Jika sudah, buka aplikasi XAMPP
  5. 5. 5c. Pilih bahsa, lalu klik “OK”d. Klik “Next”
  6. 6. 6e. Kemudian klik “Next”f. Lalu klik “Install”
  7. 7. 7g. Tunggu hingga proses selesaih. Setelah selesai klik “Finish”
  8. 8. 81.2 Instalasi Adobe DreamweaverAdobe Dreamweaver merupakan program penyunting halaman web keluaranAdobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaranMacromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir MacromediaDreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versiterakhir Dreamweaver keluaran Adobe Systems adalah versi 12 yang ada dalamAdobe Creative Suite 6 (sering disingkat Adobe CS6).a. Buka Aplikasi Adobe Dreamweaver “Set-up.exe”
  9. 9. 9b. Pastikan koneksi Internet anda mati, lalu pilih “Try”
  10. 10. 10c. Kemudian klik “Accept”
  11. 11. 11d. Lalu Klik “Install”
  12. 12. 12e. Tunggu hingga proses selesai
  13. 13. 13f. Lalu klik “Close”
  14. 14. 14g. Copy semua file di dalam folder Crackh. Lalu paste di default directory Adobe Dreamweaver
  15. 15. 15Bab 2Pembuatan Web2.1 Pembuatan Site yang Benara. Buka aplikasi Adobe Dreamweaverb. Lalu klik “Site”, dan pilih “New Site”
  16. 16. 16c. Namakan Site, dan samakan dengan lokasi folderd. Lalu klik “Servers”, dan pilih “Add new Server”
  17. 17. 17e. Sesuaikan dengan nama site, lalu “Save”f. Pilih “Advanced Setting”, sesuaikan dengan foldergambarmu, lalu “Save”
  18. 18. 182.2 Membuat Project HTMLa. Pilih “HTML”b. Masukan kode sebagai berikut :
  19. 19. 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"><imgsrc="gambar/asd.jpg" width="979" height="261" /></a></td></tr><tr><td width="120" rowspan="2" align="center" valign="top"><ahref="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"><imgsrc="gambar/home.jpg" width="251" height="64" /></a></td><td width="163"><a href="photos.html"><imgsrc="gambar/photos.jpg" width="248" height="64" /></a></td><td width="163"><a href="about.html"><imgsrc="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. 20. 20</tr><tr><td height="60" valign="top"><font size="4"><pre> One Piece adalah serial anime TV Jepang keluaranShonen Jump.Pembuat manga One Piece sendiri adalah Pak EichiroOda.</pre></font></td></tr></table> <p>&nbsp;</p></td></font></tr></table></body></html>*Nb : Untuk gambar yang tidak muncul, jangan lupa sesuaikan dengannama file gambar anda.c. Hasil tampilan webd. Lakukan berulang untuk Photos dan About, sisanya tinggalmengganti isi dari tab Photos, dan About
  21. 21. 212.3 Contoh Tab Photosa. Kode :<!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/321.jpg);}</style></head><body><table width="898" height="605" border="8" align="left"><tr><td height="265" colspan="2"><a href="home.html"><imgsrc="gambar/asd.jpg" width="979" height="261" /></a></td></tr><tr><td width="120" rowspan="2" align="center" valign="top"><ahref="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"><imgsrc="gambar/home.jpg" width="251" height="64" /></a></td><td width="163"><a href="photos.html"><imgsrc="gambar/photos.jpg" width="248" height="64" /></a></td><td width="163"><a href="about.html"><imgsrc="gambar/about.jpg" width="249" height="64" /></a></td></tr></table></td></tr><tr><td align="left" valign="top"><p><strong>Click Image to Zoom</strong></p>
  22. 22. 22<table width="769" height="168" border="0" align="left"><tr><td width="100" height="102" align="left" valign="top"><ahref="zoom/asd1.html"><img src="gambar/asd1_2.jpg" width="100"height="100" /></a></td><td width="100" align="left" valign="top"><ahref="zoom/asd2.html"><img src="gambar/asd8.jpg" width="100"height="100" /></a></td><td width="100"><a href="zoom/asd3.html"><imgsrc="gambar/asd_2.jpg" width="100" height="100" /></a></td><td width="100"><a href="zoom/asd4.html"><imgsrc="gambar/asd2.jpg" width="100" height="100" /></a></td><td width="97"><a href="zoom/asd5.html"><imgsrc="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><td><a href="zoom/asd7.html"><img src="gambar/asd11.jpg"width="100" height="100" /></a></td><td><a href="zoom/asd8.html"><img src="gambar/asd12.jpg"width="100" height="100" /></a></td><td><a href="zoom/asd9.html"><img src="gambar/asd13.jpg"width="100" height="100" /></a></td><td><a href="zoom/asd10.html"><img src="gambar/asd14.jpg"width="100" height="100" /></a></td></tr></table><p><strong></strong> </p> <p>&nbsp;</p></td></tr></table></body></html>b. Hasil :
  23. 23. 232.4 Contoh Tab Abouta. Kode :<!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/123.jpg);}</style></head><body>
  24. 24. 24<table width="898" height="745" border="8" align="left"><tr><td height="265" colspan="2"><a href="home.html"><imgsrc="gambar/asd.jpg" width="979" height="261" /></a></td></tr><tr><td width="120" rowspan="2" align="center" valign="top"><ahref="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"><imgsrc="gambar/home.jpg" width="251" height="64" /></a></td><td width="163"><a href="photos.html"><imgsrc="gambar/photos.jpg" width="249" height="64" /></a></td><td width="163"><a href="about.html"><imgsrc="gambar/about.jpg" width="248" height="64" /></a></td></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 forOne Piece Lover.I am very happy when youenjoying this site.I am sorry for this site is not
  25. 25. 25100% complete and my badEnglish.</pre></font></td></tr></table> <p>&nbsp;</p></td></font></tr></table></body></html>b. Hasil :
  26. 26. 262.5 Membuat Tab Daftar Pengunjunga. Masukan 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>..::Wahyu Aji S Web Seadanya::..</title><style type="text/css"></style></head><body><table width="283" height="743" border="0" align="left"><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><td height="265" colspan="2"><a href="home.html"><imgsrc="gambar/asd.jpg" width="979" height="261" /></a></td></tr><tr><td width="120" rowspan="2" align="center" valign="top"><ahref="index.php"><img src="gambar/asd1.jpg" width="200" height="303"
  27. 27. 27/></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"><imgsrc="gambar/home.jpg" width="251" height="64" /></a></td><td width="163"><a href="photos.html"><imgsrc="gambar/photos.jpg" width="249" height="64" /></a></td><td width="163"><a href="about.html"><imgsrc="gambar/about.jpg" width="249" height="64" /></a></td></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">DaftarPengunjung</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"><inputtype="reset" value="Reset"></td></tr>
  28. 28. 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. 29. 29</body></html>b. Hasil :Bab 3
  30. 30. 30Membuat Database3.1 Membuat Databasea. 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. 31. 31d. Lalu buat isi table sebagai berikut :Nama Field Type Length Others Extraid INT 11 Primary_Key Auto_incrementnama VARCHAR 50email VARCHAR 50alamat TEXTTgl TIMESTAMPe. Lalu “Save”
  32. 32. 323.2 Membuat koneksi.phpa. Pada 1 folder yang sama dengan web anda, buat filekoneksi.phpb. Kode :
  33. 33. 333.3 Membuat add.phpa. Pada 1 folder yang sama dengan web anda, buat fileadd.phpb. Kode :<?include "koneksi.php";$nama = $_POST[nama];$email = $_POST[e-mail];$alamat = $_POST[isi];//cekif (!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. 34. 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 bisameninggalkan jejakPengetesan : Sebelum : Sesudah :
  35. 35. 35

×