MODUL 9 DAN 10

WEB BLOG

A. TUJUAN
1. Mahasiswa mampu mengenal teori dasar Web Blog.
2. Mahasiswa mampu membuatWeb Blog sesuai prosedur.

B. PETUNJUK
1. Awali setiap aktivitas dengan doa, semoga berkah dan memperoleh kemudahan.
2. Pahami tujuan, dasar teori serta latihan pada modul dengan baik.
3. Kerjakan tugas-tugas modul dengan baik, sabar, dan jujur.

C. TEORI DASAR
1. Instalasi Web Server
APA ITU PEMROGRAMAN WEB BERBASIS SERVER...???
Web server merupakan software dalam server yang berfungsi untuk
menerima permintaan request berupa halaman web melalui HTTP atau HTTPS
dari klien yang dikenal dengan web browser, dan mengirimkan kembali hasilnya
dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.
Beberapa web server yang digunakan di internet antara lain:
 Apache web server (dapat dijalan di Windows maupun Linux).
 Internet Information Services (hanya dapat dijalankan di windows).
 Xitami web server.
 Sun Java system web server.

Server Side Scripting

Adalah merupakan sebuah teknologi scripting atau pemrograman web di mana
skrip dikompilasi atau diterjemahkan di server. Dengan Server Side Scripting
memungkinkan untuk menghasilkan halaman web yang dinamis.
Beberapa contoh server side scripting (programming) yaitu:
 ASP (Active Server Page).
 Coldfusion.
 Java Server Page
 Perl
 Phyton
 PHP

Paket Web Server Apache

Dari beberapa web server yang sudah dijabarkan di atas, maka
pembahasan lebih dalam pada buku ini adalah tentang Apache, karena
pembahasan selanjutnya tentang skrip web yang akan dibahas pada buku ini
yaitu PHP.
Dalam pengembangannya, apache tersedia dalam beberapa paket web
server. Paket web server biasanya terdiri dari:
  Apache (sebagai web server).
 MySql (sebagai aplikasi basis data).
 Mercury (sebagai mail server)
 Filezila (sebagai aplikasi upload – download)
Paket-paket web server yang ada sudah banyak tersedia
antara lain:
 XAMPP.
 LAMPP.
 WAMPP.
 PHP triad.
 Application Server.
Pada pembahasan ini kita akan fokuskan pada paket XAMPP.

Instalasi Web Server (XAMPP)

Langkah-langkah instalasi XAMPP adalah sebagai berikut:
1. Siapkan file: xampp-win32-1.6.7-installer.
Kemudian bukalah file tersebut dengan melakukan double click,
sehingga akan menampilkan jendela sebagai berikut:

Setelah itu pilih bahasa instalasi yang akan digunakan, kemudian pilik
Ok, maka akan menuju jendela sebagai berikut:

Setelah itu klik Next, maka akan menampilkan setting peletakan folder
tempat
XAMPP berada, sebagai berikut:
 Kemudian klik Next, maka akan menampilkan jendela permintaan section
service yang akan kita install yang terdiri dari Apache, MySQL, dan Filezilla, yaitu
sebagai berikut:

Kemudian klik Next, maka akan menampilkan proses instalasi sebagai berikut:

Setelah selesai klik Next, maka akan menampilkan proses

konfigurasi apache sebagai berikut:
 Kemudian akan ditampilkan jendela konfirmasi bahwa XAMPP selesai
diinstal seperti pada gambar berikut:

Kemudian melakukan proses checking port ntuk persiapan setting MySQL,

seperti pada gambar di bawah ini:

Kemudian akan muncul jendela informasi penggunaan control panel,

seperti gambar berikut:

Jika berhasil maka muncul jendela konfirmasi setting kontrol panel sukses
dan sekaligus permintaan apakah akan membuka control panel.

Jika menekan Yes, maka akan menampilkan jendela control panel XAMPP.
Warna hijau dengan tulisan “Running” itu menandakan bahwa apache dan mysql
sudah dapat digunakan.
 Untuk mengetes apakah Apache sudah bisa digunakan, kita dapat
membuka browser mozilla firefox, kemudian pada address bar diketikkan
http://localhost dan tekan enter, maka akan mencul tampilan sebagai berikut:

Kemudian untuk mengetes MySql, langkah yang dilakukan adalah

mengetikkan http://localhost/phpmyadmin, sehingga akan menampilkan
jendela sebagai berikut:

3.2. Instalasi Wordpress

Langkah-langkah:
Ada beberapa persiapan dan langkah dalam melakukan instalasi wordpress,
yaitu sebagai berikut:
Menyiapkan sumber wordpress
offline
Sebelum memulai langkah instalasi wordpress, kita harus memiliki source /
sumber cms wordpress. Sumber wordpress dapat diperoleh di
http://wordpress.org/download, seperti gambar berikut:

Download
disini

Setelah selesai di download, kemudian file diekstrak. Hasil ekstrak disimpan dalam
folder HTDODC, seperti gambar berikut.

Folder :
wordpress

Diganti :

wp-config.php

dalam contoh, folder sumber diberi nama wordpress , sehingga pemanggilan

dalam URL menjadi http://localhost/wordpress . Kemudian file wp-config-
sample.php diganti wp-config.php .

