Author

Manu

ecommerce website using html css and javascript source code 2022

ReactJS

ecommerce cart react source code 2022 [ For Beginners ]

by Manu October 8, 2022

written by Manu

ecommerce cart react source code 2022 [ For Beginners ]

Hi devs in this guide we are going to create an apple store or i say cart for apple phones. we are going to use reactjs and typescript to make this application so without further a do let’s get started.

Here is the list of required packages we are going to use

Create a react application :

reactjs website

React Bootstrap we designing part:

react-bootstrap website

React router Package:

react router dom website

Link Container Package

Link Container

TypeScript

typescript website

Watch the video guide for complete explanation also download the zip for source code.

For implementing Local storage check this guide

🙌 Donate to Support

Hope this helps😎

Code zip here

October 8, 2022 0 comment

MySQL

How to use stored procedure in sql updated 2022

by Manu September 3, 2022

written by Manu

Hi Devs in this guide we are going to see what is stored procedure in sql, So Basically when you use a query again and again then there you can use stored procedure. You create a procedure with query and call the stored procedure every time instead of calling query again and again.

Here is an example

Create a Stored Procedure

We can create store procedure as given in this statement

DELIMITER $$

	CREATE PROCEDURE user_names_procedure()
		BEGIN
			 SELECT DISTINCT first_name as name FROM users;
		END $$
    
DELIMITER ;

After executing this statement you will be able to see stored procedure created.

Now we can call this stored procedure

Calling A Stored Procedure

call user_names_procedure;

It will return us data

Passing Arguments in Stored Procedures

This is interesting, We can pass arguments in stored procedure, let’s same example again this time with argument.

DELIMITER $$

	CREATE PROCEDURE user_names_procedure(IN user_age int)
		BEGIN
			SELECT first_name as name FROM `users` where age>user_age;
		END $$
    
DELIMITER ;

Here we passed “user_age” as argument and its type is “integer”.

So let’s see how we will call this procedure

call user_names_procedure(50);

Here we passed 50 as “user_age”.

so we get users list where users has age more than 50. as 50 passed as argument.

IN AND OUT Arguments

Ok if you noticed in stored procedure we passed “user_age” argument as “IN”.

CREATE PROCEDURE user_names_procedure(IN user_age int)

Now we can also pass out argument as well.

so it will look like this

CREATE PROCEDURE user_names_procedure(IN user_age int, OUT argumentName int)

Here we are saying argument is of type “integer”. Let’s see complete example

First i drop the previously created procedure.

DROP STORED Procedure

DROP PROCEDURE user_names_procedure;

Now re-create procedure with output parameter.

DELIMITER $$

	CREATE PROCEDURE user_names_procedure(IN user_age int, OUT total_users int)
		BEGIN
			SELECT count(*) into total_users FROM `users` where age>user_age;
		END $$
    
DELIMITER ;

total_users passed as parameter but also used in query.

Calling the procedure.

call user_names_procedure(50, @users_count);


select @users_count;

Here we are getting returned value in variable and then we are selecting it.

DELIMITER : If you are wondering what is this, Then i must say it is used when we work with stored procedures, function and triggers.

Hope this helps

September 3, 2022 0 comment

MySQL

Must know mysql functions updated 2022

by Manu September 3, 2022

written by Manu

Hi devs, Today we are going to see some Must know MYSQL Predefined functions, These functions can save a-lot of your time. Mysql has so-many function and they are to deal with different data types,

You can change formatting, values or do calculations from your query.

WHEN and THEN

If i want to select users data from users table i will get it as

select * from users ;

Now it will return we all columns name, email, age, gender etc.

Here you can see gender is given as “M” and “F”. But i want output as “MALE” and “Female”. So i can change my query using When and then. here is how you do it.

SELECT
    first_name, last_name,
    salary, age,
    CASE gender
        WHEN 'M' THEN 'Male'
        WHEN 'F' THEN 'Female'
    END
FROM users;

So here we are using Case and then we used when and then. out put will be now as

IF CONDITION

We can filter data inside sql queries, No need to do it afterwords. Here is how you do it. I want to get users data but if age more than 65 that means employee is retired otherwise still employed.

SELECT
    first_name, last_name,
    salary, age, IF(age>65, "RETIRED", "EMPLOYEE")
FROM users;

And output looks like this

Nice Right.

IFNULL

