Web bunga (tutorial)
- 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
- 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
- 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
- 39. B. Profile 38
- 40. C. Gallery 39
- 42. E. 10 Bunga Terindah di Dunia 41
- 43. 42
- 44. F. Komentar 43