كيفاش تسجل تعدل تمسح من قاعدة البيانات بإستعمال Ajax الجزء الأول


فهاد المشروع من كيفاش تسجل تعدل تمسح من قاعدة البيانات بإستعمال Ajax غادي نشوفو كيفاش نقادو واحد ل carnet d'adresses لي كيمكن من حفظ المعلومات الخاصة بشخص كما كيمكن من تعديل هاد المعلومات أو حدفها .

نظرة سريعة بالفيديو

1- إنشاء قاعدة البيانات

أول حاجة غادي نديرو هي غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها adressbook من بعد غادي نزيد فيها table نسميها contacts هادي هي قاعدة البيانات لي غادي تمكنا من حفظ المعلومات الخاصة بشخص معين الكود باش تزيد الجدول فقاعدة البيانات هو :

                                --
-- Structure de la table `contacts`
--

CREATE TABLE IF NOT EXISTS `contacts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(255) NOT NULL,
  `prenom` varchar(255) NOT NULL,
  `email` varchar(50) NOT NULL,
  `adresse` varchar(100) NOT NULL,
  `ville` varchar(100) NOT NULL,
  `phone` int(10) NOT NULL,
  `date_added` timestamp NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;
                            

2- مجلد المشروع وباقي المجلدات

غادي تمشي ل wamp/www وغادي تزيد مجلد جديد تسميه adresse_book من بعد تزيد فيه 7 مجلدات تسميهم css,config,core,includes,fonts,libraries,js منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css والملف bootstrap.min.js ف js و الملفات لي ف fonts فالمجلد fonts من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php ف includes الكود ديال header.php هو :

                                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Adress Book</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/custom.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Carnet d'adresse</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">Accueil</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
                            

3- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات ولي غادي يربط ملفات js بالملفات ديالنا.

                                   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/script.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
                            

4- ملفات الإتصال بقاعدة البيانات

فالمجلد config غادي تزيد ملف جديد سميه config.php فيه des constantes لي غادي يمكننا باش نتاصلو بقاعدة البيانات الكود ديالو هو :

                                    <?php
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASSWORD','');
define('DB_NAME','adressbook');
?>

                                

5- الملف init.php

فالمجلد core غادي تزيد ملف جديد سميه init .php فيه الكود لي غادي يمكن من إضافة الملف لي غادي يمكنا من القيام ب les requêtes ديالنا اتوماتيكيا بلا مانبقاو فكل ملف نزيدوه ب include الكود ديالو هو :

                                    <?php
require_once('config/config.php');
function __autoload($class_name){
  require_once('libraries/'.$class_name.'.php');
}
?>
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد