modul pelatihan web baru.pdf

102
MODUL PELATIHAN WEB I. PENGANTAR 1.1 World Wide Web (WWW) WWW merupakan singkatan dari World Wide Web atau biasa disebut web saja. Jika anda sering menggunkan internet tentu anda familiar dengan kata www ini. Web merupakan jaringan yang mengubungkan jaringan komputer diseluruh dunia. Web memungkinkan komputer diseluruh dunia dapat saling berkomunikasi satu sama lainnya. Standar komunikasi yang digunakan adalah dengan menggunakan HTTP. Informasi yang ada di web ditampilkan melalui Web Pages. Web Pages disimpan disuatu komputer yang bisa disebut sebagai Web Server. Kita dapat mengakses Web Pages tersebut melalui sebuah program yang disebut Web Browser. Web Browser yang terkenal antara lain : Internet Explorer dan Opera. Web Browser ini dapat mengakses Web Pages melalui suatu alamat tertentu atau yang biasa kita sebut dengan URL (Uniform Resources Locator). Contoh alamat URL : http://www.someone.com/page.html. Semua Web Pages memiliki suatu instruksi-instruksi tertentu untuk tampilan. Ketika Web Browser akan menampilkan Web Pages maka Web Browser tadi akan membasa instruksi-instruksi tampilan yang dimiliki oleh Web Pages. Instruksi tampilan yang paling standar adalah HTML. Komunikasi Web Browser-Web Server Alur komunikasi antara browser dan web server tampak seperti gambar di bawah ini : HTTP Response HTTP Request Internet Client (Browser) Server Gambar 1.1 Alur Komunikasi Client – Server melalui HTTP Keterangan gambar : 1. Klien (Browser) meminta informasi kepada server, proses ini biasa disebut HTTP Request (permintaan informasi lewat protokol HTTP). PT. PASIM SENTRA UTAMA Halaman 1 dari 102

Upload: benn-x-strife

Post on 02-Aug-2015

108 views

Category:

Documents


8 download

TRANSCRIPT

Page 1: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

I. PENGANTAR

1.1 World Wide Web (WWW)

WWW merupakan singkatan dari World Wide Web atau biasa disebut web saja.

Jika anda sering menggunkan internet tentu anda familiar dengan kata www ini.

Web merupakan jaringan yang mengubungkan jaringan komputer diseluruh dunia.

Web memungkinkan komputer diseluruh dunia dapat saling berkomunikasi satu sama

lainnya. Standar komunikasi yang digunakan adalah dengan menggunakan HTTP.

Informasi yang ada di web ditampilkan melalui Web Pages. Web Pages

disimpan disuatu komputer yang bisa disebut sebagai Web Server. Kita dapat

mengakses Web Pages tersebut melalui sebuah program yang disebut Web Browser.

Web Browser yang terkenal antara lain : Internet Explorer dan Opera.

Web Browser ini dapat mengakses Web Pages melalui suatu alamat tertentu atau

yang biasa kita sebut dengan URL (Uniform Resources Locator). Contoh alamat URL :

http://www.someone.com/page.html.

Semua Web Pages memiliki suatu instruksi-instruksi tertentu untuk tampilan.

Ketika Web Browser akan menampilkan Web Pages maka Web Browser tadi akan

membasa instruksi-instruksi tampilan yang dimiliki oleh Web Pages. Instruksi tampilan

yang paling standar adalah HTML.

Komunikasi Web Browser-Web Server Alur komunikasi antara browser dan web server tampak seperti gambar di

bawah ini :

HTTP Response

HTTP Request

InternetClient

(Browser)Server

Gambar 1.1

Alur Komunikasi Client – Server melalui HTTP

Keterangan gambar :

1. Klien (Browser) meminta informasi kepada server, proses ini biasa disebut HTTP

Request (permintaan informasi lewat protokol HTTP).

PT. PASIM SENTRA UTAMA Halaman 1 dari 102

Page 2: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

2. Jika informasi yang diminta ada dalam web server, server mengirimkan informasi

tadi kepada klien. Proses ini biasa disebut HTTP Response (pengiriman informasi

lewat protokol HTTP).

1.2 HTML HTML merupakan singkatan dari Hypertext MarkUp Language. File HTML pada

dasarnya berisi tag-tag HTML. Tag HTML ini yang nantinya akan dibaca oleh Web

Browser dan akan menentukan tampilan di Web Pages. Jadi dapat diartikan bahwa

Web Pages merupakan file HTML.

1.2.1 Tag HTML

Bentuk penulisan dasar HTML adalah sebagai berikut :

<html>

<head>

<title>Judul Web Site Anda</title>

</head>

<body>

Isian dari halaman HTML anda

</body>

</html>

Suatu tulisan yang berada dalam kurung siku (<....>) ini disebut dengan tag. Tag inilah

yang akan dieksekusi oleh Web Browser dan akan menentukan dari tampilan Web

Pages anda.

Contoh tag HTML :

<b> teks anda </b> : untuk membuat tulisan bold

<br> : sama dengan page break atau ganti baris

<p> : ganti paragraf

<i> teks anda </i> : untuk membuat tulisan italic, dll

1.2.2 Perintah Dasar/Basic Tag

1.2.2.1 Text Formatting

Ada beberapa tag yang berguna untuk memanipulasi text, yaitu :

Heading

Tag ini berfungsi untuk memformat heading (Judul dan ub Judul) dari sebuah

halaman web.

Tag penulisannya : <h1> text anda </h1>

PT. PASIM SENTRA UTAMA Halaman 2 dari 102

Page 3: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Bold, Italic, Underline

Format bold, italic dan underline ini telah dikenal juga dalam Microsoft Word.

Tag penulisannya adalah :

<b> text anda </b>

<i> text anda </i>

<u> text anda </u>

Page Break dan Paragraph

Page break digunakan untuk mengganti baris sedangkan poragraph sebenarnya

hampir mirip dengan page break hanya spasi baris yang dihasilkan lebih besar.

Tag penulisannya :

<br> : page break

<p> : paragraph

Font Face, Size dan Color

Dalam web kita dapat mengubah jenis, ukuran dan warna dari huruf yang kita

pakai. Font face digunakan untuk mengubah jenis huruf, font size digunakan untuk

mengubah ukuran huruf, font color digunakan untuk mengubah warna huruf.

Tag penulisannya adalah :

<font face=”Arial” size=”2l” color=”#000000l”> text anda </font>

Align

Tag ini digunakan untuk mengatur perataan suatu paragraph kalimat.

Tag penulisannya adalah :

<div align=”left”> text anda </div>

<div align=”right”> text anda </div>

<div align=”center”> text anda </div>

<div align=”justify”> text anda </div>

1.2.2.2 Body Formatting

Pada tag <body> anda dapat melakukan formatting untuk beberapa hal, seperti :

warna latar web page, warna keseluruhan, gambar sebagai latar belakang, dll.

Contoh penulisan tagnya adalah : < body bgcolor = ”red” text = ”#FFFFFF” >

PT. PASIM SENTRA UTAMA Halaman 3 dari 102

Page 4: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

1.2.2.3 List

Tag <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua

jenis daftar yang dikenal di HTML, yaitu daftar dalam format bullet ( bulleted list ) dan

dalam bentuk nomor ( ordered list ). Untuk masing-masing jenis list ini diperlukan

tambahan tag yang berbeda, yaitu tag <ul> dan <ol>.

Contoh : <html>

<head>

<tittle> latihan menggunakan tag heading</title>

</head>

<body>

<h1>Produk PT Maju Terus</h1>

Berikut ini adalah produk yang terdapat di PT Maju Terus.

<h2>Komputer</h2>

<ol>

<li>Pentium IV

<li>Pentium III

<li>Pentium II

</ol>

</body>

</html>

1.2.2.4 Gambar

Web Page yang kta buat tentunya kurang bervarasi jika hany berisi tulisan-tulisan

saja. Oleh karena itu kita bisa memasukkan file gambar kedalam web page.

Contoh penulisan tag gambar adalah : <img src=”file_gambar.gif”>

1.2.2.5 Link

Link merupakan kemampuan web untuk dapat melompat ke halaman lain atau ke

alamat internet (URL) lain.

Contoh penulisan tag link : <a href=”url_tujuan”> tampilan teks untuk di click </a>

1.2.2.6 Tabel

Tag yang digunakan untuk membuat tabel adalah :

- <table> ... </table> : untuk membuat tabel

- <tr> ... </tr> : untuk menentukan baris

- <td> ... </td> : untuk menentukan kolom

PT. PASIM SENTRA UTAMA Halaman 4 dari 102

Page 5: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Contoh : <table>

<tr>

<td> Nama </td>

<td> Alamat </td>

</tr>

<tr>

<td> Nama Anda </td>

<td> Alamat Anda </td>

</tr>

</table>

1.2.2.7 Form

Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi

berbasis web. Form menyediakan elemen masukan yang dapat berupa text box,

check box, radio button, list&menu dan tombol.

Contoh penulisan tag form adalah : <form name=”nama form” method=”post” action=”file aksi”> jenis form

anda </form>

Text Field

Text field digunakan untuk memasukkan data dengan cara diketik.

Tag penulisannya : <input type=”text” name=”text” value=”nilai”>

Biasanya value dibiarkan kosong pada awalnya karena menunggu input dari user.

Text Area

Text area digunakan mirip dengan text field namun memiliki bidang penulisan yang

lebih besar.

Tag penulisannya : <textarea name=”text area” row=”jumlah baris” ></textrea>

Check Box

Check Box digunakan untuk menampilkan masukan berupa pilihan dimana

pengguna dapat memilih lebih dari satu pilihan.

Tag penulisannya adalah : <input type=”checkbox” name=”checkbox” value=”checkbox”>

dimana parameter TYPE menentukan jenis masukan yang berupa CHECKBOX, NAME

adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya,

PT. PASIM SENTRA UTAMA Halaman 5 dari 102

Page 6: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

VALUE menentukan apakah pada keadaan awal checkbox ini terpilih (ON) atau

(OFF).

Radio Button

Radio Button ini digunakan unruk menampilkan masukan berupa pilihan dimana

pengguna hanya dapat memilih satu pilihan pada satu saat.

Tag penulisannya adalah : <input type=”radio” name=”radiobutton” value=”radiobutton”>

List & Menu

Elemen ini digunakan untuk menampilkan masukan berupa pilihan dimana

pengguna hanya dapat memilih satu pilihan pada satu saat dan pengguna dapat

melihat semua pilihan dengan menekan tombol dropdown yang tersedia.

Tag penulisannya adalah :

<select name=”menu1>”>

<option value=”pilihan1”>Pilihan 1

<option value=”pilihan2”>Pilihan 2

<option value=”pilihan3”>Pilihan 3

</select>

Tombol Submit/Reset

Elemen ini digunakan untuk mengeksekusi semua input dari user dan mengirimkan

nilainya ke file script. Sedangkan tombol reset digunakan untuk menghapus semua

input user dan mengulangnya dari awal.

Penulisan tag submit : <input type=”submit” name=”Submit” value=”Submit”>

Penulisan tag reset : <input type=”reset” name=” Reset” value=”Reset”>

1.3 Tools-Tools Untuk Web 1.3.1 Bahasa scripting

Bahasa scripting merupakan script yang digunakan untuk penulisan program

aplikasi. Dengan menggunakan bahasa scripting ini kita bisa mengatur atau

menuangkan format data serta format tampilan dari sistem yang dibuat dengan

meuliskan kode-kode script. Scripting yang biasa digunakan untuk pembangunan

aplikasi web adalah CGI Script, servlets, JavaServer Pages, ASP, Perl, Tcl, PHP,

PT. PASIM SENTRA UTAMA Halaman 6 dari 102

Page 7: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

ColdFusion dan lain-lain. Adapun scripting yang akan digunakan dalam

pembangunan web kali ini adalah PHP.

1.3.2 Pengolah Database

Pengolah database merupakan sistem penyimpanan data yang dapat

diakses oleh bahasa pemrograman tertentu. Pengolah database disini merupakan

sistem database yang dapat diakses oleh suatu aplikasi web. Pada kesempatan ini

kita akan menggunakan MySQL sebagai pengolah database.

Seperti halnya SQL engine lainnya, MySQL mempunyai tiga subbahasa, yaitu

Data Definition Language (DDL), Data Manipulation Language (DML), Data

Control Language (DCL). DDL berfungsi untuk obyek database, seperti membuat

tabel. DML untuk obyek tabel, seperti melihat, menambah, menghapus dan mengubah

isi tabel. Sedangkan DCL untuk kepentingan sekuritas database, seperti memberikan

hak akses ke databae dan menghapus hak tersebut dari database.

1.3.3 Web Page Builder

Web page builder merupakan aplikasi yang digunakan untuk pembangunan

sebuah web site. Web page yang umum digunakan adalah Macromedia

Dreamweaver. Selain Macromedia Dreamweaver anda dapat juga menggunakan

Microsoft Front Page untuk membuat halaman-halaman web.

1.3.4 Aplikasi Pengolah Gambar

Dalam membuat sebuah web site, tentunya seorang web designer harus

mempunyai kemampuan yang baik dalam mengatur layout dan desain web. Layout

merupakan proses penataan tata letak dan pengaturaan objek-objek yang

terdapat dalam suatu halaman, sedangkan desain merupakan proses imaginasi dan

kreasi seseorang dalam mengekspresikan dan menciptakan suatu keindahan. Untuk

menciptakan bentuk grafis yang diinginkan untuk dimasukkan kedalam halaman

web, terdapat beberapa program untuk pengolahan gambar diantaranya adalah

Adobe Photoshop.

1.3.5 Aplikasi untuk Pembuatan Animasi

Untuk mempercantik tampilan dari halam web yang kita rancang, maka

biasanya seorang web designer selain memasukkan image, teks dan suara,

