Contacts App ب Axios & Php الجزء الأول

Contacts App ب Axios & Php الجزء الأول


فهاد ل projet الجديد من سلسلة php غادي نشوفوا كيفاش نقادو واحد ل application simple لي كتمكن من إضافة des contacts لقاعدة البيانات.

المتغير فهاد ل projet هو أننا غادي نخدمو ب axios لي هو واحد library لي كتمكنا باش نديرو des requêtes http لي غادي يمكنونا من القيام بعمليات الإضافة التعديل والحذف دون الحاجة لتحديث الصفحة.

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

1- إضافة قاعدة البيانات

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

                                //créer la table contacts

CREATE TABLE `contacts` (
  `id` int(11) NOT NULL,
  `nom` varchar(255) NOT NULL,
  `prenom` varchar(255) NOT NULL,
  `tel` int(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1

ALTER TABLE `contacts`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `contacts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
                            

2- الإتصال ب بقاعدة البيانات

ثاني حاجة غادي تزيد dossier ف xampp او wamp نتا وباش خدام سميه لي بغيتي من بعد غادي تزيد فيه dossier سميه database فيه زيد fichier سميه constantes.php غادي يكونوا فيه les variables لي غادي يمكنونا من الإتصال بقاعدة البيانات الكود ديال الملف هو :

                                <?php 
    define('HOST','localhost');
    define('USER','root');
    define('PASSWORD','');
    define('DATABASE','contacts');
                            

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

دائما فنفس dossier لي هو database زيد ملف جديد سميه database.php فيه غادي يكون الكود لي كيمكن من ربط الإتصال مع قاعدة البيانات هادشي راه سبق شفناه فدروس سابقة الكود ديال الملف هو:

                                <?php 
require('constantes.php');
$con = mysqli_connect(HOST,USER,PASSWORD,DATABASE);
                            

4- إضافة الملفات الرئيسية

ف dossier ديال ل projet زيد dossier جديد سميه includes فيه زيد ملف سميه header.php هنا غادي يكونوا روابط css خدمنا ب bootstrap 4 مكنتيش كتعرفوا شوف دورات المبتدئين راه عندنا دورة bootstrap 4 للمبتدئين.
درنا ايضا include للملف الخاص بالإتصال بقاعدة البيانات باش يكون عندنا فجميع الملفات لي غادي نزيدو من بعد.
الكود لي زدنا هو:

                                    <?php 
    include('database/database.php'); 
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <title>Axios Contacts App</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
        <a class="navbar-brand" href="index.php">Axios Contacts App</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.php">Accueil <span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>
                                

5- إضافة الملفات الرئيسية تتمة

دائما ف dossier includes فيه زيد ملف سميه footer.php هنا غادي يكونوا روابط javascript  بما فيها ديال axios وايضا ملف سميناه main.js غادي نزيدوه من بعد.
الكود لي زدنا هو:

                                    <footer class="mt-4">
        <p class="text-center">DCoding©2018</p>
    </footer>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
                                


بحث في الموقع


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