Monday, October 3, 2016

How to create simple PHP form and save to database?

Things to know:
  • Tools Required to implement this code WAMP for Windows.
  • Save this code to .php file.
  • Place that file in WWW directory. WWW directory will in c:/wamp by default.
  • Create Database in mySQL name it as "test". after that create new table name as "temp" with fields "Fname" and "Lname".

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>

<br />

<?php
if(isset($_POST['btn'])){
if($_POST['fname']==""){
echo 'Error: Insert first name';
}
else if($_POST['lname']==""){
echo 'Error: Insert last name';
}
else{
$conn = mysqli_connect('localhost','root','','test');
$str = "insert into temp (fname,lname) values('".$_POST['fname']."','".$_POST['lname']."')";
mysqli_query($conn,$str);
echo 'Inserted successfully';
}
}

echo '<br /><br />';

?>

<form action="" method="POST">
//textbox for input value 1
First Name: <input type="text" name="fname" />
<br />
<br />
//textbox for input value 2
Last Name: <input type="text" name="lname" />
<br />
<br />
//submit button to save values in database 
<input type="submit" name="btn" value="Insert" />
</html>

</body>
</html>


Output:


Monday, September 26, 2016

JSON JS

What is JSON JS?

JSON stands for JavaScript Object Notation. JSON is lightweight data interchange format. JSON is language independent. JSON is easy to understand. The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text only. Code for reading and generating JSON data can be written in any programming language.

Why knockout JS?
  • It is used while writing JavaScript based applications that includes browser extensions and websites.
  • JSON format is used for serializing and transmitting structured data over network connection. 
  • It is primarily used to transmit data between a server and web applications. 
  • Web services and APIs use JSON format to provide public data. 
  • It can be used with modern programming languages.
How to use knockout JS?

Storing JSON Data
As a simple example, information about me might be written in JSON as follows:


var jason = {
                "age" : "24",
       "hometown" : "Missoula, MT",
                "gender" : "male"
};


Storing JSON Data in Arrays
A slightly more complicated example involves storing two people in one variable. To do this, we enclose multiple objects in square brackets, which signifies an array. For instance, if I needed to include information about myself and my brother in one variable, I might use the following:


var family = [{
       "name" : "Jason",
       "age" : "24",
                "gender" : "male"
};
{
                "name" : "Kyle",
                "age" : "21",
       "gender" : "male"
};


How Do We Load JSON into a Project?

One of the easiest ways to load JSON data into our web applications is to use the $.ajax() method available in the jQuery library. The ease of retrieving data will vary based on the site providing the data, but a simple example might look like this:


$.ajax(
       type:'GET',
       url:"http://example.com/users/feeds/",
       data:"format=json&id=123",
       success:function(feed) {
       document.write(feed);
       },
dataType:'jsonp'
);


Other interesting things to know?

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.


Monday, September 19, 2016

Top 5 New features in ASP.NET 4.6

In this post we will take a look at some of the top features in the newest edition of ASP.net.

ASP.NET Core on Multiple Platforms

ASP.NET and the .NET framework are targeted towards the Windows platform. On the other hand, ASP.NET Core is developed to support multiple platforms including Windows, Mac, and Linux. ASP.NET Core is a part of .NET Core—a new modular framework that supports multiple platforms. This also means that, unlike ASP.NET web applications, primarily run under IIS, the ASP.NET Core applications can run under non-IIS Web servers. Figure 1 shows the role of the .NET Core and ASP.NET Core.

Role of Project.json

ASP.NET Core uses a special file Project.json for storing all the project-level configuration information. Project.config can store many configuration settings, such as references to NuGet packages used in the project and target frameworks.

Tag Helpers

In ASP.NET MVC 5, you used HTML helpers such as BeginForm(), LabelFor(), and TextBoxFor() to render forms and form fields. You can continue to use HTML helpers in ASP.NET Core, also. But there is a better alternative: Tag Helpers. Tag helpers take the form of standard HTML tags with certain special asp-* attributes added to them

View Components

In MVC 5, you used partial views as a means to reuse markup and code. ASP.NET Core introduces View Components—a more powerful and flexible alternative. A view component consists of a class typically inherited from ViewComponent base class and a view file containing the required markup. This programming model is quite similar to the one used by controllers and views. It allows you to separate code and markup from each other—code in the view component class and markup in a view. Once created, you can use a view component on a view by using the @Component.Invoke() method.

Single Programming Model for MVC and Web API

In MVC 5, controllers inherit from the System.Web.Mvc.Controller base class. And, Web API 2 controllers inherit from System.Web.Http.ApiController. In ASP.NET Core, both of these frameworks are merged into a single framework. Thus, under ASP.NET Core, an MVC controller and Web API controller both inherit from Microsoft.AspNet.Mvc.Controller base class. You then can configure aspects such as HTTP verb mapping and the routing of the controllers as desired.

Monday, September 12, 2016

What is AJAX and how to make AJAX call using jQuery?

What is AJAX?

AJAX = Asynchronous JavaScript and XML. AJAX is a misleading name. You don't have to understand XML to use AJAX. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.

Why AJAX?

AJAX is use on based of following open standards:
  • Browser-based presentation using HTML and Cascading Style Sheets (CSS).
  • Data is stored in XML format and fetched from the server.
  • Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
  • JavaScript to make everything happen.

How to use AJAX?

Before you continue you should have a basic understanding of the following:
  • HTML
  • JavaScript
Syntax


[selector].load( URL, [data], [callback] );



URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.

Simple example of AJAX Call:


<html>
    <head>
    <title>The jQuery Example</title>
    <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    //this is AJAX function to load the tag stored in result.html
        <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
             $("#driver").click(function(event){
             $('#stage').load('jQuery/result.html');
            });
         });
        </script>
    </head>
               
    <body>
        <p>Click on the button to load /jquery/result.html file</p>
        <div id = "stage" style = "background-color:cc0;">
            STAGE
        </div>
    //this will create a button which will execute the function
        <input type = "button" id = "driver" value = "Load Data" />
    </body>
               
