php and javascript

Chart of Accounts by php and javascript

دليل الحسابات يُعتبر أحد العناصر الأساسية في إدارة الحسابات المالية لأي منظمة أو شركة. يتمثل دليل الحسابات في مجموعة هرمية من الحسابات المالية المنظمة بشكل منطقي وهرمي يعكس هيكل الشركة ونشاطاتها المالية

Chart of Accounts by php and javascript

انشاء قواعد البيانات

في البداية يجب انشاء قاعدة بيانات phpmyadmin باسم ChartOfAccounts كما موضح بالصورة وباستخدام الكود التالي:

				
					CREATE DATABASE ChartOfAccounts ;

				
			

ثم نضغط زر Go 

بذلك قد انشانا قاعدة بيانات . بعد ذلك نقوم بانشاء الجداول عن طريق الاكواد التالية

				
					// category جدول 
CREATE TABLE category (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    parent_id VARCHAR(25),
    code VARCHAR(25),
    coins_id int(11),
    levels_id int(11)
)
				
			

جدول الفئات يحتوي علي اسماء دليل الحسابات واسم الاب والكود والعملة والمستوي

				
					// levels جدول 
CREATE TABLE levels (
    id INT AUTO_INCREMENT PRIMARY KEY,
    level VARCHAR(255) NOT NULL
)
				
			

جدول المستويات يحتوي علي مستوي كل بند في دليل الحسابات وتكون من مستوي رئيسي و مستوي فرعي

				
					// coins جدول 
CREATE TABLE coins (
    id INT AUTO_INCREMENT PRIMARY KEY,
    coin VARCHAR(255) NOT NULL
)
				
			

جدول العملات يحتوي علي العملات المستخدمة في كل بند في دليل الحسابات وتكون حسب العملات المستخدمة لديك مثال الدولار الامريكي والجنية المصري

ولتصبح في النهاية بهذا الشكل

database_connection.php

ننشئ صفحة database_connection.php ثم ننسخ بداخلها الكود التالي:

ويحتوي الكود علي لينك يربط localhost مع database تحت اسم chart of account ويوز باسم root وباسوورد فارغ بدون اسم 

يجب ان يكون اسم الداتا بيس مطابق للاسم في mysql الذي انشاناها في البداية

				
					<?php

//database_connection.php

$connect = new PDO("mysql:host=localhost; dbname=chartofaccounts", "root", "");

?>
				
			

انشاء صفحات العرض والاضافة

index.php

ننشئ صفحة index.php ثم ننسخ بداخلها الكود التالي:

ويحتوي الكود علي لينك ajax,bootstrap,datatable وفي الاستايل يحتوي علي خط كوفي عربي وهو المفضل و صورة باسم b1.jpg ويمكنك وضع الصورة الانسب لك 

وتنقسم الصفحة الي قسمين لاضافة او لعرض شجرة الحسابات كما تري. 

وفي النهاية ياتي الاسكربت الخاص بتوجيهك للصفحة المراد استدعاء منها المعلومات

				
					
<!DOCTYPE html>
<html dir='rtl'>
 <head>
 <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>دليـــــــــل الحســـــــــــابات</title> <script type="litespeed/javascript" data-src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script charset="utf8" type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> <script type="litespeed/javascript" data-src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script> <style>@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
* {
  font-family:'Droid Arabic Kufi', serif;
  box-sizing: border-box;
  font-size: small;
  }

body::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url(b1.jpg); /*Put your image url*/
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    opacity: 0.25; /*Value from 0.0 to 1.0*/
}</style></head>
 <body>
 
  <div class="container">
  <h3 align="center">دليـــــــــل الحســـــــــــابات &#160&#160&#160&#160&#160
    
  <a href="./edit/index.php" class="btn btn-warning" >التعديل والحذف</a>
    <a href="index.php" class="btn btn-info" >Back</a></h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">اضافة بيان لدليل الحسابات </div>
    <div class="panel-body">
   <div class="row">
    <div class="col-md-4">
     <h3 align="center"><p>اضافة فئـــــــة</p></h3>
     <br />
     <form method="post" id="treeview_form">
      <div class="form-group">
       <label>اختر الفئة الاب</label>
       <select name="parent_code" id="parent_code" class="form-control" style="padding: 1px;">
       
       </select>
      </div>
      <div class="form-group">
       <label>اضف الاسم الفرعي</label>
       <input type="text" name="name" id="name" class="form-control" style="padding: 1px;">
      </div>
      <div class="form-group">
       <label>اضف الكود</label>
       <input type="text" name="code" id="code" class="form-control" style="padding: 1px;">
      </div>
      <div class="form-group col-md-6">
       <label>اختر العملة </label>
       <select name="coins_id" id="coin" class="form-control" style="padding: 1px;">
       
       </select>
      </div>
      <div class="form-group col-md-6">
       <label>المستــــوي  </label>
       <select name="levels_id" id="level" class="form-control" style="padding: 1px;">
       
       </select>
      </div>
      <div class="form-group col-6">
       <input type="submit" name="action" id="action" value="Add" class="btn btn-success" />
       </div>
       </form>
    </div>
    <div class="col-md-8">
     <h3 align="center"><p>شجرة الحسابات</p></h3>
     <br />
      <div id="treeview" ></div>
    </div>
   </div>
  </div>
     
    </div>
   </div>
  </div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://onemoka.com/wp-content/litespeed/js/fab1146468b4d0fa2ce22fb558069cb8.js?ver=f0bd1"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html> <script type="litespeed/javascript">$(document).ready(function(){fill_parent_category();fill_treeview();function fill_treeview(){$.ajax({url:"fetch.php",dataType:"json",success:function(data){$('#treeview').treeview({data:data})}})}
