Diktat Rekayasa Web1

63

Click here to load reader

Transcript of Diktat Rekayasa Web1

Page 1: Diktat Rekayasa Web1

[REKAYASA WEB]Untuk Kalangan Sendiri

2012

STMIK NURDIN HAMZAH JAMBI

Suroto, S.Kom

Page 2: Diktat Rekayasa Web1

REKAYASA WEB

3 SKS (TEORI)

Pengertian Rekayasa Web

Rekayasa Web adalah suatu proses sistem aplikasi berbasis web dengan menggunakan ilmu

rekayasa, prinsip-prinsip manajemen dan pendekatan sistematis sehingga menghasilkan sistem

dan aplikasi web kualitas tinggi. Rekayasa web mengadaptasi rekayasa perangkat lunak dalam

hal konsep dasar yang menekankan pada aktifitas teknis dan manajemen. Namun demikian

adaptasi tidak secara utuh, tapi dengan perubahan dan penyesuaian. Rekayasa web gabungan

antara web publishing (suatu konsep yang berasal dari printed publishing) dan aktifitas rekayasa

perangkat lunak. Dikatakan demikian karena desain sebuah aplikasi web menekankan pada

desain grafis, desain informasi, teori hypertext, desain sistem dan pemrograman.

Ciri dan sifat WebApp (Web Application)

Aplikasi web berbeda dari software lain karena hal-hal dibawah ini:

1. Network intensive. Sifat dasar dari WebApp (aplikasi web) adalah aplikasi ini ditujukan

untuk berada di jaringan dan memenuhi kebutuhan komunitas yang berbeda.

2. Content-Driven. Sebagian besar fungsi dari WebApp adalah untuk menyajikan informasi

dalam bentuk teks, grafik, audio dan video ke end user.

3. Continuous evolution. Selalu berkembang secara terus menerus.

4. Document-oriented. Halaman-halaman situs yang statis akan tetap ada sekalipun sudah

ada pemrograman web dengan java atau yang lain.

Selain itu WebApp memiliki karakteristik seperti berikut ini :

1. Immediacy. Diperlukan segera untuk memenuhi ditayangkan, dipasarkan dalam waktu

singkat.

2. Security. Untuk melindungi isi yang sensitif dan menyediakan pengiriman data yang

aman, keamanan suatu WebApp harus diterapkan pada seluruh infrastruktur yang

mendukung WebApp dan termasuk dalam WebApp sendiri.

Page 3: Diktat Rekayasa Web1

3. Aesthetics. Daya tarik utama WebApp adalah tampilan dan keindahan. Jika WebApp

digunakan untuk memasarkan suatu produk maka sisi aestetika harus diperhatikan

sebagaimana sisi teknis.

Faktor-faktor yang menentukan kualitas suatu web digambarkan pada gambar 1.

Faktor-faktor kualitas pada gambar 1 adalah faktor-faktor yang membantu web developer dalam

merancang dan membangun webapp yang dapat diterima dan memenuhi kebutuhan end user

yang begitu beragam. Untuk memenuhi faktor-faktor kualitas tersebut, perancangan dan

implementasi webapp terkait dengan 3 teknologi yang sangat penting yaitu: component-based

development, security dan standart Internet. Seorang web developer harus mengenal 3 teknologi

ini untuk membangun webapp yang berkualitas:

1. Component-based development : CORBA,DCOM/COM dan JavaBeans merupakan

standar yang memungkinkan web developer menggunakan komponen-komponen yang

sudah ada untuk berkomunikasi dengan sistem pada level lain.

2. Keamanan: enkripsi, dan firewall

3. standart Internet: HTML, XML

Page 4: Diktat Rekayasa Web1

Tujuannya dari penggunaan Rekayasa Web :

– mengendalikan pengembangan

– minimalisasi resiko

– meningkatkan kualitas sistem berbasis web.

Formulasi dan Analisis sistem berbasis web

Formulasi dan analisis sistem dan aplikasi berbasis web adalah serangkaian aktifitas rekayasa

web yang dimulai dengan identifikasi tujuan dan diakhiri dengan pembangunan analisis model

atau spesifikasi requirement sistem.

Formulasi

Formulasi memungkinkan klien untuk membangun dan menetapkan tujuan-tujuan pembangunan

web. Beberapa pertanyaan berikut dapat membantu menentukan tujuan :

Apa motivasi utama pembangunan WebApp?

Mengapa WebApp diperlukan?

Siapa yang akan menggunakan WebApp?

Ada dua macam tujuan:

1. Informational goals = tujuan dari penyajian isi atau informasi kepada end user

2. Applicative goals = berkaitan dengan kemampuan yang dimiliki WebApp

Analisis rekayasa web.

Ada 4 tipe analisis dalam rekayasa web:

1. Content Analysis. = Isi yang akan disajikan oleh WebApp dalam ditentukan formatnya baik

itu berupa text, grafik dan image, video, dan audio.

2. Interaction Analysis. = Cara interaksi antara user dan WebApp dijelaskan.

Page 5: Diktat Rekayasa Web1

3. Functional Analysis. = Menentukan operasi yang akan diaplikasikan pada WebApp dan

termasuk di dalamnya fungsi-fungsi yang melakukan proses. Semua operasi dan fungsi

dideskripsikan secara detil.

4. Configuration Analysis. = Lingkungan internal, eksternal dan infrastruktur dimana WebApp

akan digambarkan secara detil.

Page 6: Diktat Rekayasa Web1

PENGENALAN BLOG

Blog merupakan singkatan dari "web log" adalah bentuk aplikasi web yang menyerupai tulisan -

tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini

seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih

lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh

semua pengguna internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

Sejarah Blog

Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum

akhirnya PyraLab diakuisi oleh Google.Com pada akhir tahun 2002 yang lalu. Semenjak itu,

banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada

perkembangan para penulis blog tersebut.

Page 7: Diktat Rekayasa Web1

Blog mempunyai fungsi yang sangat beragam, dari sebuah catatan harian, media publikasi dalam

sebuah kampanye politik, sampai dengan program-program media dan perusahaan-perusahaan.

Sebagian blog dipelihara oleh seorang penulis tunggal, sementara sebagian lainnya oleh beberapa

penulis. Banyak juga weblog yang memiliki fasilitas interaksi dengan para pengunjungnya, yang

dapat memperkenankan para pengunjungnya untuk meninggalkan komentar atas isi dari tulisan

yang dipublikasikan, namun demikian ada juga yang yang sebaliknya atau yang bersifat non-

interaktif.

Istilah-istilah dalam dunia blog :

• Blogger ?

Sebutan untuk pemilik blog komunitas atau kumpulan pengguna blog yang saling

berkunjung ke blog lainnya.

• Blogging

aktifitas kita di blog seperti nulis artikel, posting, dan lainnya

• Blogworld, Blogosphere, Blogland artinya semua kira-kira dunia dimana blog-blog ini

hidup dan tumbuh

• Blogstrom

sebuah kumpulan gelombang aktifitas, informasi dan opini yang sangat besar mengerupsi

beberapa subyek atau sangat kontroversi dalam blogoshpere

• Blogrolling/Blogrolodex/Blogfriends

Daftar nama teman atau rekan dalam blog

• Blogshares

Pasar saham fantasi dimana blogger bisa jualan saham blog

• Blogstalking, ini terjadi ketika ada seseorang yang menguntit (stalking) dan menikuti

aktifitas Blog anda dengan diam-diam di Blog yang lain. Dia mengkopi entry anda satu

demi satu ke Blog-nya dia. Dapat disebut juga sebagai plagiat.

Jenis-Jenis Blog :

Blog politik: Tentang berita, politik, aktivis, dan semua persoalan berbasis blog (Seperti

kampanye).

Blog pribadi: Disebut juga buku harian online yang berisikan tentang pengalaman

keseharian seseorang, keluhan, puisi atau syair, gagasan jahat, dan perbincangan teman.

Page 8: Diktat Rekayasa Web1

Blog bertopik: Blog yang membahas tentang sesuatu, dan fokus pada bahasan tertentu

Blog kesehatan: Lebih spesifik tentang kesehatan. Blog kesehatan kebanyakan berisi

tentang keluhan pasien, berita kesehatan terbaru, keterangan-ketarangan tentang

kesehatan, dll.

Blog sastra: Lebih dikenal sebagai litblog (Literary blog).

Blog perjalanan: Fokus pada bahasan cerita perjalanan yang menceritakan keterangan-

keterangan tentang perjalanan/traveling.

Blog riset: Persoalan tentang akademis seperti berita riset terbaru.

Blog hukum: Persoalan tentang hukum atau urusan hukum; disebut juga dengan blawgs

(Blog Laws).

Blog media: Berfokus pada bahasan kebohongan atau ketidakkonsistensi media massa;

biasanya hanya untuk koran atau jaringan televisi

Blog agama: Membahas tentang agama

Blog pendidikan: Biasanya ditulis oleh pelajar atau guru.

Blog kebersamaan: Topik lebih spesifik ditulis oleh kelompok tertentu.

Blog petunjuk (directory): Berisi ratusan link halaman website.

Blog bisnis: Digunakan oleh pegawai atau wirausahawan untuk kegiatan promosi bisnis

mereka

Blog pengejawantahan: Fokus tentang objek diluar manusia; seperti anjing

Blog pengganggu (spam): Digunakan untuk promosi bisnis affiliate; juga dikenal sebagai

splogs (Spam Blog)

Contoh Tampilan Blog :

Page 9: Diktat Rekayasa Web1
Page 10: Diktat Rekayasa Web1

Banyak layanan yang memberikan jasa blog secara gratis diantaranya :

Blogger.com

Banyak yang merekomendasikan situs ini sebagai salah satu layanan penyedia blog gratis terbaik

saat ini. Walaupun telah di akuisisi oleh Google, namun Blogger.com malah semakin tumbuh

dengan pesat seiring dengan menjamurnya pengguna blog di seluruh penjuru dunia. Membuat

sebuah blog yang anda inginkan dalam situs ini terbilang sangatlah mudah. Jika anda belajar

sedikit tutorial tentang kode HTML dasar, maka akan sangat membantu anda dalam berkarya

dengan blog anda. Kemudahan lain dalam Blogger.com ini adalah, jika anda telah memiliki Blog

