sugeng widodo,s.kom stiki. instalasi drupal persiapan instalasi xampp xampp adalah suatu aplikasi...

24
Sugeng Widodo,S.Kom STIKI Materi Workshop Drupal 7 Jl. Tidar 100 Malang 65146 0341 560823

Upload: hathu

Post on 28-Mar-2019

228 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

Sugeng Widodo,S.Kom

STIKI

Materi Workshop Drupal 7

Jl. Tidar 100 Malang 65146

0341 560823

Page 2: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

2

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

Page 3: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

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”.

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

Untuk membuka

phpmyadmin

Page 4: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

4

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”

Page 5: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

Gambar 2-5 Atur database yang digunakan

4. Mengatur site.

Isikan nama site, email, password, time zone. Setelah itu click and continue.

Page 6: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

6

Gambar 2-6 Konfigurasi site

Gambar 2-7 Konfigurasi site (lanjutan)

Page 7: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

5. Langkah terakhir adalah selesai

Gambar 2-8 Selesai instalasi

6. klik pada “Visite your new site” dan ….

Gambar 2-9 Hasil instalasi

Page 8: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

8

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

Page 9: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

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

Gambar 2-3 Tampilan slogan

Mengganti Theme

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.

Page 10: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

10

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.

Page 11: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

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)

Page 12: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

12

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

Page 13: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

Gambar 2-10 enable theme

Gambar 2-11Hasil pemilihan theme

Page 14: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

14

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 contentArticle.

Gambar 3-1 Tambah content article

Page 15: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

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.

Page 16: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

16

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 :

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.

Atur content sebagai berikut :

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.

Page 17: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

Gambar 3-4 Hasil pengisian content article

Page 18: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

18

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 StructureBlock

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.

Page 19: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

Gambar 4-3 Demonstrate block region

Gambar 4-4 Tampilan Demonstrate block region

Mengatur Block

Untuk mengatur block, dapat dilakukan dengan dua cara, yaitu :

Memindahkan menggunakan simbol (cara drag drop)

Memilih block pada kolom region

Page 20: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

20

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.

Page 21: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

Gambar 4-5 Add block

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.

1

2

Page 22: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

22

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

Page 23: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

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

Page 24: Sugeng Widodo,S.Kom STIKI. Instalasi Drupal Persiapan Instalasi XAMPP Xampp adalah suatu aplikasi yang didalamnya terdapat beberapa server, antara lain web server (Apache), database

. . . . . . .. . .

24

Masing-masing modul memiliki cara penggunaan yang berbeda-beda. Petunjuk untuk menggunakan

module dapat dilihat pada web drupal.org.