Cara mengedit template web PHP

Pendahuluan
Dalam membuat sebuah web, selain kita membuat sendiri templatenya dengan bantuan script CSS. ada cara cepat
yang bisa kita lakukan yaitu dengan mengedit sebuah template web. template diibaratkan sebuah kulit yang
langsung dilihat oleh user atau pengunjung. sehingga kita harus pandai-pandai dalam menentukan template sebuah
web yang sesuai dengan isi atau content dari web kita secara keseluruhan.
Tahap Persiapan
Misalnya kita membutuhkan efisiensi waktu, tidak mau di pusingkan dengan pembutaan script template CSS, lebih
konsentrasi pada core system atau content yang disajikan. maka pilihan kita jatuhkan pada template web gratisan.
banyak sekali situs penyedia templateweb gratis yang bertebaran di internet. misalnya kita mencari di google
dengan kata kunci Free CSS templates maka akan muncul situs-situs seperti dibawah ini :

http://www.freecsstemplates.org
http://www.free-css.com
http://www.free-css-templates.com

atau jika ingin lebih efektif, anda bisa menggunakan google imagehttp://images.google.com/ dengan kata kunci
misalnya template web. maka anda bisa langsung melihat tampilan dari template. dan pilih salah satu gambarnya
untuk menuju ke situs yang menyediakan template tersebut.
Tahap Selanjutnya
1.

Misalnya kita menggunakan situs http://www.freecsstemplates.org/ untuk mencari teplate kita.

2.

Setelah menemukan template yang bagus, kita dapat men download nya.
misalnya http://www.freecsstemplates.org/preview/solutions/

3.

Setelah di download, simpan di htdocs dengan nama folder sesuai keinginan anda. (saya asumsikan anda
sudah mengenal XAMPP atau aplikasi untuk mengembangkan web dengan PHP)

Tahap Pengaturan
1.

2.

Setelah file template web di ekstrak, maka buka file index.html sebagai file untuk homepage atau halaman
utamanya. Anda bisa membuka filenya dengan editor dreamweaver. dan anda juga bisa mengganti ekstensi
filenya dengan PHP (index.php). karena selanjutnya kita akan membuat sebuah web menggunakan bahasa
pemrograman PHP.
Tahap selanjutnya adalah dengan memisahkan per blok coding CSS dari fileindex.php. misalnya blok
coding untuk menu di pisahkan menjadi menu.php, blok coding untuk isi dipisahkan menjadi isi.php.
nantinya file-file tersebut akan di include kedalam file index.php

3.

4.

bagian terpenting ada pada file isi.php, karena konsep dari template yang kita gunakan adalah memanggil
(include) masing-masing halaman file content kedalam halaman index.php sesuai dengan URL yang

dipanggil melalui halaman menu.php

Jika coding di dalam file index.php sudah di pisah-pisahkan menjadi filemenu.php dan isi.php, maka
hasilnya sebagai berikut.

Tahap Coding
Buka file menu.php dan edit menjadi seperti ini :
<ul>
<li>
<h2>MENU UTAMA</h2>
<ul>
<li><a href=?page=home>Home</a></li>
<li><a href=?page=profil>Profil</a></li>
<li><a href=?page=gallery>Gallery</a></li>
<li><a href=?page=katalog>Katalog</a></li>
</ul>
</li>
</ul>
Buat dan buka file isi.php kemudian ketik coding nya :
<?php
$page=htmlentities($_GET['page']);

$halaman=$page.php;
if(!file_exists($halaman) || empty($page)){
include home.php;
}else{
include $halaman;
}
?>
Buka file home.php dan edit seperti ini :
<div>
<h2><a href=#>Welcome to my Blog </a></h2>
<p><em>Sunday, April 26, 2009 7:27 AM Posted by <a href=#>Someone</a></em></p>
<div>
<p>Selamat datang di template web. semoga bermanfaat untuk anda semua :) </p>
<div><a href=#>Full Story</a></div>
</div>
</div>
Untuk halaman file profil.php, gallery.php, katalog.php silahkan copy paste filehome.php menjadi masing-masing
file tersebut dan ubah isinya sesuai dengan kebutuhan. untuk selanjutnya content bisa diambil dari database.
Download
http://www.4shared.com/file/yfoTIwFI/template_web_ri32.html
Sekian tutorial sederhana ini saya buat, semoga bermanfaat untuk anda semuaaamin

