Friday, April 29, 2016

A Sample Project to demonstrate single page application in AngularJS

Download files available at : Final


  • It shows example of how to achieve single page application using ngRoute in AngularJS.



  • How to use ng-Controller. ng-click, ng-show etc etc in AngularJS and change display as per response received from API (error/ success).



  • How to get JSON response with callback.



  • How to use google maps here.


Main Files in the Project

  • index.html

  • parts/introduction.html

  • parts/searchip.html

  • parts/visitorlocation.html

  • scripts/myapp.js

  • scripts/searchip.js

  • scripts/visitorlocation.js


External Resources Files Reffered

  • ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js, ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js, ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js



  • For Mobile Support and external css : SB Admin 2 by Start Bootstrap & maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css



  • For location the api by ip-api.com

Wednesday, April 27, 2016

Web Analytics

Web Analytics constitutes the techniques used to collect/analyze usage information of a website or related interfaces to improvise usability and customer satisfaction as a goal. Say, an organization just launched a new product and they want to see how successful there marketing had been to drive users to new product information page, web analytics is the answer to such scenarios. Typically a successful web analytics solutions will be helpful to formulize online strategies with least efforts and cost involved.
Typically, all the web analytics tools available today in market either study the server logs or require special JavaScript tags to be added in each and every page and some service is called on each event. In either case, owner of the application may be interested in location, interest, clicks, flow used to reach target page, time duration of the visit etc. by the visitor of the application. These are the inputs that may be used to improvise the application. An intelligent and successful web analytics solution must go one step ahead and based on above observations, will be giving suggestions to the owner of website, how to use this information in better manner.
A web developer must be keep up to date with available options, which he may suggest while the application is being designed. Based on budget and man power available to monitor application, right strategy must be used and implemented. If the stakeholders go for a different web analytics solution at later stages of development, this might involve a lot of rework and put extra pressure on timelines and budget of the project.
Web Analytics Solutions
Free Analytics Tools
  • Google Analytics
  • Google Website Optimizer
  • Piwik
  • Open Web Analytics
  • Site Meter
  • Stat Counter
  • Webalizer
  • Analog
  • Awstats
  • Prosper 202
Cheap Paid Analytics Tools
  • Clicky
  • Mint
  • WordTracker's Strategizer
  • Adblock Analytics
  • Screaming Frog
Affordable Business Analytics Tools
  • Weblog Expert
  • Clicktale
  • Crazy Egg
  • Visual Website Optimizer
SEO Update Tracking
  • Not Provided Count
  • Chart Intelligence
  • Panguin Tool
  • Sistrix Google Updates
  • Algo update history
General Search Marketshare Stats
  • StatCounter
  • Clicky
  • Experian / Hitwise
  • NetMarketshare
  • comScore & Compete.com also offer marketshare stats
Usability Feedback
  • User Testing
  • Feedback Army
  • Silverback
  • Users Think
  • UX Project Checklist
Expensive / Enterprise Premium Tools
  • Google Analytics Premium
  • Adobe Marketing Cloud
  • WebTrends
  • comScore's Digital Analytix Suite
  • IBM's Coremetrics
Recent Advancements
  • Google Accelerated Mobile Pages (AMP):  In October 2015, Google introduced AMP, which may help better serve the mobile users and improve Google ranking.
  • Instant Articles by Facebook: This allows content owners to upload entire stories, and users to read them, without leaving the Facebook site.
  • Transparency by Government in the Analytics: Government online practices are improving now and they are releasing even more behind the scene data using analytics tools.
  • NewsLynx: With launch of this tool, burden of manually collecting and aggregating analytics may be off loaded to this tools and faster growth & innovation is expected.
  •  Google Calculated Metrics: Rather than downloading offline usage data and manipulating using custom formulas, with improvements in Google analytics, this may be done with less efforts using Calculated Metrics.
  • Need to track social platforms: There was a time when Google was the only giant being considered to drive traffic, but these day various social platforms are being equally important. So the need to improve and track traffic from social platforms is ever increasing since last few years.
  • Single page Applications: There was a time when visiting one page to another was the only way to fetch content from server in a website, but with advancement like angularJS, single page applications are becoming more popular, so the way page visits are recorded have changed with time.
  • Video Analytics: With better bandwidth and internet speed, now more ideas may be floated around the web using video content, so the need and ability to track video content has grown these days.
References
Kanik, A. (2015, December 23). A look back at this year's biggest advances in analytics. Retrieved April 24, 2016, from https://ijnet.org/en/blog/look-back-years-biggest-advances-analytics
Losowsky, A. (2015, October 16). What makes us different. Retrieved April 24, 2016, from https://coralproject.net/makes-us-different/
SEO Book. (2013). Web Analytics Tools. Retrieved April 24, 2016, from http://tools.seobook.com/analytics-tools/
Zheng, J. G., & Peltsverger, S. (2015). Web Analytics Overview. Retrieved April 24, 2016, from https://www.researchgate.net/publication/272815693_Web_Analytics_Overview

Tuesday, April 26, 2016

a simple PHP mySQL example