</html>


make another html file name it result.html and add this line to that and store it to the default dir and just change the path here  $('#stage').load('jQuery/result.html'); in above code.


<h1>THIS IS RESULT...</h1>



Other interesting things to know?

Query AJAX Methods
You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need.



  • jQuery.ajax( options ) Load a remote page using an HTTP request.
  • jQuery.ajaxSetup( options ) Setup global settings for AJAX requests.
  • jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request.
  • jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request.
  • jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request.
  • jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request.
  • load( url, [data], [callback] )Load HTML from a remote file and inject it into the DOM.






Monday, September 5, 2016

What is Chrome extension and how to create simple Chrome extension?

What are extensions?

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS.
Extensions have little to no user interface. Extensions bundle all their files into a single file that the user downloads and installs. This bundling means that, unlike ordinary web apps, extensions don't need to depend on content from the web. You can distribute your extension using the Chrome Developer Dashboard to publish to the Chrome Web Store.

How to make chrome extension?

Step 1:
Let’s start by creating a new directory that we’ll call “website analyzer”. All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created.
Put this code into manifest.json.


{
"manifest_version": 2,

"name": "GTmetrix Analyzer Plugin",
"description": "This extension will analyze a page using GTmetrix",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}



Step 2: 
Create a popup.html file and a popup.js file in our “website analyzer” directory.

Open up the popup.html page and add the following:


<!doctype html>
<html>
  <head>
    <title>GTmetrix Analyzer</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>GTmetrix Analyzer</h1>
    <button id="checkPage">Check this page now!</button>
  </body>
</html>



Step 3: 
Open up the popup.js file and add the following code:


document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('checkPage');
  checkPageButton.addEventListener('click', function() {

    chrome.tabs.getSelected(null, function(tab) {
      d = document;

      var f = d.createElement('form');
      f.action = 'http://gtmetrix.com/analyze.html?bm';
      f.method = 'post';
      var i = d.createElement('input');
      i.type = 'hidden';
      i.name = 'url';
      i.value = tab.url;
      f.appendChild(i);
      d.body.appendChild(f);
      f.submit();
    });
  }, false);
}, false);


Now go to chrome/extension. Check “Developer mode” to enable loading unpacked extensions.  This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” or simply drag the your folder onto the page to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.
To test out the extension, navigate to a page you want to test with GTmetrics. Then, go ahead and click the icon for our GTmetrix extension. When the HTML page comes up, click “Check this page now!” and you should immediately see the request and results from the current page being displayed.

Check this out

Sunday, September 4, 2016

htaccess upload error on yahoo hosting

Recently one of my friends website redesigned and hosted on Yahoo Hosting. Requirement was to rewrite URL to extension less. 
e.g. http://www.abc.com/blog.php to http://www.abc.com/blog.

Googling on PHP suggested to have .htaccess file and have rules inside it.

Windows does not allow creating file without name from explorer so .htaccess is not possible
Work around is to create file in notepad and save with *.* all files option

Finally, learn that Yahoo hosting does not allow .htaccess file upload and that put end on possibility of rewriting URL. Finally decided to move to other hosting provider.

Hope this helps someone saving sometime.

Monday, August 29, 2016

How to download HTML page through C# console application?

Hello friends, in this article I will show that how to retrieve web page or download web page source to do so one should have basic knowledge of visual studio and c# programming language.

Here is the one line that will help to retrieve webpage with C#

Use System.Net.WebClient class to use below code.


System.Console.WriteLine(new System.Net.WebClient().DownloadString(url));


How to download web page with the help c# console application.


using System.Net;
//...
using (WebClient client = new WebClient ()) // WebClient class inherits IDisposable
{

    client.DownloadFile("http://yoursite.com/page.html", @"C:\localfile.html");

    // Or you can get the file content without saving it:

    string htmlCode = client.DownloadString("http://yoursite.com/page.html");
    //...

}



There are two ways directly save it to localfile.html or you can get the code and get it into the string variable.