Membuat Slideshow Gallery gambar dengan PHP dan JQuery

Posted on 26 January 2011 by Agus Sumarna

4 Votes

Aplikasi ini adalah gabungan dari 2 aplikasi yaitu aplikasi jQuery untuk slideshow (amazon_scroller.js) dan aplikasi
untuk zoom image (jquery.bigPicture.js). aplikasi ini bertujuan untuk membantu teman-teman dalam menampilkan
gambar dalam bentuk slideshow. dan ketika suatu gambar di klik dalam slideshow tadi, maka aplikasi jQuery Zoom
akan memperbesar gambar dalam ukuran gambar yang asli.
Sedangkan data gallerynya di ambil dari sebuah database test dan nama tabelnya tools_gallery

Tabel tools_gallery

Script Include JQuery

<!untuk zoom image>
<script type=text/javascript src=./js/jquery.js></script>
<script type=text/javascript src=./js/jquery.bigPicture.js></script>
<script type=text/javascript src=./js/jquer.bigPicture-min.js></script>
<script type=text/javascript src=./js/jquery.bigPicture-pack.js></script>
<script type=text/javascript src=./js/jquery.easing.js></script>
<link rel=stylesheet type=text/css href=css/core.css/>
<link rel=stylesheet type=text/css href=css/skin.css/>

<!untuk slideshow>
<link href=css/amazon_scroller.css rel=stylesheet type=text/css></link>
<script type=text/javascript src=js/amazon_scroller.js></script>
<script language=javascript type=text/javascript>
Menyisipkan Syntax Javascript
<script language=javascript>
$(a.info).bigPicture({
enableInfo': true,
infoPosition': bottom
});
</script>
Menampilkan gambar
<div id=amazon_scroller1>
<div>
<ul>
<?php
include ./include/conn.php;
$select=mysql_query(select * from tools_gallery);
while($row=mysql_fetch_array($select)){
?><li><a href=./gallery/<?php echo $row['gambar'];?> title=<?php echo $row['keterangan'];?>
name=gambar><img src=./gallery/<?php echo $row['gambar'];?> width=60 height=60 title=Klik
photo/></a></li><?php
}
?>
</ul>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div style=clear: both></div>
</div>
Download
http://www.4shared.com/file/kI8ABhIV/slideshow-gallery.html

Membuat Report menggunakan PHPExcel

Posted on 24 August 2013 by Agus Sumarna

2 Votes

Latar Belakang
Sebelumnya saya membuat artikel aplikasi-export-database-ke-excel-dengan-php. namun terdapat kekurangan yaitu
tidak dapat menyisipkan gambar/logo dan tidak dapat membuat border table agar lebih rapih dan menarik.
Pada artikel kali ini saya menjelaskan tentang salah satu library yang banyak dipakai oleh orang dalam membuat
report atau laporan dalam bentuk excel dari aplikasi PHP.
Cara Penggunaan
1.
2.
3.

Download library phpexcel.codeplex.com

Setelah di download kemudian di extract
Disana terdapat folder Classes yang nanti akan di copy paste ke aplikasi web dan digunakan untuk library

4.

pembuatan report
Terdapat folder Documentation untuk detail fungsi dan cara penggunaan library

5.

Terdapat folder Examples berisi contoh script untuk menggunakan library PHPExcel

Download Demo

Untuk memudahkan teman-teman dalam memahami penggunaan library phpexcel, seperti biasa saya memberikan
contoh database dan aplikasi yang dapat digunakan sebagai template pembuatan report menggunakan phpexcel.

Database
Aplikasi