Important: All the bulleted points’ headings are hyperlink to code) Common code link
1.      .htaccess :   This is used to set home page of site something else than index.* Also, any page opened like *.htm is interpreted as *.php  This is done do hide that its  a php site
2.     img Folder:   files in this folder serve as random backgrounds for captcha.
3.     connect.php :  This code loads db details and creates a connection to db.
4.     dbHandler.php: This code provides common methods which are intermediate functionalities specific to application and use connect.php to talk to DB.
5.     dbdetails.php:  When code is deployed at new server, these DB details will change.
6.     captcha.php: This is the code to generate captcha as an image output to browser. Treat this file as an image . As per config in htaccess , you can refer it as captcha.htm also. This will generate two random numbers and save the output in session for future input verification. Captcha puzzle is printed on random location in a random image chosen.
7.     hkproject1.sql : This is to generate a table in db with required fields to save opt ins.
8.     register.php : This is the main input form where user registers. Major php code for this form is in registersubmit.php
9.     sale.php: This is the basic landing page with link to signup ( register.htm /register.php)
10.  thankyou.php: This page is opened after successful submission on register.php and simply shows a success message based on query string parameters.

1. MySQL : One mistake I did here was, I didn’t pay much attention to environment I used for dev and production. I developed on local using latest xampp ( Windows based)  and deployed on goDaddy linux based  localhost MySQL.  On dev box root was used as user and blank as password, lucky me that I kept configurations in separate file, so edits while deployment were easy.  One more thing, after creation of new DB on goDaddy, it takes a while , before you could actually connect to the DB, for me connection started working after 3 hrs, during these three hrs I was doing a lot of hook and crook to connect to db on production. Obviously, turned a waste of time after three hrs, since it was only first time issue to be faced after DB creation.


One more thing here, in the table we store opt ins, I created an extra column of type timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP , so that it may be tracked when user actually signed up, just in case, this info is required in future. Also , ALTER TABLE `signups`  ADD PRIMARY KEY (`email`(256)); The email was kept primary key here, to avoid multiple signups by same user again and again at DB level itself.





2. DB access:  In PHP , which methods I use to connect to MySQL greatly depend on what version of PHP I am using on both devand production environment. So be extra careful here to use similar dev box as production.  For some fields, I wanted to allow deliberately some characters like  in the field, so I had to do $firstname = $this->conn->real_escape_string($firstname);  before putting value in the query.
3. General :
·         At many places, while development, I actually wanted to see errors and warning which were being suppressed by framework, so  had to use : error_reporting(E_ALL);
·         At one place session start code was required to be moved to top of the php file, before any kind of html even, this seems to be weird behavior of php
·         I thought, before actually starting session, it was always wise to check existing one like :


if ((function_exists('session_status') && session_status() !== PHP_SESSION_ACTIVE) || !session_id()) {


    session_start();


}


·          On PHP side, it was easier to validate email format like :


if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {


        $email = strtolower($email);


        $emailValid = true;


    } 


Here I specifically converted email to lower, because I wanted to keep this field as primary, and you never know end users behaving as monkeys who sometime use same email with some characters upper case.


·         On success of submission of data, I took user to thankyou page with variables in query string. But since I was trying to use query string I made sure to use urlencode  and decode  on sender and consumer side.
·         It is always advisable to hide page extensions to make it difficult to hackers, so all my pages in my deployed version look like *.htm  This I achieved using .htaccess   entry : RewriteRule ^(.*)\.htm$ $1.php [NC]
·         Default page in my application was different than index.*, so I used RewriteEngine on  ( enter) DirectoryIndex brrr.php in .htaccess

4. Custom Captcha:  For mathematical captcha, I used sessions to validate user input. I had thousands of images in a fixed folder. I picked a random image from this folder using scandir($dir);  $randomImage  =  $dir . "/" . $images[rand(2, sizeof($images)-1)];


On the top of this image , using imagestring, I printed the string, whose answer is saved in session. $im =imagecreatefrompng($randomImage); $textcolor = imagecolorallocate($im, 0, 0, 0); $randX = rand(0,100); $randY = rand(0,200); imagestring($im, 5, $randX, $randY , $displayText , $textcolor);


header('Content-Type: image/png'); imagepng($im); imagedestroy($im);


Please note that text is also printed at random location on image.


On UI I also gave a refresh button, using Jquery code above mentioned php was reloaded and new answer is saved in session with altogether new captcha to display:


  $(document).ready(function () { $("#reloadCaptcha").click(function () {                $("#myCaptchaImage").attr("src", "captcha.htm?randomToRefresh=" + (Math.random() * 10));


                $("#answer").val("");                ApplycssValidation()


            });


        });


Please don’t get puzzled with Math.random in javascript code, which is just to avoid caching of captcha image content on client side.






5. CSS / html / UI / look and feel and validations on client side:   Even though this assignment was specifically concentrated on PHP / MySQL, but moral responsibility of a developer is to make sure, it is usable.  So I reverse engineered manywordpress templates to make something good looking , jquery/javascript validation obviously had to be form specific, but styles are easy to copy paste , so I did .