Digital Media – Speakers Corner

Sending user data

David Turnbull / March 6, 2017March 6, 2017

So I’ve worked out how comunication between the front and back end will work, which I think is great progress considering I had never touched javascript before starting this project.
Here’s the code I learnt and annotated, it is part of the register function after the username and password are created in the database:

            .then(function(regUser) { //Firebase returns information which we pass into a variable called reg user
           var regRef = ref.child(‘users’)// creates a variable called regRef, it uses the ref variable to link to the database and records data into firebase, .child creates a sub-directory called users.
                .child(regUser.uid).set({ //creates a sub-directory named the same as the user ID, pulled from regUser.uid
                   date: firebase.database.ServerValue.TIMESTAMP, //pulls the time from the server, more precise than getting the javascript date
                   regUser: regUser.uid,
                   firstname: user.firstname,
                   lastname: user.lastname,
                   email: user.email
});

As a side note, the register page is styled from a sample CSS file, the starter files for the lynda tutorial I’m following. It is not the sites design.

Success!

David Turnbull / March 6, 2017

This is a screenshot of the firebase site for speakers corner, you can see a user in there from where I have successfully registered a user using my code.

This is of course following a tutorial on Lynda.com, however I think following it has given me a firm understanding of how I can use Angular for this project.

‘Authentication’

David Turnbull / March 6, 2017March 6, 2017

I’ve managed to add authentication with the help of a Lynda tutorial, I did run into some troubles with the script:

My Code

myApp.controller('RegistrationController', 
  ['$scope', 'Authentication', 
  function($scope, 'Authentication') {

  $scope.login = function() { //calls the login function from login.html
    Authentication.login($scope.user);
  };

  $scope.register = function() {
    Authentication.register($scope.user);
  };

}]);

Turns out i used some ‘ ‘s when I shouldn’t have, but it took me more time than I’d like to admit to find.

How I will structure the back end

David Turnbull / March 4, 2017

I’m getting ahead of myself, but I know now how I’ll be passing information to and from the server as long as there is no better way. I’ll be storing all open letters in an array on the firebase server, I suppose it will be an array of arrays so I can store the suitable information for each one (user, time, content, etc..). Then using a tutorial like this one I wll have a form submission page with authentication checks that can upload forms to the array.

The homepage will download the arrays through an angular application, hopefully I’ll be able to sort catagorisation and searches later.

Making sense of Angular JS

David Turnbull / March 4, 2017

After a week or so of playing around with angular, watching a lynda tutorial on it, I’ve made sense of the syntax and terms and have been creating an authentication application with a lynda tutorial. Here are some notes:

Lynda Notes

Add angular with:

<html lang=”en” ng-app=”myApp”>

    <script src=”js/lib/angular.min.js”></script>
    <script src=”js/lib/angular-route.min.js”></script>
    <script src=”js/lib/angular-animate.min.js”></script>

The rest of the applications are imported automatically.

MVC Architecture
M – Model
V – view
C – Controller

The application is split into modules, modules are for different functionality.

Routes are ways to split up your applications to different pieces, sort of like subdomains such as google images instead of google, the angular.route.min.js needs to be called or it wont work.

Instead of writing the directve:
<main class=”cf” ng-controller=”appController”>
Write:
<main class=”cf” ng-view>
To direct to the routing library, ng-view is used by the routing mechanism.

You must add the dependancies for routing:
var myApp = angular.module(‘myApp’, [‘ngRoute’]);
Dependancies in the [ ]

Injecting CSS with Angular

Angular creates classes, they can be seen via rightclick – inspect element, and these classes can be used in the CSS file to create responsive design.

in inspect element:
<input ……class=”ng-pristine ng-valid-email ng-invalid ng-invalid-required ng-touched”

Inserted into CSS:
input.ng-invalid.ng-touched {
border: 1px solid #DA3637;
}

I’ve also worked out how routing works, along with creating controllers, directives and the use of $scope and {{ }}. Here is the code for my registration page:

<section class="card register">
  <form name="myform"
        ng-submit="register()"
        novalidate> <!--novalidate takes over validation from the browser-->

    <div class="textintro">
      <h1>Register</h1>
      <p>To access site features</p>
        <p class="message" ng-show="message">{{ message }}</p>
    </div>

    <fieldset>
      <input type="text" name="firstname" placeholder="First Name" ng-model="user.firstname" ng-required="true">
      <input type="text" name="lastname" placeholder="Last Name" ng-model="user.lastname" ng-required="true">
        <p class="error validationerror"
        ng-show="(myform.firstname.$invalid || myform.lastname.$invalid) && myform.firstname.$touched && myform.lastname.$touched">Please enter your name</p> <!--Checks if .firstname or .lastname are .$invalid, and that both are .$tocuhed-->
      <input type="email" name="email" placeholder="Email" ng-model="user.email" ng-required="true">
        <p class="error validationerror"
        ng-show="myform.email.$invalid && myform.email.$touched">Must be a valid email</p>
      <input type="password" name="password" placeholder="Password"ng-model="user.password" ng-required="true">
        <p class="error validationerror"
        ng-show="myform.password.$invalid && myform.email.$touched">Password is required</p>
    </fieldset>

    <button type="submit" class="btn"ng-disabled="myform.$invalid">Register</button>
    <p>or <a href="#/login">login</a></p>
  </form>
</section>

I’ve made a small alteration from the tutorial, combining the first and lastname fields using a tutorial here.