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

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


فهاد الدرس غادي نقادو واحد المشروع بسيط لي عبارة عن chatbox الهدف هنا ماشي هو نديرو chat ولكن الهدف هو تعرف كيفاش تسجل المعلومات فقاعدة البيانات بإستعمال Ajax و php المشروع بسيط هو للمبتدئين.

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

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

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

                                CREATE TABLE IF NOT EXISTS `messages` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Nom` varchar(30) NOT NULL,
  `Message` text NOT NULL,
  `date_ajout` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

                            

- الصفحة الرئيسية وباقي الصفحات

أول حاجة غادي تمشي ل wamp/www وغادي تزيد مجلد جديد تسميه php-shout-box من بعد تزيد فيه جوج مجلدات واحد تسميه css والآخر js غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css والملف bootstrap.min.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php وفالآخر تزيد ملف تسميه index.php لي هي الصفحة الرئيسية ديالنا الكود ديال header.php و footer.php هو :

                                //header.php code

<!DOCTYPE html>
<html lang="fr">
  <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>Simple Php Chat Box</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <!-- 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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

//footer.php code

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

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

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

                                //database.php code

<?php 
//connect to database
$con = mysqli_connect('localhost','root','','chatbox');
if(mysqli_connect_errno()){
    echo 'connexion echouée!';
}

//chatbox.php code

<?php 
include('database.php');
if(isset($_POST['name']) && isset($_POST['message'])){
    $name = $_POST['name'];
    $message = $_POST['message'];
    $date = $_POST['date'];
    date_default_timezone_set('Africa/Dakar');
    $query = "INSERT INTO messages (Nom,Message,date_ajout) VALUES('$name','$message','$date')";
    if(!mysqli_query($con,$query)){
        echo 'Error'.mysqli_error($con);
    }else{
        echo '<li>'.$name.':'.$message.'['.$date.']</li>';
 }
                            

- الملف script.js و style.css

غادي نزيد ملف فالمجلد js غادي نسميه script.js هو لي غادي يمكنني من الإتصال بالملف chatbox.php وإرسال البيانات لي دخلها المستخدم بإستخدام jquery و ajax كما غادي يمكني من التحقق بلي حتى شي حقل ما خاوي من بعد غادي نزيد ملف فالمجلد css غادي نسميه style.css الكود ديالهم هو :

                                    //script.js code

$(document).ready(function(){
    $('#submit').on('click',function(e){
        var name = $('#name').val();
        var message = $('#message').val();
        var currentdate = new Date(); 
        var datetime = "Ajouté le :" + currentdate.getDate() + "-"
                + (currentdate.getMonth()+1)  + "-" 
                + currentdate.getFullYear() + " à "  
                + currentdate.getHours() + ":"  
                + currentdate.getMinutes() + ":" 
                + currentdate.getSeconds();
        var datastring = 'name=' + name + '&message='+ message + '&date=' + datetime;
        //validation
        if(name == '' || message == ''){
            alert('Veuillez entrer votre nom et le message !');
        }else{
            $.ajax({
                type : "POST",
                url : "../php-shout-box/chatbox.php",
                data : datastring,
                cache :false,
                success : function(html){
                    $('#shouts ul').prepend(html);
                    document.getElementById("form").reset();
                }
            });
        }
        e.preventDefault();
    });
});

//style.css

body{
    background:#c9c9c9;
}
.panel{
    margin-top:100px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.panel-footer{
    margin-bottom: 20px;
}
div.shouts ul li{
    list-style-type: none;
    margin : 10px auto;
}
div.shouts{
    height:300px;
    width:98%;
    border : 1px dashed #000;
    margin : 10px 10px 10px 10px;
    padding: 10px;
}
form{
    margin : 10px auto;
}
                                

- الصفحة الرئيسية

الصفحة الرئيسية لي هي index.php غادي يكون فيها الكود لي غادي يمكن المستخدم من إرسال البيانات لقاعدة البيانات و لي غادي يعرض البيانات لي تسجلو لي هما عبارة عن رسائل الكود النهائي ديالها :

                                    <?php 
include('header.php');
include('database.php');
$query = "SELECT * FROM messages ORDER BY date_ajout DESC";
$messages = mysqli_query($con,$query);
?>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <h1 class="text-center text-primary">Chat Box</h1>
                <hr>
                <section class="questions-box">
                    <div class="shouts" id="shouts">
                        <ul>
                        <?php foreach($messages as $message):?>
                            <li><?php echo $message['Nom'];?> : <?php echo $message['Message'];?> [<?php echo $message['date_ajout']; ?>]</li>
                        <?php endforeach;?>
                        </ul>    
                    </div>
                </section>
            </div>
            <div class="panel-footer">
                <form id="form">
                    <div class="form-group">
                        <label for="Nom">Nom</label>
                        <input type="text" id="name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <input type="text" id="message" class="form-control">
                    </div>
                    <div class="form-group">
                        <button type="submit" id="submit" class="btn btn-success">Envoyer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<?php include('footer.php');?>
                                


بحث في الموقع


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