Monday, September 22, 2014

How to edit a file on a deployed web site FREE hosted at 000webhost


In this tutorial we see step by step how to edit a file on a deployed web site FREE hosted at   000webhost, without using any FTP software.  Provided that your web site is not big, you can manage it with no need of any software but the one that  000webhost puts at your disposition for free . Here we'll learn how to edit a file or fix a bug on your web site with exclusively free software.
This article is the continuation of the previous post about how to deploy your web site for free at the      000webhost  web hosting.
Thus this tutorial supposes that you have already deployed your web site at 000webhost .
And now you need to edit some file to fix a bug at your deployed site. For this example, i'll use a web site of mine hosted at 000webhost:

How to edit a file on a deployed web site FREE hosted at 000webhost



How to edit a file on a deployed web site FREE hosted at 000webhost


Let's say that my web site , which calls an OData Web Service, stops working properly , showing as follows :



I can see that the Ajax call to the OData protocol based web service has returned a 404 (NOT FOUND) response, and i need to fix this bug editing the proper script file at 000webhost.
Therefore, open the CPanel of your web site:


edit a file on a deployed web site FREE hosted at 000webhost


At the CPanel , open the "Another File Manager" :



 Find the file to edit and click on "download" :



After you downloaded it , open the file with the Notepad clicking "Edit" , or use the really good editor of Notepad++ , which you can get for FREE at the Notepad++ site :



Notepad++ has a lot of functionality to offer , like testing your web pages at different browsers, and if you're using it , you will edit your file as follows :



After your done, save it and return to your account at 000webhost. Open the File Manager, and find the file that you want to replace with the new fixed version Click on "Upload File" and "Choose file" to the just edited file :


In our case, that fixed the problem, and now the requests to the OData service are getting the proper  code 200 ("OK") responses :



If you get the following error while opening the 000webhost File Manager,  is just because the session ended, so close the manager , and login again to 000webhost :



Then open again the file manager.

That's all!! 
We learned how to edit a file on a deployed web site FREE hosted at 000webhost, fixing a bug on your deployed web site.
Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן

How to deploy your application on a FREE web host with 000webhost


In this tutorial we see step by step how to deploy your application on a free web host with 000webhostIf your web site is not really big, you can manage with no need of any extra FTP software like Filezilla , and you could get away using the built in file manager of 000webhost. Here we'll see how you can deploy your web site with exclusively free software.
It's important to realize that 000webhost supports PHP at back end , so if your site is a Web Service's client , OData client, WCF web client and so on, you are invited to use this outstanding 000webhost FREE web hosting. But if your site is asp.net, you will have to learn this another tutorial instead, because 000webhost does not support asp.net.
Go to 000webhost and set a FREE account , opening "Order Now" :


how to deploy your application on a free web host with 000webhost



how to deploy your application on a free web host with 000webhost




Setup a DOMAIN :
deploy your application on a free web host with 000webhost


Next , go to "List Accounts" , to open the File Manager and upload your web site , and click on "Go to CPanel" : 




Then at the CPanel , click "Another File Manager" : 



Inside your web site, the place for your files is in the "public_html" directory. Therefore,  open it and upload your files there , creating any folders that you will need : 



Create the folders that you need , and upload all the web site files :


If your application is not big , you won't need any FTP application, but if that not the case, Filezilla or SmartFTP would be useful.


That's all!! 
We learned how to deploy  a web site on a free web hosting with 000webhost. If you need to learn about fixing a bug on your free hosted web site, see the following tutorial : "Fixing a bug in your deployed application".
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן

Friday, September 19, 2014

Create an Ajax Web Client for OData Web API RESTful Service - HTTP-DELETE JSON


In this article we'll design a web client for deleting a record by sending an HTTP DELETE call via Ajax to an Web API OData RESTful service implemented using an ODataController. The design will be made applying Twitter Bootstrap.

This post uses an OData Web API  designed in a previous Web API ODataController tutorial. The  Twitter Bootstrap's setup can be learned in this post. Also, the OData protocol for the MVC Web API with ODataControllers can be seen at the Microsoft Asp.Net site

We want to send an Ajax HTTP  DELETE request to the OData HTTP Web API service to delete an item, using this screen :
Ajax Web Client for OData Web API RESTful Service - HTTP-DELETE JSON



First create the MVC application as an empty web site:




Import the style and the script files  (you can learn the Twitter Bootstrap installing instructions here)


Take a look at the Web API ODataController class, to see the Delete( int  ) method that we're using:



The Delete() action method requires an integer ID , returning an  IHttpActionResult object.

Ajax Web Client for OData Web API RESTful Service - HTTP-DELETE JSON



Create a new web client for the OData service:


Add the references to the Twitter Bootstrap:



Then we add a DOM element for selecting the KEY  of the record to delete:

Next, we create all the input tags for showing the record's details:


This is the markup to copy-paste:

   <div class="panel panel-default">            <div class="panel-heading row">                <div class="text-muted col-xs-6">                    <h2>Message Details</h2>                </div>                <div class="text-muted col-xs-3">                    <div class="editor-label">                        ID                    </div>                    <div class="editor-field">                        <input type="number" name="ID" value="3" class="form-control" />                    </div>                </div>
            </div>            <div class="panel-body text-muted">                <div class="row">                    <div class="col-xs-6">                        <div class="editor-label">                            To                        </div>                        <div class="editor-field">                            <input type="text" name="To" class="form-control" />                        </div>                    </div>                    <div class="col-xs-6">                        <div class="editor-label">                            From                        </div>                        <div class="editor-field">                            <input type="text" name="From" class="form-control" />
                        </div>                    </div>                    <div class="col-xs-12">                        <div class="editor-label">                            Heading                        </div>                        <div class="editor-field">                            <input type="text" name="Heading" class="form-control" />
                        </div>                    </div>                    <div class="col-xs-12">                        <div class="editor-label">                            Body
                        </div>                        <div class="editor-field">                            <input type="text" name="Body" class="form-control" />
                        </div>                    </div>                    <div class="center">                        <div class="center">                            <br />                            <div class="row">                                <div class="col-lg-6">                                    <input class="btn btn-sm btn-default" value="See Message Details" />                                </div>                                <div class="col-lg-6">                                    <input class="btn btn-sm btn-default" value="Delete Message" />                                </div>                            </div>                        </div>                        <br />                        <div class="alert alert-success message"></div>                        <div class="alert alert-danger error"></div>                    </div>                </div>            </div>        </div>    </div>  





After the HTML, write the script, opening with the references to the jQuery and the Bootstrap  files:

When the "Details" button is clicked, the web page send an Ajax call containing the key of the item (inside the URI )   :



If the response was an 200 - OK, we show the item; in case of error, we display a message:


This is the code for the script:

  <script src="Scripts/jquery-2.1.1.js"></script>    <script src="Scripts/bootstrap.js"></script>    <script>        $(function () {            $("div.message").css("display", "none");            $("div.error").css("display", "none");
            $("input.btn[value*=Details]").click(function () {
                var id = $("input[name=ID]").val();                $.ajax({                    url: "http://localhost:6954/OData/Notes(" + id + ")",                    type: "GET",                    data: id,                    dataType: "json",                    contentType: "application/json",                    beforeSend: function (data) {                        //alert(id);                    },                    success: function (data) {                        var note = data;                        $("div.error").css("display", "none");                        $("div.message").css("display", "block");                        $("div.message").text("The Message with ID = " + id + " was retrieved successfully!!!");                        $("input[name=To]").val(note.To);                        $("input[name=From]").val(note.From);                        $("input[name=Heading]").val(note.Heading);                        $("input[name=Body]").val(note.Body);                    },                    error: function (msg) {                        var oError = JSON.parse(msg.responseText);                        fnError("Error : " + oError.error.innererror.message, id);                    }                })            });
            function fnError(msg, id) {                $("div.message").css("display", "none");                $("div.error").html("The message with ID = " + id + " does not exist. Try again.");                $("div.error").css("display", "block");            }



The method inside the ODataController renders the required item:



Now, we need an $.ajax() method to DELETE the selected record, using the HTTP DELETE verb:



This is the code for copy-paste in your project:

    $("input.btn[value*=Delete]").on("click", function () {
                var id = $("input.form-control[name*=ID]").val();
                 
                $.ajax({
                    url: "http://localhost:6954/OData/Notes(" + id + ")",
                    type: "DELETE",
                    data: id,
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        $("div.error").html(data.responseText); 
                    },
                    error: function (msg) {                                                
                         
                        if (msg.status == "410") {
                            $("div.message").text('The item was successfuly deleted.');
                        }
                    }
                });
            });
        })
    </script>


Here, we send an Ajax HTTP DELETE request to the OData Web API web service. Notice that the response for an OK has been defined as code 410 ("Gone"), that means that the Ajax request receives an ERROR by response, so we handle it in the error callback of the $.ajax() method!!!!!!

Run the application: the User retrieves the item's details, and clicks the second button, deleting the record:





The Ajax request reaches the OData Web API service, which we built in a previous article about   OData v4.0 WebAPI  updating  (HTTP PUT & HTTP PATCH) that can be found here.
This is the Delete() method which handles the HTTP DELETE request at the OData service:



As you see, we just delete the item, sending an "Gone" status message. Remember that "Gone" is the error 410, therefore we handle it at client side at the error callback.

That's all!!!!

In this article we've seen step by step how to create a web client which deletes a record by sending an HTTP DELETE Ajax request to an WebAPI OData RESTful service implemented with an MVC ODataController.
Enjoy OData Web API  !!!!

By Carmel Shvartzman

עריכה: כרמל שוורצמן

Create an Ajax Web Client for OData Web API RESTful Service - HTTP-PUT JSON


In this article we'll create a web client for updating a record by sending an HTTP PUT request via Ajax to an Web API OData RESTful service using the ODataController. We'll build the full-update form by means of the Twitter Bootstrap.
To update an item, we'll send an Ajax PUT request using the OData protocol.

For this post we're using an OData Web API  built in a previous Web API ODataController tutorial. The steps for the Bootstrap's setup can be found  in this article.
The OData protocol designed for the MVC Web API using ODataControllers can be studied at the Microsoft Asp.Net site

We'll want to send an HTTP  PUT request to the OData HTTP Web API service to fully update a record. The screen to perform the Ajax PUT call will appear this way:
Ajax  OData Web API RESTful Service - HTTP-PUT JSON



First create the MVC application as an empty web site:




Import the CSS3 and javascript files  (you can see through the 2 minutes Twitter Bootstrap installing instructions here) : then, after you do so, check that you have all the required files in your app:


Take a look at the Web API ODataController class, to see the PUT( int, Note ) method that we're going to use:



You can see that the Put() action method requires a  Note object , returning an  IHttpActionResult object: a code 202 ("Accept") response if everything went right, but an error response code ("400")  if  it don't.

Ajax Web Client for OData Web API RESTful Service


Create a new html file, the web client for the OData service:


Add the references to the Twitter Bootstrap files:



Then we add an input element for selecting the KEY (int) of the item to update:

Next, we create all the DOM elements for displaying the record's details, inside  a Bootstrap panel:


This is the markup to copy-paste:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Update</title>    <link href="Content/bootstrap.css" rel="stylesheet" />    <link href="Content/bootstrap-theme.css" rel="stylesheet" /></head><body>


    <div class="container">        <div class="jumbotron"  align="middle">            <h1>OData Web API Full Update Form</h1>            <p>Ajax HTTP GET/PUT Form to show Details & Update an item</p>            <p style="font: 900 11px Georgia;">By Carmel Shvartzman - using the Twitter Bootstrap</p>                        <p><a class="btn btn-default btn-lg" role="button">Learn more about OData Web API</a></p>        </div>

        <div class="panel panel-default">            <div class="panel-heading row">                <div class="text-muted col-xs-6">                    <h2>Message Details</h2>                </div>                <div class="text-muted col-xs-3">                    <div class="editor-label">                        ID                    </div>                    <div class="editor-field">                        <input type="number" name="ID" value="3" class="form-control" />                    </div>                </div>
            </div>            <div class="panel-body text-muted">                <div class="row">                    <div class="col-xs-6">                        <div class="editor-label">                            To                        </div>                        <div class="editor-field">                            <input type="text" name="To" class="form-control" />                        </div>                    </div>                    <div class="col-xs-6">                        <div class="editor-label">                            From                        </div>                        <div class="editor-field">                            <input type="text" name="From" class="form-control" />
                        </div>                    </div>                    <div class="col-xs-12">                        <div class="editor-label">                            Heading                        </div>                        <div class="editor-field">                            <input type="text" name="Heading" class="form-control" />
                        </div>                    </div>                    <div class="col-xs-12">                        <div class="editor-label">                            Body
                        </div>                        <div class="editor-field">                            <input type="text" name="Body" class="form-control" />
                        </div>                    </div>                    <div class="center">                        <div class="center">                            <br />                            <div class="row">                                <div class="col-lg-6">                                    <input class="btn btn-sm btn-default" value="See Message Details" />                                </div>                                <div class="col-lg-6">                                    <input class="btn btn-sm btn-default" value="Update Message" />                                </div>                            </div>                        </div>                        <br />                        <div class="alert alert-success message"></div>                        <div class="alert alert-danger error"></div>                    </div>                </div>            </div>        </div>    </div>  



After the markup, write the javascript, with the references to the jQuery and to the Bootstrap javascript files:

When the "Details" button is clicked, we send an Ajax request containing the ID of the record (inside the URI ) to be displayed :



If the response was an 200 - OK, we fill all fields; elsewhere, we display an error message:


This is the code for the script:


 <script src="Scripts/jquery-2.1.1.js"></script>    <script src="Scripts/bootstrap.js"></script>    <script>        $(function () {            $("div.message").css("display", "none");            $("div.error").css("display", "none");
            $("input.btn[value*=Details]").click(function () {
                var id = $("input[name=ID]").val();                $.ajax({                    url: "http://localhost:6954/OData/Notes(" + id + ")",                    type: "GET",                    data: id,                    dataType: "json",                    contentType: "application/json",                    beforeSend: function (data) {                        //alert(id);                    },                    success: function (data) {                        var note = data;                        $("div.error").css("display", "none");                        $("div.message").css("display", "block");                        $("div.message").text("The Message with ID = " + id + " was retrieved successfully!!!");                        $("input[name=To]").val(note.To);                        $("input[name=From]").val(note.From);                        $("input[name=Heading]").val(note.Heading);                        $("input[name=Body]").val(note.Body);                    },                    error: function (msg) {                        var oError = JSON.parse(msg.responseText);                        fnError("Error : " + oError.error.innererror.message, id);                    }                })            });
            function fnError(msg, id) {                $("div.message").css("display", "none");                $("div.error").html("The message with ID = " + id + " does not exist. Try again.");                $("div.error").css("display", "block");            }


The action method which's inside the ODataController returns the required record:



Now, we need another $.ajax method to UPDATE the just EDITED record, using the HTTP PUT verb:



This is the code for copy-paste in your project:


            $("input.btn[value*=Update]").on("click", function () {                var id = $("input.form-control[name*=ID]").val();                var to = $("input[name=To]").val();                var from = $("input[name=From]").val();                var heading = $("input[name=Heading]").val();                var body = $("input[name=Body]").val();                var data = '{"ID":"'+ id +'","To":"' + to + '","From":"' +                    from + '","Heading":"' +                    heading + '","Body":"' + body + '"}';
                $.ajax({                    url: "http://localhost:6954/OData/Notes(" + id + ")",                    type:  "PUT",                     data: data,                    contentType: "application/json",                    dataType: "json",                    success: function (data) {                        $("div.message").text('The item was successfuly updated.');                    },                    error: function (msg) {                        $("div.error").html(msg.responseText);                    }                });            });        })    </script>

Here, we create an JSON object with all the data typed by the User, and send an Ajax HTTP PUT request to the OData Web API web service. Remember: HTTP PUT is for update ALL the fields of a record; while HTTP PATCH only updates part of the fields.

Run the application: the User gets the item's details, then EDIT all or PART of the data (there's no need of changing ALL the data, because we FILL the fields with the DETAILS brought from the web service, therefore ALL fields will contain some data), and clicks the second button, for updating the record:







The Ajax request reaches the web service, which we built in a previous tutorial about setting an OData v4.0 WebAPI with full and partial updating support (HTTP PUT & HTTP PATCH) that can be found here.
This is the Put() method which handles the HTTP PUT request at the OData service:

As you see, we just Update the item, but if the Model is not valid, we concatenate all errors in a string using SelectMany(), then Select() and then the Aggregate() Linq methods.

The item was updated. But, in case of error,  for example, if we don't comply with the data annotation for the "From"  property, which requires an email , we get the following error message:


The response 400 is because there are too many characters in the "Heading" field, as stated in the Model's Data Annotations:

Therefore we got the following response from the OData service:



That's all!!!!

In this article we've seen step by step how to create a web client which fully updates a record by sending an HTTP PUT Ajax request to an WebAPI OData RESTful service implemented with an MVC ODataController. The OData Web API  is built in the previous Web API ODataController tutorial. The Bootstrap's setup can be found  in this article.
Enjoy .....

By Carmel Shvartzman

עריכה: כרמל שוורצמן