[Basic] 2. dreamweaver site

11

Click here to load reader

Transcript of [Basic] 2. dreamweaver site

Page 1: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 1

Dreamweaver Site Membuat Site di Dreamweaver

UJK RPL TUTS™

Part Two

Basic Level

Lisensi Dokumen

Seluruh dokumen yang dibuat oleh SCG dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk

tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan

pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penu lisan ulang, kecuali mendapatkan ijin terlebih dahulu dari Penulis atau Software Community Generation.

Copyright © 2012 Software Community Generation.

Page 2: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 2

Overview Gambaran

Sebelum memulai Tutorial ini, harap sediakan dan pastikan komponen-komponen berikut:

Telah memahami dan menyelesaikan Tutorial sebelumnya

Adobe Dreamweaver CS3

XAMPP 1.8.0

Jalankan XAMPP Control Panel, dan pastikan service Apache dan MySQL running.

Yang akan dipelajari:

1. Setting Site Dreamweaver

2. Pengenalan Fungsi F12

3. Mengenal Server, Testing, dan Local

4. Mengenal Live Data View

Part Two : Dreamweaver Site

Did you know?

#Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi

bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web. @enjangdspc

Page 3: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 3

Step 1 : Create Site

Klik menu Site pada Menu di Dreamweaver

Setelah muncul kotak dialog, Isikan nama site dan URLnya

Ex. Nama Site : kreditmotor

URL : http://localhost/kreditmotor

Klik Next

Page 4: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 4

Lalu pada Server Technology, Klik YES dan pilih PHP MySQL. Klik Next

Pada kotak dialog selanjutnya, ada tiga pilihan tipe editing:

1. Edit and Test Locally

Jika komputer yang digunakan mengedit merupakan testing Server

2. Edit Locally, then Upload to Remote Testing Server

Edit di komputer yang digunakan, kemudian upload ke htdocs di XAMPP

3. Edit Directly on Testing Server

Edit langsung di htdocs XAMPP

Pilih opsi ke 2, anggap saja htdocs pada XAMPP adalah Server dan Localnya adalah Local Disc

Komputer yang digunakan.

Page 5: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 5

Lalu klik Ikon folder dan tentukan folder Local yang akan digunakan, atau bisa saja langsung

di folder kreditmotor yang berada di folder htdocs pada xampp. Klik next

Page 6: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 6

Pada kotak dialog selanjutnya, pilih Local/Network dan pilih folder kreditmotor dalam folder htdocs pada xampp.

Page 7: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 7

Masukkan URL site yang dibuat pada kotak dialog Testing Files, Part 2 Ex. http://localhost/kreditmotor

Klik tombol TEST URL, maka akan muncul kotak dialog

1. Jika sukses tanpa Masalah:

Page 8: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 8

2. Jika ada kesalahan tulis dan menyebabkan perbedaan nama site dan URL serta folder pada

htdocs, harus diperbaiki

3. Kesalahan pada konfigurasi XAMPP dan Sistem Operasi, hiraukan dan lanjutkan

Setelah mengklik Next pada tahapan diatas, maka akan muncul, pilih No, dan Klik Next:

Page 9: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 9

Akan muncul kotak dialog Summary, Klik Done

Page 10: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 10

Step 2 : Using Files

Salah satu keuntungan setelah mensetting site pada dreamweaver adalah dapat menggunakan salah

satu fungsi dreamweaver yaitu Files.

1. Mencegah gambar tidak tampil

2. Mencegah Broken Link

3. Dapat digunakan untuk merapihkan data

dengan drag and drop

Step 3 : Using F12

Dalam dreamweaver ada fungsi preview di browser dengan menekan F12 dan ini hanya bisa digunakan setelah mensetting site dreamweaver.

Step 3 : Using Live Data View

Jika sedang mengedit file dengan Server Behavior atau script PHP akan langsung dapat dilihat di dreamweaver tanpa harus ke browser dengan mengklik Live Data View

Page 11: [Basic] 2. dreamweaver site

UJK RPL Tuts™ Part Two : Dreamweaver Si te 11

Cheat Sheet Ingatlah selalu ini

Disimpulkan dalam tutorial ini, dalam membuat sebuah Site terbagi 3:

1. Editing Files

Part 1: Nama Site, dan URL

Part 2: Yes, dan MySQL PHP

Part 3: Edit Locally dan Folder baru dengan nama site di htdocs XAMPP

2. Testing Files

Part 1 : (Skip)

Part 2 : Local/Network dan Folder dengan nama site di htdocs XAMPP

3. Sharing Files Part 1 : No.

Setelah membuat Site, maka akan bisa menjalankan:

1. Files : Menejemen File

2. Fungsi F12 : Preview in Browser

3. Live Data View : Preview langsung di Dreamweaver

Do the Best and Good Luck.

This Tuts Brought To You By

Author : Enjang Kurniawan

AKA enjangdspc. Work as Web Programmer and Chief Web Officer at SCGeneration. Alumni of RPL SMKN 1 Karawang 2011.

@enjangdspc on.fb.me/enjangdspc [email protected]