Week Seventeen Journal – Tuesday 20 November

Project Overview

The last thing needed for my website to be completed is an individual comment section for each guide / tutorial. So users can share and talk about the guide. Alongside this, i also need a tracking system, to track the users progress on guides when they are signed in.

Comment Section

To create a seem-less comment section that gets updates in real time, I am going to be using Ajax. Ajax stands for asynchronous java script and XML, and it is used to send and retrieve data asynchronously with the server. By using this technique, the comment section will update asynchronously from the rest the page, so the page wont have to reload each time a comment is sent or added.

CREATE TABLE tblComment(
com_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
com_account_id INT,
com_guide VARCHAR(255),
com_comment VARCHAR(255),
com_timestamp TIMESTAMP,
FOREIGN KEY (com_account_id)
REFERENCES tblaccount(acc_id)
);

Above is the database that holds all the comments. It contains a user ID, the guide it is from, timestamp of the comment and what the user has said.

Tracking system

The system I created is quite complicated and has multiple levels of tracking. For general and student accounts, you are able to view the progress of any guide you are in the progress of and continue. For teachers, they have another level, all students they are looking after will also appear here, to view the progression of the students.

 

Week Fourteen Journal – Wednesday 31 October

Project Overview

With all my other subjects out of the way for now, i have been focusing on the final milestone. Milestone 3 is all about finishing up the website’s content, add in animation and create an input validation, so users are not able to input information that does not match criteria.

Input Validation

For input validation i am using a technique called regular expression. Regular expression is a formula of characters that the user’s input is run against. If the users input does not match the formula, it will stop. currently I have three formula’s set up through out my site

Formula = [A-Z] {2} [0-9]{2}
Explain = This formula asks for two characters that are capital and from A-Z, followed by two characters that are 0-9

Formula = [0-9]{7,}
Explain = Asks for a minimum of 7 characters that are 0-9

Formula = .{8,}
Explain =  can be any character but a minimum of 8

Animation

For milestone three we need to have a pop up ad to display the new competition we are holding.

I wanted mine to still match the style and feel of the professional website, so because of this i went with simplistic and smooth animation that slowly becomes less transparent as animation goes.

I used a J Query library to gain access to animation commands.

The animation process when page starts:

• A small bar grows from left to right, covering the whole width of the screen
• bar grows to cover the whole screen
• When the bar hits the bottom of the screen it does a slight bounce
• content fades in

Exit:

Does animation in reverse order however leaves to the right.

Week Nine Journal – Wednesday 26 September

Project Overview

It has been another two weeks since I have updated and documented my website. Since then i have actually accomplished quite a lot. I have further set up a mySQL database using workbench and connected it to the website. I prefer to use workbench than shell as i am more familiar with the layout. Currently as of writing, I have three tables in this database:

• Competition Table
  • ID
  • Question ID
  • Answer picked
  • Classroom
  • School
  • Student Email
  • School Contact Details
• Question Table
  • ID
  • Question
  • Option One
  • Option Two
  • Option Three
  • Answer
• Account Table
  • ID
  • Email
  • Password
  • Type
  • Code

I have structured the competition so that it will randomly pick one of the questions from the question table. Below is the MySQL DDL Code:

DROP DATABASE dbFolded;
CREATE DATABASE dbFolded;

USE dbFolded;

DROP TABLE tblQuestion;
DROP TABLE tblComp;
DROP TABLE tblAccount;

CREATE TABLE tblAccount(
acc_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
acc_email VARCHAR(255),
acc_password VARCHAR(255),
acc_type VARCHAR(10),
acc_code VARCHAR(255));

CREATE TABLE tblQuestion(
que_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
que_question VARCHAR(255),
que_option_one VARCHAR(255),
que_option_two VARCHAR(255),
que_option_three VARCHAR(255),
que_answer VARCHAR(255));

CREATE TABLE tblComp(
com_entry_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
com_question_id int,
com_answer VARCHAR(10),
com_classroom VARCHAR(255),
com_school VARCHAR(255),
com_student_email VARCHAR(255),
com_school_contact VARCHAR(255),
FOREIGN KEY (com_question_id)
REFERENCES tblquestion(que_id));
INSERT INTO tblQuestion(que_question, que_option_one, que_option_two, que_option_three, que_answer)
VALUES
('Where did Origami originate from','Japan','Canada','India','Japan'),
('What is the most popular animal origami model','Cat','Frog','Swan','Swan'),
('What does "Ori" mean in the word origami?','Folding','Cutting','Paper','Paper');

From here, I have created a model that handles all storing of information and then sending and reviving information from the database. As of writing, I have three DML code written inside the website and then sends it to the database:

• Insert Values – Collects all of the information that had been stored by the form and inserting it into the competition table
• Select ID – Collects all the information that has been stored by the form and uses it to find the entry ID and Question from the ID, to be displayed. I decided to do it like this instead of using the retrieve most recent ID as i believe it to be bad practice as within that time of inserting and selecting, another user could of sent their information in. thus giving two users the same ID.
• Select Question – Before asking the database to get a question, i have a random number generated, this number will be the ID of the question that will be picked. After the data has been retrieved, the information is stored locally.

Now to see it all in action.

 

Week Seven Journal – Friday 14 September

Class Overview

In today’s class we begun the discussion on forms within html. The main purpose of forms within html is to allow the user to enter data that is sent to a server for processing and storing. Using a form will be a great way of setting up for milestone two. This is because we need to create a way for student’s to enter in details for a competition. After messing around with how forms work and researching different input types, this is a rough start to what i want my competitions page to look like

This isn’t final as colors and other CSS aspects haven’t been implement yet, along with competition details.

When researching how forms work. They have many different variations and types, so it took awhile to find what i was wanting. Below is the html code for my form, it also includes bootstrap aspects as well.

Week Seven Journal – Wednesday 12 September

Last Week Overview

I was unable to blog about last week(week six), however we just reviewed what was necessary for milestone two. Milestone two is the beginning of implementing a database to the website via the use of creating a competition for users to enter into. I should be more than capable of doing this milestone as i already have a good understanding with mySQL from DAT602. DAT602 was implementing mySQL within an application and this is the same concept, but with a website.

The rest of the week was how to use mySQL via Xammp as not all students have used mySQL before.

Class Overview

Today’s class was more talk about database integration, this time more about how does it interact with our MVC model and php. Just like DAT602, this is same stuff however within php and not C#, so not much new to reflect on.

Project Overview

My results for Milestone One have returned, i got 38/44(86%), which is a A+ so i am happy with that result. Since the last journal, i have begun to implement and create my CSS.

Now that i have an understanding of what milestone two is requiring, i have begun to set up a database via xammp command line. As of writing, i have this table.

tblComp
entry_no INT PRIMARY KEY AUTO_INCREMENT NOT NULL,
first_name VARCHAR(255),
last_name VARCHAR(255),
school_name VARCHAR(255),
email VARCHAR(255),
phone VARCHAR(255)

 

 

Week Six Journal – 29 August 2018

Project Overview

It has been two weeks since I updated this journal, which is a bad thing as I have been none stop working on milestone one for this subject. As of writing this, I am only needing to finish Metaphor Exploration and a write up of the content. I looked at the milestone requirements and the marks these gave, I decided to leave it till after i have finished my coded framework. (4ish marks compared to the 24 marks). So with my report done. all of this week has been focusing on creating a MVC website.

File Structure:

• CSS
  • nav.css
  • breakpoint.css
  • bootstrap(online)
• Controller
  • FrogController.php
  • ImageController.php
  • NavController.php
  • PlaneController.php
  • SwanController.php
• Images
  • FoldedLogo.png
• Model
  • NavModel.php
  • FrogModel.php*
  • PlaneModel.php*
  • SwanModel.php*
• Views
  • FrogDetails
    • Guide1.php
    • Guide2.php
    • Guide3.php
  • PlaneDetails
    • Guide1.php
    • Guide2.php
    • Guide3.php
  • SwanDetails
    • Guide1.php
    • Guide2.php
    • Guide3.php
  • FooterView.php
  • FrogView.php
  • GuidesView.php
  • HomeView.php
  • ImagesView.php
  • LoginView.php
  • NavView.php
  • PlaneView.php
  • ProfileView.php
  • SignupView.php
  • SwanView.php
  • UploadView.php

