Password Strength Checker using Jquery

Many websites that require login credentials enforce a security technique often referred to as password complexity requirements. These requirements ensure that user passwords are sufficiently strong and cannot be easily broken.

The passwords are always the most commonly used authentication mechanism. Even as many websites move to multi-step authentication, passwords mode of authentication still pay a key role in securing an account.

A strong password is critical to account security and this tutorial teaches you how to design a system that gauges password strength using jQuery.

Now, what constitutes a strong password? 

Well, that depends on who you ask. However, traditional factors that contribute to a password's strength include the length of the password, the complexity of the password, and unpredictability of the password. 

To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we will construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we have established.

The user also will be able to click on a check box to see their real password to avoid mistake when typing their desired passwords.

The purpose of this tutorial is to show how a simple script can be written using jQuery to enforce password complexity requirements. You will be able to add additional requirements to the script if needed.

There is a README.txt file in the downloaded folder that gives you information on how to add additional fields or requirements if needed.

Click here to view this tutorial

Visitor Tracking System

Web Tracker / Site Tracker / Visitor Tracker

What exactly is a web tracker (also known as a visitor tracker or site tracker), and why do you need one?

The idea behind a web tracker is very simple and has been around for many years. Essentially you place a small piece of code on your website, when someone visits your website, that small piece of code is executed and the visitor's public details (ip address, browser, operating system, referrer, page title and url etc) are analysed and stored for reporting to you later.

The great advantage of web trackers are that they are better at tracking 'real people' as they track browsers NOT server requests. This often means a web tracker will have a significantly lower count than standard log file analysis. But it offers a more realistic figure of the visitors to your website and far more detail.

Some important benefits of the system!

The system will help you to know the number of visitors that visits your website daily, weekly, monthly, and yearly. This will help you to know where your real customers are located or coming from so as to follow them appropriately. It will tell you the operating systems, web browsers and screen resolution of the computers that your visitors use to access your website. It will tell you the countries and cities of the visitors that visits your website. It will tell you the number of visitors that are viewing your website at a certain time. It will tell you the search engines used to find your website. It will tell you the pages viewed on your website and the search engines where the visitor came from to your website page. Above all, your use of the application is free and no special sign up is required, you only need to supply your website home page URL to get a small piece of code that you can place at the BODY section of your webpage for visitors tracking purpose. The application is also responsive to screen. There are options where you can change the width, visibility of the tracking system and other important settings in the tracking code generated. Click here to see how it works

Send Mail with File Attachment via SMTP using PHP and Jquery

We have come to realise that most of the emails sent via the PHP mail() function are often treated as Spam and sent to the Spam Box instead of the Inbox because the PHP mail() function does not use a well configured SMTP Server.

We have designed a system that can be used as a Contact Form and be placed at the contact page of any website or be used as a Mail System for any website.

The goal of this tutorial is to introduce a secure means through which you can easily send emails with File Attachment via SMTP using PHP and Jquery without the need to log into your email accounts.

Imagine a situation where you send an email to your users/clients or these users/clients happen to contact you via your website and the messages sent are treated as Spam instead of a genuine message, moreover, it is not all users that bother to check their spam box.

This application brings an end to this kind of situation as illustrated above. This application now gives you the hope that all genuine messages sent or received will go straight to the Inbox where they were sent and no longer the Spam box.

You have received this email in your Box because it was sent with this new Mailing System which is located at the below URL.

Tutorial URL: http://vasplus.info/149-Send-Mail-with-File-Attachment-via-SMTP-using-PHP-and-Jquery.html

Sample Screen Shot when used the system as a Mailing System to single user at a time

Sample Screen Shot when used the system as a Mailing System to multiple users at a time

Sample Screen Shot when used the system as a Contact Form

Click here to view this tutorial

Online Examination System

Vasplus provides an Online Exam Software at competitive rates. Online examination is getting popular on the web these days. The system was designed to ease examination process in organizations worldwide

