membangun cms portal tanpa opp

5/20/2018 Membangun CMS POrtal Tanpa OPP

1/50

Bab 8

Proyek Membangun CMS tanpa OOP

Cerita dikit ya, ketika hampir menyelesaikan buku ini, secara tidak sengaja

penulis menemukan sebuah proyek yang pernah penulis kerjakan beberapa tahun

yang lalu untuk sebuah universitas.Menariknya, penulis hanya membuat sebuah CMS yang dapat digunakan

berkali-kali untuk masing-masing fakultas (7 fakultas) plus satu portal utama

untuk universitas, hanya header, warna, dan datanya saja yang berbeda, padahal

core(inti) program CMSnya sama saja.

Terus terang, saat itu sebagai programmer freelance, penulis dibayar lima juta

untuk satu fakultas (kalau ada delapan website, dikalikan lima juta, kan lumayan

tuh). Tidak hanya sampai disitu, beberapa bulan setelah proyek selesai, penulis

ditawari lagi untuk membuat website suatu instansi, toko hp serta profil bank,

sehingga penulis gunakan lagi CMS tersebut, maka dalam beberapa jam saja,

proyek langsung kelar, dengan catatan data-datanya sudah terkumpul.

Dari pengalaman tersebut, penulis ingin membeberkan rahasia cara pembuatan

CMS tersebut untuk Anda semua secara gratis, semoga dapat digunakan secara

luas.

Asyiknya, proyek CMS yang penulis buat saat itu belum mengandung OOP

(Object Oriented Programming) sedikit pun, karena OOP masih dianggap

sebagai monster menyeramkan untuk pemula, tapi tentu saja CMSnya tetap

handal. Tujuan utamanya agar mudah dipahami, dipelajari dan dimodifikasi oleh

programmer pemula, sekalipun baru memiliki sedikit pengetahuan tentang PHP.

Tentunya hal ini terbatas pada proyek kelas menengah ke bawah, seperti e-

Government, portal perusahaan, universitas atau instansi/lembaga, portal berita,

blog dan lain-lain. Dan belum bisa digunakan untuk proyek yang sangat

kompleks, seperti Sistem Informasi Akademik, e-Commerce, Friendster atau

Aplikasi Webmail (Gmail atau YahooMail).

Apabila Anda ingin langsung menggunakannya juga bisa, karena di CD

disertakan semua source code dan video tutorial tentang cara

mengkustomisasinya, sehingga hanya dengan melakukan sedikit modifikasi

(sesuaikan dengan proyek yang sedang Anda garap), maka dalam hitungan

menit terciptalah sebuah aplikasi web yang profesional.

1


2/50

Oke langsung aja, kita mulai dengan membuat CMS (Content Management

System) untuk Admin yang akan mengelola isi (content) website yang nantinya

nantinya akan dilanjutkan dengan membuat front-end yang akan ditampilkan

kepada publik (khalayak pengunjung). Silahkan simak trik-trik berikut ini:

Trik 60. Mempersiapkan Folder Proyek

Sebelum memulai proyek, ada baiknya kita persiapkan terlebih dahulu foldernya

agar file-file proyek dapat terorganisir dengan baik, karena biasanya sebuah

proyek tersimpan dalam satu folder, kemudian didalamnya dibuatkan lagi folder-folder untuk menyimpan file-file gambar, konfigurasi, dan admin. Untuk lebih

jelasnya, susunan folder proyek ini dapat dilihat pada gambar 8.1.

Gambar 8.1 Susunan folder sebuah proyek aplikasi web

Folder utama diberi nama lukman01, kemudian didalamnya terdapat tiga folder,

yaitu folder images untuk menyimpan file gambar desain web (halaman untuk

pengunjung), folder config untuk menyimpan file style (CSS), library (fungsi),

koneksi, JavaScript, dan terakhir yaitu folder adminuntuk menyimpan file-file

skrip admin untuk mengelola content website.

2


3/50

Adapun didalam folder admin juga terdapat dua buah folder, yaitu folder images

untuk menyimpan file gambar desain web admin dan folder foto_beritauntuk

menyimpan file gambar dari content berita yang di upload user.

Trik 61. Membuat Database dan Merelasikan antarTabel

Dalam sebuah proyek aplikasi web, biasanya dalam suatu database terdapat

beberapa tabel, dimana menurut aturan relational databasemenyatakan bahwa

antara satu tabel dengan tabel lainnya saling berelasi yang dihubungkan olehsebuah kunci unik atau primer (Primary Key), karena idealnya suatu tabel

pastilah mempunyai kunci unik sebagai pembeda antara satu data dengan data

lainnya, misalnya nim mahasiswa, nip pegawai, kode barang, isbn buku, atau

nomor faktur. Disamping itu, kunci primer dapat berfungsi untuk mempercepat

akses database, melakukan pengurutan, index, dan pencarian data.

Dalam proyek ini, untuk sementara kita membutuhkan empat buah tabel dulu,

yaitu tabel user, tabel berita, tabel kategori (untuk kategori berita), dan tabel

agenda. Dimana keempat tabel tersebut saling berelasi, silahkan lihat gambar

