Anda di halaman 1dari 37

Tutorial Update Website

BAB I
WEBSITE

1.1 DEFINISI WEBSITE

Secara terminologi, website adalah kumpulan dari halaman-halaman situs, yang


biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya
berada di dalam World Wide Web (WWW) di Internet. Sebuah halaman web adalah
dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang
hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan
informasi dari server website untuk ditampilkan kepada para pemakai melalui web
browser. Semua publikasi dari website-website tersebut dapat membentuk sebuah
jaringan informasi yang sangat besar.

Halaman-halaman dari website akan bisa diakses melalui sebuah URL yang biasa
disebut Homepage. URL ini mengatur halaman-halaman situs untuk menjadi
sebuah hirarki, meskipun, hyperlink-hyperlink yang ada di halaman tersebut
mengatur para pembaca dan memberitahu mereka sususan keseluruhan dan
bagaimana arus informasi ini berjalan.

Beberapa website membutuhkan subskripsi (data masukan) agar para user bisa
mengakses sebagian atau keseluruhan isi website tersebut. Contohnya, ada
beberapa situs-situs bisnis, situs-situs e-mail gratisan, yang membutuhkan
subkripsi agar kita bisa mengakses situs tersebut.

1.2 JENIS WEBSITE

a. Website Statik

Sebuah Website statik, adalah salah satu bentuk website yang isi didalam
website tersebut tidak dimaksudkan untuk di update secara berkala, dan
biasanya di maintain secara manual oleh beberapa orang yang menggunakan
software editor.

Ada 3 tipe kategori software editor yang biasa dipakai untuk tujuan maintaining
ini, mereka adalah :

o Elemen 1 Penyunting teks. Contohnya adalah Notepad atau TextEdit, dimana


HTML diubah didalam program editor tersebut.

Mitrawebsite.Com 1
Tutorial Update Website

o Elemen 2 WYSIWYG editor. Contohnya Microsoft Frontpage dan Macromedia


Dreamweaver, website di edit menggunakan GUI (Graphical User Interface)
dan format HTML ini secara otomatis di generate oleh editor ini.
o Elemen 3 Editor yang sudah memiliki template, contohnya Rapidweaver dan
iWeb, dimana, editor ini membolehkan user untuk membuat dan mengupdate
websitenya langsung ke server web secara cepat, tanpa harus mengetahui
apapun tentang HTML. User dapat memilih template yang sesuai dengan
keinginannya, menambah gambar atau obyek, mengisinya dengan tulisan,
dan dengan sekejap sudah dapat membuat situs web tanpa harus melihat
sama sekali kode-kode HTML.

b. Website Dynamic

Sebuah website dynamic adalah website yang secara berkala, informasi


didalamnya berubah, atau website ini bisa berhubungan dengan user dengan
berbagai macam cara atau metode (HTTP cookies atau Variabel Database,
sejarah kunjungan, variabel sesi dan lain-lain) bisa juga dengan cara interaksi
langsung menggunakan form dan pergerakan mouse. Ketika web server
menerima permintaan dari user untuk memberikan halaman tertentu, maka
halaman tersebut akan secara otomatis di ambil dari media penyimpanan
sebagai respon dari permintaan yang diminta oleh user. Sebuah situs dapat
menampilkan dialog yang sedang berlangsung diantara dua user, memantau
perubahan situasi, atau menyediakan informasi yang berkaitan dengan sang
user.

Ada banyak jenis sistem software yang dapat dipakai untuk meng-generate
Dynamic Web System dan Situs Dynamic, beberapa diantaranya adalah
ColdFusion (CFM), Active Server Pages (ASP), Java Server Pages (JSP) dan PHP,
bahasa program yang mampu untuk meng-generate Dynamic Web System dan
Situs Dinamis. Situs juga bisa termasuk didalamnya berisi informasi yang diambil
dari satu atau lebih database atau bisa juga menggunakan teknologi berbasis
XML, contohnya adalah RSS. Isi situs yang dynamic juga secara periodik di
generate, atau, apabila ada keadaan dimana dia butuh untuk dikembalikan
kepada keadaan semula, maka dia akan di generate, hal ini untuk menghindari
kinerjanya supaya tetap terjaga.

Plugin tersedia untuk menambah banyaknya feature dan kemampuan dari web
browser, dimana, plugin ini dipakai untuk membuka content yang biasanya
berupa cuplikan dari gambar bergerak (active content) contohnya adalah Flash,
Shockwave atau applets yang ditulis dalam bahasa JAVA. Dynamic HTML juga
menyediakan untuk user supaya dia bisa secara interaktif dan realtime, meng-

Mitrawebsite.Com 2
Tutorial Update Website

update di web page tersebut (catatan; halaman yang dirubah, tak perlu di load
atau di reloaded agar perubahannya dapat dilihat), biasanya perubahan yang
dilakukan mereka memakai DOM dan Javascript yang sudah tersedia pada
semua Web Browser sekarang ini.

Seperti yang tertulis di atas, di luar sana ada beberapa perbedaan dalam
penulisan dari terminologi website. Walaupun ¨Website¨ sudah secara umum
dipakai, namun untuk Associated Press Stylebook, Reuters, Microsoft, Academia,
dan kamus-kamus yang ada, penulisan yang mereka pakai adalah dengan
menggunakan 2 kata, yaitu Web site. Hal ini karena ¨Web¨ bukanlah terminilogi
umum, namun kependekan dari World Wide Web.

1.3 KOMPONEN WEBSITE

Pada dasarnya website terdiri dari 3 (tiga) komponen utama, yaitu:

a. Domain

Nama domain (domain name) adalah nama unik yang diberikan untuk
mengidentifikasi nama server komputer seperti web server atau email server di
jaringan komputer ataupun internet.

Nama domain berfungsi untuk mempermudah pengguna di internet pada saat


melakukan akses ke server, selain juga dipakai untuk mengingat nama server
yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal
sebagai IP address.

Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web
seperti contohnya "mitrawebsite.com".

Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat
website.

Masa berlaku domain adalah minimal 1 (satu) tahun terhitung sejak pendaftaran
dan diperpanjang untuk tahun-tahun berikutnya, jika pada tahun berikutnya
domain tidak diperpanjang maka domain tersebut akan dihapus dari pusat
registrasi domain dan atau domain tersebut digunakan atau diambil alih oleh
orang lain.

b. Web Server

Setelah domain didaftarkan langkah selanjutnya adalah menyiapkan komputer


server & koneksi internet yang harus online 24 jam non stop sebagai media
penyimpanan data-data suatu website.

Mitrawebsite.Com 3
Tutorial Update Website

Selanjutnya data-data tersebut disajikan kepada pengunjung website, mulai data


teks, gambar, audio, video atau database dalam skala besar.

Jika data-data sangat banyak dan memerlukan tingkat keamanan akses data
lebih tinggi seperti contoh perbankan biasanya mereka mempunyai komputer
server sendiri.

Bagi mereka yang memiliki data tidak terlalu banyak ada solusi yaitu
menggunakan jasa perusahaan penyewaan komputer server seperti
http://mitrawebsite.com, yang mana biaya sewa server sesuai dengan kapasitas
yang kita ambil, semakin besar kapasitas server tentunya semakin mahal.

