Back log on the blog front.....

The rest of LAST week in Codeigniter

Wednesday April 20th 

I got most of the functionality working including reading to the database. We were given a check list in class and I checked my list of tasks from the sheet. The difficult part of this project is styling in CSS so I decided to leave it and catch up with my final year project. A large part of creative multimedia programming depends on bringing factors together; the layout (HTML), styles (CSS) , user functionality (JavaScript)  and server side functionality (Codeigniter and php with a connected database). I am starting to see the reason and big picture and how and why all of these factors come into play.

Using Codeigniter as a tool and a platform for a near enough real life project is helping me understand more about the user experience and how this ties in with designing and programming functionality into a project. The user has to be in mind at every step! 

This is what I have achieved in basic HTML and CSS it is responsive so far...

Image 1: Three responsive views of 'Go West' news site featuring day trips in the West of Ireland 

Thursday - Friday was spent on a different project - a different Codeigniter and creative multimedia programming exercise.  More about that later...

The weekend of April 23rd - 24th 

ALL Weekend was spent not trying to get the articles to be updated, deleted and read to the database like I wanted but spent getting everything to look nice! Most of Sunday was spent trying to get a registration form to style. This is what happened: when I fooled around in google inspect - (note I did NOT touch the CSS)...

Problem?

Fix? Copyied & pasted a 'good' login form to a dummy sheet and pasted the 'good' form data part from the messed up one (that I know is being read to the database) and smushing it together again.

Anyway it worked but instead of being overjoyed I was relieved that I don't have to ask another silly question!!!!

Image 2: Two navigation bars - Register User Page 

Image 3: Correct Navigation Bar - Register User Page 

This is making me wonder about this industry as a whole. Little regulation and weird stuff like this that can take hours to fix. Don't get me wrong, the levels of satisfaction I have felt this week are enormous but it is soul destroying when you can't execute any creative multimedia programming techniques that you want to do.

I am saying is it takes one away from other tasks and valuable creative/analytical thinking if you are going around in circles. Turns out I inserted two by accident and I can't seem (by Monday night to get rid of it!) .....

Also from image 3, the container id that styles the registration form in the above fields, in the Register User page seems to be semi-working today - another weird CSS thing, and horay another thing that is 'less mess' to fix. Below is the 'good' login page with all ids' being read into Codeigniter from linked assets CSS file. 

Image 4: Good log in form reading the CSS to be centered & behaving well 

 What I learned this week:

- That I can easily link & write views in codeigniter!

 - I am using the inspect element in Google & it is saving me so much !!! Thank you   Google! 

- I learned to (finally) tab my code correctly so that it mimics the natural form of the document how it is being read by the browser, whats more I understand why. A small step but enlightening.

Messy weekend programming issues continue....

I had a messy moment linking files and trying to implement the ‘alt’ attribute to an image in Codeigniter. I am still unclear which of the below is correct to use I am going to ask a tutor tomorrow I assume the latter, with the alt tags. Feel free to comment.... 

No alt tags:

 <?php echo "<img alt=\"Galway Lake with Mountains\" src=\"$img_base/assets/images/lake.jpg\" />"; ?>

Alt tags:

<img src="<?php echo $img_base . "/assets/images/skellig3.jpg"?>" alt="Skellig Bee Hive Hut" />

I am also getting red errors on inputs in a form and I don't know why but I have a feeling its because I don't understand enough about forms and buttons and taking in data from the user. I need to go back and learn about forms and buttons. We are designers, our job is to make a world with richer user experiences and lets face its all about the user in creative multimedia programming! 

Image 5: From Input Codeigniter and errors appearing (again!) 

Not fluent in creative multimedia programming!!!!

It has been a crazy week trying to get creative ideas to execute in via creative multimedia programming. I am listening to rubbish house music partially to relax and partially because this week was spent in a lot of silence!  However, I will start the blog by saying HOW MUCH I have learned about codeigniter, its framework, functions and the general flow of data. My last post dealt with database structure and getting basic inputs from the view to controller to model and back to the controller to be sent lastly to the view.

Crawl before the wobbly walk….

I had to back track a little and last weekend I spent Sunday, all day Sunday doing a tutorial. I spent the day getting php errors in the browser but this exercise (creating a table of authors on the database) to render an updatable view to the browser was invaluable in showing me the creation of a variable and how to retrieve the data. At one point I was trying to pass a variable into itself without really understanding why. Then with help, ( phone a friend time) I had a chat and then knew I was trying to pass an array of data to the $variable. Wow a revelation. What has this to do with creative multimedia programming? Turns out everything – I can’t make anything that is dynamic, creative or functional for an end user without this skill set.

The idea here is to take another project designed to be responsive and bring it into Codeiginiter to have more functionality for the user.

Responsive GoWest News website: three views in various screen states. 

Monday April 18th 

Stepping up a bit I took our tutors project from class and had a few good reads of it to see how the ‘Local Notice’ project works. There is a lot going on in the project and covers all parts of the CRUD functions. I spoke to a few class mates, the previous Friday (April 15^th) and ‘they’, the classmates, said it was  a synch to shoe horn this project into our News project. I was skeptical.

After getting little understanding from class on Monday and no further down the line of understanding I just started studying, again and going through the basic tutorial from Sunday, again.

Tuesday April 19th 

I was basically at this again all day. There was talk of the FYP (Curious Room) going into codeigniter and I got the energy from I don’t know where to try the news project first to see if I could get something working in codeigniter that actually pertained to course work. Enough messing about!

In the evening from about 7 onwards I started on the News Articles assignment, this assignment is part of two modules, advanced programming for the web and emerging web technologies. I could not get anything to work. Then after a few hours rest it dawned on me that my fields in the data base have to match every query in the PHP project exactly. I got out of bed and took a fresh file and started using the find and replace tool again, page by page, function by function. There were 17 I think in all.

 Lesson learned here: (since the previous Friday April 15^th) I was trying to use the editor Netbeans but on a personal note brackets seems to suit me, a beginner in this creative multimedia programming gig a lot better. I got it working in under an hour and just thought it cannot be true. So I went to bed and looked at it on Wednesday.

There were still a lot of error messages and glitch things going on by my understanding of tracking them down is getting better, every day by reading the messages. What I learned from this project was where to find files from the controller and how the flow of information is passed from the view to the controller to the model and back to the controller again before being sent lastly with a response, an action to the user. 

I spent around 4 hours adding some navigation bars to three pages to my FYP and frankly by Saturday I could see that they were not useful, it was a lesson learned in the world of creative multimedia programming but a good lesson!

It has been a bit ridicilous trying to get two projects going in code igniter and not actually knowing: 

a) how to tackle errors 

b) how to write functions that do something unique to that project.

Consensus: A good week in exercises over all. 

Curious Room Databases Part Two

Image 1: phpMyAdmin database showing tables

So to follow on with this ‘little’ database story, this doesn’t happen magically. I wish it did. In another module we are learning how to use the framework Codeigniter with php and the aforementioned use of databases and tables to allow basic functionality to get front end project (allowing user to meditated with a chosen avatar and other users with their avatars) and get it to pass data back and forth to the backend; the database. 

My goal is to complete the steps of CRUD. Create, read, update and delete So far using a database from class called users I have accomplished some basic programming steps. The first thing that had to be done was to create a database, in this case users. It is located in a folder called NoticeCI that exists in a Codeigniter folder. This is a list of the screen shots of what I have working:

/User/getUser

/User/User

Link: ‘edit update details’;  User\getUpdateDetails

/User/saveUserDetails

Image 2: User/getUser  Image 3: User/User Image 4: User/getUpdateDetails Image 5: saveUserDetails Image 6: saveUserDetails in database (row one) It says hi Fina in Image 7 and FirstName is Fina above

 The last one on the list is giving me a lot of trouble as I cannot save the new user details to the database. I was able to do so on 14^th March in class but not now. My databases should refresh to show the new details but it is not. I have looked though the notes and the function in the saveUserDetails but I am missing something I have checked the links also in the first file called userHomePage which was userhomepage. I have gone back to the User\User folder to find any errors below or the subsequent pages the path of the framework leads to but I cannot find the issue. On my localhost nothing is happening. No even an error!!!

Here is some of the code used for programming the above : 

