My Guestbook App

I am going to build a bottom up guestbook application to store all my guest list for an up coming event, host it in a local network for all the local machines to have access to the application.

The steps taken to build up  the application are: a) creating a MySQL database using MySQL Workbench, b) then forward engineer the EER (Enhanced Entity Relationship) diagram to MySQL workable code and execute it to propagate the desired database with its tables, c) using the Netbeans IDE to build up the web application, d) creating entity classes to interact with the database, e) creating java server faces to interact with the entity classes, f) CSS buttons to keep the application clear of heavy images hence keeping the application size compact and loading time optimal.

alkathirikhalid

Fig 1: Netbeans 7.2 IDE

Since running MySQL as a service takes up resources on start up, I have disabled it hence MySQL is initialized only when needed, as seen above I right click and start the administration tool to bring up MySQL workbench.

alkathirikhalid

Fig 2: MySQL Workbench

Within the Workbench click on “Create New EER Model” to get started to draw the enhanced entity relationship  diagram, depending on the complexity of your application you might use a table or multiple tables for your application.

alkathirikhalid

Fig 3: MySQL Model

Click on “Add Diagram” to get started and follow up on the next image.

alkathirikhalid

Fig 4: Create an EER Diagram

Double click or click and drag the table icon from the left into the drawing sheet, the whole creation process is drag and drop from the tools bar into the drawing sheet.

alkathirikhalid

Fig 5: Build a table(s) with column and set it’s attributes

Creating the columns is a breeze with all its attributes, you may have multiple tables as desired but for a one table application ensure a column is selected as a primary key so as to be in the position to create the entity classes later on, and also to allow the application to grow in the case when another table is added to the schema.

alkathirikhalid

Fig 6: You can insert data manually into the EER Diagram

Click on insert on the bottom, for practical reasons I will skip the insertion of data directly into the database and insert them through the application once it’s built in order to test and see the workings of the application, a good example would be to see and test it’s validation before importing all data into the database.

alkathirikhalid

Fig 7: Completed Enhance Entity Relational Diagram

Once your table/s are ready with all the primary and secondary keys incorporated, click on “Database” and select “Forward Engineer” to transform your diagram into workable MySQL code.

alkathirikhalid

Fig 8: Forward Engineering Settings

Always choose to “Drop Objects Before Each CREATE Object” so as to be in the position to reuse the same MySQL code in the case when the database needs changes specifically an update, that way your script will be in the position to run or override and implement changes to an existing database.

The next step would require your MySQL server to be running, ensure it is running before clicking next.

alkathirikhalid

Fig 9: Forward Engineer to Database process completed successfully

After the step is complete, you can close the MySQL Workbench and head back to the Netbeans IDE, the first part is complete, we have created our database and it’s table/s. Now we continue building the rest of the application.

alkathirikhalid

Fig 10: Our new Database is ready

In Netbeans click on services and then click on the database to verify the tables were created from the Forward Engineering process, as seen above all seem well.

alkathirikhalid

Fig 11: Build your Web Application

Click on new project, select Java web and then select Web application as seen in the above image, and then click next.

alkathirikhalid

Fig 12: Java Web Application Structure

The Netbeans IDE generates the java web application with it’s codes, since the data we require should be populated from the database there is nothing much we need here except for recreation purposes to make the application more appealing, now lets fix the connection.

alkathirikhalid

Fig 13: Selecting the Database connection for the application

Create the data source that would be use by the application to pull up the data from the database in order to populate the page views.

alkathirikhalid

Fig 14: Generate the entity classes

Here we generate the entity classes that will interact with the database.

alkathirikhalid

Fig 15: Generate the entity classes

alkathirikhalid

Fig 16: Generate the entity classes

alkathirikhalid

Fig 17: Inserting testing data

alkathirikhalid

Fig 18: incorporating CSS Buttons to minimize heavy image use

alkathirikhalid

Fig 19: Running the Guestbook Application

alkathirikhalid

Fig 20: The application lists the guest data

