Tutorial: Mengedit Web dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
   

2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
   

3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
   
   

4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
   

5. Ketikkan images/index_26.gif pada kolom Bg.
   

6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

---

2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

1. Letakkan kursor pada tempat yang akan ditambahkan teks.
   

2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
   

3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
   

4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
   

5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
   

6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
   

7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.
   

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

1. Pertama kali, klik menu PC.
   

2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
   

3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
   

4. Selanjutnya pilih Show Pop up Menu.
   

5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
   

6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
   

7. Kemudian masukkan alamat URL pada kolom Link.
   

8. Selanjutnya pada kolom Target, pilih _parent.
   

9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
   

10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    

11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    

12. Klik Tab Position untuk menentukan posisi pop up menu.
    

13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    

14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1. Buatlah duplikasi gambar tombol yang telah ada.
   

2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
   

3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
   

4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
   

5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
   

6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
   

7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
   

8. Untuk melihat hasilnya, tekan tombol F12.

Belajar MySQL 5.x, yuk?!

Pengantar Tutorial:
Tutorial ini pertama kali ditulis pada 27 September 2003. Saat itu masih menggunakan perangkat lunak PHPTriad-2.2.1, yang merupakan kumpulan paket dari perangkat lunak Apache (versi 1.3.23), MySQL (versi 3.23.48) dan PHP (versi 4.1.1).

Seiring dengan waktu, banyak perkembangan yang terjadi pada dunia internet. Termasuk pesatnya perkembangan perangkat lunak Apache, MySQL dan PHP yang selalu diperbaharui oleh produsennya masing-masing. Sebagai contoh, versi terbaru dari Apache adalah Apache 2.2.15 (per 6 Maret 2010), versi terbaru dari PHP adalah PHP 5.3.2 (per 4 Maret 2010) atau PHP 5.2.13 (per 25 Pebruari 2010), dan versi terbaru dari MySQL adalah MySQL 5.1.45 (per Maret 2010).

Tutorial ini terdiri dari rangkaian tutorial Apache, MySQL dan PHP yang terdapat di situs ini. Silakan Anda baca sesuai dengan minat dan kebutuhan Anda. Insya Allah, saya akan mengupdate tutorial-tutorial yang ada sesuai dengan perkembangan.

Mangga, silakan dilanjut...
Selamat bertutorial... :)

Apa Itu MySQL?

MySQL (bisa dibaca dengan mai-es-ki-el atau bisa juga mai-se-kuel) adalah suatu perangkat lunak database relasi (Relational Database Management System atau disingkat RDBMS), seperti halnya database ORACLE, Postgresql, MS SQL, dan sebagainya. Jangan disalah-mengertikan bahwa MySQL sama dengan istilah SQL. SQL (singkatan dari Structured Query Language) sendiri adalah suatu sintaks perintah-perintah tertentu atau bahasa (pemrograman?) yang digunakan untuk mengelola suatu database. Jadi, MySQL dan SQL adalah dua 'hal' yang berbeda. Mudahnya, MySQL adalah perangkat lunaknya, sedangkan SQL adalah bahasa perintahnya. Cukup jelas kan?

Sejarah MySQL dan SQL

Selengkapnya tentang apa dan bagaimana, sejarah, fungsi dan lain-lainnya silakan kunjungi aja situs resminya http://www.mysql.com.

Sistem Operasi apa saja yang mendukung?

MySQL didukung oleh banyak sistem operasi, seperti Linux, Unix, Windows, Solaris, FreeBSD, Mac OS X, HP UX, IBM AIX, SCO Unix, SGI Irix, Dec OSF, dan sebagainya. Dapat digunakan baik pada komputer dengan prosesor 32-bit maupun 64-bit (prosesor AMD 64 X2 maupun Intel Core2 Duo ).

Apa yang perlu disiapkan sebelumnya...