memasukkan pula animasi yang merupakan gambar maupun kumpulan teks yang

bergerak, sehingga web yang dibaut terlihat lebih hidup. Untuk membuat animasi

tersebut terdapat beberapa program yang bisa digunakan seperti Adobe Image

Ready, Macromedia Flash dan Swish.

PT. PASIM SENTRA UTAMA Halaman 7 dari 102

Page 8: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

II. MACROMEDIA DREAMWEAVER

2.1 Lingkungan Kerja Dreamweaver New, Save dan Open

Untuk membuat dokumen baru, menyimpan dokumen dan membuka

dokumen caranya cukup melalui menu utama file.

Mengganti View

Dreamweaver menyediakan 3 view dalam bekerja untuk membangun website, yaitu

:

1. View Code Only

Dengan memilih jenis view ini, anda akan merasa mengetik pada editor teks

biasa hanya dalam dreamweaver sudah mengenerate tag-tag penulisan

dasarnya, seperti <html>, <head> dan <body>.

2. View Design & Code

View jenis ini memberikan sebagia tampilan design dan sebagian tampilan code.

Jadi anda dapat melihat secara langsung apa yang terjadi ditampilan ketika

anda mengetikkan tag-tag anda atau anda akan melihat dreamweaver

mengenerate code-code HTML ketika anda mendisng website.

3. View Design Only

Dengan view jenis ini anda hanya mendesign web tanpa melihat code/tag apa

saja yang digunakan pada saat mendisign.

2.2 Dasar-dasar pengerjaan Dreamweaver 2.2.1 Font Formatting

Cara memilih jenis font :

• Pilih menu text

• Pilih font

• Pilih font family yang anda inginkan

2.2.2 Text Formatting

Text dalam dreamweaver dapat dibuat dengan cara mengetikkan langsung

ditempat design atau diketik dibagian code.

PT. PASIM SENTRA UTAMA Halaman 8 dari 102

Page 9: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

2.2.3 List

Cara membuat list :

• Pada jendela properties ada 2 jenis tombol yang melambangkan kedua jenis

list :

- Unordered list :

- Ordered list :

• Click salah satunya dan mulailah untuk mengetik

• Tekan enter untuk menambahkan item dan tekan enter 2 kali untuk

mengakhirinya

2.2.4 Gambar

Cara memasukkan gambar :

• Pilih menu insert di menu utama

• Pilih image

• Pilih file gambar yang dinginkan

• Click OK

2.2.5 Tabel

Properties Tabel

Bentuk jendela properties tabel adalah sebagai berikut :

Selain properties tabel kita juga mengenal properties sel dimana kita dapat

mengaktifkannya dengan cara meng-click di sel tabel yang kita inginkan.

Membuat Tabel Baru

Cara mebuat tabel :

• Click menu insert di menu utama

• Pilih tabel dan jendela insert tabel akan aktif

• Masukkan jumlah baris di rows

PT. PASIM SENTRA UTAMA Halaman 9 dari 102

Page 10: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Masukkan jumlah kolom di columns

• Tentikan berapa luas sebuah sel dalam tabel itu di cell padding

• Tentukan jarak border tabel dan border sel itu di cell spacing

• Tentukan lebar tabel di width, tentukan juga dalam satuan percent atau pixel

dikanannya

• Atur tingkat ketebalan border di border

• Tekan OK

Membuat Kolom dan Baris Baru

Cara mengubah jumlah baris dan kolom :

• Pilih tabel yang ingin anda rubah

• Lihat jendela properties dan perhatikan rows dan cols

• Masukkan jumlah baris di rows dan jumlaj kolom di cols

Memecah Sel

Cara memecah sel dari sebuah tabel :

• Click sel yang ingin dipecah

• Pada jendela properties cell click icon yang artinya split cell into rows or

columns

• Pilih apakah anda ingin memecah sel secara baris atau kolom do spilt cell

into

• Masukkan jumlah kolom atau baris dimana sel tersebut akan dipecah

• Click OK

Menyatukan Sel

Cara menyatukan sel :

• Soror sel yang ingin disatukan

• Pada jendela properties click icon yang artinya Merge Selected Cells

• Sel-sel akan tergabung menjadi satu

Menghapus Baris dan Kolom

Cara menghapus baris dan kolom

• Pilih baris atau kolom yang ingin anda hapus

• Pilih menu modify di menu utama

• Pilih tabel dan pilihlah delete rows / delete columns

• Baris atau kolom anda akan terhapus

Mengenal Ukuran Tabel Percent/Pixel

Tabel memiliki sel-sel. Jika ukuran tabel semakin besar maka ukuran sel-sel didalmnya

juga akan semakin besar. Dreamweaver menawarkan 2 buah satuan untuk ukuran

tabel, yaitu :

• Ukuran Pixel

PT. PASIM SENTRA UTAMA Halaman 10 dari 102

Page 11: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Jika ukuran tabel kita menggunakan satuan pixel, maka sebenarnya kita

meminta dreamweaver untuk membuat ukuran tabel berdasarkan titik-titik

pixel tersebut. Contoh : tabel dengan panjang 700 pixel, maka dreamweaver

akan benar-benar membuat tabel dengan panjan 700 pixel. Jika panjangnya

melebihi resolusi monitor kita maka tabel tersebut tidak bisa kita lihat secara

keseluruhan di monitor.

• Ukuran Percent

Berbeda dengan ukuran pixel, ukuran percent merupakan satuan yang

relatif. Satuan percent selalu mengikuti panjang halaman web secara relatif.

Contoh : Resolusi halaman web kita 800 pixel. Jika kita menggunakan ukuran 60%

maka tabel yang tercipta adalah tabel dengan panjang 60%x800 = 480 pixel

2.2.6 Link

Link bisa diletakkan pada text atau gambar.

Cara membuat link text :

1. Ketik text yang ingin dibuat sebagai link.

2. Sorot / blok teks tersebut sehingga jendela properties-nya muncul.

3. Di jendela properties terdapat kotak link.

4. Browse kemana link itu akan dituju dengan menekan icon folder

Cara membuat link gambar :

1. Click gambar yang ingin dijadikan link.

2. Dijendela properties terdapat kotak link.

3. Ketik link-nya atau browse file.

Image maps

Image maps/hotspot merupakan kreasi dalam menciptakan link. Dengan adanya

image maps kita dapat membuat banyak link yang berbeda yang ada pada

gambar kita. Misalkan jika anda memiliki gambar orang, tangannya bisa dibuat link

A, sedangkan kepalanya dan kakinya adalah link B dan link C.

Cara membuat image maps :

1. Click gambar yang ingin anda jadikan image maps.

2. Lihat jendela properties di bagian kiri bawah

PT. PASIM SENTRA UTAMA Halaman 11 dari 102

Page 12: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3. Click salah satu dari ketiga bentuk image maps yang ada

• Rectangular hotspot tool : membuat hotspot dengan bentuk

kotak.

• Oval hotspot tool : membuat hotspot dengan bentuk lingkaran.

• Polygon hotspot tool : membuat hotspot dengan bentuk bebas.

4. Click dan drag mouse anda di area gambar dimana akan dibuat link.

5. Lepaskan tombol mouse dan image maps akan tercipta sesuai bentuk yang

dipilih.

Contoh :

2.2.7 Warna

Web kita mungkin akan terasa hambar jika warna yang digunakan hanya hitam dan

putih saja. Padahal komputer memfasiltasi kita dengan ± 16,7 juta warna yang bisa

digunakan dan dreamweaver memfasilitasi warna-warna itu.

Warna background

1. Click menu modify di menu utama

2. Pilih page properties

3. Disana ada kotak background dengan kotak warna

4. Click kotak warna dan pilih warna yang diinginkan

5. Click OK

PT. PASIM SENTRA UTAMA Halaman 12 dari 102

Page 13: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Warna Text

1. Sorot / blok text yang akan dimaipulasi

2. Di properties click icon kotak warna

3. Pilih warna yang diinginkan

2.2.8 Form

Form memfasilitasi kita untuk web untuk bertukar informasi secara inetraktif. Sebagai

contoh Guest Book, polling menggunakan form sebagai medianya.

Cara meletakkan form di web page :

1. Click menu insert

2. Pilih form

3. Di aerea web anda akan muncul area dengan border garis putus-putus

warna merah muda

Area iniliah yang disebut dengan form. Di dalam area inilah kita akan

meletakkan objek-objek form seperti : text field, radio button, dll. Di daerah ini

pula sebuah script pemrograman akan bekerja.

Form memiliki jendela properties seperti gambar di bawah ini :

Di jendela properties kita dapat mengatur script pemrograman apa yang

bekerja, method yang digunakan dan juga target.

2.2.8.1 Form Object

Cara memasukkan form objek mirip dengan cara memasukkan form. Pilih menu

insert kemudian pilih form object. Disana terdapat bermacam-macam objek form.

1. Text Field

Cara memasukkan text field ke halaman web :

• Letakkan kursor di area form

• Pilih menu insert lalu sorot bagian form objek

• Pilih text field

PT. PASIM SENTRA UTAMA Halaman 13 dari 102

Page 14: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

2. Text Area

Text area merupakan perluasan dari text field. Oleh karena itu dari text field

sebenarnya dapat diubah menjadi text area dengan cara :

• Dijendela properties text field terdapat pilihan

• Click yang multiline

Untuk text field, text area dan password field dikenal dengan adanya init val,

yaitu inisialisasi nilai awal. Dengan mengisi init val maka field akan terisi pada

awalnya. Caranya :

• Perhatikan jendela properties ketika field di click

• Pada bagian awal init val ketiklan sesuatu

• Coba di web browser (F12) teks yang anda ketik akan ada di field

3. Check Box

Cara membuat check box :

• Letakkan kursor di area form

• Pilih menu insert lalu sorot bagian form objek

• Pilih check box

4. Radio Button

Cara membuat radio button :

• Letakkan kursor di area form

• Pilih menu insert lalu sorot bagian form objek

• Pilih radio button untuk memasukkan satu button saja atau radio group untuk

sejumlah radio button

• Jika anda memilih radio group makan akan aktif jendela seperti berikut :

PT. PASIM SENTRA UTAMA Halaman 14 dari 102

Page 15: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Pada bagian name tulisalah nama yang melambangkan variabel untuk

pilihan

• Pada bagian label ketik pilihan-pilihan. Label untuk nama yang ditampilkan di

web. Value untuk nilai yang akan ada di variabel

• Jika anda ingin menambah pilihan ataun mengurangi pilihan , gunakan

tombol dan tombol

• Pada lay out using pilihlah apakah radio-radio button tersebut akan disusun

ke bawah biasa atau menggunakan tabel

• Click OK

5. List atau Menu

Cara membuat list atau menu :

• Letakkan cursor di area form

• Click menu insert lalu sorot form object

• Pilih list/menu

Akan muncul sebuah menu drop down kecil yang memiliki jendela properties

:

Un

tuk membuat menu, pilihlah type menu dan untuk membuat list pilihlah type

list.

Bedanya jika kita membuat lsit :

- Height diisi jumlah baris dari list

- Allow multiple bisa diclick untuk memungkinkan user memilih

lebih dari satu pilihan

• Click untuk memasukkan pilihan-pilihan

PT. PASIM SENTRA UTAMA Halaman 15 dari 102

Page 16: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Masukkan dan kurangi pilihan menggunakan dan l

• Click OK

6. Tombol Submit dan Reset

Cara membuat tombol submit dan reset :

• Letakkan cursor di area form

• Click menu insert lalu sorot form object

• Pilih Button

Tombol yang muncul akan memiliki jendela properties :

• Pilih submit form untuk membuat tombol submit atau reset form untuk

membuat tombol reset pada action

• Pada label bisa diisi text yang akanada di tombol tersebut. Defaultnya

Submit atau Reset

PT. PASIM SENTRA UTAMA Halaman 16 dari 102

Page 17: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

III. PHP & MYSQL

3.1 PHP PHP merupakan sebuah bahasa scripting yang menyatu dengan tag-tag

HTML, dieksekusi di server, dan digunakan untuk membuat halaman web yang

dinamis.

3.1.1 Struktur Program PHP

Kode program-program PHP menyatu dengan tag-tag HTML dalam satu file.

Kode PHP diawali dengan tag <? atau ?PHP dan ditutup dengan tag ?> atau ?PHP>

sesuai dengan tag pembukanya. File PHP berisi tag HTML dan kode PHP diberi

ekstensi .php. Berdasarkan ekstensi ini, pada saat file diakses, server akan tahu

bahwa file mengandung kode PHP. Server akan menterjemahkan kode ini dan

menghasilkan output dalam bentuk tag HTML yang akan dikirimkan ke browser client

yang mengakses file tersebut.

Contoh program PHP : <HTML>

<HEAD>

<TITLE> PEMROGRAMAN PHP </TITEL>

</HEAD>

<BODY>

<CENTER>

<?

echo “Baris ini ditulis dengan tag PHP”;

?>

</CENTER>

</BODY>

</HTML>

Simpan contoh diatas dengan nama test.php.

Untuk penulisan komentar program ( barisyang tidak dieksekusi oleh program ) ada 3

style yang dapat digunakan, yaitu :

1. C style, komentar diawali dengan tag /* dan diakhiri dengan tag */,

style ini digunakan untuk komentar yang lebih dari satu baris.

2. C++ style, komentar diawali dengan tag //, komentar ini berlaku

hanya untuk satu baris, sehingga kalau mau memberi komentar pada

baris berikutnya maka harus mengulangi lagi menulis tag //.

3. Bourne shell style, diawali dengan tag # untuk satu baris komentar.

PT. PASIM SENTRA UTAMA Halaman 17 dari 102

Page 18: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3.1.2 Seleksi Kondisi/Pencabangan, Perulangan

Perintah pencabangan atau seleksi kondisi adalah perintah memungkinkan