8.2.

3


4/50

Gambar 8.2 Relasi antar tabel

Relasi yang dianut tabel-tabel diatas adalah relasi One-to-Many, misalnya relasi

antara tabel user dan tabel berita yang dihubungkan oleh field username, dalam

konteks One-to-Many, maka seorang user dapat menulis banyak berita (tidak

bisa sebaliknya).

Tanda * menandakan bahwa field tersebut merupakan kunci primer dalam suatu

tabel. Tanda ** menandakan bahwa field tersebut merupakan kunci secondary

(kunci tamu) yang menghubungkan antara satu tabel dengan tabel lainnya.

Berdasarkan pada gambar 8.2, maka didalam database yang kita beri nama

dbmediaterdapat empat buah tabel, namun untuk latihan ini, kita membuat tiga

buah tabel dulu dengan struktur masing-masing sebagai berikut:

4


5/50

Struktur Tabel user

Struktur Tabelberita

Struktur Tabelkategori

5


6/50

Catatan:

Cara pembuatan database dan tabel tidak dibahas di buku ini, untuk lebih

praktisnya, gunakan phpMyAdmin. Cara penggunaannya, silahkan lihat e-book

pdf di dalam CD yang disertakan.

Trik 62. Pentingnya Membuat File Koneksi Terpisah

Untuk bisa mengakses database, kita harus melakukan koneksi terlebih dahulu

ke server MySQL. Sebaiknya skrip untuk melakukan koneksi dibuat terpisah

atau tersendiri dalam sebuah file, karena setiap kali kita akan mengolah data di

database, maka kita harus selalu melakukan koneksi terlebih dahulu.

Disamping itu, ada yang lebih penting lagi, hal ini biasanya terjadi ketika kita

melakukan proses upload file-file skrip PHP di Internet untuk keperluan online,

maka biasanya Username dan Password akan ditentukan oleh web hosting.

Sekarang coba bayangkan, apabila Anda mempunyai sepuluh file, maka Anda

harus mengganti username dan password sebanyak sepuluh kali, gimana kalau

seratus file? Alangkah sangat merepotkan. Nah, dengan memisah file koneksi

tersendiri dalam sebuah file, maka kita hanya perlu melakukan perubahan

username dan passwordnya cukup sekali, praktis kan ..

Oke, sekarang mari kita buat file koneksinya sebagai berikut:

Skrip koneksi.php

Simpan file koneksi.php di folder lukman01/config/.

Trik 63. Input User

Modul pertama yang akan kita buat adalah modul user yang meliputi input,

view, edit dan hapus user.

Pada bagian input user, ada hal penting yang dipelajari, yaitu selain proses input

data, juga mengenkripsi password yang dimasukkan user. Adapun metode

enkripsi yang akan kita gunakan adalah MD5, dimana password (baik angka

6


7/50

maupun huruf) akan dienkripsi secara acak menjadi 32 karakter. Untuk lebih

jelasnya, tulislah dua buah skrip berikut:

Skrip form_user.php


8/50

Gambar 8.3 Hasil skrip form_user.php

Untuk sementara, jangan di klik dulu tombol Simpan, karena pada trik

berikutnya kita akan membuat skrip tampil user terlebih dahulu untuk

menampilkan data user yang di inputkan.

Tips dan Catatan Programmer:

Sebaiknya tambahkan validasi pada skrip input_user.php. Jadi, sebelum data

disimpan di database, cek terlebih dahulu datanya, misalnya username tidak

boleh dikosongkan atau format email harus benar atau tidak boleh ada spasi

saat input username dan password.

Untuk menghindari double username, sebaiknya buat fungsi untuk

melakukan cek apakah username tersebut sudah ada di database, kalau tidak

ada baru boleh disimpan di database.

8


9/50

Trik 64. Tampil User

Untuk menampilkan hasil dari input user, buatlah skrip berikut:

Skrip tampil_user.php


10/50

Untuk menginput user lagi, silahkan klik tombol Tambah User.


Link untuk email agak berbeda dengan link biasa, karena ada tambahan

mailto, setelah a href. Hal tersebut dimaksudkan agar ketika link email

diklik, maka akan langsung tampil form untuk mengirimkan email.

Enkripsi password biasanya tidak ditampilkan secara langsung di tampil user.

Tapi, Anda tetap bisa melihat hasil enkripsinya melalui phpMyAdmin padatabel user seperti terlihat pada gambar 8.5.

Gambar 8.5 Hasil enkripsi password dengan metode MD5

Metode enkripsi MD5 bersifat one-way hashing, artinya hasil enkripsinyatidak bisa dikembalikan ke data aslinya, sehingga meskipun seorang admin

dapat membuka tabel user secara langsung melalui phpMyAdmin, tapi tetap

tidak bisa melihat password asli user. Sekarang mungkin Anda bertanya,

bagaimana seandainya user lupa passwordnya? Dan apa yang bisa dilakukan

admin untuk membantu user tersebut? Solusinya sederhana, admin akan

membuatkan/memberikan password baru kepada user. Inilah yang akan kita

bahas pada trik berikutnya mengenai edit user dan passwordnya.