sendiri maka Blogger.com tidak akan membatasi jumlah Blog yang dapat anda buat.

Anda dapat memilih desain interface Blog dari template yang telah disediakan, atau jika anda

telah menguasai HTML maka anda dapat merancangnya sendiri atau memodifikasi sesuai

dengan keinginan anda. Blog yang anda buat selain dapat ditempatkan di server yang disediakan

oleh Blogger.com, anda juga dapat menempatkannya di layanan website lain.

Salah satu kelebihan yang dimiliki oleh blogger adalah aplikasinya yang sangat mudah

aplikasinya. Blogger merupakan salah satu penyedia layanan blog gratis pertama yang membuat

blog menjadi begitu populer. Dan sampai saat ini pun Blogger.com tetap menjadi situs penyedia

layanan blog yang paling banyak diminati dan gratis. Kelebihan lain dari blogger adalah setiap

blog yang dibuat di blogger.com sangat disukai oleh mesin pencari, jadi kita tidak perlu repot-

repot lagi untuk memahami teknik-teknik SEO (Search Engine Optimization) yang rumit supaya

blog kita bisa di index oleh mesin pencari. Jika anda membuat blog menggunakan blogger, maka

anda akan mendapatkan sebuah blog dengan alamat http://namablog.blogspot.com

Wordpress.com

Sebagai sebuah tool pembuat blog yang sangat populer, WordPress tentunya sudah tidak asing

lagi dikalangan para bloger mania. Untuk bisa mendapatkan sebuah blog disini, anda harus

mendaftar dulu secara gratis, dan anda akan mendapatkan sebuah blog dengan alamat

http://namablog.wordpress.com

Fitur utama dari WordPress ??

• Dukungan kategori dan sub kategori posting yang tak terbatas

Page 11: Diktat Rekayasa Web1

• Sindikasi otomatis dengan RSS dan Atom

• Menggunakan interface XML RPC yang memungkinkan posting dari mana saja,

termasuk dari email

• Kemudahan penambahan plugin dan themes (tampilan)

• Kemudahan mengimport data dari sistem blog lainnya, seperti MovableType, Blogger,

TextPattern, dan b2evolution

• Kemudahan posting dengan dukungan WYSIWYG editor

• Kemudahan administrasi dan maintenance

• Fasilitas pencarian yang komprehensif

• Dukungan berbagai bahasa

• Dukungan dokumentasi yang lengkap dan komunitas yang cukup banyak

• Lisensi GNU General Public License sehingga dapat didownload secara bebas

• Content Based Management System

WordPress dapat didownload secara gratis di situs resminya yang beralamat di

http://www.wordpress.org

Dengan kemudahan penambahan plugin tambahan pada WordPress, maka dimungkinkan

wordpress tidak hanya berfungsi sebagai aplikasi blog publishing system, namun lebih dari itu,

WordPress dapat dikembangkan menjadi suatu framework yang berguna untuk keperluan lain.

Page 12: Diktat Rekayasa Web1

BlogSome.com

Sama halnya dengan kedua penyedia layanan blog diatas, blogsome juga hadir untuk ikut

meramaikan dunia blogging dengan menyediakan layanan blog gratis. Proses pendaftaran nya

juga relatif mudah dan user friendly. Alamat blog anda jika membuat blog di blogsome adalah

http://namablog.blogsome.com

Oggix.org

Oggix yang selama ini terkenal dengan shoutbox nya, rupanya juga tidak mau ketinggalan untuk

memberikan layanan blog gratis untuk para blogger. Kelebihan yang di berikan oleh oggix

adalah semua blog yang didaftarkan disana, akan bisa diintegrasikan dengan layanan oggix yang

lain. Alamat blog yang akan anda dapatkan adalah http://namablog.oggix.org.

Jika anda tidak begitu suka dengan layanan tersebut diatas, maka anda juga dapat membuat blog

anda pada situs penyedia jasa pembuat blog lain seperti :

www.blogdetik.com

www.blog.com

www.thoughts.com

www.clearblogs.com

www.livejournal.com

www.travelPod.com

www.blogvis.com

www.mytypes.com

Page 13: Diktat Rekayasa Web1

www.soulcast.com

www.aeonity.com

www.bravenet.com

www.sosblog.com

www.20six.co.uk

www.freeblogit.com

www.outblogger.com

www.blogthing.com

www.plinplan.net

Dan lain sebagainya…

Mendaftar Pada Blogger.com

Jika anda ingin memiliki account blog pada Bloger.com anda dapat mendaftar di alamat

www.blogger.com, maka akan tampil, seperti tampilan dibawah ini :

Page 14: Diktat Rekayasa Web1

Langkah selanjutnya :

Klik Tombol Ini

Page 15: Diktat Rekayasa Web1

Tulis alamat email anda yang aktif

Tulis Ulang Email AndaYang sama dengan diatas

Tulis Password Yang Samamin. 8 char

Nama Tampilan Blog Anda

Tulis kata sandi Nya

Cek Kotak InI

Klik Tombol Ini

Tulis Judul Blog Anda

Ini adalah alamat BlogAnda

Klik Tombol Ini

Page 16: Diktat Rekayasa Web1

Pilih Themes YangAnda Suka

Start Bloggging

Page 17: Diktat Rekayasa Web1

Mendaftar Pada Wordpress.com

Jika anda ingin memiliki account blog pada wordpress.com maka langkah yang harus anda

lakukan adalah :

• Buka browser

• Masuk ke URL www.wordpress.com

• Kita dapat membuat blog secara gratis.

• Karena gratis jadii ada beberapa keterbatasan diantaranya themes yang akan digunakan

sudah disediakan kita tidak dapat mengupload themes desain kita sendiri tetapi fungsi-

fungsi utama dari blog, seperti halnya posting, comment system, page, tersedia

dengan baik.

Silahkan tekan tombol ini

Page 18: Diktat Rekayasa Web1
Page 19: Diktat Rekayasa Web1

• Cek email anda pada INBOX, jika tidak ada silahkan cek pada SPAM anda

Buka email dari Wordpress.com

Page 20: Diktat Rekayasa Web1

Klik Alamat link ini !!!

Page 21: Diktat Rekayasa Web1

Lalu anda login sesuai dengan username dan password yang anda buat sebelumnya :

Silahkan Anda Login

Page 22: Diktat Rekayasa Web1

Menu Pada Wordpress :

1. Menu Dashboard

Menu dashboard adalah halaman utama admin panel, terdapat beberapa link (shortcut)

seperti Write New Page ,Write New Post , Latest Actifity , Statistic, Recent Comments

2. Menu Write

Page 23: Diktat Rekayasa Web1

Menu Write terdiri dari 3 sub menu yaitu : Write Post ,Write Page dan Link.

– Write Post

digunakan untuk menambahkan tulisan (posting) pada blog anda

– Write Page

digunakan untuk menambahkan halaman baru

– Link

Digunakan untuk menambahkan Link baru pada blog anda

3. Menu Manage

Menu Manage terdiri dari :

– Posts, untuk me-manage posting yang sudah ada.

– Pages, untuk me-manage page yang sudah ada.

– Links, untuk me-manage alamat URL yang dapat diakses

– Categories, untuk me-manage kategori posting/page.

– Tags, untuk me-manage Tags yang ada

Page 24: Diktat Rekayasa Web1

– Link Categories untuk mengatur link pada categori

– Media Library, untuk mengatur media yang dapat di upload pada blog

– Import, untuk mengimport data dari jenis blog system yang lain, diantaranya dari

Blogger, Blogware, LiveJournal, MovableType, RSS dsb.

– Export, untuk mengeksport data blog ke dalam format XML.

4. Menu Design

– Themes, berisi themes yang tersedia dalam wordpress. Anda juga dapat

mengganti themes sesuai yang Anda inginkan dari halaman ini.

– Widgets, untuk mengatur tampilan dan posisi komponen seperti link, page, last

posting, search, dsb. Submenu ini akan tampil hanya untuk themes yang

mendukung widget.

– Extras, untuk mengedit atau mengubah Fitur extras yang ada seperti Snap Shots

– Custom Image Header, mengubah tampilan header

– Edit CSS, mengubah Kode CSS dari Wordpress

5. Menu Comments

Page 25: Diktat Rekayasa Web1

Pada menu comments terdapat beberapa submenu yaitu :

– Comments, berisi daftar komentar yang masuk. Anda juga dapat mengedit,

maupun menghapus komentar.

– Awaiting Moderation, berisi daftar komentar yang dipending (under moderation).

6. Menu Upgrade

Menu Upgrades memberikan informasi tentang perkembangan wordpress.com

Mengubah Tampilan Wordpress

Mengubah tampilan wordpress dapat dilakukan dengan memiilih Menu Design kemudian pilih

Themes yang anda sukai yang telah diberikan oleh Wordpress. Anda dapat memilih themes yang

tersedia dengan menekan salah satu themes untuk melihat tampilan. Jika anda menyukai themes

Page 26: Diktat Rekayasa Web1

tersebut maka anda bisa memilih themes tersebut untuk tampilan blog anda dengan menekan

tombol aktifkan pada kanan atas tampilan.

Mengirim Artikel pada Blog Anda (Posting)

Mengirimkan tulisan atau artikel pada blog biasa kita sebut sebagai posting. Dalam duani blog

posting merupakan ha yang paling utama, karena melalui posting inilah blog kita akan hidup dan

dikunjungi oleh pengguna internet.

Cara mengirim postingan kita pada wordpress dapat dilakukan dengan cara :

Pilih Menu WRITE, maka akan tampila layar seperti berikut :

Page 27: Diktat Rekayasa Web1

Setelah muncul layar tersebut maka anda harus menulis Judul Postingan anda pada

Kolom Title. Teruskan dengan menulis tulisan anda pada kolom Post.

Anda juga dapat memilih model tulisan dengan menekan icon-icon yang ada pada toolbar

dari kolom Post, seperti Bold, Italic, Aligment

Jika anda ingin menambahkan gambar, dapat anda lakukan dengan cara :

Page 28: Diktat Rekayasa Web1

Maka akan tampil layar seperti berikut :

Pilih ICON ini Untuk tambah

gambar

Page 29: Diktat Rekayasa Web1

