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!) 

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! 

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