View Full Version : System Analysis for Newsletter

10-18-2004, 05:05 AM

Not sure if this is the correct place for this, moderators please feel free to move thread. thanks

I'm trying to design a newsletter system using Php and MySQL for a client who's not HTML-proficient. The newsletter he wanted to post will include images and currently I have him upload images to a specific folder on the server and tried to educate him to change the image url to the uploaded image file. This is all done via a form where he can cut and paste his newsletter text and some file fields for him to upload images. What the current system requires is that he needs to update the newsletter image path to the url of the upload ones. and, he is complaining that the system is too technical for him and I'm cracking my brains to come up with a more user-friendly one.

Does anyone here have done a similar system for a non web-savvy user or have tips/suggestions/ideas that I can explore?

thanks for your time.

10-19-2004, 12:29 AM
in the form where he browses to the files he wants to upload, i would add a
textfield where he can fill in an imagename and a textarea where he can
enter a description for that image. (1 textfield + 1 textarea for each

Then, after uploading, you insert a record in a db-table for each uploaded
image, with the url it is uploaded and moved to, the name he entered, the
description, the path on his local?, the datetime?, ...

When he then needs to set the image url, you just give him a dropdown or
list of links or whatever, with the images name and description, and let
him pick the image he want there. (the values for your dropdownoptions are
then the primary key value from the db-table of that image, which enables
you to select the url and insert it in the generated html.)

10-21-2004, 04:11 AM
thanks Raf.

How can I insert the selected image he chooses into the intended part of the newsletter? Assuming he selects 3 images and has some text for the newsletter, I would then require some sort of newsletter template in order to insert the images to the correct place, right?

10-21-2004, 08:24 AM
what i would do is simply insert the imagetag as text (using javascript or whatever) inside a textarea. you simply display a dropdown with the image-names. The value for the options is then the imagetag where you insert the path, height, width, aleternative text etc (you get these data from the images-table). If they select an option, then you display the path in a textfield so they can copy-paste it. (or maybe insert it somehow at a position they click on in the textarea with some javascript --> i never found any readymade code to do that and i don't wanna write somethig like that myself, but it would come in handy)

10-22-2004, 02:18 AM
thank you so much, Raf. I understand what you say and its definitely a better method of doing it rather than hard-coding HTML directly. I'll discuss with my client and I believe he'll find your idea more appealing. Thanks for the input.

10-22-2004, 07:33 AM
you're welcome :thumbsup:

good luck with your client and let me know if you would write or find a javascript that can insert text at the clicked position in a textarea :)

10-25-2004, 05:11 AM
Hi Raf

I got one that does it via buttons (ie click button, insert text in textarea at click position), I haven't been able to do it via drop down yet, working on it. Here's the code for the button->textarea js.

<script language="javascript" type="text/javascript">
function insertAtCursor(myField, myValue)
//IE support
if (document.selection)
sel = document.selection.createRange();
sel.text = myValue;
else if (myField.selectionStart || myField.selectionStart == '0')
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
myField.value += myValue;

browser = navigator.appName;
if (browser == "Netscape")
function emoticon(text)
insertAtCursor(document.replypost.comment, text)
function getSel()
if (document.selection) txt = document.selection.createRange().text;
else return;
return txt;
function emoticon(text)
insertAtCursor(document.replypost.comment, text)

in the form section

<a href="javascript:emoticon(':D')"><img src="smilies/vhappy.gif" alt=":D" border="0"></a>
<a href="javascript:emoticon(':)')"><img src="smilies/smile.gif" alt=":)" border="0"></a>


yay. I managed to get my drop down value to be inserted into the cursor position in the textarea. I implement the js functions into my form:

<div><strong>Insert Image:</strong><br>
<select name="imageselect" onchange="var select = document.newmail.imageselect;
var value = select.options[select.selectedIndex].value; emoticon(value);">
<option value="">Select Image</option>
<option value=""></option>
$query = "select name, id from newsletter_image where usedflag='N' order by name ";
$rs = db_query($query);

while ($row = mysql_fetch_array($rs))
$name = stripslashes($name);
echo '<option value="['.$id.']">'.$name.'</option>';


10-25-2004, 08:09 AM
Sorry I ran into a problem in the processing php script.

I have set the images to be entered in [img=1] for image id =1 (in database) and after the submitting the form, I got stuck in the processing section where I tried to replace [img=1] to <img src="$name"> where I get $name from the query to the database by passing in the $id value.

[img=1] should pass in 1 into the database and get the filename (name) in return. The code I have :

$subject = mysql_escape_string(trim(strip_tags($_POST['subject'])));
$content = mysql_escape_string(trim($_POST['content']));

if(empty($subject) || empty($content))
die ('Error. subject and content are required. Please click back and enter the values.');

// regex to change all image values

$qImgList = "select id, image from newsletter_image where usedflag='N' ";
$rsImgList = db_query($qImgList);
$row = mysql_fetch_array($rsImgList);

how to i replace [img=$id] to <img src="$name"> in $content? Sorry, I've been looking at the manual on the various ereg, preg_match, preg_replace() functions etc but I'm just getting more confused. Can someone advise me? thanks alot.

10-25-2004, 09:18 AM
thanks for the javascript. gonna try it out later.

about your replaceproblem: usually problems don't need to be solved but avoided. reread my advice carefully: i'd create the complete imagetag when you build the dropdown. This way, no replaces are required + the user can still alter the html-code if he want's. Only problem --> it's probably not gonna be XHTML-values since the attributevalues can't contain double-quotes ...

Else, i'd create 2 arrays and stoer them in sessionvariables: one with the optionvalues (like "[img1]" or the imagename or so) and one with the corresponding imagetags. This way, you can simply replace them with one str_replace()
regex-replaces are always slower, and certainly if you need to do extra querying when processing the form.
if you work with the 2 complementary arrays, then you only need 1 select for both the formbuilding and formprocessing.

if you wan me to write it out, then just post the design of that imagetable (which columns you need, their name and function). or else, check the manual for the str_replace(). There's an example inthere to do a str_replace with 2 complementary arrays.

10-25-2004, 10:18 AM
ahh thanks. I'm suddenly seeing a light bulb. hehe. i'll give it a try, putting the whole image name in the drop down is a killer idea.. Saved me the trouble of replacing it. :) thanks

