Laporan Aplikasi Website

TUGAS LAPORAN PROYEK APLIKASI MEMBUAT
WEBSITE BESERTA DATABASENYA
”AndraBlog (WEBSITE PRIBADI)”
ANDRA FRADITHIA.K
NISN : 9965196309
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

“AndraBlog”
Oleh :
Andra Fradithia.K NISN: 9965196309
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,
________________

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

DAFTAR ISI
Halaman
LEMBAR PENGESAHAN.......................................................................................ii
KATA PENGANTAR................................................................................................v
BAB I. INSTALASI SOFTWARE PENGEMBANG...............................................1
1.1. XAMPP .............................................................................................................1
1.2. Editor gambar (Adobe Photoshop)..................................................................2
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 (AndraBlog)
3.3 Membuat Page Menu 2 (Siapa Andra)
3.4 Membuat Page Menu 3 (Coretan Andra)
3.4.1 Membuat Sub Page Menu 4 (Read More)
3.5 Membuat Page Menu 4 (Temukan Andra)

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
yang sering anda gunakan.
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 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.

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.

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.
Flowchart AndraBlog

BAB III
PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE
3. 1. Membuat Database Login Admin
1.Pertama-tama pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamu
jalankan.
2. Buka browser anda, lalu ketikkan di address bar “localhost/phpmyadmin” (tanpa tanda
kutip) lalu klik SQL :
3.jika sudah masuk SQL,silahkan tulis script (tanpa tanda kutip):
“create database andra“ lalu klik GO :

4.jika sudah di klik GO akan ada database di sebelah kiri bernamakan “andra”.
Lalu klik database tersebut :
5.jika sudah masuk ke database andra.langkah selanjutnya adalah membuat table dengan
cara klik SQL lalu ketikkan script ini :
create table login(
no int(3) not null auto_increment,
username varchar(100) not null,
password varchar(100) not null,

primary key(no)
)
jika sudah klik GO :
6.jika sudah mengklik GO,table akan muncul disebelah kiri dengan bernamakan
“login”.nah,saat ini table login masih dalam keadaan kosong belum berisikan apapun
Langkah selanjutnya kita akan memasukan record kedalam table “login”.
Pertama klik table login yang ada di sebelah kiri,lalu klik SQL,klik tombol “Clear”.
Lalu masukkan script ini :
insert into alamat values
('','Andra Fraditia','ndra')
Jika sudah klik GO :

7.Jika record berhasil akan muncul tampilan kira-kira seperti ini :
8.ok,database sudah berhasil kita buat,sekarang yang harus kita buat selanjutnya adalah
script untuk menyambungkan dari page login ke database. Langsung saja buat folder kosong
di local disk c/xampp/htdocs/ dengan nama sesuai dengan yang anda inginkan.
9.pertama buka notepad,lalu ketikkan script ini :
<?php
$hostname ='localhost';
$username ='root';
$password ='';

$database ='andra';
$connect = mysql_connect($hostname,$username,$password) ;
mysql_select_db($database,$connect);
?>
Jika sudah save dengan nama ”koneksi.php” (tanpa tanda kutip) simpan di folder yang
barusan anda buat di c/xampp/htdocs/
10.langkah selanjutnya kita akan membuat script yang kedua untuk menghubungkan page
login dengan database yang tadi kita buat. Buka notepad lalu masukkan script ini:
<?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('andrablog.html'); </script>" ;
else{
if($query > 0) {
header('location:index.html') ;
} else {
echo "<script>window.alert('gagal masuk');
window.location('andrablog.html'); </script>" ;
}
}
?>
Jika sudah save script dengan nama ”ceklogin.php” dan simpan di folder yang telah anda
buat tadi di c/xampp/htdocs/

11.nah,dengan ini kita hanya tinggal membuat page login. Dengan cara buka notepad.
Lalu masukkan script ini :
<html>
<head>
<title>Login AndraBlog.</title>
</head>
<body background="background_.gif">
<body>
<p>
<pre>
<center><font face="ChunkFive Roman" color="white"><h1>Login</h1></center>
<form action="ceklogin.php" method="POST">
<center><font face="Caviar Dreams" color="white" size="1"><h1>User ID
:<input type="text" name="username"></h1></center>
<center><font face="Caviar Dreams" color="white"><h1>Password :<input
type="password" name="password"></h1></center>
<center><input
type="submit" Value="OK"><input type="submit" value="cancel"></center>
</form>
</p>
</pre>
</body>
</html>
Lalu save dengan nama ”andrablog.html” dan simpan di folder yang telah anda buat di
c/xampp/htdocs/
Tampilan page login :

3. 2. Membuat Page Menu 1 (AndraBlog)
1. Desain layout Page Menu 1 (AndraBlog).
Siapkan gambar untuk diletakkan pada bagian-bagian website di atas dengan ukuran yang
sudah di sebutkan pada gambar di atas.

2.Buka notepad dan ketikkan script berikut kedalam notepad :
<html>
<head>
<title> AndraBlog </title
</head>
<body background="background.gif">
<img src="header.gif">
<pre><a href="index.html"><img src="andrablog_b.png"></a><a
href="siapaandra.html"><img src="andra_b.png"></a><a href="coretanandra.html"><img
src="coretanandra_b.png"></a><a href="temukanandra.html"><img
src="temukanandra_b.png"></a></pre>
<p>
<img src="slideshow.gif">
<pre>
<img src="02.png"></pre>
<hr align="center" size="4" width="550" noshade>
<pre>
<img src="01.png"></pre>
<font face="Caviar Dreams" size="3" color=black>
<pre> awalnya pernah coba buat blog namanya <b><span
style="background-color: #ffff00;">andra-story.blogspot.com</span></b> yang isinya
hal-hal ngawur yang gue alami alhasil orang yang abis baca blog gue itu
kena penyakit
kaki gajah dimatanya.nah,sekarang gue mau coba-coba lagi buat blog
namanya.......
AndraBlog.
<img src="lokasii.png">
Mungkin nanti AndraBlog isinya ga beda jauh kaya
<b>Andra-story.blogspot.com</b> yang isinya-
udah di jelasin barusan.dari cerita <span style="background-color :
#ffff00;"><b>tentang kekonyolan si andra sama temennya,</b></span>
<span style="background-color : #ffff00;"><b>artikel-artikel ngaco,dan
percintaan bodoh.</span></b>
Ok,kalau mau kenal lebih banyak lagi tentang gue bisa ke
tab menu <a href="siapaandra.html">Siapa andra</a> Iyap,

mungkin segitu aja dari gue.
Thanks!! :D</pre></font>
<pre>
<img src="copyright.png">
</pre>
</font>
</body>
</html>
Lalu save as dan berinama index.html
3. Jika ingin melihat hasilnya klik kanan pada file tersebut lalu open with mozilla firefox
atau browser lain yang sering anda gunakan.
Tampilan web kira-kira akan seperti ini :

3. 3. Membuat Page Menu 2 (Siapa Andra)
1.Desain layout Page Menu 2 (Siapa Andra)

Siapkan gambar untuk diletakkan pada bagian-bagian website di atas dengan ukuran yang
sudah di sebutkan pada gambar di atas.
2. Buka notepad dan ketikkan script berikut kedalam notepad :
<html>
<head>
</head>
href="siapaandra.html"><img src="andra_b.png"></a><a href="coretanandra.html"><img
src="coretanandra_b.png"></a><a href="temukanandra.html"><img
src="temukanandra_b.png"></a></pre>
<p>
<pre>
<img src="02_1.png"></pre>

<pre>
<font face="cambria" size="3" color=black>
<pre>
Nama : Andra
Fradithia K
Nama Panggilan :
Andra, Ndra, Tea, ganteng.pokoknya terserah yang penting keliatan keren.
Status : 'BELUM'
berpasangan.
TTL : 22 Maret
1997,Bogor.
Gender : Cowo kok
Zodiak : Aries.
<s>pasnya sama virgo</s>
Hobi : suka banget
main software editing (tapi ancur). <s>Rajin males-malesan.</s>
Shio : Belalang
tempur, Fengshuinya bagus.
Pertanyaan yang
paling sering ditanya : boleh minta follback gak? Engga.
Tempat Paporit :
Rumah. <s>TL mantan.</s>
</font>
</pre>
</body>
</html>
Lalu save as dan berinama siapaandra.html
3. Jika ingin melihat hasilnya klik kanan pada file tersebut lalu open with mozilla firefox
atau browser lain yang sering anda gunakan.

3. 4. Membuat Page Menu 3 (Coretan Andra)
1. Desain layout Page Menu 3 (Coretan Andra).

Siapkan gambar untuk diletakkan pada bagian-bagian website di atas dengan
ukuran yang sudah di sebutkan pada gambar di atas.
2.Buka notepad dan ketikkan script berikut kedalam notepad :
<html>
<head>
</head>
href="siapaandra.html"><img src="andra_b.png"></a><a
href="coretanandra.html"><img src="coretanandra_b.png"></a><a
href="temukanandra.html"><img src="temukanandra_b.png"></a></pre>
<p>

<pre>
<pre>
<pre>
kenalan dikit tentang
andra,gue suka iseng-iseng buat gambar aneh-aneh kaya doodle misalnya.
dan gambar doodle
yang pernah gue buat yang ini misalnya:
<pre>
<img src="andrasketch_.png" width=200 height=200></pre>
dan ini doodle yang
gue buat di coreldraw pertama kali :
<pre>
<img src="angelvektor.png" width=200 height=200></pre>
<pre>
<a
href="readmore.html"><img src="readmore.png"></a>
</font>
</pre>
</body>
</html>
Lalu save as dan berinama coretanandra.html
3. Jika ingin melihat hasilnya klik kanan pada file tersebut lalu open with mozilla
firefox atau browser lain yang sering anda gunakan.

3. 4.1. Membuat Sub Page Menu 4 (Read More)
1. Desain layout Page Menu 4 (Read More)

<pre>
<pre>
<pre>
kenalan dikit tentang
andra,gue suka iseng-iseng buat gambar aneh-aneh kaya doodle misalnya.
dan gambar doodle
yang pernah gue buat yang ini misalnya:
<pre>
<img src="andrasketch_.png" width=200 height=200></pre>
dan ini doodle yang
gue buat di coreldraw pertama kali :
<pre>
<img src="angelvektor.png" width=200 height=200></pre>
<pre>
cantik ya,duh.
tapi,dia bukan mantan gue. iya,gue ga sketch dari wajah siapa-siapa tapi cuma
cuma sekedar
imajinasi. segini dulu aja basa basi dari gue,makasih udah mau berkunjung!
</font>
</pre>
<img src=copyright.png>
</body>
</html>
Lalu save as dan berinama readmore.html

3. 5. Membuat Page Menu 6 (Temukan Andra)
1. Desain layout Page Menu 6 (Temukan Andra)

<pre>
<pre>
<pre>
<b><span
style="background-color : #ffff00;">Beberapa Social Medianya andra
:</span></b>
Twitter :
@andrafraditea
Facebook :
andrafraditea
KakaoTalk :
AndraF
Line :
Andra Fraditea
CP
: andra.fraditia[at]Gmail[dot]com
Pin BB :
(Tanya sendiri ke orangnya) (Bukan ajang modus)
Sebenarnya udah
ada kan di header sebagian. Tapi Gapapah.
di follow dan di
invite ya!!
</font>
</pre>
</body>
</html>
Lalu save as dan berinama temukanandra.html

Jika semuanya telah selesai dibuat simpan semua page web,script php dll Kedalam
folder yang telah anda buat di c/xampp/htdocs/

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.
[12] Scherer, Carsten W., Robust Mixed Control and Linear
Parameter-Varying Control with Full Block Scaling, Advances
in Linear Matrix Inequality 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.

Laporan Aplikasi Website

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to Laporan Aplikasi Website

Similar to Laporan Aplikasi Website (20)

Laporan Aplikasi Website