BLOG ب LARAVEL & VUE JS الجزء التاسع


فهاد الجزء التاسع من blog ب laravel & vue js غادي نزيدو ل component الخاص بإضافة post جديد فقاعدة البيانات وغادي نشوفوا أيضا كيفاش نزيدو sweet alert باش نعرضوا رسائل تأكيد الإضافة التعديل والحذف.

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


1- إضافة ل component AddPost


غادي نمشي ل dossier components فيه غادي نزيد fichier جديد سميه AddPost.vue فيه غادي يكون فيه كود الإضافة ديال post جديد.

الفورم غادي تكون عبارة عن modal فاش غادي نضغط على زر الإضافة فالصفحة الرئيسية ديال الأدمن غادي تعرض ال modal.

أول حاجة عندي الفورم لي فيها les champs لي مربوطين مع des variables فل objet data وبالنسبة للحقل الخاص بالصورة فهو مربوط مع fonction سميتها onImageChange لي فاش كنختار الصورة كتاخذ هي ال fichier وتعطيه ل variable image لي ف data.

أيضا فاش كتشارجا la page كنسترجع les catégories لي كياخذهم select و فاش كندير submit للفورم كتنفذ ل fonction addPost لي كترسل المعلومات لقاعدة البيانات.

وفاش كيتزادو كنصيفطوا event سميناه added ل component AdminPanel باش كيعرف بلي ل post تزاد.

الكود ديال الملف هو :

                                    
                                        //
<template>
  <div
    class="modal fade"
    id="addPost"
    tabindex="-1"
    role="dialog"
    aria-labelledby="addPost"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Ajouter un article</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form @submit="addPost" enctype="multipart/form-data">
            <div class="form-group">
              <label for>Catégorie</label>
              <option value disabled selected>Veuillez choisir une catégorie</option>
              <select v-model="category" class="form-control" name="category" required id>
                <option
                  :value="category.id"
                  v-for="(category,index) in categories"
                  :key="index"
                >{{category.name}}</option>
              </select>
            </div>
            <div class="form-group">
              <label for>Titre*</label>
              <input
                type="text"
                name="title"
                id
                v-model="title"
                class="form-control"
                placeholder="Titre"
                required
                aria-describedby="helpId"
              />
            </div>
            <div class="form-group">
              <label for></label>
              <textarea
                v-model="body"
                class="form-control"
                name="body"
                id
                rows="5"
                placeholder="Description"
              ></textarea>
            </div>
            <div class="form-group">
              <label for>Photo*</label>
              <input
                type="file"
                required
                v-on:change="onImageChange"
                class="form-control-file"
                name="image"
                id="image"
                placeholder
                aria-describedby="fileHelpId"
              />
            </div>
            <button type="submit" class="btn btn-primary">Valider</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      body: "",
      category: "",
      categories: [],
      image: null
    };
  },
  created() {
    axios
      .get("/api/categories")
      .then(response => (this.categories = response.data.categories))
      .catch(err => console.log(err));
  },
  methods: {
    onImageChange(e) {
      console.log(e.target.files[0]);
      this.image = e.target.files[0];
    },
    addPost(e) {
      e.preventDefault();
      const config = {
        headers: { "content-type": "multipart/form-data" }
      };
      let formData = new FormData();
      formData.append("image", this.image);
      formData.append("title", this.title);
      formData.append("body", this.body);
      formData.append("category_id", this.category);
      formData.append("user_id", User.isLogged().id);
      axios
        .post("api/posts", formData, config)
        .then(res => {
          $("#addPost").modal("hide");
          this.title = "";
          this.body = "";
          this.category = "";
          this.image = null;
          Swal.fire({
            position: 'center',
            icon: 'success',
            title: 'Article ajouté',
            showConfirmButton: false,
            timer: 1500
          });
          this.$emit("added");
        })
        .catch(err => console.log(err));
    }
  }
};
</script>
                                    
                                

2- تعديل ل component AdminPanel


منبعد غادي نزيدو ل modal ديال الإضافة فل AdminPanel أول حاجة غادي نزيدو الرابط ديال الإضافة منبعد غادي نسترجعوا ل component AddPost ونزيدوه.

أيضا كنستقبل ل event added ولي كيعني ل post تزاد وفاش كيتزاد كنفذ ل fonction postAdded لي كتعرض les posts من جديد باش يبان ال post لي تزاد جديد معاهم.

الكود ديال الملف بعد التعديل هو :

                                    
                                        //
<template>
  <div class="container">
    <div class="row mt-5 mb-3">
      <div class="col-md-12">
        <a
          data-target="#addPost"
          data-toggle="modal"
          class="btn mt-5 btn-sm btn-success text-white mb-2"
        >
          <i class="fa fa-plus"></i>
        </a>
        <table class="table">
          <thead>
            <tr>
              <th>Id</th>
              <th>Catégorie</th>
              <th>Titre</th>
              <th>Description</th>
              <th>Image</th>
              <th>Ajouté par</th>
              <th>Le</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(post,index) in posts.data" :key="index">
              <td>{{post.id}}</td>
              <td>{{post.category.name}}</td>
              <td>{{post.title}}</td>
              <td>{{post.body.substr(0,100)}}...</td>
              <td>
                <img
                  :src="post.photo"
                  class="img-fluid mr-2 rounded shadow-sm"
                  alt
                  height="60"
                  width="60"
                  srcset
                />
              </td>
              <td>{{post.user.name}}</td>
              <td>{{post.added}}</td>
              <td class="d-flex flex-row justify-content-center align-items-center">
                <router-link :to="post.path" class="btn mr-1 btn-sm btn-primary text-white">
                  <div class="fa fa-eye"></div>
                </router-link>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="card-footer d-flex justify-content-center">
          <pagination :data="posts" @pagination-change-page="getPosts"></pagination>
        </div>
      </div>
      <AddPost @added="postAdded" />
    </div>
  </div>
</template>

<script>
import AddPost from "./AddPost";

export default {
  data() {
    return {
      posts: {},
      loading: true
    };
  },
  components: { AddPost },
  created() {
    if (User.isLogged() && User.isAdmin()) {
      this.getPosts();
    } else {
      this.$router.push({ name: "home" });
    }
  },
  methods: {
    getPosts(page) {
      if (typeof page === "undefined") {
        page = 1;
      }
      axios
        .get("/api/posts?page=" + page)
        .then(response => {
          console.log(response.data);
          this.posts = response.data;
        })
        .catch(err => console.log(err));
    },
    postAdded() {
      this.getPosts();
    },
  }
};
</script>
                                    
                                

3- إضافة sweet alert ل projet


باش نزيدو sweet alert ل projet ديالنا غادي تمشي ل fichier welcome.blade.php وفيه غادي تزيد cdn ديال sweet alert :

                                      
                                        //
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
                                      
                                    

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