Selasa, 10 Februari 2015

MAKALAH TENTANG DREAMWEAVER



PENGENALAN APLIKASI ATAU SOFTWARE DREAMWEAVER


1d1.jpg
1.    Pengertian Dreamweaver
Dreamweaver adalah program untuk membuat, mendesain dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML.
Insert Bar
Insert bar merupakan tempat semua perangkat kerja (tombol) tang digunakan untuk membuat halaman web. Insert bar mempunyai dua jenis tampilan, yaitu tampilan sebagai menu dan tampilan sebagai tab.
·          Open a Recent Item
Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah kita buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain.
·          Create New
Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver. Ada banyak pilihan, diantaranya HTML, ColdFusion, PHP, ASP, JavaScript, CSS.
·          Create From Samples
Pada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver.
·          Tab Common
Berisi semua tombol yang sering atau umum digunakan untuk membuat halaman web. Tombol yang ada di Tab Common antara lain Hyperlink, Email Link, Named Anchor, Table, Images.
·          Tab Layout
Tab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout.
o    Untuk Standard view tampilan dokumen seperti biasa (berupa garis-garis tabel)
o    Untuk Expanded view menampilkan border tabel yang direnggangkan sehingga semua rancangan tabel dapat dilihat dengan jelas baik itu baris dan kolomnya.
o    Untuk Layout view rancangan tabel ditampilkan sebagai kotak-kotak yang dapat di-drag, dan diatur ulang ukurannya dengan mudah.
·          Tab Form
Tab form digunakan untuk membuat elemen dalam form, misalnya : textarea, textfield, radio button, checkbox
v  Elemen-Elemen Form
·          Textfield
·         Berupa kolom isian satu baris yang digunakan untuk memasukkan data
·          Password Field
·         Prinsip kerjanya sama dengan textfield, hanya saja karakter yang diinput akan diubah mwnjadi ******
·          Textarea
Berupa kolom isian yang bisa lebih dari 1 baris
·          Checkbox
Kotak pilihan yang bisa diberi tanda “cek” dan bisa dipilih lebih dari 1
·          Radio Button
Lingkaran pilihan yang bisa diberi tanda “cek” dan hanya bisa dipilih 1 saja
·          List / Menu
Digunakan untuk membuat daftar pilihan menu yang bisa dipilih oleh user
·          File Field
Digunakan untuk memilih file pada saat proses upload
·          Button
o  Submit Button
Digunakan untuk mengirimkan data yang diinputkan
o  Reset Button
Digunakan untuk mengembalikan isian form seperti semula (kosong)
o  Button
·          Tab Text
Tab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline, h1.
·          Tab HTML
Tab HTML digunakan untuk membuat garis  horizontal, menambahkan meta tag dalam tag <head>, dan frame.
·          Tab Application
Tab application digunakan jika aplikasi kita sudah berhubungan dengan suatu bahasa pemrograman dan sebuah database.
·          Tab Flash elements
Tab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita  buat.
·          Code View
Code View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat.
·          Panel Properties
Panel properties merupakan panel yang digunakan untuk melihat dan mengubah property dari semua objek yang ada di area kerja. Masing-masing objek mempunyai property yang berbeda. Untuk melihat property dari objek yang diinginkan, seleksi dulu objek tersebut.
·          Design View
Design View digunakan untuk melihat tampilan web dari kode HTML yang kita buat.

 

 

 

 

 

 

Pengertian Adobe Dreamweaver



1293625813_11.png
        Adobe Dreamweaver merupakan program penyunting halaman web dari Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver dari Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang lengkap serta kemudahan dalam penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Kemudian setelah dibeli oleh Adobe Systems berkembang ke Versi selanjutnya yakni versi 9 (CS3) versi 10 yang ada dalam Adobe Creative Suite 4 (CS4) dan versi terbarunya yaitu CS5.
Sebagai editor web yang handal, Adobe Dreamweaver tentunya dilengkapi dengan kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam sebuah situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, termasuk validasi tag-tag HTML dan CSS yang tidak sesuai dengan pedoman secara otomatis serta perkiraan waktu download pada sebuah halaman web.
Adobe Dreamweaver memiliki banyak tool-tool yang memudahkan seorang web design untuk mengedit dan membuat kode-kode dalam halaman web. Fasilitas yang terdapat didalamnya antara lain: Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, HTML, CSS, TEMPLATING dan dokumen teks lain secara langsung. Teknologi Roundtrip HTML yang dimilikinya mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML tanpa susah payah.
Dengan fitur yang lengkap, kemudahan penggunaan, dukungan extention dan Plug-In yang banyak, Adobe Dreamweaver dapat membantu seorang web design bekerja lebih cepat dan efisien tanpa kesulitan yang berarti, bahkan untuk seorang pemula sekalipun yang belum banyak mengenal seputar coding HTML dan CSS.
Fungsi Dreamweaver

Seorang web desainer pasti memerlukan suatu software yang dapat menolongnya dalam mendesain dan membangun suatu situs web. Software semacam ini biasanya disebut  web authoring software, dan salah satu software dalam jenis ini adalah Macromedia Dreamweaver.

Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain
secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya.

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.


Membuat situs sederhana dengan Dreamweaver*)
Oleh:
Sri Andayani
Jurusan Pendidikan Matematika, FMIPA UNY
Dreamweaver merupakan salah satu perangkat lunak bantu dalam kelompok
Macromedia yang digunakan untuk mengembangkan sebuah halaman web.
Langkah-langkah untuk membuat situs sederhana sebagai berikut:
1. Membuat folder utama yang akan diisi dengan semua file yang dibutuhkan
untuk membuat situs
2. Mendefinisikan situs
3. Membuat file index.html dan file-file lain yang dibutuhkan untuk hyperlink
4. Mempublish situs
Berikut ini akan ditunjukkan langkah-langkah membuat situs sederhana dengan
menggunakan bahan-bahan (file gambar, video, teks) yang telah disediakan oleh
Macromedia Dreamweaver 8 dalam folder cafe_townsend.
1. Membuat folder utama
Saat membuat situs lokal, semua file yang dibutuhkan (gambar, text, video dll) harus
diletakkan di sebuah folder lokal (folder utama untuk situs tsb).
1. Buatlah folder baru dengan nama local_sites di drive E.
2. Buka C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\
cafe_townsend\.
3. Copy folder cafe_townsend ke dalam folder local_sites.
Folder cafe_townsend adalah folder yang akan digunakan sebagai folder utama
(main folder) untuk situs lokal yang akan dibuat.
Gambar 1. Folder local_site berisi folder café_townsend
*) Disampaikan pada Pelatihan Pembuatan Sumber Belajar Matematika Berbasis Web dengan
Menggunakan Perangkat Lunak Macromedia Dreamweaver bagi Guru Sekolah Menengah di DIY,
Jurusan Pendidikan Matematika FMIPA UNY, 8-9 Agustus 208
2
2. Mendefinisikan situs
Setelah menyiapkan folder tempat menyimpan semua file yang akan digunakan
untuk membuat situs, langkah selanjutnya adalah mendefinisikan situs yang akan
dibuat.
Untuk mendefinisikan situs, mulailah dengan membuka program macromedia
Dreamweaver 8, melalui Start 􀃆 All Programs 􀃆 Macromedia 􀃆 Macromedia
Dreamweaver 8.
1. Pilih menu Site 􀃆 Manage Sites. Muncul kotak dialog Manage Sites, seperti
gambar 2.

1. Klik Tombol New, pilih site . Kotak Site Definition akan tampil, seperti tampak
dalam gambar 3.
Gambar 3. Kotak dialog untuk mendefinisikan situs
2. Klik tabulasi Advanced dan pilih Local Info dari daftar Category
3
3. Pada kotak Site Name, ketikkan Cafe Townsend sebagai nama situs
4. Pada kotak Local Root Folder, klik tombol browse untuk menentukan folder
cafe_townsend yang berada dalam folder local_sites, sehingga berisi
E:\local_site\cafe_townsend\
5. Pada kotak Default Images Folder, tentukan folder yang berisi images, yaitu
E:\local_site\cafe_townsend\images\
6. Klik OK.
7. Klik Done untuk menutup kotak dialog Manage Sites.

3. Membuat file index.html
Setelah mendefinisikan site, langkah selanjutnya adalah membuat file index.html,
yang merupakan file utama dalam membangun sebuah halaman web.
1. Pilih menu File 􀃆 New.
Gambar 4. Kotak dialog New Document
2. Pada tabulasi General, pilih Basic Page pada daftar Category, pilih HTML pada
daftar Basic Page, dan klik tombol Create.
3. Pilih File 􀃆 Save As. Pada kotak save in, tentukan folder untuk menyimpan
berada pada jalur E:\local_site\cafe_townsend\
4. Simpan dengan nama index.html. Klik tombol Save.
5. Klik pada kotak Document Title text di bagian atas jendela, ketikkan Cafe
Townsend (lihat gambar 5)
4
Gambar 5. Kotak Document Title diisi dengan teks ’Cafe Townsend’


