dalehay.com - Tag: tutorial

Collapsible Menu with jQuery

7th Mar 2010 05:44am

To begin with we need to make a menu, which I've just done a quick temporary 5 items in mine using the HTML lists tags.

<menutitle>Main</menutitle>
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>

Then in the header of your page, you will need to call your jQuery file.

<script type="text/javascript" src="jquery.js"></script>

Now beneath the line where you're calling your jQuery from, you will need to write some more JavaScript to tell the document to run the later bit of code when the document has loaded.

<script type="text/javascript">
$(document).ready(function(){

});
</script>

Now the document is ready for your jQuery code, we need to tell it that when the "title" bit of the menu (which we've tagged as <menutitle>) is clicked, it should slide it closed.

<script type="text/javascript">
$(document).ready(function(){
$("menutitle").click(function () {
$("#menu").slideToggle("slow");
});
});
</script>

The above code will toggle the sliding action of anything we've put id="menu" on, which is why we've put it on the <ul> bit. Now with everything put together and saved, you should have a menu that toggles closed and open when you press the top bit, which in my example is "Main"

Please Note
Please note though, that this is just an example of doing a menu that can open and close. You can use a cookie to saved if you've closed the menu so that when you refresh the page it stays closed or you can style the menu nicely with CSS. You can also use this method for anything if you wanted from showing and hiding an image, paragraphs, forms, buttons, flash applications, etc...

You can get hold of the latest copy of jQuery from the jQuery website.

1 Comment(s) -:- Permalink
Tags: jquery, tutorial, menu, sliding

Addons to Mini Message Board

3rd Sep 2008 23:17pm

The Mini Message Board tutorial that I did earlier will get a few addon tutorials in a few days time. I am currently halfway through some small tutorials that allow many different addons to your mini message board.

2 Comment(s) -:- Permalink
Tags: mini message board, addon, modifications, php, mysql, forum, tutorial

PHP Mini Message Board Tutorial

8th Aug 2008 23:40pm

Mini Message Board Tutorial

Many websites like to have a message board / forum on their site, but would prefer their own "product". Well if you like, feel free to follow this tutorial and you'll learn how to create a mini message board in PHP and MySQL.

Database Stuff

Before we start with any of the coding, you will need to go into your phpMyAdmin and (if you haven't already got a 'threads' and 'replies' table) paste this in the SQL box. If you already have a threads and replies table in your database then you will need to change it accordingly to what's on the tutorial.

CREATE TABLE `threads` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 255 ) NOT NULL ,
`message` TEXT NOT NULL ,
`author` VARCHAR( 255 ) NOT NULL ,
`replies` INT( 11 ) NOT NULL ,
`posted` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM;

CREATE TABLE `replies` (
`id` INT NOT NULL AUTO_INCREMENT ,
`thread` INT( 11 ) NOT NULL ,
`message` TEXT NOT NULL ,
`author` VARCHAR( 255 ) NOT NULL ,
`posted` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM

This will allow the information to be stored in the database.

New Thread Form

Now as that has been added we need to start with the first page (index.php).

<?php
mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE");
?>

The code above has connected to the database. You will need to change USERNAME to your database username, PASSWORD to your database password and DATABASE to the name of your database.

Now we need to first of all be able to make a thread. To do this you'll need to create a form on the index.php page with three boxes and a button.

<form action="newthread.php" method="POST">
Your Name: <input type="text" name="author"><br>
Thread Title: <input type="text" name="title"><br>
Thread:<br><textarea cols="60" rows="5" name="message"></textarea><br>
<input type="submit" value="Post Thread">
</form>

Your page should look something like this at the moment.

Inserting the New Thread

Now we need the form to enter the information into the database. To do this we will create a file, which is where the form will send the data to called 'newthread.php'. At the top of the file you will need to connect to the database again, then add an INSERT function.

<?php
mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE");

$time = time();
mysql_query("INSERT INTO threads VALUES(NULL,'$_POST[title]','$_POST[message]','$_POST[author]','0','$time')");

echo "Thread Posted.<br><a href='index.php'>Return</a>";
?>

If you don't understand what's happening about, basically we're telling the script to add the data sent from the form on the previous page into the database.

Hopefully when you fill something in the form and click "Post Thread" you should get a message like this.

Showing List of Threads

Great! So far. You've been able to add a thread into the database. Now we need to be able to show this thread. To do this we will be using mysql_query() again and also mysql_fetch_array().

On index.php underneath the end of the form (</form>) add a horizontal rule (<hr>) then add this PHP beneath it. I will explain it all with comments within the code.

<?php
// We are selecting everything from the threads section in the database and ordering them newest to oldest.
$sql = mysql_query("SELECT * FROM threads ORDER BY posted DESC");

// Now we are getting our results and making them an array
while($r = mysql_fetch_array($sql)) {

// Everything within the two curly brackets can read from the database using $r[]
// We need to convert the UNIX Timestamp entered into the database for when a thread...
// ... is posted into a readable date, using date().
$posted = date("jS M Y h:i",$r[posted]);

// Now we will show the available threads
echo "<h3><a href='msg.php?id=$r[id]'>$r[title]</a> ($r[replies])</h3><h4>Posted by $r[author] on $posted</h4>";

// End of Array
}
?>

If you have followed the tutorial correctly you should now see something like this.

Reading Threads

Basically everything on the index page is done now. All that's left now is reading a thread and replying to a thread.

This stage will teach you how to read the threads. Create a file called 'msg.php'
Connect to the database...

<?php
// Connecting to the database again
mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE");

Add a link to the previous page, so you can go back to the index page.

// Here's a link that will allow you to go back to the index
echo "<a href='index.php'>Go Back...</a>";

Do a mysql_query to select the thread you're reading.

// This query selects the current thread using the $_GET value.
$sql = mysql_query("SELECT * FROM threads WHERE id = '$_GET[id]'");

Show the result from the thread query and show it with a horizontal rule beneath it.

// Now we are getting our results and making them an array
while($r = mysql_fetch_array($sql)) {

// Here is the thread title.
echo "<h2>$r[title]</h2>";

// Everything within the two curly brackets can read from the database using $r[]
// We need to convert the UNIX Timestamp entered into the database for when a thread...
// ... is posted into a readable date, using date().
$posted = date("jS M Y h:i",$r[posted]);

// Now this shows the thread with a horizontal rule after it.
echo "$r[message]<h4>Posted by $r[author] on $posted</h4><hr>";

// End of Array
}

Now to show the replies, using the $_GET query from the thread.

echo "<h3>Replies...</h3>";

// Here we will get it to show the replies
// This query selects the replies from the database where the thread ID matches the thread $_GET value.
$sql = mysql_query("SELECT * FROM replies WHERE thread = '$_GET[id]'");

// Now we are getting our results and making them an array
while($r = mysql_fetch_array($sql)) {

// Everything within the two curly brackets can read from the database using $r[]
// We need to convert the UNIX Timestamp entered into the database for when a thread...
// ... is posted into a readable date, using date().
$posted = date("jS M Y h:i",$r[posted]);

// Now this shows the thread with a horizontal rule after it.
echo "$r[message]<h4>Posted by $r[author] on $posted</h4><hr>";

// End of Array
}
?>

Now show the form to do the reply in.

<form action="newreply.php" method="POST">
Your Name: <input type="text" name="author">
<input type="hidden" value="<?php echo $_GET[id]; ?>" name="thread"><br>
Message:<br><textarea cols="60" rows="5" name="message"></textarea><br>
<input type="submit" value="Post Reply">
</form>

This will now allow you to do a reply to the thread. However if you test it you will get an Error 404 (cannot find the file), so now we'll need to make the 'newreply.php' file.

Inserting the Reply

Connect to the database again.

<?php
mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE");

Get the current time as a UNIX Timestamp as a varible.

$time = time();

Insert the information sent from the form into the database.

mysql_query("INSERT INTO replies VALUES(NULL,'$_POST[thread]','$_POST[message]','$_POST[author]','$time')");

Now we will need to update the reply count in the threads database.

mysql_query("UPDATE threads SET replies = replies + 1 WHERE id = '$_POST[thread]'");

Now make a little 'reply posted' message with a link back to the thread.

echo "Reply Posted.<br><a href='msg.php?id=$_POST[thread]'>Return</a>";
?>

Give it a try and it should send a reply to the thread.

Finished

That's basically it. Obviously this is a quick and dirty method of doing a message board and it is open to so many bugs, hacks, XSS, etc.. but the code can be optimized to make it better.

What you should have learned...

How to build a HTML form
How to connect to a database
How to read information from a database
How to add new information into the database

Things to make it better?

Why not try adding a registration section on it, that will allow visitors to sign up and post without having to enter their name each time.
Add an post icons for each post, so posters can select various icons for each topic.
Create an Admin Control Panel, for ease of use when you need to remove a reply or thread.
Add more security to the board. (Search around about strip_slashes(), html_special_chars() and similar things)
Use nl2br() to make each line down show as a new line down.
Adapt on the methods used in this tutorial to make a discussion board / forum with different rooms and categories

The stuff you can do with this simple and basic script tutorial is endless.

Feedback

I'd love to hear your feedback. If you have any then please contact Dale Hay (that's me!) or leave a comment on this post.

101 Comment(s) -:- Permalink
Tags: php, mysql, tutorial, message board, forum, discussion board

PHP Search Engine Tutorial

8th Aug 2008 04:46am

Search Engine Tutorial

Heard of Google? or Yahoo!? ... of course you have. Also you know exactly what they do. But why should you just let Google or Yahoo or other search engines take all the glory. Why not try yourself and make your own Search Engine in PHP and MySQL. Ok, you won't beat Google.. but you can have a really good try.

Database Stuff

Open up your phpMyAdmin (or database software) and add this query below into the SQL section.

CREATE TABLE `searchengine` (
`id` INT NOT NULL AUTO_INCREMENT ,
`pageurl` VARCHAR( 255 ) NOT NULL ,
`pagecontent` TEXT NOT NULL ,
PRIMARY KEY ( `id` ) 
) ENGINE = MYISAM

This will allow the information to be stored in the database.

Creating the Form

The database information is now added. Now we need to make the form that allows you to search. So create a file called 'index.php'

The form will be using GET instead of POST. (So the information will be visible in the address bar)

<form action="search.php" method="GET">
<b>Enter Search Term:</b> <input type="text" name="term" size="50"> <b>Results:</b> <select name="results">
<option>10</option>
<option>20</option>
<option>50</option>
</select><br>
<input type="submit" value="Search">
</form>

That's the form completed. This will allow you to type in a query and also select the number of results you want to show on the form.

Processing the Query

Create a new file 'search.php'. This is the page where the results from the search being shown.

You will need to connect to the database first

<?php
mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE");

Now perform the MySQL query (as a query)

$sql = mysql_query("SELECT * FROM searchengine WHERE pagecontent LIKE '%$_GET[term]%' LIMIT 0,$_GET[results]");

The above query will search in the page data (that we'll be adding later on) and show it as many times as you specified. Now let's create the Array that'll show the results.

while($ser = mysql_fetch_array($sql)) {
echo "<h2><a href='$ser[pageurl]'>$ser[pageurl]</a></h2>";
}

Then just add a link at the bottom that goes back to the original index page.

?>
<hr>
<a href="./index.php">Go Back</a>

Adding Information

Great! The search engine frontend is basically complete! Now we just need to make a little form that adds information into the database.

Create a new page called 'addurl.php' and create a simple form.

<form action="./addurl2.php" method="POST">
Page URL: <input type="text" name="url" size="50"><br>
<input type="submit" value="Add URL">
</form>

Now create a second page called 'addurl2.php' and this is where the information will be processed and added to the database ready to be searched.

Connect to the database

<?php
mysql_connect("localhost", "USERNAME", "PASSWORD");
mysql_select_db("DATABASE");

The URL of the page will now get its source code read and made into a varible.

$pagedata = htmlspecialchars(file_get_contents($_POST['url']));

This little line will remove some single quotes that will usually mess up the query.

$pagedata = str_replace("'","",$pagedata);

Now to insert the information into the database.

mysql_query("INSERT INTO searchengine VALUES ('','$_POST[url]','$pagedata')");

Give a small added message, just so you know it's been added.

echo "URL Added.<br><a href='./addurl.php'>Continue...</a>";
?>

Finished

There you go... a nice simple search engine. You can now goto 'addurl.php' and enter the URL(s) of the page(s) that you want added into your search engine. Obviously if you search for 'b' you'll get loads of results because it'll be reading stuff like '<b>'.

What you should have learned...

How to build a HTML form
How to connect to a database
How to read information from a database
How to add new information into the database

Things to make it better?

Modify the 'addurl.php' page to filter out certain words and/or phrases.
Use pagination (so you can show more than 50 results on more than 1 page)
Create an Admin Control Panel, so you can add, edit and delete results.
Password protect the 'addurl.php' and 'addurl2.php' pages to stop other people from adding information.
Add categories to the search (eg; news, blogs, technology, entertainment)

Feedback

I'd love to hear your feedback. If you have any then please contact Dale Hay (that's me!) or leave a comment!

37 Comment(s) -:- Permalink
Tags: php, mysql, tutorial, search engine

Create your own Image Uploader

23rd Mar 2008 02:09am

Introduction
So you want to create your own image uploader?? Maybe for a image hosting website? If you are unsure what I'm on about then it's simple... a visitor comes onto your website, uploads an image through a form then gets told where it's located so they can use it on their own site.

What You Need
- A Web Server
- PHP
- Notepad (or a PHP Editor)

Part 1
Ok so we're going to have 2 files for our project. A 'index.php' and 'upload.php' file. The 'index.php' file will have the form on it which will allow the visitor to upload a file through a form and then the 'upload.php' file will process the file that has been uploaded and show the results.

Part 2
So lets start with the 'index.php' file.. I am not going to be doing the styling of the site, just the coding of the main script.. you can design what you like. So first of all we need to make the "form" for people to upload the images. To do that we need to firstly make a file called 'index.php' and type in:

<form action="upload.php" method="POST" enctype="multipart/form-data">

The action bit tells the form where to go once the submit button is pressed. The method bit tells us how to send the data, either GET (through the browsers varibles) or POST (through your hosts temporary file) and enctype tells the form what type of data is going through.

Next we need to make the box where people can select an image:

<input type="file" name="image">

The type bit tells your page what type of box it'll be (either text, password, button, submit, reset or file) with it as file you will see a "browse" button added at the end of it. The name of the form is important as that will be passed through to the next page.

Finally we just need to add the last two bits, which is the submit button (which we'll put the text on the button as "Upload Image") and then closing the form.

<input type="submit" value="Upload Image">
</form>

The type on the button is submit which tells your page that it will send the information through when clicked and the value is what text is to be shown on the button, which we have told it to be upload image. Then the backslash-form is just the ending of the form.

Part 3
Now for the final bit which will be all the PHP that is used to send the image from a visitors computer to your website - create and save this file as 'upload.php'.

<?php
// Turn the image that is being uploaded into a varible.
$imagename = $_FILES['image']['name'];

// Copies the image from your web servers temporary file to your web server
copy($_FILES['image']['tmp_name'], "./hostedimages/$imagename");

// Send out a message afterwards to say it has been uploaded
echo "Your image has been uploaded and can be viewed here: <br>";
echo "http://www.dalehay.com/hostedimages/$imagename <hr>";
echo "<b>Preview:</b><br><img src='./hostedimages/$imagename'>";
?>

Pretty small output however it works and this is how. On the 'index.php' page we called the input box 'image' so when the file gets sent to your 'upload.php' page it has the global name of 'image' - in this script we use the extra bits called 'name' (the exact file name of the image [eg; MyCar.jpg]) and 'tmp_name' (which is as a temporary file [eg; file0001.tmp]). The copy() PHP tag has two properties.. the first is the location of the temporary file (hence why we used ['tmp_name']) and then the second property is where the image is being sent to (in our example it's to a folder called 'hostedimages' and after you see we are calling the varible $imagename which is just reading the ['name'] value of the image).

Part 4
Now that is done, all you need to do now is upload both files and create a directory on your server called 'hostedimages' (or whatever you want to have it as) then CHMOD that folder to 777 (You need to CHMOD it otherwise nothing can be sent to that folder). Then try it out... it work.

Problems
Because this is a small quick and dirty method of uploading images, visitors can still upload other files beside images - so maybe expand on this by using the ['type'] value in the 'upload.php' page. Another problem is if a person uploads a file called 'cat.jpg' and then two days later another person uploads a file called 'cat.jpg' it will overwrite it and remove the previous image - so maybe get the file name to start with time() then the filename.

23 Comment(s) -:- Permalink
Tags: php, tutorial, image uploader, image hosting

Latest News Stories
» Pectus Excavatum - Catchup
» Pectus Excavatum - The Final Chapter
» Pectus Excavatum Operation
» One Dream That Won't Be Fulfilled...
» Hotpoint WIXXE127 on Twitter Trends
» Google StreetView: Superheroes found in Blackpool

Top Viewed Stories
» PHP Mini Message Board Tutorial (41,128)
» Bypass Photobucket (32,499)
» PHP Search Engine Tutorial (29,475)
» Getting .htaccess on AppServ (Windows) to work (23,776)
» Rare McDonalds Monopoly 2008 Tickets (11,954)
» Helen Willetts Pregnant? (9,589)

Most Commented Stories
» PHP Mini Message Board Tutorial (101)
» PHP Search Engine Tutorial (37)
» Create your own Image Uploader (23)
» Pectus Excavatum (20)
» I like my DuMP (15)
» New Shameless Trailer! (10)