Laporan proyek aplikasi web programming tentang website bunga yang berisi: 1. Penginstallan Dreamweaver dan Xampp untuk membuat website 2. Membuat halaman home, profile, gallery 3. Membuat link antarhalaman 4. Membuat database komentar menggunakan phpmyadmin 5. Menampilkan database komentar yang telah diisi

1. TUGAS LAPORAN PROYEK APLIKASI
”WEB PROGAMMING : FLOWERS WEB”
Oleh
Siti Romlah dan Nur Istiana
Kelas X RPL 2
SMK NEGERI 1 DEPOK
2013

2. KATA PENGANTAR
Puji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia Nya saya dapat
menyelesaikan laporan ini. Shalawat dan salam tercurah kepada Rasulullah Muhammad SAW
beserta keluarganya.
Selama melaksanakan tugas akhir ini, ghina mendapat bantuan dan dukungan dari berbagai pihak.
Untuk itu, saya ingin mengucapkan terima kasih kepada :
1. Ibu Inne Ria Abidin, selaku pembimbing I, yang telah memberikan bimbingan dan semangat
dalam menyelesaikan ini;
2. Bapak Nanang Suwandi , selaku pembimbing II, yang telah mencurahkan perhatian dan
waktunya yang demikian banyak dalam penyelesaian tugas akhir ini;
3. bapak, ibu, kakak-kakak dan adik-adik tercinta, beserta seluruh keluarga yang senantiasa
memberikan semangat dan do’anya;
4. dan semua pihak yang membantu, yang tidak dapat saya sebutkan satu persatu.
Saya menyadari bahwa tesis ini bukanlah tanpa kelemahan, untuk itu kritik dan saran sangat
diharapkan.
Akhir kata, semoga tesis ini dapat bermanfaat bagi para pembacanya.
Depok, Juni 2013
Siti Romlah dan Nur Istiana
1

3. DAFTAR ISI
Halaman
KATA PENGATAR.................................................................................................................................1
DAFTAR ISI...........................................................................................................................................2
BAB I (PENGINSTALLAN).....................................................................................................................3
A. Proses Penginstallan Dreamweaver CS 6...............................................................................3
B. Proses Penginstallan Xampp..................................................................................................6
BAB II (MEMBUAT WEBSITE)..............................................................................................................9
A. Membuat Dokumen..............................................................................................................9
B. Membuat Halaman Home....................................................................................................12
C. Membuat Halaman Profile...................................................................................................19
D. Membuat Gallery..................................................................................................................21
BAB III (MEMBUAT LINK)..................................................................................................................23
A. Membuat Link di Halaman Home.........................................................................................24
B. Membuat Link di Halaman Profile........................................................................................25
C. Membuat Link di Halaman Gallery.......................................................................................25
BAB IV (MEMBUAT DATABASE).......................................................................................................29
A. Membuat Database di Phpmyadmin.......................................................................................29
B. Membuat Koneksi dan Prosses (add)......................................................................................30
C. Menjalankan database............................................................................................................33
D. Melihat Database di Phpmyadmin..........................................................................................35
TUJUAN WEBSITE.........................................................................................................................36
TAMPILAN WEBSITE......................................................................................................................37
A. Home...............................................................................................................................37
B. Profile.............................................................................................................................38
C. Gallery.............................................................................................................................39
D. Definisi Bunga...................................................................................................................40
E. 10 Bunga Terindah di Dunia...............................................................................................41
F. Komentar.........................................................................................................................43
2

4. BAB I
PENGINSTALLAN
A. Proses Penginstallan Dreamweaver CS 6
1. Buka folder letaknya dreamweaver, lalu klik set-up
2. Proses Installernya
3

5. 3. Pilih try, jika anda belum mempunyai serial numbernya
4. Setuju license adobe
4

6. 5. Klik install
6. Klik launch now, untuk membuka aplikasinya
5

7. B. Proses Penginstallan Xampp
1. Buka folder letaknya xampp, lalu klik xampp-win32-1,8.1-VC9-installer
2. Pilih English, lalu klik OK
3. Klik next
6

8. 4. Centang semuanya, lalu klik next
5. Klik install
6. Proses installing
7

9. 7. Setelah itu klik finish
8

10. BAB II
MEMBUAT WEBSITE
A. Membuat dokumen
1. Klik HTML
2. Lalu buat site, dengan cara klik site kemudian klik new site
3. Lalu muncul seperti ini, kemudian isi site name nya lalu pilih foldernya
9

11. 4. Dan berikut tampilannya, pilih foldernya lalu klik select
5. Setelah itu, klik servers yang ada disamping kiri, lalu klik tanda plus
6. Isi server namenya, connect usingnya pilih local/network
10

12. 7. Lalu pilih folder (foldernya sama dengan yang tadi)
8. Tulis web URL seperti ini, lalu klik save
9. Centang dua-duanya, lalu klik save
Site selesai
11

13. B. Membuat halaman home
1. Klik insert, lalu pilih table
2. Muncul seperti ini, isi rowsnya 4 dan columnsnya 2, table widthnya 1000 pixels, bordernya 1
dan cell spacingnya 1 kemudian klik OK
3. Lalu buat kerangka seperti ini, jika ingin menggabungkan 2 sel menjadi satu klik kanan 
pilih table  marge cells
12

14. 4. Jika ingin menambahkan gambar buat bannernya, klik insert  image  pilih gambar yang
ingin dijadikan banner
5. Lalu pada bagian kiri, isi dengan table lagi. Caranya klik insert lalu table
6. Isi rowsnya 3, columnsnya 1, bordernya 1 dan cell spacingnya 5
13

