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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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.
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,
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.