Skip to content

Instantly share code, notes, and snippets.

@malikkurosaki

malikkurosaki/malik.php

Created April 2, 2018 03:20
Show Gist options
  • Save malikkurosaki/942c740e60fc623decc4ee31acacaaa7 to your computer and use it in GitHub Desktop.
Save malikkurosaki/942c740e60fc623decc4ee31acacaaa7 to your computer and use it in GitHub Desktop.
Download ZIP
w3cm simple flat file no need database with w3css
Raw
malik.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link{
text-decoration: none;
}
body{
user-select: none;
}
#tr1{
}
html{
overflow: auto;
}
#toolimage{
width: 100%;
position: fixed;
z-index: 1;
bottom: 0;
}
#sideBar{
top: 0;
width: 100%;
height: 100px;
position: fixed;
overflow: auto;
}
.marginTop{
margin-top: 100px;
}
#imageWidth{
width: 100%;
}
#closeMenu{
position: fixed;
right: 0;
margin-right: 12px;
}
</style>
</head>
<body>
<div id="toolimage" class="w3-cotent w3-blue-grey w3-center w3-hide">
<p>image width</p>
<input id="imageWidth" type="range" min="5" max="100" step="5">
</div>
<div id="sideBar" class="w3-blue-grey w3-border w3-border-white">
<div id="closeMenu" class="w3-tag w3-red ">X</div>
</div>
<div id="descContainer" class="w3-container w3-content w3-responsive w3-padding w3-margin w3-blue-grey w3-hide">
<span id="closeSave" class="w3-right w3-tag w3-red">X</span>
<div class="w3-button w3-center">Short Descriptin</div>
<p class="w3-small w3-text-yellow">title</p>
<div id="title" class=" w3-border-bottom" contenteditable="true" ></div>
<p class="w3-small w3-text-yellow">description</p>
<div id="desc" class="w3-border-bottom"contenteditable="true" ></div>
<p class="w3-small w3-text-yellow">image</p>
<div id="urlImage" class="w3-border-bottom" contenteditable="true" ></div>
<p class="w3-small w3-text-yellow">tag</p>
<div id="tag" class="w3-border-bottom" >blog</div>
<br>
<div class="w3-container w3-border w3-padding">
<p class="w3-small w3-text-yellow">choose tag one</p>
<div class="">
<?php
$pg = "page/";
$sdPg = scandir($pg);
$adf = array_diff($sdPg,array("..","."));
foreach($adf as $tag){
echo "<a class='tag w3-small w3-btn'>".$tag."</a>";
}
?>
</div>
<div class="w3-row">
<p class="w3-small w3-text-yellow">or create one</p>
<div id="createTag" class="w3-border-bottom" contenteditable="true"></div>
<button id="tagBtn" class="w3-right w3-grey">create</button>
<script>
var getTag = document.getElementsByClassName("tag");
var nameTag = document.getElementById("tag");
for(var i = 0;i<getTag.length;i++){
getTag[i].onclick = function(e){
nameTag.innerHTML = e.target.innerHTML;
}
}
var createTag = document.getElementById("createTag");
var theTag = document.getElementById("tagBtn");
theTag.onclick = function(){
if(createTag.innerHTML == ""){
alert("tag empty not allowed");
}else{
var xmTag = new XMLHttpRequest();
xmTag.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
nameTag.innerHTML = this.responseText;
createTag.innerHTML = "";
}
}
xmTag.open("GET","order.php?tag="+createTag.innerHTML,true);
xmTag.send();
}
}
</script>
</div>
</div>
<button id="finalSave" class="w3-right w3-grey">save</button>
</div>
<div id="editcontainer" class="w3-content w3-responsive">
<table class="w3-table-all">
<tr id="tr1" class="w3-blue-grey" >
<td>
<div id="div1"></div>
</td>
</tr>
<tr>
<td>
<div id="div2"></div>
</td>
</tr>
<tr>
<td id="td3">
<div id="div3">
<?php echo file_get_contents("temp.txt"); ?>
</div>
</td>
</tr>
</table>
</div>
<script>
var data = {
background:"w3-red w3-pink w3-purple w3-deep-purple w3-indigo w3-blue w3-light-blue w3-cyan w3-aqua w3-teal w3-green w3-light-green w3-lime w3-sand w3-khaki w3-yellow w3-amber w3-orange w3-deep-orange w3-blue-grey w3-brown w3-light-grey w3-grey w3-dark-grey w3-black w3-pale-red w3-pale-yellow w3-pale-green w3-pale-blue w3-transparent",
textColor:"w3-text-red w3-text-green w3-text-blue w3-text-yellow w3-text-grey w3-text-dark-grey w3-text-black w3-text-white w3-text-pink w3-text-purple w3-text-teal w3-text-light-green w3-text-lime w3-text-deep-purple w3-text-indigo w3-text-light-blue w3-text-blue-grey w3-text-cyan w3-text-aqua w3-text-amber w3-text-orange w3-text-deep-orange w3-text-sand w3-text-khaki w3-text-brown",
round:"w3-round w3-round-small w3-round-medium w3-round-large w3-round-xlarge w3-round-xxlarge w3-round-jumbo",
padding:"w3-padding-small w3-padding w3-padding-large w3-padding-16 w3-padding-24 w3-padding-32 w3-padding-48 w3-padding-64",
margin:"w3-margin w3-margin-top w3-margin-right w3-margin-bottom w3-margin-left w3-section",
border:"w3-border w3-border-top w3-border-right w3-border-bottom w3-border-left w3-border-0 w3-border-color w3-bottombar w3-leftbar w3-rightbar w3-topbar",
container:"w3-container w3-panel w3-badge w3-tag w3-ul w3-display-container w3-code w3-codespan",
card:"w3-card w3-card-2 w3-card-4",
responsive:"w3-row w3-row-padding w3-content w3-half w3-third w3-twothird w3-quarter w3-threequarter w3-col w3-rest w3-hide-small w3-hide-medium w3-hide-large w3-image w3-mobile",
layout:"w3-cell-row w3-cell w3-cell-top w3-cell-middle w3-cell-bottom",
navigation:"w3-bar w3-bar-block w3-bar-item w3-collapse w3-main",
button:"w3-button w3-btn w3-ripple",
input:"w3-input w3-check w3-radio w3-select w3-animate-input",
modal:"w3-tooltip w3-text w3-leftbar w3-image w3-center w3-right w3-container",
animation:"w3-animate-top w3-animate-left w3-animate-bottom w3-animate-right w3-animate-opacity w3-animate-zoom w3-animate-fading w3-spin w3-animate-input",
font:"w3-tiny w3-small w3-large w3-xlarge w3-xxlarge w3-xxxlarge w3-jumbo w3-wide w3-serif",
effect:"w3-opacity w3-opacity-off w3-opacity-min w3-opacity-max w3-grayscale-min w3-grayscale w3-grayscale-max w3-sepia-min w3-sepia w3-sepia-max "
}
var p = [data.background.split(" "),data.textColor.split(" "),data.round.split(" "),data.padding.split(" "),data.margin.split(" "),data.border.split(" "),data.container.split(" "),data.card.split(" "),data.responsive.split(" "),data.layout.split(" "),data.navigation.split(" "),data.button.split(" "),data.input.split(" "),data.modal.split(" "),data.animation.split(" "),data.font.split(" "),data.effect.split(" ")];
var pnl = ["menu","newline","remove","link","picture","youtube","tool","save"];
var classData = Object.keys(data);
var div1 = gi("div1");
var div2 = gi("div2");
var div3 = gi("div3");
var savedrf = gi(pnl[6])
var closeMenu = document.getElementById("closeMenu");
var sideBar = document.getElementById("sideBar");
var colectimg = document.getElementsByTagName("IMG");
var targetIMG;
var descContainer = gi("descContainer");
var title = gi("title");
var desc = gi("desc");
var urlImage = gi("urlImage");
var save = gi("save");
var finalSave = gi("finalSave");
var descContainer = gi("descContainer");
var detailsContainer = document.createElement("div");
var closeSave = gi("closeSave");
var tag = gi("tag");
for(var x=0;x<p.length;x++){
var toolDetails = document.createElement("details");
var toolSummry = document.createElement("summary");
var toolContaner = document.createElement("div");
var tcText = document.createTextNode(classData[x]);
toolContaner.setAttribute("class","cssContainer");
toolSummry.setAttribute("class","");
detailsContainer.setAttribute("class","w3-margin-top w3-padding");
toolDetails.appendChild(toolSummry);
toolSummry.appendChild(tcText);
toolDetails.appendChild(toolContaner);
detailsContainer.appendChild(toolDetails);
sideBar.appendChild(detailsContainer);
var cssItem = document.getElementsByClassName("cssContainer");
cssList(p[x],cssItem[x]);
}
function cssList(...arg){
for(var i =0;i<arg[0].length;i++){
var cssContainer = document.createElement("div");
cssContainer.setAttribute("class",arg[0][i]+" w3-border w3-border-grey w3-margin-bottom w3-small w3-padding w3css");
cssContainer.setAttribute("id",arg[0][i]);
var cssTx = document.createTextNode(arg[0][i]);
cssContainer.appendChild(cssTx);
arg[1].appendChild(cssContainer);
}
}
var w3css = document.getElementsByClassName("w3css");
for(var i=0;i<w3css.length;i++){
w3css[i].onclick = function(e){
if(document.getSelection()){
document.getSelection().anchorNode.parentElement.classList.toggle(e.target.id);
}
}
}
for(var i=0;i<pnl.length;i++){
var pnl1 = cel("button",pnl[i]);
pnl1.setAttribute("id",pnl[i]);
pnl1.setAttribute("class","w3-grey");
div1.appendChild(pnl1);
}
sideBar.classList.add("w3-hide");
sideBar.classList.add("w3-animate-left");
gi("menu").onclick = function(){
sideBar.classList.remove("w3-hide");
gi("editcontainer").classList.add("marginTop");
}
closeMenu.onclick = function(){
sideBar.classList.add("w3-hide");
gi("editcontainer").classList.remove("marginTop");
}
gi("newline").onclick = function(){
createNewLine()
}
gi("remove").onclick = function(e){
if(document.getSelection().anchorNode.parentElement.classList.contains("edit")){
document.getSelection().anchorNode.parentElement.remove();
console.log("removed");
}else{
document.getSelection().removeAllRanges();
}
}
gi("link").onclick = function(){
var prm = prompt("select the text than insert url of link hire");
if(prm == null || prm == ""){
console.log("link canceled");
}else{
if(prm.includes("http")){
var lk = document.createElement("a");
lk.setAttribute("href",prm);
document.getSelection().getRangeAt(0).surroundContents(lk);
}else{
console.log("please indludes http / https");
}
}
}
var imageButton = document.getElementById("picture");
imageButton.onclick = function(){
var prmi = prompt("put pointer on text editor than insert url of image hire");
if(prmi == null || prmi == ""){
console.log("image link canceled");
}else{
if(prmi.includes("http")){
var pct = document.createElement("IMG");
pct.setAttribute("src",prmi);
document.getSelection().getRangeAt(0).surroundContents(pct);
}else{
console.log("please indludes http / https");
}
}
}
gi("youtube").onclick = function(){
var prmy = prompt("select the text than insert cod id youtube video exmpl : gd4re78jdb");
if(prmy == null || prmy == ""){
console.log("youtube canseled");
}else{
var ytb = document.createElement("iframe");
ytb.setAttribute("src","https://www.youtube.com/embed/"+prmy);
ytb.setAttribute("frameborder","0");
ytb.setAttribute("allowfullscreen",true);
document.getSelection().getRangeAt(0).surroundContents(ytb);
}
}
gi("save").onclick = function(){
descContainer.classList.remove("w3-hide");
prepareSave();
finalSave.onclick = function(){
sendSave();
}
}
closeSave.onclick = function(){
descContainer.classList.add("w3-hide");
}
var g = [];
document.body.onclick = function(e){
console.log(e.target.id);
saveTemp();
for(var i =0;i<colectimg.length;i++){
colectimg[i].setAttribute("id","id"+i);
colectimg[i].removeAttribute("width");
colectimg[i].removeAttribute("height");
}
if(e.target.tagName == "IMG"){
gi("toolimage").classList.toggle("w3-hide");
targetImg = gi(e.target.id);
}
setLink();
}
document.body.onmousemove = function(){
}
document.body.onmouseover = function(e){
}
document.body.onmouseout = function(e){
}
gi("imageWidth").onchange = function(){
targetImg.style.width = gi("imageWidth").value+"%";
}
//===core===
function cel(...arg){
var ar1 = document.createElement(arg[0]);
var ar2 = document.createTextNode(arg[1]);
ar1.appendChild(ar2);
return ar1;
}
function gi(...arg){
return document.getElementById(arg[0]);
}
function editable(){
var gedit = document.getElementsByClassName("edit");
for(var i=0;i<gedit.length;i++){
gedit[i].contentEditable = true;
}
}
function rm(){
var rm1 = document.createElement("span");
var rm2 = document.createTextNode("x");
rm1.appendChild(rm2);
rm1.setAttribute("class","w3-tag w3-red w3-right");
return rm1;
}
function saveTemp(){
var yy = [];
var t = document.getElementsByClassName("edit");
for(var i=0;i<t.length;i++){
var r = [];
var r2 = new XMLSerializer();
r = r2.serializeToString(t[i]);
yy.push(r);
}
var aj = yy.join("");
var doc = encodeURI(aj);
var xm = new XMLHttpRequest();
xm.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
if(this.responseText.includes("berhasil")){
console.log("saved");
}else{
console.log("failed");
}
}
};
xm.open("GET","order.php?e="+doc,true);
xm.send();
}
function showText(){
var xms = new XMLHttpRequest();
xms.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var nedit = document.createElement("div");
nedit.innerHTML = this.responseText;
nedit.cloneNode(true);
arg[0].appendChild(nedit);
}
};
xms.open("GET","temp.txt",true);
xms.send();
}
function createNewLine(){
var itemedit = cel("div","edit me");
itemedit.setAttribute("class","edit");
div3.appendChild(itemedit);
editable();
}
function removeRange(){
if(document.getSelection().anchorNode.parentElement.classList.contains("edit")){
}else{
document.getSelection().removeAllRanges();
}
}
function setLink(){
var alink = document.getElementsByTagName("a");
for(var i =0;i<alink.length;i++){
alink[i].classList.add("w3-text-blue");
alink[i].classList.add("w3-hover");
}
}
function prepareSave(){
var getEdit = document.getElementsByClassName("edit");
var getPicture = document.getElementsByTagName("IMG");
var getTitle = getEdit[0].innerHTML;
var getDesc = getEdit[1].innerHTML;
var getImage = getPicture[0].src;
var tagItem = createTag.innerHTML;
title.innerHTML = getTitle;
desc.innerHTML = getDesc;
urlImage.innerHTML = getImage;
}
function sendSave(){
var getEdit = document.getElementsByClassName("edit");
var getPicture = document.getElementsByTagName("IMG");
var getTitle = getEdit[0].innerHTML;
var getDesc = getEdit[1].innerHTML;
var getImage = getPicture[0].src;
var tagItem = tag.innerHTML;
title.innerHTML = getTitle;
desc.innerHTML = getDesc;
urlImage.innerHTML = getImage;
var sendXML = new XMLHttpRequest();
sendXML.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
console.log(this.responseText);
}
};
sendXML.open("GET","order.php?tl="+getTitle+"&&ds="+getDesc+"&&im="+getImage+"&&tg="+tagItem,true);
sendXML.send();
}
</script>
</body>
</html>
<?php
if(file_exists("page")){
}else{
if(mkdir("page")){
echo "<script>alert('page created');</script>";
}
}
?>
Raw
order.php
<?php
if(isset($_GET["e"])){
if(file_put_contents("temp.txt",$_GET["e"])){
echo "berhasil";
}else{
echo "gagal";
}
}
if(isset($_GET['tag'])){
if(file_exists("page/".$_GET['tag'])){
echo "the tag name is exist";
}else{
if(mkdir("page/".$_GET['tag'])){
echo $_GET['tag'];
}else{
echo "error created tag";
}
}
}
if(isset($_GET["tl"])){
$title = $_GET["tl"];
$desc = $_GET["ds"];
$image = $_GET["im"];
$tag = $_GET["tg"];
$content = file_get_contents("temp.txt");
if(file_put_contents("page/".$tag."/".$title.".html",$content)){
$og = $title."\n".$desc."\n".$image."\n".$tag;
if(file_put_contents("page/".$tag."/".$title.".txt",$og)){
echo "page saved";
}else{
echo "error code 02";
}
}else{
echo "error 01 code";
}
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment