Git Tutorial - Commands from Beginner to Advanced Level

What is Git?

Git is a world wide populor distributed version control system which keeps track of all files in a cenrtalized location. It is a free and open source created by Linus Torvalds in 2005.

In short there will be a centralized copy (master) available in one location and the copy of the same will be copied into each user machine. All users changes will be pushed/merged into the same centrlized/parent copy (maseter) with the help of git commands (add, commit, push, pull etc.)

Advantages of Git

- Speed
- Simplicity
- Fully Distributed
- Excellent support for parallel development, support for hundreds of parallel branches.
- Integrity

Thinking in Git

Thinking in git is simple and easy by practicing it. This article covers the Git commands for beginner to advanced level. Each and every command will be presented with simple and straight forward explanation.

Git Commands

What is my git version?

Command: git --version

Show git configuration details

Command: git config --list
This command shows detailed git configuration for the branch like below.
- remote.origin.url
- user.name
- user.email
- credential.helper (Type of credential stored)

How to create an empty git repository?

Command: git init
Creates an empty repository (Folder) in the machine with the hidden git configuration files in it.

How to clone an origin branch?

Command: git clone <branch_link> <local_branch_name_optional>
It copies all the files from the specified remote branch into the current local machine folder. This stores the chain with remote branch for pushing and pulling the changes.  

Workflow of pushing changes

Modify Files > Staging > Committing > Pushing

What are my pending/modified changes?

Command: git status
Lists the modified files both staged and unstaged.

How to stage files?

Command: git add .
All the modified files will be shown in the unstaged/changes area. To push the local changes you need to stage, commit and push them. Above command will add all the files to the staging area.
Command: git add filename
If the given file name is existed in the modified list then the file will be staged.

How to commit changes?

Command: git commit -m "Commit Message"
You can only commit the staged changes. All the staged files will be committed with the above command. Make sure the files are available in staged area before running this command. Every commit will be generate with an unique hash id to address the commit. This is unique across the all the branches.

Reverting Commit

Command: git revert <commit_hash>
Every commit assigned with an unique hash id (Ex:f26ef0db7d33b46cccccda4699319ef518fdd3c7) to address or refer the commit. This is unique across the all the branches. The above command will revert the given commit.

Pushing changes to origin branch

Command: git push
Pushes all the local commits to origin branch

What are the available changes in origin and how to fecth them?

Command: git fecth
This will compare the origin branch with local branch and list out the commits or changes which are available in origin branch but not available in the local repository. These changes in origin branch can be pushed by the other users from thier local brach. This command helps in knowing what are all the incoming commits before pulling them.

How to pull the changes from origin branch?

Command: git pull
Gets all the pending commits from origin branch into the working branch.

Lis out commit history

Command: git log
Get all the detailed commits history (Commit hash, message, committed owner, committed date, files changed etc.) of the working branch.

Get names of all local branches

Command: git branch

Get names of all remote branches

Command: git branch -r

Get names of both local and remote branches

Command: git branch -a

Switch from one branch to another branch

Command: git checkout <local_branch_name>

Branching - Create a new branch from working / current branch

Command: git checkout -b <new_branch_name>

Branching - Create a new branch from another local branch

Command: git checkout -b <new_branch_name> <source_branch_name>

Branching - Create a local branch from a remote branch

Command: git checkout -b <new_branch_name> <origin/remote_branch_name>

Branching - Delete local branch

Command: git branch -d <local_branch_name>

Branching - Push local branch to remote

Command: git push origin <branch_name>
This will push the local branch to the remote which can be shared with the others.

Branching - Merge another local branch into current branch

Command: git merge <other_local_branch_name>
This compares the commit history of source branch with current branch and merges the changes from source branch into current.

Stashing - Saving Changes Temporarly

Stashing helps in saving the modified and uncommitted changes temporarly. Each stash will be stored with an index by following LIFO (Last In First Order). You can re-apply the saved stash or changes across all the branches. It supports deleting or dropping. You can create a new branch with the stash as well.