Sebelum melanjutkan tutorial ini, Anda harus memiliki sistem MySQL yang telah terpasang dengan baik di komputer Anda. MySQL dapat dapat diunduh (di-download) langsung dari situsnya di www.mysql.com. Ada 2 jenis produk yang ditawarkan: Community Edition dan Enterprise Edition. Perbedaannya, Community Edition menggunakan bendera Open Source dengan konsekwensi gratis diunduh, gratis digunakan, tapi dengan fasilitas dukungan yang terbatas dari produsernya. Sebaliknya, Enterprise Edition, ada biaya lisensi dan service maintenance yang harus dibayarkan kepada produsernya (per tahun atau sesuai kontrak perjanjian), dan Anda pun akan mendapatkan dukungan penuh dari produsernya. Untuk tutorial ini, kita akan menggunakan jenis Community Edition saja. Itu sudah mencukupi.

Anda disarankan untuk menggunakan versi MySQL yang terbaru dan telah dinyatakan stabil oleh produsernya. Biasanya ada kata recommended di samping versi MySQLnya. Pada bulan Maret 2010, MySQL versi terbaru adalah MySQL 5.1.45 (Community Edition). Nah sekarang silakan Anda unduh dulu (bisa di-download langsung melalui link http://dev.mysql.com) dan kemudian diinstall ke dalam komputer Anda. Silakan baca juga tutorial terkait di situs ini untuk menginstall MySQL.

Catatan:
Tutorial ini menggunakan MySQL versi 5.1.45. Anda dapat saja menggunakan MySQL versi sebelumnya maupun versi terkini. Pada dasarnya perintah-perintahnya masih tetap sama sehingga dapat mengikuti langkah-langkah tutorial .

Cara Menginstal MySQL 5.1.44

Pada tutorial ini, kita akan melakukan proses instalasi program MySQL versi 5.1.44 basis Windows yang dirilis per Pebruari 2010. Anda bisa saja, bahkan disarankan, untuk mengunduh (download) atau menggunakan MySQL rilis terbaru yang telah dikeluarkan dan dinyatakan oleh MySQL sebagai versi yang stabil (atau recommended). (Catatan: MySQL terbaru per Maret 2010 adalah MySQL 5.1.45). Mengunduh file rilis terbaru dapat dilakukan melalui situs resmi MySQL dengan alamat http://dev.mysql.com. Silakan Anda kunjungi untuk memeriksanya.

Bila Anda sudah masuk kedalam situs MySQL, carilah link untuk platform Windows (atau Windows Download).

Ada 3 paket yang disediakan:

• Windows Essential (x86)
  nama file: mysql-essential-5.1.44-win32.msi, ukuran file: 39,1 MB,
  --> merupakan paket standar minimal yang mencakupi program MySQL server dan telah dilengkapi dengan Configuration Wizard. Proses instalasi yang praktis dan dianjurkan untuk pemula, atau mereka yang baru berminat mencobanya.

• Windows MSI Installer (x86)
  nama file: mysql-5.1.44-win32.msi, ukuran file: 105,0 MB,
  --> merupakan paket lengkap MySQL server, dengan tambahan komponen lainnya seperti embedded server dan benchmark suite. Dilengkapi dengan Panduan Konfigurasi (Configuration Wizard), yang dijalankan dari file Setup.exe.

• Without Installer (unzip in C:\)
  nama file: mysql-noinstall-5.1.44-win32.zip, ukuran file: 113,5 MB
  --> Paket lengkap MySQL server, hanya saja proses instalasi dan konfigurasinya dilakukan secara manual. Direkomendasikan untuk mereka yang telah mahir.

Pilih yang mana dari 3 paket di atas? Kalau untuk sekedar coba-coba saja dan kapasitas harddisk Anda terbatas, paket Windows Essential sudah cukup memadai untuk latihan. Kalo ingin lebih serius lagi dan lebih lengkap lagi, maka pilih saja paket Windows MSI Installer (x86). Paket kedua ini sudah dilengkapi dengan fasilitas instalasi yang cukup mudah diikuti. Sedangkan paket ketiga kelengkapan modulnya sama dengan paket kedua, hanya saja tidak dilengkapi dengan fasilitas instalasi. Paket ketiga ini dalam format zip, yang harus di-uncompress atau di un-zip dulu sebelum dapat melakukan proses instalasi.

Saya merekomendasikan untuk menggunakan paket yang kedua (Windows MSI Installer (x86)) pada contoh tutorial ini.... :). Bagi mereka yang telah didukung dengan komputer berprosesor inti ganda (AMD 64 X2) atau Intel Core2 Duo, bisa menggunakan paket yang Windows x64. Silakan Anda unduh dahulu file MySQLnya sesuai dengan yang dibutuhkan.

