Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web bunga (tutorial)

977 views

Published on

  • Login to see the comments

Web bunga (tutorial)

  1. 1. TUGAS LAPORAN PROYEK APLIKASI”WEB PROGAMMING : FLOWERS WEB”OlehSiti Romlah dan Nur IstianaKelas X RPL 2SMK NEGERI 1 DEPOK2013
  2. 2. KATA PENGANTARPuji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia Nya saya dapatmenyelesaikan laporan ini. Shalawat dan salam tercurah kepada Rasulullah Muhammad SAWbeserta 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 semangatdalam menyelesaikan ini;2. Bapak Nanang Suwandi , selaku pembimbing II, yang telah mencurahkan perhatian danwaktunya yang demikian banyak dalam penyelesaian tugas akhir ini;3. bapak, ibu, kakak-kakak dan adik-adik tercinta, beserta seluruh keluarga yang senantiasamemberikan 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 sangatdiharapkan.Akhir kata, semoga tesis ini dapat bermanfaat bagi para pembacanya.Depok, Juni 2013Siti Romlah dan Nur Istiana1
  3. 3. DAFTAR ISIHalamanKATA PENGATAR.................................................................................................................................1DAFTAR ISI...........................................................................................................................................2BAB I (PENGINSTALLAN).....................................................................................................................3A. Proses Penginstallan Dreamweaver CS 6...............................................................................3B. Proses Penginstallan Xampp..................................................................................................6BAB II (MEMBUAT WEBSITE)..............................................................................................................9A. Membuat Dokumen..............................................................................................................9B. Membuat Halaman Home....................................................................................................12C. Membuat Halaman Profile...................................................................................................19D. Membuat Gallery..................................................................................................................21BAB III (MEMBUAT LINK)..................................................................................................................23A. Membuat Link di Halaman Home.........................................................................................24B. Membuat Link di Halaman Profile........................................................................................25C. Membuat Link di Halaman Gallery.......................................................................................25BAB IV (MEMBUAT DATABASE).......................................................................................................29A. Membuat Database di Phpmyadmin.......................................................................................29B. Membuat Koneksi dan Prosses (add)......................................................................................30C. Menjalankan database............................................................................................................33D. Melihat Database di Phpmyadmin..........................................................................................35TUJUAN WEBSITE.........................................................................................................................36TAMPILAN WEBSITE......................................................................................................................37A. Home...............................................................................................................................37B. Profile.............................................................................................................................38C. Gallery.............................................................................................................................39D. Definisi Bunga...................................................................................................................40E. 10 Bunga Terindah di Dunia...............................................................................................41F. Komentar.........................................................................................................................432
  4. 4. BAB IPENGINSTALLANA. Proses Penginstallan Dreamweaver CS 61. Buka folder letaknya dreamweaver, lalu klik set-up2. Proses Installernya3
  5. 5. 3. Pilih try, jika anda belum mempunyai serial numbernya4. Setuju license adobe4
  6. 6. 5. Klik install6. Klik launch now, untuk membuka aplikasinya5
  7. 7. B. Proses Penginstallan Xampp1. Buka folder letaknya xampp, lalu klik xampp-win32-1,8.1-VC9-installer2. Pilih English, lalu klik OK3. Klik next6
  8. 8. 4. Centang semuanya, lalu klik next5. Klik install6. Proses installing7
  9. 9. 7. Setelah itu klik finish8
  10. 10. BAB IIMEMBUAT WEBSITEA. Membuat dokumen1. Klik HTML2. Lalu buat site, dengan cara klik site kemudian klik new site3. Lalu muncul seperti ini, kemudian isi site name nya lalu pilih foldernya9
  11. 11. 4. Dan berikut tampilannya, pilih foldernya lalu klik select5. Setelah itu, klik servers yang ada disamping kiri, lalu klik tanda plus6. Isi server namenya, connect usingnya pilih local/network10
  12. 12. 7. Lalu pilih folder (foldernya sama dengan yang tadi)8. Tulis web URL seperti ini, lalu klik save9. Centang dua-duanya, lalu klik saveSite selesai11
  13. 13. B. Membuat halaman home1. Klik insert, lalu pilih table2. Muncul seperti ini, isi rowsnya 4 dan columnsnya 2, table widthnya 1000 pixels, bordernya 1dan cell spacingnya 1 kemudian klik OK3. Lalu buat kerangka seperti ini, jika ingin menggabungkan 2 sel menjadi satu klik kanan pilih table  marge cells12
  14. 14. 4. Jika ingin menambahkan gambar buat bannernya, klik insert  image  pilih gambar yangingin dijadikan banner5. Lalu pada bagian kiri, isi dengan table lagi. Caranya klik insert lalu table6. Isi rowsnya 3, columnsnya 1, bordernya 1 dan cell spacingnya 513
  15. 15. 7. Beginilah tampilannya, atur horznya jadi center dan vertnya top8. Sebelumnya klik page propeties yang ada dibawah, muncul seperti iniLalu pilih page fontnya Comic Sans MS (sesuai yang diinginkan) untuk mengubah jenistulisannya14
  16. 16. 9. Masih dihalaman page propities, klik Appearance (HTML)Pilih warna yang diinginkan lalu klik OK (untuk mengatur warna)10. Jadilah seperti ini15
  17. 17. 11. Pada bagian tulisan “Welcome To My Website” pada codenya ditambah <marquee>sebelumnya agar tulisan bisa berjalan12. Lalu klik format lalu pilih table untuk menambahkan gambarnya nanti16
  18. 18. 13. Isi seperti ini lalu klik OK14. Setelah itu atur alignnya menjadi center. Lalu klik insert  pilih image untuk menambahkangambar15. Setelah itu, lalu isi seperti ini16. Lalu klik insert  table. Isi seperti ini17
  19. 19. 17. Atur alignnya menjadi right dan tulis selengkapnya18. Lakukian seperti tadi hingga seperti ini19. Lalu klik save as, dan beri nama “home.html”18
  20. 20. C. Membuat halaman profile1. Buka halaman home2. Tulisannya diganti menjadi Welcome To My Profile, terus contentnya dihapus3. Tulis seperti ini4. Klik insert  pilih table5. Isi seperti ini6. Kemudian isi yang kita inginkan19
  21. 21. 7. Lalu klik save as beri nama file “profile.html”20
  22. 22. D. Membuat Gallery1. Buka halaman home2. Tulisannya diganti menjadi Welcome To My Gallery, terus contentnya dihapus3. Klik insert  pilih tabel4. Isi seperti ini5. Klik insert  pilih image untuk menambahkan gambar6. Buat hingga seperti ini21
  23. 23. 7. Lalu save as  beri nama “gallery.html”22
  24. 24. BAB IIIMEMBUAT LINKA. Membuat link di halaman home.html1. Membuka halaman home.html2. Blok teks yang akan diberi link3. Jika sudah di blok, pilih nama file yang anda tuju4. Lalu klik OKhomeprofile23
  25. 25. gallerydefinisi bunga10 bunga terindah di dunia24
  26. 26. B. Membuat link di halaman profile.html1. Membuka halaman profile.html2. Blok teks yang ingin diberi link (home, profile, gallery)3. Klik ikon browse yang ada didalam panel properties HTML4. Kemudian pilih nama file yang anda ingin link5. Lalu tekan OK(sama seperti di home tapi tidak ada “selengkapnya”)C. Membuat link di halaman gallery.html1. Membuka halaman gallery.html2. Blok teks yang ingin diberi link (home, profile, gallery)3. Klik ikon browse dalam panel yang tersedia di properties HTML4. Jika anda ingin menambahkan link anda blok teks yang ingin di link5. Lalu tekan OK(sama seperti di home tapi tidak ada “selengkapnya”)6. Ditambah dengan bunga bangkai, matahari, dalia, tulip, rosella dan terataI25
  27. 27. Bunga bangkaiBunga matahari26
  28. 28. Bunga dahliaBunga tulip27
  29. 29. Bunga rosellaBunga teratai28
  30. 30. BAB IVMEMBUAT DATABASEA. Membuat database di phpmyadmin1. Jalankan xampp2. Buka http;//localhost/phpmyadmin3. Pilih basisdata4. Tulis nama databasenya lalu klik ciptakan5. Tulis nama tablenya dan jumlah kolomnya, lalu klik go6. Isikan kolom seperti ini:Nama Field Type Length Others Extraid INT 11 Primary_Key Auto_incrementnama VARCHAR 50Email VARCHAR 150komentar TEXT7. Hasilnya seperti ini29
  31. 31. B. Membuat koneksi dan prosses (add)Koneksi:Koneksi digunakan untuk menghubungkan database dengan web yang kita buat1. File  New  PHP2. Pada jendela kode, kosongkan dengan menghapus semua script.3. Lalu masukan kode berikut30<title>Flowers Web</title><?mysql_connect ("localhost", "root", "");mysql_select_db ("comentaar");?>
  32. 32. 4. Lalu saveProses (add)1. File  New  PHP2. Pada jendela kode, kosongkan dengan menghapus semua script.3. Lalu masukan kode berikutDesain bagian komentarnya31
  33. 33. Berikut kodenya32
  34. 34. C. Menjalankan database1. Jalankan xampp2. Buka http://localhost/webbunga/3. Lalu pergi ke halaman profile lalu klik tulisan disini4. Maka akan muncul seperti ini33
  35. 35. 5. Tulis nama, email, komentar lalu klik OK6. Setelah itu muncul seperti ini, lalu klik kembali34
  36. 36. 7. Maka komentar pun berhasil dikirimD. Melihat database di phpmyadmin1. Jalankan xampp2. Buka http;//localhost/phpmyadmin3. Lalu klik comentar  komentar4. Maka akan muncul seperti ini35
  37. 37. TUJUAN WEBSITETujuan website ini dibuat untuk menginformasikan tentang bungaseperti definisi bunga dan 10 bunga terindah di dunia, dan ada juga beberapagallery foto bunga beserta penjelasannya.36
  38. 38. TAMPILAN WEBSITEA. Home37
  39. 39. B. Profile38
  40. 40. C. Gallery39
  41. 41. D. Definisi Bunga40
  42. 42. E. 10 Bunga Terindah di Dunia41
  43. 43. 42
  44. 44. F. Komentar43

×