Jl. Tidar 100 Malang 65146 0341 560823 Sugeng Widodo,S.Kom STIKI Materi Workshop Drupal 7
.. Table of Contents Persiapan... 3 Instalasi XAMPP... 3 Download Drupal... 3 Membuat Database... 3 Mulai instalasi... 4 2. Konfigurasi Drupal... 8 Administration... 8 Mengubah Info tentang website... 8 Mengganti Theme... 9 Menggunakan Theme tambahan... 11 3. Mengisi Website... 14 Membuat content Article... 14 4. Mengatur Tataletak... 18 Mengatur Block... 19 Membuat block baru... 20 5. Modul... 22 Mengaktifkan modul... 22 Menambah modul... 22 2
1. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database server (MySql), ftp server (filezilla), dan mail server (Mercury). Intalasi XAMPP dapat didownload pada alamat www.apachefriends.org. Jalankan instalasi XAMPP dan perlu diingat letak instalasi dilakukan. Download Drupal Drupal dapat didownload di alamat drupal.org. Pada workshop ini digunakan Drupal versi 7. Kemudian ekstrak hasil download pada Document Root atau pada tempat yang diinginkan. Pada workshop kita kali ini, ekstrak drupal pada folder C:\xampp\htdocs\drupal Membuat Database Drupal memerlukan sebuah database untuk menyimpan data. Untuk membuat database dapat dilakukan dengan berbagai cara, salah satunya menggunakan phpmyadmin. Aplikasi phpmyadmin telah tersedia di dalam instalasi XAMPP. Dan untuk membuka aplikasi phpmyadmin ini, jalankan web server dan database server terlebih dahulu, kemudian tekan tombol admin disebelah kanan MySql. Atau dengan membuka browser, dan mengetikkan alamat localhost/phpmyadmin. Untuk membuka phpmyadmin Gambar 2-1 Jalankan Apache dan MySql Untuk membuat database baru, cukup dengan menuliskan nama database dibawah tulisan create new database. Dan biarkan kosong (tidak perlu membuat tabel).
.. Gambar 2-2Buat database "drupal" Untuk workshop ini database yang akan kita gunakan sebagai tempat menampung data adalah drupal. Mulai instalasi Instalasi Drupal dilakukan menggunakan web browser, dengan mengisi alamat (pada workshop ini) localhost/drupal. Kemudian web browser akan mengarahkan pada bagian instalasi. Pada bagian instalasi ini perlu diikuti beberapa langkah berikut : 1. Pada pilihan profil, pilih Standard, kemudian klik Save and Continue Gambar 2-3Mulai instalasi 2. Selanjutnya akan ditampilkan pilihan bahasa Gambar 2-4 Pilihan bahasa jika ada 3. Mengatur database, database yang digunakan adalah drupal70, username diisi root, dan kosongkan saja bagian password. Kemudian klik save and continue 4
Gambar 2-5 Atur database yang digunakan 4. Mengatur site. Isikan nama site, email, password, time zone. Setelah itu click and continue.
.. Gambar 2-6 Konfigurasi site Gambar 2-7 Konfigurasi site (lanjutan) 6
5. Langkah terakhir adalah selesai Gambar 2-8 Selesai instalasi 6. klik pada Visite your new site dan. Gambar 2-9 Hasil instalasi
. 2. Konfigurasi. Drupal Administration Drupal memiliki halaman khusus untuk administrasi web. Halaman ini dapat dilakukan melalui menu configuration atau pada alamat http://localhost/drupal/#overlay=admin/config. Mengubah Info tentang website Drupal memberikan fasilitas untuk mengubah Nama website yang telah diatur pada saat instalasi. Pengaturan informasi website ini dapat dilihat pada bagian Site Information dibagian System. Gambar 2-1 Configuration 8
Gambar 2-2 Site information Pada bagian site information ini, terdapat isian Slogan. Tulisan Slogan ini akan ditampilkan dibawah Nama Site (lihat dipojok kanan atas sebelah logo). Mengganti Theme Gambar 2-3 Tampilan slogan Theme adalah penampilan dari sebuah website. Drupal telah menyediakan beberapa bentuk theme. Drupal juga menyediakan Theme tambahan yang dapat digunakan untuk mempercantik website. Untuk memilih theme, dapat dilakukan dengan memilih menu Appearence. Pada bagian appearence ini akan diperlihatkan beberapa theme yang enable dan juga disable. Dan theme yang sekarang aktif adalah theme dengan tulisan default theme, yaitu Bartik.
.. Gambar 2-4 Appearencee Untuk mengganti theme dapat dilakukan dengan memilih tulisan set default atau enable and set default. Selanjutnya kita juga dapat mengganti beberapa attribut dari theme Bartik, seperti warna, logo, slogan, dan lainnya. Untuk mengganti atribut tersebut kita dapat memilih tombol Settings, yang berada dibawah deskripsi dari masing-masing theme. Gambar 2-5 Seting warna dari Bartik Pada bagian ini kita juga diberikan fasilitas untuk mengubah gambar logo dari website. Fasilitas tersebut dapat dilihat dibagian bawah, pada bagian Logo image settings. Apabila kita tidak menggunakan logo default maka akan ditampilkan isian untuk mengubah gambar logo. 10
Gambar 2-6 Menggunakan logo sendiri Global Settings Bagian Global settings digunakan untuk mengatur sifat dari seluruh theme. Misalkan semua site yang dipilih harus mengaktifkan bagian Site slogan, maka pada Global settings harus dicentang bagian Site slogan. Hal ini dapat memudahkan pengaturan seluruh theme yang ada. Karena Drupal mengijinkan sebuah website untuk dapat berganti tampilan (theme). Menggunakan Theme tambahan Tampilan Drupal memang tidak seindah yang kita harapkan. Tetapi ada banyak bentuk tampilan (Theme) yang disediakan di Drupal.org, atau pada tempat lainnya. Untuk dapat menggunakan theme baru tersebut, yang harus dilakukan adalah : Download Theme (jika belum ada), di https://drupal.org/project/themes Masuk ke halaman Appearance Pilih Install new theme Gambar 2-7 Install new theme Masukkan nama file atau url dari theme yang akan ditambahkan (contoh : corporateclean-7.x-2.2.tar.gz)
.. Gambar 2-8 Pilih file theme Kemudian tekan install Gambar 2-9 New Theme Kemudian pilih Enable newly added themes Selanjutnya pilih Enable and set default pada theme yang diinginkan menjadi theme kita 12
Gambar 2-10 enable theme Gambar 2-11Hasil pemilihan theme
. 3. Mengisi. Website Secara default Drupal menyediakan dua bentuk isian. Bentuk pertama adalah Article dan Basic Page. Kedua article ini pada hakikatnya sama yaitu Node (istilah di drupal). Basic Page digunakan untuk mengisi web site dengan isi yang tidak di tampilkan dihalaman depan, dan juga tidak dapat diberi komentar. Sedangkan Article digunakan untuk mengisi web site dengan isi yang akan ditampilkan dihalaman depan dan dapat diberi komentar oleh orang yang telah login. Membuat content Article Untuk membuat content Article, kita dapat memilih menu Add content Article. Gambar 3-1 Tambah content article 14
Gambar 3-2 Create Article Gambar 3-3 Create Article (lanjutan) Ada beberapa opsi yang harus diatur untuk sebuah node (article / basic page). Text format : pembatasan Tulisan yang dapat diterima oleh sistem.
.. Revision information : Memberikan catatan revisi Authoring information : Informasi penulis dan tanggal tulisan dibuat Publishing option : Apakah tulisan akan dipublikasikan, diletakkan di halaman depan, dan atau dijadikan tulisan yang tetap berada di halaman bagian atas halaman (tidak tergeser oleh berita baru). Misalkan kita akan membuat tulisan sebagai berikut : Atur content sebagai berikut : Title : Workshop merakit pc dan instalasi jaringan wireless Body : Dalam rangka memperingati ulang tahun yang pertama tabloid Computer News (CN) dan UKM Hardware Interactive Club (HIC) bekerja sama akan mengadakan workshop merakit pc dan instalasi jaringan wireless atau lebih dikenal dengan wifi pada tanggal 11 dan 12 mei 2007 di labotarium kampus elang yang tercinta ini. Text format : diisi Full HTML Revision information : Create new revision di centang, kemudian Log message diisi Membuat tulisan baru Authoring information : tidak usah diganti Publishing option : Centang pada Published, Promoted to front page, dan pada Sticky on top of lists Kemudian simpan tulisan dengan klik pada tombol Save. 16
Gambar 3-4 Hasil pengisian content article
. 4. Mengatur. Tataletak Tataletak dalam bahasa drupal adalah block Dalam mengelola tampilan terutama tata letak content, drupal melakukannya dengan menggunakan Block. Pada sebuah halaman terdapat bebarapa block yang letaknya tidak sama antara satu theme dengan theme yang lainnya. Untuk melihat letak dari block yang ada dapat dilakukan dengan memilih menu Structure Block Gambar 4-1 Menu Structure Akan ditampilkan Daftar Block dan isi dari block tersebut. Gambar 4-2 Block Pada tampilan Gambar 4-2, terlihat bahwa pada block dengan nama First sidebar berisi : Search form, Navigation, dan User login. Untuk melihat bagian-bagian dan letak block yang terdapat pada theme ini, dapat diklik tulisan Demonstrate block region. 18
Gambar 4-3 Demonstrate block region Mengatur Block Gambar 4-4 Tampilan Demonstrate block region Untuk mengatur block, dapat dilakukan dengan dua cara, yaitu : Memindahkan menggunakan simbol (cara drag drop) Memilih block pada kolom region
.. Yang perlu diingat adalah setelah mengganti letak dari block adalah untuk menyimpan. Karena tampilan tidak akan berubah sebelum konfigurasi block disimpan. Membuat block baru Block baru dibuat untuk tujuan menampilkan informasi yang tidak bertambah seperti halnya content article dan basic page. Contoh informasi yang dapat ditampilkan di block adalah moto. Untuk membuat block baru, pilih add block dibagian atas. Kemudian akan ditampilkan sebuah form untuk diisi. 20
Gambar 4-5 Add block 1 2 Gambar 4-6 Add block (lanjutan) Pada Gambar 4-6 bagian 1 terdapat fasilitas untuk meletakkan block di area tertentu, dan pada bagian 2 terdapat fasilitas untuk mengatur visibility. Visibility artinya block ini akan dapat terlihat pada halaman tertentu sesuai kriteria yang dituliskan.
. 5. Modul. Mengaktifkan modul Drupal menyediakan beberapa modul pendukung, dan banyak dari modul pendukung ini belum di aktifkan. Drupal juga memfasilitasi apabila akan ditambahkan modul lainnya. Modul lainnya dapat dicari di drupal.org. Untuk mengaktifkan Modul dapat dipilih menu modules. Untuk mengaktifkannya cukup memberi tanda di bagian Enabled, kemudian simpan. Menambah modul Untuk menambah modul, ada beberapa langkah yang harus dilakukan : Download Module yang diinginkan dari drupal.org ( minimal tahu alaman urlnya jika terhubung dengan internet) Pilih tulisan install new module Masukkan url dari module tersebut atau masukkan nama file dari modul yang akan diinstall Tekan tombol install 22
Gambar 5-1 Install module Gambar 5-2 Install module (lanjutan) Pilih Enable newly added modules, maka akan ditampilkan daftar module yang dapat diaktifkan. Tetapi jika terdapat kekurangan module, maka kita diminta untuk menginstal modul yang kurang tersebut. Pada contoh Gambar 5-3 terlihat bahwa module views kita membutuhkan module dengan nama Ctools. Gambar 5-3 Kekurangan module pendukung Setelah diaktifkan maka kita telah dapat menggunakan module tersebut
.. Masing-masing modul memiliki cara penggunaan yang berbeda-beda. Petunjuk untuk menggunakan module dapat dilihat pada web drupal.org. 24