2014-15. Membuat Website dengan Wordpress

FERYSMED IBRAHIMWordPreass Daevelopment Professional

PENDAHULUAN

• Latar belakang

• Perkembangan teknologi informasi yang semakin canggih membuat

segala sesuatunya menjadi lebih mudah disegala aspek kehidupan.

Perkembangan itu salah satunya ditandai dengan keberadaanPerkembangan itu salah satunya ditandai dengan keberadaan

internet yang telah merebak keseluruhan lapisan masyarakat dunia.

Mulai dari penggunaan akses data, komunikasi, dan jejaring social,

seperti facebook dan twitter, serta pemanfaatan diary online / blog

dimana kita biasa mengekspresikan pikirankita layaknya menulis

diary. Dalam dunia internet, ada beberapa website yang

menyediakan sarana untuk kegiatan tersebut. Contohnya adalah

wordpress yang dapat kita gunakan secara gratis untuk berbagai

aktivitas dan manfaat di dunia maya.

TUJUAN

• Berbagi pengetahuan

• Menambah pengetahuan dan wawasan di bidang Teknologi

Informasi

• Mengetahui dan memahami pembuatan website serta manfaatnya• Mengetahui dan memahami pembuatan website serta manfaatnya

Pengertian WordPress

• WordPress adalah sebuah aplikasi sumber terbuka (open source)

yang sangat popular digunakan sebagai mesin blog (blog engine).

WordPress dibangun dengan bahasa pemrograman PHP dan basis

data (database) MySQL. PHP dan MySQL, keduanya merupakandata (database) MySQL. PHP dan MySQL, keduanya merupakan

perangkat lunak sumber terbuka (open source software).

• WordPress juga mulai digunakan sebagai sebuah CMS (Content

Management System) karena kemampuannya untuk dimodifikasi

dan disesuaikan dengan kebutuhan penggunanya. CMS merupakan

sebuah alat atau software yang dapat digunakan untuk melakukan

pengolahan sebuah website dengan mudah. Mulai dari membuat,

mengelolaisi, hingga mempublikasikan isi website kita tersebut.

Kelebih dan Kekurangan WordPress

� KelebihanWordPress :

• Cara daftarnya mudah.

• Bersifat bebas (free/gratis).

• Dapat digunakan secara Offline(tanpa koneksi internet).

• Thema bisa dikelola dan dipercantik.

• Memudahkan membuat tulisan, pengeditan, pempublikasianpostingan blog.

• Komuniti WordPress Sedia Membantu.

� KekuranganWordPress :

• Hasil edit template/theme yang tidak bisa dilihat secara ‘pratinjau’.

• Kurang leluasa dalam memindahkan gadget-gadget dari satu ruang ke ruang lainnya

• Harus membayar hosting jika ingin custom domain

• Jika banyak plugin yang di install menjadi lambat

• Tidak support dengan javascript

• Sudah tidak bisa memperpendek URL menggunakan adf.ly

• Tidak bisa edit CSS (kecuali upgrade/bayar)

WordPress.com dan WordPress.org

• WordPress.com merupakan situs layanan blog yang menggunakan

mesin WordPress, didirikan oleh perusahaan Automattic. Dengan

mendaftar pada situs WordPress.com, pengguna tidak perlu

melakukan instalasi atau konfigurasi yang cukup sulit. Meskimelakukan instalasi atau konfigurasi yang cukup sulit. Meski

demikian, fitur yang disediakan oleh WordPress.com sudah cukup

bagus.

• WordPress.org merupakan wilayah pengembang (developer). Di

alamat ini, seseorang dapat mengunduh (download) aplikasi

beserta seluruh berkas CMS WordPress.

Perbedaan dalam penggunaan

WordPress.com dan WordPress.org:

• WordPress.com: untuk pengguna yang ingin membuat blog sendiri

secara cepat dan punya alamat website.

• WordPress.org: untuk pengguna yang ingin memodifikasi