O iya, khusus untuk user admin, inputkan datanya secara manual melalui

phpMyAdmin, karena semua user yang di inputkan melalui form_user.php

secara otomatis levelnya akan terisi user (default). Dalam perkembangan

selanjutnya, kita bisa mengembangkan menjadi beberapa level user lagi yang

lebih kompleks, misalnya user 1 hanya bisa melihat data saja tanpa bisamengedit dan menghapus atau user 2 hanya bisa mengakses modul berita dan

agenda saja, dan seterusnya.

10


11/50

Trik 65. Edit User

Untuk mengedit user, buatlah dua buah skrip berikut:

Skrip edit_user.php


12/50

Pada halaman tampil user, misalnya data sembung akan di edit, maka silahkan

klik link Edit (lihat lagi gambar 8.4), maka akan tampil halaman edit user, ganti

beberapa data yang akan di edit, contohnya seperti pada gambar 8.6.

Gambar 8.6 Hasil skrip edit_user.php

Kemudian klik tombol Update, maka hasil perubahan datanya akan langsung

ditampilkan di halaman tampil user. Lihat gambar 8.7.

12


13/50

Gambar 8.7 Hasil perubahan data di halaman tampil user

Trik 66. Hapus User

Untuk menghapus user, buatlah skrip berikut:

Skrip hapus_user.php

Pada halaman tampil user (lihat lagi gambar 8.7), silahkan klik link Hapus,

misalnya untuk data nomor 3, maka data tersebut akan terhapus dari daftar user.

Untuk modul user kita cukupkan sampai disini, sekarang kita lanjut ke modul

berikutnya yaitu modul berita.

Trik 67. Login dengan Teknik Session

Sebelum membuat modul berita, sebaiknya kita membuat skrip untuk login

terlebih dahulu agar user yang mengakses modul berita adalah user yang benar-

benar sudah terdaftar di sistem.

Adapun login akan dibuat menggunakan teknik session, yaitu suatu teknik

penyimpanan variabel (mendaftarkan/register suatu variabel) ke server. Contoh

yang sering kita jumpai adalah ketika kita akan membuka inbox email, tentu kita

harus menginputkan username dan password, apabila ditemukan datanya di

database (valid), maka akan dibuatkan session username dan password untuk

mengakses inbox dan selama user berada dalam sesi tersebut, maka dia akan

bebas mengakses emailnya sampai dia memutuskan untuk mengakhiri sesi

tersebut dengan mengklik Sign out atau Logout (logout.php). Untuk lebih

jelasnya, tulislah tiga buah skrip berikut:

Skrip form_login.php


14/50

";?>

Skrip cek_login.php

Skrip logout.php

Sekarang jalankan skrip form_login.php, silahkan isi username dan password,

contohnya seperti pada gambar 8.8.

14


15/50

Gambar 8.8 Hasil skrip form_login.php

Untuk sementara, jangan di klik dulu tombol Login, karena kita belum membuat

modul berita yang akan kita buat pada trik berikutnya.

Trik 68. Input Berita

Pada input berita, ada dua hal yang telah kita pelajari sebelumnya yang akan

diterapkan, yaitu menampilkan kategori yang telah ada di database dalam bentuk

combobox (trik 49) dan mengupload gambar serta menyimpan informasinya di

database (trik 28).

Disamping itu, kita akan melanjutkan teknik session untuk memeriksa apakah di

server sudah terdapat variabel session dari user yang sah, dalam contoh trik ini

variabel sessionnya bernama namauser dan passuser. Untuk lebih jelasnya,tulislah tiga buah skrip berikut:

Skrip library.php


16/50

$hari_ini = $seminggu[$hari];

$tgl_sekarang = date("Ymd");$thn_sekarang = date("Y");$jam_sekarang = date("H:i:s");

$nama_bln=array(1=> "Januari", "Februari", "Maret", "April","Mei","Juni", "Juli", "Agustus", "September","Oktober", "November", "Desember");

?>

Skrip form_berita.php


17/50

$lokasi_file = $_FILES['fupload']['tmp_name'];$nama_file = $_FILES['fupload']['name'];

// Apabila ada gambar yang diuploadif (!empty($lokasi_file)){move_uploaded_file($lokasi_file,"foto_berita/$nama_file");mysql_query("INSERT INTO berita(judul,

id_kategori,isi_berita,id_user,jam,tanggal,hari,

gambar)VALUES('$_POST[judul]','$_POST[kategori]','$_POST[isi_berita]','$_SESSION[namauser]','$jam_skrg','$tgl_skrg','$hari_ini','$nama_file')");

}// Apabila tidak ada gambar yang diuploadelse{mysql_query("INSERT INTO berita(judul,

id_kategori,isi_berita,id_user,jam,tanggal,hari)

VALUES('$_POST[judul]','$_POST[kategori]','$_POST[isi_berita]','$_SESSION[namauser]','$jam_skrg','$tgl_skrg','$hari_ini')");

}header('location:tampil_berita.php');?>

Untuk melakukan tes terhadap session, apakah sudah berfungsi dengan baik,

silahkan jalankan skrip form_berita.php, maka akan tampil peringatan seperti

pada gambar 8.9.

17


18/50

Gambar 8.9 Peringatan apabila mengakses modul berita tanpa login

Maka user harus login terlebih dahulu dengan mengklik link LOGIN, maka akan

tampil halaman login (lihat lagi gambar 8.8), isikan username dan password,

apabila valid, maka akan tampil halaman input berita, isikan data berita,

contohnya seperti pada gambar 8.10.

18


19/50

Gambar 8.10 Hasil skrip form_berita.php

Untuk sementara, jangan di klik dulu tombol Simpan, karena pada trik

berikutnya kita akan membuat skrip tampil berita terlebih dahulu untuk

menampilkan data berita yang di inputkan.


Mengapa terdapat data-data kategori pada combobox kategori, karenasebelumnya penulis telah menginputkan beberapa data kategori, hal ini bisa

dilakukan melalui phpMyAdmin atau buat sendiri skrip untuk modul

kategori.

Skrip library.php disimpan di folder lukman01/config/, didalam skrip

tersebut terdapat beberapa fungsi yang nantinya akan digunakan pada skrip

19


20/50

input_berita.php dan skrip lain yang berhubungan dengannya, seperti

mendapatkan hari ini, tgl sekarang, dan lain-lain.

Setiap halaman yang terdapat perintah session, maka di bagian paling atas

dari skrip harus terdapat perintah: session_start(), begitu juga dengan

skrip input_berita.php, karena akan memasukkan username yang diambil

dari variabel session di server yaitu: $_SESSION[namauser].

Sebaiknya tentukan ukuran dimensi gambar, agar ukurannya tidak terlalu

besar, sehingga tidak mengganggu tampilan. Atau bisa juga dengan

mencegah user apabila mengupload gambar yang melebihi ukuran dimensi

yang telah ditentukan (trik 32).

Sebelum gambar di upload ke server, Anda bisa memeriksa apakah file yang

di upload benar-benar file gambar (trik 31).

Apabila di server telah terdapat file gambar dengan nama yang sama, maka

akan terjadi overwrite file, artinya gambar yang lama akan hilang digantikan

oleh gambar baru yang sama nama filenya. Sebaiknya buatlah nama file

gambar yang unik sebelum di upload ke server (trik 34).

Apabila upload file mengalami masalah atau error, silahkan lihat cara

penanganannya pada trik 37.

Trik 69. Tampil Berita

Pada halaman tampil berita, user hanya bisa menampilkan berita yang di posting

oleh dirinya sendiri dan tidak bisa menampilkan apalagi mengedit berita yang di

posting oleh user lain, kecuali level user Anda adalah admin, maka tentu saja

Anda bisa menampilkan semua berita yang ada di database.

Disamping itu, karena kita akan menampilkan tanggal dalam format bahasa

indonesia, maka copykan dulu file fungsi_indotgl.phpyang telah kita buat pada

trik 53 ke folder lukman01/config/. Selanjutnya, buatlah skrip berikut

Skrip tampil_berita.php


21/50

nojudultgl. postingaksi";

$tampil=mysql_query("SELECT * FROM beritaWHERE id_user='$_SESSION[namauser]'ORDER BY id_berita DESC");

$no=1;while ($r=mysql_fetch_array($tampil)){$tgl_posting=tgl_indo($r[tanggal]);echo "$no

$r[judul]$tgl_postingEdit |

Hapus";$no++;

}echo "";?>

Setelah Anda menjalankan form_berita.php dan mengisikan data-datanya, lalu

klik tombol Simpan (lihat lagi gambar 8.10), maka hasilnya akan langsung

dapat ditampilkan oleh skrip tampil_berita.php seperti pada gambar 8.11.

Gambar 8.11 Hasil skrip tampil_berita.php

Untuk menginput berita lagi, silahkan klik tombol Tambah Berita.


Semua file gambar akan tersimpan di folder lukman01/admin/foto_berita/.

Folder tersebut telah kita buat pada trik 60.

Sebenarnya ada teknik yang dapat menyimpan data gambar/foto di dalam

database MySQL dengan tipe field BLOB, namun cara tersebut kurang

21


22/50

cocok untuk digunakan dalam aplikasi online, karena akan membebani

kinerja database, sehingga memperlambat akses suatu aplikasi web.

Apabila data berita sudah banyak, puluhan bahkan ratusan data, tentu tidak

efektif untuk ditampilkan semua, sebaiknya gunakan navigasi halaman

dengan teknik paging. Untuk lebih praktisnya, silahkan gunakan class paging

yang telah kita buat pada trik 16.

Trik 70. Edit Berita

Pada bagian edit berita, ada dua hal yang perlu diperhatikan, yaitu bagaimana

cara mengedit combobox agar tidak tampil data yang sama/double data (trik 50)

dan bagaimana menampilkan gambar yang akan di edit. Untuk lebih jelasnya,

buatlah dua buah skrip berikut:

Skrip edit_berita.php


23/50

: Ganti Gambar : *)*) Apabila gambar tidak diubah,dikosongkan saja.";?>

Skrip update_berita.php

Pada halaman tampil berita, misalnya data zidane akan di edit, maka silahkan

