Menampilkan Konten dengan VIEWS bergaya Grid

Submitted by Fasthan on Sat, 26 Jun 2010 - 00:07

Tutorial Views ini merupakan serial dari tutorial sebelumnya. Anda dapat mengakses artikel sebelumnya sebagai dasar dan juga sekaligus sebagai bahan materi. Artikel tersebut adalah:
Pengantar CCK + Views 

1. Membuat Tipe Konten Dengan CCK
2. Cara Mengisi Konten dengan CCK

Views bisa ditampilkan dengan berbagai macam style. Kali ini kita membahas Views dengan style Grid.
Hasil akhir dari tutorial tersebut bisa dilihat pada screenshot dibawah ini.

Setelah membuat tipe konten dan mengisi konten dengan CCK, tugas selanjutnya adalah menampilkan kontent tersebut dengan Views. Langkah-langkah dalam membangun views awalnya tampak ribet dan membutuhkan perjalanan yang panjang. Tapi jika anda sudah terbiasa, dijamin membangun views hanya membutuhkan waktu sekitar 10-20 menit saja.
Sebelum kita terjun untuk mengikuti langkah-langkah membangun views, pastikan dulu anda menginstal modul Views. Jangan lupa meng-enablekan modul tersebut dan mengatur permissionnya. Setting permission pada views merupakan hal yang urgent yang harus dilakukan. Jika anda lupa mengatur permissionnya, jangan heran kalau anda tidak bisa melihat tampilan content-content yang dibangun views saat anda mengunjungi website anda sebagai anonymous user.
Langkah-langkah membangun views pada tutorial ini kita bagi pada tahapan:

1. Membuat Views baru (Add Views).
2. Mengatur Basic Settings.
3. Setting bagian Fields.
4. Setting bagian Filters.
5. Setting bagian Sort.
6. Menampilkan hasil views (Add Display).

Langkah-langkah,
I. MEMBUAT VIEWS BARU  (Add Views).
  Klik Administer --> Site Building --> Views, maka akan muncul halaman seperti gambar dibawah ini.

Isikan kolom-kolom berikut:

• View Name : selebritis
• View Description: Selebritis Profil
• View tag: Selebritis
• View type: pilih Node pada radio button, kemudian klik tombol NEXT.

II. MENGATUR BASIC SETTINGS.
1. Setelah tombol Next diklik, muncul halaman seperti gambar dibawah ini.


Pada bagian BASIC SETTINGS, Klik baris NAME : DEFAULTS (panah merah) dan otomatis bagian seperti yang ditunjukkan oleh panah biru terbuka. Isikan Selebritis pada kolom tersebut. Pengaturan Name ini untuk mengubah nama display views seperti yang ditunjukkan pada panah hijau pada gambar di atas. Kemudian klik Update.
2. Selanjutnya klik pada baris TITLE : NONE yang ditandai dengan panah merah seperti gambar dibawah ini. Begitu diklik, bagian yang ditunjukkan oleh panah biru otomatis terbuka. Isikan baris kolomnya dengan tulisan Selebritis Grid. Klik Update.


Fungsi pengaturan TITLE ini untuk memberi nama pada halaman hasil views seperti gambar dibawah ini yang ditandai dengan panah hijau



3. Lihat gambar di bawah ini, klik pada baris STYLE : UNFORMATTED (panah merah). Bagian yang ditandai dengan panah biru otomatis terbuka, pilih GRID dan klik update.


Setelah selesai diupdate, kita kembali lagi ke baris yang kita kerjakan tadi yaitu STYLE : GRID (sudah berubah nama dari Unformatted). Klik tulisan GRID untuk menampilkan bagian yang ditunjukkan oleh gambar dibawah ini.


Kemudan klik SETTINGS seperti tanda panah warna merah pada gambar di atas. Setelah diklik muncul bagian yang ditunjukkan oleh gambar di bawah ini yang ditandai dengan panah biru. Isikan dengan nilai 2 dan klik Update.



Hasil pengaturan GRID SETTINGS dengan nilai 2 berfungsi untuk menampilkan konten dengan 2 kolom seperti yang ditunjukkan oleh 2 panah hijau pada gambar di bawah ini.



4. Klik pada baris USE PAGER (panah merah pada gambar dibawah),  untuk membawa kita ke bagian bawah dengan panah biru pilih FULL PAGER. Klik Update.


Pada hasil views nantinya, hasil pengaturan Use Pager akan memunculkan navigasi dengan tulisan Previous, 1,2,3,... dan Next seperti panah hijau pada gambar dibawah ini.


5. Perhatikan pada bagian screenshot hasil views di gambar paling atas, setiap halaman views akan menampilkan 4 konten dalam satu halaman. Ini merupakan hasil dari pengaturan pada baris ITEMS PER PAGE. Klik baris ITEM PERPAGE yang ditandai oleh panah merah pada gambar dibawah, dan kemudian isikan nilai 4 dibagian bawah bertanda panah biru.

Lihat hasil pengaturan Items Per Page : 4 seperti gambar dibawah ini. Disini Ada 4 tanda panah hijau yang menandakan 4 konten dalam satu halaman.


baris lain pada bagian Basic Settings tidak saya bahas disini, anda bisa mencoba-coba mengatur settingan anda sendiri nantinya.
III. SETTING FIELDS
Mengatur Fields adalah mengatur bagian-bagian content yang tampak oleh mata. Pada hasil tutorial ini yang tampak oleh mata adalah bagian : Title, Image, Spesialisasi dan Tarif Pentas. Inilah yang dimaksudkan oleh Fields. Kita boleh saja tidak mengikutsertakan fields tertentu, misal Image,  dengan cara tidak memasukkannya pada bagian Fields. Tapi untuk tutorial ini, kita memasukkan semua fields yang telah kita isi pada CCK.
1. Untuk menambahkan fields, klik tanda + seperti panah merah pada gambar dibawah ini.

