1. Dokumen tersebut merupakan laporan proyek aplikasi website klub renang yang dikerjakan oleh siswa SMK. 2. Terdapat instalasi software pengembang XAMPP, rancangan aplikasi berupa flowchart, dan pembuatan aplikasi website beserta databasenya. 3. Aplikasi website tersebut terdiri dari 6 menu utama.

1. TUGAS LAPORAN PROJECT APLIKASI
”Swimming club”
Oleh
Della Amelia
NISN : 9965230928
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

2. KATA PENGANTAR
Puji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia
Nya penulis dapat menyelesaikan tugas Laporan Project Akhir demi memenuhi
standar kenaikan kelas. Shalawat dan salam tercurah kepada Rasulullah Muhammad
SAW beserta keluarganya.
Selama melaksanakan tugas akhir ini, penulis mendapat bantuan dan dukungan dari
berbagai pihak. Untuk itu, penulis ingin mengucapkan terima kasih kepada
bapak/ibu guru yang telah memberikan kesempatan kepada saya untuk mengerjakan
dan menyelesaikan tugas ini. Mohon bimbingan untuk lebih baik.
Penulis menyadari bahwa laporan ini bukanlah tanpa kelemahan, untuk itu kritik dan
saran yang bersifat membangun sangat diharapkan.
Akhir kata, semoga laporan ini dapat dijadikan ilmu yang bermanfaat bagi semua
umumnya dan bagi saya khususnya.
Depok, Mei 2013
Penulis

3. DAFTAR ISI
Halaman
LEMBAR PENGESAHAN....................................................................................................ii
KATA PENGANTAR............................................................................................................v
BAB I. INSTALASI SOFTWARE PENGEMBANG............................................................1
1.1. XAMPP ......................................................................................................1
BAB II. RANCANGAN APLIKASI...................................................................................13
2.1. Flowchart................................................................................................18
BAB III. PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE......................25
3.1 Membuat Page Menu 1 (beranda)
3.2. Membuat Page Menu 2 (profil)
3.3 Membuat Page Menu 3 (buku tamu)
3.4 Membuat Page Menu 4(kontak kami)
3.5 Membuat Page Menu 5 (daftar)
3.6 Membuat page menu 6 (galery)

4. BAB I
INSTALASI SOFTWARE PENGEMBANG
1.1. 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

5. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser
sesuai selera anda
BAB II
RANCANGAN APLIKASI
2.1. 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.

6. 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:
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.

7. Flowchart page menu 1

8. BAB III
PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE
3. 1. 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

9. 4. Setelah menekan enter, anda akan masuk pada phpMyAdmin. Tampilannya
seperti yang ada di bawah ini.
5. Setelah itu, ganti bahasa Deutsch - German menjadi English yang sudah diberi
tanda lingkaran merah, lalu klik menu SQL yang juga sudah diberi tanda lingkaran
merah.
6. Setelah masuk menu SQL, silahkan tulis script (tanpa tanda kutip):
“ create database agra_della“
Lalu klik Go.

10. 7. Setelah klik Go, maka akan muncul proses loading. Setelah proses loading selesai,
maka akan muncul database bernamakan "agra della" disebelah kiri yang diberi
tanda lingkaran merah seperti gambar di bawah ini.
8. Setelah database terbuat, selanjutnya adalah membuat table di dalam database
tersebut. Lalu klik database "agra_della" tadi, lalu klik menu SQL kembali.
9. Setelah masuk menu SQL, silahkan tulis script:
CREATE TABLE buktam (
Id INT (4) NOT NULL AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR (30) NOT NULL,
email VARCHAR (50) NOT NULL,

11. komentar TEXT NOT NULL
) ENGINE = MYISAM
Lalu klik Go
11. 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.
12. 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.
13. Setelah file terbuka, ketikkan script tersebut
<?php
$hostname ='localhost';
$username ='root';
$password ='';
$database ='agra_della';
$connect = mysql_connect($hostname,$username,$password) ;
mysql_select_db($database,$connect);
?>

12. Setelah script tertulis, save script tersebut dengan cara CTRL + S.
3. 2. Membuat Halaman Index
1. Desain layout Index
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
pilihan kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi index.html. Ketikkan script
seperti berikut.
<html>
<body>
<p align="center">Ocean Swimming Club</p>
<p> Daftarkan Diri Anda Segera Di Ocean Swimming Club</p>
<p> Biaya Pendaftaran : Rp 50.000</p>
<p> Iuran Bulanan : </p>
<p> Dasar : Rp 150.000</p>
<p>Semi Progresif : Rp 235.00</p>
<p>Progresif : Rp 315.000</p>
<p align="center">Impossible Is Nothing</p>
</body>
</html>
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.

13. 3. 3. Membuat Halaman Profile
1. Desain layout
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi siapa_irwan.html. Ketikkan
script seperti berikut.
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
<html>
<body>
<div align="center"><h3>Ocean Swimming Club</h3> </div>
<br> </br>

