1

I. PENDAHULUAN

1.1 Latar Belakang Masalah

Komputer adalah alat yang dipakai untuk mengolah data menurut perintah

yang telah dirumuskan. Kata komputer semula dipergunakan untuk menggambarkan

orang yang perkerjaannya melakukan perhitungan aritmatika, dengan atau tanpa alat

bantu, tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri. Asal

mulanya, pengolahan informasi hampir eksklusif berhubungan

denganmasalah aritmatika, tetapi komputer modern dipakai untuk banyak tugas yang

tidak berhubungan dengan matematika.

Ditambah dengan adanya Internet, membuat suatu komputer bisa saling

berhubungan dengan komputer lainnya, sehingga memudahkan bagi pengguna dalam

melakukan suatu pekerjaan

World Wide Web atau WWW atau juga dikenal dengan WEB adalah salah

satu layanan yang didapat oleh pemakai computer yang terhubung ke internet. Web

ini menyediakan informasi bagi pemakai computer yang terhubung ke internet dari

sekedar informasi “sampah” atau informasi yang tidak berguna sama sekali sampai

informasi yang serius dari informasi yang gratisan sampai informasi yang komersial.

Melihat dengan adanya Website, saya berkeinginan untuk mebuat suatu web,

yaitu web toko online, dalam website ini dapat membantu usaha saya di bidang bisnis

sepatu, yang akan saya beri judul “Pembuatan website Toko Online

JAMTANGANGAUL.COM” dengan menggunakan CMS Wordpress.

2

1.2 Ruang lingkup

Ruang lingkup dalam penulisan ilmiah ini, mengenai pembuatan

website toko online Jamtangangaul.com dengan menggunakan CMS

Wordpress dan memberikan tutorial caramengaksesnya melalui internet.

1.3 Tujuan Penulisan

Tujuan dari penulisan ilmiah ini adalah membuat website penjualan secara

online, memberikan informasi kepada calon pembeli dalam pemesanan, dan

dapat memperluas dalam pemasaran produk Jamtangangaul.com

1.4 Metode Penelitian

Dalam penulisan ilmiah ini, saya melakukan langkah-langkah

pembuatan Website Jamtangangaul.com dengan pengumpulan data dan

gambar-gambar, dan informasi yang digunakan dalam penelitian dengan cara

mencari melalui internet. Adapun perangkat lunak yang digunakan oleh

penulis yaitu dengan CMS WORDPRESS, Cpanel, Google Chrome, sistem

operasi Windows 7.

1.5 Sistematika Penulisan

Dalam penyusunan penulisan ilmiah ini dapat digambarkan secara

singkat tanpa memutuskan hubungan antara bab pertama dengan bab yang

lainnya. Adapun sistematika penulisan ilmiah sebagai berikut :

3

I. PENDAHULUAN

Pada bab satu ini membahas mengenai latar belakang masalah, batasan

masalah, tujuan penulisan, metode penelitian, dan sistematika penulisan.

II. LANDASAN TEORI

Bab ini membahas mengenai landasan teori tentang pengenalan CMS,

sejarah singkat tentang CMS WORDPRESS, dan jenis jenis CMS .

III. PEMBAHASAN

Bab ini membahas tentang tutorial pembuatan Website yang menarik

dengan menggunakan CMS WORDPRESS, dan data-data yang terdapat di

dalamnya

IV PENUTUP

Bab empat merupakan bab terakhir berisi kesimpulan berdasarkan

hasil pembahasan serta saran dari Website yang telah dibuat.

4

II. LANDASAN TEORI

2.1 CMS

Seiring dengan kemajuan teknologi yang kita rasakan akhir-akhir ini, terutama

di bidang pengembangan website, menyebabkan proses pembuatan sebuah website

yang baik bukanlah suatu pekerjaan yang sulit lagi seperti yang dibayangkan oleh

banyak orang sebelumnya. Di mana-mana dapat kita lihat berbagai website

bermunculan dengan bermacam corak dan ragamnya. Mulai dari sebuah website yang