public function saveUserDetails($UserID){

//prepare an array of user info submittd via the POST

  $user = array(

"UserName"=> $_POST["UserName"],

"Password"=> $_POST["Password"],

"FirstName"=> $_POST["FirstName"],

"SurName"=> $_POST["SurName"],

"Mobile"=> $_POST["Mobile"],

"AddressLine1"=> $_POST["AddressLine1"],

"AddressLine2"=> $_POST["AddressLine2"],

"AddressLine3"=> $_POST["AddressLine3"],

"Email"=> $_POST["Email"],

"UserID"=> $UserID,

);

//call the function in the model to do the update and get back a boolean flag

//$flag hold tru/false value depending on whether the update was successful or not

$flag = $this->User_Model->updateUser($user);

//pass $flag to function to determine whether success/failure page should be displayed

if($flag){

//set user details in $data - this will be need inthe userhomepage

$data['User'] = $user;

$this->load->view("User/userHomePage",$data);

}else{

    $data['msg'] = "error on update to user details";

    $this->load->view('mgspage', $data);

}//end function

}

}

Okay so straight after this at exactly 5.17pm on 9^th April it worked! I decided to write about what was happening to see if it would help with a) frustration and b) identify any new patterns for me to see and then I then I just decided to go back on the getUpdateDetails page, refresh, input new data and presto. It updated the database. Wow. It feels great but like any decent creative multimedia programmer I will just be looking now to do the delete functionality as I am a full WEEK behind in class. 

What did I do? It was a small typing error – the file was called getUpdateDetails not getupdatedetails as it should have been. Oh my. Who said camel casing for programming was good? Moving forward I think it will be all lower case when I can when I am programming because let’s face it trying to practice creative multimedia programming is hard to begin and then trying to implement creative concepts and execute them over a variety of platforms is another!!!  

I went for a coffee today to take a break from programming php and it taught me two things:

1.       My FYP is useful – taking breaks & doing nothing are good for creativity! Promoting this value is viable in demanding situations.

2.       Whilst on that coffee break an hour ago I told my friend’s boyfriend about taking a WEEK to find an error and he said, I quote:  ‘Now you are programming’. So in a day to find two errors myself is a happy feeling.

The next step will be to create and implement the VanilllaCI around my project Curious Room but I have to go back first and fix the actual look and basic functionality of my project before I attempt to change them into php pages. In truth I feel a bit lost about the next stem and don’t know how to do it – I have just spoken briefly with someone in the learning center about how it ‘happens’.  Apparently it’s as simple as saving the dot html extensions as dot phps… ? Hmm.  

To finish now this is working:

User/saveUserDetails

and now I just need to get a message to the home page to say the details have been updated……

I don't know how at this point how much I will be doing with creative multimedia programming but I will try my best! 

How it works! Curious Room Database

Image 1: Relationship between tables: Curious Room 

How the project works:

There are many employees in a company and employees can sign up for an account. In this account ‘Curious Room’ the employee is entitled to five tokens a month. Each token allows an employee to have a half hour of free time to engage in a relaxing activity. Therefore each employee who uses the system can have two and a half hours to relax during work hours in any given month. Employees can only use up to two tokens per week so they have at least one session a week and on any week in the month they can choose to ‘spend’ their fifth token.

Employees can only use the system by choosing an avatar. The rationale behind this is that they are abstracting both themselves and the activity. Hopefully it will encourage new interactions within the company and allow a degree of chance whilst using the system. In other words there is less of a chance of two buddies pairing off each week for the same session. The idea is that one avatar will not know who they will be engaging in the session with.  Each meditation session lasts 17 minutes with 13 minutes to login and get to the session and a few minutes to give feedback at the end.   

Step 1: User logs in and has an avatar associated with their account.

Step 2: User can change their avatar to a new one for a session.

Step 3: User can request to meditate with another person.

Step 4: User makes a request to see if there is a)a person to engage in a session with and b) to see if there is a room free for the meditation session.

When this was first designed at the end of February it was more complicated but after further research two factors became an issue.

1.       That a session less than a half hour is just not realistic in real terms to relax

2.       That further down the project road, after testing matching people to different times might be an option.

For now the cleanest option to develop the project is to refresh the rooms every half hour and if an avatar requests a session with another if they are free then this is a match for a session. The user then will have approximately 3 minutes to go to a room to begin the meditation. Once the user commits to a meditation session their token will be used.

Token/Session Design Issue: 

Does the user table with the token get updated when both match (room & other avatar) or when the user reaches the room and places their token in the cradle? For this project it will run straight away and update on the database. For future when the person takes their token to the room and places the physical token (with an rfid reader tag inside) the cradle would then talk to the data base and update the database to reflect the token being subtracted from the users account.  

Image 2: Visual Representation of a physical token user would use to start session. Token would be embedded with RFID reader chip to communicate with database. 

The High View:

There are five tables in my database for my final year project. These tables are:

-          Avatar

-          Employee

-          Employee has session

-          Session

-          Room

The avatars table is a one to many relationship with employees so we have avatars for many employees. Employees then have many meditation sessions but linking a ‘many’ employees to a ‘many’ sessions table would be illegal in a mySql database, it is not possible. We have to break up this relationship and make it more manageable. This is done by making a ‘link’ table. So as you can see in the diagram one employee has many sessions and from the ‘Employee has session’ table we have a relationship – employee has many sessions with a session table (single). That sounds funny to clarify employee has many sessions. One session has many ‘employee has sessions’. 

The curious room table many sessions take place in one room at different times.

To look at the tables more closely the first table avatar has 3 rows:

Table Avatar

Id – (PK) unique, auto incrementing 1,2, 3 etc.

FileName, (associated with the jpg corresponding to the avatar that the employee will choose)

Name (ie name of avatar CalmStar)

Employee Table

(Fields right now just two users were inputted):

Employee ID (PK),   (right now just 1 & 2 employees have been submitted for this project.)

FirstName

SurName

UserName

Password,

Tokens

Email: fionakiely1@hotmail.com,

Avatar: 1,2

Last Token used on: date and time ( this is set to go back to reset on the 1^st of every month)

Employee_has_session table (both fields in this table make up the primary key so it is a composite key because an employee has to have a session for the event to occur)

Employee (FK, composite Key)

Session (FK, composite Key)

Room table (the room table has an id because if the system was developed there could be more than one room for different activities i.e meditation and yoga so each room could be identified individually.

Id (PK).

Number

Name of employee

Session Table

SessionID (PK)

Room

TimeStamp

Duration

Rating

This breakdown should give a clearer view of how the system works for users and for management of the database. In the next post I will talk about how this will move into Codeigniter as a full project. 

Codeigniter and php - How does one progress in creative multimedia programming?

A large part of the creative multimedia programming experience and challenge is one whopper module - php. A large part of our second semester course work is to get really familiar and good at using a PHP framework such as Codeigniter, a framework used for building dynamic websites and providing manageable structure. The MVC framework stands for model, view, controller. The views are separated from the contoller which are separated from the model. The model part of the MVC holds the database and sensitive information regarding the users details. The users details are then hidden from just anyone on the outside so there is a layer (controller) to go through. The controller gives and takes information and passes it back and forth to the user (view).  This is an over simplified explanation. The main benefits of using the Codeiginiter framework are:

- RAD build rapid applications
- less repetition of code
- free
- lightweight and provides a lot of libraries for functionality to allow one to use code that is already there (less programming)
- Codeigniter is a well documented framework
- large community using Codeigniter
- form and data validation
- no configuration
- provides security and xss filtering.
- custom routing

The Codeigniter framework is one of many, others being: onextrapixel and kohana.

So far the small in class project seems to be a challenge and even though a small project was working 2 weeks ago it is not working now!!!The idea is split our final year project into separate areas for login and registeration and other functionality that should occur. Last week (our week off for Easter break) was spent debugging the project from class. I only go so far. Then this week I came into class and the loginUserForm file was working and now it is not! There was an issue alright with the notes from the php programming class - uppercase and lowercase objects and methods being called and this was confusing. There were also about 5 key errors in the code and this is hard as I am just a beginner programmer in the creative multimedia programming game. Prior to this my projects were built using tiny bits of code being strung together from simpler languages.

I think my main error occured two days ago have to go through all the function in the user.php page to to see that the pages name ie user.php matches what it is being called for through functions. This is a tedious task but hopefully I will start to fix on my own.

Image 1: 404 Error userLoginPage

One key issue that I am trying to address but my class seem to know little is the / hard escape character - where does it go? It depends, right? Standard answer. Covers everything. My understanding is that it should go where it need to to call up the function as the top, or MAIN controller at the top is calling the base page and functions after that being called and calling another page need the hard escape character some example code here

public function handleLogon(){
$this->load->view('User/UserLoginForm');
}
public function RegisterUser(){
//prepare an array o f User info submited via the POST
//left db right same as form
$user = array(
'UserName' => $_POST['UserName'],
'Password' => $_POST['Password'],
'FirstName' => $_POST['FirstName'],
'SurName' => $_POST['SurName'],
'Mobile' => $_POST['Mobile'],
'AddressLine1' => $_POST['AddressLine1'],
'AddressLine2' => $_POST['AddressLine2'],
'AddressLine3' => $_POST['AddressLine3'],
'Email' => $_POST['Email'],
'UserID' => $_POST['UserID'],
);
//shows what gets sent as an array
//var_dump($user);

 So in the above the UserLoginForm does not need the / as I understand it but in other parts of the MVC it does as in this below does: 

this getuser.php page needs the hard escape  to call up the next page which is RegisterUser/

<!DOCTYPE html>

<?php

$this->load->helper('url');

$base = base_url(). index_page();  

?>

<html>

<head></head>

<body>

<form id="form1" name="form1" method="POST" action="<?php echo "$base/User/RegisterUser/"; ?>">

UserName <input type = "text" name = "UserName"><br>

Password <input type = "text" name = "Password"><br>

Firstname <input type = "text" name = "FirstName"><br>

SurName <input type = "text" name = "SurName"><br>

Mobile <input type = "text" name = "Mobile"><br> 

Address1 <input type = "text" name = "AddressLine1"><br>

Address2 <input type = "text" name = "AddressLine2"><br>

Address3 <input type = "text" name = "AddressLine3"><br>

Email <input type = "text" name = "Email"><br>

<input type = "submit" value="submit">

</form>

</body>

</html>

I am trying to debug and think like a programmer  but the creative multimedia programming part is definitely out for now until I get this basic functionality working! So to echo the sentiment in the title of my blog 'Codeigniter and php - How do progress in creative multimedia programming?' i don't know but I know I just have to go back over every main file, every function and check! If anyone reading this (in the world) wants to help me I have team viewer and a phone! My email is: fionakiely1@hotmail.com :)

Image 2: Typical 'Undefined Index' error

Image 3: Undefined index for user details code

Mobile Responsive Web Development Multimedia Project

 Image 1: Home Page  'Go West' news website

A large part of the course work in the HDip in Creative Multimedia one project was to explore techniques to make websites responsive and mobile ready. In semester one we were taught the basics of designing websites and the correct usage of syntax and mark up. Using forms and classes such as pseudo classes (ie for use in hover states) were also implemented in some simple web layouts. Semester two is focused on how to make website responsive by exploring different techniques to execute designs by manipulating HTML 5 and CSS3 to render pages in different views. Some techniques we have explored include media queries, the flexbox model, fluid grid layout and bootstrap. The first assignment was to build fully a responsive website and design a news type website. I chose to design a website highlighting trips on the Wild Atlantic Way as an additional source of material for the tourist or native traveler to the west of Ireland. It was exciting to dig out photos and video from last year and develop stories that would interest a user.

 Image 2: Home Page  'Go West' Iveragh Penninsula Page

For this assignment a lot of research went into how news type websites are built and also how travel bloggers approach the design and content delivery of their sites. I wanted a site that would hold the users attention and offer unique photographs. The website was kept simple and to echo the sentiment of reading a newspaper. The inspiration for the site layout was the simplicity of the New York Times and the BBC news websites after the article is clicked into, 

Image 3: 'Go West' zoomed out footer area 

The assignment was a challenge and it works responsively. This was done with media queries. Images were embedded in CSS as well as embedding them (traditional method) in HTML. A form was also created and froms are always a challenge especially when changing viewing widths on screen. From articles I have read SASS is a good tool for developing for mobile but there is no time this semester to explore this option. 

Image 4: 'Go West' news site zoomed in footer area  

Some time was spent using bootstrap to see if it was a good option for this project but this was ruled out early as my preference was to learn about semantic mark up well and this using good HTML5 was interesting and made me realize about more serious issues of web development such as usability and legal tag usage.  

As you can see from the designs all of the photography and advertising designs are original as well as the text. It is full filling to produce creative projects that are generated by my own hand. As part of preliminary research eight Americans and one Canadian were enlisted to fill out questionnaires to see if the content was viable as a project and it was a difficult task to get people to really fill them out and be honest. It was interesting how the opinions swung! Persons from other countries were chosen as they would be visitors and using the site to research their trips to the west of Ireland. 

The next step is split up the pages and to implement additional functionality by programming parts of the html with embedded php to be readable and editable using the framework CodeIgniter. The next step will involve using functions and calling them up through the view first, to the controller and finally the model and passing the data back to the user. This is sure to be a programming challenge from finding errors and bugs to hopefully getting the MVC working. It will be exciting to see the website come to life and loose its static qualities!

Image 5: 'Go West' news site mobile media query of footer area and navigation
Note: images are responsive 

Image 6: 'Go West' Mobile ready navigation width approx: 200 pixels wide

HDip in Creative Multimedia Programming

The year in some detail....

Creative Multimedia Programming is made of many parts. The Hdip in Creative Multimedia Programming offered in LIT is broken up into three parts. The first two semesters revolve around learning new technologies, applying them in the lab and producing projects that incorporate the different learning modules. The third and final part is spent on work placement to gain experience in mostly the front end development side of web development. Semester one of the Creative Multimedia Programming course was spent learning evolving web technologies including Java Script, HTML 5 and CSS3. Using MySQL and data base creation and management was another module that introduced us to the fundamentals of this subject for application in project work for semester two.

Other modules veered more on the creative side of multimedia including, 3ds Max. For this module we produced some art work and a small animation at the end. 3ds Max was taught in detail and we explored how to make and manipulate objects, apply materials to objects, adjust lighting and how the lighting is generated (ie raytracing). At the end of the module my understanding of 3ds Max is solid. However, to maintain this understanding I need to practice.

Fruit Bowl drawn in 3ds Max 

Another creative and design oriented module offered was Interaction Design which included exploring design elements and principles and where to apply them. Interaction Design made me realise how important this subject is regarding user face design and designing for users of multimedia products. This module also introduced drawing tools such as Photoshop and Illustrator. The software we used in this module was IntuiFace, useful for putting together interactive mock-ups and presentations. IntuiFace also for designing for touch screens so this was another facet to think of whilst designing the project in this module. Interestingly enough when I went to purchase a new pc I was shocked that touch screens are now so prevalent. Only a year ago it would have been unusual to see one in an average electronics shop.

 Semester Two 

The second part of the course in Creative Multimedia programming includes modules to expand understanding of web based applications. In one module we have explored evolving web technologies. It starts to get exciting when any knowledge from semester one is carried over and layered on top of new methods for producing web based media products. One developed project was a responsive web site. It was exciting to see the results of different approaches including bootstrap, media queries and flexbox. The knowledge from this module is helping in the production of the final year project which has to include all elements of creative multimedia programming.

Another module we are having a lot of fun with is advanced web programming. In this we are learning how to use php, the Codeignitor framework and to apply our understanding of the MVC framework in our final year projects. So far it is trying! The purpose for this module is to get our websites to read and update databases and take the development side of programming a web site a step further.

The design and creative aspect of the course is further expanded in the modules Interaction Interface Design whereby we had to produce a design for a mobile app. Our goal was to explore a set of use cases to understand the intricacies of the creative design step by step so in-turn, it helps the production of a project by showing in written and sketched form a detailed account for the programmers when it gets to that stage in the project. The use cases also included error handling functionality in the design. This project was great as it dealt only with mobile usability and got me thinking about programming the mobile part of the final year project. 

A low-fi sketch for a mobile app, part of project Interaction Interface Design 

A low-fi sketch for the mobile part of final year project 

Finally Interaction Interface Design includes producing an interactive portfolio pieces as a way to show potential employers what is produced after learning and applying principles of creative multimedia programming.