Sebuah tutorial modifikasi template SLiMS

TemplateMOD
SLiMS 5 Meranti

STEP
BY
STEP
Waris Agung Widodo
Ido.alit@gmail.com

Sebuah tutorial modifikasi template SLiMS

TemplateMOD
SLiMS 5 Meranti
Step by Step

Oleh:
Waris Agung Widodo

Kata Pengantar

SLiMS adalah Open Source Software (OSS) berbasis web untuk

memenuhi kebutuhan automasi perpustakaan (library automation) skala
kecil hingga skala besar. Dengan tur yang cukup lengkap dan masih terus
aktif dikembangkan, SLiMS sangat cocok digunakan bagi perpustakaan
yang memiliki koleksi, anggota dan staf banyak di lingkungan jaringan,
baik itu jaringan lokal (intranet) maupun Internet.

SLiMS memiliki fasilitas untuk mengubah tampilan (template) halaman OPAC maupun
Admin. Namun dalam versi SLiMS 5 Meranti hanya terdapat satu template default di dalam
master SLiMS. Kita bisa mendapatkan dan menambah template SLiMS dengan cara
mengunduh hasil karya penggiat SLiMS di http://goslims.net/ atau kita dapat membuatnya
sendiri.
Di dalam buku ini akan dibahas bagaimana membuat template SLiMS? Karena SLiMS
merupakan aplikasi berbasis web maka untuk dapat membuat template kita harus
memahami bahasa pemrograman berbasis web juga, minimal HTML dan CSS.
Dalam penyusunan buku ini pastilah masih banyak kekurangan dan masih jauh dari kata
sempurna. Penulis bukan ahli dalam bidang ini, namun hanya ingin berbagi yang penulis
ketahui. Oleh karena itu penulis membuka kritik dan saran yang dapat dikirim melalui e-mail
ido.alit@gmail.com atau facebook : ido alit.

Purbalingga, Juni 2013

Waris Agung Widodo

ii

Daftar Isi
Kata Pengantar ................................................................................................................................. ii
Daftar Isi .............................................................................................................................................. iii
Daftar Gambar................................................................................................................................. iv
Chapter 1 : Apa itu HTML dan CSS ? ............................................................................................. 1
HTML ................................................................................................................................................. 1
CSS ................................................................................................................................................... 1
Chapter 2 : Menentukan Konsep Desain Template .................................................................. 2
Chapter 3 : Mengetahui Struktur Dasar Source Code Template SLiMS ................................. 4
Chapter 4 : Header .......................................................................................................................... 7
Chapter 5 : Beranda (Home) ....................................................................................................... 12
Form Pencarian Sederhana. ..................................................................................................... 12
Form Pencarian Spesifik ............................................................................................................. 15
Style Tombol Pencarian Spesifik ............................................................................................... 16
Style Form Isian Pencarian Spesifik ........................................................................................... 17
Toggel Form Pencarian Spesifik ................................................................................................ 19
Footer ............................................................................................................................................ 20
Menambah Background Bokeh .............................................................................................. 22
Chapter 6 : Informasi Perpustakaan & Bantuan Pencarian ................................................... 27
Chapter 7 : Area Anggota (Member Area) .............................................................................. 30
Form Login Anggota ................................................................................................................... 30
Menggunakan Fasilitas Inspect Element pada Browser. .................................................... 31
Chapter 8 : Login Pustakawan ..................................................................................................... 35
Chapter 9 : Hasil Pencarian .......................................................................................................... 39
Chapter 10 : Detail Spesifik ........................................................................................................... 42
Chapter 11 : Visitor Counter ......................................................................................................... 47
Biografi Penulis ................................................................................................................................. 50

iii

Daftar Gambar
Gambar 1. Poster Gathering SLiMS Jateng ................................................................................. 2
Gambar 2. Desain Template - Halaman Beranda ..................................................................... 3
Gambar 3. Header ........................................................................................................................... 7
Gambar 4. Nama perpustakaan, form bahasa & menu yang masih Berantakan. ............ 8
Gambar 5. Header & Menu setelah ditambah style. .............................................................. 11
Gambar 6. Form pencarian .......................................................................................................... 12
Gambar 7. Form pencarian tanpa style. ................................................................................... 13
Gambar 8. Form Pencarian setelah ditambah style. .............................................................. 14
Gambar 9. Desain Pencarian Spesifik (Advace Search) ........................................................ 15
Gambar 10. Form Pencarian spesifik. ......................................................................................... 19
Gambar 11. Desain Footer ............................................................................................................ 20
Gambar 12. Footer ......................................................................................................................... 22
Gambar 13. Bokeh.......................................................................................................................... 23
Gambar 14. Tampilan Beranda Depan (Home) ...................................................................... 26
Gambar 15. Desain halaman info & helm ................................................................................. 27
Gambar 16. Info Perpustakaan.................................................................................................... 29
Gambar 17. Member login form .................................................................................................. 30
Gambar 18. Form login anggota menggunakan layout info & help. .................................. 31
Gambar 19. Inspect Element pada Mozzila Firefox ................................................................. 32
Gambar 20. Penggunaan Inspect Element .............................................................................. 32
Gambar 21. Form Login Anggota setelah ditambah style ..................................................... 34
Gambar 22. Login Pustakawan.................................................................................................... 36
Gambar 23. Login Pustakawan.................................................................................................... 36
Gambar 24. Inspect Element Login Button ................................................................................ 37
Gambar 25. Login form .................................................................................................................. 38
Gambar 26. Halaman Pencarian ................................................................................................ 39
Gambar 27. Hasil Pencarian ......................................................................................................... 41
Gambar 28. Detail Spesifik ............................................................................................................ 46
Gambar 29. Halaman Penghitung Pengunjung sebelum dimodifikasi. .............................. 47
Gambar 30. Halaman Visitor Counter ........................................................................................ 49

iv

Chapter 1 : Apa itu HTML dan CSS ?

HTML
HyperText Markup Language ( HTML ) adalah sebuah bahasa markah yang digunakan
untuk membuat halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
web internet dan pemformatan hipertensi sederhana yang ditulis dalam berkas format ASCII
agar dapat menghasilkan tampilan wujud yang reintegrasi.

CSS
Cascading Style Sheet ( CSS ) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih restruktur dan seragam. CSS bukan
merupakan bahasa pemograman, melainkan styles yang dapat mengatur style, misalnya
heading, subbab, bodytext, images, dan style lainnya.

Chapter 2 : Menentukan Konsep Desain Template

Sebelum kita memulai menyusun source code hal yang pertama dilakukan adalah
membuat rancangan template yang akan kita buat. Dalam membuat desain bisa
menggunakan aplikasi desain seperti Coreldraw, Photoshop, Gimp, dan lain-lain, atau juga
bisa dalam bentuk sketsa di atas kertas.
Inspirasi bisa datang dari mana saja. Disini saya memberi contoh sebuah poster
Pertemuan Akbar Komunitas SLiMS Jawa Tengah sebagai inspirasi untuk dijadikan desain
template.

Gambar 1. Poster Gathering SLiMS Jateng

Dengan sedikit penyesuaian maka poster tersebut dapat dijadikan desain template
sederhana seperti berikut :

Gambar 2. Desain Template - Halaman Beranda

Pada gambar 2 merupakan contoh halaman beranda OPAC yang akan kita buat, untuk
halaman yang lain seperti halaman info, member dan login dapat anda desain lebih lanjut.

Chapter 3 : Mengetahui Struktur Dasar Source Code Template SLiMS

Struktur kode template SLiMS sebenarnya sama dengan halaman HTML biasa, hanya
saja karena SLiMS dibuat dengan PHP maka kita tidak perlu membuat banyak file HTML untuk
masing-masing halaman, namun cukup dengan satu halaman index dan isinya yang berganti
(dynamic web page).
Berikut adalah struktur dasar source code template SLiMS.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
5

67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
Dari kode-kode di atas dapat kita lihat bagian-bagian yang akan ditampilkan jika kita
membuka halaman yang kita inginkan (halaman beranda, halaman info, bantuan/help, area
anggota/member area, hasil pencarian, dan detail spesifik koleksi).
Untuk memulai menyusun template, kita terlebih dahulu membuat sebuah folder di
dalam folder

, dengan nama template yang

kita inginkan. Sebagai contoh saya membuat template dengan nama templateku, maka
menjadi

Nah folder ini akan kita gunakan untuk

menyimpan source code yang kita buat.

Untuk mempermudah dalam penulisan kode-kode, kita membutuhkan aplikasi teks
editor seperti notepad++, Dreamweaver, komodo edit, atau yang lain yang mana memang
diperuntukkan untuk membuat/mengedit kode.
Untuk

memulai

menyusun

source

code

template,

buatlah

sebuah

file

di dalam folder templateku yang berisi source code dasar di

atas dengan menggunakan teks editor anda.

Chapter 4 : Header
Header letaknya adalah di atas. Header biasanya berisi informasi Instansi/ nama
perpustakaan, form pemilihan bahasa dan menu-menu. Header yang kita buat akan
ditampilkan pada setiap halaman, maka source code header kita letakkan di bawah tag
.

Gambar 3. Header

Untuk membuat header silahkan tambahkan kode berikut di bawah tag

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
Untuk melihat hasilnya, ganti dahulu template publik di menu sistem pada halaman
admin SLiMS, dengan template kita, di sini saya ganti dengan templateku. Setelah diganti
dan simpan konfigurasi, kemudian buka halaman OPAC, maka akan terlihat hasil dari kode di
atas akan seperti di bawah ini.

Gambar 4. Nama perpustakaan, form bahasa & menu yang masih Berantakan.

Selain itu juga kita membutuhkan sebuah file

yang akan kita gunakan untuk

menyimpan pengaturan terhadap file HTML di yang ada sehingga halaman template menjadi
lebih menarik dan sesuai dengan desain yang sudah dibuat. Buatlah file
folder templateku. Kemudian isi dengan kode berikut:
1.
8

di dalam

2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.

10

Di dalam kode CSS di atas terdapat kode

. Ini berguna untuk menampilkan logo perpustakaan. Sehingga kita membutuhkan
sebuah file gambar dengan nama

dan meletakkannya di dalam folder

Setelah penambahan style maka akan menjadi seperti berikut.

Gambar 5. Header & Menu setelah ditambah style.

11

Chapter 5 : Beranda (Home)

Dalam membuat halaman beranda, source code yang akan kita tambahkan diletakkan
di antara kode

dan

. Di sini kita akan

menambahkan beberapa elemen, antara lain form pencarian (sederhana dan spesifik) serta
footer.

Form Pencarian Sederhana.

Gambar 6. Form pencarian

Tambahkan kode berikut untuk menambahkan form pencarian.

34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
Setelah ditambahkan kode di atas akan muncul sebuah form pencarian sederhana.
Namun juga masih sederhana tampilannya. Untuk mempercantik tampilan sehingga sesuai
dengan desain yang sudah dibuat maka kita membutuhkan style lagi untuk mengubahnya.
Kita tidak perlu membuat file
dalam file

lagi. Kita hanya perlu menambahkan kode CSS di

yang sudah dibuat sebelumnya.

12

Gambar 7. Form pencarian tanpa style.

Berikut kode CSS untuk mengubah tampilan form pencarian sederhana.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

13

22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

Gambar 8. Form Pencarian setelah ditambah style.

14

Form Pencarian Spesifik

Yang dibutuhkan dalam form ini adalah sebuah tombol atau link yang akan digunakan
untuk membuka form pencarian spesifik yang tersembunyi. Untuk menampilkannya dapat
menggunakan kode

atau hanya menggunakan CSS.

Berikut adalah desain yang akan kita buat.

Gambar 9. Desain Pencarian Spesifik (Advace Search)

Berikut adalah kode HTML untuk pencarian spesifik, tambahkan di bawah kode
pencarian sederhana ( dibawah kode

).

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

15

17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

Style Tombol Pencarian Spesifik

1.
2.
16

3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

Style Form Isian Pencarian Spesifik

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
17

19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

18

56.
57.
58.
59.
60.
61.
62.

Gambar 10. Form Pencarian spesifik.

Toggel Form Pencarian Spesifik

Sebelumnya kita sembunyikan dahulu
menambahkan Property

form pencarian spesifik, dengan cara

pada class

pada file

1.
2.
3.
4.
5.
6.
7.

Kemudian untuk menampilkan dan menyembunyikan kembali form pencarian spesifik

kita dapat menggunakan jQuery

Effect.
19

Tambahkan kode berikut sebelum tag

, pada file

1.
2.
3.
4.
5.
6.
7.

Footer
Footer ( catatan kaki ) terletak di bawah, biasanya berisi informasi lisensi dan
kepengarangan, atau informasi lain.

Gambar 11. Desain Footer

Bagaimana cara membuatnya? Silahkan simak kode berikut, kemudian tambahkan di

bawah kode pencarian spesifik (

) di dalam file

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

20

14.
15.
16.
17.
18.
19.
Berikut kode CSS untuk footer,
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
21

30.
31.
32.
33.
Hasilnya akan seperti ini.

Gambar 12. Footer

Menambah Background Bokeh

