1

MODUL PRAKTIKUM

JILID I

SISTEM INFORMASI DAN KOMUNIKASI

V3AI 127P ( 2 SKS)

Dr. Atris Suyantohadi, S.T.P., M.T.

Dr. Agung Putra Pamungkas, S.T.P., M.Agr.

Anjar K. Purwaditya, S.T.P., M.Sc.

PROGRAM STUDI DIPLOMA III AGROINDUSTRI

SEKOLAH VOKASI

UNIVERSITAS GADJAH MADA

YOGYAKARTA

2019

2

HALAMAN PENGESAHAN

MODUL PRAKTIKUM

Nama Mata Praktikum : Sistem Informasi dan Komunikasi

Kode (SKS) : V3AI 127P ( 2 SKS)

Pelaksanaan : Semester Genap

Prasyarat : Sudah mengambil mata kuliah Peengukuran Produktivitas

Dosen Pengampu : 1. Dr. Atris Suyantohadi, S.T.P., M.T.

2. Dr. Agung Putra Pamungkas, S.T.P., M.Agr.

3. Anjar K. Purwaditya, S.T.P., M.Sc.

Asisten Laboratorium : Wahyu Prasetya, A. Md

Program Studi : Diploma III Agroindustri

Fakultas : Sekolah Vokasi

Mengetahui,

Ketua Program Studi

Diploma III Agroindustri SV UGM

Ratih Hardiyanti, STP., M.Eng

Yogyakarta, Februari 2019

Ketua Tim Penyusun Modul Praktikum

Anjar K. Purwaditya, S.T.P., M.Sc.

3

KATA PENGANTAR

Materi praktikum Sistem Informasi dan Komunikasi pada program Diploma III

Agroindustri menitikberatkan pada kemampuan mahasiswa dalam praktek kegiatan untuk

meningkatkan kemampuan (Skills) dalam membangun sistem informasi dan komunikasi

dibidang Agroindustri. Sistem informasi dan komunikasi yang disusun dalam kegiatan

praktikum dengan membangun Sistem Informasi berbasis Blog Informasi dalam website

mulai dari dasar installasi, pengaturan content dan penerapannya dalam bidang agroindustri

SIMAGRO. Pada materi praktikum akhir, diimplemntasikan studi kasus membangun E-

Commerce bidang Agroindustri SIMAGRO yang mendukung sistem penjualan online.

Pada tiap sesi praktek, diberikan sessi diskusi dan penugasan untuk lebih memberikan

penekanan pada peningkatan penguasaan materi selama kegiatan praktek.

Yogyakarta, Januari 2019

Penyusun

4

DAFTAR ISI

HALAMAN PENGESAHAN MODUL PRAKTIKUM ................................................................. 2

KATA PENGANTAR ..................................................................................................................... 3

DAFTAR ISI ................................................................................................................................... 4

TATA TERTIB PRAKTIKUM ...................................................... Error! Bookmark not defined.

IDENTITAS PRAKTIKUM ............................................................................................................ 5

FORMAT LAPORAN PRAKTIKUM .......................................................................................... 10

ACARA I ASISTENSI .................................................................................................................. 12

ACARA II SISTEM INFORMASI MANAJEMEN (Instalasi Wordpress Di Localhost) .......... 12

ACARA III CONTENT MANAGEMEN SYSTEM (CMS) DALAM MEMBANGUN SIM

(Praktek Membangun Blog Agroindustri SIMAGRO menggunakan Wordpress) ........................ 23

ACARA IV EXPORT CMS WORDPRESS DARI LOCALHOST (OFFLINE) KE

WEBHOSTING (ONLINE) .......................................................................................................... 31

5

TATA TERTIB PRAKTIKUM UNTUK PRAKTIKAN

Praktikum Keamanan Pangan dilaksanakan terintegrasi dengan

pelaksanaan kuliah Keamnaan Pangan. Aturan-aturan umum yang harus

diikuti oleh praktikan adalah sebagai berikut :

1. Praktikan wajib mengisi daftar hadir sebelum pratikum dimulai. Keterlambatan

praktikum :

a. 5 menit dipersilahkan mengikuti pretest tetapi tidak ada penambahan waktu

dan masih diperkenankan untuk mengikuti praktikum

b. 10 menit tidak diperkenankan untuk mengikuti pretest tetapi diperkenankan

mengikuti praktikum

c. 15 menit tidak diperkenankan untuk mengikuti praktikum dan dianggap

GUGUR.

2. Praktikan wajib memakai pakaian yang sopan dan rapi (pakaian berkerah dan

celana atau rok panjang) sepatu tertutup, dilarang keras memakai perhiasan yang

berlebihan, sandal, sandal jepit, berjaket maupun kaos oblong selama praktikum

berlangsung. Bagi praktikum Laboratorium Kimia (Lab. Pengawasan Mutu, Lab.

Rekayasa Proses, dan Lab. Uji Sensoris) wajib memakai jas laboratorium,

mengenakan masker, sarung tangan, membawa kain lap, dan kalkulator scientific.

3. Praktikan dilarang merokok, membawa makanan, minuman, atau bahan yang

sifatnya dapat merusak alat/peralatan percobaan ke dalam laboratorium.

4. Praktikan yang berambut panjang diharapkan mengikat atau menutup rambutnya

agar tidak mengganggu pelaksanaan praktikum.

5. Praktikan yang berjilbab diharapkan untuk mengatur jilbab sehingga tidak

mengganggu pelaksanaan praktikum.

6. Praktikan wajib membuat TIKET MASUK sesuai dengan ketentuan masing-

masing praktikum.

7. Praktikan DILARANG menggunakan Handphone dan menyentuh alat praktikum

yang tidak ada hubungannya dengan acara praktikum.

8. Praktikan WAJIB MEMPELAJARI MODUL SEBELUM PRAKTIKUM

dimulai.

6

9. Praktikan wajib menjaga kebersihan, kerapihan dan keutuhan alat laboratorium

sebelum dan setelah praktikum selesai.

10. Jika terjadi kerusakan atau kehilangan alat dalam pelaksanaan praktikum maka

menjadi tanggung jawab pemakai dan wajib mengganti dengan barang/ alat yang

sama maksimal 2 hari setelah kejadian.

11. Praktikan diwajibkan mengikuti semua rangkaian acara praktikum tanpa terkecuali,

apabila perlu adanya INHAL dikarenakan sakit harus menyertakan:

a. Sakit (rawat inap) adanya bukti rawat inap

b. Lelayu keluarga inti (bapak, ibu, saudara kandung, kakek, nenek kandung)

adanya bukti dan surat keterangan

c. Apabila sakit maka maksimal 30 menit sebelum masuk praktikum, harus

konfirmasi ke teknisi, koass dan menyusulkan surat keterangan sakit maksimal

H+2

d. Jika tidak memenuhi syarat di atas maka dianggap GUGUR pada acara

tersebut, dan apabila 1 mahasiswa INHAL 3 acara atau lebih maka dianggap

GUGUR pada mata praktikum tersebut. Mata Praktikum yang gugur berarti

praktikan mendapatkan Nilai E.

e. Mekanisme INHAL:

1) Apabila dalam 1 minggu masih ada shift yang dapat sebagai pengganti,

maka bisa ikut shift lain untuk menggantikan praktikum

2) Apabila praktikum INHAL tidak dapat dilakukan/ dilaksanakan maka akan

diberikan tugas dengan nilai maksimal 50%

3) Praktikan yang dinyatakan melanggar tata tertib ini dan atau terbukti berlaku

curang, dapat dikenakan sanksi, paling berat dinyatakan TIDAK LULUS

PRAKTIKUM.

4) Semua praktikan maupun asisten harus mematuhi semua peraturan yang

telah disepakati.

12. MINIMAL KEHADIRAN untuk dapat mengikuti responsi adalah 75% seluruh

acara.

13. Wajib mengisi kuesioner yang telah diberikan oleh asisten instruktur sebagai tiket

masuk responsi.

14. Hal-hal yang belum tercantum dalam tata tertib ini akan diatur kemudian.

7

Ketentuan :

1. Mahasiswa yang dapat melakukan inhal adalah yang memenuhi 3 persyaratan

sesuai ketentuan.

2. Jika memenuhi persyaratan, dan diberikan tugas maka nilai maksimal adalah

50%.

3. Tugas pengganti hanya boleh diberikan oleh Dosen Pengampu (bukan teknisi,

aslab, ataupun koas).

4. Jika tidak mengikuti acara, maka tidak ada nilai untuk seluruh rangkaian

praktikum (pre-test, laporan akhir, keaktifan, dll).

5. Bobot asistensi sama dengan 1 acara praktikum.

6. Minimal kehadiran untuk dapat mengikuti response adalah 75% seluruh

acara.

8

IDENTITAS PRAKTIKUM

1. Nama Mata Praktikum : Sistem Informasi dan Komunikasi

2. Kode (SKS) : V3AI 127P ( 2 SKS)

3. Pelaksanaan : Semester Genap

4. Dosen Pengampu : 1. Dr. Atris Suyantohadi, S.T.P., M.T.

2. Dr. Agung Putra Pamungkas, S.T.P., M.Agr.

3. Anjar K. Purwaditya, S.T.P., M.Sc.

5. Asisten Laboratorium : Wahyu Prasetya, A.Md.

a Deskripsi Singkat Praktikum

Praktikum SIK menitikberatkan pada kegiatan praktikum dalam desain dan

implementasi sistem informasi berbasis Web menggunakan platform Content

management System dalam studi kasus di Usaha Agroindustri.

b Tujuan Umum Praktikum

Tujuan umum praktikum adalah

1) Menyusun Sistem Informasi berbasis Blog untuk Informasi Agroindustri pada

contoh salah satu industry Agro.

2) Menyusun pengelolaan Sistem Informasi Agroindustri yang didesain pada

kegaitan 2.1

3) Menyusun E-Commerce pada Sistem Informasi Agroindustri yang

dikembangkan dari 2.2

c Outcome Pembelajaran

Mahasiswa mampu mendesain dan mengaplikasikan sistem informasi dalam contoh

kasus Agroindustri berbasis Web dengan content Management System.

d Rencana Kegiatan Praktikum

9

Acara ke-

