Cover

TUGAS LAPORAN PROYEK APLIKASI
”My Zodiak”
Oleh
VIVI ALVIAH
NISN : 9981307536
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

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, 24 Mei 2013
Penulis

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 Database Login Admin......................................................................26
3.2.Membuat Page Menu 1
(beranda)....................................................................................27
3.3 Membuat Page Menu 2 (my
zodiak).................................................................................28
3.4 Membuat Page Menu 3 (hubungi
kami)...........................................................................29
3.5 Membuat Page Menu 4 (keluar)........................................................................30

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

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.

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.

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
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 web_vivi “
Lalu klik Go.

7. Setelah klik Go, maka akan muncul proses loading. Setelah proses loading selesai,
maka akan muncul database bernamakan "we_vivi" 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 "web_vivi" 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 "web_vivi"
yang bisa dilihat di sebelah kiri yang ditandai dengan lingaran berwarna merah.

11. Dalam keadaan ini, table “isi zodiak" masih dalam keadaan kosong. Untuk
membuat record nama admin pada table "isi zodiak", 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
('','vivi','buka')
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. 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 ='web_vivi';
$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'] ;
$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('login.html');
</script>" ;
else{
if($query > 0) {
header('location:index.html') ;
} else {
echo "<script>window.alert('gagal masuk'); window.location('login.html');
</script>" ;
}
}
?>
Setelah selesai, save dengan menekan CTRL + S.
20. Dengan ini, kita tinggal membuat page login .html.
3. 2. Membuat Page Menu 1 (beranda)
1. Desain layout Page Menu 1 (beranda).

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> My Zodiak </title>
</head>
<body background="100.gif">
<img src="banner baru.png">
<a href=index.html><img src="home.png"></a><a href=beranda.html><img
src="beranda"></a><a href=Zodiak.html><img src="Zodiak.png"></a><a
href=hubungi_kami.html><img src="hubung_kami.png"></a>
<p><img src="40.gif">
<pre>
</body>
</html>
Lalu save dengan menekan tombol CTRL + S

4. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with google
chrome atau browser yang kamu kehendaki. Hasil script tersebut akan seperti
ini.
3. 3. Membuat Page Menu 2 (Zodiak)
1. Desain layout Page Menu 2 (Siapa Irwan).

2. Buatlah notepad baru , lalu ubah namanya menjadi zodiak.html. Ketikkan script
seperti berikut.
<html>
<head>
<title> My Zodiak</title>
</head
<a href=index.html><img src="home.png"></a><a href=zodiak.html><img
src="zodiak.png"></a><a href=hubungi kami.html><img src="contact.png"></a><a
href=keluar.html><img src="index.png"></a>
<pre>
<Ramalan berlaku tanggal 20 April-30 April 2013
Aries(21 Maret-19 April)
Umum
Awal minggu ini Anda harus menunjukkan betapa steady dan tegas Anda dalam melakukan
segala hal. Selasa dan Rabu, Anda memang akan mengalami perubahan dalam berpikir
dan ini membuat Anda menghadapi beberapa kesempatan bagus. Hari-hari selanjutnya
Anda sedang nyaman dengan comfort zone. Pastikan setelah itu Anda 'memperbarui' cara
pandang Anda dengan keluar dari kotak yang selama ini Anda dalami. Akhir pekan? Pergi
kencan atau adakan pesta kecil dengan teman-teman dekat pasti sangat menyenangkan.
Hati-hati dengan lutut dan persendian Anda. Minggu ini ada indikasi Anda akan mengalami
sakit pada bagian-bagian tersebut. Namun, ini tidak menghalangi Anda untuk tetap
berolahraga, pilih olahraga yang ringan dan jangan lupakan pemanasan sebelum
memulainya. Mulai konsumsi minuman berkalsium jika Anda merasa Anda sudah
membutuhkannya.
Love
Single : Anda sedang sangat handal dalam mengatur segala hal minggu ini. Atur sebuah
pesta dengan teman-teman, dan jangan lupa untuk memberikan kesempatan teman Anda

untuk mengajak teman-temannya yang lain. Siapa yang tahu Anda malah bertemu the right
person di sana? Siapkan musik, makanan dan permainan terbaik yang pernah Anda
pikirkan dan pasti akan menarik semua orang untuk datang.
Berpasangan : Ubah cara Anda dan pasangan untuk urusan barang-barang atau sesuatu
yang Anda dan dia miliki. Jika perlu, Anda bisa menyarankan kepada pasangan untuk apa
saja yang menurut Anda mengganggu pikiran Anda. Anda tidak perlu memaksakan apa
yang Anda mau kepada pasangan, hanya buatlah dia untuk mengerti dan semua akan
berjalan dengan lancar.
Karier & Keuangan
Memang, jika Anda mempunyai rasa atau hasrat untuk sukses, inilah yang akan membawa
Anda ke hasil yang positif. Tetap jaga energi Anda dalam level yang tinggi dan dukung
tempat Anda bekerja dengan inisiatif penuh. Jika Anda bergerak di bidang manajemen atau
keuangan, Anda akan segera mendapat buah dari perjuangan konstan Anda selama ini.
Secara umum, Anda menguasai minggu ini.
Minggu ini Anda akan menerima masukan dari beberapa usaha yang telah Anda lakukan
sebelumnya. Anda mungkin telah melakukan sebuah interview sebelumnya, bersiaplah
untuk menerima kabar baik dari itu. Memang Anda sudah mempunyai satu bidang yang
selalu menjadi penarik perhatian Anda, mengapa tidak mencoba untuk menekuninya? Anda
akan mendapatkan penghasilan juga dari hal tersebut.
Nomor Keberuntungan = 3
Warna
</body>
</html>
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with google
chrome atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.

3. 4. Membuat Page Menu 3 (Hubungi Kami)

1. Desain layout Page Menu 3 (Hubungi Kami).
2. Buatlah notepad baru , lalu ubah namanya menjadi zodiak.html.. Ketikkan script
seperti berikut.
<html>
<head>
<title> My Zodiak</title>
</head>
src="index.png"></a><a href="zodiak.html"><img src="profile.png"></a><a
href=Hubungi_kami.html><img src="contact.png"></a>
<pre>
<b><font face="Arial" size=6>
<b><font face="Arial" size=3 color=black>
<pre>
<p><b><font face="Caviar Dreams" size=6 color=black>

<p><b><font face="Caviar Dreams" size=3 color=black>
<pre>
<p>
<a href="zodiak.html"><img src="zodiak.png"></a>
<pre>
</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.

3. 5. Membuat Page Menu 4 (keluar)
1. Desain layout Page Menu 4 (keluar).

2. Buatlah notepad baru , lalu ubah namanya menjadi keluar.html. Ketikkan script
seperti berikut.
<html>
<head>
<title> My Zodiak </title>
</head>
src="home.png"></a><a href=Zodiak.html><img src="profile.png"></a><a
href=hubungi kami.html><img src="contact.png"></a>
<pre>
<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>

3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with Google
Chrome atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini

“My Zodiak”
Oleh :
VIVI ALVIAH NISN : 9981307536
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, 24 Mei 2013
Penguji,
________________

Cover

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (6)

Similar to Cover

Similar to Cover (20)

Cover