Sending Email Using Queue (SMTP-GMAIL) in Laravel 5.3 - Part I

In previous post, we have successfully sent an email using Mail::send with some of it's properties and we sent this email using default way or not using background worker or in another word 'queue'. So Right now, we are going to play queue to the email using smtp-gmail :D. mmmm......... Next please follow below instructions
1. Create table for queue and also failed-table too. Queue table is for saving list of some jobs (emails that will be sent) and failed-table is for saving failed list of our emails. For creating those tables, we can use these commands :

php artisan queue:table

php artisan queue:failed-table

So we have two migration files now :

Next, execute migration command:

php artisan migrate

Aaand now we have two tables in our phpmyadmin :

2. Change QUEUE_DRIVER = sync to database on .env file :

3. Create new job :

php artisan make:job {your-job-file-name}

4. Let's create a new route and controller...

5. Actually, we can do this step in step 3, buuut... mmmm.... yaaah... it's okie to seperate it in another step... :D
So... in this step 5, let's complete our handle method :




6. Run php artisan queue:listen
This command is the starting point for our queue job to be executed by laravel.

No data was received to import ... in XAMPP - Windows

Here is the error message :

In this case, I wanted to import an sql file which file size more than 256M, so I got above error. To solve this error just change the 'upload_max_filesize' in php.ini like this :

restart apache server aand go to phpMyadmin again, it should be like this :

Yaaaps... Now we can import sql file again which filesize less than 512M...

Installing Yarn on Windows 7

Download installation for this web :
https://yarnpkg.com/en/docs/install

USB 8G became 3MB - Fixed

So.... In order to make it back to it's original size, please follow these steps....

So we have a lot of unallocated space... :D So... mmmm..........
Open command prompt, type "diskpart" :

Then type "select volume 5" to select our usb, then type "clean" :

Just format our usb then go back to disk management.... then right click on the usb, choose new volume as shown in the picture below :

Yeeeei...Awesome... B-)

Tencent Malware

Then delete the report.dll again... ;)

Setting Up React Environment Using NPM, Babel, & Webpack in Windows 7

Okaay,,, In this series, we'll gonna play with react in windows 7. The first thing to do is preparing the windows 7 environment.... {I'm assuming that your windows already installed the node.js and I'm using sublime here}
1. Create a new folder for our react code, then open cmd promp there...

2. Type "npm init" and put some info if you want.. :) or you just can use default setting from npm by using "npm init --yes",

npm init is actually a basic configuration for our react environment, so our folder will contain a package.json as shown below :

3. Type "npm i react --save-dev ", this will gonna install/get react library : {i is an alias for "install"}

After finishing this command we will gonna see a node_modules in our directory with bunch of folder inside of it. this node_modules is the main directory for all of our react,babel, webpack package. And also we put --save-dev flag on our command above. That flag is a way to save our package devDependency to package.json.

4. Actually, we can install some packages in just one command like this :
"npm i webpack webpack-dev-server --save-dev". So we are going to install webpack and webpack-dev-server...

5. Okiee,, this is the last command that we need to execute, it's a long one.. :D, this is going to take a while because we are going to install many packages (react-dom, babel, babel-loader, etc)
"npm i react-dom babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev" :

btw... There is a flag called "-g", this flag is going make our package run globally. I actually avoid to use -g, because it might mess up with another project package in my windows 7 directory because of different package version. Soo ummm... all packages that we installed here are running locally just for our work directory. Aaand.... You don't have to worry if you install those packages not in order, just make sure that all packages are installed.. :)

6. Create some new files, webpack.config.js, App.js, main.js, & index.html..

7. Let's work on index.html first, put this code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Setup React in Windows 7 </title>
</head>
<body>
<div id="app"></div> <!-- our react target -->
<script src="bundle.js"></script> <!-- our bundled file -->
</body>
</html>

So our index.html is looked like this :

btw,,, index.html is our main view, so this page will gonna show up when we run our react project. In this file we put a div with id="app", this div will be used by react to put/show something, like text or another html elements. In the line 9, there is a bundle.js. This bundle.js is generated by react, and this is the power of webpack because every javascript, jquery, or ajax, or another scrypt will be available here. So we don't have to put something like <scrypt>bla bla</scrypt> inside of our html file, because everything already handled by webpack {or may be npm, I don't know :v}
8. Let's work on webpack.config.js, put this code :

var path = require ('path');
var webpack = require ('webpack');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.js'
    },
    devServer: {
        inline:true,
        port:3333
    },
    module: {
        loaders:[
        {
            test:/\.jsx?$/,
            exclude:/node_modules/,
            loader:'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }
         ]
    }

}

There are a lot of things here in webpack,...mmmm...... when we run "npm start", main.js file will be called {as shown in line 5}, then bundle.js will be generated {line 6}. As explained before, bundle.js is called in our index.html. Our localhost will gonna run on port 3333 {line 12}, aaand another config for modules eehehhe... :D

9. Let's move to App.js file, put this code :

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    render()
    {
        return <div>Hellow Hisoka Poipo... ;)</div>
    }
}

export default App

App.js will be called in main.js. As we can see, this App.js will generate our hellow world that will be put to our index.html file. We are using react and react-dom here... :)

10. Let go to main.js, put this code :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))

This main.js is actually connecting our App.js to index.html using element div with id="app" that we created before in index.html.... :)
So when program is running, webpack is calling main.js and generating bundle.js. main.js is conneting App.js and index.html. Aaand. bundle.js is used by index.html,,, so everything is seemed connected... :)

Last thing, let's put "start" command in package.json, so npm knows what "start" is ...

11. Put new scripts in package.json : "start": "webpack-dev-server",

Yuuupsss... DOneeee... Let's run our first reat project by typing "npm start" :

So let's open localhost:3333 as shown in cmd above...

Demo :

Source code is available here :
https://github.com/HyosokaPoipo/learnReactinWindows7

https://bitbucket.org/HyosokaPoipo/learnreactinw7


Go to Part II...