Pada gambar dibawah ini, di bagian GROUPS yang berupa select list (panah merah), pilih NODE, dan beri tanda contreng pada NODE : TITLE. Tekan tombol ADD.


Setelah menekan tombol add, halaman seperti gambar di bawah ini muncul, biarkan semua settingan default kecuali pada bagian LINK THIS FIELD TO ITS NODE (panah merah). Artinya, Title pada hasil views nantinya akan bisa diklik dan membawa kita ke node yang telah kita isi sebelumnya di CCK. Klik Update.


2. Kemudian klik tanda panah lagi untuk menambahkan fields baru, yaitu berupa Image. Pilih CONTENT pada select list bagian GROUPS. Contrengkan CONTENT : FOTO PROFIL (FIELD_FOTO_PROFIL). Klik tombol ADD.

Selanjutnya kita dibawa ke halaman seperti gambar dibawah ini. Biarkan settingan lain default, hanya pada bagian Label kita pilih WIDGET LABEL dan FORMAT : IMAGE LINK TO NODE. Pilihan ini nantinya akan membuat image yang kita tampilkan bisa diklik dan begitu diklik akan membawa kita ke node asalnya. Kemudian Klik Update.


3. Tambahkan Field baru dengan meng-klik tanda panah lagi pada bagian Fields. Pilih GROUPS Content pada bagian select list dan contreng CONTENT : SPESIALISASI (field_spesialisasi). Klik tombol ADD. Biarkan halaman baru yang muncul dalam keadaan default. Selanjutnya Klik Update.


4. Terakhir tambahkan Fields baru dengan memilih CONTENT pada bagian GROUPS, dan contreng CONTENT: TARIF PENTAS (field_tarif_pentas). Lihat gambar dibawah ini yang bertanda panah merah. Klik Add.

Kemudian kita dibawa ke halaman selanjutnya seperti gambar dibawah ini, pada bagian LABEL, biarkan WIDGET LABEL dalam posisi terpilih. Sementara pada bagian FORMAT kita pilih 9.999. Klik Update.


Atur posisi urutan Fields anda dengan menekan tombol seperti yang ditunjukkan oleh panah merah pada gambar dibawah ini. Drag dan drop urutan fields anda pada bagian yang ditunjukkan oleh panah biru. Sedangkan panah hijau menunjukkan bagian fields yang ingin anda delete secara cepat.
Pada tutorial ini kita tidak melakukan action untuk mengatur posisi karena posisi field sudah seperti yang kita inginkan.


IV. SETTING FILTERS.
   Filters adalah menyaring. Settingan Filters yang paling sering digunakan adalah NODE : PUBLISHED dan NODE : TYPE.
1. Klik tanda + pada bagian Filters. Pilih NODE di bagian GROUPS dan contreng NODE: PUBLISHED. Lihat gambar di bawah ini.


Kemudian pilih YES dan tekan tombol Update. Hasilnya, content-content yang masih berupa unpublished tidak akan ditampilkan.

2. Klik tanda + lagi untuk menambahkan Filters baru berupa NODE. Contrengkan NODE : TYPE seperti gambar dibawah ini.

Kemudian pilih IS ONE OF .......(check list) SELEBRITIS. Selanjutnya klik Update.

Sekarang kita sudah menyaring lebih sempit lagi, yaitu views yang akan tampil hanya konten dengan tipe Selebritis, sementara tipe-tipe konten lainnya tidak akan masuk pada Views ini.
V. SETTING SORT.
   Bagaimana content-content hasil views diurutkan, apakah berdasarkan abjad, waktu,...? Apakah pengurutan itu secara ascending atau descending?.... dan bagian fields yang mana yang akan diurutkan. Inilah fungsi bagian Sort.
Mulai dengan klik tanda + dan pilih Node pada bagian Groups. Contreng NODE : TITLE dan kemudian pilih Ascending. Settingan ini nantinya akan menghasilkan urutan conten dengan Title berawalan A yang akan lebih dahulu tampil. Title yang berawalan Z akan muncul terakhir.

VI. MENAMPILKAN HASIL VIEWS (ADD DISPLAY)
1. Sejauh ini, hasil pekerjaan membangun Views masih belum dapat kita lihat hasilnya di salah satu halaman atau block. Untuk itu kita harus menayangkan dengan memilih salah satu bentuk tampilan. Pada kali ini kita mencoba menampilkannya dalam bentuk berupa PAGE (lihat panah merah pada gambar di bawah ini). kemudian klik tombol ADD DISPLAY (panah biru). Setelah itu muncul bagian PAGE SETTINGS dibagian bawah (panah hijau)

2. Klik pada baris PATH : NONE (panah merah pada gambar dibawah ini)

3. Isikan dengan tulisan selebritis_grid. Klik Update.


4. Klik pada baris MENU : NO MENU (panah merah pada gambar dibawah ini), Pilih NORMAL MENU ENTRY, Isikan TITLE: Selebritis Grid, MeENU : Primary Links. Kemudian Klik update.


TERAKHIR, JANGAN LUPA MENEKAN TOMBOL SAVE dibagian paling bawah untuk menyimpan pekerjaan anda hingga sejauh ini.
Nikmati hasilnya dengan mengakses link baru yang terbentuk di bagian primary links.


FASTHAN on http://www.fasthanweb.net

Advertisement