function fill_parent_category(){$.ajax({url:'fill_parent_category.php',success:function(data){$('#parent_code').html(data)}});$.ajax({url:'fill_coins.php',success:function(data){$('#coin').html(data)}});$.ajax({url:'fill_levels.php',success:function(data){$('#level').html(data)}})}
$('#treeview_form').on('submit',function(event){event.preventDefault();$.ajax({url:"add.php",method:"POST",data:$(this).serialize(),success:function(data){fill_treeview();fill_parent_category();$('#treeview_form')[0].reset()}})})})</script> 
				
			

add.php

هي الصفحة المسئولة عن اضافة بيان جديد لدليل الحسابات عن طريق اضافتة لل database

ننشئ صفحة باسم add.php وننسخ بداخلها الكود التالي

				
					<?php

include('database_connection.php');

$data = array(
 ':name'  => $_POST['name'],
 ':parent_id' => $_POST['parent_code'],
 ':code' => $_POST['code'],
 ':coins_id' => $_POST['coins_id'],
 ':levels_id' => $_POST['levels_id']
);
$errors = [];

if (empty($_POST['name']) || empty($_POST['code'])) {
    $errors = "ادخـــــل بيـــــان";
}
if (count($errors) == 0) {
$query = "
 INSERT INTO category (name, parent_id, code, coins_id, levels_id) 
             VALUES (:name, :parent_id, :code, :coins_id, :levels_id)
";

$statement = $connect->prepare($query);

if($statement->execute($data))
{
 echo 'Category Added';
}
}else{
    echo $errors;
}

?>

				
			

fetch.php

هي الصفحة المسئولة عن استدعاء البيانات لدليل الحسابات من ال database 

ننشئ صفحة باسم fetch.php وننسخ بداخلها الكود التالي

				
					
<?php

//fetch.php

include('database_connection.php');

$parent_id = 0;

$query = "SELECT * FROM category";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $data = get_node_data($parent_id, $connect);
}

echo json_encode(array_values($data));

function get_node_data($parent_id, $connect)
{
 $query = "SELECT * FROM category WHERE parent_id = '".$parent_id."'";

 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 $output = array();
 foreach($result as $row)
 {
  $sub_array = array();
  $sub_array['text'] = ' '.$row['code'].' '.$row['name'].' ';
  $sub_array['nodes'] = array_values(get_node_data($row['code'], $connect));
  $output[] =$sub_array;
 }
 return $output;
}

?>

				
			

fill_coins.php

هي الصفحة المسئولة عن استدعاء البيانات الخاصة بنوع العملة حين اضافة بيان جديد لدليل الحسابات داخل ال database 

ننشئ صفحة باسم fill_coins.php وننسخ بداخلها الكود التالي

				
					
<?php

//fill_parent_category.php

include('database_connection.php');

$query = "SELECT * FROM coins ORDER BY id ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

//$output = '<option value="0"> -- اختـــــــر -- </option>';

foreach($result as $row)
{
 $output .= '<option value="'.$row["id"].'">'.$row["coin"].'</option>';
}

echo $output;

?>

				
			

fill_levels.php

هي الصفحة المسئولة عن استدعاء البيانات الخاصة بمستوي  كل بيان جديد حيث انه يكون رئيسي او فرعي وذلك حين اضافة بيان جديد لدليل الحسابات داخل ال database 

ننشئ صفحة باسم fill_levels.php وننسخ بداخلها الكود التالي

				
					
<?php

//fill_parent_category.php

include('database_connection.php');

$query = "SELECT * FROM coins ORDER BY id ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

//$output = '<option value="0"> -- اختـــــــر -- </option>';

foreach($result as $row)
{
 $output .= '<option value="'.$row["id"].'">'.$row["coin"].'</option>';
}