Stash the changes
command: git stash

Stash the changes with message
command: git stash save "<stash_message>"

Show all the saved stashes
command: git stash list

Re-apply most recent stash and keep it in your stack
command: git stash apply

Re-apply stash by index
command: git stash apply <index>

Apply most recent stash and then drop
command: git stash pop

Remove most recent stash
command: git stash drop

Remove stash by index
command: git stash drop <index>

Create a branch from stash
command: git stash branch <branch_name> stash@{index}

Get commit details by commit-hash

Command: git show <commit-hash>
This command gets the details of commit which are commit hash, message, owner, date, files changed along with changes.

Cherry-pick commit

Command: git cherry-pick <commit-hash>
Cherry-pick command copies the commit into the current branch. This we use to copy the commit from one branch to another branch.

What is a HEAD?

HEAD is a reference to the last commit in the currently check-out branch. When you do a new commit then HEAD will be pointed to the newly created commit.

Below command shows where and which commit the HEAD is currently pointing to
Command: git show HEAD

Show nth commit with the HELP of HEAD
Command: git show HEAD~<index>

How to rename local and remote branch?

1. Switch to the branch you want to rename
Command: git checkout <branch_name>

2. Rename the branch
Command: git branch -m <new_branch_name>

3. Push the renamed local branch to the remote and reset the upstream branch. This will create the new branch in remote with the new_branch_name and keep the old branch as it is.
Command: git push origin -u <new_branch_name>

4. Delete remote branch with the old_branch_name
Command: git push origin --delete <old_branch_name>

Creating a simple photo gallery in asp.net by using Ajax HoverMenuExtender control with GridView.

In this tutorial i will show you how to create a simple image gallery with GridView control by using Ajax HoverMenuExtender.

1. Create a new website in VisualStudio.

2. Register AjaxControlToolkit in your page as follows.

     <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

3. If you are using an Ajax controls in your page you should use ToolkitScriptManager control in your page. 

4. Drag and drop ToolkitScriptManager on to your page.

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

5. Place GridView inside your page and then assign the following properties to GridView.

     AutoGenerateColumns="False"

     CellPadding="4"

     ForeColor="#333333"

     GridLines="None"

     BorderColor="#8A8A8A"

     BorderStyle="Solid"

     BorderWidth="2px"

     PageSize="4"

     AllowPaging="true"

     PagerSettings-Mode="NextPrevious"

     PagerSettings-NextPageText="Next"

     PagerSettings-PreviousPageText="Prev"

     HeaderStyle-BackColor="#696969"

     HeaderStyle-Font-Bold="True"

     HeaderStyle-ForeColor="White"

6. Add PageIndexChanging event to GridView for paging purpose.

    

    OnPageIndexChanging="GridView1_PageIndexChanging"

7. Add TemplateField to display the images in your grid and place an image control and set the ImageUrl to the binding expression as follows.

    <Columns>

            <asp:TemplateField HeaderText="Gallery">

                <ItemTemplate>

                    <asp:Image runat="server" ID="thumbnailImage" ImageUrl='<%# Container.DataItem %>'

                        Width="100" Height="100" />                

                </ItemTemplate>

            </asp:TemplateField>

    </Columns>

8. To show image preview when the user mouse over on to the image in gridview we will use HoverMenuExtender control.

HoverMenuExtender:

HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET WebControl,and will associate that control with a popup panel do display additional content. 

9. Drag and drop the HoverMenuExtender control inside ItemTemplate and set  the properties, and then add the Panel and place an Image control inside Panel to preview the gridview image and then set the ImageUrl to the binding expression as follows.

    <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="popupImage"

                        TargetControlID="thumbnailImage" OffsetX="10" OffsetY="5" PopupPosition="Right"

                        PopDelay="100" HoverDelay="100">

    </asp:HoverMenuExtender>

    <asp:Panel runat="server" ID="popupImage" BorderColor="#8A8A8A" BorderStyle="Solid"

                        BorderWidth="7px">

                        <asp:Image runat="server" ID="mainImage" ImageUrl='<%# Container.DataItem %>' Style="height: 400px;

                            width: auto;" />

    </asp:Panel>

10. Now add the images to your website create "Images" folder in your website root folder and place images  you want to display inside it.

11. Now go to code behind file add the following code to load the images into GridView.

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            //Load images to the gridview

            LoadGallery();

        }

    }

    private void LoadGallery()

    {

        //Get application path of the website

        string appPath = HttpContext.Current.Request.ApplicationPath;

        //Get physical path of the website along woth images folder

        string physicalPath = HttpContext.Current.Request.MapPath(appPath) + "\\images";

        //get all files inside images folder

        string[] filePaths = Directory.GetFiles(physicalPath );

        //new array to store files names

        string[] finalFilePaths = new string[filePaths.Length];

        foreach (string str in filePaths)

        {

            //get relative path of the files and store in finalFilePath array

            finalFilePaths[Array.IndexOf(filePaths, str)] = str.Replace(physicalPath, "~/images");

        }

        //assign final paths to the gridview

        GridView1.DataSource = finalFilePaths;

        //Bind the gridview

        GridView1.DataBind();

    }

10. To work the paging in your GridView write the code inside  GridView1_PageIndexChanging event as follows.

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        //assign new page index to gridview

        GridView1.PageIndex = e.NewPageIndex;

        //Rebind the GridView

        LoadGallery();

    }

11. Now build your website and open the page in your browser. GridView will load all the images from the "Images" folder and display's them. So, mouse over on to the images. Image preview will display besides to the image.

So, in this way we can create the simple photo gallery with the GridView.

Download file inside Ajax UpdatePanel in ASP.NET

In this article I am going to show you how to download the file from UpdatePanel. 

1. Create new ASP.NET Web page in VisualStudio.

2. Before going to add UpdatePanel to your page you must add ScriptManager control to your web page. 

3. Drag and drop ScriptManager control on to the page.

 <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajax:ToolkitScriptManager>

4. Now drag and drop UpdatePanel to the page.

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
            <ContentTemplate>              
            </ContentTemplate>           
</asp:UpdatePanel>

5.  Now add Button inside the UpdatePanel.

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:Button ID="btnDownloadFile" runat="server" Text="Download File" OnClick="btnDownloadFile_Click" />
            </ContentTemplate>           
</asp:UpdatePanel>

6. To download the file write the following code in button click event.

    protected void btnDownloadFile_Click(object sender, EventArgs e)
    {
        //Send physical path of the file
        DownloadFile("D:\\Test.txt");
    }
    private void DownloadFile(string filePath)
    {
        // Get the physical Path of the file
        string filepath = filePath;
        System.IOFileInfo file = new System.IOFileInfo(filepath);

        if (file.Exists)
        {
            Response.ClearContent();
            // Add the file name and attachment
            Response.AddHeader("Content-Disposition", "attachment; filename=Test.txt");
            // Add the file size into the response header
            Response.AddHeader("Content-Length", file.Length.ToString());
            // Set the ContentType
            Response.ContentType = GetFileExtension(file.Extension.ToLower());
            // Write the file into the response
            Response.TransmitFile(file.FullName);
            Response.End();
        }
    }
    private string GetFileExtension(string fileExtension)
    {
        switch (fileExtension)
        {
            case ".htm":
            case ".html":
            case ".log":
                return "text/HTML";
            case ".txt":
                return "text/plain";
            case ".doc":
                return "application/ms-word";
            case ".tiff":
            case ".tif":
                return "image/tiff";
            case ".asf":
                return "video/x-ms-asf";
            case ".avi":
                return "video/avi";
            case ".zip":
                return "application/zip";
            case ".xls":
            case ".csv":
                return "application/vnd.ms-excel";
            case ".gif":
                return "image/gif";
            case ".jpg":
            case "jpeg":
                return "image/jpeg";
            case ".bmp":
                return "image/bmp";
            case ".wav":
                return "audio/wav";
            case ".mp3":
                return "audio/mpeg3";
            case ".mpg":
            case "mpeg":
                return "video/mpeg";
            case ".rtf":
                return "application/rtf";
            case ".asp":
                return "text/asp";
            case ".pdf":
                return "application/pdf";
            case ".fdf":
                return "application/vnd.fdf";
            case ".ppt":
                return "application/mspowerpoint";
            case ".dwg":
                return "image/vnd.dwg";
            case ".msg":
                return "application/msoutlook";
            case ".xml":
            case ".sdxl":
                return "application/xml";
            case ".xdp":
                return "application/vnd.adobe.xdp+xml";
            default:
                return "application/octet-stream";
        }
    }

7. Now open the web page in browser and click on download file button. The file will not download because UpdatePanel is used for partial page rendering. If you want to download the file you should  postback whole page. To resolve this problem we need to rely upon a standard postback i.e. we need to set the button that is download file to be PostBack trigger. This will initiate a normal postback whenever we click the download file button and it is possible to download the file. So, add the postback trigger to the UpdatePanel as follows.

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:Button ID="btnDownloadFile" runat="server" Text="Download File" OnClick="btnDownloadFile_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="btnDownloadFile" />
            </Triggers>
        </asp:UpdatePanel>

8.  Now save and open the page in browser and click on download file button. Now you are able to download the file from the UpdatePanel.

Whole page script: 

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html>
<html>
<script runat="server">
   
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnDownloadFile_Click(object sender, EventArgs e)
    {
        //Send physical path of the file
        DownloadFile("D:\\Test.txt");
    }
    private void DownloadFile(string filePath)
    {
        // Get the physical Path of the file
        string filepath = filePath;
        System.IOFileInfo file = new System.IOFileInfo(filepath);

        if (file.Exists)
        {
            Response.ClearContent();
            // Add the file name and attachment
            Response.AddHeader("Content-Disposition", "attachment; filename=Test.txt");
            // Add the file size into the response header
            Response.AddHeader("Content-Length", file.Length.ToString());
            // Set the ContentType
            Response.ContentType = GetFileExtension(file.Extension.ToLower());
            // Write the file into the response
            Response.TransmitFile(file.FullName);
            Response.End();
        }
    }
    private string GetFileExtension(string fileExtension)
    {
        switch (fileExtension)
        {
            case ".htm":
            case ".html":
            case ".log":
                return "text/HTML";
            case ".txt":
                return "text/plain";
            case ".doc":
                return "application/ms-word";
            case ".tiff":
            case ".tif":
                return "image/tiff";
            case ".asf":
                return "video/x-ms-asf";
            case ".avi":
                return "video/avi";
            case ".zip":
                return "application/zip";
            case ".xls":
            case ".csv":
                return "application/vnd.ms-excel";
            case ".gif":
                return "image/gif";
            case ".jpg":
            case "jpeg":
                return "image/jpeg";
            case ".bmp":
                return "image/bmp";
            case ".wav":
                return "audio/wav";
            case ".mp3":
                return "audio/mpeg3";
            case ".mpg":
            case "mpeg":
                return "video/mpeg";
            case ".rtf":
                return "application/rtf";
            case ".asp":
                return "text/asp";
            case ".pdf":
                return "application/pdf";
            case ".fdf":
                return "application/vnd.fdf";
            case ".ppt":
                return "application/mspowerpoint";
            case ".dwg":
                return "image/vnd.dwg";
            case ".msg":
                return "application/msoutlook";
            case ".xml":
            case ".sdxl":
                return "application/xml";
            case ".xdp":
                return "application/vnd.adobe.xdp+xml";
            default:
                return "application/octet-stream";
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajax:ToolkitScriptManager>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:Button ID="btnDownloadFile" runat="server" Text="Download File" OnClick="btnDownloadFile_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="btnDownloadFile" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>