Blog 27

Today I submitted my milestone 3 for WEB601. This blog will contain a brief summary of the web work I have completed in the last few days leading up to submitting this milestone.

Animation: I have implemented a image link animation that is triggered when the user loads the home page. This image starts on the left hand side of the home page and it  slides over to the right hand side.

Form Validation: I have implemented the required attribute on all of the input fields in my competition form, additionally to implement the client side validation I have placed regular expressions on the classroom name, and school telephone number. I have put the input type of email onto the school pupil email address and the input type of text for the school name (note: I did have a regular expression on the school name input field to make sure no school name with only one character was implemented. However this regular expression would not allow me to enter a school name of more than one word, which is clearly not useful as virtually all school names will be at least 2 words e.g. Nayland College, and so I decided to stick with just having the HTML5  input type of text).

Documentation: I updated my information architecture analysis adding analysis for the creation of the animation and creating an updated milestone 3 architectural blueprint (which now includes the animation on the home page, the competition form page and the thankyou form page).

Additionally I wrote about the process I went through to implement PHP subclasses to my template and controller (which was recommended by Todd  in my milestone 2 feedback), implementing the animation and the client side validation. So I feel that I have comprehensively updated my documentation.

 

Advertisements

Blog 25

Today we talked about AJAX and the implementation of AJAX to receive the forms data from the competition form using AJAX and jQuery.

Due to time constraints from other courses I was only able to practice the implementation of AJAX during the classtime and instead decided that my time would be better spent working on the work required for the milestone 3 for web which is the form validation and animation using jquery.

I class I created a script called AjaxHandler.js and I included it as a script at the top of my template (same as you would do for the style.css). I removed the form action of the competition form from CompController.php to a blank form action.

I also ensured that the code in the AjaxHandler.js was the same as depicted in the class supplied resources. However when I submitted the competition form I got an error stating that a bootstrap file could not be found.

Even though I would have liked to have investigated this issue further I simply did not have the time with a SYD assignment, and SEC assignment also requiring my attention so concentrated on the explicitly mentioned milestone 3 requirements as previously stated.

Blog 26

Today was the last WEB601 class, we worked on our projects and Todd did a summary of the course.

In this course we learned:

Design for web apps using the Information Architecture Analysis- This is called LEAD design

Web app structure- This is the MVC architecture

Server Side scripting- PHP, MYSQL

Client side scripting- HTML5, JQuery, AJAX, Validation

We have learned enough to be on our way to be considered a Full Stack Developer- Having taken WEB501 and WEB601 we are on the way to be considered a full stack developer because we know what a web application is from start to end, in other word we can do client side and server side technologies of the web application development.

Project:

I have completed the form validation and animation. I have started writing about the process I went through to get to this point is in my final Milestone 3 report. However I am having issues with AJAX

Blog 24: AJAX Part 1

Today we talked about AJAX. which stands for Asynchronous Java And XML.

It works by:

  1. Request for webpage
  2. Bulk transfer from webserver containing template of webpage
  3. Now all user interactions go to AJAX script that deals with all user actions. So the website is using AJAX processing system.

So all XMLHTML Requests go to AJAX and only part of the webpage is updated. so the benefit of AJAX is it allows the user to interact with the webpage without refreshing the page.  Updating the page requires find the id of a particular element and place some HTML in it.

Implementing AJAX

To implement AJAX you have to:

  1. Implement JavaScript script to get XMLHTTP Request object, (we need this object to make requests it is like a little web browser to make requests to):
function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}

https://msdn.microsoft.com/library/ms535874(v=vs.85).aspx

 

To create XMLHTTPRequest object you need to implement the JavaScript script

function handler() //function handler (rename CompControlView) it 
runs on every message from server
{
    if (oReq.readyState == 4 /* complete */) {//oReq.readyState==4 means finished 
(all data received)
        if (oReq.status == 200) { //oReq.status is HTTP Response from web server 200 is webpage
            console.log(oReq.responseText); //Post responseText to console 
and put it in div tag
        }
    }
}
var oReq = getXMLHttpRequest(); 
if (oReq != null) {
    oReq.open("GET", "http://localhost/test.xml", true); //get object. The link can be
url of controller class script for example. true means it asynchronous continue to 
send AJAX requests whilst this request is made)
    oReq.onreadystatechange = handler; //define what deals with object
    oReq.send(); //send object
}
else {
    window.console.log("AJAX (XMLHTTP) not supported.");
}

Instead of the highlighted red text you can just create XMLHTTPRequest object with one line:

var oReq = new XMLHttpRequest();

But check if XMLHTTPRequest() object exists with a IF statement above that line of code.

 

I then tried playing around with the supplied AJAX script.

Project:

The Milestone 3 needs:

Form validation

JQuery animation

Implement AJAX

 

 

Blog 23: HTML5 form input attributes

Today we talked about HTML5 form validation. We will use ARIA approach which is the addition of additional tags in the HTML.