sangat sederhana dengan hanya mengandalkan beberapa halaman statis HTML,

sampai kepada sebuah website dinamis yang menggunakan teknik pengembangan

website yang mutakhir. Tak dapat dipungkiri memang, semuanya ini merupakan hasil

dari revolusi informasi dunia internet yang sangat cepat. Sedemikian cepatnya

mengakibatkan tidak semua orang dapat mengikuti perkembangan yang terjadi

dengan baik. Pertanyaan yang muncul sekarang adalah adakah sebuah sistem yang

dapat mengakomodasi perkembangan informasi yang sangat cepat ini dan yang dapat

memberikan keuntungan kepada pihak yang menggunakannya? Jawabannya tentu

saja ada, yaitu dengan menerapkan Content Management System (CMS).CMS

merupakan sebuah aplikasi web atau software web yang tujuannya untuk

memudahkan dalam pengelolaan (upload,edit,menambahkan,dll) konten dalam

sebuah website/blog/aplikasi web tanpa harus dibekali pengetahuan tentang hal-hal

yang bersifat teknis tanpa harus memiliki pengetahuan tentang bahasa pemrograman

web.

Sehingga dengan adanya CMS ini, orang awam pun dapat membuat sebuah

website yang langsung jadi dan pengguna tinggal mengelola isi konten website

tersebut tanpa campur tangan dari pihak webmaster.Di dalam CMS, manajemen file-

file juga sangat terstruktur, setiap elemen antara isi dan tampilan desain

5

terpisah.Fleksibilas sebuah CMS, membuat CMS ini banyak dikembangkan oleh

pihak-pihak lain, apalagi jika CMS yang memiliki kemajuan sangat pesat dan terus

mengalami perubahan atau update sistem secara berkala. Hal ini lah yang membuat

banyak developer-developer memilih mengembangkan aplikasi CMS ini daripada

membuat sebuah aplikasi web yang baru. Salah satunya adalah CMS WORDPRESS.

2.1 CMS WordPress

CMS WORDPRESS adalah sebuah aplikasi sumber terbuka (open source)

yang sangat populer digunakan sebagai mesin blog (blog engine). 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. WordPress adalah penerus resmi dari

b2/cafelog yang dikembangkan oleh Michel Valdrighi. Nama WordPress diusulkan

oleh Christine Selleck, teman ketua pengembang (developer), Matt Mullenweg.

Sejarah WordPress dimulai saat Matt Mullenweg yang merupakan pengguna aktif

dari b2 mengetahui bahwa proses pengembangan b2 dihentikan oleh pemrogramnya

(programmer) 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.

6

2.3 Jenis – jenis CMS

CMS dapat digunakan untuk membuat berbagai jenis website seperti :

1. Website perusahaan, bisnis, organisasi atau komunitas.

2. Portal

3. Galeri foto

4. Aplikasi E-Commerce / Toko Online

5. Mengelola website pribadi / blog.

6. Dan lain-lain.

CMS saat ini berkembang pesat, banyak sekali macam-macam CMS. Dalam

dunia blogging, CMS adalah salah satu andalan untuk membangun sebuah blog, yang

mana notabene blogger tidak semuanya mengerti akan membuat website dari nol,

tetapi hanya tahu cara menulis dan posting. Oleh karena itulah, kehadiran CMS ini

sangat bermanfaat sekali.Berikut adalah beberapa macam CMS yang paling sering

digunakan orang, dan sebenarnya masih banyak lagi CMS-CMS yang bertebaran di

internet.

2.3.1 WORDPRESS

WordPress salah satu CMS opersource yang paling digemari di dunia,

biasanya digunakan untuk mesin blog(blog engine). wordpress menggunakan bahasa

pemrograman php dan database mysql. WordPress termasuk cms yang user frienly

dibandingkan dengan joomla dan drupal.

7

Keunggulan :

1. Cukup mudah digunakan

2. Sederhana

3. Akun gratis wordpress dapat diperoleh dengan menftar di wordpress.com

4. Dapat dijalankan di websirte kita sendiri

5. Dapat dijalankan di localhost

6. Banyak plugin tambahan

7. Template dapat dimodifikasi

8. Penggunaan kompak

9. Mendukung SEF[seach engine friendly]

Kelemahan :

1. Fitur managemennya sedikit sehingga sebagian orang menganggap terlalu

sederhana

2. Jarang digunakan oleh website besar

3. Pluginnya tidak sebanyak jomla.

Website : WordPress.org dan WordPress.com

8

2.3.2. MAMBO

Mambo pada awalnya disebut Mambo Open Source atau MOS adalah free

software atau open source content managemen system yang digunakan untuk

membuat dan memanagement website melalui sebuah interface yang simple.

Sekarang ini mambo banyak dipilih dan digunakan kerana kemudahan yang diberikan

untuk mengoperasikannya.Seperti hampir semua CMS yang digemari mambo

memiliki kemampuan templating atau kemampuan untuk mengganti tampilan website

tanpa harus melakukan upload / perubahan kontent.

Mambo menyediakan kemudahan dan komponen-komponen seperti shopping

chart, photo gallery, forum, pools, calendars website searching, multi bahasa dan lain-

lain. Hampir sebahagian besar website yang kami bangun menggunakan Mambo

sebagai pilihan CMS.Sebuah kebanggaan bagi Indonesia karena salah satu CoreDev

Team Mambo adalah orang Indonesia asli.

Keunggulan :

1. Digunakan oleh website sederhana sampai website professional

2. Mudah dioperasikan

3. Dapatkan dijalankan di komputer local Pluggin tambahan

4. Template bisa diubah dan bisa membuat sendiri.

Kelemahan :

1. Plugginnya terbatas

2. Defaultnya sangat tidak mendukung mesin pencarian

3.Krisis kepercayaan open source.

Website: Mambo Foundation

9

2.3. 3. JOOMLA

Kata Joomla diambil dari sebuah kata dari suku Swahili iaitu Jumla yang

bermaksud “menjadi kesatuan” bisa dikatakan memiliki kemampuan sama dengan

Mambo, kerana CMS ini code awalnya Joomla! 1.0.0 menggunakan code Mambo

4.5.2.3.

Banyak komponen Mambo juga boleh digunakan di sebagai Plugin Joomla

begitu juga sebaliknya. Kemampuan kami memilih plugin yang tepat untuk setiap

release yang dipilih memalui proses penyelidikan mengindari terjadinya konflik atau

crash karena banyak plugin memerlukan penyesuaian disetiap versinya.

Website: Joomla.org

Keunggulan :

1. Diklaim sebagai cms opensource dengan pengguna terbanyak.

2. Digunakan untuk website sederhana sampai profesional.

3. Sering update baik dari segi cms.

4. Mudah dioperasikan

5. Dapat dijalankan di komputer lokal

6. Banyak plugin tambahan.

7. Template dapat dirubah dan dapat membuat template sendiri

8. Conten joomla dapat dikembangkan

Kelemahan :

1. Defaultnya tidak mendukung,namun ada komponen pendukungnya baik yang

gratis maupun berbayar

10

2. Plugin yang didapatkan terkadang bug error

3. Terkadang ada ketidaksesuaian anatara cms dan plugin.

Website : Joomla.org

2.3.4 DRUPAL

Drupal adalah content management system dan blogging engine yang pertama

kali dikembangkan oleh Dries Buytaert sebagai sebuah sistem bulletin

board.Sekarang ini Drupal banyak digunakan oleh website-website yang mempunyai

traffic tinggi dan mempunyai tahap pengendalian sebuah website yang hirarki yang

kompleks.

Keunggulan :

1. Diklaim cms yang mengalahkan joomla.

2. Digunakan untuk website sederhana hingga profesional.

3. Mudah dioperasikan.

4. Dapat dijalankan di localhost.

5. Template dapat di ubah sekehendak kita dan bisa membuat template sendiri.

6. Mendukung SEF.

Kelemahan :

1. Penggunaannya tidak terlalu banyak,terutama diIndonesia

2. Pluginnya tidak sebanyak joomla