6. Simpan kembali file index.html dengan Klik tombol Save.
File index.html akan diisi dengan gambar, teks, animasi, dan video seperti tampak
dalam gambar 6.
Gambar 6. Rancangan isi halaman index.html
Untuk membuat halaman tersebut, langkah-langkah yang dilakukan adalah:
a. Membuat tabel dan mengatur propertinya
b. Memasukkan gambar
c. Memasukkan animasi flash
d. Memasukkan video
e. Memasukkan teks
a. Membuat tabel dan mengatur propertinya
1. Klik di pojok kiri atas halaman index.html untuk meletakkan insertion point
2. Pilih Insert 􀃆 Table. Pada kotak dialog Insert Table, masukkan data-data
sebagai berikut:
o Ketikkan 3 pada kotak Rows dan 1 pada kotak Column
o Ketikkan 700 pada kotak Table Width.
o Pilih Pixels pada menu pop-up Table Width.
o Ketikkan 0 pada kotak Border Thickness, Cell Padding dan Cell Spacing
5
Gambar 7. Pengaturan pada kotak dialog Insert Table
3. Klik OK.
Pada halaman index.html akan muncul tabel 3 baris 1 kolom yang tidak memiliki
border, seperti ditunjukkan dalam gambar 8.
Gambar 8. Hasil pembuatan tabel pertama
4. Klik di sebelah kanan tabel
5. Klik Insert 􀃆 Table untuk memasukkan tabel kedua. Atur isian pada kotak
dialog sebagai berikut.
o Ketikkan 1 pada kotak Rows dan 3 pada kotak Column
o Ketikkan 700 pada kotak Table Width.
o Pilih Pixels pada menu pop-up Table Width.
o Ketikkan 0 pada kotak Border Thickness, Cell Padding dan Cell Spacing
6. Klik OK.
7. Klik di sebelah kanan tabel
8. Klik Insert 􀃆 Table untuk memasukkan tabel ketiga. Atur isian pada kotak
dialog sebagai berikut.
o Ketikkan 1 pada kotak Rows dan 1 pada kotak Column
o Ketikkan 700 pada kotak Table Width.
o Pilih Pixels pada menu pop-up Table Width.
o Ketikkan 0 pada kotak Border Thickness, Cell Padding dan Cell Spacing
9. Klik OK.
6
Ketiga tabel yang telah dimasukkan akan tampak seperti gambar 9.
Gambar 9.  Hasil pembuatan tabel
Mengatur properti tabel
1. Pilih View -> Table Mode -> Expanded Table Mode.
Saat muncul kotak dialog Getting Started with Expanded Tables Mode, klik OK.
2. Klik pada baris pertama tabel pertama
3. Pada Property inspector (Window > Properties), ketikkan 90 pada kotak Cell
Height (H) dan tekan enter.
Gambar 10 isian Cell Height pada property inspector
4. Klik pada baris kedua
5. Pada Property inspector, isikan 166 pada kotak Cell Height (H), tekan Enter
6. Klik pada baris ketiga
7. Pada Property inspector, isikan 24 pada kotak Cell Height, tekan enter
8. Klik kolom pertama tabel kedua.
9. Pada Property inspector, isikan 140 pada Cell Width (W), tekan Enter
10. Klik kolom kedua tabel kedua.
11. Pada Property inspector, isikan 230 pada Cell Width, tekan Enter
12. Tentukan lebar (width) kolom ketiga menjadi 330.
13. klik pada baris terkahir
14. Pada Property inspector, isikan 24 pada kotak Cell Height dan tekan Enter
Layout tabel akan menjadi seperti gambar berikut:
7
Gambar 11. Layout tabel setelah pengaturan propertinya
15. Klik Exit link Expanded Tables Mode di bagian atas jendela Document
16. Simpan kembali halaman index.html.
Memasukkan image placeholder
Image placeholder adalah grafik yang digunakan sampai dengan grafik atau gambar
akhir siap digunakan dalam halaman web. Image placeholder sangat bermanfaat dalam
menyiapkan tata letak halaman web yang berisi gambar, sebelum gambar yang akan
digunakan benar-benar siap.
1. Klik dalam baris pertama tabel pertama
2. Pilih Insert > Image Objects > Image Placeholder.
3. Pada kotak Image Placeholder, isikan berikut ini::
o ketik banner_graphic pada kotak Name.
o Isikan 700 pada kotak Width dan 90 pada kotak Height.
o Klik kotak color box dan pilih warna pada color picker. Pilih reddish
brown (#993300).
4. Klik OK.
5. Simpan halaman web tersebut, File 􀃆 save.
Memberi warna pada halaman
1. Klik di dalam sel pertama pada tabel kedua yang teridiri dari 3 kolom
2. Klik tag <td> di bagian kiri bawah untuk memilih sel tersebut.
3. Pada Property inspector (Window > Properties), klik di dalam kotak Background
Color .
The text box is located directly next to the Background Color (Bg) color box.
4. Pada kotak Background Color, isikan bilangan hexadecimal #993300 dan tekan
Enter. Maka warna sel akan menjadi coklat kemerahan
8
Gambar 12.  Isian Background pada property inspector
5. Klik pada sel kedua
6. Klik <td>
7. Pada Property inspector, klik pada kotak Background Color, isikan #F7EEDF,
dan tekan Enter.
8. Atur warna sel ketiga sama dengan sel kedua
9. Klik di luar sel tersebut
Sekarang warna background halaman akan diubah melalui page properties.
1. Pilih Modify -> Page Properties.
2. Pada kategori Appearance dari Page Properties, klik Background Color dan pilih
warna hitam.
Gambar 13.  Pengaturan background color pada page properties
3. Klik OK.
4. Simpan kembali halaman web tersebut.
Mengisi image placeholder
1. Dobel-klik image placeholder, banner_graphic, pada bagian atas halaman.
2. Pada kotak Select Image Source, cari folder images yang berada dalam folder
cafe_townsend.
9
3. Pilih file banner_graphic.jpg dan klik OK.
Gambar 14.  Pemilihan file banner_graphic.jpg
Dreamweaver akan mengganti image placeholder dengan gambar seperti dalam
gambar 15.
Gambar 15.  Gambar yang mengisi image placeholder
4. Simpan (File -> Save).
Selain menggunakan image placeholder, sebuah gambar dapat langsung dimasukkan ke
halaman web dengan menggunakan menu insert.
1. Klik pada kolom kedua, tabel kedua
2. Pada Property inspector (Window > Properties), pilih Center pada pop-up menu
Horz, dan pilih Top pop-up menu Vert.
Gambar 16.  Pengaturan perataan kolom kedua tabel kedua
3. Tekan tomobl enter sekali untuk memberi ruang kosong di bagian atas sel
4. Pilih insert 􀃆 images.
5. Pada kotak Select Image Source, cari folder images yang berada dalam folder
cafe_townsend.
6. Pilih file street_sign.jpg dan klik OK
10
Memasukkan dan menjalankan file Flash
File Flash yang akan dimasukkan adalah flexible messaging area--or file FMA—
1. Klik di baris kedua pada tabel pertama
2. Pada Property inspector (Window > Properties), pilih Center pada menu pop-up
Horz dan pilih Middle pada menu pop-up Vert.
Gambar 17.  Pengaturan perataan baris kedua tabel pertama
3. Pilih Insert -> Media -> Flash.
4. Pada kotak Select File, pilih file flash_fma.swf, dan klik OK
Gambar 18.  Pemilihan file flash_fma.swf
5. Saat kotak Object Tag Accessibility Attributes muncul, klik OK.
6. Pada Property inspector (Window > Properties), klik Play.
Gambar 19.  Klik tombol Play pada property inspector

Dreamweaver akan menjalankan file Flash tersebut, tampilannya seperti
ditunjukkan dalam gambar 20.
11
Gambar 20. Tampilan file flash_fma.swf
7. Pada Property inspector, klik Stop untuk berhenti
8. Simpan kembali file index.html.

Memasukkan file Flash Video
1. Klik di atas gambar street_sign.jpg dalam kolom kedua pada tabel kedua
Gambar 21.  Insertion poin berada pada kolom kedua tabel kedua
2. Pilih Insert -> Media -> Flash Video.
3. Pada kotak Insert Flash Video, pilih Progressive Download Video dari pop-up
menu Video type.
4. Pada kotak URL text box, klik browse untuk menentukan folder yang berisi file
cafe_townsend_home.flv,
5. Pilih Halo Skin 2 pada pop-up menu Skin.
6. Pada kotak Width isi 180 dan pada kotak Height isikan 135.
Gambar 22.  Pengaturan isi kotak dialog Insert Flash Video
12
7. Klik OK
8. Simpan kembali index.html.
Memasukkan body text
1. Pada panel Files, dobel klik file sample_text.txt untuk membukanya. Cara lain
adalah memilih menu File 􀃆 Open , cari file tersebut (di folder cafe_townsend)
Gambar 23. Isi file sample_text.txt
2. Tekan tombol Control+A untuk memilih seluruh teks. Pilih Edit -> Copy untuk
mengcopy teks.
3. Tutup file sample_text.txt
4. Pada halaman index.html, klik di kolom ketiga tabel kedua (tabel yang berisi 3
kolom)
5. Pilih Edit -> Paste.
Gambar 24.  Tampilan halaman web setelah diisi body text
6. Pada Property inspector (Window > Properties), pilih Top dari pop-up menu
Vert.
7. Simpan kembali index.html
13
Memasukkan teks navigasi
Teks navigasi adalah teks yang memuat link, yang akan mengarahkan ke dokumen lain.
1. klik pada kolom pertama pada tabel yang berisi 3 kolom
2. ketikkan kata Cuisine.
3. tekan spasi dan ketikkan kata Chef Ipsum.
4. ulangi langkah tersebut untuk kata-kata berikut: Articles, Special Events,
Location, Menu, Contact Us.
Jangan menekan Enter pada saat mengetik kata-kata tersebut. Gunakan spasi
untuk memisahkan antar kata, teks akan ditempatkan secara otomatis sesuai
dengan lebar tabel.
5. Klik tag <td> di bagian kiri bawah
Gambar 25.  Tag selector
6. Pada Property inspector (Window > Properties), pilih Top dari pop-up menu
Vert.
7. Simpan.
Membuat link
Sebuah link adalah referensi pada sebuah halaman yang merujuk pada dokumen lain.
Langkah-langkah membuat link adalah sebagai berikut:
1. Pilih kata Cuisine
2. Pada Property inspector (Window > Properties), klik ikon folder di dekat kotak
Link.
Gambar 26. Klik ikon folder untuk menentukan file
3. Pada kotak Select File, cari file menu.html, klik OK
4. Hasilnya, kata Cuisine akan bergaris bawah dan berwarna biru yang
mengindikasikan teks tersebut adalah link.
5. Ulangi langkah-langkah 1- 3 untuk kata-kata Chef Ipsum, Articles, Special
Events, Location, Menu, dan Contact Us.
6. Simpan kembali file index.html.
Mem-preview halaman pada web browser
1. Pastikan file index.html sudah terbuka
2. Tekan tombol F12 pada keyboard
Maka akan ditampilkan halaman web pada browser Mozilla seperti berikut.

Cara Menginstall Macromedia Dreamweaver

Nah…. Di kesempatan ini okelahtutorial.blogspot.com akan menjelaskan bagaimana menginstal software Macromedia Dreamweaver  pada computer kita…

Langkah – Langkahnya sebagai berikut:

1.       Langkah pertama yaitu membuka master Macromedia Dreamweaver  , klik 2 (dua) kali pada SETUPnya, tunggu sebentar, sehingga muncul gambar seperti ini, lalu tekan Next

index.png
2.       Pilih “ I accept the ….. “ , lalu tekan Next

index.png



3.       Pilih tempat untuk menyimpan file, lalu tekan Next

index.png
4.       Klik Next lagi

index.png
5.       Klik INSTALL

index.png

6.       Tunggulah sebentar
index.png

7.       Anda telah berhasil menginstalnya, klik Finish

index.png





8.       Buka Macromedia Dreamweaver  tadi, jika harus masukan serial number masukan lah dengan membuka dimana tempat serial number berada,, selamat mencoba


index.png



Cara Membuat Website menggunakan Dreamweaver


Cara membuat website menggunakan Dreamweaver ternyata mudah dipelajari lho, yuk kita lihat tutorial nya.
Setelah semua bahan untuk design dan content web sudah siap, langkah membuat website berikutnya adalah menerjemahkan design yang telah kita buat kedalam bahasa pemrograman. Ada 2 cara untuk membuat script website, yaitu :
§  Dengan cara Instant, Instan disini kita bisa dengan mudah menerjemahkan design kita kedalam bahasa pemrograman dengan bantuan software – software semacam dreamweaver, frontpage dan lain – lain.
§  Dengan cara manual, Apabila anda lebih prefer membangun website anda secara manual, maka baca ulasan berikut ini: untuk text Anda harus merubahnya ke dalam file yang berformat HTML (umumnya berakhiran .htm atau .html) agar dapat dibaca oleh program Internet Explorer/Firefox (browser Anda). Apabila Anda belum mempelajari bahasa HTML, CSS, Javascript dan lain –lain anda bisa baca – baca artikel yang sudah kami sediakan di web prothelon.com. Untuk pembuatan web secara manual hanya membutuhkan notepad atau notepad++
Nah, untuk kali ini yang akan kita bahas adalah cara membuat website menggunakan dreamweaver. Adobe Dreamweaver memberi kemudahan untuk merancang dan menata halaman demi halaman website, dengan menyediakan berbagai Tools yang siap pakai. Sangat mudah untuk menyisipkan elemen-elemen apapun yang kita perlukan, seperti Text, Gambar, atau Media lain sekalipun (suara, film, animasi flash, dll.)
Dengan cara ini kita bisa membuat halaman website yang canggih dan dilengkapi dengan berbagai media masa kini, tanpa harus tahu sedikitpun pemrograman di dalamnya. Adobe Dreamweaver telah menyiapkan berbagai perangkat siap pakai dan akan menuliskan kode-kode yang diperlukan ketika kita menggunakan perangkat tersebut.

Nah, berikut ini kita akan latihan cara membuat website sederhana dengan bantuan macromedia dreamweaver :
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
§  Buka aplikasi dreamweaver, klik html.
§  Membuat table, dengan cara insert – Table – Isikan Rows = 1, Columns = 1, Table Width = 100 %
§  Setelah membuat table, arahkan Kursor ke dalam tabel yang kita buat tadi.
§  Buat table yang kedua yang nantinya akan digunakan sebagai layout website kita, seperti contoh : Rows = 4, Columns=2 dan Table Width = 900 Pixel, Tabel ini bisa anda atur sesuai dengan kebutuhan anda
§  Atur table mulai dari Header, Footer dll
§  Membuat menu dengan cara, Insert – Spry – Spry Menu Bar
§  Menu ini bisa kita pilih, apakah akan horizontal atau vertical.
§  Save!
Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Div atau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.

 

Membuat website di dreamweaver

Setelah anda mendownload file tersebut, extrak filenya kedalam komputer anda, terserah anda mengextraknya dimana. Kemudian dalam hasil extrak terdapat folder images, disana ada beberapa file yang sudah aku pecah sebagai bahan pembuatan website di dreamweaver.
Copy folder images tersebut kemudian paste kedalam folder
D:\website\xampp\htdocs\websiteku.com
Membuat website di dreamweaver cs3 tidak sesulit yang orang bayangkan, kita hanya perlu memahami sedikit kode dan beberapa tool yang sudah di sediakan oleh adobe dreamweaver, membuat website di dreamweaver anda hanya akan bermain klik mengklik dan sedikit sekali mengetikkan kode2.
Kemarin ada seorang teman yang ingin belajar mebuat website di dreamweaver, dia bertanya kepada aku..

Membuat website di Dreamweaver harus menginstall XAMPP?

“aku rasa membuat website di dreamweaver tidak perlu jika anda membuat website berbasis html, anda cukup menaruh filenya dimana saja yang anda suka”
Untuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian :
  1. Header
  2. Menu navigasi
  3. Konten
  4. Sidebar
  5. Footer
Langsung saja kita akan membuat website di dreamweaver,  buka program Adobe Dreamweaver anda,  Create new pilih php
ceate-new.jpg
Simpan file tersebut, tekan CTRL + S simpan dengan nama index.php dalam folder tempat anda menginstal XAMPP
D:\website\xampp\htdocs\websiteku.com
Berikutnya anda membuat file baru, tekan CTRL + N pada Blank Page pilih CSS kemudian klik create, simpan dengan nama style.css dalam folder yang sama dengan file index.php
Kembai ke file index.php, klik tab index.php pada document toolbar, kemudian klik Code, tambahkan script berikut di atas tag </head>
1
<link href="style.css" rel="stylesheet" type="text/css" />
Script tersebut berfungsi menghubungkan file CSS dengan index.php
menghubungkan-file-css-dengan-file-index.jpg

Mengatur Body Website

Masih dalam file index.php, klik icon New CSS Rule yang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekan Shift + F11 untuk menampilkan tab CSS Style.
menghubungkan-file-css-dengan-file-index.jpg
Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : body
  • Define in : style.css
window-new-css-rule.jpg
Jika sudah klik ok. Maka akan muncul jendela CSS Rule Definition for body in style.css, isikan pengaturan sebagai berikut :
  1. Type = Font : Arial, Helvetica, sans-serif, size:13 pixel, color : #000000
  2. Background  = Background color : #CCCCCC
  3. Box = width : 900 pixel
CSS-Rule-Definition-for-body-in-style-css.jpg
Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S

Mengatur Link Website

Sekarang kita akan mengatur warna, ukuran, dan style Link secara default.
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : a
  • Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :

Type:

  • Color : #ff6000
  • Pada Decoration centang None
Jika sudah klik ok.
Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : a:hover
  • Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :

Type:

  • Pada Decoration centang Underline
  • Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisan color, kemudian pilih warnanya.
Jika sudah klik ok.

Memuat Header Website

Setelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag <body>
1
<div id="header"></div>
Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #header
  • Define in : style.css
Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai beriku

Type:

  • Size : 12 pixel
  • Color : #FFFFFF

Background:

  • Background image : klik browse pilih header.jpg dalam folder images
  • Repeat : no-repeat

Box :

  • Width : 860 pixel
  • Float : Left
  • Height : 110 pixel
  • Padding : centang same for all, kemudian isikan 20 pixel
Jika sudah klik OK, kemudian simpan file style.css anda. Untuk melihat preview website anda tekan F12
Selanjutnya kita akan memasukkan logo website dan deskripsi website kedalam header, caranya klik cursor anda setelah <div id=”header”> kemudian klik insert = > image = > logo.jpg
Usahakan logo yang anda buat tingginya / weight tidak lebih dari 80pixel, jika logo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :
melalui Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80
panel-property.jpg
Masih tetap pada Panel Property, pada Link klik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.
Pada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda.
Dibawah code
1
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
ketikkan
1
<p>Deskripsi website anda disini</p>
ganti tulisan deskripsi website anda disini dengan deskripsi/penjelasan website anda.
Simpan file index.php dan style.css tekan CTRL + S, kemudian lihat previewnya tekan F12 atau refresh browser anda tekan F5.

Memuat Menu Navigasi Website

Setelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link – link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
1
<div id="navigasi"></div>
Sekarang kita akan mengatur CSS untuk navigasiny. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #navigasi
  • Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai berikut :

Background:

  • Background image : klik browse pilih bg-nav.jpg dalam folder images
  • Repeat : no-repeat

Box :

  • Width : 860 pixel
  • Float : Left
  • Height : 35 pixel
  • Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel
  • Pada bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table

menu-navigasi.jpg
Setelah muncul jendela Table, isikan pengaturannya sebagai berikut :
  • Rows : 1
  • Columns : 4
  • Table Width kosongkan saja
  • Border Thickness kosongkan / delete saja.
  • Cell Padding : 5
  • Cell Spacing : 5
jendela-table-dreamweaver-cs3.jpg
Jika sudah klik ok.
Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut
menu-website.jpg
Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja # karena kita belum mempunyai filenya.
brows-link-file.jpg
Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.
Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #navigasi a
  • Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut :

Type:

  • Color : #FFFFFF (kode warna putih)
Jika sudah klik ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12

Memuat  Konten Website

Sekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
1
<div id="conten-wrapper">
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #conten-wrapper
  • Define in : style.css
Seleah muncul CSS Rule Definition for #conten-wrapper in style.css, isikan pengaturannya sebagai berikut :

Background:

  • Background color : #DDDDDD

Box :

  • Width : 860 pixel
  • Float : Left
  • Pada bagian margin centang same for all, isikan 0 pixel
  • Pada bagian padding hilangkan centang same for all, isikan top:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixel
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten-wrapper”>
1
<div id="conten"></div>
Sehingga kodenya menjadi seperti berikut :
1
2
3
<div id="conten-wrapper">
<div id="conten "></div>
</div>
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #conten
  • Define in : style.css
Seleah muncul CSS Rule Definition for #conten in style.css, isikan pengaturannya sebagai berikut :

Background:

  • Background color : #FFFFFF

Box :

  • Width : 600 pixel
  • Float : Left
  • Pada bagian padding centang same for all, isikan 20 pixel
Jika sudah klik ok, simpan file index.php dan style.css.

Memuat  Sidebar Website

Sidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu – menu seperti berita terbaru atau link – link tertentu.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten”></div>
1
<div id="sidebar"></div>
Sehingga kodenya menjadi seperti berikut :
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #sidebar
  • Define in : style.css
Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai berikut :

Box :

  • Width : 200 pixel
  • Float : Left
  • Pada bagian margin centang same for all, isikan 0 pixel
  • Pada bagian padding centang same for all, isikan 10 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.
1
2
3
4
<div id="conten-wrapper">
<div id="conten "></div>
<div id="sidebar "></div>
</div>

Memuat Footer Website

Fotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
1
<div id="footer"></div>
Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #footer
  • Define in : style.css
Seleah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai berikut

Background:

  • Background image : klik browse pilih footer.jpg dalam folder images
  • Repeat : no-repeat

Block:

  • Text align : Center

Box :

  • Width : 860 pixel
  • Float : Left
  • Height : 80 pixel
  • Pada bagian padding centang same for all, isikan 20 pixel
  • Pada bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>

<div id="navigasi">
  <table border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td><a href="index.php">Home</a></td>
      <td><a href="#">Profile</a></td>
      <td><a href="#">Gallery</a></td>
      <td><a href="#">Contact</a></td>
    </tr>
  </table>
</div>

<div id="conten-wrapper">
<div id="conten"></div>
<div id="sidebar"></div>
</div>

<div id="footer"></div>
</body>
</html>
Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. Untuk Merubah format judul konten anda caranya blok judul konten anda kemudian pada panel property => menu format pilih Heading 1.
Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja.
Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalam folder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property. Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.
Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin measukkan penggalan dari halaman profile anda, itu terserah anda.
Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.

Langsung saja tutorial dreamweaver kali ini yaitu memecah file index.php dengan Dreamweaver,
Buka program Adobe Dreamweaver anda, kemudian buka file index.php.
Buatlah 3 file baru, tekan Ctrl + N pilih PHP, kemudian simpan beri nama :
  1. header.php
  2. sidebar.php
  3. footer.php
Setelah anda membuat ke 3 file tersebut, hapus semua kode yang ada didalamnya. Sekarang kita akan menggabungkan semua file tersebut kedalam file index.php
Kemarin susunan kode website kita seperti berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>

<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>

<div id="navigasi">
  <table border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td><a href="index.php">Home</a></td>
      <td><a href="#">Profile</a></td>
      <td><a href="#">Gallery</a></td>
      <td><a href="#">Contact</a></td>
    </tr>
  </table>
</div>

<div id="conten-wrapper">
<div id="conten"></div>
<div id="sidebar"></div>
</div>

<div id="footer"></div>
</body>
Kemudian cut kode :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>

<div id="navigasi">
  <table border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td><a href="index.php">Home</a></td>
      <td><a href="#">Profile</a></td>
      <td><a href="#">Gallery</a></td>
      <td><a href="#">Contact</a></td>
    </tr>
  </table>
</div>
Paste kedalam header.php, kemudian gabungkan file header.php dengan file index.php caranya ketikkan kode berikut
1
<?php include ('header.php') ?>
letakkan di tempat kode yang anda cut tadi atau di bawah <body>
Selanjutnya kita akan menggabungkan atau menghubungkan file sidebar.php dengan file index.php. Cut kode berikut :
1
<div id="sidebar"></div>
paste kedalam sidebar.php, dan ketikkan kode berikut di bawah <div id=”conten”></div>
1
<?php include ('sidebar.php') ?>
Terakhir kita akan menggabungkan file footer.php dengan file index.php, cut kode berikut :
1
<div id="footer"></div>
Paste kedalam file footer.php, dan ketikkan kode berikut tepat di atas </body>
1
<?php include ('footer.php') ?>
Jadi dalam folder websiteku.com kita telah memiliki 4 file, yaitu :
  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php
Sedangkan untk membuat halaman yang lainnya, misalnya profile, contact, dan gallery anda tinggal mencopy file index.php kemudian ubah namanya menjadi nama halaman tersebut, dan untuk jelasnya nanti akan saya terangkan dalam tutorial dreamweaver

Membuat Halaman Profile

Tutorial Dreamweaver sebelumnya kita sudah memecah file index.php, pada tutorial Dreamweaver kali ini kita akan membuat halaman profile, dan kontak.

Pertama anda buka program Adobe dreamweaver milik anda, kemudian buka kembali file index.php, kemudian Save As atau tekan CTRL + SHIFT + S, beri nama profile.php.
Melalui design view, tuliskan judul halaman anda, pada kali ini tulis saja Profile, kemudian blok tulisan Profile, pada panel Properties yang ada di bagian bawah ubah formatnya menjadi Heading 1
tutorial-dreamweaver-membuat-halaman-profile.jpg
Selanjutnya tuliskan isi profile anda di bawah judul halaman anda, terserah anda mau menuliskan apa saja hehe.
Untuk memulai paragraph baru tekan Enter saja, tekan Shift + Enter untuk menyisipkan pergantian baris. Terakhir simpan pekerjaan anda tekan Ctrl + S.
Untuk membuat halaman kontak caranya sama saja, anda tinggal buka file index.php kemudian Save As beri nama contact.php

Selanjutnya pada tutorial dreamweaver ini kita akan melink’an halaman – halaman tersebut, buka file header.php milik anda, tekan Ctrl + O pilih header.php lalu klik Open.
Pertama blok tulisan Profile yang ada di bagian navigasi pada file header.php milik anda, kemudian pada panel Properties klik icon folder / Browse for File yang ada dalam bagian link, kemudian pilih file profile.php.
Lakukan langkah yang sama untuk meLink’an halaman kontak milik anda. Terakhir simpan file header.php tekan Ctrl + S, kembali ke tab profile profile.php tekan F12 untuk melihat preview pekerjaan anda.
Jika anda masih ingat pada tutorial dreamweaver membuat file index.php yang belum di pecah, bagian navigasi masih menyatu dalam 1 file, jadi ketika anda ingin memberikan link pada navigasi tersebut anda harus mengedit 1 persatu file – file yang anda miliki, misalnyamenu navigasi pada file index.php, profile.php dan contact.php. Itu baru 3 file, bagaimana jika anda memiliki ratusan file / halaman statis? repot bukan?, oleh sebab itu saya menyarankan anda memecah file tersebut.
Setelah tutorial ini, kita akan langsung belajar membuat halaman administrator, yang dimana halaman pada halaman admin tersebut hanya bisa di akses oleh anda sendiri dengan cara memasukkan password dan id anda.

Membuat Halaman Log out

Sebelum memulai tutorial Membuat Halaman Log Out ini saya minta maaf atas keterlambatan update ini, karena banyak kesibukan jadi belum sempat update.

Kemarin terakhir kita sudah memberikan batasan hak akses halaman administrator, yang dimana jika ada user ingin mengakses salah satu halaman administrator tanpa melalui proses login maka secara otomatis dia akan di bawa ke halaman log out.
Di halaman log out ini nantinya akan langsung mengarah kehalaman depan administrator dan meminta user yang jahil tersebut untuk melakukan login terlebih dahulu.
Pertama jalankan program adobe dreamweaver milik anda, kemudian buka file log out.php yang terdapat dalam folder fileadmin.
Setelah halaman log out / log out.php anda terbuka melalui code view hapus semua code yang terdapat dalam file tersebut.
Selanjutnya pada menubar dreamweaver klik Insert > Data Objects > User Authentication > Log out User
Setelah muncul window / jendela Log out user isikan pengaturannya seperti berikut :
  • Log out when : pilih Page Load
  • When done, go to : pilih file index.php yang ada dalam folder fileadmin
tutorial-membuat-halaman-logout-di-dreamweaver-cs3.jpg
Jika sudah klik ok, kemudian simpan pekerjaan anda, tekan Ctrl + S. Maka kode dari halaman log out sbb..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// *** Logout the current user.
$logoutGoTo = "index.php";
if (!isset($_SESSION)) {
  session_start();
}
$_SESSION['MM_Username'] = NULL;
$_SESSION['MM_UserGroup'] = NULL;
unset($_SESSION['MM_Username']);
unset($_SESSION['MM_UserGroup']);
if ($logoutGoTo != "") {header("Location: $logoutGoTo");
exit;
}
?>
Sudah… hanya itu saja caranya hahhahaha, sebenarnya simple banget, sekarang coba test drive ketikkan “http://localhost/websiteku.com/fileadmin/home.php” pada browser anda, kalau sukses anda akan tetap berada di halaman depan / halaman login administrator.
Sekarang coba login kehalaman administrator anda, kemudian klik link log out pada navigasi, kalau sukses maka anda tetap akan di bawa kehalaman login.

Membuat Halaman Login

bg-ogin-form.png

Sebelum memulai tutorial ini anda harus membuat tabel untuk admin silahkan lihat disini. Bagi anda yang mengikuti tutorial ini dari awal silahkan buka file index.php yang ada di dalam folder fileadmin.
Halaman login pada website tentunya berisi login form, pertama kita akan membuat login formnya terlebih dahulu.
Setelah anda membuka file index.php dalam folder fileadmin, klik ke dalam area kerja dreamweaver anda, kemudian ikuti langkah – langkahnya :
Klik Insert > Form > Form
Klik Insert >Table, isikan table propertynya sbb :
  1. Row : 3
  2. Collomns : 3
  3. Table Width : kosongkan saja
  4. Border thickness : kosongkan saja
  5. Cell padding : 5
  6. Cell spacing : 5
  7. Klik ok.
Maka akan terlihat 9 buah kotak dengan garis putus – putus. Pada baris kotak pojok kiri atas isikan Nama, kotak di sebelah kanan nama isikan : (titik dua).
Kotak di bawah Nama isikan Password, dan di sebelah kanan Password isikan : (titik dua).
Pada baris Nama, klik di dalam kotak paling kanan, kemudian klik Insert > Form > Text Field, pada Id isikan nama, yang lain biarkan secara default, kalau sudah klik Ok.
Pada baris Password, klik di dalam kotak paling kanan, kemudian klik Insert > Form > Text Field, pada Id isikan password, yang lain biarkan secara default, kalau sudah klik Ok.
Setelah muncul TextField untuk memasukkan password, klik TextField tersebut, pada panel Properties di bagian bawah pada bagian Type pilih Password
Selanjutnya kita akan menyatukan atau me Merge Cell pada baris paling bawah agar menjadi satu kotak saja, caranya arahkan cursor anda kesebelahnya, kemudian klik Row tersebut, perhatikan gambar berikut.
seleksi-rw.png
Jika sudah terseleksi, pada bagian panel Properties klik icon Merges selected cells using spans,  kemudian pada Horz rubah menjadi Right.
merge-cells-di-dreamweaver-cs3.png
Kalau sudah, klik kembali di dalam kotak tersebut, lalu klik Insert > Form > Button, pada Id isi login terakhir klik Ok. Untuk merubah tulisan di dalam tombol login tersebut ubah Value‘nya pada panel Properties.
Sampai disini, jika anda perhatikan melalui Code View maka kodenya akan seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form id="form1" name="form1" method="post" action="">
  <table cellspacing="5" cellpadding="5">
    <tr>
      <td>Nama</td>
      <td>:</td>
      <td><label>
        <input type="text" name="nama" id="nama" />
      </label></td>
    </tr>
    <tr>
      <td>Password</td>
      <td>:</td>
      <td><label>
        <input type="text" name="password" id="password" />
      </label></td>
    </tr>
    <tr align="right">
      <td colspan="3"><label>
        <input type="submit" name="login" id="login" value="Login" />
      </label></td>
    </tr>
  </table>
</form>
Simpan pekerjaan anda Ctrl + S, kemudian preview tekan F12
Sampai disini dulu tutorial membuat halaman login di Dreamweaver CS3 saya akan lanjutkan tutorialnya membuat halaman login pada artikel berikutnya Membuat Halaman Login Part 2.

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)