About Me

Hai, saya Rosihan Ari Yuana. Saya sehari-hari adalah mengajar di Universitas Sebelas Maret.

Bidang riset saya tentang adaptive learning, computer aided learning, dan datascience

Selain itu, saya juga seorang penulis buku dan blogger.

More about me...

  • Home
  • /
  • PHP
  • /
  • Edit File CSS Berbasis File Teks dengan PHP
PHP

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]https://blog.rosihanari.net/wp-content/uploads/2020/05/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>&nbsp;</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

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.

 

Saya seorang dosen dan peneliti di Universitas Sebelas Maret. Bidang penelitian saya tentang: adaptive learning, datascience, dan computer aided learning. Selain itu saya juga seorang blogger, serta penulis buku tentang pemrograman, dan matematika.

Leave a Reply