modul pelatihan web baru.pdf
TRANSCRIPT
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
MODUL PELATIHAN WEB
• History, Actions, Tool Preseed
PT. PASIM SENTRA UTAMA Halaman 31 dari 102
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
MODUL PELATIHAN WEB
3. Kemudian klik tombol OK, maka asilnya akan berbentuk Twister.
PT. PASIM SENTRA UTAMA Halaman 60 dari 102
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
MODUL PELATIHAN WEB
13. tes halaman pencarian data ini dengan mengunakan tombol F12
PT. PASIM SENTRA UTAMA Halaman 99 dari 102
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
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
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