The main objective of online examination system is to efficiently evaluate the candidate thoroughly through a fully automated system that not only saves lot of time but also gives fast results.

This Online Examination System (OES) is a MCQ(Multiple Choice Questions) based Examination system, which is built using Jquery, PHP and MySQL.

The system provides an easy-to-use environment for preparing questions, conducting exams, test or quiz and managing results.

This system is particularly useful for those websites or organizations that deal in education, recruitment or employee screening process. Presently, institutes are organizing exams, test or quiz online. In this application, a candidate can be given an online exam, test or quiz of a particular subject or topic and get the results instantly through which the candidate can know his/her potential and how much more effort he/she needs to put in to get better marks depending on the settings done at the admin control panel of the system.

Any Educational Institute or training centres can use this system to develop their strategy for putting the exams, tests or quiz and for getting better results in less time.

Click here to view more

Responsive Menu using CSS and jQuery

This tutorial teaches you how to design a responsive navigation or menu using CSS and jQuery.

Responsive design has basically become a staple to any modern website. Having this in mind, navigation must be ready to adjust to the various screen sizes possible. As you'd imagine, a 10 item long horizontal menu doesn't translate well to a cellphone' screen. However, with a bit of proper tweaking, we can make a proper responsive menu for use on mobile or small screen size.

Click here to view this tutorial

Convert text via Google to voice using Jquery and PHP

This tutorial teaches you how to convert Text To Speech via Google API using Jquery and PHP.

The system sends a HTTP GET request to Google Speech URL that does the conversion of text to an MP3 audio file as an out put.

Below is a sample URL through which the request to Google is made.

http://translate.google.com/translate_tts?ie=UTF-8&q=The text to convert&tl=en&total=4&textlen=19

Explanation for the above URL is shown below:

(1) ie -> This is the encoding format used. The default as seen in the URL above is: UTF-8
(2) q -> This is the query string. URL encoding is a necessity for this field especially when the string contains special characters.
(3) tl -> This is the language to which the conversion will be done. This means the mp3 audio file will be read in this language. You can get the list of Google supported languages here https://developers.google.com/translate/v2/using_rest#language-params
(4) total -> This is the total of words to be converted.
(5) textlen -> This is the lenghth of text to be converted. The maximum is 100 characters.

Click here to view this tutorial

PayPal Integration using PHP

This tutorial teaches you how to easily integrate PayPal payment system on your website using PHP.

PayPal has become the most popular method of on-line payment in recent years due to the fact that it is safe, convenient and reliable.

PayPal payment system seems to be generally accepted worldwide.

Because of its ongoing popularity, it has become a necessity for on-line retailers to utilize this method of payment system on their websites.

This system is made up of two major parts which are listed below.

(1) A web page that processes the payment and this page contains the information of the user who is about to make a payment, the information of the payment and initiates a request to PayPal to make the payment.

(2) A web page that confirms the above payment and continues on to the next phase of your web application such as a 'Cancelled transaction Page', 'Completed transaction page' or 'Notification page' depending on the status of the payment brought from PayPal.

This system uses the RC4 algorithm to encrypt and decrypt the data sent via the URL to PayPal and later brought back from PayPal to your website for identification/activation purpose.

To use this system, the first step to take is to create a PayPal account If you do not already have one.

The next step is to open the file named payments.php after you must have downloaded the script and fill in the following information or create a session on the payments.php page then use the username or email address of the user accessing this page based on the session which has been created to get the information you need for the user/payment from your database and then pass these information to the codes below for processing.

$payment_mode = "Test"; // "Live" or "Test"
$user_or_payer_email_address = "info@vasplus.info"; // This is the email address of your user that is about to make a payment
$paypal_email = 'vasplusblog@yahoo.com'; // This is your paypal email address
$your_website_logo_url = "http://example.com/logo/logo.png"; // This is the URL to your website logo
$item_name = 'PayPal Integration Demo'; // This is the name of the item that a user is about to pay for
$item_amount = 1.00; // This is the amount charged for the item that a user is about to pay for
$currency_code = 'USD'; // The currency that you wish to accept on your site