WordPress menurut kebutuhan sendiri atau ingin membuat blog WordPress menurut kebutuhan sendiri atau ingin membuat blog

menggunakan alamat dan server sendiri.

• Hal yang dipersiapkan :

• 1. Web server & database server

(Appserv, xampp)

• 2. Install file compres wordpress

• Langkah – Langkahnya adalah :

Langkah – langkah Menginstall

WordPress

dengan Mode Offline

• Langkah – Langkahnya adalah :

• 1. Buka Browser dan pastikan

web server telah terinstall

dengan baik, di browser ketikkan

localhost

• appserv, xampp)

• 2. Jika yang keluar seperti ini

maka anda menggunakan XAMPP

• Kita harus mengetahui dulu kita menggunakan web server yang mana, langkahselanjutnya

• Adalah kita copy paste file installer dari wordpress ke web direktori.

• Jika yang kita gunakan

• Appserv : C� Appserv � www

• Xampp : C� Xampp � Htdoc

• Dalam contoh ini kita menggunakan Xampp

• Jadi kita harus copy paste install dari : C� XAMPP � Htdoc

• NB : Pastikan tidak ada folder dengan nama wordpress di web direktori tersebut.

Lakukan extract pada file wordpress tersebut, dan ganti

nama dengan nama foldernya “belajarweb”

Dan lakukan rename di folder wordpress 3.4.2

Tampilankan phpMyAdmin di Mozilla firefox

seperti berikut ini, dan silahkan buat databasenya dengan nama

“belajarweb”

Dan anda silahkan klik create.

Sebuah database sudah terbuat dengan nama belajarweb, dan buka browser lagi

dan ketikkan “localhost/belajarweb”

Untuk alamat di browser yang diketikkan sesuai dengan folder yang kita buat di web

direktori tadi.

Klik create a configuration file.Klik create a configuration file.

klik Let’s go!

Isikan form dibawah ini

•Database Name : isi dengan nama database yang sebelumnya kita buat di•Database Name : isi dengan nama database yang sebelumnya kita buat di

localhost/phpmyadmin

•User name : adalah user dari database defaultnya root

•Password saya kosongi saja.

•Database hostnya : karena menggunakan yang offline maka diisikan localhost

•Table prefix : biarkan default saja

•Lalu silahkan tekan Submit

Lalu silahkan tekan Run The Install

Site tittle : isi dengan nama web kita (terserah)

User name : isikan dengan user name yang digunakan untuk masuk kedalam halaman administrator

Password : isikan password yang digunakan untuk masuk kedalam halaman administrator

Your email : masukkan email kita

Privacy : pastikan kecentang

Lalu tekan Install wordpress

Klik Login

Proses penginstalan sudah selesai silahkan lihat website anda, cara untuk

mengaksesnya ketikan “localhost/belajarweb”

Melakukan Backup dan Restore pada

Web WordPress

• mengerjakan web offline di komputer yang menggunakan deepfreeze maka

kita tidak melakukan backup (sebut saja save) file web di drive C maka setelah

computer kita restart maka data kita akan hilang.

• Jika kita dalam mengerjakan web ini dengan model berganti ganti computer • Jika kita dalam mengerjakan web ini dengan model berganti ganti computer

misalnya, minggu ini pakai computer sekolah, lalu karena kita baru membeli

computer baru kita Menginginkan biar bisa mengerjakan di komputer rumah,

cara backup dan restore ini

• Yang bisa kita optimalkan. agar data web yang ada di computer sekolah bisa

kita ambil dan kita kerjakan di computer rumah.

Langkah – Langkah yang harus kita

lakukan adalah sebagai berikut

• Backup Folder Web Silahkan Copy dan paste, file yang ada di web direktori,

Folder saya adalah belajarweb, yang ada di direktori, C�XAMPP �Htdoc

• Backup Database Web Backup database Eeb kita. Buka browser dan ketikkan

localhost/phpmyadmin dan silahkan pilih nama database yang kita gunakan. localhost/phpmyadmin dan silahkan pilih nama database yang kita gunakan.

