SlideShare a Scribd company logo
TUGAS LAPORAN PROYEK APLIKASI
”APLIKASI WEB:Coldplay Fans”
Oleh
ALDY JOHAN
NISN:9975054374
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013
“Toko Online Jersey ”
Oleh :
Aldy Johan
Tugas Laporan Proyek Aplikasi
Telah diuji sebagai syarat kelulusan mata pelajaran produktif RPL
Semester Genap Tingkat X
Tahun Ajaran 2012/ 2013
di
SMK NEGERI 1 DEPOK
Depok, ........................
Penguji,
________________
KATA PENGANTAR
Pertama-tama saya panjatkan puji dan syukur saya kepada Allah SWT, atas rahmat
dan karunia Nya saya dapat menyelesaikan laporan Aplikasi ini. Shalawat dan salam
selalu tercurah kepada Nabi besar kita yaitu Nabi Muhammad SAW beserta
keluarga , sahabat dan kita selaku umatnya hingga akhir jaman.
Selesainya laporan ini tak lepas dari orang yang selalu berada di samping saya, saya
ingin mengucapkan terima kasih kepada :
1. Ibu Inne Ria Abidin selaku Pembina I saya dalam membuat aplikasi ini yang
telah memberikan ilmu serta waktunya kepada saya , sehingga selesai lah
pembuatan laporan ini.
2. Bapak Nanang Suwandi selaku Pembina II yang telah memberikan support
kepada kami dalam menyelesaikan tugas akhir ini.
3. Kepada keluarga dan teman teman serta kakak kelas yang telah memberikan
semangat dan meluangkan waktunya dalam memberikan pengajaran kepada
kami.
4. Dan kepada semua pihak yang telah membantu yang saya tidak bisa
sebutkan satu per satu tanpa mengurangi rasa hormat saya.
Sekian sambutan dari saya, kurang lebihnya mohon maaf.
Assalamaualaikum wr.wb
Depok, 23 Mei 2013
Saya,
Aldy Johan
DAFTAR ISI
Halaman
LEMBAR PENGESAHAN..................................................................... ii
KATA PENGANTAR..............................................................................v
DAFTAR ISI............................................................................................vi
DAFTAR LAMPIRAN............................................................................ix
BAB I. PENDAHULUAN........................................................................1
I.1. Latar Belakang .................................................................... 2
I.2. Maksud dan Tujuan ............................................................. 3
BAB II. Instalasi Software pengembang ................................... 4
II.1. Instalasi XAMPP................................................................ 5
II.2. Perancangan dan FLOWCHART....................................... 9
II.
. Membuat aplikasi berserta databasenya ................................ 11
II.5. Membuat page websitenya beserta script ........................ 20
BAB III. Penutup ....................................................................................33
III.1. Kesimpulan ..................................................................... 33
III.2. Saran ............................................................................... 33
Daftar Pustaka.........................................................................................34
Lampiran.................................................................................................36
BAB I
PENDAHULUAN
I.1. Latar Belakang
Berisi penjelasan latar belakang dibuatnya aplikasi ini.
I.2. Maksud dan Tujuan
Berisi penjelasan maksud dan tujuannya pembuatan aplikasi.
I.I LATAR BELAKANG
Dibuatnya aplikasi ini dikarenakan tuntutan , karena
pembuatan aplikasi ini adalah salah satu syarat yang
dibutuhkan untuk naik ke jenjang yang lebih tinggi.
Membuat website itu juga tidak lah mudah di perlukan
ketelitian bagi kita agar mendapatkan hasil yang maksimal.
Untuk membangun sebuah website di perlukan suatu langkah-
langkah persiapan secara umum di bagi menjadi lima tahap
yaitu merumuskan tujuan website, menentukan isi website,
menentukan target pengunjung, menentukan struktur website,
jiak kelima langkah awal itu bisa kita pelajari semua pasti kita
akan bisa membuat suatu website yang bagus dan banyak di
kunjungi oleh banyak orang.
I.2 MAKSUD DAN TUJUAN
Maksud membuat website agar :
- Efisiensi anggaran promosi dan informasi
- Efektifitas dalam membangun strategi pemasaran serta
mengenalkan suatu komunitas
- Memasyarakatkan pengguna teknologi informasi secara kreatif
dan konsutif
Tujuan membuat website agar :
- Menyebarkan dan memperluas jaringan organisasi sebagai suatu
peluang mewujudkan semangat kerjasama dan meningkatkan
jaringan dan informasi
- Membangun jaringan online dan informasi dan promosi suatu
kelompok atau komunitas .
- Pengunjung website dapat mengetahui konten yang ada di web
kita.
BAB II
INSTALASI SOFTWARE PENGEMBANG
Perangkat Pengembangan Aplikasi
Berisi penjelasan software yang digunakan dalam pembuatan
aplikasi.
II.1. instalasi XAMPP
Berisi penjelasan untuk menginstalxampp, termasuk bahasa
tambahan seperti Javascript maupun library lainnya.
II.2. Flowchart
Berisi penjelasan perancangan jalannya aplikasi website.
II.3. Membuat aplikasi website berserta databasenya
Berisi tentang langkah-langkah membuat website dan databasenya.
II.4. Membuat page website besreta scriptnya
Berisi tentang langkah-langkah membuat page website
II. 1 INSTALASI XAMPP
XAMPP
XAMPP kepanjangan dari X yang berarti cross platform, A yang berarti Apache, M
yang berarti MySQL, P yang berarti PHP, dan P yang satu lagi yaitu Perl. XAMPP
adalah sebuah installer web server yang berisi Apache dan MySQL dan mendukung
program PHP dan Perl .
Cara Menginstall XAMPP
1. Download XAMPP untuk Windows di http://www.apachefriends.org/en/xampp-
windows.html, pilih basic package untuk instalasi standar
2. Setelah di download, jalankan installer XAMPP
3. Pilih bahasa, setalah itu klik OK
4. Pilih folder tujuan install XAMPP, lalu NEXT
5. Pada window XAMPP options, kamu akan diminta memilih beberapa options
seperti XAMPP desktop, XAMPP start menu, dan XAMPP section. Abaikan saja
pilihan tersebut, lalu klik INSTALL
6. Setelah instalasi selesai, jalankan XAMPP
7. Lalu klik Start Apache dan Start MySQL
8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser
sesuai selera anda
II.2. Flowchart
Flowchart
Flowchart merupakan gambar yang memperlihatkan urutan dan hubungan
proses berserta intruksinya. Gambaran ini dinyatakan simbol dengan demikian setiap
simbol menggambarkan proses tertentu. Sedangkan hubungan antara proses
digambarkan dengan garis penghubung.
Flowchart merupakan langkah awal membuat program. Dengan adanya
Flowchart urutan proses kegiatan lebih jelas. Jika ada penambahan proses maka
dapat dilakukan lebih mudah. Setelah Flowchart selesai disusun, selanjutnya
pemrograman (programmer) menerjemahkannya program dengan bahasa
pemrograman.
Simbol Simbol Flowchart
Flowchart disusun dengan simbol – simbol ini dipakai sebagai alat bantu
menggambarkan proses di dalam program.
Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifat mutlak
karena flowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu
masalah dengan computer sehingga flowchart yang dihasilkan dapat beragam antara
satu pemrogram dengan pemrogram lainnya.
Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian utama,
yaitu:
1. Input ialah bahan mentah
2. Proses pengolahan
3. Output ialah bahan jadi
Untuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk
pemecahan suatu masalah, yaitu:
9
1. START : Berisi instruksi untuk persiapan peralatan yang diperlukan sebelum
menangani pemecahan masalah.
2. READ : Berisi instruksi untuk membaca data dari suatu peralatan input.
3. PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengan data
yang dibaca.
4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan
5. END : Mengakhiri kegiatan pengolahan.
II.4. Membuat aplikasi website berserta databasenya
Membuat Database Login Admin
1. Pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamu
jalankan
2. Buka browser anda, seperti gambar yang ada di bawah ini:
3.Ketikkan " localhost/phpmyadmin " (tanpa tanda kutip) pada browser anda yang
diberi tanda lingakaran merah seperti gambar di bawah ini. Lalu tekan enter
4.Klik basisdata dan masukkan nama database yang kamu inginkan.
5.Saya akan membuat database buku_tamu
6.Maka akan muncul pada daftae database di samping.
Setelah database terbuat, selanjutnya adalah membuat table di dalam database
tersebut. Lalu klik database "komentar" tadi, lalu klik menu SQL kembali.
Setelah masuk menu SQL, silahkan tulis script:
create table table_bt(
No int (4) not null auto increment,
Nama varchar(100) not null,
Subject varchar(200) not null,
Isi text
Primary key (No)
)
Lalu klik Go
Seperti inilah hasilnya
Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page
.php index dan menyambungkannya ke database tersebut. Sehingga, sebelum
memasuki website akan ada tampilan page pemesanan yang dapat diakses oleh
admin pembuat website itu sendiri sesuai record yang telah diisi pada database
tersebut. Kita memerlukan page pemesanan, koneksi database dan koneksi database
dengan page pemesanan.
7. Sebelum itu, pastikan kamu telah membuat folder kosong untuk website kamu di
dalam folder installan XAMPP yang berletak di local disk c/xampp/htdocs/ dan buat
folder baru disitu dengan nama yang kamu kehendaki.
Mulai membuat koneksi database, masuk ke dalam folder itu dan buat notepad baru
dengan cara klik kanan – lalu pilih New Text Document, ubah namanya menjadi
”koneksi.php” (tanpa tanda kutip), lalu buka file tersebut ke dalam notepad dengan
cara klik kanan – open with notepad.
Setelah file terbuka, ketikkan script tersebut
<?
// nama_host,user_db,pass_db
mysql_connect ("localhost", "root", "");
mysql_select_db("buku_tamu");
?>
Setelah script tertulis, save script tersebut dengan cara CTRL + S.
9, Koneksi database telah terbuat, selanjutnya kita membuat koneksi database
dengan page index .php. Buat notepad baru dengan cara yang sama pada step
sebelumnya, lalu ubah namanya menjadi ”add.php” (tanpa tanda kutip), buka file
tersebut dengan cara yang sama pada step sebelumnya.
Setelah file terbuka, ketikkan script tersebut
<?
include "koneksi.php";
$nama = $_POST['nama'];
$subject = $_POST['subject'];
$isi = $_POST['isi'];
//cek
if (!empty($nama) || !empty($subject) || !empty($isi)) {
// true; insert db
$sql = "INSERT INTO table_bt (nama,subject,isi) VALUES
('".$nama."','".$subject."','".$isi."')";
$hasil=mysql_query($sql);
if ($hasil==1)
{
echo "<center><h1>Berhasil Mengirim Komentar</center></h1><br>";
echo "<center><h1><a href='komentar.php'>Back</center></h1></a>";
}
else
{
echo "Gagal Mengirim Komentar<br>";
echo "<a href='komentar.php'>Back</a>";
}
}else { // apabila form masih ada yg kosong do..
$msg = "Tolong Isi Form yang Kosong";
echo $msg;
echo "<br><a href='komentar.php'>Back</a>";
}
?>
Lalu save.
10.Dengan ini, kita tinggal membuat page komentar.php
Ketik script seperti ini.
<HTML>
<HEAD>
<TITLE>Coldplay</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,td,th {
color: white;
font-size: 18px;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
}
a {
font-family: "Comic Sans MS", cursive;
}
body {
body background:nyoba.jpg;
}
</style>
</HEAD>
<BODY>
<?
include "koneksi.php";
?>
<table width="1150" border="0" align="center">
<tr>
<td width="1330" height="321"><img
src="coldplaylogomyloxylotowhite.png" width="1465" height="550"
/></td>
</tr>
</table>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<table width="1090" border="0" align="center">
<hr>
<hr>
<tr>
<td WIDTH=333 align="center" bgcolor=""><a
href="HOME.html"><img src="home.png" width=""
height=""></a></td>
<td WIDTH=333 align="center" bgcolor=""><a
href="Download.html"><img src="download.png" width=""
height=""></a></td>
</tr>
</table>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<body background="nyoba.jpg">
<table width="401" border="1" align="center">
<hr>
<hr>
<tr>
<td width="391" height="155" border="0"><img
src="Coldplay_xy_speedofsound.gif" width="500" height="500"></td>
<P>
<td width="391" height="155" border="0"><img
src="album_1127619197.jpg" width="500" height="500"></td>
</tr>
</table>
<form action="add.php" method="post">
<table width="50%" align="center" border="0">
<tr>
<h1><td colspan="2" align="center" style="padding-
bottom:20px"><blink>Masukkan Komentar
Seperlunya</blink></h1></td>
</tr>
<tr>
<td align="left">Nama</td>
<td><input name="nama" type="text" value=""
size="50"></td>
</tr>
<tr>
<td align="left" valign="top">E-mail</td>
<td><input type="text" name="subject" value=""
size="50"></td>
</tr>
<tr>
<td align="left" valign="top">Komentar</td>
<td><textarea name="isi" cols="50" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Kirim"> <input type="reset"
value="Reset"></td>
</tr>
</table>
</form>
<?
// cek terlebih dahulu data di database
$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="51%" align="center" border="0">
<tr align="center">
<td width="31%" align="left"
bgcolor="black">Nama</td>
<td width="16%" align="left" bgcolor="black">E-
mail</td>
<td width="35%" align="left"
bgcolor="black">Commentar</td>
<td width="18%" align="left"
bgcolor="black">Tanggal</td>
</tr>
<?
$sql = "SELECT * FROM table_bt" ;
$hasil =mysql_query($sql);
while($row=mysql_fetch_array($hasil)) {
echo "<tr>";
echo "<td>$row[Nama]</td> ";
echo "<td>$row[Subject]</td> ";
echo "<td>$row[Isi]</td> ";
echo "<td>$row[Tgl]</td> ";
echo "</tr>";
}
?>
</table>
<?
}else {
echo "silahkan komentar";
}
?>
</BODY>
</HTML>
Lalu klik save sebagai komentar.php.
II.4. Membuat page website besreta scriptnya
1. Membuat page pertama yaitu page home ,pertama-tama kita masuk ke
windows pilih ascesories dan klik notepad setelah notepad terbuka lalu kita
ketik script seperti di bawah ini :
<html>
<head>
<title>Coldplay Fans</title>
</head>
<body background="nyoba.png" >
<p>
<p>
<center><img src="Merde (2).png" width="1465"
height="520"></center>
<body bgcolor="red">
<table border ="0" cellpadding ="0" cellspacing="0"
bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="1465" height="500" bordercolor="black"
bgcolor="black"><a href="home.html"><img
src="coldplaylogomyloxylotored.png" width="1465"
height="520"></a>&nbsp;</td>
</tr>
<br>
<br>
<br>
<hr>
<hr>
<center>
<h2>
<font face="Comic sans MS" color="maroon">
<a href="home.html"><img src="home.png" width="" height=""></a>
<a href="download.html"><img src="Download.png" width=""
height=""></a>
</font>
</h2>
</center>
<hr>
<hr>
<h1><marquee><font face="Comic sans ms"color="white"> The Best
Of Coldplay </font></marquee></h1>
<h2>
<pre>
<td width="100" height="230" bordercolor="white"
bgcolor="white">&nbsp;
<h2>
<pre>
<font face="Comic sans ms"color="red maroon">
<center><h1><u>Sambutan</h1></center></u>
<hr>
Posting at 3:25 a.m 30-04-2013
<h2>For Coldplay Fans</h2>
Sehubungan dengan pembuatan web ini saya ingin menyatakn bahwa
web ini merupakan tempat untuk
mendownload beberapa file tentang Coldplay dari lagu, serta foto
fotonya.
Dikarenakan fans Coldplay yang lumayan banyak di dunia, saya
berinisiatif membuat web ini.
Baiklah, saya akan melanjutkan untuk memberikan kabar terbaru dari
coldplay.
Situs Resmi Coldplay
Visit: <a href="http://myloxyloto.com"> Mylo Xyloto </a>
<hr>
Posting at 10.31 a.m 29-04-2013
<h1><center><a href="download.html">Download</h1></a></center>
<center><img src="Coldplay_Poster_Wall_by_chocolatepuppy.jpg"
height="670" width="1024"></center>
<center>Ingin Mendownload Lagu Coldplay? Klik <a
href="download.html"> DI SINI </a></center>
<center><img src="wp14_02.jpg"></center>
<hr>
<center><h1>Anda Punya Pendapat? Klik di <a href="komentar.php">
Sini </a></center></h1>
</h2>
</font>
</pre>
</td>
<br>
<br>
<h4>
<h2>
<pre>
<font face="Comic sans ms"color="white">
</h2>
</font>
</pre>
<p>
<p>
<p>
<p>
<p>
<p>
<center>
<p><font size="1">&nbsp;</font>
<center><table border="1" cellpadding="0"
cellspacing="0"
bordercolor="white" width="100.5%"
height="152">
<tr>
<td width="100%" height="19" bgcolor="red
maroon"
bordercolor="#C0C0C0">&nbsp;
<font face="comic san ms" color="Red"><center><h1><img
src=Boner.png height="300" width="1330"></font></center></h1>
</td>
</tr>
</center>
</pre>
</h2>
</body>
</html>
Jika sudah mengetik script seperti ini lalu anda harus mengesave filenya dengan cara
save as lalu beri nama home.html dan formatnya all files.
Dan hasilnya seperti ini :
2. Membuat Page Download .
Buat script download.html dengan mengetik script seperti ini :
<html>
<head>
<title>Coldplay Fans</title>
</head>
<body background="nyoba.png" >
<p>
<p>
<center><img src="Merde (2).png" width="1465"
height="520"></center>
<body bgcolor="red">
<table border ="2" cellpadding ="0" cellspacing="0"
bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="1465" height="500" bordercolor="#c0C0C0"
bgcolor="black"><a href="home.html"><img
src="coldplaylogomyloxylotored.png" width="1465"
height="520"></a>&nbsp;</td>
</tr>
<br>
<br>
<br>
<hr>
<hr>
<center>
<h2>
<font face="Comic sans MS" color="maroon">
<a href="home.html"><img src="home.png" width=""
height=""></a>
<a href="download.html"><img src="Download.png" width=""
height=""></a>
</font>
</h2>
</center>
<hr>
<hr>
<p>
<h1><marquee><font face="Comic sans ms"color="white"> The
Best Of Coldplay </font></marquee></h1>
<p>
<h2>
<pre>
<td width="100" height="230" bordercolor="#c0c0c0"
bgcolor="red maroon">&nbsp;
<h2>
<pre>
<font face="Comic sans ms"color="white">
<h1><center><u> DOWNLOAD FILE </H1><CENTER></u>
<h4> Kamu bisa mendownload file nya di daftar afile <a
href="data.html"><blink> DI SINI </a></h4></blink>
<center><img src="coldplay-4fc0c68eaa443.jpg" width="900"
height="500"></center>
<center> This Web Created By Aldy Johan </center>
<center>
<p><font size="1">&nbsp;</font>
<center><table border="1" cellpadding="0"
cellspacing="0"
bordercolor="#BDCED9" width="100.5%"
height="150">
<tr>
<td width="90%" height="19"
bgcolor="white"
ordercolor="#C0C0C0">&nbsp;
<font face="comic san ms" color="Red"><center><h1><img
src="Boner.png" height="300"
width="1330"></font></center></h1>
</td>
</tr>
</center>
</html>
Lalu klik save dengan nama download.html
3.Membuat page file download
Ketik script seperti ini, tapi sebelumnya pastikan file yang akan di
download ada di dalam folder web yang kamu buat.
Script nya :
<html>
<head>
<title>Viva La Vida</title>
</head>
<body background="nyoba.png" >
<p>
<p>
<body bgcolor="red">
<table border ="10" cellpadding ="0" cellspacing="0"
bordercolor="white"
width="100%" height="115">
<tr>
<td width="" height="" bordercolor="#c0C0C0"
&nbsp;</td>
</tr>
<p>
<center><img src="Bkgd1.png" width="1330"
height="500"></center></a>
<p>
<p>
<h2>
<pre>
<td width="50" height="125" bordercolor="#c0c0c0"
bgcolor="red blood">&nbsp;
<h2>
<pre>
<font face="Comic sans ms"color="white">
<p>
<h1><center><u> Viva La Vida </h1></center></u>
<center><img src="coldplay-viva-la-vida.jpg"></center></a>
1. <a href="Coldplay - Yes.mp3">Coldplay - Yes</a>
2. <a href="Coldplay - Viva la Vida.mp3">Coldplay - Viva la
Vida</a>
3. <a href="Coldplay - Violet_Hill.mp3">Coldplay -
Violet_Hill</a>
4. <a href="Coldplay - The Escapist.mp3">Coldplay - The
Escapist</a>
5. <a href="Coldplay - Strawberry Swing.mp3">Coldplay -
Strawberry Swing</a>
6. <a href="Coldplay - Reign of Love.mp3">Coldplay - Reign of
Love</a>
7. <a href="Coldplay - Lovers in Japan.mp3">Coldplay - Lovers in
Japan</a>
8. <a href="Coldplay - Lovers In Japan (Acoustic
Version).mp3">Coldplay - Lovers In Japan (Acoustic Version)</a>
9. <a href="Coldplay - Lost!.mp3">Coldplay - Lost!</a>
10. <a href="Coldplay - Lost!.mp3">Coldplay - Lost!</a>
11. <a href="Coldplay - Lost! (Acoustic Version).mp3">Coldplay -
Lost! (Acoustic Version)</a>
12. <a href="Coldplay - Life In Technicolor.mp3">Coldplay - Life
In Technicolor</a>
13. <a href="Coldplay - How You See The World (Bonus
Track).mp3">Coldplay - How You See The World (Bonus
Track)</a>
14. <a href="Coldplay - Death And All His Friends.mp3">Coldplay -
Death And All His Friends</a>
15. <a href="Coldplay - Chinese Sleep Chant.mp3">Coldplay -
Chinese Sleep Chant</a>
16. <a href="Coldplay - Cemeteries Of London.mp3">Coldplay -
Cemeteries Of London</a>
17. <a href="Coldplay - A Spell A Rebel Yell (B-
Side).mp3">Coldplay - A Spell A Rebel Yell (B-Side)</a>
18. <a href="Coldplay - 42.mp3">Coldplay - 42</a>
<center><a href="home.html"><img src="Homey.png" width=""
height=""></center></a>
</html>
Save dengan nama file viva.html.
Sebelumnya cek dulu filenya , bila tidak bisa di download hapus file
itu karena file nya menyebabkan broken link.
Banner
Content
4. Membuat Page komentar.
Page ini berfungsi untuk mengajukan komentar kepada kita tentang
web kita, kekurangannya maupun yang lain. Page ini menggunakan
script PHP
Scriptnya :
<HTML>
<HEAD>
<TITLE>Coldplay</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8">
<style type="text/css">
body,td,th {
color: white;
font-size: 18px;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
}
a {
font-family: "Comic Sans MS", cursive;
}
body {
body background:nyoba.jpg;
}
</style>
</HEAD>
<BODY>
<?
include "koneksi.php";
?>
<table width="1150" border="0" align="center">
<tr>
<td width="1330" height="321"><img
src="coldplaylogomyloxylotowhite.png" width="1465"
height="550" /></td>
</tr>
</table>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<table width="1090" border="0" align="center">
<hr>
<hr>
<tr>
<td WIDTH=333 align="center" bgcolor=""><a
href="HOME.html"><img src="home.png" width=""
height=""></a></td>
<td WIDTH=333 align="center" bgcolor=""><a
href="Download.html"><img src="download.png" width=""
height=""></a></td>
</tr>
</table>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<body background="nyoba.jpg">
<table width="401" border="1" align="center">
<hr>
<hr>
<tr>
<td width="391" height="155" border="0"><img
src="Coldplay_xy_speedofsound.gif" width="500"
height="500"></td>
<P>
<td width="391" height="155" border="0"><img
src="album_1127619197.jpg" width="500" height="500"></td>
</tr>
</table>
<form action="add.php" method="post">
<table width="50%" align="center" border="0">
<tr>
<h1><td colspan="2" align="center" style="padding-
bottom:20px"><blink>Masukkan Komentar
Seperlunya</blink></h1></td>
</tr>
<tr>
<td align="left">Nama</td>
<td><input name="nama" type="text" value=""
size="50"></td>
</tr>
<tr>
<td align="left" valign="top">E-mail</td>
<td><input type="text" name="subject" value=""
size="50"></td>
</tr>
<tr>
<td align="left" valign="top">Komentar</td>
<td><textarea name="isi" cols="50" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Kirim"> <input type="reset"
value="Reset"></td>
</tr>
</table>
</form>
<?
// cek terlebih dahulu data di database
$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="51%" align="center" border="0">
<tr align="center">
<td width="31%" align="left"
bgcolor="black">Nama</td>
<td width="16%" align="left" bgcolor="black">E-
mail</td>
<td width="35%" align="left"
bgcolor="black">Commentar</td>
<td width="18%" align="left"
bgcolor="black">Tanggal</td>
</tr>
<?
$sql = "SELECT * FROM table_bt" ;
$hasil =mysql_query($sql);
while($row=mysql_fetch_array($hasil)) {
echo "<tr>";
echo "<td>$row[Nama]</td> ";
echo "<td>$row[Subject]</td> ";
echo "<td>$row[Isi]</td> ";
echo "<td>$row[Tgl]</td> ";
echo "</tr>";
}
?>
</table>
<?
}else {
echo "silahkan komentar";
}
?>
</BODY>
</HTML>
Lalu save sebagai komentar.php
Seperti ini hasilnya.
BAB III
PENUTUP
III.1. Kesimpulan
III.2. Saran
III.1 Kesimpulan
Kesimpulan dari pembuatan aplikasi web ini adalah agar siswa dan
siswi Jurusan RPL dapat mengerti cara pembuatan web ini, beserta
langkah langkahnya.
Semoga Karya Tulis Ini dapat bermanfaat bagi semua orang. Amin
III.2 Saran
Saran dan kritikan sangat saya butuhkan sebagai penulis,
dikarenakan manusia tidak lepas dari kesalahan, Jika ada yang ingin
di sampaikan anda bisa menghubungi Jejaring Sosial Saya :
Facebook : Aldy Johan
Twitter : @aldyjoohan
G-Mail : mcrmyway12@gmail.com
Yahoo : selocin1204@yahoo.com
Blogger : aldyjoaac.blogspot.com
Demikian Dari Saya, Kurang lebihnya
mohon maaf.
Saya Akhiri . Assalamualaikum wr.wb

