ITM381B Linking DB items between Client-Server

https://secrdir.com/campus/ionic/ionic_2_free.php

Looking at the https://secrdir.com/campus/ionic/files.php?show=add_agent.php php code and https://secrdir.com/campus/ionic/ionic_2_pro.php JavaScript code side-by-side.

In add_agent.php has

$_REQUEST is where the parameter was passed from JavaScript/AngularJS? add_agent code at the bottom. 
$_REQUEST in PHP is HTTP Request Variables. An associative array that by default contains the contents of $_GET, $_POST, and $_COOKIE.
$_REQUEST is one of the 'superglobal' variables of PHP.
<?php /* This is add_agent.php */
	header('Access-Control-Allow-Origin: *');

	include('_global.php');

	$datetime = date('Y-m-d H:i:s');

	$AgentName=$_REQUEST['AgentName'];

	$OfficeKey=$_REQUEST['OfficeKey'];

	$AgentName_as=addslashes($AgentName);

	$AgentID = 0;

	$OfficeLocation = '';

	$inserted = 0;

	$message='';

	if( strlen($AgentName) > 5 && $OfficeKey > 0 )
	{
		$sql = "SELECT AgentName, OfficeKey FROM AGENT WHERE AgentName='$AgentName_as' AND OfficeKey='$OfficeKey'";

		$sqlTable = mysql_query($sql, $conn) or die("Couldn't perform query $sql (".__LINE__."): " . mysql_error() . '.');

		if($sqlRecord = mysql_fetch_assoc($sqlTable))
		{
			$message = "already added";
		}
		else
		{
			$sql="INSERT INTO AGENT (AgentName,OfficeKey) VALUES ('$AgentName_as',$OfficeKey)";
			$sqlExecute = mysql_query($sql, $conn) or die("Couldn't perform query $sql (".__LINE__."): " . mysql_error() . '.');
			$message = "added";
			$inserted = 1;
		}

		$sql = "SELECT * FROM AGENT INNER JOIN OFFICE ON OfficeKey=OfficeID WHERE AgentName='$AgentName_as' AND OfficeKey='$OfficeKey'";

		$sqlTable = mysql_query($sql, $conn) or die("Couldn't perform query $sql (".__LINE__."): " . mysql_error() . '.');

		if($sqlRecord = mysql_fetch_assoc($sqlTable))
		{
			$message = $sqlRecord['AgentName'] . " $message at " . $sqlRecord['OfficeLocation'] . " location.";
			$AgentID = $sqlRecord['AgentID'];
			$OfficeLocation = $sqlRecord['OfficeLocation'];
		}
	}
	else
	{
		$message = "AgentName or OfficeKey wasn't specified correctly.";
	}

	$json = json_encode([		"datetime" => $datetime,
								"inserted" => $inserted,
								"message" => $message,
								"AgentID" => $AgentID,
								"AgentName" => $AgentName,
								"OfficeKey" => $OfficeKey,
								"OfficeLocation" => $OfficeLocation
						], JSON_PRETTY_PRINT);

	echo $json;

?>
  • Add Agent
    Replace line: function ($scope, $stateParams) {
    with 25 lines of code:

    function ($scope, $stateParams, GetOffices, AddAgent) {
    
      $scope.offices = [];    
    
      $scope.data = {};
    
      $scope.addAgent = function(){
        var agent = $scope.data.agent;
        var office = $scope.data.office;
        $scope.hideButton=true;
    
        AddAgent.getPost(agent, office) 
        .then(function(response) {
          $scope.post = response;
         });
      };
    
      GetOffices.getPost()
      .then(function(response) {
        $scope.post = response;
        $scope.offices =  $scope.post.records;
    	$scope.offices.unshift({ "OfficeID": 0, "OfficeLocation": "--- Select Office Location ---" });
    	$scope.data.office=0;
      });
    

Adding API Services JavaScript

services.js the first line should be:
angular.module('app.services', []) then the rest follows. 

.service('AddAgent', function($http) {
  return {
    getPost: function(agent,office) {
      var query = '?AgentName='+agent;
      query += '&OfficeKey='+office;
      return $http.get('https://secrdir.com/campus/ionic/add_agent.php'+query)
      .then(function (response) {
        return response.data;
      });
    }
  };
})

Advertisements

Lab9_10-9: 4 Major Types of Mobile App

According to the authors of The NativeScript Book, Branstein, there are 4 major types of mobile apps:

Native (Objective-C, or Swift for Apple, and Java for Android)

hybrid (PhoneGap/Cordova)

cross compiled (Xamarin), and

just-in-time (JIT) compiled (NativeScript).

Branstein’s interpretation of each architectures are the following:

virual(sic) machine should be JavaScript virtual machine (Branstein, The NativeScript Book, p24).

 

Above taken from: Mike Branstein, Nick Branstein. “The NativeScript Book.” iBooks.

ART258 Sassy Base Exercise & Native App vs. PhoneGap and Plans/ActionList

https://www.creativemedia.space

  • WebLayout & Typography, Typography for Web
  • ART258 Sassy Base and ITS381B Mobile App – go over all the exercises

Campus travel: https://secrdir.com/campus/ionic/ionic.php

Watch all the vid on ITS381B laulima

JSConf Hawaii

ART258 Github Sassy Base Exercise is at the Course Content section of this page.

ART285(2017)

Old ART258JohnDoe Old Google Map APP by Chris1Mobile and 2Web

ART258 Github teachingmaterials

How to copy urls on all open tabs of Firefox and Chrome.

What is NativeScript?

Get Free NativeScript Book by Mike Branstein and Nick Branstein, both of them started as .net developers.

ART299: Discussion & Lab canvas Practice

angularjs

Angular development tutorial by Gary in coursetro

Getting Started with IONIC 2 with Gary Simon free video coursetro

video on Angularjs Crash Course

ionic documentation

written class

Linus Torvalds

12 recommendation of Book on JaveScripts

Google Book Sample Pages: Foundation HTML5 Animation with JavaScript

HTML5 canvas tutorial vid did not completed. I want to go back and recreated on my codepen.

ITS381: TodoListApp html, js, and css files for exercise

How to test the following using CodePen.io?

The following files are copied from the angularjs.org website

index.html file<pre>

<!doctype html>
<html ng-app=”todoApp”>
<head>
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js
http://todo.js
<link rel=”stylesheet” href=”todo.css”>
</head>
<body>
<h2>Todo</h2>

{{todoList.remaining()}} of {{todoList.todos.length}} remaining
[ archive ]
{{todo.text}}

</body>
</html>

</pre>

todo.js file<pre>

angular.module(‘todoApp’, [])
.controller(‘TodoListController’, function() {
var todoList = this;
todoList.todos = [
{text:’learn AngularJS’, done:true},
{text:’build an AngularJS app’, done:false}];

todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = ”;
};

todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};

todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});

</pre>

todo.css file <pre>

.done-true {
text-decoration: line-through;
color: grey;
}

</pre>

ART258: Google fonts, Typekit, @fontface as Typographic

How Setup Fonts for Your Website.

Educational and Professional use of typefaces are different. For commercial use, make sure you use “100% free for commercial use.”

Today, Chris lectured, how to use Google fonts, @font-face, and Adobe Typekit.

@font-face can access to fonts if Google fonts does not have the fonts you want to use. For example, you can use free “ALEO” from fontsquirrel.com.

1. how to use google fonts

  1. Use Sassy-base development folder/directory,
  2. Download from Github.com Zip to your computer
  3. Drop the folder to Prepros
  4. Drop it also to the code editor you use such as Visual Studio Code, Atom, or Brackets.
  5. Change the body color in editor to see the web if body color to set “$type-color-body: red;” in the “_typography.scss” partial scss file, then add define “color: $type-color-body;” in style.scss file then check on web to see if it is updated. (updated massage will show on the screen)
  6. Check web to see if the index.html file is updated
  7. Google fonts use one for the body and one for the heading.
  8. Copy link html add to your index.html file at <head></head>
  9. Add index.html <link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>
  10. Add a line to SCSS file “font-family: ‘Roboto’, sans-serif;”
  11. What is the negative part of Google fonts? You don’t have a internet connection, you don’t get the fonts. Also if the Google fonts goes down you your web can’t use the fonts.
  12. @fontface 2008 changed every thing. One CSS declaration of @font-face.
  13. 10 years ago used – image replacement technic (text is there and the image shows).

WOFF- supported IE-9 on and others, TTF- for other than MS, EOT- for MS only, SVG check if all the browser supports by checking “can I use” website.

OTF – Adobe website says, “OpenType, as jointly defined by Microsoft and Adobe Systems, is technically an extension of Microsoft’s TrueType Open format, which can contain either PostScript font outlines (.otf) or TrueType font outlines (.ttf).” PostScript is for high resolution printing.

Fonts are available at:

The development folder, “sassy-base” has the following entries:

  • –css
  • –fonts –aleo–aleo.woff
  • –index.html
  • –prepros-6.config
  • –README.md
  • –scss

2. To Use Fonts using @font-face:

Add the following code in style.scss<pre>

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

</pre>

Add the following code in style.scss

<pre>

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

</pre>

To see how it is working by

Recommended way to use font is to use Google fonts, because Adobe Typekit does not work smoothly. It often requires some troubleshooting.

How to use typekits is part of Adobe-> performance is bad. Seems to take more time to load to cache memory. Used Brother-1816 for NMW

3. How to use adobe typekit

  1. Goto Typekit.com and click “Add to Kit.”-> kit setting and give the url then “Publish”.

You have to be careful using pseudo bold and pseudo italics in Typekit. Typekit is also server dependent.

Bold some weighted by using thin Brother-1816 and make it weight to be 900 instead matching 100.