davy_yg

davy_yg

Member Since 3 Years Ago

Jakarta

Experience Points
95,070
Total
Experience

4,930 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
444
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your 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-in-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 Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist 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.

Level 20
95,070 XP
Jun
26
2 weeks ago
Activity icon

Replied to Creating Blog Component

I get the following error when trying to run : npm run dev

@ development E:\xampp72\htdocs\aws_admin_vue cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building 2/5 modules 3 active ...n_vue\node_modules\style-loader\lib\addStyles.jsBrowserslist: caniuse-lite is outdated. Please run next command yarn upgrade 98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 5 errors 1:32:33 PM These dependencies were not found:

  • numeral-es6 in ./resources/js/app.js
  • semantic-ui-vue in ./resources/js/app.js
  • vue in ./resources/js/app.js
  • vue-content-placeholders in ./resources/js/app.js
  • vuejs-auto-complete in ./resources/js/app.js

To install them, you can run: npm install --save numeral-es6 semantic-ui-vue vue vue-content-placeholders vuejs-auto-complete Asset Size Chunks Chunk Names /css/app.css 0 bytes /js/app [emitted] /js/app /js/app.js 84.4 KiB /js/app [emitted] /js/app \vendor\froala-editor\css\froala_editor.pkgd.min.css 76.5 KiB [emitted] \vendor\froala-editor\js\froala_editor.pkgd.min.js 636 KiB [emitted]

ERROR in ./resources/js/components/Blog.vue?vue&type=template&id=7c31058d& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Blog.vue?vue&type=template&id=7c31058d&) Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1 | 2 |

{{ this.props_blog_title }}

| ^^^^ 3 | | ^^^^ 4 | | 5 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 6 | | 7 | {!! Str::limit(this.props_blog_content, 500, '...') !!} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 8 | | 9 | | 10 | | ^^^^^^^^ 11 | Read More .. | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

src="{{ url(Storage::url(this.props_blog_image)) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

3 | 4 | 5 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 6 | 7 | {!! Str::limit(this.props_blog_content, 500, '...') !!}

href="{{ url('/f_blog_detail/'.$blog->id) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

9 | 10 | 11 | Read More .. | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 12 |

@ ./resources/js/components/Blog.vue?vue&type=template&id=7c31058d& 1:0-208 1:0-208 @ ./resources/js/components/Blog.vue @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/components/Slides.vue?vue&type=template&id=870633e6& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Slides.vue?vue&type=template&id=870633e6&) Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

src="{{ url(Storage::url($item->image)) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

18 | @if($loop->first) 19 | 20 | Los Angeles | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 21 | 22 |

{{ $item->title }}

src="{{ url(Storage::url($item->image)) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

27 | @if(!($loop->first)) 28 | 29 | Los Angeles | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 30 | 31 |

{{ $item->title }}

src="{{ url('frontend/images/download-now.jpg') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

78 | 79 | 80 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 81 | 82 |

href="{{ url('frontend/aws proposal.pdf') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

78 | 79 | 80 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 81 | 82 |

src="{{ url('frontend/images/free-quotes.png') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

82 | 83 | 84 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 85 | 86 |

href="{{ url('f_contact') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

82 | 83 | 84 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 85 | 86 |

src="{{ url('frontend/images/icons.jpg') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

88 | 89 | 90 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 91 | 92 |

invalid expression: Unexpected token '>' in

_s($item->title)

Raw expression: {{ $item->title }}

20 | Los Angeles 21 | 22 |

{{ $item->title }}

| ^^^^^^^^^^^^^^^^^^ 23 | 24 |

invalid expression: Unexpected token '>' in

_s($item->title)

Raw expression: {{ $item->title }}

29 | Los Angeles 30 | 31 |

{{ $item->title }}

| ^^^^^^^^^^^^^^^^^^ 32 | 33 |

@ ./resources/js/components/Slides.vue?vue&type=template&id=870633e6& 1:0-210 1:0-210 @ ./resources/js/components/Slides.vue @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'numeral-es6' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 4:0-34 19:17-24 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'semantic-ui-vue' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 2:0-37 7:8-14 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'vue' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 1:0-22 7:0-3 8:0-3 9:0-3 10:0-3 11:0-3 12:22-25 17:17-20 20:0-3 21:0-3 22:13-16 23:17-20 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'vue-content-placeholders' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 6:0-62 8:8-30 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'vuejs-auto-complete' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 5:0-47 @ multi ./resources/js/app.js ./resources/sass/app.scss npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ACER\AppData\Roaming\npm-cache_logs\2020-06-26T06_32_33_947Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ dev: npm run development npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ACER\AppData\Roaming\npm-cache_logs\2020-06-26T06_32_34_050Z-debug.log

E:\xampp72\htdocs\aws_admin_vue>

Any clue why?

Jun
19
3 weeks ago
Activity icon

Started a new Conversation Creating Blog Component

Hello, please cek this blog component:

blog.blade.php

@include('template/header')

<div class="container">
<h1><b>BLOG</b></h1><br><br>


@foreach($list as $blog)

<blog
    :props_blog_title = '$blog->title'
    :props_blog_image = '$blog->image'
        :props_blog_content = '$blog->content'
    >
	</blog>

@endforeach

Blog.vue

<template>
	<b><h3>{{ this.props_blog_title }}</h3></b><br>
	<br>

	<img class="img-responsive" src="{{ url(Storage::url(this.props_blog_image)) }}" width="400px"><br><br>

	{!! Str::limit(this.props_blog_content, 500, '...') !!}


	<br><br>
	<a href="{{ url('/f_blog_detail/'.$blog->id) }}">Read More ..</a><br><br>
</template>

<script>
	import axios from 'axios'

	export default {
    name: 'WishlistButton',
    props: {
        props_blog_title: null,
        props_blog_image: null,
        props_blog_content: null
    },
    data () {
        return {
            
        }
    },
    mounted() {
        
    },
    methods : {
        
    }
	}
</script>

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

Vue.component('axios', axios);
Vue.component('slides', require('./components/Slides.vue').default);
Vue.component('blog', require('./components/Blog.vue').default);

I tested the program and the component does not appears. I wonder why?

Jun
17
3 weeks ago
Activity icon

Started a new Conversation Convert This Into Component

Hello,

I would like to use component vue for the slideshow banner.

This is the original code:

index.blade.php

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-12" >
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
          
          @foreach($data3 as $item)

            @if($loop->first)
            <div class="item active">
              <img src="{{ url(Storage::url($item->image)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ $item->title }}</h3>
              </div>
            </div>
            @endif

            @if(!($loop->first))
            <div class="item">
              <img src="{{ url(Storage::url($item->image)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ $item->title }}</h3>
              </div>
            </div>
            @endif
            
          @endforeach
          </div>
         
          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span><i class="fa fa-angle-left"></i></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span><i class="fa fa-angle-right"></i></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

Using vue component:

index.blade.php

<?php
// defined('BASEPATH') or exit('No direct script access allowed');

?>

  <!DOCTYPE html>
<html lang="en">

  @include('template/header')

    <body>

     <slides
   	   :props_slides_title = '$item->title'
   	   :props_slides_image_path = '$item->image'
 	     >
  	    </slides>

What am I missing? Where should I put the iteration:

 @foreach($data3 as $item)

Slides.vue

<template>
<div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-12" >
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
          
          @foreach($data3 as $item)

            @if($loop->first)
            <div class="item active">
              <img src="{{ url(Storage::url(this.props_slides_image_path)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ this.props_slides_title }}</h3>
              </div>
            </div>
            @endif

            @if(!($loop->first))
            <div class="item">
              <img src="{{ url(Storage::url(this.props_slides_image_path)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ this.props_slides_title }}</h3>
              </div>
            </div>
            @endif
            
          @endforeach
          </div>



          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span><i class="fa fa-angle-left"></i></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span><i class="fa fa-angle-right"></i></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

    <br />

    <div class="row">
      <div class="col-md-6 col-xs-6">
        <a class="pull-left" href="{{ url('frontend/aws proposal.pdf') }}"><img class="img-responsive" style="height: 60px" src="{{ url('frontend/images/download-now.jpg') }}"></a>
      </div>

      <div class="col-md-2 col-md-offset-4 col-xs-5 col-xs-offset-1">
        <a class="pull-right" href="{{ url('f_contact') }}"><img class="img-responsive" style="height: 80px" src="{{ url('frontend/images/free-quotes.png') }}"></a>
      </div>
    </div>

    <div class="row">
      <div class="icons-area text-center">
        <img class="img-responsive" src="{{ url('frontend/images/icons.jpg') }}" alt="AWS">
      </div>
    </div>
  </div>
 </template>

<script>
import axios from 'axios'

export default {
    name: 'WishlistButton',
    props: {
        props_slides_title: null,
        props_slides_image_path: null,
    },

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

Vue.component('axios', axios);
Vue.component('slides', require('./components/Slides.vue').default);
Jun
06
1 month ago
Activity icon

Replied to Component Registration

Okay this is my my:

webpack.config.js

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
*/
let mix = require('../src/index');

let ComponentFactory = require('../src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/

Mix.dispatch('init', Mix);

/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

There is no app.js in it.

I normally have to run: npm install -g vue-cli

to create vue files.

Activity icon

Started a new Conversation Component Registration

I found this file on an ecommerce for component registration. I wonder if there is any reference to create this whole scripts? I don't know what are all the neccessary scripts for component registration?

This is the only reference I found: ref: https://vuejs.org/v2/guide/components-registration.html

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

// Carts
Vue.component('cart-total-price', require('./components/carts/TotalPrice').default);
Vue.component('cart-button-global', require('./components/carts/buttons/Global').default);
Vue.component('cart-button-wishlist', require('./components/carts/buttons/Wishlist').default);

Vue.component('cart-select-maturities', require('./components/carts/SelectMaturities').default);
Vue.component('cart-select-variants', require('./components/carts/SelectVariants').default);
Vue.component('cart-detail-action-button-wrapper', require('./components/carts/DetailActionButtonWrapper').default);

// MasterData
Vue.component('master-nutrition', require('./components/master/MasterNutrition').default);
Vue.component('master-benefit', require('./components/master/MasterBenefit').default);
Vue.component('master-format', require('./components/master/MasterFormat').default);

Object.defineProperty(Vue.prototype, '$bus', {
		get() {
    		return this.$root.bus;
		}
});

window.bus = new Vue();

window.axios = axios;
window.numeral = numeral;

Vue.prototype.$axios = window.axios;
Vue.prototype.$numeral = window.numeral;

window.Vue = Vue

window.app = new Vue({
		el: '#app',
		data: {
    	bus: bus // Here we bind our event bus to our $root Vue model.
		}
});

I also wonder where is the main.js that I normally created when building vue files?

May
28
1 month ago
Activity icon

Started a new Conversation Vue Component

This program actually works.

Servers.vue

<template>
	<div class="col-xs-12 col-sm-6">
    <ul class="list-group">
        <app-server
            v-for="server in servers"
            :server="server"></app-server>
    </ul>
	</div>
</template>

<script>
	import Server from './Server.vue';

export default {
    data: function() {
        return {
          servers: [
              { id: 1, status: 'Normal'},
              { id: 2, status: 'Critical'},
              { id: 3, status: 'Unknown'},
              { id: 4, status: 'Normal'}
          ]
        };
    },
    components: {
        appServer: Server
    }
	}
</script>

<style>

</style>

I wonder if appServer is equal to ?

May
25
1 month ago
Activity icon

Replied to Sending Automated Email

How to set up the task scheduler? Using cron job?

Activity icon

Started a new Conversation Sending Automated Email

Hello,

I would like to send automated email every 1 month since the determine time. Every month the user should receive a billing statement. How to do so?

May
23
1 month ago
Activity icon

Awarded Best Reply on Appear As {{ Title }} 2

I found the answer:

methods: {
destroy: function(){
  this.$destroy();
}
Activity icon

Replied to Appear As {{ Title }} 2

I found the answer:

methods: {
destroy: function(){
  this.$destroy();
}
Activity icon

Started a new Conversation Appear As {{ Title }} 2

app.js

new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance'
},
beforeCreate: function(){
  console.log('beforeCreate()');
},
created: function(){
 console.log('created()');
},
 beforeMount: function(){
	console.log('beforeMount()');
},
mounted: function(){
	console.log('mounted()');
 },
beforeUpdate: function(){
	console.log('beforeUpdate()');
},
updated: function(){
	console.log('updated()');
},
beforeDestroy: function(){
	console.log('beforeDestroy()');
},
destroyed: function(){
	console.log('destroyed()');
},
methods: function(){
	destroy: function(){
  	this.$destroy();
 }
}
});

index.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<meta charset="UTF-8">

<div id="app">
	<h1>{{ title }}</h1>
	<button @click="title = 'Changed'">Update Title</button>
	<button @click="destroy">Destroy</button>
</div>

<script src="app.js"></script>

This time, I also confuse why I title still appear as {{ title }}. I have the app reference correctly:

Activity icon

Started a new Conversation Appear As {{ Title }}

index.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app1">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
</div>

<div id="app2">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
</div>

<script src="app.js"></script>

app.js

new Vue({
el: '#app',
data: {
  title: 'The VueJS Instance',
  showParagraph: false
 },
 methods: {
  show: function() {
     this.showParagraph = true;
     this.updateTitle('The VueJS Instance (Updated)');
  },
  updateTitle: function(title) {
     this.title = title;
  }
},
computed: {
  lowercaseTitle: function() {
    return this.title.toLowerCase();
  }
},

watch: { title: function(value) { alert('Title changed, new value: ' + value); } } });

new Vue({ el: '#app2', data: { title: 'The second Instance' }, methods: { show: function() { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); }, updateTitle: function(title) { this.title = title; } } });

The result of this code:

{{ title }}

This is not always visible

The second Instance

I wonder why the first one appears as : {{ title }} ?

May
21
1 month ago
Activity icon

Replied to V-bind:class And V-bind:style

app.js

methods: {
	startGame: function(){
		vm = this;
		vm.playerHealth = 100;
		vm.monsterHealth = 100;
		vm.gameIsRunning = true;
	},
	attack: function(){
		vm = this;
		vm.monsterHealth -= Math.floor(Math.random() * 10);

		if (vm.monsterHealth <= 0) {
			alert('You won!');
			vm.gameIsRunning = false;
			return;
		}

		vm.playerHealth -= Math.floor(Math.random() * 10);		

		if (vm.playerHealth <= 0) {
			alert('You lost!');
			vm.gameIsRunning = false;
			return;		
		}
	},

I also wonder why the alert does not pop up eventhough I lost and win the game?

Activity icon

Replied to V-bind:class And V-bind:style

I thought when I mention either v-bind:class="healthbar" or v-bind:style="healthbar" it would call healthbar in vue data.

This also does not show me anything:

<div v-bind:class="healthbar" v-bind:style="width: 10%; height: 40px; background-color: green;"></div>
Activity icon

Started a new Conversation V-bind:class And V-bind:style

What is the difference between the two?

ref: https://vuejs.org/v2/guide/class-and-style.html

index.html

<div class="small-6 columns">
        <h1 class="text-center">YOU</h1>
        <div class="healthbar">
            <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">

            </div>

            <div v-bind:class="healthbar" v-bind:style="healthbar"></div>
        </div>
    </div>

app.js

new Vue({
el: "#app",
data: {
	healthbar: {
		width: '10%',
		height: '40px',
		background-color: '#eee',
		margin: 'auto',
		transition: 'width 500ms',
	},		
},
methods: {
	
}
})

app.css

.healthbar {
		width: 80%;
		height: 40px;
		background-color: #eee;
		margin: auto;
		transition: width 500ms;
}

The result of this code is there is this health bar which is around 80% in green color. I would like to control the healthbar, start with 10%. How to create such a thing? (using vue)

I thought this line of code will result something:

<div v-bind:class="healthbar" v-bind:style="healthbar"></div>
May
20
1 month ago
Activity icon

Started a new Conversation Looping Vue

index.html

<!-- 4) Print the following object (only the values) and also create a nested loop for the array: {name: 'TESTOBJECT', data: [1.67, 1.33, 0.98, 2.21]} (hint: use v-for and v-if to achieve this) -->
 <ul>
<li v-for="value in testData">
  <template v-if="Array.isArray(value)">
    <div v-for="element in value">{‌{ element }}</div>
  </template>
  <template v-else>
    {‌{ value }}
  </template>
</li>

app.js

new Vue({
 el: '#exercise',
data: {
show: true,
array: ['Max', 'Anna', 'Chris', 'Manu'],
myObject: {
  title: 'Lord of the Rings',
  author: 'J.R.R. Tolkiens',
  books: '3'
},
testData: {
  name: 'TESTOBJECT', 
  id: 10,
  data: [1.67, 1.33, 0.98, 2.21]
}
}

});

Please help me figure out why I get these results:

 {‌{ value }}
{‌{ value }}
{‌{ element }}
{‌{ element }}
{‌{ element }}
{‌{ element }}

It suppose to be like these:

TESTOBJECT
10
1.67
1.33
0.98
2.21

Any idea why?

May
18
1 month ago
Activity icon

Replied to Change Box Width And Color

I don't understand this error: SyntaxError: export declarations may only appear at top level of a module

export default{

Any clue why?

Activity icon

Replied to Change Box Width And Color

I wonder why it still does not works.

index2.html

<html>

<body>
<div>
		<div class="demo" :class="color" :style="{'width': width +'px'}"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">
</div>

<script>
export default{
	data(){
		return{
			color: "gray",
			width: 100
		};
	}
}
</script>

<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;	
margin: 10px;
}

.purple{
		background-color: purple;
}
.red {
	background-color: red;
}

.green {
	background-color: green;
}

.blue {
	background-color: blue;
}

.gray {
	background-color: gray;
}
</style>

</body>
</html>
Activity icon

Replied to Change Box Width And Color

I did. I enter red and 50 in the input box and it does not changes the property.

Activity icon

Replied to Change Box Width And Color

That also does not work. Have you tested your code?

I copy paste into a new file and it does not works.

Activity icon

Replied to Change Box Width And Color

It does not works.

Activity icon

Started a new Conversation Change Box Width And Color

index.html

<!-- Put this in the HTML section in JSFiddle! -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">

<div id="app">
<div class="demo" :style="{backgroundColor: color}"></div>
<div class="demo" :style="myStyle"></div>
<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">

</div>

<script src="app.js"></script>

app.js

new Vue({
el: '#app',
data: {
	color: 'gray',
	width: 100
},
computed: {
	myStyle: function(){
		return {
			backgroundColor: this.color,
			width: this.width + 'px';
		};
	}
}
})

style.css

.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

.blue {
background-color: blue;
}

.gray {
background-color: gray;
}

I expected when I input the color and the width, the next three boxes will changes their colors. Yet, it does not work. Any clue why?

May
12
2 months ago
Activity icon

Started a new Conversation Kafka & RabbitMQ

Anyone ever heard of kafka & RabbitMQ what are they for?

ref: https://kafka.apache.org/intro

https://www.rabbitmq.com/

What is the difference with normal apache?

May
11
2 months ago
Activity icon

Replied to Creating Name Box With React

index.html

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js">	</script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="box.js"></script>

</head>

<body>

<div id="p1">
</div>
<div id="p2">
</div>


</body>
</html>

box.js

function Person(props){
	return (
  			<div className="person">
  			<h1>{ props.name }</h1>
  			<p>Your Age: { props.age }</p>
  			</div>
	);

}

ReactDOM.render(<Person name="Max" age="28"/>, document.querySelector('#p1'));

ReactDOM.render(<Person name="Manu" age="29"/>, document.querySelector('#p2'));

style.css

.person{
margin: 10px;
display: inline-block;
border: 1px solid #eee;
box-shadow: 0 2px 2px #ccc;
width: 200px;
padding: 20px;

}

I checked the console and get this highlighted: SyntaxError: expected expression, got '<'

it is this line:

<div className="person"> 

in box.js

Activity icon

Started a new Conversation Creating Name Box With React

Anyone knows why I get a blank white screen when I tested this code? It works in codepen.io

ref: https://www.w3schools.com/REACT/default.asp

index.html

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="http://localhost/React/intro/box.js"></script>
<link rel="stylesheet" href="http://localhost/React/intro/style.css">
</head>

<body>

<div id="p1">
</div>
<div id="p2">
</div>


</body>
</html>

box.js

<script>

function Person(props){
return (
  		<div className="person">
  		<h1>{ props.name }</h1>
  		<p>Your Age: { props.age }</p>
  		</div>
);

}

ReactDOM.render(<Person name="Max" age="28"/>, document.querySelector('#p1'));

ReactDOM.render(<Person name="Manu" age="29"/>, document.querySelector('#p2'));

</script>

style.css

.person{
	margin: 10px;
	display: inline-block;
	border: 1px solid #eee;
	box-shadow: 0 2px 2px #ccc;
	width: 200px;
	padding: 20px;

}
May
08
2 months ago
Activity icon

Replied to Get Coupon Disc In Js

It only reads this part if I inspect element.

$.get('/cpages/orders/check_coupon_code', {
    	coupon_code: coupon_code,
    	total: total
  	})

alert("456") also does not pop up.

Activity icon

Replied to Get Coupon Disc In Js

I think I should brush up my js skill. I rarely use them, except for reading someone else codes.

.done(function(data) {
    if (isNaN(data) != true) {
      alert("123");
      $("#original_coupon").val(coupon_code);
      var discount = parseInt(data);
      total = total - discount;
      $("#CDisc").text("Rp. -" + data);
      $("#total-checkout").text(total);
      $("#total").val(total);
      $("#discount-int").val(data);
      $("#btn_reset_coupon").toggle();
      $("#btn_apply_coupon").toggle();
      $('#coupon_code').prop('readonly', true);
      $('#realcoupon_code').val($('#coupon_code').val());
    } else {
      alert(data);
      alert("456");
      clearDiscount();
    }

Now, I wonder why alert("123"); does not pop up. and it seems like it does not read .done part.

Activity icon

Started a new Conversation Get Coupon Disc In Js

checkout.blade.php

function checkCoupon (total) {

var check = $("#original_coupon").val();
var coupon_code = $("#coupon_code").val();
if(check != coupon_code) {
	$.get('/cpages/orders/check_coupon_code', {
    	coupon_code: coupon_code,
    	total: total
  	})
  .done(function(data) {
    if (isNaN(data) != true) {
      $("#original_coupon").val(coupon_code);
      var discount = parseInt(data);
      total = total - discount;
      $("#discount").text("Rp. -" + data);
      $("#total-checkout").text(total);
      $("#total").val(total);
      $("#discount-int").val(data);
      $("#btn_reset_coupon").toggle();
      $("#btn_apply_coupon").toggle();
      $('#coupon_code').prop('readonly', true);
      $('#realcoupon_code').val($('#coupon_code').val());
    } else {
      alert(data);
      clearDiscount();
    }
  });

} else { alert('Kupon sudah digunakan'); } }

This is code for coupon_code function:

CouponsController.php

public function check_coupon_code()
	{

    // return json_encode(request('coupon_code'));

    $coupon = Coupons::where('coupon_code', request('coupon_code'))->first();
    if ($coupon == null) {
        echo "Kupon tidak ditemukan";
    } else {
        if ($coupon->coupon_minimum_cost < request('total')) {
            return $coupon->coupon_discount;
        } else {
            echo "Kupon tidak sesuai dengan minimum pembelian. Total:". request('total'). "| Minimum:". $coupon->coupon_minimum_cost;
        }
    }
   }

My question is if I get this value for check_coupon_code() :

return $coupon->coupon_discount;

How to capture the value in function checkCoupon (total) ? It suppose to return the coupon_discount value to checkCoupon function right?

May
06
2 months ago
Activity icon

Replied to Getting Coupon_code

I still wonder why I get this message: "Kupon tidak ditemukan" which means "Coupon is not found"

CouponsController.php

 public function check_coupon_code()
	{

    // return json_encode(request('coupon_code'));

    $coupon = Coupons::where('coupon_code', request('coupon_code'))->first();
    if ($coupon == null) {
        echo "Kupon tidak ditemukan";
    } else {
        if ($coupon->coupon_minimum_cost < request('total')) {
            return $coupon->coupon_discount;
        } else {
            echo "Kupon tidak sesuai dengan minimum pembelian. Total:". request('total'). "| Minimum:". $coupon->coupon_minimum_cost;
        }
    }
	}

The coupon does exist.

I wonder if this: request('coupon_code') contains the correct coupon code that I typed?

Activity icon

Started a new Conversation Getting Coupon_code

checkout.blade.php

function checkCoupon (total) {
var check = $("#original_coupon").val();
var coupon_code = $("#coupon_code").val();
if(check != coupon_code) {
		$.get('/cpages/orders/check_coupon_code', {
    		coupon_code: coupon_code,
    		total: total
  		})
  	.done(function(data) {
    if (isNaN(data) != true) {
      	$("#original_coupon").val(coupon_code);
      	var discount = parseInt(data);
      	total = total - discount;
      	$("#discount").text("Rp. -" + data);
      	$("#total-checkout").text(total);
      	$("#total").val(total);
      	$("#discount-int").val(data);
      	$("#btn_reset_coupon").toggle();
      	$("#btn_apply_coupon").toggle();
      	$('#coupon_code').prop('readonly', true);
      	$('#realcoupon_code').val($('#coupon_code').val());
    	} else {
      alert(data);
      clearDiscount();
      }
  	});
} else {
		alert('Kupon sudah digunakan');
 }

}

CouponsController.php

public function check_coupon_code()
	{

dd(request('coupon_code'));

    $coupon = Coupons::where('coupon_code', request('coupon_code'))->first();
    if ($coupon == null) {
        echo "Kupon tidak ditemukan";
    } else {
        if ($coupon->coupon_minimum_cost < request('total')) {
            return $coupon->coupon_discount;
        } else {
            echo "Kupon tidak sesuai dengan minimum pembelian. Total:". request('total'). "| Minimum:". $coupon->coupon_minimum_cost;
        }
    }
}

the result of : dd(request('coupon_code'));

Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0
May
04
2 months ago
Activity icon

Started a new Conversation SEO For Blog

I would like to ask:

I heard that creating blog posts could increase your seo, how to register your article so that it could increase your seo rank in search enginee ?

ref: https://www.quicksprout.com/seo-for-blog/

Is filling meta title and meta description is enough. If so then, it will be one meta title and meta description per page correct?

May
03
2 months ago
Activity icon

Replied to Add(Cart $cart)

CartController.php

 public function store(Request $request)
{
    $this->validate($request, [
      'prod_id' => 'required|numeric',
      'amount' => 'required|numeric|min:1',
      'prod_type' => 'nullable'
    ]);

    $exist = Cart::where('prod_id', request('prod_id'))->where('prod_type', request('prod_type'))->where('user_id', auth()->user()->user_id)->first();

    if (empty($exist)) {
        if (Products::checkStockAvailability(request('prod_id'), request('amount'))) {
            Cart::create([
            'user_id' => auth()->user()->user_id,
            'prod_id' => request('prod_id'),
            'amount' => request('amount'),
            'prod_type' => request('prod_type'),
          ]);
        } else {
            flash('Pembelian melebihi jumlah stock yang tersedia')->error();
            return back();
        }
    } else {
        if (Products::checkStockAvailability(request('prod_id'), request('amount') + $exist->amount)) {
            Cart::where('cart_id', $exist->cart_id)->update([
              'amount' => $exist->amount + request('amount')
            ]);
        } else {
            flash('Pembelian melebihi jumlah stock yang tersedia')->error();
            return back();
        }
    }

    flash('Product dimasukkan ke dalam keranjang belanja');

    return back();
}

Then, it must be this one. Only request being passed.

I think I see some light. The add product only works through product details since you have select the t-shirt size. It does not work through the frontpage for some reason. since you only know the product_id and not the product_type (small, medium, large, x-large).

Any idea how to solve this problems?

Someone mentioned to create a pop up when you click the product picture asking to fill in the t-shirt size. How to create pop up like this?

Activity icon

Replied to Add(Cart $cart)

What do you mean by: the binding from the URL is used ?

I see that there is this url when you want to add to the product to cart: http://localhost/victoryeshop/public/cart/add/3

Then, my route is:

web.php

Route::post('/cart/add', '[email protected]');

and I get this error:

(1/1) NotFoundHttpException

My onlineshop has a bug.

Activity icon

Started a new Conversation Add(Cart $cart)

CartController.php

public function add(Cart $cart)
	{
    if (Products::checkStockAvailability($cart->prod_id, $cart->amount + 1)) {
        Cart::where('cart_id', $cart->cart_id)->update([
          'amount' => $cart->amount + 1
        ]);
    } else {
        flash('Pembelian melebihi jumlah stock yang tersedia')->error();
        return back();
    }

    return back();
	}

I also cannot understand what this means: add(Cart $cart) ?

Is it the same like $cart = new Cart; ?

Activity icon

Replied to Post And Get In Javascript

okay, I also confuse about this one:

request()->request->add([
      'user_id' => auth()->user()->user_id,
      'order_total_unit' => $order_total_unit,
      'order_total_weight' => $order_total_weight,
      'order_total_cost' => $order_total_cost,
      'prod_id' => $product_info['prod_id'],
      'prod_unit' => $product_info['prod_unit'],
      'prod_type' => $product_info['prod_type'],
      'order_status' => 0,
      'order_coupon_id' => $coupon_id,
    ]);

adding these data to where? This ecommerce site already works (I don't know who build it - I paid someone to built it, yet I am sure there is another person who contribute a lot buiding the site that I didn't recognize), I just want to study the logic so that I can build another one.

Activity icon

Replied to Post And Get In Javascript

This is the question: I wonder why the first one using $.post ?

Is it the right way to use post?

Activity icon

Started a new Conversation Post And Get In Javascript

checkout.blade.php

function checkOngkir(kota_id, kota_tujuan_id, weight) {
	$.post('/cpages/ongkir/harga_checkout', {
  			kota_id: kota_id,
  			kota_tujuan_id: kota_tujuan_id,
  			weight: weight,
  			_token: $('meta[name=csrf-token]').attr('content')
		})
...
}

function getKota() {
	$("#order_province-placeholder").remove();
	$("#order_city_destination").prop("disabled", true);
	$("#order_city_destination").html("<option>Loading...</option>");

	var kota_id = $("#order_province").val();
	var url = 'cpages/ongkir/kota';

  	$.get(url, {
  			kota_id: kota_id
		})
...

}

I wonder why the first one using $.post, checkOngkir means getting shipping cost. It is showing another dropdown for shipping cost.

and the second one using $.get, getKota means getting the city name after selecting the province. I think this one is quite obvious.

Activity icon

Awarded Best Reply on Bootstrap

I just put the reference on my first post. Maybe it just the way it is.

I think whenever I write label inside that bracket is being sensored by the forum.

May
02
2 months ago
Activity icon

Replied to Bootstrap

I just put the reference on my first post. Maybe it just the way it is.

I think whenever I write label inside that bracket is being sensored by the forum.

Activity icon

Started a new Conversation Bootstrap

Hello,

I wonder why:

registration.blade.php

<div class="form-group">	
	<label>Nama</label>
	<input type="text" class="form-control" name="nama">
</div>

label only syntax (without div) could turn into css for name ?

I thought you have to use

ref: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Apr
30
2 months ago
Activity icon

Replied to Jquery Getting Method

Also for this function:

function checkOngkir(kota_id, kota_tujuan_id, weight) {
$.post('/cpages/ongkir/harga_checkout', {
  		kota_id: kota_id,
  		kota_tujuan_id: kota_tujuan_id,
  		weight: weight,
  		_token: $('meta[name=csrf-token]').attr('content')
 })
	.done(function(data) {
  	$("#shipping-info-area").html(data);
		}).fail(function(xhr, status, error) {
  			console.log(xhr);
  			console.log(status);
  			console.log(error);
	});
}

</script>

Whatever returned in this url: /cpages/ongkir/harga_checkout

will stored in data correct?

Apr
29
2 months ago
Activity icon

Started a new Conversation Jquery Getting Method

views/store/checkout/cost.blade.php

@if($cost != null)
@foreach($cost as $item)
  <input type="hidden" id="{{$item->service}}" value="{{ $item->cost[0]->value }}" />
@endforeach
<select id="order_shipping_type" name="order_shipping_type" class="order_shipping_type">
  <option id="order_shipping_type_placeholder" value="">Silahkan Pilih Jenis Pengiriman</option>
  @foreach($cost as $item)
    <option value="{{$item->service}}">
      [{{$item->service}}] Rp.{{ number_format($item->cost[0]->value) }} (Estimasi Sampai: {{ $item->cost[0]->etd }} hari)
    </option>
  	@endforeach
	</select>
@else
<h3>Tidak ada informasi ongkir di kabupaten/kota ini. Silahkan gunakan daerah yang lain.</h3>
@endif

<script>
$(document).ready(function() {
	$('.order_shipping_type').on('change', function() {
		$("#order_shipping_type_placeholder").remove();
		var metode = $(this).val();
		$("#ongkir-cost").text("Rp. " + $("#"+metode).val());
		$("#total-checkout").text("Rp. " + (parseInt($("#"+metode).val()) + parseInt($("#subtotal").val())));
	$("#total").val(parseInt($("#"+metode).val()) + parseInt($("#subtotal").val()));

		$("#coupon_code").val(null);
		$("#original_coupon").text(null);
		$("#discount").text("-");
});
});
</script>

Where does this comes from: var metode = $(this).val(); ?

Is it from: {{$item->service}} ?

Apr
28
2 months ago
Activity icon

Replied to GetCity

I read the doc and still do not understand where does this comes from:

trigger('chosen:updated');

? I mean I search my whole page for chosen:updated and cannot find it.

Activity icon

Started a new Conversation GetCity

checkout.blade.php

function getKota() {
   $("#order_province-placeholder").remove();
   $("#order_city_destination").prop("disabled", true);
   $("#order_city_destination").html("<option>Loading...</option>");

var kota_id = $("#order_province").val();
var url = 'cpages/ongkir/kota';

 $.get(url, {
  kota_id: kota_id
})
.done(function(data) {

  $("#order_city_destination").removeAttr("disabled");
  $("#order_city_destination").html(data);
  $("#order_city_destination").val(id_kota).trigger('chosen:updated');
});

}

Hello, I cannot understand this javascript function. First, where does data comes from?

.done(function(data) {

also, what does this means:

trigger('chosen:updated');
Apr
25
2 months ago
Activity icon

Replied to Markdown

Illuminate\Contracts\Filesystem\FileNotFoundException app/public

still not found

Activity icon

Replied to Markdown

That part works. I have to use a live image not from the local one. I checked the email from yahoo and it cannot read my local image I guess.

Now,

Illuminate\Contracts\Filesystem\FileNotFoundException /storage/app/public

I want to test attaching pdf file to my email:

public function build()
	{
    return $this
        ->subject('Web Promo')
        ->markdown('mail.webpromo')
        ->attachFromStorage('/storage/app/public', 'Promotional%20Brosure.pdf

', [ 'mime' => 'application/pdf' ]); }

I have the file in storage/app/public/Promotional Brosure.pdf

Why the error appears?

Activity icon

Replied to Markdown

message.blade.php

@component('mail::layout')
{{-- Header --}}
@slot('header')	
@component('mail::header', ['url' => config('app.url')])

<img src="{{ asset('images/marketing_banner.jpg') }}" class="logo" alt="Marketing Banner">

{{ config('app.name') }}
@endcomponent
@endslot

It still does not do any good. The banner won't show up.

Activity icon

Replied to Markdown

I change it to this:

<tr>
<td class="header">
<a href="{{ $url }}" style="display: inline-block;">
@if (trim($slot) === 'Laravel')
<img src="{{ asset('images/marketing_banner.jpg') }}" class="logo" alt="Laravel Logo">
@else
{{ $slot }}
@endif
</a>
</td>
</tr>

What is $url ? Is it from: APP_URL=http://localhost/marketing ?

Also, now I only see the text Laravel Logo instead of showing the banner.

I have public\images\marketing_banner.jpg file.

Activity icon

Started a new Conversation Queue Mail

ref: https://laravel.com/docs/7.x/mail#writing-markdown-messages

Queueing A Mail Message

Since sending email messages can drastically lengthen the response time of your application, many developers choose to queue email messages for background sending. Laravel makes this easy using its built-in unified queue API. To queue a mail message, use the queue method on the Mail facade after specifying the message's recipients:

I don't really understand this why using queue for sending email message?

When do we have to use queue?

Also in here:

$when = now()->addMinutes(10);

Mail::to($request->user()) ->cc($moreUsers) ->bcc($evenMoreUsers) ->later($when, new OrderShipped($order));

You can delay the email sent message to the customize time. When do we need this feature? Any example?

Activity icon

Started a new Conversation Markdown

WebPromoMail.php

 public function build()
 {
    return $this
        ->subject('Web Promo')
        ->markdown('mail.webpromo');
 }

webpromo.blade.php

@component('mail::message')

<h2>Web Promo</h2>

<br><br>

<p>Hello, customer</p>

<p>I would like to show this website that might be useful for you.</p>

@component('mail::button', ['url' => url('login')])
Cek our website!
@endcomponent

Thanks,<br>
{{ config('app.name') }}

@endcomponent

Using this email template I get this email:

https://drive.google.com/file/d/1tFQm-gfN92LXjVlZjqhUAIwiiA6dClWU/view?usp=sharing

Cek the top header - there is this strange logo. How to customize it?

I see my other online shop that someone else built it, it has a text written the name of the online shop which is clickable and it will carries you to the online shop website if you click it?

Also on the bottom of the email there is this strange footer - © 2020 Laravel. All rights reserved.

Any clue how to customize it?