Membuat Database
Langkah selanjutnya membuat database yang nantinya menjadi database master
dari wordpress yang kita bangun. Seperti pada gambar berikut:
 Dalam gambar di atas, sudah berhasil dibuat database dengan nama
wordpress. Untuk selanjutnya dilakukan setting database pada wp-config.php
yang menyesuaikan identitas dari database, hostname mysql, serta username
dan passwordnya. Seperti gambar berikut:

Pada contoh gambar di atas, database name= wordpress, database user = root,
password= kosong, database host = localhost. Value-value yang disebutkan ini
menyesuaikan kondisi yang ada.

Membuka URL wordpress

Setelah langkah di atas selesai dilakukan, maka kita sudah dapat
membuka url wordpress untuk memulai instalasi. Alamat url yang dibuka adalah
menyesuaikan nama folder wordpress yang sudah kita letakkan pada langkah
sebelumnya. Maka pada contoh ini alamat url yang dipanggil adalah
http://localhost/wordpress sehingga akan menampilkan halaman seperti gambar
berikut:
 Pada halaman ini, terdapat permintaan pengisian identitas wordpress
antara lain: site title, username, password, dan email. Setelah selesai diisi
semua, maka langkah selanjutnya klik tombol Install Wordpress. Jika proses
tersebut berhasil, maka akan menampilkan seperti gambar berikut:

Login wordpress
Langkah selanjutnya adalah melakukan login situs wordpress. Dari
halaman sebelumnya diklik login, sehingga menampilkan halaman sebagai
berikut:
Setelah login berhasil maka akan menampilkan halaman sebagai berikut:

situs awal hasil setting pada saat instalasi adalah sebagai berikut:

3.3. Mengelola Konten

Langkah-langkah: Mengelola Template.
Di komunitas wordpress telah tersedia jutaan template yang bisa kita
unduh secara gratis. Setelah di unduh, kita dapat memakai template tersebut
untuk CMS yang kita miliki. Alamat tempat mengunduh dapat dibuka
http://wordpress.org/extend/themes/. Dan akan disajikan cara mengunduhnya.
 Tempat
download

Setelah web dibuka, kita bisa memilih tema mana yg kita suka.
Jika ingin mengunduh , klik tombol download pada area jenis tema yang akan
kita unduh.

Setelah selesai diunduh, maka file diekstrak dan disimpan ke

dalam folder htdocs\wordpress\wp-content\themes, seperti gambar berikut:
Kemudian untuk menggunakan tema yang sudah kita install, masuk ke
dashboard -> appearance -> themes , sehingga akan masuk ke menu dibawah
ini:

Pada gambar diatas terlihat bahwa tema News 0.2 yang sudah dipasang, siap
untuk digunakan. Untuk mengaktifkannya, klik menu Active. Hasil dari perubahan
dapat dicek dengan klik wordpress-> visit site.

Membuat
Menu.
Untuk membuat menu, dimulai masuk di dashboard -> page , maka akan
terdapat pilihan all page (menampilkan keseluruhan page yang sudah dibuat) dan
add new (membuat baru). Maka pilihlah add new. Sehingga akan tampil
halaman sebagai berikut:

Klik
Publish
Setelah klik publish maka bisa dilihat hasilnya sebagai berikut:

Modifikasi Template.
Ketika template sudah dipasang, dan kita ingin memodifikasi beberapa
tampilan, maka di wordpress memungkinkan untuk dilakukan hal tersebut.
Tetapi akan lebih maksimal jika kita memiliki kemampuan di pemrograman
HTML, PHP, dan CSS. Namun bagi yang awam dengan beberapa pemrograman
tersebut, berikut akan disajikan salah satu cara untuk memodifikasi template
yang bisa membantu memberi referensi. Berikut ini adalah cara mengganti
gambar yang ada pada header (kepala halaman). Masuk pada Appearance ->
editor -> cari file style.css , yang berada di sebelah kanan bawah.

Jika sudah berhasil maka akan tampil script css yang merupakan salah
satu script pembangun dari template yang dimaksud.
Kemudian dari file tersebut, cari script seperti berikut:

#header{overflow:hidden;height:155px;

background:url(nama_file_gambar) repeat-x 0 -38px}

Untuk mengganti gambar, letakkan gambar pada folder image yang ada pada
themes yang akan diganti , contoh:
D:\xampp\htdocs\wordpress\wp-content\themes\news\images\shirtship.gif

Kemudian nama_file_gambar diganti dengan file gambar baru misal

shirtship.gif . Jadi scriptnya menjadi seperti berikut:

#header{overflow:hidden;height:155px;

background:url(shirtship.gif) repeat-x 0 -38px}

Setelah selesai kemudian klik Update file seperti berikut:

Jika berhasil, maka gambar yang kita pasang akan ditampilkan di header dari
themes yang kita ubah, seperti gambar berikut:

Membuat Posting Berita.

Berikut adalah cara melakukan posting berita. Langkahnya dimulai dari post ->
add new sehingga akan menampilkan halaman sebagai berikut:

Setelah diisi judul dan isinya, maka kita bisa mulai mempublikasikan dengan cara
klik publish, sehingga akan menampilkan halaman sebagai berikut:
MODUL 9 DAN 10
WEB BLOG