I want to make a linkpage where visitors can enter their webpage (title-url-description) and there are a few downloadable scripts around, but all I have found are for reciprocal linking. Does anybody have a simple php script for this purpose?
volum 0 Newbie Poster
Pro2000 29 Posting Whiz
Do you mean you want to create advertisements where visitors can type their websites titles, URLs and descriptions?
volum 0 Newbie Poster
Advertisements for websites, yes, a page with only links to websites. With a maximum of maybe 20 links and after the first 20, new added links replace oldest posts. If your link is replaced by another after some time, you need to revisit and enter your websites details again.
tnjiric 1 Newbie Poster
Are you familiar with jQuery syntax?
If you are I can write out the code for you using php and jquery that would work.
volum 0 Newbie Poster
No, I am not. But it could be interesting. I did find a cgi script that was cool but my webhotel does not allow cgi scripts.
tnjiric 1 Newbie Poster
Ok, first what you would have some input fields where user would enter url, webpage name and some description and OK button, to save the new input.
Just for the future reference I will call it:
urlField, webpageField, textArea,myOKButton. Those would be ID's of those elements in html.
First step you need to do is create an empty DIV tag somewhere where your information should be shown and give it an ID, for example we will say "myForm".
Only other thing you need to do is to link your jQuery script to your html. like this:
Use it between following tags like this:
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type=text/javascript src='myNewScript.js'></script>
<body>//First this is just declaration that $ sign will be used as jQuery selector
$(function() {
$("#myOKButton").click(function(){
urlFieldValue = $("#urlField").val();
webpageFieldValue = $("#webpageField").val();
textAreaValue = $("#textArea").val();
//so what this function does is saves everything what user has entered into fields (url, webpagename and textarea)
//Now this part of code adds the new link to our DIV tag
$("#myForm").append("<p class=\"webEntry\">"+urlFieldValue+webpageFieldValue+textAreaValue+"</p>.<br/>");
//This would add a simple paragaph containing in one line url , name and description,
//That you can arrange how ever you like just by writing html code inside of .append function.
});
}):Now what you would have to do, is create a function that will count every time the elements whose class is "web entry", and set an IF statement, if that number of elements is 20(limit of wanted links), erase the last one, and add this one, and if number of elements is smaller than 20, just add that new "web" to the page.
Now when you've read a little bit jQuery, tell me if you can follow me, and then if you can I can write out the rest of the code for you.
Best regards,
Toni
volum 0 Newbie Poster
Phew.... I just tried my way around in it but no... I think I will need a "plug'n'play" script:-)
tnjiric 1 Newbie Poster
Ok, no problem.
I'm currently at work, but this evening or afternoon, I'll write you a script and post it to you here, Plug'n play with documentation :D
volum 0 Newbie Poster
WOW, that sounds like something to look forward to:-*
Thanx!
tnjiric 1 Newbie Poster
I got a little time @ work so I created this code for you already:D
First of all,
I created 2 scripts for you, what they do is the following:
You have 3 fields , one for web page name, for URL and for description.
The assumed limit of the links in the list is 5 (just for testing purposes).
You enter the information,click the button "AddNewSite", and new website will be added to your list. If there are already maximum number of the links present in our list, the script deletes the last one, and puts the new one to the top of the list.
**IMPORTANT NOTE:
This code works in the browser(storing the values just in the current SESSION,you of course know that you will have to store these link information(URL, webpage,description) on some non-volatile storage, like database or upload it via FTP to some file that you will later on read.
But on the bright side, I've created a code for you that is well documented, so to make the necessary adjustments, it should be quite easy.
You don't have to change the logic, the logic for your issue is here and working, you just might later on want to change the source where you are storing\reading the data (url,webpagename, description) from.
Here is the code:
Create a new Folder, name it as you like.
Copy this code, and save this script into your folder as "index.php" (of course without quotes).
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="01/01/2009">
<meta name="revisit-after" content="15 days">
<title>My Web page</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type=text/javascript src='myScript.js'></script>
<body>
<form style="float: left; margin-right: 30px; ">
<!--Your New page Information-->
<h1>New Web Entry: </h1>
<b id="webPageCaption">WebPage Name: </b><br/>
<input type="text" id="myNameField" size="30"><br/>
<b id="urlCaption">URL: </b><br/>
<input type="text" id="myUrlField" size="30"><br/>
<b id="textAreaCaption">Description: </b><br/>
<textarea rows='10' cols='40' id="descriptionTextArea"></textarea><br/>
<input type='button' id="AddPage" value="AddNewSite">
</form>
<b>List of the advertising web sites:</b>
<div id="myOutput">
<!--This is my empty div where links of the entered web pages will appear.In the beginning this is empty-->
</div>
<textarea id="hiddenArea" style='display: none;'></textarea>
<!--This above is a hidden text area that I used as a buffer when copying the links when there are already 5 links present, so I needed to save just 4 of them somewhere-->
</div>
</body>
</html>Now, here is javascript\jQuery script that MUST be saved in the same folder in this case (or if you want just change the "src" parameter) in the html.
Copy this code, and save it as : "myScript.js" (also without quotes):
$(function() {
//Function that occures when AddNewSite button is pressed
$("#AddPage").click(function()
{
check = 0;
//checking if all fields have their values entered
if($("#myUrlField").val() != "")
{
check++;
}
else
{
$("#urlCaption").css("color","red");
$("#webPageCaption").css("color","black");
$("#textAreaCaption").css("color","black");
alert("Please enter Web Page URL in order to proceed!")
}
if($("#myNameField").val() != "")
{
check++;
}
else
{
$("#webPageCaption").css("color","red");
$("#urlCaption").css("color","black");
$("#textAreaCaption").css("color","black");
alert("Please enter your Web Page name in order to proceed!")
}
if($("#descriptionTextArea").val() != "")
{
check++;
}
else
{
$("#textAreaCaption").css("color","red");
$("#urlCaption").css("color","black");
$("#webPageCaption").css("color","black");
alert("Please enter Web Page Description in order to proceed!")
}
//CHECK IS OK , EVERY FIELD HAS ITS INPUT:
//Do this when everything is ok
if(check == 3)
{
$("#urlCaption").css("color","black");
$("#webPageCaption").css("color","black");
$("#textAreaCaption").css("color","black");
///checking for the number of pages already there
//by this line we get the number of sites already on our list
//we assume , that our LIMIT is 5 links. (this is just so you can easily test it, to modify it, just change the value in the ifstatement, (line 62))
numberOfExistingSitesInTheList = $(".listedSite").size();
alert(numberOfExistingSitesInTheList = $(".listedSite").size());
//If there are less then 20 pages in the list, add the new page at the top of the list
if(numberOfExistingSitesInTheList < 5)
{
alert(numberOfExistingSitesInTheList = $(".listedSite").size());
//If there is less then 5 sites already on the list, add another one with their ID for 1 bigger then last page,
//example if there were 3 links already there..next link will have id listedSite4
id = "listedSite"+(numberOfExistingSitesInTheList+1);
$("#myOutput").prepend("<p value=\"working\" class=\"listedSite\" id=\""+id+"\" > <b>URL:</b> "+$("#myUrlField").val()+"<b>Name:</b> "+$("#myNameField").val()+" <b>Description:</b> "+$("#descriptionTextArea").val()+"</p><br/>");
}
else
{
if(numberOfExistingSitesInTheList == 5)
{
//If there are already 5 inputs there, we are deleting the last one and adding the new one to the top.
$(".listedSite:last").remove();
id = "listedSite"+(numberOfExistingSitesInTheList+1);
$("#myOutput").prepend("<p value=\"working\" class=\"listedSite\" id=\""+id+"\" > <b>URL:</b> "+$("#myUrlField").val()+"<b>Name:</b> "+$("#myNameField").val()+" <b>Description:</b> "+$("#descriptionTextArea").val()+"</p>");
}//end of if
}//end of else
}//end of clause if correct input is in the fields
});//end of click function
});Maybe it's a bit complicated if you've never tried jQuery, but if you read the comments you'll figure it out very fast.
The main concepts that will help you understand jQuery code are:
$ - selector
# - stands for ID
. - stands for class
Few short Examples:
Schema :
jQuery Code => explanation
$("#myInputField").val() ==> gets the value of the field with id = myInputField
$(".myCaptions").val() => gets the value of the captions(labels) that have class = myCaptions
$("div").width(200) => set width of ALL div elements to 200px.
$("#myTitle").css('color','red') => for element that has id "myTitle" change his css option "color" to "red".
and 1 complex example:
$(".myClass#main").attr('id') = 5 => gets the element that has class "myClass" and id "main" and sets his attribute "id" to value 5.
Those were some guidelines to help you understand basics and simplicity of jQuery.
I hope this code is helpful to you and if you have any questions or concerns, just let me know and I'll be glad to help you.
Best regards,
Toni
volum 0 Newbie Poster
This is faboulous, just what I wanted! Thank you SO much! There is a little thing or two I would like to be altered but in general this is pretty much exactly what I wanted.
To give you an idea of the alterations needed, I will need to give you a couple of links but in a private message, I hope that's okay?
tnjiric 1 Newbie Poster
You're welcome! :)
Absolutely, just send anything you need in a private message with explained alterations that you need, and I'll try to help you.
Cheers,
Toni
tnjiric 1 Newbie Poster
Please, just let me know that you've received my reply to your private message, because for some strange reason, my sent messages are not saved at all, or reply notifications.
volum 0 Newbie Poster
Sure, I had the same problem. You need to ask it to save a sent message:-)
But I got your reply, thanks!
volum 0 Newbie Poster
The result is here, thank you very much!
I ended up altering a bit in html myself but I think the end result for my linkpage is satisfying:-)
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.