ini database saya adalah”belajarweb”

• Export database

Setelah kita pilih untuk databasenya langkah selanjutnya adalah klik bagian

menu export

Untuk Save as file silahkan dicentang, dan

tekan GO.

Jika proses export selesai akan muncul tampil seperti berikutini.

Lalu pindahkan file tersebut ke drive C. caranya klik kanan� open

containing folder

Silahkan Copy paste ke drive C

Berarti untuk proses Backup data web sudah selesai.

• Pindahkan folder Web ke Web Direktori

Maka silahkan copy paste folder web dalam folder “belajarweb”, ke C�

XAMPP� Htdoc

• Restore Database

Buka Browser dan silahkan buka localhost/phpmyadminBuka Browser dan silahkan buka localhost/phpmyadmin

• Buat database baru dengan nama yang sama dengan database sebelumnya yaitu

“belajarweb” lalu silahkan di klik create

• Import database

Setelah database telahberhasilterbuat, silahkanklik

import

Klik browse dan pilih databasenya yang akan diimport

Klik open

Klik GO

Jika yang muncul seperti ini berarti untuk import database telah berhasil

• CEK HASIL WEB

Ketikkan pada browser “localhost/belajarweb” untuk melihat

hasilnya

Membuat Page Pada

WordPress

Langkah Pertama adalah silahkan masuk kedalamdasbor administrator dari Wordpress

• Masuk kedalam DASBOR ADMINISTRATOR

Pada browser ketikkan :localhost/belajarweb/wordpress/wp-admin

Silahkan masukkan user name dan password, seperti yang anda isikan di

saat proses penginstallan dari wordpress dan klik login.

� Buat Page Baru

Untuk membuat page baru silahkan masuk ke menu page � Add New

Contoh page yang akan kita buat nantinya adalah Home, Visi

Misi, Profile.

� Isi Page Baru

Akan keluar menu seperti berikut

Isikan judul pada bagian atas dan tuliskan HomeIsikan judul pada bagian atas dan tuliskan Home

Lalu silahkan upload gambar dengan cara klik menu Add Media

Maka akan keluar tampilan seperti berikut ini :

Dan klik menu select Files untuk memilih file yang akan kita upload, pilih

gambar yang sudah.

Lalu klik open, maka akan keluar menu seperti

berikut ini.

Langsung saja tekan insert into post, dan hasilnya akan seperti

berikut ini.dan jika selesai tekan publish.

Jika berhasil maka akan tampil seperti berikut ini.

Buat Halaman (Visi, Misi TKJ), dengan masuk ke

menu Pages �Add new

Visi Misi

Langsung publish.

Profile

Buat Halaman (Profile TKJ), dengan masuk ke menu Pages �Add newBuat Halaman (Profile TKJ), dengan masuk ke menu Pages �Add new

Langsung publish.

Membuat Menu Plugin GuesBook

DMS Guestbook adalah plugin yang digunakan untuk membuat buku tamu

(guestbook) pada halaman WordPress anda. Dengan menggunakan plugin

dmsGuestBook anda bisa membuat sebuah halaman buku tamu

Langkah – langkahnya menginstal plugin DMSLangkah – langkahnya menginstal plugin DMS

pertama kita klik menu plugin di Dashboard lalu �Add New

Lalu klik.

Lalu akan muncul tampilan seperti ini. kita pilih upload lalu klik browse

Setelah itu klik file

dmsGuestbook , lalu klik open

Proses install sudah

selesai, lalu klik Activate

Lalu klik Install Now

selesai, lalu klik Activate

Plugin

Membuat Pages Baru yg nanti buat pages

Guestbook nya

sudah mebuat pages dengan nama

Guestbook lalu kita klik publish

Setalah itu klik DMSGuestbook

Setalah itu akan mencul tampilanSetalah itu akan mencul tampilan

ini , kita klik Guestbook Setting

untuk melakukan proses