Proses instalasi MySQL basis Windows cukup mudah dilakukan. Anda hanya perlu untuk mengikuti langkah-langkah di bawah ini dan kemudian dapat segera menjalankan MySQL. Mari kita mulai:

1. Cari dan pilihlah file mysql-5.1.44-win32.msi dari folder dimana Anda menyimpan hasil unduh tersebut.

2. Jalankan file tersebut dengan mengklik ganda atau menekan tombol ENTER. Tunggu sebentar hingga tampil layar selamat datang pada proses instalasi, dan kemudian dapat dilanjutkan dengan menekan tombol Next.

3. Berikutnya berupa pilihan jenis instalasi apa yang akan digunakan. Ada 3 buah pilihan yang dapat Anda pilih yaitu, Typical, Complete dan Custom.
   Pilihan Typical merupakan pilihan yang paling mudah dan disarankan bagi sebagian besar pemakai. Pilihan Complete akan menginstal semua fitur yang tersedia. Sedangkan pilihan Custom hanya disarankan bagi mereka yang telah sangat memahami sistem MySQL. Pada contoh ini kita akan menggunakan instalasi jenis Typical, dan lanjutkan dengan meng-klik tombol Next.

4. Tampilan berikutnya menyatakan program siap untuk diinstal ke dalam folder C:\Program Files\MySQL\MySQL Server 5.1\. Pada pilihan instalasi Typical, kita tidak bisa mengganti folder tujuan instalasi sesuai kebutuhan kita. Bila Anda berniat untuk mengganti folder tujuan, maka gunakanlah pilihan instalasi Custom pada langkah (3) di atas. Untuk melanjutkan klik tombol Install.

5. Tunggulah sebentar hingga proses persiapan instalasi selesai.

6. Berikutnya MySQL akan menampilkan informasi produk tentang MySQL Enterprise. Silakan dilanjutkan dengan menekan tombol Next.

7. Masih dengan tampilan informasi produk tentang MySQL Enterprise. Silakan dilanjutkan dengan menekan tombol Next.

8. Tunggu beberapa saat hingga proses instalasi selesai. Setelah itu dilanjutkan dengan proses konfigurasi MySQL (Configure the MySQL Server now) dengan menekan tombol Finish.

9. Tampilan berikutnya selamat datang pada proses konfigurasi MySQL. Lanjutkan dengan menekan tombol Next.

10. Ada dua pilihan jenis konfigurasi, Detailed Configuration dan Standard Configuration. Pada contoh ini kita memilih Standard Configuration. Klik tombol Next untuk melanjutkan.

11. Tampilan berikutnya, disarankan untuk mengaktifkan pilihan Install as Windows Service dan juga Launch the MySQL Server automatically . Dengan pilihan ini maka setiap komputer Anda dinyalakan, secara otomatis program MySQL server akan dijalankan. Begitupun sebaiknya aktifkan pilihan Include Bin Directory in Windows Path. Program-program MySQL biasanya disimpan di dalam directory C:\Program Files\MySQL\MySQL Server 5.1\Bin. Dengan mengaktifkan pilihan ini, maka Anda dapat menjalankan atau memanggil program MySQL langsung dari DOS Prompt atau Command Prompt.

12. Tampilan berikutnya, mengenai sistem keamanan server MySQL. Sebaiknya Anda memberikan password khusus sebagai Root, dan tidak memberikan peluang kepada orang lain untuk memasuki sistem anda tanpa password. Maka aktifkan pilihan Modify Security Setting dan masukkan password Root Anda dengan seksama. Tetapi, matikan pilihan Create An Anonymous Account. Dengan demikian tidak sembarangan orang dapat masuk menggunakan MySQL server Anda. Satu hal lagi, disarankan mematikan pilihan Enable Root access from remote machines. Ini untuk mencegah celah-celah yang bisa dimasuki oleh orang-orang yang tidak bertanggungjawab menyelinap ke dalam sistem kita. Lanjutkan dengan menekan tombol Next.

13. Bila Anda telah yakin untuk melanjutkan, klik tombol Execute.

14. Tunggulah sejenak hingga proses konigurasi selesai. Kemudian klik tombol Finish untuk menuntaskan proses konfigurasi sistem MySQL.

