Bastos

Bastos

Member Since 3 Months Ago

Experience Points 560
Experience Level 1

4,440 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed 0
Lessons
Completed
Best Reply Awards 0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

17 May
3 months ago

Bastos started a new conversation How Can I Put An Image For A Specific User In Vuejs Template?

Hey there , I'm actually working on profile picture for users. I now want to put this profil picture next to their name in my chat which is working with pusher and vuejs. My img is like this :

<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt=""> I can not just past it in the file it's not working and it would be for every user, but I want it to be for the auth user. I'm kinda new to vue.js any help would be thankful.

This is my chatMessage.vue :

<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
            classForUser: (message.user.id === currentuserid),
            classForNotUser: (message.user.id !== currentuserid)}" >
            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                        :
                    </strong>
                    {{ message.human_readable_time}}
                </div>
                <p>{{ message.message }}</p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };

</script>

<style scoped>
    .classForAuthorSameAsUser {
        color: lightseagreen ;
    }
    .classForAuthorDiffThanUser {
        color: black;
    }
    .classForUser{
        width: 70%;
        left: 30%;
    }
    .classForNotUser{
        width: 70%;
    }
</style>

And this is the html of my chat :

<div class="row">
    <div class="col-md-12 col-md-offset-2">
        <div class="col-md-12 col-md-offset-2">
            <div class="panel-body panel-content" id="mess_cont" :userid="{{Auth::user()->id}}">
                <chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
            </div>
            <div class="panel-footer">A
                <chat-form
                    v-on:messagesent="addMessage"
                    :user="{{ Auth::user() }}">
                </chat-form>
             </div>
         </div>
     </div>
 </div>

I think I have to use again the thing that help me to get the user id, but I don't really know how it works with vue.js. Thanks for your time

16 May
3 months ago

Bastos left a reply on Updated Image Does Not Show Correctly

Thanks for your time, I wont disturb you anymore and I will try to make this work :/ thank you

Bastos left a reply on Updated Image Does Not Show Correctly

@GRENADECX - So in my database I just created a new column, give it the name of "image" and give hime the type "longblob" that's all I did. When an Image is stored in the database, I have this in the column : "[BLOB - 14 o]" I just want people to chose a profile picture so it's better if it's stored in a database in the better way I suppose, I want to be able to call the image that the user submit multiple time.

Bastos left a reply on Updated Image Does Not Show Correctly

I would not say that the image is successfully stored, I just thaught is was but I'm clearly wrong ahah. You want to know the structure of the image column ?

Bastos left a reply on Updated Image Does Not Show Correctly

@GRENADECX - I've already tried that, and it's still not working :/

15 May
3 months ago

Bastos left a reply on Updated Image Does Not Show Correctly

@GRENADECX - I'm storing an image via a form , and I know the image is stored correctly because it appear on my database

Bastos started a new conversation Updated Image Does Not Show Correctly

Hello there, I'll need your help because when I display an image that I upload, it show a white square. I have a form that I use for a profil picture, It's working, I can upload the picture, BUT it show me a white square instead of the photo. That's html code :

                <img src="{{Auth::user()->images}}"/>
                <p>{{Auth::user()->firstName}} {{Auth::user()->lastName}}</p>
                <a href="{{ url('/my_account') }}">Mon compte</a> | <a href="{{ url('/logout') }}">Se déconnecter</a>
            </div>

And that's my ProfilePictureController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Auth;


class ProfilePictureController extends Controller
{
    public function update(Request $request)
    {
        $request = $request->All();

            User::where('id', Auth::user()->id)
                ->update(
                    [
                        'image' => $request['image']]
                );
            return redirect()->to('/')->with(['image-changed' => 'Photo de profil modifiée !']);
        }

}

I don't know if my question was clear but ask if you need more informations. Thank you.

Bastos left a reply on Update Image Show White Square

Anyone has an idea on how to solve this ?

Bastos left a reply on Update Image Show White Square

@SUJANCSE - Is that what you want ?

<form action="{{ route('profilePicture') }}" method="POST">
                            @csrf

                            <div id="profile-container">
                            <image id="profileImage" src="{{url('images/user.jpg')}}" />
                        </div>
                        <input id="imageUpload" type="file"
                               name="image" placeholder="Photo" accept="image/*"  capture>
                        <div class="form-group row mb-0" >
                            <div class="col-md-8 offset-md-4" >
                                <button type="submit"   class="btn btn-primary">
                                    {{ __('Enregistrer') }}
                                </button>
                            </div>
                        </div>
                        </form>

Bastos left a reply on Update Image Show White Square

@SUJANCSE - Sorry what do you mean by that, it's a specific file ? I'm kinda new to laravel I'm trying to understand all the features of it. Thanks for your time

Bastos left a reply on Message In Pusher Chat Are Not Refreshing Instantly

I had the solution, it was in the .env file :

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

had to change the first line to :

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

Bastos left a reply on Update Image Show White Square

@SUJANCSE - And it's called image, without an S , I changed it in my html file but nothing change

Bastos started a new conversation Update Image Show White Square

Hello there, I'll need your help because when I display an image that I upload, it show a white square. I have a form that I use for a profil picture, It's working, I can upload the picture, BUT it show me a white square instead of the photo. That's html code :

                <img src="{{Auth::user()->images}}"/>
                <p>{{Auth::user()->firstName}} {{Auth::user()->lastName}}</p>
                <a href="{{ url('/my_account') }}">Mon compte</a> | <a href="{{ url('/logout') }}">Se déconnecter</a>
            </div>

And that's my ProfilePictureController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Auth;


class ProfilePictureController extends Controller
{
    public function update(Request $request)
    {
        $request = $request->All();

            User::where('id', Auth::user()->id)
                ->update(
                    [
                        'image' => $request['image']]
                );
            return redirect()->to('/')->with(['image-changed' => 'Photo de profil modifiée !']);
        }

}

I don't know if my question was clear but ask if you need more informations. Thank you.

10 May
3 months ago

Bastos started a new conversation Message In Pusher Chat Are Not Refreshing Instantly

Hello, I'll need your help there, I have a chat with pusher, vue.js and laravel. Everything is working well execpt one thing, when I receive a message it does not display instantly, I have to refresh the page to see this message so this is kinda annoying. Any help would be really thankful. This is the tutorial that I follow : https://pusher.com/tutorials/chat-laravel

So this is my chat in my app.blade.js :

<div id="app" class="container-chat">

                    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont" :userid="{{Auth::user()->id}}">

                                    <chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user="{{ Auth::user() }}"
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

This is my ChatMessages.vue :


<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
                    classForUser: (message.user.id === currentuserid),
                    classForNotUser: (message.user.id !== currentuserid)}" >

            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                        :
                    </strong>
                    {{ message.human_readable_time}}
                </div>
                <p>

                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };

</script>

<style scoped>
    .classForAuthorSameAsUser {
        color: #2FB3FF ;
    }
    .classForAuthorDiffThanUser {
        color: black;
    }
    .classForUser{
        width: 70%;
        left: 30%;
    }
    .classForNotUser{
        width: 70%;
    }
</style>

This is the ChatForm.vue :

<template>
    <form @submit.prevent="sendMessage">
        <div class="input-group" >

            <input id="btn-input" type="text" name="message"  class="form-control input-sm"  placeholder="Ecrire..." v-model="newMessage" required>


            <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
        </div>
    </form>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 100);
                this.newMessage = '';

            }

        }
    }


</script>

This is my app.js :


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
window.Vue = require('vue');



import Vue from 'vue'
Vue.component('chat-messages', require('./components/ChatMessages.vue').default);
Vue.component('chat-form', require('./components/ChatForm.vue').default);

const app = new Vue({
    el: '#app',

    data: {
        messages: []
    },

    created() {
        this.fetchMessages();
        Echo.private('chat')
            .listen('MessageSent', (e) => {
                this.messages.push({
                    message: e.message.message,
                    user: e.user
                });
            });
    },

    methods: {

        fetchMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },

        addMessage(message) {
            this.messages.push(message);

            axios.post('/messages', message).then(response => {
                console.log(response.data);
            });
        }
    }
});

If you need more informations just ask I just don't want to spam useless code. Thanks

09 May
3 months ago

Bastos left a reply on Time Message Disaply But Only When I Refresh

@FTIERSCH - I don't think I have another vuejs file that do this... sorry I might not understand well what you are asking me ..., I have a ChatController.php But I dont think its this one

Bastos left a reply on Time Message Disaply But Only When I Refresh

@FTIERSCH - I can show you my MessageSent.php if is that what you mean :

<?php

namespace App\Events;

use App\User;
use App\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * User that sent the message
     *
     * @var User
     */
    public $user;

    /**
     * Message details
     *
     * @var Message
     */
    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(User $user, Message $message)
    {
        $this->user = $user;
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}

Bastos left a reply on Time Message Disaply But Only When I Refresh

@FTIERSCH - Yes sorry, I added the code below

Bastos left a reply on Time Message Disaply But Only When I Refresh

@BOBBYBOUWMANN - Yes sorry, I add the code below

Bastos left a reply on Time Message Disaply But Only When I Refresh

My bad I send the same code twice , this is my ChatMessage.vue


<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
                    classForUser: (message.user.id === currentuserid),
                    classForNotUser: (message.user.id !== currentuserid)}" >

            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                        {{message.human_readable_time }}
                        :
                    </strong>
                </div>
                <p>

                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };
    
</script>

<style scoped>
    .classForAuthorSameAsUser {
        color: #2FB3FF ;
    }
    .classForAuthorDiffThanUser {
        color: black;
    }
    .classForUser{
        width: 70%;
        left: 30%;
    }
    .classForNotUser{
        width: 70%;
    }
</style>

Bastos started a new conversation Time Message Disaply But Only When I Refresh

Hello, So I just add the answer on how to display time next to my message but the problem now is that when I type a new message, the time does not appear, I have to refresh the page to see it, if anyone have any clue on how to solve it I'll be really thankful ! This is my ChatMessages.vue :

<template>
    <form @submit.prevent="sendMessage">
        <div class="input-group" >

            <input id="btn-input" type="text" name="message"  class="form-control input-sm"  placeholder="Ecrire..." v-model="newMessage" required>
            

            <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
        </div>
    </form>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 100);
                this.newMessage = '';

            }

        }
    }


</script>

This is my messages.php :

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    /**
     * Fields that are mass assignable
     *
     * @var array
     */
    protected $fillable = ['message'];
    protected $appends = ['human_readable_time'];


    /**
     * A message belong to a user
     *
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function user()
    {
        return $this->belongsTo(User::class);
    }
    public function getHumanReadableTimeAttribute()
    {
        return $this->created_at->format('H:i');
    }
}

And this is my chatForm.vue (And I think the problem is here) :

<template>
    <form @submit.prevent="sendMessage">
        <div class="input-group" >

            <input id="btn-input" type="text" name="message"  class="form-control input-sm"  placeholder="Ecrire..." v-model="newMessage" required>
            

            <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
        </div>
    </form>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 100);
                this.newMessage = '';

            }

        }
    }


</script>

Thanks for your help !

Bastos left a reply on Display The Time Of A Message In A Chat

@EDOC - It might be a local problem, I'll try to solve it by myself thanks !

Bastos left a reply on Display The Time Of A Message In A Chat

@EDOC - Sorry I'm already back ahah , when I send a new message, the time does not display I have to refresh the page (maybe a local problem) and its 14h51 and when i look at my message its 12h51

Bastos left a reply on Display The Time Of A Message In A Chat

@EDOC - Sorry Its working now, thanks a lot for your time !!

Bastos left a reply on Display The Time Of A Message In A Chat

@EDOC - Oh wait I'll take a look at this thanks

Bastos left a reply on Display The Time Of A Message In A Chat

@EDOC - Ok so it's working thanks, but that's not really what I asked ahah, now it display "34 minutes ago" its cool, but I would like to have like TOTO : 14h45 Hello

Thanks already for what you make

Bastos left a reply on Display The Time Of A Message In A Chat

@EDOC - Yes there is it !

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    /**
     * Fields that are mass assignable
     *
     * @var array
     */
    protected $fillable = ['message'];

    /**
     * A message belong to a user
     *
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Bastos started a new conversation Display The Time Of A Message In A Chat

Hello, I have a chat with pusher and vue.js, and I would like to display the hour and the minutes of the message. I'm kinda new to all of this so I made some research but I didn't found something that I like. Maybe some of you can help me about this. Thanks. This is my code :


<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
                    classForUser: (message.user.id === currentuserid),
                    classForNotUser: (message.user.id !== currentuserid)}" >

            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                        {{message.created_at}}
                         :
                    </strong>
                </div>
                <p>

                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };


    /* function heure() {
         var currentTime = new Date(),
             hours = currentTime.getHours(),
             minutes = currentTime.getMinutes();

         if (minutes < 10) {
             minutes = "0" + minutes;
         }
     }*/


</script>

<style scoped>
    .classForAuthorSameAsUser {
        color: #2FB3FF ;
    }
    .classForAuthorDiffThanUser {
        color: black;
    }
    .classForUser{
        width: 70%;
        left: 30%;
    }
    .classForNotUser{
        width: 70%;
    }
</style>