pembuatan GuestBookpembuatan GuestBookpembuatan GuestBook

Setelah itu akan keluar

tampilan seperti ini nanti

ada tulisan Basic di klik

akan muncul tampilan

seperti ini , lalu anda klik

tulisan Language lalu di klik

pilih tulisan English.txt

Di klik tulisannya

Lalu klik tulisan Clear all terus

akan muncul tampilan seperti

dibawah , terus klik tulisan

GuestBook

Settingan sudah selesai

lalu di save

Sudah Nampak menu Sudah Nampak menu

guesbook

Dan ini hasilnya di sini ada :

� Name

� Email

� Website

� Dll.

MEMBUAT POSTINGAN BERDASARKAN

KATEGORI

Didalam Wordpress ini anda tidak hanya bisa membuat page saja, anda juga

bisa membuat sebuah postingan, dan postingan ini bisa dipisahkan

berdasarkan kategori semisalnya, anda andalah seorang administrator web

untuk sekolah , dan sekolah menginginkan anda untuk menampilkan beritauntuk sekolah , dan sekolah menginginkan anda untuk menampilkan berita

baru dalam web mereka, dan berita tersebut harus berkategori

Contoh : berita Tentang Event TKJ

Setelah itu untuk membuat postungan anda harus mengentahui apa itu

kategori, yang yang bisa anda maksimalkan untuk permasalahan seperti di

atas.

Langkah – Langkahnya membuat Kategori sebagai

berikut:

� Masuk kedalam dasbor administrator

Masuk ke menu post

� Masuk ke menu Posts � Add New

Isikan untuk postingan kita, dengan text yang

telah saya sertakan

� Tambahkan Category baru

Tambahkan category baru menu berada dibagian kanan, isikan beritaTambahkan category baru menu berada dibagian kanan, isikan berita

baru dan klik add new category.

Dan pastikan untuk category Berita

telah tercentang

Setelah itu silahkan klik

publish.publish.

� Masukkan lagi Postingan Baru

Tambahkan lagi sebuah postingan pada category berita , klik menu posts �add

new

� Tambahkan Menu � Tambahkan Menu

Setelah itu silahkan tambahkan link baru pada menu untuk menampilkan

postingan dengan category berita baru. Masuk kedalam appearance � menus

Pada bagian categories � centang berita dan klik add to menu.

Maka akan langsung masuk ke bagian menu.

Sudah muncul link baru “berita ”, ketika di klik

link itu maka akan tampil postingan dengan

kategori berita baru

Dan hasilnya seprti ini

Membuat Menu Plugin Gallery di

Wordpress

Langkah – Langkah membuat plugin photo gallery

� Masuk Kedalam DASBOR ADMINISTRATOR

Lalu klik plugins � Add New

Setalah akan muncul tampilan seprti ini. Lalu klik upload

Lalu klik upload

Lalu cari plugin yang saya gunakan nexgen-gallery.

Saya klik open

Lalu saya installLalu saya install

Kalau berhasil akan muncul konfirmasi seperti di

bawah, lalu klik Activate Plugin

� Buat Gallery

Setelah itu di bagian bawah sini ketika instalasi plugin maka muncul

menu sepeti ini :

Lalu silakan di klik.Lalu silakan di klik.

Setelah itu klik Add Galllery

Setelah untuk new gallery silakan yang pertama anda tulisakan

Tour bali

Lalu klik Add gallery

Setelah itu klik Upload a Zip-Fille, lalu klik

browse

Setelah itu akan

muncul tampilan

seprti ini , pilih

file Tour Bali lalu

kita klik open

In to � a new gallery di klik lalu pilih 1- Tour, lalu start upload

Kita tunggu

masih dalam

proses

Setelah sudah

menggupload foto kita lalu

sekarang buat album TKJ,

pilih menu album di gallerypilih menu album di gallery

Add new album adalah nama yang nanti di buat

foto kita, lalu berikan nama album ( Acara Teknik

Komputer Jaringan ) lalu klik Add