Website: Drupal.org

11

2.3.5 AURA

AuraCMS adalah hasil karya anak bangsa yang merupakan software CMS

(Content Managemen System) untuk website yang berbasis PHP4 & MySQL

berlisensi GPL(General Public License).

Dan tak lupa bahwa software ini mungkin tak semuanya memenuhi harapan pemakai,

oleh karena itu diharapkan adanya kritikan, sumbangan pikiran atau mungkin bentuk

modifikasi dari para pengguna sekalian baik berupa modul maupun perubahan-

perubahan lainnya yang dapat menjadikan auraCMS ini menjadi lebih baik.

Dengan bentuk yang sederhana dan mudah ini diharapkan dapat digunakan oleh

pemakai yang masih pemula sekalipun.

Keunggulan :

1. Simpel dan mudah digunakan.

2. Sesuai dengan slogan-nya AuraCMS termasuk cms yang sangat simple dan

mudah digunakan.

Kelemahan :

1. System

Hanya terdapat tiga level pengguna yaitu Administrator, Editor dan User.

Meski secara default terdapat tiga level pengguna namun pemanfaatan

maksimal hanya pada dua level, yaitu Administrator dan User.

Tidak ada email pemberitahuan jika ada komentar masuk, baik bagi

administrator penulis maupun pengomentar sebelum-nya.

12

2. Keamanan

Nama File yang di Upload melalui system default CMS ini tidak diproteksi.

Dengan demikian siapapun yang pernah melakukan download dan mengingat

alamat file dapat melakukan download kembali dilain waktu tanpa harus

login, melainkan cukup dengan mengetikan langsung alamat file yang telah

didapat sebelumnya.

3. Pengembang, Konstributor dan Pengguna

Pengembang menulis script dengan sangat tidak rapi.

Kelakuan ini sangat menghambat perkembangan karena pengembang diluar

tim utama membutuhkan waktu lebih untuk merapikan hingga menjadi sulit

dalam mempelajari AuraCMS.

Dokumentasi sangat minim.

Baik untuk system maupun sekedar deskripsi singkat tentang sebuah modul

yang terdapat di daftar download terasa sekali sangat minim dan informasi

yang diberikan sangat jauh dari kata cukup.

Konstributor Pelit.Para pengembang modul diluar tim utama pengembang

AuraCMS adalah orang-orang yang pelit dan mata duitan, mereka tidak rela

membagikan modul-modul yang telah mereka buat kepada pihak lain secara

cuma-cuma.

Pengguna Manja. Pengguna langsung AuraCMS didominasi oleh orang-orang

yang manja, hanya bisa mengeluh mengeluh dan mengeluh tanpa konstribusi

positif yang membangun.

13

III. PEMBAHASAN

3.1 Sekilas Tentang Web Jamtangangaul.com

Web toko jam tangan ini bertujuan untuk memperluas pasar, yang semulanya

hanya menjual jam via aplikasi BBM (Blackberry Mesangger) untuk

mempromosikannya. Usaha yang didirikan oleh kakak saya ini, memulai usahanya

dengan tidak membutuhkan modal yang besar, karena kakak saya ini menjadi

reseller, dengan menawarkan kepada teman dan sodara, dengan memasang foto jam

dan menyebarkan gambar foto-foto jam, transaksi penjualan pun terjadi.

Alhamdulillah pendapatan dari hari ke hari stabil bahkan meningkat.

3.2 Perancangan Halaman Web

Dalam perancangan halaman website ini menggambarkan semua bentuk

tampilan yang akan terlihat pada tampilan website yang meliputi teks, bentuk tombol,

dan sebagainya.

Dalam penjelasan perancangan website ini akan dijelaskan langkah-langkah

pembuatan Website Wordpress. Adapun sistem yang diperlukan dalam pembuatan

website ini adalah :

CMS Wordress

Theme id

3.3 Struktur Navigasi

Struktur navigasi adalah struktur atau alur dari suatu program, menentukan

struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat suatu

aplikasi. Ada 4 macam bentuk dasar dari struktur navigasi yang biasa digunakan

