Hello All wonderful developers, hope you had a great Xmas.

Javascript is evolving day by day and it’s becoming my favourite programming language. I am sure many will have the same feeling and many will disagree too.

Array Proposal

I came across the array proposals and i thought I should write this out in my medium blog and here it is . It introduces new array methods like array.groupBy and array.groupByToMap . I like the SQL groupBy and I use them and I really love to use it. I am hopping this will help me do the same.

Note : This proposal is currently at stage 3.

This article only covers an example for array.groupBy

Let’s see how to use array.groupBy with an example.

Lets’s start by defining an array

let people = [

{ name: "vipin", type: "adult" },

{ name: "urmika", type: "kid" },

{ name: "david", type: "youth" },

{ name: "janvika", type: "kid" },

{ name: "mika", type: "adult" },

]

Ok. Now the array is ready . So let’s use the array methods on this array and observe the output.

Usage:

const result = people.groupBy(person => {

return person.type;

});

Output

console.log(result);

 {

   'adult': [

     { name: 'vipin', type: 'adult' },
     { name: 'mika', type: 'adult' },

   ],

   'kid': [

     { name: 'urmika', type: 'kid' },
     { name: 'janvika', type: 'kid' }

   ],

   'youth': [

    { name: 'david', type: 'youth' }

   ]

 }

Wow, The output is great to look at. I am really impressed with this and I hope you all liked it .

Happy new year in advance and Happy javascripting …….. do enjoy programming and your life……

You can buy me a coffee , if you like at https://www.buymeacoffee.com/vipinc007

Javascript | Array GroupBy was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Real version of this blog post is at my personal space https://buddyclaps.com/javascript-callbacks-promises-async-await/

Hello programmers,

This article is for all those who wants to understand the below topics. I love Javascripting and I am into Javascripts from more than 3 years now.

• Callbacks
• Promises
• Async and Await

This article should help us in understanding few javascript concepts like

• What is Synchronous Operation ?
• What is Asynchronous Operation ?
• What is Callback and an example ?
• What is Promises and an example ?
• How Async and Await works in javascript with example?

What is Synchronous Operation ?

This is the most efficient way of getting a task done. Synchronous focuses on getting tasks done one by one or one after another or getting tasks done sequentially. I like this approach as it makes code more easy to understand and debug. This also means that the other tasks waits until their turn arrives.

By default Javascript is synchronous or single threaded. it is designed to do one task at a time.

Let’s look at a simple example. Look at the below code

console.log("I am First")
console.log("I am Second")
console.log("I am Third")

The output on console would be

"I am First"
"I am Second"
"I am Third"

What is Asynchronous Operation ?

Asynchronous is exactly the opposite of synchronous operation. Which means the tasks can run independent to each other and no task has to wait for others. This approach is great when you want to make your code more efficient and fast. Imagine if you can do multiple tasks at a time and finish it all. Wow ! how great that would be. Not sure if humans can do this effectively but machines and javascript can.

Let’s look at a simple example. Look at the below code

console.log("David Reached School")
setTimeout(() => {
  console.log('Liz reached school')
}, 3000)
setTimeout(() => {
  console.log('Bill Reached school')
}, 2000)
console.log("Mike Reached School")

The output on console would be

"David Reached School"
"Mike Reached School"
"Bill Reached school"
"Liz reached school"

If you look at the above output, the output is not in the order in which they are programmed but instead its in the order in which it got completed.

Callbacks : what’s that ?

In JavaScript, a callback is a function passed into another function as an argument to be executed later. When you pass a callback function into another function, you just pass the reference of the function i.e., the function name without the parentheses () .

OR

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

An Example

function announce() {
    console.log('Yea!, the hot water is ready !')
}

function boil_water(shoutIt) {
    console.log('Water is boiling')
    setTimeout(() => {
        shoutIt()
    }, 3000)
}

boil_water(announce)

If you look at the code “boil_water(announce)“, you see that method “announce” is passed as a reference to “boil_water” method and “boil_water” is invoking the reference method when needed. So this becomes a simple example for how to use a callback. Hope its easier to understand.

Callback Hell: OMG, now what is that ?

I thought callbacks were great and interesting. But, wait ! what’s this now.

let’s look at an example straight away.

