Remember that project2 created a new web page in the following way:
PHP made this easy because of thee functions:
The new web pages we created had no navigation! This sucks.
Wouldn't it be great if the navigation menu dynamically updated based on the new files we created? Yes, of course, this would be great!
Specifically, here is what we want to do: Ff we created three web pages using our form, each web page would have navigation links to the other created pages. If we added a 4th web page, the other three pages should be updated to have links to the newly created 4th page.
Instructions on how to add navigation are below; just read for now, so you better understand how we are going to dynamically add navigation.
The problem with our web pages is that they are static files. To update them would require opening each file and either adding/replacing the navigation each time a new file was created. This requires some complex parsing and lot of file input and output. There is a better way.
Rather than hard code the navigation into the pages, we are going to insert a function that generates the navigation each time the page is requested. We are going to do this in four simple steps
Step 1: Write a function to automatically generate a navigation menu based on the names of the files in a folder. Store it in a file called functions.php
function addNavigation() {
echo '
<nav>
<ul>';
// Open the local folder, i.e. the one with all your created pages
// Read the name of each file
// For each file, echo a properly structured hyperlink to the file
echo'
</ul>
</nav>';
For help on how to read the file name of the current directory see: http://php.net/manual/en/function.readdir.php
Step 2: In template.html, import functions.php and add the function call.
<? import 'functions.php' ?>
<? addNavigation(); ?>
Step 3: When your program generates a new page, instead of saving each files as .html files, save them as .php files. Thus, the addNavigation function will be executed each time the page is requested.
Step 4: Now that we have a function to generate the navigation links, add this funciton call to your Create Page form, so that we can easily visit the pages we just created.
To edit an existing page, we need a way to select a page. Luckily, you already did this in Task 1. You created navigation to each page. Now all we have to do is add an Edit Link to each page
And, we need to somehow load the contents and other properties (pagename, color, width, etc.) into a form. Luckily, you already created the form in Project2, i.e., the create page form. The only difference is that we have to get the pagename and contents into the form.
Important Concept: Editing a web page and creating a web page are very similar processes.
Explanation: As long as you use an existing page name, your Create Page form can be used to update an existing web page by rewriting the file. In other words, the process of creating a page (writing a file) is the same as updating a page (rewriting a file). The only difference is that creating a new page starts with empty contents, but editing an existing page requires putting the existing content into the form.
We are going to edit pages by following two steps:
Step 1: Add an edit link to each newly created page. Add it anywhere you want. This link will only appear if we have previously logged in. Remember, we use sessions to remember if we are logged in or logged out. To add this link, simply insert this code anywhere in the body of your template.html
<?
if ($_SESSION['loggedIn'])
echo '<a href="project2.php?action=edit&pagename=[[[pagename]]]">Edit page</a>';
?>
Remember that when a page is first created we insert the pagename in two places (<title> and <h2>). By adding this extra placeholder, the page name will also be inserted into this hyperlink.
Step 3: When the edit link is clicked, we will request project2.php and we will pass two URL parameters, the action ("edit") and the name of the page to edit.
Now your project2.php script must check to see if the "edit" action was passed in the URL and then it calls a function called parsePage.
if ($_GET['action'] == 'edit') {
$contents = parsePage();
$message = 'You just parsed the page';
}
Here is what parsePage looks like:
function parsePage() {
// Use the pagename from the URL to get the file name
$filename = str_replace(" ", "-", $_GET['pagename']);
$filename = $filename . ".php";// Put the file in a string
$file = file_get_contents($filename);
// Create a new DOM parser
$DOM = new DOMDocument;
@$DOM->loadHTML($file);// Use the parser to get the main_article contents
$article = $DOM->getElementById('main_article');
$p = $article->getElementsByTagName('p');
$contents = $p->item(0)->nodeValue;
return $contents;
}
Finally, we can no longer simply echo the Create Page form, we must insert the content and pagename if they are not null:
function printCreatePageForm($contents) {
echo '<h2>Created Pages</h2>';
generateNav();
echo '<h2>Create or Edit a page</h2>
<form action="project2.php" method="post">
<label for="pagename">Page name</label>
<input type="text" name="pagename" value="',$_GET['pagename'],'"/><br />
<br />
<label for="content">Page content</label> (insert your html here)<br />
<textarea name="contents" rows="6" cols="60">',$contents,'
</textarea><br />
<br />
<label for="color">Page color</label><br />
<input type="radio" name="color" value="#248" /> <span style="color: #248">Blue</span><br />
<input type="radio" name="color" value="#824" /> <span style="color: #824">Red</span><br />
<input type="radio" name="color" value="#284" /> <span style="color: #284">Green</span><br />
<br />
<input type="submit" name="action" id="action" value="Create Page" />
<input type="submit" name="action" id="action" value="Logout" />
</form>
';
}
Your project2 should now have dynamic navigation and the ability to load an existing page into the Edit Form.