moktar

Experience

4,210

0 Best Reply Awards

  • Member Since 1 Month Ago
  • 34 Lessons Completed
  • 13 Favorites

18th October, 2018

moktar left a reply on Dom Dosen't Refresh, What Wrong ? • 1 day ago

@wilburpowery this is the repo in github

moktar left a reply on Dom Dosen't Refresh, What Wrong ? • 1 day ago

@wilburpowery even like dosen't work .

moktar left a reply on Dom Dosen't Refresh, What Wrong ? • 1 day ago

@wilburpowery i had made like you say : but nothing change

<NewPost v-if="newpost" :user_id="this.user_id" @posted(handlePostedEvent)></NewPost>

methods:{
            handlePostedEvent(){
                this.posts.push(post)
            }
        }

moktar left a reply on User_id D'ont Sent With Vue Event Bus !!! • 1 day ago

the solutions is : in post component bind the user_id prop in :

                    <NewPost v-if="newpost" :user_id="this.user_id"></NewPost>

moktar started a new conversation Dom Dosen't Refresh, Why ? • 1 day ago

this error take 2 days from me hhh i don't know what i can do i had tried maybe all solutions with event bus but nothing yet . i'm trying to send an event when post has been add and push it to array of posts in parent component

// newpost.vue 

        methods :{
            addpost(){
                axios.post('posts',{
                    title : this.title,
                    category_id : this.category_id,
                    post_body : this.post_body,
                    user_id : this.user_id,
                }).then((response)=>{
                    EventBus.$emit('posted',response.data)
                }).catch((error)=>{
                    if(error.response.status == 422){
                        this.errors.push(error)
                    }
                })
            },
        }
// app.js
export const EventBus = new Vue();

parent component :

// posts.vue

<template>
    <div>
        <button class="btn btn-primary btn-sm mb-4" @click="newpost = true" v-if="!newpost">new post</button>
        <button class="btn btn-info btn-sm mb-4 text-white" @click="newpost = false" v-if="newpost">close</button>
        <div class="formnewpost  p-4">
            
            <div class="alert alert-danger" v-if="errors.length > 0">
                <p v-for="error in errors" :key="post">
                    {{error.response.data.errors['title'][0]}}<br>
                    {{error.response.data.errors['post_body'][0]}}<br>
                    {{error.response.data.errors['user_id'][0]}}
                </p>    
            </div>

                    <NewPost v-if="newpost" :user_id="this.user_id"></NewPost>

        </div>
        <div class="card">
            <div class="card-body" v-for="post in posts">
                <a :href="'/posts/'+post.slug">{{post.title}}</a>
            </div>
        </div>
    </div>

</template>
<script>
    
    import { EventBus } from '../app';

    export default {
        components : {
            'NewPost' : require('./NewPost.vue')
        },
        props : ['all_posts','user_id'],

        mounted (){
            EventBus.$on('posted',(post)=>{
                this.posts.push(post)
                console.log(post)
            })
        },

        data (){
            return{
                posts : JSON.parse(this.all_posts),
                errors : [],
                title : '',
                category_id : '',
                post_body : '',
                newpost : false
            }
        },  
     

    }
</script>

and the console give me that :

{…}
​
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
​
>category_id: Getter & Setter
​
>created_at: Getter & Setter
​
>id: Getter & Setter
​
>post_body: Getter & Setter
​
>slug: Getter & Setter
​
>title: Getter & Setter
​
>updated_at: Getter & Setter
​
>user_id: Getter & Setter
​
><prototype>: Object { … }