dalam proses yaitu struktur navigasi Linier, Hirarki, Non Linier dan campuran

14

Struktur Navigasi yang digunakan dalam pembuatan website ini

menggunakan Struktur Navigasi Hirarki, dimana dalam struktur navigasi hirarki

terdapat halaman utama ( master page ) dan mempunyai halaman percabangan ( slave

page ).

3.4 Rancangan Halaman

Dengan membuat website ini agar terlihat sederhana, menarik, dan mudah

dimengerti oleh pengguna diperlukan desain antarmuka (interface). Desain antarmuka

harus dilakukan karena merupakan bagian yang berhubungan langsung dengan

pengguna, yaitu segala sesuatu yang dilihat oleh pengguna (yang muncul di layar

monitor). Dalam bab ini saya akan memberikan tutorial membuat website

menggunakan CMS Wordpress, dalam tutorial ini menggambarkan tampilan website

berupa teks, bentuk tombol, dan cara mengaplikasikannya. Berikut langkah – langkah

pembuatan Website Wordpress.

3.4.1 Halaman Home

Index

Home About Us Product

Service center

15

Gambar 3.1 halaman home

Keterangan :

1. Call center toko ( masukan di theme option )

2. Logo Toko ( Mudah di rubah dari wp-admin )

3. Kategori produk support

16

4. Pembayaran ( Aktifkan di menu widgets, lalu settings di theme options )

5. Pengiriman (Aktifkan di menu widgets, lalu settings di theme options )

6. Banner ( theme option )

7. Paragraf selamat datang ( theme option )

8. Produk terbaru ( recent post wordpress )

9. Tampilkan info order ( Theme options – news ticker ).

3.4.2 Cara aktifkan themes

Masuk ke wp admin >> appearance >>install themes >> upload

3.4.3 Cara setting theme options

Masuk ke wp-admin >> appearance >>theme options

3.4.4 Theme option halaman data toko

Gambar 3.2 theme halaman data toko

17

3.4.4 Theme option halaman Home

Gambar 3.3 theme halaman home

Hasil setting theme options untuk tampilan home pada web

Gambar 3.4 hasil setting tampilan home

18

3.4.5 Halaman News ticker

Gambar 3.5 theme options news ticker

Hasil setting theme options untuk tampilan news ticker pada web

Gambar 3.6 Hasil setting news ticker

3.4.6 Halaman Styling

19

Gambar 3.7 theme options halaman styling

Hasil setting theme options untuk tampilan styling pada web

Gambar 3.8 hasil setting styling

3.4.7 Halaman Slider

20

Gambar 3.9 theme options slider

Hasil setting theme options untuk tampilan slider pada web

Gambar 3.10 hasil setting slider

21

3.4.8 Cara setting warna pada background

Masuk ke wp-admin>> Appearance>>Theme options

Gambar 3.11 theme options background

Keterangan :

1. Untuk background berupa warna

2. Untuk background berupa gambar

3.4.9 Cara Posting Produk

Masuk ke wp-admin >> Post >> Add New Post

22

Gambar 3.12 theme options add new post

Keterangan :

1. Tulis keterangan pada gambar yang akan di upload

2. Click add media untuk memasukan gambar

Gambar 3.13 theme options add media

23

Ketika sudah click add media akan muncul tampilan seperti di gambar , berikut

adalah keterangannya

1. Upload files , upload gambar yang diinginkan

2. Media library adalah tempat penyimpanan gambar – gambar yang telah di

upload, secara otomatis akan tersimpan di media library

3. Click pada gambar yang akan di posting di halaman web

4. Beri keterangan seperti, jumlah barang, merk barang, dan keterangan lainnya

5. Click buttonInsert into post, untuk segera posting pada halaman web

Ketika step meng-upload beres, beri caption untuk mendeskripsikan sebuah barang

yang di upload, web ini sudah di desain untuk keperluan bisnis maka sudah sangat

mudah mengaplikasikannya, berikut gambar tampilan tata cara untuk memberikan

pendeskripsian barang seperti contoh, stock yang tersedia, kode produk, label, harga