15. 7. Beginilah tampilannya, atur horznya jadi center dan vertnya top
8. Sebelumnya klik page propeties yang ada dibawah, muncul seperti ini
Lalu pilih page fontnya Comic Sans MS (sesuai yang diinginkan) untuk mengubah jenis
tulisannya
14

16. 9. Masih dihalaman page propities, klik Appearance (HTML)
Pilih warna yang diinginkan lalu klik OK (untuk mengatur warna)
10. Jadilah seperti ini
15

17. 11. Pada bagian tulisan “Welcome To My Website” pada codenya ditambah <marquee>
sebelumnya agar tulisan bisa berjalan
12. Lalu klik format lalu pilih table untuk menambahkan gambarnya nanti
16

18. 13. Isi seperti ini lalu klik OK
14. Setelah itu atur alignnya menjadi center. Lalu klik insert  pilih image untuk menambahkan
gambar
15. Setelah itu, lalu isi seperti ini
16. Lalu klik insert  table. Isi seperti ini
17

19. 17. Atur alignnya menjadi right dan tulis selengkapnya
18. Lakukian seperti tadi hingga seperti ini
19. Lalu klik save as, dan beri nama “home.html”
18

20. C. Membuat halaman profile
1. Buka halaman home
2. Tulisannya diganti menjadi Welcome To My Profile, terus contentnya dihapus
3. Tulis seperti ini
4. Klik insert  pilih table
5. Isi seperti ini
6. Kemudian isi yang kita inginkan
19

21. 7. Lalu klik save as beri nama file “profile.html”
20

22. D. Membuat Gallery
1. Buka halaman home
2. Tulisannya diganti menjadi Welcome To My Gallery, terus contentnya dihapus
3. Klik insert  pilih tabel
4. Isi seperti ini
5. Klik insert  pilih image untuk menambahkan gambar
6. Buat hingga seperti ini
21

23. 7. Lalu save as  beri nama “gallery.html”
22

24. BAB III
MEMBUAT LINK
A. Membuat link di halaman home.html
1. Membuka halaman home.html
2. Blok teks yang akan diberi link
3. Jika sudah di blok, pilih nama file yang anda tuju
4. Lalu klik OK
home
profile
23

25. gallery
definisi bunga
10 bunga terindah di dunia
24

26. B. Membuat link di halaman profile.html
1. Membuka halaman profile.html
2. Blok teks yang ingin diberi link (home, profile, gallery)
3. Klik ikon browse yang ada didalam panel properties HTML
4. Kemudian pilih nama file yang anda ingin link
5. Lalu tekan OK
(sama seperti di home tapi tidak ada “selengkapnya”)
C. Membuat link di halaman gallery.html
1. Membuka halaman gallery.html
2. Blok teks yang ingin diberi link (home, profile, gallery)
3. Klik ikon browse dalam panel yang tersedia di properties HTML
4. Jika anda ingin menambahkan link anda blok teks yang ingin di link
5. Lalu tekan OK
(sama seperti di home tapi tidak ada “selengkapnya”)
6. Ditambah dengan bunga bangkai, matahari, dalia, tulip, rosella dan terataI
25

27. Bunga bangkai
Bunga matahari
26

28. Bunga dahlia
Bunga tulip
27

29. Bunga rosella
Bunga teratai
28

30. BAB IV
MEMBUAT DATABASE
A. Membuat database di phpmyadmin
1. Jalankan xampp
2. Buka http;//localhost/phpmyadmin
3. Pilih basisdata
4. Tulis nama databasenya lalu klik ciptakan
5. Tulis nama tablenya dan jumlah kolomnya, lalu klik go
6. Isikan kolom seperti ini:
Nama Field Type Length Others Extra
id INT 11 Primary_Key Auto_increment
nama VARCHAR 50
Email VARCHAR 150
komentar TEXT
7. Hasilnya seperti ini
29

31. B. Membuat koneksi dan prosses (add)
Koneksi:
Koneksi digunakan untuk menghubungkan database dengan web yang kita buat
1. File  New  PHP
2. Pada jendela kode, kosongkan dengan menghapus semua script.
3. Lalu masukan kode berikut
30
<title>Flowers Web</title>
<?
mysql_connect ("localhost", "root", "");
mysql_select_db ("comentaar");
?>

32. 4. Lalu save
Proses (add)
1. File  New  PHP
2. Pada jendela kode, kosongkan dengan menghapus semua script.
3. Lalu masukan kode berikut
Desain bagian komentarnya
31

33. Berikut kodenya
32

34. C. Menjalankan database
1. Jalankan xampp
2. Buka http://localhost/webbunga/
3. Lalu pergi ke halaman profile lalu klik tulisan disini
4. Maka akan muncul seperti ini
33

35. 5. Tulis nama, email, komentar lalu klik OK
6. Setelah itu muncul seperti ini, lalu klik kembali
34

36. 7. Maka komentar pun berhasil dikirim
D. Melihat database di phpmyadmin
1. Jalankan xampp
2. Buka http;//localhost/phpmyadmin
3. Lalu klik comentar  komentar
4. Maka akan muncul seperti ini
35

37. TUJUAN WEBSITE
Tujuan website ini dibuat untuk menginformasikan tentang bunga
seperti definisi bunga dan 10 bunga terindah di dunia, dan ada juga beberapa
gallery foto bunga beserta penjelasannya.
36

38. TAMPILAN WEBSITE
A. Home
37

39. B. Profile
38

40. C. Gallery
39

41. D. Definisi Bunga
40

42. E. 10 Bunga Terindah di Dunia
41

43. 42

44. F. Komentar
43