Akan Muncul tampilan seperti di atas dengan warna

merah Album sudah dibuat

Setelah itu

tekan tour

bali terus di

geser ke

bawah.

Select album klik ( Acara teknik Komputer

jaringan ) klik update

Membuat album sudah selesai, kita tinggal buat pages � Add

New

Akan muncul tampilan

seperti ini klik album

lalu pilih album ( Acara

Teknik Komputer

jaringan ) klik insert

Kita tulis dengan nama photo gallery, setelah itu di pojok

sebelah kanan ada menu Add NetxtGen Gallery

Setalah itu akan muncul

Scrip Album

Lalu kita publish

Dan inilah hasilnya foto gallery TKJ

Membuat Contact Form Pada

Wordpress

Membuat sebuah fitur yang dinamakan Contact Us gimana fitur ini digunakan

untuk mengirimkan emailnya ke admin webnya jika ada user atau penggujung

anda yang ingin untuk berkomunikasi langsung dengan admin webnya mungkin

untuk memasang iklan atau memasang sebuah barang anda bisa menggukan

Contact Us ini.Contact Us ini.

Langkah – langkah Membuat Contact Us :

Pilih menu plugin � Add New

Klik upload

Pilih file si-contact-form,

lalu klik open

Lalu lalau klik Install

Now

Contact form sudah terinstall,

Klik activate

Plugin

Setelah itu akan muncu tampilan seprti

ini, lalu kita klik activate Aksimet

Setelah itu pilih menu FS Contact

Form Options, lalu di klik

akan muncul tampilan seperti ini

lalu di form 1 saya

tulis ( administrator )