produk, berat barang, dan lainnya .

24

Gambar 3.14 setting caption

Ketika step upload gambar dan sudah diberikan caption, lalu click tombol update

Gambar 3.15 tombol update

25

Berikut adalah gambar tampilan hasil posting yang sudah di lakukan

Gambar 3.16 hasil posting

3.4.10 Cara memasukan Calendar pada web

Masuk ke wp-admin >>Appearance>>Widgets

Gambar 3.17 theme options widgets

26

Keterangan :

1. Pilih table Calendar, lalu drag table calendar pada Right sidebar

2. Isi table title dengan memasukan, hari, tanggal, bulan, dan tahun

3. yaitu step terakhir click button “Save”

Maka tampilan Calendarakan tampil pada web

Gambar 3.18 calendar

3.5 Database

Untuk melakukan pengaturan yang berkaitan dengan database dapat di akses

melalui Cpanel, berikut adalah penggunaan fitur fitur yang ada di database cpanel.

1. MySql

Database MySql berfungsi untuk membuat database yang diperlukan wesite.

Jumlah database yang diperbolehkan untuk dibuat adalah sesuai dengan jumlah

maksimal yang diperbolehkan oleh web hosting.

Berikut adalah langkah - langkah pembuatan database:

27

Pada bagian database cpanel, klik menu MySql database

Gambar 3.19 database

Selanjutnya pada bagian create new databasemasukan nama database yang akan di

buat, lalu klik tombol pada bagian create new database.

Gambar 3.20 create new database

2. PHP MyAdmin

PHP MyAdmin berfungsi untuk dapat melakukan manajemen database yang telah

dibuat. Dengan fitur ini kita bisa membuat tabel, menambahkan data, mengubah data

dan lain sebagainya yang berhubungan dengan database.

Langkah - langkah mengakses php MyAdmin adalah sebagai berikut :

Pada bagian Database cpanel, klik menu php MyAdmin.

28

Gambar 3.21 database PhpMyAdmin

Lalu berikutnya akan tampil PHPMyADmin dengan fitur-fitur untuk melakukan

pengaturan database

Gambar 3.22 PhpMyAdmin

3.6 cara install wordpress menggunakan softaculous

login di cpanel kemudian cari icon softaculous

29

Gambar 3.24 softaculous

selanjutnya akan tampak seperti gambar di bawah ini >> pilih wordpress >> klik

install

Gambar 3.25 top scripts

30

Gambar 3.26 top scripts

Isi data wordpress anda dengan lengkap

Gambar 3.27 wordpress

31

Tulis nama domain dan site description

Gambar 3.28 database setting

Tulis username dan password

Jangan gunakan default , pastikan tulis username dan password

Gambar 3.29 admin account

silahkan scroll ke bawah dan klik tombol instal

32

IV. PENUTUP

4.1 Kesimpulan

Pada penulisan ilmiah ini, penulis telah berhasil membuat website toko Jam

tangan, dengan adanya website ini mempermudah masyarakat dalam pembelian jam

tangan, dan membantu memperluas pemsaran toko Jam Tangan

Web ini sudah dapat dilihat di www.jamtangangaul.com . Website ini

mempunyai kelebihan seperti adanya beberapa widget yang dapat mendukung admin

dan user untuk berkomunikasi melalui via ponsel untuk bertransaksi

4.2 Saran

Penulis sangat menyadari keterbatasan pengetahuan yang dimiliki dalam

pembuatan situs web ini, seperti belum maksimal pada menu keranjang untuk produk

yang dipilih oleh pembeli, banyak kemungkinan pengembangan yang dapat dilakukan

agar website ini menjadi lebih menarik .

33

DAFTAR PUSTAKA

1. Fastestwp.com, panduan theme toko online

2. Risqiulva.wordpress, materi Aplikasi Web Wordpress

3. Trikmudahseo.blogspot.com, cara membuat website sendiri dengan cms

wordpress

4. Prothelon.com, cara membuat website dengan wordpress

5. www.jojgawenseo.com, macam macam cms