Laporan Projek Akhir

TUGAS LAPORAN PROYEK APLIKASI
”SebutSajaIrwan (WEBSITE PRIBADI)”
Oleh
DWI MOHAMAD IRWANSYAH
NISN : 9976755345
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013
1 | P a g e

KATA PENGANTAR
Puji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia
Nya penulis dapat menyelesaikan tugas Laporan Proyek 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
2 | P a g e

DAFTAR ISI
Halaman
KATA PENGANTAR................................................................................................3
BAB I. INSTALASI SOFTWARE PENGEMBANG...............................................4
1.1. XAMPP ..............................................................................................................4
1.2. Editor gambar (Adobe Photoshop)......................................................................5
BAB II. RANCANGAN APLIKASI.........................................................................7
2.1. Flowchart.............................................................................................................7
BAB III. PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE..........9
3.1 Membuat Database Login Admin........................................................................9
3.2.Membuat Page Menu 1 (SebutSajaIrwan) ........................................................19
3.3 Membuat Page Menu 2 (Siapa Irwan) ...............................................................24
3.4 Membuat Page Menu 3 (Kisah Irwan) ..............................................................28
3.5 Membuat Page Menu 4 (Temui Irwan)..............................................................33
3 | P a g e

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
4 | P a g e

8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser
sesuai selera anda
1.2. 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.
5 | P a g e

2. Setelah double klik, tunggu proses sampai muncul tampilan seperti
gambar di bawah ini.
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.
6 | P a g e

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.
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.
7 | P a g e

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.
Flowchart SebutSajaIrwan
8 | P a g e

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 | P a g e

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.
10 | P a g e

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.
11 | P a g e

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)
)
Lalu klik Go
12 | P a g e

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.
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
('','sebutsajairwan','punyairwan')
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.
13 | P a g e

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. 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';
14 | P a g e

$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.
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'] ;
15 | P a g e

$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('sebutsajairwan.html'); </script>" ;
else{
if($query > 0) {
header('location:index.html') ;
} else {
echo "<script>window.alert('gagal masuk');
window.location('sebutsajairwan.html'); </script>" ;
}
}
?>
Setelah selesai, save dengan menekan CTRL + S.
20. Dengan ini, kita tinggal membuat page login .html.
16 | P a g e

21. Desain layout Page Login.html
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi sebutsajairwan.html.
Ketikkan script seperti berikut.
<html>
<head>
<title>SebutSajaIrwan</title>
</head>
<body background="cover baru.png">
<pre>
17 | P a g e

<font face="Caviar Dreams" size=6
color="white">Login</font>
<form action="ceklogin.php" method="POST">
<font face="Caviar Dreams" size=6 color="white">User ID:
<input type="text" name="username">
<font face="Caviar Dreams" size=6 color="white"> Password: <input
type="password" name="password">
<input type="submit" Value="Click"> <input
type="submit" value="Cancel">
</form>
</p>
</pre>
<pre>
</body>
</html>
Lalu save dengan menekan tombol CTRL + S
18 | P a g e

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.
3. 2. Membuat Page Menu 1 (SebutSajaIrwan)
1. Desain layout Page Menu 1 (SebutSajaIrwan).
19 | P a g e

2. Buatlah notepad baru , lalu ubah namanya menjadi index.html. Ketikkan script
seperti berikut.
<html>
<head>
<title> SebutSajaIrwan </title>
</head>
<body background="100.gif">
<img src="banner baru.png">
<a href=index.html><img src="home.png"></a><a href=siapa_irwan.html><img
src="siapa_irwan.png"></a><a href=kisah_irwan.html><img
src="kisah_irwan.png"></a><a href=cari_irwan.html><img
src="cari_irwan.png"></a>
<p><img src="40.gif">
<pre>
<img src="2.png">
<pre>
<b><font face="Caviar Dreams" size=3 color=black>
Sebuah Website pribadi yang
berisikan pedoman hidup
pelajar sial. Hidup menjadi orang yang
selalu diter-
tawakan, membuat orang tersenyum
dan melepaskan
20 | P a g e

pikiran masalah untuk sementara.
Kebodohan adalah teman ! Prinsip
yang saya gunakan
dalam hidup ini. Orang bodoh selalu
tertawa dan
bahagia akan kebodohannya sendiri
dan itu menyenangkan.
Karena mereka tak pernah sekalipun
memikirkan masalah
hidup yang serumit ini.
Mungkin saya tidak berbakat dalam
negara yang saya tempati bangga
bidang yang mampu orang tua dan
bahkan
negara yang saya tempati bangga
terhadap
saya. Namun, membuat orang sekitar
tertawa
dan melupakan masalahnya sejenak,
mungkin
saja itu bakat yang saya dapatkan
sejak lahir
dalam pangkuan suster cantik.
Huahahahahaha
<pre>
<img src="29.png">
&nbsp
<pre>
<img src="3.png">
<pre>
21 | P a g e

