Oct 01 2019
Oct 01, 2019 Categorised in:

React.js is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

In this article we will use React to create a Login and Registration form. React makes it painless to create interactive UIs. It makes it easy to design simple views for each state in our application, and it efficiently updates and renders just the right components when our data changes.

Reac.js Code

And because the Log in form is one of the main functionality an app can have we thought that building one in this tutorial would be a good example to demonstrate how React.js works.

Aug 15 2017
Aug 15, 2017 Categorised in:

Real-time search is a very interesting and useful functionality which you can use on your website and in this tutorial we will build this functionality using PHP (PDO), Ajax and MySQL.

Make your website more user-friendly with real-time search.

To get started we should create a database and in that database we need t have a table. I use MySQL and my database's name is tutorial, the table's name is users. My table has 2 columns: id and name and I have four users inserted already.

Let’s create the first PHP file which is index.php. In this file we will call the JQuery library and we will have a little bit of CSS in the head section. In the body section we will have the JavaScript code which will to the magic of real-time functionality and then the field where the users will type the name they are looking for and bellow the field we will have a div id where the Ajax will show the result.

So, here you can see the HTML code we need to write in index.php file and bellow this code you can find the explanation for the JavaScript functions.

<html>
<head>
<title>Search</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#show_up{
	width: 200px;
	height: 200px;
	border: 1px solid #ddd;
	display: none;
}
#show_up a{
	border-bottom: 1px solid #ddd;
	display: block;
	padding: 5px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(e){
	$("#search").keyup(function(){
		$("#show_up").show();
		var text = $(this).val();
		$.ajax({
			type: 'GET',
			url: 'search.php',
			data: 'txt=' + text,
			success: function(data){
				$("#show_up").html(data);
			}
		});
	})
});
</script>
<input type="text" name="names" id="search" />
<div id="show_up"></div>
</body>
</html>

 

Page 1 of 1