alkathirikhalid

Fig 21: Inputting data to test AJAX validation

alkathirikhalid

Fig 22: Validation working as expected

alkathirikhalid

Fig 23: Inputting further data into the application

alkathirikhalid

Fig 24: Application accepts data

The application is in order, all is left is clean and build the application and deploy the war file, since am on a local machine the application is accessible through glassfish with in the same network, external accessibility can be achieved by installing DYNDNS updater or having a dedicate IP and port forwarding the router to the glassfish server on port 80, before doing so you would need to secure the application by creating a login page.

Thank You.

www.alkathirikhalid.com

Posted in Web Developement | Leave a comment

Simple Cart

Simple cart is an open source java script cart application that exclusively work on the client side which then connects to a payment gateway like PayPal or Google wallet depending on the developers choice, yes ecommerce in minutes!

“No databases, no programming, no headaches. A simple javascript shopping cart that you can setup in minutes. It’s lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.”

I am going to implement Simple cart to build up a simple one page shopping cart application that would allow users to pay via PayPal, the application will comprise of a CSS file, a favicon, an index page and of course a SimpleCart.js

This simple one page can be used as a template and replicated as many times as possible depending on a developers needs, all image files will be hosted externally from other location such as website/FTP server, for this example I am extracting all test images from my Google Drive.

alkathirikhalid

Fig 1: Directory structure without any images

The directory structure as see above is quite simple and unique, the  CSS file will implement the the overall page layout, colour, fonts and CSS background images only while the index page will exclusively be dealing with the products extracted from Google drive.

alkathirikhalid

Fig 2: Extracting image URL from Google drive

As seen above individual URL for each image is randomly generated by Google drive and they differ from the page URL (page URL and image URL). To get the image URL right click the image and select “Copy image URL”, implement this URL into your HTML code for ever image source.

N/B Mind the URL https://docs.google.com once the upgrade takes place to the new URL https://drive.google.com the enhanced security applies and this method won’t work.

alkathirikhalid

There is a another method of which you can extract the image links by making use of Google Sites under Attachments, where you can get individual links to images in the cloud.

alkathirikhalid

Fig 3: Complete application with dummy swappable items 1-8

alkathirikhalid

Fig 4: Adding items to shopping cart

alkathirikhalid

Fig 5: Connecting to PayPal for payment processing

www.alkathirikhalid.com

Thank You.

Posted in Web Developement | Leave a comment

QR Code

I am planning to have my contact card embedded with a Quick Response Code for easy access for the geeks out there who can’t do without their mobile phones, as I venture in to QR Code one of the best, free generator and Manager is being offered by Microsoft which allows to keep track and produce an individual report for each code you produce, this also allows you to download your QR codes in different formats including PDF.

alkathirikhalid

Fig 1: Microsoft Tag manager

The generation of the code and tracking is simple, straight forward as seen above.

Al-Kathiri_Khalid_201281592341

Fig 2: My Contact number

alkathirikhalid

Fig 3: My Site

www.alkathirikhalid.com

Thank You.

Posted in Uncategorized | Leave a comment

Portable Development Environment

I have always wanted to carry only the essentially needed applications and software tools, something light enough that would allow me to continue to work on any other computer apart from mine, taking into consideration operating systems, storage capacity and speed which is the data read/write transfer rate and the computer resources specifications.

I carried out some experiments to see how far a 4 Gb pen drive can go, and the software tools I used were:-

  1. Android SDK android-sdk_r18-windows.zip to build android apps on the go
  2. Eclipse eclipse-jee-indigo-SR2-win32.zip to facilitate android apps development
  3. JDK jdk-7u4 a backup location in case a local JDK is not up to date
  4. TCP View TCPView V3.05 to free and release local ports to be use by pen drive applications specifically Apache and MySql
  5. XAMPP XAMPP USB Lite 1.7.7 comes with Apache server and Mysql database for web application development and testing

alkathirikhalid

Fig 1: Pen drive with the portable applications

Mobile application development

Android portable development under Linux and windows experience, the experience proved to be slow due to the fact that I am using a USB 2.0 pen drive as opposed to USB 3.0, which has a lower data read/write transfer rate than USB 3.0 either way it proved to not be efficient but effective enough to build small applications on the go such as seen below I manage to develop an xylophone application.

alkathirikhalid

Fig 2: xylophone application

alkathirikhalid

Fig 3: xylophone application

alkathirikhalid

Fig 4: xylophone application

alkathirikhalid

Fig 5: xylophone application

alkathirikhalid

Fig 6: xylophone application

alkathirikhalid

Fig 7: xylophone application

Web Application development

The experience proved to be highly fruit full, as seen below both Apache and MySql database are running. In htdocs, three website are open my site, my online store, my cart. These are all web applications.

  1. My site a skeletal structure of a static website, more like a template awaiting contents and rearrangement for finalization/personalization
  2. My online store, a free and open source store application that incorporates MySql database for storage of descripting of items and customer data
  3. My cart, a free and open source java script cart application with no database incorporated where payment is customizable via Google wallet or Pay pal

alkathirikhalid

Fig 8: XAMPP control panel

alkathirikhalid

Fig 9: My Site website template

alkathirikhalid

Fig 10: Pay pal payment

I have been tackling a to do list, in preparation to accumulate specifically FOSS (free and open source software)  for the only most highly efficient and effective tools and techniques for rapid software development, that would only require a business to invest on services with minimum annual expenditure leaving room for more profit and offer competitive prices to customers.

The things I would recommend:-

  1. For portable development of highly aggressive IDEs that consume a lot of resources, try to not use a USB 2.0 since the data read/write transfer rate would be time consuming, in the timing being you can experiment on USB 3.0
  2. when installing local applications such as integrated development environments and servers try not to install them as window services hence there would be no need for port conflicts when switching to use portable applications on your pen drive

www.alkathirikhalid.com

Thank You.

Posted in Uncategorized | 2 Comments

Password Retriever

Make your own application to retrieve passwords from your system, If you are like me I have different passwords for everything, categorized according to sensitivity and level, hence I usually have to mentally generate a 4-16 character password by using the site name, purpose and date, hence once in awhile I do tend to forget when I last visited a site hence the date gets mixed up and there goes I have to either think for awhile or just reset the password.

Collect the below applications and depending on your preferences you can either put them in a folder or on the main drive, my way is to put them in a separate folder and change its attribute to hidden.

alkathirikhalid

Fig 1: Required executable applications

After you have downloaded and extract the applications into a folder you will need to create a batch file that would point and execute the applications within the hidden folder, a launch.bat sounds more meaningful.

alkathirikhalid

Fig 2: Setting up a batch launch file

By doing so this would allow you to be in the position to add more tools to your launch.bat to be executed. From above:-

“start Documents\mspass.exe” this line will start the mspass.exe as the name suggests this is a Messenger Password retriever.

“/stext Documents\mspass.txt” this line will save text to Documents\mspass.txt

That’s it, you can run the application by executing the batch file, in the case where you want to install the application into a pen drive and automate the process, you will have to create the auto run file so that batch file gets executed every time a pen drive is inserted into a PC.

alkathirikhalid

Fig 3: Setting up an autorun file

The Action will be prompted to the user to either accept or dismiss to retrieve passwords or you can have your own message. After the completion of the three steps you can enhance and convert your batch file to exe file.

  1. The applications is labeled as a hack tool since all passwords are considered to be secret and only to be know by the owner, retrieving peoples passwords without their consent is illegal and a crime
  2. To protect one self from such auto run applications is to disable the auto run feature in windows go to Start window > Default Programs > Change Auto Play Setting  and then deselect use auto play for all media and devices. This will inhibit plugged in devices to your PC to auto play

www.alkathirikhalid.com

Thank You.

Posted in Security | Leave a comment

FreeNAS

Since I had the interest of building my own NAS (Network Attached Storage) for personal use I ventured into something along the easy to install and carry that said platform on a pen drive leaving the rest of the hardware resources intact.