Once you have completed the above settings, you are done to start using the system.

Click here to view this tutorial

Facebook Style Auto Scroll Pagination using jQuery and PHP

This tutorial teaches you how to design a system with a pagination that loads and gets new items or contents automatically from the database just as Facebook / Google Plus does and displays on the screen to the user as the user scrolls the page down using Ajax, Jquery and PHP.

In the past, i gave several tutorials on pagination where you have to click on a button to load more data or content from a database and this process requires the effort of a user before more contents or data can be loaded from a database and its also time consuming.

As a result of this, i decided to come up with another similar tutorial where you do not have to click on a button to load more contents from a database. All you need to do is to scroll down to read the contents on the page while more contents are loaded and displayed on the page.

One major feature of this application is that, it does not work with the ID of each content loaded from the database as it is in the case of our previous tutorials but counts the number of items which have been loaded from the database and then use this number to check for the remaining contents which are left in the database for the next contents to be loaded. Am sure you understand what am talking about.

This application comes with a plugin which has been designed for you to just set things the way you want.
For instance, you can set the total number of items you want the script to load at each down-step, you can set the position you want the loading process to start from, you can set the script to load manually or automatically depending on what you prefer, you can set your desired label for "Loading Status", you can set your desired label for "Finished Contents in the database" and much more.

This is a very simple to understand application as all you need to do are well explained in the script.

The script is very easy to understand and customize with programming code comments to ease usability.



Click here to view this tutorial

Facebook Style Private Messaging System Version 6.0 using Ajax, Jquery and PHP

Everyone likes the Facebook Private Messaging System where communication has been made easy.

This is a paid tutorial and helps and teaches you how to build a Private Messaging System which is similar to that of Facebook with amazing features such as the following:
   

(1) The interface of the message system is responsive to browser height just as Facebook does.

(2) There is an auto and Manual Pagination for messages when scroll to top which is similar to that of Facebook.

(3) Send File or Photo which is also similar to that of Facebook

(4) Delete Multiple messages

(5) Delete entire conversation with a user

(6) Report Spam or Abuse

(7) Send Feedback

(8) Search for messages in conversation with a particular user

(9) Nice smileys box with style

(10) New Message Notification

(11) It expands YouTube Video URL that start with http://

(12) It expands links or URLs that start with http://

(13) It shows user typing notification at the receiver end

(14) You hear a sound if new message comes in

(15) It displays Seen Notification similar to that of Facebook

(16) It scrolls to bottom when new messages are received

(17) There is an option to search for a desired user or friend for messaging purpose.

(18) Set current user or friend communicating with to selected even when the page is reloaded - similar to Facebook.

(19) Download attachment with received photo enlargement - similar to Facebook.

(20) Hide and show send message button - similar to Facebook.

(21) Press enter key to send messages - similar to Facebook.

(22) Nice confirmation box for notification and message deletion, etc.

The system supports all modern browsers and the scripts are written in a way that any one can easily understand and customize with programming code comments to ease usability.

Website Link

Gmail / Facebook Style Chat Application with jQuery and PHP

Everyone loves the gmail and facebook inline chat system. This chat system helps you to easily integrate the Gmail/Facebook style of chat into your existing website.

This chat system has some special features that can not be seen in any other similar applications over the internet.

Features of the Chat System are as follows:

(1) It expands YouTube Video URL that start with http:// at the receiver end
(2) It expands links that start with http:// at the receiver end
(3) It shows user typing notification at the receiver end
(4) It shows Online, Offline, Busy and Unavailable notifications at the receiver end based on user settings just as Facebook Chat does
(5) Turn off chat, hide and show chat Box similar to that of Facebook
(6) Search for users or friends which is also similar to that of Facebook
(7) Chat with multiple users similar to that of Facebook and Gmail
(8) Header of chat-box flashing if new message comes in or seen notification is displayed
(9) You hear a sound if new message comes in
(10) Facebook style bottom right display of chat box
(11) Nice smileys box with style
(12) You can send files in chat
(13) You can save your chat history
(14) You can clear your chat history
(15) If chat window is minimized when a new message arrived, you will see notification for it.
(16) It displays Seen Notification similar to that of Facebook
(17) It keeps chat boxes open and stores their position and states (Minimized or Maximized) even when pages are refreshed similar to that of Facebook and Gmail
(18) It scrolls to bottom when new messages are received
(19) It displays "fullname says…" notification in the page title bar and blinks chat boxes when window is not in focus
(20) It auto-re-size chat text input box which is similar to that of Facebook and and many other attractive features that you will experience while using the chat system

The system is also very easy to implement in any application as you don't have to install any additional software to use it.

The system was built on the platforms of Comet and HTML5 Server-Sent Events due to browsers compatibility issues.

It works on all modern browsers such as Internet Explorer, Firefox, Chrome, etc.

For more information, go to this URL: http://vasplus.info/141.html

The photos below are sample screen shots of the chat system.

Thank You!
The Vasplus Team.

Click here to view it

Gmail - Facebook Style Chat Application with jQuery and PHP

The long awaiting Vasplus Chat System is now ready and available at Vasplus Account section.

Please go to www.vasplus.info, login and look at the bottom right side of the page to see it.

This is a testing period for the chat system and it will last for one week after-which the chat system will be deployed to users on Vasplus but it won't be free because so much effort and resources have been put into it :)

The chat system has some special features that can not be seen in other similar applications such as the following:

(1) It expands Youtube Video URL that start with http:// at the receiver end

(2) It expands links that start with http:// at the receiver end

(3) It show user typing notification at the receiver end

(4) It show Online, Offline, Busy and Unavailable notifications at the receiver end

(5) Turn off chat, hide and show chat Box similar to that of Facebook

(6) Search for users or friends which is also similar to that of Facebook

(7) Chat with multiple users similar to that of Facebook and Gmail

(8) Header of chat-box flashing if new message comes in or seen notification is displayed

(9) You hear a sound if new message comes in

(10) Facebook style bottom right display of chat box

(11) Nice smileys box with style

(12) You can send files in chat

(13) You can save your chat history

(14) You can clear your chat history

(15) If chat window is minimized when a new message arrived, you will see notification for it.

(16) It displays Seen Notification similar to that of Facebook

(17) It keeps chat boxes open and stores their position and states (Minimized or Maximized) even when pages are refreshed similar to that of Facebook and Gmail

(18) It scrolls to bottom on new messages are received

(19) It displays “fullname says…” notification in the page title bar and blinks chat boxes when window is not in focus

(20) It auto-re-size chat text input box similar to Facebook and much more.

The system is also very each to implement in any application as you don't have to install any additional software to use it.

The system was built on the platforms of Comet and HTML5 Server-Sent Events due to browsers compatibility issues.

It works on all modern browsers such as Internet Explorer, Firefox, Chrome etc.
You can also test the chat system on any browser of your choice and send us your feedbacks.

Thank You!
The Vasplus Team.




SCREEN SHOTS
===================================================================

       




       


       


Go to Vasplus Programming Blog

How to design a Down Triangle using CSS

This tutorial teaches you how to design a simple but powerful triangle pointing down using CSS.

I am sure we have been seeing things like this on Facebook, Google-plus, etc and wonder how it can be done. It is very easy to do using CSS.

Most of these designs are often done with an image in the CSS file and also with the help of a JavaScript but this one is special in the sense that it does not require an image or a JavaScript, it uses CSS only.

In this tutorial, we are going to use the CSS pseudo classes which are :before and :after with HTML codes to accomplish the task.

Click here to view this tutorial

Domain Checker using Ajax, Jquery and PHP