setTimeout(() => {
    console.log('Sunday')
    setTimeout(() => {
        console.log('Monday')
        setTimeout(() => {
            console.log('Tuesday')
            setTimeout(() => {
                console.log('Wednesday')
                setTimeout(() => {
                    console.log('Thursday')
                    setTimeout(() => {
                        console.log('Friday')
                        setTimeout(() => {
                            console.log('Saturday')
                            setTimeout(() => {
                                console.log('Wow! week is over')
                            }, 2000)
                        }, 2000)
                    }, 2000)
                }, 2000)
            }, 2000)
        }, 2000)
    }, 2000)
}, 2000)

Output:

"Sunday" (After 2 seconds)
"Monday" (After 2 seconds)
"Tuesday" (After 2 seconds)
"Wednesday" (After 2 seconds)
"Thursday" (After 2 seconds)
"Friday" (After 2 seconds)
"Saturday" (After 2 seconds)
"Wow! week is over" (After 2 seconds)

The code above is a perfect example of “Callback Hell“. Below are some problem of “Callback Hell“.

• It’s hard to read or poor readability.
• Hard to understand the code.
• It’s even harder to debug
• Difficult to add error handling.

“Callback Hell” is also known as “Pyramid of doom” or “Christmas tree of hell“. No matter whatever different names you give , the problems remains the same.

Don’t worry. “Promises” can help us. I promise you that. But don’t take my words.

Wow ! Promises

“Promises” as designed to help us from “callback hell” and more importantly it helps us to better handle our code and tasks. That’s so relieving to hear.

Now, let’s understand “Promises” better. Promises has few states to go through. Below are more info about them

• Pending : This is just an initial state. Example : Just consider a customer is visiting your shop and going through your menu before making an order.
• Resolved : It’s like customer made an order and they got the order delivered to their hand and they are very happy.
• Rejected : It’s like customer ordered something which is not available and he left the shop without getting anything.

Wow, how easy is this to understand. See i promised you that it will be easy to understand. I keep my promises !!!! . Have a look at the same thing like a flowchart or an image below.

Everything is good so far. Lets write a simple promise example.

var is_printer_on = true
let take_print = (printText) => {
    return new Promise((resolve, reject) => {
        if (is_printer_on) {
            setTimeout(() => {
                resolve('Printed :' + printText)
            }, 2000)
        } else {
            reject('Printer is off')
        }
    })
}

So, this is a very simple method that uses promises to take a print of the given printText. Let’s see how to use this method. This method gives different output based on if the printer is on or off.

ie if “var is_printer_on = true” then printer is ON

else if “var is_printer_on = false“) then printer is OFF

Invoke with Printer = ON

var is_printer_on = true
let take_print = (printText) => {
    return new Promise((resolve, reject) => {
        if (is_printer_on) {
            setTimeout(() => {
                resolve('Printed :' + printText)
            }, 2000)
        } else {
            reject('Printer is off')
        }
    })
}

take_print('hello world')
    .then((res) => {
        console.log('Success : ', res)
    })
    .catch((err) => {
        console.log('oops!,', err)
    })
    .finally(() => {
        console.log('Have a good day')
    })

Output

After 2 seconds
"Success :  Printed :hello world"
"Have a good day"

Now lets turn OFF the printer

Invoke with Printer = OFF

var is_printer_on = false
let take_print = (printText) => {
    return new Promise((resolve, reject) => {
        if (is_printer_on) {
            setTimeout(() => {
                resolve('Printed :' + printText)
            }, 2000)
        } else {
            reject('Printer is off')
        }
    })
}

take_print('hello world')
    .then((res) => {
        console.log('Success : ', res)
    })
    .catch((err) => {
        console.log('oops!,', err)
    })
    .finally(() => {
        console.log('Have a good day')
    })

Output

"oops!, Printer is off"
"Have a good day"

Great, so you just saw a promise that can take the “Resolved” state when Printer was ON and it took a “Rejected” state when Printer was OFF. And irrespective of the state we got the finally block also executed. So I hope “promises” are now making sense.

Async / await

“Promises” were introduced in javascript to handle asynchronous activity or operation easily. The Async/Await is a syntactical sugar added to easily work with promises. The intention is that async/await will help in making the code look synchronous while performing asynchronous activity.

So let’s write the same “take_print” promise using the async / await keywords. We might need to make slight changes to the “take_print” method and the way it needs to be invoked.

Invoke with Printer = ON