15. Untuk menguji proses konfigurasi, jalankan program MySQL Server melalui menu Start > Programs > MySQL > MySQL Server 5.1 > MySQL Command Line Client.

16. Bila berhasil, sebuah jendela DOS/Command prompt akan tampil. Pada baris Enter password: ketikkan password yang telah Anda buat pada langkah (12) di atas.

17. Kita coba untuk menjalan sebuah perintah MySQL, misal select version() untuk melihat versi MySQL yang baru saja kita install:

18. Untuk keluar dari sistem MySQL, ketikkan perintah “\q ;” atau klik pada tombol “X”

19. Hingga tahapan ini proses instalasi dan konfigurasi MySQL 5.1.x telah berhasil Anda lakukan. Cukup mudah bukan?

Bahan Dasar Website

Lama sudah saya tidak memposting sebuah tulisan dalam blog ini, kini saya ingin sekedar sharring bahwa bahan baku membuat website itu tak ubahnya kita membuat sebuah kue ataupun masakan, waaah, puasa-puasa gini bicara masakan perut rasanya lapar, Ya udah kita langsung buat resepnya aja sekalian.

Pertama : Saya mempersiapkan desain yang siap pake, jadi sekali desain kalo bisa langsung dua atau tiga, jadi kalo mau buat themes yang lain gak harus desain lagi, desain lagi, khaaan capek.

Kedua : Saya mempersiapkan layout plus coding dasar, sebagai bahan dasar utama membuat website.

Ketiga : Saya mulai beraksi melakukan trial, kalo layout ok, desain ok, baru di isi bahan coding yang lainnya.

Keempat : Tutorial lengkapnya bisa anda download disini

Dasar Membuat Website

Dalam membuat sebuah website ada beberapa hal yang perlu Anda persiapkan sebelum Anda memulainya.

Pertama, Anda bisa mengajukan sebuah pertanyaan kepada diri Anda sendiri yaitu “Apa tujuan Saya buat website?” dengan menjawab pertanyaan tersebut dapat mengarahkan pikiran Anda untuk menentukan dan menjawab pertanyaan selanjutnya yaitu, “Website seperti apa yang akan saya buat untuk mencapai tujuan tersebut dan bagaimana cara membuat websitenya.”

Mengapa dimulai dengan mengajukan pertanyaan tersebut? Karena diharapkan nantinya website desain yang kita buat sesuai dengan yang kita inginkan dan bisa membawa kita mencapai tujuan yang kita inginkan dalam membuat website. Jangan sampai website sudah selesai Anda buat tetapi website desain yang Anda buat tidak sesuai dan tidak bisa menjadi media atau sarana untuk mencapai tujuan Anda.

Perlu Anda ketahui, jenis website itu bermacam-macam, ada yang hanya satu halaman sederhana saja seperti website ini, ada yang memuat beberapa halaman seperti website perusahaan, ada yang menggunakan sistem blog dan sering disebut juga blog atau weblog (website blog), ada yang menggunakan sistem CMS (Content Management System) seperti joomla, ada yang berupa forum diskusi, ada yang berupa website iklan baris, ada yang berupa website toko online dan ada yang lebih kompleks lagi seperti website komunitas friendster.

Anda perlu memulainya dengan menjawab pertanyaan-pertanyaan tersebut sebelum Anda membuat website. Sehingga nanti Anda bisa memutuskan website seperti apa yang paling cocok dan sesuai untuk mencapai tujuan Anda. Karena masing-masing jenis website yang saya sampaikan diatas memiliki fungsi yang berbeda-beda.

Contoh bila Anda ingin menjual berbagai macam produk, Anda membuat website toko online; bila Anda ingin menjual satu jenis produk saja bisa dengan satu halaman sederhana saja atau lengkap dengan menggunakan sistem pemesanannya; bila Anda ingin membuat desain situs website portal Anda bisa menggunakan Joomla; bila Anda ingin membangun branding dan mempublikasikan artikel bisa menggunakan blog; dan lain-lainnya. Kalau ingin membuat desain situs, Anda bisa otodidak atau mengikuti kursus desain website. Itu terserah Anda.Semoga tulisan ini bermanfaat bagi Anda.