More Related Content

What's hot

Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8
Ichsan Smith
 
Tutorial web site aida dan jesika
Tutorial web site aida dan jesikaTutorial web site aida dan jesika
Tutorial web site aida dan jesikaRCH_98
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
mafailmi
 
Tugas laporan proyek aplikasi
Tugas laporan proyek aplikasiTugas laporan proyek aplikasi
Tugas laporan proyek aplikasiizzatyreno
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webRifky Ardian
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQL
eddie Ismantoe
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal berita
Doni Andriansyah
 
Laporan
LaporanLaporan
Laporan
nindilani
 
Laporan xampp dan joomla
Laporan xampp dan joomlaLaporan xampp dan joomla
Laporan xampp dan joomla
James Montolalu
 
Java Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSPJava Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSP
Doni Andriansyah
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 

What's hot (16)

Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8
 
Tutorial web site aida dan jesika
Tutorial web site aida dan jesikaTutorial web site aida dan jesika
Tutorial web site aida dan jesika
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
 
Tugas laporan proyek aplikasi
Tugas laporan proyek aplikasiTugas laporan proyek aplikasi
Tugas laporan proyek aplikasi
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQL
 
SIM Proyek 3
SIM Proyek 3SIM Proyek 3
SIM Proyek 3
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal berita
 
Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Laporan
LaporanLaporan
Laporan
 