14. <p align="center" > Tujuan </p>
<p align="left"> 1. Menciptakan Generasi Muda Yang Berprestasi </p>
<p align="left"> 2. Menciptakan Atlet yang Tangguh </p>
<p align="center" > Tata Tertib Anggota Ocean SC</p>
<p align="left"> 1. Mengikuti Setiap Jadwal Latihan </p>
<p align="left"> 2. Berkelakuan baik dan sopan kepada pelatih,orang tua,pengurus
dan sesama anggota </p>
<p align="left"> 3. Tidak menggunakan Dopping atau Narkoba jenis apapun</p>
<p align="left"> 4. Menjaga ketertiban dan Kebersihan </p>
<p align="left"> 5. Latihan diliburkan pada hari libur Nasional </p>
<p align="left"> 6. Pengantar Atlet bebas memasuki area kolam renang tetapi tidak
berenang</p>
</body>
</html>

15. 3. 4. Membuat Halaman Buku Tamu
1. Desain layout
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi kisah_irwan.html. Ketikkan
script seperti berikut.
<html>
<head>
<title>Untitled Document</title>
</head>
<form id="form1" name="form1" method="post" action="">
<p align="center" ></p>
<p align="center" >Buku Tamu</p>
<table width="400" border="1" align="center" bordercolor="#CCCCCC"
>
<tr>
<td ><div align="center">Nama</div></td>
<td ><input name="nama" type="text" id="nama" /></td>
</tr>
<tr>
<td><div align="center">Email</div></td>
<td><label>
<input name="email" type="text" id="email" />
</label></td>

16. </tr>
<tr>
<td><div align="center">Komentar</div></td>
<td><label>
<textarea name="komentar" id="komentar"></textarea>
</label></td>
</tr>
<tr>
<td colspan="2" ><div align="left">
<input name="simpan" type="submit" id="simpan"
value="Simpan" />
<a href="page/buku_tamu/hasil.php"></a></div></td>
</tr>
</table>
</form>
<?php
include ("config.php");
$nama = $_POST['nama'];
$email = $_POST['email'];
$komentar = $_POST['komentar'];
if ($simpan)
{
$sbk = mysql_query("INSERT INTO buktam VALUES ('
','$nama','$email','$komentar')");
if ($sbk)
{
echo "<script> alert ('Terima Kasih Telah Mengisi Buku Tamu');
location='index.php?pg=0'</script>";
}
else
{
echo "<script> alert ('Pengisian Gagal');

17. location='index.php?pg=0'</script>";
}
}
?>
</body>
</html>
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.

18. 3. 5. Membuat halaman 1. Desain layout Page Menu 4 (Temui Irwan).
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi cari_irwan.html. Ketikkan
script seperti berikut.
<div align="center">
<p>Hubungi Kami </p>
<p>Nomor HP : 08123456789 atau 0878910111213</p>
<p>Email : oceansc@yahoo.com</p>
</div>

19. 4. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti
ini
3.5 membuat page menu 5
1.buatlah notepad baru ,lalu ubah namanya menjadi cari_agra_della.html
ketikan script seperti berikut .

20. <html>
<body>
<div align="center">
Form Pendaftaran
</div>
<p> </p>
<form name="form1" method="post" action="page/proses_daftar.php">
<table border="1" align="center">
<tr>
<td>Nama Lengkap</td>
<td><input type="text" name="nama" id="nama" /></td>
</tr>
<tr>
<td>Tempat,Tanggal Lahir</td>
<td><input type="text" name="ttl" id="ttl" /></td>
</tr>
<tr>
<td>Alamat Rumah</td>
<td><textarea name="alamat" id="alamat" ></textarea></td>
</tr>
<tr>
<td>Nomor Telepon</td>
<td><input type="text" name="tlp" id="tlp" /></td>
</tr>
<tr>
<td>Sekolah</td>
<td><input type="text" name="sekolah" id="sekolah" /></td>
</tr>
<tr>
<td>Nama Orang Tua</td>
<td><input type="text" name="org" id="org" /></td>

21. </tr>
<tr>
<td>Pekerjaan</td>
<td><input type="text" name="pkr" id="pkr" /></td>
</tr>
<tr>
<td>Riwayat Kesehatan</td>
<td><input type="text" name="rk" id="rk" /></td>
</tr>
<tr>
<td>Level</td>
<td>
<select name="level" id="level">
<option value="Dasar">Dasar</option>
<option value="Semi Progresif">Semi
Progresif</option>
<option value="Progresif">Progresif</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="simpan" id="simpan"
value="Simpan Data">
<input type="reset" name="reset" id="reset" value="Hapus">
</td>
</tr>
</table>
<p> Catatan : </p>

22. <p > 1. Sertakan Fotocopy Akte Kelahiran dan Foto 2x3 bersamaan dengan
Pembayaran biaya administrasi</p>
</form>
</body>
</html>
2. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with
mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan
seperti ini
3.6 membuat page menu 6
1 . buatlah notepad baru ,lalu ubah namanya menjadi cari_agra_della.html
ketikan script seperti berikut .

23. <html>
<head>
<title>Halaman Utama</title>
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-size: 16px}
-->
</style>
</head>
<body bgcolor="CCFF00">
<table width="100%" height="100" >
<tr>
<td ><img src="image/image1.png">
</td>
<td ><marquee behavior="slide">
<h1>Ocean </h1>
<h3> Swimming Club</h3></marquee></td>
</tr></table>
<p> </p>
<table width="100%">
<tr>
<td colspan="3" align="left" class="bgmenu">
<a href="?pg=0">Beranda</a>
<a href="?pg=1">Profil</a>
<a href="?pg=2">Buku tamu</a>
<a href="?pg=4">Kontak Kami</a> </td>
</tr>

24. <tr>
<td width="20%" align="center" valign="top" class="bg">
<p>24-Apr-2013</p>
<p class="bg"><a href="?pg=5">Daftar</a></p>
<p class="bg"><a href="?pg=3">Gallery </a></p>
<p><textarea name="alamat" id="alamat" cols="20" rows="20" >
<br />
<b>Warning</b>: mysql_fetch_array(): supplied argument is not a valid
MySQL result resource in <b>C:AppServwwwoceanoceanindex.php</b> on
line <b>41</b><br />
</textarea> </p></td>
<td width="80%" height="200" colspan="1" class="bgg">
<html>
<body align="center">
<img src="image/image1.png"/>
<img src="2013-04-13 14.54.49_Salomon_Beep.jpg"/>
</body>
</html>
</td>
</tr>
<tr>
<td height="63" colspan="3" class="bgmenu"><h3>
<div align="center">
<p>Ocean Swimming Club</p>
<p>www.osclub.com</p>
</div>
</h3> </td>

25. </tr>
</table>
</body>
</html>
2. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with
mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan
seperti ini
DAFTAR PUSTAKA

26. [1] Aciek Ida W.D., Sintesis Sistem Kendali Disipatif Dengan menggunakan
Pendekatan Pertidaksamaan Matriks Linier, Tesis Magister, Institut Teknologi
Bandung, 1997.
[2] Apkarian, P. et. al., LMI Techniques in Control Engineering from Theory to
Practice, Workshop Notes CDC 1996, Kobe, Japan 1996.
[3] Apkarian, P., Gahinet, P., and Becker, G., Self Scheduled H∞ Control of Linear
Parameter-Varying Systems : A Design Example, Proc. American Control
Conference, 856 – 860, 1994.
[4] Bellman, R., Introduction to Matrix Analysis, Tata McGraw-Hill Publishing
Company Ltd., New Delhi, 1974.
[5] Boyd, S., El Ghaoui, L., Feron, E. and Balakrishnan, V., Linear Matrix
Inequalities in System and Control Theory, SIAM, Philadelphia, 1994.
[6] Boyd, S., and Barratt, C., Linear Controller Design : Limits of Performance,
Prentice-Hall, Englewood Cliffs, NJ, 1991.
[7] Chilali, M., Gahinet, P. and Apkarian, P., Robust Pole Placement in LMI
Regions, IEEE Transactions on Automatic Control, 44, 2257 – 2267, 1999.
[8] Gahinet, P.; Nemirovski, Arkadi, Laub, Alan J. & Chilali, Mahmoud, LMI
Control Toolbox : For Use with MATLAB, The MATH WORKS Inc., 1995.
[9] Heugens, Pursey P. M. A. R., Van den Bosch, F. A. J. & Van Riel, C. B. B.,
Compentence-Based Strategic Issues Management-Knowledge Acquisition and
Application in the Genetically Modified Food Business, 2004.
http://www.cbn.net/PDF%2809072000%29/HEUGENS09072000.pdf, 30
Agustus 2005, 09.30 WIB.
[10] Lee, Lawton H., Identification and Robust Control of Linear Parameter-
Varying System, PhD Thesis, University of California at Berkeley, 1997.
[11] Polderman, J. W., and Willems, J. C., Introduction to Mathematical Systems
Theory : A Behavioral Approach, Springer-Verlag, 1998.
[12] Scherer, Carsten W., Robust Mixed Control and Linear Parameter-Varying
Control with Full Block Scaling, Advances in Linear Matrix Inequality

27. Methods in Control, Bab 10, El Ghaoui, L. and Niculescu, S., Editor, SIAM,
187 – 207, 2000.
[13] ______________, Control Systems Toolbox For Use with Matlab® :
Getting
Started, The MATH WORKS Inc., Version 5, online only, 2002.