Topik (Pokok Bahasan) Metode dan Alat Bantu

Pembelajaran

1 Asistensi Diskusi

2 Sistem Informasi Manajemen ( Instalasi

Wordpress di Localhost )

Praktek dan Tutorial

3 Content Managemen System (CMS) dalam

Membangun SIM ( Praktek Membangun Blog Agroindustri SIMAGRO

Menggunakan Wordpress )

Praktek dan Tutorial

4 Export CMS Wordpress dari Localhost (Offline) ke Webhosting (Online)

Praktek dan Tutorial

e Evaluasi dan Penilaian Hasil Belajar Mahasiswa

Mekanisme evaluasi dan penilaian hasil belajar mahasiswa yang digunakan untuk

mengetahui sejauh mana tingkat ketercapaian tujuan dan outcome pembelajaran.

10

FORMAT LAPORAN PRAKTIKUM

A. Laporan Praktikum Sementara

Setiap kali melakukan praktikum, praktikan wajib membuat laporan sementara,

berupa tulisan tangan yang berisi tentang pokok-pokok hasil diskusi.

B. Laporan Praktikum Resmi

Laporan akhir praktikum dibuat setelah ke acara praktikum selesai dilakukan.

Laporan akhir dibuat per acara praktikum. Laporan diketik dan dikumpulkan sebagai

tiket masuk acara berikutnya. Laporan terdiri dari halaman sampul dan halaman isi.

Pada halaman sampul dituliskan sbb:

11

C. Format Penulisan Laporan

BAB I PENDAHULUAN

A. Latar Belakang

B. Tujuan

C. Manfaat

BAB II DASAR TEORI

BAB III METODOLOGI

A. Alat dan Bahan

B. Langkah Kerja

BAB IV HASIL DAN PEMBAHASAN

A. Hasil

B. Pembahasan

BAB V PENUTUP

A. Kesimpulan

B. Saran

DAFTAR PUSTAKA

LAMPIRAN

12

ACARA I

ASISTENSI

Asistensi bertujuan untuk menjelaskan tiap-tiap acara yang akan dilaksanakan dan

peralatan yang digunakan dalam praktikum. Ujian awal akan dilakukan untuk menguji

pemahaman dan kesiapan praktikan.

ACARA II

SISTEM INFORMASI MANAJEMEN

(Instalasi Wordpress Di Localhost)

A. TUJUAN

1. Memahami dan Mengaplikasikan Piranti Lunak SIM di Agroindustri

2. Memahami cara instalasi CMS Wordpress di localhost.

3. Memahami dan Praktek hak user akses (privilege) pada berbagai level

manajemen dalam Piranti Lunak SIM

4. Memahami Manfaat SIM di sektor Agroindustri

B. LANDASAN TEORI

Materi Sistem Informasi Manajemen diuraikan dalam sesi perkuliahan

mencakup kajian :

Fundamental Sistem Informasi Manajemen

Karateristik Sistem Informasi Manajemen

Tipe dari Sistem Informasi Manajemen

Sudut pandang Manajer terhadap Sistem Informasi

Tipe computer yang digunakan Organisasi dalam pengaturan SIM

Piranti Pendukung Sistem Informasi Manajemen

Cara membuat database localhost menggunakan software XAMPP.

Apa itu database?

Macam-macam CMS, ada Wordpress, Blogger, Joomla.

Penjelasan tentang Wordpress

13

C. PROSEDUR PRAKTIKUM

Kegiatan praktikum diaplikasikan pada Penerapan SIM berbasis Web

menggunakan E-Commerce yang dilakukan oleh CV SIMAGRO (Studi kasus).

Profile CV SIMAGRO bergerak dibidang agroindustri Jagung dari produk

pembibitan, pengolahan dan pasca panen Jagung. Lokasi CV SIMAGRO berada di

daerah Jln D.I. Panjaitan No 6, Kabupaten Grobogan. SIM E-Commerce yang

diterapkan oleh CV SIMAGRO seperti diperlihatkan dalam gambar berikut:

Gambar 1.1. Website E-Commerce dalam content Wordpress CMS yang

digunakan sebagai studi kasus kegiatan praktek.

User pengguna SIMAGRO dalam kegaitan praktek ini terdiri atas hierarki level

user dari yang memiliki otoritas tertinggi (User Administrator) hingga otoritas

terendah (User Subcriber).

Hierarki User tersusun sebagai berikut:

• Administrator merupakan level tertinggi yang memiliki hak akses pengaturan

tertinggi dalam WEB E-COMMERCE CV SIMAGRO.

• Editor merupakan level kedua dibawah Administrator yang memiliki hak akses

untuk mengedit berita, mengirimkan berita dan pengaturan profile

• Author merupakan level ke tiga dibawah Administrator yang memiliki hak akses

untuk mengedit dan mengirimkan berita

14

• Subcriber merupakan level terendah yang hanya diberikan hak mengatur

profile dirinya sendiri.

1. Kesiapan Bahan Praktikum

Bahan materi praktikum yang dipersiapkan dalam kegiatan meliputi:

Software Aplikasi yang untuk membuat localhost xampp-win32-1.7.3.exe

CMS wordpress.zip

E-Commerce dalam format berbasis Web yang dikembangkan