​```

17th October, 2018

moktar left a reply on User_id D'ont Sent With Vue Event Bus !!! • 2 days ago

@bobbybouwmann yes , i change it but user id still null , i think maybe error here . what you think

methods : {
           newpost(){
               this.$emit('new_post',user_id);
           }

        },

i

moktar started a new conversation User_id D'ont Sent With Vue Event Bus !!! • 2 days ago

i have a parent and child component :

i has take user_id from here : author_id="{{\Auth::id()}}" and send it like props

 <vue-comment post_id="{{$post->slug}}" author_id="{{\Auth::id()}}"></vue-comment>
<script>
    
    export default {
        props : ['all_posts','author_id'],
        components : {
                "new-post" : require("./NewPost.vue")
        },
        data (){
            return{
                posts : JSON.parse(this.all_posts),
                newpostform : false,
                errors : [],
                user_id : this.author_id
            }
        },
        mounted (){
            this.$on('post_add',(post)=>{
                this.posts.push(post)

            })
        },
        methods : {
           newpost(){
               this.$emit('newpost',user_id);   ---------------> dosen't sent to child component ???
           }

        },

    }
</script>
<script>

    import axios from 'axios';

    export default{

         data(){
            return {
                newpostform : false,
                title : '',
                category_id : '',
                post_body : '',
                user_id : ''
            }
        },
        mounted (){
            this.$parent.$on('newpost', (user_id) =>{
                this.user_id = user_id                                ---------> this didn't receive the user is 
            })
        },

        methods :{
             addpost(){
                axios.post('posts',{
                    title : this.title,
                    category_id : this.category_id,
                    post_body : this.post_body,
                    user_id : this.user_id,              
                }).then((response)=>{
                    this.$parent.$emit('post_add',response.data)
                }).catch((error)=>{
                    if(error.response.status == 422){
                        this.errors.push(error)
                    }
                })
            },
        }
    }
</script>

15th October, 2018

moktar left a reply on Small Question • 4 days ago

@click , that was so fast . thank you haha

moktar left a reply on Slug In Vue.js !!! Str_slug • 4 days ago

@goatshark WTF hahaha it working and so easy to integrate thanks dude

moktar started a new conversation Small Question • 4 days ago

Hello, can some one explain why this ":" after function name . and what it for i can't find a logique explanation .

 public function getSlugOptions() : SlugOptions

full code :

<?php

namespace App;

use Spatie\Sluggable\HasSlug;
use Spatie\Sluggable\SlugOptions;
use Illuminate\Database\Eloquent\Model;

class YourEloquentModel extends Model
{
    use HasSlug;
    
    /**
     * Get the options for generating the slug.
     */
    public function getSlugOptions() : SlugOptions
    {
        return SlugOptions::create()
            ->generateSlugsFrom('name')
            ->saveSlugsTo('slug');
    }
}

note : code from spate package sluggable

moktar left a reply on Slug In Vue.js !!! Str_slug • 4 days ago

@goatshark aah ok thanks dude

moktar left a reply on Slug In Vue.js !!! Str_slug • 4 days ago

@tykus  thank you for help but i didn't understand very well what you mean (newbie hh) so i will try the @goatshark solutions , thank you @goatshark 

moktar started a new conversation Slug In Vue.js !!! Str_slug • 4 days ago

hello , does any one before try to generate a slug for post with vue and save to Data base ? i has looking for that for all day and nothing found , is there any way to add str_slug to vue.js code ?

addpost(){
                this.errors = [];
                axios.post('posts',{
                    title : this.title,
                    category_id : this.category_id,
                    post_body : this.post_body,
                    user_id : this.author_id,
                    slug : i dont know what i must do !! 
                }).then((response)=>{
                    console.log(response)
                }).catch((error)=>{
                    console.log(error)
                })
            },
            slug() {
                var title = this.title;
                var slug = title.replace(/\s+/g, '-');
                return slug;
            },

this is all code :

<template>
    <div>
        <button class="btn btn-primary btn-sm mb-4" @click="newpostform = true" v-if="!newpostform">new post</button>
        <button class="btn btn-info btn-sm mb-4 text-white" @click="newpostform = false" v-if="newpostform">close</button>
        <div class="formnewpost  p-4">
            <div  v-if="newpostform">
                <div class="form-group">
                    <input type="text" class="form-control" v-model="title">
                </div>

                <div class="form-group">
                    <input type="text" class="form-control" v-model="category_id">
                </div>
                <div class="form-group">
                    <textarea id="" cols="30" rows="10" class="form-control" v-model="post_body"></textarea>
                </div>

                <div class="form-group">
                <button class="btn btn-sm btn-success" @click="addpost()">post</button>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body" v-for="post in posts">
                <a :href="'/posts/'+post.slug">{{post.title}}</a>
            </div>
        </div>
    </div>

</template>
<script>
    import axios from 'axios'

    export default {
        props : ['all_posts','author_id'],
        data (){
            return{
                posts : JSON.parse(this.all_posts),
                newpostform : false,
                title : '',
                category_id : '',
                post_body : '',
                errors : [],
                slug: '',

            }
        },
        methods : {
            addpost(){
                this.errors = [];
                axios.post('posts',{
                    title : this.title,
                    category_id : this.category_id,
                    post_body : this.post_body,
                    user_id : this.author_id,
                    slug : i dont know what i must do !!
                }).then((response)=>{
                    console.log(response)
                }).catch((error)=>{
                    console.log(error)
                })
            },
            slug() {
                var title = this.title;
                var slug = title.replace(/\s+/g, '-');
                return slug;
            },
        },

    }
</script>

moktar left a reply on Form Dosen't Display With V-if !!!! • 5 days ago

thanks @Yakagi , @s3nior , the problem was because calling vue.js 2 times from app.js and from cdn . https://media.giphy.com/media/1k2YhdutgkQzJWnsyp/giphy.gif

moktar left a reply on Form Dosen't Display With V-if !!!! • 5 days ago

thanks @Yakagi , but is still not working

14th October, 2018

moktar started a new conversation Form Dosen't Display With V-if !!!! • 5 days ago

i have this problem : when i click in button to show the hidden form noting displayed , i don't know what the problem .

<div class="container" id="app">
                <button class="btn btn-sm btn-dark" @click="openform()">reply</button>

                <br>
                <br>


                <div  v-if="openf">

                        <form action="">
                            <div class="form-group">
                                <input type="text" class="form-control">
                            </div>
                            <div class="form-group">
                            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
                            </div>
                        </form>
                </div>

</div>
@section('js_scripts')
    <script src="{{asset('js/vue.js')}}"></script>
    <script>
       var app =  new Vue({
           el : '#app',
           data : {
               openf : false,
           },
           methods : {
               openform : function(){
                   return this.open = true
               }
           }
        });
    </script>
@endsection

6th October, 2018

moktar left a reply on Is There Any Good Books For Designing Api (paid Or Free) ?? • 1 week ago

ok that looks awesome thank you

moktar started a new conversation Is There Any Good Books For Designing Api (paid Or Free) ?? • 1 week ago

i need a good books to how make an api from 0 to hero , (with laravel , paid , free?).

2nd October, 2018

moktar left a reply on Data Lost After Redis Server Restart • 2 weeks ago

ah thanks , look i had make like that save 1 1 now it working , is that good or will make a problems ?

moktar started a new conversation Data Lost After Redis Server Restart • 2 weeks ago

guys when i restart my pc i lose all the the registred data in redis , but when i run '''BGSAVE''' via vue-cli before i restart it stay saved , what is the solution ?? did i must every time before i restart pc must run this command or what . what if i upload my webapp to server ???

8th September, 2018

moktar started a new conversation I Want To Delete The Stored Image While Update New Image • 1 month ago

I want to delete the stored image while update new image , i has trying this method (unlink) but nothing change , is there any other way ?

  public function update(Serie $serie,Request $request)
    {

        if ($request->hasFile('image')){

            $oldimg = public_path("public/series/{str_slug($serie->image)}");
            if (\File::exists($oldimg)) {
              unlink($oldimg);
            }
            $image = $request->image;
            $name_img = str_slug($request->title).'.'.$image->getClientOriginalExtension();
            $image->storePubliclyAs('/public/series',$name_img);

        }
        else{
            $name_img = 'thumbnail';
        }
        $serie->title = $request->title;
        $serie->description = $request->description;
        $serie->image = '/series/'.$name_img;
        $serie->save();
        session()->flash('success','updated');
        return redirect()->route('serie.index');
    }

7th September, 2018

moktar left a reply on Failed Asserting That False Is True !!! • 1 month ago

@OriOn exactly the error was because off ) . thank you all

moktar left a reply on Failed Asserting That False Is True !!! • 1 month ago

@Sergiu17 yes it fail :

☁  laracasts [refactoringInVue] ⚡  phpunit --filter user_can_update_serie
PHPUnit 7.3.1 by Sebastian Bergmann and contributors.

F                                                                   1 / 1 (100%)

Time: 253 ms, Memory: 20.00MB

There was 1 failure:

1) Tests\Feature\SeriesTest::test_user_can_update_serie
Unable to find a file at path [/series/hello-worldpng].
Failed asserting that false is true.

/Volumes/HHD/Dev/laravel/laracasts/vendor/laravel/framework/src/Illuminate/Filesystem/FilesystemAdapter.php:57
/Volumes/HHD/Dev/laravel/laracasts/tests/Feature/SeriesTest.php:112
/Users/tor/.composer/vendor/phpunit/phpunit/src/TextUI/Command.php:203
/Users/tor/.composer/vendor/phpunit/phpunit/src/TextUI/Command.php:159

FAILURES!
Tests: 1, Assertions: 6, Failures: 1.

moktar started a new conversation Failed Asserting That False Is True !!! • 1 month ago

  1. Tests\Feature\SeriesTest::user_can_update_serie Unable to find a file at path [/series/hello-worldpng]. Failed asserting that false is true.
     /** @test */
     public function user_can_update_serie(){

         $this->Admin();
         Storage::fake(config('filesystems.default'));
         $serie = factory(Serie::class)->create();
         $data = [
            'title'=>'hello world',
            'description'=>'loerm ipsum emit',
            'image'=>UploadedFile::fake()->image('hello.png')
         ];
         $this->put(route('serie.update',$serie->slug),$data)
             ->assertRedirect()
             ->assertSessionHas('success','updated');

         $serie = $serie->fresh();

         $this->assertDatabaseHas('series',['slug'=>$serie->slug]);
         $this->assertEquals($data['title'],$serie->title);
         $this->assertEquals($data['description'],$serie->description);
         Storage::disk(config('filesystems.default'))
             ->assertExists('/series/'.str_slug($data['title'].'.png'));
     }

3rd September, 2018

moktar left a reply on Update Method Gone Wrong !!! • 1 month ago

my bad hahaha: instead of indexof i had made findIndex in :

            this.$on('lessonupdated',(lesson)=>{
                let oldlesson = this.lessons.findIndex( l => { return lesson.id = l.id } );
                this.lessons.splice(oldlesson,1,lesson);
            })

So it must be :

            this.$on('lessonupdated',(lesson)=>{
                let oldlesson = this.lessons.indexOf( l => { return lesson.id = l.id } );
                this.lessons.splice(oldlesson,1,lesson);
            })

moktar started a new conversation Update Method Gone Wrong !!! • 1 month ago

when i update thelesson 2it shows up inlesson 1but when i refresh the page it show up in lesson 2 , any one know why ? here the image : https://drive.google.com/open?id=1gNNXQ4uxweNgoUGyaK2jJTAVBSJmLeyZ

child/EditLesson.vue

updateLesson(){
                axios.put(`/admin/${this.serie_id}/lessons/${this.lessonId}`,{
                    title : this.title,
                    video_number : this.video_number,
                    epsiode_number : this.epsiode_number,
                    description : this.description
                }).then(response=>{
                        this.$parent.$emit('lessonupdated',(response.data))
                       $('#newLesson').modal('hide');

                }).catch(error=>{
                        console.log(error)
                })
            }

Lesson.vue

        mounted(){
            this.$on('lessonupdated',(lesson)=>{
                let oldlesson = this.lessons.findIndex( l => { return lesson.id = l.id } );
                this.lessons.splice(oldlesson,1,lesson);
            })
        },

lessons.vue => template

<template>
                <div class="card">
<div class="card-header">
<button class="btn btn-danger" @click="NewLesson()">New Lesson</button> 
</div>

<div class="card-body">
    <div class="lessons_all">
        <ul>
            <li v-for="lesson,key in lessons">{{lesson.title}}
                <span class="badge badge-danger" @click="DeleteLesson(lesson.id,key)">delete</span>
                <span class="badge badge-warning" @click="EditLesson(lesson)">edit</span>
            </li>
        </ul>
    </div>
</div>
    <new-lesson></new-lesson>
</div>

</template>

LessonController.php

    public function update(Serie $serie, Lesson $lesson, UpdateLesson $request)
    {
          $lesson->update($request->all());
          return $lesson->fresh();
    }

21st August, 2018

moktar left a reply on Help With Vue And Laravel • 1 month ago

thank you @tykus

20th August, 2018

moktar started a new conversation Help With Vue And Laravel • 1 month ago

Hi , i'm new in this amazing community and amazing world of web development , i have small error in vue component so i had make modal for new lesson and same time for edit lesson my problem is when i click in update button the button for create lesson not showing any more :

and this is pictures : https://drive.google.com/open?id=13ITuD_NhvfinbLZi9onT6BQvHLe07ha9 https://drive.google.com/open?id=1iGeayTyKtxASYTZw1BClFzBbPaCZBKGS thank you all

        <button type="button" class="btn btn-primary" @click="CreateLesson()" v-else>add lesson</button>```
and this is the full code : 

Modal title
×
<div class="form-group">
        <input type="text" class="form-control" placeholder="title" v-model="title">
</div>
<div class="form-group">
    <textarea class="form-control"  placeholder="description" v-model="description"></textarea>
</div>
<div class="form-group">
        <input type="text" class="form-control" placeholder="video number" v-model="video_id">
</div>
<div class="form-group">
        <input type="text" class="form-control" placeholder="epsoide number" v-model="episode_number">
</div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-success" @click="updateLesson()" v-if="editing">update lesson</button>
    <button type="button" class="btn btn-primary" @click="CreateLesson()" v-else>add lesson</button>
  </div>
</div>

import axios from 'axios'

export default{

mounted (){

  this.$parent.$on('new_lesson',(serie_id)=>{
      
      this.serie_id = serie_id
      $('#NewLessonModal').modal()

  })

  this.$parent.$on('edit_lesson',(lesson)=>{
     
      this.editing = true 
      this.title = lesson.title
      this.description = lesson.description
      this.video_id = lesson.video_id
      this.episode_number = lesson.episode_number
      $('#NewLessonModal').modal()
  })



},
    data (){
        return{
        title : '',
        description : '',
        video_id : '',
        episode_number : '',
        serie_id : '',
        editing : false
        }
    },
    methods :{

        CreateLesson() {
            axios.post(`/admin/${this.serie_id}/lessons`,{
                title : this.title,
                description : this.description,
                video_id : this.video_id,
                episode_number : this.episode_number,
          
            }).then(response => {
              this.$parent.$emit('hasCreatedLesson',response.data)
              $('#NewLessonModal').modal('hide')
              this.title = ''
              this.description = ''
              this.video_id = ''
              this.episode_number = ''
              this.serie_id = ''

            }).catch(error=>{
                console.log(error)
            })
        },

        updateLesson(){
          console.log('updating')
        }
    }

}
```

and this main component :

<template>

    <div class="cls_lessons">

        <div class="cls_btn text-center mb-4">
            <button class="btn btn-danger btn-sm" @click="CreateLesson()">new lesson</button>
        </div>

        <div class="cls_all_lessons">
            <ul>
                <li v-for="(lesson , key) in lessons">{{ lesson.title }}
                     <button class="btn btn-danger btn-sm" type="button" @click="DeleteLesson(lesson.id,key)">x</button>
                     <button class="btn btn-warning btn-sm" type="button" @click="EditLesson(lesson)">edit</button>
                </li> 
            </ul>
        </div>

        <new-lesson></new-lesson>

    </div>
</template>

<script>

    import axios from 'axios'

    export default{

        props : ['d_lessons','serie_id'],

        mounted (){
                this.$on('hasCreatedLesson',(lesson)=>{
                    this.lessons.push(lesson)
                })
        },
        components :{
            'new-lesson' : require('./child/New_editLesson.vue')
        },
        data (){
            return {
                lessons : JSON.parse(this.d_lessons)
            }
        },
        computed :{
            
        },
        methods :{
            CreateLesson() {
                this.$emit('new_lesson',this.serie_id)
            },
            DeleteLesson(id,key){
                if(confirm('are you sure to delete')){
                        axios.delete(`/admin/${this.serie_id}/lessons/${id}`).then(response =>{
                        this.lessons.splice(key ,1)
                    }).catch(error=>{
                        console.log(error)
                    })
                  }
            },
            EditLesson(lesson){
                this.$emit('edit_lesson',lesson)
            }
        }

    }
    
</script>
Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.