Adding Text/Image - Simple Admin Interface

This Simple utility allows you to add text and image to a dynamic page from an admin interface via mysql connection using Php. There are few Requirements which are the following:

Php version > 4.1.0
Mysql Version > 4.0.0

You should follow these steps in order to get your script working:

Create a user and a database (make sure you set up all privileges ex: mysql> CREATE DATABASE newdb; mysql> GRANT ALL PRIVILEGES ON newdb.* TO 'newuser'@'localhost' IDENTIFIED BY 'some_pass' WITH GRANT OPTION; ),
Modify the user & database fields in the opendb.php file, run the admin.php file from your browser and click on the 'Create Tables' link (you can redo it several times to start over if you need),
Fill in details about the path for the images (input the path of the files) inside the $pathfile variable (addtext.php)
Click the 'Add text/image' link and fill the form,
Check out index.php and you are done.

The different Files

- The opendb.php file:

This file is needed to connect to the database. You must fill in the details you entered for the database creation.
Simply copy this to a file and name it opendb.php.

<? //Database connection *** input username & password (line 1) - select the right database name (line 2) *** $db=mysql_connect('localhost','newuser','passuser') or die(mysql_error()); mysql_select_db('newdb'); ?>

- The closedb.php file:

This file is used to close the database connection.

<? //Close database connection mysql_close($db); ?>

- The admin.php file:

We could use a login system to access this file but this is not the aim of this tutorial. Input this inside the body tags of your admin.php file.

<a href="createtables.php">Create Tables</a> <a href="addtext.html">Add text/image</a> <a href="index.php">Open your page (new window)</a>

- The createtables.php file:

Put this inside the body of your createtable.php page.

<? //call the file required for the Database connection require('opendb.php'); //drop the table if it exists and create the table (only need one) mysql_query("DROP TABLE IF EXISTS onlinetext",$db) or die(mysql_error()); mysql_query("CREATE TABLE onlinetext(id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,title VARCHAR(100) NOT NULL,body TEXT NOT NULL)",$db) or die(mysql_error()); echo 'All right, we are done with tables (unless errors displayed)'; //clean closing of the database connection require('closedb.php'); ?>

The table created can store the listing of an article, a title and the body of the article (the body itself can contain html text).

- The addtext.html file:

This file contains the form to submit to the addtext.php file. Include the code inside the body of your page.

<form method="post" action="addtext.php" enctype="multipart/form-data"> Title: <input type="text" name="title" maxlength="100" /> Text: <textarea rows="10" cols="40" name="body"></textarea> <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> Image: <input type="file" name="image" /> Image position: <select name="position"><option value="top">Top</option><option value="bottom">Bottom</option></select> <input type="submit" value="Submit" /> </form>

- The addtext.php file:

This is the file where everything is inserted into the database from the form data. For some tips about the code, check out the comments.

<? //Connect to db now because we use some mysql function right away require('opendb.php'); $_POST['title']= trim(mysql_real_escape_string(htmlentities($_POST['title']))); $_POST['body']= trim(mysql_real_escape_string(htmlentities($_POST['body']))); $_POST['position']= trim(mysql_real_escape_string(strip_tags($_POST['position']))); $image=0; //Move the image if any: if(isset($_FILES['image']) && $_FILES['image'] != '') { //Make sure the data entered are safe and prevent mysql injection $_FILES['image']['name']=trim(mysql_real_escape_string(htmlentities($_FILES['image']['name']))); //Check if the file is an image (jpg,jpeg,gif,png ** add more extension here to handle other type of images **) if($_FILES['image']['type'] == 'image/jpg' || $_FILES['image']['type'] == 'image/jpeg' || $_FILES['image']['type'] == 'image/gif' || $_FILES['image']['type'] == 'image/png' ) { //move the file to the right location (** modify the path to match the right location on your server **) $pathdir=''; if (move_uploaded_file ($_FILES['image']['tmp_name'],$pathdir.'/'.$_FILES['image']['name'])) { echo 'the image has been uploaded'; $image=1; } else echo 'errror while copying: '.$_FILES['image']['error']; } else echo 'That does not seem to be an image!'; } //Add the image to the text if($image) { if($_POST['position'] == 'top') $_POST['body']='<p><img src="'.$_FILES['image']['name'].'" border="0" /></p>'.$_POST['body']; else $_POST['body']=$_POST['body'].'<p><img src="'.$_FILES['image']['name'].'" border="0" /></p>'; } //Insert the data along with image: mysql_query("INSERT INTO onlinetext SET title='{$_POST['title']}',body='{$_POST['body']}'",$db) or die(mysql_error()); if(mysql_affected_rows() > 0) echo 'Your article has been recorded.'; else echo 'Article insertion failure, please report to the error displayed.'; require('closedb.php'); ?>

- The index.php file:

Recent articles are added at the top of this page. All the content is displayed dynamically via this file.

<? require('opendb.php'); $query= mysql_query("SELECT * FROM onlinetext",$db) or die(mysql_error()); while($list= mysql_fetch_assoc($query)) { echo '<p>'.$list['id'].'. '; echo html_entity_decode($list['title']).'</p>'; echo html_entity_decode($list['body']); } require('closedb.php'); ?>

Now you should have uploaded all files onto your server inside the same directory.
Run it and use the code wherever you wish.
There is a lot to add to these simple lines if you wish to add features such as comments and several images in a row, the possibility to enhance the user interface of the admin panel (WYSIWYG)... That will be the object of next tutorials.

Comments

No comment yet, write the first now

Adding Text/Image - Simple Admin Interface

Adding Text/Image - Simple Admin Interface

The different Files

Comments

Categories