klik link Edit (lihat lagi gambar 8.11), maka akan tampil halaman edit berita,

ganti beberapa data yang akan di edit, contohnya seperti pada gambar 8.12.

23


24/50

Gambar 8.12 Hasil skrip edit_berita.php

Kemudian klik tombol Update, maka hasil perubahan datanya akan langsung

ditampilkan di halaman tampil berita.

24


25/50

Untuk menghapus berita hampir sama skripnya dengan hapus user, cukup

sesuaikan dengan nama tabelnya saja.

Trik 71. Modul Agenda

Ada satu hal yang perlu Anda pelajari sebelum membuat modul Agenda, yaitu

menampilkan tanggal (termasuk bulan dan tahun) dalam bentuk combobox,

silahkan lihat trik 51. Cara tersebut dapat menghindarkan user dari kesalahan

penulisan format tanggal.

Namun, untuk meringkas penulisan skrip, sebaiknya kita menggunakan fungsi

combobox yang telah kita buat pada trik 56, oleh karena itu copykan dulu file

fungsi_combobox.phpke folder lukman01/config/. Selanjutnya, buatlah skrip-

skrip untuk modul agenda (input, edit, delete, dan view/tampil), Anda dapat

menemukannya dalam CD. Salah satu tampilan form dari modul Agenda dapat

dilihat pada gambar 8.13.

25


26/50

Gambar 8.13 Salah satu tampilan modul form agenda

Trik 72. Modul Banner

Modul banner hampir sama dengan modul berita, intinya hanya upload gambar

ke server, silahkan pelajari lagi pembuatan modul berita (trik 68 s/d trik 70) atau

langsung lihat skrip yang telah penulis sertakan di CD. Salah satu tampilan form

dari modul Banner dapat dilihat pada gambar 8.14.

26


27/50

Gambar 8.14 Salah satu tampilan modul form banner

Trik 73. Modul Hubungi Kami [reply e-mail]

Modul Hubungi Kami adalah tempat untuk menampung email yang dikirimkan

pengunjung melalui website kita. Jadi, inti dari modul hubungi kami adalah

membalas (reply) email kepada pengunjung website yang menghubungi secara

online. Seperti sebelumnya, semua skripnya dapat Anda temukan di CD dan

salah satu tampilan form dari modul hubungi kami dapat dilihat pada gambar

8.15.

27


28/50

Gambar 8.15 Salah satu tampilan modul form Hubungi Kami

Trik 74. Manajemen Modul

Meskipun kita hanya membuat modul-modulan (modul beneran dibuat

menggunakan OOP), tapi jangan khawatir karena untuk keperluan proyek

menengah ke bawah sudah memenuhi kebutuhan kok. Oke, langsung saja,

namun sebelum membuat manajemen modul, kita persiapkan terlebih dahulu

tabel modul di database dbmediadengan struktur sebagai berikut:

28


29/50

Struktur Tabelmodul

Setelah terbentuk tabel modul, silahkan isi datanya (apabila belum membuat

skripnya, Anda bisa mengisikan langsung datanya melalui phpMyAdmin).

Contoh datanya dapat dilihat pada gambar 8.16.

Gambar 8.16 Contoh data pada tabel modul

29


30/50

Catatan Programmer:

Field static_content dan field gambar dikosongkan saja terlebih dahulu.

Field link berisi link untuk mengakses suatu modul, tapi mengapa isinya

seperti itu, nanti akan dijelaskan pada trik.

Field urutan berfungsi untuk mengurutkan (mengatur/mengubah urutan) dari

suatu modul.

Field publish yang bertipe ENUM hanya berisi dua nilai, yaitu Y dan N,

artinya apabila nilai suatu modul Y, maka modul tersebut dapatdiakses/dilihat oleh user umum di menu utama (lihat trik ), sedangkan nilai N

berarti modul tersebut hanya dapat diakses/ditampilkan untuk halaman

administrator saja.

Field status yang juga bertipe ENUM hanya berisi dua nilai, yaitu user dan

admin, artinya apabila status suatu modul user, maka modul tersebut dapat

diakses oleh user biasa, sedangkan apabila status admin, maka modul

tersebut hanya dapat diakses oleh admin.

Trik 75. Merancang Desain Halaman Login

Setelah selesai membuat CMS beserta modul-modulnya (trik 60 s/d trik 74),

sekarang saatnya membuat tampilan desain untuk Admin agar terlihat lebihmenarik. Adapun kerangka desain untuk halaman login dapat dilihat pada

gambar 8.17.

30


31/50

Gambar 8.17 Kerangka desain untuk halaman login

Teknik yang digunakan untuk mengatur layout dari desain adalah CSS, pada

bagian atas diberi identitas #header yang berisi gambar header.jpg, bagian

tengah diberi identitas #content berisi skrip form_login.php, dan bagian bawah

diberi identitas #footer. Untuk lebih jelasnya, buatlah dua buah skrip berikut:

Skrip adminstyle.css

body{text-align : center;font-family : Tahoma;

}#header {

