From the start of Web 2.0 everything from Bookmarks to Spreadsheets and Office
packages to RSS Readers has become an online thing. In that spirit we are going
to create an Online Note Keeping application in PHP which would give us the
power to keep our notes online. That means all of our notes will be accessible
from anywhere the Internet is available that too secured with user authentication.
We are talking about storing notes so obviously we’ll need either a database
or file to store the data. For now we’ll use a file instead.
To store notes in a file we need to create and follow a format (the way each
of the notes will be stored). For each note there will be a Title, Date and
Time it was written and the actual Note. So I think the following format will
be fine:
<Title>
<Date & Time>
<Body>
We’ll follow this for each note we store into the file.
Talking about the interface, user will first be presented with a login page,
on successful login he/she will then be taken t o page where his/her previous
notes reside, there will also be option for writing new notes.
Here is the code, it is heavily commented, read closely and you’ll have
no problems in understanding it:
Login Page (login.php):
<html>
<head>
<title>My Notes | Login</title>
</head>
<body>
<h1>My Notes</h1>
<h2>Login </h2>
<?php
//user data
$user='one';
$pass='123';
//if submit button was pressed
//that means form was submitted
if(isset($_POST['submit']))
{
//fetch other form data
$username=$_POST['username'];
$password=$_POST['password'];
//start a session
session_start();
//match username & password
if($username==$user && $password==$pass)
{
//save session variable with the username
//which will be unique
$_SESSION['user']=$username;
//redirect to homepage
header("Location: home.php");
}
echo "<p style=\"color:#ff0000;\">Incorrect Username/Password. Please Try Again.</p>";
}
else
//requesting the login page
{
//if requesting the login page
//check if already logged in
//and redirect to homepage if true
//start session
session_start();
if(isset($_SESSION['user']))
{
//redirect to homepage
//if already logged in
header("Location: home.php");
}
}
//if not logged in show the login page
?>
<form name="form1" id="form1" method="post" action="">
<table width="30%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Username</td>
<td><input name="username" type="text" id="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password" id="password" /></td>
</tr>
<tr>
<td> </td>
<td><input name="submit" type="submit" id="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Main Page (home.php):
<html>
<head>
<title>My Notes</title>
</head>
<body>
<h1>My Notes</h1>
<p>Create A New Note</p>
<form name="form1" id="form1" method="post" action="home.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%"><font size="2">Title</font></td>
<td width="78%"><input name="title" type="text" id="title" size="30" /></td>
</tr>
<tr>
<td><font size="2">Body</font></td>
<td><textarea name="body" cols="30" rows="7" id="body"></textarea></td>
</tr>
<tr>
<td><input name="post" type="submit" id="post" value="Post Note" /></td>
<td><input type="reset" name="Submit2" value="Reset" /></td>
</tr>
</table>
</form>
<?php
//start session again
session_start();
//if someone is requesting this page
//without logging in
if(!isset($_SESSION['user']))
//redirect to login page
header('Location: login.php');
//if logged in
echo "<p style=\"background: #000; color: #fff;\"><b>Hello: <i>".$_SESSION['user']."</b></i></p>";
//if 'post' button was pressed
//i.e note was posted
if(isset($_POST['post']))
{
$title=strip_tags($_POST['title']);
$body=strip_tags($_POST['body']);
//convert newlines in the body to <br />
$body=nl2br($body);
//remove any newline characters
//or the FORMAT will be lost
$body = str_replace("\n", "", $body);
$body = str_replace("\r", "", $body);
//have current date and time
$date=date('H:iA jS F Y');
//if body or title field was not blank
if($body!='' && $title!='')
{
//make the 'data' variable
//triming any excess spaces
//with HTML formatting
$data="<h2>".trim($title)."</h2>\n";
$data.="<p><i>".trim($date)."</i></p>\n";
$data.="<p>".trim($body)."</p>\n";
//open the file and have data
//in an array
$file_ar=file("notes.txt");
//overwrite the file
$fp=fopen("notes.txt","w");
//first put the data that
//was sent by the form
fputs($fp,$data);
//if the original file had
//contents, append it to the
//end of the file
//THIS IS TO HAVE THE LATEST
//MESSAGE AT THE TOP
if($file_ar!=NULL)
{
$loop=0;
foreach($file_ar as $line)
{
//store only 20
//notes MAX
if($loop>=19*3) break;
fputs($fp,$line);
$loop++;
}
}
fclose($fp);
}
}
//---show the previous notes---
//since the data is itself HTML
//formatted we just have to read the
//whole file and output it 'as is'
//follwing function reads the whole file
//at once
$data=file_get_contents("notes.txt");
echo $data;
?>
</body>
</html>
NOTE: Create an empty file named 'notes.txt' in the same directory.
You can notice that as the data and the way it is to be stored is getting complex,
so is the working with files. You may also notice that many important features
such as editing and deleting existing notes has not been implemented because
they are pretty difficult to implement using a file.
That means we desperately need to learn Database, which is the topic of the
next post!
Previous Articles: