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 DEPOK2013

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


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

http://www.cbn.net/PDF(09072000)/HEUGENS09072000.pdf

http://www.cbn.net/PDF(09072000)/HEUGENS09072000.pdf

[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

Technology