Most of the instruction online might not really give a fruitful result, since different platforms have slightly different installation processes, so I came up with my own way that made the whole process a breeze, it is wise to note as quoted from m0n0.ch you have to play around with the security within Vista and Win 7.

My version of the installation is

  1. Download physdiskwrite.exe and FreeNAS.img (Your version of choice)
  2. Insert the above software’s in the same directory a good example would be C:\
  3. Attach your pen drive to the computer (128MB is sufficient for NAS 7 anything higher is a waste)
  4. Disable User Account Control (UAC) right click command prompt (CMD) and run as administrator
  5. Change directory to where the file resides
  6. Any attempt to write to the disk will fail hence you will need to have a clean build of your pen drive run diskpart to remove the current partition

Follow the steps

alkathirikhalid

Fig 1: Searching physical drives

Step1: Change directory to where the software resides
>cd c:\\

alkathirikhalid

Fig 2: Start diskpart utility

Step 2: Start diskpart to be in the position to remove partition within your pen drive
>diskpart

alkathirikhalid

Fig 3: Successful cleaning drive and ready to install

Step 3: Depending on the number of drives attached to your computer, you will need list disk so as to know how many are attached and what is the number assigned to the pen drive you want to install FreeNAS, for my case is 1, select the disk then clean it to remove the partitions.
>list disk
>select disk 1
>clean

alkathirikhalid

Fig 4: Select the disk to write the img file

Step 4: After you are done, exit diskpart and run the physdiskwrite program and include the name of the file to write, as seen in the screenshots above.
>exit
>physdiskwrite FreeNas.img

alkathirikhalid

Fig 5: Writing in progress

The writing process begins.

alkathirikhalid

Fig 6: Process completed

Above the writing process is complete, since I am in no position to offer screenshots for the GUI of FreeNAS unless I take a photo with my camera, I will retrieve some GUI images from the web until I do.

FreeNAS

Fig 7: FreeNAS version 6

Version 6 screenshot, convert any old hardware to home servers without spending at all, the minimum requirements for version 7 which is mostly for home use, of which I have installed on my pen drive requires 400MB Disk (64MB Flash)  and 256MB RAM.

FreeNAS-Web-GUI

Fig 8: FreeNAS version 8

Version 8 screenshot, this is mostly for organizational use and minimum requirements are for UFS only is 2GB Disk Space and 4GB RAM.

I am currently using a network attached storage server NSA221 and accessing it over one of my DynDNS accounts of which later on I am planning to change my CNAME records from my domain name www.alkathirikhalid.com to point to the media servers package services such as blog, public folder, login portal, etc…

Currently I have incorporated Google Apps For individuals and small teams into my domain name.

www.alkathirikhalid.com

Thank you.

Posted in Desktop Developement | Leave a comment

Android Market

There is a great market potential for Apps developers in Android market but the down side is that not all the countries are supported merchants yet, hence merchants in a given region have the freedom and flexibility to publish and sell their apps while others will just have to wait, there is a backdoor for this in the mean time and that is to use a credit card registered to a trusted friend or family in one of those regions.

alkathirikhalid

Fig 1: Supported locations for merchants as of October 2011

In the mean time exploring, developing and publishing minor apps.

alkathirikhalid

Fig 2: Android Developer Console

I have been developing apps for android 2.1 update 1 so as to allow my apps to be available to as many android versions as possible, backward compatibility won’t be an issue. To add on that Android market automatically assigns apps to the respective devices according to the Android version they are running on.

alkathirikhalid

Fig 3: Total active installs of my Text to Speech application

As an observation the platform gap isn’t that huge in terms of percentage but once you calculate that in terms of figures it is obvious that 17.3% is still quite a huge number, as seen above it is wise to start and stick for awhile on developing apps for Android 2.1

Any sponsors for a new Android phone or tablet?

www.alkathirikhalid.com

Thank You.

Posted in Mobile Developement | Leave a comment