Quite similar, If value is null in table we can return something else, Here is the example

SELECT
    first_name, last_name,
    salary, age, IFNULL(NULL, 'N/A Email')
FROM users WHERE email='NULL';

Now it returns

So if column value is NULL it is replaced with provided value.

DATE_FORMAT

Want to display time but after changing its formatting, Yes you can do it straight in the query. and here is how you do it.

SELECT
    first_name, last_name,
    salary, age,
    DATE_FORMAT(created_at, "%d-%m-%Y")
FROM users;

Original date and time format we have in table can be seen from the “First image” in this post, Now the format is changed by DATE_FORMAT. so output looks like.

You can even get day name and month name from query, Here is how

SELECT
    first_name, last_name,
    salary, age,
    DAY(created_at), 
    DAYNAME(created_at), 
    MONTH(created_at), 
    MONTHNAME(created_at), 
    YEAR(created_at)
FROM users;

And output is

Add NOW to get current date and time

SELECT
    NOW()
FROM users;

ADD – SUBTRACT TIME FROM DATE

get a date add 10 days into it. all in one query.

SELECT
	 created_at,
     ADDDATE(created_at, INTERVAL 10 DAY)
FROM users;

You can add time or Subtract time

SELECT
	 created_at,
     ADDDATE(created_at, INTERVAL 10 DAY),
     ADDDATE(created_at, INTERVAL 30 MINUTE),
     ADDDATE(created_at, INTERVAL -1 HOUR),
     ADDDATE(created_at, INTERVAL -2 MONTH)
FROM users;

Out put is like

TRUNCATE

Ok this is also useful so lets say amount is shown as “345.456453”.

you can TRUNCATE it as given below

TRUNCATE("345.456453", 2)  // this will return 345.45

SUM, MIN, MAX

You might have seen these bad girls before. we can simply get Sum of all values in column and maximum value in a column or minimum value in column.

SELECT
     SUM(salary),
     MAX(salary),
     MIN(salary)
FROM users;

Out put is like

Same way there is AVG to find out Average

So if we want to know average salary in this users table.

SELECT
     TRUNCATE(AVG(salary),2)
FROM users;

Here i have used TRUNCATE and AVE together you can do that too. Output is

STRING FUNCTIONS

SELECT
     UPPER(first_name),
     UCASE(first_name),
     REVERSE(first_name),
     TRIM('  some text  '),
     SUBSTRING_INDEX(email, "@", 1),
     email,
     last_name,
     SUBSTRING(last_name, 2, 3),
     INSERT(first_name, 1,5, "USER: ")
FROM users;

First 2 are “UPPERCASE” and “UCASE” they work as same for making string capital. Reverse of UCASE is LCASE for lowering the casing.

Then reverse will reverse the string. After that we have TRIM it removes white space from left and right of the string.

SUBSTRING_INDEX will return the string where it finds the substring.

INSERT this will insert your defined value in string and replace the string between indexes mentioned.

Here is the output

September 3, 2022 0 comment

Why and how to use sql views [ Super Easy ] for beginners

MySQL

Why and how to use sql views 2022

by Manu August 22, 2022

written by Manu

Hi Devs, Today we are going to see what exactly is SQL views and why you should use them. SQL views are the virtual tables created by you when you define a command to create a view. You can do all normal operation such as create,update,delete on views. Views can be very useful if used correctly.

Lets see How to Create a View

// To create a view.

mysqli_query($conn, "CREATE VIEW userCustomList AS SELECT first_name as name, age as user_age FROM users");

Here we are creating a view which will hold data “name” and “user_age” only from the main table.

Update a SQL View Selection

Incase you want to update a view

// Updating View Selection

mysqli_query($conn, "CREATE OR REPLACE VIEW userCustomList AS 
    SELECT first_name as name, age as user_age, salary FROM users WHERE salary > 90000");

Here we are also getting “salary” and we are getting only those users where salary more than 90000.

Update a Record In View

// Simple query to update view

mysqli_query($conn, "UPDATE userCustomList SET name = 'Something'");

Note : Update and delete will also take effect in original table as well, So be very careful. And take backup of your data.

Deleting A View

// This will delete the view.

mysqli_query($conn, "DROP VIEW userCustomList");

Incase you want to delete data from view

Delete Data From View

// Deleting data from view

mysqli_query($conn, "DELETE FROM userCustomList");

Note : Update and delete will also take effect in original table as well, So be very careful. And take backup of your data.

August 22, 2022 0 comment

MySQL PHP

how to import csv to mysql using php

by Manu August 22, 2022

written by Manu

Hi devs, In this guide we are going to see how to import millions of rows of data into database from csv file. This might take some time but for doing this we are going to process data using chunk method. So mainly we will process chunk of data and insert it into database and same process repeating again and again.

On we will follow these steps to import data

Breaking large csv to smaller csv’s.
reading smaller csv’s and store in database table.
Each query will insert 1000 rows of data. (Max allowed in single query so).

Download the code zip if you wan it also check the video guide for practical usage.

In video guide we are also verifying if the all data inserted correctly or not.

Download Fileshttps://zarx.biz/topic/333/import-data-from-csv-file-to-database-in-php-import-millions-rows

August 22, 2022 0 comment

Composer

PHP Composer Autoload Complete Guide 2022

by Manu August 13, 2022

written by Manu

Composer Autoload Complete Guide

Introduction to the Composer

Composer is a dependency manager for PHP. It allows you to manage dependencies in your PHP application. In this guide, we’ll see how to use the Composer for autoloading classes.

You need to download and install it, if have’t done it already. The official documentation link is how to download and install Composer on your computer.

To check whether the Composer installed successfully, you run the following command From terminal or cmd.

composer -v

Autoloading classes with Composer

Ok let’s see how to autoload files, Create a new file called composer.json under the project’s root folder.

In this picture, I have a file composer.json in the root folder. Don’t worry about other files main point is “composer.json” goes to root folder of your application.

Now here see the content of “composer.json”.

{
    "autoload": {
        "classmap": ["App"]
    }
}

Loading filed from “App” directory.

Incase of multiple directories do something like this

{
    "autoload": {
        "classmap": ["App","tests"]
    }
}

This will load files from multiple directories.

After adding file directories run command as given here

composer dump-autoload

Now include below given line where you want to include files using composer.

require 'vendor/autoload.php';

this autoload file is in vendor directory. This file will include all files according to “composer.json”.

Using PSR4 Composer Autoloading

Now we can do something like this as well

"autoload": {
    "psr-4": {
        "App\\":"App",
        "Tests\\": "tests"
    }
}

PSR stands for PHP Standard Recommendation.

Now Here is an important thing. “App\\” refering to a namespace. So in image above we had a directory “App”. There i have 2 files “DataController.php” and “DB.php”.

Each file has a namespace

<?php

namespace App;

class DataController
{

And

<?php

namespace App;

class DB
{

Here we are saying load file from given directories. Now each time you add new directory in composer file. you need to run “composer dump-autoload” Command

So we can see namespace “App” defined there in both files. And then we configured same namespace in “composer.json” file. for autoloading.

Now lets change the structure a bit

Here i moved the “DataController.php” inside “Controllers”. And changed its name space.

<?php

namespace App\Controllers;

class DataController
{

Still Composer will load the file as namespace “App” included in composer.json

Here is how my composer.json file looks

{
    "require-dev": {
        "phpunit/phpunit": "^9.5"
    },
    "autoload": {
        "psr-4": {
            "App\\":"App",
            "Tests\\": "tests"
        }
    }
}

Check the video guide for better understanding.

August 13, 2022 0 comment

PHP

php application performance monitoring 2022

by Manu August 6, 2022

written by Manu

Php is one of the most famous language these days. Php rules the web. But it is important to have your PHP code clean and monitored so you get best out of PHP application.

In this guide we are going to take about 2 things.

Monitoring Performance.
Execution time.

For monitoring performance we can use these functions.

memory_get_usage and memory_get_peak_usage functions.

Memory Usage in PHP

memory_get_usage: This function will show us memory used for php while executing script.

memory_get_peak_usage: This function returns maximum memory used in script.

You can call these functions to see memory usage and then can modify your code to improve performance.

Execution Time in PHP

For checking execution time we have a function just add it on start of script and end of script and it will show you the execution time for both points

$startExecutionTime = getExecutionTime();
$endExecutionTime = getExecutionTime();

/**
 * GEt script start and end time.
 *
 * @return void
 */
function getExecutionTime()
{
    return microtime(true);
}

/**
/**
 * Get script execution time.
 */
function getProcessTime($startExecutionTime, $endExecutionTime)
{
    $diff = $endExecutionTime - $startExecutionTime;


    return 'Time taken to process code: '. date("H:i:s", $diff);
}

Note in above code we are passing $startExecutionTime.

Now to get start time put “$startExecutionTime = getExecutionTime” at start of your script and

put “$endExecutionTime = getExecutionTime” at the end of your script. Check our video guide for practical visual execution.

Download Files

August 6, 2022 0 comment

ReactJS

Reactjs application from scratch 2022

by Manu August 6, 2022

written by Manu

Learn how to build a React application from scratch in this tutorial. We will use React Hooks and Animations for this beginner React JS Project. Feel free to refactor the code and send me your versions!

There are 2 version. In first we are creating app using props but in second version we are creating app using context.

Important links:

rating: https://github.com/ertanhasani/react-stars


Fontawesome: https://fontawesome.com/v5/docs/web/use-with/react


Animation:  https://www.framer.com/docs/introduction/

Watch the video guide for better understanding.

Have a question, Need help in your code ?

Ask here

August 6, 2022 0 comment

ReactJS

Reactjs application from scratch using context and hooks 2022

by Manu August 6, 2022

written by Manu

Learn how to build a React application from scratch in this tutorial using context and hooks. We will use React Hooks and Animations for this beginner React JS Project. Feel free to refactor the code and send me your versions!

Important links:

rating: https://github.com/ertanhasani/react-stars


Fontawesome: https://fontawesome.com/v5/docs/web/use-with/react


Animation:  https://www.framer.com/docs/introduction/

Watch the video guide for better understanding.

Have a question, Need help in your code ?

Ask here

August 6, 2022 0 comment

Improve productivity using visual studio a detailed guide Updated

PHP

Code faster using visual studio Updated 2022

by Manu July 31, 2022

written by Manu

In this guide we are going to talk about Visual studio shortcuts which can save a-lot of your development time and make you more productive. so let’s get started

here are few of the most used command short cuts.

Windows And Mac Command Keys

Check Complete list Key mapping Windows-MacOS

Open Command Prompt

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Command and P key.

Switch Between tabs

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Switch between opened tabs using

Control and 1 // Open First Tab
Control and 2 // Open Second Tab
Control and nth // Open n number Tab

Go to specific file / Search a specific file in whole project

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Go to specific file / Search a specific file

Command and p  // To open Command pallet and type file name, It should display in dropdown.

Go to specific function / Search a specific function in a file

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Go to specific function / Search a specific function in whole project

Command and p  // To open Command pallet and type # and then function name. like 

#functionNameGoesHere

// You should see function in drop down

or try

@functionNameGoesHere

Close tabs one by one / Or all at once

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Close tabs one by one / Or all at once

Command and w   // This will close open tabs one by one.(Current one closed First)

Command and k and w  // This will close all tabs at once.

Toggle Sidebar in Visual studio code

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Toggle Sidebar in Visual studio code

Command and b

Change Font of code in Visual studio code

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Command +  // Increase font size
Command -  // Decrease font size

Open 2 files Side By Side in Visual studio code

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Open one of the file you want to open and do

// This will open a new window and then you can work on 2 files. 

Command and \

Go to start or end of line

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Command and -> // Go to extereme right of the line.
Command and <- // Go to extereme left of the line.

Move left right word by word in line.

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Shift and Option and -> // Move right word by word.
Shift and Option and <- // Move left word by word.

Duplicate code line

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Go to the code line and then press

Shift and Option and down key // Will create a duplicate in new line like copy paste

Find and replace

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Command and Option and F key

// Put keywords as you like in fields Find and replace

Select all occurrences one by one

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Select a keyword and press these keys

Command and d

Edit or add content same content in multiple lines

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Press and hold Option key and click where ever you want to add text.

At last type code or text will be added to all places where you had cursors placed.

Move code up or down

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

// Go to code line or select code block and then press

Option key and down or up arrow

Jump to specific line number

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Commnd and G key // Then type line number and hit return(Enter).

Find about function or variable

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Press and hold Command key and hover over function or variable name. // This will display you the properties there.

Open terminal in visual studio

**** These are MacOs Keys, Refer to image in this post for windows keys. ****

Command and ` 

` // Means backtick key

July 31, 2022 0 comment

Newer Posts

Older Posts