موقع شكايات ب php و mysql الجزء الثالت

فهاد الجزء الثالت من موقع شكايات ب php و mysql غادي نكملو الملفات لي بقاو ولي غادي تكون فيهم الصفحة الرئيسية والصفحة لي غادي تمكن المستخدم باش يرسلنا رسائل وايضا الصفحة لي فيها معلومات على الموقع.

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


1- الملف index.php


فالمجلد الرئيسي ديالنا كنزيد ملف جديد كنسميه index.php فيه عندي الفورم  لي فيها deux boutons كيمكنني من التنقل للملف الخاص بإضافة شكاية أو متابعة مآل شكاية وأيضا كاين text aléatoire لي تقدر تعدلو أو تزيد حوايج آخرين فالملف الكود ديال الملف هو:

                                    
                                        <?php require('header.php');?>
    <article>
        <main class="container">
            <div class="plainte">
                <h1 class="head-one">
                    Plainte
                </h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ex sed omnis quaerat, adipisci explicabo repellendus eligendi incidunt earum assumenda soluta natus doloribus accusamus saepe non repellat suscipit iste illum!</p>
                <ul class="forms">
                    <li>
                        <form action="add.php">
                            <input type="submit" class="btn-primary" value="Déposer plainte">
                        </form>
                    </li>
                    <li>
                        <form action="check.php">
                            <input type="submit" class="btn-primary" value="Suivre plainte">
                        </form>
                    </li>
                </ul>
            </div>
        </main>
    </article>
    <?php 
        $db = new Database();
    ?>
<?php require('footer.php');?>
                                    
                                

2- الملف contact-us.php


فالمجلد الرئيسي ديالنا كنزيد ملف جديد كنسميه contact-us.php فيه عندي الفورم لي كتمكن المستخدم من إدخال المعلومات الخاصة بالرسالة ديالو من بعد كنسترجعها وكنحطها ف array وكنرسلها لل fonction addMessage لي كتمكن من الإضافة ديالها وكنعرض للمستخدم رسالة نجاح ويلا فشلت الإضافة كنعرض رسالة فشل الكود ديال الملف هو:

                                    
                                        <?php require('header.php');?>
    <article>
        <main class="container">
            <div class="add-plainte">
                <h1 class="head-one">
                   Nous Contacter
                </h1>
                <?php
                    if(isset($_POST['submit'])){
                        $query = new Query();
                        $values = array(
                            'fullname' => $database->escape_string($_POST['name']), 
                            'email' => $database->escape_string( $_POST['email']), 
                            'body' =>  $database->escape_string($_POST['message'])
                        );
                        if($query->addMessage($values)){
                            echo '<div class="container alert-success">Message envoyé avec succés.</div>';
                        }else{
                            echo '<div class="container alert-danger">Une erreur est survenue réessayer plutard!</div>';
                        }
                    }
                ?>
                <div>
                    <form method="post" action="contact-us.php">
                        <div class="form-group">
                            <label for="name" sr-only="">Nom & Prénom*
                            </label>
                            <input type="text" required="" name="name" placeholder="Nom & Prénom" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="email" sr-only="">Email*
                            </label>
                            <input type="email"  required="" name="email" placeholder="email" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message" sr-only="">Message*
                            </label>
                            <textarea name="message"  required="" id="" cols="30" rows="10" class="form-control" placeholder="Message"></textarea>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn-primary" value="Valider">
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </article>
<?php require('footer.php');?>
                                    
                                

3- الملف about-us.php


فالمجلد الرئيسي ديالنا كنزيد ملف جديد كنسميه about-us.php فيه عندي معلومات على الموقع لي يمكنلك تعدلها كيف بغيتي الكود ديال الملف هو:


                                      
                                        <?php require('header.php');?>
    <article>
        <main class="container">
            <div class="plainte">
                <h1 class="head-one">
                    Qui sommes-nous?
                </h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ex sed omnis quaerat, adipisci explicabo repellendus eligendi incidunt earum assumenda soluta natus doloribus accusamus saepe non repellat suscipit iste illum!</p>
                <p>Téléphone: +212998898989</p>
                <p>Adresse: 23 rue anwal.</p>
                <p>Rabat Maroc.</p>
            </div>
        </main>
    </article>
    <?php 
        $db = new Database();
    ?>
<?php require('footer.php');?>
                                      
                                    

4- الملف style.css


فالمجلد الرئيسي ديالنا كنزيد ملف جديد كنسميه style.css  فيه غادي يكونوا des styles css لي غادي نحتاجوا فل projet ديالنا الكود ديال الملف هو:

                                        
                                            body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background-color: #ecf0f1;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
header{
  background-color: #27ae60;
  margin-top:-14px;
}
ul.navbar{
    list-style: none;
}
ul.navbar li{
    display: inline-block;
    padding: 15px;
    margin-right: 10px;
    border-radius: 3px;
}
ul.navbar li a{
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px;
}
ul.navbar li:hover{
    background-color: #0b7738;
    color: #fff;
}
div.plainte{
    background-color: #fff;
    border: 1px solid rgb(177, 170, 170);
    padding: 10px;
}
div.add-plainte{
    background-color: #fff;
    border: 1px solid rgb(177, 170, 170);
    padding: 10px;
    width: 40%;
    margin-left: 350px;
    margin-bottom: 10px;
}
.head-one{
    font-size: 25px;
    font-weight: 400;
    padding: 10px;
    margin-top: -1px;
    border-radius: 3px;
    color: #fff;
    background-color: #27ae60;
}
.btn-primary{
    background-color: #27ae60;
    color: #fff;
    padding: 10px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 2px #000;
    border-radius: 5px;
}
.btn-primary:hover{
    background-color: #0a8a3f;
}
ul.forms{
    list-style: none;
}
ul.forms li{
    display: inline-block;
    margin-right: 10px;
}
form input,label{
    display: block;
    margin-bottom: 10px;
}
label{
    font-size: 18px;
    color: #27ae60;
}
.form-control{
    border: solid 1px #c9C9C9;
    padding: 10px;
    margin: 0 0 10px 0;
    width: 300px;
    font-size: 20px;
}
form{
    margin: 0 0 10px 100px;
}
.alert-success{
    color: #fff;
    background-color: #599773;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.alert-danger{
    color: #fff;
    background-color: #a82514;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.alert-info{
    color: #fff;
    background-color: #5563df;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.code{
    background-color: #fff;
    color: #599773;
    padding: 5px;
    border-radius: 5px;
}
.center{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #0b7738;
}
                                        
                                    

كلمات مفاتيح :