pemilihan atas perintah berikutnya yang akan dijalankan. Ada 2 macam perintah

pencabagan pada PHP, yaitu :

• IF

Contoh : <?

$suhu=25;

if ($suhu<=0)

{

echo ””Air dalam wujud es;

}

else if ($suhu<100)

{

echo ””Air dalam wujud cair;

}

else

{

echo ””Air dalam wujud gas;

}

?>

• SWITCH

Contoh : <?

$i=1;

switch ($i)

{

case 0: echo ”Nilai I sama dengan nol”;break;

case 1: echo ”Nilai I sama dengan satu”;break;

case 2: echo ”Nilai I sama dengan dua”; }

?>

Ada tiga macam perintah perulangan di dalam PHP :

• FOR

Contoh : <?

For ($i=1; $i<=10; $i++)

echo ”Latihan Pemrograman PHP <br>”;

?>

PT. PASIM SENTRA UTAMA Halaman 18 dari 102

Page 19: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• WHILE

Contoh : <?

$i=1;

while ($i<=10);

{

echo ”$i<br>”;

$i++;

}

?>

• DO ... WHILE

Contoh : <?

$i=1;

do

{

echo ”$i<br>”;

$i++;

}

while ($i<=10);

?>

3.1.3 Prosedur dan Fungsi

Dalam membuat sebuah program seringkali kita membutuhkan sekumpulan perintah

yang akan digunakan berkali-kali. Untuk menghindari penulisan perintah-perintah

yang sama berkali-kali, kita dapat menggunakan subrutin. Subrutin adalah

sekumpulan perintah yang diberi anama dan kemudian dapat kita panggil. Ada 2

macam subrutin yang dikenal dalam pemrograman, yaitu :

• Prosedur

Contoh : <?

Function SelamatDatang()

{ echo ”Selamat Datang”; }

SelamatDatang();

?>

• Fungsi

Contoh :

PT. PASIM SENTRA UTAMA Halaman 19 dari 102

Page 20: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

<?

Function Kuadrat5()

{ echo return (5*5); }

echo Kuadrat5()();

?>

3.1.4 Koneksi PHP dengan HTML

Kode program PHP dapat menyatu dalam tag-tag HTML dalam satu file. Sebuah

PHP script sebenarnya adalah file HTML biasa yang ditambahi tag-tag khusus.

Contoh : <html>

<head>

<title>Koneksi PHP dengan HTML</title>

</head>

<body>

<form action="pegawai.php" method="post">

<table>

<tr>

<td><div align="left">Nama</div></td>

<td>:</td>

<td><input name="nama" type="text"></td>

</tr>

<tr>

<td>NIP</td>

<td>:</td>

<td><input name="nip" type="text"></td>

</tr>

<tr>

<td>Jabatan</td>

<td>:</td>

<td><input name="jabatan" type="text"></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input name="alamat" type="text"></td>

</tr>

</table>

PT. PASIM SENTRA UTAMA Halaman 20 dari 102

Page 21: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

<input type="submit" name="Submit" value="Kirim">

<input type="submit" name="Submit2" value="Reset">

</form>

</body>

</html>

Simpan dengan nama file : data.htm

Program diatas merupakan tampilan HTML, yang di pakai sebagai media inputan

data dengan menggunakan variabel diluar PHP. Pada program diatas

menggunakan button submit untuk mengirim data yang diinputkan dan pada

metode HTML dalam mengirimkan data menggunakan metode ”Post”.

Dibawah ini meripakan program untuk menampilkan data yang diinputkan dari file

data.htm

Contoh : <html>

<body>

<center>

<form method=get action=data.htm>

<tabel>

<tr>

<td>Nama</td><td>:</td><td><?echo $nama?></td>

</tr>

<tr>

<td>NIP</td><td>:</td><td><?echo $nip?></td>

</tr>

<tr>

<td>Jabatan</td><td>:</td><td>

<? echo $jabatan ?>

</td>

</tr>

<tr>

<td>Alamat </td><td>:</td><td><?echo $alamat?></td>

</tr>

</tabel>

</form>

</body>

</html>

Simpan dengan nama file pegawai.php

Kemudian test, dan lihat hasilnya.

PT. PASIM SENTRA UTAMA Halaman 21 dari 102

Page 22: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3.2 MYSQL MySQL merupakan software database yang termasuk paling populer di

lingkugan Linux, kepopuleran ini karena ditunjag performansi query dari

databasenya yang saat ini bisa dikatakan paling cepat dan jarang bermasalah.

MySQL telah tersedia juga di lingkungan Windows.

Beberapa perintah MySQL yang sering digunakan :

• Perintah untuk membuat database #create database dbname;

• Perintah untuk membuat tabel di dalam database yang telah dibuat #use dbname;

#create tabel tbname(field1 type_var, field2 type_var);

• Perintah untuk menambah data pada tabel #insert into tbname(field1,field2) values (’nilai1’,’nilai2’);

• Perintah untuk menampilkan data pada tabel #select * from tbname

• Perintah untuk menghapus data pada tabel #delete from tbname;

• Perintah untuk mengaupdate data pada tabel #update tbname set field1=’nilai1’, field2=’nilai2’;

3.3 Koneksi Database PHP mempunyai kemampuan untuk mengakses contain dari suatu database

ke halaman web. Database yang dapat diakses lewat PHP adalah datbase ODBC,

database server seperti MySQL dan juga Oracle.

Contoh Koneksi : <?

// Database settings

$dbhost = "localhost"; // ini nama host atau komputer server mysql

$dbusername = "root"; // ini nama user database

$dbpassword = ""; // ini nama password user database

$dbname = "pelatihan_web"; // nama database yg dipilih

if (!$koneksi=mysql_connect($dbhost,$dbusername,$dbpassword))

{

echo mysql_error();

return 0;

}

mysql_select_db($dbname,$koneksi);

?>

PT. PASIM SENTRA UTAMA Halaman 22 dari 102

Page 23: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Membuka tabel dan menjalankan query : <?

$sql=”select * from namatabel”;

if (!$res=mysql_query($sql,$koneksi))

{

echo mysql_error();

return 0;

}

?>

Menampilkan hasil query : <?

While ($baris=mysql_fetch_row($rs))

{

echo $baris[0];

echo $baris[1];

echo $baris[2];

}

?>

Menambah Data : <?

$sql=”insert into tb(field1,field2,field3) values

(‘nilai1’,’nilai2’,’nili3’)”;

if (!$res=mysql_query($sql,$koneksi))

{

echo mysql_error();

return 0;

}

?>

Menghapus Data : <?

$sql=”delete from tb”;

if (!$res=mysql_query($sql,$koneksi))

{

echo mysql_error();

return 0;

}

?>

PT. PASIM SENTRA UTAMA Halaman 23 dari 102

Page 24: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

BAB IV

MEMBUAT GRAFIK DENGAN PHOTOSHOP

1. Pengenalan Adobe Photoshop 7

Adobe Photoshop™ merupakan salah satu program pengolah gambar standar

profesional. Tutorial dalam artikel ini bertujuan untuk memperkenalkan fungsi penting

yang disediakan oleh Adobe Photoshop. Dengan latihan-latihan di bagian akhir,

diharapkan pembaca lebih mudah memahami dan mempraktekkan teori yang ada.

Semoga bermanfaat.

1.1. Fungsi dan tugas :

Dalam proses manipulasi gambar, pada dasarnya Photoshop digunakan untuk

melakukan tugas tugas berikut :

a. Membuat tulisan dengan efek tertentu.

Kelebihan Photoshop adalah mampu membuat tulisan dengan bermacam-

macam karakteristik. Berikut adalah contoh tulisan yang dibuat dengan

Photoshop :

b. Membuat tekstur dan material yang beragam

Dengan langkah-langkah tertentu, seorang designer bisa membuat gambar

misalnya daun, logam, air, dan bermacam gambar lainnya.

PT. PASIM SENTRA UTAMA Halaman 24 dari 102

Page 25: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

c. Mengedit foto dan gambar yang sudah ada

Manipulasi yang bisa dilakukan antara lain : mengubah posisi gambar,

mengatur pencahayaan, komposisi warna, menyambung gambar,

menambah border (frame) dan efek-efek lainnya.

d. Memproses materi web

Photoshop juga digunakan untuk keperluan web, misalnya: kompresi file

gambar agar ukurannya lebih kecil, memotong gambar kecil-kecil (slice),

dan membuat web photo gallery.

PT. PASIM SENTRA UTAMA Halaman 25 dari 102

Page 26: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Dengan Adobe Image Ready™, gambar yang sudah ada bisa dibuat untuk

keperluan web, misalnya menjadi rollover dan animasi GIF.

_

1.2. Pengenalan Gambar Bitmap

Suatu foto atau gambar bisa direpresentasikan dengan format bitmap dalam ribuan

titik <pixel> warna-warni yang membentuk suatu pola. Pada file bitmap dikenal dua

istilah penting, yaitu :

a. Resolusi atau jumlah titik persatuan luas, yang akan mempengaruhi ketajaman

dan detil file bitmap. Biasanya dinyatakan dalam satuan dpi (dot per inch).

b. Intensitas atau kedalaman warna, yang akan menentukan kualitas warna

gambar secara keseluruhan. Biasanya dikenal istilah 256 warna, high color, true

color, gradasi abu-abu(grayscale), serta hitam-putih (black & white).

c. Mode dan Model warna, Mode warna menentukan model warna yang

digunakan untuk menampilkan dan mencetak suatu image.

• RGB (Red, Green, Blue)

Persentase yang sangat besar dari spektrum yang terlihat dapat

direpresentasikan dengan mencampur merah, hijau dan biru (Red, Green

dan Blue) yang diberi warna terang dalam berbagai proporsi dan intensitas.

Dengan mencampur warna merah, hijau dan biru akan menciptakan

warna putih. 0Ieh karena itu model RGB juga disebut dengan additive

colors (warna campuran).

• CMYK (Cyan, Magenta, Yellow, Black)

CMYK didasarkan pada kualitas penyerapan cahaya dari tinta yang

dicetak pada kertas. MisaInya, warna putih terang menyebabkan tinta

PT. PASIM SENTRA UTAMA Halaman 26 dari 102

Page 27: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

menjadi tembus pandang, sebagian dari spektrumnya diserap, dan yang

lainnya K pada CWK direfleksikan kembali menuju mata

• Bitmap Mode

Mode ini menggunakan satu dari dua nilai warna (hitam atau putih) untuk

merepresentasikan pixel ke dalam image. Image dalam mode Bitmap biasa

disebut dengan

Bitmapped 1-bit karena image tersebut memiliki kedalaman bit sebanyak 1.

• Grayscale Mode

Mode ini menggunakan lebih dari 256 bayangan abu-abu. Setiap pixel dari

sebuah image dengan mode grayscale mempunyai nilai kecerahan

(brightness) dengan range 0 (hitam) sampai 255 (putih). Nilai grayscale juga

dapat diterapkan dalam persentase dengan 0% adalah putih, dan 100%

adalah hitam.

• Duotone Mode

Mode ini menggunakan 256 warna. Pada saat mengkonversi menjadi

indexed color, Photoshop akan membuat CWT (Color Lockup Table) yang

menyimpan dan mengindeks warna dalam sebuah image. Apabila ada

sebuah warna dalam image aslinya tidak muncul pada tabel, program

akan memilih warna yang terdekat dengan warna tersebut, atau

mensimulasikan warna dengan menggunakan warna yang telah tersedia.

• MultiChannel Mode

Mode ini menggunakan 256 level, dari abu-abu pada tiap channel. Image

dengan menggunakan mode Multichannel sangat berguna untuk

pencetakan khusus.

PT. PASIM SENTRA UTAMA Halaman 27 dari 102

Page 28: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

2. FASILITAS PHOTOSHOP

a. Meja Kerja

Sebagai area kerja untuk melakukan kegiatan pembuatan gambar maupun

editing gambar.

A. Toolbox

B. Statusbar

C. Layer

D. Optionbar

E. Palet

Area kerja Photoshop 7.0 terdiri dari Menu bar, Option bar, Toolbox, Layer,

Palet, dan Status bar.

b. Toolbox (Window | Tools)

Untuk membuat atau mengedit gambar tentu dibutuhkan peralatan yang

memadai. Toolbox dalam Photoshop berisi sekumpulan tool yang sering

dipakai dan masing-masing mempunyai fungsi berbeda.

PT. PASIM SENTRA UTAMA Halaman 28 dari 102

Page 29: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

c. Option Bar

Setiap tool (alat) pada toolbox mempunyai setting yang bisa diubah sesuai

dengan kebutuhan.

Untuk itu disediakan Option Bar (Window | Options). Berikut contoh option bar

untuk Rectangular Marquee Tool .

Dengan option bar pada contoh di atas, anda bisa mengganti setting

misalnya memilih seleksi yang akan diterapkan:

• Membuat seleksi baru

• Menggabungkan seleksi yang sudah ada dengan seleksi yang akan

dibuat

• Mengurangi seleksi yang sudah ada dengan seleksi yang akan dibuat,

dll

d. Palet

Palet digunakan sebagai perangkat bantu sehingga gambar bisa diedit lebih

mudah dan cepat. Palet yang ada pada Photoshop, antara lain: File Browser,

PT. PASIM SENTRA UTAMA Halaman 29 dari 102

Page 30: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Navigator, Info, Color, Swatches, Styles, History,Actions, Layers, Channels,

Paths, Paragraph, Tool Preset dan Character.

• File Browser, Brushes

• Navigator, Info

• Color, Swatches, Styles

PT. PASIM SENTRA UTAMA Halaman 30 dari 102

Page 31: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• History, Actions, Tool Preseed

PT. PASIM SENTRA UTAMA Halaman 31 dari 102

Page 32: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Layers, Chanels, Paths

• Character, Paragraph

3. OPERASI DASAR PHOTOSHOP

