TUGAS LAPORAN PROYEK APLIKASI

SebutSajaIrwan (WEBSITE PRIBADI)

Oleh

DWI MOHAMAD IRWANSYAH NISN : 9976755345 Kelas X RPL 1

SMK NEGERI 1 DEPOK 2013

1|Page

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

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

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/xamppwindows.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|Page

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

2.

Setelah double klik, tunggu proses sampai muncul tampilan seperti gambar di bawah ini.

3. 4. 5. 6.

Klik Next Pilih folder tujuan install Photoshop, lalu klik Next Klik Install, tunggu proses hingga selesai. Setelah proses selesai, maka photoshop telah terinstall di komputer kamu seperti gambar di bawah ini.

6|Page

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. 2. 3. Input ialah bahan mentah Proses pengolahan Output ialah bahan jadi

Untuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk pemecahan suatu masalah, yaitu: 1. 2. START : Berisi instruksi untuk persiapan peralatan yang diperlukan sebelum menangani pemecahan masalah. READ : Berisi instruksi untuk membaca data dari suatu peralatan input.

7|Page

3. 4. 5.

PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengan data yang dibaca. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan END : Mengakhiri kegiatan pengolahan. Flowchart SebutSajaIrwan

8|Page

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

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"> type="submit" value="Cancel"> </form> </p> </pre> <pre> <input

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

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

<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

23 | P a g e

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

<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

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

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

<img src="28.png">

<pre> <b><font face="Caviar Dreams" size=6 color=black> 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 Sebagian

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

<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> <pre> <img src="29.png"> <a href="terkelupas_oleh_waktu.html"><img src="read more.png"></a>

</body> </html> Lalu save dengan menekan tombol CTRL + S

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

32 | P a g e

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

<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

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