Belajar Web Programming

Pada artikel Membuat Website Sederhana Dengan Dreamweaver - Lesson 1 kita telah bersama-sama membuat kerangka dasar dari website yang akan kita buat. Dan pada artikel kali ini kita membuat header, footer dan sidebar untuk website kita ini. Dan tools yang akan kita gunakan juga masih sama yaitu dreamweaver dan tentunya anda juga sudah membuat site untuk projek anda bukan. Jika semuanya sudah mari kita lanjutkan pekerjaan kita hehehe.

Untuk memulai pekerjaan kita, kali ini akan saya mulai dari design header, header sendiri terdapat pada bagian atas halaman website. Biasanya header berisi logo utama dari si website atau perusahaan yang mempunyai website tersebut. Anda bisa mendesain sendiri logo header anda dengan aplikasi pengolah gambar yang anda punya dan yang anda bisa tentunya. Buatlah gambar berukuran 900x300px untuk header anda dan desain sebagus mungkin . Simpan dengan nama "banner.png" setelah itu masukan desain header anda ke dalam folder "project2" yang ada di dalam htdocs. Namun akan lebih baik jika diletakkan didalam sebuah folder khusus gambar. Jadi buat dulu sebuah folder didalam folder "project2" dan beri nama "img". 

Folder "img" ini dibuat untuk menyimpan file-file berjenis gambar untuk website kita agar tatanan file di dalam web kita lebih terstruktur dan mudah untuk dimaintenance. Langkah selanjutnya adalah membuat file html baru dan beri nama "header.php". Sementara itu, pada index.html ubah namanya menjadi index.php, kenapa? karena kita akan memasukan koding php di dalam file index kita. Kembali ke header.php, buka code header.php kemudian hapus semua kode/script yang ada. Jika sudah dihapus, kembalikan ke design mode. 

Lihat pada sidebar files explorer di dreamweaver, apakah sudah ada folder image yang kita buat tadi? Jika belum klik tombol refresh dan kembali lihat , disana akan muncul tambahan folder "img". Tekan tombol (+) dan muncul "banner.png". Tarik banner.png dari fils explorer ke dalam header.php dan lepaskan, maka akan muncul sebuah gambar di header.php. Simpan header.php dengan cara "CTRL+S". Dengan demikian kita telah selesai membuat header untuk web kita.

Selanjutnya kita akan membuat bagian footer, caranya hampir sama dengan membuat header. buat file baru dan save as footer.php. Buka mode Code dan hapus semua script didalamnya dan kembali ke mode design. Pada mode desain isikan dengan tulisan "Copyrght@2015.Belajar Web Programming" atau buatlah sesuai dengan keinginan anda. Setelah itu simpan file dan kemudian kita akan kembali menggarap halaman index.php.

Buka halaman index.php dan disana kita telah mempunyai tabel dengan kolom bertuliskan header, menu, footer, sidebar dan konten. Blok tulisan header yang ada pada index.php , pada bagian properties pada bagian bawah dreamweaver anda akan menemukan Horz dan Vert, pada bagian combo horz pilih center, ini membuat konten yang ada pada kolom header menjadi ditengah. Lakukan juga pada kolom menu dan footer. Sehungga kodingnya enjadi seperti ini:

Jika sudah, kita akan memasukan header.php dan footer.php ke dalam index php. Caranya :

Coba perhatikan pada penulisan script header dan footer , bagian yang berbeda adalah nama dari file yang akan kita selipkan pada halaman index. Pada bagian header yang akan kita selipkan adalah header.php sehingga penulisannya <?php include('header.php') ?> dan pada bagian footer kita akan menyelipkan footer,php sehingga ditulis <?php include('footer.php') ?>. Jika sudah maka kode/scriptnya akan menjadi seperti ini.

dan tampilan dalam browser menjadi seperti gambar dibawah ini:

Belajar Web Programming sebelumnya kita telah menyelesaikan project 1 yaitu membuat website dengan adobe potoshop dan kali ini kita akan mencoba project selaljutnya yaitu Project 2 dengan tema Membuat Website Sederhana Dengan Dreamweaver. Cara yang kita gunakan pada project kali ini sama sekali berbeda dengan project sebelumnya, dengn cara ini hampir semua proses pembuatan web akan menggunakan text editor tools dreamweaver kecuali untuk mendesain logo atau gambar kita tetap menggunakan adobe potoshop. Target akhir dari project ini adalah pembaca akan belajar sedikit tentang penggunaan PHP dalam sebuah website, selain itu disini kita akan lebih banyak bermain koding dari pada project sebelumnya. Dan pada artikel kali ini kita akan membuat kerangka websitenya terlebih dahulu dan hasilnya akan seperti gambar dibawah ini.

Untuk membuat kerangka seperti gambar di atas, caranya cukup mudah dan tidak membutuhkan waktu lama. Pertama, buat dulu sebuah project didalam folder htdocs dengan nama "project2". Jika sudah , langsung saja buka adobe dreamweaver dan disini saya menggunakan adobe dreamweaver cs6. Tunggu hingga loading  pada dreamweaver benar-benar telah selesai, setelah itu agar lebih mudah kita buat dulu sebuah site baru, untuk membuat site pada dreamweaver dapat dibaca di sini. 

Jika site sudah dibuat , kemudian buat sebuah file baru didalam folder project2 lalu simpan dengan nama index.html. Jika sudah dibuat, secara otomatis index.html akan terbuka dalam lembar kerja dreamweaver. Jika sudah siap , pilih design pada panel bar dreamweaver. Setelah itu, buat tabel dengan cara klik pada menu insert kemudian klik Table atau anda juga dapat melakukannya dengan cara lain yaitu klik CTRL+ALT+T secara bersamaan. Kemudian akan muncul form untuk membuat table, buat sebuah tabel dengan 4rows, 2collums, table width 100 dan gunakan percent, border tickhnes diisi dengan angka 0 . Setelah itu klik OK, maka akan muncul tabel kosong dengan  4 baris dan 2 kolom. 

Blok kolom pada baris 1, 2 dan 4 (lakukan satu persatu). Blok baris pertama dahulu (kolom1+kolom2) kemudian pada panel properties pada bagian bawah kita pilih tombol "merge selected cells using spans" dan kolom 1 dan 2 pada baris pertama akan menjadi 1. Lakukan pada baris 2 dan baris 4 secara berurutan. 

Setelah usai, tabel yang kita buat tadi akan membentuk pola sebuah website (lihat ganbar paling atas). Kita punya kolom header pada bagian atas tabel dan tepat dibawahnya terdapat kolom menu . Dibawah kolom menu sebelah kanan ada kolom sidebar dan kolom konten pada sisi kirinya. Lanjut ke kolom paling bawah ada kolom footer , mirip sebuah website kan! Nah tabel inilah yang nantinya akan kita kembangkan menjadi sebuah websiteyang lebih komplek. Makanya ikuti terus projeknya karena selanjutnya kita akan masuk ke leson 2 project ini yaitu membuat header , menu, sidebar, konten dan footer .