Hasil manipulasi gambar yang bagus pada dasarnya dibuat dengan melakukan

operasi-operasi dasar dalam urutan tertentu. Berikut adalah beberapa operasi

dasar yang sering digunakan:

a) Seleksi

Digunakan untuk memilih area gambar yang akan diedit. Dengan demikian,

manipulasi yang dilakukan pada gambar hanya akan berpengaruh pada

bagian yang diseleksi saja.

• Marquee Tool :

- Rectangular (seleksi berbentuk persegi panjang),

- Elliptical (seleksi berbentuk elips dan lingkaran),

PT. PASIM SENTRA UTAMA Halaman 32 dari 102

Page 33: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

- Single Row (seleksi satu baris dengan tinggi satu pixel) dan

- Single Column (seleksi satu kolom dengan lebar satu pixel)

• Magic Wand Tool

Membuat seleksi otomatis pada gambar berdasarkan keadaan warna

gambar itu sendiri. Bagian gambar yang mempunyai warna sama (atau

hampir sama) akan diseleksi

• Selection :

- Lasso Tool membuat seleksi berdasarkan gerakan mouse.

- Polygonal : seleksi segi banyak

- Magnetic : seleksi berdasar gerak mouse dikombinasikan dengan

warna pada gambar

• Mask, channels dan path

Digunakan untuk memanipulasi seleksi lebih lanjut (menyimpan seleksi,

meload seleksi, seleksi dengan gradasi, dll)

• Guide, Grid dan Ruler

Digunakan agar seleksi lebih mudah dibuat dan mempunyai keakuratan

yang tinggi

b) Menulis

Digunakan untuk membuat tulisan pada gambar. Anda bisa menggunakan

Type Tool :

• Horizontal (tulisan mendatar),

• Vertical (tulisan vertikal),

• Horizontal mask (seleksi dengan bentuk tulisan mendatar), dan

• Vertical mask (seleksi dengan bentuk tulisan vertikal). Untuk memanipulasi

huruf dan paragraf lebih lanjut, Anda bisa menggunakan palet Character

dan Paragraph

c) Menggambar

Digunakan untuk menggambar. Adapun fasilitasnya adalah :

• Pencil Tool

Menghasilkan gambar seperti goresan pensil

• Brush Tool

Menghasilkan gambar kuas. Pilihan air brush pada option bar membuat

brush tool berfungsi seperti cat semprot. Penerapannya pada suatu

tempat secara terus menerus mengakibatkan warna semakin banyak

(menyebar) sampai pada titik jenuh (tidak ada perubahan lagi). Ukuran

dan bentuk kuas dapat diubah melalui option bar.

PT. PASIM SENTRA UTAMA Halaman 33 dari 102

Page 34: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• History Brush Tool dan Art History Tool

Menghasilkan gambar bentuk kuas dikombinasikan dengan history

(langkah sebelumnya)

• Object Tool

Menggambar bentuk tertentu, seperti :

- Rectangle Tool (persegi panjang),

- Rounded Rectangle Tool (persegi pangang dengan sudut tumpul) ,

- Ellipse Tool (lingkaran dan elips) ,

- Polygon Tool (segi banyak),

- Line Tool (garis), dan

- Custom Shape Tool (bentuk kompleks).

• Path

Menggambar kurva vektor (bukan bitmap) baik terbuka ataupun

tertutup. Bentuk path bisa dimodifikasi lebih lanjut dengan mengubah

posisi dan arah segmen dan kait.

A : adalah garis lengkung (curved line segment)

B : adalah titik pengarah (direction point)

C : adalah garis pengarah (direction line)

D : adalah titik jangkar (selected anchor point)

E : adalah titk jangkar (unselected anchor point)

Posisi direction point dan direction line akan menentukan bentuk/shape

yang dihasilkan.

d) Pewarnaan

Digunakan untuk meramu warna.

• Gradien Tool , memberi warna gradasi pada gambar. Warna yang

digunakan bisa diedit melalui option bar

• Paint Bucket Tool , bisa memberi warna atau pattern/pola pada gambar

PT. PASIM SENTRA UTAMA Halaman 34 dari 102

Page 35: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

e) Perpindahan

Digunakan untuk memindahkan gambar atau bagian yang diseleksi. Bisa

dilakukan dengan tombol panah pada keyboard dan move tool.

f) Transformasi

Digunakan untuk mengubah posisi, ukuran atau bentuk gambar. Modifikasi

yang bisa dilakukan melalui menu Edit | Free Transform atau Edit | Transform

antara lain:

• Scale, mengubah besar skala/ukuran gambar

• Rotate, memutar gambar

• Skew, pergeseran. Misalnya mengubah bujur sangkar menjadi jajaran

genjang

• Distort, kombinasi antara skew dan scale

• Perspective, sebagai contoh membuat bujur sangkar menjadi segitiga

sama kaki atau jajaran genjang

• Flip, mencerminkan gambar baik secara horizontal maupun vertikal

g) Cropping

Digunakan untuk mengubah gambar berupa memotong ataupun

memperluas areanya. Selain itu bisa ditentukan resolusi, panjang dan lebar

gambar yang baru pada hasil cropping. Dilakukan dengan Crop Tool

h) Duplikasi

Digunakan untuk menduplikat (menggandakan) gambar atau pattern (pola).

• Clone Stamp Tool digunakan untuk meenduplikasi area tertentu pada

gambar

• Pattern Stamp Tool digunakan untuk menduplikasi pattern (pola) pada

gambar. Pattern adalah pola (berupa gambar kecil) yang disusun secara

berurutan (grid) menghasilkan gambar yang lebih besar. Analogikan

dengan ubin = pattern dan lantai = gambar.

PT. PASIM SENTRA UTAMA Halaman 35 dari 102

Page 36: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

i) Memperbaiki gambar

Digunakan untuk menghilangkan atau mengganti bagian tertentu gambar

yang tidak diinginkan. Fasilitas tersebut yaitu :

• Patch Tool : mengubah bagian tertentu pada gambar dengan gambar

lain

• Healing Tool : mengubah bagian tertentu pada gambar dengan gambar

lain. Kelebihannya dari patch tool adalah kemampuan untuk

menyesuaiakan gambar baru (tekstur, pencahayaan dan bayangan)

dengan lingkungan

j) Menghapus

Digunakan untuk menghapus bagian tertentu gambar.

• Eraser Tool menghapus

• Background Eraser Tool menghapus gambar background

• Magic Eraser Tool , menghapus dengan melakukan seleksi secara

otomatis

k) Efek ketajaman dan Smudge

• Blur Tool , dipakai untuk mengaburkan gambar.

• Sharpen Tool , dipakai untuk menambah ketajaman gambar.

• Smudge Tool , dipakai untuk memberi efek smudge (seperti terkena

gosokan tangan).

l) Efek fotografi.

• Dodge Tool , digunakan untuk mengatur pencahayaan (exposure) agar

lebih terang (light).

• Burn Tool , digunakan untuk mengatur pencahayaan agar lebih gelap

(dark).

• Sponge Tool , digunakan untuk mengatur tingkat saturasi pada gambar.

PT. PASIM SENTRA UTAMA Halaman 36 dari 102

Page 37: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

m) Slice Tool

Digunakan untuk memotong gambar menjadi bagian yang lebih kecil. Sering

dipakai untuk membuat layout table pada halaman web (HTML).

n) Mengatur pencahayaan dan warna pada gambar

Hal ini bisa dilakukan melalui menu Image | Adjustments.

4. FUNGSI TAMBAHAN PADA PHOTOSHOP

Dengan fungsi tambahan berikut, pekerjaan bisa lebih mudah dan singkat untuk

dikerjakan.

• Perangkat bantu

Membantu dalam manipulasi gambar dengan Photoshop, antara lain :

− Palet Navigator, membantu navigasi pada gambar yang besar.

− Palet Info, menampilkan informasi yang sering dibutuhkan.

− Zoom Tool, memperbesar atau memperkecil tampilan gambar.

− Hand Tool, scrolling pada gambar.

− Color Sample Tool , melihat nilai warna pada suatu daerah (titik).

− Eye Dropper Tool , menentukan warna background dan foreground

toolbox.

− Measure Tool , mengukur jarak dan sudut.

− Palet file browser, membrowse (melihat-lihat) file yang akan dibuka/diedit

− Palet tool preset, menyimpan konfigurasi option bar. Untuk meload

kembali tinggal klik dan konfigurasi option bar langsung berubah ke nilai

yang telah disave (disimpan sebelumnya).

− Workspace, menentukan letak tool-tool pada Photoshop. Untuk

menyimpan dan meload kembali worspace gunakan menu Window |

Workspace |. Misal untuk mereset workspace ke keadaan default,

gunakan menu Window | Workspace | Reset Palette Locations.

• Layer

Adalah lembaran-lembaran bertumpuk yang membangun sebuah gambar

(file dengan

ekstension .PSD). Gunakan palet layers untuk mempermudah mengedit file

dengan layer. Ada beberapa jenis layer, antara lain :

PT. PASIM SENTRA UTAMA Halaman 37 dari 102

Page 38: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

− Layer normal (raster), adalah layer yang biasa digunakan untuk

manipulasi biasa.

− Type layer, adalah layer pada teks (tulisan).

− Shape layer adalah layer yang berisi shape/bentuk.

− Layer Mask adalah layer yang berisi mask.

− Adjustment Layer atau Fill layer dipakai untuk mengubah pewarnaan

pada gambar.

• Action

Digunakan untuk mengeksekusi perintah-perintah tertentu secara otomatis.

Dengan Action,

kita bisa merekam (record) dan mengeksekusi kembali (play) langkah-

langkah dalam memanipulasi file yang telah dilakukan.

Action sering digunakan untuk mempermudah dan mempercepat proses

manipulasi agar tidak harus mengulang secara manual. Karena bisa disimpan

dalam bentuk file (dengan ekstension .ATN), kita bisa tukar-menukar Action.

Selain itu, kita juga bisa mempelajari langkah-langkah action milik orang lain

dalam memanipulasi image. Dengan menggunakan batch (menu File |

Automate | Batch), Action bisa dieksukesi pada beberapa file gambar

sekaligus.

Menurut pengalaman penulis, salah satu cara tercepat menguasai aplikasi

Photoshop adalah mempelajari action yang dihasilkan oleh desainer-

desainer kelas dunia. Anda bisa mencari Action melalui internet khususnya

pada situs www.adobe.com. Jika anda tidak mau repot-repot, sekarang

sudah banyak buku Photoshop yang menyediakan action untuk dipelajari.

• Droplet

Digunakan untuk membuat file executable (.exe) yang berfungsi melakukan

proses pengeditan otomatis pada gambar. Dilakukan dengan melakukan

drag and drop file gambar yang akan diedit ke file droplet.

5. PENGGUNAAN EFEK

Dengan hanya operasi dasar yang diutarakan sebelumnya, karya yang

dihasilkan masih terbatas dan belum tentu memuaskan. Misalnya untuk

menggambar warna emas, kristal, efek pencahayaan lensa, dll, akan sulit

dilakukan. Untuk itu Photoshop menyediakan fungsi efek, antara lain :

PT. PASIM SENTRA UTAMA Halaman 38 dari 102

Page 39: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Blending Mode, menentukan hasil pencampuran warna-warna pada

gambar. Pengubahan jenis blending mode akan menghasilkan warna yang

berbeda pula. Bisa diubah melalui palet layers, misalnya : Normal, Dissolve,

Darken, dll.

• Layer Style, mengatur style yang diterapkan pada suatu layer. Bisa diakses

melalui menu Layer |

• Layer Style |. Anda bisa memanipulasi style lebih lanjut termasuk

menerapkan, menyimpan style dengan palet style.

• Filter, digunakan untuk membuat efek tertentu (special effect) secara

otomatis pada gambar. Ada 14 filter built-in dalam Photoshop, meliputi :

Artistic, Blur, Brush Strokes, Distort, Noise, Pixelate, Render, Sharpen, Sketch,

Stylize, Texture, Video, Other, dan Digimarc.

6. Persiapan Membuat Dokumen Baru a. Membuat area kerja baru

Untuk membuat dokumen baru pilih menu File > New, sehingga akan

muncul Kotak Dialog Membuat Dokumen Baru.

Pada dibagian Preset size, pengguna akan diberikan pilihan ukuran area

kerja baru seperti pada gambar berikut ini :

PT. PASIM SENTRA UTAMA Halaman 39 dari 102

Page 40: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

b. Mengatur mage size

Pilihan yang terdapat dalam kotak dialog Image Size :

• Ukuran gambar dalam memori : Semakin banyak pixel berarti ukuran

file menjadi lebih besar, baik pada disk maupun pada memori

komputer.

• Dimensi Absolut : Nilai Width dan Height menunjukkan dimensi gambar

pada pixel. Aktifkan Resample Image untuk mengubah nilai.

• Dimensi Cetak : ketikkan tinggi dan lebar pada gambar yang akan

dicetak.

c. Melakukan Resample Image

• Lakukan untuk membuka gambar sesuai dengan intruksi yang

diberikan. File > Open kemudian cari nama filenya.

• Pilih Image > Image size untuk menampilkan kotak dialog

• Pilih kotak cek Resample Image untuk mengubah nilai resolution

dan nilai Width dan Height

• Ubah nilai Width dan Height.

PT. PASIM SENTRA UTAMA Halaman 40 dari 102

Page 41: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Tekan tombol OK

d. Mengubah ukuran cetak

Jika ingin mengubah tampilan pada halaman, dan tidak ingin

mengubah jumlah pixel pada halaman, ubah resolusi agar dapat

mencetak gambar lebih besar atau lebih kecil tanpa menambah atau

mengurangi satu pixelpun.

• Buka gambar sesuai petunjuk instruktur

• Pilih Image > Size.

• Matikan resample image agar tidak ada pixel yang dipengaruhi

