Edit File CSS Berbasis File Teks dengan PHP
October 7th, 2008 | by rosihanari |
Cetak Artikel
Dalam tutorial ini akan dibahas mengenai cara membuat aplikasi untuk mengubah value CSS pada suatu halaman web menggunakan script PHP. Adapun value-value CSS ini disimpan dalam suatu file teks. Untuk mengubah value CSS tersebut, user hanya menggunakan sebuah form mengubah value yang diinginkan, dan selanjutnya disubmit. Secara otomatis, isi value yang ada dalam file teks akan berubah dan mengakibatkan tampilan halaman web juga akan berubah.
Untuk lebih jelasnya, perhatikan demo berikut ini.
[swf w=357 h=370]http://butikamalia.com/data/css.swf[/swf]
Dalam contoh aplikasi ini melibatkan 4 file script. File yang pertama adalah untuk menampilkan halaman web (untuk melihat efek pengubahan tampilan). File ini berisi sebarang teks dan paragraf yang di dalamnya terdapat CSS. File yang kedua adalah berisi konfigurasi value-value CSS. File kedua ini nantinya dibaca valuenya oleh file pertama untuk keperluan tampilan. Selanjutnya file ketiga berisi form edit untuk mengubah value-value CSS. Dan file keempat adalah file yang berisi script PHP untuk proses pengubahan value setelah form pada file ketiga disubmit.
OK… kita mulai saja tutorialnya. Pertama-tama kita siapkan terlebih dahulu file pertama yaitu halaman web yang berisi sebarang teks dan paragraf. Misalnya seperti berikut ini.
page.php
<? include "config.php"; ?>
<html>
<head>
<title>Example</title>
<style type="text/css">
<!--
body {
background-color: <? echo $background; ?>;
}
h1 {
font-family:"<? echo $fontHeading; ?>";
color:<? echo $fontColorHeading; ?>;
font-size:<? echo $fontSizeHeading; ?>px;
}
p {
font-family:"<? echo $fontParagraf; ?>";
color:<? echo $fontColorParagraf; ?>;
font-size:<? echo $fontSizeParagraf; ?>px;
text-align:<? echo $alignment; ?>;
}
-->
</style></head>
<body>
<h1>Heading</h1>
<p>Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. Ini sebuah paragraf. </p>
<p><a href="properties.php">Edit Tampilan</a></p>
</body>
</html>
Perhatikan script page.php tersebut terutama pada bagian paling atas. Pada bagian tersebut terdapat perintah include. Include ini nanti diarahkan ke file config.php yang berisi value-value CSS. Value dari config.php ini dibaca kemudian diletakkan ke bagian CSS dalam page.php.
Bagaimana isi file config.php? ini dia
config.php
<?php $background = "#FF0000"; $fontHeading = "Helvetica"; $fontSizeHeading = "23"; $fontColorHeading = "#FFFFFF"; $fontParagraf = "Times New Roman"; $fontColorParagraf = "#000000"; $fontSizeParagraf = "18"; $alignment = "justify"; ?>
Selanjutnya kita buat form edit untuk mengubah value yang ada dalam file config.php
properties.php
<? include "config.php"; ?>
<html>
<head>
<title>Page Properties</title>
</head>
<body>
<h1>Page Properties</h1>
<form method="post" action="simpan.php">
<table width="100%" border="0">
<tr>
<td>Warna Background Halaman </td>
<td><input name="background" type="text" value="<? echo $background; ?>"></td>
</tr>
<tr>
<td>Jenis Font Heading </td>
<td><input name="fontHeading" type="text" value="<? echo $fontHeading; ?>"></td>
</tr>
<tr>
<td>Ukuran Font Heading </td>
<td><input name="fontSizeHeading" type="text" size="3" value="<? echo $fontSizeHeading; ?>">
px </td>
</tr>
<tr>
<td>Warna Font Heading </td>
<td><input name="fontColorHeading" type="text" value="<? echo $fontColorHeading; ?>"></td>
</tr>
<tr>
<td>Jenis Font Paragraf</td>
<td><input name="fontParagraf" type="text" value="<? echo $fontParagraf; ?>"></td>
</tr>
<tr>
<td>Warna Font Paragraf </td>
<td><input name="fontColorParagraf" type="text" value="<? echo $fontColorParagraf; ?>"></td>
</tr>
<tr>
<td>Ukuran Font Paragraf</td>
<td><input name="fontSizeParagraf" type="text" size="3" value="<? echo $fontSizeParagraf; ?>">
px</td>
</tr>
<tr>
<td>Perataan Paragraf </td>
<td><input name="alignment" type="text" value="<? echo $alignment; ?>"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Seperti halnya pada page.php, pada properties.php juga perlu untuk membaca isi dari config.php, perhatikan adanya perintah include “config.php” pada bagian paling atas script. Mengapa demikian? Ya… karena isi dari config.php ini nanti akan ditampilkan pada setiap komponen editnya.
Berikutnya yang terakhir, kita buat script simpan.php yaitu script untuk memproses pengubahan value CSS hasil pengeditan via form. Pengubahan ini nanti langsung dilakukan pada file config.php. Nah… yang jadi masalah adalah, bagaimana proses pengubahan isi suatu script? Sulitkah? Jangan khawatir teman… Kita bisa gunakan function file(). Function ini secara otomatis membaca suatu file teks berdasarkan setiap barisnya dan selanjutnya dinyatakan sebagai array. Nah… berarti kita hanya melakukan manipulasi array saja. Setelah array dimanipulasi, kita tulis kembali array tersebut ke file teks semula.
OK… berdasarkan ide di atas sekarang kita buat simpan.php nya
simpan.php
<?php
// membaca value dari form
$background = $_POST['background'];
$fontHeading = $_POST['fontHeading'];
$fontSizeHeading = $_POST['fontSizeHeading'];
$fontColorHeading = $_POST['fontColorHeading'];
$fontParagraf = $_POST['fontParagraf'];
$fontColorParagraf = $_POST['fontColorParagraf'];
$fontSizeParagraf = $_POST['fontSizeParagraf'];
$alignment = $_POST['alignment'];
// membuat baris yang akan ditulis ke file config.php
// untuk setiap value misal: $background = "#FFFFFF";
$background = "\$background = \"".$background."\";\n";
$fontHeading = "\$fontHeading = \"".$fontHeading."\";\n";
$fontSizeHeading = "\$fontSizeHeading = \"".$fontSizeHeading."\";\n";
$fontColorHeading = "\$fontColorHeading = \"".$fontColorHeading."\";\n";
$fontParagraf = "\$fontParagraf = \"".$fontParagraf."\";\n";
$fontColorParagraf = "\$fontColorParagraf = \"".$fontColorParagraf."\";\n";
$fontSizeParagraf = "\$fontSizeParagraf = \"".$fontSizeParagraf."\";\n";
$alignment = "\$alignment = \"".$alignment."\";\n";
// nama file yang akan dibaca
$file = "config.php";
// membaca file dan menyatakan isi file ke dalam array
$arrayRead = file($file);
// mengubah isi setiap elemen array dengan nilai yang baru
$arrayRead[1] = $background;
$arrayRead[2] = $fontHeading;
$arrayRead[3] = $fontSizeHeading;
$arrayRead[4] = $fontColorHeading;
$arrayRead[5] = $fontParagraf;
$arrayRead[6] = $fontColorParagraf;
$arrayRead[7] = $fontSizeParagraf;
$arrayRead[8] = $alignment;
// menyimpan kembali isi array yang baru ke file
$simpan = file_put_contents($file, implode($arrayRead));
if ($simpan) {
echo "<h2>Update tampilan sukses</h2>";
echo "<p><a href=\"page.php\">Lihat tampilan</a></p>";
}
else echo "<h2>Update tampilan gagal</h2>";
?>
Mungkin Anda bertanya, apa maksudnya $arrayRead[1] = $background; ? Good question… Seperti yang telah saya singgung di atas tentang penggunaan perintah file(), bahwa perintah tersebut akan membaca suatu file setiap baris dan hasil pembacaannya dinyatakan ke dalam bentuk array. Nah… $arrayRead[1] ini maksudnya adalah elemen array yang merupakan hasil pembacaan pada baris ke-2 dari file config.php, yang dalam hal ini terkait dengan value background. Coba perhatikan kembali isi dari config.php di atas. Selanjutnya untuk font heading, pada file config.php terletak pada baris ke-3, jadi arraynya adalah $arrayRead[2], begitu seterusnya… Ingat.. bahwa indeks array dalam PHP dimulai dari 0.
Kemudian mungkin ada yang bertanya lagi… mengapa ada \n di belakang setiap baris yang akan diisikan ke file config.php, misalnya $background = “\$background = \”".$background.”\”;\n”; ? Yup… ini juga good question… kegunaan \n adalah supaya teks berikutnya berada di bawahnya, sehingga membentuk baris baru dalam file teks.
Oya, apa pula kegunaan function implode()? Function ini digunakan untuk menggabung semua elemen array menjadi sebuah string. String hasil gabungan elemen array ini selanjutnya akan ditulis kembali ke file.
Bila Anda males nulis script di atas, silakan download di bawah ini
Nah… jadi deh aplikasinya. Mudah-mudahan ada manfaatnya ya… dan tunggu tutorial yang lainnya dari saya. So.. stay tune terus di blog ini.
| Baca Juga Artikel Terkait |
Kata kunci: css - PHP - script -
good posting…
thanks ilmunya.
posting yang bagus2 lagi ya…
Artikel yg sangat bagus.
Ini CSS untuk WordPress ya ?
Kalau untuk Blogger/Blogspot gimana ya caranya modifikasi , , ….
Terimakasih.
to kwangkxz: itu CSS kalo ingin buat script sendiri mas. Setahu saya kalo blogger itu tidak bisa diedit CSS nya
mas, saya itu punya domain gratisan pake wordpress. dengan web gratisan itu apa bisa di edit menurut kehendak kita? soalnya tampilan gratis di wordpress itu cuma standar. tolong mas di respon ya? cara editnya itu gimana ya?
to eko: tidak bisa diedit mas, jika kita pakai wordpress.com, tapi kalo wordpress tsb diinstall di hostingan sendiri bisa.
apakah wordpres saya ini bisa di edit? soalnya domainnya gratisan. tolong mas respon komen saya ini.
to ekoind: sepertinya Anda pakai hosting di wordpress.com ya? kalo wordpress.com tidak bisa ngedit apa-apa kecuali mengubah theme yang sudah disediakan. Beda halnya jika anda install wordpress di hosting sendiri.
code program yg sangat bagus….
bagaimana PHP mengedit File jenis
config.ini yg berisi :
[satu]
nama = sasa
alamat = jl pramuka no 7
[dua]
nama = dudu
alamat = jl mama no 7
wah, lengkap sekali nih, sya cari ini cri itu smua ada, makasih pak. .
.-= chevryu´s last blog ..Title of an item =-.
Mas Ari,
Saya mau mohon bantuan Mas, Saya ingin menambaha pages pada Blog saya, setelah saya tambah seluruh sidebar(widget-widget, maksud saya)tampil seperti halaman utama. Pertanyaan nya : Bagaimana menghilangkan seluruh sidebar (widget-widget) tersebut ? Terimakasih
Salam Sahabat
@foto unik: maaf mas, saya belum paham pertanyaan.. maklum saya dah tua nih…
bgs sekali script cssx tlg skli jgn dihapus soalx sgt bermanfaat bg kami.
Assalam
terima kasih pak Ari..
share ilmunya sebagai orang awam yang baru mengenal php harus belajar dari orang – orang seperti pak Ari. Blog ini sangat bermanfaat dan membantu saya..
wassalam
Trimakasih banyak…