دليل الحسابات يُعتبر أحد العناصر الأساسية في إدارة الحسابات المالية لأي منظمة أو شركة. يتمثل دليل الحسابات في مجموعة هرمية من الحسابات المالية المنظمة بشكل منطقي وهرمي يعكس هيكل الشركة ونشاطاتها المالية
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">دليـــــــــل الحســـــــــــابات      
<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/233bc1e470becfb3cd6eb40571bbfa85.js?ver=54b1f"></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;
?>
يجب ادخال البيانات الموضحة في الصورة يدويا علي اعتبار انها بيانات يبني عليها شجرة الحسابات
انشاء صفحات التعديل
بعد ان انشائنا صفحات العرض والاضافة نقوم بانشاء صفحات التعديل علي البيانات وذلك بانشاء فولدر edit داخل فولدر chart-of-accounts وكما هو موضح بالصورة
وداخل فولدر 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">      تعديل بيانات دليل الحسابات
<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/233bc1e470becfb3cd6eb40571bbfa85.js?ver=54b1f"></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 الشهير و امكانية البحث او الطباعه والعرض
Sharing to
Facebook
Twitter
LinkedIn