Pilih Tombol ”Choose files to upload”, anda dapat memilih dari mana gambar akan

diambil :

Setelah anda memilih gambar, untuk menampilkan gambar itu pada postingan anda anda

dapat menekan tombol ”Insert Into Post”

Page 30: Diktat Rekayasa Web1

Jika kita telah yakin dengan tulisan yang kita buat, maka tulisan kita posting dengan cara

menekan tombol Publish atau tampilkan.

Anda dapat melihat tulisan yang anda kirim dengan mengetik alamat URL blog anda :

bloganda.wordpress.com Atau klik “Visit Site” pada halaman atas

Instalasi WordPress Sendiri / Lokal

Wordpress merupakan Aplikasi Open Source yang dapat anda unduh (Download) secara

gratis pada alamat http://www.wordpress.org.

Wordpress dapat diinstal dikomputer sendiri/lokal, karena

– Mudah

– Cepat

– Tidak perlu mengerti Programming

Sebelum menginstal Wordpress pada computer local, ada beberapa hal yang harus terpenuhi

yaitu :

1. Komputer yang akan diinstal sudah berbasis Windows/ Linux/ Unix

2. Komputer juga sudah diinstal Web Server yaitu Apache (Apache Web Server)

Page 31: Diktat Rekayasa Web1

3. Komputer sudah terinstal PHP dengan versi diatas 4.2

4. menggunakan database MYSQL min. Versi 3.2

Untuk mempermudah dalam instalasi, ada software yang menggabungkan keempat elemen

tersebut. Sehingga kita tidak perlu melakukan instalasi satu demi satu elemen-elemen

tersebut.

Anda cukup menginstal XAMPP pada komputer anda, maka semua syarat yang dibutuhkan

untuk menginstall wordpress sudah terpenuhi.

Bagaimana anda mendapatkan XAMPP ???

XAMPP dapat anda dapatkan dengan mengunduh (download) secara gratis di :

http://www.apachefriends.org

Apa itu XAMPP ???

• XAMPP

XAMPP merupakan perangkat lunak yang bersifat free atau gratis, dapat dijalankan pada

semua sistem operasi dan gabungan dan kompilasi dari beberapa program dan digunakan

sebagai server

• XAMPP terdiri atas program :

Apache HTTP Server, MySQL database, dan penterjemah bahasa yang ditulis dengan

bahasa pemrogramaan PHP dan Perl.

XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL,

PHP dan Perl.

Page 32: Diktat Rekayasa Web1

Installasi Wordpress Lokal ( Pada Labkom Univ.Budi Luhur )

• Silahkan ambil di source wordpress di : ftp://ftp/Dosen/Dewi/Wordpress

• Copy pada Drive (E:/ ) komputer anda

• Klik kanan lalu Rename dengan : Mnim anda

Contoh : M0812503779

• Buka Browser Anda, tulis pada address bar:

http://localhost/ M0812503779

• Maka instalasi akan dilakukan seperti pada tampilan dibawah ini :

Jika ingin downloadKilik tombol ini

Tekan tombol ini

Page 33: Diktat Rekayasa Web1

Tekan Tombol INI

Page 34: Diktat Rekayasa Web1

• Sebelum melanjutkan instalasi, kita harus membuat DATABASE terlebih dahulu dengan

cara :

• Tekan Start pilih All Program pilih MySQL-Front

• Setelah database sudah dibuat, maka anda isikan kolom-kolom yang ada di wordpress

sesuai dengan database yang anda create

Page 35: Diktat Rekayasa Web1

• Setelah semua kolo, diisi maka istalasi akan berjalan dengan menekan tombol ”Run the

install”

Page 36: Diktat Rekayasa Web1

• Anda dapat melakukan Login dengan menginput username dan password yang telah

diberikan

Mengedit Profile pada Wordpress

Untuk merubah profile anda di wordpress anda dapat melakukannya pada submenu user yang

berda disebelah kanan atas layar

Page 37: Diktat Rekayasa Web1
Page 38: Diktat Rekayasa Web1

Merubah Design

Jika anda ingin merubah design atau template yang dipakai, anda dapat memilihnya melalui

Menu Design

Lakukan hal yang sama jika anda ingin merubah template wordpress ketika anda merubah

template pada wordpress secara online.

Membuat Category

Fungsi kategori pada wordpress adalah sebagai pengatur topik postingan atau penggolongan

tulisan yang kita tulis. Biasanya para blogger akan membedakan berdasarkan catatan harian,

tentang pekerjaan, IT dan bisa bermacam-macam.

Untuk membuat category masuk Ke Menu “Manage” pilih “Categories”

Page 39: Diktat Rekayasa Web1

Blogging dengan Wordpress

Wordpress merupakan aplikasi untuk blogging yang sangat baik dan powerfull. Wordpress

memiliki tampilan yang user-friendly dan menyediakan semua yang Anda butuhkan dalam

melakukan blogging. Saat mempelajari wordpress, pengetahuan mengenai blogging

merupakan hal yang utama dan wajib Anda miliki.

LEBIH JAUH TENTANG WORDPRESS

Posting merupakan bagian utama dari sebuah blog. Tanpa posting, blog tidak akan ada

