Manipulating the dom

HEY guys so i wanted to know how can i write something on the website and it should be added to the script. Here’s my website http://papaya.byethost7.com/english.html . you can see an upload button top right . SO when i type something and press upload i want it to get combined with the list on the screen. Like if i type DEADPOOL i want it to get added to the list under letter D thats the starting lettter of deadpool I hope i am clear… i am just a beginner and i got to know this could be done by php which i know nothing about .Plz help me out here… Thanks in advance!!

Where is the data for that list coming from?

If it is currently hard-coded into the HTML you should consider keeping it somewhere else.

There are quite a few options, each with pros and cons. eg.

A file with an array of values.
A file with comma separated values
A file with XML elements
A database with fields

Things to consider are
how much data do you predict there will be
how often is the data going to change
what ways is the data going to be used

As a general rule, always plan for the unexpected.
For example,
you may think it will surely never get more than 1000, but then, later …
you may think it will only be you rarely adding to it, but then, later …
you may think it will only be used to populate a web page, but then, later …

I think most prefer to keep data in databases because doing so is flexible and allows room to grow more easily.
So unless you are absolutely certain that none of the “but laters” will come back to bite IMHO that’s what you should do.

2 Likes

Here’s a quick and dirty example for you to study and play with.
There’s a lot to it that might be new to you, and there’s more than enough room for improvement.

So it’s more a “proof of concept”, which should quickly demonstrate how a file writing approach could become unwieldy. Any questions, please ask.

<?php
error_reporting(E_ALL);
ini_set('display_errors', 'true');

$test_array = array(
            "argentina"
            , "azerbaijan"
            , "burundi"
            , "djibouti"
            , "Guatemala"
            , "liechtenstein"
            , "jamaica"
            , "luxembourg"
            , "Peru"
            , "Mexico"
            , "ireland"
            , "Romania"
            , "singapore"
            , "Nepal"
            , "spain"
            , "Sweden"
            , "taiwan"
            , "Venezuela"
            );
function listed_items($item_array) {
natcasesort($item_array);
 $output = "";
 $first_letter = "";
 foreach($item_array as $item) {
  $current_letter = strtoupper(substr($item, 0, 1));
  if ($current_letter !== $first_letter) {
    $first_letter = $current_letter;
    if ($output === "") {
      $output .= $current_letter . "<ul>"; 
    } else {
      $output .= "</ul>\r\n" . $current_letter . "<ul>"; 
    }
  }  
  $output .= "<li>" . ucfirst(strtolower($item)) . "</li>\r\n";
 }
 $output .= "</ul>";
 return $output;
}

if ( ($_SERVER['REQUEST_METHOD'] === "POST") 
    && isset($_POST['text_input']) 
    && (trim($_POST['text_input']) !== '') ) {
  array_push($test_array, trim($_POST['text_input']) );
  $list_display = listed_items($test_array);
} else {
  $list_display = listed_items($test_array);
}
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Adding Items - Using an Array</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
</style>
</head>
<body>
<h1>Adding Items - Using an Array</h1>
<form id="form" action="<?php echo basename(__FILE__) ; ?>" method="post">
  <fieldset>
    <legend>Add an Item</legend>
	  <label for="text_input">Item: </label>
	  <input type="text" id="text_input" name="text_input" value=""/>
	  <input type="submit" id="submit" value="Submit" />
  </fieldset>
</form>
 <div>
   <?php echo $list_display; ?>
 </div> 
</body>
</html>
1 Like

I tried running the program but there’s an error…could you just check it once??? Also i should save the file extension with .html right??

An error? AFAIK it doesn’t have anything that’s “new” or requires any particular setting to be enabled.
Though I could very well have missed something.

What did the error message say?

No, not unless you have your server set up to run html files though the PHP engine.
They are PHP files so easier to just give them the php extension.

Do you have a localhost server to test on?
If not, though they maybe aren’t the most “professional” setup, packages such as WAMP, XAMPP, EasyPHP, etc are relatively easy to get going and are perfectly fine for beginner learning purposes.

Then you go to them by opening your browser and going to
http://localhost/my_file.php
or
http://127.0.0.1/my_file.php

I have a server set up so ill test it now and let you know.

1 Like

its working perfectly…:sweat_smile: Thanks a lot…

2 Likes

what should i do if i wanna style the list like make it appear in coloum ans padding and stuff. What id should i use for css??

Great!

The way I like to learn, which may not work for you, but might.
Is to save a copy of a file that’s working. eg.
myfile-backup-1.php
then make changes to myfile.php a little at a time and testing often.

After I make a few changes and everything still works, I save another copy
myfile-backup-2.php
and make more changes.

Eventually I’ll break something that I won’t be able to figure out why or how to fix it.
I might save it as myfile-broken-1.php if I think I may want to try some more.
Then I make a copy of my most recent “backup” as myfile.php and try again.

The key point is to make sure you have a working copy of the file to start with in case you need to scrap changes and start over again.

One thing that many, even not-so-new developers, skimp on is user input validation / sanitization
Because you have a form, even if it is only you using it, it would be a good habit to get to at least think about it while you’re writing code that uses user supplied input.

4 years old, but still worth a quick read
Form Validation with PHP

2 Likes

CSS isn’t my strong point and I’d likely be learning right alongside you. So don’t trust me on this

You shouldn’t need any ids or classes yet as the mark-up is simple (not many tags yet)
Try putting the CSS in the <style> as shown and test in all the different browsers you own.

<style type="text/css">
div {
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
}
</style>

If you want to follow the design path more, and this you can trust me on it would be best to to open the file in your browser, click “view-source”, copy everything from <!DOCTYPE HTML> to </html> and start a topic in the HTML & CSS category asking how it could be improved.

Others better at design than I am are sure to help. If the HTML needs to be changed, it should be a simple matter to get the PHP to output what it needs to be like.

nope i got it… i thought i deleted the reply… Still thanks a lot for everything…

I think this will be more like your original example

function listed_items($item_array) {
natcasesort($item_array);
 $output = "<ul>";
 $first_letter = "";
 foreach($item_array as $item) {
  $current_letter = strtoupper(substr($item, 0, 1));
  if ($current_letter !== $first_letter) {
    $first_letter = $current_letter;
    if ($output === "<ul>") {
      $output .= "\r\n<li><ul class=\"" . $current_letter . "\">"; 
    } else {
      $output .= "\r\n</ul></li>\r\n<li><ul class=\"" . $current_letter . "\">"; 
    }
  }  
  $output .= "\r\n  <li>" . ucfirst(strtolower($item)) . "</li>";
 }
 $output .= "\r\n</ul></li>\r\n</ul>\r\n";
 return $output;
}

and

div {
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
}
ul {
 list-style-type: none;
 padding: 0;
}
ul ul:before { 
 content: attr(class);
}
ul ul {
 margin: 0 0.5em 0.5em 0;
}
ul li {
 font-size: 1.5em;
}
ul li ul li {
 font-size: .75em;
}

If it isn’t to your liking and you can’t manage to figure out how to style it to the way you want it, I’m pretty much at my limits when it comes to design, so best to start a topic in HTML & CSS posting the mark-up you have, a link to a Copepen or example live page and ask there how it could be changed

Check out this webpage… http://papaya.byethost7.com/english.html … When you click on the first movie christmas carol you get an overlay of people who have it and their contact that is email id and their phone no. So there will be x no of poeple who will have the same movie and also for each movie the members will change. What do you think should i do? Keep a database or just keep adding in the code? Plus is it possible to make a submit page where in they type the movie that they have and their contact info and when they submit it gets added to the list and their contact info gets added to the overlay?? thank you in advance…

A database sounds good. There will be some work in the initial setup, but altering the html by hand every time will keep you busy forever.

Yes, this is possible with html forms and php processing, plus you will need a database to store the input.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.