menggunakan blog E-Commerce Wordpress telah teraplikasi pada server

lokal dengan pengalamatan URL lokal di http://192.168.5.165/download

2. Pelaksanaan Kegiatan

Pelaksanaan praktikum yaitu intalasi localhost XAMPP di computer / laptop

masing-masing milik praktikan

1) Pilih lokasi install untuk XAMPP, kemudian klik Install

2) Tunggu beberapa saat sampai proses instalasi selesai

3) Jika instalasi selesai, jalankan “XAMPP Contol Panel Aplication” yang ada di

dekstop

4) Klik tombol “Start” pada setiap bagian di modul “Apache” dan “MySql” untuk

menghidupkan Server Apache dan Database MySql pada komputer

15

Gambar 1.2. Jendela control panel xampp ketika dijalankan

5) Buka web browser anda, lalu ketikkan http://localhost. Jika tampilannya seperti di

bawah ini, maka apache sudah terinstall dengan benar.

16

Gambar 1.3. Jendela localhost di browser

6) Aplikasi PHPMyAdmin

Pada paket XAMPP sudah disertakan aplikasi manajemen web MySQL, yaitu

PHPMyAdmin.Kita akan mencoba membuka aplikasi ini sekaligus memastikan

instalasi telah berjalan dengan baik

Buka browser Anda, misalkan Firefox

Ketik alamathttp://localhost/phpmyadmin

Aplikasi web PHPMyAdmin dengan daftar database MySQL saat ini akan

tampil seperti pada gambar di bawah ini.

17

Gambar 1.4. Jendela phpMyAdmin untuk membuat database

18

a. Instalasi Wordpress di localhost

1) Yang perlu dipersiapkan file instalasi wordpress yang bisa didownload di

https://wordpress.org/

2) Kemudian siapkan server dengan mengaktfikan Apache dan Mysql di Control

panel Xampp

3) Kemudian siapkan direktori website yang nantinya dijadikan domain website di

localhost. Buka htdocs difolder instalasi Xampp di folder anda.

D:\XAMPP\xampp\htdocs

4) Kemudian buat folder baru dengan nama folder “NIM” kalian.

Gambar 1.5. Folder dalam htdocs

5) Masukkan file wordpress-3.8.1.zip di folder “NIM” kemudian diekstrak. File

didalam folder wordpress di cut ke folder “NIM”

Nampak seperti gambar berikut

Gambar 1.6. Wordpress yang telah diekstak di folder NIM

19

6) Cek kembali di browser dengan mengetikkan alamat localhost/”NIM” kemudian

klik Create a Configuration File

Gambar 1.7. Tampilan wordpress saat dilihat dibrowser.

Click create a configuration file untuk penyusunan nama database,

server localhost, akses user dan passwordnya kemudian Click Let’s go

Gambar 1.9 Mempersiapkan Database, Username, Password dan Hostname

Lakukan isian sesuai dengan data base name : NIM

User name diisi : root dengan password dikosongkan

Database host disikan localhost, selanjutnya click submit..!

Jika benar, maka proses instalasi blog system informasi dapat mulai dilakukan

20

Gambar 1.10. Pengisian Database, Username, Password dan Hostname

Click Run the install

Gambar 1.11. Tahapan instlassi Wordpress

Lakukan pengisian Judul website, user name admin, dan passorwd : Isikan

Judul Website : Nama Lengkap Anda

Password 2x : isikan password minimal 6 karakter

Email : isikan alamat email anda

21

Gambar 1.12. Pengisian Judul web dan email user

Click install wordpress, jika berhasil akan tertera seperti dalam Gambar berikut:

Gambar 1.13. User Admin sebagai user pengelola website

Kemudian lakukan Log in untuk pengaturan informasi website blog

Gambar 1.14. Login sebagai Admin untuk pengaturan web

22

Tampilan halaman pengaturan admin untuk website wordpress yang didesain seperti

ditunjukkan dalam Gambar

Gambar 1.15. Sub Menu pengelolaan Web oleh Admin

D. REFERENSI

Anonim, 2010. Management Information System, Manipal University E-Books

23

ACARA III

CONTENT MANAGEMEN SYSTEM (CMS) DALAM MEMBANGUN SIM

(Praktek Membangun Blog Agroindustri SIMAGRO menggunakan Wordpress)

A. TUJUAN

1. Mahasiswa mengenal dan memahami Dashboard pada wordpress

2. Mahasiswa mengetahui fungsi-fungsi tiap menu pada dashboard

3. Mahasiswa mengenal aplikasi untuk membuat template artisteer

4. Mahasiswa Dapat mendesain template blog menggunakan artisteer

5. Mahasiswa Dapat mengupload template hasil desain di wordpress

B. LANDASAN TEORI

Materi Sistem Informasi dan Blog CMS diberikan dalam sessi perkuliahan, mencakup

Konsep Content Management System dan Blogging CMS

Contoh CMS dan Aplikasi Blogging CMS

Manfaat dan Kegunaan CMS dan Blogging CMS

Pengenalan Software/aplikasi Artisteer sebagai pembuat template pada blog

Cara membuat template menggunakan Software/aplikasi Artisteer

Cara mengupload tema pada wordpress

Penjelasan mengenai Software/aplikasi Artisteer

C. PROSEDUR PRAKTIKUM

Kegiatan praktikum akan menitikberatkan pada penguasaan skill dalam

membangun/menyusun aplikasi web agroindustri dengan menggunakan paket blog dari

wordpress dan pengenalan Software/aplikasi Artisteer sebagai software pembuat template

untuk blog. Blog informasi berbasis web yang akan dibangun menggunakan template

yang diupload sesuai dengan dengan desain dari Software/aplikasi Artisteer. Blog berisikan

content tentang SIMAGRO (Perusahaan agrobisnis untuk supplier, pengolahan hasil

pertanian dan pasca panen). Hirearki blog informasi SIMAGRO terdiri dari Menu Web

yang berisi Profile Perusahaan, Hasil Produk Perusahaan, Berita Seputar SIMAGRO yang

berisi kategori Teknologi

Pertanian, Teknologi Pasca Panen. Susunan halaman web yang dipersiapkan terdiri

atas:

24

Halaman Profile Perusahaan SIMAGRO

Hasil Produk SIMAGRO

Berita SIMAGRO dalam Kategori Teknologi Pertanian, Teknologi Pasca

Panen, Teknologi Pasca Panen

Kontak personal SIMAGRO

a Kesiapan Bahan Praktikum

Bahan praktikum penyusunan web blog agroindustri Jagung dipersiapkan

pada server PC lokal yang meliputi installasi server Apache, database

MySQL,dan CMS blog pada masing masing user praktikum. Hasil akhir dari

kegiatan praktikum, akan dihasilkan website SIMAGRO dengan tampilan

seperti terlihat dalam Gambar:

Gambar 2.1. Tampilan Web SIMAGRO yang akan dibangun

b Pelaksanaan Kegiatan

1) Siapkan materi tentang agroindustri perihal komoditi Jagung atas aspek

teknologi pertanian, teknologi on farm dan teknologi off farm. Disiapkan

2 materi artikel sekitar 4 s/d 5 paragraf yang memuat konten diatas.

2) Dari PC masing masing client Praktikum, login pada masing-masing akun

Wordpress. Sehingga muncul tampilan sbb:

Pengaturan Banner

dan Logo Website

Pengaturan Pages

(Menu Website)

Pengaturan Kategori

Dari Artikel website

Pengaturan

materi artikel

25

Gambar 2.1. Sub Menu dashboard

Catat menu bagian kiri yang berisi menu posts, media, link, pages, comments,

Appearance, Plugins, User, Tools dan Setting.

Selanjutnya dalam praktek akan dilakukan tahapan:

Dasar dasar operasi pangaturan website yang meliputi Penambahan

Kategori Artikel, Pengaturan Profile Website, Pengaturan Menu

bar (Widget) untuk tampilan website SIMAGRO

Merubah tampilan Themes dari Website sehingga tampak lebih

sesuai dengan webstie yang didesain.

Langkah yang harus dilakukan adalah sebagai berikut:

Lakukan login sebagai administrator atau sebagai editor ataupun author yang

memiliki level untuk posting berita baru dalam website SIMAGRO.

Pilih menu Post pada submenu Posts, kemudian Add New untuk menambahkan

posting artikel baru seperti terlihat dalam Gambar berikut:

26

Gambar 3.2. Submenu Posting Artikel yang diakses dari Administrator

Tuliskan judul baru artikel dan isi artikel, lakukan copy paste dari materi Tepung

jagung …dst, seperti terlihat dalam Gambar

Gambar 2.2. Contoh penulisan Format HTML untuk pengisian artikel web

Lakukan click publish untuk mempublikasikan artikel dalam website SIMAGRO

seperti terlihat dalam Gambar sbb:

Gunakan Script HTML dalam penulisan artikel dengan mengeklik format form

27

HTML seperti untuk memunculkan gambar, link website, sesuai kebutuhan.

Lakukan hal sama untuk posting berita/artikel yang telah anda siapkan sejumlah 3

s/d 4 materi artikel. Lakukan pengeditan dan penulisan script HTML dalam

penulisan posting berita/artikel sehingga tampilan posting berita menjadi kelihatan

menarik. Hasil akhir dari kegiatan praktikum, akan didapatkan tampilan website

seperti terlihat dalam Gambar 2.2. Hasil Website dalam Praktek

Gambar 2.2. Hasil Website dalam Praktek

• Membuat template menggunakan aplikasi artisteer

Artisteer adalah sebuah software yang di rancang

khusus untuk memberi kemudahan bagi para blogger dalam

merancang suatu template.Dengan bantuan software ini,

anda tidak perlu lagi di pusingkan dengan yang namanya

PHP, CMS, atau bahasa pemrograman lainnya.Artisteer

mampu mempermudah anda dalam mendesign template dari

beberapa layanan blog seperti blogger, drupal, jomla,

wordpress, dan lain sebagainya.

Ada 10 elemen bagian yang penting dalam, mambuat template dan di artisteer

semuanya lengkap, plus satu dari artisteer yaitu Tool Suggest.

28

1. Awal sekali pergunakan Ideas --- Sugest Design. Untuk memilih kira-kita