var is_printer_on = true
let take_print = async (printText) => {
    return new Promise((resolve, reject) => {
        if (is_printer_on) {
            setTimeout(() => {
                resolve('Printed :' + printText)
            }, 2000)
        } else {
            reject('Printer is off')
        }
    })
}

async function testcode() {
    try {
        let res = await take_print('hello world')
        console.log('Success : ', res)
    } catch (err) {
        console.log('oops!,', err)
    } finally {
        console.log('Have a good day')
    }
}

testcode()

Output

After 2 seconds
"Success :  Printed :hello world"
"Have a good day"

Invoke with Printer = OFF

var is_printer_on = false
let take_print = async (printText) => {
    return new Promise((resolve, reject) => {
        if (is_printer_on) {
            setTimeout(() => {
                resolve('Printed :' + printText)
            }, 2000)
        } else {
            reject('Printer is off')
        }
    })
}

async function testcode() {
    try {
        let res = await take_print('hello world')
        console.log('Success : ', res)
    } catch (err) {
        console.log('oops!,', err)
    } finally {
        console.log('Have a good day')
    }
}

testcode()

Output

"oops!, Printer is off"
"Have a good day"

Conclusion

Thanks for reading this article with patience. I hope my article was useful and made sense. Let me know your comments and thoughts through the comment box below.

Credits

Here I found much elaborated and in detail discussion of the same topic . I got inspired by that article and I felt I should also write something similar in my own words and examples and that’s what led to this post.

Thanks for reading !! Have a great day !

You can buy me a coffee , if you like at https://www.buymeacoffee.com/vipinc007

Javascript : Callbacks, Promises, and Async/Await was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello All,

I am sure this is an issue which most of us are facing with Angular 2/4/5/6 applications when we deploy them to any wamp server or IIS or to any domains. I too faced the same and I have a solution too.

The main problem is because when you route from one page to another the url will be something like let's say you are going from “http://localhost/login” to “http://localhost/contact”.

If you refresh from the above urls , the system assumes it to be a physical location and it throws an error when it doesn't find it. Which is absolutely valid.

So we need to use the “#” mechanism which Angularjs 1 was using. for example, we need to make our urls look like “http://localhost/#/contact”

So to get that working I have the below steps

1). The first thing we need is to import the below two modules from “@angular/common” like below in the “app.module.ts” file

import { HashLocationStrategy, LocationStrategy  } from '@angular/common';

2). In the same file add the below line under “Providers”

providers: [

{provide : LocationStrategy , useClass: HashLocationStrategy}

],

3). Compile/build and deploy and see it should work :) .

It worked for me. it should work for you too :)

Have a great day, enjoy angularing

Angular 6 : 404 error during refresh after deployment was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello,

Am new to vuejs as am currently learning this new guy. Vuejs is really impressive and I like it over angular. I come from a dot net background and I thought I would see classes and objects concepts in vuejs too. Am sure it will be there in the typescript.

I wanted to desperately separate out my logic to different classes and to small small reusable functions and use it in my components.

I searched many blogs and sites and many had examples of classes in some or other way. It was hard for me to follow them because I was looking for an exact replica of the same being implemented in C#.

From all the tips and examples on the internet, I thought of writing one and see if it compiles and works. So I wrote the below class in a .js file. Let's say “MyNameClass.js”

export default class MyNameClass {
    FirstName = null;
    LastName = "";
 
    constructor(fname, lname) 
    {
      this.FirstName = fname;
      this.LastName = lname;
    }

    getFullName()
    {
      return this.FirstName+' '+ this.LastName;
    }

    getFirstName()
    {
      return this.FirstName;
    }

    getLastName()
    {
      return this.LastName;
    }        
}

So, the above class got created and it's just a simple one as you see. Let us below how to use it.

In the min.js file,

1. I imported it globally like below

import MyNameClass from "/classes/MyNameClass.js";

2. And created an object of the same, like below by passing the parameters to the constructor. I stored the object to a global property.

Vue.prototype.$MyNameClass= new MyNameClass('Vipin', 'C');

3. Call the methods by using the object. I called this method from one of my components and it goes like this

this.$MyNameClass.getFullName();

and WOW, voila. It got compiled successfully and it ran too and it gave me the string “Vipin C”. Am happy :)