Laporan xampp dan joomla
Laporan xampp dan joomlaLaporan xampp dan joomla
Laporan xampp dan joomla
 
Laporan
LaporanLaporan
Laporan
 
Java Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSPJava Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSP
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Tutorial
TutorialTutorial
Tutorial
 

Similar to Laporan akhir

Laporan Projek Akhir
Laporan Projek AkhirLaporan Projek Akhir
Laporan Projek Akhir
wanamateur_48
 
Tugaslaporanproyekaplikasi 130524061615-phpapp02
Tugaslaporanproyekaplikasi 130524061615-phpapp02Tugaslaporanproyekaplikasi 130524061615-phpapp02
Tugaslaporanproyekaplikasi 130524061615-phpapp02
Faizin Ahmad
 
Tugas laporan project aplikasi website
Tugas laporan project aplikasi websiteTugas laporan project aplikasi website
Tugas laporan project aplikasi websiteGilang Ramadhan
 
Udahnyatudella
UdahnyatudellaUdahnyatudella
Udahnyatudelladella1214
 
Udahnyatudella
UdahnyatudellaUdahnyatudella
Udahnyatudelladellandel
 
Tugas laporan proyek aplikasi wanda a & yopy y k
Tugas laporan proyek aplikasi wanda a & yopy y kTugas laporan proyek aplikasi wanda a & yopy y k
Tugas laporan proyek aplikasi wanda a & yopy y kwandaabdiadi
 
Tutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi InventarisTutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi Inventaris
Deka M Wildan
 
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaTutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaRCH_98
 
Module desain web
Module desain webModule desain web
Module desain web
Dedy Setiawan
 
Tutorial + l aporan aplikasi web
Tutorial + l aporan aplikasi webTutorial + l aporan aplikasi web
Tutorial + l aporan aplikasi webputtry707
 
training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"
Dewi Rahmawati
 
Proposal xmpp
Proposal xmppProposal xmpp
Proposal xmpp
SetyoPramono4
 
Tugas Akhir Streaming Server
Tugas Akhir Streaming ServerTugas Akhir Streaming Server
Tugas Akhir Streaming Server
rizki maulana
 
2014-43. Pemrograman Web
2014-43. Pemrograman Web2014-43. Pemrograman Web
2014-43. Pemrograman Web
Syiroy Uddin
 

Similar to Laporan akhir (20)

Laporan Projek Akhir
Laporan Projek AkhirLaporan Projek Akhir
Laporan Projek Akhir
 
Tugas laporan proyek aplikasi
Tugas laporan proyek aplikasiTugas laporan proyek aplikasi
Tugas laporan proyek aplikasi
 
Tugaslaporanproyekaplikasi 130524061615-phpapp02
Tugaslaporanproyekaplikasi 130524061615-phpapp02Tugaslaporanproyekaplikasi 130524061615-phpapp02
Tugaslaporanproyekaplikasi 130524061615-phpapp02
 
Tugas laporan project aplikasi website
Tugas laporan project aplikasi websiteTugas laporan project aplikasi website
Tugas laporan project aplikasi website
 
Udahnyatudella
UdahnyatudellaUdahnyatudella
Udahnyatudella
 
Udahnyatudella
UdahnyatudellaUdahnyatudella
Udahnyatudella
 
Cover
CoverCover
Cover
 
Cover
CoverCover
Cover
 
Tugas laporan proyek aplikasi wanda a & yopy y k
Tugas laporan proyek aplikasi wanda a & yopy y kTugas laporan proyek aplikasi wanda a & yopy y k
Tugas laporan proyek aplikasi wanda a & yopy y k
 
Adit
AditAdit
Adit
 
Tutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi InventarisTutorial php membuat Aplikasi Inventaris
Tutorial php membuat Aplikasi Inventaris
 
Judul bab
Judul babJudul bab
Judul bab
 
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaTutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
 
Module desain web
Module desain webModule desain web
Module desain web
 
Tutorial + l aporan aplikasi web
Tutorial + l aporan aplikasi webTutorial + l aporan aplikasi web
Tutorial + l aporan aplikasi web
 
training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"
 
Proposal xmpp
Proposal xmppProposal xmpp
Proposal xmpp
 
Tugas Akhir Streaming Server
Tugas Akhir Streaming ServerTugas Akhir Streaming Server
Tugas Akhir Streaming Server
 
2014-43. Pemrograman Web
2014-43. Pemrograman Web2014-43. Pemrograman Web
2014-43. Pemrograman Web
 
Cover
CoverCover
Cover
 

Laporan akhir

  • 1. TUGAS LAPORAN PROYEK APLIKASI ”APLIKASI WEB:Coldplay Fans” Oleh ALDY JOHAN NISN:9975054374 Kelas X RPL 1 SMK NEGERI 1 DEPOK 2013 “Toko Online Jersey ”
  • 2. Oleh : Aldy Johan Tugas Laporan Proyek Aplikasi Telah diuji sebagai syarat kelulusan mata pelajaran produktif RPL Semester Genap Tingkat X Tahun Ajaran 2012/ 2013 di SMK NEGERI 1 DEPOK Depok, ........................ Penguji, ________________
  • 3. KATA PENGANTAR Pertama-tama saya panjatkan puji dan syukur saya kepada Allah SWT, atas rahmat dan karunia Nya saya dapat menyelesaikan laporan Aplikasi ini. Shalawat dan salam selalu tercurah kepada Nabi besar kita yaitu Nabi Muhammad SAW beserta keluarga , sahabat dan kita selaku umatnya hingga akhir jaman. Selesainya laporan ini tak lepas dari orang yang selalu berada di samping saya, saya ingin mengucapkan terima kasih kepada : 1. Ibu Inne Ria Abidin selaku Pembina I saya dalam membuat aplikasi ini yang telah memberikan ilmu serta waktunya kepada saya , sehingga selesai lah pembuatan laporan ini. 2. Bapak Nanang Suwandi selaku Pembina II yang telah memberikan support kepada kami dalam menyelesaikan tugas akhir ini. 3. Kepada keluarga dan teman teman serta kakak kelas yang telah memberikan semangat dan meluangkan waktunya dalam memberikan pengajaran kepada kami. 4. Dan kepada semua pihak yang telah membantu yang saya tidak bisa sebutkan satu per satu tanpa mengurangi rasa hormat saya. Sekian sambutan dari saya, kurang lebihnya mohon maaf. Assalamaualaikum wr.wb Depok, 23 Mei 2013 Saya, Aldy Johan
  • 4. DAFTAR ISI Halaman LEMBAR PENGESAHAN..................................................................... ii KATA PENGANTAR..............................................................................v DAFTAR ISI............................................................................................vi DAFTAR LAMPIRAN............................................................................ix BAB I. PENDAHULUAN........................................................................1 I.1. Latar Belakang .................................................................... 2 I.2. Maksud dan Tujuan ............................................................. 3 BAB II. Instalasi Software pengembang ................................... 4 II.1. Instalasi XAMPP................................................................ 5 II.2. Perancangan dan FLOWCHART....................................... 9 II. . Membuat aplikasi berserta databasenya ................................ 11 II.5. Membuat page websitenya beserta script ........................ 20 BAB III. Penutup ....................................................................................33 III.1. Kesimpulan ..................................................................... 33 III.2. Saran ............................................................................... 33 Daftar Pustaka.........................................................................................34 Lampiran.................................................................................................36
  • 5. BAB I PENDAHULUAN I.1. Latar Belakang Berisi penjelasan latar belakang dibuatnya aplikasi ini. I.2. Maksud dan Tujuan Berisi penjelasan maksud dan tujuannya pembuatan aplikasi.
  • 6. I.I LATAR BELAKANG Dibuatnya aplikasi ini dikarenakan tuntutan , karena pembuatan aplikasi ini adalah salah satu syarat yang dibutuhkan untuk naik ke jenjang yang lebih tinggi. Membuat website itu juga tidak lah mudah di perlukan ketelitian bagi kita agar mendapatkan hasil yang maksimal. Untuk membangun sebuah website di perlukan suatu langkah- langkah persiapan secara umum di bagi menjadi lima tahap yaitu merumuskan tujuan website, menentukan isi website, menentukan target pengunjung, menentukan struktur website, jiak kelima langkah awal itu bisa kita pelajari semua pasti kita akan bisa membuat suatu website yang bagus dan banyak di kunjungi oleh banyak orang.
  • 7. I.2 MAKSUD DAN TUJUAN Maksud membuat website agar : - Efisiensi anggaran promosi dan informasi - Efektifitas dalam membangun strategi pemasaran serta mengenalkan suatu komunitas - Memasyarakatkan pengguna teknologi informasi secara kreatif dan konsutif Tujuan membuat website agar : - Menyebarkan dan memperluas jaringan organisasi sebagai suatu peluang mewujudkan semangat kerjasama dan meningkatkan jaringan dan informasi - Membangun jaringan online dan informasi dan promosi suatu kelompok atau komunitas . - Pengunjung website dapat mengetahui konten yang ada di web kita.
  • 8.
  • 9. BAB II INSTALASI SOFTWARE PENGEMBANG Perangkat Pengembangan Aplikasi Berisi penjelasan software yang digunakan dalam pembuatan aplikasi. II.1. instalasi XAMPP Berisi penjelasan untuk menginstalxampp, termasuk bahasa tambahan seperti Javascript maupun library lainnya. II.2. Flowchart Berisi penjelasan perancangan jalannya aplikasi website. II.3. Membuat aplikasi website berserta databasenya Berisi tentang langkah-langkah membuat website dan databasenya. II.4. Membuat page website besreta scriptnya Berisi tentang langkah-langkah membuat page website II. 1 INSTALASI XAMPP
  • 10. XAMPP XAMPP kepanjangan dari X yang berarti cross platform, A yang berarti Apache, M yang berarti MySQL, P yang berarti PHP, dan P yang satu lagi yaitu Perl. XAMPP adalah sebuah installer web server yang berisi Apache dan MySQL dan mendukung program PHP dan Perl . Cara Menginstall XAMPP 1. Download XAMPP untuk Windows di http://www.apachefriends.org/en/xampp- windows.html, pilih basic package untuk instalasi standar 2. Setelah di download, jalankan installer XAMPP 3. Pilih bahasa, setalah itu klik OK 4. Pilih folder tujuan install XAMPP, lalu NEXT 5. Pada window XAMPP options, kamu akan diminta memilih beberapa options seperti XAMPP desktop, XAMPP start menu, dan XAMPP section. Abaikan saja pilihan tersebut, lalu klik INSTALL 6. Setelah instalasi selesai, jalankan XAMPP 7. Lalu klik Start Apache dan Start MySQL
  • 11. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser sesuai selera anda II.2. Flowchart Flowchart Flowchart merupakan gambar yang memperlihatkan urutan dan hubungan proses berserta intruksinya. Gambaran ini dinyatakan simbol dengan demikian setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antara proses digambarkan dengan garis penghubung. Flowchart merupakan langkah awal membuat program. Dengan adanya Flowchart urutan proses kegiatan lebih jelas. Jika ada penambahan proses maka dapat dilakukan lebih mudah. Setelah Flowchart selesai disusun, selanjutnya pemrograman (programmer) menerjemahkannya program dengan bahasa pemrograman. Simbol Simbol Flowchart Flowchart disusun dengan simbol – simbol ini dipakai sebagai alat bantu menggambarkan proses di dalam program.
  • 12. Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifat mutlak karena flowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu masalah dengan computer sehingga flowchart yang dihasilkan dapat beragam antara satu pemrogram dengan pemrogram lainnya. Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian utama, yaitu: 1. Input ialah bahan mentah 2. Proses pengolahan 3. Output ialah bahan jadi Untuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk pemecahan suatu masalah, yaitu: 9 1. START : Berisi instruksi untuk persiapan peralatan yang diperlukan sebelum menangani pemecahan masalah. 2. READ : Berisi instruksi untuk membaca data dari suatu peralatan input. 3. PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengan data yang dibaca. 4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan 5. END : Mengakhiri kegiatan pengolahan.
  • 13.
  • 14. II.4. Membuat aplikasi website berserta databasenya Membuat Database Login Admin 1. Pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamu jalankan 2. Buka browser anda, seperti gambar yang ada di bawah ini: 3.Ketikkan " localhost/phpmyadmin " (tanpa tanda kutip) pada browser anda yang diberi tanda lingakaran merah seperti gambar di bawah ini. Lalu tekan enter
  • 15. 4.Klik basisdata dan masukkan nama database yang kamu inginkan. 5.Saya akan membuat database buku_tamu 6.Maka akan muncul pada daftae database di samping.
  • 16. Setelah database terbuat, selanjutnya adalah membuat table di dalam database tersebut. Lalu klik database "komentar" tadi, lalu klik menu SQL kembali. Setelah masuk menu SQL, silahkan tulis script: create table table_bt( No int (4) not null auto increment, Nama varchar(100) not null, Subject varchar(200) not null, Isi text Primary key (No) ) Lalu klik Go
  • 17. Seperti inilah hasilnya Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page .php index dan menyambungkannya ke database tersebut. Sehingga, sebelum memasuki website akan ada tampilan page pemesanan yang dapat diakses oleh admin pembuat website itu sendiri sesuai record yang telah diisi pada database tersebut. Kita memerlukan page pemesanan, koneksi database dan koneksi database dengan page pemesanan. 7. Sebelum itu, pastikan kamu telah membuat folder kosong untuk website kamu di dalam folder installan XAMPP yang berletak di local disk c/xampp/htdocs/ dan buat folder baru disitu dengan nama yang kamu kehendaki. Mulai membuat koneksi database, masuk ke dalam folder itu dan buat notepad baru dengan cara klik kanan – lalu pilih New Text Document, ubah namanya menjadi ”koneksi.php” (tanpa tanda kutip), lalu buka file tersebut ke dalam notepad dengan cara klik kanan – open with notepad.
  • 18. Setelah file terbuka, ketikkan script tersebut <? // nama_host,user_db,pass_db mysql_connect ("localhost", "root", ""); mysql_select_db("buku_tamu"); ?> Setelah script tertulis, save script tersebut dengan cara CTRL + S. 9, Koneksi database telah terbuat, selanjutnya kita membuat koneksi database dengan page index .php. Buat notepad baru dengan cara yang sama pada step sebelumnya, lalu ubah namanya menjadi ”add.php” (tanpa tanda kutip), buka file tersebut dengan cara yang sama pada step sebelumnya. Setelah file terbuka, ketikkan script tersebut <?
  • 19. include "koneksi.php"; $nama = $_POST['nama']; $subject = $_POST['subject']; $isi = $_POST['isi']; //cek if (!empty($nama) || !empty($subject) || !empty($isi)) { // true; insert db $sql = "INSERT INTO table_bt (nama,subject,isi) VALUES ('".$nama."','".$subject."','".$isi."')"; $hasil=mysql_query($sql); if ($hasil==1) { echo "<center><h1>Berhasil Mengirim Komentar</center></h1><br>"; echo "<center><h1><a href='komentar.php'>Back</center></h1></a>"; } else { echo "Gagal Mengirim Komentar<br>"; echo "<a href='komentar.php'>Back</a>"; } }else { // apabila form masih ada yg kosong do.. $msg = "Tolong Isi Form yang Kosong"; echo $msg; echo "<br><a href='komentar.php'>Back</a>"; }
  • 20. ?> Lalu save. 10.Dengan ini, kita tinggal membuat page komentar.php Ketik script seperti ini. <HTML> <HEAD> <TITLE>Coldplay</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body,td,th { color: white; font-size: 18px; font-weight: bold; font-family: "Comic Sans MS", cursive; } a { font-family: "Comic Sans MS", cursive; } body { body background:nyoba.jpg; } </style> </HEAD> <BODY>
  • 21. <? include "koneksi.php"; ?> <table width="1150" border="0" align="center"> <tr> <td width="1330" height="321"><img src="coldplaylogomyloxylotowhite.png" width="1465" height="550" /></td> </tr> </table> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <table width="1090" border="0" align="center"> <hr> <hr> <tr> <td WIDTH=333 align="center" bgcolor=""><a href="HOME.html"><img src="home.png" width="" height=""></a></td> <td WIDTH=333 align="center" bgcolor=""><a href="Download.html"><img src="download.png" width="" height=""></a></td> </tr> </table> <p> <p> <p> <p>
  • 22. <p> <p> <p> <p> <p> <body background="nyoba.jpg"> <table width="401" border="1" align="center"> <hr> <hr> <tr> <td width="391" height="155" border="0"><img src="Coldplay_xy_speedofsound.gif" width="500" height="500"></td> <P> <td width="391" height="155" border="0"><img src="album_1127619197.jpg" width="500" height="500"></td> </tr> </table> <form action="add.php" method="post"> <table width="50%" align="center" border="0"> <tr> <h1><td colspan="2" align="center" style="padding- bottom:20px"><blink>Masukkan Komentar Seperlunya</blink></h1></td> </tr> <tr> <td align="left">Nama</td> <td><input name="nama" type="text" value="" size="50"></td> </tr> <tr> <td align="left" valign="top">E-mail</td> <td><input type="text" name="subject" value="" size="50"></td> </tr> <tr> <td align="left" valign="top">Komentar</td> <td><textarea name="isi" cols="50" rows="5"></textarea></td> </tr> <tr> <td></td>
  • 23. <td><input type="submit" value="Kirim"> <input type="reset" value="Reset"></td> </tr> </table> </form> <? // cek terlebih dahulu data di database $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="51%" align="center" border="0"> <tr align="center"> <td width="31%" align="left" bgcolor="black">Nama</td> <td width="16%" align="left" bgcolor="black">E- mail</td> <td width="35%" align="left" bgcolor="black">Commentar</td> <td width="18%" align="left" bgcolor="black">Tanggal</td> </tr> <? $sql = "SELECT * FROM table_bt" ; $hasil =mysql_query($sql); while($row=mysql_fetch_array($hasil)) { echo "<tr>"; echo "<td>$row[Nama]</td> "; echo "<td>$row[Subject]</td> "; echo "<td>$row[Isi]</td> "; echo "<td>$row[Tgl]</td> "; echo "</tr>";
  • 24. } ?> </table> <? }else { echo "silahkan komentar"; } ?> </BODY> </HTML> Lalu klik save sebagai komentar.php. II.4. Membuat page website besreta scriptnya 1. Membuat page pertama yaitu page home ,pertama-tama kita masuk ke windows pilih ascesories dan klik notepad setelah notepad terbuka lalu kita ketik script seperti di bawah ini : <html> <head> <title>Coldplay Fans</title> </head> <body background="nyoba.png" > <p> <p> <center><img src="Merde (2).png" width="1465" height="520"></center> <body bgcolor="red"> <table border ="0" cellpadding ="0" cellspacing="0" bordercolor="#ffffff" width="100%" height="115"> <tr> <td width="1465" height="500" bordercolor="black"
  • 25. bgcolor="black"><a href="home.html"><img src="coldplaylogomyloxylotored.png" width="1465" height="520"></a>&nbsp;</td> </tr> <br> <br> <br> <hr> <hr> <center> <h2> <font face="Comic sans MS" color="maroon"> <a href="home.html"><img src="home.png" width="" height=""></a> <a href="download.html"><img src="Download.png" width="" height=""></a> </font> </h2> </center> <hr> <hr> <h1><marquee><font face="Comic sans ms"color="white"> The Best Of Coldplay </font></marquee></h1> <h2> <pre> <td width="100" height="230" bordercolor="white" bgcolor="white">&nbsp; <h2> <pre> <font face="Comic sans ms"color="red maroon"> <center><h1><u>Sambutan</h1></center></u> <hr> Posting at 3:25 a.m 30-04-2013 <h2>For Coldplay Fans</h2>
  • 26. Sehubungan dengan pembuatan web ini saya ingin menyatakn bahwa web ini merupakan tempat untuk mendownload beberapa file tentang Coldplay dari lagu, serta foto fotonya. Dikarenakan fans Coldplay yang lumayan banyak di dunia, saya berinisiatif membuat web ini. Baiklah, saya akan melanjutkan untuk memberikan kabar terbaru dari coldplay. Situs Resmi Coldplay Visit: <a href="http://myloxyloto.com"> Mylo Xyloto </a> <hr> Posting at 10.31 a.m 29-04-2013 <h1><center><a href="download.html">Download</h1></a></center> <center><img src="Coldplay_Poster_Wall_by_chocolatepuppy.jpg" height="670" width="1024"></center> <center>Ingin Mendownload Lagu Coldplay? Klik <a href="download.html"> DI SINI </a></center> <center><img src="wp14_02.jpg"></center> <hr> <center><h1>Anda Punya Pendapat? Klik di <a href="komentar.php"> Sini </a></center></h1> </h2> </font> </pre> </td> <br> <br> <h4> <h2> <pre> <font face="Comic sans ms"color="white"> </h2> </font>
  • 27. </pre> <p> <p> <p> <p> <p> <p> <center> <p><font size="1">&nbsp;</font> <center><table border="1" cellpadding="0" cellspacing="0" bordercolor="white" width="100.5%" height="152"> <tr> <td width="100%" height="19" bgcolor="red maroon" bordercolor="#C0C0C0">&nbsp; <font face="comic san ms" color="Red"><center><h1><img src=Boner.png height="300" width="1330"></font></center></h1> </td> </tr> </center> </pre> </h2> </body> </html> Jika sudah mengetik script seperti ini lalu anda harus mengesave filenya dengan cara save as lalu beri nama home.html dan formatnya all files. Dan hasilnya seperti ini :
  • 28.
  • 29. 2. Membuat Page Download . Buat script download.html dengan mengetik script seperti ini : <html> <head> <title>Coldplay Fans</title> </head> <body background="nyoba.png" > <p> <p> <center><img src="Merde (2).png" width="1465" height="520"></center> <body bgcolor="red"> <table border ="2" cellpadding ="0" cellspacing="0" bordercolor="#ffffff" width="100%" height="115"> <tr> <td width="1465" height="500" bordercolor="#c0C0C0" bgcolor="black"><a href="home.html"><img src="coldplaylogomyloxylotored.png" width="1465" height="520"></a>&nbsp;</td> </tr>
  • 30. <br> <br> <br> <hr> <hr> <center> <h2> <font face="Comic sans MS" color="maroon"> <a href="home.html"><img src="home.png" width="" height=""></a> <a href="download.html"><img src="Download.png" width="" height=""></a> </font> </h2> </center> <hr> <hr> <p> <h1><marquee><font face="Comic sans ms"color="white"> The Best Of Coldplay </font></marquee></h1> <p> <h2> <pre> <td width="100" height="230" bordercolor="#c0c0c0" bgcolor="red maroon">&nbsp; <h2> <pre> <font face="Comic sans ms"color="white"> <h1><center><u> DOWNLOAD FILE </H1><CENTER></u> <h4> Kamu bisa mendownload file nya di daftar afile <a href="data.html"><blink> DI SINI </a></h4></blink> <center><img src="coldplay-4fc0c68eaa443.jpg" width="900" height="500"></center>
  • 31. <center> This Web Created By Aldy Johan </center> <center> <p><font size="1">&nbsp;</font> <center><table border="1" cellpadding="0" cellspacing="0" bordercolor="#BDCED9" width="100.5%" height="150"> <tr> <td width="90%" height="19" bgcolor="white" ordercolor="#C0C0C0">&nbsp; <font face="comic san ms" color="Red"><center><h1><img src="Boner.png" height="300" width="1330"></font></center></h1> </td> </tr> </center> </html> Lalu klik save dengan nama download.html 3.Membuat page file download Ketik script seperti ini, tapi sebelumnya pastikan file yang akan di download ada di dalam folder web yang kamu buat. Script nya : <html> <head> <title>Viva La Vida</title> </head> <body background="nyoba.png" > <p> <p> <body bgcolor="red"> <table border ="10" cellpadding ="0" cellspacing="0" bordercolor="white" width="100%" height="115"> <tr>
  • 32. <td width="" height="" bordercolor="#c0C0C0" &nbsp;</td> </tr> <p> <center><img src="Bkgd1.png" width="1330" height="500"></center></a> <p> <p> <h2> <pre> <td width="50" height="125" bordercolor="#c0c0c0" bgcolor="red blood">&nbsp; <h2> <pre> <font face="Comic sans ms"color="white"> <p> <h1><center><u> Viva La Vida </h1></center></u> <center><img src="coldplay-viva-la-vida.jpg"></center></a> 1. <a href="Coldplay - Yes.mp3">Coldplay - Yes</a> 2. <a href="Coldplay - Viva la Vida.mp3">Coldplay - Viva la Vida</a> 3. <a href="Coldplay - Violet_Hill.mp3">Coldplay - Violet_Hill</a> 4. <a href="Coldplay - The Escapist.mp3">Coldplay - The Escapist</a> 5. <a href="Coldplay - Strawberry Swing.mp3">Coldplay - Strawberry Swing</a> 6. <a href="Coldplay - Reign of Love.mp3">Coldplay - Reign of Love</a>
  • 33. 7. <a href="Coldplay - Lovers in Japan.mp3">Coldplay - Lovers in Japan</a> 8. <a href="Coldplay - Lovers In Japan (Acoustic Version).mp3">Coldplay - Lovers In Japan (Acoustic Version)</a> 9. <a href="Coldplay - Lost!.mp3">Coldplay - Lost!</a> 10. <a href="Coldplay - Lost!.mp3">Coldplay - Lost!</a> 11. <a href="Coldplay - Lost! (Acoustic Version).mp3">Coldplay - Lost! (Acoustic Version)</a> 12. <a href="Coldplay - Life In Technicolor.mp3">Coldplay - Life In Technicolor</a> 13. <a href="Coldplay - How You See The World (Bonus Track).mp3">Coldplay - How You See The World (Bonus Track)</a> 14. <a href="Coldplay - Death And All His Friends.mp3">Coldplay - Death And All His Friends</a> 15. <a href="Coldplay - Chinese Sleep Chant.mp3">Coldplay - Chinese Sleep Chant</a> 16. <a href="Coldplay - Cemeteries Of London.mp3">Coldplay - Cemeteries Of London</a> 17. <a href="Coldplay - A Spell A Rebel Yell (B- Side).mp3">Coldplay - A Spell A Rebel Yell (B-Side)</a> 18. <a href="Coldplay - 42.mp3">Coldplay - 42</a> <center><a href="home.html"><img src="Homey.png" width="" height=""></center></a> </html> Save dengan nama file viva.html.
  • 34. Sebelumnya cek dulu filenya , bila tidak bisa di download hapus file itu karena file nya menyebabkan broken link. Banner Content
  • 35. 4. Membuat Page komentar. Page ini berfungsi untuk mengajukan komentar kepada kita tentang web kita, kekurangannya maupun yang lain. Page ini menggunakan script PHP Scriptnya : <HTML> <HEAD> <TITLE>Coldplay</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf- 8"> <style type="text/css"> body,td,th { color: white; font-size: 18px; font-weight: bold; font-family: "Comic Sans MS", cursive; } a { font-family: "Comic Sans MS", cursive; } body { body background:nyoba.jpg; } </style>
  • 36. </HEAD> <BODY> <? include "koneksi.php"; ?> <table width="1150" border="0" align="center"> <tr> <td width="1330" height="321"><img src="coldplaylogomyloxylotowhite.png" width="1465" height="550" /></td> </tr> </table> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <table width="1090" border="0" align="center"> <hr> <hr> <tr> <td WIDTH=333 align="center" bgcolor=""><a href="HOME.html"><img src="home.png" width="" height=""></a></td> <td WIDTH=333 align="center" bgcolor=""><a href="Download.html"><img src="download.png" width="" height=""></a></td> </tr> </table> <p> <p>
  • 37. <p> <p> <p> <p> <p> <p> <p> <body background="nyoba.jpg"> <table width="401" border="1" align="center"> <hr> <hr> <tr> <td width="391" height="155" border="0"><img src="Coldplay_xy_speedofsound.gif" width="500" height="500"></td> <P> <td width="391" height="155" border="0"><img src="album_1127619197.jpg" width="500" height="500"></td> </tr> </table> <form action="add.php" method="post"> <table width="50%" align="center" border="0"> <tr> <h1><td colspan="2" align="center" style="padding- bottom:20px"><blink>Masukkan Komentar Seperlunya</blink></h1></td> </tr> <tr> <td align="left">Nama</td> <td><input name="nama" type="text" value="" size="50"></td> </tr> <tr> <td align="left" valign="top">E-mail</td> <td><input type="text" name="subject" value="" size="50"></td> </tr> <tr> <td align="left" valign="top">Komentar</td> <td><textarea name="isi" cols="50" rows="5"></textarea></td>
  • 38. </tr> <tr> <td></td> <td><input type="submit" value="Kirim"> <input type="reset" value="Reset"></td> </tr> </table> </form> <? // cek terlebih dahulu data di database $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="51%" align="center" border="0"> <tr align="center"> <td width="31%" align="left" bgcolor="black">Nama</td> <td width="16%" align="left" bgcolor="black">E- mail</td> <td width="35%" align="left" bgcolor="black">Commentar</td> <td width="18%" align="left" bgcolor="black">Tanggal</td> </tr> <? $sql = "SELECT * FROM table_bt" ; $hasil =mysql_query($sql); while($row=mysql_fetch_array($hasil)) { echo "<tr>"; echo "<td>$row[Nama]</td> "; echo "<td>$row[Subject]</td> ";
  • 39. echo "<td>$row[Isi]</td> "; echo "<td>$row[Tgl]</td> "; echo "</tr>"; } ?> </table> <? }else { echo "silahkan komentar"; } ?> </BODY> </HTML> Lalu save sebagai komentar.php Seperti ini hasilnya.
  • 40. BAB III PENUTUP III.1. Kesimpulan III.2. Saran III.1 Kesimpulan Kesimpulan dari pembuatan aplikasi web ini adalah agar siswa dan siswi Jurusan RPL dapat mengerti cara pembuatan web ini, beserta langkah langkahnya. Semoga Karya Tulis Ini dapat bermanfaat bagi semua orang. Amin III.2 Saran Saran dan kritikan sangat saya butuhkan sebagai penulis, dikarenakan manusia tidak lepas dari kesalahan, Jika ada yang ingin di sampaikan anda bisa menghubungi Jejaring Sosial Saya : Facebook : Aldy Johan Twitter : @aldyjoohan G-Mail : mcrmyway12@gmail.com Yahoo : selocin1204@yahoo.com Blogger : aldyjoaac.blogspot.com Demikian Dari Saya, Kurang lebihnya mohon maaf. Saya Akhiri . Assalamualaikum wr.wb