Bokeh yang dimaksud di sini adalah lingkaran-lingkaran warna warni yang ada di dalam
desain template yang mana akan kita gunakan untuk asesoris background.

22

Gambar 13. Bokeh

Tambahkan kode berikut ke dalam file

, dan letakkan di

bawah tag
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Kemudian kode CSS untuk bokeh sebagai berikut :

1.
2.
3.
4.
5.
6.
7.
8.

23

9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

24

46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

25

Gambar 14. Tampilan Beranda Depan (Home)

26

Chapter 6 : Informasi Perpustakaan & Bantuan Pencarian

Pada halaman ini terdapat content berupa informasi perpustakaan dan bantuan
pencarian atau content lain yang ada di

pada menu

. Untuk

mengakses content-content yang ada dapat menggunakan URL

Path diisi path unik (tanpa tanda petik) yang ada di masing-masing content. Sebagai
contoh kita akan mengakses content Informasi Perpustakaan yang memiliki path
maka URLnya adalah

Dalam kode sumber (source code) content ini ditampilkan dengan kode
yang ada di antara kode

dan

pada file

. Untuk konsep halamannya akan dibuat

seperti berikut.

Gambar 15. Desain halaman info & helm

Selanjutnya kode

kita bungkus dengan

beberapa kode yang lain seperti berikut ini :

1.
2.
3.
4.
5.
6.
7.
8.

27

, serta

9.
10.

Kode CSS, tambahkan di baris paling bawah di file

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
28

Gambar 16. Info Perpustakaan

29

Chapter 7 : Area Anggota (Member Area)

Ada dua halaman yang harus di atur dalam Area Anggota ini, yaitu form login anggota
dan halaman setelah anggota login. Kode yang akan kita gunakan yaitu kode yang ada di
antara kode

dengan

Form Login Anggota

Halaman ini merupakan halaman sebelum anggota login yang ditampilkan oleh kode
berikut:

Gambar 17. Member login form

Terlihat bahwa gambar di atas masih Berantakan dan kurang menarik, kita tambahkan
beberapa kode agar sama dengan layout halaman info perpustakaan, berikut contoh sedikit
penyesuaian kodenya dengan cara memberikan class yang sama pada divnya.
1.
2.
3.
4.
5.
6.
7.
8.
9.
30

10.
11.
12.
13.

Gambar 18. Form login anggota menggunakan layout info & help.

Menggunakan Fasilitas Inspect Element pada Browser.

Halaman area anggota diatas berisi content yang di buat oleh SLiMS, maka kita tidak
dapat menentukan sendiri

dan

untuk tiap-tiap elemen yang ada, namun

dan

ini sudah disediakan oleh SLiMS. Untuk mengetahuinya kita gunakan fasilitas
yang ada pada browser, dengan cara klik kanan pada elemen, kemudian pilih
Inspect Element.
Inspect Element sangat bermanfaat bagi developer, karena dengan fasilitas ini kita
dapat mengedit Property serta elemen yang diinginkan dan perubahan yang ada akan
tampak secara real Time. Sebagai contoh kita akan mengganti warna background, saat kita
edit maka background akan berganti tanpa melakukan reload halaman. Namun fasilitas ini
tidak menyimpan perubahan yang dilakukan. Kita tetap harus mengedit kode yang ada di
dalam file.

31

Gambar 19. Inspect Element pada Mozzila Firefox

Selanjutnya kita akan mengedit form input username dan password dengan
memberikan beberapa style. Sebelumnya kita menentukan dahulu selector untuk input
tersebut menggunakan inspect elemen.

Gambar 20. Penggunaan Inspect Element

32

Keterangan gambar 20.

1. Tool ini digunakan untuk memilih elemen dengan mouse.
2. Selanjutnya arahkan pointer kita ke arah elemen yang akan kita edit.
3. Elemen yang kita pilih akan di highlight berwarna abu-abu.
Dari gambar 20 di atas dapat kita ketahui bahwa input username berada di dalam
. Selanjutnya kita tambahkan style untuk

tersebut pada file

.
1.
2.
3.
4.
5.
6.
7.
8.
Dengan cara yang sama, kita select tombol submit pada form anggota untuk
menentukan

selectornya.

Dan

diketahui

tombol

. Kita tambahkan juga style untuk

submit
tersebut.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

33

tersebut

memiliki

Gambar 21. Form Login Anggota setelah ditambah style

34

Chapter 8 : Login Pustakawan

Untuk

mengakses

halaman

login

pustakawan

kita

membutuhkan

file

. Berikut kode default untuk halaman login pustakawan.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
Berikut penampakan kode di atas, sama halnya dengan login anggota, login
pustakawan sudah terdapat form default SLiMS kita dapat memodifikasi dengan menambah
style. Untuk menentukan selector kita gunakan Tool Inspect Element pada browser.

35

Gambar 22. Login Pustakawan

1.
2.
3.
4.
5.
6.
7.
8.

Gambar 23. Login Pustakawan

Di dalam login pustakawan terdapat dua tombol, yaitu tombol

dan

, kita

akan menambahkan style yang samakan dengan tombol member login yang telah dibuat.
Kita tidak perlu membuat style lagi yang sama, akan tetapi hanya perlu menambahkan
selector untuk tombol

dan

pada selector member login dengan pemisah koma

(,).

36

Dengan tool inspect elemen, kita periksa selector yang digunakan untuk tombol
dan

Gambar 24. Inspect Element Login Button

Kita dapatkan bahwa tombol

memiliki
anggota yaitu

memiliki

, dan tombol

. Kita tambahakn kedua Class tersebut ke selector tombol login

dengan pemisah koma ( , ).

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

37

Gambar 25. Login form

38

Chapter 9 : Hasil Pencarian

Content halaman hasil pencarian ditampilkan oleh kode
yang ada di antara kode

dengan

di dalam file

. Seperti halaman yang lain,

halaman hasil pencarian juga akan kita samakan layoutnya. Berikut kode untuk halaman hasil
pencarian.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Gambar 26. Halaman Pencarian

39

Dapat dilihat pada gambar 26 hasil pencarian untuk tiap item masih terlihat berantakan
karena belum diatur stylenya. Kita membutuhkan selector untuk masing-masing elemen, dan
gunakan tool inspect elemen untuk mengetahuinya. Berikut style yang bisa ditambahkan
untuk item hasil pencarian.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

40

34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

Gambar 27. Hasil Pencarian

41

Chapter 10 : Detail Spesifik

Halaman detail spesifik ditampilkan oleh kode
antara kode

dengan

Dan content yang ditampilkan ada di file

file

di
.
. Untuk itu kita membutuhkan

, kita bisa mengkopi file

yang ada pada

folder tamplate default dan memodifikasi sesuai keperluan.

Berikut kode file detail_template.php yang sudah sedikit dimodifikasi, simpan di dalam
folder template kamu, di sini saya simpan di folder templateku.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

42

26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
43

63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
44

100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.

Dan berikut style CSSnya.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

45

22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

Gambar 28. Detail Spesifik

46

Chapter 11 : Visitor Counter

Seperti halnya form login member maupun form login pustakawan, pada halaman
penghitung pengunjung kita dapat memodifikasi dengan kode CSS saja.

Gambar 29. Halaman Penghitung Pengunjung sebelum dimodifikasi.

Seperti biasa gunakan tool inspect elemen untuk menentukan selector untuk kode
CSSnya. Berikut kode CSS yang ditambahkan.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

47

16.
17.
18.
Selain itu, pada halaman visitor counter terdapar form input dan tombol. Form input
tersebut memiliki ID

dan

, sedangkan tombolnya memiliki ID

. Untuk efisiensi dalam penulisan kode, maka kita samakan style form input tersebut
dengan form input member area dengan menambahkan ID tersebut ke dalam selector form
input member area (

), serta menambahkan ID tombol ke dalam

selector tombol member area (

). Berikut penampakan penambahan

selectornya.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

48

Gambar 30. Halaman Visitor Counter

49

Biografi Penulis
Waris Agung Widodo, lahir di Purbalingga, Jawa Tengah pada tanggal
11 Oktober 1990. Memulai pendidikan di TK Pertiwi Pekiringan pada
tahun 1994, namun baru masuk di SD Negeri Pekiringan 01 pada tahun
1996. Kemudian berlanjut belajar di SLTP N 1 Karangmoncol dan
menamatkan SMA di SMA N 1 Bobotsari pada tahun 2008. Pada tahun
2009 kembali menimba Ilmu Perpustakaan di Universitas Terbuka.
Mulai mengenal SLiMS saat masih di bangku kuliah, namun baru dapat
menerapkanya setelah bekerja di Perpustakaan Gema SDN 1 Tajug. Belajar secara autodidak
dibantu oleh om Google untuk menelusur content-content yang dibutuhkan untuk
mengetahui seluk beluk SLiMS dan belajar memodifikasinya.

50