Penentuan Kolom
// mulai judul kolom dengan row 12
$objPHPExcel->getActiveSheet()->setCellValue(A12, NO)

->setCellValue(B12, NAMA GURU)

->setCellValue(C12, NIP)
->setCellValue(D12, TELPON)
->setCellValue(E12, TEMPAT/TGL LAHIR)
->setCellValue(F12, AGAMA)
->setCellValue(G12, JENIS KELAMIN)
->setCellValue(H12, ALAMAT/TEMPAT TINGGAL)
->setCellValue(I12, EMAIL);
Penentuan Field
// menampilkan data, susunan field sesuai dengan urutan judul kolom
while($row = mysql_fetch_array($SQL, MYSQL_ASSOC)){
$no++;
$row_array['no'] = $no;
$row_array['nama'] = $row['nama'];
$row_array['nip'] = $row['nip'];
$row_array['telpon'] = $row['telpon'];
$row_array['tpttgllahir'] = $row['tempat_lahir']., .$row['tanggal_lahir'];;
$row_array['agama'] = $row['agama'];
$row_array['kelamin'] = $row['kelamin'];
$row_array['alamat'] = $row['alamat'];
$row_array['email'] = $row['email'];
array_push($dataArray,$row_array);
}
Penentuan Lebar Kolom
//untuk auto size colomn
$objPHPExcel->getActiveSheet()->getColumnDimension(A)->setWidth(5);
$objPHPExcel->getActiveSheet()->getColumnDimension(B)->setAutoSize(true);
$objPHPExcel->getActiveSheet()->getColumnDimension(C)->setWidth(15);
$objPHPExcel->getActiveSheet()->getColumnDimension(D)->setWidth(15);
$objPHPExcel->getActiveSheet()->getColumnDimension(E)->setAutoSize(true);
$objPHPExcel->getActiveSheet()->getColumnDimension(F)->setWidth(10);
$objPHPExcel->getActiveSheet()->getColumnDimension(G)->setWidth(15);
$objPHPExcel->getActiveSheet()->getColumnDimension(H)->setWidth(30);
$objPHPExcel->getActiveSheet()->getColumnDimension(I)->setWidth(20);
Penentuan Logo
// Add a drawing to the worksheet
$objDrawing = new PHPExcel_Worksheet_Drawing();
$objDrawing->setName(Logo);
$objDrawing->setDescription(Logo);
$objDrawing->setPath(./images/logo.jpg);
$objDrawing->setCoordinates(D2);
$objDrawing->setHeight(100);
$objDrawing->setWidth(100);
$objDrawing->setWorksheet($objPHPExcel->getActiveSheet());
Penentuan Judul dan Sub Judul
// Mulai Merge cells Judul
$objPHPExcel->getActiveSheet()->mergeCells(D2:I2);
$objPHPExcel->getActiveSheet()->setCellValue(D2, DAFTAR DATA GURU RI32 COMMUNITY);

$objPHPExcel->getActiveSheet()->mergeCells(D3:I3);
$objPHPExcel->getActiveSheet()->setCellValue(D3, Pemilihan Guru Teladan);
$objPHPExcel->getActiveSheet()->mergeCells(D4:I4);
$objPHPExcel->getActiveSheet()->setCellValue(D4, Tingkat SD-SMP-SMA);
$objPHPExcel->getActiveSheet()->mergeCells(D5:I5);
$objPHPExcel->getActiveSheet()->setCellValue(D5, Tahun 2013);
$objPHPExcel->getActiveSheet()->getStyle(D2:I5)->getFont()->setName(Arial);
$objPHPExcel->getActiveSheet()->getStyle(D2:I5)->getFont()->setSize(14);
$objPHPExcel->getActiveSheet()->getStyle(D2:I5)->getFont()->setBold(true);
$objPHPExcel->getActiveSheet()->getStyle(D3:I5)->getFont()->setSize(13);
// untuk sub judul
$objPHPExcel->getActiveSheet()->setCellValue(I7, Jumlah Data : $jumlah);
$objPHPExcel->getActiveSheet()->setCellValue(A8, Kota : Karawang);
$objPHPExcel->getActiveSheet()->setCellValue(A9, Propinsi : Jawa Barat);
$objPHPExcel->getActiveSheet()->setCellValue(H8, Tingkat : SMA);
$objPHPExcel->getActiveSheet()->setCellValue(H9, Sekolah : SMAN4 Karawang );
$objPHPExcel->getActiveSheet()->getStyle(A7:I9)->getFont()->setName(Arial);
$objPHPExcel->getActiveSheet()->getStyle(A7:I9)->getFont()->setSize(9);
Setting File Excel
// Redirect output to a clients web browser (Excel2007)
header(Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet);
header(Content-Disposition: attachment;filename=DATA_GURU.date(d-F-Y).'.xlsx);
header(Cache-Control: max-age=0);
Issue Library PHPExcel
Setiap kelebihan pasti memiliki kekurangan, contohnya jika saya memiliki 60ribu data dan ingin membuat report nya.
maka secara exponensial library phpExcel semakin lambat mengenerate data tersebut. berikut adalah forum yang
membahas issue tersebut :

http://blog.mayflower.de/561-Import-and-export-data-using-PHPExcel.html
http://stackoverflow.com/questions/4895230/why-phpexcel-does-not-allow-to-write-more-than-5000-rows
http://stackoverflow.com/questions/3890294/phpexcel-export-for-larger-files-fails

Solusi Sementara
Solusi sementara yang bisa dipakai untuk generate report dengan data yang besar, menggunakan fitur export
phpmyadmin, dan software pembuat report seperti crystal report atau ireport.
Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semuaaamiin

Ujian Online Sederhana

22 AGUSTUS 2012 291 KOMENTAR

Ujian online sederhana demikianlah judul yang saya ambil dalam tulisan ini, aplikasi ini awalnya saya buat ketika
melakukan praktek kerja lapangan di SMA Muhammadiyah 08 Cerme Gresik. Dari judulnya saya yakin anda sekalian
pasti telah memiliki gambaran tentang aplikasi saya ini. Fitur utama dari aplikasi ini adalah sebagai berikut :
1.

kemampuan membuat soal dan pilihan jawaban menggunakan gambar dengan memanfaatkan text editor
ckeditor

2.

penggunaan timer ketika siswa mengerjakan ujian secara online dan siswa dapat melihat kembali detail jawaban
yang diberikan ketika ujian tersebut

Aplikasi ini merupakan aplikasi berbasis web yang menggunakan php sebagai bahasa pemrograman, mysql sebagai
database dan library jquery agar aplikasi terlihat lebih indah dan interaktif. Berikut ini sedikit screenshot dari aplikasi
ini

Membuat / menambah soal

daftar_ujian_siswa

contoh jawaban dengan gambar

Proses mengerjakan ujian

proses pemeriksaan jawaban

Reset nilai agar bisa mengulang ujian

Sola sudah tersimpan

Berikut ini saya lampirkan desain database dari aplikasi ini karena ada beberapa teman yang menanyakannya.

Buat yang ingin nyoba aplikasi ini silakan download source codenya di Sini
Sini dengan penambahan kelas
Untuk buku manualnya dapat didownload di sini
Kalau ingin mencoba login sebagai administrator / guru dapat menggunakan account dibawah ini :
username = kaji_admin
password = kaji_admin
Untuk yang ingin menampilkan per halaman 5 soal maka anda dapat mengganti file kerjakan_ujian.php
dengan download ini artinya bila jumlah soalnya adalah 17 maka akan ditampilkan 5 soal perhalaman sehingga
menjadi 4 halaman anda dapat mengubah jumlah soal yang ditampilkan perhalaman dengan mengubah nilai pada
variabel $per_page = 5, menjadi $per_page = 2 misalnya sehingga perhalaman akan ditampilkan 2 soal
Ditunggu kritik dan sarannya, semoga bermanfaat dan menjadi tabungan di akhirat kelak ..