position : relative;margin-right : auto;margin-left : auto;background-image : url(../admin/images/header.jpg);background-repeat : no-repeat;width : 780px;border : 2px solid #265180;padding-top : 70px;text-align : left;

}#content {margin-left : 230px;padding : 20px 10px 0 0;

}#footer {

padding : 20px 0 10px 255px;font-size : 70%;color : #FFFFFF;

31


32/50

background-color : #265180;}h2 {

font : normal 120% Georgia;color : #265180;background-color : transparent;border-bottom : 1px dotted #265180;

}

Skrip index.php

:: Lokomedia Community Yogyakarta ::

Login

Copyright 2008 by Lokomedia Community Yogyakarta

Simpan skrip adminstyle.css di folder lukman01/config/, sedangkan skripindex.php disimpan di folder lukman01/admin/. Adapun skrip form_login.php

yang di include pada skrip index.php sudah kita buat pada trik 67.

File header.jpg dan gembok.png merupakan gambar yang dapat Anda temukan

di CD, silahkan simpan kedua file tersebut di folder lukman01/admin/images/.

Sekarang jalankan di browser, ketikkan: http://localhost/lukman01/admin/,

maka akan tampil halaman login seperti pada gambar 8.18.

32


33/50

Gambar 8.18 Hasil skrip index.php dan adminstyle.css untuk halaman login

Catatan Programmer:

Perintah-perintah CSS tidak dijelaskan di buku ini, silahkan Anda baca dibuku-buku yang membahas khusus tentang CSS.

Trik 76. Merancang Desain Halaman Utama Admin

Selanjutnya kita akan desain halaman utama untuk admin yang akan tampil

apabila user sudah login, karena desain dari halaman login dan halaman utama

berbeda, maka kerangka desainnya pun berbeda. Lihat gambar 8.19.

33


34/50

Gambar 8.19 Kerangka desain untuk halaman utama admin

Sama halnya dengan trik 75, kita juga akan menggunakan teknik CSS untuk

mengatur layoutnya, perbedaannya pada halaman utama terdapat content yang

dibagi dua, yaitu #menu berisi skrip menu.php untuk menampilkan navigasi

antar modul dan #content yang berisi skrip content.php untuk menampilkan isimodul yang diinginkan. Untuk lebih jelasnya, buatlah dua buah skrip berikut:

Skrip media.php

:: Lokomedia Community Yogyakarta ::

34


35/50

Home Logout

Copyright 2008 by Lokomedia Community Yogyakarta

Skrip content.php

Skrip menu.php


36/50

Skrip adminstyle.css

body{font-family : Tahoma;text-align : center;

}#header {

position : relative;background-image : url(../admin/images/header.jpg);background-repeat : no-repeat;margin-right : auto;margin-left : auto;width : 780px;border : 2px solid #265180;

padding-top : 70px;text-align : left;}#content {

margin-left : 230px;padding : 20px 10px 0 0;

}#content p {

font-size : 80%;line-height : 1.8em;padding-left : 2em;

}#menu {

position : absolute;top : 90px;left : 0;width : 180px;

}#menu ul {

list-style : none;margin : 0;padding : 0;border : none;

}#menu li {

Width : 180px;border-bottom : 1px solid #969BA5;margin : 0;padding : 0;font-size : 80%;vertical-align : bottom;

}#menu a:link, #menu a:visited {

Display : block;padding : 5px 5px 5px 0.5em;border-left : 12px solid #265180;border-right : 1px solid #265180;

background-color : #CAD6EC;color : #265180;text-decoration : none;

}#menu a:hover {

background-color : #265180;color : #FFFFFF;

}

36


37/50

a:link,a:visited {

color : #265180;}a:hover {

color : #FF6600;text-decoration : none;

}h2 {

font : normal 120% Georgia;color : #265180;background-color : transparent;border-bottom : 1px dotted #265180;

}

table {font-family : Tahoma;font-size : 8pt;border-width : 1px;border-style : solid;border-color : #999999;border-collapse : collapse;margin : 10px 0px;

}th {

color : #FFFFFF;font-size : 7pt;text-transform : uppercase;text-align : center;padding : 0.5em;border-width : 1px;border-style : solid;border-color : #969BA5;border-collapse : collapse;

background-color : #265180;}td {

padding : 0.5em;color : #333333;vertical-align : top;border-width : 1px;border-style : solid;border-color : #969BA5;border-collapse : collapse;

}input,textarea,select{

font-family : Tahoma;font-size : 8pt;

}#footer {

padding : 20px 0 10px 255px;font-size : 70%;

color : #FFFFFF;background-color : #265180;}

Sekarang coba login dengan memasukkan Username dan Password (lihat lagi

gambar 8.18). Apabila berhasil, maka akan tampil halaman utama admin

(media.php) seperti pada gambar 8.20.

37


38/50

Gambar 8.20 Hasil skrip media.php dan content.php untuk halaman utama

Saat ini, kita hanya bisa mengakses satu modul saja, yaitu Home yang

menampilkan ucapan Selamat Datang (lihat skrip content.php), sedangkan

modul lainnya belum bisa, karena memang belum kita tambahkan, untuk itusilahkan simak trik berikutnya.

Trik 77. Cara Menambahkan Modul