Setelah itu geser ke bawah ada tulisan welcome introduction, lalu kita tulis ( Silahkan

Anda tulis pesan disini administrator

Email To : tulis alamat email kita, lalu dibawah send E-mail function kita pilih

WordPressWordPress

� Confirmation E-mail

From name kita tulis

dengan nama

ferismed45 ,

� lalu Confimation Email

Message kita tulis email

lalu Confimation Email

Message kita tulis email

telah terkirim.

� CAPTCHA difficulty level

kita pilih yang High

Setelah itu Extra 1 Label kita isi dengan nama Alamat, lalu field type kita pilih yang textarea.

Extra 2label kita isi Upload ,lalu field type attachment.

Selanjutnya kita klik Update Options

Settingan Contact Form sudah selesai.

Lalu kita copy scrip [si-contact-form form=’1’]

Lalu kita buat pages � Add

New

Setelah itu buat nama menu dengan nama

Hubungi Kami/contact Us, lalu copy paste [si-

contact-form form='1'] klik publish

lalu klik selamat Datang di lalu klik selamat Datang di

TKJ Commnity untuk

melihat hasilnya.

Kontak form sudah jadi

dan inilah hasilnya

Membuat Menu Forum Pada

Wordpress

Fitur forum ini bisa terbuka untuk umum membuat orang bisa

berdiskusi secara onile.

Langkah – langkah membuat menu forum sebagai berikut ini :

Pilih menu plugin � Add New Pilih menu plugin � Add New

klik upload

Pilih file bbpress.2.2.4, lalu

klik open

Selanjutnya klik Install Now

install sudah selesai, lalu klik Activate

Plugin

install sudah selesai, lalu

klik Activate Plugin

Selanjutnya Akan muncul

tampilan seperti ini

pilih menu Forum � New Forum, lalu klik

lalu buat nama forum dengan nama forum TKJ, type Forum kita pilih

yang forum karena nanti orang lain bisa membuat topic baru.

Pilih menu Appearance �

Menus untuk menampilkan

forum

Pilih menu formu lalu centang

forumnya, setalah itu klik Add Menu

Lalu save menuHasilnya seprti ini

forum TKJ

HASIL DAN ANALISA

Kita sudah di hasil dan analisa dimana hasil dan analisa ini adalah web kita

yang sudah selesai yang kita sudah kerjakan mulai dari awal sampai akhir.

Dan hasilnya kayak seperti di atas di web saya disini ada beberapa menu ( Home ,

Profile , Visi & Misi , GuestBook , Berita , Contats Us , Gallery dan Forum TKJ )

Home

Seperti ini tampilan home disini saya menuliskan, Selamat Datang di Web TKJ

Community.

Web TKJ COMMUNITY adalah Sebuah web yang berada dikawasan Jogjakarta sekolah

SMK Bakti Bangsa web ini memiliki beberapa program keahlian antara lain :

Installasi PC

Merakit PC

Membuat Website

Membangun Jaringan

Dll.

Profile

Teknologi Informasi dan Komputer telah menjadi bagian dalam kehidupan masyarakat

di era Globalisasi dan pasar bebas. Masyarakat saat ini tidak lagi bisa menghindar dari

zaman digital. Sebagai jembatan menuju penguasaan teknologi Informasi dan

Komunikasi, materi produktif Program Studi Teknik Komputer dan Jaringan di SMK

Bakti Bangsa telah dirancang untuk selalu Up To date.

Visi & Misi

Visi

Mewujudkan tenaga profesional bidang teknik komputer dan jaringan, yang memiliki

keunggulan lokal dan mampu bersaing di pasar global.

Misi

*Menyelenggarakan pembelajaran yang berkualitas dengan pelayanan prima

*Melaksanakan sertifikasi baik tingkat nasional maupun internasional

*Menjalin kerjasama dengan dunia usaha dan industri dalam pelaksanaan praktik serta

penyerapan tamatan

*Menciptakan & mencarikan peluang kerja.

GuestBook/Buku Tamu

GuestBook adalah Sebuah menu buku tamu

yang bisa gunakan memberikan pesan untuk

admin

Berita

Berita adalah Sebuah kategori yang bisa membuat sebuah postingan,

Contoh seperti : Berita tentang event teknik komputer jaringan.

Berita tentang event sekolah

Contact Us/Hubungi kami

Hubungi kami adalah sebuah fitur yang dinamakan Contact Us gimana fitur ini digunakan

untuk mengirimkan emailnya ke admin webnya jika ada user atau penggujung anda yang ingin

untuk berkomunikasi langsung dengan admin webnya mungkin untuk memasang iklan atau

memasang sebuah barang anda bisa menggukan Contact Us ini, karena Contact Us

berhubungan langsung sama email.

Photo Gallery

Gallery adalah sebuah photo album yang kita bisa gunakan untuk mengshere foto kita

dalam website TKJ, di foto gallery ada tiga foto :

Tour Bali

Halalbihalal

Foto TKJ Bersama

Forum TKJ

Menu forum TKJ ini adalah menu dimana forum bidang komputer disini

dinamakan Tips/Topic mungkin kalau anda kenal kaskus anda akan

menganal Trick. Ketika ada user yang membuat forum diskusi online jadi

web saya akan lebih trbuka untuk umum membuat orang bisa dapat

diskusi secara online.

KESIMPULAN

Berdasarkan dari hasil rancangan website yang diusulkan, maka dapat di ambil

kesimpulan bahwa :

� Dengan adanya Worpress saya bisa , dapat mempermudah pekerjaan saya

untuk membuat website TKJ Community.

� wordpress yang dapat kita gunakan secara gratis untuk berbagai aktivitas dan

manfaat di dunia maya.

� WordPress juga mulai digunakan sebagai sebuah CMS(Content Management

System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan

kebutuhan penggunanya

� Nama WordPress diusulkan oleh Christine Selleck, teman ketua pengembang

(developer), Matt Mullenweg

TERIMA KASIH

KINGSOFTKINGSOFTKINGSOFTKINGSOFT OFFICEOFFICEOFFICEOFFICEMAKE PRESENTATION MUCH MORE FUNMAKE PRESENTATION MUCH MORE FUNMAKE PRESENTATION MUCH MORE FUNMAKE PRESENTATION MUCH MORE FUN