artinya. Posting sendiri tidak hanya berupa artikel tekstual, namun dapat juga berupa

posting gambar, video, dll. Segala sesuatu yang tampil di blog Anda merupakan posting.

Sebelum mengenal lebih jauh mengenai posting, Anda perlu mengenal dan mengetahui

mengenai editor WYSIWYG (What You See Is What You Get) dimana dengan editor

WYSIWYG ini, Anda akan mendapatkan hasil akhir tampilan di situs sama seperti apa

yang Anda lihat di editor. Fitur WYSIWYG ini tentunya sudah cukup familiar dan

Page 40: Diktat Rekayasa Web1

dikenal di banyak software pengolah kata, seperti Microsoft Word dan Open Office

Writer.

Untuk menambahkan posting di WordPress sangatlah mudah. Anda sudah

mempelajarinya secara singkat di bab sebelumnya. Berikut ini akan disajikan lebih jauh

mengenai bagaimana menambahkan posting di WordPress termasuk penggunaan

WYSIWYG editor.

Setelah login ke admin panel, untuk melakukan posting, dapat Anda lakukan melalui 2

(dua) cara, yaitu melalui link Write a post yang terdapat di halaman / menu Dashboard

dan melalui menu Write Post yang ada di admin panel. Berikut ini tampilan halaman

untuk posting.

Pada tampilan diatas terdiri atas :

o Title

Setiap posting dalam WordPress harus memiliki judul. Judul posting merupakan

bagian dari lposting yang akan dilihat pertama kali oleh pengunjung. Judul yang baik

dan menarik tentu akan menarik pengunjung untuk membaca isi dari posting. Judul

yang baik harus dapat mencerminkan isi dari posting dan jangan terlalu panjang atau

pendek. Selain sebagai daya tarik pengunjung, judul juga akan menjadi dasar search

engine seperti Google dalam melakukan pencarian (search-engine-friendly).

o Content

Page 41: Diktat Rekayasa Web1

Content atau Post merupakan isi dari posting. Gunakanlah pilihan kata yang tepat,

dan rangkaian kata yang mudah dimengerti dan menarik. Jangan menggunakan

kalimat atau paragraf yang terlalu panjang.

o Image Uploader

Pada WordPress 1.5.x, untuk menambahkan suatu image atau gambar merupakan hal

yang cukup sulit, namun sejak WordPress 2.0, tersedia fasilitas image uploader yang

dapat dengan mudah digunakan untuk menambahkan image atau gambar.

o Discussion Setting

Dengan panel ini, memungkinkan Anda untuk mengatur apakah pengunjung diijinkan

untuk mengirim komentar ke posting atau tidak. Anda juga dapat mengatur posting

dapat di-trackbacks oleh orang lain (situs lain). Hal ini digunakan untuk mencegah

spamming.

o Password Protection Settings

Ada kalanya sebuah posting bersifat private atau aksesnya terbatas, misalnya hanya

orang-orang tertentu saja yang dapat membukanya. Untuk itu, Anda dapat mem-

protect posting dengan suatu password.

o Post slug

Post slug merupakan keyword yang berhubungan dengan posting. Keyword ini akan

mempermudah search-engine (crawler) untuk melakukan pencarian. Tentukan

keyword yang sesuai dengan isi posting.

o Categories

Saat mengirimkan posting, jangan lupa untuk menentukan kategori dari posting.

Kategori posting memungkinkan Anda mengelompokkan posting menurut topik-topik

tertentu. Hal ini juga sangat memudahkan pengunjung dalam mencari informasi yang

diinginkan. Kategori yang dipilih juga sebaiknya sesuai dengan isi posting.

o Post Status

Terkadang saat Anda menuliskan suatu posting, Anda belum ingin menampilkannya

di situs. Post status ini memungkinkan Anda untuk mengatur status posting, yaitu

Published, Pending Review, Draft atau Private.

Page 42: Diktat Rekayasa Web1

o Timestamps Settings

Anda dapat mengubah tanggal suatu posting dikirimkan melalui panel ini

o Trackbacks

Pada bagian ini, Anda dapat menentukan URL atau alamat situs yang berhubungan

dengan posting yang Anda buat. Hal ini berguna untuk meningkatkan ranking

posting.

o Post Author Setting

Pada bagian ini, Anda dapat menentukan user mana yang mengirimkan posting.

Tentu hal ini berguna jika blog Anda memiliki banyak user.

o Rich Text editing

Pada halaman posting, Anda dapat menemukan suatu WYSIWYG editor untuk

mempermudah dalam menambahkan atau mengedit posting. WYSIWYG editor ini

juga biasa disebut sebagai rich text editor. WordPress menggunakan TinyMCE editor

sebagai rich text editornya. Pada dasarnya, rich text editor akan meng-generate

perintah-perintah HTML berhubungan dengan text yang Anda tulis secara otomatis.

Sehingga dengan ini, Anda akan dapat dengan mudah memformat text, menambahkan

link, image, dll. Pada bagian ini, akan dijelaskan secara lebih rinci mengenai bagian-

bagian yang terdapat dalam rich text editor WordPress.

o Berikut ini tampilan rich text editor yang terdapat dalam WordPress.

Bagian pertama dari rich text editor di atas merupakan tombol-tombol yang

digunakan untuk mengubah style text menjadi bold (tebal), italic (miring) atau

strikethrough (tercoret). Misalnya untuk membuat suatu text menjadi tebal, Anda

cukup men-select text tersebut dan menekan tombol B dari rangkaian tombol

yang terdapat di rich text editor.

Empat tombol berikut ini digunakan untuk membantu Anda mengatur bullet and

numbering, serta indent dan outdent.

Page 43: Diktat Rekayasa Web1

Tombol-tombol berikut ini digunakan untuk mengatur perataan text atau paragraf.

Anda dapat mengatur perataan text menjadi rata kiri, rata tengah atau rata kanan.

Sedangkan tombol berikut ini digunakan untuk menambahkan (dan juga

menghapus) hyperlink ke dalam posting.

Untuk membuat suatu hyperlink, pertama pilih (select) text yang akan dijadikan

hyperlink dan klik tombol pertama dari gambar di atas. Selanjutnya akan

ditampilkan window untuk mengatur hyperlink. Window ini berisi inputan URL

atau alamat link, target dan title dari link. Pada bagian target, Anda dapat memilih

target Open link in a new window atau Open link in a same window. Klik

tombol Insert untuk menambahkan link

Gunakan tombol berikut ini jika Anda ingin menambahkan image ke dalam

posting. Namun perlu diperhatikan bahwa melalui menu ini, Anda hanya dapat

menambahkan image dari URL yang sudah ada. Atau dengan kata lain, Anda

tidak dapat mengupload image baru secara langsung

Page 44: Diktat Rekayasa Web1

Untuk menambahkan image ke dalam posting, letakkan cursor mouse pada posisi

gambar yang diinginkan. Selanjutnya tekan tombol Insert image seperti pada

gambar di atas dan akan ditampilkan window Insert/edit image. Pada window

tersebut, Anda harus menentukan Image URL, Image description, alignment,

dimensions, border, vertical space dan horizontal space. Klik tombol Insert

untuk menambahkan dan menampilkan image di editor

Jika suatu saat Anda ingin mengirim posting yang cukup panjang, maka kurang

bijaksana jika Anda menampilkan artikel tersebut di halaman depan secara

keseluruhan. Hal ini tentu akan membuat pengunjung malas membacanya karena

terlalu panjang. Juga akan membuat loading situs terlalu lama karena harus

menampilkan artikel yang demikian panjangnya.

Memilih Themes

Dalam prinsip content management system (CMS), user memungkinkan untuk mengubah

tampilan situs secara mudah tanpa perlu mengetahui bagaimana code HTML atau CSS.

Hampir semua situs berbasis CMS memiliki fitur untuk mengubah tampilan, atau sering

disebut themes atau template.

Wordpress sendiri memiliki ribuan themes yang dikembangkan oleh para pengembang,

komunitas dan pengguna wordpress. Anda hanya tinggal memilih dan memilah themes

yang Anda sukai. Hampir semuanya dapat didownload secara gratis.

Page 45: Diktat Rekayasa Web1

Themes pada umumnya didistribusikan dalam bentuk format standar dan terkompresi

(ZIP atau RAR). Untuk menggunakan themes, pada dasarnya langkahnya cukup mudah.

Anda hanya cukup mendownload, ekstrak di folder tertentu dan aktifkan melalui halaman

admin panel.

Themes pada umumnya didistribusikan dalam bentuk format standar dan terkompresi

(ZIP atau RAR). Untuk menggunakan themes, pada dasarnya langkahnya cukup mudah.

Anda hanya cukup mendownload, ekstrak di folder tertentu dan aktifkan melalui halaman

admin panel.

Berikut ini disajikan beberapa situs penyedia themes wordpress.