Once you start using HTML5 a lot of things can start happening in the web browser. We can use different input types in the HTML5 tag on our web forms e.g. type=text.

Input type attribute

If you want a input in a form that accepts dates you write into the input tag type=date. datetime has been removed from the later version. Other examples of types for tag are type attribute of ‘reset’ will reset the form data to default. The type attribute ‘tel’ validate telephone numbers.

e.g.

Accept attribute

 

  //The accept attribute specifies the type of file you will accept with this input field. The /* at the end means it will accept any type of audio file.

Autocomplete attribute

When the user tries to write in a word the form will try to complete it.

Form attribute

You can set the value of the form to the id of the form and then you can have parts of the form splattered all over your webpage rather than in one group

Formmethod attribute (you can also use the attribute ‘method’ in the form tag as well except formmethod is just the new HTML5 attribute name)

Get- When the form is submitted there is a question mark in url. Request to server

Post- Hides the url. This is supposed to be a sending to the server.

Pattern attribute

You write pattern=….. it means it must have that pattern when the user must write in. It is a regular expression. e.g. pattern=”A215″

Would you like banana or cherry?

Submit

To indicate the number of inputs you write in, this sets the lowest accepted age of 12 and maximum age of 120, and the pattern means

The below screensjhot is from http://www.w3schools.com/tags/att_input_pattern.asp and it shows the use of regular expressions in the HTML5 tag to make sure the pattern is followed.

regular expression blog 23.PNG

Required attribute

This means the input field must write in a value into the input field. It is a boolean attribute and so by putting it on a input field it means it will make the input field required you don’t have to write =true.

Would you like banana or cherry?

Submit

Spellcheck attribute

This will check the spelling and grammar of the input field

Data form validation

You can use CSS pseudo classes which will do something to the style of the webpage when invalid data is inserted into a input field.

i.e.

#name:invalid {

border-color:red;

}

When a invalid  input into the name class is submitted then the border of this input class is set to red.

Fieldset tag

You can use
tag to group components spatially together in the form.
Personalia:Name:

Email:

Date of birth:
This means that all 3 input tags are grouped together.

Event handlers

This will perform an action when the condition is meet.

Note: Everytime you use HTML5 you must open the HTML with
 

For milestone 3 we need form data validation on:

Class name: regular expressionm

Telephone: Can use input type=’tel’

Email: Can use input type=’email’

 

Use the JavaScript coding to make custom messages.

You can also make custom  messages without JavaScript by using the ARIA approach. However the JavaScript coding is shorter amount of code than ARIA.

 

Blog 22

Today I did not attend class due to trying to get work on my SDV602 milestone 2 done. However after receiving my mark back on Thursday and I queried some of my marks with Todd.

I learned that the use of the case statements in the template is actually code that should be in the controller.

Todd showed me a way to use PHP sub classes to be instanitaited when the templates parent class ViewDisplay is instantiated and so when the Render function in the ViewDisplay parent class is called from the controller all of the code in the appropriate subclass is performed thereby removing the switch statement filing variables in the template depending on what view is requested by the user.

I will go through and implement this new system into my website over the long weekend after my large SYD assignment is submitted.

Blog 21

Today we discussed JQuery. Which is used inside your views (front end).

JQuery is a code library written in JavaScript, and when it first came out it didn’t go into WEB601 as notationally it is quite different to PHP. JQuery introduces another way of doing things.

JQuery and JavaScript however is very common in front end web development. JQuery is based on CSS, in JQuery you express a selection of part of your page, so it has a selector and a action part to specify what you will do in the page.

In the next few weeks we will learn regular expressions, to check a given pattern written in with a form can be checked before handing them to the server.

DOM (Document Object Model)-When web browser loads webpage it stores copy of webpage in computer memory this is called the DOM. This is hierarchical and every page in the website is a node in the DOM. When each webpage is loaded another node is added to the DOM, and each tag in the node is made into a element in the DOM. You can then apply HTML and CSS on the DOM elements. When you write JavaScript you are interacting with the elements in the DOM not the HTML code.

In Facebook when you get a message it goes to header of the DOM and makes a change to show message received symbol.

Inside CSS you can define selectors . (this is a class) or # (this is a id).

Using jQuery is about learning how to use a JQuery library. JQuery lets you use AJAX (Which we will discuss next week).

To use jQuery you must download the library from jQuery.com and then you include it in a tag on your webpage in the <head>, or at the bottom of your code.

One way to think of webpage is hierarchical structure (upside down tree) which is the DOM, it puts your website HTML in this hierarchical structure.

 

DOM.png

(Above image is from https://docs.google.com/presentation/d/14-sThynkGgMrVg-iAgSrpjJbj7WmUAXchuN00NhgkVY/edit#slide=id.g183cb136cc_3_6 accessed on 12/10/2016)

Anytime you want to reference jQuery you use $. There are two ways to open jQuery (jQuery ready):

$(document).ready(function(){ //older way to open jQuery
});

$(document).ready waits for DOM.So JQuery selects, decorates, and enhances the DOM.

Another more popular shorthand alternative is:

$function(){

 

To select a ID you use a # like below:

$(“#panel1”).hide(300);

To select a class you use a . like below:

$(“.panel1”).hide(300);

Below is some of the practice jQuery code I created in today’s class:

$function(){ //More popular way to open JQuery
$(“#panel1”).hide(300); //$(“#panel1”) says JQuery get panel 1 and then hide it for 3 seconds

$(“#panel1”).css({color:’red’,fontweight:’bold’});//Selecting panel 1 then there is a method css which means apply css to panel 1 and make it red this allows you to change the css.
});

$function(){
$(‘#panel1’).on(‘click’, function()){
$(‘#panel1’).slideToggle(200);
});

$(‘#btn1’).on(‘mouseover’, function()){
$(‘#panel1’).fadeout(200);
});
});

To refactor jQuery, you can target by attribute, you can write class name in then data-attribute to identify the tag in the HTML.

$(document).ready(function() {

alert($(‘.celebs’).length + ‘ elements!’);

});

To troubleshoot JQuery you can use console.log(msg);

I then went through the W3Schools tutorial:

http://www.w3schools.com/jquery/jquery_intro.asp

 

 

Blog 20

Today Todd reiterated what was needed for milestone two handin which is due at the start of next term.

But he also showed us the code he had written for making the database, I already had a database procedure code that goes through and drops then creates all the tables. The database I had made which is called Competition_Database is based on the code that Todd had written on the board in previous classes.

However to make sure for troubleshooting purposes later that my database is the same as Todds I went through my database creation procedure and altered it to match what Todd had written.

The majority of the class was Todd helping people if they needed it, I was getting some help from David regarding why I could not display a page after the competition form was submitted which I eventually solved with some help from him.

I believe it a good time to mention I have made some dramatic changes to my Spanish Cooking assignment website by implementing a template view which interacts with the model because the model goes and gets the view content which is specific to each webpage and then the view file path is handed to the template which displays the common features of all webpages as well as the unique webpage content.

This is how dynamic websites are generally developed and it is a more professional methodology than having multiple views each including the same features such as header, navbar and footer.

I will write extensively about how I implemented the template in my milestone two Information Architecture report, adding to the work I had done in milestone one.

Blog 19

Today Todd discussed the Competition form required for milestone two in more detail. He stated that after the user has filled in the form including selected a answer to the dynamically produced competition question and then selected the “Submit” button then a thank you page must appear showing the values that the user entered.

These values need to come from the database rather than being stored as Session variables because if they come from the database it shows we are successfully interacting with the database.

After discussing the competition form in more detail, Todd continued the discussion on  API’s allowing us to log into our website using a Google, Twitter or Instagram login. For me personally I have already got a login for my website working, and am currently working on the competition form and so I am not worried about the login API’s at the moment.

Blog 18

Milestone 2

The work required for milestone 2 is:

  • No form validation just need to submit data to data base and then get it back again using the MVC architecture.
  • The database object class assists model class
  • When competition form opens a competition question and potential answers are pulled out of the database and are displayed
  • When the form submitted goes through controller to model and then stored in database

So how do you know who the user is? When the user enters their email address you have to check if this exists in the user table, if it does not then you must create a user in the database using a insert

  • After submitting the form a thank you form is displayed and the last entry is re-displayed and it selects from the database where the person puts the information in
  • Update information architecture document with the design work you have done designing the competition form and thank you form.

 

Milestone 3:

This is adding a animation advert to the website, and validating the competition form data. This milestone 3 is made up of part 1, part 2 and a documentation aspect.

Documentation: Extend the information architecture document (new design work), as well as talking about everything you have been working on, and how you implemented it.

Part 1: This is part of milestone 3 and is about

  • Add a animation advert to the website
  • Make the advert work
  • Make the website look good and clean

Note: The advert starts when the user browses to the webpage.

  • The advert starts on one side of the webpage and moves to the other side of the webpage.
  • The advert will provide access to the competition entry form

Part 2: This part of milestone 3 is about implementing client side processing. This includes implementing client-side validation of the data collected from a competition form. i.e. check the competition form data and check the all the data meets the following requirements therefore helping the website user to submit a valid form:

  • Classroom name (4 letters text field, 2 capital letters and 2 digits)
  • Student email (a text field, accepts an email address)
  • School name ( text field- a name can have numbers e.g. Todd the 3rd. We will construct a pattern form each field to validate the field)
  • School telephone number (accepts international and national telephone numbers)

Validate the contents of the above fields using regular expressions. For each field you are to also provide a list of example patterns that can be accepted as data.

We will use jQuery in the web browser. jQuery has animations in it.

Once we got into the lecture part of today’s class we talked about OAuth authentication using a API authentication:

An API is something tat allows one price of software talk to another piece of software.

RestAPI (representational state transfer)- Works like a website. Using URL to represent shape of where you are in the application. Like we are doing in the command value in the URL we are using in our web