Laporan Projek Akhir

44
TUGAS LAPORAN PROYEK APLIKASI ”SebutSajaIrwan (WEBSITE PRIBADI)” Oleh DWI MOHAMAD IRWANSYAH NISN : 9976755345 Kelas X RPL 1 1 | Page

description

Laporan

Transcript of Laporan Projek Akhir

Page 1: Laporan Projek Akhir

TUGAS LAPORAN PROYEK APLIKASI

”SebutSajaIrwan (WEBSITE PRIBADI)”

Oleh

DWI MOHAMAD IRWANSYAH

NISN : 9976755345

Kelas X RPL 1

SMK NEGERI 1 DEPOK2013

1 | P a g e

Page 2: Laporan Projek Akhir

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

Page 3: Laporan Projek Akhir

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

Page 4: Laporan Projek Akhir

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

Page 5: Laporan Projek Akhir

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

Page 6: Laporan Projek Akhir

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

Page 7: Laporan Projek Akhir

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

Page 8: Laporan Projek Akhir

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

Page 9: Laporan Projek Akhir

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

Page 10: Laporan Projek Akhir

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

Page 11: Laporan Projek Akhir

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

Page 12: Laporan Projek Akhir

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

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.

12 | P a g e

Page 13: Laporan Projek Akhir

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

Page 14: Laporan Projek Akhir

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

Page 15: Laporan Projek Akhir

$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

Page 16: Laporan Projek Akhir

$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

Page 17: Laporan Projek Akhir

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

Page 18: Laporan Projek Akhir

<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

Page 19: Laporan Projek Akhir

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

Page 20: Laporan Projek Akhir

Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai

kehendak kamu masing masing.

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

Page 21: Laporan Projek Akhir

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

Page 22: Laporan Projek Akhir

<b><font face="Caviar Dreams" size=3 color=black>

"..kita kan udah kenal lama, aku ngerasa

cocok sama kamu, kamu mau ga

jadi pacar aku...?"

<pre>

<img src="29.png">

</body>

</html>

Lalu save dengan menekan tombol CTRL + S

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.

22 | P a g e

Page 23: Laporan Projek Akhir

23 | P a g e

Page 24: Laporan Projek Akhir

3. 3. Membuat Page Menu 2 (Siapa Irwan)

1. Desain layout Page Menu 2 (Siapa 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 siapa_irwan.html. Ketikkan

script seperti berikut.

<html>

<head>

<title> SebutSajaIrwan </title>

</head>

<body background="99.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="10.png">

24 | P a g e

Page 25: Laporan Projek Akhir

<pre>

<b><font face="Caviar Dreams" size=3 color=black>

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

Page 26: Laporan Projek Akhir

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

Page 27: Laporan Projek Akhir

</body>

</html>

Lalu save dengan menekan tombol CTRL + S

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.

27 | P a g e

Page 28: Laporan Projek Akhir

3. 4. Membuat Page Menu 3 (Kisah Irwan)

1. Desain layout Page Menu 3 (Kisah 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 kisah_irwan.html. Ketikkan

script seperti berikut.

<html>

<head>

<title> SebutSajaIrwan </title>

</head>

<body background="101.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>

28 | P a g e

Page 29: Laporan Projek Akhir

<img src="28.png">

<pre>

<b><font face="Caviar Dreams" size=6 color=black> Sebagian

Cerita Kehidupan</font>

<p>

<b><font face="Caviar Dreams" size=3 color=black>

<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

Page 30: Laporan Projek Akhir

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>

<b><font face="Caviar Dreams" size=3 color=black>

30 | P a g e

Page 31: Laporan Projek Akhir

<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>

Lalu save dengan menekan tombol CTRL + S

31 | P a g e

Page 32: Laporan Projek Akhir

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.

32 | P a g e

Page 33: Laporan Projek Akhir

3. 5. Membuat Page Menu 4 (Temui Irwan)

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.

<html><head>

<title> SebutSajaIrwan </title></head><body background="102.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>

33 | P a g e

Page 34: Laporan Projek Akhir

<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>

Lalu save dengan menekan tombol CTRL + S

34 | P a g e

Page 35: Laporan Projek Akhir

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

35 | P a g e