echo $output;

?>

				
			

fill_parent_category.php

هي الصفحة المسئولة عن استدعاء البيانات الخاصة بالتابع او الاب وذلك حين اضافة بيان جديد لدليل الحسابات داخل ال database 

ننشئ صفحة باسم fill_parent_category.php وننسخ بداخلها الكود التالي

				
					
<?php

//fill_parent_category.php

include('database_connection.php');

$query = "SELECT * FROM category ORDER BY code ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

$output = '<option value="0"> -- اختـــــــر -- </option>';

foreach($result as $row)
{
 $output .= '<option value="'.$row["code"].'">'.$row["code"].' '.$row["name"].'</option>';
}

echo $output;

?>

				
			

يجب ادخال البيانات الموضحة في الصورة يدويا علي اعتبار انها بيانات يبني عليها شجرة الحسابات 

insert this data manually
insert this data manually

انشاء صفحات التعديل

بعد ان انشائنا صفحات العرض والاضافة نقوم بانشاء صفحات التعديل علي البيانات وذلك بانشاء فولدر edit داخل فولدر chart-of-accounts وكما هو موضح بالصورة

folder edit and files
folder edit and files

وداخل فولدر edit نقوم بانشاء ملفات index.php , action.php and fetch.php

index.php

هي صفحة عرض البيانات التي نقوم بالحذف او التعديل عليها وتحتوي علي datatable , اسكربت يقوم بالتوجية الي fetch للقيام بعملية الحذف او التعديل من الداتا بيس

ننشئ صفحة باسم index.php  داخل فولدر edit وننسخ بداخلها الكود التالي

				
					
<html dir="rtl">
 <head> <script type="litespeed/javascript" data-src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> <script type="litespeed/javascript" data-src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script type="litespeed/javascript" data-src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> <script type="litespeed/javascript" data-src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="litespeed/javascript" data-src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script> <title>accounting</title><style>@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
* {
  font-family:'Droid Arabic Kufi', serif;
  box-sizing: border-box;
  font-size: small;
  }

body::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url(../b1.jpg); /*Put your image url*/
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    opacity: 0.25; /*Value from 0.0 to 1.0*/
}

@media print
{
.container { width:100%; }
button,.btn-info {display:none;}

}</style></head>
 <body>
  <div class="container">
   <h3 align="center"> &#160&#160&#160&#160&#160تعديل بيانات دليل الحسابات
   <a href="/chart-of-accounts/index.php" class="btn btn-info" >Back</a></h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">تعديل بيانات</div>
    <div class="panel-body">
     <button style="float:left;" onclick="window.print();return false">طباعـة  <i class="fas fa-print" title="طباعة "></i></button>
      <div class="table-responsive">
      <table id="sample_data" class="table table-bordered table-striped">
       <thead>
        <tr>
         <th style="text-align: right;width:0%;">ID</th>
         <th style="text-align: right;width:15%;">رقم الحساب </th>
         <th style="text-align: right;">اسم الحساب </th>
         <th style="text-align: center;width:0%;">حسابة الاعلي</th>
         <th style="text-align: center;width:0%;"> نوع الحساب</th>
         <th style="text-align: right;width:10%;">العملة</th>
         <th style="text-align: right;width:10%;">المستوي</th>
         <th style="text-align: right;width:10%;">التقرير</th>
        </tr>
       </thead>
       <tbody></tbody>
      </table>
     </div>
    </div>
   </div>
  </div>
  <br />
  <br /> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://onemoka.com/wp-content/litespeed/js/fab1146468b4d0fa2ce22fb558069cb8.js?ver=f0bd1"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html> <script language="javascript"  type="litespeed/javascript">$(document).ready(function(){var dataTable=$('#sample_data').DataTable({"processing":!0,"serverSide":!0,"order":[],"ajax":{url:"fetch.php",type:"POST"}});$('#sample_data').on('draw.dt',function(){$('#sample_data').Tabledit({url:'action.php',dataType:'json',columns:{identifier:[0,'id'],editable:[[2,'name'],[5,'coins_id','{"1":"دولار امريكي","2":" الجنية المصري"}'],[6,'levels_id','{"1":"رئيسي ","2":" فرعي"}']]},restoreButton:!1,onSuccess:function(data,textStatus,jqXHR){if(data.action=='delete'){$('#'+data.id).remove();$('#sample_data').DataTable().ajax.reload()}}})});var dt=$('#sample_data').DataTable();dt.columns([]).visible(!1)})</script> 
				
			

action.php

هي صفحة تعمل في الخلفية علي تعديل او حذف البيانات 

ننشئ صفحة باسم action.php  داخل فولدر edit وننسخ بداخلها الكود التالي

				
					
<?php

//action.php

include('../database_connection.php');

