Buku Lepas
advertisement
BAB I DREAMWEAVER CS5 Buku ini akan membahas bagaimana cara membuat website dinamis (dynamic web page) dengan menggunakan program Adobe Dreamweaver CS5 dengan teknologi Web Server PHP dan MySQL. Buku ini dapat juga digunakan untuk Dreamweaver CS3 dan CS4 meskipun beberapa fitur tentunya tidak selengkap versi Dreamweaver CS5. Perbedaan utama antara Dreamweaver CS5 dan CS3 atau CS4 terkait dengan tutorial dalam buku ini adalah pada fasilitas Code Hinting dan Live View. Pada Dreamweaver CS4 dan CS5 sudah tersedia fasilitas Live View, tapi tidak tersedia pada Dreamweaver CS3. Tutorial-tutorial yang disajikan di buku ini sepenuhnya adalah terkait dengan website dinamis, oleh karena itu sebemum Anda mempelajari buku ini: - Saya asumsikan Anda telah mengenal baik komputer Anda, dapat membedakan file dan direktori (folder), dan Anda juga telah dapat meng-copy, menghapus file dan sebagainya. - Saya asumsikan Anda telah menguasai dasar-dasar penggunaan Adobe Dreamweaver CS5 atau pada versi-versi sebelum Dreamweaver CS5 (misalnya CS3 dan CS4). Tutorial ini dapat digunakan pada Dreamweaver CS3 dan CS4, meskipun terdapat perbedaan utama pada fitur Code Hinting, Live View dan Site Setup (proses pembuatan Site Definition). - Saya asumsikan Anda telah menguasai tag-tag HTML dan CSS dengan baik. 1 - Saya asumsikan Anda telah menguasai atau terbiasa menggunakan web browser seperti Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari dan browser-browser lainnya. - Saya asumsikan bahwa web server Apache, PHP dan MySQL telah berfungsi dengan baik di komputer Anda. Tentang installasi web server ini akan dijelaskan pada Bab II. 1.1 Sekilas tentang Dreamweaver CS5 Adobe Dreamweaver CS5 adalah sebuah program yang sangat powerful untuk mendesain sebuah website. Program ini dapat bekerja dengan baik pada teknologi web seperti HTML, XHTML, CSS, JavaScript, dan PHP. Program ini memberi kemudahan dalam bekerja menyusun lay out website dengan CSS (Cascading Style Sheet) yang secara default terdapat dalam Dreamweaver CS5. CSS memberikan kesan ringan pada halaman website ketika proses loading. Fasilitas Spry yang disediakan Dreamweaver CS5 juga dapat mempercantik tampilan website yang Anda buat. Dreamweaver juga menyediakan banyak tool-tool yang dapat digunakan untuk membuat dan mengembangkan website dinamis. Beruntung bagi para web programmer yang bekerja dengan PHP dan MySQL karena Dreamweaver CS5 menyediakan banyak sekali fitur-fitur PHP yang tidak ada pada versi sebelumnya (Dreamweaver 8, Adobe Dreamweaver CS3 dan Adobe Dreamweaver CS4). Banyak program-progam web design di pasaran, tetapi Dreamweaver menjadi salah satu program nomor satu yang bisa dijadikan pilihan untuk digunakan dalam mendesain website baik statis atau dinamis. 2 1.2 Fasilitas baru di Dreamweaver CS5 Jika sebelumnya Anda belum pernah memakai Dreamweaver atau memakai Dreamweaver sebelum versi sebelum Dreamweaver CS3, maka Anda akan menemukan beberapa pengembangan pada Dreamweaver CS5. Pengurangan paling terasa adalah pada teknologi web ASP.Net yang sudah tidak disertakan lagi semenjak Dreamweaver CS4 karena dianggap sudah ketinggalan jaman. Pengembangan Fasilitas CSS Versi-versi Dreamweaver sebelumnya selalu menyediakan tool yang memudahkan Anda untuk membuat, mengedit, dan pengujian CSS. Tidak terkecuali pada Dreamweaver CS5. Dreaweaver CS5 memungkinkan Anda untuk sementara menghidupkan dan mematikan fitur CSS secara individu. Dengan fitur pengujian CSS ini, berarti Anda dapat dengan cepat melihat efek tertentu dari style CSS yang Anda gunakan di dalam tag-tag HTML. Kemudahan dalam membuat Site Definition Membuat site definition adalah salah satu bagian paling kritis pada Dreamweaver di bawah versi CS5. Pada Dreamweaver CS5, kemudahan membuat site definition akan Anda dapatkan PHP Code Hinting, mendukung para Developer PHP Ketika Anda mulai mengetikkan kode PHP, maka Anda akan menyadari ada tanda berwarna merah pada baris kode yang mengalami kesalahan dan peringatan yang menunjukkan di baris manakah kode yang harus Anda perbaiki. Tanda highlight merah 3 ini akan hilang saat kode PHP yang Anda ketikkan sudah dikoreksi. Fasilitas inilah yang disebut Code Hinting dalam Dreamweaver CS5. Gambar 1.1. Terdapat kesalahan pada kode PHP pada baris 3, 6 dan 7 Gambar 1.2. Kesalahan kode PHP yang sudah dikoreksi Dreamweaver CS5 selalu mengecek dan memastikan bahwa kode-kode PHP yang Anda masukkan adalah benar. Fasilitas Code Hinting juga terasa sangat membantu bagi Anda yang benar-benar baru di bidang pengembangan website dinamis. Meskipun fasilitas PHP Code Hints ini tidak menunjukkan dimana kesalahan dalam pengetikkan kode yang kita lakukan secara mendetail, paling tidak ini memberi tahu kita pada baris 4 berapa kode yang kita ketik mengalami kesalahan sehingga mempercepat perbaikan. Dreamweaver telah menyertakan fungsi-fungsi dasar dalam pekerjaan coding dengan PHP. Gambar 1.3. Shortcut kode berguna bagi para developer PHP Gambar 1.4. Fungsi tanggal (Date Time Class) PHP yang sekarang disertakan Gambar 1.5. Fungsi format tanggal PHP di Dreamweaver CS5 5 Code Hinting yang disediakan juga semakin pintar sehingga mempermudah pekerjaan kita dalam pekerjaan coding PHP. PHP Code Hinting akan sangat banyak membantu untuk mengetahui kode-kode PHP yang tidak kita tutup dengan benar atau syntaxnya salah. Gambar di bawah ini adalah contoh dari tag PHP yang tidak ditutup dengan benar sehingga memunculkan Code Hinting yang memberi tahu Anda bahwa ada kode yang salah. Peringatan tersebut akan muncul dengan warna kuning dan warna merah pada baris kode yang sedang kita kerjakan. Peringatan akan hilang secara otomatis ketika kita telah mengkoreksi kode dengan benar. Fitur ini adalah fitur baru yang tidak ada pada versi sebelumnya yang akan membantu Anda. Dalam kasus ini, Code Hinting keluar karena kesalahan dalam menutup tag PHP untuk format tanggal dan waktu pada baris ke 259 yang diberi peringatan berwarna merah. Kode PHP yang salah: <?php echo date("l, j-F-Y, g:i a", strtotime($row_rsBeritaKesehatan['tanggal']; ? > Gambar 1.6. Dremweaver memberitahu baris kode yang salah format tanggalnya Ketika kode ini ditutup dengan benar dengan menambahkan tanda kurung tutup pada akhir code menjadi seperti di bawah ini 6 maka Code Hinting akan menampilkan pesan bahwa tidak ada kode yang salah. Berikut ini adalah kode PHP yang benar: <?php echo date("l, j-F-Y, g:i a", strtotime($row_rsBeritaKesehatan['tanggal'])); ? > Gambar 1.7. Code Hinting menghilang karena kode PHP sudah benar Integrasi Dreamweaver CS5 dengan CMS Bagi Anda yang sering bekerja menggunakan Content Management System (CMS) semacam Joomla, Wordpress, Mambo dan CMS-CMS lain, maka Anda dapat menggunakan Dreamweaver CS5 dengan mudah untuk mengintegrasikan CMSCMS tersebut. Syarat utama adalah Anda harus membuat Site Definition dengan benar. Setelah menginstall CMS yang Anda pilih, selanjutnya Anda dapat bekerja secara dinamis dengan CMS-CMS tersebut setelah Anda membuat Site Definition dengan benar (lihat Bab 2). 7 Gambar 1.8. Integrasi fungsi CMS Wordpress dalam Dreamweaver CS5 1.3 Welcome Screen Welcome Screen akan selalu muncul pada saat Anda baru membuka Dreamweaver CS5. Welcome Screen ini manyajikan beberapa informasi, yaitu: Open a Recent Item Berfungsi untuk menampilkan file-file terakhir yang Anda gunakan. Di sini Anda juga dapat membuka file baru dengan mengklik menu Open. Create New Menampilkan beberapa jenis file website yang bisa Anda buat dengan Dreamweaver CS5 8 Top Features (videos) Berisi live link video yang disediakan oleh Adobe Dreamweaver CS5 terkait dengan fitur yang tersedia dalam Dreamweaver CS5. Gambar 1.9. Gambar Welcome Screen Dreamweaver CS5 Anda dapat mengaktifkan fitur Welcome Screen ini kembali dengan cara: a. Click Edit > Preferences. b. Setelah keluar jendela Preferences, pilih General dan klik check box Show welcome screen jika Anda ingin mengaktifkan kembali Welcome Screen di Dreamweaver CS5 Anda. c. Klik OK jika telah selesai dan yakin dengan pilihan Anda. Gambar 1.10. Cara mengaktifkan Welcome Screen Dreamweaver CS5 9 1.4 Work Space Dreamweaver CS5 Ada banyak grup dari tool-tool yang disediakan oleh Dreamweaver CS5 yang secara umum tidak berbeda jauh dengan program Windows lainnya. Panels Group Document toolbar Application bar Code View Workspace swithcher Design View Tags Selector Property Inspector Gambar 1.11. Workspace Dreamweaver CS5 1.5 Document Tool Bar Document tool bar memberikan Anda kemudahan dalam mengetahui file apa saja yang aktif ketika Anda mengerjakan sebuah halaman website. Sering untuk membuat satu lembar halaman website kita harus bekerja 10 dengan kode-kode HTML, PHP, CSS, Java Scripts dan kode-kode lainnya. Pada document tool bar ini pula kita akan menemukan sebuah tool yang nantinya juga akan banyak kita pakai. Berikut ini adalah fiturfitur tersebut. Document Tabs Jika Anda membuka banyak file dalam waktu bersamaan, maka Anda akan melihat beberapa tab muncul berderet dengan jumlah sama dengan file yang Anda buka. Pada tab file yang aktif juga akan muncul detail lokasi di mana Anda menyimpan file tersebut. Gambar 1.12. Document Tabs dan Related Documents Gambar 1.13. Lokasi file yang aktif Related file bar Di sini, Anda dapat melihat semua file yang berkaitan/di-link-kan dengan file utama yang sedang Anda kerjakan. File-file tersebut antara lain adalah file-file CSS, JavaScripts dan Server Side Programming misalnya PHP. Tulisan Source Code menunjukkan bahwa Anda bekerja pada file utama, sedangkan file-file lainnya juga bisa Anda edit secara langsung. 11 Gambar 1.14. Salah satu related file yang aktif adalah Websiteku.php, file utamanya adalah daftar_admin.php Gambar 1.15. Code ( ), Split ( )dan Design View ( ) Gambar 1.16. Fasilitas workspace splitter (Code, Split dan Design) Fasilitas Code View memberikan kemungkinan bagi Anda yang lebih suka bekerja dengan kode-kode. Untuk mengaktifkannya, Anda hanya tinggal klik Code. Dreamweaver juga menyediakan fasilitas Split View yang memungkinkan Anda dapat bekerja dengan workspace yang menampilkan dua view berbeda, satunya Code dan satunya Design. Sedangkan Design View cocok bagi Anda yang lebih suka bekerja dengan tampilan visual. 12 Fitur Live View pada Dreamweaver CS5 Fasilitas Dreamweaver CS5 yang paling dirasakan pengembangannya adalah fasilitas Live View yang bekerja selayaknya browser-browser internet. Fitur ini memungkin Anda untuk mengetest bahwa website yang Anda desain dapat bekerja dengan baik di semua browser semacam Internet Explorer, Safari, Opera, Chrome, Firefox dan browser-browser lainnya. Dengan fasilitas ini, Anda dapat mengidentifikasi masalah pada website yang Anda buat. Apakah dapat bekerja dengan baik atau tidak pada semua browser. Salah satu fitur ini dapat Anda akses dengan beberapa cara: Klik File > Preview in Browser >Adobe BrowserLab, atau Dengan mengklik dan secara langsung. Fitur Live View Gambar 1.17. Fitur Live View Dreamweaver CS5 Kedua fitur ini secara langsung akan menampilkan hasil desain dari website yang Anda buat dan sekaligus juga menunjukkan kode-kode yang aktif setiap kali Anda mengarahkan mouse Anda di layar Live View. Perubahan kode-kode HTML sekecil apapun bisa terlihat dengan jelas di fitur ini. Fitur ini bekerja selayaknya sebuah program browser yang Anda gunakan. 13 Fungsi utama Live View adalah untuk mengurangi interpretasi yang berbeda dari satu browser ke browser lainnya dan sekaligus mengetahui hasil instan dari website Anda tanpa harus membuka program browser. Fitur ini akan muncul setiap kali melakukan perubahan kode yang terdapat dalam proyek yang Anda kerjakan atau dengan mengklik . Gambar 1.18. Pop Up Fitur Live View Untuk menggunakan fitur ini, ikuti langkah berikut ini: Buka file website yang Anda miliki Klik Live View, jika Anda pertanyaan untuk menyimpan file, simpan file terlebih dahulu dengan menekan CTRL+S Gambar 1.19. Klik Yes untuk menyimpan file yang akan dilihat menggunakan fasilitas Live View Fitur Live View Anda akan menampilkan halaman website yang Anda buka secara real-time. Ada beberapa cara untuk mengakses fitur Live View ini. Cara pertama seperti dijelaskan di atas, cara kedua adalah dengan membuka menu View > Live View. 14 Berikut ini adalah contoh sebuah halaman website sebelum menggunakan fitur Live View dengan sesudah menggunakan Live View. Gambar 1.20. Sebelum Menggunakan Live View Gambar 1.20 Setelah Menggunakan Live View 15
