Edit File CSS Berbasis File Teks dengan PHP

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

view sourceprint?

01.include "config.php"; ?>

02. 

03.

04.

05.

06.

26. 

27.

28.

Heading

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

30."properties.php">Edit Tampilan

31.

32.

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

view sourceprint?

01.

02.$background = "#FF0000";

03.$fontHeading = "Helvetica";

04.$fontSizeHeading = "23";

05.$fontColorHeading = "#FFFFFF";

06.$fontParagraf = "Times New Roman";

07.$fontColorParagraf = "#000000";

08.$fontSizeParagraf = "18";

09.$alignment = "justify";

10.?>

Selanjutnya kita buat form edit untuk mengubah value yang ada dalam file config.php
properties.php

view sourceprint?

01.include "config.php"; ?>

02. 

03.

04.

05.

06.

07. 

08.

09.

Page Properties

10.

"post" action="simpan.php">

11."100%"  border="0">

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

Warna Background Halaman	"background" type="text" value="">
Jenis Font Heading	"fontHeading" type="text" value="">
Ukuran Font Heading	"fontSizeHeading" type="text" size="3" value=""> 23.px
Warna Font Heading	"fontColorHeading" type="text" value="">
Jenis Font Paragraf	"fontParagraf" type="text" value="">
Warna Font Paragraf	"fontColorParagraf" type="text" value="">
Ukuran Font Paragraf	"fontSizeParagraf" type="text" size="3" value=""> 40.px
Perataan Paragraf	"alignment" type="text" value="">
	"submit" name="Submit" value="Submit">

51.

52.

53.

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

view sourceprint?

01.

02. 

03.// membaca value dari form

04. 

05.$background = $_POST['background'];

06.$fontHeading = $_POST['fontHeading'];

07.$fontSizeHeading = $_POST['fontSizeHeading'];

08.$fontColorHeading = $_POST['fontColorHeading'];

09.$fontParagraf = $_POST['fontParagraf'];

10.$fontColorParagraf = $_POST['fontColorParagraf'];

11.$fontSizeParagraf = $_POST['fontSizeParagraf'];

12.$alignment = $_POST['alignment'];

13. 

14.// membuat baris yang akan ditulis ke file config.php

15.// untuk setiap value misal: $background = "#FFFFFF";

16. 

17.$background = "\$background = \"".$background."\";\n";

18.$fontHeading = "\$fontHeading = \"".$fontHeading."\";\n";

19.$fontSizeHeading = "\$fontSizeHeading = \"".$fontSizeHeading."\";\n";

20.$fontColorHeading = "\$fontColorHeading = \"".$fontColorHeading."\";\n";

21.$fontParagraf = "\$fontParagraf = \"".$fontParagraf."\";\n";

22.$fontColorParagraf = "\$fontColorParagraf = \"".$fontColorParagraf."\";\n";

23.$fontSizeParagraf = "\$fontSizeParagraf = \"".$fontSizeParagraf."\";\n";

24.$alignment = "\$alignment = \"".$alignment."\";\n";

25. 

26.// nama file yang akan dibaca

27. 

28.$file = "config.php";

29. 

30.// membaca file dan menyatakan isi file ke dalam array

31. 

32.$arrayRead = file($file);

33. 

34.// mengubah isi setiap elemen array dengan nilai yang baru

35. 

36.$arrayRead[1] = $background;

37.$arrayRead[2] = $fontHeading;

38.$arrayRead[3] = $fontSizeHeading;

39.$arrayRead[4] = $fontColorHeading;

40.$arrayRead[5] = $fontParagraf;

41.$arrayRead[6] = $fontColorParagraf;

42.$arrayRead[7] = $fontSizeParagraf;

43.$arrayRead[8] = $alignment;

44. 

45.// menyimpan kembali isi array yang baru ke file

46.$simpan = file_put_contents($file, implode($arrayRead));

47. 

48.if ($simpan)  {

49.echo "

Update tampilan sukses

";

50.echo "Lihat tampilan
";

51.}

52.else echo "

Update tampilan gagal

";

53. 

54.?>

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
Download Script
Nah… jadi deh aplikasinya. Mudah-mudahan ada manfaatnya ya… dan tunggu tutorial yang lainnya dari saya. So.. stay tune terus di blog ini.