Page 1 of 1

How to properly organize a website?

Posted: Sat Jan 30, 2010 3:17 pm
by RussianVodka
Hello, I'm a newb at web development, but am pretty proficient at developing desktop software. Currently I am working on a web frontend to an inventory database at work, and on a personal website at home. At work I am using java and JSPs, and for the personal website I'm using PHP (because that's all that my $10/yr webhost supports, and I don't want to switch to something that's $10/month).

Also, you should know that for development I'm using exclusively NetBeans. The only other HTML editor I have access to is Microsoft Expression Web, but I don't like it very much. Dreamweaver is too expensive for me.

So, my main question is how to organize a website. Because I think right now both my work and personal websites are organized very oddly. Here is the body of index.php from my personal site:

Code: Select all

<body>
        <div id="wrap">
            <div id="header">
                <h1>Yet Another Homepage</h1>
                <h2>By (My Name)</h2>
            </div>
 
            <div id="menu">
                <ul>
                    <li><a href="index.php" >Home</a></li>
                    <li><a onclick="changePageAndNav('Projects/main.php', 'Projects/projectsNav.php');">Projects</a></li>
                    <li><a onclick="changePageAndNav('About/main.php', 'About/aboutNav.php');">About Me</a></li>
                </ul>
            </div>
 
            <div id="content">
                <div class="right">
                    <?php
                    if ($_GET["page"] == null) {
                        include "Home/main.php";
                    } else {
                        include $_GET["page"];
                    }
                    ?>
                </div>
 
                <div class="left">
                    <?php
                    if ($_GET["subNav"] != null) {
                        include $_GET["subNav"];
                    }?>
                </div>
 
                <div id="bottom">
                    <a onClick="toTop();">Back to Top</a>
                </div>
 
            </div>
 
 
            <div id="footer">
                <p>&copy; (My Name), 2009</p>
            </div>
        </div>
    </body>
 
Basically, the index.php file acts as a wrapper around all the other content on my page. When ever you click on a Menu or SubNav link it will call the javascript function changePageAndNav which just changes the URL parameters, it's code is:

Code: Select all

 function changePageAndNav(page, subNav){
    window.location = "?page=" + page + "&subNav=" + subNav;
}
This will reload index.php and will cause it to include the proper page and navigation bar. The included pages contain the bare minimum amount of code, without any body tags.
The plus side to doing things this way is consistent layout of the page, and very little duplicated code. And if I ever want to change the layout, I only need to change index.php.

On the negative side, I am left with large ugly url's that people can mess with. Such as:
Can anyone suggest a better way to organize the website?

Re: How to properly organize a website?

Posted: Sun Feb 07, 2010 1:43 am
by limitdesigns
I don't think you'd be able to do this with $10/yr hosting, but if you have access to the .htaccess file and your server runs apache, you could do a mod_rewrite to take every URL that doesn't point directly to a file to some rerouting script. That way, you could have clean URLs like http://www.domain.com/projects/project-name/.

Re: How to properly organize a website?

Posted: Sun Feb 07, 2010 3:59 am
by Luke
This isn't an answer to your question, but I think it's important to tell you anyway. NEVER just include whatever page the user supplies in the URL. This is a major security hole. This allows the user to run any script that is accessible to the web server. Rather than this:

Code: Select all

<?php include $_GET['page']; ?>
Do something like this

Code: Select all

<?php
switch ($_GET['page']) {
    case "contact":
        include "contact.php";
        break;
    case "about":
        include "about.php";
        break;
    default:
        include "index.php";
        break;
}
?>
Or something like this:

Code: Select all

<?php
$allowedPages = array('contact', 'about', 'index');
if (in_array($_GET['page'], $allowedPages)) {
    require $_GET['page'] . ".php";
}
?>
That way only the pages you specify are allowed to be included (it's called a whitelist). This is much more secure.

Re: How to properly organize a website?

Posted: Thu Feb 11, 2010 1:48 am
by Griven
Ditto to what Luke said. Whitelists are the way to go with what you're doing. If the $_GET['page'] variable is set, you'll want to vet it to make sure that someone isn't putting dots in there, trying to access files outside of your webroot.

You may want to look into an MVC framework such as Codeigniter (my fav) or CakePHP. The installation of both of these is very simple and their features, such as URL rewriting, are supported on a lot of hosts.

As far as how you've laid out your code here, I think you're doing fine overall. However, the use of javascript to change pages seems superfluous to me. Personally, I would just use HTML code, or use PHP to generate the links for you.