Desain untuk halaman utama akan digunakan untuk semua modul, artinya cukup

dengan satu desain dapat digunakan untuk semua modul. Sekarang bagaimana

cara menambahkan suatu modul?

Menurut aturan yang penulis rumuskan sendiri, maka pada proyek CMS ini,

semua modul akan ditangani oleh dua buah file, yaitu content.php dan

aksi.php. Oke, langsung saja kita praktekkan, misalnya kita akan menambahkan

modul User yang skrip-skripnya sudah kita buat pada trik 63 s/d trik 66. Skripuntuk menampilkan user (tampil_user.php), form tambah user (form_user.php),

dan form edit user (edit_user.php) akan dimasukkan ke file content.php.

Sedangkan skrip untuk input_user.php, update_user.php, dan hapus_user.php

akan dimasukkan ke file aksi.php. Untuk lebih jelasnya, silahkan buat dua buah

skrip berikut (skrip content.php pada trik sebelumnya kita modifikasi):

38


39/50

Skrip content.php


40/50

";

}

// Form edit userelseif ($_GET[act]=='edituser'){$edit=mysql_query("SELECT * FROM user

WHERE id_user='$_GET[id]'");$r=mysql_fetch_array($edit);

echo "Edit User

Username :Password : *) Nama Lengkap :E-mail :*) Apabila password tidak diubah,dikosongkan saja.

";}?>

Skrip aksi.php


41/50

header('location:media.php?module='.$module);}

// Update userelseif ($module=='user' AND $act=='update'){// Apabila password tidak diubahif (empty($_POST[password])) {mysql_query("UPDATE user SET id_user='$_POST[id_user]',

nama_lengkap='$_POST[nama_lengkap]',email='$_POST[email]'

WHERE id_user='$_POST[id]'");}// Apabila password diubahelse{

$pass=md5($_POST[password]);mysql_query("UPDATE user SET id_user='$_POST[id_user]',password='$pass',nama_lengkap='$_POST[nama_lengkap]',email='$_POST[email]'

WHERE id_user='$_POST[id]'");}header('location:media.php?module='.$module);

}?>

Pada halaman utama (lihat lagi gambar 8.20), klik menu Manajemen User, maka

akan terlihat halaman tampil user seperti pada gambar 8.21.

Gambar 8.21 Hasil penambahan modul User

Silahkan coba untuk menambah user dengan mengklik tombol Tambah User

atau Edit dan Hapus User, semuanya akan ditampilkan di desain halaman utama,

inilah yang dimaksud satu desain untuk semua modul.

41


42/50

Catatan & Tips Programmer:

Mengapa satu desain bisa menangani semua modul? Kuncinya ada pada

perintah ifdan elseif, misalnya apabila module==tambahmodul, maka yang

tampil adalah form tambah modul.

Yang perlu diperhatikan ketika menambahkan modul baru ke dalam file

content.php dan aksi.php adalah linknya harus disesuaikan dengan file yang

dituju, silahkan perhatikan lagi skrip content.php dan aksi.php yang telah kita

buat.

Sekarang sebagai penutup bab ini, silahkan untuk menambah modul Berita,

dimana skrip-skripnya telah kita buat pada trik 68 s/d trik 70, caranya baca

lagi trik 77 dengan rincian: skrip tampil_berita.php, form_berita.php, dan

edit_berita.php dimasukkan ke file content.php, sedangkan skrip

input_berita.php dan update_berita.php dimasukkan ke file aksi.php

(Catatan: hilangkan perintah cek sessionnya, karena sudah kita sertakan pada

skrip media.php di trik 76). Apabila Anda kurang jelas, silahkan saksikan

langsung video tutorialnya yang terdapat dalam CD.

Apabila skrip-skrip untuk suatu modul telah dimasukkan ke file content.php

dan aksi.php, maka skrip-skrip tersebut bisa dihapus, misalnya skrip-skrip

untuk modul berita terdiri atas tampil_berita.php, form_berita.php,

edit_berita.php, input_berita.php, dan update.php, maka kelima file tersebut

lebih baik dihapus saja, begitu juga dengan modul-modul lainnya. Sehingga,

nanti di folder lukman01/admin/ hanya terdapat tujuh buah file, yaitu:

index.php, form_login.php, cek_login.php, media.php, content.php, aksi.php,

dan logout.php.

Trik 78. Merancang Desain Halaman Pengunjung

Pada bagian akhir ini, kita akan merancang desain untuk halaman yang akan

diakses oleh pengunjung situs kita. Adapun kerangka desainnya dapat dilihat

pada gambar 8.22.

42


43/50

Gambar 8.22 Kerangka desain untuk halaman pengunjung

Untuk lebih mudahnya, kali ini kita akan mengatur tata letak (layout) halaman

web menggunakan teknik tabel yang dapat kita lakukan secara visual dengan

bantuan software Dreamweaver, sehingga terbentuklah desain seperti pada

gambar 8.23.

43


44/50

Gambar 8.23 Hasil penerapan layout menggunakan tabel di Dreamweaver

Simpanlah hasil layout tersebut dengan nama file media.php di folder

