Laporan ini membahas tentang pembuatan website bernama 'Official Billfold' untuk memenuhi tugas akhir pelajaran Produksi di SMK. Laporan ini menjelaskan langkah-langkah instalasi perangkat lunak yang dibutuhkan, perancangan flowchart, pembuatan database dan halaman website, serta penjelasan singkat tentang masing-masing bagian."
1. TUGAS LAPORAN PROYEK APLIKASI
”OFFICIAL BILLFOD : WEBSITE”
Oleh
GILANG RAMADHAN
NISN : 9974779251
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013
2. “JOFFICIAL WEBSITE BILLFOLD”
Oleh :
Gilang Ramadhan NISN : 9974779251
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
Puji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia
Nya penulis dapat menyelesaikan tesis ini. 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 :
1. bapak/ibu …………………., selaku pembimbing I, yang telah memberikan
bimbingan dan semangat dalam menyelesaikan ini;
2. bapak/ibu ………………….., selaku pembimbing II, yang telah
mencurahkan perhatian dan waktunya yang demikian banyak dalam
penyelesaian tugas akhir ini;
3. Departemen Pendidikan Nasional yang telah memberikan bea siswa
sehingga penulis dapat menyelesaikan pendidikan strata satu ini;
4. suami/isteri dan anak-anak tercinta, yang senantiasa memberikan dorongan
dan semangat, serta kesabaran, pengertian dan do’anya;
5. bapak, ibu, kakak-kakak dan adik-adik tercinta, beserta seluruh keluarga
yang senantiasa memberikan semangat dan do’anya;
6. ………………………………………;
7. seluruh staf dan karyawan Laboratorium …………………….., yang telah
memberikan banyak sekali bantuannya;
8. dan semua pihak yang membantu, yang tidak dapat penulis sebutkan satu
persatu.
Penulis menyadari bahwa tesis ini bukanlah tanpa kelemahan, untuk itu kritik dan
saran sangat diharapkan.
Akhir kata, semoga tesis ini dapat bermanfaat bagi para pembacanya.
Bandung, September 2010
Penulis
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. Instalasi editor adobe photoshop ............................................7
II.3. Perancangan dan FLOWCHART ............................ 9
II.4. 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. DAFTAR LAMPIRAN
Halaman
LAMPIRAN A : Yang Berkaitan dengan Sistem Kendali Kokoh ………………
A-1
A.1 Bukti Teorema 3.1 ……………………………………………………………
A-1
A.2 Pengertian Kestabilan Internal ……………………………………………….
A-2
LAMPIRAN B : Pembuktian Persamaan dan Pertidaksamaan dalam BAB IV .....
B-1
B.1 Pembuktian Persamaan (IV.2) ..........................................................................
B-1
B.2 Pembuktian Persamaan (IV.3) ..........................................................................
B-2
dan seterusnya
LAMPIRAN C : Pembuktian Persamaan dan Pertidaksamaan dalam BAB V ....
C-1
C.1 Pembuktian perhitungan nilai clX (bagian dari Teorema V.2) .......................
C-1
C.2 Pembuktian persamaan (V.19) .........................................................................
C-2
dan seterusnya
6. BAB I
PENDAHULUAN
I.1. Latar Belakang
Berisi penjelasan pembatasan masalah yang dibahas pada
laporan prakerin
I.2. Maksud dan Tujuan
Berisi penjelasan maksud dan tujuan dari penulisan laporan
prakerin
1
7. I.I LATAR BELAKANG
Latar belakang pembuatan project website ini adalah agar
anak-anak di kelas 10 dapat mengerti apa yang di maksud
dengan website.
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. Membuat sebuah website juga
adalah suatu syarat juga agar dapat naik ke kelas selanjutnya.
2
8. I.2 MAKSUD DAN TUJUAN
Maksud membuat website agar :
- Efisiensi anggaran promosi dan informasi
- Efektifitas dalam membangun strategi pemasaran serta
mengenalkan produk
- 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 produksi
dalam menjalankan program menjualannya
- Agar para pengunjung dapat mengetahui dan mengenal tentang
produk kita
3
9. BAB II
INSTALASI SOFTWARE PENGEMBANG
Perangkat Pengembangan Aplikasi
Berisi penjelasan software yang digunakan dalam pembuatan
aplikasi.
II.1. instalasi XAMPP
Berisi penjelasan untuk menginstal xampp, termasuk bahasa
tambahan seperti Javascript maupun library lainnya.
II.2. Instalasi editor adobe photoshop
Berisi penjelasan perancangan buat mengedit gambar-gambar
website.
II.3. Flowchart
Berisi penjelasan perancangan jalannya aplikasi website.
II.4. Membuat aplikasi website berserta databasenya
Berisi tentang langkah-langkah membuat website dan databasenya.
II.5. Membuat page website besreta scriptnya
Berisi tentang langkah-langkah membuat page website
4
10. 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
5
11. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser
sesuai selera anda
6
12. II.2. Instalasi Editor adobe photoshop
Editor gambar (Adobe Photoshop)
Adobe Photoshop, software editor gambar yang mendukung untuk mendesain
tampilan page website kita. Disini saya menggunakan Adobe Photoshop CS5
portable version (versi bajakan) untuk mempersingkat waktu dan size, yang bisa
kalian download di google.
Cara Menginstall Adobe Photoshop CS5 Portable
1. Buka photoshop yang telah kamu download, lalu double klik photoshop
tersebut.
2. Setelah double klik, tunggu proses sampai muncul tampilan seperti gambar
di bawah ini.
7
13. 3. Klik Next
4. Pilih folder tujuan install Photoshop, lalu klik Next
5. Klik Install, tunggu proses hingga selesai.
6. Setelah proses selesai, maka photoshop telah terinstall di komputer kamu
seperti gambar di bawah ini.
8
14. II.3. 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
15. 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
.
10
16. 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:
4. Ketikkan " localhost/phpmyadmin " (tanpa tanda kutip) pada browser anda
yang diberi tanda lingakaran merah seperti gambar di bawah ini. Lalu tekan
enter
11
17. 4. Setelah menekan enter, anda akan masuk pada phpMyAdmin. Tampilannya
seperti yang ada di bawah ini.
6. 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.
12
18. 6. Setelah masuk menu SQL, silahkan tulis script (tanpa tanda kutip):
“ create database irwan “
Lalu klik Go.
7. Setelah klik Go, maka akan muncul proses loading. Setelah proses loading selesai,
maka akan muncul database bernamakan "irwan" disebelah kiri yang diberi tanda
lingkaran merah seperti gambar di bawah ini.
13
19. 8. Setelah database terbuat, selanjutnya adalah membuat table di dalam database
tersebut. Lalu klik database "irwan" tadi, lalu klik menu SQL kembali.
9. Setelah masuk menu SQL, silahkan tulis script:
create table login(
no int(3) not null auto_increment,
username varchar(100) not null,
password varchar(100) not null,
primary key(no)
)
14
20. Lalu klik Go
10. Setelah meng-klik Go, maka akan muncul proses loading. Setelah proses loading
selesai, maka akan muncul table bernamakan "login" dalam database "irwan" yang
bisa dilihat di sebelah kiri yang ditandai dengan lingaran berwarna merah.
11. Dalam keadaan ini, table "irwan" masih dalam keadaan kosong. Untuk membuat
record nama admin pada table "irwan", maka klik tombol clear.
15
21. 12. Setelah anda meng-klik clear, otomatis script anda akan terhapus. Untuk
membuat record pada table "alamat", silahkan tulis script seperti di bawah ini.
insert into alamat values
('','officialbillfold','billfold')
Jika sudah, lalu klik Go.
13. Setelah meng-klik Go, maka akan muncul proses loading. Tunggu hingga proses
loading selesai. Dan jika berhasil, klik table login untuk melihat recordnya seperti
tampilan di bawah ini.
14. Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page
.html login dan menyambungkannya ke database tersebut. Sehingga, sebelum
memasuki website akan ada tampilan page login yang dapat diakses oleh admin
pembuat website itu sendiri sesuai record yang telah diisi pada database tersebut.
Kita memerlukan page login, koneksi database dan koneksi database dengan page
login.
15. 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. 16
22. 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.
17. Setelah file terbuka, ketikkan script tersebut
<?php
$hostname ='localhost';
$username ='root';
$password ='';
$database ='irwan';
$connect = mysql_connect($hostname,$username,$password) ;
mysql_select_db($database,$connect);
?>
Setelah script tertulis, save script tersebut dengan cara CTRL + S.
17
23. 18. Koneksi database telah terbuat, selanjutnya kita membuat koneksi database
dengan page login .html. Buat notepad baru dengan cara yang sama pada step
sebelumnya, lalu ubah namanya menjadi ”ceklogin.php” (tanpa tanda kutip), buka
file tersebut dengan cara yang sama pada step sebelumnya.
19. Setelah file terbuka, ketikkan script tersebut.
<?php
include "koneksi.php" ;
$username=$_POST['username'] ;
$password=$_POST['password'] ;
$login="select * from login where username='$username' and
password='$password'" ;
$sql=mysql_query($login) ;
$query=mysql_num_rows($sql) ;
if(empty($username) || empty ($password))
echo "<script>window.alert('gagal masuk'); window.location('billfold.html');
</script>" ;
else{
if($query > 0) {
header('location:index.html') ;
} else {
echo "<script>window.alert('gagal masuk'); window.location('billfold.html');
</script>" ;
}
}
?>
18
24. Setelah selesai, save dengan menekan CTRL + S.
20. Dengan ini, kita tinggal membuat page login .html.
19
25. II.5. 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>
<img src="343.gif">
</head>
<body background="nyoba1.jpg">
<!-- start header -->
<hr>
<center>
<hr>
<center>| <a href=default.html><img src="home.PNG"></a>
| <a href=galery.html><img src="galery.PNG"></a>
| <a href=index.php><img src="pemesanan.PNG"></a>
| <a href=download.html><img src="download.PNG"></a>|</center>
<hr>
</font>
</h3>
</center>
<head>
<title>.:HOME BILLFOLD:.</title>
</head>
<body>
</font>
</h3>
</center>
<hr>
</center>
<p><marquee><img src="123.png" width="480" height="87"
witdh="200"></marquee> </p>
</center>
<h4>
20
26. <center>
</table>
<td><h1><font face="FRESHMAN"color="cream">WELCOME TO BILLFOLD
FAMILY WEBSITE</h1></font></td>
<center>
<hr size=5 width=800 noshade align=center>
</center>
<font face="tahoma" size=3 color=cream>
<pre>
<font face="tahoma" size=3 color=cream>
Category: biografi band
Assalamualaikum.wr.wb Sobat., ok langsung aja bagi yang belum tau Biografy
BILLFOLD down-arrow
bl.jpgBiografi BillFold- BILLFOLD adalah pop punk hardcore band berasal dari
Bandung yang
terbentuk di awal tahun 2010.Band ini merupakan sebuah project baru dari Gania
Alianda bersama
Pam, Anga dan Ferin Mereka mencoba untuk membuat suasana baru di belantika
musik Indonesia,
dengan front line wanita di dalamnya. Mencoba memainkan musik hardcore dengan
beat punk yang
ciamik dan easy listening, mereka menggemari musik-musik poppunk hc amerika
seperti daggermouth
setyour goal, four years strong dan band band gelombang baru easycore amerika
namun tetap
mempertahankan set beat punks / hc lama seperti, h20,shelter hingga warzone.
General Info
: Genre: Hardcore / Punk /Rock Location BANDUNG CITY,Please select your
region,
In Profile Views: 11192 Last Login: 2/3/2011 Member Since 8/3/2010 Website http:
//www.purevolume.com/new/billfold Record Label YOUNG BLOOD RECS Type
of
Label Indie Members of Billfold :
ALIANDA GANIA – VOX PAM ALAYUBI – DRUMS FERIN – BASS ANGGA
– GUITARhemmh
demikian postingan saya mengenai Billfold biografi band postingan sebelumnya,
cheesy-grin ok thnx ya udah mau nyimak postingannya kita ketemu nextpost ranger
ok
SILAKAN berfantasi mengenai apa saja ketika raungan gitar Angga, cabikan bas
Ferrin,
dan gebukan drum Pam Alayubi menopang teriakan Gania. Sebuah fantasiranum
yang dipicu
sajian antara H20, Set Your Goals, dan sedikit Shelter, dalam bungkus vokal Gania
yang 21
28. 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 kedua yaitu page gallery ,pertama-tama kita masuk ke
windows pilih ascesories dan klik notepad setelah notepad terbuka lalu kita
ketik script seperti di bawah ini :
<html>
<head>
</head>
<body background="nyoba1.jpg">
<!-- start header -->
<div id="header">
<img src="343.gif">
23
37. Jika sudah save kembali dan ganti nama filenya dengan downloaad.html dan format
filenya menjadi all files dan websitenya akna jadi seperti ini :
32
39. DAFTAR PUSTAKA
[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.
34
40. [12] Scherer, Carsten W., Robust Mixed Control and Linear Parameter-Varying
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.
35
41. DAFTAR LAMPIRAN
Halaman
LAMPIRAN A : Yang Berkaitan dengan Sistem Kendali Kokoh ………………
A-1
A.1 Bukti Teorema 3.1 ……………………………………………………………
A-1
A.2 Pengertian Kestabilan Internal ……………………………………………….
A-2
LAMPIRAN B : Pembuktian Persamaan dan Pertidaksamaan dalam BAB IV .....
B-1
B.1 Pembuktian Persamaan (IV.2) ..........................................................................
B-1
B.2 Pembuktian Persamaan (IV.3) ..........................................................................
B-2
dan seterusnya
LAMPIRAN C : Pembuktian Persamaan dan Pertidaksamaan dalam BAB V ....
C-1
C.1 Pembuktian perhitungan nilai clX (bagian dari Teorema V.2) .......................
C-1
C.2 Pembuktian persamaan (V.19) .........................................................................
C-2
dan seterusnya
36