Sunday, July 3, 2011

Read CSS File With PHP

Dalam teknologi website CSS adalah bagian yang penting untuk membuat tampilan web page menjadi Indah.  Apabila anda membuat aplikasi yang bersifat CMS (Content Management System) maka menyediakan fitur editor CSS akan membatu pengguna dalam melakukan editing file CSS.


PHP adalah Server Side Scripting populer yang memiliki kemampuan dalam melakukan parsing string yang berada di dalam file text. Dengan PHP tag-tag CSS bisa dibaca yang kemudian dapat dikembangkan menjadi sebuah Editor CSS berbasis web, seperti pada gambar dibawah ini.

 

Pada posting ini akan di jelaskan cara melakukan parsing file CSS menggunakan PHP.

1. Script PHP untuk melakukan parsing file CSS
<?php  
//1. Membaca file style.css 
 $file = 'style.css';
 $source = file($file, FILE_USE_INCLUDE_PATH);

 //2. Menampung semua style css pada sebuah variabel
 $css = '';
 foreach ($source as $line => $val) {
   $css .= trim($val);
 }

 
 //3. Menyiapkan array untuk menampung selector dan value css
 $selector = array();
 $value = array(); 
 $selectorLoop = 0;
 $valueLoop = 0;

 //4. Memecah css yang berada pada variabel $css berdasarkan simbol {}
 $tok = strtok($css, "{}");

 //5. Memasukan selector css dan value css ke array
 $i = 0;
 while ($tok !== false) {  
  if ($i % 2 == 0) {
   $selector[$selectorLoop] = $tok;
   $selectorLoop++;
  } else {
   $value[$valueLoop] = $tok;
   $valueLoop++;
  }
  $i++; 
  $tok = strtok("{}");
 }
?>
2. PHP dan Tag HTML untuk menampilkan Selector CSS
<!-- Menampilkan selector css pada listbox -->
<form action="">
 Selector 
 <select name="selector" onchange="this.form.submit()">
  <?php $index = 0; ?>
  <option value="">Pilih Selector</option>
  <?php foreach($selector as $val): ?>
   <option value="<?php echo $index ?>"><?php echo $val ?></option>
   <?php $index++ ?>
  <?php endforeach; ?>
 <select>
</form>
<hr />
3. PHP dan Tag HTML untuk menampihkan Value dari tag-tag CSS
<!-- Menampilkan valuesselector css pada textbox --> 
<?php if(isset($_GET['selector'])): ?>
 <?php $exp =  explode(';',$value[$_GET['selector']]) ?> 
 <?php foreach($exp as $val): ?>
  <?php $split = explode(':',$val) ?>
  <?php if(strlen($split[0]) > 0 ):?>
   <?php echo $split[0] ?>
   <input type="text" value="<?php echo $split[1] ?>" /><br />
  <?php endif; ?>
 <?php endforeach; ?>
<?php endif; ?>

  • Berikut ini adalah Hasil dari Script di atas

  • Anda dapat download script ini di -> klik

5 comments:

  1. www. atmaluhur.ac.id

    Maaf bos saya ada kesulitan di sini cara gabunin HTML + PHP + CSS kedalam 1 halaman itu hrus caranya gimna saya belum sampai di situ belajarnya klo bisa di jelasin di email saya bos

    1622500121@atmaluhur.ac.id

    ReplyDelete