I didn't try creating multiple objects of the same class. I would try that next. anyway, it as a good thing, to begin with.

Let this be useful to those who are also looking for similar implementation.

You can buy me a coffee , if you like at https://www.buymeacoffee.com/vipinc007

How to Implement / Create Classes and Objects in vuejs was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello All,

Recently I was working on angular 6 and I really started liking it. I could create few applications using it and it seemed to be lot different than angular1. I had past experience with angular 1 and it was a completely different framework from recent angular 5 / 6. I really liked the dynamic loading of html files in angular 1 using “ng-include” which am missing in the newer versions. An alternative approach to that is, It is possible to add dynamic component and component internally can load html.

After finding a solution to add component dynamically I needed a solution to access the properties of child component . I googled and investigated many other blogs and sites and found a working solution.

Below is parent component which is trying to add a childcomponent dynamically

import {Component,ViewChild,ViewContainerRef,ComponentFactoryResolver,ComponentRef,ComponentFactory} from '@angular/core';
import { ChildComponent } from './child.component';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    componentRef= null;
    title = 'parent child communication app';

@ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
    constructor(private resolver: ComponentFactoryResolver) { }
  
    loadChildComponent() {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(ChildComponent);
        this.componentRef = this.entry.createComponent(factory);
        this.componentRef.instance.message = "Loaded";
  this.componentRef.instance.showMessage();
    }
    destroyComponent() {
        this.componentRef.destroy();
    }
}

If you look at the above code you can see that the reference of child component is assigned to a property “componentRef”

this.componentRef = this.entry.createComponent(factory);

the same reference property is used to invoke the child component property and functions . In the example, the code is accessing the message property and calling the ShowMessage() function too which belongs to a child component

this.componentRef.instance.message = "Loaded";
this.componentRef.instance.showMessage();

So that’s it, this is one way to access child component properties and functions from a parent component.

Hope you all liked it. Happy angularing :)

You can buy me a coffee if you like to at https://ko-fi.com/tinywave

angular : Access Properties / functions of a child component when added dynamically was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello to all the dot net developers out there, Hope you all are having a wonderful day !!!!

I thought I should write this post out because the question webforms or asp.net MVC will really keep every developer thinking on what would be the best fit when you are set to start a new web application. Remember one thing that MVC is not a new technology but it’s a new concept or approach that can help you to create web application. Even i had this dilemma when I wanted to start with a new project. Just because I had experience in webforms i decided to choose it over MVC. I went with MVC when i got the next project to start with. I believe every developer will come across this confusions when there are multiple options but mostly i have seen my colleagues also choosing webforms over MVC just because they had earlier worked with it and they feel much better and comfortable when working with webforms. For a moment all developers will definitely have a hesitation towards the MVC side. When I started with MVC i found it little bit difficult initially and gradually i started feeling that it’s much better and a new framework which needs few days to really understand how MVC works.

During my course of learning MVC I found so many factors that differentiates between a webform approach and a MVC approach. Later I realized that these differentiating factors itself will lead you to decide which one can best fit your project requirement.

What was wrong with asp.net?
Asp.net webforms when released was the best idea Microsoft could give you. Later when the web application became more familiar, the usage increased and user interactivity, speed and other factors made the people realizing that there are some weakness in asp.net.

1). Maintaining State (viewState)
The actual mechanism of maintaining state across requests (ViewState) often results in giant blocks of data being transferred between client and server. It can reach hundreds of kilobytes in many real-world applications, and it goes back and forth with every request, frustrating site visitors with a long wait each time they click a button or try to move to the next page on a grid. ASP.NET AJAX suffers this just as badly,1 even though bandwidth-heavy page updating is one of the main problems that Ajax is supposed to solve.

2). Page Load (page Life Cycle)
The mechanism of connecting client-side events with serverside event handler code, part of the page life cycle, can be extraordinarily complicated and delicate. Few developers have success manipulating the control hierarchy at runtime without getting ViewState errors or finding that some event handlers mysteriously fail to execute.

3). Limited control over HTML
Server controls render themselves as HTML, but not necessarily the HTML you want. Not only does their HTML often fail to comply with web standards or make good use of CSS, but the system of server controls generates unpredictable and complex ID values, which are hard to access using JavaScript.

4). False sense of separation of concerns
ASP.NET’s code-behind model provides a means to take application code out of its HTML markup and into a separate code-behind class. This has been widely applauded for separating logic and presentation, but in reality, developers are encouraged to mix presentation code (e.g., manipulating the server-side control tree) with application logic (e.g., manipulating database data) in these same monstrous code-behind classes. Without better separation of concerns, the end result is often fragile and unintelligible.

5). Untestable
When ASP.NET’s designers first set out their platform, they could not have anticipated that automated testing would become such a mainstream part of software development as it is today. Not surprisingly, the architecture they designed is totally unsuitable for automated testing.

Now that’s about webforms . That doesn’t mean that webform approach is totally weak. These drawbacks are found when compared with the MVC framework. Let’s see how MVC answers these issues or what’s in MVC that makes it better than webforms.

1). Separation of concerns and single responsibility principle.
This is one of the best feature a developer would love to have in his coding. He would definitely love to keep his code neat, tidy, clean, modular, readable and maintainable. Its extremely important that a class in the system has a well-defined job for itself. No class should try to more than one job or too many things. If it does that it would be difficult to maintain the class.

2). Full control over the rendered HTML.
MVC gives full control over the rendered HTML. In webforms many times the HTML that is rendered is more complex than what is really required and thus makes it difficult for the designers to style the controls.

3). Test driven approach (unit testing).
This helps us to do the unit testing very easily. Webforms are tightly coupled to session, viewstate, request and response objects because of which it becomes a bad candidate for unit testing.

4). Search engine optimizations and RESTful URL’s
Webforms url has .aspx extensions whereas MVC urls does not have any extensions and thus becomes very search engine friendly. for example it have urls like “http://localhost:8080/appname/customer/list" or like the ones you notice when browsing facebook. So effort needed for search engines to recognize you application becomes much easier.

5). No ViewState.
This one becomes a big relief in terms of performance during the request and response cycle. You might have noticed above how webforms handles viewstate and the consequences of that.

6). Better control over JavaScript and styles
Webforms may dynamically add so many JavaScript files to the application when some controls or third party controls are integrated with the application. For example when you integrate AJAX into you webforms you can see few ajax related script files getting included dynamically to your application. In MVC you can very well control and include the script files that are really needed.

7). No IsPostBack branches of code.
You can completely eliminate this additional branches on IsPostBack flag from MVC because MVC doesn’t support this flag. Instead it handles it in a different manner in the controller.

Here we come to an end of this article. I am sure this will really help many to have an idea about both webforms and MVC. I will still edit this article as and when i find some more informations.

Happy coding to all developers and Enjoy

You can read the same article from my blog here

You can buy me a coffee , if you like at https://www.buymeacoffee.com/vipinc007

ASP.net : Webforms VS MVC was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello, If we take vuejs Single File Component , I would say that’s a very good feature vuejs has and I like to use it often in my projects. It all looks good when we can see all 3 of them (template, script and style) in a single file. Its easy to read and manage when the template html is small and simple.

But when you have a html of larger size , it is always advisable to break the portions of HTML to smaller components and include them as components. Like the below example

Use component when the template is in the same file

<template>
      <div>Login</div>    
      <LoginPage msg="Welcome to Your Vue.js App" />
</template>

<script>
import LoginPage from "@/components/LoginPage.vue";

export default {
  name: "login",
  components: {
    LoginPage
  },
  methods :
  {
    
  }
};
</script>
<style>
</style>

In the above example you can see how easily the LoginPage componenet is used or injected to the main template. Its so easy , isn’t it ?

Use component when the template is in a separate file

Now what if we move the main template to a different file and refer it using the src attribute. Like below

<template src="partials/main.html">
</template>

<script>
import LoginPage from "@/components/LoginPage.vue";

export default {
  name: "login",
  components: {
    LoginPage
  },
  methods :
  {
    
  }
};
</script>
<style>
</style>

Then, its not easy to include the component like the above straight manner. Here we need to use the dynamic component technique . See the below example.

The template file “partials/main.html” would look like below

<div>Login</div>    
<component :is="LoginPage_component"></component>

And the parent component would look like this

<template src="partials/main.html">
</template>

<script>
import LoginPage from "@/components/LoginPage.vue";

export default {
  name: "login",
  components: {
    LoginPage
  },
  data() {
    return { 
      LoginPage_component: 'LoginPage'
      };
  }
};
</script>
<style>
</style>

That’s it :) , and that will work.

How to pass a component to a template stored in different/separate file in vuejs was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello,

Vue.js is one of the best framework available out there which can help us to build interactive applications . I recently started working on vue.js and I quite liked it when compared with other frameworks like angular ect.

But certain things with this framework are really a painful and its fades away the beauty of this framework. especially the installation process and getting all boxes working is not that easy sometimes. I had difficulties in installing this framework on my windows 10 laptop. One thing missing is a good documentation for this framework. I have seen people in the internet talking about various problems they are facing with the initial setup of this framework and the numbers are large.

Below is the issue I faced and how I rectified them

Vue UI not working as expected: Hanged & unable to create new project

So I did the following steps during my installation

1. Installed Node.js (version : v11) : Installation was good
2. Installed vue/cli (version 3.5.3) : Installation was confusing because it showed me few warnings on the screen and displayed certain packages to be installed by self. I searched all over google and couldn't find anything as a problem.
3. I then started vue UI . The UI got started and it opened itself on a browser and I then went to “create Projects screen and then found that that screen was not working and I was not able to create a new project. The screen was still in loading state . The was loaded after 15–20 minutes and I then got the “create project “ wizard. I filled all the required field and pressed the “finish” button and it hanged again. SO nothing got created even after 20–30 minutes.
4. Did a google search again : I saw most of them had some or other problems with installation and nobody had a proper solution. Somewhere in one of the blog I noticed on post that the problem could be the node.js version. The post said about downgrading the node.js to 8.9 or above.
5. Downgraded Node.js : I uninstalled everything (node, vue.js ) . Then I reinstalled Node v8.15 and installed vue/cli v3.5.3 .
6. Started vue UI again : The UI came up on a browser and voila , the create project was loaded quickly this time and I created my first vue.js project withing few seconds. The vue UI looks so beautiful.

So, If somebody is also facing the same issue try downgrading the Node.js version. Hope this helps

How to solve the Vue.js UI error during new installation was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello,

We are not new to Mysqli especially those who work with PHP+ mysql development. If by any chance you are new to it , then The MySQLi Extension (MySQL Improved) is a relational database driver used in the PHP scripting language to provide an interface with MySQL databases.

Mysqli can be used to achieve almost all actions on Mysql with the help of PHP. So its very simple and I love and use them in my projects. Below I have some code samples to implement few database activities using Mysqli + PHP.

Note: All the examples below use the Object Oriented Approach of using Mysqli and I assume that you know how to execute a php application.

Connect to database using Mysqli

This is the most important and the first thing every developer would do to check if the given credentials really work or not. Example would go like this.

<?php
 $host = "localhost";
 $user = "root";
 $password = "";
 $database = "School";
 
 $mysqli = new mysqli($host, $user, $password, $database);
 if ($mysqli->connect_errno)
 {
  echo "Failed to connect to MySQL: " . $mysqli->connect_error;
 }
?>

Ahh, Great. If you got the connection right then let’s do more now.

Execute a query

Once connected the next thing we all try is to execute a query and see if that works.

// Note: There should be connection code here

if ($mysqli->query("CREATE TABLE Student(id int, name varchar(20))")) {
    printf("Table Studentsuccessfully created.\n");
}

After executing , have a look in to the database using phpmyadmin or any other database client and if you find a new table created with name “Student” , then it is really working and wow wow……

Well Done :) , Lets something interesting now. Let me insert some Student details. For that I would execute the below statement

Execute Some Insert Statements

// Note: There should be connection code here

if ($mysqli->query("insert into Student values (1,'Vipin')")) {
    printf("Student Record Inserted.\n");
}
if ($mysqli->query("insert into Student values (2,'Rahul')")) {
    printf("Student Record Inserted.\n");
}
if ($mysqli->query("insert into Student values (3,'Steve')")) {
    printf("Student Record Inserted.\n");
}

The above should print the “Student Record Inserted” text thrice on the screen indicating that it did what we asked for. Now go look into the table and see if we have three records. If yes wow, we did it…..

Let’s fetch the records now from mysql

Now that we added some records , its now a good deal to fetch it and display it on screen. For that I would do the following..

1). First let me look at the number of records in the table using PHP+mysqli

// Note: There should be connection code here
if ($result = $mysqli->query("SELECT * from Student")) 
 {

     /* determine number of rows result set */
     $row_cnt = $result->num_rows;

     printf("Result set has %d rows.\n", $row_cnt);

     /* close result set */
     $result->close();
 }

This is going to print me “Result set has 3 rows”. And that’s good to see the number of records retrieved by the query.

1). Second let me print the records using PHP+mysqli

// Note: There should be connection code here
$query = "SELECT * from Student";
if ($result = $mysqli->query($query)) 
{

     /* fetch associative array */
     while ($row = $result->fetch_assoc()) 
     {

      echo $row["id"]." , ".$row["name"]."<br />";
 
     }

     /* free result set */
     $result->free();
}

After execution the print would be

1 , Vipin

2 , Rahul

3 , Steve

There are other ways of fetching the records too. let’s see them too in action.

Fetch records using mysqli_result::fetch_array

1. Using MYSQLI_NUM

This method fetches all records but the columns can be referred by their index number. see the example below

$query = "SELECT * from Student";
 if ($result = $mysqli->query($query)) 
 {

     while ($row = $result->fetch_array(MYSQLI_NUM)
     {
       echo $row[0]." , ".$row[1]."<br />";
     }
 }

2. Using MYSQLI_ASSOC

This method fetches all records and the columns can be referred by their column name. see the example below

$query = "SELECT * from Student";
 if ($result = $mysqli->query($query)) 
 {

while ($row = $result->fetch_array(MYSQLI_NUM)
     {
       echo $row["id"]." , ".$row["name"]."<br />";
     }
 }

3. Using MYSQLI_BOTH

This method fetches all records and the columns can be referred by their column name as well as with the column index number. see the example below

$query = "SELECT * from Student";
 if ($result = $mysqli->query($query)) 
 {

while ($row = $result->fetch_array(MYSQLI_NUM)
     {
       echo $row["id"]." , ".$row["name"]."<br />";
       echo $row[0]." , ".$row[1]."<br />";

     }
 }

Setting connection timeout

This is sometimes very useful when you get a timeout issue with the connection mainly because the query is taking too long to run and come back with results. There could be various other reasons too . One thing we can do here is increase the timeout duration like the below example

$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if (mysqli_connect_errno()) 
{
            echo "Failed to connect to MySQL: " .               
            mysqli_connect_error();
}
$mysqli ->options(MYSQLI_OPT_CONNECT_TIMEOUT, 500);

Get the Last Inserted Auto Increment ID

This is very useful when you want to know what was the primary key id inserted by the insert query. Have a look at the below example

if ($result = $mysqli->query("Insert into emp (name) values(‘vipin’)"))

{
 $new_row_id = $mysqli ->insert_id;

}

The variable “$new_row_id” will have the new primary key values on the records inserted.

Hope this tutorial is useful. I will be updating the same with more stuff when I come across more examples.

Enjoy :)

How to use Mysqli with PHP was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.

Angularjs has “$Filter” filter which can be used to search an array. One other thing what I found is that It even has options to decide if you want to make an exact search or partial match search (just like the LIKE search in sql querys).

Here is an example

$scope.Students = [
{ID:'100', Name:'vipin', Mark:'100'},
{ID:'10', Name:'Sharon', Mark:'10'},
{ID:'20', Name:'Bill', Mark:'75'},
];

Now am gonna do a search for ID=10.

var flist = $filter('filter')($scope.Students, { ID: 10 });

I expect it to return me the second item in the list.

expected

{ID:'10', Name:'Sharon', Mark:'10'}

output

{ID:'100', Name:'vipin', Mark:'100'},
{ID:'10', Name:'Sharon', Mark:'10'},

Oh Its more than what I need. So, what happened here is , it did a non exact match search and it has found two rows which is correct too. It filtered ID:100 because it has ‘10’ at the beginning. So it did a like ‘10%’ search. Hmm, now we have some work here

How to do an exact match search ?

Do it this way .

var flist = $filter('filter')($scope.Students, { ID: 10 }, true);

Just add that second boolean parameter as true after the search criteria. By default this parameter is set to false.

then see the output

{ID:'10', Name:'Sharon', Mark:'10'},

Voila, am happy now , its wonderful and I liked it.

Hope this will be useful to somebody.

Angularjs | Search an array for exact match was originally published in tinywave on Medium, where people are continuing the conversation by highlighting and responding to this story.