10-25-2004, 10:40 AM
Hi raf

I tested out the option where the full path and url of the image is passed from the select drop down to the textarea. Works beautifully however I realised I needed the image id to link the newsletter so that I can filter out which images has been used and delete the images when deleting selected newsletter. I guess that'll mean that I'll need the session option you mentioned.

// my newsletter_content table
CREATE TABLE `newsletter_content` (
`id` smallint(3) NOT NULL auto_increment,
`subject` varchar(80) NOT NULL default '',
`content` text NOT NULL,
`postdate` datetime NOT NULL default '0000-00-00 00:00:00',
`sendflag` enum('Y','N') NOT NULL default 'N',
`folder` varchar(12) NOT NULL default '0',

// table to store images
CREATE TABLE `newsletter_image` (
`id` mediumint(4) NOT NULL auto_increment,
`name` varchar(50) NOT NULL default '',
`image` varchar(30) NOT NULL default '',
`postdate` datetime NOT NULL default '0000-00-00 00:00:00',
`usedflag` enum('Y','N') NOT NULL default 'N',
`newsletter_id` mediumint(3) NOT NULL default '0',
KEY `usedflag` (`usedflag`)

How should I use the session methods? Sorry to trouble you, thanks so much for your time.

10-25-2004, 11:49 AM
Hmm. That changes it a bit.

2 options:
- either build the collection of selected images clientsided, by using a javascriptarray to link the imagetag to the PK of the image in the imagestable. You then update a hidden formfield by adding the PK to it, each time an image is selected from the dropdown. But this isn't universal and can get messy if the user then starts adding and removing tags.
- use the arrays to replace the inserted 'placeholder' with the imagetag (one str_replace() for all placeholders), but then you'll still need a regex to build the collection of included images ... (parsing the string and filter out the tags and then extract the PK or lookup the ID in an array)

How many images are we talking about? A few dozens or hundreds?

i'll write it out this evening (at work now)

10-25-2004, 08:54 PM
OK. To build the complementary arrays from the db:

$sql = "SELECT `id`, `name`, `image` FROM newsletter_image";
$result = mysql_query($sql) or die ('Queryproblem.');
if (mysql_num_rows($result) > 1){
$arr_tags = array();
$arr_path = array();
$arr_id = array();
$form = '<select etc>
<option value="0">Choose an option...</option>';
while ($row = mysql_fetch_assoc($result)){
$tag = '[img_' . $row['name'] . ']'; // this is more userfriendly then [img_12] or so
$arr_id2tag[] = ($row['id']=>$tag);
$arr_tags[] = $tag;
$arr_path[] = '<img id="img'. $row['id'] .'" src="'. $row['image'].'" alt="Image '. $row['name'] .'" />'
$form .='<option value="'. $tag .'">'. $row['name'] .'</option>';
$form .= '</select>';

$_SESSION['ses_arr_tags'] = $arr_tags;
$_SESSION['ses_arr_path'] = $arr_path;
$_SESSION['ses_arr_id2tag'] = $arr_id2tag;
echo 'No images found.';

You maybe need to adjust the sql and certainly the selecttag. but this is basically all you need to build the arrays and dropdown. (just echo $form; to display)

then, after the form is posted, replace the tags by the path.

$postedtext = $_POST['form_textarea']; // change the name of the formfield...
$arr_tags = $_SESSION['ses_arr_tags'];
$arr_path = $_SESSION['ses_arr_path'];
$arr_id2tag = $_SESSION['ses_arr_id2tag'];
$text_replaced = str_replace($arr_tags, $arr_path, $postedtext);
/*$textreplace now contains the output you need
Now get the ID's of the inserted tags. This can be done with a regex, which might be faster. */
$arr_collection = array();
foreach($arr_id2tag as $key=>$tag){
if (strpos($postedtext, $tag) !== False){
$arr_collection[] = $key;
//$arr_collection is now an array with all included images their key

Untested code but this is basically all you need. If speed is realy important, you can build the tags like [img_xx] (where xx is the PK-value), and you can then get the xx out of it with a regex, but it's less userfriendly, and i doubt if you'd notice any difference in processingtime (strpos is real fast).

10-26-2004, 01:48 AM
wow. not easy at all. hehe. I'll try to work in the code and post the progress. thanks so much. :thumbsup: