To add SweetAlert Notifications inyour laravel Project

To add Tostr inyour laravel Project

1. Go tohttps://sweetalert.js.org/guides/ where you can see all details about toastr notifications.

3. Add the sweetalert in your project template. in my case it is the app.blade.php
add it in your header

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

4. You can now add notifications.

 add an extra script before your body end tag where you can put your condition

<script>

@if(Session::has('success'))

swal("{{ Session::get('success')}}");

@endif

</script>

In your laravel you can produce a session and trigger the toastr once there is a certain session you want.

Ex:
In my categories controller I made a session once a category was created

public function store(Request $request)

{

//

$this->validate($request,[

'name'=>'required'

]);

// dd($request);

$category = new Category;

$category->name = $request->name;

$category->save();

Session::flash('success', 'You successfully created a category');

return redirect()->route('categories');

}

Then in my app.blade.php I made a condition that will check if there is a success session then put the value in a sweetalert

<script>

@if(Session::has('success'))

toastr.success("{{ Session::get('success')}}");

@endif

</script>

How to add Toastr notifications in your laravel Project

To add Tostr inyour laravel Project

1. Go to https://github.com/CodeSeven/toastr where you can see all details about toastr notifications.
 

2. Save each JS and CSS

• //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js
• //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css

            Save them in laravel's  public folder, in js and css

3. Add the  toastr in your project template. in my case it is the app.blade.php

At your header

<link rel="stylesheet" href="{{ asset('css/toastr.min.css')}}">

Add Jquery library below your css

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Before the end tag of your body

<script src="{{ asset('js/toastr.min.js')}}"></script>

4. You can now add toast notifications.

 add an extra script below the import of tostr.min.js

<script src="{{ asset('js/toastr.min.js')}}"></script>

<script>

toastr.info('Are you the 6 fingered man?')

</script>

For more example how to use it, refer to this link and demo

https://codeseven.github.io/toastr/demo.html

In your laravel you can produce a session and trigger the toastr once there is a certain session you want.

Ex:
In my categories controller I made a session once a category was created

public function store(Request $request)

{

//

$this->validate($request,[

'name'=>'required'

]);

// dd($request);

$category = new Category;

$category->name = $request->name;

$category->save();

Session::flash('success', 'You successfully created a category');

return redirect()->route('categories');

}

Then in my app.blade.php I made a condition that will check if there is a success session then put the value in a toastr

<script>

@if(Session::has('success'))

toastr.success("{{ Session::get('success')}}");

@endif

</script>

How to Add VS Code in your Right Click Menu

How to Add VS Code in your Right Click Menu 

This tutorial is intended for those people who can't see the VS Code in the right menu to open a project directory in VS Code. Actually this is my problem for 3 weeks and I am too lazy to find a solution until today that I am tired of always dragging the folder in my workspace. 


First thing to do is open your regedit. You can search in your start menu the regedit or just simply press window + R in your keyboard that. 

At the top of your regedit paste this location and press enter
Computer\HKEY_CLASSES_ROOT\Directory\Background\shell

Right Click on the Shell Key and select "New > Key

Give the new key the name that you want to show up on the desktop context menu. For this example we’ll be using Notepad.

Enter the title of your right click command

Right click on your VS Code Key and a Key for it and name the key "command" lower case. 

To complete this step you’ll need the full path to the application that you want to launch. You can use Shift + Right-Click to get the Copy as Path menu item to find this more quickly. 

Now click on “command” on the left side, and then double-click on the (Default) key in the right side to edit the string value.
Paste in the full path to the VS Code.

Credits to : https://www.howtogeek.com/howto/windows-vista/add-any-application-to-the-desktop-right-click-menu-in-vista/

The last sunset of the pink promise

The last sunset of the pink promise

It leads to to a place where an Angel fell

a bright golden smile where gods reside

the deep blue water, so calm, so still

when the beast kissed a rose without asking Apollo's lyre

He forged forever by melting his mind

the juice of  a rotten wisdom is a broken vow

For the sake of love, . . . pain must be bind

for what Aphrodite's burden is for you to sow

That night so cold can't you remember

the moon so full and and our hands at rest

Breath of west gave a single promise

Turns into something that can never be the best.

Feelings grades is a derivative of the golden times

Fast like a dragon, kiss like a snail

Both of its wings is a sea to ponder

that transcends from slowness to a waterfall of changes.

. . . . .  >> . . 

Invoice App using Node.js + Vue.js + Axios + MySQL (Hard coding)

After a long time, I'm here again. I don't even know why I'm blogging right now. All I know is that I want to study a thing, and one of the best ways to do that is to share it. It is scientifically proven that once you share a certain knowledge you learned especially if it's a fresh one, it makes your brain record it for in your mind for a long time :)

So, no more storytelling. Let's get to the dashboard.

*Take note that it's goal is to teach how to use node.js, Vue.js, & Mysql. The idea of invoice is not that applicable, it's jus a sample app.


1. INTERFACE 
First, we need to set up the interface. The story about this project is that it all started from reading the vue.js book from packtpub. There is a sample of an invoice design there where it is also used in a real app. So right now we're really making our own version of it, but we'll just copy the interface.

So since this tutorial will not cover the design of it, I will let you copy it from my fiddle. I use bootstrap 4 for it CSS framework. Copy it from this link 



2. DATABASE -  Create the database for our app.  Create table transactions with 5 fields in mysql (trans_id, trans_qty,  trans_desc, trans_rate, trans_stamp). We're going to add more table but for now, let's stick with the transaction first.

Since Creating mysql database is not our main topic, I prepare the initial mysql db for you to download in this LINK and import to your mysql. 

3.WORKSPACE -  Create a folder named invoice_app and drag it to Visual Studio Code. Remember that we're using visual studio code as our main text editor together with its terminal.
Click View / Integrated Terminal at the toolbar  to open a terminal on the current directory.

4. SERVER - This tutorial assumes that you already have the knowledge to install node.js. If you still have no node.js in your PC, that's when your friend google comes in :)

let's initialize the server. type  npm init at the terminal. This will ask for value such as package name, leave its default and press enter until finish. After that you'll see a package.json file inside your directory

5.  INSTALL MySQL & EXPRESS
Install MySql and Express by typing npm install --save  mysql express. The --save  will tell node package manager to include msyql and express as additional dependency for your node app.

6. Index.js - Create a file index.js in your root directory.  Index.js is listed as the main page in your package.json file.  Your directory should look like this.

7. NODEMON 
let's install nodemon so that we don't need to restart node everytime we make changes. Type npm install -g nodemon   The -g tells node to install nodemon globally so we don't need to reinstall it to other package.

After you install globally type npm install nodemon  to install it on your directory.

Start the server by typing nodemon   You'll see nothing since we don't have server in the index.js




8. BUILDING THE INDEX.JS 
open your index.js  and let's add a server.

Add  mysql and express at the top of your index.js

const express = require('express');

const mysql =require('mysql');

Initialize and connect to express.js

const app = express();

add the server and listen to port 3000. Put this code at the bottom of your index.js file

//start server

app.listen('3000', () => {

console.log('server started on port 3000');

});

After that your console will prompt. It means that your server is good and working properly. If you check your localhost:3000  It will show an error but that's ok, that is because we haven't put any route.
[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
server started on port 3000
Mysql Connected

9. MySQL CONNECTION

Create the connection to mysql. Change the host, user, password, and database base on your server and database you created.
Add the following code  before the con const app = express();

//Create connection

const db = mysql.createConnection({

host : 'localhost',

user : 'root',

password : '',

database : 'nodemysql'

});

//connect

db.connect((err)=>{

if (err){

throw error;

}

console.log('Mysql Connected');

});

Right now your index.js must look like this

const express = require('express');

const mysql =require('mysql');

//Create connection

const db = mysql.createConnection({

host : 'localhost',

user : 'root',

password : '',

database : 'nodemysql'

});

//connect

db.connect((err)=>{

if (err){

throw error;

}

console.log('Mysql Connected');

});

const app = express();

//start server

app.listen('3000', () => {

console.log('server started on port 3000');

});