template seperti apa yang ingin kamu buat secara subyektif.

2. Color & Fonts, adalah untuk pemilihan warna dasar dari template kamu.

Tersedia banyak sekali pilihan warna, jika bingung kembali gunakan Suggest

Colors.

3. Layout terdiri dari dua tool yaitu:

a. Page Layout, bisa di pilih.

1) Header, Menu (tampilan Header dengan Menu)

2) Menu, Header (kebalikannya Menu dahulu baru Header).

3) Header (hanya header saja yang di tampilkan tanpa menu).

4) Menu (hanya menu saja yang di tampilkan tanpa header).

b. Columns, Tinggal di sesuaikan saja 1,2, atau 3 kolom template.

4. Background, latar belakang

pilih sesuai kebutuhan dan tambahkan efek jika ingin, efek-efeknya terdiri dari

a. Glare, memberi efek glare atau silau dalam siluet.

b. Image or Teksture, memberi efek tektur.

c. Gradien, memberi efek Gradien pada latar belakang.

d. Fill color, untuk memasukkan warna sesuai dengan keinginan kamu.

e. From File adalah memasukkan gambar lain dari file yang kamu punya.

5. Sheet (lembar potongan atau bentuk dari template), terdiri dari

a. Built-In.

b. Width, Lebar Sheet Template.

c. Top Offset, batas bagian atas dengan Template.

d. Padding, Batas pinggiran dalam template.

e. Radius, Batas ujung template.

f. Border, Pembatas sisi-sisi template.

g. Shadow, memberi efek bayangan pada sisi-sisi template.

h. Transparancy, adalah tingkat tembus pandang dari sheet template antara 60

sampai 100%.

i. Fill Color, untuk memasukkan warna baru ke sheet template.

29

6. Header, kepala template

a. Position, tata letak dari background header.

b. From File, Bisa di pilih atau bisa di tambahkan gambar dari file kamu.

c. Efek, beri juga sedikit sentuhan visual dengan efek.

d. Foreground Photo, latar depan header

7. Menu

a Menu Style, bentuk dari menu. Terdiri dari

- Styling

- Shape, bentuk dari menu.

- Margin, untuk memberi batas lebar pada menu bar.

- Align, alinea Menu

- Distance, memberi jarak masing-masing item menu.

- Separator, pembatas pada masing-masing menu.

b Coloring, terdiri dari beberapa Costumizable pilihan warna.

Menu Bar, di sertai efek Teksture dan Gradien.

- Fill, untuk memasukkan warna baru pada Menu bar

- Border, memberi baras pada Menu Bar.

Item, bagian dari menu

Dengan pilihan Size (ukuran), Radius, tekstur dan Gradien.

- Fill, memasukkan warna baru pada Passive menu, aktive menu dan

Havored (saat tersentuh pointer cursor).

8. Articles

Selanjutnya adalah articles. Terdiri dari:

a Preview Image, sample tentang gambar dalam artikel.

b Styling,gaya dan bentuk dari artikel pengaturannya:

Shape, ada 2 shape dan tanpa shape

- Dengan Shape

- Tanpa Shape

30

c. Content

Margin, batas artikel dengan tepi template.

d. Teks Padding, batas teks dengan tepi template.

e. Shape, pengaturan untuk shape artikel, terdiri dari Fill, Border dan Radius.

f. Footer

Footer berada di bawah artikel

Style (sama seperti di atas mempunyai footer layout) dan Metadata,

pelengkapnya Tags dan Comments.

9. Buttons dan Footer

Tidak terlihat fungsi yang begitu signifikan pada Buttons, ini di gunakan untuk

fungsi tombol sebenarnya, jika pada Template wordpress sangat kentara, namun

pada blogger saya tidak melihatnya.

Kita langsung saja ke footer, memilki beberapa fungsi editing di ataranya:

1. Footer Styles

a. Fill : Untuk memasukkan warna pada footer

b. Teksture : menambah cantik design footer

c. Gradient : menambahkan fungsi gradien, supaya terkesan agak 3D

d. Align : Penempatan Link footer dan Copyright footer, kanan - Tengah

atau di Kiri.

e. Teks Padding : batas teks dengan tepi footer.

f. Transparency : adalah tingkat transparansi warna dari footer layout.

g. Teks : Untuk bentuk dari warna dan font options lainnya.

h. Hyperlink : Pengaturan untuk fungsi link, baik warna, font dan

underlined atau un underlined.

i. RSS : menambahkan gambar RRS Feed di footer, atau bisa juga dengan

memasukkan gambar dari file.

10. Export ke dalam bentuk .zip

Agar dapat dipasang di wordpress hasil dari desain yang telah dibuat perlu di

export.

Cara mengexport yaitu dengan cara mengklik export pilih wordpress theme

pada path pilih ZIP archive simpan di folderexport

31

ACARA IV

EXPORT CMS WORDPRESS

DARI LOCALHOST (OFFLINE) KE WEBHOSTING (ONLINE)

A. TUJUAN

1. Memahami Pengaturan Konten Web blog SIMAGRO

2. Memahami Pengaturan kategori dan pengisian Posting Berita dalam Web SIMAGRO

3. Memahami Pengaturan user Web Blog SIMAGRO

4. Memahami cara membangun Blog e-commerce SIMAGRO

5. Memahami cara menambahkan produk e-commerce dalam SIMAGRO

6. Memahami pembuatan E-Commerce SIMAGRO

B. LANDASAN TEORI

Materi Sistem Informasi dan Blog CMS diberikan dalam sesi perkuliahan, mencakup:

Sistem Informasi Perusahaan menggunakan media Website

Website Dinamis dan Statis

Pengenalan HTML dan CSS dalam dukungan terhadap website

Dasar–dasar E-Commerce dalam mendukung Sistem Informasi Perusahaan

Agroindustri

Website dan Blogging dengan E-Commerce

Contoh-contoh Sistem E-Commerce

Aplikasi E-Commerce menggunakan Wordpress

C. PROSEDUR PRAKTIKUM

Asumsi dalam permainan “beergame” adalah proses pengiriman produk memakan

waktu selama dua minggu (lead time), proses produksi memakan waktu dua minggu.

Sedangkan untuk aturan umum yang mengikat pada permainan “beergame” ini antara

lain:

HTML adalah Hypertext Markup Language, sebuah bahasa standar yang digunakan

oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang

kemudian dapat diakses dan dibaca layaknya sebuah artikel.

Plugin adalah sebuah program tambahan yang bisa diintergrasikan dengan wordpress

untuk memberikan fungsi-fungsi lain yang belum tersedia pada instalasi standar.

32

Dalam website SIMAGRO memuat kategori artikel dan artikel yang dapat dikirimkan

pada website oleh user baik user sebagai Author, Editor maupun User Admin dan User

pengguna yang disetting memiliki ke tiga autoritas diatas.

Sistem informasi SIMAGRO dalam format CMS menggunakan wordpress dalam

kegiatan praktek akan dilengkapi menjadi konten E-Commerce SIMAGRO yang

melakukan penjualan online dari hasil produk SIMAGRO.

Deskripsi Produk SIMAGRO dipersiapkan ada 3 kategori produk, dan terdapat 4 item

produk yang dihasilkan sbb:

Tabel 4.1 Contoh Kategori Produk yang akan diberikan dalam Web E-Commerce

No Kategori Produk Image Produk

1 Pembibitan

2 Pasca Panen

3 Olahan

Table 4.2 Contoh Produk yang akan diberikan dalam Web E-Commerce SIMARGO

No Jenis Produk Image Produk

1 Produk Tepung Jagung

SIMAGRO

33

2 Produk Bihun Jagung SIMAGRO

3 Produk Bibi Jagung SIMAGRO

1. Dalam permainan ini tidak diperkenankan adanya komunikasi dan koordinasi antar

lelel dalam rantai pasok

2. Permintaan pelanggan hanya diketahui oleh Retailer

3. Jika stock tersedia (available), maka order harus dipenuhi.

4. Jika stock tidak tersedia, maka item dimasukkan dalam backorder

5. Pemenuhan pesananan dari hilir akan dilakukan ketika stock sudah available

Prosedur permainan berjalan pada setiap minggu setiap kelompok melakukan

langkah-langkah berikut:

1. Incoming delivery (new delivery)

Tambahkan incoming delivery ke playsheet dan memperbarui "available".

Tambahkan incoming delivery ke inventory lama untuk mendapatkan available

number of items in stock.

Available = Inventory (last week) + Incoming

2. Incoming order (new order)

Tuliskan jumlah order untuk mengendalikan playsheet dan kemudian hitung jumlah

yang harus dikirimkan. Perhitungkan setiap backorders

To Ship = Backorder (last week) + New Order

34

3. Prepare delivery

Ketahui jumlah yang akan dikirimkan ke level berikutnya dan tulis angka pada

delivery slip, dan tempatkan pada shipping container (outgoing delivery). Jika

jumlah “to ship” melebihi available stock, maka Anda harus memberikan apa pun

yang available, jika tidak, anda hanya akan memenuhi pesanan tersebut.

If (to ship) > Available then Your Delivery = Available

If (to ship) < Available then Your Delivery = to ship

4. Calculate backorder

Jika permintaan ("To ship") tidak dapat dipenuhi, kemudian masukkan barang-

barang yang tersisa di backorder

If (to ship) > Available then backorder = to ship - available else backorder = 0

5. Calculate inventory

New inventory dalam pengertiannya adalah stock yang tersedia dikurangi pengiriman

yang dilakukan. Ketika “To Ship” > level of inventory maka new inventory menjadi

“0” (nol).

If (to ship) > Available then inventory = 0

Else inventory = available - to ship

6. Place new order

Diskusikan dan tempatkan pesanan baru setiap level (atau pesanan produksi pada

factory). Kemudian catat pesanan menggunakan “kartu order” (orderslip) dan

mengisinya ke playsheet, kemudian tempatkan pesanan anda pada outgoing order

dan tuliskan jumlahnya di “kartu order”.

a Kesiapan Bahan Praktikum

Siapkan 3 s/d 4 materi artikel yang memuat informasi terhadap kategori artikel yang

sesuai dengan website SIMAGRO yang nantinya akan dipostingkan.