Theme Viewer (http://themes.wordpress.net)

Situs ini menjadi official-repository untuk themes wordpress secara resmi sejak bulan Juli

2007. Di situs ini, Anda dapat menemukan ribuan themes yang semuanya dapat

didownload secara gratis. Saat ini (13/09/2007), themes yang tersedia di situs ini

sebanyak 1626 themes dengan total 6.862.899 kali download. Luar biasa!

Disamping link untuk download dan thumbnail dari masing-masing themes, situs ini juga

menyediakan link untuk mencoba themes secara langsung (viewer). Anda juga dapat

melakukan pencarian themes berdasarkan layout (1 kolom, 2 kolom, dsb), warna dasar

(blue, white, black, dsb) dan berdasarkan kriteria lainnya

Page 46: Diktat Rekayasa Web1

Beberapa themes yang paling sering didownload dari situs ini diantaranya Africa theme

1, Cutline 3-Column Split 1.1, Sodelicious Black 1.0, Yourblog 2.0 theme, NetWorker

1.0, Pop Blue, Naruto Strikes Back, LoseMyMind 1.0 with Sidebar, Red Secret 0.1 dan

Talian 1.0.

Situs Penyedia themes wordpress lainnya :http://www.wordpresswow.com/

http://www.wordpresswow.com/ http://wpthemepark.com/

http://wpthemepark.com/ http://www.lukaret.com/wordpress-themes/

http://www.lukaret.com/wordpress-themes/

http://www.bestwpthemes.com/ http://themes.rock-kitty.net/

http://themes.rock-kitty.net/ http://www.reviewmytheme.com/

http://www.reviewmytheme.com/ http://www.wpthemesfree.com/

http://www.wpthemesfree.com/ http://wpdemo.kaushalsheth.com/

http://wpdemo.kaushalsheth.com/ http://biboz.net/themes/

http://biboz.net/themes/ http://wpthemes.info/themes/

http://wpthemes.info/themes/ http://www.themevibes.com/

http://www.themevibes.com/ http://www.mygreencorner.com/

freewordpressthemes.php

Faktor yang harus diperhatikan saat memilih themes :

Isi Blog

Pembaca atau pengunjung

Color atau Font

Ukuran File Theme

Dibawah ini adalah cara bagaimana anda menginstal themes pada komputer anda sendiri :

1. Download Themes

2. Ekstrak File

3. Mengaktifkan themes

4. Preview

Plugin WordPress

Page 47: Diktat Rekayasa Web1

Plugin WordPress merupakan aplikasi terpisah dari WordPress namun dapat dengan mudah

ditambahkan maupun dihilangkan dari WordPress. Plugin ini memberi keleluasaan bagi

pengguna WordPress untuk menambahkan fungsi-fungsi atau fitur-fitur sesuai dengan

kebutuhan pengguna. Saat ini tersedia begitu banyak plugin wordpress di internet. Masing-

masing mempunyai fungsi tertentu. Anda dapat dengan mudah memasang plugin tersebut di

blog Anda.

Berikut ini beberapa situs pengedia plugin WordPress.

Official WordPress Plugins (http://wordpress.org/extend/plugins/)

WordPress Wiki (http://wiki.wordpress.org/Plugin)

WordPress Plugin Repository

(http://dev.wp-plugins.org/wiki/PluginDirectory)

WordPress Plugin Database (http://wp-plugins.net/)

Menginstall dan Mengaktifkan Plugin

Langkah 1. Download Plugin

Pilih dan download plugin yang Anda inginkan.

Langkah 2. Copy (Upload) File

Page 48: Diktat Rekayasa Web1

Copy file plugin yang dipilih, ke folder plugins yang ada di dalam folder wp-content

di folder instalasi wordpress. Jika Anda menginstall wordpress di C:\Program Files\

xampp\htdocs\myblog, maka Anda harus menaruh file plugin di folder C:\Program

Files\xampp\htdocs\myblog\wp-content\plugins. Jika wordpress Anda terdapat di

server hosting, maka Anda harus mengupload file-file themes ke server hosting. Anda

dapat menggunakan FTP atau file manager yang umumnya disediakan di masing-

masing server hosting.

Langkah 3. Mengaktifkan Plugin

Untuk mengaktifkan plugin yang sudah diinstall, login ke admin panel dan pilih

menu Plugins. Plugins yang sudah terinstall akan ditampilkan dalam daftar Plugin

Management. Klik pada link Activate pada plugin yang akan Anda aktifkan dan

plugin akan langsung aktif.

Page 49: Diktat Rekayasa Web1

Langkah 4. Preview

Setelah diaktifkan, beberapa plugin akan menambahkan menu atau submenu di

admin panel. Baca manual atau dokumentasi dari masing-masing plugin untuk

keterangan lebih rinci.

Widget WordPress

Widget Merupakan salah satu jenis plugin. Dikembangkan oleh Matt Mullenweg

(Automattic.com). Fungsi plugin adalah untuk mempermudah user dalam pengaturan tampilan

blog. Penggunaannya mudah hanya Drag and Drop.

Mengatur Tampilan Sidebar dengan Widget.

Untuk mengatur tampilan sidebar dengan widget, login ke admin panel dan buka menu

Presentation dan sub menu Widgets.

Page 50: Diktat Rekayasa Web1

Widget WordPress

Pada halaman widget, terdapat 2 (dua) bagian, yaitu Sidebar dan Available Widgets. Bagian

Sidebar berisi widget apa saja yang ditampilkan di sidebar blog, sedangkan bagian available

widgets berisi widget apa saja yang tersedia. Untuk menambahkan widget ke sidebar blog, Anda

cukup drag-and-drop widget (item) yang berada di available widgets ke kotak Sidebar.

Selanjutnya klik tombol Save Changes untuk menyimpan perubahan.

Drag and drop item widget

Page 51: Diktat Rekayasa Web1

JOOMMLA

Instalasi Joomla Pada Komputer Lokal

Pengenalan Halaman Joomla

1. Halaman Control Panel

Untuk mengetahui user yang sedang login, dapat dilihat pada sub menu “ Logged in user”

Short CutMenu yang seringdigunakan

Menu Administrator

InformasiTentang Joomla

MelihatFont Area

Page 52: Diktat Rekayasa Web1

Untuk melihat artikel yang terbaru (terupdate)

Untuk melihat Menu Yang terdapat Pada front area dan submenunya

Page 53: Diktat Rekayasa Web1

2. Menu Site

Pada Menu site terdapat 4 sub menu, yaitu :

a. Control Panel

b. User Manager

c. Media Manager

d. Global Confoguration

e. Log Out