"..kita kan udah kenal lama, aku ngerasa
cocok sama kamu, kamu mau ga
jadi pacar aku...?"
<pre>
<img src="29.png">
</body>
</html>
22 | P a g e

3. 3. Membuat Page Menu 2 (Siapa Irwan)
1. Desain layout Page Menu 2 (Siapa Irwan).
2. Buatlah notepad baru , lalu ubah namanya menjadi siapa_irwan.html. Ketikkan
script seperti berikut.
<html>
<head>
</head>
<pre>
<img src="10.png">
24 | P a g e

<pre>
Nama : Irwan
Nama Lengkap : Irwan Irwan Ganteng
Nama Panggilan :
Kelamin : Laki - laki, beneran deh
Status : (masih) Jomblo
Hobby : Suka pipis, nyiumin kentut
orang
25 | P a g e

Tempat Lahir : Di pangkuan suster
cantik
Hari Lahir : Selasa (Wage)
Shio : Elang Kerajaan
Zodiak : Cancer, percintaan lagi rumit
Seorang pelajar bodoh dari gabungan
makhluk betawi
dan sunda juga penunggang motor
Supra.
Disinyalir sebagai profesor kesialan
lagi kesesatan.
Pejuang gugur asmara, menolak garis
LDR.
Mengenyam bangku sekolah di SMK
Negeri 1 Depok.
26 | P a g e

</body>
</html>
27 | P a g e

3. 4. Membuat Page Menu 3 (Kisah Irwan)
1. Desain layout Page Menu 3 (Kisah Irwan).
2. Buatlah notepad baru , lalu ubah namanya menjadi kisah_irwan.html. Ketikkan
<html>
<head>
</head>
src="siapa_irwan.png"></a><a href="kisah_irwan.html"><img
<pre>
28 | P a g e

<img src="28.png">
<pre>
<b><font face="Caviar Dreams" size=6 color=black> Sebagian
Cerita Kehidupan</font>
<p>
<pre>
" Kriiiiiiiingggg …. !!!
Kriiiiiiiiiiiiinngggg !! Kriiiiiiiiiiiiinngggg !!
Greseekk… Braaak !! "
Dengan mata sempoyongan dan
nyawa yang masih ketinggalan
di alam surga, gw beranjak dari
ranjang dengan terpaksa
29 | P a g e

buat matiin alarm.
” Gilaaaa !!! Abang gw yg nyetel nih
alarm kenapa dia yg
masih nyaman tidur. Malah masih jam
04.45 AM lagi. “
<pre>
<a href="sebagian_cerita_kehidupan.html"><img
src="read more.png"></a>
<pre>
<img src="29.png">
<p><b><font face="Caviar Dreams" size=6 color=black>
Terkelupas Oleh Waktu</font>
30 | P a g e

<pre>
Assalamualaikum Warrahmatullah
Wabarokatuh
Seperti ga ada perubahan pada tiap2
hari, malam ini gua
kembali menyendiri di kamar,
bersahabat dengan hangatnya
seduhan coffee, dimanjakan dengan
sayup sayup lagu
kesukaan... daaaan mencicipi nyeri
pada
wilayah pantat dan sekitarnya.
<p> <a
href="terkelupas_oleh_waktu.html"><img src="read more.png"></a>
<pre>
<img src="29.png">
</body>
</html>
31 | P a g e

32 | P a g e

3. 5. Membuat Page Menu 4 (Temui Irwan)
1. Desain layout Page Menu 4 (Temui Irwan).
2. Buatlah notepad baru , lalu ubah namanya menjadi cari_irwan.html. Ketikkan
<html>
<head>
</head>
<pre>
33 | P a g e

<img src="21.png">
<marquee direction = "down" height=1100>
<pre>
<img src="22.png">
<pre>
<img src="23.png">
<pre>
<img src="24.png">
<pre>
<img src="25.gif">
<pre>
<img src="26.gif">
<pre>
</marquee>
<pre>
<img src="29.png">
</body>
</html>
34 | P a g e

firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini
35 | P a g e

Laporan Projek Akhir

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Laporan Projek Akhir

Similar to Laporan Projek Akhir (20)

More from wanamateur_48

More from wanamateur_48 (12)

Recently uploaded

Recently uploaded (20)

Laporan Projek Akhir