lukman01/. Apabila Anda belum bisa mengatur layout menggunakan

Dreamweaver, silahkan saksikan langsung video tutorialnya yang terdapat di

dalam CD.

Selanjutnya, buatlan dua buah skrip untuk mengatur content dari website

tersebut, yaitu skrip kiri.php dan kanan.php. Untuk lebih lengkapnya, silahkan

perhatikan skrip-skrip berikut:

Skrip index.php

Skrip kiri.php


45/50

";

// Menu Utamaecho "

";$menu=mysql_query("SELECT * FROM modul

WHERE publish='Y' and aktif='Y'ORDER BY urutan");

echo "

Home";while($r=mysql_fetch_array($menu)){echo "

$r[nama_modul]";

}echo "";

// Berita Terpopulerecho "

";$populer=mysql_query("SELECT * FROM berita

ORDER BY counter DESC LIMIT 10");while($p=mysql_fetch_array($populer)){echo "

$p[judul] ($p[counter])";

}

echo "";

// Tampilkan banner dalam bentuk gambar$banner=mysql_query("SELECT * FROM banner

ORDER BY id_banner DESC");while($b=mysql_fetch_array($banner)){echo "

";

}?>

Skrip kanan.php


46/50

Berita Terkini";$terkini= mysql_query("SELECT * FROM berita,user

WHERE user.id_user=berita.id_userORDER BY id_berita DESC LIMIT 3");

while($t=mysql_fetch_array($terkini)){$tgl = tgl_indo($t[tanggal]);echo "$t[hari], $tgl";echo "

$t[judul]";

echo "Ditulis Oleh : $t[nama_lengkap]";

echo "";if ($t[gambar]!=''){

echo "";}// Membuat headline berita$kalimat=strtok(nl2br($t[isi_berita])," ");for ($i=1;$i


47/50

echo "$isi_berita";echo "

[ Kembali ]";

// Apabila berita dibaca detailnya, tambahkan counternyamysql_query("UPDATE berita SET counter=$d[counter]+1

WHERE id_berita='$_GET[id]'");}?>

Simpanlah kedua file tersebut di folder lukman01/. Dan terakhir, buatlah sebuah

file CSS untuk mengatur tampilan warna, font, link, dan lain-lain. Adapun file

css tersebut adalah sebagai berikut:

Skrip style.css

a:link, a:visited {color : #007495;font-weight : bold;text-decoration : none;

}a:hover {

color : #FF9900;font-weight : bold;

}input, textarea, select{

background-color : #EEEEEE;font-size : 10px;

}hr {

border-bottom : 1px dashed #9D9D9D;}

#menu{font-family : Tahoma;font-size : 12px;color : #FFFFFF;

}#menu a:link, #menu a:visited {

color : #FFFF00;}#menu a:hover {

color : #FFFFFF;}#kiri{

font-family : Tahoma;font-size : 11px;color : #FFFFFF;

}

#kiri a:link, #kiri a:visited {color : #FFFF00;}#kiri a:hover {

color : #FFFFFF;}

.isi {font-family : Tahoma;

47


48/50

font-size : 11px;padding-left : 4px;color : #333333;text-align : justify;line-height : 18px;

}.bullet{

font-family : Tahoma;font-size : 14px;padding-left : 4px;color : #FFFFFF;text-align : justify;line-height : 18px;

}

.isi_kecil{font-family : Tahoma;font-size : 11px;padding-left : 4px;color : #FF6600;

}.judul {

font-family : Tahoma;font-size : 12px;font-weight : bold;color : #265180;padding-left : 4px;

}.judul_head {

font-family : Georgia;font-size : 12px;font-weight : bold;background-color : #B7BCC2;color : #333333;

padding-left : 4px;}.kembali {

font-family : Tahoma;font-size : 11px;padding-left : 4px;text-align : center;

}

Simpan file style.css di folder lukman01/config/. Oke, sekarang buka browser,

lalu ketikkan alamat: http://localhost/lukman01/, maka akan tampil halaman

utama website yang bisa dinikmati oleh pengunjung. Lihat gambar 8.24.

Catatan Akhir Programmer:

Halaman website untuk pengunjung hanya bisa menampilkan halaman utama

dan halaman detail berita saja, sedangkan Agenda, Pengumuman, dan lain-

lain belum bisa, karena belum kita buat skripnya. Oleh karena itu, Anda bisa

menambahkannya sendiri di file kanan.php atau dapatkan versi lengkapnya

di CD.

48


49/50

Akhirnya selesai sudah proyek membuat CMS tanpa OOP yang telah penulis

usahakan membahasnya seringkas mungkin, tentu saja masih banyak fitur

yang bisa dikembangkan, seperti RSS, template (themes), editor ala MS

Word/Joomla, level user yang lebih kompleks, dan sebagainya. Mudah-

mudahan pada versi berikutnya (lukman02) akan penulis bahas pada buku

berikutnya. Oke, sampai disini dulu, semoga Anda semua dapat mengambil

manfaat dari buku ini .. happy programming.

49


50/50

Gambar 8.24 Hasil desain halaman untuk pengunjung

50

membangun cms portal tanpa opp

Documents