Membuat Editor CSS dengan Textarea - Tutorial Website | Tutorial PHP & MYSQL | Boostsrap | Ajax Javascript

Ditutorial kali ini WriteCode akan membuat tutorial cara Membuat Editor CSS dengan Textarea, membuat editor ini tidak sulit untuk dilakukan, disini kami akan membagikan cara membuatnya bisa anda ikuti step step dibawah ini :

Sebelum masuk kekodingan siapkan dua buah file seperti dibawah ini :

1.editorcss.php
2.style.css untuk style css dibiarkan kosong jangan dulu diisi

Step 1

Silakan anda copas koding dibawah ini kedalam file editorcss.php untuk kodingnya dibawah ini :

<?php
session_start();
if (isset($_POST['cssedit'])) {
 $p=$_POST['editor'];
 $a = fopen("style.css", 'w');
 fwrite($a, $p);
 fclose($a);
 chmod("style.css", 0644);
}
echo '<link rel="stylesheet" href="style.css">';
$myfile = fopen("style.css", "r") or die("Unable to open file!");
echo '<br><h1>EDITOR CSS</h1>';
echo '<form method="post">';
echo '<center><textarea name="editor">';while(!feof($myfile)) {echo fgets($myfile);}
echo '</textarea></center>
<center><input type="submit" name="cssedit" value="SAVE CSS"></center>
</form>';
fclose($myfile);

Sejauh ini script php diatas sudah berjalan normal, untuk mencobanya proses cara update css silakan dijalankan dilocalhost kesayangan agan untu ujicoba silakan copas CSS dibawah ini , masukan kedalam textarea lalu klik tombol save css bila anda berhasil maka akan tampak seperti gambar diatas

body {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
.a {font:bold 13px Verdana; margin:0 25px 0 0;}
.b {font:bold 13px Verdana; margin:10px 25px 0 0;}
.c {width:100%; margin:0; padding:0;}
.d {position:absolute; left:0px; top:100px; width:200px; margin:0; padding:10px; background-color:#cccccc; border:2px solid #000; font:bold 11px Verdana;}
.e {position:absolute; left:25%; top:100px; width:74.9%; height:20px; margin:0; padding:0 0 0 20px; background-color:#cccccc; border:2px solid #000; font:bold 11px Verdana;}
.f {position:absolute; left:5px; top:5px; width:233px; height:91px; margin:0; color:darkorange; font:bold 11px Courier; padding:0; z-index:10; background-image:url('logo1.jpg'); background-repeat:no-repeat; line-height:0.88em; text-align:right;}
.g {color:blue; border:1px solid blue;padding:5px}
.ad {position:absolute;width:145px;top:150px;left:857px;text-align:left}
.main {position:absolute;width:560px;top:150px;left:270px;padding:10px;text-align:left}
textarea {
    width: 50%;
    height: 350px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}
input[type=text], select, textarea{
    display: block;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}
input[type=submit] {
    background-color: #fb036d;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

input[type=submit]:hover {
    background-color: #45a049;
}

Potongan script :

Baca Juga : Cara mencegah copy file css dengan php

session_start();
if (isset($_POST['cssedit'])) {
 $p=$_POST['editor'];
 $a = fopen("style.css", 'w');
 fwrite($a, $p);
 fclose($a);
 chmod("style.css", 0644);
}

fopen berfungsi membuka file style.css

fwrite berfubgsi untuk menulis kode css kedalam file style.css

fclose berfungsi untuk menutup perintah

chmod berfungsi untuk membaca path folder

Potongan script dibawah ini, untuk menampilkan css yang sudah tersimpan di file style.css

echo '<link rel="stylesheet" href="style.css">';
$myfile = fopen("style.css", "r") or die("Unable to open file!");
echo '<br><h1>EDITOR CSS</h1>';
echo '<form method="post">';
echo '<center><textarea name="editor">';while(!feof($myfile)) {echo fgets($myfile);}
echo '</textarea></center>
<center><input type="submit" name="cssedit" value="SAVE CSS"></center>
</form>';
fclose($myfile);

Diatas adalah cara Membuat Editor CSS dengan Textarea, silakan dipelajari dan dipahami bila ada masalah dengan koding bisa komentar dibawah, semoga koding ini bermanfaat untuk anda yang membutuhkanya...Salam WriteCode Sampai jumpa ditutorial selanjutnya

Baca Juga : Carousal Product Responsive Ponsel dan Desktop