To create a simple Notepad Application using PHP we need 3 main things : Connect page, Index page and Save page . The Connect page is used to create connection to your backend database .The Index page is used to interact with the front end user and the Save page actually saves your content or put your text content from front end Notepad to backend database . We will also use AJAX and Jquery for displaying the instant error messages .
View demo
Find this Project on Github
Connect.php
The host in this example is Local Host but you can change this and point to your custom domain address.
Username and Password are used to get access to the MYSQL database .
I have used notepad as name of the MySQL Database .
Index.php
I have used Jquery On Click function.So On click of Save button ,get the filename and Text Area value and store it in 2 variables.Then validate these two data (check if it is empty) , if it is empty display error message using Jquery fadeIn() and fadeOut() function or else use AJAX post request to send the form data to Save.php . Dont forget to add or link to Jquery library file.
Save.php
Get the Filename and Text Area from Index.php,Store it in 2 variables and finally update the MYSQL Database notepad table using Connect.php connection.All Done .Any Questions Please comment below.
Connect.php
<?php
$HOST='localhost';
$USERNAME ='root';
$PASSWORD='';
$DATABASE='notepad';
// Create connection
$connection = new mysqli($HOST, $USERNAME,$PASSWORD,$DATABASE);
// Check connection
if ($connection->connect_error) {
die("Connection failed: ".$connection->connect_error);
}
?>
The host in this example is Local Host but you can change this and point to your custom domain address.
Username and Password are used to get access to the MYSQL database .
I have used notepad as name of the MySQL Database .
Index.php
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#save").click(function() {
var filename = $("#filename").val();
var textarea = $("#textarea").val();
var formdata = 'filename='+ filename + '&textarea=' + textarea;
if(filename=='' || textarea=='')
{
$('.onfailure').fadeIn("fast").delay(2000).fadeOut("fast");
}
else
{
$.ajax({
type: "POST",
url: "save.php",
data: formdata,
success: function(){
$('.onsuccess').fadeIn("fast").delay(2000).fadeOut("fast");
}
});
}
return false;
});
});
function eraseText() {
document.getElementById("textarea").value = "";
$('.onclear').fadeIn("fast").delay(2000).fadeOut("fast");
}
</script>
</head>
<style>
#outer-wrapper {
padding:0px 50px;
}
#inner-wrapper {
padding: 50px 0px 20px 0px;
}
#options {
padding:20px 0px 20px 0px;
}
#status span{
padding:20px 0px 20px 50px;
}
</style>
</head>
<body>
<div id="outer-wrapper">
<form id="notepad" >
<div id="inner-wrapper"><input type="text" id="filename" name="filename" placeholder="Enter your Filename ..." value="" >.txt</input></div>
<textarea id="textarea" rows="20" cols="100" name="textarea" placeholder="Type your text here ..." value="" ></textarea>
</form>
<div id="options">
<input type="button" id="save" name="save" value="Save the file " ></input> | <input type="button" id="clear" onclick="javascript:eraseText();" value="Clear"></input>
</div>
</div>
<div id="status">
<span class="onsuccess" style="display:none"> File has been Saved Successfully. </span>
<span class="onfailure" style="display:none"> Text Area or Filename cannot be left Blank. </span>
<span class="onclear" style="display:none"> Text Area has been Cleared. </span>
</div>
</body>
</html>
I have used Jquery On Click function.So On click of Save button ,get the filename and Text Area value and store it in 2 variables.Then validate these two data (check if it is empty) , if it is empty display error message using Jquery fadeIn() and fadeOut() function or else use AJAX post request to send the form data to Save.php . Dont forget to add or link to Jquery library file.
Save.php
<?php
include('connect.php');
$filename="";
$textarea="";
if($_POST)
{
$filename=$_POST['filename'].".txt";
$filename = str_replace(' ', '_',$filename);
$textarea=$_POST['textarea'];
$query = "update notepad_table set filename='".$filename."',textarea='".$textarea."' where id=1 ;";
$result = mysqli_query($connection,$query);
}else { }
?>
Get the Filename and Text Area from Index.php,Store it in 2 variables and finally update the MYSQL Database notepad table using Connect.php connection.All Done .Any Questions Please comment below.
Also Read :
