1. TAMPILAN LEMBAR KERJA
Setelah software Adobe Dreamweaver diinstal, akan tampil kotak dialog seperti berikut, biarkan tercentang sebagai default lalu klik OK.
Ini adalah tampilan awal Dreamweaver CS6 yang telah diinstal.
Untuk membuat lembar kerja baru, caranya klik File > New atau menekan tombol pada keyboard Ctrl + N, juga bisa dengan cara mengklik menu di halaman awal, pilih lembar kerja yang akan dibuat. Misalnya HTML.
Ini adalah lembar kerja yang telah dibuat, ada beberapa komponen yang harus kita ketahui terlebih dahulu dan akan sering kita pakai yaitu
1) Tab menu Code, Split dan Design.
2) Properties
Tab menu Code, Split dan Design
Tampilan Code, menampilkan lembar kerja yang bersifat kode atau sintaks-sintaks bahasa pemrograman. Pada tampilan Split akan menampilkan sebagian sintaks pemrograman dan sebagian dari desain atau apa yang dihasilkan oleh sintaks-sintaks tersebut. Sedangkan pada tampilan Desain hanya menampilkan sepenuhnya hasil tanpa menampilkan sintaks pemrograman.
Tampilan pada Tab Desain. Pada bagian ini kita bisa mengetikkan atau meletakkan sesuatu objek dan secara otomatis akan tertulis sintaks pemrogramannya pada bagian tab Code. Misalnya: “Selamat Datang di Dreamweaver CS6”. Maka ditampilan tab Code sudah tertulis sintaks yang berisikan kata-kata tersebut.
Tampilan pada Tab Code
Tampilan pada Tab Split
Tampilan pada Tab Design
Properties bar
Memuat beberapa menu HTML dan CSS yang akan memberikan efek pada objek seperti cetak huruf tebal (B), cetak huruf miring (I), Unordered List (ul) dan Ordered List (ol) dan lainnya.
Sekarang kita coba menyesuaikan tampilan lembar kerja dengan yang kita perlukan. Klik kanan pada Adobe BrowserLab lalu pilih Close Tab Group.
Lakukan hal yang sama pada tab CSS Style / AP Elements dan Business Catalyst. yang tersisa hanya komponen Insert dan File / Assets. Drag komponen Insert ke kiri tepat di bawah menu bar, hingga menjadi seperti gambar berikut:
Kita juga mengganti judul pada lembar kerja di bagian Title, misalnya Pengenalan Dreamweaver. Pada Judul Tab Untitled-1 menunjukkan nama file / lembar kerja, sedangkan tanda * merupakan status bahwa lembar kerja tersebut belum tersimpan.
Simpan lembar kerja kita dengan cara, klik menu File > Save (Ctrl + S). Tentukan direktori penyimpannya dan simpan dengan nama latihan.html
Kita dapat melihat hasil lembar kerja dengan cara menekan tombol F12 pada keyboard atau dengan mengklik menu Preview > (pilih browser) seperti berikut:
.
Hasilnya akan tampil seperti ini:
2. MEMBUAT SITE DI DREAMWEAVER CS6
Agar proyek yang kita bangun terlihat rapi pada Adobe Dreamweaver tersedia pengaturan site, cara pembuatan site ini dapat dilakukan dengan cara:
1. Pada menu bar pilih Site > New Site ...
2. Pada bagian site, buatlah nama site dengan nama CRUD dan untuk pembuatan nama site ini terserah apa saja nama yang akan dibuat tidak mesti CRUD saja, akan tetapi karena kita akan membuat projek CRUD maka lebih baik kita sesuaikan dengan projek kita.
Site Name: crud
Local Site Folder: C:\xampp\htdocs\crud\ (pada Local Site Folder: ini sesuaikan dimana lokasi folder yang kita buat sebelumnya dan pastikan nama foldernya juga sama). Klik Save.
3. Setelah itu berpindah ke bagian Servers, klik simbol ( + ) Add new Server.
4. Kemudian sesuaikan pengaturannya seperti gambar berikut:
Server Name : localhost
Connect using : Pilih Local/Network
Server Folder : Sesuaikan dengan direktori penyimpanan folder pada projek
Web URL : Sesuaikan dengan nama server dan folder projek
5. Setelah itu, berpindah ke menu Advanced kemudian sesuaikan pengaturan seperti gambar di bawah ini, kemudian klik Save
6. Setelah di save, klik centang pada kolom Testing
7. Site telah berhasil dibuat, seperti gambar berikut:
3. MEMBUAT KONEKSI DI DREAMWEAVER CS6
Sebelum masuk ke bagian membuat koneksi, kita akan menampilkan tab-menu Databases yaitu dari menu Windows > Databases. Apabila sudah ditampilkan maka akan mempermudah kita untuk membuat koneksi. Berikut langkah-langkah membuat koneksi:
1. Pada tab-menu Databases -> Klik simbol ( + ) > MySql Connection
2. Kemudian sesuaikan dengan pengaturan seperti gambar berikut ini:
Pada bagian Connection name, Anda boleh mengganti dengan kata yang lain tidak hanya “koneksi” sedangkan pada kolom MySQL server tetap memakai localhost dan User name tetap root, untuk Password secara default adalah kosong dan pada Database silahkan klik Select... lalu pilih database yang sebelumnya telah dibuat.
3. Klik Test, jika berhasil atau tidak maka akan ada pemberitahuan. Pastikan Xampp Anda tetap aktif. Setelah berhasil, klik OK dan koneksi telah berhasil dibuat dan dapat dilihat pada bagian tab-menu Databases
4. Secara otomatis sudah terbuat sebuah folder yaitu Connections yang di dalamnya terdapat file yang berekstensi php yaitu koneksi.php
4. MEMBUAT SITE DI DREAMWEAVER CS3
Sebelum membuat site, terlebih dahulu kita membuat folder baru di dalam folder htdocs: misalnya, crud.
Setelah membuat folder tersebut, buka aplikasi XAMPP dan klik untuk aktifkan servernya yaitu Apache dan DBMS-nya yaitu MySql.
Buka kembali Adobe Dreamweaver CS3, pada menu bar pilih site > New Site ...
Lalu ketikkan crud pada kolom site name dan ketikkan crud pada http://localhost/ ... > seperti gambar berikut ini:
Setelah itu klik next, lalu pilih Yes, I want to use a server technology dan pilih PHP MySQL.
Klik next, pilih yang pertama dan masukkan lokasi penyimpanan file berdasarkan lokasi folder yang telah dibuat sebelumnya, yaitu: C:\xampp\htdocs\crud\ ... seperti gambar di bawah ini:
Klik next, kemudian ketikkan nama folder yang dibuat sebelumnya yaitu crud pada http:/localhost/ sehingga menjadi seperti berikut ini:
Klik Test URL, jika berhasil klik next lalu pilih No, pilih next kemudian Done dan selamat pembuatan site telah selesai.
Apabila terjadi kesalahan, pastikan aplikasi XAMPP untuk Apache dan MySQLnya telah di START dan pastikan penulisan nama folder sebelumnya telah sesuai. Pada tab Files akan terlihat site yang telah dibuat.
5. MEMBUAT KONEKSI DI DREAMWEAVER CS3
Membuat koneksi pada Adobe Dreamweaver CS3 tidak berbeda dengan Dreamweaver CS6. Ikuti langkah-langkah berikut ini:
1. Buat terlebih dahulu halaman baru dengan ekstensi .php dengan cara mengklik kanan pada Site > pilih New File
2. Berikan nama, misalnya: index.php, dan tekan enter.
3. Setelah itu, arahkan pointer pada tab Application > pada tab Databases, klik tombol tambah ( + ) > klik MySQL Connection:
Kemudian akan tampil kotak dialog MySQL Connection. Pada bagian Connection name, Anda boleh mengganti dengan kata yang lain tidak hanya “koneksi” sedangkan pada kolom MySQL server tetap memakai localhost dan User name tetap root, untuk Password secara default adalah kosong dan pada Database silahkan klik Select... lalu pilih database yang sebelumnya telah dibuat.
4. Klik Test, jika berhasil atau tidak maka akan ada pemberitahuan. Pastikan XAMPP tetap berjalan. Setelah berhasil, klik OK dan koneksi telah berhasil dibuat dan dapat dilihat pada bagian tab-menu Databases
5. Secara otomatis sudah terbuat sebuah folder yaitu Connections yang di dalamnya terdapat file yang berekstensi php yaitu koneksi.php
Setelah software Adobe Dreamweaver diinstal, akan tampil kotak dialog seperti berikut, biarkan tercentang sebagai default lalu klik OK.
Ini adalah tampilan awal Dreamweaver CS6 yang telah diinstal.
Untuk membuat lembar kerja baru, caranya klik File > New atau menekan tombol pada keyboard Ctrl + N, juga bisa dengan cara mengklik menu di halaman awal, pilih lembar kerja yang akan dibuat. Misalnya HTML.
Ini adalah lembar kerja yang telah dibuat, ada beberapa komponen yang harus kita ketahui terlebih dahulu dan akan sering kita pakai yaitu
1) Tab menu Code, Split dan Design.
2) Properties
Tab menu Code, Split dan Design
Tampilan Code, menampilkan lembar kerja yang bersifat kode atau sintaks-sintaks bahasa pemrograman. Pada tampilan Split akan menampilkan sebagian sintaks pemrograman dan sebagian dari desain atau apa yang dihasilkan oleh sintaks-sintaks tersebut. Sedangkan pada tampilan Desain hanya menampilkan sepenuhnya hasil tanpa menampilkan sintaks pemrograman.
Tampilan pada Tab Desain. Pada bagian ini kita bisa mengetikkan atau meletakkan sesuatu objek dan secara otomatis akan tertulis sintaks pemrogramannya pada bagian tab Code. Misalnya: “Selamat Datang di Dreamweaver CS6”. Maka ditampilan tab Code sudah tertulis sintaks yang berisikan kata-kata tersebut.
Tampilan pada Tab Code
Tampilan pada Tab Split
Tampilan pada Tab Design
Properties bar
Memuat beberapa menu HTML dan CSS yang akan memberikan efek pada objek seperti cetak huruf tebal (B), cetak huruf miring (I), Unordered List (ul) dan Ordered List (ol) dan lainnya.
Sekarang kita coba menyesuaikan tampilan lembar kerja dengan yang kita perlukan. Klik kanan pada Adobe BrowserLab lalu pilih Close Tab Group.
Lakukan hal yang sama pada tab CSS Style / AP Elements dan Business Catalyst. yang tersisa hanya komponen Insert dan File / Assets. Drag komponen Insert ke kiri tepat di bawah menu bar, hingga menjadi seperti gambar berikut:
Kita juga mengganti judul pada lembar kerja di bagian Title, misalnya Pengenalan Dreamweaver. Pada Judul Tab Untitled-1 menunjukkan nama file / lembar kerja, sedangkan tanda * merupakan status bahwa lembar kerja tersebut belum tersimpan.
Simpan lembar kerja kita dengan cara, klik menu File > Save (Ctrl + S). Tentukan direktori penyimpannya dan simpan dengan nama latihan.html
Kita dapat melihat hasil lembar kerja dengan cara menekan tombol F12 pada keyboard atau dengan mengklik menu Preview > (pilih browser) seperti berikut:
.
Hasilnya akan tampil seperti ini:
2. MEMBUAT SITE DI DREAMWEAVER CS6
Agar proyek yang kita bangun terlihat rapi pada Adobe Dreamweaver tersedia pengaturan site, cara pembuatan site ini dapat dilakukan dengan cara:
1. Pada menu bar pilih Site > New Site ...
2. Pada bagian site, buatlah nama site dengan nama CRUD dan untuk pembuatan nama site ini terserah apa saja nama yang akan dibuat tidak mesti CRUD saja, akan tetapi karena kita akan membuat projek CRUD maka lebih baik kita sesuaikan dengan projek kita.
Site Name: crud
Local Site Folder: C:\xampp\htdocs\crud\ (pada Local Site Folder: ini sesuaikan dimana lokasi folder yang kita buat sebelumnya dan pastikan nama foldernya juga sama). Klik Save.
3. Setelah itu berpindah ke bagian Servers, klik simbol ( + ) Add new Server.
4. Kemudian sesuaikan pengaturannya seperti gambar berikut:
Server Name : localhost
Connect using : Pilih Local/Network
Server Folder : Sesuaikan dengan direktori penyimpanan folder pada projek
Web URL : Sesuaikan dengan nama server dan folder projek
5. Setelah itu, berpindah ke menu Advanced kemudian sesuaikan pengaturan seperti gambar di bawah ini, kemudian klik Save
6. Setelah di save, klik centang pada kolom Testing
7. Site telah berhasil dibuat, seperti gambar berikut:
3. MEMBUAT KONEKSI DI DREAMWEAVER CS6
Sebelum masuk ke bagian membuat koneksi, kita akan menampilkan tab-menu Databases yaitu dari menu Windows > Databases. Apabila sudah ditampilkan maka akan mempermudah kita untuk membuat koneksi. Berikut langkah-langkah membuat koneksi:
1. Pada tab-menu Databases -> Klik simbol ( + ) > MySql Connection
2. Kemudian sesuaikan dengan pengaturan seperti gambar berikut ini:
Pada bagian Connection name, Anda boleh mengganti dengan kata yang lain tidak hanya “koneksi” sedangkan pada kolom MySQL server tetap memakai localhost dan User name tetap root, untuk Password secara default adalah kosong dan pada Database silahkan klik Select... lalu pilih database yang sebelumnya telah dibuat.
3. Klik Test, jika berhasil atau tidak maka akan ada pemberitahuan. Pastikan Xampp Anda tetap aktif. Setelah berhasil, klik OK dan koneksi telah berhasil dibuat dan dapat dilihat pada bagian tab-menu Databases
4. Secara otomatis sudah terbuat sebuah folder yaitu Connections yang di dalamnya terdapat file yang berekstensi php yaitu koneksi.php
4. MEMBUAT SITE DI DREAMWEAVER CS3
Sebelum membuat site, terlebih dahulu kita membuat folder baru di dalam folder htdocs: misalnya, crud.
Setelah membuat folder tersebut, buka aplikasi XAMPP dan klik untuk aktifkan servernya yaitu Apache dan DBMS-nya yaitu MySql.
Buka kembali Adobe Dreamweaver CS3, pada menu bar pilih site > New Site ...
Lalu ketikkan crud pada kolom site name dan ketikkan crud pada http://localhost/ ... > seperti gambar berikut ini:
Setelah itu klik next, lalu pilih Yes, I want to use a server technology dan pilih PHP MySQL.
Klik next, pilih yang pertama dan masukkan lokasi penyimpanan file berdasarkan lokasi folder yang telah dibuat sebelumnya, yaitu: C:\xampp\htdocs\crud\ ... seperti gambar di bawah ini:
Klik next, kemudian ketikkan nama folder yang dibuat sebelumnya yaitu crud pada http:/localhost/ sehingga menjadi seperti berikut ini:
Klik Test URL, jika berhasil klik next lalu pilih No, pilih next kemudian Done dan selamat pembuatan site telah selesai.
Apabila terjadi kesalahan, pastikan aplikasi XAMPP untuk Apache dan MySQLnya telah di START dan pastikan penulisan nama folder sebelumnya telah sesuai. Pada tab Files akan terlihat site yang telah dibuat.
5. MEMBUAT KONEKSI DI DREAMWEAVER CS3
Membuat koneksi pada Adobe Dreamweaver CS3 tidak berbeda dengan Dreamweaver CS6. Ikuti langkah-langkah berikut ini:
1. Buat terlebih dahulu halaman baru dengan ekstensi .php dengan cara mengklik kanan pada Site > pilih New File
2. Berikan nama, misalnya: index.php, dan tekan enter.
3. Setelah itu, arahkan pointer pada tab Application > pada tab Databases, klik tombol tambah ( + ) > klik MySQL Connection:
Kemudian akan tampil kotak dialog MySQL Connection. Pada bagian Connection name, Anda boleh mengganti dengan kata yang lain tidak hanya “koneksi” sedangkan pada kolom MySQL server tetap memakai localhost dan User name tetap root, untuk Password secara default adalah kosong dan pada Database silahkan klik Select... lalu pilih database yang sebelumnya telah dibuat.
4. Klik Test, jika berhasil atau tidak maka akan ada pemberitahuan. Pastikan XAMPP tetap berjalan. Setelah berhasil, klik OK dan koneksi telah berhasil dibuat dan dapat dilihat pada bagian tab-menu Databases
5. Secara otomatis sudah terbuat sebuah folder yaitu Connections yang di dalamnya terdapat file yang berekstensi php yaitu koneksi.php
0 Komentar