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


فهاد المشروع من كيفاش تسجل تعدل وتمسح من قاعدة البيانات ب pdo و jquery غادي نشوفو كيفاش نزيدو معلومات فقاعدة البيانات ومن بعد نديرولها تعديلات ثم نمسحوها بإستعمال pdo و jquery.

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

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

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

                                          CREATE TABLE IF NOT EXISTS notes
          (
              id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
              name VARCHAR(50) NOT NULL UNIQUE,
              description VARCHAR(255) NOT NULL,
              status VARCHAR(30) NOT NULL DEFAULT 'Non accomplie',
              created_at TIMESTAMP 
          )
                            

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

من بعد كنمشي wamp/www وكنزيد مجلد جديد كنسميه pdo_notes كنزيد فيه ملف كنسميه database.php غادي يكون فيه كود الإتصال بقاعدة البيانات الكود ديال الملف هو :

                                <?php

define("DSN", "mysql:host=localhost;dbname=agenda");
define("USERNAME", "root");
define("PASSWORD", "");

$options = array(PDO::ATTR_PERSISTENT => true);

try{
    $conn = new PDO(DSN, USERNAME, PASSWORD, $options);

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

}catch (PDOException $ex){
    echo "Une erreur est survenue".$ex->getMessage();
}
                            

3- الملفات الأساسية

فالمجلد الرئيسي ديالنا لي هو pdo_notes كنزيد فيه مجلد كنسميه includes غادي تزيد فيه ملف تسميه header.php و آخر تسميه footer.php الملف header.php فيه الإتصال بملفات css والقائمة لي غادي تمكنا من التنقل بين الصفحات الكود ديالو هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pdo Notes</title>
    <!-- Material Design fonts -->
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
    <!-- Bootstrap CSS cdn -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
          crossorigin="anonymous">
    <!-- Bootstrap CSS cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <!-- Material Design css -->
    <link rel="stylesheet" href="css/bootstrap-material-design.css">
    <link rel="stylesheet" href="css/ripples.css">
    <!-- Custom css -->
    <link rel="stylesheet" href="css/app.css">
</head>

<!-- Navigation -->
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">PDO Note App</a>
        </div>
        <div class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="create.php"><i class="fa fa-plus"></i>  Ajouter une note</a></li>
                <li><a href="tasks.php"><i class="fa fa-eye-slash"></i>  Mes notes</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- App Alert-->
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div id="ajax_msg" class="alert alert-success"></div>
    </div>
</div>
                            

4- الملفات الأساسية تتمة

دائما فincludes الملف footer.php الكود ديالو هو :

                                    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
<!-- Material Design JavaScript -->
<script src="js/material.js"></script>
<script src="js/ripples.js"></script>
<!-- Custom Javascript -->
<script src="js/app.js"></script>
<script> $.material.init(); </script>
</html>
                                

5- الملف add.php

فالمجلد الرئيسي ديالنا لي هو pdo_notes كنزيد فيه ملف جديد كنسميه create.php فيه غادي تكون ل form لي كتمكن من إضافة note لقاعدة البيانات الكود ديال الملف هو :

                                    <?php include("includes/header.php");?>
<div class="container">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <h3 class="text-primary">Ajouter une note</h3><hr>
            <form action="" method="post" id="addForm">
                <div class="form-group">
                    <label for="name" class="col-md-2 control-label">Titre</label>
                    <div class="col-md-10">
                        <input name="name" class="form-control" id="name" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="description" class="col-md-2 control-label">Description</label>
                    <div class="col-md-10">
                        <textarea class="form-control" rows="3" name="description" id="description"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" name="add" class="btn btn-success pull-right">
                    Valider <i class="fa fa-plus"></i></button>
                </div>  
            </form>
        </div>
    </div>
</div>
<?php include("includes/footer.php");?>
                                


بحث في الموقع


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