Free Captcha Code using PHP, Ajax, Javascript, Bootstrap, HTML5
This year I was asked by a friend of mine to create a web application using php that was used in this years 4th year programmer of the year of my Alma mater, Mondriaan Aura College.
At first I had no idea what to do until a spark came and told me to create a captcha. Actually I don't have any idea how to make a captcha. I don't even tried to look from the codes of other web app. At that time I only wanted to create something using my own knowledge so I prohibit myself from looking at other works.
I started on its design. I used twitter bootstrap o make my responsive design easier and that is the one that you see below
View attachment 262935
The first version of it that I gave to the participants has no image refresh and text to speech button and function. I thought that it is hard for the student already so I removed those capabilities. The actual resources that I gave to them has already the css and javascript, the only thing they need to do is to fill the two php functions that can get the image of captcha and check if the input is correct. The real hard thing to do their is to analyze its flow, the rest is a w3schools related work.
How to use it
1. Download the file from this Download Link.
2. Open your wamp Server or your Server
3. Extract "Captcha By Alexies Iglesia" to "C:\wamp\www" or wherever your "www" is located.
4. In the folder "Captcha By Alexies Iglesia", you can see "poty.sql". Import that to your phpmyadmin.
5. Now you can start using it to your localhost or in your servers address
View attachment 262936
The first time I did the voice help is by means of text to speach. I used a jquery function to get the data from a php file that also get the actual text of captchat from the database then convert that to voice using "responsivevoice.js" It works fine and it makes my work easy when I need to add another record of captcha but . . . it is a blunder. Using inspect element, when you tried to click the voice help it transfer the actual answer in a javascript variable. You can't see it in your naked eye but it is visible to the console. Any hacker can make a bot for it that can instantly answer any captcha made by it.
So to make it secure that the only one who knows what the image really means in text is the server, I create a an audio file that speaks what is inside the captcha image. The audio file has the same name with the image name, which if you lesson, it is the actual word of the captcha. This will not require anything to interact with the database.
If you are worrying about the auido file for specific image captcha, You can actually create it in minute from this website "http://www.fromtexttospeech.com/" then download the mp3.
If I have some time, I will create a CMS for adding additional records of captcha.
Download Link
This year I was asked by a friend of mine to create a web application using php that was used in this years 4th year programmer of the year of my Alma mater, Mondriaan Aura College.
At first I had no idea what to do until a spark came and told me to create a captcha. Actually I don't have any idea how to make a captcha. I don't even tried to look from the codes of other web app. At that time I only wanted to create something using my own knowledge so I prohibit myself from looking at other works.
I started on its design. I used twitter bootstrap o make my responsive design easier and that is the one that you see below
View attachment 262935
The first version of it that I gave to the participants has no image refresh and text to speech button and function. I thought that it is hard for the student already so I removed those capabilities. The actual resources that I gave to them has already the css and javascript, the only thing they need to do is to fill the two php functions that can get the image of captcha and check if the input is correct. The real hard thing to do their is to analyze its flow, the rest is a w3schools related work.
How to use it
1. Download the file from this Download Link.
2. Open your wamp Server or your Server
3. Extract "Captcha By Alexies Iglesia" to "C:\wamp\www" or wherever your "www" is located.
4. In the folder "Captcha By Alexies Iglesia", you can see "poty.sql". Import that to your phpmyadmin.
5. Now you can start using it to your localhost or in your servers address
View attachment 262936
The first time I did the voice help is by means of text to speach. I used a jquery function to get the data from a php file that also get the actual text of captchat from the database then convert that to voice using "responsivevoice.js" It works fine and it makes my work easy when I need to add another record of captcha but . . . it is a blunder. Using inspect element, when you tried to click the voice help it transfer the actual answer in a javascript variable. You can't see it in your naked eye but it is visible to the console. Any hacker can make a bot for it that can instantly answer any captcha made by it.
So to make it secure that the only one who knows what the image really means in text is the server, I create a an audio file that speaks what is inside the captcha image. The audio file has the same name with the image name, which if you lesson, it is the actual word of the captcha. This will not require anything to interact with the database.
If you are worrying about the auido file for specific image captcha, You can actually create it in minute from this website "http://www.fromtexttospeech.com/" then download the mp3.
If I have some time, I will create a CMS for adding additional records of captcha.
Download Link