if($_POST['action'] == 'edit')
{
 $data = array(
  ':id'=> $_POST['id'],
  ':name'=> $_POST['name'],
  ':coins_id'=> $_POST['coins_id'],
  ':levels_id'=> $_POST['levels_id']
 );

 $query = "
 UPDATE category SET 
 name = :name ,
 levels_id = :levels_id ,
 coins_id = :coins_id 
 WHERE id = :id 
 ";
 $statement = $connect->prepare($query);
 $statement->execute($data);
 echo json_encode($_POST);
}

if($_POST['action'] == 'delete')
{
 $query = "
 DELETE FROM category 
 WHERE id = '".$_POST["id"]."' AND parent_id !=0
 ";
 $statement = $connect->prepare($query);
 $statement->execute();
 echo json_encode($_POST);
}

?>
				
			

fetch.php

هي صفحة تعمل في الخلفية علي استدعاء البيانات من قاعدة البيانات بعد عملية الحذف او التعديل

ننشئ صفحة باسم fetch.php  داخل فولدر edit وننسخ بداخلها الكود التالي

				
					
<?php

//fetch.php

include('../database_connection.php');

$column = array( "name", "code", "coin", "level", "id");

$query = "
SELECT category.id,category.name,category.parent_id,
category.code,coins.coin,category.coins_id,levels.level,
CASE
      WHEN (code < 2) THEN 'الاصول'
      WHEN (code < 3) THEN 'الخصوم'
      WHEN (code < 4) THEN 'المصروفات'
      WHEN (code < 5) THEN 'الايرادات'
      ELSE '0'
	END typ,
CASE
      WHEN (code < 3) THEN 'المركز المالي'
      WHEN (code >= 3) THEN 'قائمة الدخل'
      ELSE '0'
	END stat
FROM category
LEFT JOIN coins ON coins.id = coins_id
LEFT JOIN levels ON levels.id = levels_id
";

if(isset($_POST["search"]["value"]))
{
 $query .= '
 WHERE name LIKE "%'.$_POST["search"]["value"].'%" 
 OR parent_id LIKE "%'.$_POST["search"]["value"].'%" 
 ';
}

if(isset($_POST["order"]))
{
 $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= 'ORDER BY code asc ';
}
$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

foreach($result as $row)
{
 $sub_array = array();
 $sub_array[] = $row['id'];
 $sub_array[] = $row['code'];
 $sub_array[] = $row['name'];
 $sub_array[] = $row['parent_id'];
 $sub_array[] = $row['typ'];
 $sub_array[] = $row['coin'];
 $sub_array[] = $row['level'];
 $sub_array[] = $row['stat'];
 $data[] = $sub_array;
}

function count_all_data($connect)
{
 $query = "SELECT * FROM category";
 $statement = $connect->prepare($query);
 $statement->execute();
 return $statement->rowCount();
}

$output = array(
 'draw'   => intval($_POST['draw']),
 'recordsTotal' => count_all_data($connect),
 'recordsFiltered' => $number_filter_row,
 'data'   => $data
);

echo json_encode($output);

?>
				
			

وتكون صفحة التعديل والحذف بالشكل التالي داخل جدول datatable الشهير و امكانية البحث او الطباعه والعرض

edit page
edit page

Sharing to

Facebook
Twitter
LinkedIn

47 فكرة عن “Chart of Accounts by php and javascript”

  1. Hi! Someone in my Facebook group shared this website with us so I came to check it out. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers! Terrific blog and amazing design and style.

  2. I was curious if you ever considered changing the layout of your website? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two pictures. Maybe you could space it out better?

  3. Its such as you learn my mind! You appear to know so much approximately this,
    like you wrote the e book in it or something.
    I believe that you just can do with some % to power the message house a little bit, however instead of
    that, that is excellent blog. A fantastic read. I’ll certainly
    be back.

  4. What i don’t realize is in reality how you are now
    not really a lot more smartly-favored than you might be now.

    You are so intelligent. You recognize thus significantly with regards to this topic, produced me in my view
    believe it from so many numerous angles. Its like men and women are not involved except it’s one thing to accomplish with Lady gaga!
    Your individual stuffs nice. Always maintain it up!

  5. Hi there just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Safari.
    I’m not sure if this is a format issue or something to do with
    internet browser compatibility but I figured I’d post to let you
    know. The layout look great though! Hope you get the
    issue solved soon. Thanks

  6. What i don’t understood is if truth be told how you’re no longer really much more well-preferred than you may be now.
    You are very intelligent. You already know therefore
    significantly on the subject of this matter, made me in my view believe it from numerous numerous angles.
    Its like women and men aren’t interested until it’s something to do with Girl gaga!
    Your own stuffs nice. All the time take care of it up!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top