books app ب oop و javascript


فهاد الدرس الجديد غادي نشوفوا كيفاش نخدمو بل programmation orienté objet ف javascript من خلال واحد ل application لي سميناها books app ولي هي بسيطة كتمكن من إضافة كتب لقاعدة البيانات هنا خدمنا ب local storage ديال المتصفح راه سبق درت عليه درس من قبل المهم هنا ماشي هو ل app بقدر ما هو تعرف كيفاش تخدم بل oop ف javascript.

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

1- الملف index.php

فأول حاجة زيد projet جديد سميه لي بغيتي منبعد فيه زيد 3 ديال les fichiers index.html, style.css, main.js منبعد فال fichier index.html عندنا structure html فكنزيد روابط css هنا خدمت ب Materialize css لي هي بحال  bootstrap 4 منبعد كنزيد ل fichier style.css منبعد عندي div عطيتها id message فيها غادي يتعرضوا les messages منبعد عندي ل form فيها les champs ول bouton ولي عطيتهم des ids منبعد عندي table لي غادي يتعرضوا فيها les livres لي غادي نسترجعوا من قاعدة البيانات ولي حتى هي عطيتها id book-list الكود ديال الملف هو:

                                <!DOCTYPE html>
<html lang="en">
<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://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Book OPP</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <div class="card  darken-1" id="main-card">
                    <div class="card-content white-text">
                        <span class="card-title blue-text">Ajouter un livre</span>
                        <div id="message"></div>
                        <form id="books-form">
                            <div class="input-field sm12">
                                <input type="text" name="title" id="title">
                                <label for="title">Titre</label>
                            </div>
                            <div class="input-field sm12">
                                <input type="text" name="author" id="author">
                                <label for="author">Auteur</label>
                            </div>
                            <div class="input-field sm12">
                                <input type="text" name="isbn" id="isbn">
                                <label for="isbn">ISBN</label>
                            </div>
                            <button type="submit" class="btn-floating btn-large waves-effect waves-light green"><i class="material-icons">add</i></button>
                        </form>
                    </div>
                    <div class="card-action">
                        <table class="highlight">
                            <thead>
                                <tr>
                                    <th>Titre</th>
                                    <th>Auteur</th>
                                    <th>ISBN</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="book-list">
                             
                            </tbody>
                        </table>            
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
    <script src="main6.js"></script>
</body>
</html>
                            

2- الملف main.js الجزء الأول

فالملف main.js كنسترجع ل form بل id ديالها منبعد عندي la classe Book لي فل constructeur كتاخد معلومات على كتاب منبعد عندي  ل class Store لي فيها les fonctions لي كنديكلاريهم كاملين static باش كنخدم بهم بلا مكنحتاج ندير ل instanciation ديال l'objet من la classe فعندنا addBook لي كتاخد objet book منبعد كنخدم ب fonction أخرى لي كتمكن من استرجاع الكنب كاملين من بعد بل fonction push لي هي pure ديال javascript كنزيد كتاب جديد وكنزيد الكتب من بعد مازدت الجديد فل localStorage فيلا مكنتيش كتعرف localStorage يمكنلك تشوف الدرس لي سبقت درت من هنا من بعد عندنا getBooks لي كنسترجع بها الكتب من localStorage sous forme json منبعد عندي displayBooks لي كتسترجع الكتب وكت créer l'objet من la class Ui لي غادي نزيدوها منبعد وكنخدم ب foreach باش كنرسل كل كتاب لل fonction addBookToList لي غادي تمكن من عرض الكتب ف table لي زدنا ف index.html منبعدعندي deleteBook لي كتاخد ل isbn ديال الكتاب لي هي réf منبعد كتسترجع الكتب وكتقلب على الكتاب لي عندو نفس réf وكتمسحو... 

                                const form = document.querySelector('#books-form');
class Book{
    constructor(title,author,isbn){
        this.title = title;
        this.author = author;
        this.isbn = isbn;
    }
}
class Store{
    static addBook(book){
        const books = Store.getBooks();
        books.push(book);
        localStorage.setItem('books',JSON.stringify(books));
    }
    static getBooks(){
      let books;
      if(localStorage.getItem('books') === null){
          books = [];
      }else{
          books = JSON.parse(localStorage.getItem('books'));
      }
      return books;
    }
    static displayBooks(){
        const books = Store.getBooks();
        const ui = new Ui();
        books.forEach(function(book){
            ui.addBookToList(book);
        });
    }
    static deleteBook(isbn){
        const books = Store.getBooks();
        books.forEach(function(book,index){
            if(book.isbn === isbn){
                books.splice(index,1);
            }
        });
        localStorage.setItem('books',JSON.stringify(books));
    }
}
                            