This is a paid script and it helps you to design a system whereby people or your clients can easily check for the availability of a domain on your server or website and buy it if they want using Ajax, Jquery and PHP.

The system allows individuals to search for domains with a particular extension or domains with multiple extensions depending on what they prefer or how you want the domain search on your website to be.

When a user enters the name of a domain that he or she intends to search for in the field specified for the domain search and clicks on the search button, the system will communicate with domain registrars servers or websites to check for the availability of that domain and displays results to the user depending on the response gotten from those domain registrars servers or websites.

To check for a domain with a particular extension is the best option for this system because searches will be done on just one server and so will the response from the server be faster compare to a situation where a user intends to check for a domain with multiple extensions, the response from the servers will be slow because the system will need to communicate with about 46 servers or websites to check for the different extensions for the domain name specified.

Although, you can change the number of servers to check for a domain name by reducing it in the array given in the script to make things work faster.

The system supports all modern browsers and the scripts are written in a way that any one can easily understand and customize with good programming code comments to ease usability.

There is no special installation or configuration needed to use the system, all you need to do is to upload the files to your server or transfer the codes to your existing website and you are good to go.

Click here to view this Tutorial

Preview and upload multiple files using Jquery and PHP

This tutorial helps and teaches you how to build a simple but powerful preview and upload multiple files system using Jquery and PHP.

The essence of this tutorial is to teach individuals how they can actually preview files before they are been uploaded.

Our previous scripts on file upload require one external plugin or the other but this one does not rely on any external file upload plugin such as jQuery Form Plugin which has made this application the simplest of all the file upload scripts on Vasplus.

You only need to have the jQuery JavaScript Library which is a necessity for all websites that work with JavaScript.

If you have noticed while uploading files with scripts that require the jQuery Form Plugin, you must have seen that your browser tab loads when the files are uploading but this one does not load at all while the files are uploaded.

When you upload a file by browsing for the file or files intended for upload, the files are renamed with a combination of a random string plus the original extension of the file and saved in a folder on your server for later use.

This is one of the best multiple file upload script on Vasplus because the process involve is not much and the system is very easy to implement in any application.

The system supports all modern browsers and the scripts are written in a way that any one can easily understand and customize with programming code comments to ease usability.

Click here to view this Tutorial

E-Learning System

This application has been designed to give you an organization the best by working in accordance to your specification. We believe in adding extra value to your services.

The Vasplus E-Learning System is a complete Web Application that helps to improve the performance and the entire system of Schools, Colleges or Universities all over the world.

This system is good for both distant and campus learning. It helps an organization to easily distribute learning materials among students and also enhances learning experience.

What is an E-learning?
E-learning simply means using technology to deliver training at anytime, anywhere.
The E-learning system can produce great results to an organization by decreasing costs and improving performance.

To continue reading this, please visit the link below.

Link: http://vasplus.info/137.html

Click here to view the system

School Management System Upgraded

We are delighted to inform you that a new feature has been added to the School Management System to increase security entirely.

A feature to check for number of Log-in Attempts to prevent brute force attack has been added to the system.

We have also added one other method to the former way of resetting forgotten passwords and so, users can either reset their forgotten passwords via their account security question or through email links sent to their inbox upon request.

Attached is a screen captured for the new Forgot Password feature which has just been added to the system.



Click here to view this system


Thank You!
The Vasplus Team.

Comment System Version 6.0

This is a paid tutorial and it teaches you how to build a Simple but powerful and User Friendly Comment System whereby the users of your websites can easily post their comments or replies on your updates or other information on your website using Ajax, Jquery and PHP.

The comment system uses cookie to store users information on their first time to post a comment, reply to a posted comment or like a comment and these stored information are later saved in the database as the login information for your users.

For a user to leave or post a comment, reply to a posted comment or like a comment, the system will prompt the user to enter his or her Full name and Email Address for identification purpose.

The system uses the email addresses submitted by users at their first time to post a comment, reply to a posted comment or like a comment to identify them whenever they try to perform any further action in the future and as such, users email addresses are unique within the system.

Below are some features of the comment system:

(1) Good in security
(2) Users can add their avatar or desired photo for commenting purpose
(3) Enlarge users avatar or photos when clicked on them
(4) Reply to posted comments
(5) Like both comments and replies posted
(6) Email notification for new Replies and Likes to users concerned
(7) Nice display of Confirmation Box for comment deletion and logout
(8) Proper validation for empty fields and invalid email addresses
(9) Comments are displayed based on pages where they are posted
(10) No long URLs or contents that extends through the comments box area.
(11) Load more Comments and Replies Button with pagination
(12) Admins can moderate comments by deleting unwanted comments and much more.
This powerful comment system supports all browsers and programming languages used are Ajax, Jquery and PHP.

The script is very easy to understand and customize with good programming code comments to ease usability.

Below are the Screen Shots for the Comment System.

Click here to view this tutorial

Multiple File Upload using Dropzonejs, Jquery and PHP

This tutorial helps and teaches you how to design a simple but powerful multiple file upload system where you can either choose to browse for the files that you intend to upload or drag and drop the files that you intend to upload in the upload zone with an option to remove unwanted added files using Dropzonejs, Jquery and PHP.

What is Dropzonejs?
Dropzonejs is an open source library that provides a drag and drop file uploads with image previews.

This system works with a database where the names of files uploaded are saved for later use.

When you upload a file by either browsing for the files intended for upload or drag and drop the files intended for upload in the upload zone, the files are renamed with a combination of a random string plus the original name of the file and saved in a folder on your server with the name of the file saved in your database for later use.

This is one of the best multiple file upload script on Vasplus because the process involve are not much and the system is very easy to implement in any application.

The system supports all modern browsers and the scripts are written in a way that any one can easily understand and customize with programming code comments to ease usability.

Click here to view this Tutorial

School Management System

This is to inform you that we have just upgraded some features of the School Management System which are listed below.

(1) Private Messaging System - We have changed this module completely with a more powerful design and functionality.

(2) Finance - We have added more features to this module and you can now generate a summary report for Finance in PDF format.

(3) Settings - We have added more features to this module.

(4) Timetable - Generation of Timetable is now in PDF format

(5) Results - Students can not download a copy of their results in PDF format

Website URL: http://school.vasplus.info/index.php

Demo URL: http://school.vasplus.info/system_user.php

Login Details for the different users in the system!

==Administrator==
Username: admin
Password: 123456


===Registrar===
Username: registrar
Password: 123456


====Staff====
Username: staff
Password: 123456


===Student===
Username: student
Password: 123456

Thank You!
The Vasplus Team.

Send Invitation Manually to Friends or to Imported Gmail Contacts using Ajax, Jquery and PHP

This is a paid script and it helps you or the users of your website to manually send an invitation from your website to friends and also helps to import the contacts of a Gmail account and then send an invitation from your website to the imported contacts using Ajax, Jquery and PHP.

I will start by explaining what an OAuth which has been used in this application is all about.

OAuth stands for Open Authorization. It is an open and secure protocol that provides a method for clients to access server resources on behalf of a resource owner such as an end-user.

It also provides a process for end-users to authorize third-party access to their server resources without sharing their private information such as username and password using user-agent re-directions.

The essence of this application is to ease the process of inviting friends to a website.

This application works with the latest Google API OAuth 2.0 because the Google OAuth 1.0 which has been in existence for a long time was officially deprecated on April 20, 2012 and Google does not allow new Application registration for OAuth 1.0 any more hence the need to upgrade to their latest version.

In this application, users can choose to manually send an invitation to friends by entering between one and three email addresses of their friends or import their Gmail contacts in a nice and simple way then send an invitation to them without much effort due to the default content in place.

The system supports all modern browsers and the scripts are written in a way that any one can easily understand and customize with good programming code comments to ease usability.

Click here to view this tutorial