This post is optional and can be used by those students that want to go beyond the regular content of the course. Files is an optional topic here because we are trying to get to the really powerful technology that will dramatically increase the value of everything you've learned so far - online databases.
The video discusses the use of the array of $_SERVER variables as a source of information that is possible to obtain in communications with the server in addition to the information stored in PHP variables and in files/databases in various locations. Then we will briefly touch on the basics of the file operations and the need to open and close them before and after processing.
Then you will see a couple of simple applications that can be creatively modified, and even serve as a basis of a start-up company or a very useful addition to your project site. In this applications we will use Ajax to create the connection to the server and PHP for processing on the server side.
Sunday, November 2, 2014
Wednesday, October 29, 2014
Simple PHP form explained
Creation of a pair of programs dealing with forms is very simple. The first program can be just an HTML file with the form and a reference to the second program processing this form on the server (in our case using PHP). Please watch the video on how to do this.
Saturday, October 25, 2014
Code explanation for the Ajax with XML lab
The required work with Ajax and XML using examples from w3schools might require some clarifications on how each line of code there works. Understanding this clearly you can somehow reuse the code dynamically creating HTML code for certain parts of the page (like a table) for presenting XML data. Explanations in this video will also allow you to make the examples more complicated and thus learn more.
Friday, October 24, 2014
Working with smarterasp server
See the short video on how to use folders and files on smarterasp server
Ajax code simplified (and a video)
An HTTP request consists of four parts:
the HTTP request method or "verb" (GET or POST)
the URL being requested
an optional set of request headers, which may include authentication information
an optional request body
The "GET" and "POST" methods are universally supported. "GET" is used for most "regular" requests, and it is appropriate when the URL completely specifies the requested resource, when the request has no side effects on the server, and when the server’s response is cacheable. The "POST" method is what is typically used by HTML forms. The parts of an HTTP request have a specific order: the request method and URL must come first, then the request headers, and finally the request body. XMLHttpRequest implementations generally do not initiate any networking until the send() method is called.
The HTTP response sent by a server has three parts:
a numeric and textual status code that indicates the success or failure of the request (good to check)
a set of response headers (you do not have to use these)
the response body (your information from the server)
Below is the code example used in this video lecture
<!DOCTYPE html>
<html>
<head>
<script>
function loadData()
{
var xhr;
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.status==200 && xmlhttp.readyState==4 )
{document.getElementById("myDiv").innerHTML=xhr.responseText;}
}
xhr.open("GET","ajax_info.txt",true); // or just xhr.open("GET", url);
xhr.send(); // GET requests never have a body, so pass null or omit
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadData()">Change Content</button>
</body>
</html>
XMLHttpRequest Properties
onreadystatechange
An event handler for an event that fires at every state change.
readyState
The readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
responseText
Returns the response as a string.
responseXML
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
status
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
statusText
Returns the status as a string (e.g. "Not Found" or "OK").
the URL being requested
an optional set of request headers, which may include authentication information
an optional request body
The "GET" and "POST" methods are universally supported. "GET" is used for most "regular" requests, and it is appropriate when the URL completely specifies the requested resource, when the request has no side effects on the server, and when the server’s response is cacheable. The "POST" method is what is typically used by HTML forms. The parts of an HTTP request have a specific order: the request method and URL must come first, then the request headers, and finally the request body. XMLHttpRequest implementations generally do not initiate any networking until the send() method is called.
The HTTP response sent by a server has three parts:
a set of response headers (you do not have to use these)
the response body (your information from the server)
Below is the code example used in this video lecture
<html>
<head>
<script>
function loadData()
{
var xhr;
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.status==200 && xmlhttp.readyState==4 )
{document.getElementById("myDiv").innerHTML=xhr.responseText;}
}
xhr.open("GET","ajax_info.txt",true); // or just xhr.open("GET", url);
xhr.send(); // GET requests never have a body, so pass null or omit
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadData()">Change Content</button>
</body>
</html>
XMLHttpRequest Properties
An event handler for an event that fires at every state change.
readyState
The readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:
|
State
|
Description
|
| 0 | The request is not initialized |
| 1 | The request has been set up |
| 2 | The request has been sent |
| 3 | The request is in process |
| 4 | The request is completed and data received |
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
responseText
Returns the response as a string.
responseXML
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
status
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
statusText
Returns the status as a string (e.g. "Not Found" or "OK").
Thursday, October 23, 2014
How Ajax changes approach to Web development
In this video lecture I will be talking not about the details in the code that uses XMLHttpRequest object but about the changes in Web development approach with the use of Ajax. This simple http technology is the foundation of switching from page-based interaction with the server to application based interaction when a number of small independent or communicating apps can create a coherent integral view seen as one page. You all saw such elements of pages as Google AdSense, Google Maps, Suggest, auto-complete, chats and IM, login portion of the page where independent functionality of such pieces does not require for the whole page to be reloaded and all client -side execution to be stopped until the server returns data in each Ajax section.
Friday, October 10, 2014
JS Debugging
In this video lecture you will learn some simple methods of HTML and JavaScript debugging. Of course, there are more powerful tools on the market, but the ones shown in the lecture are simple and easily accessible. In really big projects you can use whole studios of tools...
Sunday, October 5, 2014
Objects: Lecture 3: More Advanced Stuff
First read http://www.w3schools.com/js/js_object_prototypes.asp
about prototypes and experiment with them in included exercises. Important to
understand that compared to the old typical object-oriented languages (VB, C++,
C#, Java, etc.) that are strongly typed and have such forms as objects being created
during the compilation time – dynamic languages (such as Perl, Ruby, Smalltalk,
and… JavaScript, along with the number of others) allow to change the program
and its data types during the execution depending on the situation. For example
var x = 5; dynamically becomes and integer, but if later you use x=”hello”; then
it becomes a string. You saw in the
examples from w3schools how it is possible to change, add, delete properties
and methods in objects. Same is possible to do in constructors using prototypes.
This allows to change whole groups (types of objects) like instead of changing
properties of a student Bob – you can change properties of the constructor
which changes properties of ALL students that were derived (using “new”) from
that constructor. For example in games, objects operating on the screen might
change properties (like colors, shapes, etc.) and behaviors under various conditions DURING
the game. In general program can change itself depending on the situation and
an old saying that computer can do ONLY what it was programmed to do is
incorrect. Software systems can LEARN (using various learning algorithms) and
evolve to become more adequate to the situation when after a while the creators
might not even know how and why the system does some new tricks.
This leads to the situation when in systems that were intended to be
dynamic – the programmers do not know what properties and how many of them
their objects will have after a while
depending on various situations. This leads to the need in using safer
forms of handling objects where their properties are treated as arrays and are
accessed in a loop like is shown in http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_in
where the code uses it:
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + "
";}
Here x (better would have
been to use conventional i, j as indexes) is just an index reflecting the
position of an attribute in the object “person”. Using a tricky construction (for (x in person)) we can enumerate the
properties and then treat them like an array using their relative number in the
enumerated sequence treating it as person[x]
instead of giving a name of each property as you did before.
An example of how useful objects are in making your code more compact and logic more clear can be seen
in operating whole objects as variables by passing them to other objects or
functions:
var father = {
firstname:"John",
lastname:"Doe",
age:65,
eyecolor:"blue"
};
function canRetire (person){
if (person.age > 62) {
return true;
return true;
} else {
return false;
}
Here, assuming that object father
is an instance (derived from) of the type (class) person, we are passing the whole object to the function checking if
that particular person (particular object) can retire. In a similar fashion
once a function gets an object as a parameter – it can internally use all its
properties and functions. Notice that instead of sending a bunch or parameters
to a function we are sending just one (of type person) that can have a very
complex and rich structure.
Saturday, October 4, 2014
Objects:Lecture 2. Methods
After you watch Lecture 1 (What are objects?) we can continue to the discussion of the second part of objects - programs that are stored in them. They are called methods. In this video lecture I will be talking about ways of using w3schools as a debugging and development platform
Objects: Lecture 1. What are Objects?
What are objects?
Objects are an extremely important topic in many modern
programming languages, as well as in JavaScript. They dramatically increase
your programming power, richness, effectiveness and efficiency. There are many
tutorials on any part of JavaScript and you are encouraged to browse through
some of them in order to find the ones that explain a particular topic in a way
best for your learning methods and current understanding. Here I talk about
something that will allow you to get into the tutorials on objects easier,
compensating for often neglected efforts in letting students understand the
nature of objects deep enough to be more comfortable with specific
explanations.
Objects are complex data types that might contain data (properties) and a bunch of small
programs (methods). Therefore they
are like combinations of files with data and a library of programs in one
system. Such system can be activated by just its name, can be send somewhere as
one thing and then used in all its aspects, like getting data (properties)
stored in it and/or running some programs that are contained in objects. In
comparison with having files and programs separate – such complex systems (data
types) like objects can be easily created
and handled as one universal package where we can use its functional
capabilities (by running the programs), its data storage capabilities by
adding, changing, and retrieving data, or by both at the same time when newly
obtained by an object data can be processed by its own programs (methods)
either changing its own data or controlling input and output of data processing
in and out of an object.
Object-oriented analysis, design and programming tends to see any real
life object, process, concept, and so on as potential software objects with
their structural and behavioral characteristics. Having these features, program
objects can model real life objects that usually also have properties and can
doo something (or something can be done to them). Examples: a car, a computer,
a pen (with its size and weight, as well as an ability to touch paper, leave a
line of ink, etc.) and so on. Once you are trained in such vision – you can quickly
create models of real situations (or virtual and game situations) and make them interact with each other using
their properties and behaviors in response to initiatives of other objects. Thus
you can create real virtual/game worlds
that react to actions of their own objects or physical objects like players.
Since your software can activate many different objects for communication
with each other – anything that you want object to store, retrieve or do requires
the use of a particular object name because otherwise it will be unclear who
you are talking to (in your command). This
can be achieved by calling first the name of a particular object followed by the
operation on its data or invoking one of its methods (small programs).
ExampleA:
myCar. CurrentMileage = 2000;
ExampleB:
myCar.showYourCurrentMileage();
Here the first example shows how to store data in one of the properties
of myCar object (CurrentMileage), while the second shows how to run a small
program (showYourCurrentMileage()) that might be programmed to get that
property and show it on the page. See below an example from w3schools of an
object “person” and a link allowing to experiment with it by adding and
retrieving more properties.
Example 1. Properties:
<body>
<article id="demo"></article>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years
old.";
</script>
</body>
</html>
Experiment with it live (http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1
) by adding and retrieving new properties, like making it say: “John is 50
years old and 4 feet tall.”
Then create more interesting objects with properties and something
printed out about that object. Later you
will be adding code for changing the properties and adding new properties
dynamically.
Thursday, September 25, 2014
Simple start with JavaScript and w3schools
This lecture supplements reading the appropriate sections of JavaScript on w3schools. Our approach is not in exhaustive learning of each command and feature which can take a couple of semesters but get initially a simple introduction to the main features of the language allowing to start programming your web pages. Later you will be getting more confidence in the use of these features, will periodically reread various web tutorials or google specific problems. But this will be much easier when working on some live code and having in mind some web project.
Working with SFTP (WinSCP)
This video lecture shows how to set your secure file transfer client and how to move files and folders between your local station and remote server (pages.ramapo.edu in our case).
Simple HTML intro
Video Lecture: Intro to HTML
Some of you already know and used a number of HTML tags while others are new to this. In the following video lecture I am showing how to use a simple text editor (Notepad for PC in this case) creating an HTML document and work with it in a WYSIWYG fashion making changes and immediately seeing how the page will look like. You can just follow the video and after the principle is clear experiment with your own content
Intro to CSS
Video Lecture: Intro to CSS
A simple gentle introduction to some important concepts of CSS working together with HTML can be found in this video
A simple gentle introduction to some important concepts of CSS working together with HTML can be found in this video
Purpose of this blog
Since the course is hands-on, dynamic, and in online format - I will be running a blog that will substitute professor's commentary that you might get in face-to-face classes. It will allow make such comments more timely (whenever they have to be done and not only during class sessions) and more tailored to the current class performance and activities. Here you will find my current comments on the tasks, grades, additional help materials, etc.
The additional and help material will be published separately and linked to from this blog. Check this blog often since I assume that you've read it and consider it in my evaluation of your course work, task creation, and quiz questions. Additional advice, requirements, or modifications in the weekly tasks will also be posted here.
Watch for the new titles of posts arriving in the blog section (right-bottom corner of the page) on Moodle.
The additional and help material will be published separately and linked to from this blog. Check this blog often since I assume that you've read it and consider it in my evaluation of your course work, task creation, and quiz questions. Additional advice, requirements, or modifications in the weekly tasks will also be posted here.
Watch for the new titles of posts arriving in the blog section (right-bottom corner of the page) on Moodle.
Subscribe to:
Comments (Atom)