3- الملف main.js الجزء الثاني

 منبعد عندي ل classe Ui لي فيها ل fonction addBook لي كتاخد ل book وكتخدم بل fonction addBook ديال ل classe Store وملي كتزيدو كتدير actualiser ل la page باش كيبان الكتاب فالجدول منبعد كاين addBookToList  لي كتسترجع ال table بل id منبعد كت créer tr لي هو سطر وكتزيد فيه الكتاب لي ارسلنالها مع رابط لي كيمكن من الحدف ديال الكتاب ولي فيه واحد ل attribut isbn لي بها غادي نعرفوا الكتاب لي بغينا نمسحوا منبعد كنزيد tr ل table ثم عندي showError لي فقط كتعرض ميساج ف div لي عطيناها ل id message يلا كان شي champ خاوي منبعد عندي deleteBook لي كتاخد ل event لي هو ل click  منبعد كنقلب فل parent ديال ل event على ل classe delete-book لي عطيناها لرابط ديال الحدف فكيمسح الكتاب لي كليكينا عليه...

                                class Ui{
    addBook(book){
        Store.addBook(book);
        window.location.reload();
    }
    addBookToList(book){
        const list = document.getElementById('book-list');
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${book.title}</td>
            <td>${book.author}</td>
            <td>${book.isbn}</td>
            <td><a class="delete-book" isbn="${book.isbn}"><i class="fa fa-remove"></i></a></td>
        `;
        list.appendChild(tr);
    }
    clearInputs(){
        document.getElementById('title').value = '';
        document.getElementById('author').value  = '';
        document.getElementById('isbn').value  = '';
    }
    showError(){
        const div = document.createElement('div');
        div.className = `alert alert-danger`;
        div.appendChild(document.createTextNode('Veuillez remplir tous les champs.'));
        const message = document.querySelector('#message');
        message.appendChild(div);
        setTimeout(function(){
            document.querySelector('.alert').remove();
        },3000);
    }
    deleteBook(e){
        if(e.target.parentElement.classList.contains('delete-book')){
            e.target.parentElement.parentElement.parentElement.remove();
        }
    }
                            

4- الملف main.js الجزء الرابع

 من بعد كنزيد واحد ل event ل document لي هو ملي ل contenu ديال document كيتحمل كنسترجع الكتب من localStorage وكنعرضهم ف table منبعد ف submit ديال الفورم كنسترجع القيم من les champs كن créer l'objet من la classe Ui كنتحقق بلي حتى شي champ ماخاوي منبعد كن créer l'objet من la classe book لي كنعطيها les valeurs ديال les champs منبعد كنزيد لكتاب ب addBook وكنمسح les champs منبعد كنسترجع table بل id وفل click ديالها كنسترجع ل attribut isbn ديال لكتاب لي كليكينا عليه وكنرسلها لل fonction deleteBook الكود ديال الملف هو : 

                                    document.addEventListener('DOMContentLoaded',Store.displayBooks);

form.addEventListener('submit',function(e){
    const title = document.getElementById('title').value;
    const author = document.getElementById('author').value;
    const isbn = document.getElementById('isbn').value;
    const ui = new Ui();
    if(title == '' || author == '' || isbn == ''){
        ui.showError();
    }else{
        const book = new Book(title,author,isbn);
        ui.addBook(book);
        ui.clearInputs();
    }
    e.preventDefault();
});
//remove book
const list = document.getElementById('book-list');
list.addEventListener('click',function(e){
    const ui = new Ui();
    ui.deleteBook(e);
    Store.deleteBook(e.target.parentElement.getAttribute('isbn'));
});
                                

5- الملف style.css

فالملف style.css كنزيد des styles css لي غادي يديرو تغييرات بسيطة على ل app ديالنا الكود ديال الملف هو :

                                    .alert,.alert-danger{
    background-color: #E2686D;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
}
span.card-title{
    font-size: 32px !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
}
                                


بحث في الموقع


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