Server untuk website terkenal dengan istilah web server/ web hosting.

c. Web Design

Setelah domain & server (web hosting) dimiliki teknis selanjutnya adalah
menyiapkan design sebagai antar muka dengan pengunjung, web design bisa
dibuat sendiri dan atau serahkan kepada perusahaan jasa pembuatan website
untuk design website anda.

1.4 APLIKASI UNDER WEB

Aplikasi underweb adalah program yang bisa di jalankan melalui web browsing
seperti Firefox, Internet Explorer, Opera, Google Chrome dan sebagainya, dan
kelebihannya adalah jika Aplikasi underweb berjalan dalam jaringan komputer tidak
harus di install kedalam komputer satu persatu tapi cukup didalam komputer server
saja.

Aplikasi underweb pada dasarnya adalah pengembangan dari website dynamic yang
disesuaikan dengan kebutuhan industri teknologi, diantaranya seperti aplikasi
perbankan, aplikasi sekolah online, aplikasi kampus, aplikasi keuangan, aplikasi
toko online, aplikasi pendaftaran online, aplikasi dating, aplikasi iklan online,
aplikasi multi level marketing dan masih banyak lagi.

Secara teknis pembuatan aplikasi under web sangat kondisional dan customize
sehingga memerlukan analisa yang detail dan waktu yang cukup tentang
kebutuhan masing-masing industri teknologi.

Pada umumnya aplikasi under web mempunyai 2 (dua) halaman utama:

o Public Area (halaman pengunjung)

Adalah halaman yang digunakan untuk berinteraksi dengan pengguna aplikasi


atau pengunjung website.

Mitrawebsite.Com 4
Tutorial Update Website

o Administrator Area (halaman khusus admin)

Adalah halaman untuk administrator berfungsi melakukan update data, baik


berupa teks, gambar, video atau data lainnya.

Pada umumnya halaman khusus admin dilengkapi dengan user name &
password untuk membatasi akses kedalam system aplikasi, sehingga
pengguna aplikasi atau pengunjung website tidak dapat mengakses halaman
administrator.

Administrator area ada kalanya di bagi lagi berdasarkan tingkat/ level akses
masing-masing anggota, seperti contoh level user hanya bisa menambah
berita saja tidak bisa mengedit atau menghapus berita, lalu ada lagi level
editor bisa menambah berita, edit berita tetapi tidak bisa menghapus berita,
level full admin bisa tambah berita, edit berita, hapus berita bahkan bisa
menghapus keanggotan member.

Mitrawebsite.Com 5
Tutorial Update Website

BAB II
CMS & OPEN SOURCE

2.1 CMS (C0NTENT MANAGEMENT SYSTEM)

CMS adalah suatu sistem yang digunakan untuk mengelola dan memfasilitasi
proses pembuatan, pembaharuan, dan publikasi content website yaitu informasi
berupa teks, gambar, audio, video ataupun format lain.

Terminologi CMS sendiri cukup luas, di antaranya mencakup software aplikasi


pembuat CMS, bahasa pemogramman web yang digunakan seperti HTML, PHP,
ASP, database, flow chart program, dan alat bantu lainnya yang dapat dikelola
sebagai bagian dari mekanisme terbentuknya CMS yang dibutuhkan.

Content Management System terbukti sangat efektif karena dengan adanya CMS
yang terintegrasi dengan sebuah WebSite akan memberikan kemudahan yang akan
meningkatkan fungsionalitas dan fleksibiltas dari Website.

Terlebih pada Website yang tujuan pemanfaatannya sebagai media promosi dan
membangun citra konsumen, dimana kontinuitas dan update informasi produk atau
jasa dapat dilakukan secara berkala serta berkesinambungan, karena informasi
yang up to date memegang peranan penting dalam tercapainya target pemasaran.

2.2 OPEN SOURCE

Open source adalah sistem pengembangan yang tidak dikoordinasi oleh suatu
individu / lembaga pusat, tetapi oleh para pelaku yang bekerja sama dengan
memanfaatkan kode sumber (source code) yang tersebar dan tersedia bebas
(biasanya menggunakan fasilitas komunikasi internet).

Pola pengembangan ini mengambil model ala bazaar, sehingga pola Open Source
ini memiliki ciri bagi komunitasnya yaitu adanya dorongan yang bersumber dari
budaya memberi, yang artinya ketika suatu komunitas menggunakan sebuah
program Open Source dan telah menerima sebuah manfaat kemudian akan
termotivasi untuk menimbulkan sebuah pertanyaan apa yang bisa pengguna
berikan balik kepada orang banyak.

Pola Open Source lahir karena kebebasan berkarya, tanpa intervensi berpikir dan
mengungkapkan apa yang diinginkan dengan menggunakan pengetahuan dan
produk yang cocok. Kebebasan menjadi pertimbangan utama ketika dilepas ke
publik. Komunitas yang lain mendapat kebebasan untuk belajar, mengutak-ngatik,

Mitrawebsite.Com 6
Tutorial Update Website

merevisi ulang, membenarkan ataupun bahkan menyalahkan, tetapi kebebasan ini


juga datang bersama dengan tanggung jawab, bukan bebas tanpa tanggung jawab.

2.3 BEBERAPA CMS OPEN SOURCE

Pada saat sekarang ini banyak sekali ditemukan aplikasi CMS open source, jika
dijumlah bisa mencapai ribuan, dari yang sederhana hingga tingkat advance,
tentunya CMS yang dimaksud sesuai dengan bidang masing-masing, seperti untuk
toko online, web portal, blog, sekolah, keuangan dan sebagainya.

Berikut beberapa CMS Open Source yang banyak digunakan saat ini:

a. Wordpress

Wordpress merupakan aplikasi open source yang banyak dipakai untuk


membuat website. Pada awalnya wordpress hanya digunakan untuk membuat
blog saja.

Karena wordpress open source dan boleh dimodifikasi sesuai kebutuhan


pengguna maka sekarang ini wordpress banyak diminati oleh para web master &
web development untuk dimanfaatkan sebagai CMS (Content Management
System) website, tidak hanya di manfaatkan untuk blog saja.

Dengan adanya dukungan plugin yang banyak dan bervariasi, tak heran jika
sekarang banyak website maker berpindah dari aplikasi CMS lain ke aplikasi
CMS wordpress, bahkan perusahaan besar pun menggunakan Wordpress
sebagai engine situsnya.

Materi Wordpress akan dibahas khusus pada bab berikutnya, sebab website
yang penulis bangun menggunakan CMS Wordpress.

b. Joomla

Dahulu sebelum Wordpress terkenal seperti sekarang, Joomla merupakan CMS


yang banyak dipakai orang dalam membuat portal situs web. Hal ini disebabkan
karena Joomla lebih stabil, memiliki modul atau fasilitas yang lengkap dan
memiliki prospek pengembangan yang bagus karena didukung oleh banyak
komunitas termasuk komunitas pengguna.

Tapi sekarang banyak para website maker berpindah ke CMS Wordpress,


termasuk team web development dari www.mitrawebsite.com.

c. Drupal

Drupal merupakan aplikasi berbasis CMS dan bersifat open source. Drupal dapat
digunakan untuk membangun portal web komunitas, situs diskusi, website
perusahaan, aplikasi internal, blog, aplikasi komersil e-commerce, kumpulan

Mitrawebsite.Com 7
Tutorial Update Website

sumber informasi, situs jejaring sosial, website multi bahasa dan website multi
situs. Bagi para pengguna yang baru mengenal Drupal, mereka akan sedikit
mengalami kesulitan dalam penggunaan pertama kali karena ada beberapa
perbedaan setting konfigurasi diantara CMS yang lain seperti disebutkan diatas.

d. Dan lainnya

Maksudnya adalah CMS open source bukan hanya Wordpress, Joomla, Drupal
seperti disebut diatas, tetapi masih banyak ratusan atau bahkan ribuan CMS
open source yang tersedia di dunia maya.

Jadi kesimpulannya adalah pemilihan CMS sebuah website itu tergantung


masing-masing web master atau web development

2.4 CARA MODIFIKASI CMS

Dalam satu kesempatan ada yang tanya kepada penulis begini, “Pak, bagaimana
cara modifikasi CMS, apa saja yang perlu dipelajari…?”

Atas dasar pertanyaan tersebut maka penulis mencoba memberikan informasi


beberapa point untuk dapat melakukan modifikasi CMS sendiri :

o Menguasai bahasa pemogramman seperti, HTML, PHP, ASP, Java Script dsb
o Menguasai database programming dan Networking System
o Untuk web design, minimal menguasai Photoshop dan atau flash
o Fokus pada satu CMS saja, karena masing-masing CMS: wordpress/ joomla/
drupal mempunyai struktur bahasa pemogramman yang berbeda-beda.
o Sabar & teliti, karena dalam beberapa permasalahan, seorang web
programming harus membaca dan memperbaiki beberapa baris program
diantara ratusan bahkan ribuan baris program dalam satu file, sedangkan
jumlah file yang saling integrasi satu sama lain dalam satu website bisa
berjumlah puluhan, ratusan bahkan ribuan file.
o Banyak berlatih, membaca dan tanya kepada ahlinya jika perlu kursus serta
ikuti forum-forum diskusi online atau offline.

Mitrawebsite.Com 8
Tutorial Update Website

BAB III
WORDPRESS

3.1 PENGERTIAN

WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat
populer, pada awalnya digunakan sebagai blog engine selanjutnya dikembangkan,
dan dimanfaatin menjadi CMS untuk website oleh para web development.

WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database)
MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka
(open source software). Selain sebagai blog, WordPress juga mulai digunakan
sebagai sebuah CMS (Content Management System) karena kemampuannya untuk
dimodifikasi dan disesuaikan dengan kebutuhan penggunanya.

3.2 SEJARAH

Sejarah WordPress dimulai saat Matt Mullenweg yang merupakan pengguna aktif
dari b2 mengetahui bahwa proses pengembangan b2 dihentikan oleh
programmernya yang bernama Michel Valdrighi, Matt Mullenweg merasa sayang
dan mulai melanjutkan pengembangan b2.

WordPress muncul pertama kali di tahun 2003 hasil kerja keras Matt Mullenweg
dengan Mike Little, yang membuat WordPress makin terkenal, selain karena
banyaknya fitur dan tampilan yang menarik, adalah juga karena dukungan
komunitas terhadap perangkat lunak sumber terbuka untuk blog.

WordPress adalah penerus resmi dari b2/cafelog yang dikembangkan oleh Michel
Valdrighi. Nama WordPress diusulkan oleh Christine Selleck, teman ketua
pengembang (developer), Matt Mullenweg.

3.3 WORDPRESS.COM vs WORDPRESS.ORG

WordPress menyediakan dua alamat website yang berbeda, yaitu WordPress.com


untuk para blogger dan WordPress.org untuk para web development.

a. WordPress.com

Merupakan situs layanan membuat blog untuk para blogger yang menggunakan
aplikasi wordPress, didirikan oleh perusahaan Automattic. Dengan mendaftar
blog pada situs WordPress.com, pengguna tidak perlu melakukan instalasi atau
konfigurasi aplikasi wordpress yang cukup sulit, dan pengguna otomatis akan
mendapatkan alamat blog secara gratis, seperti contoh
http://namablog.wordpress.com.

Mitrawebsite.Com 9
Tutorial Update Website

Berikut kelebihan dan kekurangan Wodpress.com:

Kelebihan:

o Hanya dari segi biaya, yaitu Gratis, mendapat alamat sub domain dan web
hosting http://subdomain.wordpress.com

Kekurangan:

o Pengguna WordPress.com tidak dapat melakukan modifikasi template standar


yang sudah disediakan, apalagi menggunakan template premium atau
berbayar. Intinya adalah pengguna tidak dapat menambahkan asesori apa
pun selain yang sudah disediakan.

o Tidak dapat menambahkan Plug in Favorit, database MySQL

b. WordPress.org

Merupakan wilayah untuk para pengembang website atau web developer. Di


alamat wordpress.org ini, web master dapat mendownload aplikasi beserta
seluruh berkas CMS WordPress.

Selanjutnya, CMS ini dapat dimodifikasi selama seseorang menguasai PHP, CSS
dan skrip lain yang menyertainya.

WordPress dengan Bahasa Indonesia http://id.wordpress.org adalah berkat kerja


team para kontributor di Indonesia yang dipimpin oleh Huda Toriq, seorang
Mahasiswa Kedokteran dari Universitas Diponegoro/ UNDIP Semarang. Dengan
memanfaatkan situs http://id.wordpress.org, seseorang yang tidak mengerti
Bahasa Inggris masih dapat menggunakan WordPress dengan mudah.

Kekurangan:

o Hanya dari segi biaya, yaitu perlu investasi pembelian domain & web hosting,
contoh tempat pembelian hosting dan domain http://.mitrawebsite.com

Kelebihan:

o Di wordpress.org Semua yang tidak bisa dilakukan di wordpress.com dapat


dilakukan.

o Full Customize, maksudnya terserah web development akan digunakan untuk


website apa, seperti travel, sekolah, organisasi dsb.

Mitrawebsite.Com 10
Tutorial Update Website

BAB IV
TUTORIAL UMUM WORDPRESS

4.1 PENGERTIAN

Tutorial umum wordpress dimaksud adalah langkah-langkah standard aplikasi CMS


wordpress dan langkah ini relatif selalu sama untuk semua aplikasi CMS wordpress,
baik pada wordpress.com yang digunakan oleh para blogger atau wordpress.org
yang dikembangkan oleh para web developer.

4.2 CARA LOGIN CMS WORDPRESS

Berikut langkah-langkah untuk login ke dalam aplikasi CMS wordpress:

o Aktifkan program browser (Internet Explorer, Google Chrome, Opera atau Mozila
Firefox, kami merekomendasikan menggunakan Mozila Firefox karena browser
ini sangat handal & support untuk semua Plug in terbaru.

Bagi yang belum ada Mozila Firefox di komputer, silahkan Download program
tersebut, GRATIS: http://www.mozilla.com/en-US/firefox/

o Setelah program Mozila Firefox aktif, langkah selanjutnya klik di Address bar,
lalu ketikan sebagai berikut :

• Perintah umum  http://namadomain.ext/wp-admin

• ganti namadomain.ext dengan alamat website masing-masing, berikut contoh


login http://iwansusetyo.net/wp-admin

• Jika berhasil maka akan tampil Login Form pada halaman browser, seperti
contoh gambar dibawah ini :

Gambar 4.1, Login Form Standard Gambar 4.2, Login Form sudah Modifikasi

Mitrawebsite.Com 11
Tutorial Update Website

• Selanjutnya tinggal isi Username & Password masing-masing, bagi login form
yang sudah modifikasi masukan kode captcha.

CAPTCHA (Completely Automated Public Turing test to tell Computers


and Humans Apart) mempunyai fungsi utama menghadang input user
dengan menampilkan 2 kata acak yang harus ditulis ulang oleh pengisi form,
dalam artian bahwa sebuah mesin (robot/server) yang diotomasisasikan
untuk mengirim bom email (spammer), tidak akan bisa menuliskan lagi apa
yang ditampilkan CAPTCHA.

o Selanjutnya klik LOGIN

4.3 LUPA PASSWORD

Lupa password mungkin terjadi, maka untuk mengantisipasi hal tersebut CMS
Wordpress sudah mempersiapkannya, berikut caranya:

o Aktifkan Mozila Firefox, lalu ketikan http://namadomain.ext/wp-admin

o ganti namadomain.ext dengan alamat website masing-masing, berikut contoh


login http://iwansusetyo.net/wp-admin

o Klik Reset Password, lalu masukan username atau alamat email yang
didaftarkan pada sistem

o Selanjutnya sistem aplikasi CMS akan mengirim email pemberitahuan dan


memastikan bahwa anda melakukan reset password, seperti contoh berikut :

Someone has asked to reset the password for the following site and username.
http://iwansusetyo.net
Username: administrator
To reset your password visit the following address, otherwise just ignore this email and nothing
will happen.
http://iwansusetyo.net/wp-login.php?
action=rp&key=ub7ziok8cfXdTRhEq9N4&login=administrator

o Klik link paling bawah yang ditandai dengan warna merah & tunggu beberapa
saat, maka sistem aplikasi CMS Wordpress akan mengirim password baru
melalui email

Gambar 4.3, Form Reset Password


Gambar 4.4, Form Reset sudah Modifikasi
Standard

Mitrawebsite.Com 12
Tutorial Update Website

4.4 USER LOGIN

a. Levelisasi User

Inilah adalah satu diantara keungguluan Aplikasi CMS Wordpress yaitu dapat di
akses secara bersama-sama dalam satu waktu oleh lebih dari satu user login,
atau dikenal dengan istilah multiuser.

Keunggulan lain Aplikasi CMS Wordpress yaitu dapat mengatur hak akses user
maksudnya adalah user bisa di setting oleh administrator boleh melakukan apa
saja di system aplikasi CMS seperti apakah user bisa menambah, memperbaiki
atau menghapus posting atau berita didalam website atau hanya bisa memberi
komentar saja atau bahkan bisa menghapus keanggotaan user lain.

Berikut urutan Role atau Level berdasarkan tingkat hak akses didalam Aplikasi
CMS Wordpress:

o Subscriber

Subscriber adalah level paling rendah, user ini hanya diperbolehkan sebatas,
memberikan komentar dan membaca membaca artikel saja dalam website,
level subcriber jarang sekali digunakan.

o Contributor

Diatas level Subcriber adalah Contributor yaitu hanya mempunyai hak untuk
mengirim atau menulis artikel (tipe post) dan tidak diperbolehkan untuk
melakukan publish ke halaman utama website.

Jika tidak boleh publish, lalu siapa yang melakukannya…???

Yang boleh publish atas tulisan contributor adalah level Editor atau
Administrator, akan dibahas lebih lanjut.

o Author

Setelah Contributor selanjutnya adalah level Author, level ini mempunyai hak
untuk mengirim posting dan sekaligus dapat mempublish kehalaman utama
website, tetapi level Author tidak punya hak untuk melakukan edit atau
publish posting milik user lainnya.

o Editor

Editor adalah level yang kedua setelah administrator. Adapun hak yang
dimiliki oleh level editor adalah diperbolehkan menambah posting sekaligus
melakukan edit, delete, publish posting user lainnya. yang tidak

Mitrawebsite.Com 13
Tutorial Update Website

diperkenankan oleh level Editor adalah tidak mempunyai akses untuk


menghapus keanggotaan orang lain dari member website, setting website,
mengaktifkan Plug in system dan hal-hal teknis berkaitan aplikasi CMS
Wordpress.

o Administrator

Role ini memiliki kedudukan tertinggi. Administrator memiliki akses pada


semua fitur yang ada dalam aplikasi CMS Wordpress.

Setelah memahami levelisasi atau Role User selanjutnya adalah cara menambah
user baru.

b. Cara Menambah User Baru

o Login ke halaman administrator,


http://namadomain.ext/wp-admin

o Klik menu User, Klik Add New

o User Name : isi user name untuk login

o First name : nama awal

o Last name : nama akhir

o eMail : gunakan alamat email yg masih aktif,


karena username & password akan dikirim melalui
email secara otomatis, serta email ini juga
digunakan untuk menerima password baru jika
melakukan reset password.

o Website : masukan nama website,


http://namadomain.ext

o Password : asdf1234 (contoh saja)

Gambar 4.5, Daftar Menu o Retype Password : asdf1234 (contoh saja)

o Role : Tentukan levelisasi user baru tersebut

o Klik Tombol Add User

Ulangi langkah diatas untuk membuat user baru lainnya.

c. Cara Ganti Password

o Login ke halaman administrator, http://namadomain.ext/wp-admin

o Klik menu User, Klik Your Profile

Mitrawebsite.Com 14
Tutorial Update Website

o Gulung layar menuju halaman paling bawah, pada kota New Password ada 2
text box

1
2

Gambar 4.6, Text Box Ganti Password

o masukan Password Baru pada text box nomor 1, contoh : baru12


o masukan retype password yang sama pada text box nomor 2, contoh :
baru12
o Klik Update Profile
4.5 MENU POST

Menu ini adalah yang paling sering digunakan dalam aplikasi CMS Wordpress
bahkan bisa dibilang menu pokok, karena apa? karena semua informasi yang
akan ditampilkan dalam website atau bahkan update terbaru informasi lebih banyak
menggunakan menu Post ini, selain menu Post untuk update website dapat juga
menggunakan menu Page yang nanti akan dibahas pada point berikutnya.

a. Menu Post, Categories

Apa fungsi kategori…? Kategori berfungsi untuk mengelompokan posting sejenis,


misal membuat berita dengan kategori “OLAH RAGA” maka semua posting yang
berkaitan dengan berita olah raga akan dikelompokan disana.

Atau juga misal membuat kategori produk “UMROH” maka semua posting yang
berkaitan dengan produk tersebut dikelompokan disini, seperti contoh produk
“Umroh 9 hari, umroh ramadhan, umroh plus dsb”.

Selain itu kategori juga bisa ditambah sub kategori jika memang diperlukan,
misal kategori berita “OLAH RAGA” adalah kategori utama yang dikenal dalam
aplikasi CMS dengan istilah PARENT, selanjutnya “SEPAK BOLA” merupakan sub
kategori 1 dari kategori parent “OLAH RAGA”, “MOTOGP” merupakan sub
kategori 2 dari kategori parent “OLAH RAGA” dan seterusnya.

Sehingga jika di ilustrasikan kategori dimaksud akan seperti dibawah ini:

- OLAH RAGA  parent kategori

Mitrawebsite.Com 15
Tutorial Update Website

- SEPAK BOLA  sub kategori 1 dari parent

- MOTOGP  sub kategori 2 dari parent

Cara membuat kategori

o Login ke halaman administrator, http://namadomain.ext/wp-admin

o Klik menu Post, Klik Categories

 Name : ketikan nama kategori

 Slug : kosongkan

 Parent : none (jika ingin membuat parent kategori) atau pilih nama
kategori yang pernah terbuat (jika ingin membuat sub kategori)

 Description : keterangan kategori (optional)

o Klik Add kategori

b. Menu Post, Add New

Mitrawebsite.Com 16
Gambar 4.7, Post, Categories
Tutorial Update Website

Setelah kategori dibuat dan disiapkan pada langkah diatas, selanjutnya adalah
membuat posting berita atau produk.

Ada beberapa hal yang perlu dipersiapkan sebelum melakukan posting,


diantaranya adalah:

o Judul

Buatlah judul yang simple, jelas dan terarah, baik judul berita atau judul
informasi produk & jasa

o Isi

Isi berita usahakan yang obejktif, jika isi adalah produk/ jasa buatlah dengan
jelas dan detail, sehingga pengunjung website merasa informasi yang
tersedia sudah lengkap.

o Kategori

Siapkan kategori yang cocok buat posting yang baru dibuat, cara buat
kategori telah dijelaskan pada langkah diatas poin (a), selain itu kategori juga
bisa dibuat bersamaan dengan isi posting jika memang kategori yang tersedia
belum sesuai dengan isi posting.

o Gambar pendukung

Siapkan gambar pendukung berita atau gambar produk jasa (jika ada) karena
dengan gambar pendukung dapat menambah tampilan website menjadi
menarik dan membantu visualisasi pengunjung website terhadap isi posting
(baca tutorial Photoshop untuk modifikasi ukuran gambar)

o Aturan main jika copy paste artikel orang lain

Usahakan sertakan alamat website/ nama media asal sumber berita

Ok, setelah semua sudah siap, langkah selanjutnya adalah menambah


posting, berikut caranya:

o Login ke halaman administrator, http://namadomain.ext/wp-admin

o Klik menu Post, Klik Add New

o Ketikan Judul & Isi Posting

o Sisipkan gambar pendukung (optional)

o Pilih kategori yang sesuai & Klik Publish

Mitrawebsite.Com 17
Tutorial Update Website

Agar lebih jelas berikut penjelasan detail gambar Post, Add New dibawah ini.

1
2 4
9
3

8
5

6
2

Gambar 4.8, Post, Add New

Keterangan gambar:

o (Gambar 4.8) No. 1  Tempat menuliskan judul posting

o (Gambar 4.8) No. 2  Menyisipkan gambar pada posting

Adakalanya posting dilengkapi dengan gambar untuk lebih memperkuat suatu


isi berita atau produk jasa.
Jumlah gambar yang disisipkan bebas, hanya ukuran masing-masing file
gambar yang dibatasi yaitu maksimal 128 MB per gambar, sehingga jika
gambar terlalu besar perlu kiranya diperkecil dengan program editing photo
seperti Program Photoshop (baca tutorial photoshop)
Berikut cara menyisipkan gambar:
• Klik letak posisi dimana gambar akan diletakan
• Klik Icon Add an Image, icon pada nomor 2
• Klik From Computer
• Klik Select Files

Mitrawebsite.Com 18
Tutorial Update Website

• Cari lokasi gambar yang akan disisipkan kedalam website


• Setelah ketemu, klik gambar tersebut, lalu klik Open
• Selanjutnya akan tampil kotak berikutnya dengan keterangan sebagai
berikut :

Gambar 4.9, Add an Images

• Title
Judul gambar, ini wajib di isi atau biasanya otomatis sesuai nama file
gambar
• Alternate Text
Sebuah tulisan yang berfungsi untuk mengantikan gambar, jika gambar
tidak bisa ditampilkan pada browser, biasanya karena koneksi internet
lambat sehingga gambar tidak dapat loading dengan sempurna atau
juga karena setting di browser yang di disable untuk menampilkan
gambar, tapi pada jaman sekarang sudah jarang ditemukan.
• Caption
Teks yang berada dibawah gambar yang berfungsi untuk keterangan
gambar tersebut.
• Description
Keterangan gambar
• Link URL
Maksudnya apakah gambar bisa diklik atau tidak.

Mitrawebsite.Com 19
Tutorial Update Website

None: gambar tidak bisa di klik, File URL: gambar bisa di klik, lalu
setelah di klik akan menampilkan ukuran gambar sesungguhnya, Post
URL: gambar bisa klik setelah di klik akan menuju posting dimana
gambar tersebut berada.
• Alignment
Posisi gambar, None, Left: gambar berada sebelah Kiri, Center: Tengah,
Right: Kanan.
• Size : Ukuran gambar bisa disesuaikan
• Selanjutnya klik Insert into Post

o (Gambar 4.8) No. 3  Toolbar

Fungsi toolbar disini sama persis seperti toolbar pada program microsoft
office seperti untuk format tulisan antaralain, menebalkan teks, menganti
warna teks, jenis huruf, rata kiri, rata kanan dsb.

Gambar 4.10, Toolbar

Cara menggunakan toolbar:


• Blok Teks yang akan di format, lalu klik fungsi toolbar yang diinginkan.

o (Gambar 4.8) N0. 4  Switch Vishual & HTML

Untuk melakukan perpindahan media editor teks dari Vishual ke HTML atau
sebaliknya.
• Vishual
Adalah media editor dengan orientasi pada wysiwyg sehingga tampilan
pada layar editor akan sama dengan tampilan pada layar front page atau
halaman depan website.
• HTML
Adalah media editor dengan orientasi pada HTML coding, biasanya
berfungsi untuk copy paste coding html

o (Gambar 4.8) No. 5  Media Content

Berfungsi untuk menuliskan isi posting dengan cara mengetik atau juga
dengan Copy Paste dari Program Micrsoft Word/ website orang lain.

Mitrawebsite.Com 20
Tutorial Update Website

o (Gambar 4.8) No. 6  Discussion

Berfungsi untuk mengatur formulir komentar online pada posting.


 Allow comments
Tidak ada tanda cek list () pada kotak berarti formulir komentar tidak aktif
untuk posting tersebut, dan sebaliknya jika ada tanda cek list () pada kotak
berarti formulir komentar aktif.
Setting ini dapat dilakukan pada masing-masing posting, dan standardnya
adalah formulir komentar aktif.

o (Gambar 4.8) No. 7  Categories

Ini adalah daftar kategori yang telah dibuat, silahkan pilih satu atau lebih
kategori yang sesuai dengan isi posting.

o (Gambar 4.8) No. 8  Publish : immediately

Berfungsi untuk melakukan setting tanggal dan waktu kapan posting tersebut
dipublish secara otomatis.
Contoh:

suatu sekolah akan mengumumkan kelulusan dan kenaikan kelas pada hari
jumat tanggal 10 juni 2011, pukul 10:00.

Misal posting dibuat sebelum tanggal tersebut yaitu 1 juni 2011.

Agar posting tidak tampil pada halaman depan website terlebih dahulu dan
selanjutnya posting akan otomatis tampil pada tanggal 10 juni 2011, pukul
10:00 maka perlu di setting immediately sesuai dengan tanggal yang
diinginkan.

Contoh lain:

Misal agar website terlihat selalu di update maka buatlah posting artikel,
berita, sebanyak mungkin sebut saja jumlah ada 15 posting, lalu setting
immediately untuk masing-masing posting setiap tanggal ganjil dengan
waktu publish pukul 06:00.

Sehingga setiap tanggal ganjil  1, 3, 5 dst akan ada posting baru yang
tampil pada halaman website secara otomatis, padahal posting telah dibuat
beberapa hari sebelumnya.

o (Gambar 4.8) No. 9  Publish/ Update

Untuk melakukan publish/ update posting, fungsinya sama dengan tombol


OK.

Mitrawebsite.Com 21
Tutorial Update Website

c. Cara Melakukan Edit, Delete, Posting:

Ada kalanya posting tersebut perlu diperbaiki karena ada beberapa tambahan
ataupun perubahan, misal untuk produk, mungkin akan disesuaikan harga atau
ditambah fasilitas, ditambah gambar pendukung produk dan sebagainya.
Atau juga mungkin posting tersebut sudah tidak diperlukan lagi sehingga perlu
kiranya dihapus dari halaman website.

Ok, berikut caranya:

o Login ke halaman administrator, http://namadomain.ext/wp-admin

o Klik menu Post, lalu arahkan mouse pada posting yang akan di hapus atau
posting yang akan di edit, selanjutnya dibawah posting tersebut akan tampil
sederet menu mouse hover dibawah posting tersebut yaitu:

• Edit

Berfungsi untuk melakukan edit atau perbaikan posting seperti, melakukan


koreksi tulisan, menambah tulisan, menambah atau menganti kategori,
hingga menyisipkan gambar pada sebuah posting.
Melakukan edit posting sama persis seperti dengan cara membuat posting
baru, silahkan baca pada keterangan menu Add New diatas.

• Quick Edit

Fungsi Quick Edit sama dengan fungsi edit, hanya saja tidak dilengkapi
dengan edit pada media content, yang tersedia hanya edit judul, post tag,
tanggal posting, kategori posting, status posting, author posting dsb.

• Trash

Trash berfungsi untuk menghapus posting sementara, dan selanjutnya


posting yang di hapus tersebut akan tersimpan pada menu trash, fungsi
trash ini sama seperti fungsi recycle bin pada program microsoft windows
sehingga posting yang telah di hapus melalui fungsi trash dapat di restore
atau di kembalikan lagi seperti semula. Letak tombol atau link trash berada
pada sudut kiri atas pada daftar posting.

• Preview

Preview berfungsi untuk melihat tampilan posting pada halaman front page
atau halaman pengunjung, sub menu preview ini sangat berguna jika
jumlah posting sangat banyak.

Mitrawebsite.Com 22
Tutorial Update Website

4.6 MENU PAGE

Menu pages adalah media posting ke halaman depan website yang, selain menu
post yang telah dijelaskan sebelumnya.

Perbedaan utama antara menu pages dengan menu post adalah TIDAK TERSEDIA
KATEGORI pada menu Page sedangkan menu post tersedia pilihan kategori.

Sedangkan untuk lainnya seperti, judul, isi content, menyisipkan gambar dsb,
semua sama antara menu Post dan Menu Page.

Fungsi utama untuk menu pages adalah untuk menampung informasi yang sifatnya
statis atau perubahan data atas informasi tersebut lama untuk mengalami
perubahan.

Misal  Profile perusahaan, susunan organisasi, nomor rekening, alamat kantor,


visi misi, rekening bank dan lain sebagainya.

Ok, untuk lebih jelas berikut langkah cara menambah menu pages:

o Login ke halaman administrator, http://namadomain.ext/wp-admin

o Klik menu Pages, Klik Add New

o Ketikan Judul & Isi Pages, Klik Publish

10

11

Gambar 4.11, Menu Pages, Add New

Mitrawebsite.Com 23
Tutorial Update Website

Jika diperhatikan pada gambar 4.11, menu pages, add new, tampilan dan fungsi
relatif sama dengan menu post pada gambar 4.8.

Hanya ada beberapa point yang berbeda yaitu:

o No. 10  Parent

Berfungsi untuk menentukan page yang dibuat menjadi Parent atau Sub Page

o No. 11  Order

Menentukan urutan Pages, dari kiri ke kanan atau dari atas ke bawah atau
dari nomor order kecil ke besar.

Misal, membuat page dengan urutan sebagai berikut :

Home | Tentang Kami | Mitra Kami | Galery Foto | Download | dan seterusnya,
maka jika dibuatkan tabel urutan menu Pages adalah sebagai berikut:

Judul Pages Tentang kami Mitra Kami Galery Foto Download


Parent No Parent No Parent No Parent No Parent
Order 1 2 3 4

Bagaimana jika susunan menu di tukar-tukar urutannya:

0.Home | 1.Tentang Kami | 2.Mitra Kami | 3.Galery Foto | 4.Download

menjadi  0.Home | 1.Tentang Kami | 2.Galery Foto | 3.Download | 4.Mitra Kami

Caranya mudah, yaitu cukup menganti urutan nomor order saja, maka otomatis
susunan menu pages pun akan ikut menyesuaikan dengan terakhir yang
dimodifikasi.

Judul Pages Tentang kami Mitra Kami Galery Foto Download


Parent No Parent No Parent No Parent No Parent
Order (lama) 1 2 3 4
Order (baru) menjadi 1 menjadi 4 menjadi 2 menjadi 3

Begitu pula, berlaku untuk membuat sub pages.

Misal, menu pages “Tentang Kami” mempunyai sub page sebagai berikut :

o Pendiri

o Visi, Misi & Motto

o Struktur Organisasi

o Bank Account

Mitrawebsite.Com 24
Tutorial Update Website

o Hubungi kami

Maka jika dibuatkan tabel urutan sub pages dengan parent “Tentang Kami” sebagai
berikut:

Visi, Misi Struktur


Judul Pages Pendiri Bank Account Hubungi Kami
Motto Organisasi
“Tentang “Tentang “Tentang “Tentang
Parent “Tentang Kami”
Kami” Kami” Kami” Kami”
Order 1 2 3 4 5

4.7 MENU COMMENT

Berfungsi untuk memoderasi komentar pada website, seperti aprove comment,


pending, menandai spam, trash atau delete comment.
Berikut screen shoot menu comment :

2 3 4 5 6

Gambar 4.12, Menu Comment

o (gambar 4.12) No. 1  Menu Comment

All : melihat semua comment

Pending : melihat comment yang masuk, tetapi belum di Approve

Approved : daftar comment yang sudah di approve

Spam : daftar comment yang masuk kategori spam atau membahayakan

Trash : daftar comment yang telah dihapus

Mitrawebsite.Com 25
Tutorial Update Website

o (gambar 4.12) No. 2  Approve (menerima comment & menampilkan pada


halaman website)

o (gambar 4.12) No. 3  Reply (membalas/ menjawab comment)

o (gambar 4.12) No. 4  Edit (melakukan edit comment)

o (gambar 4.12) No. 5  Spam (menandai comment sebagai spam, karena bahaya
atau tidak layak tampil pada halaman website)

o (gambar 4.12) No. 6  Trash (menghapus comment) tetapi tidak hilang secara
permanent, suatu saat nanti bisa di tampilkan kembali, fungsi ini sama seperti
recycle bin pada program microsoft windows.

o (gambar 4.12) No. 7  Daftar beberapa comment yang telah masuk

4.8 BACK UP DATA WEBSITE

Untuk mengantisipasi hal-hal yang tidak inginkan seperti di Hackernya website baik
dengan deface atau menggunakan PHP Injection atau teknik lainnya yang menurut
penulis akan selalu berkembang dan terus berkembang maka alangkah baiknya
Administrator Website khususnya melakukan Back Up data website secara berkala.

Jika memang memang website sering diupdate lakukan back up data minimal 1
bulan sekali, atau jika jarang di update lakukan back up data setelah terakhir
melakukan penambahan data pada website.

Berikut cara melakukan back up data website :

o Klik menu Tools

o Klik Export

o Klik Download Export File, Pilih Save file, Klik OK

o Lalu tentukan tempat penyimpanan file Back Up

o Klik Save

Mitrawebsite.Com 26
Gambar 4.13, Download Export File
Tutorial Update Website

BAB V
WEB MAIL

5.1 PENGERTIAN

Webmail adalah layanan email yang menggunakan web browser, seperti Mozila
Firefox, Internet Explorer, Opera, Google Chrome sebagai email clientnya yaitu
untuk membuka & mengirim email. Kelebihan webmail adalah dapat diakses
dimanapun kapanpun pada komputer atau gadget yang mempunyai koneksi
internet.

5.2 CARA LOGIN WEBMAIL

Sebelum dijelaskan lebih lanjut, penulis informasikan, webmail yang akan dibahas
disini adalah webmail dengan nama domain sendiri yang di sinergikan dengan
Google Mail dengan ketentuan :

o Satu domain maksimal memiliki 50 User Account

o Masing-masing Account kapasitas maksimal 7 GB

o Cara menggunakan webmail dengan domain sendiri sama persis dengan cara
menggunakan Google Mail atau Gmail.

Ok, untuk lebih jelas berikut cara akses webmail:

o Aktifkan browser, Mozila Firefox

o Ketikan di Address bar : http://webmail.namadomain.ext

o Contoh  http://webmail.saharakafila.com, lalu masukan username & password

Gambar 6.4, Login Form

Mitrawebsite.Com 27
Tutorial Update Website

5.3 CARA CREATE EMAIL ACCOUNT

Telah dijelaskan bahwa kapasitas email maksimal 50 Account yang dapat di Create
oleh Administrator webmail. Dalam hal ini Administrator webmail mempunyai
otoritas tertinggi, karena selain Create Account, Admin juga dapat Delete Account.

Berikut cara create email account :

o Ketikan di Address bar : http://webmail.namadomain.ext

o Contoh  http://webmail.saharakafila.com, lalu masukan username & password

o Klik Sign in

o Lalu pada sudut kanan atas, klik Manage this domain (gambar 5.1)

Gambar 5.1, Webmail, Manage this domain


Klik Organization & Users (gambar 5.2)

Gambar 5.2, Organization & Users

o Kik Create new user (gambar 5.3)

Gambar 5.3, Create new user

Mitrawebsite.Com 28
Tutorial Update Website

o First Name : Masukan nama depan

o Last name : masukan nama belakang

o Primary email address : masukan alamat email

o Set Password : klik, lalu masukan password baru

o Klik Create new user

5.4 Cara Membuka eMail

o Aktifkan browser, Mozila Firefox

o Ketikan di Address bar : http://webmail.namadomain.ext

o Contoh  http://webmail.saharakafila.com, lalu masukan username &


password

o Klik Sign in

Gambar 6.5, Webmail jika Login berhasil

o No. 1  Klik, untuk mengirim email

o No. 2  Klik, untuk melihat email masuk

o Langkah lain sama seperti menggunakan fasilitas Gmail.

Mitrawebsite.Com 29
Tutorial Update Website

BAB VI
PHOTOSHOP

6.1 PENGERTIAN

Photoshop adalah satu diantara program pengelola gambar yang sangat handal,
dan banyak digunakan oleh para modifikator foto & images serta oleh para web
design untuk membuat tampilan website agar lebih menarik.

Diantara fasilitas yang umum digunakan untuk membuat tampilan website menarik
adalah merubah ukuran images, memberi tulisan pada images dan pada modul ini
akan dicoba dibahas.

6.2 STANDARD UKURAN IMAGES

Sebelum membahas lebih lanjut penulis informasikan standard ukuran images yang
digunakan pada website ini, sehingga nanti pada saat praktek akan langsung dapat
diterapkan pada website.

Adapun ukuran standard images adalah sebagai berikut:

o Images Post (digunakan untuk produk, artikel, berita & informasi)

Width: 300 Pixel

Height:
200 Pixel

Gambar 6.1, contoh ukuran image posting

o Image Banner

Width: 300 Pixel

Height:
75 Pixel

Gambar 6.2, contoh ukuran image banner

Mitrawebsite.Com 30
Tutorial Update Website

6.3 CARA MEMBUAT IMAGES POST

Caranya adalah sebagai berikut:

LANGKAH PERTAMA, menyiapkan media gambar baru

o Buka program Photoshop, Klik Start, Program, Photoshop

o Selanjutnya adalah buka media gambar baru Photoshop dengan ukuran yang
kita kehendaki, untuk contoh latihan disini gunakan keterangan ukuran images
seperti diatas yaitu 350 x 200 pixel untuk Images Post dan 300 x 75 pixel untuk
images banner.

o Setelah program photoshop terbuka, klik File, klik New

Gambar 6.3, contoh setting, File, New pada Photoshop

o Name : ketik nama file bebas, contoh: images post

o Width : 350, kotak sebelah kanan pastikan satuan adalah pixels

o Height : 200, kotak sebelah kanan pastikan satuan adalah pixels

o Resolution : 72 pixel/ inch

o Color mode : RGB Color, 8 bit

o Background content : Transparent

o Klik OK

Mitrawebsite.Com 31
Tutorial Update Website

Gambar 6.4, contoh hasil buka media gambar baru

Langkah pertama sudah selesai yaitu menyiapkan media gambar baru sesuai
ukuran yang kita tentukan, sebagai catatan ukuran bisa disesuaikan dengan
kebutuhan masing-masing seperti contoh buat design spanduk ukuran 4x1 meter,
design brosur dan lain sebagainya.

LANGKAH KEDUA, membuka file yang akan dimodifikasi

Untuk latihan terdapat file gambar_masjid.jpg dalam CD yang penulis sertakan

o Klik menu File, klik Open

Gambar 6.5, contoh File, Open pada Photoshop

o Setelah terbuka file gambar_masjid.jpg, selanjutnya setting ukuran images

Mitrawebsite.Com 32
Tutorial Update Website

o Caranya, klik menu Images, lalu klik Images Size

Gambar 6.6, contoh Klik Images Size

o Ganti nilai Width  menjadi 350 pixel (nilai 350 pixel diambil karena bidang
gambar yang telah dibuat pada langkah pertama media bidang gambar adalah
350x200 pixel)

o Nilai Height  otomatis berubah menjadi 263 pixel (jika hasil nilai height pada
gambar selain contoh diatas menghasilkan nilai kurang dari 200 pixel, maka
width bisa disesuaikan, artinya Width tidak harus 350 pixel)

Intinya adalah hasil images size untuk width & height harus lebih besar
atau sama dengan bidang gambar, contoh diatas hasil images size 350 x
263 pixel lebih besar dibanding bidang gambar 350 x 200 pixel.

o Klik OK

Selanjutnya memindahkan gambar hasil images size ini ke dalam bidang


gambar, caranya:

 Blok seluruh gambar, klik menu Edit, klik Select All atau menggunakan
kombinasi tombol keyboard CTRL + A

 Copy gambar, klik menu Edit, klik Copy atau menggunakan kombinasi tombol
keyboard CTRL + C

 Pindah ke media gambar baru yang dibuat pada langkah pertama, klik menu
Window, lalu arahkan ke baris menu paling bawah images post atau Untitled-

Mitrawebsite.Com 33
Tutorial Update Website

 Lalu klik menu Edit, klik Paste atau menggunakan kombinasi tombol keyboard
CTRL + V

LANGKAH KETIGA, mengatur tata letak gambar

Caranya adalah sebagai berikut :

Move Tools

Setelah gambar berhasil di pindahkan ke media gambar dengan


cara PASTE seperti langkah diatas, selanjutnya adalah mengatur
tata letak gambar dengan cara mengeser posisi gambar, dengan
langkah :

• Klik Tool bar, Move Tools, toolbar ini biasanya terletak di sisi kiri
program photoshop.

• Selanjutnya arahkan mouse pada gambar hasil PASTE tadi lalu di


Drag (klik mouse, tahan, tarik) sehingga menghasilkan posisi
objek gambar yang cocok

• Lalu simpan file (lihat cara simpan dihalaman berikutnya)

Langkah diatas bisa digunakan untuk membuat image banner,


yaitu pada saat membuka file baru pada langkah pertama menganti ukuran
300 x 75.

6.4 MERUBAH UKURAN FOTO

Resolusi foto yang dihasilkan oleh gadget saat ini semakin hari semakin bagus,
selain itu juga dimensi dan ukuran file foto semakin besar, nah tatkala foto ini akan
ditampilkan pada website maka muncul beberapa keluhan baik pada saat upload
ataupun download foto, diantara keluhan yang umum karena rata-rata pengguna
internet koneksinya belum maksimal atau masih lambat.

Untuk mensiasatinya hal tersebut adalah dengan mengurangi dimensi dan ukuran
foto sehingga tatkala pengunjung mengakses galery foto pada website tidak terlalu
berat.

Untuk latihan terdapat file gambar_masjid.jpg dalam CD yang penulis sertakan

o Klik menu File, klik Open

o Setelah terbuka file masjid_jeddah.jpg, selanjutnya setting ukuran images

Mitrawebsite.Com 34
Tutorial Update Website

o Caranya, klik menu Images, lalu klik Images Size

Gambar 6.7, contoh Klik Images Size

o Ganti nilai Width  menjadi 800 pixel

o Nilai Height  otomatis berubah menjadi 600 pixel

o Klik OK

o Lalu simpan file (lihat cara simpan dihalaman berikutnya)

6.5 MENAMBAH TULISAN PADA GAMBAR

Tombol OK

Daftar Layer

Mitrawebsite.Com Gambar 6.8, contoh memberi tulisan pada gambar 35


Tutorial Update Website

Cara memberi tulisan pada gambar adalah sebagai berikut :

 Klik Tool bar, Horizontal Type Tools

 Horizontal Selanjutnya arahkan mouse pada gambar dan klik 1x dimana


Type Tools
tulisan akan diletakan, ketikan contoh teks  MASJID, klik tombol OK

 Selanjutnya gunakan Move Tools mengatur posisi tulisan (lihat


langkah 3 diatas pada cara mengatur tata letak gambar)

 Gunakan toolbar yang di dalam kotak garis merah pada


gambar 6.8 untuk setting tulisan, seperti jenis huruf, ukuran huruf, warna huruf
dan lain sebagainya.

DAFTAR LAYER

Layer adalah nama dan tempat suatu objek dalam photoshop,


seperti contoh gambar 6.8 diatas pada kotak garis warna biru
terdapat daftar layer berjumlah 2 layer yaitu, 1 layer objek teks
dan 1 layer lagi objek gambar masjid.

Contoh lagi, buat tulisan disudut kanan bawah alamat URL, klik Tool bar,
Horizontal Type Tools, lalu ketikan  www.mitrawebsite.com, klik tombol ok,
lalu perhatikan pada Daftar Layer akan terdapat 3 list, dan begitu seterusnya.

Yang penting dan perlu diperhatikan adalah setiap akan modifikasi objek
dalam photoshop terlebih dahulu, KLIK LAYER target yang akan dimodifikasi.

6.6 CARA MENYIMPAN FILE PHOTOSHOP

Dalam program photoshop ada beberapa extention file yang umum digunakan,
diantaranya adalah .PSD atau PhotoShopDocument yaitu format file standard
photoshop, format file ini menyimpan file masih dalam bentuk layer-layer
sehingga kapan waktu akan dilakukan edit atau modifikasi akan lebih mudah
dan dinamis, extention lain adalah yang umum digunakan dalam website yaitu
.GIF, .JPG dan .PNG, format file ini layer-layer sudah tercompile menjadi satu.

LANGKAH PERTAMA, simpan dalam format .PSD

Caranya adalah sebagai berikut :

o Klik menu FILE, klik Save

Mitrawebsite.Com 36
Tutorial Update Website

o Tentukan folder letak akan disimpan, lalu ketikan nama file, klik Save

LANGKAH KEDUA, simpan dalam format .PNG/ .GIF/ .JPG

Caranya adalah sebagai berikut :

o Klik menu FILE, klik Save for web or device

Gambar 7.9, contoh file, save for web or device

o Kotak biru untuk memilih extention file, .JPEG/ .GIF/ .PNG

o Kotak warna merah untuk melihat ukuran file yang dihasilkan, beda
extention, beda juga ukuran filenya.

Rekomendasi gunakan .JPEG karena ukuran filenya kecil.

Mitrawebsite.Com 37