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 .

Monday, March 21, 2016

World Education Services Provides Very Limited Customer Support

World Education Services Provides Very Limited Customer Support
World Education Services (WES) is the one of the organizations to evaluate academic credentials for education/admission purposes. Before actually paying money, end user will always want to know how to send documents. Some evaluation service providers accept email from reputed universities, others only go by sealed envelope in mail. If the perspective customer tries to contact WES for correspondence queries like the one mentioned above, they mark WES Reference Number mandatory as mentioned in Figure 1 below. This Reference Number is generated only after required payment is done. The user may not want to pay, until and unless all his doubts are clear. So, this contact form is useless in practical. Further, there is no phone number mentioned here on this page to contact customer service.


Figure 1. Information to be filled on Contact WES form.

Figure 2. Ugly error message displayed if virtual WES Reference number is given.
As per Krug (2014), hiding information like customer support number and asking information that is not really needed are some of the factors to diminish goodwill. Even if the queries being asked by the end user is hidden somewhere in the site, he is entitled to get help on what he has paid or intend to pay for.
References

Krug, S. (2014). Usability as common courtesy. In Don’t Make Me Think (pp. 152-153). San Francisco, CA: Peachpit.

Bank of America Website is not Responsive

Bank of America Website is not Responsive
If an end user with older screen resolutions try to visit Bank of America website, he will observe a scroll bar in the browser.

Figure 1. Scrollbar in the webpage since content didn’t adjust as per window size.
As per Rumsey, Roth, and Wallace (2013), Responsive web design (RWD) is a way of coding web pages so that they look good on any screen. This concept is not limited to a mobile device, but to all possible screen resolution based on any technology and hardware. As per Breeding (2015), access to Library Technology Guides in February 2015 was 63% desktop, 27% mobile, and 10% tablet and he supports Google decision to decrease page rank of websites with poor mobile usability. Bank of America may have answered Google by giving altogether different content location to mobile users, but desktop users / end users on devices with weird resolution are still suffering.
References
Kumar, H. (2016, March 20). Bank of America Website is not Responsive [Video file]. Retrieved March 20, 2016, from https://youtu.be/bH_4ns6wWP8
Breeding, M. (2015). Going mobile: How I made my own site responsive. Computers in Libraries, 35(4), 23-24,26. Retrieved from http://search.proquest.com/docview/1689887493?accountid=27424

Rumsey, E., Roth, L., & Wallace, W. S., M.S.L.S. (2013). Responsive web design for an academic health sciences library website. Journal of the Medical Library Association, 101(4), 239-240. Retrieved from http://search.proquest.com/docview/1491276028?accountid=27424

MakeMyTrip doesn’t maintain User Flow State across subsites

MakeMyTrip doesn’t maintain User Flow State across subsites
When an end user switch from one region subdomain to another on MakeMyTrip website, he is taken to home page every time. Say, the end user is on search result page on U.S. sub-domain, if he switch to Indian sub-domain, he will have to start again. This is described in Figure 1 below.


Figure 1. MakeMyTrip: Search preferences lost.
Alcántara-Pilar, del Barrio-García, Porcu, and Crespo-Almendros (2015) studied user flow state (hedonic motivation) in depth and found that it has deep impressions on end user’s loyalty and attitude towards a website. Above mentioned experience on MakeMyTrip may leave end user in confusion and he may have the tendency to switch to competitor right away.

References
Alcántara-Pilar, J. M., del Barrio-García, S., Porcu, L., & Crespo-Almendros, E. (2015). Motivational duality in online consumer behaviour: Website usability and flow state as moderating factors. International Journal of Business and Economics,14(1), 79-104. Retrieved from http://search.proquest.com/docview/1706969854?accountid=27424

Kumar, H. (2016, March 20). MakeMyTrip doesn’t maintain User Flow State across subsites [Video file]. Retrieved March 20, 2016, from https://youtu.be/p6sm0ipEC3U

Sunday, March 20, 2016

Fox News Navigation is Broken

Fox News Navigation is Broken
Site Navigation in Fox News is not so smart for the user to navigate back from where it came. In the example in Figure 1 below, end user visited Home > U.S. > Environment. Just in three steps, he is lost. There is no site navigation or breadcrumb here. It seems to be, this website is optimized only for search engines, not for the end user to be a regular visitor.

Figure 1. Navigating three level down in Fox News website
As per Spencer (2008), breadcrumb links refer to a trail of category and subcategory links on a website just beneath the master head (main navigation). Keyword-rich breadcrumb links reinforce website's internal hierarchical linking structure to the search engines, as well as enhance its usability. Leave aside breadcrumb, main navigation is altogether missing on just third level in Fox News website.
References
Kumar, H. (2016, March 20). Fox News Navigation [Video file]. Retrieved March 20, 2016, from https://youtu.be/JiIUZCBm4jA
Spencer, S. (2008). The search is on. Multichannel Merchant, 25(4), 29-n/a. Retrieved from http://search.proquest.com/docview/195854706?accountid=27424


Unnecessary Hype up Apple iphone Features

Unnecessary Hype up Apple iphone Features
On Apple official website, there are lots of features of all versions of iphone mentioned, which if studied in detail, don’t even make sense to perspective buyer. Possible reason behind, they hide proper help at right place, is to let the buyer be in confusion and seller take the advantage of this situation. For example, on the Apple website, where end user compare iPhone features with older models, some terms e.g. local tone mapping make no sense to an average end user, as mentioned in Figure 1. Even if end user search for this term in search box, nothing much helpful is available.


Figure 1. Apple must help end user to understand what a feature means, they claim to be present in a product.
As per Kantner, Shroyer, and Rosenbaum (2002), the way end user is trying to seek help for products is changing drastically. Help and documentation about the product should be done in a way which faces least resistance by the end user to understand. Apple must provide end user with running help for the features in a product. This could either take the negotiations in positive direction for seller or may be, in negative direction if user choose not spend money for a feature claimed. But in any case, some kind of running help as suggested in Figure 1 will definitely lead to better satisfaction as a whole.

References

Kantner, L., Shroyer, R., & Rosenbaum, R. (2002). Structured Heuristic Evaluation of Online Documentation. Retrieved March 19, 2016, from http://teced.com/wp-content/uploads/2011/06/kantner_HE_of_online_doc.pdf 

Saturday, March 19, 2016

People Search Filters Missing in Bing Search

People Search Filters Missing in Bing Search
Biggest problem with Bing search Engine is that, they are busy copying Google features without a thought in head. People search is an example that supports this fact. Search results layout for a person name in Google and Bing is almost the same. Good thing is that by keyword, both search engines know that, end user is searching for a person, at least. But, the most important thing, effectiveness of search results is diminished by missing person filters.  

Figure 1. Bing Search results for a person name.

Figure 2. Google Search results for a person name.

Figure 3. Suggested dynamic filter features for search results page – action: search person name.

As per Thurow and Musica (2009), while studying a search engine, its effectiveness, efficiency, learnability, memorability, error prevention & recovery and satisfaction is taken into account. By copying Google as described in Figure 1 and Figure 2 above, Bing Search Engine is trying to cater learnability only. There should be something more Bing must plan to cater to go above and beyond Google. With dynamic filtering suggestion described in Figure 3 above, Bing could achieve better effectiveness and satisfaction.

References

Thurow, S., & Musica, N. (2009). When Search Meets Web Usability. Retrieved March 19, 2016, from http://deca.cuc.edu.cn/Community/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.00.11.64/When.Search.Meets.Web.Usability.pdf