pada saat mengubah ukuran gambar.

• Ubahlah setting ukuran output dengan memilih resolusi ideal pada

table berikut ini.

RESOLUSI TIDAK LEBIH TIDAK PRINTER IDEAL KURANG DARI LEBIH TINGGI

DARI Print laser 300 ppi 120 ppi 90 ppi 150 ppi Print laser 600 ppi 180 ppi 135 ppi 225 ppi Newsprint 180 ppi 135 ppi 225 ppi Coated magazine stock 267 ppi 200 ppi 330 ppi

Printer inkjet warna 300 ppi 240 ppi 400 ppi Super-fine coated stock 350 ppi 260 ppi 440 ppi

• Klik tombol OK

PT. PASIM SENTRA UTAMA Halaman 41 dari 102

Page 42: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

e. Perintah rotate canvas

Digunakan untuk menampilkan submenu yang berisikan pilihan untuk

memutar atau membalik gambar. Berikut ini submenu dari Rotate canvas

• 180° : memutar gambar yang terbalik agar kembali pada kakinya,

Alt + I, E, 1.

• 90° CW : memutar gambar 90 derajat searah jarum jam, Alt + I, E, 9.

• 90° CCW : memutar gambar 90 derajat berlawanan jarum jam, Alt +

I, E, 0)

• Arbiritary : meluruskan gambar.

• Flip horizontal : memperbaiki teks yang terbalik (alt + I + E + H).

• Flip vertikal : membalik bagian atas dan bawah gambar (alt + I, E,

V)

7. Membuat Efek Teks a. Teks timbul

Teks yang akan dibuat adalah menggunakan efek bayangan

sederhana yang bertuliskan ”Semangat Membara !” seperti pada

gambar dibawah ini.

1. Buka program Photoshop 7

2. Klik menu File > New untuk membuka dokumen baru. Setelah

kotak dialog New tampil, ikuti penyetingan berikut ini :

PT. PASIM SENTRA UTAMA Halaman 42 dari 102

Page 43: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

With : 400 pixel

Height : 200 pixel

Resolution : 100 pixel/inch

Mode : RGB Color

Contens : White

3. Klik Type Tool pada toolbox, kemudian ikuti ketentuan berikut

melalui options bar.

Font : Arial Black

Style : Italic

Size : 30 pt

Color : Red (RGB=255,0,0 atau #FF0000)

4. Buatlah teks ”Semangat Membara !”.

5. Klik menu Layer > layer Style > Drop Shadow untuk menampilkan

kotak dalog Layer Style.

6. Ikuti pengaturannya seperti pada gambar berikut ini.

PT. PASIM SENTRA UTAMA Halaman 43 dari 102

Page 44: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7. Lalu klik tombol OK untuk melihat hasil pembuatan efek

bayangan.

8. Sekarang lihat hasil karya Anda ! bagus bukan ?

b. Teks Efek Campuran

1. Buka file Efek Timbul ”Semangat Membara !”.

2. Kemudian buka menu Layer > layer Style > Bevel and Emboss.

3. Ditambahkan efek pada menu Layer > layer Style > Gradient

Overlay.

PT. PASIM SENTRA UTAMA Halaman 44 dari 102

Page 45: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

4. Lalu klik OK.

5. Lihat hasilnya. Mengagumkan !

6. Kalau kita tambahkan efek Tecture pada dialog berikut ini :

maka, hasilnya adalah :

8. Mendesain Logo sederhana Bahasan kali ini adalah cara untuk membuat logo sederhana, yang

menggunakan kata #ONE yang dikelilingi cincin seperti pada gambar berikut

ini :

1. Buat gambar baru dengan spesifikasi sebagai berikut :

PT. PASIM SENTRA UTAMA Halaman 45 dari 102

Page 46: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

2. Buat teks kata #ONE dengan ketentuan sebagai berikut :

Font : Century Gothic

Style : Bold italic

Size : 72

Color : biru ( R : 0, G : 126,B : 255 atau #007EFF)

3. Lalu buatlah New layer melalui Layers palette.

4. Klik tahan Rectangular Marquee Tool pada toolbox kemudian pilih

Elliptical marquee Tool.

5. Lakukan drag pada area gambar untuk membuat seleksi ellipse tepat di

tengah kata #ONE.

PT. PASIM SENTRA UTAMA Halaman 46 dari 102

Page 47: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6. Klik set foreground color pada toolbox, gunakan warna :

R : 50,

G : 200,

B : 0.

#32C800

7. Klik menu Edit > Fill. Setelah kotak dialog Fill tampil pilih Use > Foreground

Color.

Maka hasilnya adalah :

PT. PASIM SENTRA UTAMA Halaman 47 dari 102

Page 48: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

8. Klik menu Layer > Duplicate Layer lalu ikuti nama yang telah tersedia

yaitu Layer 1 Copy.

9. Klik menu Edit > Transform > Scale untuk menskalakan objek elips :

kemudian, Lakukan drag handle bagian tengah bawah, kanan, dan kiri

sedikit ke arah dalam. Hasilnya dapat dilihat seperti ini

10. Tekan tombol Enter untuk menghilangkan bingkai scale.

11. Klik Layer 1 pada Layers palette kemudian tekan tombol Delete.

12. Klik kanan pada Layer 1 copy lalu pilih Delete Layer. Pilih tombol Yes

ketika kotak dialog konfirmasi tampil. Hasilnya objek elips akan terpotong

bagian dalam.

PT. PASIM SENTRA UTAMA Halaman 48 dari 102

Page 49: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

13. Tekan Ctr+D untuk melepaskan seleksi objek elips.

14. Klik menu Select > Load Selection. Ikuti pengaturannya yang telah

tersedia lalu klik OK. Objek elips atau cicin akan terpilih semua.

15. Klik Lasso Tool pada toolbox lalu pilih Polygonal Lasso Tool.

16. Tahan tombol Alt, kemudian ikuti titik klik seperti gambar dibawah ini

untuk membuat seleksi tambahan.

Kemudian dicopy Layernya lalu paste. Sehingga hasilnya seperti ini :

PT. PASIM SENTRA UTAMA Halaman 49 dari 102

Page 50: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

17. Gunakan Layer > Layer Style > Bevel and Emboss dengan Style : Pillow

Emboss, Dept : 70 %, Size : 5px, Soften : 0px.

18. Tekan Ctrl+D untuk melepaskan seleksi objek elips atau cincin.

Sehingga hasilnya dapat dilihat pada gambar berikut ini :

19. Klik Layer kata #ONE pada layers Pallete.

20. Gunakan Layer > Layer Style > Bevel and Emboss.

21. Kemudian tekan OK, sehingga gambar logo akan terlihat 3 dimensi.

22. Jika Anda belum puas terhadap kreasi Anda, maka tambahkan efek-

efek yang Anda sukai. Selamat mencoba !

PT. PASIM SENTRA UTAMA Halaman 50 dari 102

Page 51: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

9. Membentuk Tekstur a. Tektur Awan

a. Buat gambar baru dengan spesifikasi sebagai berikut :

b. Kemudian pilih warna R : 0 ,G : 23, B : 225 atau # 0084E1

c. Gunakan Filter > Render > Clouds

b. Tektur Pasir

c. Buat gambar baru dengan spesifikasi sebagai berikut :

PT. PASIM SENTRA UTAMA Halaman 51 dari 102

Page 52: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

d. Kemudian pilih warna R : 255 ,G : 200, B : 7 atau # FFC807

e. Gunakan Filter > Render > Clouds

f. Lalu pilih menu Filter > Texture > Texturizer dengan Texture : SandStone,

Scalling : 150%, Relief : 9, Light Direction : Top.

PT. PASIM SENTRA UTAMA Halaman 52 dari 102

Page 53: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

g. Lalu pilih tombol OK, maka hasilnya adalah sebagai berikut :

10. Memanipulasi Foto a. Ambil dua gambar yang ingin Anda rubah. Tentunya mengambil

gambar pertama adalah seorang olahragawan terkenal, sedangkan

pada gambar yang kedua adalah diri Anda yang ingin seperti

olahragawan tersebut. Sebagai contoh, Anda dapat melihat dua

gambar berikut ini :

Jika kedua gambar tersebut di manipulasi maka akan tercipta sebuah

foto yang unik. Seperti pada gambar berikut ini :

PT. PASIM SENTRA UTAMA Halaman 53 dari 102

Page 54: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

b. Kemudian pilih gambar yang kedua. Lalu klik Lasso Tool. Lalu pilih

Polygonal lasso Tool. Lalu seleksikan wajah yang diinginkan sesuai selera

Anda.

c. Kemudian ambil gambar yang telah deselect tersebut dengan cara

mengcopykan wajahnya : Ctr+Del.

d. Klik gambar pertama. Kemudian paste : Ctr+V Sehingga akan terlihat

hasilnya sebagai berikut :

e. Karena ukuran gambar kedua lebih kecil, maka harus dirubah ukuran

mukanya agar serasa pas jika digabungkan. Maka klik Edit > Free

Transform.

PT. PASIM SENTRA UTAMA Halaman 54 dari 102

Page 55: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

f. Lalu atur sedemikian rupa hingga ukura wajah/kepala selaras dengan

badan olahragawan tersebut.

g. Setelah selaras, maka rubahlah warna kulit wajah gambar kedua agar

mengikuti warna kulit badan olahrawan terkenal tersebut dengan cara :

Image > Adjusments > Hue / saturation…

h. Seletalh warna mendekati sama dengan warna yang lain, maka

lakukanlah penghapusan yang seolah-olah menyambung. Hal ini

dilakukan dengan cara plikih Eraser Tool. Lalu atur propertisnya.

i. Kemudian lakukan penghapusan secara teratur pada bagian leher

gambar kedua.

PT. PASIM SENTRA UTAMA Halaman 55 dari 102

Page 56: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

j. Lalu untuuk terlihat lebih menarik lagi. Maka tambahkan bingkai fotonya

dengan cara mengklik Rectangular Marque Tool. Kemudian atyr

proertisnya.

k. Kemudian pilih gambar yang telah diedit tersebut. Lalu seleksikan pada

bagian pinggirnya sesuai dengan ukuran bingkai. Lalu klik menu Select >

Inverse atau tekan Shift+Ctrl+I untuk membuat seleksi lainnya disekitar

seleksi kotak di bagian kepala olahragawan nasional kita. Maka hasilnya

adalah sebagai beikut :

l. Kemudian tekan tombol Delete untuk menghapus area sekitar kotak

seleksi dan tekan Ctrl+D untuk menghilangkan bingkai seleksi. Dan hasil

akhirnya adalah :

PT. PASIM SENTRA UTAMA Halaman 56 dari 102

Page 57: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

m. Jika Anda belum puas juga, maka lakukanlah beberapa editan pada

gambar tersebut, seperti adanya penambahan efek Bevel and Emboss,

penambahan teks dan sebagainya .

11. Penggunaan Efek Campuran a. Efek bola bersinar

i. Anda ingin memiliki diri Anda sedang menggenggam bola

yang bersinar atau sinar bola ? Lakukanlah untuk membuka

gambar Anda.

ii. Kemudian hilangkan gambar backgroundnya menjadi warna

putih.

PT. PASIM SENTRA UTAMA Halaman 57 dari 102

Page 58: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

iii. Kemudian tambahkan efek awan yang berwarna merah,

dengan cara memilih warna Red (R : 255,G : 0,B : 0 atau

#FF0000). Kemudian pilih layer cbackgroundnya dan klik Filter >

Render > Clouds

iv. Setelah itu maka Anda dapat menambahkan efek bola bersinar

dengan cara : pilih layer gambar orang kemudian Filter >

Render > Lens Flare... kemudian atur propertinya.

PT. PASIM SENTRA UTAMA Halaman 58 dari 102

Page 59: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

v. kemudian klik OK sehingga hasilnya adalah seperti pada

gambar berikut ini :

b. Efek Twister

1. Buat file dokumen baru dengan ukuran bebas, kemudian

bulatlah efek awan biru seperti pada gambar berikut ini :

2. Kemudian pilih menu Filter > Distort > Twirl...

PT. PASIM SENTRA UTAMA Halaman 59 dari 102

Page 60: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3. Kemudian klik tombol OK, maka asilnya akan berbentuk Twister.

PT. PASIM SENTRA UTAMA Halaman 60 dari 102

Page 61: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

BAB V

MEMBUAT ANIMASI DENGAN SWISH

5.1 Lingkungan Kerja Swish

Seperti terlihat pada gambar, bahwa lingkungan kerja Swish terdiri dari :

1. Main Menu

2. Toolbox, berisi tombol-tombol yang mengakses fasilitas untuk membuat objek

animasi semacam garis, kurva dan bentuk-bentuk geometris, dan fasilitas

untuk memanipulasi objek-objek tersebut.

3. Toolbars, terdiri dari :

PT. PASIM SENTRA UTAMA Halaman 61 dari 102

Page 62: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

- Standard Toolbar, merupakan toolbar yang berisi tombol-tombol perintah

standar yang umum pada aplikasi-aplikasi windows, semacam perintah

untuk membuat file baru, membuka file, menyimpan file dan lain

sebagainya.

- Insert Toolbarm, toolbar ini menyediakan fasilitas untuk

memasukkan/menyisipkan objek-objek animasi ke dalam bidang lauout

panel. Pada toolbar ini tersedia tombol-tombol untuk menyisikan objek-

objek semacam teks, image dan button.

- Control Toolbar, sesuai dengan namanya, toolbar ini memiliki tombol-

tombol untuk mengontrol / mengendalikan animasi yang telah dibuat.

Tombol-tombol yang ada pada toolbar ini berfungsi untuk memainkan

efek yang telah disertakan pada animasi, menghentikan movie,

berpindah frame dan lain sebagianya.

4. Panel, terdiri dari :

- Timeline Panel, panel ini adalah panel dimana pembuat animasi

menempatkan dan menentukan pewaktuan dari objek animasi.

Menentukan kapan suatu objek muncul untuk dimanipulasi, menentukan

kapan suatu efek animasi digunakan dan lain sebagainya.

- Outline Panel, penel ini berisi susunan objek-objek animasi yang

digunakan pada layout panel.

- layout panel, panel ini berfungsi untuk menempatkan objek animasi yang

dibuat.

- Text Panel, panel ini digunakan apabila kita ingin menambahkan teks

pada animasi.

5. Status Bar, merupakan bagian yang menampilkan informasi tentang apa

yang tengah dikerjakan oleh user.

5.2 Membuat Animasi Animasi yang akan dipelajari adalah animasi basic, dimana anda akan mencoba

untuk membuat animasi dengan objek berupa teks dan graphic.

1. Animasi Pertama

Langkah-langkah membuat animasi :

• Pilih menu File dari main menu kemudian pilih New

• Buatlah gambar lingkaran dengan memilih Ellipse dari toolbox

• Pilih menu Insert > pilih Effect >Slide In > From Left ( maksudnya bahwa kita

akan membuat pergerakan / animasi untuk gambar lingkaran tersebut)

PT. PASIM SENTRA UTAMA Halaman 62 dari 102

Page 63: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Setelah itu akan muncul jendela Slide In From Left Setting, kemudian pada

Duration isi dengan nilai 15, setelah itu tekan tombol close

• Untuk menjalankan animasi, click tombol play ( ) pada sontrol toolbar,

maka anda dapat melihat animasi pada gambar lingkaran, untuk

menghentikannya tekan tombol stop ( )

• Begitu langkah seterusnya jika anda mau membuat animasi dengan objek

graphic.

2. Animasi Kedua

Langkah-langkah membuat animasi :

• Masih pada dokumen yang sama

• Pilih Insert Text dari insert toolbar, untuk membuat animasi berupa text

• Pada layout panel akan terlihat text, kemudian ganti text tersebut dengan

kata LATIHAN pada bagian text panel

• Setelah itu beri efek pada text tersebut dengan cara Click kanan pada text >

pilih Effect > Explode

• Play

3. Animasi Ketiga

Langkah-langkah membuat animasi :

• Buatlah sebuah objek teks

• Ubahlah objek teks menjadi sprite menggunakan menu Modify > Convert >

Convert to sprite. Terlihat dari panel outline bahwa objek teks bertuliskan

‘Text’ berubah menjadi objek sprite bernama ‘Sprite’. Ubahlah nama objek

sprite ini menjadi ‘Animasi’ menggunakan tobol F2 dan mengubah namanya.

• Masuklah ke dalam sprite ‘Animasi ’ dengan cara klik dua kali pada sprite

’Animasi’

• Dari panel timeline, buatlah efek blur pada objek teks ’Text’ sepanjang 20

frame dengan cara klik kanan pada frame 0 dari baris objek ’Text’ dan

pilihlah menu blur. Secara default, durasi efek blur adalah 20 frame. Sekarang

klik kanan pada frame 20 dari baris sprite ’Animasi’ dan pilihlah Goto Frame.

Secara default frame yang dituju adalah frame 0.

• Kembali ke scene 1, klik tanda di sebelah kiri sprite ’Animasi’ supaya

berubah menjadi tanda . Sekarang, buatlah efek transform pada sprite

’Animasi’ sepanjang 20 frame.

• Untuk mencoba klik tombol play pada control toolbar. Anda akan melihat

kombinasi efek blur dan efek transform.

PT. PASIM SENTRA UTAMA Halaman 63 dari 102

Page 64: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

4. Animasi Keempat

• Buatlah sebuah persegi panjang dengan sudut-sudutnya berupa round

corner (berbentuk tumpul seperti lingkaran, tidak lancip). Cara membuat

bujur sangkar dengan round corner adalah sebagai berikut :

- Pilihlah ’rectangle’ dari toolbox. Klik (jangan ditahan) tombol kiri mouse

pada posisi di titik kiri atas persegi panjang yang akan anda buat

- Seret mouse ke titik kanan bawah dari persegi panjang yang akan anda

buat

- Setelah sampai pada titik kanan bawah, klik dan tahan tombol kiri mouse,

seret ke dalam daerah persegi panjang, sehingga sudut-sudutnya menjadi

berbentuk round corner, atau sesuai dengan yang anda kehendaki

• Setelah persegi panjang jadi, aturlah warnanya sesuai keinginan anda dari

shape panel.

• Buatlah sebuah tulisan menggunakan icon ’Insert Text’ dari Insert Toolbar.

Ubahlah jenis huruf dan isi tulisan ini dari text panel jika anda inginkan,

misalnya ’Rollover’

• Group kedua objek yang telah dibuat sebelumnya (’Rectangle’ dan tulisan

’Rollover’) dari outline panel dengan cara menahan tombol shift sambil

memilih keduanya. Selanjutnya group keduanya dengan memilih menu

Modify > Grouping > Group, atau menggunakan kombinasi Ctrl+G

• Setelah kedua objek anda buat menjadi objek Group, dari group panel

gantilah nama ’Group’ dengan nama lain, misalnya ‘Roll’

• Dengan masih memilih objek group ’Roll’, ubahlah lagi objek group ini

menjadi tombol menggunakan menu Modify > Convert > Convert to Button.

Ubahlah nama objek button ini menjadi ‘Tombol’

• Sekarang pilihlah objek ‘Rectangle’ yang berada di bawah kondisi Over

State. Dari shape panel, ubahlah fill style-nya menjadi solid dan ubahlah

warnanya sesuai keinginan anda (misalnya biru terang). Objek ini akan

menjadi objek yang dihasilkan jika kursor mouse melewati objek ’Tombol’

• Selanjutnya pilih objek ’Rectangle’ yang berada di bawah kondisi Down

State. Dari shape panel, ubahlah fill style-nya menjadi solid dan ubahlah

warnanya menjadi biru gelap. Objek ini akan menjadi objek yang dihasilkan

jika anda menekan tombol kiri mouse pada objek ‘Tombol’

Sekarang coba jalankan Movie anda menggunakan icon play. Arahkan kursor

mouse melewati tombol tersebut. Tombol akan berubah warnanya menjadi biru

terang . Selain itu, cobalah tekan dan tahan tombol kiri mouse pada tombol ini

maka warnanya akan menjadi biru gelap.

PT. PASIM SENTRA UTAMA Halaman 64 dari 102

Page 65: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

BAB VI

STUDI KASUS (MEMBANGUN SITUS WEB KOMPUTER )

Pada studi kasus ini kita akan memulai dengan proyek yang sederhana,

yang nantinya kita akan belajar cara mendesain dan mengatur layout situs dengan

bantuan tabel biasa(tabel standar). Studi kasus ini mengambil tema tentang situ

sebuah toko penjualan komputer yang bernama ”VISTA COMPUTER”.

6.1 Membuat Folder Situs Komputer Tujuan dari membuat folder situs adalah untuk memudahkan anda dalam

bekerja, karena nantinya anda akan bekerja dengan banyak file gambar dan file

untuk halaman web itu sendiri. Terlebih lagi dalam halaman web, nantinya anda

akan bekerja dengan banyak link dan gambar, maka dengan penyimpanan file-file

web dan gambar hanya di satu folder khusus, akan menghidarkan terjadinya link

yang tidak berfungsi (broken link).

Cara membuat folder situs :

1. Buka Windows Explorer, klik direktori c, lalu klik menu file > new folder, dan

berinnama folder tersebut, misalnya Proyekweb

2. Buat lagi subfolder dengan nama images di dalam folder Proyekweb

6.2 Membuat File Baru

Cara membuat file barru :

1. Buka program Dreamweaver

2. Pada bagian Create New, klik HTML, di halaman web yang baru atau masih

kosong akan ditampilkan dan siap untuk diisikan dengan berbagai gambar

dan teks informasi didalmnya

6.3 Mendefinisikan Situs Lokal

Situs lokal merupakan suatu tempat dalam hardisk yang berfungsi untuk

menampung atau menyimpan file-file halaman web dalam bentuk root folder (folder

utama) dan subfolder (bagian dari root folder), dimana anda akan menempatkan

dan menyimpan file-file web.

Cara mendefinisikan situs lokal :

1. Buka program macromedia Dreamweaver MX dari program menu, kemudian

klik menu site > manage sites, akan tampil kotak dialognya

PT. PASIM SENTRA UTAMA Halaman 65 dari 102

Page 66: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

2. membuat file baru, klik HTML pada bagian Create New atau klik menu File >

New

3. mendefinisikan sebuah situs dengan cara klik menu Site > New Site... , pillih tab

advanced. Isikan pada bagian Site Name: situs komputer, browse atau isikan

dengan direktori proyek tadi Local Root Folder: C:\proyekweb, Default image

folder : C:\proyekweb\images. Kemudian klik tombol OK. Lihat gambar

berikut

4. Hasil dari definisi situs mobil ini juga dapat dilihat pada panel files yang

biasanya terdapat di sebelah kanan Dreamweaver MX. Seperti gambar

berikut :

PT. PASIM SENTRA UTAMA Halaman 66 dari 102

Page 67: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6.4 Menyimpan File Apabila anda telah selesai mendesain atau bekerja di suatu file, simpanlah

hasiln pekerjaan anda.

Cara menyimpan file :

Klik menu File > Save As, akan tampil kotak dialognya. Isikan nama file-nya pada

bagian File Name : index.htm (atau nama file sesuai keinginan anda), lalu klik tombol

save.

6.5 Membuat layout Web Sebelum anda membuat layout web yang akan anda buat, sebaiknya anda

membuat design layout tersebut terlebih dahulu, baik melalui media kertas maupun

media Photoshop.

Misalnya anda akan membuat layout seperti gambar dibawah ini :

Header

Content

Footer

Setelah menggambar layout, sekarang buatlah layout yang telah dirancang

tersebut kedalam halaman web. Cara membuat layout :

1. Klik menu insert > tabel, akan tampil kotak dialognya. Isikan pada rows : 4,

columns : 2, table width : 790 pixels, Klik tombol OK. Biarkan caption tabel

kosong Klik tombol OK. Akan terbentuk sebuah tabel dengan 4 baris dan 3

kolom

2. Pilih tabel, isikan tag align=”center” pada tag table.

PT. PASIM SENTRA UTAMA Halaman 67 dari 102

Page 68: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3. Blok semua kolom pada baris kedua menggunakan mouse, lalu klik menu

modify > tabel > merge cells, maka kolom-kolom pada baris kedua akan

menyatu menjadi satu kolom saja.

4. Pada baris ketiga kita hanya memerlukan dua kolom, blok kolom 2&3 di baris

kedua, lalu klik modify > tabel > merge cell.

5. Pada baris keempat anda juga hanya memerlukan 1 kolom saja seperti pada

baris kedua, maka lakukan caranya seperti pada langkah 4.

6.6 Menghias Header Situs Komputer Bagian header terletak pada baris pertama dan kedua. Pertama-tama anda

akan mengisi header pada baris pertama dengan gambar-gambar berupa nama

toko komputer, motto, alamat, logo dan foto-foto yang berhubungan dengan situs

tersebut.

6.6.1 Hiasan Header pada Baris Pertama

Header pada baris pertama terdiri dari 3 file gambar dengan format jpg,

yaitu header_01.jpg, header_02.jpg, header_03.jpg. (Semua gambar sudah tersedia).

Cara memasukkan gambar :

1. Letakkan kursor pada kolom 1 di baris pertama, lalu klik menu insert > image,

akan tampil kotak dialognya, carilah file gambar dengan nama:

header_01.jpg.

2. Jika file gambarnya sudah ditemukan, klik tombol OK, gambar header_01.jpg

akan masuk ke dalam kolom 1 .

3. Kemudian, pindahkan kursor ke kolom 2 di baris pertama, lalu masukkan

gambar header_02.jpg.

4. atur lebar kolom pada tabel sehingga akan berbentuk seperti pada gambar

berikut

PT. PASIM SENTRA UTAMA Halaman 68 dari 102

Page 69: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6.6.2 Hiasan Header pada Baris Kedua

Pada bagian ini kita akan mengisikan teks yang berjalan dari kanan ke kiri

(marquee).

1. Letakkan kursor pada baris kedua, lalu pilih pada Properties cell-nya bagian

Bg:Merah (#FF0000)

2. masih di baris kedua, klik menu view > code and design, maka akan tampil

mode code diatas mode design, tuliskan teks dan tag : <marquee>Pusat

komputer Murah ...</marquee> pada mode code.

3. Tutup mode code dan kembali ke design mode, klik menu vies > design,,

akan langsung terlihat teks yang telah kita masukkan di mode code.

4. Blok teks tersebut, lalu ubahlah format teksnya pada properties dengan font :

Arial, size : 12, warna putih dan tebal.

6.7 Mengisi Content Situs komputer

Content adalah suatu area utama dalam sebuah halam web, karena pada

area inilah berisi berbagai objek dan teks informasi utama yang ingin disampaikan

oleh pemilik situs.

6.7.1 Content untuk Kolom Navigasi

Baris ketiga mempunyai dua kolom, pada kolom 1 akan menempati link-link

atau tombol yang berfungsi untuk nevigasi dalam situs tersebut. Pada kasus ini anda

akan memasukkan tujuh tombol flash yang sudah disediakan oleh Dreamweaver.

1. Letakkan kursor pada kolom 1 di baris 3, lalu pilih pada properties cellnya

bagian Horz : Center dan Vert : Top

2. Kemudian tekan tombol enter pada keyboard untuk membuat paragraf

baru. Klik menu insert > tabel, akan tampil kotak dialognya. Isikan pada rows :

7, columns : 1, table width : 110 pixel, cell padding : 0 dan cell spacing : 5

3. pada tabel yang baru, letakkan kursor pada baris pertama, lalu klik menu

insert > interactiver images > flash button, akan tampil kotak dialognya. Pilih

pada style : Beveled Rect-Blue, Button text : HOME dan link: proyek1.htm.

Masukkan tombol lainnya ( PROFIL, BERITA, PRODUK, LAYANAN, DUKUNGAN,

PT. PASIM SENTRA UTAMA Halaman 69 dari 102

Page 70: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

KONTAK KAMI) satu persatu dengan cara yang sama dengan link yang sama

yaitu ke halaman index.htm.

6.7.2 Content untuk Kolom Informasi Utama

1. Letakkan kursor pada kolom kedua di baris ketiga, lalu pada properties pilih

pada bagian vert:Top. Kemudian tekan tombol Shift+Enter di keyboard untuk

pindah baris. Tuliskan teks salam ’SELAMAT DATANG DI SITUS VISTA KOMPUTER’,

aturlah format telksnya pada properties.

2. Kemudian tekan tombol enter pada keyboard untuk membuat paragraf

baru. Klik menu insert > image, akan tampil kotak dialognya, carilah gambar

senyum.jpg.

3. Tuliskan teks informasi secukupnya di sebelah kanan gambar.

4. Kemudian pilih gambar tersebut dan atur propertiesnya, isikan pada H space

: 20 dan pilih align : left.

5. Tambahkan lagi teks informasi lainnya.

6. Kemudian ubahlah warna background dari kolom kedua di baris ketiga

dengan warna Bg:#E6EBF1. Ubah juga warna background untuk kolom

pertama di baris ketiga dengan warna Bg:#869B9E.

PT. PASIM SENTRA UTAMA Halaman 70 dari 102

Page 71: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6.8 Bagian Footer

Kita akan mengisikan copyright dari toko komputer dan tahun pembuatan

situ tersebut

1. Letakan kursor pada baris keempat lau pilih properties Cell-nya

Bg:#FF0000

2. Tuliskan Copyright © 2005 Vista Computer. All rights reserved. Untuk

memasukan karakter copyright klik menu insert > html > Special

characters > copright

3. Blok teks tersebut lalu ubahlah format teksnya pada properties Font: Arial,

Size: 12, Tebal(B), align: center dan warna putih

6.9 Memberi Judul Situs Komputer

Untuk memberi judul situs menggunakan Dreamweaver, pada bagian Title,

ubah teks untittled Document menjadi Vista Computer

PT. PASIM SENTRA UTAMA Halaman 71 dari 102

Page 72: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6.10 Menjalankan Situs Komputer di Browser

Setelah selesai membuat situs, kita dapat melihat hasilnya melalui browser.

Caranya, klik menu file > priview in browser > iexplorer atau tekan tombol F12 di

keyboard.

PT. PASIM SENTRA UTAMA Halaman 72 dari 102

Page 73: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

BAB VII

STUDI KASUS (MEMBANGUN SITUS WEB KOMPUTER-Lanjutan )

Aplikasi Web adalah kumpulan halaman dari sebuah situs yang dapat

berinteraksi dengan para pengunjungnya, halaman web lainnya dan juga dengan

sumber data lainnya. Jadi, hlaman sebuah aplikasi web adalah sebuah halaman

yang dapat mengolah data yang diinginkan, sehingga isi dan tampilan

halamannnya akan selalu berubah-ubah dengan kebutuhan (dinamis).

7.1 Tahap Awal

Kita akan membuat halaman tambahan pada situs komputer yang telah kita

buat tadi dengan menambahkan fasilitas berita, Langkah-langkahnya adalah

sebagai berikut

1. Asumsikan komputer telah terinstall apache web server dan database server

MySQL yang telah tersedia di program PHPTRIAD.

2. Buat database baru dengan nama berita dan sebuah tabel database

dengan nama artikel pada MySQL dengan rincian tabel sebagai berikut :

Tabel Artikel

Nama field Tipe data

No_artikel Int(100)

Judul Varchar(100)

Penulis Varchar(100)

tanggal Date

Isi_artikel Text

gambar Varchar(100)

3. Kita akan memodifikasi halaman design situs vista komputer yang telah kita

buat, klik site > edit sites, pilih proyek web, tekan tombol edit, ganti local root

folder dengan nama direktori tempat proyekweb berada, yaitu di

c:\apache\htdocs\proyekweb. Seperti pada gambar berikut :

PT. PASIM SENTRA UTAMA Halaman 73 dari 102

Page 74: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

4. Pilih testing server pada tab Category, pilih server model : PHP MySQl,

access:Local/network, url prefix: http://localhost/latihan klik tombol OK. Sperti

pada gambar berikut :

PT. PASIM SENTRA UTAMA Halaman 74 dari 102

Page 75: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

5. kita akan membuat koneksi ke database dengan menggunakan

macromedia Dreamweaver, aktifkan dulu server MySQL , caranya buka

windows explorer, lalu masuklah ke folder c:\apache\mysql\bin. Carilah file

winmysqladmin.exe, klik dua kali file tersebut.

6. Buka file index.html yang telah dibuat pada bab 6 save as index.html menjadi

index.php, halaman ini yang pertama kali diakses localhost/index.php.

7. klik menu window>databases untuk menampilkan panel databases.

Kemudian klik tombol + dan pilih mysql connection

PT. PASIM SENTRA UTAMA Halaman 75 dari 102

Page 76: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

8. Akan tampil kotak dialog mysql connection, isikan form mysql connection

dengan seperti pada gambar tekan select untuk memilih database

9. pilih database berita tekan tombol OK, tekan tombol OK lagi untuk kembali

ke halaman web

10. ganti url tombol berita pada bagian content dengan cara klik tombol berita

dan pada bagian properties, klik tombol edit ganti link dengan berita.php,

tekan tombol OK

PT. PASIM SENTRA UTAMA Halaman 76 dari 102

Page 77: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7.2 Membuat Halaman input data dengan Recordset Recordset berfungsi sebagai penghubung antara database yang meyimpan

data dengan server aplikasi (PHP). Recordset akan mengambil data dari

database, kemudian data akan disimpan dalam memori server aplikasi PHP

agar pengambilan data dapat dilakukan dengan cepat.Tahapan membuat

halaman input data :

1. Save as index.php menjadi input_berita.php, hapus gambar dan komentar

pada baris kedua dan kolom kedua 2. klik menu window > server Behaviors untuk menampilkan panel server

behaviors. Klik tombol +, lalu pilihlah recordset

3. Akan tampil kotak dialog Recordset (gambar), isikan beberapa item berikut :

• Name, isi dengan nama recordset yang diinginkan, misalnya : rs_berita • Connection, klik tombol panah di sebelah kanan, lalu pilih nama

sambungan ke database yang diinginkan, yaitu latihan • Table, pilihlah tabel artikel • Coloumn, seharusnya sudah berisi kolom-kolom milik tabel artikel • Sort berfungsi untu mengurutkan data pada saat ditampilkan, sebagai

contoh pilih tanggal Klik tombol test untuk menguji. Jika sukses tekan tombol OK

PT. PASIM SENTRA UTAMA Halaman 77 dari 102

Page 78: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

4. kita akan membuat form untuk menginputkan berita. Klik menu view > Design

agar berada di mode design Dreamweaver. Klik menu insert > Form 5. akan tampil form di dokumen, klik garis merah milik form, kemudian pada

properties-nya, isikan pada bagian form name : input

6. pada kolom pertama di baris pertama hingga kelima tuliskan tiap kolom dari

tabel artikel yaitu judul, Nama Penulis, Tanggal Penulisan, Artikel dan Gambar.

Seperti pada gambar 7. Pada kolom kedua, isikan object TextField. Caranya klik menu Insert > Form >

TextField, begitu seterusnya sebanyak 4 buah. Sedangkan pada baris

keempat isi dengan komponen Textarea, klik menu insert > form > textarea. 8. berilah label untuk masing-masing komponen text field dan text area,

misalnya pilih komponen text field untuk judul, lalu pada properties-nya isikan

pada bagian TextField :Judul. Beri label yang sesuai untuk textfield dan text

area dengan cara yang sama.

9. pada kolom pertama di baris keenam, klik menu insert > Form > button untuk

menambahkan tombol. Ganti Property Label milik tombol menjadi kirim. Hasil

Seperti Pada Gambar berikut.

PT. PASIM SENTRA UTAMA Halaman 78 dari 102

Page 79: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

10. Akan tampil kotak dialognya, pilih pada bagian Connection latihan, table :

artikel. Jika ternyata pada bagian Coloumns masih terdapat kolom yang

belum terhubung ke komponen Textfield atau Textarea yang bersangkutan,

anda dapat mengaturnya dengan mengklik nama kolom yang diinginkan

terlebih dahulu pada bagian Coloumns. Kemudian, pada bagian Value

pilihlah komponen TextField atau Textarea pasangannya, yaitu yang memiliki

nama yang sama dengan nama koom yang ingin dipasangkan.

11. pada bagian After Inserting Go To isikan denga nama file yang akan dituju

setelah pengguna mengisikan data pada halaman input data ini, misal isi

dengan after_input.php

PT. PASIM SENTRA UTAMA Halaman 79 dari 102

Page 80: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

12. untuk membuat halaman after input buka halaman index.php kemudian

save as dengan mengganti nama file after_input.php. 13. Hapus gambar dan komentar yang ada di file after_input.php. ganti dengan

Tulisan Data anda telah sukses terkirim 14. kemudian buatlah sebuah link ke file input.php. klik menu insert > Hyperlink,

akan tampil kotak dialognya. Isikan pada bagian text : Input Kembali ? dan

link : input.php, lalu klik tombol OK

PT. PASIM SENTRA UTAMA Halaman 80 dari 102

Page 81: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

15. untuk mencobanya pada web browser ketikan F12

7.3 Membuat halaman tampilan data dengan recordset Data yang telah dimasukan ke dalam database melalui form inputan berita

tentunya harus ditampilkan agar seluruh pengunjung dapat membaca berita

tersebut. Langkah untuk membuat halaman tampilan data adalah sebagai

berikut :

1. Save as index.php menjadi berita.php, hapus gambar dan komentar pada

baris kedua dan kolom kedua 2. klik menu window > bindings untuk menampilkan panel Bindings. Klik tanda

+ yang terletak di sebelah kiri tulisan Recordset (rs_berita), maka akan

tampil nama-nama kolom di bawahnya. Jika belum ada buat recordset

dengan nama rs_berita dengan langkah-langkah seperti membuat

recordset untuk membuat form inputan

PT. PASIM SENTRA UTAMA Halaman 81 dari 102

Page 82: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3. Rancangan tabel untuk tampilan data dengan membuat tabel 2 baris dan

3 kolom, baris pertama setiap kolomnya diberi tulisan Tanggal penulisan,

penulis, judul artikel dan beri warna biru pada baris pertama.

4. kemudian klik dan seret nama fieldnya dari data bindings tadi satu per

satu, yaitu tanggal, penulis dan judul menuju ke baris kedua tabel di kolom-

kolom yang sesuai dengan judul kolomnya. Hasil seperti pada gambar 5. selanjutnya, buatlah Link di bawah tabel untuk menuju ke halaman

pengisian data (input_berita.php) dengan tulisan Tulis Berita baru.tekan

tombol F12 untuk melihat hasilnya.

6. untuk mengatur jumlah artikel yang ditampilkan, bolk baris terakhir yaitu

seluruh item data lalu pada panel server behaviors, klik +, lalu pilih repeat

region

PT. PASIM SENTRA UTAMA Halaman 82 dari 102

Page 83: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7. akan tampil kotak dialog Repeat Region, isikan bagian show: 5. artinya kita

akan menampilkan data sebanyak lima buah pada tiap halamannya

8. Item yang ditampilkan hanya 5 data tapi bagaimana jika data berita yang

sudah ada lebih dari 5, maka harus dibuat sebuah menu navigasi data

agar pengunjung dapat melihat seluruh data yang ada. 9. letakan kursor di bawah tabel, kemudian klik menu insert > Aplication

Objects > recordset Paging > Recordset Navigation Bar, akan tampil kotak

dialognya. Plih pada bagian display using : image. Bagian ini berfungsi

untuk mengatur bentuk tampilan menu navigasi nantinya berbentuk

gambar.

10. akhiri pembuatan menu navigasi dengan tombol OK maka hasil akan

terlihat seperti pada gambar

PT. PASIM SENTRA UTAMA Halaman 83 dari 102

Page 84: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

11. ada salah satu tambahan lagi yaitu keterangan mengenai item data

berita yang keberapa dan informasi mengenai jumlah seluruh berita yaitu

dengan membuat status navigasi data 12. letakan kursur di bagian pojok kiri di bawah tabel 13. kemudian klik menu insert > aplication Objects > Display Record Count >

Recordset Navigation Status, akan tampil kotak dialognya. Pastikan bagian

Recordset telah terisi dengan rs_berita. Tekan tombol OK

14. tampilan setelah halaman ditambahkan menu status navigasi data

PT. PASIM SENTRA UTAMA Halaman 84 dari 102

Page 85: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7.4 Membuat Link Ke halaman detail Halaman yang telah kita buat tadi hanya merupakan penampil atau daftar

berita saja. Bagaimana jika kita ingin melihat sebuah artikel secara lengkap.

Kita akan membuat sebuah halaman penampil artikel secara lengkap.

Langkah-langkahnya sebagai berikut :

1. kita akan membuat link menuju ke halaman penampil data detail

dengan cara menggunakan kolom judul pada tabel di halaman

berita.php sebagai link tersebut.

2. blok baris kedua pada kolom judul artikel, lalu atur properties-nya. Isikan

pada bagian link: detail_berita.php?

3. tambahkan pada link detail artikel dengan detail_berita.php?id=<?php

echo $row_rs_berita[’no_artikel’]; ?> dimana keterangannya sbb:

• id adalah variabel yang akan menyimpan nilai dari ’no_artikel’.

• Rs_berita adalah recordset yang digunakan

• No_artikel yaitu nama kolom sebagai primary key atau nama kolom

unik tabel artikel

4. setelah membuat link untuk menuju ke halaman detail artikel maka kita

akan membuat halaman detail artikel tersebut. halaman index.php

kemudian save as dengan mengganti nama file detail_berita.php. Hapus

gambar dan komentar yang ada di file detail_berita.php. 5. Tampilkan panel bindings, klik tombol +, lalu pilih Recordset(query). Akan

tampil kotak dialognya.

PT. PASIM SENTRA UTAMA Halaman 85 dari 102

Page 86: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6. Buatlah sebuah recordset yang sama dengan recordset sebelumnya,

hanya bagian sort kita abaikan dan filter sekarang harus kita atur. Seperti

pada gambar.

7. Tekan tombol OK maka sekarang panel bindings seharusnya akan terlihat

seperti pada gambar

PT. PASIM SENTRA UTAMA Halaman 86 dari 102

Page 87: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

8. sekarang kita membuat tampilan layout untuk halaman detail, letakan

kursor pada bagian atas-kiri halaman, lalu tuliskan teks:’Tanggal Penulisan

artikel 9. kemudian klik dan seret nama kolom tanggal pada panel bindings ke

sebelah kanan teks: ’Tanggal Penulisan Artikel’. 10. letakkan kursor dibawah teks: ’Tanggal penulisan Artikel:’ lalu klik dan seret

kolom judul ’judul’ pada panel bindings 11. letakan kursor dibawah judul, lalu tuliskan teks: ’penulis:’. Kemudian, klik

dan seret kolom ’penulis’ dari panel bindings ke sebelah kanan teks

tersebut. 12. letakkan kursor di bawah ’Penulis’. Lalu masukan tabel dengan 1 baris

dan 2 kolom ke posisi tersebut 13. letakan kursor pada kolom pertama, lalu klik menu insert > image, akan

tampil kotak dialognya. Pilihlah pada bagian select file from name from:

datasource, kemudian pilihlah pada bagian field: gambar

14. letakkan kursor pada kolom kedua lalu klik dan seret kolom ‘isi_artikel’

pada panel bindings 15. letakkan kursor pada bagian bawah tabel. Buat link yang akan

membawa kita kembali kehalaman berita.php 16. tes halaman ini dengan menekan tombol F12

PT. PASIM SENTRA UTAMA Halaman 87 dari 102

Page 88: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7.5 Membuat Layout Edit Selanjutnya adalah membuat halaman yang berfungsi untuk melakukan proses

pengeditan data. Langkah–langkahnya adalah sbb:

1. Buka Halaman berita.php, Pada tabel yang ada klik kanan pada kolom

’Judul Artikel’ kemudian pilih table > insert rows or colomns... selanjutnya

tampil kotak dialognya, pilih pada bagian insert : colomns, number of

colomns: 1, where: after current colomn

2. akan tampil sebuah kolom baru di sebelah kanan kolom ’judul Artikel’. Pada

kolom baru di baris kedua, tuliskan teks edit. 3. blok teks ’Edit’ lalu atur properiesnya, isikan pada bagian link;

edit_berita.php?id=<?php echo $row_rs_berita[’no_artikel’]; ?> 4. simpanlah hasil penambahan link edit.

PT. PASIM SENTRA UTAMA Halaman 88 dari 102

Page 89: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

5. setelah membuat link untuk menuju ke halaman edit artikel maka kita akan

membuat halaman edit artikel tersebut. Buka halaman index.php

kemudian save as dengan mengganti nama file edit_berita.php. Hapus

gambar dan komentar yang ada di file edit_berita.php. 6. Tampilkan panel bindings, klik tombol +, lalu pilih Recordset(query). Akan

tampil kotak dialognya.

PT. PASIM SENTRA UTAMA Halaman 89 dari 102

Page 90: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7. Buatlah sebuah recordset yang sama dengan recordset sebelumnya,

Seperti pada gambar.

8. Tekan tombol OK maka sekarang panel bindings seharusnya akan terlihat

seperti pada gambar berikut

9. letakan form pada halaman edit_berita.php lalu klik garis merah milik

form, kemudian isi pada propertiesnya bagian label: edit. Seperti pada

gambar berikut

10. dalam form, isikan sebuah tabel dengan 3 kolom dan 6 baris untuk

merapikan tata letak komponen form. Setelah tabel masuk ke dalam

form.

11. atur sedemikian rupa sehingga tabel tersebut memiliki tampilan seperti

pada gambar

PT. PASIM SENTRA UTAMA Halaman 90 dari 102

Page 91: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

12. letakan kursor pada kolom pertama, lalu klik menu insert > image,

akan tampil kotak dialognya. Pilih pada bagian select file name from:

Datasource dan pilih kolom pada fields: gambar

13. pada kolom ke-2 di baris ke-1 hingga ke -5, isikan teks; judul, Nama

Penulis, Tanggal Penulisan, Isi Artikel dan gambar

14. pada kolom-3 di baris pertama hingga ketiga, masukan komponen

TextField, klik menu insert>form>textField begitu seterusnya sampai tiga

kali. Pada properties-nya, beri nama masing-masing TextField sesuai

dengan nama kolomnya yang sesuai.

15. Pada kolom ke-3 di baris ke-4. Buat sebuah Text Area. Dengan char

width: 38 dan numlines: 8. beri nama Textarea dengan nama

isi_artikel.

16. Pada kolom ke-3 di baris ke-5. Buat sebuah Text field. Dengan nama

gambar.

17. Pada kolom ke-2 di baris ke-6. Buat sebuah Button. Dengan Label: OK.

PT. PASIM SENTRA UTAMA Halaman 91 dari 102

Page 92: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

18. Buka Panel Bindings, klik dan seret kolom judul, penulis, tanggal,

isi_artikel dan gambar ke komponen textfield dan Textarea yang

bersesuaian.

19. sekarang kita mengatur server behavior untuk update record dengan

cara buka pada panel server behaviors, klik tombol +, lalu pilih Update

Record

PT. PASIM SENTRA UTAMA Halaman 92 dari 102

Page 93: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

20. akan tampil kotak dialog, isikan beberapa item berikut

• submit values from, isi dengan nama koneksi, yaitu edit

• connection, isi dengan nama koneksi, yaitu latihan

• update table, isi dengan nama tabel, yaitu artikel

• coloumns, seharusnya tiap kolom sudah berhubungan dengan

TextField yang bersangkutan

• primary Key oleh karena kolom ’no_artikel’ (kolom primary key)

tidak kita gunakan, maka saat ini tabel tidak memiliki primary key.

Oleh karena itu, pada bagian Colomns kliklah di kolom judul, lalu

tandailah pilihan primary key

• after updating, go to tekan tombol Browse di sebelah kanan lalu

pilih berita.php

21. coba tes edit salah satu berita dengan menggunakan tombol F12

PT. PASIM SENTRA UTAMA Halaman 93 dari 102

Page 94: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

7.6 membuat halaman hapus data

untuk dapat menghapus sebuah data/artikel, kita harus siapkan sebuah link

’Hapus’. Jika link ini di klik data akan terhapus. Langkah-langkah untuk

membuat halaman hapus data adalah sbb :

1. buka halaman berita.php, klik kanan pada kolom link Edit, pilih table >

insert Rows or Colomns, akan tampil kotak dialognya. Pilih pada bagian

insert: colomns, number of colomns:1 dan where: after current Colomn

2. akan tampil kolom baru, tuliskan teks ‘hapus’ di kolom tersebut.

3. Lalu pada Properties isikan pada bagian Link:

hapus_berita.php?id=<?php echo $row_rs_berita[’no_artikel’]; ?> maka

sekarang teks hapus menjadi link

4. kita akan membuat halaman untuk menghapus data, buka file index.php

save as ganti menjadi hapus_berita.php

5. buat recordset untuk hapus data denga memilih panel bindings, klik

tombol + lalu pilih recordset (Query).

PT. PASIM SENTRA UTAMA Halaman 94 dari 102

Page 95: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

6. isikan item-item yang sama dengan edit data

7. pada halaman hapus_berita.php buka panel server Behaviors, klik tombol

+, lalu pilih delete Record

8. akan tampil kotak dialognya, isikan beberapa item berikut :

• in the first check if variabel is defined: primary key value

• connection isi dengan nama tabel yaitu latihan

• table isi dengan nama tabel yaitu artikel

• primary key coloumn isi dengan nama kolom yang dijadikan identitas

yaitu no_artikel

• Numeric oleh karena ’no_artikel’ adalah sebuah kolom berjenis angka

maka tandailah bagian Numeric ini

PT. PASIM SENTRA UTAMA Halaman 95 dari 102

Page 96: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

• Primary key value isi dengan URL Parameter dan textbox di sebelah

kanannya diisi dengan nama variabelnya yaitu id

• After deleting go to isi dengan nama file halaman berita.php

9. untuk mencoba menghapus data tekan tombol F12

7.7 membuat halaman pencarian data

Fasilitas pencarian adalah sebuah fasilitas agar pengunjung dapat memasukan

kata kunci pencarian yang diinginkan. Kita akan memberikan fasilitas pencarian

data dihalaman berita.php dimana pencarian dilakukan berdasarkan nama

penulisnya.

1. buka halaman berita.php

2. letakkan kursor di atas tabel lalu klik menu insert > form. Pada properties-

nya isikan pada bagian Action: hasil_pencarian.php dan method: GET

3. di dalam form masukan tabel yang terdiri atas 3 kolom dan 1 baris

4. pada kolom pertama tuliskan teks; ’penulis’. Pada kolom kedua klik menu

insert > form > Text field untuk memasukan komponen TextField lalu pada

properties-nya beri namanya: cari_penulis. Pada kolom ketiga klik menu

insert > Form > Button untuk memasukan komponen tombol, beri label: cari

PT. PASIM SENTRA UTAMA Halaman 96 dari 102

Page 97: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

5. kemudian kita akan membuat halaman hasil pencarian data, buka

halaman index.php save as ganti menjadi hasil_pencarian.php 6. Tampilkan panel bindings, klik tombol +, lalu pilih Recordset(query). Akan

tampil kotak dialognya.

7. Buatlah sebuah recordset yang sama dengan recordset sebelumnya,

hanya pada kolom filter pilih penulis,=, URL Parameter dan cari_penulis.

Seperti pada gambar.

8. buka halaman berita.php, save as ganti nama menjadi hasil_

pencarian.php 9. pada bagian atas halaman, tuliskan ’Hasil Pencarian.php’. Pindahkan

kursor ke bawahnya kemudian tuliskan ’Tanggal Penulisan’, lalu seret

kolom ’Tanggal’ dari panel bindings ke sebelah kanan teks tersebut.

Pindahkan lagi kursor ke bawah dan tuliskan ’Nama Penulis’, lalu seret

kolom ’Penulis’ dari panel Bondings’ke sebelah kanan teks tersebut.

Pindahkan lagi kursor ke bawah dan tuliskan ’judul :’ lalu seret kolom

’Judul’ dari panel Bindings ke sebelah kanan tulisan ini.

PT. PASIM SENTRA UTAMA Halaman 97 dari 102

Page 98: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

10. blok tulisan dari ’Judul’ hinga terakhir seperti pada gambar

11. buka panel server Behaviors lalu klik tombol +, pilih Repeat Region akan

tampil kotak dialognya. Pastikan nama Recordset adalah rs_berita dan

show: 5

12. klik menu Edit > Select All untuk memblok semua teks yang ada di

halaman. Panel Server Behvior klik tombol +, pilih Show Region > Show If

Recordset Is Not Empty, akan tampil kotak dialognya. Pastikan nama

Recordetnya adalah rs_berita.

PT. PASIM SENTRA UTAMA Halaman 98 dari 102

Page 99: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

13. tes halaman pencarian data ini dengan mengunakan tombol F12

PT. PASIM SENTRA UTAMA Halaman 99 dari 102

Page 100: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Lampiran Instalasi PHPTRIAD 2.2.1

Untuk dapat membuat sebuah aplikasi web berbasis PHP menggunakan

program PHPTriad versi 2.2.1, dimana PHPTriad berisi paket apache websever

sebagai web server, PHP sebagai bahasa pemrogramannya dan MySQL sebagai

Database Server. Berikut akan dijelaskan cara meninstall PHPTriad :

1. Klik dua kali ikon PHPTriad melalui windows explorer

2. akan tampil kotak dialog License Agreement, klik tombol I agree

PT. PASIM SENTRA UTAMA Halaman 100 dari 102

Page 101: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

3. terjadilah proses instalasi PHPTriad.

4. Tunggulah hingga instalasi selesai (Completed) lalu klik tombol Close.

PT. PASIM SENTRA UTAMA Halaman 101 dari 102

Page 102: Modul Pelatihan Web Baru.pdf

MODUL PELATIHAN WEB

Hanya dua kali klik instalasi selesai. PHP telah siap di komputer anda untuk

mengetes apakah apache berjalan dengan baik jalankan apache webserver dari

program menu kemudian buka internet explorer ketikan URL alamatnya

http://localhost/ maka akan muncul halaman pembuka seperti di bawah ini

Untuk mengetes apakah script php berjalan dengan baik buat file baru

dengan nama phpinfo.php dengan isi sebagai berikut :

<? Phpinfo(); ?>

Copykan file tersebut ke tempat dokumen root Apache yaitu di C: \Apache\htdocs.

Akses file tersebut dengan menggunakan Internet Explorer dengan mengetikan

alamat http://localhost/phpinfo.php sesuai dengan nama file tersebut. Jika berhasil

mengintall modul php maka akan tampil gambar seperti pada gambar

PT. PASIM SENTRA UTAMA Halaman 102 dari 102