* Within the model section, i feel like the different guide models, could be merged into one “Guide Model”, however for time and simplicity, i created three separate ones, this version, has not been refactored yet.

As of writing, currently the site is able to navigate to all global level navigation views and each of the guides, will save the users progress, locally while the user is active on the site. so if they leave it will reset.

Week Four Journal – Wednesday 15 August

Class overview

So far within this subject, I have been falling a bit behind compared to other subjects, mainly within the code, not the report aspect. However with this class I was able to get some php experience and with my existing skills of code inspection, i was able to pick up how php operates and works within the html and website environment.

Today’s lesson was all about controlling states within web servers, because websites don’t actually store any information about the user, yet how does it know if you are logged in, what pages you have been too, or selections you have made? The way I was able to do this, was via the use of Sessions. Session is used when the website will be storing data to an external server.

By the end of the exercise, i was able to enter a name into an input form on one page, which saved it under the session. Then i was able to display it on another page, and delete it via a button form.

I did not get around to trying to implement cookies, which are just like sessions, however they are stored locally on the clients device.

 

Week One – Friday 27 July

Class Overview

In today’s class we just went back over the basics of web development to refresh how html and css works. After that, we went on to learn about PHP

PHP

What is the History of PHP?

PHP wasn’t originally meant to be what it has become today. In 1994, Rasmus Lerdorf, who was just a database orientated programmer wrote a few programs within C for his personal website. He created these programs as means of helping bridge the communication gap between databases and website/web form and was never meant to become a programming language, however over the development cycle, his ideology was just to “keep adding the next logical step” and by june 8 1995, PHP/F1 was officially released to the world.

As a result of PHP not being designed as a language from the beginning, the original version had inconsistency and syntax error throughout the code, because of this, Lerdorf began to form a development team to help him expand and improve PHP to what we have today and as of writing this, PHP is up to version 7.2.

What does PHP do?

The PHP we use today, the main purpose is a programing language for server side development within websites.

Week One – Wednesday 25 July

Class Overview

Today’s class was just an overview of the whole course, what was expected from the students and what software was needed. We needed to install xampp which was a completely new software to me, so from some research, I was able to find out that.

XAMPP

The purpose of using XAMPP is it is a free to use web developing package. Each letter that makes up XAMMP are different components/ services that it provides

• X – (Cross Platform) Allows development on all PC based operating systems
• A – (Apache) Is a web server for hosting websites
• M – (MariaDB) A database management system
• P – (PHP) Server side scripting language
• P – (PERL) real time programming language

By using XAMPP, we are able to create locally hosted websites for testing and development before hosting the website externally.

Information Architecture

During this course, we will be using Information Architecture analysis to identify and understand website development, but firstly, what is information architecture?  Todd gave us a really good article about Information Architecture which is worth a read and i was able to find a informative guide detailing what it is, methodologies used, tasks and other information about information architecture.

So in simple terms, information architecture analysis is the process of defining the structure / solution without the need of considering systems or other aspects. This process would fall under the analysis phase of SDLC as it focuses on information and users, which allows for the creation of site maps, hierarchies, categories, navigation, metadata, etc. All of these components are needed for any website and said components don’t need the layout, colors or other user interface features.

Project Brief

As of writing this, my original concept for my informative / educational website was Teaching secondary school students typing skills. My thought process behind this is a set of typing tests would be easy to monitor and give feedback on, without being too time demanding by myself with the other classes I also have this semester. However, advised by my tutor i should do a different or more in depth concept, so my second idea would be an origami lesson website, with increasing in difficulty as the course went on.

Typing Brief

As this is targeted at students, i am wanting to have two types of account types set up for users, one for students/kids and the other for parents/teachers, this is so teachers will be able to track the students progress, skill level and if they may need help. The website will have a minimum of six set pages, Home page, login, profile and three tutorial pages with different difficulties.

User Interface

I am currently unsure of the User Interface layout as of writing.

Origami Brief

This site will also include the mentioned above dual login system and overall informational architecture, however, i think adding in a social media styled page for users to post their finished creating would be a good addition and depending on time, a forum styled page for tutorials from the userbase

User Interface

The interface will be more abstract, with minimalist / pastel colors that fall inline with origami paper. The layout and buttons will look like folded paper.