Themes wordpress e-commerce shopme.zip telah dipersiapkan dalam local server

untuk kebutuhan kegiatan praktek.

35

Penyusunan wordpress e-commerce melanjutkan kegiatan dari materi praktikum

sebelumnya.

Tampilan antar muka website e-commerce SIMAGRO, yang menjadi target

penyusunan e-commerce diberikan sbb:

Gambar 4.3. Contoh Web Blog E-Commerce CV SIMAGRO

b Pelaksanaan Kegiatan

Pilih menu Plugins submenu Plugins, kemudian Add New untuk menambahkan plugins

E-Commerce dalam website blog yang telah disusun seperti berikut:

Gambar 4.4. Installasi Pulgins untuk E-Commerce

36

Dari menu install Plugins, pilih click submenu upload untuk mengambil plugins E-

Commerce dari Folder di Komputer seperti terlihat dalam Gambar

Gambar 4.5. Plugins wp-ecommerce 3.8.7.6.2 E-Commerce

yang digunakan dalam Praktek

Click menu install seperti ditunjukkan dalam Gambar berikut:

Gambar 4.6. Instlalasi Plugins dalam Praktek

Aktifkan wp-ecommerce dengan mengklik pada menu activate e-commerce.

Hasil installasi wp-ecommerce jika berhasil maka akan ditambahkan blog menu

pengaturan (setting) untuk e-commerce dan pengaturan produk e-commerce seperti

diperlihatkan dalam Gambar

37

Gambar 4.7. Pengaturan Website dengan User Administrator

pada E-Commerce

Catatlah submenu dalam products yang ditambahkan dan submenu setting pada store yang

ditambahkan dalam website E-Commerce. Menu Product dan setting store merupakan

submenu yang ditambahkan dari Plugins E-Commerce untuk mendukung wordpress dalam

penjualan online.

Lakukan Pengaturan halaman antar muka E-Commerce dengan memilih click pada Setting,

pilih store, seperti terlihat dalam Gambar berikut:

Gambar 4.8. Pengaturan Setting Store pada E-Commerce

38

Menu e-commerce diatur dalam submenu General, Presentation, Admin, Taxes,

Shipping, Payments, Check Out, Marketing dan Import seperti diperlihatkan dalam

Gambar diatas.

Lakukan pengaturan General untuk menentukan target pemasaran, nominal nilai mata

uang yang digunakan, dsb.

Lakukan pengaturan pada submenu Presentation untuk menampilkan hasil menu pada

tampilan depan website seperti ditunjukkan dalam Gambar berikut:

Gambar 4.9. Hasil Tampilan Blog E-Commerce terimplementasi pada Web

Pengaturan Themes E-Commerce

Pengaturan Themes E-Commerce ditujukan untuk merubah tampilan informasi blog

SIMAGRO agar kelihatan menampilkan hasil produk secara lebih diutamakan dibanding

dengan tampilan standard e-commerce wordpress.

Lakukan pilih menu Themes dari submenu Appearance, kemudian click install Themes

seperti terlihat dalam Gambar

39

Gambar 4.9. Installasi Themes E-Commerce Shopme

Lakukan pilih upload dari browser computer dan pilih shopme.zip sebagai themes e-commerce

yang dipilih.

Gambar 4.10. Contoh Pemilihan Themes Shopme yang diinstall dalam Web E-Commerce

Lakukan installasi, hasil dari themes shopme akan merubah tampilan website e-commerce

SIMAGRO seperti ditunjukkan dalam Gambar

40

Gambar 4.10. Hasil Theme terinstall untuk Dukungan E-Commerce

Dengan mengaktifkan themes shopme 1.0, pada blog e-commerce SIMAGRO akan diperoleh

tampilan sbb:

Gambar 4.11. Tampilan Shopme Themes E-Commerce awal

Lakukan pengaturan setting pada plugins shopme dimenu shopme2011 setting untuk

menempatkan tulisan pada halaman judul dan banner produk seperti terlihat dalam Gambar

41

Gambar 4.12. Pengaturan E-Commerce untuk pengisian halaman antar muka web

Tampilan hasil terhadap website e-commerce SIMAGRO seperti ditunjukkan dalam Gambar

berikut:

Gambar 4.13. Hasil tampilan web e-commerce hasil pengaturan

Penambahan Posting Produk dalam E-Commerce

Website e-commerce masih belum berisikan produk yang dipasarkan secara online dalam

website. Lakukan penambahan posting produk dalam e-commerce sbb:

Pilih submenu produk dari login Administrator, kemudian isikan produk dan

pengaturannya seperti ditunjukkan dalam Gambar

42

Gambar 4.14. Pengisian Produk E-Commerce

Pilih Add new untuk pengisian produk baru, lakukan penambahan image dalam produk seperti

tertera dalam Gambar

Gambar 4.15. Pengaturan Gambar Produk dalam Web

Jika benar materi produk akan ditambahkan dalam website seperti tertera dalam Gambar

berikut ini :

43

Gambar 4.16. Hasil Penambahan Produk pada E-Commerce

Lengkapi produk yang ada, dan kategori produk sehingga akan ditampilkan hasil website e-

commerce SIMAGRO seperti dalam target kegiatan praktek.

44